no message

src/components/Qc/QcComponent.tsx

@@ -52,6 +52,8 @@ interface Props {
   disabled: boolean;
   /** When true, use smaller typography and input size to match 來貨詳情 section (e.g. in QcStockInModal). */
   compactLayout?: boolean;
+  /** When true, use even denser/smaller layout (e.g. for productionProcess / tablet). */
+  denseLayout?: boolean;
   // qcItems: QcData[]
   // setQcItems: Dispatch<SetStateAction<QcData[]>>
 }
@@ -64,7 +66,7 @@ type EntryError =
 
 type QcRow = TableRow<Partial<QcResult>, EntryError>;
 // fetchQcItemCheck
-const QcComponent: React.FC<Props> = ({ itemDetail, disabled = false, compactLayout = false }) => {
+const QcComponent: React.FC<Props> = ({ itemDetail, disabled = false, compactLayout = false, denseLayout = false }) => {
   const { t } = useTranslation("purchaseOrder");
   const apiRef = useGridApiRef();
   const {
@@ -423,9 +425,9 @@ useEffect(() => {
     );
   }
 
-  const headerVariant = compactLayout ? "subtitle1" : "h5";
-  const subVariant = compactLayout ? "body2" : "subtitle1";
-  const sub2Variant = compactLayout ? "body2" : "subtitle2";
+  const headerVariant = denseLayout ? "body2" : (compactLayout ? "subtitle1" : "h5");
+  const subVariant = denseLayout ? "caption" : (compactLayout ? "body2" : "subtitle1");
+  const sub2Variant = denseLayout ? "caption" : (compactLayout ? "body2" : "subtitle2");
   const QcHeader = useMemo(() => () => {
     if (qcCategory === undefined || qcCategory === null) {
       return (
@@ -449,7 +451,7 @@ useEffect(() => {
       </Box>
       </>
     );
-  }, [qcType, qcCategory, headerVariant, subVariant, sub2Variant]);
+  }, [qcType, qcCategory, headerVariant, subVariant, sub2Variant, denseLayout]);
 
   return (
     <>
@@ -487,7 +489,7 @@ useEffect(() => {
               <QcForm
                 rows={qcResult}
                 disabled={disabled}
-                compactLayout={compactLayout}
+                denseLayout={denseLayout}
               />
             </Grid>
           </>
@@ -512,15 +514,15 @@ useEffect(() => {
                 <QcForm
                   disabled={disabled}
                   rows={qcHistory}
-                  compactLayout={compactLayout}
+                  denseLayout={denseLayout}
                 />
               </CollapsibleCard>
             </Grid>
           </>
         )}
         <Grid item xs={12}>
-          <Card sx={{p:2}}>
-            <Typography variant={compactLayout ? "subtitle1" : "h6"} display="block" marginBlockEnd={1}>
+          <Card sx={{ p: denseLayout ? 1 : 2 }}>
+            <Typography variant={denseLayout ? "body2" : (compactLayout ? "subtitle1" : "h6")} display="block" marginBlockEnd={1} fontWeight={600}>
               {t("Qc Decision")}
             </Typography>
             <FormControl>
@@ -573,7 +575,7 @@ useEffect(() => {
                           // type="number"
                           id="accQty"
                           label={t("acceptQty")}
-                          size={compactLayout ? "small" : "medium"}
+                          size={compactLayout || denseLayout ? "small" : "medium"}
                           sx={{ width: '150px' }}
                           // value={Number(accQty)}
                           defaultValue={Number(accQty)}
@@ -626,7 +628,7 @@ useEffect(() => {
                         <TextField
                           type="number"
                           label={t("rejectQty")}
-                          size={compactLayout ? "small" : "medium"}
+                          size={compactLayout || denseLayout ? "small" : "medium"}
                           sx={{ width: '150px' }}
                           value={
                             (!Boolean(errors.acceptQty) && qcDecision !== undefined && qcDecision != 3) ?

src/components/Qc/QcForm.tsx

@@ -20,11 +20,11 @@ import { QcFormInput, QcResult } from "@/app/api/qc";
 interface Props {
   rows: QcResult[];
   disabled?: boolean;
-  /** When true, use smaller typography and inputs to match 來貨詳情 (e.g. in QcStockInModal). */
-  compactLayout?: boolean;
+  /** When true, use smaller font and padding (e.g. for productionProcess / tablet). */
+  denseLayout?: boolean;
 }
 
-const QcForm: React.FC<Props> = ({ rows, disabled = false, compactLayout = false }) => {
+const QcForm: React.FC<Props> = ({ rows, disabled = false, denseLayout = false }) => {
   const { t } = useTranslation("purchaseOrder");
   const apiRef = useGridApiRef();
   const {
@@ -72,8 +72,8 @@ const QcForm: React.FC<Props> = ({ rows, disabled = false, compactLayout = false
         <Box
           sx={{
             lineHeight: 1.5,
-            padding: "4px",
-            fontSize: compactLayout ? 14 : 18,
+            padding: denseLayout ? "2px" : "4px",
+            fontSize: denseLayout ? 14 : 18,
           }}
         >
           <b>{`${params.row.order ?? "N/A"}. ${params.value}`}</b><br/>
@@ -143,6 +143,7 @@ const QcForm: React.FC<Props> = ({ rows, disabled = false, compactLayout = false
         return (
         <TextField
           type="number"
+          size={denseLayout ? "small" : "medium"}
           value={!params.row.qcPassed? params.value : '0'}
           disabled={params.row.qcPassed || qcDisabled(params.row)}
           /* TODO improve */
@@ -163,11 +164,10 @@ const QcForm: React.FC<Props> = ({ rows, disabled = false, compactLayout = false
           onMouseDown={(e) => e.stopPropagation()}
           onKeyDown={(e) => e.stopPropagation()}
           inputProps={{ min: 0 }}
-          size={compactLayout ? "small" : "medium"}
           sx={{ width: '100%',
-            "& .MuiInputBase-input": compactLayout ? undefined : {
-              padding: "0.75rem",
-              fontSize: 24,
+            "& .MuiInputBase-input": {
+              padding: denseLayout ? "0.35rem 0.5rem" : "0.75rem",
+              fontSize: denseLayout ? 14 : 24,
             },
           }}
         />
@@ -205,16 +205,16 @@ const QcForm: React.FC<Props> = ({ rows, disabled = false, compactLayout = false
             onMouseDown={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}
             sx={{ width: '100%',
-              "& .MuiInputBase-input": compactLayout ? undefined : {
-                padding: "0.75rem",
-                fontSize: 24,
+              "& .MuiInputBase-input": {
+                padding: denseLayout ? "0.35rem 0.5rem" : "0.75rem",
+                fontSize: denseLayout ? 14 : 24,
               },
             }}
           />
         );
       },
      },
-    ], [compactLayout, t, setValue, qcDisabled])
+    ], [denseLayout, t])
 
   // const getRowId = (row :any) => {
   //   return qcRecord.findIndex(qc => qc == row);

src/components/Qc/QcStockInModal.tsx

@@ -720,6 +720,7 @@ const printQrcode = useCallback(
                       itemDetail={stockInLineInfo}
                       disabled={viewOnly || showPutaway}
                       compactLayout
+                      denseLayout={printSource === "productionProcess"}
                     />)
                   }
                   <Stack direction="row" justifyContent="flex-end" gap={1} sx={{pt:2}}>