Admin Dashboards · Advanced

Ledger — Finance & Revenue Dashboard

A professional dark finance dashboard with total balance, revenue/expenses/net-profit summary, an SVG cash-flow chart, expense-category breakdown, invoices table with payment status, budget tracking with alerts, conic-gradient financial goals and transaction history. Pure CSS + inline SVG.

Full preview Download

<div class="lg-shell">
  <button class="lg-burger" data-lg-toggle aria-label="Toggle navigation" aria-expanded="false"><span></span><span></span><span></span></button>
  <div class="lg-overlay" data-lg-overlay hidden></div>

  <aside class="lg-side" data-lg-side aria-label="Primary">
    <a class="lg-logo" href="#"><span class="lg-logo-mark" aria-hidden="true">₿</span> Ledger</a>
    <nav class="lg-nav" aria-label="Main navigation">
      <a href="#" aria-current="page"><i aria-hidden="true">▦</i> Overview</a>
      <a href="#"><i aria-hidden="true">💸</i> Transactions</a>
      <a href="#"><i aria-hidden="true">🧾</i> Invoices <span class="lg-pill">6</span></a>
      <a href="#"><i aria-hidden="true">📊</i> Budgets</a>
      <a href="#"><i aria-hidden="true">🎯</i> Goals</a>
      <a href="#"><i aria-hidden="true">⚙</i> Settings</a>
    </nav>
    <footer class="lg-side-foot">Powered by <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></footer>
  </aside>

  <main class="lg-main">
    <header class="lg-top">
      <div><h1>Financial overview</h1><p class="lg-sub">Atlas Holdings · fiscal year 2026</p></div>
      <div class="lg-top-actions">
        <select class="lg-range" aria-label="Period"><option>This month</option><option>This quarter</option><option>This year</option></select>
        <button class="lg-icon-btn" aria-label="Alerts"><i aria-hidden="true">🔔</i><span class="lg-dot" aria-hidden="true"></span></button>
        <button class="lg-export" type="button">↓ Export</button>
        <span class="lg-avatar" aria-hidden="true">FN</span>
      </div>
    </header>

    <div class="lg-balance-row">
      <div class="lg-balance">
        <span class="lg-bal-label">Total balance</span>
        <b class="lg-bal-val">$1,284,930.50</b>
        <span class="lg-bal-trend lg-up">▲ 8.4% vs last month</span>
      </div>
      <div class="lg-bal-mini">
        <div><span>Revenue</span><b class="lg-pos">$342,100</b></div>
        <div><span>Expenses</span><b class="lg-neg">$198,420</b></div>
        <div><span>Net profit</span><b class="lg-pos">$143,680</b></div>
      </div>
    </div>

    <div class="lg-grid">
      <section class="lg-card lg-col-2">
        <div class="lg-card-head"><h2>Cash flow</h2><div class="lg-legend-inline"><span><i style="background:#10b981"></i> Income</span><span><i style="background:#f43f5e"></i> Expenses</span></div></div>
        <div class="lg-chart">
          <svg viewBox="0 0 600 220" preserveAspectRatio="none" role="img" aria-label="Income consistently above expenses across the year">
            <line x1="0" y1="55" x2="600" y2="55" stroke="#1f2a44" stroke-width="1"/><line x1="0" y1="110" x2="600" y2="110" stroke="#1f2a44" stroke-width="1"/><line x1="0" y1="165" x2="600" y2="165" stroke="#1f2a44" stroke-width="1"/>
            <defs><linearGradient id="lgInc" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#10b981" stop-opacity=".4"/><stop offset="1" stop-color="#10b981" stop-opacity="0"/></linearGradient></defs>
            <path d="M0,150 C50,140 90,110 150,112 C220,114 260,70 330,76 C400,82 440,52 520,48 C560,46 580,42 600,40 L600,220 L0,220 Z" fill="url(#lgInc)"/>
            <path d="M0,150 C50,140 90,110 150,112 C220,114 260,70 330,76 C400,82 440,52 520,48 C560,46 580,42 600,40" fill="none" stroke="#10b981" stroke-width="2.5"/>
            <path d="M0,182 C60,178 100,170 160,172 C230,174 270,158 340,160 C410,162 450,150 520,148 C560,147 580,146 600,144" fill="none" stroke="#f43f5e" stroke-width="2.5" stroke-dasharray="5 4"/>
          </svg>
          <div class="lg-x-labels"><span>Jan</span><span>Mar</span><span>May</span><span>Jul</span><span>Sep</span><span>Nov</span></div>
        </div>
      </section>

      <section class="lg-card">
        <div class="lg-card-head"><h2>Expense categories</h2></div>
        <ul class="lg-cats">
          <li><span class="lg-cat-name"><i style="background:#6366f1"></i> Payroll</span><div class="lg-mini-bar"><i style="width:46%;background:#6366f1"></i></div><b>46%</b></li>
          <li><span class="lg-cat-name"><i style="background:#06b6d4"></i> Infrastructure</span><div class="lg-mini-bar"><i style="width:22%;background:#06b6d4"></i></div><b>22%</b></li>
          <li><span class="lg-cat-name"><i style="background:#f59e0b"></i> Marketing</span><div class="lg-mini-bar"><i style="width:18%;background:#f59e0b"></i></div><b>18%</b></li>
          <li><span class="lg-cat-name"><i style="background:#ec4899"></i> Office</span><div class="lg-mini-bar"><i style="width:9%;background:#ec4899"></i></div><b>9%</b></li>
          <li><span class="lg-cat-name"><i style="background:#94a3b8"></i> Other</span><div class="lg-mini-bar"><i style="width:5%;background:#94a3b8"></i></div><b>5%</b></li>
        </ul>
      </section>
    </div>

    <div class="lg-grid">
      <section class="lg-card lg-col-2">
        <div class="lg-card-head"><h2>Invoices</h2><a class="lg-link" href="#">View all</a></div>
        <div class="lg-table-wrap">
          <table class="lg-table">
            <thead><tr><th>Invoice</th><th>Client</th><th>Amount</th><th>Due</th><th>Status</th></tr></thead>
            <tbody>
              <tr><td class="lg-mono">INV-2041</td><td>Nimbus Corp</td><td>$12,400</td><td>Jun 20</td><td><span class="lg-badge lg-b-green">Paid</span></td></tr>
              <tr><td class="lg-mono">INV-2040</td><td>Beacon Labs</td><td>$8,900</td><td>Jun 24</td><td><span class="lg-badge lg-b-amber">Pending</span></td></tr>
              <tr><td class="lg-mono">INV-2039</td><td>Forge Studio</td><td>$5,250</td><td>Jun 12</td><td><span class="lg-badge lg-b-red">Overdue</span></td></tr>
              <tr><td class="lg-mono">INV-2038</td><td>Vertex Group</td><td>$21,000</td><td>Jun 28</td><td><span class="lg-badge lg-b-green">Paid</span></td></tr>
              <tr><td class="lg-mono">INV-2037</td><td>Lumen Co</td><td>$3,480</td><td>Jul 02</td><td><span class="lg-badge lg-b-amber">Pending</span></td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <section class="lg-card">
        <div class="lg-card-head"><h2>Budget tracking</h2></div>
        <ul class="lg-budgets">
          <li><div class="lg-budget-head"><span>Marketing</span><b>$35.7k / $42k</b></div><div class="lg-mini-bar"><i style="width:85%;background:#f59e0b"></i></div></li>
          <li><div class="lg-budget-head"><span>R&amp;D</span><b>$88k / $120k</b></div><div class="lg-mini-bar"><i style="width:73%;background:#6366f1"></i></div></li>
          <li><div class="lg-budget-head"><span>Operations</span><b>$54k / $60k</b></div><div class="lg-mini-bar"><i style="width:90%;background:#f43f5e"></i></div></li>
        </ul>
        <div class="lg-alert"><span aria-hidden="true">⚠</span> Operations is at 90% of budget</div>
      </section>
    </div>

    <div class="lg-grid">
      <section class="lg-card">
        <div class="lg-card-head"><h2>Financial goals</h2></div>
        <ul class="lg-goals">
          <li><div class="lg-goal-ring" style="--p:74;--c:#10b981" role="img" aria-label="Revenue target 74 percent"><b>74%</b></div><div><b>$2M revenue</b><i>$1.48M reached</i></div></li>
          <li><div class="lg-goal-ring" style="--p:52;--c:#6366f1" role="img" aria-label="Runway target 52 percent"><b>52%</b></div><div><b>18-mo runway</b><i>9.4 months funded</i></div></li>
        </ul>
      </section>

      <section class="lg-card lg-col-2">
        <div class="lg-card-head"><h2>Transaction history</h2><a class="lg-link" href="#">All transactions</a></div>
        <ul class="lg-tx">
          <li><span class="lg-tx-ico lg-tx-in" aria-hidden="true">↓</span><div class="lg-tx-info"><b>Stripe payout</b><i>Jun 14 · Revenue</i></div><b class="lg-pos">+$24,820.00</b></li>
          <li><span class="lg-tx-ico lg-tx-out" aria-hidden="true">↑</span><div class="lg-tx-info"><b>AWS infrastructure</b><i>Jun 13 · Infrastructure</i></div><b class="lg-neg">−$4,310.50</b></li>
          <li><span class="lg-tx-ico lg-tx-out" aria-hidden="true">↑</span><div class="lg-tx-info"><b>Payroll — June</b><i>Jun 12 · Payroll</i></div><b class="lg-neg">−$88,200.00</b></li>
          <li><span class="lg-tx-ico lg-tx-in" aria-hidden="true">↓</span><div class="lg-tx-info"><b>Vertex Group — INV-2038</b><i>Jun 11 · Revenue</i></div><b class="lg-pos">+$21,000.00</b></li>
        </ul>
      </section>
    </div>
  </main>
</div>

*{box-sizing:border-box}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lg-shell{--lg-bg:#0a0f1c;--lg-panel:#0f1626;--lg-panel-2:#0c1320;--lg-border:#1f2a44;--lg-text:#e9eefb;--lg-soft:#8b9abb;--lg-accent:#10b981;min-height:100vh;display:flex;background:var(--lg-bg);color:var(--lg-text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.lg-side{width:236px;flex:none;background:var(--lg-panel-2);border-right:1px solid var(--lg-border);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
.lg-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.18rem;margin-bottom:22px;padding:0 8px;font-family:'Sora',sans-serif}
.lg-logo-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#10b981,#059669);color:#04140a;font-size:1rem}
.lg-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.lg-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;color:var(--lg-soft);text-decoration:none;font-size:.9rem;font-weight:600;transition:background .15s,color .15s}
.lg-nav a i{font-style:normal;width:18px;text-align:center}
.lg-nav a:hover{background:#16203a;color:#fff}
.lg-nav a[aria-current=page]{background:rgba(16,185,129,.16);color:#34d399;box-shadow:inset 0 0 0 1px rgba(16,185,129,.3)}
.lg-nav a:focus-visible{outline:2px solid var(--lg-accent);outline-offset:2px}
.lg-pill{margin-left:auto;font-size:.7rem;font-weight:700;background:#f43f5e;color:#fff;border-radius:999px;padding:2px 8px}
.lg-side-foot{margin-top:14px;font-size:.74rem;color:#5d6c8c;padding:0 8px}
.lg-side-foot a{color:#34d399;text-decoration:none;font-weight:600}.lg-side-foot a:hover{text-decoration:underline}
.lg-main{flex:1;min-width:0;padding:24px 28px 40px}
.lg-top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.lg-top h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;margin:0}
.lg-sub{color:var(--lg-soft);font-size:.9rem;margin:3px 0 0}
.lg-top-actions{display:flex;align-items:center;gap:11px}
.lg-range{padding:10px 12px;border-radius:11px;border:1px solid var(--lg-border);background:var(--lg-panel);color:#fff;font:inherit;font-size:.85rem;cursor:pointer}
.lg-range:focus{outline:none;border-color:var(--lg-accent);box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.lg-icon-btn{position:relative;width:42px;height:42px;border-radius:11px;border:1px solid var(--lg-border);background:var(--lg-panel);color:var(--lg-soft);font-size:1.05rem;cursor:pointer}
.lg-icon-btn:focus-visible{outline:2px solid var(--lg-accent);outline-offset:2px}
.lg-dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#f43f5e;border:2px solid var(--lg-panel)}
.lg-export{border:1px solid var(--lg-border);border-radius:11px;background:var(--lg-panel);color:#fff;font:inherit;font-weight:700;padding:10px 16px;cursor:pointer;transition:.15s}
.lg-export:hover{border-color:var(--lg-accent)}.lg-export:focus-visible{outline:2px solid var(--lg-accent);outline-offset:2px}
.lg-avatar{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:.82rem;font-weight:700;color:#04140a;background:linear-gradient(135deg,#10b981,#34d399)}
.lg-balance-row{display:grid;grid-template-columns:1.2fr 2fr;gap:16px;margin-bottom:16px}
.lg-balance{background:linear-gradient(135deg,#0d2a22,#0f1626);border:1px solid var(--lg-border);border-radius:15px;padding:22px}
.lg-bal-label{font-size:.82rem;color:var(--lg-soft)}
.lg-bal-val{font-family:'Sora',sans-serif;font-size:2rem;font-weight:800;display:block;margin:6px 0;line-height:1.1}
.lg-bal-trend{font-size:.82rem;font-weight:700}
.lg-bal-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:var(--lg-panel);border:1px solid var(--lg-border);border-radius:15px;padding:22px}
.lg-bal-mini div{display:flex;flex-direction:column;justify-content:center;gap:5px}
.lg-bal-mini span{font-size:.82rem;color:var(--lg-soft)}
.lg-bal-mini b{font-family:'Sora',sans-serif;font-size:1.35rem;font-weight:800}
.lg-up{color:#34d399}.lg-pos{color:#34d399}.lg-neg{color:#fb7185}
.lg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.lg-col-2{grid-column:span 2}
.lg-card{background:var(--lg-panel);border:1px solid var(--lg-border);border-radius:15px;padding:18px;min-width:0}
.lg-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.lg-card-head h2{font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:700;margin:0}
.lg-link{font-size:.82rem;color:#34d399;text-decoration:none;font-weight:600}.lg-link:hover{text-decoration:underline}
.lg-legend-inline{display:flex;gap:14px;font-size:.78rem;color:var(--lg-soft)}
.lg-legend-inline i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.lg-chart svg{width:100%;height:200px;display:block}
.lg-x-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:.72rem;color:#5d6c8c}
.lg-cats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.lg-cats li{display:grid;grid-template-columns:130px 1fr 38px;align-items:center;gap:10px;font-size:.84rem;color:var(--lg-soft)}
.lg-cat-name{display:flex;align-items:center;gap:8px}
.lg-cat-name i{width:10px;height:10px;border-radius:3px}
.lg-cats b{text-align:right;color:#fff}
.lg-mini-bar{height:8px;border-radius:99px;background:#1a2540;overflow:hidden}
.lg-mini-bar i{display:block;height:100%;border-radius:99px}
.lg-table-wrap{overflow-x:auto}
.lg-table{width:100%;border-collapse:collapse;min-width:480px}
.lg-table th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:#5d6c8c;font-weight:600;padding:0 12px 12px}
.lg-table td{padding:12px;border-top:1px solid var(--lg-border);font-size:.88rem}
.lg-mono{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--lg-soft)}
.lg-badge{font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.lg-b-green{color:#34d399;background:rgba(52,211,153,.13)}
.lg-b-amber{color:#fbbf24;background:rgba(251,191,36,.13)}
.lg-b-red{color:#fb7185;background:rgba(251,113,133,.13)}
.lg-budgets{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:14px}
.lg-budget-head{display:flex;justify-content:space-between;font-size:.84rem;margin-bottom:7px}
.lg-budget-head span{color:var(--lg-soft)}.lg-budget-head b{color:#fff}
.lg-alert{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#fbbf24;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);border-radius:10px;padding:10px 12px}
.lg-goals{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.lg-goals li{display:flex;align-items:center;gap:14px}
.lg-goal-ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--c) calc(var(--p)*1%),#1a2540 0)}
.lg-goal-ring b{width:48px;height:48px;border-radius:50%;background:var(--lg-panel);display:grid;place-items:center;font-size:.82rem;font-weight:800}
.lg-goals b+div b,.lg-goals>li>div b{font-family:'Sora',sans-serif}
.lg-goals>li>div b{display:block;font-size:.92rem}
.lg-goals>li>div i{font-style:normal;font-size:.78rem;color:var(--lg-soft)}
.lg-tx{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.lg-tx li{display:flex;align-items:center;gap:12px}
.lg-tx-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:1rem;font-weight:800;flex:none}
.lg-tx-in{color:#34d399;background:rgba(52,211,153,.14)}
.lg-tx-out{color:#fb7185;background:rgba(251,113,133,.14)}
.lg-tx-info{flex:1;min-width:0}
.lg-tx-info b{font-size:.88rem;display:block}
.lg-tx-info i{font-style:normal;font-size:.76rem;color:var(--lg-soft)}
.lg-tx>li>b{font-family:'Sora',sans-serif;font-size:.9rem;white-space:nowrap}
.lg-burger{display:none;position:fixed;top:16px;left:16px;z-index:60;width:44px;height:44px;border-radius:11px;border:1px solid var(--lg-border);background:var(--lg-panel);flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.lg-burger span{width:18px;height:2px;background:#fff;border-radius:2px}
.lg-overlay{position:fixed;inset:0;background:rgba(4,7,15,.6);z-index:40;border:0}
@media(max-width:1080px){.lg-balance-row{grid-template-columns:1fr}.lg-grid{grid-template-columns:1fr}.lg-col-2{grid-column:span 1}}
@media(max-width:760px){
  .lg-burger{display:flex}
  .lg-side{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:transform .25s ease}
  .lg-side.is-open{transform:translateX(0)}
  .lg-main{padding:72px 16px 32px}
  .lg-top-actions{width:100%;flex-wrap:wrap}
  .lg-bal-mini{grid-template-columns:1fr}
  .lg-cats li{grid-template-columns:100px 1fr 34px}
}
@media(prefers-reduced-motion:reduce){.lg-side{transition:none}.lg-nav a{transition:none}}

(function(){
  var side=document.querySelector('[data-lg-side]');
  var btn=document.querySelector('[data-lg-toggle]');
  var ov=document.querySelector('[data-lg-overlay]');
  if(!side||!btn)return;
  function open(o){side.classList.toggle('is-open',o);btn.setAttribute('aria-expanded',o?'true':'false');if(ov)ov.hidden=!o;}
  btn.addEventListener('click',function(){open(!side.classList.contains('is-open'));});
  if(ov)ov.addEventListener('click',function(){open(false);});
})();

Free to use — no attribution required. This is a complete, responsive Bootstrap 5 page. Download a ready-to-open .html file with all CDN links included, or copy the HTML and drop it into your project.

What's included in this template

The Ledger — Finance & Revenue Dashboard is a complete admin dashboards design with realistic demo content — ready to preview, copy or download as a single responsive HTML file. Key features:

Professional dark finance UI
Total balance + P&L summary
SVG cash-flow chart (income vs expenses)
Expense category breakdown
Invoices table with payment status
Budget tracking + over-budget alert
Conic-gradient goal rings
Transaction history feed
Collapsible mobile sidebar
No chart dependency

How to use it

Open the live preview above to see the full design at desktop, tablet and mobile widths. When you are happy with it, use Download to save a single ledger-finance-dashboard.html file, or Copy to grab the source. All required libraries load from public CDNs, so the file works the moment you open it — just replace the demo content with your own and publish.