tsms/src/components/DashboardPage/DashboardTabButton.tsx

"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";
import PageTitle from "../PageTitle/PageTitle";
import ProgressByClient from "./ProgressByClient";
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 'progressByClient':
        return <ProgressByClient/>;
      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}}>
          {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>
  );
};

export default DashboardTabButton;