Improve the frontend modals

frontend/src/components/layout/DemoBanner/DemoBanner.tsx

@@ -26,14 +26,14 @@ export const DemoBanner: React.FC = () => {
     setExpiresAt(expires);
 
     if (demoMode && expires) {
-      const interval = setInterval(() => {
+      const interval = setInterval(async () => {
         const now = new Date().getTime();
         const expiryTime = new Date(expires).getTime();
         const diff = expiryTime - now;
 
         if (diff <= 0) {
           setTimeRemaining('Sesión expirada');
-          handleExpiration();
+          await handleExpiration();
         } else {
           const minutes = Math.floor(diff / 60000);
           const seconds = Math.floor((diff % 60000) / 1000);
@@ -45,13 +45,22 @@ export const DemoBanner: React.FC = () => {
     }
   }, [expiresAt]);
 
-  const handleExpiration = () => {
+  const handleExpiration = async () => {
+    // Clear demo-specific localStorage keys
     localStorage.removeItem('demo_mode');
     localStorage.removeItem('demo_session_id');
     localStorage.removeItem('demo_account_type');
     localStorage.removeItem('demo_expires_at');
     localStorage.removeItem('demo_tenant_id');
+
+    // Clear API client demo session ID and tenant ID
     apiClient.setDemoSessionId(null);
+    apiClient.setTenantId(null);
+
+    // Clear tenant store to remove cached demo tenant data
+    const { useTenantStore } = await import('../../../stores/tenant.store');
+    useTenantStore.getState().clearTenants();
+
     navigate('/demo');
   };
 
@@ -89,7 +98,7 @@ export const DemoBanner: React.FC = () => {
     } catch (error) {
       console.error('Error destroying session:', error);
     } finally {
-      handleExpiration();
+      await handleExpiration();
     }
   };
 

frontend/src/components/layout/Sidebar/Sidebar.tsx

@@ -35,7 +35,12 @@ import {
   LogOut,
   MoreHorizontal,
   X,
-  Search
+  Search,
+  Leaf,
+  ChefHat,
+  ClipboardCheck,
+  BrainCircuit,
+  Cog
 } from 'lucide-react';
 
 export interface SidebarProps {
@@ -109,6 +114,11 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
   settings: Settings,
   user: User,
   'credit-card': CreditCard,
+  leaf: Leaf,
+  'chef-hat': ChefHat,
+  'clipboard-check': ClipboardCheck,
+  'brain-circuit': BrainCircuit,
+  cog: Cog,
 };
 
 /**