{settings.brandTitle}

{settings.userName} — {settings.userRole}

{notifOpen && ( setNotifOpen(false)} /> )}

{settings.sprintLabel}

{settings.showLive &&

LIVE

}

setOpen(false)} settings={settings} setSettings={setSettings} /> ); }; const NotificationPanel = ({ history, onClear, onClose }) => { React.useEffect(() => { const handleKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", handleKey); return () => window.removeEventListener("keydown", handleKey); }, [onClose]); return (

Notificaciones

{history.length === 0 ? (

No hay notificaciones recientes

) : ( history.map((n, i) => (

{n.msg}

{n.time}

)) )}

); }; // --------- Tabs ---------- const Tabs = ({ active, onChange, counts }) => { const items = [ { key: "overview", label: "Overview", icon: "activity", count: null }, { key: "tree", label: "Árbol de Proyectos", icon: "tree", count: counts.projects }, { key: "gantt", label: "Gantt", icon: "calendar", count: null }, { key: "roadmap", label: "Roadmap", icon: "map", count: null }, { key: "inbox", label: "Inbox", icon: "inbox", count: counts.inbox }, ]; return (

{items.map((t) => ( ))}

); }; // --------- Badge ---------- const StatusBadge = ({ status, onClick, selected }) => { const cfg = window.STATUS_OPTIONS.find((s) => s.key === status) || window.STATUS_OPTIONS[3]; return ( {cfg.label} ); }; const TipoTag = ({ tipo }) => { const cfg = window.TIPO_OPTIONS.find((t) => t.key === tipo) || window.TIPO_OPTIONS[1]; return {cfg.label}; }; // --------- Toast system ---------- const ToastContext = React.createContext({ push: () => {}, history: [], clearHistory: () => {}, unreadCount: 0, markAsRead: () => {} }); const ToastProvider = ({ children }) => { const [toasts, setToasts] = React.useState([]); const [history, setHistory] = React.useState([]); const [unreadCount, setUnreadCount] = React.useState(0); const lastPush = React.useRef({ msg: "", time: 0 }); const push = React.useCallback((msg, opts = {}) => { // Duplicate prevention: ignore same message if pushed within 500ms const now = Date.now(); if (msg === lastPush.current.msg && (now - lastPush.current.time) < 500) return; lastPush.current = { msg, time: now }; const id = Math.random().toString(36).slice(2); const color = opts.color || "var(--azul-info)"; const icon = opts.icon || "check"; const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); const newNotif = { id, msg, color, icon, time }; setToasts((t) => [...t, newNotif]); setHistory((h) => [newNotif, ...h].slice(0, 50)); setUnreadCount((c) => c + 1); setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 2400); }, []); const clearHistory = () => { setHistory([]); setUnreadCount(0); }; const markAsRead = () => setUnreadCount(0); return ( {children}

{toasts.map((t) => (

{t.msg}

))}

); }; const useToast = () => React.useContext(ToastContext); // --------- Modal ---------- const Modal = ({ title, onClose, children, footer }) => { React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]); return (

e.stopPropagation()}>

{title}

{children}

{footer}

); }; Object.assign(window, { Icon, Topbar, ThemeToggle, Tabs, StatusBadge, TipoTag, ToastContext, ToastProvider, useToast, Modal, });