update

src/components/PoDetail/PoDetail.tsx

@@ -62,6 +62,7 @@ import QrModal from "./QrModal";
 import { PlayArrow } from "@mui/icons-material";
 import DoneIcon from "@mui/icons-material/Done";
 import { getCustomWidth } from "@/app/utils/commonUtil";
+import PoInfoCard from "./PoInfoCard";
 
 type Props = {
   po: PoResult;
@@ -71,8 +72,8 @@ type Props = {
 
 type EntryError =
   | {
-      [field in keyof StockInLine]?: string;
-    }
+    [field in keyof StockInLine]?: string;
+  }
   | undefined;
 // type PolRow = TableRow<Partial<StockInLine>, EntryError>;
 const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
@@ -84,6 +85,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
   const [rows, setRows] = useState<PurchaseOrderLine[]>(
     purchaseOrder.pol || [],
   );
+  
   const searchParams = useSearchParams();
   // const [currPoStatus, setCurrPoStatus] = useState(purchaseOrder.status);
 
@@ -186,7 +188,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
           {/* <TableCell /> */}
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={12}>
             <Collapse in={true} timeout="auto" unmountOnExit>
-            {/* <Collapse in={open} timeout="auto" unmountOnExit> */}
+              {/* <Collapse in={open} timeout="auto" unmountOnExit> */}
               <Table>
                 <TableBody>
                   <TableRow>
@@ -294,9 +296,9 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
     switch (field) {
       case FIRST_IN_FIELD:
 
-        return true; 
+        return true;
       case SECOND_IN_FIELD:
-        return true; 
+        return true;
       default:
         return false; // Default case
     }
@@ -306,8 +308,8 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
     <>
       <Stack
         spacing={2}
-        //   component="form"
-        //   onSubmit={formProps.handleSubmit(onSubmit, onSubmitError)}
+      //   component="form"
+      //   onSubmit={formProps.handleSubmit(onSubmit, onSubmitError)}
       >
         <Grid container xs={12} justifyContent="start">
           <Grid item>
@@ -333,7 +335,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
                 }
               }}
             />
-            </Grid>
+          </Grid>
           <Grid item xs={3}>
             <TextField
               label={t("dnDate")}
@@ -399,37 +401,42 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
           </Grid>
         </Grid>
         {/* tab 1 */}
-        <Grid sx={{ display: tabIndex === 0 ? "block" : "none" }}>
-          <TableContainer component={Paper} sx={{ width: 'fit-content', overflow: 'auto' }}>
-          {/* <TableContainer component={Paper} sx={{width: getCustomWidth(), overflow: 'auto' }}> */}
-            <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 align="left">{t("uom")}</TableCell>
-                  <TableCell align="left">{t("total weight")}</TableCell>
-                  {/* <TableCell align="left">{t("weight unit")}</TableCell> */}
-                  <TableCell align="left">{t("price")}</TableCell>
-                  {/* <TableCell align="left">{t("expiryDate")}</TableCell> */}
-                  <TableCell align="left">{t("status")}</TableCell>
-                  {/* start == true && firstInQty == null ? no hide : hide*/}
-                  {/* {renderFieldCondition(FIRST_IN_FIELD) ? <TableCell align="left">{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> */}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {rows.map((row) => (
-                  <Row key={row.id} row={row} />
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
+        <Grid rowSpacing={2} container sx={{ display: tabIndex === 0 ? "block" : "none" }}>
+          <Grid item xs={12}>
+            <PoInfoCard po={purchaseOrder} />
+          </Grid>
+          <Grid item xs={12}>
+            <TableContainer component={Paper} sx={{ width: 'fit-content', overflow: 'auto' }}>
+              {/* <TableContainer component={Paper} sx={{width: getCustomWidth(), overflow: 'auto' }}> */}
+              <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 align="left">{t("uom")}</TableCell>
+                    <TableCell align="left">{t("total weight")}</TableCell>
+                    {/* <TableCell align="left">{t("weight unit")}</TableCell> */}
+                    <TableCell align="left">{t("price")}</TableCell>
+                    {/* <TableCell align="left">{t("expiryDate")}</TableCell> */}
+                    <TableCell align="left">{t("status")}</TableCell>
+                    {/* start == true && firstInQty == null ? no hide : hide*/}
+                    {/* {renderFieldCondition(FIRST_IN_FIELD) ? <TableCell align="left">{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> */}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <Row key={row.id} row={row} />
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Grid>
         </Grid>
         {/* tab 2 */}
         <Grid sx={{ display: tabIndex === 1 ? "block" : "none" }}>

src/components/PoDetail/PoInfoCard.tsx

@@ -1,3 +1,5 @@
+import { PoResult } from "@/app/api/po";
+import { arrayToDateString } from "@/app/utils/formatUtil";
 import {
   Box,
   Button,
@@ -8,21 +10,66 @@ import {
   Tab,
   Tabs,
   TabsProps,
+  TextField,
   Typography,
 } from "@mui/material";
+import { useTranslation } from "react-i18next";
 type Props = {
   // id?: number
+  po: PoResult;
 };
 
 const PoInfoCard: React.FC<Props> = async (
   {
     // id
+    po
   },
 ) => {
+
+  const { t } = useTranslation("purchaseOrder")
   return (
     <>
-      <Card>
-        <CardContent></CardContent>
+      <Card sx={{ display: "block" }}>
+        <CardContent component={Stack} spacing={4}>
+          <Box>
+            <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
+              <Grid item xs={6}>
+                <TextField
+                  // {
+                  //     ...register("status")
+                  // }
+                  label={t("Supplier")}
+                  fullWidth
+                  disabled={true}
+                  value={po.supplier}
+                />
+              </Grid>
+              <Grid item xs={6} />
+              <Grid item xs={6}>
+                <TextField
+                  // {
+                  // ...register("code")
+                  // }
+                  label={t("Order Date")}
+                  fullWidth
+                  disabled={true}
+                  value={arrayToDateString(po.orderDate)}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  // {
+                  // ...register("name")
+                  // }
+                  label={t("ETA")}
+                  fullWidth
+                  disabled={true}
+                  value={arrayToDateString(po.estimatedArrivalDate)}
+                />
+              </Grid>
+            </Grid>
+          </Box>
+        </CardContent>
       </Card>
     </>
   );