Documentation

– Built with React 19.2.7 + TypeScript
– Vite 8 build tooling
– React Router v7 with lazy-loaded routes
– 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
– Fully Responsive Design
– 200+ prebuilt pages across CRM, HRM, Finance, Inventory, Projects, Sales, Purchase, POS
– ApexCharts, Chart.js & ECharts
– Self-hosted icon webfonts
– React Compiler enabled
– Compatible Browsers: Firefox, Safari, Opera, Edge, Chrome
– Easy to Customize with css Variables

react/
├── public/
│   ├── assets/img/          # avatar, card, icons, product, logo.svg, logo-small.svg, logo-white.svg
│   ├── apple-icon.png
│   └── favicon.png
├── src/
│   ├── components/          # 16 shared components
│   ├── core/data/           # interface.ts - shared TS types
│   ├── hooks/               # useDebouncedValue, useTagInput
│   ├── layout/              # authLayout, publicLayout, posLayout, layoutVariantWrapper
│   ├── providers/           # LayoutSync.tsx - single DOM writer for theme/layout
│   ├── redux/               # store.ts, hooks.ts, slices/layoutSlice.ts
│   ├── routes/              # all_routes, router, router.link, lazyRoute, dynamicTitle
│   ├── style/
│   │   ├── css/style.css    # theme tokens + Tailwind entry
│   │   └── icons/           # self-hosted icon webfonts
│   ├── utils/json/          # commonSelectOption, sidebarMenu
│   ├── views/               # page modules
│   ├── environment.tsx
│   ├── index.css
│   └── main.tsx
├── eslint.config.js
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts

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

The app entry in src/main.tsx wraps the routes with the Redux Provider and BrowserRouter, then mounts the layout sync helper.

Below is the React app entry:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import ALLRoutes from "./routes/router";
import DynamicTitle from "./routes/dynamicTitle";
import LayoutSync from "./providers/LayoutSync";
import { store } from "./redux/store";
import { BrowserRouter } from "react-router-dom";
import { base_path } from "./environment";
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 "./index.css";
import "preline";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Provider store={store}>
      <BrowserRouter basename={base_path}>
        <LayoutSync />
        <ALLRoutes />
        <DynamicTitle />
      </BrowserRouter>
    </Provider>
  </StrictMode>,
);

Routing

Routing is handled by react-router-dom v7. The basename comes from base_path in src/environment.tsx.

• src/routes/all_routes.tsx – central map of path constants used across the app.
• src/routes/router.link.tsx – exports publicRoutes, authRoutes, posPage and layoutDemoRoutes. Around 222 entries, each shaped { id, path, element, route, meta_title }.
• src/routes/router.tsx – nests publicRoutes under PublicLayout, authRoutes under AuthLayout and posPage under PosLayout. layoutDemoRoutes render bare, because they bring their own shell.
• src/routes/lazyRoute.tsx – React.lazy + Suspense with a PageSkeleton fallback. It re-runs HSStaticMethods.autoInit() after each lazy page mounts, because Preline needs re-initialising on route change.
• src/routes/dynamicTitle.tsx – sets document.title from each route's meta_title.

The default vertical layout with a left sidebar, topbar, and center content area.

• 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. You can find these files in your src/views/ui-interface/ directory (e.g. uiAccordion.tsx) or click below to view their live layouts: