src/components/Directory/EmployeeList.jsx

@@ -1,25 +1,24 @@
-import React,{useState,useEffect} from 'react'
-import {useSortableData} from '../../hooks/useSortableData';
-const EmployeeList = ( {employees, onChange, assignedEmployee = []} ) =>
-{
+import React, { useState, useEffect } from "react";
+import { useSortableData } from "../../hooks/useSortableData";
+import Avatar from "../common/Avatar";
+const EmployeeList = ({ employees, onChange, bucket }) => {
   const [employeefiltered, setEmployeeFilter] = useState([]);
   const [employeeStatusList, setEmployeeStatusList] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
-  // Populate filtered list on load
   useEffect(() => {
     setEmployeeFilter(employees?.filter((emp) => emp.email != null) || []);
   }, [employees]);
 
   // Initialize checked employees based on assignedEmployee prop
   useEffect(() => {
-    if (Array.isArray(assignedEmployee)) {
-      const initialStatus = assignedEmployee.map((id) => ({
+    if (Array.isArray(bucket?.employeeIds)) {
+      const initialStatus = bucket?.employeeIds?.map((id) => ({
         employeeId: id,
         isActive: true,
       }));
       setEmployeeStatusList(initialStatus);
     }
-  }, [assignedEmployee]);
+  }, [bucket]);
 
   // Send updated list to parent
   useEffect(() => {
@@ -66,7 +65,8 @@ const EmployeeList = ( {employees, onChange, assignedEmployee = []} ) =>
   };
 
   const filteredEmployees = sortedEmployees?.filter((employee) => {
-    const fullName = `${employee?.firstName} ${employee?.lastName}`?.toLowerCase();
+    const fullName =
+      `${employee?.firstName} ${employee?.lastName}`?.toLowerCase();
     return fullName.includes(searchTerm.toLowerCase());
   });
   return (
@@ -121,18 +121,25 @@ const EmployeeList = ( {employees, onChange, assignedEmployee = []} ) =>
               filteredEmployees?.map((employee) => (
                 <tr key={employee.id}>
                   <td>
-                    <div className="d-flex align-items-start text-start">
+                    <div className="d-flex align-items-center text-start">
                       <input
                         className="form-check-input me-3 mt-1"
                         type="checkbox"
                         checked={isChecked(employee.id)}
-                        onChange={() => handleCheckboxChange(employee.id)}
+                        onChange={() => handleCheckboxChange(employee?.id)}
+                        disabled={bucket?.createdBy?.id === employee?.id}
                       />
-                      <div>
-                        <p className="fw-normal mb-0">
-                          {`${employee.firstName} ${employee.lastName}`}
-                        </p>
-                      </div>
+
+                      <Avatar
+                        size="xs"
+                        classAvatar="m-0"
+                        firstName={employee.firstName}
+                        lastName={employee.lastName}
+                      />
+                      <span
+                        className="text-truncate mx-0"
+                        style={{ maxWidth: "150px" }}
+                      >{`${employee.firstName} ${employee.lastName}`}</span>
                     </div>
                   </td>
                   <td className="text-start">

src/components/Directory/ListViewDirectory.jsx

@@ -12,7 +12,7 @@ const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,
       setOpen_contact(contact);
     }
   }}>
-    <div className="d-flex align-items-center gap-2">
+    <div className="d-flex align-items-center">
       <Avatar
         size="xs"
         classAvatar="m-0"

src/utils/constants.jsx

@@ -25,4 +25,10 @@ export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
 
 export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
 
-export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"
+export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"
+
+export const DIRECTORY_ADMIN = "4286a13b-bb40-4879-8c6d-18e9e393beda"
+
+export const DIRECTORY_MANAGER = "62668630-13ce-4f52-a0f0-db38af2230c5"
+
+export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb"