This commit is contained in:
BhagwanSingh 2025-11-13 15:56:29 +05:30
commit f499cbfa7b
20 changed files with 880 additions and 385 deletions

132
e2e/example.spec.js Normal file
View File

@ -0,0 +1,132 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
var test_1 = require("@playwright/test");
var electronApp;
var mainPage;
function waitForPreloadScript() {
return __awaiter(this, void 0, void 0, function () {
var _this = this;
return __generator(this, function (_a) {
return [2 /*return*/, new Promise(function (resolve) {
var interval = setInterval(function () { return __awaiter(_this, void 0, void 0, function () {
var electronBridge;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, mainPage.evaluate(function () {
return window.electron;
})];
case 1:
electronBridge = _a.sent();
if (electronBridge) {
clearInterval(interval);
resolve(true);
}
return [2 /*return*/];
}
});
}); }, 100);
})];
});
});
}
test_1.test.beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, test_1._electron.launch({
args: ['.'],
env: { NODE_ENV: 'development' },
})];
case 1:
electronApp = _a.sent();
return [4 /*yield*/, electronApp.firstWindow()];
case 2:
mainPage = _a.sent();
return [4 /*yield*/, waitForPreloadScript()];
case 3:
_a.sent();
return [2 /*return*/];
}
});
}); });
test_1.test.afterEach(function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, electronApp.close()];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); });
(0, test_1.test)('custom frame should minimize the mainWindow', function () { return __awaiter(void 0, void 0, void 0, function () {
var isMinimized;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, mainPage.click('#minimize')];
case 1:
_a.sent();
return [4 /*yield*/, electronApp.evaluate(function (electron) {
return electron.BrowserWindow.getAllWindows()[0].isMinimized();
})];
case 2:
isMinimized = _a.sent();
(0, test_1.expect)(isMinimized).toBeTruthy();
return [2 /*return*/];
}
});
}); });
(0, test_1.test)('should create a custom menu', function () { return __awaiter(void 0, void 0, void 0, function () {
var menu;
var _a, _b;
return __generator(this, function (_c) {
switch (_c.label) {
case 0: return [4 /*yield*/, electronApp.evaluate(function (electron) {
return electron.Menu.getApplicationMenu();
})];
case 1:
menu = _c.sent();
(0, test_1.expect)(menu).not.toBeNull();
(0, test_1.expect)(menu === null || menu === void 0 ? void 0 : menu.items).toHaveLength(2);
(0, test_1.expect)((_a = menu === null || menu === void 0 ? void 0 : menu.items[0].submenu) === null || _a === void 0 ? void 0 : _a.items).toHaveLength(2);
(0, test_1.expect)((_b = menu === null || menu === void 0 ? void 0 : menu.items[1].submenu) === null || _b === void 0 ? void 0 : _b.items).toHaveLength(3);
(0, test_1.expect)(menu === null || menu === void 0 ? void 0 : menu.items[1].label).toBe('View');
return [2 /*return*/];
}
});
}); });

73
playwright.config.js Normal file
View File

@ -0,0 +1,73 @@
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var test_1 = require("@playwright/test");
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();
/**
* See https://playwright.dev/docs/test-configuration.
*/
exports.default = (0, test_1.defineConfig)({
testDir: './e2e',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://127.0.0.1:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: __assign({}, test_1.devices['Desktop Chrome']),
},
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
/* Run your local dev server before starting the tests */
webServer: {
command: 'npm run dev:react',
url: 'http://localhost:5123',
reuseExistingServer: !process.env.CI,
},
});

View File

@ -81,7 +81,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);
@ -179,7 +179,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) {
@ -190,16 +190,33 @@ 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);
return response;
return { success: true, data: response.data };
} catch (error) {
console.error("❌ Error fetching project logs:", error);
throw error;
}
});
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",
};
}
});
ipcMain.handle('get-running-apps', async () => {
return await getRunningAppsList()
});

View File

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

43
src/electron/preload.cjs Normal file
View File

@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var electron_1 = require("electron");
console.log("setting PreLoad");
electron_1.contextBridge.exposeInMainWorld('electron', {
login: function (credentials) { return electron_1.ipcRenderer.invoke('login-request', credentials); },
logout: function () { return electron_1.ipcRenderer.invoke('logout-request'); },
forgotPassword: function (email) { return electron_1.ipcRenderer.invoke("forgot-password", email); },
getToken: function (TOKEN_KEY) { return electron_1.ipcRenderer.invoke('get-token', TOKEN_KEY); },
uploadScreenshot: function () { return electron_1.ipcRenderer.invoke('upload-screenshot'); },
getActiveAppDetails: function () { return electron_1.ipcRenderer.invoke('get-active-app'); },
toggleCloseBtn: function (shouldEnable) { return electron_1.ipcRenderer.invoke('toggle-close-btn', shouldEnable); },
resizeWindow: function (width, height) { return electron_1.ipcRenderer.invoke('resize-window', width, height); },
getProjectList: function () { return electron_1.ipcRenderer.invoke("get-project-list"); },
onWindowUpdate: function (callback) {
return electron_1.ipcRenderer.on("window:updated", function (_, data) { return callback(data); });
},
startProjectTracking: function (data) { return electron_1.ipcRenderer.invoke("start-project-tracking", data); },
stopProjectTracking: function (data) { return electron_1.ipcRenderer.invoke("stop-project-tracking", data); },
trackingTabsOpeningClosing: function (data) {
return electron_1.ipcRenderer.invoke("tracking-tabs-opening-and-closing", data);
},
getProjectLogs: function (projectID, fromDate, toDate) { return electron_1.ipcRenderer.invoke("get-project-logs", { projectID: projectID, fromDate: fromDate, toDate: toDate }); },
});
// function ipcInvoke<Key extends keyof EventPayloadMapping>(
// key: Key
// ): Promise<EventPayloadMapping[Key]> {
// return ipcRenderer.invoke(key);
// }
// function ipcOn<Key extends keyof EventPayloadMapping>(
// key: Key,
// callback: (payload: EventPayloadMapping[Key]) => void
// ) {
// const cb = (_: Electron.IpcRendererEvent, payload: any) => callback(payload);
// ipcRenderer.on(key, cb);
// return () => ipcRenderer.off(key, cb);
// }
// function ipcSend<Key extends keyof EventPayloadMapping>(
// key: Key,
// payload: EventPayloadMapping[Key]
// ) {
// ipcRenderer.send(key, payload);
// }

View File

@ -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'),

View File

@ -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");
if (storedUser) {
try {
setUser(JSON.parse(storedUser));
} catch (err) {
console.error("Invalid user in localStorage", err);
}
}
}, []);
dispatch(loadUserFromStorage());
}, [dispatch]);
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>
}
>

View File

@ -6,13 +6,13 @@ export const useActiveAppTracker = (
isTracking: boolean,
activeProjectLogId: string | null,
projectId: string | null,
projectName: string
projectName: string | null
) => {
const dispatch = useDispatch();
const lastActiveRef = useRef<WindowInfo | null>(null);
const lastLogIdRef = useRef<string | null>(null);
const lastTitleRef = useRef<string | null>(null);
const intervalIdRef = useRef<NodeJS.Timeout | null>(null);
const intervalIdRef = useRef<number | null>(null);
const finalizeTrackingRef = useRef<(() => Promise<void>) | null>(null);
// ✅ Common guard to check if we can send
@ -31,15 +31,27 @@ export const useActiveAppTracker = (
}
try {
const payload = {
id: !isNew ? lastLogIdRef.current : undefined,
const payload: {
id?: string;
logId: string;
projectId: string;
title: string;
appName: string;
} = {
logId: projectLogId,
projectId,
title,
appName,
};
// ✅ only attach `id` if it’s non-null and not undefined
if (!isNew && lastLogIdRef.current) {
payload.id = lastLogIdRef.current;
}
console.log(isNew ? "➡️ POST new log" : "✏️ PATCH update log", payload);
const res = await window.electron.trackingTabsOpeningClosing(payload);
if (isNew && res?._id) lastLogIdRef.current = res._id;

View File

@ -30,10 +30,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
@ -72,12 +79,7 @@ export interface TrackingState {
projectsData: Project[];
}
interface DashboardLayoutProps {
user: User | null;
setUser: React.Dispatch<React.SetStateAction<User | null>>;
}
const DashboardLayout: React.FC<DashboardLayoutProps> = ({ setUser }) => {
const DashboardLayout = () => {
const [isSidebarOpen, setSidebarOpen] = useState(true);
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
const navigate = useNavigate();
@ -119,8 +121,8 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ setUser }) => {
const { finalizeTracking } = useActiveAppTracker(
isTracking,
activeProjectLogId,
selectedProject?.projectId,
selectedProject?.projectName
selectedProject?.projectId ?? null,
selectedProject?.projectName ?? null
);
const socketRef = useRef<Socket | null>(null);
@ -174,23 +176,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);
@ -209,12 +216,89 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ setUser }) => {
const handleLogout = async () => {
try {
const res = await window.electron.logout();
localStorage.removeItem("user");
setUser(null);
const res = await window.electron.logout();
if (res) {
dispatch(clearUser()); // ✅ Removes from Redux + localStorage
navigate("/login");
} catch (error) {
console.error("Logout error:", error);
}
} catch (error) {
console.error("Logout error:", error);
}
};
// Connect and start sending
const handleConnect = async () => {
const token = await window.electron.getToken("ACCESS_TOKEN");
if (socketRef.current) {
console.warn("Already connected");
return;
}
if(!selectedProject?.projectId) return
console.log(selectedProject?.projectId, "SelectedProject ID")
socketRef.current = io("https://wired-terminally-muskrat.ngrok-free.app", {
transports: ["websocket"],
secure: true,
auth: {
token: token,
projectId: selectedProject?.projectId,
userType: "va"
},
});
socketRef.current.on("connect", () => {
console.log("🟢 Connected:", socketRef.current?.id);
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 });
// const base64String = await window.electron.captureAppScreenShot("Screen 1");
// if (base64String) {
// socketRef.current?.emit("sendImage", {token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY5MGIzMjhkMDkxMDFmNzRjZjUyNGMwNyIsImVtYWlsIjoiYmhhZ3dhbi5yQGhpY2dsb2JhbHNvbHV0aW9ucy5jb20iLCJuYW1lIjoiUm9oaXQiLCJpYXQiOjE3NjI4NTgxOTMsImV4cCI6MTc2Mjk0NDU5M30.UlHy3RU9W5LOid7smG7WzyNT7dnqhQT4qqzRrN1axmU", image: base64String, title: "Screen 1"});
// }
}, 5000);
});
socketRef.current.on("appToCapture", async ({ appTitle }) => {
console.log("📸 Capture requested for:", appTitle);
const base64String = await window.electron.captureAppScreenShot(appTitle);
if (base64String && socketRef.current) {
socketRef.current.emit("sendImage", {
token: token,
image: base64String,
title: appTitle
});
}
});
socketRef.current.on("disconnect", () => {
console.log("🔴 Disconnected");
setIsConnected(false);
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
});
};
const handleDisconnect = () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
if (socketRef.current) {
socketRef.current.disconnect();
socketRef.current = null;
setIsConnected(false);
console.log("🔌 Disconnected manually");
}
};
@ -514,28 +598,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);
if (project) {
setSelectedProject(project);
const project = projectsData.find((p) => p.projectId === projectId);
if (!project) return;
const projectData = projectTrackingMap.get(projectId);
if (projectData) {
setElapsedTime(projectData.elapsedTime);
setStartTime(projectData.startTime);
setEndTime(projectData.endTime);
setIsTracking(projectData.isTracking);
setIsPaused(projectData.isPaused);
} else {
setElapsedTime(0);
setStartTime(null);
setEndTime(null);
setIsTracking(false);
setIsPaused(false);
}
setSelectedProject(project);
dispatch(setSelectedProjectSlice(project));
const existingData = projectTrackingMap.get(projectId);
setProjectTrackingMap((prev) => {
const updated = new Map(prev);
// If project is not yet tracked, initialize it with totalWorkMs
if (!existingData) {
const initialElapsedTime = Math.floor((project.totalWorkMs || 0) / 1000);
updated.set(projectId, {
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,
@ -654,11 +762,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 flex-col items-center py-4 space-y-4">
{menuItems.map((item) => (
<div className="tooltip z-100 tooltip-right" key={item.label} data-tip={item.label}>
{menuItems.map((item , index) => (
<div className="tooltip z-100 tooltip-right" key={item.label} data-tip={item.label} key={index}>
<NavLink
key={item.label}
to={item.path}

View File

@ -1,6 +1,7 @@
import React, { useEffect, useRef, useState } from "react";
import { Clock, TrendingUp, Play, Square, ProjectorIcon, Pause } from "lucide-react";
import { useOutletContext } from "react-router-dom";
import NoData from "./NoData";
// Updated Project interface to match JSON structure
interface Project {
@ -103,44 +104,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>
{/* {
runningApps && runningApps.map((obj) => {
return (
<div
key={obj.pid}
onClick={async () => {
console.log("Call ", obj.name)
await window.electron.captureAppScreenShot(obj.name)
}}
>
{obj.name}
</div>
)
})
} */}
</button> */}
</div>
{/* Widgets */}
@ -171,18 +146,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 ? (
@ -203,15 +185,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>
<span className="text-base-content/70">Project:</span>{" "}
<span className="font-semibold">
{selectedProject.projectName}
</span>
</div>
{/* <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">Status:</span>{" "}
<span
@ -248,7 +224,7 @@ const Dashboard: React.FC = () => {
: "—"}
</span>
</div>
</div>
</div> */}
</>
) : (
<p className="text-sm text-base-content/60 text-center">
@ -260,54 +236,67 @@ const Dashboard: React.FC = () => {
</div>
{/* Projects Table */}
<div>
<p className="text-md mb-2 font-bold">Projects</p>
<div className="relative rounded-box border border-base-content/10 bg-base-100 shadow-md min-h-[62vh] max-h-[62vh]">
{projectsData.length > 0 ? (
<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 className=" border border-base-content/10 bg-base-100 shadow-md min-h-[58vh] flex flex-col">
{/* 🔹 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>
</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>
);
};

View File

@ -42,6 +42,7 @@ const LeaveAndAdjustments: React.FC = () => {
const [ptoLeave, setPtoLeave] = useState({
fromDate: '',
toDate: '',
// description:""
});
const [ptoErrors, setPtoErrors] = useState<Partial<LeaveFormData>>({});
@ -49,6 +50,7 @@ const LeaveAndAdjustments: React.FC = () => {
const [sickLeave, setSickLeave] = useState<LeaveFormData>({
fromDate: '',
toDate: '',
});
const [sickErrors, setSickErrors] = useState<Partial<LeaveFormData>>({});
const [selectedProjectId, setSelectedProjectId] = useState("")
@ -80,9 +82,6 @@ const LeaveAndAdjustments: React.FC = () => {
errors.toDate = 'To date must be after from date';
}
if (!data.description.trim()) {
errors.description = 'Description/Reason is required';
}
return errors;
};
@ -100,7 +99,7 @@ const LeaveAndAdjustments: React.FC = () => {
console.log('Submitting PTO:', ptoLeave);
alert('PTO request submitted successfully!');
setPtoLeave({ fromDate: '', toDate: '', description: '' });
setPtoLeave({ fromDate: '', toDate: '' });
setPtoErrors({});
} catch (error) {
alert('Failed to submit request. Please try again.');
@ -128,7 +127,7 @@ const LeaveAndAdjustments: React.FC = () => {
console.log('Submitting Sick Leave:', sickLeave);
alert('Sick Leave request submitted successfully!');
setSickLeave({ fromDate: '', toDate: '', description: '' });
setSickLeave({ fromDate: '', toDate: '' });
setSickErrors({});
} catch (error) {
alert('Failed to submit request. Please try again.');
@ -173,35 +172,35 @@ const LeaveAndAdjustments: React.FC = () => {
const fetchLogs = async () => {
const res = await window.electron.getProjectLogs(
selectedProjectId,
selectedDate || undefined,
selectedDate || undefined,
);
// const fetchLogs = async () => {
// const res = await window.electron.getProjectLogs(
// selectedProjectId,
// selectedDate || undefined,
// selectedDate || undefined,
// );
if (res.success) {
console.log("✅ Logs: fetchLogs", res);
// if (res.success) {
// console.log("✅ Logs: fetchLogs", res);
// Safely extract time if from/to exist
const fromTime = res.from ? new Date(res.from).toISOString().slice(11, 16) : "";
const toTime = res.to ? new Date(res.to).toISOString().slice(11, 16) : "";
// // Safely extract time if from/to exist
// const fromTime = res.from ? new Date(res.from).toISOString().slice(11, 16) : "";
// const toTime = res.to ? new Date(res.to).toISOString().slice(11, 16) : "";
setPtoLeave({
fromDate: fromTime,
toDate: toTime,
});
} else {
console.warn("⚠️ Failed to fetch project logs");
}
};
// setPtoLeave({
// fromDate: fromTime,
// toDate: toTime,
// });
// } else {
// console.warn("⚠️ Failed to fetch project logs");
// }
// };
useEffect(() => {
if (selectedProjectId && selectedDate) {
fetchLogs()
}
}, [selectedProjectId, selectedDate])
// useEffect(() => {
// if (selectedProjectId && selectedDate) {
// fetchLogs()
// }
// }, [selectedProjectId, selectedDate])
return (
@ -213,7 +212,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 +248,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">
@ -386,16 +385,12 @@ const LeaveAndAdjustments: React.FC = () => {
<span className="label-text font-semibold text-sm ">Description / Reason</span>
</label>
<textarea
value={ptoLeave.description}
// value={ptoLeave.description}
// onChange={(e) => handlePtoChange('description', e.target.value)}
className={`textarea text-xs textarea-bordered h-40 w-full focus:textarea-primary transition-all ${ptoErrors.description ? 'textarea-error' : ''}`}
className={`textarea text-xs textarea-bordered h-40 w-full focus:textarea-primary transition-all
`}
placeholder="Please enter the task name or leave notes to help us better understand your request."
/>
{ptoErrors.description && (
<label className="label">
<span className="label-text-alt text-error font-medium">{ptoErrors.description}</span>
</label>
)}
</div>
<div className="flex gap-3">
@ -410,7 +405,7 @@ const LeaveAndAdjustments: React.FC = () => {
</button>
<button
onClick={() => {
setPtoLeave({ fromDate: '', toDate: '', description: '' });
setPtoLeave({ fromDate: '', toDate: '' });
setPtoErrors({});
}}
className="btn btn-secondary transition-all"
@ -468,7 +463,7 @@ const LeaveAndAdjustments: React.FC = () => {
</div>
</div>
<div className="form-control flex flex-col gap-1">
{/* <div className="form-control flex flex-col gap-1">
<label className="label">
<span className="label-text font-semibold ">Description / Reason</span>
</label>
@ -483,7 +478,7 @@ const LeaveAndAdjustments: React.FC = () => {
<span className="label-text-alt text-error font-medium">{sickErrors.description}</span>
</label>
)}
</div>
</div> */}
<div className="flex gap-3 ">
<button
@ -497,7 +492,7 @@ const LeaveAndAdjustments: React.FC = () => {
</button>
<button
onClick={() => {
setSickLeave({ fromDate: '', toDate: '', description: '' });
// setSickLeave({ fromDate: '', toDate: '', description: '' });
setSickErrors({});
}}
className="btn btn-secondary transition-all"

View File

@ -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 {
email: string
password: string
}
interface LoginProps {
setUser: (user: User) => void
}
const Login: React.FC<LoginProps> = ({ setUser }) => {
const [formData, setFormData] = useState<User>({ email: '', password: '' })
const Login = () => {
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
const response = await window.electron.login({ email, password });
console.log(response)
if (response.success) {
localStorage.setItem("user", JSON.stringify(formData));
setUser(response.user);
navigate("/")
setLoading(true);
try {
const response = await window.electron.login({ email, password });
console.log(response)
if (response.success) {
// setUser(response.user);
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="card-body">
<div className="flex justify-center items-center mb-4">
<div className="avatar placeholder">
<div className="bg-primary text-primary-content rounded-full w-16 h-16 flex items-center justify-center">
<svg
fill="none"
viewBox="0 0 24 24"
className="w-8 h-8 stroke-current"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
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>
<>
<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="card-body">
<div className="flex justify-center items-center mb-4">
<div className="avatar placeholder">
<div className="bg-primary text-primary-content rounded-full w-16 h-16 flex items-center justify-center">
<svg
fill="none"
viewBox="0 0 24 24"
className="w-8 h-8 stroke-current"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
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>
</div>
</div>
</div>
</div>
<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>
<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>
<form
ref={inputRef}
className="flex flex-col items-center justify-center w-full"
onSubmit={handleSubmit}
>
<div className="form-control w-90 px-5">
<label className="label">
<span className="label-text font-medium">Email Address</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 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" />
</svg>
<input
type="email"
name="email"
placeholder="you@example.com"
className="grow"
value={formData.email}
onChange={handleChange}
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"
<form
ref={inputRef}
className="flex flex-col items-center justify-center w-full"
onSubmit={isForgotMode ? handleForgotPassword : handleLogin}
>
<div className="form-control w-90 px-5">
<label className="label">
<span className="label-text font-medium">Email Address</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 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" />
</svg>
<input
type="email"
name="email"
placeholder="you@example.com"
className="grow"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</svg>
<input
type="password"
name="password"
placeholder="Enter your password"
className="grow"
value={formData.password}
onChange={handleChange}
required
/>
</label>
</div>
</label>
</div>
<div className="form-control w-full px-5 mt-6">
<button type="submit" className="btn btn-primary w-full">
Sign In
</button>
</div>
</form>
{!isForgotMode && <div className="form-control w-90 px-5 mt-3">
<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>
<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>
</>
)
}

65
src/ui/pages/NoData.tsx Normal file
View File

@ -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;

View File

@ -1,50 +1,42 @@
import React from "react";
import { User, Mail, Lock, Edit2, Shield, CalendarDays } from "lucide-react";
import React, { useEffect, useState } from "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">
<Edit2 size={16} /> Edit Profile
<button className="btn btn-sm btn-outline btn-primary">
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>
<p className="text-sm text-base-content/70">{userData.role}</p>
<h3 className="mt-3 text-lg font-semibold">{user?.name}</h3>
</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>

View File

@ -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>
))}

View File

@ -67,7 +67,7 @@ const Timesheets: React.FC = () => {
const handleViewLogs = async (projectID: string, projectName: string) => {
const handleViewLogs = async (projectID: string, projectName: string) => {
try {
setLoading(true);
setSelectedProject(projectID);

View File

@ -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,
},
});

View File

@ -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;

View File

@ -49,7 +49,7 @@ const initialState: WindowState = {
interface SetActiveWindowPayload {
window: WindowInfo;
projectId: string;
projectName: string;
projectName: string | null;
}
const windowSlice = createSlice({

17
types.d.ts vendored
View File

@ -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,13 +98,16 @@ interface Window {
appName: string;
}) => Promise<any>;
// getProjectLogs: (projectId: string) => Promise<{ success: boolean; logs: ProjectLogResponse[] }>;
getProjectLogs: (
projectID: string,
getProjectLogs: (
projectId: string,
fromDate?: string,
toDate?: string
) => Promise<{ success: boolean; logs: ProjectLogResponse[] }>;
) => Promise<{
success: boolean;
data: any;
message?: string;
}
>;
};
}