New booking panel
This commit is contained in:
Jose Selesan
@@ -0,0 +1,285 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DatePicker } from '@/components/ui/date-picker';
|
||||
import { Field, FieldError, FieldLabel } from '@/components/ui/field';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
ResponsiveDialog,
|
||||
ResponsiveDialogClose,
|
||||
ResponsiveDialogContent,
|
||||
ResponsiveDialogDescription,
|
||||
ResponsiveDialogFooter,
|
||||
ResponsiveDialogHeader,
|
||||
ResponsiveDialogTitle,
|
||||
} from '@/components/ui/responsive-dialog';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { useBooking } from '../booking-provider';
|
||||
import {
|
||||
fromIsoDateLocal,
|
||||
getDayOfWeek,
|
||||
minutesToTime,
|
||||
timeToMinutes,
|
||||
toIsoDateLocal,
|
||||
} from '../lib/booking-time';
|
||||
|
||||
const bookingFormSchema = z.object({
|
||||
customerName: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(2, 'Ingresa un nombre válido.')
|
||||
.max(120, 'El nombre no puede superar los 120 caracteres.'),
|
||||
customerPhone: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(6, 'Ingresa un telefono válido.')
|
||||
.max(30, 'El telefono no puede superar los 30 caracteres.'),
|
||||
});
|
||||
|
||||
type BookingForm = z.infer<typeof bookingFormSchema>;
|
||||
|
||||
export function BookingCreateDialog() {
|
||||
const {
|
||||
courts,
|
||||
bookings,
|
||||
selectedDate,
|
||||
selectedSlot,
|
||||
isCreateBookingOpen,
|
||||
createBookingError,
|
||||
isCreatingBooking,
|
||||
closeCreateBooking,
|
||||
createBooking,
|
||||
} = useBooking();
|
||||
|
||||
const [date, setDate] = useState(selectedSlot?.date ?? selectedDate);
|
||||
const [sportId, setSportId] = useState(selectedSlot?.sportId ?? 'all');
|
||||
const [courtId, setCourtId] = useState(selectedSlot?.courtId ?? '');
|
||||
const [startTime, setStartTime] = useState(selectedSlot?.startTime ?? '');
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors, isValid },
|
||||
} = useForm<BookingForm>({
|
||||
resolver: zodResolver(bookingFormSchema),
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
customerName: '',
|
||||
customerPhone: '',
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!isCreateBookingOpen) return;
|
||||
|
||||
setDate(selectedSlot?.date ?? selectedDate);
|
||||
setSportId(selectedSlot?.sportId ?? 'all');
|
||||
setCourtId(selectedSlot?.courtId ?? '');
|
||||
setStartTime(selectedSlot?.startTime ?? '');
|
||||
reset();
|
||||
}, [isCreateBookingOpen, reset, selectedDate, selectedSlot]);
|
||||
|
||||
const sports = [...new Map(courts.map((court) => [court.sport.id, court.sport])).values()];
|
||||
const filteredCourts = useMemo(() => {
|
||||
if (sportId === 'all') return courts;
|
||||
return courts.filter((court) => court.sportId === sportId);
|
||||
}, [courts, sportId]);
|
||||
const selectedCourt = courts.find((court) => court.id === courtId);
|
||||
const availableStartTimes = useMemo(() => {
|
||||
if (!selectedCourt) return [];
|
||||
|
||||
const times: string[] = [];
|
||||
const dayOfWeek = getDayOfWeek(date);
|
||||
const dayAvailability = selectedCourt.availability
|
||||
.filter((range) => range.dayOfWeek === dayOfWeek)
|
||||
.sort((a, b) => timeToMinutes(a.startTime) - timeToMinutes(b.startTime));
|
||||
const courtBookings = bookings.filter(
|
||||
(booking) =>
|
||||
booking.date === date &&
|
||||
booking.courtId === selectedCourt.id &&
|
||||
booking.status !== 'CANCELLED'
|
||||
);
|
||||
|
||||
for (const range of dayAvailability) {
|
||||
const start = timeToMinutes(range.startTime);
|
||||
const end = timeToMinutes(range.endTime);
|
||||
|
||||
for (
|
||||
let minute = start;
|
||||
minute + selectedCourt.slotDurationMinutes <= end;
|
||||
minute += selectedCourt.slotDurationMinutes
|
||||
) {
|
||||
const slotEnd = minute + selectedCourt.slotDurationMinutes;
|
||||
const isBooked = courtBookings.some((booking) => {
|
||||
const bookingStart = timeToMinutes(booking.startTime);
|
||||
const bookingEnd = timeToMinutes(booking.endTime);
|
||||
return minute < bookingEnd && slotEnd > bookingStart;
|
||||
});
|
||||
|
||||
if (!isBooked) {
|
||||
times.push(minutesToTime(minute));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return times;
|
||||
}, [bookings, date, selectedCourt]);
|
||||
|
||||
useEffect(() => {
|
||||
if (startTime && !availableStartTimes.includes(startTime)) {
|
||||
setStartTime('');
|
||||
}
|
||||
}, [availableStartTimes, startTime]);
|
||||
|
||||
const onSubmit = async (values: BookingForm) => {
|
||||
await createBooking({
|
||||
courtId,
|
||||
date,
|
||||
startTime,
|
||||
customerName: values.customerName,
|
||||
customerPhone: values.customerPhone,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ResponsiveDialog
|
||||
open={isCreateBookingOpen}
|
||||
onOpenChange={(open) => !open && closeCreateBooking()}
|
||||
>
|
||||
<ResponsiveDialogContent
|
||||
className="data-[variant=dialog]:max-w-lg"
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
>
|
||||
<ResponsiveDialogHeader>
|
||||
<ResponsiveDialogTitle>Nueva reserva</ResponsiveDialogTitle>
|
||||
<ResponsiveDialogDescription>
|
||||
Crea un turno para atención telefónica o mostrador.
|
||||
</ResponsiveDialogDescription>
|
||||
</ResponsiveDialogHeader>
|
||||
|
||||
<form id="booking-create-form" className="grid gap-4" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<Field>
|
||||
<FieldLabel>Fecha</FieldLabel>
|
||||
<DatePicker
|
||||
value={fromIsoDateLocal(date)}
|
||||
onChange={(nextDate) => {
|
||||
setDate(nextDate ? toIsoDateLocal(nextDate) : selectedDate);
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Deporte</FieldLabel>
|
||||
<Select
|
||||
value={sportId}
|
||||
onValueChange={(value) => {
|
||||
setSportId(value);
|
||||
setCourtId('');
|
||||
setStartTime('');
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todos</SelectItem>
|
||||
{sports.map((sport) => (
|
||||
<SelectItem key={sport.id} value={sport.id}>
|
||||
{sport.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Cancha</FieldLabel>
|
||||
<Select
|
||||
value={courtId}
|
||||
onValueChange={(value) => {
|
||||
setCourtId(value);
|
||||
setStartTime('');
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecciona una cancha" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{filteredCourts.map((court) => (
|
||||
<SelectItem key={court.id} value={court.id}>
|
||||
{court.name} · {court.sport.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Horario</FieldLabel>
|
||||
<Select value={startTime} onValueChange={setStartTime}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecciona un horario" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableStartTimes.map((time) => (
|
||||
<SelectItem key={time} value={time}>
|
||||
{time}
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
{createBookingError && <p className="text-sm text-destructive">{createBookingError}</p>}
|
||||
</form>
|
||||
|
||||
<ResponsiveDialogFooter>
|
||||
<ResponsiveDialogClose asChild>
|
||||
<Button variant="outline">Cancelar</Button>
|
||||
</ResponsiveDialogClose>
|
||||
<Button
|
||||
type="submit"
|
||||
form="booking-create-form"
|
||||
disabled={!isValid || isCreatingBooking || !courtId || !startTime}
|
||||
>
|
||||
{isCreatingBooking ? 'Guardando...' : 'Crear reserva'}
|
||||
</Button>
|
||||
</ResponsiveDialogFooter>
|
||||
</ResponsiveDialogContent>
|
||||
</ResponsiveDialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
import { CalendarDays, Download, Drill, ShieldCheck, UsersRound } from 'lucide-react';
|
||||
import { useBooking } from '../booking-provider';
|
||||
import { formatBookingDate, toIsoDateLocal } from '../lib/booking-time';
|
||||
|
||||
export function BookingDaySummary() {
|
||||
const { selectedDate, summary } = useBooking();
|
||||
|
||||
return (
|
||||
<section className="rounded-lg border bg-card/85 p-5 shadow-sm xl:col-span-3">
|
||||
<div className="mb-4">
|
||||
<h2 className="text-base font-semibold">Resumen del día</h2>
|
||||
<p className="mt-1 text-sm capitalize text-muted-foreground">
|
||||
{formatBookingDate(selectedDate, { year: 'numeric' })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-4">
|
||||
<SummaryCard
|
||||
label="Total de bloques"
|
||||
value={summary.totalReservations}
|
||||
icon={CalendarDays}
|
||||
className="border-border bg-background/45"
|
||||
/>
|
||||
<SummaryCard
|
||||
label="Libres"
|
||||
value={summary.freeSlots}
|
||||
detail={`${summary.freePercent}% del total`}
|
||||
icon={UsersRound}
|
||||
className="border-primary/30 bg-primary/10 text-primary"
|
||||
/>
|
||||
<SummaryCard
|
||||
label="Reservados"
|
||||
value={summary.reservedSlots}
|
||||
detail={`${summary.reservedPercent}% del total`}
|
||||
icon={ShieldCheck}
|
||||
className="border-reserved/35 bg-reserved/10 text-reserved"
|
||||
/>
|
||||
<SummaryCard
|
||||
label="Mantenimiento"
|
||||
value={summary.maintenanceSlots}
|
||||
detail={`${summary.maintenancePercent}% del total`}
|
||||
icon={Drill}
|
||||
className="border-maintenance/35 bg-maintenance/10 text-maintenance"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface SummaryCardProps {
|
||||
label: string;
|
||||
value: number;
|
||||
detail?: string;
|
||||
icon: typeof CalendarDays;
|
||||
className: string;
|
||||
}
|
||||
|
||||
function SummaryCard({ label, value, detail, icon: Icon, className }: SummaryCardProps) {
|
||||
return (
|
||||
<article className={`rounded-lg border p-4 ${className}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-transparent">
|
||||
<Icon className="size-5" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm text-muted-foreground">{label}</p>
|
||||
<p className="text-2xl font-semibold leading-tight">{value}</p>
|
||||
{detail && <p className="mt-1 truncate text-xs text-muted-foreground">{detail}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
export function BookingQuickActions() {
|
||||
const { selectedDate, selectedStatus, setSelectedDate, setSelectedStatus, exportDayReport } =
|
||||
useBooking();
|
||||
const todayIso = toIsoDateLocal(new Date());
|
||||
const isViewingTodayReservations = selectedDate === todayIso && selectedStatus === 'reserved';
|
||||
const isViewingMaintenance = selectedStatus === 'maintenance';
|
||||
|
||||
return (
|
||||
<section className="rounded-lg border bg-card/85 p-5 shadow-sm">
|
||||
<h2 className="text-base font-semibold">Acciones rápidas</h2>
|
||||
<div className="mt-3 grid gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedDate(todayIso);
|
||||
setSelectedStatus(isViewingTodayReservations ? 'all' : 'reserved');
|
||||
}}
|
||||
aria-pressed={isViewingTodayReservations}
|
||||
className="flex h-10 items-center gap-3 rounded-md border bg-background/45 px-3 text-left text-sm transition-colors hover:bg-muted aria-pressed:border-reserved/50 aria-pressed:bg-reserved/10"
|
||||
>
|
||||
<CalendarDays className="size-4 text-muted-foreground" />
|
||||
{isViewingTodayReservations ? 'Ver todos los estados' : 'Ver reservas de hoy'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedStatus(isViewingMaintenance ? 'all' : 'maintenance')}
|
||||
aria-pressed={isViewingMaintenance}
|
||||
className="flex h-10 items-center gap-3 rounded-md border bg-background/45 px-3 text-left text-sm transition-colors hover:bg-muted aria-pressed:border-maintenance/50 aria-pressed:bg-maintenance/10"
|
||||
>
|
||||
<Drill className="size-4 text-maintenance" />
|
||||
{isViewingMaintenance ? 'Ver todos los estados' : 'Ver mantenimiento'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={exportDayReport}
|
||||
className="flex h-10 items-center gap-3 rounded-md border bg-background/45 px-3 text-left text-sm transition-colors hover:bg-muted"
|
||||
>
|
||||
<Download className="size-4 text-primary" />
|
||||
Exportar reporte
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useBooking } from '../booking-provider';
|
||||
|
||||
export function BookingHeader() {
|
||||
const { complex } = useBooking();
|
||||
|
||||
return (
|
||||
<section>
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-normal text-foreground">
|
||||
Panel de Reservas
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Gestiona las canchas de {complex.complexName}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
const items = [
|
||||
{ label: 'Libre', className: 'bg-primary' },
|
||||
{ label: 'Reservado', className: 'bg-reserved' },
|
||||
{ label: 'Mantenimiento', className: 'bg-maintenance' },
|
||||
];
|
||||
|
||||
export function BookingStatusLegend() {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-5 text-sm text-muted-foreground">
|
||||
{items.map((item) => (
|
||||
<span key={item.label} className="inline-flex items-center gap-2">
|
||||
<span className={`size-3 rounded-full ${item.className}`} />
|
||||
{item.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,299 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ChevronLeft, ChevronRight, Dumbbell, Plus, Users } from 'lucide-react';
|
||||
import { useBooking } from '../booking-provider';
|
||||
import type { BookingCourtSchedule, BookingTimelineSegment } from '../booking.types';
|
||||
import { timeToMinutes } from '../lib/booking-time';
|
||||
import { BookingStatusLegend } from './booking-status-legend';
|
||||
|
||||
const courtInfoWidth = 220;
|
||||
const hourWidth = 104;
|
||||
|
||||
export function BookingTimeline() {
|
||||
const {
|
||||
schedules,
|
||||
timelineHours,
|
||||
visibleTimeRange,
|
||||
currentTime,
|
||||
isLoading,
|
||||
isError,
|
||||
errorMessage,
|
||||
} = useBooking();
|
||||
|
||||
const rangeStart = timeToMinutes(visibleTimeRange.start);
|
||||
const rangeEnd = timeToMinutes(visibleTimeRange.end);
|
||||
const totalMinutes = rangeEnd - rangeStart;
|
||||
const gridWidth = Math.max((timelineHours.length - 1) * hourWidth, 760);
|
||||
const timelineMarks = timelineHours.map((hour) => ({
|
||||
hour,
|
||||
left: ((timeToMinutes(hour) - rangeStart) / totalMinutes) * 100,
|
||||
}));
|
||||
|
||||
return (
|
||||
<section className="overflow-hidden rounded-lg border bg-card/85 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-4 border-b px-4 py-4">
|
||||
<BookingStatusLegend />
|
||||
<div className="hidden items-center gap-2 md:flex">
|
||||
<Button type="button" size="icon-sm" variant="ghost">
|
||||
<ChevronLeft className="size-4" />
|
||||
</Button>
|
||||
<Button type="button" size="icon-sm" variant="ghost">
|
||||
<ChevronRight className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div className="px-4 py-10 text-sm text-muted-foreground">Cargando reservas...</div>
|
||||
)}
|
||||
|
||||
{isError && !isLoading && (
|
||||
<div className="px-4 py-10 text-sm text-destructive">{errorMessage}</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && schedules.length === 0 && (
|
||||
<div className="px-4 py-10 text-sm text-muted-foreground">
|
||||
No hay canchas para los filtros seleccionados.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && schedules.length > 0 && (
|
||||
<div className="booking-scrollbar overflow-x-auto overflow-y-hidden">
|
||||
<div className="relative min-w-full" style={{ width: courtInfoWidth + gridWidth }}>
|
||||
<TimelineHeader
|
||||
timelineMarks={timelineMarks}
|
||||
courtInfoWidth={courtInfoWidth}
|
||||
gridWidth={gridWidth}
|
||||
/>
|
||||
|
||||
<div className="divide-y">
|
||||
{schedules.map((schedule) => (
|
||||
<BookingCourtRow
|
||||
key={schedule.court.id}
|
||||
schedule={schedule}
|
||||
courtInfoWidth={courtInfoWidth}
|
||||
gridWidth={gridWidth}
|
||||
rangeStart={rangeStart}
|
||||
totalMinutes={totalMinutes}
|
||||
timelineMarks={timelineMarks}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{currentTime && (
|
||||
<CurrentTimeIndicator
|
||||
time={currentTime}
|
||||
courtInfoWidth={courtInfoWidth}
|
||||
gridWidth={gridWidth}
|
||||
rangeStart={rangeStart}
|
||||
totalMinutes={totalMinutes}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface TimelineHeaderProps {
|
||||
timelineMarks: Array<{ hour: string; left: number }>;
|
||||
courtInfoWidth: number;
|
||||
gridWidth: number;
|
||||
}
|
||||
|
||||
function TimelineHeader({ timelineMarks, courtInfoWidth, gridWidth }: TimelineHeaderProps) {
|
||||
return (
|
||||
<div
|
||||
className="sticky top-0 z-20 grid border-b bg-card/95"
|
||||
style={{ gridTemplateColumns: `${courtInfoWidth}px ${gridWidth}px` }}
|
||||
>
|
||||
<div className="sticky left-0 z-30 border-r bg-card/95 px-4 py-3 shadow-[8px_0_18px_-18px_oklch(0_0_0/0.45)]" />
|
||||
<div className="relative h-12">
|
||||
{timelineMarks.map((mark) => (
|
||||
<div
|
||||
key={mark.hour}
|
||||
className="absolute top-0 flex h-full items-center border-l px-3 text-sm text-muted-foreground first:border-l-0"
|
||||
style={{ left: `${mark.left}%` }}
|
||||
>
|
||||
{mark.hour}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface BookingCourtRowProps {
|
||||
schedule: BookingCourtSchedule;
|
||||
courtInfoWidth: number;
|
||||
gridWidth: number;
|
||||
rangeStart: number;
|
||||
totalMinutes: number;
|
||||
timelineMarks: Array<{ hour: string; left: number }>;
|
||||
}
|
||||
|
||||
function BookingCourtRow({
|
||||
schedule,
|
||||
courtInfoWidth,
|
||||
gridWidth,
|
||||
rangeStart,
|
||||
totalMinutes,
|
||||
timelineMarks,
|
||||
}: BookingCourtRowProps) {
|
||||
return (
|
||||
<div
|
||||
className="grid min-h-[96px]"
|
||||
style={{ gridTemplateColumns: `${courtInfoWidth}px ${gridWidth}px` }}
|
||||
>
|
||||
<BookingCourtInfo schedule={schedule} />
|
||||
<div className="relative bg-background/20 py-4">
|
||||
<div className="absolute inset-y-0 left-0 right-0 opacity-70">
|
||||
{timelineMarks.map((mark) => (
|
||||
<span
|
||||
key={mark.hour}
|
||||
className="absolute top-0 h-full border-l first:border-l-0"
|
||||
style={{ left: `${mark.left}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative h-16">
|
||||
{schedule.segments.map((segment) => (
|
||||
<BookingSlotBlock
|
||||
key={segment.id}
|
||||
segment={segment}
|
||||
schedule={schedule}
|
||||
rangeStart={rangeStart}
|
||||
totalMinutes={totalMinutes}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BookingCourtInfo({ schedule }: { schedule: BookingCourtSchedule }) {
|
||||
return (
|
||||
<div className="sticky left-0 z-10 flex items-center gap-3 border-r bg-card/95 px-4 py-4 shadow-[8px_0_18px_-18px_oklch(0_0_0/0.45)]">
|
||||
<div className="flex size-12 shrink-0 items-center justify-center rounded-lg border border-primary/40 bg-primary/15 text-primary">
|
||||
<Dumbbell className="size-6" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h2 className="truncate text-base font-semibold">{schedule.court.name}</h2>
|
||||
<p className="truncate text-sm text-muted-foreground">{schedule.court.sport.name}</p>
|
||||
<div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span className="size-2 rounded-full bg-primary" />
|
||||
{schedule.metrics.free}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span className="size-2 rounded-full bg-reserved" />
|
||||
{schedule.metrics.reserved}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span className="size-2 rounded-full bg-maintenance" />
|
||||
{schedule.metrics.maintenance}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface BookingSlotBlockProps {
|
||||
segment: BookingTimelineSegment;
|
||||
schedule: BookingCourtSchedule;
|
||||
rangeStart: number;
|
||||
totalMinutes: number;
|
||||
}
|
||||
|
||||
function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: BookingSlotBlockProps) {
|
||||
const { openCreateBooking, updateBookingStatus } = useBooking();
|
||||
const left = ((segment.startMinutes - rangeStart) / totalMinutes) * 100;
|
||||
const width = ((segment.endMinutes - segment.startMinutes) / totalMinutes) * 100;
|
||||
const isFree = segment.status === 'free';
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'absolute top-0 flex h-16 min-w-0 flex-col justify-center overflow-hidden rounded-md border px-2 text-left text-xs shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring',
|
||||
segment.status === 'free' &&
|
||||
'border-primary/70 bg-primary/20 text-primary hover:bg-primary/25',
|
||||
segment.status === 'reserved' &&
|
||||
'border-reserved/70 bg-reserved/80 text-reserved-foreground',
|
||||
segment.status === 'maintenance' &&
|
||||
'border-maintenance/80 bg-maintenance/75 text-maintenance-foreground'
|
||||
)}
|
||||
style={{
|
||||
left: `calc(${left}% + 4px)`,
|
||||
width: `calc(${width}% - 8px)`,
|
||||
}}
|
||||
onClick={() => {
|
||||
if (isFree) {
|
||||
openCreateBooking({
|
||||
courtId: schedule.court.id,
|
||||
startTime: segment.startTime,
|
||||
sportId: schedule.court.sportId,
|
||||
});
|
||||
}
|
||||
}}
|
||||
onDoubleClick={() => {
|
||||
if (segment.booking?.status === 'CONFIRMED') {
|
||||
updateBookingStatus(segment.booking.id, 'COMPLETED');
|
||||
}
|
||||
}}
|
||||
title={
|
||||
segment.booking
|
||||
? `${segment.booking.customerName} · ${segment.startTime} - ${segment.endTime}`
|
||||
: `${segment.startTime} - ${segment.endTime}`
|
||||
}
|
||||
>
|
||||
{isFree ? (
|
||||
<span className="flex items-center justify-center gap-1 text-sm font-medium">
|
||||
<Plus className="size-4" />
|
||||
<span className="hidden sm:inline">Reservar</span>
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<span className="truncate text-sm font-medium">
|
||||
{segment.startTime} - {segment.endTime}
|
||||
</span>
|
||||
<span className="mt-1 flex items-center gap-1 truncate opacity-90">
|
||||
<Users className="size-3" />
|
||||
{segment.booking?.customerName ?? 'Mantenimiento'}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
interface CurrentTimeIndicatorProps {
|
||||
time: string;
|
||||
courtInfoWidth: number;
|
||||
gridWidth: number;
|
||||
rangeStart: number;
|
||||
totalMinutes: number;
|
||||
}
|
||||
|
||||
function CurrentTimeIndicator({
|
||||
time,
|
||||
courtInfoWidth,
|
||||
gridWidth,
|
||||
rangeStart,
|
||||
totalMinutes,
|
||||
}: CurrentTimeIndicatorProps) {
|
||||
const left = courtInfoWidth + ((timeToMinutes(time) - rangeStart) / totalMinutes) * gridWidth;
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none absolute bottom-0 top-12 z-20" style={{ left }}>
|
||||
<div className="absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground shadow-sm">
|
||||
{time}
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 top-0 w-px bg-primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DatePicker } from '@/components/ui/date-picker';
|
||||
import { Field, FieldLabel } from '@/components/ui/field';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { ChevronLeft, ChevronRight, Clock, SlidersHorizontal } from 'lucide-react';
|
||||
import { useBooking } from '../booking-provider';
|
||||
import type { BookingStatusFilter } from '../booking.types';
|
||||
import { fromIsoDateLocal, toIsoDateLocal } from '../lib/booking-time';
|
||||
|
||||
const timeRangeOptions = [
|
||||
{ label: '08:00 - 22:00', start: '08:00', end: '22:00' },
|
||||
{ label: '06:00 - 00:00', start: '06:00', end: '23:59' },
|
||||
{ label: '08:00 - 14:00', start: '08:00', end: '14:00' },
|
||||
{ label: '14:00 - 22:00', start: '14:00', end: '22:00' },
|
||||
];
|
||||
|
||||
const statusOptions: Array<{ value: BookingStatusFilter; label: string }> = [
|
||||
{ value: 'all', label: 'Todos' },
|
||||
{ value: 'free', label: 'Libre' },
|
||||
{ value: 'reserved', label: 'Reservado' },
|
||||
{ value: 'maintenance', label: 'Mantenimiento' },
|
||||
];
|
||||
|
||||
export function BookingToolbar() {
|
||||
const {
|
||||
courts,
|
||||
selectedDate,
|
||||
selectedSportId,
|
||||
selectedStatus,
|
||||
visibleTimeRange,
|
||||
setSelectedDate,
|
||||
moveSelectedDate,
|
||||
setSelectedSportId,
|
||||
setSelectedStatus,
|
||||
setVisibleTimeRange,
|
||||
} = useBooking();
|
||||
|
||||
const sports = [...new Map(courts.map((court) => [court.sport.id, court.sport])).values()];
|
||||
const activeRangeValue = `${visibleTimeRange.start}-${visibleTimeRange.end}`;
|
||||
|
||||
return (
|
||||
<section className="rounded-lg border bg-card/85 p-4 shadow-sm">
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-[1fr_1fr_1.6fr_1.1fr_auto] xl:items-end">
|
||||
<Field>
|
||||
<FieldLabel>Deporte</FieldLabel>
|
||||
<Select value={selectedSportId} onValueChange={setSelectedSportId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todos</SelectItem>
|
||||
{sports.map((sport) => (
|
||||
<SelectItem key={sport.id} value={sport.id}>
|
||||
{sport.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Estado</FieldLabel>
|
||||
<Select
|
||||
value={selectedStatus}
|
||||
onValueChange={(value) => setSelectedStatus(value as BookingStatusFilter)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{statusOptions.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Fecha</FieldLabel>
|
||||
<div className="grid grid-cols-[auto_1fr_auto] gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => moveSelectedDate(-1)}
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
</Button>
|
||||
<DatePicker
|
||||
value={fromIsoDateLocal(selectedDate)}
|
||||
onChange={(date) =>
|
||||
setSelectedDate(date ? toIsoDateLocal(date) : toIsoDateLocal(new Date()))
|
||||
}
|
||||
/>
|
||||
<Button type="button" variant="outline" size="icon" onClick={() => moveSelectedDate(1)}>
|
||||
<ChevronRight className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Hora</FieldLabel>
|
||||
<Select
|
||||
value={activeRangeValue}
|
||||
onValueChange={(value) => {
|
||||
const option = timeRangeOptions.find((item) => `${item.start}-${item.end}` === value);
|
||||
if (option) {
|
||||
setVisibleTimeRange({ start: option.start, end: option.end });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<Clock className="mr-2 size-4 text-muted-foreground" />
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{timeRangeOptions.map((option) => (
|
||||
<SelectItem
|
||||
key={`${option.start}-${option.end}`}
|
||||
value={`${option.start}-${option.end}`}
|
||||
>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
<Button variant="outline" className="xl:self-end">
|
||||
<SlidersHorizontal className="size-4" />
|
||||
Filtros avanzados
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user