tanami-admin-panel/src/Pages/IO_Management/CreateIO/AddIONav.jsx

import {
    Box,
    Button,
    Drawer,
    DrawerBody,
    DrawerCloseButton,
    DrawerContent,
    DrawerFooter,
    DrawerHeader,
    DrawerOverlay,
    FormControl,
    FormErrorMessage,
    FormLabel,
    HStack,
    Input,
    Select,
    Stack,
    Text,
    Textarea,
    VStack,
    useToast,
  } from "@chakra-ui/react";
  import * as yup from "yup";
  import React, { useState, useEffect, useContext } from "react";
  import { useForm, Controller } from "react-hook-form";
  import { yupResolver } from "@hookform/resolvers/yup";
  import CustomAlertDialog from "../../../Components/CustomAlertDialog";
  import { v4 as uuidv4 } from "uuid";
  import { useCreateIoCashMutation, useCreateIoNavMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
  import { useParams } from "react-router-dom";
  import ToastBox from "../../../Components/ToastBox";
  import GlobalStateContext from "../../../Contexts/GlobalStateContext";
  import CurrencyInput from "../../../Components/CurrencyInput";
import { formatDatee } from "../../../Components/FormField";
  
  const ioNav = yup.object().shape({
    transactionDate: yup.string().required("Date is required"),
    transactionAmount: yup.number().required("New NAV is required"),
    comments: yup.string().notRequired(),
  });
  
  const AddIONav = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
    const params = useParams()
    const id = params?.id
    const [file, setFile] = useState("");
    const [fileName, setFileName] = useState("");
    const [isLoading, setIsLoading] = useState(false)
    const [alert, setAlert] = useState(false);
    const toast = useToast();
  
  
  
    // ======================[ Cotext Api ]
    const { IODetails } = useContext(GlobalStateContext);
    const found = data?.find((item) => item?.id === actionId);
  
  
    const [createIoNav] = useCreateIoNavMutation()
    // const {
    //   data
    // } = useGetArtifactsQuery(id)
  
    const {
      control,
      handleSubmit,
      watch,
      reset,
      formState: { errors },
    } = useForm({
      resolver: yupResolver(ioNav),
    });
  
  
    const [createIoCash] = useCreateIoCashMutation()
  
  
    const onSubmit = async (data) => {
  
      setIsLoading(true)
  
      try {
  
        const res = await createIoNav({ data, id })
        if (res?.data?.statusCode === 201) {
          setIsLoading(false);
          toast({
            render: () => <ToastBox message={res?.data?.message} />,
          });
          handleClose()
        }else if(res?.error?.status === 400){
          toast({
            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
          });
          handleClose()
        }
  
  
      } catch (error) {
        console.log(error);
  
      }
  
    };
  
  
  
    const handleConfirm = () => {
      handleSubmit(onSubmit)();
    };
  
    const handleSave = () => {
      handleSubmit(onSubmit)();
    };
  
    const handleClose = () => {
      setIsLoading(false);
      setAlert(false)
      onClose()
      reset({
        transactionDate:"",
        transactionAmount:"",
        comments:""
      })
    }




const today = formatDatee(new Date(), 'yyyy-MM-dd');

function calculatePercentage(newNav, currNav) {
  const per = (newNav - currNav) / currNav * 100
  return per.toFixed(2)
}


console.log(calculatePercentage(1092500, 976070));


  
    return (
      <>
        <Drawer
          size={"md"}
          isOpen={isOpen}
          placement="right"
          initialFocusRef={firstField}
          onClose={handleClose}
        >
          <DrawerOverlay />
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader fontSize={"sm"}>IO Nav Details</DrawerHeader>
  
            <DrawerBody>
              <Stack spacing={4}>
                <FormControl isInvalid={errors.transactionDate} isRequired>
                  <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
                  <Controller
                    name="transactionDate"
                    control={control}
                    render={({ field }) => (
                      <Input {...field} 
                      max={today} // Set max attribute to today’s date
                       fontSize={"sm"} type="date" size={"sm"} />
                    )}
                  />
                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                    {errors.transactionDate?.message}
                  </FormErrorMessage>
                </FormControl>
  
  
  
                <FormControl isInvalid={errors.transactionAmount} isRequired>
                  <FormLabel fontSize={"sm"}>New NAV</FormLabel>
                  <Controller
                    name="transactionAmount"
                    control={control}
                    render={({ field }) => (
                      <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
                    )}
                  />
                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                    {errors.transactionAmount?.message}
                  </FormErrorMessage>
                </FormControl>
                

                <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>
                  </VStack>


                  <VStack align={'start'}>
                    <Text as={'span'} fontSize={'sm'} fontWeight={500}>Live return %</Text>
                    <Text as={'span'} fontSize={'sm'}>{calculatePercentage(watch()?.transactionAmount||IODetails?.ioNAV,IODetails?.ioNAV)}</Text>
                  </VStack>
                </HStack>
                
  
  
                <FormControl isInvalid={errors.comments}>
                  <FormLabel fontSize={"sm"}>Comments</FormLabel>
                  <Controller
                    name="comments"
                    control={control}
                    render={({ field }) => (
                      <Textarea {...field}  fontSize={"sm"} type="text" size={"sm"} />
                    )}
                  />
                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                    {errors.comments?.message}
                  </FormErrorMessage>
                </FormControl>
  
              </Stack>
            </DrawerBody>
  
            <DrawerFooter>
              <Button
                variant="outline"
                colorScheme={"forestGreen"}
                rounded={"sm"}
                size={"sm"}
                mr={3}
                onClick={handleClose}
              >
                Cancel
              </Button>
  
              <Button
                colorScheme={"forestGreen"}
                rounded={"sm"}
                size={"sm"}
  
                onClick={() => setAlert(true)}
              >
                Save
              </Button>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
  
  
        <CustomAlertDialog
          isOpen={alert}
          onClose={() => setAlert(false)}
          alertHandler={handleSave}
          message={"Are you sure you want to add NAV details?"}
          isLoading={isLoading}
        />
      </>
    );
  };
  
  export default AddIONav;