From d6de8cbfc16cea0bd2ddb2e877763bdaa597ae31 Mon Sep 17 00:00:00 2001 From: pramod mahajan Date: Wed, 10 Sep 2025 18:13:36 +0530 Subject: [PATCH] completely refactored directory module --- src/components/Directory/CardViewContact.jsx | 368 ++++++----- src/components/Directory/ContactNotes.jsx | 12 + ...ontactDirectory.jsx => ContactProfile.jsx} | 132 ++-- .../Directory/DirectoryPageSkeleton.jsx | 275 ++++++++ src/components/Directory/ListViewContact.jsx | 32 +- .../Directory/ListViewDirectory.jsx | 138 ---- src/components/Directory/ManageBucket.jsx | 421 ------------- src/components/Directory/ManageDirectory.jsx | 486 -------------- .../Directory/NoteCardDirectory.jsx | 44 +- .../Directory/NoteCardDirectoryEditable.jsx | 53 +- src/components/Directory/NotesDirectory.jsx | 177 ++---- src/components/Directory/UpdateContact.jsx | 562 ----------------- src/hooks/useDirectory.js | 225 ++++--- src/pages/Directory/ContactsPage.jsx | 4 +- src/pages/Directory/Directory.jsx | 485 -------------- .../Directory/DirectoryListTableHeader.jsx | 44 -- src/pages/Directory/DirectoryPage.jsx | 26 +- src/pages/Directory/DirectoryPageHeader.jsx | 591 ------------------ src/pages/Directory/NotesPage.jsx | 3 +- src/pages/project/ProjectDetails.jsx | 4 +- src/repositories/DirectoryRepository.jsx | 3 +- src/router/AppRoutes.jsx | 8 +- 22 files changed, 753 insertions(+), 3340 deletions(-) create mode 100644 src/components/Directory/ContactNotes.jsx rename src/components/Directory/{ProfileContactDirectory.jsx => ContactProfile.jsx} (67%) create mode 100644 src/components/Directory/DirectoryPageSkeleton.jsx delete mode 100644 src/components/Directory/ListViewDirectory.jsx delete mode 100644 src/components/Directory/ManageBucket.jsx delete mode 100644 src/components/Directory/ManageDirectory.jsx delete mode 100644 src/components/Directory/UpdateContact.jsx delete mode 100644 src/pages/Directory/Directory.jsx delete mode 100644 src/pages/Directory/DirectoryListTableHeader.jsx delete mode 100644 src/pages/Directory/DirectoryPageHeader.jsx diff --git a/src/components/Directory/CardViewContact.jsx b/src/components/Directory/CardViewContact.jsx index f015956f..8e6c8068 100644 --- a/src/components/Directory/CardViewContact.jsx +++ b/src/components/Directory/CardViewContact.jsx @@ -16,210 +16,200 @@ const CardViewContact = ({ IsDeleted, restore, }) => { - const { data , setManageContact,setContactOpen} = useDirectoryContext(); + const { data, setManageContact, setContactOpen } = useDirectoryContext(); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); - const {mutate:ActiveInActive,isPending} = useActiveInActiveContact() + const { mutate: ActiveInActive, isPending } = useActiveInActiveContact(); const handleActiveInactive = (contactId) => { - ActiveInActive({ contactId, contactStatus: !IsActive }); -}; -const {dirActions} = useDir() + ActiveInActive({ contactId, contactStatus: !IsActive }); + }; return ( - <> - {IsDeleteModalOpen && ( -
- setIsDeleteModalOpen(false)} - loading={isPending} - paramData={contact.id} - /> -
- )} - -
-
-
-
{ - if (IsActive) { - setContactOpen({contact:contact,Open:true}); - } - }} - > - {" "} - {contact?.name} -
-
- {IsActive && ( -
- - -
- )} - {!IsActive && ( - handleActiveInactive(contact.id)} - > - )} -
-
+ <> + setIsDeleteModalOpen(false)} + loading={isPending} + paramData={contact.id} + isOpen={IsDeleteModalOpen} + /> -
    -
  • - {contact?.organization} -
    • -
-
{ - if (IsActive) { - setIsOpenModalNote(true); - setOpen_contact(contact); - } - }} + className="card text-start border-1" + style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }} > -
- {contact?.designation && ( -
    -
  • - -
    • -
  • - {contact.designation} -
    • -
- )} - {contact.contactEmails[0] && ( -
    -
  • - -
    • -
  • - {contact.contactEmails[0].emailAddress} -
    • -
- )} +
+
+
{ + if (IsActive) { + setContactOpen({ contact: contact, Open: true }); + } + }} + > + {" "} + {contact?.name} +
+
+ {IsActive && ( +
+ + +
+ )} + {!IsActive && ( + handleActiveInactive(contact.id)} + > + )} +
+
- {contact.contactPhones[0] && ( -
    -
  • - -
    • -
  • - {contact.contactPhones[0]?.phoneNumber} +
      +
    • + {contact?.organization}
    - )} +
+
{ + if (IsActive) { + setIsOpenModalNote(true); + setOpen_contact(contact); + } + }} + > +
+ {contact?.designation && ( +
    +
  • + +
    • +
  • + {contact.designation} +
    • +
+ )} + {contact.contactEmails[0] && ( +
    +
  • + +
    • +
  • + {contact.contactEmails[0].emailAddress} +
    • +
+ )} - {contact?.tags?.length > 0 ? ( -
    -
  • - -
    • - {contact.tags.map((tag, index) => ( -
  • - {tag.name} + {contact.contactPhones[0] && ( +
      +
    • + +
      • +
    • + {contact.contactPhones[0]?.phoneNumber} +
      • +
    + )} + + {contact?.tags?.length > 0 ? ( +
      +
    • + +
      • + {contact.tags.map((tag, index) => ( +
    • + {tag.name} +
      • + ))} +
    + ) : ( +
      +
    • + +
      • +
    • Other
      • +
    + )} + +
      + {contact?.bucketIds?.map((bucketId) => ( +
    • + + + + {getBucketNameById(data, bucketId)} + +
      • ))}
    - ) : ( -
      -
    • - -
      • -
    • Other
      • -
    - )} - -
      - {contact?.bucketIds?.map((bucketId) => ( -
    • - - - - {getBucketNameById(data, bucketId)} - - -
      • - ))} -
    +
-
); }; diff --git a/src/components/Directory/ContactNotes.jsx b/src/components/Directory/ContactNotes.jsx new file mode 100644 index 00000000..96890f63 --- /dev/null +++ b/src/components/Directory/ContactNotes.jsx @@ -0,0 +1,12 @@ +import React from 'react' +import { useContactNotes1 } from '../../hooks/useDirectory' + +const ContactNotes = ({contactId}) => { + + const {} = useContactNotes1(contactId) + return ( + + ) +} + +export default ContactNotes \ No newline at end of file diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ContactProfile.jsx similarity index 67% rename from src/components/Directory/ProfileContactDirectory.jsx rename to src/components/Directory/ContactProfile.jsx index f3a59166..6e112043 100644 --- a/src/components/Directory/ProfileContactDirectory.jsx +++ b/src/components/Directory/ContactProfile.jsx @@ -1,18 +1,16 @@ -import React, { useEffect, useState } from "react"; -import { useContactProfile } from "../../hooks/useDirectory"; +import React, { useState } from "react"; +import { useContactNotes, useContactProfile1 } from "../../hooks/useDirectory"; +import { ContactProfileSkeleton } from "./DirectoryPageSkeleton"; import Avatar from "../common/Avatar"; -import moment from "moment"; +import { formatUTCToLocalTime } from "../../utils/dateUtils"; import NotesDirectory from "./NotesDirectory"; -const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => { - const { contactProfile, loading, refetch } = useContactProfile(contact?.id); +const ContactProfile = ({ contactId }) => { + const { data, isError, isLoading, error } = useContactProfile1(contactId.id); const [copiedIndex, setCopiedIndex] = useState(null); - - const [profileContactState, setProfileContactState] = useState(null); const [expanded, setExpanded] = useState(false); - // Safely access description, defaulting to an empty string if not present - const description = profileContactState?.description || ""; + const description = data?.description || ""; const limit = 500; const toggleReadMore = () => setExpanded(!expanded); @@ -21,50 +19,8 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => { const displayText = expanded ? description : description.slice(0, limit) + (isLong ? "..." : ""); - - useEffect(() => { - if (contactProfile) { - const names = (contact?.name || "").trim().split(" "); - let firstName = ""; - let middleName = ""; - let lastName = ""; - let fullName = contact?.name || ""; - - // Logic to determine first, middle, and last names - if (names.length === 1) { - firstName = names[0]; - } else if (names.length === 2) { - firstName = names[0]; - lastName = names[1]; - } else if (names.length >= 3) { - firstName = names[0]; - middleName = names[1]; // This was an error in the original prompt, corrected to names[1] - lastName = names[names.length - 1]; - // Reconstruct full name to be precise with spacing - fullName = `${firstName} ${middleName ? middleName + " " : ""}${lastName}`; - } else { - // Fallback if no names or empty string - firstName = "Contact"; - fullName = "Contact"; - } - - - setProfileContactState({ - ...contactProfile, - firstName: contactProfile.firstName || firstName, - // Adding middleName and lastName to the state for potential future use or more granular access - middleName: contactProfile.middleName || middleName, - lastName: contactProfile.lastName || lastName, - fullName: contactProfile.fullName || fullName, // Prioritize fetched fullName, fallback to derived - }); - } - }, [contactProfile, contact?.name]); - - const handleCopy = (email, index) => { - navigator.clipboard.writeText(email); - setCopiedIndex(index); - setTimeout(() => setCopiedIndex(null), 2000); - }; + if (isError) return
{error.message}
; + if (isLoading) return ; return (
@@ -76,23 +32,19 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
- {contact?.name} + {data?.name} - {profileContactState?.designation} + {data?.designation}
- {profileContactState?.contactEmails?.length > 0 && ( + {data?.contactEmails?.length > 0 && (
{
    - {profileContactState.contactEmails.map((email, idx) => ( + {data.contactEmails.map((email, idx) => (
  • {email.emailAddress} {
)} - {profileContactState?.contactPhones?.length > 0 && ( + {data?.contactPhones?.length > 0 && (
@@ -138,10 +93,10 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
    - {profileContactState.contactPhones.map((phone, idx) => ( + {data.contactPhones.map((phone, idx) => (
  • {phone.phoneNumber} - {idx < profileContactState.contactPhones.length - 1 && ","} + {idx < data.contactPhones.length - 1 && ","}
    • ))}
@@ -149,7 +104,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
)} - {profileContactState?.createdAt && ( + {data?.createdAt && (
@@ -160,14 +115,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
- - {moment(profileContactState.createdAt).format("DD MMMM, YYYY")} - + {formatUTCToLocalTime(data.createdAt)}
)} - {profileContactState?.address && ( + {data?.address && (
@@ -177,14 +130,14 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => { :
- {profileContactState.address} + {data.address}
)}
- {profileContactState?.organization && ( + {data?.organization && (
@@ -196,13 +149,13 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
- {profileContactState.organization} + {data.organization}
)} - {profileContactState?.contactCategory && ( + {data?.contactCategory && (
@@ -215,14 +168,14 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
  • - {profileContactState.contactCategory.name} + {data.contactCategory.name}
)} - {profileContactState?.tags?.length > 0 && ( + {data?.tags?.length > 0 && (
@@ -234,7 +187,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
    - {profileContactState.tags.map((tag, index) => ( + {data.tags.map((tag, index) => (
  • {tag.name}
    • @@ -244,7 +197,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
)} - {profileContactState?.buckets?.length > 0 && ( + {data?.buckets?.length > 0 && (
@@ -256,7 +209,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
    - {profileContactState.buckets.map((bucket) => ( + {data.buckets.map((bucket) => (
  • {bucket.name} @@ -269,7 +222,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => { )}
- {profileContactState?.projects?.length > 0 && ( + {data?.projects?.length > 0 && (
@@ -280,11 +233,11 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
-
    - {profileContactState.projects.map((project, index) => ( +
      + {data.projects.map((project, index) => (
    • {project.name} - {index < profileContactState.projects.length - 1 && ","} + {index < data.projects.length - 1 && ","}
      • ))}
    @@ -324,15 +277,10 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => { )}
    - +
); }; -export default ProfileContactDirectory; \ No newline at end of file +export default ContactProfile; diff --git a/src/components/Directory/DirectoryPageSkeleton.jsx b/src/components/Directory/DirectoryPageSkeleton.jsx new file mode 100644 index 00000000..cf0720d5 --- /dev/null +++ b/src/components/Directory/DirectoryPageSkeleton.jsx @@ -0,0 +1,275 @@ +import React from "react"; + +const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => ( +
+); + +export const NoteCardSkeleton = () => { + return ( +
+ {Array.from({ length: 3 }).map((_, idx) => ( +
+
+
+
+
+ + +
+
+ + {/* Action Icons */} +
+
+
+
+
+ +
+ + {/* Note Content */} +
+ + +
+
+ ))} +
+ ); +}; + +export const MainDirectoryPageSkeleton = () => { + return ( +
+
+ {/* Tabs & Export */} +
+
+ + +
+ +
+ + {/* Search / Controls */} +
+ + +
+ ); +}; +// 32702.75 + +// Skeleton for ListViewContact +export const ListViewContactSkeleton = ({ rows = 5 }) => { + const columns = ["Name", "Email", "Organization", "Category", "Action"]; + + return ( +
+
+
+ + + + {columns.map((col) => ( + + ))} + + + + {Array.from({ length: rows }).map((_, idx) => ( + + {/* Name / Avatar */} + + + {/* Email */} + + + {/* Organization */} + + + {/* Category */} + + + {/* Actions */} + + + ))} + +
+ +
+
+
+ +
+ 		+ + + + + + +
+
+
+
+
+
+
+
+
+ ); +}; + +export const CardViewContactSkeleton = ({ rows = 6 }) => { + return ( +
+ {Array.from({ length: rows }).map((_, idx) => ( +
+
+ {/* Header */} +
+
+
+
+ +
+
+
+
+
+
+ +
+ + {/* Footer */} +
+ + + +
+ {Array.from({ length: 3 }).map((_, i) => ( +
+ ))} +
+
+
+
+ ))} +
+ ); +}; + + +export const ContactProfileSkeleton = () => { + return ( +
+ {/* Header */} +
+ +
+ + {/* Avatar and Name */} +
+
+
+ + +
+
+ + {/* Two-column details */} +
+
+ {Array.from({ length: 5 }).map((_, idx) => ( +
+ + +
+ ))} +
+ +
+ {Array.from({ length: 5 }).map((_, idx) => ( +
+ + +
+ ))} +
+
+ + {/* Projects */} + + + {/* Description */} +
+ + +
+ +
+ + {/* Notes Section */} + {Array.from({ length: 3 }).map((_, idx) => ( +
+ +
+ ))} +
+ ); +}; + +export const NoetCard =({cards = 2})=>{ + return( +
+ {Array.from({ length: cards }).map((_, idx) => ( +
+ +
+ ))} +
+ ) +} \ No newline at end of file diff --git a/src/components/Directory/ListViewContact.jsx b/src/components/Directory/ListViewContact.jsx index a4db59c4..b772aa46 100644 --- a/src/components/Directory/ListViewContact.jsx +++ b/src/components/Directory/ListViewContact.jsx @@ -87,28 +87,16 @@ const ListViewContact = ({ data, Pagination }) => { return ( <> - {deleteContact.Open && ( -
- setDeleteContact({ contactId: null, Open: false })} - loading={isPending} - paramData={deleteContact.contactId} - /> -
- )} + setDeleteContact({ contactId: null, Open: false })} + loading={isPending} + paramData={deleteContact.contactId} + isOpen={deleteContact.Open} + />
{ - const { dirActions, setDirActions } = useDir(); - - // Get the first email and phone number if they exist - const firstEmail = contact.contactEmails?.[0]; - const firstPhone = contact.contactPhones?.[0]; - - return ( - - { - if (IsActive) { - setIsOpenModalNote(true); - setOpen_contact(contact); - } - }} - > -
- - - {contact?.name || ""} - -
- - - -
- {firstEmail ? ( - - - - {firstEmail.emailAddress} - - - ) : ( - NA - )} -
- - - -
- {firstPhone ? ( - - - {firstPhone.phoneNumber} - - ) : ( - NA - )} -
- - - - {contact.organization} - - - - - {contact?.contactCategory?.name || "Other"} - - - - - {IsActive && ( - <> - { - setSelectedContact(contact); - setIsOpenModal(true); - }} - > - IsDeleted(contact.id)} - > - - )} - {!IsActive && ( - { - setDirActions({ action: false, id: contact.id }); - restore(contact.id); - }} - > - )} - - - ); -}; - -export default ListViewDirectory; \ No newline at end of file diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx deleted file mode 100644 index 63125a14..00000000 --- a/src/components/Directory/ManageBucket.jsx +++ /dev/null @@ -1,421 +0,0 @@ -import React, { useEffect, useState } from "react"; -import IconButton from "../common/IconButton"; -import { useForm } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { bucketScheam } from "./DirectorySchema"; -import showToast from "../../services/toastService"; -import Directory from "../../pages/Directory/Directory"; -import { DirectoryRepository } from "../../repositories/DirectoryRepository"; -import { cacheData, getCachedData } from "../../slices/apiDataManager"; -import { useBuckets, useCreateBucket, useUpdateBucket } from "../../hooks/useDirectory"; -import EmployeeList from "./EmployeeList"; -import { useAllEmployees, useEmployees } from "../../hooks/useEmployees"; -import { useSortableData } from "../../hooks/useSortableData"; -import ConfirmModal from "../common/ConfirmModal"; -import { useHasUserPermission } from "../../hooks/useHasUserPermission"; -import { DIRECTORY_ADMIN, DIRECTORY_MANAGER } from "../../utils/constants"; -import { useProfile } from "../../hooks/useProfile"; - -const ManageBucket = () => { - const { profile } = useProfile(); - const [bucketList, setBucketList] = useState([]); - const { employeesList } = useAllEmployees(false); - const [selectedEmployee, setSelectEmployee] = useState([]); - const { buckets, loading, refetch } = useBuckets(); - const [action_bucket, setAction_bucket] = useState(false); - const [isSubmitting, setSubmitting] = useState(false); - const [selected_bucket, select_bucket] = useState(null); - const [deleteBucket, setDeleteBucket] = useState(null); - const [searchTerm, setSearchTerm] = useState(""); - const DirManager = useHasUserPermission(DIRECTORY_MANAGER); - const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN); - const { - items: sortedBuckteList, - requestSort, - sortConfig, - } = useSortableData(bucketList, { - key: (e) => `${e.name}`, - direction: "asc", - }); - - const { mutate: handleCreatedBucket, isPending: creatingBucket } = - useCreateBucket(); - - const {mutate:UpdateBucket,isPending:updatingBucket} = useUpdateBucket() - const getSortIcon = () => { - if (!sortConfig) return null; - return sortConfig.direction === "asc" ? ( - - ) : ( - - ); - }; - - const { - register, - handleSubmit, - reset, - formState: { errors }, - } = useForm({ - resolver: zodResolver(bucketScheam), - defaultValues: { - name: "", - description: "", - }, - }); - - const onSubmit = async (data) => { - setSubmitting(true); - - try { - const cache_buckets = getCachedData("buckets") || []; - let response; - - const arraysAreEqual = (a, b) => { - if (a.length !== b.length) return false; - const setA = new Set(a); - const setB = new Set(b); - return [...setA].every((id) => setB.has(id)); - }; - - if (selected_bucket) { - const BucketPayload = { ...data, id: selected_bucket.id }; - - response = await DirectoryRepository.UpdateBuckets( - selected_bucket.id, - payload - ); - - const updatedBuckets = cache_buckets.map((bucket) => - bucket.id === selected_bucket.id ? response?.data : bucket - ); - - cacheData("buckets", updatedBuckets); - setBucketList(updatedBuckets); - - const existingEmployeeIds = selected_bucket?.employeeIds || []; - const employeesToUpdate = selectedEmployee.filter((emp) => { - const isExisting = existingEmployeeIds.includes(emp.employeeId); - return (!isExisting && emp.isActive) || (isExisting && !emp.isActive); - }); - - const newActiveEmployeeIds = selectedEmployee - .filter((emp) => { - const isExisting = existingEmployeeIds.includes(emp.employeeId); - return ( - (!isExisting && emp.isActive) || (isExisting && !emp.isActive) - ); - }) - .map((emp) => emp.employeeId); - - if ( - !arraysAreEqual(newActiveEmployeeIds, existingEmployeeIds) && - employeesToUpdate.length !== 0 - ) { - try { - response = await DirectoryRepository.AssignedBuckets( - selected_bucket.id, - employeesToUpdate - ); - } catch (assignError) { - const assignMessage = - assignError?.response?.data?.message || - assignError?.message || - "Error assigning employees."; - showToast(assignMessage, "error"); - } - } - const updatedData = cache_buckets?.map((bucket) => - bucket.id === response?.data?.id ? response.data : bucket - ); - - cacheData("buckets", updatedData); - - setBucketList(updatedData); - showToast("Bucket Updated Successfully", "success"); - - - - UpdateBucket({bucketId:selected_bucket.id,BucketPayload:BucketPayload}) - } else { - // response = await DirectoryRepository.CreateBuckets(data); - - // const updatedBuckets = [...cache_buckets, response?.data]; - // cacheData("buckets", updatedBuckets); - // setBucketList(updatedBuckets); - // showToast("Bucket Created Successfully", "success"); - const BucketPayload = data; - handleCreatedBucket(BucketPayload); - } - - handleBack(); - } catch (error) { - const message = - error?.response?.data?.message || - error?.message || - "Error occurred during API call"; - showToast(message, "error"); - } finally { - setSubmitting(false); - } - }; - - const handleDeleteContact = async () => { - try { - const resp = await DirectoryRepository.DeleteBucket(deleteBucket); - const cache_buckets = getCachedData("buckets") || []; - const updatedBuckets = cache_buckets.filter( - (bucket) => bucket.id !== deleteBucket - ); - cacheData("buckets", updatedBuckets); - setBucketList(updatedBuckets); - showToast("Bucket deleted successfully", "success"); - setDeleteBucket(null); - } catch (error) { - const message = - error?.response?.data?.message || - error?.message || - "Error occurred during API call."; - showToast(message, "error"); - } - }; - - useEffect(() => { - reset({ - name: selected_bucket?.name || "", - description: selected_bucket?.description || "", - }); - }, [selected_bucket]); - - useEffect(() => { - setBucketList(buckets); - }, [buckets]); - - const handleBack = () => { - select_bucket(null); - setAction_bucket(false); - setSubmitting(false); - reset({ name: "", description: "" }); - setSelectEmployee([]); - }; - - const sortedBucktesList = sortedBuckteList?.filter((bucket) => { - const term = searchTerm?.toLowerCase(); - const name = bucket.name?.toLowerCase(); - return name?.includes(term); - }); - - return ( - <> - {deleteBucket && ( - setDeleteBucket(null)} - /> - )} - -
-
-

Manage Buckets

-
-
- {action_bucket ? ( - - ) : ( -
- setSearchTerm(e.target.value)} - /> - refetch()} - /> -
- )} - - -
-
- {!action_bucket ? ( -
- {loading && ( -
-
- Loading... -
-
- )} - - {!loading && buckets.length === 0 && searchTerm.trim() === "" && ( -
-
- No buckets available. -
-
- )} - - {!loading && - buckets.length > 0 && - sortedBucktesList.length === 0 && ( -
-
- No matching buckets found. -
-
- )} - {!loading && - sortedBucktesList.map((bucket) => ( -
-
-
-
- {bucket.name} - {(DirManager || - DirAdmin || - bucket?.createdBy?.id === - profile?.employeeInfo?.id) && ( -
- { - select_bucket(bucket); - setAction_bucket(true); - const initialSelectedEmployees = employeesList - .filter((emp) => - bucket.employeeIds?.includes( - emp.employeeId - ) - ) - .map((emp) => ({ ...emp, isActive: true })); - setSelectEmployee(initialSelectedEmployees); - }} - > - setDeleteBucket(bucket?.id)} - > -
- )} -
-
- Contacts:{" "} - {bucket.numberOfContacts - ? bucket.numberOfContacts - : 0} -
-

- {bucket.description || "No description available."} -

-
-
-
- ))} -
- ) : ( - <> -
-
- - - {errors.name && ( - {errors.name.message} - )} -
-
- -