diff --git a/src/app/cliente/turnos/page.tsx b/src/app/cliente/turnos/page.tsx index 4001f03..68bf6f6 100644 --- a/src/app/cliente/turnos/page.tsx +++ b/src/app/cliente/turnos/page.tsx @@ -77,6 +77,7 @@ function TurnosContent() { const [diaSeleccionado, setDiaSeleccionado] = useState(null); const [slotSel, setSlotSel] = useState(null); const [kilometros, setKilometros] = useState(""); + const [kmError, setKmError] = useState(""); const [reservando, setReservando] = useState(false); const [turnoCreado, setTurnoCreado] = useState(null); @@ -119,10 +120,22 @@ function TurnosContent() { setDiaSeleccionado(dateStr); setSlotSel(null); setKilometros(""); + setKmError(""); + } + + function handleKilometros(val: string) { + setKilometros(val); + if (val === "") { + setKmError(""); + } else if (!/^\d+$/.test(val) || Number(val) < 0) { + setKmError("Ingresá solo números enteros positivos"); + } else { + setKmError(""); + } } async function reservar() { - if (!slotSel || !servicioSel || !autoId || !kilometros) return; + if (!slotSel || !servicioSel || !autoId || !kilometros || kmError) return; setReservando(true); const res = await fetch("/api/cliente/turnos", { method: "POST", @@ -341,13 +354,14 @@ function TurnosContent() { Kilometraje actual * setKilometros(e.target.value)} - className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" + onChange={e => handleKilometros(e.target.value)} + className={`w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 ${kmError ? "border-red-400 focus:ring-red-400" : "border-gray-300 focus:ring-blue-500"}`} /> + {kmError &&

{kmError}

} -