Mobile booking view

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">