update Amount Invested

src/Pages/IO_Management/IOArtifactsAdd.jsx

@@ -242,7 +242,7 @@ const IOArtifactsAdd = ({
                     errors.artifactPathName
                   }
                 >
-                  <FormLabel fontSize={"sm"}>Artifact Image</FormLabel>
+                  <FormLabel fontSize={"sm"}>Artifact Image (600 X 300)</FormLabel>
                   <Input
                     type="file"
                     accept=".jpg,.jpeg,.png"

src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx

@@ -15,13 +15,14 @@ import {
   Text,
   useToast,
 } from "@chakra-ui/react";
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import GlobalStateContext from '../../../../Contexts/GlobalStateContext';
 import { useParams } from 'react-router-dom';
 import { useAmountIvestmentMutation } from '../../../../Services/io.service';
 import ToastBox from '../../../../Components/ToastBox';
+import CurrencyInput from '../../../../Components/CurrencyInput';
 
 // Validation schema
 const validationSchema = yup.object().shape({
@@ -141,7 +142,7 @@ const AmountInvested = ({ isOpen, onClose }) => {
 
             <FormControl mb={"15px"} isInvalid={!!errors.amountInvested} isRequired>
               <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount to invest</FormLabel>
-              <Input
+              {/* <Input
                 type="number"
                 {...register('amountInvested')}
                 size="sm"
@@ -150,7 +151,14 @@ const AmountInvested = ({ isOpen, onClose }) => {
                 focusBorderColor="forestGreen.300"
                 fontSize={"sm"}
                 onChange={handleAmountChange}
-              />
+              /> */}
+              <Controller
+                  name="amountInvested"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
               {errors.amountInvested && <Text fontSize={'xs'} fontWeight={600} color="red.500">{errors.amountInvested.message}</Text>}
             </FormControl>