tanami-admin-panel/src/Pages/Admin/ManageAcademy/AcademicDocuments.jsx

import {
    Box,
    Button,
    HStack,
    Image,
    Input,
    Link,
    Text,
    Tooltip,
    useDisclosure,
    useToast,
  } from "@chakra-ui/react";
  import React, { useContext, useEffect, useState } from "react";
  import { AddIcon, CheckIcon, CloseIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
  import DataTable from "../../../Components/DataTable/DataTable";
  import Pagination from "../../../Components/Pagination";
  import CustomAlertDialog from "../../../Components/CustomAlertDialog";
  import { OPACITY_ON_LOAD } from "../../../Layout/animations";
  import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import AcademicDocumentsAdd from "./AcademicDocumentsAdd";
  
  const AcademicDocuments = () => {
    const toast = useToast();
    const { slideFromRight, academicDocuments, setAcademicDocuments } =
      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("");
    const { isOpen, onOpen, onClose } = useDisclosure();
  
    useEffect(() => {
      // Simulate loading
      const timer = setTimeout(() => {
        setIsLoading(false);
      }, 1500);
  
      // Cleanup the timer on component unmount
      return () => clearTimeout(timer);
    }, []);
  
    // ====================================================[Table Filter]================================================================
    const filteredData = academicDocuments.filter((item) => {
      // Filter by name (case insensitive)
      const name = item.fullName;
      const searchLower = searchTerm.toLowerCase();
      const nameMatches = name.toLowerCase().includes(searchLower);
      return nameMatches;
    });
  
    // ====================================================[Table Setup]================================================================
    const tableHeadRow = [
      "Sr No.",
      "File Name",
      "Document",
      "Action",
    ];
  
    const extractedArray = filteredData?.map((item, index) => ({
      id: item?.id,
      "Sr No.": (
        <Text
          justifyContent={slideFromRight ? "right" : "left"}
          as={"span"}
          color={"gray.800"}
          className="d-flex align-items-center web-text-small"
          fontWeight={"500"}
        >
          {index + 1}.
        </Text>
      ),
      "File Name": (
        <Text
          justifyContent={slideFromRight ? "right" : "left"}
          as={"span"}
          color={"gray.600"}
          className="d-flex align-items-center web-text-small"
          fontWeight={"500"}
        >
          {item.fullName}
        </Text>
      ),
      "Document": (
        <Text
          justifyContent={slideFromRight ? "right" : "left"}
          as={"span"}
          color={"gray.600"}
          className="d-flex align-items-center  web-text-small"
          fontWeight={"500"}
        >
          {item.document}
        </Text>
      ),
      Action: (
        <Box display={"flex"} justifyContent={"center"} gap={2}>
          <Tooltip
            rounded={"sm"}
            fontSize={"xs"}
            label="View"
            bg="#fff"
            color={"green.500"}
            placement="top"
          >
            <Button
              _hover={{ color: "green.500" }}
              // transition={"0.5s all"}
              color="green.300"
              rounded={"sm"}
              size={"xs"}
            >
              <ViewIcon />
            </Button>
          </Tooltip>
  
          <Tooltip
            rounded={"sm"}
            fontSize={"xs"}
            label="Edit"
            bg="#fff"
            color={"blue.500"}
            placement="top"
          >
            <Button
              _hover={{ color: "blue.500" }}
              // transition={"0.5s all"}
              color="blue.400"
              rounded={"sm"}
              size={"xs"}
            >
              <EditIcon />
            </Button>
          </Tooltip>
  
          <Tooltip
            rounded={"sm"}
            fontSize={"xs"}
            label="Delete"
            bg="#fff"
            color={"red.500"}
            placement="top"
          >
            <Button
              onClick={() => {
                setActionId(item?.id);
                setDeleteAlert(true);
              }}
              _hover={{ color: "red.500" }}
              // transition={"0.5s all"}
              color="red.300"
              rounded={"sm"}
              size={"xs"}
            >
              <DeleteIcon />
            </Button>
          </Tooltip>
        </Box>
      ),
    }));
  
    const handleDelete = () => {
      const deleteHistory = sponser.filter((sponsor) => sponsor.id !== actionId);
  
      setTimeout(() => {
        setSponser(deleteHistory);
        setDeleteAlert(false);
        setIsLoading(false);
      }, 100);
      setIsLoading(true);
    };
  
    return (
      <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
        <Box bg="white.500">
          <HStack
            display={"flex"}
            justifyContent={"space-between"}
            ps={1}
            pe={1}
            pb={4}
            pt={4}
            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} />
              <Link to={""}>
                <Button
                  leftIcon={<AddIcon />}
                  colorScheme={"green"}
                  rounded={"sm"}
                  size={"sm"}
                  onClick={onOpen}
                >
                  Add
                </Button>
              </Link>
            </HStack>
          </HStack>
          <AcademicDocumentsAdd
            isOpen={isOpen}
            onClose={onClose}
          />
        </Box>
  
        <DataTable
          emptyMessage={`We don't have any Sponers `}
          tableHeadRow={tableHeadRow}
          data={extractedArray}
          isLoading={isLoading}
          viewActionId={actionId}
          setViewActionId={setActionId}
          // totalPages={10}
  
          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 AcademicDocuments;