Fix few issues

frontend/src/pages/app/operations/suppliers/SuppliersPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Plus, Building2, Phone, Mail, Eye, Edit, CheckCircle, AlertCircle, Timer, Users, Euro, Loader } from 'lucide-react';
-import { Button, Input, Card, Badge, StatsGrid, StatusCard, getStatusColor, EditViewModal } from '../../../../components/ui';
+import { Button, Badge, StatsGrid, StatusCard, getStatusColor, EditViewModal, SearchAndFilter, type FilterConfig } from '../../../../components/ui';
 import { formatters } from '../../../../components/ui/Stats/StatsPresets';
 import { PageHeader } from '../../../../components/layout';
 import { SupplierStatus, SupplierType, PaymentTerms } from '../../../../api/types/suppliers';
@@ -12,6 +12,8 @@ import { useTranslation } from 'react-i18next';
 const SuppliersPage: React.FC = () => {
   const [activeTab] = useState('all');
   const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+  const [typeFilter, setTypeFilter] = useState('');
   const [showForm, setShowForm] = useState(false);
   const [modalMode, setModalMode] = useState<'view' | 'edit'>('view');
   const [selectedSupplier, setSelectedSupplier] = useState<any>(null);
@@ -72,8 +74,12 @@ const SuppliersPage: React.FC = () => {
     return t(`suppliers:payment_terms.${terms.toLowerCase()}`);
   };
 
-  // Filtering is now handled by the API query parameters
-  const filteredSuppliers = suppliers;
+  // Apply additional client-side filtering
+  const filteredSuppliers = suppliers.filter(supplier => {
+    const matchesStatus = !statusFilter || supplier.status === statusFilter;
+    const matchesType = !typeFilter || supplier.supplier_type === typeFilter;
+    return matchesStatus && matchesType;
+  });
 
   const supplierStats = statisticsData || {
     total_suppliers: 0,
@@ -191,19 +197,38 @@ const SuppliersPage: React.FC = () => {
         columns={3}
       />
 
-      {/* Simplified Controls */}
-      <Card className="p-4">
-        <div className="flex flex-col sm:flex-row gap-4">
-          <div className="flex-1">
-            <Input
-              placeholder="Buscar proveedores por nombre, código, email o contacto..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full"
-            />
-          </div>
-        </div>
-      </Card>
+      {/* Search and Filter Controls */}
+      <SearchAndFilter
+        searchValue={searchTerm}
+        onSearchChange={setSearchTerm}
+        searchPlaceholder="Buscar proveedores por nombre, código, email o contacto..."
+        filters={[
+          {
+            key: 'status',
+            label: 'Estado',
+            type: 'dropdown',
+            value: statusFilter,
+            onChange: (value) => setStatusFilter(value as string),
+            placeholder: 'Todos los estados',
+            options: Object.values(SupplierStatus).map(status => ({
+              value: status,
+              label: t(`suppliers:status.${status.toLowerCase()}`)
+            }))
+          },
+          {
+            key: 'type',
+            label: 'Tipo',
+            type: 'dropdown',
+            value: typeFilter,
+            onChange: (value) => setTypeFilter(value as string),
+            placeholder: 'Todos los tipos',
+            options: Object.values(SupplierType).map(type => ({
+              value: type,
+              label: t(`suppliers:types.${type.toLowerCase()}`)
+            }))
+          }
+        ] as FilterConfig[]}
+      />
 
       {/* Suppliers Grid */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
@@ -229,6 +254,12 @@ const SuppliersPage: React.FC = () => {
                 supplier.phone || 'Sin teléfono',
                 `Creado: ${new Date(supplier.created_at).toLocaleDateString('es-ES')}`
               ]}
+              onClick={() => {
+                setSelectedSupplier(supplier);
+                setIsCreating(false);
+                setModalMode('view');
+                setShowForm(true);
+              }}
               actions={[
                 // Primary action - View supplier details
                 {