Mobile booking view

apps/frontend/src/components/layout.tsx

@@ -1,3 +1,5 @@
+import { useIsMobile } from '@/hooks/use-mobile';
+import { useLocation } from '@tanstack/react-router';
 import type { ReactNode } from 'react';
 import { Header } from './header';
 
@@ -6,11 +8,21 @@ interface LayoutProps {
 }
 
 export function Layout({ children }: LayoutProps) {
+  const isMobile = useIsMobile();
+  const location = useLocation();
+  const isMobileHome = isMobile && location.pathname === '/';
+
   return (
     <div className="relative min-h-dvh overflow-x-hidden bg-background text-foreground">
       <Background />
-      <Header />
-      <main className="relative z-10 mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+      {!isMobileHome && <Header />}
+      <main
+        className={
+          isMobileHome
+            ? 'relative z-10 mx-auto w-full max-w-7xl'
+            : 'relative z-10 mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8'
+        }
+      >
         {children}
       </main>
     </div>

apps/frontend/src/features/booking/booking.tsx

@@ -1,8 +1,10 @@
+import { useIsMobile } from '@/hooks/use-mobile';
 import type { ComplexWithRole } from '@repo/api-contract';
 import { BookingProvider } from './booking-provider';
 import { BookingCreateDialog } from './components/booking-create-dialog';
 import { BookingDaySummary, BookingQuickActions } from './components/booking-day-summary';
 import { BookingHeader } from './components/booking-header';
+import { BookingMobile } from './components/booking-mobile';
 import { BookingTimeline } from './components/booking-timeline';
 import { BookingToolbar } from './components/booking-toolbar';
 import { BookingToolsDialog } from './components/booking-tools-dialog';
@@ -12,8 +14,13 @@ interface BookingProps {
 }
 
 export function Booking({ complex }: BookingProps) {
+  const isMobile = useIsMobile();
+
   return (
     <BookingProvider complex={complex}>
+      {isMobile ? (
+        <BookingMobile />
+      ) : (
         <div className="flex flex-col gap-5">
           <BookingHeader />
           <BookingToolbar />
@@ -23,6 +30,7 @@ export function Booking({ complex }: BookingProps) {
             <BookingQuickActions />
           </div>
         </div>
+      )}
       <BookingCreateDialog />
       <BookingToolsDialog />
     </BookingProvider>

apps/frontend/src/features/booking/components/booking-create-dialog.tsx

@@ -68,6 +68,7 @@ export function BookingCreateDialog() {
     register,
     handleSubmit,
     reset,
+    setFocus,
     formState: { errors, isValid },
   } = useForm<BookingForm>({
     resolver: zodResolver(bookingFormSchema),
@@ -86,7 +87,13 @@ export function BookingCreateDialog() {
     setCourtId(selectedSlot?.courtId ?? '');
     setStartTime(selectedSlot?.startTime ?? '');
     reset();
-  }, [isCreateBookingOpen, reset, selectedDate, selectedSlot]);
+
+    if (selectedSlot?.courtId && selectedSlot?.startTime) {
+      requestAnimationFrame(() => {
+        setFocus('customerName');
+      });
+    }
+  }, [isCreateBookingOpen, reset, selectedDate, selectedSlot, setFocus]);
 
   const sports = [...new Map(courts.map((court) => [court.sport.id, court.sport])).values()];
   const filteredCourts = useMemo(() => {

apps/frontend/src/features/booking/components/booking-mobile.tsx

@@ -0,0 +1,776 @@
+import PlayzerIcon from '@/assets/playzer-favicon-512-transparent.png';
+import { Button } from '@/components/ui/button';
+import { DatePicker } from '@/components/ui/date-picker';
+import { Input } from '@/components/ui/input';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { UserAvatar } from '@/components/user-avatar';
+import { apiClient } from '@/lib/api-client';
+import { useAuth } from '@/lib/auth';
+import { useCurrentComplexStore } from '@/lib/stores/current-complex-store';
+import { useTheme } from '@/lib/theme';
+import { cn } from '@/lib/utils';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
+import {
+  CalendarDays,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  CircleDot,
+  Dumbbell,
+  Grid2X2,
+  Laptop,
+  ListChecks,
+  LogOut,
+  Moon,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Settings,
+  Sun,
+  User,
+  Users,
+  Wrench,
+} from 'lucide-react';
+import type React from 'react';
+import { useMemo, useState } from 'react';
+import { useBooking } from '../booking-provider';
+import type { BookingCourtSchedule, BookingTimelineSegment } from '../booking.types';
+import { fromIsoDateLocal, toIsoDateLocal } from '../lib/booking-time';
+
+export function BookingMobile() {
+  const { schedules, isLoading, isError, errorMessage } = useBooking();
+  const [selectedCourtId, setSelectedCourtId] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+
+  const selectedSchedule = useMemo(() => {
+    if (!selectedCourtId) return null;
+    return schedules.find((schedule) => schedule.court.id === selectedCourtId) ?? null;
+  }, [schedules, selectedCourtId]);
+  const filteredSchedules = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return schedules;
+
+    return schedules.filter((schedule) => {
+      return (
+        schedule.court.name.toLowerCase().includes(query) ||
+        schedule.court.sport.name.toLowerCase().includes(query)
+      );
+    });
+  }, [schedules, search]);
+
+  if (selectedSchedule) {
+    return <MobileCourtDay schedule={selectedSchedule} onBack={() => setSelectedCourtId(null)} />;
+  }
+
+  return (
+    <div className="min-h-dvh pb-24">
+      <MobileTopBar />
+      <div className="space-y-6 px-4 pt-5">
+        <MobilePanelHeader />
+        <MobileFilters />
+        <MobileSummary />
+
+        <section className="space-y-4">
+          <h2 className="text-xl font-semibold tracking-normal">Canchas</h2>
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              className="h-12 rounded-lg border-border/70 bg-card/75 pl-11 text-sm shadow-sm"
+              placeholder="Buscar cancha..."
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+            />
+          </div>
+
+          {isLoading && (
+            <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-muted-foreground">
+              Cargando reservas...
+            </div>
+          )}
+
+          {isError && !isLoading && (
+            <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-destructive">
+              {errorMessage}
+            </div>
+          )}
+
+          {!isLoading && !isError && filteredSchedules.length === 0 && (
+            <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-muted-foreground">
+              No hay canchas para los filtros seleccionados.
+            </div>
+          )}
+
+          {!isLoading &&
+            !isError &&
+            filteredSchedules.map((schedule) => (
+              <MobileCourtCard
+                key={schedule.court.id}
+                schedule={schedule}
+                onOpen={() => setSelectedCourtId(schedule.court.id)}
+              />
+            ))}
+        </section>
+      </div>
+      <MobileBottomNav active="panel" />
+    </div>
+  );
+}
+
+function MobileTopBar() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { user, isAuthenticated, displayName, avatarUrl, signOut } = useAuth();
+  const { currentComplexSlug, setCurrentComplex } = useCurrentComplexStore();
+  const { theme, setTheme } = useTheme();
+  const { openCreateBooking } = useBooking();
+  const [open, setOpen] = useState(false);
+
+  const myComplexesQuery = useQuery({
+    queryKey: ['my-complexes'],
+    enabled: isAuthenticated,
+    queryFn: () => apiClient.complexes.listMine(),
+  });
+
+  const complexSlug = currentComplexSlug || myComplexesQuery.data?.[0]?.complexSlug;
+  const currentComplexName = useMemo(() => {
+    const complexes = myComplexesQuery.data ?? [];
+    if (complexes.length === 0) return 'Mi complejo';
+
+    const selected = complexes.find((complex) => complex.complexSlug === complexSlug);
+    return selected?.complexName ?? complexes[0]?.complexName ?? 'Mi complejo';
+  }, [complexSlug, myComplexesQuery.data]);
+
+  const handleSelectComplex = async (complexId: string, nextSlug: string) => {
+    await apiClient.complexes.select({ complexId });
+    setCurrentComplex(nextSlug);
+    await queryClient.invalidateQueries({ queryKey: ['current-complex'] });
+    await queryClient.invalidateQueries({ queryKey: ['admin-bookings'] });
+  };
+
+  const handleSignOut = async () => {
+    setOpen(false);
+    await signOut();
+    await navigate({ to: '/login' });
+  };
+
+  return (
+    <header className="sticky top-0 z-30 border-b border-border/70 bg-background/85 px-4 py-4 backdrop-blur-xl">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2.5">
+          <img src={PlayzerIcon} alt="Playzer" className="size-9" />
+          <span className="text-xl font-bold text-primary">Playzer</span>
+        </div>
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild>
+            <button
+              type="button"
+              className="rounded-full ring-2 ring-transparent transition hover:ring-primary/30 focus:outline-none focus-visible:ring-primary/60"
+              aria-label="Abrir menú de usuario"
+            >
+              <UserAvatar
+                src={avatarUrl}
+                alt={displayName}
+                fallbackText={displayName}
+                className="size-10 border border-primary/30"
+              />
+            </button>
+          </SheetTrigger>
+          <SheetContent
+            side="right"
+            className="w-[88vw] border-border/70 bg-background/95 p-5 backdrop-blur-xl sm:max-w-sm"
+          >
+            <div className="mt-6 flex flex-col gap-6">
+              <div className="rounded-lg border border-border/70 bg-card/70 p-4 shadow-xl shadow-black/10">
+                <div className="flex items-center gap-3">
+                  <UserAvatar
+                    src={avatarUrl}
+                    alt={displayName}
+                    fallbackText={displayName}
+                    className="size-11"
+                  />
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium">{displayName}</p>
+                    <p className="truncate text-xs text-muted-foreground">{user?.email}</p>
+                    <p className="truncate text-xs text-muted-foreground">{currentComplexName}</p>
+                  </div>
+                </div>
+              </div>
+
+              <nav className="flex flex-col gap-1">
+                <Button
+                  variant="ghost"
+                  className="justify-start rounded-lg"
+                  onClick={() => {
+                    setOpen(false);
+                    void navigate({ to: '/' });
+                  }}
+                >
+                  Inicio
+                </Button>
+                <Button
+                  variant="ghost"
+                  className="justify-start rounded-lg"
+                  onClick={() => {
+                    setOpen(false);
+                    void navigate({ to: '/about' });
+                  }}
+                >
+                  About
+                </Button>
+              </nav>
+
+              <Button
+                className="rounded-lg shadow-lg shadow-primary/20"
+                onClick={() => {
+                  setOpen(false);
+                  openCreateBooking();
+                }}
+              >
+                <CalendarDays className="mr-2 size-4" />
+                Reservar ahora
+              </Button>
+
+              <div className="border-t border-border/70 pt-4">
+                <div className="mb-2 px-2">
+                  <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                    Cuenta
+                  </p>
+                </div>
+
+                <nav className="flex flex-col gap-1">
+                  <div className="py-1">
+                    <p className="px-3 py-1 text-xs text-muted-foreground">Apariencia</p>
+                    {[
+                      { value: 'light', label: 'Light', icon: Sun },
+                      { value: 'dark', label: 'Dark', icon: Moon },
+                      { value: 'system', label: 'System', icon: Laptop },
+                    ].map((item) => {
+                      const Icon = item.icon;
+
+                      return (
+                        <Button
+                          key={item.value}
+                          variant="ghost"
+                          className="w-full justify-start rounded-lg"
+                          onClick={() => setTheme(item.value as 'light' | 'dark' | 'system')}
+                        >
+                          <span className="mr-2 flex size-4 items-center justify-center">
+                            {theme === item.value ? (
+                              <Check className="size-4" />
+                            ) : (
+                              <Icon className="size-4" />
+                            )}
+                          </span>
+                          {item.label}
+                        </Button>
+                      );
+                    })}
+                  </div>
+
+                  {myComplexesQuery.data && myComplexesQuery.data.length > 1 && (
+                    <div className="py-1">
+                      <p className="px-3 py-1 text-xs text-muted-foreground">Cambiar complejo</p>
+                      {myComplexesQuery.data.map((complex) => (
+                        <Button
+                          key={complex.id}
+                          variant="ghost"
+                          className="w-full justify-start rounded-lg"
+                          onClick={() => {
+                            setOpen(false);
+                            void handleSelectComplex(complex.id, complex.complexSlug);
+                          }}
+                        >
+                          <span className="mr-2 flex size-4 items-center justify-center">
+                            {complex.complexSlug === complexSlug && <Check className="size-4" />}
+                          </span>
+                          {complex.complexName}
+                        </Button>
+                      ))}
+                    </div>
+                  )}
+
+                  <Button
+                    variant="ghost"
+                    className="justify-start rounded-lg"
+                    onClick={() => {
+                      setOpen(false);
+                      void navigate({ to: '/profile' });
+                    }}
+                  >
+                    <User className="mr-2 size-4" />
+                    Mi Perfil
+                  </Button>
+
+                  {currentComplexSlug && (
+                    <Button
+                      variant="ghost"
+                      className="justify-start rounded-lg"
+                      onClick={() => {
+                        setOpen(false);
+                        void navigate({
+                          to: '/complex/$slug/edit',
+                          params: { slug: currentComplexSlug },
+                        });
+                      }}
+                    >
+                      <Settings className="mr-2 size-4" />
+                      Configuración
+                    </Button>
+                  )}
+
+                  <Button
+                    variant="ghost"
+                    className="justify-start rounded-lg text-destructive hover:bg-destructive/10 hover:text-destructive"
+                    onClick={() => {
+                      void handleSignOut();
+                    }}
+                  >
+                    <LogOut className="mr-2 size-4" />
+                    Cerrar sesión
+                  </Button>
+                </nav>
+              </div>
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </header>
+  );
+}
+
+function MobilePanelHeader() {
+  const { complex, openCreateBooking } = useBooking();
+
+  return (
+    <section className="flex items-start justify-between gap-4">
+      <div className="min-w-0">
+        <h1 className="text-2xl font-semibold tracking-normal">Panel de Reservas</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Gestiona las canchas de {complex.complexName}
+        </p>
+      </div>
+      <Button
+        type="button"
+        className="h-11 shrink-0 rounded-lg px-3 shadow-lg shadow-primary/20"
+        onClick={() => openCreateBooking()}
+      >
+        <CalendarDays className="size-4" />
+        Nueva Reserva
+      </Button>
+    </section>
+  );
+}
+
+function MobileFilters() {
+  const { selectedDate, setSelectedDate } = useBooking();
+
+  return (
+    <div>
+      <DatePicker
+        value={fromIsoDateLocal(selectedDate)}
+        onChange={(date) =>
+          setSelectedDate(date ? toIsoDateLocal(date) : toIsoDateLocal(new Date()))
+        }
+        className="h-12 w-full justify-center rounded-lg border-border/70 bg-card/75 px-4 text-sm font-medium"
+        placeholder="Fecha"
+      />
+    </div>
+  );
+}
+
+function MobileSummary() {
+  const { summary } = useBooking();
+
+  return (
+    <section className="rounded-lg border border-border/70 bg-card/70 p-4 shadow-sm">
+      <h2 className="text-lg font-medium">Resumen del día</h2>
+      <div className="mt-3 grid grid-cols-3 gap-2">
+        <SummaryPill
+          value={summary.freeSlots}
+          label="Libres"
+          className="bg-primary/15 text-primary"
+        />
+        <SummaryPill
+          value={summary.reservedSlots}
+          label="Reservados"
+          className="bg-reserved/15 text-reserved"
+        />
+        <SummaryPill
+          value={summary.maintenanceSlots}
+          label="Mantenim."
+          className="bg-maintenance/15 text-maintenance"
+        />
+      </div>
+    </section>
+  );
+}
+
+function SummaryPill({
+  value,
+  label,
+  className,
+}: {
+  value: number;
+  label: string;
+  className: string;
+}) {
+  return (
+    <div className={cn('rounded-lg px-2 py-2.5', className)}>
+      <p className="text-2xl font-semibold leading-none">{value}</p>
+      <p className="mt-2 truncate text-xs">{label}</p>
+    </div>
+  );
+}
+
+function MobileCourtCard({
+  schedule,
+  onOpen,
+}: {
+  schedule: BookingCourtSchedule;
+  onOpen: () => void;
+}) {
+  const nextSegments = schedule.segments.slice(0, 5);
+
+  return (
+    <article className="rounded-lg border border-border/70 bg-card/75 p-4 shadow-sm">
+      <div className="flex items-start gap-3">
+        <SportIcon sportName={schedule.court.sport.name} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <h3 className="text-lg font-semibold">{schedule.court.name}</h3>
+              <p className="text-sm text-muted-foreground">{schedule.court.sport.name}</p>
+            </div>
+            <MetricDots schedule={schedule} />
+          </div>
+        </div>
+      </div>
+
+      <p className="mt-5 text-sm text-muted-foreground">Próximos horarios</p>
+      <div className="mt-2 grid grid-cols-5 gap-2">
+        {nextSegments.map((segment) => (
+          <MiniSlot key={segment.id} schedule={schedule} segment={segment} />
+        ))}
+      </div>
+
+      <Button
+        type="button"
+        variant="outline"
+        className="mt-5 h-12 w-full justify-between rounded-lg border-border/70 bg-secondary/55 px-4 text-base"
+        onClick={onOpen}
+      >
+        <span className="flex-1 text-center">Ver día completo</span>
+        <ChevronRight className="size-5 text-muted-foreground" />
+      </Button>
+    </article>
+  );
+}
+
+function MobileCourtDay({
+  schedule,
+  onBack,
+}: { schedule: BookingCourtSchedule; onBack: () => void }) {
+  const { selectedDate, moveSelectedDate, setSelectedDate, openCreateBooking } = useBooking();
+
+  return (
+    <div className="min-h-dvh pb-24">
+      <header className="sticky top-0 z-30 border-b border-border/70 bg-background/90 px-4 py-4 backdrop-blur-xl">
+        <div className="flex items-center justify-between gap-3">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="rounded-full"
+            onClick={onBack}
+          >
+            <ChevronLeft className="size-6" />
+          </Button>
+          <div className="min-w-0 flex-1">
+            <h1 className="truncate text-xl font-semibold">{schedule.court.name}</h1>
+            <p className="text-sm text-muted-foreground">{schedule.court.sport.name}</p>
+          </div>
+          <Button type="button" variant="ghost" size="icon" className="rounded-full">
+            <MoreHorizontal className="size-5" />
+          </Button>
+        </div>
+
+        <div className="mt-5 grid grid-cols-[52px_1fr_52px] gap-3">
+          <Button
+            type="button"
+            variant="outline"
+            className="h-12 rounded-lg"
+            onClick={() => moveSelectedDate(-1)}
+          >
+            <ChevronLeft className="size-5" />
+          </Button>
+          <DatePicker
+            value={fromIsoDateLocal(selectedDate)}
+            onChange={(date) =>
+              setSelectedDate(date ? toIsoDateLocal(date) : toIsoDateLocal(new Date()))
+            }
+            className="h-12 rounded-lg border-border/70 bg-card/75 text-sm"
+          />
+          <Button
+            type="button"
+            variant="outline"
+            className="h-12 rounded-lg"
+            onClick={() => moveSelectedDate(1)}
+          >
+            <ChevronRight className="size-5" />
+          </Button>
+        </div>
+      </header>
+
+      <main className="space-y-4 px-4 pt-4">
+        <section className="rounded-lg border border-border/70 bg-card/70 p-4">
+          <StatusLegend />
+        </section>
+
+        <section className="overflow-hidden rounded-lg border border-border/70 bg-card/75">
+          {schedule.segments.map((segment) => (
+            <MobileSegmentRow key={segment.id} schedule={schedule} segment={segment} />
+          ))}
+        </section>
+      </main>
+
+      <div className="fixed inset-x-0 bottom-0 z-40 border-t border-border/70 bg-background/90 p-4 backdrop-blur-xl">
+        <Button
+          type="button"
+          className="h-14 w-full rounded-lg text-base shadow-lg shadow-primary/25"
+          onClick={() =>
+            openCreateBooking({ courtId: schedule.court.id, sportId: schedule.court.sportId })
+          }
+        >
+          <Plus className="size-5" />
+          Nueva Reserva
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function MobileSegmentRow({
+  schedule,
+  segment,
+}: {
+  schedule: BookingCourtSchedule;
+  segment: BookingTimelineSegment;
+}) {
+  const { openCreateBooking, openBookingTools } = useBooking();
+  const isFree = segment.status === 'free';
+
+  return (
+    <button
+      type="button"
+      className="grid min-h-[104px] w-full grid-cols-[1fr_auto] items-center gap-4 border-b border-border/70 px-5 py-4 text-left last:border-b-0"
+      onClick={() => {
+        if (isFree) {
+          openCreateBooking({
+            courtId: schedule.court.id,
+            sportId: schedule.court.sportId,
+            startTime: segment.startTime,
+          });
+          return;
+        }
+        openBookingTools(segment);
+      }}
+    >
+      <div className="min-w-0">
+        <p className="text-xl font-medium">
+          {segment.startTime} - {segment.endTime}
+        </p>
+        <SegmentStatusLine segment={segment} />
+      </div>
+
+      {isFree ? (
+        <span className="rounded-lg border border-primary/70 px-4 py-3 font-medium text-primary">
+          Reservar
+        </span>
+      ) : (
+        <div className="max-w-[132px] text-right">
+          <p className="truncate text-sm font-medium">
+            {segment.booking?.customerName ?? 'Mantenimiento'}
+          </p>
+          <p className="mt-2 inline-flex items-center gap-1 text-sm text-muted-foreground">
+            {segment.status === 'maintenance' ? (
+              <Wrench className="size-4" />
+            ) : (
+              <Users className="size-4" />
+            )}
+            {segment.booking?.customerPhone ?? 'Personal'}
+          </p>
+        </div>
+      )}
+    </button>
+  );
+}
+
+function SegmentStatusLine({ segment }: { segment: BookingTimelineSegment }) {
+  const status = segment.status;
+  const label = status === 'free' ? 'Libre' : status === 'reserved' ? 'Reservado' : 'Mantenimiento';
+
+  return (
+    <p
+      className={cn(
+        'mt-2 inline-flex items-center gap-2 text-sm',
+        status === 'free' && 'text-primary',
+        status === 'reserved' && 'text-reserved',
+        status === 'maintenance' && 'text-maintenance'
+      )}
+    >
+      <span
+        className={cn(
+          'size-3 rounded-full',
+          status === 'free' && 'bg-primary',
+          status === 'reserved' && 'bg-reserved',
+          status === 'maintenance' && 'bg-maintenance'
+        )}
+      />
+      {label}
+    </p>
+  );
+}
+
+function StatusLegend() {
+  return (
+    <div className="flex items-center justify-between gap-3 text-sm">
+      <LegendItem label="Libre" className="bg-primary" />
+      <LegendItem label="Reservado" className="bg-reserved" />
+      <LegendItem label="Mantenimiento" className="bg-maintenance" />
+    </div>
+  );
+}
+
+function LegendItem({ label, className }: { label: string; className: string }) {
+  return (
+    <span className="inline-flex items-center gap-2">
+      <span className={cn('size-3 rounded-full', className)} />
+      {label}
+    </span>
+  );
+}
+
+function MiniSlot({
+  schedule,
+  segment,
+}: {
+  schedule: BookingCourtSchedule;
+  segment: BookingTimelineSegment;
+}) {
+  const { openCreateBooking, openBookingTools } = useBooking();
+  const label =
+    segment.status === 'free' ? 'Libre' : segment.status === 'reserved' ? 'Reservado' : 'Manten.';
+  const isActionable = segment.status === 'free' || Boolean(segment.booking);
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'min-w-0 rounded-lg border px-1.5 py-2 text-center transition active:scale-[0.98] disabled:opacity-60',
+        segment.status === 'free' && 'border-primary/50 bg-primary/15 text-primary',
+        segment.status === 'reserved' && 'border-reserved/50 bg-reserved/15 text-reserved',
+        segment.status === 'maintenance' &&
+          'border-maintenance/50 bg-maintenance/15 text-maintenance'
+      )}
+      disabled={!isActionable}
+      onClick={() => {
+        if (segment.status === 'free') {
+          openCreateBooking({
+            courtId: schedule.court.id,
+            sportId: schedule.court.sportId,
+            startTime: segment.startTime,
+          });
+          return;
+        }
+
+        if (segment.booking) {
+          openBookingTools(segment);
+        }
+      }}
+    >
+      <p className="truncate text-sm font-medium">{segment.startTime}</p>
+      <p className="mt-1 truncate text-[11px]">{label}</p>
+    </button>
+  );
+}
+
+function SportIcon({ sportName }: { sportName: string }) {
+  const isPadel = sportName.toLowerCase().includes('padel');
+
+  return (
+    <div
+      className={cn(
+        'flex size-14 shrink-0 items-center justify-center rounded-lg border text-white',
+        isPadel ? 'border-violet-400/40 bg-violet-500/30' : 'border-primary/40 bg-primary/25'
+      )}
+    >
+      {isPadel ? <CircleDot className="size-7" /> : <Dumbbell className="size-7" />}
+    </div>
+  );
+}
+
+function MetricDots({ schedule }: { schedule: BookingCourtSchedule }) {
+  return (
+    <div className="flex shrink-0 items-center gap-2 text-sm font-medium">
+      <span className="inline-flex items-center gap-1 text-primary">
+        <span className="size-3 rounded-full bg-primary" />
+        {schedule.metrics.free}
+      </span>
+      <span className="inline-flex items-center gap-1 text-reserved">
+        <span className="size-3 rounded-full bg-reserved" />
+        {schedule.metrics.reserved}
+      </span>
+      <span className="inline-flex items-center gap-1 text-maintenance">
+        <span className="size-3 rounded-full bg-maintenance" />
+        {schedule.metrics.maintenance}
+      </span>
+    </div>
+  );
+}
+
+function MobileBottomNav({ active }: { active: 'panel' | 'status' | 'bookings' | 'more' }) {
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-40 grid grid-cols-4 border-t border-border/70 bg-background/90 px-2 pb-3 pt-2 backdrop-blur-xl">
+      <BottomNavItem
+        active={active === 'panel'}
+        icon={<Grid2X2 className="size-5" />}
+        label="Panel"
+      />
+      <BottomNavItem
+        active={active === 'status'}
+        icon={<ListChecks className="size-5" />}
+        label="Estado"
+      />
+      <BottomNavItem
+        active={active === 'bookings'}
+        icon={<CalendarDays className="size-5" />}
+        label="Reservas"
+      />
+      <BottomNavItem
+        active={active === 'more'}
+        icon={<MoreHorizontal className="size-5" />}
+        label="Más"
+      />
+    </nav>
+  );
+}
+
+function BottomNavItem({
+  active,
+  icon,
+  label,
+}: { active: boolean; icon: React.ReactNode; label: string }) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'flex flex-col items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-muted-foreground',
+        active && 'text-primary'
+      )}
+    >
+      {icon}
+      <span>{label}</span>
+    </button>
+  );
+}

apps/frontend/src/features/booking/components/booking-tools-dialog.tsx

@@ -9,16 +9,19 @@ import {
   ResponsiveDialogTitle,
 } from '@/components/ui/responsive-dialog';
 import { Separator } from '@/components/ui/separator';
+import { useIsMobile } from '@/hooks/use-mobile';
 import { cn } from '@/lib/utils';
 import {
   AlertTriangle,
   BadgeCheck,
+  CalendarDays,
   CheckCircle2,
   Clock,
   MapPin,
   MessageCircle,
   Phone,
   User,
+  Wrench,
   XCircle,
 } from 'lucide-react';
 import { useBooking } from '../booking-provider';
@@ -65,36 +68,68 @@ const statusConfig: Record<string, { label: string; className: string }> = {
 export function BookingToolsDialog() {
   const { selectedSegment, bookingToolsOpen, closeBookingTools, updateBookingStatus } =
     useBooking();
+  const isMobile = useIsMobile();
+  const booking = selectedSegment?.booking;
 
-  const status = statusConfig[selectedSegment?.booking?.status ?? 'CONFIRMED'] ?? {
-    label: selectedSegment?.booking?.status,
+  const status = statusConfig[booking?.status ?? 'CONFIRMED'] ?? {
+    label: booking?.status,
     className: 'bg-slate-500/15 text-slate-300 border-slate-500/30',
   };
 
   const sendWhatsappReminder = () => {
-    const phone = selectedSegment?.booking?.customerPhone;
+    const phone = booking?.customerPhone;
+    if (!phone) return;
+
     const message = `
-        Hola ${selectedSegment?.booking?.customerName}. \nTe recordamos que tenés una reserva para el día *${formatDate(selectedSegment?.booking?.date)} de ${selectedSegment?.booking?.startTime} a ${selectedSegment?.booking?.endTime} en la cancha ${selectedSegment?.booking?.courtName} (${selectedSegment?.booking?.sport?.name})*. ¡Te esperamos! \nSi no vas a poder asistir, por favor avisanos para que otros clientes puedan reservar. Gracias.\n\n*Equipo de ${selectedSegment?.booking?.complexName}*`;
+        Hola ${booking?.customerName}. \nTe recordamos que tenés una reserva para el día *${formatDate(booking?.date)} de ${booking?.startTime} a ${booking?.endTime} en la cancha ${booking?.courtName} (${booking?.sport?.name})*. ¡Te esperamos! \nSi no vas a poder asistir, por favor avisanos para que otros clientes puedan reservar. Gracias.\n\n*Equipo de ${booking?.complexName}*`;
 
     const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
     window.open(url, '_blank');
   };
 
+  const updateStatus = (nextStatus: 'CANCELLED' | 'COMPLETED' | 'NOSHOW') => {
+    if (!booking?.id) return;
+    updateBookingStatus(booking.id, nextStatus);
+    closeBookingTools();
+  };
+
+  if (isMobile) {
+    return (
+      <ResponsiveDialog
+        open={bookingToolsOpen}
+        onOpenChange={(open) => !open && closeBookingTools()}
+      >
+        <ResponsiveDialogContent
+          className="data-[variant=drawer]:!h-[92dvh] data-[variant=drawer]:!max-h-[92dvh] data-[variant=drawer]:overflow-hidden data-[variant=drawer]:px-0 data-[variant=drawer]:pb-0"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          <MobileBookingToolsSheet
+            status={status}
+            onComplete={() => updateStatus('COMPLETED')}
+            onCancel={() => updateStatus('CANCELLED')}
+            onReminder={sendWhatsappReminder}
+            onNoShow={() => updateStatus('NOSHOW')}
+          />
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
+    );
+  }
+
   return (
     <ResponsiveDialog open={bookingToolsOpen} onOpenChange={(open) => !open && closeBookingTools()}>
       <ResponsiveDialogContent
-        className="data-[variant=dialog]:max-w-5xl"
+        className="data-[variant=dialog]:max-w-5xl data-[variant=drawer]:max-h-[92dvh] data-[variant=drawer]:overflow-y-auto data-[variant=drawer]:px-4 data-[variant=drawer]:pb-5"
         onOpenAutoFocus={(event) => event.preventDefault()}
       >
-        <ResponsiveDialogHeader>
+        <ResponsiveDialogHeader className="data-[variant=drawer]:px-0 data-[variant=drawer]:text-left">
           <ResponsiveDialogTitle>Detalles de la reserva</ResponsiveDialogTitle>
           <ResponsiveDialogDescription>
             Administra la reserva y su estado.
           </ResponsiveDialogDescription>
         </ResponsiveDialogHeader>
 
-        <section className="-mx-6 px-6 pt-3 pb-5">
-          <div className="grid grid-cols-1 sm:grid-cols-3">
+        <section className="mx-0 px-0 pt-3 pb-3 sm:-mx-6 sm:px-6 sm:pb-5">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-0">
             <DetailItem
               icon={<MapPin className="h-5 w-5" />}
               label="Cancha"
@@ -122,7 +157,7 @@ export function BookingToolsDialog() {
               label="Fecha"
               value={`${formatDate(selectedSegment?.booking?.date)}`}
               withDivider
-              className="pt-10"
+              className="sm:pt-10"
             />
 
             <DetailItem
@@ -130,14 +165,14 @@ export function BookingToolsDialog() {
               label="Hora"
               value={`${selectedSegment?.booking?.startTime} a ${selectedSegment?.booking?.endTime}`}
               withDivider
-              className="pt-10"
+              className="sm:pt-10"
             />
 
             <DetailItem
               icon={<Phone className="h-5 w-5" />}
               label="Teléfono"
               value={selectedSegment?.booking?.customerPhone ?? '-'}
-              className="pt-10"
+              className="sm:pt-10"
             />
           </div>
         </section>
@@ -156,10 +191,9 @@ export function BookingToolsDialog() {
               icon={<CheckCircle2 className="h-5 w-5" />}
               title="Completar reserva"
               description="El cliente se presentó para usar la cancha."
-              className="border-emerald-500/40 bg-emerald-500/10 text-emerald-600 text-lg hover:bg-emerald-500/15 hover:text-esmerald-800"
+              className="border-emerald-500/40 bg-emerald-500/10 text-lg text-emerald-600 hover:bg-emerald-500/15 hover:text-emerald-800"
               onClick={() => {
-                updateBookingStatus(selectedSegment?.booking?.id!, 'COMPLETED');
-                closeBookingTools();
+                updateStatus('COMPLETED');
               }}
             />
 
@@ -167,10 +201,9 @@ export function BookingToolsDialog() {
               icon={<XCircle className="h-5 w-5" />}
               title="Cancelar reserva"
               description="El cliente avisó que no va a venir. La cancha vuelve a estar disponible."
-              className="border-red-500/40 bg-red-500/10 text-red-600 text-lg hover:bg-red-500/15 hover:text-red-800"
+              className="border-red-500/40 bg-red-500/10 text-lg text-red-600 hover:bg-red-500/15 hover:text-red-800"
               onClick={() => {
-                updateBookingStatus(selectedSegment?.booking?.id!, 'CANCELLED');
-                closeBookingTools();
+                updateStatus('CANCELLED');
               }}
             />
 
@@ -178,7 +211,7 @@ export function BookingToolsDialog() {
               icon={<MessageCircle className="h-5 w-5" />}
               title="Enviar recordatorio"
               description="Enviar un mensaje por WhatsApp al cliente."
-              className="border-sky-500/40 bg-sky-500/10 text-sky-600 text-lg hover:bg-sky-500/15 hover:text-sky-800"
+              className="border-sky-500/40 bg-sky-500/10 text-lg text-sky-600 hover:bg-sky-500/15 hover:text-sky-800"
               onClick={sendWhatsappReminder}
             />
 
@@ -186,18 +219,19 @@ export function BookingToolsDialog() {
               icon={<AlertTriangle className="h-5 w-5" />}
               title="Marcar como No Show"
               description="El cliente no vino y no canceló."
-              className="border-amber-500/40 bg-amber-500/10 text-amber-600 text-lg hover:bg-amber-500/15 hover:text-amber-800"
+              className="border-amber-500/40 bg-amber-500/10 text-lg text-amber-600 hover:bg-amber-500/15 hover:text-amber-800"
               onClick={() => {
-                updateBookingStatus(selectedSegment?.booking?.id!, 'NOSHOW');
-                closeBookingTools();
+                updateStatus('NOSHOW');
               }}
             />
           </div>
         </section>
 
-        <ResponsiveDialogFooter>
+        <ResponsiveDialogFooter className="data-[variant=drawer]:px-0">
           <ResponsiveDialogClose asChild>
-            <Button variant="outline">Cerrar</Button>
+            <Button variant="outline" className="data-[variant=drawer]:h-11">
+              Cerrar
+            </Button>
           </ResponsiveDialogClose>
         </ResponsiveDialogFooter>
       </ResponsiveDialogContent>
@@ -205,6 +239,176 @@ export function BookingToolsDialog() {
   );
 }
 
+function MobileBookingToolsSheet({
+  status,
+  onComplete,
+  onCancel,
+  onReminder,
+  onNoShow,
+}: {
+  status: { label: string | undefined; className: string };
+  onComplete: () => void;
+  onCancel: () => void;
+  onReminder: () => void;
+  onNoShow: () => void;
+}) {
+  const { selectedSegment } = useBooking();
+  const booking = selectedSegment?.booking;
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col pt-3">
+      <ResponsiveDialogHeader className="shrink-0 px-4 pb-3 text-left">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <ResponsiveDialogTitle className="text-lg">Reserva</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              {booking?.courtName ?? '-'} · {booking?.startTime ?? '--:--'} a{' '}
+              {booking?.endTime ?? '--:--'}
+            </ResponsiveDialogDescription>
+          </div>
+          <span
+            className={cn(
+              'shrink-0 rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-normal',
+              status.className
+            )}
+          >
+            {status.label ?? '-'}
+          </span>
+        </div>
+      </ResponsiveDialogHeader>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-4">
+        <section className="rounded-lg border border-border/70 bg-card/75 p-4">
+          <div className="flex items-center gap-3">
+            <div className="flex size-12 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-primary">
+              <MapPin className="size-6" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-xs text-muted-foreground">Cancha</p>
+              <p className="truncate text-xl font-semibold">{booking?.courtName ?? '-'}</p>
+              <p className="text-sm text-muted-foreground">{booking?.sport?.name ?? '-'}</p>
+            </div>
+          </div>
+        </section>
+
+        <section className="mt-3 grid gap-2">
+          <MobileDetailRow
+            icon={<User className="size-5" />}
+            label="Cliente"
+            value={booking?.customerName ?? '-'}
+          />
+          <MobileDetailRow
+            icon={<Phone className="size-5" />}
+            label="Teléfono"
+            value={booking?.customerPhone ?? '-'}
+          />
+          <MobileDetailRow
+            icon={<CalendarDays className="size-5" />}
+            label="Fecha"
+            value={formatDate(booking?.date) || '-'}
+          />
+          <MobileDetailRow
+            icon={<Clock className="size-5" />}
+            label="Horario"
+            value={`${booking?.startTime ?? '--:--'} a ${booking?.endTime ?? '--:--'}`}
+          />
+          <MobileDetailRow
+            icon={<Wrench className="size-5" />}
+            label="Estado"
+            value={status.label ?? '-'}
+            valueClassName="uppercase text-primary"
+          />
+        </section>
+      </div>
+
+      <section className="shrink-0 border-t border-border/70 bg-popover/95 px-4 py-3">
+        <h3 className="text-sm font-medium">Acciones</h3>
+        <div className="mt-3 grid grid-cols-2 gap-2">
+          <MobileActionButton
+            icon={<CheckCircle2 className="size-5" />}
+            label="Completar"
+            className="border-primary/45 bg-primary/12 text-primary"
+            onClick={onComplete}
+          />
+          <MobileActionButton
+            icon={<MessageCircle className="size-5" />}
+            label="Recordar"
+            className="border-reserved/45 bg-reserved/12 text-reserved"
+            onClick={onReminder}
+          />
+          <MobileActionButton
+            icon={<XCircle className="size-5" />}
+            label="Cancelar"
+            className="border-destructive/45 bg-destructive/12 text-destructive"
+            onClick={onCancel}
+          />
+          <MobileActionButton
+            icon={<AlertTriangle className="size-5" />}
+            label="No show"
+            className="border-warning/50 bg-warning/12 text-warning"
+            onClick={onNoShow}
+          />
+        </div>
+        <ResponsiveDialogFooter className="px-0 pb-0 pt-3">
+          <ResponsiveDialogClose asChild>
+            <Button variant="outline" className="h-11 w-full rounded-lg">
+              Cerrar
+            </Button>
+          </ResponsiveDialogClose>
+        </ResponsiveDialogFooter>
+      </section>
+    </div>
+  );
+}
+
+function MobileDetailRow({
+  icon,
+  label,
+  value,
+  valueClassName,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  valueClassName?: string;
+}) {
+  return (
+    <div className="flex items-center gap-3 rounded-lg border border-border/60 bg-secondary/35 p-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-secondary text-muted-foreground">
+        {icon}
+      </div>
+      <div className="min-w-0">
+        <p className="text-xs text-muted-foreground">{label}</p>
+        <p className={cn('truncate text-base font-semibold', valueClassName)}>{value}</p>
+      </div>
+    </div>
+  );
+}
+
+function MobileActionButton({
+  icon,
+  label,
+  className,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  className: string;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className={cn('h-14 justify-start rounded-lg px-3 text-sm font-semibold', className)}
+      onClick={onClick}
+    >
+      {icon}
+      {label}
+    </Button>
+  );
+}
+
 function DetailItem({
   icon,
   label,
@@ -223,7 +427,12 @@ function DetailItem({
   className?: string;
 }) {
   return (
-    <div className={cn('relative flex items-start gap-4 px-5 py-1', className)}>
+    <div
+      className={cn(
+        'relative flex items-start gap-4 rounded-lg bg-secondary/45 p-3 sm:bg-transparent sm:px-5 sm:py-1',
+        className
+      )}
+    >
       {withDivider && (
         <div
           className="
@@ -241,14 +450,14 @@ function DetailItem({
         />
       )}
 
-      <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full dark:bg-slate-800/80 bg-slate-300/80 dark:text-slate-300 text-slate-800">
+      <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-slate-300/80 text-slate-800 dark:bg-slate-800/80 dark:text-slate-300">
         {icon}
       </div>
       <div className="min-w-0">
         <p className="text-sm text-slate-400">{label}</p>
         <p
           className={cn(
-            'mt-1 text-[22px] leading-none font-semibold tracking-tight text-gray-600 dark:text-white',
+            'mt-1 text-lg leading-tight font-semibold tracking-normal text-gray-600 sm:text-[22px] dark:text-white',
             valueClassName
           )}
         >
@@ -277,7 +486,7 @@ function ActionButton({
     <Button
       type="button"
       variant="outline"
-      className={`h-auto justify-start rounded-2xl p-4 text-left ${className}`}
+      className={`h-auto min-h-[76px] justify-start rounded-lg p-4 text-left ${className}`}
       onClick={onClick}
     >
       <div className="flex gap-3">