update invoice search money format

src/components/InvoiceSearch/InvoiceSearch.tsx

@@ -13,7 +13,7 @@ import { deleteInvoice, importIssuedInovice, importReceivedInovice, updateInvoic
 import { deleteDialog, errorDialogWithContent, successDialog } from "../Swal/CustomAlerts";
 import { invoiceList, issuedInvoiceList, issuedInvoiceSearchForm, receivedInvoiceList, receivedInvoiceSearchForm } from "@/app/api/invoices";
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import { GridCellParams, GridColDef, GridEventListener, GridRowId, GridRowModes, GridRowModesModel } from "@mui/x-data-grid";
+import { GridCellParams, GridColDef, GridEventListener, GridRenderEditCellParams, GridRowId, GridRowModes, GridRowModesModel, GridValueFormatterParams } from "@mui/x-data-grid";
 import { useGridApiRef } from "@mui/x-data-grid";
 import StyledDataGrid from "../StyledDataGrid";
 
@@ -22,8 +22,11 @@ import CreateInvoiceModal from "./CreateInvoiceModal";
 import { ProjectResult } from "@/app/api/projects";
 import { IMPORT_INVOICE, IMPORT_RECEIPT } from "@/middleware";
 import InvoiceSearchLoading from "./InvoiceSearchLoading";
+import { NumberFormatValues, NumericFormat } from "react-number-format";
 
-
+interface CustomMoneyComponentProps {
+  params: GridRenderEditCellParams;
+}
 
 interface Props {
   invoices: invoiceList[];
@@ -287,6 +290,48 @@ const InvoiceSearch: React.FC<Props> & SubComponents = ({ invoices, projects, ab
     // setSelectedRow([]);
   };
 
+  // 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 combinedColumns = useMemo<Column<invoiceList>[]>(
     () => [
       { 
@@ -329,7 +374,13 @@ const InvoiceSearch: React.FC<Props> & SubComponents = ({ invoices, projects, ab
         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: "receiptDate", 
@@ -351,7 +402,13 @@ const InvoiceSearch: React.FC<Props> & SubComponents = ({ invoices, projects, ab
         headerName: t("Actual Received 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)
+        }
       },
     ],
     [t]