import { Head, Link } from '@inertiajs/react'; import { ArrowRight, CalendarClock, CheckCircle2, Clock3, PackageCheck, Plus, TrendingUp, } 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: 'bg-amber-50 dark:bg-amber-950/30', text: 'text-amber-700 dark:text-amber-400', icon: 'bg-amber-100 dark:bg-amber-900/50', }, emerald: { bg: 'bg-emerald-50 dark:bg-emerald-950/30', text: 'text-emerald-700 dark:text-emerald-400', icon: 'bg-emerald-100 dark:bg-emerald-900/50', }, blue: { bg: 'bg-blue-50 dark:bg-blue-950/30', text: 'text-blue-700 dark:text-blue-400', icon: 'bg-blue-100 dark:bg-blue-900/50', }, }; return (

{value}

{label}

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