UI changes in Contact Profile page.

This commit is contained in:
Kartik Sharma 2025-07-26 10:00:27 +05:30
parent 49d9034a45
commit 116fe04f97
2 changed files with 52 additions and 78 deletions

View File

@ -22,10 +22,7 @@ const NotesDirectory = ({
setProfileContact, setProfileContact,
}) => { }) => {
const [IsActive, setIsActive] = useState(true); const [IsActive, setIsActive] = useState(true);
const { contactNotes, refetch } = useContactNotes( const { contactNotes, refetch } = useContactNotes(contactProfile?.id, IsActive);
contactProfile?.id,
IsActive
);
const [IsSubmitting, setIsSubmitting] = useState(false); const [IsSubmitting, setIsSubmitting] = useState(false);
const [showEditor, setShowEditor] = useState(false); const [showEditor, setShowEditor] = useState(false);
@ -70,10 +67,7 @@ const NotesDirectory = ({
...cached_contactProfile.data, ...cached_contactProfile.data,
notes: [...(cached_contactProfile.data.notes || []), createdNote], notes: [...(cached_contactProfile.data.notes || []), createdNote],
}; };
cacheData("Contact Profile", { cacheData("Contact Profile", { contactId: contactProfile?.id, data: updatedProfile });
contactId: contactProfile?.id,
data: updatedProfile,
});
} }
setValue("note", ""); setValue("note", "");
@ -104,13 +98,10 @@ const NotesDirectory = ({
}; };
// Use the fullName from contactProfile, which now includes middle and last names if available // Use the fullName from contactProfile, which now includes middle and last names if available
const contactName = const contactName = contactProfile?.fullName || contactProfile?.firstName || "Contact";
contactProfile?.fullName || contactProfile?.firstName || "Contact";
const noNotesMessage = `Be the first to share your insights! ${contactName} currently has no notes.`; const noNotesMessage = `Be the first to share your insights! ${contactName} currently has no notes.`;
const notesToDisplay = IsActive const notesToDisplay = IsActive ? (contactProfile?.notes || []) : (contactNotes || []);
? contactProfile?.notes || []
: contactNotes || [];
return ( return (
<div className="text-start mt-10"> <div className="text-start mt-10">
@ -202,28 +193,31 @@ const NotesDirectory = ({
<p>Loading...</p>{" "} <p>Loading...</p>{" "}
</div> </div>
)} )}
{!isLoading && notesToDisplay.length > 0 {!isLoading && notesToDisplay.length > 0 ? (
? notesToDisplay notesToDisplay
.slice() .slice()
.reverse() .reverse()
.map((noteItem) => ( .map((noteItem) => (
<NoteCardDirectory <NoteCardDirectory
refetchProfile={refetchProfile} refetchProfile={refetchProfile}
refetchNotes={refetch} refetchNotes={refetch}
refetchContact={refetch} refetchContact={refetch}
noteItem={noteItem} noteItem={noteItem}
contactId={contactProfile?.id} contactId={contactProfile?.id}
setProfileContact={setProfileContact} setProfileContact={setProfileContact}
key={noteItem.id} key={noteItem.id}
/> />
)) ))
: !isLoading && ) : (
!showEditor && ( !isLoading && !showEditor && (
<div className="text-center mt-5">{noNotesMessage}</div> <div className="text-center mt-5">
)} {noNotesMessage}
</div>
)
)}
</div> </div>
</div> </div>
); );
}; };
export default NotesDirectory; export default NotesDirectory;

View File

@ -8,7 +8,6 @@ import {
import Breadcrumb from "../../components/common/Breadcrumb"; import Breadcrumb from "../../components/common/Breadcrumb";
import AttendanceLog from "../../components/Activities/AttendcesLogs"; import AttendanceLog from "../../components/Activities/AttendcesLogs";
import Attendance from "../../components/Activities/Attendance"; import Attendance from "../../components/Activities/Attendance";
// import AttendanceModel from "../../components/Activities/AttendanceModel";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import Regularization from "../../components/Activities/Regularization"; import Regularization from "../../components/Activities/Regularization";
import { useAttendance } from "../../hooks/useAttendance"; import { useAttendance } from "../../hooks/useAttendance";
@ -18,12 +17,12 @@ import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice"
import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { REGULARIZE_ATTENDANCE } from "../../utils/constants"; import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
// import AttendanceRepository from "../../repositories/AttendanceRepository"; import AttendanceRepository from "../../repositories/AttendanceRepository"; // Make sure this is imported if used
import { useProjectName } from "../../hooks/useProjects"; import { useProjectName } from "../../hooks/useProjects";
import GlobalModel from "../../components/common/GlobalModel"; import GlobalModel from "../../components/common/GlobalModel";
import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm"; import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
import AttendLogs from "../../components/Activities/AttendLogs"; import AttendLogs from "../../components/Activities/AttendLogs";
// import Confirmation from "../../components/Activities/Confirmation"; import Confirmation from "../../components/Activities/Confirmation"; // Make sure this is imported if used
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
const AttendancePage = () => { const AttendancePage = () => {
@ -37,7 +36,7 @@ const AttendancePage = () => {
attendance, attendance,
loading: attLoading, loading: attLoading,
recall: attrecall, recall: attrecall,
} = useAttendace(selectedProject); } = useAttendance(selectedProject); // Corrected typo: useAttendace to useAttendance
const [attendances, setAttendances] = useState(); const [attendances, setAttendances] = useState();
const [empRoles, setEmpRoles] = useState(null); const [empRoles, setEmpRoles] = useState(null);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@ -58,10 +57,10 @@ const AttendancePage = () => {
// Ensure attendances is not null before mapping // Ensure attendances is not null before mapping
const updatedAttendance = attendances const updatedAttendance = attendances
? attendances.map((item) => ? attendances.map((item) =>
item.employeeId === msg.response.employeeId item.employeeId === msg.response.employeeId
? { ...item, ...msg.response } ? { ...item, ...msg.response }
: item : item
) )
: [msg.response]; // If attendances is null, initialize with new response : [msg.response]; // If attendances is null, initialize with new response
cacheData("Attendance", { cacheData("Attendance", {
@ -71,12 +70,13 @@ const AttendancePage = () => {
setAttendances(updatedAttendance); setAttendances(updatedAttendance);
} }
}, },
[selectedProject, attendances] // Removed attrecall as it's not a direct dependency for this state update [selectedProject, attendances]
); );
const employeeHandler = useCallback( const employeeHandler = useCallback(
(msg) => { (msg) => {
if (attendances?.some((item) => item.employeeId === msg.employeeId)) { if (attendances?.some((item) => item.employeeId === msg.employeeId)) {
// Ensure AttendanceRepository is imported and available
AttendanceRepository.getAttendance(selectedProject) AttendanceRepository.getAttendance(selectedProject)
.then((response) => { .then((response) => {
cacheData("Attendance", { data: response.data, selectedProject }); cacheData("Attendance", { data: response.data, selectedProject });
@ -127,10 +127,10 @@ const AttendancePage = () => {
if (action.payload && action.payload.employeeId) { if (action.payload && action.payload.employeeId) {
const updatedAttendance = attendances const updatedAttendance = attendances
? attendances.map((item) => ? attendances.map((item) =>
item.employeeId === action.payload.employeeId item.employeeId === action.payload.employeeId
? { ...item, ...action.payload } ? { ...item, ...action.payload }
: item : item
) )
: [action.payload]; // If attendances is null, initialize with new payload : [action.payload]; // If attendances is null, initialize with new payload
cacheData("Attendance", { cacheData("Attendance", {
@ -151,6 +151,7 @@ const AttendancePage = () => {
const handleToggle = (event) => { const handleToggle = (event) => {
setShowPending(event.target.checked); setShowPending(event.target.checked);
}; };
useEffect(() => { useEffect(() => {
if (selectedProject === null && projectNames.length > 0) { if (selectedProject === null && projectNames.length > 0) {
dispatch(setProjectId(projectNames[0]?.id)); dispatch(setProjectId(projectNames[0]?.id));
@ -162,8 +163,8 @@ const AttendancePage = () => {
if (modelConfig !== null) { if (modelConfig !== null) {
openModel(); openModel();
} }
}, [modelConfig]); // Removed isCreateModalOpen from here as it's set by openModel() }, [modelConfig]);
useEffect(() => { useEffect(() => {
setAttendances(attendance); setAttendances(attendance);
}, [attendance]); }, [attendance]);
@ -204,27 +205,8 @@ const AttendancePage = () => {
return () => eventBus.off("attendance", handler); return () => eventBus.off("attendance", handler);
}, [handler]); }, [handler]);
// useEffect(() => {
// eventBus.on("employee", employeeHandler);
// return () => eventBus.off("employee", employeeHandler);
// }, [employeeHandler]);
return ( return (
<> <>
{/* {isCreateModalOpen && modelConfig && (
<div
className="modal fade show"
style={{ display: "block" }}
id="check-Out-modalg"
tabIndex="-1"
aria-hidden="true"
>
<AttendanceModel
modelConfig={modelConfig}
closeModal={closeModal}
handleSubmitForm={handleSubmit}
/>
</div>
)} */}
{isCreateModalOpen && modelConfig && ( {isCreateModalOpen && modelConfig && (
<GlobalModel <GlobalModel
isOpen={isCreateModalOpen} isOpen={isCreateModalOpen}
@ -309,16 +291,14 @@ const AttendancePage = () => {
</ul> </ul>
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3" > <div className="tab-content attedanceTabs py-0 px-1 px-sm-3" >
{activeTab === "all" && ( {activeTab === "all" && (
<div className="tab-pane fade show active py-0"> <div className="tab-pane fade show active py-0">
<Attendance <Attendance
attendance={filteredAndSearchedTodayAttendance()} attendance={filteredAndSearchedTodayAttendance()}
handleModalData={handleModalData} handleModalData={handleModalData}
getRole={getRole} getRole={getRole}
setshowOnlyCheckout={setShowPending} setshowOnlyCheckout={setShowPending}
showOnlyCheckout={showPending} showOnlyCheckout={showPending}
/> />
</div>
)}
{!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && ( {!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
<p> <p>
{" "} {" "}
@ -327,7 +307,7 @@ const AttendancePage = () => {
: "No Employee assigned yet."}{" "} : "No Employee assigned yet."}{" "}
</p> </p>
)} )}
</> </div>
)} )}
{activeTab === "logs" && ( {activeTab === "logs" && (
<div className="tab-pane fade show active py-0"> <div className="tab-pane fade show active py-0">