import { Head, Link, useForm } from '@inertiajs/react'; import { Ban, CalendarDays, Plus } from 'lucide-react'; import { useState } from 'react'; import InputError from '@/components/input-error'; import { PageHeading } from '@/components/page-heading'; import { ReservationStatus } from '@/components/reservation-status'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Label } from '@/components/ui/label'; import type { Paginated, Reservation } from '@/types'; export default function ReservationsIndex({ reservations, }: { reservations: Paginated; }) { const [selected, setSelected] = useState(null); const cancelForm = useForm({ reason: '' }); const format = new Intl.DateTimeFormat('pt-PT', { dateStyle: 'medium', timeStyle: 'short', }); const cancellableStatuses = [ 'draft', 'pending_approval', 'awaiting_information', 'approved', 'ready', ]; function openCancellation(reservation: Reservation) { cancelForm.reset(); cancelForm.clearErrors(); setSelected(reservation); } function submitCancellation(event: React.FormEvent) { event.preventDefault(); if (!selected) { return; } cancelForm.post(`/requisicoes/${selected.uuid}/cancelar`, { preserveScroll: true, onSuccess: () => setSelected(null), }); } return ( <>

Nova requisição } /> {reservations.data.length ? (

Referência Equipamentos Período Estado Ações

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

{reservation.reference}

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

{reservation.purpose}

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

{format.format( new Date(reservation.ends_at), )}

{cancellableStatuses.includes( reservation.status, ) && ( )}

))}

) : (

Ainda não criou requisições

)} {reservations.last_page > 1 && ( )}