admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

chanages class to className

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-20 22:28:00 +05:30
parent 7d489d177d
commit 8f6c4b0814
2 changed files with 156 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Directory/CardViewDirectory.jsx
View File

@ -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)

153
src/components/Directory/ProfileContactDirectory.jsx Normal file
View File

@ -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;