Add frontend pages imporvements

frontend/src/components/layout/Header/Header.tsx

@@ -9,16 +9,14 @@ import { Avatar } from '../../ui';
 import { Badge } from '../../ui';
 import { Modal } from '../../ui';
 import { TenantSwitcher } from '../../ui/TenantSwitcher';
+import { ThemeToggle } from '../../ui/ThemeToggle';
 import { NotificationPanel } from '../../ui/NotificationPanel/NotificationPanel';
-import { 
-  Menu, 
-  Search, 
-  Bell, 
-  Sun, 
-  Moon, 
-  Computer, 
-  Settings, 
-  User, 
+import {
+  Menu,
+  Search,
+  Bell,
+  Settings,
+  User,
   LogOut,
   X
 } from 'lucide-react';
@@ -116,7 +114,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   const [isSearchFocused, setIsSearchFocused] = useState(false);
   const [searchValue, setSearchValue] = useState('');
-  const [isThemeMenuOpen, setIsThemeMenuOpen] = useState(false);
   const [isNotificationPanelOpen, setIsNotificationPanelOpen] = useState(false);
 
   const searchInputRef = React.useRef<HTMLInputElement>(null);
@@ -179,7 +176,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
       // Escape to close menus
       if (e.key === 'Escape') {
         setIsUserMenuOpen(false);
-        setIsThemeMenuOpen(false);
         setIsNotificationPanelOpen(false);
         if (isSearchFocused) {
           searchInputRef.current?.blur();
@@ -198,9 +194,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
       if (!target.closest('[data-user-menu]')) {
         setIsUserMenuOpen(false);
       }
-      if (!target.closest('[data-theme-menu]')) {
-        setIsThemeMenuOpen(false);
-      }
       if (!target.closest('[data-notification-panel]')) {
         setIsNotificationPanelOpen(false);
       }
@@ -210,13 +203,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
     return () => document.removeEventListener('click', handleClickOutside);
   }, []);
 
-  const themeIcons = {
-    light: Sun,
-    dark: Moon,
-    auto: Computer,
-  };
-
-  const ThemeIcon = themeIcons[theme] || Sun;
 
   return (
     <header
@@ -352,45 +338,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
 
           {/* Theme toggle */}
           {showThemeToggle && (
-            <div className="relative" data-theme-menu>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setIsThemeMenuOpen(!isThemeMenuOpen)}
-                className="w-10 h-10 p-0 flex items-center justify-center"
-                aria-label={`Tema actual: ${theme}`}
-                aria-expanded={isThemeMenuOpen}
-                aria-haspopup="true"
-              >
-                <ThemeIcon className="h-5 w-5" />
-              </Button>
-              
-              {isThemeMenuOpen && (
-                <div className="absolute right-0 top-full mt-2 w-48 bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-lg py-1 z-[var(--z-dropdown)]">
-                  {[
-                    { key: 'light' as const, label: 'Claro', icon: Sun },
-                    { key: 'dark' as const, label: 'Oscuro', icon: Moon },
-                    { key: 'auto' as const, label: 'Sistema', icon: Computer },
-                  ].map(({ key, label, icon: Icon }) => (
-                    <button
-                      key={key}
-                      onClick={() => {
-                        setTheme(key);
-                        setIsThemeMenuOpen(false);
-                      }}
-                      className={clsx(
-                        'w-full px-4 py-2 text-left text-sm flex items-center gap-3',
-                        'hover:bg-[var(--bg-secondary)] transition-colors',
-                        theme === key && 'bg-[var(--bg-secondary)] text-[var(--color-primary)]'
-                      )}
-                    >
-                      <Icon className="h-4 w-4" />
-                      {label}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
+            <ThemeToggle variant="button" size="md" />
           )}
 
           {/* Notifications */}