From 7a0084794b4edf178fdb308ba11c44bd591dedc8 Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Thu, 5 Sep 2024 16:03:03 +0530
Subject: [PATCH] My Requests update

---
 src/Contexts/GlobalStateProvider.jsx |  98 +++++++-
 src/Pages/Requests/Requests.jsx      | 335 ++++++++++++++++++++++++++-
 src/assets/dummy-pdf.pdf             | Bin 0 -> 7478 bytes
 3 files changed, 428 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/dummy-pdf.pdf

diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index f6cf43a..5b869eb 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/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}
diff --git a/src/Pages/Requests/Requests.jsx b/src/Pages/Requests/Requests.jsx
index c3a48f5..1d48dbb 100644
--- a/src/Pages/Requests/Requests.jsx
+++ b/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>
   );
 };
diff --git a/src/assets/dummy-pdf.pdf b/src/assets/dummy-pdf.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..8da27b526712a5e417279d7dd2fd7e913b45d47e
GIT binary patch
literal 7478
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
E2LO^uS^xk5

literal 0
HcmV?d00001