src/components/Directory/CardViewDirectory.jsx

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

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({

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-6 fw-semibold m-0">Manage Buckets</p>
+        <p className="fs-h6 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-sm btn-primary ms-auto ${
+          className={`btn btn-xs btn-primary ms-auto ${
             action_bucket ? "d-none" : ""
           }`}
           onClick={() => setAction_bucket(true)}
@@ -151,11 +151,10 @@ const ManageBucket = () =>
               <tbody className="table-border-bottom-0 overflow-auto">
                 {bucketList.map((bucket) => (
                   <tr key={bucket.id}>
-                 
+                    <td colSpan={2} className="text-start">
-                    <td colSpan={2} className="text-start text-wrap" >
+                      {bucket.name}
-                    <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%"}}>
+                    <td className="text-start d-none d-sm-table-cell">
                       {bucket.description}
                     </td>
                     <td className="justify-content-center">
@@ -192,8 +191,7 @@ 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 && (

src/components/Directory/ManageDirectory.jsx

@@ -356,7 +356,8 @@ useEffect(() => {
             <label className="form-label ">Select Label</label>
 
             <ul
-              className="d-flex flex-wrap px-1 list-unstyled  mb-0"
+              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
+              style={{ maxHeight: "80px" }}
             >
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (

src/components/Directory/UpdateContact.jsx

@@ -386,7 +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 mb-0"
+              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
+              style={{ maxHeight: "80px" }}
             >
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (

src/components/common/GlobalModel.jsx

@@ -54,20 +54,7 @@ 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
@@ -78,9 +65,8 @@ 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 */}

src/components/common/TagInput.jsx

@@ -60,7 +60,7 @@ useEffect(() => {
   };
 
   const handleInputKeyDown = (e) => {
- if ((e.key === "Enter" || e.key === " ") ||  trimmedInput !== "") {
+    if (e.key === "Enter" && input.trim() !== "") {
       e.preventDefault();
       const existing = options.find(
         (opt) => opt.name.toLowerCase() === input.trim().toLowerCase()

src/pages/Directory/Directory.jsx

@@ -257,7 +257,7 @@ const Directory = () =>
          <GlobalModel
           isOpen={openBucketModal}
           closeModal={() =>setOpenBucketModal(false)}
-          size="lg"
+          size="md"
         >
           <ManageBucket buckets={buckets} />
         </GlobalModel>

src/pages/Directory/DirectoryPageHeader.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 const DirectoryPageHeader = ({
   searchText,
@@ -16,19 +16,14 @@ const DirectoryPageHeader = ({
   applyFilter,
   loading,
   IsActive,
-  setIsOpenModal,
+    setIsOpenModal,
-  setOpenBucketModal,
+  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
@@ -71,31 +66,22 @@ 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 position-relative"
+                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
               >
-                <i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? 'text-primary' : 'text-muted'}`}></i>
+                <i className="fa-solid fa-filter ms-1 fs-5"></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="text-small text-muted m-0">
+                  <p className="small-text fw-semibold text-muted m-0">
                     Filter by
                   </p>
 
                   {/* Bucket Filter */}
                   <div className="mt-1">
-                    <p className="text-small mb-1 ">Buckets</p>
+                    <p className="small-text mb-1 fw-semibold">Buckets</p>
                     <div className="d-flex flex-wrap">
                       {filteredBuckets.map(({ id, name }) => (
                         <div
@@ -111,7 +97,7 @@ const DirectoryPageHeader = ({
                             onChange={() => handleTempBucketChange(id)}
                           />
                           <label
-                            className="form-check-label text-nowrap text-small "
+                            className="form-check-label text-nowrap small-text "
                             htmlFor={`bucket-${id}`}
                           >
                             {name}
@@ -123,7 +109,7 @@ const DirectoryPageHeader = ({
                   <hr className="m-0" />
                   {/* Category Filter */}
                   <div className="mt-1">
-                    <p className="text-small mb-1 ">Categories</p>
+                    <p className="small-text mb-1 fw-semibold">Categories</p>
                     <div className="d-flex flex-wrap">
                       {filteredCategories.map(({ id, name }) => (
                         <div
@@ -139,7 +125,7 @@ const DirectoryPageHeader = ({
                             onChange={() => handleTempCategoryChange(id)}
                           />
                           <label
-                            className="form-check-label text-nowrap text-small"
+                            className="form-check-label text-nowrap small-text"
                             htmlFor={`cat-${id}`}
                           >
                             {name}
@@ -168,66 +154,47 @@ const DirectoryPageHeader = ({
             </div>
           </div>
         </div>
-        <div className="col-12 col-md-8 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
+        <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>
           <button
             type="button"
-            className="btn btn-sm btn-primary"
+            className="btn btn-xs btn-primary"
             onClick={() => setIsOpenModal(true)}
           >
             <i className="bx bx-plus-circle me-2"></i>
             New Contact
           </button>
-
-          <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>
-      </div>
+          </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>
     </>
   );
 };