Fix theme preset switching issue

- Fix preset theme selection in BrandingPage
- Add debug logging to track theme changes
- Properly update currentTheme state when preset is selected
- Match saved theme to preset on initialization
- Remove unused imports

frontend/src/components/admin/ThemeCustomizer.tsx

@@ -36,6 +36,7 @@ export const ThemeCustomizer: React.FC<ThemeCustomizerProps> = ({
 
   const handlePresetSelect = (presetKey: string) => {
     const preset = PRESET_THEMES[presetKey];
+    console.log('Selecting preset:', presetKey, preset); // Debug log
     if (preset) {
       setSelectedPreset(presetKey);
       setLocalTheme(preset.config);
@@ -49,6 +50,7 @@ export const ThemeCustomizer: React.FC<ThemeCustomizerProps> = ({
   };
 
   const handleApply = () => {
+    console.log('Applying theme:', { ...localTheme, customCss }); // Debug log
     onChange({ ...localTheme, customCss });
   };
 

frontend/src/pages/admin/BrandingPage.tsx

@@ -3,12 +3,12 @@ import { Save, Eye, Palette } from 'lucide-react';
 import { toast } from 'react-toastify';
 import { Button, Card, Input, ErrorBoundary, Loading } from '../../components/common';
 import { ThemeCustomizer } from '../../components/admin/ThemeCustomizer';
-import { useTheme, type ThemeConfig } from '../../contexts/ThemeContext';
+import { useTheme, type ThemeConfig, PRESET_THEMES } from '../../contexts/ThemeContext';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { settingsService } from '../../services/settings.service';
 
 export const BrandingPage: React.FC = () => {
-  const { theme, setTheme, themeName, setThemeByName } = useTheme();
+  const { theme, setTheme } = useTheme();
   const [brandingSettings, setBrandingSettings] = useState({
     company_name: '',
     company_tagline: '',
@@ -18,7 +18,7 @@ export const BrandingPage: React.FC = () => {
   });
 
   const [currentTheme, setCurrentTheme] = useState<ThemeConfig>(theme);
-  const [currentThemeName, setCurrentThemeName] = useState(themeName);
+  const [currentThemeName, setCurrentThemeName] = useState('default');
   const [isPreviewMode, setIsPreviewMode] = useState(false);
 
   // Fetch current settings
@@ -70,9 +70,17 @@ export const BrandingPage: React.FC = () => {
       if (formatted && Object.keys(formatted).length > 0) {
         setCurrentTheme(formatted);
         setTheme(formatted);
+        
+        // Try to identify which preset this matches
+        for (const [key, preset] of Object.entries(PRESET_THEMES)) {
+          if (JSON.stringify(preset.config) === JSON.stringify(formatted)) {
+            setCurrentThemeName(key);
+            break;
+          }
+        }
       }
     }
-  }, [themeSettings]);
+  }, [themeSettings, setTheme]);
 
   const handleBrandingChange = (key: string, value: any) => {
     setBrandingSettings(prev => ({ ...prev, [key]: value }));
@@ -87,8 +95,13 @@ export const BrandingPage: React.FC = () => {
 
   const handlePresetChange = (presetName: string) => {
     setCurrentThemeName(presetName);
-    if (isPreviewMode) {
-      setThemeByName(presetName);
+    // Get the preset theme config
+    const preset = PRESET_THEMES[presetName];
+    if (preset) {
+      setCurrentTheme(preset.config);
+      if (isPreviewMode) {
+        setTheme(preset.config);
+      }
     }
   };