sms-tps 1.0.0 → 1.0.1

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

@@ -0,0 +1,442 @@
+import React, { useEffect, useState } from "react";
+import {
+  FaClosedCaptioning,
+  FaPlus,
+  FaTimes,
+  FaTimesCircle,
+} from "react-icons/fa";
+import { MdDelete, MdEdit } from "react-icons/md";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+const Transfer = () => {
+  const port = 3400;
+  // Api to use here replace yours
+  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
+  // Model Show And Needed here
+  const [model, setModel] = useState(false);
+  const [edit, setEdit] = useState(null);
+  // End
+  // About Form
+  const [formData, setFormData] = useState({
+       warehouse_id: "",
+       product_id: "",
+       transactionDate: "",
+       quantityMoved: "",
+       transactionType:""
+  });
+  const handleFormData = async (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+  // End
+// About Tables
+  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 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 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);
+    }
+  };
+  // End
+// About Form
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    console.log(formData)
+    try {
+      if (
+        !formData.warehouse_id ||
+        !formData.product_id ||
+        !formData.quantityMoved ||
+        !formData.transactionDate ||
+        !formData.transactionType
+      ) {
+        return toast.error("You Must Fill all Field");
+      }
+      // About Edit/Update
+      if (edit) {
+        const res = await axios.put(`${API_URL_T}/update/${edit}`, formData);
+        if (!res) {
+          return toast.error(res.data.message);
+        }
+        setModel(false)
+        toast.success(res.data.message);
+        setFormData({
+          warehouse_id: "",
+          product_id: "",
+          transactionDate: "",
+          quantityMoved: "",
+          transactionType: "",
+        });
+        return;
+      }
+      // End
+
+      const res = await axios.post(`${API_URL_T}/add`, formData);
+      if (!res.data.success) {
+        return toast.error(res.data.message);
+      }
+      toast.success(res.data.message);
+      setFormData({
+        warehouse_id: "",
+        product_id: "",
+        transactionDate: "",
+        quantityMoved: "",
+        transactionType: "",
+      });
+    } catch (error) {
+      toast.error(error.message);
+    }
+  };
+
+  // End
+
+  // About Table
+
+
+  useEffect(() => {
+    fecthDataT();
+    fecthData();
+    fecthDataL();
+  }, [formData]);
+  // End
+
+  // About Edit / Update
+
+  const handleUpdate = (o) => {
+    setModel(true);
+    setFormData({
+      warehouse_id: o.warehouse_id?._id,
+      product_id: o.product_id?._id,
+      transactionDate: o.transactionDate,
+      quantityMoved: o.quantityMoved,
+      transactionType: o.transactionType,
+    });
+    setEdit(o._id);
+  };
+
+  // End
+
+  // About Delete
+  const handleRemove = async(id)=>{
+    try {
+      if(!confirm("Are You Sure You want To Delete Tranfer Record")) return;
+      const res =await axios.delete(`${API_URL_T}/delete/${id}`)
+      if(!res.data.success){
+        return toast.error(res.data.message)
+      }
+      fecthDataT()
+      return toast.success(res.data.message)
+    } catch (error) {
+      toast.error(error.message)
+    }
+  }
+  // End
+
+
+ const filterData = landData.filter((p)=>p.warehouse_id?._id === formData.warehouse_id)
+
+
+  // End
+  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">
+          Transaction
+        </h1>
+        <div
+          className="p-2 text-white/90 rounded-lg bg-green-500 flex items-center gap-2 cursor-pointer"
+          onClick={() => {
+            setModel(true);
+            setEdit(null)
+            setFormData({
+              warehouse_id: "",
+              product_id: "",
+              transactionDate: "",
+              quantityMoved: "",
+              transactionType: "",
+            });
+          }}
+        >
+          <FaPlus /> <p className="md:block hidden">Declare Transfer</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">
+          {transferData.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 Name:
+                </h1>
+                <p className="text-gray-800">
+                  <b>{o.warehouse_id?.warehouseName}</b>
+                </p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">Product Name:</h1>
+                <p className="text-gray-800 capitalize">
+                  {o.product_id?.productName}
+                </p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500 capitalize">
+                  Transaction Date:
+                </h1>
+                <p className="text-gray-800">
+                  {new Date(o.transactionDate).toLocaleString()}
+                </p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500 capitalize">
+                  Quantity Moved:
+                </h1>
+                <p className="text-gray-800 capitalize">{o.quantityMoved}</p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">
+                  Transaction Type:
+                </h1>
+                <p className="text-gray-800 capitalize">{o.transactionType}</p>
+              </div>
+              <div className="flex gap-2 items-center justify-evenly py-2">
+                <button
+                  onClick={() => handleUpdate(o)}
+                  className="w-50 py-1 bg-blue-500 rounded-lg text-md font-semibold text-white/90"
+                >
+                  Update
+                </button>
+                <button
+                  onClick={() => handleRemove(o._id)}
+                  className="w-50 py-1 bg-red-500 rounded-lg text-white/90 font-semibold text-md"
+                >
+                  Delete
+                </button>
+              </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 Name</th>
+                <th>Product Name</th>
+                <th>Transaction Date</th>
+                <th>Quantity Moved</th>
+                <th>Transaction Type</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {transferData.map((o, i) => (
+                <tr key={i} className="text-sm text-center capitalize">
+                  <td className="px-2 p-2">{i + 1}</td>
+                  <td className="px-2">{o.warehouse_id?.warehouseName}</td>
+
+                  <td className="px-2 capitalize">
+                    {o.product_id?.productName}
+                  </td>
+                  <td className="px-2">
+                    {new Date(o.transactionDate).toLocaleString()}
+                  </td>
+                  <td className="px-2 capitalize">{o.quantityMoved}</td>
+                  <td className="px-2 capitalize">{o.transactionType}</td>
+                  <td>
+                    <div className="flex gap-2 items-center justify-center py-2 text-lg">
+                      <MdEdit
+                        onClick={() => handleUpdate(o)}
+                        className="hover:bg-gray-200 text-2xl p-1 rounded-full cursor-pointer text-blue-500"
+                      />
+                      <MdDelete
+                        onClick={() => handleRemove(o._id)}
+                        className="hover:bg-gray-200 text-2xl p-1 rounded-full cursor-pointer  text-red-500"
+                      />
+                    </div>
+                  </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">
+                  Transfer Application Form
+                </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="parcelId"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Warehouse Name
+                  </label>
+                  <select
+                    value={formData.warehouse_id}
+                    onChange={handleFormData}
+                    name="warehouse_id"
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  >
+                    <option value="">Select Warehouse</option>
+                    {data.map((o, i) => (
+                      <option key={i} value={o._id}>
+                        {o.warehouseName}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="flex flex-col gap-1">
+                  <label
+                    htmlFor="parcelId"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Product Name
+                  </label>
+                  <select
+                    value={formData.product_id}
+                    onChange={handleFormData}
+                    name="product_id"
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  >
+                    <option value="">Select Product</option>
+                    {filterData.map((o, i) => (
+                      <option key={i} value={o._id}>
+                        {o.productName}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="flex flex-col gap-1">
+                  <label
+                    htmlFor="transfer_date"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Quantity Moved
+                  </label>
+                  <input
+                    value={formData.quantityMoved}
+                    onChange={handleFormData}
+                    type="number"
+                    name="quantityMoved"
+                    placeholder="quantityMoved"
+                    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="transfer_date"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Transaction Date
+                  </label>
+                  <input
+                    value={formData.transactionDate}
+                    onChange={handleFormData}
+                    type="datetime-local"
+                    name="transactionDate"
+                    placeholder="KtransactionDate"
+                    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="transfer_date"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Transaction Type
+                  </label>
+                  <input
+                    value={formData.transactionType}
+                    onChange={handleFormData}
+                    type="text"
+                    name="transactionType"
+                    placeholder="transactionType"
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  />
+                </div>
+              </div>
+              <button
+                type="submit"
+                className="bg-green-500 p-2 text-white/90 font-semibold rounded-md hover:rounded-2xl"
+              >
+                Register Transfer
+              </button>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Transfer;

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

@@ -0,0 +1,238 @@
+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 Warehouse = () => {
+  const port = 3400
+  const API_URL = `http://localhost:${port}/api/warehouse`;
+  const [data, setData] = useState([]);
+  const [model, setModel] = useState(false);
+  // About Form
+  const [formData, setFormData] = useState({
+    warehouseCode: "",
+    warehouseName: "",
+    warehouseLocation:""
+  });
+  // 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.warehouse);
+      } catch (error) {
+        alert(error.message);
+      }
+    };
+    fecthData();
+  }, [formData]);
+
+  // About Table
+
+  // About Form
+
+  const handleFormData = async (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (
+        !formData.warehouseCode ||
+        !formData.warehouseName ||
+        !formData.warehouseLocation 
+
+      ) {
+        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({
+        warehouseCode: "",
+        warehouseName: "",
+        warehouseLocation: "",
+      });
+    } 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">
+          Warehouse
+        </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 warehouse</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">
+                  Warehouse Code:
+                </h1>
+                <p className="text-gray-800">{o.warehouseCode}</p>
+              </div>
+              <div className="flex justify-between">
+                <h1 className="font-semibold text-indigo-500">
+                  Warehouse Name:
+                </h1>
+                <p className="text-gray-800">{o.warehouseName}</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 Code</th>
+                <th>Warehouse Name</th>
+                <th>Warehouse Location</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.warehouseCode} </td>
+                  <td className="px-2">{o.warehouseName}</td>
+                  <td className="px-2">{o.warehouseLocation}</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 Warehouse
+                </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"
+                  >
+                    Warehouse Code
+                  </label>
+                  <input
+                    value={formData.warehouseCode}
+                    name="warehouseCode"
+                    onChange={handleFormData}
+                    type="text"
+                    placeholder="warehouseCode"
+                    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"
+                  >
+                    Warehouse Name
+                  </label>
+                  <input
+                    value={formData.warehouseName}
+                    onChange={handleFormData}
+                    type="text"
+                    name="warehouseName"
+                    placeholder="warehouseName"
+                    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="last_name"
+                    className="font-semibold text-md text-blue-400"
+                  >
+                    Warehouse Location
+                  </label>
+                  <input
+                    value={formData.warehouseLocation}
+                    onChange={handleFormData}
+                    type="text"
+                    name="warehouseLocation"
+                    placeholder="warehouseLocation"
+                    className="px-3 py-1 rounded-md border border-blue-500 focus:outline-blue-300"
+                  />
+                </div>
+              </div>
+              <button
+                type="submit"
+                className="bg-green-500 p-2 text-white/90 font-semibold rounded-md hover:rounded-2xl"
+              >
+                Register Warehouse
+              </button>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Warehouse;