implemented singlR

src/components/Documents/DocumentFilterPanel.jsx

@@ -189,12 +189,12 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
         <div className="d-flex justify-content-end py-3 gap-2">
           <button
             type="button"
-            className="btn btn-label-secondary btn-xs"
+            className="btn btn-label-secondary btn-sm"
             onClick={onClear}
           >
             Clear
           </button>
-          <button type="submit" className="btn btn-primary btn-xs">
+          <button type="submit" className="btn btn-primary btn-sm">
             Apply
           </button>
         </div>

src/components/Documents/DocumentSkeleton.jsx

@@ -17,9 +17,8 @@ const SkeletonCell = ({
   />
 );
 
-export const DocumentTableSkeleton = ({ rows = 5 }) => {
+export const DocumentTableSkeleton = ({ rows = 10 }) => {
   return (
-
     <table className="card-body table border-top dataTable no-footer dtr-column text-nowrap">
       <thead>
         <tr>
@@ -47,7 +46,11 @@ export const DocumentTableSkeleton = ({ rows = 5 }) => {
             {/* Uploaded By (Avatar + Name) */}
             <td className="text-start">
               <div className="d-flex align-items-center gap-2">
-                  <SkeletonCell width="30px" height={30} className="rounded-circle" />
+                <SkeletonCell
+                  width="30px"
+                  height={30}
+                  className="rounded-circle"
+                />
                 <SkeletonCell width="80px" height={16} />
               </div>
             </td>
@@ -65,6 +68,5 @@ export const DocumentTableSkeleton = ({ rows = 5 }) => {
         ))}
       </tbody>
     </table>
-   
   );
 };

src/components/Documents/Documents.jsx

@@ -117,7 +117,7 @@ const Documents = ({ Document_Entity, Entity }) => {
   }, [Document_Entity]);
   return (
     <DocumentContext.Provider value={contextValues}>
-      <div className="mt-5">
+      <div className="mt-2">
         <div className="card page-min-h d-flex p-2">
           <div className="row align-items-center">
             {/* Search */}

src/components/Documents/DocumentsList.jsx

@@ -82,9 +82,9 @@ const DocumentsList = ({
   if (isLoading || isFetching) return <DocumentTableSkeleton />;
   if (isError)
     return <div>Error: {error?.message || "Something went wrong"}</div>;
-  if (isInitialEmpty) return <div>No documents found yet.</div>;
-  if (isSearchEmpty) return <div>No results found for "{debouncedSearch}"</div>;
-  if (isFilterEmpty) return <div>No documents match your filter.</div>;
+  if (isInitialEmpty) return <div className="py-12 my-12">No documents found yet.</div>;
+  if (isSearchEmpty) return <div className="py-12 my-12">No results found for "{debouncedSearch}"</div>;
+  if (isFilterEmpty) return <div  className="py-12 my-12">No documents match your filter.</div>;
 
   const handleDelete = () => {
     ActiveInActive(
@@ -180,10 +180,10 @@ const DocumentsList = ({
         />
       )}
 
-      <div className="table-responsive">
+      <div className="table-responsive p-2">
         <table className="table border-top dataTable text-nowrap">
-          <thead>
-            <tr className="shadow-sm">
+          <thead className="">
+            <tr className="py-2 ">
               {DocumentColumns.map((col) => (
                 <th key={col.key} className={`sorting ${col.align}`}>
                   {col.label}

src/components/Employee/EmpAttendance.jsx

@@ -131,7 +131,7 @@ const EmpAttendance = ({ employee }) => {
           <AttendLogs Id={attendanceId} />
         </GlobalModel>
       )}
-      <div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
+      <div className="card px-4 mt-2 py-2 page-min-h ">
         <div
           className="dataTables_length text-start py-2 d-flex justify-content-between "
           id="DataTables_Table_0_length"

src/components/Employee/EmpDashboard.jsx

@@ -12,11 +12,11 @@ const EmpDashboard = ({ profile }) => {
   return (
     <>
       <div className="row">
-        <div className="col-12 col-sm-6 pt-5">
+        <div className="col-12 col-sm-6 pt-2">
           {" "}
           <EmpOverview profile={profile}></EmpOverview>
         </div>
-        <div className="col col-sm-6 pt-5">
+        {/* <div className="col col-sm-6 pt-5">
           <div className="card ">
             <div className="card-body">
               <small className="card-text text-uppercase text-body-secondary small text-start d-block">
@@ -29,7 +29,6 @@ const EmpDashboard = ({ profile }) => {
                     className="d-flex mb-4 align-items-start flex-wrap"
                     key={project.id}
                   >
-                    {/* Project Info */}
                     <div className="flex-grow-1">
                       <div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="d-flex">
@@ -70,7 +69,6 @@ const EmpDashboard = ({ profile }) => {
                         </div>
                       </div>
 
-                      {/* Dates */}
 
                     </div>
                   </li>
@@ -79,7 +77,7 @@ const EmpDashboard = ({ profile }) => {
 
             </div>
           </div>
-        </div>
+        </div> */}
       </div>
     </>
   );

src/components/Employee/EmployeeNav.jsx

@@ -24,7 +24,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
       icon: "bx bx-file",
       label: "Documents",
     },
-    { key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
+    // { key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
   ].filter(Boolean);
   return (
     <div className="col-md-12">

src/components/Layout/Header.jsx

@@ -45,8 +45,9 @@ const Header = () => {
         pathname
       );
     const isExpensePage = /^\/expenses$/.test(pathname);
+    const isEmployeePage =  /^\/employees$/.test(pathname)
 
-    return !(isDirectoryPath || isProfilePage || isExpensePage);
+    return !(isDirectoryPath || isProfilePage || isExpensePage || isEmployeePage);
   };
   const allowedProjectStatusIds = [
     "603e994b-a27f-4e5d-a251-f3d69b0498ba",
@@ -83,7 +84,7 @@ const Header = () => {
     currentProjectDisplayName = projectNames[0].name;
   } else {
     if (selectedProject === null) {
-      currentProjectDisplayName = "All Projects";
+      currentProjectDisplayName = projectNames[0].name;
     } else {
       const selectedProjectObj = projectNames.find(
         (p) => p?.id === selectedProject
@@ -135,14 +136,14 @@ const Header = () => {
 
   const newProjectHandler = useCallback(
     async (msg) => {
-      if (HasManageProjectPermission && msg.keyword === "Create_Project") {
+      if ( msg.keyword === "Create_Project") {
         await fetchData();
       } else if (projectNames?.some((item) => item.id === msg.response.id)) {
         await fetchData();
       }
       cacheData("hasReceived", false);
     },
-    [HasManageProjectPermission, projectNames, fetchData]
+    [ projectNames, fetchData]
   );
 
   useEffect(() => {
@@ -212,7 +213,7 @@ const Header = () => {
                     className="dropdown-menu"
                     style={{ overflow: "auto", maxHeight: "300px" }}
                   >
-                    {isDashboardPath && (
+                    {isProjectPath && (
                       <li>
                         <button
                           className="dropdown-item"

src/components/Project/ProjectCard.jsx

@@ -66,7 +66,7 @@ const ProjectCard = ({ project }) => {
                   </div>
                 </div>
               </div>
-              <div className={`ms-auto ${!ManageProject && "d-none"}`}>
+              <div className={`ms-auto `}>
                 <div className="dropdown z-2">
                   <button
                     type="button"
@@ -106,12 +106,6 @@ const ProjectCard = ({ project }) => {
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                    <li onClick={handleViewActivities}>
-                      <a className="dropdown-item">
-                        <i className="bx bx-task me-2"></i>
-                        <span className="align-left">Activities</span>
-                      </a>
-                    </li>
                   </ul>
                 </div>
               </div>

src/components/Project/ProjectCardView.jsx

@@ -1,28 +1,20 @@
-import React from 'react'
-import { useProjects } from '../../hooks/useProjects'
-import Loader from '../common/Loader'
-import ProjectCard from './ProjectCard'
-
-const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
-
+import React from "react";
+import { useProjects } from "../../hooks/useProjects";
+import Loader from "../common/Loader";
+import ProjectCard from "./ProjectCard";
 
+const ProjectCardView = ({ currentItems, setCurrentPage, totalPages }) => {
   return (
-
     <div className="row page-min-h">
-
-          { currentItems.length === 0 && (
+      {currentItems.length === 0 && (
         <p className="text-center text-muted">No projects found.</p>
       )}
 
       {currentItems.map((project) => (
-              <ProjectCard
-                key={project.id}
-                project={project}
-              />
+        <ProjectCard key={project.id} project={project} />
       ))}
 
-
-             {  totalPages > 1 && (
+      {totalPages > 1 && (
         <nav>
           <ul className="pagination pagination-sm justify-content-end py-2">
             <li className={`page-item ${currentPage === 1 && "disabled"}`}>
@@ -47,7 +39,8 @@ const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
               </li>
             ))}
             <li
-                className={`page-item ${currentPage === totalPages && "disabled"
+              className={`page-item ${
+                currentPage === totalPages && "disabled"
               }`}
             >
               <button
@@ -63,8 +56,7 @@ const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
         </nav>
       )}
     </div>
+  );
+};
 
-  )
-}
-
-export default ProjectCardView
+export default ProjectCardView;

src/components/Project/ProjectListView.jsx

@@ -26,9 +26,8 @@ const ProjectListView = ({
   const navigate = useNavigate();
   const { setMangeProject } = useProjectContext();
   // const { data, isLoading, isError, error } = useProjects();
-
   //   check Permissions
-  const canManageProject = useHasUserPermission(MANAGE_PROJECT);
+  // const canManageProject = useHasUserPermission(MANAGE_PROJECT);
 
   const projectColumns = [
     {
@@ -125,11 +124,15 @@ const ProjectListView = ({
     },
   ];
 
-  const handleViewActivities = (project) => {
-    dispatch(setProjectId(project));
-    navigate(`/activities/records?project=${project}`);
-  };
+  // const handleViewActivities = (project) => {
+  //   dispatch(setProjectId(project));
+  //   navigate(`/activities/records?project=${project}`);
+  // };
 
+  const handleMoveDetails = (project) => {
+    dispatch(setProjectId(project));
+    navigate("/projects/details");
+  };
   return (
     <div className="card page-min-h py-4 px-6 shadow-sm">
       <table className="table  table-hover align-middle m-0">
@@ -158,11 +161,7 @@ const ProjectListView = ({
                     : project[col.key] || "N/A"}
                 </td>
               ))}
-              <td
-                className={`mx-2 ${
-                  canManageProject ? "d-sm-table-cell" : "d-none"
-                }`}
-              >
+              <td className={`mx-2 ${"d-sm-table-cell"}`}>
                 <div className="dropdown z-2">
                   <button
                     type="button"
@@ -180,7 +179,7 @@ const ProjectListView = ({
                     ></i>
                   </button>
                   <ul className="dropdown-menu dropdown-menu-end">
-                    <li>
+                    <li onClick={() => handleMoveDetails(project.id)}>
                       <a
                         aria-label="click to  View details"
                         className="dropdown-item cursor-pointer"
@@ -204,12 +203,12 @@ const ProjectListView = ({
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                    <li onClick={() => handleViewActivities(project.id)}>
+                    {/* <li onClick={() => handleViewActivities(project.id)}>
                       <a className="dropdown-item cursor-pointer">
                         <i className="bx bx-task me-2"></i>
                         <span className="align-left">Activities</span>
                       </a>
-                    </li>
+                    </li> */}
                   </ul>
                 </div>
               </td>

src/hooks/useDocument.js

@@ -120,7 +120,7 @@ export const useUploadDocument = (onSuccessCallBack) => {
       DocumentRepository.uploadDocument(DocumentPayload),
     onSuccess: (data, variables) => {
       queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
-
+      queryClient.invalidateQueries({ queryKey: ["Document"] });
       if (onSuccessCallBack) onSuccessCallBack();
     },
     onError: (error) => {
@@ -141,7 +141,7 @@ export const useUpdateDocument = (onSuccessCallBack) => {
     onSuccess: (data, variables) => {
       const { documentId } = variables;
       queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
-      queryClient.invalidateQueries({ queryKey: ["Document", documentId] });
+      queryClient.invalidateQueries({ queryKey: ["Document"] });
       if (onSuccessCallBack) onSuccessCallBack();
     },
     onError: (error) => {
@@ -187,6 +187,7 @@ export const useActiveInActiveDocument = ()=>{
     onSuccess: (data, variables) => {
       const {isActive} = variables;
      queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
+     queryClient.invalidateQueries({ queryKey: ["Document"] });
       showToast(`Document ${isActive ? "restored":"Deleted"} successfully`,"success")
     },
     onError: (error) => {

src/pages/Directory/DirectoryPage.jsx

@@ -44,7 +44,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
   const [searchNote, setSearchNote] = useState("");
   const [activeTab, setActiveTab] = useState("notes");
   const { setActions } = useFab();
-  const [gridView, setGridView] = useState(false);
+  const [gridView, setGridView] = useState(true);
   const [isOpenBucket, setOpenBucket] = useState(false);
   const [isManageContact, setManageContact] = useState({
     isOpen: false,
@@ -185,14 +185,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                             value={searchContact}
                             onChange={(e) => setsearchContact(e.target.value)}
                           />
-                          <button
-                            className={`btn btn-sm p-1 ${
-                              !gridView ? "btn-primary" : "btn-outline-primary"
-                            }`}
-                            onClick={() => setGridView(false)}
-                          >
-                            <i className="bx bx-list-ul"></i>
-                          </button>
+                         
 
                           <button
                             className={`btn btn-sm p-1 ${
@@ -202,6 +195,15 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                           >
                             <i className="bx bx-grid-alt"></i>
                           </button>
+
+                           <button
+                            className={`btn btn-sm p-1 ${
+                              !gridView ? "btn-primary" : "btn-outline-primary"
+                            }`}
+                            onClick={() => setGridView(false)}
+                          >
+                            <i className="bx bx-list-ul"></i>
+                          </button>
                         </div>
 
                         <div className="form-check form-switch d-flex align-items-center">

src/pages/Directory/NoteFilterPanel.jsx

@@ -60,12 +60,12 @@ const NoteFilterPanel = ({ onApply, clearFilter }) => {
         <div className="d-flex justify-content-end py-3 gap-2">
           <button
             type="button"
-            className="btn btn-label-secondary btn-xs"
+            className="btn btn-label-secondary btn-sm"
             onClick={handleClose}
           >
             Clear
           </button>
-          <button type="submit" className="btn btn-primary btn-xs">
+          <button type="submit" className="btn btn-primary btn-sm">
             Apply
           </button>
         </div>

src/pages/employee/EmployeeList.jsx

@@ -51,11 +51,7 @@ const EmployeeList = () => {
   const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
-    useEmployeesAllOrByProjectId(
-      showAllEmployees,
-      null,
-      showInactive
-    );
+    useEmployeesAllOrByProjectId(showAllEmployees, null, showInactive);
 
   const [employeeList, setEmployeeList] = useState([]);
   const [modelConfig, setModelConfig] = useState();
@@ -206,17 +202,11 @@ const EmployeeList = () => {
     }
   }, [loading, employees, showAllEmployees]);
 
-
-
   const handler = useCallback(
     (msg) => {
       if (employees.some((item) => item.id == msg.employeeId)) {
         setEmployeeList([]);
-        recallEmployeeData(
-          showInactive,
-          null,
-          showAllEmployees 
-        ); 
+        recallEmployeeData(showInactive, null, showAllEmployees);
       }
     },
     [employees, showInactive, showAllEmployees]
@@ -289,12 +279,10 @@ const EmployeeList = () => {
 
         {ViewTeamMember ? (
           // <div className="row">
-          <div className="card page-min-h p-1">
-            <div className="card-datatable table-responsive pt-5 mx-5 py-10">
+          <div className="card page-min-h ">
             <div
               id="DataTables_Table_0_wrapper"
-                className="dataTables_wrapper dt-bootstrap5 no-footer"
-                style={{ width: "100%" }}
+              className="dataTables_wrapper dt-bootstrap5 no-footer p-1 pt-5 mx-5 py-10"
             >
               <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
                 {/* Switches: All Employees + Inactive */}
@@ -521,27 +509,23 @@ const EmployeeList = () => {
                   {/* Conditional messages for no data or no search results */}
                   {!loading &&
                   displayData?.length === 0 &&
-                    searchText &&
-                    !showAllEmployees ? (
+                  searchText  ? (
                     <tr>
-                        <td colSpan={8}>
+                      <td colSpan={8} className="border-0">
+                             <div className="py-12">
                                  <small className="muted">
                           '{searchText}' employee not found
                         </small>{" "}
+                             </div>
                       </td>
                     </tr>
                   ) : null}
                   {!loading &&
                   displayData?.length === 0 &&
-                    (!searchText || showAllEmployees) ? (
+                  (!searchText ) ? (
                     <tr>
-                        <td
-                          colSpan={8}
-                          className="border-0"
-                        >
-                      <div className="py-1">
-                        No Employeee Found
-                      </div>
+                      <td colSpan={8} className="border-0">
+                        <div className="py-12">{showInactive ? "No In-active Employeee Found"  : "No Employeee Found" }</div>
                       </td>
                     </tr>
                   ) : null}
@@ -559,9 +543,7 @@ const EmployeeList = () => {
                             ></Avatar>
                             <div className="d-flex flex-column">
                               <a
-                                  onClick={() =>
-                                    navigate(`/employee/${item.id}`)
-                                  }
+                                onClick={() => navigate(`/employee/${item.id}`)}
                                 className="text-heading text-truncate cursor-pointer"
                               >
                                 <span className="fw-normal">
@@ -579,9 +561,7 @@ const EmployeeList = () => {
                               {item.email}
                             </span>
                           ) : (
-                              <span className="text-truncate text-italic">
-                                -
-                              </span>
+                            <span className="text-truncate text-italic">-</span>
                           )}
                         </td>
                         <td className="text-start  d-none  d-sm-table-cell">
@@ -646,8 +626,7 @@ const EmployeeList = () => {
                                         handleEmployeeModel(item.id)
                                       }
                                     >
-                                        <i className="bx bx-edit bx-sm"></i>{" "}
-                                        Edit
+                                      <i className="bx bx-edit bx-sm"></i> Edit
                                     </button>
 
                                     {/* Suspend only when active */}
@@ -670,8 +649,8 @@ const EmployeeList = () => {
                                         setEmpForManageRole(item.id)
                                       }
                                     >
-                                        <i className="bx bx-cog bx-sm"></i>{" "}
-                                        Manage Role
+                                      <i className="bx bx-cog bx-sm"></i> Manage
+                                      Role
                                     </button>
                                   </>
                                 )}
@@ -704,7 +683,6 @@ const EmployeeList = () => {
               )}
             </div>
           </div>
-          </div>
         ) : (
           <div className="card">
             <div className="text-center">

src/pages/master/MasterPage.jsx

@@ -161,8 +161,8 @@ const MasterPage = () => {
           data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
         />
 
-        <div className="row">
-          <div className="card">
+
+          <div className="card page-min-h">
             <div
               className="card-datatable table-responsive py-10 mx-5 "
               style={{ overflow: "hidden" }}
@@ -223,7 +223,6 @@ const MasterPage = () => {
             </div>
         </div>
       </div>
-      </div>
      </MasterContext.Provider>
   );
 };

src/pages/master/MasterTable.jsx

@@ -109,11 +109,11 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
             {currentItems.length > 0 ? (
               currentItems.map((item, index) => (
                 <tr key={index}>
-                  <td style={{ width: "20px" }}>
-                    <i className="bx bx-right-arrow-alt"></i>
+                  <td style={{ width: "20px", }} className="py-5">
+                    <div className="py-2 px-3"><i className="bx bx-right-arrow-alt"></i></div>
                   </td>
                   {updatedColumns.map((col) => (
-                    <td className="text-start mx-2" key={col.key}>
+                    <td className="text-start mx-2 p-3" key={col.key} style={{ padding: "12px 16px" }} >
                       {col.key === "description" ? (
                         item[col.key] !== undefined &&
                         item[col.key] !== null ? (

src/services/signalRService.js

@@ -32,100 +32,104 @@ export function startSignalR(loggedUser) {
     .toISOString()
     .split("T")[0];
   connection.on("NotificationEventHandler", (data) => {
-    if (data.loggedInUserId != loggedUser?.employeeInfo.id) {
-      // console.log("Notification received:", data);
-      // if action taken on attendance module
-      if (data.keyword == "Attendance") {
-        const checkIn = data.response.checkInTime.substring(0, 10);
-        if (today === checkIn) {
-          eventBus.emit("attendance", data);
-        }
-        var onlyDate = Number(checkIn.substring(8, 10));
+  const { loggedInUserId, keyword, response, employeeList, numberOfImages } = data;
+  const loggedInId = loggedUser?.employeeInfo?.id;
 
-        var afterTwoDay =
+  if (loggedInUserId === loggedInId) return;
+
+  // ---- Handlers for invalidate or remove ----
+  const queryInvalidators = {
+    Expanse: () => {
+      queryClient.invalidateQueries({ queryKey: ["Expenses"] }),
+      queryClient.invalidateQueries({ queryKey: ["Expense"] })
+    },
+    Create_Project: () => queryClient.invalidateQueries(["projectslist"]),
+    Update_Project: () => queryClient.invalidateQueries(["projectslist"]),
+    Infra: () => queryClient.removeQueries({ queryKey: ["ProjectInfra"] }),
+    Task_Report: () => queryClient.invalidateQueries({ queryKey: ["Infra"] }),
+    WorkItem: () => queryClient.invalidateQueries({ queryKey: ["WorkItems"] }),
+    Directory_Notes:()=>{
+      queryClient.invalidateQueries({queryKey:["directoryNotes"]})
+      queryClient.invalidateQueries({queryKey:["Notes"]})
+    },
+    Directory_Buckets:()=>{
+      queryClient.invalidateQueries({queryKey:["bucketList"]})
+    },
+    Directory:()=>{
+      queryClient.invalidateQueries({queryKey:["contacts"]})
+      queryClient.invalidateQueries({queryKey:["Contact"]})
+      queryClient.invalidateQueries({queryKey:["ContactProfile"]})
+    }
+
+  };
+
+  // ---- Keyword based event emitters ----
+  const emitters = {
+    employee: () => eventBus.emit("employee", data),
+    project: () => eventBus.emit("project", data),
+    infra: () => eventBus.emit("infra", data),
+    assign_project_all: () => eventBus.emit("assign_project_all", data),
+    image_gallery: () => eventBus.emit("image_gallery", data),
+  };
+
+  // ---- Handle Attendance ----
+  if (keyword === "Attendance") {
+    const checkIn = response.checkInTime.substring(0, 10);
+    if (today === checkIn) eventBus.emit("attendance", data);
+
+    const onlyDate = Number(checkIn.substring(8, 10));
+    const afterTwoDay =
       checkIn.substring(0, 8) + (onlyDate + 2).toString().padStart(2, "0");
+
     if (
       afterTwoDay <= today &&
-          (data.response.activity == 4 || data.response.activity == 5)
+      (response.activity === 4 || response.activity === 5)
     ) {
       eventBus.emit("regularization", data);
     }
     eventBus.emit("attendance_log", data);
   }
-         if(data.keyword == "Expanse"){
-        queryClient.invalidateQueries({queryKey:["Expenses"]})
-      }
-      // if create or update project
-      if (
-        data.keyword == "Create_Project" ||
-        data.keyword == "Update_Project"
-      ) {
-        // clearCacheKey("projectslist");
-        queryClient.invalidateQueries(['projectslist']);  
-        eventBus.emit("project", data);
+
+  // ---- Invalidate/Remove cache by keywords ----
+  if (queryInvalidators[keyword]) {
+    queryInvalidators[keyword]();
   }
 
-      // if assign or deassign employee to any project
-      if (data.keyword == "Assign_Project") {
-        if (
-          data.employeeList.some((item) => item === loggedUser?.employeeInfo.id)
-        ) {
+  // ---- Project creation/update ----
+  if (keyword === "Create_Project" || keyword === "Update_Project") {
+    emitters.project();
+  }
+
+  // ---- Assign/deassign project ----
+  if (keyword === "Assign_Project") {
+    if (employeeList?.includes(loggedInId)) {
       try {
         cacheData("hasReceived", false);
         eventBus.emit("assign_project_one", data);
-          } catch (e) {
-            // console.error("Error in cacheData:", e);
+      } catch {}
     }
-        }
-        eventBus.emit("assign_project_all", data);
-      }
-      // if created or updated infra
-      if (data.keyword == "Infra") {
-        queryClient.removeQueries({queryKey:["ProjectInfra"]})
-        // eventBus.emit("infra", data);
-      }
-      if (data.keyword == "Task_Report") {
-        queryClient.removeQueries({queryKey:["Infra"]})
-        // eventBus.emit("infra", data);
+    emitters.assign_project_all();
   }
 
-      if ( data.keyword == "WorkItem" )
-      {
-        queryClient.removeQueries({queryKey:["WorkItems"]})
-      }
-
-      // if created or updated Employee
-      if (data.keyword == "Employee") {
-        // clearCacheKey("employeeListByProject");
-        // clearCacheKey("allEmployeeList");
-        // clearCacheKey("allInactiveEmployeeList");
-        // clearCacheKey("employeeProfile");
+  // ---- Employee update ----
+  if (keyword === "Employee") {
     clearCacheKey("Attendance");
-        clearCacheKey("regularizedList")
-        clearCacheKey("AttendanceLogs")
+    clearCacheKey("regularizedList");
+    clearCacheKey("AttendanceLogs");
 
-        // ---we can do also----
-        // queryClient.removeQueries(['allEmployee', true]);
-        //  but best practies is refetch
-          queryClient.invalidateQueries(['allEmployee', true]);  
-          queryClient.invalidateQueries(['allEmployee', false]); 
-          queryClient.invalidateQueries(['employeeProfile', data.response?.employeeId]);
-          queryClient.invalidateQueries(['employeeListByProject']); // optional if scope
-          eventBus.emit("employee", data);
+    queryClient.invalidateQueries(["allEmployee", true]);
+    queryClient.invalidateQueries(["allEmployee", false]);
+    queryClient.invalidateQueries(["employeeProfile", response?.employeeId]);
+    queryClient.invalidateQueries(["employeeListByProject"]);
+
+    emitters.employee();
   }
 
-      if (data.keyword == "Task_Report") {
-        if(data.numberOfImages > 0){
-        eventBus.emit("image_gallery", data);
+  // ---- Image related events ----
+  if (["Task_Report", "Task_Comment"].includes(keyword) && numberOfImages > 0) {
+    emitters.image_gallery();
   }
-      }
-      if (data.keyword == "Task_Comment") {
-        if(data.numberOfImages > 0){
-        eventBus.emit("image_gallery", data);
-        }
-      }
-    }
-  });
+});
 
   connection
     .start();