forget password

src/electron/ipc/ipcHandler.ts

@@ -82,7 +82,7 @@ ipcMain.handle("get-project-list", async () => {
 
     // console.log(" API /list/project response:", res);
 
-    // ✅ Return only serializable data
+    //  Return only serializable data
     return JSON.parse(JSON.stringify(res));
   } catch (error: any) {
     console.error(" get-project-list error:", error);
@@ -180,7 +180,7 @@ ipcMain.handle("get-project-logs", async (event, { projectID, fromDate, toDate }
 
     let url = `/report/project/${projectID}`;
 
-    console.log("url" , url)
+    
 
     // 🧠 Append query params only if dates are provided
     if (fromDate && toDate) {
@@ -191,6 +191,8 @@ ipcMain.handle("get-project-logs", async (event, { projectID, fromDate, toDate }
       url += `?${params.toString()}`;
     }
 
+    console.log("url" , url)
+
     const response = await api.get(url);
     console.log("✅ response-logs:", response);
 
@@ -201,3 +203,18 @@ ipcMain.handle("get-project-logs", async (event, { projectID, fromDate, toDate }
   }
 });
 
+ipcMain.handle("forgot-password", async (event, email: string) => {
+  try {
+    const response = await api.post("/forgot-password", { email });
+    console.log(response , "Line response")
+    if (response) {
+      return { success: true, message: response.data?.message };
+    }
+  } catch (error: any) {
+    console.error("Forgot password error:", error.response?.data || error.message);
+    return {
+      success: false,
+      message: error.response?.data?.message || "Something went wrong",
+    };
+  }
+});

src/electron/main.ts

@@ -90,6 +90,8 @@ function handleCloseEvents(mainWindow: BrowserWindow) {
   });
 }
 
+
+
 export function getMainWindow() {
   return mainWindow;
 }

src/electron/preload.cts

@@ -5,6 +5,7 @@ console.log("setting PreLoad")
 contextBridge.exposeInMainWorld('electron', {
   login: (credentials: { email: string, password: string }) => ipcRenderer.invoke('login-request', credentials),
   logout: () => ipcRenderer.invoke('logout-request'),
+  forgotPassword: (email: string) => ipcRenderer.invoke("forgot-password", email),
   getToken: (TOKEN_KEY: "ACCESS_TOKEN" | "REFRESH_TOKEN") => ipcRenderer.invoke('get-token', TOKEN_KEY),
   uploadScreenshot: () => ipcRenderer.invoke('upload-screenshot'),
   getActiveAppDetails: () => ipcRenderer.invoke('get-active-app'),

src/ui/App.tsx

@@ -1,46 +1,38 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect } from "react";
 import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "./store";
+import { loadUserFromStorage } from "./store/userSlice";
+
 import Login from "./pages/Login";
 import Dashboard from "./pages/Dashboard";
 import Projects from "./pages/Projects/Projects";
 import DashboardLayout from "./layout/DashboardLayout";
-import ProtectedRoute from "./routes/ProtectedRoute"
+import ProtectedRoute from "./routes/ProtectedRoute";
 import PublicRoute from "./routes/PublicRoute";
-import { ThemeToggle } from "./helper/ThemeToggle"
+import { ThemeToggle } from "./helper/ThemeToggle";
 import LeaveAndAdjustments from "./pages/LeaveAndAdjustments/LeaveAndAdjustments";
 import Timesheets from "./pages/Timesheets/Timesheets";
 import Settings from "./pages/Settings/Settings";
 import HelpSupport from "./pages/HelpSupport/HelpSupport";
 
-interface User {
-  email: string;
-  password: string;
-}
-
-
 const App: React.FC = () => {
   const theme = ThemeToggle();
-  const [user, setUser] = useState<User | null>(null);
+  const dispatch = useDispatch<AppDispatch>();
 
+  // ✅ Get user directly from Redux
+  const user = useSelector((state: RootState) => state.user.user);
 
-  // Apply theme
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
 
-  // Load user from localStorage
+  // ✅ Load user from localStorage into Redux when app starts
   useEffect(() => {
-    const storedUser = localStorage.getItem("user");
+    dispatch(loadUserFromStorage());
-    if (storedUser) {
+  }, [dispatch]);
-      try {
-        setUser(JSON.parse(storedUser));
-      } catch (err) {
-        console.error("Invalid user in localStorage", err);
-      }
-    }
-  }, []);
-
 
+  console.log("App.tsx → user:", user);
 
   return (
     <BrowserRouter>
@@ -50,7 +42,7 @@ const App: React.FC = () => {
           path="/login"
           element={
             <PublicRoute user={user}>
-              <Login setUser={setUser} />
+              <Login />
             </PublicRoute>
           }
         />
@@ -60,7 +52,7 @@ const App: React.FC = () => {
           path="/dashboard"
           element={
             <ProtectedRoute user={user}>
-              <DashboardLayout user={user} setUser={setUser} />
+              <DashboardLayout />
             </ProtectedRoute>
           }
         >

src/ui/layout/DashboardLayout.tsx

@@ -28,10 +28,17 @@ import { useActiveAppTracker } from "../hooks/useActiveAppTracker";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../store";
 import { setProjectsDataSlice, setProjectSummarySlice, setSelectedProjectSlice } from "../store/projectSlice";
+import { clearUser } from "../store/userSlice";
+
+// interface User {
+//   email: string;
+//   password: string;
+// }
 
 interface User {
+  id: string;
+  name: string;
   email: string;
-  password: string;
 }
 
 // Updated Project interface to match the JSON structure
@@ -70,12 +77,7 @@ export interface TrackingState {
   projectsData: Project[];
 }
 
-interface DashboardLayoutProps {
+const DashboardLayout = () => {
-  user: User | null;
-  setUser: React.Dispatch<React.SetStateAction<User | null>>;
-}
-
-const DashboardLayout: React.FC<DashboardLayoutProps> = ({ setUser }) => {
   const [isSidebarOpen, setSidebarOpen] = useState(true);
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
   const navigate = useNavigate();
@@ -167,23 +169,28 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ setUser }) => {
             setSelectedProject(firstProject);
             dispatch(setSelectedProjectSlice(firstProject));
 
+            // Convert totalWorkMs to seconds for elapsedTime
+            const initialElapsedTime = Math.floor(firstProject.totalWorkMs / 1000);
+
             // Initialize tracking map for that project
             setProjectTrackingMap((prev) => {
               const updated = new Map(prev);
               if (!updated.has(firstProject.projectId)) {
                 updated.set(firstProject.projectId, {
-                  elapsedTime: 0,
+                  elapsedTime:initialElapsedTime,
                   startTime: null,
                   endTime: null,
                   isTracking: false,
                   isPaused: false,
                   pauseStartTime: null,
                   totalPausedTime: 0,
-                  accumulatedTime: 0,
+                  accumulatedTime: initialElapsedTime,
                 });
               }
               return updated;
             });
+            // Set the initial elapsed time in the component state
+            setElapsedTime(initialElapsedTime);
           }
         } else {
           console.warn("⚠️ Unexpected response:", res);
@@ -202,13 +209,15 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ setUser }) => {
 
   const handleLogout = async () => {
     try {
-      const res = await window.electron.logout();
+    const res = await window.electron.logout();
-      localStorage.removeItem("user");
+    if (res) {
-      setUser(null);
+      dispatch(clearUser()); // ✅ Removes from Redux + localStorage
       navigate("/login");
-    } catch (error) {
-      console.error("Logout error:", error);
     }
+  } catch (error) {
+    console.error("Logout error:", error);
+  }
+
   };
 
   // Sync global states with selected project tracking data
@@ -432,28 +441,52 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ setUser }) => {
 
   // Handle project selection
   const handleProjectSelect = (projectId: string) => {
-    if (isTracking) return;
+  if (isTracking) return; // prevent switching while tracking
 
-    const project = projectsData.find((p) => p.projectId === projectId);
+  const project = projectsData.find((p) => p.projectId === projectId);
-    if (project) {
+  if (!project) return;
-      setSelectedProject(project);
 
-      const projectData = projectTrackingMap.get(projectId);
+  setSelectedProject(project);
-      if (projectData) {
+  dispatch(setSelectedProjectSlice(project));
-        setElapsedTime(projectData.elapsedTime);
+
-        setStartTime(projectData.startTime);
+  const existingData = projectTrackingMap.get(projectId);
-        setEndTime(projectData.endTime);
+
-        setIsTracking(projectData.isTracking);
+  setProjectTrackingMap((prev) => {
-        setIsPaused(projectData.isPaused);
+    const updated = new Map(prev);
-      } else {
+
-        setElapsedTime(0);
+    // If project is not yet tracked, initialize it with totalWorkMs
-        setStartTime(null);
+    if (!existingData) {
-        setEndTime(null);
+      const initialElapsedTime = Math.floor((project.totalWorkMs || 0) / 1000);
-        setIsTracking(false);
+      updated.set(projectId, {
-        setIsPaused(false);
+        elapsedTime: initialElapsedTime,
-      }
+        startTime: null,
+        endTime: null,
+        isTracking: false,
+        isPaused: false,
+        pauseStartTime: null,
+        totalPausedTime: 0,
+        accumulatedTime: initialElapsedTime,
+      });
+
+      // Update component-level state
+      setElapsedTime(initialElapsedTime);
+      setStartTime(null);
+      setEndTime(null);
+      setIsTracking(false);
+      setIsPaused(false);
+    } else {
+      // If already tracked, restore its state
+      setElapsedTime(existingData.elapsedTime);
+      setStartTime(existingData.startTime);
+      setEndTime(existingData.endTime);
+      setIsTracking(existingData.isTracking);
+      setIsPaused(existingData.isPaused);
     }
-  };
+
+    return updated;
+  });
+};
+
 
   const trackingState: TrackingState = {
     selectedProject,
@@ -557,11 +590,11 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ setUser }) => {
       }
 
       {/* Layout Body */}
-      <div className={`flex ${!isTracking ? "max-h-screen" : " h-[calc(100vh-3rem)]"} bg-base-200 overflow-hidden`}>
+      <div className={`flex ${!isTracking ? "max-h-screen min-h-screen" : " h-[calc(100vh-3rem)]"} bg-base-200 overflow-hidden`}>
         {/* Sidebar */}
         <aside className="w-20 bg-base-100 border-r border-base-300 flex-shrink-0 flex flex-col items-center py-4 space-y-4">
-          {menuItems.map((item) => (
+          {menuItems.map((item , index) => (
-            <div className="tooltip z-100 tooltip-right" data-tip={item.label}>
+            <div className="tooltip z-100 tooltip-right" data-tip={item.label} key={index}>
               <NavLink
                 key={item.label}
                 to={item.path}

src/ui/pages/Dashboard.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Clock, TrendingUp, Play, Square, ProjectorIcon, Pause } from "lucide-react";
 import { useOutletContext } from "react-router-dom";
+import NoData from "./NoData";
 
 // Updated Project interface to match JSON structure
 interface Project {
@@ -95,18 +96,18 @@ const Dashboard: React.FC = () => {
     : null;
 
   return (
-    <main className="flex-1 overflow-y-auto no-scrollbar">
+    <main className="flex-1 overflow-hidden no-scrollbar max-h-screen">
       {/* Header */}
       <div className="mb-2">
         <h1 className="text-md font-bold">Dashboard</h1>
-        <button
+        {/* <button
           onClick={async () => {
             await window.electron.uploadScreenshot();
           }}
           className="btn btn-xs btn-outline mt-2"
         >
           Screenshot Test
-        </button>
+        </button> */}
       </div>
 
       {/* Widgets */}
@@ -137,18 +138,25 @@ const Dashboard: React.FC = () => {
           <span className="text-md font-bold">Tracking</span>
         </div> */}
 
-        <div className="card bg-base-100 border border-base-200 shadow-sm">
+        <div className="card bg-base-100 border border-base-200 shadow-sm card-sm">
           <div className="card-body">
             {selectedProject ? (
               <>
-                <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+                <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
                   <div className="text-center sm:text-left">
                     <p className="text-lg font-extrabold text-success">
                       {formatTime(selectedData?.elapsedTime || 0)}
                     </p>
-                    <p className="text-xs text-base-content/70 mt-1">
+                    {/* <p className="text-xs text-base-content/70 mt-1">
                       {selectedData?.isTracking ? "Current Session" : "Ready"}
-                    </p>
+                    </p> */}
+
+                    <div>
+                      <span className="text-base-content/70">Project:</span>{" "}
+                      <span className="font-semibold">
+                        {selectedProject.projectName}
+                      </span>
+                    </div>
                   </div>
 
                   {!selectedData?.isTracking ? (
@@ -169,15 +177,9 @@ const Dashboard: React.FC = () => {
                   )}
                 </div>
 
-                <div className="divider my-3" />
+                <div className="divider my-1" />
 
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 text-sm">
+                {/* <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 text-sm">
-                  <div>
-                    <span className="text-base-content/70">Project:</span>{" "}
-                    <span className="font-semibold">
-                      {selectedProject.projectName}
-                    </span>
-                  </div>
                   <div>
                     <span className="text-base-content/70">Status:</span>{" "}
                     <span
@@ -214,7 +216,7 @@ const Dashboard: React.FC = () => {
                         : "—"}
                     </span>
                   </div>
-                </div>
+                </div> */}
               </>
             ) : (
               <p className="text-sm text-base-content/60 text-center">
@@ -226,54 +228,67 @@ const Dashboard: React.FC = () => {
       </div>
 
       {/* Projects Table */}
-      <div>
+      <div className=" border border-base-content/10 bg-base-100 shadow-md min-h-[58vh] flex flex-col">
-        <p className="text-md mb-2 font-bold">Projects</p>
+        {/* 🔹 Sticky Header */}
-        <div className="relative rounded-box border border-base-content/10 bg-base-100 shadow-md min-h-[62vh] max-h-[62vh]">
+        <div className=" sticky top-0 z-20 bg-base-100 border-b border-base-content/10 p-3 flex justify-between items-center">
-          {projectsData.length > 0 ? (
+          <p className="text-md font-bold">Projects</p>
-            <div className="overflow-y-auto h-full">
-              <table className="table table-zebra w-full text-sm">
-                <thead className="sticky top-0 bg-base-200 z-10">
-                  <tr>
-                    <th>#</th>
-                    <th>Name</th>
-                    <th>Logs Hours</th>
-                    <th>Action</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {projectsData.map((project, index) => {
-                    const isCurrentlySelected = selectedProject?.projectId === project.projectId;
-                    const isDisabled = isTracking && !isCurrentlySelected;
-
-                    return (
-                      <tr key={project.projectId}>
-                        <td className="text-xs opacity-70">{index + 1}</td>
-                        <td className="font-medium">{project.projectName}</td>
-                        <td className="font-mono text-xs">{project.totalWorkTime}</td>
-                        <td>
-                          <button
-                            className={`btn btn-xs ${isCurrentlySelected ? "btn-success" : "btn-primary"
-                              }`}
-                            onClick={() => handleProjectSelect(project.projectId)}
-                            disabled={isDisabled}
-                          >
-                            {isCurrentlySelected ? "Selected" : "Select"}
-                          </button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-          ) : (
-            <div className="flex items-center justify-center h-full text-sm text-base-content/60">
-              <p className="mt-10 font-bold text-lg">No projects found.</p>
-            </div>
-          )}
         </div>
 
+        {/* 🔹 Table or Empty State */}
+        {projectsData.length > 0 ? (
+          <div
+            className="overflow-y-auto"
+            style={{
+              maxHeight: "50vh", // scroll only after this height
+              minHeight: "auto", // auto adjusts if few rows
+            }}
+          >
+            <table className="table table-zebra w-full text-[12px]">
+              <thead className="sticky top-0 bg-base-200 z-10">
+                <tr>
+                  <th>#</th>
+                  <th>Name</th>
+                  <th>Logs Hours</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {projectsData.map((project, index) => {
+                  const isCurrentlySelected =
+                    selectedProject?.projectId === project.projectId;
+                  const isDisabled = isTracking && !isCurrentlySelected;
+
+                  return (
+                    <tr key={project.projectId}>
+                      <td className="text-xs opacity-70">{index + 1}</td>
+                      <td className="font-medium">{project.projectName}</td>
+                      <td className="font-mono text-xs">
+                        {project.totalWorkTime || "0h 0m 0s"}
+                      </td>
+                      <td>
+                        <button
+                          className={`btn btn-xs ${isCurrentlySelected ? "btn-success" : "btn-primary"
+                            }`}
+                          onClick={() => handleProjectSelect(project.projectId)}
+                          disabled={isDisabled}
+                        >
+                          {isCurrentlySelected ? "Selected" : "Select"}
+                        </button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="flex items-center justify-center flex-1 text-sm text-base-content/60">
+            <NoData/>
+          </div>
+        )}
       </div>
+
+
     </main>
   );
 };

src/ui/pages/LeaveAndAdjustments/LeaveAndAdjustments.tsx

@@ -213,7 +213,7 @@ const LeaveAndAdjustments: React.FC = () => {
         </div>
 
         {/* Main Container */}
-        <div className="  rounded-lg  bg-base-100 overflow-hidden">
+        <div className=" rounded-lg  bg-base-100 overflow-hidden">
           {/* Tabs Navigation */}
           <div className="flex ">
             <button
@@ -249,7 +249,7 @@ const LeaveAndAdjustments: React.FC = () => {
           </div>
 
           {/* Tab Content */}
-          <div className="px-8 py-4 overflow-y-auto no-scrollbar max-h-[80vh]">
+          <div className="px-8 py-4 overflow-y-auto no-scrollbar max-h-[81vh]">
             {/* PTO Tab */}
             {activeTab === 'create_and_adjust_timesheet' && (
               <div className="animate-fade-in">

src/ui/pages/Login.tsx

@@ -1,44 +1,72 @@
 import React, { useState, useEffect, useRef, FormEvent, ChangeEvent } from 'react'
+import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom'
+import { setUserSlice } from '../store/userSlice';
 
-interface User {
+const Login = () => {
-  email: string
-  password: string
-}
-
-interface LoginProps {
-  setUser: (user: User) => void
-}
-
-const Login: React.FC<LoginProps> = ({ setUser }) => {
-  const [formData, setFormData] = useState<User>({ email: '', password: '' })
   const inputRef = useRef<HTMLFormElement | null>(null)
   const navigate = useNavigate()
+  const dispatch = useDispatch();
+  const [errorMessage, setErrorMessage] = useState("")
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isForgotMode, setIsForgotMode] = useState(false);
+  const [loading, setLoading] = useState(false);
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setFormData({ ...formData, [e.target.name]: e.target.value })
-  }
 
-  const handleSubmit = async (e: FormEvent<HTMLFormElement> | KeyboardEvent) => {
+  const handleLogin = async (e: FormEvent<HTMLFormElement> | KeyboardEvent) => {
     e.preventDefault()
 
-    const { email, password } = formData
     if (email === "" || password === "") return
-
+    setLoading(true);
-    const response = await window.electron.login({ email, password });
+    try {
-    console.log(response)
+      const response = await window.electron.login({ email, password });
-    if (response.success) {
+      console.log(response)
-      localStorage.setItem("user", JSON.stringify(formData));
+      if (response.success) {
-      setUser(response.user);
+        // setUser(response.user);
-      navigate("/")
+        dispatch(setUserSlice({
+          id: response.user.id,
+          name: response.user.name,
+          email: response.user.email,
+        }));
+        navigate("/")
+      } else if (response.success == false) {
+        console.log(response.error.message)
+        setErrorMessage(response.error.message)
+      }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setLoading(false);
     }
+
   }
 
+
+  const handleForgotPassword = async (e: FormEvent<HTMLFormElement> | KeyboardEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const res = await window.electron.forgotPassword(email);
+      console.log("Forgot password response:", res);
+      alert("Password reset link sent to your email");
+      setIsForgotMode(false);
+    } catch (error) {
+      console.error("Forgot password error:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   // Detect Enter key press
   useEffect(() => {
     const handleEnter = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        handleSubmit(e)
+        if (!isForgotMode) {
+          handleLogin(e)
+        } else {
+          handleForgotPassword(e)
+        }
       }
     }
 
@@ -46,101 +74,131 @@ const Login: React.FC<LoginProps> = ({ setUser }) => {
     inputElement?.addEventListener('keydown', handleEnter)
 
     return () => inputElement?.removeEventListener('keydown', handleEnter)
-  }, [formData])
+  }, [email, password])
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/10 via-base-200 to-secondary/10 p-4">
+    <>
-      <div className="card w-full max-w-md shadow-2xl bg-base-100 backdrop-blur-sm">
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/10 via-base-200 to-secondary/10 p-4">
-        <div className="card-body">
+        <div className="card w-full max-w-md shadow-2xl bg-base-100 backdrop-blur-sm">
-          <div className="flex justify-center items-center mb-4">
+          <div className="card-body">
-            <div className="avatar placeholder">
+            <div className="flex justify-center items-center mb-4">
-              <div className="bg-primary text-primary-content rounded-full w-16 h-16 flex items-center justify-center">
+              <div className="avatar placeholder">
-                <svg
+                <div className="bg-primary text-primary-content rounded-full w-16 h-16 flex items-center justify-center">
-                  fill="none"
+                  <svg
-                  viewBox="0 0 24 24"
+                    fill="none"
-                  className="w-8 h-8 stroke-current"
+                    viewBox="0 0 24 24"
-                >
+                    className="w-8 h-8 stroke-current"
-                  <path
+                  >
-                    strokeLinecap="round"
+                    <path
-                    strokeLinejoin="round"
+                      strokeLinecap="round"
-                    strokeWidth="2"
+                      strokeLinejoin="round"
-                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                      strokeWidth="2"
-                  />
+                      d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                </svg>
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
-          </div>
 
-          <h2 className="text-center text-3xl font-bold mb-2">Welcome Back</h2>
+            <h2 className="text-center text-3xl font-bold mb-2">Welcome Back</h2>
-          <p className="text-center text-base-content/60 mb-6">Sign in to Employee Tracker</p>
+            <p className="text-center text-base-content/60 mb-6">Sign in to Employee Tracker</p>
 
-          <form
+            <form
-            ref={inputRef}
+              ref={inputRef}
-            className="flex flex-col items-center justify-center w-full"
+              className="flex flex-col items-center justify-center w-full"
-            onSubmit={handleSubmit}
+              onSubmit={isForgotMode ? handleForgotPassword : handleLogin}
-          >
+            >
-            <div className="form-control w-90 px-5">
+              <div className="form-control w-90 px-5">
-              <label className="label">
+                <label className="label">
-                <span className="label-text font-medium">Email Address</span>
+                  <span className="label-text font-medium">Email Address</span>
-              </label>
+                </label>
-              <label className="input input-bordered flex items-center gap-2">
+                <label className="input input-bordered flex items-center gap-2">
-                <svg
+                  <svg
-                  viewBox="0 0 16 16"
+                    viewBox="0 0 16 16"
-                  fill="currentColor"
+                    fill="currentColor"
-                  className="w-4 h-4 opacity-70"
+                    className="w-4 h-4 opacity-70"
-                >
+                  >
-                  <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+                    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
-                  <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+                    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
-                </svg>
+                  </svg>
-                <input
+                  <input
-                  type="email"
+                    type="email"
-                  name="email"
+                    name="email"
-                  placeholder="you@example.com"
+                    placeholder="you@example.com"
-                  className="grow"
+                    className="grow"
-                  value={formData.email}
+                    value={email}
-                  onChange={handleChange}
+                    onChange={(e) => setEmail(e.target.value)}
-                  required
+                    required
-                />
-              </label>
-            </div>
-
-            <div className="form-control w-90 px-5 mt-4">
-              <label className="label">
-                <span className="label-text font-medium">Password</span>
-              </label>
-              <label className="input input-bordered flex items-center gap-2">
-                <svg
-                  viewBox="0 0 16 16"
-                  fill="currentColor"
-                  className="w-4 h-4 opacity-70"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
-                    clipRule="evenodd"
                   />
-                </svg>
+                </label>
-                <input
+              </div>
-                  type="password"
-                  name="password"
-                  placeholder="Enter your password"
-                  className="grow"
-                  value={formData.password}
-                  onChange={handleChange}
-                  required
-                />
-              </label>
-            </div>
 
-            <div className="form-control w-full px-5 mt-6">
+              {!isForgotMode && <div className="form-control w-90 px-5 mt-3">
-              <button type="submit" className="btn btn-primary w-full">
+                <label className="label">
-                Sign In
+                  <span className="label-text font-medium">Password</span>
-              </button>
+                </label>
-            </div>
+                <label className="input input-bordered flex items-center gap-2">
-          </form>
+                  <svg
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                    className="w-4 h-4 opacity-70"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <input
+                    type="password"
+                    name="password"
+                    placeholder="Enter your password"
+                    className="grow"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                  />
+                </label>
+              </div>}
+
+              <div className="form-control w-90 px-5 mt-4">
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="btn btn-primary w-full"
+                >
+                  {loading
+                    ? "Please wait..."
+                    : isForgotMode
+                      ? "Send Reset Link"
+                      : "Login"}
+                </button>
+              </div>
+              <div className="text-center mt-4">
+                {isForgotMode ? (
+                  <button
+                    type="button"
+                    onClick={() => setIsForgotMode(false)}
+                    className="link link-primary text-sm"
+                  >
+                    Back to Login
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => setIsForgotMode(true)}
+                    className="link link-primary text-sm"
+                  >
+                    Forgot Password?
+                  </button>
+                )}
+              </div>
+              {errorMessage && <span className='text-red-500 font-semibold mt-2'>{errorMessage}...!</span>}
+            </form>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }
 

src/ui/pages/NoData.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+
+const NoData = ({ message = "No data available", subText = "Please add new items or check back later." }) => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[67vh] p-6 text-center">
+      {/* SVG Illustration */}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 600 360"
+        className="w-64 h-40 mb-6 text-primary"
+      >
+        <rect
+          x="38"
+          y="56"
+          width="524"
+          height="208"
+          rx="14"
+          fill="currentColor"
+          opacity="0.05"
+        />
+        <g transform="translate(125, 68)">
+          <rect
+            x="0"
+            y="24"
+            width="298"
+            height="150"
+            rx="8"
+            fill="white"
+            stroke="currentColor"
+            strokeWidth="2"
+            opacity="0.15"
+          />
+          <g transform="translate(18, 43)" fill="currentColor" opacity="0.1">
+            <rect x="0" y="0" width="160" height="12" rx="6" />
+            <rect x="0" y="24" width="110" height="12" rx="6" />
+            <rect x="0" y="48" width="140" height="12" rx="6" />
+          </g>
+          <g
+            transform="translate(160, 72) scale(1.05)"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="10"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="animate-pulse"
+          >
+            <circle cx="24" cy="24" r="18" fill="none" />
+            <path d="M39 39 L58 58" />
+          </g>
+        </g>
+      </svg>
+
+      {/* Text section */}
+      <div className="card bg-base-100  w-full max-w-md">
+        <div className="card-body items-center">
+          <h2 className="card-title text-lg font-semibold text-base-content">
+            {message}
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NoData;

src/ui/pages/Settings/Settings.tsx

@@ -1,50 +1,42 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
-import { User, Mail, Lock, Edit2, Shield, CalendarDays } from "lucide-react";
+import { User, Mail } from "lucide-react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store";
 
-interface UserProfile {
+interface User {
+  id: string;
   name: string;
   email: string;
-  role: string;
-  employeeId: string;
-  joinDate: string;
-  department: string;
-  profileImage?: string;
 }
 
-const userData: UserProfile = {
-  name: "Jai Pandey",
-  email: "jai.pandey@vatechcorp.com",
-  role: "Frontend Developer",
-  employeeId: "EMP-1023",
-  joinDate: "2022-07-15",
-  department: "Engineering",
-  profileImage: "https://ui-avatars.com/api/?name=Jai+Pandey&background=random",
-};
 
 const Settings: React.FC = () => {
+
+  const user = useSelector((state: RootState) => state.user.user);
+  console.log(user , "Line 16")
+  
   return (
-    <div className="flex flex-col gap-2 max-h-screen">
+    <div className="flex flex-col gap-2 ">
       {/* Header */}
       <div className="flex items-center justify-between">
         <h2 className="text-md font-bold flex items-center gap-2">
-           Profile Settings
+          Profile Settings
         </h2>
-        <button className="btn btn-sm btn-primary gap-1">
+        <button className="btn btn-sm btn-outline btn-primary">
-          <Edit2 size={16} /> Edit Profile
+          Change Password
         </button>
       </div>
 
       {/* Profile Section */}
-      <div className="card bg-base-100 border border-base-300 shadow-sm p-4 flex flex-col md:flex-row gap-4">
+      <div className=" card bg-base-100 border border-base-300 shadow-sm p-4 flex flex-col md:flex-row gap-4">
         {/* Profile Picture */}
         <div className="flex flex-col items-center md:w-1/3">
           <div className="avatar">
             <div className="w-28 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2 flex justify-center items-center">
-                <User size={60} />
+              <User size={60} />
             </div>
           </div>
-          <h3 className="mt-3 text-lg font-semibold">{userData.name}</h3>
+          <h3 className="mt-3 text-lg font-semibold">{user?.name}</h3>
-          <p className="text-sm text-base-content/70">{userData.role}</p>
         </div>
 
         <div className="divider md:divider-horizontal" />
@@ -55,51 +47,8 @@ const Settings: React.FC = () => {
             <p className="text-xs text-base-content/70 flex items-center gap-2">
               <Mail size={14} /> Email
             </p>
-            <p className="text-sm font-medium">{userData.email}</p>
+            <p className="text-sm font-medium">{user?.email}</p>
           </div>
-
-          <div className="p-2 rounded-md bg-base-200/50">
-            <p className="text-xs text-base-content/70 flex items-center gap-2">
-              <Shield size={14} /> Role
-            </p>
-            <p className="text-sm font-medium">{userData.role}</p>
-          </div>
-
-          <div className="p-2 rounded-md bg-base-200/50">
-            <p className="text-xs text-base-content/70 flex items-center gap-2">
-              <Lock size={14} /> Employee ID
-            </p>
-            <p className="text-sm font-medium">{userData.employeeId}</p>
-          </div>
-
-          <div className="p-2 rounded-md bg-base-200/50">
-            <p className="text-xs text-base-content/70 flex items-center gap-2">
-              <CalendarDays size={14} /> Joining Date
-            </p>
-            <p className="text-sm font-medium">{userData.joinDate}</p>
-          </div>
-
-          <div className="p-2 rounded-md bg-base-200/50 sm:col-span-2">
-            <p className="text-xs text-base-content/70 flex items-center gap-2">
-              <User size={14} /> Department
-            </p>
-            <p className="text-sm font-medium">{userData.department}</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Account Settings */}
-      <div className="card bg-base-100 border border-base-300 shadow-sm p-4">
-        <h3 className="text-md font-semibold mb-3">Account Security</h3>
-
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between border-t border-base-300 pt-3">
-          <p className="text-sm flex items-center gap-2">
-            <Lock size={16} /> Password last changed on{" "}
-            <span className="font-medium text-base-content">Aug 12, 2024</span>
-          </p>
-          <button className="btn btn-sm btn-outline btn-primary">
-            Change Password
-          </button>
         </div>
       </div>
     </div>

src/ui/pages/Timesheets/ProjectLogsModal.tsx

@@ -72,7 +72,7 @@ const ProjectLogsModal: React.FC<Props> = ({ isOpen, onClose, projectName, logs,
                             {tab.title} <br/>
                             {tab.appName}
                           </td>
-                          <td><span className="text-green-500">{new Date(tab.from).toLocaleTimeString()}</span> <span className="text-red-600">{new Date(tab.to).toLocaleTimeString()}</span></td>
+                          <td><span className="text-green-500">{new Date(tab.from).toLocaleTimeString()}</span> <br/><span className="text-red-600">{new Date(tab.to).toLocaleTimeString()}</span></td>
                           <td>{tab.durationFormatted}</td>
                         </tr>
                       ))}

src/ui/store/index.tsx

@@ -2,11 +2,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 import windowReducer from "./windowSlice";
 import projectsReducer from "./projectSlice";
+import userReducer from "./userSlice";
 
 export const store = configureStore({
   reducer: {
     window: windowReducer,
     projects: projectsReducer,
+    user: userReducer,
   },
 });
 

src/ui/store/userSlice.tsx

@@ -0,0 +1,50 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+//  Define and export the User type so other files can use it
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+//  Define the state shape
+interface UserState {
+  user: User | null;
+}
+
+const initialState: UserState = {
+  user: null,
+};
+
+//  Create the slice
+const userSlice = createSlice({
+  name: "user",
+  initialState,
+  reducers: {
+    setUserSlice: (state, action: PayloadAction<User>) => {
+      state.user = action.payload;
+
+      // Save to localStorage
+      localStorage.setItem("user", JSON.stringify(action.payload));
+    },
+    clearUser: (state) => {
+      state.user = null;
+      localStorage.removeItem("user");
+    },
+    loadUserFromStorage: (state) => {
+      const storedUser = localStorage.getItem("user");
+      if (storedUser) {
+        try {
+          state.user = JSON.parse(storedUser) as User;
+        } catch (error) {
+          console.error("Invalid user in localStorage:", error);
+          localStorage.removeItem("user");
+        }
+      }
+    },
+  },
+});
+
+//  Export actions and reducer
+export const { setUserSlice, clearUser, loadUserFromStorage } = userSlice.actions;
+export default userSlice.reducer;

types.d.ts

@@ -67,6 +67,10 @@ interface Window {
   electron: {
     login: (credentials: { email: string; password: string }) => Promise<any>;
     logout: () => Promise<any>;
+    forgotPassword: (email: string) => Promise<{
+      success: boolean;
+      message: string;
+    }>;
     getToken: (tokenKey: "ACCESS_TOKEN" | "REFRESH_TOKEN") => Promise<string | null>;
     uploadScreenshot: () => {};
     getActiveAppDetails: () => {};
@@ -94,7 +98,7 @@ interface Window {
 
     // getProjectLogs: (projectId: string) => Promise<{ success: boolean; logs: ProjectLogResponse[] }>;
     getProjectLogs: (
-  projectID: string,
+  projectId: string,
   fromDate?: string,
   toDate?: string
 ) => Promise<{ success: boolean; logs: ProjectLogResponse[] }>;