From ee2c973d01b9878029ca812442c826c83948a513 Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Sat, 16 Aug 2025 12:57:47 +0530
Subject: [PATCH] change label

---
 src/pages/employee/EmployeeList.jsx | 826 ++++++++++++++--------------
 1 file changed, 412 insertions(+), 414 deletions(-)

diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 73ef5901..02ae3acd 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -51,7 +51,8 @@ const EmployeeList = () => {
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
     useEmployeesAllOrByProjectId(
-      showAllEmployees ,selectedProjectId,
+      showAllEmployees,
+      selectedProjectId,
       showInactive
     );
 
@@ -153,8 +154,6 @@ const EmployeeList = () => {
     }
   };
 
-
-
   const handleAllEmployeesToggle = (e) => {
     const isChecked = e.target.checked;
     setShowInactive(false);
@@ -295,450 +294,449 @@ const EmployeeList = () => {
 
         {ViewTeamMember ? (
           // <div className="row">
-            <div className="card p-1">
-              <div className="card-datatable table-responsive pt-2">
-                <div
-                  id="DataTables_Table_0_wrapper"
-                  className="dataTables_wrapper dt-bootstrap5 no-footer"
-                  style={{ width: "98%" }}
-                >
-                  <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
-                    {/* Switches: All Employees + Inactive */}
-                    <div className="d-flex flex-wrap align-items-center gap-3">
-                      {/* All Employees Switch */}
-                      {ViewAllEmployee && (
-                        <div className="form-check form-switch text-start">
-                          <input
-                            type="checkbox"
-                            className="form-check-input"
-                            role="switch"
-                            id="allEmployeesCheckbox"
-                            checked={showAllEmployees}
-                            onChange={handleAllEmployeesToggle}
-                          />
-                          <label
-                            className="form-check-label ms-0"
-                            htmlFor="allEmployeesCheckbox"
-                          >
-                            All Employees
-                          </label>
-                        </div>
-                      )}
-
-                      {/* Show Inactive Employees Switch */}
-                      {showAllEmployees && (
-                        <div className="form-check form-switch text-start">
-                          <input
-                            type="checkbox"
-                            className="form-check-input"
-                            role="switch"
-                            id="inactiveEmployeesCheckbox"
-                            checked={showInactive}
-                           onChange={(e)=> setShowInactive(e.target.checked)}
-                          />
-                          <label
-                            className="form-check-label ms-0"
-                            htmlFor="inactiveEmployeesCheckbox"
-                          >
-                            Show Inactive Employees
-                          </label>
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Right side: Search + Export + Add Employee */}
-                    <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
-                      {/* Search Input - ALWAYS ENABLED */}
-                      <div className="dataTables_filter">
-                        <label className="mb-0">
-                          <input
-                            type="search"
-                            value={searchText}
-                            onChange={handleSearch}
-                            className="form-control form-control-sm"
-                            placeholder="Search User"
-                            aria-controls="DataTables_Table_0"
-                          />
+          <div className="card p-1">
+            <div className="card-datatable table-responsive pt-2">
+              <div
+                id="DataTables_Table_0_wrapper"
+                className="dataTables_wrapper dt-bootstrap5 no-footer"
+                style={{ width: "98%" }}
+              >
+                <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
+                  {/* Switches: All Employees + Inactive */}
+                  <div className="d-flex flex-wrap align-items-center gap-3">
+                    {/* All Employees Switch */}
+                    {ViewAllEmployee && (
+                      <div className="form-check form-switch text-start">
+                        <input
+                          type="checkbox"
+                          className="form-check-input"
+                          role="switch"
+                          id="allEmployeesCheckbox"
+                          checked={showAllEmployees}
+                          onChange={handleAllEmployeesToggle}
+                        />
+                        <label
+                          className="form-check-label ms-0"
+                          htmlFor="allEmployeesCheckbox"
+                        >
+                          All Employees
                         </label>
                       </div>
+                    )}
 
-                      {/* Export Dropdown */}
-                      <div className="dropdown">
-                        <button
-                          aria-label="Click me"
-                          className="btn btn-sm btn-label-secondary dropdown-toggle"
-                          type="button"
-                          data-bs-toggle="dropdown"
-                          aria-expanded="false"
+                    {/* Show Inactive Employees Switch */}
+                    {showAllEmployees && (
+                      <div className="form-check form-switch text-start">
+                        <input
+                          type="checkbox"
+                          className="form-check-input"
+                          role="switch"
+                          id="inactiveEmployeesCheckbox"
+                          checked={showInactive}
+                          onChange={(e) => setShowInactive(e.target.checked)}
+                        />
+                        <label
+                          className="form-check-label ms-0"
+                          htmlFor="inactiveEmployeesCheckbox"
                         >
-                          <i className="bx bx-export me-2 bx-sm"></i>Export
-                        </button>
-                        <ul className="dropdown-menu">
-                          <li>
-                            <a
-                              className="dropdown-item"
-                              href="#"
-                              onClick={() => handleExport("print")}
-                            >
-                              <i className="bx bx-printer me-1"></i> Print
-                            </a>
-                          </li>
-                          <li>
-                            <a
-                              className="dropdown-item"
-                              href="#"
-                              onClick={() => handleExport("csv")}
-                            >
-                              <i className="bx bx-file me-1"></i> CSV
-                            </a>
-                          </li>
-                          <li>
-                            <a
-                              className="dropdown-item"
-                              href="#"
-                              onClick={() => handleExport("excel")}
-                            >
-                              <i className="bx bxs-file-export me-1"></i> Excel
-                            </a>
-                          </li>
-                          <li>
-                            <a
-                              className="dropdown-item"
-                              href="#"
-                              onClick={() => handleExport("pdf")}
-                            >
-                              <i className="bx bxs-file-pdf me-1"></i> PDF
-                            </a>
-                          </li>
-                        </ul>
+                          Show Inactive Employees
+                        </label>
                       </div>
-
-                      {/* Add Employee Button */}
-                      {Manage_Employee && (
-                        <button
-                          className="btn btn-sm btn-primary"
-                          type="button"
-                          onClick={() => handleEmployeeModel(null)}
-                        >
-                          <i className="bx bx-plus-circle me-2"></i>
-                          <span className="d-none d-md-inline-block">
-                            Add New Employee
-                          </span>
-                        </button>
-                      )}
-                    </div>
+                    )}
                   </div>
 
-                  <table
-                    className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
-                    id="DataTables_Table_0"
-                    aria-describedby="DataTables_Table_0_info"
-                    style={{ width: "100%" }}
-                    ref={tableRef}
-                  >
-                    <thead>
-                      <tr>
-                        <th
-                          className="sorting sorting_desc"
-                          tabIndex="0"
+                  {/* Right side: Search + Export + Add Employee */}
+                  <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
+                    {/* Search Input - ALWAYS ENABLED */}
+                    <div className="dataTables_filter">
+                      <label className="mb-0">
+                        <input
+                          type="search"
+                          value={searchText}
+                          onChange={handleSearch}
+                          className="form-control form-control-sm"
+                          placeholder="Search User"
                           aria-controls="DataTables_Table_0"
-                          rowSpan="1"
-                          colSpan="2"
-                          aria-label="User: activate to sort column ascending"
-                          aria-sort="descending"
-                        >
-                          <div className="text-start ms-6">Name</div>
-                        </th>
-                        <th
-                          className="sorting sorting_desc d-none d-sm-table-cell"
-                          tabIndex="0"
-                          aria-controls="DataTables_Table_0"
-                          rowSpan="1"
-                          colSpan="1"
-                          aria-label="User: activate to sort column ascending"
-                          aria-sort="descending"
-                        >
-                          <div className="text-start ms-5">Email</div>
-                        </th>
-                        <th
-                          className="sorting sorting_desc d-none d-sm-table-cell"
-                          tabIndex="0"
-                          aria-controls="DataTables_Table_0"
-                          rowSpan="1"
-                          colSpan="1"
-                          aria-label="User: activate to sort column ascending"
-                          aria-sort="descending"
-                        >
-                          <div className="text-start ms-5">Contact</div>
-                        </th>
-                        <th
-                          className="sorting sorting_desc  d-none  d-sm-table-cell"
-                          tabIndex="0"
-                          aria-controls="DataTables_Table_0"
-                          rowSpan="1"
-                          colSpan="1"
-                          aria-label="User: activate to sort column ascending"
-                          aria-sort="descending"
-                        >
-                          <div className="text-start ms-5">Official Designation</div>
-                        </th>
+                        />
+                      </label>
+                    </div>
 
-                        <th
-                          className="sorting  d-none  d-md-table-cell"
-                          tabIndex="0"
-                          aria-controls="DataTables_Table_0"
-                          rowSpan="1"
-                          colSpan="1"
-                          aria-label="Plan: activate to sort column ascending"
-                        >
-                          Joining Date
-                        </th>
-                        <th
-                          className="sorting"
-                          tabIndex="0"
-                          aria-controls="DataTables_Table_0"
-                          rowSpan="1"
-                          colSpan="1"
-                          aria-label="Billing: activate to sort column ascending"
-                        >
-                          Status
-                        </th>
-                        <th
-                          className={`sorting_disabled  ${
-                            !Manage_Employee && "d-none"
-                          }`}
-                          rowSpan="1"
-                          colSpan="1"
-                          style={{ width: "50px" }}
-                          aria-label="Actions"
-                        >
-                          Actions
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {loading && (
-                        <tr>
-                          <td colSpan={8}>
-                            <p>Loading...</p>
-                          </td>
-                        </tr>
-                      )}
-                      {/* Conditional messages for no data or no search results */}
-                      {!loading &&
-                      displayData?.length === 0 &&
-                      searchText &&
-                      !showAllEmployees ? (
-                        <tr>
-                          <td colSpan={8}>
-                            <small className="muted">
-                              '{searchText}' employee not found
-                            </small>{" "}
-                          </td>
-                        </tr>
-                      ) : null}
-                      {!loading &&
-                      displayData?.length === 0 &&
-                      (!searchText || showAllEmployees) ? (
-                        <tr>
-                          <td
-                            colSpan={8}
-                            style={{ paddingTop: "20px", textAlign: "center" }}
+                    {/* Export Dropdown */}
+                    <div className="dropdown">
+                      <button
+                        aria-label="Click me"
+                        className="btn btn-sm btn-label-secondary dropdown-toggle"
+                        type="button"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                      >
+                        <i className="bx bx-export me-2 bx-sm"></i>Export
+                      </button>
+                      <ul className="dropdown-menu">
+                        <li>
+                          <a
+                            className="dropdown-item"
+                            href="#"
+                            onClick={() => handleExport("print")}
                           >
-                            No Data Found
-                          </td>
-                        </tr>
-                      ) : null}
+                            <i className="bx bx-printer me-1"></i> Print
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            className="dropdown-item"
+                            href="#"
+                            onClick={() => handleExport("csv")}
+                          >
+                            <i className="bx bx-file me-1"></i> CSV
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            className="dropdown-item"
+                            href="#"
+                            onClick={() => handleExport("excel")}
+                          >
+                            <i className="bx bxs-file-export me-1"></i> Excel
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            className="dropdown-item"
+                            href="#"
+                            onClick={() => handleExport("pdf")}
+                          >
+                            <i className="bx bxs-file-pdf me-1"></i> PDF
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
 
-                      {/* Render current items */}
-                      {currentItems &&
-                        !loading &&
-                        currentItems.map((item) => (
-                          <tr className="odd" key={item.id}>
-                            <td className="sorting_1" colSpan={2}>
-                              <div className="d-flex justify-content-start align-items-center user-name">
-                                <Avatar
-                                  firstName={item.firstName}
-                                  lastName={item.lastName}
-                                ></Avatar>
-                                <div className="d-flex flex-column">
-                                  <a
+                    {/* Add Employee Button */}
+                    {Manage_Employee && (
+                      <button
+                        className="btn btn-sm btn-primary"
+                        type="button"
+                        onClick={() => handleEmployeeModel(null)}
+                      >
+                        <i className="bx bx-plus-circle me-2"></i>
+                        <span className="d-none d-md-inline-block">
+                          Add New Employee
+                        </span>
+                      </button>
+                    )}
+                  </div>
+                </div>
+
+                <table
+                  className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
+                  id="DataTables_Table_0"
+                  aria-describedby="DataTables_Table_0_info"
+                  style={{ width: "100%" }}
+                  ref={tableRef}
+                >
+                  <thead>
+                    <tr>
+                      <th
+                        className="sorting sorting_desc"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="2"
+                        aria-label="User: activate to sort column ascending"
+                        aria-sort="descending"
+                      >
+                        <div className="text-start ms-6">Name</div>
+                      </th>
+                      <th
+                        className="sorting sorting_desc d-none d-sm-table-cell"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="1"
+                        aria-label="User: activate to sort column ascending"
+                        aria-sort="descending"
+                      >
+                        <div className="text-start ms-5">Email</div>
+                      </th>
+                      <th
+                        className="sorting sorting_desc d-none d-sm-table-cell"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="1"
+                        aria-label="User: activate to sort column ascending"
+                        aria-sort="descending"
+                      >
+                        <div className="text-start ms-5">Contact</div>
+                      </th>
+                      <th
+                        className="sorting sorting_desc  d-none  d-sm-table-cell"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="1"
+                        aria-label="User: activate to sort column ascending"
+                        aria-sort="descending"
+                      >
+                        <div className="text-start ms-5">Designation</div>
+                      </th>
+
+                      <th
+                        className="sorting  d-none  d-md-table-cell"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="1"
+                        aria-label="Plan: activate to sort column ascending"
+                      >
+                        Joining Date
+                      </th>
+                      <th
+                        className="sorting"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="1"
+                        aria-label="Billing: activate to sort column ascending"
+                      >
+                        Status
+                      </th>
+                      <th
+                        className={`sorting_disabled  ${
+                          !Manage_Employee && "d-none"
+                        }`}
+                        rowSpan="1"
+                        colSpan="1"
+                        style={{ width: "50px" }}
+                        aria-label="Actions"
+                      >
+                        Actions
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {loading && (
+                      <tr>
+                        <td colSpan={8}>
+                          <p>Loading...</p>
+                        </td>
+                      </tr>
+                    )}
+                    {/* Conditional messages for no data or no search results */}
+                    {!loading &&
+                    displayData?.length === 0 &&
+                    searchText &&
+                    !showAllEmployees ? (
+                      <tr>
+                        <td colSpan={8}>
+                          <small className="muted">
+                            '{searchText}' employee not found
+                          </small>{" "}
+                        </td>
+                      </tr>
+                    ) : null}
+                    {!loading &&
+                    displayData?.length === 0 &&
+                    (!searchText || showAllEmployees) ? (
+                      <tr>
+                        <td
+                          colSpan={8}
+                          style={{ paddingTop: "20px", textAlign: "center" }}
+                        >
+                          No Data Found
+                        </td>
+                      </tr>
+                    ) : null}
+
+                    {/* Render current items */}
+                    {currentItems &&
+                      !loading &&
+                      currentItems.map((item) => (
+                        <tr className="odd" key={item.id}>
+                          <td className="sorting_1" colSpan={2}>
+                            <div className="d-flex justify-content-start align-items-center user-name">
+                              <Avatar
+                                firstName={item.firstName}
+                                lastName={item.lastName}
+                              ></Avatar>
+                              <div className="d-flex flex-column">
+                                <a
+                                  onClick={() =>
+                                    navigate(
+                                      `/employee/${item.id}?for=attendance`
+                                    )
+                                  }
+                                  className="text-heading text-truncate cursor-pointer"
+                                >
+                                  <span className="fw-normal">
+                                    {item.firstName} {item.middleName}{" "}
+                                    {item.lastName}
+                                  </span>
+                                </a>
+                              </div>
+                            </div>
+                          </td>
+                          <td className="text-start  d-none  d-sm-table-cell">
+                            {item.email ? (
+                              <span className="text-truncate">
+                                <i className="bx bxs-envelope text-primary me-2"></i>
+                                {item.email}
+                              </span>
+                            ) : (
+                              <span className="text-truncate text-italic">
+                                NA
+                              </span>
+                            )}
+                          </td>
+                          <td className="text-start  d-none  d-sm-table-cell">
+                            <span className="text-truncate">
+                              <i className="bx bxs-phone-call text-primary me-2"></i>
+                              {item.phoneNumber}
+                            </span>
+                          </td>
+                          <td className=" d-none  d-sm-table-cell text-start">
+                            <span className="text-truncate">
+                              <i className="bx bxs-wrench text-success  me-2"></i>
+                              {item.jobRole || "Not Assign Yet"}
+                            </span>
+                          </td>
+
+                          <td className=" d-none  d-md-table-cell">
+                            {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
+                          </td>
+                          <td>
+                            {showInactive ? (
+                              <span
+                                className="badge bg-label-danger"
+                                text-capitalized=""
+                              >
+                                Inactive
+                              </span>
+                            ) : (
+                              <span
+                                className="badge bg-label-success"
+                                text-capitalized=""
+                              >
+                                Active
+                              </span>
+                            )}
+                          </td>
+                          {Manage_Employee && (
+                            <td className="text-end">
+                              <div className="dropdown">
+                                <button
+                                  className="btn btn-icon dropdown-toggle hide-arrow"
+                                  data-bs-toggle="dropdown"
+                                >
+                                  <i className="bx bx-dots-vertical-rounded bx-md"></i>
+                                </button>
+                                <div className="dropdown-menu dropdown-menu-end">
+                                  <button
                                     onClick={() =>
-                                      navigate(
-                                        `/employee/${item.id}?for=attendance`
-                                      )
+                                      navigate(`/employee/${item.id}`)
                                     }
-                                    className="text-heading text-truncate cursor-pointer"
+                                    className="dropdown-item py-1"
                                   >
-                                    <span className="fw-normal">
-                                      {item.firstName} {item.middleName}{" "}
-                                      {item.lastName}
-                                    </span>
-                                  </a>
+                                    <i className="bx bx-detail bx-sm"></i> View
+                                  </button>
+                                  <button
+                                    className="dropdown-item py-1"
+                                    onClick={() => {
+                                      handleEmployeeModel(item.id);
+                                    }}
+                                  >
+                                    <i className="bx bx-edit bx-sm"></i> Edit
+                                  </button>
+                                  {!item.isSystem && (
+                                    <>
+                                      <button
+                                        className="dropdown-item py-1"
+                                        onClick={() =>
+                                          handleOpenDelete(item.id)
+                                        }
+                                      >
+                                        <i className="bx bx-task-x bx-sm"></i>{" "}
+                                        Suspend
+                                      </button>
+                                      <button
+                                        className="dropdown-item py-1"
+                                        type="button"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#managerole-modal"
+                                        onClick={() =>
+                                          setEmpForManageRole(item.id)
+                                        }
+                                      >
+                                        <i className="bx bx-cog bx-sm"></i>{" "}
+                                        Manage Role
+                                      </button>
+                                    </>
+                                  )}
                                 </div>
                               </div>
                             </td>
-                            <td className="text-start  d-none  d-sm-table-cell">
-                              {item.email ? (
-                                <span className="text-truncate">
-                                  <i className="bx bxs-envelope text-primary me-2"></i>
-                                  {item.email}
-                                </span>
-                              ) : (
-                                <span className="text-truncate text-italic">
-                                  NA
-                                </span>
-                              )}
-                            </td>
-                            <td className="text-start  d-none  d-sm-table-cell">
-                              <span className="text-truncate">
-                                <i className="bx bxs-phone-call text-primary me-2"></i>
-                                {item.phoneNumber}
-                              </span>
-                            </td>
-                            <td className=" d-none  d-sm-table-cell text-start">
-                              <span className="text-truncate">
-                                <i className="bx bxs-wrench text-success  me-2"></i>
-                                {item.jobRole || "Not Assign Yet"}
-                              </span>
-                            </td>
+                          )}
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
 
-                            <td className=" d-none  d-md-table-cell">
-                              {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
-                            </td>
-                            <td>
-                              {showInactive ? (
-                                <span
-                                  className="badge bg-label-danger"
-                                  text-capitalized=""
-                                >
-                                  Inactive
-                                </span>
-                              ) : (
-                                <span
-                                  className="badge bg-label-success"
-                                  text-capitalized=""
-                                >
-                                  Active
-                                </span>
-                              )}
-                            </td>
-                            {Manage_Employee && (
-                              <td className="text-end">
-                                <div className="dropdown">
-                                  <button
-                                    className="btn btn-icon dropdown-toggle hide-arrow"
-                                    data-bs-toggle="dropdown"
-                                  >
-                                    <i className="bx bx-dots-vertical-rounded bx-md"></i>
-                                  </button>
-                                  <div className="dropdown-menu dropdown-menu-end">
-                                    <button
-                                      onClick={() =>
-                                        navigate(`/employee/${item.id}`)
-                                      }
-                                      className="dropdown-item py-1"
-                                    >
-                                      <i className="bx bx-detail bx-sm"></i>{" "}
-                                      View
-                                    </button>
-                                    <button
-                                      className="dropdown-item py-1"
-                                      onClick={() => {
-                                        handleEmployeeModel(item.id);
-                                      }}
-                                    >
-                                      <i className="bx bx-edit bx-sm"></i> Edit
-                                    </button>
-                                    {!item.isSystem && (
-                                      <>
-                                        <button
-                                          className="dropdown-item py-1"
-                                          onClick={() =>
-                                            handleOpenDelete(item.id)
-                                          }
-                                        >
-                                          <i className="bx bx-task-x bx-sm"></i>{" "}
-                                          Suspend
-                                        </button>
-                                        <button
-                                          className="dropdown-item py-1"
-                                          type="button"
-                                          data-bs-toggle="modal"
-                                          data-bs-target="#managerole-modal"
-                                          onClick={() =>
-                                            setEmpForManageRole(item.id)
-                                          }
-                                        >
-                                          <i className="bx bx-cog bx-sm"></i>{" "}
-                                          Manage Role
-                                        </button>
-                                      </>
-                                    )}
-                                  </div>
-                                </div>
-                              </td>
-                            )}
-                          </tr>
-                        ))}
-                    </tbody>
-                  </table>
+                <div style={{ width: "1%" }}></div>
 
-                  <div style={{ width: "1%" }}></div>
-
-                  {/* Pagination */}
-                  {!loading && displayData.length > ITEMS_PER_PAGE && (
-                    <nav aria-label="Page">
-                      <ul className="pagination pagination-sm justify-content-end py-1">
-                        <li
-                          className={`page-item ${
-                            currentPage === 1 ? "disabled" : ""
-                          }`}
+                {/* Pagination */}
+                {!loading && displayData.length > ITEMS_PER_PAGE && (
+                  <nav aria-label="Page">
+                    <ul className="pagination pagination-sm justify-content-end py-1">
+                      <li
+                        className={`page-item ${
+                          currentPage === 1 ? "disabled" : ""
+                        }`}
+                      >
+                        <button
+                          className="page-link btn-xs"
+                          onClick={() => paginate(currentPage - 1)}
                         >
-                          <button
-                            className="page-link btn-xs"
-                            onClick={() => paginate(currentPage - 1)}
-                          >
-                            &laquo;
-                          </button>
-                        </li>
-
-                        {[...Array(totalPages)]?.map((_, index) => (
-                          <li
-                            key={index}
-                            className={`page-item ${
-                              currentPage === index + 1 ? "active" : ""
-                            }`}
-                          >
-                            <button
-                              className="page-link"
-                              onClick={() => paginate(index + 1)}
-                            >
-                              {index + 1}
-                            </button>
-                          </li>
-                        ))}
+                          &laquo;
+                        </button>
+                      </li>
 
+                      {[...Array(totalPages)]?.map((_, index) => (
                         <li
+                          key={index}
                           className={`page-item ${
-                            currentPage === totalPages ? "disabled" : ""
+                            currentPage === index + 1 ? "active" : ""
                           }`}
                         >
                           <button
                             className="page-link"
-                            onClick={() => paginate(currentPage + 1)}
+                            onClick={() => paginate(index + 1)}
                           >
-                            &raquo;
+                            {index + 1}
                           </button>
                         </li>
-                      </ul>
-                    </nav>
-                  )}
-                </div>
+                      ))}
+
+                      <li
+                        className={`page-item ${
+                          currentPage === totalPages ? "disabled" : ""
+                        }`}
+                      >
+                        <button
+                          className="page-link"
+                          onClick={() => paginate(currentPage + 1)}
+                        >
+                          &raquo;
+                        </button>
+                      </li>
+                    </ul>
+                  </nav>
+                )}
               </div>
             </div>
-          // </div>
+          </div>
         ) : (
+          // </div>
           <div className="card">
             <div className="text-center">
               <i className="fa-solid fa-triangle-exclamation fs-5"></i>