Primera version de frontend

src/pages/Reportes.jsx

@@ -0,0 +1,80 @@
+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>
+  );
+}