// Componentes compartidos — ALMACO v2.0 (conectado a API real) const { useState, useEffect, useRef, useMemo, useCallback } = React; // ─── Helpers ───────────────────────────────────────────────────────────────── const fmt = (n) => "$" + Number(n||0).toLocaleString("en-US", {minimumFractionDigits:2, maximumFractionDigits:2}); const fmtShort = (n) => { const v = Number(n || 0); if (v >= 1000000) return "$" + (v/1000000).toFixed(1) + "M"; if (v >= 1000) return "$" + (v/1000).toFixed(1) + "k"; return "$" + v.toFixed(0); }; const toDateOnly = (s) => { if (!s) return null; const str = String(s).slice(0, 10); const d = new Date(str + "T00:00:00"); return isNaN(d.getTime()) ? null : d; }; const fmtDate = (s) => { const d = toDateOnly(s); return d ? d.toLocaleDateString("es-SV", { day:"2-digit", month:"short" }) : "—"; }; const fmtDateFull = (s) => { const d = toDateOnly(s); return d ? d.toLocaleDateString("es-SV", { day:"2-digit", month:"long", year:"numeric" }) : "—"; }; // ─── Icons ──────────────────────────────────────────────────────────────────── const Icon = ({name, size=16}) => { const s = {width:size, height:size, fill:"none", stroke:"currentColor", strokeWidth:"1.7", strokeLinecap:"round", strokeLinejoin:"round"}; const paths = { dashboard: <>, building: <>, expense: <>, bank: <>, users: <>, folder: , chart: <>, bot: <>, bell: <>, search: <>, plus: <>, filter: , download: <>, upload: <>, settings: <>, logout: <>, chevdown: , chevright: , arrowright:<>, arrowup: <>, arrowdown: <>, check: , x: <>, clock: <>, location: <>, calendar: <>, send: <>, sparkles: <>, refresh: <>, eye: <>, eyeoff: <>, pencil: <>, trash: <>, dots: <>, file: <>, flow: <>, paperclip: , mic: <>, lock: <>, key: <>, shieldcheck: <>, user: <>, globe: <>, cpu: <>, sliders: <>, link: <>, edit: <>, 'user-plus': <>, shield: <>, 'eye-off': <>, 'bar-chart-2': <>, 'hard-drive': <>, 'message-square': , zap: , }; return {paths[name] || null}; }; // ─── Avatar ─────────────────────────────────────────────────────────────────── const Avatar = ({user, size=30}) => { if(!user) return null; return (
{user.iniciales}
); }; // ─── Pill ───────────────────────────────────────────────────────────────────── const Pill = ({color="gray", dot=false, children}) => ( {children} ); const estadoPill = (e) => { const map = { aprobado: {c:"green", l:"Aprobado"}, pendiente: {c:"yellow", l:"Pendiente"}, rechazado: {c:"red", l:"Rechazado"}, enviada: {c:"green", l:"Enviada"}, recibida: {c:"blue", l:"Recibida"}, denegada: {c:"red", l:"Denegada"}, pagada: {c:"green", l:"Pagada"}, completada: {c:"green", l:"Completada"}, "en-proceso":{c:"yellow", l:"En proceso"}, activo: {c:"green", l:"Activo"}, finalizado: {c:"blue", l:"Finalizado"}, }; const m = map[e] || {c:"gray", l:e}; return {m.l}; }; // ─── Brand Logo ─────────────────────────────────────────────────────────────── const BrandLogo = ({size="md"}) => { const map = { sm:{box:30, fs1:11}, md:{box:34, fs1:13}, lg:{box:46, fs1:18} }; const c = map[size]; return ( <>
ALMACO
app.almaco
Control de Gastos
); }; // ─── Donut SVG ──────────────────────────────────────────────────────────────── const Donut = ({segments, size=160, stroke=18}) => { const total = segments.reduce((a,s)=>a+s.value,0); const r = (size - stroke) / 2; const c = 2 * Math.PI * r; let offset = 0; return ( {segments.map((s,i) => { const len = total > 0 ? (s.value/total) * c : 0; const el = ( ); offset += len; return el; })} ); }; // ─── Sparkline ──────────────────────────────────────────────────────────────── const Sparkline = ({data, color="var(--yellow)", width=80, height=36}) => { if (!data || !data.length) return null; const max = Math.max(...data); const min = Math.min(...data); const range = max - min || 1; const pts = data.map((v,i) => { const x = (i/(data.length-1)) * width; const y = height - ((v - min)/range) * height; return `${x},${y}`; }).join(" "); const fill = `${pts} ${width},${height} 0,${height}`; return ( ); }; // ─── KPI Card ───────────────────────────────────────────────────────────────── const KpiCard = ({label, value, delta, deltaDir="neutral", icon, featured=false, spark, sparkColor, meta}) => (
{label}
{value}
{delta && {deltaDir==="up" && } {deltaDir==="down" && } {delta} } {meta && {meta}}
{spark && }
); // ─── Spinner ────────────────────────────────────────────────────────────────── const Spinner = ({size=20, color="var(--yellow)"}) => ( ); // ─── Empty State ────────────────────────────────────────────────────────────── const EmptyState = ({icon="file", title, sub, action}) => (
{title}
{sub &&
{sub}
}
{action}
); // ─── Error Banner ───────────────────────────────────────────────────────────── const ErrorBanner = ({msg, onRetry}) => (
{msg}
{onRetry && }
); // ─── Modal base ─────────────────────────────────────────────────────────────── const Modal = ({title, sub, onClose, children, width=480}) => (
e.target===e.currentTarget&&onClose()}>
{title}
{sub &&
{sub}
}
{children}
); // ─── Topbar ─────────────────────────────────────────────────────────────────── const Topbar = ({crumbs=[], user, setRoute}) => (
{crumbs.map((c,i) => ( {i>0 && } {c} ))}
⌘ K
); // ─── Permisos por rol ───────────────────────────────────────────────────────── // admin/gerencia: todo. finanzas: + transferencias. rrhh: + planillas. // campo/usuario: solo lo basico (dashboard, proyectos, gastos, archivos, reportes, ia). const ROLE_ACCESS = { admin: ["dashboard","proyectos","gastos","transferencias","planillas","archivos","reportes","ia","config"], gerencia: ["dashboard","proyectos","gastos","transferencias","planillas","archivos","reportes","ia","config"], finanzas: ["dashboard","proyectos","gastos","transferencias","archivos","reportes","ia"], rrhh: ["dashboard","proyectos","planillas","archivos","reportes","ia"], campo: ["dashboard","proyectos","gastos","archivos","reportes","ia"], usuario: ["dashboard","proyectos","archivos","reportes","ia"], }; const canSee = (rol, route) => (ROLE_ACCESS[rol] || []).includes(route); // ─── Sidebar ────────────────────────────────────────────────────────────────── const Sidebar = ({route, setRoute, user, onLogout}) => { const items = [ { id:"dashboard", label:"Dashboard", icon:"dashboard" }, { id:"proyectos", label:"Proyectos", icon:"building" }, { id:"gastos", label:"Gastos", icon:"expense" }, { id:"transferencias",label:"Transferencias", icon:"bank" }, { id:"planillas", label:"Planillas", icon:"users" }, ].filter(it => canSee(user?.rol, it.id)); const items2 = [ { id:"archivos", label:"Archivos", icon:"folder" }, { id:"reportes", label:"Reportes", icon:"chart" }, { id:"ia", label:"IA Asistente", icon:"sparkles" }, ].filter(it => canSee(user?.rol, it.id)); const canSeeConfig = canSee(user?.rol, "config"); return ( ); }; Object.assign(window, { fmt, fmtShort, fmtDate, fmtDateFull, toDateOnly, Icon, Avatar, Pill, estadoPill, BrandLogo, Donut, Sparkline, KpiCard, Spinner, EmptyState, ErrorBanner, Modal, Topbar, Sidebar, ROLE_ACCESS, canSee, });