Getting Started

Folder Structure

How the Haze Dashboard project is organized and where to find things.

Project Tree

The project follows the Next.js App Router conventions with everything inside the src/ directory. Mock API route handlers live in src/app/api/, and locale files are in src/messages/.

haze-dashboard-next/
├── src/
│   ├── app/                       # Next.js App Router
│   │   ├── (dashboard)/           # Dashboard route group + layout
│   │   ├── (auth)/                # Auth pages
│   │   ├── (marketing)/           # Marketing/landing
│   │   ├── docs/                  # Documentation (you are here)
│   │   ├── api/                   # Route handlers (mock API)
│   │   ├── layout.tsx             # Root layout
│   │   └── globals.css            # Design tokens, card styles
│   ├── components/
│   │   ├── dashboard/             # Sidebar, header, stats cards
│   │   ├── shared/                # GlassCard, PageHeader, DataTable
│   │   ├── docs/                  # Docs navigation
│   │   └── ui/                    # Base UI primitives (Radix-based)
│   ├── hooks/
│   │   └── use-theme-settings.ts  # Accent color, density, RTL
│   ├── stores/                    # Zustand stores
│   │   ├── auth.ts                # Mock authentication
│   │   └── notifications.ts       # Notification list
│   ├── lib/
│   │   ├── navigation.ts          # Sidebar navigation
│   │   ├── docs-navigation.ts     # Docs sidebar
│   │   ├── permissions.ts         # Roles, permissions
│   │   └── utils.ts               # Helpers (cn, formatters)
│   ├── server/data/               # 17 JSON mock datasets
│   └── messages/                  # i18n locale files (en, de, fr)
├── public/                        # Static assets
├── next.config.ts                 # Next.js configuration
├── tailwind.config.ts             # Tailwind v4 configuration
└── tsconfig.json                  # TypeScript configuration

src/app/ — App Router Pages

Every page.tsx in this directory becomes a route. Folders map to URL segments: app/dashboard/analytics/page.tsx becomes /dashboard/analytics. Dynamic segments use [id] folders.

src/components/

Directory	Contents
dashboard/	Sidebar, Header, StatsCard, ChartCard, ActivityFeed
shared/	GlassCard, PageHeader, DataTable, StatusBadge, EmptyState
docs/	Docs navigation sidebar
ui/	Base UI primitives (Button, Input, Dialog, etc.)

Layouts in the App Router

Next.js layouts are layout.tsx files. They wrap pages in their folder and any nested folders. Haze uses route groups like (dashboard), (auth), and (marketing) to apply different chrome without affecting URLs.

Layout	Description
(dashboard)/layout.tsx	Sidebar + header for all dashboard, management, and settings pages
(auth)/layout.tsx	Centered card / split / cover auth layouts
(marketing)/layout.tsx	Public navbar + footer for landing, about, contact, FAQ, blog
docs/layout.tsx	Docs sidebar + content area (you are here)

src/stores/ — Zustand Stores

State management uses Zustand. Stores are imported where needed via hooks.

Store	Purpose
auth.ts	Mock authentication with 3 demo users, role-based permissions
notifications.ts	Notification list with unread count and mark-as-read

src/lib/ and src/hooks/

File	Purpose
hooks/use-theme-settings.ts	Accent color, density, RTL persisted to localStorage
lib/navigation.ts	Sidebar navigation structure (groups, items, icons, routes)
lib/permissions.ts	Role-permission mapping and demo user definitions
lib/utils.ts	`cn()`, formatters, helpers

src/app/api/ — Mock API Routes

Mock API route handlers live alongside the pages. Each resource has a folder with route.ts for the collection and [id]/route.ts for individual records. The handlers read from src/server/data/*.json and support pagination, search, filter, and sort via shared helpers.

src/messages/ — Locale Files

Three locale files ship by default: en.json, de.json, and fr.json. Each contains approximately 100 translation keys organized by feature area.

Key Configuration Files

File	Purpose
next.config.ts	Next.js config (image domains, transpilePackages, headers)
tailwind.config.ts	Tailwind v4 theme tokens and content paths
tsconfig.json	TypeScript configuration with `@/*` path alias
package.json	Dependencies and scripts (dev, build, start, lint)

Tip

Use the @/ path alias for absolute imports from src/. Avoid deeply relative paths like ../../../.

Next Steps

Learn how to create new pages and add them to the sidebar in the Adding Pages guide.