81 lines
3.4 KiB
TypeScript
81 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useReservas } from "@/hooks/useReservas";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { History, Calendar, User, Search } from "lucide-react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { useState } from "react";
|
|
|
|
export default function HistoricoPage() {
|
|
const { reservas, loading } = useReservas();
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
|
|
const historico = reservas.filter(r =>
|
|
["Concluída", "Recusada", "Cancelada"].includes(r.estado) ||
|
|
(r.estado.includes("Confirmada") && new Date(r.data) < new Date())
|
|
);
|
|
|
|
const filtered = historico.filter(r =>
|
|
r.clienteEmail.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-3xl font-display font-bold text-foreground">Histórico de Reservas</h1>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Pesquisar por email do cliente..."
|
|
className="pl-10"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-4">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
</div>
|
|
) : filtered.length > 0 ? (
|
|
filtered.map((reserva) => (
|
|
<Card key={reserva.id} className="border-border/40 bg-card/50">
|
|
<CardContent className="p-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className={`h-10 w-10 rounded-full flex items-center justify-center ${
|
|
reserva.estado === "Concluída" ? "bg-green-500/10 text-green-500" : "bg-destructive/10 text-destructive"
|
|
}`}>
|
|
<History className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">{reserva.clienteEmail}</p>
|
|
<div className="flex items-center gap-3 text-xs text-muted-foreground mt-0.5">
|
|
<span className="flex items-center gap-1"><Calendar className="h-3 w-3" /> {reserva.data}</span>
|
|
<span className="flex items-center gap-1"><User className="h-3 w-3" /> {reserva.pessoas} p.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded border ${
|
|
reserva.estado === "Concluída" ? "border-green-500/20 text-green-500" : "border-destructive/20 text-destructive"
|
|
}`}>
|
|
{reserva.estado}
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-20 text-center text-muted-foreground border-2 border-dashed rounded-xl">
|
|
<History className="h-12 w-12 opacity-20 mb-4" />
|
|
<p>Nenhum registo encontrado no histórico.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|