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