tanami-admin-panel/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx

import {
  Box,
  Button,
  FormControl,
  FormLabel,
  HStack,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Switch,
  Table,
  Tbody,
  Text,
  Textarea,
  Th,
  Tr,
} from "@chakra-ui/react";
import DataTable from "../../../../Components/DataTable/DataTable";
import { useState } from "react";
import { AddIcon } from "@chakra-ui/icons";

const DistributionInvestor = ({ isOpen, onClose }) => {

  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
    "Sr No.",
    "Client Id",
    "First name",
    "Last Name",
    "Amount",
    "%",
    "($)",
  ];

  const filteredData = [
    {
      id: 1,
    },
    {
      id: 1,
    },
    {
      id: 1,
    },
    {
      id: 1,
    },]

  const [extractedArray, setExtractedArray] = useState(
    filteredData?.map((item, index) => ({
      id: item?.id,
      "Sr No.": 
      <Box w={9} display={'flex'} alignItems={'center'} isTruncated={true} h={25}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
        {index + 1}
        </Text>
      </Box>,
      "Client Id": (
        <Box w={100} isTruncated={true}>
          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          BH00000001
          </Text>
        </Box>
      ),
      "First name": (
        <Box minW={24} isTruncated={true}>
          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          Faisal
          </Text>
        </Box>
      ),
      "Last Name": (
        <Box minW={24} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
        Aljalahma
        </Text>
        </Box>
      ),
      "Amount": (
        <Box minW={24} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
        $100,000 /-
        </Text>
        </Box>
      ),
      "%": (
        <Box minW={19} isTruncated={true}>
        <Text textAlign={'right'} as={"span"} color={"teal.900"} fontWeight={"500"}>
        26.0 %
        </Text>
        </Box>
      ),
      "($)": (
        <Box minW={24} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
        $100,000 /-
        </Text>
        </Box>
      ),
    }))
  );


  const Total = () => {
    return (
      <Table size="sm">
        <Tbody backgroundColor="gray.50">
          <Tr >
            <Th
              textAlign={"left"}
              p={3}
              width="90px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              Total
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="110px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="110px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="110px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"left"}
              p={3}
              width="110px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              $100200
            </Th>
            <Th
              textAlign={"left"}
              p={3}
              width="90px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              
              $100230
            </Th>
          </Tr>
        </Tbody>
      </Table>
    );
  };





  return (
    <Modal size={'xl'} isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent maxW={1000} >
        <ModalHeader fontSize={"md"}>Distribution To investors</ModalHeader>
        <ModalCloseButton />
        <ModalBody >

<HStack mb={4} >
  <Input placeholder="$00.00" size={'sm'} className="col" />
  <Input placeholder="$00.00" size={'sm'} className="col" />
  <Button leftIcon={<AddIcon />} size={'sm'} rounded={'sm'} colorScheme="forestGreen">Add</Button>
</HStack>

        <DataTable
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
        setData={setExtractedArray}
        caption={<Total/>}
        // isLoading={isLoading}
      />
          
        </ModalBody>
        {/* <ModalFooter>
          <Button
            bg={"hsla(139, 100%, 14%, 1)"}
            mr={3}
            color={"#fff"}
            _hover={{
              bg: "hsl(139deg 98.99% 26.59%)",
            }}
            size={'sm'}
            rounded={"sm"}
          >
            Save
          </Button>
          <Button 
            size={'sm'}
            rounded={"sm"} mr={3} onClick={onClose}>
            Close
          </Button>
        </ModalFooter> */}


        
      </ModalContent>
    </Modal>
  );
};

export default DistributionInvestor;