update with qc form v2

src/app/api/po/actions.ts

@@ -52,6 +52,7 @@ export interface StockInInput {
 export interface PurchaseQCInput {
   status: string;
   acceptedQty: number;
+  passingQty: number;
   sampleRate: number;
   sampleWeight: number;
   totalWeight: number;

src/components/PoDetail/EscalationComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent, FormEvent } from 'react';
+import React, { useState, ChangeEvent, FormEvent, Dispatch } from 'react';
 import {
     Box,
     Button,
@@ -35,14 +35,16 @@ interface FormData {
 
 interface Props {
     forSupervisor: boolean
+    isCollapsed: boolean
+    setIsCollapsed: Dispatch<React.SetStateAction<boolean>>
 }
-
 const EscalationComponent: React.FC<Props> = ({ 
-    forSupervisor
+    forSupervisor,
+    isCollapsed,
+    setIsCollapsed
  }) => {
     const { t } = useTranslation("purchaseOrder");
     
-    const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
     const [formData, setFormData] = useState<FormData>({
         name: '',
         quantity: '',

src/components/PoDetail/QcFormVer2.tsx

@@ -249,7 +249,7 @@ const QcFormVer2: React.FC<Props> = ({ qc, itemDetail, disabled, qcItems, setQcI
       headerName: t("qcItem"),
       flex: 1,
      },
-{
+     {
       field: 'isPassed',
       headerName: t("passed"),
       flex: 1,
@@ -261,7 +261,11 @@ const QcFormVer2: React.FC<Props> = ({ qc, itemDetail, disabled, qcItems, setQcI
           onChange={(e) => {
             const checked = e.target.checked;
             setQcItems((prev) =>
-              prev.map((r) => (r.id === params.id ? { ...r, isPassed: checked } : r))
+              prev.map((r) =>
+                r.id === params.id
+                  ? { ...r, isPassed: checked, isFailed: !checked ? r.isFailed : false }
+                  : r
+              )
             );
           }}
           size="small"
@@ -282,7 +286,11 @@ const QcFormVer2: React.FC<Props> = ({ qc, itemDetail, disabled, qcItems, setQcI
           onChange={(e) => {
             const checked = e.target.checked;
             setQcItems((prev) =>
-              prev.map((r) => (r.id === params.id ? { ...r, isFailed: checked } : r))
+              prev.map((r) =>
+                r.id === params.id
+                  ? { ...r, isFailed: checked, isPassed: !checked ? r.isPassed : false }
+                  : r
+              )
             );
           }}
           size="small"
@@ -343,15 +351,31 @@ const QcFormVer2: React.FC<Props> = ({ qc, itemDetail, disabled, qcItems, setQcI
 
   useEffect(() => {
     console.log(itemDetail);
-    const status = "receiving";
-    // switch (itemDetail.status) {
-    //   case 'pending':
-    //     status = "receiving"
-    //     break;
-    // }
-    setValue("status", status);
+    
+  }, [itemDetail]);
+
+  // const [openCollapse, setOpenCollapse] = useState(false)
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
+
+  const onFailedOpenCollapse = useCallback((qcItems: QcData[]) => {
+    const isFailed = qcItems.some((qc) => qc.isFailed)
+    console.log(isFailed)
+    if (isFailed) {
+      setIsCollapsed(true)
+    } else {
+      setIsCollapsed(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    console.log(itemDetail);
+    
   }, [itemDetail]);
 
+  useEffect(() => {
+    onFailedOpenCollapse(qcItems)
+  }, [qcItems, onFailedOpenCollapse]);
+
   return (
     <>
     <Grid container justifyContent="flex-start" alignItems="flex-start">
@@ -392,10 +416,18 @@ const QcFormVer2: React.FC<Props> = ({ qc, itemDetail, disabled, qcItems, setQcI
                 type="number"
                 label={t("acceptedQty")}
                 fullWidth
+                defaultValue={watch("passingQty")}
+                {...register("passingQty", {
+                  required: "passingQty required!",
+                })}
               />
             </Grid>
             <Grid item xs={12}>
-              <EscalationComponent forSupervisor={false}/>
+              <EscalationComponent 
+                forSupervisor={false}
+                isCollapsed={isCollapsed}
+                setIsCollapsed={setIsCollapsed}
+                />
             </Grid>
           </>
         )}
@@ -429,6 +461,8 @@ const QcFormVer2: React.FC<Props> = ({ qc, itemDetail, disabled, qcItems, setQcI
             <Grid item xs={12}>
               <EscalationComponent
                 forSupervisor={true}
+                isCollapsed={isCollapsed}
+                setIsCollapsed={setIsCollapsed}
               />
             </Grid>
           </>

src/components/PoDetail/QcStockInModalVer2.tsx

@@ -11,7 +11,7 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
-import { Dispatch, SetStateAction, useCallback, useState } from "react";
+import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { StockInLineRow } from "./PoInputGrid";
 import { useTranslation } from "react-i18next";
@@ -19,7 +19,7 @@ import StockInForm from "./StockInForm";
 import StockInFormVer2 from "./StockInFormVer2";
 import QcFormVer2 from "./QcFormVer2";
 import PutawayForm from "./PutawayForm";
-import { dummyPutawayLine, dummyQCData } from "./dummyQcTemplate";
+import { dummyPutawayLine, dummyQCData, QcData } from "./dummyQcTemplate";
 import { useGridApiRef } from "@mui/x-data-grid";
 const style = {
   position: "absolute",
@@ -189,6 +189,25 @@ const [qcItems, setQcItems] = useState(dummyQCData)
     // Handle print logic here
     window.print();
   }, []);
+  const acceptQty = formProps.watch("acceptedQty")
+
+  const checkQcIsPassed = useCallback((qcItems: QcData[]) => {
+    const isPassed = qcItems.every((qc) => qc.isPassed);
+    console.log(isPassed)
+    if (isPassed) {
+        formProps.setValue("passingQty", acceptQty)
+    } else {
+        formProps.setValue("passingQty", 0)
+    }
+    return isPassed
+  }, [acceptQty, formProps])
+
+  useEffect(() => {
+    // maybe check if submitted before
+    console.log(qcItems)
+    checkQcIsPassed(qcItems)
+  }, [qcItems, checkQcIsPassed])
+
   return (
     <>
       <FormProvider {...formProps}>