# AssetsLiabilitiesSideCard

## 2026-06-05 — Refactor to 2×2 grid layout matching frontend

**Prompted by:** frontend parity review

### What changed
- Replaced vertical list layout (Net Position hero → Total Assets with sub-rows → Total Liabilities) with a 2×2 grid of metric cells
- Four cells: Total Liabilities, Total Cash Assets, Net Position, Total Property Value — matching the order in the live frontend
- Each cell now uses `bg-muted p-4` as background (replacing inline card border)
- Negative values (Total Liabilities) colored with `text-brand-secondary`; positive values with `text-primary`
- Removed `MetricRow` and `SubRow` helper components (no longer needed)
- Removed derived `totalAssets` field (Total Assets row was removed from design)

### Why
- Frontend app uses a compact 2×2 grid; Storybook was showing a different list-based layout, causing design drift

### Affected tokens / files
- `packages/shadcn/src/components/ui/assets-liabilities-side-card.tsx`