My Requests update

src/Contexts/GlobalStateProvider.jsx

@@ -9,6 +9,7 @@ import { HiOutlineReceiptPercent } from "react-icons/hi2";
 import { IoMdQrScanner } from "react-icons/io";
 import { GrDocumentPdf } from "react-icons/gr";
 import { AiOutlineFileGif } from "react-icons/ai";
+import DummyPdf from "../../src/assets/dummy-pdf.pdf"
 
 const getRandomDate = (start, end) => {
   const date = new Date(
@@ -41,7 +42,9 @@ export const generateUniqueId = () => {
 
 const GlobalStateProvider = ({ children }) => {
   const [isAuthenticate, setIsAuthenticate] = useState(false);
-  const [ reportsHistory, setReportsHistory ] = useState([
+
+
+  const [reportsHistory, setReportsHistory] = useState([
     {
       "id": 1,
       "name": "Office Supplies - July 2024",
@@ -213,13 +216,102 @@ const GlobalStateProvider = ({ children }) => {
   ]
   )
 
+
+
+  const [requestsTable, setRequestTable] = useState([
+    {
+      "id": 1,
+      "transactionType": "Dine In",
+      "date": "31- 02-2024 04.20 pm",
+      "walletType": "Food",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 5000"
+    },
+    {
+      "id": 2,
+      "transactionType": "Dine In",
+      "date": "31- 02-2024 04.20 pm",
+      "walletType": "Food",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 5000"
+    },
+    {
+      "id": 3,
+      "transactionType": "Dine In",
+      "date": "31- 02-2024 04.20 pm",
+      "walletType": "Food",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 5000"
+    },
+    {
+      "id": 4,
+      "transactionType": "Dine In",
+      "date": "31- 02-2024 04.20 pm",
+      "walletType": "Food",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 5000"
+    },
+    {
+      "id": 5,
+      "transactionType": "Dine In",
+      "date": "31- 02-2024 04.20 pm",
+      "walletType": "Food",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 5000"
+    },
+    {
+      "id": 6,
+      "transactionType": "Dine In",
+      "date": "31- 02-2024 04.20 pm",
+      "walletType": "Food",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 5000"
+    },
+    {
+      "id": 7,
+      "transactionType": "Dine In",
+      "date": "31- 02-2024 04.20 pm",
+      "walletType": "Food",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 5000"
+    },
+    {
+      "id": 8,
+      "transactionType": "Dine In",
+      "date": "31- 02-2024 04.20 pm",
+      "walletType": "Food",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 5000"
+    },
+    {
+      "id": 9,
+      "transactionType": "Dine In",
+      "date": "31- 02-2024 04.20 pm",
+      "walletType": "Food",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 5000"
+    },
+    {
+      "id": 10,
+      "transactionType": "Dine In",
+      "date": "31- 02-2024 04.20 pm",
+      "walletType": "Food",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 5000"
+    },
+
+  ]
+  )
+
   return (
     <GlobalStateContext.Provider
       value={{
         isAuthenticate,
         setIsAuthenticate,
-        reportsHistory, 
-        setReportsHistory
+        reportsHistory,
+        setReportsHistory,
+        requestsTable,
+        setRequestTable
       }}
     >
       {children}

src/Pages/Requests/Requests.jsx

@@ -1,15 +1,346 @@
-import { Box } from "@chakra-ui/react";
 import React from "react";
+import {
+  Box, Tabs, Tab, TabList, TabPanels, TabPanel,
+  Button,
+  Divider,
+  Icon,
+  Tag,
+  TagLabel,
+  Text,
+  VStack,
+  HStack,
+  Checkbox
+} from "@chakra-ui/react";
+import { useContext, useEffect, useState } from "react";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiReceipt } from "react-icons/pi";
+import { CalendarIcon } from "@chakra-ui/icons";
 import MiniHeader from "../../Components/MiniHeader";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { FaRegFilePdf } from "react-icons/fa";
+import { MdOutlineRamenDining } from "react-icons/md";
 
 const Requests = () => {
+  const { requestsTable } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    // Set isLoading to true
+    setIsLoading(true);
+
+    // Simulate a 3-second delay
+    const timer = setTimeout(() => {
+      setIsLoading(false); // Set isLoading to false after 3 seconds
+    }, 500);
+
+    // Cleanup the timer when the component unmounts or when the useEffect re-runs
+    return () => clearTimeout(timer);
+  }, []); // Empty dependency array means this effect runs once after the component mounts
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Transaction Type",
+    "Date",
+    "Wallet Type",
+    "Document",
+    "Amount Spent",
+    "Actions",
+  ];
+
+  // const extractedArray = requestsTable.map((item)=>({ }))
+
+  const extractedArray = requestsTable.map((item, index) => ({
+    "Transaction Type": (
+      <Checkbox colorScheme="purple">
+        <Text as={"span"} display={"flex"} gap={2} alignItems={"center"}>
+          <Icon
+            as={MdOutlineRamenDining}
+            boxSize={8}
+            p={1.5}
+            bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
+            rounded={"full"}
+          />
+          {item.transactionType}
+        </Text>
+      </Checkbox>
+    ),
+    "Date": (
+      <Text as={"span"} colorScheme={"#363636"} fontSize={"14px"}>
+        {item.date}
+      </Text>
+    ),
+    "Wallet Type": (
+      <Button
+        bg="linear-gradient(90deg, #E8E6FF 0%, #F0E6FF 100%)"
+        size="sm"
+        // _hover={{ bg: "linear-gradient(90deg, #F0E6FF 0%, #E8E6FF 100%)" }}
+        _hover={{ bg: "linear-gradient(90deg, #E8E6FF 0%, #F0E6FF 100%)" }}
+      >
+        <Text
+          bg="linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)"
+          bgClip="text"
+          color="transparent"
+          fontWeight="bold"
+          mb={"0"}
+        >
+          {item.walletType}
+        </Text>
+      </Button>
+    ),
+
+    Document: (
+      <Button
+        as="a"
+        href={item.document}
+        download="dummy-pdf"
+        target="_blank"
+        color="#363636"
+        fontWeight={"500"}
+        bg={"transparent"}
+        border={"1px solid #CCCCCC"}
+        borderRadius="full"
+        size="sm"
+        gap={"6px"}
+        alignItems={"center"}
+        _hover={{ bg: "inherit" }}
+      >
+        <FaRegFilePdf color="#B43331" />
+        Receipt.pdf
+      </Button>
+    ),
+    "Amount Spent": (
+      <Tag
+        bg={"transparent"}
+      >
+        <TagLabel>{item.amountSpent}</TagLabel>
+      </Tag>
+    ),
+    Actions: (
+      <Box
+        display={"flex"}
+        gap={1}
+        alignItems={"center"}
+        justifyContent={"center"}
+      >
+        <Button
+          // _hover={{ color: "gray.800", bg: "gray.100" }}
+          transition={"0.5s"}
+          size={"sm"}
+          bg={"none"}
+          p={0}
+          color="gray.600"
+        >
+          <AiOutlineEdit fontSize={"19px"} />
+        </Button>
+        <Button
+          // _hover={{ color: "gray.800", bg: "gray.100" }}
+          transition={"0.5s"}
+          size={"sm"}
+          bg={"none"}
+          p={0}
+          color="gray.600"
+        >
+          <RiDeleteBin5Line fontSize={"18px"} />
+        </Button>
+      </Box>
+    ),
+  }));
+
+
   return (
-    <Box h={"100%"} p={6}>
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
       <MiniHeader
         title={"My Requests"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
         backButton={true}
       />
+      <Box color={"white"}>
+        <Tabs variant="unstyled">
+          <TabList
+            bg={'#FFFFFF'}
+            borderRadius={'6px'}
+          >
+            <Tab
+              _selected={{ color: "#fff", bg: "#3725EA" }}
+              // _hover={{ color: "#fff", bg: "#ddd" }}
+              color="black" bg="transparent"
+              py={3}
+              px={16}
+              borderLeftRadius={'6px'}
+              fontWeight={'600'}
+            >
+              Advance Expense
+            </Tab>
+            <Tab
+              _selected={{ color: "#fff", bg: "#3725EA" }}
+              color="black" bg="transparent"
+              py={3}
+              px={16}
+              fontWeight={'600'}
+            >
+              Reimbursement
+            </Tab>
+          </TabList>
+
+          <TabPanels>
+            <TabPanel py={'4'} pl={'0'} pr={'0'}>
+              <Box
+                rounded={"xl"}
+                py={3}
+                display={"flex"}
+                flexDirection={"column"}
+                bg={"#fff"}
+                shadow={"md"}
+                minH={"100%"}
+              >
+                <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+                  <Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
+                    Expenses
+                  </Text>
+                  <HStack w={"100%"} justifyContent={"space-between"}>
+                    <HStack>
+                      <Button
+                        fontWeight={500}
+                        size={"sm"}
+                        leftIcon={<CalendarIcon color={"purple.800"} />}
+                        colorScheme="gray"
+                        color={"gray.700"}
+                        variant="outline"
+                        fontSize={"xs"}
+                      >
+                        Select Date Range
+                      </Button>
+                      <Button
+                        as={"a"}
+                        fontWeight={500}
+                        size={"sm"}
+                        color="#667085"
+                        fontSize={"xs"}
+                        bg={"transparent"}
+                        _hover={"none"}
+                        cursor={"pointer"}
+                        textDecoration={"underline"}
+                      >
+                        Select all
+                      </Button>
+
+                    </HStack>
+
+                    <Button
+                      _hover={{
+                        // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+                        opacity: 0.8,
+                      }}
+                      bgGradient="linear(to-r, #3725EA, #5E0FCD)"
+                      fontSize={"xs"}
+                      px={8}
+                      fontWeight={500}
+                      size={"sm"}
+                      color={"#fff"}
+                      variant="outline"
+                      transition={"0.5s all"}
+                      _active={{
+                        // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+                        opacity: 1,
+                      }}
+                    >
+                      Add to Report
+                    </Button>
+                  </HStack>
+                </VStack>
+                <Divider />
+                <NormalTable
+                  emptyMessage={`We don't have any Sponers `}
+                  tableHeadRow={tableHeadRow}
+                  data={extractedArray}
+                  isLoading={isLoading}
+                />
+              </Box>
+            </TabPanel>
+            <TabPanel py={'4'} pl={'0'} pr={'0'}>
+              <Box
+                rounded={"xl"}
+                py={3}
+                display={"flex"}
+                flexDirection={"column"}
+                bg={"#fff"}
+                shadow={"md"}
+                minH={"100%"}
+              >
+                <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+                  <Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
+                    Expenses
+                  </Text>
+                  <HStack w={"100%"} justifyContent={"space-between"}>
+                    <HStack>
+                      <Button
+                        fontWeight={500}
+                        size={"sm"}
+                        leftIcon={<CalendarIcon color={"purple.800"} />}
+                        colorScheme="gray"
+                        color={"gray.700"}
+                        variant="outline"
+                        fontSize={"xs"}
+                      >
+                        Select Date Range
+                      </Button>
+                      <Button
+                        as={"a"}
+                        fontWeight={500}
+                        size={"sm"}
+                        color="#667085"
+                        fontSize={"xs"}
+                        bg={"transparent"}
+                        _hover={"none"}
+                        cursor={"pointer"}
+                        textDecoration={"underline"}
+                      >
+                        Select all
+                      </Button>
+
+                    </HStack>
+
+                    <Button
+                      _hover={{
+                        // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+                        opacity: 0.8,
+                      }}
+                      bgGradient="linear(to-r, #3725EA, #5E0FCD)"
+                      fontSize={"xs"}
+                      px={8}
+                      fontWeight={500}
+                      size={"sm"}
+                      color={"#fff"}
+                      variant="outline"
+                      transition={"0.5s all"}
+                      _active={{
+                        // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+                        opacity: 1,
+                      }}
+                    >
+                      Add to Report
+                    </Button>
+                  </HStack>
+                </VStack>
+                <Divider />
+                <NormalTable
+                  emptyMessage={`We don't have any Sponers `}
+                  tableHeadRow={tableHeadRow}
+                  data={extractedArray}
+                  isLoading={isLoading}
+                />
+              </Box>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+
+      </Box>
+
+
     </Box>
   );
 };