"use client";

import { PurchaseQcResult, PurchaseQCInput } from "@/app/api/po/actions";
import {
  Box,
  Card,
  CardContent,
  Checkbox,
  Collapse,
  FormControl,
  FormControlLabel,
  Grid,
  Radio,
  RadioGroup,
  Stack,
  Tab,
  Tabs,
  TabsProps,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useFormContext, Controller, FieldPath } from "react-hook-form";
import { useTranslation } from "react-i18next";
import StyledDataGrid from "../StyledDataGrid";
import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
import {
  GridColDef,
  GridRowIdGetter,
  GridRowModel,
  useGridApiContext,
  GridRenderCellParams,
  GridRenderEditCellParams,
  useGridApiRef,
  GridRowSelectionModel,
} from "@mui/x-data-grid";
import InputDataGrid from "../InputDataGrid";
import { TableRow } from "../InputDataGrid/InputDataGrid";
import TwoLineCell from "./TwoLineCell";
import QcSelect from "./QcSelect";
import { GridEditInputCell } from "@mui/x-data-grid";
import { StockInLine } from "@/app/api/po";
import { stockInLineStatusMap } from "@/app/utils/formatUtil";
import { fetchQcItemCheck, fetchQcResult } from "@/app/api/qc/actions";
import { QcItemWithChecks, QcData } from "@/app/api/qc";
import axios from "@/app/(main)/axios/axiosInstance";
import { NEXT_PUBLIC_API_URL } from "@/config/api";
import axiosInstance from "@/app/(main)/axios/axiosInstance";
import EscalationComponent from "./EscalationComponent";
import QcDataGrid from "./QCDatagrid";
import { dummyEscalationHistory, dummyQCData } from "./dummyQcTemplate";
import { ModalFormInput } from "@/app/api/po/actions";
import { escape, min } from "lodash";
import { PanoramaSharp } from "@mui/icons-material";
import EscalationLogTable from "../DashboardPage/escalation/EscalationLogTable";
import { EscalationResult } from "@/app/api/escalation";
import { EscalationCombo } from "@/app/api/user";
import CollapsibleCard from "../CollapsibleCard/CollapsibleCard";

interface Props {
  itemDetail: StockInLine & { qcResult?: PurchaseQcResult[] } & { escResult?: EscalationResult[] };
  // qc: QcItemWithChecks[];
  disabled: boolean;
  // qcItems: QcData[]
  // setQcItems: Dispatch<SetStateAction<QcData[]>>
}

type EntryError =
  | {
      [field in keyof QcData]?: string;
    }
  | undefined;

type QcRow = TableRow<Partial<QcData>, EntryError>;
// fetchQcItemCheck
const QcComponent: React.FC<Props> = ({ itemDetail, disabled = false }) => {
  const { t } = useTranslation("purchaseOrder");
  const apiRef = useGridApiRef();
  const {
    register,
    formState: { errors, defaultValues, touchedFields },
    watch,
    control,
    setValue,
    getValues,
    reset,
    resetField,
    setError,
    clearErrors,
  } = useFormContext<PurchaseQCInput>();
  
  const [tabIndex, setTabIndex] = useState(0);
  const [rowSelectionModel, setRowSelectionModel] = useState<GridRowSelectionModel>();
  const [escalationHistory, setEscalationHistory] = useState(dummyEscalationHistory);
  const qcAccept = watch("qcAccept");
  const qcDecision = watch("qcDecision"); //WIP
  // const qcResult = useMemo(() => [...watch("qcResult")], [watch("qcResult")]);

  const qcRecord = useMemo(() => { // Need testing
    const value = watch('qcResult'); console.log("%c QC update!", "color:green", value);
    return Array.isArray(value) ? [...value] : [];
  }, [watch('qcResult')]);
  const [qcHistory, setQcHistory] = useState<PurchaseQcResult[]>([]);
  const [qcResult, setQcResult] = useState<PurchaseQcResult[]>([]);

  // const [qcAccept, setQcAccept] = useState(true);
  // const [qcItems, setQcItems] = useState(dummyQCData)

  const column = useMemo<GridColDef[]>(
    () => [
      {
        field: "escalation",
        headerName: t("escalation"),
        flex: 1,
      },
      {
        field: "supervisor",
        headerName: t("supervisor"),
        flex: 1,
      },
    ], []
  )
  const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
    (_e, newValue) => {
      setTabIndex(newValue);
    },
    [],
  );

  const isExist = (data : string | number | undefined) => {
    return (data !== null && data !== undefined);
  }

    // W I P //
  const validateFieldFail = (field : FieldPath<PurchaseQCInput>, condition: boolean, message: string) : boolean => {
    // console.log("Checking if " + message)
    if (condition) { setError(field, { message: message}); return false; }
    else { clearErrors(field); return true; }
  }

  //// validate form
  const accQty = watch("acceptQty");
  const validateForm = useCallback(() => {
    if (qcDecision == 1) {
      if (isNaN(accQty) || accQty === undefined || accQty === null || typeof(accQty) != "number") {
        setError("acceptQty", { message: t("value must be a number") });
      } else
      if (!Number.isInteger(accQty)) {
        setError("acceptQty", { message: t("value must be integer") });
      }
      if (accQty > itemDetail.acceptedQty) {
        setError("acceptQty", { message: `${t("acceptQty must not greater than")} ${
            itemDetail.acceptedQty}` });
      } else
      if (accQty < 1) {
        setError("acceptQty", { message: t("minimal value is 1") });
      } else
      console.log("%c Validated accQty:", "color:yellow", accQty);
    }
  },[setError, qcDecision, accQty, itemDetail])

  useEffect(() => {   // W I P // -----
    if (qcDecision == 1) {
      if (validateFieldFail("acceptQty", accQty > itemDetail.acceptedQty, `${t("acceptQty must not greater than")} ${
            itemDetail.acceptedQty}`)) return;

      if (validateFieldFail("acceptQty", accQty < 1, t("minimal value is 1"))) return;
      if (validateFieldFail("acceptQty", isNaN(accQty), t("value must be a number"))) return;
    }

    const qcResultItems = qcResult; console.log("Validating:", qcResultItems);
    // Check if failed items have failed quantity
    const failedItemsWithoutQty = qcResultItems.filter(item => 
      item.qcPassed === false && (!item.failQty || item.failQty <= 0)
    );
    if (validateFieldFail("qcResult", failedItemsWithoutQty.length > 0, `${t("Failed items must have failed quantity")}`)) return;

    // Check if all QC items have results
    const itemsWithoutResult = qcResultItems.filter(item => item.qcPassed === undefined);
    if (validateFieldFail("qcDecision", (itemsWithoutResult.length > 0  && itemDetail.status != "escalated"),
      `${t("QC items without result")}`)) return;

    if (validateFieldFail("qcDecision", (!qcResultItems.every((qc) => qc.qcPassed) && qcDecision == 1  && itemDetail.status != "escalated"),
      "有不合格檢查項目，無法收貨！")) return; // TODO: Fix it please
      // submitDialogWithWarning(() => postStockInLineWithQc(qcData), t, {title:"有不合格檢查項目，確認接受收貨？",
      //   confirmButtonText: t("confirm putaway"), html: ""});
      // return;

    // console.log("Validated without errors");
  }, [accQty, qcDecision, watch("qcResult")]);

  useEffect(() => {
    clearErrors();
    validateForm();
  }, [clearErrors, validateForm]);

  const columns = useMemo<GridColDef[]>(
    () => [
      {
        field: "escalation",
        headerName: t("escalation"),
        flex: 1,
      },
      {
        field: "supervisor",
        headerName: t("supervisor"),
        flex: 1,
      },
    ],
    [],
  );
  /// validate datagrid
  const validation = useCallback(
    (newRow: GridRowModel<QcRow>): EntryError => {
      const error: EntryError = {};
      // const { qcItemId, failQty } = newRow;
      return Object.keys(error).length > 0 ? error : undefined;
    },
    [],
  );

  function BooleanEditCell(params: GridRenderEditCellParams) {
  const apiRef = useGridApiContext();
  const { id, field, value } = params;

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    apiRef.current.setEditCellValue({ id, field, value: e.target.checked });
    apiRef.current.stopCellEditMode({ id, field }); // commit immediately
  };

  return <Checkbox checked={!!value} onChange={handleChange} sx={{ p: 0 }} />;
}

  const qcDisabled = (row : PurchaseQcResult) => {
    return disabled || isExist(row.escalationLogId);
  };

  const qcColumns: GridColDef[] = useMemo(() => [
     {
      field: "code",
      headerName: t("qcItem"),
      wrapText: true,
      flex: 2,
      renderCell: (params) => {
        const index = params.api.getRowIndexRelativeToVisibleRows(params.id) + 1;
        return (
        <Box
          sx={{
            lineHeight: 1.5,
            padding: "4px",
          }}
        >
          <b>{`${index}. ${params.value}`}</b><br/>
          {params.row.name}
        </Box>
      )},
     },
     {
      field: 'qcResult',
      headerName: t("qcResult"),
      flex: 1.5,
      renderCell: (params) => {
        const rowValue = params.row;
        const index = Number(params.id);//params.api.getRowIndexRelativeToVisibleRows(params.id);
        // console.log(rowValue.row);
        return (
          <FormControl>
            <RadioGroup
                row
                aria-labelledby="demo-radio-buttons-group-label"
                // defaultValue={""}
                value={rowValue.qcPassed === undefined ? "" : (rowValue.qcPassed ? "true" : "false")}
                onChange={(e) => {
                  const value = (e.target.value === "true");
                  // setQcItems((prev) =>
                  //   prev.map((r): QcData => (r.id === params.id ? { ...r, qcPassed: value === "true" } : r))
                  // );
                  setValue(`qcResult.${index}.qcPassed`, value);
                }}
                name={`qcPassed-${params.id}`}
            >
                <FormControlLabel 
                  value="true" 
                  control={<Radio />} 
                  label="合格"
                  disabled={qcDisabled(rowValue)}
                  sx={{
                    color: rowValue.qcPassed === true ? "green" : "inherit",
                    "& .Mui-checked": {color: "green"}
                  }}
                />
                <FormControlLabel 
                  value="false" 
                  control={<Radio />} 
                  label="不合格" 
                  disabled={qcDisabled(rowValue)}
                  sx={{
                    color: rowValue.qcPassed === false ? "red" : "inherit",
                    "& .Mui-checked": {color: "red"}
                  }}
                />
            </RadioGroup>
          </FormControl>
        );
      },
    },
     {
      field: "failQty",
      headerName: t("failedQty"),
      flex: 1,
      // editable: true,
      renderCell: (params) => {
        const index = Number(params.id);//params.api.getRowIndexRelativeToVisibleRows(params.id);
        return (
        <TextField
          type="number"
          size="small"
          value={!params.row.qcPassed? params.value : '0'}
          disabled={params.row.qcPassed || qcDisabled(params.row)}
          /* TODO improve */
          /* Reference: https://grok.com/share/c2hhcmQtNA%3D%3D_10787069-3eec-40af-a7cc-bacbdb86bf05 */
          onChange={(e) => {
            const v = e.target.value;
            const next = v === '' ? undefined : Number(v);
            if (Number.isNaN(next)) return;
            setValue(`qcResult.${index}.failQty`, next);
          }}
          // onBlur={(e) => {
          //   const v = e.target.value;
          //   const next = v === '' ? undefined : Number(v);
          //   if (Number.isNaN(next)) return;
          //   setValue(`qcResult.${index}.failQty`, next);
          // }}
          onClick={(e) => e.stopPropagation()}
          onMouseDown={(e) => e.stopPropagation()}
          onKeyDown={(e) => e.stopPropagation()}
          inputProps={{ min: 0 }}
          sx={{ width: '100%' }}
        />
        );
      },
     },
     {
      field: "remarks",
      headerName: t("remarks"),
      flex: 2,
      renderCell: (params) => {
        const index = Number(params.id);//params.api.getRowIndexRelativeToVisibleRows(params.id);
        return (
          <TextField
            size="small"
            defaultValue={params.value}
            disabled={qcDisabled(params.row)}
            onBlur={(e) => {
              const value = e.target.value;
              setValue(`qcResult.${index}.remarks`, value);
            }}
            // onChange={(e) => {
            //   const remarks = e.target.value;
            //   // const next = v === '' ? undefined : Number(v);
            //   // if (Number.isNaN(next)) return;
            //   // setQcItems((prev) =>
            //   //   prev.map((r) => (r.id === params.id ? { ...r, remarks: remarks } : r))
            //   // );
            // }}
            // {...register(`qcResult.${index}.remarks`, {
            //   required: "remarks required!",
            // })}
            onClick={(e) => e.stopPropagation()}
            onMouseDown={(e) => e.stopPropagation()}
            onKeyDown={(e) => e.stopPropagation()}
            sx={{ width: '100%' }}
          />
        );
      },
     },
    ], [])

  // Set initial value for acceptQty
  useEffect(() => {
    if (itemDetail?.demandQty > 0) { //!== undefined) {
      setValue("acceptQty", itemDetail.demandQty);  // THIS NEED TO UPDATE TO NOT USE DEMAND QTY
    } else {
      setValue("acceptQty", itemDetail?.acceptedQty);
    }
  }, [itemDetail?.demandQty, itemDetail?.acceptedQty, setValue]);

  useEffect(() => {
    console.log("%c Qc Record updated:", "color:red", qcRecord);
    if (qcRecord.length < 1) {  // New QC
      const fetchedQcData = dummyQCData;  //TODO fetch from DB
      setValue("qcResult", fetchedQcData); 
    } else {
      if (itemDetail.status == "escalated") { // Copy the previous QC data for editing
        if (qcRecord.find((qc) => !isExist(qc.escalationLogId)) === undefined) {
          const copiedQcData = qcRecord.map(qc => ({ ...qc, escalationLogId: undefined }));
          const mutableQcData = [...qcRecord, ...copiedQcData];
          setValue("qcResult", mutableQcData);
        }
      }

      if (qcRecord.length > 0) {
        if (qcResult.length < 1) { // Set QC Result
          const filteredQcResult = qcRecord.filter((qc) => !isExist(qc.escalationLogId));
          setQcResult(filteredQcResult);
        }
        if (qcHistory.length < 1) { // Set QC History
          const filteredQcHistory = qcRecord.filter((qc) => isExist(qc.escalationLogId));
          setQcHistory(filteredQcHistory);
        }
      }
    }
  }, [qcRecord, setValue])

  // const [openCollapse, setOpenCollapse] = useState(false)
  const [isCollapsed, setIsCollapsed] = useState<boolean>(true);

  const onFailedOpenCollapse = useCallback((qcItems: PurchaseQcResult[]) => {
    const isFailed = qcItems.some((qc) => !qc.qcPassed)
    // console.log(isFailed)
    if (isFailed) {
      setIsCollapsed(true)
    } else {
      setIsCollapsed(false)
    }
  }, [])

  // const handleRadioChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
  //   const value = event.target.value === 'true';
  //   setValue("qcAccept", value);
  // }, [setValue]);


  useEffect(() => {
    console.log("%c QC ItemDetail updated:", "color: gold", itemDetail);
    
  }, [itemDetail]);

  const setDefaultQcDecision = (status : string | undefined) => {
    const param = status?.toLowerCase();
    if (param !== undefined && param !== null) {
      if (param == "received" || param == "completed" || param == "partially_completed") {
        return 1;
      } else if (param == "rejected") {
        return 2;
      } else if (param == "escalated") {
        return 1; // For new flow
        // return 3;
      } else { return undefined; }
    } else {
      return undefined;
    }
  }

  // }, [watch("qcResult")]);
  // useEffect(() => {
  //   // onFailedOpenCollapse(qcItems)
  // }, [qcItems]);

  const getRowId = (row :any) => {
    return qcRecord.findIndex(qc => qc == row);
    // return row.id || `${row.name}-${Math.random().toString(36).substr(2, 9)}`;
  };

  const getRowHeight = (row :any) => {  // Not used?
    console.log("row", row);
    if (!row.model.name) {
      return (row.model.name.length ?? 10) * 1.2 + 30;
    } else { return 60}
  };

  return (
    <>
    <Grid container justifyContent="flex-start" alignItems="flex-start">
      <Grid
        container
        justifyContent="flex-start"
        alignItems="flex-start"
        spacing={2}
        sx={{ mt: 0.5 }}
      >
        <Grid item xs={12}>
          <Tabs
            value={tabIndex}
            onChange={handleTabChange}
            variant="scrollable"
          >
            <Tab label={t("QC Info")} iconPosition="end" />
            {(itemDetail.escResult && itemDetail.escResult?.length > 0) &&
              (<Tab label={t("Escalation History")} iconPosition="end" />)}
          </Tabs>
        </Grid>
        {tabIndex == 0 && (
          <>
            <Grid item xs={12}>
            
            <Box sx={{ mb: 2, p: 2, backgroundColor: '#f5f5f5', borderRadius: 1 }}>
              <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: '#333' }}>
                Group A - 急凍貨類 (QCA1-MEAT01)
              </Typography>
              <Typography variant="subtitle1" sx={{ color: '#666' }}>
                  <b>品檢類型</b>：IQC
              </Typography>
              <Typography variant="subtitle2" sx={{ color: '#666' }}>
                  記錄探測溫度的時間，請在1小時内完成卸貨盤點入庫，以保障食品安全<br/>
                  監察方法：目視檢查、嗅覺檢查和使用適當的食物溫度計，檢查食物溫度是否符合指標
              </Typography>
            </Box>
              {/* <QcDataGrid<ModalFormInput, QcData, EntryError>
                apiRef={apiRef}
                columns={qcColumns}
                _formKey="qcResult"
                validateRow={validation}
              /> */}
              <StyledDataGrid
                columns={qcColumns}
                rows={qcResult}
                // rows={qcResult && qcResult.length > 0 ? qcResult : qcItems}
                // rows={disabled? qcResult:qcItems}
                // autoHeight
                sortModel={[]}
                // getRowHeight={getRowHeight}
                getRowHeight={() => 'auto'}
                getRowId={getRowId}
              />
            </Grid>
          </>
        )}
        {tabIndex == 1 && (
          <>
            {/* <Grid item xs={12}>
              <StockInFormVer2
                itemDetail={itemDetail}
                disabled={false}
              />
            </Grid> */}
            {/* <Grid item xs={12}>
              <Typography variant="h6" display="block" marginBlockEnd={1}>
                {t("Escalation Info")}
              </Typography>
            </Grid> */}
            <Grid item xs={12}>
              <EscalationLogTable type="qc" items={itemDetail.escResult || []}/>
              <CollapsibleCard title={t("QC Record")}>
                <Box sx={{ mb: 2, p: 2, backgroundColor: '#f5f5f5', borderRadius: 1 }}>
                  <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: '#333' }}>
                    Group A - 急凍貨類 (QCA1-MEAT01)
                  </Typography>
                  <Typography variant="subtitle1" sx={{ color: '#666' }}>
                      <b>品檢類型</b>：IQC
                  </Typography>
                  <Typography variant="subtitle2" sx={{ color: '#666' }}>
                      記錄探測溫度的時間，請在1小時内完成卸貨盤點入庫，以保障食品安全<br/>
                      監察方法：目視檢查、嗅覺檢查和使用適當的食物溫度計，檢查食物溫度是否符合指標
                  </Typography>
                </Box>
                <StyledDataGrid
                  columns={qcColumns}
                  rows={qcHistory}
                  // rows={qcResult && qcResult.length > 0 ? qcResult : qcItems}
                  // rows={disabled? qcResult:qcItems}
                  autoHeight
                  sortModel={[]}
                />
              </CollapsibleCard>
            </Grid>
          </>
        )}
        <Grid item xs={12}>
          <Typography variant="h6" display="block" marginBlockEnd={1}>
            {t("Qc Decision")}
          </Typography>
          <FormControl>
            <Controller
              name="qcDecision"
              // name="qcAccept"
              control={control}
              defaultValue={setDefaultQcDecision(itemDetail?.status)}
              // defaultValue={true}
              render={({ field }) => (
                <>
                  {/* <Typography sx={{color:"red"}}>
                    {errors.qcDecision?.message}
                  </Typography> */}
                  <RadioGroup
                    row
                    aria-labelledby="demo-radio-buttons-group-label"
                    {...field}
                    value={field.value}
                    // value={field.value?.toString() || "true"}
                    onChange={(e) => {
                      const value = e.target.value.toString();// === 'true';

                      const input = document.getElementById('accQty') as HTMLInputElement;  //TODO improve
                      console.log("%c AccQty Error", "color:pink", errors.acceptQty);
                      if (input) {   // Selected Reject in new flow with Error
                        if (value == "1") { // Selected Accept
                          input.value = Number(accQty).toString();
                        } else {
                          if (Boolean(errors.acceptQty)) {
                            setValue("acceptQty", 0);
                          }
                          input.value = '0';
                        }
                      }
                        // setValue("acceptQty", itemDetail.acceptedQty ?? 0);
                        // clearErrors("acceptQty");
                      // }
                      field.onChange(value);
                    }}
                  >
                    <FormControlLabel disabled={disabled}
                      value="1" control={<Radio />} label="接受來貨" />
                    
                    {(itemDetail.status == "escalated"|| (disabled && accQty != itemDetail.acceptedQty && qcDecision == 1)) && ( //TODO Improve
                      <Box sx={{mr:2}}>
                      <TextField
                        // type="number"
                        id="accQty"
                        label={t("acceptQty")}
                        sx={{ width: '150px' }}
                        // value={Number(accQty)}
                        defaultValue={Number(accQty)}
                        // defaultValue={(qcDecision == 1)? Number(accQty) : 0}
                        // value={(qcDecision == 1)? Number(accQty) : undefined }
                        // value={qcAccept? accQty : 0 }
                        disabled={qcDecision != 1 || disabled}
                        // disabled={!qcAccept || disabled}
                        onBlur={(e) => {
                          const value = e.target.value;
                          const input = document.getElementById('accQty') as HTMLInputElement;
                          input.value = Number(value).toString()
                          setValue(`acceptQty`, Number(value));
                        }}
                        onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
                          const input = e.target.value;

                          const numReg = /^[0-9]+$/
                          let r = '';
                          if (!numReg.test(input)) {
                            const result = input.replace(/\D/g, "");
                            r = (result === '' ? result : Number(result)).toString();
                          } else {
                            r = Number(input).toString()
                          }
                          e.target.value = r;
                        }}
                        inputProps={{ min: 1, max:itemDetail.acceptedQty }}
                        // onChange={(e) => {
                        //   const inputValue = e.target.value;
                        //   if (inputValue === '' || /^[0-9]*$/.test(inputValue)) {
                        //     setValue("acceptQty", Number(inputValue === '' ? null : parseInt(inputValue, 10)));
                        //   }
                        // }}
                        // {...register("acceptQty", {
                        //   required: "acceptQty required!",
                        // })}
                        error={Boolean(errors.acceptQty)}
                        helperText={errors.acceptQty?.message}
                        />
                      <TextField
                        type="number"
                        label={t("rejectQty")}
                        sx={{ width: '150px' }}
                        value={
                          (!Boolean(errors.acceptQty)) ?
                          (qcDecision == 1 ? itemDetail.acceptedQty - accQty : itemDetail.acceptedQty)
                          : ""
                        }
                        error={Boolean(errors.acceptQty)}
                        disabled={true}
                      />
                    </Box>)}

                    <FormControlLabel disabled={disabled}
                      value="2" control={<Radio />}
                      sx={{"& .Mui-checked": {color: "red"}}}
                      label= {itemDetail.status == "escalated" ? "全部拒絕並退貨" : "不接受並退貨"} />
                      
                    {(itemDetail.status == "pending" || disabled) && (<>
                    <FormControlLabel disabled={disabled}
                      value="3" control={<Radio />}
                      sx={{"& .Mui-checked": {color: "blue"}}}
                      label="上報品檢結果" />
                      </>)}
                  </RadioGroup>
                </>
              )}
            />
          </FormControl>
        </Grid>
        {qcDecision == 3 && (
        // {!qcAccept && (
          <Grid item xs={12}>
            <EscalationComponent 
              forSupervisor={false}
              isCollapsed={isCollapsed}
              setIsCollapsed={setIsCollapsed}
              />
          </Grid>)}
        {/* {qcAccept && <Grid item xs={12}>
          <Typography variant="h6" display="block" marginBlockEnd={1}>
            {t("Escalation Result")}
          </Typography>
        </Grid>
        <Grid item xs={12}>
          <EscalationComponent
            forSupervisor={true}
            isCollapsed={isCollapsed}
            setIsCollapsed={setIsCollapsed}
          />
        </Grid>} */}
      </Grid>
    </Grid>
    </>
  );
};
export default QcComponent;
