davidherran
ea1300bfdc
Deploy to VPS / deploy (push) Has been cancelled
The Operations Inbox panel was using browser-native alert() and
confirm() — those popups break out of the dark-themed CMS aesthetic
and look like a 1998 form validation. Worse, they're modal blocking,
so the editor can't see the surrounding context (the ticket card,
the activity feed) while the dialog is up.
NEW PRIMITIVES (src/components/hq/Toast.tsx)
- <HqUiProvider> mounts a global toast stack (bottom-right) and a
global confirm dialog. Mounted in src/app/hq-command/layout.tsx so
every panel under /hq-command/* can use it.
- useHqUi() returns { toast, confirm }:
ui.toast("Saved", "success") // ephemeral, 3s
ui.toast("Save failed: ...", "error") // 5s
await ui.confirm({ // returns boolean
title: "Delete ticket",
message: "This permanently...",
confirmLabel: "Delete",
destructive: true,
})
- Toasts auto-dismiss with a manual close button. Confirm dialog
uses red accent for destructive actions.
- Zero deps. ~140 lines total.
INBOX (src/app/hq-command/dashboard/inbox/page.tsx)
- All 5 alert() calls replaced with ui.toast() — success / error
toned and persisting just long enough to read.
- All 4 confirm() calls replaced with ui.confirm() — destructive
ones (delete ticket, purge files, delete client) get the red
accent + 'cannot be undone' copy.
- Action descriptions are richer ('Resolve & purge attachments'
instead of 'Resolve') so the editor knows exactly what fires.
NO BACKEND CHANGES. Pure UX layer on top of the existing actions.
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import type { Metadata } from "next";
|
|
import "@/app/globals.css";
|
|
import { HqUiProvider } from "@/components/hq/Toast";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "FLUX Command Center",
|
|
description: "CMS and Administration",
|
|
robots: "noindex, nofollow", // Evita que Google indexe el CMS
|
|
};
|
|
|
|
export default function HQLayout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
// 🔥 El CMS siempre estará en inglés y forzado en modo oscuro
|
|
<html lang="en" className="dark">
|
|
{/* Mantenemos tu fondo negro absoluto, texto blanco y el color de selección cyan */}
|
|
<body className="min-h-screen bg-[#050505] text-[#F5F5F7] antialiased selection:bg-[#00F0FF] selection:text-black">
|
|
|
|
{/* Patrón de puntos sutil en el fondo para dar aspecto técnico */}
|
|
<div
|
|
className="fixed inset-0 opacity-[0.03] pointer-events-none"
|
|
style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)', backgroundSize: '32px 32px' }}
|
|
></div>
|
|
|
|
<HqUiProvider>
|
|
<main className="relative z-10">
|
|
{children}
|
|
</main>
|
|
</HqUiProvider>
|
|
|
|
</body>
|
|
</html>
|
|
);
|
|
} |