atlas-operations-console — Vite Admin dashboard Template

SHA-256: 7ae0c8583159b0d8d3a477764774824a3f2431e55cd755578554d840d645eb10

2026-10-15T13:18:40.648Z

# Atlas — Operations Console

A complete ERP-style operations dashboard template built with React + Vite.
Sidebar navigation, dashboards with live charts, full CRUD tables, invoicing,
payable/receivable ledgers, and reporting — all wired together and ready to
connect to a real backend.

This is a **template with no seed data** — every module starts empty so you
can plug in your own data source (an API, a database, or your own JSON) and
make it yours.

## Modules included

Dashboard · Customer · Vendor · Item · Stock In · Stock Out · Payroll ·
Day Book · Ledger (payable/receivable + workbook-style accounts) · Projects ·
Driver · Vehicle · Destination · Reports · Settings

## Features

- Full CRUD (add / edit / delete) on every module, with search, filters,
  sorting, pagination and CSV export
- Item stock levels are **derived live** from Stock In / Stock Out records —
  no manual stock reconciliation needed
- Dropdown ("combo") fields pull from your existing data instead of forcing
  free-text entry, with a "+ Add new" fallback when you need something new
- A **Payable / Receivable ledger** built from Stock In and Stock Out amounts,
  with a "record payment" flow (bill number, description, amount, date,
  reference) and running balances
- A per-vendor / per-destination **statement view** inside Stock In / Stock
  Out, with CSV export, print/PDF, and a **Convert to Invoice** flow with an
  editable line-item builder
- Live dashboard charts (Chart.js): stock movement, cash flow, category mix,
  top payables
- Functional notification bell (low stock, vehicles in maintenance, drivers
  on leave, projects on hold) and profile menu
- Light/dark theme toggle, collapsible sidebar, mobile drawer navigation

## Run it locally

```bash
npm install
npm run dev
```

Then open the URL it prints — usually **http://localhost:5173**

## Build for production

```bash
npm run build
npm run preview   # serve the production build locally to check it
```

The build output in `dist/` is a fully static site — deployable to any static
host (Netlify, Vercel, GitHub Pages, S3, or plain Apache/Nginx/cPanel
hosting). Routing uses `HashRouter`, so it works correctly at any deployment
path (domain root or a subfolder) without any server-side rewrite rules.

## Project structure

```
src/
  main.jsx               # app bootstrap (Router + StrictMode)
  App.jsx                 # shell: sidebar + topbar + route table
  styles/global.css       # design system (tokens, layout, components)
  data/data.json           # empty data structure — replace with your own
  hooks/
    useAppData.js          # central in-memory data store for every module
    useToast.jsx            # toast notification system
  components/               # reusable building blocks
    Icon.jsx, DataTable.jsx, Modal.jsx, FormFields.jsx, StatCard.jsx,
    Toggle.jsx, ChartCanvas.jsx, Sidebar.jsx, Topbar.jsx, InvoiceBuilder.jsx
  pages/                     # one file per sidebar module
    Dashboard.jsx, Customers.jsx, Vendors.jsx, Items.jsx,
    StockIn.jsx, StockOut.jsx, Payroll.jsx, DayBook.jsx, Ledger.jsx,
    Projects.jsx, Drivers.jsx, Vehicles.jsx, Destinations.jsx,
    Reports.jsx, Settings.jsx
  utils/
    format.js, csv.js, options.js, partyLedger.js
```

## Connecting a real backend

Everything lives in React state, seeded from `src/data/data.json` via
`useAppData.js`. To connect a backend:

1. Replace the `useCollection` calls in `useAppData.js` with real API calls
   (fetch/axios) — every page consuming that hook keeps working unchanged.
2. Keep the **Item** stock-derivation logic (or its equivalent) on your
   backend so stock totals stay consistent with Stock In/Out history.
3. The three "workbook" ledger accounts (`vendorA` / `vendorB` / `vendorC` in
   `useAppData.js`) are a legacy pattern from an original spreadsheet import —
   feel free to remove them and rely purely on the Payable/Receivable ledger,
   which is fully data-driven from your Vendor and Destination lists.

## Customizing the theme

Colors, radii, and shadows are defined as CSS custom properties at the top of
`src/styles/global.css` (`:root { ... }`) — change them there to re-skin the
whole app. Fonts are loaded via Google Fonts in `index.html` (Sora for
headings, Inter for body text, JetBrains Mono for tabular/code data).

## License

Use this template freely for personal or commercial projects.