create amount update

src/Pages/Fawateer/CreateRequest.jsx

@@ -8,7 +8,7 @@ import {
 } from "@chakra-ui/react";
 import { DeleteIcon, Search2Icon } from "@chakra-ui/icons";
 import SelectInvestorModal from "./SelectInvestorModal";
-import { useForm } from "react-hook-form"; // Import useForm
+import { Controller, useForm } from "react-hook-form"; // Import useForm
 import { yupResolver } from "@hookform/resolvers/yup"; // Import resolver for Yup
 import * as Yup from "yup"; // Import Yup for validation
 import { motion } from 'framer-motion'; // Import Framer Motion for animations
@@ -16,6 +16,7 @@ import { bytesToMB } from "../../Constants/Constants";
 import { useCreateFawateerRequestMutation } from "../../Services/fawateer.maker.service";
 import ToastBox from "../../Components/ToastBox";
 import { useNavigate } from "react-router-dom";
+import CurrencyInput from "../../Components/CurrencyInput";
 
 // Validation schema using Yup
 const validationSchema = Yup.object().shape({
@@ -47,7 +48,7 @@ const CreateRequest = () => {
   const [id, setId ] = useState(null)
 
   // Initialize useForm with the resolver for Yup validation
-  const { register, handleSubmit, setValue,reset, formState: { errors } } = useForm({
+  const {control, register, handleSubmit, setValue,reset, formState: { errors } } = useForm({
     resolver: yupResolver(validationSchema),
   });
 
@@ -217,17 +218,16 @@ const CreateRequest = () => {
           <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
             Amount (BHD)
           </FormLabel>
-          <Input
-            bg={"#F5F8F6"}
-            focusBorderColor="forestGreen.300"
-            size={"sm"}
-            fontSize={"sm"}
-            rounded={"sm"}
-            type={"number"}
-            placeholder={"Amount"}
-            {...register("transaction_amount")}
-          />
-          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.transaction_amount?.message}</FormHelperText>
+          <Controller
+                  name="transaction_amount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>
+            {errors.transaction_amount?.message}
+            </FormHelperText>
         </FormControl>
 
         {/* Support File Field with Preview */}

src/Pages/IO_Management/CreateIO/AddIONav.jsx

@@ -190,10 +190,12 @@ console.log(calculatePercentage(1092500, 976070));
                 <HStack justify={'start'} gap={10} bg={'green.100'} p={3} rounded={'md'} shadow={'md'}>
                   <VStack align={'start'}>
                     <Text as={'span'} fontSize={'sm'} fontWeight={500}>Current nav</Text>
-                    <Text as={'span'} fontSize={'sm'}>{parseFloat(IODetails?.ioNAV || 0).toLocaleString(undefined, {
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
-            })}</Text>
+                    <Text as={'span'} fontSize={'sm'}>
+                      {parseFloat(IODetails?.ioNAV || 0).toLocaleString(undefined, {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                      })}
+                    </Text>
                   </VStack>