81 lines
3.9 KiB
JavaScript
81 lines
3.9 KiB
JavaScript
import React from "react";
|
|
|
|
export default function Reportes() {
|
|
return (
|
|
<div className="p-6 bg-gradient-to-br from-blue-50 to-blue-100 min-h-screen">
|
|
<div className="max-w-5xl mx-auto">
|
|
<h1 className="text-3xl font-extrabold mb-2 text-blue-900 tracking-tight">Reportes</h1>
|
|
<p className="mb-6 text-gray-600">Consulta y descarga reportes relacionados con el sistema.</p>
|
|
{/* Filtros de ejemplo */}
|
|
<div className="flex flex-wrap gap-4 mb-6 bg-white p-4 rounded-lg shadow-sm">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-500 mb-1">Tipo de reporte</label>
|
|
<select className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300">
|
|
<option>General</option>
|
|
<option>Usuarios</option>
|
|
<option>Documentos</option>
|
|
<option>Procesos</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-500 mb-1">Fecha inicio</label>
|
|
<input type="date" className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-500 mb-1">Fecha fin</label>
|
|
<input type="date" className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300" />
|
|
</div>
|
|
<div className="flex items-end">
|
|
<button className="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700 transition">Filtrar</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabla de reportes de ejemplo */}
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-bold text-blue-800">Resultados</h2>
|
|
<button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition flex items-center gap-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" /></svg>
|
|
Descargar Excel
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full text-sm text-left">
|
|
<thead>
|
|
<tr className="bg-blue-100 text-blue-900">
|
|
<th className="py-2 px-4 font-semibold">ID</th>
|
|
<th className="py-2 px-4 font-semibold">Nombre</th>
|
|
<th className="py-2 px-4 font-semibold">Tipo</th>
|
|
<th className="py-2 px-4 font-semibold">Fecha</th>
|
|
<th className="py-2 px-4 font-semibold">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="border-b hover:bg-blue-50">
|
|
<td className="py-2 px-4">1</td>
|
|
<td className="py-2 px-4">Reporte de usuarios</td>
|
|
<td className="py-2 px-4">Usuarios</td>
|
|
<td className="py-2 px-4">2025-07-22</td>
|
|
<td className="py-2 px-4">
|
|
<button className="text-blue-600 hover:underline">Ver</button>
|
|
</td>
|
|
</tr>
|
|
<tr className="border-b hover:bg-blue-50">
|
|
<td className="py-2 px-4">2</td>
|
|
<td className="py-2 px-4">Reporte de documentos</td>
|
|
<td className="py-2 px-4">Documentos</td>
|
|
<td className="py-2 px-4">2025-07-21</td>
|
|
<td className="py-2 px-4">
|
|
<button className="text-blue-600 hover:underline">Ver</button>
|
|
</td>
|
|
</tr>
|
|
{/* Más filas de ejemplo aquí */}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|