Merge branch 'master' of http://git.hicglobalsolutions.in/BhawanSingh/va-tracker - 04-Dec - Mac

src/electron/api/axiosClient.ts

@@ -42,7 +42,7 @@ api.interceptors.response.use(
     (response: AxiosResponse) => response.data,
     async (error) => {
         // console.error('[Axios Error]', error.message);
-        if (error.response?.status === 401) {
+        if (error.response?.status === 401 || 403) {
             console.warn('Token expired — trigger refresh logic if needed');
             sendTokenExpired();
         }

src/electron/ipc/ipcHandler.ts

@@ -29,7 +29,7 @@ export const registerIPCHandlers = (mainWindow: BrowserWindow) => {
     return { success: true };
   });
 
-  ipcMain.handle("login-request", async (_, credentials: { email: string; password: string }) => {    
+  ipcMain.handle("login-request", async (_, credentials: { email: string; password: string }) => {
     return handleLogin(credentials);
   });
 
@@ -46,8 +46,8 @@ export const registerIPCHandlers = (mainWindow: BrowserWindow) => {
       return { success: false, message: "Logout failed" };
     }
   });
-  
-  
+
+
 
 
 
@@ -96,7 +96,7 @@ ipcMain.handle("get-project-list", async () => {
     return {
       success: false,
       message: error?.message || String(error) || "Unknown error",
-      status:error?.status
+      status: error?.status
     };
   }
 });
@@ -110,8 +110,8 @@ ipcMain.handle("start-project-tracking", async (event, payload) => {
     const response = await api.post("/log/project", payload);
 
     console.log(" Tracking start synced:", response);
-    return { success: true, data: response }; 
-  } catch (error:any) {
+    return { success: true, data: response };
+  } catch (error: any) {
     console.error("❌ Error syncing project start:", error);
 
     // If API sent a response (like 400)
@@ -183,19 +183,6 @@ ipcMain.handle("tracking-tabs-opening-and-closing", async (event, payload) => {
 });
 
 
-// ipcMain.handle("get-project-logs", async (event, projectID) => {
-//   try {
-//     console.log("get-project-logs",projectID)
-//     const response = await api.get(`/report/project/${projectID}`);
-//     console.log("response-logs 164" , response)
-
-//     return response;
-//   } catch (error) {
-//     console.error("Error fetching project logs:", error);
-//     throw error;
-//   }
-// });
-
 
 ipcMain.handle("get-project-logs", async (event, { projectID, fromDate, toDate }) => {
   try {
@@ -274,14 +261,14 @@ ipcMain.handle("change-password", async (event, data) => {
 
   // Build final payload
   const payload = {
-      userDetails: {
-        oldPassword: data.oldPassword,
-        password: data.password,
-        cPassword: data.cPassword,
-      },
-    };
+    userDetails: {
+      oldPassword: data.oldPassword,
+      password: data.password,
+      cPassword: data.cPassword,
+    },
+  };
 
-    console.log("Change Password payload" , payload)
+  console.log("Change Password payload", payload)
   try {
     const response = await api.patch("/profile", payload);
     console.log("Chnage-passowrd-response", response)
@@ -316,20 +303,20 @@ ipcMain.handle("get-project-summary", async (_, { projectId, date }) => {
 
 ipcMain.handle("create-timesheet", async (event, data) => {
 
-  console.log("data" , data)
+  console.log("data", data)
   try {
     console.log("📩 Timesheet Payload:", data);
 
     const res = await api.post("/timesheet/adjustment/request", data);
 
-    console.log(res , " Line 323")
+    console.log(res, " Line 323")
 
     return {
       success: true,
       message: "Timesheet created successfully",
       data: res,
     };
-  } catch (error:any) {
+  } catch (error: any) {
     console.error("❌ Timesheet Error:", error);
 
     return {
@@ -378,6 +365,132 @@ ipcMain.handle("create-leave-request", async (event, payload) => {
 
 
 
+ipcMain.handle("get-schedules", async () => {
+  try {
+    console.log(" Fetching schedules...");
+
+    const response = await api.get("/payrollSchedule"); // Backend API call
+
+    console.log("✅ Schedule Data:", response.data);
+
+    return {
+      success: true,
+      result: response.data
+    };
+
+  } catch (error: any) {
+    console.error("❌ Fetch Schedules Failed:");
+
+    let message = "Unknown error occurred";
+
+    if (error.response) {
+      console.log("Status:", error.response.status);
+      console.log("Message:", error.response.statusText);
+      console.log("Server Response:", error.response.data);
+
+      message = error.response.data?.message || error.response.statusText;
+    } else {
+      message = error.message;
+    }
+
+    return {
+      success: false,
+      message
+    };
+  }
+});
+
+
+ipcMain.handle("get-payslips", async (event, vaId: string) => {
+  console.log("get-payslips", vaId)
+  try {
+    const response = await api.get(`/paySlip/${vaId}`);
+
+
+    return {
+      success: true,
+      data: response.data?.data || [],
+    };
+  } catch (error: any) {
+    let message = "Unknown error occurred";
+
+    if (error.response) {
+      console.log("Status:", error.response.status);
+      console.log("Message:", error.response.statusText);
+      console.log("Server Response:", error.response.data);
+
+      message = error.response.data?.message || error.response.statusText;
+    } else {
+      message = error.message;
+    }
+
+    return {
+      success: false,
+      message
+    };
+  }
+});
+
+
+
+ipcMain.handle("get-leave-list", async () => {
+
+  try {
+    const res = await api.get("/leaves/all");
+
+    console.log("/leaves/all", res.data);
+      return {
+       success: true,
+       data: res.data,
+     };
+  } catch (error: any) {
+    let message = "Unknown error occurred";
+
+    if (error.response) {
+      console.log("Status:", error.response.status);
+      console.log("Message:", error.response.statusText);
+      console.log("Server Response:", error.response.data);
+
+      message = error.response.data?.message || error.response.statusText;
+    } else {
+      message = error.message;
+    }
+    return {
+      success: false,
+      message
+    };
+  }
+});
+
+ipcMain.handle("get-adjustments-list", async (event, vaId: string) => {
+
+  try {
+    const res = await api.get(`/timesheet/adjustments/list?vaId=${vaId}`);
+
+    console.log("/timesheet/adjustments/list", res.data);
+      return {
+       success: true,
+       data: res.data,
+     };
+  } catch (error: any) {
+    let message = "Unknown error occurred";
+
+    if (error.response) {
+      console.log("Status:", error.response.status);
+      console.log("Message:", error.response.statusText);
+      console.log("Server Response:", error.response.data);
+
+      message = error.response.data?.message || error.response.statusText;
+    } else {
+      message = error.message;
+    }
+    return {
+      success: false,
+      message
+    };
+  }
+});
+
 
 
 export const sendTokenExpired = () => {

src/electron/preload.cts

@@ -51,8 +51,13 @@ contextBridge.exposeInMainWorld('electron', {
   createTimesheet: (data: any) => ipcRenderer.invoke('create-timesheet', data),
 
   createPTOAndSickLeaveRequest: (data) =>
-  ipcRenderer.invoke("create-leave-request", data),
+    ipcRenderer.invoke("create-leave-request", data),
 
+  getSchedules: () => ipcRenderer.invoke("get-schedules"),
+
+  getPayslips: (vaId: string) => ipcRenderer.invoke("get-payslips", vaId),
+  getLeaveList: () => ipcRenderer.invoke("get-leave-list"),
+  getAdjustmentsList:(vaId: string) => ipcRenderer.invoke("get-adjustments-list",vaId),
 
 } satisfies Window['electron']);
 

src/ui/App.tsx

@@ -95,6 +95,8 @@ import Settings from "./pages/Settings/Settings";
 import HelpSupport from "./pages/HelpSupport/HelpSupport";
 import Vpn from "./pages/Vpn/Vpn";
 import Schedule from "./pages/Schedule/Schedule";
+import PaysSlips from "./pages/PaySlips/PaysSlips";
+import ApplyLeaveAndAdjustmentsTime from "./pages/LeaveAndAdjustments/ApplyLeaveAndAdjustmentsTime";
 
 
 const App: React.FC = () => {
@@ -137,11 +139,13 @@ const App: React.FC = () => {
           <Route index element={<Dashboard />} />
           <Route path="projects" element={<Projects />} />
           <Route path="leave-adjustments" element={<LeaveAndAdjustments />} />
+          <Route path="leave-adjustments/apply" element={<ApplyLeaveAndAdjustmentsTime/>} />
           <Route path="timesheet" element={<Timesheets />} />
           <Route path="settings" element={<Settings />} />
           <Route path="vpn" element={<Vpn />} />
           <Route path="help-support" element={<HelpSupport />} />
           <Route path="schedule" element={<Schedule/>} />
+          <Route path="pays-slips" element={<PaysSlips/>} />
         </Route>
 
         {/* Default Redirect */}

src/ui/index.css

@@ -22,6 +22,21 @@
   }
 }
 
+@layer utilities {
+  .thin-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .thin-scrollbar::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--bc) / 0.3); /* base-content/30 */
+    border-radius: 999px;
+  }
+  .thin-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+
 input[type=number] {
   -moz-appearance: textfield;
 }

src/ui/layout/DashboardLayout.tsx

@@ -27,6 +27,7 @@ import {
   ChevronUp,
   GlobeLock,
   ClipboardClock,
+  CircleDollarSign,
 } from "lucide-react";
 import { useActiveAppTracker } from "../hooks/useActiveAppTracker";
 import { useDispatch, useSelector } from "react-redux";
@@ -112,7 +113,8 @@ const DashboardLayout = () => {
     { label: "Dashboard", path: "/dashboard", icon: <Home size={18} />, exact: true },
     { label: "Timesheet", path: "/dashboard/timesheet", icon: <TimerIcon size={18} /> },
     { label: "Leave & Adjust", path: "/dashboard/leave-adjustments", icon: <CalendarDays size={18} /> },
-    { label: "Schedule", path: "/dashboard/schedule", icon: <ClipboardClock size={18} />},
+    { label: "Schedule", path: "/dashboard/schedule", icon: <ClipboardClock size={18} /> },
+    { label: "Pays Slips", path: "/dashboard/pays-slips", icon: <CircleDollarSign size={18} /> },
     { label: "Settings", path: "/dashboard/settings", icon: <SettingsIcon size={18} /> },
     { label: "VPN", path: "/dashboard/vpn", icon: <GlobeLock size={18} /> },
     { label: "Help & Support", path: "/dashboard/help-support", icon: <HelpCircleIcon size={18} /> },
@@ -136,6 +138,7 @@ const DashboardLayout = () => {
 
   //  Create a ref to store the stop function so it can be called from the hook
   const stopTrackingRef = useRef<(() => Promise<void>) | null>(null);
+  const limitAlertShownRef = useRef(false);
 
   //  Define handleStopTracking FIRST
   const handleStopTracking = useCallback(async () => {
@@ -146,6 +149,9 @@ const DashboardLayout = () => {
       return;
     }
 
+    // Reset alert flag when stopping
+    limitAlertShownRef.current = false;
+
     let currentStopTime = new Date().toISOString();
     const projectId = selectedProject.projectId;
 
@@ -280,25 +286,34 @@ const DashboardLayout = () => {
 
   //  NOW define handleLimitExceeded using the defined handleStopTracking
   const handleLimitExceeded = useCallback(async () => {
-    console.log("🚨 LIMIT EXCEEDED - Auto-stopping tracking");
+    console.log("🚨 LIMIT EXCEEDED - Showing alert (not stopping)");
 
     if (!selectedProject) {
-      console.error(" No selected project for limit exceeded");
+      console.error("❌ No selected project for limit exceeded");
       return;
     }
 
-    console.log("Alert Message 1")
+    // Only show alert once per tracking session
+    if (limitAlertShownRef.current) {
+      console.log("⚠️ Alert already shown, skipping");
+      return;
+    }
+
+    limitAlertShownRef.current = true;
+
+    console.log("⏰ Showing limit exceeded alert");
+
     // Show alert to user
     alert(
       `⏰ Daily Limit Reached!\n\n` +
       `Project: ${selectedProject.projectName}\n` +
       `Dedicated Hours: ${selectedProject.dedicatedHours}\n\n` +
-      `Your tracking has been stopped automatically because you've reached the daily time limit for this project.`
+      `You've reached the daily time limit for this project.\n` +
+      `Timer will continue running. Please stop manually when ready.`
     );
-    console.log("Alert Message 2")
-    // Stop tracking
-    await handleStopTracking();
-  }, [selectedProject, handleStopTracking]);
+
+    console.log("✅ Alert shown, timer continues running");
+  }, [selectedProject]);
 
   //  Initialize useActiveAppTracker and store finalizeTracking in ref
   const { finalizeTracking } = useActiveAppTracker(
@@ -316,6 +331,7 @@ const DashboardLayout = () => {
 
   const socketRef = useRef<Socket | null>(null);
   const intervalRef = useRef<number | null>(null);
+  const lastAppsRef = useRef<Object | null>(null);
   const [isConnected, setIsConnected] = useState(false);
 
   useEffect(() => {
@@ -382,6 +398,8 @@ const DashboardLayout = () => {
 
     console.log(`⏰ Starting tracking. Remaining time: ${limitCheck.remaining}`);
 
+    limitAlertShownRef.current = false;
+
     setLoadingStart(true);
 
     const now = Date.now();
@@ -466,15 +484,15 @@ const DashboardLayout = () => {
         // Check if time limit reached
         const totalTimeWorked = alreadyWorkedSeconds + timeSinceStart;
 
-        if (totalTimeWorked >= dedicatedSeconds) {
+        if (totalTimeWorked >= dedicatedSeconds && !limitAlertShownRef.current) {
           console.warn("🚨 CLIENT-SIDE: Time limit reached!");
           console.log(`Total worked: ${Math.floor(totalTimeWorked / 60)}m vs Limit: ${Math.floor(dedicatedSeconds / 60)}m`);
 
           // Clear timer first to prevent multiple triggers
-          if (timerRef.current) {
-            clearInterval(timerRef.current);
-            timerRef.current = null;
-          }
+          // if (timerRef.current) {
+          //   clearInterval(timerRef.current);
+          //   timerRef.current = null;
+          // }
 
           // Trigger auto-stop
           handleLimitExceeded();
@@ -523,6 +541,7 @@ const DashboardLayout = () => {
     }
   };
 
+
   const handleSocketConnect = async () => {
 
     const token = await window.electron.getToken("ACCESS_TOKEN");
@@ -556,12 +575,56 @@ const DashboardLayout = () => {
       setIsConnected(true);
 
       // Start sending every 5 seconds
+      // intervalRef.current = setInterval(async () => {
+      //   const apps = await window.electron.getRunningApps()
+      //   socketRef.current?.emit("getVisibleApps", { token: await token, apps });
+      // }, 5000);
+    });
+
+    // socketRef.current.on("startSendAppsDetails", async ({ apps }) => {
+    //   socketRef.current?.emit("getVisibleApps", { token: await token, apps });
+    // });
+
+    socketRef.current.on("startSendAppsDetails", async ({projId}) => {
+      if (projId !== selectedProject?.projectId) return;
+      console.log("▶️ startSendAppsDetails received");
+
+      // avoid multiple intervals
+      if (intervalRef.current) return;
+
       intervalRef.current = setInterval(async () => {
-        const apps = await window.electron.getRunningApps()
-        socketRef.current?.emit("getVisibleApps", { token: await token, apps });
+        const currentApps = await window.electron.getRunningApps();
+
+        // Compare with last sent data
+        const hasChanged = JSON.stringify(currentApps) !== JSON.stringify(lastAppsRef.current);
+
+        if (hasChanged) {
+          lastAppsRef.current = currentApps;
+
+          socketRef.current?.emit("getVisibleApps", {
+            token: await token,
+            apps: currentApps,
+          });
+        }
       }, 5000);
     });
 
+    socketRef.current.on("stopSendAppsDetails", async ({projId}) => {
+      if (projId !== selectedProject?.projectId) return;
+      console.log("⏹ stopSendAppsDetails received");
+
+      // clear the interval
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+
+      // Send final stop event to server
+      // socketRef.current?.emit("stopSendAppsDetails", {
+      //   token: await token,
+      // });
+    });
+
     socketRef.current.on("appToCapture", async ({ appTitle }) => {
       console.log("📸 Capture requested for:", appTitle);
 
@@ -628,170 +691,171 @@ const DashboardLayout = () => {
 
   return (
     <>
-      {/* Header */}
-      {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">
-          <div className="flex items-center space-x-3">
-            {isStopping ? (
-              // Skeleton for left side during stop
-              <div className="flex items-center space-x-3">
-                <div className="skeleton w-8 h-8 rounded-full"></div>
-                <div className="skeleton w-32 h-4"></div>
-              </div>
-            ) : selectedProject ? (
-              isTracking ? (
-                <button
-                  className="bg-error text-white p-1.5 rounded-full flex items-center justify-center cursor-pointer"
-                  onClick={handleStopTracking}
-                  disabled={loadingStop}
-                  title="Stop Tracking"
-                >
-                  {loadingStop ? (
-                    <span className="loading loading-spinner loading-xs text-white"></span>
-                  ) : (
-                    <Pause size={16} />
-                  )}
-                </button>
+      <div className="flex flex-col h-screen overflow-hidden">
+        {/* 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">
+            <div className="flex items-center space-x-3">
+              {isStopping ? (
+                // Skeleton for left side during stop
+                <div className="flex items-center space-x-3">
+                  <div className="skeleton w-8 h-8 rounded-full"></div>
+                  <div className="skeleton w-32 h-4"></div>
+                </div>
+              ) : selectedProject ? (
+                isTracking ? (
+                  <button
+                    className="bg-error text-white p-1.5 rounded-full flex items-center justify-center cursor-pointer"
+                    onClick={handleStopTracking}
+                    disabled={loadingStop}
+                    title="Stop Tracking"
+                  >
+                    {loadingStop ? (
+                      <span className="loading loading-spinner loading-xs text-white"></span>
+                    ) : (
+                      <Pause size={16} />
+                    )}
+                  </button>
+                ) : (
+                  <button
+                    className="bg-success text-white p-1.5 rounded-full flex items-center justify-center cursor-pointer"
+                    onClick={() => handleStartTracking(selectedProject)}
+                    title="Start Tracking"
+                  >
+                    <Play size={16} />
+                  </button>
+                )
               ) : (
                 <button
-                  className="bg-success text-white p-1.5 rounded-full flex items-center justify-center cursor-pointer"
-                  onClick={() => handleStartTracking(selectedProject)}
-                  title="Start Tracking"
+                  className="bg-gray-400 text-white p-1.5 rounded-full flex items-center justify-center cursor-not-allowed"
+                  disabled
+                  title="Select a project to start"
                 >
                   <Play size={16} />
                 </button>
-              )
-            ) : (
+              )}
+
+              {!isStopping && selectedProject ? (
+                <span className="ml-2 text-sm text-base-content/70">
+                  {selectedProject.projectName}
+                </span>
+              ) : !isStopping ? (
+                <span className="ml-2 text-sm text-base-content/40 italic">
+                  No Project Selected
+                </span>
+              ) : null}
+            </div>
+
+            <div className="flex items-center space-x-3">
+              {isStopping ? (
+                // Skeleton for right side during stop
+                <div className="flex items-center space-x-3">
+                  <div className="skeleton w-20 h-6 rounded"></div>
+                  <div className="skeleton w-6 h-6 rounded"></div>
+                  <div className="skeleton w-8 h-8 rounded"></div>
+                </div>
+              ) : (
+                <>
+                  <div className="badge badge-success text-white font-semibold px-3 py-2 shadow-sm">
+                    {formatTime(
+                      isTracking ? elapsedTime : parseTimeStringToSeconds(selectedProject?.totalWorkTime || "0h 0m 0s")
+                    )}
+                  </div>
+
+                  {/* <span className="text-error">
+                    <ShieldBan size={18} />
+                  </span> */}
+
+                  <button
+                    onClick={() => {
+                      if (toggleWindowSize.current) {
+                        window.electron.resizeWindow(500, 85);
+                        toggleWindowSize.current = false;
+                      } else {
+                        window.electron.resizeWindow(500, 600);
+                        toggleWindowSize.current = true;
+                      }
+                    }}
+                    className="btn btn-xs btn-outline btn-primary"
+                  >
+                    {toggleWindowSize.current ? <ChevronDown /> : <ChevronUp />}
+                  </button>
+                </>
+              )}
+            </div>
+          </header>
+        }
+
+        {/* Layout Body */}
+        <div className={`flex  flex-1  bg-base-200 overflow-hidden`}>
+          {/* Sidebar */}
+          <aside className="flex-none w-16 border-r border-base-300 bg-base-100 flex flex-col items-center py-4 gap-2">
+            {menuItems.map((item) => (
+              <div className="tooltip z-100 tooltip-right " key={item.label} data-tip={item.label}>
+                <NavLink
+                  to={item.path}
+                  end={item.exact}
+                  className={({ isActive }) =>
+                    `flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-150 cursor-pointer ${isActive
+                      ? "bg-primary text-primary-content"
+                      : "hover:bg-base-300 text-base-content"
+                    }`
+                  }
+                >
+                  {item.icon}
+                </NavLink>
+              </div>
+            ))}
+
+            <div className={`absolute ${!isTracking ? "bottom-14" : "bottom-5"} `}>
+              <label className="swap swap-rotate  p-2.5">
+                {/* this hidden checkbox controls the state */}
+                <input type="checkbox" className="theme-controller" onChange={toggleTheme}
+                  checked={theme === "dark"} />
+
+                {/* sun icon */}
+                <svg
+                  className="swap-off h-5 w-5 fill-current"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24">
+                  <path
+                    d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+                </svg>
+                {/* moon icon */}
+                <svg
+                  className="swap-on h-5 w-5 fill-current"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24">
+                  <path
+                    d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+                </svg>
+              </label>
+            </div>
+
+            {!isTracking && (
               <button
-                className="bg-gray-400 text-white p-1.5 rounded-full flex items-center justify-center cursor-not-allowed"
-                disabled
-                title="Select a project to start"
+                onClick={() => setShowLogoutModal(true)}
+                className="flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-150 hover:bg-error/10 text-error hover:text-error mt-auto cursor-pointer tooltip tooltip-right"
+                data-tip={"Logout"}
               >
-                <Play size={16} />
+                <LogOut size={18} />
               </button>
             )}
+          </aside>
 
-            {!isStopping && selectedProject ? (
-              <span className="ml-2 text-sm text-base-content/70">
-                {selectedProject.projectName}
-              </span>
-            ) : !isStopping ? (
-              <span className="ml-2 text-sm text-base-content/40 italic">
-                No Project Selected
-              </span>
-            ) : null}
-          </div>
+          {/* Main Content */}
+          <main className="flex-1 overflow-y-auto p-4  no-scrollbar bg-base-200">
+            <Outlet context={trackingState} />
+          </main>
 
-          <div className="flex items-center space-x-3">
-            {isStopping ? (
-              // Skeleton for right side during stop
-              <div className="flex items-center space-x-3">
-                <div className="skeleton w-20 h-6 rounded"></div>
-                <div className="skeleton w-6 h-6 rounded"></div>
-                <div className="skeleton w-8 h-8 rounded"></div>
-              </div>
-            ) : (
-              <>
-                <div className="badge badge-success text-white font-semibold px-3 py-2 shadow-sm">
-                  {formatTime(
-                    isTracking ? elapsedTime : parseTimeStringToSeconds(selectedProject?.totalWorkTime || "0h 0m 0s")
-                  )}
-                </div>
-
-                <span className="text-error">
-                  <ShieldBan size={18} />
-                </span>
-
-                <button
-                  onClick={() => {
-                    if (toggleWindowSize.current) {
-                      window.electron.resizeWindow(500, 85);
-                      toggleWindowSize.current = false;
-                    } else {
-                      window.electron.resizeWindow(500, 600);
-                      toggleWindowSize.current = true;
-                    }
-                  }}
-                  className="btn btn-xs btn-outline btn-primary"
-                >
-                  {toggleWindowSize.current ? <ChevronDown /> : <ChevronUp />}
-                </button>
-              </>
-            )}
-          </div>
-        </header>
-      }
-
-      {/* 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 flex-col items-center py-4 space-y-4 relative">
-          {menuItems.map((item) => (
-            <div className="tooltip z-100 tooltip-right" key={item.label} data-tip={item.label}>
-              <NavLink
-                to={item.path}
-                end={item.exact}
-                className={({ isActive }) =>
-                  `flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-150 cursor-pointer ${isActive
-                    ? "bg-primary text-primary-content"
-                    : "hover:bg-base-300 text-base-content"
-                  }`
-                }
-              >
-                {item.icon}
-              </NavLink>
-            </div>
-          ))}
-
-          <div className="absolute bottom-13 ">
-            <label className="swap swap-rotate  p-2.5">
-              {/* this hidden checkbox controls the state */}
-              <input type="checkbox" className="theme-controller" onChange={toggleTheme}
-                checked={theme === "dark"} />
-
-              {/* sun icon */}
-              <svg
-                className="swap-off h-5 w-5 fill-current"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24">
-                <path
-                  d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
-              </svg>
-              {/* moon icon */}
-              <svg
-                className="swap-on h-5 w-5 fill-current"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24">
-                <path
-                  d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
-              </svg>
-            </label>
-          </div>
-
-          {!isTracking && (
-            <button
-              onClick={() => setShowLogoutModal(true)}
-              className="flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-150 hover:bg-error/10 text-error hover:text-error mt-auto cursor-pointer tooltip tooltip-right"
-              data-tip={"Logout"}
-            >
-              <LogOut size={18} />
-            </button>
-          )}
-        </aside>
-
-        {/* Main Content */}
-        <main className="flex-1 overflow-y-auto p-4 no-scrollbar bg-base-200">
-          <Outlet context={trackingState} />
-        </main>
-
-        <LogoutModal
-          open={showLogoutModal}
-          onClose={() => setShowLogoutModal(false)}
-          onConfirm={handleLogout}
-        />
+          <LogoutModal
+            open={showLogoutModal}
+            onClose={() => setShowLogoutModal(false)}
+            onConfirm={handleLogout}
+          />
 
+        </div>
       </div>
-
     </>
   );
 };

src/ui/pages/Dashboard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Clock, TrendingUp, Play, Square, ProjectorIcon, Pause } from "lucide-react";
+import { Clock, TrendingUp, Play, Square, ProjectorIcon, Pause, RefreshCw } from "lucide-react";
 import { useOutletContext } from "react-router-dom";
 import NoData from "./NoData";
 import { useDispatch, useSelector } from "react-redux";
@@ -16,7 +16,7 @@ interface Project {
   totalWorkTime: string;
   totalWorkMs: number;
   totalLogs: number;
-  status: string
+  status: string;
 }
 
 interface ProjectTrackingData {
@@ -105,6 +105,7 @@ const Dashboard: React.FC = () => {
   const selectedProject = useSelector((state: any) => state.projects.selectedProject);
   const projectSummary = useSelector((state: any) => state.projects.projectSummary);
   const projectTrackingMap = useSelector((state: any) => state.projects.projectTrackingMap);
+  const [isRefreshing, setIsRefreshing] = useState(false);
 
   console.log("Line 111", projectsData, selectedProject, projectTrackingMap)
 
@@ -127,60 +128,69 @@ const Dashboard: React.FC = () => {
     }
   };
 
-  useEffect(() => {
-    const fetchProjects = async () => {
-      try {
-        console.log("📡 Fetching projects...Dashboard");
-        const res = await window.electron.getProjectList();
-        console.log(" Project list response in dashboard:", res);
+  const fetchProjects = async () => {
+    setIsRefreshing(true)
+    try {
+      console.log("📡 Fetching projects...Dashboard");
+      const res = await window.electron.getProjectList();
+      console.log(" Project list response in dashboard:", res);
 
-        if (res?.success && Array.isArray(res.data)) {
-          // Store data redux store 
-          dispatch(setProjectsDataSlice(res.data));
+      if (res?.success && Array.isArray(res.data)) {
+        // Store data redux store 
+        dispatch(setProjectsDataSlice(res.data));
 
+        dispatch(
+          setProjectSummarySlice({
+            totalProjects: res.totalProjects || 0,
+            activeProjects: res.activeProjects || 0,
+            awayProjects: res.awayProjects || 0,
+            totalWorkTime: res.totalWorkTime || "0h 0m 0s",
+            totalWorkMs: res.totalWorkMs || 0,
+            vaName: res.vaName || "",
+            vaId: res.vaId || "",
+          })
+        );
+
+        // Auto-select first project
+        if (res.data.length > 0 && !selectedProject) {
+          const firstProject = res.data[0];
+
+          // Select the project
+          dispatch(setSelectedProjectSlice(firstProject));
+
+          const initialElapsed = parseTimeStringToSeconds(firstProject.totalWorkTime);
+
+          // Initialize tracking data for first project
           dispatch(
-            setProjectSummarySlice({
-              totalProjects: res.totalProjects || 0,
-              activeProjects: res.activeProjects || 0,
-              awayProjects: res.awayProjects || 0,
-              totalWorkTime: res.totalWorkTime || "0h 0m 0s",
-              totalWorkMs: res.totalWorkMs || 0,
-              vaName: res.vaName || "",
-              vaId: res.vaId || "",
+            initializeProjectTracking({
+              projectId: firstProject.projectId,
+              initialTime: initialElapsed,
             })
           );
-
-          // Auto-select first project
-          if (res.data.length > 0 && !selectedProject) {
-            const firstProject = res.data[0];
-
-            // Select the project
-            dispatch(setSelectedProjectSlice(firstProject));
-
-            const initialElapsed = parseTimeStringToSeconds(firstProject.totalWorkTime);
-
-            // Initialize tracking data for first project
-            dispatch(
-              initializeProjectTracking({
-                projectId: firstProject.projectId,
-                initialTime: initialElapsed,
-              })
-            );
-          }
-
-          fetchProfile()
-
-        } else {
-          console.warn("⚠️ Unexpected response:", res);
         }
-      } catch (err) {
-        console.error("❌ Error fetching projects:", err);
-      }
-    };
 
+        fetchProfile()
+
+      } else {
+        console.warn("⚠️ Unexpected response:", res);
+      }
+    } catch (err) {
+      console.error("❌ Error fetching projects:", err);
+    } finally {
+      setIsRefreshing(false)
+    }
+  };
+
+  useEffect(() => {
     fetchProjects();
   }, []);
 
+  const handleRefresh = async () => {
+    // setIsRefreshing(true);
+    await fetchProjects();
+    // setTimeout(() => setIsRefreshing(false), 500); // Small delay for visual feedback
+  };
+
   const selectedData = selectedProject
     ? projectTrackingMap[selectedProject.projectId]
     : null;
@@ -234,7 +244,7 @@ const Dashboard: React.FC = () => {
   };
 
   return (
-    <main className="flex-1 overflow-hidden no-scrollbar max-h-screen">
+    <main className="flex-1 overflow-hidden no-scrollbar max-h-[85vh]">
       {/* Header */}
       <div className="mb-2">
         <h1 className="text-md font-bold">Dashboard</h1>
@@ -243,7 +253,7 @@ const Dashboard: React.FC = () => {
       <div className="w-full mb-4">
         <div className="card bg-base-100 border border-base-200 shadow-sm card-sm">
           <div className="card-body">
-            {isStopping ? (
+            {(isStopping || isRefreshing) ? (
               // Skeleton loader for tracking section
               <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
                 <div className="text-center sm:text-left w-full">
@@ -318,10 +328,19 @@ const Dashboard: React.FC = () => {
         {/* 🔹 Sticky Header */}
         <div className="sticky top-0 z-20 bg-base-100 border-b border-base-content/10 p-3 flex justify-between items-center">
           <p className="text-md font-bold">Projects</p>
+          <button
+            onClick={handleRefresh}
+            disabled={isRefreshing}
+            className="btn btn-xs btn-ghost gap-1 text-warning"
+            title="Refresh projects"
+          >
+            <RefreshCw className={`w-3 h-3 text-warning ${isRefreshing ? 'animate-spin' : ''}`} />
+            Refresh
+          </button>
         </div>
 
         {/* 🔹 Table or Empty State or Skeleton */}
-        {isStopping ? (
+        {(isStopping || isRefreshing) ? (
           // Skeleton loader for projects table
           <div className="p-4 space-y-3">
             {[...Array(3)].map((_, index) => (

src/ui/pages/LeaveAndAdjustments/AdjustmentsTable.tsx

@@ -0,0 +1,183 @@
+import React from "react";
+import { Loader2, RefreshCw } from "lucide-react";
+import { DateTime } from "luxon";
+
+interface AdjustmentItem {
+    id: string;
+    date: string;
+    loginTime: string;
+    logoutTime: string;
+    comment: string;
+    status: string;
+    requestedAt: string;
+    adjustedHours: string;
+    project: {
+        id: string;
+        name: string;
+    };
+}
+
+interface AdjustmentTableProps {
+    isTracking: boolean;
+    adjustments: AdjustmentItem[];
+    loading: boolean;
+    lastRefreshed: Date | null;
+    onRefresh: () => Promise<void>;
+}
+
+const AdjustmentsTable: React.FC<AdjustmentTableProps> = ({ 
+    isTracking, 
+    adjustments, 
+    loading, 
+    lastRefreshed,
+    onRefresh 
+}) => {
+    const [refreshing, setRefreshing] = React.useState(false);
+
+    // 🌍 Convert UTC → Local System Time
+    const toLocal = (utcString: string, format: string) => {
+        return DateTime.fromISO(utcString, { zone: "utc" })
+            .setZone(DateTime.local().zoneName)
+            .toFormat(format);
+    };
+
+    const formatTime = (t: string) => toLocal(t, "HH:mm:ss");
+    const formatDate = (d: string) => toLocal(d, "yyyy-MM-dd");
+
+    const handleRefresh = async () => {
+        setRefreshing(true);
+        await onRefresh();
+        setRefreshing(false);
+    };
+
+    const renderSkeleton = () =>
+        Array.from({ length: 7 }).map((_, i) => (
+            <tr key={i}>
+                <td><div className="skeleton h-4 w-6"></div></td>
+                <td><div className="skeleton h-4 w-20"></div></td>
+                <td><div className="skeleton h-4 w-24"></div></td>
+                <td><div className="skeleton h-4 w-20"></div></td>
+                <td><div className="skeleton h-4 w-10"></div></td>
+                <td><div className="skeleton h-4 w-24"></div></td>
+                <td><div className="skeleton h-4 w-14"></div></td>
+            </tr>
+        ));
+
+    return (
+        <>
+            <div
+                className="flex-1 overflow-y-auto rounded-box border border-base-content/10 bg-base-100 shadow-md no-scrollbar"
+                style={{
+                    height: isTracking ? "calc(100vh - 200px)" : "calc(100vh - 160px)",
+                }}
+            >
+                <table className="table table-zebra w-full text-[11px]">
+                    <thead className="sticky top-0 bg-base-200 text-[12px] z-10">
+                        <tr className="text-center">
+                            <th>#</th>
+                            <th>Project</th>
+                            <th>Date</th>
+                            <th>In → Out</th>
+                            <th>Adjusted Hours</th>
+                            <th>Status</th>
+                            <th>Requested At</th>
+                        </tr>
+                    </thead>
+
+                    <tbody className="text-center">
+                        {loading
+                            ? renderSkeleton()
+                            : adjustments.length === 0
+                                ? (
+                                    <tr>
+                                        <td colSpan={7} className="text-center py-4 text-base-content/50">
+                                            No adjustments found
+                                        </td>
+                                    </tr>
+                                )
+                                : adjustments.map((item, idx) => (
+                                    <tr key={item.id}>
+                                        <td>{idx + 1}</td>
+
+                                        <td>
+                                            <span className="badge badge-xs badge-info whitespace-nowrap">
+                                                {item.project?.name || "N/A"}
+                                            </span>
+                                        </td>
+
+                                        <td className="whitespace-nowrap">{formatDate(item.date)}</td>
+
+                                        <td className="whitespace-nowrap flex  ">
+                                            <span className="me-1">{formatTime(item.loginTime)} </span>
+                                            → {" "}
+                                            <span className="ms-1">{formatTime(item.logoutTime)}</span>
+                                        </td>
+
+                                        <td className="whitespace-nowrap">
+                                            <span className="badge badge-xs badge-primary">
+                                                {item.adjustedHours}
+                                            </span>
+                                        </td>
+
+                                        <td>
+                                            <span
+                                                className={`badge badge-xs ${
+                                                    item.status === "PENDING"
+                                                        ? "badge-warning"
+                                                        : item.status === "APPROVED"
+                                                            ? "badge-success"
+                                                            : "badge-error"
+                                                }`}
+                                            >
+                                                {item.status}
+                                            </span>
+                                        </td>
+
+                                        <td className="whitespace-nowrap">{toLocal(item.requestedAt, "yyyy-MM-dd HH:mm:ss")}</td>
+                                    </tr>
+                                ))}
+
+                        {/* {refreshing && adjustments.length > 0 && (
+                            <tr>
+                                <td colSpan={7} className="bg-base-200/50">
+                                    <div className="flex justify-center py-2">
+                                        {renderSkeleton()}
+                                    </div>
+                                </td>
+                            </tr>
+                        )} */}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* FOOTER */}
+            <div className="flex-none flex justify-between items-center text-xs mt-2">
+                <div className="text-base-content/60">
+                    {adjustments.length} adjustment{adjustments.length !== 1 ? "s" : ""} found
+                </div>
+
+                <div className="flex items-center gap-4">
+                    {lastRefreshed && (
+                        <div className="text-base-content/60">
+                            Last updated: {toLocal(lastRefreshed.toISOString(), "HH:mm:ss")}
+                        </div>
+                    )}
+
+                    <button
+                        onClick={handleRefresh}
+                        disabled={refreshing}
+                        className="btn btn-xs btn-circle bg-warning"
+                    >
+                        {refreshing ? (
+                            <Loader2 size={14} className="animate-spin" />
+                        ) : (
+                            <RefreshCw size={14} />
+                        )}
+                    </button>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default AdjustmentsTable;

src/ui/pages/LeaveAndAdjustments/ApplyLeaveAndAdjustmentsTime.tsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store";
+import PtoLeaveTab from './tabs/PtoLeaveTab';
+import SickLeaveTab from './tabs/SickLeaveTab';
+import AdjustmentTab from './tabs/AdjustmentTab';
+import { useNavigate } from "react-router-dom";
+
+type TabType = 'pto' | 'sick' | 'adjustment';
+
+const ApplyLeaveAndAdjustmentsTime = () => {
+    const [activeTab, setActiveTab] = useState<TabType>('pto');
+    const [isSubmitting, setIsSubmitting] = useState(false); //  NEW
+    const projects = useSelector((state: RootState) => state.projects.projectsData);
+
+    const navigate = useNavigate()
+
+    // ------- COMMON API CALL FOR BOTH TABS -------
+    const submitLeave = async (payload: {
+        dateFrom: string;
+        dateTo: string;
+        leaveType: "PTO" | "SICK";
+        comment: string;
+    }) => {
+        try {
+            setIsSubmitting(true);
+
+            console.log("Leave  /sick Payload:", payload);
+
+            const response = await window.electron.createPTOAndSickLeaveRequest(payload)
+            console.log("Leave Payload:", response)
+            if (response.success) {
+                return { success: true };
+            }
+
+            return {
+                success: false,
+                message: response.message
+            };
+        } catch (err) {
+            console.error(err);
+            return { success: false, message: "Request failed" };
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+
+    const handleBack = () => {
+        navigate('/dashboard/leave-adjustments')
+    }
+    return (
+        <>
+            <div className="max-h-screen">
+                <div className="w-full mx-auto">
+                    <div className='mb-3 flex justify-between items-center'>
+                        <h1 className="text-mb font-bold ">Apply Leave & Adjust Timesheet</h1>
+                        <button className="btn btn-xs btn-error text-base-content " onClick={handleBack}>Back</button>
+                    </div>
+                    {/* Tabs — Disabled while submitting */}
+                    <div role="tablist" className="tabs tabs-border  w-full mb-1 opacity-100">
+                        <a
+                            role="tab"
+                            className={`tab text-xs font-semibold ${activeTab === "pto" ? "tab-active text-primary" : ""
+                                } ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
+                            onClick={() => setActiveTab("pto")}
+                        >
+                            PTO Leave
+                        </a>
+
+                        <a
+                            role="tab"
+                            className={`tab text-xs font-semibold ${activeTab === "sick" ? "tab-active text-primary" : ""
+                                } ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
+                            onClick={() => setActiveTab("sick")}
+                        >
+                            Sick Leave
+                        </a>
+
+                        <a
+                            role="tab"
+                            className={`tab text-xs font-semibold ${activeTab === "adjustment" ? "tab-active text-primary" : ""
+                                } ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
+                            onClick={() => setActiveTab("adjustment")}
+                        >
+                            Adjustment Submission
+                        </a>
+                    </div>
+
+                    {/* Main Container */}
+                    <div className="rounded-lg bg-base-100 overflow-hidden">
+                        <div className="px-8 py-4 overflow-y-auto no-scrollbar max-h-[81vh]">
+
+                            {activeTab === "pto" && (
+                                <PtoLeaveTab submitLeave={submitLeave} isSubmitting={isSubmitting} />
+                            )}
+
+                            {activeTab === "sick" && (
+                                <SickLeaveTab submitLeave={submitLeave} isSubmitting={isSubmitting} />
+                            )}
+
+                            {activeTab === "adjustment" && (
+                                <AdjustmentTab projects={projects} />
+                            )}
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default ApplyLeaveAndAdjustmentsTime

src/ui/pages/LeaveAndAdjustments/LeaveAndAdjustments.tsx

@@ -1,104 +1,172 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate, useOutletContext } from "react-router-dom";
+import { TrackingState } from "../../layout/DashboardLayout";
+import LeaveTable from "./LeaveTable";
+import AdjustmentsTable from "./AdjustmentsTable";
+import { useSelector } from "react-redux";
 
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { RootState } from '../../store';
-import PtoLeaveTab from './tabs/PtoLeaveTab';
-import SickLeaveTab from './tabs/SickLeaveTab';
-import AdjustmentTab from './tabs/AdjustmentTab';
+interface LeaveItem {
+  leaveId: string;
+  dateFrom: string;
+  dateTo: string;
+  totalDays: number;
+  leaveType: string;
+  comment: string;
+  status: string;
+  appliedOn: string;
+  reviewedAt: string | null;
+  rejectionReason: string | null;
+}
 
-type TabType = 'pto' | 'sick' | 'adjustment';
+interface AdjustmentItem {
+  id: string;
+  date: string;
+  loginTime: string;
+  logoutTime: string;
+  comment: string;
+  status: string;
+  requestedAt: string;
+  adjustedHours: string;
+  project: {
+    id: string;
+    name: string;
+  };
+}
+
+interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+}
 
 const LeaveAndAdjustments: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<TabType>('pto');
-  const [isSubmitting, setIsSubmitting] = useState(false); // 🚀 NEW
-  const projects = useSelector((state: RootState) => state.projects.projectsData);
+  const { isTracking } = useOutletContext<TrackingState>();
+  const navigate = useNavigate();
 
-  // ------- COMMON API CALL FOR BOTH TABS -------
-  const submitLeave = async (payload: {
-    dateFrom: string;
-    dateTo: string;
-    leaveType: "PTO" | "SICK";
-    comment: string;
-  }) => {
+  const { projectSummary } = useSelector((state: any) => state.projects);
+console.log("projectSummary46" , projectSummary)
+
+  // Tabs state
+  const [activeTab, setActiveTab] = useState<"leave" | "adjustments">("leave");
+
+  // Data states
+  const [leaves, setLeaves] = useState<LeaveItem[]>([]);
+  const [adjustments, setAdjustments] = useState<AdjustmentItem[]>([]);
+
+  // Loading states
+  const [loadingLeaves, setLoadingLeaves] = useState(true);
+  const [loadingAdjustments, setLoadingAdjustments] = useState(true);
+
+  // Refresh state
+  const [lastRefreshed, setLastRefreshed] = useState<Date | null>(null);
+
+  const handleApplyLeaveAndAdjust = () => {
+    navigate("/dashboard/leave-adjustments/apply");
+  };
+
+  // Fetch leaves data
+  const fetchLeaves = async () => {
+    setLoadingLeaves(true);
     try {
-      setIsSubmitting(true);
-
-      console.log("Leave  /sick Payload:", payload);
-
-      const response = await window.electron.createPTOAndSickLeaveRequest(payload)
-      console.log("Leave Payload:", response)
-      if (response.success) {
-        return { success: true };
+      const res: ApiResponse<{ leaves: LeaveItem[] }> = await window.electron.getLeaveList();
+      if (res.success) {
+        setLeaves(res?.data?.leaves || []);
       }
-
-      return {
-        success: false,
-        message: response.message
-      };
-    } catch (err) {
-      console.error(err);
-      return { success: false, message: "Request failed" };
+    } catch (e) {
+      console.error("Error fetching leaves:", e);
     } finally {
-      setIsSubmitting(false);
+      setLoadingLeaves(false);
     }
   };
 
+  // Fetch adjustments data
+  const fetchAdjustments = async () => {
+    setLoadingAdjustments(true);
+    try {
+      const res: ApiResponse<AdjustmentItem[]> = await window.electron.getAdjustmentsList(projectSummary?.vaId);
+      if (res.success) {
+        setAdjustments(res.data || []);
+      }
+    } catch (err) {
+      console.error("Error fetching adjustments:", err);
+    } finally {
+      setLoadingAdjustments(false);
+    }
+  };
+
+  // Combined refresh function
+  const handleRefresh = async () => {
+    if (activeTab === "leave") {
+      await fetchLeaves();
+    } else {
+      await fetchAdjustments();
+    }
+    setLastRefreshed(new Date());
+  };
+
+  // Initial data fetch
+  useEffect(() => {
+    fetchLeaves();
+    fetchAdjustments();
+    setLastRefreshed(new Date());
+  }, []);
+
   return (
-    <div className="max-h-screen">
-      <div className="w-full mx-auto">
-        <h1 className="text-mb font-bold mb-2">Leave & Adjust Timesheet</h1>
-
-        {/* Tabs — Disabled while submitting */}
-        <div role="tablist" className="tabs tabs-border  w-full mb-1 opacity-100">
-          <a
-            role="tab"
-            className={`tab text-xs font-semibold ${activeTab === "pto" ? "tab-active text-primary" : ""
-              } ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
-            onClick={() => setActiveTab("pto")}
-          >
-            PTO Leave
-          </a>
-
-          <a
-            role="tab"
-            className={`tab text-xs font-semibold ${activeTab === "sick" ? "tab-active text-primary" : ""
-              } ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
-            onClick={() => setActiveTab("sick")}
-          >
-            Sick Leave
-          </a>
-
-          <a
-            role="tab"
-            className={`tab text-xs font-semibold ${activeTab === "adjustment" ? "tab-active text-primary" : ""
-              } ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
-            onClick={() => setActiveTab("adjustment")}
-          >
-            Adjustment Submission
-          </a>
-        </div>
-
-        {/* Main Container */}
-        <div className="rounded-lg bg-base-100 overflow-hidden">
-          <div className="px-8 py-4 overflow-y-auto no-scrollbar max-h-[81vh]">
-
-            {activeTab === "pto" && (
-              <PtoLeaveTab submitLeave={submitLeave} isSubmitting={isSubmitting} />
-            )}
-
-            {activeTab === "sick" && (
-              <SickLeaveTab submitLeave={submitLeave} isSubmitting={isSubmitting} />
-            )}
-
-            {activeTab === "adjustment" && (
-              <AdjustmentTab projects={projects} />
-            )}
-
-          </div>
-        </div>
+    <main
+      className="flex flex-col gap-2 overflow-hidden"
+    // style={{
+    //   height: isTracking ? "calc(100vh - 40px)" : "",
+    // }}
+    >
+      {/* Header */}
+      <div className="flex-none mb-2 flex justify-between items-center">
+        <h2 className="text-md font-bold">Leave & Adjust Timesheet</h2>
+        <button className="btn btn-xs btn-primary" onClick={handleApplyLeaveAndAdjust}>
+          Apply
+        </button>
       </div>
-    </div>
+
+      {/* Tabs */}
+      <div role="tablist" className="tabs tabs-bordered w-full">
+        <button
+          role="tab"
+          className={`tab ${activeTab === "leave" ? "tab-active border-b-2 border-primary" : ""}`}
+          onClick={() => setActiveTab("leave")}
+        >
+          Leave
+        </button>
+
+        <button
+          role="tab"
+          className={`tab ${activeTab === "adjustments" ? "tab-active border-primary border-b-2" : ""}`}
+          onClick={() => setActiveTab("adjustments")}
+        >
+          Adjustments
+        </button>
+      </div>
+
+      {/* TABLE AREA - Scrollable */}
+      <div className="flex-1 overflow-y-auto no-scrollbar">
+        {activeTab === "leave" && (
+          <LeaveTable
+            isTracking={isTracking}
+            leaves={leaves}
+            loading={loadingLeaves}
+            lastRefreshed={lastRefreshed}
+            onRefresh={handleRefresh}
+          />
+        )}
+        {activeTab === "adjustments" && (
+          <AdjustmentsTable
+            isTracking={isTracking}
+            adjustments={adjustments}
+            loading={loadingAdjustments}
+            lastRefreshed={lastRefreshed}
+            onRefresh={handleRefresh}
+          />
+        )}
+      </div>
+    </main>
   );
 };
 
-export default LeaveAndAdjustments;
+export default LeaveAndAdjustments;

src/ui/pages/LeaveAndAdjustments/LeaveTable.tsx

@@ -0,0 +1,184 @@
+import React from "react";
+import { Loader2, RefreshCw } from "lucide-react";
+import { DateTime } from "luxon";
+
+interface LeaveItem {
+  leaveId: string;
+  dateFrom: string;
+  dateTo: string;
+  totalDays: number;
+  leaveType: string;
+  comment: string;
+  status: string;
+  appliedOn: string;
+  reviewedAt: string | null;
+  rejectionReason: string | null;
+}
+
+interface LeaveTableProps {
+  isTracking: boolean;
+  leaves: LeaveItem[];
+  loading: boolean;
+  lastRefreshed: Date | null;
+  onRefresh: () => Promise<void>;
+}
+
+const LeaveTable: React.FC<LeaveTableProps> = ({ 
+  isTracking, 
+  leaves, 
+  loading, 
+  lastRefreshed,
+  onRefresh 
+}) => {
+  const [refreshing, setRefreshing] = React.useState(false);
+
+  // 🌍 Convert UTC → Local System Time
+  const toLocal = (utcString: string, format: string) => {
+    return DateTime.fromISO(utcString, { zone: "utc" })
+      .setZone(DateTime.local().zoneName)
+      .toFormat(format);
+  };
+
+  const formatDate = (d: string) => toLocal(d, "yyyy-MM-dd");
+  const formatDateTime = (d: string) => toLocal(d, "yyyy-MM-dd HH:mm:ss");
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    await onRefresh();
+    setRefreshing(false);
+  };
+
+  const renderSkeletonRows = () =>
+    Array.from({ length: 5 }).map((_, index) => (
+      <tr key={`skeleton-${index}`} className="hover:bg-base-200">
+        <td><div className="skeleton h-4 w-6 bg-base-300"></div></td>
+        <td><div className="skeleton h-4 w-20 bg-base-300"></div></td>
+        <td><div className="skeleton h-4 w-28 bg-base-300"></div></td>
+        <td><div className="skeleton h-4 w-16 bg-base-300"></div></td>
+        <td><div className="skeleton h-4 w-10 bg-base-300"></div></td>
+        <td><div className="skeleton h-4 w-24 bg-base-300"></div></td>
+      </tr>
+    ));
+
+  const formatLastRefreshed = () =>
+    lastRefreshed
+      ? DateTime.fromJSDate(lastRefreshed)
+          .setZone(DateTime.local().zoneName)
+          .toFormat("HH:mm:ss")
+      : "Never";
+
+  return (
+    <>
+      {/* Table Container */}
+      <div
+        className="flex-1 overflow-y-auto rounded-box border border-base-content/10 bg-base-100 shadow-md no-scrollbar"
+        style={{
+          height: isTracking ? "calc(100vh - 200px)" : "calc(100vh - 160px)",
+        }}
+      >
+        <table className="table table-zebra w-full text-[11px]">
+          <thead className="sticky top-0 bg-base-200 z-10 text-[12px]">
+            <tr className="text-center">
+              <th>#</th>
+              <th>Leave Type</th>
+              <th>Date From → To</th>
+              <th>Status</th>
+              <th>Total Days</th>
+              <th>Applied On</th>
+            </tr>
+          </thead>
+
+          <tbody className="text-center">
+            {loading ? (
+              renderSkeletonRows()
+            ) : refreshing && leaves.length === 0 ? (
+              renderSkeletonRows()
+            ) : leaves.length > 0 ? (
+              leaves.map((leave, index) => (
+                <tr key={leave.leaveId}>
+                  <td>{index + 1}</td>
+
+                  <td>
+                    <span className="badge badge-xs badge-primary">
+                      {leave.leaveType}
+                    </span>
+                  </td>
+
+                  <td className="whitespace-nowrap">
+                    <span className="">{formatDate(leave.dateFrom)} </span>
+                    → {" "}
+                    <span className="">{formatDate(leave.dateTo)}</span>
+                  </td>
+
+                  <td>
+                    <span
+                      className={`badge badge-xs ${
+                        leave.status === "PENDING"
+                          ? "badge-warning"
+                          : leave.status === "APPROVED"
+                          ? "badge-success"
+                          : "badge-error"
+                      }`}
+                    >
+                      {leave.status}
+                    </span>
+                  </td>
+
+                  <td>{leave.totalDays}</td>
+
+                  <td className="whitespace-nowrap">{formatDateTime(leave.appliedOn)}</td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={6} className="text-center py-4 text-base-content/50">
+                  No leaves found
+                </td>
+              </tr>
+            )}
+
+            {/* {!refreshing && leaves.length > 0 && (
+              <tr>
+                <td colSpan={6} className="bg-base-200/50">
+                  <div className="flex justify-center py-2">
+                    {renderSkeletonRows()}
+                  </div>
+                </td>
+              </tr>
+            )} */}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Footer */}
+      <div className="flex-none flex justify-between items-center text-xs mt-2">
+        <div className="text-base-content/60">
+          {leaves.length} leave{leaves.length !== 1 ? "s" : ""} found
+        </div>
+
+        <div className="flex items-center gap-4">
+          {lastRefreshed && (
+            <div className="text-xs text-base-content/60">
+              Last updated: {formatLastRefreshed()}
+            </div>
+          )}
+
+          <button
+            onClick={handleRefresh}
+            disabled={refreshing}
+            className="btn btn-xs btn-circle bg-warning"
+            title="Refresh Leaves"
+          >
+            {refreshing ? (
+              <Loader2 size={15} className="animate-spin text-base-content" />
+            ) : (
+              <RefreshCw size={15} className="text-base-content" />
+            )}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default LeaveTable;

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

@@ -4,6 +4,7 @@ import ReactQuill from 'react-quill-new';
 import { quillModules } from '../../../utils/quillConfig';
 import Quill from 'quill';
 import 'quill/dist/quill.snow.css';
+import { useNavigate } from 'react-router-dom';
 
 interface Project {
   projectId: string;
@@ -48,6 +49,7 @@ const AdjustmentTab: React.FC<AdjustmentTabProps> = ({ projects }) => {
   const [comment, setComment] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const quillRef = useRef<any>(null);
+  const navigate = useNavigate()
 
   // Field validation functions
   const validateProjectId = (projectId: string): string | undefined => {
@@ -323,6 +325,12 @@ const AdjustmentTab: React.FC<AdjustmentTabProps> = ({ projects }) => {
 
   useEffect(() => {
     if (selectedProjectId && selectedDate) {
+      setProjectSummary(null)
+      setStartTime("");
+      setEndTime("");
+      setComment("");
+      setFormErrors({});
+      setTotalAdjustment("0h 0m");
       fetchLogs();
     } else {
       setProjectSummary(null);
@@ -454,6 +462,7 @@ const AdjustmentTab: React.FC<AdjustmentTabProps> = ({ projects }) => {
         console.log("Timesheet Created Successfully");
         alert(res.message);
         resetForm();
+        navigate('/dashboard/leave-adjustments')
       } else {
         setFormErrors(prev => ({
           ...prev,
@@ -653,13 +662,8 @@ const AdjustmentTab: React.FC<AdjustmentTabProps> = ({ projects }) => {
           <button
             onClick={handleSubmit}
             disabled={isSubmitting}
-            className={`btn btn-primary flex-1 hover:shadow-lg transition-all duration-300 ${isSubmitting ? 'loading' : ''}`}
+            className={`btn btn-primary flex-1 hover:shadow-lg transition-all duration-300 `}
           >
-            {!isSubmitting && (
-              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-            )}
             {isSubmitting ? 'Submitting...' : 'Submit Request'}
           </button>
         </div>

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

@@ -4,6 +4,7 @@ import { quillModules } from "../../../utils/quillConfig";
 import ReactQuill from "react-quill-new";
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
+import { useNavigate } from "react-router-dom";
 
 interface LeaveFormData {
     fromDate: string;
@@ -23,6 +24,7 @@ const PtoLeaveTab: React.FC<{
     });
     const [serverError, setServerError] = useState("");
     const quillRef = useRef<any>(null);
+    const navigate = useNavigate()
 
     const [errors, setErrors] = useState<Partial<LeaveFormData>>({});
 
@@ -198,7 +200,8 @@ const PtoLeaveTab: React.FC<{
 
         if (result.success) {
             resetForm();
-            alert("PTO submitted!");
+            alert("PTO Request submitted!");
+            navigate('/dashboard/leave-adjustments')
         } else {
             setServerError(result.message || "Something went wrong");
         }
@@ -258,8 +261,8 @@ const PtoLeaveTab: React.FC<{
                             onChange={(val) => handleChange('comment', val)}
                             className="h-60"
                         />
-                        {errors.comment && <p className="text-error text-xs">{errors.comment}</p>}
                     </div>
+                        {errors.comment && <p className="text-error text-xs">{errors.comment}</p>}
                 </div>
 
                 {serverError && (

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

@@ -3,6 +3,7 @@ import { quillModules } from "../../../utils/quillConfig";
 import ReactQuill from "react-quill-new";
 import Quill from "quill";
 import "quill/dist/quill.snow.css"; // correct CSS
+import { useNavigate } from 'react-router-dom';
 
 interface LeaveFormData {
     fromDate: string;
@@ -22,6 +23,7 @@ const SickLeaveTab: React.FC<{
     const [serverError, setServerError] = useState("");
     const quillRef = useRef<any>(null);
     const [sickErrors, setSickErrors] = useState<Partial<LeaveFormData>>({});
+    const navigate = useNavigate()
 
     useEffect(() => {
         const editor = quillRef.current?.getEditor();
@@ -188,7 +190,8 @@ const SickLeaveTab: React.FC<{
 
         if (result.success) {
             resetForm();
-            alert("SICK submitted!");
+            alert("SICK leave applied!");
+            navigate('/dashboard/leave-adjustments')
         } else {
             setServerError(result.message || "Something went wrong");
         }

src/ui/pages/PaySlips/PaysSlips.tsx

@@ -0,0 +1,131 @@
+import { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store";
+
+const PaysSlips = () => {
+    const { projectSummary } =
+        useSelector((state: any) => state.projects);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [rows, setRows] = useState<any[]>([]);
+
+    useEffect(() => {
+    if (!projectSummary?.vaId) return; 
+
+    fetchPayslips(projectSummary?.vaId);
+
+}, [projectSummary?.vaId]);
+
+    const fetchPayslips = async (vaId: string) => {
+        setLoading(true);
+        setError(null);
+
+        try {
+            console.log("getPayslips" , vaId)
+            const result = await window.electron.getPayslips(vaId);
+
+            if (!result.success) {
+                setError(result.message || "Failed to load payslips");
+                return;
+            }
+
+            const response = result.data;
+
+            if (!response || response.length === 0) {
+                setRows([]);
+                return;
+            }
+
+            // Extract payrolls array from first index
+            const payrolls = response[0]?.payrolls || [];
+
+            setRows(payrolls);
+        } catch (err: any) {
+            setError("An unexpected error occurred");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <>
+            <div className="flex flex-col gap-2 max-h-screen">
+                <div className="flex items-center justify-between">
+                    <h2 className="text-md font-bold">Payslips</h2>
+                </div>
+
+                <div className="overflow-y-auto rounded-box border border-base-content/10 bg-base-100 shadow-md max-h-[80vh] min-h-[83vh] no-scrollbar">
+
+                    {loading && (
+                        <div className="flex justify-center py-10">
+                            <span className="loading loading-spinner loading-md"></span>
+                        </div>
+                    )}
+
+                    {error && (
+                        <div className="text-center text-red-500 py-5">{error}</div>
+                    )}
+
+                    {!loading && !error && rows.length === 0 && (
+                        <div className="text-center py-10 text-gray-500">
+                            No payslip data available.
+                        </div>
+                    )}
+
+                    {!loading && !error && rows.length > 0 && (
+                        <div className="overflow-x-auto w-full no-scrollbar">
+                            <table className="table table-zebra w-full text-[12px] min-w-[650px]">
+                                <thead className="sticky top-0 bg-base-200 z-10">
+                                    <tr>
+                                        <th>#</th>
+                                        <th>Status</th>
+                                        <th>Date</th>
+                                        <th>Total Hours</th>
+                                        <th>Total Pay</th>
+                                        <th>Action</th>
+                                    </tr>
+                                </thead>
+
+                                <tbody>
+                                    {rows.map((row, index) => (
+                                        <tr key={row.id}>
+                                            <td>{index + 1}</td>
+
+                                            <td>
+                                                <span
+                                                    className={`badge ${
+                                                        row.status === "Paid"
+                                                            ? "badge-success"
+                                                            : "badge-warning"
+                                                    }`}
+                                                >
+                                                    {row.status}
+                                                </span>
+                                            </td>
+
+                                            <td>{row.payrollSchedule}</td>
+
+                                            <td>{row.totalHoursFormatted}</td>
+
+                                            <td>${row.totalPayAmount.toFixed(2)}</td>
+
+                                            <td>
+                                                <button
+                                                    className="btn btn-xs btn-primary"
+                                                >
+                                                    View
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default PaysSlips;

src/ui/pages/Schedule/Schedule.tsx

@@ -1,70 +1,147 @@
+import React, { useEffect, useState } from "react";
+import { useOutletContext } from "react-router-dom";
+import { TrackingState } from "../../layout/DashboardLayout";
+import { RefreshCw, Loader2 } from "lucide-react";
+import { DateTime } from "luxon";
+
+interface ScheduleItem {
+    id: string;
+    isActive: boolean;
+    status: string | null;
+    ScheduleDate: string;
+    cutOffTime: string | null;
+    periodEnd: string | null;
+    periodStart: string | null;
+}
+
 const Schedule = () => {
-    const rows = [
-        {
-            period: "Oct 25, 2025 to Nov 07, 2025",
-            cutoff: "Nov 11, 2025 05:29:59 AM",
-            payDate: "Nov 14, 2025"
-        },
-        {
-            period: "Nov 08, 2025 to Nov 21, 2025",
-            cutoff: "Nov 25, 2025 05:29:59 AM",
-            payDate: "Nov 28, 2025"
-        },
-        {
-            period: "Nov 22, 2025 to Dec 05, 2025",
-            cutoff: "Dec 09, 2025 05:29:59 AM",
-            payDate: "Dec 12, 2025"
-        },
-        {
-            period: "Dec 06, 2025 to Dec 19, 2025",
-            cutoff: "Dec 23, 2025 05:29:59 AM",
-            payDate: "Dec 26, 2025"
-        },
-        {
-            period: "Dec 20, 2025 to Jan 02, 2026",
-            cutoff: "Jan 06, 2026 05:29:59 AM",
-            payDate: "Jan 09, 2026"
-        },
-        {
-            period: "Jan 03, 2026 to Jan 16, 2026",
-            cutoff: "Jan 20, 2026 05:29:59 AM",
-            payDate: "Jan 23, 2026"
-        },
-        {
-            period: "Jan 17, 2026 to Jan 30, 2026",
-            cutoff: "Feb 03, 2026 05:29:59 AM",
-            payDate: "Feb 06, 2026"
-        },
-        {
-            period: "Jan 31, 2026 to Feb 13, 2026",
-            cutoff: "Feb 17, 2026 05:29:59 AM",
-            payDate: "Feb 20, 2026"
-        },
-        {
-            period: "Feb 14, 2026 to Feb 27, 2026",
-            cutoff: "Mar 03, 2026 05:29:59 AM",
-            payDate: "Mar 06, 2026"
-        },
-        {
-            period: "Feb 28, 2026 to Mar 13, 2026",
-            cutoff: "Mar 17, 2026 05:29:59 AM",
-            payDate: "Mar 20, 2026"
+    const { isTracking } = useOutletContext<TrackingState>();
+
+    const [rows, setRows] = useState<ScheduleItem[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [refreshing, setRefreshing] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    //   const [lastUpdated, setLastUpdated] = useState<DateTime | null>(null);
+    const [lastRefreshed, setLastRefreshed] = useState<Date | null>(null);
+
+    /** Format:  Only Date */
+    const formatOnlyDate = (input: string | null) => {
+        if (!input) return "-";
+        return DateTime.fromISO(input).toLocaleString(DateTime.DATE_MED);
+    };
+
+    /** Format:  Date + Time */
+    const formatDateTime = (input: string | null) => {
+        if (!input) return "-";
+        return DateTime.fromISO(input).toLocaleString(DateTime.DATETIME_MED);
+    };
+
+    /** Fetch Data */
+    const fetchSchedules = async () => {
+        setRefreshing(true);
+         setLoading(true);
+        try {
+            const res = await window.electron.getSchedules();
+
+            if (!res.success) {
+                setError(res.message || "Failed to load schedules");
+                return;
+            }
+
+            setRows(res.result || []);
+            setLastRefreshed(new Date());
+        } catch (err: any) {
+            setError(err.message || "Unexpected error");
+        } finally {
+            setLoading(false);
+            setRefreshing(false);
         }
-    ];
+    };
+
+    /** Refresh Button */
+    const handleRefresh = async () => {
+        
+        await fetchSchedules();
+    };
+
+    useEffect(() => {
+        fetchSchedules();
+    }, []);
+
+    /** Determine Active Period */
+    const isActiveRow = (row: ScheduleItem) => {
+        if (!row.periodStart || !row.periodEnd) return false;
+
+        const now = DateTime.local();
+        const start = DateTime.fromISO(row.periodStart).startOf("day");
+        const end = DateTime.fromISO(row.periodEnd).endOf("day");
+
+        return now >= start && now <= end;
+    };
+
+    const activeSchedule = rows.find((r) => isActiveRow(r));
+
+    /** Skeleton Rows */
+    const renderSkeletonRows = () =>
+        Array.from({ length: 5 }).map((_, idx) => (
+            <tr key={`sk-${idx}`}>
+                <td><div className="skeleton h-4 w-6"></div></td>
+                <td><div className="skeleton h-4 w-32"></div></td>
+                <td><div className="skeleton h-4 w-28"></div></td>
+                <td><div className="skeleton h-4 w-20"></div></td>
+            </tr>
+        ));
+
+    const formatLastRefreshed = () => {
+        if (!lastRefreshed) return "Never";
+
+        return DateTime.fromJSDate(lastRefreshed)
+            .toLocal()
+            .toFormat("HH:mm:ss"); // Only time
+    };
 
     return (
-        <>
-            <div className="flex flex-col gap-2 max-h-screen">
-                {/* Header */}
-                <div className="flex items-center justify-between">
-                    <h2 className="text-md font-bold">Schedules</h2>
+        <main
+            className="flex flex-col gap-2 overflow-hidden"
+            style={{
+                height: isTracking ? "calc(100vh - 80px)" : "calc(100vh - 24px)",
+            }}
+        >
+            {/* HEADER */}
+            <div className="flex justify-between items-center">
+                <h2 className="text-md font-bold">Schedules</h2>
+
+                <div className="flex items-center gap-3">
+                    {activeSchedule && (
+                        <div className="px-2 py-1 bg-primary text-primary-content rounded-lg text-xs">
+                            Pay Date: <b>{formatOnlyDate(activeSchedule.ScheduleDate)}</b>
+                        </div>
+                    )}
+
                 </div>
+            </div>
 
-                <div className="overflow-y-auto rounded-box border border-base-content/10 bg-base-100 shadow-md max-h-[80vh] min-h-[83vh] no-scrollbar">
-
-                    {/* ⭐ FIXED: Horizontal scroll wrapper */}
-                    <div className="overflow-x-auto w-full no-scrollbar">
-                        <table className="table table-zebra w-full text-[12px] min-w-[600px]">
+            {/* TABLE WRAPPER */}
+            <div
+                className="flex-1 overflow-y-auto rounded-box border border-base-content/10 bg-base-100 shadow-md no-scrollbar"
+                style={{
+                    height: isTracking ? "calc(100vh - 180px)" : "calc(100vh - 130px)",
+                }}
+            >
+                {/* Loading */}
+                {loading ? (
+                    <table className="table w-full text-[12px]">
+                        <tbody>{renderSkeletonRows()}</tbody>
+                    </table>
+                ) : error ? (
+                    <div className="text-center text-red-500 py-8">{error}</div>
+                ) : rows.length === 0 ? (
+                    <div className="text-center py-8 text-base-content/50">
+                        No schedules found
+                    </div>
+                ) : (
+                    <div className="overflow-x-auto no-scrollbar">
+                        <table className="table w-full text-[12px] min-w-[600px]">
                             <thead className="sticky top-0 bg-base-200 z-10">
                                 <tr>
                                     <th>#</th>
@@ -76,24 +153,61 @@ const Schedule = () => {
 
                             <tbody>
                                 {rows.map((row, index) => (
-                                    <tr key={index}>
+                                    <tr
+                                        key={row.id}
+                                        className={
+                                            isActiveRow(row)
+                                                ? "bg-primary text-primary-content font-semibold"
+                                                : ""
+                                        }
+                                    >
                                         <td>{index + 1}</td>
-                                        <td>{row.period}</td>
                                         <td>
-                                            {row.cutoff}
-                                            <br />
-                                            <span className="text-gray-500 text-[11px]">(Asia/Calcutta)</span>
+                                            {formatOnlyDate(row.periodStart)} →{" "}
+                                            {formatOnlyDate(row.periodEnd)}
                                         </td>
-                                        <td>{row.payDate}</td>
+                                        <td>{formatDateTime(row.cutOffTime)}</td>
+                                        <td>{formatOnlyDate(row.ScheduleDate)}</td>
                                     </tr>
                                 ))}
+
+                                {refreshing && (
+                                    <tr>
+                                        <td colSpan={4} className="bg-base-200/40 text-center py-2">
+                                            <Loader2 className="animate-spin inline mr-2" size={16} />
+                                            Refreshing...
+                                        </td>
+                                    </tr>
+                                )}
                             </tbody>
                         </table>
                     </div>
+                )}
+            </div>
 
+            {/* FOOTER */}
+            <div className="flex justify-between items-center text-xs text-base-content/60 mt-2">
+                <div>{rows.length} schedules found</div>
+
+
+                <div className="">
+                    {lastRefreshed &&
+                        `Last updated: ${formatLastRefreshed()}`}
+                <button
+                    onClick={handleRefresh}
+                    disabled={refreshing}
+                    className="ms-2 btn btn-xs btn-circle bg-warning"
+                    title="Refresh schedule"
+                >
+                    {refreshing ? (
+                        <Loader2 size={14} className="animate-spin text-base-content" />
+                    ) : (
+                        <RefreshCw size={14} className="text-base-content" />
+                    )}
+                </button>
                 </div>
             </div>
-        </>
+        </main>
     );
 };
 

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

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from "react";
+import { CreditCard } from "lucide-react";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "../../../store";
+
+interface ChangePaymentModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ChangePaymentModal: React.FC<ChangePaymentModalProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const dispatch = useDispatch();
+  const { profile } = useSelector((state: RootState) => state.profile);
+
+  const [method, setMethod] = useState(profile?.paymentMethod || "");
+  const [wiseEmail, setWiseEmail] = useState(profile?.wiseEmail || "");
+  const [veemAccount, setVeemAccount] = useState(profile?.veemAccount || "");
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (isOpen) {
+      setMethod(profile?.paymentMethod || "");
+      setWiseEmail(profile?.wiseEmail || "");
+      setVeemAccount(profile?.veemAccount || "");
+      setError("");
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async () => {
+    setError("");
+
+    // Validation
+    if (!method) {
+      return setError("Please select a payment method.");
+    }
+
+    if (method === "wise" && !wiseEmail.trim()) {
+      return setError("Wise email is required.");
+    }
+
+    if (method === "wise" && !/^\S+@\S+\.\S+$/.test(wiseEmail)) {
+      return setError("Enter a valid Wise email.");
+    }
+
+    if (method === "veem" && !veemAccount.trim()) {
+      return setError("Veem account number is required.");
+    }
+
+    setLoading(true);
+
+    // try {
+    //   // Replace with your electron API
+    //   await window.electron.updatePayment({
+    //     method,
+    //     wiseEmail: method === "wise" ? wiseEmail.trim() : "",
+    //     veemAccount: method === "veem" ? veemAccount.trim() : "",
+    //   });
+
+    //   // Refresh or update Redux
+    //   // dispatch(updateProfile({...}));
+
+    //   onClose();
+    // } catch (err) {
+    //   setError("Failed to update payment info. Try again.");
+    // }
+
+    setLoading(false);
+  };
+
+  return (
+    <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">
+          <CreditCard size={18} /> Change Payment Method
+        </h3>
+
+        {/* Error */}
+        {error && (
+          <div className="alert alert-error py-2 text-xs mb-3">{error}</div>
+        )}
+
+        {/* Dropdown */}
+        <div className="form-control mb-4">
+          <label className="label">
+            <span className="text-sm font-medium">Payment Method</span>
+          </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

@@ -1,13 +1,15 @@
 
 import React, { useState } from "react";
-import { User, Mail, Phone, Calendar, MapPin, CreditCard, Globe, Lock } from "lucide-react";
+import { User, Mail, Phone, Calendar, MapPin, CreditCard, Globe, Lock, SquarePen } from "lucide-react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../store";
 import ChangePasswordModal from "./ChangePasswordModal";
+import ChangePaymentModal from "./SettingModal/ChangePaymentModal";
 
 const Settings: React.FC = () => {
   const { profile } = useSelector((state: RootState) => state.profile);
   const [modalOpen, setModalOpen] = useState(false);
+  const [showPaymentModal,setShowPaymentModal] = useState(false)
 
   const fullName = `${profile?.firstName || ""} ${profile?.lastName || ""}`.trim();
 
@@ -82,32 +84,33 @@ const Settings: React.FC = () => {
               </p>
             </div>
 
-            <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">
-                💬 Skype
-              </p>
-              <p className="text-xs font-medium truncate" title={profile?.skype || "Not Linked"}>
-                {profile?.skype || "Not Linked"}
-              </p>
-            </div>
 
             {/* Payment Info */}
-            <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">
-                <CreditCard size={11} /> Payment
-              </p>
-              <p className="text-xs font-medium capitalize truncate">
-                {profile?.paymentMethod || "N/A"}
-              </p>
+            <div
+              className=" p-2 rounded bg-base-200/40 cursor-pointer hover:text-primary transition-all duration-200 ease-in-out hover:scale-[1.02] active:scale-[0.98] " onClick={() => setShowPaymentModal(true)}>
+              <div className="flex justify-between items-center">
+                <div>
+                  <p className="text-xs text-base-content/60 flex items-center gap-1 mb-0.5">
+                    <CreditCard size={11} /> Payment
+                  </p>
+                  <p className="text-xs font-medium capitalize truncate">
+                    {profile?.paymentMethod || "N/A"}
+                  </p>
+                </div>
+                <span>
+                  <SquarePen size={15} />
+                </span>
+              </div>
             </div>
 
-            {profile?.paymentMethod === "payoneer" && (
+
+            {profile?.paymentMethod === "wise" && (
               <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">
-                  💳 Payoneer
+                  💳 Wise
                 </p>
                 <p className="text-xs font-medium truncate" title={profile?.payoneerAccount || "N/A"}>
-                  {maskLast5(profile?.payoneerAccount)}
+                  {maskLast5(profile?.wiseEmail)}
                 </p>
               </div>
             )}
@@ -137,8 +140,9 @@ const Settings: React.FC = () => {
           </div>
         </div>
       </div>
-      {/* Change Password Modal */}
+      {/* Modal */}
       <ChangePasswordModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
+      <ChangePaymentModal isOpen={showPaymentModal} onClose={() => setShowPaymentModal(false)} />
     </div>
   );
 };

src/ui/pages/Timesheets/ProjectLogsModal.tsx

@@ -95,3 +95,4 @@ const ProjectLogsModal: React.FC<Props> = ({ isOpen, onClose, projectName, logs,
 };
 
 export default ProjectLogsModal;
+

src/ui/pages/Timesheets/Timesheets.tsx

@@ -1,8 +1,22 @@
 import React, { useEffect, useState } from "react";
-import { CalendarDays, Clock, FileText, CheckCircle, XCircle, Eye, EyeOff } from "lucide-react";
+import {
+  CalendarDays,
+  Clock,
+  FileText,
+  CheckCircle,
+  XCircle,
+  Eye,
+  EyeOff,
+  RefreshCw,
+  Loader2
+} from "lucide-react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../store";
 import ProjectLogsModal from "./ProjectLogsModal";
+import { TrackingState } from "../../layout/DashboardLayout";
+import { useOutletContext } from "react-router-dom";
+import { DateTime } from "luxon";
+
 
 interface TimesheetEntry {
   id: number;
@@ -28,48 +42,83 @@ interface Project {
   totalWorkTime: string;
   totalWorkMs: number;
   totalLogs: number;
-  status:string
+  status: string
 }
 
 const Timesheets: React.FC = () => {
+  const { isTracking } = useOutletContext<TrackingState>();
   const totalHours = timesheetData.reduce((acc, t) => acc + t.hours, 0);
   const approvedCount = timesheetData.filter((t) => t.status === "Approved").length;
 
   const { windowLogs } = useSelector((state: RootState) => state.window);
 
-  console.log("🧾 Timesheet in component:", windowLogs);
+  console.log(" Timesheet in component:", windowLogs);
   const [projectsData, setProjectsData] = useState<Project[]>([]);
   const [logs, setLogs] = useState([]);
   const [selectedProject, setSelectedProject] = useState<string | null>(null);
   const [selectedProjectName, setSelectedProjectName] = useState<string>("");
   const [modalOpen, setModalOpen] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [lastRefreshed, setLastRefreshed] = useState<Date | null>(null);
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [tick, setTick] = useState(0);
+
+  const activeProjects = projectsData.filter(p => p.status === "ACTIVE");
+
 
   useEffect(() => {
-    const fetchProjects = async () => {
-      try {
-        console.log("📡 Fetching projects...");
-        const res = await window.electron.getProjectList();
-        console.log("✅ Project list response:", res);
+    const interval = setInterval(() => {
+      setTick((t) => t + 1); // force re-render every second
+    }, 1000);
 
-        if (res?.success && Array.isArray(res.data)) {
-          // Store project list
-          setProjectsData(res.data);
-        } else {
-          console.warn(" Unexpected response:", res);
-        }
-      } catch (err) {
-        console.error("Error fetching projects:", err);
+    return () => clearInterval(interval);
+  }, []);
+
+  const formatLastRefreshed = () => {
+    if (!lastRefreshed) return "Never";
+
+    return DateTime.fromJSDate(lastRefreshed)
+      .toLocal()
+      .toFormat("HH:mm:ss"); // Only time
+  };
+
+
+
+  const fetchProjects = async () => {
+    setInitialLoading(true);
+    try {
+      console.log("📡 Fetching projects...");
+      const res = await window.electron.getProjectList();
+      console.log("✅ Project list response:", res);
+
+      if (res?.success && Array.isArray(res.data)) {
+        // Store project list
+        setProjectsData(res.data);
+        setLastRefreshed(new Date());
+      } else {
+        console.warn(" Unexpected response:", res);
       }
-    };
+    } catch (err) {
+      console.error("Error fetching projects:", err);
+    } finally {
+      setInitialLoading(false);
+      setRefreshing(false);
+    }
+  };
 
+  useEffect(() => {
     fetchProjects();
   }, []);
 
-
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    await fetchProjects();
+  };
 
   const handleViewLogs = async (projectID: string, projectName: string) => {
     try {
+      setModalOpen(true);
       setLoading(true);
       setSelectedProject(projectID);
       setSelectedProjectName(projectName);
@@ -85,11 +134,13 @@ const Timesheets: React.FC = () => {
         setLogs([]);
       }
 
-      setModalOpen(true);
+
     } catch (error) {
       console.error("Error fetching logs:", error);
+      setModalOpen(false)
     } finally {
       setLoading(false);
+
     }
   };
 
@@ -105,54 +156,49 @@ const Timesheets: React.FC = () => {
 
 
 
+
+
+  // Skeleton loader rows
+  const renderSkeletonRows = () => {
+    return Array.from({ length: 5 }).map((_, index) => (
+      <tr key={`skeleton-${index}`} className="hover:bg-base-200">
+        <td>
+          <div className="skeleton h-4 w-6 bg-base-300"></div>
+        </td>
+        <td>
+          <div className="skeleton h-4 w-32 bg-base-300"></div>
+        </td>
+        <td>
+          <div className="skeleton h-4 w-16 bg-base-300"></div>
+        </td>
+        <td>
+          <div className="skeleton h-8 w-8 rounded bg-base-300"></div>
+        </td>
+      </tr>
+    ));
+  };
+
   return (
-    <div className="flex flex-col gap-2 max-h-screen">
+    <main
+      className="flex flex-col gap-2 overflow-hidden"
+      style={{
+        height: isTracking ? "calc(100vh - 80px)" : "calc(100vh - 24px)",
+      }}
+    >
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <h2 className="text-md font-bold">Timesheets</h2>
-        </div>
+      <div className="flex-none mb-2 flex justify-between items-center">
+        <h2 className="text-md font-bold">Timesheets</h2>
       </div>
 
-      {/* Summary Cards */}
-      {/* <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-        <div className="card bg-base-100 border border-base-300 shadow-sm">
-          <div className="card-body py-3 px-4 flex flex-row items-center justify-between">
-            <div>
-              <p className="text-xs text-base-content/70">Total Logged Hours</p>
-              <h3 className="text-lg font-semibold">{totalHours} hrs</h3>
-            </div>
-            <Clock size={20} className="text-primary" />
-          </div>
-        </div>
-
-        <div className="card bg-base-100 border border-base-300 shadow-sm">
-          <div className="card-body py-3 px-4 flex flex-row items-center justify-between">
-            <div>
-              <p className="text-xs text-base-content/70">Approved Days</p>
-              <h3 className="text-lg font-semibold">{approvedCount}</h3>
-            </div>
-            <CheckCircle size={20} className="text-success" />
-          </div>
-        </div>
-
-        <div className="card bg-base-100 border border-base-300 shadow-sm">
-          <div className="card-body py-3 px-4 flex flex-row items-center justify-between">
-            <div>
-              <p className="text-xs text-base-content/70">Pending Days</p>
-              <h3 className="text-lg font-semibold">
-                {timesheetData.length - approvedCount}
-              </h3>
-            </div>
-            <FileText size={20} className="text-warning" />
-          </div>
-        </div>
-      </div> */}
-
       {/* Timesheet Table */}
-      <div className="overflow-y-auto rounded-box border border-base-content/10 bg-base-100 shadow-md max-h-[80vh] min-h-[83vh]">
-        <table className="table table-zebra w-full  text-[12px]">
-          <thead className="sticky top-0 bg-base-200 z-10 ">
+      <div
+        className="flex-1 overflow-y-auto rounded-box border border-base-content/10 bg-base-100 shadow-md"
+        style={{
+          height: isTracking ? "calc(100vh - 180px)" : "calc(100vh - 130px)",
+        }}
+      >
+        <table className="table table-zebra w-full text-[12px]">
+          <thead className="sticky top-0 bg-base-200 z-10">
             <tr>
               <th>#</th>
               <th>Project</th>
@@ -161,34 +207,83 @@ const Timesheets: React.FC = () => {
             </tr>
           </thead>
           <tbody>
-            {projectsData.map((entry, index) => (
-              <tr key={entry.projectId} className={`${entry.status ==='INACTIVE' && 'hidden'}`}>
-                <td>{index + 1}</td>
-                <td>{entry.projectName}</td>
-                <td>{formatWorkTime(entry.totalWorkTime)}</td>
-                <td>
-                  <button
-                    disabled={formatWorkTime(entry.totalWorkTime) === "0h 0m"}
-                    onClick={() => handleViewLogs(entry.projectId, entry.projectName)}
-                    className="btn btn-ghost btn-xs"
-                  >
-                    {formatWorkTime(entry.totalWorkTime) === "0h 0m" ? <EyeOff size={16} /> : <Eye size={16} />}
-                  </button>
+            {initialLoading ? (
+              // Show skeleton while initially loading
+              renderSkeletonRows()
+            ) : refreshing && projectsData.length === 0 ? (
+              // Show skeleton while refreshing with empty data
+              renderSkeletonRows()
+            ) : (
+              // Show actual data
+              projectsData.map((entry, index) => (
+                <tr
+                  key={entry.projectId}
+                  className={`${entry.status === "INACTIVE" && "hidden"}`}
+                >
+                  <td>{index + 1}</td>
+                  <td>{entry.projectName}</td>
+                  <td>{formatWorkTime(entry.totalWorkTime)}</td>
+                  <td>
+                    <button
+                      disabled={formatWorkTime(entry.totalWorkTime) === "0h 0m"}
+                      onClick={() =>
+                        handleViewLogs(entry.projectId, entry.projectName)
+                      }
+                      className="btn btn-ghost btn-xs"
+                    >
+                      {formatWorkTime(entry.totalWorkTime) === "0h 0m" ? (
+                        <EyeOff size={16} />
+                      ) : (
+                        <Eye size={16} />
+                      )}
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+
+            {/* {refreshing && projectsData.length > 0 && (
+              // Show a single skeleton row at the top while refreshing with existing data
+              <tr>
+                <td colSpan={4} className="bg-base-200/50">
+                  <div className="flex justify-center py-2">
+                    <Loader2 size={20} className="animate-spin" />
+                    <span className="ml-2 text-sm">Refreshing...</span>
+                  </div>
                 </td>
               </tr>
-            ))}
+            )} */}
           </tbody>
         </table>
       </div>
 
       {/* Footer Summary */}
-      <div className="flex justify-end items-center text-xs mt-2">
-        {/* <span className="text-base-content/60">
-          Showing {timesheetData.length} entries
-        </span> */}
-        <span className="text-base-content/60">
-          Last updated: {new Date().toLocaleDateString()}
-        </span>
+      <div className="flex-none flex justify-between items-center text-xs mt-2">
+        <div className="text-base-content/60">
+          {activeProjects.length} project{activeProjects.length !== 1 ? 's' : ''} shown
+        </div>
+
+        <div className="flex items-center gap-4">
+          {lastRefreshed && (
+            <div className="text-xs text-base-content/60">
+              Last updated: {formatLastRefreshed()}
+            </div>
+          )}
+
+          <button
+            onClick={handleRefresh}
+            disabled={refreshing}
+            className="btn btn-xs btn-circle bg-warning"
+            title="Refresh projects"
+          >
+            {refreshing ? (
+              <Loader2 size={15} className="animate-spin text-base-content" />
+            ) : (
+              <RefreshCw size={15} className="text-base-content" />
+            )}
+          </button>
+
+        </div>
       </div>
 
       <ProjectLogsModal
@@ -198,8 +293,8 @@ const Timesheets: React.FC = () => {
         logs={logs}
         loading={loading}
       />
-    </div>
+    </main>
   );
 };
 
-export default Timesheets;
+export default Timesheets;

src/ui/store/profileSlice.tsx

@@ -19,6 +19,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
   paymentMethod:string;
   payoneerAccount:string;
   veemAccount:string;
+  wiseEmail:string
   _id: string;
 }
 

types.d.ts

@@ -83,6 +83,7 @@ interface ProfileData {
   paymentMethod: string;
   payoneerAccount: string;
   veemAccount: string;
+  wiseEmail: string
   _id: string;
 }
 
@@ -92,6 +93,36 @@ type LeaveRequestResponse = {
   message?: string;
 };
 
+interface ScheduleItem {
+  id: string;
+  isActive: boolean;
+  status: string | null;
+  ScheduleDate: string;
+  cutOffTime: string | null;
+  periodEnd: string | null;
+  periodStart: string | null;
+}
+
+
+interface PayslipItem {
+  totalHoursFormatted: string;
+  payrollSchedule: string;
+  totalPayAmount: number;
+  status: string;
+  date: string | null;
+  createdDate: string;
+  name: string;
+  id: string;
+}
+
+interface PayslipResponse {
+  payrolls: PayslipItem[];
+  vaPortalId: string;
+  vaName: string;
+  id: string;
+}
+
+
 interface Window {
   electron: {
     login: (credentials: { email: string; password: string }) => Promise<any>;
@@ -174,9 +205,25 @@ interface Window {
       payload: LeaveRequestPayload
     ) => Promise<LeaveRequestResponse>;
 
-    
+    getSchedules: () => Promise<any>;
+
+    getPayslips: (vaId: string) => Promise<{
+      success: boolean;
+      data?: PayslipResponse[];
+      message?: string;
+    }>;
+
+    getLeaveList: () => Promise<{
+      success: boolean;
+      data?: any;
+    }>;
+
+    getAdjustmentsList: (vaId: string) => Promise<{
+      success: boolean;
+      data?: any;
+    }>;
   };
-  
+
 }