tanami-admin-panel/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx

import {
  Box,
  Button,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  FormControl,
  FormErrorMessage,
  FormHelperText,
  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 { v4 as uuidv4 } from "uuid";
import { useParams } from "react-router-dom";
import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
import ToastBox from "../../../../Components/ToastBox";
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
import CurrencyInput from "../../../../Components/CurrencyInput";
import { useAddNavDetailsMutation } from "../../../../Services/io.service";
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()
  .max(200, "Approve Comment cannot be more than 200 characters"),
});

const AddNavDetails = ({ 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 [addNavDetails] = useAddNavDetailsMutation()
  // const {
  //   data
  // } = useGetArtifactsQuery(id)

  const {
    control,
    handleSubmit,
    watch,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(ioNav),
  });


  const onSubmit = async (data) => {

    setIsLoading(true)

    try {

      const res = await addNavDetails({ 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"}>Comment</FormLabel>
                <Controller
                  name="comments"
                  control={control}
                  render={({ field }) => (
                    <Textarea {...field} maxLength={200}   fontSize={"sm"} type="text" size={"sm"} />
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.comments?.message}
                </FormErrorMessage>
                <FormHelperText fontSize="xs" color="gray.500">
                    <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
                    {watch("comments")?.length || 0} characters.
                  </FormHelperText>
              </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 AddNavDetails;