added category filter and search

src/components/Directory/CardViewDirectory.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+const CardViewDirectory = ({contact}) => {
+  return (
+    <div class="card text-start ">
+      <div class="card-body d-flex justify-content-between px-1 py-2">
+        <div>
+                  <p className="fs-6 m-0">{contact.name}</p>
+          <small className="simple-text m-0 text-muted"></small>
+        </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 >
+                <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 && <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 && <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-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/ListViewDirectory.jsx

@@ -26,7 +26,7 @@ const getPhoneIcon = (type) => {
 const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
   return (
     <tr key={contact.id} >
-      <td className="text-start" colSpan={2}>{`${contact.name}`}</td>
+      <td className="text-start" style={{ width: '18%' }} colSpan={2}>{`${contact.name}`}</td>
 
       {/* Emails */}
       <td >

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,21 @@ 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";
 
 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(false);
 
   const { contacts, loading } = useDirectory();
+  const { contactCategory, loading: contactCategoryLoading } =
+    useContactCategory();
   const submitContact = async (data) => {
     try {
       let response;
@@ -23,13 +31,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 +62,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 contacts
+      .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));
+  }, [contacts, searchText, selectedCategoryIds]);
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
+    filteredContacts,
+    10
+  );
+
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -84,28 +125,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-sm 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 +253,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,7 +275,7 @@ const Directory = () => {
                 </tr>
               )}
               {!loading &&
-                ContatList.map((contact) => (
+                currentItems.map((contact) => (
                   <ListViewDirectory
                     contact={contact}
                     setSelectedContact={setSelectedContact}
@@ -217,6 +285,64 @@ const Directory = () => {
             </tbody>
           </table>
         </div>
+          ) : (
+                <div className="row">
+          {currentItems.map((item, index) => (
+            <div key={index} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
+              <CardViewDirectory contact={item} />
+            </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>
   );