jselesan/playzer
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat/improve-booking-ui #10

Merged
jselesan merged 3 commits from feat/improve-booking-ui into development 2026-06-05 14:25:08 +00:00
Conversation 0 Commits 3 Files Changed 25 +84 -80
1 changed files with 84 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7ca784d5f5 - Show all commits

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

@@ -179,53 +179,55 @@ export function BookingToolsDialog() {
<Separator className="dark:bg-slate-800 bg-slate-300" /> <Separator className="dark:bg-slate-800 bg-slate-300" />
<section className="space-y-3"> {booking?.status !== 'COMPLETED' && (
<div> <section className="space-y-3">
<h3 className="font-medium text-slate-100">Acciones disponibles</h3> <div>
<p className="text-sm text-slate-400"> <h3 className="font-medium text-slate-100">Acciones disponibles</h3>
Elegí qué hacer según lo que ocurrió con el cliente. <p className="text-sm text-slate-400">
</p> Elegí qué hacer según lo que ocurrió con el cliente.
</div> </p>
<div className="grid gap-3 sm:grid-cols-2"> </div>
<ActionButton <div className="grid gap-3 sm:grid-cols-2">
icon={<CheckCircle2 className="h-5 w-5" />} <ActionButton
title="Completar reserva" icon={<CheckCircle2 className="h-5 w-5" />}
description="El cliente se presentó para usar la cancha." title="Completar reserva"
className="border-emerald-500/40 bg-emerald-500/10 text-lg text-emerald-600 hover:bg-emerald-500/15 hover:text-emerald-800" description="El cliente se presentó para usar la cancha."
onClick={() => { className="border-emerald-500/40 bg-emerald-500/10 text-lg text-emerald-600 hover:bg-emerald-500/15 hover:text-emerald-800"
updateStatus('COMPLETED'); onClick={() => {
}} updateStatus('COMPLETED');
/> }}
/>
<ActionButton <ActionButton
icon={<XCircle className="h-5 w-5" />} icon={<XCircle className="h-5 w-5" />}
title="Cancelar reserva" title="Cancelar reserva"
description="El cliente avisó que no va a venir. La cancha vuelve a estar disponible." 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-lg text-red-600 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={() => { onClick={() => {
updateStatus('CANCELLED'); updateStatus('CANCELLED');
}} }}
/> />
<ActionButton <ActionButton
icon={<MessageCircle className="h-5 w-5" />} icon={<MessageCircle className="h-5 w-5" />}
title="Enviar recordatorio" title="Enviar recordatorio"
description="Enviar un mensaje por WhatsApp al cliente." description="Enviar un mensaje por WhatsApp al cliente."
className="border-sky-500/40 bg-sky-500/10 text-lg text-sky-600 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} onClick={sendWhatsappReminder}
/> />
<ActionButton <ActionButton
icon={<AlertTriangle className="h-5 w-5" />} icon={<AlertTriangle className="h-5 w-5" />}
title="Marcar como No Show" title="Marcar como No Show"
description="El cliente no vino y no canceló." description="El cliente no vino y no canceló."
className="border-amber-500/40 bg-amber-500/10 text-lg text-amber-600 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={() => { onClick={() => {
updateStatus('NOSHOW'); updateStatus('NOSHOW');
}} }}
/> />
</div> </div>
</section> </section>
)}
<ResponsiveDialogFooter className="data-[variant=drawer]:px-0"> <ResponsiveDialogFooter className="data-[variant=drawer]:px-0">
<ResponsiveDialogClose asChild> <ResponsiveDialogClose asChild>
@@ -321,42 +323,44 @@ function MobileBookingToolsSheet({
</section> </section>
</div> </div>
<section className="shrink-0 border-t border-border/70 bg-popover/95 px-4 py-3"> {booking?.status !== 'COMPLETED' && (
<h3 className="text-sm font-medium">Acciones</h3> <section className="shrink-0 border-t border-border/70 bg-popover/95 px-4 py-3">
<div className="mt-3 grid grid-cols-2 gap-2"> <h3 className="text-sm font-medium">Acciones</h3>
<MobileActionButton <div className="mt-3 grid grid-cols-2 gap-2">
icon={<CheckCircle2 className="size-5" />} <MobileActionButton
label="Completar" icon={<CheckCircle2 className="size-5" />}
className="border-primary/45 bg-primary/12 text-primary" label="Completar"
onClick={onComplete} className="border-primary/45 bg-primary/12 text-primary"
/> onClick={onComplete}
<MobileActionButton />
icon={<MessageCircle className="size-5" />} <MobileActionButton
label="Recordar" icon={<MessageCircle className="size-5" />}
className="border-reserved/45 bg-reserved/12 text-reserved" label="Recordar"
onClick={onReminder} className="border-reserved/45 bg-reserved/12 text-reserved"
/> onClick={onReminder}
<MobileActionButton />
icon={<XCircle className="size-5" />} <MobileActionButton
label="Cancelar" icon={<XCircle className="size-5" />}
className="border-destructive/45 bg-destructive/12 text-destructive" label="Cancelar"
onClick={onCancel} className="border-destructive/45 bg-destructive/12 text-destructive"
/> onClick={onCancel}
<MobileActionButton />
icon={<AlertTriangle className="size-5" />} <MobileActionButton
label="No show" icon={<AlertTriangle className="size-5" />}
className="border-warning/50 bg-warning/12 text-warning" label="No show"
onClick={onNoShow} className="border-warning/50 bg-warning/12 text-warning"
/> onClick={onNoShow}
</div> />
<ResponsiveDialogFooter className="px-0 pb-0 pt-3"> </div>
<ResponsiveDialogClose asChild> <ResponsiveDialogFooter className="px-0 pb-0 pt-3">
<Button variant="outline" className="h-11 w-full rounded-lg"> <ResponsiveDialogClose asChild>
Cerrar <Button variant="outline" className="h-11 w-full rounded-lg">
</Button> Cerrar
</ResponsiveDialogClose> </Button>
</ResponsiveDialogFooter> </ResponsiveDialogClose>
</section> </ResponsiveDialogFooter>
</section>
)}
</div> </div>
); );
} }