update project fee format

src/components/CreateProject/ProjectClientDetails.tsx

@@ -6,10 +6,11 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Grid from "@mui/material/Grid";
 import TextField from "@mui/material/TextField";
+import { NumericFormat } from 'react-number-format';
 import Typography from "@mui/material/Typography";
 import { useTranslation } from "react-i18next";
 import Button from "@mui/material/Button";
-import { useFormContext } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
 import { CreateProjectInputs } from "@/app/api/projects/actions";
 import {
   BuildingType,
@@ -469,17 +470,65 @@ const ProjectClientDetails: React.FC<Props> = ({
               />
             </Grid>
             <Grid item xs={6}>
-              <TextField
+              <Controller
+                control={control}
+                name="expectedProjectFee"
+                render={({ field: { onChange, onBlur, name, value, ref } }) => (
+                  <NumericFormat
+                    label={t("Expected Total Project Fee")}
+                    fullWidth
+                    onValueChange={(values) => {
+                      // console.log(values)
+                      onChange(values.floatValue)
+                    }}
+                    customInput={TextField}
+                    thousandSeparator
+                    valueIsNumericString
+                    decimalScale={2}
+                    fixedDecimalScale
+                    name={name}
+                    value={value}
+                    onBlur={onBlur}
+                    inputRef={ref}
+                  />
+                )}
+              />
+              {/* <TextField
                 label={t("Expected Total Project Fee")}
                 fullWidth
                 type="number"
-                inputProps={{ step: "0.01" }}
+                inputProps={{ 
+                  step: "0.01",
+                }}
                 {...register("expectedProjectFee", { valueAsNumber: true })}
-              />
+              /> */}
             </Grid>
 
             <Grid item xs={6}>
-              <TextField
+              <Controller
+                control={control}
+                name="subContractFee"
+                render={({ field: { onChange, onBlur, name, value, ref } }) => (
+                  <NumericFormat
+                    label={t("Sub-Contract Fee")}
+                    fullWidth
+                    onValueChange={(values) => {
+                      // console.log(values)
+                      onChange(values.floatValue)
+                    }}
+                    customInput={TextField}
+                    thousandSeparator
+                    valueIsNumericString
+                    decimalScale={2}
+                    fixedDecimalScale
+                    name={name}
+                    value={value}
+                    onBlur={onBlur}
+                    inputRef={ref}
+                  />
+                )}
+              />
+              {/* <TextField
                 label={t("Sub-Contract Fee")}
                 fullWidth
                 type="number"
@@ -488,7 +537,7 @@ const ProjectClientDetails: React.FC<Props> = ({
                 //   shrink: Boolean(watch("subContractFee")),
                 // }}
                 {...register("subContractFee", { valueAsNumber: true })}
-              />
+              /> */}
             </Grid>
 
             {/* <Grid item xs={6}>