From 995f4a443cd6068ecd1f40b85b1cef66341a759f Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Fri, 27 Sep 2024 13:23:46 +0530
Subject: [PATCH] table pending

---
 .../OptiFiiExpense/ReimbursementRequest.jsx   |  33 ++++-
 .../ReimbursementRequestView.jsx              | 140 ++++++++++++++++++
 src/Routes/Routes.js                          |   2 +
 3 files changed, 172 insertions(+), 3 deletions(-)
 create mode 100644 src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx

diff --git a/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx b/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx
index ff4666f..84318c1 100644
--- a/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx
+++ b/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx
@@ -1,15 +1,42 @@
-import { Box } from "@chakra-ui/react";
+import { Box, HStack, Text, VStack } from "@chakra-ui/react";
 import React from "react";
 import MiniHeader from "../../Components/MiniHeader";
+import { MdOutlineNoFood } from "react-icons/md";
 
 const ReimbursementRequest = () => {
   return (
     <Box h={"100%"} p={6}>
-      <MiniHeader
+      {/* <MiniHeader
         title={"My Requests"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
         backButton={true}
-      />
+      /> */}
+
+    <Box bg={"#fff"} p={4} rounded={"md"}>
+    <HStack justifyContent={"space-between"}>
+        <HStack alignItems={"start"} spacing={4}>
+          <Box bg={"#d7d3fb"} p={2} rounded={"full"}>
+            <MdOutlineNoFood color="#3725EA" />
+          </Box>
+          <Box>
+            <Text color={"#667085"} fontSize={"sm"} mb={1}>
+              Food
+            </Text>
+            <Text color={"#667085"} fontSize={"xs"} mb={0}>
+              Created by - Reethik Thota
+            </Text>
+          </Box>
+        </HStack>
+        <Box>
+          <Text color={"#667085"} fontSize={"xs"} mb={1}>
+            Created by - Reethik Thota
+          </Text>
+          <Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
+            ₹ 50,000
+          </Text>
+        </Box>
+      </HStack>
+    </Box>
     </Box>
   );
 };
diff --git a/src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx b/src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx
new file mode 100644
index 0000000..0b30343
--- /dev/null
+++ b/src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx
@@ -0,0 +1,140 @@
+import { Badge, Box, HStack, Image, Text, VStack } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import { MdOutlineNoFood } from "react-icons/md";
+import { IoMdCheckmark } from "react-icons/io";
+
+const ReimbursementRequestView = () => {
+    return (
+        <Box h={"100%"} p={6}>
+            {/* <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      /> */}
+
+
+
+
+            <Box bg={"#fff"} p={4} rounded={"md"}>
+
+                <HStack width={"100%"} mb={8}>
+                    <Box bg={"#e5f6eb"} border={"1px solid #00A438"} px={4} py={1} rounded={"md"} h={14} flex={1}>
+                        <HStack>
+                            <IoMdCheckmark color="#00A438" />
+                            <Text color={"#00A438"} fontSize={"sm"} mb={1} fontWeight={500}>
+                                Approved
+                            </Text>
+                        </HStack>
+                        <Text color={"#667085"} fontSize={"xs"} fontWeight={400} mb={0}>
+                            By Sr. Manager
+                        </Text>
+                    </Box>
+                    <HStack bg={"#00A438"} px={4} py={1} rounded={"md"} h={14} justifyContent={"start"} flex={1}>
+                        <Text color={"#fff"} fontSize={"sm"} mb={0} fontWeight={400}>
+                            In progress
+                        </Text>
+                    </HStack>
+                    <VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
+                        <Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
+                            Pending
+                        </Text>
+                        <Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
+                            By Sr. Manager
+                        </Text>
+                    </VStack>
+                    <VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
+                        <Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
+                            Pending
+                        </Text>
+                        <Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
+                            By Sr. Manager
+                        </Text>
+                    </VStack>
+                    <VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
+                        <Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
+                            Pending
+                        </Text>
+                        <Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
+                            By Sr. Manager
+                        </Text>
+                    </VStack>
+
+                </HStack>
+
+
+
+                <HStack justifyContent={"space-between"} mb={6}>
+                    <Box>
+                        <Text color={"#667085"} fontSize={"xs"} mb={1}>
+                            Report number : 1254587841
+                        </Text>
+                        <Text color={"#252C32"} fontSize={"sm"} mb={0} fontWeight={500}>
+                            Reimbursement report 2024
+                        </Text>
+                    </Box>
+                    <Box >
+                        <Text color={"#667085"} fontSize={"xs"} mb={1}>
+                            Amount to be reimbursed
+                        </Text>
+                        <Text color={"#252C32"} fontSize={"sm"} fontWeight={500} mb={0}>
+                            ₹ 50,000
+                        </Text>
+                    </Box>
+                </HStack>
+
+
+                <HStack justifyContent={"space-between"}>
+                    <Box>
+                        <Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
+                            Submitted by
+                        </Text>
+                        <HStack mb={4} alignItems={"start"}>
+                            <Image
+                                borderRadius='full'
+                                boxSize='40px'
+                                src='https://bit.ly/dan-abramov'
+                                alt='Dan Abramov'
+                            />
+                            <Box>
+                                <Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
+                                    Pooja Shah
+                                </Text>
+                                <Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
+                                    poojashah @wdipl.com
+                                </Text>
+                            </Box>
+                        </HStack>
+
+                        <Text color={"#252C32"} fontSize={"xs"} mb={0} fontWeight={400}>
+                            Duration - 10 June - 28 June
+                        </Text>
+                    </Box>
+                    <Box textAlign={"end"}>
+                        <Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
+                            Pending approval
+                        </Text>
+                        <HStack mb={4} alignItems={"start"} >
+                            <Box>
+                                <Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
+                                    Manav sain
+                                </Text>
+                                <Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
+                                    manavsain@wdipl.com
+                                </Text>
+                            </Box>
+                            <Image
+                                borderRadius='full'
+                                boxSize='40px'
+                                src='https://bit.ly/dan-abramov'
+                                alt='Dan Abramov'
+                            />
+                        </HStack>
+                    </Box>
+                </HStack>
+            </Box>
+        </Box>
+    );
+};
+
+export default ReimbursementRequestView;
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index 972b6de..340580f 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -20,6 +20,7 @@ import GiftCard from "../Pages/OptiFiiGifsAndVouchers/GiftCard";
 import ApplicationStatus from "../Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus";
 import DigitalApplicationStatus from "../Pages/OptiFiiGifsAndVouchers/id/DigitalApplication";
 import GiftDashboard from "../Pages/OptiFiiGifsAndVouchers/GiftDashboard";
+import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
 export const RouteLink = [
   { path: "/", Component: Dashbaord },
   { path: "/expenses", Component: Expenses },
@@ -30,6 +31,7 @@ export const RouteLink = [
   { path: "/Manage-roles", Component: ManageDepartmentAndRoles },
   { path: "/wallet-program", Component: WalletProgram },
   { path: "/reimbursement-request", Component: ReimbursementRequest },
+  { path: "/reimbursement-request-view", Component: ReimbursementRequestView },
   { path: "/advance-expense-request", Component: AdvanceExpenseRequest },
   { path: "/optiFii-benefit", Component: OptiFiiTaxBenefit },
   { path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },