import rhf and reusable components from his v3

frontend/client-portal/src/components/numeric_format/DiscountPctFormat.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { InputAttributes, NumericFormat, NumericFormatProps } from "react-number-format";
+
+interface CustomProps {
+  onChange: (event: { target: { name: string; value: string } }) => void;
+  name: string;
+}
+
+const DiscountPctFormat = React.forwardRef<
+  NumericFormatProps<InputAttributes>,
+  CustomProps
+>(function DiscountPctFormat(props, ref) {
+  const { onChange, ...other } = props;
+
+  return (
+    <NumericFormat
+      {...other}
+      getInputRef={ref}
+      onValueChange={(values) => {
+        onChange({
+          target: {
+            name: props.name,
+            value: values.value,
+          },
+        });
+      }}
+      thousandSeparator
+      valueIsNumericString
+      allowLeadingZeros={false}
+    />
+  );
+});
+
+export default DiscountPctFormat;

frontend/client-portal/src/components/numeric_format/MoneyFormat.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { InputAttributes, NumericFormat, NumericFormatProps } from "react-number-format";
+
+interface CustomProps {
+  onChange: (event: { target: { name: string; value: string } }) => void;
+  name: string;
+}
+
+const MoneyFormat = React.forwardRef<
+  NumericFormatProps<InputAttributes>,
+  CustomProps
+>(function MoneyFormat(props, ref) {
+  const { onChange, ...other } = props;
+
+  return (
+    <NumericFormat
+      {...other}
+      getInputRef={ref}
+      onValueChange={(values) => {
+        onChange({
+          target: {
+            name: props.name,
+            value: values.value,
+          },
+        });
+      }}
+      thousandSeparator
+      valueIsNumericString
+      allowLeadingZeros={false}
+    />
+  );
+});
+
+export default MoneyFormat;