Fix frontend 3

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 { Button, Card, Badge, Table } from '../../../../components/ui';
-import type { TableColumn } from '../../../../components/ui';
+import { Plus, Calendar, Clock, Users, AlertCircle, Search, Download, Filter } from 'lucide-react';
+import { Button, Card, Badge } 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',
-      dataIndex: 'recipeName',
-      render: (value) => (
+      header: 'Receta',
+      sortable: true,
+      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',
-      dataIndex: 'quantity',
-      render: (value) => `${value} unidades`,
+      header: 'Cantidad',
+      sortable: true,
+      filterable: true,
+      type: 'number',
+      width: 120,
+      align: 'center',
+      cell: (value) => `${value} unidades`,
     },
     {
+      id: 'status',
       key: 'status',
-      title: 'Estado',
-      dataIndex: 'status',
-      render: (value) => getStatusBadge(value),
+      header: 'Estado',
+      sortable: true,
+      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',
-      dataIndex: 'priority',
-      render: (value) => getPriorityBadge(value),
+      header: 'Prioridad',
+      sortable: true,
+      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',
-      dataIndex: 'assignedTo',
-      render: (value) => (
+      header: 'Asignado a',
+      sortable: true,
+      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',
-      dataIndex: 'progress',
-      render: (value) => (
+      header: 'Progreso',
+      sortable: true,
+      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',
-      dataIndex: 'estimatedCompletion',
-      render: (value) => new Date(value).toLocaleTimeString('es-ES', { 
+      header: 'Tiempo Estimado',
+      sortable: true,
+      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',
-      align: 'right' as const,
-      render: () => (
+      header: 'Acciones',
+      sortable: false,
+      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
-                </Button>
-                <Button variant="outline" size="sm">
+                  <Filter className="w-4 h-4 mr-2" />
                   Vista Calendario
                 </Button>
               </div>
             </div>
             
-            <Table
-              columns={columns}
+            <DataTable
               data={mockProductionOrders}
-              rowKey="id"
-              hover={true}
-              variant="default"
-              size="md"
+              columns={columns}
+              isLoading={isLoading}
+              searchQuery={searchQuery}
+              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>