Change Page size for master and employees

src/pages/employee/EmployeeList.jsx

@@ -31,7 +31,7 @@ const EmployeeList = () => {
   const [employeeList, setEmployeeList] = useState([]);
   const [modelConfig, setModelConfig] = useState();
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(10);
+  const [itemsPerPage] = useState(15);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
   const [filteredData, setFilteredData] = useState([]);

src/pages/master/MasterTable.jsx

@@ -1,18 +1,25 @@
-import React, { useEffect,useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import {MANAGE_MASTER} from "../../utils/constants";
+import { MANAGE_MASTER } from "../../utils/constants";
 
-const MasterTable = ( {data, columns, loading, handleModalData} ) =>
+const MasterTable = ({ data, columns, loading, handleModalData }) => {
-{    
+  const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
-    const hasMasterPermission = useHasUserPermission(MANAGE_MASTER)   
+  const selectedMaster = useSelector(
-    const selectedMaster = useSelector((store)=>store.localVariables.selectedMaster)
+    (store) => store.localVariables.selectedMaster
-  const hiddenColumns = [ "id", "featurePermission", "tenant", "tenantId", "checkLists" ];
+  );
+  const hiddenColumns = [
+    "id",
+    "featurePermission",
+    "tenant",
+    "tenantId",
+    "checkLists",
+  ];
 
   const safeData = Array.isArray(data) ? data : [];
 
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(10);
+  const [itemsPerPage] = useState(20);
 
   const sortKeys = {
     "Application Role": "role",
@@ -20,7 +27,6 @@ const MasterTable = ( {data, columns, loading, handleModalData} ) =>
     "Job Role": "name",
   };
 
-
   const sortKey = sortKeys[selectedMaster];
   const sortedData = [...safeData].sort((a, b) => {
     if (!sortKey) return 0;
@@ -65,43 +71,51 @@ const MasterTable = ( {data, columns, loading, handleModalData} ) =>
           <thead>
             <tr>
               <th></th>
-                <th> {selectedMaster === "Activity" ? "Activity":"Name" }</th>
+              <th> {selectedMaster === "Activity" ? "Activity" : "Name"}</th>
-                <th> {selectedMaster === "Activity" ? "Unit":"Description" }</th>
+              <th> {selectedMaster === "Activity" ? "Unit" : "Description"}</th>
-                <th className={` ${!hasMasterPermission && 'd-none'}`}>Actions</th>
+              <th className={` ${!hasMasterPermission && "d-none"}`}>
+                Actions
+              </th>
             </tr>
           </thead>
           <tbody>
             {currentItems.length > 0 ? (
               currentItems.map((item, index) => (
                 <tr key={index}>
-                <td></td>
+                  <td style={{ width: "20px" }}>
-                {updatedColumns.map( ( col ) => (
+                    <i class="bx bx-right-arrow-alt"></i>
+                  </td>
+                  {updatedColumns.map((col) => (
                     <td className="text-start mx-2" key={col.key}>
                       {col.key === "description" ? (
-                    item[col.key] !== undefined && item[col.key] !== null ? (
+                        item[col.key] !== undefined &&
+                        item[col.key] !== null ? (
                           item[col.key].length > 80 ? (
-                        <>
+                            <>{item[col.key].slice(0, 80)}...</>
-                          {item[col.key].slice(0, 80)}...
-                        </>
                           ) : (
                             item[col.key]
                           )
                         ) : (
                           " --- "
                         )
+                      ) : item[col.key] !== undefined &&
+                        item[col.key] !== null ? (
+                        item[col.key]
                       ) : (
-                    item[col.key] !== undefined && item[col.key] !== null ? item[col.key] : " --- "
+                        " --- "
                       )}
                     </td>
                   ))}
-                <td className={`${!hasMasterPermission && 'd-none'}`} >
+                  <td className={`${!hasMasterPermission && "d-none"}`}>
                     <button
                       aria-label="Modify"
                       type="button"
                       data-bs-toggle="modal"
                       data-bs-target="#master-modal"
                       className="btn p-0 dropdown-toggle hide-arrow"
-                    onClick={() => handleModalData(`Edit-${selectedMaster}`, item)}
+                      onClick={() =>
+                        handleModalData(`Edit-${selectedMaster}`, item)
+                      }
                     >
                       <i className="bx bxs-edit me-2 text-primary"></i>
                     </button>
@@ -114,7 +128,6 @@ const MasterTable = ( {data, columns, loading, handleModalData} ) =>
                       data-bs-target="#master-modal"
                       onClick={() => handleModalData("delete", item)}
                     >
-
                       <i className="bx bx-trash me-1 text-danger"></i>
                     </button>
                   </td>
@@ -134,19 +147,37 @@ const MasterTable = ( {data, columns, loading, handleModalData} ) =>
         <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" : ""}`}>
+              <li
-              <button className="page-link" onClick={() => paginate(index + 1)}>
+                key={index}
+                className={`page-item ${
+                  currentPage === index + 1 ? "active" : ""
+                }`}
+              >
+                <button
+                  className="page-link"
+                  onClick={() => paginate(index + 1)}
+                >
                   {index + 1}
                 </button>
               </li>
             ))}
-          <li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
+            <li
-            <button className="page-link" onClick={() => paginate(currentPage + 1)}>
+              className={`page-item ${
+                currentPage === totalPages ? "disabled" : ""
+              }`}
+            >
+              <button
+                className="page-link"
+                onClick={() => paginate(currentPage + 1)}
+              >
                 &raquo;
               </button>
             </li>