From 8f6c4b0814456e22d57a4f20b1e132fa0217ba99 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 20 May 2025 22:28:00 +0530
Subject: [PATCH] chanages class to className

---
 .../Directory/CardViewDirectory.jsx           |   6 +-
 .../Directory/ProfileContactDirectory.jsx     | 153 ++++++++++++++++++
 2 files changed, 156 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Directory/ProfileContactDirectory.jsx

diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
index 26b2e479..9f7128a0 100644
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -3,8 +3,8 @@ import Avatar from "../common/Avatar";
 
 const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote }) => {
   return (
-    <div class="card text-start border-1">
-      <div class="card-body  px-1 py-2 pb-0">
+    <div className="card text-start border-1">
+      <div className="card-body  px-1 py-2 pb-0">
         <div className="d-flex justify-content-between">
           <div className="d-flex align-items-center">
             <Avatar
@@ -67,7 +67,7 @@ const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen
           </li>
         </ul>
       </div>
-      <div class="card-footer text-start px-1 py-1" onClick={() =>
+      <div className="card-footer text-start px-1 py-1" onClick={() =>
       {
         setIsOpenModalNote(true)
         setOpen_contact(contact)
diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ProfileContactDirectory.jsx
new file mode 100644
index 00000000..1bdd630f
--- /dev/null
+++ b/src/components/Directory/ProfileContactDirectory.jsx
@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from "react";
+import { useContactProfile } from "../../hooks/useDirectory";
+import Avatar from "../common/Avatar";
+import moment from "moment";
+import NotesDirectory from "./NotesDirectory";
+
+const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
+  const { conatProfile ,loading} = useContactProfile(contact?.id);
+  const [activeTab, setActiveTab] = useState("profile");
+  const [profileContact, setProfileContact] = useState();
+
+  useEffect(() => {
+    setProfileContact(conatProfile);
+  }, [conatProfile]);
+  return (
+    <div className="p-1">
+      <div className="text-end m-0 p-0">
+        {" "}
+        <button
+          className="btn btn-xs btn-secondary text-end"
+          onClick={() => {
+            setOpen_contact(null);
+            closeModal();
+          }}
+        >
+          Close
+        </button>
+      </div>
+      <div>
+        <div className="d-flex align-items-center mb-2">
+          <Avatar
+            size="sm"
+            firstName={
+              (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
+            }
+            lastName={
+              (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
+            }
+          />
+          <div className="d-flex flex-column text-start ms-2">
+            <span className="m-0 fw-semibold">{contact?.name}</span>
+            <span className="small">
+              <i className="bx bx-building bx-xs"></i>{" "}
+              {conatProfile?.organization}
+            </span>
+          </div>
+        </div>
+
+        <hr className="my-1" />
+
+        {/* Tabs */}
+
+        {loading && <div className="text-center"> <p>Loading...</p> </div>}
+        {!loading && (
+          <ul className="nav nav-tabs mb-1 p0">
+          <li className="nav-item">
+            <button
+              className={`nav-link p-1 me-2 ${
+                activeTab === "profile" ? "active" : ""
+              }`}
+              onClick={() => setActiveTab("profile")}
+            >
+              Profile
+            </button>
+          </li>
+          <li className="nav-item ">
+            <button
+              className={`nav-link text-start p-1 ${
+                activeTab === "notes" ? "active" : ""
+              }`}
+              onClick={() => setActiveTab("notes")}
+            >
+            Notes<i className="bx  bx-pencil bx-xs"></i>
+            </button>
+          </li>
+          
+        </ul>
+        )}
+
+        {/* Tab Content */}
+        <div>
+          {activeTab === "notes" && (
+            <NotesDirectory
+              isLoading={loading}
+              contactProfile={profileContact}
+              setProfileContact={setProfileContact}
+            />
+          )}
+          {activeTab === "profile" && (
+            <div>
+              <div className="d-flex flex-column text-start">
+                {conatProfile?.contactEmails?.length > 0 && (
+                  <div className="d-flex mb-2">
+                    <div style={{ width: "100px", minWidth: "100px" }}>
+                      <p className="m-0">Email</p>
+                    </div>
+                    <div>
+                      <ul className="list-inline mb-0">
+                        {conatProfile.contactEmails.map((email, idx) => (
+                          <li className="list-inline-item me-3" key={idx}>
+                            <i className="bx bx-envelope bx-xs me-1"></i>
+                            {email.emailAddress}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                )}
+                {conatProfile?.contactPhones?.length > 0 && (
+                  <div className="d-flex mb-2">
+                    <div style={{ width: "100px", minWidth: "100px" }}>
+                      <p className="m-0">Phone</p>
+                    </div>
+                    <div>
+                      <ul className="list-inline mb-0">
+                        {conatProfile.contactPhones.map((phone, idx) => (
+                          <li className="list-inline-item me-3" key={idx}>
+                            <i className="bx bx-phone bx-xs me-1"></i>
+                            {phone.phoneNumber}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                )}
+
+                {conatProfile?.createdAt && (
+                  <div className="d-flex mb-2">
+                    <div style={{ width: "100px", minWidth: "100px" }}>
+                      <p className="m-0">Created</p>
+                    </div>
+                    <div>
+                      <ul className="list-inline mb-0">
+                        <li className="list-inline-item">
+                          <i className="bx bx-calendar-week bx-xs me-1"></i>
+                          {moment(conatProfile.createdAt).format(
+                            "MMMM, DD YYYY"
+                          )}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileContactDirectory;