- name
- Compact property cards redesign
- description
- Property management page cards redesigned with KPI dashboard — payment health, AI risk, lease pipeline, maintenance
- type
- project
Property cards at /property-management were redesigned from large image-heavy cards to compact data-dense cards (2026-04-06).
Why: Rafael wanted more actionable data at a glance — payment health, AI risk scores, lease pipeline, maintenance load. Inspired by AppFolio, Entrata, RealPage dashboard patterns.
How to apply:
- Card layout: 100px image-background header with navy overlay + health score badge, 4-column metrics row (occupancy, rent, collection %, late), AI risk section with proportional bar, lease pipeline + maintenance bottom row
- Health score computed client-side: weighted formula (occupancy 35%, collection 30%, risk 20%, maintenance 15%), grades A/B+/B/C/D
- Backend: 5 new LATERAL joins in server.js
/api/properties— collection_case, tenant_ledger_entry (30d), unit_risk_score, tenant_lease (30d expiry), urgent maintenance - All data from real DB — no mocks
- Files modified: server.js, property.service.ts (Property interface), properties.component.ts (template + 7 new helpers)
- Design spec: docs/superpowers/specs/2026-04-06-compact-property-cards-design.md