refactor: update home page UI to v2 patterns and introduce availability heatmap component
This commit is contained in:
Jose Selesan
@@ -117,50 +117,73 @@
|
||||
|
||||
---
|
||||
|
||||
## Home Page Patterns
|
||||
## Home Page Patterns (v2)
|
||||
|
||||
### Structure
|
||||
- Header: Title + DatePicker chip + Action button (3-column)
|
||||
- Metrics Grid: 4-column stats with semantic colors
|
||||
- Next Booking: Prominent card with emerald accent
|
||||
- Timeline: Grouped by date with "now" indicator
|
||||
- Header + URL Card: 2-column grid (lg:)
|
||||
- Main: Timeline de reservas
|
||||
- Sidebar: Stats grid consolidado (sticky)
|
||||
|
||||
### DatePicker Chip
|
||||
### URL Card (destacada)
|
||||
```tsx
|
||||
<div className="flex items-center gap-1 rounded-md border bg-card px-2 py-1">
|
||||
<Field>
|
||||
<DatePicker value={...} onChange={...} placeholder="" />
|
||||
</Field>
|
||||
{isToday && (
|
||||
<span className="text-xs font-medium text-emerald-600">Hoy</span>
|
||||
)}
|
||||
</div>
|
||||
```
|
||||
|
||||
### Metrics Grid
|
||||
```tsx
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="rounded-lg border bg-card p-3">
|
||||
<p className="text-xs font-medium text-muted-foreground">Total</p>
|
||||
<p className="mt-1 text-2xl font-semibold tracking-tight">{value}</p>
|
||||
<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={url} className="mt-1 block truncate text-sm font-medium text-blue-700 underline-offset-2 hover:underline">
|
||||
{url}
|
||||
</a>
|
||||
</div>
|
||||
<button 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">
|
||||
<Copy className="size-4" />
|
||||
<span>Copiar</span>
|
||||
</button>
|
||||
</div>
|
||||
// ... confirmed (emerald), completed (sky), no-show (orange)
|
||||
</div>
|
||||
```
|
||||
|
||||
### Timeline Item
|
||||
### Stats Pills (header)
|
||||
```tsx
|
||||
<span className="rounded-full border border-emerald-200/60 bg-emerald-50/60 px-3 py-1 text-xs font-medium text-emerald-700">
|
||||
{count} hoy
|
||||
</span>
|
||||
```
|
||||
|
||||
### Stats Sidebar (grid 2x2)
|
||||
```tsx
|
||||
<section className="space-y-3 rounded-2xl border border-border/70 bg-card p-4">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-[0.28em] text-muted-foreground">
|
||||
Resumen
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="rounded-xl border border-border/50 bg-background/80 p-3">
|
||||
<p className="text-xs text-muted-foreground">Total</p>
|
||||
<p className="mt-1 text-xl font-semibold tracking-tight">{value}</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-emerald-200/40 bg-emerald-50/40 p-3">
|
||||
<p className="text-xs text-emerald-700/80">Hoy</p>
|
||||
<p className="mt-1 text-xl font-semibold tracking-tight text-emerald-700">{value}</p>
|
||||
</div>
|
||||
{/* ... confirmed (blue), completed (sky) */}
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### Timeline Item (v2 - mejorado)
|
||||
```tsx
|
||||
<div className={[
|
||||
'group flex items-center justify-between gap-3 rounded-md border p-2.5 transition-colors hover:bg-muted/50',
|
||||
isPast && 'opacity-60',
|
||||
'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="flex min-w-0 flex-1 items-center gap-3">
|
||||
<div className="flex w-16 shrink-0 flex-col items-center">
|
||||
<div className="flex w-14 flex-col items-center">
|
||||
<span className="text-sm font-medium tabular-nums">{startTime}</span>
|
||||
<span className="text-xs text-muted-foreground">{endTime}</span>
|
||||
<span className="text-[11px] text-muted-foreground">{endTime}</span>
|
||||
</div>
|
||||
<ChevronRight className="size-4 shrink-0 text-muted-foreground/30" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">{courtName}</p>
|
||||
<p className="truncate text-xs text-muted-foreground">{customer}</p>
|
||||
@@ -169,18 +192,20 @@
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<StatusBadge status={...} />
|
||||
<div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<Button size="icon-xs" variant="ghost">...</Button>
|
||||
<Button size="icon-xs" variant="ghost" title="Marcar cumplida"><Check className="size-3.5" /></Button>
|
||||
<Button size="icon-xs" variant="ghost" title="Cancelar">×</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Actions Hover Pattern
|
||||
### Date Group Header
|
||||
```tsx
|
||||
<div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<Button size="icon-xs" variant="ghost" title="Marcar cumplida">
|
||||
<Check className="size-3.5" />
|
||||
</Button>
|
||||
<Button size="icon-xs" variant="ghost" title="Cancelar">×</Button>
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="text-sm font-semibold capitalize">{dateLabel}</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">
|
||||
{count}
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
113
apps/frontend/src/components/ui/availability-heatmap.tsx
Normal file
113
apps/frontend/src/components/ui/availability-heatmap.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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 && (
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user