From 3ada9ea9229ba76d25932708f916844a5a51c7d0 Mon Sep 17 00:00:00 2001
From: Sibunnayak <sibunnayak8480@gmail.com>
Date: Fri, 16 Aug 2024 16:39:42 +0530
Subject: [PATCH] Inventory

---
 src/views/Inventory/Inventory.js | 350 +++++++++++++++++++++++++------
 1 file changed, 286 insertions(+), 64 deletions(-)

diff --git a/src/views/Inventory/Inventory.js b/src/views/Inventory/Inventory.js
index c86fcf3..d899253 100644
--- a/src/views/Inventory/Inventory.js
+++ b/src/views/Inventory/Inventory.js
@@ -8,8 +8,7 @@ import debounce from "lodash.debounce";
 const Inventory = () => {
   const token = isAutheticated();
   const [loading, setLoading] = useState(false);
-  // const [inventoryData, setInventoryData] = useState([]);
-  const [filteredData, setFilteredData] = useState([]);
+  const [inventoryData, setInventoryData] = useState([]);
 
   const nameRef = useRef();
   const startDateRef = useRef();
@@ -31,12 +30,14 @@ const Inventory = () => {
           show: itemPerPage,
           startDate: startDateRef.current?.value || "",
           endDate: endDateRef.current?.value || "",
+          name: nameRef.current?.value || "",
         },
       });
 
       const transformedData =
         response.data?.inventories?.map((entry) => ({
           id: entry._id,
+          uniqueId: entry.uniqueId,
           tradeName:
             entry.addedForData?.shippingAddress?.tradeName ||
             entry.addedForData?.trade_name ||
@@ -51,13 +52,9 @@ const Inventory = () => {
           createdAt: entry.createdAt,
           updatedAt: entry.updatedAt,
         })) || [];
-      
-      // setInventoryData(transformedData);
+
+      setInventoryData(transformedData);
       setTotalData(response.data?.total_data || 0);
-
-      // Apply the filter after data is fetched
-      filterData(transformedData);
-
     } catch (err) {
       const msg = err?.response?.data?.msg || "Something went wrong!";
       swal({
@@ -72,14 +69,6 @@ const Inventory = () => {
     }
   };
 
-  const filterData = (data) => {
-    const tradeName = nameRef.current?.value || "";
-    const filtered = data.filter((entry) =>
-      entry.tradeName.toLowerCase().includes(tradeName.toLowerCase())
-    );
-    setFilteredData(filtered);
-  };
-
   const debouncedSearch = useCallback(
     debounce(() => {
       setCurrentPage(1);
@@ -177,7 +166,7 @@ const Inventory = () => {
                   </div>
 
                   <div className="table-responsive table-shoot mt-3">
-                    <table
+                    {/* <table
                       className="table table-centered table-nowrap"
                       style={{ border: "1px solid" }}
                     >
@@ -206,11 +195,11 @@ const Inventory = () => {
                               Loading...
                             </td>
                           </tr>
-                        ) : filteredData.length > 0 ? (
-                          filteredData.map((entry, i) =>
+                        ) : inventoryData.length > 0 ? (
+                          inventoryData.map((entry, i) =>
                             entry.products.map((product, j) => (
                               <tr key={`${i}-${j}`}>
-                                <td className="text-start">{entry.id}</td>
+                                <td className="text-start">{entry.uniqueId}</td>
                                 <td className="text-start">
                                   {new Date(entry.createdAt).toLocaleString(
                                     "en-IN",
@@ -282,9 +271,215 @@ const Inventory = () => {
                           )
                         )}
                       </tbody>
-                    </table>
-                  </div>
+                    </table> */}
 
+                    <table
+                      className="table table-centered table-nowrap"
+                      style={{
+                        border: "1px solid",
+                        borderCollapse: "collapse",
+                      }} // Ensure borders collapse for clean lines
+                    >
+                      <thead
+                        className="thead-light"
+                        style={{ background: "#ecdddd" }}
+                      >
+                        <tr>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            ID
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Date
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Time
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Trade Name
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            PD/RD
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Product SKU
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Product Name
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Sale
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Inventory
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Actions
+                          </th>
+                        </tr>
+                      </thead>
+
+                      <tbody>
+                        {loading ? (
+                          <tr>
+                            <td
+                              className="text-center"
+                              colSpan="10"
+                              style={{ border: "1px solid" }}
+                            >
+                              Loading...
+                            </td>
+                          </tr>
+                        ) : inventoryData.length > 0 ? (
+                          inventoryData.map((entry, i) =>
+                            entry.products.map((product, j) => (
+                              <tr key={`${i}-${j}`}>
+                                {/* Only show ID, Date, Time, Trade Name, PD/RD, and Actions on the first row of each entry */}
+                                {j === 0 && (
+                                  <>
+                                    <td
+                                      className="text-start"
+                                      rowSpan={entry.products.length}
+                                      style={{ border: "1px solid" }}
+                                    >
+                                      {entry.uniqueId}
+                                    </td>
+                                    <td
+                                      className="text-start"
+                                      rowSpan={entry.products.length}
+                                      style={{ border: "1px solid" }}
+                                    >
+                                      {new Date(entry.createdAt).toLocaleString(
+                                        "en-IN",
+                                        {
+                                          month: "short",
+                                          day: "numeric",
+                                          year: "numeric",
+                                        }
+                                      )}
+                                    </td>
+                                    <td
+                                      className="text-start"
+                                      rowSpan={entry.products.length}
+                                      style={{ border: "1px solid" }}
+                                    >
+                                      {new Date(entry.createdAt).toLocaleString(
+                                        "en-IN",
+                                        {
+                                          hour: "numeric",
+                                          minute: "numeric",
+                                          hour12: true,
+                                        }
+                                      )}
+                                    </td>
+                                    <td
+                                      className="text-start"
+                                      rowSpan={entry.products.length}
+                                      style={{ border: "1px solid" }}
+                                    >
+                                      {entry.tradeName}
+                                    </td>
+                                    <td
+                                      className="text-start"
+                                      rowSpan={entry.products.length}
+                                      style={{ border: "1px solid" }}
+                                    >
+                                      {entry.designation}
+                                    </td>
+                                  </>
+                                )}
+                                {/* Product details */}
+                                <td
+                                  className="text-start"
+                                  style={{ border: "1px solid" }}
+                                >
+                                  {product.SKU}
+                                </td>
+                                <td
+                                  className="text-start"
+                                  style={{ border: "1px solid" }}
+                                >
+                                  {product.ProductName}
+                                </td>
+                                <td
+                                  className="text-start"
+                                  style={{ border: "1px solid" }}
+                                >
+                                  {product.Sale}
+                                </td>
+                                <td
+                                  className="text-start"
+                                  style={{ border: "1px solid" }}
+                                >
+                                  {product.Inventory}
+                                </td>
+                                {/* Actions: only show on the first row of each entry */}
+                                {j === 0 && (
+                                  <td
+                                    className="text-start"
+                                    rowSpan={entry.products.length}
+                                    style={{ border: "1px solid" }}
+                                  >
+                                    <Link
+                                      to={`/inventory/view/${entry.id}`}
+                                      state={{ product }}
+                                    >
+                                      <button
+                                        style={{
+                                          color: "white",
+                                          marginRight: "1rem",
+                                        }}
+                                        type="button"
+                                        className="btn btn-primary btn-sm waves-effect waves-light btn-table mx-1 mt-1"
+                                      >
+                                        View
+                                      </button>
+                                    </Link>
+                                  </td>
+                                )}
+                              </tr>
+                            ))
+                          )
+                        ) : (
+                          <tr className="text-center">
+                            <td colSpan="10" style={{ border: "1px solid" }}>
+                              <h5>No Data Available...</h5>
+                            </td>
+                          </tr>
+                        )}
+                      </tbody>
+                    </table>
+
+                  </div>
                   <div className="row mt-20">
                     <div className="col-sm-12 col-md-6 mb-20">
                       <div
@@ -293,65 +488,92 @@ const Inventory = () => {
                         role="status"
                         aria-live="polite"
                       >
-                        Showing {Math.min(itemPerPage * currentPage, totalData)} of {totalData} entries
+                        Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
+                        {Math.min(currentPage * itemPerPage, totalData)} of{" "}
+                        {totalData} entries
                       </div>
                     </div>
-                    <div className="col-sm-12 col-md-6 text-md-end">
-                      <div
-                        className="dataTables_paginate paging_simple_numbers"
-                        id="datatable_paginate"
-                      >
-                        <ul className="pagination pagination-rounded">
+
+                    <div className="col-sm-12 col-md-6">
+                      <div className="d-flex">
+                        <ul className="pagination ms-auto">
                           <li
-                            className={`paginate_button page-item previous ${currentPage === 1 ? "disabled" : ""
-                              }`}
+                            className={
+                              currentPage === 1
+                                ? "paginate_button page-item previous disabled"
+                                : "paginate_button page-item previous"
+                            }
                           >
-                            <a
-                              href="#"
+                            <span
                               className="page-link"
-                              onClick={() => {
-                                if (currentPage > 1) {
-                                  setCurrentPage((prev) => prev - 1);
-                                }
-                              }}
+                              style={{ cursor: "pointer" }}
+                              onClick={() => setCurrentPage((prev) => prev - 1)}
+                              disabled={loading}
                             >
                               Previous
-                            </a>
+                            </span>
                           </li>
 
-                          {[...Array(Math.ceil(totalData / itemPerPage))].map(
-                            (_, index) => (
-                              <li
-                                key={index}
-                                className={`paginate_button page-item ${index + 1 === currentPage ? "active" : ""
-                                  }`}
+                          {!(currentPage - 1 < 1) && (
+                            <li className="paginate_button page-item">
+                              <span
+                                className="page-link"
+                                style={{ cursor: "pointer" }}
+                                onClick={(e) =>
+                                  setCurrentPage((prev) => prev - 1)
+                                }
+                                disabled={loading}
                               >
-                                <a
-                                  href="#"
-                                  className="page-link"
-                                  onClick={() => setCurrentPage(index + 1)}
-                                >
-                                  {index + 1}
-                                </a>
-                              </li>
-                            )
+                                {currentPage - 1}
+                              </span>
+                            </li>
+                          )}
+
+                          <li className="paginate_button page-item active">
+                            <span
+                              className="page-link"
+                              style={{ cursor: "pointer" }}
+                            >
+                              {currentPage}
+                            </span>
+                          </li>
+
+                          {!(
+                            (currentPage + 1) * itemPerPage - itemPerPage >
+                            totalData - 1
+                          ) && (
+                            <li className="paginate_button page-item ">
+                              <span
+                                className="page-link"
+                                style={{ cursor: "pointer" }}
+                                onClick={() => {
+                                  setCurrentPage((prev) => prev + 1);
+                                }}
+                                disabled={loading}
+                              >
+                                {currentPage + 1}
+                              </span>
+                            </li>
                           )}
 
                           <li
-                            className={`paginate_button page-item next ${currentPage === Math.ceil(totalData / itemPerPage) ? "disabled" : ""
-                              }`}
+                            className={
+                              !(
+                                (currentPage + 1) * itemPerPage - itemPerPage >
+                                totalData - 1
+                              )
+                                ? "paginate_button page-item next"
+                                : "paginate_button page-item next disabled"
+                            }
                           >
-                            <a
-                              href="#"
+                            <span
                               className="page-link"
-                              onClick={() => {
-                                if (currentPage < Math.ceil(totalData / itemPerPage)) {
-                                  setCurrentPage((prev) => prev + 1);
-                                }
-                              }}
+                              style={{ cursor: "pointer" }}
+                              onClick={() => setCurrentPage((prev) => prev + 1)}
+                              disabled={loading}
                             >
                               Next
-                            </a>
+                            </span>
                           </li>
                         </ul>
                       </div>