From 0b769805f9ca8be71c3802b240aee1a9e039d1f4 Mon Sep 17 00:00:00 2001
From: Beldor <beldor@localhost.localdomain>
Date: Mon, 22 Jun 2026 23:52:31 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20validar=20que=20kilometraje=20sea=20n?=
 =?UTF-8?q?=C3=BAmero=20entero=20positivo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Muestra error inline si el cliente ingresa letras u otros caracteres,
y bloquea el botón de confirmar hasta que el valor sea válido.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/cliente/turnos/page.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

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<string | null>(null);
   const [slotSel, setSlotSel] = useState<Slot | null>(null);
   const [kilometros, setKilometros] = useState("");
+  const [kmError, setKmError] = useState("");
   const [reservando, setReservando] = useState(false);
   const [turnoCreado, setTurnoCreado] = useState<Turno | null>(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 <span className="text-red-500">*</span>
                       </label>
                       <input
-                        type="number" min={0} placeholder="Ej: 85000"
+                        type="text" inputMode="numeric" placeholder="Ej: 85000"
                         value={kilometros}
-                        onChange={e => 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 && <p className="text-xs text-red-500 mt-1">{kmError}</p>}
                     </div>
-                    <Button onClick={reservar} disabled={!kilometros} loading={reservando} className="w-full">
+                    <Button onClick={reservar} disabled={!kilometros || !!kmError} loading={reservando} className="w-full">
                       Confirmar turno · {horaArg(slotSel.fechaInicio)} – {horaArg(slotSel.fechaFin)}
                     </Button>
                   </div>