removed fixed height

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>
   );

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

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) => (

src/components/Directory/UpdateContact.jsx

@@ -386,8 +386,7 @@ 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) => (

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 */}

src/components/common/TagInput.jsx

@@ -60,7 +60,7 @@ useEffect(() => {
   };
 
   const handleInputKeyDown = (e) => {
-    if (e.key === "Enter" && input.trim() !== "") {
+ if ((e.key === "Enter" || e.key === " ") ||  trimmedInput !== "") {
       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="md"
+          size="lg"
         >
           <ManageBucket buckets={buckets} />
         </GlobalModel>

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,47 +168,66 @@ 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>
     </>
   );
 };