BhawanSingh
/
va-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refresh dashboard projects

This commit is contained in:
JaiPandey425 2025-12-01 16:40:24 +05:30
parent 4fb0720e7d
commit 17dcdec1c6
3 changed files with 220 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/ui/layout/DashboardLayout.tsx
View File

@ -630,9 +630,10 @@ const DashboardLayout = () => {
return (
<>
<div className="flex flex-col h-screen overflow-hidden">
{/* Header */}
{isTracking &&
<header className="w-full flex justify-between items-center h-12 px-6 bg-base-100 border-b border-base-300 sticky top-0 z-30">
<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
@ -700,9 +701,9 @@ const DashboardLayout = () => {
)}
</div>
<span className="text-error">
{/* <span className="text-error">
<ShieldBan size={18} />
</span>
</span> */}
<button
onClick={() => {
@ -725,16 +726,16 @@ const DashboardLayout = () => {
}
{/* Layout Body */}
<div className={`flex ${!isTracking ? "max-h-screen min-h-screen" : "h-[calc(100vh-3rem)]"} bg-base-200 overflow-hidden`}>
<div className={`flex flex-1 bg-base-200 overflow-hidden`}>
{/* Sidebar */}
<aside className="w-20 bg-base-100 border-r border-base-300 flex flex-col items-center py-4 space-y-4 relative">
<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-10 h-10 rounded-lg transition-all duration-150 cursor-pointer ${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"
}`
@ -745,7 +746,7 @@ const DashboardLayout = () => {
</div>
))}
<div className={`bsolute ${!isTracking ? "bottom-13" : "bottom-5"} `}>
<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}
@ -793,7 +794,7 @@ const DashboardLayout = () => {
/>
</div>
</div>
</>
);
};

26
src/ui/pages/Dashboard.tsx
View File

@ -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";
@ -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,7 +128,6 @@ const Dashboard: React.FC = () => {
}
};
useEffect(() => {
const fetchProjects = async () => {
try {
console.log("📡 Fetching projects...Dashboard");
@ -178,9 +178,16 @@ const Dashboard: React.FC = () => {
}
};
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 +241,7 @@ const Dashboard: React.FC = () => {
};
return (
<main className="flex-1 overflow-hidden no-scrollbar max-h-screen">
<main className="flex-1 overflow-hidden no-scrollbar max-h-[85vh]">
{/* Header */}
<div className="mb-2">
<h1 className="text-md font-bold">Dashboard</h1>
@ -243,7 +250,7 @@ const Dashboard: React.FC = () => {
<div className="w-full mb-4">
<div className="card bg-base-100 border border-base-200 shadow-sm card-sm">
<div className="card-body">
{isStopping ? (
{(isStopping || isRefreshing) ? (
// Skeleton loader for tracking section
<div className="flex flex-col sm:flex-row items-center justify-between gap-3">
<div className="text-center sm:text-left w-full">
@ -318,10 +325,19 @@ const Dashboard: React.FC = () => {
{/* 🔹 Sticky Header */}
<div className="sticky top-0 z-20 bg-base-100 border-b border-base-content/10 p-3 flex justify-between items-center">
<p className="text-md font-bold">Projects</p>
<button
onClick={handleRefresh}
disabled={isRefreshing}
className="btn btn-xs btn-ghost gap-1 text-warning"
title="Refresh projects"
>
<RefreshCw className={`w-3 h-3 text-warning ${isRefreshing ? 'animate-spin' : ''}`} />
Refresh
</button>
</div>
{/* 🔹 Table or Empty State or Skeleton */}
{isStopping ? (
{(isStopping || isRefreshing) ? (
// Skeleton loader for projects table
<div className="p-4 space-y-3">
{[...Array(3)].map((_, index) => (

2
src/ui/pages/Timesheets/Timesheets.tsx
View File

@ -150,7 +150,7 @@ const Timesheets: React.FC = () => {
</div> */}
{/* Timesheet Table */}
<div className="overflow-y-auto rounded-box border border-base-content/10 bg-base-100 shadow-md max-h-[80vh] min-h-[83vh]">
<div className="overflow-y-auto rounded-box border border-base-content/10 bg-base-100 shadow-md max-h-[80vh] min-h-[80vh]">
<table className="table table-zebra w-full text-[12px]">
<thead className="sticky top-0 bg-base-200 z-10 ">
<tr>