diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index abe9912..6ae9de5 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1462,6 +1462,8 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection const [creating, setCreating] = useState(false) const [updating, setUpdating] = useState(false) const [mechanics, setMechanics] = useState([]) + const [searchTerm, setSearchTerm] = useState('') + const [aiModeFilter, setAiModeFilter] = useState('all') // all, off, optional, required const [formData, setFormData] = useState({ name: '', description: '', @@ -1497,6 +1499,19 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection } } + // Filtrar checklists + const filteredChecklists = checklists.filter(checklist => { + const matchesSearch = + checklist.name?.toLowerCase().includes(searchTerm.toLowerCase()) || + checklist.description?.toLowerCase().includes(searchTerm.toLowerCase()) || + checklist.id?.toString().includes(searchTerm) + + const matchesAiMode = + aiModeFilter === 'all' || checklist.ai_mode === aiModeFilter + + return matchesSearch && matchesAiMode + }) + const handleCreate = async (e) => { e.preventDefault() setCreating(true) @@ -1581,6 +1596,41 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection )} + {/* Buscador y Filtros */} + {checklists.length > 0 && ( +
+
+ {/* Buscador */} +
+ setSearchTerm(e.target.value)} + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + /> +
+ + {/* Filtro de Modo IA */} + +
+ + {/* Contador de resultados */} +
+ Mostrando {filteredChecklists.length} de {checklists.length} checklists +
+
+ )} + {checklists.length === 0 ? (
{user.role === 'admin' ? ( @@ -1603,8 +1653,21 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection )}
+ ) : filteredChecklists.length === 0 ? ( +
+

No se encontraron checklists con los filtros aplicados

+ +
) : ( - checklists.map((checklist) => ( + filteredChecklists.map((checklist) => (
@@ -2670,6 +2733,26 @@ function InspectionDetailModal({ inspection, user, onClose, onUpdate }) { function InspectionsTab({ inspections, user, onUpdate }) { const [selectedInspection, setSelectedInspection] = useState(null) + const [searchTerm, setSearchTerm] = useState('') + const [statusFilter, setStatusFilter] = useState('all') // all, completed, draft + + // Filtrar inspecciones + const filteredInspections = inspections.filter(inspection => { + const matchesSearch = + inspection.vehicle_plate?.toLowerCase().includes(searchTerm.toLowerCase()) || + inspection.vehicle_brand?.toLowerCase().includes(searchTerm.toLowerCase()) || + inspection.vehicle_model?.toLowerCase().includes(searchTerm.toLowerCase()) || + inspection.client_name?.toLowerCase().includes(searchTerm.toLowerCase()) || + inspection.or_number?.toLowerCase().includes(searchTerm.toLowerCase()) || + inspection.id?.toString().includes(searchTerm) + + const matchesStatus = + statusFilter === 'all' || + (statusFilter === 'completed' && inspection.status === 'completed') || + (statusFilter === 'draft' && inspection.status !== 'completed') + + return matchesSearch && matchesStatus + }) if (inspections.length === 0) { return ( @@ -2682,8 +2765,55 @@ function InspectionsTab({ inspections, user, onUpdate }) { return ( <> -
- {inspections.map((inspection) => ( + {/* Buscador y Filtros */} +
+
+ {/* Buscador */} +
+ setSearchTerm(e.target.value)} + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + /> +
+ + {/* Filtro de Estado */} + +
+ + {/* Contador de resultados */} +
+ Mostrando {filteredInspections.length} de {inspections.length} inspecciones +
+
+ + {/* Lista de Inspecciones */} + {filteredInspections.length === 0 ? ( +
+

No se encontraron inspecciones con los filtros aplicados

+ +
+ ) : ( +
+ {filteredInspections.map((inspection) => (
@@ -2725,7 +2855,8 @@ function InspectionsTab({ inspections, user, onUpdate }) {
))} -
+
+ )} {/* Modal de Detalle */} {selectedInspection && (