119 lines
4.5 KiB
TypeScript
119 lines
4.5 KiB
TypeScript
import { CalendarDays, Download, Drill, ShieldCheck, UsersRound } from 'lucide-react';
|
|
import { useBooking } from '../booking-provider';
|
|
import { formatBookingDate, toIsoDateLocal } from '../lib/booking-time';
|
|
|
|
export function BookingDaySummary() {
|
|
const { selectedDate, summary } = useBooking();
|
|
|
|
return (
|
|
<section className="rounded-lg border bg-card/85 p-5 shadow-sm xl:col-span-3">
|
|
<div className="mb-4">
|
|
<h2 className="text-base font-semibold">Resumen del día</h2>
|
|
<p className="mt-1 text-sm capitalize text-muted-foreground">
|
|
{formatBookingDate(selectedDate, { year: 'numeric' })}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-4">
|
|
<SummaryCard
|
|
label="Total de bloques"
|
|
value={summary.totalReservations}
|
|
icon={CalendarDays}
|
|
className="border-border bg-background/45"
|
|
/>
|
|
<SummaryCard
|
|
label="Libres"
|
|
value={summary.freeSlots}
|
|
detail={`${summary.freePercent}% del total`}
|
|
icon={UsersRound}
|
|
className="border-primary/30 bg-primary/10 text-primary"
|
|
/>
|
|
<SummaryCard
|
|
label="Reservados"
|
|
value={summary.reservedSlots}
|
|
detail={`${summary.reservedPercent}% del total`}
|
|
icon={ShieldCheck}
|
|
className="border-reserved/35 bg-reserved/10 text-reserved"
|
|
/>
|
|
<SummaryCard
|
|
label="Mantenimiento"
|
|
value={summary.maintenanceSlots}
|
|
detail={`${summary.maintenancePercent}% del total`}
|
|
icon={Drill}
|
|
className="border-maintenance/35 bg-maintenance/10 text-maintenance"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
interface SummaryCardProps {
|
|
label: string;
|
|
value: number;
|
|
detail?: string;
|
|
icon: typeof CalendarDays;
|
|
className: string;
|
|
}
|
|
|
|
function SummaryCard({ label, value, detail, icon: Icon, className }: SummaryCardProps) {
|
|
return (
|
|
<article className={`rounded-lg border p-4 ${className}`}>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-transparent">
|
|
<Icon className="size-5" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm text-muted-foreground">{label}</p>
|
|
<p className="text-2xl font-semibold leading-tight">{value}</p>
|
|
{detail && <p className="mt-1 truncate text-xs text-muted-foreground">{detail}</p>}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
export function BookingQuickActions() {
|
|
const { selectedDate, selectedStatus, setSelectedDate, setSelectedStatus, exportDayReport } =
|
|
useBooking();
|
|
const todayIso = toIsoDateLocal(new Date());
|
|
const isViewingTodayReservations = selectedDate === todayIso && selectedStatus === 'reserved';
|
|
const isViewingMaintenance = selectedStatus === 'maintenance';
|
|
|
|
return (
|
|
<section className="rounded-lg border bg-card/85 p-5 shadow-sm">
|
|
<h2 className="text-base font-semibold">Acciones rápidas</h2>
|
|
<div className="mt-3 grid gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedDate(todayIso);
|
|
setSelectedStatus(isViewingTodayReservations ? 'all' : 'reserved');
|
|
}}
|
|
aria-pressed={isViewingTodayReservations}
|
|
className="flex h-10 items-center gap-3 rounded-md border bg-background/45 px-3 text-left text-sm transition-colors hover:bg-muted aria-pressed:border-reserved/50 aria-pressed:bg-reserved/10"
|
|
>
|
|
<CalendarDays className="size-4 text-muted-foreground" />
|
|
{isViewingTodayReservations ? 'Ver todos los estados' : 'Ver reservas de hoy'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedStatus(isViewingMaintenance ? 'all' : 'maintenance')}
|
|
aria-pressed={isViewingMaintenance}
|
|
className="flex h-10 items-center gap-3 rounded-md border bg-background/45 px-3 text-left text-sm transition-colors hover:bg-muted aria-pressed:border-maintenance/50 aria-pressed:bg-maintenance/10"
|
|
>
|
|
<Drill className="size-4 text-maintenance" />
|
|
{isViewingMaintenance ? 'Ver todos los estados' : 'Ver mantenimiento'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={exportDayReport}
|
|
className="flex h-10 items-center gap-3 rounded-md border bg-background/45 px-3 text-left text-sm transition-colors hover:bg-muted"
|
|
>
|
|
<Download className="size-4 text-primary" />
|
|
Exportar reporte
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|