update claim

src/components/ClaimDetail/ClaimFormInputGrid.tsx

@@ -41,7 +41,7 @@ import { ProjectCombo } from "@/app/api/claims";
 import { ClaimDetailTable, ClaimInputFormByStaff } from "@/app/api/claims/actions";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { GridRenderEditCellParams } from "@mui/x-data-grid";
-import { convertDateToString } from "@/app/utils/formatUtil";
+import { convertDateToString, moneyFormatter } from "@/app/utils/formatUtil";
 
 interface BottomBarProps {
   getCostTotal: () => number;
@@ -397,11 +397,12 @@ const ClaimFormInputGrid: React.FC<ClaimFormInputGridProps> = ({
     },
     {
       field: "amount",
-      headerName: t("Amount (HKD)"),
+      headerName: t("Amount"),
       editable: true,
       type: "number",
+      align: "right",
       valueFormatter: (params) => {
-        return `$ ${params.value ?? 0}`;
+        return moneyFormatter.format(params.value ?? 0);
       },
     },
     {
@@ -423,7 +424,7 @@ const ClaimFormInputGrid: React.FC<ClaimFormInputGridProps> = ({
         );
       },
       renderEditCell: (params) => {
-        const currentRow = rows.find(row => row.id === params.row.id);
+        // const currentRow = rows.find(row => row.id === params.row.id);
         return params.formattedValue ? (
           <span>
             <Link onClick={() => handleLinkClick(params)} href="#">{params.formattedValue}</Link>

src/components/ClaimSearch/ClaimSearch.tsx

@@ -20,6 +20,7 @@ type SearchParamNames = keyof SearchQuery;
 const ClaimSearch: React.FC<Props> = ({ claims }) => {
   const { t } = useTranslation();
 
+  console.log(claims)
   // If claim searching is done on the server-side, then no need for this.
   const [filteredClaims, setFilteredClaims] = useState(claims);
 
@@ -58,7 +59,7 @@ const ClaimSearch: React.FC<Props> = ({ claims }) => {
       { name: "created", label: t("Creation Date"), type: "date" },
       { name: "code", label: t("Claim Code") },
       // { name: "project", label: t("Related Project Name") },
-      { name: "amount", label: t("Amount (HKD)") },
+      { name: "amount", label: t("Amount"), type: "money" },
       { name: "type", label: t("Expense Type"), needTranslation: true },
       { name: "status", label: t("Status"), needTranslation: true },
       { name: "remarks", label: t("Remarks") },

src/components/SearchResults/SearchResults.tsx

@@ -14,7 +14,7 @@ import TableRow from "@mui/material/TableRow";
 import IconButton, { IconButtonOwnProps, IconButtonPropsColorOverrides } from "@mui/material/IconButton";
 import { t } from "i18next";
 import { useTranslation } from "react-i18next";
-import { convertDateArrayToString } from "@/app/utils/formatUtil";
+import { convertDateArrayToString, moneyFormatter } from "@/app/utils/formatUtil";
 
 export interface ResultWithId {
   id: string | number;
@@ -80,7 +80,7 @@ function SearchResults<T extends ResultWithId>({
             <TableRow>
               {columns.map((column, idx) => (
                 <TableCell key={`${column.name.toString()}${idx}`}>
-                  {column.label}
+                  {column?.type === "money" ? <div style={{display: "flex", justifyContent: "flex-end"}}>{column.label}</div> : column.label}
                 </TableCell>
               ))}
             </TableRow>
@@ -106,6 +106,9 @@ function SearchResults<T extends ResultWithId>({
                           ) :
                             column?.type === "date" ? (
                               <>{convertDateArrayToString(item[columnName] as number[])}</>
+                            ) :
+                            column?.type === "money" ? (
+                              <div style={{display: "flex", justifyContent: "flex-end"}}>{moneyFormatter.format(item[columnName] as number)}</div>
                             ) :
                               (
                                 <>{column?.needTranslation ? t(item[columnName] as string) : item[columnName]}</>

src/i18n/en/claim.json

@@ -8,7 +8,7 @@
     "Related Project Name": "Related Project Name",
     "Expense Type": "Expense Type",
     "Status": "Status",
-    "Amount (HKD)": "Amount (HKD)",
+    "Amount": "Amount",
     "Remarks": "Remarks",
     "Invoice Date": "Invoice Date",
     "Supporting Document": "Supporting Document",

src/i18n/zh/claim.json

@@ -8,7 +8,7 @@
     "Related Project Name": "相關項目名稱",
     "Expense Type": "費用類別",
     "Status": "狀態",
-    "Amount (HKD)": "金額 (HKD)",
+    "Amount": "金額",
     "Remarks": "備註",
     "Invoice Date": "收據日期",
     "Supporting Document": "支援文件",