refresh dashboard projects

src/ui/layout/DashboardLayout.tsx

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

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";
@@ -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) => (

src/ui/pages/Timesheets/Timesheets.tsx

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