Customer Portal | Backend Code
This is the frontend repository for the Smart Inventory Management System (SIMS) Dashboard Application. It’s a React‑based web app that provides a comprehensive interface for visualizing and interacting with your inventory, orders, customers, suppliers, reports and more.
- Data Visualization
Interactive charts built withrechartsto give you clear insights into inventory levels, sales trends, low‑stock alerts, and more. - Report Generation
Export PDF reports on demand usingreact-pdfandhtml2canvas. - Authentication & Authorization
Secure login flow with JWT stored inlocalStorage, auto‑logout on token expiry, and protected routes. - CRUD Management
Full create/read/update/delete support for Inventory, Customers, Suppliers, Orders, Invoices, Feedbacks, and Admin profile. - Real‑time Notifications
Toast messages viareact-hot-toastfor success/error feedback. - Theming
Light/dark mode toggle. - Icons & Styling
Usesreact-iconsand CSS modules for a clean, modern UI.
Project Structure:
The project follows a standard React structure. Key components and functionalities are organized within the src directory. This includes components for:
- Dashboard
- Charts
- Report generation
- api/ holds your single
callApihelper plus all CRUD modules. - components/ contains both layout elements (Sidebar, Topbar) and generic widgets.
- contexts/ centralizes auth & theme state.
- hooks/ is where you keep reusable logic (login flow, storage sync).
- pages/ matches your route hierarchy—each feature gets its own folder.
- styles/ keeps CSS scoped via modules.
- utils/ houses pure functions (validation, date formatting, etc.).
This structure ensures clear separation of concerns and easy navigation as your SIMS dashboard grows.
- Node.js (version 16 or higher)
- npm (or yarn)
-
Clone the repository:
git clone https://github.com/ioNihal/sims-dashboard-front.git
-
Navigate to the project directory:
cd sims-dashboard-front -
Install dependencies:
npm install
-
Start the development server:
npm start
This will start the application at
http://localhost:3000.
-
Build the application for production:
npm run build
This will create a
builddirectory with the optimized production build.
- React
- react-router‑dom for routing & protected routes
- recharts for charts
- react-icons for iconography
- react-hot-toast for notifications
- react-pdf, html2canvas for PDF reports
Contributions are welcome! Please read the contributing guidelines before getting started.

