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

Reviewed-on: #121
2025-05-19 07:29:19 +00:00 · 2025-05-19 07:29:19 +00:00 · b71dd7f0f5
commit b71dd7f0f5
parent b489c094b3 99e0cd94d4
12 changed files with 352 additions and 84 deletions
--- a/src/components/Activities/Attendance.jsx
+++ b/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 (
    <>
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/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(() => {
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/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;
--- a/src/components/Directory/DirectorySchema.js
+++ b/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("")),
        })
      )
--- a/src/components/Directory/ListViewDirectory.jsx
+++ b/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} >
-      <td className="text-start" colSpan={2}>{`${contact.name}`}</td>
+    <tr  >
+      <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>

--- a/src/components/Directory/ManageDirectory.jsx
+++ b/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) => (
--- a/src/components/Directory/UpdateContact.jsx
+++ b/src/components/Directory/UpdateContact.jsx
@ -111,19 +111,29 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
  };

  const onSubmit = async (data) => {
-    debugger;
-    const cleaned = {
-      ...data,
-      contactEmails: (data.contactEmails || []).filter(
-        (e) => e.emailAddress?.trim() !== ""
-      ),
-      contactPhones: (data.contactPhones || []).filter(
-        (p) => p.phoneNumber?.trim() !== ""
-      ),
-    };
+const cleaned = {
+  ...data,
+  contactEmails: (data.contactEmails || [])
+    .filter((e) => e.emailAddress?.trim() !== "")
+    .map((email, index) => {
+      const existingEmail = existingContact.contactEmails?.[index];
+      return existingEmail
+        ? { ...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) => (
--- a/src/components/common/GlobalModel.jsx
+++ b/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

--- a/src/pages/Directory/Directory.jsx
+++ b/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="col-md-4 col-6 flex-grow-1 mb-2 px-1">
+        <div className="row mx-0 px-0 align-items-center">
+          <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">
-                  <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">Category</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>
  );
--- a/src/pages/master/MasterTable.jsx
+++ b/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",
--- a/src/pages/project/ProjectList.jsx
+++ b/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",
--- a/src/utils/constants.jsx
+++ b/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";