From ac8815d674e060ca9bfc329f7dabfec9272dad90 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 29 Jul 2025 10:46:17 +0530
Subject: [PATCH] In directory List view when only single email and phone
 number in list view but user can add multiple phone number and email ids.

---
 .../Directory/ListViewDirectory.jsx           | 45 ++++++++++---------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/Directory/ListViewDirectory.jsx b/src/components/Directory/ListViewDirectory.jsx
index 801d9915..a216a3b0 100644
--- a/src/components/Directory/ListViewDirectory.jsx
+++ b/src/components/Directory/ListViewDirectory.jsx
@@ -15,6 +15,10 @@ 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
@@ -47,36 +51,38 @@ const ListViewDirectory = ({
 
       <td className="px-2" style={{ width: "20%" }}>
         <div className="d-flex flex-column align-items-start text-truncate">
-         {contact.contactEmails.length > 0 ? (contact.contactEmails?.map((email, index) => (
-            <span key={email.id} className="text-truncate">
+          {firstEmail ? (
+            <span key={firstEmail.id} className="text-truncate">
               <i
-                className={getEmailIcon(email.label)}
+                className={getEmailIcon(firstEmail.label)}
                 style={{ fontSize: "12px" }}
               ></i>
               <a
-                href={`mailto:${email.emailAddress}`}
+                href={`mailto:${firstEmail.emailAddress}`}
                 className="text-decoration-none ms-1"
               >
-                {email.emailAddress}
+                {firstEmail.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">
-           {contact.contactPhones?.length > 0 ? (
-            contact.contactPhones?.map((phone, index) => (
-            <span key={phone.id}>
+          {firstPhone ? (
+            <span key={firstPhone.id}>
               <i
-                className={getPhoneIcon(phone.label)}
+                className={getPhoneIcon(firstPhone.label)}
                 style={{ fontSize: "12px" }}
               ></i>
-              <span className="ms-1">{phone.phoneNumber}</span>
+              <span className="ms-1">{firstPhone.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>
 
@@ -88,12 +94,6 @@ 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,9 +118,10 @@ const ListViewDirectory = ({
         )}
         {!IsActive && (
           <i
-            className={`bx  ${
-              dirActions.action && dirActions.id === contact.id ?  "bx-loader-alt bx-spin"
-                    : "bx-recycle"
+            className={`bx ${
+              dirActions.action && dirActions.id === contact.id
+                ? "bx-loader-alt bx-spin"
+                : "bx-recycle"
             } me-1 text-primary cursor-pointer`}
             title="Restore"
             onClick={() => {