From cc98f34b4427998249504b4e2f2c9fa2ffba79b2 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Thu, 15 May 2025 12:19:57 +0530
Subject: [PATCH] displaye contacts in List View

---
 .../Directory/ListViewDirectory.jsx           | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/components/Directory/ListViewDirectory.jsx

diff --git a/src/components/Directory/ListViewDirectory.jsx b/src/components/Directory/ListViewDirectory.jsx
new file mode 100644
index 00000000..5011d229
--- /dev/null
+++ b/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;
\ No newline at end of file