Application map / References / Dashboard design reference

Dashboard Design Reference

Figma sources, exact design tokens, and intentional design-vs-code deltas for the management-company (MC) dashboard and the executive dashboard.

MC dashboard

Figma file key y3YJuTRG8kIWEq9MZVR1xp ("Gallopify — Web App Designs as on 24feb"): open in Figma. Figma numbers are visual examples, not seeded data; runtime values come from the management-dashboard data endpoint.

Node ids

Tokens

• Sidebar: bg #f4f8f8, 220px wide. User card: white, border 1px #eaeaea, radius 8px; avatar circle #00635b with white initials; name Inter Medium 14px, email Regular 12px #696969. Quick Actions bar with 12px #9e9e9e placeholder and a 10px ⌘K badge. Section headers Inter Medium 10–11px uppercase #9e9e9e. Nav items radius 8px; active bg #f0f0f0, border 1px #e4e4e4, text/icon #00635b; inactive text #363636; count badge a teal pill #00635b, white 9px.
• KPI cards (3-col grid, 20px gap): white, border 1px #ededed, radius 12px, padding 20px, shadow 0 4.8px 13.6px −4px rgba(58,77,233,0.15); title Inter Medium 14px #363636 inside the card. Donut ~128px diameter, ~12px stroke; center Inter SemiBold 20px #2c2c2c, sub-label 10px #707070.
• Donut segments — Treasury: Actioned #00635b, Pending Review #01ae9f, Overdue #ef9c12. Compliance: Current #00635b, Due within 90 Days #01ae9f, Overdue #ef9c12. Portfolio: Healthy #00635b, Adequate #16b795, Needs Attention #ef9c12, Critical #ed3237.
• Sub-metric badges: dark neutral #2c2c2c with white 10px medium text, radius 4px; positive/warning variants teal/green #16b795 with ▲/▼ icons. Legend rows: 10×10px square, label 12px, count SemiBold 12px, percentage 10px #707070, divider 1px #f4f4f4.
• Tables: card border 1px #ededed radius 12px, table flush; header row bg #fcfeff, headers Inter Medium 12px uppercase #707070 with sort arrows, padding 12px 20px; data rows ~33px, divider 1px #f4f4f4, text 12px #2c2c2c. Action buttons: ghost, border 1px #ededed, radius 6px, 10px text, leading icons.
• Status badges are LIGHT — light background with colored text, never solid-with-white-text: "Reserve Study Overdue" #fde9d3/#c97c2e; "Overbudget > 25%" #fde8e8/red; radius 4px, Inter Medium 10px.

Pixel rules and intentional deltas

• The light badge convention deliberately supersedes the older solid-color badge spec; the shipped shared StatusBadge implements the light style.
• The Portfolio Score donut center shows a bare score ("72"), never a percent sign.
• The third table is also titled "Treasury Performance" (same name as the first) but shows overbudget data — by design.
• Known deviation: Figma specifies a ~12px donut ring stroke; the code uses the shared donut renderer.
• placeholder Uninvested-cash and lost-yield-per-month have no backend fields yet; the frontend renders literal -1 with TODO markers (still true as of July 2026 — the Board reporting quality project is the fix path).

Executive dashboard

Figma file "Gallopify — New Designs (as of 31st March 2026)", frame "Executive Dashboard", node 120:1814. Lives at /executive-dashboard inside the shared shell; presentation metrics derive in the frontend from the executive-dashboard data contract. Layout order: page title with one-line portfolio context; summary metric rail; Project Spend Intelligence and Top Vendors; Health Distribution and HOA Health; Yearly Spending and Top Projects.

Intentional deltas and placeholders

• Invested Amount renders the backend investment metric when present; Untapped Opportunity and the lost-yield subtext render an explicit unavailable/coming-soon state until backend idle-cash fields exist.
• The previous search, timeframe, score-override, performer, and development mock-fallback paths were deliberately removed with the hardcoded mock data — fetch errors render the shared error state, and there is no mock fallback.
• A CMC with no managed properties must render zeros and empty tables, never seeded sample values (Top Vendors has an explicit empty state; Health Distribution defaults to zero counts).