Close dialog on status change

2026-05-06 17:03:42 -03:00
parent 41a217e8a9
commit 7be776f189
22 changed files with 408 additions and 428 deletions
--- a/apps/frontend/src/features/booking/components/booking-tools-dialog.tsx
+++ b/apps/frontend/src/features/booking/components/booking-tools-dialog.tsx
@@ -1,233 +1,232 @@
-import { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle } from "@/components/ui/responsive-dialog";
-import { useBooking } from "../booking-provider";
-import { Button } from "@/components/ui/button";
+import { Button } from '@/components/ui/button';
 import {
-    CheckCircle2,
-    Clock,
-    MapPin,
-    MessageCircle,
-    Phone,
-    User,
-    XCircle,
-    AlertTriangle,
-    BadgeCheck,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Separator } from "@/components/ui/separator";
+  ResponsiveDialog,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+} from '@/components/ui/responsive-dialog';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import {
+  AlertTriangle,
+  BadgeCheck,
+  CheckCircle2,
+  Clock,
+  MapPin,
+  MessageCircle,
+  Phone,
+  User,
+  XCircle,
+} from 'lucide-react';
+import { useBooking } from '../booking-provider';

 function formatDate(date: string | undefined) {
-    if (!date) return "";
+  if (!date) return '';

-    const formatted = new Intl.DateTimeFormat("es-AR", {
-        weekday: "long",
-        day: "numeric",
-        month: "long",
-    }).format(new Date(`${date}T00:00:00`));
+  const formatted = new Intl.DateTimeFormat('es-AR', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+  }).format(new Date(`${date}T00:00:00`));

-    return formatted
-        .split(" ")
-        .map((word, index) => {
-            if (index === 0 || index === 3) {
-                return word.charAt(0).toUpperCase() + word.slice(1);
-            }
-            return word;
-        })
-        .join(" ");
+  return formatted
+    .split(' ')
+    .map((word, index) => {
+      if (index === 0 || index === 3) {
+        return word.charAt(0).toUpperCase() + word.slice(1);
+      }
+      return word;
+    })
+    .join(' ');
 }

 const statusConfig: Record<string, { label: string; className: string }> = {
-
-    CONFIRMED: {
-        label: "Reservada",
-        className: "bg-emerald-500/15 text-emerald-400 border-emerald-500/30",
-    },
-    COMPLETED: {
-        label: "Completada",
-        className: "bg-sky-500/15 text-sky-400 border-sky-500/30",
-    },
-    CANCELLED: {
-        label: "Cancelada",
-        className: "bg-red-500/15 text-red-400 border-red-500/30",
-    },
-    NOSHOW: {
-        label: "No show",
-        className: "bg-amber-500/15 text-amber-400 border-amber-500/30",
-    },
-
+  CONFIRMED: {
+    label: 'Reservada',
+    className: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
+  },
+  COMPLETED: {
+    label: 'Completada',
+    className: 'bg-sky-500/15 text-sky-400 border-sky-500/30',
+  },
+  CANCELLED: {
+    label: 'Cancelada',
+    className: 'bg-red-500/15 text-red-400 border-red-500/30',
+  },
+  NOSHOW: {
+    label: 'No show',
+    className: 'bg-amber-500/15 text-amber-400 border-amber-500/30',
+  },
 };

 export function BookingToolsDialog() {
-    const {
-        selectedSegment,
-        bookingToolsOpen,
-        closeBookingTools,
-        updateBookingStatus,
-    } = useBooking();
+  const { selectedSegment, bookingToolsOpen, closeBookingTools, updateBookingStatus } =
+    useBooking();

+  const status = statusConfig[selectedSegment?.booking?.status ?? 'CONFIRMED'] ?? {
+    label: selectedSegment?.booking?.status,
+    className: 'bg-slate-500/15 text-slate-300 border-slate-500/30',
+  };

-    const status = statusConfig[selectedSegment?.booking?.status ?? "CONFIRMED"] ?? {
-        label: selectedSegment?.booking?.status,
-        className: "bg-slate-500/15 text-slate-300 border-slate-500/30",
-    };
-
-    const sendWhatsappReminder = () => {
-        const phone = selectedSegment?.booking?.customerPhone;
-        const message = `
+  const sendWhatsappReminder = () => {
+    const phone = selectedSegment?.booking?.customerPhone;
+    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}*`;
-        
-        const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
-        window.open(url, '_blank');
-    }

-    return (
-        <ResponsiveDialog
-            open={bookingToolsOpen}
-            onOpenChange={(open) => !open && closeBookingTools()}
-        >
-            <ResponsiveDialogContent
-                className="data-[variant=dialog]:max-w-5xl"
-                onOpenAutoFocus={(event) => event.preventDefault()}
-            >
-                <ResponsiveDialogHeader>
-                    <ResponsiveDialogTitle>Detalles de la reserva</ResponsiveDialogTitle>
-                    <ResponsiveDialogDescription>
-                        Administra la reserva y su estado.
-                    </ResponsiveDialogDescription>
-                </ResponsiveDialogHeader>
+    const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
+    window.open(url, '_blank');
+  };

-                <section className="-mx-6 px-6 pt-3 pb-5">
-                    <div className="grid grid-cols-1 sm:grid-cols-3">
-                        <DetailItem
-                            icon={<MapPin className="h-5 w-5" />}
-                            label="Cancha"
-                            value={selectedSegment?.booking?.courtName ?? "-"}
-                            helper={selectedSegment?.booking?.sport?.name}
-                            withDivider
-                        />
+  return (
+    <ResponsiveDialog open={bookingToolsOpen} onOpenChange={(open) => !open && closeBookingTools()}>
+      <ResponsiveDialogContent
+        className="data-[variant=dialog]:max-w-5xl"
+        onOpenAutoFocus={(event) => event.preventDefault()}
+      >
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>Detalles de la reserva</ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            Administra la reserva y su estado.
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>

-                        <DetailItem
-                            icon={<BadgeCheck className="h-5 w-5" />}
-                            label="Estado actual"
-                            value={status.label}
-                            valueClassName="text-emerald-400 uppercase dark:text-emerald-500"
-                            withDivider
-                        />
+        <section className="-mx-6 px-6 pt-3 pb-5">
+          <div className="grid grid-cols-1 sm:grid-cols-3">
+            <DetailItem
+              icon={<MapPin className="h-5 w-5" />}
+              label="Cancha"
+              value={selectedSegment?.booking?.courtName ?? '-'}
+              helper={selectedSegment?.booking?.sport?.name}
+              withDivider
+            />

-                        <DetailItem
-                            icon={<User className="h-5 w-5" />}
-                            label="Cliente"
-                            value={selectedSegment?.booking?.customerName ?? "-"}
-                        />
+            <DetailItem
+              icon={<BadgeCheck className="h-5 w-5" />}
+              label="Estado actual"
+              value={status.label}
+              valueClassName="text-emerald-400 uppercase dark:text-emerald-500"
+              withDivider
+            />

-                        <DetailItem
-                            icon={<Clock className="h-5 w-5" />}
-                            label="Fecha"
-                            value={`${formatDate(selectedSegment?.booking?.date)}`}
-                            withDivider
-                            className="pt-10"
-                        />
+            <DetailItem
+              icon={<User className="h-5 w-5" />}
+              label="Cliente"
+              value={selectedSegment?.booking?.customerName ?? '-'}
+            />

-                        <DetailItem
-                            icon={<Clock className="h-5 w-5" />}
-                            label="Hora"
-                            value={`${selectedSegment?.booking?.startTime} a ${selectedSegment?.booking?.endTime}`}
-                            withDivider
-                            className="pt-10"
-                        />
+            <DetailItem
+              icon={<Clock className="h-5 w-5" />}
+              label="Fecha"
+              value={`${formatDate(selectedSegment?.booking?.date)}`}
+              withDivider
+              className="pt-10"
+            />

-                        <DetailItem
-                            icon={<Phone className="h-5 w-5" />}
-                            label="Teléfono"
-                            value={selectedSegment?.booking?.customerPhone ?? "-"}
-                            className="pt-10"
-                        />
+            <DetailItem
+              icon={<Clock className="h-5 w-5" />}
+              label="Hora"
+              value={`${selectedSegment?.booking?.startTime} a ${selectedSegment?.booking?.endTime}`}
+              withDivider
+              className="pt-10"
+            />

-                    </div>
+            <DetailItem
+              icon={<Phone className="h-5 w-5" />}
+              label="Teléfono"
+              value={selectedSegment?.booking?.customerPhone ?? '-'}
+              className="pt-10"
+            />
+          </div>
+        </section>

-                </section>
+        <Separator className="dark:bg-slate-800 bg-slate-300" />

-                <Separator className="dark:bg-slate-800 bg-slate-300" />
+        <section className="space-y-3">
+          <div>
+            <h3 className="font-medium text-slate-100">Acciones disponibles</h3>
+            <p className="text-sm text-slate-400">
+              Elegí qué hacer según lo que ocurrió con el cliente.
+            </p>
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <ActionButton
+              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"
+              onClick={() => {
+                updateBookingStatus(selectedSegment?.booking?.id!, 'COMPLETED');
+                closeBookingTools();
+              }}
+            />

-                <section className="space-y-3">
-                    <div>
-                        <h3 className="font-medium text-slate-100">Acciones disponibles</h3>
-                        <p className="text-sm text-slate-400">
-                            Elegí qué hacer según lo que ocurrió con el cliente.
-                        </p>
-                    </div>
-                    <div className="grid gap-3 sm:grid-cols-2">
-                        <ActionButton
-                            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"
-                            onClick={() => updateBookingStatus(selectedSegment?.booking?.id!, 'COMPLETED')}
-                        />
+            <ActionButton
+              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"
+              onClick={() => {
+                updateBookingStatus(selectedSegment?.booking?.id!, 'CANCELLED');
+                closeBookingTools();
+              }}
+            />

-                        <ActionButton
-                            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"
-                            onClick={() => updateBookingStatus(selectedSegment?.booking?.id!, 'CANCELLED')}
-                        />
+            <ActionButton
+              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"
+              onClick={sendWhatsappReminder}
+            />

-                        <ActionButton
-                            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"
-                            onClick={sendWhatsappReminder}
-                        />
+            <ActionButton
+              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"
+              onClick={() => {
+                updateBookingStatus(selectedSegment?.booking?.id!, 'NOSHOW');
+                closeBookingTools();
+              }}
+            />
+          </div>
+        </section>

-                        <ActionButton
-                            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"
-                            onClick={() => updateBookingStatus(selectedSegment?.booking?.id!, 'NOSHOW')}
-                        />
-                    </div>
-                </section>
-
-                <ResponsiveDialogFooter>
-                    <ResponsiveDialogClose asChild>
-                        <Button variant="outline">Cerrar</Button>
-                    </ResponsiveDialogClose>
-                </ResponsiveDialogFooter>
-            </ResponsiveDialogContent>
-        </ResponsiveDialog>
-    );
+        <ResponsiveDialogFooter>
+          <ResponsiveDialogClose asChild>
+            <Button variant="outline">Cerrar</Button>
+          </ResponsiveDialogClose>
+        </ResponsiveDialogFooter>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
 }

 function DetailItem({
-    icon,
-    label,
-    value,
-    helper,
-    valueClassName,
-    withDivider,
-    className,
+  icon,
+  label,
+  value,
+  helper,
+  valueClassName,
+  withDivider,
+  className,
 }: {
-    icon: React.ReactNode;
-    label: string;
-    value: string;
-    helper?: string;
-    valueClassName?: string;
-    withDivider?: boolean;
-    className?: string;
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  helper?: string;
+  valueClassName?: string;
+  withDivider?: boolean;
+  className?: string;
 }) {
-
-    return (
+  return (
+    <div className={cn('relative flex items-start gap-4 px-5 py-1', className)}>
+      {withDivider && (
        <div
-            className={cn(
-                "relative flex items-start gap-4 px-5 py-1",
-                className
-            )}
-        >
-            {withDivider && (
-                <div
-                    className="
+          className="
                        absolute
                        right-0
                        top-1/2
@@ -239,65 +238,57 @@ function DetailItem({
                        bg-slate-300
                        sm:block
                        "
-                />
-            )}
+        />
+      )}

-            <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">
-                {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",
-                        valueClassName
-                    )}
-                >
-                    {value}
-                </p>
-                {helper && (
-                    <p className="mt-1 text-sm text-slate-500">
-                        {helper}
-                    </p>
-                )}
-            </div>
-        </div>
-
-    );
+      <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">
+        {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',
+            valueClassName
+          )}
+        >
+          {value}
+        </p>
+        {helper && <p className="mt-1 text-sm text-slate-500">{helper}</p>}
+      </div>
+    </div>
+  );
 }

 function ActionButton({
-    icon,
-    title,
-    description,
-    className,
-    onClick
+  icon,
+  title,
+  description,
+  className,
+  onClick,
 }: {
-    icon: React.ReactNode;
-    title: string;
-    description: string;
-    className: string;
-    onClick?: () => void;
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  className: string;
+  onClick?: () => void;
 }) {
-    return (
-        <Button
-            type="button"
-            variant="outline"
-            className={`h-auto justify-start rounded-2xl p-4 text-left ${className}`}
-            onClick={onClick}
-        >
-            <div className="flex gap-3">
-                <div className="mt-0.5">{icon}</div>
-                <div>
-                    <p className="font-semibold">{title}</p>
-                    <p className="mt-1 whitespace-normal text-sm font-normal leading-relaxed dark:text-slate-200 text-slate-500">
-                        {description}
-                    </p>
-                </div>
-            </div>
-        </Button>
-    );
-
-}
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className={`h-auto justify-start rounded-2xl p-4 text-left ${className}`}
+      onClick={onClick}
+    >
+      <div className="flex gap-3">
+        <div className="mt-0.5">{icon}</div>
+        <div>
+          <p className="font-semibold">{title}</p>
+          <p className="mt-1 whitespace-normal text-sm font-normal leading-relaxed dark:text-slate-200 text-slate-500">
+            {description}
+          </p>
+        </div>
+      </div>
+    </Button>
+  );
+}