-
Resultados
-
+ {/* Panel de filtros mejorado */}
+
+
+
+
+
+
Filtros de búsqueda
+
+
+
+
+ {/* Tipo de reporte */}
+
+
+
+
+
+ {/* Fecha inicio */}
+
+
+ setFechaInicio(e.target.value)}
+ className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
+ />
+
+
+ {/* Fecha fin */}
+
+
+ setFechaFin(e.target.value)}
+ className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
+ />
+
+
+ {/* Botón filtrar */}
+
+
+ {/* Botón limpiar */}
+
+
+
+
+
-
-
-
-
- | ID |
- Nombre |
- Tipo |
- Fecha |
- Acciones |
-
-
-
-
- | 1 |
- Reporte de usuarios |
- Usuarios |
- 2025-07-22 |
-
-
- |
-
-
- | 2 |
- Reporte de documentos |
- Documentos |
- 2025-07-21 |
-
-
- |
-
- {/* Más filas de ejemplo aquí */}
-
-
+
+
+ {/* Sección de resultados */}
+
+
+ {/* Header de la sección */}
+
+
+
+
+
+
Reportes disponibles
+
+
+ 📋 {reportes.length} reportes encontrados
+
+
+
+ {/* Botón descargar masivo */}
+
+
+
+
+
+
+
+
+ {/* Contenido de reportes */}
+
+ {/* Vista Desktop - Tabla */}
+
+
+
+
+
+ | ID |
+ Nombre del Reporte |
+ Tipo |
+ Fecha |
+ Estado |
+ Acciones |
+
+
+
+ {reportes.map((reporte, index) => (
+
+ |
+ #{reporte.id.toString().padStart(3, '0')}
+ |
+
+ {reporte.nombre}
+ |
+
+
+ {reporte.tipo}
+
+ |
+
+ {new Date(reporte.fecha).toLocaleDateString('es-ES', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric'
+ })}
+ |
+
+
+ {reporte.estado}
+
+ |
+
+
+ |
+
+ ))}
+
+
+
+
+
+ {/* Vista Mobile - Cards */}
+
+ {reportes.map((reporte, index) => (
+
+
+
+
+ #{reporte.id.toString().padStart(3, '0')}
+
+ {reporte.estado}
+
+
+
+ {reporte.nombre}
+
+
+
+
+
+
+
+
+ {reporte.tipo}
+
+
+
+ {new Date(reporte.fecha).toLocaleDateString('es-ES', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric'
+ })}
+
+
+
+
+ ))}
+
diff --git a/src/pages/Reports.jsx b/src/pages/Reports.jsx
index ff6a36b..2a3595f 100644
--- a/src/pages/Reports.jsx
+++ b/src/pages/Reports.jsx
@@ -1,313 +1,315 @@
-import React, { useState, useEffect } from 'react';
-export default function Reports() {
- const tabs = [
- { key: 'pedimentos', label: 'Generar Reporte de Pedimentos' },
- { key: 'datastage', label: 'Generar Reporte de Datastage' },
- { key: 'minimos', label: 'Generar Reporte de Mínimos' },
- { key: 'coves', label: 'Generar Reporte de COVES' },
- ];
+import React, { useState } from "react";
- // Columnas por tipo de reporte y tipo de registro para datastage
- const columnasPorTab = {
- pedimentos: [
- { key: 'id', label: 'ID' },
- { key: 'nombre', label: 'Nombre' },
- { key: 'pedimento', label: 'Pedimento' },
- { key: 'fecha', label: 'Fecha' },
- { key: 'estado', label: 'Estado' },
- ],
- datastage: {
- entrada: [
- { key: 'id', label: 'ID' },
- { key: 'nombre', label: 'Nombre' },
- { key: 'fecha', label: 'Fecha' },
- { key: 'usuario', label: 'Usuario' },
- { key: 'entrada', label: 'Entrada' },
- ],
- salida: [
- { key: 'id', label: 'ID' },
- { key: 'nombre', label: 'Nombre' },
- { key: 'fecha', label: 'Fecha' },
- { key: 'usuario', label: 'Usuario' },
- { key: 'salida', label: 'Salida' },
- ],
- proceso: [
- { key: 'id', label: 'ID' },
- { key: 'nombre', label: 'Nombre' },
- { key: 'fecha', label: 'Fecha' },
- { key: 'usuario', label: 'Usuario' },
- { key: 'proceso', label: 'Proceso' },
- ],
- default: [
- { key: 'id', label: 'ID' },
- { key: 'nombre', label: 'Nombre' },
- { key: 'fecha', label: 'Fecha' },
- { key: 'usuario', label: 'Usuario' },
- ],
- },
- minimos: [
- { key: 'id', label: 'ID' },
- { key: 'nombre', label: 'Nombre' },
- { key: 'minimo', label: 'Mínimo' },
- { key: 'fecha', label: 'Fecha' },
- ],
- coves: [
- { key: 'id', label: 'ID' },
- { key: 'nombre', label: 'Nombre' },
- { key: 'cove', label: 'COVE' },
- { key: 'fecha', label: 'Fecha' },
- ],
- };
+// Animación fade-in/slide-up para bloques
+const fadeInSlideUp = `@keyframes fadein-slideup {
+ 0% { opacity: 0; transform: translateY(40px); }
+ 100% { opacity: 1; transform: translateY(0); }
+}`;
+if (typeof document !== 'undefined' && !document.getElementById('fadein-slideup-reportes')) {
+ const style = document.createElement('style');
+ style.id = 'fadein-slideup-reportes';
+ style.innerHTML = fadeInSlideUp;
+ document.head.appendChild(style);
+}
- const [activeTab, setActiveTab] = useState('pedimentos');
- const [nombreReporte, setNombreReporte] = useState('');
- const [columnas, setColumnas] = useState(['id', 'nombre']);
+export default function Reportes() {
+ const [tipoReporte, setTipoReporte] = useState('');
const [fechaInicio, setFechaInicio] = useState('');
const [fechaFin, setFechaFin] = useState('');
- const [pedimento, setPedimento] = useState('');
- const [tipoRegistro, setTipoRegistro] = useState('');
- const handleColumnaChange = (col) => {
- setColumnas((prev) =>
- prev.includes(col)
- ? prev.filter((c) => c !== col)
- : [...prev, col]
- );
+ // Datos de ejemplo
+ const reportes = [
+ { id: 1, nombre: 'Reporte de usuarios activos', tipo: 'Usuarios', fecha: '2025-08-07', estado: 'Completado' },
+ { id: 2, nombre: 'Análisis de documentos procesados', tipo: 'Documentos', fecha: '2025-08-06', estado: 'Procesando' },
+ { id: 3, nombre: 'Resumen de procesos aduaneros', tipo: 'Procesos', fecha: '2025-08-05', estado: 'Completado' },
+ { id: 4, nombre: 'Estadísticas generales del sistema', tipo: 'General', fecha: '2025-08-04', estado: 'Completado' },
+ { id: 5, nombre: 'Reporte de expedientes', tipo: 'Documentos', fecha: '2025-08-03', estado: 'Error' },
+ ];
+
+ const getEstadoBadge = (estado) => {
+ const styles = {
+ 'Completado': 'bg-emerald-100 text-emerald-800 border-emerald-200',
+ 'Procesando': 'bg-yellow-100 text-yellow-800 border-yellow-200',
+ 'Error': 'bg-red-100 text-red-800 border-red-200'
+ };
+ return styles[estado] || 'bg-gray-100 text-gray-800 border-gray-200';
};
- const handleGenerarReporte = (e) => {
- e.preventDefault();
- alert(`Generando reporte: ${nombreReporte}\nTipo: ${activeTab}\nColumnas: ${columnas.join(', ')}\nPedimento: ${pedimento}\nFecha: ${fechaInicio} a ${fechaFin}`);
+ const limpiarFiltros = () => {
+ setTipoReporte('');
+ setFechaInicio('');
+ setFechaFin('');
};
- // Reset columnas al cambiar de tab o tipo de registro en datastage
- useEffect(() => {
- if (activeTab === 'datastage') {
- if (tipoRegistro && columnasPorTab.datastage[tipoRegistro]) {
- setColumnas(['id', 'nombre']);
- } else {
- setColumnas(['id', 'nombre']);
- }
- } else {
- setColumnas(['id', 'nombre']);
- }
- }, [activeTab, tipoRegistro]);
-
return (
-
+
- {/* Header decorativo */}
-
-
-
-
- Reportes
-
-
Consulta y descarga reportes relacionados con el sistema.
-
- {/* Efecto decorativo de fondo */}
-
-
-
-
- {/* Animación personalizada para el icono */}
-
-
- {/* Tabs y formulario en tarjeta */}
-
-
- {tabs.map(tab => (
-
- ))}
-
-
-
{tabs.find(t => t.key === activeTab)?.label}
-
Selecciona los campos y filtros que deseas incluir en tu reporte personalizado.
-