Master React Inventory Management System Development

Introduction to Inventory Management Systems

In today’s fast-paced digital environment, businesses require efficient inventory management systems to streamline operations. These systems not only help in tracking stock levels but also in managing orders, deliveries, and sales data. Developing an inventory management system with React can make this process efficient, user-friendly, and responsive.

Setting Up the Project

To start, you need to set up your React project. You can easily do this using Create React App with Vite. Open your terminal and run

$ npm create vite@latest

Select as React from the following list and and install it.

App.jsx

import React, { useState } from "react";


function App() {
  const [selectedItem, setSelectedItem] = useState(null);
  const [qty, setQty] = useState(1);
  const [cart, setCart] = useState([]);
  const [total, setTotal] = useState(0);

  const items = {
    Chocolate: { price: 32, image: "images/ice1.jpg" },
    Mango: { price: 35, image: "images/ice2.jpg" },
    Venila: { price: 40, image: "images/ice3.jpg" },
    Strawberry: { price: 45, image: "images/ice4.jpg" },
    MixFruit: { price: 35, image: "images/ice5.jpg" },
  };

  const handleItemClick = (item) => {
    setSelectedItem(item);
  };

  const handleAddToCart = () => {
    if (selectedItem && qty > 0) {
      const price = items[selectedItem].price;
      const totalAmount = price * qty;

      setCart([
        ...cart,
        { name: selectedItem, price, qty, totalAmount },
      ]);

      setTotal(total + totalAmount);
      setQty(1);
      setSelectedItem(null);
    }
  };

  const handleDelete = (index) => {
    const removedItem = cart[index];
    setCart(cart.filter((_, i) => i !== index));
    setTotal(total - removedItem.totalAmount);
  };

  const handleReset = () => {
    setCart([]);
    setTotal(0);
  };

  return (
    <div>
      <nav className="navbar navbar-dark bg-dark">
        <span className="navbar-brand mb-0 h1">ICECREAM SHOP POS</span>
      </nav>
      <div className="row">
        {/* Item Selection */}
        <div className="col-sm-3">
          <div className="container">
            <div className="list-group-item list-group-item-action active">Item</div>
            <div className="panel-body bg-dark text-white">
              {Object.keys(items).map((item) => (
                <div key={item} onClick={() => handleItemClick(item)} style={{ cursor: "pointer" }}>
                  <img
                    src={items[item].image}
                    alt={item}
                    className="photo"
                    width="120"
                    height="100"
                  />
                  <b>{item}</b>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Cart */}
        <div className="col-sm-6">
          <div className="container">
            <div className="list-group-item list-group-item-action active">Add Products</div>
            <table className="table table-dark table-bordered">
              <thead>
                <tr>
                  <th>Delete</th>
                  <th>Item</th>
                  <th>Price</th>
                  <th>Qty</th>
                  <th>Total</th>
                </tr>
              </thead>
              <tbody>
                {cart.map((item, index) => (
                  <tr key={index}>
                    <td>
                      <button
                        className="btn btn-warning"
                        onClick={() => handleDelete(index)}
                      >
                        Delete
                      </button>
                    </td>
                    <td>{item.name}</td>
                    <td>{item.price}</td>
                    <td>{item.qty}</td>
                    <td>{item.totalAmount}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Bill */}
        <div className="col-sm-3">
          <div className="list-group-item list-group-item-action active">Bill</div>
          <div>
            <label>Total</label>
            <input
              type="text"
              className="form-control"
              style={{ color: "yellow", background: "black", fontSize: "30px" }}
              value={total}
              readOnly
            />
          </div>
          <br />
          <button className="btn btn-warning" onClick={handleReset}>
            Reset
          </button>
        </div>
      </div>

      {/* Modal */}
      {selectedItem && (
        <div className="modal show" style={{ display: "block" }} tabIndex="-1" role="dialog">
          <div className="modal-dialog" role="document">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Qty</h5>
                <button
                  type="button"
                  className="close"
                  onClick={() => setSelectedItem(null)}
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div className="modal-body">
                <input
                  type="number"
                  className="form-control"
                  style={{ color: "yellow", background: "black", fontSize: "30px" }}
                  value={qty}
                  onChange={(e) => setQty(Number(e.target.value))}
                />
              </div>
              <div className="modal-footer">
                <button className="btn btn-info" onClick={handleAddToCart}>
                  Add
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default App;

Lets do the System step by step by watching below video.

Master React Inventory Management System Development

Share

Watch on

Master React Inventory Management System Development