Updated Dashboard page and Added Page title component

src/app/(main)/dashboard/page.tsx

@@ -1,11 +1,17 @@
 import { Metadata } from "next";
+import { I18nProvider } from "@/i18n";
+import DashboardPage from "@/components/DashboardPage/DashboardPage";
 
 export const metadata: Metadata = {
   title: "Dashboard",
 };
 
 const Dashboard: React.FC = async () => {
-  return "Dashboard";
+  return (
+    <I18nProvider namespaces={["dashboard"]}>
+      <DashboardPage />
+    </I18nProvider> 
+  );
 };
 
 export default Dashboard;

src/components/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,21 @@
+"use client";
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
+import { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import PageTitle from "../PageTitle/PageTitle";
+import DashboardTabButton from "./DashboardTabButton";
+
+const DashboardPage: React.FC = () => {
+  const { t } = useTranslation("dashboard");
+  return (
+    <Grid container height="100vh">
+      <Grid item sm>
+        <PageTitle BigTitle={"Dashboards"}/>
+        <DashboardTabButton/>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default DashboardPage;

src/components/DashboardPage/DashboardTabButton.tsx

@@ -0,0 +1,20 @@
+"use client";
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
+import { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import PageTitle from "../PageTitle/PageTitle";
+
+const DashboardTabButton: React.FC = () => {
+  const { t } = useTranslation("dashboard");
+  return (
+      <Grid item sm>
+        <div style={{marginLeft:20}}>
+          <button style={{height:40,width:250,fontSize:18,borderTopLeftRadius:10,borderBottomLeftRadius:10,borderWidth:2,backgroundColor:"transparent"}}>Project Financial Summary</button>
+          <button style={{height:40,width:250,fontSize:18,borderTopWidth:2,borderBottomWidth:2,backgroundColor:"transparent"}}>Project Cash Flow</button>
+        </div>
+      </Grid>
+  );
+};
+
+export default DashboardTabButton;

src/components/DashboardPage/index.ts

@@ -0,0 +1 @@
+export { default } from "./DashboardPage";

src/components/PageTitle/PageTitle.tsx

@@ -0,0 +1,47 @@
+"use client";
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
+import { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+
+type PageTitleProps = {
+  BigTitle: string;
+  SecondTitle?: string;
+  ThirdTitle?: string;
+  FourthTitle?: string;
+};
+
+const PageTitle: React.FC<PageTitleProps> = ({ BigTitle, SecondTitle = '', ThirdTitle = '', FourthTitle = ''}) => {
+  const { t } = useTranslation("dashboard");
+  return (
+      <Grid item sm>
+         <div style={{marginTop:20,marginLeft:20}}>
+          <h1 style={{display:"inline-block",color:"#636363",verticalAlign:"top"}}>{BigTitle}</h1>&nbsp;&nbsp;
+          <hr color="#D6DCE1" style={{display:"inline-block",width:1,height:35,marginTop:25}} />&nbsp;&nbsp;
+          <h3 style={{display:"inline-block",color:"#6BAFD8",verticalAlign:"top",marginTop:32}}>Overview</h3>&nbsp;
+          <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{">"}</h3>&nbsp;
+          <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{BigTitle}</h3>&nbsp;
+          {SecondTitle !== '' ? 
+            <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{">"}&nbsp;</h3>
+            : ""}
+          {SecondTitle !== '' ? 
+            <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{SecondTitle}&nbsp;</h3>
+            : ""}
+          {ThirdTitle !== '' ? 
+          <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{">"}&nbsp;</h3>
+          : ""}
+          {ThirdTitle !== '' ? 
+            <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{ThirdTitle}&nbsp;</h3>
+            : ""}
+          {FourthTitle !== '' ? 
+          <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{">"}&nbsp;</h3>
+          : ""}
+          {FourthTitle !== '' ? 
+            <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{FourthTitle}&nbsp;</h3>
+            : ""}
+         </div>
+      </Grid>
+  );
+};
+
+export default PageTitle;

src/components/PageTitle/index.ts

@@ -0,0 +1 @@
+export { default } from "./PageTitle";

src/i18n/en/dashboard.json

@@ -0,0 +1 @@
+{}

src/i18n/zh/dashboard.json

@@ -0,0 +1,3 @@
+{
+    "Dashboard": "儀表板"
+}