Merge branch 'dev' of http://git.wdipl.com/Siddhesh.More/optifii-corporate into dev

src/Components/Cards/BlueCard.jsx

@@ -0,0 +1,41 @@
+import { Box, Stack, Text, } from '@chakra-ui/react'
+import React from 'react'
+import { MdGroups } from 'react-icons/md'
+
+function BlueCard() {
+    return (
+        <Box
+            backgroundColor={item.backgroundColor}
+            borderRadius="xl"
+        >
+            <Box bg="#fff" borderRadius="xl" p={4} h="115px">
+                <Stack direction={["column", "row"]} color={item.backgroundColor}>
+                    <Text as="span">
+                        <MdGroups />
+                    </Text>
+                    <Text fontSize="xs" mb={0} fontWeight={500}>
+                        {item.title}
+                    </Text>
+                </Stack>
+                <Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
+                    {item.count}
+                </Text>
+            </Box>
+            <Stack
+                direction={["column", "row"]}
+                color="#fff"
+                justifyContent="center"
+                alignItems="center"
+            >
+                <Text as="span">
+                    <MdGroups />
+                </Text>
+                <Text fontSize="sm" m={0} py={2}>
+                    <Link mb={0}>{item.linkText}</Link>
+                </Text>
+            </Stack>
+        </Box>
+    )
+}
+
+export default BlueCard

src/Components/CutomBreadcrumb.jsx

@@ -46,7 +46,9 @@ const CustomBreadcrumb = () => {
         breadcrumbs.push({ path: currentPath, title: menuItem.title });
       } else {
         // For nested paths without direct match, create a custom breadcrumb title
-        const customTitle = part.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+        const customTitle = part
+          .replace(/-/g, " ")
+          .replace(/\b\w/g, (c) => c.toUpperCase());
         breadcrumbs.push({ path: currentPath, title: customTitle });
       }
     });
@@ -68,7 +70,7 @@ const CustomBreadcrumb = () => {
       mt={1}
       borderBottom={"1px dashed #DEE2E6"}
     >
-      <Button
+      {/* <Button
         cursor={"pointer"}
         variant="ghost"
         pt={1.5}
@@ -79,29 +81,28 @@ const CustomBreadcrumb = () => {
         size={"xs"}
         as={"span"}
       >
-        Home
+        Dashboard
-      </Button>
+      </Button> */}
       {breadcrumbs.map((item, index) => (
         <React.Fragment key={index}>
-          
-          <Text size={"md"}  as={"span"}>
-          {/* <MinusIcon fontStyle={4} color={"#1A202C"}/> */}
-          /
-          </Text>
           <Link to={item.path}>
-          <Button
+            <Button
-            cursor={"pointer"}
+              cursor={"pointer"}
-            variant="ghost"
+              variant="ghost"
-            pt={0.5}
+              pt={0.5}
-            pb={0.5}
+              pb={0.5}
-            ps={2}
+              ps={2}
-            pe={2}
+              pe={2}
-            rounded={"full"}
+              rounded={"full"}
-            size={"xs"}
+              size={"xs"}
-            as={"span"}
+              as={"span"}
-          >
+            >
-            {item.title}
+              {item.title}
-          </Button></Link>
+            </Button>
+          </Link>
+          <Text size={"md"} as={"span"}>
+            /
+          </Text>
         </React.Fragment>
       ))}
     </Box>

src/Pages/Onboarding/Header.jsx

@@ -20,7 +20,7 @@ const Header = () => {
                             {navLinks.map((link, index) => (
                                 <Link
                                     key={index}
-                                    href={`#${link.replace(/\s+/g, '-').toLowerCase()}`} // Links are placeholders
+                                    href={`#${link.replace(/\s+/g, '-').toLowerCase()}`} 
                                     color={"#000000"}
                                     fontWeight="500"
                                     fontSize="sm"

src/Pages/Onboarding/OnboardingFrame.jsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import {
     Box, Text, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps,
-    StepIcon, StepTitle, Divider, Button, HStack, IconButton, Flex,
+     StepTitle, Divider, Button, HStack, IconButton, Flex,
     useDisclosure
 } from '@chakra-ui/react';
 import Header from './Header';
-import onboarding_bg from "../../assets/onboarding_bg.svg";
+import onboarding_bg from "../../assets/onboarding_bg.webp";
 import { ArrowBackIcon, ArrowForwardIcon, CheckIcon, Icon } from '@chakra-ui/icons';
 import { FaUser, FaBuilding, FaClipboard, FaUserTie, FaBoxOpen } from 'react-icons/fa';
 import OnboardingYourDetails from './OnboardingYourDetails';
@@ -97,7 +97,7 @@ const handleNext = () => {
                 <Header />
                 <Box
                     w={'100%'}
-                    minH={'92vh'}
+                    minH="calc(100vh - 62px)"   
                     bgImage={`url(${onboarding_bg})`}
                     bgSize={'cover'}
                     bgPosition={'center'}
@@ -128,7 +128,21 @@ const handleNext = () => {
                         py={6}
                         px={4}
                         borderRadius={'md'}
-                        minH={"82vh"}
+                        maxH={"82.9vh"}
+                        overflowY={"auto"}
+                        sx={{
+                            /* Custom scrollbar styling */
+                            '&::-webkit-scrollbar': {
+                              width: '6px',
+                            },
+                            '&::-webkit-scrollbar-thumb': {
+                              backgroundColor: '#6311CB',
+                              borderRadius: '6px',
+                            },
+                            '&::-webkit-scrollbar-track': {
+                              backgroundColor: '#F6F0FF',
+                            },
+                          }}
                     >
                         <Box>
                             <Text color={'#49475A'} fontWeight={500} fontSize={'sm'}>
@@ -141,6 +155,7 @@ const handleNext = () => {
                                     orientation="vertical"
                                     h="400"
                                     gap="0"
+                                    my={"5"}
                                     sx={{ '--stepper-accent-color': '#6311CB' }}
                                 >
                                     {steps.map((step, index) => (
@@ -184,7 +199,21 @@ const handleNext = () => {
                         my={5}
                         boxShadow={'md'}
                         zIndex={2}
-                        minH={"82vh"}
+                        maxH="calc(82vh - 0px)"
+                        overflowY={"auto"}
+                        sx={{
+                            /* Custom scrollbar styling */
+                            '&::-webkit-scrollbar': {
+                              width: '6px',
+                            },
+                            '&::-webkit-scrollbar-thumb': {
+                              backgroundColor: '#6311CB',
+                              borderRadius: '6px',
+                            },
+                            '&::-webkit-scrollbar-track': {
+                              backgroundColor: '#F6F0FF',
+                            },
+                          }}
                     >
                         <HStack  justifyContent={"end"}>
 

src/Pages/Onboarding/OnboardingSelectPackageModalChild.jsx

@@ -27,6 +27,8 @@ const OnboardingSelectPackageModalChild = ({isOpen,onClose}) => {
         }, 3000);
       };
     return (
+
+        
         <>
             <Modal isOpen={isOpen} onClose={onClose} isCentered>
                 <ModalOverlay />

src/Pages/OptiFiiExpense/Grid/ActiveCards.jsx

@@ -0,0 +1,183 @@
+import { Box, Button, Image, Text } from "@chakra-ui/react";
+import React from "react";
+import Food from "../../../assets/icons/Food.png";
+import Fuel from "../../../assets/icons/Fuel.png";
+import Gift from "../../../assets/icons/gift.png";
+import Telecom from "../../../assets/icons/telecom.png";
+import { SlOptionsVertical } from "react-icons/sl";
+
+const data = [
+  {
+    icon: Food,
+    name: "Food",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "Active",
+  },
+  {
+    icon: Fuel,
+    name: "Fuel",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "Active",
+  },
+  {
+    icon: Gift,
+    name: "Gift",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "Active",
+  },
+  {
+    icon: Telecom,
+    name: "Telecom",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "Active",
+  },
+];
+
+const ActiveCards = () => {
+  return (
+    <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
+      {data.map((item) => {
+        return (
+          <Box
+            display="flex"
+            flexDirection="column"
+            key={item.name}
+            p={2}
+            bg="white"
+            justifyContent="space-between"
+            alignItems="flex-start"
+            bgColor="#3725EA0D"
+            boxShadow="md"
+            gap={2}
+            w="100%"
+          >
+            <Box
+              display="flex"
+              flexDirection="row"
+              alignItems="flex-start"
+              gap={2}
+              justifyContent="space-between"
+              w="100%"
+            >
+              <Image src={item?.icon} h="50.75px" />
+              <Text
+                // h="28.75px"
+                display="flex"
+                flexDirection="column"
+                alignItems="flex-start"
+                fontSize="small"
+                w="100%"
+                fontWeight="bold"
+              >
+                {item?.name}
+                <Text fontSize="x-small" fontWeight={400}>
+                  {item?.subtitle}
+                </Text>
+                <Button
+                  fontSize="xx-small"
+                  color="#00A438"
+                  bgColor="#00A43814"
+                  border="0.5px solid #00A438"
+                  h="23px"
+                >
+                  {item?.Status}
+                </Button>
+              </Text>
+
+              <Button bgColor="#3725EA0D" borderRadius="50%">
+                <SlOptionsVertical color="#3725EA" />
+              </Button>
+            </Box>
+
+            <Box w="100%" border={"0.5px solid #3725EA"} />
+            <Box w="100%" px={3}>
+              <Box
+                display="flex"
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+                gap={2}
+                w="100%"
+              >
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Wallet type
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.walletType}
+                  </Text>
+                </Box>
+
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Department
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.department}
+                  </Text>
+                </Box>
+              </Box>
+              <Box w="100%" display="flex" flexDirection="column">
+                <Text fontSize="x-small" color="#848B99">
+                  Wallet amount
+                </Text>
+                <Text fontSize="x-small" fontWeight="bold">
+                  {item?.walletamount}
+                </Text>
+              </Box>
+
+              <Box
+                display="flex"
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+                gap={2}
+                w="100%"
+              >
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Created by
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.CreatedBy}
+                  </Text>
+                </Box>
+
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Approved by
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.ApprovedBy}
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default ActiveCards;

src/Pages/OptiFiiExpense/Grid/Decline.jsx

@@ -0,0 +1,183 @@
+import { Box, Button, Image, Text } from "@chakra-ui/react";
+import React from "react";
+import Food from "../../../assets/icons/Food.png";
+import Fuel from "../../../assets/icons/Fuel.png";
+import Gift from "../../../assets/icons/gift.png";
+import Telecom from "../../../assets/icons/telecom.png";
+import { SlOptionsVertical } from "react-icons/sl";
+
+const data = [
+  {
+    icon: Food,
+    name: "Food",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "DECLINED",
+  },
+  {
+    icon: Fuel,
+    name: "Fuel",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "DECLINED",
+  },
+  {
+    icon: Gift,
+    name: "Gift",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "DECLINED",
+  },
+  {
+    icon: Telecom,
+    name: "Telecom",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "DECLINED",
+  },
+];
+
+const Decline = () => {
+  return (
+    <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
+      {data.map((item) => {
+        return (
+          <Box
+            display="flex"
+            flexDirection="column"
+            key={item.name}
+            p={2}
+            bg="white"
+            justifyContent="space-between"
+            alignItems="flex-start"
+            bgColor="#3725EA0D"
+            boxShadow="md"
+            gap={2}
+            w="100%"
+          >
+            <Box
+              display="flex"
+              flexDirection="row"
+              alignItems="flex-start"
+              gap={2}
+              justifyContent="space-between"
+              w="100%"
+            >
+              <Image src={item?.icon} h="50.75px" />
+              <Text
+                // h="28.75px"
+                display="flex"
+                flexDirection="column"
+                alignItems="flex-start"
+                fontSize="small"
+                w="100%"
+                fontWeight="bold"
+              >
+                {item?.name}
+                <Text fontSize="x-small" fontWeight={400}>
+                  {item?.subtitle}
+                </Text>
+                <Button
+                  fontSize="xx-small"
+                  color="#EE1B24"
+                  bgColor="#00A43814"
+                  border="0.5px solid #EE1B24"
+                  h="23px"
+                >
+                  {item?.Status}
+                </Button>
+              </Text>
+
+             <Button bgColor="#3725EA0D" borderRadius="50%">
+             <SlOptionsVertical color="#3725EA" />
+             </Button>
+            </Box>
+
+            <Box w="100%" border={"0.5px solid #3725EA"} />
+            <Box w="100%" px={3}>
+              <Box
+                display="flex"
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+                gap={2}
+                w="100%"
+              >
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Wallet type
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.walletType}
+                  </Text>
+                </Box>
+
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Department
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.department}
+                  </Text>
+                </Box>
+              </Box>
+              <Box w="100%" display="flex" flexDirection="column">
+                <Text fontSize="x-small" color="#848B99">
+                  Wallet amount
+                </Text>
+                <Text fontSize="x-small" fontWeight="bold">
+                  {item?.walletamount}
+                </Text>
+              </Box>
+
+              <Box
+                display="flex"
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+                gap={2}
+                w="100%"
+              >
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Created by
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.CreatedBy}
+                  </Text>
+                </Box>
+
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Approved by
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.ApprovedBy}
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default Decline;

src/Pages/OptiFiiExpense/Grid/PendingApproval.jsx

@@ -0,0 +1,185 @@
+import { Box, Button, Image, Text } from "@chakra-ui/react";
+import React from "react";
+import Food from "../../../assets/icons/Food.png";
+import Fuel from "../../../assets/icons/Fuel.png";
+import Gift from "../../../assets/icons/gift.png";
+import Telecom from "../../../assets/icons/telecom.png";
+import { SlOptionsVertical } from "react-icons/sl";
+
+const data = [
+  {
+    icon: Food,
+    name: "Food",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "PENDING FOR APPROVAL",
+  },
+  {
+    icon: Fuel,
+    name: "Fuel",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "PENDING FOR APPROVAL",
+  },
+  {
+    icon: Gift,
+    name: "Gift",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "PENDING FOR APPROVAL",
+  },
+  {
+    icon: Telecom,
+    name: "Telecom",
+    subtitle: "Created on 12 June 2024",
+    walletType: "Prefilled",
+    department: "Sales",
+    walletamount: "₹ 50,000",
+    CreatedBy: "Kartikey Gautam",
+    ApprovedBy: "Manav Sain",
+    Status: "PENDING FOR APPROVAL",
+  },
+];
+
+const PendingApproval = () => {
+  return (
+    <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
+      {data.map((item) => {
+        return (
+          <Box
+            display="flex"
+            flexDirection="column"
+            key={item.name}
+            p={2}
+            bg="white"
+            justifyContent="space-between"
+            alignItems="flex-start"
+            bgColor="#3725EA0D"
+            boxShadow="md"
+            gap={2}
+            w="100%"
+          >
+            <Box
+              display="flex"
+              flexDirection="row"
+              alignItems="flex-start"
+              gap={2}
+              justifyContent="space-between"
+              w="100%"
+            >
+              <Image src={item?.icon} h="50.75px" />
+              <Text
+                // h="28.75px"
+                display="flex"
+                flexDirection="column"
+                alignItems="flex-start"
+                fontSize="small"
+                w="100%"
+                fontWeight="bold"
+              >
+                {item?.name}
+                <Text fontSize="x-small" fontWeight={400}>
+                  {item?.subtitle}
+                </Text>
+                <Button
+                  fontSize="xx-small"
+                  color="#E0BC01"
+                  bgColor="#E0BC0114"
+                  border="0.5px solid #E0BC01"
+                  h="23px"
+                  w="135px"
+                  p={2}
+                >
+                  {item?.Status}
+                </Button>
+              </Text>
+
+              <Button bgColor="#3725EA0D" borderRadius="50%">
+                <SlOptionsVertical color="#3725EA" />
+              </Button>
+            </Box>
+
+            <Box w="100%" border={"0.5px solid #3725EA"} />
+            <Box w="100%" px={3}>
+              <Box
+                display="flex"
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+                gap={2}
+                w="100%"
+              >
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Wallet type
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.walletType}
+                  </Text>
+                </Box>
+
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Department
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.department}
+                  </Text>
+                </Box>
+              </Box>
+              <Box w="100%" display="flex" flexDirection="column">
+                <Text fontSize="x-small" color="#848B99">
+                  Wallet amount
+                </Text>
+                <Text fontSize="x-small" fontWeight="bold">
+                  {item?.walletamount}
+                </Text>
+              </Box>
+
+              <Box
+                display="flex"
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+                gap={2}
+                w="100%"
+              >
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Created by
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.CreatedBy}
+                  </Text>
+                </Box>
+
+                <Box display="flex" flexDirection="column">
+                  <Text fontSize="x-small" color="#848B99">
+                    Approved by
+                  </Text>
+                  <Text fontSize="x-small" fontWeight="bold">
+                    {item?.ApprovedBy}
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default PendingApproval;

src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx

@@ -220,6 +220,8 @@ const OptiFiiExpenseDashboard = () => {
           </GridItem>
         ))}
       </Grid>
+
+      
       <Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4}>
         {gridItemsData.map((item, index) => (
           <GridItem key={index} backgroundColor="#fff" borderRadius="xl">

src/Pages/OptiFiiExpense/ReimbursementRequest.jsx

@@ -1,15 +1,154 @@
-import { Box } from "@chakra-ui/react";
+import {
-import React from "react";
+  Box,
+  Button,
+  HStack,
+  Icon,
+  Checkbox,
+  Tag,
+  TagLabel,
+  Text,
+  Image,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+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 { MdOutlineNoFood } from "react-icons/md";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router-dom";
+
 
 const ReimbursementRequest = () => {
+
+
+  const navigate = useNavigate();
+  const { employees } = 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 = [
+    "Select",
+    "Sr. No",
+    "Name",
+    "Status",
+    "Email Address",
+    "Mobile number",
+    "Grade",
+    "Department",
+    "Role",
+    "Action",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = employees.map((item, index) => ({
+    "Sr. No": (
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+      >
+        {index + 1}
+      </Text>
+    ),
+    "Name": item?.Name,
+    "Email Address": item?.emailAddress,
+    "Mobile number": item?.mobileNumber,
+    Grade: item?.Grade,
+    Department: item?.Department,
+    Role: item?.Role,
+    Status: (
+      <HStack>
+        <Image
+          borderRadius='full'
+          boxSize='40px'
+          src='https://bit.ly/dan-abramov'
+          alt='Dan Abramov'
+        />
+        <Text color={"#667085"} fontSize={"xs"} mb={1}>
+          Pooja Shah
+        </Text>
+      </HStack>
+    ),
+    Action: (
+
+      <Button
+        _hover={{ color: "gray.900", bg: "gray.300" }}
+        transition={"0.3s"}
+        onClick={() => navigate("/reimbursement-request-view")}
+        size={"xs"}
+        bg={"#6311CB"}
+        py={1}
+        fontWeight={400}
+        px={3}
+        color="#fff"
+      >
+        View
+      </Button>
+    ),
+  }));
+
   return (
-    <Box h={"100%"} p={6}>
+    <Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
-      <MiniHeader
+      {/* <MiniHeader
         title={"My Requests"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
         backButton={true}
-      />
+      /> */}
+
+      <Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"} mb={4}>
+        <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 bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          showRadioButton={true}
+        />
+      </Box>
     </Box>
   );
 };

src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx

@@ -0,0 +1,275 @@
+import {
+    Box,
+    Button,
+    HStack,
+    VStack,
+    Icon,
+    Checkbox,
+    Tag,
+    TagLabel,
+    Text,
+    Image,
+    useDisclosure,
+    Alert,
+    CloseButton,
+    AlertDescription,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { LiaFileInvoiceSolid } from "react-icons/lia";
+import { PiReceipt } from "react-icons/pi";
+import { MdOutlineNoFood } from "react-icons/md";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { IoMdCheckmark } from "react-icons/io";
+import { RxCross2 } from "react-icons/rx";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton"
+import SecondaryButton from "../../Components/Buttons/SecondaryButton"
+
+const ReimbursementRequestView = () => {
+
+    const [alertStatus, setAlertStatus] = useState(null); 
+
+    const handleApprove = () => {
+        setAlertStatus('success');
+    };
+
+    const handleReject = () => {
+        setAlertStatus('error');
+    };
+
+    const { employees } = 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 = [
+        "Select",
+        "Sr. No",
+        "Name",
+        "Email Address",
+        "Mobile number",
+        "Grade",
+        "Department",
+        "Role",
+        "Action",
+    ];
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = employees.map((item, index) => ({
+        "Sr. No": (
+            <Text
+                as={"span"}
+                display={"flex"}
+                gap={2}
+                alignItems={"center"}
+                fontSize={"xs"}
+            >
+                {index + 1}
+            </Text>
+        ),
+        Name: item?.Name,
+        "Email Address": item?.emailAddress,
+        "Mobile number": item?.mobileNumber,
+        Grade: item?.Grade,
+        Department: item?.Department,
+        Role: item?.Role,
+        Action: (
+            <HStack
+            >
+                <Box p={2} bg={"#ebe0f8"} rounded={"full"}>
+                    <LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
+                </Box>
+                <Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
+                    Invoice243
+                </Text>
+            </HStack>
+        ),
+    }));
+
+    return (
+
+
+
+
+
+        <Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
+            {/* <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      /> */}
+            {alertStatus === 'success' && (
+                <Alert status="success" bg="#6311CB" color="#fff" rounded={"md"} mb={4}>
+                    <Box>
+                        <HStack>
+                            <IoMdCheckmark size={16} />
+                            <Text fontSize="xs" mb={0} fontWeight={500}>
+                                Approved by giftryt
+                            </Text>
+                        </HStack>
+                    </Box>
+                </Alert>
+            )}
+
+            {alertStatus === 'error' && (
+                <Alert status="error" bg="#EE1B24" color="#fff" rounded={"md"} mb={4}>
+                    <Box>
+                        <HStack>
+                            <RxCross2 size={16} />
+                            <Text fontSize="xs" mb={0} fontWeight={500}>
+                                Rejected by giftryt
+                            </Text>
+                        </HStack>
+                    </Box>
+                </Alert>
+            )}
+            <Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"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"} mb={6}>
+                    <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>
+
+                <NormalTable
+                    emptyMessage={`We don't have any Sponers `}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                    showRadioButton={true}
+                />
+
+                <HStack justifyContent={"end"} my={4} spacing={4}>
+                    <SecondaryButton title="Reject" onClick={handleReject} />
+                    <PrimaryButton title="Approve" onClick={handleApprove} />
+                </HStack>
+
+            </Box>
+
+        </Box>
+    );
+};
+
+export default ReimbursementRequestView;

src/Pages/OptiFiiExpense/WalletProgram.jsx

@@ -1,15 +1,370 @@
-import { Box } from "@chakra-ui/react";
+import {
-import React from "react";
+  Box,
+  Button,
+  Divider,
+  HStack,
+  Icon,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Radio,
+  Tag,
+  TagLabel,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { CiBoxList } from "react-icons/ci";
+import { BsFillGridFill } from "react-icons/bs";
+import {
+  AddIcon,
+  CalendarIcon,
+  ChevronDownIcon,
+  EmailIcon,
+  SearchIcon,
+  ViewIcon,
+} from "@chakra-ui/icons";
+import {
+  MdFilterList,
+  MdNotificationsNone,
+  MdOutlineHeadsetMic,
+} from "react-icons/md";
+import { MdOutlineUnarchive } from "react-icons/md";
+
+import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiReceipt } from "react-icons/pi";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { Link, NavLink } from "react-router-dom";
+import backFund from "../../assets/backfund.svg";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import SecondaryButton from "../../Components/Buttons/SecondaryButton";
+import { LuListFilter } from "react-icons/lu";
+import { BsFilterRight } from "react-icons/bs";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+import ActiveCards from "./Grid/ActiveCards";
+import PendingApproval from "./Grid/PendingApproval";
+import Decline from "./Grid/Decline";
+import {
+  Tabs,
+  TabList,
+  Tab,
+  TabIndicator,
+  TabPanels,
+  TabPanel,
+} from "@chakra-ui/react";
 
 const WalletProgram = () => {
+  const { walletProgram } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [showGrid, setShowGird] = useState(true);
+
+  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 = [
+    "ID",
+    "Wallet Name",
+    "Wallet type",
+    "Department",
+    "Status",
+    "Wallet amount",
+    "Created on",
+    "Created by",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+  walletProgram.map((item) => console.log(item));
+  const extractedArray = walletProgram.map((item, index) => ({
+    ID: (
+      // <Radio colorScheme="purple" value="1">
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+      >
+        {item?.id}
+      </Text>
+      // </Radio>
+    ),
+    "Wallet Name": (
+      <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
+        <Image
+          h="23px"
+          src={item.walletName[0]?.icon}
+          alt={item.walletName[0]?.icon}
+        />
+
+        {/* <Text fontSize={"xs"}></Text> */}
+        {item?.walletName[0]?.name}
+      </Box>
+    ),
+    "Wallet type": item?.WalletType,
+    Department: item?.mobileNumber,
+    Grade: item?.Grade,
+    Department: item?.department,
+    Role: item?.Role,
+    Status: (
+      <Tag
+        my={1}
+        size={"sm"}
+        borderRadius="full"
+        bgColor={
+          item?.status === "Active"
+            ? "#00A43814"
+            : item?.status === "Inactive"
+            ? "#C33FAD21"
+            : "#E0BC0114"
+        }
+        color={
+          item?.status === "Active"
+            ? "#00A438"
+            : item?.status === "Inactive"
+            ? "#C33FAD"
+            : "#E0BC01"
+        }
+        p={1}
+        px={3}
+      >
+        <TagLabel>{item?.status}</TagLabel>
+      </Tag>
+    ),
+    "Wallet amount": item?.WalletAmount,
+    "Created on": item?.CreatedOn,
+    "Created by": item?.CreatedBy,
+  }));
+
   return (
-    <Box h={"100%"} p={6}>
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
-      <MiniHeader
+      <Box
-        title={"My Requests"}
+        rounded={"xl"}
-        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        py={3}
-        backButton={true}
+        // pb={0}
-      />
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <Box
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            w={"100%"}
+          >
+            <InputGroup width={300} size="sm" ml={5}>
+              <InputLeftElement pointerEvents="none">
+                <SearchIcon color="gray.300" />
+              </InputLeftElement>
+              <Input
+                type="search"
+                placeholder="Type to search..."
+                rounded="md"
+                focusBorderColor="#3725EA"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </InputGroup>
+            <Box>
+              <Button
+                as={Button}
+                leftIcon={<MdOutlineUnarchive />}
+                // rightIcon={<ChevronDownIcon />}
+                fontSize={"xs"}
+                colorScheme="gray"
+                color={"gray.700"}
+                variant="outline"
+                size={"sm"}
+                me={2}
+              >
+                View achieve
+              </Button>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<FaArrowUpFromBracket />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  colorScheme="gray"
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Export
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>
+                    <Image src={pdfIcon} me={2} /> Export as PDF
+                  </MenuItem>
+                  <MenuItem fontSize={"sm"}>
+                    <Image src={ExcelIcon} me={2} /> Export as Excel
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+              <NavLink to="/wallet-program/create-wallet">
+              <PrimaryButton leftIcon={<AddIcon />} title={"Create wallet"} />
+              </NavLink>
+            </Box>
+          </Box>
+          <Divider />
+          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+            <Box>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<BsFilterRight fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Sort
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+            <Box>
+              {/* <Link to={"#"} style={{ marginRight: "8px" }}>
+                <SecondaryButton
+                  leftIcon={<Image me={2} src={backFund} w={"17px"} />}
+                  title={"Pull back funds"}
+                />
+              </Link> */}
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<LuListFilter fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Filter
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+
+              <Button
+                bgColor="#3725EA30"
+                fontWeight={600}
+                fontSize="small"
+                color="#3725EA"
+                onClick={() => setShowGird(!showGrid)}
+                leftIcon={<CiBoxList color="#3725EA" fontSize={"15px"} />}
+              >
+                {showGrid && "List"}
+              </Button>
+
+              <Button
+                ml="8px"
+                bgColor="#3725EA30"
+                fontWeight={600}
+                fontSize="small"
+                color="#3725EA"
+                onClick={() => setShowGird(!showGrid)}
+              >
+                <BsFillGridFill color="#3725EA" fontSize={"15px"} />{" "}
+                {!showGrid && "Gird"}
+              </Button>
+            </Box>
+          </HStack>
+        </VStack>
+        {showGrid ? (
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={extractedArray}
+            isLoading={isLoading}
+          />
+        ) : (
+          <Box>
+            <Tabs position="relative" variant="unstyled">
+              <TabList color="#B0B0B0">
+                <Tab
+                  fontSize="small"
+                  _selected={{
+                    color: "#6311CB",
+                    fontWeight: "medium",
+                  }}
+                >
+                  Active wallets
+                </Tab>
+                <Tab
+                  fontSize="small"
+                  _selected={{
+                    color: "#6311CB",
+                    fontWeight: "medium",
+                  }}
+                >
+                  Pending for approval
+                </Tab>
+                <Tab
+                  fontSize="small"
+                  _selected={{
+                    color: "#6311CB",
+                    fontWeight: "medium",
+                  }}
+                >
+                  Declined wallets
+                </Tab>
+              </TabList>
+              <TabIndicator
+                mt="-1.5px"
+                height="2px"
+                bg="blue.500"
+                borderRadius="1px"
+                color="red"
+              />
+              <TabPanels>
+                <TabPanel><ActiveCards/></TabPanel>
+                <TabPanel><PendingApproval/></TabPanel>
+                <TabPanel><Decline/></TabPanel>
+              </TabPanels>
+            </Tabs>
+          </Box>
+        )}
+      </Box>
     </Box>
   );
 };

src/Pages/OptiFiiExpense/wallet/CreateWallet.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import {
+  Box,
+  Step,
+  StepDescription,
+  StepIcon,
+  StepIndicator,
+  StepNumber,
+  StepSeparator,
+  StepStatus,
+  StepTitle,
+  Stepper,
+  useSteps,
+} from "@chakra-ui/react";
+
+const steps = [
+  { title: "Wallet policy", description: "Wallet policy" },
+  { title: "Approval policy", description: "Approval policy" },
+  { title: "Submission policy", description: "Submission policy" },
+  { title: "Define budget", description: "Define budget" },
+];
+
+const CreateWallet = () => {
+  const { activeStep } = useSteps({
+    index: 1,
+    count: steps.length,
+  });
+  return (
+    <Box>
+      <Stepper index={activeStep}>
+        {steps.map((step, index) => (
+          <Step key={index}>
+            <StepIndicator>
+              <StepStatus
+                complete={<StepIcon />}
+                incomplete={<StepNumber />}
+                active={<StepNumber 
+                />}
+              />
+            </StepIndicator>
+
+            <Box flexShrink="0">
+              <StepTitle>{step.title}</StepTitle>
+              <StepDescription>{step.description}</StepDescription>
+            </Box>
+
+            <StepSeparator />
+          </Step>
+        ))}
+      </Stepper>
+    </Box>
+  );
+};
+
+export default CreateWallet;

src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx

@@ -17,6 +17,7 @@ import {
   Tag,
   TagLabel,
   Text,
+  useDisclosure,
   VStack,
 } from "@chakra-ui/react";
 import {
@@ -216,21 +217,11 @@ const GiftCard = () => {
           bgColor="#F9F5FF"
           left="5.9rem"
           boxShadow="md"
+          justifyContent={"center"}
         >
-          <Box
+            <Text color="#7F56D9" fontSize="xs" mb={0}>
-            display="flex"
+              +{users}
-            flexDirection="row"
-            alignItems="center"
-            pt={1}
-            pr={1}
-          >
-            <Text color="#7F56D9" fontSize="small">
-              +
             </Text>
-            <Text color="#7F56D9" fontSize="small">
-              {users}
-            </Text>
-          </Box>
         </Box>
       </Box>
     ),
@@ -356,14 +347,15 @@ const GiftCard = () => {
     "Sr. no": (
       // <Radio colorScheme="purple" value="1">
       <Checkbox colorScheme="purple">
-        <Text
+       
-          as={"span"}
+          <Text
-          display={"flex"}
+            as={"span"}
-          gap={2}
+            display={"flex"}
-          alignItems={"center"}
+            gap={2}
-          fontSize={"xs"}
+            alignItems={"center"}
-        >
+            fontSize={"xs"}
-          {/* <Icon
+          >
+            {/* <Icon
             as={PiReceipt}
             boxSize={8}
             p={1.5}
@@ -371,11 +363,12 @@ const GiftCard = () => {
             rounded={"full"}
           /> */}
 
-          {item?.id}
+            {item?.id}
-        </Text>
+          </Text>
       </Checkbox>
     ),
     "Order ID": (
+      <NavLink to="/gift-card/digital-application-status">
       <Text
         as={"span"}
         display={"flex"}
@@ -394,6 +387,7 @@ const GiftCard = () => {
 
         {item?.orderid}
       </Text>
+      </NavLink>
     ),
     "Email Address": item?.emailAddress,
     "Date & time": item?.dateTime,
@@ -448,21 +442,11 @@ const GiftCard = () => {
           bgColor="#F9F5FF"
           left="5.9rem"
           boxShadow="md"
+          justifyContent={"center"}
         >
-          <Box
+            <Text color="#7F56D9" fontSize="xs" mb={0}>
-            display="flex"
+              +{users}
-            flexDirection="row"
-            alignItems="center"
-            pt={1}
-            pr={1}
-          >
-            <Text color="#7F56D9" fontSize="small">
-              +
             </Text>
-            <Text color="#7F56D9" fontSize="small">
-              {users}
-            </Text>
-          </Box>
         </Box>
       </Box>
     ),
@@ -547,13 +531,12 @@ const GiftCard = () => {
             bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
             rounded={"full"}
           /> */}
-
           {item?.id}
         </Text>
       </Checkbox>
     ),
     "Order ID": (
-      <NavLink to={"/application-status"}>
+      <NavLink to={"/gift-card/application-status"}>
         <Text
           as={"span"}
           display={"flex"}
@@ -628,21 +611,11 @@ const GiftCard = () => {
           bgColor="#F9F5FF"
           left="5.9rem"
           boxShadow="md"
+          justifyContent={"center"}
         >
-          <Box
+            <Text color="#7F56D9" fontSize="xs" mb={0}>
-            display="flex"
+             +{users}
-            flexDirection="row"
-            alignItems="center"
-            pt={1}
-            pr={1}
-          >
-            <Text color="#7F56D9" fontSize="small">
-              +
             </Text>
-            <Text color="#7F56D9" fontSize="small">
-              {users}
-            </Text>
-          </Box>
         </Box>
       </Box>
     ),

src/Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus.jsx

@@ -223,6 +223,7 @@ const Employees = () => {
   return (
     <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
       <Box
+      x
         rounded={"xl"}
         py={3}
         // pb={0}

src/Pages/OptiFiiGifsAndVouchers/id/DigitalApplication.jsx

@@ -0,0 +1,434 @@
+// import React from "react";
+// import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+// import { Box, Tag, TagLabel, Text } from "@chakra-ui/react";
+
+// const ApplicationStatus = () => {
+//   return (
+//     <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+
+//     </Box>
+//   );
+// };
+
+// export default ApplicationStatus;
+import {
+  Box,
+  Button,
+  Divider,
+  FormControl,
+  FormLabel,
+  HStack,
+  Icon,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Radio,
+  Tag,
+  TagLabel,
+  Text,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import MiniHeader from "../../../Components/MiniHeader";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import NormalTable from "../../../Components/DataTable/NormalTable";
+import {
+  AddIcon,
+  CalendarIcon,
+  ChevronDownIcon,
+  EmailIcon,
+  SearchIcon,
+  ViewIcon,
+} from "@chakra-ui/icons";
+import {
+  MdFilterList,
+  MdNotificationsNone,
+  MdOutlineHeadsetMic,
+} from "react-icons/md";
+import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiReceipt } from "react-icons/pi";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import { Link } from "react-router-dom";
+import backFund from "../../../assets/backfund.svg";
+import PrimaryButton from "../../../Components/Buttons/PrimaryButton";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import SecondaryButton from "../../../Components/Buttons/SecondaryButton";
+import { LuListFilter } from "react-icons/lu";
+import { BsFilterRight } from "react-icons/bs";
+import pdfIcon from "../../../assets/pdfIcon.svg";
+import ExcelIcon from "../../../assets/ExcelIcon.svg";
+import redinfo from "../../../assets/redinfo.png";
+import pooja from "../../../assets/poojaShah.png";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react";
+const DigitalApplicationStatus = () => {
+  const { ApplicationStatus } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [mobileNumber, setMobileNumber] = useState("");
+  const [otp, setOtp] = useState(new Array(4).fill(""));
+  const [selectedAction, setSelectedAction] = useState("");
+  useEffect(() => {
+    setIsLoading(true);
+
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Table Header
+  const tableHeadRow = [
+    "Emp ID",
+    "Name",
+    "Email address/Mobile number",
+    "Member since",
+    "Load Status",
+    "Action",
+  ];
+
+  const handleChange = (e, index) => {
+    const value = e.target.value;
+    if (/^[0-9]$/.test(value)) {
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+
+      if (index < 3 && value) {
+        document.getElementById(`otp-input-${index + 1}`).focus();
+      }
+    }
+  };
+
+  const handleGetOtp = () => {
+    alert("OTP sent to " + mobileNumber);
+  };
+
+  // Extracting the array for the table data
+  const extractedArray = ApplicationStatus.map((item, index) => ({
+    "Emp ID": (
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+      >
+        {item?.EmpID}
+      </Text>
+    ),
+    Name: (
+      <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
+        <Image src={pooja} h="40px" />
+        <Text pt={4} fontSize="xs" fontWeight={400}>
+          {item?.Name}
+        </Text>
+      </Box>
+    ),
+    "Email address/Mobile number": item?.emailAddressMobile,
+    "Member since": item?.MemberSince,
+    "Load Status": (
+      <Box display="flex" flexDirection="column" alignItems="center">
+        {item?.LoadStatus === "10,000" ? (
+          <Text>{item?.LoadStatus}</Text>
+        ) : item?.LoadStatus === "load Card" ? (
+          <Tag
+            my={1}
+            size={"sm"}
+            bgColor="transparent"
+            borderRadius="13.75px"
+            color="#6311CB"
+            p={1}
+            px={3}
+            display="flex"
+            alignItems="center"
+            gap={1}
+          >
+            <Image h="14px" src={redinfo} />
+            <TagLabel textDecoration="underline">{item?.LoadStatus}</TagLabel>
+          </Tag>
+        ) : null}
+      </Box>
+    ),
+    Action: (
+      <Box
+        display={"flex"}
+        gap={1}
+        alignItems={"center"}
+        justifyContent={"center"}
+      >
+        {item?.Action === "Activate card" ? (
+          <Tag
+            my={1}
+            size={"sm"}
+            bgColor="#ECFDF3"
+            borderRadius="13.75px"
+            color="#027A48"
+            p={1}
+            px={3}
+            onClick={() => {
+              setSelectedAction(item?.Action); // Set action to "Activate card"
+              onOpen();
+            }}
+          >
+            <TagLabel>{item?.Action}</TagLabel>
+          </Tag>
+        ) : item?.Action === "Load card" ? (
+          <Tag
+            my={1}
+            size={"sm"}
+            bgColor="#FFE1E0"
+            borderRadius="13.75px"
+            color="#CC4E4B"
+            p={1}
+            px={3}
+            onClick={() => {
+              setSelectedAction(item?.Action); // Set action to "Load card"
+              onOpen();
+            }}
+          >
+            <TagLabel>{item?.Action}</TagLabel>
+          </Tag>
+        ) : null}
+      </Box>
+    ),
+  }));
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+         <Box
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+          px={3}
+        >
+          <Box display="flex" flexDirection="column" alignItems="flex-start">
+            <Text color="#6311CB" fontWeight={400} fontSize="medium">
+              #45152487
+            </Text>
+            <Text color="#8C9198" fontWeight={400} fontSize="small">
+              Order ID
+            </Text>
+          </Box>
+          <Tag
+            my={1}
+            size={"sm"}
+            bgColor="#3725EA26"
+            borderRadius="13.75px"
+            color="#3725EA"
+            p={2}
+            display="flex"
+            alignItems="center"
+            gap={1}
+            fontWeight={500}
+          >
+            <TagLabel>Order accepted</TagLabel>
+          </Tag>
+        </Box>
+      
+      {/* Table and other UI components */}
+      <NormalTable
+        emptyMessage={`We don't have any Sponsors`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+      />
+      
+
+      {/* Modal for Activate or Load card based on action */}
+      <Modal
+        isCentered
+        onClose={onClose}
+        isOpen={isOpen}
+        motionPreset="slideInBottom"
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>
+            {selectedAction === "Load card" ? "Load Card" : "Activate Card"}
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {selectedAction === "Activate card" ? (
+              <Box>
+                <Box
+                  display={"flex"}
+                  flexDirection="row"
+                  alignItems="flex-start"
+                  gap={1}
+                >
+                  <Text color="#A0A0A0" fontWeight={500} fontSize="small">
+                    Order Id :
+                  </Text>
+                  <Text color="#3725EA" fontWeight={500} fontSize="small">
+                    #451245
+                  </Text>
+                </Box>
+
+                <Box>
+                  <FormControl>
+                    <FormLabel fontSize={"sm"} mb={0}>
+                      Mobile Number
+                    </FormLabel>
+                    <Box
+                      border="1px solid #DCDCDC"
+                      display="flex"
+                      w="100%"
+                      flexDirection="row"
+                      alignItems="baseline"
+                      justifyContent="center"
+                      pt={"8px"}
+                      px={"8px"}
+                      borderRadius="10px"
+                    >
+                      <Text fontSize="small">+91</Text>
+                      <Input
+                        pt={1}
+                        placeholder="Please enter your mobile number here"
+                        onChange={(e) => setMobileNumber(e.target.value)}
+                        maxLength={10}
+                        type="tele"
+                        size={"sm"}
+                        rounded={5}
+                        variant="none"
+                      />
+                    </Box>
+                  </FormControl>
+                  <Button
+                    onClick={handleGetOtp}
+                    variant="link"
+                    colorScheme="purple"
+                    fontSize={"md"}
+                    display={"flex"}
+                    justifyContent={"end"}
+                    mt={2}
+                    textDecoration={"underline"}
+                    w={"100%"}
+                  >
+                    Get OTP
+                  </Button>
+                  {/* <FormLabel fontSize="small">Mobile Number</FormLabel>
+                    <VStack spacing={1} align="flex-start" gap={1}>
+                      <HStack alignItems="center" border="1px solid #DCDCDC" borderRadius="10px" p={2} h={"50px"}>
+                        <Text pt={3} fontSize="medium">+91</Text>
+                        <Input
+                          placeholder="Please enter your mobile number here"
+                          value={mobileNumber}
+                          onChange={(e) => setMobileNumber(e.target.value)}
+                          maxLength={10}
+                          type="tel"
+                          variant="none"
+                          width="100%"
+                          h={"40px"}
+                          fontSize="small"
+                        />
+                      </HStack>
+                      <Button onClick={handleGetOtp} variant="link" colorScheme="purple">
+                        Get OTP
+                      </Button>
+                    </VStack> */}
+
+                  <Text fontSize={"md"} fontWeight={500} mt={5}>
+                    OTP
+                  </Text>
+                  <HStack>
+                    {otp.map((_, index) => (
+                      <Input
+                        key={index}
+                        id={`otp-input-${index}`}
+                        value={otp[index]}
+                        onChange={(e) => handleChange(e, index)}
+                        maxLength={1}
+                        textAlign="center"
+                        variant="outline"
+                        width="50px"
+                        type="tel"
+                      />
+                    ))}
+                  </HStack>
+                </Box>
+              </Box>
+            ) : (
+              <Box>
+                <Box
+                  display={"flex"}
+                  flexDirection="row"
+                  alignItems="flex-start"
+                  gap={1}
+                >
+                  <Text color="#A0A0A0" fontWeight={500} fontSize="small">
+                    Order Id :
+                  </Text>
+                  <Text color="#3725EA" fontWeight={500} fontSize="small">
+                    #451245
+                  </Text>
+                </Box>
+
+                <Box>
+                  <FormControl>
+                    <FormLabel fontSize={"sm"} mb={0}>
+                      Enter Denomination
+                    </FormLabel>
+                    <Box
+                      border="1px solid #DCDCDC"
+                      display="flex"
+                      w="100%"
+                      flexDirection="row"
+                      alignItems="baseline"
+                      justifyContent="center"
+                      pt={"8px"}
+                      px={"8px"}
+                      borderRadius="10px"
+                    >
+                      <Text fontSize="small">₹</Text>
+                      <Input
+                        pt={1}
+                        placeholder="Enter amount"
+                        size={"sm"}
+                        rounded={5}
+                        variant="none"
+                      />
+                    </Box>
+                  </FormControl>
+                </Box>
+              </Box>
+            )}
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="white" color="black" mr={3} onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              bgColor="#6311CB"
+              color="white"
+              _hover={{ bgColor: "#6311CB" }}
+              mr={3}
+            >
+              {selectedAction === "Load card" ? "Load Amount" : "Activate Cards"}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default DigitalApplicationStatus;

src/Routes/Routes.js

@@ -18,7 +18,10 @@ import Roles from "../Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles";
 import OptiFiiExpenseDashboard from "../Pages/OptiFiiExpense/OptiFiiExpenseDashboard";
 import GiftCard from "../Pages/OptiFiiGifsAndVouchers/GiftCard";
 import ApplicationStatus from "../Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus";
+import DigitalApplicationStatus from "../Pages/OptiFiiGifsAndVouchers/id/DigitalApplication";
+import CreateWallet from "../Pages/OptiFiiExpense/wallet/CreateWallet";
 import GiftDashboard from "../Pages/OptiFiiGifsAndVouchers/GiftDashboard";
+import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
 import AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
 export const RouteLink = [
   { path: "/", Component: Dashbaord },
@@ -30,6 +33,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: "/advance-expense-request-view", Component: AdvanceExpenseRequestView },
   { path: "/optiFii-benefit", Component: OptiFiiTaxBenefit },
@@ -41,7 +45,9 @@ export const RouteLink = [
   { path: "/roles", Component: Roles },
   { path: "/optiFii-expense-dashboard", Component: OptiFiiExpenseDashboard },
   { path: "/gift-card", Component: GiftCard },
-  { path: "/application-status", Component: ApplicationStatus },
+  { path: "/gift-card/application-status", Component: ApplicationStatus },
+  { path: "/gift-card/digital-application-status", Component: DigitalApplicationStatus },
+  {path:"/wallet-program/create-wallet" , Component : CreateWallet},