{/* Header */}

{meta.emoji}

{meta.label}

{totalFiltered} настроек

{/* Search */}

setSearchQuery(e.target.value)} placeholder={t('admin.settings.searchPlaceholder')} className="input w-full pl-10 py-2" />

{/* Categories with settings */}

{Object.keys(settingsByCategory).length > 0 ? ( categories .filter((cat) => settingsByCategory[cat.key]) .map((category) => { const { emoji, text } = extractEmoji(category.label) const isExpanded = expandedCategories.has(category.key) const categorySettings = settingsByCategory[category.key] || [] return (

{isExpanded && (

{categorySettings.map((setting) => ( ))}

)}

) }) ) : (

{t('admin.settings.noSearchResults')}

)}

{/* Footer */}

) } // Icons for theme toggle const SunIcon = () => ( ) const MoonIcon = () => ( ) export default function AdminSettings() { const { t } = useTranslation() const queryClient = useQueryClient() const [selectedMeta, setSelectedMeta] = useState(null) const [searchQuery, setSearchQuery] = useState('') const [editingName, setEditingName] = useState(false) const [newName, setNewName] = useState('') const fileInputRef = useRef(null) // Branding query and mutations const { data: branding } = useQuery({ queryKey: ['branding'], queryFn: brandingApi.getBranding, }) const updateNameMutation = useMutation({ mutationFn: (name: string) => brandingApi.updateName(name), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['branding'] }) setEditingName(false) }, }) const uploadLogoMutation = useMutation({ mutationFn: (file: File) => brandingApi.uploadLogo(file), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['branding'] }) }, }) const deleteLogoMutation = useMutation({ mutationFn: () => brandingApi.deleteLogo(), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['branding'] }) }, }) // Theme colors query and mutations const { data: themeColors } = useQuery({ queryKey: ['theme-colors'], queryFn: themeColorsApi.getColors, }) const updateColorsMutation = useMutation({ mutationFn: themeColorsApi.updateColors, onSuccess: (data) => { // Apply colors immediately after successful update applyThemeColors(data) queryClient.invalidateQueries({ queryKey: ['theme-colors'] }) }, }) const resetColorsMutation = useMutation({ mutationFn: themeColorsApi.resetColors, onSuccess: (data) => { // Apply default colors immediately applyThemeColors(data) queryClient.invalidateQueries({ queryKey: ['theme-colors'] }) }, }) // Enabled themes query and mutation const { data: enabledThemes } = useQuery({ queryKey: ['enabled-themes'], queryFn: themeColorsApi.getEnabledThemes, }) const updateEnabledThemesMutation = useMutation({ mutationFn: themeColorsApi.updateEnabledThemes, onSuccess: (data) => { // Update localStorage cache so useTheme hook picks up changes immediately updateEnabledThemesCache(data) queryClient.invalidateQueries({ queryKey: ['enabled-themes'] }) }, }) const handleLogoUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { uploadLogoMutation.mutate(file) } // Reset input so same file can be uploaded again e.target.value = '' } const handleNameSave = () => { // Allow empty name (logo-only mode) updateNameMutation.mutate(newName.trim()) } const startEditingName = () => { setNewName(branding?.name || '') setEditingName(true) } const { data: categories, isLoading: categoriesLoading } = useQuery({ queryKey: ['admin-settings-categories'], queryFn: adminSettingsApi.getCategories, }) const { data: allSettings, isLoading: settingsLoading } = useQuery({ queryKey: ['admin-settings'], queryFn: () => adminSettingsApi.getSettings(), }) const updateMutation = useMutation({ mutationFn: ({ key, value }: { key: string; value: unknown }) => adminSettingsApi.updateSetting(key, value), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['admin-settings'] }) }, }) const resetMutation = useMutation({ mutationFn: (key: string) => adminSettingsApi.resetSetting(key), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['admin-settings'] }) }, }) const handleUpdate = (key: string, value: unknown) => { updateMutation.mutate({ key, value }) } const handleReset = (key: string) => { resetMutation.mutate(key) } // Group categories by meta-category const metaCategoriesData = useMemo(() => { if (!categories || !allSettings) return null const result: Record = {} for (const [metaKey, meta] of Object.entries(META_CATEGORIES)) { const metaCategories = categories.filter((c) => meta.categories.includes(c.key)) const settingsCount = allSettings.filter((s) => meta.categories.includes(s.category.key)).length if (metaCategories.length > 0) { result[metaKey] = { categories: metaCategories, settingsCount } } } // Add "Other" for uncategorized const allMetaCategories = Object.values(META_CATEGORIES).flatMap((m) => m.categories) const otherCategories = categories.filter((c) => !allMetaCategories.includes(c.key)) if (otherCategories.length > 0) { const settingsCount = allSettings.filter( (s) => !allMetaCategories.includes(s.category.key) ).length result['other'] = { categories: otherCategories, settingsCount } } return result }, [categories, allSettings]) // Filter meta-categories by search const filteredMetaCategories = useMemo(() => { if (!metaCategoriesData) return null if (!searchQuery.trim()) return metaCategoriesData const query = searchQuery.toLowerCase() const result: Record = {} for (const [metaKey, data] of Object.entries(metaCategoriesData)) { const meta = META_CATEGORIES[metaKey] || { label: 'Другое', emoji: '📁', categories: [] } if ( meta.label.toLowerCase().includes(query) || data.categories.some((c) => c.label.toLowerCase().includes(query)) ) { result[metaKey] = data } } return result }, [metaCategoriesData, searchQuery]) if (categoriesLoading || settingsLoading) { return (

) } const totalSettings = allSettings?.length || 0 return (

{/* Header */}

{t('admin.settings.title')}

{Object.keys(filteredMetaCategories || {}).length} групп / {totalSettings} настроек

{/* Branding Card */}

🎨

Брендинг

{/* Logo Section */}

{branding?.has_custom_logo && branding.logo_url ? ( Логотип

) : ( {branding?.logo_letter || 'C'} )}

{branding?.has_custom_logo && ( )}

PNG, JPG, WebP, SVG до 2МБ

{/* Name Section */}

Название проекта {editingName ? (

setNewName(e.target.value)} className="input flex-1" placeholder="Оставьте пустым для режима только логотип" maxLength={50} autoFocus onKeyDown={(e) => { if (e.key === 'Enter') handleNameSave() if (e.key === 'Escape') setEditingName(false) }} />

) : (

{branding?.name ? ( {branding.name} ) : ( Только логотип )} {branding?.name && ( )}

)}

Оставьте пустым, чтобы показывать только логотип

{/* Theme Colors Card */}

🎨

{t('theme.colors')}

{/* Theme Availability Toggles */}

Доступные темы

{/* Dark Theme Toggle */}

Тёмная тема

Тёмное оформление интерфейса

{/* Light Theme Toggle */}

Светлая тема

Светлое оформление интерфейса

Включите нужные темы для пользователей. Минимум одна тема должна быть активна.

{/* Accent Color */} updateColorsMutation.mutate({ accent: color })} disabled={updateColorsMutation.isPending} /> {/* Dark Theme Section */}

{t('theme.darkTheme')}

updateColorsMutation.mutate({ darkBackground: color })} disabled={updateColorsMutation.isPending} /> updateColorsMutation.mutate({ darkSurface: color })} disabled={updateColorsMutation.isPending} /> updateColorsMutation.mutate({ darkText: color })} disabled={updateColorsMutation.isPending} /> updateColorsMutation.mutate({ darkTextSecondary: color })} disabled={updateColorsMutation.isPending} />

{/* Light Theme Section */}

{t('theme.lightTheme')}

updateColorsMutation.mutate({ lightBackground: color })} disabled={updateColorsMutation.isPending} /> updateColorsMutation.mutate({ lightSurface: color })} disabled={updateColorsMutation.isPending} /> updateColorsMutation.mutate({ lightText: color })} disabled={updateColorsMutation.isPending} /> updateColorsMutation.mutate({ lightTextSecondary: color })} disabled={updateColorsMutation.isPending} />

{/* Status Colors */}

{t('theme.statusColors')}

updateColorsMutation.mutate({ success: color })} disabled={updateColorsMutation.isPending} /> updateColorsMutation.mutate({ warning: color })} disabled={updateColorsMutation.isPending} /> updateColorsMutation.mutate({ error: color })} disabled={updateColorsMutation.isPending} />

{/* Preview */}

{t('theme.preview')}

{t('theme.success')} {t('theme.warning')} {t('theme.error')}

{/* Search */}

setSearchQuery(e.target.value)} placeholder={t('admin.settings.searchCategoriesPlaceholder')} className="input w-full pl-10" />

{searchQuery && ( )}

{/* Meta-category Cards Grid */} {filteredMetaCategories && Object.keys(filteredMetaCategories).length > 0 ? (

{Object.entries(filteredMetaCategories).map(([metaKey, data]) => { const meta = META_CATEGORIES[metaKey] || { label: 'Другое', emoji: '📁', categories: [] } return ( setSelectedMeta(metaKey)} /> ) })}

) : (

{searchQuery ? t('admin.settings.noSearchResults') : t('admin.settings.noSettings')}

)} {/* Settings Modal */} {selectedMeta && metaCategoriesData && metaCategoriesData[selectedMeta] && ( setSelectedMeta(null)} onUpdate={handleUpdate} onReset={handleReset} isUpdating={updateMutation.isPending || resetMutation.isPending} /> )}

) }