etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #122 from BEDOLAGA-DEV/dev

Browse Source 
Dev
This commit is contained in:
Egor
2026-01-31 18:06:33 +03:00
committed by GitHub
parent 1dcd5fb94e 0bd84bb277
commit 706e3b5c76
4 changed files with 624 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/api/adminBroadcasts.ts
View File

@@ -1,6 +1,8 @@
import apiClient from './client';
// Types
export type BroadcastChannel = 'telegram' | 'email' | 'both';
export interface BroadcastFilter {
key: string;
label: string;
@@ -21,6 +23,10 @@ export interface BroadcastFiltersResponse {
custom_filters: BroadcastFilter[];
}
export interface EmailFiltersResponse {
filters: BroadcastFilter[];
}
export interface TariffForBroadcast {
id: number;
name: string;
@@ -55,6 +61,24 @@ export interface BroadcastCreateRequest {
media?: BroadcastMedia;
}
export interface EmailBroadcastCreateRequest {
target: string;
subject: string;
html_content: string;
}
export interface CombinedBroadcastCreateRequest {
channel: BroadcastChannel;
target: string;
// Telegram fields
message_text?: string;
selected_buttons?: string[];
media?: BroadcastMedia;
// Email fields
email_subject?: string;
email_html_content?: string;
}
export interface Broadcast {
id: number;
target_type: string;
@@ -79,6 +103,10 @@ export interface Broadcast {
created_at: string;
completed_at: string | null;
progress_percent: number;
// New fields for channel support
channel?: BroadcastChannel;
email_subject?: string | null;
email_html_content?: string | null;
}
export interface BroadcastListResponse {
@@ -105,7 +133,7 @@ export interface MediaUploadResponse {
}
export const adminBroadcastsApi = {
// Get all available filters with counts
// Get all available filters with counts (for Telegram)
getFilters: async (): Promise<BroadcastFiltersResponse> => {
const response = await apiClient.get<BroadcastFiltersResponse>(
'/cabinet/admin/broadcasts/filters',
@@ -113,6 +141,14 @@ export const adminBroadcastsApi = {
return response.data;
},
// Get email filters with counts
getEmailFilters: async (): Promise<EmailFiltersResponse> => {
const response = await apiClient.get<EmailFiltersResponse>(
'/cabinet/admin/broadcasts/email-filters',
);
return response.data;
},
// Get tariffs for filtering
getTariffs: async (): Promise<BroadcastTariffsResponse> => {
const response = await apiClient.get<BroadcastTariffsResponse>(
@@ -140,12 +176,35 @@ export const adminBroadcastsApi = {
return response.data;
},
// Create and start broadcast
// Preview email broadcast (get recipients count)
previewEmail: async (target: string): Promise<BroadcastPreviewResponse> => {
const response = await apiClient.post<BroadcastPreviewResponse>(
'/cabinet/admin/broadcasts/email-preview',
{
target,
},
);
return response.data;
},
// Create and start broadcast (Telegram only - legacy)
create: async (data: BroadcastCreateRequest): Promise<Broadcast> => {
const response = await apiClient.post<Broadcast>('/cabinet/admin/broadcasts', data);
return response.data;
},
// Create email broadcast
createEmail: async (data: EmailBroadcastCreateRequest): Promise<Broadcast> => {
const response = await apiClient.post<Broadcast>('/cabinet/admin/broadcasts/email', data);
return response.data;
},
// Create combined broadcast (Telegram, Email, or Both)
createCombined: async (data: CombinedBroadcastCreateRequest): Promise<Broadcast> => {
const response = await apiClient.post<Broadcast>('/cabinet/admin/broadcasts/send', data);
return response.data;
},
// Get list of broadcasts
list: async (limit = 20, offset = 0): Promise<BroadcastListResponse> => {
const response = await apiClient.get<BroadcastListResponse>('/cabinet/admin/broadcasts', {

21
src/locales/en.json
View File

@@ -971,8 +971,25 @@
"registration": "By registration",
"activity": "By activity",
"source": "By source",
"tariff": "By tariff"
}
"tariff": "By tariff",
"email": "Email users"
},
"channel": {
"telegram": "Telegram",
"email": "Email",
"both": "Both"
},
"selectChannel": "Broadcast channel",
"telegramSection": "Telegram broadcast",
"emailSection": "Email broadcast",
"selectEmailFilter": "Select email audience",
"selectEmailFilterPlaceholder": "Select filter...",
"emailSubject": "Email subject",
"emailSubjectPlaceholder": "Enter email subject...",
"emailContent": "Email content",
"emailContentHint": "HTML supported",
"emailContentPlaceholder": "<p>Hello, {{user_name}}!</p>\n<p>Your message here...</p>",
"emailVariables": "Available variables"
},
"settings": {
"title": "System Settings",

21
src/locales/ru.json
View File

@@ -988,8 +988,25 @@
"registration": "По регистрации",
"activity": "По активности",
"source": "По источнику",
"tariff": "По тарифу"
}
"tariff": "По тарифу",
"email": "Email-пользователи"
},
"channel": {
"telegram": "Telegram",
"email": "Email",
"both": "Оба"
},
"selectChannel": "Канал рассылки",
"telegramSection": "Telegram-рассылка",
"emailSection": "Email-рассылка",
"selectEmailFilter": "Выберите email-аудиторию",
"selectEmailFilterPlaceholder": "Выберите фильтр...",
"emailSubject": "Тема письма",
"emailSubjectPlaceholder": "Введите тему письма...",
"emailContent": "Содержимое письма",
"emailContentHint": "Поддерживается HTML",
"emailContentPlaceholder": "<p>Здравствуйте, {{user_name}}!</p>\n<p>Текст вашего письма...</p>",
"emailVariables": "Доступные переменные"
},
"settings": {
"title": "Настройки системы",

706
src/pages/AdminBroadcasts.tsx
View File

@@ -7,7 +7,8 @@ import {
Broadcast,
BroadcastFilter,
TariffFilter,
BroadcastCreateRequest,
BroadcastChannel,
CombinedBroadcastCreateRequest,
} from '../api/adminBroadcasts';
// Icons
@@ -111,6 +112,22 @@ const ChevronDownIcon = () => (
</svg>
);
const TelegramIcon = () => (
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
</svg>
);
const EmailIcon = () => (
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
/>
</svg>
);
// Status badge component
const statusConfig: Record<string, { bg: string; text: string; labelKey: string }> = {
queued: {
@@ -156,6 +173,38 @@ function StatusBadge({ status }: { status: string }) {
);
}
// Channel badge component
function ChannelBadge({ channel }: { channel?: BroadcastChannel }) {
const { t } = useTranslation();
if (!channel || channel === 'telegram') {
return (
<span className="flex items-center gap-1 rounded-full bg-blue-500/20 px-2 py-0.5 text-xs text-blue-400">
<TelegramIcon />
<span className="hidden sm:inline">Telegram</span>
</span>
);
}
if (channel === 'email') {
return (
<span className="flex items-center gap-1 rounded-full bg-purple-500/20 px-2 py-0.5 text-xs text-purple-400">
<EmailIcon />
<span className="hidden sm:inline">Email</span>
</span>
);
}
return (
<span className="flex items-center gap-1 rounded-full bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
<TelegramIcon />
<span className="mx-0.5">+</span>
<EmailIcon />
<span className="hidden sm:inline">{t('admin.broadcasts.channel.both')}</span>
</span>
);
}
// Filter labels (labelKey pattern: store i18n keys, resolve at render time with t())
const FILTER_GROUP_LABEL_KEYS: Record<string, string> = {
basic: 'admin.broadcasts.filterGroups.basic',
@@ -165,6 +214,7 @@ const FILTER_GROUP_LABEL_KEYS: Record<string, string> = {
activity: 'admin.broadcasts.filterGroups.activity',
source: 'admin.broadcasts.filterGroups.source',
tariff: 'admin.broadcasts.filterGroups.tariff',
email: 'admin.broadcasts.filterGroups.email',
};
// Create broadcast modal
@@ -178,7 +228,14 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
const queryClient = useQueryClient();
const fileInputRef = useRef<HTMLInputElement>(null);
// Channel selection
const [channel, setChannel] = useState<BroadcastChannel>('telegram');
// Common fields
const [target, setTarget] = useState('');
const [emailTarget, setEmailTarget] = useState('');
// Telegram fields
const [messageText, setMessageText] = useState('');
const [selectedButtons, setSelectedButtons] = useState<string[]>(['home']);
const [mediaFile, setMediaFile] = useState<File | null>(null);
@@ -186,28 +243,48 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
const [mediaPreview, setMediaPreview] = useState<string | null>(null);
const [uploadedFileId, setUploadedFileId] = useState<string | null>(null);
const [isUploading, setIsUploading] = useState(false);
const [showFilters, setShowFilters] = useState(false);
// Fetch filters
// Email fields
const [emailSubject, setEmailSubject] = useState('');
const [emailHtmlContent, setEmailHtmlContent] = useState('');
// UI state
const [showFilters, setShowFilters] = useState(false);
const [showEmailFilters, setShowEmailFilters] = useState(false);
// Fetch Telegram filters
const { data: filtersData, isLoading: filtersLoading } = useQuery({
queryKey: ['admin', 'broadcasts', 'filters'],
queryFn: adminBroadcastsApi.getFilters,
enabled: channel === 'telegram' || channel === 'both',
});
// Fetch Email filters
const { data: emailFiltersData, isLoading: emailFiltersLoading } = useQuery({
queryKey: ['admin', 'broadcasts', 'email-filters'],
queryFn: adminBroadcastsApi.getEmailFilters,
enabled: channel === 'email' || channel === 'both',
});
// Fetch buttons
const { data: buttonsData } = useQuery({
queryKey: ['admin', 'broadcasts', 'buttons'],
queryFn: adminBroadcastsApi.getButtons,
enabled: channel === 'telegram' || channel === 'both',
});
// Preview mutation
// Preview mutations
const previewMutation = useMutation({
mutationFn: adminBroadcastsApi.preview,
});
const previewEmailMutation = useMutation({
mutationFn: adminBroadcastsApi.previewEmail,
});
// Create mutation
const createMutation = useMutation({
mutationFn: adminBroadcastsApi.create,
mutationFn: adminBroadcastsApi.createCombined,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin', 'broadcasts'] });
onSuccess();
@@ -242,6 +319,20 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
return groups;
}, [filtersData]);
// Group email filters
const groupedEmailFilters = useMemo(() => {
if (!emailFiltersData) return {};
const groups: Record<string, BroadcastFilter[]> = {};
emailFiltersData.filters.forEach((f) => {
const group = f.group || 'email';
if (!groups[group]) groups[group] = [];
groups[group].push(f);
});
return groups;
}, [emailFiltersData]);
// Selected filter info
const selectedFilter = useMemo(() => {
if (!target || !filtersData) return null;
@@ -253,6 +344,11 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
return all.find((f) => f.key === target);
}, [target, filtersData]);
const selectedEmailFilter = useMemo(() => {
if (!emailTarget || !emailFiltersData) return null;
return emailFiltersData.filters.find((f) => f.key === emailTarget);
}, [emailTarget, emailFiltersData]);
// Handle file selection
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
@@ -303,30 +399,77 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
);
};
// Validation
const canSubmit = useMemo(() => {
if (createMutation.isPending || isUploading) return false;
if (channel === 'telegram') {
return !!target && !!messageText.trim();
}
if (channel === 'email') {
return !!emailTarget && !!emailSubject.trim() && !!emailHtmlContent.trim();
}
// Both
return (
!!target &&
!!messageText.trim() &&
!!emailTarget &&
!!emailSubject.trim() &&
!!emailHtmlContent.trim()
);
}, [
channel,
target,
messageText,
emailTarget,
emailSubject,
emailHtmlContent,
createMutation.isPending,
isUploading,
]);
// Submit
const handleSubmit = () => {
if (!target || !messageText.trim()) return;
if (!canSubmit) return;
const data: BroadcastCreateRequest = {
target,
message_text: messageText,
selected_buttons: selectedButtons,
const data: CombinedBroadcastCreateRequest = {
channel,
target: channel === 'email' ? emailTarget : target,
};
if (uploadedFileId) {
data.media = {
type: mediaType,
file_id: uploadedFileId,
};
// Telegram data
if (channel === 'telegram' || channel === 'both') {
data.message_text = messageText;
data.selected_buttons = selectedButtons;
if (uploadedFileId) {
data.media = {
type: mediaType,
file_id: uploadedFileId,
};
}
}
// Email data
if (channel === 'email' || channel === 'both') {
data.email_subject = emailSubject;
data.email_html_content = emailHtmlContent;
if (channel === 'both') {
data.target = target; // Use Telegram target as primary
}
}
createMutation.mutate(data);
};
const recipientsCount = previewMutation.data?.count ?? selectedFilter?.count ?? null;
const telegramRecipientsCount = previewMutation.data?.count ?? selectedFilter?.count ?? null;
const emailRecipientsCount =
previewEmailMutation.data?.count ?? selectedEmailFilter?.count ?? null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4">
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black/50 p-4">
<div className="my-4 w-full max-w-2xl rounded-xl bg-dark-800">
{/* Header */}
<div className="flex items-center justify-between border-b border-dark-700 p-4">
@@ -343,177 +486,346 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
{/* Content */}
<div className="max-h-[70vh] space-y-4 overflow-y-auto p-4">
{/* Filter selection */}
{/* Channel selection */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.selectFilter')}
{t('admin.broadcasts.selectChannel')}
</label>
<div className="relative">
<div className="flex gap-2">
<button
onClick={() => setShowFilters(!showFilters)}
className="flex w-full items-center justify-between rounded-lg bg-dark-700 p-3 text-left transition-colors hover:bg-dark-600"
onClick={() => setChannel('telegram')}
className={`flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-3 transition-colors ${
channel === 'telegram'
? 'bg-blue-500 text-white'
: 'bg-dark-700 text-dark-300 hover:bg-dark-600'
}`}
>
<div className="flex items-center gap-2">
<UsersIcon />
<span className={selectedFilter ? 'text-dark-100' : 'text-dark-400'}>
{selectedFilter
? selectedFilter.label
: t('admin.broadcasts.selectFilterPlaceholder')}
</span>
{recipientsCount !== null && (
<span className="rounded-full bg-accent-500/20 px-2 py-0.5 text-xs text-accent-400">
{recipientsCount} {t('admin.broadcasts.recipients')}
</span>
)}
</div>
<ChevronDownIcon />
<TelegramIcon />
<span>Telegram</span>
</button>
<button
onClick={() => setChannel('email')}
className={`flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-3 transition-colors ${
channel === 'email'
? 'bg-purple-500 text-white'
: 'bg-dark-700 text-dark-300 hover:bg-dark-600'
}`}
>
<EmailIcon />
<span>Email</span>
</button>
<button
onClick={() => setChannel('both')}
className={`flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-3 transition-colors ${
channel === 'both'
? 'bg-green-500 text-white'
: 'bg-dark-700 text-dark-300 hover:bg-dark-600'
}`}
>
<TelegramIcon />
<span>+</span>
<EmailIcon />
</button>
</div>
</div>
{showFilters && (
<div className="absolute left-0 right-0 top-full z-10 mt-1 max-h-64 overflow-y-auto rounded-lg bg-dark-700 shadow-xl">
{filtersLoading ? (
<div className="p-4 text-center text-dark-400">Loading...</div>
) : (
Object.entries(groupedFilters).map(([group, filters]) => (
<div key={group}>
<div className="sticky top-0 bg-dark-800 px-3 py-2 text-xs font-medium text-dark-400">
{FILTER_GROUP_LABEL_KEYS[group]
? t(FILTER_GROUP_LABEL_KEYS[group])
: group}
</div>
{filters.map((filter) => (
<button
key={filter.key}
onClick={() => {
setTarget(filter.key);
setShowFilters(false);
previewMutation.mutate(filter.key);
}}
className={`flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-dark-600 ${
target === filter.key ? 'bg-accent-500/20' : ''
}`}
>
<span className="text-dark-100">{filter.label}</span>
{filter.count !== null && filter.count !== undefined && (
<span className="text-xs text-dark-400">{filter.count}</span>
)}
</button>
))}
</div>
))
{/* Telegram Section */}
{(channel === 'telegram' || channel === 'both') && (
<div className="space-y-4 rounded-lg border border-blue-500/30 bg-blue-500/5 p-4">
<div className="flex items-center gap-2 text-blue-400">
<TelegramIcon />
<span className="font-medium">{t('admin.broadcasts.telegramSection')}</span>
</div>
{/* Filter selection */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.selectFilter')}
</label>
<div className="relative">
<button
onClick={() => setShowFilters(!showFilters)}
className="flex w-full items-center justify-between rounded-lg bg-dark-700 p-3 text-left transition-colors hover:bg-dark-600"
>
<div className="flex items-center gap-2">
<UsersIcon />
<span className={selectedFilter ? 'text-dark-100' : 'text-dark-400'}>
{selectedFilter
? selectedFilter.label
: t('admin.broadcasts.selectFilterPlaceholder')}
</span>
{telegramRecipientsCount !== null && (
<span className="rounded-full bg-accent-500/20 px-2 py-0.5 text-xs text-accent-400">
{telegramRecipientsCount} {t('admin.broadcasts.recipients')}
</span>
)}
</div>
<ChevronDownIcon />
</button>
{showFilters && (
<div className="absolute left-0 right-0 top-full z-10 mt-1 max-h-64 overflow-y-auto rounded-lg bg-dark-700 shadow-xl">
{filtersLoading ? (
<div className="p-4 text-center text-dark-400">Loading...</div>
) : (
Object.entries(groupedFilters).map(([group, filters]) => (
<div key={group}>
<div className="sticky top-0 bg-dark-800 px-3 py-2 text-xs font-medium text-dark-400">
{FILTER_GROUP_LABEL_KEYS[group]
? t(FILTER_GROUP_LABEL_KEYS[group])
: group}
</div>
{filters.map((filter) => (
<button
key={filter.key}
onClick={() => {
setTarget(filter.key);
setShowFilters(false);
previewMutation.mutate(filter.key);
}}
className={`flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-dark-600 ${
target === filter.key ? 'bg-accent-500/20' : ''
}`}
>
<span className="text-dark-100">{filter.label}</span>
{filter.count !== null && filter.count !== undefined && (
<span className="text-xs text-dark-400">{filter.count}</span>
)}
</button>
))}
</div>
))
)}
</div>
)}
</div>
)}
</div>
</div>
{/* Message text */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.messageText')}
</label>
<textarea
value={messageText}
onChange={(e) => setMessageText(e.target.value)}
placeholder={t('admin.broadcasts.messageTextPlaceholder')}
rows={5}
maxLength={4000}
className="w-full resize-none rounded-lg bg-dark-700 p-3 text-dark-100 placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-accent-500"
/>
<div className="mt-1 text-right text-xs text-dark-400">{messageText.length}/4000</div>
</div>
{/* Media upload */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.media')}
</label>
{mediaFile ? (
<div className="rounded-lg bg-dark-700 p-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
{mediaType === 'photo' && <PhotoIcon />}
{mediaType === 'video' && <VideoIcon />}
{mediaType === 'document' && <DocumentIcon />}
<div>
<p className="text-sm text-dark-100">{mediaFile.name}</p>
<p className="text-xs text-dark-400">
{(mediaFile.size / 1024 / 1024).toFixed(2)} MB
</p>
</div>
</div>
<button
onClick={handleRemoveMedia}
className="rounded-lg p-2 text-dark-400 hover:bg-dark-600 hover:text-red-400"
disabled={isUploading}
>
<XIcon />
</button>
</div>
{mediaPreview && (
<img
src={mediaPreview}
alt="Preview"
className="mt-3 max-h-40 rounded-lg object-cover"
/>
)}
{isUploading && (
<div className="mt-2 text-sm text-accent-400">
{t('admin.broadcasts.uploading')}
</div>
)}
</div>
) : (
<div className="flex gap-2">
<input
ref={fileInputRef}
type="file"
accept="image/*,video/*,application/*"
onChange={handleFileSelect}
className="hidden"
{/* Message text */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.messageText')}
</label>
<textarea
value={messageText}
onChange={(e) => setMessageText(e.target.value)}
placeholder={t('admin.broadcasts.messageTextPlaceholder')}
rows={5}
maxLength={4000}
className="w-full resize-none rounded-lg bg-dark-700 p-3 text-dark-100 placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-accent-500"
/>
<button
onClick={() => fileInputRef.current?.click()}
className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-dark-700 p-3 text-dark-400 transition-colors hover:bg-dark-600 hover:text-dark-100"
>
<PhotoIcon />
<span>{t('admin.broadcasts.addMedia')}</span>
</button>
<div className="mt-1 text-right text-xs text-dark-400">
{messageText.length}/4000
</div>
</div>
)}
</div>
{/* Buttons selection */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.buttons')}
</label>
<div className="flex flex-wrap gap-2">
{buttonsData?.buttons.map((button) => (
<button
key={button.key}
onClick={() => toggleButton(button.key)}
className={`rounded-lg px-3 py-2 text-sm transition-colors ${
selectedButtons.includes(button.key)
? 'bg-accent-500 text-white'
: 'bg-dark-700 text-dark-300 hover:bg-dark-600'
}`}
>
{button.label}
</button>
))}
{/* Media upload */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.media')}
</label>
{mediaFile ? (
<div className="rounded-lg bg-dark-700 p-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
{mediaType === 'photo' && <PhotoIcon />}
{mediaType === 'video' && <VideoIcon />}
{mediaType === 'document' && <DocumentIcon />}
<div>
<p className="text-sm text-dark-100">{mediaFile.name}</p>
<p className="text-xs text-dark-400">
{(mediaFile.size / 1024 / 1024).toFixed(2)} MB
</p>
</div>
</div>
<button
onClick={handleRemoveMedia}
className="rounded-lg p-2 text-dark-400 hover:bg-dark-600 hover:text-red-400"
disabled={isUploading}
>
<XIcon />
</button>
</div>
{mediaPreview && (
<img
src={mediaPreview}
alt="Preview"
className="mt-3 max-h-40 rounded-lg object-cover"
/>
)}
{isUploading && (
<div className="mt-2 text-sm text-accent-400">
{t('admin.broadcasts.uploading')}
</div>
)}
</div>
) : (
<div className="flex gap-2">
<input
ref={fileInputRef}
type="file"
accept="image/*,video/*,application/*"
onChange={handleFileSelect}
className="hidden"
/>
<button
onClick={() => fileInputRef.current?.click()}
className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-dark-700 p-3 text-dark-400 transition-colors hover:bg-dark-600 hover:text-dark-100"
>
<PhotoIcon />
<span>{t('admin.broadcasts.addMedia')}</span>
</button>
</div>
)}
</div>
{/* Buttons selection */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.buttons')}
</label>
<div className="flex flex-wrap gap-2">
{buttonsData?.buttons.map((button) => (
<button
key={button.key}
onClick={() => toggleButton(button.key)}
className={`rounded-lg px-3 py-2 text-sm transition-colors ${
selectedButtons.includes(button.key)
? 'bg-accent-500 text-white'
: 'bg-dark-700 text-dark-300 hover:bg-dark-600'
}`}
>
{button.label}
</button>
))}
</div>
</div>
</div>
</div>
)}
{/* Email Section */}
{(channel === 'email' || channel === 'both') && (
<div className="space-y-4 rounded-lg border border-purple-500/30 bg-purple-500/5 p-4">
<div className="flex items-center gap-2 text-purple-400">
<EmailIcon />
<span className="font-medium">{t('admin.broadcasts.emailSection')}</span>
</div>
{/* Email filter selection */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.selectEmailFilter')}
</label>
<div className="relative">
<button
onClick={() => setShowEmailFilters(!showEmailFilters)}
className="flex w-full items-center justify-between rounded-lg bg-dark-700 p-3 text-left transition-colors hover:bg-dark-600"
>
<div className="flex items-center gap-2">
<UsersIcon />
<span className={selectedEmailFilter ? 'text-dark-100' : 'text-dark-400'}>
{selectedEmailFilter
? selectedEmailFilter.label
: t('admin.broadcasts.selectEmailFilterPlaceholder')}
</span>
{emailRecipientsCount !== null && (
<span className="rounded-full bg-purple-500/20 px-2 py-0.5 text-xs text-purple-400">
{emailRecipientsCount} {t('admin.broadcasts.recipients')}
</span>
)}
</div>
<ChevronDownIcon />
</button>
{showEmailFilters && (
<div className="absolute left-0 right-0 top-full z-10 mt-1 max-h-64 overflow-y-auto rounded-lg bg-dark-700 shadow-xl">
{emailFiltersLoading ? (
<div className="p-4 text-center text-dark-400">Loading...</div>
) : (
Object.entries(groupedEmailFilters).map(([group, filters]) => (
<div key={group}>
<div className="sticky top-0 bg-dark-800 px-3 py-2 text-xs font-medium text-dark-400">
{FILTER_GROUP_LABEL_KEYS[group]
? t(FILTER_GROUP_LABEL_KEYS[group])
: group}
</div>
{filters.map((filter) => (
<button
key={filter.key}
onClick={() => {
setEmailTarget(filter.key);
setShowEmailFilters(false);
previewEmailMutation.mutate(filter.key);
}}
className={`flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-dark-600 ${
emailTarget === filter.key ? 'bg-purple-500/20' : ''
}`}
>
<span className="text-dark-100">{filter.label}</span>
{filter.count !== null && filter.count !== undefined && (
<span className="text-xs text-dark-400">{filter.count}</span>
)}
</button>
))}
</div>
))
)}
</div>
)}
</div>
</div>
{/* Email subject */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.emailSubject')}
</label>
<input
type="text"
value={emailSubject}
onChange={(e) => setEmailSubject(e.target.value)}
placeholder={t('admin.broadcasts.emailSubjectPlaceholder')}
maxLength={200}
className="w-full rounded-lg bg-dark-700 p-3 text-dark-100 placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
/>
</div>
{/* Email HTML content */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.broadcasts.emailContent')}
<span className="ml-2 text-xs text-dark-400">
{t('admin.broadcasts.emailContentHint')}
</span>
</label>
<textarea
value={emailHtmlContent}
onChange={(e) => setEmailHtmlContent(e.target.value)}
placeholder={t('admin.broadcasts.emailContentPlaceholder')}
rows={8}
className="w-full resize-none rounded-lg bg-dark-700 p-3 font-mono text-sm text-dark-100 placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
/>
<div className="mt-2 text-xs text-dark-400">
{t('admin.broadcasts.emailVariables')}: {'{{user_name}}, {{email}}'}
</div>
</div>
</div>
)}
</div>
{/* Footer */}
<div className="flex items-center justify-between border-t border-dark-700 p-4">
<div className="text-sm text-dark-400">
{recipientsCount !== null && (
<span>
{t('admin.broadcasts.willBeSent')}:{' '}
<strong className="text-accent-400">{recipientsCount}</strong>{' '}
{t('admin.broadcasts.users')}
<div className="flex items-center gap-4 text-sm text-dark-400">
{(channel === 'telegram' || channel === 'both') && telegramRecipientsCount !== null && (
<span className="flex items-center gap-1">
<TelegramIcon />
<strong className="text-blue-400">{telegramRecipientsCount}</strong>
</span>
)}
{(channel === 'email' || channel === 'both') && emailRecipientsCount !== null && (
<span className="flex items-center gap-1">
<EmailIcon />
<strong className="text-purple-400">{emailRecipientsCount}</strong>
</span>
)}
</div>
@@ -526,7 +838,7 @@ function CreateBroadcastModal({ onClose, onSuccess }: CreateModalProps) {
</button>
<button
onClick={handleSubmit}
disabled={!target || !messageText.trim() || createMutation.isPending || isUploading}
disabled={!canSubmit}
className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
>
{createMutation.isPending ? <RefreshIcon /> : <BroadcastIcon />}
@@ -552,12 +864,13 @@ function BroadcastDetailModal({ broadcast, onClose, onStop, isStopping }: Detail
const isRunning = ['queued', 'in_progress', 'cancelling'].includes(broadcast.status);
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div className="w-full max-w-lg rounded-xl bg-dark-800">
{/* Header */}
<div className="flex items-center justify-between border-b border-dark-700 p-4">
<div className="flex items-center gap-3">
<StatusBadge status={broadcast.status} />
<ChannelBadge channel={broadcast.channel} />
<span className="text-dark-400">#{broadcast.id}</span>
</div>
<button onClick={onClose} className="rounded-lg p-2 transition-colors hover:bg-dark-700">
@@ -566,7 +879,7 @@ function BroadcastDetailModal({ broadcast, onClose, onStop, isStopping }: Detail
</div>
{/* Content */}
<div className="space-y-4 p-4">
<div className="max-h-[60vh] space-y-4 overflow-y-auto p-4">
{/* Progress */}
{isRunning && (
<div>
@@ -605,13 +918,41 @@ function BroadcastDetailModal({ broadcast, onClose, onStop, isStopping }: Detail
<p className="text-dark-100">{broadcast.target_type}</p>
</div>
{/* Message */}
<div>
<p className="mb-1 text-sm text-dark-400">{t('admin.broadcasts.message')}</p>
<div className="max-h-40 overflow-y-auto whitespace-pre-wrap rounded-lg bg-dark-700 p-3 text-sm text-dark-100">
{broadcast.message_text}
{/* Telegram Message */}
{broadcast.message_text && (
<div>
<p className="mb-1 flex items-center gap-1 text-sm text-dark-400">
<TelegramIcon />
{t('admin.broadcasts.message')}
</p>
<div className="max-h-40 overflow-y-auto whitespace-pre-wrap rounded-lg bg-dark-700 p-3 text-sm text-dark-100">
{broadcast.message_text}
</div>
</div>
</div>
)}
{/* Email Subject */}
{broadcast.email_subject && (
<div>
<p className="mb-1 flex items-center gap-1 text-sm text-dark-400">
<EmailIcon />
{t('admin.broadcasts.emailSubject')}
</p>
<div className="rounded-lg bg-dark-700 p-3 text-sm text-dark-100">
{broadcast.email_subject}
</div>
</div>
)}
{/* Email Content Preview */}
{broadcast.email_html_content && (
<div>
<p className="mb-1 text-sm text-dark-400">{t('admin.broadcasts.emailContent')}</p>
<div className="max-h-40 overflow-y-auto whitespace-pre-wrap rounded-lg bg-dark-700 p-3 font-mono text-xs text-dark-100">
{broadcast.email_html_content}
</div>
</div>
)}
{/* Media */}
{broadcast.has_media && (
@@ -737,8 +1078,9 @@ export default function AdminBroadcasts() {
>
<div className="flex items-start justify-between gap-4">
<div className="min-w-0 flex-1">
<div className="mb-1 flex items-center gap-2">
<div className="mb-1 flex flex-wrap items-center gap-2">
<StatusBadge status={broadcast.status} />
<ChannelBadge channel={broadcast.channel} />
<span className="text-xs text-dark-400">#{broadcast.id}</span>
{broadcast.has_media && (
<span className="text-dark-400">
@@ -748,7 +1090,9 @@ export default function AdminBroadcasts() {
</span>
)}
</div>
<p className="truncate text-sm text-dark-100">{broadcast.message_text}</p>
<p className="truncate text-sm text-dark-100">
{broadcast.message_text || broadcast.email_subject || '-'}
</p>
<div className="mt-2 flex items-center gap-4 text-xs text-dark-400">
<span>{broadcast.target_type}</span>
<span>