src/components/Activities/Attendance.jsx

@@ -5,7 +5,6 @@ import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import usePagination from "../../hooks/usePagination";
 import { useNavigate } from "react-router-dom";
-import {ITEMS_PER_PAGE} from "../../utils/constants";
 
 const Attendance = ({ attendance, getRole, handleModalData }) => {
   const [loading, setLoading] = useState(false);
@@ -33,7 +32,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
 
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredData,
-    ITEMS_PER_PAGE
+    10
   );
   return (
     <>

src/components/Activities/AttendcesLogs.jsx

@@ -8,7 +8,6 @@ import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
 import DateRangePicker from "../common/DateRangePicker";
 import { getCachedData } from "../../slices/apiDataManager";
 import usePagination from "../../hooks/usePagination";
-import {ITEMS_PER_PAGE} from "../../utils/constants";
 
 const AttendanceLog = ({ handleModalData, projectId }) => {
   const [attendances, setAttendnaces] = useState([]);
@@ -71,7 +70,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
   const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     sortedFinalList,
-    ITEMS_PER_PAGE
+    10
   );
 
   useEffect(() => {

src/components/Directory/CardViewDirectory.jsx

@@ -1,101 +0,0 @@
-import React from "react";
-import Avatar from "../common/Avatar";
-
-const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
-  return (
-    <div class="card text-start border-1">
-      <div class="card-body d-flex justify-content-between px-1 py-2">
-        <div className="d-flex align-items-center">
-          <Avatar
-            size="xs"
-            firstName={
-              (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
-            }
-            lastName={
-              (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
-            }
-          />{" "}
-          <p className="m-0">{contact.name}</p>
-        </div>
-        <div>
-          <div className="dropdown z-2 ">
-            <button
-              type="button"
-              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
-              <i
-                className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
-                data-bs-toggle="tooltip"
-                data-bs-offset="0,8"
-                data-bs-placement="top"
-                data-bs-custom-class="tooltip-dark"
-                title="More Action"
-              ></i>
-            </button>
-            <ul className="dropdown-menu dropdown-menu-end w-auto">
-              <li onClick={() =>
-              {
-                setSelectedContact(contact)
-                setIsOpenModal(true)
-              }}>
-                <a className="dropdown-item px-2 py-0">
-                  <i className="bx bx-pencil bx-xs me-2"></i>
-                  <span className="align-left small-text">Modify</span>
-                </a>
-              </li>
-              <li>
-                <a className="dropdown-item  px-2 py-0">
-                  <i className="bx bx-trash bx-xs me-2"></i>
-                  <span className="align-left small-text">Delete</span>
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div class="card-footer text-start px-1 py-1">
-        <hr className="my-0" />
-        {contact.contactEmails[0] && (
-          <ul className="list-inline my-1 ">
-            <li className="list-inline-item me-2">
-              <i className="bx bx-envelope bx-xs"></i>
-            </li>
-            <li className="list-inline-item small-text">
-              {contact.contactEmails[0]?.emailAddress}
-            </li>
-          </ul>
-        )}
-
-        {contact.contactPhones[0] && (
-          <ul className="list-inline m-0">
-            <li className="list-inline-item me-2">
-              <i className="bx bx-phone bx-xs"></i>
-            </li>
-            <li className="list-inline-item small-text">
-              {contact.contactPhones[0]?.phoneNumber}
-            </li>
-          </ul>
-        )}
-
-        <ul className="list-inline m-0">
-          <li className="list-inline-item me-2">
-            <i className="bx bx-building bx-xs"></i>
-          </li>
-          <li className="list-inline-item small-text">
-            {contact.organization}
-          </li>
-          <li className="list-inline-item me-2">
-            <i className="bx bx-merge bx-xs"></i>
-          </li>
-          <li className="list-inline-item small-text">
-            {contact.contactCategory.name}
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-export default CardViewDirectory;

src/components/Directory/DirectorySchema.js

@@ -1,57 +0,0 @@
-import { z } from "zod";
-export const ContactSchema = z
-  .object({
-    name: z.string().min(1, "Name is required"),
-    organization: z.string().min(1, "Organization name is required"),
-    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"),
-    contactEmails: z
-      .array(
-        z.object({
-          label: z.string(),
-           emailAddress: z.string().email("Invalid email").or(z.literal("")),
-        })
-      )
-      .optional()
-      .default([]),
-
-    contactPhones: z
-      .array(
-        z.object({
-          label: z.string(),
-          phoneNumber: z
-            .string()
-            .min(6, "Invalid Number")
-            .max(13, "Invalid Number")
-            .regex(/^[\d\s+()-]+$/, "Invalid phone number format").or(z.literal("")),
-        })
-      )
-      .optional()
-      .default([]),
-
-    tags: z
-      .array(
-        z.object({
-          id: z.string().nullable(),
-          name: z.string(),
-        })
-      )
-      .min(1, { message: "At least one tag is required" }),
-    bucketIds: z.array(z.string()).optional(),
-  })
-
-   .refine((data) => {
-  const hasValidEmail = (data.contactEmails || []).some(
-    (e) => e.emailAddress?.trim() !== ""
-  );
-  const hasValidPhone = (data.contactPhones || []).some(
-    (p) => p.phoneNumber?.trim() !== ""
-  );
-
-  return hasValidEmail || hasValidPhone;
-}, {
-  message: "At least one contact (email or phone) is required",
-  path: ["contactPhone"], 
-});

src/components/Directory/ListViewDirectory.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Avatar from '../common/Avatar';
 
 const getEmailIcon = (type) => {
   switch (type) {
@@ -24,25 +23,13 @@ const getPhoneIcon = (type) => {
   }
 };
 
-const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
+const ListViewDirectory = ({ contact }) => {
   return (
-    <tr  >
+    <tr key={contact.id} >
-      <td className="text-start" style={{width: '18%'}} colSpan={2}>
+      <td className="text-start">{`${contact.name}`}</td>
-     <div className="d-flex align-items-center">
-  <Avatar
-  size="xs"
-  firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""}
-  lastName={(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""}
-/>
-
-  <span >{contact?.name || ""}</span>
-</div>
-
-
-      </td>
 
       {/* Emails */}
-      <td >
+      <td colSpan="2">
         <div className="d-flex flex-column align-items-start px-1">
           {contact.contactEmails?.map((email, index) => (
             <span key={email.id}>
@@ -53,6 +40,7 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
         </div>
       </td>
 
+      {/* Phones */}
       <td>
         <div className="d-flex flex-column align-items-start">
           {contact.contactPhones?.map((phone, index) => (
@@ -64,23 +52,21 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
         </div>
       </td>
 
+      {/* Organization */}
+      <td className="text-start">{contact.organization}</td>
 
-      <td className="text-start text-wrap">{contact.organization}</td>
+      {/* Tags */}
-
-  
       <td>
         <div className="d-flex flex-column align-items-start">
-          <span className="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
+          {contact.tags?.map((tag, index) => (
+            <span key={index} className="badge bg-light text-dark mb-1">{tag}</span>
+          ))}
         </div>
       </td>
 
       {/* Actions */}
-      <td className="align-middle text-center ">
+  <td className="align-middle text-center ">
-        <i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
+        <i className='bx bx-edit bx-sm text-primary cursor-pointer'></i>
-        {
-          setSelectedContact( contact )
-          setIsOpenModal(true)
-        }}></i>
          <i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
       </td>
     </tr>

src/components/Directory/ManageDirectory.jsx

@@ -1,54 +1,40 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
-import {
+import { useForm, useFieldArray, FormProvider } from "react-hook-form";
-  useForm,
-  useFieldArray,
-  FormProvider,
-  useFormContext,
-} from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import TagInput from "../common/TagInput";
-import IconButton from "../common/IconButton";
+import { z } from "zod";
-import useMaster, {
+
-  useContactCategory,
+export const directorySchema = z.object({
-  useContactTags,
+  firstName: z.string().min(1, "First Name is required"),
-} from "../../hooks/masterHook/useMaster";
+  lastName: z.string().min(1, "Last Name is required"),
-import { useDispatch, useSelector } from "react-redux";
+  organization: z.string().min(1, "Organization name is required"),
-import { changeMaster } from "../../slices/localVariablesSlice";
+  type: z.string().min(1, "Type is required"),
-import { useBuckets } from "../../hooks/useDirectory";
+  address: z.string().optional(),
-import { useProjects } from "../../hooks/useProjects";
+  description: z.string().min(1, { message: "Description is required" }),
-import SelectMultiple from "../common/SelectMultiple";
+  email: z
-import {ContactSchema} from "./DirectorySchema";
+    .array(z.string().email("Invalid email"))
+    .nonempty("At least one email required"),
+  phone: z
+    .array(z.string().regex(/^\d{10}$/, "Phone must be 10 digits"))
+    .nonempty("At least one phone number is required"),
+  tags: z.array(z.string()).optional(),
+});
 
 
 
-const ManageDirectory = ({ submitContact, onCLosed }) => {
+const ManageDirectory = () => {
-  const selectedMaster = useSelector(
-    (store) => store.localVariables.selectedMaster
-  );
-  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 { contactTags, loading: Tagloading } = useContactTags();
-  const [IsSubmitting, setSubmitting] = useState(false);
-  const dispatch = useDispatch();
-
   const methods = useForm({
-    resolver: zodResolver(ContactSchema),
+    resolver: zodResolver(directorySchema),
     defaultValues: {
-      name: "",
+      firstName: "",
+      lastName: "",
       organization: "",
-      contactCategoryId: null,
+      type: "",
       address: "",
       description: "",
-      projectIds: [],
+      email: [""],
-      contactEmails: [],
+      phone: [""],
-      contactPhones: [],
       tags: [],
-      bucketIds: [],
     },
   });
 
@@ -58,9 +44,6 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
     control,
     getValues,
     trigger,
-    setValue,
-    watch,
-    reset,
     formState: { errors },
   } = methods;
 
@@ -68,361 +51,160 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
     fields: emailFields,
     append: appendEmail,
     remove: removeEmail,
-  } = useFieldArray({ control, name: "contactEmails" });
+  } = useFieldArray({ control, name: "email" });
 
   const {
     fields: phoneFields,
     append: appendPhone,
     remove: removePhone,
-  } = useFieldArray({ control, name: "contactPhones" });
+  } = useFieldArray({ control, name: "phone" });
 
-useEffect(() => {
+  useEffect(() => {
-  if (emailFields.length === 0) {
+    if (emailFields.length === 0) appendEmail(""); 
-    appendEmail({ label: "Work", emailAddress: "" }); 
+    if (phoneFields.length === 0) appendPhone(""); 
-  }
+  }, [emailFields.length, phoneFields.length]);
-  if (phoneFields.length === 0) {
-    appendPhone({ label: "Office", phoneNumber: "" });
-  }
-}, [emailFields.length, phoneFields.length]);
 
+  const onSubmit = (data) => {
+    // console.log("Submitted:\n" + JSON.stringify(data, null, 2));
+  };
 
   const handleAddEmail = async () => {
-    const emails = getValues("contactEmails");
+    const emails = getValues("email");
     const lastIndex = emails.length - 1;
-    const valid = await trigger(`contactEmails.${lastIndex}.emailAddress`);
+    const valid = await trigger(`email.${lastIndex}`);
-    if (valid) {
+    if (valid) appendEmail(""); 
-      appendEmail({ label: "Work", emailAddress: "" });
-    }
   };
 
   const handleAddPhone = async () => {
-    const phones = getValues("contactPhones");
+    const phones = getValues("phone");
     const lastIndex = phones.length - 1;
-    const valid = await trigger(`contactPhones.${lastIndex}.phoneNumber`);
+    const valid = await trigger(`phone.${lastIndex}`);
-    if (valid) {
+    if (valid) appendPhone(""); 
-      appendPhone({ label: "Office", phoneNumber: "" });
-    }
   };
 
-  const watchBucketIds = watch("bucketIds");
-
-  const toggleBucketId = (id) => {
-    const updated = watchBucketIds?.includes(id)
-      ? watchBucketIds.filter((val) => val !== id)
-      : [...watchBucketIds, id];
-
-    setValue("bucketIds", updated, { shouldValidate: true });
-  };
-  const handleCheckboxChange = (id) => {
-    const updated = watchBucketIds.includes(id)
-      ? watchBucketIds.filter((i) => i !== id)
-      : [...watchBucketIds, id];
-
-    setValue("bucketIds", updated, { shouldValidate: true });
-  };
-
-  const onSubmit = ( data ) =>
-  {
-      const cleaned = {
-    ...data,
-    contactEmails: (data.contactEmails || []).filter(
-      (e) => e.emailAddress?.trim() !== ""
-    ),
-    contactPhones: (data.contactPhones || []).filter(
-      (p) => p.phoneNumber?.trim() !== ""
-    ),
-  };
-
-    setSubmitting(true);
-    submitContact(cleaned, reset, setSubmitting);
-  };
-
-  const handleClosed = () => {
-    onCLosed();
-  };
   return (
     <FormProvider {...methods}>
       <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
-        <div className="d-flex justify-content-center align-items-center">
-          <h6 className="m-0 fw-18"> Create New Contact</h6>
-        </div>
         <div className="row">
-          <div className="col-md-6  text-start">
+          <div className="col-md-6">
-            <label className="form-label">Name</label>
+            <label className="form-label">First Name</label>
-            <input
+            <input className="form-control form-control-sm" {...register("firstName")} />
-              className="form-control form-control-sm"
+            {errors.firstName && <small className="danger-text">{errors.firstName.message}</small>}
-              {...register("name")}
-            />
-            {errors.name && (
-              <small className="danger-text">{errors.name.message}</small>
-            )}
           </div>
 
-          <div className="col-md-6  text-start">
+          <div className="col-md-6">
-            <label className="form-label">Organization</label>
+            <label className="form-label">Last Name</label>
-            <input
+            <input className="form-control form-control-sm" {...register("lastName")} />
-              className="form-control form-control-sm"
+            {errors.lastName && <small className="danger-text">{errors.lastName.message}</small>}
-              {...register("organization")}
-            />
-            {errors.organization && (
-              <small className="danger-text">
-                {errors.organization.message}
-              </small>
-            )}
           </div>
         </div>
-        <div className="row mt-1">
+
+        <div className="col-12">
+          <label className="form-label">Organization</label>
+          <input className="form-control form-control-sm" {...register("organization")} />
+          {errors.organization && <small className="danger-text">{errors.organization.message}</small>}
+        </div>
+
+        <div className="row">
           <div className="col-md-6">
-            {emailFields.map((field, index) => (
+            <label className="form-label">Email</label>
-              <div
+            {emailFields.map((field, index) => (<>
-                key={field.id}
+              <div key={field.id} className="d-flex align-items-center mb-1">
-                className="row d-flex align-items-center mb-1"
+                <input
-              >
+                  type="email"
-                <div className="col-5  text-start">
+                  className="form-control form-control-sm"
-                  <label className="form-label">Label</label>
+                  {...register(`email.${index}`)}
-                  <select
+                  placeholder="email@example.com"
-                    className="form-select form-select-sm"
+                />
-                    {...register(`contactEmails.${index}.label`)}
+                {index === emailFields.length - 1 ? (
+                  <button
+                    type="button"
+                    className="btn btn-xs btn-primary ms-1"
+                    onClick={handleAddEmail}
                   >
-                    <option value="Work">Work</option>
+                    <i className="bx bx-plus bx-xs" />
-                    <option value="Personal">Personal</option>
+                  </button>
-                    <option value="Other">Other</option>
+                ) : (
-                  </select>
+                  <button
-                  {errors.contactEmails?.[index]?.label && (
+                    type="button"
-                    <small className="danger-text">
+                    className="btn btn-xs btn-danger ms-1"
-                      {errors.contactEmails[index].label.message}
+                    onClick={() => removeEmail(index)} 
-                    </small>
-                  )}
-                </div>
-                <div className="col-7  text-start">
-                  <label className="form-label">Email</label>
-                  <div className="d-flex align-items-center">
-                    <input
-                      type="email"
-                      className="form-control form-control-sm"
-                      {...register(`contactEmails.${index}.emailAddress`)}
-                      placeholder="email@example.com"
-                    />
-                    {index === emailFields.length - 1 ? (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-primary ms-1"
-                        onClick={handleAddEmail}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-plus-circle bx-xs" />
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-danger ms-1 p-0"
-                        onClick={() => removeEmail(index)}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-minus-circle bx-xs" />
-                      </button>
-                    )}
-                  </div>
-                  {errors.contactEmails?.[index]?.emailAddress && (
-                    <small className="danger-text">
-                      {errors.contactEmails[index].emailAddress.message}
-                    </small>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="col-md-6">
-            {phoneFields.map((field, index) => (
-              <div
-                key={field.id}
-                className="row d-flex align-items-center mb-2"
-              >
-                <div className="col-5  text-start">
-                  <label className="form-label">Label</label>
-                  <select
-                    className="form-select form-select-sm"
-                    {...register(`contactPhones.${index}.label`)}
                   >
-                    <option value="Office">Office</option>
+                    <i className="bx bx-x bx-xs" />
-                    <option value="Personal">Personal</option>
+                  </button>
-                    <option value="Business">Business</option>
+                )}
-                  </select>
-                  {errors.phone?.[index]?.label && (
-                    <small className="danger-text">
-                      {errors.ContactPhones[index].label.message}
-                    </small>
-                  )}
-                </div>
-                <div className="col-7  text-start">
-                  <label className="form-label">Phone</label>
-                  <div className="d-flex align-items-center">
-                    <input
-                      type="text"
-                      className="form-control form-control-sm"
-                      {...register(`contactPhones.${index}.phoneNumber`)}
-                      placeholder="9876543210"
-                    />
-                    {index === phoneFields.length - 1 ? (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-primary ms-1"
-                        onClick={handleAddPhone}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-plus-circle bx-xs" />
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-danger ms-1"
-                        onClick={() => removePhone(index)}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-minus-circle bx-xs" />
-                      </button>
-                    )}
-                  </div>
-                  {errors.contactPhones?.[index]?.phoneNumber && (
-                    <small className="danger-text">
-                      {errors.contactPhones[index].phoneNumber.message}
-                    </small>
-                  )}
-                </div>
               </div>
-            ))}
+              {errors.email?.[index] && (
-          </div>
+        <small className="danger-text ms-2">
-            {errors.contactPhone?.message && (
+          {errors.email[index]?.message}
-        <div className="danger-text">{errors.contactPhone.message}</div>
+        </small>
       )}
+              </>
+            ))}
+                  
+
+          </div>
+
+          <div className="col-md-6">
+            <label className="form-label">Phone</label>
+            {phoneFields.map((field, index) => (<>
+              <div key={field.id} className="d-flex align-items-center mb-1">
+                <input
+                  type="text"
+                  className="form-control form-control-sm"
+                  {...register(`phone.${index}`)}
+                  placeholder="9876543210"
+                />
+                {index === phoneFields.length - 1 ? (
+                  <button
+                    type="button"
+                    className="btn btn-xs btn-primary ms-1"
+                    onClick={handleAddPhone}
+                  >
+                    <i className="bx bx-plus bx-xs" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    className="btn btn-xs btn-danger ms-1"
+                    onClick={() => removePhone(index)} // Remove the phone field
+                  >
+                    <i className="bx bx-x bx-xs" />
+                  </button>
+                )}
+              </div>
+              {errors.phone?.[ index ] && <small className="danger-text ms-2">{errors.phone[ index ]?.message}</small>}
+              </>
+            ))}
+         
+          </div>
         </div>
 
         <div className="row my-1">
-          <div className="col-md-6  text-start">
+          <div className="col-md-6">
-            <label className="form-label">Category</label>
+            <label className="form-label">Type</label>
-            <select
+            <input className="form-control form-control-sm" {...register("type")} />
-              className="form-select form-select-sm"
+            {errors.type && <small className="danger-text">{errors.type.message}</small>}
-              {...register("contactCategoryId")}
-            >
-              {contactCategoryLoading && !contactCategory ? (
-                <option disabled value="">
-                  Loading...
-                </option>
-              ) : (
-                <>
-                  <option disabled  value="">
-                    Select Category
-                  </option>
-                  {contactCategory?.map((cate) => (
-                    <option key={cate.id} value={cate.id}>
-                      {cate.name}
-                    </option>
-                  ))}
-                </>
-              )}
-            </select>
-            {errors.contactCategoryId && (
-              <small className="danger-text">
-                {errors.contactCategoryId.message}
-              </small>
-            )}
           </div>
-          <div className="col-12 col-md-6 text-start">
+          <div className="col-md-6">
-            <SelectMultiple
+            <TagInput name="tags" label="Tags" />
-              name="projectIds"
-              label="Select Projects"
-              options={projects}
-              labelKey="name"
-              valueKey="id"
-              IsLoading={projectLoading}
-            />
-               {errors.projectIds && (
-              <small className="danger-text">
-                {errors.projectIds.message}
-              </small>
-            )}
           </div>
         </div>
 
-        <div className="col-12 text-start">
+        <div className="col-12">
-          <TagInput name="tags" label="Tags" options={contactTags} />
-            {errors.tags && (
-              <small className="danger-text">
-                {errors.tags.message}
-              </small>
-            )}
-        </div>
-        <div className="row">
-          <div className="col-md-12 mt-1 text-start">
-            <label className="form-label ">Select Label</label>
-
-            <ul
-              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
-              style={{ maxHeight: "80px" }}
-            >
-              {bucketsLoaging && <p>Loading...</p>}
-              {buckets?.map((item) => (
-                <li
-                  key={item.id}
-                  className="list-inline-item flex-shrink-0 me-6 mb-2"
-                >
-                  <div className="form-check ">
-                    <input
-                      type="checkbox"
-                      className="form-check-input"
-                      id={`item-${item.id}`}
-                      checked={watchBucketIds.includes(item.id)}
-                      onChange={() => handleCheckboxChange(item.id)}
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor={`item-${item.id}`}
-                    >
-                      {item.name}
-                    </label>
-                  </div>
-                </li>
-              ))}
-            </ul>
-
-            {errors.BucketIds && (
-              <small className="text-danger">{errors.BucketIds.message}</small>
-            )}
-          </div>
-        </div>
-
-        <div className="col-12 text-start">
           <label className="form-label">Address</label>
-          <textarea
+          <textarea className="form-control form-control-sm" rows="2" {...register("address")} />
-            className="form-control form-control-sm"
-            rows="2"
-            {...register("address")}
-          />
         </div>
 
-        <div className="col-12 text-start">
+        <div className="col-12">
           <label className="form-label">Description</label>
-          <textarea
+          <textarea className="form-control form-control-sm" rows="2" {...register("description")} />
-            className="form-control form-control-sm"
+          {errors.description && <small className="danger-text">{errors.description.message}</small>}
-            rows="2"
-            {...register("description")}
-          />
-          {errors.description && (
-            <small className="danger-text">{errors.description.message}</small>
-          )}
         </div>
 
-        <div className="d-flex justify-content-center gap-1 py-2">
+        <div className="d-flex justify-content-evenly py-2">
-          <button className="btn btn-sm btn-primary" type="submit">
+          <button className="btn btn-sm btn-primary" type="submit">Submit</button>
-            {IsSubmitting ? "Please Wait..." : "Submit"}
+          <button className="btn btn-sm btn-secondary" type="button">Cancel</button>
-          </button>
-          <button
-            className="btn btn-sm btn-secondary"
-            type="button"
-            onClick={handleClosed}
-          >
-            Cancel
-          </button>
         </div>
       </form>
     </FormProvider>

src/components/Directory/UpdateContact.jsx

@@ -1,464 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  useForm,
-  useFieldArray,
-  FormProvider,
-  useFormContext,
-} from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import TagInput from "../common/TagInput";
-import IconButton from "../common/IconButton";
-import useMaster, {
-  useContactCategory,
-  useContactTags,
-} from "../../hooks/masterHook/useMaster";
-import { useDispatch, useSelector } from "react-redux";
-import { changeMaster } from "../../slices/localVariablesSlice";
-import { useBuckets } from "../../hooks/useDirectory";
-import { useProjects } from "../../hooks/useProjects";
-import SelectMultiple from "../common/SelectMultiple";
-import { ContactSchema } from "./DirectorySchema";
-
-const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
-  const selectedMaster = useSelector(
-    (store) => store.localVariables.selectedMaster
-  );
-  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 { contactTags, loading: Tagloading } = useContactTags();
-  const [ IsSubmitting, setSubmitting ] = useState( false );
-  const [isInitialized, setIsInitialized] = useState(false);
-  const dispatch = useDispatch();
-
-  const methods = useForm({
-    resolver: zodResolver(ContactSchema),
-    defaultValues: {
-      name: "",
-      organization: "",
-      contactCategoryId: null,
-      address: "",
-      description: "",
-      projectIds: [],
-      contactEmails: [],
-      contactPhones: [],
-      tags: [],
-      bucketIds: [],
-    },
-  });
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    getValues,
-    trigger,
-    setValue,
-    watch,
-    reset,
-    formState: { errors },
-  } = methods;
-
-  const {
-    fields: emailFields,
-    append: appendEmail,
-    remove: removeEmail,
-  } = useFieldArray({ control, name: "contactEmails" });
-
-  const {
-    fields: phoneFields,
-    append: appendPhone,
-    remove: removePhone,
-  } = useFieldArray({ control, name: "contactPhones" });
-
-  const handleAddEmail = async () => {
-    const emails = getValues("contactEmails");
-    const lastIndex = emails.length - 1;
-    const valid = await trigger(`contactEmails.${lastIndex}.emailAddress`);
-    if (valid) {
-      appendEmail({ label: "Work", emailAddress: "" });
-    }
-  };
-
-  const handleAddPhone = async () => {
-    const phones = getValues("contactPhones");
-    const lastIndex = phones.length - 1;
-    const valid = await trigger(`contactPhones.${lastIndex}.phoneNumber`);
-    if (valid) {
-      appendPhone({ label: "Office", phoneNumber: "" });
-    }
-  };
-
-  const watchBucketIds = watch("bucketIds");
-
-  const toggleBucketId = (id) => {
-    const updated = watchBucketIds?.includes(id)
-      ? watchBucketIds.filter((val) => val !== id)
-      : [...watchBucketIds, id];
-
-    setValue("bucketIds", updated, { shouldValidate: true });
-  };
-  const handleCheckboxChange = (id) => {
-    const updated = watchBucketIds.includes(id)
-      ? watchBucketIds.filter((i) => i !== id)
-      : [...watchBucketIds, id];
-
-    setValue("bucketIds", updated, { shouldValidate: true });
-  };
-
-  const onSubmit = async (data) => {
-const cleaned = {
-  ...data,
-  contactEmails: (data.contactEmails || [])
-    .filter((e) => e.emailAddress?.trim() !== "")
-    .map((email, index) => {
-      const existingEmail = existingContact.contactEmails?.[index];
-      return existingEmail
-        ? { ...email, id: existingEmail.id } 
-        : email;
-    }),
-  contactPhones: (data.contactPhones || [])
-    .filter((p) => p.phoneNumber?.trim() !== "")
-    .map((phone, index) => {
-      const existingPhone = existingContact.contactPhones?.[index];
-      return existingPhone
-        ? { ...phone, id: existingPhone.id }
-        : phone;
-    }),
-};
-
-setSubmitting(true);
-await submitContact({ ...cleaned, id: existingContact.id });
-
-    setSubmitting(false);
-    
-  };
-
-  const handleClosed = () => {
-    onCLosed();
-  };
-  useEffect(() => {
-    const isValidContact =
-      existingContact &&
-      typeof existingContact === "object" &&
-      !Array.isArray(existingContact);
-
-    if (!isInitialized &&isValidContact && TagsData) {
-      reset({
-        name: existingContact.name || "",
-        organization: existingContact.organization || "",
-        contactEmails: existingContact.contactEmails || [],
-        contactPhones: existingContact.contactPhones || [],
-        contactCategoryId: existingContact.contactCategory?.id || null,
-        address: existingContact.address || "",
-        description: existingContact.description || "",
-        projectIds: existingContact.projectIds || null,
-        tags: existingContact.tags || [],
-        bucketIds: existingContact.bucketIds || [],
-      } );
-      
-      if (!existingContact.contactPhones || existingContact.contactPhones.length === 0) {
-      appendPhone({ label: "Office", phoneNumber: "" });
-    }
-
-    if (!existingContact.contactEmails || existingContact.contactEmails.length === 0) {
-      appendEmail({ label: "Work", emailAddress: "" });
-      }
-      setIsInitialized(true)
-    }
-    
-    // return()=> reset()
-  }, [ existingContact, buckets, projects ] );
-  
-
-  return (
-    <FormProvider {...methods}>
-      <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
-        <div className="d-flex justify-content-center align-items-center">
-          <h6 className="m-0 fw-18"> Update Contact</h6>
-        </div>
-        <div className="row">
-          <div className="col-md-6  text-start">
-            <label className="form-label">Name</label>
-            <input
-              className="form-control form-control-sm"
-              {...register("name")}
-            />
-            {errors.name && (
-              <small className="danger-text">{errors.name.message}</small>
-            )}
-          </div>
-
-          <div className="col-md-6  text-start">
-            <label className="form-label">Organization</label>
-            <input
-              className="form-control form-control-sm"
-              {...register("organization")}
-            />
-            {errors.organization && (
-              <small className="danger-text">
-                {errors.organization.message}
-              </small>
-            )}
-          </div>
-        </div>
-        <div className="row mt-1">
-          <div className="col-md-6">
-            {emailFields.map((field, index) => (
-              <div
-                key={field.id}
-                className="row d-flex align-items-center mb-1"
-              >
-                <div className="col-5  text-start">
-                  <label className="form-label">Label</label>
-                  <select
-                    className="form-select form-select-sm"
-                    {...register(`contactEmails.${index}.label`)}
-                  >
-                    <option value="Work">Work</option>
-                    <option value="Personal">Personal</option>
-                    <option value="Other">Other</option>
-                  </select>
-                  {errors.contactEmails?.[index]?.label && (
-                    <small className="danger-text">
-                      {errors.contactEmails[index].label.message}
-                    </small>
-                  )}
-                </div>
-                <div className="col-7  text-start">
-                  <label className="form-label">Email</label>
-                  <div className="d-flex align-items-center">
-                    <input
-                      type="email"
-                      className="form-control form-control-sm"
-                      {...register(`contactEmails.${index}.emailAddress`)}
-                      placeholder="email@example.com"
-                    />
-                    {index === emailFields.length - 1 ? (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-primary ms-1"
-                        onClick={handleAddEmail}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-plus-circle bx-xs" />
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-danger ms-1 p-0"
-                        onClick={() => removeEmail(index)}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-minus-circle bx-xs" />
-                      </button>
-                    )}
-                  </div>
-                  {errors.contactEmails?.[index]?.emailAddress && (
-                    <small className="danger-text">
-                      {errors.contactEmails[index].emailAddress.message}
-                    </small>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="col-md-6">
-            {phoneFields.map((field, index) => (
-              <div
-                key={field.id}
-                className="row d-flex align-items-center mb-2"
-              >
-                <div className="col-5  text-start">
-                  <label className="form-label">Label</label>
-                  <select
-                    className="form-select form-select-sm"
-                    {...register(`contactPhones.${index}.label`)}
-                  >
-                    <option value="Office">Office</option>
-                    <option value="Personal">Personal</option>
-                    <option value="Business">Business</option>
-                  </select>
-                  {errors.phone?.[index]?.label && (
-                    <small className="danger-text">
-                      {errors.ContactPhones[index].label.message}
-                    </small>
-                  )}
-                </div>
-                <div className="col-7  text-start">
-                  <label className="form-label">Phone</label>
-                  <div className="d-flex align-items-center">
-                    <input
-                      type="text"
-                      className="form-control form-control-sm"
-                      {...register(`contactPhones.${index}.phoneNumber`)}
-                      placeholder="9876543210"
-                    />
-                    {index === phoneFields.length - 1 ? (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-primary ms-1"
-                        onClick={handleAddPhone}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-plus-circle bx-xs" />
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-danger ms-1"
-                        onClick={() => removePhone(index)}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-minus-circle bx-xs" />
-                      </button>
-                    )}
-                  </div>
-                  {errors.contactPhones?.[index]?.phoneNumber && (
-                    <small className="danger-text">
-                      {errors.contactPhones[index].phoneNumber.message}
-                    </small>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-          {errors.contactPhone?.message && (
-            <div className="danger-text">{errors.contactPhone.message}</div>
-          )}
-        </div>
-
-        <div className="row my-1">
-          <div className="col-md-6  text-start">
-            <label className="form-label">Category</label>
-            <select
-              className="form-select form-select-sm"
-              {...register("contactCategoryId")}
-            >
-              {contactCategoryLoading && !contactCategory ? (
-                <option disabled value="">
-                  Loading...
-                </option>
-              ) : (
-                <>
-                  <option disabled  value="">
-                    Select Category
-                  </option>
-                  {contactCategory?.map((cate) => (
-                    <option key={cate.id} value={cate.id}>
-                      {cate.name}
-                    </option>
-                  ))}
-                </>
-              )}
-            </select>
-            {errors.contactCategoryId && (
-              <small className="danger-text">
-                {errors.contactCategoryId.message}
-              </small>
-            )}
-          </div>
-          <div className="col-12 col-md-6 text-start">
-            <SelectMultiple
-              name="projectIds"
-              label="Select Projects"
-              options={projects}
-              labelKey="name"
-              valueKey="id"
-              IsLoading={projectLoading}
-            />
-            {errors.projectIds && (
-              <small className="danger-text">{errors.projectIds.message}</small>
-            )}
-          </div>
-        </div>
-
-        <div className="col-12 text-start">
-          <TagInput name="tags" label="Tags" options={contactTags} />
-          {errors.tags && (
-            <small className="danger-text">{errors.tags.message}</small>
-          )}
-        </div>
-        <div className="row">
-          <div className="col-md-12 mt-1 text-start">
-            <label className="form-label ">Select Label</label>
-
-            <ul
-              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
-              style={{ maxHeight: "80px" }}
-            >
-              {bucketsLoaging && <p>Loading...</p>}
-              {buckets?.map((item) => (
-                <li
-                  key={item.id}
-                  className="list-inline-item flex-shrink-0 me-6 mb-2"
-                >
-                  <div className="form-check ">
-                    <input
-                      type="checkbox"
-                      className="form-check-input"
-                      id={`item-${item.id}`}
-                      checked={watchBucketIds.includes(item.id)}
-                      onChange={() => handleCheckboxChange(item.id)}
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor={`item-${item.id}`}
-                    >
-                      {item.name}
-                    </label>
-                  </div>
-                </li>
-              ))}
-            </ul>
-
-            {errors.BucketIds && (
-              <small className="text-danger">{errors.BucketIds.message}</small>
-            )}
-          </div>
-        </div>
-
-        <div className="col-12 text-start">
-          <label className="form-label">Address</label>
-          <textarea
-            className="form-control form-control-sm"
-            rows="2"
-            {...register("address")}
-          />
-        </div>
-
-        <div className="col-12 text-start">
-          <label className="form-label">Description</label>
-          <textarea
-            className="form-control form-control-sm"
-            rows="2"
-            {...register("description")}
-          />
-          {errors.description && (
-            <small className="danger-text">{errors.description.message}</small>
-          )}
-        </div>
-
-        <div className="d-flex justify-content-center gap-1 py-2">
-          <button className="btn btn-sm btn-primary" type="submit" disabled={IsSubmitting}>
-            {IsSubmitting ? "Please Wait..." : "Update"}
-          </button>
-          <button
-            className="btn btn-sm btn-secondary"
-            type="button"
-            onClick={handleClosed}
-            disabled={IsSubmitting}
-          >
-            Cancel
-          </button>
-        </div>
-      </form>
-    </FormProvider>
-  );
-};
-
-export default UpdateContact;

src/components/common/GlobalModel.jsx

@@ -12,40 +12,28 @@ const GlobalModel = ({
 }) => {
   const modalRef = useRef(null);  // Reference to the modal element
 
-useEffect(() => {
+  useEffect(() => {
-  const modalElement = modalRef.current;
+    const modalElement = modalRef.current;
-  const modalInstance = new window.bootstrap.Modal(modalElement, {
+    const modalInstance = new window.bootstrap.Modal(modalElement);
-    backdrop: false,
-  });
 
-  if (isOpen) {
+    // Show modal if isOpen is true
-    modalInstance.show();
+    if (isOpen) {
-  } else {
+      modalInstance.show();
-    modalInstance.hide();
+    } else {
-  }
+      modalInstance.hide();
+    }
 
-  const handleHideModal = () => {
+    // Handle modal hide event to invoke the closeModal function
-    closeModal();
+    const handleHideModal = () => {
-
+      closeModal();  // Close the modal via React state
-    // ✅ FIX: Remove any lingering body classes/styles
+    };
-    document.body.classList.remove('modal-open');
-    document.body.style.overflow = '';
-    document.body.style.paddingRight = '';
-  };
-
-  modalElement.addEventListener('hidden.bs.modal', handleHideModal);
-
-  return () => {
-    modalElement.removeEventListener('hidden.bs.modal', handleHideModal);
-
-    // Also clean up just in case component unmounts
-    document.body.classList.remove('modal-open');
-    document.body.style.overflow = '';
-    document.body.style.paddingRight = '';
-  };
-}, [isOpen, closeModal]);
 
+    modalElement.addEventListener('hidden.bs.modal', handleHideModal);
 
+    return () => {
+      modalElement.removeEventListener('hidden.bs.modal', handleHideModal);
+    };
+  }, [isOpen, closeModal]);
 
   // Dynamically set the modal size classes (modal-sm, modal-lg, modal-xl)
   const modalSizeClass = size ? `modal-${size}` : '';  // Default is empty if no size is specified

src/components/common/MultiSelectDropdown.css

@@ -1,158 +0,0 @@
-/* Container for the multi-select dropdown */
-.multi-select-dropdown-container {
-  position: relative;
-}
-
-
-
-/* Header of the dropdown */
-.multi-select-dropdown-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.multi-select-dropdown-header .placeholder-style {
-  color: #6c757d;
-  font-size: 14px;
-}
-
-.multi-select-dropdown-header .placeholder-style-selected {
-  /* color: #0d6efd; */
-
-  font-size: 12px;
-}
-
-/* Arrow icon */
-.multi-select-dropdown-arrow {
-  width: 14px;
-  height: 14px;
-  margin-left: 10px;
-}
-
-/* Dropdown options */
-.multi-select-dropdown-options {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  background-color: white;
-  max-height: 250px;
-  overflow-y: auto;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-  margin-top: 5px;
-}
-
-/* Search input */
-.multi-select-dropdown-search {
-  padding: 4px;
-  border-bottom: 1px solid #f1f3f5;
-}
-
-.multi-select-dropdown-search-input {
-  width: 100%;
-  padding: 4px;
-  border: none;
-  outline: none;
-  background-color: #f8f9fa;
-  border-radius: 6px;
-  font-size: 14px;
-}
-
-/* Select All checkbox */
-.multi-select-dropdown-select-all {
-  display: flex;
-  align-items: center;
-  padding: 4px;
-}
-
-.multi-select-dropdown-select-all .custom-checkbox {
-  margin-right: 8px;
-}
-
-.multi-select-dropdown-select-all-label {
-  font-size: 14px;
-  color: #333;
-}
-
-/* Options in dropdown */
-.multi-select-dropdown-option {
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-.multi-select-dropdown-option:hover {
-  background-color: #f1f3f5;
-}
-
-.multi-select-dropdown-option.selected {
-  background-color: #dbe7ff;
-  color: #0d6efd;
-}
-
-.multi-select-dropdown-option input[type="checkbox"] {
-  margin-right: 10px;
-}
-
-/* Custom checkbox */
-.custom-checkbox {
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  background-color: white;
-  cursor: pointer;
-  position: relative;
-  margin-right: 10px;
-}
-
-.custom-checkbox:checked {
-  background-color: #0d6efd;
-  border-color: #0d6efd;
-}
-
-.custom-checkbox:checked::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-}
-.multi-select-dropdown-Not-found{
- text-align: center;
- padding: 1px 3px;
-}
-.multi-select-dropdown-Not-found:hover {
-  background: #e2dfdf;
- 
-
-}
-
-/* Responsive styles */
-@media (max-width: 767px) {
-  .multi-select-dropdown-container {
-    width: 100%;
-  }
-
-  .multi-select-dropdown-header {
-    font-size: 12px;
-  }
-
-  .multi-select-dropdown-options {
-    width: 100%;
-    max-height: 200px;
-  }
-}

src/components/common/SelectMultiple.jsx

@@ -1,125 +0,0 @@
-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
-}) => {
-  const { setValue, watch } = useFormContext();
-  const selectedValues = watch(name) || [];
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchText, setSearchText] = useState('');
-  const dropdownRef = useRef(null);
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  const handleCheckboxChange = (value) => {
-    const updated = selectedValues.includes(value)
-      ? selectedValues.filter((v) => v !== value)
-      : [...selectedValues, value];
-
-    setValue(name, updated, { shouldValidate: true });
-  };
-
-  const filteredOptions = options.filter((item) =>
-    item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
-  );
-
-  return (
-    <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">
-              {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">
-          <div className="multi-select-dropdown-search">
-            <input
-              type="text"
-              placeholder="Search..."
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-              className="multi-select-dropdown-search-input"
-            />
-          </div>
-
-          {filteredOptions.map((item) => {
-            const labelVal = item[labelKey];
-            const valueVal = item[valueKey];
-            const isChecked = selectedValues.includes(valueVal);
-
-            return (
-              <div
-                key={valueVal}
-                className={`multi-select-dropdown-option ${isChecked ? 'selected' : ''}`}
-              >
-                <input
-                  type="checkbox"
-                  className="custom-checkbox form-check-input"
-                  checked={isChecked}
-                  onChange={() => handleCheckboxChange(valueVal)}
-                />
-                <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>
-          )}
-          {IsLoading && filteredOptions.length === 0 && (
-             <div className='multi-select-dropdown-Not-found'>
-              <label className="text-muted">Loading...</label>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SelectMultiple;

src/components/common/TagInput.jsx

@@ -1,85 +1,32 @@
-import { useFormContext, useWatch } from "react-hook-form";
+import React, { useState, useEffect } from "react";
-import React, { useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
 
 const TagInput = ({
   label = "Tags",
   name = "tags",
-  placeholder = "Start typing to add... like employee, manager",
+  placeholder = "Enter ... ",
   color = "#e9ecef",
-  options = [],
 }) => {
   const [tags, setTags] = useState([]);
   const [input, setInput] = useState("");
-  const [suggestions, setSuggestions] = useState([]);
+  const { setValue } = useFormContext();
-  const { setValue, trigger, control } = useFormContext();
-  const watchedTags = useWatch({ control, name });
-
-
-useEffect(() => {
-  if (
-    Array.isArray(watchedTags) &&
-    JSON.stringify(tags) !== JSON.stringify(watchedTags)
-  ) {
-    setTags(watchedTags);
-  }
-}, [JSON.stringify(watchedTags)]);
 
   useEffect(() => {
-    if (input.trim() === "") {
+    setValue(name, tags); // sync to form when tags change
-      setSuggestions([]);
+  }, [tags, name, setValue]);
-    } else {
-      const filtered = options?.filter(
-        (opt) =>
-          opt?.name?.toLowerCase()?.includes(input.toLowerCase()) &&
-          !tags?.some((tag) => tag.name === opt.name)
-      );
-      setSuggestions(filtered);
-    }
-  }, [input, options, tags]);
 
-  const addTag = async (tagObj) => {
+  const addTag = (e) => {
-    if (!tags.some((tag) => tag.name === tagObj.name)) {
+    e.preventDefault();
-      const cleanedTag = {
+    const trimmed = input.trim();
-        id: tagObj.id ?? null,
+    if (trimmed !== "" && !tags.includes(trimmed)) {
-        name: tagObj.name,
+      setTags([...tags, trimmed]);
-      };
-      const newTags = [...tags, cleanedTag];
-      setTags(newTags);
-      setValue(name, newTags, { shouldValidate: true });
-      await trigger(name);
       setInput("");
-      setSuggestions([]);
     }
   };
 
-  const removeTag = (indexToRemove) => {
+  const removeTag = (removeIndex) => {
-    const newTags = tags.filter((_, i) => i !== indexToRemove);
+    const updated = tags.filter((_, i) => i !== removeIndex);
-    setTags(newTags);
+    setTags(updated);
-    setValue(name, newTags, { shouldValidate: true });
-    trigger(name);
-  };
-
-  const handleInputKeyDown = (e) => {
-    if (e.key === "Enter" && input.trim() !== "") {
-      e.preventDefault();
-      const existing = options.find(
-        (opt) => opt.name.toLowerCase() === input.trim().toLowerCase()
-      );
-      const newTag = existing
-        ? existing
-        : {
-            id: null,
-            name: input.trim(),
-            description: input.trim(),
-          };
-      addTag(newTag);
-    } else if (e.key === "Backspace" && input === "") {
-      setTags((prev) => prev.slice(0, -1));
-    }
-  };
-
-  const handleSuggestionClick = (suggestion) => {
-    addTag(suggestion);
   };
 
   const backgroundColor = color || "#f8f9fa";
@@ -87,76 +34,35 @@ useEffect(() => {
 
   return (
     <>
-      <label htmlFor={name} className="form-label">
+      <label htmlFor={name} className="form-label">{label}</label>
-        {label}
+      <div className="form-control form-control-sm d-flex justify-content-start flex-wrap gap-1" style={{ minHeight: "12px" }}>
-      </label>
+        {tags.map((tag, i) => (
-
+          <span
-      <div
+            key={i}
-        className="form-control form-control-sm p-1"
+            className="d-flex align-items-center"
-        style={{ minHeight: "38px", position: "relative" }}
-      >
-        <div className="d-flex flex-wrap align-items-center gap-1">
-          {tags.map((tag, index) => (
-            <span
-              key={index}
-              className="d-flex align-items-center"
-              style={{
-                color: iconColor,
-                backgroundColor,
-                padding: "2px 6px",
-                borderRadius: "2px",
-                fontSize: "0.85rem",
-              }}
-            >
-              {tag.name}
-              <i
-                className="bx bx-x bx-xs ms-1"
-                onClick={() => removeTag(index)}
-                style={{ cursor: "pointer" }}
-              />
-            </span>
-          ))}
-
-          <input
-            type="text"
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleInputKeyDown}
-            placeholder={placeholder}
             style={{
-              border: "none",
+              color: iconColor,
-              outline: "none",
+              backgroundColor,
-              flex: 1,
+              padding: "2px 3px",
-              minWidth: "120px",
+              borderRadius: "2px"
-            }}
-          />
-        </div>
-
-        {suggestions.length > 0 && (
-          <ul
-            className="list-group position-absolute mt-1 bg-white w-50 shadow-sm "
-            style={{
-              zIndex: 1000,
-              maxHeight: "150px",
-              overflowY: "auto",
-              boxShadow:"0px 4px 10px rgba(0, 0, 0, 0.2)",borderRadius:"3px",border:"1px solid #ddd"
             }}
           >
-            {suggestions.map((sugg, i) => (
+            {tag}
-              <li
+            <i className="bx bx-x bx-xs ms-1" onClick={() => removeTag(i)}></i>
-                key={i}
+          </span>
-                className="dropdown-item p-1 hoverBox"
+        ))}
-                onClick={() => handleSuggestionClick(sugg)}
+        <input
-                style={{cursor: "pointer", fontSize: "0.875rem"}}
+          type="text"
-                
+          className="border-0 flex-grow-1"
-              >
+          value={input}
-                {sugg.name}
+          onChange={(e) => setInput(e.target.value)}
-              </li>
+          onKeyDown={(e) => (e.key === "Enter" ? addTag(e) : null)}
-            ))}
+          placeholder={placeholder}
-          </ul>
+          style={{ outline: "none", minWidth: "120px" }}
-        )}
+        />
       </div>
     </>
   );
 };
+
 export default TagInput;

src/components/master/CreateContactTag.jsx

@@ -41,6 +41,7 @@ const CreateContactTag = ({onClose}) => {
         const updatedData = [...cachedData, resp?.data]; 
         cacheData("Contact Tag", updatedData); 
         showToast("Contact Tag Added successfully.", "success");
+    console.log(getCachedData("Contact Tag"))
         onClose()
       }).catch((error)=>{
         showToast(error?.response?.data?.message, "error");

src/components/master/EditContactTag.jsx

@@ -1,126 +0,0 @@
-import React, { useEffect,useState } from 'react'
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { MasterRespository } from '../../repositories/MastersRepository';
-import { clearApiCacheKey } from '../../slices/apiCacheSlice';
-import { getCachedData,cacheData } from '../../slices/apiDataManager';
-import showToast from '../../services/toastService';
-
-
-const schema = z.object({
-  name: z.string().min(1, { message: "Tag name is required" }),
-  description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
-});
-
-const EditContactTag= ({data,onClose}) => {
-
-  const[isLoading,setIsLoading] = useState(false)
-     const {
-      register,
-      handleSubmit,
-      formState: { errors },reset
-      
-    } = useForm({
-      resolver: zodResolver(schema),
-      defaultValues: {
-       name: data?.name || "",
-        description:data?.description || "",
-      
-      },
-    });
-    
-  const onSubmit = (formdata) => {
-      setIsLoading(true)
-      const result = {
-        id:data?.id,
-        name: formdata?.name,
-        description: formdata.description,  
-      };
-
-     
-    
-      MasterRespository.updateContactTag(data?.id,result).then((resp)=>{
-        setIsLoading(false) 
-        showToast("Contact Tag Updated successfully.", "success");
-        const cachedData = getCachedData("Contact Tag");
-        if (cachedData) {
-
-          const updatedData = cachedData.map((category) =>
-            category.id === data?.id ? { ...category, ...resp.data } : category
-          );
-          cacheData("Contact Tag", updatedData);
-        }
-
-        onClose()
-      }).catch((error)=>{
-         showToast(error?.response?.data?.message, "error")
-        setIsLoading(false)
-      })
-     
-    };
-    const resetForm = () => {
-      reset({
-        name: "",
-        description: ""
-      });
-      setDescriptionLength(0);
-    }    
-
-    useEffect(()=>{
-        return ()=>resetForm()
-    },[])
-    
-    const [descriptionLength, setDescriptionLength] = useState(0);
-    const maxDescriptionLength = 255;    
-  return (<>
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-        <div className="col-12 col-md-12">
-          <label className="form-label">Tag Name</label>
-          <input type="text" 
-           {...register("name")} 
-             className={`form-control ${errors.name ? 'is-invalids' : ''}`}
-          />
-          {errors.name && <p className="text-danger">{errors.name.message}</p>}
-        </div> 
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
-        <textarea
-          rows="3"
-          {...register("description")}
-          className={`form-control ${errors.description ? 'is-invalids' : ''}`}
-          onChange={(e) => {
-            setDescriptionLength(e.target.value.length);
-            register("description").onChange(e);
-          }}
-        ></textarea>
-        <div className="text-end small text-muted">
-          {maxDescriptionLength - descriptionLength} characters left
-        </div>
-          {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
-          )}
-        </div>
-
-        <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
-         {isLoading? "Please Wait...":"Submit"}       
-        </button>
-        <button
-          type="reset"
-          className="btn btn-sm btn-label-secondary "
-          data-bs-dismiss="modal"
-          aria-label="Close"
-        >
-          Cancel
-        </button>
-      </div>
-     
-    </form>
- 
-    </>
-  )
-}
-
-export default EditContactTag;

src/components/master/MasterModal.jsx

@@ -15,7 +15,6 @@ import CreateWorkCategory from "./CreateWorkCategory";
 import EditWorkCategory from "./EditWorkCategory";
 import CreateCategory from "./CreateContactCategory";
 import CreateContactTag from "./CreateContactTag";
-import EditContactTag from "./EditContactTag";
 
 
 const MasterModal = ({ modaldata, closeModal }) => {
@@ -136,9 +135,6 @@ const MasterModal = ({ modaldata, closeModal }) => {
              {modaldata.modalType === "Contact Tag" && (
               <CreateContactTag data={modaldata.item} onClose={closeModal} />
             )}
-              {modaldata.modalType === "Edit-Contact Tag" && (
-              <EditContactTag data={modaldata.item} onClose={closeModal} />
-            )}
           </div>
         </div>
       </div>

src/hooks/masterHook/useMaster.js

@@ -157,67 +157,4 @@ export const useActivitiesMaster = () =>
       }, [] )
       
       return {categories,categoryLoading,categoryError}
-}
-    
-export const useContactCategory = () =>
-{
-  const [ contactCategory, setContactCategory ] = useState( [] )
-  const [ loading, setLoading ] = useState( false )
-  const [ Error, setError ] = useState()
-  
-  const fetchConatctCategory = async() =>
-  {
-    const cache_Category = getCachedData( "Contact Category" );
-    if ( !cache_Category )
-    {
-      try
-      {
-        let resp = await MasterRespository.getContactCategory();
-        setContactCategory( resp.data );
-        cacheData("Contact Category",resp.data)
-      } catch ( error )
-      {
-        setError(error)
-      }
-    } else
-    {
-      setContactCategory(cache_Category)
     }
-  }
-
-  useEffect( () =>
-  {
-    fetchConatctCategory()
-  }, [] )
-  return { contactCategory,loading,Error}
-}
-export const useContactTags = () => {
-  const [contactTags, setContactTags] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const fetchContactTag = async () => {
-      const cache_Tags = getCachedData("Contact Tag");
-
-      if (!cache_Tags) {
-        setLoading(true);
-        try {
-          const resp = await MasterRespository.getContactTag();
-          setContactTags(resp.data);
-          cacheData("Contact Tag", resp.data);
-        } catch (err) {
-          setError(err);
-        } finally {
-          setLoading(false);
-        }
-      } else {
-        setContactTags(cache_Tags);
-      }
-    };
-
-    fetchContactTag();
-  }, []);
-
-  return { contactTags, loading, error };
-};

src/hooks/useDirectory.js

@@ -1,63 +1,38 @@
-import { useEffect, useState } from "react";
+import {useState} from "react"
-import { DirectoryRepository } from "../repositories/DirectoryRepository";
+import {DirectoryRepository} from "../repositories/DirectoryRepository";
-import { cacheData, getCachedData } from "../slices/apiDataManager";
+import {cacheData, getCachedData} from "../slices/apiDataManager";
 
-export const useDirectory = () => {
+export const useDirectory = () =>
-  const [contacts, setContacts] = useState([]);
+{
-  const [loading, setLoading] = useState(false);
+    const [ contacts, setContacts ] = useState( [] )
-  const [error, setError] = useState();
+    const [ loading, setLoading ] = useState( false )
+    const [ error, setError ] = useState();
+
+
+
+    const fetch = async() =>
+    {
+        const cache_contacts = getCachedData( "contacts" );
+        if ( !cache_contacts )
+        {
+            setLoading(true)
+           try
+        {
+            const response = await DirectoryRepository.GetContacts();
+               setContacts( response.data )
+               cacheData("contacts",response.data)
+        } catch ( error )
+        {
+               setError( error );
+               setLoading(false)
+        }  
+        }
        
-  const fetch = async () => {
-    const cache_contacts = getCachedData("contacts");
-    if (!cache_contacts) {
-      setLoading(true);
-      try {
-        const response = await DirectoryRepository.GetContacts();
-        setContacts(response.data);
-        cacheData("contacts", response.data);
-        setLoading(false);
-      } catch (error) {
-        setError(error);
-        setLoading(false);
-      }
-    } else {
-      setContacts(cache_contacts);
     }
-  };
 
-  useState(() => {
+    useState( () =>
-    fetch();
+    {
-  }, []);
+        fetch()
-  return { contacts, loading, error };
+    }, [] )
-};
+    return {contacts,loading,error}
-
+}
-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);
-    }
-  };
-
-  useEffect(() => {
-    fetchBuckets();
-  }, []);
-
-  return { buckets, loading, error };
-};

src/index.css

@@ -165,6 +165,3 @@ padding: 1px !important;
 .accordion-button:not(.collapsed) .toggle-icon {
   content: "\f146"; /* minus-circle */
 }
-.hoverBox:hover{
-  background-color: #f1f3f5;
-}

src/pages/Directory/Directory.jsx

@@ -1,102 +1,18 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useState } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import IconButton from "../../components/common/IconButton";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManageDirectory from "../../components/Directory/ManageDirectory";
 import ListViewDirectory from "../../components/Directory/ListViewDirectory";
-import { useDirectory } from "../../hooks/useDirectory";
+import {useDirectory} from "../../hooks/useDirectory";
-import { DirectoryRepository } from "../../repositories/DirectoryRepository";
+
-import { getCachedData } from "../../slices/apiDataManager";
-import showToast from "../../services/toastService";
-import UpdateContact from "../../components/Directory/UpdateContact";
-import CardViewDirectory from "../../components/Directory/CardViewDirectory";
-import { useContactCategory } from "../../hooks/masterHook/useMaster";
-import usePagination from "../../hooks/usePagination";
-import {ITEMS_PER_PAGE} from "../../utils/constants";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
-  const [selectedContact, setSelectedContact] = useState(null);
+  const closedModel = () => setIsOpenModal( false );
-  const [ContatList, setContactList] = useState([]);
-  const [contactCategories, setContactCategories] = useState([]);
-  const [ searchText, setSearchText ] = useState( "" );
-   const [listView, setListView] = useState(true);
-
-  const { contacts, loading } = useDirectory();
-  const { contactCategory, loading: contactCategoryLoading } =
-    useContactCategory();
-  const submitContact = async (data) => {
-    try {
-      let response;
-      let updatedContacts;
-      const contacts_cache = getCachedData("contacts") || [];
-
-      if (selectedContact) {
-        response = await DirectoryRepository.UpdateContact(data.id, data);
-        updatedContacts = contacts_cache.map((contact) =>
-          contact.id === data.id ? response.data : contact
-        );
-        showToast("Contact updated successfully", "success");
-        setIsOpenModal(false);
-        setSelectedContact(null);
-      } else {
-        response = await DirectoryRepository.CreateContact(data);
-        updatedContacts = [...contacts_cache, response.data];
-        showToast("Contact created successfully", "success");
-        setIsOpenModal(false);
-      }
-
-      setContactList(updatedContacts);
-    } catch (error) {
-      const msg =
-        error.response?.data?.message ||
-        error.message ||
-        "Error occurred during API call!";
-      showToast(msg, "error");
-    }
-  };
-
-  const closedModel = () => {
-    setIsOpenModal(false);
-    setSelectedContact(null);
-  };
-  useEffect(() => {
-    setContactList(contacts);
-  }, [contacts]);
-
-  const [selectedCategoryIds, setSelectedCategoryIds] = useState(
-    contactCategory.map((category) => category.id)
-  );
-
-  const usedCategoryIds = [
-    ...new Set(contacts.map((c) => c.contactCategory?.id)),
-  ];
-  const filteredCategories = contactCategory.filter((category) =>
-    usedCategoryIds.includes(category.id)
-  );
-  const handleCategoryChange = (id) => {
-    setSelectedCategoryIds((prev) =>
-      prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
-    );
-  };
-  const filteredContacts = useMemo(() => {
-    return ContatList
-      .filter((c) => {
-        const matchesSearch =
-          c.name.toLowerCase().includes(searchText.toLowerCase()) ||
-          c.organization.toLowerCase().includes(searchText.toLowerCase());
-        const matchesCategory =
-          selectedCategoryIds.length === 0 ||
-          selectedCategoryIds.includes(c.contactCategory?.id);
-        return matchesSearch && matchesCategory;
-      })
-      .sort((a, b) => a.name.localeCompare(b.name));
-  }, [ContatList, searchText, selectedCategoryIds]);
-  const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    filteredContacts,
-    ITEMS_PER_PAGE
-  );
   
+  const {contacts} = useDirectory();
+  console.log(contacts)
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -106,112 +22,35 @@ const Directory = () => {
         ]}
       ></Breadcrumb>
 
-      {isOpenModal && (
+      <GlobalModel isOpen={isOpenModal} closeModal={closedModel} size="lg">
-        <GlobalModel
+        <ManageDirectory />
-          isOpen={isOpenModal}
+      </GlobalModel>
-          closeModal={() => setIsOpenModal(false)}
+
-          size="lg"
-        >
-          {selectedContact ? (
-            <UpdateContact
-              existingContact={selectedContact}
-              submitContact={submitContact}
-              onCLosed={closedModel}
-            />
-          ) : (
-            <ManageDirectory
-              submitContact={submitContact}
-              onCLosed={closedModel}
-            />
-          )}
-        </GlobalModel>
-      )}
       <div className="card p-2">
-        <div className="row mx-0 px-0 align-items-center">
+        <div className="row mx-0 px-0">
-          <div className="col-7 col-md-4 mb-2 px-1 d-flex align-items-center ">
+          <div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
             <input
               type="search"
-              className="form-control form-control-sm me-2"
+              className="form-control form-control-sm"
               placeholder="Search Contact..."
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
             />
-            <div className="d-flex gap-2 ">
-              <button
-                type="button"
-                className={`btn btn-xs ${
-                  !listView ? "btn-primary" : "btn-outline-primary"
-                }`}
-                onClick={() => setListView(false)}
-                data-bs-toggle="tooltip"
-                data-bs-offset="0,8"
-                data-bs-placement="top"
-                data-bs-custom-class="tooltip"
-                title="Card View"
-              >
-                <i className="bx bx-grid-alt bx-sm"></i>
-              </button>
-              <button
-                type="button"
-                className={`btn btn-xs ${
-                  listView ? "btn-primary" : "btn-outline-primary"
-                }`}
-                onClick={() => setListView(true)}
-                data-bs-toggle="tooltip"
-                data-bs-offset="0,8"
-                data-bs-placement="top"
-                data-bs-custom-class="tooltip"
-                title="List View"
-              >
-                <i className="bx bx-list-ul bx-sm"></i>
-              </button>
-            </div>
-               <div className="dropdown">
-              <a
-                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                <i className="bx bx-filter bx-lg  ms-1"></i>
-              </a>
-              <ul className="dropdown-menu p-2 text-capitalize">
-                <p className="small-text">Apply Filter</p>
-                {filteredCategories.map(({ id, name }) => (
-                  <li key={id}>
-                    <div className="form-check">
-                      <input
-                        className="form-check-input"
-                        type="checkbox"
-                        id={`cat-${id}`}
-                        checked={selectedCategoryIds.includes(id)}
-                        onChange={() => handleCategoryChange(id)}
-                      />
-                      <label className="form-check-label">{name}</label>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            </div>
           </div>
-
+          <div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
-          <div className="col-5 col-md-8 mb-2 px-1 text-md-end text-end">
             <button
               type="button"
-              className="btn btn-xs btn-primary"
+              className={`btn btn-sm btn-primary `}
               onClick={() => setIsOpenModal(true)}
             >
               <i className="bx bx-plus-circle me-2"></i>
-              <span className="d-sm-block d-none"> New Contact</span>
+              New Contact
             </button>
           </div>
         </div>
-        {
+        <div className="table-responsive text-nowrap py-2 ">
-          listView ? (
-             <div className="table-responsive text-nowrap py-2 ">
           <table className="table px-2">
-            <thead>
+            <thead >
               <tr> 
-                <th colSpan={2}>
+                <th>
                   <div className="d-flex align-items-center gap-1">
                     <IconButton
                       size={12}
@@ -222,8 +61,8 @@ const Directory = () => {
                     <span>Name</span>
                   </div>
                 </th>
-                <th className="px-2 text-start">
+                <th colSpan="2" className="px-2 text-center">
-                  <div className="d-flex text-center align-items-center gap-1 justify-content-start">
+                  <div className="d-flex text-center align-items-center gap-1 justify-content-center">
                     <IconButton
                       size={12}
                       iconClass="bx bx-envelope"
@@ -254,7 +93,40 @@ const Directory = () => {
                     <span>Organization</span>
                   </div>
                 </th>
-                <th className="mx-2">Category</th>
+                <th className="mx-2">
+                  <div className="dropdown">
+                    <a
+                      className="dropdown-toggle hide-arrow cursor-pointer align-items-center"
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
+                    >
+                      Category <i className="bx bx-filter bx-sm"></i>
+                    </a>
+                    {/* <ul className="dropdown-menu p-2 text-capitalize">
+                          {[
+                            { id: 1, label: "Active" },
+                            { id: 2, label: "On Hold" },
+                            { id: 3, label: "Inactive" },
+                            { id: 4, label: "Completed" },
+                          ].map(({ id, label }) => (
+                            <li key={id}>
+                              <div className="form-check">
+                                <input
+                                  className="form-check-input  "
+                                  type="checkbox"
+                                  checked={selectedStatuses.includes(id)}
+                                  onChange={() => handleStatusChange(id)}
+                                />
+                                <label className="form-check-label">
+                                  {label}
+                                </label>
+                              </div>
+                            </li>
+                          ))}
+                        </ul> 
+                    */}
+                  </div>
+                </th>
                 <th
                 //   className={`mx-2 ${
                 //     HasManageProject ? "d-sm-table-cell" : "d-none"
@@ -265,90 +137,12 @@ const Directory = () => {
               </tr>
             </thead>
             <tbody className="table-border-bottom-0 overflow-auto ">
-              {loading && ContatList.length === 0 && (
+              {contacts.map((contact) => (
-                <tr>
+                <ListViewDirectory contact={contact} />
-                  <td colSpan={10}>Loading...</td>
+              ))}
-                </tr>
-              )}
-              {!loading && contacts.length == 0 && ContatList.length === 0 && (
-                <tr>
-                  <td colSpan={10}>No Contact Found</td>
-                </tr>
-              )}
-              {!loading &&
-                currentItems.map((contact) => (
-                  <ListViewDirectory
-                      key={contact.id} 
-                    contact={contact}
-                    setSelectedContact={setSelectedContact}
-                    setIsOpenModal={setIsOpenModal}
-                  />
-                ))}
             </tbody>
           </table>
         </div>
-          ) : (
-                <div className="row">
-          {currentItems.map((contact, index) => (
-            <div key={contact.id} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
-              <CardViewDirectory contact={contact}
-                setSelectedContact={setSelectedContact}
-                setIsOpenModal={setIsOpenModal}
-            
-              />
-            </div>
-          ))}
-        </div>
-          )
-        }
-
-       
-
-      
-
-        {!loading && (
-          <nav aria-label="Page ">
-            <ul className="pagination pagination-sm justify-content-end py-1">
-              <li
-                className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}
-              >
-                <button
-                  className="page-link btn-xs"
-                  onClick={() => paginate(currentPage - 1)}
-                >
-                  &laquo;
-                </button>
-              </li>
-              {[...Array(totalPages)].map((_, index) => (
-                <li
-                  key={index}
-                  className={`page-item ${
-                    currentPage === index + 1 ? "active" : ""
-                  }`}
-                >
-                  <button
-                    className="page-link "
-                    onClick={() => paginate(index + 1)}
-                  >
-                    {index + 1}
-                  </button>
-                </li>
-              ))}
-              <li
-                className={`page-item ${
-                  currentPage === totalPages ? "disabled" : ""
-                }`}
-              >
-                <button
-                  className="page-link "
-                  onClick={() => paginate(currentPage + 1)}
-                >
-                  &raquo;
-                </button>
-              </li>
-            </ul>
-          </nav>
-        )}
       </div>
     </div>
   );

src/pages/master/MasterTable.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { ITEMS_PER_PAGE, MANAGE_MASTER } from "../../utils/constants";
+import { MANAGE_MASTER } from "../../utils/constants";
 import showToast from "../../services/toastService";
 
 const MasterTable = ({ data, columns, loading, handleModalData }) => {
@@ -21,7 +21,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
   const safeData = Array.isArray(data) ? data : [];
 
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(ITEMS_PER_PAGE);
+  const [itemsPerPage] = useState(20);
 
   const sortKeys = {
     "Application Role": "role",

src/pages/project/ProjectList.jsx

@@ -9,7 +9,7 @@ import showToast from "../../services/toastService";
 import { getCachedData, cacheData } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useProfile } from "../../hooks/useProfile";
-import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
+import { MANAGE_PROJECT } from "../../utils/constants";
 import ProjectListView from "./ProjectListView";
 
 const ProjectList = () => {
@@ -25,7 +25,7 @@ const ProjectList = () => {
   const dispatch = useDispatch();
 
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(ITEMS_PER_PAGE);
+  const [itemsPerPage] = useState(10);
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedStatuses, setSelectedStatuses] = useState([
     "b74da4c2-d07e-46f2-9919-e75e49b12731",

src/repositories/DirectoryRepository.jsx

@@ -1,9 +1,5 @@
 import {api} from "../utils/axiosClient";
 
 export const DirectoryRepository = {
-    GetContacts: () => api.get( '/api/directory' ),
+    GetContacts: () => api.get('/api/directory'),
-    CreateContact: ( data ) => api.post( '/api/directory', data ),
-    UpdateContact:(id,data)=>api.put(`/api/directory/${id}`,data),
-    
-    GetBucktes:()=>api.get(`/api/Directory/buckets`)
 }

src/repositories/MastersRepository.jsx

@@ -54,6 +54,6 @@ export const MasterRespository = {
   
   getContactTag: () => api.get( `/api/master/contact-tags` ),
   createContactTag: (data ) => api.post( `/api/master/contact-tag`, data ),
-  updateContactTag: ( id, data ) => api.post( `/api/master/contact-tag/edit/${ id }`, data )
+  updateContactTag: ( id, data ) => api.post( `/api/master/contact-tag/${ id }`, data )
   
 }

src/utils/constants.jsx

@@ -1,6 +1,5 @@
 export const THRESH_HOLD = 48;  //  hours
 export const DURATION_TIME = 10; // minutes
-export const ITEMS_PER_PAGE = 20;
 
 export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";