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

refactor: update home page UI to v2 patterns and introduce availability heatmap component

Browse Source
This commit is contained in:
Jose Selesan
2026-04-27 08:46:32 -03:00
parent d6e32f3e84
commit 7a3452c2d1
4 changed files with 543 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
apps/frontend/src/components/ui/availability-heatmap.tsx Normal file
View File

@@ -0,0 +1,113 @@
import React from 'react';
// Types for the component
type Slot = {
startTime: string;
endTime: string;
};
type Court = {
courtId: string;
courtName: string;
sport: { id: string; name: string; slug: string };
slotDurationMinutes: number;
availableSlots: Slot[];
};
type SelectedSlot = {
courtId: string;
startTime: string;
} | null;
type AvailabilityHeatMapProps = {
courts: Court[];
selectedSlot: SelectedSlot;
onSelectSlot: (payload: {
courtId: string;
courtName: string;
sportId: string;
sportName: string;
startTime: string;
endTime: string;
price?: { min: number; max: number };
}) => void;
};
/**
* AvailabilityHeatMap
*
* A visual heat‑map style component that displays each court as a card and colours the
* slot buttons according to how many slots are available for that court. The colour scale
* goes from green (few slots) to red (many slots), providing an immediate visual cue of
* density – the signature element requested for the bookings panel.
*/
export default function AvailabilityHeatMap({
courts,
selectedSlot,
onSelectSlot,
}: AvailabilityHeatMapProps) {
// Determine the maximum number of slots among all courts to normalise the heat scale.
const maxSlots = Math.max(1, ...courts.map((c) => c.availableSlots.length));
// Convert a slot count into an HSL colour ranging from green (low) to red (high).
const slotCountToHue = (count: number) => {
const ratio = count / maxSlots; // 0 => green, 1 => red
const hue = Math.round(120 - 120 * ratio); // 120° (green) to 0° (red)
return `hsl(${hue}, 70%, 55%)`;
};
return (
<div className="grid gap-4">
{courts.map((court) => {
const bg = slotCountToHue(court.availableSlots.length);
return (
<div
key={court.courtId}
className="rounded-2xl border border-border/70 bg-background p-4 shadow-sm"
>
<div className="flex items-center justify-between mb-2">
<p className="font-semibold text-foreground">{court.courtName}</p>
<span className="text-xs text-muted-foreground">
{court.availableSlots.length} horarios
</span>
</div>
<div className="grid grid-cols-4 gap-2">
{court.availableSlots.map((slot) => {
const isSelected =
selectedSlot?.courtId === court.courtId &&
selectedSlot?.startTime === slot.startTime;
return (
<button
key={slot.startTime}
type="button"
onClick={() =>
onSelectSlot({
courtId: court.courtId,
courtName: court.courtName,
sportId: court.sport.id,
sportName: court.sport.name,
startTime: slot.startTime,
endTime: slot.endTime,
})
}
className={`h-10 rounded-xl border text-sm font-medium transition-all ${
isSelected
? 'border-primary bg-primary text-primary-foreground shadow-sm'
: 'border-border/70 hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-sm'
}`}
style={{
backgroundColor: isSelected ? undefined : bg,
opacity: isSelected ? 1 : 0.8,
}}
>
{slot.startTime}
</button>
);
})}
</div>
</div>
);
})}
</div>
);
}

738
apps/frontend/src/features/home/home-page.tsx
View File

@@ -1,3 +1,4 @@
import AvailabilityHeatMap from '@/components/ui/availability-heatmap';
import { Button } from '@/components/ui/button';
import { DatePicker } from '@/components/ui/date-picker';
import { Field, FieldError, FieldLabel } from '@/components/ui/field';
@@ -127,6 +128,9 @@ export function HomePage() {
const [selectedSportId, setSelectedSportId] = useState<string | undefined>();
const [selectedCourtId, setSelectedCourtId] = useState<string>('');
const [selectedStartTime, setSelectedStartTime] = useState<string>('');
const [selectedSlot, setSelectedSlot] = useState<{ courtId: string; startTime: string } | null>(
null
);
const [isManualBookingOpen, setIsManualBookingOpen] = useState(false);
const [urlCopied, setUrlCopied] = useState(false);
const [bookingToCancel, setBookingToCancel] = useState<AdminBooking | null>(null);
@@ -310,6 +314,7 @@ export function HomePage() {
) {
setSelectedCourtId('');
setSelectedStartTime('');
setSelectedSlot(null);
}
}, [manualAvailabilityQuery.data, selectedCourtId]);
@@ -320,11 +325,13 @@ export function HomePage() {
useEffect(() => {
if (!selectedCourt) {
setSelectedStartTime('');
setSelectedSlot(null);
return;
}
if (!selectedCourt.availableSlots.some((slot) => slot.startTime === selectedStartTime)) {
setSelectedStartTime('');
setSelectedSlot(null);
}
}, [selectedCourt, selectedStartTime]);
@@ -418,6 +425,7 @@ export function HomePage() {
reset();
setSelectedCourtId('');
setSelectedStartTime('');
setSelectedSlot(null);
setIsManualBookingOpen(false);
await queryClient.invalidateQueries({ queryKey: ['admin-bookings', selectedComplex?.id] });
@@ -469,421 +477,401 @@ export function HomePage() {
);
}
return (
<main className="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
<div className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
<section className="space-y-6">
<section className="overflow-hidden rounded-2xl border border-border/70 bg-card p-6 shadow-sm sm:p-8">
<div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
<div className="space-y-4">
<div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
<span className="size-2 rounded-full bg-primary" />
Panel operativo
</div>
<div className="space-y-2">
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
{selectedComplex.complexSlug}
</p>
<h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
Panel de reservas
</h1>
<p className="max-w-2xl text-sm text-muted-foreground sm:text-base">
Gestioná turnos del día y futuros para {selectedComplex.complexName}.
</p>
</div>
<div className="flex flex-wrap gap-2">
<span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
{dashboardStats.today} hoy
</span>
<span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
{dashboardStats.confirmed} confirmadas
</span>
<span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
{dashboardStats.completed} cumplidas
</span>
</div>
</div>
const manualBookingDialog = (
<ResponsiveDialog
open={isManualBookingOpen}
onOpenChange={(open) => {
setIsManualBookingOpen(open);
if (!open) {
reset();
setManualDate(todayIso);
setSelectedSportId(undefined);
setSelectedCourtId('');
setSelectedStartTime('');
setSelectedSlot(null);
}
}}
>
<ResponsiveDialogTrigger asChild>
<Button className="w-full">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>
<div className="w-full max-w-md space-y-3">
<div className="rounded-2xl border border-border/70 bg-background p-4">
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
URL pública
</p>
<div className="mt-2 flex items-center gap-2">
<a
href={publicBookingUrl}
target="_blank"
rel="noopener noreferrer"
className="min-w-0 truncate text-sm text-foreground underline-offset-4 hover:underline"
>
{publicBookingUrl}
</a>
<button
type="button"
onClick={copyToClipboard}
className="text-muted-foreground transition-colors hover:text-foreground"
title="Copiar URL"
>
{urlCopied ? (
<Check className="h-4 w-4 text-emerald-500" />
) : (
<Copy className="h-4 w-4" />
)}
</button>
</div>
</div>
<form
id="manual-booking-form"
className="grid gap-4"
onSubmit={handleSubmit(onSubmitManualBooking)}
>
<div className="grid gap-3">
<Field>
<FieldLabel htmlFor="manualDate">Fecha</FieldLabel>
<DatePicker
value={fromIsoDateLocal(manualDate)}
onChange={(date) => {
const isoDate = date ? toIsoDateLocal(date) : todayIso;
setManualDate(isoDate);
setSelectedCourtId('');
setSelectedStartTime('');
setSelectedSlot(null);
}}
minDate={new Date()}
placeholder="Selecciona una fecha"
/>
</Field>
<ResponsiveDialog
open={isManualBookingOpen}
onOpenChange={(open) => {
setIsManualBookingOpen(open);
if (!open) {
reset();
setManualDate(todayIso);
setSelectedSportId(undefined);
setSelectedCourtId('');
setSelectedStartTime('');
}
{manualAvailabilityQuery.data?.sportSelectionRequired && (
<Field>
<FieldLabel>Deporte</FieldLabel>
<Select
value={selectedSportId ?? ''}
onValueChange={(value) => {
setSelectedSportId(value);
setSelectedCourtId('');
setSelectedStartTime('');
setSelectedSlot(null);
}}
>
<ResponsiveDialogTrigger asChild>
<Button className="w-full">Nueva reserva manual</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>
<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>
)}
<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?.courts && (
<Field>
<FieldLabel>Disponibilidad</FieldLabel>
<AvailabilityHeatMap
courts={manualAvailabilityQuery.data.courts}
selectedSlot={selectedSlot}
onSelectSlot={({ courtId, startTime }) => {
setSelectedCourtId(courtId);
setSelectedStartTime(startTime);
setSelectedSlot({ courtId, startTime });
}}
/>
</Field>
)}
</div>
{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>
)}
{manualAvailabilityQuery.isLoading && (
<p className="text-sm text-muted-foreground">Cargando horarios disponibles...</p>
)}
<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>
{manualAvailabilityQuery.isError && (
<p className="text-sm text-destructive">
{extractMessage(
manualAvailabilityQuery.error,
'No pudimos cargar disponibilidad para la reserva manual.'
)}
</p>
)}
<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>
<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>
{manualAvailabilityQuery.isLoading && (
<p className="text-sm text-muted-foreground">
Cargando horarios disponibles...
</p>
)}
<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>
{manualAvailabilityQuery.isError && (
<p className="text-sm text-destructive">
{extractMessage(
manualAvailabilityQuery.error,
'No pudimos cargar disponibilidad para la reserva manual.'
)}
</p>
)}
{createManualBookingMutation.isError && (
<p className="text-sm text-destructive">
{extractMessage(
createManualBookingMutation.error,
'No pudimos crear la reserva manual.'
)}
</p>
)}
</form>
<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>
<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>
);
<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>
const urlCard = (
<div className="group relative overflow-hidden rounded-2xl border border-blue-200/60 bg-blue-50/50 p-5">
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/80 to-blue-100/30" />
<div className="relative flex items-center justify-between gap-4">
<div className="min-w-0 flex-1">
<p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-blue-600/70">
Reserva online
</p>
<a
href={publicBookingUrl}
target="_blank"
rel="noopener noreferrer"
className="mt-1 block truncate text-sm font-medium text-blue-700 underline-offset-2 hover:underline"
>
{publicBookingUrl}
</a>
</div>
<button
type="button"
onClick={copyToClipboard}
className="relative flex shrink-0 items-center gap-2 rounded-lg bg-blue-500/10 px-3 py-2 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-500/20"
title="Copiar URL"
>
{urlCopied ? (
<>
<Check className="size-4" />
<span>Copiado</span>
</>
) : (
<>
<Copy className="size-4" />
<span>Copiar</span>
</>
)}
</button>
</div>
</div>
);
{createManualBookingMutation.isError && (
<p className="text-sm text-destructive">
{extractMessage(
createManualBookingMutation.error,
'No pudimos crear la reserva manual.'
)}
</p>
)}
</form>
const headerPills = (
<div className="flex flex-wrap gap-2">
<span className="rounded-full border border-emerald-200/60 bg-emerald-50/60 px-3 py-1 text-xs font-medium text-emerald-700">
{dashboardStats.today} hoy
</span>
<span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
{dashboardStats.confirmed} confirmadas
</span>
<span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
{dashboardStats.completed} cumplidas
</span>
</div>
);
<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>
const dateSelector = (
<div className="flex flex-col gap-2 sm:flex-row sm:items-end">
<Field>
<FieldLabel htmlFor="fromDate">Desde</FieldLabel>
<DatePicker
value={fromIsoDateLocal(fromDate)}
onChange={(date) => {
const isoDate = date ? toIsoDateLocal(date) : todayIso;
setFromDate(isoDate);
}}
disabled={(date) => {
const today = new Date();
today.setHours(0, 0, 0, 0);
const checkDate = new Date(date);
checkDate.setHours(0, 0, 0, 0);
return checkDate < today;
}}
placeholder="Selecciona"
/>
</Field>
</div>
);
return (
<main className="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
<div className="space-y-5">
<div className="grid gap-4 lg:grid-cols-[1fr_1fr]">
<section className="overflow-hidden rounded-2xl border border-border/70 bg-card p-5 sm:p-6">
<div className="space-y-4">
<div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
<span className="size-2 rounded-full bg-emerald-500" />
{selectedComplex.complexSlug}
</div>
<div className="space-y-2">
<h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
Panel de reservas
</h1>
<p className="text-sm text-muted-foreground">
Gestioná turnos de {selectedComplex.complexName}
</p>
</div>
{headerPills}
</div>
</section>
<section className="rounded-2xl border border-border/70 bg-card p-5 shadow-sm sm:p-6">
<div className="flex flex-col gap-3 sm:flex-row sm:items-end">
<Field>
<FieldLabel htmlFor="fromDate">Mostrar desde</FieldLabel>
<DatePicker
value={fromIsoDateLocal(fromDate)}
onChange={(date) => {
const isoDate = date ? toIsoDateLocal(date) : todayIso;
setFromDate(isoDate);
}}
disabled={(date) => {
const today = new Date();
today.setHours(0, 0, 0, 0);
const checkDate = new Date(date);
checkDate.setHours(0, 0, 0, 0);
return checkDate < today;
}}
placeholder="Selecciona una fecha"
/>
</Field>
</div>
<div className="space-y-4">
{urlCard}
{manualBookingDialog}
</div>
</div>
{bookingsQuery.isLoading && (
<p className="mt-4 text-sm text-muted-foreground">Cargando reservas...</p>
)}
<section className="rounded-2xl border border-border/70 bg-card p-4 sm:p-5">
{dateSelector}
{bookingsQuery.isError && (
<p className="mt-4 text-sm text-destructive">
{extractMessage(bookingsQuery.error, 'No pudimos cargar las reservas.')}
</p>
)}
{bookingsQuery.isLoading && (
<p className="mt-4 text-sm text-muted-foreground">Cargando reservas...</p>
)}
{!bookingsQuery.isLoading && !bookingsQuery.isError && groupedBookings.length === 0 && (
<p className="mt-4 text-sm text-muted-foreground">
No hay reservas para la fecha seleccionada en adelante.
</p>
)}
{bookingsQuery.isError && (
<p className="mt-4 text-sm text-destructive">
{extractMessage(bookingsQuery.error, 'No pudimos cargar las reservas.')}
</p>
)}
<div className="mt-4 space-y-4">
{groupedBookings.map(([date, bookings]) => (
<article key={date} className="rounded-2xl border border-border/70 bg-card p-4">
<div className="flex items-center justify-between gap-3">
<h2 className="text-sm font-semibold capitalize">
{formatDateLabel(date, todayIso)}
</h2>
<span className="rounded-full border border-border/70 bg-background px-3 py-1 text-[11px] font-medium text-muted-foreground">
{bookings.length} reservas
</span>
</div>
<div className="mt-3 space-y-3">
{bookings.map((booking) => {
{!bookingsQuery.isLoading && !bookingsQuery.isError && groupedBookings.length === 0 && (
<p className="mt-4 text-sm text-muted-foreground">
No hay reservas para la fecha seleccionada.
</p>
)}
<div className="mt-4 space-y-6">
{groupedBookings.map(([date, bookings]) => (
<article key={date}>
<div className="flex items-center gap-3">
<h2 className="text-sm font-semibold capitalize">
{formatDateLabel(date, todayIso)}
</h2>
<div className="h-px flex-1 border-t border-dashed border-border/40" />
<span className="shrink-0 rounded-full border border-border/70 bg-background px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground">
{bookings.length}
</span>
</div>
<div className="mt-3 space-y-2">
{bookings
.slice()
.sort((a, b) => a.startTime.localeCompare(b.startTime))
.map((booking) => {
const effectiveStatus = getEffectiveStatus(booking);
const canManage =
booking.status === 'CONFIRMED' && effectiveStatus === 'CONFIRMED';
const isMutating = updateStatusMutation.isPending;
const now = new Date();
const bookingStart = new Date(`${date}T${booking.startTime}:00`);
const bookingEnd = new Date(`${date}T${booking.endTime}:00`);
const isPast = bookingEnd < now;
const isNow = date === todayIso && bookingStart <= now && bookingEnd > now;
return (
<div
key={booking.id}
className="flex flex-col gap-3 rounded-2xl border border-border/70 bg-card p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between"
className={[
'group flex items-center justify-between gap-3 rounded-xl border border-border/70 bg-card/60 p-3.5 transition-all hover:bg-muted/50',
isPast && 'opacity-50',
isNow && 'border-l-2 border-l-emerald-500 bg-emerald-50/30',
].join(' ')}
>
<div className="space-y-1">
<div className="flex flex-wrap items-center gap-2">
<p className="text-sm font-medium text-foreground">
{booking.startTime} - {booking.endTime} · {booking.courtName}
</p>
<StatusBadge
status={effectiveStatus}
label={effectiveStatusLabel(effectiveStatus)}
/>
<div className="flex min-w-0 flex-1 items-center gap-3">
<div className="flex w-14 flex-col items-center">
<span className="text-sm font-medium tabular-nums">
{booking.startTime}
</span>
<span className="text-[11px] text-muted-foreground">
{booking.endTime}
</span>
</div>
<div className="flex flex-1 min-w-0">
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium">{booking.courtName}</p>
<p className="truncate text-xs text-muted-foreground">
{booking.customerName}{' '}
<span className="text-muted-foreground/60">
· {booking.customerPhone}
</span>
</p>
</div>
</div>
<p className="text-xs text-muted-foreground">
{booking.customerName} ({booking.customerPhone}) · Código{' '}
{booking.bookingCode}
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
{canManage && (
<>
<Button
type="button"
size="sm"
variant="outline"
disabled={isMutating}
onClick={() => {
updateStatusMutation.mutate({
bookingId: booking.id,
status: 'COMPLETED',
});
}}
>
Marcar cumplida
</Button>
<Button
type="button"
size="sm"
variant="destructive"
disabled={isMutating}
onClick={() => {
handleCancelBooking(booking);
}}
>
Cancelar
</Button>
</>
)}
<div className="flex shrink-0 items-center gap-2">
<StatusBadge
status={effectiveStatus}
label={effectiveStatusLabel(effectiveStatus)}
/>
<div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
{canManage && !isMutating && (
<>
<Button
type="button"
size="icon-xs"
variant="ghost"
title="Marcar cumplida"
onClick={() => {
updateStatusMutation.mutate({
bookingId: booking.id,
status: 'COMPLETED',
});
}}
>
<Check className="size-3.5" />
</Button>
<Button
type="button"
size="icon-xs"
variant="ghost"
title="Cancelar"
onClick={() => {
handleCancelBooking(booking);
}}
>
×
</Button>
</>
)}
</div>
</div>
</div>
);
})}
</div>
</article>
))}
</div>
</div>
</article>
))}
</div>
{updateStatusMutation.isError && (
<p className="mt-4 text-sm text-destructive">
{extractMessage(updateStatusMutation.error, 'No pudimos actualizar la reserva.')}
</p>
)}
</section>
{updateStatusMutation.isError && (
<p className="mt-4 text-sm text-destructive">
{extractMessage(updateStatusMutation.error, 'No pudimos actualizar la reserva.')}
</p>
)}
</section>
<aside className="space-y-6 xl:sticky xl:top-24 h-fit self-start">
<section className="rounded-2xl border border-border/70 bg-card p-5 shadow-sm sm:p-6">
<h2 className="text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Lectura rápida
</h2>
<div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
<div className="rounded-2xl border border-border/70 bg-background p-4">
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Total</p>
<p className="mt-2 text-2xl font-semibold">{dashboardStats.total}</p>
</div>
<div className="rounded-2xl border border-border/70 bg-background p-4">
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Hoy</p>
<p className="mt-2 text-2xl font-semibold">{dashboardStats.today}</p>
</div>
<div className="rounded-2xl border border-border/70 bg-background p-4">
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
Confirmadas
</p>
<p className="mt-2 text-2xl font-semibold">{dashboardStats.confirmed}</p>
</div>
<div className="rounded-2xl border border-border/70 bg-background p-4">
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
Cumplidas
</p>
<p className="mt-2 text-2xl font-semibold">{dashboardStats.completed}</p>
</div>
</div>
</section>
</aside>
</div>
{bookingToCancel && (

60
apps/frontend/src/features/public-booking/public-booking-page.tsx
View File

@@ -1,3 +1,4 @@
import AvailabilityHeatMap from '@/components/ui/availability-heatmap';
import { Button } from '@/components/ui/button';
import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
@@ -645,60 +646,11 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
</p>
)}
<div className="space-y-4">
{visibleCourts.map((court) => (
<article
key={court.courtId}
className="rounded-2xl border border-border/70 bg-background p-4 shadow-sm"
>
<div className="mb-4 flex items-start justify-between gap-3">
<div>
<p className="text-sm font-semibold text-foreground sm:text-base">
{court.courtName}
</p>
<p className="text-xs text-muted-foreground">
{court.sport.name} · Turnos de {court.slotDurationMinutes} min
</p>
</div>
<span className="rounded-full border border-border/70 bg-card px-3 py-1 text-[11px] font-medium text-muted-foreground">
{court.availableSlots.length} horarios
</span>
</div>
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
{court.availableSlots.map((slot) => {
const isSelected =
selectedSlot?.courtId === court.courtId &&
selectedSlot.startTime === slot.startTime;
return (
<button
key={`${court.courtId}-${slot.startTime}`}
type="button"
onClick={() => {
setSelectedSlot({
courtId: court.courtId,
courtName: court.courtName,
sportId: court.sport.id,
sportName: court.sport.name,
startTime: slot.startTime,
endTime: slot.endTime,
});
}}
className={`h-11 rounded-xl border text-sm font-medium transition-all ${
isSelected
? 'border-primary bg-primary text-primary-foreground shadow-sm'
: 'border-border/70 bg-card hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-sm'
}`}
>
{slot.startTime}
</button>
);
})}
</div>
</article>
))}
</div>
<AvailabilityHeatMap
courts={visibleCourts}
selectedSlot={selectedSlot}
onSelectSlot={setSelectedSlot}
/>
</section>
</section>