/* ============================================================
Shell — Sidebar nav + Topbar + Status bar
============================================================ */
const NAV_GROUPS = [
{
label: "Operación",
items: [
{ id: "mapa", label: "Mapa", icon: "map" },
{ id: "rebote", label: "Inferencia de Ruta", icon: "waypoints" },
{ id: "candado", label: "Candado", icon: "lock" },
],
},
{
label: "Marcaciones",
items: [
{ id: "registrar", label: "Registrar placa", icon: "shield-plus" },
{ id: "alertas", label: "Alertas", icon: "bell-ring", unread: true },
],
},
{
label: "Administración",
items: [
{ id: "nodos", label: "Operatividad", icon: "router" },
],
},
];
const NAV_ALL_IDS = NAV_GROUPS.flatMap(g => g.items).map(i => i.id);
const SonarSidebar = ({ current, onNav, plate, theme, onToggleTheme, unreadAlerts = 0, operador = null, onLogout }) => {
// Paneles habilitados (de /api/config). Los no habilitados se ven bloqueados con candado.
const enabledScreens = (window.SONAR_FEATURES && window.SONAR_FEATURES.enabledScreens) || NAV_ALL_IDS;
const [tip, setTip] = React.useState(null); // tooltip "Próximamente" de los bloqueados
return (
{tip && Próximamente
}
);
};
// Contador de tiempo en sesión (cuenta hacia arriba en vivo).
// Contador de la sesión actual: arranca en 0 y cuenta hacia arriba. Sin login real
// todavía, así que se reinicia en cada recarga de la página (al remontar el componente).
const SessionTime = () => {
const [secs, setSecs] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setSecs(s => s + 1), 1000);
return () => clearInterval(id);
}, []);
const hh = String(Math.floor(secs / 3600)).padStart(2, "0");
const mm = String(Math.floor((secs % 3600) / 60)).padStart(2, "0");
const ss = String(secs % 60).padStart(2, "0");
return {hh}:{mm}:{ss};
};
const SonarTopbar = ({ screen, plate, onClearPlate, theme, onToggleTheme }) => {
const allItems = NAV_GROUPS.flatMap(g => g.items);
const item = allItems.find(n => n.id === screen);
return (
{item ? item.label : "Sonar"}
{plate && false && (
RASTREO ACTIVO
{plate.placa}
{plate.marcaciones.length > 0 && !}
)}
SISTEMA EN LÍNEA
GuardianIA · v3.0.0
QUINDÍO · {window.SONAR_NODES.length} nodos
);
};
const SonarStatusBar = ({ screen, plate }) => {
const total = window.SONAR_NODES.length;
const active = window.SONAR_NODES.filter(n => n.status === "active").length;
const alerts = window.SONAR_NODES.filter(n => n.status === "alert").length;
const offline = window.SONAR_NODES.filter(n => n.status === "inactive").length;
// Nombre legible de la vista (no el id interno: rebote→Inferencia de Ruta, nodos→Operatividad).
const vista = (NAV_GROUPS.flatMap(g => g.items).find(n => n.id === screen) || {}).label || screen;
return (
);
};
/* ============================================================
SonarSegmented — switch segmentado ESTÁNDAR (animado).
Indicador deslizante que se desplaza/redimensiona al botón activo.
API: value, onChange, options=[{ id, label, icon, badge? }].
Lo usan Operatividad y Registrar placa (mismo diseño en todo el sistema).
============================================================ */
const SonarSegmented = ({ value, onChange, options = [] }) => {
const wrapRef = React.useRef(null);
const btnRefs = React.useRef({});
const [ind, setInd] = React.useState({ left: 0, top: 0, width: 0, height: 0, ready: false });
// Firma estable: solo recalcula cuando cambia el seleccionado o los badges/opciones.
const sig = options.map(o => `${o.id}:${o.badge != null ? o.badge : ""}`).join("|");
const measure = React.useCallback(() => {
const el = btnRefs.current[value];
const wrap = wrapRef.current;
if (!el || !wrap) return;
const er = el.getBoundingClientRect();
const wr = wrap.getBoundingClientRect();
setInd({ left: er.left - wr.left, top: er.top - wr.top, width: er.width, height: er.height, ready: true });
}, [value]);
React.useLayoutEffect(() => { measure(); }, [measure, sig]);
React.useEffect(() => {
window.addEventListener("resize", measure);
return () => window.removeEventListener("resize", measure);
}, [measure]);
return (
{/* Indicador deslizante animado que cubre EXACTAMENTE el botón activo */}
{options.map(o => {
const sel = value === o.id;
return (
);
})}