feat: complete reservation lifecycle

resources/js/pages/assets/index.tsx

@@ -1,6 +1,7 @@
 import { Head, Link, router } from '@inertiajs/react';
 import {
     Boxes,
+    CalendarClock,
     MapPin,
     PackageCheck,
     Search,
@@ -24,7 +25,14 @@ import type { Asset, Paginated } from '@/types';
 
 type Props = {
     assets: Paginated<Asset>;
-    filters: { search?: string; category?: string; location?: string };
+    filters: {
+        search?: string;
+        category?: string;
+        location?: string;
+        starts_at?: string;
+        ends_at?: string;
+    };
+    periodSelected: boolean;
     categories: string[];
     locations: string[];
     lastSyncedAt: string | null;
@@ -36,10 +44,13 @@ export default function AssetsIndex({
     categories,
     locations,
     lastSyncedAt,
+    periodSelected,
 }: Props) {
     const [search, setSearch] = useState(filters.search ?? '');
     const [category, setCategory] = useState(filters.category ?? 'all');
     const [location, setLocation] = useState(filters.location ?? 'all');
+    const [startsAt, setStartsAt] = useState(filters.starts_at ?? '');
+    const [endsAt, setEndsAt] = useState(filters.ends_at ?? '');
 
     function submit(event: FormEvent) {
         event.preventDefault();
@@ -49,6 +60,8 @@ export default function AssetsIndex({
                 search: search || undefined,
                 category: category === 'all' ? undefined : category,
                 location: location === 'all' ? undefined : location,
+                starts_at: startsAt || undefined,
+                ends_at: endsAt || undefined,
             },
             { preserveState: true },
         );
@@ -66,9 +79,9 @@ export default function AssetsIndex({
 
                 <form
                     onSubmit={submit}
-                    className="grid gap-3 rounded-xl border bg-card p-4 md:grid-cols-[1fr_220px_220px_auto]"
+                    className="grid gap-3 rounded-xl border bg-card p-4 lg:grid-cols-6"
                 >
-                    <div className="relative">
+                    <div className="relative lg:col-span-2">
                         <Search className="absolute top-2.5 left-3 size-4 text-muted-foreground" />
                         <Input
                             value={search}
@@ -92,6 +105,26 @@ export default function AssetsIndex({
                             ))}
                         </SelectContent>
                     </Select>
+                    <div className="relative">
+                        <CalendarClock className="absolute top-2.5 left-3 size-4 text-muted-foreground" />
+                        <Input
+                            type="datetime-local"
+                            aria-label="Início do período"
+                            value={startsAt}
+                            onChange={(event) =>
+                                setStartsAt(event.target.value)
+                            }
+                            className="pl-9"
+                            required={Boolean(endsAt)}
+                        />
+                    </div>
+                    <Input
+                        type="datetime-local"
+                        aria-label="Fim do período"
+                        value={endsAt}
+                        onChange={(event) => setEndsAt(event.target.value)}
+                        required={Boolean(startsAt)}
+                    />
                     <Select value={location} onValueChange={setLocation}>
                         <SelectTrigger>
                             <SelectValue placeholder="Localização" />
@@ -131,7 +164,13 @@ export default function AssetsIndex({
                 {assets.data.length > 0 ? (
                     <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                         {assets.data.map((asset) => (
-                            <AssetCard key={asset.id} asset={asset} />
+                            <AssetCard
+                                key={asset.id}
+                                asset={asset}
+                                periodSelected={periodSelected}
+                                startsAt={filters.starts_at}
+                                endsAt={filters.ends_at}
+                            />
                         ))}
                     </section>
                 ) : (
@@ -180,7 +219,24 @@ export default function AssetsIndex({
     );
 }
 
-function AssetCard({ asset }: { asset: Asset }) {
+function AssetCard({
+    asset,
+    periodSelected,
+    startsAt,
+    endsAt,
+}: {
+    asset: Asset;
+    periodSelected: boolean;
+    startsAt?: string;
+    endsAt?: string;
+}) {
+    const requestParams = new URLSearchParams({ asset: String(asset.id) });
+
+    if (startsAt && endsAt) {
+        requestParams.set('starts_at', startsAt);
+        requestParams.set('ends_at', endsAt);
+    }
+
     return (
         <Card className="group gap-4 overflow-hidden border-slate-200 py-0 shadow-none transition hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md dark:border-slate-800">
             <div className="flex h-36 items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-950">
@@ -203,7 +259,7 @@ function AssetCard({ asset }: { asset: Asset }) {
                         </p>
                     </div>
                     <Badge variant="outline" className="text-emerald-700">
-                        Disponível
+                        {periodSelected ? 'Livre no período' : 'Requisitável'}
                     </Badge>
                 </div>
                 <div className="flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground">
@@ -217,7 +273,9 @@ function AssetCard({ asset }: { asset: Asset }) {
                     )}
                 </div>
                 <Button asChild className="w-full">
-                    <Link href={`/requisicoes/nova?asset=${asset.id}`}>
+                    <Link
+                        href={`/requisicoes/nova?${requestParams.toString()}`}
+                    >
                         Requisitar equipamento
                     </Link>
                 </Button>