Skip to content

ioNihal/sims-dashboard-front

Repository files navigation

Customer Portal | Backend Code

Team Project:

  • Frontend: nihal-avatar Nihal K
  • Backend: shahabas-avatar Shahabas Abdul Hameed

Sims Dashboard Front

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.


🚀 Key Features

  • Data Visualization
    Interactive charts built with recharts to give you clear insights into inventory levels, sales trends, low‑stock alerts, and more.
  • Report Generation
    Export PDF reports on demand using react-pdf and html2canvas.
  • Authentication & Authorization
    Secure login flow with JWT stored in localStorage, 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 via react-hot-toast for success/error feedback.
  • Theming
    Light/dark mode toggle.
  • Icons & Styling
    Uses react-icons and 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 callApi helper 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.

Getting Started

Prerequisites

  • Node.js (version 16 or higher)
  • npm (or yarn)

Installation

  1. Clone the repository:

    git clone https://github.com/ioNihal/sims-dashboard-front.git
  2. Navigate to the project directory:

    cd sims-dashboard-front
  3. Install dependencies:

    npm install

Development

  1. Start the development server:

    npm start

    This will start the application at http://localhost:3000.

Build

  1. Build the application for production:

    npm run build

    This will create a build directory with the optimized production build.

Technologies

  • 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

Contributing

Contributions are welcome! Please read the contributing guidelines before getting started.

License

MIT

About

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages