Dashboard Page Update

src/components/DashboardPage/DashboardPage.tsx

@@ -2,23 +2,43 @@
 import { useTranslation } from "react-i18next";
 import { ThemeProvider } from "@mui/material/styles";
 import theme from "../../theme";
-import { TabsProps } from "@mui/material/Tabs";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState, ReactNode } from "react";
 import { useRouter } from "next/navigation";
-import { Card, CardContent, CardHeader, Grid } from "@mui/material";
+import { Card, CardContent, CardHeader, Grid, Tabs, Tab, Box, FormControlLabel, Checkbox } from "@mui/material";
 import DashboardProgressChart from "./chart/DashboardProgressChart";
 import DashboardLineChart from "./chart/DashboardLineChart";
 import PendingInspectionChart from "./chart/PendingInspectionChart";
 import PendingStorageChart from "./chart/PendingStorageChart";
 import ApplicationCompletionChart from "./chart/ApplicationCompletionChart";
 import OrderCompletionChart from "./chart/OrderCompletionChart";
-import DashboardBox from "./Dashboardbox";
-import CollapsibleCard from "../CollapsibleCard";
 // import SupervisorQcApproval, { IQCItems } from "./QC/SupervisorQcApproval";
 import { EscalationResult } from "@/app/api/escalation";
 import EscalationLogTable from "./escalation/EscalationLogTable";
 import { TruckScheduleDashboard } from "./truckSchedule";
 import { GoodsReceiptStatus } from "./goodsReceiptStatus";
+import { CardFilterContext } from "../CollapsibleCard/CollapsibleCard";
+
+interface TabPanelProps {
+  children?: ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`dashboard-tabpanel-${index}`}
+      aria-labelledby={`dashboard-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ py: 2 }}>{children}</Box>}
+    </div>
+  );
+}
 type Props = {
   // iqc: IQCItems[] | undefined
   escalationLogs: EscalationResult[]
@@ -32,6 +52,8 @@ const DashboardPage: React.FC<Props> = ({
   const router = useRouter();
   
   const [escLog, setEscLog] = useState<EscalationResult[]>([]);
+  const [currentTab, setCurrentTab] = useState(0);
+  const [showCompletedLogs, setShowCompletedLogs] = useState(false);
 
   const getPendingLog = () => {
     return escLog.filter(esc => esc.status == "pending");
@@ -41,35 +63,66 @@ const DashboardPage: React.FC<Props> = ({
     setEscLog(escalationLogs);
   }, [escalationLogs])
 
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setCurrentTab(newValue);
+  };
+
+  const handleFilterChange = (checked: boolean) => {
+    setShowCompletedLogs(checked);
+  };
+
   return (
     <ThemeProvider theme={theme}>
       <Grid container spacing={2}>
         <Grid item xs={12}>
-          <CollapsibleCard title={t("Truck Schedule Dashboard")} defaultOpen={true}>
+          <Card>
+            <CardHeader />
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+              <Tabs 
+                value={currentTab} 
+                onChange={handleTabChange}
+                aria-label="dashboard tabs"
+              >
+                <Tab label={t("Truck Schedule Dashboard")} id="dashboard-tab-0" aria-controls="dashboard-tabpanel-0" />
+                <Tab label={t("Goods Receipt Status")} id="dashboard-tab-1" aria-controls="dashboard-tabpanel-1" />
+                <Tab 
+                  label={`${t("Responsible Escalation List")} (${t("pending")} : ${
+                    getPendingLog().length > 0 ? getPendingLog().length : t("No")})`}
+                  id="dashboard-tab-2" 
+                  aria-controls="dashboard-tabpanel-2" 
+                />
+              </Tabs>
+            </Box>
             <CardContent>
-              <TruckScheduleDashboard />
+              <TabPanel value={currentTab} index={0}>
+                <TruckScheduleDashboard />
+              </TabPanel>
+              <TabPanel value={currentTab} index={1}>
+                <GoodsReceiptStatus />
+              </TabPanel>
+              <TabPanel value={currentTab} index={2}>
+                <CardFilterContext.Provider value={{
+                  filter: showCompletedLogs,
+                  onFilterChange: handleFilterChange,
+                  filterText: t("show completed logs"),
+                  setOnFilterChange: () => {}
+                }}>
+                  <Box sx={{ mb: 2 }}>
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          checked={showCompletedLogs}
+                          onChange={(e) => handleFilterChange(e.target.checked)}
+                        />
+                      }
+                      label={t("show completed logs")}
+                    />
+                  </Box>
+                  <EscalationLogTable items={escLog}/>
+                </CardFilterContext.Provider>
+              </TabPanel>
             </CardContent>
-          </CollapsibleCard>
-        </Grid>
-        <Grid item xs={12}>
-          <CollapsibleCard title={t("Goods Receipt Status")} defaultOpen={true}>
-            <CardContent>
-              <GoodsReceiptStatus />
-            </CardContent>
-          </CollapsibleCard>
-        </Grid>
-        <Grid item xs={12}>
-          <CollapsibleCard
-            title={`${t("Responsible Escalation List")} (${t("pending")} : ${
-              getPendingLog().length > 0 ? getPendingLog().length : t("No")})`}
-              showFilter={true}
-              filterText={t("show completed logs")}
-
-            >
-            <CardContent>
-              <EscalationLogTable items={escLog}/>
-            </CardContent>
-          </CollapsibleCard>
+          </Card>
         </Grid>
         {/* Hidden: Progress chart - not in use currently */}
         {/* <Grid item xs={12}>