// App shell: sidebar with expandable groups + topbar with sub-tab strip function Sidebar({ route, onNav, collapsed, onToggle, mobileOpen, onMobileClose }) { const { mod: currentMod, sub: currentSub } = parseRoute(route); // Which groups are open; current module always forced open const [open, setOpen] = useState(() => { try { return JSON.parse(localStorage.getItem('optima.navopen') || '{}'); } catch { return {}; } }); useEffect(() => { localStorage.setItem('optima.navopen', JSON.stringify(open)); }, [open]); // Detectar viewport desktop (lg breakpoint de Tailwind = 1024px) const [isDesktop, setIsDesktop] = useState(() => typeof window !== 'undefined' ? window.matchMedia('(min-width: 1024px)').matches : true, ); useEffect(() => { const mq = window.matchMedia('(min-width: 1024px)'); const handler = (e) => setIsDesktop(e.matches); mq.addEventListener('change', handler); return () => mq.removeEventListener('change', handler); }, []); // En mobile ignoramos `collapsed` — el drawer siempre se muestra expandido const effectiveCollapsed = isDesktop && collapsed; function go(modId, subId) { onNav(buildRoute(modId, subId || defaultSub(modId))); } return ( <> {/* Backdrop solo en mobile */} {mobileOpen && (
)} ); } function Topbar({ route, onNav, onOpenCmd, onOpenNotif, onOpenMobileNav, notifCount }) { const { mod, sub } = parseRoute(route); const modDef = NAV.find((m) => m.id === mod); const [modLabel, subLabel] = routeLabels(route); return (
Optima Drilling Pozo NETTO-4H {modLabel} {sub && ( <> {subLabel} )}

{sub ? subLabel : modLabel} {sub ? modLabel : modDef?.subtitle || ''}

MR
Martín Rojas
Supervisor
{/* Sub-tab strip */} {modDef?.children && (
{modDef.children.map((c) => { const isActive = c.id === sub; return ( ); })}
)}
); } // Command palette function CommandPalette({ open, onClose, onNav }) { const [q, setQ] = useState(''); const inputRef = useRef(null); useEffect(() => { if (open) setTimeout(() => inputRef.current?.focus(), 50); else setQ(''); }, [open]); // Build commands from NAV const cmds = []; NAV.forEach((m) => { if (!m.children) { cmds.push({ id: m.id, route: m.id, label: `Ir a ${m.label}`, icon: m.icon, group: 'Navegación', }); } else { m.children.forEach((c) => { cmds.push({ id: `${m.id}/${c.id}`, route: `${m.id}/${c.id}`, label: `${m.short || m.label} · ${c.label}`, icon: c.icon, group: m.label, }); }); } }); cmds.push( { id: 'parte-new', label: 'Nuevo reporte diario', icon: 'plus', group: 'Acciones' }, { id: 'export-pdf', label: 'Exportar reporte PDF', icon: 'download', group: 'Acciones' }, { id: 'send-client', label: 'Enviar reporte al cliente', icon: 'send', group: 'Acciones' }, ); const filtered = cmds.filter((c) => c.label.toLowerCase().includes(q.toLowerCase())); const groups = {}; filtered.forEach((c) => (groups[c.group] = groups[c.group] || []).push(c)); if (!open) return null; return (
setQ(e.target.value)} placeholder="Buscar módulo o acción…" className="flex-1 h-full bg-transparent outline-none text-[13px]" /> Esc
{Object.keys(groups).length === 0 ? (
Sin resultados.
) : ( Object.entries(groups).map(([g, list]) => (
{g}
{list.map((c) => ( ))}
)) )}
); } // Notifications panel function NotifPanel({ open, onClose, alerts }) { if (!open) return null; return (

Alertas del período

{alerts.length} activas
{alerts.map((a) => (
{a.level === 'high' ? 'Alta' : a.level === 'med' ? 'Media' : 'Info'}
{a.title}
{a.when} · {a.meta}
))}
); } Object.assign(window, { Sidebar, Topbar, CommandPalette, NotifPanel });