Add frontend imporvements

frontend/src/pages/app/operations/inventory/InventoryPage.tsx

@@ -1,190 +1,180 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Plus, Download, AlertTriangle, Package, Clock, CheckCircle, Eye, Edit, Calendar, DollarSign } from 'lucide-react';
 import { Button, Input, Card, Badge, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
+import { LoadingSpinner } from '../../../../components/shared';
 import { formatters } from '../../../../components/ui/Stats/StatsPresets';
 import { PageHeader } from '../../../../components/layout';
 import { InventoryForm, LowStockAlert } from '../../../../components/domain/inventory';
+import { useIngredients, useLowStockIngredients, useStockAnalytics } from '../../../../api/hooks/inventory';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+import { IngredientResponse } from '../../../../api/types/inventory';
 
 const InventoryPage: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [showForm, setShowForm] = useState(false);
   const [modalMode, setModalMode] = useState<'view' | 'edit'>('view');
-  const [selectedItem, setSelectedItem] = useState<typeof mockInventoryItems[0] | null>(null);
+  const [selectedItem, setSelectedItem] = useState<IngredientResponse | null>(null);
+  
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
 
-  const mockInventoryItems = [
-    {
-      id: '1',
-      name: 'Harina de Trigo',
-      category: 'Harinas',
-      currentStock: 45,
-      minStock: 20,
-      maxStock: 100,
-      unit: 'kg',
-      cost: 1.20,
-      supplier: 'Molinos del Sur',
-      lastRestocked: '2024-01-20',
-      expirationDate: '2024-06-30',
-      status: 'normal',
-    },
-    {
-      id: '2',
-      name: 'Levadura Fresca',
-      category: 'Levaduras',
-      currentStock: 8,
-      minStock: 10,
-      maxStock: 25,
-      unit: 'kg',
-      cost: 8.50,
-      supplier: 'Levaduras SA',
-      lastRestocked: '2024-01-25',
-      expirationDate: '2024-02-15',
-      status: 'low',
-    },
-    {
-      id: '3',
-      name: 'Mantequilla',
-      category: 'Lácteos',
-      currentStock: 15,
-      minStock: 5,
-      maxStock: 30,
-      unit: 'kg',
-      cost: 5.80,
-      supplier: 'Lácteos Frescos',
-      lastRestocked: '2024-01-24',
-      expirationDate: '2024-02-10',
-      status: 'normal',
-    },
-    {
-      id: '4',
-      name: 'Azúcar Blanco',
-      category: 'Azúcares',
-      currentStock: 0,
-      minStock: 15,
-      maxStock: 50,
-      unit: 'kg',
-      cost: 0.95,
-      supplier: 'Distribuidora Central',
-      lastRestocked: '2024-01-10',
-      expirationDate: '2024-12-31',
-      status: 'out',
-    },
-    {
-      id: '5',
-      name: 'Leche Entera',
-      category: 'Lácteos',
-      currentStock: 3,
-      minStock: 10,
-      maxStock: 40,
-      unit: 'L',
-      cost: 1.45,
-      supplier: 'Lácteos Frescos',
-      lastRestocked: '2024-01-22',
-      expirationDate: '2024-01-28',
-      status: 'expired',
-    },
-  ];
+  // API Data
+  const { 
+    data: ingredientsData, 
+    isLoading: ingredientsLoading, 
+    error: ingredientsError 
+  } = useIngredients(tenantId, { search: searchTerm || undefined });
+  
+  const { 
+    data: lowStockData, 
+    isLoading: lowStockLoading 
+  } = useLowStockIngredients(tenantId);
+  
+  const { 
+    data: analyticsData, 
+    isLoading: analyticsLoading 
+  } = useStockAnalytics(tenantId);
+  
+  const ingredients = ingredientsData?.items || [];
+  const lowStockItems = lowStockData || [];
 
-  const getInventoryStatusConfig = (item: typeof mockInventoryItems[0]) => {
-    const { currentStock, minStock, status } = item;
+  const getInventoryStatusConfig = (ingredient: IngredientResponse) => {
+    const { current_stock_level, low_stock_threshold, stock_status } = ingredient;
     
-    if (status === 'expired') {
-      return {
-        color: getStatusColor('expired'),
-        text: 'Caducado',
-        icon: AlertTriangle,
-        isCritical: true,
-        isHighlight: false
-      };
+    switch (stock_status) {
+      case 'out_of_stock':
+        return {
+          color: getStatusColor('cancelled'),
+          text: 'Sin Stock',
+          icon: AlertTriangle,
+          isCritical: true,
+          isHighlight: false
+        };
+      case 'low_stock':
+        return {
+          color: getStatusColor('pending'),
+          text: 'Stock Bajo',
+          icon: AlertTriangle,
+          isCritical: false,
+          isHighlight: true
+        };
+      case 'overstock':
+        return {
+          color: getStatusColor('info'),
+          text: 'Sobrestock',
+          icon: Package,
+          isCritical: false,
+          isHighlight: false
+        };
+      case 'in_stock':
+      default:
+        return {
+          color: getStatusColor('completed'),
+          text: 'Normal',
+          icon: CheckCircle,
+          isCritical: false,
+          isHighlight: false
+        };
     }
+  };
+
+  const filteredItems = useMemo(() => {
+    if (!searchTerm) return ingredients;
     
-    if (currentStock === 0) {
+    return ingredients.filter(ingredient => {
+      const searchLower = searchTerm.toLowerCase();
+      return ingredient.name.toLowerCase().includes(searchLower) ||
+        ingredient.category.toLowerCase().includes(searchLower) ||
+        (ingredient.description && ingredient.description.toLowerCase().includes(searchLower));
+    });
+  }, [ingredients, searchTerm]);
+
+  const inventoryStats = useMemo(() => {
+    if (!analyticsData) {
       return {
-        color: getStatusColor('out'),
-        text: 'Sin Stock',
-        icon: AlertTriangle,
-        isCritical: true,
-        isHighlight: false
-      };
-    }
-    
-    if (currentStock <= minStock) {
-      return {
-        color: getStatusColor('low'),
-        text: 'Stock Bajo',
-        icon: AlertTriangle,
-        isCritical: false,
-        isHighlight: true
+        totalItems: ingredients.length,
+        lowStockItems: lowStockItems.length,
+        outOfStock: ingredients.filter(item => item.stock_status === 'out_of_stock').length,
+        expiringSoon: 0, // This would come from expired stock API
+        totalValue: ingredients.reduce((sum, item) => sum + (item.current_stock_level * (item.average_cost || 0)), 0),
+        categories: [...new Set(ingredients.map(item => item.category))].length,
       };
     }
     
     return {
-      color: getStatusColor('normal'),
-      text: 'Normal',
-      icon: CheckCircle,
-      isCritical: false,
-      isHighlight: false
+      totalItems: analyticsData.total_ingredients || 0,
+      lowStockItems: analyticsData.low_stock_count || 0,
+      outOfStock: analyticsData.out_of_stock_count || 0,
+      expiringSoon: analyticsData.expiring_soon_count || 0,
+      totalValue: analyticsData.total_stock_value || 0,
+      categories: [...new Set(ingredients.map(item => item.category))].length,
     };
-  };
+  }, [analyticsData, ingredients, lowStockItems]);
 
-  const filteredItems = mockInventoryItems.filter(item => {
-    const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      item.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      item.supplier.toLowerCase().includes(searchTerm.toLowerCase());
-    
-    return matchesSearch;
-  });
-
-  const lowStockItems = mockInventoryItems.filter(item => 
-    item.currentStock <= item.minStock || item.status === 'low' || item.status === 'out' || item.status === 'expired'
-  );
-
-  const mockInventoryStats = {
-    totalItems: mockInventoryItems.length,
-    lowStockItems: lowStockItems.length,
-    outOfStock: mockInventoryItems.filter(item => item.currentStock === 0).length,
-    expiringSoon: mockInventoryItems.filter(item => item.status === 'expired').length,
-    totalValue: mockInventoryItems.reduce((sum, item) => sum + (item.currentStock * item.cost), 0),
-    categories: [...new Set(mockInventoryItems.map(item => item.category))].length,
-  };
-
-  const inventoryStats = [
+  const stats = [
     {
       title: 'Total Artículos',
-      value: mockInventoryStats.totalItems,
+      value: inventoryStats.totalItems,
       variant: 'default' as const,
       icon: Package,
     },
     {
       title: 'Stock Bajo',
-      value: mockInventoryStats.lowStockItems,
+      value: inventoryStats.lowStockItems,
       variant: 'warning' as const,
       icon: AlertTriangle,
     },
     {
       title: 'Sin Stock',
-      value: mockInventoryStats.outOfStock,
+      value: inventoryStats.outOfStock,
       variant: 'error' as const,
       icon: AlertTriangle,
     },
     {
       title: 'Por Caducar',
-      value: mockInventoryStats.expiringSoon,
+      value: inventoryStats.expiringSoon,
       variant: 'error' as const,
       icon: Clock,
     },
     {
       title: 'Valor Total',
-      value: formatters.currency(mockInventoryStats.totalValue),
+      value: formatters.currency(inventoryStats.totalValue),
       variant: 'success' as const,
       icon: DollarSign,
     },
     {
       title: 'Categorías',
-      value: mockInventoryStats.categories,
+      value: inventoryStats.categories,
       variant: 'info' as const,
       icon: Package,
     },
   ];
+  
+  // Loading and error states
+  if (ingredientsLoading || analyticsLoading || !tenantId) {
+    return (
+      <div className="flex items-center justify-center min-h-64">
+        <LoadingSpinner text="Cargando inventario..." />
+      </div>
+    );
+  }
+  
+  if (ingredientsError) {
+    return (
+      <div className="text-center py-12">
+        <AlertTriangle className="mx-auto h-12 w-12 text-red-500 mb-4" />
+        <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
+          Error al cargar el inventario
+        </h3>
+        <p className="text-[var(--text-secondary)] mb-4">
+          {ingredientsError.message || 'Ha ocurrido un error inesperado'}
+        </p>
+        <Button onClick={() => window.location.reload()}>
+          Reintentar
+        </Button>
+      </div>
+    );
+  }
 
   return (
     <div className="space-y-6">
@@ -211,7 +201,7 @@ const InventoryPage: React.FC = () => {
 
       {/* Stats Grid */}
       <StatsGrid 
-        stats={inventoryStats}
+        stats={stats}
         columns={3}
       />
 
@@ -240,34 +230,39 @@ const InventoryPage: React.FC = () => {
 
       {/* Inventory Items Grid */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {filteredItems.map((item) => {
-          const statusConfig = getInventoryStatusConfig(item);
-          const stockPercentage = Math.round((item.currentStock / item.maxStock) * 100);
-          const isExpiringSoon = new Date(item.expirationDate) < new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
-          const isExpired = new Date(item.expirationDate) < new Date();
+        {filteredItems.map((ingredient) => {
+          const statusConfig = getInventoryStatusConfig(ingredient);
+          const stockPercentage = ingredient.max_stock_level ? 
+            Math.round((ingredient.current_stock_level / ingredient.max_stock_level) * 100) : 0;
+          const averageCost = ingredient.average_cost || 0;
+          const totalValue = ingredient.current_stock_level * averageCost;
           
           return (
             <StatusCard
-              key={item.id}
-              id={item.id}
+              key={ingredient.id}
+              id={ingredient.id}
               statusIndicator={statusConfig}
-              title={item.name}
-              subtitle={`${item.category} • ${item.supplier}`}
-              primaryValue={item.currentStock}
-              primaryValueLabel={item.unit}
+              title={ingredient.name}
+              subtitle={`${ingredient.category}${ingredient.description ? ` • ${ingredient.description}` : ''}`}
+              primaryValue={ingredient.current_stock_level}
+              primaryValueLabel={ingredient.unit_of_measure}
               secondaryInfo={{
                 label: 'Valor total',
-                value: `${formatters.currency(item.currentStock * item.cost)} (${formatters.currency(item.cost)}/${item.unit})`
+                value: `${formatters.currency(totalValue)}${averageCost > 0 ? ` (${formatters.currency(averageCost)}/${ingredient.unit_of_measure})` : ''}`
               }}
-              progress={{
+              progress={ingredient.max_stock_level ? {
                 label: 'Nivel de stock',
                 percentage: stockPercentage,
                 color: statusConfig.color
-              }}
+              } : undefined}
               metadata={[
-                `Rango: ${item.minStock} - ${item.maxStock} ${item.unit}`,
-                `Caduca: ${new Date(item.expirationDate).toLocaleDateString('es-ES')}${isExpired ? ' (CADUCADO)' : isExpiringSoon ? ' (PRONTO)' : ''}`,
-                `Último restock: ${new Date(item.lastRestocked).toLocaleDateString('es-ES')}`
+                `Rango: ${ingredient.low_stock_threshold} - ${ingredient.max_stock_level || 'Sin límite'} ${ingredient.unit_of_measure}`,
+                `Stock disponible: ${ingredient.available_stock} ${ingredient.unit_of_measure}`,
+                `Stock reservado: ${ingredient.reserved_stock} ${ingredient.unit_of_measure}`,
+                ingredient.last_restocked ? `Último restock: ${new Date(ingredient.last_restocked).toLocaleDateString('es-ES')}` : 'Sin historial de restock',
+                ...(ingredient.requires_refrigeration ? ['Requiere refrigeración'] : []),
+                ...(ingredient.requires_freezing ? ['Requiere congelación'] : []),
+                ...(ingredient.is_seasonal ? ['Producto estacional'] : [])
               ]}
               actions={[
                 {
@@ -275,7 +270,7 @@ const InventoryPage: React.FC = () => {
                   icon: Eye,
                   variant: 'outline',
                   onClick: () => {
-                    setSelectedItem(item);
+                    setSelectedItem(ingredient);
                     setModalMode('view');
                     setShowForm(true);
                   }
@@ -285,7 +280,7 @@ const InventoryPage: React.FC = () => {
                   icon: Edit,
                   variant: 'outline',
                   onClick: () => {
-                    setSelectedItem(item);
+                    setSelectedItem(ingredient);
                     setModalMode('edit');
                     setShowForm(true);
                   }
@@ -325,7 +320,7 @@ const InventoryPage: React.FC = () => {
           mode={modalMode}
           onModeChange={setModalMode}
           title={selectedItem.name}
-          subtitle={`${selectedItem.category} - ${selectedItem.supplier}`}
+          subtitle={`${selectedItem.category}${selectedItem.description ? ` - ${selectedItem.description}` : ''}`}
           statusIndicator={getInventoryStatusConfig(selectedItem)}
           size="lg"
           sections={[
@@ -343,12 +338,12 @@ const InventoryPage: React.FC = () => {
                   value: selectedItem.category
                 },
                 {
-                  label: 'Proveedor',
-                  value: selectedItem.supplier
+                  label: 'Descripción',
+                  value: selectedItem.description || 'Sin descripción'
                 },
                 {
                   label: 'Unidad de medida',
-                  value: selectedItem.unit
+                  value: selectedItem.unit_of_measure
                 }
               ]
             },
@@ -358,22 +353,28 @@ const InventoryPage: React.FC = () => {
               fields: [
                 {
                   label: 'Stock actual',
-                  value: `${selectedItem.currentStock} ${selectedItem.unit}`,
+                  value: `${selectedItem.current_stock_level} ${selectedItem.unit_of_measure}`,
                   highlight: true
                 },
                 {
-                  label: 'Stock mínimo',
-                  value: `${selectedItem.minStock} ${selectedItem.unit}`
+                  label: 'Stock disponible',
+                  value: `${selectedItem.available_stock} ${selectedItem.unit_of_measure}`
+                },
+                {
+                  label: 'Stock reservado',
+                  value: `${selectedItem.reserved_stock} ${selectedItem.unit_of_measure}`
+                },
+                {
+                  label: 'Umbral mínimo',
+                  value: `${selectedItem.low_stock_threshold} ${selectedItem.unit_of_measure}`
                 },
                 {
                   label: 'Stock máximo',
-                  value: `${selectedItem.maxStock} ${selectedItem.unit}`
+                  value: selectedItem.max_stock_level ? `${selectedItem.max_stock_level} ${selectedItem.unit_of_measure}` : 'Sin límite'
                 },
                 {
-                  label: 'Porcentaje de stock',
-                  value: Math.round((selectedItem.currentStock / selectedItem.maxStock) * 100),
-                  type: 'percentage',
-                  highlight: selectedItem.currentStock <= selectedItem.minStock
+                  label: 'Punto de reorden',
+                  value: `${selectedItem.reorder_point} ${selectedItem.unit_of_measure}`
                 }
               ]
             },
@@ -382,35 +383,62 @@ const InventoryPage: React.FC = () => {
               icon: DollarSign,
               fields: [
                 {
-                  label: 'Costo por unidad',
-                  value: selectedItem.cost,
+                  label: 'Costo promedio por unidad',
+                  value: selectedItem.average_cost || 0,
                   type: 'currency'
                 },
                 {
                   label: 'Valor total en stock',
-                  value: selectedItem.currentStock * selectedItem.cost,
+                  value: selectedItem.current_stock_level * (selectedItem.average_cost || 0),
                   type: 'currency',
                   highlight: true
                 }
               ]
             },
             {
-              title: 'Fechas Importantes',
+              title: 'Información Adicional',
               icon: Calendar,
               fields: [
                 {
                   label: 'Último restock',
-                  value: selectedItem.lastRestocked,
-                  type: 'date'
+                  value: selectedItem.last_restocked || 'Sin historial',
+                  type: selectedItem.last_restocked ? 'datetime' : undefined
                 },
                 {
-                  label: 'Fecha de caducidad',
-                  value: selectedItem.expirationDate,
-                  type: 'date',
-                  highlight: new Date(selectedItem.expirationDate) < new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+                  label: 'Vida útil',
+                  value: selectedItem.shelf_life_days ? `${selectedItem.shelf_life_days} días` : 'No especificada'
+                },
+                {
+                  label: 'Requiere refrigeración',
+                  value: selectedItem.requires_refrigeration ? 'Sí' : 'No',
+                  highlight: selectedItem.requires_refrigeration
+                },
+                {
+                  label: 'Requiere congelación',
+                  value: selectedItem.requires_freezing ? 'Sí' : 'No',
+                  highlight: selectedItem.requires_freezing
+                },
+                {
+                  label: 'Producto estacional',
+                  value: selectedItem.is_seasonal ? 'Sí' : 'No'
+                },
+                {
+                  label: 'Creado',
+                  value: selectedItem.created_at,
+                  type: 'datetime'
                 }
               ]
-            }
+            },
+            ...(selectedItem.notes ? [{
+              title: 'Notas',
+              fields: [
+                {
+                  label: 'Observaciones',
+                  value: selectedItem.notes,
+                  span: 2 as const
+                }
+              ]
+            }] : [])
           ]}
           onEdit={() => {
             console.log('Editing inventory item:', selectedItem.id);