JohannVelazquez
633d05e330
- Estructura nueva: README maestro, bitacora/ (REGISTRO, PENDIENTES, plantillas), propuesta/, fuentes/; material superado a _archivado/ - Propuesta v1.0: MVP BIND-first con emisión asistida MXN/USD (dry-run + confirmación, timbra PAC de BIND), 112-136 h / $67,200-$81,600 + IVA, stack .NET 10 + EF Core + Angular 21 + PostgreSQL 17 sobre Azure - Bitácora: historial de correos + 2 llamadas (incl. revisión 4-jun) y pendientes - Prototipo y diagrama actualizados a v1.0; precios de Azure verificados - Archivo ajeno (proyecto EOS) retirado del repo Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1530 lines
67 KiB
HTML
1530 lines
67 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Balam · Plataforma Financiera · Prototipo MVP Fase 1</title>
|
||
<style>
|
||
:root{
|
||
--bg:#ffffff;
|
||
--ink:#0f172a;
|
||
--ink-2:#1e293b;
|
||
--muted:#64748b;
|
||
--muted-2:#94a3b8;
|
||
--line:#e2e8f0;
|
||
--line-2:#cbd5e1;
|
||
--soft:#f8fafc;
|
||
--soft-2:#f1f5f9;
|
||
|
||
--brand:#1e3a8a;
|
||
--brand-2:#1d4ed8;
|
||
--brand-soft:#eff6ff;
|
||
|
||
--ok:#16a34a;
|
||
--ok-bg:#dcfce7;
|
||
--ok-ink:#14532d;
|
||
--warn:#d97706;
|
||
--warn-bg:#fef3c7;
|
||
--warn-ink:#92400e;
|
||
--bad:#dc2626;
|
||
--bad-bg:#fee2e2;
|
||
--bad-ink:#991b1b;
|
||
--info:#0284c7;
|
||
--info-bg:#e0f2fe;
|
||
--info-ink:#075985;
|
||
--neutral-bg:#f1f5f9;
|
||
--neutral-ink:#475569;
|
||
|
||
--white-list:#7c3aed;
|
||
--white-list-bg:#f5f3ff;
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
html,body{background:var(--soft); margin:0; padding:0}
|
||
body{
|
||
font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
|
||
color:var(--ink); font-size:14px; line-height:1.5;
|
||
}
|
||
|
||
/* ---------------- layout ---------------- */
|
||
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
|
||
|
||
/* ---------------- sidebar ---------------- */
|
||
.sidebar{
|
||
background:var(--ink); color:#cbd5e1; padding:24px 16px; position:sticky; top:0; height:100vh;
|
||
display:flex; flex-direction:column;
|
||
}
|
||
.brand{display:flex; align-items:center; gap:10px; padding:0 8px 24px; border-bottom:1px solid #1e293b; margin-bottom:16px}
|
||
.brand-logo{
|
||
width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,#3b82f6,#1e3a8a);
|
||
display:grid; place-items:center; font-weight:800; color:#fff; font-size:16px; letter-spacing:0.05em;
|
||
}
|
||
.brand-name{color:#f8fafc; font-weight:700; font-size:16px; letter-spacing:-0.01em}
|
||
.brand-sub{color:#64748b; font-size:11px; letter-spacing:0.1em; text-transform:uppercase}
|
||
|
||
.nav-label{color:#475569; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; padding:14px 12px 6px}
|
||
.nav-item{
|
||
display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:7px; cursor:pointer;
|
||
color:#cbd5e1; font-size:13.5px; transition:background 0.12s;
|
||
}
|
||
.nav-item:hover{background:#1e293b}
|
||
.nav-item.active{background:#1e40af; color:#fff; font-weight:500}
|
||
.nav-icon{width:18px; height:18px; opacity:0.8}
|
||
.nav-item.active .nav-icon{opacity:1}
|
||
|
||
.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid #1e293b}
|
||
.user-chip{display:flex; align-items:center; gap:10px; padding:8px 10px}
|
||
.user-avatar{width:32px; height:32px; border-radius:50%; background:#334155; color:#f1f5f9; display:grid; place-items:center; font-weight:600; font-size:12px}
|
||
.user-name{color:#f1f5f9; font-size:13px; font-weight:500; line-height:1.2}
|
||
.user-role{color:#64748b; font-size:11px; line-height:1.2}
|
||
|
||
/* ---------------- main ---------------- */
|
||
.main{padding:0}
|
||
.topbar{
|
||
background:#fff; border-bottom:1px solid var(--line); padding:14px 32px;
|
||
display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5;
|
||
}
|
||
.crumbs{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px}
|
||
.crumbs .sep{color:var(--muted-2)}
|
||
.crumbs .current{color:var(--ink); font-weight:600}
|
||
.top-actions{display:flex; align-items:center; gap:12px}
|
||
.sync-badge{
|
||
display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted);
|
||
background:var(--soft-2); padding:6px 10px; border-radius:6px; border:1px solid var(--line);
|
||
}
|
||
.sync-dot{width:7px; height:7px; border-radius:50%; background:var(--ok)}
|
||
|
||
.view{padding:28px 32px}
|
||
.view-title{font-size:24px; font-weight:700; letter-spacing:-0.02em; margin:0 0 4px}
|
||
.view-sub{color:var(--muted); margin:0 0 24px; font-size:14px}
|
||
|
||
/* ---------------- buttons ---------------- */
|
||
.btn{
|
||
display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:7px;
|
||
font-size:13px; font-weight:500; cursor:pointer; border:1px solid transparent; background:#fff;
|
||
transition:all 0.12s;
|
||
}
|
||
.btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
|
||
.btn-primary:hover{background:var(--brand-2); border-color:var(--brand-2)}
|
||
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line-2)}
|
||
.btn-ghost:hover{background:var(--soft)}
|
||
.btn-sm{padding:5px 10px; font-size:12px}
|
||
|
||
/* ---------------- cards / kpis ---------------- */
|
||
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px}
|
||
.kpi{
|
||
background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px;
|
||
}
|
||
.kpi-label{font-size:12px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px}
|
||
.kpi-value{font-size:26px; font-weight:700; letter-spacing:-0.02em; color:var(--ink)}
|
||
.kpi-meta{font-size:12px; color:var(--muted); margin-top:6px}
|
||
.kpi-meta strong{color:var(--ink)}
|
||
.kpi-icon{
|
||
width:28px; height:28px; border-radius:7px; display:grid; place-items:center;
|
||
float:right; font-size:14px; margin-top:-4px;
|
||
}
|
||
.kpi-icon.brand{background:var(--brand-soft); color:var(--brand)}
|
||
.kpi-icon.warn{background:var(--warn-bg); color:var(--warn-ink)}
|
||
.kpi-icon.bad{background:var(--bad-bg); color:var(--bad-ink)}
|
||
.kpi-icon.ok{background:var(--ok-bg); color:var(--ok-ink)}
|
||
|
||
/* ---------------- panel ---------------- */
|
||
.grid-2{display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:16px}
|
||
.panel{background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px}
|
||
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
|
||
.panel-title{font-size:15px; font-weight:700; letter-spacing:-0.01em}
|
||
.panel-sub{font-size:12px; color:var(--muted); margin-top:2px}
|
||
.link{color:var(--brand-2); font-size:12px; text-decoration:none; font-weight:500}
|
||
.link:hover{text-decoration:underline}
|
||
|
||
/* ---------------- aging bars ---------------- */
|
||
.aging{display:flex; flex-direction:column; gap:10px}
|
||
.aging-row{display:grid; grid-template-columns:90px 1fr 110px; gap:12px; align-items:center; font-size:13px}
|
||
.aging-label{color:var(--muted); font-weight:500}
|
||
.aging-bar{height:10px; background:var(--soft-2); border-radius:6px; overflow:hidden}
|
||
.aging-fill{height:100%; border-radius:6px}
|
||
.aging-fill.b1{background:#94a3b8}
|
||
.aging-fill.b2{background:#f59e0b}
|
||
.aging-fill.b3{background:#ef4444}
|
||
.aging-fill.b4{background:#991b1b}
|
||
.aging-amount{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
|
||
|
||
/* ---------------- table ---------------- */
|
||
.table-wrap{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden}
|
||
.table-tools{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap; align-items:center}
|
||
.filter-pill{
|
||
display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px;
|
||
border:1px solid var(--line-2); font-size:12px; color:var(--ink); background:#fff; cursor:pointer;
|
||
}
|
||
.filter-pill.active{background:var(--ink); color:#fff; border-color:var(--ink)}
|
||
.search-input{
|
||
flex:1; min-width:200px; max-width:320px; padding:6px 12px;
|
||
border:1px solid var(--line-2); border-radius:7px; font-size:13px; outline:none;
|
||
}
|
||
.search-input:focus{border-color:var(--brand-2)}
|
||
|
||
table{width:100%; border-collapse:collapse}
|
||
thead th{
|
||
text-align:left; padding:11px 18px; background:var(--soft); border-bottom:1px solid var(--line);
|
||
font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;
|
||
}
|
||
tbody td{padding:14px 18px; border-bottom:1px solid var(--soft-2); font-size:13.5px; vertical-align:middle}
|
||
tbody tr:last-child td{border-bottom:none}
|
||
tbody tr:hover{background:var(--soft)}
|
||
.num{text-align:right; font-variant-numeric:tabular-nums}
|
||
.folio{font-family:ui-monospace,"SF Mono","Cascadia Mono",monospace; font-size:12.5px; color:var(--ink-2)}
|
||
|
||
/* ---------------- badges ---------------- */
|
||
.badge{
|
||
display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:5px;
|
||
font-size:11.5px; font-weight:600; letter-spacing:0.01em;
|
||
}
|
||
.badge.vigente{background:var(--info-bg); color:var(--info-ink)}
|
||
.badge.proxima{background:var(--warn-bg); color:var(--warn-ink)}
|
||
.badge.vencida{background:var(--bad-bg); color:var(--bad-ink)}
|
||
.badge.pagada{background:var(--ok-bg); color:var(--ok-ink)}
|
||
.badge.cancelada{background:var(--neutral-bg); color:var(--neutral-ink)}
|
||
.badge.dot::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block}
|
||
|
||
.whitelist-tag{
|
||
display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:4px;
|
||
background:var(--white-list-bg); color:var(--white-list); font-size:11px; font-weight:600;
|
||
border:1px solid #ddd6fe; margin-left:6px; cursor:help;
|
||
}
|
||
|
||
.client-cell{display:flex; align-items:center; gap:8px}
|
||
.client-name{font-weight:500; color:var(--ink)}
|
||
.client-rfc{font-size:11.5px; color:var(--muted-2); font-family:ui-monospace,monospace}
|
||
|
||
.moneda-flag{
|
||
display:inline-block; padding:1px 5px; border-radius:3px; font-size:10.5px; font-weight:700;
|
||
letter-spacing:0.05em; margin-left:4px;
|
||
}
|
||
.moneda-mxn{background:#dcfce7; color:#14532d}
|
||
.moneda-usd{background:#dbeafe; color:#1e40af}
|
||
|
||
/* ---------------- list (alertas / top clientes) ---------------- */
|
||
.alert-list{display:flex; flex-direction:column; gap:10px}
|
||
.alert-item{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px dashed var(--line)}
|
||
.alert-item:last-child{border-bottom:none; padding-bottom:0}
|
||
.alert-icon{
|
||
width:30px; height:30px; border-radius:7px; display:grid; place-items:center; font-size:13px;
|
||
flex-shrink:0;
|
||
}
|
||
.alert-icon.warn{background:var(--warn-bg); color:var(--warn-ink)}
|
||
.alert-icon.bad{background:var(--bad-bg); color:var(--bad-ink)}
|
||
.alert-icon.info{background:var(--info-bg); color:var(--info-ink)}
|
||
.alert-text{flex:1; font-size:13px}
|
||
.alert-meta{font-size:11.5px; color:var(--muted); margin-top:2px}
|
||
|
||
.client-list-row{
|
||
display:grid; grid-template-columns:1fr 100px 110px; gap:10px;
|
||
padding:11px 0; border-bottom:1px solid var(--soft-2); align-items:center;
|
||
}
|
||
.client-list-row:last-child{border-bottom:none}
|
||
|
||
/* ---------------- factura detalle ---------------- */
|
||
.detail-grid{display:grid; grid-template-columns:1fr 320px; gap:20px}
|
||
.detail-section{margin-bottom:24px}
|
||
.detail-section h3{font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin:0 0 10px}
|
||
.kv{display:grid; grid-template-columns:140px 1fr; gap:8px 16px; font-size:13.5px}
|
||
.kv dt{color:var(--muted); font-weight:500}
|
||
.kv dd{margin:0; color:var(--ink); font-weight:500}
|
||
|
||
.concept-table{width:100%; border-collapse:collapse; margin-top:8px}
|
||
.concept-table th{text-align:left; padding:8px 10px; font-size:11.5px; color:var(--muted); background:var(--soft); border-bottom:1px solid var(--line); text-transform:uppercase; letter-spacing:0.05em}
|
||
.concept-table td{padding:10px; border-bottom:1px solid var(--soft-2); font-size:13px}
|
||
.concept-table tfoot td{font-weight:600; background:var(--soft); border-top:1px solid var(--line); border-bottom:none}
|
||
|
||
.timeline{display:flex; flex-direction:column; gap:14px; position:relative; padding-left:14px}
|
||
.timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line)}
|
||
.tl-item{position:relative; font-size:13px}
|
||
.tl-item::before{content:""; position:absolute; left:-13px; top:5px; width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid var(--brand-2)}
|
||
.tl-item.muted::before{border-color:var(--line-2)}
|
||
.tl-date{font-size:11.5px; color:var(--muted); margin-bottom:2px}
|
||
|
||
/* ---------------- form / config ---------------- */
|
||
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
|
||
.form-row{margin-bottom:18px}
|
||
.form-row label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
|
||
.form-row .hint{font-size:11.5px; color:var(--muted); margin-top:4px}
|
||
.input, .select{
|
||
width:100%; padding:8px 12px; border:1px solid var(--line-2); border-radius:7px;
|
||
font-size:13.5px; outline:none; background:#fff;
|
||
}
|
||
.input:focus, .select:focus{border-color:var(--brand-2)}
|
||
.switch{position:relative; display:inline-block; width:38px; height:22px; vertical-align:middle}
|
||
.switch input{display:none}
|
||
.slider{
|
||
position:absolute; cursor:pointer; inset:0; background:var(--line-2); border-radius:22px; transition:0.2s;
|
||
}
|
||
.slider::before{
|
||
content:""; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:#fff;
|
||
border-radius:50%; transition:0.2s; box-shadow:0 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
.switch input:checked + .slider{background:var(--brand-2)}
|
||
.switch input:checked + .slider::before{transform:translateX(16px)}
|
||
|
||
/* ---------------- view visibility ---------------- */
|
||
.view{display:none}
|
||
.view.active{display:block}
|
||
|
||
/* ---------------- footer note ---------------- */
|
||
.note{
|
||
background:#fffbeb; border:1px solid #fde68a; color:#78350f;
|
||
padding:10px 14px; border-radius:8px; font-size:12.5px; margin-bottom:18px;
|
||
display:flex; gap:10px; align-items:flex-start;
|
||
}
|
||
.note-icon{flex-shrink:0; font-size:14px}
|
||
|
||
.prototype-banner{
|
||
background:linear-gradient(90deg,#fef3c7,#fde68a); color:#78350f;
|
||
padding:8px 24px; font-size:12px; font-weight:600; text-align:center;
|
||
border-bottom:1px solid #f59e0b; letter-spacing:0.02em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="prototype-banner">
|
||
PROTOTIPO · MVP Fase 1 — Datos ficticios para validación de UX. Producción se conecta a BIND ERP vía API.
|
||
</div>
|
||
|
||
<div class="app">
|
||
|
||
<!-- ============== SIDEBAR ============== -->
|
||
<aside class="sidebar">
|
||
<div class="brand">
|
||
<div class="brand-logo">B</div>
|
||
<div>
|
||
<div class="brand-name">Balam</div>
|
||
<div class="brand-sub">Finanzas</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-label">Operación</div>
|
||
<div class="nav-item active" data-view="dashboard">
|
||
<span class="nav-icon">▣</span> Dashboard
|
||
</div>
|
||
<div class="nav-item" data-view="facturas">
|
||
<span class="nav-icon">≡</span> Facturas
|
||
</div>
|
||
<div class="nav-item" data-view="emitir">
|
||
<span class="nav-icon">✎</span> Emitir factura
|
||
</div>
|
||
<div class="nav-item" data-view="clientes">
|
||
<span class="nav-icon">◉</span> Clientes
|
||
</div>
|
||
<div class="nav-item" data-view="cobranza">
|
||
<span class="nav-icon">$</span> Cobranza
|
||
</div>
|
||
|
||
<div class="nav-label">Sistema</div>
|
||
<div class="nav-item" data-view="sincronizacion">
|
||
<span class="nav-icon">↻</span> Sincronización BIND
|
||
</div>
|
||
<div class="nav-item" data-view="alertas">
|
||
<span class="nav-icon">⚑</span> Reglas y alertas
|
||
</div>
|
||
<div class="nav-item" data-view="bitacora">
|
||
<span class="nav-icon">⌘</span> Bitácora
|
||
</div>
|
||
|
||
<div class="sidebar-foot">
|
||
<div class="user-chip">
|
||
<div class="user-avatar">JV</div>
|
||
<div>
|
||
<div class="user-name">Johann V.</div>
|
||
<div class="user-role">Finanzas · Admin</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ============== MAIN ============== -->
|
||
<main class="main">
|
||
|
||
<div class="topbar">
|
||
<div class="crumbs">
|
||
<span>Balam</span>
|
||
<span class="sep">›</span>
|
||
<span class="current" id="crumb-current">Dashboard</span>
|
||
</div>
|
||
<div class="top-actions">
|
||
<div class="sync-badge">
|
||
<span class="sync-dot"></span>
|
||
BIND · sincronizado hace 14 min
|
||
</div>
|
||
<button class="btn btn-ghost btn-sm">Exportar</button>
|
||
<button class="btn btn-primary btn-sm" onclick="show('emitir')">+ Nueva factura</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============== DASHBOARD ============== -->
|
||
<section class="view active" id="view-dashboard">
|
||
<h1 class="view-title">Dashboard financiero</h1>
|
||
<p class="view-sub">Visión consolidada de facturación, cuentas por cobrar y alertas. Datos sincronizados desde BIND ERP cada 4 horas.</p>
|
||
|
||
<div class="kpi-grid">
|
||
<div class="kpi">
|
||
<div class="kpi-icon brand">$</div>
|
||
<div class="kpi-label">Facturado del mes</div>
|
||
<div class="kpi-value">$2,847,500</div>
|
||
<div class="kpi-meta"><strong>47 facturas</strong> · MXN equiv.</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi-icon ok">▼</div>
|
||
<div class="kpi-label">CxC vigente</div>
|
||
<div class="kpi-value">$1,452,300</div>
|
||
<div class="kpi-meta"><strong>22 facturas</strong> abiertas</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi-icon warn">!</div>
|
||
<div class="kpi-label">Próximas a vencer (5d)</div>
|
||
<div class="kpi-value">$386,200</div>
|
||
<div class="kpi-meta"><strong>6 facturas</strong> requieren acción</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi-icon bad">×</div>
|
||
<div class="kpi-label">Vencidas</div>
|
||
<div class="kpi-value">$298,750</div>
|
||
<div class="kpi-meta"><strong>4 facturas</strong> · gestión activa</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2">
|
||
<!-- Aging -->
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="panel-title">Aging de cartera</div>
|
||
<div class="panel-sub">Distribución de cuentas por cobrar abiertas</div>
|
||
</div>
|
||
<a class="link" href="#">Ver detalle →</a>
|
||
</div>
|
||
<div class="aging">
|
||
<div class="aging-row">
|
||
<span class="aging-label">Por vencer</span>
|
||
<div class="aging-bar"><div class="aging-fill b1" style="width:62%"></div></div>
|
||
<span class="aging-amount">$1,066,100</span>
|
||
</div>
|
||
<div class="aging-row">
|
||
<span class="aging-label">1 – 30 días</span>
|
||
<div class="aging-bar"><div class="aging-fill b2" style="width:24%"></div></div>
|
||
<span class="aging-amount">$172,400</span>
|
||
</div>
|
||
<div class="aging-row">
|
||
<span class="aging-label">31 – 60 días</span>
|
||
<div class="aging-bar"><div class="aging-fill b3" style="width:12%"></div></div>
|
||
<span class="aging-amount">$98,250</span>
|
||
</div>
|
||
<div class="aging-row">
|
||
<span class="aging-label">60+ días</span>
|
||
<div class="aging-bar"><div class="aging-fill b4" style="width:4%"></div></div>
|
||
<span class="aging-amount">$28,100</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alertas -->
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="panel-title">Alertas internas</div>
|
||
<div class="panel-sub">Equipo de Finanzas</div>
|
||
</div>
|
||
<a class="link" href="#">Ver todas →</a>
|
||
</div>
|
||
<div class="alert-list">
|
||
<div class="alert-item">
|
||
<div class="alert-icon warn">!</div>
|
||
<div class="alert-text">
|
||
<strong>6 facturas</strong> vencen en los próximos 5 días
|
||
<div class="alert-meta">Total $386,200 MXN · 2 son de lista blanca (gestión humana)</div>
|
||
</div>
|
||
</div>
|
||
<div class="alert-item">
|
||
<div class="alert-icon bad">×</div>
|
||
<div class="alert-text">
|
||
Factura <span class="folio">F-2026-0438</span> vencida hace 38 días
|
||
<div class="alert-meta">Constructora del Norte SA · $87,540 MXN</div>
|
||
</div>
|
||
</div>
|
||
<div class="alert-item">
|
||
<div class="alert-icon info">i</div>
|
||
<div class="alert-text">
|
||
Sincronización BIND completada
|
||
<div class="alert-meta">14 facturas nuevas · 3 actualizaciones de estado · hace 14 min</div>
|
||
</div>
|
||
</div>
|
||
<div class="alert-item">
|
||
<div class="alert-icon warn">⚠</div>
|
||
<div class="alert-text">
|
||
Factura <span class="folio">F-2026-0451</span> sin fecha de vencimiento
|
||
<div class="alert-meta">Requiere revisión manual en BIND</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2">
|
||
<!-- Top clientes -->
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="panel-title">Top clientes con saldo abierto</div>
|
||
<div class="panel-sub">Ordenado por monto adeudado</div>
|
||
</div>
|
||
<a class="link" href="#" onclick="show('clientes');return false">Ver catálogo →</a>
|
||
</div>
|
||
<div>
|
||
<div class="client-list-row" style="border-bottom:1px solid var(--line); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600">
|
||
<span>Cliente</span>
|
||
<span class="num">Facturas</span>
|
||
<span class="num">Saldo</span>
|
||
</div>
|
||
<div class="client-list-row">
|
||
<span><strong>ACUNTIA México</strong> <span class="whitelist-tag" title="Lista blanca: sin recordatorios automáticos">★ Lista blanca</span></span>
|
||
<span class="num">7</span>
|
||
<span class="num"><strong>$412,800</strong></span>
|
||
</div>
|
||
<div class="client-list-row">
|
||
<span><strong>Grupo Bimbo SAB</strong> <span class="whitelist-tag">★ Top 3</span></span>
|
||
<span class="num">3</span>
|
||
<span class="num"><strong>$287,500</strong></span>
|
||
</div>
|
||
<div class="client-list-row">
|
||
<span><strong>FEMSA Comercio</strong> <span class="whitelist-tag">★ Top 3</span></span>
|
||
<span class="num">4</span>
|
||
<span class="num"><strong>$198,400</strong></span>
|
||
</div>
|
||
<div class="client-list-row">
|
||
<span><strong>TechCorp USA Inc.</strong> <span class="moneda-flag moneda-usd">USD</span></span>
|
||
<span class="num">2</span>
|
||
<span class="num"><strong>$8,420 USD</strong></span>
|
||
</div>
|
||
<div class="client-list-row">
|
||
<span><strong>Constructora del Norte SA</strong></span>
|
||
<span class="num">3</span>
|
||
<span class="num"><strong>$176,200</strong></span>
|
||
</div>
|
||
<div class="client-list-row">
|
||
<span><strong>Servicios Industriales MTY</strong></span>
|
||
<span class="num">2</span>
|
||
<span class="num"><strong>$94,800</strong></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Resumen de moneda -->
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="panel-title">Resumen multimoneda</div>
|
||
<div class="panel-sub">TC del DOF al cierre del día</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex; flex-direction:column; gap:14px">
|
||
<div style="padding:14px; background:var(--soft); border-radius:8px; border:1px solid var(--line)">
|
||
<div style="font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px">Pesos mexicanos · MXN</div>
|
||
<div style="font-size:22px; font-weight:700; letter-spacing:-0.02em">$2,679,400</div>
|
||
<div style="font-size:12px; color:var(--muted); margin-top:2px">41 facturas del mes</div>
|
||
</div>
|
||
<div style="padding:14px; background:var(--soft); border-radius:8px; border:1px solid var(--line)">
|
||
<div style="font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px">Dólares · USD</div>
|
||
<div style="font-size:22px; font-weight:700; letter-spacing:-0.02em">$8,420 USD</div>
|
||
<div style="font-size:12px; color:var(--muted); margin-top:2px">6 facturas · TC $19.95 = $168,100 MXN equiv.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== FACTURAS ============== -->
|
||
<section class="view" id="view-facturas">
|
||
<h1 class="view-title">Facturas</h1>
|
||
<p class="view-sub">47 facturas del mes en curso · Sincronizadas desde BIND ERP</p>
|
||
|
||
<div class="table-wrap">
|
||
<div class="table-tools">
|
||
<input class="search-input" placeholder="Buscar por folio, cliente, RFC..." />
|
||
<span class="filter-pill active">Todas (47)</span>
|
||
<span class="filter-pill">Vigentes (22)</span>
|
||
<span class="filter-pill">Por vencer (6)</span>
|
||
<span class="filter-pill">Vencidas (4)</span>
|
||
<span class="filter-pill">Pagadas (15)</span>
|
||
<button class="btn btn-ghost btn-sm" style="margin-left:auto">⛃ Filtros avanzados</button>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Folio</th>
|
||
<th>Cliente</th>
|
||
<th>Emisión</th>
|
||
<th>Vencimiento</th>
|
||
<th class="num">Total</th>
|
||
<th class="num">Saldo</th>
|
||
<th>Estado</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr onclick="show('detalle')" style="cursor:pointer">
|
||
<td><span class="folio">F-2026-0461</span></td>
|
||
<td>
|
||
<div class="client-cell">
|
||
<div>
|
||
<div class="client-name">ACUNTIA México <span class="whitelist-tag">★</span></div>
|
||
<div class="client-rfc">AME840921H42</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>28 may 2026</td>
|
||
<td>27 jun 2026</td>
|
||
<td class="num">$87,420 <span class="moneda-flag moneda-mxn">MXN</span></td>
|
||
<td class="num">$87,420</td>
|
||
<td><span class="badge vigente dot">Vigente</span></td>
|
||
<td><a class="link" href="#">Ver →</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="folio">F-2026-0460</span></td>
|
||
<td>
|
||
<div class="client-cell">
|
||
<div>
|
||
<div class="client-name">TechCorp USA Inc.</div>
|
||
<div class="client-rfc">XEXX010101000</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>27 may 2026</td>
|
||
<td>26 jun 2026</td>
|
||
<td class="num">$4,250 <span class="moneda-flag moneda-usd">USD</span></td>
|
||
<td class="num">$4,250</td>
|
||
<td><span class="badge vigente dot">Vigente</span></td>
|
||
<td><a class="link" href="#">Ver →</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="folio">F-2026-0459</span></td>
|
||
<td>
|
||
<div class="client-cell">
|
||
<div>
|
||
<div class="client-name">Grupo Bimbo SAB <span class="whitelist-tag">★ Top 3</span></div>
|
||
<div class="client-rfc">BIM800131487</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>26 may 2026</td>
|
||
<td>02 jun 2026</td>
|
||
<td class="num">$148,750 <span class="moneda-flag moneda-mxn">MXN</span></td>
|
||
<td class="num">$148,750</td>
|
||
<td><span class="badge proxima dot">5 días</span></td>
|
||
<td><a class="link" href="#">Ver →</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="folio">F-2026-0458</span></td>
|
||
<td>
|
||
<div class="client-cell">
|
||
<div>
|
||
<div class="client-name">Servicios Industriales MTY</div>
|
||
<div class="client-rfc">SIM150612QA8</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>25 may 2026</td>
|
||
<td>01 jun 2026</td>
|
||
<td class="num">$54,300 <span class="moneda-flag moneda-mxn">MXN</span></td>
|
||
<td class="num">$54,300</td>
|
||
<td><span class="badge proxima dot">4 días</span></td>
|
||
<td><a class="link" href="#">Ver →</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="folio">F-2026-0451</span></td>
|
||
<td>
|
||
<div class="client-cell">
|
||
<div>
|
||
<div class="client-name">Innovatech Solutions SA</div>
|
||
<div class="client-rfc">ISO180304QF1</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>22 may 2026</td>
|
||
<td style="color:var(--bad-ink); font-weight:500">⚠ sin fecha</td>
|
||
<td class="num">$32,100 <span class="moneda-flag moneda-mxn">MXN</span></td>
|
||
<td class="num">$32,100</td>
|
||
<td><span class="badge vencida dot">Revisar</span></td>
|
||
<td><a class="link" href="#">Ver →</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="folio">F-2026-0438</span></td>
|
||
<td>
|
||
<div class="client-cell">
|
||
<div>
|
||
<div class="client-name">Constructora del Norte SA</div>
|
||
<div class="client-rfc">CNO050118R23</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>15 abr 2026</td>
|
||
<td style="color:var(--bad-ink); font-weight:500">20 abr 2026</td>
|
||
<td class="num">$87,540 <span class="moneda-flag moneda-mxn">MXN</span></td>
|
||
<td class="num">$87,540</td>
|
||
<td><span class="badge vencida dot">Vencida (38d)</span></td>
|
||
<td><a class="link" href="#">Ver →</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="folio">F-2026-0432</span></td>
|
||
<td>
|
||
<div class="client-cell">
|
||
<div>
|
||
<div class="client-name">FEMSA Comercio <span class="whitelist-tag">★ Top 3</span></div>
|
||
<div class="client-rfc">FCO850612D9A</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>10 abr 2026</td>
|
||
<td>10 may 2026</td>
|
||
<td class="num">$92,800 <span class="moneda-flag moneda-mxn">MXN</span></td>
|
||
<td class="num">$0</td>
|
||
<td><span class="badge pagada dot">Pagada</span></td>
|
||
<td><a class="link" href="#">Ver →</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="folio">F-2026-0428</span></td>
|
||
<td>
|
||
<div class="client-cell">
|
||
<div>
|
||
<div class="client-name">Logística Express SA</div>
|
||
<div class="client-rfc">LEX090715R3M</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>05 abr 2026</td>
|
||
<td>05 may 2026</td>
|
||
<td class="num">$38,500 <span class="moneda-flag moneda-mxn">MXN</span></td>
|
||
<td class="num">$0</td>
|
||
<td><span class="badge pagada dot">Pagada</span></td>
|
||
<td><a class="link" href="#">Ver →</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="folio">F-2026-0418</span></td>
|
||
<td>
|
||
<div class="client-cell">
|
||
<div>
|
||
<div class="client-name">Distribuidora del Bajío</div>
|
||
<div class="client-rfc">DBJ110208M2K</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>28 mar 2026</td>
|
||
<td>27 abr 2026</td>
|
||
<td class="num">$15,200 <span class="moneda-flag moneda-mxn">MXN</span></td>
|
||
<td class="num">$15,200</td>
|
||
<td><span class="badge vencida dot">Vencida (31d)</span></td>
|
||
<td><a class="link" href="#">Ver →</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== DETALLE FACTURA ============== -->
|
||
<section class="view" id="view-detalle">
|
||
<a class="link" href="#" onclick="show('facturas');return false" style="margin-bottom:8px; display:inline-block">← Volver a facturas</a>
|
||
<div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px">
|
||
<div>
|
||
<h1 class="view-title">Factura <span class="folio" style="font-size:20px">F-2026-0461</span></h1>
|
||
<p class="view-sub" style="margin-bottom:0">UUID <span class="folio">a8b2c91d-3f4e-5a67-89bc-def012345678</span> · timbrada por BIND</p>
|
||
</div>
|
||
<div style="display:flex; gap:8px">
|
||
<button class="btn btn-ghost btn-sm">↓ PDF</button>
|
||
<button class="btn btn-ghost btn-sm">↓ XML</button>
|
||
<button class="btn btn-primary btn-sm">+ Registrar pago</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-bottom:18px; display:flex; gap:10px; align-items:center">
|
||
<span class="badge vigente dot" style="font-size:13px; padding:5px 12px">Vigente · vence en 30 días</span>
|
||
<span class="whitelist-tag" style="font-size:12px; padding:4px 10px">★ Cliente en lista blanca · sin recordatorios automáticos</span>
|
||
</div>
|
||
|
||
<div class="detail-grid">
|
||
<div>
|
||
<div class="panel">
|
||
<div class="detail-section">
|
||
<h3>Cliente</h3>
|
||
<dl class="kv">
|
||
<dt>Razón social</dt><dd>ACUNTIA México SA de CV</dd>
|
||
<dt>RFC</dt><dd class="folio">AME840921H42</dd>
|
||
<dt>Contacto cobranza</dt><dd>Mariana Rivera · cobranza@acuntia.mx</dd>
|
||
<dt>Condición de pago</dt><dd>30 días</dd>
|
||
</dl>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>Conceptos</h3>
|
||
<table class="concept-table">
|
||
<thead>
|
||
<tr><th>Descripción</th><th class="num">Cant.</th><th class="num">P. Unit.</th><th class="num">Importe</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Servicio mensual de consultoría · mayo 2026</td>
|
||
<td class="num">1</td>
|
||
<td class="num">$60,000.00</td>
|
||
<td class="num">$60,000.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Horas adicionales de implementación · paquete A</td>
|
||
<td class="num">10</td>
|
||
<td class="num">$1,500.00</td>
|
||
<td class="num">$15,000.00</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr><td colspan="3" class="num">Subtotal</td><td class="num">$75,000.00</td></tr>
|
||
<tr><td colspan="3" class="num">IVA 16%</td><td class="num">$12,420.00</td></tr>
|
||
<tr><td colspan="3" class="num"><strong>Total MXN</strong></td><td class="num"><strong>$87,420.00</strong></td></tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>Pagos aplicados</h3>
|
||
<p style="color:var(--muted); font-size:13px; margin:8px 0 0">Sin pagos registrados. Saldo pendiente: <strong style="color:var(--ink)">$87,420.00 MXN</strong></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bitácora -->
|
||
<div>
|
||
<div class="panel">
|
||
<div class="panel-head" style="margin-bottom:14px">
|
||
<div class="panel-title">Bitácora</div>
|
||
</div>
|
||
<div class="timeline">
|
||
<div class="tl-item">
|
||
<div class="tl-date">28 may 2026 · 10:14</div>
|
||
Factura sincronizada desde BIND<br>
|
||
<span style="color:var(--muted); font-size:12px">job de sync programado</span>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-date">28 may 2026 · 09:58</div>
|
||
Timbrada en BIND<br>
|
||
<span style="color:var(--muted); font-size:12px">PAC integrado</span>
|
||
</div>
|
||
<div class="tl-item muted">
|
||
<div class="tl-date">28 may 2026 · 09:55</div>
|
||
Creada en BIND ERP<br>
|
||
<span style="color:var(--muted); font-size:12px">Por Pedro Ayala</span>
|
||
</div>
|
||
<div class="tl-item muted">
|
||
<div class="tl-date">02 jul 2026 · planeada</div>
|
||
Alerta interna programada<br>
|
||
<span style="color:var(--muted); font-size:12px">5 días antes de vencimiento</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== EMITIR FACTURA ============== -->
|
||
<section class="view" id="view-emitir">
|
||
<h1 class="view-title">Emitir factura</h1>
|
||
<p class="view-sub">Crear cotización y convertirla en factura vía BIND ERP · Emisión con confirmación humana</p>
|
||
|
||
<div class="note">
|
||
<span class="note-icon">🔒</span>
|
||
<div><strong>Emisión protegida.</strong> Ninguna factura se emite sin tu confirmación explícita. La acción corre primero en <strong>modo simulación (dry-run)</strong> contra BIND; el timbrado CFDI lo realiza el PAC integrado de BIND. Toda emisión queda registrada en la bitácora.</div>
|
||
</div>
|
||
|
||
<div class="detail-grid">
|
||
<!-- Formulario -->
|
||
<div>
|
||
<div class="panel">
|
||
<div class="panel-head" style="margin-bottom:14px">
|
||
<div class="panel-title">Datos de la factura</div>
|
||
<span class="badge vigente">Paso 1 de 2 · Cotización</span>
|
||
</div>
|
||
|
||
<div class="form-grid" style="grid-template-columns:1fr 1fr; gap:16px">
|
||
<div class="form-row">
|
||
<label>Cliente</label>
|
||
<select class="select">
|
||
<option>ACUNTIA México SA de CV</option>
|
||
<option>Grupo Bimbo SAB de CV</option>
|
||
<option>TechCorp USA Inc. (extranjero)</option>
|
||
<option>Servicios Industriales MTY</option>
|
||
</select>
|
||
<div class="hint">Catálogo sincronizado desde BIND</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Moneda</label>
|
||
<select class="select">
|
||
<option>MXN — con IVA 16%</option>
|
||
<option>USD — sin IVA (cliente extranjero)</option>
|
||
</select>
|
||
<div class="hint">TC DOF aplicado al momento de emisión</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Condición de pago</label>
|
||
<select class="select">
|
||
<option>30 días</option>
|
||
<option>45 días</option>
|
||
<option>15 días</option>
|
||
<option>Contado</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Fecha de emisión</label>
|
||
<input class="input" type="text" value="28 may 2026" />
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin:8px 0 8px">Conceptos</h3>
|
||
<table class="concept-table">
|
||
<thead>
|
||
<tr><th>Descripción</th><th class="num">Cant.</th><th class="num">P. Unit.</th><th class="num">Importe</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><input class="input" type="text" value="Servicio mensual de consultoría · mayo 2026" style="border:none; padding:4px 0"></td>
|
||
<td class="num">1</td>
|
||
<td class="num">$60,000.00</td>
|
||
<td class="num">$60,000.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td><input class="input" type="text" value="Horas adicionales de implementación" style="border:none; padding:4px 0"></td>
|
||
<td class="num">10</td>
|
||
<td class="num">$1,500.00</td>
|
||
<td class="num">$15,000.00</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr><td colspan="3" class="num">Subtotal</td><td class="num">$75,000.00</td></tr>
|
||
<tr><td colspan="3" class="num">IVA 16%</td><td class="num">$12,420.00</td></tr>
|
||
<tr><td colspan="3" class="num"><strong>Total MXN</strong></td><td class="num"><strong>$87,420.00</strong></td></tr>
|
||
</tfoot>
|
||
</table>
|
||
<button class="btn btn-ghost btn-sm" style="margin-top:10px">+ Agregar concepto</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Panel de emisión / dry-run -->
|
||
<div>
|
||
<div class="panel">
|
||
<div class="panel-head" style="margin-bottom:14px">
|
||
<div class="panel-title">Simulación y emisión</div>
|
||
</div>
|
||
|
||
<div style="display:flex; flex-direction:column; gap:10px; margin-bottom:16px">
|
||
<div style="display:flex; justify-content:space-between; font-size:13px"><span style="color:var(--muted)">Cliente</span><span style="font-weight:600">ACUNTIA México</span></div>
|
||
<div style="display:flex; justify-content:space-between; font-size:13px"><span style="color:var(--muted)">Moneda</span><span class="moneda-flag moneda-mxn">MXN</span></div>
|
||
<div style="display:flex; justify-content:space-between; font-size:13px"><span style="color:var(--muted)">Total</span><span style="font-weight:700">$87,420.00</span></div>
|
||
</div>
|
||
|
||
<div style="padding:12px; background:var(--soft); border:1px solid var(--line); border-radius:8px; margin-bottom:14px">
|
||
<div style="display:flex; align-items:center; gap:8px; margin-bottom:8px">
|
||
<span class="badge pagada dot">Dry-run OK</span>
|
||
<span style="font-size:12px; color:var(--muted)">Validación sin afectar BIND</span>
|
||
</div>
|
||
<div style="font-size:12.5px; color:var(--ink-2); line-height:1.6">
|
||
✓ Cliente válido en BIND<br>
|
||
✓ Datos fiscales completos<br>
|
||
✓ Suma de conceptos = total<br>
|
||
✓ Sin duplicado de folio reciente<br>
|
||
✓ Lista para emitir
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-ghost" style="width:100%; margin-bottom:8px">▷ Ejecutar simulación (dry-run)</button>
|
||
<button class="btn btn-primary" style="width:100%">✓ Confirmar y emitir en BIND</button>
|
||
|
||
<p style="font-size:11.5px; color:var(--muted); margin-top:12px; line-height:1.5">
|
||
Al confirmar, BIND genera y timbra la factura con su PAC. La acción es irreversible y queda en bitácora con tu usuario y fecha.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="panel" style="margin-top:16px">
|
||
<div class="panel-title" style="margin-bottom:10px">Estado de emisión</div>
|
||
<div class="badge cancelada" style="font-size:12px; padding:5px 10px">Borrador · aún no emitida</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== CLIENTES ============== -->
|
||
<section class="view" id="view-clientes">
|
||
<h1 class="view-title">Catálogo de clientes</h1>
|
||
<p class="view-sub">Sincronizado desde BIND · La bandera de lista blanca se gestiona en esta plataforma (no en BIND)</p>
|
||
|
||
<div class="note">
|
||
<span class="note-icon">★</span>
|
||
<div><strong>Lista blanca dura:</strong> los clientes marcados con ★ <em>nunca</em> reciben recordatorios automáticos masivos. La gestión de cobranza de estos clientes es siempre humana, vía equipo de Finanzas.</div>
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<div class="table-tools">
|
||
<input class="search-input" placeholder="Buscar cliente por nombre o RFC..." />
|
||
<span class="filter-pill active">Todos (38)</span>
|
||
<span class="filter-pill">Lista blanca (4)</span>
|
||
<span class="filter-pill">Con saldo (18)</span>
|
||
<button class="btn btn-primary btn-sm" style="margin-left:auto">+ Agregar excepción</button>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Cliente</th>
|
||
<th>RFC</th>
|
||
<th>País / Moneda</th>
|
||
<th>Cond. pago</th>
|
||
<th class="num">Facturas abiertas</th>
|
||
<th class="num">Saldo</th>
|
||
<th>Lista blanca</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>ACUNTIA México SA de CV</strong></td>
|
||
<td class="folio">AME840921H42</td>
|
||
<td>MX · MXN</td>
|
||
<td>30 días</td>
|
||
<td class="num">7</td>
|
||
<td class="num"><strong>$412,800</strong></td>
|
||
<td><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Grupo Bimbo SAB de CV</strong></td>
|
||
<td class="folio">BIM800131487</td>
|
||
<td>MX · MXN</td>
|
||
<td>45 días</td>
|
||
<td class="num">3</td>
|
||
<td class="num"><strong>$287,500</strong></td>
|
||
<td><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>FEMSA Comercio SA</strong></td>
|
||
<td class="folio">FCO850612D9A</td>
|
||
<td>MX · MXN</td>
|
||
<td>30 días</td>
|
||
<td class="num">4</td>
|
||
<td class="num"><strong>$198,400</strong></td>
|
||
<td><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Cemex Operaciones SA de CV</strong></td>
|
||
<td class="folio">CEM920701A5R</td>
|
||
<td>MX · MXN</td>
|
||
<td>60 días</td>
|
||
<td class="num">2</td>
|
||
<td class="num"><strong>$132,600</strong></td>
|
||
<td><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>TechCorp USA Inc.</strong></td>
|
||
<td class="folio">XEXX010101000</td>
|
||
<td>USA · USD</td>
|
||
<td>30 días</td>
|
||
<td class="num">2</td>
|
||
<td class="num"><strong>$8,420 USD</strong></td>
|
||
<td><label class="switch"><input type="checkbox"><span class="slider"></span></label></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Constructora del Norte SA</strong></td>
|
||
<td class="folio">CNO050118R23</td>
|
||
<td>MX · MXN</td>
|
||
<td>30 días</td>
|
||
<td class="num">3</td>
|
||
<td class="num"><strong>$176,200</strong></td>
|
||
<td><label class="switch"><input type="checkbox"><span class="slider"></span></label></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Servicios Industriales MTY</strong></td>
|
||
<td class="folio">SIM150612QA8</td>
|
||
<td>MX · MXN</td>
|
||
<td>30 días</td>
|
||
<td class="num">2</td>
|
||
<td class="num"><strong>$94,800</strong></td>
|
||
<td><label class="switch"><input type="checkbox"><span class="slider"></span></label></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Innovatech Solutions SA</strong></td>
|
||
<td class="folio">ISO180304QF1</td>
|
||
<td>MX · MXN</td>
|
||
<td>15 días</td>
|
||
<td class="num">1</td>
|
||
<td class="num"><strong>$32,100</strong></td>
|
||
<td><label class="switch"><input type="checkbox"><span class="slider"></span></label></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Distribuidora del Bajío SA</strong></td>
|
||
<td class="folio">DBJ110208M2K</td>
|
||
<td>MX · MXN</td>
|
||
<td>30 días</td>
|
||
<td class="num">1</td>
|
||
<td class="num"><strong>$15,200</strong></td>
|
||
<td><label class="switch"><input type="checkbox"><span class="slider"></span></label></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Logística Express SA</strong></td>
|
||
<td class="folio">LEX090715R3M</td>
|
||
<td>MX · MXN</td>
|
||
<td>30 días</td>
|
||
<td class="num">0</td>
|
||
<td class="num">$0</td>
|
||
<td><label class="switch"><input type="checkbox"><span class="slider"></span></label></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== COBRANZA ============== -->
|
||
<section class="view" id="view-cobranza">
|
||
<h1 class="view-title">Cobranza</h1>
|
||
<p class="view-sub">Lista de seguimiento operativo · Alertas internas al equipo de Finanzas</p>
|
||
|
||
<div class="note">
|
||
<span class="note-icon">i</span>
|
||
<div>En Fase 1 las alertas son <strong>internas al equipo de Finanzas</strong>. Recordatorios automáticos por email al cliente y pago con link Stripe entran en Fase 2.</div>
|
||
</div>
|
||
|
||
<div class="kpi-grid" style="grid-template-columns:repeat(3,1fr)">
|
||
<div class="kpi">
|
||
<div class="kpi-label">Por gestionar esta semana</div>
|
||
<div class="kpi-value">10</div>
|
||
<div class="kpi-meta">$684,950 MXN</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi-label">Lista blanca activa</div>
|
||
<div class="kpi-value">4</div>
|
||
<div class="kpi-meta">Sin alerta automática · gestión humana</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi-label">Vencidas con seguimiento</div>
|
||
<div class="kpi-value">4</div>
|
||
<div class="kpi-meta">$298,750 MXN</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<div class="table-tools">
|
||
<span class="filter-pill active">Por vencer (6)</span>
|
||
<span class="filter-pill">Vencidas (4)</span>
|
||
<span class="filter-pill">Excepciones (4)</span>
|
||
<button class="btn btn-ghost btn-sm" style="margin-left:auto">📋 Generar lista para finanzas</button>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Prioridad</th>
|
||
<th>Factura</th>
|
||
<th>Cliente</th>
|
||
<th>Vence</th>
|
||
<th class="num">Saldo</th>
|
||
<th>Acción sugerida</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="badge bad dot">Alta</span></td>
|
||
<td><span class="folio">F-2026-0438</span></td>
|
||
<td>Constructora del Norte SA</td>
|
||
<td style="color:var(--bad-ink)">Vencida (38d)</td>
|
||
<td class="num">$87,540</td>
|
||
<td>Escalar a gerencia · 3er recordatorio</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge bad dot">Alta</span></td>
|
||
<td><span class="folio">F-2026-0418</span></td>
|
||
<td>Distribuidora del Bajío</td>
|
||
<td style="color:var(--bad-ink)">Vencida (31d)</td>
|
||
<td class="num">$15,200</td>
|
||
<td>Llamar a contacto cobranza</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge proxima dot">Media</span></td>
|
||
<td><span class="folio">F-2026-0458</span></td>
|
||
<td>Servicios Industriales MTY</td>
|
||
<td>4 días</td>
|
||
<td class="num">$54,300</td>
|
||
<td>Enviar recordatorio amistoso</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge neutral" style="background:var(--neutral-bg); color:var(--neutral-ink)">Manual</span></td>
|
||
<td><span class="folio">F-2026-0459</span></td>
|
||
<td>Grupo Bimbo SAB <span class="whitelist-tag">★ Top 3</span></td>
|
||
<td>5 días</td>
|
||
<td class="num">$148,750</td>
|
||
<td><em style="color:var(--muted)">Lista blanca · gestión humana</em></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge proxima dot">Media</span></td>
|
||
<td><span class="folio">F-2026-0454</span></td>
|
||
<td>Hospitales Premier SA</td>
|
||
<td>3 días</td>
|
||
<td class="num">$67,200</td>
|
||
<td>Enviar recordatorio amistoso</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge neutral" style="background:var(--neutral-bg); color:var(--neutral-ink)">Manual</span></td>
|
||
<td><span class="folio">F-2026-0461</span></td>
|
||
<td>ACUNTIA México <span class="whitelist-tag">★</span></td>
|
||
<td>30 días</td>
|
||
<td class="num">$87,420</td>
|
||
<td><em style="color:var(--muted)">Lista blanca · gestión humana</em></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== SINCRONIZACIÓN ============== -->
|
||
<section class="view" id="view-sincronizacion">
|
||
<h1 class="view-title">Sincronización BIND ERP</h1>
|
||
<p class="view-sub">Estado de las sincronizaciones programadas con la API de BIND · 20,000 req/día disponibles</p>
|
||
|
||
<div class="kpi-grid" style="grid-template-columns:repeat(3,1fr)">
|
||
<div class="kpi">
|
||
<div class="kpi-icon ok">✓</div>
|
||
<div class="kpi-label">Última sincronización</div>
|
||
<div class="kpi-value" style="font-size:18px">hace 14 min</div>
|
||
<div class="kpi-meta">14 facturas nuevas · 3 actualizaciones</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi-label">Próxima programada</div>
|
||
<div class="kpi-value" style="font-size:18px">en 3 h 46 min</div>
|
||
<div class="kpi-meta">Frecuencia: cada 4 horas</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi-label">Uso de cuota (hoy)</div>
|
||
<div class="kpi-value" style="font-size:18px">847 / 20,000</div>
|
||
<div class="kpi-meta">4.2% consumido · OK</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="panel-title">Histórico de sincronizaciones</div>
|
||
<div class="panel-sub">Últimas 24 horas</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm">↻ Sincronizar ahora</button>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Fecha</th>
|
||
<th>Tipo</th>
|
||
<th>Resultado</th>
|
||
<th class="num">Registros</th>
|
||
<th class="num">Duración</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>28 may 2026 · 10:14</td>
|
||
<td>Facturas + Pagos</td>
|
||
<td><span class="badge pagada dot">OK</span></td>
|
||
<td class="num">14 nuevas · 3 modificadas</td>
|
||
<td class="num">8.2 s</td>
|
||
</tr>
|
||
<tr>
|
||
<td>28 may 2026 · 06:14</td>
|
||
<td>Facturas + Pagos + Clientes</td>
|
||
<td><span class="badge pagada dot">OK</span></td>
|
||
<td class="num">9 nuevas · 1 cliente nuevo</td>
|
||
<td class="num">12.7 s</td>
|
||
</tr>
|
||
<tr>
|
||
<td>28 may 2026 · 02:14</td>
|
||
<td>Facturas + Pagos</td>
|
||
<td><span class="badge pagada dot">OK</span></td>
|
||
<td class="num">2 nuevas</td>
|
||
<td class="num">4.1 s</td>
|
||
</tr>
|
||
<tr>
|
||
<td>27 may 2026 · 22:14</td>
|
||
<td>Facturas + Pagos</td>
|
||
<td><span class="badge proxima dot">Parcial</span></td>
|
||
<td class="num">5 nuevas · 1 error reintentado</td>
|
||
<td class="num">15.3 s</td>
|
||
</tr>
|
||
<tr>
|
||
<td>27 may 2026 · 18:14</td>
|
||
<td>Facturas + Pagos</td>
|
||
<td><span class="badge pagada dot">OK</span></td>
|
||
<td class="num">8 nuevas · 2 modificadas</td>
|
||
<td class="num">7.9 s</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== REGLAS Y ALERTAS ============== -->
|
||
<section class="view" id="view-alertas">
|
||
<h1 class="view-title">Reglas y alertas</h1>
|
||
<p class="view-sub">Configuración de alertas internas, ventanas de aviso y frecuencia de reportes</p>
|
||
|
||
<div class="form-grid">
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="panel-title">Alertas de vencimiento</div>
|
||
<div class="panel-sub">Ventana de aviso antes del vencimiento de factura</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Días de anticipación</label>
|
||
<input class="input" type="number" value="5" />
|
||
<div class="hint">Generar alerta interna N días antes del vencimiento</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Frecuencia de re-aviso</label>
|
||
<select class="select">
|
||
<option>Diaria mientras esté vigente la ventana</option>
|
||
<option>Solo el primer día</option>
|
||
<option>Cada 2 días</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Destinatarios internos</label>
|
||
<input class="input" type="text" value="finanzas@balam.mx, ara@balam.mx" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="panel-title">Lista blanca de clientes</div>
|
||
<div class="panel-sub">Excepciones de recordatorio automático</div>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:13px; color:var(--muted); margin-top:0">Los siguientes clientes <strong style="color:var(--ink)">nunca</strong> reciben alerta automática. Su cobranza la gestiona el equipo de Finanzas manualmente.</p>
|
||
<div style="margin-top:14px; display:flex; flex-direction:column; gap:8px">
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--white-list-bg); border:1px solid #ddd6fe; border-radius:8px">
|
||
<span><strong>ACUNTIA México</strong></span>
|
||
<button class="btn btn-ghost btn-sm">Remover</button>
|
||
</div>
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--white-list-bg); border:1px solid #ddd6fe; border-radius:8px">
|
||
<span><strong>Grupo Bimbo SAB</strong> <span style="color:var(--muted); font-size:12px">· Top 3</span></span>
|
||
<button class="btn btn-ghost btn-sm">Remover</button>
|
||
</div>
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--white-list-bg); border:1px solid #ddd6fe; border-radius:8px">
|
||
<span><strong>FEMSA Comercio</strong> <span style="color:var(--muted); font-size:12px">· Top 3</span></span>
|
||
<button class="btn btn-ghost btn-sm">Remover</button>
|
||
</div>
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--white-list-bg); border:1px solid #ddd6fe; border-radius:8px">
|
||
<span><strong>Cemex Operaciones</strong> <span style="color:var(--muted); font-size:12px">· Top 3</span></span>
|
||
<button class="btn btn-ghost btn-sm">Remover</button>
|
||
</div>
|
||
<button class="btn btn-ghost btn-sm" style="margin-top:6px">+ Agregar cliente a lista blanca</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="panel-title">Sincronización con BIND</div>
|
||
<div class="panel-sub">Frecuencia y ventana del job de sync</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Frecuencia</label>
|
||
<select class="select">
|
||
<option>Cada 4 horas</option>
|
||
<option>Cada 2 horas</option>
|
||
<option>Cada hora</option>
|
||
<option>Una vez al día (00:00)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Ventana de operación</label>
|
||
<input class="input" type="text" value="06:00 – 22:00 (CST)" />
|
||
<div class="hint">Fuera de esta ventana solo se ejecuta sync 1× al día</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="panel-title">Reporte operativo</div>
|
||
<div class="panel-sub">Envío programado a dirección y finanzas</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Frecuencia</label>
|
||
<select class="select">
|
||
<option>Semanal · viernes 18:00</option>
|
||
<option>Diaria · 09:00</option>
|
||
<option>Quincenal</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Formato</label>
|
||
<select class="select">
|
||
<option>PDF + Excel</option>
|
||
<option>Solo PDF</option>
|
||
<option>Solo Excel</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Destinatarios</label>
|
||
<input class="input" type="text" value="ara@balam.mx, finanzas@balam.mx, noe@balam.mx" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top:18px; display:flex; gap:10px; justify-content:flex-end">
|
||
<button class="btn btn-ghost">Cancelar</button>
|
||
<button class="btn btn-primary">Guardar cambios</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== BITÁCORA ============== -->
|
||
<section class="view" id="view-bitacora">
|
||
<h1 class="view-title">Bitácora de auditoría</h1>
|
||
<p class="view-sub">Registro completo e inmutable de eventos, sincronizaciones, alertas y acciones manuales</p>
|
||
|
||
<div class="table-wrap">
|
||
<div class="table-tools">
|
||
<input class="search-input" placeholder="Buscar por usuario, entidad o acción..." />
|
||
<span class="filter-pill active">Todos</span>
|
||
<span class="filter-pill">Sincronización</span>
|
||
<span class="filter-pill">Acción manual</span>
|
||
<span class="filter-pill">Alertas</span>
|
||
<span class="filter-pill">Acceso</span>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Fecha · hora</th>
|
||
<th>Usuario / proceso</th>
|
||
<th>Acción</th>
|
||
<th>Entidad</th>
|
||
<th>Resultado</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>28 may 2026 · 10:14:23</td>
|
||
<td>sistema · job-sync-bind</td>
|
||
<td>Sync facturas + pagos</td>
|
||
<td>—</td>
|
||
<td><span class="badge pagada dot">14 nuevas, 3 modificadas</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>28 may 2026 · 09:42:11</td>
|
||
<td>Johann Velazquez</td>
|
||
<td>Marcar lista blanca</td>
|
||
<td>Cliente · ACUNTIA México</td>
|
||
<td><span class="badge pagada dot">OK</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>28 may 2026 · 09:38:55</td>
|
||
<td>Johann Velazquez</td>
|
||
<td>Login</td>
|
||
<td>—</td>
|
||
<td><span class="badge pagada dot">OK</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>28 may 2026 · 06:14:08</td>
|
||
<td>sistema · job-sync-bind</td>
|
||
<td>Sync facturas + pagos + clientes</td>
|
||
<td>—</td>
|
||
<td><span class="badge pagada dot">9 nuevas · 1 cliente nuevo</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>28 may 2026 · 02:14:02</td>
|
||
<td>sistema · job-sync-bind</td>
|
||
<td>Sync facturas + pagos</td>
|
||
<td>—</td>
|
||
<td><span class="badge pagada dot">2 nuevas</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>27 may 2026 · 22:18:14</td>
|
||
<td>sistema · job-sync-bind</td>
|
||
<td>Sync facturas + pagos</td>
|
||
<td>—</td>
|
||
<td><span class="badge proxima dot">Reintento exitoso (1 fallo transitorio)</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>27 may 2026 · 18:14:30</td>
|
||
<td>sistema · job-sync-bind</td>
|
||
<td>Sync facturas + pagos</td>
|
||
<td>—</td>
|
||
<td><span class="badge pagada dot">8 nuevas, 2 modificadas</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>27 may 2026 · 16:22:08</td>
|
||
<td>sistema · job-alertas</td>
|
||
<td>Alerta interna generada</td>
|
||
<td>Factura · F-2026-0438</td>
|
||
<td><span class="badge vencida dot">Vencimiento crítico</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>27 may 2026 · 14:10:55</td>
|
||
<td>Erika Chávez</td>
|
||
<td>Exportar reporte</td>
|
||
<td>CxC semanal · XLSX</td>
|
||
<td><span class="badge pagada dot">OK</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>27 may 2026 · 11:08:42</td>
|
||
<td>Araceli Sánchez</td>
|
||
<td>Login</td>
|
||
<td>—</td>
|
||
<td><span class="badge pagada dot">OK</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
const titles = {
|
||
dashboard:'Dashboard',
|
||
facturas:'Facturas',
|
||
emitir:'Emitir factura',
|
||
detalle:'Facturas › Detalle',
|
||
clientes:'Clientes',
|
||
cobranza:'Cobranza',
|
||
sincronizacion:'Sincronización BIND',
|
||
alertas:'Reglas y alertas',
|
||
bitacora:'Bitácora'
|
||
};
|
||
|
||
function show(view){
|
||
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
||
const target = document.getElementById('view-' + view);
|
||
if(target) target.classList.add('active');
|
||
|
||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||
const navItem = document.querySelector(`.nav-item[data-view="${view}"]`);
|
||
if(navItem) navItem.classList.add('active');
|
||
|
||
document.getElementById('crumb-current').textContent = titles[view] || view;
|
||
window.scrollTo({top:0, behavior:'smooth'});
|
||
}
|
||
|
||
document.querySelectorAll('.nav-item[data-view]').forEach(el => {
|
||
el.addEventListener('click', () => show(el.dataset.view));
|
||
});
|
||
|
||
document.querySelectorAll('.filter-pill').forEach(p => {
|
||
p.addEventListener('click', e => {
|
||
const siblings = e.target.parentElement.querySelectorAll('.filter-pill');
|
||
siblings.forEach(s => s.classList.remove('active'));
|
||
e.target.classList.add('active');
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|