[update] - commit

package-lock.json

@@ -18,10 +18,12 @@
         "axios": "^1.7.2",
         "bootstrap": "5.3.3",
         "chart.js": "^4.4.3",
+        "dayjs": "^1.11.13",
         "dotenv": "^16.4.5",
         "framer-motion": "^11.5.5",
         "js-cookie": "^3.0.5",
         "libphonenumber-js": "^1.11.8",
+        "multiselect-react-dropdown": "^2.0.25",
         "react": "^18.2.0",
         "react-apexcharts": "^1.4.1",
         "react-beautiful-dnd": "^13.1.1",
@@ -36,6 +38,7 @@
         "redux-persist": "^6.0.0",
         "redux-persist-transform-encrypt": "^5.1.1",
         "uuid": "^10.0.0",
+        "vanilla-tilt": "^1.8.1",
         "xlsx": "^0.18.5",
         "yup": "^1.4.0"
       },
@@ -3196,6 +3199,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4839,6 +4847,14 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/multiselect-react-dropdown": {
+      "version": "2.0.25",
+      "resolved": "https://registry.npmjs.org/multiselect-react-dropdown/-/multiselect-react-dropdown-2.0.25.tgz",
+      "integrity": "sha512-z8kUSyBNOuV7vn4Dk35snzXWtIfTdSEEXhgDdLMvOmR+xJFx35vc1voUlSuOvrk3khb+hXC219Qs9szOvNm25Q==",
+      "peerDependencies": {
+        "react": "^16.7.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -6330,6 +6346,11 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vanilla-tilt": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
+      "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw=="
+    },
     "node_modules/vite": {
       "version": "5.4.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",

package.json

@@ -20,10 +20,12 @@
     "axios": "^1.7.2",
     "bootstrap": "5.3.3",
     "chart.js": "^4.4.3",
+    "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
     "framer-motion": "^11.5.5",
     "js-cookie": "^3.0.5",
     "libphonenumber-js": "^1.11.8",
+    "multiselect-react-dropdown": "^2.0.25",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
     "react-beautiful-dnd": "^13.1.1",
@@ -38,6 +40,7 @@
     "redux-persist": "^6.0.0",
     "redux-persist-transform-encrypt": "^5.1.1",
     "uuid": "^10.0.0",
+    "vanilla-tilt": "^1.8.1",
     "xlsx": "^0.18.5",
     "yup": "^1.4.0"
   },

src/App.css

@@ -1,9 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
 * {
   box-sizing: border-box;
@@ -13,7 +13,6 @@
   /* font-family: "Poppins", sans-serif !important; */
   /* font-family: "Lato", sans-serif !important; */
 
-
   font-family: "Montserrat", sans-serif !important;
 }
 
@@ -27,8 +26,7 @@
   background: linear-gradient(
     to right,
     #7a45fb,
-    /* #764aaf67, */
+    /* #764aaf67, */ #de41b5
-    #de41b5
   ); /* Gradient background */
   -webkit-background-clip: text; /* Clip text to the background area */
   -webkit-text-fill-color: transparent; /* Fill text with the background color */
@@ -43,7 +41,11 @@
 }
 a.active {
   border-left: 2px solid #fff;
-  background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(55, 37, 234, 0.6) 0%,
+    rgba(94, 15, 205, 0.6) 100%
+  );
 }
 /* .chakra-accordion__item.css-1t7rcca:has(.active) {
   background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
@@ -126,7 +128,7 @@ a.active{
 }
 
 .primary-btn {
-  background-color: #210A33 !important;
+  background-color: #210a33 !important;
 }
 
 .team-slider .swiper-button-next:after {
@@ -209,9 +211,6 @@ a.active{
   background: #0041189a;
 }
 
-
-
-
 #google_translate_element {
   /* display: none; Hide the default Google Translate dropdown */
 
@@ -234,10 +233,9 @@ a.active{
   color: transparent !important;
 }
 
-
 @keyframes text {
   0% {
-    color: #DE858E;
+    color: #de858e;
     /* margin-bottom: -40px; */
   }
   30% {
@@ -356,21 +354,17 @@ a.active{
   }
 }
 
-
-
-
-
 /* ========= [ switch BTN ============ */
 
-
-
 /* From Uiverse.io by Nawsome */
 .switch {
   display: block;
   background-color: black;
   width: 85px;
   height: 115px;
-  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
+    inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c,
+    inset 0 0 2px 22px black;
   border-radius: 5px;
   padding: 20px;
   perspective: 700px;
@@ -407,13 +401,25 @@ a.active{
   height: 100%;
   position: relative;
   cursor: pointer;
-  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
+  background: linear-gradient(
+    #980000 0%,
+    #6f0000 30%,
+    #6f0000 70%,
+    #980000 100%
+  );
   background-repeat: no-repeat;
 }
 
 .switch .button::before {
   content: "";
-  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
+  background: linear-gradient(
+        rgba(255, 255, 255, 0.8) 10%,
+        rgba(255, 255, 255, 0.3) 30%,
+        #650000 75%,
+        #320000
+      )
+      50% 50%/97% 97%,
+    #b10000;
   background-repeat: no-repeat;
   width: 100%;
   height: 50px;
@@ -456,7 +462,15 @@ a.active{
   position: absolute;
   width: 100%;
   height: 100%;
-  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
+  background: linear-gradient(white, white) 50% 20%/5% 20%,
+    radial-gradient(
+        circle,
+        transparent 50%,
+        white 52%,
+        white 70%,
+        transparent 72%
+      )
+      50% 80%/33% 25%;
   background-repeat: no-repeat;
 }
 
@@ -466,7 +480,14 @@ a.active{
   position: absolute;
   width: 100%;
   height: 100%;
-  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
+  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%,
+    linear-gradient(
+        rgba(255, 255, 255, 0.5),
+        transparent 50%,
+        transparent 80%,
+        rgba(255, 255, 255, 0.5)
+      )
+      50% 50%/97% 97%;
   background-repeat: no-repeat;
 }
 
@@ -504,10 +525,14 @@ a.active{
   }
 }
 
-.react-tel-input .selected-flag:hover, .react-tel-input .selected-flag:focus {
+.react-tel-input .selected-flag:hover,
+.react-tel-input .selected-flag:focus {
   background-color: transparent !important;
 }
 .react-tel-input .selected-flag {
   background: transparent !important;
   padding: 0 0 0 16px !important;
 }
+
+
+/* Styling the scrollbar */

src/App.jsx

@@ -67,8 +67,8 @@ const App = () => {
             isAuthenticate || isAuthenticatedInCookie === "true" ? (
               <DefaultLayout isOnline={isOnline} />
             ) : (
-              // <Login />
+              <Login />
-              <OnboardingFrame />
+              // <OnboardingFrame />
             )
             // ) : (
             //   <NoInternetScreen />

src/Components/Buttons/PrimaryButton.jsx

@@ -1,7 +1,7 @@
 import { Button } from '@chakra-ui/button'
 import React from 'react'
 
-const PrimaryButton = ({title, onClick, ...props}) => {
+const PrimaryButton = ({title, onClick, px = 8, ...props}) => {
   return (
     
     <Button
@@ -12,7 +12,7 @@ const PrimaryButton = ({title, onClick, ...props}) => {
     }}
     bgGradient="linear(to-r, #3725EA, #5E0FCD)"
     fontSize={"xs"}
-    px={8}
+    px={px}
     fontWeight={500}
     size={"sm"}
     color={"#fff"}

src/Components/Buttons/SecondaryButton.jsx

@@ -1,13 +1,13 @@
 import { Button } from '@chakra-ui/button'
 import React from 'react'
 
-const SecondaryButton = ({title, onClick, ...props}) => {
+const SecondaryButton = ({title, onClick, px = 8, ...props}) => {
   return (
     
     <Button
     {...props}
     fontSize={"xs"}
-    px={8}
+    px={px}
     fontWeight={600}
     size={"sm"}
     variant="outline"

src/Components/Cards/BlueCard.jsx

@@ -0,0 +1,41 @@
+import { Box, Stack, Text, Link, Badge } from '@chakra-ui/react';
+import React from 'react';
+import { MdGroups } from 'react-icons/md';
+
+function BlueCard({blueCardData}) {
+    return (
+        <Box
+            backgroundColor={blueCardData.backgroundColor}
+            borderRadius="xl"
+        >
+            <Box bg="#fff" borderRadius="xl" p={4} h="115px">
+                <Stack direction={["column", "row"]} color={blueCardData.backgroundColor}>
+                    <Text as="span">
+                        <MdGroups />
+                    </Text>
+                    <Text textTransform={'capitalize'} display={'flex'} alignItems={'center'} as={'span'} fontSize="xs" mb={0} fontWeight={500}>
+                        {blueCardData.title.toUpperCase()}
+                    </Text>
+                </Stack>
+                <Text  fontSize="xl" fontWeight={500} mt={2} mb={0}>
+                    {blueCardData.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}>{blueCardData.buttonText}</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,15 +81,10 @@ 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
               cursor={"pointer"}
@@ -101,7 +98,11 @@ const CustomBreadcrumb = () => {
               as={"span"}
             >
               {item.title}
-          </Button></Link>
+            </Button>
+          </Link>
+          <Text size={"md"} as={"span"}>
+            /
+          </Text>
         </React.Fragment>
       ))}
     </Box>

src/Components/DataTable/AccordianTable.jsx

@@ -0,0 +1,192 @@
+import React, { useState } from "react";
+import {
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Skeleton,
+  TableCaption,
+  Checkbox,
+  CheckboxGroup,
+  Collapse,
+  HStack,
+  Text,
+  Box, // Import Collapse from Chakra UI
+} from "@chakra-ui/react";
+import EmptySearchList from "../EmptySearchList";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+
+const AccordionTable = ({
+  data,
+  isLoading,
+  tableHeadRow,
+  emptyMessage,
+  centered,
+  total,
+  showRadioButton,
+  selectedRadio,
+  setSelectedRadio,
+}) => {
+  const [expandedRow, setExpandedRow] = useState(null); // Track the expanded row
+
+  console.log(data);
+
+
+  const columnWidth =
+    data && data[0]
+      ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
+      : "auto";
+
+  const handleRadioChange = (value) => {
+    setSelectedRadio(value);
+  };
+
+  const toggleRow = (index) => {
+    setExpandedRow(expandedRow === index ? null : index); // Toggle row expansion
+  };
+
+  return (
+    <TableContainer overflowX={"auto"} className="h-auto w-100 table-scroll">
+      {data?.length === 0 ? (
+        <EmptySearchList message={emptyMessage} />
+      ) : (
+        <Table size="sm">
+          <TableCaption p={total ? 0 : null}>
+            {total ? total : "OptiFii v1.0.0"}
+          </TableCaption>
+          <Thead bg="#6311cb37">
+            <Tr>
+              {tableHeadRow.map((heading, index) => (
+                <Th
+                  color={"purple.900"}
+                  textAlign={
+                    tableHeadRow.length - 1 === index || centered
+                      ? "center"
+                      : "left"
+                  }
+                  key={index}
+                  p={4}
+                  whiteSpace="normal"
+                  wordBreak="normal"
+                  overflowWrap="normal"
+                  textTransform={"none"}
+                >
+                  {showRadioButton && heading === "Select" ? (
+                    <CheckboxGroup value={selectedRadio}>
+                      <Checkbox isDisabled />
+                    </CheckboxGroup>
+                  ) : isLoading ? (
+                    <Skeleton height="20px" />
+                  ) : (
+                    heading
+                  )}
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody className="web-text-small">
+            {isLoading
+              ? Array.from({ length: TABLE_PAGINATION?.size }).map(
+                (_, index) => (
+                  <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
+                    {tableHeadRow.map((_, i) => (
+                      <Td
+                        key={i}
+                        style={{
+                          whiteSpace: "nowrap",
+                          textOverflow: "ellipsis",
+                        }}
+                        className="web-text-small"
+                      >
+                        <Skeleton height="20px" mb={1} mt={1} />
+                      </Td>
+                    ))}
+                  </Tr>
+                )
+              )
+              : data?.map((item, index) => (
+                <React.Fragment key={index}>
+                  <Tr
+                    cursor={"pointer"}
+                    transition={"0.2s all"}
+                    _hover={{ shadow: "lg" }}
+                    h={12}
+                    bg={index % 2 === 0 ? "" : "#6311cb14"}
+                    onClick={() => toggleRow(index)} // Handle row click
+                  >
+                    {tableHeadRow.map((heading, i) => (
+                      <Td
+                        textAlign={
+                          tableHeadRow?.length - 1 === i || centered
+                            ? "center"
+                            : "left"
+                        }
+                        color={"gray.600"}
+                        key={i}
+                        fontWeight={500}
+                        style={{
+                          whiteSpace: "nowrap",
+                          textOverflow: "ellipsis",
+                        }}
+                        className="web-text-small"
+                      >
+                        {showRadioButton && heading === "Select" ? (
+                          <CheckboxGroup
+                            value={selectedRadio}
+                            onChange={handleRadioChange}
+                          >
+                            <Checkbox bg={"#fff"} value={item.id} />
+                          </CheckboxGroup>
+                        ) : (
+                          item[heading]
+                        )}
+                      </Td>
+                    ))}
+                  </Tr>
+
+                  {/* Conditionally render the expanded content with transition */}
+                  <Tr>
+                    <Td colSpan={tableHeadRow.length} p={0}>
+                      <Collapse in={expandedRow === index} animateOpacity>
+                        {item?.subMenu?.map(({ wallet, walBal }, index) => <div
+                          key={index}
+                          style={{
+                            padding: "4px 75px ",
+                            margin: "5px 0",
+                          }}
+                        >
+                          <Box display={"flex"} alignItems={"center"}>
+                            <Box opacity={0} flex={1}>
+                              <Text mb={0}>Hide contetnt</Text>
+                            </Box>
+                            <HStack justifyContent={"space-between"} w={"220px"}>
+                              <Box>
+                                <Checkbox >
+                                  <Text
+                                    as={"span"}
+                                    fontSize={"xs"}
+                                  >
+                                    {wallet}
+                                  </Text>
+                                </Checkbox>
+                              </Box>
+                              <Text fontSize={"xs"} mb={0}>{walBal}</Text>
+                            </HStack>
+                          </Box>
+                        </div>)}
+                      </Collapse>
+                    </Td>
+                  </Tr>
+                </React.Fragment>
+              ))}
+          </Tbody>
+        </Table>
+      )}
+    </TableContainer>
+  );
+};
+
+export default AccordionTable;

src/Components/DataTable/NormalTable.jsx

@@ -9,9 +9,6 @@ import {
   Tr,
   Skeleton,
   TableCaption,
-  Radio,
-  RadioGroup,
-  CheckboxGroup,
   Checkbox,
 } from "@chakra-ui/react";
 import EmptySearchList from "../EmptySearchList";
@@ -24,17 +21,40 @@ const NormalTable = ({
   emptyMessage,
   centered,
   total,
-  showRadioButton, // New prop for showing the radio button
+  showRadioButton, // Prop for showing the checkboxes
   selectedRadio,
-  setSelectedRadio, // State for managing radio button selection
+  setSelectedRadio, // State for managing selected checkboxes
 }) => {
   const columnWidth =
     data && data[0]
       ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
       : "auto";
 
-  const handleRadioChange = (value) => {
+  // Toggle checkbox selection for individual rows
-    setSelectedRadio(value);
+  const handleCheckboxChange = (value) => {
+    console.log(value);
+    
+    setSelectedRadio((prev) => {
+      if (prev.includes(value)) {
+        // Remove if already selected
+        return prev.filter((id) => id !== value);
+      } else {
+        // Add to selected
+        return [...prev, value];
+      }
+    });
+  };
+
+  // Handle "Check All" checkbox
+  const handleCheckAllChange = () => {
+    if (selectedRadio.length === data.length) {
+      setSelectedRadio([]); // Deselect all if already selected
+    } else {
+      const allIds = data.map((item) => item.id);
+      setSelectedRadio(allIds); // Select all
+    }
+    console.log(selectedRadio);
+    
   };
 
   return (
@@ -44,10 +64,28 @@ const NormalTable = ({
       ) : (
         <Table size="sm">
           <TableCaption p={total ? 0 : null}>
-            {total ? total : "OptiFii v1.0.0"}
+            {total ? total : "Tanami v1.0.0"}
           </TableCaption>
-          <Thead bg="#6311cb37">
+          <Thead bg="purple.100">
             <Tr>
+              {showRadioButton && (
+                <Th
+                  color={"purple.900"}
+                  textAlign={"center"}
+                  p={4}
+                  whiteSpace="normal"
+                  wordBreak="normal"
+                  overflowWrap="normal"
+                  textTransform={"none"}
+                >
+                  <Checkbox
+                    isChecked={selectedRadio?.length === data?.length}
+                    onChange={handleCheckAllChange}
+                    colorScheme="purple"
+
+                  />
+                </Th>
+              )}
               {tableHeadRow.map((heading, index) => (
                 <Th
                   color={"purple.900"}
@@ -63,14 +101,7 @@ const NormalTable = ({
                   overflowWrap="normal"
                   textTransform={"none"}
                 >
-                  {/* Conditionally render radio button in the heading */}
+                  {isLoading ? <Skeleton height="20px" /> : heading}
-                  {showRadioButton && heading === "Select" ? (
-                    <CheckboxGroup value={selectedRadio}>
-                      <Checkbox isDisabled /> {/* Disabled radio button in header */}
-                    </CheckboxGroup>
-                  ) : (
-                    isLoading ? <Skeleton height="20px" /> : heading
-                  )}
                 </Th>
               ))}
             </Tr>
@@ -79,7 +110,10 @@ const NormalTable = ({
             {isLoading
               ? Array.from({ length: TABLE_PAGINATION?.size }).map(
                   (_, index) => (
-                    <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
+                    <Tr
+                      bg={index % 2 === 0 ? "white" : "#6311cb14"}
+                      key={index}
+                    >
                       {tableHeadRow.map((_, i) => (
                         <Td
                           key={i}
@@ -96,10 +130,25 @@ const NormalTable = ({
                   )
                 )
               : data?.map((item, index) => (
-                  <Tr  cursor={'pointer'} 
+                  <Tr
-                  transition={'0.2s all'}
+                    cursor={"pointer"}
-                  _hover={{ shadow: "lg" }} 
+                    transition={"0.2s all"}
-                   h={12} bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
+                    maxH={8}
+                    bg={index % 2 === 0 ? "white" : "#6311cb14"}
+                    key={index}
+                    // _hover={{ shadow: "lg" }} 
+                  >
+                    {showRadioButton && (
+                      <Td textAlign={"center"}>
+                        <Checkbox
+                          bg={"#fff"}
+                          colorScheme="purple"
+                          value={item.id}
+                          isChecked={selectedRadio?.includes(item.id)}
+                          onChange={() => handleCheckboxChange(item.id)}
+                        />
+                      </Td>
+                    )}
                     {tableHeadRow.map((heading, i) => (
                       <Td
                         textAlign={
@@ -116,17 +165,7 @@ const NormalTable = ({
                         }}
                         className="web-text-small"
                       >
-                        {/* Conditionally render radio button in the table body */}
+                        {item[heading]}
-                        {showRadioButton && heading === "Select" ? (
-                          <CheckboxGroup
-                            value={selectedRadio}
-                            onChange={handleRadioChange}
-                          >
-                            <Checkbox bg={'#fff'} value={item.id} /> {/* Dynamic radio buttons */}
-                          </CheckboxGroup>
-                        ) : (
-                          item[heading]
-                        )}
                       </Td>
                     ))}
                   </Tr>

src/Components/Doughnut/BarCharts.jsx

@@ -16,7 +16,8 @@ const BarChart = () => {
         backgroundColor: '#6311CB',
         borderColor: 'rgba(75, 192, 192, 1)',
         borderWidth: 1,
-        borderRadius:8
+        borderRadius: 8,
+        width:"10px",
       },
     ],
   };
@@ -24,6 +25,10 @@ const BarChart = () => {
   // Options for the bar chart
   const options = {
     scales: {
+      x: {
+        barPercentage: 0.4, // Decrease this value to make bars narrower
+        categoryPercentage: 0.6, // Adjust this to control the space between categories
+      },
       y: {
         beginAtZero: true,
         ticks: {

src/Components/HeaderMain.jsx

@@ -23,6 +23,7 @@ import {
   Portal,
   Text,
   useColorMode,
+  VStack,
 } from "@chakra-ui/react";
 import React, { useContext, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
@@ -30,13 +31,20 @@ import * as XLSX from "xlsx";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import mainLogo from "../assets/optifii_logo.svg";
 import { MdNotificationsNone } from "react-icons/md";
+import womenpfp from "../assets/womenpfp1.png";
+import { MdLogout } from "react-icons/md";
+
+const users = [
+  { id: 1, user: "Jenny Wilson", role: "Admin" },
+  { id: 2, user: "Jenny Wilson", role: "Employee" },
+];
 
 const HeaderMain = ({
   logOutHandler,
   slideDirecttion,
   isDrawerOpen,
   toggleDrawer,
-  blur
+  blur,
 }) => {
   const navigate = useNavigate();
   const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
@@ -53,10 +61,14 @@ const HeaderMain = ({
         slideDirecttion ? " ps-2" : ""
       }  justify-content-between align-items-center`}
       zIndex={999}
-
     >
       <Box display={"flex"} alignItems={"center"}>
-        <Box w={"250px"} display={"flex"} alignItems={"center"} justifyContent={"space-between"}>
+        <Box
+          w={"250px"}
+          display={"flex"}
+          alignItems={"center"}
+          justifyContent={"space-between"}
+        >
           <Box
             className={`d-flex  ${
               true ? "justify-content-start" : "justify-content-center"
@@ -92,7 +104,8 @@ const HeaderMain = ({
           </Button>
         </Box>
 
-        {!blur&&<InputGroup width={350} size="sm" ml={5}>
+        {!blur && (
+          <InputGroup width={350} size="sm" ml={5}>
             <InputLeftElement pointerEvents="none">
               <SearchIcon color="gray.300" />
             </InputLeftElement>
@@ -104,40 +117,108 @@ const HeaderMain = ({
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
-        </InputGroup>}
+          </InputGroup>
+        )}
       </Box>
-      <Box filter= {blur && "blur(5px)"} display={"flex"} justifyContent={"space-between"}>
+      <Box
+        filter={blur && "blur(5px)"}
+        display={"flex"}
+        justifyContent={"space-between"}
+      >
         <Box display={"flex"} gap={2}>
-          <Box display={"flex"} gap={2} alignItems={'center'} me={2}>
+          <Box display={"flex"} gap={2} alignItems={"center"} me={2}>
-            <Button size={'sm'} bg={"none"} p={0}>
+            <Button size={"sm"} bg={"none"} p={0}>
               <MdNotificationsNone fontSize={"20px"} />
             </Button>
           </Box>
           <Box me={4} gap={2} className="d-flex justify-content-center ">
             <Popover placement="bottom">
               <Portal>
-                <PopoverContent maxW="200px" className="">
+                <PopoverContent maxW="200px">
                   <PopoverArrow />
-                  <PopoverBody className="web-text-medium pointer link">
+                  <Link to="/profile">
-                    Profile
+                    <PopoverBody
+                      textAlign="center"
+                      color="#6311CB"
+                      className="web-text-medium pointer link"
+                    >
+                      View Profile
                     </PopoverBody>
-                  <Link to={"/help-and-support"}>
+                  </Link>
+
+                  {/* <Link to={"/help-and-support"}>
                     <PopoverBody className="web-text-medium pointer ">
                       Help & Support
                     </PopoverBody>
-                  </Link>
+                  </Link> */}
+                  <PopoverBody className="web-text-medium pointer ">
+                    <VStack>
+                      <Text color="#A0ABBB" fontSize={"small"} fontWeight={600}>
+                        Switch Accounts
+                      </Text>
+                      {users.map((val) => {
+                        return (
+                          <VStack
+                            className="web-text-medium pointer link"
+                            h="50px"
+                            pt={2}
+                            key={val.id}
+                            w="100%"
+                          >
+                            <HStack
+                              alignItems="flex-start"
+                              justifyContent="space-evenly"
+                              w="100%"
+                            >
+                              <Image
+                                src={womenpfp}
+                                h="31.79px"
+                                alt="Profile Picture"
+                              />
+                              <Text
+                                as={"span"}
+                                fontSize="x-small"
+                                fontWeight={600}
+                                color="#191D23"
+                              >
+                                {val.user}
+                                <Text
+                                  // as={"span"}
+                                  fontSize="x-small"
+                                  fontWeight={600}
+                                  color="#A0ABBB"
+                                >
+                                  {val.role}
+                                </Text>
+                              </Text>
+                            </HStack>
+                          </VStack>
+                        );
+                      })}
+                    </VStack>
+                  </PopoverBody>
+
                   <PopoverFooter
                     onClick={logOutHandler}
                     className="web-text-medium pointer link"
+                    display="flex"
+                    flexDirection="row"
+                    alignItems="flex-start"
+                    gap={3}
                   >
-                    Log Out
+                    <MdLogout />
+                    <Text
+                      as={"span"}
+                      color="#868788"
+                      fontWeight={600}
+                      fontSize="x-small"
+                    >
+                      Sign out of all accounts
+                    </Text>
                   </PopoverFooter>
                 </PopoverContent>
               </Portal>
-             {blur? 
+              {blur ? (
-
-
-
                 <Box>
                   <Box className="d-flex pointer  align-items-center">
                     <Avatar size="sm" boxSize={37} bg={"#210a33"} />
@@ -155,7 +236,9 @@ const HeaderMain = ({
                       </Text>
                     </Box>
                   </Box>
-              </Box>:<PopoverTrigger>
+                </Box>
+              ) : (
+                <PopoverTrigger>
                   <Box className="d-flex pointer  align-items-center">
                     <Avatar size="sm" boxSize={37} bg={"#210a33"} />
                     <Box
@@ -172,7 +255,8 @@ const HeaderMain = ({
                       </Text>
                     </Box>
                   </Box>
-              </PopoverTrigger>}
+                </PopoverTrigger>
+              )}
             </Popover>
           </Box>
         </Box>

src/Components/PayCard.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from 'react'
+import logo_card from "../assets/logo_card.svg";
+import TRANSCORP_LOGO from "../assets/TRANSCORP_LOGO.svg";
+import RuPay from "../assets/rupayImg.png";
+// import VanillaTilt from 'vanilla-tilt';
+import { Box, Text, VStack } from '@chakra-ui/layout';
+import { Image } from '@chakra-ui/image';
+import { Button } from '@chakra-ui/button';
+
+const PayCard = () => {
+    // const tiltRef = useRef(null); useEffect(() => {
+    //     const node = tiltRef.current;
+    //     if (node) {
+    //         VanillaTilt.init(node, {
+    //             max: 5,
+    //             speed: 400,
+    //             glare: true,
+    //             "max-glare": 0.5,
+    //         });
+    //     }
+    //     return () => {
+    //         if (node && node.vanillaTilt) {
+    //             node.vanillaTilt.destroy();
+    //         }
+    //     };
+    // }, []);
+
+
+    return (
+        <VStack
+            bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
+            alignItems={"start"}
+            justifyContent={"space-between"}
+            height={"100%"}
+            w={240}
+            h={"372px"}
+            rounded={"xl"}
+            p={4}
+            boxShadow={"md"}
+            position={"relative"}
+        >
+            <Box
+                width={"100%"}
+                cursor={"grab"}
+                display={"flex"}
+                justifyContent={"space-between"}
+            >
+                <Image w={20} src={logo_card} />
+                <Image w={24} src={TRANSCORP_LOGO} me={0.5} />
+            </Box>
+
+            <VStack
+                width={"100%"}
+                display={"flex"}
+                alignItems={"start"}
+                justifyContent={"space-between"}
+            >
+                <Text color={"#fff"} fontSize={"sm"}>
+                    1234 5678 1234 5678
+                </Text>
+                <Button
+                    size={"sm"}
+                    rounded={"full"}
+                    bg={"#ffffff30"}
+                    fontSize={"sm"}
+                    px={6}
+                    border={"1px solid #fff"}
+                    _hover={{ opacity: 0.8 }}
+                    _active={{ opacity: 1 }}
+                    color={"#fff"}
+                    fontWeight={500}
+                >
+                    Tap to view details
+                </Button>
+            </VStack>
+
+            <Box width={"100%"} display={"flex"} justifyContent={"end"}>
+                {/* <Image w={32} src={logo_card} /> */}
+                <Image w={24} src={RuPay} me={0.5} />
+            </Box>
+
+            <Text
+                position={"absolute"}
+                top={24}
+                right={-6}
+                transform="rotate(270deg)"
+                fontSize={"xs"}
+                color={"#9E9E9E"}
+            >
+                Valid in india
+            </Text>
+        </VStack>
+    )
+}
+
+export default PayCard

src/Components/PlatiniumGift.jsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef } from 'react'
+import logo_card from "../assets/logo_card.svg";
+import TRANSCORP_LOGO from "../assets/TRANSCORP_LOGO.svg";
+import bg from "../assets/platinium_bg.png";
+import RuPay from "../assets/rupayImg.png";
+import { Box, Text, VStack, HStack } from '@chakra-ui/layout';
+import { Image } from '@chakra-ui/image';
+import splashPattern from '../assets/splash_pattern.svg'
+import gift from '../assets/gift.svg'
+
+
+import platinum from "../assets/Platinum.svg";
+
+const PlatiniumGift = () => {
+  const tiltRef = useRef(null); useEffect(() => {
+    const node = tiltRef.current;
+    if (node) {
+      VanillaTilt.init(node, {
+        max: 5,
+        speed: 400,
+        glare: true,
+        "max-glare": 0.5,
+      });
+    }
+    return () => {
+      if (node && node.vanillaTilt) {
+        node.vanillaTilt.destroy();
+      }
+    };
+  }, []);
+
+
+  return (
+    <VStack
+      ref={tiltRef} // Attach tilt to this ref
+      // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
+      //   bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
+      bgImage={bg}
+      bgPosition={"center"} // Position the background image (e.g., center)
+      bgSize={"cover"} // Optional: Cover the entire area
+      alignItems={"start"}
+      justifyContent={"space-between"}
+      height={"100%"}
+      w={180}
+      h={"280"}
+      rounded={"xl"}
+      p={4}
+      boxShadow={"md"}
+      position={"relative"}
+    >
+      <Box
+        width={"100%"}
+        cursor={"grab"}
+        display={"flex"}
+        justifyContent={"space-between"}
+      >
+        <Image w={16} src={logo_card} />
+        <Image w={14} src={TRANSCORP_LOGO} me={0.5} />
+      </Box>
+
+      <VStack
+        width={"100%"}
+        display={"flex"}
+        alignItems={"start"}
+        justifyContent={"space-between"}
+        zIndex={9}
+        gap={1}
+        transform={'translateY(-40px)'}
+      >
+        <Text as={'span'} color={"#fff"} fontWeight={500} fontSize={"sm"}>
+          8174 35XX XXXX 1234
+        </Text>
+        <Text as={'span'} color={"#E2E2E2"} fontSize={"8px"}>
+          VALID THRU <br />
+          01/12
+        </Text>
+        <Text as={'span'} color={"#E2E2E2"} fontSize={"8px"}>
+          CVV <br />
+          123
+        </Text>
+        <Text as={'span'} color={"#fff"} fontWeight={500} fontSize={"xs"} mt={2}>
+        CARDHOLDER NAME
+        </Text>
+      </VStack>
+
+    
+      <Image h={"200px"} position={'absolute'} bottom={-10} left={0} src={splashPattern} />
+
+
+      <Box>
+        <Image w={50} position={'absolute'} bottom={"10px"} left={0} src={gift} />
+        <Image w={14} position={'absolute'} bottom={"10px"} right={3} src={RuPay} me={0.5} />
+      </Box>
+    </VStack>
+  )
+}
+
+export default PlatiniumGift

src/Components/SuccessModal/SuccessModal.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import {
+    Box, HStack, Text, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent, Button
+} from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import SecondaryButton from '../Buttons/SecondaryButton';
+import PrimaryButton from '../Buttons/PrimaryButton';
+
+// Define motion components
+const MotionBox = motion(Box);
+const MotionSvg = motion("svg");
+const MotionCircle = motion.circle;
+const MotionPolyline = motion.polyline;
+
+const SuccessModal = ({isOpen,onClose}) => {
+
+    return (
+        <>
+            <Modal isOpen={isOpen} onClose={onClose} isCentered>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader></ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        <MotionBox
+                            textAlign="center"
+                            initial={{ scale: 0.5, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            transition={{ duration: 0.5, type: "spring", stiffness: 300 }}
+                            mb={8}
+                        >
+                            {/* svg with Framer Motion animation */}
+                            <HStack justifyContent={"center"} mb={8}>
+                                <MotionSvg
+                                    version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 130.2 130.2"
+                                    width="100px"
+                                    height="100px"
+                                    initial={{ scale: 0.8 }}
+                                    animate={{ scale: 1 }}
+                                    transition={{ duration: 0.6, type: "spring", bounce: 0.5 }}
+                                >
+                                    <MotionCircle
+                                        cx="65.1"
+                                        cy="65.1"
+                                        r="62.1"
+                                        fill="#65F37C"
+                                        stroke="#159F2B"
+                                        strokeWidth="0"
+                                        strokeDasharray="1000"
+                                        strokeDashoffset="1000"
+                                        initial={{ strokeDashoffset: 1000 }}
+                                        animate={{ strokeDashoffset: 0 }}
+                                        transition={{ duration: 1 }}
+                                    />
+                                    <MotionPolyline
+                                        points="100.2,40.2 51.5,88.8 29.8,67.5"
+                                        fill="none"
+                                        stroke="#159F2B"
+                                        strokeWidth="6"
+                                        strokeLinecap="round"
+                                        strokeMiterlimit="10"
+                                        strokeDasharray="1000"
+                                        strokeDashoffset="-100"
+                                        initial={{ strokeDashoffset: 1000 }}
+                                        animate={{ strokeDashoffset: 0 }}
+                                        transition={{ duration: 0.7, delay: 1 }}
+                                    />
+                                </MotionSvg>
+                            </HStack>
+
+                            <Text
+                                color={"#100F14"}
+                                fontSize={"md"}
+                                fontWeight={"600"}
+                                textAlign={"center"}
+                                mb={2}
+                            >
+                                Your employee list has been submitted
+                            </Text>
+                            <Text
+                                color={"#686677"}
+                                fontSize={"xs"}
+                                fontWeight={"500"}
+                                textAlign={"center"}
+                            >
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            </Text>
+
+                            <HStack justifyContent={"center"} py={4}>
+                                <SecondaryButton title={"Submit new application"} />
+                                <PrimaryButton title={"Check application status"} />
+                            </HStack>
+
+                        </MotionBox>
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+        </>
+    );
+}
+
+export default SuccessModal;

src/Components/SwitchButton.jsx

@@ -26,7 +26,7 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
         width="90px"
         height="25px"
         borderRadius="20px"
-        backgroundColor={isSwitchOn ? "#004118" : "#ef0000"}
+        backgroundColor={isSwitchOn ? "#59C36A" : "#ef0000"}
         onClick={switch_onChange_handle}
         position="relative"
         fontSize="13px"
@@ -59,10 +59,10 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
       >
         <Text
           // color="#FFF"
-          fontWeight="400"
+          fontWeight="500"
           zIndex={1}
           position="absolute"
-          mb={1}
+          mb={0}
           color={isSwitchOn ? "#fff" : "#fff"}
           left={isSwitchOn ? "10px" : "auto"}
           right={isSwitchOn ? "auto" : "10px"}

src/Pages/Login.jsx

@@ -64,7 +64,7 @@ const Login = () => {
   const onSubmit = async (value) => {
     setIsLoading(true);
 
-    if (value.emailAddress === "admin@wdi.com" && value.password_hash === "Admin@123") {
+    if (value.emailAddress === "admin@optifii.com" && value.password_hash === "Admin@123") {
       return setTimeout(() => {
         // dispatch(loginUser(true));
         setIsAuthenticate(true);

src/Pages/ManageHumanResource/Approvers.jsx

@@ -1,15 +1,541 @@
-import { Box } from "@chakra-ui/react";
+import {
-import React from "react";
+  Box, Grid, Heading, Menu, MenuButton, MenuItem, MenuList, VStack,
+  Button,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Text,
+  Tag,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
+import BlueCard from "../../Components/Cards/BlueCard";
+
+import { LuListFilter } from "react-icons/lu";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+import { AiOutlineCalendar } from "react-icons/ai";
+import { IoMdArrowDropdown } from "react-icons/io";
+import { BsArrowsAngleExpand, BsFilterRight } from "react-icons/bs";
+import { ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router-dom";
 
 const Approvers = () => {
+
+  const { reimbursementStatus } = useContext(GlobalStateContext);
+  const { advanceStatus } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const navigate = useNavigate();
+
+  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 = [
+    "Report name",
+    "Report by",
+    "Report amount",
+    "Date & time",
+    "Order Status",
+    "Approver",
+    "Disburser",
+  ];
+
+  const tableHeadRowAdvance = [
+    "Report name",
+    "Report by",
+    "Report amount",
+    "Date & time",
+    "Order Status",
+    "Approver",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = reimbursementStatus.map((item, index) => ({
+    "Report name": item?.reportName,
+    "Report by": item?.reportBy,
+    "Report amount": item?.reportAmount,
+    "Date & time": item?.dateTime,
+    "Order Status": (
+      <Tag
+        my={1}
+        size={"sm"}
+        borderRadius="full"
+        color={
+          item?.orderStatus === "Approved"
+            ? "#027A48"
+            : item?.orderStatus === "Fully reimbursed"
+              ? "#3725EA"
+              : "red"
+        }
+      >
+        {item?.orderStatus}
+      </Tag>
+    ),
+    Approver: item?.approver,
+    Disburser: item?.disburser,
+  }));
+
+  const extractedArrayAdvance = advanceStatus.map((item, index) => ({
+    "Report name": item?.reportName,
+    "Report by": item?.reportBy,
+    "Report amount": item?.reportAmount,
+    "Date & time": item?.dateTime,
+    "Order Status": (
+      <Tag
+        my={1}
+        size={"sm"}
+        borderRadius="full"
+        color={
+          item?.orderStatus === "Approved"
+            ? "#027A48"
+            : item?.orderStatus === "Fully reimbursed"
+              ? "#3725EA"
+              : "red"
+        }
+      >
+        {item?.orderStatus}
+      </Tag>
+    ),
+    Approver: item?.approver,
+  }));
+
+  const requestItems = [
+    {
+      backgroundColor: "#3725EA",
+      title: "REIMBURSEMENT REQUEST",
+      count: 200,
+      linkText: "View Requests",
+    },
+    {
+      backgroundColor: "#C33FAD",
+      title: "ADVANCE EXPENSE REQUEST",
+      count: 200,
+      linkText: "View Requests",
+    },
+    {
+      backgroundColor: "#3725EA",
+      title: "WALLET APPROVAL REQUEST",
+      count: 200,
+      linkText: "View Requests",
+    },
+  ];
+
+  const gridItemsData = [
+    {
+      backgroundColor: "#218F001A",
+      iconColor: "#00A438",
+      title: "Bills for approval",
+      count: 50,
+      buttonBg: "#FCA1001A",
+      buttonBorder: "#FCA100",
+      buttonText: "Pending requests",
+      badgeText: "20 New",
+      badgeColor: "#3725EA",
+      viewTextColor: "#6311CB",
+    },
+    {
+      backgroundColor: "#218F001A",
+      iconColor: "#00A438",
+      title: "Bills for pending",
+      count: 50,
+      buttonBg: "#FCA1001A",
+      buttonBorder: "#FCA100",
+      buttonText: "Pending requests",
+      badgeText: "20 New",
+      badgeColor: "#3725EA",
+      viewTextColor: "#6311CB",
+    },
+    {
+      backgroundColor: "#218F001A",
+      iconColor: "#00A438",
+      title: "Active expense wallets",
+      count: 50,
+      buttonBg: "#3725EA1A",
+      buttonBorder: "#3725EA",
+      buttonText: "View",
+      viewTextColor: "#6311CB",
+      hideBadge: true,
+    },
+  ];
+
+  const blueCardData = [
+    {
+      backgroundColor: "#6311CB",
+      iconColor: "#00A438",
+      title: "Pending reimbursement request",
+      count: 200,
+      buttonBg: "#FCA1001A",
+      buttonBorder: "#FCA100",
+      buttonText: "View requests",
+      badgeText: "20 New",
+      badgeColor: "#3725EA",
+      viewTextColor: "#6311CB",
+    },
+    {
+      backgroundColor: "#C33FAD",
+      iconColor: "#00A438",
+      title: "Pending wallet  requests ",
+      count: 50,
+      buttonBg: "#FCA1001A",
+      buttonBorder: "#FCA100",
+      buttonText: "View requests",
+      badgeText: "20 New",
+      badgeColor: "#3725EA",
+      viewTextColor: "#6311CB",
+    },
+  ]
+
   return (
-    <Box h={"100%"} p={6}>
+    <Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
       <MiniHeader
-        title={"My Requests"}
+        title={"Approvers"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
         backButton={true}
       />
+
+      <Box>
+        <Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4}>
+          {blueCardData.map((item, index) => (
+            <BlueCard key={index} blueCardData={item} />
+          ))}
+        </Grid>
+      </Box>
+
+      {/* dhbfdbf */}
+
+      <Box
+        rounded={"xl"}
+        py={3}
+        // pb={0}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        mb={5}
+      >
+        <VStack px={3} alignItems={"start"} gap={0}>
+          <Box
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            w={"100%"}
+          >
+            <Heading fontSize={"md"} fontWeight={500}>
+              Reimbursement status
+            </Heading>
+            <Box display={"flex"} alignItems={"center"}>
+              <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>
+              <Box
+                fontSize={"sm"}
+                display={"flex"}
+                alignItems={"center"}
+                bg={"#F2EEF8"}
+                p={"6px 10px"}
+                rounded={"md"}
+              >
+                <Text
+                  as={"span"}
+                  display={"flex"}
+                  alignItems={"center"}
+                  gap={1}
+                >
+                  <AiOutlineCalendar fontSize={"16px"} /> Time Period :
+                </Text>
+                <Text
+                  as={"span"}
+                  display={"flex"}
+                  alignItems={"center"}
+                  color={"#6311CB"}
+                  fontWeight={500}
+                  mx={2}
+                >
+                  <Text as={"span"} me={5}>
+                    Feb 20 - Jan 30, 2024{" "}
+                  </Text>
+                  <IoMdArrowDropdown />
+                </Text>
+              </Box>
+            </Box>
+          </Box>
+        </VStack>
+        <hr />
+        <VStack mb={3} px={3} alignItems={"start"} gap={0}>
+          <Box
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            w={"100%"}
+          >
+            <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 display={"flex"} gap={2} alignItems={"center"}>
+              <InputGroup width={300} size="sm" ml={5}>
+                <InputLeftElement pointerEvents="none">
+                  <SearchIcon color="gray.300" />
+                </InputLeftElement>
+                <Input
+                  type="search"
+                  placeholder="Search"
+                  rounded="md"
+                  focusBorderColor="#3725EA"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </InputGroup>
+              <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>
+
+              <BsArrowsAngleExpand
+                onClick={() => navigate("/reimbursement-request")}
+                as={Button}
+                color={"#6311CB"}
+                size={18}
+                cursor={"pointer"}
+              />
+            </Box>
+          </Box>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+      </Box>
+
+      <Box
+        rounded={"xl"}
+        py={3}
+        // pb={0}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+      >
+        <VStack px={3} alignItems={"start"} gap={0}>
+          <Box
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            w={"100%"}
+          >
+            <Heading fontSize={"md"} fontWeight={500}>
+              Advance expense status
+            </Heading>
+            <Box display={"flex"} alignItems={"center"}>
+              <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>
+              <Box
+                fontSize={"sm"}
+                display={"flex"}
+                alignItems={"center"}
+                bg={"#F2EEF8"}
+                p={"6px 10px"}
+                rounded={"md"}
+              >
+                <Text
+                  as={"span"}
+                  display={"flex"}
+                  alignItems={"center"}
+                  gap={1}
+                >
+                  <AiOutlineCalendar fontSize={"16px"} /> Time Period :
+                </Text>
+                <Text
+                  as={"span"}
+                  display={"flex"}
+                  alignItems={"center"}
+                  color={"#6311CB"}
+                  fontWeight={500}
+                  mx={2}
+                >
+                  <Text as={"span"} me={5}>
+                    Feb 20 - Jan 30, 2024{" "}
+                  </Text>
+                  <IoMdArrowDropdown />
+                </Text>
+              </Box>
+            </Box>
+          </Box>
+        </VStack>
+        <hr />
+        <VStack mb={3} px={3} alignItems={"start"} gap={0}>
+          <Box
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            w={"100%"}
+          >
+            <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 display={"flex"} gap={2} alignItems={"center"}>
+              <InputGroup width={300} size="sm" ml={5}>
+                <InputLeftElement pointerEvents="none">
+                  <SearchIcon color="gray.300" />
+                </InputLeftElement>
+                <Input
+                  type="search"
+                  placeholder="Search"
+                  rounded="md"
+                  focusBorderColor="#3725EA"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </InputGroup>
+              <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>
+              <BsArrowsAngleExpand
+                onClick={() => navigate("/reimbursement-request")}
+                as={Button}
+                color={"#6311CB"}
+                size={18}
+                cursor={"pointer"}
+              />
+            </Box>
+          </Box>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRowAdvance}
+          data={extractedArrayAdvance}
+          isLoading={isLoading}
+        />
+      </Box>
     </Box>
   );
 };

src/Pages/ManageHumanResource/Employees.jsx

@@ -1,9 +1,11 @@
 import {
   Box,
   Button,
+  Checkbox,
   Divider,
   HStack,
   Icon,
+  IconButton,
   Image,
   Input,
   InputGroup,
@@ -16,6 +18,7 @@ import {
   Tag,
   TagLabel,
   Text,
+  useDisclosure,
   VStack,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
@@ -24,32 +27,49 @@ 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 { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md";
-import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
+import { FaRegUser } from "react-icons/fa";
-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 { Link, useNavigate } 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 { LuEye, LuListFilter } from "react-icons/lu";
-import { BsFilterRight } from "react-icons/bs";
+import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs";
 import pdfIcon from "../../assets/pdfIcon.svg";
 import ExcelIcon from "../../assets/ExcelIcon.svg"
+import { HiOutlineUserGroup } from "react-icons/hi";
+import EmployeesAddModal from "./EmployeesAddModal";
+import EmployeesEditModal from "./EmployeesEditModal";
+import EmployeesAddMultipleModal from "./EmployeesAddMultipleModal";
 
 const Employees = () => {
   const { employees } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const navigate = useNavigate();
+
+  const {
+    isOpen: isAddOpen,
+    onOpen: onAddOpen,
+    onClose: onAddClose,
+  } = useDisclosure(); // For EmployeesAddModal
+
+  const {
+    isOpen: isEditOpen,
+    onOpen: onEditOpen,
+    onClose: onEditClose,
+  } = useDisclosure(); // For EmployeesEditModal
+
+  const {
+    isOpen: isMultipleOpen,
+    onOpen: onMultipleOpen,
+    onClose: onMultipleClose,
+  } = useDisclosure(); // For EmployeesAddMultipleModal
 
   useEffect(() => {
     // Set isLoading to true
@@ -81,26 +101,28 @@ const Employees = () => {
 
   const extractedArray = employees.map((item, index) => ({
     "Emp ID": (
-      <Radio colorScheme="purple" value="1">
+      <Checkbox colorScheme="purple" value="1">
         <Text
           as={"span"}
-          display={"flex"}
-          gap={2}
-          alignItems={"center"}
           fontSize={"xs"}
         >
-          <Icon
-            as={PiReceipt}
-            boxSize={8}
-            p={1.5}
-            bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
-            rounded={"full"}
-          />
           {item?.EmpID}
         </Text>
-      </Radio>
+      </Checkbox>
+    ),
+    "Name": (
+      <HStack>
+        <Image
+          borderRadius='full'
+          boxSize='40px'
+          src='https://bit.ly/dan-abramov'
+          alt='Dan Abramov'
+        />
+        <Text mb={0}>
+          {item?.Name}
+        </Text>
+      </HStack>
     ),
-    Name: item?.Name,
     "Email Address": item?.emailAddress,
     "Mobile number": item?.mobileNumber,
     Grade: item?.Grade,
@@ -118,8 +140,7 @@ const Employees = () => {
               ? "red"
               : "gray"
         }
-        border={`1px solid ${
+        border={`1px solid ${item?.status === "Active"
-          item?.status === "Active"
           ? "green"
           : item?.status === "Inactive"
             ? "red"
@@ -132,42 +153,42 @@ const Employees = () => {
       </Tag>
     ),
     Action: (
-      <Box
+      <Box>
-        display={"flex"}
+        <Menu>
-        gap={1}
+          <MenuButton
-        alignItems={"center"}
+            as={IconButton}
-        justifyContent={"center"}
+            aria-label='Options'
+            icon={<BsThreeDotsVertical />}
+            bg={"transparent"}
+          />
+          <MenuList>
+            <MenuItem
+              icon={<MdOutlineModeEdit color="#6311CB" size={16} />}
+              fontSize={"sm"}
+              fontWeight={500}
+              color={"#4D4D4D"}
             >
-        <Button
+              Edit
-          _hover={{ color: "gray.800", bg: "gray.100" }}
+            </MenuItem>
-          transition={"0.5s"}
+            <MenuItem
-          size={"sm"}
+              icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}
-          bg={"none"}
+              fontSize={"sm"}
-          p={0}
+              fontWeight={500}
-          color="gray.600"
+              color={"#4D4D4D"}
             >
-          <FaRegEye fontSize={"18px"} />
+              Delete
-        </Button>
+            </MenuItem>
-        <Button
+            <MenuItem
-          _hover={{ color: "gray.800", bg: "gray.100" }}
+              icon={<LuEye color="#6311CB" size={16} />}
-          transition={"0.5s"}
+              fontSize={"sm"}
-          size={"sm"}
+              fontWeight={500}
-          bg={"none"}
+              color={"#4D4D4D"}
-          p={0}
+              onClick={()=>navigate("/employees/view")}
-          color="gray.600"
             >
-          <AiOutlineEdit fontSize={"19px"} />
+              View
-        </Button>
+            </MenuItem>
-        <Button
+          </MenuList>
-          _hover={{ color: "gray.800", bg: "gray.100" }}
+        </Menu>
-          transition={"0.5s"}
-          size={"sm"}
-          bg={"none"}
-          p={0}
-          color="gray.600"
-        >
-          <RiDeleteBin5Line fontSize={"18px"} />
-        </Button>
       </Box>
     ),
   }));
@@ -191,7 +212,7 @@ const Employees = () => {
             alignItems={"center"}
             w={"100%"}
           >
-            <InputGroup width={300} size="sm" ml={5}>
+            <InputGroup width={300} size="sm">
               <InputLeftElement pointerEvents="none">
                 <SearchIcon color="gray.300" />
               </InputLeftElement>
@@ -224,7 +245,29 @@ const Employees = () => {
                   <MenuItem fontSize={"sm"}><Image src={ExcelIcon} me={2} /> Export as Excel</MenuItem>
                 </MenuList>
               </Menu>
-              <PrimaryButton leftIcon={<AddIcon />} title={"Add Employee"} />
+              <Menu>
+                <PrimaryButton as={MenuButton} leftIcon={<AddIcon />} title={"Add Employee"} />
+                <MenuList>
+                  <MenuItem
+                    icon={<FaRegUser size={14} />}
+                    fontSize={"xs"}
+                    fontWeight={500}
+                    color={"#4D4D4D"}
+                    onClick={onAddOpen}
+                  >
+                    Add single employee
+                  </MenuItem>
+                  <MenuItem
+                    icon={<HiOutlineUserGroup size={14} />}
+                    fontSize={"xs"}
+                    fontWeight={500}
+                    color={"#4D4D4D"}
+                    onClick={onMultipleOpen}
+                  >
+                    Add multiple employee
+                  </MenuItem>
+                </MenuList>
+              </Menu>
             </Box>
           </Box>
           <Divider />
@@ -251,13 +294,12 @@ const Employees = () => {
                 </MenuList>
               </Menu>
             </Box>
-            <Box>
+            <HStack>
-              <Link to={"#"} style={{marginRight:"8px"}}>
               <SecondaryButton
+                onClick={() => navigate("/employees/pull-back-funds")}
                 leftIcon={<Image me={2} src={backFund} w={"17px"} />}
                 title={"Pull back funds"}
               />
-              </Link>
               <Menu>
                 <MenuButton
                   as={Button}
@@ -278,7 +320,7 @@ const Employees = () => {
                   <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
                 </MenuList>
               </Menu>
-            </Box>
+            </HStack>
           </HStack>
         </VStack>
         <NormalTable
@@ -288,6 +330,15 @@ const Employees = () => {
           isLoading={isLoading}
         />
       </Box>
+      {/* Call EmployeesAddModal */}
+      <EmployeesAddModal isOpen={isAddOpen} onClose={onAddClose} />
+
+      {/* Call EmployeesEditModal */}
+      <EmployeesEditModal isOpen={isEditOpen} onClose={onEditClose} />
+
+      {/* Call EmployeesEditModal */}
+      <EmployeesAddMultipleModal isOpen={isMultipleOpen} onClose={onMultipleClose} />
+
     </Box>
   );
 };

src/Pages/ManageHumanResource/EmployeesAddModal.jsx

@@ -0,0 +1,101 @@
+import { Box, HStack, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Select, Text } from '@chakra-ui/react'
+import React, { useState } from 'react'
+import SecondaryButton from '../../Components/Buttons/SecondaryButton'
+import PrimaryButton from '../../Components/Buttons/PrimaryButton'
+import PhoneInput from "react-phone-input-2";
+import "react-phone-input-2/lib/style.css";
+
+const EmployeesAddModal = ({ isOpen, onClose }) => {
+    
+    const [phone, setPhone] = useState("");
+
+    return (
+        <Box>
+            {/* modal  */}
+            <Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader>Add employee</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        <HStack mb={4}>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Employee name
+                                </Text>
+                                <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+                            </Box>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Email address
+                                </Text>
+                                <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+                            </Box>
+                        </HStack>
+                        <HStack mb={4}>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Phone number
+                                </Text>
+                                {/* <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} /> */}
+                                <PhoneInput
+                                    country={"in"} // Default country
+                                    value={phone}
+                                    onChange={setPhone}
+                                    inputStyle={{
+                                        width: "100%",
+                                        borderRadius: "md",
+                                        paddingLeft: "8",
+                                        border: "1px solid #e2e8f0",
+                                        height: "40px"
+                                    }}
+                                    buttonStyle={{
+                                        border: "none",
+                                        borderRadius: "8px 0 0 8px",
+                                        backgroundColor: "transparent",
+                                    }}
+                                />
+                            </Box>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Employee code
+                                </Text>
+                                <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+                            </Box>
+                        </HStack>
+                        <HStack mb={4}>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Department
+                                </Text>
+                                <Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
+                                    <option value='option1'>Option 1</option>
+                                    <option value='option2'>Option 2</option>
+                                    <option value='option3'>Option 3</option>
+                                </Select>
+                            </Box>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Designation
+                                </Text>
+                                <Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
+                                    <option value='option1'>Option 1</option>
+                                    <option value='option2'>Option 2</option>
+                                    <option value='option3'>Option 3</option>
+                                </Select>
+                            </Box>
+                        </HStack>
+
+                        <HStack py={4} justifyContent={"center"}>
+                            <SecondaryButton title={"Cancel"} />
+                            <PrimaryButton title={"Add"} />
+                        </HStack>
+
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+        </Box>
+    )
+}
+
+export default EmployeesAddModal

src/Pages/ManageHumanResource/EmployeesAddMultipleModal.jsx

@@ -0,0 +1,91 @@
+import { Box, HStack, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text } from '@chakra-ui/react'
+import React, { useState } from 'react'
+import PrimaryButton from '../../Components/Buttons/PrimaryButton'
+import FileUploader from '../../Components/FileUploader/FileUploader'
+import SuccessModal from '../../Components/SuccessModal/SuccessModal'
+import { useDisclosure } from '@chakra-ui/react'
+
+const EmployeesAddMultipleModal = ({ isOpen, onClose }) => {
+    const { isOpen: isSuccessOpen, onOpen: onSuccessOpen, onClose: onSuccessClose } = useDisclosure();
+    const [isLoading, setIsLoading] = useState(false);
+    
+    const handleFileUploadMultipleEmp = async (file, setPreview) => {
+        setIsLoading(true);
+        const formData = new FormData();
+        formData.append("document", file); // Append file
+
+        const code = sessionStorage?.getItem("codeCorporate");
+        try {
+            const res = await sendFile({ data: formData, code }); // Upload file to server
+            console.log(res);
+            if (res?.data?.data) {
+                setCorpData({ ...corpData, gst_file_path_name: res?.data?.data });
+                setValue("gst_file_path_name", res?.data?.data);
+                setPreview(res?.data?.data);
+                toast({
+                    render: () => <ToastBox message={res?.data?.message} />,
+                });
+                setIsLoading(false);
+            } else if (res?.error?.data?.message) {
+                toast({
+                    render: () => <ToastBox status={'error'} message={res?.error?.data?.message} />,
+                });
+            } else if (res?.error) {
+                toast({
+                    render: () => <ToastBox status={'error'} message={"Something went wrong"} />,
+                });
+            }
+            setIsLoading(false);
+        } catch (error) {
+            console.error("File upload failed", error);
+            setIsLoading(false);
+        }
+    };
+
+    const handleNextClick = () => {
+        // Trigger success modal here
+        onSuccessOpen();
+    };
+
+    return (
+        <Box>
+            {/* modal  */}
+            <Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader textAlign={"center"}>Get your sheet from excel</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        <Box>
+                            <Text fontSize={"sm"} fontWeight={500} mb={2} textAlign={"center"}>
+                                Need help getting started?
+                            </Text>
+                            <Text fontSize={"sm"} fontWeight={500} mb={2} textAlign={"center"}>
+                                <Text as={"span"} color={"#41A3FD"} me={1}> Read and learn</Text>
+                                about importing to OptiFii
+                            </Text>
+                            <Text fontSize={"sm"} fontWeight={500} mb={2} textAlign={"center"}>
+                                <Text as={"span"} color={"#41A3FD"} me={1}>Download</Text>
+                                a sample Excel file
+                            </Text>
+
+                            <FileUploader
+                                maxFileSize={3 * 1024 * 1024}  // Max 3MB size
+                                onFileUpload={handleFileUploadMultipleEmp}
+                            />
+                        </Box>
+
+                        <HStack py={4} justifyContent={"center"}>
+                            <PrimaryButton onClick={handleNextClick} title={"Next"} w={"40%"} isLoading={isLoading} />
+                        </HStack>
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+
+            {/* success modal*/}
+            <SuccessModal isOpen={isSuccessOpen} onClose={onSuccessClose} />
+        </Box>
+    );
+}
+
+export default EmployeesAddMultipleModal;

src/Pages/ManageHumanResource/EmployeesEditModal.jsx

@@ -0,0 +1,101 @@
+import { Box, HStack, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Select, Text } from '@chakra-ui/react'
+import React, { useState } from 'react'
+import SecondaryButton from '../../Components/Buttons/SecondaryButton'
+import PrimaryButton from '../../Components/Buttons/PrimaryButton'
+import PhoneInput from "react-phone-input-2";
+import "react-phone-input-2/lib/style.css";
+
+const EmployeesEditModal = ({ isOpen, onClose }) => {
+
+    const [phone, setPhone] = useState("");
+
+    return (
+        <Box>
+            {/* modal  */}
+            <Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader>Edit employee</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        <HStack mb={4}>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Employee name
+                                </Text>
+                                <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+                            </Box>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Email address
+                                </Text>
+                                <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+                            </Box>
+                        </HStack>
+                        <HStack mb={4}>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Phone number
+                                </Text>
+                                {/* <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} /> */}
+                                <PhoneInput
+                                    country={"in"} // Default country
+                                    value={phone}
+                                    onChange={setPhone}
+                                    inputStyle={{
+                                        width: "100%",
+                                        borderRadius: "md",
+                                        paddingLeft: "8",
+                                        border: "1px solid #e2e8f0",
+                                        height: "40px"
+                                    }}
+                                    buttonStyle={{
+                                        border: "none",
+                                        borderRadius: "8px 0 0 8px",
+                                        backgroundColor: "transparent",
+                                    }}
+                                />
+                            </Box>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Employee code
+                                </Text>
+                                <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+                            </Box>
+                        </HStack>
+                        <HStack mb={4}>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Department
+                                </Text>
+                                <Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
+                                    <option value='option1'>Option 1</option>
+                                    <option value='option2'>Option 2</option>
+                                    <option value='option3'>Option 3</option>
+                                </Select>
+                            </Box>
+                            <Box flex={1}>
+                                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                    Designation
+                                </Text>
+                                <Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
+                                    <option value='option1'>Option 1</option>
+                                    <option value='option2'>Option 2</option>
+                                    <option value='option3'>Option 3</option>
+                                </Select>
+                            </Box>
+                        </HStack>
+
+                        <HStack py={4} justifyContent={"center"}>
+                            <SecondaryButton title={"Cancel"} />
+                            <PrimaryButton title={"Add"} />
+                        </HStack>
+
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+        </Box>
+    )
+}
+
+export default EmployeesEditModal

src/Pages/ManageHumanResource/EmployeesPullBackFunds.jsx

@@ -0,0 +1,52 @@
+import { Box, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import React from "react";
+import PullBackFundsExpense from "./PullBackFundsExpense";
+import PullBackFundsBenefit from "./PullBackFundsBenefit";
+import PullBackFundsGifts from "./PullBackFundsGifts";
+
+const EmployeesPullBackFunds = () => {
+    return (
+        <Box p={4} overflowX={"scroll"}>
+            <Tabs position='relative' variant='unstyled'>
+                <TabList background={"#fff"} pt={2}>
+                    <Tab
+                        color={"#313039"}
+                        fontSize={"sm"}
+                        fontWeight={500}
+                        _selected={{
+                            color: "#5E0FCD",
+                        }}>Expense</Tab>
+                    <Tab 
+                    color={"#313039"}
+                        fontSize={"sm"}
+                        fontWeight={500}
+                        _selected={{
+                            color: "#5E0FCD",
+                        }}>Benefit</Tab>
+                    <Tab 
+                    color={"#313039"}
+                        fontSize={"sm"}
+                        fontWeight={500}
+                        _selected={{
+                            color: "#5E0FCD",
+                        }}>Gifts</Tab>
+                </TabList>
+                <TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
+
+                <TabPanels>
+                    <TabPanel px={0}>
+                        <PullBackFundsExpense />
+                    </TabPanel>
+                    <TabPanel px={0}>
+                        <PullBackFundsBenefit />
+                    </TabPanel>
+                    <TabPanel px={0}>
+                        <PullBackFundsGifts />
+                    </TabPanel>
+                </TabPanels>
+            </Tabs>
+        </Box>
+    );
+};
+
+export default EmployeesPullBackFunds;

src/Pages/ManageHumanResource/EmployeesView.jsx

@@ -0,0 +1,555 @@
+import {
+    Badge, Box, HStack, Image, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs, Text,
+    Heading, Menu, MenuButton, MenuItem, MenuList, VStack, Button,
+    Tag,
+} from '@chakra-ui/react'
+import React, { useContext, useEffect, useState } from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import MiniHeader from '../../Components/MiniHeader'
+import { GoDotFill } from 'react-icons/go'
+import PayCard from '../../Components/PayCard'
+import PrimaryButton from '../../Components/Buttons/PrimaryButton'
+import { BsPrinter } from 'react-icons/bs'
+import { LuListFilter, LuScrollText } from "react-icons/lu";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+import { AiOutlineCalendar } from "react-icons/ai";
+import { IoMdArrowDropdown } from "react-icons/io";
+import { BsArrowsAngleExpand, BsFilterRight } from "react-icons/bs";
+import { ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import GlobalStateContext from '../../Contexts/GlobalStateContext'
+import { MdDeleteOutline, MdNoFood, MdOutlineModeEdit } from 'react-icons/md'
+import SecondaryButton from '../../Components/Buttons/SecondaryButton'
+import { useNavigate } from 'react-router-dom'
+import SwitchButton from '../../Components/SwitchButton'
+
+
+
+const EmployeesView = () => {
+
+    const { reimbursementStatus, advanceStatus, walletExpense } = useContext(GlobalStateContext); 
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [isSwitchOn, setIsSwitchOn] = useState(true);
+
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        setIsLoading(true);
+        const timer = setTimeout(() => {
+            setIsLoading(false);
+        }, 500); // Simulated delay
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    // ===============================[ Table Headers ]
+    const tableHeadRow = [
+        'Report name',
+        'Report amount',
+        'Date & time',
+        'Order Status',
+        'Approver',
+        'Disburser',
+        '',
+    ];
+
+    const tableHeadRowAdvance = [
+        'Wallet Name',
+        'Card',
+        'Date & time',
+        'Amount',
+        'Merchant',
+    ];
+
+    const walletExpenseHeader = [
+        'Wallet',
+        'Wallet amount',
+        'Balance remaining',
+        'Status',
+    ];
+
+    // ===============================[ Extracted Data for Reimbursement Status ]
+    const extractedArray = reimbursementStatus.map((item) => ({
+        'Report name': (
+            <HStack>
+                <Box p={2} bg="#ebe0f8" rounded="full">
+                    <LuScrollText color="#6311CB" />
+                </Box>
+                <Text mb={0} fontWeight={600} fontSize="xs">
+                    {item.reportName || 'Food for June 30'}
+                </Text>
+            </HStack>
+        ),
+        'Report amount': (
+            <Text mb={0} fontWeight={500} fontSize="xs" color="#00A438">
+                ₹ {item.reportAmount || 5000}
+            </Text>
+        ),
+        'Date & time': (
+            <Text mb={0} fontSize="xs">
+                {item.date || 'Jun 10, 2024'}
+            </Text>
+        ),
+        'Order Status': (
+            <Tag
+                my={1}
+                size="sm"
+                borderRadius="full"
+                color={
+                    item.orderStatus === 'Approved'
+                        ? '#027A48'
+                        : item.orderStatus === 'Fully reimbursed'
+                            ? '#3725EA'
+                            : 'red'
+                }
+            >
+                {item.orderStatus}
+            </Tag>
+        ),
+        Approver: (
+            <Text mb={0} fontSize="xs">
+                {item.approver || 'Reethik Thota'}
+            </Text>
+        ),
+        Disburser: (
+            <Text mb={0} fontSize="xs">
+                {item.disburser || 'Reethik Thota L1'}
+            </Text>
+        ),
+        '': (
+            <Text mb={0} size="xs" bg="#6311CB" rounded="md" p={1} fontWeight={400} color="#fff">
+                View Reports
+            </Text>
+        ),
+    }));
+
+    // ===============================[ Extracted Data for Advance Status ]
+    const extractedArrayAdvance = advanceStatus.map((item) => ({
+        'Wallet Name': (
+            <HStack>
+                <Box p={2} bg="#ebe0f8" rounded="full">
+                    <MdNoFood color="#6311CB" />
+                </Box>
+                <Text mb={0} fontSize="xs">
+                    {item.walletName || 'Food'}
+                </Text>
+            </HStack>
+        ),
+        Card: (
+            <Text mb={0} fontWeight={600} fontSize="xs">
+                {item.card || 'Visa card  **** 4831'}
+            </Text>
+        ),
+        'Date & time': (
+            <Text mb={0} fontSize="xs">
+                {item.date || 'Jun 10, 2024'}
+            </Text>
+        ),
+        Amount: (
+            <Text mb={0} fontWeight={500} fontSize="xs" color="#00A438">
+                ₹ {item.amount || 5000}
+            </Text>
+        ),
+        Merchant: (
+            <Text mb={0} fontSize="xs">
+                {item.merchant || 'Dine in'}
+            </Text>
+        ),
+    }));
+
+    // ===============================[ Wallet Expense Table ]
+    const extractedWalletExpense = walletExpense.map((item, index) => ({
+        Wallet: (
+          <HStack key={`wallet-${index}`}>
+            <Box p={2} bg="#ebe0f8" rounded="full">
+              <MdNoFood color="#6311CB" />
+            </Box>
+            <Text mb={0} fontSize="xs">
+              {item.wallet || 'Food'} {/* Render wallet name */}
+            </Text>
+          </HStack>
+        ),
+        'Wallet amount': (
+          <Text key={`walletAmount-${index}`} mb={0} color={"#00A438"} fontSize="xs">
+             {item.walletAmount || 5000} {/* Render walletAmount */}
+          </Text>
+        ),
+        'Balance remaining': (
+          <Text key={`balance-${index}`} mb={0} color={"#00A438"} fontSize="xs">
+            {item.balanceRemaining || '₹ 2000'} {/* Render balanceRemaining */}
+          </Text>
+        ),
+        Status: (
+            <Box
+            display={"flex"}
+            gap={1}
+            alignItems={"center"}
+            justifyContent={"center"}
+          >
+            <SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
+          </Box>
+        ),
+      }));
+
+
+
+    return (
+        <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
+            <MiniHeader backButton={true} title={""} />
+            <Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
+                <HStack justifyContent={"space-between"}>
+                    <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
+                        Employee Details
+                    </Text>
+                    <HStack>
+                        <SecondaryButton
+                            leftIcon={<MdOutlineModeEdit size={16} />}
+                            title={"Edit"} />
+                        <SecondaryButton
+                            border={"1px solid #EE1B24"}
+                            color={"#EE1B24"}
+                            leftIcon={<MdDeleteOutline size={16} />}
+                            title={"Delete"} />
+                    </HStack>
+                </HStack>
+
+                <HStack spacing={6} alignItems={"start"}>
+                    <HStack spacing={4} alignItems={"start"}>
+                        <Image
+                            borderRadius='full'
+                            boxSize='80px'
+                            src='https://bit.ly/dan-abramov'
+                            alt='Dan Abramov'
+                        />
+                        <VStack spacing={"1"} alignItems={"start"}>
+                            <Text mb={0} fontSize={"md"} fontWeight={500}>
+                                Pooja Shah
+                            </Text>
+                            <Text fontSize={"xs"} color={"#999999"} mb={0}>Design - UI/UX Designer</Text>
+                            <Text mb={0} fontSize={"xs"} fontWeight={500}>
+                                Employee ID : WD-0067
+                            </Text>
+                            <Text fontSize={"xs"} color={"#999999"}>Member Since : 1st Jan 2022</Text>
+                        </VStack>
+
+                        <Badge
+                            bg={"#ebf8ef"}
+                            color={"#00A438"}
+                            fontSize={"xs"}
+                            borderRadius={"full"}
+                            border={"1px solid #00A438"}
+                            fontWeight={400}
+                            py={1}
+                            px={3}
+                        >
+                            <HStack>
+                                <GoDotFill color={"#00A438"} />
+                                <Text mb={0}>Active</Text>
+                            </HStack>
+                        </Badge>
+                    </HStack>
+                    <Box
+                        borderLeft="1px dashed #BCBCBC"
+                        pl={6}
+                    >
+                        <HStack mb={2}>
+                            <Text fontSize={"xs"} color={"#999999"} mb={0}>Phone :</Text>
+                            <Text mb={0} fontSize={"xs"} fontWeight={500}>
+                                +91 4578451245
+                            </Text>
+                        </HStack>
+                        <HStack mb={2}>
+                            <Text fontSize={"xs"} color={"#999999"} mb={0}>Email :</Text>
+                            <Text mb={0} fontSize={"xs"} fontWeight={500}>
+                                poojashah@wdipl.com
+                            </Text>
+                        </HStack>
+                        <HStack>
+                            <Text fontSize={"xs"} color={"#999999"} mb={0}>Grade :</Text>
+                            <Text mb={0} fontSize={"xs"} fontWeight={500}>
+                                A01
+                            </Text>
+                        </HStack>
+                    </Box>
+
+                </HStack>
+            </Box>
+            <HStack spacing={4} alignItems={"start"} my={4}>
+                <Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
+                    <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
+                        Card Details
+                    </Text>
+
+                    <HStack spacing={6} alignItems={"start"}>
+                        <HStack spacing={8} alignItems={"center"}>
+                            <PayCard />
+
+                            <VStack alignItems={"start"} spacing={10}>
+                                <Box>
+                                    <Text fontSize={"sm"} color={"#999999"} mb={1}>Card ID</Text>
+                                    <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                                        0067445
+                                    </Text>
+                                </Box>
+                                <Box>
+                                    <Text fontSize={"sm"} color={"#999999"} mb={1}>Card limit</Text>
+                                    <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                                        ₹ 10,000
+                                    </Text>
+                                </Box>
+                                <Box>
+                                    <Text fontSize={"sm"} color={"#999999"} mb={1}>Card type</Text>
+                                    <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                                        Reloadable
+                                    </Text>
+                                </Box>
+                            </VStack>
+                        </HStack>
+
+
+                    </HStack>
+                </Box>
+                <Box w={"60%"} shadow={'md'} p={4} bg={'#fff'} rounded={"md"} flex={1}>
+                    <HStack justifyContent={"space-between"} mb={4}>
+                        <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
+                            Wallets
+                        </Text>
+                        <PrimaryButton
+                            leftIcon={<BsPrinter size={"16"} />}
+                            title={"Pull back funds"}
+                            onClick={()=>navigate("/employees/view/wallet-pull-back-funds")}
+                        />
+                    </HStack>
+                    <Box>
+                        <Tabs position='relative' variant='unstyled'>
+                            <TabList>
+                                <Tab
+                                    color={"#313039"}
+                                    fontSize={"sm"}
+                                    fontWeight={500}
+                                    _selected={{
+                                        color: "#5E0FCD",
+                                    }}>
+                                    Expense
+                                </Tab>
+                                <Tab
+                                    color={"#313039"}
+                                    fontSize={"sm"}
+                                    fontWeight={500}
+                                    _selected={{
+                                        color: "#5E0FCD",
+                                    }}>Benefit</Tab>
+                                <Tab
+                                    color={"#313039"}
+                                    fontSize={"sm"}
+                                    fontWeight={500}
+                                    _selected={{
+                                        color: "#5E0FCD",
+                                    }}>Gifts</Tab>
+                            </TabList>
+                            <TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
+                            <TabPanels>
+                                <TabPanel px={0}>
+                                    <NormalTable
+                                        emptyMessage={`We don't have any Sponers `}
+                                        tableHeadRow={walletExpenseHeader}
+                                        data={extractedWalletExpense}
+                                        isLoading={isLoading}
+                                    />
+                                </TabPanel>
+                                <TabPanel px={0}>
+                                    <NormalTable
+                                        emptyMessage={`We don't have any Sponers `}
+                                        tableHeadRow={walletExpenseHeader}
+                                        data={extractedWalletExpense}
+                                        isLoading={isLoading}
+                                    />
+                                </TabPanel>
+                                <TabPanel px={0}>
+                                    <NormalTable
+                                        emptyMessage={`We don't have any Sponers `}
+                                        tableHeadRow={walletExpenseHeader}
+                                        data={extractedWalletExpense}
+                                        isLoading={isLoading}
+                                    />
+                                </TabPanel>
+                            </TabPanels>
+                        </Tabs>
+                    </Box>
+
+                </Box>
+
+            </HStack>
+            {/* dhbfdbf */}
+
+            <Box
+                rounded={"xl"}
+                py={3}
+                // pb={0}
+                display={"flex"}
+                flexDirection={"column"}
+                bg={"#fff"}
+                shadow={"md"}
+                mb={5}
+            >
+                <VStack px={3} alignItems={"start"} gap={0}>
+                    <Box
+                        display={"flex"}
+                        justifyContent={"space-between"}
+                        alignItems={"center"}
+                        w={"100%"}
+                    >
+                        <Heading fontSize={"md"} fontWeight={500}>
+                            Recent Reports
+                        </Heading>
+                        <HStack mb={3} spacing={4}>
+                            <Box
+                                fontSize={"sm"}
+                                display={"flex"}
+                                alignItems={"center"}
+                                bg={"#F2EEF8"}
+                                p={"6px 10px"}
+                                rounded={"md"}
+                            >
+                                <Text
+                                    as={"span"}
+                                    display={"flex"}
+                                    alignItems={"center"}
+                                    gap={1}
+                                >
+                                    <AiOutlineCalendar fontSize={"16px"} /> Time Period :
+                                </Text>
+                                <Text
+                                    as={"span"}
+                                    display={"flex"}
+                                    alignItems={"center"}
+                                    color={"#6311CB"}
+                                    fontWeight={500}
+                                    mx={2}
+                                >
+                                    <Text as={"span"} me={5}>
+                                        Feb 20 - Jan 30, 2024{" "}
+                                    </Text>
+                                    <IoMdArrowDropdown />
+                                </Text>
+                            </Box>
+                            <Menu>
+                                <MenuButton
+                                    as={Button}
+                                    leftIcon={<FaArrowUpFromBracket />}
+                                    rightIcon={<ChevronDownIcon />}
+                                    fontSize={"xs"}
+                                    colorScheme="gray"
+                                    color={"gray.700"}
+                                    variant="outline"
+                                    size={"sm"}
+                                >
+                                    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>
+                            <BsArrowsAngleExpand
+                                onClick={() => navigate("/employees/view/recent-reports")}
+                                as={Button}
+                                color={"#6311CB"}
+                                size={18}
+                                cursor={"pointer"}
+                            />
+                        </HStack>
+                    </Box>
+                </VStack>
+
+                <NormalTable
+                    emptyMessage={`We don't have any Sponers `}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                />
+            </Box>
+
+            <Box
+                rounded={"xl"}
+                py={3}
+                // pb={0}
+                display={"flex"}
+                flexDirection={"column"}
+                bg={"#fff"}
+                shadow={"md"}
+            >
+                <VStack px={3} alignItems={"start"} gap={0}>
+                    <Box
+                        display={"flex"}
+                        justifyContent={"space-between"}
+                        alignItems={"center"}
+                        w={"100%"}
+                    >
+                        <Heading fontSize={"md"} fontWeight={500}>
+                            Recent Transaction
+                        </Heading>
+                        <HStack mb={3} spacing={4}>
+                            <Box
+                                fontSize={"sm"}
+                                display={"flex"}
+                                alignItems={"center"}
+                                bg={"#F2EEF8"}
+                                p={"6px 10px"}
+                                rounded={"md"}
+                            >
+                                <Text
+                                    as={"span"}
+                                    display={"flex"}
+                                    alignItems={"center"}
+                                    gap={1}
+                                >
+                                    <AiOutlineCalendar fontSize={"16px"} /> Time Period :
+                                </Text>
+                                <Text
+                                    as={"span"}
+                                    display={"flex"}
+                                    alignItems={"center"}
+                                    color={"#6311CB"}
+                                    fontWeight={500}
+                                    mx={2}
+                                >
+                                    <Text as={"span"} me={5}>
+                                        Feb 20 - Jan 30, 2024{" "}
+                                    </Text>
+                                    <IoMdArrowDropdown />
+                                </Text>
+                            </Box>
+                            <BsArrowsAngleExpand
+                                onClick={() => navigate("/employees/view/recent-transaction")}
+                                as={Button}
+                                color={"#6311CB"}
+                                size={18}
+                                cursor={"pointer"}
+                            />
+                        </HStack>
+                    </Box>
+                </VStack>
+                <NormalTable
+                    emptyMessage={`We don't have any Sponers `}
+                    tableHeadRow={tableHeadRowAdvance}
+                    data={extractedArrayAdvance}
+                    isLoading={isLoading}
+                />
+            </Box>
+
+        </Box>
+    )
+}
+
+export default EmployeesView
+
+

src/Pages/ManageHumanResource/EmployeesViewRecentReports.jsx

@@ -0,0 +1,247 @@
+import {
+    Box, HStack, Text, Tag,
+    Image,
+    VStack,
+    InputGroup,
+    InputLeftElement,
+    Input,
+    Menu,
+    MenuButton,
+    MenuList,
+    MenuItem,
+    Divider,
+    Button
+} from '@chakra-ui/react'
+import React, { useContext, useEffect, useState } from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import MiniHeader from '../../Components/MiniHeader'
+import { LuListFilter, LuScrollText } from "react-icons/lu";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import GlobalStateContext from '../../Contexts/GlobalStateContext'
+import { ChevronDownIcon, SearchIcon } from '@chakra-ui/icons';
+import { FaArrowUpFromBracket } from 'react-icons/fa6';
+import { BsFilterRight } from 'react-icons/bs';
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg"
+import { GoDotFill } from 'react-icons/go';
+import { useNavigate } from 'react-router-dom';
+
+const EmployeesViewRecentReports = () => {
+
+    const { recentReports } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        setIsLoading(true);
+
+        const timer = setTimeout(() => {
+            setIsLoading(false);
+        }, 500);
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    // ===============================[ Table Header ]
+    const tableHeadRow = [
+        "Report name",
+        "Report amount",
+        "Date & time",
+        "Order Status",
+        "Approver",
+        "Disburser",
+        "",
+    ];
+
+    // Dynamically map the reports to the table
+    const extractedArray = recentReports.map((item, index) => ({
+        "Report name": (
+            <HStack>
+                <Box p={2} bg={"#ebe0f8"} rounded={"full"}>
+                    <LuScrollText color='#6311CB' />
+                </Box>
+                <Text mb={0} fontWeight={600} fontSize={"xs"}>
+                    {item?.reportName || "N/A"}
+                </Text>
+            </HStack>
+        ),
+        "Report amount": (
+            <Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
+                {item?.reportAmount || "N/A"}
+            </Text>
+        ),
+        "Date & time": (
+            <Text mb={0} fontSize={"xs"}>
+                {item?.dateTime || "N/A"}
+            </Text>
+        ),
+        "Order Status": (
+            <Tag
+                size={"sm"}
+                py={2}
+                rounded="full"
+                color={
+                    item?.status === "Approved"
+                        ? "#00A438"
+                        : item?.status === "Fully Reimbursed"
+                            ? "#6311CB"
+                            : "red"
+                }
+                bg={
+                    item?.status === "Approved"
+                        ? "#ebf8ef"
+                        : item?.status === "Fully Reimbursed"
+                            ? "#f1eafa"
+                            : "red"
+                }
+            >
+                <HStack>
+                    <GoDotFill size={10} />
+                    <Text mb={0}>
+                        {item?.status || "N/A"}
+                    </Text>
+                </HStack>
+
+            </Tag>
+        ),
+        Approver: (
+            <Text mb={0} fontSize={"xs"}>
+                {item?.approver || "N/A"}
+            </Text>
+        ),
+        Disburser: (
+            <Text mb={0} fontSize={"xs"}>
+                {item?.disburser || "N/A"}
+            </Text>
+        ),
+        "": (
+            <Text 
+            mb={0}
+            size={"xs"}
+            bg={"#6311CB"}
+            rounded={"md"}
+            p={1}
+            fontWeight={400}
+            color="#fff"
+            onClick={()=>navigate("/employees/view/recent-reports/view")}
+            >
+                View Reports
+            </Text>
+        ),
+    }));
+
+    return (
+        <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
+            <Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
+                <HStack justifyContent={"space-between"} mb={4}>
+                    <Box>
+                        <HStack>
+                            <Image
+                                borderRadius='full'
+                                boxSize='40px'
+                                src='https://bit.ly/dan-abramov'
+                                alt='Dan Abramov'
+                            />
+                            <VStack spacing={"1"} alignItems={"start"}>
+                                <Text mb={0} fontSize={"md"} fontWeight={500}>
+                                    Pooja Shah
+                                </Text>
+                                <Text fontSize={"xs"} color={"#999999"} mb={0}>Design - UI/UX Designer</Text>
+                            </VStack>
+                        </HStack>
+                    </Box>
+                    <Box>
+                        <InputGroup width={300} size="sm">
+                            <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>
+                </HStack>
+                <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>
+                    <HStack>
+                        <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>
+                        <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>
+                    </HStack>
+                </HStack>
+                <NormalTable
+                    emptyMessage={`We don't have any reports available`}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                />
+            </Box>
+        </Box>
+    );
+};
+
+export default EmployeesViewRecentReports;

src/Pages/ManageHumanResource/EmployeesViewRecentReportsView.jsx

@@ -0,0 +1,223 @@
+import {
+    Badge, Box, HStack, Image, Text,
+    Heading, Menu, MenuButton, MenuItem, MenuList, VStack, Button,
+    Tag,
+    Divider,
+} from '@chakra-ui/react'
+import React, { useContext, useEffect, useState } from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import MiniHeader from '../../Components/MiniHeader'
+import { GoDotFill } from 'react-icons/go'
+import { LuListFilter, LuScrollText } from "react-icons/lu";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+import { ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import GlobalStateContext from '../../Contexts/GlobalStateContext'
+
+
+const EmployeesViewRecentReportsView = () => {
+
+    const { reimbursementStatus } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [ selectedRadio, setSelectedRadio] = useState([])
+
+    console.log(selectedRadio);
+    
+
+
+    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 = [
+        "Invoice",
+        "Amount",
+        "Paid from wallet",
+        "Status",
+        "",
+    ];
+
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = reimbursementStatus.map((item, index) => ({
+        id:item.id,
+        "Invoice": (
+            <HStack>
+                <Box p={2} bg={"#ebe0f8"} rounded={"full"}>
+                    <LuScrollText color='#6311CB' />
+                </Box>
+                <Text mb={0} fontWeight={600} fontSize={"xs"}>
+                    Food for June 30
+                </Text>
+            </HStack>
+        ),
+        "Amount": (
+            <Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
+                ₹ 5000
+            </Text>
+        ),
+        "Paid from wallet": (
+            <Text mb={0} fontSize={"xs"}>
+                Food
+            </Text>
+        ),
+
+        "Status": (
+            <Tag
+                my={1}
+                size={"sm"}
+                borderRadius="full"
+                color={
+                    item?.orderStatus === "Approved"
+                        ? "#027A48"
+                        : item?.orderStatus === "Fully reimbursed"
+                            ? "#3725EA"
+                            : "red"
+                }
+            >
+                Approved
+            </Tag>
+        ),
+        "": (
+            <Text mb={0} fontWeight={600} fontSize={"xs"} color={"#00A438"}>
+                Download
+            </Text>
+        ),
+
+    }));
+
+    return (
+        <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
+
+            <Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"} mb={4}>
+                <HStack justifyContent={"space-between"} mb={4}>
+                    <Box>
+                        <Text mb={0} fontSize={"sm"} fontWeight={600}>
+                            Food expense June 2024
+                        </Text>
+                    </Box>
+                    <Box>
+                        <Tag
+                            size={"sm"}
+                            py={2}
+                            rounded="full"
+                            color={"#6311CB"}
+                            bg={"#f1eafa"}
+                        >
+                            <HStack>
+                                <GoDotFill size={10} />
+                                <Text mb={0}>
+                                    Fully Reimbursed
+                                </Text>
+                            </HStack>
+
+                        </Tag>
+                    </Box>
+                </HStack>
+                <Divider />
+
+                <HStack justifyContent={"space-between"}>
+                    <VStack alignItems={"start"}>
+                        <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                            Report by
+                        </Text>
+                        <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                            Kartikey Gautam
+                        </Text>
+                    </VStack>
+                    <VStack alignItems={"start"}>
+                        <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                            Report amount
+                        </Text>
+                        <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                            ₹ 10,000
+                        </Text>
+                    </VStack>
+                    <VStack alignItems={"start"}>
+                        <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                            Date & time
+                        </Text>
+                        <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                            22 June, 2024
+                        </Text>
+                    </VStack>
+                    <VStack alignItems={"start"}>
+                        <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                            Approver
+                        </Text>
+                        <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                            Pooja Patade
+                        </Text>
+                    </VStack>
+                    <VStack alignItems={"start"}>
+                        <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                            Disburser
+                        </Text>
+                        <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                            Pooja Patade
+                        </Text>
+                    </VStack>
+                </HStack>
+
+            </Box>
+
+            <Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
+                <HStack justifyContent={"space-between"} mb={4}>
+                    <Box>
+                        <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                            Bills for the report
+                        </Text>
+                    </Box>
+                    <Box>
+                    <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>
+                    </Box>
+                </HStack>
+                <NormalTable
+                    emptyMessage={`We don't have any reports available`}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                    showRadioButton={true}
+                    setSelectedRadio={setSelectedRadio}
+                    selectedRadio={selectedRadio}
+                />
+            </Box>
+        </Box>
+    )
+}
+
+export default EmployeesViewRecentReportsView
+
+

src/Pages/ManageHumanResource/EmployeesViewRecentTransaction.jsx

@@ -0,0 +1,201 @@
+import {
+    Box, HStack, Text, Tag,
+    Image,
+    VStack,
+    InputGroup,
+    InputLeftElement,
+    Input,
+    Menu,
+    MenuButton,
+    MenuList,
+    MenuItem,
+    Divider,
+    Button
+} from '@chakra-ui/react'
+import React, { useContext, useEffect, useState } from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import MiniHeader from '../../Components/MiniHeader'
+import { LuListFilter, LuScrollText } from "react-icons/lu";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import GlobalStateContext from '../../Contexts/GlobalStateContext'
+import { ChevronDownIcon, SearchIcon } from '@chakra-ui/icons';
+import { FaArrowUpFromBracket } from 'react-icons/fa6';
+import { BsFilterRight } from 'react-icons/bs';
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg"
+import { MdNoFood } from 'react-icons/md';
+
+const EmployeesViewRecentTransaction = () => {
+
+    const { recentTransaction } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+
+    useEffect(() => {
+        setIsLoading(true);
+
+        const timer = setTimeout(() => {
+            setIsLoading(false);
+        }, 500);
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    // ===============================[ Table Header ]
+    const tableHeadRow = [
+        "Wallet Name",
+        "Card",
+        "Date & time",
+        "Amount",
+        "Merchant",
+    ];
+
+    // Dynamically map the reports to the table
+    const extractedArrayTransaction = recentTransaction.map((item, index) => ({
+        "Wallet Name": (
+            <HStack>
+                <Box p={2} bg={"#ebe0f8"} rounded={"full"}>
+                    <MdNoFood color='#6311CB' />
+                </Box>
+                <Text mb={0} fontSize={"xs"}>
+                    {item?.walletName || "N/A"}
+                </Text>
+            </HStack>
+        ),
+        "Card": (
+            <Text mb={0} fontWeight={600} fontSize={"xs"}>
+                {item?.Card || "N/A"}
+            </Text>
+        ),
+        "Date & time": (
+            <Text mb={0} fontSize={"xs"}>
+                {item?.dateTime || "N/A"}
+            </Text>
+        ),
+        "Amount": (
+            <Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
+                {item?.Amount || "N/A"}
+            </Text>
+        ),
+        "Merchant": (
+            <Text mb={0} fontSize={"xs"}>
+                {item?.Merchant || "N/A"}
+            </Text>
+        ),
+    }));
+
+
+    return (
+        <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
+            <Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"}>
+                <HStack justifyContent={"space-between"} mb={4}>
+                    <Box>
+                        <HStack>
+                            <Image
+                                borderRadius='full'
+                                boxSize='40px'
+                                src='https://bit.ly/dan-abramov'
+                                alt='Dan Abramov'
+                            />
+                            <VStack spacing={"1"} alignItems={"start"}>
+                                <Text mb={0} fontSize={"md"} fontWeight={500}>
+                                    Pooja Shah
+                                </Text>
+                                <Text fontSize={"xs"} color={"#999999"} mb={0}>Design - UI/UX Designer</Text>
+                            </VStack>
+                        </HStack>
+                    </Box>
+                    <Box>
+                        <InputGroup width={300} size="sm">
+                            <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>
+                </HStack>
+                <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>
+                    <HStack>
+                        <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>
+                        <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>
+                    </HStack>
+                </HStack>
+                <NormalTable
+                    emptyMessage={`We don't have any reports available`}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArrayTransaction}
+                    isLoading={isLoading}
+                />
+            </Box>
+        </Box>
+    );
+};
+
+export default EmployeesViewRecentTransaction;

src/Pages/ManageHumanResource/PullBackFundsBenefit.jsx

@@ -0,0 +1,216 @@
+import {
+    Accordion,
+    AccordionButton,
+    AccordionItem,
+    AccordionPanel,
+    Box,
+    Button,
+    Checkbox,
+    HStack,
+    Image,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    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 {
+    ChevronDownIcon,
+    SearchIcon,
+} from "@chakra-ui/icons";
+
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { LuEye, LuListFilter } from "react-icons/lu";
+import AccordianTable from "../../Components/DataTable/AccordianTable";
+
+
+
+const PullBackFundsBenefit = () => {
+    const { employees } = 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 = [
+        "Emp ID",
+        "Name",
+        "Email Address",
+        "Mobile number",
+        "Wallet",
+        "Wallet balance",
+    ];
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = employees.map((item, index) => ({
+        "Emp ID": (
+            <Checkbox colorScheme="purple" value="1">
+                <HStack spacing={1}>
+                    <Text
+                        as={"span"}
+                        fontSize={"xs"}
+                    >
+                        {item?.EmpID}
+                    </Text>
+                </HStack>
+            </Checkbox >
+        ),
+        "Name": (
+            <HStack>
+                <Image
+                    borderRadius='full'
+                    boxSize='40px'
+                    src='https://bit.ly/dan-abramov'
+                    alt='Dan Abramov'
+                />
+                <Text mb={0}>
+                    {item?.Name}
+                </Text>
+            </HStack>
+        ),
+        "Email Address": item?.emailAddress,
+        "Mobile number": item?.mobileNumber,
+        "Wallet": (
+
+            <HStack>
+                <Text
+                    fontSize={"xs"}
+                    mb={0}
+                    fontWeight={500}
+                    bg={"#EFE3FF"}
+                    px={2}
+                    py={1}
+                    color={"#6311CB"}
+                    textAlign={"center"}
+                    rounded={"md"}
+                >
+                    Food
+                </Text>
+                <Text
+                    fontSize={"xs"}
+                    mb={0}
+                    fontWeight={500}
+                    bg={"#EFE3FF"}
+                    px={2}
+                    py={1}
+                    color={"#6311CB"}
+                    textAlign={"center"}
+                    rounded={"md"}
+                >
+                    Fuel
+                </Text>
+                <Text
+                    fontSize={"xs"}
+                    mb={0}
+                    fontWeight={500}
+                    bg={"#EFE3FF"}
+                    px={2}
+                    py={1}
+                    color={"#6311CB"}
+                    textAlign={"center"}
+                    rounded={"md"}
+                >
+                    Travel
+                </Text>
+            </HStack>
+
+        ),
+        "Wallet balance": (
+            <Text
+                fontSize={"xs"}
+            >
+                ₹ 5000
+            </Text>
+        ),
+        "subMenu": item.subMenu
+    }));
+
+    return (
+        <Box {...OPACITY_ON_LOAD} overflowX={"scroll"}>
+            <Box
+                rounded={"xl"}
+                py={3}
+                // pb={0}
+                display={"flex"}
+                flexDirection={"column"}
+                bg={"#fff"}
+                shadow={"md"}
+                minH={"100%"}
+            >
+                <VStack mb={0} p={3} alignItems={"start"} gap={0}>
+                    <Box
+                        display={"flex"}
+                        justifyContent={"space-between"}
+                        alignItems={"center"}
+                        w={"100%"}
+                    >
+                        <InputGroup width={300} size="sm">
+                            <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>
+                            <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>
+                        </Box>
+                    </Box>
+                </VStack>
+                <AccordianTable
+                    emptyMessage={`We don't have any Sponers `}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                />
+            </Box>
+        </Box>
+    );
+};
+
+export default PullBackFundsBenefit;

src/Pages/ManageHumanResource/PullBackFundsExpense.jsx

@@ -0,0 +1,182 @@
+import {
+    Accordion,
+    AccordionButton,
+    AccordionItem,
+    AccordionPanel,
+    Box,
+    Button,
+    Checkbox,
+    HStack,
+    Image,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    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 {
+    ChevronDownIcon,
+    SearchIcon,
+} from "@chakra-ui/icons";
+
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { LuEye, LuListFilter } from "react-icons/lu";
+import { RiArrowDropDownLine, RiArrowDropRightLine } from "react-icons/ri";
+import AccordianTable from "../../Components/DataTable/AccordianTable";
+
+
+
+const PullBackFundsExpense = () => {
+    const { employees } = 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 = [
+        "Emp ID",
+        "Name",
+        "Email Address",
+        "Mobile number",
+        "Wallet",
+        "Wallet balance",
+    ];
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = employees.map((item, index) => ({
+        "Emp ID": (
+            <Checkbox colorScheme="purple" value="1">
+                <HStack spacing={1}>
+                    <Text
+                        as={"span"}
+                        fontSize={"xs"}
+                    >
+                        {item?.EmpID}
+                    </Text>
+                </HStack>
+            </Checkbox >
+        ),
+        "Name": (
+            <HStack>
+                <Image
+                    borderRadius='full'
+                    boxSize='40px'
+                    src='https://bit.ly/dan-abramov'
+                    alt='Dan Abramov'
+                />
+                <Text mb={0}>
+                    {item?.Name}
+                </Text>
+            </HStack>
+        ),
+        "Email Address": item?.emailAddress,
+        "Mobile number": item?.mobileNumber,
+        "Wallet": (
+        
+                <Text
+                    fontSize={"xs"}
+                    mb={0}
+                >
+                    Food
+                </Text>
+
+        ),
+        "Wallet balance": (
+            <Text
+                fontSize={"xs"}
+            >
+                ₹ 5000
+            </Text>
+        ),
+        "subMenu": item.subMenu
+    }));
+
+    return (
+        <Box {...OPACITY_ON_LOAD} overflowX={"scroll"}>
+            <Box
+                rounded={"xl"}
+                py={3}
+                // pb={0}
+                display={"flex"}
+                flexDirection={"column"}
+                bg={"#fff"}
+                shadow={"md"}
+                minH={"100%"}
+            >
+                <VStack mb={0} p={3} alignItems={"start"} gap={0}>
+                    <Box
+                        display={"flex"}
+                        justifyContent={"space-between"}
+                        alignItems={"center"}
+                        w={"100%"}
+                    >
+                        <InputGroup width={300} size="sm">
+                            <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>
+                            <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>
+                        </Box>
+                    </Box>
+                </VStack>
+                <AccordianTable
+                    emptyMessage={`We don't have any Sponers `}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                />
+            </Box>
+        </Box>
+    );
+};
+
+export default PullBackFundsExpense;

src/Pages/ManageHumanResource/PullBackFundsGifts.jsx

@@ -0,0 +1,179 @@
+import {
+    Accordion,
+    AccordionButton,
+    AccordionItem,
+    AccordionPanel,
+    Box,
+    Button,
+    Checkbox,
+    HStack,
+    Image,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    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 {
+    ChevronDownIcon,
+    SearchIcon,
+} from "@chakra-ui/icons";
+
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { LuEye, LuListFilter } from "react-icons/lu";
+import AccordianTable from "../../Components/DataTable/AccordianTable";
+
+
+
+const PullBackFundsGifts = () => {
+    const { employees } = 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 = [
+        "Emp ID",
+        "Name",
+        "Email Address",
+        "Mobile number",
+        "Card number",
+        "Wallet balance",
+    ];
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = employees.map((item, index) => ({
+        "Emp ID": (
+            <Checkbox colorScheme="purple" value="1">
+                <HStack spacing={1}>
+                    <Text
+                        as={"span"}
+                        fontSize={"xs"}
+                    >
+                        {item?.EmpID}
+                    </Text>
+                </HStack>
+            </Checkbox >
+        ),
+        "Name": (
+            <HStack>
+                <Image
+                    borderRadius='full'
+                    boxSize='40px'
+                    src='https://bit.ly/dan-abramov'
+                    alt='Dan Abramov'
+                />
+                <Text mb={0}>
+                    {item?.Name}
+                </Text>
+            </HStack>
+        ),
+        "Email Address": item?.emailAddress,
+        "Mobile number": item?.mobileNumber,
+        "Card number": (
+            <Text
+                fontSize={"xs"}
+                mb={0}
+            >
+                3446 **** **** ****
+            </Text>
+        ),
+        "Wallet balance": (
+            <Text
+                fontSize={"xs"}
+            >
+                ₹ 5000
+            </Text>
+        ),
+        "subMenu": item.subMenu
+    }));
+
+    return (
+        <Box {...OPACITY_ON_LOAD} overflowX={"scroll"}>
+            <Box
+                rounded={"xl"}
+                py={3}
+                // pb={0}
+                display={"flex"}
+                flexDirection={"column"}
+                bg={"#fff"}
+                shadow={"md"}
+                minH={"100%"}
+            >
+                <VStack mb={0} p={3} alignItems={"start"} gap={0}>
+                    <Box
+                        display={"flex"}
+                        justifyContent={"space-between"}
+                        alignItems={"center"}
+                        w={"100%"}
+                    >
+                        <InputGroup width={300} size="sm">
+                            <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>
+                            <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>
+                        </Box>
+                    </Box>
+                </VStack>
+                <AccordianTable
+                    emptyMessage={`We don't have any Sponers `}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                />
+            </Box>
+        </Box>
+    );
+};
+
+export default PullBackFundsGifts;

src/Pages/ManageHumanResource/WalletsPullBackFunds.jsx

@@ -0,0 +1,360 @@
+import {
+    Box, HStack, Text, VStack,
+    Divider,
+    Checkbox,
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import MiniHeader from '../../Components/MiniHeader'
+
+
+const WalletsPullBackFunds = () => {
+    const [isLoading, setIsLoading] = useState(false);
+
+    return (
+        <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
+
+            <Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"} mb={4}>
+                <Box>
+                    <Text mb={0} fontSize={"sm"} fontWeight={600}>
+                        Pooja shah
+                    </Text>
+                </Box>
+                <Divider />
+
+                <HStack spacing={16}>
+                    <VStack alignItems={"start"}>
+                        <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                            Employee ID
+                        </Text>
+                        <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                            WD-012
+                        </Text>
+                    </VStack>
+                    <VStack alignItems={"start"}>
+                        <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                            Department
+                        </Text>
+                        <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                            Design
+                        </Text>
+                    </VStack>
+                    <VStack alignItems={"start"}>
+                        <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                            Role
+                        </Text>
+                        <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                            Sr. Designer
+                        </Text>
+                    </VStack>
+                </HStack>
+
+            </Box>
+
+            <Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"} mb={4}>
+                <Box mb={6}>
+                    <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                        Select expense wallet
+                    </Text>
+                </Box>
+
+                <Box>
+                    <HStack justifyContent={"space-between"} mb={6}>
+                        <Box>
+                            <Checkbox defaultChecked alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Food
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Fuel
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Books & periodicals
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Gadget & equipment
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Telecom
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+
+                    </HStack>
+                    <HStack justifyContent={"space-between"}>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Food
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Fuel
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Books & periodicals
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Gadget & equipment
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Telecom
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+
+                    </HStack>
+                </Box>
+
+            </Box>
+            <Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"} mb={4}>
+                <Box mb={6}>
+                    <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                        Select benefit wallet
+                    </Text>
+                </Box>
+
+                <Box>
+                    <HStack justifyContent={"space-between"} mb={6}>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Food
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Fuel
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Books & periodicals
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Gadget & equipment
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Telecom
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+
+                    </HStack>
+                    <HStack justifyContent={"space-between"}>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Food
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Fuel
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Books & periodicals
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Gadget & equipment
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    Telecom
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+
+                    </HStack>
+                </Box>
+
+            </Box>
+            <Box shadow={'md'} p={4} bg={'#fff'} rounded={"md"} mb={4}>
+                <Box mb={6}>
+                    <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                        Select gift card
+                    </Text>
+                </Box>
+
+                <Box>
+                    <HStack justifyContent={"space-between"} mb={6}>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    4512 **** **** 4512
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    4512 **** **** 4512
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    4512 **** **** 4512
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    4512 **** **** 4512
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+                        <Box>
+                            <Checkbox alignItems={"start"} colorScheme='purple'>
+                                <Text mb={0} fontSize={"sm"} fontWeight={500} mt={-1}>
+                                    4512 **** **** 4512
+                                </Text>
+                                <Text mb={0} color={"#696969"} fontSize={"xs"} fontWeight={500}>
+                                    ₹ 5000
+                                </Text>
+                            </Checkbox>
+                        </Box>
+
+                    </HStack>
+                </Box>
+
+            </Box>
+
+
+        </Box>
+    )
+}
+
+export default WalletsPullBackFunds
+
+

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

@@ -39,6 +39,7 @@ import ExcelIcon from "../../assets/ExcelIcon.svg";
 import { AiOutlineCalendar } from "react-icons/ai";
 import { IoMdArrowDropdown } from "react-icons/io";
 import { BsFilterRight } from "react-icons/bs";
+import BlueCard from "../../Components/Cards/BlueCard";
 
 const OptiFiiExpenseDashboard = () => {
   const { reimbursementStatus } = useContext(GlobalStateContext);
@@ -71,6 +72,15 @@ const OptiFiiExpenseDashboard = () => {
     "Disburser",
   ];
 
+  const tableHeadRowAdvance = [
+    "Report name",
+    "Report by",
+    "Report amount",
+    "Date & time",
+    "Order Status",
+    "Approver",
+  ];
+
   // const extractedArray = reportsHistory.map((item)=>({ }))
 
   const extractedArray = reimbursementStatus.map((item, index) => ({
@@ -120,7 +130,6 @@ const OptiFiiExpenseDashboard = () => {
       </Tag>
     ),
     Approver: item?.approver,
-    Disburser: item?.disburser,
   }));
 
   const requestItems = [
@@ -182,44 +191,44 @@ const OptiFiiExpenseDashboard = () => {
     },
   ];
 
+
+  const blueCardData = [
+    {
+      backgroundColor: "#6311CB",
+      iconColor: "#00A438",
+      title: "Bills for pending",
+      count: 50,
+      buttonBg: "#FCA1001A",
+      buttonBorder: "#FCA100",
+      buttonText: "Pending requests",
+      badgeText: "20 New",
+      badgeColor: "#3725EA",
+      viewTextColor: "#6311CB",
+    },
+    {
+      backgroundColor: "#C33FAD",
+      iconColor: "#00A438",
+      title: "Bills for pending",
+      count: 50,
+      buttonBg: "#FCA1001A",
+      buttonBorder: "#FCA100",
+      buttonText: "Pending requests",
+      badgeText: "20 New",
+      badgeColor: "#3725EA",
+      viewTextColor: "#6311CB",
+    },
+  ]
+
+
   return (
     <Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
       <Grid templateColumns="repeat(4, 1fr)" gap={6} mb={4}>
-        {requestItems.map((item, index) => (
+        {blueCardData.map((item, index) => (
-          <GridItem
+          <BlueCard key={index} blueCardData={item}  />
-            key={index}
-            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>
-          </GridItem>
         ))}
       </Grid>
+
+
       <Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4}>
         {gridItemsData.map((item, index) => (
           <GridItem key={index} backgroundColor="#fff" borderRadius="xl">
@@ -291,8 +300,8 @@ const OptiFiiExpenseDashboard = () => {
           </GridItem>
         ))}
       </Grid>
-      <Box w={"100%"} rounded={"xl"} mb={4} pt={1} bg={"#fff"}>
+      <Box w={"100%"} rounded={"xl"} mb={4} p={3} bg={"#fff"}>
-        <Box display={"flex"} justifyContent={"space-between"} px={4} pt={4}>
+        <Box display={"flex"} justifyContent={"space-between"} pt={4}>
           <Text as={"span"} fontSize={"sm"} color={"#474279"} fontWeight={500}>
             Spend by categories
           </Text>
@@ -323,7 +332,7 @@ const OptiFiiExpenseDashboard = () => {
         minH={"100%"}
         mb={5}
       >
-        <VStack mb={3} px={3} alignItems={"start"} gap={0}>
+        <VStack px={3} alignItems={"start"} gap={0}>
           <Box
             display={"flex"}
             justifyContent={"space-between"}
@@ -390,6 +399,7 @@ const OptiFiiExpenseDashboard = () => {
             </Box>
           </Box>
         </VStack>
+        <hr />
         <VStack mb={3} px={3} alignItems={"start"} gap={0}>
           <Box
             display={"flex"}
@@ -462,6 +472,7 @@ const OptiFiiExpenseDashboard = () => {
           isLoading={isLoading}
         />
       </Box>
+      
       <Box
         rounded={"xl"}
         py={3}
@@ -472,7 +483,7 @@ const OptiFiiExpenseDashboard = () => {
         shadow={"md"}
         minH={"100%"}
       >
-        <VStack mb={3} px={3} alignItems={"start"} gap={0}>
+        <VStack px={3} alignItems={"start"} gap={0}>
           <Box
             display={"flex"}
             justifyContent={"space-between"}
@@ -539,6 +550,7 @@ const OptiFiiExpenseDashboard = () => {
             </Box>
           </Box>
         </VStack>
+        <hr />
         <VStack mb={3} px={3} alignItems={"start"} gap={0}>
           <Box
             display={"flex"}
@@ -606,7 +618,7 @@ const OptiFiiExpenseDashboard = () => {
         </VStack>
         <NormalTable
           emptyMessage={`We don't have any Sponers `}
-          tableHeadRow={tableHeadRow}
+          tableHeadRow={tableHeadRowAdvance}
           data={extractedArrayAdvance}
           isLoading={isLoading}
         />

src/Pages/OptiFiiExpense/ReimbursementRequest.jsx

@@ -1,16 +1,157 @@
-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>
+      </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,348 @@
-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, useMemo, 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, setShowGrid] = useState(true);
+
+  const handleViewToggle = (viewType) => {
+    setShowGrid(viewType === "grid");
+  };
+
+  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 = useMemo(() => {
+    return walletProgram.map((item) => ({
+      ID: <Text fontSize="xs">{item?.id}</Text>,
+      "Wallet Name": (
+        <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
+          <Image h="23px" src={item.walletName[0]?.icon} alt={item.walletName[0]?.icon} />
+          {item?.walletName[0]?.name}
+        </Box>
+      ),
+      "Wallet type": item?.WalletType,
+      Department: item?.department,
+      Status: (
+        <Tag
+          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,
+    }));
+  }, [walletProgram]);
+  
+
   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
+                leftIcon={<CiBoxList />}
+                fontSize="xs"
+                colorScheme={showGrid ? "gray" : "purple"}
+                variant={showGrid ? "outline" : "solid"}
+                size="sm"
+                me={2}
+                onClick={() => handleViewToggle("list")}
+              >
+                List
+              </Button>
+
+              <Button
+                leftIcon={<BsFillGridFill />}
+                fontSize="xs"
+                colorScheme={!showGrid ? "gray" : "purple"}
+                variant={!showGrid ? "outline" : "solid"}
+                size="sm"
+                onClick={() => handleViewToggle("grid")}
+              >
+                Grid
+              </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,130 @@
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import {
+  Stepper,
+  Step,
+  StepIndicator,
+  StepStatus,
+  StepIcon,
+  StepNumber,
+  Box,
+  StepTitle,
+  StepDescription,
+  StepSeparator,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Heading,
+  Text,
+} from "@chakra-ui/react";
+import WalletPolicy from "./WalletPolicy";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+
+const steps = [
+  { title: "Wallet policy", description: "Contact Info" },
+  { title: "Approval policy", description: "Date & Time" },
+  { title: "Submission policy", description: "Select Rooms" },
+  { title: "Define budget", description: "Select Rooms" },
+];
+
+function CreateWallet() {
+  const [activeStep, setActiveStep] = useState(0);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+  const [formData, setFormData] = useState({});
+
+  const nextStep = () => {
+    if (activeStep < steps.length - 1) {
+      setActiveStep(activeStep + 1);
+    }
+  };
+
+  const prevStep = () => {
+    if (activeStep > 0) {
+      setActiveStep(activeStep - 1);
+    }
+  };
+
+  const onSubmit = (data) => {
+    setFormData({ ...formData, ...data });
+    if (activeStep === steps.length - 1) {
+      console.log("Form Submitted:", formData);
+    } else {
+      nextStep();
+    }
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <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>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {activeStep === 0 && (
+          <Box mt={4}>
+            <Heading color="#383838" fontWeight="semibold" fontSize="large">
+              Create wallet policy
+            </Heading>
+
+            <WalletPolicy  register={register} />
+          </Box>
+        )}
+        {activeStep === 1 && (
+          <Box mt={4}>
+            {/* <FormControl isInvalid={errors.date}>
+              <FormLabel>Date & Time</FormLabel>
+              <Input
+                type="datetime-local"
+                {...register("date", { required: "This is required" })}
+              />
+            </FormControl> */}
+          </Box>
+        )}
+        {activeStep === 2 && (
+          <Box mt={4}>
+            {/* <FormControl isInvalid={errors.room}>
+              <FormLabel>Select Room</FormLabel>
+              <Input
+                {...register("room", { required: "This is required" })}
+                placeholder="Room Number"
+              />
+            </FormControl> */}
+          </Box>
+        )}
+
+        <Box mt={4}>
+          <Button onClick={prevStep} disabled={activeStep === 0} mr={4}>
+            Previous
+          </Button>
+          <Button type="submit">
+            {activeStep === steps.length - 1 ? "Submit" : "Next"}
+          </Button>
+        </Box>
+      </form>
+    </Box>
+  );
+}
+
+export default CreateWallet;

src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx

@@ -0,0 +1,371 @@
+import {
+  Box,
+  FormControl,
+  FormLabel,
+  Input,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Select,
+  Tag,
+  TagCloseButton,
+  TagLabel,
+  Textarea,
+  Wrap,
+  WrapItem,
+  Button,
+  useToast,
+  Checkbox,
+  Stack,
+  CheckboxGroup,
+  Text,
+  RadioGroup,
+  Radio,
+} from "@chakra-ui/react";
+import { AddIcon, ChevronDownIcon } from "@chakra-ui/icons";
+import React, { useState } from "react";
+import dayjs from "dayjs";
+import { CiCircleInfo } from "react-icons/ci";
+
+const OutOfPoket = ({ register, formState }) => {
+  const [selectedDepartments, setSelectedDepartments] = useState([]);
+  const [selectedTimes, setSelectedTimes] = useState([]);
+  const [transaction, setTransaction] = useState([]);
+  const [transactionRule, setTransactionRule] = useState("none");
+  const [categories, setCategories] = useState(["Food", "Fuel"]);
+  const [selectedCategories, setSelectedCategories] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+
+  const toast = useToast();
+
+  const transactionTags = ["Food", "Fuel"];
+
+  const departments = ["Finance", "HR", "Marketing", "Engineering"];
+  const options = [
+    {
+      label: "An hour from now",
+      value: dayjs().add(1, "hour").format("ddd, MMM D, h:mm A"),
+    },
+    {
+      label: "Tomorrow",
+      value: dayjs()
+        .add(1, "day")
+        .set("hour", 21)
+        .minute(0)
+        .format("ddd, MMM D, h:mm A"),
+    },
+    {
+      label: "Next week",
+      value: dayjs()
+        .add(7, "day")
+        .set("hour", 21)
+        .minute(0)
+        .format("ddd, MMM D, h:mm A"),
+    },
+  ];
+
+  const availableCategories = [
+    "Entertainment",
+    "Groceries",
+    "Fuel",
+    "Shopping",
+    "Food",
+    "Utilities",
+  ];
+
+  const handleCategoryRemove = (categoryToRemove) => {
+    setCategories(
+      categories.filter((category) => category !== categoryToRemove)
+    );
+  };
+
+  const handleCategoryAdd = (categoryToAdd) => {
+    if (!categories.includes(categoryToAdd)) {
+      setCategories([...categories, categoryToAdd]);
+    }
+  };
+
+  const addCategory = () => {
+    if (inputValue && !selectedCategories.includes(inputValue)) {
+      setSelectedCategories([...selectedCategories, inputValue]);
+      setInputValue("");
+    }
+  };
+
+  const removeCategory = (categoryToRemove) => {
+    setSelectedCategories(
+      selectedCategories.filter((category) => category !== categoryToRemove)
+    );
+  };
+
+  const handleSelect = (time) => {
+    if (!selectedTimes.includes(time)) {
+      setSelectedTimes([...selectedTimes, time]);
+    } else {
+      toast({
+        title: "Duplicate entry",
+        description: "This time has already been selected.",
+        status: "warning",
+        duration: 2000,
+        isClosable: true,
+      });
+    }
+  };
+
+  const handleRemoveTags = (time) => {
+    setSelectedTimes(selectedTimes.filter((t) => t !== time));
+  };
+
+  const handleSelectChangeTags = (event) => {
+    const value = event.target.value;
+    if (value && !transactionTags.includes(value)) {
+      setSelectedDepartments([...transactionTags, value]);
+    }
+  };
+
+  const handleRemove = (time) => {
+    setSelectedTimes(selectedTimes.filter((t) => t !== time));
+  };
+
+  const handleSelectChange = (event) => {
+    const value = event.target.value;
+    if (value && !selectedDepartments.includes(value)) {
+      setSelectedDepartments([...selectedDepartments, value]);
+    }
+  };
+
+  const handleRemoveTag = (department) => {
+    setSelectedDepartments(selectedDepartments.filter((d) => d !== department));
+  };
+
+  return (
+    <div>
+      <FormControl>
+        <Box
+          bgColor="#F6F0FF"
+          boxShadow="md"
+          display="flex"
+          flexDirection="column"
+          gap={3}
+          p={2}
+        >
+          <Box display="flex" flexDirection="column">
+            <FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
+              Wallet name
+            </FormLabel>
+            <Input
+              {...register("walletPolicy", { required: "This is required" })}
+            />
+          </Box>
+
+          <Box display="flex" flexDirection="column">
+            <FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
+              Description
+            </FormLabel>
+            <Textarea
+              {...register("description", { required: "This is required" })}
+            />
+          </Box>
+
+          <Box display="flex" flexDirection="column">
+            <FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
+              Department
+            </FormLabel>
+            <Select placeholder=" " onChange={handleSelectChange} value="">
+              {departments.map((department, index) => (
+                <option key={index} value={department}>
+                  {department}
+                </option>
+              ))}
+            </Select>
+
+            <Wrap mt={4}>
+              {selectedDepartments.map((department, index) => (
+                <WrapItem key={index}>
+                  <Tag
+                    size="md"
+                    borderRadius="full"
+                    variant="subtle"
+                    colorScheme="purple"
+                  >
+                    <TagLabel>{department}</TagLabel>
+                    <TagCloseButton
+                      onClick={() => handleRemoveTag(department)}
+                    />
+                  </Tag>
+                </WrapItem>
+              ))}
+            </Wrap>
+          </Box>
+
+          <Box>
+            <FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
+              Set reminder
+            </FormLabel>
+            <Select
+              onChange={(e) => handleSelect(e.target.value)}
+              placeholder="  "
+            >
+              {options.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label} ({option.value})
+                </option>
+              ))}
+            </Select>
+
+            {/* Displaying selected times as tags */}
+            <Box mt={4}>
+              {selectedTimes.map((time, index) => (
+                <Tag
+                  key={index}
+                  size="lg"
+                  colorScheme="teal"
+                  borderRadius="full"
+                  m={1}
+                >
+                  <TagLabel>{time}</TagLabel>
+                  <TagCloseButton onClick={() => handleRemove(time)} />
+                </Tag>
+              ))}
+            </Box>
+          </Box>
+
+          <Stack>
+            <Text color="#3F4754" fontWeight={700} fontSize="sm">
+              Select wallet type
+            </Text>
+            <CheckboxGroup
+              colorScheme="purple"
+              defaultValue={["Prepaid", "Reimbursement"]}
+            >
+              <Stack spacing={[1, 5]} direction="column">
+                <Checkbox value="Prepaid">Prepaid</Checkbox>
+                <Checkbox value="Reimbursement">Reimbursement</Checkbox>
+              </Stack>
+            </CheckboxGroup>
+          </Stack>
+
+          <Stack>
+            <Text color="#3F4754" fontWeight={700} fontSize="sm">
+              Select transaction type
+            </Text>
+            <CheckboxGroup
+              colorScheme="purple"
+              defaultValue={[
+                "Ecommerce",
+                "POS",
+                "ATM",
+                "Contactless",
+                "Wallet transfer",
+              ]}
+            >
+              <Stack spacing={[1, 5]} direction="column">
+                <Checkbox value="Ecommerce">Ecommerce</Checkbox>
+                <Checkbox value="POS">POS</Checkbox>
+                <Checkbox value="ATM">ATM</Checkbox>
+                <Checkbox value="Contactless">Contactless</Checkbox>
+                <Checkbox value="Wallet transfer">Wallet transfer</Checkbox>
+              </Stack>
+            </CheckboxGroup>
+          </Stack>
+
+          {/* <Box
+            display="flex"
+            gap="4"
+            p="4"
+            borderWidth="1px"
+            borderRadius="md"
+            boxShadow="sm"
+          >
+
+            <Box display="flex" flexDirection="column" height="20px" gap={4}>
+              <Menu>
+                <MenuButton as={Button} rightIcon={<CiCircleInfo />}>
+                  Either of them
+                </MenuButton>
+                <MenuList>
+                  {availableCategories.map((category, index) => (
+                    <MenuItem
+                      key={index}
+                      onClick={() => handleCategoryAdd(category)}
+                    >
+                      {category}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </Menu>
+            </Box>
+            <Box display="flex" gap="2" mb="2">
+                
+              {categories.map((category, index) => (
+                <Tag
+                  key={index}
+                  size="md"
+                  borderRadius="full"
+                  variant="solid"
+                  colorScheme="blue"
+                >
+                  <TagLabel>{category}</TagLabel>
+                  <TagCloseButton
+                    onClick={() => handleCategoryRemove(category)}
+                  />
+                </Tag>
+              ))}
+            </Box>
+          </Box> */}
+
+          <Box maxW="400px" mt={4}>
+            <Stack spacing={4}>
+              {/* Transaction Rule */}
+              <Box>
+                <Text mb={2}>Transaction rule</Text>
+                <Select placeholder="None of them" width="fit-content">
+                  {/* Add more options here as needed */}
+                </Select>
+              </Box>
+
+              {/* Merchant Category */}
+              <Box>
+                <Text mb={2}>Merchant category</Text>
+                <Box display="flex" alignItems="center">
+                  {/* Input for adding categories */}
+                  <Input
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    placeholder="Add category"
+                    width="auto"
+                    onKeyPress={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        addCategory();
+                      }
+                    }}
+                  />
+                  <Box display="flex" flexWrap="wrap" gap={2} mr={2}>
+                    {selectedCategories.map((category) => (
+                      <Tag
+                        size="lg"
+                        key={category}
+                        borderRadius="full"
+                        variant="solid"
+                        colorScheme="purple"
+                      >
+                        <TagLabel>{category}</TagLabel>
+                        <TagCloseButton
+                          onClick={() => removeCategory(category)}
+                        />
+                      </Tag>
+                    ))}
+                  </Box>
+                </Box>
+              </Box>
+            </Stack>
+          </Box>
+        </Box>
+      </FormControl>
+    </div>
+  );
+};
+
+export default OutOfPoket;

src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx

@@ -0,0 +1,53 @@
+import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import OutOfPoket from "./OutOfPoket";
+const WalletPolicy = ({ register }) => {
+  const [selectedValue, setSelectedValue] = useState("1");
+
+  const renderContent = () => {
+    switch (selectedValue) {
+      case "1":
+        return <OutOfPoket register={register} />;
+      case "2":
+        return <Box>Add department content</Box>;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <RadioGroup onChange={setSelectedValue} value={selectedValue}>
+        <Stack spacing={4} direction="row">
+          <Box
+            p={1}
+            display="flex"
+            flexDirection="row"
+            borderRadius="5px"
+            bgColor="#F4F4F4"
+            border={selectedValue === "1" && "1px solid #3725EA"}
+          >
+            <Radio size="sm" colorScheme="blue" value="1">
+              Out of pocket/cash
+            </Radio>
+          </Box>
+          <Box
+            p={2}
+            display="flex"
+            flexDirection="row"
+            borderRadius="5px"
+            bgColor="#F4F4F4"
+            border={selectedValue === "2" && "1px solid #3725EA"}
+          >
+            <Radio size="sm" colorScheme="blue" value="2">
+              Mileage
+            </Radio>
+          </Box>
+        </Stack>
+      </RadioGroup>
+      <Box mt={4}>{renderContent()}</Box>
+    </>
+  );
+};
+
+export default WalletPolicy;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx

@@ -0,0 +1,100 @@
+import {
+    Box,
+    Button,
+    Flex,
+    Radio,
+    RadioGroup,
+    Text,
+    useBreakpointValue,
+    VStack,
+  } from "@chakra-ui/react";
+  import React, { useState } from "react";
+  import DigitalTable from "./DigitalTable";
+  
+  const ApplyForDigitalCard = () => {
+    const [step, setStep] = useState(1);
+  
+    // Steps array consistency and label correction
+    const steps = [
+      {
+        component: <DigitalTable />, // Component must be rendered properly
+        label: "Step 1: Digital Table", // Label for clarity
+        description: "Pending",
+      },
+      {
+        component: <Box>Select employee component here</Box>, // Placeholder for the second component
+        label: "Step 2: Select Employee",
+        description: "Pending",
+      },
+    ];
+  
+    const handleNext = () => {
+      if (step < steps.length) {
+        setStep(step + 1);
+      }
+    };
+  
+    const handlePrev = () => {
+      if (step > 1) {
+        setStep(step - 1);
+      }
+    };
+  
+    const currentStep = step - 1;
+    const isLastStep = step === steps.length;
+    const isFirstStep = step === 1;
+    const circleSize = useBreakpointValue({ base: "30px", md: "40px" });
+  
+    return (
+      <Box overflowX="scroll" p={4}>
+        <Box>
+          <RadioGroup
+            value={String(step)}
+            onChange={(val) => setStep(Number(val))}
+          >
+            <Flex p={4} justifyContent="space-between" alignItems="center">
+              {steps.map((item, index) => (
+                <VStack key={index} spacing={2}>
+                  <Radio value={String(index + 1)} colorScheme="purple" size="lg" />
+                  <Text fontSize="small" color="#9C9C9C" fontWeight={400}>
+                    STEP {index + 1}
+                  </Text>
+                  <Text color="#000000" fontWeight={600} fontSize="small">
+                    {item.label}
+                  </Text>
+                  <Text
+                    fontSize="sm"
+                    color={index + 1 === step ? "blue.500" : "gray.500"}
+                  >
+                    {index + 1 === step ? "In Progress" : "Pending"}
+                  </Text>
+                </VStack>
+              ))}
+            </Flex>
+          </RadioGroup>
+          {/* Render the appropriate component */}
+          <Box mt={4}>{steps[currentStep].component}</Box>
+          <Flex justifyContent="space-between" mt={8}>
+            <Button
+              onClick={handlePrev}
+              disabled={isFirstStep}
+              colorScheme="purple"
+              variant="outline"
+            >
+              Previous
+            </Button>
+            <Button
+              onClick={handleNext}
+              disabled={isLastStep}
+              colorScheme="purple"
+            >
+              Next
+            </Button>
+          </Flex>
+        </Box>
+      </Box>
+    );
+  };
+  
+  export default ApplyForDigitalCard;
+  

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Button,
+  Flex,
+  Radio,
+  RadioGroup,
+  Text,
+  VStack,
+  Divider,
+  useBreakpointValue,
+} from "@chakra-ui/react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import SelectCard from "./SelectCard";
+import DigiTable from "../DigiTable";
+import WhereToShare from "./WhereToShare";
+
+const Stepper = () => {
+  const [step, setStep] = useState(1);
+  const steps = [
+    { component: <SelectCard />, description: "In Progress" },
+    {
+      component: <WhereToShare />,
+
+      label: "Where to share?",
+      description: "Pending",
+    },
+    {
+      component: <DigiTable />,
+      label: "Select employee",
+      description: "Pending",
+    },
+  ];
+
+  const handleNext = () => {
+    if (step < steps.length) {
+      setStep(step + 1);
+    }
+  };
+
+  const handlePrev = () => {
+    if (step > 1) {
+      setStep(step - 1);
+    }
+  };
+
+  const currentStep = step - 1;
+  const isLastStep = step === steps.length;
+  const isFirstStep = step === 1;
+  const circleSize = useBreakpointValue({ base: "30px", md: "40px" });
+
+  return (
+    <Box bgColor="#F3F3F9" {...OPACITY_ON_LOAD} overflow={"scroll"} p={4}>
+      <Box bgColor="#fff" maxW="100%">
+        <RadioGroup
+          value={String(step)}
+          onChange={(val) => setStep(Number(val))}
+        >
+          <Flex p={4} justifyContent="space-between" alignItems="center">
+            {steps.map((item, index) => (
+              <VStack key={index} spacing={2}>
+                <Radio value={String(index + 1)} colorScheme="purple" size="lg">
+                  {/* {index + 1} */}
+                </Radio>
+                <Text fontSize="small" color="#9C9C9C" fontWeight={400}>
+                  STEP {index + 1}
+                </Text>
+                <Text color="#000000" fontWeight={600} fontSize="small">
+                  {item.label}
+                </Text>
+                <Text
+                  fontSize="sm"
+                  color={index + 1 === step ? "blue.500" : "gray.500"}
+                >
+                  {index + 1 === step ? "In Progress" : "Pending"}
+                </Text>
+              </VStack>
+            ))}
+          </Flex>
+        </RadioGroup>
+
+        {/* Stepper Content */}
+        <Box mt={4}>{steps[currentStep].component}</Box>
+
+        {/* Navigation Buttons */}
+        <Flex justifyContent="space-between" mt={8}>
+          <Button
+            onClick={handlePrev}
+            disabled={isFirstStep}
+            colorScheme="purple"
+            variant="outline"
+          >
+            Previous
+          </Button>
+          <Button
+            onClick={handleNext}
+            disabled={isLastStep}
+            colorScheme="purple"
+          >
+            Next
+          </Button>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};
+
+export default Stepper;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx

@@ -0,0 +1,87 @@
+import {
+  Box,
+  Button,
+  Image,
+  Radio,
+  RadioGroup,
+  Stack,
+  Text,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  useDisclosure,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import FileUploader from "../../../Components/FileUploader/FileUploader";
+import blackmen from "../../../assets/blackmen.png";
+import koreanpfp from "../../../assets/koreanboi.png";
+import asian from "../../../assets/asain.png";
+import goth from "../../../assets/goth.png";
+import womenpfp from "../../../assets/womenpfp1.png";
+import { useRef } from "react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import DigiTable from "../DigiTable";
+
+const BrandVoucherTable = () => {
+  const [selectedValue, setSelectedValue] = useState("1");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = useRef();
+
+  const renderContent = () => {
+    switch (selectedValue) {
+      case "1":
+        return <Text>Hii</Text>;
+      case "2":
+        return <Text>Heelo</Text>;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Box
+      bgColor="#F3F3F9"
+      h="100%"
+      {...OPACITY_ON_LOAD}
+      p={4}
+      overflowX="scroll"
+    >
+      <Box
+        display="flex"
+        w="100%"
+        flexDirection="column"
+        bgColor="#FFFFFF"
+        p={4}
+        alignItems="start"
+        rounded={"md"}
+      >
+        <Text fontSize="medium" fontWeight={600}>
+          Select employee
+        </Text>
+        <FileUploader />
+      </Box>
+
+      <Text
+        align="center"
+        mt="1rem"
+        color="#0F0F0F"
+        fontWeight={600}
+        fontSize="small"
+      >
+        Download a{" "}
+        <span style={{ color: "#3725EA", fontWeight: 700 }}>
+          sample spreadsheet
+        </span>{" "}
+        to quickly start your import
+      </Text>
+      <Box>
+        <DigiTable />
+      </Box>
+    </Box>
+  );
+};
+
+export default BrandVoucherTable;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx

@@ -0,0 +1,148 @@
+import { Box, Button, Image, Text, VStack } from "@chakra-ui/react";
+import React, { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt"; // Ensure this is imported
+import mobilepng from "../../../assets/mobileCard.png";
+import cardfooter from "../../../assets/cardFooter.png";
+import cardfooter2 from "../../../assets/cardFooter2.png";
+import cardfooter3 from "../../../assets/cardFooter3.png";
+
+const cards = [
+  {
+    title: "Save More",
+    subtitle: "Digital Gift Card",
+    description:
+      "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
+    image: mobilepng,
+    img: cardfooter,
+    link: "/dashboard/apply-for-giftcards/apply-for-digitalcard",
+  },
+  {
+    title: "Save More",
+    subtitle: "Physical Gift Card",
+    description:
+      "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
+    img: cardfooter2,
+  },
+  {
+    title: "Save More",
+    subtitle: "Insta Gift Card",
+    description:
+      "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
+    img: cardfooter3,
+  },
+];
+
+const SelectCard = () => {
+  const tiltRefs = useRef([]);
+
+  useEffect(() => {
+    tiltRefs.current.forEach((node) => {
+      if (node) {
+        VanillaTilt.init(node, {
+          max: 13,
+          speed: 700,
+          glare: true,
+          scale: 1.05,
+          "max-glare": 0.5,
+          onEnter: () => {
+            node.style.zIndex = 10; // Bring to top on hover
+          },
+          onLeave: () => {
+            node.style.zIndex = 1; // Reset zIndex after hover
+          },
+        });
+      }
+    });
+
+    // Cleanup VanillaTilt instances on unmount
+    return () => {
+      tiltRefs.current.forEach((node) => {
+        if (node?.vanillaTilt) {
+          node.vanillaTilt.destroy();
+        }
+      });
+    };
+  }, [tiltRefs]);
+
+  return (
+    <Box p={4}>
+      <Text color="#000000" fontWeight={600} fontSize="small">
+        Select card type
+      </Text>
+
+      <Box display="flex" justifyContent="center" gap={4}>
+        {cards.map((card, index) => (
+          <Box
+            key={index}
+            ref={(el) => (tiltRefs.current[index] = el)}
+            bgGradient="linear-gradient(180deg, #6311CB 0%, #1F1584 100%)"
+            color="white"
+            borderRadius="lg"
+            overflow="hidden"
+            width={{ base: "100%", md: "300px" }}
+            padding={6}
+            textAlign="center"
+            boxShadow="lg"
+            position="relative"
+          >
+            <VStack
+              h="373px"
+              alignItems="flex-start"
+              spacing={4}
+              position="relative"
+            >
+              <Button
+                p={4}
+                bgColor="transparent"
+                border="1px solid #fff"
+                color="#fff"
+                fontSize="small"
+                _hover={{ bgColor: "transparent", color: "white" }}
+              >
+                Select
+              </Button>
+
+              <Text as="span" fontSize="large">
+                {card.title}
+              </Text>
+
+              <Text as="span" fontSize="large">
+                {card.subtitle}
+              </Text>
+
+              <Text as="span" fontSize="small" textAlign="start">
+                {card.description}
+              </Text>
+
+              {card.image && (
+                <Image
+                  src={card.image}
+                  h="190px"
+                  objectFit="cover"
+                  position="absolute"
+                  bottom="-1.5rem"
+                  right="-1.5rem"
+                  borderRadius="md"
+                />
+              )}
+
+              {card.img && (
+                <Image
+                  src={card.img}
+                  h="111px"
+                  objectFit="cover"
+                  position="absolute"
+                  bottom="-1.5rem"
+                  left="-1.5rem"
+                  borderRadius="md"
+                />
+              )}
+            </VStack>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default SelectCard;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx

@@ -0,0 +1,46 @@
+import { Box, FormControl, FormLabel, Input, Text } from "@chakra-ui/react";
+import { Grid, GridItem } from "@chakra-ui/react";
+import React from "react";
+
+const formsInfos = [
+  {
+    label: "Address line 1",
+  },
+  {
+    label: "Address line 2",
+  },
+  {
+    label: "Pincode",
+  },
+  {
+    label: "City",
+  },
+  {
+    label: "Single Point Activation Number",
+  },
+];
+
+const SingleAddress = () => {
+  return (
+    <Box p={4}>
+      <Text color="#5E5E5E" fontWeight={600} fontSize="small" mb={4}>
+        Fill address details
+      </Text>
+
+      <FormControl>
+        <Grid templateColumns='repeat(2, 1fr)' gap={6}>
+          {formsInfos.map((val) => (
+            <GridItem
+              key={val.label}
+            >
+              <FormLabel>{val.label}</FormLabel>
+              <Input type="text" />
+            </GridItem>
+          ))}
+        </Grid>
+      </FormControl>
+    </Box>
+  );
+};
+
+export default SingleAddress;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx

@@ -0,0 +1,52 @@
+import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import SingleAddress from "./SingleAddress";
+
+const WhereToShare = ({ register }) => {
+  const [selectedValue, setSelectedValue] = useState("1");
+
+  const renderContent = () => {
+    switch (selectedValue) {
+      case "1":
+        return <SingleAddress />;
+      case "2":
+        return <Box>Add department content</Box>;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <RadioGroup onChange={setSelectedValue} value={selectedValue}>
+        <Stack spacing={4} direction="row">
+          <Box
+            p={1}
+            display="flex"
+            flexDirection="row"
+            borderRadius="5px"
+            bgColor="#F4F4F4"
+          >
+            <Radio size="sm" colorScheme="purple" value="1">
+              Single address
+            </Radio>
+          </Box>
+          <Box
+            p={2}
+            display="flex"
+            flexDirection="row"
+            borderRadius="5px"
+            bgColor="#F4F4F4"
+          >
+            <Radio size="sm" colorScheme="blue" value="2">
+              Multiple address
+            </Radio>
+          </Box>
+        </Stack>
+      </RadioGroup>
+      <Box mt={4}>{renderContent()}</Box>
+    </>
+  );
+};
+
+export default WhereToShare;

src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx

@@ -0,0 +1,285 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  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 {
+  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 { AiOutlineShoppingCart } from "react-icons/ai";
+import VoucherImg from "../../assets/voucher.png";
+import { GrDownload } from "react-icons/gr";
+
+const BrandVoucher = () => {
+  const { voucher } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedRadio, setSelectedRadio] = 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 = [
+    "Sr. no",
+    "Date & time",
+    "Employees/department",
+    "Total amount",
+    "Order Status",
+    "Allotment history",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = voucher.map((item, index) => ({
+    "Sr. no": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+        >
+          {item?.id}
+        </Text>
+    ),
+    "Date & time": item?.DateTime,
+    "Employees/department": item?.EmployeesDepartment,
+    "Total amount": item?.TotalAmount,
+    // Grade: item?.Grade,
+    // Department: item?.Department,
+    // Role: item?.Role,
+    "Order Status": (
+      <Tag
+        my={1}
+        size={"sm"}
+        borderRadius="full"
+        bgColor={
+          item?.OrderStatus === "Scheduled"
+            ? "#F8F3FF"
+            : item?.OrderStatus === "#Completed"
+            ? "#00A43814"
+            : " "
+        }
+        color={
+          item?.OrderStatus === "Scheduled"
+            ? "#6311CB"
+            : item?.OrderStatus === "Completed"
+            ? "#00A438"
+            : ""
+        }
+        p={1}
+        px={3}
+      >
+        <TagLabel>● {item?.OrderStatus}</TagLabel>
+      </Tag>
+    ),
+    "Allotment history": (
+      <>
+        <Button
+          display="flex"
+          alignItems="center"
+          gap={2}
+          fontSize="x-small"
+          color="#3725EA"
+          bgColor="white"
+          _hover={{ bgColor: "white" }}
+        >
+          <GrDownload />
+          Download
+        </Button>
+      </>
+    ),
+  }));
+
+  return (
+    <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">
+              <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>
+              <Link to={"#"} style={{ marginRight: "8px" }}>
+                <SecondaryButton
+                  leftIcon={<Image me={2} src={VoucherImg} w={"17px"} />}
+                  title={"Voucher draft"}
+                />
+              </Link>
+
+              <Link
+                to={"/brand-voucher/buy-voucher"}
+                style={{ marginRight: "8px" }}
+              >
+                <PrimaryButton
+                  leftIcon={<AiOutlineShoppingCart />}
+                  title={"Buy vouchers"}
+                />
+              </Link>
+            </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>
+              <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>
+              <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>
+            </Box>
+          </HStack>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          showRadioButton={true}
+          setSelectedRadio={setSelectedRadio}
+          selectedRadio={selectedRadio}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default BrandVoucher;

src/Pages/OptiFiiGifsAndVouchers/BrandVoucherTable.jsx

@@ -0,0 +1,109 @@
+import {
+  Box,
+  Button,
+  Image,
+  Radio,
+  RadioGroup,
+  Stack,
+  Text,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  useDisclosure,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import FileUploader from "../../Components/FileUploader/FileUploader";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import SelectEmp from "./SelectEmployee";
+import blackmen from "../../assets/blackmen.png";
+import koreanpfp from "../../assets/koreanboi.png";
+import asian from "../../assets/asain.png";
+import goth from "../../assets/goth.png";
+import womenpfp from "../../assets/womenpfp1.png";
+import  SelectDepartment from "./SelectDepartment"
+import { useRef } from "react";
+
+
+
+const BrandVoucherTable = () => {
+  const [selectedValue, setSelectedValue] = useState("1");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = useRef();
+
+  const renderContent = () => {
+    switch (selectedValue) {
+      case "1":
+        return <SelectEmp />;
+      case "2":
+        return <SelectDepartment/>;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Box
+      bgColor="#F3F3F9"
+      h="100%"
+      {...OPACITY_ON_LOAD}
+      p={4}
+      overflowX="scroll"
+    >
+      <Box
+        display="flex"
+        w="100%"
+        flexDirection="column"
+        bgColor="#FFFFFF"
+        p={4}
+        alignItems="start"
+        rounded={"md"}
+      >
+        <Text fontSize="medium" fontWeight={600} >
+          Select employee
+        </Text>
+        <FileUploader />
+      </Box>
+
+      <Text
+        align="center"
+        mt="1rem"
+        color="#0F0F0F"
+        fontWeight={600}
+        fontSize="small"
+      >
+        Download a{" "}
+        <span style={{ color: "#3725EA", fontWeight: 700 }}>
+          sample spreadsheet
+        </span>{" "}
+        to quickly start your import
+      </Text>
+
+      <Box
+        display="flex"
+        flexDirection="column"
+        bgColor="#FFFFFF"
+        p={4}
+        w="100%"
+        rounded={"md"}
+      >
+        <RadioGroup onChange={setSelectedValue} value={selectedValue}>
+          <Stack spacing={4} direction="row">
+            <Radio size="sm" colorScheme="blue" value="1">
+              Select employee
+            </Radio>
+            <Radio size="sm" colorScheme="blue" value="2">
+              Select department
+            </Radio>
+          </Stack>
+        </RadioGroup>
+
+        <Box mt={4}>{renderContent()}</Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default BrandVoucherTable;

src/Pages/OptiFiiGifsAndVouchers/BuySingleVouchers.jsx

@@ -0,0 +1,83 @@
+// import React, { useState } from "react";
+// import { Box, Image, Text, Grid, Button, Stack } from "@chakra-ui/react";
+// import { OPACITY_ON_LOAD } from "../../Layout/animations";
+// import temp1 from "../../assets/temp1.png";
+
+// const cards = [
+//   {
+//     id: 1,
+//     image: temp1,
+//     // title: "You Deserve a Treat",
+//     // description: "Thank you for everything!",
+//   },
+// ];
+
+// const BuySingleVouchers = () => {
+//   const [selectedCard, setSelectedCard] = useState(null);
+
+//   const handleCardSelect = (card) => {
+//     // setSelectedCard(card);
+//   };
+
+//   return (
+//     <Grid templateColumns="repeat(3, 1fr)" gap={6}>
+//       {cards.map((card) => (
+//         <Box
+//           bgImage={`url(${card.image})`}
+//           bgSize="cover"
+//           bgPosition="center"
+//           key={card.id}
+//           border="1px"
+//           borderColor="gray.200"
+//           borderRadius="md"
+//           overflow="hidden"
+//           cursor="pointer"
+//           onClick={() => handleCardSelect(card)}
+//         >
+//           {/* <Box p={4}>
+//             <Text fontWeight="bold">{card.title}</Text>
+//             <Text>{card.description}</Text>
+//           </Box> */}
+//         </Box>
+//       ))}
+//       <PreviewCard selectedCard={selectedCard} />
+//     </Grid>
+//   );
+// };
+
+// const PreviewCard = ({ selectedCard }) => {
+//   if (!selectedCard) {
+//     return <Text>Select a card to preview</Text>;
+//   }
+
+//   return (
+//     <Box
+//       bgColor="#F3F3F9"
+//       h="100%"
+//       {...OPACITY_ON_LOAD}
+//       overflowX={"scroll"}
+//       border="1px"
+//       borderColor="gray.200"
+//       borderRadius="md"
+//       p={4}
+//     >
+//       <Text fontWeight="bold" mb={4}>
+//         Preview:
+//       </Text>
+//       <Image src={selectedCard.image} alt={selectedCard.title} />
+//       <Text fontWeight="bold">{selectedCard.title}</Text>
+//       <Text>{selectedCard.description}</Text>
+//     </Box>
+//   );
+// };
+
+// export default BuySingleVouchers;
+import React from 'react'
+
+const BuySingleVouchers = () => {
+  return (
+    <div>BuySingleVouchers</div>
+  )
+}
+
+export default BuySingleVouchers

src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx

@@ -0,0 +1,248 @@
+import { Box, Button, Image, Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import parkeAvenue from "../../assets/parkeAvenue.png";
+import bewakoof from "../../assets/bewakoof.png";
+import hm from "../../assets/HM.png";
+import nike from "../../assets/nike.png";
+import amazon from "../../assets/amazon.png";
+import myTrip from "../../assets/myTrip.png";
+import myGlam from "../../assets/myGlam.png";
+import Cards from "./Tabs/AllVouchers";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import {
+  Tabs,
+  TabList,
+  TabPanels,
+  Tab,
+  TabPanel,
+  Icon,
+} from "@chakra-ui/react";
+import {
+  FaTv,
+  FaShoppingCart,
+  FaUtensils,
+  FaTshirt,
+  FaPlane,
+  FaHeart,
+} from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+
+const brands = [
+  {
+    id: 1,
+    img: parkeAvenue,
+  },
+  {
+    id: 2,
+    img: bewakoof,
+  },
+  {
+    id: 3,
+    img: hm,
+  },
+  {
+    id: 3,
+    img: nike,
+  },
+  {
+    id: 4,
+    img: amazon,
+  },
+  {
+    id: 5,
+    img: myTrip,
+  },
+  {
+    id: 5,
+    img: myGlam,
+  },
+  {
+    id: 3,
+    img: nike,
+  },
+];
+
+const BuyVoucher = () => {
+  const [selectedCard, setSelectedCard] = useState(null);
+  const navigate = useNavigate();
+
+  const handleSelectCard = (index) => {
+    setSelectedCard(index);
+  };
+
+  const handleProceed = () => {
+    if (selectedCard !== null) {
+      navigate("/brand-voucher/buy-voucher-card/preview"); // Proceed with the selected card
+    }
+  };
+
+  const tabData = [
+    {
+      label: "All",
+      icon: FaTv,
+      content: (
+        <Cards
+          handleSelectCard={handleSelectCard}
+          handleProceed={handleProceed}
+          selectedCard={selectedCard}
+          setSelectedCard={setSelectedCard}
+          navigate={navigate}
+        />
+      ),
+    },
+    {
+      label: "Electronics",
+      icon: FaTv,
+      content: (
+        <Cards
+          handleSelectCard={handleSelectCard}
+          handleProceed={handleProceed}
+          selectedCard={selectedCard}
+          setSelectedCard={setSelectedCard}
+          navigate={navigate}
+        />
+      ),
+    },
+    {
+      label: "Ecommerce",
+      icon: FaShoppingCart,
+      content: (
+        <Cards
+          handleSelectCard={handleSelectCard}
+          handleProceed={handleProceed}
+          selectedCard={selectedCard}
+          setSelectedCard={setSelectedCard}
+          navigate={navigate}
+        />
+      ),
+    },
+    {
+      label: "Lifestyle",
+      icon: FaHeart,
+      content: (
+        <Cards
+          handleSelectCard={handleSelectCard}
+          handleProceed={handleProceed}
+          selectedCard={selectedCard}
+          setSelectedCard={setSelectedCard}
+          navigate={navigate}
+        />
+      ),
+    },
+    {
+      label: "Food & Beverages",
+      icon: FaUtensils,
+      content: (
+        <Cards
+          handleSelectCard={handleSelectCard}
+          handleProceed={handleProceed}
+          selectedCard={selectedCard}
+          setSelectedCard={setSelectedCard}
+          navigate={navigate}
+        />
+      ),
+    },
+    {
+      label: "Clothing",
+      icon: FaTshirt,
+      content: (
+        <Cards
+          handleSelectCard={handleSelectCard}
+          handleProceed={handleProceed}
+          selectedCard={selectedCard}
+          setSelectedCard={setSelectedCard}
+          navigate={navigate}
+        />
+      ),
+    },
+    {
+      label: "Travel",
+      icon: FaPlane,
+      content: (
+        <Cards
+          handleSelectCard={handleSelectCard}
+          handleProceed={handleProceed}
+          selectedCard={selectedCard}
+          setSelectedCard={setSelectedCard}
+          navigate={navigate}
+        />
+      ),
+    },
+    {
+      label: "Lifestyle",
+      icon: FaHeart,
+      content: (
+        <Cards
+          handleSelectCard={handleSelectCard}
+          handleProceed={handleProceed}
+          selectedCard={selectedCard}
+          setSelectedCard={setSelectedCard}
+          navigate={navigate}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Box
+      bgColor="#F3F3F9"
+      h="100%"
+      {...OPACITY_ON_LOAD}
+      p={4}
+      overflowX={"scroll"}
+    >
+      <Box p={4} bgColor="#FFFFFF" boxShadow="md" w="100%" mb={4} rounded={"md"}>
+        <Text color="#222222" fontWeight={600} fontSize="small">
+          Choose from popular brand
+        </Text>
+
+        <Box display="flex" gap={8} flexDirection="row" alignItems="center">
+          {brands.map((val) => {
+            return (
+              <>
+                <Image h="45px" src={val.img} />
+              </>
+            );
+          })}
+        </Box>
+      </Box>
+
+      <Box p={4} bgColor="#FFFFFF" boxShadow="md" w="100%" h="100%" rounded={"md"}>
+        <Text color="#222222" fontSize="small" fontWeight={600}>
+          Shop by category
+        </Text>
+        <Tabs variant="soft-rounded" colorScheme="purple" align="start">
+          <TabList display="flex" flexDirection="row" gap={4}>
+            {tabData.map((tab, index) => (
+              <Tab fontSize="small" key={index}>
+                <Icon as={tab.icon} mr={2} />
+                {tab.label}
+              </Tab>
+            ))}
+          </TabList>
+          <Box w="100%" border="0.5px solid #6311CB5E" mt="2" />
+          {/* Mapping through tabData to create tab panels */}
+          <TabPanels>
+            {tabData.map((tab, index) => (
+              <TabPanel key={index} px={0}>
+                <p>{tab.content}</p>
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+
+        <Button
+          bgColor="#6311CB"
+          color="white"
+          px="3rem"
+          _hover={{ bgColor: "#6311CB" }}
+          onClick={handleProceed}
+        >
+          Proceed to add
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default BuyVoucher;

src/Pages/OptiFiiGifsAndVouchers/DigiTable.jsx

@@ -0,0 +1,273 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  HStack,
+  IconButton,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Tag,
+  TagLabel,
+  Text,
+  useDisclosure,
+  VStack,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+} from "@chakra-ui/react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md";
+import { FaRegUser } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+import { LuEye, LuListFilter } from "react-icons/lu";
+import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs";
+import { useToast } from "@chakra-ui/react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import FileUploader from "../../Components/FileUploader/FileUploader";
+
+const Employees = () => {
+  const { employees } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [scrollBehavior, setScrollBehavior] = useState("inside");
+  const [selectedRadio, setSelectedRadio] = useState([]);
+  const toast = useToast();
+  const btnRef = useRef();
+
+  const {
+    isOpen: isModalOpen,
+    onOpen: onModalOpen,
+    onClose: onModalClose,
+  } = useDisclosure();
+
+  const {
+    isOpen: isPaymentOpen,
+    onOpen: onPaymentOpen,
+    onClose: onPaymentClose,
+  } = useDisclosure();
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    if (selectedRadio.length > 0) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  }, [selectedRadio, onOpen, onClose]);
+
+  const tableHeadRow = [
+    "Emp ID",
+    "Name",
+    "Email Address",
+    "Department",
+    "Designation",
+  ];
+
+  const extractedArray = employees.map((item) => ({
+    "Emp ID": (
+      // <Checkbox colorScheme="purple" value="1">
+      <Text as={"span"} fontSize={"xs"}>
+        {item?.EmpID}
+      </Text>
+      // </Checkbox>
+    ),
+    Name: (
+      <HStack>
+        <Image
+          borderRadius="full"
+          boxSize="40px"
+          src="https://bit.ly/dan-abramov"
+          alt="Dan Abramov"
+        />
+        <Text mb={0}>{item?.Name}</Text>
+      </HStack>
+    ),
+    "Email Address": item?.emailAddress,
+    Department: item?.Department,
+    Designation: 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>
+    ),
+    Action: (
+      <Box>
+        <Menu>
+          <MenuButton
+            as={IconButton}
+            aria-label="Options"
+            icon={<BsThreeDotsVertical />}
+            bg={"transparent"}
+          />
+          <MenuList>
+            <MenuItem icon={<MdOutlineModeEdit color="#6311CB" size={16} />}>
+              Edit
+            </MenuItem>
+            <MenuItem
+              icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}
+            >
+              Delete
+            </MenuItem>
+            <MenuItem
+              icon={<LuEye color="#6311CB" size={16} />}
+              onClick={() => navigate("/employees/view")}
+            >
+              View
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </Box>
+    ),
+  }));
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <Box
+        rounded={"xl"}
+        py={3}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+        <Box
+          display="flex"
+          w="100%"
+          flexDirection="column"
+          bgColor="#FFFFFF"
+          p={4}
+          alignItems="start"
+          rounded={"md"}
+        >
+          <Text fontSize="medium" fontWeight={600}>
+            Import employee
+          </Text>
+          <FileUploader />
+        </Box>
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+            <Box>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<BsFilterRight fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                >
+                  Sort
+                </MenuButton>
+                <MenuList>
+                  <MenuItem>Ascending</MenuItem>
+                  <MenuItem>Descending</MenuItem>
+                  <MenuItem>Recently Viewed</MenuItem>
+                  <MenuItem>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+            <HStack>
+              <InputGroup width={300} size="sm">
+                <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>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<LuListFilter fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                >
+                  Filter
+                </MenuButton>
+                <MenuList>
+                  <MenuItem>Ascending</MenuItem>
+                  <MenuItem>Descending</MenuItem>
+                  <MenuItem>Recently Viewed</MenuItem>
+                  <MenuItem>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+              <Button
+                color="white"
+                bgColor="#6311CB"
+                fontSize="small"
+                _hover={{ bgColor: "#6311CB", color: "white" }}
+              >
+                Proceed
+              </Button>
+            </HStack>
+          </HStack>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Employees`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          showRadioButton={true}
+          setSelectedRadio={setSelectedRadio}
+          selectedRadio={selectedRadio}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default Employees;

src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx

@@ -17,6 +17,7 @@ import {
   Tag,
   TagLabel,
   Text,
+  useDisclosure,
   VStack,
 } from "@chakra-ui/react";
 import {
@@ -45,16 +46,9 @@ import {
   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, 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";
@@ -69,6 +63,7 @@ const GiftCard = () => {
   const { digital } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCheckBox, setSelectedCheckBox] = useState([]);
   const [users, setusers] = useState(50);
 
   useEffect(() => {
@@ -93,9 +88,6 @@ const GiftCard = () => {
     "Total employees",
     "Total valuation",
     "Activation Status",
-    // "Role",
-    // "Status",
-    // "Action",
   ];
 
   const physicaltableHeadRow = [
@@ -123,7 +115,7 @@ const GiftCard = () => {
   const physicalCardArr = digital.map((item, index) => ({
     "Sr. no": (
       // <Radio colorScheme="purple" value="1">
-      <Checkbox colorScheme="purple">
+      // <Checkbox colorScheme="purple">
         <Text
           as={"span"}
           display={"flex"}
@@ -141,7 +133,7 @@ const GiftCard = () => {
 
           {item?.id}
         </Text>
-      </Checkbox>
+      // </Checkbox>
     ),
     "Order ID": (
       <Text
@@ -216,21 +208,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>
     ),
@@ -355,7 +337,8 @@ const GiftCard = () => {
   const extractedArray = digital.map((item, index) => ({
     "Sr. no": (
       // <Radio colorScheme="purple" value="1">
-      <Checkbox colorScheme="purple">
+      // <Checkbox colorScheme="purple">
+       
           <Text
             as={"span"}
             display={"flex"}
@@ -373,9 +356,9 @@ const GiftCard = () => {
 
             {item?.id}
           </Text>
-      </Checkbox>
     ),
     "Order ID": (
+      <NavLink to="/gift-card/digital-application-status">
       <Text
         as={"span"}
         display={"flex"}
@@ -394,6 +377,7 @@ const GiftCard = () => {
 
         {item?.orderid}
       </Text>
+      </NavLink>
     ),
     "Email Address": item?.emailAddress,
     "Date & time": item?.dateTime,
@@ -448,21 +432,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>
     ),
@@ -532,7 +506,7 @@ const GiftCard = () => {
   const instaCardArr = digital.map((item, index) => ({
     "Sr. no": (
       // <Radio colorScheme="purple" value="1">
-      <Checkbox colorScheme="purple">
+      // <Checkbox colorScheme="purple">
         <Text
           as={"span"}
           display={"flex"}
@@ -547,13 +521,12 @@ const GiftCard = () => {
             bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
             rounded={"full"}
           /> */}
-
           {item?.id}
         </Text>
-      </Checkbox>
+      // </Checkbox>
     ),
     "Order ID": (
-      <NavLink to={"/application-status"}>
+      <NavLink to={"/gift-card/application-status"}>
         <Text
           as={"span"}
           display={"flex"}
@@ -628,21 +601,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>
     ),
@@ -889,6 +852,9 @@ const GiftCard = () => {
                 tableHeadRow={tableHeadRow}
                 data={extractedArray}
                 isLoading={isLoading}
+                showRadioButton={true}
+                setSelectedRadio={setSelectedCheckBox}
+                selectedRadio={selectedCheckBox}
               />
             </TabPanel>
             <TabPanel>
@@ -897,6 +863,9 @@ const GiftCard = () => {
                 tableHeadRow={physicaltableHeadRow}
                 data={physicalCardArr}
                 isLoading={isLoading}
+                showRadioButton={true}
+                setSelectedRadio={setSelectedCheckBox}
+                selectedRadio={selectedCheckBox}
               />
             </TabPanel>
             <TabPanel>
@@ -905,6 +874,9 @@ const GiftCard = () => {
                 tableHeadRow={instantTableHeadRow}
                 data={instaCardArr}
                 isLoading={isLoading}
+                showRadioButton={true}
+                setSelectedRadio={setSelectedCheckBox}
+                selectedRadio={selectedCheckBox}
               />
             </TabPanel>
           </TabPanels>

src/Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher.jsx

@@ -0,0 +1,203 @@
+import { Box, HStack, Image, Text, VStack } from "@chakra-ui/react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import {
+  FormControl,
+  FormLabel,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  IconButton,
+} from "@chakra-ui/react";
+import { CalendarIcon } from "@chakra-ui/icons";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import Amazonlogo from "../../../assets/amazon.png";
+import { useToast } from "@chakra-ui/react";
+
+// Mock Data
+const bankDetails = [
+  { label: "Name at the bank", value: "Reethik thota" },
+  { label: "Account number", value: "458754215787441" },
+  { label: "Bank name", value: "Bank of India" },
+  { label: "IFSC code", value: "TGY4875845" },
+];
+
+const vouchers = [
+  {
+    id: 1,
+    logo: Amazonlogo,
+    name: "Amazon voucher",
+    validity: "20 June",
+    amount: "₹ 25000",
+    count: 3,
+  },
+];
+
+
+const PaymentVoucher = () => {
+  const [selectedDate, setSelectedDate] = useState("");
+ 
+  const toast = useToast();
+
+  const handleDateChange = (e) => {
+    setSelectedDate(e.target.value);
+  };
+  return (
+    <Box {...OPACITY_ON_LOAD} p={3}>
+      <Text color="#111729" fontWeight={600}>
+        Payment
+      </Text>
+      <VStack>
+        <Accordion w="100%" allowToggle>
+          <AccordionItem border="none" w="100%">
+            <h2>
+              <AccordionButton
+                display="flex"
+                flexDirection="row"
+                alignItems="flex-start"
+                gap={8}
+                w="100%"
+              >
+                <Box as="span" flex="1" textAlign="left">
+                  Show Order Summary
+                </Box>
+                <AccordionIcon />
+                <Text fontWeight={600} fontSize="medium" color="#111729">
+                  ₹ 50,000
+                </Text>
+              </AccordionButton>
+            </h2>
+            <AccordionPanel w="100%">
+              <Box>
+                {vouchers.map((voucher) => (
+                  <HStack
+                    key={voucher.id}
+                    bgColor={"#F8FAFC"}
+                    w="100%"
+                    position="relative"
+                    alignItems="center"
+                    border=" 1px solid #E3E8EF"
+                  >
+                    <HStack
+                      bgColor={"#FFFFFF05"}
+                      justifyContent="space-between"
+                      w="30%"
+                      p={3}
+                    >
+                      <Box
+                        bgColor="#FFFFFF"
+                        boxShadow="0px 2px 4px rgba(17, 27, 35, 0.1)"
+                        borderRadius="8px"
+                        p={2}
+                      >
+                        <Image src={voucher.logo} h="44px" />
+                      </Box>
+                      <Box
+                        h="16px"
+                        w="16px"
+                        borderRadius="50%"
+                        position="absolute"
+                        bgColor="#FFFFFF"
+                        bottom="4.1rem"
+                        left="3.5rem"
+                        border="1px solid #E3E8EF"
+                        boxShadow="0px 2px 4px rgba(175, 187, 195, 0.2)"
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        fontSize="small"
+                        fontWeight={600}
+                      >
+                        {voucher.count}
+                      </Box>
+                    </HStack>
+
+                    <VStack alignItems="flex-start" w="40%">
+                      <Text color="#111729" fontWeight={600} fontSize="small">
+                        {voucher.name}
+                      </Text>
+                      <HStack alignItems="flex-start">
+                        <Text color="#111729" fontWeight={400} fontSize="small">
+                          Validity:
+                        </Text>
+                        <Text color="#111729" fontWeight={600} fontSize="small">
+                          {voucher.validity}
+                        </Text>
+                      </HStack>
+                    </VStack>
+
+                    <Text fontSize="small" fontWeight={600} color="#111729">
+                      {voucher.amount}
+                    </Text>
+                  </HStack>
+                ))}
+                <Box w="100%" mt={6} borderBottom="1px solid #E3E8EF" />
+                <HStack w="100%" mt={2} justifyContent="space-between">
+                  <Text fontSize="small" fontWeight={600} color="#111729">
+                    Total
+                  </Text>
+                  <Text fontSize="small" fontWeight={600} color="#111729">
+                    ₹ 50000
+                  </Text>
+                </HStack>
+              </Box>
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+
+        <Text color="#000000" fontSize={"medium"} fontWeight={600}>
+          Make the payment on the below bank account details:
+        </Text>
+        <VStack alignItems="flex-start" w="100%">
+          {bankDetails.map((detail, index) => (
+            <HStack w="100%" justifyContent="space-between" key={index}>
+              <Text color="#677489" fontWeight={600} fontSize="small">
+                {detail.label}
+              </Text>
+              <Text color="#111729" fontWeight={600} fontSize="small">
+                {detail.value}
+              </Text>
+            </HStack>
+          ))}
+        </VStack>
+
+        <VStack alignItems="flex-start" w="100%" mt="1rem">
+          <Text color="#000000" fontSize="medium" fontWeight={500}>
+            Schedule order
+          </Text>
+          <FormControl>
+            <FormLabel>Schedule order</FormLabel>
+            <InputGroup>
+              <InputLeftElement pointerEvents="none">
+                <CalendarIcon color="purple.500" />
+              </InputLeftElement>
+
+              <Input
+                type="date"
+                value={selectedDate}
+                onChange={handleDateChange}
+                maxWidth="100%"
+                border="1px solid"
+                borderColor="purple.500"
+                borderRadius="md"
+                _hover={{ borderColor: "purple.600" }}
+                _focus={{ borderColor: "purple.700", outline: "none" }}
+              />
+            </InputGroup>
+          </FormControl>
+          <Text color="#E81515" fontSize="medium" fontWeight={600}>
+            *Once Payment is done kindly share the UTR Code
+          </Text>
+        </VStack>
+      </VStack>
+    </Box>
+  );
+};
+
+export default PaymentVoucher;

src/Pages/OptiFiiGifsAndVouchers/Preview.jsx

@@ -0,0 +1,239 @@
+import {
+  Box,
+  Button,
+  FormLabel,
+  Icon,
+  Image,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import {
+  FaTv,
+  FaShoppingCart,
+  FaUtensils,
+  FaTshirt,
+  FaHeart,
+} from "react-icons/fa";
+import AllTemp from "./Tabs/AllTemp";
+import amazon from "../../assets/amazonlogoF.png";
+import { Link } from "react-router-dom";
+
+const Preview = () => {
+  const [selectedCard, setSelectedCard] = useState(null);
+
+  const handleCardSelect = (card) => {
+    setSelectedCard(card);
+  };
+
+  const tabData = [
+    {
+      label: "All",
+      icon: FaTv,
+      content: (
+        <AllTemp
+          selectedCard={selectedCard}
+          handleCardSelect={handleCardSelect}
+        />
+      ),
+    },
+    { label: "Thank you", icon: FaTv, content: "Content for Electronics" },
+    {
+      label: "Best wishes",
+      icon: FaShoppingCart,
+      content: "Content for Ecommerce",
+    },
+    {
+      label: "Happy birthday",
+      icon: FaHeart,
+      content: "Content for Lifestyle",
+    },
+    {
+      label: "Congratulations",
+      icon: FaUtensils,
+      content: "Content for Food & Beverages",
+    },
+    { label: "Thank you", icon: FaTshirt, content: "Content for Clothing" },
+  ];
+
+  return (
+    <Box
+      bgColor="#F3F3F9"
+      h="100%"
+      {...OPACITY_ON_LOAD}
+      p={4}
+      overflowX={"scroll"}
+      display="flex"
+      justifyContent="space-between"
+      flexDirection="row"
+    >
+      <Box display="flex" w="60%" flexDirection="column">
+        <Text fontSize={"medium"} fontWeight={"semibold"}>
+          Select template
+        </Text>
+        <Text fontSize={"medium"} fontWeight={400}>
+          Category
+        </Text>
+        <Tabs
+          w="100%"
+          variant="soft-rounded"
+          colorScheme="purple"
+          align="start"
+        >
+          <TabList display="flex" flexDirection="row" gap={0}>
+            {tabData.map((tab, index) => (
+              <Tab fontSize="x-small" key={index} whiteSpace="nowrap">
+                <Icon as={tab.icon} mr={2} />
+                {tab.label}
+              </Tab>
+            ))}
+          </TabList>
+          <Box w="100%" border="0.5px solid #6311CB5E" mt="2" />
+          {/* Mapping through tabData to create tab panels */}
+          <TabPanels>
+            {tabData.map((tab, index) => (
+              <TabPanel
+                sx={{
+                  "&::-webkit-scrollbar": {
+                    width: "8px",
+                  },
+                  "&::-webkit-scrollbar-track": {
+                    background: "#6311CB1A",
+                  },
+                  "&::-webkit-scrollbar-thumb": {
+                    background: "#6311CB",
+                    borderRadius: "8px",
+                  },
+                  "&::-webkit-scrollbar-thumb:hover": {
+                    background: "#555",
+                  },
+                }}
+                h={"450px"}
+                overflowY="scroll"
+                key={index}
+              >
+                <p>{tab.content}</p>
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </Box>
+
+      <Box
+        bgColor="#F3F3F9"
+        h="100%"
+        w="40%"
+        {...OPACITY_ON_LOAD}
+        overflowY={"scroll"}
+        border="1px"
+        borderColor="gray.200"
+        borderRadius="md"
+        p={4}
+        sx={{
+          "&::-webkit-scrollbar": {
+            width: "8px",
+          },
+          "&::-webkit-scrollbar-track": {
+            background: "#6311CB1A",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            background: "#6311CB",
+            borderRadius: "8px",
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            background: "#555",
+          },
+        }}
+      >
+        <Text fontWeight="bold" fontSize="medium">
+          Preview:
+        </Text>
+        {selectedCard ? (
+          <>
+            <Image
+              h="201px"
+              src={selectedCard.image}
+              alt={selectedCard.title}
+            />
+
+            <Box
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              mt={4}
+              gap={1}
+              w="100%"
+            >
+              <Box
+                display="flex"
+                flexDirection="column"
+                alignItems="flex-start"
+                mt={4}
+                gap={1}
+                w="100%"
+              >
+                <Text fontSize="small" color="#2D2D2D" fontWeight={600}>
+                  Hi Receiver,
+                </Text>
+                <Text fontSize="small" color="#2D2D2D" fontWeight={600}>
+                  You’ve got a Amazon pay E-Gift card
+                </Text>
+
+                <FormLabel color="#666666" fontWeight={400} fontSize={"small"}>
+                  Type your message
+                </FormLabel>
+                <Textarea />
+                <Box
+                  display="flex"
+                  flexDirection="row"
+                  justifyContent="space-between"
+                  w="100%"
+                >
+                  <Image h="31px" src={amazon} />
+                  <Box
+                    display="flex"
+                    flexDirection="column"
+                    alignItems="flex-end"
+                  >
+                    <Text fontSize="small" color="#3725EA" fontWeight={600}>
+                      ₹ 500
+                    </Text>
+                    <Text fontSize="small" color="#3725EA" fontWeight={600}>
+                      Validity: xxxxxx
+                    </Text>
+                  </Box>
+                </Box>
+              </Box>
+              <Link to="/brand-voucher/buy-voucher-card/preview/Apply-For-GiftCard">
+                <Button
+                  fontSize="small"
+                  bgColor="#6311CB"
+                  color="#fff"
+                  p={4}
+                  w="301px"
+                >
+                  {" "}
+                  Proceed to add
+                </Button>
+              </Link>
+            </Box>
+            {/* <Text fontWeight="bold" mt={2}>
+                {selectedCard.title}
+              </Text>
+              <Text>{selectedCard.description}</Text> */}
+          </>
+        ) : (
+          <Text>No card selected</Text>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default Preview;

src/Pages/OptiFiiGifsAndVouchers/Previews.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+const PreviewCard = ({ selectedCard }) => {
+  if (!selectedCard) {
+    return <Text>Select a card to preview</Text>;
+  }
+
+  return (
+    <Box
+      bgColor="#F3F3F9"
+      h="100%"
+      {...OPACITY_ON_LOAD}
+      overflowX={"scroll"}
+      border="1px"
+      borderColor="gray.200"
+      borderRadius="md"
+      p={4}
+    >
+      <Text fontWeight="bold" mb={4}>
+        Preview:
+      </Text>
+      <Image src={selectedCard.image} alt={selectedCard.title} />
+      <Text fontWeight="bold">{selectedCard.title}</Text>
+      <Text>{selectedCard.description}</Text>
+    </Box>
+  );
+};
+
+export default Previews;

src/Pages/OptiFiiGifsAndVouchers/SelectDepartment.jsx

@@ -0,0 +1,377 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  HStack,
+  Icon,
+  IconButton,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Radio,
+  Tag,
+  TagLabel,
+  Text,
+  useDisclosure,
+  VStack,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md";
+import { FaRegUser } from "react-icons/fa";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { Link, useNavigate } 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 { LuEye, LuListFilter } from "react-icons/lu";
+import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+import { HiOutlineUserGroup } from "react-icons/hi";
+import blackmen from "../../assets/blackmen.png";
+import koreanpfp from "../../assets/koreanboi.png";
+import asian from "../../assets/asain.png";
+import goth from "../../assets/goth.png";
+import womenpfp from "../../assets/womenpfp1.png";
+
+const Employees = () => {
+  const { employees } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [users, setusers] = useState(50);
+  const [selectedRadio, setSelectedRadio] = useState([]);
+  const navigate = useNavigate();
+  const btnRef = useRef();
+
+  useEffect(() => {
+    if (selectedRadio.length > 0) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  }, [selectedRadio, onOpen, onClose]);
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = ["Sr No", "Department", "Employees"];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = employees.map((item, index) => ({
+    "Sr No": (
+      <Text as={"span"} fontSize={"small"}>
+        {item?.id}
+      </Text>
+    ),
+    Name: (
+      <HStack>
+        <Image
+          borderRadius="full"
+          boxSize="40px"
+          src="https://bit.ly/dan-abramov"
+          alt="Dan Abramov"
+        />
+        <Text mb={0}>{item?.Name}</Text>
+      </HStack>
+    ),
+    "Email Address": item?.emailAddress,
+    "Mobile number": item?.mobileNumber,
+    Grade: item?.Grade,
+    Department: item?.Department,
+    Designation: item?.Role,
+    Employees: (
+      <>
+        <Box
+          position="relative"
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+        >
+          <Image src={womenpfp} h={"30px"} position="absolute" />
+          <Image src={blackmen} h={"30px"} position="absolute" left="1.4rem" />
+          <Image src={koreanpfp} h={"30px"} position="absolute" left="2.7rem" />
+          <Image src={asian} h={"30px"} position="absolute" left="3.9rem" />
+          <Image src={goth} h={"30px"} position="absolute" left="4.9rem" />
+          <Box
+            display="flex"
+            position="absolute"
+            alignItems="center"
+            flexDirection="column"
+            borderRadius="50%"
+            h={"30px"}
+            w="30px"
+            bgColor="#F9F5FF"
+            left="5.9rem"
+            boxShadow="md"
+            justifyContent={"center"}
+          >
+            <Text color="#7F56D9" fontSize="small" mb={0}>
+              +{users}
+            </Text>
+          </Box>
+        </Box>
+      </>
+    ),
+    Action: (
+      <Box>
+        <Menu>
+          <MenuButton
+            as={IconButton}
+            aria-label="Options"
+            icon={<BsThreeDotsVertical />}
+            bg={"transparent"}
+          />
+          <MenuList>
+            <MenuItem
+              icon={<MdOutlineModeEdit color="#6311CB" size={16} />}
+              fontSize={"sm"}
+              fontWeight={500}
+              color={"#4D4D4D"}
+            >
+              Edit
+            </MenuItem>
+            <MenuItem
+              icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}
+              fontSize={"sm"}
+              fontWeight={500}
+              color={"#4D4D4D"}
+            >
+              Delete
+            </MenuItem>
+            <MenuItem
+              icon={<LuEye color="#6311CB" size={16} />}
+              fontSize={"sm"}
+              fontWeight={500}
+              color={"#4D4D4D"}
+              onClick={() => navigate("/employees/view")}
+            >
+              View
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </Box>
+    ),
+  }));
+
+  return (
+    <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={"flex-end"}
+            w={"100%"}
+          >
+            <Box>
+              <Menu>
+                <MenuList>
+                  <MenuItem
+                    icon={<FaRegUser size={14} />}
+                    fontSize={"small"}
+                    fontWeight={500}
+                    color={"#4D4D4D"}
+                  >
+                    Add single employee
+                  </MenuItem>
+                  <MenuItem
+                    icon={<HiOutlineUserGroup size={14} />}
+                    fontSize={"small"}
+                    fontWeight={500}
+                    color={"#4D4D4D"}
+                  >
+                    Add multiple employee
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+          </Box>
+          <Divider />
+          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+            <Box>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<BsFilterRight fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"small"}
+                  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>
+            <HStack>
+              <InputGroup width={300} size="sm">
+                <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>
+              <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>
+            </HStack>
+          </HStack>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          showRadioButton={true}
+          setSelectedRadio={setSelectedRadio}
+          selectedRadio={selectedRadio}
+        />
+    
+        <Drawer
+          isOpen={isOpen}
+          placement="bottom"
+          onClose={onClose}
+          finalFocusRef={btnRef}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerBody>
+              <Box
+                display="flex"
+                flexDirection="row"
+                bgColor="#FFFFFF"
+                w="100%"
+                alignItems="center"
+                justifyContent="space-between"
+                mt={4}
+              >
+                <Box
+                  display="flex"
+                  flexDirection="column"
+                  alignItems="flex-start"
+                >
+                  <Text color="#0F0F0F" fontWeight={600}>
+                    Summary of order
+                  </Text>
+
+                  <Box
+                    display="flex"
+                    flexDirection="row"
+                    alignItems="center"
+                    mt={2}
+                  >
+                    <Image src={womenpfp} h="30px" />
+                    <Image src={blackmen} h="30px" ml="-10px" />
+                    <Image src={koreanpfp} h="30px" ml="-10px" />
+                    <Image src={asian} h="30px" ml="-10px" />
+                    <Image src={goth} h="30px" ml="-10px" />
+
+                    {/* +200 circle */}
+                    <Box
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                      borderRadius="50%"
+                      h="30px"
+                      w="30px"
+                      bgColor="#F9F5FF"
+                      boxShadow="md"
+                      ml={"-10px"}
+                    >
+                      <Text color="#7F56D9" fontSize="small">
+                        +200
+                      </Text>
+                    </Box>
+                  </Box>
+                </Box>
+                <Box
+                  display="flex"
+                  flexDirection="row"
+                  alignItems="flex-start"
+                  gap={4}
+                >
+                  <Text>₹ 10,000</Text>
+                  <Link to="/brand-voucher/voucher-payment">
+                    <Button
+                      bgColor="#6311CB"
+                      color="white"
+                      _hover={{ bgColor: "#6311CB" }}
+                      p={4}
+                      w={"123px"}
+                    >
+                      Proceed
+                    </Button>
+                  </Link>
+                </Box>
+              </Box>
+            </DrawerBody>
+            <DrawerFooter>
+              {/* <Button variant="outline" mr={3} onClick={onClose}>
+                Close
+              </Button> */}
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      </Box>
+    </Box>
+  );
+};
+
+export default Employees;

src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx

@@ -0,0 +1,388 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  HStack,
+  IconButton,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Tag,
+  TagLabel,
+  Text,
+  useDisclosure,
+  VStack,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+} from "@chakra-ui/react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md";
+import { FaRegUser } from "react-icons/fa";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router-dom";
+import SecondaryButton from "../../Components/Buttons/SecondaryButton";
+import { LuEye, LuListFilter } from "react-icons/lu";
+import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs";
+import womenpfp from "../../assets/womenpfp1.png";
+import blackmen from "../../assets/blackmen.png";
+import koreanpfp from "../../assets/koreanboi.png";
+import asian from "../../assets/asain.png";
+import goth from "../../assets/goth.png";
+import Payment from "./Payment/PaymentaVoucher";
+import { useToast } from "@chakra-ui/react";
+import tick from "../../assets/icons/tick.png";
+
+const OverlayOne = () => (
+  <ModalOverlay
+    bg="blackAlpha.300"
+    backdropFilter="blur(10px) hue-rotate(90deg)"
+  />
+);
+
+const Employees = () => {
+  const { employees } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [scrollBehavior, setScrollBehavior] = useState("inside");
+  const [overlay, setOverlay] = React.useState(<OverlayOne />);
+  const [selectedRadio, setSelectedRadio] = useState([]);
+  const toast = useToast();
+  const btnRef = useRef();
+
+  const {
+    isOpen: isModalOpen,
+    onOpen: onModalOpen,
+    onClose: onModalClose,
+  } = useDisclosure();
+
+  const {
+    isOpen: isPaymentOpen,
+    onOpen: onPaymentOpen,
+    onClose: onPaymentClose,
+  } = useDisclosure();
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    if (selectedRadio.length > 0) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  }, [selectedRadio, onOpen, onClose]);
+
+  const tableHeadRow = [
+    "Emp ID",
+    "Name",
+    "Email Address",
+    "Department",
+    "Designation",
+  ];
+
+  const extractedArray = employees.map((item) => ({
+    "Emp ID": (
+      // <Checkbox colorScheme="purple" value="1">
+        <Text as={"span"} fontSize={"xs"}>
+          {item?.EmpID}
+        </Text>
+      // </Checkbox> 
+    ),
+    Name: (
+      <HStack>
+        <Image
+          borderRadius="full"
+          boxSize="40px"
+          src="https://bit.ly/dan-abramov"
+          alt="Dan Abramov"
+        />
+        <Text mb={0}>{item?.Name}</Text>
+      </HStack>
+    ),
+    "Email Address": item?.emailAddress,
+    Department: item?.Department,
+    Designation: 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>
+    ),
+    Action: (
+      <Box>
+        <Menu>
+          <MenuButton
+            as={IconButton}
+            aria-label="Options"
+            icon={<BsThreeDotsVertical />}
+            bg={"transparent"}
+          />
+          <MenuList>
+            <MenuItem icon={<MdOutlineModeEdit color="#6311CB" size={16} />}>
+              Edit
+            </MenuItem>
+            <MenuItem
+              icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}
+            >
+              Delete
+            </MenuItem>
+            <MenuItem
+              icon={<LuEye color="#6311CB" size={16} />}
+              onClick={() => navigate("/employees/view")}
+            >
+              View
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </Box>
+    ),
+  }));
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <Box
+        rounded={"xl"}
+        py={3}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+            <Box>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<BsFilterRight fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                >
+                  Sort
+                </MenuButton>
+                <MenuList>
+                  <MenuItem>Ascending</MenuItem>
+                  <MenuItem>Descending</MenuItem>
+                  <MenuItem>Recently Viewed</MenuItem>
+                  <MenuItem>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+            <HStack>
+              <InputGroup width={300} size="sm">
+                <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>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<LuListFilter fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                >
+                  Filter
+                </MenuButton>
+                <MenuList>
+                  <MenuItem>Ascending</MenuItem>
+                  <MenuItem>Descending</MenuItem>
+                  <MenuItem>Recently Viewed</MenuItem>
+                  <MenuItem>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </HStack>
+          </HStack>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Employees`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          showRadioButton={true}
+          setSelectedRadio={setSelectedRadio}
+          selectedRadio={selectedRadio}
+        />
+
+        <Drawer
+          isOpen={isOpen}
+          placement="bottom"
+          onClose={onClose}
+          finalFocusRef={btnRef}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerBody>
+              <Box
+                display="flex"
+                flexDirection="row"
+                w="100%"
+                alignItems="center"
+                justifyContent="space-between"
+                mt={4}
+              >
+                <Box>
+                  <Text fontWeight={600}>Summary of order</Text>
+                  <Box display="flex" alignItems="center" mt={2}>
+                    <Image src={womenpfp} h="30px" />
+                    <Image src={blackmen} h="30px" ml="-10px" />
+                    <Image src={koreanpfp} h="30px" ml="-10px" />
+                    <Image src={asian} h="30px" ml="-10px" />
+                    <Image src={goth} h="30px" ml="-10px" />
+                    <Box
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                      borderRadius="50%"
+                      h="30px"
+                      w="30px"
+                      bgColor="#F9F5FF"
+                      ml={"-10px"}
+                    >
+                      <Text color="#7F56D9" fontSize="xs">
+                        +200
+                      </Text>
+                    </Box>
+                  </Box>
+                </Box>
+                <Box
+                  display="flex"
+                  flexDirection="row"
+                  alignItems="center"
+                  gap={4}
+                >
+                  <Text mb={0}>₹ 10,000</Text>
+                  <Button bgColor="#6311CB" color="white" onClick={onModalOpen}>
+                    Proceed
+                  </Button>
+                </Box>
+              </Box>
+            </DrawerBody>
+            <DrawerFooter></DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+
+        <Modal
+          isOpen={isModalOpen}
+          onClose={onModalClose}
+          finalFocusRef={btnRef}
+          scrollBehavior={scrollBehavior}
+          h="900px"
+        >
+          <ModalOverlay />
+          <ModalContent>
+            <ModalBody>
+              <Payment />
+            </ModalBody>
+            <ModalFooter>
+              <Button variant="ghost" onClick={onModalClose}>
+                Save as draft
+              </Button>
+              <Button
+                color="#FFFFFF"
+                bgColor="#6311CB"
+                p={4}
+                _hover={{ color: "#FFFFFF", bgColor: "#6311CB" }}
+                onClick={() => {
+                  setOverlay(<OverlayOne />);
+                  onPaymentOpen();
+                }}
+              >
+                Save & proceed
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+
+        <Modal isCentered isOpen={isPaymentOpen} onClose={onPaymentClose}>
+          {overlay}
+          <ModalOverlay />
+          <ModalContent>
+            <Image src={tick} h="78px" w="78px" />
+            <ModalCloseButton />
+            <ModalBody>
+              <VStack>
+                <Text color="#101828" fontSize="large" fontWeight={600}>
+                  Your Voucher request has been submitted
+                </Text>
+                <Text color="#667085" fontSize="small" fontWeight={400}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  consectetur adipiscing elit.
+                </Text>
+              </VStack>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                w="100%"
+                bgColor="#6311CB"
+                color="#ffff"
+                boxShadow={"0px 1px 2px 0px #1018280D"}
+                _hover={{ bgColor: "#6311CB", color: "#ffff" }}
+              >
+                Done
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </Box>
+    </Box>
+  );
+};
+
+export default Employees;

src/Pages/OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx

@@ -0,0 +1,98 @@
+import React, { useRef, useEffect } from "react";
+import VanillaTilt from "vanilla-tilt";
+import temp1 from "../../../assets/temp1.png";
+import temp2 from "../../../assets/temp2.png";
+import temp3 from "../../../assets/temp3.png";
+import temp5 from "../../../assets/temp5.png";
+import temp6 from "../../../assets/temp6.png";
+import temp7 from "../../../assets/temp7.png";
+import temp8 from "../../../assets/temp8.png";
+import { Box, Grid } from "@chakra-ui/react";
+
+const cards = [
+  {
+    id: 1,
+    image: temp1,
+  },
+  {
+    id: 2,
+    image: temp2,
+  },
+  {
+    id: 3,
+    image: temp3,
+  },
+  {
+    id: 4, // Fix duplicate id
+    image: temp5,
+  },
+  {
+    id: 5, // Fix duplicate id
+    image: temp6,
+  },
+  {
+    id: 6, // Fix duplicate id
+    image: temp7,
+  },
+  {
+    id: 7, // Fix duplicate id
+    image: temp8,
+  },
+];
+
+const AllTemp = ({ selectedCard, handleCardSelect }) => {
+  const tiltRefs = useRef([]);
+
+  useEffect(() => {
+    tiltRefs.current.forEach((node) => {
+      if (node) {
+        VanillaTilt.init(node, {
+          max: 13,
+          speed: 700,
+          glare: true,
+          scale: 1.05,
+          "max-glare": 0.5,
+          onEnter: () => {
+            node.style.zIndex = 10; // Bring to top on hover
+          },
+          onLeave: () => {
+            node.style.zIndex = 1; // Reset zIndex after hover
+          },
+        });
+      }
+    });
+
+    // Cleanup VanillaTilt instances
+    return () => {
+      tiltRefs.current.forEach((node) => {
+        if (node && node.vanillaTilt) {
+          node.vanillaTilt.destroy();
+        }
+      });
+    };
+  }, [tiltRefs]);
+
+  return (
+    <Grid w="100%" templateColumns="repeat(2, 1fr)" gap={6}>
+      {cards.map((card, index) => (
+        <Box
+          ref={(el) => (tiltRefs.current[index] = el)}
+          key={card.id}
+          bgImage={`url(${card.image})`}
+          bgSize="cover"
+          bgPosition="center"
+          border="2px"
+          borderColor={selectedCard?.id === card.id ? "blue.500" : "gray.200"}
+          borderRadius="md"
+          overflow="hidden"
+          cursor="pointer"
+          onClick={() => handleCardSelect(card)}
+          height="200px"
+          w="100%"
+        />
+      ))}
+    </Grid>
+  );
+};
+
+export default AllTemp;

src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx

@@ -0,0 +1,239 @@
+import { Box, HStack, Text, VStack, Link , Grid} from "@chakra-ui/layout";
+import React, { useEffect, useRef, useState } from "react";
+import { OPACITY_ON_LOAD, SLIDE_IN_BOTTOM } from "../../../Layout/animations";
+import amazonVoucher from "../../../assets/amazonlogo.png";
+import hAndm from "../../../assets/hAndM.png";
+import bewakoof from "../../../assets/bewakoof.png";
+import myGlam from "../../../assets/myGlam.png";
+import { Image } from "@chakra-ui/image";
+import { Button } from "@chakra-ui/button";
+import VanillaTilt from "vanilla-tilt";
+import myTrip from "../../../assets/myTrip.png";
+import { useNavigate } from "react-router-dom";
+import { Radio, RadioGroup } from "@chakra-ui/react";
+import parkeAvenue from "../../../assets/parkAven.png";
+const brandData = [
+  {
+    brandLogo: amazonVoucher,
+    brandName: "Amazon",
+    brandColor: "#000000",
+    brandColor1: "#000000",
+    cardWorth: "30% cashback",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: hAndm,
+    brandName: "H&M",
+    brandColor: "#EC1515",
+    brandColor1: "#EC1515",
+    cardWorth: "30% cashback",
+    textColor: "#FFFFFF",
+    capColor: "#E6E6E6",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: myGlam,
+    brandName: "My Glam",
+    brandColor: "#EEEEEE",
+    brandColor1: "#888888",
+    cardWorth: "30% cashback",
+    textColor: "#000000",
+    capColor: "#737373",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: bewakoof,
+    brandName: "Amazon",
+    brandColor: "#FCC700",
+    brandColor1: "#E89600",
+    cardWorth: "30% cashback",
+    textColor: "#000000",
+    capColor: "#171717",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: myTrip,
+    brandName: "My Trip",
+    brandColor: "#EC1515",
+    brandColor1: "#EC1515",
+    cardWorth: "30% cashback",
+    textColor: "#FFFFFF",
+    capColor: "#E6E6E6",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: myGlam,
+    brandName: "My Glam",
+    brandColor: "#EEEEEE",
+    brandColor1: "#888888",
+    cardWorth: "30% cashback",
+    textColor: "#000000",
+    capColor: "#737373",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: bewakoof,
+    brandName: "Amazon",
+    brandColor: "#FCC700",
+    brandColor1: "#E89600",
+    cardWorth: "30% cashback",
+    textColor: "#000000",
+    capColor: "#171717",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: parkeAvenue,
+    brandName: "Park Avenue",
+    brandColor: "#000000",
+    brandColor1: "#000000",
+    cardWorth: "30% cashback",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+];
+
+const MyVoucher = ({handleSelectCard,handleProceed, selectedCard , setSelectedCard }) => {
+    const navigate = useNavigate();
+
+  return (
+    <RadioGroup onChange={handleSelectCard} value={selectedCard}>
+    <Grid
+      {...SLIDE_IN_BOTTOM}
+      mt={2}
+      gap={4}
+      w="100%"
+      h="100%"
+    //   gridTemplateColumns="repeat(auto-fit, minmax(250px, 1fr))"
+    gridTemplateColumns="repeat(4, 1fr)"
+      justifyContent="center"
+    >
+      {brandData?.map(
+        (
+          {
+            brandColor,
+            brandLogo,
+            cardWorth,
+            brandName,
+            caption,
+            dateTime,
+            brandColor1,
+            textColor,
+            capColor,
+          },
+          index
+        ) => {
+          const tiltRef = useRef(null);
+  
+          useEffect(() => {
+            const node = tiltRef.current;
+            if (node) {
+              VanillaTilt.init(node, {
+                max: 13,
+                speed: 700,
+                glare: true,
+                scale: 1.05,
+                "max-glare": 0.5,
+                onEnter: () => {
+                  node.style.zIndex = 10; // Bring to top on hover
+                },
+                onLeave: () => {
+                  node.style.zIndex = 1; // Reset zIndex after hover
+                },
+              });
+            }
+            return () => {
+              if (node && node.vanillaTilt) {
+                node.vanillaTilt.destroy();
+              }
+            };
+          }, [tiltRef]);
+  
+          return (
+            <Box
+              cursor="grab"
+              key={index}
+              ref={tiltRef}
+              overflow="hidden"
+              shadow="md"
+              w="100%"
+              h="100%"
+              bg={`linear-gradient(179.86deg, ${brandColor} 0.12%, ${brandColor1} 231.77%)`}
+              borderRadius="5px"
+              p={1}
+            >
+              <HStack
+                pb={1}
+                justifyContent="space-between"
+                pt={1}
+                ps={1}
+                pe={2}
+              >
+                <Radio value={index} />
+                {/* <Image src={optifiiLogo} /> */}
+              </HStack>
+              <VStack
+                color={brandLogo === "hAndm" ? "#E2231A" : "#fff"}
+                gap={1}
+              >
+                <Image src={brandLogo} h="43px" />
+                <Text
+                  fontWeight={600}
+                  color={`${textColor}`}
+                  as="span"
+                  fontSize="sm"
+                >
+                  30% cashback
+                </Text>
+                {/* <Text as={"span"} fontWeight={700} fontSize={"medium"}>
+                  $ {cardWorth}
+                </Text> */}
+                <Text
+                  align="center"
+                  as="span"
+                  fontWeight={600}
+                  fontSize="x-small"
+                  color={`${capColor}`}
+                >
+                  {caption}
+                </Text>
+                <Box
+                  display="flex"
+                  flexDirection="row"
+                  alignItems="center"
+                  w="100%"
+                  justifyContent="space-between"
+                >
+                  <Text color={`${textColor}`} fontSize="x-small">
+                    {brandName}
+                  </Text>
+                  <Text color={`${textColor}`} fontSize="x-small">
+                    {dateTime}
+                  </Text>
+                </Box>
+              </VStack>
+            </Box>
+          );
+        }
+      )}
+    </Grid>
+  </RadioGroup>
+  
+  );
+};
+
+export default MyVoucher;

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/Pages/Profile/Profile.jsx

@@ -0,0 +1,316 @@
+import {
+  Box,
+  Button,
+  HStack,
+  Image,
+  SimpleGrid,
+  Tag,
+  TagLabel,
+  TagLeftIcon,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import React from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import myType from "../../assets/myType.png";
+import { GoArrowSwitch } from "react-icons/go";
+import { MdEdit } from "react-icons/md";
+import { MdOutlineDelete } from "react-icons/md";
+import gift from "../../assets/gift.png";
+import { IoMdTime } from "react-icons/io";
+import bluetick from "../../assets/icons/verifytick.png";
+const employeeInfo = [
+  { label: "Phone", value: "+91 4578451245" },
+  { label: "Email", value: "poojashah@wdipl.com" },
+  { label: "Grade", value: "A01" },
+];
+const permissions = [
+  "Manage human resource",
+  "Manage subadmin",
+  "Manage reports",
+  "Manage human resource",
+  "Manage subadmin",
+  "Manage reports",
+];
+const benifit = [
+  "Lorem ipsum dolor sit amet",
+  "Lorem ipsum dolor sit amet",
+  "Lorem ipsum dolor sit amet",
+  "Lorem ipsum dolor sit amet",
+];
+const Profile = () => {
+  return (
+    <Box
+      bgColor="#F3F3F9"
+      {...OPACITY_ON_LOAD}
+      p={4}
+      w="100%"
+      overflowX="auto"
+      display="flex"
+      flexDirection="column"
+      gap={4}
+    >
+      {/* 1st Box */}
+      <HStack
+        w="100%"
+        alignItems="flex-start"
+        justifyContent="space-between"
+        gap={6}
+        flexWrap="wrap"
+        bgColor="#FFFFFF"
+        borderRadius="5px"
+        p={4}
+      >
+        <HStack alignItems="center" spacing={8}>
+          <VStack alignItems="flex-start" spacing={2}>
+            <Text fontSize="small">Employee Details</Text>
+            <HStack spacing={4} alignItems="flex-start">
+              <Image src={myType} h="79px" />
+              <VStack alignItems="flex-start" spacing={1}>
+                <Text
+                  as="span"
+                  color="#383838"
+                  fontSize="medium"
+                  fontWeight={500}
+                >
+                  Jenny Wilson
+                </Text>
+                <Text as="span" color="#696969" fontSize="small">
+                  Design - UI/UX Designer
+                </Text>
+                <Text
+                  as="span"
+                  color="#383838"
+                  fontSize="small"
+                  fontWeight={500}
+                >
+                  Employee ID : WD-0067
+                </Text>
+                <HStack alignItems="start">
+                  <Text as="span" color="#696969" fontSize="small">
+                    Member Since :
+                  </Text>
+                  <Text as="span" color="#696969" fontSize="small">
+                    1st Jan 2022
+                  </Text>
+                </HStack>
+              </VStack>
+              <Tag
+                size="lg"
+                bgColor="#00A43814"
+                border="0.5px solid #00A438"
+                borderRadius="full"
+                p={2}
+              >
+                <TagLabel color="#00A438" fontSize="small">
+                  ● Active
+                </TagLabel>
+              </Tag>
+            </HStack>
+          </VStack>
+
+          <Box h="110px" borderRight="1px dashed #BCBCBC" />
+
+          <VStack mt="2rem" alignItems="flex-start" spacing={2}>
+            {employeeInfo.map((info) => (
+              <HStack key={info.label}>
+                <Text fontSize="small" color="#696969">
+                  {info.label} :{" "}
+                </Text>
+                <Text fontSize="small" color="#0F0F0F">
+                  {info.value}
+                </Text>
+              </HStack>
+            ))}
+          </VStack>
+        </HStack>
+
+        <HStack spacing={4}>
+          <Button bgColor="#6311CB" color="#FFFFFF" gap={2} fontSize="small">
+            <GoArrowSwitch /> Switch profile
+          </Button>
+          <Tag
+            border="1px solid #6311CB"
+            variant="subtle"
+            fontSize="small"
+            colorScheme="white"
+            h="40px"
+          >
+            <TagLeftIcon boxSize="12px" as={MdEdit} />
+            <TagLabel color="#6311CB">Edit</TagLabel>
+          </Tag>
+          <Tag
+            border="1px solid #EE1B24"
+            variant="subtle"
+            fontSize="small"
+            colorScheme="white"
+            h="40px"
+          >
+            <TagLeftIcon boxSize="12px" color="#EE1B24" as={MdOutlineDelete} />
+            <TagLabel color="#EE1B24">Delete</TagLabel>
+          </Tag>
+        </HStack>
+      </HStack>
+
+      <HStack alignItems="flex-start">
+        <VStack
+          bgColor="#FFFFFF"
+          borderRadius="5px"
+          alignItems="flex-start"
+          p={4}
+        >
+          <Text color="#5F5F5F" fontSize="small" fontWeight={400}>
+            Roles & permission
+          </Text>
+          <HStack>
+            <Text color="#696969" fontWeight={400} fontSize="small">
+              Role :{" "}
+            </Text>
+            <Text color="#0F0F0F" fontWeight={600} fontSize="small">
+              Approver
+            </Text>
+          </HStack>
+
+          <HStack alignItems="flex-start">
+            <Text color="#696969" fontSize="small">
+              Permissions :{" "}
+            </Text>
+            <SimpleGrid columns={3} spacing={4}>
+              {permissions.map((permission, index) => (
+                <Button
+                  color="#6311CB"
+                  fontSize="x-small"
+                  key={index}
+                  bgColor="#EFE3FF"
+                  borderRadius="5px"
+                  variant="solid"
+                >
+                  {permission}
+                </Button>
+              ))}
+            </SimpleGrid>
+          </HStack>
+        </VStack>
+
+        <VStack
+          bgColor="#FFFFFF"
+          borderRadius="5px"
+          alignItems="flex-start"
+          p={4}
+        >
+          <Text color="#5F5F5F" fontSize="small" fontWeight={400}>
+            Company details
+          </Text>
+          <HStack>
+            <Text color="#696969" fontWeight={400} fontSize="small">
+              Company name :{" "}
+            </Text>
+            <Text color="#0F0F0F" fontWeight={600} fontSize="small">
+              Website Developers India Pvt Ltd.
+            </Text>
+          </HStack>
+          <HStack>
+            <Text color="#696969" fontWeight={400} fontSize="small">
+              Industry :{" "}
+            </Text>
+            <Text color="#0F0F0F" fontWeight={600} fontSize="small">
+              Fintech
+            </Text>
+          </HStack>
+          <HStack>
+            <Text color="#696969" fontWeight={400} fontSize="small">
+              Type :{" "}
+            </Text>
+            <Text color="#0F0F0F" fontWeight={600} fontSize="small">
+              Private Limited Company
+            </Text>
+          </HStack>
+        </VStack>
+      </HStack>
+
+      <Box bgColor="#FFFFFF" p={4}>
+        <Text fontSize="small" fontWeight={600} color="#5F5F5F">
+          Package selected
+        </Text>
+        <HStack alignItems="flex-start" w={"100%"}>
+          <HStack bgColor="#3725EA0A" w="50%" p={4}>
+            <VStack alignItems="flex-start">
+              <HStack w="100%" justifyContent="space-between">
+                <HStack>
+                  <Image src={gift} h="19px" />
+                  <Text
+                    as="span"
+                    color="#393939"
+                    fontSize="small"
+                    fontWeight={600}
+                  >
+                    OptiFii Benefit
+                  </Text>
+                </HStack>
+                <HStack alignItems="flex-start" color="#00A438">
+                  <IoMdTime style={{ height: "18.33px" }} />{" "}
+                  <Text as="span" fontSize="small">
+                    Renewal in 30 days
+                  </Text>
+                </HStack>
+              </HStack>
+              <Text as="p" color="#6F8196" fontWeight={400} fontSize="small">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
+                massa mi.
+              </Text>
+              <SimpleGrid columns={2} spacing={4}>
+                {benifit.map((benifit, index) => (
+                  <HStack alignItems="center">
+                    <Image src={bluetick} h="14px" />
+                    <Text as="span" color="#585858" fontSize="small">
+                      {benifit}
+                    </Text>
+                  </HStack>
+                ))}
+              </SimpleGrid>
+            </VStack>
+          </HStack>
+          <HStack bgColor="#3725EA0A" w="50%" p={4}>
+            <VStack alignItems="flex-start">
+              <HStack w="100%" justifyContent="space-between">
+                <HStack>
+                  <Image src={gift} h="19px" />
+                  <Text
+                    as="span"
+                    color="#393939"
+                    fontSize="small"
+                    fontWeight={600}
+                  >
+                    OptiFii Expense
+                  </Text>
+                </HStack>
+                <HStack alignItems="flex-start" color="#00A438">
+                  <IoMdTime style={{ height: "18.33px" }} />{" "}
+                  <Text as="span" fontSize="small">
+                    Renewal in 30 days
+                  </Text>
+                </HStack>
+              </HStack>
+              <Text as="p" color="#6F8196" fontWeight={400} fontSize="small">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
+                massa mi.
+              </Text>
+              <SimpleGrid columns={2} spacing={4}>
+                {benifit.map((benifit, index) => (
+                  <HStack alignItems="center">
+                    <Image src={bluetick} h="14px" />
+                    <Text as="span" color="#585858" fontSize="small">
+                      {benifit}
+                    </Text>
+                  </HStack>
+                ))}
+              </SimpleGrid>
+            </VStack>
+          </HStack>
+        </HStack>
+      </Box>
+    </Box>
+  );
+};
+
+export default Profile;

src/Pages/SupportAndTicket/SupportAndTicket.jsx

@@ -1,15 +1,246 @@
-import { Box } from "@chakra-ui/react";
+import {
-import React from "react";
+  Box,
+  Button,
+  HStack,
+  Text,
+  Image,
+  InputGroup,
+  InputLeftElement,
+  Input,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  useDisclosure,
+  Select,
+  Textarea,
+} 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 { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router-dom";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+import { GoDotFill } from "react-icons/go";
+import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import { PiIdentificationBadge } from "react-icons/pi";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+import SecondaryButton from "../../Components/Buttons/SecondaryButton";
 
 const SupportAndTicket = () => {
+
+  const navigate = useNavigate();
+  const { SupportAndTicket } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  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",
+    "Ticket ID",
+    "Subject",
+    "Status",
+    "Last update",
+    "Support",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = SupportAndTicket.map((item, index) => ({
+    "Ticket ID": (
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+      >
+        {item?.TicketID}
+      </Text>
+    ),
+    "Subject": item?.Subject,
+    "Status": (
+      <Box
+        display={"flex"}
+        alignItems={"center"}
+        justifyContent={"center"}
+        gap={1}
+        bg={
+          item?.Status === "In progress"
+            ? "#ebf8ef"
+            : item?.Status === "On hold"
+              ? "#f2f9ff"
+              : item?.Status === "Inactive"
+                ? "#ffeeed"
+                : "#f8d7da" // Default reddish background for unknown statuses
+        }
+        rounded={"full"}
+        color={
+          item?.Status === "In progress"
+            ? "#00A438"
+            : item?.Status === "On hold"
+              ? "#62B2FD"
+              : item?.Status === "Inactive"
+                ? "#FF2E23"
+                : "#721c24" // Default red text for unknown statuses
+        }
+        py={1.5}
+        px={1}
+      >
+        <GoDotFill />
+        {item?.Status}
+      </Box>
+    ),
+    "Last update": item?.LastUpdate,
+    "Support": item?.Support,
+  }));
+
   return (
-    <Box h={"100%"} p={6}>
+    <Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
       <MiniHeader
-        title={"My Requests"}
+        title={"Support & ticket"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
         backButton={true}
       />
+
+      <Box bg={"#fff"} rounded={"md"} boxShadow={"md"}>
+        <Box
+          display={"flex"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+          w={"100%"}
+          p={4}
+          pb={0}
+        >
+          <InputGroup width={300} size="sm">
+            <InputLeftElement pointerEvents="none">
+              <SearchIcon color="gray.300" />
+            </InputLeftElement>
+            <Input
+              type="search"
+              placeholder="Search"
+              rounded="md"
+              focusBorderColor="#3725EA"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </InputGroup>
+          <Box display={"flex"} alignItems={"center"}>
+            <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={PiIdentificationBadge} me={2} /> Export as PDF
+                </MenuItem>
+                <MenuItem fontSize={"sm"}>
+                  <Image src={ExcelIcon} me={2} /> Export as Excel
+                </MenuItem>
+              </MenuList>
+            </Menu>
+            <PrimaryButton
+              onClick={onOpen}
+              leftIcon={<AddIcon />}
+              title={"Add new ticket"} />
+          </Box>
+        </Box>
+        <hr />
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          showRadioButton={true}
+        />
+      </Box>
+
+      {/* modal  */}
+      <Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Add New ticket</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Box mb={4}>
+              <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                Requester
+              </Text>
+              <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+            </Box>
+            <Box mb={4}>
+              <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                Subject
+              </Text>
+              <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+            </Box>
+            <Box mb={4}>
+              <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                Type
+              </Text>
+              <Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
+                <option value='option1'>Option 1</option>
+                <option value='option2'>Option 2</option>
+                <option value='option3'>Option 3</option>
+              </Select>
+            </Box>
+            <Box mb={4}>
+              <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                Priority
+              </Text>
+              <Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
+                <option value='option1'>Option 1</option>
+                <option value='option2'>Option 2</option>
+                <option value='option3'>Option 3</option>
+              </Select>
+            </Box>
+            <Box mb={4}>
+              <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                Description
+              </Text>
+              <Textarea size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} resize={"none"} />
+            </Box>
+
+            <HStack py={4} justifyContent={"center"}>
+              <SecondaryButton title={"Cancel"}/>
+              <PrimaryButton title={"Create ticket"} />
+            </HStack>
+
+          </ModalBody>
+        </ModalContent>
+      </Modal>
     </Box>
   );
 };

src/Routes/Nav.js

@@ -138,16 +138,16 @@ export const nav = [
     path: "/support-ticket",
     Icon: MdOutlineNotifications,
   },
-  {
+  // {
-    title: "Settings",
+  //   title: "Settings",
-    type: "title",
+  //   type: "title",
-  },
+  // },
-  {
+  // {
-    title: "Settings",
+  //   title: "Settings",
-    type: "single",
+  //   type: "single",
-    path: "/settings",
+  //   path: "/settings",
-    Icon: IoSettingsOutline,
+  //   Icon: IoSettingsOutline,
-  },
+  // },
 ];
 
 // export const nestedNav = [

src/Routes/Routes.js

@@ -18,8 +18,28 @@ 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 AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
+import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
+import EmployeesPullBackFunds from "../Pages/ManageHumanResource/EmployeesPullBackFunds";
+import EmployeesView from "../Pages/ManageHumanResource/EmployeesView";
+import EmployeesViewRecentReports from "../Pages/ManageHumanResource/EmployeesViewRecentReports";
+import EmployeesViewRecentTransaction from "../Pages/ManageHumanResource/EmployeesViewRecentTransaction";
+import EmployeesViewRecentReportsView from "../Pages/ManageHumanResource/EmployeesViewRecentReportsView";
+import BrandVoucher from "../Pages/OptiFiiGifsAndVouchers/BrandVoucher";
+// import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
+// import AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
+import BuyVoucher from "../Pages/OptiFiiGifsAndVouchers/BuyVoucher";
+import BuySingleVouchers from "../Pages/OptiFiiGifsAndVouchers/BuySingleVouchers";
+import Preview from "../Pages/OptiFiiGifsAndVouchers/Preview";
+import BrandVoucherTable from "../Pages/OptiFiiGifsAndVouchers/BrandVoucherTable";
+import PaymentaVoucher from "../Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher";
+import Profile from "../Pages/Profile/Profile";
+import WalletsPullBackFunds from "../Pages/ManageHumanResource/WalletsPullBackFunds";
+import ApplyForGiftCard from "../Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard";
+import ApplyForDigitalCard from "../Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard";
 export const RouteLink = [
   { path: "/", Component: Dashbaord },
   { path: "/expenses", Component: Expenses },
@@ -30,9 +50,14 @@ 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 },
+    path: "/advance-expense-request-view",
+    Component: AdvanceExpenseRequestView,
+  },
+  // { path: "/optiFii-benefit", Component: OptiFiiTaxBenefit },
+  { path: "/optiFii-benefit", Component: OptiFiiExpenseDashboard },
   { path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },
   { path: "/reports", Component: Report },
   { path: "/support-ticket", Component: SupportAndTicket },
@@ -41,13 +66,63 @@ 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 },
+  { path: "/employees/pull-back-funds", Component: EmployeesPullBackFunds },
+  { path: "/employees/view", Component: EmployeesView },
+  {
+    path: "/employees/view/recent-reports",
+    Component: EmployeesViewRecentReports,
+  },
+  // { path: "/employees/view/recent-reports/view", Component: EmployeesViewRecentReportsView },
+  {
+    path: "/employees/view/recent-transaction",
+    Component: EmployeesViewRecentTransaction,
+  },
+  {
+    path: "/employees/view/recent-reports",
+    Component: EmployeesViewRecentReports,
+  },
+  {
+    path: "/employees/view/recent-reports/view",
+    Component: EmployeesViewRecentReportsView,
+  },
+  {
+    path: "/employees/view/recent-transaction",
+    Component: EmployeesViewRecentTransaction,
+  },
+  {
+    path: "/employees/view/wallet-pull-back-funds",
+    Component: WalletsPullBackFunds,
+  },
 
+  {
+    path: "/gift-card/digital-application-status",
+    Component: DigitalApplicationStatus,
+  },
+  { path: "/wallet-program/create-wallet", Component: CreateWallet },
+  { path: "/dashboard/apply-for-giftcards", Component: ApplyForGiftCard },
+  {
+    path: "/dashboard/apply-for-giftcards/apply-for-digitalcard",
+    Component: ApplyForDigitalCard,
+  },
   // =======================[ Gift Voucher ]==============
   { path: "/optifii-gifts-dashboard", Component: GiftDashboard },
+  { path: "/brand-voucher", Component: BrandVoucher },
+  { path: "/brand-voucher/buy-voucher", Component: BuyVoucher },
+  { path: "/brand-voucher/buy-voucher-card", Component: BuySingleVouchers },
+  { path: "/brand-voucher/buy-voucher-card/preview", Component: Preview },
+  {
+    path: "/brand-voucher/buy-voucher-card/preview/Apply-For-GiftCard",
+    Component: BrandVoucherTable,
+  },
+  { path: "/brand-voucher/voucher-payment", Component: PaymentaVoucher },
 
+  // =======================[ Gift Voucher ]==============
 
+  { path: "/profile", Component: Profile },
 ];

src/assets/BV.svg

@@ -0,0 +1,54 @@
+<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.12951 1.27613C5.9119 2.52273 5.88291 2.58071 6.34676 3.21851C7.07153 4.26218 6.92657 5.42181 5.96988 6.40749C4.98419 7.36419 4.52034 7.42217 3.27374 6.78437C2.37502 6.32052 2.37502 6.32052 1.30236 7.45116C-0.582037 9.39354 -0.553046 9.56749 2.25906 12.3506C4.72327 14.7858 4.72327 14.7858 3.79557 14.7858C2.17209 14.7858 1.85319 15.2497 1.94016 17.54C2.02713 19.4533 2.05612 19.5403 2.83887 19.7432C5.10015 20.3521 5.04217 23.715 2.7519 24.2078C1.88218 24.4108 1.88218 24.4108 1.88218 26.3531C1.88218 27.4838 2.02713 28.4405 2.23007 28.6434C2.66493 29.0783 27.8579 29.1363 28.5537 28.7014C28.8726 28.4985 28.9886 27.8897 28.9886 26.4981C28.9886 24.6137 28.9596 24.5557 28.1188 24.2658C26.3214 23.657 25.7126 21.8886 26.8142 20.497C27.1331 20.0911 27.7709 19.7143 28.2058 19.6563C28.9596 19.5693 28.9886 19.4823 29.0755 17.7719C29.1915 15.5106 28.6117 14.7858 26.7273 14.7858C25.5097 14.7858 25.3357 14.6699 20.9871 10.4952C11.884 1.82695 9.82565 0.000534058 9.07189 0.000534058C8.63703 0.000534058 7.91226 0.464386 7.12951 1.27613ZM11.1302 2.43576C12.4928 3.82731 12.6667 4.08823 12.3189 4.4941C11.797 5.1319 12.3768 5.7697 13.0146 5.24786C13.5655 4.78401 13.3335 4.63906 19.6535 10.4372L24.2341 14.6409L15.1889 14.7278C7.18749 14.7858 6.08584 14.7278 5.62199 14.322C5.12915 13.8871 5.12915 13.8001 5.56401 13.1623C5.94089 12.5825 5.94089 12.4666 5.593 12.4666C5.36107 12.4666 5.04217 12.6115 4.83924 12.8145C4.60731 13.0464 4.05649 12.7275 2.60695 11.4809C1.56328 10.5532 0.722548 9.71244 0.722548 9.62547C0.722548 9.50951 1.12842 8.98767 1.62126 8.46584C2.433 7.56713 2.51998 7.53813 3.44768 7.85703C5.41905 8.5818 7.36143 7.3352 7.59336 5.18988C7.68033 4.40713 7.59336 3.59539 7.39043 3.18952C7.10052 2.63869 7.1585 2.43576 7.85428 1.71099C8.28914 1.24714 8.86895 0.870256 9.12987 0.870256C9.3618 0.870256 10.2895 1.59503 11.1302 2.43576ZM7.97024 16.3803C7.97024 16.8442 8.14419 17.1051 8.4051 17.1051C8.66602 17.1051 8.83996 16.8442 8.83996 16.3803V15.6556L18.4939 15.7135L28.1188 15.8005L28.2058 17.308C28.2928 18.5836 28.2058 18.8445 27.8289 18.8445C27.539 18.8445 26.9012 19.2794 26.3504 19.8302C25.5966 20.584 25.3647 21.0478 25.3647 21.8886C25.3647 23.1932 26.2054 24.4398 27.3941 24.9326C28.2348 25.2805 28.2928 25.3965 28.2058 26.6431L28.1188 27.9766L18.4939 28.0636L8.86895 28.1216L8.78198 27.4838C8.63703 26.5561 7.97024 26.4691 7.97024 27.3678V28.1216H5.36107H2.7519V26.701C2.7519 25.4254 2.83887 25.2225 3.53465 24.8746C5.99887 23.657 6.02786 20.1491 3.59263 19.0765C2.83887 18.7286 2.7519 18.5546 2.7519 17.366C2.7519 16.6412 2.83887 15.9455 2.95484 15.8585C3.04181 15.7425 4.23043 15.6556 5.56401 15.6556C7.94125 15.6556 7.97024 15.6556 7.97024 16.3803Z" fill="url(#paint0_linear_469_10187)"/>
+<path d="M10.4349 6.66907C9.94202 7.1909 9.94202 7.24888 10.4059 7.42283C10.9857 7.65476 11.9134 6.872 11.6235 6.40815C11.3336 5.9443 11.0147 6.00228 10.4349 6.66907Z" fill="url(#paint1_linear_469_10187)"/>
+<path d="M8.72445 8.66947C8.02867 9.45223 8.40555 10.061 9.15931 9.39424C9.71013 8.9014 9.91307 8.11865 9.47821 8.11865C9.33325 8.11865 8.98536 8.37957 8.72445 8.66947Z" fill="url(#paint2_linear_469_10187)"/>
+<path d="M6.66576 10.7286C6.05695 11.3954 6.31787 11.8592 7.04264 11.4244C7.59347 11.0765 7.88337 10.1488 7.44851 10.1488C7.30356 10.1488 6.95567 10.4097 6.66576 10.7286Z" fill="url(#paint3_linear_469_10187)"/>
+<path d="M14.2028 17.6567C12.0864 18.5264 12.8402 22.3242 15.1015 22.3242C16.7829 22.3242 17.5657 19.4251 16.2321 18.1206C15.5073 17.3668 15.1594 17.2798 14.2028 17.6567ZM15.7393 19.6571C15.8262 20.5848 15.4204 21.4545 14.8985 21.4545C14.4637 21.4545 14.0288 20.0339 14.2317 19.2512C14.5217 18.1206 15.6233 18.4105 15.7393 19.6571Z" fill="url(#paint4_linear_469_10187)"/>
+<path d="M19.5954 17.8026C19.3925 18.0345 18.1459 20.0059 16.8123 22.1802C14.8119 25.4272 14.493 26.123 14.9859 26.036C15.3917 25.978 16.2035 24.9343 17.566 22.76C20.4071 18.2085 20.813 17.3967 20.3202 17.3967C20.1172 17.3967 19.7693 17.5707 19.5954 17.8026Z" fill="url(#paint5_linear_469_10187)"/>
+<path d="M7.96973 19.1345C7.96973 19.7433 8.08569 20.0043 8.34661 19.9173C8.52055 19.8593 8.6945 19.5114 8.6945 19.1345C8.6945 18.7577 8.52055 18.4098 8.34661 18.3228C8.08569 18.2648 7.96973 18.5257 7.96973 19.1345Z" fill="url(#paint6_linear_469_10187)"/>
+<path d="M7.96973 22.033C7.96973 22.6418 8.08569 22.9027 8.34661 22.8157C8.52055 22.7577 8.6945 22.4099 8.6945 22.033C8.6945 21.6561 8.52055 21.3082 8.34661 21.2212C8.08569 21.1632 7.96973 21.4242 7.96973 22.033Z" fill="url(#paint7_linear_469_10187)"/>
+<path d="M18.755 22.1217C18.0013 22.9334 17.9143 24.4989 18.5811 25.4556C19.0159 26.0934 20.4945 26.3254 21.1902 25.8615C21.828 25.4556 22.2339 24.267 22.06 23.3973C21.6831 21.4839 19.9726 20.8171 18.755 22.1217ZM20.7264 23.2233C21.0163 24.441 20.7264 25.2527 20.0306 25.1657C19.5668 25.1077 19.3928 24.8468 19.3348 24.1221C19.1609 22.4696 20.3785 21.7158 20.7264 23.2233Z" fill="url(#paint8_linear_469_10187)"/>
+<path d="M7.96973 24.9613C7.96973 26.063 8.66551 25.976 8.78147 24.8454C8.83945 24.2945 8.75248 24.0626 8.43358 24.0626C8.11468 24.0626 7.96973 24.3525 7.96973 24.9613Z" fill="url(#paint9_linear_469_10187)"/>
+<defs>
+<linearGradient id="paint0_linear_469_10187" x1="14.5448" y1="0.000534058" x2="14.5448" y2="29" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint1_linear_469_10187" x1="10.8699" y1="6.10616" x2="10.8699" y2="7.46484" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint2_linear_469_10187" x1="9.03554" y1="8.11865" x2="9.03554" y2="9.67969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint3_linear_469_10187" x1="6.99257" y1="10.1488" x2="6.99257" y2="11.5938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint4_linear_469_10187" x1="14.93" y1="17.4391" x2="14.93" y2="22.3242" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint5_linear_469_10187" x1="17.6401" y1="17.3967" x2="17.6401" y2="26.043" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint6_linear_469_10187" x1="8.33211" y1="18.3149" x2="8.33211" y2="19.9336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint7_linear_469_10187" x1="8.33211" y1="21.2133" x2="8.33211" y2="22.832" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint8_linear_469_10187" x1="20.1156" y1="21.4452" x2="20.1156" y2="26.1055" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint9_linear_469_10187" x1="8.38397" y1="24.0626" x2="8.38397" y2="25.7422" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/GC.svg

@@ -0,0 +1,34 @@
+<svg width="31" height="22" viewBox="0 0 31 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.44144 0.0727863C1.22221 0.391182 0.282558 1.38132 0.0573511 2.59277C-0.000892053 2.89175 -0.00477493 3.72657 0.00299082 10.7662L0.0146395 18.6096L0.103946 18.9009C0.259261 19.3979 0.515531 19.8405 0.86499 20.2094C1.34647 20.718 1.793 20.9898 2.44144 21.1607L2.77148 21.25H15.5073H28.2432L28.5577 21.1646C29.7419 20.8501 30.6234 19.9531 30.934 18.7572C30.9961 18.5087 31 17.9845 31 10.6109C31 3.05872 30.9961 2.71703 30.9262 2.45687C30.8292 2.08412 30.5651 1.53663 30.3399 1.23765C29.9516 0.728992 29.2838 0.274696 28.6314 0.0805511C28.4101 0.0145435 27.7656 0.0106602 15.5656 0.00289345C2.9268 -0.00487137 2.72877 -0.00487137 2.44144 0.0727863ZM9.70242 2.45687V3.63727L9.97034 3.79646C10.1218 3.88189 10.2654 3.95955 10.2926 3.9712C10.3198 3.98284 10.4868 3.90907 10.6654 3.812L10.9838 3.6295V2.45299V1.27259H19.5183C28.8644 1.27259 28.2587 1.25706 28.7052 1.4978C28.9654 1.6337 29.3537 2.02199 29.4779 2.26273C29.707 2.72091 29.6992 2.56948 29.6992 6.26986V9.65961H23.3585H17.0178L16.7887 10.0285C16.6605 10.2343 16.447 10.5216 16.3111 10.6692L16.0626 10.941H22.8809H29.6992V14.6685C29.6992 18.3184 29.6992 18.4039 29.6216 18.6329C29.4236 19.2193 28.977 19.6619 28.3791 19.8793L28.1267 19.9687H19.5649H11.0032L10.9915 16.8429L10.9838 13.7133L10.6537 13.3872L10.3237 13.0571L10.013 13.3678L9.70242 13.6745L9.69465 16.8235L9.683 19.9687H6.3049H2.9268L2.65111 19.8832C2.14246 19.7201 1.72699 19.3707 1.48237 18.8892C1.28046 18.4854 1.27657 18.4699 1.27657 14.5598V10.941H2.9268H4.5809L4.3091 10.6226C4.16155 10.4478 3.95576 10.1605 3.85092 9.98577L3.66454 9.66349L2.46862 9.65961H1.27269L1.28434 6.23103C1.29599 2.82186 1.29599 2.80633 1.38141 2.58501C1.62215 1.94822 2.10363 1.4978 2.72489 1.33084C2.89185 1.28813 3.52864 1.27648 6.31655 1.27648L9.70242 1.27259V2.45687Z" fill="url(#paint0_linear_469_10160)"/>
+<path d="M7.25581 4.5218C5.9201 4.74701 4.84843 5.7682 4.57663 7.07673C4.45626 7.64752 4.54556 8.4668 4.79018 9.01817C5.14353 9.81028 5.91234 10.5092 6.71997 10.7655C7.16262 10.9053 7.43831 10.9402 8.14887 10.9402L8.78955 10.9441L7.3956 12.3225L6.00164 13.7048L6.44429 14.1475C6.68503 14.3921 6.90247 14.5901 6.918 14.5901C6.93742 14.5901 7.71399 13.8368 8.642 12.9205L10.3272 11.2508L12.0434 12.9438L13.7596 14.6328L14.1945 14.1746C14.4353 13.9222 14.6333 13.7048 14.6333 13.6932C14.6333 13.6776 14.012 13.0564 13.251 12.3147L11.8687 10.9596L12.6375 10.9363C13.5267 10.913 13.7596 10.8664 14.3032 10.614C16.0195 9.8064 16.6679 7.63975 15.67 6.04C15.1808 5.25566 14.3731 4.70041 13.4878 4.53733C12.4744 4.35095 11.395 4.70041 10.6261 5.46922L10.3233 5.7682L10.0631 5.4964C9.42634 4.8402 8.59929 4.48685 7.71399 4.4985C7.51596 4.50239 7.31017 4.51403 7.25581 4.5218ZM8.39349 5.89246C8.90603 6.0866 9.3681 6.52536 9.54283 6.99519C9.67484 7.35242 9.70591 7.68246 9.69426 8.68813L9.68261 9.63943L8.6653 9.65108C7.8926 9.65885 7.58197 9.6472 7.37618 9.60449C6.45594 9.41034 5.81915 8.63765 5.81915 7.71352C5.81915 6.83211 6.42876 6.05165 7.27911 5.83421C7.58974 5.75655 8.0984 5.78373 8.39349 5.89246ZM13.2782 5.8148C14.2799 6.00506 14.9827 6.99519 14.8274 7.99697C14.7459 8.54446 14.3731 9.09971 13.9227 9.36375C13.4917 9.61613 13.3985 9.63167 12.1405 9.65108L10.9834 9.66661V8.56387C10.9834 7.34465 11.0028 7.18934 11.2241 6.77775C11.294 6.64962 11.4493 6.45159 11.5891 6.32345C12.0667 5.87692 12.6569 5.69831 13.2782 5.8148Z" fill="url(#paint1_linear_469_10160)"/>
+<path d="M19.705 16.1893C19.5303 16.2903 19.3711 16.5543 19.3711 16.7368C19.3711 16.9426 19.5148 17.1833 19.705 17.2921C19.8487 17.3775 19.9147 17.393 20.0739 17.3775C20.6796 17.3192 20.8699 16.5737 20.3729 16.2087C20.2098 16.0884 19.8953 16.0806 19.705 16.1893Z" fill="url(#paint2_linear_469_10160)"/>
+<path d="M21.6426 16.1912C21.0562 16.529 21.3475 17.4415 22.0231 17.3755C22.621 17.3211 22.8074 16.5756 22.3143 16.2106C22.1512 16.0903 21.8367 16.0825 21.6426 16.1912Z" fill="url(#paint3_linear_469_10160)"/>
+<path d="M23.584 16.1911C23.4092 16.2921 23.2539 16.5522 23.2539 16.7464C23.2539 16.9405 23.4092 17.2007 23.584 17.3016C23.7043 17.3715 23.782 17.387 23.9451 17.3754C24.2984 17.3521 24.5353 17.0958 24.5353 16.7464C24.5353 16.3969 24.2984 16.1406 23.9451 16.1173C23.782 16.1057 23.7043 16.1212 23.584 16.1911Z" fill="url(#paint4_linear_469_10160)"/>
+<path d="M25.6224 16.1329C25.3778 16.2299 25.1953 16.5017 25.1953 16.7658C25.1953 16.956 25.3429 17.1929 25.5254 17.3016C25.6457 17.3715 25.7234 17.387 25.8826 17.3754C26.4922 17.3327 26.6941 16.5794 26.1932 16.2066C26.0923 16.129 25.7389 16.0824 25.6224 16.1329Z" fill="url(#paint5_linear_469_10160)"/>
+<defs>
+<linearGradient id="paint0_linear_469_10160" x1="15.5" y1="-0.000389099" x2="15.5" y2="21.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint1_linear_469_10160" x1="10.3323" y1="4.48808" x2="10.3323" y2="14.6328" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint2_linear_469_10160" x1="20.014" y1="16.1128" x2="20.014" y2="17.3828" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint3_linear_469_10160" x1="21.9621" y1="16.1147" x2="21.9621" y2="17.3789" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint4_linear_469_10160" x1="23.8946" y1="16.1138" x2="23.8946" y2="17.3789" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint5_linear_469_10160" x1="25.8357" y1="16.1118" x2="25.8357" y2="17.3789" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/GPR.svg

@@ -0,0 +1,29 @@
+<svg width="29" height="20" viewBox="0 0 29 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.2216 2.79883C28.2216 2.05654 27.9267 1.34464 27.4018 0.81976C26.8769 0.294876 26.165 0 25.4227 0H2.79883C2.05654 0 1.34464 0.294876 0.819759 0.81976C0.294876 1.34464 0 2.05654 0 2.79883V17.2012C0 17.9435 0.294876 18.6554 0.819759 19.1802C1.34464 19.7051 2.05654 20 2.79883 20H25.4227C26.165 20 26.8769 19.7051 27.4018 19.1802C27.9267 18.6554 28.2216 17.9435 28.2216 17.2012V2.79883ZM27.2886 8.97959H0.932945V6.18076H27.2886V8.97959ZM25.4227 19.0671H2.79883C1.76997 19.0671 0.932945 18.2009 0.932945 17.172V9.91254H27.2886V17.172C27.2886 18.2009 26.4516 19.0671 25.4227 19.0671ZM2.79883 0.932945H25.4227C26.4516 0.932945 27.2886 1.74082 27.2886 2.76968V5.24781H0.932945V2.76968C0.932945 1.74082 1.76997 0.932945 2.79883 0.932945Z" fill="url(#paint0_linear_469_10208)"/>
+<path d="M11.7782 12.8883C11.7782 12.7646 11.7291 12.646 11.6416 12.5585C11.5541 12.471 11.4355 12.4219 11.3117 12.4219H4.02311C3.8994 12.4219 3.78075 12.471 3.69327 12.5585C3.60579 12.646 3.55664 12.7646 3.55664 12.8883V15.3956C3.55664 15.5194 3.60579 15.638 3.69327 15.7255C3.78075 15.813 3.8994 15.8621 4.02311 15.8621H11.3117C11.4355 15.8621 11.5541 15.813 11.6416 15.7255C11.7291 15.638 11.7782 15.5194 11.7782 15.3956V12.8883ZM10.8453 14.9292H4.48959V13.3548H10.8453V14.9292Z" fill="url(#paint1_linear_469_10208)"/>
+<path d="M19.4753 12.5938C19.3515 12.5938 19.2329 12.6429 19.1454 12.7304C19.0579 12.8179 19.0088 12.9365 19.0088 13.0602V15.2177C19.0088 15.3414 19.0579 15.46 19.1454 15.5475C19.2329 15.635 19.3515 15.6841 19.4753 15.6841C19.599 15.6841 19.7176 15.635 19.8051 15.5475C19.8926 15.46 19.9417 15.3414 19.9417 15.2177V13.0602C19.9417 12.9365 19.8926 12.8179 19.8051 12.7304C19.7176 12.6429 19.599 12.5938 19.4753 12.5938Z" fill="url(#paint2_linear_469_10208)"/>
+<path d="M21.8073 12.5938C21.6836 12.5938 21.5649 12.6429 21.4774 12.7304C21.39 12.8179 21.3408 12.9365 21.3408 13.0602V15.2177C21.3408 15.3414 21.39 15.46 21.4774 15.5475C21.5649 15.635 21.6836 15.6841 21.8073 15.6841C21.931 15.6841 22.0497 15.635 22.1371 15.5475C22.2246 15.46 22.2738 15.3414 22.2738 15.2177V13.0602C22.2738 12.9365 22.2246 12.8179 22.1371 12.7304C22.0497 12.6429 21.931 12.5938 21.8073 12.5938Z" fill="url(#paint3_linear_469_10208)"/>
+<path d="M24.1403 12.5938C24.0166 12.5938 23.8979 12.6429 23.8105 12.7304C23.723 12.8179 23.6738 12.9365 23.6738 13.0602V15.2177C23.6738 15.3414 23.723 15.46 23.8105 15.5475C23.8979 15.635 24.0166 15.6841 24.1403 15.6841C24.264 15.6841 24.3827 15.635 24.4701 15.5475C24.5576 15.46 24.6068 15.3414 24.6068 15.2177V13.0602C24.6068 12.9365 24.5576 12.8179 24.4701 12.7304C24.3827 12.6429 24.264 12.5938 24.1403 12.5938Z" fill="url(#paint4_linear_469_10208)"/>
+<defs>
+<linearGradient id="paint0_linear_469_10208" x1="14.1108" y1="20" x2="14.1108" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint1_linear_469_10208" x1="7.66743" y1="15.8621" x2="7.66743" y2="12.4219" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint2_linear_469_10208" x1="19.4753" y1="15.6841" x2="19.4753" y2="12.5938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint3_linear_469_10208" x1="21.8073" y1="15.6841" x2="21.8073" y2="12.5938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+<linearGradient id="paint4_linear_469_10208" x1="24.1403" y1="15.6841" x2="24.1403" y2="12.5938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6311CB"/>
+<stop offset="1" stop-color="#3725EA"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/Platinum.svg

@@ -0,0 +1,3 @@
+<svg width="51" height="8" viewBox="0 0 51 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.614031 7.56738L1.78733 0.500004H4.30646C4.854 0.500004 5.29111 0.600079 5.61779 0.800229C5.94677 1.00038 6.17223 1.273 6.29416 1.61809C6.41839 1.96317 6.44485 2.35312 6.37353 2.78793C6.29991 3.22274 6.14347 3.61384 5.90421 3.96123C5.66725 4.30631 5.35092 4.58008 4.95522 4.78253C4.55952 4.98268 4.08906 5.08276 3.54382 5.08276H1.80803L1.95642 4.17863H3.59213C3.93952 4.17863 4.23169 4.11881 4.46865 3.99918C4.70791 3.87725 4.89541 3.71161 5.03114 3.50226C5.16688 3.29061 5.25545 3.0525 5.29686 2.78793C5.34057 2.51876 5.32907 2.2818 5.26235 2.07705C5.19563 1.87 5.06335 1.70781 4.8655 1.59048C4.66995 1.47315 4.39618 1.41448 4.04419 1.41448H2.70526L1.68035 7.56738H0.614031ZM6.81093 7.56738L7.98422 0.500004H9.05054L8.02908 6.64945H11.2315L11.0797 7.56738H6.81093ZM13.2537 7.56738H12.1218L15.8384 0.500004H17.0704L18.4404 7.56738H17.3085L16.2767 1.78373H16.2214L13.2537 7.56738ZM13.9025 4.79979H17.5742L17.4223 5.69701H13.7506L13.9025 4.79979ZM19.2988 1.41794L19.4506 0.500004H24.9202L24.7684 1.41794H22.5633L21.5418 7.56738H20.479L21.5004 1.41794H19.2988ZM27.1952 0.500004L26.0219 7.56738H24.9556L26.1289 0.500004H27.1952ZM34.4524 0.500004L33.2791 7.56738H32.299L29.5694 2.38418H29.5073L28.6411 7.56738H27.5748L28.7481 0.500004H29.735L32.4681 5.69011H32.5337L33.3964 0.500004H34.4524ZM40.5527 0.500004H41.6224L40.8529 5.14832C40.7724 5.64295 40.5837 6.08121 40.2869 6.4631C39.9902 6.8427 39.6129 7.14178 39.1551 7.36033C38.6972 7.57659 38.1865 7.68471 37.6229 7.68471C37.0569 7.68471 36.5819 7.57659 36.1977 7.36033C35.8135 7.14178 35.5362 6.8427 35.366 6.4631C35.1981 6.08121 35.1555 5.64295 35.2383 5.14832L36.0079 0.500004H37.0742L36.3184 5.06205C36.2678 5.38183 36.292 5.66595 36.3909 5.91442C36.4921 6.16288 36.6601 6.35843 36.8947 6.50106C37.1317 6.6414 37.4296 6.71157 37.7885 6.71157C38.1474 6.71157 38.4683 6.6414 38.7513 6.50106C39.0366 6.35843 39.2689 6.16288 39.4484 5.91442C39.6301 5.66595 39.7463 5.38183 39.7969 5.06205L40.5527 0.500004ZM43.1727 0.500004H44.4668L45.8126 5.99379H45.8955L49.0496 0.500004H50.3436L49.1703 7.56738H48.1558L49.0081 2.4532H48.9426L46.0093 7.55703H45.1639L43.9354 2.44974H43.8698L43.014 7.56738H41.9994L43.1727 0.500004Z" fill="white"/>
+</svg>

src/assets/gift.svg

@@ -0,0 +1,37 @@
+<svg width="91" height="111" viewBox="0 0 91 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.1797 60.4707L38.4199 62.0521L38.9526 61.3784C38.9526 61.3784 38.982 61.3439 39.033 61.2813C39.0585 61.2512 39.0878 61.2143 39.1244 61.1701C40.5107 59.5145 49.7719 48.8781 55.6143 53.6663C60.1427 57.3799 48.3418 61.3808 41.2661 63.3558C41.2295 63.365 41.1896 63.3766 41.1492 63.3883L41.5072 63.562C41.5105 63.562 41.5144 63.562 41.5178 63.562C41.551 63.5572 41.5837 63.5528 41.614 63.5455C42.9497 63.3029 56.7504 60.6469 60.352 55.236L60.3631 55.2176C60.5101 55.0002 60.6406 54.7719 60.7533 54.5346C63.702 48.3598 54.0356 44.3472 48.8066 45.3495C43.5777 46.3518 35.1797 60.4707 35.1797 60.4707Z" fill="#E2231A"/>
+<path d="M55.614 54.0688C60.1424 57.6304 48.3415 61.4668 41.2658 63.3607L41.5063 63.5587C41.5097 63.5587 41.5136 63.5587 41.5169 63.5587C41.5501 63.5543 41.5829 63.55 41.6132 63.5432C54.8119 61.5182 59.0159 57.6925 60.3512 55.5744L60.3623 55.5569C60.3806 55.5278 60.3988 55.5011 60.4133 55.4749C60.9204 54.6308 60.8512 53.7008 60.2526 52.8815C59.2455 51.4982 57.1037 49.4466 53.4256 49.7951C48.3896 50.2703 40.3616 59.7597 39.125 61.2673C40.5098 59.6767 49.7715 49.4776 55.614 54.0688Z" fill="#9D162E"/>
+<path d="M25.7489 45.9017C20.5199 44.8906 10.8536 48.9372 13.8017 55.164C13.9148 55.4031 14.0454 55.6333 14.1925 55.8527C14.1958 55.86 14.1997 55.8644 14.2035 55.8716C17.8051 61.3262 31.6082 64.0035 32.9411 64.2511C32.9704 64.2583 33.0031 64.2627 33.0373 64.2676C33.0412 64.2676 33.045 64.27 33.0484 64.27L33.4059 64.0948C33.3659 64.0831 33.326 64.0715 33.2894 64.0618C26.2137 62.0718 14.4128 58.0359 18.9412 54.2908C24.7832 49.4623 34.0449 60.1885 35.4312 61.8582C35.4677 61.9024 35.4971 61.9397 35.5226 61.9698C35.5736 62.0354 35.6029 62.0703 35.6029 62.0703L36.1356 62.7498L39.3759 61.1554C39.3759 61.1554 30.9827 46.9107 25.7489 45.9017Z" fill="#E2231A"/>
+<path d="M18.9389 54.2921C14.4105 58.0372 26.2114 62.0716 33.2871 64.0631L33.0465 64.2713C33.0432 64.2713 33.0393 64.2689 33.0355 64.2689C33.0027 64.264 32.97 64.2597 32.9392 64.2524C19.7405 62.1231 15.5369 58.1003 14.2017 55.873C14.1978 55.8657 14.194 55.8613 14.1906 55.854C14.1723 55.8239 14.154 55.7958 14.1396 55.7676C13.6324 54.8804 13.7017 53.9024 14.2998 53.0408C15.3069 51.5847 17.4491 49.4287 21.1273 49.7952C26.1633 50.2951 34.1908 60.2738 35.4279 61.8595C34.0426 60.1898 24.7809 49.4637 18.9389 54.2921Z" fill="#9D162E"/>
+<path d="M60.3695 62.7422L59.6208 72.4908L13.3488 73.2524L12.002 65.0268L27.9694 64.2711L47.4253 63.3542L60.3695 62.7422Z" fill="#FFCE00"/>
+<path d="M60.2579 62.7422L59.4688 72.4908L70.0441 76.6034L72.2536 69.6728L60.2579 62.7422Z" fill="#FFCE00"/>
+<path d="M14.1172 74.1648L18.647 110.265H56.852L59.1174 72.5039L14.1172 74.1648Z" fill="#FFCE00"/>
+<path d="M66.8379 104.86L70.1403 76.6019L59.117 72.5039L56.8516 110.265L66.8379 104.86Z" fill="#FFCE00"/>
+<path d="M69.8903 76.6017L60.0243 73.2507L13.8668 74.1647L13.1113 73.2507L59.7726 72.2354L69.8903 76.6017Z" fill="#FFB819"/>
+<path d="M32.3477 64.0653L33.3423 73.78V110.266H42.2041V73.6047L41.4992 63.6328L32.3477 64.0653Z" fill="#E2231A"/>
+<path d="M65.8629 65.9795L64.0869 74.0988L62.3652 107.283L65.8629 105.39L67.7693 75.6879L69.3553 67.9972L65.8629 65.9795Z" fill="#E2231A"/>
+<path d="M47.4262 63.8123L27.9703 64.271C27.9313 64.1694 27.9109 64.0615 27.9102 63.9526C27.9102 62.3509 32.2802 61.0583 37.6742 61.0583C42.9109 61.0583 47.1813 62.2786 47.4262 63.8123Z" fill="#E2231A"/>
+<path d="M15.6852 39.1119L-5.80039 28.4148L-6.83203 21.209L0.215299 21.9997L15.6852 39.1119Z" fill="#FFB819"/>
+<path d="M24.2795 26.7811L14.998 10.2101L17.0604 5.87573L24.2795 26.7811Z" fill="#FFB819"/>
+<path d="M36.4848 29.4558L39.5788 32.4034L35.2819 0.673828L29.4375 2.23429L36.4848 29.4558Z" fill="#FFB819"/>
+<path d="M48.1738 25.8152V14.3721H51.096L48.1738 25.8152Z" fill="#FFB819"/>
+<path d="M69.4857 8.12988L56.0781 30.1613V31.5368L71.7202 10.0369L69.4857 8.12988Z" fill="#FFB819"/>
+<path d="M63.9004 33.6176L74.9872 24.363L75.6748 27.4194L63.9004 33.6176Z" fill="#FFB819"/>
+<path d="M85.9877 31.5369L66.5645 40.0323L84.0971 37.952L90.1133 34.6573L85.9877 31.5369Z" fill="#FFB819"/>
+<path d="M1.23619 47.2689C-0.191949 47.2689 -1.35352 46.206 -1.35352 44.8994C-1.35352 43.5927 -0.191949 42.5293 1.23619 42.5293C2.66432 42.5293 3.82636 43.5923 3.82636 44.8994C3.82636 46.2065 2.66432 47.2689 1.23619 47.2689ZM1.23619 42.7492C-0.059144 42.7492 -1.11341 43.7136 -1.11341 44.8994C-1.11341 46.0851 -0.059144 47.0491 1.23619 47.0491C2.53152 47.0491 3.58578 46.0846 3.58578 44.8994C3.58578 43.7141 2.53152 42.7492 1.23619 42.7492Z" fill="#FF9E16"/>
+<path d="M10.2563 83.6581C9.5422 83.6581 8.96094 83.1267 8.96094 82.4734C8.96094 81.8201 9.5422 81.2881 10.2563 81.2881C10.9703 81.2881 11.5511 81.822 11.5511 82.4734C11.5511 83.1247 10.9703 83.6581 10.2563 83.6581ZM10.2563 81.3983C9.60812 81.3983 9.08123 81.8807 9.08123 82.4734C9.08123 83.066 9.60812 83.548 10.2563 83.548C10.9044 83.548 11.4308 83.066 11.4308 82.4734C11.4308 81.8807 10.9039 81.3983 10.2563 81.3983Z" fill="#605B55"/>
+<path d="M72.539 86.0283C71.8249 86.0283 71.2441 85.4944 71.2441 84.8435C71.2441 84.1926 71.8249 83.6582 72.539 83.6582C73.2531 83.6582 73.8343 84.1921 73.8343 84.8435C73.8343 85.4948 73.2531 86.0283 72.539 86.0283ZM72.539 83.7684C71.8913 83.7684 71.3644 84.2504 71.3644 84.8435C71.3644 85.4366 71.8937 85.9181 72.539 85.9181C73.1842 85.9181 73.714 85.4361 73.714 84.8435C73.714 84.2508 73.1867 83.7684 72.539 83.7684Z" fill="#FF9E16"/>
+<path d="M75.1297 59.203C74.6174 59.2031 74.1165 59.05 73.6905 58.7629C73.2645 58.4759 72.9324 58.0678 72.7363 57.5904C72.5402 57.1129 72.4889 56.5876 72.5888 56.0807C72.6887 55.5738 72.9354 55.1082 73.2977 54.7428C73.66 54.3774 74.1216 54.1285 74.624 54.0277C75.1265 53.9269 75.6474 53.9787 76.1207 54.1765C76.594 54.3743 76.9985 54.7093 77.2831 55.139C77.5677 55.5688 77.7195 56.074 77.7194 56.5908C77.7187 57.2834 77.4456 57.9473 76.9601 58.4371C76.4746 58.9268 75.8163 59.2023 75.1297 59.203ZM75.1297 54.2207C74.665 54.2207 74.2108 54.3597 73.8244 54.6201C73.438 54.8806 73.1368 55.2507 72.959 55.6838C72.7812 56.1169 72.7346 56.5934 72.8253 57.0531C72.9159 57.5129 73.1397 57.9352 73.4683 58.2667C73.7969 58.5981 74.2156 58.8238 74.6713 58.9153C75.1271 59.0067 75.5995 58.9598 76.0289 58.7804C76.4582 58.601 76.8252 58.2973 77.0833 57.9075C77.3415 57.5177 77.4793 57.0595 77.4793 56.5908C77.4786 55.9624 77.2308 55.36 76.7903 54.9157C76.3498 54.4714 75.7526 54.2215 75.1297 54.2207Z" fill="#E2231A"/>
+<path d="M33.4237 46.4868C33.7599 46.1477 33.7599 45.5979 33.4237 45.2588C33.0876 44.9197 32.5425 44.9197 32.2064 45.2588C31.8702 45.5979 31.8702 46.1477 32.2064 46.4868C32.5425 46.8259 33.0876 46.8259 33.4237 46.4868Z" fill="#605B55"/>
+<path d="M8.32648 100.601C8.43569 100.134 8.14912 99.6663 7.68641 99.5561C7.2237 99.446 6.76007 99.735 6.65087 100.202C6.54166 100.669 6.82822 101.136 7.29093 101.246C7.75364 101.356 8.21727 101.067 8.32648 100.601Z" fill="#FF9E16"/>
+<path d="M76.3632 72.4292C76.6994 72.0901 76.6994 71.5403 76.3632 71.2012C76.027 70.8621 75.482 70.8621 75.1458 71.2012C74.8096 71.5403 74.8096 72.0901 75.1458 72.4292C75.482 72.7683 76.027 72.7683 76.3632 72.4292Z" fill="#FF9E16"/>
+<path d="M14.3515 25.932C14.5651 25.0192 14.0046 24.1045 13.0996 23.889C12.1946 23.6736 11.2878 24.2389 11.0742 25.1518C10.8607 26.0647 11.4211 26.9793 12.3261 27.1948C13.2311 27.4103 14.1379 26.8449 14.3515 25.932Z" fill="#E2231A"/>
+<path d="M60.9736 35.5023C61.5242 35.5023 61.9706 35.0521 61.9706 34.4967C61.9706 33.9412 61.5242 33.491 60.9736 33.491C60.4229 33.491 59.9766 33.9412 59.9766 34.4967C59.9766 35.0521 60.4229 35.5023 60.9736 35.5023Z" fill="#FF9E16"/>
+<path d="M47.8469 33.6261L47.549 33.3262L46.2984 34.5876L45.0474 33.3262L44.75 33.6261L46.0006 34.8881L44.75 36.1496L45.0474 36.45L46.2984 35.1881L47.549 36.45L47.8469 36.1496L46.5958 34.8881L47.8469 33.6261Z" fill="#FFCE00"/>
+<path d="M75.7545 95.7942L75.6347 95.6729L75.1294 96.1825L74.6242 95.6729L74.5039 95.7942L75.0091 96.3038L74.5039 96.8135L74.6242 96.9348L75.1294 96.4252L75.6347 96.9348L75.7545 96.8135L75.2497 96.3038L75.7545 95.7942Z" fill="#FF9E16"/>
+<path d="M11.8062 60.0054L11.6571 59.8555L11.032 60.486L10.4065 59.8555L10.2578 60.0054L10.8829 60.6364L10.2578 61.2674L10.4065 61.4174L11.032 60.7864L11.6571 61.4174L11.8062 61.2674L11.1807 60.6364L11.8062 60.0054Z" fill="#FF9E16"/>
+<path d="M60.7516 57.7847L60.6029 57.6348L59.9773 58.2653L59.3518 57.6348L59.2031 57.7847L59.8287 58.4157L59.2031 59.0462L59.3518 59.1967L59.9773 58.5657L60.6029 59.1967L60.7516 59.0462L60.126 58.4157L60.7516 57.7847Z" fill="#FF9E16"/>
+<path d="M23.3219 32.9864L23.1732 32.8359L22.5477 33.4669L21.9221 32.8359L21.7734 32.9864L22.399 33.6169L21.7734 34.2479L21.9221 34.3979L22.5477 33.7669L23.1732 34.3979L23.3219 34.2479L22.6963 33.6169L23.3219 32.9864Z" fill="#FF9E16"/>
+<path d="M66.2418 44.0118L66.0926 43.8613L65.4676 44.4923L64.842 43.8613L64.6934 44.0118L65.3184 44.6423L64.6934 45.2733L64.842 45.4232L65.4676 44.7928L66.0926 45.4232L66.2418 45.2733L65.6163 44.6423L66.2418 44.0118Z" fill="#605B55"/>
+<path opacity="0.15" d="M29.8105 104.428C29.8105 104.428 48.4803 88.3349 53.0346 81.6271C55.3659 78.1936 59.0137 65.8525 59.0137 65.8525L68.7508 71.478L66.829 77.1039L65.2281 99.3256L56.2489 104.428H29.8105Z" fill="#F19A00"/>
+</svg>

src/assets/logo_card copy.svg

@@ -0,0 +1,13 @@
+<svg width="81" height="33" viewBox="0 0 81 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.9669 10.7619C31.5777 10.9704 30.5078 11.4171 29.5974 12.1617C28.628 12.954 27.9895 14.1036 27.7886 15.432C27.7472 15.694 27.7354 16.2004 27.7531 16.6531C27.8004 17.8861 28.0841 18.6962 28.7994 19.6493C29.7807 20.9598 31.3885 21.752 33.422 21.9307C35.6802 22.1213 37.7787 21.4303 39.0378 20.0841C40.0013 19.0596 40.3737 18.1065 40.4269 16.5637C40.4506 15.8906 40.4387 15.5868 40.356 15.1937C39.9895 13.3709 38.7245 11.9056 36.9156 11.2146C36.023 10.8691 35.4496 10.7738 34.2378 10.7559C33.6348 10.744 33.0674 10.75 32.9669 10.7619ZM35.6151 12.5668C37.1225 12.9659 38.1984 14.0679 38.4407 15.4558C38.5412 16.0455 38.4821 17.213 38.3225 17.6538C37.9796 18.6247 37.359 19.3336 36.4723 19.7684C35.7215 20.1318 35.2191 20.2271 34.0605 20.2211C33.1738 20.2152 33.0378 20.2033 32.5531 20.0544C31.093 19.6076 30.1708 18.6903 29.8339 17.3679C29.7275 16.9569 29.7156 15.9144 29.8102 15.3962C29.8398 15.2056 29.9876 14.8005 30.1294 14.5027C30.3422 14.0619 30.4664 13.8951 30.8329 13.5437C31.4654 12.9301 32.0861 12.6502 33.2329 12.4298C33.3156 12.4179 33.7826 12.4119 34.2674 12.4238C34.9294 12.4357 35.2723 12.4715 35.6151 12.5668Z" fill="white"/>
+<path d="M61.3891 11.0891C61.058 11.2559 60.8984 11.518 60.8984 11.9112C60.8984 12.2686 60.9989 12.4949 61.2531 12.7094C61.7674 13.1501 62.7191 13.0489 63.0679 12.5187C63.2511 12.2507 63.2511 11.8099 63.0738 11.4942C62.8019 11.0117 61.9566 10.8032 61.3891 11.0891Z" fill="white"/>
+<path d="M75.2916 11.3449C75.0434 11.4521 74.801 11.7559 74.7537 12.0061C74.6887 12.3695 74.7774 12.6375 75.0552 12.9115C75.6286 13.4596 76.6158 13.3762 76.9291 12.7447C77.1537 12.3159 76.9882 11.744 76.5567 11.4581C76.3498 11.3211 76.2315 11.2913 75.8887 11.2734C75.6227 11.2675 75.404 11.2913 75.2916 11.3449Z" fill="white"/>
+<path d="M79.0327 11.3807C78.749 11.4641 78.5243 11.6726 78.4239 11.9466C78.1401 12.6912 78.8317 13.4238 79.7362 13.3285C80.6406 13.2332 80.9539 12.2444 80.2682 11.6368C79.949 11.3509 79.4583 11.2496 79.0327 11.3807Z" fill="white"/>
+<path d="M65.0947 12.2561C65.0947 12.6433 65.1243 13.924 65.1538 15.1034C65.1834 16.2828 65.2248 18.2247 65.2425 19.422C65.2602 20.6193 65.2898 21.7094 65.3075 21.8464L65.3371 22.1025H66.2297H67.1223L67.0809 19.9462L67.0336 17.7958L70.2908 17.8375L73.5479 17.8852L73.5124 17.087C73.4888 16.6224 73.4415 16.2769 73.406 16.2531C73.3705 16.2292 72.7676 16.2054 72.0701 16.2054C71.3725 16.2054 69.942 16.1875 68.9016 16.1637L67.0041 16.128L66.9568 14.6984C66.9331 13.918 66.9391 13.2509 66.9686 13.2271C66.9923 13.2032 68.4819 13.2151 70.2671 13.2509C72.0582 13.2926 73.5361 13.3045 73.5597 13.2866C73.5834 13.2688 73.5893 12.9114 73.5656 12.5003L73.5302 11.7498L72.6375 11.7141C71.6385 11.6783 66.2652 11.5592 65.5558 11.5592H65.0947V12.2561Z" fill="white"/>
+<path d="M54.6374 12.613C54.5015 13.036 54.33 13.5244 54.265 13.7091L54.1527 14.0367L53.2956 14.2392L52.4443 14.4358V14.8349V15.234L53.2778 15.2697C53.7389 15.2876 54.1231 15.3174 54.135 15.3293C54.1468 15.3412 54.1704 16.3002 54.1941 17.4618C54.2236 19.2428 54.2473 19.6419 54.3419 20.0351C54.5369 20.875 54.9685 21.4349 55.6896 21.8042C56.2039 22.0603 56.7241 22.1676 57.5221 22.1676C58.2433 22.1735 58.6571 22.114 59.3074 21.9293C59.9872 21.7327 59.9517 21.7863 59.9517 20.9762C59.9517 20.589 59.934 20.2614 59.9162 20.2376C59.8926 20.2197 59.8216 20.2376 59.7507 20.2853C59.4138 20.5056 58.9172 20.6248 58.1724 20.6546C57.2325 20.6963 56.8778 20.6069 56.4995 20.2376C56.0798 19.8325 56.0502 19.6658 56.0088 17.3188L55.9734 15.3055L57.8414 15.3471L59.7152 15.3888V14.7277C59.7152 14.3643 59.6916 14.0545 59.662 14.0367C59.6325 14.0128 58.7931 13.9831 57.8 13.9592L55.9911 13.9235L55.9793 13.0836C55.9734 12.619 55.9675 12.1603 55.9616 12.065L55.9556 11.8863L55.4295 11.8684L54.8975 11.8565L54.6374 12.613Z" fill="white"/>
+<path d="M47.213 13.6203C47.148 13.6322 46.947 13.6739 46.7697 13.7097C45.8594 13.8943 44.8131 14.6389 44.2397 15.5026C44.1628 15.6277 44.0741 15.729 44.0564 15.729C44.0328 15.729 44.0209 15.2822 44.0209 14.7283V13.7335L43.0929 13.7156L42.1589 13.6978V15.175C42.1589 15.9911 42.1411 18.3619 42.1175 20.4467L42.082 24.2471H43.0338H43.9914V22.0133C43.9914 20.7862 44.0091 19.7795 44.0387 19.7795C44.0623 19.7855 44.1569 19.9106 44.2515 20.0595C44.6948 20.7624 45.617 21.5308 46.3382 21.8048C47.4554 22.2277 48.8091 22.1801 49.8081 21.6738C50.6948 21.227 51.3805 20.4169 51.7175 19.3924C51.8652 18.9516 51.8771 18.8384 51.883 17.933C51.883 17.1348 51.8593 16.8786 51.7707 16.5629C51.4514 15.455 50.7125 14.5317 49.7845 14.073C49.5066 13.936 49.1224 13.7812 48.9273 13.7275C48.5786 13.6382 47.4495 13.5608 47.213 13.6203ZM47.8337 15.0797C49.1106 15.2822 49.9322 16.2294 50.0505 17.647C50.1214 18.4631 49.8731 19.2375 49.3588 19.8093C48.549 20.7028 47.1658 20.8756 45.948 20.2263C45.2091 19.8332 44.6594 19.2315 44.1865 18.3082L43.9323 17.8079L44.2397 17.2063C44.8308 16.0387 45.7943 15.2584 46.8465 15.0797C47.2781 15.0082 47.3963 15.0082 47.8337 15.0797Z" fill="white"/>
+<path d="M61.2103 15.7636C61.2339 16.7465 61.2694 18.5573 61.2871 19.7904L61.3285 22.042H62.2448H63.1551L63.1196 21.1008C63.1019 20.5886 63.0723 19.0934 63.0546 17.783C63.0369 16.4725 63.0073 15.0846 62.9896 14.7033L62.9541 14.0004L62.7058 14.0481C62.3807 14.1017 61.8191 14.1017 61.4645 14.0362L61.1748 13.9826L61.2103 15.7636Z" fill="white"/>
+<path d="M75.1029 15.0558C75.1206 15.5085 75.1856 17.2895 75.2388 19.011L75.3452 22.1502L75.6408 22.1859C75.8063 22.2038 76.2024 22.2217 76.5216 22.2217H77.095V21.7749C77.095 21.3639 76.8762 15.0498 76.8408 14.5078C76.829 14.2457 76.8585 14.2516 76.2556 14.3529C76.0664 14.3886 75.8359 14.3886 75.7235 14.3588C75.6171 14.335 75.4221 14.2933 75.2979 14.2695L75.0674 14.2278L75.1029 15.0558Z" fill="white"/>
+<path d="M78.7092 14.7584C78.7328 15.0146 78.8038 16.7777 78.8747 18.6779C78.9456 20.5781 79.0166 22.1507 79.0402 22.1745C79.058 22.1924 79.4599 22.2222 79.9269 22.2341L80.7722 22.252L80.7368 21.2691C80.6954 20.1612 80.6185 18.3741 80.5181 15.9974C80.4826 15.1099 80.4412 14.3772 80.4294 14.3653C80.4176 14.3474 80.2107 14.3653 79.9742 14.407C79.6373 14.4546 79.4718 14.4546 79.1644 14.3891C78.9516 14.3415 78.7565 14.3057 78.7269 14.2998C78.6974 14.2998 78.6915 14.5023 78.7092 14.7584Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4688 0.298735C8.91207 0.298735 3.28392 4.30495 0.863514 10.0207C3.07895 11.1596 4.61106 13.4552 4.67588 16.1175C4.76876 10.1917 9.5648 5.41677 15.4676 5.41677C21.4284 5.41677 26.2607 10.2861 26.2607 16.2927C26.2607 22.2994 21.4284 27.1687 15.4676 27.1687C9.56508 27.1687 4.76921 22.3942 4.67589 16.4688C4.61127 19.1312 3.0793 21.4269 0.863949 22.5659C3.2846 28.2811 8.91246 32.2869 15.4688 32.2869C22.0255 32.2869 27.6537 28.2806 30.0741 22.5648C27.8124 21.4001 26.2641 19.0295 26.2641 16.2944C26.2641 13.5589 27.813 11.1879 30.0752 10.0234C27.6554 4.30622 22.0265 0.298735 15.4688 0.298735Z" fill="white"/>
+</svg>

src/assets/logo_card.svg

@@ -0,0 +1,13 @@
+<svg width="81" height="33" viewBox="0 0 81 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.9669 10.7619C31.5777 10.9704 30.5078 11.4171 29.5974 12.1617C28.628 12.954 27.9895 14.1036 27.7886 15.432C27.7472 15.694 27.7354 16.2004 27.7531 16.6531C27.8004 17.8861 28.0841 18.6962 28.7994 19.6493C29.7807 20.9598 31.3885 21.752 33.422 21.9307C35.6802 22.1213 37.7787 21.4303 39.0378 20.0841C40.0013 19.0596 40.3737 18.1065 40.4269 16.5637C40.4506 15.8906 40.4387 15.5868 40.356 15.1937C39.9895 13.3709 38.7245 11.9056 36.9156 11.2146C36.023 10.8691 35.4496 10.7738 34.2378 10.7559C33.6348 10.744 33.0674 10.75 32.9669 10.7619ZM35.6151 12.5668C37.1225 12.9659 38.1984 14.0679 38.4407 15.4558C38.5412 16.0455 38.4821 17.213 38.3225 17.6538C37.9796 18.6247 37.359 19.3336 36.4723 19.7684C35.7215 20.1318 35.2191 20.2271 34.0605 20.2211C33.1738 20.2152 33.0378 20.2033 32.5531 20.0544C31.093 19.6076 30.1708 18.6903 29.8339 17.3679C29.7275 16.9569 29.7156 15.9144 29.8102 15.3962C29.8398 15.2056 29.9876 14.8005 30.1294 14.5027C30.3422 14.0619 30.4664 13.8951 30.8329 13.5437C31.4654 12.9301 32.0861 12.6502 33.2329 12.4298C33.3156 12.4179 33.7826 12.4119 34.2674 12.4238C34.9294 12.4357 35.2723 12.4715 35.6151 12.5668Z" fill="white"/>
+<path d="M61.3891 11.0891C61.058 11.2559 60.8984 11.518 60.8984 11.9112C60.8984 12.2686 60.9989 12.4949 61.2531 12.7094C61.7674 13.1501 62.7191 13.0489 63.0679 12.5187C63.2511 12.2507 63.2511 11.8099 63.0738 11.4942C62.8019 11.0117 61.9566 10.8032 61.3891 11.0891Z" fill="white"/>
+<path d="M75.2916 11.3449C75.0434 11.4521 74.801 11.7559 74.7537 12.0061C74.6887 12.3695 74.7774 12.6375 75.0552 12.9115C75.6286 13.4596 76.6158 13.3762 76.9291 12.7447C77.1537 12.3159 76.9882 11.744 76.5567 11.4581C76.3498 11.3211 76.2315 11.2913 75.8887 11.2734C75.6227 11.2675 75.404 11.2913 75.2916 11.3449Z" fill="white"/>
+<path d="M79.0327 11.3807C78.749 11.4641 78.5243 11.6726 78.4239 11.9466C78.1401 12.6912 78.8317 13.4238 79.7362 13.3285C80.6406 13.2332 80.9539 12.2444 80.2682 11.6368C79.949 11.3509 79.4583 11.2496 79.0327 11.3807Z" fill="white"/>
+<path d="M65.0947 12.2561C65.0947 12.6433 65.1243 13.924 65.1538 15.1034C65.1834 16.2828 65.2248 18.2247 65.2425 19.422C65.2602 20.6193 65.2898 21.7094 65.3075 21.8464L65.3371 22.1025H66.2297H67.1223L67.0809 19.9462L67.0336 17.7958L70.2908 17.8375L73.5479 17.8852L73.5124 17.087C73.4888 16.6224 73.4415 16.2769 73.406 16.2531C73.3705 16.2292 72.7676 16.2054 72.0701 16.2054C71.3725 16.2054 69.942 16.1875 68.9016 16.1637L67.0041 16.128L66.9568 14.6984C66.9331 13.918 66.9391 13.2509 66.9686 13.2271C66.9923 13.2032 68.4819 13.2151 70.2671 13.2509C72.0582 13.2926 73.5361 13.3045 73.5597 13.2866C73.5834 13.2688 73.5893 12.9114 73.5656 12.5003L73.5302 11.7498L72.6375 11.7141C71.6385 11.6783 66.2652 11.5592 65.5558 11.5592H65.0947V12.2561Z" fill="white"/>
+<path d="M54.6374 12.613C54.5015 13.036 54.33 13.5244 54.265 13.7091L54.1527 14.0367L53.2956 14.2392L52.4443 14.4358V14.8349V15.234L53.2778 15.2697C53.7389 15.2876 54.1231 15.3174 54.135 15.3293C54.1468 15.3412 54.1704 16.3002 54.1941 17.4618C54.2236 19.2428 54.2473 19.6419 54.3419 20.0351C54.5369 20.875 54.9685 21.4349 55.6896 21.8042C56.2039 22.0603 56.7241 22.1676 57.5221 22.1676C58.2433 22.1735 58.6571 22.114 59.3074 21.9293C59.9872 21.7327 59.9517 21.7863 59.9517 20.9762C59.9517 20.589 59.934 20.2614 59.9162 20.2376C59.8926 20.2197 59.8216 20.2376 59.7507 20.2853C59.4138 20.5056 58.9172 20.6248 58.1724 20.6546C57.2325 20.6963 56.8778 20.6069 56.4995 20.2376C56.0798 19.8325 56.0502 19.6658 56.0088 17.3188L55.9734 15.3055L57.8414 15.3471L59.7152 15.3888V14.7277C59.7152 14.3643 59.6916 14.0545 59.662 14.0367C59.6325 14.0128 58.7931 13.9831 57.8 13.9592L55.9911 13.9235L55.9793 13.0836C55.9734 12.619 55.9675 12.1603 55.9616 12.065L55.9556 11.8863L55.4295 11.8684L54.8975 11.8565L54.6374 12.613Z" fill="white"/>
+<path d="M47.213 13.6203C47.148 13.6322 46.947 13.6739 46.7697 13.7097C45.8594 13.8943 44.8131 14.6389 44.2397 15.5026C44.1628 15.6277 44.0741 15.729 44.0564 15.729C44.0328 15.729 44.0209 15.2822 44.0209 14.7283V13.7335L43.0929 13.7156L42.1589 13.6978V15.175C42.1589 15.9911 42.1411 18.3619 42.1175 20.4467L42.082 24.2471H43.0338H43.9914V22.0133C43.9914 20.7862 44.0091 19.7795 44.0387 19.7795C44.0623 19.7855 44.1569 19.9106 44.2515 20.0595C44.6948 20.7624 45.617 21.5308 46.3382 21.8048C47.4554 22.2277 48.8091 22.1801 49.8081 21.6738C50.6948 21.227 51.3805 20.4169 51.7175 19.3924C51.8652 18.9516 51.8771 18.8384 51.883 17.933C51.883 17.1348 51.8593 16.8786 51.7707 16.5629C51.4514 15.455 50.7125 14.5317 49.7845 14.073C49.5066 13.936 49.1224 13.7812 48.9273 13.7275C48.5786 13.6382 47.4495 13.5608 47.213 13.6203ZM47.8337 15.0797C49.1106 15.2822 49.9322 16.2294 50.0505 17.647C50.1214 18.4631 49.8731 19.2375 49.3588 19.8093C48.549 20.7028 47.1658 20.8756 45.948 20.2263C45.2091 19.8332 44.6594 19.2315 44.1865 18.3082L43.9323 17.8079L44.2397 17.2063C44.8308 16.0387 45.7943 15.2584 46.8465 15.0797C47.2781 15.0082 47.3963 15.0082 47.8337 15.0797Z" fill="white"/>
+<path d="M61.2103 15.7636C61.2339 16.7465 61.2694 18.5573 61.2871 19.7904L61.3285 22.042H62.2448H63.1551L63.1196 21.1008C63.1019 20.5886 63.0723 19.0934 63.0546 17.783C63.0369 16.4725 63.0073 15.0846 62.9896 14.7033L62.9541 14.0004L62.7058 14.0481C62.3807 14.1017 61.8191 14.1017 61.4645 14.0362L61.1748 13.9826L61.2103 15.7636Z" fill="white"/>
+<path d="M75.1029 15.0558C75.1206 15.5085 75.1856 17.2895 75.2388 19.011L75.3452 22.1502L75.6408 22.1859C75.8063 22.2038 76.2024 22.2217 76.5216 22.2217H77.095V21.7749C77.095 21.3639 76.8762 15.0498 76.8408 14.5078C76.829 14.2457 76.8585 14.2516 76.2556 14.3529C76.0664 14.3886 75.8359 14.3886 75.7235 14.3588C75.6171 14.335 75.4221 14.2933 75.2979 14.2695L75.0674 14.2278L75.1029 15.0558Z" fill="white"/>
+<path d="M78.7092 14.7584C78.7328 15.0146 78.8038 16.7777 78.8747 18.6779C78.9456 20.5781 79.0166 22.1507 79.0402 22.1745C79.058 22.1924 79.4599 22.2222 79.9269 22.2341L80.7722 22.252L80.7368 21.2691C80.6954 20.1612 80.6185 18.3741 80.5181 15.9974C80.4826 15.1099 80.4412 14.3772 80.4294 14.3653C80.4176 14.3474 80.2107 14.3653 79.9742 14.407C79.6373 14.4546 79.4718 14.4546 79.1644 14.3891C78.9516 14.3415 78.7565 14.3057 78.7269 14.2998C78.6974 14.2998 78.6915 14.5023 78.7092 14.7584Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4688 0.298735C8.91207 0.298735 3.28392 4.30495 0.863514 10.0207C3.07895 11.1596 4.61106 13.4552 4.67588 16.1175C4.76876 10.1917 9.5648 5.41677 15.4676 5.41677C21.4284 5.41677 26.2607 10.2861 26.2607 16.2927C26.2607 22.2994 21.4284 27.1687 15.4676 27.1687C9.56508 27.1687 4.76921 22.3942 4.67589 16.4688C4.61127 19.1312 3.0793 21.4269 0.863949 22.5659C3.2846 28.2811 8.91246 32.2869 15.4688 32.2869C22.0255 32.2869 27.6537 28.2806 30.0741 22.5648C27.8124 21.4001 26.2641 19.0295 26.2641 16.2944C26.2641 13.5589 27.813 11.1879 30.0752 10.0234C27.6554 4.30622 22.0265 0.298735 15.4688 0.298735Z" fill="white"/>
+</svg>