tanami-admin-panel/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx

import React, { useContext, useEffect, useState } from "react";
import {
  Box,
  Button,
  FormControl,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  useDisclosure,
  useToast,
} from "@chakra-ui/react";
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";
import RequestRejectModal from "./RequestRejectModal";
import ApproveInvestedModal from "./ApproveInvestedModal";

// Validation schema
const validationSchema = yup.object().shape({
  transactionDate: yup.date().required("Date 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 ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
  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 { IODetails } = useContext(GlobalStateContext);
  const [amountInvested] = useAmountIvestmentMutation();
  const [actionId, setActionId] = useState(false);

  const {
    isOpen: isConfirmOpen,
    onOpen: onConfirmOpen,
    onClose: onConfirmClose,
  } = useDisclosure();
  const {
    isOpen: isRejectOpen,
    onOpen: onRejectOpen,
    onClose: onRejectClose,
  } = useDisclosure();

  useEffect(() => {
    if (IODetails?.totalAmtInvestmentInUSD) {
      const totalAmount = parseFloat(IODetails.totalAmtInvestmentInUSD);
      const ioCashUpdate = parseFloat(IODetails.totalAmtInvestmentInUSD);
      reset({
        Total_Amount: totalAmount,
        IoCash: ioCashUpdate,
      });
    }
  }, [IODetails, reset]);

  const onSubmit = async (data) => {
    console.log(data);
    setIsLoading(true);

    try {
      const res = await amountInvested({ data, id });
      console.log(res);
      if (res?.data?.statusCode === 200) {
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        });
        setIsLoading(false);
        onClose();
      } else if (res?.error?.status === 400) {
        toast({
          render: () => (
            <ToastBox message={res?.error?.data?.message} status={"error"} />
          ),
        });
        setIsLoading(false);
      }
    } catch (error) {
      setIsLoading(false);
    }
  };

  const formatDate = (date) => new Date(date).toLocaleDateString();

  const handleAmountChange = (e) => {
    // 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,
    });
  };

  console.log(
    "=========hitttt",
    IODetails?.ioTransactionRecords?.Approved?.[0]?.transactionAmount
  );

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader fontSize={"md"}>Amount Invested</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <form onSubmit={handleSubmit(onSubmit)}>
            <FormControl
              mb={"15px"}
              isInvalid={!!errors.transactionDate}
              isRequired
            >
              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
                Date
              </FormLabel>
              <Input
                type="text"
                value={formatDate(
                  IODetails?.ioTransactionRecords?.Approved?.[0]?.createdAt
                )}
                size="sm"
                rounded={"sm"}
                textAlign={"end"}
                focusBorderColor="forestGreen.300"
                fontSize={"sm"}
                readOnly
              />
            </FormControl>

            <FormControl
              mb={"15px"}
              isInvalid={!!errors.Total_Amount}
              isReadOnly
            >
              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
                Amount
              </FormLabel>
              <Input
                type="text"
                value={formatCurrency(watch("Total_Amount") || 0)}
                size="sm"
                rounded={"sm"}
                textAlign={"end"}
                focusBorderColor="forestGreen.300"
                fontSize={"sm"}
                readOnly
              />
            </FormControl>

            <FormControl
              mb={"15px"}
              isInvalid={!!errors.amountInvested}
              isRequired
            >
              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
                Amount to invest
              </FormLabel>
              <Input
                type="text"
                value={formatCurrency(
                  IODetails?.ioTransactionRecords?.Pending?.[0]
                    ?.transactionAmount || 0
                )}
                size="sm"
                rounded={"sm"}
                textAlign={"end"}
                focusBorderColor="forestGreen.300"
                fontSize={"sm"}
                readOnly
              />
            </FormControl>

            <FormControl mb={"15px"} isInvalid={!!errors.IoCash}>
              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
                IO Cash
              </FormLabel>
              <Input
                type="text"
                value={formatCurrency(
                  (watch("Total_Amount") || 0) -
                    (IODetails?.ioTransactionRecords?.Pending?.[0]
                      ?.transactionAmount || 0)
                )}
                size="sm"
                rounded={"sm"}
                focusBorderColor="forestGreen.300"
                fontSize={"sm"}
                textAlign={"right"}
                readOnly
              />
            </FormControl>

            {localStorage?.getItem("role") !== "Maker" && <ModalFooter>
              <Box display={"flex"} justifyContent={"center"} gap={2}>
                <Button
                  rounded={"sm"}
                  size={"xs"}
                  textTransform={"inherit"}
                  fontWeight={500}
                  px={3}
                  py={2}
                  onClick={() => {
                    setActionId(id); // Use the `id` variable from params
                    onConfirmOpen();
                  }}
                  colorScheme="forestGreen"
                  variant={"solid"}
                  cursor={"pointer"}
                >
                  Approve
                </Button>
                <Button
                  rounded={"sm"}
                  size={"xs"}
                  textTransform={"inherit"}
                  fontWeight={500}
                  px={3}
                  py={2}
                  onClick={() => {
                    setActionId(id); // Use the `id` variable from params
                    onRejectOpen();
                  }}
                >
                  Reject
                </Button>
              </Box>
            </ModalFooter>}
          </form>
        </ModalBody>
      </ModalContent>
      <ApproveInvestedModal
        isOpen={isConfirmOpen}
        onClose={onConfirmClose}
        id={investorId}
      />
      <RequestRejectModal
        isOpen={isRejectOpen}
        onClose={onRejectClose}
        id={investorId}
      />
    </Modal>
  );
};

export default ViewAmountInvested;