upDATE

src/components/Qc/QcComponent.tsx

@@ -50,6 +50,8 @@ interface Props {
   // itemDetail: StockInLine & { qcResult?: PurchaseQcResult[] } & { escResult?: EscalationResult[] };
   // qc: QcItemWithChecks[];
   disabled: boolean;
+  /** When true, use smaller typography and input size to match 來貨詳情 section (e.g. in QcStockInModal). */
+  compactLayout?: boolean;
   // qcItems: QcData[]
   // setQcItems: Dispatch<SetStateAction<QcData[]>>
 }
@@ -62,7 +64,7 @@ type EntryError =
 
 type QcRow = TableRow<Partial<QcResult>, EntryError>;
 // fetchQcItemCheck
-const QcComponent: React.FC<Props> = ({ itemDetail, disabled = false }) => {
+const QcComponent: React.FC<Props> = ({ itemDetail, disabled = false, compactLayout = false }) => {
   const { t } = useTranslation("purchaseOrder");
   const apiRef = useGridApiRef();
   const {
@@ -421,10 +423,13 @@ useEffect(() => {
     );
   }
 
+  const headerVariant = compactLayout ? "subtitle1" : "h5";
+  const subVariant = compactLayout ? "body2" : "subtitle1";
+  const sub2Variant = compactLayout ? "body2" : "subtitle2";
   const QcHeader = useMemo(() => () => {
     if (qcCategory === undefined || qcCategory === null) {
       return (
-        <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: '#333' }}>
+        <Typography variant={headerVariant} component="h2" sx={{ fontWeight: 'bold', color: '#333' }}>
           N/A
         </Typography>
       );
@@ -432,19 +437,19 @@ useEffect(() => {
     return (
       <>
       <Box sx={{ mb: 2, p: 2, backgroundColor: '#f5f5f5', borderRadius: 1 }}>
-        <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: '#333' }}>
+        <Typography variant={headerVariant} component="h2" sx={{ fontWeight: 'bold', color: '#333' }}>
             {qcCategory?.name} ({qcCategory?.code})
         </Typography>
-        <Typography variant="subtitle1" sx={{ color: '#666' }}>
+        <Typography variant={subVariant} sx={{ color: '#666' }}>
             <b>品檢類型</b>：{qcType}
         </Typography>
-        <Typography variant="subtitle2" sx={{ color: '#666' }}>
+        <Typography variant={sub2Variant} sx={{ color: '#666' }}>
             {formattedDesc(qcCategory?.description)}
         </Typography>
       </Box>
       </>
     );
-  }, [qcType, qcCategory]);
+  }, [qcType, qcCategory, headerVariant, subVariant, sub2Variant]);
 
   return (
     <>
@@ -513,7 +518,7 @@ useEffect(() => {
         )}
         <Grid item xs={12}>
           <Card sx={{p:2}}>
-            <Typography variant="h6" display="block" marginBlockEnd={1}>
+            <Typography variant={compactLayout ? "subtitle1" : "h6"} display="block" marginBlockEnd={1}>
               {t("Qc Decision")}
             </Typography>
             <FormControl>
@@ -566,6 +571,7 @@ useEffect(() => {
                           // type="number"
                           id="accQty"
                           label={t("acceptQty")}
+                          size={compactLayout ? "small" : "medium"}
                           sx={{ width: '150px' }}
                           // value={Number(accQty)}
                           defaultValue={Number(accQty)}
@@ -618,6 +624,7 @@ useEffect(() => {
                         <TextField
                           type="number"
                           label={t("rejectQty")}
+                          size={compactLayout ? "small" : "medium"}
                           sx={{ width: '150px' }}
                           value={
                             (!Boolean(errors.acceptQty) && qcDecision !== undefined && qcDecision != 3) ?

src/components/Qc/QcForm.tsx

@@ -133,7 +133,7 @@ const QcForm: React.FC<Props> = ({ rows, disabled = false }) => {
      {
       field: "failQty",
       headerName: t("failedQty"),
-      flex: 0.5,
+      flex: 0.8,
       // editable: true,
       renderCell: (params) => {
         const index = getRowIndex(params);//params.api.getRowIndexRelativeToVisibleRows(params.id);
@@ -174,7 +174,7 @@ const QcForm: React.FC<Props> = ({ rows, disabled = false }) => {
      {
       field: "remarks",
       headerName: t("remarks"),
-      flex: 2,
+      flex: 1.7,
       renderCell: (params) => {
         // const index = Number(params.id);//params.api.getRowIndexRelativeToVisibleRows(params.id);
         const index = getRowIndex(params);//params.api.getRowIndexRelativeToVisibleRows(params.id);

src/components/Qc/QcStockInModal.tsx

@@ -705,7 +705,7 @@ const printQrcode = useCallback(
               {tabIndex === 0 && 
                 <Box>
                   <Grid item xs={12}>
-                    <Typography variant="h6" display="block" marginBlockEnd={1}>
+                    <Typography variant="subtitle1" display="block" marginBlockEnd={1} fontWeight={600}>
                       {t("Delivery Detail")}
                     </Typography>
                   </Grid>
@@ -719,6 +719,7 @@ const printQrcode = useCallback(
                     <QcComponent
                       itemDetail={stockInLineInfo}
                       disabled={viewOnly || showPutaway}
+                      compactLayout
                     />)
                   }
                   <Stack direction="row" justifyContent="flex-end" gap={1} sx={{pt:2}}>