update money format (expense & project)

src/components/CreateProject/ProjectClientDetails.tsx

@@ -477,7 +477,7 @@ const ProjectClientDetails: React.FC<Props> = ({
                   <NumericFormat
                     label={t("Expected Total Project Fee")}
                     fullWidth
-                    prefix="$"
+                    prefix="HK$"
                     onValueChange={(values) => {
                       // console.log(values)
                       onChange(values.floatValue)
@@ -513,7 +513,7 @@ const ProjectClientDetails: React.FC<Props> = ({
                   <NumericFormat
                     label={t("Sub-Contract Fee")}
                     fullWidth
-                    prefix="$"
+                    prefix="HK$"
                     onValueChange={(values) => {
                       // console.log(values)
                       onChange(values.floatValue)

src/components/ExpenseSearch/ExpenseSearch.tsx

@@ -18,6 +18,7 @@ import {
   Divider,
   Grid,
   Stack,
+  TextField,
   Typography,
 } from "@mui/material";
 import { INPUT_DATE_FORMAT, moneyFormatter } from "@/app/utils/formatUtil";
@@ -27,12 +28,18 @@ import { uniq } from "lodash";
 import CreateExpenseModal from "./CreateExpenseModal";
 import { ProjectResult } from "@/app/api/projects";
 import StyledDataGrid from "../StyledDataGrid";
-import { GridCellParams, GridColDef, GridRowId, GridRowModes, GridRowModesModel } from "@mui/x-data-grid";
+import { GridCellParams, GridColDef, GridRenderEditCellParams, GridRowId, GridRowModes, GridRowModesModel, GridValueFormatterParams } from "@mui/x-data-grid";
 import { useGridApiRef } from "@mui/x-data-grid";
 import { GridEventListener } from "@mui/x-data-grid";
 import { deleteDialog, successDialog } from "../Swal/CustomAlerts";
 import { deleteProjectExpense, updateProjectExpense } from "@/app/api/projectExpenses/actions";
 import dayjs from "dayjs";
+import React from "react";
+import { NumberFormatValues, NumericFormat } from "react-number-format";
+
+interface CustomMoneyComponentProps {
+  params: GridRenderEditCellParams;
+}
 
 interface Props {
   expenses: ProjectExpensesResultFormatted[]
@@ -86,6 +93,8 @@ const ExpenseSearch: React.FC<Props> = ({ expenses, projects }) => {
     []
   );
 
+
+
   const columns = useMemo<Column<ProjectExpensesResultFormatted>[]>(
     () => [
       {
@@ -215,6 +224,47 @@ const ExpenseSearch: React.FC<Props> = ({ expenses, projects }) => {
     [validateRow],
   );
 
+  // Money format : 000,000,000.00
+  const CustomMoneyFormat = useCallback((value: number) => {
+    if (value) {
+      return moneyFormatter.format(value);
+    } else {
+      return ""
+    }
+}, [])
+
+const CustomMoneyComponent: React.FC<CustomMoneyComponentProps> = ({ params }) => {
+  const { id, value, field } = params;
+  const ref = React.useRef();
+
+  const handleValueChange = (newValue: NumberFormatValues) => {
+    apiRef.current.setEditCellValue({ id, field, value: newValue.value });
+  };
+
+  return <NumericFormat
+    fullWidth
+    prefix="HK$"
+    onValueChange={(values) => {
+      console.log(values)
+      handleValueChange(values)
+    }}
+    customInput={TextField}
+    thousandSeparator
+    valueIsNumericString
+    decimalScale={2}
+    fixedDecimalScale
+    value={value}
+    inputRef={ref}
+    InputProps={{
+      sx: {
+        '& .MuiInputBase-input': {
+          textAlign: 'right',
+          mb: 2
+        }
+      }
+    }}
+  />;
+}
   const editColumn = useMemo<GridColDef[]>(
     () => [
       { 
@@ -234,7 +284,13 @@ const ExpenseSearch: React.FC<Props> = ({ expenses, projects }) => {
         headerName: t("Amount (HKD)"), 
         editable: true, 
         flex: 0.5,
-        type: 'number'
+        type: 'number',
+        renderEditCell: (params: GridRenderEditCellParams) => {
+          return <CustomMoneyComponent params={params} />
+        },
+        valueFormatter: (params: GridValueFormatterParams) => {
+          return CustomMoneyFormat(params.value as number)
+        }
       },
       { field: "issuedDate", 
         headerName: t("Issue Date"),