- {isStopping ? (
- // Skeleton for left side during stop
-
- ) : selectedProject ? (
- isTracking ? (
-
+
+ {/* Header */}
+ {isTracking &&
+
+
+ {isStopping ? (
+ // Skeleton for left side during stop
+
+ ) : selectedProject ? (
+ isTracking ? (
+
+ ) : (
+
+ )
) : (
- )
- ) : (
+ )}
+
+ {!isStopping && selectedProject ? (
+
+ {selectedProject.projectName}
+
+ ) : !isStopping ? (
+
+ No Project Selected
+
+ ) : null}
+
+ {isStopping ? (
+ // Skeleton for right side during stop
+
+ ) : (
+ <>
+
+ {formatTime(
+ isTracking ? elapsedTime : parseTimeStringToSeconds(selectedProject?.totalWorkTime || "0h 0m 0s")
+ )}
+
+
+ {/*
+
+ */}
+
+
+
+ )}
+
+ }
+
+ {/* Layout Body */}
+
+ {/* Sidebar */}
+
- {!isStopping && selectedProject ? (
-
- {selectedProject.projectName}
-
- ) : !isStopping ? (
-
- No Project Selected
-
- ) : null}
-
+ {/* Main Content */}
+
+
+
-
- {isStopping ? (
- // Skeleton for right side during stop
-
- ) : (
- <>
-
- {formatTime(
- isTracking ? elapsedTime : parseTimeStringToSeconds(selectedProject?.totalWorkTime || "0h 0m 0s")
- )}
-
-
-
-
-
-
-
-
- )}
-
-
- }
-
- {/* Layout Body */}
-
- {/* Sidebar */}
-
-
- {/* Main Content */}
-
-
-
-
-
setShowLogoutModal(false)}
- onConfirm={handleLogout}
- />
+ setShowLogoutModal(false)}
+ onConfirm={handleLogout}
+ />
+
-
);
};
diff --git a/src/ui/pages/Dashboard.tsx b/src/ui/pages/Dashboard.tsx
index 26d8220..5506739 100644
--- a/src/ui/pages/Dashboard.tsx
+++ b/src/ui/pages/Dashboard.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from "react";
-import { Clock, TrendingUp, Play, Square, ProjectorIcon, Pause } from "lucide-react";
+import { Clock, TrendingUp, Play, Square, ProjectorIcon, Pause, RefreshCw } from "lucide-react";
import { useOutletContext } from "react-router-dom";
import NoData from "./NoData";
import { useDispatch, useSelector } from "react-redux";
@@ -16,7 +16,7 @@ interface Project {
totalWorkTime: string;
totalWorkMs: number;
totalLogs: number;
- status: string
+ status: string;
}
interface ProjectTrackingData {
@@ -105,6 +105,7 @@ const Dashboard: React.FC = () => {
const selectedProject = useSelector((state: any) => state.projects.selectedProject);
const projectSummary = useSelector((state: any) => state.projects.projectSummary);
const projectTrackingMap = useSelector((state: any) => state.projects.projectTrackingMap);
+ const [isRefreshing, setIsRefreshing] = useState(false);
console.log("Line 111", projectsData, selectedProject, projectTrackingMap)
@@ -127,60 +128,69 @@ const Dashboard: React.FC = () => {
}
};
- useEffect(() => {
- const fetchProjects = async () => {
- try {
- console.log("๐ก Fetching projects...Dashboard");
- const res = await window.electron.getProjectList();
- console.log(" Project list response in dashboard:", res);
+ const fetchProjects = async () => {
+ setIsRefreshing(true)
+ try {
+ console.log("๐ก Fetching projects...Dashboard");
+ const res = await window.electron.getProjectList();
+ console.log(" Project list response in dashboard:", res);
- if (res?.success && Array.isArray(res.data)) {
- // Store data redux store
- dispatch(setProjectsDataSlice(res.data));
+ if (res?.success && Array.isArray(res.data)) {
+ // Store data redux store
+ dispatch(setProjectsDataSlice(res.data));
+ dispatch(
+ setProjectSummarySlice({
+ totalProjects: res.totalProjects || 0,
+ activeProjects: res.activeProjects || 0,
+ awayProjects: res.awayProjects || 0,
+ totalWorkTime: res.totalWorkTime || "0h 0m 0s",
+ totalWorkMs: res.totalWorkMs || 0,
+ vaName: res.vaName || "",
+ vaId: res.vaId || "",
+ })
+ );
+
+ // Auto-select first project
+ if (res.data.length > 0 && !selectedProject) {
+ const firstProject = res.data[0];
+
+ // Select the project
+ dispatch(setSelectedProjectSlice(firstProject));
+
+ const initialElapsed = parseTimeStringToSeconds(firstProject.totalWorkTime);
+
+ // Initialize tracking data for first project
dispatch(
- setProjectSummarySlice({
- totalProjects: res.totalProjects || 0,
- activeProjects: res.activeProjects || 0,
- awayProjects: res.awayProjects || 0,
- totalWorkTime: res.totalWorkTime || "0h 0m 0s",
- totalWorkMs: res.totalWorkMs || 0,
- vaName: res.vaName || "",
- vaId: res.vaId || "",
+ initializeProjectTracking({
+ projectId: firstProject.projectId,
+ initialTime: initialElapsed,
})
);
-
- // Auto-select first project
- if (res.data.length > 0 && !selectedProject) {
- const firstProject = res.data[0];
-
- // Select the project
- dispatch(setSelectedProjectSlice(firstProject));
-
- const initialElapsed = parseTimeStringToSeconds(firstProject.totalWorkTime);
-
- // Initialize tracking data for first project
- dispatch(
- initializeProjectTracking({
- projectId: firstProject.projectId,
- initialTime: initialElapsed,
- })
- );
- }
-
- fetchProfile()
-
- } else {
- console.warn("โ ๏ธ Unexpected response:", res);
}
- } catch (err) {
- console.error("โ Error fetching projects:", err);
- }
- };
+ fetchProfile()
+
+ } else {
+ console.warn("โ ๏ธ Unexpected response:", res);
+ }
+ } catch (err) {
+ console.error("โ Error fetching projects:", err);
+ } finally {
+ setIsRefreshing(false)
+ }
+ };
+
+ useEffect(() => {
fetchProjects();
}, []);
+ const handleRefresh = async () => {
+ // setIsRefreshing(true);
+ await fetchProjects();
+ // setTimeout(() => setIsRefreshing(false), 500); // Small delay for visual feedback
+ };
+
const selectedData = selectedProject
? projectTrackingMap[selectedProject.projectId]
: null;
@@ -234,7 +244,7 @@ const Dashboard: React.FC = () => {
};
return (
-
+
{/* Header */}
Dashboard
@@ -243,7 +253,7 @@ const Dashboard: React.FC = () => {
- {isStopping ? (
+ {(isStopping || isRefreshing) ? (
// Skeleton loader for tracking section
@@ -318,10 +328,19 @@ const Dashboard: React.FC = () => {
{/* ๐น Sticky Header */}
{/* ๐น Table or Empty State or Skeleton */}
- {isStopping ? (
+ {(isStopping || isRefreshing) ? (
// Skeleton loader for projects table
{[...Array(3)].map((_, index) => (
diff --git a/src/ui/pages/LeaveAndAdjustments/AdjustmentsTable.tsx b/src/ui/pages/LeaveAndAdjustments/AdjustmentsTable.tsx
new file mode 100644
index 0000000..0e0e65d
--- /dev/null
+++ b/src/ui/pages/LeaveAndAdjustments/AdjustmentsTable.tsx
@@ -0,0 +1,183 @@
+import React from "react";
+import { Loader2, RefreshCw } from "lucide-react";
+import { DateTime } from "luxon";
+
+interface AdjustmentItem {
+ id: string;
+ date: string;
+ loginTime: string;
+ logoutTime: string;
+ comment: string;
+ status: string;
+ requestedAt: string;
+ adjustedHours: string;
+ project: {
+ id: string;
+ name: string;
+ };
+}
+
+interface AdjustmentTableProps {
+ isTracking: boolean;
+ adjustments: AdjustmentItem[];
+ loading: boolean;
+ lastRefreshed: Date | null;
+ onRefresh: () => Promise
;
+}
+
+const AdjustmentsTable: React.FC = ({
+ isTracking,
+ adjustments,
+ loading,
+ lastRefreshed,
+ onRefresh
+}) => {
+ const [refreshing, setRefreshing] = React.useState(false);
+
+ // ๐ Convert UTC โ Local System Time
+ const toLocal = (utcString: string, format: string) => {
+ return DateTime.fromISO(utcString, { zone: "utc" })
+ .setZone(DateTime.local().zoneName)
+ .toFormat(format);
+ };
+
+ const formatTime = (t: string) => toLocal(t, "HH:mm:ss");
+ const formatDate = (d: string) => toLocal(d, "yyyy-MM-dd");
+
+ const handleRefresh = async () => {
+ setRefreshing(true);
+ await onRefresh();
+ setRefreshing(false);
+ };
+
+ const renderSkeleton = () =>
+ Array.from({ length: 7 }).map((_, i) => (
+
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+
+ ));
+
+ return (
+ <>
+
+
+
+
+ | # |
+ Project |
+ Date |
+ In โ Out |
+ Adjusted Hours |
+ Status |
+ Requested At |
+
+
+
+
+ {loading
+ ? renderSkeleton()
+ : adjustments.length === 0
+ ? (
+
+ |
+ No adjustments found
+ |
+
+ )
+ : adjustments.map((item, idx) => (
+
+ | {idx + 1} |
+
+
+
+ {item.project?.name || "N/A"}
+
+ |
+
+ {formatDate(item.date)} |
+
+
+ {formatTime(item.loginTime)}
+ โ {" "}
+ {formatTime(item.logoutTime)}
+ |
+
+
+
+ {item.adjustedHours}
+
+ |
+
+
+
+ {item.status}
+
+ |
+
+ {toLocal(item.requestedAt, "yyyy-MM-dd HH:mm:ss")} |
+
+ ))}
+
+ {/* {refreshing && adjustments.length > 0 && (
+
+ |
+
+ {renderSkeleton()}
+
+ |
+
+ )} */}
+
+
+
+
+ {adjustments.length} adjustment{adjustments.length !== 1 ? "s" : ""} found
+
+
+
+ {lastRefreshed && (
+
+ Last updated: {toLocal(lastRefreshed.toISOString(), "HH:mm:ss")}
+
+ )}
+
+
+
+
+
+
+
Apply Leave & Adjust Timesheet
+
+
+ {/* Tabs โ Disabled while submitting */}
+
+
+ {/* Main Container */}
+
+
+
+ {activeTab === "pto" && (
+
+ )}
+
+ {activeTab === "sick" && (
+
+ )}
+
+ {activeTab === "adjustment" && (
+
+ )}
+
+
+
+
+
-
-
Leave & Adjust Timesheet
-
- {/* Tabs โ Disabled while submitting */}
-
-
- {/* Main Container */}
-
-
-
- {activeTab === "pto" && (
-
- )}
-
- {activeTab === "sick" && (
-
- )}
-
- {activeTab === "adjustment" && (
-
- )}
-
-
-
+
+ {/* Header */}
+
+
Leave & Adjust Timesheet
+
-
+
+ {/* Tabs */}
+
+
+
+
+
+
+ {/* TABLE AREA - Scrollable */}
+
+ {activeTab === "leave" && (
+
+ )}
+ {activeTab === "adjustments" && (
+
+ )}
+
+
);
};
-export default LeaveAndAdjustments;
+export default LeaveAndAdjustments;
\ No newline at end of file
diff --git a/src/ui/pages/LeaveAndAdjustments/LeaveTable.tsx b/src/ui/pages/LeaveAndAdjustments/LeaveTable.tsx
new file mode 100644
index 0000000..8ffd576
--- /dev/null
+++ b/src/ui/pages/LeaveAndAdjustments/LeaveTable.tsx
@@ -0,0 +1,184 @@
+import React from "react";
+import { Loader2, RefreshCw } from "lucide-react";
+import { DateTime } from "luxon";
+
+interface LeaveItem {
+ leaveId: string;
+ dateFrom: string;
+ dateTo: string;
+ totalDays: number;
+ leaveType: string;
+ comment: string;
+ status: string;
+ appliedOn: string;
+ reviewedAt: string | null;
+ rejectionReason: string | null;
+}
+
+interface LeaveTableProps {
+ isTracking: boolean;
+ leaves: LeaveItem[];
+ loading: boolean;
+ lastRefreshed: Date | null;
+ onRefresh: () => Promise
;
+}
+
+const LeaveTable: React.FC = ({
+ isTracking,
+ leaves,
+ loading,
+ lastRefreshed,
+ onRefresh
+}) => {
+ const [refreshing, setRefreshing] = React.useState(false);
+
+ // ๐ Convert UTC โ Local System Time
+ const toLocal = (utcString: string, format: string) => {
+ return DateTime.fromISO(utcString, { zone: "utc" })
+ .setZone(DateTime.local().zoneName)
+ .toFormat(format);
+ };
+
+ const formatDate = (d: string) => toLocal(d, "yyyy-MM-dd");
+ const formatDateTime = (d: string) => toLocal(d, "yyyy-MM-dd HH:mm:ss");
+
+ const handleRefresh = async () => {
+ setRefreshing(true);
+ await onRefresh();
+ setRefreshing(false);
+ };
+
+ const renderSkeletonRows = () =>
+ Array.from({ length: 5 }).map((_, index) => (
+
+ |
+ |
+ |
+ |
+ |
+ |
+
+ ));
+
+ const formatLastRefreshed = () =>
+ lastRefreshed
+ ? DateTime.fromJSDate(lastRefreshed)
+ .setZone(DateTime.local().zoneName)
+ .toFormat("HH:mm:ss")
+ : "Never";
+
+ return (
+ <>
+ {/* Table Container */}
+
+
+
+
+ | # |
+ Leave Type |
+ Date From โ To |
+ Status |
+ Total Days |
+ Applied On |
+
+
+
+
+ {loading ? (
+ renderSkeletonRows()
+ ) : refreshing && leaves.length === 0 ? (
+ renderSkeletonRows()
+ ) : leaves.length > 0 ? (
+ leaves.map((leave, index) => (
+
+ | {index + 1} |
+
+
+
+ {leave.leaveType}
+
+ |
+
+
+ {formatDate(leave.dateFrom)}
+ โ {" "}
+ {formatDate(leave.dateTo)}
+ |
+
+
+
+ {leave.status}
+
+ |
+
+ {leave.totalDays} |
+
+ {formatDateTime(leave.appliedOn)} |
+
+ ))
+ ) : (
+
+ |
+ No leaves found
+ |
+
+ )}
+
+ {/* {!refreshing && leaves.length > 0 && (
+
+ |
+
+ {renderSkeletonRows()}
+
+ |
+
+ )} */}
+
+
+
+
+ {leaves.length} leave{leaves.length !== 1 ? "s" : ""} found
+
+
+
+ {lastRefreshed && (
+
+ Last updated: {formatLastRefreshed()}
+
+ )}
+
+
+
+
{errors.comment}
}
+ {errors.comment &&
{errors.comment}
}
{serverError && (
diff --git a/src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx b/src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx
index 180e6ae..8ac6d6f 100644
--- a/src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx
+++ b/src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx
@@ -3,6 +3,7 @@ import { quillModules } from "../../../utils/quillConfig";
import ReactQuill from "react-quill-new";
import Quill from "quill";
import "quill/dist/quill.snow.css"; // correct CSS
+import { useNavigate } from 'react-router-dom';
interface LeaveFormData {
fromDate: string;
@@ -22,6 +23,7 @@ const SickLeaveTab: React.FC<{
const [serverError, setServerError] = useState("");
const quillRef = useRef
(null);
const [sickErrors, setSickErrors] = useState>({});
+ const navigate = useNavigate()
useEffect(() => {
const editor = quillRef.current?.getEditor();
@@ -188,7 +190,8 @@ const SickLeaveTab: React.FC<{
if (result.success) {
resetForm();
- alert("SICK submitted!");
+ alert("SICK leave applied!");
+ navigate('/dashboard/leave-adjustments')
} else {
setServerError(result.message || "Something went wrong");
}
diff --git a/src/ui/pages/PaySlips/PaysSlips.tsx b/src/ui/pages/PaySlips/PaysSlips.tsx
new file mode 100644
index 0000000..b54e3c9
--- /dev/null
+++ b/src/ui/pages/PaySlips/PaysSlips.tsx
@@ -0,0 +1,131 @@
+import { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store";
+
+const PaysSlips = () => {
+ const { projectSummary } =
+ useSelector((state: any) => state.projects);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [rows, setRows] = useState([]);
+
+ useEffect(() => {
+ if (!projectSummary?.vaId) return;
+
+ fetchPayslips(projectSummary?.vaId);
+
+}, [projectSummary?.vaId]);
+
+ const fetchPayslips = async (vaId: string) => {
+ setLoading(true);
+ setError(null);
+
+ try {
+ console.log("getPayslips" , vaId)
+ const result = await window.electron.getPayslips(vaId);
+
+ if (!result.success) {
+ setError(result.message || "Failed to load payslips");
+ return;
+ }
+
+ const response = result.data;
+
+ if (!response || response.length === 0) {
+ setRows([]);
+ return;
+ }
+
+ // Extract payrolls array from first index
+ const payrolls = response[0]?.payrolls || [];
+
+ setRows(payrolls);
+ } catch (err: any) {
+ setError("An unexpected error occurred");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <>
+
+
+
Payslips
+
+
+
+
+ {loading && (
+
+
+
+ )}
+
+ {error && (
+
{error}
+ )}
+
+ {!loading && !error && rows.length === 0 && (
+
+ No payslip data available.
+
+ )}
+
+ {!loading && !error && rows.length > 0 && (
+
+
+
+
+ | # |
+ Status |
+ Date |
+ Total Hours |
+ Total Pay |
+ Action |
+
+
+
+
+ {rows.map((row, index) => (
+
+ | {index + 1} |
+
+
+
+ {row.status}
+
+ |
+
+ {row.payrollSchedule} |
+
+ {row.totalHoursFormatted} |
+
+ ${row.totalPayAmount.toFixed(2)} |
+
+
+
+ |
+
+ ))}
+
+
+
+ )}
+
+
+ |
+ |
+ |
+ |
+
+ ));
+
+ const formatLastRefreshed = () => {
+ if (!lastRefreshed) return "Never";
+
+ return DateTime.fromJSDate(lastRefreshed)
+ .toLocal()
+ .toFormat("HH:mm:ss"); // Only time
+ };
return (
- <>
-
- {/* Header */}
-
-
Schedules
+
+ {/* HEADER */}
+
+
Schedules
+
+
+ {activeSchedule && (
+
+ Pay Date: {formatOnlyDate(activeSchedule.ScheduleDate)}
+
+ )}
+
+
-
- {/* โญ FIXED: Horizontal scroll wrapper */}
-
-
+ {/* TABLE WRAPPER */}
+
+ {/* Loading */}
+ {loading ? (
+
+ {renderSkeletonRows()}
+
+ ) : error ? (
+
{error}
+ ) : rows.length === 0 ? (
+
+ No schedules found
+
+ ) : (
+
+
| # |
@@ -76,24 +153,61 @@ const Schedule = () => {
{rows.map((row, index) => (
-
+
| {index + 1} |
- {row.period} |
- {row.cutoff}
-
- (Asia/Calcutta)
+ {formatOnlyDate(row.periodStart)} โ{" "}
+ {formatOnlyDate(row.periodEnd)}
|
- {row.payDate} |
+ {formatDateTime(row.cutOffTime)} |
+ {formatOnlyDate(row.ScheduleDate)} |
))}
+
+ {refreshing && (
+
+ |
+
+ Refreshing...
+ |
+
+ )}
+ )}
+
+
{rows.length} schedules found
+
+
+
+ {lastRefreshed &&
+ `Last updated: ${formatLastRefreshed()}`}
+
-
- ๐ฌ Skype
-
-
- {profile?.skype || "Not Linked"}
-
-
-
- Payment
-
-
- {profile?.paymentMethod || "N/A"}
-
+
setShowPaymentModal(true)}>
+
+
+
+ Payment
+
+
+ {profile?.paymentMethod || "N/A"}
+
+
+
+
+
+
- {profile?.paymentMethod === "payoneer" && (
+
+ {profile?.paymentMethod === "wise" && (
- ๐ณ Payoneer
+ ๐ณ Wise
- {maskLast5(profile?.payoneerAccount)}
+ {maskLast5(profile?.wiseEmail)}
)}
@@ -137,8 +140,9 @@ const Settings: React.FC = () => {
+ |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+ ));
+ };
+
return (
-
+
{/* Header */}
-
-
-
Timesheets
-
+
+
Timesheets
- {/* Summary Cards */}
- {/*
-
-
-
-
Total Logged Hours
-
{totalHours} hrs
-
-
-
-
-
-
-
-
-
Approved Days
-
{approvedCount}
-
-
-
-
-
-
-
-
-
Pending Days
-
- {timesheetData.length - approvedCount}
-
-
-
-
-
-
*/}
-
{/* Timesheet Table */}
-
-
-
+
+
+
| # |
Project |
@@ -161,34 +207,83 @@ const Timesheets: React.FC = () => {
- {projectsData.map((entry, index) => (
-
- | {index + 1} |
- {entry.projectName} |
- {formatWorkTime(entry.totalWorkTime)} |
-
-
+ {initialLoading ? (
+ // Show skeleton while initially loading
+ renderSkeletonRows()
+ ) : refreshing && projectsData.length === 0 ? (
+ // Show skeleton while refreshing with empty data
+ renderSkeletonRows()
+ ) : (
+ // Show actual data
+ projectsData.map((entry, index) => (
+ |
+ | {index + 1} |
+ {entry.projectName} |
+ {formatWorkTime(entry.totalWorkTime)} |
+
+
+ |
+
+ ))
+ )}
+
+ {/* {refreshing && projectsData.length > 0 && (
+ // Show a single skeleton row at the top while refreshing with existing data
+
+ |
+
+
+ Refreshing...
+
|
- ))}
+ )} */}
- {/*
- Showing {timesheetData.length} entries
- */}
-
- Last updated: {new Date().toLocaleDateString()}
-
+
+
+ {activeProjects.length} project{activeProjects.length !== 1 ? 's' : ''} shown
+
+
+
+ {lastRefreshed && (
+
+ Last updated: {formatLastRefreshed()}
+
+ )}
+
+
+
+