Merge branch 'master' of http://git.hicglobalsolutions.in/BhawanSingh/va-tracker - mac - 8-Dec - 3-38

build-all.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+# Windows
+GOOS=windows GOARCH=amd64 go build -o ./bin/win/wireguard-go.exe ./wireguard-go
+
+# Linux
+GOOS=linux GOARCH=amd64 go build -o ./bin/linux/wireguard-go ./wireguard-go
+
+# macOS Intel
+GOOS=darwin GOARCH=amd64 go build -o ./bin/mac/wireguard-go ./wireguard-go
+
+# macOS ARM
+GOOS=darwin GOARCH=arm64 go build -o ./bin/mac/wireguard-go-arm ./wireguard-go

package.json

@@ -70,6 +70,14 @@
       {
         "from": "src/assets",
         "to": "assets"
+      },
+      {
+        "from": "resources/wireguard-install",
+        "to": "wireguard-install"
+      },
+      {
+        "from": "resources/wireguard",
+        "to": "wireguard"
       }
     ],
     "mac": {
@@ -86,6 +94,7 @@
       }
     },
     "win": {
+      "requestedExecutionLevel": "requireAdministrator",
       "target": [
         {
           "target": "nsis",
@@ -129,4 +138,4 @@
     "vite": "^7.2.6",
     "vitest": "^4.0.15"
   }
-}
+}

resources/wireguard/mac/wg0.conf

@@ -0,0 +1,10 @@
+[Interface]
+PrivateKey = CEzCd25ufxbOjvRhMqLfkcdP/OziG5i6OkXCfMZrI1I=
+Address = 10.0.0.2/24
+DNS = 1.1.1.1
+
+[Peer]
+PublicKey = jG+7H5thEiNjxY1XqI1R9oyMAMTIegLwE3tZkS1Rj2U=
+Endpoint = 35.95.209.161:51820
+AllowedIPs = 10.0.0.0/24
+PersistentKeepalive = 25

resources/wireguard/windows/wg0.conf

@@ -0,0 +1,10 @@
+[Interface]
+PrivateKey = CEzCd25ufxbOjvRhMqLfkcdP/OziG5i6OkXCfMZrI1I=
+Address = 10.0.0.2/24
+DNS = 1.1.1.1
+
+[Peer]
+PublicKey = jG+7H5thEiNjxY1XqI1R9oyMAMTIegLwE3tZkS1Rj2U=
+Endpoint = 35.95.209.161:51820
+AllowedIPs = 10.0.0.0/24
+PersistentKeepalive = 25

src/electron/api/axiosClient.ts

@@ -12,7 +12,7 @@ const httpsAgent = new https.Agent({
 });
 
 const api: AxiosInstance = axios.create({
-    baseURL: 'https://daniela-nonprofessed-boastfully.ngrok-free.app/api/v1/va', // 🔁 your backend
+    baseURL: 'https://quality-friendly-goldfish.ngrok-free.app/api/v1/va', // 🔁 your backend
     httpsAgent
     // timeout: 10000,
 });

src/electron/ipc/ipcHandler.ts

@@ -3,6 +3,7 @@ import { getToken, saveToken, clearToken } from "../utils/tokenHelper.js";
 import { getActiveApp, handleLogin, takeScreenshot, startWindowPolling, getRunningAppsList, captureSpecificApp } from "../utils/utilityFunctions.js";
 import api from "../api/axiosClient.js";
 import { getMainWindow } from '../main.js';
+import { startVPN, stopVPN } from "../vpn.js";
 
 
 
@@ -407,7 +408,7 @@ ipcMain.handle("get-payslips", async (event, vaId: string) => {
   console.log("get-payslips", vaId)
   try {
     const response = await api.get(`/paySlip/${vaId}`);
-    console.log(response.data , "Line 409")
+    console.log(response.data, "Line 409")
     return {
       success: true,
       data: response.data || [],
@@ -493,6 +494,47 @@ ipcMain.handle("get-adjustments-list", async (event, vaId: string) => {
 });
 
 
+ipcMain.handle("update-payment", async (event, data: Record<string, any>) => {
+  console.log("data-update-payment", data);
+
+  // Build userDetails object
+  const userDetails: Record<string, any> = {
+    paymentMethod: data.paymentMethod,
+  };
+
+  // Add payment-specific fields
+  if (data.paymentMethod === "wise" && data.wiseEmail) {
+    userDetails.wiseEmail = data.wiseEmail;
+    // Clear veemAccount when switching to wise
+    userDetails.veemAccount = "";
+  } else if (data.paymentMethod === "veem" && data.veemAccount) {
+    userDetails.veemAccount = data.veemAccount;
+    // Clear wiseEmail when switching to veem
+    userDetails.wiseEmail = "";
+  }
+
+  // Build final payload
+  const payload = {
+    userDetails: userDetails,
+  };
+
+  console.log("Update Payment payload", payload);
+
+  try {
+    const response = await api.patch("/profile", payload);
+    console.log("Update-payment-response", response);
+    return { success: true, data: response?.data?.userDetails };
+  } catch (error: any) {
+    console.error("❌ Update payment error:", error.message);
+    return {
+      success: false,
+      message: error.response?.data?.message || "Payment update failed",
+    };
+  }
+});
+
+
+
 
 export const sendTokenExpired = () => {
   console.log("⚠️ Sending token-expired event to renderer");
@@ -505,4 +547,10 @@ export const sendTokenExpired = () => {
 };
 
 
-;
+ipcMain.handle("vpn-connect", async () => {
+  return startVPN();
+});
+
+ipcMain.handle("vpn-disconnect", async () => {
+  stopVPN();
+});

src/electron/main.ts

@@ -8,6 +8,9 @@ import "./ipc/ipcHandler.js";
 import path from "path";
 import { fileURLToPath } from "url";
 
+import * as fs from "fs";
+import { execFile } from "child_process";
+
 app.setAppUserModelId("com.tracker.app");
 
 const __filename = fileURLToPath(import.meta.url);
@@ -52,12 +55,26 @@ app.on("second-instance", () => {
   }
 });
 
+
+// CHECKING IF WIREGUARD EXIST - IF NOT INSTALLING IN CLIENT MACHINE
+const wgPath = "C:\\Program Files\\WireGuard\\wireguard.exe";
+
+if (!fs.existsSync(wgPath)) {
+  const installer = path.join(process.resourcesPath, "wireguard-install", "wireguard-installer.exe");
+
+  execFile(installer, ["/quiet"], (err) => {
+    if (err) console.error("WireGuard install failed:", err);
+    else console.log("WireGuard installed successfully.");
+  });
+}
+// CHECKING IF WIREGUARD EXIST - IF NOT INSTALLING IN CLIENT MACHINE
+
+
 // ---------------------------
 // MAIN APP READY
 // ---------------------------
 app.on("ready", async () => {
 
-
   splashWindow = new BrowserWindow({
     width: 300,
     height: 300,
@@ -90,8 +107,8 @@ app.on("ready", async () => {
     // alwaysOnTop: true,
     // skipTaskbar: true,
     autoHideMenuBar: true,
-    frame: true,    
+    frame: true,
-    show: false, 
+    show: false,
     icon: resolveIcon(),
     webPreferences: {
       devTools: true,
@@ -102,14 +119,14 @@ app.on("ready", async () => {
   });
 
 
-  
+
-    // win.setAlwaysOnTop(true, 'screen-saver');
+  // win.setAlwaysOnTop(true, 'screen-saver');
-    // win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+  // win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
-    // win.setFullScreenable(false);  
+  // win.setFullScreenable(false);  
-  
+
   // Cross-platform safe always-on-top
   const isMac = process.platform === "darwin";
-  
+
   if (isMac) {
     win.setAlwaysOnTop(true, "floating"); // best for macOS
     win.setVisibleOnAllWorkspaces(true);  // NO fullscreen override
@@ -117,7 +134,7 @@ app.on("ready", async () => {
     win.setAlwaysOnTop(true, "normal");   // safest for Windows + Zoom
     win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
     win.setFullScreenable(false);
-}
+  }
 
 
   mainWindow = win;

src/electron/preload.cts

@@ -34,6 +34,12 @@ contextBridge.exposeInMainWorld('electron', {
   changePassword: (data: { oldPassword: string; password: string; cPassword: string }) =>
     ipcRenderer.invoke("change-password", data),
 
+  updatePayment: (data: {
+    paymentMethod: string;
+    wiseEmail?: string;
+    veemAccount?: string;
+  }) => ipcRenderer.invoke('update-payment', data),
+
   onTokenExpired: (callback) => {
     // Remove old listeners
     ipcRenderer.removeAllListeners("token-expired");
@@ -59,6 +65,9 @@ contextBridge.exposeInMainWorld('electron', {
   getLeaveList: () => ipcRenderer.invoke("get-leave-list"),
   getAdjustmentsList:(vaId: string) => ipcRenderer.invoke("get-adjustments-list",vaId),
 
+  connectVPN: () => ipcRenderer.invoke("vpn-connect"),
+  disconnectVPN: () => ipcRenderer.invoke("vpn-disconnect"),
+
 } satisfies Window['electron']);
 
 // function ipcInvoke<Key extends keyof EventPayloadMapping>(

src/electron/vpn.ts

@@ -0,0 +1,223 @@
+import { app } from "electron";
+import { exec, execFile } from "child_process";
+import fs from "fs";
+import os from "os";
+import path from "path";
+
+//
+// ------------------ HELPERS ------------------
+//
+
+// Promise wrapper for exec()
+function execPromise(cmd: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    exec(cmd, (err, stdout, stderr) => {
+      if (err) return reject(stderr || err);
+      resolve(stdout);
+    });
+  });
+}
+
+// Detect dev vs production
+function isDev() {
+  return !app.isPackaged;
+}
+
+//
+// ------------------ PATH RESOLVERS ------------------
+//
+
+// WireGuard installer path (Windows only)
+// function getWireGuardInstallerPath(): string {
+//   return isDev()
+//     ? path.join(process.cwd(), "resources", "wireguard-install", "wireguard-installer.exe")
+//     : path.join(process.resourcesPath, "wireguard-install", "wireguard-installer.exe");
+// }
+
+function getWireGuardInstallerPath(): string {
+  const devPath = path.join(process.cwd(), "resources", "wireguard-install", "wireguard-installer.exe");
+
+  // When running "npm run dev", use devPath ALWAYS
+  if (!app.isPackaged) {
+    console.log("DEV MODE Installer Path:", devPath);
+    return devPath;
+  }
+
+  // Production build path
+  const prodPath = path.join(process.resourcesPath, "wireguard-install", "wireguard-installer.exe");
+  console.log("PROD MODE Installer Path:", prodPath);
+  return prodPath;
+}
+
+
+// OS-specific wg0.conf
+function getConfigPath(): string {
+  const base = isDev()
+    ? path.join(process.cwd(), "resources", "wireguard")
+    : path.join(process.resourcesPath, "wireguard");
+
+  if (process.platform === "win32") {
+    return path.join(base, "windows", "wg0.conf");
+  }
+
+  if (process.platform === "darwin") {
+    return path.join(base, "macos", "wg0.conf");
+  }
+
+  throw new Error("Unsupported OS");
+}
+
+// Detect installed WireGuard.exe on Windows
+function findWireGuardCLI(): string | null {
+  const possiblePaths = [
+    "C:\\Program Files\\WireGuard\\wireguard.exe",
+    "C:\\Program Files (x86)\\WireGuard\\wireguard.exe"
+  ];
+
+  for (const p of possiblePaths) {
+    if (fs.existsSync(p)) return p;
+  }
+
+  return null;
+}
+
+//
+// ------------------ WINDOWS INSTALL LOGIC ------------------
+//
+
+// Install WireGuard silently
+async function ensureWireGuardInstalled(): Promise<string> {
+  let cli = findWireGuardCLI();
+  if (cli) return cli;
+
+  // Installer path
+  const installer = getWireGuardInstallerPath();
+  if (!fs.existsSync(installer)) {
+    throw new Error("WireGuard installer not found in resources.");
+  }
+
+  console.log("WireGuard not found. Installing silently...");
+  await execPromise(`"${installer}" /quiet`);
+
+  cli = findWireGuardCLI();
+  if (!cli) throw new Error("WireGuard installation failed.");
+
+  console.log("WireGuard installed successfully:", cli);
+  return cli;
+}
+
+//
+// ------------------ WINDOWS CONNECT/DISCONNECT ------------------
+//
+
+// async function connectWindows(): Promise<string> {
+//   const cli = await ensureWireGuardInstalled();
+//   const conf = getConfigPath();
+
+//   // Disable GUI auto popup
+//   await execPromise(
+//     `reg add "HKCU\\Software\\WireGuard" /v SuppressTray /t REG_DWORD /d 1 /f`
+//   );
+
+//   return new Promise((resolve, reject) => {
+//     execFile(cli, ["/installtunnelservice", conf], (err) => {
+//       if (err) return reject("Failed to connect VPN: " + err);
+//       resolve("Windows VPN connected without GUI");
+//     });
+//   });
+// }
+
+// let wgRuntimeProcess: any = null;
+
+// async function connectWindows(): Promise<string> {
+//   const cli = await ensureWireGuardInstalled();
+//   const conf = getConfigPath();
+
+//   return new Promise((resolve, reject) => {
+//     wgRuntimeProcess = execFile(cli, ["/tunnelservice", conf], (err) => {
+//       if (err) return reject("VPN connection error: " + err);
+//     });
+
+//     // Wait a bit for interface to come up
+//     setTimeout(() => resolve("Windows VPN connected silently"), 800);
+//   });
+// }
+
+
+async function connectWindows(): Promise<string> {
+  const cli = await ensureWireGuardInstalled();
+  const conf = getConfigPath();
+
+  // Disable GUI popup and silent mode (ignore errors)
+  await execPromise(`reg add "HKCU\\Software\\WireGuard" /v HideTrayIcon /t REG_DWORD /d 1 /f`).catch(() => {});
+  await execPromise(`reg add "HKCU\\Software\\WireGuard" /v SuppressTray /t REG_DWORD /d 1 /f`).catch(() => {});
+  await execPromise(`reg delete "HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Run" /v WireGuard /f`).catch(() => {});
+
+  // Start background service
+  await execPromise(`sc start WireGuardManager`).catch(() => {});
+
+  return new Promise((resolve, reject) => {
+    execFile(cli, ["/installtunnelservice", conf], (err) => {
+      if (err) return reject("VPN connection failed: " + err);
+      resolve("Windows VPN connected silently");
+    });
+  });
+}
+
+// function disconnectWindows(): Promise<string> {
+//   const cli = findWireGuardCLI();
+//   if (!cli) return Promise.reject("WireGuard CLI not found");
+
+//   return execPromise(`"${cli}" /uninstalltunnelservice wg0`);
+// }
+
+async function disconnectWindows(): Promise<string> {
+  const cli = findWireGuardCLI();
+  if (!cli) throw new Error("WireGuard CLI not found");
+
+  // 1. Remove the installed tunnel service
+  await execPromise(`"${cli}" /uninstalltunnelservice wg0`);
+
+  // 2. Ensure background service is still running (optional clean-up)
+  // Windows sometimes marks the service as "stopped" after uninstall
+  await execPromise(`sc stop WireGuardTunnel$wg0`).catch(() => { });
+  await execPromise(`sc stop WireGuardManager`).catch(() => { });
+
+  return "Windows VPN disconnected";
+}
+
+
+//
+// ------------------ MACOS CONNECT/DISCONNECT ------------------
+//
+
+function connectMac(): Promise<string> {
+  const conf = getConfigPath();
+  return execPromise(`sudo wg-quick up "${conf}"`).then(() => "macOS VPN connected");
+}
+
+function disconnectMac(): Promise<string> {
+  return execPromise(`sudo wg-quick down wg0`).then(() => "macOS VPN disconnected");
+}
+
+//
+// ------------------ PUBLIC API ------------------
+//
+
+export function startVPN(): Promise<string> {
+  const platform = os.platform();
+
+  if (platform === "win32") return connectWindows();
+  if (platform === "darwin") return connectMac();
+
+  return Promise.reject("Unsupported OS");
+}
+
+export function stopVPN(): Promise<string> {
+  const platform = os.platform();
+
+  if (platform === "win32") return disconnectWindows();
+  if (platform === "darwin") return disconnectMac();
+
+  return Promise.reject("Unsupported OS");
+}

src/ui/helper/ToastContext.tsx

@@ -0,0 +1,99 @@
+// contexts/ToastContext.tsx
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface Toast {
+  id: number;
+  message: string;
+  type: 'success' | 'error' | 'info' | 'warning';
+}
+
+interface ToastContextType {
+  showToast: (message: string, type?: Toast['type']) => void;
+  hideToast: (id: number) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = (message: string, type: Toast['type'] = 'success') => {
+    const id = Date.now();
+    setToasts(prev => [...prev, { id, message, type }]);
+    
+    // Auto remove after 5 seconds
+    setTimeout(() => {
+      hideToast(id);
+    }, 3000);
+  };
+
+  const hideToast = (id: number) => {
+    setToasts(prev => prev.filter(toast => toast.id !== id));
+  };
+
+  return (
+    <ToastContext.Provider value={{ showToast, hideToast }}>
+      {children}
+      <ToastContainer toasts={toasts} hideToast={hideToast} />
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
+
+const ToastContainer: React.FC<{
+  toasts: Toast[];
+  hideToast: (id: number) => void;
+}> = ({ toasts, hideToast }) => {
+  const getTypeStyles = (type: Toast['type']) => {
+    switch (type) {
+      case 'success':
+        return 'bg-success text-success-content';
+      case 'error':
+        return 'bg-error text-error-content';
+      case 'warning':
+        return 'bg-warning text-warning-content';
+      case 'info':
+        return 'bg-info text-info-content';
+      default:
+        return 'bg-neutral text-neutral-content';
+    }
+  };
+
+  return (
+  <div className="toast toast-center toast-top z-2000">
+    {toasts.map((toast) => (
+      <div
+        key={toast.id}
+        className="w-full max-w-md px-2 mb-2"
+      >
+        <div
+          className={`alert ${getTypeStyles(toast.type)} shadow-lg flex items-start`}
+          onClick={() => hideToast(toast.id)}
+        >
+          <div className="flex-grow min-w-0">
+            <p className="text-sm break-words whitespace-pre-wrap">
+              {toast.message}
+            </p>
+          </div>
+          <button
+            className="btn btn-ghost btn-xs flex-shrink-0 ml-2"
+            onClick={(e) => {
+              e.stopPropagation();
+              hideToast(toast.id);
+            }}
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+};

src/ui/layout/DashboardLayout.tsx

@@ -260,11 +260,11 @@ const DashboardLayout = () => {
     );
 
     // STEP 6: Update UI (restore window)
-      console.log("🪟 STEP 6: Restoring window...");
+    console.log("🪟 STEP 6: Restoring window...");
-      await window.electron.toggleCloseBtn(true);
+    await window.electron.toggleCloseBtn(true);
-      await window.electron.resizeWindow(500, 600);
+    await window.electron.resizeWindow(500, 600);
-      toggleWindowSize.current = true;
+    toggleWindowSize.current = true;
-      console.log("✅ Window restored");
+    console.log("✅ Window restored");
 
     // Allow React to process the state update
     await new Promise(resolve => setTimeout(resolve, 50));
@@ -331,7 +331,7 @@ const DashboardLayout = () => {
         }
       }
 
-      
+
 
     } catch (error) {
       console.error("❌ Error refreshing project list:", error);
@@ -727,6 +727,24 @@ const DashboardLayout = () => {
   return (
     <>
       <div className="flex flex-col h-screen overflow-hidden">
+        <button
+          onClick={() => {
+            window.electron.connectVPN().then((msg) => {
+              console.log(msg);
+            });
+          }}
+        >
+          Connect VPN
+        </button>
+
+        <button
+          onClick={() => {
+            window.electron.disconnectVPN();
+          }}
+        >
+          Disconnect VPN
+        </button>
+
         {/* Header */}
         {isTracking &&
           <header className="w-full flex justify-between items-center px-4 py-2 bg-base-100 border-b border-base-300 sticky top-0 z-30">

src/ui/main.tsx

@@ -4,9 +4,12 @@ import App from './App'
 import './index.css'
 import { Provider } from "react-redux";
 import { store } from "./store";
+import { ToastProvider } from './helper/ToastContext';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <Provider store={store}>
-    <App />
+    <ToastProvider>
+      <App />
+    </ToastProvider>
   </Provider>
 )

src/ui/pages/Dashboard.tsx

@@ -133,7 +133,7 @@ const Dashboard: React.FC = () => {
     try {
       console.log("📡 Fetching projects...Dashboard");
       const res = await window.electron.getProjectList();
-      console.log(" Project list response in dashboard:", res);
+      console.log(" Project list response in dashboard: ", res.data?.[0]);
 
       if (res?.success && Array.isArray(res.data)) {
         // Store data redux store 
@@ -152,9 +152,11 @@ const Dashboard: React.FC = () => {
         );
 
         // Auto-select first project
-        if (res.data.length > 0 && !selectedProject) {
+        if (res.data.length > 0) {
           const firstProject = res.data[0];
 
+
+          console.log("Line 158" , firstProject)
           // Select the project
           dispatch(setSelectedProjectSlice(firstProject));
 

src/ui/pages/LeaveAndAdjustments/tabs/AdjustmentTab.tsx

@@ -5,6 +5,7 @@ import { quillModules } from '../../../utils/quillConfig';
 import Quill from 'quill';
 import 'quill/dist/quill.snow.css';
 import { useNavigate } from 'react-router-dom';
+import { useToast } from '../../../helper/ToastContext';
 
 interface Project {
   projectId: string;
@@ -50,6 +51,7 @@ const AdjustmentTab: React.FC<AdjustmentTabProps> = ({ projects }) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const quillRef = useRef<any>(null);
   const navigate = useNavigate()
+   const { showToast } = useToast();
 
   // Field validation functions
   const validateProjectId = (projectId: string): string | undefined => {
@@ -460,9 +462,14 @@ const AdjustmentTab: React.FC<AdjustmentTabProps> = ({ projects }) => {
 
       if (res?.success) {
         console.log("Timesheet Created Successfully");
-        alert(res.message);
         resetForm();
-        navigate('/dashboard/leave-adjustments')
+        // Show success toast instead of alert
+            showToast("PTO Request submitted successfully!", "success");
+
+            // Navigate after a small delay
+            setTimeout(() => {
+                navigate('/dashboard/leave-adjustments');
+            }, 300);
       } else {
         setFormErrors(prev => ({
           ...prev,
@@ -475,6 +482,7 @@ const AdjustmentTab: React.FC<AdjustmentTabProps> = ({ projects }) => {
         ...prev,
         general: err.message || "Something went wrong while saving timesheet"
       }));
+      showToast(err.message || "Something went wrong while saving timesheet", "error");
     } finally {
       setIsSubmitting(false);
     }

src/ui/pages/LeaveAndAdjustments/tabs/PtoLeaveTab.tsx

@@ -5,6 +5,7 @@ import ReactQuill from "react-quill-new";
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
 import { useNavigate } from "react-router-dom";
+import { useToast } from "../../../helper/ToastContext";
 
 interface LeaveFormData {
     fromDate: string;
@@ -26,6 +27,9 @@ const PtoLeaveTab: React.FC<{
     const quillRef = useRef<any>(null);
     const navigate = useNavigate()
 
+    const { showToast } = useToast();
+
+    console.log("ptoLeave", ptoLeave)
     const [errors, setErrors] = useState<Partial<LeaveFormData>>({});
 
     useEffect(() => {
@@ -200,20 +204,26 @@ const PtoLeaveTab: React.FC<{
 
         if (result.success) {
             resetForm();
-            alert("PTO Request submitted!");
+            // Show success toast instead of alert
-            navigate('/dashboard/leave-adjustments')
+            showToast("PTO Request submitted successfully!", "success");
+
+            // Navigate after a small delay
+            setTimeout(() => {
+                navigate('/dashboard/leave-adjustments');
+            }, 300);
         } else {
             setServerError(result.message || "Something went wrong");
+            showToast(result.message || "Failed to submit PTO request", "error");
         }
+
     };
 
     return (
         <>
-            
+
             <div className="max-w-4xl space-y-3 ">
                 <div className="grid grid-cols-2 gap-4">
 
-
                     {/* From Date */}
                     <div className="form-control">
                         <label className="label">
@@ -262,12 +272,12 @@ const PtoLeaveTab: React.FC<{
                             className="h-60"
                         />
                     </div>
-                        {errors.comment && <p className="text-error text-xs">{errors.comment}</p>}
+                    {errors.comment && <p className="text-error text-xs">{errors.comment}</p>}
                 </div>
 
                 {serverError && (
-                <p className="text-red-500 font-medium text-center text-xs">{serverError}</p>
+                    <p className="text-red-500 font-medium text-center text-xs">{serverError}</p>
-            )}
+                )}
 
                 <button
                     onClick={handleSubmit}

src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx

@@ -4,6 +4,7 @@ import ReactQuill from "react-quill-new";
 import Quill from "quill";
 import "quill/dist/quill.snow.css"; // correct CSS
 import { useNavigate } from 'react-router-dom';
+import { useToast } from '../../../helper/ToastContext';
 
 interface LeaveFormData {
     fromDate: string;
@@ -24,6 +25,7 @@ const SickLeaveTab: React.FC<{
     const quillRef = useRef<any>(null);
     const [sickErrors, setSickErrors] = useState<Partial<LeaveFormData>>({});
     const navigate = useNavigate()
+    const { showToast } = useToast();
 
     useEffect(() => {
         const editor = quillRef.current?.getEditor();
@@ -216,10 +218,16 @@ const SickLeaveTab: React.FC<{
 
         if (result.success) {
             resetForm();
-            alert("SICK leave applied!");
+             // Show success toast instead of alert
-            navigate('/dashboard/leave-adjustments')
+            showToast("SICK Request submitted successfully!", "success");
+
+            // Navigate after a small delay
+            setTimeout(() => {
+                navigate('/dashboard/leave-adjustments');
+            }, 300);
         } else {
             setServerError(result.message || "Something went wrong");
+            showToast(result.message || "Failed to submit SICK request", "error");
         }
     };
 

src/ui/pages/Settings/SettingModal/ChangePaymentModal.tsx

@@ -2,156 +2,189 @@ import React, { useState, useEffect } from "react";
 import { CreditCard } from "lucide-react";
 import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../store";
+import { setProfile } from "../../../store/profileSlice";
 
 interface ChangePaymentModalProps {
-  isOpen: boolean;
+    isOpen: boolean;
-  onClose: () => void;
+    onClose: () => void;
 }
 
 const ChangePaymentModal: React.FC<ChangePaymentModalProps> = ({
-  isOpen,
+    isOpen,
-  onClose,
+    onClose,
 }) => {
-  const dispatch = useDispatch();
+    const dispatch = useDispatch();
-  const { profile } = useSelector((state: RootState) => state.profile);
+    const { profile } = useSelector((state: RootState) => state.profile);
 
-  const [method, setMethod] = useState(profile?.paymentMethod || "");
+    const [method, setMethod] = useState(profile?.paymentMethod || "");
-  const [wiseEmail, setWiseEmail] = useState(profile?.wiseEmail || "");
+    const [wiseEmail, setWiseEmail] = useState(profile?.wiseEmail || "");
-  const [veemAccount, setVeemAccount] = useState(profile?.veemAccount || "");
+    const [veemAccount, setVeemAccount] = useState(profile?.veemAccount || "");
 
-  const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
+    const [error, setError] = useState("");
 
-  useEffect(() => {
+    useEffect(() => {
-    if (isOpen) {
+        if (isOpen) {
-      setMethod(profile?.paymentMethod || "");
+            setMethod(profile?.paymentMethod || "");
-      setWiseEmail(profile?.wiseEmail || "");
+            setWiseEmail(profile?.wiseEmail || "");
-      setVeemAccount(profile?.veemAccount || "");
+            setVeemAccount(profile?.veemAccount || "");
-      setError("");
+            setError("");
-    }
+        }
-  }, [isOpen]);
+    }, [isOpen]);
 
-  if (!isOpen) return null;
+    if (!isOpen) return null;
 
-  const handleSubmit = async () => {
+    const handleSubmit = async () => {
-    setError("");
+        setError("");
 
-    // Validation
+        // Validation
-    if (!method) {
+        if (!method) {
-      return setError("Please select a payment method.");
+            return setError("Please select a payment method.");
-    }
+        }
 
-    if (method === "wise" && !wiseEmail.trim()) {
+        if (method === "wise" && !wiseEmail.trim()) {
-      return setError("Wise email is required.");
+            return setError("Wise email is required.");
-    }
+        }
 
-    if (method === "wise" && !/^\S+@\S+\.\S+$/.test(wiseEmail)) {
+        if (method === "wise" && !/^\S+@\S+\.\S+$/.test(wiseEmail)) {
-      return setError("Enter a valid Wise email.");
+            return setError("Enter a valid Wise email.");
-    }
+        }
 
-    if (method === "veem" && !veemAccount.trim()) {
+        if (method === "veem" && !veemAccount.trim()) {
-      return setError("Veem account number is required.");
+            return setError("Veem account number is required.");
-    }
+        }
 
-    setLoading(true);
+        setLoading(true);
 
-    // try {
+        try {
-    //   // Replace with your electron API
+            // Prepare data for API
-    //   await window.electron.updatePayment({
+            const updateData: any = {
-    //     method,
+                paymentMethod: method
-    //     wiseEmail: method === "wise" ? wiseEmail.trim() : "",
+            };
-    //     veemAccount: method === "veem" ? veemAccount.trim() : "",
-    //   });
 
-    //   // Refresh or update Redux
+            // Add appropriate field based on selection
-    //   // dispatch(updateProfile({...}));
+            if (method === "wise") {
+                updateData.wiseEmail = wiseEmail.trim();
+            } else if (method === "veem") {
+                updateData.veemAccount = veemAccount.trim();
+            }
 
-    //   onClose();
+            console.log("Sending to electron:", updateData);
-    // } catch (err) {
-    //   setError("Failed to update payment info. Try again.");
-    // }
 
-    setLoading(false);
+            // Call Electron API
-  };
+            const result = await window.electron.updatePayment(updateData);
 
-  return (
+            console.log(result)
-    <dialog open className="modal modal-open">
-      <div className="modal-box w-96">
 
-        <h3 className="font-bold text-lg mb-4 flex items-center gap-2">
+            if (result.success) {
-          <CreditCard size={18} /> Change Payment Method
+                // Prepare data for Redux update (clear unused field)
-        </h3>
+                const reduxUpdateData: any = {
+                    paymentMethod: method
+                };
 
-        {/* Error */}
+                if (method === "wise") {
-        {error && (
+                    reduxUpdateData.wiseEmail = wiseEmail.trim();
-          <div className="alert alert-error py-2 text-xs mb-3">{error}</div>
+                    reduxUpdateData.veemAccount = ""; // Clear veem
-        )}
+                } else if (method === "veem") {
+                    reduxUpdateData.veemAccount = veemAccount.trim();
+                    reduxUpdateData.wiseEmail = ""; // Clear wise
+                }
 
-        {/* Dropdown */}
+                // Update Redux store
-        <div className="form-control mb-4">
+                dispatch(setProfile(result.data));
-          <label className="label">
-            <span className="text-sm font-medium">Payment Method</span>
-          </label>
 
-          <select
+                // Show success message if needed
-            className="select select-bordered select-sm"
+                // toast.success("Payment method updated successfully");
-            value={method}
-            onChange={(e) => setMethod(e.target.value)}
-          >
-            <option value="">Select method</option>
-            <option value="wise">Wise</option>
-            <option value="veem">Veem</option>
-          </select>
-        </div>
 
-        {/* Wise Email */}
+                onClose();
-        {method === "wise" && (
+            } else {
-          <div className="form-control mb-4">
+                setError(result.message || "Failed to update payment info.");
-            <label className="label">
+            }
-              <span className="text-sm font-medium">Wise Email</span>
+        } catch (err: any) {
-            </label>
+            setError(err.message || "Failed to update payment info. Try again.");
-            <input
+        } finally {
-              type="email"
+            setLoading(false);
-              className="input input-bordered input-sm"
+        }
-              placeholder="Enter Wise email"
+    };
-              value={wiseEmail}
-              onChange={(e) => setWiseEmail(e.target.value)}
-            />
-          </div>
-        )}
 
-        {/* Veem Account */}
+    return (
-        {method === "veem" && (
+        <dialog open className="modal modal-open">
-          <div className="form-control mb-4">
+            <div className="modal-box w-96">
-            <label className="label">
-              <span className="text-sm font-medium">Veem Account Number</span>
-            </label>
-            <input
-              type="text"
-              className="input input-bordered input-sm"
-              placeholder="Enter Veem account"
-              value={veemAccount}
-              onChange={(e) => setVeemAccount(e.target.value)}
-            />
-          </div>
-        )}
 
-        <div className="modal-action">
+                <h3 className="font-bold text-lg mb-4 flex items-center gap-2">
-          <button className="btn btn-sm btn-ghost" onClick={onClose}>
+                    <CreditCard size={18} /> Change Payment Method
-            Cancel
+                </h3>
-          </button>
 
-          <button
+                {/* Error */}
-            className={`btn btn-sm btn-primary ${loading ? "loading" : ""}`}
+                {error && (
-            onClick={handleSubmit}
+                    <div className="alert alert-error py-2 text-xs mb-3">{error}</div>
-            disabled={loading}
+                )}
-          >
+
-            {loading ? "Updating..." : "Update"}
+                {/* Dropdown */}
-          </button>
+                <div className="form-control mb-4">
-        </div>
+                    <label className="label">
-      </div>
+                        <span className="text-sm font-medium">Payment Method</span>
-    </dialog>
+                    </label>
-  );
+
+                    <select
+                        className="select select-bordered select-sm"
+                        value={method}
+                        onChange={(e) => setMethod(e.target.value)}
+                    >
+                        <option value="">Select method</option>
+                        <option value="wise">Wise</option>
+                        <option value="veem">Veem</option>
+                    </select>
+                </div>
+
+                {/* Wise Email */}
+                {method === "wise" && (
+                    <div className="form-control mb-4">
+                        <label className="label">
+                            <span className="text-sm font-medium">Wise Email</span>
+                        </label>
+                        <input
+                            type="email"
+                            className="input input-bordered input-sm"
+                            placeholder="Enter Wise email"
+                            value={wiseEmail}
+                            onChange={(e) => setWiseEmail(e.target.value)}
+                        />
+                    </div>
+                )}
+
+                {/* Veem Account */}
+                {method === "veem" && (
+                    <div className="form-control mb-4">
+                        <label className="label">
+                            <span className="text-sm font-medium">Veem Account Number</span>
+                        </label>
+                        <input
+                            type="text"
+                            className="input input-bordered input-sm"
+                            placeholder="Enter Veem account"
+                            value={veemAccount}
+                            onChange={(e) => setVeemAccount(e.target.value)}
+                        />
+                    </div>
+                )}
+
+                <div className="modal-action">
+                    <button className="btn btn-sm btn-ghost" onClick={onClose}>
+                        Cancel
+                    </button>
+
+                    <button
+                        className={`btn btn-sm btn-primary ${loading ? "loading" : ""}`}
+                        onClick={handleSubmit}
+                        disabled={loading}
+                    >
+                        {loading ? "Updating..." : "Update"}
+                    </button>
+                </div>
+            </div>
+        </dialog>
+    );
 };
 
 export default ChangePaymentModal;

src/ui/pages/Settings/Settings.tsx

@@ -104,24 +104,24 @@ const Settings: React.FC = () => {
             </div>
 
 
-            {profile?.paymentMethod === "wise" && (
+            {profile?.veemAccount && (
               <div className="p-2 rounded bg-base-200/40">
                 <p className="text-xs text-base-content/60 flex items-center gap-1 mb-0.5">
-                  💳 Wise
+                  🏦 Veem Account
                 </p>
-                <p className="text-xs font-medium truncate" title={profile?.payoneerAccount || "N/A"}>
+                <p className="text-xs font-medium truncate" title={profile?.veemAccount || "N/A"}>
-                  {maskLast5(profile?.wiseEmail)}
+                  {profile?.veemAccount || "N/A"}
                 </p>
               </div>
             )}
 
-            {profile?.paymentMethod === "veem" && (
+            {profile?.wiseEmail&& (
               <div className="p-2 rounded bg-base-200/40">
-                <p className="text-xs text-base-content/60 flex items-center gap-1 mb-0.5">
+                <p className="text-xs text-base-content/60 flex items-center gap-1 mb-0.5 ">
-                  🏦 Veem
+                  🏦 Wise Email
                 </p>
-                <p className="text-xs font-medium truncate" title={profile?.veemAccount || "N/A"}>
+                <p className="text-xs font-medium overflow-auto no-scrollbar" title={profile?.wiseEmail || "N/A"}>
-                  {profile?.veemAccount || "N/A"}
+                  {profile?.wiseEmail || "N/A"}
                 </p>
               </div>
             )}

types.d.ts

@@ -154,16 +154,16 @@ interface Window {
       vaId: string;
       projectId: string;
       type: string;
-      time:string
+      time: string
     }) => Promise<any>;
     stopProjectTracking: (data: {
       vaId: string;
       projectId: string;
       type: string;
-      time:string
+      time: string
     }) => Promise<any>;
     trackingTabsOpeningClosing: (data: {
-      id?: string; 
+      id?: string;
       logId: string;
       projectId: string;
       title: string;
@@ -193,6 +193,13 @@ interface Window {
       cPassword: string;
     }) => Promise<{ success: boolean; message?: string; data?: any }>;
 
+    // In your electron API handler
+    updatePayment: (data: {
+      paymentMethod: string;
+      wiseEmail?: string;
+      veemAccount?: string;
+    }) => Promise<{ success: boolean; message?: string; data?: any }>;
+
 
     onTokenExpired: (callback: () => void) => void;
 
@@ -234,6 +241,9 @@ interface Window {
       success: boolean;
       data?: any;
     }>;
+
+    connectVPN: () => Promise<string>;
+    disconnectVPN: () => Promise<void>;
   };
 
 }