Fish Inventory Management with React

Introduction to Fish Inventory Management

In the aquaculture industry, managing fish inventory is crucial for ensuring operational efficiency and sustainable practices. A fish inventory management system assists businesses in keeping accurate records of fish stock, monitoring growth rates, and making informed decisions for breeding and harvesting.

Add the bootstrap style on Index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

App.jsx

import React, { useState } from "react";

const App = () => {
  const [option, setOption] = useState(""); // Separate state for option
  const [qty, setQty] = useState(""); // Separate state for qty
  const [total, setTotal] = useState(null);


  const calculate = () => {
    setError(""); // Clear any previous errors

    const quantity = parseFloat(qty); // Convert qty to a number
    if (isNaN(quantity) || quantity <= 0) {
      setError("Please enter a valid quantity.");
      return;
    }

    let result = 0;
    if (option === "1") {
      // GR calculation
      result = (quantity / 1000) * 140;
    } else if (option === "2") {
      // KG calculation
      result = quantity * 140;
    } else {
      setError("Invalid selection.");
      return;
    }

    setTotal(result.toFixed(2)); // Display total with two decimal places
  };

  const reset = () => {
    setOption("");
    setQty("");
    setTotal(null);
    setError("");
  };

  return (
    <div
      className="container"
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <div
        style={{
          width: "350px",
          backgroundColor: "#fff",
          padding: "20px",
          borderRadius: "8px",
          boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
        }}
      >
        <div
          style={{
            backgroundColor: "blue",
            padding: "10px",
            textAlign: "center",
            borderRadius: "4px 4px 0 0",
            color: "#fff",
            fontWeight: "bold",
          }}
        >
          Fish Inventory
        </div>


        <div style={{ marginTop: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            Fish
          </label>
          <select
            className="form-control"
            value={option}
            onChange={(e) => setOption(e.target.value)}
            style={{
              width: "100%",
              padding: "8px",
              border: "1px solid #ccc",
              borderRadius: "4px",
            }}
          >
            <option value="">Please Select</option>
            <option value="1">GR</option>
            <option value="2">KG</option>
          </select>
        </div>

        <div style={{ marginTop: "10px" }}>
          <label
            style={{
              display: "block",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            Qty
          </label>
          <input
            type="text"
            className="form-control"
            placeholder="Qty"
            value={qty}
            onChange={(e) => setQty(e.target.value)}
            style={{
              width: "100%",
              padding: "8px",
              border: "1px solid #ccc",
              borderRadius: "4px",
            }}
          />
        </div>

        <div
          style={{
            marginTop: "20px",
            display: "flex",
            justifyContent: "space-between",
          }}
        >
          <button
            type="button"
            className="btn btn-warning-mt-4"
            onClick={calculate}
            style={{
              padding: "8px 12px",
              backgroundColor: "#28a745",
              color: "#fff",
              border: "none",
              borderRadius: "4px",
              cursor: "pointer",
            }}
          >
            Calculate
          </button>

          <button
            type="button"
            className="btn btn-warning-mt-4"
            onClick={reset}
            style={{
              padding: "8px 12px",
              backgroundColor: "#ffc107",
              color: "#000",
              border: "none",
              borderRadius: "4px",
              cursor: "pointer",
            }}
          >
            Reset
          </button>
        </div>

        {total !== null && (
          <div
            style={{
              marginTop: "20px",
              fontSize: "16px",
              fontWeight: "bold",
              textAlign: "center",
            }}
          >
            Total: ${total}
          </div>
        )}
      </div>
    </div>
  );
};

export default App;

I have attached video below go through the video to make the project simple way

admin