React Inventory Management System Project

Inventory Management App in React.this app explain the complete module of the Inventory sales management system in React

Install React using Vite

npm create vite@latest

Paste the code inside the App.jsx

import React, { useState } from "react";

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

  // Function to calculate the total amount for an item
  const calculateAmount = (qty, price, option) => {
    return option === 2 ? qty * price : parseFloat((qty / 1000) * price);
  };

  // Handle adding selected items
  const handleAdd = () => {
    const selectedItems = Array.from(
      document.querySelectorAll("input[name='pos']:checked")
    ).map((input) => {
      const item = input.value;
      const price = item === "Strawberry" ? 300 : item === "Chocolate" ? 500 : 100;

      const row = input.closest("tr");
      const qty = parseFloat(row.querySelector('[name="qty"]').value || 0);
      const option = parseInt(row.querySelector("select").value, 10);
      const calAmount = calculateAmount(qty, price, option);

      return { item, price, qty, total: calAmount.toFixed(2) };
    });

    const newTotal = selectedItems.reduce(
      (sum, item) => sum + parseFloat(item.total),
      0
    );

    setItems((prevItems) => [...prevItems, ...selectedItems]);
    setTotal((prevTotal) => prevTotal + newTotal);
  };

  // Handle deleting an item
  const handleDelete = (index) => {
    setItems((prevItems) => {
      const updatedItems = prevItems.filter((_, i) => i !== index);
      const newTotal = updatedItems.reduce(
        (sum, item) => sum + parseFloat(item.total),
        0
      );
      setTotal(newTotal);
      return updatedItems;
    });
  };
  

  // Handle resetting the list and total
  const handleReset = () => {
    setItems([]);
    setTotal(0);
  };

  // Reusable component for the input row
  const ItemRow = ({ flavor }) => (
    <tr>
      <td>
        <input type="checkbox" name="pos" value={flavor} />
        <label className="ms-2">{flavor}</label>
      </td>
      <td>
        <input type="number" name="qty" className="form-control" />
      </td>
      <td>
        <select className="form-control" name="option" required>
          <option value="">Select</option>
          <option value="1">ML</option>
          <option value="2">L</option>
        </select>
      </td>
    </tr>
  );

  return (
    <div>
      <nav className="navbar navbar-dark bg-danger">
        <span className="navbar-brand mb-2 h1"> Inventory Management</span>
      </nav>
      <div className="container mt-4">
        <div className="row">
          {/* Item Selection Section */}
          <div className="col-md-5">
            <div className="bg-success text-white p-3 mb-3">
              <h2>Items</h2>
            </div>
            <form>
              <table className="table table-bordered">
                <tbody>
                  {["Strawberry", "Chocolate", "Vanilla"].map((flavor, index) => (
                    <ItemRow key={index} flavor={flavor} />
                  ))}
                </tbody>
              </table>
              <div className="d-flex justify-content-end">
                <button type="button" className="btn btn-info" onClick={handleAdd}>
                  Calculate
                </button>
              </div>
            </form>
          </div>

          {/* Product List Section */}
          <div className="col-md-5">
            <div className="bg-primary text-white p-3 mb-3 text-center">
              <h2>Added Products</h2>
            </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>
                {items.map((item, index) => (
                  <tr key={index}>
                    <td>
                      <button
                        className="btn btn-warning"
                        onClick={() => handleDelete(index)}
                      >
                        Delete
                      </button>
                    </td>
                    <td>{item.item}</td>
                    <td>{item.price}</td>
                    <td>{item.qty}</td>
                    <td>{item.total}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Bill Section */}
          <div className="col-md-2 text-center">
            <div className="bg-danger text-white p-3 mb-3">
              <h2>Bill</h2>
            </div>
            <input
              type="text"
              className="form-control text-warning bg-dark text-center"
              style={{ fontSize: "24px", fontWeight: "bold" }}
              value={total.toFixed(2)}
              readOnly
            />
            <button className="btn btn-danger mt-3" onClick={handleReset}>
              Reset
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

I attached the video below How to make this System