✅ Cambios Implementados:
1. Corregido el problema del filtro de fechas Aumentado el límite de inspecciones de 10 a 1000 en la línea 352 Ahora el backend enviará hasta 1000 inspecciones, permitiendo que el filtro de fechas funcione correctamente con todos los datos 2. Mejorado el diseño de los filtros Grid de 6 columnas (en pantallas grandes) en lugar de 4+4 Reducido el padding de px-4 py-2 a px-3 py-2 con text-sm para campos más compactos Placeholder más corto: "Placa, marca, modelo, OR..." en lugar del largo anterior Campo buscar ocupa 2 columnas (en lg), los demás 1 columna cada uno Todo en una sola fila en pantallas grandes
This commit is contained in:
@@ -337,7 +337,7 @@ function DashboardPage({ user, setUser }) {
|
||||
}
|
||||
|
||||
// Cargar inspecciones
|
||||
const inspectionsRes = await fetch(`${API_URL}/api/inspections?limit=10`, {
|
||||
const inspectionsRes = await fetch(`${API_URL}/api/inspections?limit=1000`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
@@ -4179,7 +4179,7 @@ function InspectionsTab({ inspections, user, onUpdate, onContinue }) {
|
||||
// Filtro por rango de fechas
|
||||
let matchesDate = true
|
||||
if (dateFrom || dateTo) {
|
||||
const inspectionDate = new Date(inspection.created_at)
|
||||
const inspectionDate = new Date(inspection.started_at)
|
||||
if (dateFrom) {
|
||||
const fromDate = new Date(dateFrom)
|
||||
fromDate.setHours(0, 0, 0, 0)
|
||||
@@ -4218,17 +4218,17 @@ function InspectionsTab({ inspections, user, onUpdate, onContinue }) {
|
||||
return (
|
||||
<>
|
||||
{/* Buscador y Filtros */}
|
||||
<div className="mb-6 space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="mb-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-3">
|
||||
{/* Buscador */}
|
||||
<div className="lg:col-span-2">
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Buscar</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Placa, marca, modelo, Nº pedido, OR o ID..."
|
||||
placeholder="Placa, marca, modelo, OR..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => 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"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -4238,7 +4238,7 @@ function InspectionsTab({ inspections, user, onUpdate, onContinue }) {
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(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"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
>
|
||||
<option value="all">Todos</option>
|
||||
<option value="completed">Completadas</option>
|
||||
@@ -4253,13 +4253,10 @@ function InspectionsTab({ inspections, user, onUpdate, onContinue }) {
|
||||
type="date"
|
||||
value={dateFrom}
|
||||
onChange={(e) => setDateFrom(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"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Segunda fila de filtros */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{/* Filtro por fecha hasta */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Fecha hasta</label>
|
||||
@@ -4267,7 +4264,7 @@ function InspectionsTab({ inspections, user, onUpdate, onContinue }) {
|
||||
type="date"
|
||||
value={dateTo}
|
||||
onChange={(e) => setDateTo(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"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -4281,16 +4278,16 @@ function InspectionsTab({ inspections, user, onUpdate, onContinue }) {
|
||||
setDateFrom('')
|
||||
setDateTo('')
|
||||
}}
|
||||
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"
|
||||
className="w-full px-3 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm"
|
||||
>
|
||||
🗑️ Limpiar filtros
|
||||
🗑️ Limpiar
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Contador de resultados */}
|
||||
<div className="flex justify-between items-center text-sm text-gray-600">
|
||||
<div className="mt-3 flex justify-between items-center text-sm text-gray-600">
|
||||
<span>
|
||||
Mostrando {filteredInspections.length > 0 ? startIndex + 1 : 0}-{Math.min(endIndex, filteredInspections.length)} de {filteredInspections.length} inspecciones
|
||||
</span>
|
||||
@@ -4356,10 +4353,10 @@ function InspectionsTab({ inspections, user, onUpdate, onContinue }) {
|
||||
</div>
|
||||
{/* Fechas de inspección */}
|
||||
<div className="flex flex-wrap gap-3 mt-2 text-xs">
|
||||
{inspection.created_at && (
|
||||
{inspection.started_at && (
|
||||
<span className="flex items-center gap-1 text-gray-600">
|
||||
<span>📅</span>
|
||||
<span>Inicio: <strong>{new Date(inspection.created_at).toLocaleDateString('es-ES', {
|
||||
<span>Inicio: <strong>{new Date(inspection.started_at).toLocaleDateString('es-ES', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
|
||||
Reference in New Issue
Block a user