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

import React, { useContext, useEffect, useRef, useState } from 'react'
import GlobalStateContext from '../../../Contexts/GlobalStateContext';
import { Box, HStack, Input,Text, Table, Tbody, Th, Tr, Avatar, useDisclosure,Button } from '@chakra-ui/react';
import { OPACITY_ON_LOAD } from '../../../Layout/animations';
import Pagination from '../../../Components/Pagination';
import NormalTable from '../../../Components/DataTable/NormalTable';
import CustomAlertDialog from '../../../Components/CustomAlertDialog';
import { formatDatee } from '../../../Components/FormField';
import { AddIcon } from '@chakra-ui/icons';
import AddIONav from './AddIONav';

const IONAVDetails = () => {
  const { navDetails, setNavDetails, IODetails } =
    useContext(GlobalStateContext);
    const firstField = useRef();
    const { isOpen, onOpen, onClose } = useDisclosure();
    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("");


    console.log(IODetails?.ioNAVHistory);
    

    
  useEffect(() => {
    // Simulate loading
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 1500);

    // Cleanup the timer on component unmount
    return () => clearTimeout(timer);
  }, []);

    // Table setup
    const tableHeadRow = [
      // "Sr.No",
      "Valuation Date",
      "NAV",
      "Last NAV update",
      "Investment Closed",
      "Comments",
      "Update by ",
      // "Update On",
    ];

      // Table filter
  const filteredData = IODetails?.ioNAVHistory?.filter((item) => {
    const name = item.transactionType;
    const searchLower = searchTerm.toLowerCase();
    const nameMatches = name.toLowerCase().includes(searchLower);
    return nameMatches;
  }).sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));

  const  extractedArray=filteredData?.map((item, index) => ({
    id: item?.id,
    "Sr.No": index +1,
    "Valuation Date": (
      <Text
        justifyContent={"center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {formatDatee(item.transactionDate)}
      </Text>
    ),
    "NAV": (
      <Text
        justifyContent={"center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {/* {`${item.transactionAmount}`} */}

        {`$${parseFloat(item.transactionAmount||0).toLocaleString()}`}
      </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
        justifyContent={"center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {item.comments}
      </Text>
    ),
    "Update by ": (
      <Text
        justifyContent ={"center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        gap={2}
        className="d-flex align-items-center web-text-small"
      >
        
    <Avatar size='sm' name={"faisal"} src={null} />Faisal
      </Text>
    ),
    "Update On": (
      <Text
        justifyContent={"center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {item.updateOn}
      </Text>
    ),
  }));



  const handleDelete = () => {
    const updatedNav = navDetails.filter(
      (sponsor) => sponsor.id !== actionId
    );

    setTimeout(() => {
      setNavDetails(updatedNav);
      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 display={"flex"} alignItems={"center"}>
          <Pagination totalItems={10} />
        </HStack> */}

          {IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Cash</Button>:null}


      </HStack>
    </Box>

    <NormalTable
      centered={true}
      emptyMessage={`We don't have any Sponers`}
      tableHeadRow={tableHeadRow}
      data={extractedArray} 
      isLoading={isLoading}
      viewActionId={actionId}
      setViewActionId={setActionId}
      caption={"Tanami v1.0"}
      setMouseEnteredId={setMouseEnteredId}
      setMouseEntered={setMouseEntered}
    />

    <CustomAlertDialog
      onClose={() => setDeleteAlert(false)}
      isOpen={deleteAlert}
      message={"Are you sure you want to delete sponers?"}
      alertHandler={handleDelete}
      isLoading={isLoading}
    />



<AddIONav 
          isOpen={isOpen}
          onClose={onClose}
          firstField={firstField} />


  </Box>
  )
}

export default IONAVDetails