From 4692082c6a35347e7986d7a47b5eaaf079644f16 Mon Sep 17 00:00:00 2001
From: npcdazai <prathammandavkar932@gmail.com>
Date: Fri, 27 Sep 2024 14:55:31 +0530
Subject: [PATCH 1/5] Wallet Program

---
 src/Contexts/GlobalStateProvider.jsx          | 108 ++++++-
 src/Pages/OptiFiiExpense/WalletProgram.jsx    | 306 +++++++++++++++++-
 .../id/ApplicationStatus.jsx                  |   1 +
 .../id/DigitalApplication.jsx                 |  34 +-
 src/assets/icons/Food.png                     | Bin 0 -> 966 bytes
 src/assets/icons/Fuel.png                     | Bin 0 -> 1678 bytes
 src/assets/icons/bookStack.png                | Bin 0 -> 1961 bytes
 src/assets/icons/gadget.png                   | Bin 0 -> 1752 bytes
 src/assets/icons/gift.png                     | Bin 0 -> 1758 bytes
 src/assets/icons/telecom.png                  | Bin 0 -> 1765 bytes
 10 files changed, 439 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/icons/Food.png
 create mode 100644 src/assets/icons/Fuel.png
 create mode 100644 src/assets/icons/bookStack.png
 create mode 100644 src/assets/icons/gadget.png
 create mode 100644 src/assets/icons/gift.png
 create mode 100644 src/assets/icons/telecom.png

diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 9c8340a..e53008e 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/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 :"Active",
+      WalletAmount :"₹ 50,000",cls
+      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 :"Active",
+      WalletAmount :"₹ 50,000",
+      CreatedOn :"Jan 12, 2022",
+      CreatedBy:"Jenny wilson"
+    },
+    {
+      id: 9,
+      walletName: [{ name: "Food", icon: Food }],
+      WalletType : "Prefilled",
+      department :"sales",
+      status :"Active",
+      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}
diff --git a/src/Pages/OptiFiiExpense/WalletProgram.jsx b/src/Pages/OptiFiiExpense/WalletProgram.jsx
index 414f0ea..510bd99 100644
--- a/src/Pages/OptiFiiExpense/WalletProgram.jsx
+++ b/src/Pages/OptiFiiExpense/WalletProgram.jsx
@@ -1,15 +1,305 @@
-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";
 
 const WalletProgram = () => {
+  const { walletProgram } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  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"
+        colorScheme={
+          item?.status === "Active"
+            ? "green"
+            : item?.status === "Inactive"
+            ? "red"
+            : "gray"
+        }
+        border={`1px solid ${
+          item?.status === "Active"
+            ? "green"
+            : item?.status === "Inactive"
+            ? "red"
+            : "gray"
+        }`}
+        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"
+                leftIcon={<CiBoxList color="#3725EA" fontSize={"15px"} />}
+              >
+                List
+              </Button>
+
+              <Button
+                ml="8px"
+                bgColor="#3725EA30"
+                fontWeight={600}
+                fontSize="small"
+                color="#3725EA"
+              >
+                <BsFillGridFill color="#3725EA" fontSize={"15px"} />{" "}
+              </Button>
+            </Box>
+          </HStack>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+      </Box>
     </Box>
   );
 };
diff --git a/src/Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus.jsx b/src/Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus.jsx
index 6cdc2b8..85e0046 100644
--- a/src/Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus.jsx
+++ b/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}
diff --git a/src/Pages/OptiFiiGifsAndVouchers/id/DigitalApplication.jsx b/src/Pages/OptiFiiGifsAndVouchers/id/DigitalApplication.jsx
index e4065eb..a6186bd 100644
--- a/src/Pages/OptiFiiGifsAndVouchers/id/DigitalApplication.jsx
+++ b/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"
diff --git a/src/assets/icons/Food.png b/src/assets/icons/Food.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1390038316fcf9e9f24b76b507a24812e49d4d3
GIT binary patch
literal 966
zcmV;%13CPOP)<h;3K|Lk000e1NJLTq001cf001cn1^@s6s9*s000001b5ch_0Itp)
z=>Px&fJsC_R9FecS#M6;FchzZw229{Y283TE7HauqZ)-NGzqIT^#I#PKI{TqV><vB
z=mmBFF2Du20NTe5+Sr3?<p7zUgFB~9?B^zHku1B8pWn~F_s1`xQYrX%dK$0PYCl&`
zYJXm;&1>F2hxvlr&oAD3&DJ{ZP5s!te;2siGc~`--?TS}8?9FSWPYtkNq^^86%?94
z>7IKea^a9jmH1__X;E;~z(Z%?l*Vj8?rPHt%KClM93Fsm@N`YBgn%fUy}ZMDyL@X(
zz4<2q49K9Bx9R_ww+6asfb!62px!>;l0wVqd(P;E*4E&}%K)b8>`->3je4&+JWvIe
zHHKW8$)=9QPGk5vB>XaTc+Up7Px+^Sve+llHyb%v+kM5?XMk#1B>Wtd1%zGO04)L%
z(q9Usj>QQBl=p3c76A!*Ar(%5f)7l<=n4h{&|_!N17NZRl%FLB<L7ct_85I_cepVD
z*>TtrMo6sD0j1G*0Sa70->xwFCMIvS*cwJ4wI&CsPx+UCMtyx_<A5?0NJvM5NuV?Z
zKxc0CSq@O+UX+b}$}WuS9(9SF30DzTU}l{q(2($6;s#NFW-pZhWh_$B`^IP&E1<4}
z00;^H8qnxA2@Z35@|)lec6n2ja<(8Lu?K`*Wd?>RkIHCw`I&lP-PjtW07&^bq~QD<
zOm=om2FWdiFnz*2i$#DbCN+Yzs=Nui7UrV-A}50NrWcXVVw+n__#`&E|2e%e2PQc(
z%k(mjB3T56YqfZ_(%s|hI=a<o^0qMb!WFXadcrOP%5T&?O=FQKPb=|?#f<|Fk83ix
zR7R6IR3ZoPlN$$+VqUm_z08Q#Uw>)SC&6`TVoyF#-Q5_!Onedw2J4opo@^pJRiR@|
zZt}&f=YkbPdXntPK4ofI3YlKO<~FxX+?GHyD{~B+esT>OsvM;Xf{I>EH<b57!i~j6
z?mG@J`l0<WUqz$>DPf%QMQLia_v*+hy#z2RmLK=)*7>%ICvyyD$9{LrQc`5@qkC7+
z1eG-jbT1lc=!~2!EZVt60-Xz>L=UEikDWzKXq0V4n^Iq)-hVr;mTi7W)==CO0yZrS
z=I`$D?V?~q`g<P^J-vVFzd;G4D!(y0G@28tna1c4{##KxbJ&x4+qci)n<Bh*LIWR$
ozU@A2_&eh&AwQmC_sU!M7jK^Yx<2jj=l}o!07*qoM6N<$f?%S)1ONa4

literal 0
HcmV?d00001

diff --git a/src/assets/icons/Fuel.png b/src/assets/icons/Fuel.png
new file mode 100644
index 0000000000000000000000000000000000000000..41ebbe2e4eb7e4012fd209beff18d04e7a876bf9
GIT binary patch
literal 1678
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
Y0kY*xm;f;7O#lD@07*qoM6N<$g7_CLaR2}S

literal 0
HcmV?d00001

diff --git a/src/assets/icons/bookStack.png b/src/assets/icons/bookStack.png
new file mode 100644
index 0000000000000000000000000000000000000000..7bed4b2e0156f584ad35b58f6ed318569c4bd536
GIT binary patch
literal 1961
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

literal 0
HcmV?d00001

diff --git a/src/assets/icons/gadget.png b/src/assets/icons/gadget.png
new file mode 100644
index 0000000000000000000000000000000000000000..426cc3e1acbbeb5c322a98cb6bfa4288e1f5ac34
GIT binary patch
literal 1752
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

literal 0
HcmV?d00001

diff --git a/src/assets/icons/gift.png b/src/assets/icons/gift.png
new file mode 100644
index 0000000000000000000000000000000000000000..4225b225377de06283eb6a818580dd1bda7b7d27
GIT binary patch
literal 1758
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
A_5c6?

literal 0
HcmV?d00001

diff --git a/src/assets/icons/telecom.png b/src/assets/icons/telecom.png
new file mode 100644
index 0000000000000000000000000000000000000000..11d43fdff4ce1a59c5f98bbcfd6d5dbee2c206b3
GIT binary patch
literal 1765
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
Hu0mjf(B?`U

literal 0
HcmV?d00001


From 34dfd23265d1ec56a28585b7dafb4324ec06de3c Mon Sep 17 00:00:00 2001
From: npcdazai <prathammandavkar932@gmail.com>
Date: Fri, 27 Sep 2024 14:57:50 +0530
Subject: [PATCH 2/5] NAN

---
 src/Contexts/GlobalStateProvider.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index e53008e..0b6ce26 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -1054,7 +1054,7 @@ const GlobalStateProvider = ({ children }) => {
       WalletType : "Prefilled",
       department :"sales",
       status :"Active",
-      WalletAmount :"₹ 50,000",cls
+      WalletAmount :"₹ 50,000",
       CreatedOn :"Jan 12, 2022",
       CreatedBy:"Jenny wilson"
     },

From 06df488fcb731a101c7f208cbac9b5019c2d6001 Mon Sep 17 00:00:00 2001
From: npcdazai <prathammandavkar932@gmail.com>
Date: Fri, 27 Sep 2024 15:12:27 +0530
Subject: [PATCH 3/5] Status

---
 src/Contexts/GlobalStateProvider.jsx       |  6 +++---
 src/Pages/OptiFiiExpense/WalletProgram.jsx | 18 +++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 0b6ce26..4bcf31b 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -1053,7 +1053,7 @@ const GlobalStateProvider = ({ children }) => {
       walletName: [{ name: "Telecom", icon: telecom }],
       WalletType : "Prefilled",
       department :"sales",
-      status :"Active",
+      status :"Saved as draft",
       WalletAmount :"₹ 50,000",
       CreatedOn :"Jan 12, 2022",
       CreatedBy:"Jenny wilson"
@@ -1093,7 +1093,7 @@ const GlobalStateProvider = ({ children }) => {
       walletName: [{ name: "Telecom", icon: telecom }],
       WalletType : "Prefilled",
       department :"sales",
-      status :"Active",
+      status :"Pending",
       WalletAmount :"₹ 50,000",
       CreatedOn :"Jan 12, 2022",
       CreatedBy:"Jenny wilson"
@@ -1103,7 +1103,7 @@ const GlobalStateProvider = ({ children }) => {
       walletName: [{ name: "Food", icon: Food }],
       WalletType : "Prefilled",
       department :"sales",
-      status :"Active",
+      status :"Pending",
       WalletAmount :"₹ 50,000",
       CreatedOn :"Jan 12, 2022",
       CreatedBy:"Jenny wilson"
diff --git a/src/Pages/OptiFiiExpense/WalletProgram.jsx b/src/Pages/OptiFiiExpense/WalletProgram.jsx
index 510bd99..5657146 100644
--- a/src/Pages/OptiFiiExpense/WalletProgram.jsx
+++ b/src/Pages/OptiFiiExpense/WalletProgram.jsx
@@ -122,20 +122,20 @@ const WalletProgram = () => {
         my={1}
         size={"sm"}
         borderRadius="full"
-        colorScheme={
+        bgColor={
           item?.status === "Active"
-            ? "green"
+            ? "#00A43814"
             : item?.status === "Inactive"
-            ? "red"
-            : "gray"
+            ? "#C33FAD21"
+            : "#E0BC0114"
         }
-        border={`1px solid ${
+        color={
           item?.status === "Active"
-            ? "green"
+            ? "#00A438"
             : item?.status === "Inactive"
-            ? "red"
-            : "gray"
-        }`}
+            ? "#C33FAD"
+            : "#E0BC01"
+        }
         p={1}
         px={3}
       >

From 25cfd9cc3beb510a1a1154c18409cbff0461d6f1 Mon Sep 17 00:00:00 2001
From: npcdazai <prathammandavkar932@gmail.com>
Date: Fri, 27 Sep 2024 17:15:31 +0530
Subject: [PATCH 4/5] Expenses Cards

---
 src/Pages/OptiFiiExpense/Grid/ActiveCards.jsx | 183 +++++++++++++++++
 src/Pages/OptiFiiExpense/Grid/Decline.jsx     | 183 +++++++++++++++++
 .../OptiFiiExpense/Grid/PendingApproval.jsx   | 185 ++++++++++++++++++
 src/Pages/OptiFiiExpense/WalletProgram.jsx    |  73 ++++++-
 4 files changed, 618 insertions(+), 6 deletions(-)
 create mode 100644 src/Pages/OptiFiiExpense/Grid/ActiveCards.jsx
 create mode 100644 src/Pages/OptiFiiExpense/Grid/Decline.jsx
 create mode 100644 src/Pages/OptiFiiExpense/Grid/PendingApproval.jsx

diff --git a/src/Pages/OptiFiiExpense/Grid/ActiveCards.jsx b/src/Pages/OptiFiiExpense/Grid/ActiveCards.jsx
new file mode 100644
index 0000000..d233589
--- /dev/null
+++ b/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;
diff --git a/src/Pages/OptiFiiExpense/Grid/Decline.jsx b/src/Pages/OptiFiiExpense/Grid/Decline.jsx
new file mode 100644
index 0000000..57ffdea
--- /dev/null
+++ b/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;
diff --git a/src/Pages/OptiFiiExpense/Grid/PendingApproval.jsx b/src/Pages/OptiFiiExpense/Grid/PendingApproval.jsx
new file mode 100644
index 0000000..45a49c6
--- /dev/null
+++ b/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;
diff --git a/src/Pages/OptiFiiExpense/WalletProgram.jsx b/src/Pages/OptiFiiExpense/WalletProgram.jsx
index 5657146..82d40fb 100644
--- a/src/Pages/OptiFiiExpense/WalletProgram.jsx
+++ b/src/Pages/OptiFiiExpense/WalletProgram.jsx
@@ -53,11 +53,23 @@ 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
@@ -287,18 +299,67 @@ const WalletProgram = () => {
                 fontWeight={600}
                 fontSize="small"
                 color="#3725EA"
+                onClick={() => setShowGird(!showGrid)}
               >
                 <BsFillGridFill color="#3725EA" fontSize={"15px"} />{" "}
               </Button>
             </Box>
           </HStack>
         </VStack>
-        <NormalTable
-          emptyMessage={`We don't have any Sponers `}
-          tableHeadRow={tableHeadRow}
-          data={extractedArray}
-          isLoading={isLoading}
-        />
+        {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>
   );

From e93de37cbf2c8e83348b88314709284908e7f6c7 Mon Sep 17 00:00:00 2001
From: npcdazai <prathammandavkar932@gmail.com>
Date: Fri, 27 Sep 2024 17:33:30 +0530
Subject: [PATCH 5/5] Gird

---
 src/Pages/OptiFiiExpense/WalletProgram.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Pages/OptiFiiExpense/WalletProgram.jsx b/src/Pages/OptiFiiExpense/WalletProgram.jsx
index 82d40fb..f2f3755 100644
--- a/src/Pages/OptiFiiExpense/WalletProgram.jsx
+++ b/src/Pages/OptiFiiExpense/WalletProgram.jsx
@@ -288,9 +288,10 @@ const WalletProgram = () => {
                 fontWeight={600}
                 fontSize="small"
                 color="#3725EA"
+                onClick={() => setShowGird(!showGrid)}
                 leftIcon={<CiBoxList color="#3725EA" fontSize={"15px"} />}
               >
-                List
+                {showGrid && "List"}
               </Button>
 
               <Button
@@ -302,6 +303,7 @@ const WalletProgram = () => {
                 onClick={() => setShowGird(!showGrid)}
               >
                 <BsFillGridFill color="#3725EA" fontSize={"15px"} />{" "}
+                {!showGrid && "Gird"}
               </Button>
             </Box>
           </HStack>