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