Documentation

– Built with Next.js 16 App Router
– React 19.3.0 + TypeScript
– Server Components with route-group layouts
– Static HTML export ready (output: "export")
– Redux Toolkit state management
– Tailwind CSS v4 (CSS-first config)
– Ant Design v6 component library
– 6 layout variants (default, mini, hoverview, hidden, full-width, RTL)
– Light & dark mode with no flash on load
– Fully Responsive Design
– 220+ prebuilt pages across CRM, HRM, Finance, Inventory, Projects, Sales, Purchase, POS
– ApexCharts, Chart.js & ECharts
– Self-hosted icon webfonts
– React Compiler enabled
– Mock-first data layer with swappable REST services
– Working CRUD on list, add, edit & details pages
– Demo authentication with role-based access
– PDF / Excel export and print-ready pages
– ERP document flow (quote → order → delivery → invoice)
– Compatible Browsers: Firefox, Safari, Opera, Edge, Chrome
– Easy to Customize with css Variables

nextjs/
├── public/
│   └── assets/img/          # avatar, card, icons, product, logo.svg, logo-small.svg, logo-white.svg
├── src/
│   ├── app/                 # App Router
│   │   ├── (auth-pages)/         # 20 pages  -> AuthLayout
│   │   ├── (layout-demo-pages)/  # 5 pages   -> LayoutDemoShell
│   │   ├── (pos-pages)/          # 1 page    -> PosLayout
│   │   ├── (public-pages)/       # 196 pages -> PublicLayout
│   │   ├── globals.css
│   │   ├── layout.tsx            # root layout
│   │   ├── apple-icon.png
│   │   └── favicon.png
│   ├── components/          # 16 shared components
│   ├── config/metadata.ts   # getPageMetadata() helper
│   ├── core/
│   │   ├── api/             # http client + services/ (one per entity)
│   │   ├── auth/            # demo accounts, roles, access rules
│   │   ├── data/            # interface.ts + mock/ (bundled sample data)
│   │   ├── domain/          # ERP flows, audit log, id generation, store
│   │   ├── export/          # PDF / Excel export
│   │   ├── hooks/           # useCrudModal - modal + form binding
│   │   └── ui/              # toast + overlay helpers
│   ├── hooks/               # useDebouncedValue, useTagInput
│   ├── layout/              # authLayout, publicLayout, posLayout,
│   │                        # layoutVariantWrapper, layoutDemoShell
│   ├── providers/           # LayoutSync.tsx, StoreProvider.tsx
│   ├── redux/               # store.ts, hooks.ts, slices/layoutSlice.ts
│   ├── routes/all_routes.tsx  # central path constants
│   ├── style/
│   │   ├── css/style.css    # theme tokens + Tailwind entry
│   │   └── icons/           # self-hosted icon webfonts
│   ├── utils/json/          # commonSelectOption, sidebarMenu
│   ├── views/               # page modules
│   └── environment.tsx
├── eslint.config.mjs
├── next.config.ts
├── package.json
├── postcss.config.mjs
└── tsconfig.json

Route groups inside (public-pages)

(advanced-ui), (application-pages), (assets), (base-ui), (charts), (crm), (dashboard), (documents), (finance), (forms), (hrm), (icons), (inventory), (membership), (pos), (projects), (purchase), (sales), (support), (system), (tables), (utilities)

Shared Components (src/components/)

breadcrumb, common-date-picker, common-date-range-picker, common-footer, common-header, common-lightbox, common-select, common-sidebar, common-tag-input, data-table, image-with-base-path, multiple-Select, password-input, preview-code-toggle, skeleton, text-editor

Page Modules (src/views/)

assets, auth-pages, blank-page, crm, documents, finance, hrm, inventory, main-pages, membership, pos, projects, purchase, sales, support, system, 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, then the page renders.

Each group layout is a one-liner that delegates to the matching file in src/layout/.

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

import { Metadata } from "next";
import StoreProvider from "../providers/StoreProvider";
import LayoutSync from "../providers/LayoutSync";
import { THEME_KEY } from "../redux/slices/layoutSlice";
import "../style/icons/@phosphor-icons/web/duotone/style.css";
import "../style/icons/@phosphor-icons/web/regular/style.css";
import "../style/icons/@phosphor-icons/web/fill/style.css";
import "../style/icons/lucide-static/font/lucide.css";
import "../style/icons/@fortawesome/fontawesome-free/css/fontawesome.min.css";
import "../style/icons/@fortawesome/fontawesome-free/css/all.min.css";
import "../style/css/style.css";
import "./globals.css";
import "preline";

export const metadata: Metadata = {
  title: "Dreams ERP - Tailwind CSS ERP Admin Dashboard Template",
  description: "Dreams ERP is a professional Tailwind CSS ERP Admin Dashboard Template ...",
  authors: [{ name: "Dreams Technologies" }],
  icons: {
    icon: "/nextjs/assets/img/favicon.png",
    apple: "/nextjs/assets/img/apple-icon.png",
  },
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" data-theme="light" suppressHydrationWarning>
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `(function(){try{if(localStorage.getItem(${JSON.stringify(
              THEME_KEY,
            )})==="dark")document.documentElement.setAttribute("data-theme","dark")}catch(e){}})()`,
          }}
        />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet" />
      </head>
      <body>
        <StoreProvider>
          <LayoutSync />
          {children}
        </StoreProvider>
      </body>
    </html>
  );
}

Three things worth noting in the root layout

• The metadata export – Next's Metadata API sets the title, description and icons. No head-management library is needed.
• The inline theme script – it reads localStorage["dt-theme"] and applies data-theme="dark" before first paint, which prevents a flash of the light theme. suppressHydrationWarning on <html> is required because that script mutates the DOM before React hydrates.
• Geist via Google Fonts – loaded with a preconnect and stylesheet link in the head.

Page metadata and paths

Individual pages export generateMetadata using the getPageMetadata(pageName) helper from src/config/metadata.ts. The src/routes/all_routes.tsx map survives as a central set of path constants used by the sidebar menu and links.

Mock-first services

Each entity has a four-line service built with createCrudService(name, endpoint, seed). It exposes useList() for read-only pages and useCrud() for pages with Add / Edit / Delete, returning { data, isLoading, refetch, create, update, remove }.

import { createListService } from "../createCrudService";
import { refunds, type Refund } from "../../data/mock/refunds";

export const refundsService = createListService<Refund>("refunds", "/refunds", refunds);
export const useRefunds = refundsService.useList;
export const useRefundsCrud = refundsService.useCrud;

Switching to a real API

Mock mode is the default. Set the environment variables below to call your own backend instead – the pages do not change, because they only talk to the service.

With mock mode on, changes are kept in the browser under the erp-data: storage keys, so they survive a reload. The bundled sample data is never modified. Run __erp.resetDemoData() in the browser console to restore it.

CRUD on the existing screens

The Add, Edit and Delete modals that ship with each list page are wired up. Their markup is unchanged – the row that was clicked is tracked with openRow() / useSelectedRow(), the inputs are bound with useModalForm() from src/core/hooks/useCrudModal.ts, and a short confirmation appears after a save. New records continue each list's own numbering, for example #RF0020 → #RF0021.

Edit and details pages accept an optional record id in the query string, for example /edit-employee?id=%23EMP0020. The id is read with useRecordId() from src/views/crudFormHelpers.ts. Opening the same page without an id keeps the original static sample content, so existing links still work. A query string is used rather than a dynamic route segment because output: "export" would otherwise require every id to be pre-rendered at build time.

Authentication & roles

The sign-in page is pre-filled with a demo account, so signing in stays one click. Accounts are defined in src/core/auth/demoUsers.ts; register, forgot-password, verification, reset and lock-screen all work against them. Signed-out visitors are redirected to the login page.

The rules live in src/core/auth/access.ts (which sidebar sections a role may open) and src/core/auth/permissions.ts (the <Can> wrapper that hides an action). Edit those two files to change who can do what.

Export & print

The Export as PDF and Export as Excel items in the toolbar produce real files containing exactly the rows on screen, including the current search, filter, sort and column choices. This is handled centrally by useExportLinks() in the public layout, so the page markup did not need to change. Print buttons open the browser print dialog, and a print stylesheet hides the header, sidebar and footer.

ERP document flow

Changing a record's status can create the next document in the chain. The rules are in src/core/domain/flows.ts and each one writes an entry to Audit Logs.

The providers are mounted in src/app/layout.tsx: StoreProvider seeds the Redux store (theme and session) on the client, and QueryProvider supplies the query client and registers the ERP flow rules. Pages that read ?id= are wrapped in a <Suspense> boundary inside their *Client.tsx file, which the App Router requires for useSearchParams.

The value is chosen in next.config.ts from the build phase and published to the client as NEXT_PUBLIC_BASE_PATH, which src/environment.tsx reads. Change the BASE_PATH constant to deploy under a different folder, or set it to "" to serve from the domain root.

const BASE_PATH = "/nextjs";

export default (phase: string): NextConfig => {
  const basePath = phase === PHASE_DEVELOPMENT_SERVER ? "" : BASE_PATH;

  return {
    basePath,
    env: { NEXT_PUBLIC_BASE_PATH: basePath },
    output: "export",
    // ...
  };
};

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, profile details, and collapsible dropdowns.
• Topbar: Search input, user alerts, settings, and profile toggle 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. LayoutSync adds the mini-sidebar class to the <body> when the variant is active. See the /layout-mini demo route.

• Icon View: Collapses the sidebar to maximize the main work area.
• Hover Expand: Hovering expands the sidebar to reveal module text labels (the hoverview variant).
• Toggle: Switch between default and mini sidebar using the toggle button in the topbar.

Dreams ERP 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: