Fix few issues

frontend/src/pages/app/operations/maquinaria/MaquinariaPage.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Plus, AlertTriangle, Settings, CheckCircle, Eye, Wrench, Thermometer, Activity, Search, Filter, Bell, History, Calendar, Edit, Trash2 } from 'lucide-react';
-import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
+import { Button, StatsGrid, StatusCard, getStatusColor, SearchAndFilter, type FilterConfig } from '../../../../components/ui';
 import { Badge } from '../../../../components/ui/Badge';
 import { LoadingSpinner } from '../../../../components/ui';
 import { PageHeader } from '../../../../components/layout';
@@ -150,7 +150,8 @@ const MOCK_EQUIPMENT: Equipment[] = [
 const MaquinariaPage: React.FC = () => {
   const { t } = useTranslation(['equipment', 'common']);
   const [searchTerm, setSearchTerm] = useState('');
-  const [statusFilter, setStatusFilter] = useState<Equipment['status'] | 'all'>('all');
+  const [statusFilter, setStatusFilter] = useState('');
+  const [typeFilter, setTypeFilter] = useState('');
   const [selectedItem, setSelectedItem] = useState<Equipment | null>(null);
   const [showMaintenanceModal, setShowMaintenanceModal] = useState(false);
   const [showEquipmentModal, setShowEquipmentModal] = useState(false);
@@ -231,11 +232,12 @@ const MaquinariaPage: React.FC = () => {
         eq.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
         eq.type.toLowerCase().includes(searchTerm.toLowerCase());
 
-      const matchesStatus = statusFilter === 'all' || eq.status === statusFilter;
+      const matchesStatus = !statusFilter || eq.status === statusFilter;
+      const matchesType = !typeFilter || eq.type === typeFilter;
 
-      return matchesSearch && matchesStatus;
+      return matchesSearch && matchesStatus && matchesType;
     });
-  }, [MOCK_EQUIPMENT, searchTerm, statusFilter]);
+  }, [MOCK_EQUIPMENT, searchTerm, statusFilter, typeFilter]);
 
   const equipmentStats = useMemo(() => {
     const total = MOCK_EQUIPMENT.length;
@@ -342,36 +344,44 @@ const MaquinariaPage: React.FC = () => {
         columns={3}
       />
 
-      {/* Controls */}
-      <Card className="p-4">
-        <div className="flex flex-col sm:flex-row gap-4">
-          <div className="flex-1">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
-              <Input
-                placeholder={t('common:forms.search_placeholder')}
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-10"
-              />
-            </div>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Filter className="w-4 h-4 text-[var(--text-tertiary)]" />
-            <select
-              value={statusFilter}
-              onChange={(e) => setStatusFilter(e.target.value as Equipment['status'] | 'all')}
-              className="px-3 py-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-primary)] text-[var(--text-primary)]"
-            >
-              <option value="all">{t('common:forms.select_option')}</option>
-              <option value="operational">{t('equipment_status.operational')}</option>
-              <option value="warning">{t('equipment_status.warning')}</option>
-              <option value="maintenance">{t('equipment_status.maintenance')}</option>
-              <option value="down">{t('equipment_status.down')}</option>
-            </select>
-          </div>
-        </div>
-      </Card>
+      {/* Search and Filter Controls */}
+      <SearchAndFilter
+        searchValue={searchTerm}
+        onSearchChange={setSearchTerm}
+        searchPlaceholder={t('common:forms.search_placeholder')}
+        filters={[
+          {
+            key: 'status',
+            label: t('fields.status'),
+            type: 'dropdown',
+            value: statusFilter,
+            onChange: (value) => setStatusFilter(value as string),
+            placeholder: t('common:forms.select_option'),
+            options: [
+              { value: 'operational', label: t('equipment_status.operational') },
+              { value: 'warning', label: t('equipment_status.warning') },
+              { value: 'maintenance', label: t('equipment_status.maintenance') },
+              { value: 'down', label: t('equipment_status.down') }
+            ]
+          },
+          {
+            key: 'type',
+            label: 'Tipo',
+            type: 'dropdown',
+            value: typeFilter,
+            onChange: (value) => setTypeFilter(value as string),
+            placeholder: 'Todos los tipos',
+            options: [
+              { value: 'oven', label: 'Horno' },
+              { value: 'mixer', label: 'Batidora' },
+              { value: 'proofer', label: 'Fermentadora' },
+              { value: 'freezer', label: 'Congelador' },
+              { value: 'packaging', label: 'Empaquetado' },
+              { value: 'other', label: 'Otro' }
+            ]
+          }
+        ] as FilterConfig[]}
+      />
 
       {/* Equipment Grid */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
@@ -397,6 +407,7 @@ const MaquinariaPage: React.FC = () => {
                 label: t('fields.uptime'),
                 value: `${equipment.uptime.toFixed(1)}%`
               }}
+              onClick={() => handleShowMaintenanceDetails(equipment)}
               actions={[
                 {
                   label: t('actions.view_details'),