src/components/Directory/ListViewDirectory.jsx

@@ -15,10 +15,6 @@ const ListViewDirectory = ({
 }) => {
   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 (
     <tr className={!IsActive ? "bg-light" : ""}>
       <td
@@ -51,38 +47,36 @@ const ListViewDirectory = ({
 
       <td className="px-2" style={{ width: "20%" }}>
         <div className="d-flex flex-column align-items-start text-truncate">
-          {firstEmail ? (
+         {contact.contactEmails.length > 0 ? (contact.contactEmails?.map((email, index) => (
-            <span key={firstEmail.id} className="text-truncate">
+            <span key={email.id} className="text-truncate">
               <i
-                className={getEmailIcon(firstEmail.label)}
+                className={getEmailIcon(email.label)}
                 style={{ fontSize: "12px" }}
               ></i>
               <a
-                href={`mailto:${firstEmail.emailAddress}`}
+                href={`mailto:${email.emailAddress}`}
                 className="text-decoration-none ms-1"
               >
-                {firstEmail.emailAddress}
+                {email.emailAddress}
               </a>
             </span>
-          ) : (
+          ))):(<span className="small-text m-0 px-2">NA</span>)}
-            <span className="small-text m-0 px-2">NA</span>
-          )}
         </div>
       </td>
 
       <td className="px-2" style={{ width: "20%" }}>
         <div className="d-flex flex-column align-items-start text-truncate">
-          {firstPhone ? (
+           {contact.contactPhones?.length > 0 ? (
-            <span key={firstPhone.id}>
+            contact.contactPhones?.map((phone, index) => (
+            <span key={phone.id}>
               <i
-                className={getPhoneIcon(firstPhone.label)}
+                className={getPhoneIcon(phone.label)}
                 style={{ fontSize: "12px" }}
               ></i>
-              <span className="ms-1">{firstPhone.phoneNumber}</span>
+              <span className="ms-1">{phone.phoneNumber}</span>
             </span>
-          ) : (
+          ))
-            <span className="text-small m-0 px-2">NA</span>
+          ):(<span className="text-small m-0 px-2">NA</span>)}
-          )}
         </div>
       </td>
 
@@ -94,6 +88,12 @@ const ListViewDirectory = ({
         {contact.organization}
       </td>
 
+      {/* <td className="px-2" style={{ width: "10%" }}>
+        <span className="badge badge-outline-secondary">
+          {contact?.contactCategory?.name || "Other"}
+        </span>
+      </td> */}
+      
       <td className="px-2" style={{ width: "10%" }}>
         <span className="text-truncate">
           {contact?.contactCategory?.name || "Other"}
@@ -118,10 +118,9 @@ const ListViewDirectory = ({
         )}
         {!IsActive && (
           <i
-            className={`bx ${
+            className={`bx  ${
-              dirActions.action && dirActions.id === contact.id
+              dirActions.action && dirActions.id === contact.id ?  "bx-loader-alt bx-spin"
-                ? "bx-loader-alt bx-spin"
+                    : "bx-recycle"
-                : "bx-recycle"
             } me-1 text-primary cursor-pointer`}
             title="Restore"
             onClick={() => {