Description

Apex Dashboard — Premium Angular 21 Admin Template

A premium admin dashboard built with Angular 21, signals + zoneless change detection, Tailwind CSS v4, Spartan UI primitives, and ApexCharts. Production-ready out of the box with 60+ pages across 9 dashboards, full e-commerce CRUD, 14 auth screens, theme customizer, and built-in SSR + PWA support — type-checked end-to-end, lazy-loaded by route, and ESLint-clean from the first commit.

Why the Angular Edition?

• Angular 21 zoneless rendering — every UI state driven by signals, not zone.js. Faster boots, predictable updates, smaller bundles
• Tailwind CSS v4 with OKLCh tokens — perceptually-uniform colors that work in light and dark with no token duplication
• Spartan UI primitives — 40 vendored shadcn-style headless components on Angular CDK, fully customizable
• Lazy-loaded routes — initial bundle under 200 kB gzipped; every page lands in its own chunk
• ESLint + Prettier + Husky + GitHub Actions CI pre-configured — zero-lint-error baseline, formatted on every commit, CI green from day one

9 Dashboard Variants

• Overview — Revenue chart, traffic donut, recent orders with sparkline trends, activity feed
• Analytics — Line/bar charts with period switcher, top pages, geographic table
• eCommerce — Sales overview, order status donut, top products with sparkline trends
• CRM — Pipeline value, deal stages, lead sources, top sales reps
• SaaS — MRR/ARR metrics, subscription plans donut, acquisition funnel, churn rate
• Charts gallery — Radar, radial bar, scatter, treemap, combo
• Logistics — Fleet tracking with live route schematic, shipments table, vehicle status
• Crypto — Portfolio balance, allocation pie, 7-day BTC candlestick, watchlist with sparklines
• Projects — Project cards with progress, 6-week gantt roadmap, status filters

Full Commerce CRUD with Detail Pages

• Orders — List, detail with timeline + line items + customer + payment + shipping, edit form, sparkline trends, status filters
• Products — List, detail with gallery + reviews + price card, add/edit form, image dropzone
• Customers — List, profile with lifetime stats + order history + notes, add/edit form, tags
• Invoices — List, printable preview with print stylesheet, line-item editor with FormArray, status filters
• Row click navigation — every table row routes to its detail page; new-X buttons open dedicated edit forms

14 Authentication Pages (2 Layouts)

• 2 layouts — split-screen cover and centered card; pick per route via /auth/v1/* or /auth/v2/*
• 7 flows — Login, Register, Forgot password, Reset password, Verify email, 2FA (6-slot OTP), Lock screen
• Real form validation — Reactive Forms with field-level error messages
• Password-strength meter, 6-slot OTP with paste + back-focus support, OAuth (Google + GitHub) stub buttons
• 5 error pages — 404, 403, 500, maintenance, coming soon (with live countdown timer)

Interactive App Modules

• Mail — 3-pane folder rail, search across body/subject/from, real Compose + Reply + Forward modal with quoted body pre-fill
• Chat — Conversation rail with presence dots, threaded message view, live composer with sent→delivered→read state walk
• Files — Grid/list views, breadcrumb navigation, star toggles, 8 file-type icons, folder-first sort
• Calendar — Month + week view, hour grid with absolute-positioned events, clickable event detail modal, in-app new-event editor pre-filled from clicked time slot
• Kanban — 4-column board with priority pills, click-to-edit task modal (move across columns, delete, edit), per-column add
• Wizard — 4-step project setup with per-step validation and signal-driven step indicator
• Forms showcase — Reactive Forms primer + advanced page with TipTap rich text editor, file dropzone with drag-and-drop, tags input, date range with live duration, multi-select with chips

Team & Account Management

• Settings multi-tab — Account (profile + danger zone), Security (2FA toggle, passkeys), Notifications matrix (3 channels), Connections (GitHub/Slack/Google/Figma), API keys (reveal/copy/revoke), Sessions (4 devices)
• Profile multi-tab — Overview with skills + activity timeline, Edit profile, Security score with checklist, Activity feed grouped by day
• Roles & Permissions — Sidebar role list with 16-scope permission matrix, grant-all per group, built-in role lock, custom roles editable
• Contacts — Searchable address book with star, filter chips (Customer / Partner / Lead / VIP), 8 sample contacts
• Tasks — Todo with lists sidebar, priority filter, inline add form, signal-driven counts, move between lists
• Users — Team list with role + status filters, invite flow
• Notifications — Filter pills, mark-all-read, type-based grouping
• Billing — Plan card with feature list, usage bars with color-coded thresholds, downloadable invoice history

Content Modules

• Blog — Category filter, search, featured-post layout, full post page with related articles + reading-time metadata
• Academy — Courses grid with progress bars, level filter (Beginner/Intermediate/Advanced), “Continue learning” hero
• Knowledge Base — 6 section cards each with top articles, “Most popular” leaderboard, full-text search
• UI showcase — Components (buttons / badges / alerts / form controls / progress / skeletons / toasts / empty states), Icons (90 curated Lucide), Typography pages

Live Theme Customizer

• 7 sections — Theme (light/dark/system), Color preset, Density (compact/default/comfortable), Layout, Container (fluid/boxed), Direction (LTR/RTL), Language
• Live preview across the whole app — every change writes to CSS variables on <html>
• 3 locales — English, German, French with type-safe t('key.path') API
• Persisted to localStorage — buyer preferences survive reload

Production-Ready Infrastructure

• SSR wired — pnpm build:ssr + pnpm serve:ssr for Express-served server rendering on Node 22
• PWA enabled — ngsw-config.json with asset + data cache groups, localhost-aware to avoid stale chunks during dev
• MSW mock API layer — opt-in via env flag, sample REST handlers for offline-friendly demos
• GitHub Actions CI — format check + lint + tests + build + dist artifact upload, ready to fork
• Vitest test suite — 58 specs across services, runs in 3 seconds
• Husky + lint-staged — every commit auto-formats with Prettier and lints staged files with ESLint

Developer Experience

• 40 Spartan UI primitives vendored under src/app/ui/ — accessible, headless, fully customizable
• @ng-icons/lucide with 1,900+ icons available; 90 curated in the gallery
• ApexCharts via ng-apexcharts — lazy-loaded so unused pages don’t pay the chart engine cost
• Reactive Forms + Signal Forms ready — both APIs demonstrated across the wizard + advanced forms page
• TipTap 3 rich text editor with formatting toolbar + undo/redo + character/word count
• 12-page in-app docs site at /docs — getting started, folder structure, adding pages, theming, i18n, signals, components, charts, form wizard, deployment, changelog

Tech Stack