David/N8N-DASHBOARD
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
6 commits 1 branch 0 tags 26 MiB
TypeScript 68.5%
HTML 22.9%
JavaScript 3.8%
CSS 2.9%
Dockerfile 1.9%
Find a file
David bac00f617d Modernize dashboard: glassmorphism, gradient stat cards, refined palette 
Visual upgrade — keeps same data flow + layout structure, just elevates the look:

Header:
- Glassmorphism: sticky + bg-background/70 + backdrop-blur-xl
- Brand mark: zap icon in accent-tinted gradient box with glow
- Title: 'Command Center' (was 'n8n Workflow Monitor')
- Animated live dot with glow-success on the indicator

Stat cards:
- Gradient: from-card to-transparent
- Icon chip in top-right (per-stat: Power, Activity, CheckCircle, AlertCircle, Gauge)
- Bigger numbers (3xl), tracking-tight
- Color glow classes (glow-success, glow-error, glow-warning) when relevant
- Sub-text under the number for context
- Border-strong on hover

Anomalies:
- Severity-tinted icon chips (error/pending/warning soft backgrounds)
- New 'All clear' state with success glow when zero anomalies
- Each row has hover bg-muted/40
- n8n link in a pill button (border + bg-muted/50)

Workflows + Activity:
- Reusable Panel wrapper with icon + title + meta badge
- Empty states with icon + message + hint
- Status pills: rings + uppercase tracking-wider (looks more 'operator console')
- Scrollable lists (max-h-96) with thin custom scrollbar
- Error rows: subtle red hover bg (error-soft/40)

Palette refinements:
- Background: deeper (#08080a)
- Border: rgba white 8% (more subtle)
- Status: success/emerald, error/rose, warning/amber, pending/yellow
- 'Soft' color tokens for translucent backgrounds

CSS:
- Subtle radial gradient bg (accent top-left, error bottom-right)
- Fixed background-attachment for nice scroll feel
- Custom thin scrollbar
- glow-* utility classes
- fadeIn keyframe

Bundle: 223 KB JS / 69 KB gzipped, 16 KB CSS
2026-08-24 16:13:39 +02:00
dashboard Modernize dashboard: glassmorphism, gradient stat cards, refined palette 2026-08-24 16:13:39 +02:00
.env.example Redesign dashboard as command center + capture error_message in poller 2026-08-23 19:11:29 +02:00
.gitignore Untrack Archive.zip (31 MB, accidentally included node_modules/dist) 2026-08-24 07:28:48 +02:00
docker-compose.yml Redesign dashboard as command center + capture error_message in poller 2026-08-23 19:11:29 +02:00
pocketbase_schema.json Initial commit: n8n workflow monitor dashboard 2026-08-23 15:47:51 +02:00
poller-v2.n8n.json Redesign dashboard to match new spec (stats → anomalies → 2-col) 2026-08-24 07:28:23 +02:00
poller.n8n.json Redesign dashboard as command center + capture error_message in poller 2026-08-23 19:11:29 +02:00
README.md Initial commit: n8n workflow monitor dashboard 2026-08-23 15:47:51 +02:00

README.md

n8n Workflow Monitor

Read-only dashboard: n8n → PocketBase → shadcn-style React dashboard.

What's in here

  • n8n Monitoring Dashboard - Poller — already created in your n8n instance (draft, not yet activated). Polls /api/v1/workflows and /api/v1/executions every 5 minutes and upserts into PocketBase.
  • pocketbase_schema.json — importable PocketBase collections (workflows, executions).
  • dashboard/ — the React + Tailwind + shadcn-style dashboard, reads from PocketBase with realtime updates.

Setup

1. PocketBase

  1. In your PocketBase Admin UI, go to Settings → Import collections and upload pocketbase_schema.json. This creates workflows and executions with public read access and admin-only write access.
  2. Create an API token / auth for a superuser (or an app-level API key) the poller workflow can use to write — the poller authenticates with a plain Bearer token in the PocketBase Admin credential (see below).

2. n8n poller workflow

The workflow is already created: n8n Monitoring Dashboard - Poller (in your personal project). Before activating it:

  1. Create credential "n8n API Key" (type: HTTP Header Auth) — header X-N8N-API-KEY, value: an n8n API key from Settings → API.
  2. Create credential "PocketBase Admin" (type: HTTP Header Auth) — header Authorization, value: Bearer <your PocketBase superuser token>.
  3. Every HTTP node in the workflow uses https://pocketbase.apphub.co.za as a guessed placeholder base URL — find/replace with your real PocketBase URL if different.
  4. Activate the workflow.

3. Dashboard

cd dashboard
npm install

Edit src/lib/pocketbase.ts and set POCKETBASE_URL to your real PocketBase instance.

npm run dev

Open the printed local URL. For production, npm run build and serve the dist/ folder (e.g. behind the same reverse proxy/Cloudflare Tunnel setup you use for your other self-hosted tools).

Notes

  • The dashboard is read-only — it only ever calls PocketBase's list/realtime endpoints, never n8n directly, and never writes.
  • All writes to PocketBase happen from the poller workflow only, authenticated as admin — the dashboard's PocketBase access can stay on the public read rules set in the schema.
  • Realtime: the dashboard subscribes to PocketBase's realtime feed, so it updates within moments of the poller's next 5-minute sync — no page refresh needed.