From 2e06b5288186f97d89489a98b11ad2c4ca36a36a Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Tue, 22 Oct 2024 20:11:00 +0530
Subject: [PATCH] Update investment Amount

---
 .../ViewIO/HeaderModal/AmountInvested.jsx     |  30 +-
 .../InvestorDetails/Kyc.jsx                   | 258 +++++++++++++-----
 2 files changed, 211 insertions(+), 77 deletions(-)

diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
index eb81854..6bb14f9 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
@@ -91,16 +91,18 @@ const AmountInvested = ({ isOpen, onClose }) => {
   };
 
   const handleAmountChange = (e) => {
-    const amount = parseFloat(e.target.value) || 0;
+    // e might be an object or just a value, handle both cases
+    const amount = typeof e === 'object' && e.target ? parseFloat(e.target.value) || 0 : parseFloat(e) || 0;
     const totalAmount = parseFloat(IODetails?.totalAmtInvestmentInUSD) || 0;
     const ioCash = (totalAmount - amount).toFixed(2);
-
+  
     reset({
       amountInvested: parseFloat(amount),
       IoCash: parseFloat(ioCash),
-      Total_Amount: IODetails?.totalAmtInvestmentInUSD
+      Total_Amount: IODetails?.totalAmtInvestmentInUSD,
     });
   };
+  
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
@@ -153,12 +155,22 @@ const AmountInvested = ({ isOpen, onClose }) => {
                 onChange={handleAmountChange}
               /> */}
               <Controller
-                  name="amountInvested"
-                  control={control}
-                  render={({ field }) => (
-                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
-                  )}
-                />
+  name="amountInvested"
+  control={control}
+  render={({ field }) => (
+    <CurrencyInput
+      {...field}
+      textAlign={'right'}
+      fontSize={"sm"}
+      type="number"
+      size={"sm"}
+      onChange={(value) => {
+        field.onChange(value); // This will keep the form's internal state updated
+        handleAmountChange(value); // This will trigger your custom logic
+      }}
+    />
+  )}
+/>
               {errors.amountInvested && <Text fontSize={'xs'} fontWeight={600} color="red.500">{errors.amountInvested.message}</Text>}
             </FormControl>
 
diff --git a/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx b/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
index 5bc030b..4fefc63 100644
--- a/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
@@ -1,80 +1,206 @@
-import { Box, Checkbox, CheckboxGroup, Divider, FormControl, FormLabel, Heading, HStack, Input, Radio, RadioGroup, Select, Stack, Text, Textarea } from "@chakra-ui/react";
+import {
+  Box,
+  Checkbox,
+  CheckboxGroup,
+  Divider,
+  FormControl,
+  FormLabel,
+  Heading,
+  HStack,
+  Input,
+  Radio,
+  RadioGroup,
+  Select,
+  Stack,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
 import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useGetInvestorsDetailsByIdQuery } from "../../../Services/investor.details.service";
 
 const Kyc = () => {
-    
-    const params = useParams();
-    const id = params?.id;
-    const { data, isLoading:bankDetailsLoading, errors, refetch } = useGetInvestorsDetailsByIdQuery(
-        id,{skip: !id,}
-      );
-    // const [value, setValue] = useState('2')
+  const params = useParams();
+  const id = params?.id;
+  const {
+    data,
+    isLoading: bankDetailsLoading,
+    errors,
+    refetch,
+  } = useGetInvestorsDetailsByIdQuery(id, { skip: !id });
+  // const [value, setValue] = useState('2')
 
-    console.log(data?.data?.KYC?.questions);
-    
+  console.log(data?.data?.KYC?.questions);
 
   return (
-    (!bankDetailsLoading && <Box>
-      <Box mb={5}>
-        <Heading fontSize={"md"} fontWeight={500}>Additional Questions</Heading>
-        <Text fontSize={"sm"}>Please provide additional Information to complete your profile.</Text>
-        <HStack spacing={4} mb={4}>
-          <FormControl>
-            <FormLabel mb={1} fontSize={"sm"}>City</FormLabel>
-            <Input bg={"#ccc3"} border={"none"} size={"sm"} value={data?.data?.KYC?.otherInformation?.city} type="text" readOnly />
-          </FormControl>
-          <FormControl>
-            <FormLabel mb={1}  fontSize={"sm"}>Country</FormLabel>
-            <Input bg={"#ccc3"} border={"none"} size={"sm"}  value={data?.data?.KYC?.otherInformation?.country} type="text" readOnly />
-          </FormControl>
-        </HStack>
-        <HStack spacing={4} mb={4}>
-          <FormControl>
-            <FormLabel mb={1}  fontSize={"sm"}>Occupation</FormLabel>
-            <Input bg={"#ccc3"} border={"none"} size={"sm"}  value={data?.data?.KYC?.otherInformation?.occupation} type="text" readOnly />
-          </FormControl>
-          <FormControl>
-            <FormLabel mb={1} fontSize={"sm"}>Source of Funds</FormLabel>
-            <Input bg={"#ccc3"} border={"none"} size={"sm"}  value={data?.data?.KYC?.otherInformation?.sourceOfFund} type="text" readOnly />
-          </FormControl>
-        </HStack>
-        <HStack spacing={4}>
+    !bankDetailsLoading && (
+      <Box>
+        <Box mb={5}>
+          {/*<Heading fontSize={"md"} fontWeight={500}>
+            Additional Questions
+          </Heading>
+           <Text fontSize={"sm"}>
+            Please provide additional Information to complete your profile.
+          </Text> */}
+          <Heading fontSize={"md"} fontWeight={500}>
+            Address
+          </Heading>
+          <Divider />
+          <HStack spacing={4} mb={4}>
+            <FormControl>
+              <FormLabel mb={1} fontSize={"sm"}>
+                House/Unit
+              </FormLabel>
+              <Input
+                bg={"#ccc3"}
+                border={"none"}
+                size={"sm"}
+                value={data?.data?.KYC?.otherInformation?.houseOrUnit}
+                type="text"
+                readOnly
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel mb={1} fontSize={"sm"}>
+                Road/Street
+              </FormLabel>
+              <Input
+                bg={"#ccc3"}
+                border={"none"}
+                size={"sm"}
+                value={data?.data?.KYC?.otherInformation?.roadOrStreet}
+                type="text"
+                readOnly
+              />
+            </FormControl>
+          </HStack>
+          <HStack spacing={4} mb={4}>
+            <FormControl>
+              <FormLabel mb={1} fontSize={"sm"}>
+                Block
+              </FormLabel>
+              <Input
+                bg={"#ccc3"}
+                border={"none"}
+                size={"sm"}
+                value={data?.data?.KYC?.otherInformation?.block}
+                type="text"
+                readOnly
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel mb={1} fontSize={"sm"}>
+                City
+              </FormLabel>
+              <Input
+                bg={"#ccc3"}
+                border={"none"}
+                size={"sm"}
+                value={data?.data?.KYC?.otherInformation?.city}
+                type="text"
+                readOnly
+              />
+            </FormControl>
+          </HStack>
+          <HStack spacing={4} mb={4}>
+            <FormControl>
+              <FormLabel mb={1} fontSize={"sm"}>
+                Country
+              </FormLabel>
+              <Input
+                bg={"#ccc3"}
+                border={"none"}
+                size={"sm"}
+                value={data?.data?.KYC?.otherInformation?.country}
+                type="text"
+                readOnly
+              />
+            </FormControl>
+            <FormControl></FormControl>
+          </HStack>
+          <Heading fontSize={"md"} fontWeight={500}>
+            Occupation
+          </Heading>
+          <Divider />
+          <HStack spacing={4} mb={4}>
+            <FormControl>
+              <FormLabel mb={1} fontSize={"sm"}>
+                Occupation
+              </FormLabel>
+              <Input
+                bg={"#ccc3"}
+                border={"none"}
+                size={"sm"}
+                value={data?.data?.KYC?.otherInformation?.occupation}
+                type="text"
+                readOnly
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel mb={1} fontSize={"sm"}>
+                Source of Funds
+              </FormLabel>
+              <Input
+                bg={"#ccc3"}
+                border={"none"}
+                size={"sm"}
+                value={data?.data?.KYC?.otherInformation?.sourceOfFund}
+                type="text"
+                readOnly
+              />
+            </FormControl>
+          </HStack>
+          {/* <HStack spacing={4}>
           <FormControl>
             <FormLabel mb={1} fontSize={"sm"}>Address</FormLabel>
             <Textarea bg={"#ccc3"} border={"none"} size={"sm"} type="textarea" resize={"none"} value={data?.data?.KYC?.otherInformation?.address} readOnly />
           </FormControl>
           <FormControl></FormControl>
-        </HStack>
-      </Box>
-      <Divider />
-      <Box>
-        <Heading fontSize={"md"} fontWeight={500}>Investor Eligibilty Notice</Heading>
-        <Text fontSize={"sm"}>Please note that Tanami is currently only available to qualifield or accredited investors. Please confirm your status</Text>
+        </HStack> */}
+        </Box>
+        <Heading fontSize={"md"} fontWeight={500}>
+          Additional Questions
+        </Heading>
+        <Divider />
+        <Box>
+          <Heading fontSize={"md"} fontWeight={500}>
+            Investor Eligibilty Notice
+          </Heading>
+          <Text fontSize={"sm"}>
+            Please note that Tanami is currently only available to qualifield or
+            accredited investors. Please confirm your status
+          </Text>
 
-
-
-            <RadioGroup >
-                {data?.data?.KYC?.questions.map((question, index) => (
-                  <>
-                    <Radio  isChecked={question?.answers} colorScheme='forestGreen' key={index}>
-                     <Text fontSize={"sm"} mb={0}>{question?.question_text}</Text>
-                    </Radio>
-                    <CheckboxGroup colorScheme='forestGreen'>
-                    <Stack ml={8}>
-                        {question?.subQuestions?.map((subQuestion, index) => (
-                        <Checkbox isChecked={subQuestion.answers} size="sm" key={index}>
-                            <Text as="span">{subQuestion.question_text}</Text>
-                        </Checkbox>
+          <RadioGroup>
+            {data?.data?.KYC?.questions.map((question, index) => (
+              <>
+                <Radio
+                  isChecked={question?.answers}
+                  colorScheme="forestGreen"
+                  key={index}
+                >
+                  <Text fontSize={"sm"} mb={0}>
+                    {question?.question_text}
+                  </Text>
+                </Radio>
+                <CheckboxGroup colorScheme="forestGreen">
+                  <Stack ml={8}>
+                    {question?.subQuestions?.map((subQuestion, index) => (
+                      <Checkbox
+                        isChecked={subQuestion.answers}
+                        size="sm"
+                        key={index}
+                      >
+                        <Text as="span">{subQuestion.question_text}</Text>
+                      </Checkbox>
                     ))}
-                    </Stack>
-                  </CheckboxGroup>
-                  </>
-                ))}
-            </RadioGroup>
-            
-            {/* {value === '2' && (
+                  </Stack>
+                </CheckboxGroup>
+              </>
+            ))}
+          </RadioGroup>
+
+          {/* {value === '2' && (
               <CheckboxGroup colorScheme='forestGreen'>
                 <Stack ml={8}>
                     {data?.data?.KYC?.questions[1]?.subQuestions?.map((subQuestion, index) => (
@@ -85,13 +211,9 @@ const Kyc = () => {
                 </Stack>
               </CheckboxGroup>
             )} */}
-
-
-
-
-            
+        </Box>
       </Box>
-    </Box>)
+    )
   );
 };