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

import {
    Badge,
    Box,
    Button,
    HStack,
    Input,
    Text,
    Tooltip,
    useDisclosure,
    useToast,
  } from "@chakra-ui/react";
  import React, { useContext, useEffect, useRef, useState } from "react";
  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
  import NormalTable from "../../../../Components/DataTable/NormalTable";
  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
  
  const formatDate = (date) => new Date(date).toLocaleDateString();
  
  const Pending = () => {
    const toast = useToast();
    const firstField = useRef();
    const { isOpen, onOpen, onClose } = useDisclosure();
    const { IODetails, iONAVDetail, setIONAVDetail } =
      useContext(GlobalStateContext);
    const [searchTerm, setSearchTerm] = useState("");
    const [isLoading, setIsLoading] = useState(true);
    const [deleteAlert, setDeleteAlert] = useState(false);
    const [actionId, setActionId] = useState(false);
    const [mouseEntered, setMouseEntered] = useState(false);
    const [mouseEnteredId, setMouseEnteredId] = useState("");
  
    useEffect(() => {
      // Simulate loading
      const timer = setTimeout(() => {
        setIsLoading(false);
      }, 1500);
  
      // Cleanup the timer on component unmount
      return () => clearTimeout(timer);
    }, []);
  
    const formatDate = (date) => {
      return new Date(date).toLocaleDateString("en-GB", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
      });
    };
  
  
    // Table filter
    const filteredData = IODetails?.ioNAVStatusHistory?.Pending?.filter((item) => {
      // Filter by name (case insensitive)
      const name = item.transactionDate;
      const searchLower = searchTerm.toLowerCase();
      const nameMatches = name.toLowerCase().includes(searchLower);
      return nameMatches;
    });
  
    const tableHeadRow = [
      "Sr No.",
      "Valuation date",
      "NAV",
      "Last Nav Update",
      "Investment Closed",
      "Comments",
      "Updated By",
      "Status",
    ];
  
    const extractedArray = filteredData?.map((item, index) => ({
      id: item?.id,
      "Sr No.": (
        <Text
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
        >
          {index + 1}.
        </Text>
      ),
      "Valuation date": (
        <Text
          as={"span"}
          color={"gray.600"}
          fontWeight={"500"}
        >
          {formatDate(item?.transactionDate)}
        </Text>
      ),
      "NAV": (
        <Text
          as={"span"}
          color={"gray.600"}
          fontWeight={"500"}
        >
            <Badge ms={1} colorScheme="green" me={1}>
            $
          </Badge>
          {item?.transactionAmount}
        </Text>
      ),
      "Last Nav Update": (
        <Text
          justifyContent={"center"}
          as={"span"}
          color={"teal.900"}
          fontWeight={"500"}
          className="d-flex align-items-center web-text-small"
        >
          {item.previousNAVvalue && `${item.previousNAVvalue}`}
        </Text>
      ),
      "Investment Closed": ( 
      <Text
        justifyContent={"center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {item?.initialNAVvalue && `${item?.initialNAVvalue}`}
      </Text>
    ),
      "Comments": (
        <Text
          w={"100px"}
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
        >
          {item?.comments ? item?.comments : "---" }
        </Text>
      ),
      "Updated By": (
        <Text
          w={"100px"}
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
          display={"flex"}
        alignItems={"center"}
        >
           <Avatar
            mr={2}
          size="sm"
          name={item.creator?.firstName}
          src={item.creator?.profilePhoto}
        />
          {item?.creator?.firstName}
        </Text>
      ),
      "Status": (
        <Box display={"flex"} justifyContent={"center"} gap={2}>
          <Tooltip
            rounded={"sm"}
            fontSize={"xs"}
            label="Approve"
            bg="#fff"
            color={"green.500"}
            placement="left-start"
          >
            <Button
              // colorScheme="forestGreen"
              // color="green.500"
              rounded={"sm"}
              size={"xs"}
              textTransform={"inherit"}
              fontWeight={500}
              px={2}
              py={1}
              onClick={() => {
                setActionId(item.id);
                onConfirmOpen();
              }}
              colorScheme="green"
              variant={"solid"}
              cursor={"pointer"}
            >
              <CheckIcon fontSize={"12px"} />
            </Button>
          </Tooltip>
          <Tooltip 
            rounded={"sm"}
            fontSize={"xs"}
            label="Reject"
            bg="#fff"
            color={"red.500"}
            placement="left-start"
          >
            <Button
              colorScheme="red"
              // color="red.500"
              rounded={"sm"}
              size={"xs"}
              textTransform={"inherit"}
              fontWeight={500}
              px={2}
              onClick={() => {
                setActionId(item.id);
                onRejectOpen();
              }}
              py={1}
            // variant={"solid"}
            >
              <CloseIcon fontSize={"10px"} />
            </Button>
          </Tooltip>
        </Box>
      ),
    }));
  
    const handleDelete = () => {
      const updatedSponsors = sponser.filter(
        (sponsor) => sponsor.id !== actionId
      );
  
      setTimeout(() => {
        setCaseDetails(updatedSponsors);
        setDeleteAlert(false);
        setIsLoading(false);
      }, 100);
      setIsLoading(true);
    };
  
    return (
      <Box {...OPACITY_ON_LOAD} pb={0}>
        <Box bg="white.500">
          <HStack
            display={"flex"}
            justifyContent={"space-between"}
            pb={3}
            spacing="24px"
          >
            <Input
              type="search"
              width={300}
              placeholder="Search..."
              size="sm"
              rounded="sm"
              focusBorderColor="green.500"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </HStack>
        </Box>
  
        <NormalTable
          emptyMessage={`We don't have any Sponers`}
          tableHeadRow={tableHeadRow}
          data={extractedArray}
          isLoading={isLoading}
          viewActionId={actionId}
          setViewActionId={setActionId}
          setMouseEnteredId={setMouseEnteredId}
          setMouseEntered={setMouseEntered}
        />
  
        <CustomAlertDialog
          onClose={() => setDeleteAlert(false)}
          isOpen={deleteAlert}
          message={"Are you sure you want to delete sponers?"}
          alertHandler={handleDelete}
          isLoading={isLoading}
        />
      </Box>
    );
  };
  
  export default Pending;