feat: establish reservation portal foundation

resources/js/pages/reservations/index.tsx

@@ -0,0 +1,98 @@
+import { Head, Link } from '@inertiajs/react';
+import { CalendarDays, Plus } from 'lucide-react';
+import { PageHeading } from '@/components/page-heading';
+import { ReservationStatus } from '@/components/reservation-status';
+import { Button } from '@/components/ui/button';
+import type { Paginated, Reservation } from '@/types';
+
+export default function ReservationsIndex({
+    reservations,
+}: {
+    reservations: Paginated<Reservation>;
+}) {
+    const format = new Intl.DateTimeFormat('pt-PT', {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+    });
+
+    return (
+        <>
+            <Head title="As minhas requisições" />
+            <main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-7 p-5 sm:p-8">
+                <PageHeading
+                    eyebrow="Histórico"
+                    title="As minhas requisições"
+                    description="Acompanhe decisões, datas e equipamentos associados aos seus pedidos."
+                    action={
+                        <Button asChild>
+                            <Link href="/requisicoes/nova">
+                                <Plus /> Nova requisição
+                            </Link>
+                        </Button>
+                    }
+                />
+                {reservations.data.length ? (
+                    <div className="overflow-hidden rounded-xl border bg-card">
+                        <div className="hidden grid-cols-[150px_1fr_220px_170px] gap-4 border-b bg-slate-50 px-5 py-3 text-xs font-medium text-muted-foreground uppercase md:grid dark:bg-slate-900">
+                            <span>Referência</span>
+                            <span>Equipamentos</span>
+                            <span>Período</span>
+                            <span>Estado</span>
+                        </div>
+                        {reservations.data.map((reservation) => (
+                            <div
+                                key={reservation.id}
+                                className="grid gap-3 border-b px-5 py-4 last:border-0 md:grid-cols-[150px_1fr_220px_170px] md:items-center"
+                            >
+                                <span className="font-mono text-sm font-medium">
+                                    {reservation.reference}
+                                </span>
+                                <div>
+                                    <p className="text-sm font-medium">
+                                        {reservation.items
+                                            .map((item) => item.asset.name)
+                                            .join(', ')}
+                                    </p>
+                                    <p className="mt-1 truncate text-xs text-muted-foreground">
+                                        {reservation.purpose}
+                                    </p>
+                                </div>
+                                <div className="text-xs text-muted-foreground">
+                                    <p>
+                                        {format.format(
+                                            new Date(reservation.starts_at),
+                                        )}
+                                    </p>
+                                    <p>
+                                        {format.format(
+                                            new Date(reservation.ends_at),
+                                        )}
+                                    </p>
+                                </div>
+                                <ReservationStatus
+                                    status={reservation.status}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                ) : (
+                    <div className="rounded-xl border border-dashed py-16 text-center">
+                        <CalendarDays className="mx-auto size-9 text-slate-300" />
+                        <h2 className="mt-4 font-medium">
+                            Ainda não criou requisições
+                        </h2>
+                        <Button asChild variant="link">
+                            <Link href="/equipamentos">
+                                Consultar equipamentos
+                            </Link>
+                        </Button>
+                    </div>
+                )}
+            </main>
+        </>
+    );
+}
+
+ReservationsIndex.layout = {
+    breadcrumbs: [{ title: 'Requisições', href: '/requisicoes' }],
+};