Fix few issues

frontend/src/pages/app/database/models/ModelsConfigPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { Brain, TrendingUp, AlertCircle, Play, RotateCcw, Eye, Loader, CheckCircle } from 'lucide-react';
-import { Button, Card, Badge, Modal, Table, Select, Input, StatsGrid, StatusCard } from '../../../../components/ui';
+import { Button, Badge, Modal, Table, Select, StatsGrid, StatusCard, SearchAndFilter, type FilterConfig, Card } from '../../../../components/ui';
 import { PageHeader } from '../../../../components/layout';
 import { useToast } from '../../../../hooks/ui/useToast';
 import { useCurrentTenant } from '../../../../stores/tenant.store';
@@ -265,31 +265,28 @@ const ModelsConfigPage: React.FC = () => {
         </Card>
       )}
 
-      {/* Filters */}
-      <Card className="p-6">
-        <div className="flex flex-col sm:flex-row gap-4">
-          <div className="flex-1">
-            <Input
-              placeholder="Buscar ingrediente..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-          </div>
-          <div className="w-full sm:w-48">
-            <Select
-              value={statusFilter}
-              onChange={(value) => setStatusFilter(value as string)}
-              options={[
-                { value: 'all', label: 'Todos los estados' },
-                { value: 'no_model', label: 'Sin modelo' },
-                { value: 'active', label: 'Activo' },
-                { value: 'training', label: 'Entrenando' },
-                { value: 'error', label: 'Error' },
-              ]}
-            />
-          </div>
-        </div>
-      </Card>
+      {/* Search and Filter Controls */}
+      <SearchAndFilter
+        searchValue={searchTerm}
+        onSearchChange={setSearchTerm}
+        searchPlaceholder="Buscar ingrediente..."
+        filters={[
+          {
+            key: 'status',
+            label: 'Estado',
+            type: 'dropdown',
+            value: statusFilter,
+            onChange: (value) => setStatusFilter(value as string),
+            placeholder: 'Todos los estados',
+            options: [
+              { value: 'no_model', label: 'Sin modelo' },
+              { value: 'active', label: 'Activo' },
+              { value: 'training', label: 'Entrenando' },
+              { value: 'error', label: 'Error' }
+            ]
+          }
+        ] as FilterConfig[]}
+      />
 
       {/* Models Grid */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
@@ -345,6 +342,13 @@ const ModelsConfigPage: React.FC = () => {
                   label: 'Último entrenamiento',
                   value: new Date(status.lastTrainingDate).toLocaleDateString('es-ES')
                 } : undefined}
+                onClick={() => {
+                  if (status.hasModel) {
+                    handleViewModelDetails(status.ingredient);
+                  } else {
+                    handleStartTraining(status.ingredient);
+                  }
+                }}
                 actions={[
                   // Primary action - View details or train model
                   {