Dashboard tab button update

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>
   );