Compare commits

...

19 Commits

Author SHA1 Message Date
254aaf1977 Merge branch 'Issues_July_4W' of https://git.marcoaiot.com/admin/marco.pms.web into Issues_July_4W 2025-07-26 16:55:11 +05:30
bb224ea3e7 Change all filter icon in Directory ,imageGallery and Project List. 2025-07-26 16:50:24 +05:30
536f4d4e3a Directory Implementation in Contact profile popup. 2025-07-26 16:50:24 +05:30
d7986e4af4 Changes in during a merge 2025-07-26 16:50:24 +05:30
527e052786 changes 2025-07-26 16:43:51 +05:30
52ef65cce0 Search input works for both name and job role filtering. Dropdown correctly shows checkboxes and supports multi-selection. Updated icon appears, and filtering updates the employee list as expected. 2025-07-26 16:43:28 +05:30
32434da93f Attendance page search functionality and Attendance Log Page Resets to First Page After Performing Action on Other Pages. 2025-07-26 16:42:26 +05:30
276a2ca9f4 Attendance Log Page Resets to First Page After Performing Action on Other Pages. 2025-07-26 16:39:42 +05:30
aa43dd4540 Changes in AboutProject.jsx file Change Status where "In Active" show like but we want "InActive" 2025-07-26 16:39:16 +05:30
a001875a56 UI changes in Employee Profile and Project Profile. 2025-07-26 16:39:16 +05:30
f565e83413 Adding Search functionality in Assigned Task popup when user search by employee name and jobroles. 2025-07-26 16:38:38 +05:30
55625246ce Adding Search functionality in Assign Task popup when user can search employee by its name and jobroles. 2025-07-26 16:38:38 +05:30
9f1b8f7090 revert f6d3c6b2abf3324205113d83d1c4bd9dcdda4820
revert When user is Assign to single project then dropdown and All Projects is not seen.
2025-07-26 16:38:38 +05:30
c35b7954fc When user is Assign to single project then dropdown and All Projects is not seen. 2025-07-26 16:38:38 +05:30
3848130cde Chnages in Header.js wihile user is assigned to single project. 2025-07-26 16:38:38 +05:30
74c2906527 Removing Console.log. 2025-07-26 16:38:38 +05:30
7535028b44 Project dropdown should only include active ,On Hold and In Progress Projects only show in Projects page. 2025-07-26 16:38:37 +05:30
3925926084 Adding In-built scrollbar in Select Teams dropdown and Employees. 2025-07-26 16:37:52 +05:30
3709346d42 Enhancement implemented in the Attendance component to include search functionality. 2025-07-26 16:35:43 +05:30
4 changed files with 135 additions and 97 deletions

View File

@ -6,7 +6,11 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; // Make sure setAttendanceData is correctly imported import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; // Make sure setAttendanceData is correctly imported
import DateRangePicker from "../common/DateRangePicker"; import DateRangePicker from "../common/DateRangePicker";
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
import AttendanceRepository from "../../repositories/AttendanceRepository";
import { useAttendancesLogs } from "../../hooks/useAttendance";
import { queryClient } from "../../layouts/AuthLayout";
// Custom hook for pagination // Custom hook for pagination
const usePagination = (data, itemsPerPage) => { const usePagination = (data, itemsPerPage) => {
@ -16,9 +20,6 @@ const usePagination = (data, itemsPerPage) => {
const maxPage = Math.ceil(totalItems / itemsPerPage); const maxPage = Math.ceil(totalItems / itemsPerPage);
const currentItems = useMemo(() => { const currentItems = useMemo(() => {
if (!Array.isArray(data) || data.length === 0) {
return [];
}
const startIndex = (currentPage - 1) * itemsPerPage; const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage; const endIndex = startIndex + itemsPerPage;
return data.slice(startIndex, endIndex); return data.slice(startIndex, endIndex);
@ -60,6 +61,8 @@ const AttendanceLog = ({
endDate: defaultEndDate endDate: defaultEndDate
}); });
const dispatch = useDispatch(); const dispatch = useDispatch();
const [loading, setLoading] = useState(false);
const [showPending,setShowPending] = useState(false)
const { data: attendanceLogsData, loading: logsLoading, isFetching: logsFetching } = useSelector( const { data: attendanceLogsData, loading: logsLoading, isFetching: logsFetching } = useSelector(
(state) => state.attendanceLogs (state) => state.attendanceLogs
@ -67,7 +70,6 @@ const AttendanceLog = ({
const [isRefreshing, setIsRefreshing] = useState(false); // Local state for refresh spinner const [isRefreshing, setIsRefreshing] = useState(false); // Local state for refresh spinner
// Memoize today and yesterday dates to prevent re-creation on every render
const today = useMemo(() => { const today = useMemo(() => {
const d = new Date(); const d = new Date();
d.setHours(0, 0, 0, 0); d.setHours(0, 0, 0, 0);
@ -80,20 +82,22 @@ const AttendanceLog = ({
d.setHours(0, 0, 0, 0); // Set to start of day for accurate comparison d.setHours(0, 0, 0, 0); // Set to start of day for accurate comparison
return d; return d;
}, []); }, []);
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
const isSameDay = useCallback((dateStr) => { const isSameDay = (dateStr) => {
if (!dateStr) return false; if (!dateStr) return false;
const d = new Date(dateStr); const d = new Date(dateStr);
d.setHours(0, 0, 0, 0); d.setHours(0, 0, 0, 0);
return d.getTime() === today.getTime(); return d.getTime() === today.getTime();
}, [today]); };
const isBeforeToday = useCallback((dateStr) => { const isBeforeToday = (dateStr) => {
if (!dateStr) return false; if (!dateStr) return false;
const d = new Date(dateStr); const d = new Date(dateStr);
d.setHours(0, 0, 0, 0); d.setHours(0, 0, 0, 0);
return d.getTime() < today.getTime(); return d.getTime() < today.getTime();
}, [today]); };
const sortByName = useCallback((a, b) => { const sortByName = useCallback((a, b) => {
const nameA = `${a.firstName || ""} ${a.lastName || ""}`.toLowerCase(); const nameA = `${a.firstName || ""} ${a.lastName || ""}`.toLowerCase();
@ -101,7 +105,7 @@ const AttendanceLog = ({
return nameA.localeCompare(nameB); return nameA.localeCompare(nameB);
}, []); }, []);
// Effect to fetch attendance data when dateRange or projectId changes, or when refreshed // Effect to fetch attendance data when dateRange or projectId changes
useEffect(() => { useEffect(() => {
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
dispatch( dispatch(
@ -111,26 +115,21 @@ const AttendanceLog = ({
toDate: endDate, toDate: endDate,
}) })
); );
// Reset refreshing state only after the dispatch, assuming fetchAttendanceData setIsRefreshing(false); // Reset refreshing state after fetch attempt
// will eventually update logsLoading/logsFetching }, [dateRange, projectId, dispatch, isRefreshing]); // isRefreshing is a dependency because it triggers a re-fetch
const timer = setTimeout(() => { // Give Redux time to update
setIsRefreshing(false);
}, 500); // Small delay to show spinner for a bit longer
return () => clearTimeout(timer);
}, [dateRange, projectId, dispatch, isRefreshing]);
const processedData = useMemo(() => { const processedData = useMemo(() => {
let filteredData = showOnlyCheckout let filteredData = showOnlyCheckout // Use the prop directly
? (attendanceLogsData || []).filter((item) => item.checkOutTime === null) // Ensure attendanceLogsData is an array ? attendanceLogsData.filter((item) => item.checkOutTime === null) // Use attendanceLogsData
: (attendanceLogsData || []); // Ensure attendanceLogsData is an array : attendanceLogsData; // Use attendanceLogsData
// Apply search query filter // Apply search query filter
if (searchQuery) { if (searchQuery) {
const lowerCaseSearchQuery = searchQuery.toLowerCase(); const lowerCaseSearchQuery = searchQuery.toLowerCase();
filteredData = filteredData.filter((att) => { filteredData = filteredData.filter((att) => {
// Construct a full name from available parts, filtering out null/undefined
const fullName = [att.firstName, att.middleName, att.lastName] const fullName = [att.firstName, att.middleName, att.lastName]
.filter(Boolean) .filter(Boolean) // This removes null, undefined, or empty string parts
.join(" ") .join(" ")
.toLowerCase(); .toLowerCase();
@ -243,15 +242,19 @@ const AttendanceLog = ({
const employeeHandler = useCallback( const employeeHandler = useCallback(
(msg) => { (msg) => {
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
dispatch( if (data.some((item) => item.employeeId == msg.employeeId)) {
fetchAttendanceData({ // dispatch(
projectId, // fetchAttendanceData({
fromDate: startDate, // ,
toDate: endDate, // fromDate: startDate,
}) // toDate: endDate,
); // })
// );
refetch()
}
}, },
[projectId, dateRange, dispatch] [selectedProject, dateRange, data]
); );
useEffect(() => { useEffect(() => {
@ -417,7 +420,8 @@ const AttendanceLog = ({
(pageNumber) => ( (pageNumber) => (
<li <li
key={pageNumber} key={pageNumber}
className={`page-item ${currentPage === pageNumber ? "active" : "" className={`page-item ${
currentPage === pageNumber ? "active" : ""
}`} }`}
> >
<button <button
@ -430,7 +434,8 @@ const AttendanceLog = ({
) )
)} )}
<li <li
className={`page-item ${currentPage === totalPages ? "disabled" : "" className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`} }`}
> >
<button <button

View File

@ -7,16 +7,19 @@ import { useRegularizationRequests } from "../../hooks/useAttendance";
import moment from "moment"; import moment from "moment";
import usePagination from "../../hooks/usePagination"; import usePagination from "../../hooks/usePagination";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
import { cacheData } from "../../slices/apiDataManager"; import { cacheData, clearCacheKey } from "../../slices/apiDataManager";
import { useQueryClient } from "@tanstack/react-query";
const Regularization = ({ handleRequest, searchQuery }) => { const Regularization = ({ handleRequest }) => {
const selectedProject = useSelector((store) => store.localVariables.projectId); const queryClient = useQueryClient();
const [regularizesList, setRegularizedList] = useState([]); var selectedProject = useSelector((store) => store.localVariables.projectId);
const { regularizes, loading, refetch } = useRegularizationRequests(selectedProject); const [regularizesList, setregularizedList] = useState([]);
const { regularizes, loading, error, refetch } =
useRegularizationRequests(selectedProject);
// Update regularizesList when regularizes data changes // Update regularizesList when regularizes data changes
useEffect(() => { useEffect(() => {
setRegularizedList(regularizes); setregularizedList(regularizes);
}, [regularizes]); }, [regularizes]);
const sortByName = useCallback((a, b) => { const sortByName = useCallback((a, b) => {
@ -83,6 +86,11 @@ const Regularization = ({ handleRequest, searchQuery }) => {
return ( return (
<div className="table-responsive text-nowrap pb-4"> <div className="table-responsive text-nowrap pb-4">
{loading ? (
<div className="my-2">
<p className="text-secondary">Loading...</p>
</div>
) : currentItems?.length > 0 ? (
<table className="table mb-0"> <table className="table mb-0">
<thead> <thead>
<tr> <tr>
@ -98,12 +106,14 @@ const Regularization = ({ handleRequest, searchQuery }) => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{!loading && currentItems?.length > 0 ? ( {currentItems?.map((att, index) => (
currentItems.map((att, index) => (
<tr key={index}> <tr key={index}>
<td colSpan={2}> <td colSpan={2}>
<div className="d-flex justify-content-start align-items-center"> <div className="d-flex justify-content-start align-items-center">
<Avatar firstName={att.firstName} lastName={att.lastName} /> <Avatar
firstName={att.firstName}
lastName={att.lastName}
></Avatar>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<a href="#" className="text-heading text-truncate"> <a href="#" className="text-heading text-truncate">
<span className="fw-normal"> <span className="fw-normal">
@ -118,33 +128,24 @@ const Regularization = ({ handleRequest, searchQuery }) => {
<td> <td>
{att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"} {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
</td> </td>
<td className="text-center"> <td className="text-center ">
<RegularizationActions <RegularizationActions
attendanceData={att} attendanceData={att}
handleRequest={handleRequest} handleRequest={handleRequest}
refresh={refetch} refresh={refetch}
/> />
{/* </div> */}
</td> </td>
</tr> </tr>
)) ))}
) : (
<tr>
<td
colSpan={6}
className="text-center"
style={{
height: "200px",
verticalAlign: "middle",
borderBottom: "none",
}}
>
{loading ? "Loading..." : "No Record Found"}
</td>
</tr>
)}
</tbody> </tbody>
</table> </table>
) : (
<div className="my-4">
{" "}
<span className="text-secondary">No Requests Found !</span>
</div>
)}
{!loading && totalPages > 1 && ( {!loading && totalPages > 1 && (
<nav aria-label="Page "> <nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1 mt-3"> <ul className="pagination pagination-sm justify-content-end py-1 mt-3">
@ -159,18 +160,25 @@ const Regularization = ({ handleRequest, searchQuery }) => {
{[...Array(totalPages)].map((_, index) => ( {[...Array(totalPages)].map((_, index) => (
<li <li
key={index} key={index}
className={`page-item ${currentPage === index + 1 ? "active" : ""}`} className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
>
<button
className="page-link "
onClick={() => paginate(index + 1)}
> >
<button className="page-link" onClick={() => paginate(index + 1)}>
{index + 1} {index + 1}
</button> </button>
</li> </li>
))} ))}
<li <li
className={`page-item ${currentPage === totalPages ? "disabled" : ""}`} className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
> >
<button <button
className="page-link" className="page-link "
onClick={() => paginate(currentPage + 1)} onClick={() => paginate(currentPage + 1)}
> >
&raquo; &raquo;

View File

@ -129,8 +129,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
dispatch(changeMaster("Job Role")); dispatch(changeMaster("Job Role"));
// Initial state should reflect "All Roles" selected // Initial state should reflect "All Roles" selected
setSelectedRoles(["all"]); setSelectedRoles(["all"]);
// Initial state should reflect "All Roles" selected
setSelectedRoles(["all"]);
}, [dispatch]); }, [dispatch]);
// Modified handleRoleChange to handle multiple selections // Modified handleRoleChange to handle multiple selections
@ -651,4 +649,5 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
</div> </div>
</div> ); </div> );
}; };
export default AssignTask; export default AssignTask;

View File

@ -6,18 +6,25 @@ 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 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 { 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 CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
import AttendLogs from "../../components/Activities/AttendLogs";
// import Confirmation from "../../components/Activities/Confirmation";
import { useQueryClient } from "@tanstack/react-query";
const AttendancePage = () => { const AttendancePage = () => {
const [activeTab, setActiveTab] = useState("all"); const [activeTab, setActiveTab] = useState("all");
@ -211,11 +218,11 @@ const AttendancePage = () => {
return ( return (
<> <>
{isCreateModalOpen && modelConfig && ( {/* {isCreateModalOpen && modelConfig && (
<div <div
className="modal fade show" className="modal fade show"
style={{ display: "block" }} style={{ display: "block" }}
id="check-Out-modal" id="check-Out-modalg"
tabIndex="-1" tabIndex="-1"
aria-hidden="true" aria-hidden="true"
> >
@ -225,6 +232,29 @@ const AttendancePage = () => {
handleSubmitForm={handleSubmit} handleSubmitForm={handleSubmit}
/> />
</div> </div>
)} */}
{isCreateModalOpen && modelConfig && (
<GlobalModel
isOpen={isCreateModalOpen}
size={modelConfig?.action === 6 && "lg"}
closeModal={closeModal}
>
{(modelConfig?.action === 0 ||
modelConfig?.action === 1 ||
modelConfig?.action === 2) && (
<CheckCheckOutmodel
modeldata={modelConfig}
closeModal={closeModal}
/>
)}
{/* For view logs */}
{modelConfig?.action === 6 && (
<AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
)}
{modelConfig?.action === 7 && (
<Confirmation closeModal={closeModal} />
)}
</GlobalModel>
)} )}
<div className="container-fluid"> <div className="container-fluid">
@ -286,11 +316,8 @@ 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" && (
<>
{!attLoading && (
<div className="tab-pane fade show active py-0"> <div className="tab-pane fade show active py-0">
<Attendance <Attendance
attendance={filteredAndSearchedTodayAttendance()}
handleModalData={handleModalData} handleModalData={handleModalData}
getRole={getRole} getRole={getRole}
setshowOnlyCheckout={setShowPending} setshowOnlyCheckout={setShowPending}
@ -301,12 +328,13 @@ const AttendancePage = () => {
{!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && ( {!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
<p> <p>
{" "} {" "}
{showPending
{showPending {showPending
? "No Pending Available" ? "No Pending Available"
: "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">
@ -327,8 +355,6 @@ const AttendancePage = () => {
/> />
</div> </div>
)} )}
{!attLoading && !attendances && <span>Not Found</span>}
</div> </div>
</div> </div>
</div> </div>