Documentation

– Built with Next.js 16 App Router
– React 19 + TypeScript
– Route-group layouts ((auth-pages) and (public-pages))
– Static HTML export ready (output: "export")
– Redux Toolkit state management
– Tailwind CSS v4 (CSS-first config) with Preline v4 UI behaviours
– Light, dark and system theme modes with no flash on load
– Collapsible sidebar with hover-expand and a mobile overlay
– Sidebar translations: English, French, German and Arabic
– Around 500 prebuilt pages across 25+ business modules
– ApexCharts & Chart.js
– FullCalendar and drag & drop kanban boards
– Phosphor, Lucide & Font Awesome icon fonts
– React Compiler enabled
– Fully Responsive Design
– Compatible Browsers: Firefox, Safari, Opera, Edge, Chrome
– Easy to Customize with css Variables

nextjs/
├── public/
│   └── assets/img/          # logo.svg, logo-dark.svg, logo-small.svg, favicon.png, apple-icon.png, avatar, card, product...
├── src/
│   ├── app/                 # App Router
│   │   ├── (auth-pages)/         # sign-in, register, error and other auth pages -> AuthLayout
│   │   ├── (public-pages)/       # all application pages -> ProtectedRoute + PublicLayout
│   │   ├── layout.tsx            # root layout
│   │   ├── not-found.tsx
│   │   └── page.tsx
│   ├── components/          # shared UI components
│   ├── config/metadata.ts   # getPageMetadata() helper
│   ├── core/                # auth, data (shared TS types), errors
│   ├── hooks/               # useDataTable, useForm, useToast, useWizard...
│   ├── layout/              # authLayout, publicLayout
│   ├── providers/           # LayoutSync.tsx, PrelineInit.tsx, StoreProvider.tsx
│   ├── redux/               # store.ts, hooks.ts, slices/ (authSlice, layoutSlice)
│   ├── routes/              # all_routes.tsx (path constants), authGuards.tsx, routeTitles.ts
│   ├── style/css/           # style.css (theme tokens + Tailwind entry), custom.css, date-range-picker.css
│   ├── utils/               # theme.ts, sidebar.ts, json/ (sidebar menu + translations)
│   ├── views/               # page modules
│   ├── environment.tsx
│   └── instrumentation-client.ts
├── eslint.config.mjs
├── next.config.ts
├── package.json
├── postcss.config.mjs
└── tsconfig.json

Route groups inside (public-pages)

(account), (accounting-module), (ai-analytics), (application), (banking-module), (business-intelligence-module), (crm-module), (crypto-analytics), (dashboard), (ecommerce), (finance-module), (food-delivery), (hospital-management), (hotel-management), (hrm-module), (insights-module), (lms-analytics), (logistics-module), (management-module), (pages), (project-management), (reports), (restaurant-pos), (sales-analytics-module), (school-management), (seo-analytics), (travel-booking), (ui-interface)

Shared Components (src/components/)

breadcrumb, carousel, charts, common-footer, common-header, common-sidebar, data-table, date-picker, date-range-picker, drawer, error-boundary, filter-drawer, form-feedback, image-with-base-path, import-export, modal, password-input, preview-code-toggle, range-slider, scroll-to-top, select, skeleton, submit-button, tag-input, time-picker, toast, ui, wizard

Page Modules (src/views/)

account, accounting-module, ai-analytics, application, auth-pages, banking-module, business-intelligence-module, crm-module, crypto-analytics, dashboard, ecommerce, finance-module, food-delivery, hospital-management, hotel-management, hrm-module, insights-module, lms-analytics, logistics-module, management-module, pages, project-management, reports, restaurant-pos, sales-analytics-module, school-management, seo-analytics, travel-booking, ui-interface

Layouts nest from the outside in: the root src/app/layout.tsx renders the <html> and <body> shell, then each route group applies its own layout.

Each group layout is a small file that delegates to the matching component in src/layout/.

Below is the root layout, src/app/layout.tsx:

import { appMetadata } from "../config/metadata";
import LayoutSync from "../providers/LayoutSync";
import PrelineInit from "../providers/PrelineInit";
import StoreProvider from "../providers/StoreProvider";
import { THEME_STORAGE_KEY } from "../utils/theme";

import "@phosphor-icons/web/regular/style.css";
import "@phosphor-icons/web/fill/style.css";
import "@phosphor-icons/web/duotone/style.css";
import "lucide-static/font/lucide.css";
import "@fortawesome/fontawesome-free/css/all.min.css";

import "flatpickr/dist/flatpickr.min.css";
import "../style/css/date-range-picker.css";
import "../style/css/style.css";
import "../style/css/custom.css";

export const metadata = appMetadata;

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" data-theme="light" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans..." rel="stylesheet" />
      </head>
      <body>
        <StoreProvider>
          <LayoutSync />
          <PrelineInit />
          {children}
        </StoreProvider>
      </body>
    </html>
  );
}

Things worth noting in the root layout

• The metadata export – Next's Metadata API sets the title, description and icons, built in src/config/metadata.ts.
• The inline theme script – it reads localStorage["dreamscore-theme"] and applies data-theme before first paint, which prevents a flash of the wrong theme.
• Plus Jakarta Sans via Google Fonts – loaded with a preconnect and stylesheet link in the head.
• PrelineInit – initialises Preline's UI behaviours on the client.

Page metadata and paths

Individual pages export generateMetadata using the getPageMetadata(pageName) helper from src/config/metadata.ts, with titles kept in src/routes/routeTitles.ts. The src/routes/all_routes.tsx file is the central map of path constants used for links and navigation.

Dreams Core ships a single application shell (src/layout/publicLayout.tsx) with a responsive sidebar, topbar and content area, plus a bare authLayout for the sign-in and error pages. Sidebar behaviour is driven from Redux (src/redux/slices/layoutSlice.ts):

type LayoutState = {
  themeMode: ThemeMode;        // "light" | "dark" | "system"
  language: Language;          // "en" | "fr" | "de" | "ar"
  sidebarCollapsed: boolean;   // persisted as "dreamscore-sidebar-collapsed"
  mobileSidebarOpen: boolean;
};

All layouts support light and dark modes.

The default vertical layout with a left sidebar, topbar, and center content area. It is applied by the (public-pages) route group.

• Sidebar: Navigation menu, logo, and collapsible dropdowns, built from src/utils/json/sidebarMenu.ts.
• Topbar: Search input, language and theme switchers, alerts, and profile actions.
• Responsive: Collapses into an overlay sidebar on tablets and mobile screens automatically.

A screen-saving option that collapses the sidebar to show icons only. When sidebarCollapsed is true, publicLayout.tsx adds the is-collapsed class to the .app-shell wrapper.

• Icon View: Collapses the sidebar to maximize the main work area.
• Hover Expand: Hovering over the collapsed sidebar expands it to reveal module text labels.
• Toggle: Switch between default and mini sidebar using the collapse button in the sidebar. The choice is remembered in localStorage.

Dreams Core comes with 24+ pre-styled UI components. The routes live in src/app/(public-pages)/(base-ui)/ with their views in src/views/ui-interface/, or click below to view their live layouts: