Multiple Click Handle, Task Manager Instance Handle, Loader, Remove Unnecessary Polling

merge

package.json

@@ -7,7 +7,8 @@
   "scripts": {
     "dev": "npm-run-all --parallel dev:react dev:electron",
     "dev:react": "vite",
-    "dev:electron": "npm run transpile:electron && cross-env NODE_ENV=development electron --inspect=5858 .",
+    "dev:electron": "npm run build && cross-env NODE_ENV=development electron .",
+    "prod:electron": "npm run build && cross-env NODE_ENV=production electron .",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "transpile:electron": "tsc --project src/electron/tsconfig.json",
@@ -20,6 +21,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.10.1",
     "@tailwindcss/vite": "^4.1.16",
+    "active-win": "^7.2.0",
     "axios": "^1.13.2",
     "chalk": "^5.6.2",
     "electron-store": "^11.0.2",
@@ -33,12 +35,14 @@
     "react-router-dom": "^7.9.5",
     "recharts": "^2.12.7",
     "sharp": "^0.34.4",
-    "tailwindcss": "^4.1.16"
+    "socket.io-client": "^4.8.1",
+    "tailwindcss": "^4.1.16",
+    "windowmanager": "^0.14.8"
   },
   "devDependencies": {
     "@playwright/test": "^1.47.2",
     "@types/luxon": "^3.7.1",
-    "@types/node": "^22.5.5",
+    "@types/node": "^22.19.0",
     "@types/os-utils": "^0.0.4",
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
@@ -47,6 +51,7 @@
     "daisyui": "^5.4.3",
     "electron": "^32.1.2",
     "electron-builder": "^25.0.5",
+    "electron-rebuild": "^3.2.9",
     "npm-run-all": "^4.1.5",
     "typescript": "^5.6.2",
     "vite": "^5.4.7",

src/assets/splash.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body {
+      margin: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #ffffff;
+      font-family: Arial, sans-serif;
+    }
+    .loader {
+      width: 50px;
+      height: 50px;
+      border: 5px solid #e0e0e0;
+      border-top-color: #6a5acd;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+  </style>
+</head>
+<body>
+  <div class="loader"></div>
+</body>
+</html>

src/electron/ipc/ipcHandler.ts

@@ -1,6 +1,6 @@
 import { ipcMain, BrowserWindow } from "electron";
 import { getToken, saveToken, clearToken } from "../utils/tokenHelper.js";
-import { getActiveApp, handleLogin, takeScreenshot, startWindowPolling } from "../utils/utilityFunctions.js";
+import { getActiveApp, handleLogin, takeScreenshot, startWindowPolling, getRunningAppsList, captureSpecificApp } from "../utils/utilityFunctions.js";
 import api from "../api/axiosClient.js";
 import { getMainWindow } from '../main.js';
 
@@ -83,7 +83,7 @@ export const registerIPCHandlers = (mainWindow: BrowserWindow) => {
 
 
 ipcMain.handle("get-project-list", async () => {
-  // console.log("📡 get-project-list called");
+  console.log("📡 get-project-list called");
   try {
     const res = await api.get("/list/projects");
 
@@ -226,6 +226,14 @@ ipcMain.handle("forgot-password", async (event, email: string) => {
     };
   }
 });
+ipcMain.handle('get-running-apps', async () => {
+  return await getRunningAppsList()
+});
+
+ipcMain.handle('capture-specific-window', async (event, appTitle: string) => {
+  console.log(appTitle, "IPC HANDLE")
+  return await captureSpecificApp(appTitle)
+});
 
 
 ipcMain.handle("get-profile", async () => {

src/electron/main.ts

@@ -1,98 +1,179 @@
-import { app, BrowserWindow, ipcMain, session } from 'electron';
-import { ipcMainHandle, ipcMainOn, isDev } from './util.js';
-import { getStaticData, pollResources } from './resourceManager.js';
-import { getPreloadPath, getUIPath } from './pathResolver.js';
+import { app, BrowserWindow, globalShortcut, session } from "electron";
+import { isDev } from "./util.js";
+// import { pollResources } from "./resourceManager.js";
+import { getPreloadPath, getUIPath } from "./pathResolver.js";
+import { registerIPCHandlers } from "./ipc/ipcHandler.js";
 
 import "./ipc/ipcHandler.js";
-import { registerIPCHandlers } from './ipc/ipcHandler.js';
+import path from "path";
+import { fileURLToPath } from "url";
 
-let mainWindow:any = null;
+app.setAppUserModelId("com.tracker.app");
 
-app.on('ready', async () => {
-  console.log("ready");
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-  mainWindow = new BrowserWindow({
-    width: 500,           // fixed width
-    height: 600,           // fixed height
+// ---------------------------
+// SINGLE INSTANCE LOCK
+// ---------------------------
+const gotTheLock = app.requestSingleInstanceLock();
 
-    resizable: false,      // prevents resizing
-    fullscreenable: false, // disables fullscreen toggle (F11 or double-click title bar)
-    minimizable: false,       // disables minimize button
-    maximizable: false,    // prevents maximize
+if (!gotTheLock) {
+  app.quit();
+  process.exit(0);
+}
+
+let mainWindow: BrowserWindow | null = null;
+let splashWindow: BrowserWindow | null = null;
+
+// ---------------------------
+// HANDLE DOUBLE OPEN ATTEMPT
+// ---------------------------
+app.on("second-instance", () => {
+  if (mainWindow) {
+    if (mainWindow.isMinimized()) mainWindow.restore();
+    mainWindow.show();
+    mainWindow.focus();
+  }
+});
+
+// ---------------------------
+// MAIN APP READY
+// ---------------------------
+app.on("ready", async () => {
+
+
+  splashWindow = new BrowserWindow({
+    width: 300,
+    height: 300,
+    frame: false,
+    transparent: false,
+    alwaysOnTop: false,   // splash does NOT need to be on top || Yooo Don't make it onTop
+    resizable: false,
+    show: true,
+    skipTaskbar: true,
+    webPreferences: {
+      devTools: false,
+    }
+  });
+
+
+  splashWindow.loadFile(
+    path.join(__dirname, "../assets/splash.html")
+  );
+
+  // Create the main window
+  const win = new BrowserWindow({
+    width: 500,
+    height: 600,
+    resizable: false,
+    fullscreenable: false,
+    minimizable: false,
+    maximizable: false,
     closable: true,
     alwaysOnTop: true,
+    skipTaskbar: true,
     autoHideMenuBar: true,
-   
-    frame: process.platform === 'darwin' ? false : true,
+    frame: process.platform === "darwin" ? false : true,
+    show: false, // speed improvement
     webPreferences: {
+      devTools: false,
       preload: getPreloadPath(),
+      contextIsolation: true,
+      nodeIntegration: false,
     },
   });
 
+  mainWindow = win;
+
+  // ------------------------------------
+  // ONLY LOG NETWORK REQUESTS IN DEV
+  // ------------------------------------
+  if (isDev() && process.env.LOG_REQUESTS === "true") {
     session.defaultSession.webRequest.onBeforeRequest((details, callback) => {
-    console.log('🌐 Request:', details.method, details.url);
+      console.log("🌐 Request:", details.method, details.url);
       callback({ cancel: false });
     });
-
-  if (isDev()) {
-    mainWindow.loadURL('http://localhost:5123');
-    mainWindow.webContents.openDevTools();
-  } else {
-    mainWindow.loadFile(getUIPath());
   }
 
-  // pollResources(mainWindow);
-  // 🔹 Register all IPC handlers (includes polling)
-  registerIPCHandlers(mainWindow);
+  // ------------------------------------
+  // LOAD FRONTEND
+  // ------------------------------------
+  if (isDev()) {
+    win.loadURL("http://localhost:5123");
+    // win.webContents.openDevTools(); // Optional (slows startup)
+  } else {
+    win.loadFile(getUIPath());
+  }
 
-  pollResources(mainWindow);
+  // ------------------------------------
+  // SHOW WINDOW WHEN READY (no white flash)
+  // ------------------------------------
+  win.once("ready-to-show", () => {
+    // Delay heavy work to improve startup speed
+    setTimeout(() => {
+      splashWindow?.close();
+      splashWindow = null;
 
-  // IPC handlers
-  // ipcMainHandle('getStaticData', () => getStaticData());
+      win.show();
+      // pollResources(win);
+      registerIPCHandlers(win);
+    }, 500);
+  });
 
-  // ipcMainOn('sendFrameAction', (payload) => {
-  //   switch (payload) {
-  //     case 'CLOSE':
-  //       mainWindow.close();
-  //       break;
-  //     case 'MAXIMIZE':
-  //       // prevent maximize
-  //       break;
-  //     case 'MINIMIZE':
-  //       mainWindow.minimize();
-  //       break;
-  //   }
-  // });
-
-  handleCloseEvents(mainWindow);
+  // ------------------------------------
+  // HANDLE CLOSE EVENTS
+  // ------------------------------------
+  handleCloseEvents(win);
 });
 
-function handleCloseEvents(mainWindow: BrowserWindow) {
+
+app.on('browser-window-focus', () => {
+  globalShortcut.register('CommandOrControl+R', () => {
+    // Do nothing; disables reload
+  });
+  globalShortcut.register('F5', () => {
+    // Do nothing; disables reload
+  });
+  globalShortcut.register('CommandOrControl+Shift+I', () => {
+    // Do nothing; disables DevTools
+  });
+});
+
+app.on('browser-window-blur', () => {
+  globalShortcut.unregisterAll();
+});
+
+
+// ---------------------------
+// CUSTOM CLOSE BEHAVIOR
+// ---------------------------
+function handleCloseEvents(window: BrowserWindow) {
   let willClose = false;
 
-  mainWindow.on('close', (e) => {
+  window.on("close", (e) => {
     if (willClose) return;
 
     e.preventDefault();
-    mainWindow.hide();
+    window.hide();
 
     if (app.dock) {
       app.dock.hide();
     }
   });
 
-  app.on('before-quit', () => {
+  app.on("before-quit", () => {
     willClose = true;
   });
 
-  mainWindow.on('show', () => {
+  window.on("show", () => {
     willClose = false;
   });
 }
 
-
-
+// ---------------------------
+// GET MAIN WINDOW EXPORT
+// ---------------------------
 export function getMainWindow() {
   return mainWindow;
 }
-

src/electron/pathResolver.ts

@@ -11,7 +11,10 @@ export function getPreloadPath() {
 }
 
 export function getUIPath() {
-  return path.join(app.getAppPath(), '/dist-react/index.html');
+  return path.join(app.getAppPath(), "dist-react", "index.html");
+
+  // return "C:\\Users\\user\\OneDrive\\Desktop\\electron-main\\dist-react\\index.html";
+  // return path.join(app.getAppPath(), '/dist-react/index.html');
 }
 
 export function getAssetPath() {

src/electron/preload.cts

@@ -12,6 +12,8 @@ contextBridge.exposeInMainWorld('electron', {
   toggleCloseBtn: (shouldEnable: boolean) => ipcRenderer.invoke('toggle-close-btn', shouldEnable),
   resizeWindow: (width: number, height: number) => ipcRenderer.invoke('resize-window', width, height),
   getProjectList: () => ipcRenderer.invoke("get-project-list"),
+  getRunningApps: () => ipcRenderer.invoke('get-running-apps'),
+  captureAppScreenShot: (appTitle: string) : Promise<string> => ipcRenderer.invoke('capture-specific-window', appTitle),
   onWindowUpdate: (callback) =>
     ipcRenderer.on("window:updated", (_, data) => callback(data)),
 

src/electron/utils/utilityFunctions.ts

@@ -1,10 +1,12 @@
-import { BrowserWindow, desktopCapturer } from "electron";
+import { app, BrowserWindow, desktopCapturer } from "electron";
 import * as fs from "fs";
 import path from "path";
 import axios from 'axios';
 import sharp from 'sharp';
 import { saveToken } from "./tokenHelper.js";
 import { activeWindow } from "get-windows";
+import { exec } from "child_process";
+import { getUIPath } from "../pathResolver.js";
 
 // Blur using an offscreen canvas
 async function blurAndCompressBase64Image(base64: string): Promise<Buffer> {
@@ -53,6 +55,12 @@ export const handleLogin = async (credentials: { email: string, password: string
         // Call your login API
         console.log("🟡 login Request received", credentials);
 
+        console.log("Doom");
+        console.log("app.getAppPath()", app.getAppPath());
+        console.log("UIPATH", getUIPath());
+        console.log("Doom 1");
+
+
         try {
             console.log("➡️ Calling API...");
             const response = await axios.post(
@@ -99,7 +107,7 @@ export const handleLogin = async (credentials: { email: string, password: string
 export const getActiveApp = async () => {
     const result = await activeWindow();
     const dataWithTime = { ...result, timestamp: new Date().toISOString() };
-//   console.log("🪟 Active Window with Time:", dataWithTime);
+    //   console.log("🪟 Active Window with Time:", dataWithTime);
     return dataWithTime;
 };
 
@@ -117,3 +125,61 @@ export const startWindowPolling = (win: BrowserWindow) => {
 };
 
 
+export const getRunningAppsList = async () => {
+    try {
+        // PowerShell command: Get only apps with visible windows (non-background)
+        const sources = await desktopCapturer.getSources({
+            types: ['window', 'screen'],
+            thumbnailSize: { width: 150, height: 150 } // Optional: set thumbnail size
+        });
+
+        const app = sources.map(source => ({
+            name: source.name,
+            pid: source.id,
+            // thumbnail: source.thumbnail // Can be used as screenshot
+        }));
+        return app
+    } catch (error) {
+        return []
+    }
+}
+
+
+export const captureSpecificApp = async (windowTitle: string): Promise<string> => {
+    try {
+        const sources = await desktopCapturer.getSources({
+            types: ['window', 'screen'],
+            thumbnailSize: { width: 650, height: 430 }
+        });
+        const targetSource = sources.find(source => source.name === windowTitle);
+        if (targetSource) {
+
+            let image = targetSource.thumbnail.toDataURL();
+            const blurredBuffer = await blurAndCompressBase64Image(image);
+
+            // Convert buffer → base64 string
+            const base64String = `data:image/png;base64,${blurredBuffer.toString('base64')}`;
+
+            // ✅ Return the processed base64 instead of saving
+            return base64String;
+
+            // const folderPath = "C:\\Users\\Public\\vatracker\\screenshots";
+
+            // // Ensure directory exists
+            // if (!fs.existsSync(folderPath)) {
+            //     fs.mkdirSync(folderPath, { recursive: true });
+            // }
+
+            // const filePath = path.join(folderPath, `screenshot-${Date.now()}.png`);
+            // fs.writeFileSync(filePath, blurredBuffer);
+
+            // console.log(`Screenshot saved to ${filePath}`);
+        } else {
+            console.log(`Window with title "${windowTitle}" not found.`);
+            return "Not Found"
+        }
+    } catch (error) {
+        console.error('Error capturing screenshot:', error);
+        return 'Failed to capture screenshot.';
+    }
+}

src/ui/App.tsx

@@ -1,5 +1,84 @@
+// import React, { useEffect } from "react";
+// import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
+// import { useDispatch, useSelector } from "react-redux";
+// import { AppDispatch, RootState } from "./store";
+// import { loadUserFromStorage } from "./store/userSlice";
+
+// import Login from "./pages/Login";
+// import Dashboard from "./pages/Dashboard";
+// import Projects from "./pages/Projects/Projects";
+// import DashboardLayout from "./layout/DashboardLayout";
+// import ProtectedRoute from "./routes/ProtectedRoute";
+// import PublicRoute from "./routes/PublicRoute";
+// import { ThemeToggle } from "./helper/ThemeToggle";
+// import LeaveAndAdjustments from "./pages/LeaveAndAdjustments/LeaveAndAdjustments";
+// import Timesheets from "./pages/Timesheets/Timesheets";
+// import Settings from "./pages/Settings/Settings";
+// import HelpSupport from "./pages/HelpSupport/HelpSupport";
+
+// const App: React.FC = () => {
+//   const theme = ThemeToggle();
+//   const dispatch = useDispatch<AppDispatch>();
+
+//   // ✅ Get user directly from Redux
+//   const user = useSelector((state: RootState) => state.user.user);
+
+//   useEffect(() => {
+//     document.documentElement.setAttribute("data-theme", theme);
+//   }, [theme]);
+
+//   // ✅ Load user from localStorage into Redux when app starts
+//   useEffect(() => {
+//     dispatch(loadUserFromStorage());
+//   }, [dispatch]);
+
+//   console.log("App.tsx → user:", user);
+
+//   return (
+//     <BrowserRouter>
+//       <Routes>
+//         {/* Public Route */}
+//         <Route
+//           path="/login"
+//           element={
+//             <PublicRoute user={user}>
+//               <Login />
+//             </PublicRoute>
+//           }
+//         />
+
+//         {/* Protected Routes */}
+//         <Route
+//           path="/dashboard"
+//           element={
+//             <ProtectedRoute user={user}>
+//               <DashboardLayout />
+//             </ProtectedRoute>
+//           }
+//         >
+//           <Route index element={<Dashboard />} />
+//           <Route path="projects" element={<Projects />} />
+//           <Route path="leave-adjustments" element={<LeaveAndAdjustments />} />
+//           <Route path="timesheet" element={<Timesheets />} />
+//           <Route path="settings" element={<Settings />} />
+//           <Route path="help-support" element={<HelpSupport />} />
+//         </Route>
+
+//         {/* Default Redirect */}
+//         <Route
+//           path="*"
+//           element={<Navigate to={user ? "/dashboard" : "/login"} replace />}
+//         />
+//       </Routes>
+//     </BrowserRouter>
+//   );
+// };
+
+// export default App;
+
+
 import React, { useEffect } from "react";
-import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
+import { HashRouter as Router, Route, Routes, Navigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch, RootState } from "./store";
 import { loadUserFromStorage } from "./store/userSlice";
@@ -20,8 +99,6 @@ const App: React.FC = () => {
   const theme = ThemeToggle();
   const dispatch = useDispatch<AppDispatch>();
 
-  
-
   // ✅ Get user directly from Redux
   const user = useSelector((state: RootState) => state.user.user);
 
@@ -29,7 +106,6 @@ const App: React.FC = () => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
 
-  // ✅ Load user from localStorage into Redux when app starts
   useEffect(() => {
     dispatch(loadUserFromStorage());
   }, [dispatch]);
@@ -37,7 +113,7 @@ const App: React.FC = () => {
   console.log("App.tsx → user:", user); 
 
   return (
-    <BrowserRouter>
+    <Router>
       <Routes>
         {/* Public Route */}
         <Route
@@ -72,7 +148,7 @@ const App: React.FC = () => {
           element={<Navigate to={user ? "/dashboard" : "/login"} replace />}
         />
       </Routes>
-    </BrowserRouter>
+    </Router>
   );
 };
 

src/ui/layout/DashboardLayout.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
+import io, { Socket } from 'socket.io-client';
+
 import {
   Outlet,
   NavLink,
@@ -124,6 +126,11 @@ const DashboardLayout = () => {
     selectedProject?.projectName ?? null
   );
 
+  const socketRef = useRef<Socket | null>(null);
+  const intervalRef = useRef<number | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  // const [seclectedScreen, setSelectedScreen] = useState<string | null>(null)
+
   const [projectsData, setProjectsData] = useState<Project[]>([]);
 
   useEffect(() => {
@@ -559,6 +566,21 @@ const DashboardLayout = () => {
       {isTracking &&
         <header className="w-full  flex justify-between items-center h-12 px-6 bg-base-100 border-b border-base-300 sticky top-0 z-30">
           {/* Left Section */}
+          {/* {!isConnected ? (
+          <button
+            onClick={handleConnect}
+            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded"
+          >
+            Connect
+          </button>
+        ) : (
+          <button
+            onClick={handleDisconnect}
+            className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded"
+          >
+            Disconnect
+          </button>
+        )} */}
         <div className="flex items-center space-x-3">
             {selectedProject ? (
               isTracking ? (
@@ -633,9 +655,9 @@ const DashboardLayout = () => {
       {/* Layout Body */}
       <div className={`flex ${!isTracking ? "max-h-screen min-h-screen" : " h-[calc(100vh-3rem)]"} bg-base-200 overflow-hidden`}>
         {/* Sidebar */}
-        <aside className="w-20 bg-base-100 border-r border-base-300 flex-shrink-0 flex flex-col items-center py-4 space-y-4">
-          {menuItems.map((item, index) => (
-            <div className="tooltip z-100 tooltip-right" data-tip={item.label} key={index}>
+        <aside className="w-20 bg-base-100 border-r border-base-300 flex flex-col items-center py-4 space-y-4">
+          {menuItems.map((item , index) => (
+            <div className="tooltip z-100 tooltip-right" key={item.label} data-tip={item.label}>
               <NavLink
                 key={item.label}
                 to={item.path}

src/ui/pages/Dashboard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Clock, TrendingUp, Play, Square, ProjectorIcon, Pause } from "lucide-react";
 import { useOutletContext } from "react-router-dom";
 import NoData from "./NoData";
@@ -92,6 +92,14 @@ const Dashboard: React.FC = () => {
     projectsData,
   } = useOutletContext<TrackingState>();
 
+  // interface AppsListInt {
+  //   name: string;
+  //   pid: string;
+  //   title: string;
+  // }
+
+  // const [runningApps, setRunningApps] = useState<AppsListInt[]>([]);
+
   const selectedData = selectedProject
     ? projectTrackingMap.get(selectedProject.projectId)
     : null;

types.d.ts

@@ -99,6 +99,8 @@ interface Window {
     getActiveAppDetails: () => {};
     toggleCloseBtn: (shouldEnable: boolean) => {},
     resizeWindow: (width: number, height: number) => {},
+    getRunningApps: () => {},
+    captureAppScreenShot: (appTitle: string) => Promise<string>,
     onWindowUpdate: (callback: (data: any) => void) => void;
     getProjectList: () => Promise<ProjectListResponse>;
     startProjectTracking: (data: {