urieljarethandClaude Opus 4.8
26e6d3a9bf
Los confirm()/alert()/prompt() nativos se veían fuera de la marca ("<dominio> dice…").
Se agrega un DialogProvider (montado en el layout autenticado) con su estilo visual y se
consume via hooks useConfirm / usePrompt / useToast:
- confirmaciones -> modal propio (con variante "peligro" para eliminaciones)
- prompts (crear paquete / fase) -> modal con input
- alerts de error/éxito -> toasts
Reemplazados todos los diálogos nativos: RegistroHorasPanel, CatalogoClient,
ConfiguracionClient, CotizacionForm, ExportButtons, ListDeleteButton, DeleteButton,
CambiarEstadoButtons. Validado E2E (Playwright): al revertir una partida pagada aparece
el modal propio y NO se dispara el confirm nativo.
Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useConfirm, useToast } from "@/components/ui/DialogProvider";
|
|
|
|
export function ListDeleteButton({ id }: { id: string }) {
|
|
const [deleting, setDeleting] = useState(false);
|
|
const router = useRouter();
|
|
const showConfirm = useConfirm();
|
|
const showToast = useToast();
|
|
|
|
const handleDelete = async () => {
|
|
const ok = await showConfirm({
|
|
title: "Eliminar cotización",
|
|
message: "¿Eliminar esta cotización?",
|
|
confirmText: "Eliminar",
|
|
danger: true,
|
|
});
|
|
if (!ok) return;
|
|
setDeleting(true);
|
|
try {
|
|
const res = await fetch(`/api/cotizaciones/${id}`, { method: "DELETE" });
|
|
if (res.ok) router.refresh();
|
|
else showToast("Error al eliminar", "error");
|
|
} catch {
|
|
showToast("Error al eliminar", "error");
|
|
} finally {
|
|
setDeleting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleDelete}
|
|
disabled={deleting}
|
|
className="text-xs text-red-500 hover:text-red-700 disabled:opacity-50"
|
|
>
|
|
{deleting ? "..." : "Eliminar"}
|
|
</button>
|
|
);
|
|
}
|