New Frontend

frontend/src/components/layout/AnalyticsLayout.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { SecondaryNavigation } from '../navigation/SecondaryNavigation';
+import { Breadcrumbs } from '../navigation/Breadcrumbs';
+import { useBakeryType } from '../../hooks/useBakeryType';
+
+const AnalyticsLayout: React.FC = () => {
+  const { bakeryType } = useBakeryType();
+
+  const navigationItems = [
+    {
+      id: 'forecasting',
+      label: 'Predicciones',
+      href: '/app/analytics/forecasting',
+      icon: 'TrendingUp'
+    },
+    {
+      id: 'sales-analytics',
+      label: 'Análisis Ventas',
+      href: '/app/analytics/sales-analytics',
+      icon: 'BarChart3'
+    },
+    {
+      id: 'production-reports',
+      label: bakeryType === 'individual' ? 'Reportes Producción' : 'Reportes Distribución',
+      href: '/app/analytics/production-reports',
+      icon: 'FileBarChart'
+    },
+    {
+      id: 'financial-reports',
+      label: 'Reportes Financieros',
+      href: '/app/analytics/financial-reports',
+      icon: 'DollarSign'
+    },
+    {
+      id: 'performance-kpis',
+      label: 'KPIs Rendimiento',
+      href: '/app/analytics/performance-kpis',
+      icon: 'Target'
+    },
+    {
+      id: 'ai-insights',
+      label: 'Insights IA',
+      href: '/app/analytics/ai-insights',
+      icon: 'Brain'
+    }
+  ];
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <Breadcrumbs />
+          <SecondaryNavigation items={navigationItems} />
+        </div>
+      </div>
+      
+      <div className="flex-1 bg-gray-50">
+        <div className="max-w-7xl mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AnalyticsLayout;

frontend/src/components/layout/AuthLayout.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+
+const AuthLayout: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Outlet />
+    </div>
+  );
+};
+
+export default AuthLayout;

frontend/src/components/layout/Layout.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Outlet, Link, useLocation, useNavigate } from 'react-router-dom';
 import { 
   Home, 
   TrendingUp, 
@@ -10,18 +11,17 @@ import {
   User,
   Bell,
   ChevronDown,
-  ChefHat,
-  Warehouse,
-  ShoppingCart,
-  BookOpen
+  BarChart3,
+  Building
 } from 'lucide-react';
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../../store';
+import { logout } from '../../store/slices/authSlice';
+import { TenantSelector } from '../navigation/TenantSelector';
+import { usePermissions } from '../../hooks/usePermissions';
 
 interface LayoutProps {
-  children: React.ReactNode;
-  user: any;
-  currentPage: string;
-  onNavigate: (page: string) => void;
-  onLogout: () => void;
+  // No props needed - using React Router
 }
 
 interface NavigationItem {
@@ -29,32 +29,52 @@ interface NavigationItem {
   label: string;
   icon: React.ComponentType<{ className?: string }>;
   href: string;
+  requiresRole?: string[];
 }
 
-const Layout: React.FC<LayoutProps> = ({ 
-  children, 
-  user, 
-  currentPage, 
-  onNavigate, 
-  onLogout 
-}) => {
+const Layout: React.FC<LayoutProps> = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { user } = useSelector((state: RootState) => state.auth);
+  const { hasRole } = usePermissions();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
 
   const navigation: NavigationItem[] = [
-    { id: 'dashboard', label: 'Inicio', icon: Home, href: '/dashboard' },
-    { id: 'orders', label: 'Pedidos', icon: Package, href: '/orders' },
-    { id: 'production', label: 'Producción', icon: ChefHat, href: '/production' },
-    { id: 'recipes', label: 'Recetas', icon: BookOpen, href: '/recipes' },
-    { id: 'inventory', label: 'Inventario', icon: Warehouse, href: '/inventory' },
-    { id: 'sales', label: 'Ventas', icon: ShoppingCart, href: '/sales' },
-    { id: 'reports', label: 'Informes', icon: TrendingUp, href: '/reports' },
-    { id: 'settings', label: 'Configuración', icon: Settings, href: '/settings' },
+    { id: 'dashboard', label: 'Dashboard', icon: Home, href: '/app/dashboard' },
+    { id: 'operations', label: 'Operaciones', icon: Package, href: '/app/operations' },
+    { 
+      id: 'analytics', 
+      label: 'Analytics', 
+      icon: BarChart3, 
+      href: '/app/analytics',
+      requiresRole: ['admin', 'manager']
+    },
+    { id: 'settings', label: 'Configuración', icon: Settings, href: '/app/settings' },
   ];
 
-  const handleNavigate = (pageId: string) => {
-    onNavigate(pageId);
-    setIsMobileMenuOpen(false);
+  // Filter navigation based on user role
+  const filteredNavigation = navigation.filter(item => {
+    if (!item.requiresRole) return true;
+    return item.requiresRole.some(role => hasRole(role));
+  });
+
+  const handleLogout = () => {
+    if (window.confirm('¿Estás seguro de que quieres cerrar sesión?')) {
+      dispatch(logout());
+      localStorage.removeItem('auth_token');
+      localStorage.removeItem('user_data');
+      localStorage.removeItem('selectedTenantId');
+      navigate('/');
+    }
+  };
+
+  const isActiveRoute = (href: string): boolean => {
+    if (href === '/app/dashboard') {
+      return location.pathname === '/app/dashboard' || location.pathname === '/app';
+    }
+    return location.pathname.startsWith(href);
   };
 
   return (
@@ -88,14 +108,14 @@ const Layout: React.FC<LayoutProps> = ({
 
               {/* Desktop Navigation */}
               <div className="hidden md:flex md:ml-10 md:space-x-1">
-                {navigation.map((item) => {
+                {filteredNavigation.map((item) => {
                   const Icon = item.icon;
-                  const isActive = currentPage === item.id;
+                  const isActive = isActiveRoute(item.href);
                   
                   return (
-                    <button
+                    <Link
                       key={item.id}
-                      onClick={() => handleNavigate(item.id)}
+                      to={item.href}
                       className={`
                         flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200
                         ${isActive 
@@ -103,17 +123,20 @@ const Layout: React.FC<LayoutProps> = ({
                           : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
                         }
                       `}
+                      onClick={() => setIsMobileMenuOpen(false)}
                     >
                       <Icon className="h-4 w-4 mr-2" />
                       {item.label}
-                    </button>
+                    </Link>
                   );
                 })}
               </div>
             </div>
 
-            {/* Right side - Notifications and User Menu */}
+            {/* Right side - Tenant Selector, Notifications and User Menu */}
             <div className="flex items-center space-x-4">
+              {/* Tenant Selector */}
+              <TenantSelector />
               {/* Notifications */}
               <button className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors relative">
                 <Bell className="h-5 w-5" />
@@ -142,19 +165,17 @@ const Layout: React.FC<LayoutProps> = ({
                       <p className="text-sm font-medium text-gray-900">{user.fullName}</p>
                       <p className="text-sm text-gray-500">{user.email}</p>
                     </div>
-                    <button
-                      onClick={() => {
-                        handleNavigate('settings');
-                        setIsUserMenuOpen(false);
-                      }}
+                    <Link
+                      to="/app/settings"
+                      onClick={() => setIsUserMenuOpen(false)}
                       className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center"
                     >
                       <Settings className="h-4 w-4 mr-2" />
                       Configuración
-                    </button>
+                    </Link>
                     <button
                       onClick={() => {
-                        onLogout();
+                        handleLogout();
                         setIsUserMenuOpen(false);
                       }}
                       className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 flex items-center"
@@ -173,14 +194,15 @@ const Layout: React.FC<LayoutProps> = ({
         {isMobileMenuOpen && (
           <div className="md:hidden border-t border-gray-200 bg-white">
             <div className="px-2 pt-2 pb-3 space-y-1">
-              {navigation.map((item) => {
+              {filteredNavigation.map((item) => {
                 const Icon = item.icon;
-                const isActive = currentPage === item.id;
+                const isActive = isActiveRoute(item.href);
                 
                 return (
-                  <button
+                  <Link
                     key={item.id}
-                    onClick={() => handleNavigate(item.id)}
+                    to={item.href}
+                    onClick={() => setIsMobileMenuOpen(false)}
                     className={`
                       w-full flex items-center px-3 py-2 rounded-lg text-base font-medium transition-all duration-200
                       ${isActive 
@@ -191,7 +213,7 @@ const Layout: React.FC<LayoutProps> = ({
                   >
                     <Icon className="h-5 w-5 mr-3" />
                     {item.label}
-                  </button>
+                  </Link>
                 );
               })}
             </div>
@@ -201,9 +223,7 @@ const Layout: React.FC<LayoutProps> = ({
 
       {/* Main Content */}
       <main className="flex-1">
-        <div className="max-w-7xl mx-auto">
-          {children}
-        </div>
+        <Outlet />
       </main>
 
       {/* Click outside handler for dropdowns */}

frontend/src/components/layout/OperationsLayout.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { SecondaryNavigation } from '../navigation/SecondaryNavigation';
+import { Breadcrumbs } from '../navigation/Breadcrumbs';
+import { useBakeryType } from '../../hooks/useBakeryType';
+
+const OperationsLayout: React.FC = () => {
+  const { bakeryType } = useBakeryType();
+
+  // Define navigation items based on bakery type
+  const getNavigationItems = () => {
+    const baseItems = [
+      {
+        id: 'production',
+        label: bakeryType === 'individual' ? 'Producción' : 'Distribución',
+        href: '/app/operations/production',
+        icon: 'ChefHat',
+        children: bakeryType === 'individual' ? [
+          { id: 'schedule', label: 'Programación', href: '/app/operations/production/schedule' },
+          { id: 'active-batches', label: 'Lotes Activos', href: '/app/operations/production/active-batches' },
+          { id: 'equipment', label: 'Equipamiento', href: '/app/operations/production/equipment' }
+        ] : [
+          { id: 'schedule', label: 'Distribución', href: '/app/operations/production/schedule' },
+          { id: 'active-batches', label: 'Asignaciones', href: '/app/operations/production/active-batches' },
+          { id: 'equipment', label: 'Logística', href: '/app/operations/production/equipment' }
+        ]
+      },
+      {
+        id: 'orders',
+        label: 'Pedidos',
+        href: '/app/operations/orders',
+        icon: 'Package',
+        children: [
+          { id: 'incoming', label: bakeryType === 'individual' ? 'Entrantes' : 'Puntos de Venta', href: '/app/operations/orders/incoming' },
+          { id: 'in-progress', label: 'En Proceso', href: '/app/operations/orders/in-progress' },
+          { id: 'supplier-orders', label: bakeryType === 'individual' ? 'Proveedores' : 'Productos', href: '/app/operations/orders/supplier-orders' }
+        ]
+      },
+      {
+        id: 'inventory',
+        label: 'Inventario',
+        href: '/app/operations/inventory',
+        icon: 'Warehouse',
+        children: [
+          { id: 'stock-levels', label: bakeryType === 'individual' ? 'Ingredientes' : 'Productos', href: '/app/operations/inventory/stock-levels' },
+          { id: 'movements', label: bakeryType === 'individual' ? 'Uso' : 'Distribución', href: '/app/operations/inventory/movements' },
+          { id: 'alerts', label: bakeryType === 'individual' ? 'Caducidad' : 'Retrasos', href: '/app/operations/inventory/alerts' }
+        ]
+      },
+      {
+        id: 'sales',
+        label: 'Ventas',
+        href: '/app/operations/sales',
+        icon: 'ShoppingCart',
+        children: [
+          { id: 'daily-sales', label: 'Ventas Diarias', href: '/app/operations/sales/daily-sales' },
+          { id: 'customer-orders', label: bakeryType === 'individual' ? 'Pedidos Cliente' : 'Pedidos Punto', href: '/app/operations/sales/customer-orders' },
+          { id: 'pos-integration', label: bakeryType === 'individual' ? 'TPV' : 'Multi-TPV', href: '/app/operations/sales/pos-integration' }
+        ]
+      }
+    ];
+
+    // Add recipes for individual bakeries, hide for central
+    if (bakeryType === 'individual') {
+      baseItems.push({
+        id: 'recipes',
+        label: 'Recetas',
+        href: '/app/operations/recipes',
+        icon: 'BookOpen',
+        children: [
+          { id: 'active-recipes', label: 'Recetas Activas', href: '/app/operations/recipes/active-recipes' },
+          { id: 'development', label: 'Desarrollo', href: '/app/operations/recipes/development' },
+          { id: 'costing', label: 'Costeo', href: '/app/operations/recipes/costing' }
+        ]
+      });
+    }
+
+    return baseItems;
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <Breadcrumbs />
+          <SecondaryNavigation items={getNavigationItems()} />
+        </div>
+      </div>
+      
+      <div className="flex-1 bg-gray-50">
+        <div className="max-w-7xl mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OperationsLayout;

frontend/src/components/layout/SettingsLayout.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { SecondaryNavigation } from '../navigation/SecondaryNavigation';
+import { Breadcrumbs } from '../navigation/Breadcrumbs';
+import { usePermissions } from '../../hooks/usePermissions';
+
+const SettingsLayout: React.FC = () => {
+  const { hasRole } = usePermissions();
+
+  const getNavigationItems = () => {
+    const baseItems = [
+      {
+        id: 'general',
+        label: 'General',
+        href: '/app/settings/general',
+        icon: 'Settings'
+      },
+      {
+        id: 'account',
+        label: 'Cuenta',
+        href: '/app/settings/account',
+        icon: 'User'
+      }
+    ];
+
+    // Add admin-only items
+    if (hasRole('admin')) {
+      baseItems.unshift(
+        {
+          id: 'bakeries',
+          label: 'Panaderías',
+          href: '/app/settings/bakeries',
+          icon: 'Building'
+        },
+        {
+          id: 'users',
+          label: 'Usuarios',
+          href: '/app/settings/users',
+          icon: 'Users'
+        }
+      );
+    }
+
+    return baseItems;
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <Breadcrumbs />
+          <SecondaryNavigation items={getNavigationItems()} />
+        </div>
+      </div>
+      
+      <div className="flex-1 bg-gray-50">
+        <div className="max-w-7xl mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsLayout;