# SPEC — System Dashboard

**Date:** 2026-09-09  
**Status:** implemented on VM500 (`/`)  
**Language:** English UI

## Purpose

The Dashboard is the system's presentation and navigation page. It summarizes the complete resident group and does not duplicate the Residents data grid.

## Route separation

- `/` — consolidated system Dashboard. Do not put the Cash (SA) grid here.
- `/residents` — **Rent Payments Control**: complete resident register and Cash (SA) account grid.
- `/residents/{id}` — individual resident account dashboard.
- The sidebar item **Rent Payments Control** links to `/residents`; **Dashboard** remains `/`.

## Branding

- The Salvation Army shield (`/salvation-army-shield.svg`) replaces the red `SA` badge in the **sidebar** (white circular background). It is not shown next to the Rent Payments Control page title.

## Dashboard content

- Current statement-week hero: collection rate, cash, due, paid, part-paid and unpaid resident counts.
- Residents: all records, currently housed, former/no-room records, occupied rooms and complete weekly due.
- Collections and arrears: expected, cash collected, payment count, collection gap and outstanding balance.
- Agreements and balances: active agreements, agreement balance, overdue installments and new rent arrears.
- Data quality: missing SAGE IDs, room conflicts, duplicate names and missing charge bands.
- System navigation cards: Residents, Account Receivables, Payments MAP WEEK, ROI Finance, Arrears and Reports.

## Data contract

- Totals use the complete API result and are not affected by UI pagination or search filters.
- Current-week collection figures use the same Payment Map report service as `/mapa`.
- Financial values are displayed in full EUR format; counts are displayed as complete integers.
- Every metric card links to its relevant operational page or report.
- The Dashboard contains no Cash (SA) transaction table.

## Visual language

- Hero band: donut gauge for the cash collection rate (green track `#dcefe5`, arc `#0f6b4f`, end dot), a vertical rule, then icon-chip statistics for total collected and total due.
- Hero right block: 2x2 tile grid separated by hairlines, each tile with an icon chip — Residents (blue), Paid (green filled check), Part paid (amber clock), Unpaid (red alert).
- Metric cards: horizontal layout with a rounded `9px` tinted icon chip on the left and label, value and note stacked on the right. No corner arrow.
- Section headers: bold 13px title on the left, muted 10px context note right-aligned.
- Colour is semantic: green for healthy/collected, amber for review, red for arrears and exceptions, blue for neutral volume.

## Money privacy (007.2026)

- Header and Dashboard toolbars include **Show € / Hide €**.
- Amounts use `privacyMoneyLabel` / `euro()` with app-wide subscription — see `SPEC-MONEY-PRIVACY.md`.
- Default: amounts hidden until the operator reveals them.