802 lines
27 KiB
TypeScript
802 lines
27 KiB
TypeScript
import React, { useState, useEffect, useRef, useCallback } from "react";
|
|
import io, { Socket } from 'socket.io-client';
|
|
|
|
import {
|
|
Outlet,
|
|
NavLink,
|
|
useNavigate,
|
|
useLocation,
|
|
} from "react-router-dom";
|
|
import {
|
|
Bell,
|
|
Menu,
|
|
LogOut,
|
|
User,
|
|
Settings,
|
|
Home,
|
|
FolderKanban,
|
|
X,
|
|
CalendarDays,
|
|
SettingsIcon,
|
|
TimerIcon,
|
|
HelpCircleIcon,
|
|
Pause,
|
|
ShieldBan,
|
|
ChevronDown,
|
|
Play,
|
|
ChevronUp,
|
|
GlobeLock,
|
|
ClipboardClock,
|
|
CircleDollarSign,
|
|
} from "lucide-react";
|
|
import { useActiveAppTracker } from "../hooks/useActiveAppTracker";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { RootState } from "../store";
|
|
import { initializeProjectTracking, setProjectsDataSlice, setProjectSummarySlice, setSelectedProjectSlice, startTracking, stopTrackingReducer, updateElapsedTime, updateProjectTracking } from "../store/projectSlice";
|
|
import { clearUser } from "../store/userSlice";
|
|
import { setError, setLoading, setProfile } from "../store/profileSlice";
|
|
import { canStartTracking } from "../utils/projectLimits";
|
|
import { useTheme } from "../helper/ThemeToggle";
|
|
import LogoutModal from "../modal/LogoutModal";
|
|
import { parseTimeStringToSeconds } from "../utils/timeParser";
|
|
|
|
interface User {
|
|
id: string;
|
|
name: string;
|
|
email: string;
|
|
}
|
|
|
|
interface Project {
|
|
projectId: string;
|
|
projectName: string;
|
|
activityStatus: "ACTIVE" | "AWAY";
|
|
totalWorkTime: string;
|
|
totalWorkMs: number;
|
|
totalLogs: number;
|
|
dedicatedHours: string;
|
|
}
|
|
|
|
interface ProjectTrackingData {
|
|
elapsedTime: number;
|
|
startTime: Date | null;
|
|
endTime: Date | null;
|
|
isTracking: boolean;
|
|
isPaused: boolean;
|
|
pauseStartTime: Date | null;
|
|
totalPausedTime: number;
|
|
accumulatedTime: number;
|
|
}
|
|
|
|
export interface TrackingState {
|
|
selectedProject: Project | null;
|
|
isTracking: boolean;
|
|
isPaused: boolean;
|
|
elapsedTime: number;
|
|
startTime: Date | null;
|
|
endTime: Date | null;
|
|
handleStartTracking: (project: Project) => void;
|
|
handlePauseResume: () => void;
|
|
handleStopTracking: () => void;
|
|
handleProjectSelect: (projectId: string) => void;
|
|
projectsData: Project[];
|
|
loadingStart: boolean,
|
|
loadingStop: boolean,
|
|
isStopping: boolean
|
|
}
|
|
|
|
const DashboardLayout = () => {
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(theme === "dark" ? "light" : "dark");
|
|
};
|
|
const [isSidebarOpen, setSidebarOpen] = useState(true);
|
|
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const dispatch = useDispatch();
|
|
const [isStopping, setIsStopping] = useState(false);
|
|
|
|
const { projectsData, projectSummary, selectedProject, projectTrackingMap } =
|
|
useSelector((state: any) => state.projects);
|
|
|
|
const tracking = selectedProject
|
|
? projectTrackingMap[selectedProject.projectId]
|
|
: null;
|
|
|
|
const isTracking = tracking?.isTracking;
|
|
const elapsedTime = tracking?.elapsedTime || 0;
|
|
|
|
const { windowLogs } = useSelector((state: RootState) => state.window);
|
|
|
|
const menuItems = [
|
|
{ label: "Dashboard", path: "/dashboard", icon: <Home size={18} />, exact: true },
|
|
{ label: "Timesheet", path: "/dashboard/timesheet", icon: <TimerIcon size={18} /> },
|
|
{ label: "Leave & Adjust", path: "/dashboard/leave-adjustments", icon: <CalendarDays size={18} /> },
|
|
{ label: "Schedule", path: "/dashboard/schedule", icon: <ClipboardClock size={18} /> },
|
|
{ label: "Pays Slips", path: "/dashboard/pays-slips", icon: <CircleDollarSign size={18} /> },
|
|
{ label: "Settings", path: "/dashboard/settings", icon: <SettingsIcon size={18} /> },
|
|
{ label: "VPN", path: "/dashboard/vpn", icon: <GlobeLock size={18} /> },
|
|
{ label: "Help & Support", path: "/dashboard/help-support", icon: <HelpCircleIcon size={18} /> },
|
|
];
|
|
|
|
const [isPaused, setIsPaused] = useState(false);
|
|
const [startTime, setStartTime] = useState<Date | null>(null);
|
|
const [endTime, setEndTime] = useState<Date | null>(null);
|
|
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
const [activeProjectLogId, setActiveProjectLogId] = useState("");
|
|
const toggleWindowSize = useRef(true);
|
|
const [loadingStart, setLoadingStart] = useState(false);
|
|
const [loadingStop, setLoadingStop] = useState(false);
|
|
const [showLogoutModal, setShowLogoutModal] = useState(false);
|
|
|
|
|
|
useEffect(() => {
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
}, [theme]);
|
|
|
|
|
|
// Create a ref to store the stop function so it can be called from the hook
|
|
const stopTrackingRef = useRef<(() => Promise<void>) | null>(null);
|
|
|
|
// Define handleStopTracking FIRST
|
|
const handleStopTracking = useCallback(async () => {
|
|
if (loadingStop || loadingStart) return;
|
|
|
|
if (!selectedProject) {
|
|
console.warn("No selected project to stop");
|
|
return;
|
|
}
|
|
|
|
let currentStopTime = new Date().toISOString();
|
|
const projectId = selectedProject.projectId;
|
|
|
|
console.log(" Stop tracking initiated for:", selectedProject.projectName);
|
|
console.log(" Current elapsed time:", elapsedTime);
|
|
|
|
setIsStopping(true);
|
|
setLoadingStop(true);
|
|
handleSocketDisconnect();
|
|
|
|
// STEP 1: Clear timer FIRST to prevent further client-side updates
|
|
if (timerRef.current) {
|
|
clearInterval(timerRef.current);
|
|
timerRef.current = null;
|
|
console.log("Timer cleared");
|
|
}
|
|
|
|
// STEP 2: Send final PATCH with last active window data
|
|
if (stopTrackingRef.current) {
|
|
try {
|
|
console.log(" Sending final PATCH to record last activity...");
|
|
await stopTrackingRef.current();
|
|
console.log(" Final tracking data sent successfully");
|
|
} catch (error) {
|
|
console.error(" Error sending final tracking data:", error);
|
|
}
|
|
}
|
|
|
|
// STEP 3: Send LOGOUT to backend
|
|
try {
|
|
const payload = {
|
|
vaId: projectSummary.vaId,
|
|
projectId: projectId,
|
|
type: "LOGOUT",
|
|
time: currentStopTime
|
|
};
|
|
|
|
console.log("📡 Sending LOGOUT request:", payload);
|
|
const res = await window.electron.stopProjectTracking(payload);
|
|
console.log(" LOGOUT successful:", res);
|
|
} catch (error) {
|
|
console.error(" Failed to send LOGOUT:", error);
|
|
}
|
|
|
|
// STEP 4: Update Redux tracking state to stop tracking
|
|
console.log("🔄 Updating Redux state to stop tracking...");
|
|
dispatch(
|
|
stopTrackingReducer({
|
|
projectId,
|
|
})
|
|
);
|
|
|
|
// Allow React to process the state update
|
|
await new Promise(resolve => setTimeout(resolve, 50));
|
|
|
|
// STEP 5: Refresh project list to get updated work hours from server
|
|
try {
|
|
console.log("🔄 Refreshing project list...");
|
|
const projectListRes = await window.electron.getProjectList();
|
|
console.log("📊 Updated project list:", projectListRes);
|
|
|
|
if (projectListRes?.success && Array.isArray(projectListRes.data)) {
|
|
// Update projects data
|
|
dispatch(setProjectsDataSlice(projectListRes.data));
|
|
|
|
// Update project summary
|
|
dispatch(
|
|
setProjectSummarySlice({
|
|
totalProjects: projectListRes.totalProjects || 0,
|
|
activeProjects: projectListRes.activeProjects || 0,
|
|
awayProjects: projectListRes.awayProjects || 0,
|
|
totalWorkTime: projectListRes.totalWorkTime || "0h 0m 0s",
|
|
totalWorkMs: projectListRes.totalWorkMs || 0,
|
|
vaName: projectListRes.vaName || "",
|
|
vaId: projectListRes.vaId || "",
|
|
})
|
|
);
|
|
|
|
// Update selected project with fresh data
|
|
const updatedProject = projectListRes.data.find(
|
|
(p: Project) => p.projectId === projectId
|
|
);
|
|
|
|
if (updatedProject) {
|
|
dispatch(setSelectedProjectSlice(updatedProject));
|
|
|
|
// CRITICAL FIX: Use server time instead of client elapsedTime
|
|
const serverElapsedTime = parseTimeStringToSeconds(updatedProject.totalWorkTime);
|
|
|
|
console.log("🔄 Syncing client time with server time:", {
|
|
serverTime: updatedProject.totalWorkTime,
|
|
serverElapsedSeconds: serverElapsedTime,
|
|
previousClientTime: elapsedTime,
|
|
difference: serverElapsedTime - elapsedTime
|
|
});
|
|
|
|
// Force update the tracking map with server time
|
|
dispatch(
|
|
updateProjectTracking({
|
|
projectId: updatedProject.projectId,
|
|
data: {
|
|
elapsedTime: serverElapsedTime,
|
|
accumulatedTime: serverElapsedTime,
|
|
isTracking: false,
|
|
isPaused: false,
|
|
startTime: null,
|
|
endTime: Date.now(),
|
|
pauseStartTime: null,
|
|
totalPausedTime: 0
|
|
}
|
|
})
|
|
);
|
|
|
|
console.log("✅ Selected project updated with server time");
|
|
}
|
|
}
|
|
|
|
// STEP 6: Update UI (window restore)
|
|
await window.electron.toggleCloseBtn(true);
|
|
await window.electron.resizeWindow(500, 600);
|
|
toggleWindowSize.current = true;
|
|
|
|
} catch (error) {
|
|
console.error("❌ Error refreshing project list:", error);
|
|
} finally {
|
|
// Clear loading states
|
|
setLoadingStop(false);
|
|
setIsStopping(false);
|
|
console.log("🎉 TRACKING STOPPED SUCCESSFULLY");
|
|
}
|
|
}, [selectedProject, projectSummary, elapsedTime, dispatch]);
|
|
|
|
// NOW define handleLimitExceeded using the defined handleStopTracking
|
|
const handleLimitExceeded = useCallback(async () => {
|
|
console.log("🚨 LIMIT EXCEEDED - Auto-stopping tracking");
|
|
|
|
if (!selectedProject) {
|
|
console.error(" No selected project for limit exceeded");
|
|
return;
|
|
}
|
|
|
|
console.log("Alert Message 1")
|
|
// Show alert to user
|
|
alert(
|
|
`⏰ Daily Limit Reached!\n\n` +
|
|
`Project: ${selectedProject.projectName}\n` +
|
|
`Dedicated Hours: ${selectedProject.dedicatedHours}\n\n` +
|
|
`Your tracking has been stopped automatically because you've reached the daily time limit for this project.`
|
|
);
|
|
console.log("Alert Message 2")
|
|
// Stop tracking
|
|
// await handleStopTracking();
|
|
}, [selectedProject, handleStopTracking]);
|
|
|
|
// Initialize useActiveAppTracker and store finalizeTracking in ref
|
|
const { finalizeTracking } = useActiveAppTracker(
|
|
isTracking,
|
|
activeProjectLogId,
|
|
selectedProject?.projectId ?? null,
|
|
selectedProject?.projectName ?? null,
|
|
handleLimitExceeded
|
|
);
|
|
|
|
// Update the ref whenever finalizeTracking changes
|
|
useEffect(() => {
|
|
stopTrackingRef.current = finalizeTracking;
|
|
}, [finalizeTracking]);
|
|
|
|
const socketRef = useRef<Socket | null>(null);
|
|
const intervalRef = useRef<number | null>(null);
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!window.electron?.onTokenExpired) return;
|
|
|
|
console.log("🔐 Token expiry listener registered");
|
|
|
|
window.electron.onTokenExpired(async () => {
|
|
console.log("🔥 Token expired — checking tracking status...");
|
|
|
|
// If user is tracking → FIRST stop tracking
|
|
if (isTracking && handleStopTracking) {
|
|
console.log("⛔ Token expired DURING tracking → stopping tracking first...");
|
|
|
|
try {
|
|
await handleStopTracking(); // Wait until stop is completed
|
|
console.log("🛑 Tracking stopped successfully before logout");
|
|
} catch (err) {
|
|
console.error(" Error while stopping tracking after token expiry:", err);
|
|
}
|
|
}
|
|
|
|
// Then perform logout
|
|
console.log("🚪 Proceeding to logout due to token expiry...");
|
|
await handleLogout();
|
|
});
|
|
|
|
return () => {
|
|
console.log("🧹 Cleaning token-expired listener");
|
|
};
|
|
}, [isTracking, handleStopTracking]);
|
|
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
const res = await window.electron.logout();
|
|
if (res) {
|
|
dispatch(clearUser());
|
|
navigate("/login");
|
|
}
|
|
} catch (error) {
|
|
console.error("Logout error:", error);
|
|
}
|
|
};
|
|
|
|
const selectedData = selectedProject
|
|
? projectTrackingMap[selectedProject.projectId]
|
|
: null;
|
|
|
|
const handleStartTracking = async (project: Project) => {
|
|
if (loadingStart || loadingStop) return;
|
|
|
|
// Check limit before starting
|
|
const limitCheck = canStartTracking(project);
|
|
if (!limitCheck.canStart) {
|
|
alert(
|
|
`⚠️ Cannot Start Tracking!\n\n` +
|
|
`Project: ${project.projectName}\n` +
|
|
`Reason: ${limitCheck.reason}\n\n` +
|
|
`You've already completed your daily hours for this project.`
|
|
);
|
|
return;
|
|
}
|
|
|
|
console.log(`⏰ Starting tracking. Remaining time: ${limitCheck.remaining}`);
|
|
|
|
setLoadingStart(true);
|
|
|
|
const now = Date.now();
|
|
let currentStartTime = new Date().toISOString();
|
|
window.electron.toggleCloseBtn(false);
|
|
|
|
const payload = {
|
|
vaId: projectSummary.vaId,
|
|
projectId: project.projectId,
|
|
type: "LOGIN",
|
|
time: currentStartTime
|
|
};
|
|
|
|
try {
|
|
const res = await window.electron.startProjectTracking(payload);
|
|
|
|
if (!res.success) {
|
|
alert(res.message);
|
|
await window.electron.toggleCloseBtn(true);
|
|
return;
|
|
}
|
|
|
|
// CRITICAL FIX: Get the current accumulated time BEFORE starting timer
|
|
const currentAccumulatedTime = selectedData?.accumulatedTime || parseTimeStringToSeconds(project.totalWorkTime);
|
|
|
|
console.log("📊 Starting with accumulated time:", {
|
|
accumulatedTime: currentAccumulatedTime,
|
|
projectTotalWorkTime: project.totalWorkTime,
|
|
parsedTime: parseTimeStringToSeconds(project.totalWorkTime)
|
|
});
|
|
|
|
// ⬇️ REDUX UPDATE: Start Tracking
|
|
dispatch(
|
|
startTracking({
|
|
projectId: project.projectId,
|
|
startTime: now,
|
|
})
|
|
);
|
|
|
|
handleSocketConnect();
|
|
setActiveProjectLogId(res?.data?.logId);
|
|
console.log(" Tracking started. Log ID:", res?.data?.logId);
|
|
|
|
// ⬇️ Calculate time limit in seconds
|
|
const parseTimeToSeconds = (timeStr: string): number => {
|
|
return parseTimeStringToSeconds(timeStr);
|
|
};
|
|
|
|
const dedicatedSeconds = parseTimeToSeconds(project.dedicatedHours);
|
|
const alreadyWorkedSeconds = parseTimeStringToSeconds(project.totalWorkTime);
|
|
const remainingSeconds = dedicatedSeconds - alreadyWorkedSeconds;
|
|
|
|
console.log("⏱️ Time Limits:", {
|
|
dedicatedHours: project.dedicatedHours,
|
|
dedicatedSeconds,
|
|
alreadyWorked: `${Math.floor(alreadyWorkedSeconds / 60)}m ${alreadyWorkedSeconds % 60}s`,
|
|
remainingSeconds,
|
|
remainingMinutes: Math.floor(remainingSeconds / 60)
|
|
});
|
|
|
|
// ⬇️ FIXED: Start timer with proper initial time
|
|
// Set initial elapsed time immediately to avoid jump
|
|
dispatch(
|
|
updateElapsedTime({
|
|
projectId: project.projectId,
|
|
elapsedTime: currentAccumulatedTime,
|
|
})
|
|
);
|
|
|
|
// Start global timer loop with limit check
|
|
timerRef.current = setInterval(() => {
|
|
const timeSinceStart = Math.floor((Date.now() - now) / 1000);
|
|
const currentElapsed = currentAccumulatedTime + timeSinceStart;
|
|
|
|
dispatch(
|
|
updateElapsedTime({
|
|
projectId: project.projectId,
|
|
elapsedTime: currentElapsed,
|
|
})
|
|
);
|
|
|
|
// Check if time limit reached
|
|
const totalTimeWorked = alreadyWorkedSeconds + timeSinceStart;
|
|
|
|
if (totalTimeWorked >= dedicatedSeconds) {
|
|
console.warn("🚨 CLIENT-SIDE: Time limit reached!");
|
|
console.log(`Total worked: ${Math.floor(totalTimeWorked / 60)}m vs Limit: ${Math.floor(dedicatedSeconds / 60)}m`);
|
|
|
|
// Clear timer first to prevent multiple triggers
|
|
if (timerRef.current) {
|
|
clearInterval(timerRef.current);
|
|
timerRef.current = null;
|
|
}
|
|
|
|
// Trigger auto-stop
|
|
handleLimitExceeded();
|
|
handleSocketDisconnect();
|
|
}
|
|
}, 1000);
|
|
|
|
} catch (error) {
|
|
console.error(" Failed to sync project start:", error);
|
|
alert("Something went wrong!");
|
|
await window.electron.toggleCloseBtn(true);
|
|
} finally {
|
|
setLoadingStart(false);
|
|
}
|
|
};
|
|
|
|
const handlePauseResume = () => {
|
|
if (!selectedProject) return;
|
|
// Implement pause/resume logic if needed
|
|
};
|
|
|
|
// Cleanup timer on unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
if (timerRef.current) {
|
|
clearInterval(timerRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const handleProjectSelect = (projectId: string) => {
|
|
const project = projectsData.find((p: any) => p.projectId === projectId);
|
|
if (!project) return;
|
|
|
|
dispatch(setSelectedProjectSlice(project));
|
|
|
|
const existing = projectTrackingMap[projectId];
|
|
|
|
if (!existing) {
|
|
// Use parsed totalWorkTime instead of totalWorkMs
|
|
const initialTime = parseTimeStringToSeconds(project.totalWorkTime);
|
|
dispatch(initializeProjectTracking({
|
|
projectId,
|
|
initialTime: initialTime
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleSocketConnect = 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://daniela-nonprofessed-boastfully.ngrok-free.app", {
|
|
transports: ["websocket"],
|
|
secure: true,
|
|
rejectUnauthorized: false,
|
|
reconnection: true,
|
|
withCredentials: true,
|
|
forceNew: true,
|
|
extraHeaders: {
|
|
"Access-Control-Allow-Origin": "*"
|
|
},
|
|
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 });
|
|
}, 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,
|
|
projectId: selectedProject?.projectId,
|
|
});
|
|
}
|
|
});
|
|
|
|
socketRef.current.on("disconnect", () => {
|
|
console.log("🔴 Disconnected");
|
|
setIsConnected(false);
|
|
if (intervalRef.current) {
|
|
clearInterval(intervalRef.current);
|
|
intervalRef.current = null;
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleSocketDisconnect = () => {
|
|
if (intervalRef.current) {
|
|
clearInterval(intervalRef.current);
|
|
intervalRef.current = null;
|
|
}
|
|
|
|
if (socketRef.current) {
|
|
socketRef.current.disconnect();
|
|
socketRef.current = null;
|
|
setIsConnected(false);
|
|
console.log("🔌 Disconnected manually");
|
|
}
|
|
};
|
|
|
|
|
|
const trackingState: TrackingState = {
|
|
selectedProject,
|
|
isTracking,
|
|
isPaused,
|
|
elapsedTime,
|
|
startTime,
|
|
endTime,
|
|
handleStartTracking,
|
|
handlePauseResume,
|
|
handleStopTracking,
|
|
projectsData,
|
|
handleProjectSelect,
|
|
loadingStart,
|
|
loadingStop,
|
|
isStopping
|
|
};
|
|
|
|
const formatTime = (seconds: number) => {
|
|
const hrs = Math.floor(seconds / 3600);
|
|
const mins = Math.floor((seconds % 3600) / 60);
|
|
const secs = seconds % 60;
|
|
return `${hrs}h ${mins}m ${secs}s`;
|
|
// return `${hrs}h ${mins}m `;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col h-screen overflow-hidden">
|
|
{/* Header */}
|
|
{isTracking &&
|
|
<header className="w-full flex justify-between items-center px-4 py-2 bg-base-100 border-b border-base-300 sticky top-0 z-30">
|
|
<div className="flex items-center space-x-3">
|
|
{isStopping ? (
|
|
// Skeleton for left side during stop
|
|
<div className="flex items-center space-x-3">
|
|
<div className="skeleton w-8 h-8 rounded-full"></div>
|
|
<div className="skeleton w-32 h-4"></div>
|
|
</div>
|
|
) : selectedProject ? (
|
|
isTracking ? (
|
|
<button
|
|
className="bg-error text-white p-1.5 rounded-full flex items-center justify-center cursor-pointer"
|
|
onClick={handleStopTracking}
|
|
disabled={loadingStop}
|
|
title="Stop Tracking"
|
|
>
|
|
{loadingStop ? (
|
|
<span className="loading loading-spinner loading-xs text-white"></span>
|
|
) : (
|
|
<Pause size={16} />
|
|
)}
|
|
</button>
|
|
) : (
|
|
<button
|
|
className="bg-success text-white p-1.5 rounded-full flex items-center justify-center cursor-pointer"
|
|
onClick={() => handleStartTracking(selectedProject)}
|
|
title="Start Tracking"
|
|
>
|
|
<Play size={16} />
|
|
</button>
|
|
)
|
|
) : (
|
|
<button
|
|
className="bg-gray-400 text-white p-1.5 rounded-full flex items-center justify-center cursor-not-allowed"
|
|
disabled
|
|
title="Select a project to start"
|
|
>
|
|
<Play size={16} />
|
|
</button>
|
|
)}
|
|
|
|
{!isStopping && selectedProject ? (
|
|
<span className="ml-2 text-sm text-base-content/70">
|
|
{selectedProject.projectName}
|
|
</span>
|
|
) : !isStopping ? (
|
|
<span className="ml-2 text-sm text-base-content/40 italic">
|
|
No Project Selected
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
{isStopping ? (
|
|
// Skeleton for right side during stop
|
|
<div className="flex items-center space-x-3">
|
|
<div className="skeleton w-20 h-6 rounded"></div>
|
|
<div className="skeleton w-6 h-6 rounded"></div>
|
|
<div className="skeleton w-8 h-8 rounded"></div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="badge badge-success text-white font-semibold px-3 py-2 shadow-sm">
|
|
{formatTime(
|
|
isTracking ? elapsedTime : parseTimeStringToSeconds(selectedProject?.totalWorkTime || "0h 0m 0s")
|
|
)}
|
|
</div>
|
|
|
|
{/* <span className="text-error">
|
|
<ShieldBan size={18} />
|
|
</span> */}
|
|
|
|
<button
|
|
onClick={() => {
|
|
if (toggleWindowSize.current) {
|
|
window.electron.resizeWindow(500, 85);
|
|
toggleWindowSize.current = false;
|
|
} else {
|
|
window.electron.resizeWindow(500, 600);
|
|
toggleWindowSize.current = true;
|
|
}
|
|
}}
|
|
className="btn btn-xs btn-outline btn-primary"
|
|
>
|
|
{toggleWindowSize.current ? <ChevronDown /> : <ChevronUp />}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</header>
|
|
}
|
|
|
|
{/* Layout Body */}
|
|
<div className={`flex flex-1 bg-base-200 overflow-hidden`}>
|
|
{/* Sidebar */}
|
|
<aside className="flex-none w-16 border-r border-base-300 bg-base-100 flex flex-col items-center py-4 gap-2">
|
|
{menuItems.map((item) => (
|
|
<div className="tooltip z-100 tooltip-right " key={item.label} data-tip={item.label}>
|
|
<NavLink
|
|
to={item.path}
|
|
end={item.exact}
|
|
className={({ isActive }) =>
|
|
`flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-150 cursor-pointer ${isActive
|
|
? "bg-primary text-primary-content"
|
|
: "hover:bg-base-300 text-base-content"
|
|
}`
|
|
}
|
|
>
|
|
{item.icon}
|
|
</NavLink>
|
|
</div>
|
|
))}
|
|
|
|
<div className={`absolute ${!isTracking ? "bottom-13" : "bottom-5"} `}>
|
|
<label className="swap swap-rotate p-2.5">
|
|
{/* this hidden checkbox controls the state */}
|
|
<input type="checkbox" className="theme-controller" onChange={toggleTheme}
|
|
checked={theme === "dark"} />
|
|
|
|
{/* sun icon */}
|
|
<svg
|
|
className="swap-off h-5 w-5 fill-current"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24">
|
|
<path
|
|
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
|
|
</svg>
|
|
{/* moon icon */}
|
|
<svg
|
|
className="swap-on h-5 w-5 fill-current"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24">
|
|
<path
|
|
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
|
|
{!isTracking && (
|
|
<button
|
|
onClick={() => setShowLogoutModal(true)}
|
|
className="flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-150 hover:bg-error/10 text-error hover:text-error mt-auto cursor-pointer tooltip tooltip-right"
|
|
data-tip={"Logout"}
|
|
>
|
|
<LogOut size={18} />
|
|
</button>
|
|
)}
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 overflow-y-auto p-4 no-scrollbar bg-base-200">
|
|
<Outlet context={trackingState} />
|
|
</main>
|
|
|
|
<LogoutModal
|
|
open={showLogoutModal}
|
|
onClose={() => setShowLogoutModal(false)}
|
|
onConfirm={handleLogout}
|
|
/>
|
|
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DashboardLayout; |