From c3643683c86b6a7bc08897edac5327b0d85f209b Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 12:31:48 +0530
Subject: [PATCH 01/32] added filter action while apply filter

---
 src/pages/Directory/DirectoryPageHeader.jsx | 124 +++++++++++++-------
 1 file changed, 79 insertions(+), 45 deletions(-)

diff --git a/src/pages/Directory/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx
index c3ae03cd..fcf603f4 100644
--- a/src/pages/Directory/DirectoryPageHeader.jsx
+++ b/src/pages/Directory/DirectoryPageHeader.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 const DirectoryPageHeader = ({
   searchText,
@@ -16,14 +16,19 @@ const DirectoryPageHeader = ({
   applyFilter,
   loading,
   IsActive,
-    setIsOpenModal,
-  setOpenBucketModal
+  setIsOpenModal,
+  setOpenBucketModal,
 }) => {
+  const [filtered, setFiltered] = useState();
+
+  useEffect(() => {
+    setFiltered(
+      tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
+    );
+  }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
   return (
     <>
-      <div className="row">
-       
-      </div>
+      <div className="row"></div>
       <div className="row mx-0 px-0 align-items-center">
         <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
           <input
@@ -66,22 +71,31 @@ const DirectoryPageHeader = ({
           <div className="dropdown" style={{ width: "fit-content" }}>
             <div className="dropdown" style={{ width: "fit-content" }}>
               <a
-                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
+                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
               >
-                <i className="fa-solid fa-filter ms-1 fs-5"></i>
+                <i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? 'text-primary' : 'text-muted'}`}></i>
+
+                {filtered > 0 && (
+                  <span
+                    className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning"
+                    style={{ fontSize: "0.4rem"}}
+                  >
+                    {filtered}
+                  </span>
+                )}
               </a>
 
               <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
                 <div>
-                  <p className="small-text fw-semibold text-muted m-0">
+                  <p className="text-small text-muted m-0">
                     Filter by
                   </p>
 
                   {/* Bucket Filter */}
                   <div className="mt-1">
-                    <p className="small-text mb-1 fw-semibold">Buckets</p>
+                    <p className="text-small mb-1 ">Buckets</p>
                     <div className="d-flex flex-wrap">
                       {filteredBuckets.map(({ id, name }) => (
                         <div
@@ -97,7 +111,7 @@ const DirectoryPageHeader = ({
                             onChange={() => handleTempBucketChange(id)}
                           />
                           <label
-                            className="form-check-label text-nowrap small-text "
+                            className="form-check-label text-nowrap text-small "
                             htmlFor={`bucket-${id}`}
                           >
                             {name}
@@ -109,7 +123,7 @@ const DirectoryPageHeader = ({
                   <hr className="m-0" />
                   {/* Category Filter */}
                   <div className="mt-1">
-                    <p className="small-text mb-1 fw-semibold">Categories</p>
+                    <p className="text-small mb-1 ">Categories</p>
                     <div className="d-flex flex-wrap">
                       {filteredCategories.map(({ id, name }) => (
                         <div
@@ -125,7 +139,7 @@ const DirectoryPageHeader = ({
                             onChange={() => handleTempCategoryChange(id)}
                           />
                           <label
-                            className="form-check-label text-nowrap small-text"
+                            className="form-check-label text-nowrap text-small"
                             htmlFor={`cat-${id}`}
                           >
                             {name}
@@ -154,49 +168,69 @@ const DirectoryPageHeader = ({
             </div>
           </div>
         </div>
-        <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
-          <label className="switch switch-primary">
-            <input
-              type="checkbox"
-              className="switch-input"
-              onChange={() => setIsActive(!IsActive)}
-              value={IsActive}
-              disabled={loading}
-            />
-            <span className="switch-toggle-slider">
-              <span className="switch-on">
-                {/* <i class="icon-base bx bx-check"></i> */}
-              </span>
-              <span className="switch-off">
-                {/* <i class="icon-base bx bx-x"></i> */}
-              </span>
-            </span>
-            <span className="switch-label small-text">
-              Show Inactive Contacts
-            </span>
-          </label>
+        <div className="col-12 col-md-8 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
           <button
             type="button"
-            className="btn btn-xs btn-primary"
+            className="btn btn-sm btn-primary"
             onClick={() => setIsOpenModal(true)}
           >
             <i className="bx bx-plus-circle me-2"></i>
             New Contact
           </button>
-        </div>
+
+          <div className={`dropdown `}>
+            <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-md text-muted "
+                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 ">
+                  <label className="switch switch-primary align-self-start mb-2">
+                    <input
+                      type="checkbox"
+                      className="switch-input"
+                      onChange={() => setIsActive(!IsActive)}
+                      value={IsActive}
+                      disabled={loading}
+                    />
+                    <span className="switch-toggle-slider">
+                      <span className="switch-on"></span>
+                      <span className="switch-off"></span>
+                    </span>
+                    <span className=" list-inline-item ">
+                      Show Inactive Contacts
+                    </span>
+                  </label>
+                </a>
+              </li>
+              <li>
+                <a
+                  className="dropdown-item cursor-pointer px-2 "
+                  onClick={() => setOpenBucketModal(true)}
+                >
+                  <i className="fa-solid fa-bucket fs-5 me-4"></i>
+                  <span className="align-left">Manage Buckets</span>
+                </a>
+              </li>
+            </ul>
           </div>
-           <div className="col-12 d-flex justify-content-end">
-           <button
-            type="button"
-                  className="btn btn-xs btn-primary"
-                  onClick={()=>setOpenBucketModal(true)}
-          >
-            <i className="bx bx-plus-circle me-2"></i>
-            Manage Buckets
-          </button>
         </div>
+      </div>
     </>
   );
 };
 
 export default DirectoryPageHeader;
+
-- 
2.43.0


From 8fba237173a814bfdd16445eaf1caa4198f01ea8 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 12:33:25 +0530
Subject: [PATCH 02/32] changed font-size

---
 .../Directory/CardViewDirectory.jsx           | 61 ++++++++++---------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
index a7fe7d32..1dc16cec 100644
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -30,7 +30,7 @@ const CardViewDirectory = ({
                 (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
               }
             />{" "}
-            <p className="m-0">{contact.name}</p>
+        <span className="text-heading fs-6">   {contact.name}</span>
           </div>
           <div>
             <div className={`dropdown z-2 ${!IsActive && "d-none"}`}>
@@ -55,20 +55,19 @@ const CardViewDirectory = ({
                     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 className="dropdown-item px-2 cursor-pointer py-1">
+                    <i className="bx bx-edit bx-xs text-primary  me-2"></i>
+                    <span className="align-left ">Modify</span>
                   </a>
                 </li>
                 <li>
                   <a
-                    className="dropdown-item  px-2 py-0"
+                    className="dropdown-item  px-2 cursor-pointer py-1"
                     onClick={() => IsDeleted(contact.id)}
                   >
-                    <i className="bx bx-trash bx-xs me-2"></i>
-                    <span className="align-left small-text">Delete</span>
+                    <i className="bx bx-trash text-danger  bx-xs me-2"></i>
+                    <span className="align-left">Delete</span>
                   </a>
                 </li>
               </ul>
@@ -80,7 +79,7 @@ const CardViewDirectory = ({
           <li className="list-inline-item me-1" style={{ fontSize: "10px" }}>
             <i className="bx bx-building bx-xs"></i>
           </li>
-          <li className="list-inline-item" style={{ fontSize: "10px" }}>
+          <li className="list-inline-item text-small">
             {contact.organization}
           </li>
         </ul>
@@ -96,52 +95,54 @@ const CardViewDirectory = ({
       >
         <hr className="my-0" />
         {contact.contactEmails[0] && (
-          <ul className="list-inline my-1 ">
+          <ul className="list-inline my-1  ">
             <li className="list-inline-item me-2">
-              <i className="bx bx-envelope bx-xs"></i>
+              <i className="bx bx-envelope bx-xs"></i> 
             </li>
-            <li className="list-inline-item small-text">
+            <li className="list-inline-item text-small">
               {contact.contactEmails[0]?.emailAddress}
             </li>
           </ul>
         )}
 
         {contact.contactPhones[0] && (
-          <ul className="list-inline m-0">
-            <li className="list-inline-item me-2">
+          <ul className="list-inline m-0 ">
+            <li className="list-inline-item me-1">
               <i
                 className={` ${getPhoneIcon(
                   contact.contactPhones[0].label
                 )} bx-xs`}
               ></i>
             </li>
-            <li className="list-inline-item small-text">
+            <li className="list-inline-item text-small">
               {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 className="list-inline-item me-2 my-1">
+           <i className="fa-solid fa-tag fs-6"></i>
+            
           </li>
-          <li className="list-inline-item small-text">
+          <li className="list-inline-item text-small active">
             {contact.contactCategory.name}
           </li>
         </ul>
 
-        <ul className="list-inline m-0">
-          {contact.bucketIds.map((bucketId) => (
-            <React.Fragment key={bucketId}>
-              <li className="list-inline-item me-1">
-                <i className="bx bx-pin bx-xs"></i>
-              </li>
-              <li className="list-inline-item small-text">
-                {getBucketNameById(buckets, bucketId)}
-              </li>
-            </React.Fragment>
-          ))}
-        </ul>
+     <ul className="list-inline m-0">
+  {contact.bucketIds?.map((bucketId) => (
+    <li key={bucketId} className="list-inline-item me-1">
+      <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1" style={{padding:'0.1rem 0.3rem'}}>
+        <i className="bx bx-pin bx-xs"></i>
+        <span className="small-text">
+          {getBucketNameById(buckets, bucketId)}
+        </span>
+      </span>
+    </li>
+  ))}
+</ul>
+
       </div>
     </div>
   );
-- 
2.43.0


From dd35de14a7538a05593ce5a0a882db43e4e44cd6 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 12:35:23 +0530
Subject: [PATCH 03/32] removed project select validation, it no longer
 required

---
 src/components/Directory/DirectorySchema.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Directory/DirectorySchema.js b/src/components/Directory/DirectorySchema.js
index 3d30292f..1b61c4ac 100644
--- a/src/components/Directory/DirectorySchema.js
+++ b/src/components/Directory/DirectorySchema.js
@@ -6,7 +6,7 @@ export const ContactSchema = z
     contactCategoryId: z.string().nullable().optional(),
     address: z.string().optional(),
     description: z.string().min(1, { message: "Description is required" }),
-    projectIds: z.array(z.string()).min(1, "Project is required"),
+    projectIds: z.array(z.string()), // min(1, "Project is required")
     contactEmails: z
       .array(
         z.object({
-- 
2.43.0


From 5287b40cd04f1d14854ccc782ce1ffe2883d9108 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 12:37:02 +0530
Subject: [PATCH 04/32] changed font size

---
 src/components/Directory/ManageBucket.jsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index d3a5d5c3..ae7551e3 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -89,7 +89,7 @@ const ManageBucket = () =>
   return (
     <div className="container m-0 p-0" style={{ minHeight: "200px" }}>
       <div className="d-flex justify-content-center">
-        <p className="fs-h6 fw-semibold m-0">Manage Buckets</p>
+        <p className="fs-6 fw-semibold m-0">Manage Buckets</p>
       </div>
       <div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-sm-1 align-items-center">
         <i
@@ -100,7 +100,7 @@ const ManageBucket = () =>
         ></i>
         <button
           type="button"
-          className={`btn btn-xs btn-primary ms-auto ${
+          className={`btn btn-sm btn-primary ms-auto ${
             action_bucket ? "d-none" : ""
           }`}
           onClick={() => setAction_bucket(true)}
@@ -151,10 +151,11 @@ const ManageBucket = () =>
               <tbody className="table-border-bottom-0 overflow-auto">
                 {bucketList.map((bucket) => (
                   <tr key={bucket.id}>
-                    <td colSpan={2} className="text-start">
-                      {bucket.name}
+                 
+                    <td colSpan={2} className="text-start text-wrap" >
+                    <i className="bx bx-right-arrow-alt me-1"></i> {bucket.name}
                     </td>
-                    <td className="text-start d-none d-sm-table-cell">
+                    <td className="text-start d-none d-sm-table-cell text-wrap" style={{width:"60%"}}>
                       {bucket.description}
                     </td>
                     <td className="justify-content-center">
@@ -191,7 +192,8 @@ const ManageBucket = () =>
             <div className="">
               <label className="form-label">Bucket Discription</label>
               <textarea
-                className="form-control form-control-sm"
+                  className="form-control form-control-sm"
+                rows="3"
                 {...register("description")}
               />
               {errors.description && (
-- 
2.43.0


From 991a833dbf9fbc80815df34ca1229c92ec1c7732 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 12:39:54 +0530
Subject: [PATCH 05/32] removed fix height

---
 src/components/Directory/ManageDirectory.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Directory/ManageDirectory.jsx b/src/components/Directory/ManageDirectory.jsx
index 9ac4dac8..31555ff7 100644
--- a/src/components/Directory/ManageDirectory.jsx
+++ b/src/components/Directory/ManageDirectory.jsx
@@ -356,8 +356,7 @@ useEffect(() => {
             <label className="form-label ">Select Label</label>
 
             <ul
-              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
-              style={{ maxHeight: "80px" }}
+              className="d-flex flex-wrap px-1 list-unstyled  mb-0"
             >
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
-- 
2.43.0


From a17a32a7cf2459cedabfbcbbc939ea1eb1a888c4 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 12:46:36 +0530
Subject: [PATCH 06/32] added background color, backdrop

---
 src/components/common/GlobalModel.jsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/common/GlobalModel.jsx b/src/components/common/GlobalModel.jsx
index 61e09750..e30244dd 100644
--- a/src/components/common/GlobalModel.jsx
+++ b/src/components/common/GlobalModel.jsx
@@ -54,7 +54,20 @@ useEffect(() => {
   // Dynamically generate data-bs attributes
   const dataAttributesProps = Object.keys(dataAttributes).map(key => ({
     [key]: dataAttributes[key],
-  }));
+  } ) );
+  
+
+
+   // The gray background
+    const backdropStyle = {
+      position: 'fixed',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: 'rgba(0,0,0,0.3)',
+    };
+
 
   return (
     <div
@@ -65,8 +78,9 @@ useEffect(() => {
       aria-hidden="true"
       ref={modalRef}  // Assign the ref to the modal element
       {...dataAttributesProps}
+      style={backdropStyle}
     >
-      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role}>
+      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role} >
         <div className="modal-content">
           <div className="modal-header p-0">
             {/* Close button inside the modal header */}
-- 
2.43.0


From 3072759ba863f5cea09d23f76985986415de945d Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 12:47:47 +0530
Subject: [PATCH 07/32] incresed modal width for manage buckets

---
 src/pages/Directory/Directory.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index 70dfc102..31178c3e 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -257,7 +257,7 @@ const Directory = () =>
          <GlobalModel
           isOpen={openBucketModal}
           closeModal={() =>setOpenBucketModal(false)}
-          size="md"
+          size="lg"
         >
           <ManageBucket buckets={buckets} />
         </GlobalModel>
-- 
2.43.0


From 466f11382a51f280ad073b772d6e6c71e11ff2f6 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 12:50:47 +0530
Subject: [PATCH 08/32] removed table header icons

---
 .../Directory/DirectoryListTableHeader.jsx    | 23 +------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/src/pages/Directory/DirectoryListTableHeader.jsx b/src/pages/Directory/DirectoryListTableHeader.jsx
index 2f2b251c..a8bc719d 100644
--- a/src/pages/Directory/DirectoryListTableHeader.jsx
+++ b/src/pages/Directory/DirectoryListTableHeader.jsx
@@ -11,43 +11,22 @@ const DirectoryListTableHeader = ( {children, IsActive} ) =>
                   <tr>
             <th colSpan={2}>
               <div className="d-flex align-items-center gap-1">
-                <IconButton
-                  size={12}
-                  iconClass="bx bx-user"
-                  color="secondary"
-                  onClick={() => alert("User icon clicked")}
-                />
                 <span>Name</span>
               </div>
             </th>
             <th className="px-2 text-start">
               <div className="d-flex text-center align-items-center gap-1 justify-content-start">
-                <IconButton
-                  size={12}
-                  iconClass="bx bx-envelope"
-                  color="primary"
-                />
                 <span>Email</span>
               </div>
             </th>
             <th className="mx-2">
               <div className="d-flex align-items-center m-0 p-0 gap-1">
-                <IconButton
-                  size={12}
-                  iconClass="bx bx-phone"
-                  color="warning"
-                  onClick={() => alert("User icon clicked")}
-                />
                 <span>Phone</span>
               </div>
             </th>
             <th className="mx-2">
               <div className="d-flex align-items-center gap-1">
-                <IconButton
-                  size={12}
-                  iconClass="bx bxs-grid-alt"
-                  color="info"
-                />
+              
                 <span>Organization</span>
               </div>
             </th>
-- 
2.43.0


From d3f7c4492293b2001ae7315dc8d3c6780addb6cc Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 12:53:58 +0530
Subject: [PATCH 09/32] removed table header icons

---
 src/components/Directory/ManageBucket.jsx | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index ae7551e3..d8b32bbb 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -116,32 +116,17 @@ const ManageBucket = () =>
               <thead className="p-0">
                 <tr className="p-0">
                   <th colSpan={2}>
-                    <div className="d-flex justify-content-start align-items-center gap-1">
-                      <IconButton
-                        size={12}
-                        iconClass="fa-solid fa-bucket"
-                        color="info"
-                      />
+                    <div className="d-flex justify-content-start align-items-center gap-1 mx-2">
                       <span>Name</span>
                     </div>
                   </th>
                   <th className="text-start d-none d-sm-table-cell">
-                    <div className="d-flex align-items-center justify-content-start gap-1">
-                      <IconButton
-                        size={12}
-                        iconClass="fa-solid fa-file-lines"
-                        color="primary"
-                      />
+                    <div className="d-flex align-items-center justify-content-center gap-1">
                       <span>Description</span>
                     </div>
                   </th>
                   <th>
                     <div className="d-flex align-items-center justify-content-center gap-1">
-                      <IconButton
-                        size={12}
-                        iconClass="fa-solid fa-gear"
-                        color="secondary"
-                      />
                       <span>Action</span>
                     </div>
                   </th>
-- 
2.43.0


From 8786f01b40aadc77a06ac820e34b52dcce55dcba Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 15:01:34 +0530
Subject: [PATCH 10/32] created new component for organization sugger field

---
 src/components/common/InputSuggestion.jsx | 78 +++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 src/components/common/InputSuggestion.jsx

diff --git a/src/components/common/InputSuggestion.jsx b/src/components/common/InputSuggestion.jsx
new file mode 100644
index 00000000..935a1740
--- /dev/null
+++ b/src/components/common/InputSuggestion.jsx
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+
+const InputSuggestions = ({
+  organizationList = [],
+  value,
+  onChange,
+  error,
+}) => {
+  const [filteredList, setFilteredList] = useState([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+
+  const handleInputChange = (e) => {
+    const val = e.target.value;
+    onChange(val);
+
+    const matches = organizationList.filter((org) =>
+      org.toLowerCase().includes(val.toLowerCase())
+    );
+    setFilteredList(matches);
+    setShowSuggestions(true);
+  };
+
+  const handleSelectSuggestion = (val) => {
+    onChange(val);
+    setShowSuggestions(false);
+  };
+
+  return (
+    <div className="position-relative">
+      <input
+        className="form-control form-control-sm"
+        value={value}
+        onChange={handleInputChange}
+        onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
+        onFocus={() => {
+          if (value) setShowSuggestions(true);
+        }}
+      />
+      {showSuggestions && filteredList.length > 0 && (
+        <ul
+          className="list-group shadow-sm position-absolute w-100 bg-white border rounded zindex-tooltip"
+          style={{
+            maxHeight: "180px",
+            overflowY: "auto",
+            marginTop: "2px",
+            zIndex: 1000,
+          }}
+        >
+          {filteredList.map((org) => (
+            <li
+              key={org}
+              className="list-group-item list-group-item-action border-none "
+              style={{
+                cursor: "pointer",
+                padding: "2px 12px",
+                fontSize: "14px",
+                transition: "background-color 0.2s",
+              }}
+              onMouseDown={() => handleSelectSuggestion(org)}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = "#f8f9fa")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = "transparent")
+              }
+            >
+              {org}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {error && <small className="danger-text">{error}</small>}
+    </div>
+  );
+};
+
+export default InputSuggestions;
-- 
2.43.0


From 866049e3856b40ef60d87bbb194c150ae6c4f405 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 15:02:42 +0530
Subject: [PATCH 11/32] added mirgin form bottom for select badge

---
 src/components/common/SelectMultiple.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/SelectMultiple.jsx b/src/components/common/SelectMultiple.jsx
index e0c47760..945a1fb1 100644
--- a/src/components/common/SelectMultiple.jsx
+++ b/src/components/common/SelectMultiple.jsx
@@ -60,7 +60,7 @@ const SelectMultiple = ({
         selectedValues.map((val) => {
           const found = options.find((opt) => opt[valueKey] === val);
           return (
-            <span key={val} className="badge badge-selected-item mx-1">
+            <span key={val} className="badge badge-selected-item mx-1 mb-1">
               {found ? found[labelKey] : ''}
             </span>
           );
-- 
2.43.0


From 478aedf2ae66e9be88ec9be10959e23f91b7f9b3 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 15:03:21 +0530
Subject: [PATCH 12/32] added marign for select item

---
 src/components/common/SelectMultiple.jsx | 96 +++++++++++++-----------
 1 file changed, 51 insertions(+), 45 deletions(-)

diff --git a/src/components/common/SelectMultiple.jsx b/src/components/common/SelectMultiple.jsx
index 945a1fb1..272f8944 100644
--- a/src/components/common/SelectMultiple.jsx
+++ b/src/components/common/SelectMultiple.jsx
@@ -1,21 +1,21 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useFormContext } from 'react-hook-form';
-import './MultiSelectDropdown.css';
+import React, { useState, useEffect, useRef } from "react";
+import { useFormContext } from "react-hook-form";
+import "./MultiSelectDropdown.css";
 
 const SelectMultiple = ({
   name,
   options = [],
-  label = 'Select options',
-  labelKey = 'name',
-  valueKey = 'id',
-  placeholder = 'Please select...',
-  IsLoading = false
+  label = "Select options",
+  labelKey = "name",
+  valueKey = "id",
+  placeholder = "Please select...",
+  IsLoading = false,
 }) => {
   const { setValue, watch } = useFormContext();
   const selectedValues = watch(name) || [];
 
   const [isOpen, setIsOpen] = useState(false);
-  const [searchText, setSearchText] = useState('');
+  const [searchText, setSearchText] = useState("");
   const dropdownRef = useRef(null);
 
   useEffect(() => {
@@ -24,8 +24,8 @@ const SelectMultiple = ({
         setIsOpen(false);
       }
     };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
   const handleCheckboxChange = (value) => {
@@ -44,35 +44,37 @@ const SelectMultiple = ({
     <div ref={dropdownRef} className="multi-select-dropdown-container">
       <label className="form-label mb-1">{label}</label>
 
-   <div
-  className="multi-select-dropdown-header"
-  onClick={() => setIsOpen((prev) => !prev)}
->
-  <span
-    className={
-      selectedValues.length > 0
-        ? 'placeholder-style-selected'
-        : 'placeholder-style'
-    }
-  >
-    <div className="selected-badges-container">
-      {selectedValues.length > 0 ? (
-        selectedValues.map((val) => {
-          const found = options.find((opt) => opt[valueKey] === val);
-          return (
-            <span key={val} className="badge badge-selected-item mx-1 mb-1">
-              {found ? found[labelKey] : ''}
-            </span>
-          );
-        })
-      ) : (
-        <span className="placeholder-text">{placeholder}</span>
-      )}
-    </div>
-  </span>
-  <i className="bx bx-chevron-down"></i>
-</div>
-
+      <div
+        className="multi-select-dropdown-header"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <span
+          className={
+            selectedValues.length > 0
+              ? "placeholder-style-selected"
+              : "placeholder-style"
+          }
+        >
+          <div className="selected-badges-container">
+            {selectedValues.length > 0 ? (
+              selectedValues.map((val) => {
+                const found = options.find((opt) => opt[valueKey] === val);
+                return (
+                  <span
+                    key={val}
+                    className="badge badge-selected-item mx-1 mb-1"
+                  >
+                    {found ? found[labelKey] : ""}
+                  </span>
+                );
+              })
+            ) : (
+              <span className="placeholder-text">{placeholder}</span>
+            )}
+          </div>
+        </span>
+        <i className="bx bx-chevron-down"></i>
+      </div>
 
       {isOpen && (
         <div className="multi-select-dropdown-options">
@@ -94,7 +96,9 @@ const SelectMultiple = ({
             return (
               <div
                 key={valueVal}
-                className={`multi-select-dropdown-option ${isChecked ? 'selected' : ''}`}
+                className={`multi-select-dropdown-option ${
+                  isChecked ? "selected" : ""
+                }`}
               >
                 <input
                   type="checkbox"
@@ -105,14 +109,16 @@ const SelectMultiple = ({
                 <label className="text-secondary">{labelVal}</label>
               </div>
             );
-          } )}
+          })}
           {!IsLoading && filteredOptions.length === 0 && (
-            <div className='multi-select-dropdown-Not-found'>
-              <label className="text-muted">Not Found {`'${searchText}'`}</label>
+            <div className="multi-select-dropdown-Not-found">
+              <label className="text-muted">
+                Not Found {`'${searchText}'`}
+              </label>
             </div>
           )}
           {IsLoading && filteredOptions.length === 0 && (
-             <div className='multi-select-dropdown-Not-found'>
+            <div className="multi-select-dropdown-Not-found">
               <label className="text-muted">Loading...</label>
             </div>
           )}
-- 
2.43.0


From 3f7456e5e73b578b61ed0103d7b4390c56d52430 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 15:04:55 +0530
Subject: [PATCH 13/32] replaced standard input with custom InputSuggestions
 component for organization field

---
 src/components/Directory/ManageDirectory.jsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Directory/ManageDirectory.jsx b/src/components/Directory/ManageDirectory.jsx
index 31555ff7..003b7696 100644
--- a/src/components/Directory/ManageDirectory.jsx
+++ b/src/components/Directory/ManageDirectory.jsx
@@ -14,10 +14,11 @@ import useMaster, {
 } from "../../hooks/masterHook/useMaster";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
-import { useBuckets } from "../../hooks/useDirectory";
+import { useBuckets, useOrganization } from "../../hooks/useDirectory";
 import { useProjects } from "../../hooks/useProjects";
 import SelectMultiple from "../common/SelectMultiple";
 import {ContactSchema} from "./DirectorySchema";
+import InputSuggestions from "../common/InputSuggestion";
 
 
 
@@ -25,13 +26,15 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
   const selectedMaster = useSelector(
     (store) => store.localVariables.selectedMaster
   );
-  const [categoryData, setCategoryData] = useState([]);
+  const [ categoryData, setCategoryData ] = useState( [] );
+  
   const [TagsData, setTagsData] = useState([]);
   const { data, loading } = useMaster();
   const { buckets, loading: bucketsLoaging } = useBuckets();
   const { projects, loading: projectLoading } = useProjects();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
+  const {organizationList,loading:orgLoading} = useOrganization()
   const { contactTags, loading: Tagloading } = useContactTags();
   const [IsSubmitting, setSubmitting] = useState(false);
   const dispatch = useDispatch();
@@ -136,6 +139,7 @@ useEffect(() => {
     setSubmitting(true);
     submitContact(cleaned, reset, setSubmitting);
   };
+  const orgValue = watch("organization")
 
   const handleClosed = () => {
     onCLosed();
@@ -160,10 +164,12 @@ useEffect(() => {
 
           <div className="col-md-6  text-start">
             <label className="form-label">Organization</label>
-            <input
-              className="form-control form-control-sm"
-              {...register("organization")}
-            />
+            <InputSuggestions
+          organizationList={organizationList}
+          value={getValues("organization") || ""}
+          onChange={(val) => setValue("organization", val)}
+          error={errors.organization?.message}
+        />
             {errors.organization && (
               <small className="danger-text">
                 {errors.organization.message}
-- 
2.43.0


From eb0e424a186db3672ca6d9c131af69e75b0d6963 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 15:05:35 +0530
Subject: [PATCH 14/32] created new hook useOrganization

---
 src/hooks/useDirectory.js                | 35 ++++++++++++++++++++++++
 src/repositories/DirectoryRepository.jsx |  2 ++
 2 files changed, 37 insertions(+)

diff --git a/src/hooks/useDirectory.js b/src/hooks/useDirectory.js
index c21044fb..5d113183 100644
--- a/src/hooks/useDirectory.js
+++ b/src/hooks/useDirectory.js
@@ -146,3 +146,38 @@ const fetchContactNotes = async () => {
 
   return { contactNotes, loading, Error };
 }
+
+
+export const useOrganization = () =>
+{
+      const [organizationList, setOrganizationList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [ error, setError ] = useState( "" );
+  
+
+  const fetchOrg = async() =>
+  {
+      const cacheOrg = getCachedData("organizations");
+    if (cacheOrg?.length != 0) {
+        setLoading( true );
+      try {
+        const resp = await DirectoryRepository.GetOrganizations()
+        cacheData( "organizations", resp.data );
+        setOrganizationList( resp.data );
+        setLoading(false)
+      } catch (error) {
+        const msg =
+          error?.response?.data?.message || error?.message || "Something went wrong";
+        setError(msg);
+      } 
+    } else {
+      setOrganizationList(cacheOrg);
+    }
+   }
+
+  useEffect(() => {
+    fetchOrg();
+  }, []);
+
+  return { organizationList, loading, error };
+}
\ No newline at end of file
diff --git a/src/repositories/DirectoryRepository.jsx b/src/repositories/DirectoryRepository.jsx
index 3761017a..5df3b1bf 100644
--- a/src/repositories/DirectoryRepository.jsx
+++ b/src/repositories/DirectoryRepository.jsx
@@ -1,6 +1,8 @@
 import {api} from "../utils/axiosClient";
 
 export const DirectoryRepository = {
+    GetOrganizations:()=>api.get('/api/directory/organization'),
+
     GetContacts: (isActive) => api.get( `/api/directory?active=${isActive}` ),
     CreateContact: ( data ) => api.post( '/api/directory', data ),
     UpdateContact: ( id, data ) => api.put( `/api/directory/${ id }`, data ),
-- 
2.43.0


From 45e88c07a9db57feef5853a5f0278be7d5319412 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 22:17:56 +0530
Subject: [PATCH 15/32] increased padding for suggestion menu

---
 src/components/common/InputSuggestion.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/common/InputSuggestion.jsx b/src/components/common/InputSuggestion.jsx
index 935a1740..1fe6abda 100644
--- a/src/components/common/InputSuggestion.jsx
+++ b/src/components/common/InputSuggestion.jsx
@@ -38,12 +38,13 @@ const InputSuggestions = ({
       />
       {showSuggestions && filteredList.length > 0 && (
         <ul
-          className="list-group shadow-sm position-absolute w-100 bg-white border rounded zindex-tooltip"
+          className="list-group shadow-sm position-absolute w-100 bg-white border  zindex-tooltip"
           style={{
             maxHeight: "180px",
             overflowY: "auto",
             marginTop: "2px",
             zIndex: 1000,
+            borderRadius:"0px"
           }}
         >
           {filteredList.map((org) => (
@@ -52,7 +53,7 @@ const InputSuggestions = ({
               className="list-group-item list-group-item-action border-none "
               style={{
                 cursor: "pointer",
-                padding: "2px 12px",
+                padding: "5px 12px",
                 fontSize: "14px",
                 transition: "background-color 0.2s",
               }}
-- 
2.43.0


From c382d9238d2c5764d1d62ec6c09f474e130900ae Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 22:18:44 +0530
Subject: [PATCH 16/32] created new hook for sorting table data

---
 src/hooks/useSortableData.js | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/hooks/useSortableData.js

diff --git a/src/hooks/useSortableData.js b/src/hooks/useSortableData.js
new file mode 100644
index 00000000..a3043f82
--- /dev/null
+++ b/src/hooks/useSortableData.js
@@ -0,0 +1,35 @@
+
+import { useState, useMemo } from 'react';
+
+export const useSortableData = (items, config = null) => {
+  const [sortConfig, setSortConfig] = useState(config);
+
+  const sortedItems = useMemo(() => {
+    let sortableItems = [...items];
+    if (sortConfig !== null) {
+      sortableItems.sort((a, b) => {
+        const aValue = sortConfig.key(a).toLowerCase();
+        const bValue = sortConfig.key(b).toLowerCase();
+
+        if (aValue < bValue) return sortConfig.direction === 'asc' ? -1 : 1;
+        if (aValue > bValue) return sortConfig.direction === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+    return sortableItems;
+  }, [items, sortConfig]);
+
+  const requestSort = (keyFn) => {
+    let direction = 'asc';
+    if (
+      sortConfig &&
+      sortConfig.key.toString() === keyFn.toString() &&
+      sortConfig.direction === 'asc'
+    ) {
+      direction = 'desc';
+    }
+    setSortConfig({ key: keyFn, direction });
+  };
+
+  return { items: sortedItems, requestSort, sortConfig };
+};
-- 
2.43.0


From 6605293c479b154875bc8b58d19e169bb7df83a1 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 22:23:32 +0530
Subject: [PATCH 17/32] added sorting button to table header

---
 src/components/Directory/ManageBucket.jsx | 38 +++++++++++++++++------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index d8b32bbb..2d71c030 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -8,15 +8,31 @@ import Directory from "../../pages/Directory/Directory";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import { useBuckets } from "../../hooks/useDirectory";
+import EmployeeList from "./EmployeeList";
+import {useAllEmployees, useEmployees} from "../../hooks/useEmployees";
+import {useSortableData} from "../../hooks/useSortableData";
 
 const ManageBucket = () =>
 {
-  const [bucketList, setBucketList] = useState([]);
-
+  const [ bucketList, setBucketList ] = useState( [] );
+  const {employeesList} = useAllEmployees(false)
   const { buckets } = useBuckets();
   const [action_bucket, setAction_bucket] = useState(false);
   const [isSubmitting, setSubmitting] = useState(false);
-  const [selected_bucket, select_bucket] = useState(null);
+  const [ selected_bucket, select_bucket ] = useState( null );
+  const { items: sortedBuckteList, requestSort, sortConfig} = useSortableData(bucketList,{
+    key: (e) => `${e.name}`,
+    direction: 'asc',
+  } )
+  const getSortIcon = () => {
+    if (!sortConfig) return null;
+    return sortConfig.direction === 'asc' ? (
+      <i className="bx bx-caret-up text-secondary"></i>
+    ) : (
+      <i className="bx bx-caret-down text-secondary"></i>
+    );
+  };
+
 
   const {
     register,
@@ -112,12 +128,12 @@ const ManageBucket = () =>
       <div>
         {!action_bucket ? (
           <div className="table-responsive text-nowrap pt-1 px-2 px-sm-0">
-            <table className="table px-2">
-              <thead className="p-0">
+            <table className="table  px-2">
+              <thead className="p-0 table-light">
                 <tr className="p-0">
-                  <th colSpan={2}>
+                  <th colSpan={2} className="cursor-pointer" onClick={() => requestSort((e) => `${e.name} `)}>
                     <div className="d-flex justify-content-start align-items-center gap-1 mx-2">
-                      <span>Name</span>
+                      <span>Name {getSortIcon()}</span>
                     </div>
                   </th>
                   <th className="text-start d-none d-sm-table-cell">
@@ -134,7 +150,7 @@ const ManageBucket = () =>
               </thead>
 
               <tbody className="table-border-bottom-0 overflow-auto">
-                {bucketList.map((bucket) => (
+                {sortedBuckteList.map((bucket) => (
                   <tr key={bucket.id}>
                  
                     <td colSpan={2} className="text-start text-wrap" >
@@ -163,6 +179,7 @@ const ManageBucket = () =>
             </table>
           </div>
         ) : (
+            <>
           <form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
             <div className="">
               <label className="form-label">Bucket Name</label>
@@ -203,7 +220,10 @@ const ManageBucket = () =>
                 {isSubmitting ? "Please wait..." : "Submit"}
               </button>
             </div>
-          </form>
+              </form>
+
+              <EmployeeList employees={ employeesList} />
+              </>
         )}
       </div>
     </div>
-- 
2.43.0


From fc829895778fc5482d97b28b30e20037504b7a9b Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 22:32:47 +0530
Subject: [PATCH 18/32] added .card-minHeight class with 430px min-height

---
 public/assets/vendor/css/core.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css
index a0771547..e65d3662 100644
--- a/public/assets/vendor/css/core.css
+++ b/public/assets/vendor/css/core.css
@@ -5069,6 +5069,9 @@ fieldset:disabled .btn {
 .card-group > .card {
   margin-bottom: var(--bs-card-group-margin);
 }
+.card-minHeight{
+  min-height: 430px;
+}
 @media (min-width: 576px) {
   .card-group {
     display: flex;
-- 
2.43.0


From f8c3a6e76793ab391677bb6cc9f2a9722171138b Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 22:57:10 +0530
Subject: [PATCH 19/32] add card-minHeight class for consistent card sizing

---
 src/pages/Directory/Directory.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index 31178c3e..87151095 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -263,7 +263,7 @@ const Directory = () =>
         </GlobalModel>
       )}
 
-      <div className="card p-2">
+      <div className="card p-2 card-minHeight">
          <DirectoryPageHeader
           searchText={searchText}
           setSearchText={setSearchText}
-- 
2.43.0


From ed72f29f019855d8a048470e2ec60158af785df0 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 23:11:58 +0530
Subject: [PATCH 20/32] removed fixed height from select label field

---
 src/components/Directory/UpdateContact.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Directory/UpdateContact.jsx b/src/components/Directory/UpdateContact.jsx
index 03ae906c..6c9e75a9 100644
--- a/src/components/Directory/UpdateContact.jsx
+++ b/src/components/Directory/UpdateContact.jsx
@@ -386,8 +386,8 @@ await submitContact({ ...cleaned, id: existingContact.id });
             <label className="form-label ">Select Label</label>
 
             <ul
-              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
-              style={{ maxHeight: "80px" }}
+              className="d-flex flex-wrap px-1 list-unstyled  mb-0"
+             
             >
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
-- 
2.43.0


From e316858c0a53cabe1d1426ddcad25787e3b3e64c Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 00:05:27 +0530
Subject: [PATCH 21/32] center empty state messages in employee table with
 spacing

---
 src/components/Directory/EmployeeList.jsx | 147 ++++++++
 src/components/Directory/ManageBucket.jsx | 429 +++++++++++++---------
 2 files changed, 409 insertions(+), 167 deletions(-)
 create mode 100644 src/components/Directory/EmployeeList.jsx

diff --git a/src/components/Directory/EmployeeList.jsx b/src/components/Directory/EmployeeList.jsx
new file mode 100644
index 00000000..1cb1f9a9
--- /dev/null
+++ b/src/components/Directory/EmployeeList.jsx
@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+import { useSortableData } from "../../hooks/useSortableData";
+
+const EmployeeList = ({ employees }) => {
+  const [selectedIds, setSelectedIds] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const handleCheckboxChange = (id) => {
+    setSelectedIds((prev) =>
+      prev.includes(id) ? prev?.filter((empId) => empId !== id) : [...prev, id]
+    );
+  };
+
+  const getSelectedEmployees = () => {
+    console.log("Selected Employee IDs:", selectedIds);
+  };
+
+  const {
+    items: sortedEmployees,
+    requestSort,
+    sortConfig,
+  } = useSortableData(employees, {
+    key: (e) => `${e?.firstName} ${e?.lastName}`,
+    direction: "asc",
+  });
+
+  const getSortIcon = () => {
+    if (!sortConfig) return null;
+    return sortConfig.direction === "asc" ? (
+      <i className="bx bx-caret-up text-secondary"></i>
+    ) : (
+      <i className="bx bx-caret-down text-secondary"></i>
+    );
+  };
+
+  const filteredEmployees = sortedEmployees?.filter((employee) => {
+    const fullName =
+      `${employee?.firstName} ${employee?.lastName}`?.toLowerCase();
+    // const email = employee.email.toLowerCase();
+    // const role = employee.jobRole.toLowerCase();
+    const term = searchTerm?.toLowerCase();
+
+    return fullName.includes(term);
+    // email.includes(term) ||
+    // role.includes(term)
+  });
+
+  return (
+    <>
+      <div className="d-flex justify-content-between mt-2">
+        <p className="m-0 fs-6 fw-normal">Add Employee</p>
+        <div className="px-1">
+          <input
+            type="search"
+            className="form-control form-control-sm"
+            placeholder="Search Employee..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="table-responsive px-1 my-1 px-sm-0">
+        <table className="table align-middle mb-0">
+          <thead className="table-light">
+            <tr>
+              <th
+                onClick={() =>
+                  requestSort((e) => `${e.firstName} ${e.lastName}`)
+                }
+                className="text-start cursor-pointer"
+              >
+                <span className="ps-2">Name {getSortIcon()}</span>
+              </th>
+              <th className="text-start">Role</th>
+              <th scope="col">Status</th>
+              <th className="text-start">Bucket</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {employees.length === 0 ? (
+              <tr>
+                <td colSpan={4} >
+                      <div className="d-flex justify-content-center align-items-center py-5">
+                         No Employee Available
+                        </div>
+                </td>
+              </tr>
+            ) : filteredEmployees.length === 0 ? (
+              <tr className="my-4">
+                  <td colSpan={4}>
+                        <div className="d-flex justify-content-center align-items-center py-5">
+                         No Matchinng Employee Found.
+                        </div>
+                </td>
+              </tr>
+            ) : (
+              filteredEmployees?.map((employee) => (
+                <tr key={employee.id}>
+                  <td>
+                    <div className="d-flex align-items-start text-start">
+                      <input
+                        className="form-check-input me-3 mt-1"
+                        type="checkbox"
+                        checked={selectedIds.includes(employee.id)}
+                        onChange={() => handleCheckboxChange(employee.id)}
+                      />
+                      <div>
+                        <p className="fw-semibold mb-0">
+                          {`${employee.firstName} ${employee.lastName}`}
+                        </p>
+                        <small className="text-muted">{employee.email}</small>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-start">
+                    <small className="text-muted">{employee.jobRole}</small>
+                  </td>
+                  <td>
+                    <span
+                      className={`badge rounded-pill px-3 py-1 ${
+                        employee.isActive
+                          ? "bg-success-subtle text-success"
+                          : "bg-danger-subtle text-danger"
+                      }`}
+                    >
+                      {employee.isActive ? "Active" : "Inactive"}
+                    </span>
+                  </td>
+                  <td className="text-start">
+                    <small className="text-muted">
+                      <i className="fa fa-hashtag" aria-hidden="true"></i>{" "}
+                      {employee.jobRole}
+                    </small>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};
+
+export default EmployeeList;
diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index 2d71c030..64d8667f 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -9,31 +9,36 @@ import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import { useBuckets } from "../../hooks/useDirectory";
 import EmployeeList from "./EmployeeList";
-import {useAllEmployees, useEmployees} from "../../hooks/useEmployees";
-import {useSortableData} from "../../hooks/useSortableData";
+import { useAllEmployees, useEmployees } from "../../hooks/useEmployees";
+import { useSortableData } from "../../hooks/useSortableData";
+import ConfirmModal from "../common/ConfirmModal";
 
-const ManageBucket = () =>
-{
-  const [ bucketList, setBucketList ] = useState( [] );
-  const {employeesList} = useAllEmployees(false)
-  const { buckets } = useBuckets();
+const ManageBucket = () => {
+  const [bucketList, setBucketList] = useState([]);
+  const { employeesList } = useAllEmployees(false);
+  const { buckets, loading } = useBuckets();
   const [action_bucket, setAction_bucket] = useState(false);
   const [isSubmitting, setSubmitting] = useState(false);
-  const [ selected_bucket, select_bucket ] = useState( null );
-  const { items: sortedBuckteList, requestSort, sortConfig} = useSortableData(bucketList,{
+  const [selected_bucket, select_bucket] = useState(null);
+  const [deleteBucket, setDeleteBucket] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const {
+    items: sortedBuckteList,
+    requestSort,
+    sortConfig,
+  } = useSortableData(bucketList, {
     key: (e) => `${e.name}`,
-    direction: 'asc',
-  } )
+    direction: "asc",
+  });
   const getSortIcon = () => {
     if (!sortConfig) return null;
-    return sortConfig.direction === 'asc' ? (
+    return sortConfig.direction === "asc" ? (
       <i className="bx bx-caret-up text-secondary"></i>
     ) : (
       <i className="bx bx-caret-down text-secondary"></i>
     );
   };
 
-
   const {
     register,
     handleSubmit,
@@ -45,188 +50,278 @@ const ManageBucket = () =>
       name: "",
       description: "",
     },
-  } );
-  
- const onSubmit = async (data) => {
-  setSubmitting(true);
-  try {
-    let response;
+  });
 
-    if ( selected_bucket )
-    {
-      let payload ={...data, id:selected_bucket.id}
-      response = await DirectoryRepository.UpdateBuckets(selected_bucket.id, payload);
-      const cache_buckets = getCachedData("buckets") || [];
-      const updatedBuckets = cache_buckets.map((bucket) =>
-        bucket.id === selected_bucket.id ? response?.data : bucket
-      );
-      cacheData( "buckets", updatedBuckets );
-      setBucketList(updatedBuckets);
-      showToast("Bucket Updated Successfully", "success");
-    } else {
-      response = await DirectoryRepository.CreateBuckets(data);
-      const cache_buckets = getCachedData("buckets") || [];
-      const updatedBuckets = [...cache_buckets, response?.data];
-      cacheData( "buckets", updatedBuckets );
-      setBucketList(updatedBuckets);
-      showToast("Bucket Created Successfully", "success");
+  const onSubmit = async (data) => {
+    setSubmitting(true);
+    try {
+      let response;
+
+      if (selected_bucket) {
+        let payload = { ...data, id: selected_bucket.id };
+        response = await DirectoryRepository.UpdateBuckets(
+          selected_bucket.id,
+          payload
+        );
+        const cache_buckets = getCachedData("buckets") || [];
+        const updatedBuckets = cache_buckets.map((bucket) =>
+          bucket.id === selected_bucket.id ? response?.data : bucket
+        );
+        cacheData("buckets", updatedBuckets);
+        setBucketList(updatedBuckets);
+        showToast("Bucket Updated Successfully", "success");
+      } else {
+        response = await DirectoryRepository.CreateBuckets(data);
+        const cache_buckets = getCachedData("buckets") || [];
+        const updatedBuckets = [...cache_buckets, response?.data];
+        cacheData("buckets", updatedBuckets);
+        setBucketList(updatedBuckets);
+        showToast("Bucket Created Successfully", "success");
+      }
+
+      handleBack();
+    } catch (error) {
+      const message =
+        error?.response?.data?.message ||
+        error?.message ||
+        "Error occurred during API call";
+      showToast(message, "error");
     }
+  };
 
-    handleBack();
-  } catch (error) {
-    const message =
-      error?.response?.data?.message ||
-      error?.message ||
-      "Error occurred during API call";
-    showToast(message, "error");
-  } 
-};
-
+  const handleDeleteContact = async () => {
+    try {
+      // delete api calling here
+      showToast("Bucket deleted successfully", "success");
+      setDeleteBucket(null);
+    } catch (error) {
+      const message =
+        error?.response?.data?.message ||
+        error?.message ||
+        "Error occurred during API call.";
+      showToast(message, "error");
+    }
+  };
 
   useEffect(() => {
     reset({
       name: selected_bucket?.name || "",
       description: selected_bucket?.description || "",
     });
-  }, [ selected_bucket ] );
+  }, [selected_bucket]);
+
+  useEffect(() => {
+    setBucketList(buckets);
+  }, [buckets]);
 
-  useEffect( () =>
-  {
-    setBucketList( buckets )
-  }, [ buckets ] )
-  
   const handleBack = () => {
     select_bucket(null);
     setAction_bucket(false);
     setSubmitting(false);
   };
 
+  const sortedBucktesList = sortedBuckteList?.filter((bucket) => {
+    const term = searchTerm?.toLowerCase();
+    const name = bucket.name?.toLowerCase();
+    return name?.includes(term);
+  });
 
   return (
-    <div className="container m-0 p-0" style={{ minHeight: "200px" }}>
-      <div className="d-flex justify-content-center">
-        <p className="fs-6 fw-semibold m-0">Manage Buckets</p>
-      </div>
-      <div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-sm-1 align-items-center">
-        <i
-          className={`fa-solid fa-arrow-left fs-5 cursor-pointer ${
-            action_bucket ? "" : "d-none"
-          }`}
-          onClick={handleBack}
-        ></i>
-        <button
-          type="button"
-          className={`btn btn-sm btn-primary ms-auto ${
-            action_bucket ? "d-none" : ""
-          }`}
-          onClick={() => setAction_bucket(true)}
+    <>
+      {deleteBucket && (
+        <div
+          className={`modal fade  ${deleteBucket ? "show" : ""}`}
+          tabIndex="-1"
+          role="dialog"
+          style={{
+            display: deleteBucket ? "block" : "none",
+            backgroundColor: deleteBucket ? "rgba(0,0,0,0.5)" : "transparent",
+          }}
         >
-          <i className="bx bx-plus-circle me-2"></i>
-          Add Bucket
-        </button>
-      </div>
-      <div>
-        {!action_bucket ? (
-          <div className="table-responsive text-nowrap pt-1 px-2 px-sm-0">
-            <table className="table  px-2">
-              <thead className="p-0 table-light">
-                <tr className="p-0">
-                  <th colSpan={2} className="cursor-pointer" onClick={() => requestSort((e) => `${e.name} `)}>
-                    <div className="d-flex justify-content-start align-items-center gap-1 mx-2">
-                      <span>Name {getSortIcon()}</span>
-                    </div>
-                  </th>
-                  <th className="text-start d-none d-sm-table-cell">
-                    <div className="d-flex align-items-center justify-content-center gap-1">
-                      <span>Description</span>
-                    </div>
-                  </th>
-                  <th>
-                    <div className="d-flex align-items-center justify-content-center gap-1">
-                      <span>Action</span>
-                    </div>
-                  </th>
-                </tr>
-              </thead>
+          <ConfirmModal
+            type={"delete"}
+            header={"Delete Bucket"}
+            message={"Are you sure you want delete?"}
+            onSubmit={handleDeleteContact}
+            onClose={() => setDeleteBucket(null)}
+            // loading={IsDeleting}
+          />
+        </div>
+      )}
 
-              <tbody className="table-border-bottom-0 overflow-auto">
-                {sortedBuckteList.map((bucket) => (
-                  <tr key={bucket.id}>
-                 
-                    <td colSpan={2} className="text-start text-wrap" >
-                    <i className="bx bx-right-arrow-alt me-1"></i> {bucket.name}
-                    </td>
-                    <td className="text-start d-none d-sm-table-cell text-wrap" style={{width:"60%"}}>
-                      {bucket.description}
-                    </td>
-                    <td className="justify-content-center">
-                      <div className="d-flex justify-content-center align-items-center gap-2">
-                        <i
-                          className="bx bx-edit bx-sm text-primary cursor-pointer"
-                          onClick={() => {
-                            select_bucket(bucket);
-                            setAction_bucket(true);
-                          }}
-                        ></i>
-                        <i className="bx bx-trash bx-sm text-danger cursor-pointer"></i>
-                      <i className="bx bx-user-plus  cursor-pointer"></i>
-                        
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        ) : (
-            <>
-          <form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
-            <div className="">
-              <label className="form-label">Bucket Name</label>
+      <div className="container m-0 p-0" style={{ minHeight: "200px" }}>
+        <div className="d-flex justify-content-center">
+          <p className="fs-6 fw-semibold m-0">Manage Buckets</p>
+        </div>
+        <div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-sm-1 align-items-center">
+          {action_bucket ? (
+            <i
+              className={`fa-solid fa-arrow-left fs-5 cursor-pointer`}
+              onClick={handleBack}
+            ></i>
+          ) : (
+            <div>
               <input
+                type="search"
                 className="form-control form-control-sm"
-                {...register("name")}
+                placeholder="Search Bucket ..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
               />
-              {errors.name && (
-                <small className="danger-text">{errors.name.message}</small>
-              )}
             </div>
-            <div className="">
-              <label className="form-label">Bucket Discription</label>
-              <textarea
-                  className="form-control form-control-sm"
-                rows="3"
-                {...register("description")}
-              />
-              {errors.description && (
-                <small className="danger-text">
-                  {errors.description.message}
-                </small>
-              )}
-            </div>
-            <div className="mt-2 d-flex justify-content-center gap-3">
-                <button
-                  type="reset"
-                className="btn btn-sm btn-secondary"
-                disabled={isSubmitting}
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                className="btn btn-sm btn-primary"
-                disabled={isSubmitting}
-              >
-                {isSubmitting ? "Please wait..." : "Submit"}
-              </button>
+          )}
+
+          <button
+            type="button"
+            className={`btn btn-sm btn-primary ms-auto ${
+              action_bucket ? "d-none" : ""
+            }`}
+            onClick={() => setAction_bucket(true)}
+          >
+            <i className="bx bx-plus-circle me-2"></i>
+            Add Bucket
+          </button>
+        </div>
+        <div>
+          {!action_bucket ? (
+            <div className="table-responsive text-nowrap pt-1 px-2 px-sm-0">
+              <table className="table  px-2">
+                <thead className="p-0 table-light">
+                  <tr className="p-0">
+                    <th
+                      colSpan={2}
+                      className="cursor-pointer"
+                      onClick={() => requestSort((e) => `${e.name} `)}
+                    >
+                      <div className="d-flex justify-content-start align-items-center gap-1 mx-2">
+                        <span>Name {getSortIcon()}</span>
+                      </div>
+                    </th>
+                    <th className="text-start d-none d-sm-table-cell">
+                      <div className="d-flex align-items-center justify-content-center gap-1">
+                        <span>Description</span>
+                      </div>
+                    </th>
+                    <th>
+                      <div className="d-flex align-items-center justify-content-center gap-1">
+                        <span>Action</span>
+                      </div>
+                    </th>
+                  </tr>
+                </thead>
+
+                <tbody className="table-border-bottom-0 overflow-auto">
+                  {loading && (
+                    <tr className="mt-10">
+                      <td colSpan={4}>
+                        {" "}
+                        <div className="d-flex justify-content-center align-items-center py-5">
+                          Loading...
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                  {!loading && buckets.length == 0 && (
+                    <tr>
+                      <td colSpan={4}>
+                        <div className="d-flex justify-content-center align-items-center py-5">
+                          Bucket Not Available.
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                  {!loading && sortedBucktesList.length == 0 && (
+                    <tr>
+                      <td className="text-center py-4 h-25" colSpan={4}>
+                        <div className="d-flex justify-content-center align-items-center py-5">
+                          No Matching Bucket Found.
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                  {sortedBucktesList.map((bucket) => (
+                    <tr key={bucket.id}>
+                      <td colSpan={2} className="text-start text-wrap">
+                        <i className="bx bx-right-arrow-alt me-1"></i>{" "}
+                        {bucket.name}
+                      </td>
+                      <td
+                        className="text-start d-none d-sm-table-cell text-wrap"
+                        style={{ width: "60%" }}
+                      >
+                        {bucket.description}
+                      </td>
+                      <td className="justify-content-center">
+                        <div className="d-flex justify-content-center align-items-center gap-2">
+                          <i
+                            className="bx bx-edit bx-sm text-primary cursor-pointer"
+                            onClick={() => {
+                              select_bucket(bucket);
+                              setAction_bucket(true);
+                            }}
+                          ></i>
+                          <i
+                            className="bx bx-trash bx-sm text-danger cursor-pointer"
+                            onClick={() => setDeleteBucket(bucket?.id)}
+                          ></i>
+                          <i className="bx bx-user-plus  cursor-pointer"></i>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
             </div>
+          ) : (
+            <>
+              <form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
+                <div className="">
+                  <label className="form-label">Bucket Name</label>
+                  <input
+                    className="form-control form-control-sm"
+                    {...register("name")}
+                  />
+                  {errors.name && (
+                    <small className="danger-text">{errors.name.message}</small>
+                  )}
+                </div>
+                <div className="">
+                  <label className="form-label">Bucket Discription</label>
+                  <textarea
+                    className="form-control form-control-sm"
+                    rows="3"
+                    {...register("description")}
+                  />
+                  {errors.description && (
+                    <small className="danger-text">
+                      {errors.description.message}
+                    </small>
+                  )}
+                </div>
+                <div className="mt-2 d-flex justify-content-center gap-3">
+                  <button
+                    type="reset"
+                    className="btn btn-sm btn-secondary"
+                    disabled={isSubmitting}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn btn-sm btn-primary"
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting ? "Please wait..." : "Submit"}
+                  </button>
+                </div>
               </form>
 
-              <EmployeeList employees={ employeesList} />
-              </>
-        )}
+              <EmployeeList employees={employeesList} />
+            </>
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
-- 
2.43.0


From a553ac2fe2ed40ba30d8589d818c344050d0bd45 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 10:45:33 +0530
Subject: [PATCH 22/32] added delete bucket api

---
 src/repositories/DirectoryRepository.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/repositories/DirectoryRepository.jsx b/src/repositories/DirectoryRepository.jsx
index 5df3b1bf..8a7d291b 100644
--- a/src/repositories/DirectoryRepository.jsx
+++ b/src/repositories/DirectoryRepository.jsx
@@ -10,7 +10,8 @@ export const DirectoryRepository = {
     
     GetBucktes: () => api.get( `/api/directory/buckets` ),
     CreateBuckets: ( data ) => api.post( `/api/Directory/bucket`, data ),
-    UpdateBuckets: (id,data) => api.put( `/api/Directory/bucket/${id}`,data ),
+    UpdateBuckets: ( id, data ) => api.put( `/api/Directory/bucket/${ id }`, data ),
+    DeleteBucket:(id)=>api.post(`/api/directory/bucket/${id}`),
 
     GetContactProfile: ( id ) => api.get( `/api/directory/profile/${ id }` ),
     
-- 
2.43.0


From 0ec3d0c3e33e55d340aa8d991b7198a02d00e1de Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 11:57:21 +0530
Subject: [PATCH 23/32] created new float button component

---
 src/components/common/FloatingMenu.css | 35 ++++++++++++++++++++++++++
 src/components/common/FloatingMenu.jsx | 33 ++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 src/components/common/FloatingMenu.css
 create mode 100644 src/components/common/FloatingMenu.jsx

diff --git a/src/components/common/FloatingMenu.css b/src/components/common/FloatingMenu.css
new file mode 100644
index 00000000..e4a1844a
--- /dev/null
+++ b/src/components/common/FloatingMenu.css
@@ -0,0 +1,35 @@
+
+.fab-container {
+  position: fixed;
+  bottom: 35px;
+  right: 30px;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
+.fab-main {
+  /* width: 45px;
+  height: 45px;
+  border-radius: 100%;
+  background-color: #0d6efd;
+  color: white;
+  border: none; */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  /* font-size: 24px; */
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.fab-option {
+  pointer-events: auto;
+  margin-bottom: 10px;
+}
+@media (max-width: 768px) {
+  .fab-container {
+    right: 20px;
+    left: 50%;
+    bottom: 20px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/common/FloatingMenu.jsx b/src/components/common/FloatingMenu.jsx
new file mode 100644
index 00000000..de4ee268
--- /dev/null
+++ b/src/components/common/FloatingMenu.jsx
@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import {useFab} from "../../Context/FabContext";
+import './FloatingMenu.css'
+
+const FloatingMenu = () => {
+  const { actions } = useFab(); 
+  const [open, setOpen] = useState(false);
+  if (actions.length === 0) return null; 
+
+  return (
+    <div className="fab-container">
+     {open &&
+  actions.map((action, index) => (
+    <button
+      key={index}
+      className={`badge bg-label-${action.color} rounded-pill mb-2 d-inline-flex align-items-center gap-2 px-3 py-1 cursor-pointer fab-option`}
+      onClick={action.onClick}
+      title={action.label}
+    >
+      <i className={action.icon}></i>
+      <span>{action.label}</span> 
+    </button>
+))}
+
+          <button type="button" className="btn btn-lg btn-icon rounded-pill me-2 btn-primary fab-main " onClick={() => setOpen(!open)}>
+        <span className={`bx ${open ? "bx-x" : "bx-plus"}`}></span>
+      </button>
+    </div>
+  );
+};
+
+export default FloatingMenu;
+
-- 
2.43.0


From fc30db8532fcfb2c279ef401b7429b165273ca5c Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 11:57:48 +0530
Subject: [PATCH 24/32] added validation for bucket at least one bucket
 required

---
 src/components/Directory/DirectorySchema.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Directory/DirectorySchema.js b/src/components/Directory/DirectorySchema.js
index 1b61c4ac..915cf10a 100644
--- a/src/components/Directory/DirectorySchema.js
+++ b/src/components/Directory/DirectorySchema.js
@@ -39,7 +39,7 @@ export const ContactSchema = z
         })
       )
       .min(1, { message: "At least one tag is required" }),
-    bucketIds: z.array(z.string()).optional(),
+    bucketIds: z.array(z.string()).min(1,{message:"At least one Label required"}),
   })
 
 //    .refine((data) => {
-- 
2.43.0


From cae2f2fffd9030675bcc4af45b732c2cae370475 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 11:58:16 +0530
Subject: [PATCH 25/32] intergated delete api

---
 src/components/Directory/ManageBucket.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index 64d8667f..7bc201e0 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -91,7 +91,13 @@ const ManageBucket = () => {
 
   const handleDeleteContact = async () => {
     try {
-      // delete api calling here
+      const resp = await DirectoryRepository.DeleteBucket( deleteBucket );
+         const cache_buckets = getCachedData("buckets") || [];
+        const updatedBuckets = cache_buckets.filter((bucket) =>
+          bucket.id != deleteBucket
+        );
+        cacheData("buckets", updatedBuckets);
+        setBucketList(updatedBuckets);
       showToast("Bucket deleted successfully", "success");
       setDeleteBucket(null);
     } catch (error) {
-- 
2.43.0


From cea094cd8958b7789ec634932bc6b4a155302596 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 11:59:12 +0530
Subject: [PATCH 26/32] added float contaxt , action can take form any
 component

---
 src/Context/FabContext.jsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/Context/FabContext.jsx

diff --git a/src/Context/FabContext.jsx b/src/Context/FabContext.jsx
new file mode 100644
index 00000000..7151e6d7
--- /dev/null
+++ b/src/Context/FabContext.jsx
@@ -0,0 +1,15 @@
+import React, { createContext, useContext, useState } from "react";
+
+const FabContext = createContext();
+
+export const FabProvider = ({ children }) => {
+  const [actions, setActions] = useState([]);
+
+  return (
+    <FabContext.Provider value={{ actions, setActions }}>
+      {children}
+    </FabContext.Provider>
+  );
+};
+
+export const useFab = () => useContext(FabContext);
\ No newline at end of file
-- 
2.43.0


From 1f864ac08cbe284f61a9797e42400d11b621dd54 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 11:59:47 +0530
Subject: [PATCH 27/32] wrapped in context FabContext

---
 src/layouts/HomeLayout.jsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/layouts/HomeLayout.jsx b/src/layouts/HomeLayout.jsx
index 6c437b0d..183b5393 100644
--- a/src/layouts/HomeLayout.jsx
+++ b/src/layouts/HomeLayout.jsx
@@ -4,25 +4,30 @@ import Header from "../components/Layout/Header";
 import Sidebar from "../components/Layout/Sidebar";
 
 import Footer from "../components/Layout/Footer";
+import FloatingMenu from "../components/common/FloatingMenu";
+import { FabProvider } from "../Context/FabContext";
 
 const HomeLayout = () => {
   useEffect(() => {
     Main();
   }, []);
   return (
-    <div className="layout-wrapper layout-content-navbar" >
-      <div className="layout-container" >
-        <Sidebar />
-        <div className="layout-page ">
-          <Header />
-          <div className="content-wrapper"  >
-            <Outlet />
-            <Footer />
+    <FabProvider>
+      <div className="layout-wrapper layout-content-navbar">
+        <div className="layout-container">
+          <Sidebar />
+          <div className="layout-page ">
+            <Header />
+            <div className="content-wrapper">
+              <Outlet />
+              <Footer />
+            </div>
           </div>
+          <FloatingMenu />
+          <div className="layout-overlay layout-menu-toggle"></div>
         </div>
-        <div className="layout-overlay layout-menu-toggle"></div>
       </div>
-    </div>
+    </FabProvider>
   );
 };
 
-- 
2.43.0


From 054a7780dbc544003511202ed9991d3491d57942 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 12:00:28 +0530
Subject: [PATCH 28/32] rename method post to delete

---
 src/repositories/DirectoryRepository.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/repositories/DirectoryRepository.jsx b/src/repositories/DirectoryRepository.jsx
index 8a7d291b..9ab91633 100644
--- a/src/repositories/DirectoryRepository.jsx
+++ b/src/repositories/DirectoryRepository.jsx
@@ -11,7 +11,7 @@ export const DirectoryRepository = {
     GetBucktes: () => api.get( `/api/directory/buckets` ),
     CreateBuckets: ( data ) => api.post( `/api/Directory/bucket`, data ),
     UpdateBuckets: ( id, data ) => api.put( `/api/Directory/bucket/${ id }`, data ),
-    DeleteBucket:(id)=>api.post(`/api/directory/bucket/${id}`),
+    DeleteBucket:(id)=>api.delete(`/api/directory/bucket/${id}`),
 
     GetContactProfile: ( id ) => api.get( `/api/directory/profile/${ id }` ),
     
-- 
2.43.0


From b478e7e4a7e91bc98aed3d3dffe6ead6d602f342 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 12:22:45 +0530
Subject: [PATCH 29/32] added refresh button

---
 src/components/Directory/ManageBucket.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index 7bc201e0..60f59e5b 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -16,7 +16,7 @@ import ConfirmModal from "../common/ConfirmModal";
 const ManageBucket = () => {
   const [bucketList, setBucketList] = useState([]);
   const { employeesList } = useAllEmployees(false);
-  const { buckets, loading } = useBuckets();
+  const { buckets, loading,refetch } = useBuckets();
   const [action_bucket, setAction_bucket] = useState(false);
   const [isSubmitting, setSubmitting] = useState(false);
   const [selected_bucket, select_bucket] = useState(null);
@@ -166,14 +166,20 @@ const ManageBucket = () => {
               onClick={handleBack}
             ></i>
           ) : (
-            <div>
+            <div className="d-flex align-items-center gap-2">
               <input
                 type="search"
                 className="form-control form-control-sm"
                 placeholder="Search Bucket ..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-              />
+                />
+                   <i
+            className={`bx bx-refresh cursor-pointer fs-4 ${loading  ? "spin" : ""
+              }`}
+            title="Refresh"
+            onClick={() => rrefetch()}
+          />
             </div>
           )}
 
-- 
2.43.0


From c6e9d3fcbec53ef4b879aa20a2a6a16e43310d11 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 12:24:11 +0530
Subject: [PATCH 30/32] added bucket fdisplay field in contact profile

---
 .../Directory/ProfileContactDirectory.jsx     | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ProfileContactDirectory.jsx
index 7b7a3ed4..323c9b87 100644
--- a/src/components/Directory/ProfileContactDirectory.jsx
+++ b/src/components/Directory/ProfileContactDirectory.jsx
@@ -6,7 +6,6 @@ import NotesDirectory from "./NotesDirectory";
 
 const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   const { conatProfile, loading } = useContactProfile(contact?.id);
-  const [activeTab, setActiveTab] = useState("profile");
   const [profileContact, setProfileContact] = useState();
 
   useEffect(() => {
@@ -34,9 +33,11 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               <i className="bx bx-building bx-xs"></i>{" "}
               {conatProfile?.organization}
             </span>
+            <span className="small-text">Manager</span>
           </div>
         </div>
-        <div className="d-flex flex-column text-start">
+        <div className="row">
+            <div className="col-12 col-md-6 d-flex flex-column text-start">
           {conatProfile?.contactEmails?.length > 0 && (
             <div className="d-flex mb-2">
               <div style={{ width: "100px", minWidth: "100px" }}>
@@ -61,7 +62,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
               <div>
                 <ul className="list-inline mb-0">
-                  {conatProfile.contactPhones.map((phone, idx) => (
+                  {conatProfile?.contactPhones.map((phone, idx) => (
                     <li className="list-inline-item me-3" key={idx}>
                       <i className="bx bx-phone bx-xs me-1"></i>
                       {phone.phoneNumber}
@@ -87,7 +88,28 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
             </div>
           )}
-        </div>
+          </div>
+          { conatProfile?.buckets?.length > 0 && 
+                <div className="col-12 col-md-6 d-flex flex-column text-start">
+              {conatProfile?.contactEmails?.length > 0 && (
+            <div className="d-flex mb-2 align-items-center">
+              <div style={{ width: "100px", minWidth: "100px" }}>
+                <p className="m-0">Buckets</p>
+              </div>
+              <div>
+                <ul className="list-inline mb-0">
+                  {conatProfile.buckets.map((bucket) => (
+                    <li className="list-inline-item me-2" key={bucket.id}>
+                      <span class="badge bg-label-primary my-1">{ bucket.name}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          )}
+           </div>
+         }
+       </div>
 
         <hr className="my-1" />
         <NotesDirectory
-- 
2.43.0


From a0930197d9fe449c16dd88ecd113dfb50645d5b1 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 12:25:02 +0530
Subject: [PATCH 31/32] modified useBucket for refetch data

---
 src/hooks/useDirectory.js | 118 ++++++++++++++++++--------------------
 1 file changed, 57 insertions(+), 61 deletions(-)

diff --git a/src/hooks/useDirectory.js b/src/hooks/useDirectory.js
index 5d113183..df352b98 100644
--- a/src/hooks/useDirectory.js
+++ b/src/hooks/useDirectory.js
@@ -37,47 +37,46 @@ export const useDirectory = (isActive) => {
   };
 };
 
-
-
 export const useBuckets = () => {
   const [buckets, setBuckets] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
   const fetchBuckets = async () => {
-    const cacheBuckets = getCachedData("buckets");
-    if (!cacheBuckets) {
-        setLoading( true );
-      try {
-        const resp = await DirectoryRepository.GetBucktes(); 
-        setBuckets(resp.data);
-          cacheData( "buckets", resp.data );
-            setLoading(false);
-      } catch (error) {
-        const msg =
-          error?.response?.data?.message || error?.message || "Something went wrong";
-        setError(msg);
-      } 
-    } else {
-      setBuckets(cacheBuckets);
+    setLoading(true);
+    try {
+      const resp = await DirectoryRepository.GetBucktes();
+      setBuckets(resp.data);
+      cacheData("buckets", resp.data);
+      setLoading(false);
+    } catch (error) {
+      const msg =
+        error?.response?.data?.message ||
+        error?.message ||
+        "Something went wrong";
+      setError( msg );
+      setLoading(false);
     }
   };
 
   useEffect(() => {
-    fetchBuckets();
+    const cacheBuckets = getCachedData("buckets");
+    if (!cacheBuckets) {
+      fetchBuckets();
+    } else {
+      setBuckets(cacheBuckets);
+    }
   }, []);
 
-  return { buckets, loading, error };
+  return { buckets, loading, error, refetch: fetchBuckets };
 };
 
-export const useContactProfile = (id) =>
-{
-  const [ conatProfile, setContactProfile ] = useState( null );
-  const [ loading, setLoading ] = useState( false );
-  const [ Error, setError ] = useState( "" );
+export const useContactProfile = (id) => {
+  const [conatProfile, setContactProfile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [Error, setError] = useState("");
 
-
-const fetchContactProfile = async () => {
+  const fetchContactProfile = async () => {
     const cached = getCachedData("Contact Profile");
 
     if (!cached || cached.contactId !== id) {
@@ -88,7 +87,9 @@ const fetchContactProfile = async () => {
         cacheData("Contact Profile", { data: resp.data, contactId: id });
       } catch (err) {
         const msg =
-          err?.response?.data?.message || err?.message || "Something went wrong";
+          err?.response?.data?.message ||
+          err?.message ||
+          "Something went wrong";
         setError(msg);
       } finally {
         setLoading(false);
@@ -99,35 +100,33 @@ const fetchContactProfile = async () => {
   };
 
   useEffect(() => {
-    if ( id )
-    {
+    if (id) {
       fetchContactProfile(id);
     }
   }, [id]);
 
   return { conatProfile, loading, Error };
-}
+};
 
+export const useContactNotes = (id, IsActive) => {
+  const [contactNotes, setContactNotes] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [Error, setError] = useState("");
 
-export const useContactNotes = (id,IsActive) =>
-{
-  const [ contactNotes, setContactNotes ] = useState( [] );
-  const [ loading, setLoading ] = useState( false );
-  const [ Error, setError ] = useState( "" );
-
-
-const fetchContactNotes = async () => {
+  const fetchContactNotes = async () => {
     const cached = getCachedData("Contact Notes");
 
     if (!cached || cached.contactId !== id) {
       setLoading(true);
       try {
-        const resp = await DirectoryRepository.GetNote(id,IsActive);
+        const resp = await DirectoryRepository.GetNote(id, IsActive);
         setContactNotes(resp.data);
         cacheData("Contact Notes", { data: resp.data, contactId: id });
       } catch (err) {
         const msg =
-          err?.response?.data?.message || err?.message || "Something went wrong";
+          err?.response?.data?.message ||
+          err?.message ||
+          "Something went wrong";
         setError(msg);
       } finally {
         setLoading(false);
@@ -138,46 +137,43 @@ const fetchContactNotes = async () => {
   };
 
   useEffect(() => {
-    if ( id )
-    {
+    if (id) {
       fetchContactNotes(id);
     }
   }, [id]);
 
   return { contactNotes, loading, Error };
-}
+};
 
-
-export const useOrganization = () =>
-{
-      const [organizationList, setOrganizationList] = useState([]);
+export const useOrganization = () => {
+  const [organizationList, setOrganizationList] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [ error, setError ] = useState( "" );
-  
+  const [error, setError] = useState("");
 
-  const fetchOrg = async() =>
-  {
-      const cacheOrg = getCachedData("organizations");
+  const fetchOrg = async () => {
+    const cacheOrg = getCachedData("organizations");
     if (cacheOrg?.length != 0) {
-        setLoading( true );
+      setLoading(true);
       try {
-        const resp = await DirectoryRepository.GetOrganizations()
-        cacheData( "organizations", resp.data );
-        setOrganizationList( resp.data );
-        setLoading(false)
+        const resp = await DirectoryRepository.GetOrganizations();
+        cacheData("organizations", resp.data);
+        setOrganizationList(resp.data);
+        setLoading(false);
       } catch (error) {
         const msg =
-          error?.response?.data?.message || error?.message || "Something went wrong";
+          error?.response?.data?.message ||
+          error?.message ||
+          "Something went wrong";
         setError(msg);
-      } 
+      }
     } else {
       setOrganizationList(cacheOrg);
     }
-   }
+  };
 
   useEffect(() => {
     fetchOrg();
   }, []);
 
   return { organizationList, loading, error };
-}
\ No newline at end of file
+};
-- 
2.43.0


From 61e8c782450de52132499d932f76e42dd09e4321 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 12:25:20 +0530
Subject: [PATCH 32/32] added float button

---
 src/pages/Directory/Directory.jsx | 44 +++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index 87151095..b19eecf3 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -18,6 +18,7 @@ import ConfirmModal from "../../components/common/ConfirmModal";
 import DirectoryListTableHeader from "./DirectoryListTableHeader";
 import DirectoryPageHeader from "./DirectoryPageHeader";
 import ManageBucket from "../../components/Directory/ManageBucket";
+import {useFab} from "../../Context/FabContext";
 
 const Directory = () =>
 {
@@ -36,11 +37,12 @@ const Directory = () =>
   const [openBucketModal,setOpenBucketModal] = useState(false)
 
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
-  const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
+  const [ tempSelectedCategoryIds, setTempSelectedCategoryIds ] = useState( [] );
+    const {setActions} = useFab()
 
-  const { contacts, loading } = useDirectory(IsActive);
+  const { contacts, loading , refetch} = useDirectory(IsActive);
   const { contactCategory, loading: contactCategoryLoading } =
-    useContactCategory();
+  useContactCategory();
   const {buckets} = useBuckets();
   
   const submitContact = async (data) => {
@@ -56,15 +58,17 @@ const Directory = () =>
         );
         showToast("Contact updated successfully", "success");
         setIsOpenModal(false);
-        setSelectedContact(null);
+        setSelectedContact( null );
       } else {
         response = await DirectoryRepository.CreateContact(data);
         updatedContacts = [...contacts_cache, response.data];
         showToast("Contact created successfully", "success");
         setIsOpenModal(false);
       }
-       cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
-      setContactList(updatedContacts);
+  
+      // cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
+      // setContactList(updatedContacts);
+      refetch()
     } catch (error) {
       const msg =
         error.response?.data?.message ||
@@ -80,7 +84,7 @@ const Directory = () =>
       const contacts_cache = getCachedData("contacts")?.data || [];
 
       const response = await DirectoryRepository.DeleteContact(deleteContact);
-      const updatedContacts = ContactList.filter((c) => c.id !== deleteContact);
+      const updatedContacts = ContactList.filter( ( c ) => c.id !== deleteContact );
       setContactList(updatedContacts);
       cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
       showToast("Contact deleted successfully", "success");
@@ -155,7 +159,7 @@ const Directory = () =>
 
       return matchesSearch && matchesCategory && matchesBucket;
     }).sort((a, b) => a.name.localeCompare(b.name));
-  }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
+  }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds,selectedContact]);
 
   const applyFilter = () => {
     setSelectedBucketIds(tempSelectedBucketIds);
@@ -192,8 +196,30 @@ const Directory = () =>
     }
   };
 
+
+   useEffect(() => {
+    setActions([
+      {
+        label: "New Contact",
+        icon: "bx bx-plus-circle",
+         color: "warning",
+        onClick: () =>  setIsOpenModal(true),
+      },
+           {
+        label: "Manage Bucket",
+             icon: "fa-solid fa-bucket fs-5 ",
+         color: "primary",
+        onClick: () => setOpenBucketModal(true),
+      },
+   
+    ]);
+
+    return () => setActions([]); // Clean up
+  }, []);
+
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
+    
       <Breadcrumb
         data={[
           { label: "Home", link: "/dashboard" },
@@ -333,6 +359,8 @@ const Directory = () =>
             ))}
           </div>
         )}
+        <div>
+  </div>
 
         {!loading && currentItems < ITEMS_PER_PAGE && (
           <nav aria-label="Page ">
-- 
2.43.0