From dc4e48ad3bc6e5c32b041e60c1ed9838215db1c1 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 14 Oct 2025 14:51:57 +0530
Subject: [PATCH] Changes in Employee list at pagination and at mobile view
 then scrollbar is shown.

---
 .../DailyProgressRport/TaskReportList.jsx     | 203 +++++++++---------
 src/components/Directory/ListViewContact.jsx  |  13 +-
 src/components/Expenses/ExpenseList.jsx       |  34 ++-
 src/pages/employee/EmployeeList.jsx           |   9 +-
 4 files changed, 129 insertions(+), 130 deletions(-)

diff --git a/src/components/DailyProgressRport/TaskReportList.jsx b/src/components/DailyProgressRport/TaskReportList.jsx
index 78af8df3..c47f46c4 100644
--- a/src/components/DailyProgressRport/TaskReportList.jsx
+++ b/src/components/DailyProgressRport/TaskReportList.jsx
@@ -29,7 +29,7 @@ const TaskReportList = () => {
   const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
   const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
 
-  const { service, openModal, closeModal,filter } = useDailyProgrssContext();
+  const { service, openModal, closeModal, filter } = useDailyProgrssContext();
   const selectedProject = useSelectedProject();
   const { projectNames } = useProjectName();
 
@@ -37,7 +37,7 @@ const TaskReportList = () => {
     selectedProject,
     ITEMS_PER_PAGE,
     currentPage,
-    service,filter
+    service, filter
   );
 
   const ProgrssReportColumn = [
@@ -192,109 +192,114 @@ const TaskReportList = () => {
   if (isLoading) return <TaskReportListSkeleton />;
   if (isError) return <div>Loading....</div>;
   return (
-    <div className="mt-2 table-responsive text-nowrap">
-      <table className="table">
-        <thead>
-          <tr>
-            <th className="text-start">Activity</th>
-            <th>
-              <span>
-                Total Pending{" "}
-                <HoverPopup
-                  title="Total Pending Task"
-                  content={<p>This shows the total pending tasks for each activity on that date.</p>}
-                >
-                  <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
-                </HoverPopup>
-              </span>
-            </th>
-            <th>
-              <span>
-                Reported/Planned{" "}
-                <HoverPopup
-                  title="Reported and Planned Task"
-                  content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
-                >
-                  <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
-                </HoverPopup>
-              </span>
-            </th>
-            <th>Assign Date</th>
-            <th>Team</th>
-            <th className="text-center">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {groupedTasks.length === 0 && (
+    <div>
+      <div className="mt-2 table-responsive text-nowrap">
+        <table className="table">
+          <thead>
             <tr>
-              <td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
-                No reports available
-              </td>
+              <th className="text-start">Activity</th>
+              <th>
+                <span>
+                  Total Pending{" "}
+                  <HoverPopup
+                    title="Total Pending Task"
+                    content={<p>This shows the total pending tasks for each activity on that date.</p>}
+                  >
+                    <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
+                  </HoverPopup>
+                </span>
+              </th>
+              <th>
+                <span>
+                  Reported/Planned{" "}
+                  <HoverPopup
+                    title="Reported and Planned Task"
+                    content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
+                  >
+                    <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
+                  </HoverPopup>
+                </span>
+              </th>
+              <th>Assign Date</th>
+              <th>Team</th>
+              <th className="text-center">Actions</th>
             </tr>
-          )}
-
-          {groupedTasks.map(({ date, tasks }) => (
-            <React.Fragment key={date}>
-              <tr className="table-row-header text-start">
-                <td colSpan={6}>
-                  <strong>{formatUTCToLocalTime(date)}</strong>
+          </thead>
+          <tbody>
+            {groupedTasks.length === 0 && (
+              <tr>
+                <td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
+                  No reports available
                 </td>
               </tr>
-              {tasks.map((task, idx) => (
-                <tr key={task.id || idx}>
-                  <td className="flex-wrap text-start">
-                    <div>
-                      {task.workItem.activityMaster?.activityName || "No Activity Name"}
-                    </div>
-                    <div className="text-sm py-2">
-                      {task.workItem.workArea?.floor?.building?.name} ›{" "}
-                      {task.workItem.workArea?.floor?.floorName} ›{" "}
-                      {task.workItem.workArea?.areaName}
-                    </div>
-                  </td>
-                  <td>
-                    {formatNumber(task.workItem.plannedWork)}
-                  </td>
-                  <td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
-                  <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
-                  <td className="text-center">{renderTeamMembers(task, idx)}</td>
-                  <td className="text-center">
-                    <div className="d-flex justify-content-end gap-2">
-                      {ReportTaskRights && !task.reportedDate && (
-                        <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
-                          Report
-                        </button>
-                      )}
-                      {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
-                        <button
-                          className="btn btn-xs btn-warning"
-                          onClick={() => openModal("comments", { task, isActionAllow: true })}
-                        >
-                          QC
-                        </button>
-                      )}
-                      <button
-                        className="btn btn-xs btn-primary"
-                        onClick={() => openModal("comments", { task, isActionAllow: false })}
-                      >
-                        Comment
-                      </button>
-                    </div>
+            )}
+
+            {groupedTasks.map(({ date, tasks }) => (
+              <React.Fragment key={date}>
+                <tr className="table-row-header text-start">
+                  <td colSpan={6}>
+                    <strong>{formatUTCToLocalTime(date)}</strong>
                   </td>
                 </tr>
-              ))}
-            </React.Fragment>
-          ))}
-        </tbody>
-      </table>
-      {data?.data?.length > 0 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={data.totalPages}
-          onPageChange={paginate}
-        />
-      )}
-    </div>
+                {tasks.map((task, idx) => (
+                  <tr key={task.id || idx}>
+                    <td className="flex-wrap text-start">
+                      <div>
+                        {task.workItem.activityMaster?.activityName || "No Activity Name"}
+                      </div>
+                      <div className="text-sm py-2">
+                        {task.workItem.workArea?.floor?.building?.name} ›{" "}
+                        {task.workItem.workArea?.floor?.floorName} ›{" "}
+                        {task.workItem.workArea?.areaName}
+                      </div>
+                    </td>
+                    <td>
+                      {formatNumber(task.workItem.plannedWork)}
+                    </td>
+                    <td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
+                    <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
+                    <td className="text-center">{renderTeamMembers(task, idx)}</td>
+                    <td className="text-center">
+                      <div className="d-flex justify-content-end gap-2">
+                        {ReportTaskRights && !task.reportedDate && (
+                          <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
+                            Report
+                          </button>
+                        )}
+                        {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
+                          <button
+                            className="btn btn-xs btn-warning"
+                            onClick={() => openModal("comments", { task, isActionAllow: true })}
+                          >
+                            QC
+                          </button>
+                        )}
+                        <button
+                          className="btn btn-xs btn-primary"
+                          onClick={() => openModal("comments", { task, isActionAllow: false })}
+                        >
+                          Comment
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+
+      </div>
+      {
+        data?.data?.length > 0 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={data.totalPages}
+            onPageChange={paginate}
+          />
+        )
+      }
+    </div >
   );
 };
 
diff --git a/src/components/Directory/ListViewContact.jsx b/src/components/Directory/ListViewContact.jsx
index 16fd9a14..f4f15531 100644
--- a/src/components/Directory/ListViewContact.jsx
+++ b/src/components/Directory/ListViewContact.jsx
@@ -160,8 +160,7 @@ const ListViewContact = ({ data, Pagination }) => {
                           </div>
                         ) : (
                           <i
-                            className={`bx  ${
-                              isPending && activeContact === row.id
+                            className={`bx  ${isPending && activeContact === row.id
                                 ? "bx-loader-alt bx-spin"
                                 : "bx-recycle"
                               } me-1 text-primary cursor-pointer`}
@@ -188,13 +187,13 @@ const ListViewContact = ({ data, Pagination }) => {
                 )}
               </tbody>
             </table>
-            {Pagination && (
-              <div className="d-flex justify-content-start">
-                {Pagination}
-              </div>
-            )}
           </div>
         </div>
+        {Pagination && (
+          <div className="d-flex justify-content-start">
+            {Pagination}
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/src/components/Expenses/ExpenseList.jsx b/src/components/Expenses/ExpenseList.jsx
index c18d2650..d51063d7 100644
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@@ -67,9 +67,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           key = item.status?.displayName || "Unknown";
           break;
         case "submittedBy":
-          key = `${item.createdBy?.firstName ?? ""} ${
-            item.createdBy?.lastName ?? ""
-          }`.trim();
+          key = `${item.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
+            }`.trim();
           break;
         case "project":
           key = item.project?.name || "Unknown Project";
@@ -110,9 +109,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${
-          e.createdBy?.lastName ?? ""
-        }`.trim() || "N/A",
+        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+          }`.trim() || "N/A",
       customRender: (e) => (
         <div className="d-flex align-items-center">
           <Avatar
@@ -122,9 +120,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${
-              e.createdBy?.lastName ?? ""
-            }`.trim() || "N/A"}
+            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+              }`.trim() || "N/A"}
           </span>
         </div>
       ),
@@ -152,9 +149,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${
-            getColorNameFromHex(e?.status?.color) || "secondary"
-          }`}
+          className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
+            }`}
         >
           {e.status?.name || "Unknown"}
         </span>
@@ -299,15 +295,15 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                 )}
               </tbody>
             </table>
-            {data?.data?.length > 0 && (
-              <Pagination
-                currentPage={currentPage}
-                totalPages={data.totalPages}
-                onPageChange={paginate}
-              />
-            )}
           </div>
         </div>
+        {data?.data?.length > 0 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={data.totalPages}
+            onPageChange={paginate}
+          />
+        )}
       </div>
     </>
   );
diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 4d6d2f0c..10db6786 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -649,17 +649,16 @@ const EmployeeList = () => {
                         </tr>
                       ))}
                   </tbody>
-                </table>
-
-                {displayData?.length > 0 && (
+                </table>               
+              </div>
+            </div>
+             {displayData?.length > 0 && (
                   <Pagination
                     currentPage={currentPage}
                     totalPages={totalPages}
                     onPageChange={paginate}
                   />
                 )}
-              </div>
-            </div>
           </div>
         ) : (
           <div className="card">