139 lines
4.4 KiB
TypeScript
139 lines
4.4 KiB
TypeScript
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 } 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' },
|
|
];
|
|
|
|
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] 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>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|