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";
// import SupervisorQcApproval, { IQCItems } from "./QC/SupervisorQcApproval";
import { EscalationResult } from "@/app/api/escalation";
import EscalationLogTable from "./escalation/EscalationLogTable";
type Props = {
  // iqc: IQCItems[] | undefined
  escalationLogs: EscalationResult[]
};

const DashboardPage: React.FC<Props> = ({
  // iqc,
  escalationLogs
}) => {
  const { t } = useTranslation("dashboard");
  const router = useRouter();
  
  const [escLog, setEscLog] = useState<EscalationResult[]>([]);

  const getPendingLog = () => {
    return escLog.filter(esc => esc.status == "pending");
  };
  
  useEffect(() => {
    setEscLog(escalationLogs);
  }, [escalationLogs])

  return (
    <ThemeProvider theme={theme}>
      <Grid container spacing={2}>
        <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")}
            // defaultOpen={getPendingLog().length > 0} // TODO Fix default not opening
            >
            <CardContent>
              <EscalationLogTable items={escLog}/>
            </CardContent>
          </CollapsibleCard>
        </Grid>
        <Grid item xs={12}>
          <CollapsibleCard title={t("Progress chart")}>
            <CardContent>
              <Grid container spacing={3}>
                <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;