Fix few issues

frontend/src/pages/app/operations/procurement/ProcurementPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Plus, ShoppingCart, Truck, Euro, Calendar, Clock, CheckCircle, AlertCircle, Package, Eye, Loader, Edit, ArrowRight, X, Save, Building2, Play, Zap, User } from 'lucide-react';
-import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor, EditViewModal } from '../../../../components/ui';
+import { Button, StatsGrid, StatusCard, getStatusColor, EditViewModal, SearchAndFilter, type FilterConfig } from '../../../../components/ui';
 import { formatters } from '../../../../components/ui/Stats/StatsPresets';
 import { PageHeader } from '../../../../components/layout';
 import { CreatePurchaseOrderModal } from '../../../../components/domain/procurement/CreatePurchaseOrderModal';
@@ -16,6 +16,7 @@ import { useTenantStore } from '../../../../stores/tenant.store';
 
 const ProcurementPage: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
   const [showForm, setShowForm] = useState(false);
   const [modalMode, setModalMode] = useState<'view' | 'edit'>('view');
   const [selectedPlan, setSelectedPlan] = useState<any>(null);
@@ -199,8 +200,10 @@ const ProcurementPage: React.FC = () => {
     const matchesSearch = plan.plan_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
       plan.status.toLowerCase().includes(searchTerm.toLowerCase()) ||
       (plan.special_requirements && plan.special_requirements.toLowerCase().includes(searchTerm.toLowerCase()));
-    
-    return matchesSearch;
+
+    const matchesStatus = !statusFilter || plan.status === statusFilter;
+
+    return matchesSearch && matchesStatus;
   }) || [];
 
 
@@ -350,18 +353,29 @@ const ProcurementPage: React.FC = () => {
       )}
 
 
-      <Card className="p-4">
-        <div className="flex flex-col sm:flex-row gap-4">
-          <div className="flex-1">
-            <Input
-              placeholder="Buscar planes por número, estado o notas..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full"
-            />
-          </div>
-        </div>
-      </Card>
+      <SearchAndFilter
+        searchValue={searchTerm}
+        onSearchChange={setSearchTerm}
+        searchPlaceholder="Buscar planes por número, estado o notas..."
+        filters={[
+          {
+            key: 'status',
+            label: 'Estado',
+            type: 'dropdown',
+            value: statusFilter,
+            onChange: (value) => setStatusFilter(value as string),
+            placeholder: 'Todos los estados',
+            options: [
+              { value: 'draft', label: 'Borrador' },
+              { value: 'pending_approval', label: 'Pendiente Aprobación' },
+              { value: 'approved', label: 'Aprobado' },
+              { value: 'in_execution', label: 'En Ejecución' },
+              { value: 'completed', label: 'Completado' },
+              { value: 'cancelled', label: 'Cancelado' }
+            ]
+          }
+        ] as FilterConfig[]}
+      />
 
       {/* Procurement Plans Grid - Mobile-Optimized */}
       <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
@@ -461,9 +475,9 @@ const ProcurementPage: React.FC = () => {
                     id={plan.plan_number}
                     statusIndicator={statusConfig}
                     title={`Plan ${plan.plan_number}`}
-                    subtitle={`${new Date(plan.plan_date).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: '2-digit' })} • ${plan.procurement_strategy}`}
+                    subtitle={`${new Date(plan.plan_date).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' })} • ${plan.procurement_strategy}`}
                     primaryValue={plan.total_requirements}
-                    primaryValueLabel="requerimientos"
+                    primaryValueLabel="reqs"
                     secondaryInfo={{
                       label: 'Presupuesto',
                       value: `€${formatters.compact(plan.total_estimated_cost)}`
@@ -476,7 +490,7 @@ const ProcurementPage: React.FC = () => {
                     metadata={[
                       `Período: ${new Date(plan.plan_period_start).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' })} - ${new Date(plan.plan_period_end).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' })}`,
                       `Creado: ${new Date(plan.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' })}`,
-                      ...(plan.special_requirements ? [`Req. especiales: ${plan.special_requirements}`] : [])
+                      ...(plan.special_requirements ? [`Especiales: ${plan.special_requirements.length > 30 ? plan.special_requirements.substring(0, 30) + '...' : plan.special_requirements}`] : [])
                     ]}
                     actions={actions}
                   />
@@ -639,7 +653,7 @@ const ProcurementPage: React.FC = () => {
                         isCritical: true
                       }}
                       title={requirement.product_name}
-                      subtitle={`${requirement.requirement_number} • ${requirement.supplier_name || 'Sin proveedor'} • Plan: ${filteredPlans.find(p => p.id === selectedPlanForRequirements)?.plan_number || 'N/A'}`}
+                      subtitle={`${requirement.requirement_number} • ${requirement.supplier_name || 'Sin proveedor'}`}
                       primaryValue={requirement.required_quantity}
                       primaryValueLabel={requirement.unit_of_measure}
                       secondaryInfo={{