## Ledger Dashboard (S—481)

A complete SaaS dashboard: collapsible sidebar, KPIs with sparklines, a revenue chart that morphs between ranges, and a sortable transactions table.

- URL: https://sundaeui.dev/components/ledger-dashboard
- Category: Templates & layouts · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/ledger-dashboard.json`
- Tags: dashboard, sidebar, admin, saas, chart, table, react, analytics, template

A finished app shell rather than a mock. The sidebar collapses to icons with a spring-loaded marker that slides between items, and becomes a drawer with a scrim on phones. The top bar has a ⌘K search field and a notification bell; the content opens with a greeting and a 7D / 30D / 90D range switch.
Four KPI cards draw their sparklines in, coloured by whether the movement is good news. The revenue chart tweens between ranges point by point instead of redrawing, and tracking the pointer shows a crosshair, a marker and that day’s figure in the header. Top customers fill their bars in order, the activity feed eases in, and the transactions table sorts by customer, date or amount with real aria-sort.
Everything is driven by props with sensible sample data, uses the page font and the .dark class, and is one CSS file with no chart library. Under prefers-reduced-motion it renders in its final state.

### Usage

```tsx
import { LedgerDashboard } from '@/components/sundae/ledger-dashboard'

<LedgerDashboard
  workspace="Northwind"
  user={{ name: 'Ada Lindqvist', initials: 'AL' }}
  greeting="Good morning, Ada"
  revenue={dailyRevenue}          // number[], oldest first, 90+ points
  transactions={recentInvoices}   // { id, customer, amount, status, date }[]
/>
```

### Props

- `workspace` (`string`, default `'Northwind'`): Name in the sidebar header.
- `user` (`{ name: string; initials: string }`): Signed-in user in the sidebar footer.
- `greeting` (`string`): Page heading.
- `kpis` (`{ label; value; delta; up; series }[]`): Four cards read best. up=false marks a bad-news delta.
- `revenue` (`number[]`): Daily revenue, oldest first, at least 90 points.
- `customers` (`{ name: string; amount: number }[]`): Top customers, largest first.
- `activity` (`{ who: string; what: string; when: string }[]`): Activity feed rows.
- `transactions` (`LedgerTransaction[]`): Rows for the sortable table.
- `currency` (`string`, default `'USD'`): ISO currency for all money values.

### Accessibility

- Landmarks: aside (navigation), header, main; the current page is marked with aria-current.
- The range switch is a radiogroup; sortable headers expose aria-sort.
- The chart is an image with a text label summarising the total; the figure in the header updates as you hover.
- On phones the sidebar is a drawer with a dismissible scrim.