Tutusfunny

Introduction to React Inventory Management Systems

In today’s fast-paced business environment, efficient inventory management is crucial for maintaining a smooth operation. A React inventory management system enables businesses to streamline their inventory processes, providing real-time data and insights. This technology enhances productivity and minimizes errors.

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";


const App = () => {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);

  const products = [
    { name: "Suger", price: 12 },
    { name: "Tea", price: 15 },
    { name: "Flour", price: 35 },
    { name: "Rice", price: 10 },
    { name: "Dhall", price: 32 },
  ];

  const addItem = () => {
    const checkedInputs = document.querySelectorAll(
      "input[name='pos']:checked"
    );

    let newItems = [...items];
    let newTotal = total;

    checkedInputs.forEach((input) => {
      const name = input.value;
      const qty =
        input.closest("tr").querySelector("input[name='qty']").value || 0;
      const option =
        input.closest("tr").querySelector("select[name='option']").value;
      const product = products.find((p) => p.name === name);

      if (product) {
        let calculatedAmount = 0;

        if (option === "2") {
          calculatedAmount = qty * product.price; // KG
        } else if (option === "1") {
          calculatedAmount = (qty / 1000) * product.price; // GR
        }

        const newItem = {
          name,
          price: product.price,
          qty,
          total: calculatedAmount.toFixed(2),
        };

        newItems.push(newItem);
        newTotal += calculatedAmount;
      }
    });

    setItems(newItems);
    setTotal(newTotal);
  };

  const deleteItem = (index) => {
    const updatedItems = [...items];
    const itemToRemove = updatedItems[index];
    setTotal(total - itemToRemove.total);
    updatedItems.splice(index, 1);
    setItems(updatedItems);
  };

  const reset = () => {
    setItems([]);
    setTotal(0);
  };

  return (
    <div className="container mt-3">
      <nav className="navbar navbar-dark bg-dark mb-4">
        <span className="navbar-brand mb-0 h1">Grocery Shop Inventory</span>
      </nav>

      <div className="row">
        <div className="col-sm-5">
          <div className="card">
            <div className="card-header bg-dark text-white">Items</div>
            <div className="card-body bg-dark text-white">
              <form id="tbl-project">
                <table className="table table-bordered text-white">
                  <tbody>
                    {products.map((product, index) => (
                      <tr key={index}>
                        <td>
                          <input
                            type="checkbox"
                            name="pos"
                            value={product.name}
                          />
                          <label> {product.name}</label>
                        </td>
                        <td>
                          <input
                            type="number"
                            name="qty"
                            size="10"
                            className="form-control"
                          />
                        </td>
                        <td>
                          <select
                            className="form-control"
                            name="option"
                            required
                          >
                            <option value="">Please Select</option>
                            <option value="1">GR</option>
                            <option value="2">KG</option>
                          </select>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                <button
                  type="button"
                  className="btn btn-info"
                  onClick={addItem}
                >
                  OK
                </button>
              </form>
            </div>
          </div>
        </div>

        <div className="col-sm-4">
          <div className="card">
            <div className="card-header bg-dark text-white">Add Products</div>
            <div className="card-body">
              <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>
                  {items.map((item, index) => (
                    <tr key={index}>
                      <td>
                        <button
                          className="btn btn-warning"
                          onClick={() => deleteItem(index)}
                        >
                          Delete
                        </button>
                      </td>
                      <td>{item.name}</td>
                      <td>{item.price}</td>
                      <td>{item.qty}</td>
                      <td>{item.total}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div className="col-sm-2">
          <div className="card">
            <div className="card-header bg-dark text-white">Bill</div>
            <div className="card-body">
              <div className="mb-3">
                <label>Total</label>
                <input
                  type="text"
                  className="form-control text-yellow bg-black text-center"
                  value={total.toFixed(2)}
                  readOnly
                  style={{ color: "yellow", background: "black", fontSize: 30 }}
                />
              </div>
              <button
                className="btn btn-warning btn-block"
                onClick={reset}
              >
                Reset
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

Lets do the System step by step.