From a9d1ba08ddc9018bb72e45b79c1754197b418947 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 14 Oct 2025 15:44:36 +0530
Subject: [PATCH] UI updation in Attendance Toady's and Regularization tab.

---
 src/components/Activities/Attendance.jsx     | 270 ++++++++++---------
 src/components/Activities/Regularization.jsx | 210 ++++++++-------
 2 files changed, 242 insertions(+), 238 deletions(-)

diff --git a/src/components/Activities/Attendance.jsx b/src/components/Activities/Attendance.jsx
index 0f726521..1e298df0 100644
--- a/src/components/Activities/Attendance.jsx
+++ b/src/components/Activities/Attendance.jsx
@@ -110,144 +110,146 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
   }, [employeeHandler]);
 
 
-  
+
   return (
     <>
-      <div
-        className="table-responsive text-nowrap h-100"
-        style={{ minHeight: "200px" }}   // Ensures fixed height
-      >
-        <div className="d-flex text-start align-items-center py-2">
-          <strong>Date : {formatUTCToLocalTime(todayDate)}</strong>
-          <div className="form-check form-switch text-start m-0 ms-5">
-            <input
-              type="checkbox"
-              className="form-check-input"
-              role="switch"
-              id="inactiveEmployeesCheckbox"
-              disabled={isFetching}
-              checked={ShowPending}
-              onChange={(e) => setShowPending(e.target.checked)}
-            />
-            <label className="form-check-label ms-0">Show Pending</label>
-          </div>
-        </div>
-        {attLoading ? (
-          <div>Loading...</div>
-        ) : currentItems?.length > 0 ? (
-          <>
-            <table className="table ">
-              <thead>
-                <tr className="border-top-1">
-                  <th colSpan={2}>Name</th>
-                  <th>Role</th>
-                  {/* <th>Organization</th> */}
-                  <th>
-                    <i className="bx bxs-down-arrow-alt text-success"></i>
-                    Check-In
-                  </th>
-                  <th>
-                    <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
-                  </th>
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody className="table-border-bottom-0 ">
-                {currentItems &&
-                  currentItems
-                    .sort((a, b) => {
-                      const checkInA = a?.checkInTime
-                        ? new Date(a.checkInTime)
-                        : new Date(0);
-                      const checkInB = b?.checkInTime
-                        ? new Date(b.checkInTime)
-                        : new Date(0);
-                      return checkInB - checkInA;
-                    })
-                    .map((item) => (
-                      <tr key={item.employeeId}>
-                        <td colSpan={2}>
-                          <div className="d-flex justify-content-start align-items-center">
-                            <Avatar
-                              firstName={item.firstName}
-                              lastName={item.lastName}
-                            ></Avatar>
-                            <div className="d-flex flex-column">
-                              <a
-                                onClick={(e) =>
-                                  navigate(
-                                    `/employee/${item.employeeId}?for=attendance`
-                                  )
-                                }
-                                className="text-heading text-truncate cursor-pointer"
-                              >
-                                <span className="fw-normal">
-                                  {item.firstName} {item.lastName}
-                                </span>
-                              </a>
-                            </div>
-                          </div>
-                        </td>
-
-                        <td>{item.jobRoleName}</td>
-                        {/* <td>{item.organizationName || "--"}</td> */}
-
-                        <td>
-                          {item.checkInTime
-                            ? convertShortTime(item.checkInTime)
-                            : "--"}
-                        </td>
-                        <td>
-                          {item.checkOutTime
-                            ? convertShortTime(item.checkOutTime)
-                            : "--"}
-                        </td>
-
-                        <td className="text-center">
-                          <RenderAttendanceStatus
-                            attendanceData={item}
-                            handleModalData={handleModalData}
-                            Tab={1}
-                            currentDate={null}
-                          />
-                        </td>
-                      </tr>
-                    ))}
-                {!attendance && (
-                  <tr>
-                    <td
-                      colSpan={7}
-                      className="text-center text-secondary"
-                      style={{ height: "200px" }}
-                    >
-                      No employees assigned to the project!
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-
-
-            {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
-              
-              <Pagination
-                currentPage={currentPage}
-                totalPages={totalPages}
-                onPageChange={paginate}
+      <div>
+        <div
+          className="table-responsive text-nowrap h-100"
+          style={{ minHeight: "200px" }}   // Ensures fixed height
+        >
+          <div className="d-flex text-start align-items-center py-2">
+            <strong>Date : {formatUTCToLocalTime(todayDate)}</strong>
+            <div className="form-check form-switch text-start m-0 ms-5">
+              <input
+                type="checkbox"
+                className="form-check-input"
+                role="switch"
+                id="inactiveEmployeesCheckbox"
+                disabled={isFetching}
+                checked={ShowPending}
+                onChange={(e) => setShowPending(e.target.checked)}
               />
-            )}
-          </>
-        ) : (
-          <div
-            className="d-flex justify-content-center align-items-center text-muted"
-            style={{ height: "200px" }}
-          >
-            {searchTerm
-              ? "No results found for your search."
-              : attendanceList.length === 0
-                ? "No employees assigned to the project."
-                : "No pending records available."}
+              <label className="form-check-label ms-0">Show Pending</label>
+            </div>
           </div>
+          {attLoading ? (
+            <div>Loading...</div>
+          ) : currentItems?.length > 0 ? (
+            <>
+              <table className="table ">
+                <thead>
+                  <tr className="border-top-1">
+                    <th colSpan={2}>Name</th>
+                    <th>Role</th>
+                    {/* <th>Organization</th> */}
+                    <th>
+                      <i className="bx bxs-down-arrow-alt text-success"></i>
+                      Check-In
+                    </th>
+                    <th>
+                      <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
+                    </th>
+                    <th>Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="table-border-bottom-0 ">
+                  {currentItems &&
+                    currentItems
+                      .sort((a, b) => {
+                        const checkInA = a?.checkInTime
+                          ? new Date(a.checkInTime)
+                          : new Date(0);
+                        const checkInB = b?.checkInTime
+                          ? new Date(b.checkInTime)
+                          : new Date(0);
+                        return checkInB - checkInA;
+                      })
+                      .map((item) => (
+                        <tr key={item.employeeId}>
+                          <td colSpan={2}>
+                            <div className="d-flex justify-content-start align-items-center">
+                              <Avatar
+                                firstName={item.firstName}
+                                lastName={item.lastName}
+                              ></Avatar>
+                              <div className="d-flex flex-column">
+                                <a
+                                  onClick={(e) =>
+                                    navigate(
+                                      `/employee/${item.employeeId}?for=attendance`
+                                    )
+                                  }
+                                  className="text-heading text-truncate cursor-pointer"
+                                >
+                                  <span className="fw-normal">
+                                    {item.firstName} {item.lastName}
+                                  </span>
+                                </a>
+                              </div>
+                            </div>
+                          </td>
+
+                          <td>{item.jobRoleName}</td>
+                          {/* <td>{item.organizationName || "--"}</td> */}
+
+                          <td>
+                            {item.checkInTime
+                              ? convertShortTime(item.checkInTime)
+                              : "--"}
+                          </td>
+                          <td>
+                            {item.checkOutTime
+                              ? convertShortTime(item.checkOutTime)
+                              : "--"}
+                          </td>
+
+                          <td className="text-center">
+                            <RenderAttendanceStatus
+                              attendanceData={item}
+                              handleModalData={handleModalData}
+                              Tab={1}
+                              currentDate={null}
+                            />
+                          </td>
+                        </tr>
+                      ))}
+                  {!attendance && (
+                    <tr>
+                      <td
+                        colSpan={7}
+                        className="text-center text-secondary"
+                        style={{ height: "200px" }}
+                      >
+                        No employees assigned to the project!
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+
+
+
+            </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center text-muted"
+              style={{ height: "200px" }}
+            >
+              {searchTerm
+                ? "No results found for your search."
+                : attendanceList.length === 0
+                  ? "No employees assigned to the project."
+                  : "No pending records available."}
+            </div>
+          )}
+        </div>
+        {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={paginate}
+          />
         )}
       </div>
     </>
diff --git a/src/components/Activities/Regularization.jsx b/src/components/Activities/Regularization.jsx
index 0d6364a4..fbf1cddd 100644
--- a/src/components/Activities/Regularization.jsx
+++ b/src/components/Activities/Regularization.jsx
@@ -22,18 +22,18 @@ const Regularization = ({ handleRequest, searchTerm, projectId, organizationId,
   const { regularizes, loading, error, refetch } =
     useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
 
-useEffect(() => {
-  if (regularizes && regularizes.length) {
-    setregularizedList((prev) => {
-      const prevIds = prev.map((i) => i.id).join(",");
-      const newIds = regularizes.map((i) => i.id).join(",");
-      if (prevIds !== newIds) {
-        return regularizes;
-      }
-      return prev;
-    });
-  }
-}, [regularizes]);
+  useEffect(() => {
+    if (regularizes && regularizes.length) {
+      setregularizedList((prev) => {
+        const prevIds = prev.map((i) => i.id).join(",");
+        const newIds = regularizes.map((i) => i.id).join(",");
+        if (prevIds !== newIds) {
+          return regularizes;
+        }
+        return prev;
+      });
+    }
+  }, [regularizes]);
 
 
   const sortByName = (a, b) => {
@@ -132,108 +132,110 @@ useEffect(() => {
 
 
   return (
-    <div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
-      {loading ? (
-        <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
-          <p className="text-secondary">Loading...</p>
-        </div>
-      ) : currentItems?.length > 0 ? (
-        <table className="table mb-0">
-          <thead>
-            <tr>
-              <th colSpan={2}>Name</th>
-              <th>Date</th>
-              {/* <th>Organization</th> */}
-              <th>
-                <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
-              </th>
-              <th>
-                <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
-              </th>
+    <div>
+      <div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
+        {loading ? (
+          <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
+            <p className="text-secondary">Loading...</p>
+          </div>
+        ) : currentItems?.length > 0 ? (
+          <table className="table mb-0">
+            <thead>
+              <tr>
+                <th colSpan={2}>Name</th>
+                <th>Date</th>
+                {/* <th>Organization</th> */}
+                <th>
+                  <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
+                </th>
+                <th>
+                  <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
+                </th>
 
-              <th>Request By</th>
-              <th>Requested At</th>
-              <th>Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            {currentItems?.map((att, index) => (
-              <tr key={index}>
-                <td colSpan={2}>
-                  <div className="d-flex justify-content-start align-items-center">
-                    <Avatar
-                      firstName={att.firstName}
-                      lastName={att.lastName}
-                    />
-                    <div className="d-flex flex-column">
-                      {/* <a href="#" className="text-heading text-truncate">
+                <th>Request By</th>
+                <th>Requested At</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {currentItems?.map((att, index) => (
+                <tr key={index}>
+                  <td colSpan={2}>
+                    <div className="d-flex justify-content-start align-items-center">
+                      <Avatar
+                        firstName={att.firstName}
+                        lastName={att.lastName}
+                      />
+                      <div className="d-flex flex-column">
+                        {/* <a href="#" className="text-heading text-truncate">
                         <span className="fw-normal">
                           {att.firstName} {att.lastName}
                         </span>
                       </a> */}
-                      <a
-                        onClick={() =>
-                          navigate(`/employee/${att.employeeId}?for=attendance`)
-                        }
-                        className="text-heading text-truncate cursor-pointer"
-                      >
-                        <span className="fw-normal">
-                          {att.firstName} {att.lastName}
-                        </span>
-                      </a>
+                        <a
+                          onClick={() =>
+                            navigate(`/employee/${att.employeeId}?for=attendance`)
+                          }
+                          className="text-heading text-truncate cursor-pointer"
+                        >
+                          <span className="fw-normal">
+                            {att.firstName} {att.lastName}
+                          </span>
+                        </a>
+                      </div>
                     </div>
-                  </div>
-                </td>
+                  </td>
 
-                <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
+                  <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
 
-                {/* <td>{att.organizationName || "--"}</td> */}
+                  {/* <td>{att.organizationName || "--"}</td> */}
 
-                <td>{convertShortTime(att.checkInTime)}</td>
-                <td>
-                  {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
-                </td>
-                <td>
-                  {att.requestedBy
-                    ? `${att.requestedBy?.firstName} ${att.requestedBy?.lastName}`
-                    : "--"}
-                </td>
-                <td>
-                  {att.requestedAt
-                    ? moment(att.requestedAt).format("DD-MMM-YYYY")
-                    : "--"}
-                </td>
-                <td className="text-center ">
-                  <RegularizationActions
-                    attendanceData={att}
-                    handleRequest={handleRequest}
-                    refresh={refetch}
-                  />
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+                  <td>{convertShortTime(att.checkInTime)}</td>
+                  <td>
+                    {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
+                  </td>
+                  <td>
+                    {att.requestedBy
+                      ? `${att.requestedBy?.firstName} ${att.requestedBy?.lastName}`
+                      : "--"}
+                  </td>
+                  <td>
+                    {att.requestedAt
+                      ? moment(att.requestedAt).format("DD-MMM-YYYY")
+                      : "--"}
+                  </td>
+                  <td className="text-center ">
+                    <RegularizationActions
+                      attendanceData={att}
+                      handleRequest={handleRequest}
+                      refresh={refetch}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
 
-      ) : (
-        <div
-          className="d-flex justify-content-center align-items-center"
-          style={{ height: "200px" }}
-        >
-          <span className="text-secondary">
-            {searchTerm
-              ? "No results found for your search."
-              : "No Requests Found !"}
-          </span>
-        </div>
-      )}
-      {!loading && totalPages > 1 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={paginate}
-        />
-      )}
+        ) : (
+          <div
+            className="d-flex justify-content-center align-items-center"
+            style={{ height: "200px" }}
+          >
+            <span className="text-secondary">
+              {searchTerm
+                ? "No results found for your search."
+                : "No Requests Found !"}
+            </span>
+          </div>
+        )}
+      </div>
+        {!loading && totalPages > 1 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={paginate}
+          />
+        )}
     </div>
   );
 };