Financial Dashboard
A household finance dashboard. React + Tailwind, loading the system first. The first data-heavy Jonesco page; the 1.2.0 dashboard patterns come from it.
The real dashboard is private. The demo is built from the same code with a made-up household, so every name, account and figure in it is fictional. It is rebuilt whenever the real dashboard’s layout changes. Chart colors can be compared by link: blue, green, purple.
Variations
| Site | Variation | Why |
|---|---|---|
| Header | Two-line title in condensed caps with the last-updated date small under it; scrolls away; changelog as an icon button in the top-right corner | The page is a document with a date; only the section nav needs to stay on screen. |
| Section nav | Pinned black nav of ten sections, current one underlined in yellow | A long page you jump around in. Became Section nav. |
| Summary row | Four stats at the top, total marked in yellow | Answers “how are we doing” before any scrolling. |
| Charts | Cyan data color; other colors by link | Chosen after a color trial. Became Data & charts. |
| Tables | Savings accounts (one table per person, fixed columns that line up with the black Total band) and the top stocks and funds use Table, copied into the site’s stylesheet while it’s pinned to 1.1.1 | Multi-column data reads as a table; the label-and-value lists stay rows. |
| Status | Critical, Warning and Working as weight steps of the tag; 3.0.0 pills copied into the site’s stylesheet while it’s pinned to 1.1.1, the light tag white inside notifications | Three levels without adding colors. |
| Closing band | Total Assets as a black band into the footer, history line in light cyan | The page closes on black. |