Merge pull request 'pramod_Task-#280 - Fetched & Display Contact List in Directory' (#107) from pramod_Task-#280 into Feature_Directory

Reviewed-on: #107

src/components/Directory/ListViewDirectory.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+const getEmailIcon = (type) => {
+  switch (type) {
+    case 'work': return "bx bx-briefcase me-1 " ;
+    case 'personal': return "bx bx-user me-1";
+    case 'support': return "bxr headphone-mic me-1";
+    case 'billing': return "bx bx-receipt me-1";
+    default: return "bx bx-envelope me-1";
+  }
+};
+
+const getPhoneIcon = (type) => {
+  switch (type) {
+    case 'business': return "bx bx-briefcase me-1 ";
+    case 'home': return "bx bx-mobile me-1 ";
+    case 'personal': return "bx bx-user me-1 ";
+    case 'landline': return "bx bx-phone me-1 ";
+    case 'fax': return "bx bx-printer me-1";
+    case 'whatsapp': return "bxl-whatsapp me-1";
+    case 'emergency': return "bx bx-error-circle me-1";
+    default: return "bx bx-phone me-1";
+  }
+};
+
+const ListViewDirectory = ({ contact }) => {
+  return (
+    <tr key={contact.id} >
+      <td className="text-start">{`${contact.name}`}</td>
+
+      {/* Emails */}
+      <td colSpan="2">
+        <div className="d-flex flex-column align-items-start px-1">
+          {contact.contactEmails?.map((email, index) => (
+            <span key={email.id}>
+             <i className={getEmailIcon(email.label)} style={{fontSize:"12px"}}></i>
+              <a href={`mailto:${email.email}`} className="text-decoration-none">{email.emailAddress}</a>
+            </span>
+          ))}
+        </div>
+      </td>
+
+      {/* Phones */}
+      <td>
+        <div className="d-flex flex-column align-items-start">
+          {contact.contactPhones?.map((phone, index) => (
+            <span key={phone.id}>
+             <i className={getPhoneIcon(phone.label)} style={{fontSize:"12px"}}></i>
+              {phone.phoneNumber}
+            </span>
+          ))}
+        </div>
+      </td>
+
+      {/* Organization */}
+      <td className="text-start">{contact.organization}</td>
+
+      {/* Tags */}
+      <td>
+        <div className="d-flex flex-column align-items-start">
+          {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 ">
+        <i className='bx bx-edit bx-sm text-primary cursor-pointer'></i>
+         <i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
+      </td>
+    </tr>
+  );
+};
+
+export default ListViewDirectory;

src/components/master/CreateRole.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useFeatures } from "../../hooks/useMasterRole";
 
 import { useForm } from 'react-hook-form';
@@ -16,7 +16,7 @@ import showToast from "../../services/toastService";
 const schema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 
   selectedPermissions: z
     .array(z.string())
@@ -24,78 +24,91 @@ const schema = z.object({
 });
 
 
-const CreateRole = ({modalType,onClose}) => {
- 
- const[isLoading,setIsLoading] = useState(false)
 
- const {masterFeatures} = useFeatures()
 
- const {
+const CreateRole = ({ modalType, onClose }) => {
-  register,
+
-  handleSubmit,
+  const [isLoading, setIsLoading] = useState(false)
-  formState: { errors },
+
-  
+  const popoverRefs = useRef([]);
-} = useForm({
+  const { masterFeatures } = useFeatures()
-  resolver: zodResolver(schema),
+
-  defaultValues: {
+  const {
-    role: "",
+    register,
-    description: "",
+    handleSubmit,
-    selectedPermissions: [],
+    formState: { errors },
-  },
+
-});
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      role: "",
+      description: "",
+      selectedPermissions: [],
+    },
+  });
+
+  const onSubmit = (values) => {
+    setIsLoading(true)
+    const result = {
+
+      role: values.role,
+      description: values.description,
+      featuresPermission: values.selectedPermissions.map((id) => ({
+        id,
+        isEnabled: true,
+      })),
+    };
+
+    MasterRespository.createRole(result).then((resp) => {
+      setIsLoading(false)
+      const cachedData = getCachedData("Application Role");
+      const updatedData = [...cachedData, resp.data];
+      cacheData("Application Role", updatedData);
+      showToast("Application Role Added successfully.", "success");
+      onClose()
+    }).catch((err) => {
+
+      showToast(err?.response?.data?.message, "error");
+      setIsLoading(false)
+      onClose()
+    })
+
 
-const onSubmit = (values) => {
-  setIsLoading(true)
-  const result = {
-    
-    role: values.role,
-    description: values.description,
-    featuresPermission: values.selectedPermissions.map((id) => ({
-      id,
-      isEnabled: true,
-    })),
   };
+  const [descriptionLength, setDescriptionLength] = useState(0);
+  const maxDescriptionLength = 255;
+  useEffect(() => {
+    setDescriptionLength(0);
+  }, []);
+  useEffect(() => {
+    popoverRefs.current.forEach((el) => {
+      if (el) {
+        new bootstrap.Popover(el, {
+          trigger: "focus",
+          placement: "right",
+          html: true,
+          content: el.getAttribute("data-bs-content"), // use inline content from attribute
+        });
+      }
+    });
+  }, [masterFeatures]);
 
-  MasterRespository.createRole(result).then((resp)=>{
-    setIsLoading(false)
-    const cachedData = getCachedData( "Application Role" ); 
-    const updatedData = [...cachedData, resp.data]; 
-    cacheData("Application Role", updatedData); 
-    showToast( "Application Role Added successfully.", "success" );  
-    onClose()
-  } ).catch( ( err ) =>
-  {
-   
-    showToast(err?.response?.data?.message, "error");
-    setIsLoading( false )
-    onClose()
-  })
- 
- 
-};
-const [descriptionLength, setDescriptionLength] = useState(0);
-const maxDescriptionLength = 255;
-useEffect(() => {
-  setDescriptionLength(0);  
-}, []);
-
- 
   return (
-  
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      
-        <div className="col-12 col-md-12">
-          <label className="form-label">Role</label>
-          <input type="text" 
-           {...register("role")} 
-             className={`form-control ${errors.role ? 'is-invalids' : ''}`}
-          />
-          {errors.role && <p className="text-danger">{errors.role.message}</p>}
-        </div>
 
-        
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-        <div className="col-12 col-md-12">
+
-          <label className="form-label" htmlFor="description">Description</label>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Role</label>
+        <input type="text"
+          {...register("role")}
+          className={`form-control ${errors.role ? 'is-invalids' : ''}`}
+        />
+        {errors.role && <p className="text-danger">{errors.role.message}</p>}
+      </div>
+
+
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -110,75 +123,106 @@ useEffect(() => {
           {maxDescriptionLength - descriptionLength} characters left
         </div>
 
-          {errors.description && (
+        {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
+          <p className="text-danger">{errors.description.message}</p>
-          )}
+        )}
-        </div>
-
-       
-        <div className="col-12 col-md-12  border">
-
-          
-  {masterFeatures.map((feature) => (
-    <React.Fragment key={feature.id}>
-    <div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
-      
-     
-      <div className="col-12 col-md-3 d-flex text-start align-items-start" style={{ wordWrap: 'break-word' }}>
-        <span className="fs">{feature.name}</span>
       </div>
-    
-      <div className="col-12 col-md-1"></div>
 
-   
+
-      <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
+      <div className="col-12 col-md-12  border">
-        {feature.featurePermissions.map((perm) => (
+
-          <div className="d-flex me-3 mb-2" key={perm.id}>
+
-            <label className="form-check-label" htmlFor={perm.id}>
+        {masterFeatures.map((feature, featureIndex) => (
-              <input
+
-                type="checkbox"
+          <React.Fragment key={feature.id}>
-                className="form-check-input mx-2"
+            <div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
-                id={perm.id}
+
-                value={perm.id}
+
-                {...register("selectedPermissions")}
+              <div className="col-12 col-md-3 d-flex text-start align-items-start" style={{ wordWrap: 'break-word' }}>
-              />
+                <span className="fs">{feature.name}</span>
-              {perm.name}
+              </div>
-            </label>
+
-          </div>
+              <div className="col-12 col-md-1"></div>
+
+
+              <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
+                {feature.featurePermissions.map((perm, permIndex) => {
+                  const refIndex = (featureIndex * 10) + permIndex;
+                  return (
+                    <div className="d-flex me-3 mb-2" key={perm.id}>
+                      <label className="form-check-label" htmlFor={perm.id}>
+                        <input
+                          type="checkbox"
+                          className="form-check-input mx-2"
+                          id={perm.id}
+                          value={perm.id}
+                          {...register("selectedPermissions")}
+                        />
+                        {perm.name}
+                      </label>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <div
+                          key={refIndex}
+                          ref={(el) =>
+                            (popoverRefs.current[refIndex] = el)
+                          }
+                          tabIndex="0"
+                          className="d-flex align-items-center avatar-group justify-content-center"
+                          data-bs-toggle="popover" refIndex
+                          data-bs-trigger="focus"
+                          data-bs-placement="right"
+                          data-bs-html="true"
+                          data-bs-content={`
+                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
+                                        ${perm.description}
+                                      </div>
+                                    `}
+                        >
+                          &nbsp;
+
+                          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" className="bi bi-info-circle" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+
+                  )
+                })}
+              </div>
+
+            </div>
+            <hr className="hr my-1 py-1" />
+          </React.Fragment>
+
         ))}
+        {errors.selectedPermissions && (
+          <p className="text-danger">{errors.selectedPermissions.message}</p>
+        )}
+        {!masterFeatures && <p>Loading...</p>}
       </div>
-      
-    </div>
-    <hr className="hr my-1 py-1" />
-    </React.Fragment>
-      
-  ))}
-  {errors.selectedPermissions && (
-    <p className="text-danger">{errors.selectedPermissions.message}</p>
-  )}
-   {!masterFeatures && <p>Loading...</p>}
-</div>
- 
 
-   {
-      masterFeatures && (
 
-        <div className="col-12 text-center">
+      {
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
+        masterFeatures && (
-         {isLoading? "Please Wait...":"Submit"}       
+
-        </button>
+          <div className="col-12 text-center">
-        <button
+            <button type="submit" className="btn btn-sm btn-primary me-3">
-          type="reset"
+              {isLoading ? "Please Wait..." : "Submit"}
-          className="btn btn-sm btn-label-secondary"
+            </button>
-          data-bs-dismiss="modal"
+            <button
-          aria-label="Close"
+              type="reset"
-        >
+              className="btn btn-sm btn-label-secondary"
-          Cancel
+              data-bs-dismiss="modal"
-        </button>
+              aria-label="Close"
-      </div>
+            >
-      )
+              Cancel
-   }
+            </button>
- 
+          </div>
+        )
+      }
+
     </form>
   );
 };

src/components/master/EditRole.jsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
-import { useForm ,Controller} from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import {  useFeatures} from "../../hooks/useMasterRole";
+import { useFeatures } from "../../hooks/useMasterRole";
 import { MasterRespository } from "../../repositories/MastersRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
@@ -18,17 +18,18 @@ import showToast from "../../services/toastService";
 const updateSchema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
   permissions: z.record(z.boolean()).refine((permission) => Object.values(permission).includes(true), {
-    message: "At least one permission must be selected", 
+    message: "At least one permission must be selected",
   }),
 });
 
 
 
-const  EditMaster=({master,onClose})=> {
+const EditMaster = ({ master, onClose }) => {
-  const [isLoading,setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
-  const {masterFeatures} = useFeatures()
+  const { masterFeatures } = useFeatures()
+  const popoverRefs = useRef([]);
 
   const buildDefaultPermissions = () => {
     const defaults = {};
@@ -41,20 +42,16 @@ const  EditMaster=({master,onClose})=> {
       });
     });
     return defaults;
-    
+
   };
 
 
   const initialPermissions = buildDefaultPermissions();
- 
-  
-
-  
   const {
     register,
     handleSubmit,
     formState: { errors, dirtyFields },
-    setError,reset
+    setError, reset
   } = useForm({
     resolver: zodResolver(updateSchema),
     defaultValues: {
@@ -65,16 +62,16 @@ const  EditMaster=({master,onClose})=> {
   });
 
   const onSubmit = (data) => {
-     setIsLoading(true)
+    setIsLoading(true)
     const existingIds = new Set(
       master?.item?.featurePermission?.map((p) => p.id)
     );
 
-    
+
     const updatedPermissions = Object.entries(data.permissions)
       .filter(([id, value]) => {
         if (existingIds.has(id)) return true;
-       
+
         return (
           value === true ||
           (dirtyFields.permissions && dirtyFields.permissions[id])
@@ -82,7 +79,7 @@ const  EditMaster=({master,onClose})=> {
       })
       .map(([id, value]) => ({ id, isEnabled: value }));
 
-    
+
     if (updatedPermissions.length === 0) {
       setError("permissions", {
         type: "manual",
@@ -92,30 +89,30 @@ const  EditMaster=({master,onClose})=> {
     }
 
     const updatedRole = {
-      id:master?.item?.id,
+      id: master?.item?.id,
       role: data.role,
       description: data.description,
       featuresPermission: updatedPermissions,
     };
-    MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp)=>{ 
+    MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
-      setIsLoading( false )
+      setIsLoading(false)
-      
+
 
       const cachedData = getCachedData("Application Role");
-  
+
-        if (cachedData) {
+      if (cachedData) {
-      
+
-          const updatedData = cachedData.map((role) =>
+        const updatedData = cachedData.map((role) =>
-            role.id === resp.data?.id ? { ...role, ...resp.data } : role
+          role.id === resp.data?.id ? { ...role, ...resp.data } : role
-            );
+        );
-                
+
-            cacheData("Application Role", updatedData);
+        cacheData("Application Role", updatedData);
-        }
+      }
-      showToast( "Application Role Updated successfully.", "success" );
+      showToast("Application Role Updated successfully.", "success");
       setIsLoading(false)
       onClose()
-    }).catch((Err)=>{
+    }).catch((Err) => {
-      showToast( Err.message, "error" );
+      showToast(Err.message, "error");
       setIsLoading(false)
     })
 
@@ -129,26 +126,38 @@ const  EditMaster=({master,onClose})=> {
     });
     setDescriptionLength(master?.item?.description?.length || 0);
   }, [master, reset]);
-  
+
   const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
   const maxDescriptionLength = 255;
 
+  useEffect(() => {
+    popoverRefs.current.forEach((el) => {
+      if (el) {
+        new bootstrap.Popover(el, {
+          trigger: "focus",
+          placement: "right",
+          html: true,
+          content: el.getAttribute("data-bs-content"), // use inline content from attribute
+        });
+      }
+    });
+  }, [masterFeatures]);
 
   return (
-  
+
-      <form  className="row g-2 " onSubmit={handleSubmit(onSubmit)}>
+    <form className="row g-2 " onSubmit={handleSubmit(onSubmit)}>
-      
+
-        <div className="col-12 col-md-12">
+      <div className="col-12 col-md-12">
-          <label className="form-label">Role</label>
+        <label className="form-label">Role</label>
-          <input type="text" 
+        <input type="text"
-           {...register("role")} 
+          {...register("role")}
-             className={`form-control ${errors.role ? 'is-invalid' : ''}`}
+          className={`form-control ${errors.role ? 'is-invalid' : ''}`}
-          />
+        />
-          {errors.role && <p className="text-danger">{errors.role.message}</p>}
+        {errors.role && <p className="text-danger">{errors.role.message}</p>}
-        </div>
+      </div>
-        
+
-        <div className="col-12 col-md-12">
+      <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -164,47 +173,81 @@ const  EditMaster=({master,onClose})=> {
         {errors.description && (
           <p className="text-danger">{errors.description.message}</p>
         )}
-        </div>  
+      </div>
+
+      <div className="col-12 col-md-12 mx-2s " >
+
+        {masterFeatures.map((feature, featureIndex) => (
+          <div className="row my-3" key={feature.id} style={{ marginLeft: "0px" }}>
 
-        <div className="col-12 col-md-12 mx-2s " >
-         
-          {masterFeatures.map((feature) => (
-             <div className="row my-3" key={feature.id} style={{marginLeft:"0px"}}>
-            
             <div className="col-12 col-md-3 d-flex text-start align-items-center" style={{ wordWrap: 'break-word' }}>
-           <span className="fs">{feature.name}</span>
+              <span className="fs">{feature.name}</span>
-         </div>
+            </div>
-                    <div className="col-12 col-md-1">
+            <div className="col-12 col-md-1">
-             
+
-                     </div>
+            </div>
-              <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
+            <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
-                {feature.featurePermissions.map((perm) => (
+              {feature.featurePermissions.map((perm, permIndex) => {
+                const refIndex = (featureIndex * 10) + permIndex;
+                return (
+
                   <div className="d-flex me-3 mb-2" key={perm.id}>
-                     <label className="form-check-label" htmlFor={perm.id}>
+
-                    <input
+                    <label className="form-check-label" htmlFor={perm.id}>
-                      type="checkbox"
+                      <input
-                      className="form-check-input mx-2"
+                        type="checkbox"
-                      id={perm.id}
+                        className="form-check-input mx-2"
-                      {...register(`permissions.${perm.id}`, { 
+                        id={perm.id}
-                        value: initialPermissions[perm.id] || false 
+                        {...register(`permissions.${perm.id}`, {
-                      })}
+                          value: initialPermissions[perm.id] || false
-                    />
+                        })}
-                   
+                      />
+
                       {perm.name}
                     </label>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-          {errors.permissions && (
-            <p className="text-danger">{errors.permissions.message}</p>
-          )}
-        </div>
 
-        <div className="col-12 text-center">
+
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <div
+                        key={refIndex}
+                        ref={(el) =>
+                          (popoverRefs.current[refIndex] = el)
+                        }
+                        tabIndex="0"
+                        className="d-flex align-items-center avatar-group justify-content-center"
+                        data-bs-toggle="popover" refIndex
+                        data-bs-trigger="focus"
+                        data-bs-placement="right"
+                        data-bs-html="true"
+                        data-bs-content={`
+                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
+                                        ${perm.description}
+                                      </div>
+                                    `}
+                      >
+                        &nbsp;
+                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" className="bi bi-info-circle" viewBox="0 0 16 16">
+                          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+
+
+            </div>
+          </div>
+        ))}
+        {errors.permissions && (
+          <p className="text-danger">{errors.permissions.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
+        <button
           type="reset"
           className="btn btn-sm btn-label-secondary"
           data-bs-dismiss="modal"
@@ -213,9 +256,9 @@ const  EditMaster=({master,onClose})=> {
           Cancel
         </button>
       </div>
-      
+
-      </form>
+    </form>
-   
+
   );
 }
 

src/hooks/useDirectory.js

@@ -0,0 +1,38 @@
+import {useState} from "react"
+import {DirectoryRepository} from "../repositories/DirectoryRepository";
+import {cacheData, getCachedData} from "../slices/apiDataManager";
+
+export const useDirectory = () =>
+{
+    const [ contacts, setContacts ] = 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)
+        }  
+        }
+       
+    }
+
+    useState( () =>
+    {
+        fetch()
+    }, [] )
+    return {contacts,loading,error}
+}

src/pages/Directory/Directory.jsx

@@ -3,11 +3,16 @@ 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";
+
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
-  const closedModel = () => setIsOpenModal(false);
+  const closedModel = () => setIsOpenModal( false );
-
+  
+  const {contacts} = useDirectory();
+  console.log(contacts)
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -17,17 +22,17 @@ const Directory = () => {
         ]}
       ></Breadcrumb>
 
-      <GlobalModel isOpen={isOpenModal} closeModal={closedModel}>
+      <GlobalModel isOpen={isOpenModal} closeModal={closedModel} size="lg">
         <ManageDirectory />
       </GlobalModel>
 
-      <div className="row">
+      <div className="card p-2">
         <div className="row mx-0 px-0">
           <div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
             <input
               type="search"
               className="form-control form-control-sm"
-              placeholder="Search projects..."
+              placeholder="Search Contact..."
             />
           </div>
           <div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
@@ -43,22 +48,30 @@ const Directory = () => {
         </div>
         <div className="table-responsive text-nowrap py-2 ">
           <table className="table px-2">
-            <thead>
+            <thead >
-              <tr>
+              <tr> 
-                <th className="text-start" colSpan="2">
+                <th>
-                  Name
-                </th>
-                <th className="px-2">
                   <div className="d-flex align-items-center gap-1">
+                    <IconButton
+                      size={12}
+                      iconClass="bx bx-user"
+                      color="secondary"
+                      onClick={() => alert("User icon clicked")}
+                    />
+                    <span>Name</span>
+                  </div>
+                </th>
+                <th colSpan="2" className="px-2 text-center">
+                  <div className="d-flex text-center align-items-center gap-1 justify-content-center">
                     <IconButton
                       size={12}
                       iconClass="bx bx-envelope"
                       color="primary"
-                      onClick={() => alert("User icon clicked")}
                     />
                     <span>Email</span>
                   </div>
                 </th>
+
                 <th className="mx-2">
                   <div className="d-flex align-items-center m-0 p-0 gap-1">
                     <IconButton
@@ -87,7 +100,7 @@ const Directory = () => {
                       data-bs-toggle="dropdown"
                       aria-expanded="false"
                     >
-                      Type <i className="bx bx-filter bx-sm"></i>
+                      Category <i className="bx bx-filter bx-sm"></i>
                     </a>
                     {/* <ul className="dropdown-menu p-2 text-capitalize">
                           {[
@@ -124,11 +137,9 @@ const Directory = () => {
               </tr>
             </thead>
             <tbody className="table-border-bottom-0 overflow-auto ">
-              <tr>
+              {contacts.map((contact) => (
-                <td colSpan="12" className="text-center py-4">
+                <ListViewDirectory contact={contact} />
-                  comming soon....
+              ))}
-                </td>
-              </tr>
             </tbody>
           </table>
         </div>

src/repositories/DirectoryRepository.jsx

@@ -0,0 +1,5 @@
+import {api} from "../utils/axiosClient";
+
+export const DirectoryRepository = {
+    GetContacts: () => api.get('/api/directory'),
+}

src/utils/constants.jsx

@@ -16,7 +16,7 @@ export const VIEW_PROJECT_INFRA = "c7b68e33-72f0-474f-bd96-77636427ecc8"
 export const REGULARIZE_ATTENDANCE ="57802c4a-00aa-4a1f-a048-fd2f70dd44b6"
 
 
-export const ASSIGN_TO_PROJECT = "fbd213e0-0250-46f1-9f5f-4b2a1e6e76a3";
+export const ASSIGN_TO_PROJECT = "b94802ce-0689-4643-9e1d-11c86950c35b";
 
 export const INFRASTRUCTURE = "9666de86-d7c7-4d3d-acaa-fcd6d6b81f3c";
 
@@ -24,4 +24,4 @@ export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
 
 export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
 
-export const ASSIGN_REPORT_TASK = "d135a4b0-4f9a-4903-ab9c-4843839ebdee"
+export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"