From 2ca10931dd321e364af290065f6607f2a03e7b8a Mon Sep 17 00:00:00 2001
From: "MSI\\User" <david.hui@2fi-solutions.com.hk>
Date: Wed, 10 Jan 2024 17:59:03 +0800
Subject: [PATCH] Dashboard tab button update

---
 .../DashboardPage/DashboardTabButton.tsx      | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/components/DashboardPage/DashboardTabButton.tsx b/src/components/DashboardPage/DashboardTabButton.tsx
index a07a2ba..25e2863 100644
--- a/src/components/DashboardPage/DashboardTabButton.tsx
+++ b/src/components/DashboardPage/DashboardTabButton.tsx
@@ -1,5 +1,6 @@
 "use client";
 import Grid from "@mui/material/Grid";
+import { useState } from 'react'
 import Paper from "@mui/material/Paper";
 import { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
@@ -7,12 +8,50 @@ import PageTitle from "../PageTitle/PageTitle";
 import '../../app/global.css';
 
 const DashboardTabButton: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('financialSummary');
   const { t } = useTranslation("dashboard");
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'financialSummary':
+        return <div>Project Financial Summary</div>;
+      case 'cashFlow':
+        return <div>Project Cash Flow</div>;
+      case 'projectProgress':
+        return <div>Project Progress by Client</div>;
+      case 'resourceUtilization':
+        return <div>Project Resource Utilization</div>;
+      case 'staffUtilization':
+        return <div>Staff Utilization</div>;
+      default:
+        return <div>Project Financial Summary</div>;
+    }
+  };
   return (
       <Grid item sm>
         <div style={{marginLeft:20}}>
-          <button className="rounded-l-lg" style={{height:40,width:250,fontSize:18}}>Project Financial Summary</button>
-          <button style={{height:39,width:250,fontSize:18}}>Project Cash Flow</button>
+          {activeTab !== 'financialSummary' ?
+            <button onClick={() => setActiveTab('financialSummary')}className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:40,width:250,fontSize:18}}>Project Financial Summary</button> : 
+            <button onClick={() => setActiveTab('financialSummary')}className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:40,width:250,fontSize:18}}>Project Financial Summary</button>
+          }
+          {activeTab !== 'cashFlow' ?
+            <button onClick={() => setActiveTab('cashFlow')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Cash Flow</button> : 
+            <button onClick={() => setActiveTab('cashFlow')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Cash Flow</button>
+          }
+          {activeTab !== 'progressByClient' ?
+            <button onClick={() => setActiveTab('progressByClient')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Progress by Client</button> : 
+            <button onClick={() => setActiveTab('progressByClient')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Progress by Client</button>
+          }
+          {activeTab !== 'resourceUtilization' ?
+            <button onClick={() => setActiveTab('resourceUtilization')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Resource Utilization</button> : 
+            <button onClick={() => setActiveTab('resourceUtilization')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Resource Utilization</button>
+          }
+          {activeTab !== 'staffUtilization' ?
+            <button onClick={() => setActiveTab('staffUtilization')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Staff Utilization</button> : 
+            <button onClick={() => setActiveTab('staffUtilization')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Staff Utilization</button>
+          }
+        </div>
+        <div style={{marginLeft:20,marginTop:20}}>
+          {renderContent()}
         </div>
       </Grid>
   );