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

react-query-v2 : react-query intergrated inside attendance and gallery module #270

Merged
vikas.nale merged 16 commits from react-query-v2 into main 2025-07-24 09:41:21 +00:00
Conversation 0 Commits 16 Files Changed 17 +312 -310
5 changed files with 312 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 07885d3ed4 - Show all commits

95
src/components/Activities/Attendance.jsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect, useCallback } from "react";
import moment from "moment"; import moment from "moment";
import Avatar from "../common/Avatar"; import Avatar from "../common/Avatar";
import { convertShortTime } from "../../utils/dateUtils"; import { convertShortTime } from "../../utils/dateUtils";
@ -6,29 +6,40 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
import usePagination from "../../hooks/usePagination"; import usePagination from "../../hooks/usePagination";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { ITEMS_PER_PAGE } from "../../utils/constants"; import { ITEMS_PER_PAGE } from "../../utils/constants";
import { useAttendance } from "../../hooks/useAttendance";
import { useSelector } from "react-redux";
import { useQueryClient } from "@tanstack/react-query";
import eventBus from "../../services/eventBus";
const Attendance = ({ const Attendance = ({ getRole, handleModalData }) => {
attendance, const queryClient = useQueryClient();
getRole,
handleModalData,
setshowOnlyCheckout,
showOnlyCheckout,
}) => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const [todayDate, setTodayDate] = useState(new Date()); const [todayDate, setTodayDate] = useState(new Date());
const [ShowPending, setShowPending] = useState(false);
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const {
attendance,
loading: attLoading,
recall: attrecall,
} = useAttendance(selectedProject);
const filteredAttendance = ShowPending
? attendance?.filter(
(att) => att?.checkInTime !== null && att?.checkOutTime === null
)
: attendance;
// Ensure attendance is an array const attendanceList = Array.isArray(filteredAttendance)
const attendanceList = Array.isArray(attendance) ? attendance : []; ? filteredAttendance
: [];
// Function to sort by first and last name
const sortByName = (a, b) => { const sortByName = (a, b) => {
const nameA = (a.firstName + a.lastName).toLowerCase(); const nameA = (a.firstName + a.lastName).toLowerCase();
const nameB = (b.firstName + b.lastName).toLowerCase(); const nameB = (b.firstName + b.lastName).toLowerCase();
return nameA?.localeCompare(nameB); return nameA?.localeCompare(nameB);
}; };
// Filter employees based on activity
const group1 = attendanceList const group1 = attendanceList
.filter((d) => d.activity === 1 || d.activity === 4) .filter((d) => d.activity === 1 || d.activity === 4)
.sort(sortByName); .sort(sortByName);
@ -37,30 +48,65 @@ const Attendance = ({
.sort(sortByName); .sort(sortByName);
const filteredData = [...group1, ...group2]; const filteredData = [...group1, ...group2];
const { currentPage, totalPages, currentItems, paginate } = usePagination( const { currentPage, totalPages, currentItems, paginate } = usePagination(
filteredData, filteredData,
ITEMS_PER_PAGE ITEMS_PER_PAGE
); );
const handler = useCallback(
(msg) => {
if (selectedProject == msg.projectId) {
const updatedAttendance = attendances.map((item) =>
item.employeeId === msg.response.employeeId
? { ...item, ...msg.response }
: item
);
queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
if (!oldData) return oldData;
return oldData.map((emp) =>
emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
);
});
}
},
[selectedProject, attrecall]
);
const employeeHandler = useCallback(
(msg) => {
if (attendances.some((item) => item.employeeId == msg.employeeId)) {
attrecall();
}
},
[selectedProject, attendance]
);
useEffect(() => {
eventBus.on("attendance", handler);
return () => eventBus.off("attendance", handler);
}, [handler]);
useEffect(() => {
eventBus.on("employee", employeeHandler);
return () => eventBus.off("employee", employeeHandler);
}, [employeeHandler]);
return ( return (
<> <>
<div className="table-responsive text-nowrap"> <div className="table-responsive text-nowrap h-100" >
<div className="d-flex text-start align-items-center py-2"> <div className="d-flex text-start align-items-center py-2">
<strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong> <strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong>
<div className="form-check form-switch text-start m-0 ms-5"> <div className="form-check form-switch text-start m-0 ms-5">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
role="switch" role="switch"
id="inactiveEmployeesCheckbox" id="inactiveEmployeesCheckbox"
checked={showOnlyCheckout} checked={ShowPending}
onChange={(e) => setshowOnlyCheckout(e.target.checked)} onChange={(e) => setShowPending(e.target.checked)}
/> />
<label className="form-check-label ms-0">Show Pending</label> <label className="form-check-label ms-0">Show Pending</label>
</div> </div>
</div> </div>
{attendance && attendance.length > 0 && ( {Array.isArray(attendance) && attendance.length > 0 ? (
<> <>
<table className="table "> <table className="table ">
<thead> <thead>
@ -81,14 +127,13 @@ const Attendance = ({
{currentItems && {currentItems &&
currentItems currentItems
.sort((a, b) => { .sort((a, b) => {
// If checkInTime exists, compare it, otherwise, treat null as earlier than a date
const checkInA = a?.checkInTime const checkInA = a?.checkInTime
? new Date(a.checkInTime) ? new Date(a.checkInTime)
: new Date(0); : new Date(0);
const checkInB = b?.checkInTime const checkInB = b?.checkInTime
? new Date(b.checkInTime) ? new Date(b.checkInTime)
: new Date(0); : new Date(0);
return checkInB - checkInA; // Sort in descending order of checkInTime return checkInB - checkInA;
}) })
.map((item) => ( .map((item) => (
<tr key={item.employeeId}> <tr key={item.employeeId}>
@ -189,6 +234,14 @@ const Attendance = ({
</nav> </nav>
)} )}
</> </>
) : attLoading ? (
<div>Loading...</div>
) : (
<div className="text-muted">
{Array.isArray(attendance)
? "No employees assigned to the project"
: "Attendance data unavailable"}
</div>
)} )}
</div> </div>
</> </>

237
src/components/Activities/AttendcesLogs.jsx
View File

@ -38,11 +38,12 @@ const AttendanceLog = ({
setshowOnlyCheckout, setshowOnlyCheckout,
showOnlyCheckout, showOnlyCheckout,
}) => { }) => {
const selectedProject = useSelector((store)=>store.localVariables.projectId) const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
const dispatch = useDispatch(); const dispatch = useDispatch();
const [loading,setLoading] = useState(false) const [loading, setLoading] = useState(false);
// const { data, loading, error } = useSelector((store) => store.attendanceLogs);
const [isRefreshing, setIsRefreshing] = useState(false); const [isRefreshing, setIsRefreshing] = useState(false);
const [processedData, setProcessedData] = useState([]); const [processedData, setProcessedData] = useState([]);
@ -73,18 +74,17 @@ const AttendanceLog = ({
return nameA?.localeCompare(nameB); return nameA?.localeCompare(nameB);
}; };
// useEffect(() => { const {
// const { startDate, endDate } = dateRange; data = [],
// dispatch( isLoading,
// fetchAttendanceData({ error,
// projectId, refetch,
// fromDate: startDate, isFetching,
// toDate: endDate, } = useAttendancesLogs(
// }) selectedProject,
// ); dateRange.startDate,
// setIsRefreshing(false); dateRange.endDate
// }, [dateRange, projectId, dispatch, isRefreshing]); );
const {data= [],isLoading, error, refetch,isFetching} = useAttendancesLogs(selectedProject,dateRange.startDate, dateRange.endDate)
const filtering = (data) => { const filtering = (data) => {
const filteredData = showOnlyCheckout const filteredData = showOnlyCheckout
? data.filter((item) => item.checkOutTime === null) ? data.filter((item) => item.checkOutTime === null)
@ -128,18 +128,16 @@ const AttendanceLog = ({
return acc; return acc;
}, {}); }, {});
// Sort dates in descending order
const sortedDates = Object.keys(groupedByDate).sort( const sortedDates = Object.keys(groupedByDate).sort(
(a, b) => new Date(b) - new Date(a) (a, b) => new Date(b) - new Date(a)
); );
// Create the final sorted array
const finalData = sortedDates.flatMap((date) => groupedByDate[date]); const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
setProcessedData(finalData); setProcessedData(finalData);
} };
useEffect(() => { useEffect(() => {
filtering(data) filtering(data);
}, [data, showOnlyCheckout]); }, [data, showOnlyCheckout]);
const { const {
@ -155,49 +153,47 @@ const AttendanceLog = ({
}, [processedData, resetPage]); }, [processedData, resetPage]);
const handler = useCallback( const handler = useCallback(
(msg) => { (msg) => {
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
const checkIn = msg.response.checkInTime.substring(0, 10); const checkIn = msg.response.checkInTime.substring(0, 10);
if ( if (
projectId === msg.projectId && projectId === msg.projectId &&
startDate <= checkIn && startDate <= checkIn &&
checkIn <= endDate checkIn <= endDate
) { ) {
const updatedAttendance = data.map((item) => const updatedAttendance = data.map((item) =>
item.id === msg.response.id item.id === msg.response.id ? { ...item, ...msg.response } : item
? { ...item, ...msg.response } );
: item
);
filtering(updatedAttendance); filtering(updatedAttendance);
resetPage(); resetPage();
} }
}, },
[projectId, dateRange, data, filtering, resetPage] [projectId, dateRange, data, filtering, resetPage]
); );
useEffect(() => { useEffect(() => {
eventBus.on("attendance_log", handler); eventBus.on("attendance_log", handler);
return () => eventBus.off("attendance_log", handler); return () => eventBus.off("attendance_log", handler);
}, [handler]); }, [handler]);
const employeeHandler = useCallback( const employeeHandler = useCallback(
(msg) => { (msg) => {
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
if (data.some((item) => item.employeeId == msg.employeeId)) { if (data.some((item) => item.employeeId == msg.employeeId)) {
dispatch( dispatch(
fetchAttendanceData({ fetchAttendanceData({
projectId, projectId,
fromDate: startDate, fromDate: startDate,
toDate: endDate, toDate: endDate,
}) })
) );
} }
}, },
[projectId, dateRange,data] [projectId, dateRange, data]
); );
useEffect(() => { useEffect(() => {
eventBus.on("employee", employeeHandler); eventBus.on("employee", employeeHandler);
return () => eventBus.off("employee", employeeHandler); return () => eventBus.off("employee", employeeHandler);
}, [employeeHandler]); }, [employeeHandler]);
@ -231,15 +227,14 @@ const AttendanceLog = ({
isFetching ? "spin" : "" isFetching ? "spin" : ""
}`} }`}
title="Refresh" title="Refresh"
onClick={()=>refetch()} onClick={() => refetch()}
/> />
</div> </div>
</div> </div>
<div <div className="table-responsive text-nowrap">
className="table-responsive text-nowrap" {isLoading ? (
style={{ minHeight: "200px", display: 'flex', alignItems: 'center', justifyContent: 'center' }} <div>Loading...</div>
> ) : data?.length > 0 ? (
{data && data.length > 0 && (
<table className="table mb-0"> <table className="table mb-0">
<thead> <thead>
<tr> <tr>
@ -258,87 +253,79 @@ const AttendanceLog = ({
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{(loading || isRefreshing) && ( {paginatedAttendances.reduce((acc, attendance, index, arr) => {
<tr> const currentDate = moment(
<td colSpan={6}>Loading...</td> attendance.checkInTime || attendance.checkOutTime
</tr> ).format("YYYY-MM-DD");
)} const previousAttendance = arr[index - 1];
{!loading && const previousDate = previousAttendance
!isRefreshing && ? moment(
paginatedAttendances.reduce((acc, attendance, index, arr) => { previousAttendance.checkInTime ||
const currentDate = moment( previousAttendance.checkOutTime
attendance.checkInTime || attendance.checkOutTime ).format("YYYY-MM-DD")
).format("YYYY-MM-DD"); : null;
const previousAttendance = arr[index - 1];
const previousDate = previousAttendance
? moment(
previousAttendance.checkInTime ||
previousAttendance.checkOutTime
).format("YYYY-MM-DD")
: null;
if (!previousDate || currentDate !== previousDate) { if (!previousDate || currentDate !== previousDate) {
acc.push(
<tr
key={`header-${currentDate}`}
className="table-row-header"
>
<td colSpan={6} className="text-start">
<strong>
{moment(currentDate).format("DD-MM-YYYY")}
</strong>
</td>
</tr>
);
}
acc.push( acc.push(
<tr key={index}> <tr
<td colSpan={2}> key={`header-${currentDate}`}
<div className="d-flex justify-content-start align-items-center"> className="table-row-header"
<Avatar >
firstName={attendance.firstName} <td colSpan={6} className="text-start">
lastName={attendance.lastName} <strong>
/> {moment(currentDate).format("DD-MM-YYYY")}
<div className="d-flex flex-column"> </strong>
<a href="#" className="text-heading text-truncate">
<span className="fw-normal">
{attendance.firstName} {attendance.lastName}
</span>
</a>
</div>
</div>
</td>
<td>
{moment(
attendance.checkInTime || attendance.checkOutTime
).format("DD-MMM-YYYY")}
</td>
<td>{convertShortTime(attendance.checkInTime)}</td>
<td>
{attendance.checkOutTime
? convertShortTime(attendance.checkOutTime)
: "--"}
</td>
<td className="text-center">
<RenderAttendanceStatus
attendanceData={attendance}
handleModalData={handleModalData}
Tab={2}
currentDate={today.toLocaleDateString("en-CA")}
/>
</td> </td>
</tr> </tr>
); );
return acc; }
}, [])} acc.push(
<tr key={index}>
<td colSpan={2}>
<div className="d-flex justify-content-start align-items-center">
<Avatar
firstName={attendance.firstName}
lastName={attendance.lastName}
/>
<div className="d-flex flex-column">
<a href="#" className="text-heading text-truncate">
<span className="fw-normal">
{attendance.firstName} {attendance.lastName}
</span>
</a>
</div>
</div>
</td>
<td>
{moment(
attendance.checkInTime || attendance.checkOutTime
).format("DD-MMM-YYYY")}
</td>
<td>{convertShortTime(attendance.checkInTime)}</td>
<td>
{attendance.checkOutTime
? convertShortTime(attendance.checkOutTime)
: "--"}
</td>
<td className="text-center">
<RenderAttendanceStatus
attendanceData={attendance}
handleModalData={handleModalData}
Tab={2}
currentDate={today.toLocaleDateString("en-CA")}
/>
</td>
</tr>
);
return acc;
}, [])}
</tbody> </tbody>
</table> </table>
)} ) : (
{!loading && !isRefreshing && data?.length === 0 && ( <span className="text-muted">No employee logs</span>
<span className="text-muted">No employee logs</span>
)} )}
</div> </div>
{!loading && !isRefreshing && processedData.length > 10 && ( {processedData.length > 10 && (
<nav aria-label="Page "> <nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}> <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>

35
src/hooks/useAttendance.js
View File

@ -3,8 +3,9 @@ import { cacheData, getCachedData } from "../slices/apiDataManager";
import AttendanceRepository from "../repositories/AttendanceRepository"; import AttendanceRepository from "../repositories/AttendanceRepository";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import showToast from "../services/toastService"; import showToast from "../services/toastService";
import { useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { store } from "../store/store"; import { store } from "../store/store";
import { setDefaultDateRange } from "../slices/localVariablesSlice";
// export const useAttendace =(projectId)=>{ // export const useAttendace =(projectId)=>{
@ -117,6 +118,7 @@ import { store } from "../store/store";
export const useAttendance = (projectId) => { export const useAttendance = (projectId) => {
const dispatch = useDispatch()
const { const {
data: attendance = [], data: attendance = [],
isLoading: loading, isLoading: loading,
@ -143,9 +145,11 @@ export const useAttendance = (projectId) => {
}; };
export const useAttendancesLogs = (projectId, fromDate, toDate) => { export const useAttendancesLogs = (projectId, fromDate, toDate) => {
const dispatch = useDispatch();
const enabled = !!projectId && !!fromDate && !!toDate; const enabled = !!projectId && !!fromDate && !!toDate;
return useQuery({
queryKey: ["attendanceLogs", projectId, fromDate, toDate], const query = useQuery({
queryKey: ['attendanceLogs', projectId, fromDate, toDate],
queryFn: async () => { queryFn: async () => {
const res = await AttendanceRepository.getAttendanceFilteredByDate( const res = await AttendanceRepository.getAttendanceFilteredByDate(
projectId, projectId,
@ -156,6 +160,18 @@ export const useAttendancesLogs = (projectId, fromDate, toDate) => {
}, },
enabled, enabled,
}); });
useEffect(() => {
if (query.data && fromDate && toDate) {
dispatch(
setDefaultDateRange({
startDate: fromDate,
endDate: toDate,
})
);
}
}, [dispatch, query.data, fromDate, toDate]);
return query;
}; };
@ -231,6 +247,7 @@ export const useRegularizationRequests = (projectId) => {
export const useMarkAttendance = () => { export const useMarkAttendance = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const selectedProject = useSelector((store)=>store.localVariables.projectId) const selectedProject = useSelector((store)=>store.localVariables.projectId)
const selectedDateRange = useSelector((store)=>store.localVariables.defaultDateRange)
return useMutation({ return useMutation({
mutationFn: async ({payload,forWhichTab}) => { mutationFn: async ({payload,forWhichTab}) => {
@ -247,9 +264,15 @@ export const useMarkAttendance = () => {
); );
}); });
}else{ }else{
queryClient.invalidateQueries({ // queryClient.invalidateQueries({
queryKey: ["attendanceLogs"], // queryKey: ["attendanceLogs"],
}); // });
queryClient.setQueryData(["attendanceLogs",selectedProject,selectedDateRange.startDate,selectedDateRange.endDate], (oldData) => {
if (!oldData) return oldData;
return oldData.map((emp) =>
emp.id === data.id ? { ...emp, ...data } : emp
);
});
} }
if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success"); if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success");
}, },

244
src/pages/Activities/AttendancePage.jsx
View File

@ -8,45 +8,44 @@ 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 AttendanceModel from "../../components/Activities/AttendanceModel";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
// import { useProjects } from "../../hooks/useProjects"; // import { useProjects } from "../../hooks/useProjects";
import Regularization from "../../components/Activities/Regularization"; import Regularization from "../../components/Activities/Regularization";
import { useAttendance } from "../../hooks/useAttendance"; import { useAttendance } from "../../hooks/useAttendance";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice"; import { setProjectId } from "../../slices/localVariablesSlice";
import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice"; // import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
import { hasUserPermission } from "../../utils/authUtils"; import { hasUserPermission } from "../../utils/authUtils";
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";
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";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
const AttendancePage = () => { const AttendancePage = () => {
const [activeTab, setActiveTab] = useState("all"); const [activeTab, setActiveTab] = useState("all");
const [ShowPending, setShowPending] = useState(false); const [ShowPending, setShowPending] = useState(false);
const queryClient = useQueryClient() const queryClient = useQueryClient();
const loginUser = getCachedProfileData(); const loginUser = getCachedProfileData();
var selectedProject = useSelector((store) => store.localVariables.projectId); var selectedProject = useSelector((store) => store.localVariables.projectId);
const dispatch = useDispatch() const dispatch = useDispatch();
const { // const {
attendance, // attendance,
loading: attLoading, // loading: attLoading,
recall: attrecall, // recall: attrecall,
} = useAttendance(selectedProject); // } = useAttendance(selectedProject);
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);
const [modelConfig, setModelConfig] = useState(); const [modelConfig, setModelConfig] = useState();
const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE); const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
const { projectNames, loading: projectLoading, fetchData } = useProjectName(); const { projectNames, loading: projectLoading, fetchData } = useProjectName();
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
markTime: "", markTime: "",
@ -54,47 +53,38 @@ const AttendancePage = () => {
date: new Date().toLocaleDateString(), date: new Date().toLocaleDateString(),
}); });
const handler = useCallback( // const handler = useCallback(
(msg) => { // (msg) => {
if (selectedProject == msg.projectId) { // if (selectedProject == msg.projectId) {
const updatedAttendance = attendances.map((item) => // const updatedAttendance = attendances.map((item) =>
item.employeeId === msg.response.employeeId // item.employeeId === msg.response.employeeId
? { ...item, ...msg.response } // ? { ...item, ...msg.response }
: item // : item
); // );
// cacheData("Attendance", { // queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
// data: updatedAttendance, // if (!oldData) return oldData;
// projectId: selectedProject, // return oldData.map((emp) =>
// }); // emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
queryClient.setQueryData(["attendance",selectedProject], (oldData) => { // );
if (!oldData) return oldData; // });
return oldData.map((emp) => // }
emp.employeeId === data.employeeId ? { ...emp, ...data } : emp // },
); // [selectedProject, attrecall]
}); // );
// setAttendances(updatedAttendance);
}
},
[selectedProject, attrecall]
);
const employeeHandler = useCallback( // const employeeHandler = useCallback(
(msg) => { // (msg) => {
if (attendances.some((item) => item.employeeId == msg.employeeId)) { // if (attendances.some((item) => item.employeeId == msg.employeeId)) {
// AttendanceRepository.getAttendance(selectedProject) // attrecall();
// .then((response) => { // }
// cacheData("Attendance", { data: response.data, selectedProject }); // },
// setAttendances(response.data); // [selectedProject, attendances]
// }) // );
// .catch((error) => { useEffect(() => {
// console.error(error); if (selectedProject == null) {
// }); dispatch(setProjectId(projectNames[0]?.id));
}
attrecall() }, []);
}
},
[selectedProject, attendances]
);
const getRole = (roleId) => { const getRole = (roleId) => {
if (!empRoles) return "Unassigned"; if (!empRoles) return "Unassigned";
@ -114,70 +104,28 @@ const AttendancePage = () => {
const closeModal = () => { const closeModal = () => {
setModelConfig(null); setModelConfig(null);
setIsCreateModalOpen(false); setIsCreateModalOpen(false);
// const modalElement = document.getElementById("check-Out-modal");
// if (modalElement) {
// modalElement.classList.remove("show");
// modalElement.style.display = "none";
// document.body.classList.remove("modal-open");
// document.querySelector(".modal-backdrop")?.remove();
// }
}; };
// const handleSubmit = (formData) => {
// dispatch(markCurrentAttendance(formData))
// .then((action) => {
// const updatedAttendance = attendances.map((item) =>
// item.employeeId === action.payload.employeeId
// ? { ...item, ...action.payload }
// : item
// );
// cacheData("Attendance", {
// data: updatedAttendance,
// projectId: selectedProject,
// });
// setAttendances(updatedAttendance);
// showToast("Attedance Marked Successfully", "success");
// })
// .catch((error) => {
// showToast(error.message, "error");
// });
// };
const handleToggle = (event) => { const handleToggle = (event) => {
setShowOnlyCheckout(event.target.checked); setShowOnlyCheckout(event.target.checked);
}; };
useEffect(() => {
if(selectedProject == null){
dispatch(setProjectId(projectNames[0]?.id));
}
},[])
useEffect(() => { useEffect(() => {
if (modelConfig !== null) { if (modelConfig !== null) {
openModel(); openModel();
} }
}, [modelConfig, isCreateModalOpen]); }, [modelConfig, isCreateModalOpen]);
useEffect(() => {
setAttendances(attendance);
}, [attendance]);
// useEffect(() => {
// eventBus.on("attendance", handler);
// return () => eventBus.off("attendance", handler);
// }, [handler]);
const filteredAttendance = ShowPending // useEffect(() => {
? attendances?.filter( // eventBus.on("employee", employeeHandler);
(att) => att?.checkInTime !== null && att?.checkOutTime === null // return () => eventBus.off("employee", employeeHandler);
) // }, [employeeHandler]);
: attendances;
useEffect(() => {
eventBus.on("attendance", handler);
return () => eventBus.off("attendance", handler);
}, [handler]);
useEffect(() => {
eventBus.on("employee", employeeHandler);
return () => eventBus.off("employee", employeeHandler);
}, [employeeHandler]);
return ( return (
<> <>
{/* {isCreateModalOpen && modelConfig && ( {/* {isCreateModalOpen && modelConfig && (
@ -195,27 +143,30 @@ const AttendancePage = () => {
/> />
</div> </div>
)} */} )} */}
{isCreateModalOpen && modelConfig && (
{isCreateModalOpen && modelConfig && ( <GlobalModel
<GlobalModel isOpen={isCreateModalOpen} size={modelConfig?.action === 6 && "lg"} closeModal={closeModal}> isOpen={isCreateModalOpen}
{(modelConfig?.action === 0 || modelConfig?.action === 1 || modelConfig?.action === 2) && ( size={modelConfig?.action === 6 && "lg"}
<CheckCheckOutmodel modeldata={modelConfig} closeModal={closeModal} /> closeModal={closeModal}
>
)} {(modelConfig?.action === 0 ||
{/* For view logs */} modelConfig?.action === 1 ||
{modelConfig?.action === 6 && ( modelConfig?.action === 2) && (
<AttendLogs Id={modelConfig?.id} closeModal={closeModal} /> <CheckCheckOutmodel
modeldata={modelConfig}
closeModal={closeModal}
/>
)}
{/* For view logs */}
{modelConfig?.action === 6 && (
<AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
)}
{modelConfig?.action === 7 && (
<Confirmation closeModal={closeModal} />
)}
</GlobalModel>
)} )}
{
modelConfig?.action === 7 &&(
<Confirmation closeModal={closeModal} />
)
}
</GlobalModel>
)}
<div className="container-fluid"> <div className="container-fluid">
<Breadcrumb <Breadcrumb
data={[ data={[
@ -223,14 +174,14 @@ const AttendancePage = () => {
{ label: "Attendance", link: null }, { label: "Attendance", link: null },
]} ]}
></Breadcrumb> ></Breadcrumb>
<div className="nav-align-top nav-tabs-shadow"> <div className="nav-align-top nav-tabs-shadow" >
<ul className="nav nav-tabs" role="tablist"> <ul className="nav nav-tabs" role="tablist">
<li className="nav-item"> <li className="nav-item">
<button <button
type="button" type="button"
className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`} className={`nav-link ${
activeTab === "all" ? "active" : ""
} fs-6`}
onClick={() => setActiveTab("all")} onClick={() => setActiveTab("all")}
data-bs-toggle="tab" data-bs-toggle="tab"
data-bs-target="#navs-top-home" data-bs-target="#navs-top-home"
@ -241,7 +192,9 @@ const AttendancePage = () => {
<li className="nav-item"> <li className="nav-item">
<button <button
type="button" type="button"
className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`} className={`nav-link ${
activeTab === "logs" ? "active" : ""
} fs-6`}
onClick={() => setActiveTab("logs")} onClick={() => setActiveTab("logs")}
data-bs-toggle="tab" data-bs-toggle="tab"
data-bs-target="#navs-top-profile" data-bs-target="#navs-top-profile"
@ -263,31 +216,15 @@ const AttendancePage = () => {
</button> </button>
</li> </li>
</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" && (
<>
{!attLoading && (
<div className="tab-pane fade show active py-0"> <div className="tab-pane fade show active py-0">
<Attendance <Attendance
attendance={filteredAttendance} handleModalData={handleModalData}
handleModalData={handleModalData} getRole={getRole}
getRole={getRole} />
setshowOnlyCheckout={setShowPending} </div>
showOnlyCheckout={ShowPending}
/>
</div>
)}
{!attLoading && filteredAttendance?.length === 0 && (
<p>
{" "}
{ShowPending
? "No Pending Available"
: "No Employee assigned yet."}{" "}
</p>
)}
</>
)} )}
{activeTab === "logs" && ( {activeTab === "logs" && (
<div className="tab-pane fade show active py-0"> <div className="tab-pane fade show active py-0">
<AttendanceLog <AttendanceLog
@ -298,16 +235,11 @@ const AttendancePage = () => {
/> />
</div> </div>
)} )}
{activeTab === "regularization" && DoRegularized && ( {activeTab === "regularization" && DoRegularized && (
<div className="tab-pane fade show active py-0"> <div className="tab-pane fade show active py-0">
{/* <Regularization handleRequest={handleSubmit} /> */} <Regularization />
<Regularization />
</div> </div>
)} )}
{attLoading && <span>Loading..</span>}
{!attLoading && !attendances && <span>Not Found</span>}
</div> </div>
</div> </div>
</div> </div>

11
src/slices/localVariablesSlice.jsx
View File

@ -5,6 +5,10 @@ const localVariablesSlice = createSlice({
initialState: { initialState: {
selectedMaster:"Application Role", selectedMaster:"Application Role",
regularizationCount:0, regularizationCount:0,
defaultDateRange: {
startDate: null,
endDate: null,
},
projectId: null, projectId: null,
reload:false reload:false
@ -22,9 +26,12 @@ const localVariablesSlice = createSlice({
refreshData: ( state, action ) => refreshData: ( state, action ) =>
{ {
state.reload = action.payload state.reload = action.payload
} },
setDefaultDateRange: (state, action) => {
state.defaultDateRange = action.payload;
},
}, },
}); });
export const { changeMaster ,updateRegularizationCount,setProjectId,refreshData} = localVariablesSlice.actions; export const { changeMaster ,updateRegularizationCount,setProjectId,refreshData,setDefaultDateRange} = localVariablesSlice.actions;
export default localVariablesSlice.reducer; export default localVariablesSlice.reducer;