# Akefin Web Dashboard — UI Kit

A pixel-faithful recreation of the **Akefin web dashboard** following the design system in this project. Built from the brief's component inventory (the canonical akefin-design-system repo was empty at the time of generation — see root `README.md`).

## What's in here

| File | Purpose |
|---|---|
| `index.html` | Live, clickable prototype. Open this to see it. |
| `App.jsx` | Top-level composition · routes between Review · Rules · Ledger · Import |
| `Chrome.jsx` | Header (entity scope · search · status) + left rail navigation |
| `ReviewQueue.jsx` | Compact list of staged transactions, sortable, selectable |
| `Inspector.jsx` | Right-pane detail: account picker, ledger preview, approve/override/skip |
| `RulesScreen.jsx` | Promote-suggested-rules view |
| `LedgerScreen.jsx` | Per-entity account tree with balances |
| `ImportScreen.jsx` | Import run status & history |
| `Atoms.jsx` | Buttons, chips, badges, inputs, terminal frame |
| `data.js` | Sample bilingual transactions, rules, accounts |

## Screens

1. **Review queue** *(default)* — list of staged transactions on the left, inspector on the right.
2. **Rules** — promote-suggested-rule cards.
3. **Ledger** — account tree.
4. **Import** — recent import runs and status.

Switch screens via the left rail. The entity scope (top-left of the header) filters everything below.

## Caveats

- Recreated from the brief, not from existing UI source. **Iterate.**
- Korean payee strings are sample data, not a real Toss export.