feat(home): move manual booking to responsive dialog

- Add Dice UI responsive-dialog component
- Move manual booking form to dialog (drawer on mobile)
- Filter past time slots when booking for today
- Rename button to 'Nueva Reserva'

apps/frontend/src/features/home/home-page.tsx

@@ -2,6 +2,16 @@ import { Button } from '@/components/ui/button';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
+import {
+  ResponsiveDialog,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger,
+} from '@/components/ui/responsive-dialog';
 import {
   Select,
   SelectContent,
@@ -120,6 +130,7 @@ export function HomePage() {
   const [selectedSportId, setSelectedSportId] = useState<string | undefined>();
   const [selectedCourtId, setSelectedCourtId] = useState<string>('');
   const [selectedStartTime, setSelectedStartTime] = useState<string>('');
+  const [isManualBookingOpen, setIsManualBookingOpen] = useState(false);
 
   useEffect(() => {
     setCurrentComplexSlug(getCurrentComplexSlug());
@@ -246,7 +257,7 @@ export function HomePage() {
     register,
     handleSubmit,
     reset,
-    formState: { errors, isSubmitting, isValid },
+    formState: { errors, isValid },
   } = useForm<ManualBookingForm>({
     resolver: zodResolver(manualBookingSchema),
     mode: 'onChange',
@@ -278,6 +289,7 @@ export function HomePage() {
       reset();
       setSelectedCourtId('');
       setSelectedStartTime('');
+      setIsManualBookingOpen(false);
 
       await queryClient.invalidateQueries({ queryKey: ['admin-bookings', selectedComplex?.id] });
       await queryClient.invalidateQueries({
@@ -319,10 +331,203 @@ export function HomePage() {
   return (
     <main className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-6">
       <section className="rounded-xl border bg-card p-5 shadow-sm">
-        <h1 className="text-2xl font-semibold">Panel de reservas</h1>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Gestiona turnos del día y futuros para {selectedComplex.complexName}.
-        </p>
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-semibold">Panel de reservas</h1>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Gestiona turnos del día y futuros para {selectedComplex.complexName}.
+            </p>
+          </div>
+          <ResponsiveDialog
+            open={isManualBookingOpen}
+            onOpenChange={(open) => {
+              setIsManualBookingOpen(open);
+              if (!open) {
+                reset();
+                setManualDate(todayIso);
+                setSelectedSportId(undefined);
+                setSelectedCourtId('');
+                setSelectedStartTime('');
+              }
+            }}
+          >
+            <ResponsiveDialogTrigger asChild>
+              <Button>Nueva Reserva</Button>
+            </ResponsiveDialogTrigger>
+            <ResponsiveDialogContent
+              className="data-[variant=dialog]:max-w-lg"
+              onOpenAutoFocus={(e) => e.preventDefault()}
+            >
+              <ResponsiveDialogHeader>
+                <ResponsiveDialogTitle>Reserva manual</ResponsiveDialogTitle>
+                <ResponsiveDialogDescription>
+                  Crea un turno para atención telefónica o mostrador.
+                </ResponsiveDialogDescription>
+              </ResponsiveDialogHeader>
+
+              <form
+                id="manual-booking-form"
+                className="grid gap-4"
+                onSubmit={handleSubmit(onSubmitManualBooking)}
+              >
+                <div className="grid gap-3 md:grid-cols-2">
+                  <Field>
+                    <FieldLabel htmlFor="manualDate">Fecha</FieldLabel>
+                    <DatePicker
+                      value={fromIsoDateLocal(manualDate)}
+                      onChange={(date) => {
+                        const isoDate = date ? toIsoDateLocal(date) : todayIso;
+                        setManualDate(isoDate);
+                        setSelectedCourtId('');
+                        setSelectedStartTime('');
+                      }}
+                      minDate={new Date()}
+                      placeholder="Selecciona una fecha"
+                    />
+                  </Field>
+
+                  {manualAvailabilityQuery.data?.sportSelectionRequired && (
+                    <Field>
+                      <FieldLabel>Deporte</FieldLabel>
+                      <Select
+                        value={selectedSportId ?? ''}
+                        onValueChange={(value) => {
+                          setSelectedSportId(value);
+                          setSelectedCourtId('');
+                          setSelectedStartTime('');
+                        }}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Selecciona un deporte" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {manualAvailabilityQuery.data?.sports.map((sport) => (
+                            <SelectItem key={sport.id} value={sport.id}>
+                              {sport.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                  )}
+
+                  <Field>
+                    <FieldLabel>Cancha</FieldLabel>
+                    <Select
+                      value={selectedCourtId}
+                      onValueChange={(value) => {
+                        setSelectedCourtId(value);
+                        setSelectedStartTime('');
+                      }}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Selecciona una cancha" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(manualAvailabilityQuery.data?.courts ?? []).map((court) => (
+                          <SelectItem key={court.courtId} value={court.courtId}>
+                            {court.courtName} · {court.sport.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </Field>
+
+                  <Field>
+                    <FieldLabel>Horario</FieldLabel>
+                    <Select value={selectedStartTime} onValueChange={setSelectedStartTime}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Selecciona un horario" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(selectedCourt?.availableSlots ?? []).map((slot) => {
+                          const isToday = manualDate === todayIso;
+                          const currentTime = new Date();
+                          const currentHours = currentTime.getHours().toString().padStart(2, '0');
+                          const currentMinutes = currentTime
+                            .getMinutes()
+                            .toString()
+                            .padStart(2, '0');
+                          const currentTimeStr = `${currentHours}:${currentMinutes}`;
+                          const isPastSlot = isToday && slot.startTime <= currentTimeStr;
+                          if (isPastSlot) return null;
+                          return (
+                            <SelectItem key={slot.startTime} value={slot.startTime}>
+                              {slot.startTime}
+                            </SelectItem>
+                          );
+                        })}
+                      </SelectContent>
+                    </Select>
+                  </Field>
+                </div>
+
+                {manualAvailabilityQuery.isLoading && (
+                  <p className="text-sm text-muted-foreground">Cargando horarios disponibles...</p>
+                )}
+
+                {manualAvailabilityQuery.isError && (
+                  <p className="text-sm text-destructive">
+                    {extractMessage(
+                      manualAvailabilityQuery.error,
+                      'No pudimos cargar disponibilidad para la reserva manual.'
+                    )}
+                  </p>
+                )}
+
+                <Field data-invalid={Boolean(errors.customerName)}>
+                  <FieldLabel htmlFor="customerName">Nombre</FieldLabel>
+                  <Input
+                    id="customerName"
+                    placeholder="Ej: Juan Perez"
+                    aria-invalid={Boolean(errors.customerName)}
+                    {...register('customerName')}
+                  />
+                  <FieldError errors={[errors.customerName]} />
+                </Field>
+
+                <Field data-invalid={Boolean(errors.customerPhone)}>
+                  <FieldLabel htmlFor="customerPhone">Teléfono</FieldLabel>
+                  <Input
+                    id="customerPhone"
+                    type="tel"
+                    placeholder="Ej: 3875551234"
+                    aria-invalid={Boolean(errors.customerPhone)}
+                    {...register('customerPhone')}
+                  />
+                  <FieldError errors={[errors.customerPhone]} />
+                </Field>
+
+                {createManualBookingMutation.isError && (
+                  <p className="text-sm text-destructive">
+                    {extractMessage(
+                      createManualBookingMutation.error,
+                      'No pudimos crear la reserva manual.'
+                    )}
+                  </p>
+                )}
+              </form>
+
+              <ResponsiveDialogFooter>
+                <ResponsiveDialogClose asChild>
+                  <Button variant="outline">Cancelar</Button>
+                </ResponsiveDialogClose>
+                <Button
+                  type="submit"
+                  form="manual-booking-form"
+                  disabled={
+                    !isValid ||
+                    createManualBookingMutation.isPending ||
+                    !selectedCourtId ||
+                    !selectedStartTime
+                  }
+                >
+                  {createManualBookingMutation.isPending ? 'Guardando...' : 'Crear reserva'}
+                </Button>
+              </ResponsiveDialogFooter>
+            </ResponsiveDialogContent>
+          </ResponsiveDialog>
+        </div>
       </section>
 
       <section className="rounded-xl border bg-card p-5 shadow-sm">
@@ -443,153 +648,6 @@ export function HomePage() {
           </p>
         )}
       </section>
-
-      <section className="rounded-xl border bg-card p-5 shadow-sm">
-        <h2 className="text-lg font-semibold">Reserva manual</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Crea un turno para atención telefónica o mostrador.
-        </p>
-
-        <div className="mt-4 grid gap-3 md:grid-cols-3">
-          <Field>
-            <FieldLabel htmlFor="manualDate">Fecha</FieldLabel>
-            <DatePicker
-              value={fromIsoDateLocal(manualDate)}
-              onChange={(date) => {
-                const isoDate = date ? toIsoDateLocal(date) : todayIso;
-                setManualDate(isoDate);
-                setSelectedCourtId('');
-                setSelectedStartTime('');
-              }}
-              minDate={new Date()}
-              placeholder="Selecciona una fecha"
-            />
-          </Field>
-
-          {manualAvailabilityQuery.data?.sportSelectionRequired && (
-            <Field>
-              <FieldLabel>Deporte</FieldLabel>
-              <Select
-                value={selectedSportId ?? ''}
-                onValueChange={(value) => {
-                  setSelectedSportId(value);
-                  setSelectedCourtId('');
-                  setSelectedStartTime('');
-                }}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Selecciona un deporte" />
-                </SelectTrigger>
-                <SelectContent>
-                  {manualAvailabilityQuery.data?.sports.map((sport) => (
-                    <SelectItem key={sport.id} value={sport.id}>
-                      {sport.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </Field>
-          )}
-
-          <Field>
-            <FieldLabel>Cancha</FieldLabel>
-            <Select
-              value={selectedCourtId}
-              onValueChange={(value) => {
-                setSelectedCourtId(value);
-                setSelectedStartTime('');
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="Selecciona una cancha" />
-              </SelectTrigger>
-              <SelectContent>
-                {(manualAvailabilityQuery.data?.courts ?? []).map((court) => (
-                  <SelectItem key={court.courtId} value={court.courtId}>
-                    {court.courtName} · {court.sport.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </Field>
-        </div>
-
-        <div className="mt-3">
-          <Field>
-            <FieldLabel>Horario</FieldLabel>
-            <Select value={selectedStartTime} onValueChange={setSelectedStartTime}>
-              <SelectTrigger>
-                <SelectValue placeholder="Selecciona un horario" />
-              </SelectTrigger>
-              <SelectContent>
-                {(selectedCourt?.availableSlots ?? []).map((slot) => (
-                  <SelectItem key={slot.startTime} value={slot.startTime}>
-                    {slot.startTime} - {slot.endTime}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </Field>
-        </div>
-
-        {manualAvailabilityQuery.isLoading && (
-          <p className="mt-3 text-sm text-muted-foreground">Cargando horarios disponibles...</p>
-        )}
-
-        {manualAvailabilityQuery.isError && (
-          <p className="mt-3 text-sm text-destructive">
-            {extractMessage(
-              manualAvailabilityQuery.error,
-              'No pudimos cargar disponibilidad para la reserva manual.'
-            )}
-          </p>
-        )}
-
-        <form
-          className="mt-4 grid gap-3 md:grid-cols-2"
-          onSubmit={handleSubmit(onSubmitManualBooking)}
-        >
-          <Field data-invalid={Boolean(errors.customerName)}>
-            <FieldLabel htmlFor="customerName">Nombre</FieldLabel>
-            <Input
-              id="customerName"
-              placeholder="Ej: Juan Perez"
-              aria-invalid={Boolean(errors.customerName)}
-              {...register('customerName')}
-            />
-            <FieldError errors={[errors.customerName]} />
-          </Field>
-
-          <Field data-invalid={Boolean(errors.customerPhone)}>
-            <FieldLabel htmlFor="customerPhone">Teléfono</FieldLabel>
-            <Input
-              id="customerPhone"
-              type="tel"
-              placeholder="Ej: 3875551234"
-              aria-invalid={Boolean(errors.customerPhone)}
-              {...register('customerPhone')}
-            />
-            <FieldError errors={[errors.customerPhone]} />
-          </Field>
-
-          {createManualBookingMutation.isError && (
-            <p className="text-sm text-destructive md:col-span-2">
-              {extractMessage(
-                createManualBookingMutation.error,
-                'No pudimos crear la reserva manual.'
-              )}
-            </p>
-          )}
-
-          <Button
-            type="submit"
-            className="md:col-span-2"
-            disabled={!isValid || isSubmitting || !selectedCourtId || !selectedStartTime}
-          >
-            {createManualBookingMutation.isPending ? 'Guardando...' : 'Crear reserva manual'}
-          </Button>
-        </form>
-      </section>
     </main>
   );
 }