/inventory-management-app

Primary LanguageJavaScript

Inventory Management System

This project is an inventory management system built using React and Redux. It allows users to view, edit, and manage inventory items, as well as view statistics related to the inventory.

Project Structure

The project is structured as follows:

src/components

This directory contains React components used throughout the application:

  • ActionButtons.js: Implements action buttons for editing, deleting, and toggling visibility of items.
  • EditProductModal.js: Provides a modal for editing product details.
  • InventoryStats.js: Displays statistics related to inventory, such as total products, total store value, out-of-stock items, and distinct quantities.
  • Navbar.js: Implements a navigation bar for switching between user and admin views.
  • Product.js: Represents a single product item with its details and associated action buttons.
  • ProductList.js: Displays a list of products fetched from the Redux store, utilizing the Product component.

src/redux

This directory contains Redux-related logic:

  • inventorySlice.js: Manages inventory-related state, including fetching inventory data asynchronously, deleting products, updating products, and toggling product visibility.

src/services

This directory contains service functions for making API calls:

  • api.js: Handles API calls to fetch inventory data from an external source.

src/styles

This directory contains SCSS files for styling the views:

  • Views.scss: Defines styles for the views, including the admin container, product table, dialog, buttons, and action icons.

src/utils

This directory contains utility functions:

  • helpers.js: Provides utility functions for calculating statistics related to inventory, such as total store value, out-of-stock items, distinct quantities, and total products.

src/views

This directory contains the main entry point of the application:

  • App.js: Serves as the main entry point of the application, rendering the Navbar, InventoryStats, and ProductList components and managing state related to view mode and data fetching.

Usage

To run the project locally, follow these steps:

  1. Clone the repository: git clone https://github.com/your-username/inventory-management-system.git
  2. Install dependencies: npm install
  3. Start the development server: npm start