// Desasf — shared icons, helpers, navigation // Global navigate function (set by App) function navigate(screenId, data) { if (window._desasfNavigate) window._desasfNavigate(screenId, data); } function openModal(modalId, data) { if (window._desasfOpenModal) window._desasfOpenModal(modalId, data); } const Icon = { dashboard: , ticket: , cash: , users: , catalog: , help: , audit: , reports: , repo: , settings: , sales: , search: , bell: , filter: , plus: , download: , upload: , arrow: , arrowUp: , arrowDown: , more: , truck: , beaker: , doc: , check: , clock: , pin: , phone: , mail: , building: , x: , logout: , }; function logout() { if (window._desasfLogout) window._desasfLogout(); } function fmtNum(n, decimals) { const x = Number(n); if (!isFinite(x)) return ''; const opts = decimals != null ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } : { maximumFractionDigits: 2 }; return x.toLocaleString('en-US', opts); } function fmtMoney(n, currency) { const cur = currency || (window._appConfig?.moneda) || 'PEN'; const sym = { PEN: 'S/', USD: '$', EUR: '€' }[cur] || cur; return sym + ' ' + fmtNum(n, 2); } function solicitudTitulo(sol) { if (!sol) return ''; const proy = (sol.proyecto || '').trim(); if (proy) return proy; if (sol.producto_nombre && sol.volumen != null) { const u = sol.unidad || 'm³'; return `${sol.producto_nombre} — ${fmtNum(sol.volumen)} ${u}`; } return sol.producto_nombre || sol.ticket || ''; } function solicitudSubtitulo(sol) { if (!sol) return ''; const parts = []; if (sol.ticket) parts.push(sol.ticket); if ((sol.proyecto || '').trim() && sol.producto_nombre) { const u = sol.unidad || 'm³'; const vol = sol.volumen != null ? `${fmtNum(sol.volumen)} ${u} ` : ''; parts.push(`${vol}${sol.producto_nombre}`); } if (sol.oc_numero) parts.push(`OC ${sol.oc_numero}`); return parts.join(' · '); } function exportCSV(filename, rows, columns) { const escape = (v) => { if (v == null) return ''; const s = String(v).replace(/"/g, '""'); return /[",\n]/.test(s) ? `"${s}"` : s; }; const header = columns.map(c => escape(c.label)).join(','); const body = rows.map(r => columns.map(c => escape(typeof c.value === 'function' ? c.value(r) : r[c.value]) ).join(',')).join('\n'); const csv = '' + header + '\n' + body; const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); } function DesasfLogo({ size = 32 }) { return (
); } function Sidebar({ active = 'dashboard' }) { const [counts, setCounts] = React.useState({ solicitudes: null, pagos: null }); React.useEffect(() => { DesasfAPI.get('/dashboard/stats') .then(s => setCounts({ solicitudes: Number(s?.solicitudes?.total ?? 0) || null, pagos: Number(s?.pagos?.por_validar ?? 0) || null, })) .catch(() => {}); }, []); const u = DesasfAPI.getCurrentUser() || {}; const parts = (u.nombre || 'Usuario').trim().split(/\s+/); const initials = parts.length >= 2 ? (parts[0][0] + parts[parts.length - 1][0]).toUpperCase() : (parts[0]?.[0] || '?').toUpperCase(); const displayName = parts.length >= 2 ? `${parts[0][0].toUpperCase()}. ${parts[parts.length - 1]}` : parts[0] || 'Usuario'; const rolLabels = { dev: 'Dev', admin: 'Admin', gerente: 'Gerente', finanzas: 'Finanzas', vendedor: 'Asist. téc. com.', operador_planta: 'Planta', conductor: 'Conductor', gerente_general: 'Gte. General', gerente_comercial: 'Gte. Comercial', cliente: 'Cliente', solo_lectura: 'Lectura' }; const rolLabel = rolLabels[u.rol] || u.rol || ''; // Cada apartado se muestra solo si el rol tiene el permiso que la pantalla // necesita — sin permiso, el item simplemente no aparece. const hasPerm = DesasfAPI.hasPerm; const items = [ { id: 'dashboard', label: 'Dashboard', icon: Icon.dashboard }, hasPerm('solicitudes.ver') && { id: 'solicitudes', label: 'Solicitudes', icon: Icon.ticket, count: counts.solicitudes }, hasPerm('pagos.ver') && { id: 'pagos', label: 'Pagos y depósitos', icon: Icon.cash, count: counts.pagos }, hasPerm('clientes.ver') && { id: 'gestion-clientes', label: 'Empresas clientes', icon: Icon.users }, hasPerm('catalogo.ver') && { id: 'catalogo', label: 'Catálogo', icon: Icon.catalog }, hasPerm('logistica.ver') && { id: 'logistica', label: 'Logística', icon: Icon.truck }, (hasPerm('reportes.ver') || u.rol === 'vendedor') && { id: 'fuerza', label: 'Fuerza de ventas', icon: Icon.sales }, ].filter(Boolean); const items2 = [ hasPerm('reportes.ver') && { id: 'reportes', label: 'Reportes', icon: Icon.reports }, hasPerm('auditoria.ver') && { id: 'auditoria', label: 'Auditoría', icon: Icon.audit }, { id: 'ayuda', label: 'Centro de ayuda', icon: Icon.help }, hasPerm('config.ver') && { id: 'config', label: 'Configuración', icon: Icon.settings }, ].filter(Boolean); return ( ); } // Helper: elige Sidebar o CliSidebar según rol function AppSidebar({ active }) { const u = DesasfAPI.getCurrentUser() || {}; if (u.rol !== 'cliente') return ; const map = { dashboard: 'inicio', clientes: 'docs', logistica: 'despachos', 'logistica-cliente': 'despachos', 'cliente-final': 'inicio', 'mi-vendedor': 'vendedor', 'mis-documentos': 'docs', 'mi-cuenta': 'mi-cuenta', }; return ; } // Client-facing sidebar (simplified) function CliSidebar({ active = 'inicio' }) { const items = [ { id: 'inicio', screen: 'cliente-final', label: 'Inicio', icon: Icon.dashboard }, { id: 'solicitudes', screen: 'solicitudes', label: 'Mis solicitudes', icon: Icon.ticket }, { id: 'pagos', screen: 'pagos', label: 'Pagos y facturas', icon: Icon.cash }, { id: 'despachos', screen: 'logistica-cliente', label: 'Despachos', icon: Icon.truck }, { id: 'catalogo', screen: 'catalogo', label: 'Catálogo', icon: Icon.catalog }, ]; const items2 = [ { id: 'ayuda', screen: 'ayuda', label: 'Centro de ayuda', icon: Icon.help }, { id: 'vendedor', screen: 'mi-vendedor', label: 'Mi asistente téc.', icon: Icon.users }, { id: 'docs', screen: 'mis-documentos', label: 'Mis documentos', icon: Icon.repo }, { id: 'mi-cuenta', screen: 'mi-cuenta', label: 'Mi cuenta', icon: Icon.settings }, ]; return ( ); } function Topbar({ crumbs = ['Dashboard'], cta }) { const [searchQ, setSearchQ] = React.useState(''); const [searchRes, setSearchRes] = React.useState(null); const [searchOpen, setSearchOpen] = React.useState(false); const [searchLoad, setSearchLoad] = React.useState(false); const [notifOpen, setNotifOpen] = React.useState(false); const [notifs, setNotifs] = React.useState([]); const [notifLoad, setNotifLoad] = React.useState(false); const searchTimer = React.useRef(null); const wrapperRef = React.useRef(null); const u = DesasfAPI.getCurrentUser() || {}; const isCliente = u.rol === 'cliente'; React.useEffect(() => { function onDocClick(e) { if (wrapperRef.current && !wrapperRef.current.contains(e.target)) { setSearchOpen(false); setNotifOpen(false); } } function onKey(e) { if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); const el = document.getElementById('topbar-search-input'); if (el) { el.focus(); setSearchOpen(true); } } if (e.key === 'Escape') { setSearchOpen(false); setNotifOpen(false); } } document.addEventListener('mousedown', onDocClick); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDocClick); document.removeEventListener('keydown', onKey); }; }, []); function loadNotifs() { setNotifLoad(true); DesasfAPI.get('/dashboard/notificaciones') .then(d => setNotifs(d.items || [])) .catch(() => setNotifs([])) .finally(() => setNotifLoad(false)); } React.useEffect(() => { loadNotifs(); const id = setInterval(loadNotifs, 60000); return () => clearInterval(id); }, []); function onSearchChange(v) { setSearchQ(v); setSearchOpen(true); if (searchTimer.current) clearTimeout(searchTimer.current); if (v.trim().length < 2) { setSearchRes(null); return; } setSearchLoad(true); searchTimer.current = setTimeout(() => { DesasfAPI.get('/dashboard/buscar?q=' + encodeURIComponent(v.trim())) .then(d => setSearchRes(d)) .catch(() => setSearchRes(null)) .finally(() => setSearchLoad(false)); }, 200); } function openSolicitud(id) { setSearchOpen(false); setSearchQ(''); navigate('solicitud-detalle', { solicitudId: id }); } function openCliente(id) { setSearchOpen(false); setSearchQ(''); navigate('clientes', { clienteId: id }); } function openProducto(_id) { setSearchOpen(false); setSearchQ(''); navigate(isCliente ? 'catalogo' : 'catalogo'); } function clickNotif(n) { setNotifOpen(false); if (n.link) navigate(n.link.screen, n.link.payload || {}); } function fmtTime(d) { if (!d) return ''; return window.formatRelativeTime ? window.formatRelativeTime(d) : new Date(d).toLocaleString('es-PE'); } const tipoIcon = { pago: Icon.cash, solicitud: Icon.ticket, despacho: Icon.truck, stock: Icon.beaker, }; const hasResults = searchRes && (searchRes.solicitudes?.length || searchRes.empresas?.length || searchRes.productos?.length); return (
{crumbs.map((c, i) => ( {i > 0 && /} {i === crumbs.length - 1 ? {c} : {c}} ))}
{ const el = document.getElementById('topbar-search-input'); if (el) el.focus(); setSearchOpen(true); }}> {Icon.search} onSearchChange(e.target.value)} onFocus={() => setSearchOpen(true)} placeholder="Buscar solicitud, cliente, producto…" style={{ border: 0, background: 'transparent', outline: 'none', flex: 1, fontSize: 13, color: 'var(--ink-1)', padding: 0, fontFamily: 'inherit' }}/> {!searchQ && ⌘K} {searchOpen && (searchQ.trim().length >= 2) && (
{searchLoad &&
Buscando…
} {!searchLoad && !hasResults && (
Sin resultados para "{searchQ}"
)} {searchRes?.solicitudes?.length > 0 && (
Solicitudes
{searchRes.solicitudes.map(s => (
openSolicitud(s.id)}> {Icon.ticket}
{s.proyecto ? `${s.proyecto} · ${s.ticket}` : `${s.ticket} · ${s.cliente_nombre}`}
{s.proyecto ? `${s.cliente_nombre} · ` : ''}{fmtNum(s.volumen)} {s.unidad} {s.producto_nombre}
))}
)} {searchRes?.empresas?.length > 0 && (
Empresas
{searchRes.empresas.map(e => (
openCliente(e.id)}> {Icon.users}
{e.razon_social}
RUC {e.ruc}
))}
)} {searchRes?.productos?.length > 0 && (
Productos
{searchRes.productos.map(p => (
openProducto(p.id)}> {Icon.beaker}
{p.nombre}
{p.codigo} · S/ {Number(p.precio_base).toLocaleString('es-PE')}/{p.unidad}
))}
)}
)}
{ setNotifOpen(o => !o); setSearchOpen(false); if (!notifOpen) loadNotifs(); }} style={{ position: 'relative' }} title="Notificaciones"> {Icon.bell} {notifs.length > 0 && } {notifOpen && (
e.stopPropagation()} style={{ position: 'absolute', top: 'calc(100% + 6px)', right: 0, width: 360, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 8, boxShadow: '0 8px 28px rgba(0,0,0,.18)', zIndex: 400, maxHeight: 480, overflowY: 'auto' }}>
Notificaciones {notifs.length} pendientes
{notifLoad &&
Cargando…
} {!notifLoad && notifs.length === 0 && (
Sin notificaciones pendientes.
)} {!notifLoad && notifs.map((n, i) => (
clickNotif(n)} style={{ padding: '10px 14px', borderBottom: i < notifs.length - 1 ? '1px solid var(--line)' : 0, alignItems: 'flex-start' }}>
{tipoIcon[n.tipo] || Icon.bell}
{n.titulo}
{n.mensaje}
{fmtTime(n.fecha)}
))}
)}
navigate(isCliente ? 'ayuda' : 'ayuda')} title="Centro de ayuda">{Icon.help}
{cta || ( !isCliente && DesasfAPI.hasPerm('solicitudes.crear') ? ( ) : null )}
); } function Pill({ kind, children }) { return {children}; } Object.assign(window, { Icon, DesasfLogo, Sidebar, CliSidebar, AppSidebar, Topbar, Pill, navigate, openModal, logout, exportCSV, solicitudTitulo, solicitudSubtitulo, fmtNum, fmtMoney });