Merge pull request 'pramod_Task-#239 : Display in Card View contacts List' (#121) from pramod_Task-#239 into Feature_Directory

Reviewed-on: #121

src/components/Activities/Attendance.jsx

@@ -5,6 +5,7 @@ import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import usePagination from "../../hooks/usePagination";
 import { useNavigate } from "react-router-dom";
+import {ITEMS_PER_PAGE} from "../../utils/constants";
 
 const Attendance = ({ attendance, getRole, handleModalData }) => {
   const [loading, setLoading] = useState(false);
@@ -32,7 +33,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
 
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredData,
-    10
+    ITEMS_PER_PAGE
   );
   return (
     <>

src/components/Activities/AttendcesLogs.jsx

@@ -8,6 +8,7 @@ import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
 import DateRangePicker from "../common/DateRangePicker";
 import { getCachedData } from "../../slices/apiDataManager";
 import usePagination from "../../hooks/usePagination";
+import {ITEMS_PER_PAGE} from "../../utils/constants";
 
 const AttendanceLog = ({ handleModalData, projectId }) => {
   const [attendances, setAttendnaces] = useState([]);
@@ -70,7 +71,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
   const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     sortedFinalList,
-    10
+    ITEMS_PER_PAGE
   );
 
   useEffect(() => {

src/components/Directory/CardViewDirectory.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import Avatar from "../common/Avatar";
+
+const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
+  return (
+    <div class="card text-start border-1">
+      <div class="card-body d-flex justify-content-between px-1 py-2">
+        <div className="d-flex align-items-center">
+          <Avatar
+            size="xs"
+            firstName={
+              (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
+            }
+            lastName={
+              (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
+            }
+          />{" "}
+          <p className="m-0">{contact.name}</p>
+        </div>
+        <div>
+          <div className="dropdown z-2 ">
+            <button
+              type="button"
+              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <i
+                className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
+                data-bs-toggle="tooltip"
+                data-bs-offset="0,8"
+                data-bs-placement="top"
+                data-bs-custom-class="tooltip-dark"
+                title="More Action"
+              ></i>
+            </button>
+            <ul className="dropdown-menu dropdown-menu-end w-auto">
+              <li onClick={() =>
+              {
+                setSelectedContact(contact)
+                setIsOpenModal(true)
+              }}>
+                <a className="dropdown-item px-2 py-0">
+                  <i className="bx bx-pencil bx-xs me-2"></i>
+                  <span className="align-left small-text">Modify</span>
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item  px-2 py-0">
+                  <i className="bx bx-trash bx-xs me-2"></i>
+                  <span className="align-left small-text">Delete</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-footer text-start px-1 py-1">
+        <hr className="my-0" />
+        {contact.contactEmails[0] && (
+          <ul className="list-inline my-1 ">
+            <li className="list-inline-item me-2">
+              <i className="bx bx-envelope bx-xs"></i>
+            </li>
+            <li className="list-inline-item small-text">
+              {contact.contactEmails[0]?.emailAddress}
+            </li>
+          </ul>
+        )}
+
+        {contact.contactPhones[0] && (
+          <ul className="list-inline m-0">
+            <li className="list-inline-item me-2">
+              <i className="bx bx-phone bx-xs"></i>
+            </li>
+            <li className="list-inline-item small-text">
+              {contact.contactPhones[0]?.phoneNumber}
+            </li>
+          </ul>
+        )}
+
+        <ul className="list-inline m-0">
+          <li className="list-inline-item me-2">
+            <i className="bx bx-building bx-xs"></i>
+          </li>
+          <li className="list-inline-item small-text">
+            {contact.organization}
+          </li>
+          <li className="list-inline-item me-2">
+            <i className="bx bx-merge bx-xs"></i>
+          </li>
+          <li className="list-inline-item small-text">
+            {contact.contactCategory.name}
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default CardViewDirectory;

src/components/Directory/DirectorySchema.js

@@ -24,7 +24,7 @@ export const ContactSchema = z
           phoneNumber: z
             .string()
             .min(6, "Invalid Number")
-            .max(10, "Invalid Number")
+            .max(13, "Invalid Number")
             .regex(/^[\d\s+()-]+$/, "Invalid phone number format").or(z.literal("")),
         })
       )

src/components/Directory/ListViewDirectory.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import Avatar from '../common/Avatar';
 
 const getEmailIcon = (type) => {
   switch (type) {
@@ -23,10 +24,22 @@ const getPhoneIcon = (type) => {
   }
 };
 
-const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
+const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
   return (
-    <tr key={contact.id} >
+    <tr  >
-      <td className="text-start" colSpan={2}>{`${contact.name}`}</td>
+      <td className="text-start" style={{width: '18%'}} colSpan={2}>
+     <div className="d-flex align-items-center">
+  <Avatar
+  size="xs"
+  firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""}
+  lastName={(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""}
+/>
+
+  <span >{contact?.name || ""}</span>
+</div>
+
+
+      </td>
 
       {/* Emails */}
       <td >
@@ -52,12 +65,12 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
       </td>
 
 
-      <td className="text-start">{contact.organization}</td>
+      <td className="text-start text-wrap">{contact.organization}</td>
 
   
       <td>
         <div className="d-flex flex-column align-items-start">
-          <span class="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
+          <span className="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
         </div>
       </td>
 

src/components/Directory/ManageDirectory.jsx

@@ -144,7 +144,6 @@ useEffect(() => {
     <FormProvider {...methods}>
       <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
         <div className="d-flex justify-content-center align-items-center">
-          <IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
           <h6 className="m-0 fw-18"> Create New Contact</h6>
         </div>
         <div className="row">
@@ -211,7 +210,7 @@ useEffect(() => {
                         onClick={handleAddEmail}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus bx-xs" />
+                        <i className="bx bx-plus-circle bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -220,7 +219,7 @@ useEffect(() => {
                         onClick={() => removeEmail(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-x bx-xs" />
+                        <i className="bx bx-minus-circle bx-xs" />
                       </button>
                     )}
                   </div>
@@ -271,7 +270,7 @@ useEffect(() => {
                         onClick={handleAddPhone}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus bx-xs" />
+                        <i className="bx bx-plus-circle bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -280,7 +279,7 @@ useEffect(() => {
                         onClick={() => removePhone(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-x bx-xs" />
+                        <i className="bx bx-minus-circle bx-xs" />
                       </button>
                     )}
                   </div>
@@ -311,7 +310,7 @@ useEffect(() => {
                 </option>
               ) : (
                 <>
-                  <option disabled selected value="">
+                  <option disabled  value="">
                     Select Category
                   </option>
                   {contactCategory?.map((cate) => (

src/components/Directory/UpdateContact.jsx

@@ -111,19 +111,29 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
   };
 
   const onSubmit = async (data) => {
-    debugger;
+const cleaned = {
-    const cleaned = {
+  ...data,
-      ...data,
+  contactEmails: (data.contactEmails || [])
-      contactEmails: (data.contactEmails || []).filter(
+    .filter((e) => e.emailAddress?.trim() !== "")
-        (e) => e.emailAddress?.trim() !== ""
+    .map((email, index) => {
-      ),
+      const existingEmail = existingContact.contactEmails?.[index];
-      contactPhones: (data.contactPhones || []).filter(
+      return existingEmail
-        (p) => p.phoneNumber?.trim() !== ""
+        ? { ...email, id: existingEmail.id } 
-      ),
+        : email;
-    };
+    }),
+  contactPhones: (data.contactPhones || [])
+    .filter((p) => p.phoneNumber?.trim() !== "")
+    .map((phone, index) => {
+      const existingPhone = existingContact.contactPhones?.[index];
+      return existingPhone
+        ? { ...phone, id: existingPhone.id }
+        : phone;
+    }),
+};
+
+setSubmitting(true);
+await submitContact({ ...cleaned, id: existingContact.id });
 
-    setSubmitting(true);
-    await submitContact({ ...cleaned, id: existingContact.id });
     setSubmitting(false);
     
   };
@@ -161,7 +171,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
       setIsInitialized(true)
     }
     
-    return()=> reset()
+    // return()=> reset()
   }, [ existingContact, buckets, projects ] );
   
 
@@ -169,7 +179,6 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
     <FormProvider {...methods}>
       <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
         <div className="d-flex justify-content-center align-items-center">
-          <IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
           <h6 className="m-0 fw-18"> Update Contact</h6>
         </div>
         <div className="row">
@@ -236,7 +245,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                         onClick={handleAddEmail}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus bx-xs" />
+                        <i className="bx bx-plus-circle bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -245,7 +254,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                         onClick={() => removeEmail(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-x bx-xs" />
+                        <i className="bx bx-minus-circle bx-xs" />
                       </button>
                     )}
                   </div>
@@ -296,7 +305,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                         onClick={handleAddPhone}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus bx-xs" />
+                        <i className="bx bx-plus-circle bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -305,7 +314,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                         onClick={() => removePhone(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-x bx-xs" />
+                        <i className="bx bx-minus-circle bx-xs" />
                       </button>
                     )}
                   </div>
@@ -336,7 +345,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                 </option>
               ) : (
                 <>
-                  <option disabled selected value="">
+                  <option disabled  value="">
                     Select Category
                   </option>
                   {contactCategory?.map((cate) => (

src/components/common/GlobalModel.jsx

@@ -15,7 +15,7 @@ const GlobalModel = ({
 useEffect(() => {
   const modalElement = modalRef.current;
   const modalInstance = new window.bootstrap.Modal(modalElement, {
-    backdrop: false  // Disable backdrop
+    backdrop: false,
   });
 
   if (isOpen) {
@@ -26,16 +26,27 @@ useEffect(() => {
 
   const handleHideModal = () => {
     closeModal();
+
+    // ✅ FIX: Remove any lingering body classes/styles
+    document.body.classList.remove('modal-open');
+    document.body.style.overflow = '';
+    document.body.style.paddingRight = '';
   };
 
   modalElement.addEventListener('hidden.bs.modal', handleHideModal);
 
   return () => {
     modalElement.removeEventListener('hidden.bs.modal', handleHideModal);
+
+    // Also clean up just in case component unmounts
+    document.body.classList.remove('modal-open');
+    document.body.style.overflow = '';
+    document.body.style.paddingRight = '';
   };
 }, [isOpen, closeModal]);
 
 
+
   // Dynamically set the modal size classes (modal-sm, modal-lg, modal-xl)
   const modalSizeClass = size ? `modal-${size}` : '';  // Default is empty if no size is specified
 

src/pages/Directory/Directory.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import IconButton from "../../components/common/IconButton";
 import GlobalModel from "../../components/common/GlobalModel";
@@ -9,13 +9,22 @@ import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import { getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
 import UpdateContact from "../../components/Directory/UpdateContact";
+import CardViewDirectory from "../../components/Directory/CardViewDirectory";
+import { useContactCategory } from "../../hooks/masterHook/useMaster";
+import usePagination from "../../hooks/usePagination";
+import {ITEMS_PER_PAGE} from "../../utils/constants";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
   const [selectedContact, setSelectedContact] = useState(null);
   const [ContatList, setContactList] = useState([]);
+  const [contactCategories, setContactCategories] = useState([]);
+  const [ searchText, setSearchText ] = useState( "" );
+   const [listView, setListView] = useState(true);
 
   const { contacts, loading } = useDirectory();
+  const { contactCategory, loading: contactCategoryLoading } =
+    useContactCategory();
   const submitContact = async (data) => {
     try {
       let response;
@@ -23,13 +32,12 @@ const Directory = () => {
       const contacts_cache = getCachedData("contacts") || [];
 
       if (selectedContact) {
-        
         response = await DirectoryRepository.UpdateContact(data.id, data);
         updatedContacts = contacts_cache.map((contact) =>
           contact.id === data.id ? response.data : contact
         );
         showToast("Contact updated successfully", "success");
-        setIsOpenModal( false );
+        setIsOpenModal(false);
         setSelectedContact(null);
       } else {
         response = await DirectoryRepository.CreateContact(data);
@@ -55,6 +63,40 @@ const Directory = () => {
   useEffect(() => {
     setContactList(contacts);
   }, [contacts]);
+
+  const [selectedCategoryIds, setSelectedCategoryIds] = useState(
+    contactCategory.map((category) => category.id)
+  );
+
+  const usedCategoryIds = [
+    ...new Set(contacts.map((c) => c.contactCategory?.id)),
+  ];
+  const filteredCategories = contactCategory.filter((category) =>
+    usedCategoryIds.includes(category.id)
+  );
+  const handleCategoryChange = (id) => {
+    setSelectedCategoryIds((prev) =>
+      prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
+    );
+  };
+  const filteredContacts = useMemo(() => {
+    return ContatList
+      .filter((c) => {
+        const matchesSearch =
+          c.name.toLowerCase().includes(searchText.toLowerCase()) ||
+          c.organization.toLowerCase().includes(searchText.toLowerCase());
+        const matchesCategory =
+          selectedCategoryIds.length === 0 ||
+          selectedCategoryIds.includes(c.contactCategory?.id);
+        return matchesSearch && matchesCategory;
+      })
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [ContatList, searchText, selectedCategoryIds]);
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
+    filteredContacts,
+    ITEMS_PER_PAGE
+  );
+
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -84,28 +126,88 @@ const Directory = () => {
           )}
         </GlobalModel>
       )}
-
       <div className="card p-2">
-        <div className="row mx-0 px-0">
+        <div className="row mx-0 px-0 align-items-center">
-          <div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
+          <div className="col-7 col-md-4 mb-2 px-1 d-flex align-items-center ">
             <input
               type="search"
-              className="form-control form-control-sm"
+              className="form-control form-control-sm me-2"
               placeholder="Search Contact..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
             />
+            <div className="d-flex gap-2 ">
+              <button
+                type="button"
+                className={`btn btn-xs ${
+                  !listView ? "btn-primary" : "btn-outline-primary"
+                }`}
+                onClick={() => setListView(false)}
+                data-bs-toggle="tooltip"
+                data-bs-offset="0,8"
+                data-bs-placement="top"
+                data-bs-custom-class="tooltip"
+                title="Card View"
+              >
+                <i className="bx bx-grid-alt bx-sm"></i>
+              </button>
+              <button
+                type="button"
+                className={`btn btn-xs ${
+                  listView ? "btn-primary" : "btn-outline-primary"
+                }`}
+                onClick={() => setListView(true)}
+                data-bs-toggle="tooltip"
+                data-bs-offset="0,8"
+                data-bs-placement="top"
+                data-bs-custom-class="tooltip"
+                title="List View"
+              >
+                <i className="bx bx-list-ul bx-sm"></i>
+              </button>
+            </div>
+               <div className="dropdown">
+              <a
+                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                <i className="bx bx-filter bx-lg  ms-1"></i>
+              </a>
+              <ul className="dropdown-menu p-2 text-capitalize">
+                <p className="small-text">Apply Filter</p>
+                {filteredCategories.map(({ id, name }) => (
+                  <li key={id}>
+                    <div className="form-check">
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        id={`cat-${id}`}
+                        checked={selectedCategoryIds.includes(id)}
+                        onChange={() => handleCategoryChange(id)}
+                      />
+                      <label className="form-check-label">{name}</label>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
           </div>
-          <div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
+
+          <div className="col-5 col-md-8 mb-2 px-1 text-md-end text-end">
             <button
               type="button"
-              className={`btn btn-sm btn-primary `}
+              className="btn btn-xs btn-primary"
               onClick={() => setIsOpenModal(true)}
             >
               <i className="bx bx-plus-circle me-2"></i>
-              New Contact
+              <span className="d-sm-block d-none"> New Contact</span>
             </button>
           </div>
         </div>
-        <div className="table-responsive text-nowrap py-2 ">
+        {
+          listView ? (
+             <div className="table-responsive text-nowrap py-2 ">
           <table className="table px-2">
             <thead>
               <tr>
@@ -152,40 +254,7 @@ const Directory = () => {
                     <span>Organization</span>
                   </div>
                 </th>
-                <th className="mx-2">
+                <th className="mx-2">Category</th>
-                  <div className="dropdown">
-                    <a
-                      className="dropdown-toggle hide-arrow cursor-pointer align-items-center"
-                      data-bs-toggle="dropdown"
-                      aria-expanded="false"
-                    >
-                      Category <i className="bx bx-filter bx-sm"></i>
-                    </a>
-                    {/* <ul className="dropdown-menu p-2 text-capitalize">
-                          {[
-                            { id: 1, label: "Active" },
-                            { id: 2, label: "On Hold" },
-                            { id: 3, label: "Inactive" },
-                            { id: 4, label: "Completed" },
-                          ].map(({ id, label }) => (
-                            <li key={id}>
-                              <div className="form-check">
-                                <input
-                                  className="form-check-input  "
-                                  type="checkbox"
-                                  checked={selectedStatuses.includes(id)}
-                                  onChange={() => handleStatusChange(id)}
-                                />
-                                <label className="form-check-label">
-                                  {label}
-                                </label>
-                              </div>
-                            </li>
-                          ))}
-                        </ul> 
-                    */}
-                  </div>
-                </th>
                 <th
                 //   className={`mx-2 ${
                 //     HasManageProject ? "d-sm-table-cell" : "d-none"
@@ -207,8 +276,9 @@ const Directory = () => {
                 </tr>
               )}
               {!loading &&
-                ContatList.map((contact) => (
+                currentItems.map((contact) => (
                   <ListViewDirectory
+                      key={contact.id} 
                     contact={contact}
                     setSelectedContact={setSelectedContact}
                     setIsOpenModal={setIsOpenModal}
@@ -217,6 +287,68 @@ const Directory = () => {
             </tbody>
           </table>
         </div>
+          ) : (
+                <div className="row">
+          {currentItems.map((contact, index) => (
+            <div key={contact.id} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
+              <CardViewDirectory contact={contact}
+                setSelectedContact={setSelectedContact}
+                setIsOpenModal={setIsOpenModal}
+            
+              />
+            </div>
+          ))}
+        </div>
+          )
+        }
+
+       
+
+      
+
+        {!loading && (
+          <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)}
+                >
+                  &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>
+              ))}
+              <li
+                className={`page-item ${
+                  currentPage === totalPages ? "disabled" : ""
+                }`}
+              >
+                <button
+                  className="page-link "
+                  onClick={() => paginate(currentPage + 1)}
+                >
+                  &raquo;
+                </button>
+              </li>
+            </ul>
+          </nav>
+        )}
       </div>
     </div>
   );

src/pages/master/MasterTable.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { MANAGE_MASTER } from "../../utils/constants";
+import { ITEMS_PER_PAGE, MANAGE_MASTER } from "../../utils/constants";
 import showToast from "../../services/toastService";
 
 const MasterTable = ({ data, columns, loading, handleModalData }) => {
@@ -21,7 +21,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
   const safeData = Array.isArray(data) ? data : [];
 
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(20);
+  const [itemsPerPage] = useState(ITEMS_PER_PAGE);
 
   const sortKeys = {
     "Application Role": "role",

src/pages/project/ProjectList.jsx

@@ -9,7 +9,7 @@ import showToast from "../../services/toastService";
 import { getCachedData, cacheData } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useProfile } from "../../hooks/useProfile";
-import { MANAGE_PROJECT } from "../../utils/constants";
+import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
 import ProjectListView from "./ProjectListView";
 
 const ProjectList = () => {
@@ -25,7 +25,7 @@ const ProjectList = () => {
   const dispatch = useDispatch();
 
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(10);
+  const [itemsPerPage] = useState(ITEMS_PER_PAGE);
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedStatuses, setSelectedStatuses] = useState([
     "b74da4c2-d07e-46f2-9919-e75e49b12731",

src/utils/constants.jsx

@@ -1,5 +1,6 @@
 export const THRESH_HOLD = 48;  //  hours
 export const DURATION_TIME = 10; // minutes
+export const ITEMS_PER_PAGE = 20;
 
 export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";