feat(whatsapp): schema del bot de reservas + panel de trabajos por jefe (F1+F3)
FASE 1 — schema:
- Cliente.email opcional; nuevo telefonoNorm (E.164, único) para matchear por WhatsApp
- TipoServicio.jefeMecanicoId opcional (trabajos per-jefe; globales legacy quedan null)
- Turno.autoId/kilometros opcionales (reservas por WhatsApp sin auto/km)
- Nuevo modelo ConversacionWhatsapp (estado del bot por teléfono)
- admin/turnos/[id]: no permite COMPLETADO sin auto+km; Sheets tolera email nulo
FASE 3 — panel de trabajos del jefe:
- API jefe/servicios (GET/POST) y jefe/servicios/[id] (PATCH/DELETE), scoped al jefe
- DELETE desactiva si el trabajo ya tiene turnos asociados
- Página /jefe/servicios (alta/listado/activar/editar/eliminar) + nav Turnos|Trabajos
- Dashboard del jefe resiliente a turnos sin auto/km ("a completar")
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Beldor
@@ -9,9 +9,9 @@ interface Turno {
|
||||
fechaFin: string;
|
||||
estado: "PENDIENTE" | "CONFIRMADO" | "CANCELADO" | "COMPLETADO";
|
||||
comentario: string | null;
|
||||
kilometros: number;
|
||||
kilometros: number | null;
|
||||
tipoServicio: { nombre: string };
|
||||
auto: { marca: string; modelo: string; patente: string };
|
||||
auto: { marca: string; modelo: string; patente: string } | null;
|
||||
cliente: { nombre: string; apellido: string; telefono: string };
|
||||
}
|
||||
|
||||
@@ -81,11 +81,11 @@ export default function JefeDashboard() {
|
||||
<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>{t.auto ? `${t.auto.marca} ${t.auto.modelo}` : <em className="text-amber-600">a completar</em>}</span>
|
||||
<span className="text-gray-400">Patente</span>
|
||||
<span className="font-mono">{t.auto.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>
|
||||
<span>{t.kilometros != null ? `${t.kilometros.toLocaleString("es-AR")} km` : <em className="text-amber-600">a completar</em>}</span>
|
||||
</div>
|
||||
|
||||
{t.comentario && (
|
||||
|
||||
@@ -12,6 +12,11 @@ export default function JefeLayout({ children }: { children: React.ReactNode })
|
||||
|
||||
if (pathname === "/jefe") return <>{children}</>;
|
||||
|
||||
const tabs = [
|
||||
{ href: "/jefe/dashboard", label: "Turnos" },
|
||||
{ href: "/jefe/servicios", label: "Trabajos" },
|
||||
];
|
||||
|
||||
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">
|
||||
@@ -24,6 +29,24 @@ export default function JefeLayout({ children }: { children: React.ReactNode })
|
||||
Cerrar sesión
|
||||
</button>
|
||||
</div>
|
||||
<nav className="flex gap-1">
|
||||
{tabs.map((t) => {
|
||||
const activo = pathname === t.href;
|
||||
return (
|
||||
<button
|
||||
key={t.href}
|
||||
onClick={() => router.push(t.href)}
|
||||
className={`text-sm px-4 py-2 rounded-lg transition ${
|
||||
activo
|
||||
? "bg-white/15 text-white font-medium"
|
||||
: "text-gray-300 hover:text-white hover:bg-white/10"
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
<main className="flex-1">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import Card from "@/components/ui/Card";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Input from "@/components/ui/Input";
|
||||
|
||||
interface Servicio {
|
||||
id: string;
|
||||
nombre: string;
|
||||
duracionHoras: number;
|
||||
activo: boolean;
|
||||
}
|
||||
|
||||
export default function JefeServicios() {
|
||||
const [servicios, setServicios] = useState<Servicio[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [nombre, setNombre] = useState("");
|
||||
const [duracion, setDuracion] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [guardando, setGuardando] = useState(false);
|
||||
|
||||
useEffect(() => { cargar(); }, []);
|
||||
|
||||
async function cargar() {
|
||||
setLoading(true);
|
||||
const res = await fetch("/api/jefe/servicios");
|
||||
const data = await res.json();
|
||||
setServicios(Array.isArray(data) ? data : []);
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
async function agregar(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setGuardando(true);
|
||||
const res = await fetch("/api/jefe/servicios", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ nombre, duracionHoras: duracion }),
|
||||
});
|
||||
setGuardando(false);
|
||||
if (!res.ok) {
|
||||
const d = await res.json().catch(() => ({}));
|
||||
setError(d.error ?? "No se pudo guardar el trabajo");
|
||||
return;
|
||||
}
|
||||
setNombre("");
|
||||
setDuracion("");
|
||||
cargar();
|
||||
}
|
||||
|
||||
async function toggleActivo(s: Servicio) {
|
||||
await fetch(`/api/jefe/servicios/${s.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ activo: !s.activo }),
|
||||
});
|
||||
cargar();
|
||||
}
|
||||
|
||||
async function editarDuracion(s: Servicio) {
|
||||
const valor = prompt(`Duración de "${s.nombre}" en horas:`, String(s.duracionHoras));
|
||||
if (valor == null) return;
|
||||
const res = await fetch(`/api/jefe/servicios/${s.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ duracionHoras: valor }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const d = await res.json().catch(() => ({}));
|
||||
alert(d.error ?? "No se pudo actualizar");
|
||||
return;
|
||||
}
|
||||
cargar();
|
||||
}
|
||||
|
||||
async function eliminar(s: Servicio) {
|
||||
if (!confirm(`¿Eliminar el trabajo "${s.nombre}"?`)) return;
|
||||
const res = await fetch(`/api/jefe/servicios/${s.id}`, { method: "DELETE" });
|
||||
const d = await res.json().catch(() => ({}));
|
||||
if (d.desactivado)
|
||||
alert("El trabajo ya tenía turnos asociados, así que se desactivó en vez de borrarse.");
|
||||
cargar();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-white">Mis trabajos y tiempos</h2>
|
||||
|
||||
<Card>
|
||||
<form onSubmit={agregar} className="flex flex-col gap-3">
|
||||
<p className="text-sm text-gray-600">
|
||||
Cargá los trabajos que ofrecés y cuánto tardan. Son los que verá el cliente al reservar por WhatsApp.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-3 items-end">
|
||||
<Input
|
||||
label="Trabajo"
|
||||
placeholder="Ej: Cambio de aceite"
|
||||
value={nombre}
|
||||
onChange={(e) => setNombre(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Duración (horas)"
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
placeholder="Ej: 1.5"
|
||||
value={duracion}
|
||||
onChange={(e) => setDuracion(e.target.value)}
|
||||
className="sm:w-40"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-500">{error}</p>}
|
||||
<div>
|
||||
<Button type="submit" loading={guardando}>Agregar trabajo</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-10 text-gray-200">Cargando...</div>
|
||||
) : servicios.length === 0 ? (
|
||||
<Card>
|
||||
<p className="text-center text-gray-400 py-4">Todavía no cargaste ningún trabajo.</p>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
{servicios.map((s) => (
|
||||
<Card key={s.id}>
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<p className={`font-semibold ${s.activo ? "text-gray-800" : "text-gray-400 line-through"}`}>
|
||||
{s.nombre}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-0.5">
|
||||
{s.duracionHoras} {s.duracionHoras === 1 ? "hora" : "horas"}
|
||||
{!s.activo && " · inactivo"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="secondary" className="text-sm" onClick={() => editarDuracion(s)}>
|
||||
Duración
|
||||
</Button>
|
||||
<Button variant="secondary" className="text-sm" onClick={() => toggleActivo(s)}>
|
||||
{s.activo ? "Desactivar" : "Activar"}
|
||||
</Button>
|
||||
<Button variant="danger" className="text-sm" onClick={() => eliminar(s)}>
|
||||
Eliminar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user