SaaS Dashboard

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

# SaaS Dashboard Template (Vanilla)

A complete, commercial-grade **SaaS admin dashboard** template built with plain
HTML, CSS, and vanilla JavaScript. 30 interconnected pages share one coherent
mock dataset, a JS-injected app shell, and a single Northstar design system.
No React, no Tailwind, no bundler, no build step, no backend.

**Technology:** vanilla
**Category:** templates
**Subcategory:** saas-dashboard
**Type:** multipage (30 pages)

## Preview

Open `preview.html` in a browser (a template gallery linking to every page), or
serve the folder for local development:

```bash
cd "Vanilla/Templates/saas-dashboard"
python3 -m http.server 8080
# visit http://localhost:8080/preview.html  (gallery)
# or      http://localhost:8080/pages/dashboard.html  (start page)
```

## What's inside

```
SaaS Dashboard/
├── preview.html            # Template gallery — links to every page + design-system summary
├── pages/                  # 30 interconnected pages (see below)
├── css/app.css             # Shared Northstar design system (tokens, shell, components, responsive)
├── js/app.js               # Shared dataset (DB) + app-shell renderer + components + chart utils
├── metadata.json          # DevSnips registration metadata
├── README.md              # This file
└── assets/{logo,favicon}.svg
```

### Architecture

A single `DB` object in `js/app.js` holds all mock data — customers, team,
invoices, transactions, activity, conversations, notifications, API keys,
webhooks, integrations, segments, invitations, sessions, status components,
and incidents. Every page reads from it, so a customer on the Customers page
is the same customer in transactions, activity, and the inbox. **Swap `DB` for
a real API and the render code works unchanged.**

`app.js` also injects the app shell (sidebar + topbar) around each page's
`<main data-page="…">` from a single `NAV` config, so navigation is always
consistent and there are no dead links. Shared components (modal, drawer,
confirm, toast, tabs, breadcrumbs, pagination, pills, avatars, skeleton/empty/
error states) and chart utilities (line, bar, donut, sparkline) are exposed on
`window.NS` / `window.NSCharts`.

### Pages (30)

| Section | Pages |
|---|---|
| **Overview** | dashboard, analytics, reports, activity |
| **Customers** | customers, customer-details, customer-activity, customer-segments, invitations |
| **Revenue** | billing, plans, payment-methods, invoices, transactions |
| **Communication** | inbox, notifications, preferences |
| **Workspace** | team, roles, integrations, workspace-settings |
| **Settings** | settings, profile, security, sessions, api-keys, webhooks |
| **Support** | help-center, support, system-status |

### Design system

One indigo accent (`#4f46e5`) on a cool-stone neutral ramp, semantic status
colors (success/warning/danger/info), hairline borders, restrained shadows, and
tight rhythm — via `--ds-*` CSS variables with light + dark + system-preference
variants. Reused identically across every page so the product feels cohesive.

### Features

- **Coherent mock data** shared across all pages
- **Interactive SVG charts**: line (with comparison + tooltip), bar, donut, sparklines
- **Sortable, paginated, filterable tables** with bulk selection + bulk actions
- **3-panel support inbox** (conversation list / thread / customer sidebar)
- **Modals, drawers, confirmation dialogs, toasts**
- **Permissions matrix, API keys, webhooks, integrations marketplace**
- **System status** with uptime bars + incident history
- **Loading/empty/error** application states
- **Light/dark mode** with no-flash system preference detection
- **Responsive**: sidebar → off-canvas drawer, tables → cards, multi-panel → stacked
- **Accessible**: skip link, ARIA, focus-visible rings, keyboard-operable, reduced-motion safe

### QA

Verified with Playwright across all 30 pages at 9 viewport widths
(320–1920px): **0 console errors, 0 horizontal overflow**. 11 interaction
tests pass (chart toggle, table sort/pagination, bulk selection, tab switching,
inbox reply, modal opening, mobile drawer, notifications dropdown, theme toggle).

Zero dependencies — the only external request is Google Fonts.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# AGENTS.md — SaaS Dashboard

Guidance for an AI agent adapting this template. Read this before editing.

## What this template is

A multi-page SaaS operator dashboard (31 page files under `pages/`) with a shared mock data layer (`js/`), shared styles (`css/`), and a gallery preview shell (`preview.html`). The realistic product feel comes from the interconnected pages and the shared mock DB—the highest-value template in the Vanilla set.

## Design system

Built on the shared [`design-tokens.md`](../design-tokens.md) `--ds-*` token system (971 token references, 35 unique tokens). **Light-default.** When adapting:

- Keep the `--ds-*` token layer as the source of truth; do not hardcode hex values.
- Prefer 1px borders over shadows; small controlled radii; restrained surfaces.
- Single controlled accent. No glassmorphism, neon, gradients, or oversized decoration (see `design-tokens.md` §6).
- Dark mode is the same system inverted (calm)—never black + neon.

## File layout

```
SaaS Dashboard/
├── pages/        # 31 interconnected HTML pages (each links ../css + ../js)
├── css/          # shared dashboard styles (--ds-* tokens)
├── js/           # shared mock DB + interactions
├── assets/       # icons / images
├── preview.html  # gallery shell (overview + page index)
├── metadata.json
└── README.md
```

Pages reference shared `../css` and `../js` via relative paths. The mock data lives in `js/` so every page renders consistently.

## How to adapt it

1. **Rebrand**: edit the `--ds-*` token values (accent, neutrals) in `css/`—every page updates together.
2. **Add a page**: copy an existing `pages/*.html`, keep the `<link>`/`<script>` relative refs, add a sidebar entry, and register it in `preview.html`'s page index.
3. **Swap the mock data**: replace the dataset in `js/` (keys + realistic content per `design-tokens.md` §48).
4. **Add a chart/table**: use the existing token-driven table styles; prefer light row dividers over boxed cells (`design-tokens.md` §34).

## Do not

- Do not split pages into separate CSS/JS per page&mdash;the shared `css/` + `js/` are what keep the 31 pages coherent.
- Do not introduce a framework (React/Vue/Tailwind/Bootstrap). Vanilla HTML + CSS + JS only.
- Do not remove the `--ds-*` token layer or hardcode visual values.

## Quality bar (enforced by `scripts/qa/resources/qa_vanilla.py`)

Every page must pass: reduced-motion guard on animations, `:focus-visible` ring, ARIA on interactive widgets, keyboard-operable controls. Run `python3 scripts/qa/resources/qa_vanilla.py` after changes.