@@ -113,7 +113,7 @@ const PoSearchList: React.FC<{ | |||||
}, [poList, searchTerm, t]); | }, [poList, searchTerm, t]); | ||||
return ( | return ( | ||||
<Paper sx={{ p: 2, maxHeight: "400px", overflow: "auto", minWidth: "300px" }}> | |||||
<Paper sx={{ p: 2, maxHeight: "480px", overflow: "auto", minWidth: "300px", height: "480px" }}> | |||||
<Typography variant="h6" gutterBottom> | <Typography variant="h6" gutterBottom> | ||||
{t("Purchase Orders")} | {t("Purchase Orders")} | ||||
</Typography> | </Typography> | ||||
@@ -486,7 +486,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => { | |||||
{/* <TableCell align="right">{decimalFormatter.format(row.price)}</TableCell> */} | {/* <TableCell align="right">{decimalFormatter.format(row.price)}</TableCell> */} | ||||
{/* <TableCell align="left">{row.expiryDate}</TableCell> */} | {/* <TableCell align="left">{row.expiryDate}</TableCell> */} | ||||
<TableCell align="left">{t(`${currStatus.toLowerCase()}`)}</TableCell> | <TableCell align="left">{t(`${currStatus.toLowerCase()}`)}</TableCell> | ||||
<TableCell align="right">{integerFormatter.format(row.receivedQty)}</TableCell> | |||||
{/* <TableCell align="right">{integerFormatter.format(row.receivedQty)}</TableCell> */} | |||||
<TableCell align="center"> | <TableCell align="center"> | ||||
<TextField | <TextField | ||||
id="lotNo" | id="lotNo" | ||||
@@ -700,7 +700,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => { | |||||
{true ? ( | {true ? ( | ||||
<FormProvider {...dnFormProps}> | <FormProvider {...dnFormProps}> | ||||
<Stack component={"form"} spacing={2}> | <Stack component={"form"} spacing={2}> | ||||
<Card sx={{ display: "block" }}> | |||||
<Card sx={{ display: "block", height: "230px" }}> | |||||
<CardContent component={Stack} spacing={2}> | <CardContent component={Stack} spacing={2}> | ||||
<Grid container spacing={2} sx={{ maxWidth: 'fit-content' }}> | <Grid container spacing={2} sx={{ maxWidth: 'fit-content' }}> | ||||
<Grid item xs={12}> | <Grid item xs={12}> | ||||
@@ -784,9 +784,9 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => { | |||||
{/* <TableCell align="right">{t("total weight")}</TableCell> */} | {/* <TableCell align="right">{t("total weight")}</TableCell> */} | ||||
{/* <TableCell align="right">{`${t("price")} (HKD)`}</TableCell> */} | {/* <TableCell align="right">{`${t("price")} (HKD)`}</TableCell> */} | ||||
<TableCell align="left" sx={{ width: '75px' }}>{t("status")}</TableCell> | <TableCell align="left" sx={{ width: '75px' }}>{t("status")}</TableCell> | ||||
{renderFieldCondition(FIRST_IN_FIELD) ? <TableCell align="right">{t("receivedQty")}</TableCell> : undefined} | |||||
{/* {renderFieldCondition(FIRST_IN_FIELD) ? <TableCell align="right">{t("receivedQty")}</TableCell> : undefined} */} | |||||
<TableCell align="center" sx={{ width: '150px' }}>{t("productLotNo")}</TableCell> | <TableCell align="center" sx={{ width: '150px' }}>{t("productLotNo")}</TableCell> | ||||
{renderFieldCondition(SECOND_IN_FIELD) ? <TableCell align="center" sx={{ width: '150px' }}>{t("dnQty")}(以訂單單位計算)</TableCell> : undefined} | |||||
{renderFieldCondition(SECOND_IN_FIELD) ? <TableCell align="center" sx={{ width: '150px' }}>{t("dnQty")}<br/>(以訂單單位計算)</TableCell> : undefined} | |||||
<TableCell align="center" sx={{ width: '100px' }}></TableCell> | <TableCell align="center" sx={{ width: '100px' }}></TableCell> | ||||
</TableRow> | </TableRow> | ||||
</TableHead> | </TableHead> | ||||
@@ -29,7 +29,7 @@ const PoInfoCard: React.FC<Props> = async ( | |||||
const { t } = useTranslation("purchaseOrder") | const { t } = useTranslation("purchaseOrder") | ||||
return ( | return ( | ||||
<> | <> | ||||
<Card sx={{ display: "block" }}> | |||||
<Card sx={{ display: "block", height: "230px" }}> | |||||
<CardContent component={Stack} spacing={4}> | <CardContent component={Stack} spacing={4}> | ||||
<Box> | <Box> | ||||
<Stack spacing={2}> | <Stack spacing={2}> | ||||
@@ -1,7 +1,7 @@ | |||||
"use client"; | "use client"; | ||||
import { PoResult } from "@/app/api/po"; | import { PoResult } from "@/app/api/po"; | ||||
import { useCallback, useEffect, useMemo, useState } from "react"; | |||||
import React, { useCallback, useEffect, useMemo, useState } from "react"; | |||||
import { useTranslation } from "react-i18next"; | import { useTranslation } from "react-i18next"; | ||||
import { useRouter, useSearchParams } from "next/navigation"; | import { useRouter, useSearchParams } from "next/navigation"; | ||||
import SearchBox, { Criterion } from "../SearchBox"; | import SearchBox, { Criterion } from "../SearchBox"; | ||||
@@ -111,6 +111,14 @@ const PoSearch: React.FC<Props> = ({ | |||||
} | } | ||||
}, [selectedPoIds, router]); | }, [selectedPoIds, router]); | ||||
const itemColumn = useCallback((value: string | undefined) => { | |||||
if (!value) { | |||||
return <Grid>"N/A"</Grid> | |||||
} | |||||
const items = value.split(",") | |||||
return items.map((item) => <Grid key={item}>{item}</Grid>) | |||||
}, []) | |||||
const columns = useMemo<Column<PoResult>[]>( | const columns = useMemo<Column<PoResult>[]>( | ||||
() => [ | () => [ | ||||
{ | { | ||||
@@ -150,15 +158,50 @@ const PoSearch: React.FC<Props> = ({ | |||||
return <>{arrayToDateString(params.orderDate)}<br/>{arrayToDateString(params.estimatedArrivalDate)}</> | return <>{arrayToDateString(params.orderDate)}<br/>{arrayToDateString(params.estimatedArrivalDate)}</> | ||||
}, | }, | ||||
}, | }, | ||||
// { | |||||
// name: "itemDetail", | |||||
// label: t("Item Detail"), | |||||
// renderCell: (params) => { | |||||
// if (!params.itemDetail) { | |||||
// return "N/A" | |||||
// } | |||||
// const items = params.itemDetail.split(",") | |||||
// return items.map((item) => <Grid key={item}>{item}</Grid>) | |||||
// }, | |||||
// }, | |||||
{ | |||||
name: "itemCode", | |||||
label: t("Item Code"), | |||||
renderCell: (params) => { | |||||
return itemColumn(params.itemCode); | |||||
}, | |||||
}, | |||||
{ | |||||
name: "itemName", | |||||
label: t("Item Name"), | |||||
renderCell: (params) => { | |||||
return itemColumn(params.itemName); | |||||
}, | |||||
}, | |||||
{ | |||||
name: "itemQty", | |||||
label: t("Item Qty"), | |||||
renderCell: (params) => { | |||||
return itemColumn(params.itemQty); | |||||
}, | |||||
}, | |||||
{ | |||||
name: "itemSumAcceptedQty", | |||||
label: t("Item Accepted Qty"), | |||||
renderCell: (params) => { | |||||
return itemColumn(params.itemSumAcceptedQty); | |||||
}, | |||||
}, | |||||
{ | { | ||||
name: "itemDetail", | |||||
label: t("Item Detail"), | |||||
name: "itemUom", | |||||
label: t("Item Purchase UoM"), | |||||
renderCell: (params) => { | renderCell: (params) => { | ||||
if (!params.itemDetail) { | |||||
return "N/A" | |||||
} | |||||
const items = params.itemDetail.split(",") | |||||
return items.map((item) => <Grid key={item}>{item}</Grid>) | |||||
return itemColumn(params.itemUom); | |||||
}, | }, | ||||
}, | }, | ||||
{ | { | ||||
@@ -8,7 +8,7 @@ | |||||
"UoM": "單位", | "UoM": "單位", | ||||
"mat": "物料", | "mat": "物料", | ||||
"fg": "成品", | "fg": "成品", | ||||
"Available Qty": "可用數量 (倉存單位)", | |||||
"Available Qty": "可用數量", | |||||
"Sales UoM": "銷售單位", | "Sales UoM": "銷售單位", | ||||
"Stock UoM": "庫存單位", | "Stock UoM": "庫存單位", | ||||
"Available Qty Per Smallest Unit": "可用數量 (基本單位)", | "Available Qty Per Smallest Unit": "可用數量 (基本單位)", | ||||
@@ -31,14 +31,19 @@ | |||||
"itemNo": "貨品編號", | "itemNo": "貨品編號", | ||||
"itemName": "貨品名稱", | "itemName": "貨品名稱", | ||||
"Item Detail": "貨品詳情", | "Item Detail": "貨品詳情", | ||||
"Item Code": "貨品編號", | |||||
"Item Name": "貨品名稱", | |||||
"Item Qty": "貨品數量", | |||||
"Item Accepted Qty": "貨品已收貨數量", | |||||
"Item Purchase UoM": "貨品計量單位", | |||||
"qty": "訂單數量", | "qty": "訂單數量", | ||||
"uom": "計量單位", | "uom": "計量單位", | ||||
"Stock UoM": "庫存單位", | "Stock UoM": "庫存單位", | ||||
"Stock In Qty": "入庫數量", | |||||
"Stock In Qty": "收貨數量", | |||||
"total weight": "總重量", | "total weight": "總重量", | ||||
"weight unit": "重量單位", | "weight unit": "重量單位", | ||||
"price": "訂單貨值", | "price": "訂單貨值", | ||||
"processed": "已處理數量", | |||||
"processed": "已上架數量", | |||||
"expiryDate": "到期日", | "expiryDate": "到期日", | ||||
"acceptedQty": "是次來貨數量", | "acceptedQty": "是次來貨數量", | ||||
"putawayQty": "上架數量", | "putawayQty": "上架數量", | ||||