obsidian-vault/Infra-Network/SPEC-SYSTEM-DASHBOARD.md

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.