Add jefe mecánico to client booking flow

Cliente now picks a jefe mecánico after choosing the service so the
calendar shows that specific jefe's availability. Each jefe has its own
configurable parallel slot capacity (replacing the global SLOTS_PARALELOS
= 5). Admins manage jefes from /admin/jefes; jefes log in to /jefe to
see their daily agenda.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/app/jefe/dashboard/page.tsx

@@ -0,0 +1,104 @@
+"use client";
+import { useEffect, useState } from "react";
+import Card from "@/components/ui/Card";
+import Badge from "@/components/ui/Badge";
+
+interface Turno {
+  id: string;
+  fechaInicio: string;
+  fechaFin: string;
+  estado: "PENDIENTE" | "CONFIRMADO" | "CANCELADO" | "COMPLETADO";
+  comentario: string | null;
+  kilometros: number;
+  tipoServicio: { nombre: string };
+  auto: { marca: string; modelo: string; patente: string };
+  cliente: { nombre: string; apellido: string; telefono: string };
+}
+
+function hoyArg() {
+  return new Date().toLocaleDateString("sv-SE", { timeZone: "America/Argentina/Buenos_Aires" });
+}
+
+function formatHora(iso: string) {
+  return new Date(iso).toLocaleTimeString("es-AR", {
+    timeZone: "America/Argentina/Buenos_Aires",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export default function JefeDashboard() {
+  const [fecha, setFecha] = useState<string>(() => hoyArg());
+  const [turnos, setTurnos] = useState<Turno[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => { cargar(); }, [fecha]);
+
+  async function cargar() {
+    setLoading(true);
+    const res = await fetch(`/api/jefe/turnos?fecha=${fecha}`);
+    const data = await res.json();
+    setTurnos(Array.isArray(data) ? data : []);
+    setLoading(false);
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <h2 className="text-xl sm:text-2xl font-bold text-white">Turnos del día</h2>
+        <input
+          type="date"
+          value={fecha}
+          onChange={(e) => setFecha(e.target.value)}
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 w-full sm:w-auto"
+        />
+      </div>
+
+      {loading ? (
+        <div className="text-center py-10 text-gray-200">Cargando...</div>
+      ) : turnos.length === 0 ? (
+        <Card>
+          <p className="text-center text-gray-400 py-4">No tenés turnos para esta fecha.</p>
+        </Card>
+      ) : (
+        <div className="flex flex-col gap-4">
+          {turnos.map((t) => (
+            <Card key={t.id}>
+              <div className="flex flex-col gap-3">
+                <div className="flex items-start justify-between flex-wrap gap-2">
+                  <div>
+                    <p className="font-semibold text-gray-800">
+                      {formatHora(t.fechaInicio)} – {formatHora(t.fechaFin)}
+                    </p>
+                    <p className="text-sm text-gray-600 mt-0.5">{t.tipoServicio.nombre}</p>
+                  </div>
+                  <Badge estado={t.estado} />
+                </div>
+
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-gray-600 bg-gray-50 rounded-lg p-3">
+                  <span className="text-gray-400">Cliente</span>
+                  <span>{t.cliente.nombre} {t.cliente.apellido}</span>
+                  <span className="text-gray-400">Teléfono</span>
+                  <span>{t.cliente.telefono}</span>
+                  <span className="text-gray-400">Auto</span>
+                  <span>{t.auto.marca} {t.auto.modelo}</span>
+                  <span className="text-gray-400">Patente</span>
+                  <span className="font-mono">{t.auto.patente}</span>
+                  <span className="text-gray-400">Kilometraje</span>
+                  <span>{t.kilometros.toLocaleString("es-AR")} km</span>
+                </div>
+
+                {t.comentario && (
+                  <div className="text-sm text-gray-600 bg-gray-50 rounded-lg p-3">
+                    <p className="text-gray-400 mb-1">Comentario</p>
+                    <p>{t.comentario}</p>
+                  </div>
+                )}
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/app/jefe/layout.tsx

@@ -0,0 +1,31 @@
+"use client";
+import { usePathname, useRouter } from "next/navigation";
+
+export default function JefeLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  async function cerrarSesion() {
+    await fetch("/api/auth/jefe-logout", { method: "POST" });
+    router.push("/jefe");
+  }
+
+  if (pathname === "/jefe") return <>{children}</>;
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <div className="max-w-5xl mx-auto w-full px-4 flex-1 flex flex-col py-6 gap-4">
+        <div className="flex items-center justify-between gap-2">
+          <h1 className="text-lg font-semibold text-white">🔧 Mi agenda</h1>
+          <button
+            onClick={cerrarSesion}
+            className="text-sm text-gray-300 hover:text-red-300 transition px-3 py-1.5 rounded-lg hover:bg-white/10"
+          >
+            Cerrar sesión
+          </button>
+        </div>
+        <main className="flex-1">{children}</main>
+      </div>
+    </div>
+  );
+}

src/app/jefe/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import Card from "@/components/ui/Card";
+
+export default function JefeLoginPage() {
+  const router = useRouter();
+  const [form, setForm] = useState({ email: "", password: "" });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  function set(f: string) {
+    return (e: React.ChangeEvent<HTMLInputElement>) =>
+      setForm((v) => ({ ...v, [f]: e.target.value }));
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    const res = await fetch("/api/auth/jefe-login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(form),
+    });
+    const data = await res.json();
+    setLoading(false);
+    if (!res.ok) { setError(data.error || "Credenciales incorrectas"); return; }
+    router.push("/jefe/dashboard");
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <Card className="w-full max-w-sm mx-4">
+        <div className="text-center mb-6">
+          <div className="text-4xl mb-2">🔧</div>
+          <h1 className="text-xl font-bold text-gray-800">Agenda del jefe mecánico</h1>
+          <p className="text-sm text-gray-500 mt-1">Ingresá con tus credenciales</p>
+        </div>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <Input id="email" type="email" label="Email" placeholder="jefe@taller.com" value={form.email} onChange={set("email")} required />
+          <Input id="password" type="password" label="Contraseña" placeholder="••••••••" value={form.password} onChange={set("password")} required />
+          {error && <p className="text-sm text-red-500 text-center">{error}</p>}
+          <Button type="submit" loading={loading} className="w-full">Ingresar</Button>
+        </form>
+      </Card>
+    </div>
+  );
+}