Product sample · Vue 3

Vantage

A billing admin console in Vue 3 with the composition API: accounts can be filtered, selected in bulk and changed, plan usage has sparklines, and the audit log keeps a before/after diff for every mutation.

Vue 3framework
Vitebuild
3 modulesstores
admin-coretests
live demo
Vantage
The problem

Bulk changes with an audit trail.

Admin tools fail in boring ways: a bulk action updates twenty accounts and nobody can say which ones, an export ignores the filters, or undo silently drops half the changes.

Vantage is built around those failures: every mutation goes through one store action, every action appends an audit entry with a diff, and export reads the filtered selection.

What we built

Stores first, components second.

  • Accounts table with search, plan and status filters, sorting and row selection.
  • Bulk plan change and suspend actions, with a single undo that reverts the batch.
  • Plan and usage cards with sparklines computed from the same series the table uses.
  • Audit view with field level diffs, actor, time and a link back to the account.
  • CSV export of the current filtered selection, not the whole table.
Architecture

How it is put together

src/
 ├─ stores/accounts.ts, audit.ts, ui.ts (pure actions)
 ├─ views/ Overview, Plans, Accounts, Audit
 ├─ components/ Sparkline, StatusBadge, DiffView
 └─ lib/admin-core.ts (filter, sort, diff, CSV)
test/admin-core.test.ts
scripts/postbuild.mjs copies the Vite build into demo/

Stack

Vue 3ViteTypeScript

Security and money

  • Store actions are pure functions over typed data, so the logic is tested without mounting components.
  • Undo is an explicit snapshot of the affected rows, not a re-application of the inverse action.
  • The audit log is append only; a revert is a new entry, which keeps history honest.
  • The exported CSV is generated from the filtered rows so the two cannot disagree.
Screens

Product surfaces

Vantage, the working demo
Vantage, the working demo
Similar work

Building something in this category?

We can walk you through the architecture, the payment integration and the failure cases on a call, including the parts that were hard.