feat: add city/state/country to complex, new settings page with sidebar, and Biome linting
- Added city, state, and country optional fields to Complex model - Updated onboarding to include optional location fields - Created new settings page with sidebar navigation (Datos del Complejo, Canchas) - Replaced ESLint with Biome for frontend and backend linting - Added parallel dev script with concurrently - Migrated register-routes to use direct app.route() pattern
This commit is contained in:
Jose Selesan
@@ -1,153 +1,155 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { z } from 'zod'
|
||||
import type { AdminBooking } from '@repo/api-contract'
|
||||
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 { 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 {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { ApiClientError, apiClient } from '@/lib/api-client'
|
||||
} from '@/components/ui/select';
|
||||
import { ApiClientError, apiClient } from '@/lib/api-client';
|
||||
import {
|
||||
getCurrentComplexSlug,
|
||||
setCurrentComplexSlug as persistCurrentComplexSlug,
|
||||
} from '@/lib/current-complex'
|
||||
} from '@/lib/current-complex';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import type { AdminBooking } from '@repo/api-contract';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
|
||||
const manualBookingSchema = z.object({
|
||||
customerName: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(2, 'Ingresa un nombre valido.')
|
||||
.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 valido.')
|
||||
.min(6, 'Ingresa un telefono válido.')
|
||||
.max(30, 'El telefono no puede superar los 30 caracteres.'),
|
||||
})
|
||||
});
|
||||
|
||||
type ManualBookingForm = z.infer<typeof manualBookingSchema>
|
||||
type ManualBookingForm = z.infer<typeof manualBookingSchema>;
|
||||
|
||||
function toIsoDateLocal(date: Date) {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
function fromIsoDateLocal(dateIso: string): Date | undefined {
|
||||
const [year, month, day] = dateIso.split('-').map(Number)
|
||||
if (!year || !month || !day) return undefined
|
||||
return new Date(year, month - 1, day)
|
||||
const [year, month, day] = dateIso.split('-').map(Number);
|
||||
if (!year || !month || !day) return undefined;
|
||||
return new Date(year, month - 1, day);
|
||||
}
|
||||
|
||||
function extractMessage(error: unknown, fallback: string) {
|
||||
if (error instanceof ApiClientError) {
|
||||
return error.message || fallback
|
||||
return error.message || fallback;
|
||||
}
|
||||
|
||||
return fallback
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function formatDateLabel(dateIso: string) {
|
||||
const [year, month, day] = dateIso.split('-').map(Number)
|
||||
const [year, month, day] = dateIso.split('-').map(Number);
|
||||
|
||||
if (!year || !month || !day) return dateIso
|
||||
if (!year || !month || !day) return dateIso;
|
||||
|
||||
const date = new Date(year, month - 1, day)
|
||||
const date = new Date(year, month - 1, day);
|
||||
return new Intl.DateTimeFormat('es-AR', {
|
||||
weekday: 'long',
|
||||
day: '2-digit',
|
||||
month: 'long',
|
||||
}).format(date)
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
function getEffectiveStatus(booking: AdminBooking): 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW' {
|
||||
function getEffectiveStatus(
|
||||
booking: AdminBooking
|
||||
): 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW' {
|
||||
if (booking.status !== 'CONFIRMED') {
|
||||
return booking.status
|
||||
return booking.status;
|
||||
}
|
||||
|
||||
// Check if booking is past end time and still confirmed
|
||||
const now = new Date()
|
||||
const bookingDateTime = new Date(`${booking.date}T${booking.endTime}:00`)
|
||||
const now = new Date();
|
||||
const bookingDateTime = new Date(`${booking.date}T${booking.endTime}:00`);
|
||||
|
||||
if (now > bookingDateTime) {
|
||||
return 'NO_SHOW'
|
||||
return 'NO_SHOW';
|
||||
}
|
||||
|
||||
return 'CONFIRMED'
|
||||
return 'CONFIRMED';
|
||||
}
|
||||
|
||||
function effectiveStatusLabel(status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW') {
|
||||
if (status === 'NO_SHOW') return 'No show'
|
||||
if (status === 'COMPLETED') return 'Cumplida'
|
||||
if (status === 'CANCELLED') return 'Cancelada'
|
||||
return 'Confirmada'
|
||||
if (status === 'NO_SHOW') return 'No show';
|
||||
if (status === 'COMPLETED') return 'Cumplida';
|
||||
if (status === 'CANCELLED') return 'Cancelada';
|
||||
return 'Confirmada';
|
||||
}
|
||||
|
||||
function effectiveStatusClassName(status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW') {
|
||||
if (status === 'NO_SHOW') {
|
||||
return 'border-orange-200 bg-orange-50 text-orange-700'
|
||||
return 'border-orange-200 bg-orange-50 text-orange-700';
|
||||
}
|
||||
if (status === 'COMPLETED') {
|
||||
return 'border-emerald-200 bg-emerald-50 text-emerald-700'
|
||||
return 'border-emerald-200 bg-emerald-50 text-emerald-700';
|
||||
}
|
||||
|
||||
if (status === 'CANCELLED') {
|
||||
return 'border-rose-200 bg-rose-50 text-rose-700'
|
||||
return 'border-rose-200 bg-rose-50 text-rose-700';
|
||||
}
|
||||
|
||||
return 'border-sky-200 bg-sky-50 text-sky-700'
|
||||
return 'border-sky-200 bg-sky-50 text-sky-700';
|
||||
}
|
||||
|
||||
export function HomePage() {
|
||||
const queryClient = useQueryClient()
|
||||
const todayIso = useMemo(() => toIsoDateLocal(new Date()), [])
|
||||
const queryClient = useQueryClient();
|
||||
const todayIso = useMemo(() => toIsoDateLocal(new Date()), []);
|
||||
|
||||
const [currentComplexSlug, setCurrentComplexSlug] = useState<string | null>(null)
|
||||
const [fromDate, setFromDate] = useState(todayIso)
|
||||
const [manualDate, setManualDate] = useState(todayIso)
|
||||
const [selectedSportId, setSelectedSportId] = useState<string | undefined>()
|
||||
const [selectedCourtId, setSelectedCourtId] = useState<string>('')
|
||||
const [selectedStartTime, setSelectedStartTime] = useState<string>('')
|
||||
const [currentComplexSlug, setCurrentComplexSlug] = useState<string | null>(null);
|
||||
const [fromDate, setFromDate] = useState(todayIso);
|
||||
const [manualDate, setManualDate] = useState(todayIso);
|
||||
const [selectedSportId, setSelectedSportId] = useState<string | undefined>();
|
||||
const [selectedCourtId, setSelectedCourtId] = useState<string>('');
|
||||
const [selectedStartTime, setSelectedStartTime] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentComplexSlug(getCurrentComplexSlug())
|
||||
}, [])
|
||||
setCurrentComplexSlug(getCurrentComplexSlug());
|
||||
}, []);
|
||||
|
||||
const myComplexesQuery = useQuery({
|
||||
queryKey: ['my-complexes'],
|
||||
queryFn: () => apiClient.complexes.listMine(),
|
||||
})
|
||||
});
|
||||
|
||||
const selectedComplex = useMemo(() => {
|
||||
const complexes = myComplexesQuery.data ?? []
|
||||
const complexes = myComplexesQuery.data ?? [];
|
||||
|
||||
if (complexes.length === 0) return null
|
||||
if (complexes.length === 0) return null;
|
||||
|
||||
if (currentComplexSlug) {
|
||||
const match = complexes.find((complex) => complex.complexSlug === currentComplexSlug)
|
||||
const match = complexes.find((complex) => complex.complexSlug === currentComplexSlug);
|
||||
|
||||
if (match) return match
|
||||
if (match) return match;
|
||||
}
|
||||
|
||||
return complexes[0]
|
||||
}, [currentComplexSlug, myComplexesQuery.data])
|
||||
return complexes[0];
|
||||
}, [currentComplexSlug, myComplexesQuery.data]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedComplex) return
|
||||
if (!selectedComplex) return;
|
||||
|
||||
setCurrentComplexSlug(selectedComplex.complexSlug)
|
||||
persistCurrentComplexSlug(selectedComplex.complexSlug)
|
||||
}, [selectedComplex])
|
||||
setCurrentComplexSlug(selectedComplex.complexSlug);
|
||||
persistCurrentComplexSlug(selectedComplex.complexSlug);
|
||||
}, [selectedComplex]);
|
||||
|
||||
const bookingsQuery = useQuery({
|
||||
queryKey: ['admin-bookings', selectedComplex?.id, fromDate],
|
||||
@@ -156,84 +158,89 @@ export function HomePage() {
|
||||
apiClient.adminBookings.listByComplex(selectedComplex?.id as string, {
|
||||
fromDate,
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
const manualAvailabilityQuery = useQuery({
|
||||
queryKey: ['manual-booking-availability', selectedComplex?.complexSlug, manualDate, selectedSportId],
|
||||
queryKey: [
|
||||
'manual-booking-availability',
|
||||
selectedComplex?.complexSlug,
|
||||
manualDate,
|
||||
selectedSportId,
|
||||
],
|
||||
enabled: Boolean(selectedComplex?.complexSlug && manualDate),
|
||||
queryFn: () =>
|
||||
apiClient.publicBookings.getAvailability(selectedComplex?.complexSlug as string, {
|
||||
date: manualDate,
|
||||
...(selectedSportId ? { sportId: selectedSportId } : {}),
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const availability = manualAvailabilityQuery.data
|
||||
const availability = manualAvailabilityQuery.data;
|
||||
|
||||
if (!availability) return
|
||||
if (!availability) return;
|
||||
|
||||
if (!availability.sportSelectionRequired) {
|
||||
if (availability.sports[0] && !selectedSportId) {
|
||||
setSelectedSportId(availability.sports[0].id)
|
||||
setSelectedSportId(availability.sports[0].id);
|
||||
}
|
||||
} else if (
|
||||
selectedSportId &&
|
||||
!availability.sports.some((sport) => sport.id === selectedSportId)
|
||||
) {
|
||||
setSelectedSportId(undefined)
|
||||
setSelectedSportId(undefined);
|
||||
}
|
||||
}, [manualAvailabilityQuery.data, selectedSportId])
|
||||
}, [manualAvailabilityQuery.data, selectedSportId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!manualAvailabilityQuery.data) return
|
||||
if (!manualAvailabilityQuery.data) return;
|
||||
|
||||
if (
|
||||
selectedCourtId &&
|
||||
!manualAvailabilityQuery.data.courts.some((court) => court.courtId === selectedCourtId)
|
||||
) {
|
||||
setSelectedCourtId('')
|
||||
setSelectedStartTime('')
|
||||
setSelectedCourtId('');
|
||||
setSelectedStartTime('');
|
||||
}
|
||||
}, [manualAvailabilityQuery.data, selectedCourtId])
|
||||
}, [manualAvailabilityQuery.data, selectedCourtId]);
|
||||
|
||||
const selectedCourt = useMemo(() => {
|
||||
return manualAvailabilityQuery.data?.courts.find((court) => court.courtId === selectedCourtId)
|
||||
}, [manualAvailabilityQuery.data?.courts, selectedCourtId])
|
||||
return manualAvailabilityQuery.data?.courts.find((court) => court.courtId === selectedCourtId);
|
||||
}, [manualAvailabilityQuery.data?.courts, selectedCourtId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedCourt) {
|
||||
setSelectedStartTime('')
|
||||
return
|
||||
setSelectedStartTime('');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedCourt.availableSlots.some((slot) => slot.startTime === selectedStartTime)) {
|
||||
setSelectedStartTime('')
|
||||
setSelectedStartTime('');
|
||||
}
|
||||
}, [selectedCourt, selectedStartTime])
|
||||
}, [selectedCourt, selectedStartTime]);
|
||||
|
||||
const groupedBookings = useMemo(() => {
|
||||
const groups = new Map<string, AdminBooking[]>()
|
||||
const groups = new Map<string, AdminBooking[]>();
|
||||
|
||||
for (const booking of bookingsQuery.data?.bookings ?? []) {
|
||||
const current = groups.get(booking.date) ?? []
|
||||
current.push(booking)
|
||||
groups.set(booking.date, current)
|
||||
const current = groups.get(booking.date) ?? [];
|
||||
current.push(booking);
|
||||
groups.set(booking.date, current);
|
||||
}
|
||||
|
||||
return [...groups.entries()]
|
||||
}, [bookingsQuery.data?.bookings])
|
||||
return [...groups.entries()];
|
||||
}, [bookingsQuery.data?.bookings]);
|
||||
|
||||
const updateStatusMutation = useMutation({
|
||||
mutationFn: (payload: { bookingId: string; status: 'CANCELLED' | 'COMPLETED' }) =>
|
||||
apiClient.adminBookings.updateStatus(payload.bookingId, { status: payload.status }),
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ['admin-bookings', selectedComplex?.id] })
|
||||
void queryClient.invalidateQueries({ queryKey: ['admin-bookings', selectedComplex?.id] });
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: ['manual-booking-availability', selectedComplex?.complexSlug],
|
||||
})
|
||||
});
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
@@ -247,16 +254,16 @@ export function HomePage() {
|
||||
customerName: '',
|
||||
customerPhone: '',
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const createManualBookingMutation = useMutation({
|
||||
mutationFn: async (values: ManualBookingForm) => {
|
||||
if (!selectedComplex?.id) {
|
||||
throw new Error('No se encontró el complejo actual.')
|
||||
throw new Error('No se encontró el complejo actual.');
|
||||
}
|
||||
|
||||
if (!selectedCourtId || !selectedStartTime) {
|
||||
throw new Error('Debes seleccionar cancha y horario.')
|
||||
throw new Error('Debes seleccionar cancha y horario.');
|
||||
}
|
||||
|
||||
return apiClient.adminBookings.create(selectedComplex.id, {
|
||||
@@ -265,30 +272,30 @@ export function HomePage() {
|
||||
startTime: selectedStartTime,
|
||||
customerName: values.customerName,
|
||||
customerPhone: values.customerPhone,
|
||||
})
|
||||
});
|
||||
},
|
||||
onSuccess: async () => {
|
||||
reset()
|
||||
setSelectedCourtId('')
|
||||
setSelectedStartTime('')
|
||||
reset();
|
||||
setSelectedCourtId('');
|
||||
setSelectedStartTime('');
|
||||
|
||||
await queryClient.invalidateQueries({ queryKey: ['admin-bookings', selectedComplex?.id] })
|
||||
await queryClient.invalidateQueries({ queryKey: ['admin-bookings', selectedComplex?.id] });
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ['manual-booking-availability', selectedComplex?.complexSlug],
|
||||
})
|
||||
});
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const onSubmitManualBooking = async (values: ManualBookingForm) => {
|
||||
await createManualBookingMutation.mutateAsync(values)
|
||||
}
|
||||
await createManualBookingMutation.mutateAsync(values);
|
||||
};
|
||||
|
||||
if (myComplexesQuery.isLoading) {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-6xl px-6 py-8">
|
||||
<p className="text-sm text-muted-foreground">Cargando panel...</p>
|
||||
</main>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (myComplexesQuery.isError) {
|
||||
@@ -298,17 +305,15 @@ export function HomePage() {
|
||||
{extractMessage(myComplexesQuery.error, 'No pudimos cargar tus complejos.')}
|
||||
</p>
|
||||
</main>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (!selectedComplex) {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-6xl px-6 py-8">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No tienes complejos asignados todavía.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">No tienes complejos asignados todavía.</p>
|
||||
</main>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -327,15 +332,15 @@ export function HomePage() {
|
||||
<DatePicker
|
||||
value={fromIsoDateLocal(fromDate)}
|
||||
onChange={(date) => {
|
||||
const isoDate = date ? toIsoDateLocal(date) : todayIso
|
||||
setFromDate(isoDate)
|
||||
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
|
||||
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"
|
||||
/>
|
||||
@@ -352,13 +357,11 @@ export function HomePage() {
|
||||
</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.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>
|
||||
)}
|
||||
|
||||
<div className="mt-4 space-y-4">
|
||||
{groupedBookings.map(([date, bookings]) => (
|
||||
@@ -366,9 +369,10 @@ export function HomePage() {
|
||||
<h2 className="text-sm font-semibold capitalize">{formatDateLabel(date)}</h2>
|
||||
<div className="mt-3 space-y-2">
|
||||
{bookings.map((booking) => {
|
||||
const effectiveStatus = getEffectiveStatus(booking)
|
||||
const canManage = booking.status === 'CONFIRMED' && effectiveStatus === 'CONFIRMED'
|
||||
const isMutating = updateStatusMutation.isPending
|
||||
const effectiveStatus = getEffectiveStatus(booking);
|
||||
const canManage =
|
||||
booking.status === 'CONFIRMED' && effectiveStatus === 'CONFIRMED';
|
||||
const isMutating = updateStatusMutation.isPending;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -380,7 +384,8 @@ export function HomePage() {
|
||||
{booking.startTime} - {booking.endTime} · {booking.courtName}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{booking.customerName} ({booking.customerPhone}) · Código {booking.bookingCode}
|
||||
{booking.customerName} ({booking.customerPhone}) · Código{' '}
|
||||
{booking.bookingCode}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -402,7 +407,7 @@ export function HomePage() {
|
||||
updateStatusMutation.mutate({
|
||||
bookingId: booking.id,
|
||||
status: 'COMPLETED',
|
||||
})
|
||||
});
|
||||
}}
|
||||
>
|
||||
Marcar cumplida
|
||||
@@ -416,7 +421,7 @@ export function HomePage() {
|
||||
updateStatusMutation.mutate({
|
||||
bookingId: booking.id,
|
||||
status: 'CANCELLED',
|
||||
})
|
||||
});
|
||||
}}
|
||||
>
|
||||
Cancelar
|
||||
@@ -425,7 +430,7 @@ export function HomePage() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</article>
|
||||
@@ -451,10 +456,10 @@ export function HomePage() {
|
||||
<DatePicker
|
||||
value={fromIsoDateLocal(manualDate)}
|
||||
onChange={(date) => {
|
||||
const isoDate = date ? toIsoDateLocal(date) : todayIso
|
||||
setManualDate(isoDate)
|
||||
setSelectedCourtId('')
|
||||
setSelectedStartTime('')
|
||||
const isoDate = date ? toIsoDateLocal(date) : todayIso;
|
||||
setManualDate(isoDate);
|
||||
setSelectedCourtId('');
|
||||
setSelectedStartTime('');
|
||||
}}
|
||||
minDate={new Date()}
|
||||
placeholder="Selecciona una fecha"
|
||||
@@ -467,9 +472,9 @@ export function HomePage() {
|
||||
<Select
|
||||
value={selectedSportId ?? ''}
|
||||
onValueChange={(value) => {
|
||||
setSelectedSportId(value)
|
||||
setSelectedCourtId('')
|
||||
setSelectedStartTime('')
|
||||
setSelectedSportId(value);
|
||||
setSelectedCourtId('');
|
||||
setSelectedStartTime('');
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
@@ -491,8 +496,8 @@ export function HomePage() {
|
||||
<Select
|
||||
value={selectedCourtId}
|
||||
onValueChange={(value) => {
|
||||
setSelectedCourtId(value)
|
||||
setSelectedStartTime('')
|
||||
setSelectedCourtId(value);
|
||||
setSelectedStartTime('');
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
@@ -535,12 +540,15 @@ export function HomePage() {
|
||||
<p className="mt-3 text-sm text-destructive">
|
||||
{extractMessage(
|
||||
manualAvailabilityQuery.error,
|
||||
'No pudimos cargar disponibilidad para la reserva manual.',
|
||||
'No pudimos cargar disponibilidad para la reserva manual.'
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<form className="mt-4 grid gap-3 md:grid-cols-2" onSubmit={handleSubmit(onSubmitManualBooking)}>
|
||||
<form
|
||||
className="mt-4 grid gap-3 md:grid-cols-2"
|
||||
onSubmit={handleSubmit(onSubmitManualBooking)}
|
||||
>
|
||||
<Field data-invalid={Boolean(errors.customerName)}>
|
||||
<FieldLabel htmlFor="customerName">Nombre</FieldLabel>
|
||||
<Input
|
||||
@@ -568,7 +576,7 @@ export function HomePage() {
|
||||
<p className="text-sm text-destructive md:col-span-2">
|
||||
{extractMessage(
|
||||
createManualBookingMutation.error,
|
||||
'No pudimos crear la reserva manual.',
|
||||
'No pudimos crear la reserva manual.'
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
@@ -583,5 +591,5 @@ export function HomePage() {
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user