Fix frontend 3

docs/ROADMAP.md

@@ -0,0 +1,172 @@
+⏺ Based on my analysis of your bakery project, here's a clear divide 
+  and conquer strategy to transition from mock/demo data to real API
+  connections:
+
+  Current State Analysis
+
+  ✅ What's Already Done:
+  - Complete backend microservices architecture (17+ services)
+  - Full API client setup with authentication & tenant management
+  - Comprehensive service layer (auth, inventory, sales, forecasting,
+  etc.)
+  - Real-time SSE & WebSocket infrastructure
+
+  🔍 What Needs Connection:
+  - Mock data in auth store (mockLogin, mockRefreshToken)
+  - Mock alerts in alerts store (mockAlerts, mockRules)
+  - Various hardcoded arrays across hooks and utilities
+
+  Divide & Conquer Strategy
+
+  Phase 1: Authentication Foundation (Week 1)
+
+  Priority: CRITICAL - Everything depends on this
+
+  // IMMEDIATE ACTION: Replace mock auth
+  1. Update auth.store.ts → Connect to real auth service
+  2. Replace mockLogin() with authService.login()
+  3. Replace mockRefreshToken() with authService.refreshToken()
+  4. Test tenant switching and permission system
+
+  Files to modify:
+  - frontend/src/stores/auth.store.ts:46-88 (replace mock functions)
+  - frontend/src/services/api/auth.service.ts (already done)
+
+  Phase 2: Core Operations (Week 2)
+
+  Priority: HIGH - Daily operations
+
+  // Connect inventory management first (most used)
+  1. Inventory Service → Real API calls
+     - Replace mock data in components
+     - Connect to /api/v1/inventory/* endpoints
+     
+  2. Production Service → Real API calls  
+     - Connect batch management
+     - Link to /api/v1/production/* endpoints
+     
+  3. Sales Service → Real API calls
+     - Connect POS integration
+     - Link to /api/v1/sales/* endpoints
+
+  Files to modify:
+  - All inventory components using mock data
+  - Production scheduling hooks
+  - Sales tracking components
+
+  Phase 3: Analytics & Intelligence (Week 3)
+
+  Priority: MEDIUM - Business insights
+
+  // Connect AI-powered features
+  1. Forecasting Service → Real ML predictions
+     - Connect to /api/v1/forecasts/* endpoints
+     - Enable real demand forecasting
+     
+  2. Training Service → Real model training
+     - Connect WebSocket training progress
+     - Enable /api/v1/training/* endpoints
+     
+  3. Analytics Service → Real business data
+     - Connect charts and reports
+     - Enable trend analysis
+
+  Phase 4: Communication & Automation (Week 4)
+
+  Priority: LOW - Enhancements
+
+  // Replace mock alerts with real-time system
+  1. Alerts Store → Real SSE connection
+     - Connect to /api/v1/sse/alerts/stream/{tenant_id}
+     - Replace mockAlerts with live data
+
+  2. Notification Service → Real messaging
+     - WhatsApp & Email integration
+     - Connect to /api/v1/notifications/* endpoints
+     
+  3. External Data → Live feeds
+     - Weather API (AEMET)
+     - Traffic patterns
+     - Market events
+
+  Specific Next Steps
+
+  STEP 1: Start with Authentication (Today)
+
+  // 1. Replace frontend/src/stores/auth.store.ts
+  // Remove lines 46-88 and replace with:
+
+  const performLogin = async (email: string, password: string) => {
+    const response = await authService.login({ email, password });
+    if (!response.success) throw new Error(response.error || 'Login 
+  failed');
+    return response.data;
+  };
+
+  const performRefresh = async (refreshToken: string) => {
+    const response = await authService.refreshToken(refreshToken);
+    if (!response.success) throw new Error('Token refresh failed');
+    return response.data;
+  };
+
+  STEP 2: Connect Inventory (Next)
+
+  // 2. Update inventory components to use real API
+  // Replace mock data arrays with:
+
+  const { data: ingredients, isLoading } = useQuery({
+    queryKey: ['ingredients', tenantId],
+    queryFn: () => inventoryService.getIngredients(),
+  });
+
+  STEP 3: Enable Real-time Alerts (After)
+
+  // 3. Connect SSE for real alerts
+  // Replace alerts store mock data with:
+
+  useEffect(() => {
+    const eventSource = new
+  EventSource(`/api/v1/sse/alerts/stream/${tenantId}`);
+
+    eventSource.onmessage = (event) => {
+      const alert = JSON.parse(event.data);
+      createAlert(alert);
+    };
+
+    return () => eventSource.close();
+  }, [tenantId]);
+
+  Migration Checklist
+
+  Immediate (This Week)
+
+  - Replace auth mock functions with real API calls
+  - Test login/logout/refresh flows
+  - Verify tenant switching works
+  - Test permission-based UI rendering
+
+  Short-term (Next 2 Weeks)
+
+  - Connect inventory service to real API
+  - Enable production planning with real data
+  - Connect sales tracking to POS systems
+  - Test data consistency across services
+
+  Medium-term (Next Month)
+
+  - Enable ML forecasting with real models
+  - Connect real-time alert system
+  - Integrate external data sources (weather, traffic)
+  - Test full end-to-end workflows
+
+  Risk Mitigation
+
+  1. Gradual Migration: Keep mock fallbacks during transition
+  2. Environment Switching: Use env variables to toggle mock/real APIs
+  3. Error Handling: Robust error handling for API failures
+  4. Data Validation: Verify API responses match expected schemas
+  5. User Testing: Test with real bakery workflows
+
+  Ready to start? I recommend beginning with Step 1 (Authentication)
+  today. The infrastructure is already there - you just need to connect
+   the pipes!

frontend/src/components/domain/auth/index.ts

@@ -4,12 +4,6 @@ export { default as RegisterForm } from './RegisterForm';
 export { default as PasswordResetForm } from './PasswordResetForm';
 export { default as ProfileSettings } from './ProfileSettings';
 
-// Export named exports as well
-export { LoginForm } from './LoginForm';
-export { RegisterForm } from './RegisterForm';
-export { PasswordResetForm } from './PasswordResetForm';
-export { ProfileSettings } from './ProfileSettings';
-
 // Re-export types for convenience
 export type { 
   LoginFormProps,

frontend/src/components/layout/AppShell/AppShell.tsx

@@ -124,7 +124,7 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
     isSidebarCollapsed,
   }), [toggleSidebar, collapseSidebar, expandSidebar, isSidebarOpen, isSidebarCollapsed]);
 
-  // Handle responsive sidebar state
+  // Handle responsive sidebar state and prevent body scroll on mobile
   React.useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth >= 1024) {
@@ -133,9 +133,26 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
       }
     };
 
+    // Prevent body scroll when mobile sidebar is open
+    if (isSidebarOpen && window.innerWidth < 1024) {
+      document.body.style.overflow = 'hidden';
+      document.body.style.position = 'fixed';
+      document.body.style.width = '100%';
+    } else {
+      document.body.style.overflow = '';
+      document.body.style.position = '';
+      document.body.style.width = '';
+    }
+
     window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    return () => {
-  }, []);
+      window.removeEventListener('resize', handleResize);
+      // Cleanup on unmount
+      document.body.style.overflow = '';
+      document.body.style.position = '';
+      document.body.style.width = '';
+    };
+  }, [isSidebarOpen]);
 
   // Error boundary handling
   React.useEffect(() => {
@@ -212,8 +229,9 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
             {/* Mobile overlay */}
             {isSidebarOpen && (
               <div
-                className="fixed inset-0 bg-black/50 z-[var(--z-modal-backdrop)] lg:hidden"
+                className="fixed inset-0 bg-black/50 z-[var(--z-modal-backdrop)] lg:hidden backdrop-blur-sm"
                 onClick={handleOverlayClick}
+                onTouchStart={handleOverlayClick}
                 aria-hidden="true"
               />
             )}

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

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, forwardRef } from 'react';
 import { clsx } from 'clsx';
+import { useNavigate } from 'react-router-dom';
 import { useAuthUser, useIsAuthenticated, useAuthActions } from '../../../stores';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { Button } from '../../ui';
@@ -95,6 +96,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
   notificationCount = 0,
   onNotificationClick,
 }, ref) => {
+  const navigate = useNavigate();
   const user = useAuthUser();
   const isAuthenticated = useIsAuthenticated();
   const { logout } = useAuthActions();
@@ -221,10 +223,10 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
           variant="ghost"
           size="sm"
           onClick={onMenuClick}
-          className="lg:hidden w-10 h-10 p-0 flex items-center justify-center"
+          className="lg:hidden w-10 h-10 p-0 flex items-center justify-center hover:bg-[var(--bg-secondary)] active:scale-95 transition-all duration-150"
           aria-label="Abrir menú de navegación"
         >
-          <Menu className="h-5 w-5" />
+          <Menu className="h-5 w-5 text-[var(--text-primary)]" />
         </Button>
 
         {/* Logo */}
@@ -420,7 +422,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
                   <div className="py-1">
                     <button
                       onClick={() => {
-                        // TODO: Navigate to profile
+                        navigate('/app/settings/profile');
                         setIsUserMenuOpen(false);
                       }}
                       className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-secondary)] transition-colors"
@@ -430,7 +432,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
                     </button>
                     <button
                       onClick={() => {
-                        // TODO: Navigate to settings
+                        navigate('/app/settings');
                         setIsUserMenuOpen(false);
                       }}
                       className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-secondary)] transition-colors"

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

@@ -256,7 +256,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
     collapseItem,
   }), [scrollToItem, expandItem, collapseItem]);
 
-  // Handle keyboard navigation
+  // Handle keyboard navigation and touch gestures
   React.useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape' && isOpen && onClose) {
@@ -264,8 +264,40 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
       }
     };
 
+    let touchStartX = 0;
+    let touchStartY = 0;
+    
+    const handleTouchStart = (e: TouchEvent) => {
+      if (isOpen) {
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+      }
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!isOpen || !onClose) return;
+      
+      const touchCurrentX = e.touches[0].clientX;
+      const touchCurrentY = e.touches[0].clientY;
+      const deltaX = touchStartX - touchCurrentX;
+      const deltaY = Math.abs(touchStartY - touchCurrentY);
+      
+      // Only trigger swipe left to close if it's more horizontal than vertical
+      // and the swipe distance is significant
+      if (deltaX > 50 && deltaX > deltaY * 2) {
+        onClose();
+      }
+    };
+
     document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
+    document.addEventListener('touchstart', handleTouchStart, { passive: true });
+    document.addEventListener('touchmove', handleTouchMove, { passive: true });
+    
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('touchstart', handleTouchStart);
+      document.removeEventListener('touchmove', handleTouchMove);
+    };
   }, [isOpen, onClose]);
 
   // Render navigation item
@@ -443,10 +475,11 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
       {/* Mobile Drawer */}
       <aside
         className={clsx(
-          'fixed left-0 top-[var(--header-height)] bottom-0 w-[var(--sidebar-width)]',
+          'fixed inset-y-0 left-0 w-[var(--sidebar-width)] max-w-[85vw]',
           'bg-[var(--bg-primary)] border-r border-[var(--border-primary)]',
-          'transition-transform duration-300 ease-in-out z-[var(--z-fixed)]',
+          'transition-transform duration-300 ease-in-out z-[var(--z-modal)]',
           'lg:hidden flex flex-col',
+          'shadow-xl',
           isOpen ? 'translate-x-0' : '-translate-x-full'
         )}
         aria-label="Navegación principal"
@@ -470,8 +503,8 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
         </div>
 
         {/* Navigation */}
-        <nav className="flex-1 p-4 overflow-y-auto">
+        <nav className="flex-1 p-4 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
-          <ul className="space-y-2">
+          <ul className="space-y-2 pb-4">
             {visibleItems.map(item => renderItem(item))}
           </ul>
         </nav>

frontend/src/components/shared/DataTable/DataTable.tsx

@@ -410,14 +410,14 @@ const DataTable = forwardRef<HTMLDivElement, DataTableProps>(({
       >
         {/* Loading overlay */}
         {isLoading && (
-          <div className="absolute inset-0 bg-white/80 backdrop-blur-sm z-10 flex items-center justify-center">
+          <div className="absolute inset-0 bg-bg-primary/80 backdrop-blur-sm z-10 flex items-center justify-center">
             <LoadingSpinner size="lg" text="Cargando datos..." />
           </div>
         )}
 
         {/* Tabla */}
         <table 
-          className="w-full border-collapse"
+          className="w-full border-collapse bg-bg-primary"
           role="table"
           aria-label={ariaLabel}
         >
@@ -501,10 +501,10 @@ const DataTable = forwardRef<HTMLDivElement, DataTableProps>(({
           </thead>
 
           {/* Body */}
-          <tbody>
+          <tbody className="bg-bg-primary">
             {data.length === 0 && !isLoading ? (
               <tr>
-                <td colSpan={columns.length + (selection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (expandable ? 1 : 0)} className="p-8">
+                <td colSpan={columns.length + (selection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (expandable ? 1 : 0)} className="p-8 bg-bg-primary">
                   <EmptyState
                     variant="no-data"
                     size="sm"
@@ -525,7 +525,7 @@ const DataTable = forwardRef<HTMLDivElement, DataTableProps>(({
                   <React.Fragment key={rowId}>
                     <tr
                       className={clsx(
-                        'border-b border-border-primary hover:bg-bg-secondary transition-colors',
+                        'border-b border-border-primary hover:bg-bg-secondary transition-colors bg-bg-primary',
                         {
                           'bg-color-primary/5': isSelected,
                           'cursor-pointer': onRowClick
@@ -537,7 +537,7 @@ const DataTable = forwardRef<HTMLDivElement, DataTableProps>(({
                     >
                       {/* Checkbox de selección */}
                       {selection && (
-                        <td className={clsx('border-r border-border-primary', densityClasses[density])}>
+                        <td className={clsx('border-r border-border-primary bg-bg-primary', densityClasses[density])}>
                           <input
                             type={selection.mode === 'single' ? 'radio' : 'checkbox'}
                             checked={isSelected}
@@ -551,14 +551,14 @@ const DataTable = forwardRef<HTMLDivElement, DataTableProps>(({
 
                       {/* Número de fila */}
                       {showRowNumbers && (
-                        <td className={clsx('border-r border-border-primary text-text-tertiary font-mono', densityClasses[density])}>
+                        <td className={clsx('border-r border-border-primary text-text-tertiary font-mono bg-bg-primary', densityClasses[density])}>
                           {rowIndex + 1}
                         </td>
                       )}
 
                       {/* Botón de expansión */}
                       {expandable && (
-                        <td className={clsx('border-r border-border-primary', densityClasses[density])}>
+                        <td className={clsx('border-r border-border-primary bg-bg-primary', densityClasses[density])}>
                           <Button
                             variant="ghost"
                             size="xs"
@@ -592,9 +592,10 @@ const DataTable = forwardRef<HTMLDivElement, DataTableProps>(({
                             className={clsx(
                               densityClasses[density],
                               alignClass,
+                              'bg-bg-primary',
                               {
                                 'hidden sm:table-cell': column.hideOnMobile,
-                                'sticky bg-inherit': column.sticky,
+                                'sticky bg-bg-primary': column.sticky,
                                 'left-0': column.sticky === 'left',
                                 'right-0': column.sticky === 'right'
                               }
@@ -616,7 +617,7 @@ const DataTable = forwardRef<HTMLDivElement, DataTableProps>(({
                       <tr>
                         <td 
                           colSpan={columns.length + (selection ? 1 : 0) + (showRowNumbers ? 1 : 0) + 1}
-                          className="p-0 border-b border-border-primary"
+                          className="p-0 border-b border-border-primary bg-bg-primary"
                         >
                           <div className="bg-bg-secondary p-4">
                             {expandable.renderExpandedRow(row, rowIndex)}

frontend/src/pages/app/operations/production/ProductionPage.tsx

@@ -1,12 +1,22 @@
 import React, { useState } from 'react';
-import { Plus, Calendar, Clock, Users, AlertCircle } from 'lucide-react';
+import { Plus, Calendar, Clock, Users, AlertCircle, Search, Download, Filter } from 'lucide-react';
-import { Button, Card, Badge, Table } from '../../../../components/ui';
+import { Button, Card, Badge } from '../../../../components/ui';
-import type { TableColumn } from '../../../../components/ui';
+import { DataTable } from '../../../../components/shared';
+import type { DataTableColumn, DataTableFilter, DataTablePagination, DataTableSelection } from '../../../../components/shared';
 import { PageHeader } from '../../../../components/layout';
 import { ProductionSchedule, BatchTracker, QualityControl } from '../../../../components/domain/production';
 
 const ProductionPage: React.FC = () => {
   const [activeTab, setActiveTab] = useState('schedule');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filters, setFilters] = useState<DataTableFilter[]>([]);
+  const [selectedBatches, setSelectedBatches] = useState<any[]>([]);
+  const [pagination, setPagination] = useState<DataTablePagination>({
+    page: 1,
+    pageSize: 10,
+    total: 8 // Updated to match the number of mock orders
+  });
+  const [isLoading, setIsLoading] = useState(false);
 
   const mockProductionStats = {
     dailyTarget: 150,
@@ -17,6 +27,41 @@ const ProductionPage: React.FC = () => {
     quality: 94,
   };
 
+  // Handler functions for table actions
+  const handleViewBatch = (batch: any) => {
+    console.log('Ver lote:', batch);
+    // Implement view logic
+  };
+
+  const handleEditBatch = (batch: any) => {
+    console.log('Editar lote:', batch);
+    // Implement edit logic
+  };
+
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+    // Implement search logic
+  };
+
+  const handleFiltersChange = (newFilters: DataTableFilter[]) => {
+    setFilters(newFilters);
+    // Implement filtering logic
+  };
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    setPagination(prev => ({ ...prev, page, pageSize }));
+    // Implement pagination logic
+  };
+
+  const handleBatchSelection = (selectedRows: any[]) => {
+    setSelectedBatches(selectedRows);
+  };
+
+  const handleExport = (format: 'csv' | 'xlsx') => {
+    console.log(`Exportando en formato ${format}`);
+    // Implement export logic
+  };
+
   const mockProductionOrders = [
     {
       id: '1',
@@ -51,6 +96,61 @@ const ProductionPage: React.FC = () => {
       estimatedCompletion: '2024-01-26T08:00:00Z',
       progress: 100,
     },
+    {
+      id: '4',
+      recipeName: 'Tarta de Chocolate',
+      quantity: 5,
+      status: 'pending',
+      priority: 'low',
+      assignedTo: 'Ana Pastelera',
+      startTime: '2024-01-26T10:00:00Z',
+      estimatedCompletion: '2024-01-26T16:00:00Z',
+      progress: 0,
+    },
+    {
+      id: '5',
+      recipeName: 'Empanadas de Pollo',
+      quantity: 40,
+      status: 'in_progress',
+      priority: 'high',
+      assignedTo: 'Luis Hornero',
+      startTime: '2024-01-26T07:00:00Z',
+      estimatedCompletion: '2024-01-26T11:00:00Z',
+      progress: 45,
+    },
+    {
+      id: '6',
+      recipeName: 'Donuts Glaseados',
+      quantity: 60,
+      status: 'pending',
+      priority: 'urgent',
+      assignedTo: 'María González',
+      startTime: '2024-01-26T12:00:00Z',
+      estimatedCompletion: '2024-01-26T15:00:00Z',
+      progress: 0,
+    },
+    {
+      id: '7',
+      recipeName: 'Pan de Centeno',
+      quantity: 25,
+      status: 'completed',
+      priority: 'medium',
+      assignedTo: 'Juan Panadero',
+      startTime: '2024-01-26T05:00:00Z',
+      estimatedCompletion: '2024-01-26T09:00:00Z',
+      progress: 100,
+    },
+    {
+      id: '8',
+      recipeName: 'Muffins de Arándanos',
+      quantity: 36,
+      status: 'in_progress',
+      priority: 'medium',
+      assignedTo: 'Ana Pastelera',
+      startTime: '2024-01-26T08:30:00Z',
+      estimatedCompletion: '2024-01-26T12:30:00Z',
+      progress: 70,
+    },
   ];
 
   const getStatusBadge = (status: string) => {
@@ -77,38 +177,74 @@ const ProductionPage: React.FC = () => {
     return <Badge variant={config.color as any}>{config.text}</Badge>;
   };
 
-  const columns: TableColumn[] = [
+  const columns: DataTableColumn[] = [
     {
+      id: 'recipeName',
       key: 'recipeName',
-      title: 'Receta',
+      header: 'Receta',
-      dataIndex: 'recipeName',
+      sortable: true,
-      render: (value) => (
+      filterable: true,
+      type: 'text',
+      width: 200,
+      cell: (value) => (
         <div className="text-sm font-medium text-[var(--text-primary)]">{value}</div>
       ),
     },
     {
+      id: 'quantity',
       key: 'quantity',
-      title: 'Cantidad',
+      header: 'Cantidad',
-      dataIndex: 'quantity',
+      sortable: true,
-      render: (value) => `${value} unidades`,
+      filterable: true,
+      type: 'number',
+      width: 120,
+      align: 'center',
+      cell: (value) => `${value} unidades`,
     },
     {
+      id: 'status',
       key: 'status',
-      title: 'Estado',
+      header: 'Estado',
-      dataIndex: 'status',
+      sortable: true,
-      render: (value) => getStatusBadge(value),
+      filterable: true,
+      type: 'select',
+      width: 130,
+      align: 'center',
+      selectOptions: [
+        { value: 'pending', label: 'Pendiente' },
+        { value: 'in_progress', label: 'En Proceso' },
+        { value: 'completed', label: 'Completado' },
+        { value: 'cancelled', label: 'Cancelado' }
+      ],
+      cell: (value) => getStatusBadge(value),
     },
     {
+      id: 'priority',
       key: 'priority',
-      title: 'Prioridad',
+      header: 'Prioridad',
-      dataIndex: 'priority',
+      sortable: true,
-      render: (value) => getPriorityBadge(value),
+      filterable: true,
+      type: 'select',
+      width: 120,
+      align: 'center',
+      selectOptions: [
+        { value: 'low', label: 'Baja' },
+        { value: 'medium', label: 'Media' },
+        { value: 'high', label: 'Alta' },
+        { value: 'urgent', label: 'Urgente' }
+      ],
+      cell: (value) => getPriorityBadge(value),
     },
     {
+      id: 'assignedTo',
       key: 'assignedTo',
-      title: 'Asignado a',
+      header: 'Asignado a',
-      dataIndex: 'assignedTo',
+      sortable: true,
-      render: (value) => (
+      filterable: true,
+      type: 'text',
+      width: 180,
+      hideOnMobile: true,
+      cell: (value) => (
         <div className="flex items-center">
           <Users className="h-4 w-4 text-[var(--text-tertiary)] mr-2" />
           <span className="text-sm text-[var(--text-primary)]">{value}</span>
@@ -116,10 +252,16 @@ const ProductionPage: React.FC = () => {
       ),
     },
     {
+      id: 'progress',
       key: 'progress',
-      title: 'Progreso',
+      header: 'Progreso',
-      dataIndex: 'progress',
+      sortable: true,
-      render: (value) => (
+      filterable: true,
+      type: 'number',
+      width: 150,
+      align: 'center',
+      hideOnMobile: true,
+      cell: (value) => (
         <div className="flex items-center">
           <div className="w-full bg-[var(--bg-quaternary)] rounded-full h-2 mr-2">
             <div
@@ -132,24 +274,35 @@ const ProductionPage: React.FC = () => {
       ),
     },
     {
+      id: 'estimatedCompletion',
       key: 'estimatedCompletion',
-      title: 'Tiempo Estimado',
+      header: 'Tiempo Estimado',
-      dataIndex: 'estimatedCompletion',
+      sortable: true,
-      render: (value) => new Date(value).toLocaleTimeString('es-ES', { 
+      filterable: true,
+      type: 'date',
+      width: 140,
+      align: 'center',
+      hideOnMobile: true,
+      cell: (value) => new Date(value).toLocaleTimeString('es-ES', { 
         hour: '2-digit', 
         minute: '2-digit' 
       }),
     },
     {
+      id: 'actions',
       key: 'actions',
-      title: 'Acciones',
+      header: 'Acciones',
-      align: 'right' as const,
+      sortable: false,
-      render: () => (
+      filterable: false,
+      width: 150,
+      align: 'right',
+      sticky: 'right',
+      cell: (value, row) => (
         <div className="flex space-x-2">
-          <Button variant="outline" size="sm">
+          <Button variant="outline" size="sm" onClick={() => handleViewBatch(row)}>
             Ver
           </Button>
-          <Button variant="outline" size="sm">
+          <Button variant="outline" size="sm" onClick={() => handleEditBatch(row)}>
             Editar
           </Button>
         </div>
@@ -288,22 +441,46 @@ const ProductionPage: React.FC = () => {
             <div className="flex justify-between items-center mb-6">
               <h3 className="text-lg font-medium text-[var(--text-primary)]">Órdenes de Producción</h3>
               <div className="flex space-x-2">
+                {selectedBatches.length > 0 && (
+                  <Button variant="outline" size="sm">
+                    <Download className="w-4 h-4 mr-2" />
+                    Acciones en lote ({selectedBatches.length})
+                  </Button>
+                )}
                 <Button variant="outline" size="sm">
-                  Filtros
+                  <Filter className="w-4 h-4 mr-2" />
-                </Button>
-                <Button variant="outline" size="sm">
                   Vista Calendario
                 </Button>
               </div>
             </div>
             
-            <Table
+            <DataTable
-              columns={columns}
               data={mockProductionOrders}
-              rowKey="id"
+              columns={columns}
-              hover={true}
+              isLoading={isLoading}
-              variant="default"
+              searchQuery={searchQuery}
-              size="md"
+              onSearchChange={handleSearchChange}
+              searchPlaceholder="Buscar por receta, asignado, estado..."
+              filters={filters}
+              onFiltersChange={handleFiltersChange}
+              pagination={pagination}
+              onPageChange={handlePageChange}
+              selection={{
+                mode: 'multiple',
+                selectedRows: selectedBatches,
+                onSelectionChange: handleBatchSelection,
+                getRowId: (row) => row.id
+              }}
+              enableExport={true}
+              onExport={handleExport}
+              density="normal"
+              horizontalScroll={true}
+              emptyStateMessage="No se encontraron órdenes de producción"
+              emptyStateAction={{
+                label: "Nueva Orden",
+                onClick: () => console.log('Nueva orden de producción')
+              }}
+              onRowClick={(row) => console.log('Ver detalles:', row)}
             />
           </div>
         </Card>

frontend/src/pages/app/settings/profile/ProfilePage.tsx

@@ -0,0 +1,384 @@
+import React, { useState } from 'react';
+import { User, Mail, Phone, MapPin, Building, Shield, Activity, Settings, Edit3, Lock, Bell, Download } from 'lucide-react';
+import { Button, Card, Badge, Avatar, Input, ProgressBar } from '../../../../components/ui';
+import { PageHeader } from '../../../../components/layout';
+import { ProfileSettings } from '../../../../components/domain/auth';
+
+const ProfilePage: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('profile');
+  const [isEditing, setIsEditing] = useState(false);
+  const [userInfo, setUserInfo] = useState({
+    name: 'María González',
+    email: 'maria.gonzalez@panaderia.com',
+    phone: '+34 123 456 789',
+    address: 'Calle Mayor 123, Madrid',
+    bakery: 'Panadería La Tradicional',
+    role: 'Propietario'
+  });
+
+  const mockProfileStats = {
+    profileCompletion: 85,
+    securityScore: 94,
+    lastLogin: '2 horas',
+    activeSessions: 2,
+    twoFactorEnabled: false,
+    passwordLastChanged: '2 meses'
+  };
+
+  const handleSave = () => {
+    setIsEditing(false);
+    console.log('Profile updated:', userInfo);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
+
+  const handleEnable2FA = () => {
+    console.log('Enabling 2FA');
+  };
+
+  const handleChangePassword = () => {
+    console.log('Change password');
+  };
+
+  const handleManageSessions = () => {
+    console.log('Manage sessions');
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <PageHeader
+        title="Mi Perfil"
+        description="Gestiona tu información personal y configuración de cuenta"
+        action={
+          <Button onClick={() => setIsEditing(!isEditing)}>
+            <Edit3 className="w-4 h-4 mr-2" />
+            {isEditing ? 'Guardar Cambios' : 'Editar Perfil'}
+          </Button>
+        }
+      />
+
+      {/* Profile Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">Perfil Completado</p>
+              <p className="text-2xl font-bold text-[var(--color-success)]">{mockProfileStats.profileCompletion}%</p>
+            </div>
+            <User className="h-8 w-8 text-[var(--color-success)]" />
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">Seguridad</p>
+              <p className="text-2xl font-bold text-[var(--color-info)]">{mockProfileStats.securityScore}%</p>
+            </div>
+            <Shield className="h-8 w-8 text-[var(--color-info)]" />
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">Último Acceso</p>
+              <p className="text-2xl font-bold text-[var(--text-primary)]">{mockProfileStats.lastLogin}</p>
+            </div>
+            <Activity className="h-8 w-8 text-[var(--color-primary)]" />
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">Sesiones</p>
+              <p className="text-2xl font-bold text-purple-600">{mockProfileStats.activeSessions}</p>
+            </div>
+            <div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
+              <Settings className="h-5 w-5 text-purple-600" />
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">2FA</p>
+              <p className="text-lg font-bold text-[var(--color-warning)]">{mockProfileStats.twoFactorEnabled ? 'Activo' : 'Pendiente'}</p>
+            </div>
+            <Lock className="h-8 w-8 text-[var(--color-warning)]" />
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">Contraseña</p>
+              <p className="text-lg font-bold text-indigo-600">{mockProfileStats.passwordLastChanged}</p>
+            </div>
+            <div className="h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center">
+              <Shield className="h-5 w-5 text-indigo-600" />
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Tabs Navigation */}
+      <div className="border-b border-[var(--border-primary)]">
+        <nav className="-mb-px flex space-x-8">
+          <button
+            onClick={() => setActiveTab('profile')}
+            className={`py-2 px-1 border-b-2 font-medium text-sm ${
+              activeTab === 'profile'
+                ? 'border-orange-500 text-[var(--color-primary)]'
+                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
+            }`}
+          >
+            Información Personal
+          </button>
+          <button
+            onClick={() => setActiveTab('security')}
+            className={`py-2 px-1 border-b-2 font-medium text-sm ${
+              activeTab === 'security'
+                ? 'border-orange-500 text-[var(--color-primary)]'
+                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
+            }`}
+          >
+            Seguridad
+          </button>
+          <button
+            onClick={() => setActiveTab('activity')}
+            className={`py-2 px-1 border-b-2 font-medium text-sm ${
+              activeTab === 'activity'
+                ? 'border-orange-500 text-[var(--color-primary)]'
+                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
+            }`}
+          >
+            Actividad
+          </button>
+        </nav>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'profile' && (
+        <Card>
+          <div className="p-6">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-lg font-medium text-[var(--text-primary)]">Información Personal</h3>
+              <div className="flex space-x-2">
+                <Button variant="outline" size="sm">
+                  <Download className="w-4 h-4 mr-2" />
+                  Exportar Datos
+                </Button>
+              </div>
+            </div>
+            
+            {/* Avatar and Basic Info */}
+            <div className="flex items-center gap-6 mb-8">
+              <Avatar 
+                src="/api/placeholder/120/120" 
+                alt={userInfo.name}
+                size="lg"
+                className="w-20 h-20"
+              />
+              <div className="flex-1">
+                <h2 className="text-xl font-semibold text-[var(--text-primary)]">{userInfo.name}</h2>
+                <p className="text-[var(--text-secondary)]">{userInfo.role}</p>
+                <div className="flex items-center gap-2 mt-2">
+                  <Badge variant="success">Verificado</Badge>
+                  <Badge variant="info">Premium</Badge>
+                </div>
+              </div>
+            </div>
+
+            {/* Form Fields */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  <User className="w-4 h-4 inline mr-2" />
+                  Nombre Completo
+                </label>
+                <Input 
+                  value={userInfo.name}
+                  onChange={(e) => setUserInfo({...userInfo, name: e.target.value})}
+                  disabled={!isEditing}
+                />
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  <Mail className="w-4 h-4 inline mr-2" />
+                  Email
+                </label>
+                <Input 
+                  value={userInfo.email}
+                  onChange={(e) => setUserInfo({...userInfo, email: e.target.value})}
+                  disabled={!isEditing}
+                  type="email"
+                />
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  <Phone className="w-4 h-4 inline mr-2" />
+                  Teléfono
+                </label>
+                <Input 
+                  value={userInfo.phone}
+                  onChange={(e) => setUserInfo({...userInfo, phone: e.target.value})}
+                  disabled={!isEditing}
+                  type="tel"
+                />
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  <Building className="w-4 h-4 inline mr-2" />
+                  Panadería
+                </label>
+                <Input 
+                  value={userInfo.bakery}
+                  onChange={(e) => setUserInfo({...userInfo, bakery: e.target.value})}
+                  disabled={!isEditing}
+                />
+              </div>
+              
+              <div className="md:col-span-2">
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  <MapPin className="w-4 h-4 inline mr-2" />
+                  Dirección
+                </label>
+                <Input 
+                  value={userInfo.address}
+                  onChange={(e) => setUserInfo({...userInfo, address: e.target.value})}
+                  disabled={!isEditing}
+                />
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            {isEditing && (
+              <div className="flex gap-3 pt-6 mt-6 border-t border-[var(--border-primary)]">
+                <Button onClick={handleSave}>Guardar Cambios</Button>
+                <Button variant="outline" onClick={handleCancel}>Cancelar</Button>
+              </div>
+            )}
+          </div>
+        </Card>
+      )}
+
+      {activeTab === 'security' && (
+        <Card>
+          <div className="p-6">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-lg font-medium text-[var(--text-primary)]">Configuración de Seguridad</h3>
+            </div>
+            
+            <div className="space-y-6">
+              <div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="flex items-center gap-3">
+                  <Shield className="w-5 h-5 text-[var(--color-info)]" />
+                  <div>
+                    <p className="font-medium text-[var(--text-primary)]">Autenticación de Dos Factores</p>
+                    <p className="text-sm text-[var(--text-secondary)]">Protege tu cuenta con 2FA</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <Badge variant={mockProfileStats.twoFactorEnabled ? "success" : "warning"}>
+                    {mockProfileStats.twoFactorEnabled ? "Activo" : "Pendiente"}
+                  </Badge>
+                  <Button variant="outline" size="sm" onClick={handleEnable2FA}>
+                    {mockProfileStats.twoFactorEnabled ? "Desactivar" : "Activar"}
+                  </Button>
+                </div>
+              </div>
+              
+              <div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="flex items-center gap-3">
+                  <Lock className="w-5 h-5 text-[var(--color-primary)]" />
+                  <div>
+                    <p className="font-medium text-[var(--text-primary)]">Contraseña</p>
+                    <p className="text-sm text-[var(--text-secondary)]">Actualizada hace {mockProfileStats.passwordLastChanged}</p>
+                  </div>
+                </div>
+                <Button variant="outline" size="sm" onClick={handleChangePassword}>
+                  Cambiar
+                </Button>
+              </div>
+              
+              <div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="flex items-center gap-3">
+                  <Settings className="w-5 h-5 text-purple-600" />
+                  <div>
+                    <p className="font-medium text-[var(--text-primary)]">Sesiones Activas</p>
+                    <p className="text-sm text-[var(--text-secondary)]">{mockProfileStats.activeSessions} dispositivos conectados</p>
+                  </div>
+                </div>
+                <Button variant="outline" size="sm" onClick={handleManageSessions}>
+                  Gestionar
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {activeTab === 'activity' && (
+        <Card>
+          <div className="p-6">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-lg font-medium text-[var(--text-primary)]">Actividad Reciente</h3>
+            </div>
+            
+            <div className="space-y-4">
+              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                <Activity className="w-5 h-5 text-green-500" />
+                <div className="flex-1">
+                  <p className="font-medium text-[var(--text-primary)]">Inicio de sesión</p>
+                  <p className="text-sm text-[var(--text-secondary)]">Hace 2 horas desde Chrome en Madrid, España</p>
+                </div>
+                <span className="text-xs text-[var(--text-tertiary)]">Hoy 14:30</span>
+              </div>
+              
+              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                <User className="w-5 h-5 text-blue-500" />
+                <div className="flex-1">
+                  <p className="font-medium text-[var(--text-primary)]">Perfil actualizado</p>
+                  <p className="text-sm text-[var(--text-secondary)]">Se modificó la información de contacto</p>
+                </div>
+                <span className="text-xs text-[var(--text-tertiary)]">Ayer 09:15</span>
+              </div>
+              
+              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
+                <Shield className="w-5 h-5 text-orange-500" />
+                <div className="flex-1">
+                  <p className="font-medium text-[var(--text-primary)]">Contraseña cambiada</p>
+                  <p className="text-sm text-[var(--text-secondary)]">Contraseña actualizada exitosamente</p>
+                </div>
+                <span className="text-xs text-[var(--text-tertiary)]">Hace 2 meses</span>
+              </div>
+              
+              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
+                <Bell className="w-5 h-5 text-purple-500" />
+                <div className="flex-1">
+                  <p className="font-medium text-[var(--text-primary)]">Configuración de notificaciones</p>
+                  <p className="text-sm text-[var(--text-secondary)]">Se habilitaron las notificaciones por email</p>
+                </div>
+                <span className="text-xs text-[var(--text-tertiary)]">Hace 1 semana</span>
+              </div>
+            </div>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+};
+
+export default ProfilePage;

frontend/src/pages/app/settings/profile/index.ts

@@ -0,0 +1 @@
+export { default as ProfilePage } from './ProfilePage';

frontend/src/router/AppRouter.tsx

@@ -30,6 +30,7 @@ const NotificationsPage = React.lazy(() => import('../pages/app/communications/n
 const PreferencesPage = React.lazy(() => import('../pages/app/communications/preferences/PreferencesPage'));
 
 // Settings pages
+const ProfilePage = React.lazy(() => import('../pages/app/settings/profile/ProfilePage'));
 const BakeryConfigPage = React.lazy(() => import('../pages/app/settings/bakery-config/BakeryConfigPage'));
 const SystemSettingsPage = React.lazy(() => import('../pages/app/settings/system/SystemSettingsPage'));
 const TeamPage = React.lazy(() => import('../pages/app/settings/team/TeamPage'));
@@ -214,6 +215,16 @@ export const AppRouter: React.FC = () => {
         />
 
         {/* Settings Routes */}
+        <Route 
+          path="/app/settings/profile" 
+          element={
+            <ProtectedRoute>
+              <AppShell>
+                <ProfilePage />
+              </AppShell>
+            </ProtectedRoute>
+          } 
+        />
         <Route 
           path="/app/settings/bakery-config" 
           element={

frontend/src/router/routes.config.ts

@@ -345,6 +345,16 @@ export const routesConfig: RouteConfig[] = [
     requiresAuth: true,
     showInNavigation: true,
     children: [
+      {
+        path: '/app/settings/profile',
+        name: 'Profile',
+        component: 'ProfilePage',
+        title: 'Mi Perfil',
+        icon: 'user',
+        requiresAuth: true,
+        showInNavigation: true,
+        showInBreadcrumbs: true,
+      },
       {
         path: '/app/settings/bakery-config',
         name: 'BakeryConfig',