feat: complete reservation lifecycle

resources/js/pages/reservations/create.tsx

@@ -1,4 +1,4 @@
-import { Head, Link, useForm } from '@inertiajs/react';
+import { Head, Link, router, useForm } from '@inertiajs/react';
 import {
     ArrowLeft,
     CalendarClock,
@@ -19,15 +19,19 @@ import type { Asset } from '@/types';
 export default function CreateReservation({
     assets,
     selectedAssetId,
+    period,
+    periodSelected,
 }: {
     assets: Asset[];
     selectedAssetId: number;
+    period: { starts_at?: string; ends_at?: string };
+    periodSelected: boolean;
 }) {
     const form = useForm({
         purpose: '',
         usage_location: '',
-        starts_at: '',
-        ends_at: '',
+        starts_at: period.starts_at ?? '',
+        ends_at: period.ends_at ?? '',
         asset_ids: selectedAssetId ? [selectedAssetId] : ([] as number[]),
         terms_accepted: false,
     });
@@ -43,6 +47,12 @@ export default function CreateReservation({
                 : form.data.asset_ids.filter((item) => item !== id),
         );
     }
+    function refreshAvailability() {
+        router.get('/requisicoes/nova', {
+            starts_at: form.data.starts_at,
+            ends_at: form.data.ends_at,
+        });
+    }
 
     return (
         <>
@@ -117,6 +127,24 @@ export default function CreateReservation({
                                         />
                                     </Field>
                                 </div>
+                                <div className="sm:col-span-2">
+                                    <Button
+                                        type="button"
+                                        variant="secondary"
+                                        onClick={refreshAvailability}
+                                        disabled={
+                                            !form.data.starts_at ||
+                                            !form.data.ends_at
+                                        }
+                                    >
+                                        <CalendarClock /> Verificar equipamentos
+                                        livres
+                                    </Button>
+                                    <p className="mt-2 text-xs text-muted-foreground">
+                                        Confirme a disponibilidade sempre que
+                                        alterar o período.
+                                    </p>
+                                </div>
                                 <div className="sm:col-span-2">
                                     <Label htmlFor="purpose">Finalidade</Label>
                                     <textarea
@@ -140,10 +168,18 @@ export default function CreateReservation({
                             <CardHeader>
                                 <CardTitle className="flex items-center gap-2">
                                     <PackageCheck className="size-5 text-primary" />{' '}
-                                    Equipamentos
+                                    {periodSelected
+                                        ? 'Equipamentos livres no período'
+                                        : 'Equipamentos requisitáveis'}
                                 </CardTitle>
                             </CardHeader>
                             <CardContent className="space-y-3">
+                                {assets.length === 0 && (
+                                    <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+                                        Não existem equipamentos livres para o
+                                        período escolhido.
+                                    </p>
+                                )}
                                 {assets.map((asset) => {
                                     const checked =
                                         form.data.asset_ids.includes(asset.id);