Fix few issues

frontend/src/components/domain/production/QualityTemplateManager.tsx

@@ -18,13 +18,12 @@ import {
 } from 'lucide-react';
 import {
   Button,
-  Input,
-  Card,
   Badge,
-  Select,
   StatusCard,
   Modal,
-  StatsGrid
+  StatsGrid,
+  SearchAndFilter,
+  type FilterConfig
 } from '../../ui';
 import { LoadingSpinner } from '../../ui';
 import { PageHeader } from '../../layout';
@@ -285,59 +284,45 @@ export const QualityTemplateManager: React.FC<QualityTemplateManagerProps> = ({
         columns={4}
       />
 
-      {/* Filters */}
-      <Card className="p-4">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[var(--text-tertiary)]" />
-            <Input
-              placeholder="Buscar plantillas..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10"
-            />
-          </div>
-
-          <Select
-            value={selectedCheckType}
-            onChange={(e) => setSelectedCheckType(e.target.value as QualityCheckType | '')}
-            placeholder="Tipo de control"
-          >
-            <option value="">Todos los tipos</option>
-            {Object.entries(QUALITY_CHECK_TYPE_CONFIG).map(([type, config]) => (
-              <option key={type} value={type}>
-                {config.label}
-              </option>
-            ))}
-          </Select>
-
-          <Select
-            value={selectedStage}
-            onChange={(e) => setSelectedStage(e.target.value as ProcessStage | '')}
-            placeholder="Etapa del proceso"
-          >
-            <option value="">Todas las etapas</option>
-            {Object.entries(PROCESS_STAGE_LABELS).map(([stage, label]) => (
-              <option key={stage} value={stage}>
-                {label}
-              </option>
-            ))}
-          </Select>
-
-          <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              id="activeOnly"
-              checked={showActiveOnly}
-              onChange={(e) => setShowActiveOnly(e.target.checked)}
-              className="rounded border-[var(--border-primary)]"
-            />
-            <label htmlFor="activeOnly" className="text-sm text-[var(--text-secondary)]">
-              Solo activas
-            </label>
-          </div>
-        </div>
-      </Card>
+      {/* Search and Filter Controls */}
+      <SearchAndFilter
+        searchValue={searchTerm}
+        onSearchChange={setSearchTerm}
+        searchPlaceholder="Buscar plantillas..."
+        filters={[
+          {
+            key: 'checkType',
+            label: 'Tipo de control',
+            type: 'dropdown',
+            value: selectedCheckType,
+            onChange: (value) => setSelectedCheckType(value as QualityCheckType | ''),
+            placeholder: 'Todos los tipos',
+            options: Object.entries(QUALITY_CHECK_TYPE_CONFIG).map(([type, config]) => ({
+              value: type,
+              label: config.label
+            }))
+          },
+          {
+            key: 'stage',
+            label: 'Etapa del proceso',
+            type: 'dropdown',
+            value: selectedStage,
+            onChange: (value) => setSelectedStage(value as ProcessStage | ''),
+            placeholder: 'Todas las etapas',
+            options: Object.entries(PROCESS_STAGE_LABELS).map(([stage, label]) => ({
+              value: stage,
+              label: label
+            }))
+          },
+          {
+            key: 'activeOnly',
+            label: 'Solo activas',
+            type: 'checkbox',
+            value: showActiveOnly,
+            onChange: (value) => setShowActiveOnly(value as boolean)
+          }
+        ] as FilterConfig[]}
+      />
 
       {/* Templates Grid */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">