codeSanthai Admin: React Admin Dashboard Template

Requirements

What's in the download

codesanthai-admin-v1.0.0/
├── README.md, LICENSE.txt, CHANGELOG.md
├── docs/documentation/index.html   ← this guide (works offline) + PDF
└── src/                            ← the project
    ├── package.json, vite.config.js, eslint.config.js, .env.example
    ├── index.html, public/
    └── src/
        ├── api/          HTTP client, CRUD service factory, mock API
        ├── store/        store setup, root reducer/saga, CRUD factories
        ├── features/     auth, dashboard, users, products, settings, ui
        ├── components/   ui/ (design system), common/, layout/, charts/
        ├── hooks/        useForm, useCrudResource, useTheme, …
        ├── config/       env, navigation, status maps, chart colours
        ├── routes/       router, guards, paths
        ├── styles/       design tokens + global CSS
        └── utils/        formatters, validators, storage, CSV

Quick start (your computer)

1. Install Node.js 22 LTS.
2. Open a terminal in the src folder and install packages:

   npm install

3. Create your environment file:

   cp .env.example .env

4. Start the development server:

   npm run dev

   Open http://localhost:5173.
5. Sign in with admin@codeSanthai.dev / password123 (filled in for you in mock mode).

Build & deploy

Run npm run build, then upload the contents of the dist/ folder to your web root.

The app uses clean URLs such as /users by default. Your server must send unknown paths to index.html, otherwise refreshing a page shows a 404. Pick your host:

cPanel / Apache: .htaccess next to index.html

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx

location / {
  try_files $uri $uri/ /index.html;
}

Netlify / Cloudflare Pages

Add a file public/_redirects containing /* /index.html 200 before building.

Vercel

Add vercel.json: { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }

Environment variables

Set these in .env (read at build time). .env.example documents each one.

Connecting your API

1. Set VITE_USE_MOCK=false and VITE_API_BASE_URL=https://api.your-site.com in .env.
2. Make your API return the shapes below. Every request after login sends Authorization: Bearer <token>.
3. Rebuild with npm run build.

Errors: return a non-2xx status with { "message": "…" }. The message is shown to the user. 401 signs the user out automatically.

Login

• Email and password are validated before anything is sent.
• The session token is stored, so a page refresh keeps you signed in. On load the app checks it with /auth/me.
• Signed-in users are sent away from /login; signed-out users are sent to it and returned to the page they wanted after signing in.

Dashboard

Skeleton placeholders show while data loads; on an error a retry message appears instead of a blank page.

Users

• Search by name or email. Requests are debounced, so typing doesn't flood your API.
• Filter by role and status, sort any column, choose 10, 20 or 50 rows per page.
• The ⋯ menu on each row edits or deletes. Delete asks for confirmation.
• The search box at the top of every page jumps to Users filtered by what you typed.

Products

Products use exactly the same building blocks as Users: only the columns, filters and form fields differ. Stock shows Out of stock at 0 and “n left” at 12 or fewer. SKUs must be unique; the API's error is shown in the form.

Forms & validation

Saving shows a spinner on the button, then a success toast, and the list refreshes. Deleting asks first:

Settings & themes

Mobile

Below 1024 px the sidebar becomes a slide-in menu; less important table columns hide on small screens.

How the code is organised

Each domain lives in src/features/<name>/ with its slice, saga, service and page. Shared building blocks live in components/, hooks/ and store/factories/.

Component ──dispatch──▶ action ──▶ saga (takeLatest / debounce)
    ▲                                  │ call(service)
    │                                  ▼
 useSelector ◀── reducer ◀── put(success | failure) ◀── httpClient ──▶ API or mock

• Components never call the API. They dispatch actions and read state with selectors.
• Sagas own side effects: API calls, saving preferences, toasts, debounced search, cancelling stale requests.
• Errors are handled in one place (store/sagaHelpers.js): failure action, toast, and logout on 401.
• Each feature saga restarts on its own if it crashes, so one bug can't stop the rest of the app.

Adding a new CRUD page

Example: an Orders page with search, filters, sorting, pagination, create, edit and delete.

1. Slice: src/features/orders/ordersSlice.js

   import { createCrudSlice } from '@/store/factories/createCrudSlice';
   import { createCrudSelectors } from '@/store/factories/createCrudSelectors';
   
   const { actions, reducer } = createCrudSlice({
     name: 'orders',
     initialQuery: { filters: { status: '' } },
   });
   export const ordersActions = actions;
   export const ordersSelectors = createCrudSelectors('orders');
   export default reducer;

2. Saga: src/features/orders/ordersSaga.js

   export default createCrudSaga({
     actions: ordersActions,
     selectors: ordersSelectors,
     service: createCrudService('orders'),
     entityName: 'Order',
   });

3. Register the reducer in store/rootReducer.js and the saga in store/rootSaga.js.
4. Configure columns, filters and form fields (copy features/users/usersConfig.jsx) and render the page:

   export default function OrdersPage() {
     return (
       <CrudPage
         resource={{ actions: ordersActions, selectors: ordersSelectors }}
         title="Orders" entityName="Order"
         getColumns={getOrderColumns}
         filters={ORDER_FILTERS}
         formFields={ORDER_FORM_FIELDS}
       />
     );
   }

5. Route and menu: add the path to routes/paths.js, a route in routes/AppRouter.jsx and an item in config/navigation.js.

Form field options

UI components & hooks

Import components from @/components/ui. Each is a folder with its JSX and a CSS module.

Show a toast from anywhere, including sagas: dispatch(showToast({ type: 'success', message: 'Saved' })).

Theming & branding

• Colours, spacing, radius, shadows: src/styles/tokens.css, with a light and a dark set. Change --color-primary, --color-primary-hover, --color-primary-soft and --gradient-brand to rebrand.
• Chart colours: src/config/theme.js.
• Name: VITE_APP_NAME and the <title> in index.html.
• Logo and favicon: src/components/layout/Logo.jsx and public/favicon.svg.
• Menu: src/config/navigation.js. Status labels and colours: src/config/status.js.

Tests & code quality

npm test runs 27 tests: reducers, the CRUD saga factory, validators, pagination, CSV export, components, and an end-to-end flow (login → dashboard → users → create a user → search) against the mock API. npm run lint runs ESLint with React and Hooks rules; npm run format runs Prettier.

Troubleshooting

FAQ

Does it include a backend?

No. It includes a complete in-browser mock API so you can design, demo and test without one, and a documented REST contract for connecting your own (Node.js, Laravel, Django, .NET, …).

Can I use it without Redux-Saga?

Yes, but sagas are where all data loading lives. Most buyers keep them and add new resources with the CRUD factory.

Is it TypeScript?

It is JavaScript with JSDoc comments, so editors show types and hints. It can be converted to TypeScript file by file.

Can I build a client project with it?

Yes, the Regular licence covers one project for you or one client. See Support & licence.

Credits

React, React DOM, React Router, Redux Toolkit, React Redux, Redux-Saga, Recharts, lucide-react, clsx, Vite, Vitest, Testing Library, ESLint and Prettier (all MIT or ISC). Font: Inter (SIL Open Font License), loaded from Google Fonts. Sample people and products are fictional.

Changelog

1.0.0 11 Nov 2026

First release.

Support & licence

Email gopinathsbc@gmail.com with your order number. Updates are free from My downloads on codesanthai.tech.

Regular licence: one project for you or one client. Extended licence: one project whose end users pay to use it (for example a SaaS product). Neither licence allows reselling or sharing the source code. Full terms are in LICENSE.txt.

© 2026 CodeSanthai · codeSanthai Admin v1.0.0