| .. | ||
| App.jsx | ||
| Atoms.jsx | ||
| Chrome.jsx | ||
| CommandFilter.jsx | ||
| dashboard.css | ||
| data.js | ||
| ImportScreen.jsx | ||
| index.html | ||
| Inspector.jsx | ||
| LedgerScreen.jsx | ||
| README.md | ||
| ReviewQueue.jsx | ||
| RulesScreen.jsx | ||
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
- Review queue (default) — list of staged transactions on the left, inspector on the right.
- Rules — promote-suggested-rule cards.
- Ledger — account tree.
- 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.