updated

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

@@ -26,70 +26,77 @@ import ToastBox from '../../../../Components/ToastBox';
 // Validation schema
 const validationSchema = yup.object().shape({
   transactionDate: yup.date().required('Date is required'),
-  Total_Amount: yup.number().positive('Amount must be positive').required('Amount is required'),
-  amountInvested: yup.number().positive('Amount to invest must be positive').required('Amount to invest is required'),
+  Total_Amount: yup.number().required('Amount is required'),
+  amountInvested: yup.number().required('Amount to invest is required'),
   IoCash: yup.number().positive('IO Cash must be positive').required('IO Cash is required'),
 });
 
+// Function to format currency
+const formatCurrency = (value) => {
+  if (isNaN(value)) return '';
+  const formatted = parseFloat(value).toFixed(2).toString();
+  const [integer, decimal] = formatted.split('.');
+  const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+};
 
 const AmountInvested = ({ isOpen, onClose }) => {
-  const params = useParams()
-  const toast = useToast()
-  const id = params?.id
-  const { register, handleSubmit, reset, watch, formState: { errors } } = useForm({
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const { control, register, handleSubmit, reset, watch, formState: { errors } } = useForm({
     resolver: yupResolver(validationSchema),
   });
-  const [ isLoading, setIsLoading ] = useState(false)
+  const [isLoading, setIsLoading] = useState(false);
   const { IODetails } = useContext(GlobalStateContext);
-  const [ amountInvested ] = useAmountIvestmentMutation()
+  const [amountInvested] = useAmountIvestmentMutation();
 
   useEffect(() => {
-    reset({
-      Total_Amount: IODetails?.goalAmount,
-      IoCash: IODetails?.goalAmount
-    })
-  }, [IODetails])
-  
+    if (IODetails?.goalAmount) {
+      const totalAmount = parseFloat(IODetails.goalAmount);
+      const ioCashUpdate = parseFloat(IODetails.goalAmount)
+      reset({
+        Total_Amount: totalAmount,
+        IoCash: ioCashUpdate,
+      });
+    }
+  }, [IODetails, reset]);
 
   const onSubmit = async (data) => {
     console.log(data);
-    setIsLoading(true)
+    setIsLoading(true);
 
     try {
-      const res = await amountInvested({data, id})
+      const res = await amountInvested({ data, id });
       console.log(res);
-      if (res?.data?.statusCode === 200 ) {
+      if (res?.data?.statusCode === 200) {
         toast({
           render: () => <ToastBox message={res?.data?.message} />,
         });
-        setIsLoading(false)
-        onClose()
-
-      }else if(response?.error?.status === 400) {
+        setIsLoading(false);
+        onClose();
+      } else if (res?.error?.status === 400) {
         toast({
           render: () => (
-            <ToastBox message={response?.error?.data?.message} status={"error"} />
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
           ),
         });
-        setIsLoading(false)
+        setIsLoading(false);
       }
-      
-      
-      
     } catch (error) {
-      
+      setIsLoading(false);
     }
-    // Handle form submission
   };
 
   const handleAmountChange = (e) => {
     const amount = parseFloat(e.target.value) || 0;
     const totalAmount = parseFloat(IODetails?.goalAmount) || 0;
-    const ioCash = (totalAmount - amount).toFixed(2); // Ensure precision with toFixed
+    const ioCash = (totalAmount - amount).toFixed(2);
 
     reset({
-      amountInvested: amount,
-      IoCash: parseFloat(ioCash), // Convert to number for consistent formatting
+      amountInvested: parseFloat(amount),
+      IoCash: parseFloat(ioCash),
+      Total_Amount: IODetails?.goalAmount
     });
   };
 
@@ -119,8 +126,8 @@ const AmountInvested = ({ isOpen, onClose }) => {
             <FormControl mb={"15px"} isInvalid={!!errors.Total_Amount} isReadOnly>
               <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
               <Input
-                type="number"
-                {...register('Total_Amount')}
+                type="text"
+                value={formatCurrency(watch('Total_Amount'))}
                 size="sm"
                 rounded={'sm'}
                 textAlign={'end'}
@@ -142,7 +149,6 @@ const AmountInvested = ({ isOpen, onClose }) => {
                 focusBorderColor="forestGreen.300"
                 fontSize={"sm"}
                 onChange={handleAmountChange}
-
               />
               {errors.amountInvested && <Text color="red.500">{errors.amountInvested.message}</Text>}
             </FormControl>
@@ -152,8 +158,8 @@ const AmountInvested = ({ isOpen, onClose }) => {
                 IO Cash
               </FormLabel>
               <Input
-                type="number"
-                {...register('IoCash')}
+                type="text"
+                value={formatCurrency(watch('IoCash'))}
                 size="sm"
                 rounded={'sm'}
                 focusBorderColor="forestGreen.300"

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

@@ -1,9 +1,9 @@
-
 import { ChevronDownIcon } from "@chakra-ui/icons";
 import React, { useEffect, useState } from "react";
 import {
   Badge,
   Button,
+  FormControl,
   FormLabel,
   Menu,
   MenuButton,
@@ -16,39 +16,41 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  FormErrorMessage
 } from "@chakra-ui/react";
 import {
-  useGetIOByIdQuery,
   useGetIOprepopulateDataQuery,
   useUpdateStatusIoMutation,
 } from "../../../../Services/io.service";
 import { useParams } from "react-router-dom";
 
-const UpdateIOStatus = ({ isOpen, onClose , status}) => {
+const UpdateIOStatus = ({ isOpen, onClose, status }) => {
   const params = useParams();
   const id = params?.id;
-  const [selectedItem, setSelectedItem] = useState(status?.[0]?.statusAdmin);
+  const [selectedItem, setSelectedItem] = useState();
   const [isLoadingg, setIsLoading] = useState(false);
-  const { data, error, isLoading } = useGetIOprepopulateDataQuery();
+  const [error, setError] = useState("");
   const [selectedStatusId, setSelectedStatusId] = useState(status?.[0]?.id);
-  useEffect(() => {
-    setSelectedItem(status?.[0]?.statusAdmin)
-    setSelectedStatusId(status?.[0]?.id)
-  }, [status])
-  
-  
-
-  
 
+  const { data } = useGetIOprepopulateDataQuery();
   const [updateStatusIo] = useUpdateStatusIoMutation();
 
+  useEffect(() => {
+    setSelectedStatusId(status?.[0]?.id);
+  }, [status]);
+
   const handleMenuItemClick = (item, id) => {
     setSelectedItem(item);
     setSelectedStatusId(id);
   };
 
   const handleSubmit = async () => {
-    setIsLoading(true)
+    if (!selectedStatusId) {
+      setError("Status is required.");
+      return;
+    }
+    setError("");
+    setIsLoading(true);
     try {
       const res = await updateStatusIo({
         data: {
@@ -57,109 +59,117 @@ const UpdateIOStatus = ({ isOpen, onClose , status}) => {
         id,
       });
       console.log(res);
-      setIsLoading(false)
-      onClose()
-    } catch (error) {}
+      setIsLoading(false);
+      handleClose();
+    } catch (error) {
+      setIsLoading(false);
+    }
   };
 
+  const handleClose = () => {
+    setSelectedItem("")
+    onClose()
+  }
+
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal isOpen={isOpen} onClose={handleClose}>
       <ModalOverlay />
       <ModalContent>
         <ModalHeader fontSize={"md"}>Update IO Status Transaction</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
-            Status
-          </FormLabel>
-          <Menu>
-            <MenuButton
-              as={Button}
-              rightIcon={<ChevronDownIcon />}
-              fontSize={"sm"}
-              fontWeight={500}
-              w={"100%"}
-              textAlign={"left"}
-            >
-              <Badge 
-          rounded={"full"}
-          pt={1.5}
-          pb={1.5}
-          ps={4}
-          pe={4}
-          mt={1.5}
-          mb={1.5}
-          textTransform={"none"}
-          colorScheme={
-            selectedItem === "Draft"
-              ? "gray"
-              : selectedItem === "Processing"
-              ? "yellow"
-              : selectedItem === "Open"
-              ? "blue"
-              : selectedItem === "Closed"
-              ? "green"
-              : selectedItem === "Exited"
-              ? "red"
-              : selectedItem === "Canclled"
-              ? "orange"
-              : "purple"
-          } 
-          py={"3px"} px={"8px"}>
-                    {selectedItem ? selectedItem: "No action"}
-                  </Badge>
-            </MenuButton>
-            
-            <MenuList w={"400px"}>
-              {status?.map(({ id, statusAdmin }) => (
-                <MenuItem
-                  key={id}
-                  fontSize={"sm"}
-                  onClick={() => handleMenuItemClick(statusAdmin, id)}
-                >
+          <FormControl isInvalid={!!error}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+              Status
+            </FormLabel>
+            <Menu>
+              <MenuButton
+                as={Button}
+                rightIcon={<ChevronDownIcon />}
+                fontSize={"sm"}
+                fontWeight={500}
+                w={"100%"}
+                textAlign={"left"}
+              >
+                {selectedItem ? (
                   <Badge 
-          rounded={"full"}
-          pt={1.5}
-          pb={1.5}
-          ps={4}
-          pe={4}
-          mt={1.5}
-          mb={1.5}
-          textTransform={"none"}
-          
-          // variant={"solid"}
-          colorScheme={
-            statusAdmin === "Draft"
-              ? "gray"
-              : statusAdmin === "Processing"
-              ? "yellow"
-              : statusAdmin === "Open"
-              ? "blue"
-              : statusAdmin === "Closed"
-              ? "green"
-              : statusAdmin === "Exited"
-              ? "red"
-              : statusAdmin === "Canclled"
-              ? "orange"
-              : "purple"
-          }
-          py={"1px"} px={"8px"}>
-                    {statusAdmin}
+                    rounded={"full"}
+                    pt={1.5}
+                    pb={1.5}
+                    ps={4}
+                    pe={4}
+                    mt={1.5}
+                    mb={1.5}
+                    textTransform={"none"}
+                    colorScheme={
+                      selectedItem === "Draft"
+                        ? "gray"
+                        : selectedItem === "Processing"
+                        ? "yellow"
+                        : selectedItem === "Open"
+                        ? "blue"
+                        : selectedItem === "Closed"
+                        ? "green"
+                        : selectedItem === "Exited"
+                        ? "red"
+                        : selectedItem === "Canclled"
+                        ? "orange"
+                        : "purple"
+                    } 
+                    py={"3px"} px={"8px"}
+                  >
+                    {selectedItem}
                   </Badge>
-                </MenuItem>
-              ))}
-            </MenuList>
-          </Menu>
+                ) : "Select Item"}
+              </MenuButton>
+
+              {status?.length > 0 ?<MenuList w={"400px"}>
+                {status?.map(({ id, statusAdmin }) => (
+                  <MenuItem
+                    key={id}
+                    fontSize={"sm"}
+                    onClick={() => handleMenuItemClick(statusAdmin, id)}
+                  >
+                    <Badge 
+                      rounded={"full"}
+                      pt={1.5}
+                      pb={1.5}
+                      ps={4}
+                      pe={4}
+                      mt={1.5}
+                      mb={1.5}
+                      textTransform={"none"}
+                      colorScheme={
+                        statusAdmin === "Draft"
+                          ? "gray"
+                          : statusAdmin === "Processing"
+                          ? "yellow"
+                          : statusAdmin === "Open"
+                          ? "blue"
+                          : statusAdmin === "Closed"
+                          ? "green"
+                          : statusAdmin === "Exited"
+                          ? "red"
+                          : statusAdmin === "Canclled"
+                          ? "orange"
+                          : "purple"
+                      }
+                      py={"1px"} px={"8px"}
+                    >
+                      {statusAdmin}
+                    </Badge>
+                  </MenuItem>
+                ))}
+              </MenuList>:""}
+            </Menu>
+            <FormErrorMessage fontSize={'xs'} fontWeight={600} >{error}</FormErrorMessage>
+          </FormControl>
         </ModalBody>
         <ModalFooter>
           <Button
-            // bg={"hsla(139, 100%, 14%, 1)"}
             colorScheme="forestGreen"
             mr={3}
             color={"#fff"}
-            // _hover={{
-            //   bg: "hsl(139deg 98.99% 26.59%)",
-            // }}
             size={"sm"}
             rounded={"sm"}
             onClick={handleSubmit}
@@ -167,7 +177,7 @@ const UpdateIOStatus = ({ isOpen, onClose , status}) => {
           >
             Save
           </Button>
-          <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
+          <Button size={"sm"} rounded={"sm"} mr={3} onClick={handleClose}>
             Close
           </Button>
         </ModalFooter>