FPSMS-frontend/src/components/PoDetail/QcStockInModalVer2.tsx

"use client";
import { StockInLine } from "@/app/api/po";
import { ModalFormInput, PurchaseQcResult } from "@/app/api/po/actions";
import { QcItemWithChecks } from "@/app/api/qc";
import {
  Box,
  Button,
  Grid,
  Modal,
  ModalProps,
  Stack,
  Typography,
} from "@mui/material";
import { Dispatch, SetStateAction, useCallback, useState } from "react";
import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
import { StockInLineRow } from "./PoInputGrid";
import { useTranslation } from "react-i18next";
import StockInForm from "./StockInForm";
import StockInFormVer2 from "./StockInFormVer2";
import QcFormVer2 from "./QcFormVer2";
import PutawayForm from "./PutawayForm";
import { dummyPutawayLine, dummyQCData } from "./dummyQcTemplate";
import { useGridApiRef } from "@mui/x-data-grid";
const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  bgcolor: "background.paper",
  pt: 5,
  px: 5,
  pb: 10,
  display: "block",
  width: { xs: "60%", sm: "60%", md: "60%" },
  //   height: { xs: "60%", sm: "60%", md: "60%" },
};
interface CommonProps extends Omit<ModalProps, "children"> {
  // setRows: Dispatch<SetStateAction<PurchaseOrderLine[]>>;
  setEntries?: Dispatch<SetStateAction<StockInLineRow[]>>;
  setStockInLine?: Dispatch<SetStateAction<StockInLine[]>>;
  itemDetail: StockInLine & { qcResult?: PurchaseQcResult[] };
  setItemDetail: Dispatch<
    SetStateAction<
      | (StockInLine & {
          warehouseId?: number;
        })
      | undefined
    >
  >;
  qc?: QcItemWithChecks[];
  warehouse?: any[];
  //   type: "qc" | "stockIn" | "escalation" | "putaway" | "reject";
}
interface Props extends CommonProps {
  itemDetail: StockInLine & { qcResult?: PurchaseQcResult[] };
}
const PoQcStockInModalVer2: React.FC<Props> = ({
  // type,
  // setRows,
  setEntries,
  setStockInLine,
  open,
  onClose,
  itemDetail,
  setItemDetail,
  qc,
  warehouse,
}) => {
  console.log(warehouse);
  const {
    t,
    i18n: { language },
  } = useTranslation("purchaseOrder");
const [qcItems, setQcItems] = useState(dummyQCData)
  const formProps = useForm<ModalFormInput>({
    defaultValues: {
      ...itemDetail,
      putawayLine: dummyPutawayLine,
      // receiptDate: itemDetail.receiptDate || dayjs().add(-1, "month").format(INPUT_DATE_FORMAT),
      // warehouseId: itemDetail.defaultWarehouseId || 0
    },
  });
  const closeHandler = useCallback<NonNullable<ModalProps["onClose"]>>(
    (...args) => {
      onClose?.(...args);
      //   reset();
    },
    [onClose],
  );
  const [openPutaway, setOpenPutaway] = useState(false);
  const onOpenPutaway = useCallback(() => {
    setOpenPutaway(true);
  }, []);
  const onClosePutaway = useCallback(() => {
    setOpenPutaway(false);
  }, []);
  // Stock In submission handler
  const onSubmitStockIn = useCallback<SubmitHandler<ModalFormInput>>(
    async (data, event) => {
      console.log("Stock In Submission:", event!.nativeEvent);
      // Extract only stock-in related fields
      const stockInData = {
        //    quantity: data.quantity,
        //    receiptDate: data.receiptDate,
        //    batchNumber: data.batchNumber,
        //    expiryDate: data.expiryDate,
        //    warehouseId: data.warehouseId,
        //    location: data.location,
        //    unitCost: data.unitCost,
        data: data,
        // Add other stock-in specific fields from your form
      };
      console.log("Stock In Data:", stockInData);
      // Handle stock-in submission logic here
      // e.g., call API, update state, etc.
    },
    [],
  );
  // QC submission handler
  const onSubmitQc = useCallback<SubmitHandler<ModalFormInput>>(
    async (data, event) => {
      console.log("QC Submission:", event!.nativeEvent);
      // Extract only QC related fields
      const qcData = {
        //    qcStatus: data.qcStatus,
        //    qcComments: data.qcComments,
        //    qcResult: data.qcResult,
        //    approvedBy: data.approvedBy,
        //    qualityGrade: data.qualityGrade,
        //    defectNotes: data.defectNotes,
        data: data,
        // Add other QC specific fields from your form
      };
      console.log(qcItems)
      console.log("QC Data:", qcData);
      // Handle QC submission logic here
      // After QC approval, open putaway form
      //    onOpenPutaway();
    },
    [onOpenPutaway, qcItems],
  );
  // Email supplier handler
  const onSubmitEmailSupplier = useCallback<SubmitHandler<ModalFormInput>>(
    async (data, event) => {
      console.log("Email Supplier Submission:", event!.nativeEvent);
      // Extract only email supplier related fields
      const emailData = {
        //    supplierEmail: data.supplierEmail,
        //    issueDescription: data.issueDescription,
        //    qcComments: data.qcComments,
        //    defectNotes: data.defectNotes,
        //    attachments: data.attachments,
        //    escalationReason: data.escalationReason,
        data: data,

        // Add other email-specific fields
      };
      console.log("Email Supplier Data:", emailData);
      // Handle email supplier logic here
      // e.g., send email to supplier, log escalation, etc.
    },
    [],
  );
  // Putaway submission handler
  const onSubmitPutaway = useCallback<SubmitHandler<ModalFormInput>>(
    async (data, event) => {
      console.log("Putaway Submission:", event!.nativeEvent);
      // Extract only putaway related fields
      const putawayData = {
        //    putawayLine: data.putawayLine,
        //    putawayLocation: data.putawayLocation,
        //    binLocation: data.binLocation,
        //    putawayQuantity: data.putawayQuantity,
        //    putawayNotes: data.putawayNotes,
        data: data,

        // Add other putaway specific fields
      };
      console.log("Putaway Data:", putawayData);
      // Handle putaway submission logic here
      // Close modal after successful putaway
      closeHandler({}, "backdropClick");
    },
    [closeHandler],
  );
  // Print handler
  const onPrint = useCallback(() => {
    console.log("Print putaway documents");
    // Handle print logic here
    window.print();
  }, []);
  return (
    <>
      <FormProvider {...formProps}>
        <Modal open={open} onClose={closeHandler}>
          <Box
            sx={{
              ...style,
              padding: 2,
              maxHeight: "90vh",
              overflowY: "auto",
              marginLeft: 3,
              marginRight: 3,
            }}
          >
            {openPutaway ? (
              <Box
                component="form"
                onSubmit={formProps.handleSubmit(onSubmitPutaway)}
              >
                <PutawayForm
                  itemDetail={itemDetail}
                  warehouse={warehouse!}
                  disabled={false}
                />
                <Stack direction="row" justifyContent="flex-end" gap={1}>
                  <Button
                    id="printButton"
                    type="button"
                    variant="contained"
                    color="secondary"
                    sx={{ mt: 1 }}
                    onClick={onPrint}
                  >
                    {t("print")}
                  </Button>
                  <Button
                    id="putawaySubmit"
                    type="submit"
                    variant="contained"
                    color="secondary"
                    sx={{ mt: 1 }}
                  >
                    {t("confirm putaway")}
                  </Button>
                </Stack>
              </Box>
            ) : (
              <>
                <Grid
                  container
                  justifyContent="flex-start"
                  alignItems="flex-start"
                >
                  <Grid item xs={12}>
                    <Typography variant="h6" display="block" marginBlockEnd={1}>
                      {t("qc processing")}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <StockInFormVer2 itemDetail={itemDetail} disabled={false} />
                  </Grid>
                </Grid>
                <Stack direction="row" justifyContent="flex-end" gap={1}>
                  <Button
                    id="stockInSubmit"
                    type="button"
                    variant="contained"
                    color="primary"
                    onClick={formProps.handleSubmit(onSubmitStockIn)}
                  >
                    {t("submitStockIn")}
                  </Button>
                </Stack>
                <Grid
                  container
                  justifyContent="flex-start"
                  alignItems="flex-start"
                >
                  <QcFormVer2
                    qc={qc!}
                    itemDetail={itemDetail}
                    disabled={false}
                    qcItems={qcItems}
                    setQcItems={setQcItems}
                  />
                </Grid>
                <Stack direction="row" justifyContent="flex-end" gap={1}>
                  <Button
                    id="emailSupplier"
                    type="button"
                    variant="contained"
                    color="secondary"
                    sx={{ mt: 1 }}
                    onClick={formProps.handleSubmit(onSubmitEmailSupplier)}
                  >
                    {t("email supplier")}
                  </Button>
                  <Button
                    id="qcSubmit"
                    type="button"
                    variant="contained"
                    color="secondary"
                    sx={{ mt: 1 }}
                    onClick={formProps.handleSubmit(onSubmitQc)}
                  >
                    {t("confirm putaway")}
                  </Button>
                </Stack>
              </>
            )}
          </Box>
        </Modal>
      </FormProvider>
    </>
  );
};
export default PoQcStockInModalVer2;