posearch/detail

src/components/PoDetail/PoDetail.tsx

@@ -199,7 +199,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
   const [selectedPoId, setSelectedPoId] = useState(po.id);
   const currentPoId = searchParams.get('id');
   const selectedIdsParam = searchParams.get('selectedIds');
-
+  const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
 
   const fetchPoList = useCallback(async () => {
     try {
@@ -221,15 +221,6 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
     }
   }, [selectedIdsParam]);
 
-  const handlePoSelect = useCallback(
-    (selectedPo: PoResult) => {
-      setSelectedPoId(selectedPo.id);
-
-      const newSelectedIds = selectedIdsParam || selectedPo.id.toString();
-      router.push(`/po/edit?id=${selectedPo.id}&start=true&selectedIds=${newSelectedIds}`, { scroll: false });
-    },
-    [router, selectedIdsParam]
-  );
 
    const fetchPoDetail = useCallback(async (poId: string) => {
     try {
@@ -247,7 +238,16 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
       console.error("Failed to fetch PO detail:", error);
     }
   }, []);
-
+  
+  const handlePoSelect = useCallback(
+    async (selectedPo: PoResult) => {
+      setSelectedPoId(selectedPo.id);
+      await fetchPoDetail(selectedPo.id.toString());
+      const newSelectedIds = selectedIdsParam || selectedPo.id.toString();
+      router.push(`/po/edit?id=${selectedPo.id}&start=true&selectedIds=${newSelectedIds}`, { scroll: false });
+    },
+    [router, selectedIdsParam, fetchPoDetail]
+  );
   
   useEffect(() => {
     if (currentPoId && currentPoId !== selectedPoId.toString()) {
@@ -324,6 +324,12 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
       }
     }, [processedQty, row.qty]);
 
+    const handleRowSelect = () => {
+      setSelectedRowId(row.id);
+      setRow(row);
+      setStockInLine(row.stockInLine);
+      setProcessedQty(row.processed);
+    };
     return (
       <>
         <TableRow sx={{ "& > *": { borderBottom: "unset" }, color: "black" }}>
@@ -337,6 +343,13 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
               {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
             </IconButton>
           </TableCell> */}
+          <TableCell align="center" sx={{ width: '60px' }}>
+            <Checkbox
+              checked={selectedRowId === row.id}
+              onChange={handleRowSelect}
+              onClick={(e) => e.stopPropagation()}
+            />
+          </TableCell>
           <TableCell align="left">{row.itemNo}</TableCell>
           <TableCell align="left">{row.itemName}</TableCell>
           <TableCell align="right">{integerFormatter.format(row.qty)}</TableCell>
@@ -570,6 +583,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
               <Table aria-label="collapsible table" stickyHeader>
                 <TableHead>
                   <TableRow>
+                    <TableCell align="center" sx={{ width: '60px' }}>Select</TableCell>
                     <TableCell sx={{ width: '125px' }}>{t("itemNo")}</TableCell>
                     <TableCell align="left" sx={{ width: '125px' }}>{t("itemName")}</TableCell>
                     <TableCell align="right">{t("qty")}</TableCell>
@@ -596,30 +610,34 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
         {/* area5: selected item info */}
         <Grid container xs={12} justifyContent="start">
           <Grid item xs={12}>
-            <Typography variant="h6">已選擇: {row.itemNo}-{row.itemName}</Typography>
+            <Typography variant="h6">
+              已選擇: {selectedRowId ? row.itemNo : '無'} - {selectedRowId ? 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>
+            {selectedRowId && (
+              <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 */}

src/components/PoSearch/PoSearch.tsx

@@ -47,16 +47,15 @@ const PoSearch: React.FC<Props> = ({
   const [totalCount, setTotalCount] = useState(initTotalCount);
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(() => {
     const searchCriteria: Criterion<SearchParamNames>[] = [
-     { label: t("Po No."), paramName: "code", type: "text" },
       { label: t("Supplier"), paramName: "supplier", type: "text" },
-      { label: t("Order Date"), label2: t("Order Date To"), paramName: "orderDate", type: "dateRange" },
+      { label: t("Po No."), paramName: "code", type: "text" },
       {
         label: t("Escalated"),
         paramName: "escalated",
         type: "select",
         options: [t("Escalated"), t("NotEscalated")],
       },
-      { label: t("ETA"), label2: t("ETA To"), paramName: "estimatedArrivalDate", type: "dateRange" },
+      { label: t("Order Date"), label2: t("Order Date To"), paramName: "orderDate", type: "dateRange" },
       {
         label: t("Status"),
         paramName: "status",
@@ -67,6 +66,8 @@ const PoSearch: React.FC<Props> = ({
           { label: t(`completed`), value: `completed` },
         ],
       },
+      { label: t("ETA"), label2: t("ETA To"), paramName: "estimatedArrivalDate", type: "dateRange" },
+      
     ];
     return searchCriteria;
   }, [t]);
@@ -114,7 +115,7 @@ const PoSearch: React.FC<Props> = ({
     () => [
       {
         name: "id" as keyof PoResult,
-        label: "Select", 
+        label: "Select",
         renderCell: (params) => (
           <Checkbox
             checked={selectedPoIds.includes(params.id)}