Finance overview (PulseFit)
A money-management example inspired by Khoirul's revenue dashboard. The reference shows a marketing workspace with total revenue, attributed revenue, marketing ROI and a revenue line chart. This example adapts its rounded KPI cards, quiet navigation and chart-first layout into a studio cash-flow dashboard, rather than claiming to reproduce its whole product.
White cards, a charcoal sidebar and gold-ink chart lines. Bebas Neue titles and Rubik body text match the studio language. All names, transactions and amounts are fictitious. Currency is USD throughout.
Studio cash flow
Switch September / August, compare income with expenses, hover or keyboard-focus a chart point, search or filter the ledger, and open a transaction. Everything runs locally and resets on reload.
Money, in perspective.
Northstar Studio · Monthly overview
Revenue performance
Weekly totals, not a cumulative balance
Spending plan
Actual / monthly budget
Transactions
8 entries · Settled cash movements
| Description | Date | Category | Amount (USD) |
|---|---|---|---|
| Sep 3 | Sales | +$4,200 | |
| Sep 5 | People | -$1,600 | |
| Sep 10 | Sales | +$4,800 | |
| Sep 12 | Space | -$1,800 | |
| Sep 17 | Sales | +$3,900 | |
| Sep 19 | Equipment | -$1,400 | |
| Sep 24 | Sales | +$5,500 | |
| Sep 26 | Marketing | -$2,000 |
How to use it
- Monthly review: income, expenses and net cash flow answer whether the studio took in more cash than it spent. Cash retained is net cash flow divided by income, not an accounting profit margin.
- Weekly planning: the solid income line and dashed expense line share a zero-based USD axis. Each point represents one week's total, not daily interpolation or a cumulative bank balance.
- Cost control: compare category spending with a fixed monthly budget. An explicit over-budget label explains the capped progress bar; color is never the only signal.
- Reconciliation: inspect settled transactions by type or description. Table filters do not alter the overview totals. Use the detail panel to inspect one row, not initiate a payment.
Anatomy
| Part | Purpose |
|---|---|
| Workspace context | Illustrative sidebar, not clickable navigation that promises other screens |
| Period picker | Two complete months of sample data; every KPI, chart and table updates together |
| KPI cards | Total income, expenses, net cash flow and cash retained; September changes compare with August |
| Revenue performance | Area/line income chart, optional dashed expenses, point values on hover or focus |
| Spending plan | Category actuals and budgets, percentage used and an over-budget warning |
| Transaction ledger | Signed amounts, explicit type, settled status, date, category and local detail |
Chart and data rules
Use the existing chart catalog for standalone line, area and bar patterns. This page adds dashboard composition and coordinated data, not another chart library. Keep axes, units and aggregation explicit. Never render missing values as zero. Real products need loading, stale-data, error and empty states alongside the populated example.
The shared FinanceDashboard.vue owns this example. Supply language="pulsefit"; its scoped class tokens carry the language and Felix dark-mode colors. Keep monetary data in integer cents in production, format only at the presentation layer and distinguish settled, pending and forecast values. This demo uses whole-dollar settled sample entries, so all amounts can be checked against the ledger.
No bank connection, account balance, transfer, payment, export, investment forecast or persistence is implied. It is a UI template, not financial advice.