From 97ca5d6c10b31bc66543d4d5933f8751f15e326e Mon Sep 17 00:00:00 2001
From: Kavi <kdoi@email.com>
Date: Tue, 2 Jun 2026 02:12:34 -0400
Subject: [PATCH] Redesign dashboard: sidebar nav, donut chart, card feed
 layout

---
 web/dashboard.html | 956 ++++++++++++++++++++++++---------------------
 1 file changed, 520 insertions(+), 436 deletions(-)

diff --git a/web/dashboard.html b/web/dashboard.html
index 9a0f303..d44a9b2 100644
--- a/web/dashboard.html
+++ b/web/dashboard.html
@@ -5,369 +5,495 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>money-trace · dashboard</title>
 <style>
-  :root{
-    --bg:#13131a; --panel:#1b1b24; --line:#2a2a37; --txt:#e7e7ee; --mut:#8a8a9a;
-    --in:#5ec48a; --out:#d98a8a; --accent:#c8b5d1; --chip:#23232e;
-    --warn:#c8a85e; --link-funds:#7ab3d9; --link-fin:#9bc8a4;
-  }
-  *{box-sizing:border-box;margin:0;padding:0}
-  body{background:var(--bg);color:var(--txt);font:13px/1.5 ui-sans-serif,-apple-system,Segoe UI,sans-serif;min-height:100vh;display:flex;flex-direction:column}
-  a{color:inherit;text-decoration:none}
+:root {
+  --bg:      #0d0d12;
+  --surface: #14141c;
+  --raised:  #1c1c28;
+  --border:  #242433;
+  --border2: #2e2e44;
+  --txt:     #e2e2f0;
+  --sub:     #7070a0;
+  --dim:     #4a4a70;
+  --in:      #4ade9a;
+  --in-dim:  #1a3d2a;
+  --out:     #f06a6a;
+  --out-dim: #3d1a1a;
+  --acc:     #a78bfa;
+  --acc-dim: #2a1f4a;
+  --gold:    #f0b84a;
+  --gold-dim:#3d2e0f;
+  --blue:    #60b0f0;
+  --sidebar: 56px;
+  --topbar:  52px;
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
+body { background: var(--bg); color: var(--txt); font: 13px/1.5 ui-sans-serif, -apple-system, Segoe UI, sans-serif; height: 100vh; display: flex; overflow: hidden }
 
-  /* ─── header ─────────────────────────────── */
-  header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);
-    padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
-  header h1{font-size:14px;font-weight:600;letter-spacing:.3px;white-space:nowrap}
-  header h1 small{color:var(--mut);font-weight:400}
-  .api-bar{display:flex;align-items:center;gap:6px;margin-left:auto}
-  .api-bar label{color:var(--mut);font-size:11px;white-space:nowrap}
-  .api-bar input{background:var(--panel);border:1px solid var(--line);color:var(--txt);
-    padding:4px 9px;border-radius:6px;font-size:12px;outline:none;width:180px}
-  .api-bar input:focus{border-color:var(--accent)}
-  .btn{background:var(--panel);border:1px solid var(--line);color:var(--txt);
-    padding:5px 12px;border-radius:6px;font-size:12px;cursor:pointer;white-space:nowrap}
-  .btn:hover{border-color:var(--accent);color:var(--accent)}
-  .dot{width:7px;height:7px;border-radius:50%;background:var(--mut);flex-shrink:0}
-  .dot.ok{background:var(--in)} .dot.err{background:var(--out)}
-  .nav-links{display:flex;gap:2px}
-  .nav-links a{color:var(--mut);font-size:12px;padding:4px 10px;border-radius:6px;border:1px solid transparent}
-  .nav-links a:hover{color:var(--txt);border-color:var(--line)}
-  .nav-links a.active{color:var(--accent);border-color:var(--line)}
+/* ── sidebar ──────────────────────────────── */
+nav {
+  width: var(--sidebar); height: 100vh; background: var(--surface);
+  border-right: 1px solid var(--border); display: flex; flex-direction: column;
+  align-items: center; padding: 12px 0; gap: 4px; flex-shrink: 0; z-index: 10;
+}
+.logo { width: 32px; height: 32px; border-radius: 9px; background: var(--acc-dim);
+  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
+  font-size: 15px; font-weight: 800; color: var(--acc); letter-spacing: -1px }
+.nav-btn { width: 36px; height: 36px; border-radius: 8px; border: none; background: transparent;
+  color: var(--dim); cursor: pointer; display: flex; align-items: center; justify-content: center;
+  font-size: 16px; transition: background .15s, color .15s }
+.nav-btn:hover { background: var(--raised); color: var(--txt) }
+.nav-btn.active { background: var(--acc-dim); color: var(--acc) }
+.nav-sep { width: 24px; height: 1px; background: var(--border); margin: 4px 0 }
+.nav-bot { margin-top: auto }
 
-  /* ─── layout ─────────────────────────────── */
-  .main{flex:1;display:flex;overflow:hidden}
-  .content{flex:1;overflow-y:auto;padding:20px}
-  .tree-panel{width:0;overflow:hidden;transition:width .2s ease;border-left:1px solid transparent;background:var(--panel);display:flex;flex-direction:column}
-  .tree-panel.open{width:420px;border-left-color:var(--line)}
-  .tree-header{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0}
-  .tree-header h3{font-size:13px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-  .tree-body{flex:1;overflow-y:auto;padding:16px;font:12px/1.6 ui-monospace,monospace}
-  .tree-tabs{display:flex;gap:0;flex-shrink:0;border-bottom:1px solid var(--line)}
-  .tree-tabs button{flex:1;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--mut);
-    padding:8px;font-size:12px;cursor:pointer}
-  .tree-tabs button.on{color:var(--txt);border-bottom-color:var(--accent)}
+/* ── main frame ───────────────────────────── */
+.frame { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0 }
 
-  /* ─── KPI strip ───────────────────────────── */
-  .kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
-  .kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 18px;min-width:110px}
-  .kpi b{display:block;font-size:10px;color:var(--mut);font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
-  .kpi span{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
-  .kpi.accent span{color:var(--accent)}
-  .kpi.green span{color:var(--in)}
-  .kpi.red span{color:var(--out)}
+/* ── topbar ───────────────────────────────── */
+.topbar {
+  height: var(--topbar); background: var(--surface); border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; padding: 0 20px; gap: 14px; flex-shrink: 0
+}
+.topbar h1 { font-size: 13px; font-weight: 600; color: var(--txt); letter-spacing: .2px }
+.topbar h1 span { color: var(--sub); font-weight: 400 }
+.status-pill { display: flex; align-items: center; gap: 5px; background: var(--raised);
+  border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px 3px 6px; font-size: 11px; color: var(--sub) }
+.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim) }
+.dot.live { background: var(--in); box-shadow: 0 0 6px var(--in) }
+.dot.err  { background: var(--out) }
+.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px }
+.api-input { background: var(--raised); border: 1px solid var(--border); color: var(--txt);
+  padding: 5px 10px; border-radius: 8px; font-size: 12px; outline: none; width: 190px }
+.api-input:focus { border-color: var(--acc) }
+.icon-btn { background: var(--raised); border: 1px solid var(--border); color: var(--sub);
+  padding: 5px 10px; border-radius: 8px; font-size: 12px; cursor: pointer }
+.icon-btn:hover { color: var(--txt); border-color: var(--border2) }
 
-  /* ─── two-col layout ──────────────────────── */
-  .cols{display:grid;grid-template-columns:280px 1fr;gap:16px;margin-bottom:20px}
-  @media(max-width:900px){.cols{grid-template-columns:1fr}}
+/* ── scroll area ──────────────────────────── */
+.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px }
+.scroll::-webkit-scrollbar { width: 5px }
+.scroll::-webkit-scrollbar-track { background: transparent }
+.scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px }
 
-  /* ─── cards ───────────────────────────────── */
-  .card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
-  .card-head{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
-  .card-head h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
-  .card-body{padding:12px 0}
+/* ── error bar ────────────────────────────── */
+#err { display: none; background: var(--out-dim); border: 1px solid #5a2020; color: #f09090;
+  border-radius: 8px; padding: 9px 14px; margin-bottom: 16px; font-size: 12px }
 
-  /* ─── entity list ─────────────────────────── */
-  .entity-item{padding:10px 16px;display:flex;align-items:flex-start;gap:10px;cursor:pointer;border-bottom:1px solid var(--line)}
-  .entity-item:last-child{border-bottom:0}
-  .entity-item:hover{background:#1e1e28}
-  .entity-badge{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--accent)}
-  .entity-info{flex:1;min-width:0}
-  .entity-name{font-size:13px;font-weight:500}
-  .entity-sub{font-size:11px;color:var(--mut);margin-top:1px}
-  .entity-accts{margin-top:6px;display:flex;flex-direction:column;gap:3px}
-  .acct-row{font-size:11px;color:var(--mut);display:flex;align-items:center;gap:6px}
-  .acct-row::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line);flex-shrink:0}
-  .entity-net{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px}
+/* ── KPI row ──────────────────────────────── */
+.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px }
+.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; position: relative; overflow: hidden }
+.kpi::before { content: ''; position: absolute; inset: 0; opacity: .06; border-radius: 12px }
+.kpi.green::before { background: var(--in) }  .kpi.green .kpi-val { color: var(--in) }
+.kpi.red::before   { background: var(--out) }  .kpi.red   .kpi-val { color: var(--out) }
+.kpi.purple::before{ background: var(--acc) }  .kpi.purple .kpi-val { color: var(--acc) }
+.kpi.gold::before  { background: var(--gold) } .kpi.gold  .kpi-val { color: var(--gold) }
+.kpi-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; color: var(--sub); margin-bottom: 6px }
+.kpi-val   { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1 }
+.kpi-sub   { font-size: 11px; color: var(--dim); margin-top: 4px }
 
-  /* ─── type breakdown ──────────────────────── */
-  .type-rows{padding:8px 0}
-  .type-row{padding:7px 16px;display:flex;align-items:center;gap:10px}
-  .type-label{font-size:12px;color:var(--txt);min-width:160px;flex-shrink:0}
-  .type-bar-wrap{flex:1;height:6px;background:var(--chip);border-radius:3px;overflow:hidden}
-  .type-bar{height:100%;border-radius:3px;transition:width .4s ease}
-  .type-amt{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--mut);white-space:nowrap;min-width:90px;text-align:right}
-  .type-count{font-size:11px;color:var(--mut);width:28px;text-align:right;flex-shrink:0}
+/* ── two-col body ─────────────────────────── */
+.body-grid { display: grid; grid-template-columns: 1fr 340px; gap: 14px; margin-bottom: 14px }
+@media (max-width: 960px) { .body-grid { grid-template-columns: 1fr } }
 
-  /* ─── movements table ─────────────────────── */
-  .mov-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
-  .mov-table thead th{position:sticky;top:0;background:var(--panel);text-align:left;color:var(--mut);
-    font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;
-    padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
-  .mov-table tbody td{padding:9px 12px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle}
-  .mov-table tbody tr{cursor:pointer;transition:background .1s}
-  .mov-table tbody tr:hover{background:#1e1e28}
-  .mov-table tbody tr.selected{background:#202030}
-  .mov-table .amt{text-align:right;font-weight:600}
-  .in{color:var(--in)} .out{color:var(--out)}
-  .dir{font-size:10px;font-weight:700;letter-spacing:.4px}
-  .etype{display:inline-block;background:var(--chip);padding:2px 7px;border-radius:6px;font-size:10px;white-space:nowrap}
-  .desc-cell{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-  .date-cell{color:var(--mut);white-space:nowrap}
-  .cpty{color:var(--mut);font-size:11px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
-  .acct-cell{color:var(--mut);white-space:nowrap;font-size:11px}
-  .tree-btn{background:var(--chip);border:1px solid var(--line);color:var(--mut);padding:3px 8px;border-radius:5px;font-size:11px;cursor:pointer;white-space:nowrap}
-  .tree-btn:hover{color:var(--txt);border-color:var(--accent)}
+/* ── panel ────────────────────────────────── */
+.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden }
+.panel-head { padding: 13px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between }
+.panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--sub) }
+.panel-count { font-size: 11px; color: var(--dim) }
 
-  /* ─── tree view ───────────────────────────── */
-  .tree-node{margin:2px 0}
-  .tree-node-label{display:flex;align-items:flex-start;gap:6px;padding:2px 0;line-height:1.4}
-  .tree-node-label .nid{color:var(--mut);font-size:10px}
-  .tree-node-label .ndesc{color:var(--txt)}
-  .tree-node-label .namt{color:var(--accent);font-size:11px;white-space:nowrap}
-  .tree-node-label .ndate{color:var(--mut);font-size:10px}
-  .tree-node-label .nkind{font-size:10px;background:var(--chip);padding:1px 5px;border-radius:4px;color:var(--mut);white-space:nowrap}
-  .tree-link-label{color:var(--mut);font-size:10px;padding:1px 0 1px 12px}
-  .tree-children{border-left:1px solid var(--line);margin-left:8px;padding-left:10px}
-  .tree-cycle{color:var(--warn);font-size:10px;font-style:italic}
-  .tree-truncated{color:var(--mut);font-size:10px;font-style:italic}
+/* ── type chart ───────────────────────────── */
+.chart-wrap { padding: 16px; display: flex; gap: 20px; align-items: center }
+.donut-wrap { flex-shrink: 0; position: relative; width: 120px; height: 120px }
+.donut-wrap svg { overflow: visible }
+.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none }
+.donut-center .dc-val { font-size: 20px; font-weight: 700; color: var(--txt) }
+.donut-center .dc-sub { font-size: 10px; color: var(--sub) }
+.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0 }
+.legend-row { display: flex; align-items: center; gap: 8px }
+.legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0 }
+.legend-label { font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.legend-amt { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sub); white-space: nowrap }
+.legend-pct { font-size: 10px; color: var(--dim); width: 32px; text-align: right; flex-shrink: 0 }
 
-  /* ─── empty / loading ─────────────────────── */
-  .empty{color:var(--mut);padding:32px;text-align:center;font-size:13px}
-  .spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}
-  @keyframes spin{to{transform:rotate(360deg)}}
+/* ── entity cards ─────────────────────────── */
+.entity-list { padding: 8px 0 }
+.entity-row { padding: 10px 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--border) }
+.entity-row:last-child { border-bottom: 0 }
+.avatar { width: 32px; height: 32px; border-radius: 9px; background: var(--acc-dim);
+  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--acc); flex-shrink: 0 }
+.avatar.company { background: var(--gold-dim); color: var(--gold) }
+.avatar.vendor  { background: var(--raised);   color: var(--sub) }
+.entity-info { flex: 1; min-width: 0 }
+.entity-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.entity-meta { font-size: 11px; color: var(--sub); margin-top: 1px }
+.entity-accts { margin-top: 5px; display: flex; flex-direction: column; gap: 3px }
+.acct-chip { font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 5px }
+.acct-chip::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--border2); flex-shrink: 0 }
+.entity-net { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0 }
 
-  /* ─── error banner ────────────────────────── */
-  #error-banner{display:none;background:#2a1a1a;border:1px solid #5a2a2a;color:#e09090;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:12px}
+/* ── movements ────────────────────────────── */
+.mov-controls { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
+.ctrl-input { background: var(--raised); border: 1px solid var(--border); color: var(--txt);
+  padding: 6px 10px; border-radius: 8px; font-size: 12px; outline: none }
+.ctrl-input:focus { border-color: var(--acc) }
+.ctrl-input::placeholder { color: var(--dim) }
+.seg { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden }
+.seg button { background: transparent; border: 0; color: var(--sub); padding: 6px 11px; cursor: pointer; font-size: 12px }
+.seg button.on { background: var(--raised); color: var(--txt) }
+
+/* ── movement feed ────────────────────────── */
+.mov-feed { display: flex; flex-direction: column }
+.mov-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
+  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s }
+.mov-item:last-child { border-bottom: 0 }
+.mov-item:hover { background: var(--raised) }
+.mov-item.selected { background: #1e1e35 }
+.mov-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center;
+  justify-content: center; font-size: 14px; flex-shrink: 0; margin-top: 1px }
+.mov-icon.in  { background: var(--in-dim);  color: var(--in) }
+.mov-icon.out { background: var(--out-dim); color: var(--out) }
+.mov-body { flex: 1; min-width: 0 }
+.mov-top { display: flex; align-items: baseline; gap: 8px }
+.mov-desc { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0 }
+.mov-amt { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0 }
+.mov-amt.in  { color: var(--in) }
+.mov-amt.out { color: var(--out) }
+.mov-bot { display: flex; align-items: center; gap: 8px; margin-top: 3px }
+.mov-date { font-size: 11px; color: var(--dim) }
+.mov-cpty { font-size: 11px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.etype-chip { font-size: 10px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0 }
+.tree-trigger { flex-shrink: 0; background: var(--raised); border: 1px solid var(--border);
+  color: var(--dim); padding: 4px 9px; border-radius: 6px; font-size: 11px; cursor: pointer;
+  margin-top: 1px; transition: border-color .15s, color .15s }
+.tree-trigger:hover { border-color: var(--acc); color: var(--acc) }
+
+/* ── empty / loading ──────────────────────── */
+.empty { color: var(--sub); padding: 28px; text-align: center; font-size: 12px }
+.spin { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--border2);
+  border-top-color: var(--acc); border-radius: 50%; animation: sp .6s linear infinite; vertical-align: middle; margin-right: 5px }
+@keyframes sp { to { transform: rotate(360deg) } }
+
+/* ── tree drawer ──────────────────────────── */
+.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 90vw;
+  background: var(--surface); border-left: 1px solid var(--border);
+  display: flex; flex-direction: column; z-index: 100;
+  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1) }
+.drawer.open { transform: translateX(0) }
+.drawer-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0 }
+.drawer-head h3 { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.close-btn { background: var(--raised); border: 1px solid var(--border); color: var(--sub);
+  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center }
+.close-btn:hover { color: var(--txt) }
+.drawer-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0 }
+.drawer-tabs button { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent;
+  color: var(--sub); padding: 9px; font-size: 12px; cursor: pointer }
+.drawer-tabs button.on { color: var(--txt); border-bottom-color: var(--acc) }
+.drawer-body { flex: 1; overflow-y: auto; padding: 14px; font: 12px/1.6 ui-monospace, monospace }
+
+/* ── tree nodes ───────────────────────────── */
+.tn { margin: 3px 0 }
+.tn-label { display: flex; align-items: flex-start; gap: 6px; padding: 3px 6px; border-radius: 6px }
+.tn-label:hover { background: var(--raised) }
+.tn-kind { font-size: 9px; background: var(--raised); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; color: var(--dim); flex-shrink: 0; margin-top: 2px }
+.tn-id   { color: var(--dim); font-size: 10px }
+.tn-desc { color: var(--txt) }
+.tn-amt  { color: var(--acc); font-size: 11px; white-space: nowrap; flex-shrink: 0 }
+.tn-date { color: var(--dim); font-size: 10px; flex-shrink: 0 }
+.tl-label { color: var(--sub); font-size: 10px; padding: 1px 6px 1px 20px }
+.tl-label .tl-type { color: var(--blue) }
+.tl-label .tl-meth { color: var(--dim) }
+.tc { border-left: 1px solid var(--border); margin-left: 12px; padding-left: 10px }
+.t-cycle { color: var(--gold); font-size: 11px; font-style: italic }
 </style>
 </head>
 <body>
 
-<header>
-  <h1>money&#8209;trace <small id="sub">· dashboard</small></h1>
-  <div class="nav-links">
-    <a href="index.html">Cartolas</a>
-    <a href="dashboard.html" class="active">Dashboard</a>
+<!-- sidebar -->
+<nav>
+  <div class="logo">₿</div>
+  <button class="nav-btn active" title="Dashboard">⊞</button>
+  <a href="index.html" style="text-decoration:none"><button class="nav-btn" title="Cartolas">≡</button></a>
+  <div class="nav-sep"></div>
+  <div class="nav-bot">
+    <div class="dot" id="nav-dot" title="Estado del servidor"></div>
   </div>
-  <div class="api-bar">
-    <span class="dot" id="api-dot"></span>
-    <label>API</label>
-    <input type="text" id="api-base" value="http://localhost:3910" placeholder="http://localhost:3910">
-    <button class="btn" id="reload-btn">↺ Recargar</button>
+</nav>
+
+<!-- main -->
+<div class="frame">
+  <!-- topbar -->
+  <div class="topbar">
+    <h1>money&#8209;trace <span id="sub-label">· cargando…</span></h1>
+    <div class="status-pill">
+      <div class="dot" id="status-dot"></div>
+      <span id="status-txt">conectando</span>
+    </div>
+    <div class="topbar-right">
+      <input class="api-input" id="api-base" value="http://localhost:3910" placeholder="http://localhost:3910">
+      <button class="icon-btn" id="reload-btn">↺ Recargar</button>
+    </div>
   </div>
-</header>
 
-<div class="main">
-  <div class="content" id="content">
-    <div id="error-banner"></div>
+  <!-- scroll area -->
+  <div class="scroll">
+    <div id="err"></div>
 
-    <!-- KPI strip -->
-    <div class="kpis" id="kpis">
-      <div class="kpi"><b>Entidades</b><span id="k-entities">–</span></div>
-      <div class="kpi"><b>Cuentas</b><span id="k-accounts">–</span></div>
-      <div class="kpi"><b>Movimientos</b><span id="k-movements">–</span></div>
-      <div class="kpi"><b>Documentos</b><span id="k-documents">–</span></div>
-      <div class="kpi"><b>Eventos</b><span id="k-events">–</span></div>
-      <div class="kpi"><b>Links</b><span id="k-links">–</span></div>
-      <div class="kpi green"><b>Ingresos reales</b><span id="k-income">–</span></div>
-      <div class="kpi red"><b>Egresos reales</b><span id="k-expense">–</span></div>
+    <!-- KPIs -->
+    <div class="kpi-row" id="kpi-row">
+      <div class="kpi green"><div class="kpi-label">Ingresos reales</div><div class="kpi-val" id="k-income">–</div><div class="kpi-sub" id="k-income-c">– movimientos</div></div>
+      <div class="kpi red">  <div class="kpi-label">Egresos reales</div> <div class="kpi-val" id="k-expense">–</div><div class="kpi-sub" id="k-expense-c">– movimientos</div></div>
+      <div class="kpi purple"><div class="kpi-label">Neto</div>          <div class="kpi-val" id="k-net">–</div>   <div class="kpi-sub">ingresos − egresos</div></div>
+      <div class="kpi">      <div class="kpi-label">Movimientos</div>    <div class="kpi-val" id="k-mov">–</div>   <div class="kpi-sub" id="k-mov-sub">– cuentas</div></div>
+      <div class="kpi">      <div class="kpi-label">Links de trazab.</div><div class="kpi-val" id="k-links">–</div><div class="kpi-sub" id="k-links-sub">– documentos</div></div>
     </div>
 
-    <!-- Two-col: entities + type breakdown -->
-    <div class="cols" id="cols">
-      <div class="card" id="entity-card">
-        <div class="card-head"><h2>Entidades</h2></div>
-        <div class="card-body" id="entity-list"><div class="empty"><span class="spinner"></span>Cargando…</div></div>
-      </div>
-      <div class="card" id="type-card">
-        <div class="card-head"><h2>Movimientos por tipo económico</h2></div>
-        <div class="type-rows" id="type-rows"><div class="empty"><span class="spinner"></span>Cargando…</div></div>
-      </div>
-    </div>
+    <!-- body grid -->
+    <div class="body-grid">
 
-    <!-- Movements -->
-    <div class="card">
-      <div class="card-head">
-        <h2>Movimientos</h2>
-        <div style="display:flex;gap:8px;align-items:center">
-          <input type="search" id="mov-search" placeholder="Buscar…" style="background:var(--chip);border:1px solid var(--line);color:var(--txt);padding:4px 9px;border-radius:6px;font-size:12px;outline:none;width:180px">
-          <select id="mov-dir" style="background:var(--chip);border:1px solid var(--line);color:var(--txt);padding:4px 9px;border-radius:6px;font-size:12px;outline:none">
-            <option value="">Todos</option>
-            <option value="in">▲ Entradas</option>
-            <option value="out">▼ Salidas</option>
-          </select>
-          <select id="mov-etype" style="background:var(--chip);border:1px solid var(--line);color:var(--txt);padding:4px 9px;border-radius:6px;font-size:12px;outline:none">
-            <option value="">Todos los tipos</option>
-          </select>
+      <!-- left: type donut + movements -->
+      <div style="display:flex;flex-direction:column;gap:14px">
+
+        <div class="panel">
+          <div class="panel-head">
+            <div class="panel-title">Flujo por tipo económico</div>
+            <div class="panel-count" id="type-cur">CLP</div>
+          </div>
+          <div class="chart-wrap" id="chart-wrap">
+            <div class="empty"><span class="spin"></span>cargando…</div>
+          </div>
+        </div>
+
+        <div class="panel">
+          <div class="panel-head">
+            <div class="panel-title">Movimientos</div>
+            <div style="display:flex;gap:6px">
+              <div class="seg" id="dir-seg">
+                <button data-d="all" class="on">Todo</button>
+                <button data-d="in">▲</button>
+                <button data-d="out">▼</button>
+              </div>
+              <select id="etype-sel" class="ctrl-input" style="padding:5px 8px">
+                <option value="">Todos los tipos</option>
+              </select>
+              <input class="ctrl-input" id="mov-q" placeholder="Buscar…" style="width:150px">
+            </div>
+          </div>
+          <div class="mov-feed" id="mov-feed">
+            <div class="empty"><span class="spin"></span>cargando…</div>
+          </div>
+          <div id="mov-empty" class="empty" hidden>Sin movimientos para este filtro.</div>
+        </div>
+
+      </div>
+
+      <!-- right: entities -->
+      <div class="panel" style="align-self:start">
+        <div class="panel-head">
+          <div class="panel-title">Entidades</div>
+          <div class="panel-count" id="ent-count">–</div>
+        </div>
+        <div class="entity-list" id="entity-list">
+          <div class="empty"><span class="spin"></span>cargando…</div>
         </div>
       </div>
-      <div style="overflow-x:auto">
-        <table class="mov-table">
-          <thead><tr>
-            <th>Fecha</th>
-            <th>Cuenta</th>
-            <th>Dir</th>
-            <th style="text-align:right">Monto</th>
-            <th>Tipo económico</th>
-            <th>Descripción / Contraparte</th>
-            <th>Árbol</th>
-          </tr></thead>
-          <tbody id="mov-rows"></tbody>
-        </table>
-        <div id="mov-empty" class="empty" hidden>Sin movimientos para este filtro.</div>
-      </div>
-    </div>
-  </div>
 
-  <!-- Tree panel -->
-  <div class="tree-panel" id="tree-panel">
-    <div class="tree-header">
-      <h3 id="tree-title">Árbol de trazabilidad</h3>
-      <button class="btn" id="tree-close">✕</button>
-    </div>
-    <div class="tree-tabs">
-      <button class="on" id="tab-origin" onclick="switchTab('origin')">← Origen</button>
-      <button id="tab-dest" onclick="switchTab('dest')">Destino →</button>
-    </div>
-    <div class="tree-body" id="tree-body"><div class="empty">Selecciona un movimiento.</div></div>
+    </div><!-- /body-grid -->
+  </div><!-- /scroll -->
+</div><!-- /frame -->
+
+<!-- tree drawer -->
+<div class="drawer" id="drawer">
+  <div class="drawer-head">
+    <h3 id="drawer-title">Árbol de trazabilidad</h3>
+    <button class="close-btn" id="drawer-close">✕</button>
+  </div>
+  <div class="drawer-tabs">
+    <button class="on" id="tab-orig" onclick="switchTab('orig')">← Origen del dinero</button>
+    <button id="tab-dest" onclick="switchTab('dest')">Destino →</button>
+  </div>
+  <div class="drawer-body" id="drawer-body">
+    <div class="empty">Selecciona un movimiento.</div>
   </div>
 </div>
 
 <script>
-// ─── state ────────────────────────────────────────────────────
-let MOVEMENTS = [], ENTITIES = [], ACCOUNTS = [], SUMMARY = null;
-let accountById = {}, entityById = {};
-let selectedMovId = null, activeTab = 'origin';
+// ── state ─────────────────────────────────────────────────────
+let MOVS=[], ENTS=[], ACCS=[], SUM=null;
+let byId={}, entById={}, accById={};
+let selId=null, activeTab='orig';
 
-// ─── config ───────────────────────────────────────────────────
-function apiBase() { return (document.getElementById('api-base').value || 'http://localhost:3910').replace(/\/$/, ''); }
+// ── helpers ────────────────────────────────────────────────────
+const api = () => (document.getElementById('api-base').value||'http://localhost:3910').replace(/\/$/,'');
+const fmt = (n, cur='CLP') => n==null ? '–' : (cur!=='CLP'?cur+' ':'')+Math.abs(n).toLocaleString('es-CL');
+const esc = s => String(s||'').replace(/[&<>"]/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
 
-function setDot(ok) {
-  const d = document.getElementById('api-dot');
-  d.className = 'dot ' + (ok ? 'ok' : 'err');
-}
-
-// ─── economic type meta ───────────────────────────────────────
-const ETYPE = {
-  pure_income:              ['Ingreso puro',          '#5ec48a', true,  false],
-  operating_income:         ['Ingreso operacional',   '#5ec48a', true,  false],
-  real_expense:             ['Gasto real',            '#d98a8a', false, true ],
-  card_charge:              ['Cargo tarjeta',         '#d98a8a', false, true ],
-  card_payment:             ['Pago tarjeta',          '#8a8a9a', false, false],
-  wallet_funding:           ['Carga wallet',          '#8a8a9a', false, false],
-  foreign_account_funding:  ['Fondeo ext.',           '#8a8a9a', false, false],
-  internal_transfer:        ['Transferencia interna', '#8a8a9a', false, false],
-  reimbursement:            ['Reembolso',             '#9bc8a4', true,  false],
-  refund:                   ['Refund',                '#9bc8a4', true,  false],
-  partner_loan:             ['Préstamo socio',        '#c8b5d1', false, false],
-  partner_withdrawal:       ['Retiro socio',          '#c8b5d1', false, false],
-  adjustment:               ['Ajuste',                '#8a8a9a', false, false],
-  non_accounting:           ['No contable',           '#555566', false, false],
-  unknown:                  ['Desconocido',           '#555566', false, false],
+// economic type metadata: [label, color, isIncome, isExpense]
+const ET = {
+  pure_income:             ['Ingreso puro',       '#4ade9a', true,  false],
+  operating_income:        ['Ingreso oper.',       '#4ade9a', true,  false],
+  real_expense:            ['Gasto real',          '#f06a6a', false, true ],
+  card_charge:             ['Cargo tarjeta',       '#f06a6a', false, true ],
+  card_payment:            ['Pago tarjeta',        '#7070a0', false, false],
+  wallet_funding:          ['Carga wallet',        '#7070a0', false, false],
+  foreign_account_funding: ['Fondeo ext.',         '#7070a0', false, false],
+  internal_transfer:       ['Transf. interna',     '#7070a0', false, false],
+  reimbursement:           ['Reembolso',           '#60d0a0', true,  false],
+  refund:                  ['Refund',              '#60d0a0', true,  false],
+  partner_loan:            ['Préstamo socio',      '#a78bfa', false, false],
+  partner_withdrawal:      ['Retiro socio',        '#a78bfa', false, false],
+  adjustment:              ['Ajuste',              '#4a4a70', false, false],
+  non_accounting:          ['No contable',         '#2a2a44', false, false],
+  unknown:                 ['Desconocido',         '#2a2a44', false, false],
 };
-function etypeLabel(t) { return ETYPE[t] ? ETYPE[t][0] : t; }
-function etypeColor(t) { return ETYPE[t] ? ETYPE[t][1] : '#8a8a9a'; }
-function isIncome(t)   { return ETYPE[t] ? ETYPE[t][2] : false; }
-function isExpense(t)  { return ETYPE[t] ? ETYPE[t][3] : false; }
+const etLabel = t => ET[t]?.[0] || t;
+const etColor = t => ET[t]?.[1] || '#4a4a70';
+const isInc   = t => ET[t]?.[2] || false;
+const isExp   = t => ET[t]?.[3] || false;
 
-const fmt = (n, cur = 'CLP') => {
-  if (n == null) return '–';
-  const f = Math.abs(n).toLocaleString('es-CL');
-  return (n < 0 ? '-' : '') + (cur !== 'CLP' ? cur + ' ' : '') + f;
-};
-const esc = s => String(s || '').replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
-
-// ─── fetch helpers ────────────────────────────────────────────
-async function apiFetch(path) {
-  const r = await fetch(apiBase() + path);
-  if (!r.ok) throw new Error(`${r.status} ${r.statusText} ${path}`);
-  return r.json();
+function setStatus(ok) {
+  const dot = document.getElementById('status-dot');
+  const ndot = document.getElementById('nav-dot');
+  const txt = document.getElementById('status-txt');
+  dot.className = ndot.className = 'dot ' + (ok ? 'live' : 'err');
+  txt.textContent = ok ? 'conectado' : 'error';
 }
 
-function showError(msg) {
-  const b = document.getElementById('error-banner');
-  b.textContent = msg; b.style.display = 'block';
-}
-function clearError() {
-  document.getElementById('error-banner').style.display = 'none';
+function showErr(msg) {
+  const el = document.getElementById('err');
+  el.textContent = msg; el.style.display = 'block';
 }
+function clearErr() { document.getElementById('err').style.display = 'none'; }
 
-// ─── load ─────────────────────────────────────────────────────
+// ── load ────────────────────────────────────────────────────────
 async function load() {
-  clearError();
+  clearErr();
   try {
-    const [summary, entRes, accRes, movRes] = await Promise.all([
-      apiFetch('/summary'),
-      apiFetch('/entities'),
-      apiFetch('/accounts'),
-      apiFetch('/movements'),
+    const [sum, er, ar, mr] = await Promise.all([
+      fetch(api()+'/summary').then(r=>{ if(!r.ok) throw new Error(r.status); return r.json() }),
+      fetch(api()+'/entities').then(r=>r.json()),
+      fetch(api()+'/accounts').then(r=>r.json()),
+      fetch(api()+'/movements').then(r=>r.json()),
     ]);
-    setDot(true);
-    SUMMARY = summary;
-    ENTITIES = entRes.entities || [];
-    ACCOUNTS = accRes.accounts || [];
-    MOVEMENTS = (movRes.movements || []).slice().sort((a, b) => b.date.localeCompare(a.date));
-    accountById = Object.fromEntries(ACCOUNTS.map(a => [a.id, a]));
-    entityById  = Object.fromEntries(ENTITIES.map(e => [e.id, e]));
+    setStatus(true);
+    SUM  = sum;
+    ENTS = er.entities  || [];
+    ACCS = ar.accounts  || [];
+    MOVS = (mr.movements || []).slice().sort((a,b) => (b.date||'').localeCompare(a.date||''));
+    accById = Object.fromEntries(ACCS.map(a=>[a.id,a]));
+    entById = Object.fromEntries(ENTS.map(e=>[e.id,e]));
     renderAll();
-  } catch (err) {
-    setDot(false);
-    showError('No se pudo conectar con el servidor: ' + err.message + '. ¿Está corriendo npm run serve?');
-    renderAllEmpty();
+  } catch(e) {
+    setStatus(false);
+    showErr('No se pudo conectar: '+e.message+' — ¿está corriendo npm run serve?');
   }
 }
 
 function renderAll() {
   renderKPIs();
+  renderChart();
   renderEntities();
-  renderTypes();
   renderMovements();
 }
-function renderAllEmpty() {
-  document.getElementById('k-entities').textContent = '–';
-  document.getElementById('entity-list').innerHTML = '<div class="empty">Sin datos.</div>';
-  document.getElementById('type-rows').innerHTML = '<div class="empty">Sin datos.</div>';
-  document.getElementById('mov-rows').innerHTML = '';
-  document.getElementById('mov-empty').hidden = false;
-}
 
-// ─── KPIs ─────────────────────────────────────────────────────
+// ── KPIs ────────────────────────────────────────────────────────
 function renderKPIs() {
-  const c = SUMMARY.counts;
-  document.getElementById('k-entities').textContent  = c.entities;
-  document.getElementById('k-accounts').textContent  = c.accounts;
-  document.getElementById('k-movements').textContent = c.movements;
-  document.getElementById('k-documents').textContent = c.documents;
-  document.getElementById('k-events').textContent    = c.events;
-  document.getElementById('k-links').textContent     = c.links;
-
-  const byType = SUMMARY.movementAmountByType || {};
-  let income = 0, expense = 0;
-  for (const [t, v] of Object.entries(byType)) {
-    if (isIncome(t))  income  += v;
-    if (isExpense(t)) expense += v;
+  const c = SUM.counts;
+  const bt = SUM.movementAmountByType || {};
+  let inc=0, incN=0, exp=0, expN=0;
+  for (const m of MOVS) {
+    if (isInc(m.economicType)) { inc += m.amount?.value||0; incN++ }
+    if (isExp(m.economicType)) { exp += m.amount?.value||0; expN++ }
   }
-  document.getElementById('k-income').textContent  = fmt(income);
-  document.getElementById('k-expense').textContent = fmt(expense);
-
-  document.getElementById('sub').textContent =
-    '· ' + c.entities + ' entid. · ' + c.movements + ' mov.';
+  const net = inc - exp;
+  document.getElementById('k-income').textContent  = fmt(inc);
+  document.getElementById('k-income-c').textContent = incN + ' movimientos';
+  document.getElementById('k-expense').textContent  = fmt(exp);
+  document.getElementById('k-expense-c').textContent = expN + ' movimientos';
+  const nel = document.getElementById('k-net');
+  nel.textContent = (net >= 0 ? '+' : '-') + fmt(Math.abs(net));
+  nel.style.color = net >= 0 ? 'var(--in)' : 'var(--out)';
+  document.getElementById('k-mov').textContent = c.movements;
+  document.getElementById('k-mov-sub').textContent = c.accounts + ' cuentas · ' + c.entities + ' entidades';
+  document.getElementById('k-links').textContent = c.links;
+  document.getElementById('k-links-sub').textContent = c.documents + ' documentos · ' + c.events + ' eventos';
+  document.getElementById('sub-label').textContent = '· ' + c.entities + ' entidades · ' + c.movements + ' movimientos';
 }
 
-// ─── entities ─────────────────────────────────────────────────
+// ── donut chart ─────────────────────────────────────────────────
+function renderChart() {
+  const bt = SUM.movementAmountByType || {};
+  const entries = Object.entries(bt).filter(([,v])=>v>0).sort((a,b)=>b[1]-a[1]);
+  const total = entries.reduce((s,[,v])=>s+v, 0);
+  if (!total) { document.getElementById('chart-wrap').innerHTML='<div class="empty">Sin datos.</div>'; return; }
+
+  // populate filter
+  const sel = document.getElementById('etype-sel');
+  while (sel.options.length > 1) sel.remove(1);
+  entries.forEach(([t]) => sel.add(new Option(etLabel(t), t)));
+
+  // SVG donut
+  const R=52, r=34, cx=60, cy=60, TAU=2*Math.PI;
+  let angle = -Math.PI/2;
+  const segments = entries.map(([t,v]) => {
+    const pct = v/total, sweep = pct*TAU;
+    const x1=cx+R*Math.cos(angle), y1=cy+R*Math.sin(angle);
+    angle += sweep;
+    const x2=cx+R*Math.cos(angle), y2=cy+R*Math.sin(angle);
+    const lf = sweep > Math.PI ? 1 : 0;
+    const path = `M${cx},${cy} L${x1},${y1} A${R},${R},0,${lf},1,${x2},${y2} Z`;
+    return { t, v, pct, path, color: etColor(t) };
+  });
+  // inner hole mask
+  const svgH = `<svg width="120" height="120" viewBox="0 0 120 120">
+    ${segments.map(s=>`<path d="${esc(s.path)}" fill="${s.color}" opacity=".85"/>`).join('')}
+    <circle cx="60" cy="60" r="${r}" fill="var(--surface)"/>
+  </svg>`;
+
+  const legend = segments.slice(0,6).map(s => {
+    const pct = Math.round(s.pct*100);
+    return `<div class="legend-row">
+      <div class="legend-dot" style="background:${s.color}"></div>
+      <div class="legend-label">${esc(etLabel(s.t))}</div>
+      <div class="legend-amt">${fmt(s.v)}</div>
+      <div class="legend-pct">${pct}%</div>
+    </div>`;
+  }).join('');
+
+  document.getElementById('chart-wrap').innerHTML = `
+    <div class="donut-wrap">
+      ${svgH}
+      <div class="donut-center">
+        <div class="dc-val">${entries.length}</div>
+        <div class="dc-sub">tipos</div>
+      </div>
+    </div>
+    <div class="donut-legend">${legend}</div>`;
+}
+
+// ── entities ────────────────────────────────────────────────────
 function renderEntities() {
-  const acctsByEntity = {};
-  for (const a of ACCOUNTS) {
-    if (!acctsByEntity[a.ownerEntityId]) acctsByEntity[a.ownerEntityId] = [];
-    acctsByEntity[a.ownerEntityId].push(a);
+  const acctsByEnt = {};
+  for (const a of ACCS) {
+    if (!acctsByEnt[a.ownerEntityId]) acctsByEnt[a.ownerEntityId] = [];
+    acctsByEnt[a.ownerEntityId].push(a);
   }
+  const hints = SUM.movementAmountByEntityHint || {};
+  document.getElementById('ent-count').textContent = ENTS.length + ' entidades';
 
-  const entityHints = SUMMARY.movementAmountByEntityHint || {};
-
-  const html = ENTITIES.map(e => {
-    const initials = (e.name || e.id).split(/\s+/).slice(0,2).map(w=>w[0]).join('').toUpperCase();
-    const accts = acctsByEntity[e.id] || [];
-    const net = entityHints[e.id];
-    const netHtml = net != null
-      ? `<div class="entity-net ${net >= 0 ? 'in' : 'out'}">${fmt(net)}</div>` : '';
-    const acctHtml = accts.map(a =>
-      `<div class="acct-row">${esc(a.label || a.id)}</div>`
-    ).join('');
-    return `<div class="entity-item">
-      <div class="entity-badge">${esc(initials)}</div>
+  const html = ENTS.map(e => {
+    const init = (e.name||e.id).split(/\s+/).slice(0,2).map(w=>w[0]).join('').toUpperCase();
+    const cls = e.kind==='company' ? 'company' : e.kind==='vendor' ? 'vendor' : '';
+    const accts = acctsByEnt[e.id] || [];
+    const net = hints[e.id];
+    const netHtml = net!=null
+      ? `<div class="entity-net ${net>=0?'':'out'}" style="color:${net>=0?'var(--in)':'var(--out)'}">${net>=0?'+':''}${fmt(net)}</div>` : '';
+    const acctHtml = accts.map(a=>`<div class="acct-chip">${esc(a.label||a.id)}</div>`).join('');
+    return `<div class="entity-row">
+      <div class="avatar ${cls}">${esc(init)}</div>
       <div class="entity-info">
-        <div class="entity-name">${esc(e.name || e.id)}</div>
-        <div class="entity-sub">${esc(e.kind || '')}${e.rut ? ' · ' + e.rut : ''}</div>
-        ${accts.length ? '<div class="entity-accts">' + acctHtml + '</div>' : ''}
+        <div class="entity-name">${esc(e.name||e.id)}</div>
+        <div class="entity-meta">${esc(e.kind||'')}${e.rut?' · '+e.rut:''}</div>
+        ${accts.length?'<div class="entity-accts">'+acctHtml+'</div>':''}
       </div>
       ${netHtml}
     </div>`;
@@ -375,49 +501,16 @@ function renderEntities() {
   document.getElementById('entity-list').innerHTML = html || '<div class="empty">Sin entidades.</div>';
 }
 
-// ─── type breakdown ────────────────────────────────────────────
-function renderTypes() {
-  const byType = SUMMARY.movementAmountByType || {};
-  const entries = Object.entries(byType).filter(([,v]) => v > 0).sort((a,b) => b[1]-a[1]);
-  if (!entries.length) { document.getElementById('type-rows').innerHTML = '<div class="empty">Sin datos.</div>'; return; }
-  const max = entries[0][1];
-
-  // count per type from movements
-  const countByType = {};
-  for (const m of MOVEMENTS) countByType[m.economicType] = (countByType[m.economicType] || 0) + 1;
-
-  // populate filter dropdown
-  const sel = document.getElementById('mov-etype');
-  while (sel.options.length > 1) sel.remove(1);
-  entries.forEach(([t]) => {
-    const o = new Option(etypeLabel(t), t);
-    sel.add(o);
-  });
-
-  const rows = entries.map(([t, v]) => {
-    const pct = Math.round((v / max) * 100);
-    const color = etypeColor(t);
-    const cnt = countByType[t] || 0;
-    return `<div class="type-row">
-      <div class="type-label" style="color:${color}">${etypeLabel(t)}</div>
-      <div class="type-bar-wrap"><div class="type-bar" style="width:${pct}%;background:${color}"></div></div>
-      <div class="type-amt">${fmt(v)}</div>
-      <div class="type-count">${cnt}</div>
-    </div>`;
-  }).join('');
-  document.getElementById('type-rows').innerHTML = rows;
-}
-
-// ─── movements ────────────────────────────────────────────────
-function currentMovements() {
-  const q = document.getElementById('mov-search').value.toLowerCase().trim();
-  const dir = document.getElementById('mov-dir').value;
-  const etype = document.getElementById('mov-etype').value;
-  return MOVEMENTS.filter(m => {
-    if (dir && m.direction !== dir) return false;
-    if (etype && m.economicType !== etype) return false;
+// ── movements ────────────────────────────────────────────────────
+function currentMovs() {
+  const q = document.getElementById('mov-q').value.toLowerCase().trim();
+  const dir = document.querySelector('#dir-seg .on').dataset.d;
+  const et = document.getElementById('etype-sel').value;
+  return MOVS.filter(m => {
+    if (dir!=='all' && m.direction!==dir) return false;
+    if (et && m.economicType!==et) return false;
     if (q) {
-      const hay = ((m.description || '') + ' ' + (m.counterparty || '') + ' ' + m.id).toLowerCase();
+      const hay = ((m.description||'')+' '+(m.counterparty||'')+' '+m.id).toLowerCase();
       if (!hay.includes(q)) return false;
     }
     return true;
@@ -425,128 +518,119 @@ function currentMovements() {
 }
 
 function renderMovements() {
-  const filtered = currentMovements();
-  const tb = document.getElementById('mov-rows');
-  document.getElementById('mov-empty').hidden = filtered.length > 0;
-  tb.innerHTML = filtered.map(m => {
-    const cls = m.direction === 'in' ? 'in' : 'out';
-    const arr = m.direction === 'in' ? '▲' : '▼';
-    const acct = accountById[m.accountId];
-    const acctLabel = acct ? esc(acct.label || acct.id) : esc(m.accountId);
-    const color = etypeColor(m.economicType);
-    const sel = m.id === selectedMovId ? ' selected' : '';
-    return `<tr data-id="${esc(m.id)}"${sel}>
-      <td class="date-cell">${m.date || ''}</td>
-      <td class="acct-cell">${acctLabel}</td>
-      <td class="dir ${cls}">${arr}</td>
-      <td class="amt ${cls}">${fmt(m.amount?.value, m.amount?.currency)}</td>
-      <td><span class="etype" style="color:${color}">${etypeLabel(m.economicType)}</span></td>
-      <td>
-        <div class="desc-cell">${esc(m.description || '')}</div>
-        ${m.counterparty ? `<div class="cpty">→ ${esc(m.counterparty)}</div>` : ''}
-      </td>
-      <td><button class="tree-btn" data-id="${esc(m.id)}">árbol</button></td>
-    </tr>`;
+  const movs = currentMovs();
+  const feed = document.getElementById('mov-feed');
+  document.getElementById('mov-empty').hidden = movs.length > 0;
+  feed.innerHTML = movs.map(m => {
+    const cls = m.direction==='in'?'in':'out';
+    const icon = m.direction==='in' ? '↑' : '↓';
+    const color = etColor(m.economicType);
+    const sel = m.id===selId ? ' selected' : '';
+    const acct = accById[m.accountId];
+    return `<div class="mov-item${sel}" data-id="${esc(m.id)}">
+      <div class="mov-icon ${cls}">${icon}</div>
+      <div class="mov-body">
+        <div class="mov-top">
+          <div class="mov-desc">${esc(m.description||m.id)}</div>
+          <div class="mov-amt ${cls}">${cls==='in'?'+':'-'}${fmt(m.amount?.value, m.amount?.currency)}</div>
+        </div>
+        <div class="mov-bot">
+          <span class="mov-date">${m.date||''}</span>
+          ${m.counterparty?`<span class="mov-cpty">→ ${esc(m.counterparty)}</span>`:''}
+          <span class="etype-chip" style="background:${color}22;color:${color}">${esc(etLabel(m.economicType))}</span>
+          ${acct?`<span class="mov-date">${esc(acct.label||acct.id)}</span>`:''}
+        </div>
+      </div>
+      <button class="tree-trigger" data-id="${esc(m.id)}">árbol ↗</button>
+    </div>`;
   }).join('');
 
-  tb.querySelectorAll('tr').forEach(tr => tr.addEventListener('click', (e) => {
-    if (e.target.tagName === 'BUTTON') return;
-    openTree(tr.dataset.id);
+  feed.querySelectorAll('.mov-item').forEach(el => el.addEventListener('click', e => {
+    if (e.target.classList.contains('tree-trigger')) return;
+    openDrawer(el.dataset.id);
   }));
-  tb.querySelectorAll('.tree-btn').forEach(b => b.addEventListener('click', (e) => {
-    e.stopPropagation();
-    openTree(b.dataset.id);
+  feed.querySelectorAll('.tree-trigger').forEach(b => b.addEventListener('click', e => {
+    e.stopPropagation(); openDrawer(b.dataset.id);
   }));
 }
 
-document.getElementById('mov-search').addEventListener('input', renderMovements);
-document.getElementById('mov-dir').addEventListener('change', renderMovements);
-document.getElementById('mov-etype').addEventListener('change', renderMovements);
+document.getElementById('mov-q').addEventListener('input', renderMovements);
+document.getElementById('etype-sel').addEventListener('change', renderMovements);
+document.querySelectorAll('#dir-seg button').forEach(b => b.addEventListener('click', () => {
+  document.querySelectorAll('#dir-seg button').forEach(x=>x.classList.remove('on'));
+  b.classList.add('on'); renderMovements();
+}));
 
-// ─── tree panel ───────────────────────────────────────────────
-async function openTree(movId) {
-  selectedMovId = movId;
-  document.querySelectorAll('.mov-table tbody tr').forEach(r => {
-    r.classList.toggle('selected', r.dataset.id === movId);
-  });
-  const panel = document.getElementById('tree-panel');
-  panel.classList.add('open');
-  const m = MOVEMENTS.find(x => x.id === movId);
-  document.getElementById('tree-title').textContent = m ? (m.description || m.id) : movId;
-  await loadTreeTab(movId, activeTab);
+// ── drawer ───────────────────────────────────────────────────────
+async function openDrawer(movId) {
+  selId = movId;
+  document.querySelectorAll('.mov-item').forEach(el => el.classList.toggle('selected', el.dataset.id===movId));
+  const m = MOVS.find(x=>x.id===movId);
+  document.getElementById('drawer-title').textContent = m?.description || movId;
+  document.getElementById('drawer').classList.add('open');
+  await loadTree(movId, activeTab);
 }
 
-async function loadTreeTab(movId, tab) {
-  const body = document.getElementById('tree-body');
-  body.innerHTML = '<div class="empty"><span class="spinner"></span>Cargando árbol…</div>';
+async function loadTree(movId, tab) {
+  const body = document.getElementById('drawer-body');
+  body.innerHTML = '<div class="empty"><span class="spin"></span>cargando árbol…</div>';
   try {
-    const path = tab === 'origin'
+    const path = tab==='orig'
       ? `/nodes/${encodeURIComponent(movId)}/origin-tree`
       : `/nodes/${encodeURIComponent(movId)}/destination-tree`;
-    const tree = await apiFetch(path);
-    body.innerHTML = renderTree(tree, tab === 'origin');
-  } catch (err) {
-    body.innerHTML = `<div class="empty">Error: ${esc(err.message)}</div>`;
+    const tree = await fetch(api()+path).then(r=>r.json());
+    body.innerHTML = renderTree(tree, tab==='orig');
+  } catch(e) {
+    body.innerHTML = `<div class="empty">Error: ${esc(e.message)}</div>`;
   }
 }
 
 function switchTab(tab) {
   activeTab = tab;
-  document.getElementById('tab-origin').classList.toggle('on', tab === 'origin');
-  document.getElementById('tab-dest').classList.toggle('on', tab === 'dest');
-  if (selectedMovId) loadTreeTab(selectedMovId, tab);
+  document.getElementById('tab-orig').classList.toggle('on', tab==='orig');
+  document.getElementById('tab-dest').classList.toggle('on', tab==='dest');
+  if (selId) loadTree(selId, tab);
 }
 
-document.getElementById('tree-close').addEventListener('click', () => {
-  document.getElementById('tree-panel').classList.remove('open');
-  selectedMovId = null;
-  document.querySelectorAll('.mov-table tbody tr.selected').forEach(r => r.classList.remove('selected'));
+document.getElementById('drawer-close').addEventListener('click', () => {
+  document.getElementById('drawer').classList.remove('open');
+  selId = null;
+  document.querySelectorAll('.mov-item.selected').forEach(el=>el.classList.remove('selected'));
 });
 
-// ─── tree renderer ─────────────────────────────────────────────
-function renderTree(branch, isOrigin) {
+// ── tree renderer ────────────────────────────────────────────────
+function renderTree(branch, isOrig) {
   const lines = [];
-  function visit(b, depth) {
+  function visit(b) {
     const n = b.node || {};
     const label = n.description || n.subject || n.label || n.name || n.issuerName || n.id || '?';
-    const amtHtml = n.amount ? ` <span class="namt">${fmt(n.amount.value, n.amount.currency)}</span>` : '';
-    const dateHtml = (n.date || n.documentDate) ? ` <span class="ndate">${n.date || n.documentDate}</span>` : '';
-    const kindHtml = n.kind ? ` <span class="nkind">${esc(n.kind)}</span>` : '';
-    const idHtml = `<span class="nid">${esc(n.id || '')}</span>`;
-    if (b.cycle) {
-      lines.push(`<div class="tree-node-label"><span class="tree-cycle">↩ ciclo: ${esc(label)}</span></div>`);
-      return;
-    }
-    if (b.truncated) {
-      lines.push(`<div class="tree-node-label"><span class="tree-truncated">… truncado</span></div>`);
-      return;
-    }
-    lines.push(`<div class="tree-node"><div class="tree-node-label">${idHtml}${dateHtml} <span class="ndesc">${esc(label)}</span>${amtHtml}${kindHtml}</div>`);
-
-    const children = isOrigin ? (b.incoming || []) : (b.outgoing || []);
-    if (children.length) {
-      lines.push('<div class="tree-children">');
-      for (const edge of children) {
-        const lnk = edge.link || {};
-        const lamt = lnk.amount ? ` ${fmt(lnk.amount.value, lnk.amount.currency)}` : '';
-        const ltype = lnk.type ? `<span style="color:var(--link-funds)">${esc(lnk.type)}</span>` : '';
-        const lmeth = lnk.method ? ` <span style="color:var(--mut)">(${esc(lnk.method)})</span>` : '';
-        lines.push(`<div class="tree-link-label">↖ ${ltype}${lamt}${lmeth}</div>`);
-        const child = isOrigin ? edge.source : edge.target;
-        visit(child, depth + 1);
+    const amtH = n.amount ? ` <span class="tn-amt">${fmt(n.amount.value,n.amount.currency)}</span>` : '';
+    const dtH  = (n.date||n.documentDate) ? ` <span class="tn-date">${n.date||n.documentDate}</span>` : '';
+    const kindH = n.kind ? `<span class="tn-kind">${esc(n.kind)}</span>` : '';
+    if (b.cycle)     { lines.push(`<div class="t-cycle">↩ ciclo: ${esc(label)}</div>`); return }
+    if (b.truncated) { lines.push(`<div class="t-cycle">… truncado</div>`); return }
+    lines.push(`<div class="tn"><div class="tn-label">${kindH}<span class="tn-id">${esc(n.id||'')}</span>${dtH} <span class="tn-desc">${esc(label)}</span>${amtH}</div>`);
+    const edges = isOrig ? (b.incoming||[]) : (b.outgoing||[]);
+    if (edges.length) {
+      lines.push('<div class="tc">');
+      for (const e of edges) {
+        const lk = e.link || {};
+        const la = lk.amount ? ' '+fmt(lk.amount.value,lk.amount.currency) : '';
+        const lm = lk.method ? ` <span class="tl-meth">(${esc(lk.method)})</span>` : '';
+        lines.push(`<div class="tl-label"><span class="tl-type">${esc(lk.type||'')}</span>${la}${lm}</div>`);
+        visit(isOrig ? e.source : e.target);
       }
       lines.push('</div>');
     }
     lines.push('</div>');
   }
-  visit(branch, 0);
+  visit(branch);
   return lines.join('');
 }
 
-// ─── boot ─────────────────────────────────────────────────────
+// ── boot ─────────────────────────────────────────────────────────
 document.getElementById('reload-btn').addEventListener('click', load);
-document.getElementById('api-base').addEventListener('keydown', e => { if (e.key === 'Enter') load(); });
-
+document.getElementById('api-base').addEventListener('keydown', e => { if(e.key==='Enter') load() });
 load();
 </script>
 </body>