React frontend for the NextGenManager Manufacturing ERP
Features • Quick Start • Structure • Modules • Contributing
This is the frontend application for NextGenManager, an open-source manufacturing ERP system. It provides a modern, responsive interface for managing production, inventory, sales, and asset operations.
- KPI cards with key business metrics
- Interactive charts and visualizations (Recharts)
- Quick navigation to all modules
- Work Orders -- Create, schedule, track material issuance and operation progress with state transitions
- Routing -- Define manufacturing processes with operation sequences and dependencies
- Production Scheduling -- Visual schedule against work centers with capacity planning
- Production Jobs -- Manage high-level production assignments
- Shop Floor -- Real-time shop floor operations view
- Work Centers -- Configure machines and workstations
- Make vs Buy Analysis -- Evaluate manufacturing vs purchasing decisions
- Job Work Challans -- Subcontracting management with drag-and-drop
- Item Master -- Product catalog with filtering, Excel import/export
- Stock Tracking -- Real-time inventory instance management
- Item Code Mapping -- Configurable auto-numbering schemes
- Enquiries -- Capture and track customer inquiries
- Quotations -- Generate and manage sales quotations
- Sales Orders -- Full order lifecycle with PDF generation
- Unified Contacts -- Vendors, customers, or both with multi-address support
- GST/MSME Details -- India-specific compliance fields
- Machine Registry -- Equipment details, specs, and status tracking
- Maintenance Events -- Log and track machine maintenance
- Production Logs -- Machine utilization monitoring
- JWT Authentication -- Login with automatic token refresh on 401/403
- Role-Based Access -- 11 system roles with module-level permissions
- User Management -- Create users, assign roles, manage status (Super Admin)
- Role Management -- Create custom roles with granular permissions
- PDF Generation -- Client-side via jsPDF with auto-tables
- Excel/CSV -- Export any data grid via xlsx and PapaParse
- PDF Viewing -- In-app PDF viewer (react-pdf)
| Category | Technology |
|---|---|
| Framework | React 18.3, Create React App |
| Routing | React Router v6 (nested, protected routes) |
| UI Components | Material-UI v6, shadcn/ui, Bootstrap 5 |
| Styling | Tailwind CSS 3.4, Emotion |
| Forms | Formik + Yup validation |
| HTTP Client | Axios (with JWT interceptors) |
| Charts | Recharts 3.8 |
| Animations | Framer Motion 12 |
| Drag & Drop | @hello-pangea/dnd |
| jsPDF + autotable (export), react-pdf (viewing) | |
| Excel/CSV | xlsx, PapaParse |
| Date | date-fns, Day.js |
| Icons | MUI Icons, Lucide React |
- Node.js 18+
- npm or yarn
- NextGenManager backend running on port 8080
git clone https://github.com/siddhant2411/nextgenmanagerui.git
cd nextgenmanageruiCopy the environment config:
cp .env.example .envEdit .env if your backend runs on a different URL:
REACT_APP_API_BASE_URL=http://localhost:8080/apiInstall and run:
npm install
npm startThe app will open at http://localhost:3000.
npm run buildThe optimized build will be in the build/ folder, ready to serve from any static host or CDN.
src/
├── auth/ # Authentication system
│ ├── AuthContext.jsx # JWT provider + useAuth hook
│ ├── roles.js # Role definitions & access maps
│ ├── ProtectedRoute.jsx # Auth guard
│ ├── PublicOnlyRoute.jsx # Redirect if already logged in
│ └── RoleProtectedRoute.jsx # Role-based route guard
│
├── services/ # API integration layer
│ ├── apiService.js # Axios client with auth interceptors
│ ├── authService.js # Auth & user management API
│ ├── authStorage.js # localStorage session persistence
│ ├── bomService.js # Bill of Materials API
│ ├── workOrderService.js # Work order API
│ ├── routingService.js # Routing API
│ ├── machineAssetsService.js
│ ├── laborRoleService.js
│ ├── jobWorkChallanService.js
│ └── ...
│
├── pages/ # Route-level page components
│ ├── Home.js # Dashboard
│ ├── LoginPage.jsx
│ ├── BomPage.js
│ ├── WorkOrderPage.jsx
│ ├── InventoryItemPage.js
│ ├── SalesOrderPage.js
│ ├── ProductionSchedulePage.jsx
│ ├── RoleManagementPage.jsx
│ └── ... (23 pages total)
│
├── components/ # Reusable UI components by domain
│ ├── ui/ # Shared: sidebar, toolbar, breadcrumb
│ ├── bom/ # BOM components
│ ├── inventoryitem/ # Inventory item components
│ ├── production/ # Work order, scheduling, shop floor
│ ├── manufacturing/ # Routing, work center
│ ├── sales/ # Sales order components
│ ├── contact/ # Contact management
│ ├── enquiry/ # Enquiry components
│ ├── quotation/ # Quotation components
│ └── config/ # Item code mapping
│
├── config/
│ └── env.js # API base URL resolution
│
├── utils/ # Helpers
│ ├── formatters.js # Date/number formatting
│ └── breadcrumbConfig.js # Navigation breadcrumbs
│
└── App.js # Root router & auth provider
The app uses JWT tokens managed via React Context (AuthContext). The Axios interceptor automatically:
- Attaches the access token to every request
- Refreshes the token on 401/403 responses
- Redirects to login when the session expires
11 system roles control access:
| Role | Access |
|---|---|
ROLE_SUPER_ADMIN |
Full system access |
ROLE_ADMIN |
Administrative operations |
ROLE_PRODUCTION_ADMIN |
Production module (full) |
ROLE_PRODUCTION_USER |
Production module (read + limited write) |
ROLE_INVENTORY_ADMIN |
Inventory module (full) |
ROLE_INVENTORY_USER |
Inventory module (read + limited write) |
ROLE_SALES_ADMIN |
Sales module (full) |
ROLE_SALES_USER |
Sales module (read + limited write) |
ROLE_PURCHASE_ADMIN |
Purchase module (full) |
ROLE_PURCHASE_USER |
Purchase module (read + limited write) |
ROLE_USER |
Basic access |
Routes are protected at three levels:
- ProtectedRoute -- requires authentication
- RoleProtectedRoute -- requires specific roles
- Component-level --
canAction()andcanModule()checks
All API calls go through apiService.js, which provides:
import api from '../services/apiService';
// GET with pagination
const response = await api.get('/inventory_item/all', { params: { page: 0, size: 20 } });
// POST with body
const result = await api.post('/bom', bomData);
// File upload
const uploaded = await api.postFile('/bom/upload/123', file);Domain-specific services (e.g., bomService.js, workOrderService.js) wrap these calls with business-specific methods.
| Variable | Description | Default |
|---|---|---|
REACT_APP_API_BASE_URL |
Backend API URL | http://localhost:8080/api |
| Command | Description |
|---|---|
npm start |
Start dev server on port 3000 |
npm run build |
Production build to build/ |
npm test |
Run tests with Jest |
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
- Follow existing component patterns (pages delegate to components)
- Use MUI components for consistency
- Forms use Formik + Yup
- API calls go through service files, never directly from components
- Keep domain logic in the appropriate
components/[domain]/folder
- Backend API: siddhant2411/nextgenmanager
This project is licensed under the Apache License 2.0. See the LICENSE file for details.
Part of the NextGenManager manufacturing ERP ecosystem.