FPSMS-frontend/src/components/DashboardPage/DashboardPage.tsx

"use client";
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 { useRouter } from "next/navigation";
import { Card, CardContent, CardHeader, Grid } 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";
type Props = {};

const DashboardPage: React.FC<Props> = ({}) => {
  const { t } = useTranslation("dashboard");
  const router = useRouter();

  return (
    <ThemeProvider theme={theme}>
      <Grid container spacing={2}>
      <Grid item xs={12}>
        <CollapsibleCard title={t("Progress chart")}>
          <CardContent>
            <Grid container spacing={2}>
              <Grid item xs={12} md={4}>
                <DashboardProgressChart />
              </Grid>
              <Grid item xs={12} md={4}>
                <PendingInspectionChart />
              </Grid>
              <Grid item xs={12} md={4}>
                <PendingStorageChart />
              </Grid>
            </Grid>
          </CardContent>
        </CollapsibleCard>
      </Grid>

      <Grid item xs={12}>
        
          <CollapsibleCard title={t("Warehouse status")}>
          <CardContent>
        <Grid container spacing={2}>
          <Grid item xs={12} md={6}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <ApplicationCompletionChart />
              </Grid>
              <Grid item xs={12} sm={6}>
                <OrderCompletionChart />
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={12} md={6}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <DashboardBox title={t("Temperature status")} value="--" unit="°C" />
              </Grid>
              <Grid item xs={12} sm={6}>
                <DashboardBox title={t("Humidity status")} value="--" unit="%" />
              </Grid>
              <Grid item xs={12}>
                <DashboardLineChart />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
        </CardContent>
        </CollapsibleCard>
      </Grid>
    </Grid>
    </ThemeProvider>
  );
};

export default DashboardPage;