Haze Dashboard — Next.js Edition

Description

Haze Dashboard — Next.js Edition is a premium admin dashboard template built with Next.js 16 (App Router + Turbopack), React 19, shadcn/ui on Radix primitives, Tailwind CSS v4, and recharts. 96 pages across 5 dashboards, full CRUD on 6 resources, 8 interactive apps, 11 auth flows, a 14-page in-app docs site, and a mock REST API with pagination / search / filter — production-build green and ESLint-clean from the first commit.

Why the Next.js Edition?

• Next.js 16 App Router + Turbopack — file-system routing, route groups, server components by default, React 19 actions, dynamic params as Promises, fast dev rebuilds
• Tailwind CSS v4 with OKLCh tokens — perceptually-uniform colors that work in light and dark with no token duplication
• shadcn/ui (radix-nova preset) — 27 vendored Radix-based primitives, fully customizable, copy-paste ownership
• Public Sans + JetBrains Mono via next/font — matches the Minimals-inspired Haze typography
• Server components for docs + landing — smaller bundle, faster TTFB; client components only where interactivity demands it

5 Dashboard Variants

• Overview — Welcome banner, revenue sparkline, interactive order/customer breakdowns with status filters, conversion funnel, top products, activity timeline
• Analytics — Traffic chart with 7d/30d/90d period switcher, bounce-rate gauge, duration ring, channel breakdown, device donut, top pages, geographic traffic with flags
• eCommerce — Revenue hero with sparkline, 4-stage order pipeline with connector chevrons, sales-by-category bars, top products with ratings, recent orders table
• CRM — 5-stage funnel with gradient stages, win-rate semi-circle gauge, top deals with progress, sales team leaderboard, lead sources with conversion overlay
• SaaS — Gradient MRR hero with embedded sparkline, ARR + active-subs + churn sparkline + LTV cards, subscription tier cards, new/churned user growth area chart, churn reasons, recent trials

Full Commerce CRUD (24 Pages)

• Orders — Paginated list with search + status filter, detail view, create + edit forms with react-hook-form + Zod, delete confirmation
• Products — Same CRUD trio, with category and stock fields, image URL support
• Customers — List with avatar initials, profile with contact info, full edit form
• Invoices — List, detail with line items, create + edit with useFieldArray for line items, printable invoice page
• Users — Team list with avatar + role badge, profile, full edit
• Roles — Card grid with permission matrix (resource × action)
• Role-based UI gating — usePermission() selector hides action buttons for viewer-role users

11 Authentication Pages (3 Layouts)

• 3 visual styles — Classic centered card, dark cover with glass overlay + decorative orbs, split-screen branding + form
• Login + Register on each layout — 6 pages total
• Forgot password, Reset password, Verify email, Two-factor (6-digit + backup code), Confirm password
• react-hook-form + Zod on every form via shared <FormField> wrapper
• 3 demo personas — admin / editor / viewer @haze.dev — log in as each to see permission-gated UI
• 3 error pages — 404, 403, 500 + maintenance + coming soon (with live countdown)

8 Interactive App Modules

• Chat — 3-pane layout: contacts with search + unread badges, message thread with auto-scroll, compose footer
• Mail — Folder rail + mail list + reader pane with reply/forward/trash, compose dialog, star toggle
• Kanban — 4 columns with @dnd-kit sortable cards, cross-column drag, priority badges, per-column add
• Calendar — Vanilla-Date month view (Monday start, 42-cell grid), events bucketed in a useMemo Map, click-cell to create, click-event to view
• Files — Left rail with Storage + folder list, breadcrumb + search + sort + grid/list toggle, type-tinted thumbnails
• Charts — 6-chart showcase using recharts: Line, Area, Bar, Stacked Bar, Donut, Multi-Line
• Editor — Tiptap v3 React with full toolbar (B/I/U/S, H1-3, lists, quote, code, link, image, align L/C/R/J, undo/redo), live HTML output, word/char count
• Map — react-leaflet via next/dynamic { ssr: false }, sample markers with popups, sidebar location list with flyTo

Account & Settings

• Profile multi-tab — Overview with About + Recent Posts + Skills + Social Links, Activity timeline, Connections with Follow/Following, Gallery with category filter (masonry grid)
• Settings multi-tab — Profile (avatar + form + danger zone), Password, Appearance (color mode + 6 accent presets + density + RTL + language), Two-factor (Switch-gated 3-step flow with QR + backup codes)

Utility & Content Pages

• Pricing — Monthly/Annual Switch, 3 tiers with “Most Popular” highlight, feature comparison table
• Billing — Current plan + usage bar, payment methods, recent invoices, danger-zone Cancel
• Notifications — Full list grouped by Today/Yesterday/Earlier, All/Unread filter, mark-all-read
• Support — FAQ accordion + contact form via react-hook-form + Zod
• Forms showcase — 8 sections covering every shadcn input + a final RHF + Zod validated form
• Wizard — 4-step form with per-step trigger() validation
• Components gallery — 12 sections covering Buttons, Badges, Avatars, Alerts, Tooltips, Progress, Tabs, Accordion, Modal/Drawer, Skeleton, Breadcrumbs, Pagination
• Shop — Product grid, detail with related, cart with quantity controls, multi-section checkout
• Landing site — Hero with browser-frame mockup, features, tech stack, 5 dashboard preview cards + about / blog / contact / FAQ / pricing sub-pages

Live Theme Customizer

• 4 sections — Color mode (light/dark/system), 6 accent presets, Density (compact/default/spacious), Direction (LTR/RTL)
• Live preview across the whole app — every change writes to CSS variables on <html> at runtime
• 3 locales via next-intl — English, German, French. Cookie-based (no URL prefix)
• Persisted to localStorage — buyer preferences survive reload
• Floating ⚙️ trigger bottom-right opens a Sheet drawer

Mock API Layer (33 Routes)

• Next.js Route Handlers in src/app/api/ reading from src/server/data/*.json
• Generic CRUD factories — each resource’s route.ts is 2–4 lines
• Pagination helper supports ?page=, ?per_page=, ?search=, ?status=, ?sort=, ?order=
• Zod validators per resource — every POST/PUT validated, errors returned with field paths
• Swap for a real backend by replacing the JSON imports — the pagination + Zod scaffolding is reusable

Documentation

• 14-page in-app docs site at /docs — Introduction, Getting Started, Folder Structure, Theming, Layouts, Adding Pages, Components, Charts, i18n, Mock API, Authentication, Testing, Deployment, Changelog
• Server components — fast TTFB, SEO-indexable as Next routes

Tech Stack

License: Commercial | View Live Demo

Pricing

• Personal License — $69.00 — Purchase
• Developer License — $149.00 — Purchase
• Lifetime Developer License — $349.00 — Purchase