sms-tps 1.0.0 → 1.0.1

package/frontend-project/src/Component/Product.jsx

@@ -0,0 +1,388 @@
+import React, { useEffect, useState } from "react";
+import {
+  FaClosedCaptioning,
+  FaPlus,
+  FaTimes,
+  FaTimesCircle,
+} from "react-icons/fa";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+const Product = () => {
+  const port = 3400;
+  const API_URL = `http://localhost:${port}/api/product`;
+  const API_URL_W = `http://localhost:${port}/api/warehouse`;
+  const [data, setData] = useState([]);
+  const [dataW, setDataW] = useState([]);
+  const [model, setModel] = useState(false);
+  // About Form
+  const [formData, setFormData] = useState({
+    productCode: "",
+    productName: "",
+    category: "",
+    quantityInStock: "",
+    unitPrice: "",
+    supplierName: "",
+    dateReceived: "",
+    warehouse_id: "",
+  });
+  // About Form
+
+  // About Table
+
+  useEffect(() => {
+    const fecthData = async () => {
+      try {
+        const res = await axios.get(`${API_URL}/get`);
+        if (!res.data.success) {
+          return toast.error(res.data.message);
+        }
+        setData(res.data.product);
+      } catch (error) {
+        alert(error.message);
+      }
+    };
+    fecthData();
+  }, [formData]);
+
+  // About Table
+
+  useEffect(() => {
+    const fecthData = async () => {
+      try {
+        const res = await axios.get(`${API_URL_W}/get`);
+        if (!res.data.success) {
+          return toast.error(res.data.message);
+        }
+        setDataW(res.data.warehouse);
+      } catch (error) {
+        alert(error.message);
+      }
+    };
+    fecthData();
+  }, [formData]);
+
+  // About Form
+
+  const handleFormData = async (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (
+        !formData.productCode ||
+        !formData.productName ||
+        !formData.quantityInStock ||
+        !formData.supplierName ||
+        !formData.unitPrice ||
+        !formData.category ||
+        !formData.dateReceived ||
+        !formData.warehouse_id
+      ) {
+        return toast.error("You Must Fill all Field");
+      }
+
+      const res = await axios.post(`${API_URL}/add`, formData);
+      if (!res.data.success) {
+        return toast.error(res.data.message);
+      }
+      toast.success(res.data.message);
+      setFormData({
+        productCode: "",
+        productName: "",
+        category: "",
+        quantityInStock: "",
+        unitPrice: "",
+        supplierName: "",
+        dateReceived: "",
+        warehouse_id: "",
+      });
+    } catch (error) {
+      toast.error(error.message);
+    }
+    // About Form
+  };
+  return (
+    <div className="p-1 flex flex-col gap-2 w-full ">
+      <div className="bg-white/50 rounded-md px-4 py-2 flex justify-between items-center">
+        <h1 className="md:text-xl font-bold text-indigo-500 text-md">
+          Product
+        </h1>
+        <div
+          className="p-2 text-white/90 rounded-lg bg-green-500 flex items-center gap-2"
+          onClick={() => {
+            setModel(true);
+          }}
+        >
+          <FaPlus /> <p className="md:block hidden">Add Product</p>
+        </div>
+      </div>
+
+      <div className="bg-white/50 p-4 rounded-lg block md:hidden">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          {data.map((o, i) => (
+            <div className="w-full bg-white p-2 rounded-lg" key={i}>
+              <h1 className="text-gray-500">{i + 1}</h1>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">Product Code:</h1>
+                <p className="text-gray-800">{o.productCode}</p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">Product Name:</h1>
+                <p className="text-gray-800">{o.productName}</p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">Category:</h1>
+                <p className="text-gray-800">{o.category}</p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">
+                  Quantity In Stock:
+                </h1>
+                <p className="text-gray-800">{o.quantityInStock}</p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">Unit Price:</h1>
+                <p className="text-gray-800">{o.unitPrice}</p>
+              </div>
+              <div className="flex justify-between gap-2">
+                <h1 className="font-semibold text-indigo-500">
+                  Supplier Name:
+                </h1>
+                <p className="text-gray-800">{o.supplierName}</p>
+              </div>
+              <div className="flex justify-between gap-2">
+                <h1 className="font-semibold text-indigo-500">
+                  Date Received:
+                </h1>
+                <p className="text-gray-800">{o.dateReceived}</p>
+              </div>
+              <div className="flex justify-between gap-2">
+                <h1 className="font-semibold text-indigo-500">
+                  Warehouse Name:
+                </h1>
+                <p className="text-gray-800">{o.warehouse_id?.warehouseName}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="bg-white/50 p-4 md:flex flex-col gap-2 rounded-lg hidden ">
+        <div className="bg-white p-2 rounded-lg">
+          <table className="w-full">
+            <thead>
+              <tr className="text-sm text-indigo-500">
+                <th>No</th>
+                <th>Product Code</th>
+                <th>Product Name</th>
+                <th>Category</th>
+                <th>Quantity In Stock</th>
+                <th>Unit Price</th>
+                <th>Supplier Name</th>
+                <th>Date Received</th>
+                <th>Warehouse Name</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.map((o, i) => (
+                <tr key={i} className="text-sm text-center">
+                  <td className="px-2 p-2">{i + 1}</td>
+                  <td className="px-2">{o.productCode} </td>
+                  <td className="px-2">{o.productName}</td>
+                  <td className="px-2">{o.category}</td>
+                  <td className="px-2">{o.quantityInStock}</td>
+                  <td className="px-2">{o.unitPrice}</td>
+                  <td className="px-2">{o.supplierName}</td>
+                  <td className="px-2">{o.dateReceived}</td>
+                  <td className="px-2">{o.warehouse_id?.warehouseName}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      {model && (
+        <div
+          className="fixed flex items-center justify-center bg-indigo-500/35 w-full inset-0"
+          onClick={() => {
+            setModel(false);
+          }}
+        >
+          <div
+            className="bg-white/95 w-120 p-4 rounded-2xl"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <form
+              onSubmit={handleSubmit}
+              className="flex
+          flex-col gap-4 w-full"
+            >
+              <div className="flex items-center justify-between p-4">
+                <h1 className="text-xl font-semibold text-green-500">
+                  Add Product
+                </h1>
+                <div
+                  className=""
+                  onClick={() => {
+                    setModel(false);
+                  }}
+                >
+                  <FaTimesCircle className="text-3xl text-indigo-500" />
+                </div>
+              </div>
+              <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+                <div className="flex flex-col gap-1">
+                  <label
+                    htmlFor="nationalId"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Product Code
+                  </label>
+                  <input
+                    value={formData.productCode}
+                    name="productCode"
+                    onChange={handleFormData}
+                    type="text"
+                    placeholder="productCode"
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <label
+                    htmlFor="first_name"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Product Name
+                  </label>
+                  <input
+                    value={formData.productName}
+                    onChange={handleFormData}
+                    type="text"
+                    name="productName"
+                    placeholder="productName"
+                    className="px-3 py-1 rounded-md border border- focus:outline-blue-300"
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <label
+                    htmlFor="last_name"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Category
+                  </label>
+                  <input
+                    value={formData.category}
+                    onChange={handleFormData}
+                    type="text"
+                    name="category"
+                    placeholder="category"
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <label
+                    htmlFor="email"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    {" "}
+                    Quantity In Stock
+                  </label>
+                  <input
+                    value={formData.quantityInStock}
+                    onChange={handleFormData}
+                    type="number"
+                    name="quantityInStock"
+                    placeholder="quantityInStock"
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <label
+                    htmlFor="telephone"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Unit Price
+                  </label>
+                  <input
+                    value={formData.unitPrice}
+                    type="number"
+                    onChange={handleFormData}
+                    name="unitPrice"
+                    placeholder="unitPrice"
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <label
+                    htmlFor="address"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Supplier Name
+                  </label>
+                  <input
+                    value={formData.supplierName}
+                    onChange={handleFormData}
+                    type="text"
+                    name="supplierName"
+                    placeholder="Kigali / Rwanda - Kicukiro"
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <label
+                    htmlFor="address"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Date Received
+                  </label>
+                  <input
+                    value={formData.dateReceived}
+                    onChange={handleFormData}
+                    type="datetime-local"
+                    name="dateReceived"
+                    placeholder="dateReceived"
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <label
+                    htmlFor="address"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Date Received
+                  </label>
+                  <select
+                    name="warehouse_id"
+                    value={formData.warehouse_id}
+                    onChange={handleFormData}
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  >
+                    <option value="">Select Warehouse</option>
+                    {dataW.map((w, i) => (
+                      <option key={i} value={w._id}>
+                        {w.warehouseName}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <button
+                type="submit"
+                className="bg-green-500 p-2 text-white/90 font-semibold rounded-md hover:rounded-2xl"
+              >
+                Register Product
+              </button>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Product;

package/frontend-project/src/Component/Report.jsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from "react";
+import {
+  FaClosedCaptioning,
+  FaPlus,
+  FaTimes,
+  FaTimesCircle,
+} from "react-icons/fa";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+const Report = () => {
+  const port = 3400;
+  const API_URL = `http://localhost:${port}/api/warehouse`;
+  const API_URL_L = `http://localhost:${port}/api/product`;
+  const API_URL_T = `http://localhost:${port}/api/transfer`;
+  // End
+  // set Data in State From backend
+  const [data, setData] = useState([]);
+  const [transferData, setTransferData] = useState([]);
+  const [landData, setLandData] = useState([]);
+  // End
+  // About Form
+
+  const fecthData = async () => {
+    try {
+      const res = await axios.get(`${API_URL}/get`);
+      if (!res.data.success) {
+        return toast.error(res.data.message);
+      }
+      setData(res.data.warehouse);
+    } catch (error) {
+      alert(error.message);
+    }
+  };
+
+  const fecthDataL = async () => {
+    try {
+      const res = await axios.get(`${API_URL_L}/get`);
+      if (!res.data.success) {
+        return toast.error(res.data.message);
+      }
+      setLandData(res.data.product);
+    } catch (error) {
+      alert(error.message);
+    }
+  };
+
+  const fecthDataT = async () => {
+    try {
+      const res = await axios.get(`${API_URL_T}/get`);
+      if (!res.data.success) {
+        return toast.error(res.data.message);
+      }
+      setTransferData(res.data.transfer);
+    } catch (error) {
+      toast.error(error.message);
+    }
+  };
+
+  useEffect(() => {
+    fecthDataT();
+    fecthData();
+    fecthDataL();
+  }, []);
+
+
+  const dataReport = data.map((w)=>{
+    const warehouse = w.warehouseName;
+    const totalProduct = landData.filter((p)=>p.warehouse_id?._id === w._id).length
+    const totalInStock = landData.filter(
+      (pr) => pr.warehouse_id?._id === w._id,
+    )[0];
+    const totalOutStock = transferData.filter((t) => t.warehouse_id?._id === w._id)[0];
+    const warehouseLocation = w.warehouseLocation;
+
+    return ({
+      warehouse,
+      totalProduct,
+      InStock: totalInStock?.quantityInStock,
+      OutStock: totalOutStock?.quantityMoved,
+      warehouseLocation
+    });
+  })
+
+  console.log(dataReport)
+
+  // About Table
+  return (
+    <div className="p-1 flex flex-col gap-2 w-full ">
+      <div className="bg-white/50 rounded-md px-4 py-2 flex justify-between items-center">
+        <h1 className="md:text-xl font-bold text-indigo-500 text-md">
+          Project
+        </h1>
+      </div>
+      <div className="bg-white/50 p-4 rounded-lg block md:hidden">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          {dataReport.map((o, i) => (
+            <div className="w-full bg-white p-2 rounded-lg" key={i}>
+              <h1 className="text-gray-500">{i + 1}</h1>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">Warehouse:</h1>
+                <p className="text-gray-800">{o.warehouse}</p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">
+                  Total Product:
+                </h1>
+                <p className="text-gray-800">{o.totalProduct}</p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">In Stock:</h1>
+                <p className="text-gray-800">{o.InStock}</p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">Out Stock:</h1>
+                <p className="text-gray-800">{o.OutStock}</p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">
+                  Warehouse Location:
+                </h1>
+                <p className="text-gray-800">{o.warehouseLocation}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="bg-white/50 p-4 md:flex flex-col gap-2 rounded-lg hidden ">
+        <div className="bg-white p-2 rounded-lg">
+          <table className="w-full">
+            <thead>
+              <tr className="text-sm text-indigo-500">
+                <th>No</th>
+                <th>Warehouse</th>
+                <th>Total Product</th>
+                <th>In Stock</th>
+                <th>Out Stock</th>
+                <th>Warehouse Location</th>
+              </tr>
+            </thead>
+            <tbody>
+              {dataReport.map((o, i) => (
+                <tr key={i} className="text-sm text-center">
+                  <td className="px-2 p-2">{i + 1}</td>
+                  <td className="px-2">{o.warehouse} </td>
+                  <td className="px-2">
+                    {o.totalProduct}
+                  </td>
+                  <td className="px-2">{o.InStock}</td>
+                  <td className="px-2">{o.OutStock}</td>
+                  <td className="px-2">{o.warehouseLocation}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Report;