[Template only.] update for po ui template.

src/components/InventorySearch/InventorySearch.tsx

@@ -104,10 +104,10 @@ const InventorySearch: React.FC<Props> = ({ inventories }) => {
           break;
         case "paging":
           setFilteredInventories((fi) =>
-            orderBy(
-              uniqBy([...fi, ...response.records], "id"),
-              ["id"], ["desc"]
-            ));
+            // orderBy(
+              uniqBy([...fi, ...response.records], "id")
+              // , ["id"], ["desc"])
+              );
       }
     }
   }, [inventoriesPagingController, setInventoriesPagingController])

src/components/PoDetail/PoDetail.tsx

@@ -86,7 +86,10 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
   const [rows, setRows] = useState<PurchaseOrderLine[]>(
     purchaseOrder.pol || [],
   );
-  
+  const [row, setRow] = useState(rows[0]);
+  const [stockInLine, setStockInLine] = useState(rows[0].stockInLine);
+  const [processedQty, setProcessedQty] = useState(rows[0].processed);
+
   const searchParams = useSearchParams();
   // const [currPoStatus, setCurrPoStatus] = useState(purchaseOrder.status);
 
@@ -115,7 +118,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
   }, [purchaseOrder]);
 
   function Row(props: { row: PurchaseOrderLine }) {
-  const { row } = props;
+    const { row } = props;
     const [firstReceiveQty, setFirstReceiveQty] = useState<number>()
     const [secondReceiveQty, setSecondReceiveQty] = useState<number>()
     const [open, setOpen] = useState(false);
@@ -144,7 +147,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
     return (
       <>
         <TableRow sx={{ "& > *": { borderBottom: "unset" }, color: "black" }}>
-          <TableCell>
+          {/* <TableCell>
             <IconButton
               disabled={purchaseOrder.status.toLowerCase() === "pending"}
               aria-label="expand row"
@@ -153,25 +156,25 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
             >
               {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
             </IconButton>
-          </TableCell>
+          </TableCell> */}
           <TableCell align="left">{row.itemNo}</TableCell>
           <TableCell align="left">{row.itemName}</TableCell>
-          <TableCell align="left">{integerFormatter.format(row.qty)}</TableCell>
-          <TableCell align="left">{integerFormatter.format(processedQty)}</TableCell>
+          <TableCell align="right">{integerFormatter.format(row.qty)}</TableCell>
+          <TableCell align="right">{integerFormatter.format(processedQty)}</TableCell>
           <TableCell align="left">{row.uom?.code}</TableCell>
-          <TableCell align="left">
+          <TableCell align="right">
             {decimalFormatter.format(totalWeight)} {weightUnit}
           </TableCell>
           {/* <TableCell align="left">{weightUnit}</TableCell> */}
-          <TableCell align="left">{decimalFormatter.format(row.price)}</TableCell>
+          <TableCell align="right">{decimalFormatter.format(row.price)}</TableCell>
           {/* <TableCell align="left">{row.expiryDate}</TableCell> */}
           <TableCell align="left">{t(`${currStatus.toLowerCase()}`)}</TableCell>
-          {/* <TableCell align="left">
+          <TableCell align="right">
             0
           </TableCell>
-          <TableCell align="left">
+          <TableCell align="center">
             <TextField
-              label="輸入數量"
+              label="輸入來貨數量"
               type="text" // Use type="text" to allow validation in the change handler
               variant="outlined"
               value={secondReceiveQty}
@@ -183,14 +186,19 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
                 }
               }}
             />
-          </TableCell> */}
+          </TableCell>
+          <TableCell align="center">
+            <Button variant="contained">
+              提交
+            </Button>
+          </TableCell>
         </TableRow>
-        <TableRow>
+        {/* <TableRow> */}
           {/* <TableCell /> */}
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={12}>
-            <Collapse in={true} timeout="auto" unmountOnExit>
+          {/* <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={12}> */}
+            {/* <Collapse in={true} timeout="auto" unmountOnExit> */}
               {/* <Collapse in={open} timeout="auto" unmountOnExit> */}
-              <Table>
+              {/* <Table>
                 <TableBody>
                   <TableRow>
                     <TableCell align="right">
@@ -208,10 +216,10 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
                     </TableCell>
                   </TableRow>
                 </TableBody>
-              </Table>
-            </Collapse>
-          </TableCell>
-        </TableRow>
+              </Table> */}
+            {/* </Collapse> */}
+          {/* </TableCell> */}
+        {/* </TableRow> */}
       </>
     );
   }
@@ -321,7 +329,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
             </Typography>
           </Grid>
         </Grid>
-        {false ? (<Grid container xs={12} justifyContent="start">
+        {true ? (<Grid container xs={12} justifyContent="start">
           <Grid item xs={3}>
             <TextField
               label={t("dnNo")}
@@ -342,7 +350,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
               label={t("dnDate")}
               type="text" // Use type="text" to allow validation in the change handler
               variant="outlined"
-              defaultValue={"07/08/2025"}
+              defaultValue={"11/08/2025"}
               // value={secondReceiveQty}
               // onChange={handleChange}
               InputProps={{
@@ -365,14 +373,14 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
             item
             xs={6}
             display="flex"
-            justifyContent="end"
-            alignItems="end"
+            // justifyContent="center"
+            alignItems="center"
           >
-            <Button onClick={onOpenScanner}>{t("Accept submit")}</Button>
+            <Button variant={"contained"} onClick={onOpenScanner}>提交</Button>
           </Grid>
         </Grid>) : undefined}
         <Grid container xs={12} justifyContent="space-between">
-          
+
           {/* <Grid item xs={4}> */}
           {/* scanner */}
           {/* </Grid> */}
@@ -403,22 +411,22 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
               <Table aria-label="collapsible table" stickyHeader>
                 <TableHead>
                   <TableRow>
-                    <TableCell /> {/* for the collapse button */}
-                    <TableCell>{t("itemNo")}</TableCell>
-                    <TableCell align="left">{t("itemName")}</TableCell>
-                    <TableCell align="left">{t("qty")}</TableCell>
-                    <TableCell align="left">{t("processed")}</TableCell>
+                    {/* <TableCell /> for the collapse button */}
+                    <TableCell sx={{ width: '125px' }}>{t("itemNo")}</TableCell>
+                    <TableCell align="left" sx={{ width: '125px' }}>{t("itemName")}</TableCell>
+                    <TableCell align="right">{t("qty")}</TableCell>
+                    <TableCell align="right">{t("processed")}</TableCell>
                     <TableCell align="left">{t("uom")}</TableCell>
-                    <TableCell align="left">{t("total weight")}</TableCell>
+                    <TableCell align="right">{t("total weight")}</TableCell>
                     {/* <TableCell align="left">{t("weight unit")}</TableCell> */}
-                    <TableCell align="left">{`${t("price")} (HKD)`}</TableCell>
+                    <TableCell align="right">{`${t("price")} (HKD)`}</TableCell>
                     {/* <TableCell align="left">{t("expiryDate")}</TableCell> */}
-                    <TableCell align="left">{t("status")}</TableCell>
+                    <TableCell align="left"sx={{ width: '75px' }}>{t("status")}</TableCell>
                     {/* start == true && firstInQty == null ? no hide : hide*/}
-                    {/* {renderFieldCondition(FIRST_IN_FIELD) ? <TableCell align="left">{t("receivedQty")}</TableCell> : undefined} */}
+                    {renderFieldCondition(FIRST_IN_FIELD) ? <TableCell align="right">{t("receivedQty")}</TableCell> : undefined}
                     {/* start == true && firstInQty == null ? hide and disabled : no hide*/}
-                    {/* {renderFieldCondition(SECOND_IN_FIELD) ? <TableCell align="left">{t("dnQty")}</TableCell> : undefined} */}
-                    {/* <TableCell align="left">{"add icon button"}</TableCell> */}
+                    {renderFieldCondition(SECOND_IN_FIELD) ? <TableCell align="center" sx={{ width: '150px' }}>{t("dnQty")}(以訂單單位計算)</TableCell> : undefined}
+                    <TableCell align="center" sx={{ width: '100px' }}></TableCell>
                   </TableRow>
                 </TableHead>
                 <TableBody>
@@ -429,6 +437,32 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
               </Table>
             </TableContainer>
           </Grid>
+          <Grid item xs={12}>
+            <Typography variant="h6">已選擇: {row.itemNo}-{row.itemName}</Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <TableContainer component={Paper} sx={{ width: 'fit-content', overflow: 'auto' }}>
+              <Table>
+                <TableBody>
+                  <TableRow>
+                    <TableCell align="right">
+                      <Box>
+                        <PoInputGrid
+                          qc={qc}
+                          setRows={setRows}
+                          stockInLine={stockInLine}
+                          setStockInLine={setStockInLine}
+                          setProcessedQty={setProcessedQty}
+                          itemDetail={row}
+                          warehouse={warehouse}
+                        />
+                      </Box>
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Grid>
         </Grid>
         {/* tab 2 */}
         <Grid sx={{ display: tabIndex === 1 ? "block" : "none" }}>

src/components/PoDetail/PoInputGrid.tsx

@@ -406,16 +406,16 @@ function PoInputGrid({
 
   const columns = useMemo<GridColDef[]>(
     () => [
-      {
-        field: "itemNo",
-        headerName: t("itemNo"),
-        width: 100,
-        // flex: 0.4,
-      },
+      // {
+      //   field: "itemNo",
+      //   headerName: t("itemNo"),
+      //   width: 100,
+      //   // flex: 0.4,
+      // },
       {
         field: "dnNo",
         headerName: t("dnNo"),
-        width: 100,
+        width: 125,
         renderCell: () => {
           return <>DN0000001</>
         }
@@ -424,23 +424,23 @@ function PoInputGrid({
       {
         field: "dnDate",
         headerName: t("dnDate"),
-        width: 100,
+        width: 125,
         renderCell: () => {
           return <>07/08/2025</>
         }
         // flex: 0.4,
       },
-      {
-        field: "itemName",
-        headerName: t("itemName"),
-        width: 100,
-        // flex: 0.6,
-      },
+      // {
+      //   field: "itemName",
+      //   headerName: t("itemName"),
+      //   width: 100,
+      //   // flex: 0.6,
+      // },
       {
         field: "acceptedQty",
         headerName: t("acceptedQty"),
         // flex: 0.5,
-        width: 100,
+        width: 125,
         type: "number",
         // editable: true,
         // replace with tooltip + content

src/components/StyledDataGrid/StyledDataGrid.tsx

@@ -7,8 +7,9 @@ const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
     backgroundColor: theme.palette.grey[50],
   },
   "& .MuiDataGrid-columnHeaderTitle": {
+    borderBottom: "none",
     color: theme.palette.grey[700],
-    fontSize: 12,
+    fontSize: 16, 
     fontWeight: 600,
     lineHeight: 2,
     letterSpacing: 0.5,
@@ -17,8 +18,12 @@ const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
   "& .MuiDataGrid-columnSeparator": {
     color: theme.palette.primary.main,
   },
-  "& .MuiDataGrid-row:nth-of-type(even)": {
-    backgroundColor: theme.palette.grey[200], // Light grey for even rows
+  // "& .MuiDataGrid-row:nth-of-type(even)": {
+  //   backgroundColor: theme.palette.grey[200], // Light grey for even rows
+  // },
+  '& .MuiDataGrid-cell': {
+    borderBottomColor: theme.palette.divider,
+    padding: '1px 6px',
   },
 }));
 

src/i18n/zh/purchaseOrder.json

@@ -37,7 +37,7 @@
     "price": "訂單貨值",
     "processed": "已處理數量",
     "expiryDate": "到期日",
-    "acceptedQty": "是次訂單/來貨/巳來貨數量",
+    "acceptedQty": "是次來貨數量",
     "weight": "重量",
     "start": "開始",
     "qc": "質量控制",
@@ -57,6 +57,7 @@
     "received": "已收貨",
     "completed": "已完成",
     "rejected": "已拒絕",
+    "status": "狀態",
 
     "acceptedQty must not greater than": "接受數量不得大於",
     "minimal value is 1": "最小值為1",
@@ -93,7 +94,7 @@
     "receivedQty": "已來貨數量",
     "dnQty": "送貨單數量",
 
-    "Accept submit": "接受來貨",
+    "Accept submit": "處理來貨",
     "qc processing": "處理來貨及品檢",
     "putawayBtn": "上架",
     "dnNo": "送貨單編號",