{reservations.data.map((reservation) => (

{reservation.reference}

{reservation.requester.name} ·{' '} {reservation.requester.department ?? reservation.requester.email}

Equipamentos

{reservation.items .map((item) => item.asset.name) .join(', ')}

Período

{formatPeriod(reservation)}

{reservation.purpose}

{reservation.status === 'pending_approval' ? ( <>

setComments((current) => ({
                                                    ...current,
                                                    [reservation.id]:
                                                        event.target.value,
                                                }))
                                            }
                                            rows={2}
                                            placeholder="Comentário opcional na aprovação; obrigatório para rejeitar ou pedir esclarecimentos…"
                                            className="w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                        />
                                        <InputError
                                            message={
                                                errors.comment ??
                                                errors.decision
                                            }
                                        />
                                        <div className="flex flex-wrap justify-end gap-2">
                                            <Button
                                                type="button"
                                                variant="outline"
                                                onClick={() =>
                                                    decide(
                                                        reservation,
                                                        'pedir-esclarecimentos',
                                                    )
                                                }
                                            >
                                                <CircleHelp /> Pedir
                                                esclarecimentos
                                            </Button>
                                            <Button
                                                type="button"
                                                variant="destructive"
                                                onClick={() =>
                                                    decide(
                                                        reservation,
                                                        'rejeitar',
                                                    )
                                                }
                                            >
                                                <X /> Rejeitar
                                            </Button>
                                            <Button
                                                type="button"
                                                onClick={() =>
                                                    decide(
                                                        reservation,
                                                        'aprovar',
                                                    )
                                                }
                                            >
                                                <Check /> Aprovar
                                            </Button>
                                        </div>
                                    </>
                                ) : (
                                    <p className="text-sm text-amber-700">
                                        A aguardar resposta do requisitante.
                                    </p>
                                )}
                            </CardContent>
                        </Card>
                    ))}
                    {reservations.data.length === 0 && (
                        <div className="rounded-xl border border-dashed py-16 text-center text-sm text-muted-foreground">
                            Não existem requisições pendentes para os filtros
                            selecionados.
                        </div>
                    )}
                </section>
            </main>
        </>
    );
}

function formatPeriod(reservation: Reservation): string {
    const format = new Intl.DateTimeFormat('pt-PT', {
        dateStyle: 'short',
        timeStyle: 'short',
    });

return `${format.format(new Date(reservation.starts_at))} — ${format.format(new Date(reservation.ends_at))}`;
}

ApprovalsIndex.layout = {
    breadcrumbs: [{ title: 'Aprovações', href: '/aprovacoes' }],
};