32 lines
1.5 KiB
Markdown
32 lines
1.5 KiB
Markdown
# 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.
|