import { Head, Link } from '@inertiajs/react'; import { ArrowRight, CalendarClock, CheckCircle2, Clock3, PackageCheck, Plus, } from 'lucide-react'; import { PageHeading } from '@/components/page-heading'; import { ReservationStatus } from '@/components/reservation-status'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import type { Reservation } from '@/types'; type Props = { summary: { pending: number; approved: number; inUse: number }; nextReservation: Reservation | null; recentReservations: Reservation[]; }; const dateTime = new Intl.DateTimeFormat('pt-PT', { dateStyle: 'medium', timeStyle: 'short', }); export default function Dashboard({ summary, nextReservation, recentReservations, }: Props) { return ( <>
Nova requisição } />

Próxima

Próxima requisição
{nextReservation ? (
{nextReservation.reference}

Início

{dateTime.format( new Date( nextReservation.starts_at, ), )}

Fim

{dateTime.format( new Date( nextReservation.ends_at, ), )}

Equipamento

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

) : (

Ainda não tem requisições futuras.

)} Atividade recente {recentReservations.length > 0 ? ( recentReservations.map((reservation) => (

{reservation.reference}

{dateTime.format( new Date( reservation.starts_at, ), )}

)) ) : (

Sem atividade recente.

)}
); } function SummaryCard({ icon: Icon, label, value, tone, }: { icon: typeof Clock3; label: string; value: number; tone: 'amber' | 'emerald' | 'blue'; }) { const colors = { amber: 'bg-amber-50 text-amber-700', emerald: 'bg-emerald-50 text-emerald-700', blue: 'bg-blue-50 text-blue-700', }; return (

{value}

{label}

 ); } Dashboard.layout = { breadcrumbs: [{ title: 'Visão geral', href: '/dashboard' }], };