feat: complete reservation lifecycle
This commit is contained in:
209
resources/js/pages/reservations/calendar.tsx
Normal file
209
resources/js/pages/reservations/calendar.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import { Head, Link } from '@inertiajs/react';
|
||||
import { ArrowLeft, ArrowRight, CalendarDays, Plus } from 'lucide-react';
|
||||
import { PageHeading } from '@/components/page-heading';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { Reservation } from '@/types';
|
||||
|
||||
const weekdays = ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'];
|
||||
|
||||
export default function ReservationCalendar({
|
||||
month,
|
||||
reservations,
|
||||
}: {
|
||||
month: string;
|
||||
reservations: Reservation[];
|
||||
}) {
|
||||
const [year, monthNumber] = month.split('-').map(Number);
|
||||
const monthStart = new Date(year, monthNumber - 1, 1);
|
||||
const firstWeekday = (monthStart.getDay() + 6) % 7;
|
||||
const daysInMonth = new Date(year, monthNumber, 0).getDate();
|
||||
const cellCount = Math.ceil((firstWeekday + daysInMonth) / 7) * 7;
|
||||
const gridStart = new Date(year, monthNumber - 1, 1 - firstWeekday);
|
||||
const days = Array.from({ length: cellCount }, (_, index) => {
|
||||
const date = new Date(gridStart);
|
||||
date.setDate(gridStart.getDate() + index);
|
||||
|
||||
return date;
|
||||
});
|
||||
const title = new Intl.DateTimeFormat('pt-PT', {
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
}).format(monthStart);
|
||||
const previousMonth = monthKey(new Date(year, monthNumber - 2, 1));
|
||||
const nextMonth = monthKey(new Date(year, monthNumber, 1));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="O meu calendário" />
|
||||
<main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-7 p-5 sm:p-8">
|
||||
<PageHeading
|
||||
eyebrow="Planeamento pessoal"
|
||||
title="O meu calendário"
|
||||
description="Consulte as suas requisições no mês e identifique rapidamente períodos sobrepostos."
|
||||
action={
|
||||
<Button asChild>
|
||||
<Link href="/requisicoes/nova">
|
||||
<Plus /> Nova requisição
|
||||
</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<section className="overflow-hidden rounded-xl border bg-card">
|
||||
<header className="flex items-center justify-between border-b p-4">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link
|
||||
href={`/requisicoes/calendario?month=${previousMonth}`}
|
||||
>
|
||||
<ArrowLeft /> Anterior
|
||||
</Link>
|
||||
</Button>
|
||||
<h2 className="text-lg font-semibold capitalize">
|
||||
{title}
|
||||
</h2>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link
|
||||
href={`/requisicoes/calendario?month=${nextMonth}`}
|
||||
>
|
||||
Seguinte <ArrowRight />
|
||||
</Link>
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-7 border-b bg-slate-50 text-center text-xs font-medium text-muted-foreground uppercase dark:bg-slate-900">
|
||||
{weekdays.map((day) => (
|
||||
<div key={day} className="px-1 py-3">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-7">
|
||||
{days.map((day) => {
|
||||
const dayStart = new Date(
|
||||
day.getFullYear(),
|
||||
day.getMonth(),
|
||||
day.getDate(),
|
||||
);
|
||||
const dayEnd = new Date(
|
||||
day.getFullYear(),
|
||||
day.getMonth(),
|
||||
day.getDate() + 1,
|
||||
);
|
||||
const entries = reservations.filter(
|
||||
(reservation) =>
|
||||
new Date(reservation.starts_at) < dayEnd &&
|
||||
new Date(reservation.ends_at) > dayStart,
|
||||
);
|
||||
const isCurrentMonth =
|
||||
day.getMonth() === monthNumber - 1;
|
||||
const isToday = sameDay(day, new Date());
|
||||
|
||||
return (
|
||||
<div
|
||||
key={day.toISOString()}
|
||||
className={cn(
|
||||
'min-h-28 border-r border-b p-1.5 last:border-r-0 sm:min-h-36 sm:p-2',
|
||||
!isCurrentMonth &&
|
||||
'bg-slate-50/70 text-muted-foreground dark:bg-slate-950/40',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex size-7 items-center justify-center rounded-full text-xs',
|
||||
isToday &&
|
||||
'bg-primary font-semibold text-primary-foreground',
|
||||
)}
|
||||
>
|
||||
{day.getDate()}
|
||||
</span>
|
||||
<div className="mt-1 space-y-1">
|
||||
{entries
|
||||
.slice(0, 3)
|
||||
.map((reservation) => (
|
||||
<div
|
||||
key={reservation.id}
|
||||
title={`${reservation.reference} — ${reservation.items.map((item) => item.asset.name).join(', ')}`}
|
||||
className={cn(
|
||||
'truncate rounded border-l-2 bg-slate-100 px-1.5 py-1 text-[10px] font-medium sm:text-xs dark:bg-slate-900',
|
||||
statusBorder(
|
||||
reservation.status,
|
||||
),
|
||||
)}
|
||||
>
|
||||
{reservation.reference}
|
||||
</div>
|
||||
))}
|
||||
{entries.length > 3 && (
|
||||
<p className="px-1 text-[10px] text-muted-foreground">
|
||||
+{entries.length - 3} pedido(s)
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4 text-xs text-muted-foreground">
|
||||
<Legend color="bg-amber-500" label="Pendente" />
|
||||
<Legend
|
||||
color="bg-emerald-500"
|
||||
label="Confirmada ou em curso"
|
||||
/>
|
||||
<Legend
|
||||
color="bg-slate-400"
|
||||
label="Fechada sem utilização"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{reservations.length === 0 && (
|
||||
<div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
|
||||
<CalendarDays className="size-4" /> Não existem
|
||||
requisições neste mês.
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Legend({ color, label }: { color: string; label: string }) {
|
||||
return (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className={cn('size-2 rounded-full', color)} /> {label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function monthKey(date: Date): string {
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function sameDay(left: Date, right: Date): boolean {
|
||||
return (
|
||||
left.getFullYear() === right.getFullYear() &&
|
||||
left.getMonth() === right.getMonth() &&
|
||||
left.getDate() === right.getDate()
|
||||
);
|
||||
}
|
||||
|
||||
function statusBorder(status: string): string {
|
||||
if (['cancelled', 'rejected', 'expired', 'no_show'].includes(status)) {
|
||||
return 'border-slate-400 opacity-60';
|
||||
}
|
||||
|
||||
if (['approved', 'ready', 'delivered', 'in_use'].includes(status)) {
|
||||
return 'border-emerald-500';
|
||||
}
|
||||
|
||||
return 'border-amber-500';
|
||||
}
|
||||
|
||||
ReservationCalendar.layout = {
|
||||
breadcrumbs: [
|
||||
{ title: 'Requisições', href: '/requisicoes' },
|
||||
{ title: 'Calendário', href: '/requisicoes/calendario' },
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user