Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
243 lines (242 loc) · 20 KB
/
Copy pathindex.html
File metadata and controls
243 lines (242 loc) · 20 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Finance Dashboard Template (HTML) | Tallybook</title>
<meta name="description" content="Free finance and accounting dashboard template in one HTML file. Cash flow chart, profit and loss, invoices with filters, expenses donut and bank balances.">
<meta name="keywords" content="finance dashboard template, accounting dashboard HTML free, invoice dashboard template, bookkeeping admin panel, free HTML template, one page website template">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/">
<meta name="theme-color" content="#1F2933">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Free HTML Templates">
<meta property="og:title" content="Free Finance and Accounting Dashboard Template (HTML)">
<meta property="og:description" content="Free finance and accounting dashboard template in one HTML file. Cash flow chart, profit and loss, invoices with filters, expenses donut and bank balances.">
<meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/screenshot.png"><meta property="og:image:alt" content="Free Finance and Accounting Dashboard Template (HTML)">
<meta property="og:image:width" content="1440">
<meta property="og:image:height" content="900">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Finance and Accounting Dashboard Template (HTML)">
<meta name="twitter:description" content="Free finance and accounting dashboard template in one HTML file. Cash flow chart, profit and loss, invoices with filters, expenses donut and bank balances.">
<meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/screenshot.png">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='14' fill='%231F2933'/><path d='M18 44V30M28 44V22M38 44V34M48 44V18' stroke='%2334D399' stroke-width='6' stroke-linecap='round'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://images.unsplash.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Structured data for this template page. When you use the template, replace it with LocalBusiness or Organization schema for your own business (see README). -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebPage",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/#webpage",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/",
"name": "Free Finance and Accounting Dashboard Template (HTML)",
"description": "Free finance and accounting dashboard template in one HTML file. Cash flow chart, profit and loss, invoices with filters, expenses donut and bank balances.",
"inLanguage": "en",
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/screenshot.png"
},
"isPartOf": {
"@type": "WebSite",
"name": "Free HTML Templates",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
"breadcrumb": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/#breadcrumb"
},
"mainEntity": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/#template"
}
},
{
"@type": "CreativeWork",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/#template",
"name": "Free Finance and Accounting Dashboard Template (HTML)",
"description": "Free finance and accounting dashboard template in one HTML file. Cash flow chart, profit and loss, invoices with filters, expenses donut and bank balances.",
"genre": "Website template",
"image": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/screenshot.png",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/",
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"encodingFormat": "text/html",
"inLanguage": "en",
"keywords": "finance dashboard template, accounting dashboard HTML free, invoice dashboard template, bookkeeping admin panel",
"author": {
"@type": "Person",
"name": "mmrahmanbappi",
"url": "https://github.com/mmrahmanbappi"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"downloadUrl": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/index.html"
},
{
"@type": "BreadcrumbList",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Free HTML Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Admin Dashboard Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Finance Dashboard Template",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/finance-dashboard/"
}
]
}
]
}
</script>
<style>
:root{--ink:#1F2933;--ink-2:#323F4B;--grn:#059669;--grn-l:#E6F6F0;--red:#E11D48;--red-l:#FDE8EE;--blue:#2563EB;--amber:#D97706;--amber-l:#FEF3E2;--text:#27313B;--muted:#6B7580;--line:#E4E7EB;--bg:#F5F6F7;--card:#fff;
--font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}h1,h2,h3{margin:0;color:var(--ink)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--grn);color:#fff;padding:10px;z-index:99}
:focus-visible{outline:3px solid var(--grn);outline-offset:2px;border-radius:6px}
.top{background:var(--ink);color:#CBD2D9}
.top .in{display:flex;align-items:center;gap:26px;padding:0 28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:19px;text-decoration:none}
.brand i{width:26px;height:26px;border-radius:8px;background:#34D399}
.tnav{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.tnav a{display:block;padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px}
.tnav a:hover{background:var(--ink-2);color:#fff}.tnav a.on{background:var(--ink-2);color:#fff}
.top .r{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:14px}
.top .co{background:var(--ink-2);border-radius:8px;padding:6px 12px;color:#fff;font-weight:600}
.top img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.burger{display:none;background:none;border:1px solid #52606D;color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.content{max-width:1320px;margin:0 auto;padding:26px 28px 40px}
.title{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.title h1{font-size:26px;font-weight:800}.title p{margin:4px 0 0;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:9px;font-weight:700;font-size:14px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:var(--font);color:var(--ink)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.kpi small{color:var(--muted);font-weight:600}.kpi .v{font-size:28px;font-weight:800;color:var(--ink);margin:6px 0 2px;letter-spacing:-.02em}
.kpi .d{font-size:13px;font-weight:700}.g{color:var(--grn)}.r{color:var(--red)}
.kpi.dark{background:var(--ink);border-color:var(--ink)}.kpi.dark small{color:#9AA5B1}.kpi.dark .v{color:#fff}
.row{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;margin-bottom:14px}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.card h2{font-size:16px;font-weight:800}
.lg{display:flex;gap:14px;font-size:13px;color:var(--muted)}.lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
#cash{width:100%;height:250px}
.pl{width:100%;border-collapse:collapse;font-size:14px}
.pl td{padding:9px 0;border-bottom:1px solid var(--line)}.pl td:last-child{text-align:right;font-weight:700}
.pl tr.tot td{border-bottom:0;border-top:2px solid var(--ink);font-size:16px;color:var(--ink);padding-top:12px}
.pl .sub{color:var(--muted);padding-left:14px}
.row3{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px}
.tabs{display:flex;gap:6px}
.tabs button{border:1px solid var(--line);background:#fff;font:inherit;font-weight:700;font-size:13px;padding:6px 12px;border-radius:8px;cursor:pointer;color:var(--muted)}
.tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tw{overflow-x:auto}
table.inv{width:100%;border-collapse:collapse;min-width:520px;font-size:14px}
.inv th{text-align:left;color:var(--muted);font-weight:600;font-size:13px;padding:8px 10px;border-bottom:1px solid var(--line)}
.inv td{padding:11px 10px;border-bottom:1px solid var(--line)}
.inv td:nth-child(4),.inv th:nth-child(4){text-align:right}
.chip{font-size:12px;font-weight:700;border-radius:6px;padding:3px 8px}
.c-paid{background:var(--grn-l);color:var(--grn)}.c-overdue{background:var(--red-l);color:var(--red)}.c-due{background:var(--amber-l);color:var(--amber)}
.donut{display:flex;flex-direction:column;align-items:center;gap:10px}
.donut svg{width:160px;height:160px}
.donut ul{list-style:none;padding:0;margin:0;width:100%;font-size:14px}.donut li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.donut li i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px}
.bank{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.bank b{display:block;color:var(--ink)}.bank small{color:var(--muted)}.bank strong{font-size:16px}
.bills{margin-top:16px}.bill{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px dashed var(--line)}
.foot{color:var(--muted);font-size:13px;margin-top:24px;text-align:center}.foot a{color:var(--grn)}
@media (max-width:1150px){.kpis{grid-template-columns:1fr 1fr}.row,.row3{grid-template-columns:1fr}}
@media (max-width:860px){.tnav{display:none}.burger{display:block}.tnav.open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--ink);padding:12px 20px;z-index:30}.top .co{display:none}}
@media (max-width:520px){.kpis{grid-template-columns:1fr}.content{padding:18px 14px}}
.card{min-width:0}.tabs{flex-wrap:wrap}.row3>*,.row>*{min-width:0}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<!-- Template notice bar: delete this block before you publish your own site -->
<div id="template-bar" style="background:#111;color:#fff;font:500 14px/1.4 system-ui,sans-serif;text-align:center;padding:9px 16px">Free HTML template. <a href="index.html" download="finance-dashboard.html" style="color:#FFD166;font-weight:700">Download this template (free)</a> | <a href="https://mmrahmanbappi.github.io/100-free-html-templates/" style="color:#fff">See all free templates</a></div>
<header class="top">
<div class="in">
<a href="#" class="brand"><i aria-hidden="true"></i>Tallybook</a>
<ul class="tnav" id="menu"><li><a href="#" class="on">Overview</a></li><li><a href="#">Invoices</a></li><li><a href="#">Expenses</a></li><li><a href="#">Banking</a></li><li><a href="#">Reports</a></li><li><a href="#">Tax</a></li></ul>
<div class="r"><span class="co">Greenline Landscaping Ltd.</span><button class="burger" aria-label="Open menu" aria-expanded="false" aria-controls="menu">☰</button><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&q=60&auto=format&fit=crop" alt="Your profile" width="34" height="34"></div>
</div>
</header>
<main class="content" id="main">
<div class="title"><div><h1>Financial overview</h1><p>Financial year 2026 · figures in US dollars</p></div><div style="display:flex;gap:8px"><button class="btn" type="button">Export to Excel</button><button class="btn pri" type="button">+ New invoice</button></div></div>
<section class="kpis" aria-label="Key figures">
<div class="card kpi dark"><small>Cash in the bank</small><div class="v">$214,380</div><span class="d g">+$18,240 this month</span></div>
<div class="card kpi"><small>Revenue this year</small><div class="v">$1,284,600</div><span class="d g">+12.8% vs last year</span></div>
<div class="card kpi"><small>Net profit margin</small><div class="v">18.4%</div><span class="d g">+2.1 pts</span></div>
<div class="card kpi"><small>Unpaid invoices</small><div class="v">$46,920</div><span class="d r">$12,300 overdue</span></div>
</section>
<div class="row">
<section class="card" aria-labelledby="c-t"><div class="card-h"><h2 id="c-t">Cash flow</h2><div class="lg"><span><i style="background:var(--grn)"></i>Money in</span><span><i style="background:#FDA4B8"></i>Money out</span><span><i style="background:var(--ink)"></i>Net</span></div></div><svg id="cash" role="img" aria-label="Chart of money in and money out by month, with net cash flow line"></svg></section>
<section class="card" aria-labelledby="p-t"><div class="card-h"><h2 id="p-t">Profit and loss, this year</h2></div>
<table class="pl"><tbody>
<tr><td>Revenue</td><td>$1,284,600</td></tr>
<tr><td class="sub">Cost of sales</td><td>−$612,300</td></tr>
<tr><td><b>Gross profit</b></td><td>$672,300</td></tr>
<tr><td class="sub">Salaries</td><td>−$288,000</td></tr>
<tr><td class="sub">Rent and utilities</td><td>−$64,200</td></tr>
<tr><td class="sub">Marketing</td><td>−$41,800</td></tr>
<tr><td class="sub">Other expenses</td><td>−$41,900</td></tr>
<tr class="tot"><td>Net profit</td><td class="g">$236,400</td></tr>
</tbody></table></section>
</div>
<div class="row3">
<section class="card" aria-labelledby="i-t"><div class="card-h"><h2 id="i-t">Invoices</h2><div class="tabs" role="group" aria-label="Filter invoices" id="flt"><button type="button" aria-pressed="true" data-f="all">All</button><button type="button" aria-pressed="false" data-f="due">Due</button><button type="button" aria-pressed="false" data-f="overdue">Overdue</button><button type="button" aria-pressed="false" data-f="paid">Paid</button></div></div>
<div class="tw"><table class="inv"><thead><tr><th scope="col">Invoice</th><th scope="col">Client</th><th scope="col">Due date</th><th scope="col">Amount</th><th scope="col">Status</th></tr></thead><tbody id="inv"></tbody></table></div></section>
<section class="card" aria-labelledby="e-t"><div class="card-h"><h2 id="e-t">Expenses by category</h2></div><div class="donut"><svg id="donut" viewBox="0 0 42 42" role="img" aria-label="Donut chart of expenses by category"></svg><ul id="elist"></ul></div></section>
<section class="card" aria-labelledby="b-t"><div class="card-h"><h2 id="b-t">Bank accounts</h2></div>
<div class="bank"><div><b>Business current</b><small>•••• 4417</small></div><strong>$128,940</strong></div>
<div class="bank"><div><b>Tax savings</b><small>•••• 2093</small></div><strong>$62,400</strong></div>
<div class="bank"><div><b>USD card</b><small>•••• 7731</small></div><strong>$23,040</strong></div>
<div class="bills"><h2 style="margin-bottom:6px">Bills due soon</h2><div class="bill"><span>Payroll</span><b>Oct 28 · $24,000</b></div><div class="bill"><span>Office rent</span><b>Nov 1 · $5,350</b></div><div class="bill"><span>Sales tax (Q3)</span><b>Nov 15 · $18,720</b></div></div></section>
</div>
<p class="foot">Tallybook finance dashboard, a <a href="https://mmrahmanbappi.github.io/100-free-html-templates/">free HTML template</a>. Sample data only. Photo: <a href="https://unsplash.com" rel="noopener">Unsplash</a>. © <span id="yr">2026</span></p>
</main>
<script>
const I=[["INV-1048","Harbor Dental Group","Oct 30",8400,"due"],["INV-1047","City Parks Council","Oct 12",12300,"overdue"],["INV-1046","Oakline Furniture","Oct 20",5260,"paid"],["INV-1045","Riverside Homes","Nov 4",14800,"due"],["INV-1044","Kestrel Build","Oct 02",9120,"paid"],["INV-1043","Maple School","Nov 10",6040,"due"]];
const fm=n=>'$'+n.toLocaleString('en-US');
function inv(f){document.getElementById('inv').innerHTML=I.filter(x=>f==='all'||x[4]===f).map(x=>`<tr><td><b>${x[0]}</b></td><td>${x[1]}</td><td>${x[2]}</td><td><b>${fm(x[3])}</b></td><td><span class="chip c-${x[4]}">${x[4][0].toUpperCase()+x[4].slice(1)}</span></td></tr>`).join('')}
document.querySelectorAll('#flt button').forEach(b=>b.addEventListener('click',()=>{document.querySelectorAll('#flt button').forEach(x=>x.setAttribute('aria-pressed',x===b));inv(b.dataset.f)}));inv('all');
const E=[["Salaries",60,"#1F2933"],["Materials",18,"#059669"],["Rent",9,"#2563EB"],["Marketing",8,"#D97706"],["Other",5,"#CBD2D9"]];let o=25,d='';
E.forEach(e=>{d+=`<circle cx="21" cy="21" r="15.9" fill="none" stroke="${e[2]}" stroke-width="6" stroke-dasharray="${e[1]} ${100-e[1]}" stroke-dashoffset="${o}"/>`;o-=e[1]});
d+='<text x="21" y="21" text-anchor="middle" font-size="4.6" font-weight="800" fill="#1F2933">$436k</text><text x="21" y="26" text-anchor="middle" font-size="2.6" fill="#6B7580">this year</text>';
document.getElementById('donut').innerHTML=d;document.getElementById('elist').innerHTML=E.map(e=>`<li><span><i style="background:${e[2]}"></i>${e[0]}</span><b>${e[1]}%</b></li>`).join('');
const M=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct"],IN=[82,88,104,118,126,139,144,131,122,130],OUT=[74,79,86,92,98,104,110,105,99,112];
function cash(){const s=document.getElementById('cash'),W=s.clientWidth||700,H=250,pl=40,pb=24,mx=160,bw=(W-pl)/M.length;let g='';
for(let j=0;j<=4;j++){const y=H-pb-(H-pb-10)*j/4;g+=`<line x1="${pl}" x2="${W}" y1="${y}" y2="${y}" stroke="#E4E7EB"/><text x="${pl-6}" y="${y+4}" text-anchor="end" font-size="11" fill="#6B7580">$${mx*j/4}k</text>`}
const Y=v=>H-pb-(H-pb-10)*v/mx;let net='';
M.forEach((m,i)=>{const x=pl+i*bw+bw*.15,w=bw*.33;g+=`<rect x="${x}" y="${Y(IN[i])}" width="${w}" height="${H-pb-Y(IN[i])}" rx="4" fill="#059669"><title>${m} in: $${IN[i]}k</title></rect><rect x="${x+w+2}" y="${Y(OUT[i])}" width="${w}" height="${H-pb-Y(OUT[i])}" rx="4" fill="#FDA4B8"><title>${m} out: $${OUT[i]}k</title></rect><text x="${x+w}" y="${H-7}" text-anchor="middle" font-size="11" fill="#6B7580">${m}</text>`;
net+=(i?'L':'M')+(x+w)+' '+Y((IN[i]-OUT[i])*3)});
g+=`<path d="${net}" fill="none" stroke="#1F2933" stroke-width="2.5" stroke-dasharray="1 0"/>`;s.setAttribute('viewBox',`0 0 ${W} ${H}`);s.innerHTML=g}
cash();window.addEventListener('resize',cash);
</script>
<script>
(()=>{const b=document.querySelector('.burger'),m=document.getElementById('menu'),y=document.getElementById('yr');
if(b&&m){b.addEventListener('click',()=>{const o=m.classList.toggle('open');b.setAttribute('aria-expanded',o)});
m.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{m.classList.remove('open');b.setAttribute('aria-expanded',false)}))}
if(y)y.textContent=new Date().getFullYear()})();
</script>
</body>
</html>