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

import {
    Avatar,
    Badge,
    Box,
    Button,
    HStack,
    Input,
    Table,
    Tag,
    Tbody,
    Text,
    Th,
    Tooltip,
    Tr,
    useDisclosure,
    useToast,
  } from "@chakra-ui/react";
  import React, { useContext, useEffect, useRef, useState } from "react";
  import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
  import { LuFileSpreadsheet } from "react-icons/lu";
  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
  import NormalTable from "../../../../Components/DataTable/NormalTable";
  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
  import ToastBox from "../../../../Components/ToastBox";
  import AddCashDetails from "../AddCashDetails";
  import { debounce } from "../../../Admin/Contact";
  
  const formatDate = (date) => new Date(date).toLocaleDateString();
  
  const Approved = () => {
    const toast = useToast();
    const firstField = useRef();
    const { isOpen, onOpen, onClose } = useDisclosure();
    const { IODetails, iOTransaction, setIOTransaction } =
      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?.ioTransactionRecords?.Approved?.filter((item) => {
      // Filter by name (case insensitive)
      const name = item.transactionAmount;
      const searchLower = searchTerm.toLowerCase();
      const nameMatches = name.toLowerCase().includes(searchLower);
      return nameMatches;
    });
  
    const tableHeadRow = [
      "Sr No.",
      "Transaction Name",
      "Amount",
      "Created By",
      "Created On",
      "Approved By",
      "Approved On",
    ];
  
    const extractedArray = filteredData?.map((item, index) => ({
      id: item?.id,
      "Sr No.": (
        <Text
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
        >
          {index + 1}.
        </Text>
      ),
      "Transaction Name": (
        <Text
          as={"span"}
          color={"gray.600"}
          fontWeight={"500"}
        >
          {item?.transactionType}
        </Text>
      ),
      "Amount": (
        <Text
          as={"span"}
          color={"gray.600"}
          fontWeight={"500"}
        >
          <Badge ms={1} colorScheme="green" me={1}>
            $
          </Badge>
          {item?.transactionAmount}
        </Text>
      ),
      "Created By": (
        <Text
          w={"100px"}
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
        >
          {item?.createdBy}
        </Text>
      ),
      "Created On": (
        <Text
          w={"100px"}
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
        >
          {formatDate(item?.createdAt)}
        </Text>
      ),
      "Approved By": (
        <Text
          w={"100px"}
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
        >
          {item?.modifier ? item?.modifier : "---" }
        </Text>
      ),
      "Approved On": (
          <Text
          w={"100px"}
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
          >
            {item?.modifier ? formatDate(item?.updatedAt) : "---" }
          {}
        </Text>
      ),
    }));
  
    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 Approved;