Changelog

User Management

• Users list page with DataTable, role/status filters, and CRUD operations
• User detail page with profile card, permissions grid, and account details
• Create and edit forms with React Hook Form + Zod validation
• 25 mock users with roles, permissions, and departments

Storybook

• Storybook 8.x with 15 component stories across core, form, and dashboard tiers
• Dark mode decorator and responsive viewport presets
• Auto-docs enabled for all stories

Internationalization (i18n)

• Custom i18n with React Context and type-safe translation keys
• 3 languages: English, German, French
• ~80 translation keys covering sidebar, header, and dashboard
• Locale switcher in Theme Customizer and Settings

Performance

• Bundle analyzer integration with npm run analyze
• Dynamic imports for chart components on dashboard home
• LazyChart wrapper using IntersectionObserver for viewport-triggered rendering

Dashboard Variations

• eCommerce dashboard with sales charts, order status donut, top products
• CRM dashboard with pipeline funnel, deal stages, lead sources
• SaaS dashboard with MRR/ARR tracking, subscription plans, churn metrics

App Pages

• Chat application with real-time messaging UI and conversation list
• Email/Inbox client with folders, compose dialog, and search
• File Manager with grid/list views, upload, and storage stats
• Kanban board with drag-and-drop task management
• Calendar with monthly view and event management
• Multi-step wizard form with validation
• User profile page with overview, activity, and connections tabs
• Pricing page with plan comparison

Advanced Components

• TanStack Table upgrade with column filtering, sorting, pagination, CSV export, mobile responsive cards
• Date Picker, Date Range Picker
• Combobox/Autocomplete, Multi-Select, Phone Input
• File Uploader (react-dropzone), OTP Input, Color Picker
• Accordion, Alert, Carousel, Collapsible, Scroll Area, Slider, Toggle Group, Resizable

Charts Showcase

• New /charts page with Radar, Radial Bar, Treemap, Scatter, and Composed charts
• 10 chart types total (Area, Bar, Line, Pie, Sparkline, Radar, RadialBar, Treemap, Scatter, Composed)

Theme Customizer

• Live customizer drawer with color presets, density options
• 6 color presets: Default, Ocean, Sunset, Forest, Berry, Slate
• 3 density levels: Compact, Default, Comfortable
• Reset to defaults

Layout Options

• Horizontal top-nav layout alternative
• Boxed container option (max-width centered)
• All layouts persist to localStorage

RTL Support

• Full right-to-left text direction support
• CSS logical properties across all components
• Toggle in Theme Customizer

Auth & Utility Pages

• Reset Password, Two-Factor Authentication, Email Verification, Lock Screen
• 500 Server Error, 403 Forbidden error pages
• Coming Soon and Maintenance pages

Testing Infrastructure

• Vitest unit testing with jsdom environment
• Playwright E2E tests with Chromium
• Representative test suites for utilities, data, and components

Dashboard

• Overview page with stats cards, revenue chart, traffic pie chart, and goals progress
• Analytics page with detailed chart breakdowns
• Collapsible sidebar with icon-only mode
• Responsive header with search, notifications, and user menu

Pages

• Orders page with data table, sorting, filtering, and CRUD operations
• Products catalog with grid and list views
• Customers management with detail panels
• Billing page with plan selection and payment history
• Invoices list with status badges
• Notifications center with read/unread states
• Settings page with profile, appearance, and notification preferences
• Help and support page

Authentication

• Sign-in page with email/password form and social login buttons
• Sign-up page with form validation using React Hook Form and Zod

UI Components

• 25+ vendored shadcn/ui components (Button, Card, Dialog, Table, Tabs, etc.)
• Command palette (Cmd+K) for quick navigation
• Toast notifications via Sonner
• Confirm dialog for destructive actions

Theming

• Dark, light, and system theme modes
• OKLCh color tokens for perceptually uniform colors
• Semantic color system (primary, success, warning, destructive)
• 5-color chart palette
• Custom dark sidebar in both light and dark modes

Tech Stack

• Next.js 16 with App Router
• React 19
• TypeScript 5 with strict mode
• Tailwind CSS v4
• Recharts for data visualization
• Lucide React icons
• React Hook Form + Zod for form validation
• Radix UI primitives

Documentation

• Built-in documentation site at /docs
• Installation guide, folder structure, theming, components, and deployment docs