1<!DOCTYPE html>
2<html lang="en" data-theme="dark">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Personal Finance Dashboard</title>
7 <meta name="description" content="Modern static personal finance dashboard with transaction management, monthly budget tracking, canvas spending charts, and CSV import/export.">
8 <link rel="stylesheet" href="style.css">
9</head>
10<body>
11 <div class="app-container">
12
13 <header class="navbar">
14 <div class="brand">
15 <div class="brand-icon">$</div>
16 <div class="brand-text">
17 <h1>WealthPulse</h1>
18 <p>Personal Finance Dashboard</p>
19 </div>
20 </div>
21 <div class="nav-actions">
22 <button id="btn-theme-toggle" class="btn-icon" title="Toggle Theme (D)">🌙</button>
23 <button id="btn-shortcuts" class="btn-icon" title="Keyboard Shortcuts (?)">⌨️</button>
24 <a href="tests.html" class="btn btn-secondary" style="text-decoration: none;">🧪 Self-Tests</a>
25 <button id="btn-import-csv" class="btn btn-secondary">📥 Import CSV</button>
26 <button id="btn-export-csv" class="btn btn-secondary">📤 Export CSV</button>
27 <button id="btn-add-tx" class="btn btn-primary">➕ New Transaction</button>
28 </div>
29 </header>
30
31
32 <section class="summary-grid">
33 <div class="kpi-card">
34 <div class="kpi-header">
35 <span class="kpi-title">Total Income</span>
36 <div class="kpi-icon-badge" style="background: var(--income-green-bg); color: var(--income-green);">📈</div>
37 </div>
38 <div class="kpi-value" id="kpi-income">$0.00</div>
39 <div class="kpi-subtext">Calculated from income entries</div>
40 </div>
41
42 <div class="kpi-card">
43 <div class="kpi-header">
44 <span class="kpi-title">Total Expenses</span>
45 <div class="kpi-icon-badge" style="background: var(--expense-rose-bg); color: var(--expense-rose);">📉</div>
46 </div>
47 <div class="kpi-value" id="kpi-expense">$0.00</div>
48 <div class="kpi-subtext">Calculated from expense entries</div>
49 </div>
50
51 <div class="kpi-card">
52 <div class="kpi-header">
53 <span class="kpi-title">Net Balance</span>
54 <div class="kpi-icon-badge" style="background: var(--primary-light); color: var(--primary);">💰</div>
55 </div>
56 <div class="kpi-value" id="kpi-balance">$0.00</div>
57 <div class="kpi-subtext" id="kpi-balance-sub">Income minus Expenses</div>
58 </div>
59
60 <div class="kpi-card">
61 <div class="kpi-header">
62 <span class="kpi-title">Savings Rate</span>
63 <div class="kpi-icon-badge" style="background: var(--warning-amber-bg); color: var(--warning-amber);">🎯</div>
64 </div>
65 <div class="kpi-value" id="kpi-savings-rate">0.0%</div>
66 <div class="kpi-subtext">Target: > 20.0%</div>
67 </div>
68 </section>
69
70
71 <section class="dashboard-grid">
72
73 <div class="card">
74 <div class="card-header">
75 <div class="card-title">
76 <span>📊</span> Spending & Income Over Time
77 </div>
78 <div class="filter-group">
79 <select id="chart-group-select" class="select-filter" style="padding: 4px 8px; font-size: 0.8rem;">
80 <option value="daily">Daily Timeline</option>
81 <option value="monthly">Monthly Timeline</option>
82 </select>
83 </div>
84 </div>
85 <div class="chart-container">
86 <canvas id="spending-chart"></canvas>
87 </div>
88 </div>
89
90
91 <div class="card">
92 <div class="card-header">
93 <div class="card-title">
94 <span>🎯</span> Monthly Budget Target
95 </div>
96 <button id="btn-edit-budgets" class="btn btn-secondary" style="padding: 4px 10px; font-size: 0.78rem;">Edit Budgets</button>
97 </div>
98 <div id="budget-list-container" class="budget-list">
99
100 </div>
101 </div>
102 </section>
103
104
105 <section class="dashboard-grid" style="grid-template-columns: 1fr 2fr; margin-bottom: 24px;">
106 <div class="card">
107 <div class="card-header">
108 <div class="card-title">
109 <span>🍩</span> Category Share
110 </div>
111 </div>
112 <div class="chart-container" style="height: 220px;">
113 <canvas id="donut-chart"></canvas>
114 </div>
115 </div>
116
117
118 <div class="card" style="display: flex; flex-direction: column; justify-content: center; gap: 16px;">
119 <h3 style="font-size: 1.1rem; font-weight: 700;">⚡ Quick Financial Insights</h3>
120 <p style="color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6;">
121 Keep track of your monthly spending limits, log recurring expenses, and export your data anytime. Press <kbd>N</kbd> anywhere to quickly create a transaction or <kbd>/</kbd> to search.
122 </p>
123 <div style="display: flex; gap: 12px; flex-wrap: wrap;">
124 <button id="btn-reset-sample" class="btn btn-secondary" style="font-size: 0.8rem;">🔄 Reset to Sample Data</button>
125 </div>
126 </div>
127 </section>
128
129
130 <section class="transactions-section">
131 <div class="card-header" style="margin-bottom: 16px;">
132 <div class="card-title">
133 <span>📜</span> Transactions History
134 <span id="tx-count-badge" class="badge badge-category" style="margin-left: 8px;">0 entries</span>
135 </div>
136 </div>
137
138
139 <div class="filter-toolbar">
140 <div class="filter-group">
141 <input type="text" id="search-input" class="input-search" placeholder="Search transactions... (/)" />
142
143 <select id="category-filter" class="select-filter">
144 <option value="All">All Categories</option>
145
146 </select>
147
148 <select id="type-filter" class="select-filter">
149 <option value="All">All Types</option>
150 <option value="expense">Expenses Only</option>
151 <option value="income">Income Only</option>
152 </select>
153 </div>
154
155 <div class="filter-group">
156 <input type="date" id="start-date-filter" class="input-date" title="Start Date" />
157 <span style="color: var(--text-muted);">to</span>
158 <input type="date" id="end-date-filter" class="input-date" title="End Date" />
159 <button id="btn-clear-filters" class="btn btn-secondary" style="padding: 7px 12px; font-size: 0.8rem;">Clear</button>
160 </div>
161 </div>
162
163
164 <div class="table-responsive">
165 <table class="transactions-table">
166 <thead>
167 <tr>
168 <th>Date</th>
169 <th>Description</th>
170 <th>Category</th>
171 <th>Type</th>
172 <th>Amount</th>
173 <th>Notes</th>
174 <th style="text-align: right;">Actions</th>
175 </tr>
176 </thead>
177 <tbody id="transactions-tbody">
178
179 </tbody>
180 </table>
181 </div>
182 </section>
183 </div>
184
185
186 <div id="modal-transaction" class="modal-backdrop">
187 <div class="modal">
188 <div class="modal-header">
189 <h2 id="modal-tx-title" class="modal-title">New Transaction</h2>
190 <button class="modal-close" data-close-modal="modal-transaction">×</button>
191 </div>
192 <form id="form-transaction">
193 <input type="hidden" id="tx-id" value="" />
194
195 <div class="form-row">
196 <div class="form-group">
197 <label class="form-label" for="tx-type">Transaction Type</label>
198 <select id="tx-type" class="form-select" required>
199 <option value="expense">Expense</option>
200 <option value="income">Income</option>
201 </select>
202 </div>
203 <div class="form-group">
204 <label class="form-label" for="tx-date">Date</label>
205 <input type="date" id="tx-date" class="form-input" required />
206 </div>
207 </div>
208
209 <div class="form-group">
210 <label class="form-label" for="tx-description">Description</label>
211 <input type="text" id="tx-description" class="form-input" placeholder="e.g., Grocery Store" required />
212 </div>
213
214 <div class="form-row">
215 <div class="form-group">
216 <label class="form-label" for="tx-amount">Amount ($)</label>
217 <input type="number" id="tx-amount" class="form-input" step="0.01" min="0.01" placeholder="0.00" required />
218 </div>
219 <div class="form-group">
220 <label class="form-label" for="tx-category">Category</label>
221 <select id="tx-category" class="form-select" required>
222
223 </select>
224 </div>
225 </div>
226
227 <div class="form-group">
228 <label class="form-label" for="tx-notes">Notes (Optional)</label>
229 <input type="text" id="tx-notes" class="form-input" placeholder="Additional details or memo" />
230 </div>
231
232 <div class="form-actions">
233 <button type="button" class="btn btn-secondary" data-close-modal="modal-transaction">Cancel</button>
234 <button type="submit" class="btn btn-primary">Save Transaction</button>
235 </div>
236 </form>
237 </div>
238 </div>
239
240
241 <div id="modal-import" class="modal-backdrop">
242 <div class="modal">
243 <div class="modal-header">
244 <h2 class="modal-title">Import CSV Transactions</h2>
245 <button class="modal-close" data-close-modal="modal-import">×</button>
246 </div>
247 <div class="form-group">
248 <label class="form-label" for="csv-file-input">Select CSV File</label>
249 <input type="file" id="csv-file-input" class="form-input" accept=".csv" />
250 </div>
251 <div class="form-group">
252 <label class="form-label" for="csv-raw-text">Or Paste CSV Content</label>
253 <textarea id="csv-raw-text" class="form-textarea" rows="6" placeholder="Date,Description,Amount,Category,Type,Notes 2026-07-28,Grocery,45.50,Food & Dining,expense,Weekly shop"></textarea>
254 </div>
255 <div id="csv-preview-msg" style="font-size: 0.85rem; margin-bottom: 12px;"></div>
256 <div class="form-actions">
257 <button type="button" class="btn btn-secondary" data-close-modal="modal-import">Cancel</button>
258 <button type="button" id="btn-confirm-import" class="btn btn-primary">Parse & Import</button>
259 </div>
260 </div>
261 </div>
262
263
264 <div id="modal-budgets" class="modal-backdrop">
265 <div class="modal">
266 <div class="modal-header">
267 <h2 class="modal-title">Edit Category Budgets</h2>
268 <button class="modal-close" data-close-modal="modal-budgets">×</button>
269 </div>
270 <form id="form-budgets">
271 <div id="budget-inputs-container" style="display: flex; flex-direction: column; gap: 12px; max-height: 350px; overflow-y: auto; padding-right: 4px;">
272
273 </div>
274 <div class="form-actions">
275 <button type="button" class="btn btn-secondary" data-close-modal="modal-budgets">Cancel</button>
276 <button type="submit" class="btn btn-primary">Save Limits</button>
277 </div>
278 </form>
279 </div>
280 </div>
281
282
283 <div id="modal-shortcuts" class="modal-backdrop">
284 <div class="modal">
285 <div class="modal-header">
286 <h2 class="modal-title">Keyboard Shortcuts</h2>
287 <button class="modal-close" data-close-modal="modal-shortcuts">×</button>
288 </div>
289 <div class="shortcut-list">
290 <div class="shortcut-item"><span>New Transaction</span> <kbd>N</kbd></div>
291 <div class="shortcut-item"><span>Search / Filter</span> <kbd>/</kbd></div>
292 <div class="shortcut-item"><span>Toggle Dark/Light</span> <kbd>D</kbd></div>
293 <div class="shortcut-item"><span>Export CSV</span> <kbd>E</kbd></div>
294 <div class="shortcut-item"><span>Import CSV</span> <kbd>I</kbd></div>
295 <div class="shortcut-item"><span>Close Modal</span> <kbd>Esc</kbd></div>
296 <div class="shortcut-item"><span>Shortcuts Guide</span> <kbd>?</kbd></div>
297 </div>
298 </div>
299 </div>
300
301
302 <div id="toast-container" class="toast-container"></div>
303
304
305 <script src="data.js"></script>
306 <script src="charts.js"></script>
307 <script src="app.js"></script>
308</body>
309</html>
310
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.