Beldor
86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
"use client";
|
|
export const dynamic = "force-dynamic";
|
|
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>
|
|
);
|
|
}
|