diff --git a/src/App.tsx b/src/App.tsx index db452672..a30897cb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,12 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { queryClient } from "./layouts/AuthLayout"; import ModalProvider from "./ModalProvider"; - +window.addEventListener("unhandledrejection", (event) => { + if (event.reason?.message?.includes("Failed to fetch")) { + event.preventDefault(); + console.debug("Network issue (fetch failed) - suppressed"); + } +}); const App = () => { return ( diff --git a/src/ModalProvider.jsx b/src/ModalProvider.jsx index be7cd06a..26a31e55 100644 --- a/src/ModalProvider.jsx +++ b/src/ModalProvider.jsx @@ -1,15 +1,14 @@ import React, { useEffect } from "react"; import { useOrganizationModal } from "./hooks/useOrganization"; import OrganizationModal from "./components/Organization/OrganizationModal"; -import { useAuthModal } from "./hooks/useAuth"; +import { useAuthModal, useModal } from "./hooks/useAuth"; import SwitchTenant from "./pages/authentication/SwitchTenant"; -import { useProjectModal } from "./hooks/useProjects"; import { ProjectModal } from "./components/Project/ManageProjectInfo"; const ModalProvider = () => { const { isOpen, onClose } = useOrganizationModal(); const { isOpen: isAuthOpen } = useAuthModal(); - const {isOpen:isOpenProject} = useProjectModal() + const {isOpen:isOpenProject} = useModal("ManageProject") return ( <> diff --git a/src/components/Activities/Regularization.jsx b/src/components/Activities/Regularization.jsx index 05964afd..0d6364a4 100644 --- a/src/components/Activities/Regularization.jsx +++ b/src/components/Activities/Regularization.jsx @@ -22,9 +22,19 @@ const Regularization = ({ handleRequest, searchTerm, projectId, organizationId, const { regularizes, loading, error, refetch } = useRegularizationRequests(selectedProject, organizationId, IncludeInActive); - useEffect(() => { - setregularizedList(regularizes); - }, [regularizes]); +useEffect(() => { + if (regularizes && regularizes.length) { + setregularizedList((prev) => { + const prevIds = prev.map((i) => i.id).join(","); + const newIds = regularizes.map((i) => i.id).join(","); + if (prevIds !== newIds) { + return regularizes; + } + return prev; + }); + } +}, [regularizes]); + const sortByName = (a, b) => { const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase(); diff --git a/src/components/Project/ManageProjectInfo.jsx b/src/components/Project/ManageProjectInfo.jsx index b2da3c0b..ee084a77 100644 --- a/src/components/Project/ManageProjectInfo.jsx +++ b/src/components/Project/ManageProjectInfo.jsx @@ -8,7 +8,6 @@ import DatePicker from "../common/DatePicker"; import { useCreateProject, useProjectDetails, - useProjectModal, useUpdateProject, } from "../../hooks/useProjects"; @@ -23,6 +22,7 @@ import { } from "../../hooks/useOrganization"; import { localToUtc } from "../../utils/appUtils"; import Modal from "../common/Modal"; +import { useModal } from "../../hooks/useAuth"; const currentDate = new Date().toLocaleDateString("en-CA"); const formatDate = (date) => { @@ -38,7 +38,7 @@ const formatDate = (date) => { const ManageProjectInfo = ({ project, onClose }) => { const [addressLength, setAddressLength] = useState(0); const maxAddressLength = 500; - const { onOpen, startStep, flowType } = useOrganizationModal(); + const { onOpen, startStep, flowType } = useModal("ManageProject"); const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731"; diff --git a/src/components/common/DateRangePicker.jsx b/src/components/common/DateRangePicker.jsx index 1fd5d2f6..8e53b5e6 100644 --- a/src/components/common/DateRangePicker.jsx +++ b/src/components/common/DateRangePicker.jsx @@ -1,5 +1,7 @@ import React, { useEffect, useRef } from "react"; import { useController, useFormContext, useWatch } from "react-hook-form"; +import { useSelector } from "react-redux"; + const DateRangePicker = ({ md, sm, @@ -9,19 +11,29 @@ const DateRangePicker = ({ }) => { const inputRef = useRef(null); + const persistedRange = useSelector( + (store) => store.localVariables.attendance.defaultDateRange + ); + useEffect(() => { - const endDate = new Date(); - if (endDateMode === "yesterday") { - endDate.setDate(endDate.getDate() - 1); + let startDate, endDate; + + if (persistedRange?.startDate && persistedRange?.endDate) { + startDate = new Date(persistedRange.startDate); + endDate = new Date(persistedRange.endDate); + } else { + endDate = new Date(); + if (endDateMode === "yesterday") { + endDate.setDate(endDate.getDate() - 1); + } + endDate.setHours(0, 0, 0, 0); + + startDate = new Date(endDate); + startDate.setDate(endDate.getDate() - (DateDifference - 1)); + startDate.setHours(0, 0, 0, 0); } - endDate.setHours(0, 0, 0, 0); - - const startDate = new Date(endDate); - startDate.setDate(endDate.getDate() - (DateDifference - 1)); - startDate.setHours(0, 0, 0, 0); - - const fp = flatpickr(inputRef.current, { + const fp = flatpickr(inputRef.current, { mode: "range", dateFormat: "Y-m-d", altInput: true, @@ -41,14 +53,12 @@ const DateRangePicker = ({ endDate: endDate.toLocaleDateString("en-CA"), }); - return () => { - fp.destroy(); - }; - }, [onRangeChange, DateDifference, endDateMode]); + return () => fp.destroy(); + }, [onRangeChange, DateDifference, endDateMode, persistedRange]); const handleIconClick = () => { - if (inputRef.current) { - inputRef.current._flatpickr.open(); // directly opens flatpickr + if (inputRef.current?._flatpickr) { + inputRef.current._flatpickr.open(); } }; @@ -63,9 +73,10 @@ const DateRangePicker = ({ /> + /> ); }; @@ -76,6 +87,7 @@ export default DateRangePicker; + export const DateRangePicker1 = ({ startField = "startDate", endField = "endDate", @@ -85,7 +97,6 @@ export const DateRangePicker1 = ({ resetSignal, defaultRange = true, maxDate = null, - sm,md, ...rest }) => { const inputRef = useRef(null); @@ -169,12 +180,11 @@ export const DateRangePicker1 = ({ const formattedValue = start && end ? `${start} To ${end}` : ""; return ( -
+
{ inputRef.current = el; @@ -183,10 +193,12 @@ export const DateRangePicker1 = ({ readOnly={!allowText} autoComplete="off" /> - inputRef.current?._flatpickr?.open()} - > + > + +
); }; diff --git a/src/hooks/useAuth.jsx b/src/hooks/useAuth.jsx index 8e5b8de2..4821565d 100644 --- a/src/hooks/useAuth.jsx +++ b/src/hooks/useAuth.jsx @@ -14,6 +14,23 @@ import { } from "../slices/localVariablesSlice.jsx"; import { removeSession } from "../utils/authUtils.js"; + + +// ----------------------------Modal-------------------------- + +export const useModal = (modalType) => { + const dispatch = useDispatch(); + const isOpen = useSelector( + (state) => state.localVariables.modals[modalType]?.isOpen + ); + + const onOpen = (data = {}) => dispatch(openModal({ modalType, data })); + const onClose = () => dispatch(closeModal({ modalType })); + const onToggle = () => dispatch(toggleModal({ modalType })); + + return { isOpen, onOpen, onClose, onToggle }; +}; + export const useTenants = () => { return useQuery({ queryKey: ["tenantlist"], diff --git a/src/hooks/useProjects.js b/src/hooks/useProjects.js index d4dd36dc..3904660c 100644 --- a/src/hooks/useProjects.js +++ b/src/hooks/useProjects.js @@ -3,7 +3,7 @@ import { cacheData, getCachedData } from "../slices/apiDataManager"; import ProjectRepository from "../repositories/ProjectRepository"; import { useProfile } from "./useProfile"; import { useDispatch, useSelector } from "react-redux"; -import { closeProjectModal, openProjectModal, setProjectId } from "../slices/localVariablesSlice"; +import { setProjectId } from "../slices/localVariablesSlice"; import EmployeeList from "../components/Directory/EmployeeList"; import eventBus from "../services/eventBus"; import { @@ -12,23 +12,25 @@ import { useQuery, useQueryClient, } from "@tanstack/react-query"; + + import showToast from "../services/toastService"; export const useCurrentService = () => { return useSelector((store) => store.globalVariables.selectedServiceId); }; -export const useProjectModal = () => { - const dispatch = useDispatch(); - const { isOpen, data } = useSelector((state) => state.localVariables.ProjectModal); +// export const useProjectModal = () => { +// const dispatch = useDispatch(); +// const { isOpen, data } = useSelector((state) => state.localVariables.ProjectModal); - return { - isOpen, - data, - openModal: (payload = null) => dispatch(openProjectModal(payload)), - closeModal: () => dispatch(closeProjectModal()), - }; -}; +// return { +// isOpen, +// data, +// openModal: (payload = null) => dispatch(openProjectModal(payload)), +// closeModal: () => dispatch(closeProjectModal()), +// }; +// }; // ------------------------------Query------------------- diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx index 9fce3fec..15af37b2 100644 --- a/src/pages/Activities/AttendancePage.jsx +++ b/src/pages/Activities/AttendancePage.jsx @@ -70,7 +70,8 @@ const AttendancePage = () => { }; const handleModalData = (employee) => { - setModelConfig(employee); + setModelConfig(employee); + if (employee !== null) setIsCreateModalOpen(true); }; const closeModal = () => { @@ -78,11 +79,7 @@ const AttendancePage = () => { setIsCreateModalOpen(false); }; - useEffect(() => { - if (modelConfig !== null) { - openModel(); - } - }, [modelConfig, isCreateModalOpen]); + // Handler to change tab and reset search term const handleTabChange = (tabName) => { diff --git a/src/slices/localVariablesSlice.jsx b/src/slices/localVariablesSlice.jsx index 15f7dd6a..b520b7e5 100644 --- a/src/slices/localVariablesSlice.jsx +++ b/src/slices/localVariablesSlice.jsx @@ -4,10 +4,18 @@ const localVariablesSlice = createSlice({ name: "localVariables", initialState: { selectedMaster: "Application Role", - regularizationCount: 0, - defaultDateRange: { - startDate: null, - endDate: null, + // Attendances + attendance: { + regularizationCount: 0, + defaultDateRange: { startDate: null, endDate: null }, + SelectedOrg: "", + }, + + // Modal for all simple pass Name + + modals: { + auth: { isOpen: false }, + organization: { isOpen: false }, }, projectId: null, reload: false, @@ -19,10 +27,6 @@ const localVariablesSlice = createSlice({ startStep: 1, flowType: "default", }, - ProjectModal:{ - isOpen: false, - data: null, - }, AuthModal: { isOpen: false, @@ -32,9 +36,18 @@ const localVariablesSlice = createSlice({ changeMaster: (state, action) => { state.selectedMaster = action.payload; }, + + // ─── ATTENDANCE ───────────────────────── updateRegularizationCount: (state, action) => { - state.regularizationCount = action.payload; + state.attendance.regularizationCount = action.payload; }, + setDefaultDateRange: (state, action) => { + state.attendance.defaultDateRange = action.payload; + }, + setOrganization: (state, action) => { + state.attendance.SelectedOrg = action.payload; + }, + setProjectId: (state, action) => { localStorage.setItem("project", null); state.projectId = action.payload; @@ -43,10 +56,6 @@ const localVariablesSlice = createSlice({ refreshData: (state, action) => { state.reload = action.payload; }, - setDefaultDateRange: (state, action) => { - state.defaultDateRange = action.payload; - }, - openOrgModal: (state, action) => { state.OrganizationModal.isOpen = true; state.OrganizationModal.orgData = action.payload?.orgData || null; @@ -75,15 +84,17 @@ const localVariablesSlice = createSlice({ state.AuthModal.isOpen = false; }, - - // project modal - openProjectModal: (state, action) => { - state.ProjectModal.isOpen = true; - state.ProjectModal.data = action.payload || null; + openModal: (state, action) => { + const { modalType, data } = action.payload; + state.modals[modalType] = { isOpen: true, ...data }; }, - closeProjectModal: (state) => { - state.ProjectModal.isOpen = false; - state.ProjectModal.data = null; + closeModal: (state, action) => { + const { modalType } = action.payload; + state.modals[modalType] = { ...state.modals[modalType], isOpen: false }; + }, + toggleModal: (state, action) => { + const { modalType } = action.payload; + state.modals[modalType].isOpen = !state.modals[modalType].isOpen; }, }, }); @@ -99,6 +110,6 @@ export const { toggleOrgModal, openAuthModal, closeAuthModal, - openProjectModal, closeProjectModal + setOrganization,openModal, closeModal, toggleModal } = localVariablesSlice.actions; -export default localVariablesSlice.reducer; \ No newline at end of file +export default localVariablesSlice.reducer;