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

src/Contexts/GlobalStateProvider.jsx

@@ -9,7 +9,17 @@ 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 { MdOutlineNoFood } from "react-icons/md";
+import { LuFuel } from "react-icons/lu";
+import { GoGift } from "react-icons/go";
+import { FaWifi } from "react-icons/fa";  
+import { SiBookstack } from "react-icons/si";
+import Food from "../assets/icons/Food.png";
+import Fuel from "../assets/icons/Fuel.png";
+import Gift from "../assets/icons/gift.png";
+import books from "../assets/icons/bookStack.png"
+import telecom from "../assets/icons/telecom.png"
+import gadget from "../assets/icons/gadget.png"
 const getRandomDate = (start, end) => {
   const date = new Date(
     start.getTime() + Math.random() * (end.getTime() - start.getTime())
@@ -1006,6 +1016,101 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
+  const [walletProgram, setWalletProgram] = useState(
+   [
+    {
+      id: 1,
+      walletName: [{ name: "Food", icon: Food }],
+      WalletType : "Prefilled",
+      department :"sales",
+      status :"Active",
+      WalletAmount :"₹ 50,000",
+      CreatedOn :"Jan 12, 2022",
+      CreatedBy:"Jenny wilson"
+    },
+    {
+      id: 2,
+      walletName: [{ name: "Fuel", icon: Fuel }],
+      WalletType : "Prefilled",
+      department :"sales",
+      status :"Active",
+      WalletAmount :"₹ 50,000",
+      CreatedOn :"Jan 12, 2022",
+      CreatedBy:"Jenny wilson"
+    },
+    {
+      id: 3,
+      walletName: [{ name: "Gift", icon: Gift }],
+      WalletType : "Prefilled",
+      department :"sales",
+      status :"Active",
+      WalletAmount :"₹ 50,000",
+      CreatedOn :"Jan 12, 2022",
+      CreatedBy:"Jenny wilson"
+    },
+    {
+      id: 4,
+      walletName: [{ name: "Telecom", icon: telecom }],
+      WalletType : "Prefilled",
+      department :"sales",
+      status :"Saved as draft",
+      WalletAmount :"₹ 50,000",
+      CreatedOn :"Jan 12, 2022",
+      CreatedBy:"Jenny wilson"
+    },
+    {
+      id: 5,
+      walletName: [{ name: "Books & periodicals", icon: books }],
+      WalletType : "Prefilled",
+      department :"sales",
+      status :"Active",
+      WalletAmount :"₹ 50,000",
+      CreatedOn :"Jan 12, 2022",
+      CreatedBy:"Jenny wilson"
+    },
+    {
+      id: 6,
+      walletName: [{ name: "Learning & development", icon: books }],
+      WalletType : "Prefilled",
+      department :"sales",
+      status :"Active",
+      WalletAmount :"₹ 50,000",
+      CreatedOn :"Jan 12, 2022",
+      CreatedBy:"Jenny wilson"
+    },
+    {
+      id: 7,
+      walletName: [{ name: "Gadget & equipment", icon: gadget }],
+      WalletType : "Prefilled",
+      department :"sales",
+      status :"Active",
+      WalletAmount :"₹ 50,000",
+      CreatedOn :"Jan 12, 2022",
+      CreatedBy:"Jenny wilson"
+    },
+    {
+      id: 8,
+      walletName: [{ name: "Telecom", icon: telecom }],
+      WalletType : "Prefilled",
+      department :"sales",
+      status :"Pending",
+      WalletAmount :"₹ 50,000",
+      CreatedOn :"Jan 12, 2022",
+      CreatedBy:"Jenny wilson"
+    },
+    {
+      id: 9,
+      walletName: [{ name: "Food", icon: Food }],
+      WalletType : "Prefilled",
+      department :"sales",
+      status :"Pending",
+      WalletAmount :"₹ 50,000",
+      CreatedOn :"Jan 12, 2022",
+      CreatedBy:"Jenny wilson"
+    },
+   ]
+);
+
   return (
     <GlobalStateContext.Provider
       value={{
@@ -1029,6 +1134,7 @@ const GlobalStateProvider = ({ children }) => {
         setDigital,
         ApplicationStatus,
         setAdvanceStatus,
+        walletProgram
       }}
     >
       {children}

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/WalletProgram.jsx

@@ -1,15 +1,368 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import {
+  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 } 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}>
-      <MiniHeader
-        title={"My Requests"}
-        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
-        backButton={true}
-      />
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <Box
+        rounded={"xl"}
+        py={3}
+        // 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>
+              <PrimaryButton leftIcon={<AddIcon />} title={"Create wallet"} />
+            </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/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

@@ -213,6 +213,37 @@ const DigitalApplicationStatus = () => {
 
   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`}
@@ -220,6 +251,7 @@ const DigitalApplicationStatus = () => {
         data={extractedArray}
         isLoading={isLoading}
       />
+      
 
       {/* Modal for Activate or Load card based on action */}
       <Modal
@@ -366,7 +398,7 @@ const DigitalApplicationStatus = () => {
                       px={"8px"}
                       borderRadius="10px"
                     >
-                      <Text fontSize="small">$</Text>
+                      <Text fontSize="small">₹</Text>
                       <Input
                         pt={1}
                         placeholder="Enter amount"