From 9c8575a653e76163cf824a11464f8ece3d8a9114 Mon Sep 17 00:00:00 2001 From: "ashutosh.nehete" Date: Wed, 11 Jun 2025 10:20:53 +0530 Subject: [PATCH 1/8] Implmeneted signalR in today's attendance --- package-lock.json | 195 +++++++++++++++++++++++- package.json | 2 + src/hooks/useAttendance.js | 2 +- src/layouts/HomeLayout.jsx | 13 +- src/pages/Activities/AttendancePage.jsx | 25 ++- src/services/eventBus.js | 5 + src/services/signalRService.js | 37 +++++ src/utils/axiosClient.jsx | 4 +- 8 files changed, 272 insertions(+), 11 deletions(-) create mode 100644 src/services/eventBus.js create mode 100644 src/services/signalRService.js diff --git a/package-lock.json b/package-lock.json index 49e5d0c0..6d709d89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@hookform/resolvers": "^3.10.0", + "@microsoft/signalr": "^8.0.7", "@reduxjs/toolkit": "^2.5.0", "@types/web": "^0.0.216", "@vitejs/plugin-react": "^4.3.4", @@ -17,6 +18,7 @@ "axios-retry": "^4.5.0", "dotenv": "^16.4.7", "dotenv-webpack": "^8.1.0", + "eventemitter3": "^5.0.1", "jwt-decode": "^4.0.0", "localforage": "^1.10.0", "match-sorter": "^6.3.1", @@ -827,6 +829,19 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@microsoft/signalr": { + "version": "8.0.7", + "resolved": "https://registry.npmjs.org/@microsoft/signalr/-/signalr-8.0.7.tgz", + "integrity": "sha512-PHcdMv8v5hJlBkRHAuKG5trGViQEkPYee36LnJQx4xHOQ5LL4X0nEWIxOp5cCtZ7tu+30quz5V3k0b1YNuc6lw==", + "license": "MIT", + "dependencies": { + "abort-controller": "^3.0.0", + "eventsource": "^2.0.2", + "fetch-cookie": "^2.0.3", + "node-fetch": "^2.6.7", + "ws": "^7.4.5" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1750,6 +1765,18 @@ "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==", "license": "MIT" }, + "node_modules/abort-controller": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", + "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==", + "license": "MIT", + "dependencies": { + "event-target-shim": "^5.0.0" + }, + "engines": { + "node": ">=6.5" + } + }, "node_modules/acorn": { "version": "8.14.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", @@ -2980,10 +3007,19 @@ "node": ">=0.10.0" } }, + "node_modules/event-target-shim": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz", + "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/eventemitter3": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", - "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", "license": "MIT" }, "node_modules/events": { @@ -2996,6 +3032,15 @@ "node": ">=0.8.x" } }, + "node_modules/eventsource": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz", + "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==", + "license": "MIT", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", @@ -3051,6 +3096,16 @@ "reusify": "^1.0.4" } }, + "node_modules/fetch-cookie": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/fetch-cookie/-/fetch-cookie-2.2.0.tgz", + "integrity": "sha512-h9AgfjURuCgA2+2ISl8GbavpUdR+WGAM2McW/ovn4tVccegp8ZqCKWSBR8uRdM8dDNlx5WdKRWxBYUwteLDCNQ==", + "license": "Unlicense", + "dependencies": { + "set-cookie-parser": "^2.4.8", + "tough-cookie": "^4.0.0" + } + }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -4202,6 +4257,26 @@ "license": "MIT", "peer": true }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "license": "MIT", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/node-releases": { "version": "2.0.19", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", @@ -4521,15 +4596,32 @@ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" }, + "node_modules/psl": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz", + "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==", + "license": "MIT", + "dependencies": { + "punycode": "^2.3.1" + }, + "funding": { + "url": "https://github.com/sponsors/lupomontero" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", - "dev": true, "engines": { "node": ">=6" } }, + "node_modules/querystringify": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", + "license": "MIT" + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -4578,6 +4670,12 @@ "node": ">=0.10" } }, + "node_modules/quill/node_modules/eventemitter3": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", + "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==", + "license": "MIT" + }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -4804,6 +4902,12 @@ "node": ">=0.10.0" } }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "license": "MIT" + }, "node_modules/reselect": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", @@ -5066,6 +5170,12 @@ "randombytes": "^2.1.0" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -5441,6 +5551,27 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/tough-cookie": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", + "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==", + "license": "BSD-3-Clause", + "dependencies": { + "psl": "^1.1.33", + "punycode": "^2.1.1", + "universalify": "^0.2.0", + "url-parse": "^1.5.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", + "license": "MIT" + }, "node_modules/tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", @@ -5567,6 +5698,15 @@ "license": "MIT", "peer": true }, + "node_modules/universalify": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz", + "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/update-browserslist-db": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", @@ -5605,6 +5745,16 @@ "punycode": "^2.1.0" } }, + "node_modules/url-parse": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz", + "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", + "license": "MIT", + "dependencies": { + "querystringify": "^2.1.1", + "requires-port": "^1.0.0" + } + }, "node_modules/use-sync-external-store": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz", @@ -5685,6 +5835,12 @@ "node": ">=10.13.0" } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", + "license": "BSD-2-Clause" + }, "node_modules/webpack": { "version": "5.98.0", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.98.0.tgz", @@ -5766,6 +5922,16 @@ "node": ">=4.0" } }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "license": "MIT", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -5903,6 +6069,27 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/ws": { + "version": "7.5.10", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", + "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==", + "license": "MIT", + "engines": { + "node": ">=8.3.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/xlsx": { "version": "0.18.5", "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz", diff --git a/package.json b/package.json index 51392450..757b9840 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ }, "dependencies": { "@hookform/resolvers": "^3.10.0", + "@microsoft/signalr": "^8.0.7", "@reduxjs/toolkit": "^2.5.0", "@types/web": "^0.0.216", "@vitejs/plugin-react": "^4.3.4", @@ -20,6 +21,7 @@ "axios-retry": "^4.5.0", "dotenv": "^16.4.7", "dotenv-webpack": "^8.1.0", + "eventemitter3": "^5.0.1", "jwt-decode": "^4.0.0", "localforage": "^1.10.0", "match-sorter": "^6.3.1", diff --git a/src/hooks/useAttendance.js b/src/hooks/useAttendance.js index 33666784..1e8e3667 100644 --- a/src/hooks/useAttendance.js +++ b/src/hooks/useAttendance.js @@ -36,7 +36,7 @@ export const useAttendace =(projectId)=>{ } },[projectId]) - return {attendance,loading,error} + return {attendance,loading,error,recall:fetchData} } export const useEmployeeAttendacesLog = (id) => { diff --git a/src/layouts/HomeLayout.jsx b/src/layouts/HomeLayout.jsx index 183b5393..3a582a82 100644 --- a/src/layouts/HomeLayout.jsx +++ b/src/layouts/HomeLayout.jsx @@ -2,15 +2,26 @@ import React, { useEffect } from "react"; import { Outlet } from "react-router-dom"; import Header from "../components/Layout/Header"; import Sidebar from "../components/Layout/Sidebar"; - +import { startSignalR, stopSignalR } from "../services/SignalRService"; import Footer from "../components/Layout/Footer"; import FloatingMenu from "../components/common/FloatingMenu"; import { FabProvider } from "../Context/FabContext"; +import { useSelector } from "react-redux"; const HomeLayout = () => { + const loggedUser = useSelector((store) => store.globalVariables.loginUser); useEffect(() => { Main(); }, []); + useEffect(() => { + if (loggedUser) { + startSignalR(loggedUser); + } + + return () => { + stopSignalR(); + }; + }, [loggedUser]); return (
diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx index 5ddf8b66..eec0ee83 100644 --- a/src/pages/Activities/AttendancePage.jsx +++ b/src/pages/Activities/AttendancePage.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useCallback } from "react"; import { cacheData, getCachedData, @@ -18,6 +18,7 @@ import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice" import { hasUserPermission } from "../../utils/authUtils"; import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { REGULARIZE_ATTENDANCE } from "../../utils/constants"; +import eventBus from "../../services/eventBus"; const AttendancePage = () => { const [activeTab, setActiveTab] = useState("all"); @@ -25,7 +26,11 @@ const AttendancePage = () => { const loginUser = getCachedProfileData(); var selectedProject = useSelector((store) => store.localVariables.projectId); const { projects, loading: projectLoading } = useProjects(); - const { attendance, loading: attLoading } = useAttendace(selectedProject); + const { + attendance, + loading: attLoading, + recall: attrecall, + } = useAttendace(selectedProject); const [attendances, setAttendances] = useState(); const [empRoles, setEmpRoles] = useState(null); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); @@ -39,6 +44,16 @@ const AttendancePage = () => { date: new Date().toLocaleDateString(), }); + const handler = useCallback( + (msg) => { + console.log("Equal:", selectedProject == msg.projectId); + if (selectedProject == msg.projectId) { + attrecall(); + } + }, + [selectedProject, attrecall] + ); + const getRole = (roleId) => { if (!empRoles) return "Unassigned"; if (!roleId) return "Unassigned"; @@ -115,6 +130,10 @@ const AttendancePage = () => { ? attendances?.filter((att) => att?.checkOutTime === null) : attendances; + useEffect(() => { + eventBus.on("attendance", handler); + return () => eventBus.off("attendance", handler); + }, [handler]); return ( <> {isCreateModalOpen && modelConfig && ( @@ -232,8 +251,6 @@ const AttendancePage = () => { Regularization - -
{projectLoading && Loading..} diff --git a/src/services/eventBus.js b/src/services/eventBus.js new file mode 100644 index 00000000..78797988 --- /dev/null +++ b/src/services/eventBus.js @@ -0,0 +1,5 @@ +import EventEmitter from 'eventemitter3'; + +const eventBus = new EventEmitter(); + +export default eventBus; \ No newline at end of file diff --git a/src/services/signalRService.js b/src/services/signalRService.js new file mode 100644 index 00000000..79badd4f --- /dev/null +++ b/src/services/signalRService.js @@ -0,0 +1,37 @@ +import * as signalR from "@microsoft/signalr"; +import { clearCacheKey, getCachedData } from "../slices/apiDataManager"; +import showToast from "./toastService"; +import eventBus from "./eventBus"; +import { useSelector } from "react-redux"; + +let connection = null; + +const targetPath = ""; + +export function startSignalR(loggedUser) { + console.log(loggedUser?.employeeInfo.id); + connection = new signalR.HubConnectionBuilder() + .withUrl("http://localhost:5032/hubs/marco", { + accessTokenFactory: () => localStorage.getItem("jwtToken"), + withCredentials: false, + }) + .withAutomaticReconnect() + .build(); + + + connection.on("Attendance", (data) => { + clearCacheKey("Attendance"); + if (data.loginUserId != loggedUser?.employeeInfo.id) { + eventBus.emit('attendance', data ); + } + }); + + connection + .start() + .then(() => console.log("SignalR connected")) + .catch((err) => console.error("SignalR error:", err)); +} + +export function stopSignalR() { + if (connection) connection.stop(); +} diff --git a/src/utils/axiosClient.jsx b/src/utils/axiosClient.jsx index 93e96bc5..c7d31012 100644 --- a/src/utils/axiosClient.jsx +++ b/src/utils/axiosClient.jsx @@ -2,6 +2,7 @@ import axios from "axios"; import { useNavigate } from "react-router-dom"; import axiosRetry from "axios-retry"; import showToast from "../services/toastService"; +import { startSignalR, stopSignalR } from "../services/SignalRService"; const base_Url = process.env.VITE_BASE_URL; // const base_Url = "https://api.marcoaiot.com"; export const axiosClient = axios.create({ @@ -94,6 +95,7 @@ axiosClient.interceptors.response.use( redirectToLogin(); return Promise.reject(error); } + stopSignalR(); // Make a request to refresh the access token const response = await axiosClient .post("/api/Auth/refresh-token", { @@ -107,7 +109,7 @@ axiosClient.interceptors.response.use( const { token, refreshToken: newRefreshToken } = response.data.data; localStorage.setItem("jwtToken", token); localStorage.setItem("refreshToken", newRefreshToken); - + startSignalR() // Retry the original request with the new token originalRequest.headers["Authorization"] = `Bearer ${token}`; From 72f026646295508a5e67b7e43aa4e16dd17a5d52 Mon Sep 17 00:00:00 2001 From: "ashutosh.nehete" Date: Wed, 11 Jun 2025 10:59:23 +0530 Subject: [PATCH 2/8] Avoided API calls --- src/pages/Activities/AttendancePage.jsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx index eec0ee83..064f6f59 100644 --- a/src/pages/Activities/AttendancePage.jsx +++ b/src/pages/Activities/AttendancePage.jsx @@ -48,7 +48,16 @@ const AttendancePage = () => { (msg) => { console.log("Equal:", selectedProject == msg.projectId); if (selectedProject == msg.projectId) { - attrecall(); + const updatedAttendance = attendances.map((item) => + item.employeeId === msg.response.employeeId + ? { ...item, ...msg.response } + : item + ); + cacheData("Attendance", { + data: updatedAttendance, + projectId: selectedProject, + }); + setAttendances(updatedAttendance); } }, [selectedProject, attrecall] From 8682edb1d72029f1d31bc2640a5f40ccabacf87d Mon Sep 17 00:00:00 2001 From: "ashutosh.nehete" Date: Wed, 11 Jun 2025 12:05:09 +0530 Subject: [PATCH 3/8] Change ../services/signalRService from ../services/SignalRService --- src/layouts/HomeLayout.jsx | 2 +- src/utils/axiosClient.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layouts/HomeLayout.jsx b/src/layouts/HomeLayout.jsx index 3a582a82..34639ee0 100644 --- a/src/layouts/HomeLayout.jsx +++ b/src/layouts/HomeLayout.jsx @@ -2,7 +2,7 @@ import React, { useEffect } from "react"; import { Outlet } from "react-router-dom"; import Header from "../components/Layout/Header"; import Sidebar from "../components/Layout/Sidebar"; -import { startSignalR, stopSignalR } from "../services/SignalRService"; +import { startSignalR, stopSignalR } from "../services/signalRService"; import Footer from "../components/Layout/Footer"; import FloatingMenu from "../components/common/FloatingMenu"; import { FabProvider } from "../Context/FabContext"; diff --git a/src/utils/axiosClient.jsx b/src/utils/axiosClient.jsx index c7d31012..b57dc277 100644 --- a/src/utils/axiosClient.jsx +++ b/src/utils/axiosClient.jsx @@ -2,7 +2,7 @@ import axios from "axios"; import { useNavigate } from "react-router-dom"; import axiosRetry from "axios-retry"; import showToast from "../services/toastService"; -import { startSignalR, stopSignalR } from "../services/SignalRService"; +import { startSignalR, stopSignalR } from "../services/signalRService"; const base_Url = process.env.VITE_BASE_URL; // const base_Url = "https://api.marcoaiot.com"; export const axiosClient = axios.create({ From 4cf3b391db036d9908b8a6ca90ab4881a7c33c0d Mon Sep 17 00:00:00 2001 From: "ashutosh.nehete" Date: Wed, 11 Jun 2025 12:23:39 +0530 Subject: [PATCH 4/8] Added base url in signalrServies --- src/services/signalRService.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/services/signalRService.js b/src/services/signalRService.js index 79badd4f..a6072aa3 100644 --- a/src/services/signalRService.js +++ b/src/services/signalRService.js @@ -3,7 +3,8 @@ import { clearCacheKey, getCachedData } from "../slices/apiDataManager"; import showToast from "./toastService"; import eventBus from "./eventBus"; import { useSelector } from "react-redux"; - +// const base_Url = process.env.VITE_BASE_URL; +const base_Url = "https://devapi.marcoaiot.com"; let connection = null; const targetPath = ""; @@ -11,7 +12,7 @@ const targetPath = ""; export function startSignalR(loggedUser) { console.log(loggedUser?.employeeInfo.id); connection = new signalR.HubConnectionBuilder() - .withUrl("http://localhost:5032/hubs/marco", { + .withUrl(`${base_Url}/hubs/marco`, { accessTokenFactory: () => localStorage.getItem("jwtToken"), withCredentials: false, }) From 369343f1d5a464b0e8f2d1ab92b2fac4a3b277a8 Mon Sep 17 00:00:00 2001 From: "ashutosh.nehete" Date: Wed, 11 Jun 2025 15:05:27 +0530 Subject: [PATCH 5/8] Added lognpolling in signalR request --- src/services/signalRService.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/services/signalRService.js b/src/services/signalRService.js index a6072aa3..b0af6a81 100644 --- a/src/services/signalRService.js +++ b/src/services/signalRService.js @@ -10,20 +10,21 @@ let connection = null; const targetPath = ""; export function startSignalR(loggedUser) { - console.log(loggedUser?.employeeInfo.id); + var jwtToken = localStorage.getItem("jwtToken"); + console.log("token", jwtToken); connection = new signalR.HubConnectionBuilder() .withUrl(`${base_Url}/hubs/marco`, { - accessTokenFactory: () => localStorage.getItem("jwtToken"), + accessTokenFactory: () => jwtToken, + transport: signalR.HttpTransportType.LongPolling, withCredentials: false, }) .withAutomaticReconnect() .build(); - connection.on("Attendance", (data) => { clearCacheKey("Attendance"); if (data.loginUserId != loggedUser?.employeeInfo.id) { - eventBus.emit('attendance', data ); + eventBus.emit("attendance", data); } }); From 792529776c0e8d2d5469bcdd618d553f2992e0f8 Mon Sep 17 00:00:00 2001 From: "ashutosh.nehete" Date: Wed, 11 Jun 2025 23:23:14 +0530 Subject: [PATCH 6/8] Implemented attendance funcationality in attendance module --- src/components/Activities/AttendcesLogs.jsx | 35 ++++++++++- src/components/Activities/Regularization.jsx | 61 +++++++++++++++----- src/components/Dashboard/Teams.jsx | 26 ++++++++- src/pages/Activities/AttendancePage.jsx | 2 - src/services/signalRService.js | 25 ++++++-- 5 files changed, 124 insertions(+), 25 deletions(-) diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index a2fb432d..ea9870bc 100644 --- a/src/components/Activities/AttendcesLogs.jsx +++ b/src/components/Activities/AttendcesLogs.jsx @@ -7,6 +7,7 @@ import { useSelector, useDispatch } from "react-redux"; import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; import DateRangePicker from "../common/DateRangePicker"; import { getCachedData } from "../../slices/apiDataManager"; +import eventBus from "../../services/eventBus"; const usePagination = (data, itemsPerPage) => { const [currentPage, setCurrentPage] = useState(1); @@ -69,7 +70,7 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => { setIsRefreshing(false); }, [dateRange, projectId, dispatch, isRefreshing]); - useEffect(() => { + const filtering = (data) => { const filteredData = showOnlyCheckout ? data.filter((item) => item.checkOutTime === null) : data; @@ -108,6 +109,10 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => { // Create the final sorted array const finalData = sortedDates.flatMap((date) => groupedByDate[date]); setProcessedData(finalData); + } + + useEffect(() => { + filtering(data) }, [data, showOnlyCheckout]); const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination( @@ -120,6 +125,34 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => { resetPage(); }, [processedData, resetPage]); + const handler = useCallback( + (msg) => { + const { startDate, endDate } = dateRange; + const checkIn = msg.response.checkInTime.substring(0, 10); + + if ( + projectId === msg.projectId && + startDate <= checkIn && + checkIn <= endDate + ) { + const updatedAttendance = data.map((item) => + item.employeeId === msg.response.employeeId + ? { ...item, ...msg.response } + : item + ); + + filtering(updatedAttendance); + resetPage(); + } + }, + [projectId, dateRange, data, filtering, resetPage] +); + + useEffect(() => { + eventBus.on("attendance_log", handler); + return () => eventBus.off("attendance_log", handler); + }, [handler]); + return ( <> diff --git a/src/components/Activities/Regularization.jsx b/src/components/Activities/Regularization.jsx index 5c4fb869..b4ff5609 100644 --- a/src/components/Activities/Regularization.jsx +++ b/src/components/Activities/Regularization.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import Avatar from "../common/Avatar"; import { convertShortTime } from "../../utils/dateUtils"; import RegularizationActions from "./RegularizationActions"; @@ -6,6 +6,8 @@ import { useSelector } from "react-redux"; import { useRegularizationRequests } from "../../hooks/useAttendance"; import moment from "moment"; import usePagination from "../../hooks/usePagination"; +import eventBus from "../../services/eventBus"; +import { cacheData, clearCacheKey } from "../../slices/apiDataManager"; const Regularization = ({ handleRequest }) => { var selectedProject = useSelector((store) => store.localVariables.projectId); @@ -22,16 +24,38 @@ const Regularization = ({ handleRequest }) => { const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase(); return nameA.localeCompare(nameB); }; - const filteredData = [...regularizesList]?.sort(sortByName); + const handler = useCallback( + (msg) => { + if (selectedProject == msg.projectId) { + const updatedAttendance = regularizes?.filter( item => item.id !== msg.response.id ); + cacheData("regularizedList", { + data: updatedAttendance, + projectId: selectedProject, + }); + // clearCacheKey("regularizedList") + refetch(); + } + }, + [selectedProject, regularizes] + ); + + const filteredData = [...regularizesList]?.sort(sortByName); const { currentPage, totalPages, currentItems, paginate } = usePagination( filteredData, 10 ); + useEffect(() => { + eventBus.on("regularization", handler); + return () => eventBus.off("regularization", handler); + }, [handler]); return ( -
+
@@ -47,7 +71,11 @@ const Regularization = ({ handleRequest }) => { - {loading && } + {loading && ( + + )} {!loading && (regularizes?.length > 0 ? ( @@ -55,7 +83,7 @@ const Regularization = ({ handleRequest }) => { - + }} + > + No Record Found + ))}
Loading... + Loading... +
- @@ -88,17 +116,22 @@ const Regularization = ({ handleRequest }) => { )) ) : (
No Record Found
- {!loading >10 && ( + {!loading > 10 && (
- -
- -
    - {[ - { - id: "b74da4c2-d07e-46f2-9919-e75e49b12731", - label: "Active", - }, - { - id: "603e994b-a27f-4e5d-a251-f3d69b0498ba", - label: "On Hold", - }, - { - id: "ef1c356e-0fe0-42df-a5d3-8daee355492d", - label: "Inactive", - }, - { - id: "33deaef9-9af1-4f2a-b443-681ea0d04f81", - label: "Completed", - }, - ].map(({ id, label }) => ( -
  • -
    - handleStatusChange(id)} - /> - -
    -
    • - ))} -
-
- + +
+ +
    + {[ + { + id: "b74da4c2-d07e-46f2-9919-e75e49b12731", + label: "Active", + }, + { + id: "603e994b-a27f-4e5d-a251-f3d69b0498ba", + label: "On Hold", + }, + { + id: "ef1c356e-0fe0-42df-a5d3-8daee355492d", + label: "Inactive", + }, + { + id: "33deaef9-9af1-4f2a-b443-681ea0d04f81", + label: "Completed", + }, + ].map(({ id, label }) => ( +
  • +
    + handleStatusChange(id)} + /> + +
    +
    • + ))} +
+
@@ -341,7 +367,11 @@ const ProjectList = () => { ) : ( currentItems.map((project) => ( - + )) )} @@ -349,7 +379,11 @@ const ProjectList = () => {
) : ( currentItems.map((project) => ( - + )) )}
diff --git a/src/pages/project/ProjectListView.jsx b/src/pages/project/ProjectListView.jsx index 0b2682e0..f16f7292 100644 --- a/src/pages/project/ProjectListView.jsx +++ b/src/pages/project/ProjectListView.jsx @@ -22,6 +22,10 @@ const ProjectListView = ({ projectData, recall }) => { const navigate = useNavigate(); const ManageProject = useHasUserPermission(MANAGE_PROJECT); + useEffect(()=>{ + setProjectInfo(projectData); + },[projectData]) + const handleShow = async () => { try { const response = await ProjectRepository.getProjectByprojectId( diff --git a/src/services/signalRService.js b/src/services/signalRService.js index 2c0d432d..1fd5a5ac 100644 --- a/src/services/signalRService.js +++ b/src/services/signalRService.js @@ -3,6 +3,7 @@ import { clearCacheKey, getCachedData } from "../slices/apiDataManager"; import showToast from "./toastService"; import eventBus from "./eventBus"; import { useSelector } from "react-redux"; +import { clearApiCacheKey } from "../slices/apiCacheSlice"; const base_Url = process.env.VITE_BASE_URL; // const base_Url = "https://devapi.marcoaiot.com"; let connection = null; @@ -25,19 +26,30 @@ export function startSignalR(loggedUser) { ) .toISOString() .split("T")[0]; - connection.on("Attendance", (data) => { - const checkIn = data.response.checkInTime.substring(0, 10); - if (data.loginUserId != loggedUser?.employeeInfo.id) { - if (today === checkIn) { - eventBus.emit("attendance", data); - } - var onlyDate = Number(checkIn.substring(8, 10)); + connection.on("NotificationEventHandler", (data) => { + // console.log("Notification received:", data); + if (data.keyword == "Attendance") { + const checkIn = data.response.checkInTime.substring(0, 10); + if (data.loginUserId != loggedUser?.employeeInfo.id) { + if (today === checkIn) { + eventBus.emit("attendance", data); + } + var onlyDate = Number(checkIn.substring(8, 10)); - var afterTwoDay = checkIn.substring(0, 8) + (onlyDate + 2).toString().padStart(2, "0");; - if(afterTwoDay <= today && (data.response.activity == 4 || data.response.activity == 5)){ - eventBus.emit("regularization", data); + var afterTwoDay = + checkIn.substring(0, 8) + (onlyDate + 2).toString().padStart(2, "0"); + if ( + afterTwoDay <= today && + (data.response.activity == 4 || data.response.activity == 5) + ) { + eventBus.emit("regularization", data); + } + eventBus.emit("attendance_log", data); } - eventBus.emit("attendance_log", data); + } + if (data.keyword == "Create_Project" || data.keyword == "Update_Project") { + clearCacheKey("projectslist"); + eventBus.emit("project", data); } });