210 lines
9.2 KiB
TypeScript
210 lines
9.2 KiB
TypeScript
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' },
|
|
],
|
|
};
|