Fix few issues

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

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { Plus, Clock, AlertCircle, CheckCircle, Timer, ChefHat, Eye, Edit, Package, Zap, User, PlusCircle } from 'lucide-react';
-import { Button, Input, Card, StatsGrid, EditViewModal, Toggle } from '../../../../components/ui';
+import { Button, StatsGrid, EditViewModal, Toggle, SearchAndFilter, type FilterConfig } from '../../../../components/ui';
 import { statusColors } from '../../../../styles/colors';
 import { formatters } from '../../../../components/ui/Stats/StatsPresets';
 import { LoadingSpinner } from '../../../../components/ui';
@@ -28,6 +28,8 @@ import { ProcessStage } from '../../../../api/types/qualityTemplates';
 
 const ProductionPage: React.FC = () => {
   const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+  const [priorityFilter, setPriorityFilter] = useState('');
   const [selectedBatch, setSelectedBatch] = useState<ProductionBatchResponse | null>(null);
   const [showBatchModal, setShowBatchModal] = useState(false);
   const [showCreateModal, setShowCreateModal] = useState(false);
@@ -200,17 +202,32 @@ const ProductionPage: React.FC = () => {
   const batches = activeBatchesData?.batches || [];
 
   const filteredBatches = useMemo(() => {
-    if (!searchQuery) return batches;
+    let filtered = batches;
 
-    const searchLower = searchQuery.toLowerCase();
-    return batches.filter(batch =>
-      batch.product_name.toLowerCase().includes(searchLower) ||
-      batch.batch_number.toLowerCase().includes(searchLower) ||
-      (batch.staff_assigned && batch.staff_assigned.some(staff =>
-        staff.toLowerCase().includes(searchLower)
-      ))
-    );
-  }, [batches, searchQuery]);
+    // Apply search filter
+    if (searchQuery) {
+      const searchLower = searchQuery.toLowerCase();
+      filtered = filtered.filter(batch =>
+        batch.product_name.toLowerCase().includes(searchLower) ||
+        batch.batch_number.toLowerCase().includes(searchLower) ||
+        (batch.staff_assigned && batch.staff_assigned.some(staff =>
+          staff.toLowerCase().includes(searchLower)
+        ))
+      );
+    }
+
+    // Apply status filter
+    if (statusFilter) {
+      filtered = filtered.filter(batch => batch.status === statusFilter);
+    }
+
+    // Apply priority filter
+    if (priorityFilter) {
+      filtered = filtered.filter(batch => batch.priority === priorityFilter);
+    }
+
+    return filtered;
+  }, [batches, searchQuery, statusFilter, priorityFilter]);
 
   // Calculate production stats from real data
   const productionStats = useMemo(() => {
@@ -362,19 +379,38 @@ const ProductionPage: React.FC = () => {
 
       {/* Production Batches Section - No tabs needed */}
       <>
-          {/* Search Controls */}
-          <Card className="p-4">
-            <div className="flex flex-col sm:flex-row gap-4">
-              <div className="flex-1">
-                <Input
-                  placeholder="Buscar lotes por producto, número de lote o personal..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full"
-                />
-              </div>
-            </div>
-          </Card>
+          {/* Search and Filter Controls */}
+          <SearchAndFilter
+            searchValue={searchQuery}
+            onSearchChange={setSearchQuery}
+            searchPlaceholder="Buscar lotes por producto, número de lote o personal..."
+            filters={[
+              {
+                key: 'status',
+                label: 'Estado',
+                type: 'dropdown',
+                value: statusFilter,
+                onChange: (value) => setStatusFilter(value as string),
+                placeholder: 'Todos los estados',
+                options: Object.values(ProductionStatusEnum).map(status => ({
+                  value: status,
+                  label: status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+                }))
+              },
+              {
+                key: 'priority',
+                label: 'Prioridad',
+                type: 'dropdown',
+                value: priorityFilter,
+                onChange: (value) => setPriorityFilter(value as string),
+                placeholder: 'Todas las prioridades',
+                options: Object.values(ProductionPriorityEnum).map(priority => ({
+                  value: priority,
+                  label: priority.charAt(0).toUpperCase() + priority.slice(1).toLowerCase()
+                }))
+              }
+            ] as FilterConfig[]}
+          />
 
           {/* Production Batches Grid */}
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">