From 281a956ac861b808f3115d2a3762b693f439273e Mon Sep 17 00:00:00 2001 From: "pramod.mahajan" Date: Sat, 11 Oct 2025 12:43:37 +0530 Subject: [PATCH] fixed directory header layout --- src/components/Activities/AttendcesLogs.jsx | 276 ++++++++----------- src/components/Activities/Regularization.jsx | 4 + src/components/master/MasterModal.jsx | 4 +- src/pages/Directory/DirectoryPage.jsx | 45 ++- src/pages/master/MasterPage.jsx | 22 +- src/pages/master/MasterTable.jsx | 11 +- 6 files changed, 166 insertions(+), 196 deletions(-) diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index e58565e8..8f8a55ac 100644 --- a/src/components/Activities/AttendcesLogs.jsx +++ b/src/components/Activities/AttendcesLogs.jsx @@ -38,190 +38,136 @@ const usePagination = (data, itemsPerPage) => { }; const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => { - // const selectedProject = useSelector( - // (store) => store.localVariables.projectId - // ); - const selectedProject = useSelectedProject(); - const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); - const dispatch = useDispatch(); - const [loading, setLoading] = useState(false); - const [showPending, setShowPending] = useState(false); +const selectedProject = useSelectedProject(); +const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); +const dispatch = useDispatch(); +const [loading, setLoading] = useState(false); +const [showPending, setShowPending] = useState(false); +const [isRefreshing, setIsRefreshing] = useState(false); - const [isRefreshing, setIsRefreshing] = useState(false); - const [processedData, setProcessedData] = useState([]); +const today = new Date(); +today.setHours(0, 0, 0, 0); - const today = new Date(); - today.setHours(0, 0, 0, 0); +const yesterday = new Date(); +yesterday.setDate(yesterday.getDate() - 1); - const yesterday = new Date(); - yesterday.setDate(yesterday.getDate() - 1); +const isSameDay = (dateStr) => { + if (!dateStr) return false; + const d = new Date(dateStr); + d.setHours(0, 0, 0, 0); + return d.getTime() === today.getTime(); +}; - const isSameDay = (dateStr) => { - if (!dateStr) return false; - const d = new Date(dateStr); - d.setHours(0, 0, 0, 0); - return d.getTime() === today.getTime(); - }; +const isBeforeToday = (dateStr) => { + if (!dateStr) return false; + const d = new Date(dateStr); + d.setHours(0, 0, 0, 0); + return d.getTime() < today.getTime(); +}; - const isBeforeToday = (dateStr) => { - if (!dateStr) return false; - const d = new Date(dateStr); - d.setHours(0, 0, 0, 0); - return d.getTime() < today.getTime(); - }; +const sortByName = (a, b) => { + const nameA = (a.firstName + a.lastName).toLowerCase(); + const nameB = (b.firstName + b.lastName).toLowerCase(); + return nameA.localeCompare(nameB); +}; - const sortByName = (a, b) => { - const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase(); - const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase(); - return nameA?.localeCompare(nameB); - }; +const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs( + selectedProject, + dateRange.startDate, + dateRange.endDate, + organizationId +); - const { - data = [], - isLoading, - error, - refetch, - isFetching, - } = useAttendancesLogs( - selectedProject, - dateRange.startDate, - dateRange.endDate, - organizationId - ); - const filtering = (data) => { - const filteredData = showPending - ? data.filter((item) => item.checkOutTime === null) - : data; +const processedData = useMemo(() => { + const filteredData = showPending + ? data.filter((item) => item.checkOutTime === null) + : data; - const group1 = filteredData - .filter((d) => d.activity === 1 && isSameDay(d.checkInTime)) - .sort(sortByName); - const group2 = filteredData - .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)) - .sort(sortByName); - const group3 = filteredData - .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)) - .sort(sortByName); - const group4 = filteredData.filter( - (d) => d.activity === 4 && isBeforeToday(d.checkOutTime) - ); - const group5 = filteredData - .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime)) - .sort(sortByName); - const group6 = filteredData - .filter((d) => d.activity === 5) - .sort(sortByName); + const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName); + const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName); + const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName); + const group4 = filteredData.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime)); + const group5 = filteredData.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime)).sort(sortByName); + const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName); - const sortedList = [ - ...group1, - ...group2, - ...group3, - ...group4, - ...group5, - ...group6, - ]; + const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6]; - // Group by date - const groupedByDate = sortedList.reduce((acc, item) => { - const date = (item.checkInTime || item.checkOutTime)?.split("T")[0]; - if (date) { - acc[date] = acc[date] || []; - acc[date].push(item); - } - return acc; - }, {}); - - const sortedDates = Object.keys(groupedByDate).sort( - (a, b) => new Date(b) - new Date(a) - ); - - const finalData = sortedDates.flatMap((date) => groupedByDate[date]); - setProcessedData(finalData); - }; - - useEffect(() => { - filtering(data); - }, [data, showPending]); - - // New useEffect to handle search filtering - const filteredSearchData = useMemo(() => { - if (!searchTerm) { - return processedData; + const groupedByDate = sortedList.reduce((acc, item) => { + const date = (item.checkInTime || item.checkOutTime)?.split("T")[0]; + if (date) { + acc[date] = acc[date] || []; + acc[date].push(item); } - const lowercasedSearchTerm = searchTerm.toLowerCase(); - return processedData.filter((item) => { - const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); - return fullName.includes(lowercasedSearchTerm); - }); - }, [processedData, searchTerm]); + return acc; + }, {}); - const { - currentPage, - totalPages, - currentItems: paginatedAttendances, - paginate, - resetPage, - } = usePagination(filteredSearchData, 20); + const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a)); + return sortedDates.flatMap((date) => groupedByDate[date]); +}, [data, showPending]); - useEffect(() => { - resetPage(); - }, [filteredSearchData, resetPage]); +const filteredSearchData = useMemo(() => { + if (!searchTerm) return processedData; - const handler = useCallback( - (msg) => { - const { startDate, endDate } = dateRange; - const checkIn = msg.response.checkInTime.substring(0, 10); - if ( - selectedProject === msg.projectId && - startDate <= checkIn && - checkIn <= endDate - ) { - queryClient.setQueriesData(["attendanceLogs"], (oldData) => { - if (!oldData) { - queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] }); - return; - } - const updatedAttendance = oldData.map((record) => - record.id === msg.response.id - ? { ...record, ...msg.response } - : record - ); - filtering(updatedAttendance); - return updatedAttendance; - }); - resetPage(); - } - }, - [selectedProject, dateRange, filtering, resetPage] + const lowercased = searchTerm.toLowerCase(); + return processedData.filter((item) => + `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased) ); +}, [processedData, searchTerm]); - useEffect(() => { - eventBus.on("attendance_log", handler); - return () => eventBus.off("attendance_log", handler); - }, [handler]); +const { + currentPage, + totalPages, + currentItems: paginatedAttendances, + paginate, + resetPage, +} = usePagination(filteredSearchData, 20); - const employeeHandler = useCallback( - (msg) => { - const { startDate, endDate } = dateRange; - if (data.some((item) => item.employeeId == msg.employeeId)) { - // dispatch( - // fetchAttendanceData({ - // , - // fromDate: startDate, - // toDate: endDate, - // }) - // ); +useEffect(() => { + resetPage(); +}, [filteredSearchData]); + +const handler = useCallback( + (msg) => { + const { startDate, endDate } = dateRange; + const checkIn = msg.response.checkInTime.substring(0, 10); + + if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) { + queryClient.setQueriesData(["attendanceLogs"], (oldData) => { + if (!oldData) { + queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] }); + return; + } + return oldData.map((record) => + record.id === msg.response.id ? { ...record, ...msg.response } : record + ); + }); + resetPage(); + } + }, + [selectedProject, dateRange, resetPage] +); + +useEffect(() => { + eventBus.on("attendance_log", handler); + return () => eventBus.off("attendance_log", handler); +}, [handler]); + +const employeeHandler = useCallback( + (msg) => { + const { startDate, endDate } = dateRange; + if (data.some((item) => item.employeeId == msg.employeeId)) { + refetch(); + } + }, + [data, refetch] +); + +useEffect(() => { + eventBus.on("employee", employeeHandler); + return () => eventBus.off("employee", employeeHandler); +}, [employeeHandler]); - refetch(); - } - }, - [selectedProject, dateRange, data, refetch] - ); - useEffect(() => { - eventBus.on("employee", employeeHandler); - return () => eventBus.off("employee", employeeHandler); - }, [employeeHandler]); return ( <> diff --git a/src/components/Activities/Regularization.jsx b/src/components/Activities/Regularization.jsx index 64a337a3..32481c81 100644 --- a/src/components/Activities/Regularization.jsx +++ b/src/components/Activities/Regularization.jsx @@ -33,7 +33,11 @@ const Regularization = ({ ); useEffect(() => { + if(!regularizes) return + if(regularizes?.length) { setregularizedList(regularizes); + + } }, [regularizes]); const sortByName = (a, b) => { diff --git a/src/components/master/MasterModal.jsx b/src/components/master/MasterModal.jsx index 44d2af60..b26d6de4 100644 --- a/src/components/master/MasterModal.jsx +++ b/src/components/master/MasterModal.jsx @@ -70,12 +70,12 @@ const MasterModal = ({ modaldata, closeModal }) => { }; return ( -<> +

{`${masterType, " ", modalType}`}

{ modalComponents[modalType] || null} - +
); }; diff --git a/src/pages/Directory/DirectoryPage.jsx b/src/pages/Directory/DirectoryPage.jsx index 8e17b802..a2a3e1a5 100644 --- a/src/pages/Directory/DirectoryPage.jsx +++ b/src/pages/Directory/DirectoryPage.jsx @@ -162,29 +162,33 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) { -
-
-
+
+
+
{activeTab === "notes" && ( - + setSearchNote(e.target.value)} /> +
)} {activeTab === "contacts" && (
-
- +
+ setsearchContact(e.target.value)} /> +
-
- -
+
+
+ +
)}
- -
+
+
+ setShowActive(e.target.checked)} + /> + +
+
+
+
diff --git a/src/pages/master/MasterPage.jsx b/src/pages/master/MasterPage.jsx index a206b913..f055fca5 100644 --- a/src/pages/master/MasterPage.jsx +++ b/src/pages/master/MasterPage.jsx @@ -103,7 +103,7 @@ const MasterPage = () => { if (menuErrorFlag || isMasterError) return ( -
+

Oops, an error occurred @@ -161,21 +161,17 @@ const MasterPage = () => { data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]} /> -
+
-
+
-
-
+
+
{ handleModalData(selectedMaster, null, selectedMaster) } > - Add{" "} - {selectedMaster} + Add{" "} + {selectedMaster} )}
diff --git a/src/pages/master/MasterTable.jsx b/src/pages/master/MasterTable.jsx index 8facfdb7..cb5fe881 100644 --- a/src/pages/master/MasterTable.jsx +++ b/src/pages/master/MasterTable.jsx @@ -92,7 +92,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => { {" "} {selectedMaster === "Activity" ? "Activity" : "Name"} - + + {" "} {selectedMaster === "Activity" ? "Unit" @@ -108,12 +109,12 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => { {currentItems.length > 0 ? ( currentItems.map((item, index) => ( - - + + {updatedColumns.map((col) => ( - + {col.key === "description" ? ( item[col.key] !== undefined && item[col.key] !== null ? ( @@ -133,7 +134,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => { )} ))} - + {(selectedMaster === "Application Role" || selectedMaster === "Work Category") && item?.isSystem ? (