feat: add full frontend — client portal and admin panel

Páginas cliente: login magic link, registro, validación de token, dashboard de autos, historial por auto y reserva de turnos con selector de servicio + slots disponibles. Páginas admin: login, dashboard de turnos del día con cambio de estado, historial de autos (buscar cliente → auto → ver/cargar registros), gestión de tipos de servicio y vista de clientes. Middleware JWT para proteger rutas /cliente/* y /admin/*. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-18 12:01:31 -03:00
parent 93ad1cb8c1
commit 4cf35f9280
24 changed files with 1687 additions and 15 deletions
@@ -0,0 +1,84 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Card from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+
+interface Registro {
+  id: string;
+  descripcion: string;
+  observaciones: string | null;
+  fechaRealizado: string;
+  admin: { nombre: string };
+  tipoServicio: { nombre: string } | null;
+}
+
+export default function HistorialPage() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const autoId = params.get("autoId");
+  const [historial, setHistorial] = useState<Registro[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!autoId) { router.push("/cliente/dashboard"); return; }
+    fetch(`/api/cliente/historial?autoId=${autoId}`)
+      .then((r) => {
+        if (r.status === 401) { router.push("/cliente"); return r; }
+        return r;
+      })
+      .then((r) => r.json())
+      .then((data) => { setHistorial(data); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, [autoId, router]);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-3">
+        <Link href="/cliente/dashboard">
+          <Button variant="ghost" className="px-2">← Volver</Button>
+        </Link>
+        <h1 className="text-2xl font-bold text-gray-800">Historial del auto</h1>
+      </div>
+
+      {loading ? (
+        <div className="text-center py-10 text-gray-400">Cargando...</div>
+      ) : historial.length === 0 ? (
+        <Card>
+          <p className="text-center text-gray-400 py-4">Este auto no tiene historial registrado todavía.</p>
+        </Card>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {historial.map((reg) => (
+            <Card key={reg.id}>
+              <div className="flex flex-col gap-2">
+                <div className="flex items-start justify-between gap-2 flex-wrap">
+                  <div>
+                    <p className="font-semibold text-gray-800">{reg.descripcion}</p>
+                    {reg.tipoServicio && (
+                      <span className="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">
+                        {reg.tipoServicio.nombre}
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-sm text-gray-400 shrink-0">
+                    {new Date(reg.fechaRealizado).toLocaleDateString("es-AR", {
+                      day: "2-digit", month: "long", year: "numeric",
+                    })}
+                  </p>
+                </div>
+                {reg.observaciones && (
+                  <p className="text-sm text-gray-500 bg-gray-50 rounded-lg px-3 py-2">
+                    {reg.observaciones}
+                  </p>
+                )}
+                <p className="text-xs text-gray-400">Realizado por: {reg.admin.nombre}</p>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}