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/backend/bun.lock

@@ -0,0 +1,26 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "backend",
+      "dependencies": {
+        "hono": "^4.12.9",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+    },
+  },
+  "packages": {
+    "@types/bun": ["@types/bun@1.3.11", "", { "dependencies": { "bun-types": "1.3.11" } }, "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg=="],
+
+    "@types/node": ["@types/node@25.5.0", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw=="],
+
+    "bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
+
+    "hono": ["hono@4.12.9", "", {}, "sha512-wy3T8Zm2bsEvxKZM5w21VdHDDcwVS1yUFFY6i8UobSsKfFceT7TOwhbhfKsDyx7tYQlmRM5FLpIuYvNFyjctiA=="],
+
+    "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
+  }
+}

apps/frontend/components.json

@@ -12,6 +12,8 @@
   },
   "iconLibrary": "lucide",
   "rtl": false,
+  "menuColor": "default",
+  "menuAccent": "subtle",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
@@ -19,7 +21,7 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "menuColor": "default",
+  "registries": {
-  "menuAccent": "subtle",
+    "@diceui": "https://diceui.com/r/{name}.json"
-  "registries": {}
+  }
 }

apps/frontend/package.json

@@ -37,7 +37,8 @@
     "shadcn": "^4.1.2",
     "simple-icons": "^16.15.0",
     "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.2.2",

apps/frontend/src/components/ui/dialog.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import * as React from 'react';
 

apps/frontend/src/components/ui/drawer.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@/lib/utils';
+
+function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('font-heading text-base font-medium text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

apps/frontend/src/components/ui/responsive-dialog.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
+import { useAsRef } from '@/hooks/use-as-ref';
+import { useIsomorphicLayoutEffect } from '@/hooks/use-isomorphic-layout-effect';
+import { useLazyRef } from '@/hooks/use-lazy-ref';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+
+const ROOT_NAME = 'ResponsiveDialog';
+
+interface StoreState {
+  open: boolean;
+  isMobile: boolean;
+}
+
+interface Store {
+  subscribe: (callback: () => void) => () => void;
+  getState: () => StoreState;
+  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
+  notify: () => void;
+}
+
+const StoreContext = React.createContext<Store | null>(null);
+
+function useStore<T>(selector: (state: StoreState) => T, ogStore?: Store | null): T {
+  const contextStore = React.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+
+  if (!store) {
+    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
+  }
+
+  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+
+interface ResponsiveDialogProps extends React.ComponentProps<typeof Dialog> {
+  breakpoint?: number;
+}
+
+function ResponsiveDialog({
+  breakpoint = 768,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange: onOpenChangeProp,
+  ...props
+}: ResponsiveDialogProps) {
+  const isMobile = useIsMobile(breakpoint);
+
+  const listenersRef = useLazyRef(() => new Set<() => void>());
+  const stateRef = useLazyRef<StoreState>(() => ({
+    open: openProp ?? defaultOpen,
+    isMobile,
+  }));
+
+  const onOpenChangeRef = useAsRef(onOpenChangeProp);
+
+  const store = React.useMemo<Store>(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, value) => {
+        if (Object.is(stateRef.current[key], value)) return;
+
+        if (key === 'open' && typeof value === 'boolean') {
+          stateRef.current.open = value;
+          onOpenChangeRef.current?.(value);
+        } else {
+          stateRef.current[key] = value;
+        }
+
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      },
+    };
+  }, [listenersRef, stateRef, onOpenChangeRef]);
+
+  if (stateRef.current.isMobile !== isMobile) {
+    stateRef.current.isMobile = isMobile;
+  }
+
+  const open = useStore((state) => state.open, store);
+
+  useIsomorphicLayoutEffect(() => {
+    if (openProp !== undefined) {
+      store.setState('open', openProp);
+    }
+  }, [openProp]);
+
+  const onOpenChange = React.useCallback(
+    (value: boolean) => {
+      store.setState('open', value);
+    },
+    [store]
+  );
+
+  if (isMobile) {
+    return (
+      <StoreContext.Provider value={store}>
+        <Drawer open={open} onOpenChange={onOpenChange} {...props} />
+      </StoreContext.Provider>
+    );
+  }
+
+  return (
+    <StoreContext.Provider value={store}>
+      <Dialog open={open} onOpenChange={onOpenChange} {...props} />
+    </StoreContext.Provider>
+  );
+}
+
+function ResponsiveDialogTrigger({ ...props }: React.ComponentProps<typeof DialogTrigger>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerTrigger data-variant="drawer" {...props} />;
+  }
+
+  return <DialogTrigger data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogClose({ ...props }: React.ComponentProps<typeof DialogClose>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerClose data-variant="drawer" {...props} />;
+  }
+
+  return <DialogClose data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogPortal({ ...props }: React.ComponentProps<typeof DialogPortal>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerPortal data-variant="drawer" {...props} />;
+  }
+
+  return <DialogPortal data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogOverlay({ ...props }: React.ComponentProps<typeof DialogOverlay>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerOverlay data-variant="drawer" {...props} />;
+  }
+
+  return <DialogOverlay data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogContent>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return (
+      <DrawerContent data-variant="drawer" className={cn('px-4 pb-4', className)} {...props} />
+    );
+  }
+
+  return <DialogContent data-variant="dialog" className={className} {...props} />;
+}
+
+function ResponsiveDialogHeader({ ...props }: React.ComponentProps<typeof DialogHeader>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerHeader data-variant="drawer" {...props} />;
+  }
+
+  return <DialogHeader data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogFooter({
+  showCloseButton,
+  ...props
+}: React.ComponentProps<typeof DialogFooter>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerFooter data-variant="drawer" {...props} />;
+  }
+
+  return <DialogFooter data-variant="dialog" showCloseButton={showCloseButton} {...props} />;
+}
+
+function ResponsiveDialogTitle({ ...props }: React.ComponentProps<typeof DialogTitle>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerTitle data-variant="drawer" {...props} />;
+  }
+
+  return <DialogTitle data-variant="dialog" {...props} />;
+}
+
+function ResponsiveDialogDescription({ ...props }: React.ComponentProps<typeof DialogDescription>) {
+  const isMobile = useStore((state) => state.isMobile);
+
+  if (isMobile) {
+    return <DrawerDescription data-variant="drawer" {...props} />;
+  }
+
+  return <DialogDescription data-variant="dialog" {...props} />;
+}
+
+export {
+  ResponsiveDialog,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogOverlay,
+  ResponsiveDialogPortal,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger,
+};

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">
+        <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>
   );
 }

apps/frontend/src/hooks/use-as-ref.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { useIsomorphicLayoutEffect } from '@/hooks/use-isomorphic-layout-effect';
+
+function useAsRef<T>(props: T) {
+  const ref = React.useRef<T>(props);
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current = props;
+  });
+
+  return ref;
+}
+
+export { useAsRef };

apps/frontend/src/hooks/use-isomorphic-layout-effect.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+export { useIsomorphicLayoutEffect };

apps/frontend/src/hooks/use-lazy-ref.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+function useLazyRef<T>(fn: () => T) {
+  const ref = React.useRef<T | null>(null);
+
+  if (ref.current === null) {
+    ref.current = fn();
+  }
+
+  return ref as React.RefObject<T>;
+}
+
+export { useLazyRef };

apps/frontend/src/hooks/use-mobile.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export function useIsMobile(mobileBreakpoint = 768) {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < mobileBreakpoint);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < mobileBreakpoint);
+    return () => mql.removeEventListener('change', onChange);
+  }, [mobileBreakpoint]);
+
+  return !!isMobile;
+}

bun.lock

@@ -66,6 +66,7 @@
         "simple-icons": "^16.15.0",
         "tailwind-merge": "^3.5.0",
         "tw-animate-css": "^1.4.0",
+        "vaul": "^1.1.2",
       },
       "devDependencies": {
         "@tailwindcss/vite": "^4.2.2",
@@ -1410,6 +1411,8 @@
 
     "vary": ["vary@1.1.2", "", {}, "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="],
 
+    "vaul": ["vaul@1.1.2", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA=="],
+
     "vite": ["vite@8.0.3", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.12", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ=="],
 
     "web-streams-polyfill": ["web-streams-polyfill@3.3.3", "", {}, "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="],