VaultFlow (Fullstack Template)

SvelteKit 5 · Supabase · Tailwind v4 · TypeScript Premium fintech + SaaS dashboard template with org-level RBAC, per-resource permission overrides, real-time transactions feed, and 4,000+ rows of realistic seed data.

VaultFlow is a fully-working SvelteKit 5 admin dashboard that ships as source — no closed component library. Fork once, retheme via one CSS file, sell client implementations. Two verticals in one template: flip between Fintech and SaaS mode via a config flag.

Product Demo

• See Demo Video of the product.

Documentation

• 📘 GUIDE.md — Full buyer customization guide: theme + fonts swap, adding nav items / permissions / roles, RBAC architecture, deployment, troubleshooting. Start here after the Quick start below.

What's in the box

• Auth — Supabase email/password + magic link, SSR cookies via @supabase/ssr. Editable profile, organization, and notification preferences settings pages
• RBAC — 6 system roles (super_admin, admin, finance_manager, ops_manager, analyst, viewer) + per-row resource permission overrides enforced at both Postgres RLS and route load. Real invite-member flow that creates auth users via the service client
• Live data — every chart and table reads from Supabase. 3 seeded orgs, 7 demo users, 820 customers, 2,800 transactions, 547 subscriptions, 190 fraud signals, 545 MRR snapshots, 32 notifications
• Realtime — dashboard transactions feed subscribes to Supabase Realtime
• Charts — hand-rolled SVG line, bar, donut, sparkline (no chart-library bloat)
• Analytics — MRR waterfall, cohort retention table (12-month × 12-month matrix), churn-by-reason, revenue-by-plan, status donut
• Reports — 4 pre-built reports with preview + schedule form + CSV export (monthly summary, fraud report, churn analysis, revenue by country); schedules persist to organizations.settings JSONB
• API keys — full personal-key CRUD with SHA-256-hashed secrets, scopes (read/write), prefix-only display after creation, and revoke
• Billing — plan tier comparison, paid/outstanding invoice counts, 12-month invoice history
• Topbar UX — notifications dropdown with unread badge + mark-all-read, and a Cmd+K command palette filtered to the user's RBAC-visible routes
• Theme — shadcn warm-orange palette (light + dark) with a compat shim so all the original brand-*/surface-* utility classes still resolve. Self-hosted fonts via @fontsource — no runtime Google Fonts request
• Accessibility — focus rings, ARIA grid table, keyboard navigation, screen-reader data tables on charts
• Mobile — full responsive layout down to 320px (sidebar → bottom drawer)
• Audit log — every grant/revoke/role-change/invite/key-creation/report-schedule is recorded
• Tests — Playwright auth fixtures for every role (23 chromium E2E), Vitest unit suite for formatters + permission resolver (19 unit)

Quick start

# Requirements: Node 20+, pnpm 9+, Docker
pnpm install

# 1. Boot Supabase locally (postgres + auth + storage + realtime in Docker)
pnpm supabase:start

# 2. Apply migrations (RLS, permission catalog, etc.)
pnpm db:reset

# 3. Seed demo data — 3 orgs, 7 users, 4k+ rows
pnpm seed:dev --reset

# 4. Run the app
pnpm dev
# → http://localhost:5173

Open the printed Supabase keys and paste into apps/dashboard/.env.local (or copy from .env.example).

Next: skim GUIDE.md to swap brand colors, fonts, add a permission, or deploy.

Docker (demo deploy)

The repo ships a multi-stage Dockerfile and docker-compose.yml that build the dashboard against Supabase Cloud.

# 1. Create a project at https://supabase.com → grab URL + anon key + service-role key
# 2. Apply migrations (from apps/dashboard):
#       supabase link --project-ref <your-ref> && supabase db push
# 3. Seed demo data against the cloud DB:
#       pnpm --filter dashboard seed:dev --reset
# 4. Create the runtime env file at repo root:
cp apps/dashboard/.env.example .env
#    fill in PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY
#    set ORIGIN to the public URL you'll expose (e.g. https://demo.example.com)

# 5. Build + run
docker compose up --build -d
# → http://localhost:3000

See GUIDE.md → Deployment for the full walkthrough (reverse proxy, TLS, env reference).

Demo credentials

Password for all: Demo@1234

Tech stack

Project structure

apps/dashboard/
├── src/
│   ├── app.css                      # Tailwind v4 + shadcn design tokens + compat shim
│   ├── hooks.server.ts              # Supabase auth middleware
│   ├── lib/
│   │   ├── components/
│   │   │   ├── ui/                  # Card, Button, Input, Badge, Label
│   │   │   ├── layout/              # Sidebar, Topbar, UserMenu, Notifications, CommandPalette
│   │   │   ├── data-table/          # Generic paginated DataTable
│   │   │   ├── charts/              # LineChart, BarChart, DonutChart, SparkLine
│   │   │   ├── SlideOver.svelte     # Drawer modal
│   │   │   ├── StatusBadge.svelte   # Toned status pill
│   │   │   └── PermissionGuard.svelte
│   │   ├── config/                  # app.config, nav.config (RBAC-aware nav)
│   │   ├── db/seed/                 # Seed scripts (orgs, users, domain data, notifications)
│   │   ├── server/                  # supabase.ts + permission resolver
│   │   ├── stores/                  # ui.store.svelte (sidebar, theme, cmd-k state)
│   │   ├── types/                   # database.types, rbac.types, domain.types
│   │   └── utils/                   # cn, formatters, export (CSV)
│   └── routes/
│       ├── (auth)/                  # login, signup, forgot-password
│       ├── (app)/                   # protected; full dashboard
│       │   ├── dashboard            # Overview with KPIs + realtime feed
│       │   ├── transactions         # Full ledger + slide-over
│       │   ├── payments             # Volume + success rate + method mix
│       │   ├── fraud                # Signals + resolve workflow
│       │   ├── customers            # List + detail
│       │   ├── subscriptions
│       │   ├── revenue              # MRR trend + waterfall + cohort retention + churn
│       │   ├── reports              # Library + /[slug] preview & schedule
│       │   ├── team                 # RBAC showcase + invite-member form
│       │   ├── audit-log
│       │   └── settings/            # profile, organization, notifications, api-keys, billing, appearance
│       └── api/
│           ├── export/[slug].csv    # CSV report exports
│           └── notifications/read   # POST mark-read endpoint
├── supabase/migrations/             # Schema + RLS + permission catalog + api_keys
├── static/favicon.svg               # Warm-orange gradient brand mark
├── tests/
│   ├── e2e/                         # Playwright per-role suites (23 chromium tests)
│   └── unit/                        # Vitest (19 tests)
├── playwright.config.ts
└── vite.config.ts

Configuration

Edit apps/dashboard/.env.local:

Support & commercial work

VaultFlow is free under MIT — but if you'd rather hire someone to customize, integrate, or build on top of it, nuvraxis.com offers commercial support, custom builds, and implementation services.

For non-commercial questions, open a GitHub issue or start a discussion.

For security vulnerabilities, please email [email protected] — don't open a public issue.

License

MIT © nuvraxis. Use it, fork it, ship it, sell it — just keep the copyright notice.

VaultFlow by nuvraxis · Built with SvelteKit 5 · Tailwind CSS v4 · Supabase