Global and Employee List Success Modal

package-lock.json

@@ -18,14 +18,17 @@
         "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",
         "react-chartjs-2": "^5.2.0",
+        "react-circular-progressbar": "^2.1.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.3",
         "react-icons": "^5.1.0",
@@ -36,6 +39,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 +3200,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 +4848,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",
@@ -5305,6 +5322,14 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-circular-progressbar": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
+      "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-clientside-effect": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
@@ -6330,6 +6355,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,14 +20,17 @@
     "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",
     "react-chartjs-2": "^5.2.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",
     "react-icons": "^5.1.0",
@@ -38,6 +41,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,19 +1,18 @@
 @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=Montserrat:ital,wght@0,100..900;1,100..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");
 
 * {
   box-sizing: border-box;
   margin: 0;
-  padding: 0; 
+  padding: 0;
   /* font-family: "League Spartan", sans-serif !important; */
   /* 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, */
-    #de41b5
+    /* #764aaf67, */ #de41b5
   ); /* Gradient background */
   -webkit-background-clip: text; /* Clip text to the background area */
   -webkit-text-fill-color: transparent; /* Fill text with the background color */
@@ -41,19 +39,24 @@
   /* background-color: black; */
   font-weight: 600 !important;
 }
-a.active{
+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%
+  );
+  /* background-color: #FFFFFF21; */
 }
 /* .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%);
   border-left: 2px solid #fff;
 } */
-.chakra-accordion__item .link:hover{
-  background:transparent !important;
+.chakra-accordion__item .link:hover {
+  background: transparent !important;
 }
-.chakra-accordion__item .active{
-  background:transparent !important;
+.chakra-accordion__item .active {
+  background: transparent !important;
   border: none;
 }
 .link {
@@ -126,7 +129,7 @@ a.active{
 }
 
 .primary-btn {
-  background-color: #210A33 !important;
+  background-color: #210a33 !important;
 }
 
 .team-slider .swiper-button-next:after {
@@ -180,7 +183,7 @@ a.active{
   animation-iteration-count: 1;
 }
 
-.table-scroll::-webkit-scrollbar{
+.table-scroll::-webkit-scrollbar {
   width: 2px !important;
   height: 10px !important;
 }
@@ -209,9 +212,6 @@ a.active{
   background: #0041189a;
 }
 
-
-
-
 #google_translate_element {
   /* display: none; Hide the default Google Translate dropdown */
 
@@ -234,10 +234,9 @@ a.active{
   color: transparent !important;
 }
 
-
 @keyframes text {
   0% {
-    color: #DE858E;
+    color: #de858e;
     /* margin-bottom: -40px; */
   }
   30% {
@@ -356,21 +355,17 @@ a.active{
   }
 }
 
-
-
-
-
 /* ========= [ switch BTN ============ */
 
-
-
-/* From Uiverse.io by Nawsome */ 
+/* 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 +402,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 +463,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 +481,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 +526,42 @@ 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;
 }
+
+
+@font-face {
+  font-family: 'Gilroy';
+  src: url('./assets/fonts/Gilroy-Medium.ttf') format('woff2');
+       /* url('./assets/fonts/MyCustomFont.woff') format('woff'),
+       url('./assets/fonts/MyCustomFont.ttf') format('truetype'); */
+  font-weight: normal;
+  font-style: normal;
+}
+
+.gilroy{
+  font-family: 'Gilroy';
+}
+
+/* Styling the scrollbar */
+
+/* for stepper  */
+.css-1mdamwy[data-status=complete] {
+  background: #3725EA !important;
+}
+.css-1mdamwy[data-status=active] {
+  border-width: 1px !important;
+  border-color: #3725EA !important;
+}
+.css-ylpnre {
+ gap: 0 !important;
+}
+.css-90e3v4[data-status=complete] {
+  background: #3725EA !important;
+}

src/App.jsx

@@ -67,8 +67,8 @@ const App = () => {
             isAuthenticate || isAuthenticatedInCookie === "true" ? (
               <DefaultLayout isOnline={isOnline} />
             ) : (
-              // <Login />
-              <OnboardingFrame />
+              <Login />
+              // <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,69 @@
+import { Box, Stack, Text, Link } from "@chakra-ui/react";
+import React, { useState } from "react"; // Import useState
+import { MdGroups } from "react-icons/md";
+import EmployeesAddModal from "../../Pages/ManageHumanResource/EmployeesAddModal";
+import { NavLink } from "react-router-dom";
+
+function BlueCard({ blueCardData }) {
+  const [isOpen, setIsOpen] = useState(false); // State to manage modal visibility
+
+  const openModal = () => setIsOpen(true); // Function to open the modal
+  const closeModal = () => setIsOpen(false); // Function to close the modal
+
+  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}>
+          {blueCardData.title === "Total EMPLOYEES" ? (
+            <Link mb={0} onClick={openModal}>
+              {blueCardData.buttonText}
+            </Link>
+          ) : (
+            <NavLink to="dashboard/wallet-request">
+                <Link mb={0}>
+              {blueCardData.buttonText}
+            </Link>
+            </NavLink>
+          )}
+        </Text>
+      </Stack>
+      {blueCardData.title === "Total EMPLOYEES" && (
+        <EmployeesAddModal isOpen={isOpen} onClose={closeModal} />
+      )}
+    </Box>
+  );
+}
+
+export default BlueCard;

src/Components/CutomBreadcrumb.jsx

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

src/Components/DataTable/AccordianTable.jsx

@@ -0,0 +1,206 @@
+import React, { useState } from "react";
+import {
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Skeleton,
+  TableCaption,
+  Checkbox,
+  CheckboxGroup,
+  Collapse,
+  HStack,
+  Text,
+  Box,
+} 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);
+
+  const columnWidth =
+    data && data[0]
+      ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
+      : "auto";
+
+  const toggleRow = (index) => {
+    setExpandedRow(expandedRow === index ? null : index); // Toggle row expansion
+  };
+
+  // Toggle checkbox selection for individual rows
+  const handleCheckboxChange = (value) => {
+    setSelectedRadio((prev) => {
+      if (prev.includes(value)) {
+        return prev.filter((id) => id !== value); // Deselect if already selected
+      } else {
+        return [...prev, value]; // Add if not selected
+      }
+    });
+  };
+
+  // Handle "Select All" checkbox functionality
+  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
+    }
+  };
+
+  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>
+              {showRadioButton && (
+                <Th textAlign="center" p={4}>
+                  <Checkbox
+                    isChecked={selectedRadio?.length === data?.length}
+                    onChange={handleCheckAllChange}
+                    colorScheme="purple"
+                  />
+                </Th>
+              )}
+              {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"}
+                >
+                  {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} 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)}
+                    >
+                      {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={
+                            tableHeadRow?.length - 1 === i || centered
+                              ? "center"
+                              : "left"
+                          }
+                          color={"gray.600"}
+                          key={i}
+                          fontWeight={500}
+                          style={{
+                            whiteSpace: "nowrap",
+                            textOverflow: "ellipsis",
+                          }}
+                          className="web-text-small"
+                        >
+                          {item[heading]}
+                        </Td>
+                      ))}
+                    </Tr>
+
+                    {/* Expanded Row Content */}
+                    <Tr>
+                      <Td colSpan={tableHeadRow.length} p={0}>
+                        <Collapse in={expandedRow === index} animateOpacity>
+                          {item?.subMenu?.map(({ wallet, walBal }, idx) => (
+                            <div
+                              key={idx}
+                              style={{
+                                padding: "4px 75px ",
+                                margin: "5px 0",
+                              }}
+                            >
+                              <Box display={"flex"} alignItems={"center"}>
+                                <Box opacity={0} flex={1}>
+                                  <Text mb={0}>Hidden content</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,42 @@ 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) => {
-    setSelectedRadio(value);
+  // Toggle checkbox selection for individual rows
+  const handleCheckboxChange = (value) => {
+    console.log(value , "Noggas values");
+    
+    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 (
@@ -43,11 +65,29 @@ const NormalTable = ({
         <EmptySearchList message={emptyMessage} />
       ) : (
         <Table size="sm">
-          <TableCaption p={total ? 0 : null}>
-            {total ? total : "OptiFii v1.0.0"}
-          </TableCaption>
-          <Thead bg="#6311cb37">
+          {/* <TableCaption p={total ? 0 : null}>
+            {total ? total : "Optifii v1.0.0"}
+          </TableCaption> */}
+          <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 +103,7 @@ const NormalTable = ({
                   overflowWrap="normal"
                   textTransform={"none"}
                 >
-                  {/* Conditionally render radio button in the heading */}
-                  {showRadioButton && heading === "Select" ? (
-                    <CheckboxGroup value={selectedRadio}>
-                      <Checkbox isDisabled /> {/* Disabled radio button in header */}
-                    </CheckboxGroup>
-                  ) : (
-                    isLoading ? <Skeleton height="20px" /> : heading
-                  )}
+                  {isLoading ? <Skeleton height="20px" /> : heading}
                 </Th>
               ))}
             </Tr>
@@ -79,7 +112,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 +132,25 @@ const NormalTable = ({
                   )
                 )
               : data?.map((item, index) => (
-                  <Tr  cursor={'pointer'} 
-                  transition={'0.2s all'}
-                  _hover={{ shadow: "lg" }} 
-                   h={12} bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
+                  <Tr
+                    cursor={"pointer"}
+                    transition={"0.2s all"}
+                    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 +167,7 @@ const NormalTable = ({
                         }}
                         className="web-text-small"
                       >
-                        {/* Conditionally render radio button in the table body */}
-                        {showRadioButton && heading === "Select" ? (
-                          <CheckboxGroup
-                            value={selectedRadio}
-                            onChange={handleRadioChange}
-                          >
-                            <Checkbox bg={'#fff'} value={item.id} /> {/* Dynamic radio buttons */}
-                          </CheckboxGroup>
-                        ) : (
-                          item[heading]
-                        )}
+                        {item[heading]}
                       </Td>
                     ))}
                   </Tr>
@@ -138,4 +179,4 @@ const NormalTable = ({
   );
 };
 
-export default NormalTable;
+export default NormalTable;

src/Components/Doughnut/ApexLine.jsx

@@ -5,19 +5,19 @@ function ApexLine() {
   const [chartOptions, setChartOptions] = useState({
     series: [{
       name: 'Rate',
-      data: [45, 23, 70, 65, 5, 34, 32],
+      data: ["0","20k", "60k", "50k", "110k","90k", "100k"],
       gradientToColors: ['#004017'],
     }],
     options: {
       chart: {
-        height: 350,
+        height: 500,
         type: 'line',
         toolbar: {
           show: false // Hide the action icons
         }
       },
       stroke: {
-        width: 5,
+        width: 2,
         curve: 'smooth',
         colors: ['#598369'], // Customize the line color here
       },
@@ -29,11 +29,11 @@ function ApexLine() {
       },
       xaxis: {
         type: 'category', // Change from 'datetime' to 'category'
-        categories: ['BH', 'KW', 'OM', 'QA', 'SA', 'UAE', 'IND'],
+        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         tickAmount: 7
       },
       title: {
-        text: 'Exchange Rate Currency', // Adjust the title if needed
+        text: 'Spend summary', // Adjust the title if needed
         align: 'left',
         style: {
           fontSize: '15px',
@@ -58,7 +58,7 @@ function ApexLine() {
 
   return (
     <div>
-      <ReactApexChart  options={chartOptions.options} series={chartOptions.series} type="line" height={"100%"} width={"600"} />
+      <ReactApexChart  options={chartOptions.options} series={chartOptions.series} type="line" height={"288px"} width={"100%"} />
     </div>
   );
 }

src/Components/Doughnut/BarCharts.jsx

@@ -8,15 +8,16 @@ ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);
 const BarChart = () => {
   // Data for the bar chart
   const data = {
-    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul','Aug','Sept','Oct','Nov','Dec'],
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
     datasets: [
       {
         label: 'Sales',
-        data: [10, 40, 20, 50, 25, 45,30, 10, 30, 50, 25, 60],
+        data: [10, 40, 20, 50, 25, 45, 30, 10, 30, 50, 25, 60],
         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/Doughnut/PieCharts.jsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef } from 'react';
+import { Chart, ArcElement, Tooltip, Legend } from 'chart.js'; // Import necessary components
+import { Box, Text } from '@chakra-ui/react';
+
+function PieCharts() {
+  const chartRef = useRef(null);
+
+  useEffect(() => {
+    // Register required components
+    Chart.register(ArcElement, Tooltip, Legend);
+
+    const ctx = chartRef.current.getContext('2d');
+
+    const myChart = new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: ['Food', 'Fuel', 'Travel', 'Sales call'],
+        datasets: [
+          {
+            data: [25, 15, 30, 30], // Adjust the values as needed
+            backgroundColor: ['#ff6384', '#ffce56', '#36a2eb', '#4bc0c0'],
+            borderColor: ['#fff', '#fff', '#fff', '#fff'],
+            borderWidth: 1,
+            borderRadius:0,
+          },
+        ],
+      },
+      options: {
+        cutout: '75%', 
+        responsive: true,
+        plugins: {
+          legend: {
+            position: 'bottom',
+            borderRadius:"0px",
+            labels: {
+              usePointStyle: true,
+              usePointStyle: false, // Disables the point style
+              boxWidth: 25, // Adjust this to make square boxes
+              padding: 15,
+              paddingTop:70,
+            },
+          },
+        },
+      },
+    });
+
+    return () => {
+      myChart.destroy();
+    };
+  }, []);
+
+  return (
+    <div>
+      <Text fontSize={"sm"} fontWeight={500} mb={5}>Total spent by category</Text>
+      <Box position={"relative"}>
+        <canvas ref={chartRef} style={{width:"260px"}} />
+        <Box position={"absolute"} top={"36%"} left={"36%"}>
+            <Text fontSize={"sm"} mb={0}>Total Value</Text>
+            <Text fontSize={"md"} mb={0} fontWeight={500}>₹9,999.99</Text>
+        </Box>
+      </Box>
+    </div>
+  );
+}
+
+export default PieCharts;

src/Components/FormFieldMainReference.jsx

@@ -18,7 +18,7 @@ import * as yup from "yup";
 import { WarningTwoIcon } from "@chakra-ui/icons";
 import { TiWarning } from "react-icons/ti";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
-import { useNavigate } from "react-router-dom";
+import { useApp } from "react-router-dom";
 import FormField from "../../../Components/FormField";
 import { v4 as uuidv4 } from "uuid";
 import FormInputMain from "../../../Components/AddEditComponentMain";

src/Components/HeaderMain.jsx

@@ -10,10 +10,14 @@ import {
   Box,
   Button,
   HStack,
+  Icon,
   Image,
   Input,
   InputGroup,
   InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuList,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -23,6 +27,7 @@ import {
   Portal,
   Text,
   useColorMode,
+  VStack,
 } from "@chakra-ui/react";
 import React, { useContext, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
@@ -30,33 +35,75 @@ 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";
+import { IoFilterSharp } from "react-icons/io5";
+import { MdDeleteOutline, MdOutlineDelete } from "react-icons/md";
+import { IoIosCheckmark } from "react-icons/io";
 
-const HeaderMain = ({ 
+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);
   const [searchTerm, setSearchTerm] = useState("");
+  const [notifications, setNotifications] = useState([
+    {
+      id: 1,
+      avatar: "https://bit.ly/dan-abramov",
+      sender: "Admin",
+      time: "1 Min ago",
+      message: "Lorem ipsum dolor sit amet, consectetur",
+    },
+    {
+      id: 2,
+      avatar: "https://bit.ly/code-beast",
+      sender: "Support",
+      time: "5 Min ago",
+      message: "Your ticket has been updated.",
+    },
+  ]);
+
+  // Handler to delete a notification
+  const handleDelete = (id) => {
+    setNotifications(
+      notifications.filter((notification) => notification.id !== id)
+    );
+  };
+
+  // Handler to delete all notifications
+  const handleDeleteAll = () => {
+    setNotifications([]);
+  };
 
   const openDrawerOnClick = () => {};
 
   return (
     <Box
       w={"100%"}
-      h={{base:"8%", lg:"8%"}}
+      h={{ base: "8%", lg: "8%" }}
       position={"relative"}
       className={` pt-2 pb-2  fw-400 border-bottom d-flex ${
         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"
@@ -68,7 +115,7 @@ const HeaderMain = ({
               }}
               src={mainLogo}
               alt="Logo"
-              onClick={() =>  !blur && navigate("/")}
+              onClick={() => !blur && navigate("/")}
               cursor={"pointer"}
             />
           </Box>
@@ -87,92 +134,351 @@ const HeaderMain = ({
             {isDrawerOpen ? (
               <ArrowLeftIcon className="web-text-small" color={"#6311CB"} />
             ) : (
-              <ArrowRightIcon className="web-text-small "  color={"#6311CB"} />
+              <ArrowRightIcon className="web-text-small " color={"#6311CB"} />
             )}
           </Button>
         </Box>
 
-        {!blur&&<InputGroup width={350} 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>}
+        {!blur && (
+          <InputGroup width={350} 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>
-      <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}>
-            <Button size={'sm'} bg={"none"} p={0}>
+          {/* <Box display={"flex"} gap={2} alignItems={"center"} me={2}>
+            <Button 
+            onClick={()=>navigate("/notification")}
+            size={"sm"} bg={"none"} p={0}
+            >
               <MdNotificationsNone fontSize={"20px"} />
             </Button>
-          </Box>
+          </Box> */}
+          <Menu>
+            <MenuButton
+              as={Button}
+              border={"0px"}
+              _hover={{ bgColor: "#FFF" }}
+              // _active={{bgColor:"#FFF"}}
+              fontSize={"xs"}
+              color={"gray.700"}
+              variant="outline"
+              size={"sm"}
+              me={2}
+            >
+              <MdNotificationsNone fontSize={"20px"} />
+            </MenuButton>
+            <MenuList w="342px" h="442px" overflowY="scroll">
+              <HStack
+                borderBottom="1px dashed #CFCFCF"
+                justifyContent="space-between"
+                w="100%"
+                p={2}
+                position="fixed"
+                top={1}
+                bgColor="#FFF"
+              >
+                <Text
+                  as="span"
+                  fontWeight={600}
+                  fontSize="small"
+                  color="#000000"
+                >
+                  Notification
+                </Text>
+                <Text
+                  textDecoration="underline"
+                  fontSize="small"
+                  color="#696498"
+                  onClick={handleDeleteAll}
+                >
+                  Clear all
+                </Text>
+              </HStack>
+              <VStack mt={12} mb={12}>
+                <Box bg="#fff" p={1} rounded="md" boxShadow="md">
+                  <Text fontSize="small" fontWeight={400} color="#A0A0A0">
+                    Today
+                  </Text>
+                  <VStack spacing={4} align="stretch">
+                    {notifications.map((notification) => (
+                      <HStack
+                        key={notification.id}
+                        justifyContent="space-between"
+                        bg="#F3F7F9"
+                        p={2}
+                        rounded="sm"
+                        boxShadow="md"
+                      >
+                        <HStack spacing={2}>
+                          <Box bg="#d7d3fb" p={1} rounded="full">
+                            <Image
+                              borderRadius="full"
+                              boxSize="30px"
+                              src={notification.avatar}
+                              alt={notification.sender}
+                            />
+                          </Box>
+                          <Box>
+                            <Box mb={0}>
+                              <Text
+                                as="span"
+                                fontSize="sm"
+                                fontWeight={600}
+                                mb={0}
+                              >
+                                {notification.sender}
+                              </Text>
+                              <Text
+                                as="span"
+                                color="#A0A0A0"
+                                fontSize="xs"
+                                ms={2}
+                                fontWeight={500}
+                                mb={0}
+                              >
+                                {notification.time}
+                              </Text>
+                            </Box>
+                            <Text color="#A0A0A0" fontSize="xs" mb={0}>
+                              {notification.message}
+                            </Text>
+                          </Box>
+                        </HStack>
+                        <Box
+                          onClick={() => handleDelete(notification.id)}
+                          cursor="pointer"
+                        >
+                          <MdOutlineDelete color="#686868" size={16} />
+                        </Box>
+                      </HStack>
+                    ))}
+                  </VStack>
+                </Box>
+
+                <Box bg="#fff" p={1} rounded="md" boxShadow="md">
+                  <Text fontSize="small" fontWeight={400} color="#A0A0A0">
+                    Yesterday
+                  </Text>
+                  <VStack spacing={4} align="stretch">
+                    {notifications.map((notification) => (
+                      <HStack
+                        key={notification.id}
+                        justifyContent="space-between"
+                        bg="#F3F7F9"
+                        p={2}
+                        rounded="sm"
+                        boxShadow="md"
+                      >
+                        <HStack spacing={2}>
+                          <Box bg="#d7d3fb" p={1} rounded="full">
+                            <Image
+                              borderRadius="full"
+                              boxSize="30px"
+                              src={notification.avatar}
+                              alt={notification.sender}
+                            />
+                          </Box>
+                          <Box>
+                            <Box mb={0}>
+                              <Text
+                                as="span"
+                                fontSize="sm"
+                                fontWeight={600}
+                                mb={0}
+                              >
+                                {notification.sender}
+                              </Text>
+                              <Text
+                                as="span"
+                                color="#A0A0A0"
+                                fontSize="xs"
+                                ms={2}
+                                fontWeight={500}
+                                mb={0}
+                              >
+                                {notification.time}
+                              </Text>
+                            </Box>
+                            <Text color="#A0A0A0" fontSize="xs" mb={0}>
+                              {notification.message}
+                            </Text>
+                          </Box>
+                        </HStack>
+                        <Box
+                          onClick={() => handleDelete(notification.id)}
+                          cursor="pointer"
+                        >
+                          <MdOutlineDelete color="#686868" size={16} />
+                        </Box>
+                      </HStack>
+                    ))}
+                  </VStack>
+                </Box>
+              </VStack>
+
+              <HStack
+                position="fixed"
+                bottom={0}
+                borderTop="0.5px solid #CFCFCF"
+                p={1}
+                justifyContent="center"
+                bgColor="#fff"
+                w="100%"
+              >
+                <Text onClick={()=>navigate("/notification")} cursor="pointer" fontSize="small" color="#6311CB" fontWeight={600}>
+                  View All
+                </Text>
+              </HStack>
+            </MenuList>
+          </Menu>
           <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">
-                    Profile
-                  </PopoverBody>
-                  <Link to={"/help-and-support"}>
+                  <Link to="/profile">
+                    <PopoverBody
+                      textAlign="center"
+                      color="#6311CB"
+                      className="web-text-medium pointer link"
+                    >
+                      View Profile
+                    </PopoverBody>
+                  </Link>
+
+                  {/* <Link to={"/help-and-support"}>
                     <PopoverBody className="web-text-medium pointer ">
                       Help & Support
                     </PopoverBody>
-                  </Link>
+                  </Link> */}
+                  <PopoverBody className="web-text-medium pointer ">
+                    <VStack alignItems="flex-start">
+                      <Text
+                        color="#A0ABBB"
+                        textAlign="left"
+                        fontSize={"x-small"}
+                        fontWeight={600}
+                      >
+                        Switch Accounts
+                      </Text>
+                      {users.map((val) => {
+                        return (
+                          // <VStack
+                          //   className="web-text-medium pointer link"
+                          //   h="50px"
+                          //   pt={1}
+                          //   key={val.id}
+                          //   w="100%"
+                          // >
+                          <HStack
+                            alignItems="flex-start"
+                            gap={4}
+                            w="100%"
+                            className="pointer link"
+                          >
+                            <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? 
-
-
-
-              <Box>
-                <Box className="d-flex pointer  align-items-center">
-                  <Avatar size="sm" boxSize={37} bg={"#210a33"} />
-                  <Box
-                    style={{
-                      display: "flex",
-                    }}
-                    className=" overflow-hidden ms-3  flex-column "
-                  >
-                    <Text as={"span"} className="web-text-small">
-                      Hello, Developers
-                    </Text>
-                    <Text as={"span"} className="web-text-xsmall">
-                      mailto:wdi@tanami.com
-                    </Text>
+              {blur ? (
+                <Box>
+                  <Box className="d-flex pointer  align-items-center">
+                    <Avatar size="sm" boxSize={37} bg={"#210a33"} />
+                    <Box
+                      style={{
+                        display: "flex",
+                      }}
+                      className=" overflow-hidden ms-3  flex-column "
+                    >
+                      <Text as={"span"} className="web-text-small">
+                        Hello, Developers
+                      </Text>
+                      <Text as={"span"} className="web-text-xsmall">
+                        mailto:wdi@tanami.com
+                      </Text>
+                    </Box>
                   </Box>
                 </Box>
-              </Box>:<PopoverTrigger>
-                <Box className="d-flex pointer  align-items-center">
-                  <Avatar size="sm" boxSize={37} bg={"#210a33"} />
-                  <Box
-                    style={{
-                      display: "flex",
-                    }}
-                    className=" overflow-hidden ms-3  flex-column "
-                  >
-                    <Text as={"span"} className="web-text-small">
-                      Hello, Developers
-                    </Text>
-                    <Text as={"span"} className="web-text-xsmall">
-                      mailto:wdi@tanami.com
-                    </Text>
+              ) : (
+                <PopoverTrigger>
+                  <Box className="d-flex pointer  align-items-center">
+                    <Avatar size="sm" boxSize={37} bg={"#210a33"} />
+                    <Box
+                      style={{
+                        display: "flex",
+                      }}
+                      className=" overflow-hidden ms-3  flex-column "
+                    >
+                      <Text as={"span"} className="web-text-small">
+                        Hello, Developers
+                      </Text>
+                      <Text as={"span"} className="web-text-xsmall">
+                        mailto:wdi@tanami.com
+                      </Text>
+                    </Box>
                   </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/RupeeSlider/RupeeSlider.jsx

@@ -0,0 +1,71 @@
+import {
+    Box,
+    Slider,
+    SliderTrack,
+    SliderFilledTrack,
+    SliderThumb,
+    SliderMark,
+    HStack,
+    Text,
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+
+
+const RupeeSlider = () => {
+    const [sliderValue, setSliderValue] = useState(100000); // Default value in rupees
+
+    const formatRupee = (val) => `₹ ${val.toLocaleString('en-IN')}`;
+
+    return (
+        <Box w="100%">
+            <HStack mt={12}>
+                <Text fontSize="xs" fontWeight="500" color={"#9A9A9A"} mb={0} w={12}>₹ 100</Text>
+                <Slider
+                    aria-label='slider-ex-6'
+                    onChange={(val) => setSliderValue(val)}
+                    colorScheme='purple'
+                    min={100}
+                    max={500000}
+                    defaultValue={100000}
+                >
+                    <SliderMark
+                        value={sliderValue}
+                        textAlign='center'
+                        bg='#efeefe'
+                        color='#3725EA'
+                        mt='-12'
+                        ml='-45px'
+                        p={2}
+                        w={90}
+                        fontSize={"xs"}
+                        fontWeight={600}
+                        rounded={"md"}
+                        position="relative"
+                        sx={{
+                            '::after': {
+                                content: '""',
+                                position: 'absolute',
+                                bottom: '-3', // Adjust the distance of the arrow from the mark
+                                left: '50%',
+                                transform: 'translateX(-50%)',
+                                borderWidth: '6px',
+                                borderStyle: 'solid',
+                                borderColor: '#efeefe transparent transparent transparent', // Arrow color matching the bg
+                            },
+                        }}
+                    >
+                        {formatRupee(sliderValue)}
+                    </SliderMark>
+
+                    <SliderTrack>
+                        <SliderFilledTrack />
+                    </SliderTrack>
+                    <SliderThumb />
+                </Slider>
+                <Text fontSize="xs" fontWeight="500" color={"#9A9A9A"} mb={0} w={24}>₹ 5,00,000</Text>
+            </HStack>
+        </Box>
+    )
+}
+
+export default RupeeSlider

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/Layout/DefaultLayout.jsx

@@ -5,7 +5,10 @@ import logoMini from "../assets/logo-min.png";
 import logoMiniDark from "../assets/favicon.png";
 import { useDispatch } from "react-redux";
 import { loginUser } from "../Redux/Slice/auth";
+import { RiNotification3Line } from "react-icons/ri";
 // import Button02 from "../Components/Buttons/Button02";
+import goth from "../assets/goth.png";
+import { SlOptions } from "react-icons/sl";
 import {
   TbArrowBadgeLeftFilled,
   TbListDetails,
@@ -43,6 +46,10 @@ import {
   Breadcrumb,
   Divider,
   Button,
+  Flex,
+  HStack,
+  VStack,
+  Circle,
 } from "@chakra-ui/react";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import Cookies from "js-cookie"; // Import the Cookies library
@@ -125,13 +132,12 @@ const DashboardLayout = ({ isOnline }) => {
     navigate("/login");
   };
 
-
   if (isSplashVisible) {
     return <SplashScreen />;
   }
 
   return (
-    <Box height={"100vh"}>
+    <Box height={"100vh"} overflow="hidden" className="gilroy">
       <HeaderMain
         isDrawerOpen={isDrawerOpen}
         logOutHandler={logOutHandler}
@@ -221,7 +227,7 @@ const DashboardLayout = ({ isOnline }) => {
                           _hover={{ bg: "#ced8e6a2" }}
                           className={`${
                             true
-                              ? "p-2   web-text-medium ps-2 justify-content-between"
+                              ? "p-2  web-text-medium ps-2 justify-content-between"
                               : "p-2 ps-1 web-text-xlarge justify-content-center"
                           }  link d-flex align-items-center gap-2 w-100 mb-1`}
                         >
@@ -257,7 +263,7 @@ const DashboardLayout = ({ isOnline }) => {
                           flexDirection={"column"}
                           gap={1}
                         >
-                          {submenu?.map(
+                          {/* {submenu?.map(
                             (
                               {
                                 title: subMenuTitle,
@@ -292,7 +298,6 @@ const DashboardLayout = ({ isOnline }) => {
                                     <SubIcon
                                       fontSize={"8px"}
                                       className="ms-2"
-                                      // style={{ zIndex: 111, color:colorCode?colorCode:"" }}
                                     />
                                   )}
                                   <Text
@@ -306,6 +311,71 @@ const DashboardLayout = ({ isOnline }) => {
                                 </NavLink>
                               </Box>
                             )
+                          )} */}
+                          {submenu?.map(
+                            (
+                              {
+                                title: subMenuTitle,
+                                path: link,
+                                icon: SubIcon,
+                                colorCode,
+                              },
+                              i
+                            ) => (
+                              <Box
+                                key={i}
+                                style={{
+                                  height: "auto",
+                                  position: "relative",
+                                }}
+                                className={`${
+                                  true
+                                    ? " web-text-medium ps-4 "
+                                    : " web-text-xlarge  justify-content-center"
+                                }  d-flex align-items-center  p-0`}
+                              >
+                                <NavLink
+                                  style={{ borderRadius: "2px" }}
+                                  className={`${
+                                    true
+                                      ? "p-2 ps-1 ms-2 web-text-medium "
+                                      : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
+                                  }  link d-flex align-items-center gap-2 w-100  mx-2`}
+                                  to={link}
+                                  end
+                                >
+                                  {({ isActive }) => (
+                                    <>
+                                      {/* {SubIcon && (
+                                        <SubIcon
+                                          fontSize={"18px"}
+                                          className="ms-2"
+                                        />
+                                      )} */}
+                                      {isActive && (
+                                        <Box
+                                        as="span"
+                                          w="7px"
+                                          h="7px"
+                                          bg="#3725EA" 
+                                          borderRadius="50%"
+                                          ml={"-1rem"}
+                                        />
+                                      )}
+                                      <Text
+                                        as={"span"}
+                                        display={true ? "flex" : "none"}
+                                        alignItems="center"
+                                        overflow="hidden"
+                                      >
+                                        {subMenuTitle}
+                                      </Text>
+                                      
+                                    </>
+                                  )}
+                                </NavLink>
+                              </Box>
+                            )
                           )}
                         </AccordionPanel>
                       </AccordionItem>
@@ -315,7 +385,8 @@ const DashboardLayout = ({ isOnline }) => {
                       <Text
                         as={"span"}
                         key={index}
-                        className="web-text-xxsmall fw-600  text-secondary fw-bold"
+                        fontSize="small"
+                        className=" fw-600 text-secondary fw-bold"
                       >
                         {title}
                       </Text>
@@ -353,6 +424,44 @@ const DashboardLayout = ({ isOnline }) => {
                 }
               )}
             </Accordion>
+            <Flex
+              flexDirection="row"
+              justifyContent="flex-start"
+              w="100%"
+              gap={1}
+              p={0}
+              mt={"2rem"}
+            >
+              <Box position="relative">
+                <RiNotification3Line color="#A0ABBB" fontSize="large" />
+                <Box
+                  w="10px"
+                  h="10px"
+                  borderRadius="50%"
+                  bgColor="#3725EA"
+                  position="absolute"
+                  top={0}
+                  right={0}
+                ></Box>
+              </Box>
+              <HStack alignItems="flex-start" p={0}>
+                <Image src={goth} h="35px" w="35px" />
+                <VStack alignItems="flex-start">
+                  <Text
+                    as="span"
+                    color="#A0ABBB"
+                    fontWeight={500}
+                    fontSize="small"
+                  >
+                    Jenny Wilson
+                  </Text>
+                  <Text color="#A0ABBB" fontWeight={500} fontSize="small">
+                    jen.wilson@wdipl.com
+                  </Text>
+                </VStack>
+                <SlOptions fontSize="large" style={{ marginRight: "3px" }} />
+              </HStack>
+            </Flex>
           </Box>
         </Box>
 

src/Pages/Dashboard/LoadMoneyModal.jsx

@@ -0,0 +1,70 @@
+import { Box, Divider, HStack, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text } from '@chakra-ui/react'
+import React from 'react'
+import PrimaryButton from '../../Components/Buttons/PrimaryButton'
+
+const LoadMoneyModal = ({ isOpen, onClose }) => {
+
+    return (
+        <Box>
+            {/* modal  */}
+            <Modal size={"sm"} isOpen={isOpen} onClose={onClose} isCentered>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader>Bank account details</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        <HStack mb={2}>
+                            <Text fontSize={"xs"} fontWeight={500} color={"#757E8C"} mb={0} w={40}>
+                                Name at bank
+                            </Text>
+                            <Text fontSize={"xs"} fontWeight={600} mb={0} color={"#262626"}> 
+                                Kartikey Gautam
+                            </Text>
+                        </HStack>
+                        <HStack mb={2}>
+                            <Text fontSize={"xs"} fontWeight={500} color={"#757E8C"} mb={0} w={40}>
+                                Account number
+                            </Text>
+                            <Text fontSize={"xs"} fontWeight={600} mb={0} color={"#262626"}>
+                                12345578910
+                            </Text>
+                        </HStack>
+                        <HStack mb={2}>
+                            <Text fontSize={"xs"} fontWeight={500} color={"#757E8C"} mb={0} w={40}>
+                                IFSC
+                            </Text>
+                            <Text fontSize={"xs"} fontWeight={600} mb={0} color={"#262626"}>
+                                ICICI121452
+                            </Text>
+                        </HStack>
+                        <Divider />
+                        <Box mb={4}>
+                            <Text fontSize={"md"} fontWeight={600} mb={4}>
+                                Load Money
+                            </Text>
+                            <Box mb={2}>
+                                <Text fontSize={"xs"} fontWeight={600} mb={1} color={"#344054"}>
+                                    Enter UTR number
+                                </Text>
+                                <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+                            </Box>
+                            <Box >
+                                <Text fontSize={"xs"} fontWeight={600} mb={1} color={"#344054"}>
+                                    Enter amount
+                                </Text>
+                                <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+                            </Box>
+                        </Box>
+
+                        <HStack py={4} justifyContent={"center"}>
+                            <PrimaryButton title={"Submit"} />
+                        </HStack>
+
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+        </Box>
+    )
+}
+
+export default LoadMoneyModal

src/Pages/Expenses/ExpenseOverView.jsx

@@ -0,0 +1,394 @@
+import {
+    Avatar,
+    Box,
+    Button,
+    Checkbox,
+    Divider,
+    Flex,
+    HStack,
+    Icon,
+    Image,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    Radio,
+    Select,
+    Tag,
+    TagLabel,
+    Text,
+    VStack,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useState } from "react";
+  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 MiniHeader from "../../Components/MiniHeader";
+  import GlobalStateContext from "../../Contexts/GlobalStateContext";
+  import NormalTable from "../../Components/DataTable/NormalTable";
+  import Food from "../../assets/icons/Food.png";
+  import Fuel from "../../assets/icons/Fuel.png";
+  import Gift from "../../assets/icons/gift.png";
+  import books from "../../assets/icons/bookStack.png";
+  import telecom from "../../assets/icons/telecom.png";
+  import gadget from "../../assets/icons/gadget.png";
+  import foods from "../../assets/icons/foods.png";
+  import {
+    AddIcon,
+    CalendarIcon,
+    ChevronDownIcon,
+    EmailIcon,
+    SearchIcon,
+    ViewIcon,
+  } from "@chakra-ui/icons";
+  import {
+    MdFilterList,
+    MdNotificationsNone,
+    MdOutlineHeadsetMic,
+  } from "react-icons/md";
+  import { OPACITY_ON_LOAD } from "../../Layout/animations";
+  import { Link, NavLink, useNavigate } from "react-router-dom";
+  import { FaArrowUpFromBracket } from "react-icons/fa6";
+  import { LuListFilter } from "react-icons/lu";
+  import { BsFilterRight } from "react-icons/bs";
+  import pdfIcon from "../../assets/pdfIcon.svg";
+  import ExcelIcon from "../../assets/ExcelIcon.svg";
+  
+  const BenifitOverView = () => {
+    const [dash, setDash] = useState([
+      {
+        id: 1,
+        wallet: "Food",
+        walletAmount: "₹ 70,000",
+        balanceRemaining: "₹ 20,000",
+        status: "Approved",
+        totalEmployees: 500,
+        users: 5,
+        icon: foods,
+      },
+      {
+        id: 2,
+        wallet: "Fuel",
+        walletAmount: "₹ 50,000",
+        balanceRemaining: "₹ 15,000",
+        status: "Approved",
+        totalEmployees: 200,
+        users: 3,
+        icon: Fuel,
+      },
+      {
+        id: 3,
+        wallet: "Books & Periodicals",
+        walletAmount: "₹ 100,000",
+        balanceRemaining: "₹ 80,000",
+        status: "Pending",
+        totalEmployees: 300,
+        users: 4,
+        icon: books,
+      },
+      {
+        id: 4,
+        wallet: "Telecom",
+        walletAmount: "₹ 100,000",
+        balanceRemaining: "₹ 80,000",
+        status: "Pending",
+        totalEmployees: 300,
+        users: 4,
+        icon: telecom,
+      },
+      {
+        id: 5,
+        wallet: "Books & periodicals",
+        walletAmount: "₹ 100,000",
+        balanceRemaining: "₹ 80,000",
+        status: "Pending",
+        totalEmployees: 300,
+        users: 4,
+        icon: books,
+      },
+      {
+        id: 6,
+        wallet: "Learning & development",
+        walletAmount: "₹ 100,000",
+        balanceRemaining: "₹ 80,000",
+        status: "Pending",
+        totalEmployees: 300,
+        users: 4,
+        icon: books,
+      },
+      {
+        id: 7,
+        wallet: "Gadget & equipment",
+        walletAmount: "₹ 100,000",
+        balanceRemaining: "₹ 80,000",
+        status: "Pending",
+        totalEmployees: 300,
+        users: 4,
+        icon: gadget,
+      },
+      {
+        id: 8,
+        wallet: "Telecom",
+        walletAmount: "₹ 100,000",
+        balanceRemaining: "₹ 80,000",
+        status: "Pending",
+        totalEmployees: 300,
+        users: 4,
+        icon: telecom,
+      },
+      {
+        id: 1,
+        wallet: "Food",
+        walletAmount: "₹ 70,000",
+        balanceRemaining: "₹ 20,000",
+        status: "Approved",
+        totalEmployees: 500,
+        users: 5,
+        icon: foods,
+      },
+    ]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [users, setusers] = useState(50);
+    const [selectedRadio, setSelectedRadio] = useState([]);
+    const navigate = useNavigate();
+  
+    useEffect(() => {
+      // Set isLoading to true
+      setIsLoading(true);
+  
+      // Simulate a 3-second delay
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 500);
+  
+      return () => clearTimeout(timer);
+    }, []);
+  
+    // ===============================[ Table Header ]
+  
+    const dashHeadSecRow = [
+      "Sr No",
+      "Wallet Name",
+      "Total employees",
+      "Amount in card",
+      "Pending amount ",
+      "Pending request",
+    ];
+  
+    const dashSecArr = dash.map((item, index) => ({
+      "Sr No": item.id,
+      "Wallet Name": (
+        <HStack key={`wallet-${index}`}>
+          {/* <Box p={2} bg="#ebe0f8" rounded="full">
+                <MdNoFood color="#6311CB" />
+              </Box> */}
+          <Image src={item.icon} h="20px" />
+          <Text mb={0} fontSize="xs">
+            {item.wallet || "Food"}
+          </Text>
+        </HStack>
+      ),
+      "Total 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="xs" mb={0}>
+              +{users}
+            </Text>
+          </Box>
+        </Box>
+      ),
+     "Amount in card": (
+        <Text key={`walletAmount-${index}`} mb={0} fontSize="xs">
+          {item.walletAmount || 5000}
+        </Text>
+      ),
+      "Pending amount ": (
+        <Text key={`balance-${index}`} mb={0} fontSize="xs">
+          {item.balanceRemaining || "₹ 2000"}
+        </Text>
+      ),
+      "Pending request": (
+        <>
+        <NavLink to="/dashboard/beinefit-overview/benefit-request">
+          <Button
+            bgColor="#6311CB"
+            color="#fff"
+            fontSize="x-small"
+            w={"87px"}
+            h={"27px"}
+            _hover={{ bgColor: "#6311CB", borderRadius: "5px" }}
+          >
+            View
+          </Button>
+          </NavLink>
+        </>
+      ),
+    }));
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
+        <Box
+          rounded={"md"}
+          py={4}
+          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>
+            <Divider />
+            <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+              <Flex align={"center"} gap={5}>
+                <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>
+                <Flex align={"center"} gap={2}>
+                  <Text as={"span"} fontSize={"xs"}>
+                    Show
+                  </Text>
+                  <Select borderRadius={5} size={"sm"}>
+                    <option value="10">10</option>
+                    <option value="30">30</option>
+                    <option value="50">50</option>
+                    <option value="80">80</option>
+                  </Select>
+                  <Text as={"span"} fontSize={"xs"}>
+                    entries
+                  </Text>
+                </Flex>
+              </Flex>
+              <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={<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={dashHeadSecRow}
+            data={dashSecArr}
+            isLoading={isLoading}
+            showRadioButton={true}
+            setSelectedRadio={setSelectedRadio}
+            selectedRadio={selectedRadio}
+          />
+        </Box>
+      </Box>
+    );
+  };
+  
+  export default BenifitOverView;
+  

src/Pages/Expenses/ExpenseView.jsx

@@ -0,0 +1,157 @@
+import {
+    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 { MdOutlineNoFood } from "react-icons/md";
+  import { OPACITY_ON_LOAD } from "../../Layout/animations";
+  import { NavLink, 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 = [
+      "Sr. No",
+      "Report name",
+      "Report by",
+      "Report amount",
+      "Date & time",
+      "Approver",
+      "Disburser",
+      "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>
+      ),
+      "Report name": (
+        <Text color="#3725EA" fontSize="small" fontWeight={400}>{item?.reportname}</Text>
+      ),
+      // "Report by": item?.emailAddress,
+      "Report amount": item?.reportamount,
+      "Date & time": item?.datetime,
+      "Approver": item?.approver,
+      "Disburser": item?.disburser,
+      "Report by": (
+        <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: (
+        <NavLink to="/dashboard/beinefit-overview/benefit-request/beinefit-overview-view">
+        <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>
+        </NavLink>
+      ),
+    }));
+  
+    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}
+        /> */}
+  
+        <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"} fontWeight={600} 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"} fontWeight={600} mb={1}>
+                Wallet Amount
+              </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>
+    );
+  };
+  
+  export default ReimbursementRequest;
+  

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,608 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import {
+  Box,
+  Grid,
+  Heading,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  VStack,
+  Button,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Text,
+  Tag,
+  AccordionPanel,
+  Checkbox,
+  AccordionButton,
+  AccordionItem,
+  HStack,
+  Accordion,
+} 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, ChevronRightIcon, SearchIcon } from "@chakra-ui/icons";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router-dom";
+import { IoFilterSharp } from "react-icons/io5";
 
 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}>
-      <MiniHeader
-        title={"My Requests"}
-        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
-        backButton={true}
-      />
+    <Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
+      <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 w="350px" h="300px" overflowY="scroll">
+                  <VStack p={2} alignItems="flex-start">
+                    <HStack alignItems="center">
+                      <IoFilterSharp fontSize="small" />{" "}
+                      <Text as="span" fontSize="small" fontWeight={600}>
+                        Filter
+                      </Text>
+                    </HStack>
+                    <Box w="100%" borderBottom="1px solid #D8D8D8" />
+                    <Box w="100%">
+                      <Accordion allowMultiple border="0px solid white">
+                        {/* Department Section */}
+                        <AccordionItem>
+                          {({ isExpanded }) => (
+                            <>
+                              <AccordionButton>
+                                {isExpanded ? (
+                                  <ChevronDownIcon fontSize="24px" />
+                                ) : (
+                                  <ChevronRightIcon fontSize="24px" />
+                                )}
+                                <Box flex="1" textAlign="left" ml={2}>
+                                  Department
+                                </Box>
+                              </AccordionButton>
+                              <AccordionPanel pb={2}>
+                                <VStack align="start">
+                                  <Checkbox defaultChecked>Design</Checkbox>
+                                  <Checkbox>Finance</Checkbox>
+                                  <Checkbox defaultChecked>IT</Checkbox>
+                                  <Checkbox>Development</Checkbox>
+                                  <Checkbox>Sales</Checkbox>
+                                  <Checkbox>QA</Checkbox>
+                                </VStack>
+                              </AccordionPanel>
+                            </>
+                          )}
+                        </AccordionItem>
+
+                        {/* Status Section */}
+                        <AccordionItem>
+                          {({ isExpanded }) => (
+                            <>
+                              <AccordionButton>
+                                {isExpanded ? (
+                                  <ChevronDownIcon fontSize="24px" />
+                                ) : (
+                                  <ChevronRightIcon fontSize="24px" />
+                                )}
+                                <Box flex="1" textAlign="left" ml={4}>
+                                  Status
+                                </Box>
+                              </AccordionButton>
+                              <AccordionPanel pb={4}>
+                                <VStack align="start">
+                                  <Checkbox>Active</Checkbox>
+                                  <Checkbox>Inactive</Checkbox>
+                                </VStack>
+                              </AccordionPanel>
+                            </>
+                          )}
+                        </AccordionItem>
+                      </Accordion>
+                    </Box>
+                  </VStack>
+                </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,40 +18,63 @@ import {
   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 { 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 } 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 { BsFilterRight } from "react-icons/bs";
+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 ExcelIcon from "../../assets/ExcelIcon.svg";
+import { HiOutlineUserGroup } from "react-icons/hi";
+import EmployeesAddModal from "./EmployeesAddModal";
+import EmployeesEditModal from "./EmployeesEditModal";
+import EmployeesAddMultipleModal from "./EmployeesAddMultipleModal";
+import { IoFilterSharp } from "react-icons/io5";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+} from "@chakra-ui/react";
+import { ChevronRightIcon } from "@chakra-ui/icons";
 
 const Employees = () => {
   const { employees } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [selectedRadio, setSelectedRadio] = 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
@@ -80,27 +105,23 @@ const Employees = () => {
   // const extractedArray = reportsHistory.map((item)=>({ }))
 
   const extractedArray = employees.map((item, index) => ({
+    id: item.id,
     "Emp ID": (
-      <Radio 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>
+      <Text as={"span"} fontSize={"xs"}>
+        {item?.EmpID}
+      </Text>
+    ),
+    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,
@@ -132,42 +153,42 @@ const Employees = () => {
       </Tag>
     ),
     Action: (
-      <Box
-        display={"flex"}
-        gap={1}
-        alignItems={"center"}
-        justifyContent={"center"}
-      >
-        <Button
-          _hover={{ color: "gray.800", bg: "gray.100" }}
-          transition={"0.5s"}
-          size={"sm"}
-          bg={"none"}
-          p={0}
-          color="gray.600"
-        >
-          <FaRegEye fontSize={"18px"} />
-        </Button>
-        <Button
-          _hover={{ color: "gray.800", bg: "gray.100" }}
-          transition={"0.5s"}
-          size={"sm"}
-          bg={"none"}
-          p={0}
-          color="gray.600"
-        >
-          <AiOutlineEdit fontSize={"19px"} />
-        </Button>
-        <Button
-          _hover={{ color: "gray.800", bg: "gray.100" }}
-          transition={"0.5s"}
-          size={"sm"}
-          bg={"none"}
-          p={0}
-          color="gray.600"
-        >
-          <RiDeleteBin5Line fontSize={"18px"} />
-        </Button>
+      <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>
     ),
   }));
@@ -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>
@@ -220,17 +241,62 @@ const Employees = () => {
                   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>
+                  <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>
+                {selectedRadio.length > 1 ? (
+                  <Button
+                    border={"1px solid #EE1B24"}
+                    bgColor="#ffff"
+                    fontSize="x-small"
+                    py={0}
+                    color="#EE1B24"
+                    h="30px"
+                    _hover={{ bgColor: "#ffff" }}
+                  >
+                    Delete
+                  </Button>
+                ) : (
+                  <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>
-              <PrimaryButton leftIcon={<AddIcon />} title={"Add Employee"} />
             </Box>
           </Box>
           <Divider />
           <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
             <Box>
-            <Menu>
+              <Menu>
                 <MenuButton
                   as={Button}
                   leftIcon={<BsFilterRight fontSize={"16px"} />}
@@ -244,20 +310,19 @@ const Employees = () => {
                   Sort
                 </MenuButton>
                 <MenuList>
-                <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                  <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>
+            <HStack>
+              <SecondaryButton
+                onClick={() => navigate("/employees/pull-back-funds")}
+                leftIcon={<Image me={2} src={backFund} w={"17px"} />}
+                title={"Pull back funds"}
+              />
               <Menu>
                 <MenuButton
                   as={Button}
@@ -271,14 +336,74 @@ const Employees = () => {
                 >
                   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 w="350px" h="300px" overflowY="scroll">
+                  <VStack p={2} alignItems="flex-start">
+                    <HStack alignItems="center">
+                      <IoFilterSharp fontSize="small" />{" "}
+                      <Text as="span" fontSize="small" fontWeight={600}>
+                        Filter
+                      </Text>
+                    </HStack>
+                    <Box w="100%" borderBottom="1px solid #D8D8D8" />
+                    <Box w="100%">
+                      <Accordion allowMultiple border="0px solid white">
+                        {/* Department Section */}
+                        <AccordionItem>
+                          {({ isExpanded }) => (
+                            <>
+                              <AccordionButton>
+                                {isExpanded ? (
+                                  <ChevronDownIcon fontSize="24px" />
+                                ) : (
+                                  <ChevronRightIcon fontSize="24px" />
+                                )}
+                                <Box flex="1" textAlign="left" ml={2}>
+                                  Department
+                                </Box>
+                              </AccordionButton>
+                              <AccordionPanel pb={2}>
+                                <VStack align="start">
+                                  <Checkbox defaultChecked>Design</Checkbox>
+                                  <Checkbox>Finance</Checkbox>
+                                  <Checkbox defaultChecked>IT</Checkbox>
+                                  <Checkbox>Development</Checkbox>
+                                  <Checkbox>Sales</Checkbox>
+                                  <Checkbox>QA</Checkbox>
+                                </VStack>
+                              </AccordionPanel>
+                            </>
+                          )}
+                        </AccordionItem>
+
+                        {/* Status Section */}
+                        <AccordionItem>
+                          {({ isExpanded }) => (
+                            <>
+                              <AccordionButton>
+                                {isExpanded ? (
+                                  <ChevronDownIcon fontSize="24px" />
+                                ) : (
+                                  <ChevronRightIcon fontSize="24px" />
+                                )}
+                                <Box flex="1" textAlign="left" ml={4}>
+                                  Status
+                                </Box>
+                              </AccordionButton>
+                              <AccordionPanel pb={4}>
+                                <VStack align="start">
+                                  <Checkbox>Active</Checkbox>
+                                  <Checkbox>Inactive</Checkbox>
+                                </VStack>
+                              </AccordionPanel>
+                            </>
+                          )}
+                        </AccordionItem>
+                      </Accordion>
+                    </Box>
+                  </VStack>
                 </MenuList>
               </Menu>
-            </Box>
+            </HStack>
           </HStack>
         </VStack>
         <NormalTable
@@ -286,8 +411,22 @@ const Employees = () => {
           tableHeadRow={tableHeadRow}
           data={extractedArray}
           isLoading={isLoading}
+          selectedRadio={selectedRadio}
+          setSelectedRadio={setSelectedRadio}
+          showRadioButton={true}
         />
       </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/EmployeesTransactions.jsx

@@ -0,0 +1,274 @@
+import {
+    Box, HStack, Text, Tag,
+    Image,
+    VStack,
+    InputGroup,
+    InputLeftElement,
+    Input,
+    Menu,
+    MenuButton,
+    MenuList,
+    MenuItem,
+    Divider,
+    Button,
+    Flex,
+    Select,
+    Checkbox
+} 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';
+import { AiOutlineCalendar } from 'react-icons/ai';
+import { IoMdArrowDropdown } from 'react-icons/io';
+
+const EmployeesTransactions = () => {
+
+    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 = [
+        "Sr. No",
+        "Wallet Name",
+        "Email Address",
+        "Wallet",
+        "Amount",
+        "Date & time",
+    ];
+
+    // Dynamically map the reports to the table
+    const extractedArrayTransaction = recentTransaction.map((item, index) => ({
+        "Sr. No": (
+            <Text
+            as={"span"}
+            display={"flex"}
+            gap={2}
+            alignItems={"center"}
+            fontSize={"xs"}
+        >
+            {index + 1}
+        </Text>
+        ),
+        "Wallet Name": (
+            <HStack>
+                <Image
+                    borderRadius='full'
+                    boxSize='30px'
+                    src='https://bit.ly/dan-abramov'
+                    alt='Dan Abramov'
+                />
+                <VStack spacing={0} alignItems={"start"}>
+                    <Text mb={0} fontSize={"xs"}>
+                        Olivia Rhye
+                    </Text>
+                    <Text mb={0} fontSize={"10px"}>
+                        WD-887
+                    </Text>
+                </VStack>
+            </HStack>
+        ),
+        "Email Address": (
+            <Text mb={0} fontWeight={500} fontSize={"xs"}>
+                in***@wdimails.com
+            </Text>
+        ),
+        "Date & time": (
+            <Text mb={0} fontSize={"xs"}>
+                2 June 2024, 10 am
+            </Text>
+        ),
+        "Amount": (
+            <Text mb={0} fontWeight={500} fontSize={"xs"} color={"#00A438"}>
+                {item?.Amount || "N/A"}
+            </Text>
+        ),
+        "Wallet": (
+            <Text mb={0} fontSize={"xs"}>
+                Food
+            </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}>
+                    <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>
+
+
+                    <HStack>
+                        <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={<LuListFilter fontSize={"16px"} />}
+                                rightIcon={<ChevronDownIcon />}
+                                fontSize={"xs"}
+                                color={"gray.700"}
+                                variant="outline"
+                                size={"sm"}
+                                me={2}
+                            >
+                                Expense
+                            </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>
+                <Divider />
+                <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+                    <HStack>
+                        <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>
+                        <Flex align={'center'} gap={2}>
+                            <Text as={'span'} fontSize={'xs'}>Show</Text>
+                            <Select borderRadius={5} size={"sm"}>
+                                <option value='10'>10</option>
+                                <option value='30'>30</option>
+                                <option value='50'>50</option>
+                                <option value='80'>80</option>
+                            </Select>
+                            <Text as={'span'} fontSize={'xs'}>entries</Text>
+                        </Flex>
+                    </HStack>
+                    <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}
+                    showRadioButton={true}
+                />
+            </Box>
+        </Box>
+    );
+};
+
+export default EmployeesTransactions;

src/Pages/ManageHumanResource/EmployeesView.jsx

@@ -0,0 +1,558 @@
+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>
+        ),
+        '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}
+                                    mr={6}
+                                    _selected={{
+                                        color: "#5E0FCD",
+                                    }}>
+                                    Expense
+                                </Tab>
+                                <Tab
+                                    color={"#313039"}
+                                    fontSize={"sm"}
+                                    fontWeight={500}
+                                    mr={6}
+                                    _selected={{
+                                        color: "#5E0FCD",
+                                    }}>Benefit</Tab>
+                                <Tab
+                                    color={"#313039"}
+                                    fontSize={"sm"}
+                                    fontWeight={500}
+                                    mr={6}
+                                    _selected={{
+                                        color: "#5E0FCD",
+                                    }}>Gift & reward</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 reports `}
+                    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,202 @@
+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("");
+  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 = [
+    "Emp ID",
+    "Name",
+    "Email Address",
+    // "Mobile number",
+    "Wallet",
+    "Wallet balance",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = employees.map((item, index) => ({
+    id: item.id,
+    "Emp ID": (
+    //   <Checkbox colorScheme="purple" value="1">
+        <HStack spacing={1}>
+          <Text as={"span"} fontSize={"xs"}>
+            {item?.EmpID}
+          </Text>
+        </HStack>
+    ),
+    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}
+          selectedRadio={selectedRadio}
+          setSelectedRadio={setSelectedRadio}
+          showRadioButton={true}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default PullBackFundsBenefit;

src/Pages/ManageHumanResource/PullBackFundsExpense.jsx

@@ -0,0 +1,186 @@
+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("");
+    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 = [
+        "Emp ID",
+        "Name",
+        "Email Address",
+        // "Mobile number",
+        "Wallet",
+        "Wallet balance",
+    ];
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = employees.map((item, index) => ({
+        id: item.id,
+        "Emp ID": (
+            // <Checkbox colorScheme="purple" value="1">
+                <HStack spacing={1}>
+                    <Text
+                        as={"span"}
+                        fontSize={"xs"}
+                    >
+                        {item?.EmpID}
+                    </Text>
+                </HStack>
+        ),
+        "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}
+                    selectedRadio={selectedRadio}
+                    setSelectedRadio={setSelectedRadio}
+                    showRadioButton={true}
+                />
+            </Box>
+        </Box>
+    );
+};
+
+export default PullBackFundsExpense;

src/Pages/ManageHumanResource/PullBackFundsGifts.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 AccordianTable from "../../Components/DataTable/AccordianTable";
+
+
+
+const PullBackFundsGifts = () => {
+    const { employees } = 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 = [
+        "Emp ID",
+        "Name",
+        "Email Address",
+        // "Mobile number",
+        "Card number",
+        "Wallet balance",
+    ];
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = employees.map((item, index) => ({
+        id: item.id,
+        "Emp ID": (
+            // <Checkbox colorScheme="purple" value="1">
+                <HStack spacing={1}>
+                    <Text
+                        as={"span"}
+                        fontSize={"xs"}
+                    >
+                        {item?.EmpID}
+                    </Text>
+                </HStack>
+        ),
+        "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}
+                    selectedRadio={selectedRadio}
+                    setSelectedRadio={setSelectedRadio}
+                    showRadioButton={true}
+                />
+            </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/NoInternetScreen.jsx

@@ -12,10 +12,10 @@ const NoInternetScreen = () => {
     position={"relative"}
     gap={5}
     >
-        <Image src={noInternet} w={300} />
+        {/* <Image src={noInternet} w={300} /> */}
         {/* <Text color={'blue.800'} as={'span'} className='fw-bold'>No Internet !</Text> */}
 
-        <Text color={'gray.500'} fontSize={'sm'} fontWeight={'500'} position={'absolute'} bottom={0} left={'47%'}>Tanami v1.0</Text>
+        <Text color={'gray.500'} fontSize={'sm'} fontWeight={'500'} position={'absolute'} bottom={0} left={'47%'}>Optifii v1.0</Text>
     </Box>
 
   )

src/Pages/Notification/Notification.jsx

@@ -0,0 +1,157 @@
+import {
+    Box,
+    HStack,
+    Text,
+    Image,
+    VStack,
+    Icon,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { MdDeleteOutline, MdOutlineDelete } from "react-icons/md";
+import { IoIosCheckmark } from "react-icons/io";
+
+const Notification = () => {
+    // Define an array of notification objects with unique data
+    const [notifications, setNotifications] = useState([
+        {
+            id: 1,
+            avatar: 'https://bit.ly/dan-abramov',
+            sender: 'Admin',
+            time: '1 Min ago',
+            message: 'Lorem ipsum dolor sit amet, consectetur',
+        },
+        {
+            id: 2,
+            avatar: 'https://bit.ly/code-beast',
+            sender: 'Support',
+            time: '5 Min ago',
+            message: 'Your ticket has been updated.',
+        },
+        {
+            id: 3,
+            avatar: 'https://bit.ly/ryan-florence',
+            sender: 'System',
+            time: '10 Min ago',
+            message: 'System maintenance scheduled for tonight.',
+        },
+        {
+            id: 4,
+            avatar: 'https://bit.ly/kent-c-dodds',
+            sender: 'John Doe',
+            time: '20 Min ago',
+            message: 'Your profile has been viewed 10 times.',
+        },
+        {
+            id: 5,
+            avatar: 'https://bit.ly/sage-adebayo',
+            sender: 'Jane Smith',
+            time: '30 Min ago',
+            message: 'New comment on your post.',
+        },
+    ]);
+
+    // Handler to delete a notification
+    const handleDelete = (id) => {
+        setNotifications(notifications.filter(notification => notification.id !== id));
+    };
+
+    // Handler to delete all notifications
+    const handleDeleteAll = () => {
+        setNotifications([]);
+    };
+
+    return (
+        <Box h="100%" p={4} {...OPACITY_ON_LOAD} overflowY="auto">
+            <HStack alignItems={"start"} justifyContent={"space-between"}>
+                <MiniHeader
+                    title="Notification"
+                />
+                <HStack>
+                    <HStack
+                        as={"button"}
+                        spacing={0}
+                        border={"1px solid #D2D2D2"}
+                        bg={"#fff"}
+                        px={2}
+                        py={1}
+                        rounded={"md"}
+                        color={"#1C1C1C"}
+                    >
+                        <Icon as={IoIosCheckmark} />
+                        <Text mb={0} fontSize={"xs"} fontWeight={500}>Mark as read</Text>
+                    </HStack>
+                    <HStack
+                        as={"button"}
+                        spacing={0}
+                        border={"1px solid #EE1B24"}
+                        bg={"#fff"}
+                        px={2}
+                        py={1}
+                        rounded={"md"}
+                        color={"#EE1B24"}
+                        onClick={handleDeleteAll}
+                    >
+                        <Icon as={MdDeleteOutline} boxSize={3} />
+                        <Text mb={0} ms={1} fontSize={"xs"} fontWeight={500}>Delete All</Text>
+                    </HStack>
+                </HStack>
+            </HStack>
+
+            <Box
+                bg="#fff"
+                p={4}
+                rounded="md"
+                boxShadow="md"
+                minH={"76vh"}
+            >
+                {/* Wrap all notifications inside a single VStack */}
+                <VStack spacing={4} align="stretch">
+                    {notifications.map((notification) => (
+                        <HStack
+                            key={notification.id}
+                            justifyContent="space-between"
+                            bg="#F3F7F9"
+                            p={2}
+                            rounded="sm"
+                            boxShadow="md"
+                        >
+                            <HStack spacing={2}>
+                                <Box bg="#d7d3fb" p={1} rounded="full">
+                                    <Image
+                                        borderRadius="full"
+                                        boxSize="30px"
+                                        src={notification.avatar}
+                                        alt={notification.sender}
+                                    />
+                                </Box>
+                                <Box>
+                                    <Box mb={0}>
+                                        <Text as="span" fontSize="sm" fontWeight={600} mb={0}>
+                                            {notification.sender}
+                                        </Text>
+                                        <Text as="span" color="#A0A0A0" fontSize="xs" ms={2} fontWeight={500} mb={0}>
+                                            {notification.time}
+                                        </Text>
+                                    </Box>
+                                    <Text color="#A0A0A0" fontSize="xs" mb={0}>
+                                        {notification.message}
+                                    </Text>
+                                </Box>
+                            </HStack>
+                            <Box
+                                onClick={() => handleDelete(notification.id)}
+                                cursor="pointer"
+                            >
+                                <MdOutlineDelete color="#686868" size={16} />
+                            </Box>
+                        </HStack>
+                    ))}
+                </VStack>
+            </Box>
+        </Box>
+    );
+};
+
+export default Notification;

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

@@ -38,7 +38,7 @@ const validationSchema = Yup.object().shape({
   mobileNumber_corporate: Yup.string()
     .matches(/^\d{10}$/, "Phone number must be 10 digits")
     .required("Phone number is required"),
-    logo_path_file_name:Yup.mixed().required('Company logo is required'),
+  logo_path_file_name: Yup.mixed().required('Company logo is required'),
 });
 
 const OnboardingAboutCompany = ({
@@ -85,15 +85,12 @@ const OnboardingAboutCompany = ({
   };
 
   const onSubmit = async (data) => {
-        setCorpData({ ...corpData, ...data });
+    setCorpData({ ...corpData, ...data });
     handleNext();
     // Handle your submit logic here
   };
 
 
-
-
-
   const handleFileUpload = async (file, setPreview) => {
     setIsLoading(true)
     console.log('File uploaded:', file);
@@ -103,23 +100,23 @@ const OnboardingAboutCompany = ({
     const code = localStorage?.getItem("codeCorporate");
     try {
       const res = await sendFile({ data: formData, code }); // Upload file to server
-        console.log(res);
+      console.log(res);
       if (res?.data?.data) {
         // Assuming res.data.data contains the file URL or some ID
-        setCorpData({ ...corpData, logo_path_file_name:res?.data?.data });
+        setCorpData({ ...corpData, logo_path_file_name: res?.data?.data });
         setValue("logo_path_file_name", res?.data?.data);
-        console.log(errors); 
+        console.log(errors);
         setPreview(res?.data?.data)
         toast({
           render: () => <ToastBox message={res?.data?.message} />,
         });
         setIsLoading(false);
-      } else if (res?.error?.data?.message){
+      } else if (res?.error?.data?.message) {
         toast({
           render: () => <ToastBox status={'error'} message={res?.error?.data?.message} />,
         });
-        
-      } else if(res?.error){
+
+      } else if (res?.error) {
         toast({
           render: () => <ToastBox status={'error'} message={"Somthing went wrong"} />,
         });
@@ -175,9 +172,9 @@ const OnboardingAboutCompany = ({
 
         {/* Industry Select Field */}
         <FormControl isRequired mb={3}>
-          <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+          <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
             Industry
-          </Text>
+          </FormLabel>
           <InputGroup>
             <Select
               placeholder="Select industry"
@@ -228,156 +225,55 @@ const OnboardingAboutCompany = ({
           </FormErrorMessage>
         </FormControl>
 
-        {/* Upload Company Logo Field */}
-        {/* <Box mb={3}>
-          <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
-            Upload Company Logo
+        <FileUploader
+          label="Upload Company Logo"
+          maxFileSize={3 * 1024 * 1024}  // Max 3MB size
+          onFileUpload={handleFileUpload}
+
+        > {errors.logo_path_file_name?.message && (
+          <Text color="red" fontWeight={500} fontSize="xs">
+            {errors.logo_path_file_name?.message}
           </Text>
-          <Box
-            my={2}
-            position="relative"
-            onClick={() =>
-              document.getElementById("company-logo-file-input").click()
-            }
+        )}
+
+        </FileUploader>
+
+        <HStack mt={6}>
+          <IconButton
+            aria-label="Back"
+            icon={<ArrowBackIcon />}
+            variant="outline"
+            size="sm"
+            px={8}
+            _hover={{ opacity: 0.8 }}
+            color={"#d0b8ef"}
+            border={"1px solid #d0b8ef"}
+            isDisabled={activeStep === 0}
+            onClick={() => setActiveStep(activeStep - 1)}
+          />
+
+          <Button
+            bg={"#6311CB"}
+            color={"#fff"}
+            fontSize={"xs"}
+            fontWeight={500}
+            size="sm"
+            _hover={{ opacity: 0.8 }}
+            rightIcon={<ArrowForwardIcon />}
+            w={"100%"}
+            type="submit"
+          // isLoading={isLoading}
           >
-            <VStack
-              border={"1px dashed #D0D5DD"}
-              boxShadow={"md"}
-              borderRadius={"md"}
-              bg={"#faf8fd"}
-              p={4}
-              h={"28"}
-              justifyContent={"center"}
-              cursor="pointer"
-            >
-              <SlCloudUpload color={"#191D23"} size={30} />
-              <Text
-                color={"#191D23"}
-                fontWeight={"500"}
-                fontSize={"sm"}
-                mt={"2"}
-                mb={0}
-              >
-                Drag and drop files here or{" "}
-                <Text as="span" textDecoration="underline">
-                  Choose file
-                </Text>
-              </Text>
-            </VStack>
-            <input
-              type="file"
-              id="company-logo-file-input"
-              style={{ display: "none" }} // Hide the file input
-              onChange={(e) => {
-                handleFileChange(e); // Handle file input
-              }}
-            />
+            {activeStep === steps.length - 1 ? "Next step" : "Next step"}
+          </Button>
+        </HStack>
 
-            {fileName && (
-              <Text fontSize="sm" mt={2}>
-                Uploaded file: {fileName}
-              </Text>
-            )}
-          </Box>
-
-          {errors.logo_path_file_name && (
-            <Text color="red" fontWeight={500} fontSize="xs">
-              {errors.logo_path_file_name.message}
-            </Text>
-          )}
-
-          <HStack justifyContent={"space-between"}>
-            <Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
-              Supported formats- jpg, png, svg
-            </Text>
-            <Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
-              Maximum size - 20MB
-            </Text>
-          </HStack>
-
-          <HStack mt={6}>
-            <IconButton
-              aria-label="Back"
-              icon={<ArrowBackIcon />}
-              variant="outline"
-              size="sm"
-              px={8}
-              _hover={{ opacity: 0.8 }}
-              color={"#d0b8ef"}
-              border={"1px solid #d0b8ef"}
-              isDisabled={activeStep === 0}
-              onClick={() => setActiveStep(activeStep - 1)}
-            />
-
-            <Button
-              bg={"#6311CB"}
-              color={"#fff"}
-              fontSize={"xs"}
-              fontWeight={500}
-              size="sm"
-              _hover={{ opacity: 0.8 }}
-              rightIcon={<ArrowForwardIcon />}
-              w={"100%"}
-              type="submit"
-              isLoading={isLoading}
-            >
-              {activeStep === steps.length - 1 ? "Next step" : "Next step"}
-            </Button>
-          </HStack>
-        </Box> */}
-
-
-
-
-      <FileUploader 
-        label="Upload Company Logo"
-        maxFileSize={3 * 1024 * 1024}  // Max 3MB size
-        onFileUpload={handleFileUpload}
-
-      > {errors.logo_path_file_name?.message && (
-        <Text color="red" fontWeight={500} fontSize="xs">
-          {errors.logo_path_file_name?.message}
-        </Text>
-      )}
-
-      </FileUploader>
-
-              <HStack mt={6}>
-            <IconButton
-              aria-label="Back"
-              icon={<ArrowBackIcon />}
-              variant="outline"
-              size="sm"
-              px={8}
-              _hover={{ opacity: 0.8 }}
-              color={"#d0b8ef"}
-              border={"1px solid #d0b8ef"}
-              isDisabled={activeStep === 0}
-              onClick={() => setActiveStep(activeStep - 1)}
-            />
-
-            <Button
-              bg={"#6311CB"}
-              color={"#fff"}
-              fontSize={"xs"}
-              fontWeight={500}
-              size="sm"
-              _hover={{ opacity: 0.8 }}
-              rightIcon={<ArrowForwardIcon />}
-              w={"100%"}
-              type="submit"
-              // isLoading={isLoading}
-            >
-              {activeStep === steps.length - 1 ? "Next step" : "Next step"}
-            </Button>
-          </HStack>
-        
 
       </Box>
 
-    {/* Display the loading spinner */}
-    {isLoading && (
-        <Box border={'1px solid #6310CB'} px={4} py={2} rounded={'md'} shadow={'md'} as="span" bg={'#fff'}  position={'fixed'} top={69} left={'40%'} display="flex" justifyContent="center" alignItems="center" >
+      {/* Display the loading spinner */}
+      {isLoading && (
+        <Box border={'1px solid #6310CB'} px={4} py={2} rounded={'md'} shadow={'md'} as="span" bg={'#fff'} position={'fixed'} top={69} left={'40%'} display="flex" justifyContent="center" alignItems="center" >
           <Text as={'span'} fontWeight={600} fontSize={'sm'}>Uploading please wait...</Text>
         </Box>
       )}

src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx

@@ -12,20 +12,20 @@ import ToastBox from '../../Components/ToastBox';
 
 // Yup validation schema
 const schema = yup.object().shape({
-    cin_number: yup
-        .string()
-        .required('CIN is required')
-        .matches(/^[A-Za-z0-9]{21}$/, 'CIN must be exactly 21 characters long'),
-    pancard_number: yup
-        .string()
-        .required('Company PAN is required')
-        .matches(/[A-Z]{5}[0-9]{4}[A-Z]{1}$/, 'Invalid PAN format'),
-    gst_number: yup
-        .string()
-        .required('GST number is required')
-        .matches(/\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}/, 'Invalid GST number format'),
-    gst_file_path_name: yup.mixed().required('GST certificate is required'),
-    pancard_file_path_name: yup.mixed().required('PAN card is required'),
+  cin_number: yup
+    .string()
+    .required('CIN is required')
+    .matches(/^[A-Za-z0-9]{21}$/, 'CIN must be exactly 21 characters long'),
+  pancard_number: yup
+    .string()
+    .required('Company PAN is required')
+    .matches(/[A-Z]{5}[0-9]{4}[A-Z]{1}$/, 'Invalid PAN format'),
+  gst_number: yup
+    .string()
+    .required('GST number is required')
+    .matches(/\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}/, 'Invalid GST number format'),
+  gst_file_path_name: yup.mixed().required('GST certificate is required'),
+  pancard_file_path_name: yup.mixed().required('PAN card is required'),
 });
 
 const OnboardingAddCompanyDetails = ({
@@ -36,21 +36,21 @@ const OnboardingAddCompanyDetails = ({
   steps,
   handleNext,
 }) => {
-    const { register, handleSubmit, setValue, formState: { errors } } = useForm({
-        resolver: yupResolver(schema),
-    });
+  const { register, handleSubmit, setValue, formState: { errors } } = useForm({
+    resolver: yupResolver(schema),
+  });
 
 
   const [fileName, setFileName] = useState("");
-  const [ sendFile ] = useSentFileMutation()
-  const [ isLoading, setIsLoading ] = useState()
+  const [sendFile] = useSentFileMutation()
+  const [isLoading, setIsLoading] = useState()
   const toast = useToast()
 
-    const onSubmit = (data) => {
-        console.log('Form Data:', data);
+  const onSubmit = (data) => {
+    console.log('Form Data:', data);
     setCorpData({ ...corpData, ...data });
     handleNext();
-    };
+  };
 
 
 
@@ -64,25 +64,25 @@ const OnboardingAddCompanyDetails = ({
       console.log(files);
 
       const formData = new FormData();
-    formData.append("document", files[0]); // Append file
+      formData.append("document", files[0]); // Append file
 
 
       const code = localStorage?.getItem("codeCorporate");
       try {
-        const res = await sendFile({data:formData, code}); // Upload file to server
-  
+        const res = await sendFile({ data: formData, code }); // Upload file to server
+
         if (res?.data?.data) {
-            console.log(res?.data?.data);
+          console.log(res?.data?.data);
           // Assuming res.data.data contains the file URL or some ID
           setValue("gst_file_path_name", res?.data?.data); // Set value with server response
-        //   setCorpData({ ...corpData, ...data });
+          //   setCorpData({ ...corpData, ...data });
           setIsLoading(false)
         }
       } catch (error) {
         console.error("File upload failed", error);
       }
-  
-      
+
+
 
       // setValue("logo_path_file_name", files); // Update react-hook-form state
     }
@@ -96,14 +96,14 @@ const OnboardingAddCompanyDetails = ({
       // Assuming only one file is allowed
       setFileName(files.name);
       const formData = new FormData();
-    formData.append("document", files[0]); // Append file
+      formData.append("document", files[0]); // Append file
       const code = localStorage?.getItem("codeCorporate");
       try {
-        const res = await sendFile({data:formData, code}); // Upload file to server
+        const res = await sendFile({ data: formData, code }); // Upload file to server
         if (res?.data?.data) {
           // Assuming res.data.data contains the file URL or some ID
           setValue("pancard_file_path_name", res?.data?.data); // Set value with server response
-        //   setCorpData({ ...corpData, ...data });
+          //   setCorpData({ ...corpData, ...data });
           setIsLoading(false)
         }
       } catch (error) {
@@ -124,23 +124,23 @@ const OnboardingAddCompanyDetails = ({
     const code = localStorage?.getItem("codeCorporate");
     try {
       const res = await sendFile({ data: formData, code }); // Upload file to server
-        console.log(res);
+      console.log(res);
       if (res?.data?.data) {
         // Assuming res.data.data contains the file URL or some ID
-        setCorpData({ ...corpData, gst_file_path_name:res?.data?.data });
+        setCorpData({ ...corpData, gst_file_path_name: res?.data?.data });
         setValue("gst_file_path_name", res?.data?.data);
-        console.log(errors); 
+        console.log(errors);
         setPreview(res?.data?.data)
         toast({
           render: () => <ToastBox message={res?.data?.message} />,
         });
         setIsLoading(false);
-      } else if (res?.error?.data?.message){
+      } else if (res?.error?.data?.message) {
         toast({
           render: () => <ToastBox status={'error'} message={res?.error?.data?.message} />,
         });
-        
-      } else if(res?.error){
+
+      } else if (res?.error) {
         toast({
           render: () => <ToastBox status={'error'} message={"Somthing went wrong"} />,
         });
@@ -163,23 +163,23 @@ const OnboardingAddCompanyDetails = ({
     const code = localStorage?.getItem("codeCorporate");
     try {
       const res = await sendFile({ data: formData, code }); // Upload file to server
-        console.log(res);
+      console.log(res);
       if (res?.data?.data) {
         // Assuming res.data.data contains the file URL or some ID
-        setCorpData({ ...corpData, pancard_file_path_name:res?.data?.data });
+        setCorpData({ ...corpData, pancard_file_path_name: res?.data?.data });
         setValue("pancard_file_path_name", res?.data?.data);
-        console.log(errors); 
+        console.log(errors);
         setPreview(res?.data?.data)
         toast({
           render: () => <ToastBox message={res?.data?.message} />,
         });
         setIsLoading(false);
-      } else if (res?.error?.data?.message){
+      } else if (res?.error?.data?.message) {
         toast({
           render: () => <ToastBox status={'error'} message={res?.error?.data?.message} />,
         });
-        
-      } else if(res?.error){
+
+      } else if (res?.error) {
         toast({
           render: () => <ToastBox status={'error'} message={"Image is too large"} />,
         });
@@ -197,66 +197,66 @@ const OnboardingAddCompanyDetails = ({
 
 
 
-    return (
+  return (
     <Box  {...OPACITY_ON_LOAD}>
-            <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
-                Add company details
-            </Text>
-            <Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
-                Lorem ipsum dolor sit amet, adipiscing elit.
-            </Text>
+      <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
+        Add company details
+      </Text>
+      <Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
+        Lorem ipsum dolor sit amet, adipiscing elit.
+      </Text>
 
-            <Box as="form" onSubmit={handleSubmit(onSubmit)}>
-                {/* CIN Field */}
-                <Box mb={3}>
-                    <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
-                        CIN
-                    </FormLabel>
-                    <Input
-                        type='text'
-                        border="1px solid #e2e8f0"
-                        borderRadius="md"
-                        fontSize={"sm"}
-                        fontWeight={500}
-                        {...register('cin_number')}
-                    />
-                    {errors.cin_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.cin_number.message}</Text>}
-                </Box>
+      <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+        {/* CIN Field */}
+        <Box mb={3}>
+          <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+            CIN
+          </FormLabel>
+          <Input
+            type='text'
+            border="1px solid #e2e8f0"
+            borderRadius="md"
+            fontSize={"sm"}
+            fontWeight={500}
+            {...register('cin_number')}
+          />
+          {errors.cin_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.cin_number.message}</Text>}
+        </Box>
 
-                {/* Company PAN Field */}
-                <Box mb={3}>
-                    <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
-                        Company PAN
-                    </Text>
-                    <Input
-                        type='text'
-                        border="1px solid #e2e8f0"
-                        borderRadius="md"
-                        fontSize={"sm"}
-                        fontWeight={500}
-                        {...register('pancard_number')}
-                    />
-                    {errors.pancard_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.pancard_number.message}</Text>}
-                </Box>
+        {/* Company PAN Field */}
+        <Box mb={3}>
+          <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+            Company PAN
+          </FormLabel>
+          <Input
+            type='text'
+            border="1px solid #e2e8f0"
+            borderRadius="md"
+            fontSize={"sm"}
+            fontWeight={500}
+            {...register('pancard_number')}
+          />
+          {errors.pancard_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.pancard_number.message}</Text>}
+        </Box>
 
-                {/* Company GST Number */}
-                <Box mb={3}>
-                    <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
-                        Company GST number
-                    </Text>
-                    <Input
-                        type='text'
-                        border="1px solid #e2e8f0"
-                        borderRadius="md"
-                        fontSize={"sm"}
-                        fontWeight={500}
-                        {...register('gst_number')}
-                    />
-                    {errors.gst_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.gst_number.message}</Text>}
-                </Box>
+        {/* Company GST Number */}
+        <Box mb={3}>
+          <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+            Company GST number
+          </FormLabel>
+          <Input
+            type='text'
+            border="1px solid #e2e8f0"
+            borderRadius="md"
+            fontSize={"sm"}
+            fontWeight={500}
+            {...register('gst_number')}
+          />
+          {errors.gst_number && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.gst_number.message}</Text>}
+        </Box>
 
-                {/* Upload GST Certificate */}
-                {/* <Box mb={3}>
+        {/* Upload GST Certificate */}
+        {/* <Box mb={3}>
                     <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
                         Upload GST Certificate
                     </Text>
@@ -313,37 +313,37 @@ const OnboardingAddCompanyDetails = ({
 
 
 
-      <FileUploader
-        label="Upload GST Certificate"
-        maxFileSize={3 * 1024 * 1024}  // Max 3MB size
-        onFileUpload={handleFileUploadGst}
+        <FileUploader
+          label="Upload GST Certificate"
+          maxFileSize={3 * 1024 * 1024}  // Max 3MB size
+          onFileUpload={handleFileUploadGst}
 
-      > {errors.gst_file_path_name?.message && (
-        <Text color="red" fontWeight={500} fontSize="xs">
-          {errors.gst_file_path_name?.message}
-        </Text>
-      )}
+        > {errors.gst_file_path_name?.message && (
+          <Text color="red" fontWeight={500} fontSize="xs">
+            {errors.gst_file_path_name?.message}
+          </Text>
+        )}
 
-      </FileUploader>
+        </FileUploader>
 
 
 
-      <FileUploader
-        label="Upload PAN card"
-        maxFileSize={3 * 1024 * 1024}  // Max 3MB size
-        onFileUpload={handleFileUploadPan}
+        <FileUploader
+          label="Upload PAN card"
+          maxFileSize={3 * 1024 * 1024}  // Max 3MB size
+          onFileUpload={handleFileUploadPan}
 
-      > {errors.pancard_file_path_name?.message && (
-        <Text color="red" fontWeight={500} fontSize="xs">
-          {errors.pancard_file_path_name?.message}
-        </Text>
-      )}
+        > {errors.pancard_file_path_name?.message && (
+          <Text color="red" fontWeight={500} fontSize="xs">
+            {errors.pancard_file_path_name?.message}
+          </Text>
+        )}
 
-      </FileUploader>
+        </FileUploader>
 
 
-                {/* Upload PAN Card */}
-                {/* <Box mb={3}>
+        {/* Upload PAN Card */}
+        {/* <Box mb={3}>
                     <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
                         Upload PAN Card
                     </Text>
@@ -398,8 +398,8 @@ const OnboardingAddCompanyDetails = ({
                     </HStack>
                 </Box> */}
 
-                {/* Submit Button */}
-                {/* <Box mt={6}>
+        {/* Submit Button */}
+        {/* <Box mt={6}>
                     <Text
                         as="button"
                         bg={'#6311CB'}
@@ -416,44 +416,44 @@ const OnboardingAddCompanyDetails = ({
 
 
 
-          <HStack mt={6}>
-            <IconButton
-              aria-label="Back"
-              icon={<ArrowBackIcon />}
-              variant="outline"
-              size="sm"
-              px={8}
-              _hover={{ opacity: 0.8 }}
-              color={"#d0b8ef"}
-              border={"1px solid #d0b8ef"}
-              isDisabled={activeStep === 0}
-              onClick={() => setActiveStep(activeStep - 1)}
-            />
+        <HStack mt={6}>
+          <IconButton
+            aria-label="Back"
+            icon={<ArrowBackIcon />}
+            variant="outline"
+            size="sm"
+            px={8}
+            _hover={{ opacity: 0.8 }}
+            color={"#d0b8ef"}
+            border={"1px solid #d0b8ef"}
+            isDisabled={activeStep === 0}
+            onClick={() => setActiveStep(activeStep - 1)}
+          />
 
-            <Button
-              bg={"#6311CB"}
-              color={"#fff"}
-              fontSize={"xs"}
-              fontWeight={500}
-              size="sm"
-              _hover={{ opacity: 0.8 }}
-              rightIcon={<ArrowForwardIcon />}
-              w={"100%"}
-              type="submit"
-            >
-              {activeStep === steps.length - 1 ? "Next step" : "Next step"}
-            </Button>
-          </HStack>
-            </Box>
+          <Button
+            bg={"#6311CB"}
+            color={"#fff"}
+            fontSize={"xs"}
+            fontWeight={500}
+            size="sm"
+            _hover={{ opacity: 0.8 }}
+            rightIcon={<ArrowForwardIcon />}
+            w={"100%"}
+            type="submit"
+          >
+            {activeStep === steps.length - 1 ? "Next step" : "Next step"}
+          </Button>
+        </HStack>
+      </Box>
 
-         {/* Display the loading spinner */}
-         {isLoading && (
-        <Box border={'1px solid #6310CB'} px={4} py={2} rounded={'md'} shadow={'md'} as="span" bg={'#fff'}  position={'fixed'} top={69} left={'40%'} display="flex" justifyContent="center" alignItems="center" >
+      {/* Display the loading spinner */}
+      {isLoading && (
+        <Box border={'1px solid #6310CB'} px={4} py={2} rounded={'md'} shadow={'md'} as="span" bg={'#fff'} position={'fixed'} top={69} left={'40%'} display="flex" justifyContent="center" alignItems="center" >
           <Text as={'span'} fontWeight={600} fontSize={'sm'}>Uploading please wait...</Text>
         </Box>
       )}
-        </Box>
-    );
+    </Box>
+  );
 };
 
 export default OnboardingAddCompanyDetails;

src/Pages/Onboarding/OnboardingDirectorDetails.jsx

@@ -147,7 +147,7 @@ const OnboardingDirectorDetails = ({
   };
 
   return (
-    <Box>
+    <Box maxH="calc(82vh - 0px)">
       <Text color={"#49475A"} fontWeight={500} fontSize={"sm"} mb={1}>
         Add director details
       </Text>

src/Pages/Onboarding/OnboardingFrame.jsx

@@ -1,69 +1,115 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import {
-    Box, Text, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps,
-    StepIcon, StepTitle, Divider, Button, HStack, IconButton, Flex,
-    useDisclosure
-} from '@chakra-ui/react';
-import Header from './Header';
-import onboarding_bg from "../../assets/onboarding_bg.svg";
-import { ArrowBackIcon, ArrowForwardIcon, CheckIcon, Icon } from '@chakra-ui/icons';
-import { FaUser, FaBuilding, FaClipboard, FaUserTie, FaBoxOpen } from 'react-icons/fa';
-import OnboardingYourDetails from './OnboardingYourDetails';
-import OnboardingAboutCompany from './OnboardingAboutCompany';
-import OnboardingAddCompanyDetails from './OnboardingAddCompanyDetails';
-import OnboardingDirectorDetails from './OnboardingDirectorDetails';
-import OnboardingSelectPackage from './OnboardingSelectPackage';
-import OnboardingSelectPackageModal from './OnboardingSelectPackageModal'; // Import your modal component
-import { OPACITY_ON_LOAD } from '../../Layout/animations';
-import { useSearchParams } from 'react-router-dom';
-
+  Box,
+  Text,
+  Stepper,
+  Step,
+  StepIndicator,
+  StepStatus,
+  StepSeparator,
+  useSteps,
+  StepTitle,
+  Divider,
+  Button,
+  HStack,
+  IconButton,
+  Flex,
+  useDisclosure,
+  Image,
+} from "@chakra-ui/react";
+import Header from "./Header";
+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";
+import OnboardingAboutCompany from "./OnboardingAboutCompany";
+import OnboardingAddCompanyDetails from "./OnboardingAddCompanyDetails";
+import OnboardingDirectorDetails from "./OnboardingDirectorDetails";
+import OnboardingSelectPackage from "./OnboardingSelectPackage";
+import OnboardingSelectPackageModal from "./OnboardingSelectPackageModal"; // Import your modal component
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useSearchParams } from "react-router-dom";
+import company from "../../assets/company.png";
+import pfp from "../../assets/pfp.png";
 
 // Retrieve the active step from localStorage or set it to 0 if it doesn't exist
 // const initialStep = parseInt(localStorage.getItem("activeStep")) || 0;
 
 const OnboardingFrame = () => {
-
   // Create a searchParams instance
   const [searchParams] = useSearchParams();
-  const [ corpData, setCorpData ] = useState({})
+  const [corpData, setCorpData] = useState({});
 
   useEffect(() => {
     // Extract specific parameters
     if (searchParams) {
-        const codeCorporate = searchParams.get("code_corporate");
-        const codeCorporateId = searchParams.get("code_corporateId");
-        localStorage?.setItem('codeCorporate', codeCorporate)
-        localStorage?.setItem('codeCorporateId', codeCorporateId)        
+      const codeCorporate = searchParams.get("code_corporate");
+      const codeCorporateId = searchParams.get("code_corporateId");
+      localStorage?.setItem("codeCorporate", codeCorporate);
+      localStorage?.setItem("codeCorporateId", codeCorporateId);
     }
-  }, [searchParams])
+  }, [searchParams]);
 
   useEffect(() => {
     localStorage.setItem("corpData", JSON.stringify(corpData));
     console.log(corpData);
-  }, [corpData])
+  }, [corpData]);
 
-     // Modal state and disclosure hook
-     const { isOpen, onOpen, onClose } = useDisclosure();
+  // Modal state and disclosure hook
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const steps = [
+    {
+      title: "Your details",
+      description: "Lorem ipsum dolor sit amet dolor",
+      icon: FaUser,
+      img: company,
+    },
+    {
+      title: "About Company",
+      description: "Lorem ipsum dolor sit amet dolor",
+      icon: FaBuilding,
+      img: company,
+    },
+    {
+      title: "Company details",
+      description: "Lorem ipsum dolor sit amet dolor",
+      icon: FaClipboard,
+      img: company,
+    },
+    {
+      title: "Director details",
+      description: "Lorem ipsum dolor sit amet dolor",
+      icon: FaUserTie,
+      img: pfp,
+    },
+    {
+      title: "Select package",
+      description: "Lorem ipsum dolor sit amet dolor",
+      icon: FaBoxOpen,
+      img: company,
+    },
+  ];
 
-       
-    const steps = [
-        { title: 'Your details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUser },
-        { title: 'About Company', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBuilding },
-        { title: 'Company details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaClipboard },
-        { title: 'Director details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUserTie },
-        { title: 'Select package', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBoxOpen },
-    ];
-
-
-// Stepper configuration
-const { activeStep, setActiveStep } = useSteps({
+  // Stepper configuration
+  const { activeStep, setActiveStep } = useSteps({
     index: 0, // Initialize the active step from localStorage or 0
     count: steps.length,
   });
 
-// Function to handle the "Next" button click
-const handleNext = () => {
+  // Function to handle the "Next" button click
+  const handleNext = () => {
     if (activeStep === steps.length - 1) {
       // If it's the last step, open the modal
       onOpen();
@@ -71,146 +117,216 @@ const handleNext = () => {
       // Otherwise, go to the next step
       const nextStep = activeStep + 1;
       setActiveStep(nextStep);
-  
+
       // Store the new active step in localStorage
       localStorage.setItem("activeStep", nextStep);
     }
   };
 
-  
+  // Array of components for each step
+  const stepComponents = [
+    <OnboardingYourDetails
+      corpData={corpData}
+      setCorpData={setCorpData}
+      setActiveStep={setActiveStep}
+      activeStep={activeStep}
+      steps={steps}
+      handleNext={handleNext}
+    />,
+    <OnboardingAboutCompany
+      corpData={corpData}
+      setCorpData={setCorpData}
+      setActiveStep={setActiveStep}
+      activeStep={activeStep}
+      steps={steps}
+      handleNext={handleNext}
+    />,
+    <OnboardingAddCompanyDetails
+      corpData={corpData}
+      setCorpData={setCorpData}
+      setActiveStep={setActiveStep}
+      activeStep={activeStep}
+      steps={steps}
+      handleNext={handleNext}
+    />,
+    <OnboardingDirectorDetails
+      corpData={corpData}
+      setCorpData={setCorpData}
+      setActiveStep={setActiveStep}
+      activeStep={activeStep}
+      steps={steps}
+      handleNext={handleNext}
+    />,
+    <OnboardingSelectPackage
+      corpData={corpData}
+      setCorpData={setCorpData}
+      setActiveStep={setActiveStep}
+      activeStep={activeStep}
+      steps={steps}
+      handleNext={handleNext}
+    />,
+  ];
 
-    // Array of components for each step
-    const stepComponents = [
-        <OnboardingYourDetails corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext}  />,
-        <OnboardingAboutCompany corpData={corpData}  setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext}  />,
-        <OnboardingAddCompanyDetails corpData={corpData}  setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext}  />,
-        <OnboardingDirectorDetails corpData={corpData}  setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext}  />,
-        <OnboardingSelectPackage corpData={corpData}  setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext}  />
-    ];
-
- 
-
-    return (
-        <Box>
-            {/* Onboarding content */}
-            <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
-                <Header />
-                <Box
-                    w={'100%'}
-                    minH={'92vh'}
-                    bgImage={`url(${onboarding_bg})`}
-                    bgSize={'cover'}
-                    bgPosition={'center'}
-                    position={'relative'}
-                    px={6}
-                    display={"flex"}
-                    gap={"6"}
-                    alignItems={"start"}
-                    _before={{
-                        content: '""',
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        height: '100%',
-                        bg: 'rgba(0, 0, 0, 0.3)',
-                        zIndex: 1,
-                    }}
+  return (
+    <Box>
+      {/* Onboarding content */}
+      <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+        <Header />
+        <Box
+          w={"100%"}
+          minH="calc(100vh - 62px)"
+          bgImage={`url(${onboarding_bg})`}
+          bgSize={"cover"}
+          bgPosition={"center"}
+          position={"relative"}
+          px={6}
+          display={"flex"}
+          gap={"6"}
+          alignItems={"start"}
+          _before={{
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            bg: "rgba(0, 0, 0, 0.3)",
+            zIndex: 1,
+          }}
+        >
+          {/* Stepper Box */}
+          <Box
+            w={"100%"}
+            my={5}
+            boxShadow={"md"}
+            maxW={"350px"}
+            zIndex={2}
+            bg={"#fff"}
+            py={6}
+            px={4}
+            borderRadius={"md"}
+            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"}>
+                Lorem ipsum dolor sit amet, adipiscing elit.
+              </Text>
+              <Divider />
+              <Box>
+                <Stepper
+                  index={activeStep}
+                  orientation="vertical"
+                  h="400"
+                  gap="0"
+                  my={"5"}
+                  sx={{ "--stepper-accent-color": "#6311CB" }}
                 >
-                    {/* Stepper Box */}
-                    <Box
-                        w={'100%'}
-                        my={5}
-                        boxShadow={'md'}
-                        maxW={"350px"}
-                        zIndex={2}
-                        bg={'#fff'}
-                        py={6}
-                        px={4}
-                        borderRadius={'md'}
-                        minH={"82vh"}
-                    >
-                        <Box>
-                            <Text color={'#49475A'} fontWeight={500} fontSize={'sm'}>
-                                Lorem ipsum dolor sit amet, adipiscing elit.
-                            </Text>
-                            <Divider />
-                            <Box>
-                                <Stepper
-                                    index={activeStep}
-                                    orientation="vertical"
-                                    h="400"
-                                    gap="0"
-                                    sx={{ '--stepper-accent-color': '#6311CB' }}
-                                >
-                                    {steps.map((step, index) => (
-                                        <Step key={index}>
-                                            <StepIndicator>
-                                                <StepStatus
-                                                    complete={<CheckIcon boxSize="16px" />}
-                                                    incomplete={<Icon as={step.icon} color={"purple.400"} boxSize="16px" />}
-                                                    active={<Icon as={step.icon} color={"purple.500"} boxSize="16px" />}
-                                                />
-                                            </StepIndicator>
-                                            <Box flexShrink="0" ml={4}>
-                                                <StepTitle
-                                                    fontWeight={activeStep === index ? "600" : "500"}
-                                                    fontSize={activeStep === index ? "md" : "sm"}
-                                                    mb={1}
-                                                >
-                                                    {step.title}
-                                                </StepTitle>
-                                                <Text fontSize="xs" color="gray.500">
-                                                    {step.description}
-                                                </Text>
-                                            </Box>
-                                            <StepSeparator
-                                                borderColor={activeStep > index ? "purple.500" : "purple.300"}
-                                                borderWidth={1}
-                                            />
-                                        </Step>
-                                    ))}
-                                </Stepper>
-                            </Box>
-                        </Box>
-                    </Box>
+                  {steps.map((step, index) => (
+                    <Step key={index}>
+                      <StepIndicator>
+                        <StepStatus
+                          complete={<CheckIcon boxSize="16px" />}
+                          incomplete={
+                            <Image
+                              src={step.img}
+                              color={"purple.400"}
+                              boxSize="16px"
+                            />
+                          }
+                          active={
+                            <Icon
+                              as={step.icon}
+                              color={"purple.500"}
+                              boxSize="16px"
+                            />
+                          }
+                        />
+                      </StepIndicator>
+                      <Box flexShrink="0" ml={4}>
+                        <StepTitle
+                          fontWeight={activeStep === index ? "600" : "500"}
+                          fontSize={activeStep === index ? "md" : "sm"}
+                          mb={1}
+                        >
+                          {step.title}
+                        </StepTitle>
+                        <Text fontSize="xs" color="gray.500">
+                          {step.description}
+                        </Text>
+                      </Box>
+                      <StepSeparator
+                        borderColor={
+                          activeStep > index ? "purple.500" : "purple.300"
+                        }
+                        borderWidth={1}
+                      />
+                    </Step>
+                  ))}
+                </Stepper>
+              </Box>
+            </Box>
+          </Box>
 
-                    {/* Content Box */}
-                    <Box
-                        w={'100%'}
-                        bg={'#fff'}
-                        p={6}
-                        borderRadius={'md'}
-                        my={5}
-                        boxShadow={'md'}
-                        zIndex={2}
-                        minH={"82vh"}
-                    >
-                        <HStack  justifyContent={"end"}>
+          {/* Content Box */}
+          <Box
+            w={"100%"}
+            bg={"#fff"}
+            p={6}
+            borderRadius={"md"}
+            my={5}
+            boxShadow={"md"}
+            zIndex={2}
+            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"}>
+              {/* Step Indicator (Horizontal) */}
+              <Flex justify="center" align="center" gap={2} mt={4}>
+                {steps.map((_, index) => (
+                  <Box
+                    key={index}
+                    h="4px"
+                    w="20px"
+                    bg={index <= activeStep ? "#3725EA" : "#e9e7fd"}
+                    borderRadius="full"
+                  />
+                ))}
+              </Flex>
+            </HStack>
 
-                            {/* Step Indicator (Horizontal) */}
-                            <Flex justify="center" align="center" gap={2} mt={4}>
-                                {steps.map((_, index) => (
-                                    <Box
-                                        key={index}
-                                        h="4px"
-                                        w="20px"
-                                        bg={index <= activeStep ? "#3725EA" : "#e9e7fd"}
-                                        borderRadius="full"
-                                    />
-                                ))}
-                            </Flex>
-                        </HStack>
+            <Box>
+              <Box w={{ base: "70%", lg: "92%" }} mx={"auto"}>
+                {/* Render the current step component */}
+                {stepComponents[activeStep]}
 
-                        <Box>
-                            <Box
-                                w={{ base: "70%", lg: "92%" }}
-                                mx={"auto"}
-                            >
-                                {/* Render the current step component */}
-                                {stepComponents[activeStep]}
-
-                                {/* <HStack mt={6}>
+                {/* <HStack mt={6}>
                                     <IconButton
                                         aria-label="Back"
                                         icon={<ArrowBackIcon />}
@@ -238,16 +354,16 @@ const handleNext = () => {
                                         {activeStep === steps.length - 1 ? 'Next step' : 'Next step'}
                                     </Button>
                                 </HStack> */}
-                            </Box>
-                        </Box>
-                    </Box>
-                </Box>
+              </Box>
             </Box>
-
-            {/* Modal for final step */}
-            <OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
+          </Box>
         </Box>
-    );
+      </Box>
+
+      {/* Modal for final step */}
+      <OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
+    </Box>
+  );
 };
 
 export default OnboardingFrame;

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

@@ -0,0 +1,452 @@
+import {
+    Avatar,
+    Box,
+    Button,
+    Checkbox,
+    Divider,
+    Flex,
+    HStack,
+    Icon,
+    Image,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    Radio,
+    Select,
+    Tag,
+    TagLabel,
+    Text,
+    VStack,
+  } from "@chakra-ui/react";
+  import {
+    Tabs,
+    TabList,
+    Tab,
+    TabIndicator,
+    TabPanels,
+    TabPanel,
+  } 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 womenpfp from "../../assets/womenpfp1.png";
+  import {
+    AddIcon,
+    CalendarIcon,
+    ChevronDownIcon,
+    EmailIcon,
+    SearchIcon,
+    ViewIcon,
+  } from "@chakra-ui/icons";
+  import {
+    MdFilterList,
+    MdNotificationsNone,
+    MdOutlineHeadsetMic,
+  } from "react-icons/md";
+  import { OPACITY_ON_LOAD } from "../../Layout/animations";
+  import { Link, NavLink, useNavigate } from "react-router-dom";
+  import { FaArrowUpFromBracket } from "react-icons/fa6";
+  import { LuListFilter } from "react-icons/lu";
+  import { BsFilterRight } from "react-icons/bs";
+  import pdfIcon from "../../assets/pdfIcon.svg";
+  import ExcelIcon from "../../assets/ExcelIcon.svg";
+  
+  const AdvanceExpensePending = () => {
+    const { AdvanceExpenseRequest } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [users, setusers] = useState(50);
+    const navigate = useNavigate();
+  
+    useEffect(() => {
+      // Set isLoading to true
+      setIsLoading(true);
+  
+      // Simulate a 3-second delay
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 500);
+  
+      return () => clearTimeout(timer);
+    }, []);
+  
+    // ===============================[ Table Header ]
+  
+    const tableHeadRow = [
+      "Sr. no",
+      "Report name",
+      "Report by",
+      "Report amount",
+      "Date & time",
+      "Approver",
+      "Disburser",
+      "Action",
+    ];
+  
+    const pendingTable = AdvanceExpenseRequest.map((item, index) => ({
+      "Sr. no": (
+        <Checkbox colorScheme="purple">
+          <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?.id}
+          </Text>
+        </Checkbox>
+      ),
+      "Report name": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+          color="#3725EA"
+        >
+          {item?.ReportName}
+        </Text>
+      ),
+      "Report by": (
+        <Flex align={"center"} gap={2}>
+          <Avatar
+            size={"sm"}
+            name={item?.ReportBy?.profName}
+            src={item?.ReportBy?.profImage}
+          />
+          <Text as={"span"}>{item?.ReportBy?.profName}</Text>
+        </Flex>
+      ),
+      "Report amount": item?.ReportAmount,
+      "Date & time": item?.DateTime,
+      Approver: item?.Approver,
+      Disburser: item?.Disburser,
+      Action: (
+        <Text
+          as={"button"}
+          onClick={() => navigate("/advance-expense-request-view")}
+          fontSize={"xs"}
+          color="#fff"
+          bg={"#6311CB"}
+          py={1.5}
+          px={5}
+          borderRadius={5}
+        >
+          {item?.Action}
+        </Text>
+      ),
+    }));
+    const completedTable = AdvanceExpenseRequest.map((item, index) => ({
+      "Sr. no": (
+        <Checkbox colorScheme="purple">
+          <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?.id}
+          </Text>
+        </Checkbox>
+      ),
+      "Report name": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+          color="#3725EA"
+        >
+          {item?.ReportName}
+        </Text>
+      ),
+      "Report by": (
+        <Flex align={"center"} gap={2}>
+          <Avatar
+            size={"sm"}
+            name={item?.ReportBy?.profName}
+            src={item?.ReportBy?.profImage}
+          />
+          <Text as={"span"}>{item?.ReportBy?.profName}</Text>
+        </Flex>
+      ),
+      "Report amount": item?.ReportAmount,
+      "Date & time": item?.DateTime,
+      Approver: item?.Approver,
+      Disburser: item?.Disburser,
+      Action: (
+        <Text
+          as={"button"}
+          fontSize={"xs"}
+          color="#fff"
+          bg={"#6311CB"}
+          py={1.5}
+          px={5}
+          borderRadius={5}
+        >
+          {item?.Action}
+        </Text>
+      ),
+    }));
+    const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({
+      "Sr. no": (
+        <Checkbox colorScheme="purple">
+          <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?.id}
+          </Text>
+        </Checkbox>
+      ),
+      "Report name": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+          color="#3725EA"
+        >
+          {item?.ReportName}
+        </Text>
+      ),
+      "Report by": (
+        <Flex align={"center"} gap={2}>
+          <Avatar
+            size={"sm"}
+            name={item?.ReportBy?.profName}
+            src={item?.ReportBy?.profImage}
+          />
+          <Text as={"span"}>{item?.ReportBy?.profName}</Text>
+        </Flex>
+      ),
+      "Report amount": item?.ReportAmount,
+      "Date & time": item?.DateTime,
+      Approver: item?.Approver,
+      Disburser: item?.Disburser,
+      Action: (
+        <Text
+          as={"button"}
+          fontSize={"xs"}
+          color="#fff"
+          bg={"#6311CB"}
+          py={1.5}
+          px={5}
+          borderRadius={5}
+        >
+          {item?.Action}
+        </Text>
+      ),
+    }));
+  
+    const tabsData = [
+      {
+        label: "Pending",
+        num: 50,
+        content: (
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={pendingTable}
+            isLoading={isLoading}
+          />
+        ),
+      },
+      {
+        label: "Completed",
+        content: (
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={completedTable}
+            isLoading={isLoading}
+          />
+        ),
+      },
+      {
+        label: "Rejected",
+        content: (
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={rejectedTable}
+            isLoading={isLoading}
+          />
+        ),
+      },
+    ];
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} p={1} 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>
+              <Divider />
+              <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+                <Flex align={"center"} gap={5}>
+                  <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>
+                  <Flex align={"center"} gap={2}>
+                    <Text as={"span"} fontSize={"xs"}>
+                      Show
+                    </Text>
+                    <Select borderRadius={5} size={"sm"}>
+                      <option value="10">10</option>
+                      <option value="30">30</option>
+                      <option value="50">50</option>
+                      <option value="80">80</option>
+                    </Select>
+                    <Text as={"span"} fontSize={"xs"}>
+                      entries
+                    </Text>
+                  </Flex>
+                </Flex>
+                <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={<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={pendingTable}
+              isLoading={isLoading}
+            />
+        </Box>
+      </Box>
+    );
+  };
+  
+  export default AdvanceExpensePending;
+    

src/Pages/OptiFiiExpense/AdvExpRejecte.jsx

@@ -0,0 +1,452 @@
+import {
+    Avatar,
+    Box,
+    Button,
+    Checkbox,
+    Divider,
+    Flex,
+    HStack,
+    Icon,
+    Image,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    Radio,
+    Select,
+    Tag,
+    TagLabel,
+    Text,
+    VStack,
+  } from "@chakra-ui/react";
+  import {
+    Tabs,
+    TabList,
+    Tab,
+    TabIndicator,
+    TabPanels,
+    TabPanel,
+  } 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 womenpfp from "../../assets/womenpfp1.png";
+  import {
+    AddIcon,
+    CalendarIcon,
+    ChevronDownIcon,
+    EmailIcon,
+    SearchIcon,
+    ViewIcon,
+  } from "@chakra-ui/icons";
+  import {
+    MdFilterList,
+    MdNotificationsNone,
+    MdOutlineHeadsetMic,
+  } from "react-icons/md";
+  import { OPACITY_ON_LOAD } from "../../Layout/animations";
+  import { Link, NavLink, useNavigate } from "react-router-dom";
+  import { FaArrowUpFromBracket } from "react-icons/fa6";
+  import { LuListFilter } from "react-icons/lu";
+  import { BsFilterRight } from "react-icons/bs";
+  import pdfIcon from "../../assets/pdfIcon.svg";
+  import ExcelIcon from "../../assets/ExcelIcon.svg";
+  
+  const AdvanceExpenseReject = () => {
+    const { AdvanceExpenseRequest } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [users, setusers] = useState(50);
+    const navigate = useNavigate();
+  
+    useEffect(() => {
+      // Set isLoading to true
+      setIsLoading(true);
+  
+      // Simulate a 3-second delay
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 500);
+  
+      return () => clearTimeout(timer);
+    }, []);
+  
+    // ===============================[ Table Header ]
+  
+    const tableHeadRow = [
+      "Sr. no",
+      "Report name",
+      "Report by",
+      "Report amount",
+      "Date & time",
+      "Approver",
+      "Disburser",
+      "Action",
+    ];
+  
+    const pendingTable = AdvanceExpenseRequest.map((item, index) => ({
+      "Sr. no": (
+        <Checkbox colorScheme="purple">
+          <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?.id}
+          </Text>
+        </Checkbox>
+      ),
+      "Report name": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+          color="#3725EA"
+        >
+          {item?.ReportName}
+        </Text>
+      ),
+      "Report by": (
+        <Flex align={"center"} gap={2}>
+          <Avatar
+            size={"sm"}
+            name={item?.ReportBy?.profName}
+            src={item?.ReportBy?.profImage}
+          />
+          <Text as={"span"}>{item?.ReportBy?.profName}</Text>
+        </Flex>
+      ),
+      "Report amount": item?.ReportAmount,
+      "Date & time": item?.DateTime,
+      Approver: item?.Approver,
+      Disburser: item?.Disburser,
+      Action: (
+        <Text
+          as={"button"}
+          onClick={() => navigate("/advance-expense-request-view")}
+          fontSize={"xs"}
+          color="#fff"
+          bg={"#6311CB"}
+          py={1.5}
+          px={5}
+          borderRadius={5}
+        >
+          {item?.Action}
+        </Text>
+      ),
+    }));
+    const completedTable = AdvanceExpenseRequest.map((item, index) => ({
+      "Sr. no": (
+        <Checkbox colorScheme="purple">
+          <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?.id}
+          </Text>
+        </Checkbox>
+      ),
+      "Report name": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+          color="#3725EA"
+        >
+          {item?.ReportName}
+        </Text>
+      ),
+      "Report by": (
+        <Flex align={"center"} gap={2}>
+          <Avatar
+            size={"sm"}
+            name={item?.ReportBy?.profName}
+            src={item?.ReportBy?.profImage}
+          />
+          <Text as={"span"}>{item?.ReportBy?.profName}</Text>
+        </Flex>
+      ),
+      "Report amount": item?.ReportAmount,
+      "Date & time": item?.DateTime,
+      Approver: item?.Approver,
+      Disburser: item?.Disburser,
+      Action: (
+        <Text
+          as={"button"}
+          fontSize={"xs"}
+          color="#fff"
+          bg={"#6311CB"}
+          py={1.5}
+          px={5}
+          borderRadius={5}
+        >
+          {item?.Action}
+        </Text>
+      ),
+    }));
+    const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({
+      "Sr. no": (
+        <Checkbox colorScheme="purple">
+          <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?.id}
+          </Text>
+        </Checkbox>
+      ),
+      "Report name": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+          color="#3725EA"
+        >
+          {item?.ReportName}
+        </Text>
+      ),
+      "Report by": (
+        <Flex align={"center"} gap={2}>
+          <Avatar
+            size={"sm"}
+            name={item?.ReportBy?.profName}
+            src={item?.ReportBy?.profImage}
+          />
+          <Text as={"span"}>{item?.ReportBy?.profName}</Text>
+        </Flex>
+      ),
+      "Report amount": item?.ReportAmount,
+      "Date & time": item?.DateTime,
+      Approver: item?.Approver,
+      Disburser: item?.Disburser,
+      Action: (
+        <Text
+          as={"button"}
+          fontSize={"xs"}
+          color="#fff"
+          bg={"#6311CB"}
+          py={1.5}
+          px={5}
+          borderRadius={5}
+        >
+          {item?.Action}
+        </Text>
+      ),
+    }));
+  
+    const tabsData = [
+      {
+        label: "Pending",
+        num: 50,
+        content: (
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={pendingTable}
+            isLoading={isLoading}
+          />
+        ),
+      },
+      {
+        label: "Completed",
+        content: (
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={completedTable}
+            isLoading={isLoading}
+          />
+        ),
+      },
+      {
+        label: "Rejected",
+        content: (
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={rejectedTable}
+            isLoading={isLoading}
+          />
+        ),
+      },
+    ];
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} p={1} 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>
+              <Divider />
+              <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+                <Flex align={"center"} gap={5}>
+                  <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>
+                  <Flex align={"center"} gap={2}>
+                    <Text as={"span"} fontSize={"xs"}>
+                      Show
+                    </Text>
+                    <Select borderRadius={5} size={"sm"}>
+                      <option value="10">10</option>
+                      <option value="30">30</option>
+                      <option value="50">50</option>
+                      <option value="80">80</option>
+                    </Select>
+                    <Text as={"span"} fontSize={"xs"}>
+                      entries
+                    </Text>
+                  </Flex>
+                </Flex>
+                <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={<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={pendingTable}
+              isLoading={isLoading}
+            />
+        </Box>
+      </Box>
+    );
+  };
+  
+  export default AdvanceExpenseReject;
+    

src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx

@@ -55,8 +55,9 @@ 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 AdvanceExpensePending from "./AdvExpPending";
+import AdvanceExpenseCompleted from "./AvdExpComplted";
+import AdvanceExpenseReject from "./AdvExpRejecte";
 
 const AdvanceExpenseRequest = () => {
   const { AdvanceExpenseRequest } = useContext(GlobalStateContext);
@@ -65,8 +66,6 @@ const AdvanceExpenseRequest = () => {
   const [users, setusers] = useState(50);
   const navigate = useNavigate();
 
-
-
   useEffect(() => {
     // Set isLoading to true
     setIsLoading(true);
@@ -127,25 +126,32 @@ const AdvanceExpenseRequest = () => {
       </Text>
     ),
     "Report by": (
-      <Flex align={'center'} gap={2}>
-        <Avatar size={'sm'} name={item?.ReportBy?.profName} src={item?.ReportBy?.profImage} />
-        <Text as={'span'}>{item?.ReportBy?.profName}</Text>
+      <Flex align={"center"} gap={2}>
+        <Avatar
+          size={"sm"}
+          name={item?.ReportBy?.profName}
+          src={item?.ReportBy?.profImage}
+        />
+        <Text as={"span"}>{item?.ReportBy?.profName}</Text>
       </Flex>
     ),
     "Report amount": item?.ReportAmount,
     "Date & time": item?.DateTime,
-    "Approver": item?.Approver,
-    "Disburser": item?.Disburser,
-    "Action": (
+    Approver: item?.Approver,
+    Disburser: item?.Disburser,
+    Action: (
       <Text
         as={"button"}
-        onClick={() => navigate('/advance-expense-request-view')}
+        onClick={() => navigate("/advance-expense-request-view")}
         fontSize={"xs"}
         color="#fff"
-        bg={'#6311CB'}
-        py={1.5} px={5}
+        bg={"#6311CB"}
+        py={1.5}
+        px={5}
         borderRadius={5}
-      >{item?.Action}</Text>
+      >
+        {item?.Action}
+      </Text>
     ),
   }));
   const completedTable = AdvanceExpenseRequest.map((item, index) => ({
@@ -181,26 +187,33 @@ const AdvanceExpenseRequest = () => {
       >
         {item?.ReportName}
       </Text>
-    ),          
+    ),
     "Report by": (
-      <Flex align={'center'} gap={2}>
-        <Avatar size={'sm'} name={item?.ReportBy?.profName} src={item?.ReportBy?.profImage} />
-        <Text as={'span'}>{item?.ReportBy?.profName}</Text>
+      <Flex align={"center"} gap={2}>
+        <Avatar
+          size={"sm"}
+          name={item?.ReportBy?.profName}
+          src={item?.ReportBy?.profImage}
+        />
+        <Text as={"span"}>{item?.ReportBy?.profName}</Text>
       </Flex>
     ),
     "Report amount": item?.ReportAmount,
     "Date & time": item?.DateTime,
-    "Approver": item?.Approver,
-    "Disburser": item?.Disburser,
-    "Action": (
+    Approver: item?.Approver,
+    Disburser: item?.Disburser,
+    Action: (
       <Text
         as={"button"}
         fontSize={"xs"}
         color="#fff"
-        bg={'#6311CB'}
-        py={1.5} px={5}
+        bg={"#6311CB"}
+        py={1.5}
+        px={5}
         borderRadius={5}
-      >{item?.Action}</Text>
+      >
+        {item?.Action}
+      </Text>
     ),
   }));
   const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({
@@ -238,58 +251,50 @@ const AdvanceExpenseRequest = () => {
       </Text>
     ),
     "Report by": (
-      <Flex align={'center'} gap={2}>
-        <Avatar size={'sm'} name={item?.ReportBy?.profName} src={item?.ReportBy?.profImage} />
-        <Text as={'span'}>{item?.ReportBy?.profName}</Text>
+      <Flex align={"center"} gap={2}>
+        <Avatar
+          size={"sm"}
+          name={item?.ReportBy?.profName}
+          src={item?.ReportBy?.profImage}
+        />
+        <Text as={"span"}>{item?.ReportBy?.profName}</Text>
       </Flex>
     ),
     "Report amount": item?.ReportAmount,
     "Date & time": item?.DateTime,
-    "Approver": item?.Approver,
-    "Disburser": item?.Disburser,
-    "Action": (
+    Approver: item?.Approver,
+    Disburser: item?.Disburser,
+    Action: (
       <Text
         as={"button"}
         fontSize={"xs"}
         color="#fff"
-        bg={'#6311CB'}
-        py={1.5} px={5}
+        bg={"#6311CB"}
+        py={1.5}
+        px={5}
         borderRadius={5}
-      >{item?.Action}</Text>
+      >
+        {item?.Action}
+      </Text>
     ),
   }));
 
-
-
   const tabsData = [
     {
-      label: 'Pending',
+      label: "Pending",
       num: 50,
-      content: <NormalTable
-        emptyMessage={`We don't have any Sponers `}
-        tableHeadRow={tableHeadRow}
-        data={pendingTable}
-        isLoading={isLoading}
-      />
+      content: <AdvanceExpensePending />,
     },
     {
-      label: 'Completed',
-      content: <NormalTable
-        emptyMessage={`We don't have any Sponers `}
-        tableHeadRow={tableHeadRow}
-        data={completedTable}
-        isLoading={isLoading}
-      />
+      label: "Completed",
+      content: <AdvanceExpenseCompleted />,
     },
     {
-      label: 'Rejected',
-      content: <NormalTable
-        emptyMessage={`We don't have any Sponers `}
-        tableHeadRow={tableHeadRow}
-        data={rejectedTable}
-        isLoading={isLoading}
-      />
-    }
+      label: "Rejected",
+      content: (
+        <AdvanceExpenseReject/>
+      ),
+    },
   ];
 
   return (
@@ -297,123 +302,12 @@ const AdvanceExpenseRequest = () => {
       <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>
-          <Divider />
-          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
-            <Flex align={'center'} gap={5}>
-              <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>
-              <Flex align={'center'} gap={2}>
-                <Text as={'span'} fontSize={'xs'}>Show</Text>
-                <Select borderRadius={5} size={"sm"}>
-                  <option value='10'>10</option>
-                  <option value='30'>30</option>
-                  <option value='50'>50</option>
-                  <option value='80'>80</option>
-                </Select>
-                <Text as={'span'} fontSize={'xs'}>entries</Text>
-              </Flex>
-
-
-            </Flex>
-            <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={<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>
         <Tabs position="relative" variant="unstyled">
           <TabList color="#B0B0B0">
             {tabsData?.map((tab, index) => (
@@ -424,23 +318,26 @@ const AdvanceExpenseRequest = () => {
                   color: "#6311CB",
                   fontWeight: "medium",
                 }}
-                display={'flex'}
-                alignItems={'center'}
+                display={"flex"}
+                alignItems={"center"}
                 gap={2}
               >
                 {tab?.label}
-                {tab?.label == "Pending" &&
+                {tab?.label == "Pending" && (
                   <Text
                     as={"span"}
                     fontSize={"xs"}
                     color="#fff"
-                    bg={'#6311CB'}
-                    py={1} px={2}
+                    bg={"#6311CB"}
+                    py={1}
+                    px={2}
                     borderRadius={5}
-                  >{tab?.num}</Text>}
+                  >
+                    {tab?.num}
+                  </Text>
+                )}
               </Tab>
             ))}
-
           </TabList>
           <TabIndicator
             mt="-1.5px"
@@ -451,11 +348,8 @@ const AdvanceExpenseRequest = () => {
           />
           <TabPanels>
             {tabsData?.map((tabCont, index) => (
-              <TabPanel key={index}>
-                {tabCont?.content}
-              </TabPanel>
+              <TabPanel key={index}>{tabCont?.content}</TabPanel>
             ))}
-
           </TabPanels>
         </Tabs>
       </Box>

src/Pages/OptiFiiExpense/AvdExpComplted.jsx

@@ -0,0 +1,452 @@
+import {
+    Avatar,
+    Box,
+    Button,
+    Checkbox,
+    Divider,
+    Flex,
+    HStack,
+    Icon,
+    Image,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    Radio,
+    Select,
+    Tag,
+    TagLabel,
+    Text,
+    VStack,
+  } from "@chakra-ui/react";
+  import {
+    Tabs,
+    TabList,
+    Tab,
+    TabIndicator,
+    TabPanels,
+    TabPanel,
+  } 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 womenpfp from "../../assets/womenpfp1.png";
+  import {
+    AddIcon,
+    CalendarIcon,
+    ChevronDownIcon,
+    EmailIcon,
+    SearchIcon,
+    ViewIcon,
+  } from "@chakra-ui/icons";
+  import {
+    MdFilterList,
+    MdNotificationsNone,
+    MdOutlineHeadsetMic,
+  } from "react-icons/md";
+  import { OPACITY_ON_LOAD } from "../../Layout/animations";
+  import { Link, NavLink, useNavigate } from "react-router-dom";
+  import { FaArrowUpFromBracket } from "react-icons/fa6";
+  import { LuListFilter } from "react-icons/lu";
+  import { BsFilterRight } from "react-icons/bs";
+  import pdfIcon from "../../assets/pdfIcon.svg";
+  import ExcelIcon from "../../assets/ExcelIcon.svg";
+  
+  const AdvanceExpenseCompleted = () => {
+    const { AdvanceExpenseRequest } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [users, setusers] = useState(50);
+    const navigate = useNavigate();
+  
+    useEffect(() => {
+      // Set isLoading to true
+      setIsLoading(true);
+  
+      // Simulate a 3-second delay
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 500);
+  
+      return () => clearTimeout(timer);
+    }, []);
+  
+    // ===============================[ Table Header ]
+  
+    const tableHeadRow = [
+      "Sr. no",
+      "Report name",
+      "Report by",
+      "Report amount",
+      "Date & time",
+      "Approver",
+      "Disburser",
+      "Action",
+    ];
+  
+    const pendingTable = AdvanceExpenseRequest.map((item, index) => ({
+      "Sr. no": (
+        <Checkbox colorScheme="purple">
+          <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?.id}
+          </Text>
+        </Checkbox>
+      ),
+      "Report name": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+          color="#3725EA"
+        >
+          {item?.ReportName}
+        </Text>
+      ),
+      "Report by": (
+        <Flex align={"center"} gap={2}>
+          <Avatar
+            size={"sm"}
+            name={item?.ReportBy?.profName}
+            src={item?.ReportBy?.profImage}
+          />
+          <Text as={"span"}>{item?.ReportBy?.profName}</Text>
+        </Flex>
+      ),
+      "Report amount": item?.ReportAmount,
+      "Date & time": item?.DateTime,
+      Approver: item?.Approver,
+      Disburser: item?.Disburser,
+      Action: (
+        <Text
+          as={"button"}
+          onClick={() => navigate("/advance-expense-request-view")}
+          fontSize={"xs"}
+          color="#fff"
+          bg={"#6311CB"}
+          py={1.5}
+          px={5}
+          borderRadius={5}
+        >
+          {item?.Action}
+        </Text>
+      ),
+    }));
+    const completedTable = AdvanceExpenseRequest.map((item, index) => ({
+      "Sr. no": (
+        <Checkbox colorScheme="purple">
+          <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?.id}
+          </Text>
+        </Checkbox>
+      ),
+      "Report name": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+          color="#3725EA"
+        >
+          {item?.ReportName}
+        </Text>
+      ),
+      "Report by": (
+        <Flex align={"center"} gap={2}>
+          <Avatar
+            size={"sm"}
+            name={item?.ReportBy?.profName}
+            src={item?.ReportBy?.profImage}
+          />
+          <Text as={"span"}>{item?.ReportBy?.profName}</Text>
+        </Flex>
+      ),
+      "Report amount": item?.ReportAmount,
+      "Date & time": item?.DateTime,
+      Approver: item?.Approver,
+      Disburser: item?.Disburser,
+      Action: (
+        <Text
+          as={"button"}
+          fontSize={"xs"}
+          color="#fff"
+          bg={"#6311CB"}
+          py={1.5}
+          px={5}
+          borderRadius={5}
+        >
+          {item?.Action}
+        </Text>
+      ),
+    }));
+    const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({
+      "Sr. no": (
+        <Checkbox colorScheme="purple">
+          <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?.id}
+          </Text>
+        </Checkbox>
+      ),
+      "Report name": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+          color="#3725EA"
+        >
+          {item?.ReportName}
+        </Text>
+      ),
+      "Report by": (
+        <Flex align={"center"} gap={2}>
+          <Avatar
+            size={"sm"}
+            name={item?.ReportBy?.profName}
+            src={item?.ReportBy?.profImage}
+          />
+          <Text as={"span"}>{item?.ReportBy?.profName}</Text>
+        </Flex>
+      ),
+      "Report amount": item?.ReportAmount,
+      "Date & time": item?.DateTime,
+      Approver: item?.Approver,
+      Disburser: item?.Disburser,
+      Action: (
+        <Text
+          as={"button"}
+          fontSize={"xs"}
+          color="#fff"
+          bg={"#6311CB"}
+          py={1.5}
+          px={5}
+          borderRadius={5}
+        >
+          {item?.Action}
+        </Text>
+      ),
+    }));
+  
+    const tabsData = [
+      {
+        label: "Pending",
+        num: 50,
+        content: (
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={pendingTable}
+            isLoading={isLoading}
+          />
+        ),
+      },
+      {
+        label: "Completed",
+        content: (
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={completedTable}
+            isLoading={isLoading}
+          />
+        ),
+      },
+      {
+        label: "Rejected",
+        content: (
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={rejectedTable}
+            isLoading={isLoading}
+          />
+        ),
+      },
+    ];
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} p={1} 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>
+              <Divider />
+              <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+                <Flex align={"center"} gap={5}>
+                  <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>
+                  <Flex align={"center"} gap={2}>
+                    <Text as={"span"} fontSize={"xs"}>
+                      Show
+                    </Text>
+                    <Select borderRadius={5} size={"sm"}>
+                      <option value="10">10</option>
+                      <option value="30">30</option>
+                      <option value="50">50</option>
+                      <option value="80">80</option>
+                    </Select>
+                    <Text as={"span"} fontSize={"xs"}>
+                      entries
+                    </Text>
+                  </Flex>
+                </Flex>
+                <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={<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={pendingTable}
+              isLoading={isLoading}
+            />
+        </Box>
+      </Box>
+    );
+  };
+  
+  export default AdvanceExpenseCompleted;
+    

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) => ({
@@ -87,8 +97,8 @@ const OptiFiiExpenseDashboard = () => {
           item?.orderStatus === "Approved"
             ? "#027A48"
             : item?.orderStatus === "Fully reimbursed"
-            ? "#3725EA"
-            : "red"
+              ? "#3725EA"
+              : "red"
         }
       >
         {item?.orderStatus}
@@ -112,15 +122,14 @@ const OptiFiiExpenseDashboard = () => {
           item?.orderStatus === "Approved"
             ? "#027A48"
             : item?.orderStatus === "Fully reimbursed"
-            ? "#3725EA"
-            : "red"
+              ? "#3725EA"
+              : "red"
         }
       >
         {item?.orderStatus}
       </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) => (
-          <GridItem
-            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>
+        {blueCardData.map((item, index) => (
+          <BlueCard key={index} blueCardData={item}  />
         ))}
       </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 display={"flex"} justifyContent={"space-between"} px={4} pt={4}>
+      <Box w={"100%"} rounded={"xl"} mb={4} p={3} bg={"#fff"}>
+        <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,15 +1,153 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import {
+  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 { 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 = [
+    "Sr. No",
+    "Report name",
+    "Report by",
+    "Report amount",
+    "Date & time",
+    "Approver",
+    "Disburser",
+    "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>
+    ),
+    "Report name": (
+      <Text color="#3725EA" fontSize="small" fontWeight={400}>{item?.reportname}</Text>
+    ),
+    // "Report by": item?.emailAddress,
+    "Report amount": item?.reportamount,
+    "Date & time": item?.datetime,
+    "Approver": item?.approver,
+    "Disburser": item?.disburser,
+    "Report by": (
+      <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}>
-      <MiniHeader
+    <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}
-      />
+      /> */}
+
+      <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"} fontWeight={600} 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"} fontWeight={600} mb={1}>
+              Wallet Amount
+            </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,385 @@
+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";
+import { TiTick } from "react-icons/ti";
+import { ImCancelCircle } from "react-icons/im";
+
+const tableData = [
+  {
+    id:1,
+    datetime:"Jan 12, 2022, 10 am",
+    merchant:"Dine in",
+    category :"Food",
+    paymentmethod :"Expense card",
+    reimburseAmount :"₹ 5000",
+  },
+  {
+    id:2,
+    datetime:"Jan 12, 2022, 10 am",
+    merchant:"Airtel postpaid",
+    category :"telecom",
+    paymentmethod :"Expense card",
+    reimburseAmount :"₹ 5000",
+  },
+  {
+    id:3,
+    datetime:"Jan 12, 2022, 10 am",
+    merchant:"Lorem ipsum dolor  adipiscing elit.",
+    category :"Fuel",
+    paymentmethod :"Expense card",
+    reimburseAmount :"₹ 5000",
+  },
+  {
+    id:4,
+    datetime:"Jan 12, 2022, 10 am",
+    merchant:"Airtel postpaid",
+    category :"Telecom",
+    paymentmethod :"Cash",
+    reimburseAmount :"₹ 5000",
+  },
+  {
+    id:3,
+    datetime:"Jan 12, 2022, 10 am",
+    merchant:"Lorem ipsum dolor  adipiscing elit.",
+    category :"Fuel",
+    paymentmethod :"Cash",
+    reimburseAmount :"₹ 5000",
+  },
+]
+
+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 = [
+    "Sr. No",
+    "Date & time",
+    "Merchant",
+    "Category",
+    "Payment mode",
+    "Reimburse Amount",
+    "Bills",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = tableData.map((item, index) => ({
+    "Sr. No": (
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+      >
+        {index + 1}
+      </Text>
+    ),
+    "Date & time": item?.datetime,
+    "Merchant": item?.merchant,
+    "Category": item?.category,
+    "Payment mode": item?.paymentmethod,
+    "Reimburse Amount": item?.reimburseAmount,
+    Bills: (
+      <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>
+    ),
+    Action: (
+      <HStack>
+        <Button
+          display="flex"
+          flexDirection="row"
+          fontSize="small"
+          fontWeight={400}
+          p={2}
+          bg={"#00A43824"}
+          rounded={"medium"}
+          borderRadius="7.25px"
+          border="1px solid #00A438"
+          color="#00A438"
+        >
+          <TiTick color="#00A438" />
+          Approve
+        </Button>
+        <Button
+          display="flex"
+          flexDirection="row"
+          fontSize="small"
+          fontWeight={400}
+          p={2}
+          bg={"#EE1B241A"}
+          border="1px solid #EE1B24"
+          borderRadius="7.25px"
+          color="#EE1B24"
+          gap={1}
+        >
+          <ImCancelCircle color="red" />
+          Reject
+        </Button>
+      </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,412 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import {
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  HStack,
+  Icon,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Radio,
+  Tag,
+  TagLabel,
+  Text,
+  useDisclosure,
+  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,
+  ChevronRightIcon,
+  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";
+import CreateBenefitWalletModal from "./wallet/CreateBenefitWalletModal";
+import { IoFilterSharp } from "react-icons/io5";
 
 const WalletProgram = () => {
+  const { walletProgram } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [showGrid, setShowGrid] = useState(true);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  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}>
-      <MiniHeader
-        title={"My Requests"}
-        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
-        backButton={true}
-      />
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <Box
+        rounded={"xl"}
+        py={3}
+        // pb={0}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <Box
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            w={"100%"}
+          >
+            <InputGroup width={300} size="sm" ml={5}>
+              <InputLeftElement pointerEvents="none">
+                <SearchIcon color="gray.300" />
+              </InputLeftElement>
+              <Input
+                type="search"
+                placeholder="Type to search..."
+                rounded="md"
+                focusBorderColor="#3725EA"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </InputGroup>
+            <Box>
+              <Button
+                as={Button}
+                leftIcon={<MdOutlineUnarchive />}
+                // rightIcon={<ChevronDownIcon />}
+                fontSize={"xs"}
+                colorScheme="gray"
+                color={"gray.700"}
+                variant="outline"
+                size={"sm"}
+                me={2}
+              >
+                View achieve
+              </Button>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<FaArrowUpFromBracket />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  colorScheme="gray"
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Export
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>
+                    <Image src={pdfIcon} me={2} /> Export as PDF
+                  </MenuItem>
+                  <MenuItem fontSize={"sm"}>
+                    <Image src={ExcelIcon} me={2} /> Export as Excel
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+              <PrimaryButton
+                onClick={onOpen}
+                leftIcon={<AddIcon />}
+                title={"Create wallet"}
+              />
+
+              {/* <NavLink to="/wallet-program/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 w="160px" h="300px" overflowY="scroll">
+                  <VStack p={2} alignItems="flex-start">
+                    <HStack alignItems="center">
+                      <IoFilterSharp fontSize="small" />{" "}
+                      <Text as="span" fontSize="small" fontWeight={600}>
+                        Filter
+                      </Text>
+                    </HStack>
+                    <Box w="100%" borderBottom="1px solid #D8D8D8" />
+                    <VStack gap={4} alignItems="flex-start" p={3} w="100%">
+                      {/* Wallet Type Section */}
+                      <VStack align="start" spacing={2}>
+                        <Text as="span" fontSize="sm" fontWeight={600}>
+                          Wallet Type
+                        </Text>
+                        <Checkbox defaultChecked>Prefilled </Checkbox>
+                        <Checkbox>Reimburse</Checkbox>
+                      </VStack>
+
+                      <VStack align="start" spacing={2}>
+                        <Text as="span" fontSize="sm" fontWeight={600}>
+                          Status
+                        </Text>
+                        <Checkbox defaultChecked>Active </Checkbox>
+                        <Checkbox>Pending</Checkbox>
+                      </VStack>
+                      {/* Status Section */}
+                      <VStack align="start" spacing={2}>
+                        <Text as="span" fontSize="sm" fontWeight={600}>
+                          Department
+                        </Text>
+                        <Checkbox>Finance</Checkbox>
+                        <Checkbox>design</Checkbox>
+                      </VStack>
+                    </VStack>
+                  </VStack>
+                </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>
+      {/* Modal  */}
+      <CreateBenefitWalletModal isOpen={isOpen} onClose={onClose} />
     </Box>
   );
 };

src/Pages/OptiFiiExpense/WalletRequest.jsx

@@ -0,0 +1,447 @@
+import {
+  Box,
+  Button,
+  Divider,
+  HStack,
+  Icon,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Radio,
+  Tag,
+  TagLabel,
+  Text,
+  Textarea,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useMemo, useRef, 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 Sales from "./wallet/Sales";
+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";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react";
+import RequestModal from "./wallet/RequestModal";
+const WalletProgram = () => {
+  const { walletProgram } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [showGrid, setShowGrid] = useState(true);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [scrollBehavior, setScrollBehavior] = useState("inside");
+  const btnRef = useRef(null);
+
+
+  const handleCloseBothModals = () => {
+    onClose();
+    onApproveClose(); 
+  };
+  const {
+    isOpen: isApproveOpen,
+    onOpen: onApproveOpen,
+    onClose: onApproveClose,
+  } = useDisclosure();
+
+  const transactionLimits = [
+    { period: "Daily", amount: "₹ 5000" },
+    { period: "Weekly", amount: "₹ 25000" },
+    { period: "Monthly", amount: "₹ 50000" },
+  ];
+
+  const Submission = [
+    { receipt: "Required for all transaction", natureofreceipt: "Printed" },
+  ];
+
+  const departmentBudget = [
+    { name: "Reethik thota", amt: "₹ 25000" },
+    { name: "Pooja patade", amt: "₹ 25000 " },
+  ];
+
+  const approvers1 = [
+    { name: "Reethik thota", role: "Bill approver" },
+    { name: "Reethik thota", role: "Bill approver" },
+  ];
+  const approvers2 = [
+    { name: "Reethik thota", role: "Bill approver" },
+    { name: "Reethik thota", role: "Bill approver" },
+  ];
+
+  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",
+    "Wallet Name",
+    "Created by",
+    "Wallet amount",
+    "Date & time",
+    "Action",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+  walletProgram.map((item) => console.log(item));
+  const extractedArray = useMemo(() => {
+    return walletProgram.map((item) => ({
+      "Sr. No": <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,
+      "Date & time": item?.CreatedOn,
+      "Created by": (
+        <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"}
+          size={"xs"}
+          bg={"#6311CB"}
+          py={1}
+          fontWeight={400}
+          px={3}
+          color="#fff"
+          onClick={onOpen}
+        >
+          View
+        </Button>
+      ),
+    }));
+  }, [walletProgram]);
+
+  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" 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>
+              <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>
+          </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>
+            </Box>
+          </HStack>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+      </Box>
+      <Modal
+        onClose={onClose}
+        finalFocusRef={btnRef}
+        isOpen={isOpen}
+        scrollBehavior={scrollBehavior}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader px={4} pt={4}>
+            <Text fontSize="small" fontWeight={600}>
+              Wallet approval request
+            </Text>
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody
+            p={0}
+            bgColor="#F3F3F9"
+            gap={2}
+            display="flex"
+            flexDirection="column"
+          >
+            <RequestModal />
+          </ModalBody>
+          <ModalFooter>
+            <HStack alignItems="center">
+              <Button
+                bgColor="#F0F0F0"
+                color="#202020"
+                w="200px"
+                fontSize="small"
+                onClick={onApproveOpen}
+                h="44px"
+              >
+                Close
+              </Button>
+              <Button
+                bgColor="#6311CB"
+                color="#FFFFFF"
+                w="200px"
+                ontSize="small"
+                h="44px"
+                _hover={{
+                  bgColor: "#6311CB",
+                  color: "#FFFFFF",
+                }}
+              >
+                Approve
+              </Button>
+            </HStack>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <Modal
+        isCentered
+        onClose={onApproveClose}
+        isOpen={isApproveOpen}
+        motionPreset="slideInBottom"
+      >
+        <ModalOverlay />
+        <ModalContent>
+          {/* <ModalHeader>Modal Title</ModalHeader> */}
+          {/* <ModalCloseButton /> */}
+          <ModalBody>
+            {/* <Lorem count={2} /> */}
+            <VStack alignItems="flex-start">
+              <Text
+                as="span"
+                fontSize="medium"
+                fontWeight={600}
+                color="#101828"
+              >
+                Reason for wallet rejection
+              </Text>
+              <Text as="p" fontWeight={500} fontSize="small">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                consectetur adipiscing elit.
+              </Text>
+              <Textarea />
+            </VStack>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              bgColor="#F0F0F0"
+              color="#344054"
+              fontSize="small"
+              fontWeight={600}
+              mr={3}
+              onClick={handleCloseBothModals}
+            >
+              Cancel
+            </Button>
+            <Button
+              bgColor="#6311CB"
+              color="#ffff"
+              _hover={{ bgColor: "#6311CB", color: "#ffff" }}
+              variant="ghost"
+            >
+              submit
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default WalletProgram;

src/Pages/OptiFiiExpense/wallet/BenifitStepOne.jsx

@@ -0,0 +1,156 @@
+import React, { useState } from 'react';
+import {
+    Box, Text, Input, Select, Stack,
+    InputGroup,
+    InputLeftElement,
+    HStack,
+    Divider,
+    Tag,
+} from "@chakra-ui/react";
+import { MdCurrencyRupee } from "react-icons/md";
+import { HiOutlineExclamationCircle } from "react-icons/hi2";
+import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
+
+const BenifitStepOne = () => {
+
+    const transactionRules = [
+        {
+            ruleText: "Either of them",
+            tags: ["Food", "Fuel"]
+        },
+        {
+            ruleText: "None of them",
+            tags: ["Electronics", "Clothing"]
+        }
+    ];
+
+    return (
+        <Box >
+            {/* Your form fields */}
+            <Stack spacing={4}>
+                <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Create wallet policy</Text>
+                </Box>
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Wallet name</Text>
+                    <Box bg={"#f7f3fc"} p={2} rounded={"md"}>
+                        <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={0}>Food</Text>
+                    </Box>
+                </Box>
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Description</Text>
+                    <Box bg={"#f7f3fc"} p={2} rounded={"md"}>
+                        <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={0}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus.
+                        </Text>
+                    </Box>
+                </Box>
+
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={2}>Transaction limit</Text>
+                    <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={1}>Total amount</Text>
+                    <InputGroup>
+                        <InputLeftElement pointerEvents='none'>
+                            <MdCurrencyRupee color='#636F83' size={12} />
+                        </InputLeftElement>
+                        <Input type='tel' />
+                    </InputGroup>
+                </Box>
+
+                <Divider color={"#f6f1fc"} />
+
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={2}>Grades & transaction limit</Text>
+                    <Stack direction="row" spacing={4}>
+                        <Box>
+                            <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={1}>Grade/level</Text>
+                            <Input />
+                        </Box>
+                        <Box>
+                            <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={1}>Amount</Text>
+                            <InputGroup>
+                                <InputLeftElement pointerEvents='none'>
+                                    <MdCurrencyRupee color='#636F83' size={12} />
+                                </InputLeftElement>
+                                <Input />
+                            </InputGroup>
+                        </Box>
+                    </Stack>
+                </Box>
+                <Divider color={"#f6f1fc"} />
+
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Select wallet type</Text>
+                    <Select placeholder="Select wallet type" fontSize={"sm"} fontWeight={500}>
+                        <option value="prepaid">Prepaid</option>
+                    </Select>
+                </Box>
+
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Select transaction type</Text>
+                    <Select placeholder="Select transaction type" fontSize={"sm"} fontWeight={500}>
+                        <option value="ecommerce">Ecommerce</option>
+                    </Select>
+                </Box>
+                <Divider color={"#f6f1fc"} />
+
+                <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={3}>Merchant transaction rule</Text>
+                    {transactionRules.map((rule, index) => (
+                        <Stack key={index} direction="row" spacing={4} mb={4}>
+                            {/* Transaction rule: Dynamic content */}
+                            <Box w={40}>
+                                <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Transaction rule</Text>
+                                <HStack spacing={2} border={"1px solid #D0D5DD"} rounded={"md"} p={2}>
+                                    <Text fontSize="12px" fontWeight="500" color={"#6B6B6B"} mb={0}>
+                                        {rule.ruleText} {/* Dynamic text from the rule */}
+                                    </Text>
+                                    <HiOutlineExclamationCircle color='#3725EA' />
+                                </HStack>
+                            </Box>
+
+                            {/* Dynamic Tags */}
+                            <Box flex={1}>
+                                <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Merchant category</Text>
+                                <HStack spacing={2} border={"1px solid #D0D5DD"} p={2} rounded={"md"}>
+                                    {rule.tags.map((tag, tagIndex) => (
+                                        <Tag key={tagIndex} size='sm' variant='solid' bg={"#efeefe"} color={"#3725EA"} fontWeight={500}>
+                                            {tag}
+                                        </Tag>
+                                    ))}
+                                </HStack>
+                            </Box>
+                        </Stack>
+                    ))}
+
+                </Box>
+                <Divider color={"#f6f1fc"} />
+                <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={3}>Set transaction limit</Text>
+                    <Box>
+                        <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Set maximum limit</Text>
+                        <RupeeSlider />
+                    </Box>
+                    <HStack bg={"#efeefe"} p={2} rounded={"md"} border={"1px solid #b4adf7"} mt={6}>
+                        <Text color={"#676D76"} fontSize={"xs"} mb={0} fontWeight={500}>Maximum limit -</Text>
+                        <Text color={"#3725EA"} fontSize={"sm"} mb={0} fontWeight={500}>₹ 50,000</Text>
+                    </HStack>
+                    <Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
+                        <Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set daily limit</Text>
+                        <RupeeSlider />
+                    </Box>
+                    <Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
+                        <Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set weekly limit</Text>
+                        <RupeeSlider />
+                    </Box>
+                    <Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
+                        <Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set monthly limit</Text>
+                        <RupeeSlider />
+                    </Box>
+                </Box>
+            </Stack>
+        </Box>
+    )
+}
+
+export default BenifitStepOne

src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import {
+    Box, Text, Input, Select, Stack,
+    InputGroup,
+    InputLeftElement,
+    HStack,
+    Divider,
+    Radio,
+    RadioGroup,
+} from "@chakra-ui/react";
+import { MdCurrencyRupee } from "react-icons/md";
+import { HiOutlineExclamationCircle } from "react-icons/hi2";
+import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
+
+const BenifitStepThree = () => {
+    return (
+        <Box >
+            {/* Your form fields */}
+            <Stack spacing={4}>
+                <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Create submission policy</Text>
+                </Box>
+                <Box>
+                    <Box>
+                        <Text fontSize={"sm"} fontWeight={500} mb={3}>
+                            1. Requirement of receipt
+                        </Text>
+                        <RadioGroup defaultValue='2'>
+                            <Stack>
+                                <Radio size='md' name='1' colorScheme='purple' value='1'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Required</Text>
+                                </Radio>
+                                <Radio size='md' name='1' colorScheme='purple' value='2'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}> Not required</Text>
+                                </Radio>
+                            </Stack>
+                        </RadioGroup>
+                    </Box>
+                    <Box mt={4}>
+                        <Text fontSize={"xs"} color={"#535963"} fontWeight={500} mb={2}>
+                            Required for
+                        </Text>
+                        <RadioGroup defaultValue='2'>
+                            <Stack>
+                                <Radio size='md' name='1' colorScheme='purple' value='1'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>All transaction</Text>
+                                </Radio>
+                                <HStack>
+                                    <Radio size='md' name='1' colorScheme='purple' value='2'>
+                                        <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Transaction above</Text>
+                                    </Radio>
+                                    <InputGroup w={60} >
+                                        <InputLeftElement pointerEvents='none'>
+                                            <MdCurrencyRupee color='#636F83' size={12} />
+                                        </InputLeftElement>
+                                        <Input border={"1px solid #8a4dd8"} />
+                                    </InputGroup>
+                                </HStack>
+                            </Stack>
+                        </RadioGroup>
+                    </Box>
+                </Box>
+                <Box>
+                    <Box>
+                        <Text fontSize={"sm"} fontWeight={500} mb={3}>
+                            2. what nature of receipt/memo
+                        </Text>
+                        <RadioGroup defaultValue='3'>
+                            <Stack>
+                                <Radio size='md' name='1' colorScheme='purple' value='1'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Printed</Text>
+                                </Radio>
+                                <Radio size='md' name='1' colorScheme='purple' value='2'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Hand written</Text>
+                                </Radio>
+                                <Radio size='md' name='1' colorScheme='purple' value='3'>
+                                    <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Both</Text>
+                                </Radio>
+                            </Stack>
+                        </RadioGroup>
+                    </Box>
+                </Box>
+            </Stack>
+        </Box>
+    )
+}
+
+export default BenifitStepThree

src/Pages/OptiFiiExpense/wallet/BenifitStepTwo.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import {
+  Box, Text, Input, Select, Stack,
+  InputGroup,
+  InputLeftElement,
+  HStack,
+  Divider,
+} from "@chakra-ui/react";
+import { MdCurrencyRupee } from "react-icons/md";
+import { HiOutlineExclamationCircle } from "react-icons/hi2";
+import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
+
+const BenifitStepTwo = () => {
+    return (
+        <Box >
+            {/* Your form fields */}
+            <Stack spacing={4}>
+                <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={1}>Create approval policy</Text>
+                    <Text fontSize="12px" fontWeight="500" color={"#606060"} mb={0}>Add up to 5 policy per approver flow </Text>
+                </Box>
+                
+                {/* <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Description</Text>
+                    <Box bg={"#f7f3fc"} p={2} rounded={"md"}>
+                        <Text fontSize="xs" fontWeight="500" color={"#636F83"} mb={0}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus.
+                        </Text>
+                    </Box>
+                </Box> */}
+
+                
+
+
+          
+{/* 
+
+                <Box>
+                    <Text fontSize="xs" fontWeight="500" color={"#344054"} mb={1}>Select transaction type</Text>
+                    <Select placeholder="Select transaction type" fontSize={"sm"} fontWeight={500}>
+                        <option value="ecommerce">Ecommerce</option>
+                    </Select>
+                </Box>
+                <Divider color={"#f6f1fc"} /> */}
+
+           
+                   
+                    <Box bg={"#faf8fd"} p={4} rounded={"sm"} mt={4}>
+                        <Text color={"#344054"} fontSize={"xs"} mb={2} fontWeight={500}>Set amount limit</Text>
+                        <RupeeSlider />
+                    </Box>
+            </Stack>
+        </Box>
+    )
+}
+
+export default BenifitStepTwo

src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx

@@ -0,0 +1,170 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  Box, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Text, Input, Select, Stack,
+  HStack,
+  Divider,
+  Button
+} from "@chakra-ui/react";
+import {
+  Step,
+  StepIndicator,
+  StepSeparator,
+  StepTitle,
+  Stepper,
+} from '@chakra-ui/react';
+import { IoCheckmark } from "react-icons/io5";
+import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton";
+import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
+import BenifitStepOne from './BenifitStepOne';
+import BenifitStepTwo from './BenifitStepTwo';
+import BenifitStepThree from './BenifitStepThree';
+
+const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
+  // Define steps
+  const steps = [
+    { title: 'Wallet policy' },
+    { title: 'Approval policy' },
+    { title: 'Submission policy' },
+    { title: 'Define budget' },
+  ];
+
+  // Use useState to control the active step
+  const [activeStep, setActiveStep] = useState(0);
+  const stepRefs = useRef([]); // Create refs for each step
+
+
+  const nextStep = () => {
+    if (activeStep < steps.length - 1) {
+      setActiveStep(activeStep + 1);
+    }
+  };
+
+  const prevStep = () => {
+    if (activeStep > 0) {
+      setActiveStep(activeStep - 1);
+    }
+  };
+
+  return (
+    <Box>
+      {/* Modal component */}
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent maxW={"800px"}>
+          <ModalHeader>Create Benefit Wallet</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {/* Stepper Component with 130% width, custom scrollbar and horizontal scroll */}
+            <Box pb={4}
+              overflowX="auto"
+              sx={{
+                '&::-webkit-scrollbar': {
+                  height: '4px',
+                },
+                '&::-webkit-scrollbar-thumb': {
+                  background: '#3725EA', // Custom scrollbar thumb color
+                  borderRadius: '10px',
+                },
+                '&::-webkit-scrollbar-track': {
+                  background: '#e0e0e0', // Custom scrollbar track color
+                },
+              }}
+            >
+              <Box>
+                <Stepper size="lg" index={activeStep} color={"#3725EA"} gap={1}>
+                  {steps.map((step, index) => (
+                    <Step key={index}>
+                      <StepIndicator w={6} h={6}>
+                        <Box
+                          borderRadius="full"
+                          bg={index < activeStep ? '#3725EA' : (index === activeStep ? '#3725EA' : 'gray.300')}
+                          color={index < activeStep || index === activeStep ? 'white' : 'gray.500'}
+                          w={4}
+                          h={4}
+                          display="flex"
+                          alignItems="center"
+                          justifyContent="center"
+                        >
+                          {index < activeStep ? (
+                            <IoCheckmark />
+                          ) : (
+                            <Text mb={0} fontSize={"sm"}>{index + 1}</Text>
+                          )}
+                        </Box>
+                      </StepIndicator>
+
+                      <Box flexShrink="0" ml={2}>
+                        <StepTitle mb={0} fontSize="sm" >
+                          <Text
+                            mb={0}
+                            fontSize="sm"
+                            fontWeight={500}
+                            color={index <= activeStep ? '#3725EA' : 'gray.500'}
+                          >
+                            {step.title}
+                          </Text>
+                        </StepTitle>
+                      </Box>
+
+                      {index !== steps.length - 1 && (
+                        <StepSeparator borderColor="gray.300" />
+                      )}
+                    </Step>
+                  ))}
+                </Stepper>
+              </Box>
+            </Box>
+            <Divider color={"#f6f1fc"} />
+
+            {/* Conditionally render form fields based on active step */}
+            <Box mt={6}>
+              <Stack spacing={4}>
+                {/* Step 1 Content: Create Wallet Policy */}
+                {activeStep === 0 && (
+                  <BenifitStepOne />
+                )}
+
+                {/* Step 2 Content: Approval Policy */}
+                {activeStep === 1 && (
+                  <BenifitStepTwo />
+                )}
+
+                {/* Step 3 Content: Submission Policy */}
+                {activeStep === 2 && (
+                  <BenifitStepThree />
+                )}
+
+                {/* Step 4 Content: Define Budget */}
+                {activeStep === 3 && (
+                  <Box>
+                    <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Define Budget</Text>
+                    <RupeeSlider />
+                  </Box>
+                )}
+
+                {/* Stepper Controls */}
+                <HStack justifyContent="center" my={4}>
+                  <Button
+                    onClick={prevStep}
+                    isDisabled={activeStep === 0}
+                    fontSize={"sm"}
+                    h={8}
+                  >
+                    Previous
+                  </Button>
+                  <PrimaryButton title={"Save & Proceed"}
+                    onClick={nextStep}
+                    isDisabled={activeStep === steps.length - 1}
+                  />
+                </HStack>
+              </Stack>
+            </Box>
+
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default CreateBenefitWalletModal;

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

@@ -0,0 +1,194 @@
+import {
+    Box,
+    FormLabel,
+    VStack,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Radio,
+    RadioGroup,
+    Text,
+    HStack,
+    Select,
+    Checkbox,
+    Button,
+    StackDivider,
+  } from "@chakra-ui/react";
+  import React, { useState } from "react";
+  import { MdCurrencyRupee } from "react-icons/md";
+  import { CiCircleInfo } from "react-icons/ci";
+  import { CiSettings } from "react-icons/ci";
+  import { IoMdArrowDropup } from "react-icons/io";
+  import RupeeSlider from "../../../Components/RupeeSlider/RupeeSlider";
+  
+  const DefineBudget = () => {
+    const [selectedDepartment, setSelectedDepartment] = useState("Finance");
+    const [budget, setBudget] = useState("");
+  
+    const employees = [
+      { name: "Sr. accountant", amount: "₹ 25,000", percentage: "50%" },
+      { name: "Reethik thota", amount: "₹ 25,000", percentage: "50%" },
+    ];
+  
+    const departments = ["Sales", "Design", "Development", "IT", "Management"];
+  
+    return (
+      <Box
+        display="flex"
+        w="100%"
+        flexDirection="column"
+        alignItems="flex-start"
+        gap={4}
+      >
+        <Text fontSize="sm" fontWeight="600" color={"#383838"}>
+          Define budget for department
+        </Text>
+  
+        <Text fontSize="sm" fontWeight="600" color={"#3F4754"}>
+          Departments
+        </Text>
+  
+        <VStack bgColor="#6311CB08" alignItems="flex-start" spacing={4} w="100%">
+          {/* Department Radio Selection */}
+          <RadioGroup value={selectedDepartment} onChange={setSelectedDepartment}>
+            <VStack alignItems="flex-start">
+              <Radio value="Finance" colorScheme="purple">
+                Finance
+              </Radio>
+            </VStack>
+          </RadioGroup>
+  
+          <Box borderBottom="0.5px solid #3725EA3D" w="100%" />
+  
+          <HStack justifyContent="space-between" w="100%" alignItems="center">
+            {/* Budget Input */}
+            <VStack alignItems="flex-start" w="50%">
+              <FormLabel
+                color="#3F4754"
+                fontSize="small"
+                fontWeight={600}
+                htmlFor="budget-input"
+              >
+                Budget for this department
+              </FormLabel>
+              <InputGroup w="100%">
+                <InputLeftElement pointerEvents="none">
+                  <MdCurrencyRupee color="#636F83" size={16} />
+                </InputLeftElement>
+                <Input
+                  id="budget-input"
+                  type="tel"
+                  value={budget}
+                  onChange={(e) => setBudget(e.target.value)}
+                />
+              </InputGroup>
+            </VStack>
+  
+            {/* Frequency Selection */}
+            <VStack alignItems="flex-start" w="50%">
+              <FormLabel
+                color="#3F4754"
+                fontSize="small"
+                fontWeight={600}
+                htmlFor="frequency-select"
+              >
+                Frequency
+              </FormLabel>
+              <Select id="frequency-select" placeholder="Select frequency">
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
+              </Select>
+            </VStack>
+          </HStack>
+  
+          <VStack alignItems="flex-start">
+            <HStack alignItems="center">
+              <Checkbox colorScheme="purple">
+                <Text as="span" fontSize="small">
+                  Checkbox
+                </Text>
+              </Checkbox>
+              <CiCircleInfo fontSize="medium" color="purple" />
+            </HStack>
+            <HStack>
+              <CiSettings fontSize="medium" color="purple" />
+              <Text as="span" fontSize="small">
+                Advance Setup
+              </Text>
+              <Text fontSize="small" as="span">
+                {"( Set budget per employee ) "}
+              </Text>
+              <IoMdArrowDropup fontSize="small" />
+            </HStack>
+          </VStack>
+  
+          {/* Render employee list with map */}
+          <VStack bgColor="#FFFFFF" p={2} w={"100%"} alignItems="flex-start">
+            {employees.map((employee, index) => (
+              <HStack key={index} alignItems="center">
+                <Checkbox colorScheme="purple">
+                  <Text as="span" fontSize="small">
+                    {employee.name}
+                  </Text>
+                </Checkbox>
+                <HStack
+                  bgColor="#3725EA14"
+                  borderRadius="5px"
+                  h="31px"
+                  pt={4}
+                  px={2}
+                  alignItems="center"
+                  justifyContent="center"
+                  spacing={2}
+                >
+                  <Text
+                    color="#3725EA"
+                    fontSize="small"
+                    fontWeight={500}
+                    aria-label="Amount"
+                  >
+                    {employee.amount}
+                  </Text>
+                  <Text
+                    color="#747474"
+                    fontSize="small"
+                    fontWeight={500}
+                    aria-label="Percentage"
+                  >
+                    {employee.percentage}
+                  </Text>
+                </HStack>
+              </HStack>
+            ))}
+          </VStack>
+  
+          <HStack justifyContent="space-between" w="100%">
+            <VStack spacing={4} align="start" mb={6}>
+              <Checkbox>Manager</Checkbox>
+              <Checkbox>Manager</Checkbox>
+            </VStack>
+            <Button colorScheme="purple" size="md" w="81px">
+              Save
+            </Button>
+          </HStack>
+  
+          {/* Render department checkboxes with map */}
+          <VStack
+            w="100%"
+            spacing={4}
+            align="start"
+            mt={6}
+            divider={<StackDivider borderColor="gray.200" />}
+          >
+            {departments.map((department, index) => (
+              <Checkbox key={index}>{department}</Checkbox>
+            ))}
+          </VStack>
+        </VStack>
+      </Box>
+    );
+  };
+  
+  export default DefineBudget;
+  

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

@@ -0,0 +1,249 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Divider,
+  HStack,
+  Icon,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Radio,
+  Tag,
+  TagLabel,
+  Text,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+//   import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  Tabs,
+  TabList,
+  Tab,
+  TabIndicator,
+  TabPanels,
+  TabPanel,
+} from "@chakra-ui/react";
+import Sales from "./Sales";
+
+const RequestModal = () => {
+ 
+
+  const transactionLimits = [
+    { period: "Daily", amount: "₹ 5000" },
+    { period: "Weekly", amount: "₹ 25000" },
+    { period: "Monthly", amount: "₹ 50000" },
+  ];
+
+  const Submission = [
+    { receipt: "Required for all transaction", natureofreceipt: "Printed" },
+  ];
+
+  const departmentBudget = [
+    { name: "Reethik thota", amt: "₹ 25000" },
+    { name: "Pooja patade", amt: "₹ 25000 " },
+  ];
+
+  const approvers1 = [
+    { name: "Reethik thota", role: "Bill approver" },
+    { name: "Reethik thota", role: "Bill approver" },
+  ];
+  const approvers2 = [
+    { name: "Reethik thota", role: "Bill approver" },
+    { name: "Reethik thota", role: "Bill approver" },
+  ];
+  return (
+    <Box>
+      <VStack w="100%" bgColor="#FFFFFF" p={4} alignItems="flex-start" gap={3}>
+        <Text as="span" color="#3725EA" fontWeight={500} fontSize="medium">
+          Food wallet policy
+        </Text>
+        <Text as="span" color="#667085" fontSize="xs" fontWeight={400}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa
+          mi.
+        </Text>
+
+        <HStack w="100%" justifyContent="space-between">
+          <HStack>
+            <Text as="span" color="#565D6C" fontSize="small" fontWeight={500}>
+              Wallet type
+            </Text>
+            <Text as="span" fontWeight={600} color="#121212" fontSize="small">
+              Prepaid
+            </Text>
+          </HStack>
+          <HStack>
+            <Text as="span" color="#565D6C" fontSize="small" fontWeight={500}>
+              Transaction type
+            </Text>
+            <Text as="span" fontWeight={600} color="#121212" fontSize="small">
+              ATM, Contactless
+            </Text>
+          </HStack>
+        </HStack>
+      </VStack>
+
+      <VStack w="100%" bgColor="#FFFFFF" p={4} alignItems="flex-start">
+        <Text as="span" color="#1A1A1A" fontWeight={600} fontSize="small">
+          Transaction limit
+        </Text>
+        <HStack w="100%" alignItems="flex-start" gap={3}>
+          {transactionLimits.map((limit, index) => (
+            <HStack key={index}>
+              <Text as="span" color="#565D6C" fontSize="small" fontWeight={500}>
+                {limit.period}
+              </Text>
+              <Text as="span" fontWeight={600} color="#121212" fontSize="small">
+                {limit.amount}
+              </Text>
+            </HStack>
+          ))}
+        </HStack>
+      </VStack>
+
+      <VStack p={4} bgColor="#FFFFFF" alignItems="flex-start">
+        <Text color="#1A1A1A" fontSize="small" fontWeight={600}>
+          Approver flow 1
+        </Text>
+        <HStack>
+          <Text fontSize="small" color="#565D6C">
+            Amount
+          </Text>
+          <Text fontSize="small" fontWeight={600} color="#565D6C">
+            ₹ 500
+          </Text>
+        </HStack>
+
+        <Tabs variant="soft-rounded" colorScheme="purple">
+          <HStack>
+            <Text as="span" fontSize="small">
+              Department
+            </Text>
+            <TabList>
+              <Tab bgColor="#EFE3FF">Sales</Tab>
+              <Tab bgColor="#EFE3FF">Design</Tab>
+              <Tab bgColor="#EFE3FF">Finance</Tab>
+            </TabList>
+          </HStack>
+
+          <TabPanels>
+            <TabPanel>
+              <Sales />
+            </TabPanel>
+            <TabPanel>
+              <Text>Design</Text>
+            </TabPanel>
+            <TabPanel>
+              <Text>Finance</Text>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </VStack>
+      <VStack p={4} bgColor="#FFFFFF" alignItems="flex-start">
+        <Text color="#1A1A1A" fontSize="small" fontWeight={600}>
+          Submission policy
+        </Text>
+        {Submission.map((val) => (
+          <HStack
+            key={val.receipt}
+            w="100%"
+            justifyContent="space-between"
+            alignItems="flex-start"
+          >
+            <HStack bgColor="#FFFFFF">
+              <Text as="span" fontSize="small" fontWeight={400}>
+                Receipt
+              </Text>
+              <Text fontSize="small" fontWeight={600} color="#121212" as="span">
+                {val.receipt}
+              </Text>
+            </HStack>
+            <HStack bgColor="#FFFFFF">
+              <Text as="span" fontSize="small" fontWeight={400}>
+                Nature of receipt
+              </Text>
+              <Text fontSize="small" fontWeight={600} color="#121212" as="span">
+                {val.natureofreceipt}
+              </Text>
+            </HStack>
+          </HStack>
+        ))}
+      </VStack>
+      <VStack p={4} bgColor="#FFFFFF" gap={4} alignItems="flex-start">
+        <Text fontSize="small" fontWeight={600}>
+          Department budget
+        </Text>
+        <HStack>
+          <Text as="span" color="#565D6C" fontWeight={500} fontSize="small">
+            Sales
+          </Text>
+          <Text as="span" color="#121212" fontWeight={600} fontSize="small">
+            ₹ 50000
+          </Text>
+        </HStack>
+        <HStack alignItems="flex-start">
+          <Text as="span" fontSize="small" fontWeight={600} color="#565D6C">
+            Sr. accountant
+          </Text>
+
+          <VStack>
+            {departmentBudget.map((approver, index) => (
+              <HStack key={index} alignItems="flex-start">
+                <Text
+                  as="span"
+                  fontSize="small"
+                  fontWeight={700}
+                  color="#1E1E1E"
+                >
+                  {approver.name}
+                </Text>
+                <Text as="span" fontSize="small" color="#565D6C">
+                  {"( " + approver.amt + " )"}
+                </Text>
+              </HStack>
+            ))}
+          </VStack>
+        </HStack>{" "}
+        <HStack>
+          <Text as="span" color="#565D6C" fontWeight={500} fontSize="small">
+            Design
+          </Text>
+          <Text as="span" color="#121212" fontWeight={600} fontSize="small">
+            ₹ 50000
+          </Text>
+        </HStack>
+        <HStack alignItems="flex-start">
+          <Text as="span" fontSize="small" fontWeight={600} color="#565D6C">
+            Sr. accountant
+          </Text>
+
+          <VStack>
+            {departmentBudget.map((approver, index) => (
+              <HStack key={index} alignItems="flex-start">
+                <Text
+                  as="span"
+                  fontSize="small"
+                  fontWeight={700}
+                  color="#1E1E1E"
+                >
+                  {approver.name}
+                </Text>
+                <Text as="span" fontSize="small" color="#565D6C">
+                  {"( " + approver.amt + " )"}
+                </Text>
+              </HStack>
+            ))}
+          </VStack>
+        </HStack>
+      </VStack>
+    </Box>
+  );
+};
+
+export default RequestModal;

src/Pages/OptiFiiExpense/wallet/Sales.jsx

@@ -0,0 +1,63 @@
+import { HStack, Text, VStack } from "@chakra-ui/react";
+import React from "react";
+
+const Sales = () => {
+  const approvers1 = [
+    { name: "Reethik thota", role: "Bill approver" },
+    { name: "Reethik thota", role: "Bill approver" },
+  ];
+  const approvers2 = [
+    { name: "Reethik thota", role: "Bill approver" },
+    { name: "Reethik thota", role: "Bill approver" },
+  ];
+
+  const transactionLimits = [
+    { period: "Daily", amount: "₹ 5000" },
+    { period: "Weekly", amount: "₹ 25000" },
+    { period: "Monthly", amount: "₹ 50000" },
+  ];
+
+
+  return (
+    <VStack alignItems="flex-start" gap={8}>
+      <HStack alignItems="flex-start">
+        <Text as="span" fontSize="small" fontWeight={600} color="#565D6C">
+          Approver level 1 -
+        </Text>
+
+        <VStack>
+          {approvers1.map((approver, index) => (
+            <HStack key={index} alignItems="flex-start">
+              <Text as="span" fontSize="small" fontWeight={700} color="#1E1E1E">
+                {approver.name}
+              </Text>
+              <Text as="span" fontSize="small" color="#565D6C">
+                {"( " + approver.role + " )"}
+              </Text>
+            </HStack>
+          ))}
+        </VStack>
+      </HStack>
+      <HStack alignItems="flex-start">
+        <Text as="span" fontSize="small" fontWeight={600} color="#565D6C">
+          Approver level 1 -
+        </Text>
+
+        <VStack>
+          {approvers2.map((approver, index) => (
+            <HStack key={index} alignItems="flex-start">
+              <Text as="span" fontSize="small" fontWeight={700} color="#1E1E1E">
+                {approver.name}
+              </Text>
+              <Text as="span" fontSize="small" color="#565D6C">
+                {"( " + approver.role + " )"}
+              </Text>
+            </HStack>
+          ))}
+        </VStack>
+      </HStack>
+    </VStack>
+  );
+};
+
+export default Sales;

src/Pages/OptiFiiExpense/wallet/SubmissionPolicy.jsx

@@ -0,0 +1,124 @@
+import {
+    Box,
+    HStack,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Stack,
+    Text,
+    VStack,
+  } from "@chakra-ui/react";
+  import { Radio, RadioGroup } from "@chakra-ui/react";
+  import React, { useState } from "react";
+  import { MdCurrencyRupee } from "react-icons/md";
+  
+  const SubmissionPolicy = () => {
+    const [receiptRequirement, setReceiptRequirement] = useState("1");
+    const [transactionRequirement, setTransactionRequirement] = useState("1");
+    const [nature, setNature] = useState("1");
+  
+    const receiptOptions = [
+      { value: "1", label: "Required" },
+      { value: "2", label: "Not required" },
+    ];
+  
+    const transactionOptions = [
+      { value: "1", label: "All transactions" },
+      { value: "2", label: "Transactions above" },
+    ];
+  
+    const natureOptions = [
+      { value: "1", label: "Printed" },
+      { value: "2", label: "Hand written" },
+      { value: "3", label: "Both" },
+    ];
+  
+    return (
+      <Box p={0} display="flex" flexDirection="column" gap={4}>
+        <Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>
+          Create submission policy
+        </Text>
+  
+        <VStack gap={4} alignItems="flex-start">
+          <HStack mt={5}>
+            <Text as="span" color="#383838" fontSize="small" fontWeight={600}>
+              1.{" "}
+            </Text>
+            <Text as="span" color="#383838" fontSize="small" fontWeight={600}>
+              Requirement of receipt
+            </Text>
+          </HStack>
+          <RadioGroup
+            colorScheme="purple"
+            onChange={setReceiptRequirement}
+            value={receiptRequirement}
+          >
+            <Stack display="flex" flexDirection="column">
+              {receiptOptions.map((option) => (
+                <Radio key={option.value} value={option.value}>
+                  {option.label}
+                </Radio>
+              ))}
+            </Stack>
+          </RadioGroup>
+        </VStack>
+  
+        <VStack gap={4} alignItems="flex-start">
+          <Text as="span" color="#535963" fontSize="small" fontWeight={400}>
+            Required for
+          </Text>
+          <RadioGroup
+            colorScheme="purple"
+            onChange={setTransactionRequirement}
+            value={transactionRequirement}
+          >
+            <Stack display="flex" flexDirection="column">
+              {transactionOptions.map((option) =>
+                option.value === "2" ? (
+                  <HStack key={option.value} justifyContent="space-between" w="100%" alignItems="center">
+                    <Radio w="50%" value={option.value}>
+                      {option.label}
+                    </Radio>
+                    <InputGroup w="70%">
+                      <InputLeftElement pointerEvents="none">
+                        <MdCurrencyRupee color="#636F83" size={12} />
+                      </InputLeftElement>
+                      <Input type="tel" />
+                    </InputGroup>
+                  </HStack>
+                ) : (
+                  <Radio key={option.value} value={option.value}>
+                    {option.label}
+                  </Radio>
+                )
+              )}
+            </Stack>
+          </RadioGroup>
+        </VStack>
+  
+        {/* Nature of Receipt/Memo */}
+        <VStack gap={4} alignItems="flex-start">
+          <HStack mt={5}>
+            <Text as="span" color="#383838" fontSize="small" fontWeight={600}>
+              2.{" "}
+            </Text>
+            <Text as="span" color="#383838" fontSize="small" fontWeight={600}>
+              What nature of receipt/memo
+            </Text>
+          </HStack>
+          <RadioGroup colorScheme="purple" onChange={setNature} value={nature}>
+            <Stack display="flex" flexDirection="column">
+              {natureOptions.map((option) => (
+                <Radio key={option.value} value={option.value}>
+                  {option.label}
+                </Radio>
+              ))}
+            </Stack>
+          </RadioGroup>
+        </VStack>
+      </Box>
+    );
+  };
+  
+  export default SubmissionPolicy;
+  

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,78 @@
+import { Box, Button, Flex, Radio, RadioGroup, Text, useBreakpointValue, VStack } from "@chakra-ui/react";
+import React, { useState } from "react";
+
+const ApplyForDigitalCard = () => {
+  const [step, setStep] = useState(1);
+  const steps = [
+    { label: "Select card type", description: "Pending" },
+    { 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 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">
+                  {/* {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>
+        <Box mt={4}>{steps[currentStep].label}</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,198 @@
+import React, { useContext, useState } from "react";
+import {
+  Box,
+  Button,
+  Flex,
+  Radio,
+  RadioGroup,
+  Text,
+  VStack,
+  useBreakpointValue,
+} from "@chakra-ui/react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import SelectCard from "./SelectCard";
+import DigiTable from "./DigiTable";
+import WhereToShare from "./WhereToShare";
+import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton";
+import mobilepng from "../../../assets/mobileCard.png";
+import cardfooter from "../../../assets/cardFooter.png";
+import cardfooter2 from "../../../assets/cardFooter2.png";
+import cardfooter3 from "../../../assets/cardFooter3.png";
+import { useNavigate } from "react-router-dom";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+
+const Stepper = () => {
+  const [step, setStep] = useState(1);
+  const { useForm } = useContext(GlobalStateContext);
+  const {
+    selectedCardIndex,
+    setSelectedCardIndex,
+    selectionCount,
+    setSelectionCount,
+    showAnotherComponent,
+    setShowAnotherComponent,
+    hasProceeded,
+    setHasProceeded,
+  } = useContext(GlobalStateContext);
+  const { isOpen, onOpen, onClose } = useContext(GlobalStateContext);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  const navigate = useNavigate();
+  
+  const handleNext = () => {
+    if (selectedCardIndex < selectedCardIndex.length) {
+      setStep(selectedCardIndex + 1);
+    }
+    if (selectedCardIndex !== null) {
+      setHasProceeded(true);
+      // onOpen();
+    } else {
+      alert("Please select a card before proceeding.");
+    }
+    setShowAnotherComponent(!showAnotherComponent);
+  };
+  // const handleNext = () => {
+  //   if (selectedCardIndex !== null) {
+  //     if (selectedCardIndex < maxSteps - 1) {
+  //       setStep(selectedCardIndex + 1);
+  //     }
+  //     setHasProceeded(true);
+  //   } else {
+  //     alert("Please select a card before proceeding.");
+  //   }
+  //   setShowAnotherComponent((prevState) => !prevState);
+  // };
+
+  const handlePrev = () => {
+    navigate("/optifii-gifts-dashboard/apply-for-giftcards");
+  };
+
+  console.log(selectedCardIndex, "Neko-chan");
+  const steps = [
+    {
+      component: (
+        <SelectCard
+          handleNext={handleNext}
+        />
+      ),
+      label: "Select card type",
+      description: "In Progress",
+    },
+    {
+      component: <WhereToShare handleNext={handleNext} />,
+      label: "Where to share?",
+      description: "Pending",
+    },
+    {
+      component: <DigiTable handleNext={handleNext} />,
+      label: "Select employee",
+      description: "Pending",
+    },
+  ];
+
+  const currentStep = step - 1;
+  const circleSize = useBreakpointValue({ base: "30px", md: "40px" });
+
+  return (
+    <Box bgColor="#F3F3F9" {...OPACITY_ON_LOAD} overflow={"scroll"} p={4}>
+      <Box>
+        <Box bgColor="#fff" maxW="100%" rounded={"md"} p={4} mb={4}>
+          <RadioGroup
+            value={String(step)}
+            // value={String(selectedCardIndex)}
+            onChange={(val) => setStep(Number(val))}
+            // onChange={(val) => setSelectedCardIndex(parseInt(val, 10))}
+          >
+            <Flex
+              justifyContent="space-between"
+              alignItems="center"
+              position="relative"
+            >
+              {steps.map((item, index) => (
+                <React.Fragment key={index}>
+                  <VStack spacing={0}>
+                    <Radio
+                      value={String(index + 1)}
+                      colorScheme="purple"
+                      size="lg"
+                    />
+                    <Text
+                      fontSize="xs"
+                      color="#9C9C9C"
+                      fontWeight={400}
+                      mb={0}
+                      mt={1}
+                    >
+                      STEP {index + 1}
+                    </Text>
+                    <Text color="#000000" fontWeight={600} fontSize="sm" mb={0}>
+                      {item.label}
+                    </Text>
+                    <Text
+                      fontSize="xs"
+                      mb={0}
+                      fontWeight={600}
+                      color={
+                        index + 1 === step
+                          ? "#3725EA"
+                          : index < step
+                          ? "green"
+                          : "#666666"
+                      }
+                    >
+                      {index + 1 === step
+                        ? "In Progress"
+                        : index < step
+                        ? "Completed"
+                        : "Pending"}
+                    </Text>
+                  </VStack>
+
+                  {index < steps.length - 1 && (
+                    <Box
+                      flex="1"
+                      height="1px"
+                      mb={"60px"}
+                      position="relative"
+                      top="50%"
+                      bgColor={index + 1 <= step ? "#3725EA" : "#e2e2e2"}
+                    />
+                  )}
+                </React.Fragment>
+              ))}
+            </Flex>
+          </RadioGroup>
+        </Box>
+
+        {/* Stepper Content */}
+        <Box bgColor="#fff" maxW="100%" rounded={"md"} p={4}>
+          <Text color="#000000" fontWeight={600} fontSize="small">
+            {steps[currentStep].label}
+          </Text>
+          {/* Step Component */}
+          <Box>{steps[currentStep].component}</Box>
+
+          {/* Navigation Buttons */}
+          <Box mt={8}>
+            <PrimaryButton
+              title={" Save & Proceed"}
+              onClick={handleNext}
+              isDisabled={step === steps.length}
+            />
+            {/* {selectedCardIndex > 0 && (
+              <Button mt={4} onClick={handlePrev}>
+                Previous
+              </Button>
+            )} */}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Stepper;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx

@@ -0,0 +1,209 @@
+import {
+  Box,
+  Button,
+  Text,
+  useDisclosure,
+  Flex,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Select,
+  Image,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import FileUploader from "../../../Components/FileUploader/FileUploader";
+import { useRef } from "react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import DigiTable from "./DigitalTable";
+import { BsFilterRight } from "react-icons/bs";
+import { ChevronDownIcon } from "@chakra-ui/icons";
+import { LuListFilter } from "react-icons/lu";
+import PrimaryButton from "../../../Components/Buttons/PrimaryButton";
+import SuccesIcon from "../../../assets/Modaltick.png";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react";
+
+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 h="100%" {...OPACITY_ON_LOAD} overflowX="scroll">
+      <Box
+        display="flex"
+        w="100%"
+        flexDirection="column"
+        bgColor="#FFFFFF"
+        alignItems="start"
+        rounded={"md"}
+      >
+        <Text fontSize="sm" fontWeight={600}>
+          Import employee
+        </Text>
+        <FileUploader />
+      </Box>
+      <HStack
+        bg={"#F4F4F4"}
+        p={2}
+        rounded={"md"}
+        mt={2}
+        justifyContent={"center"}
+      >
+        <Text
+          align="center"
+          color="#0F0F0F"
+          fontWeight={500}
+          fontSize="small"
+          mb={0}
+        >
+          Download a{" "}
+          <span style={{ color: "#3725EA", fontWeight: 700 }}>
+            sample spreadsheet
+          </span>{" "}
+          to quickly start your import
+        </Text>
+      </HStack>
+      {/* Divider with "OR" */}
+      <Flex alignItems="center" my={6}>
+        <Box flex="1" borderBottom="1px" borderColor="#DCDCDC" />
+        <Text px={4} fontSize={"sm"} fontWeight={500} color="#9C9C9C" mb={0}>
+          OR
+        </Text>
+        <Box flex="1" borderBottom="1px" borderColor="#DCDCDC" />
+      </Flex>
+
+      <Box>
+        <HStack w={"100%"} justifyContent={"space-between"}>
+          <Flex align={"center"} gap={5}>
+            <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>
+            <Flex align={"center"} gap={2}>
+              <Text as={"span"} fontSize={"xs"}>
+                Show
+              </Text>
+              <Select borderRadius={5} size={"sm"}>
+                <option value="10">10</option>
+                <option value="30">30</option>
+                <option value="50">50</option>
+                <option value="80">80</option>
+              </Select>
+              <Text as={"span"} fontSize={"xs"}>
+                entries
+              </Text>
+            </Flex>
+          </Flex>
+          <HStack>
+            <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>
+            <PrimaryButton onClick={onOpen} title={"Proceed"} px={4} />
+          </HStack>
+        </HStack>
+        <DigiTable />
+      </Box>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>
+            <Image src={SuccesIcon} w={"48px"} />
+          </ModalHeader>
+          <ModalBody>
+            <HStack>
+              <Text color="#A0A0A0" fontWeight={400} fontSize="small">
+                Order Id:
+              </Text>
+              <Text color="#3725EA" fontWeight={400} fontSize="small">
+                #451245
+              </Text>
+            </HStack>
+            <Text color="#101828" fontSize="medium" fontWeight={600}>
+            Your employee list has been submitted
+            </Text>
+            <Text color="#A0A0A0" fontWeight={400} fontSize="small">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              consectetur adipiscing elit.
+            </Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              color={"#344054"}
+              bgColor="#ffff"
+              fontSize="small"
+              fontWeight={600}
+            >
+              Submit new application
+            </Button>
+            <Button
+              bgColor="#6311CB"
+              color="#fff"
+              _hover={{ bgColor: "#6311CB" }}
+              fontSize="small"
+              onClick={onClose}
+            >
+              Check status
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default BrandVoucherTable;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx

@@ -0,0 +1,202 @@
+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) => ({
+      id: item.id,
+      "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}  overflowX={"scroll"}>
+        <Box
+          rounded={"xl"}
+          py={3}
+          display={"flex"}
+          flexDirection={"column"}
+          bg={"#fff"}
+          shadow={"md"}
+          minH={"100%"}
+        >
+          <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/ApplyForGiftCard/MultipleAddress.jsx

@@ -0,0 +1,26 @@
+import { Box, FormControl, FormLabel, Input, Select, Text } from "@chakra-ui/react";
+import { Grid, GridItem } from "@chakra-ui/react";
+import React from "react";
+import PrimaryButton from "../../../Components/Buttons/PrimaryButton";
+import { ArrowForwardIcon } from "@chakra-ui/icons";
+import { MdKeyboardArrowRight } from "react-icons/md";
+
+
+const MultipleAddress = () => {
+    return (
+        <Box>
+            <Box p={4} rounded={"md"} shadow={"md"} border={"1px dashed #000"} bg={"#f9f6fd"}>
+                <Text fontWeight={600} fontSize="small" mb={4}>
+                    Awesome! Proceed to select the multiple users..
+                </Text>
+                <PrimaryButton 
+                title={"Select Employees and Addresses"}
+                rightIcon={<MdKeyboardArrowRight size={16} />}
+                px={4}
+                />
+            </Box>
+        </Box>
+    );
+};
+
+export default MultipleAddress;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx

@@ -0,0 +1,187 @@
+import { Box, Button, Icon, Image, Text, VStack } from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import VanillaTilt from "vanilla-tilt";
+import mobilepng from "../../../assets/mobileCard.png";
+import cardfooter from "../../../assets/cardFooter.png";
+import cardfooter2 from "../../../assets/cardFooter2.png";
+import cardfooter3 from "../../../assets/cardFooter3.png";
+import { IoMdCheckmark } from "react-icons/io";
+import DigiTable from "./DigiTable";
+import WhereToShare from "./WhereToShare";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+
+const SelectCard = ({ handleNext }) => {
+  const {
+    selectedCardIndex,
+    setSelectedCardIndex,
+    selectionCount,
+    setSelectionCount,
+    hasProceeded,
+  } = useContext(GlobalStateContext);
+  const tiltRefs = useRef([]);
+
+  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,
+      component: <WhereToShare />,
+    },
+    {
+      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,
+      component: <DigiTable />,
+    },
+    {
+      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,
+      component: <WhereToShare />,
+    },
+  ];
+
+  const handleCardClick = (index) => {
+    setSelectedCardIndex(index);
+    setSelectionCount(selectionCount + 1);
+  };
+
+  // VanillaTilt effect
+  useEffect(() => {
+    tiltRefs.current.forEach((node) => {
+      if (node) {
+        VanillaTilt.init(node, {
+          max: 8,
+          speed: 700,
+          glare: true,
+          scale: 1.01,
+          "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
+    return () => {
+      tiltRefs.current.forEach((node) => {
+        if (node?.vanillaTilt) {
+          node.vanillaTilt.destroy();
+        }
+      });
+    };
+  }, []);
+
+  return (
+    <Box>
+      {hasProceeded && selectedCardIndex !== null ? (
+        <Box>{cards[selectedCardIndex].component}</Box>
+      ) : (
+        <Box
+          display="flex"
+          justifyContent={"start"}
+          alignItems={"start"}
+          gap={6}
+        >
+          {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={0}
+                position="relative"
+              >
+                <Button
+                  h={8}
+                  px={6}
+                  bgColor={selectedCardIndex === index ? "#fff" : "transparent"}
+                  color={selectedCardIndex === index ? "purple.500" : "#fff"}
+                  border="1px solid #fff"
+                  fontSize="small"
+                  fontWeight={500}
+                  _hover={{ bgColor: "transparent", color: "white" }}
+                  onClick={() => handleCardClick(index)}
+                >
+                  {selectedCardIndex === index ? (
+                    <>
+                      <Icon as={IoMdCheckmark} mr={2} />
+                      Selected
+                    </>
+                  ) : (
+                    "Select"
+                  )}
+                </Button>
+
+                <Text as="span" fontSize="lg" fontWeight={400} mb={0} mt={4}>
+                  {card.title}
+                </Text>
+
+                <Text as="span" fontSize="lg" fontWeight={500} mb={2}>
+                  {card.subtitle}
+                </Text>
+
+                <Text as="span" fontSize="xs" 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 mt={8}>
+        <Button colorScheme="purple" onClick={handleProceed}>
+          Save and Proceed
+        </Button>
+      </Box> */}
+    </Box>
+  );
+};
+
+export default SelectCard;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx

@@ -0,0 +1,146 @@
+import {
+  Box,
+  FormControl,
+  FormLabel,
+  Input,
+  Select,
+  Text,
+  Grid,
+  GridItem,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  useDisclosure,
+  Icon,
+  Image,
+  HStack,
+} from "@chakra-ui/react";
+import React, { useContext } from "react";
+// import { useForm } from "react-hook-form";
+import PrimaryButton from "../../../Components/Buttons/PrimaryButton";
+import SuccesIcon from "../../../assets/Modaltick.png";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+const formsInfos = [
+  { label: "Address line 1", name: "address1" },
+  { label: "Address line 2", name: "address2" },
+  { label: "Pincode", name: "pincode" },
+  { label: "City", name: "city" },
+  { label: "Single Point Activation Number", name: "span" },
+];
+
+const SingleAddress = () => {
+  const { useForm } = useContext(GlobalStateContext);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+  const { isOpen, onOpen, onClose } = useContext(GlobalStateContext);
+
+  const onSubmit = (data) => {
+    console.log(data);
+    onOpen();
+  };
+
+  return (
+    <Box>
+      <Text color="#5E5E5E" fontWeight={500} fontSize="small" mb={4}>
+        Fill address details
+      </Text>
+
+      <FormControl as="form">
+        <Grid templateColumns="repeat(2, 1fr)" gap={6}>
+          {formsInfos.map((val) => (
+            <GridItem key={val.label}>
+              <FormLabel fontSize="xs" color="#344054">
+                {val.label}
+              </FormLabel>
+
+              {val.label === "City" ? (
+                <Select
+                  placeholder="Select city"
+                  {...register(val.name, { required: "City is required" })}
+                >
+                  <option value="new-york">New York</option>
+                  <option value="los-angeles">Los Angeles</option>
+                  <option value="chicago">Chicago</option>
+                  <option value="houston">Houston</option>
+                </Select>
+              ) : (
+                <Input
+                  type="text"
+                  {...register(val.name, {
+                    required: `${val.label} is required`,
+                  })}
+                />
+              )}
+
+              {errors[val.name] && (
+                <Text fontSize="xs" color="red.500">
+                  {errors[val.name]?.message}
+                </Text>
+              )}
+            </GridItem>
+          ))}
+        </Grid>
+
+        <PrimaryButton
+          type="submit"
+          title={"Submit"}
+          onClick={handleSubmit(onSubmit)}
+        />
+      </FormControl>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>
+            <Image src={SuccesIcon} w={"48px"} />
+          </ModalHeader>
+          <ModalBody>
+            <HStack>
+              <Text color="#A0A0A0" fontWeight={400} fontSize="small">
+                Order Id:
+              </Text>
+              <Text color="#3725EA" fontWeight={400} fontSize="small">
+                #451245
+              </Text>
+            </HStack>
+            <Text color="#101828" fontSize="medium" fontWeight={600}>
+              Your employee list has been submitted
+            </Text>
+            <Text color="#A0A0A0" fontWeight={400} fontSize="small">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              consectetur adipiscing elit.
+            </Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              color={"#344054"}
+              bgColor="#ffff"
+              fontSize="small"
+              fontWeight={600}
+            >
+              Submit new application
+            </Button>
+            <Button
+              bgColor="#6311CB"
+              color="#fff"
+              _hover={{ bgColor: "#6311CB" }}
+              fontSize="small"
+              onClick={onClose}
+            >
+              Check status
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default SingleAddress;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx

@@ -0,0 +1,56 @@
+import { Box, Divider, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import SingleAddress from "./SingleAddress";
+import MultipleAddress from "./MultipleAddress";
+
+const WhereToShare = ({ register }) => {
+  const [selectedValue, setSelectedValue] = useState("1");
+
+  const renderContent = () => {
+    switch (selectedValue) {
+      case "1":
+        return <SingleAddress />;
+      case "2":
+        return <MultipleAddress/>;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <RadioGroup onChange={setSelectedValue} value={selectedValue}>
+        <Stack spacing={4} direction="row">
+          <Box
+            p={1}
+            display="flex"
+            flexDirection="row"
+            borderRadius="5px"
+          >
+            <Radio size="sm" colorScheme="purple" value="1">
+              <Text color={"#3F4754"} mb={0} fontWeight={500} fontSize={"xs"}>
+                Single address
+              </Text>
+            </Radio>
+          </Box>
+          <Box
+            p={2}
+            display="flex"
+            flexDirection="row"
+            borderRadius="5px"
+          >
+            <Radio size="sm" colorScheme="purple" value="2">
+              <Text color={"#3F4754"} mb={0} fontWeight={500} fontSize={"xs"}>
+                Multiple address
+              </Text>
+            </Radio>
+          </Box>
+        </Stack>
+      </RadioGroup>
+      <Divider/>
+      <Box mt={4}>{renderContent()}</Box>
+    </>
+  );
+};
+
+export default WhereToShare;

src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx

@@ -0,0 +1,286 @@
+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) => ({
+    id: item.id,
+    "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/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";
@@ -65,24 +59,30 @@ import asian from "../../assets/asain.png";
 import goth from "../../assets/goth.png";
 import info from "../../assets/info.png";
 import redinfo from "../../assets/redinfo.png";
+
 const GiftCard = () => {
   const { digital } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCheckBox, setSelectedCheckBox] = useState([]);
   const [users, setusers] = useState(50);
+  const [tabIndex, setTabIndex] = useState(
+    () => parseInt(sessionStorage.getItem("activeTabIndex")) || 0
+  );
+
+  useEffect(() => {
+    sessionStorage.setItem("activeTabIndex", tabIndex);
+  }, [tabIndex]);
 
   useEffect(() => {
-    // Set isLoading to true
     setIsLoading(true);
 
-    // Simulate a 3-second delay
     const timer = setTimeout(() => {
-      setIsLoading(false); // Set isLoading to false after 3 seconds
+      setIsLoading(false);
     }, 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 = [
@@ -93,9 +93,6 @@ const GiftCard = () => {
     "Total employees",
     "Total valuation",
     "Activation Status",
-    // "Role",
-    // "Status",
-    // "Action",
   ];
 
   const physicaltableHeadRow = [
@@ -121,17 +118,18 @@ const GiftCard = () => {
   ];
 
   const physicalCardArr = digital.map((item, index) => ({
+    id: item.id,
     "Sr. no": (
       // <Radio colorScheme="purple" value="1">
-      <Checkbox colorScheme="purple">
-        <Text
-          as={"span"}
-          display={"flex"}
-          gap={2}
-          alignItems={"center"}
-          fontSize={"xs"}
-        >
-          {/* <Icon
+      // <Checkbox colorScheme="purple">
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+      >
+        {/* <Icon
             as={PiReceipt}
             boxSize={8}
             p={1.5}
@@ -139,9 +137,9 @@ const GiftCard = () => {
             rounded={"full"}
           /> */}
 
-          {item?.id}
-        </Text>
-      </Checkbox>
+        {item?.id}
+      </Text>
+      // </Checkbox>
     ),
     "Order ID": (
       <Text
@@ -185,7 +183,7 @@ const GiftCard = () => {
             ? "green"
             : item?.status === "Inactive"
             ? "red"
-            : "gray" // default border color if status doesn't match any condition
+            : "gray"
         }`}
         p={1}
         px={3}
@@ -216,21 +214,11 @@ const GiftCard = () => {
           bgColor="#F9F5FF"
           left="5.9rem"
           boxShadow="md"
+          justifyContent={"center"}
         >
-          <Box
-            display="flex"
-            flexDirection="row"
-            alignItems="center"
-            pt={1}
-            pr={1}
-          >
-            <Text color="#7F56D9" fontSize="small">
-              +
-            </Text>
-            <Text color="#7F56D9" fontSize="small">
-              {users}
-            </Text>
-          </Box>
+          <Text color="#7F56D9" fontSize="xs" mb={0}>
+            +{users}
+          </Text>
         </Box>
       </Box>
     ),
@@ -353,36 +341,17 @@ const GiftCard = () => {
   }));
 
   const extractedArray = digital.map((item, index) => ({
+    id: item.id,
     "Sr. no": (
       // <Radio colorScheme="purple" value="1">
-      <Checkbox colorScheme="purple">
-        <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"}
-          /> */}
+      // <Checkbox colorScheme="purple">
 
-          {item?.id}
-        </Text>
-      </Checkbox>
-    ),
-    "Order ID": (
       <Text
         as={"span"}
         display={"flex"}
         gap={2}
         alignItems={"center"}
         fontSize={"xs"}
-        color="#3725EA"
       >
         {/* <Icon
             as={PiReceipt}
@@ -392,9 +361,31 @@ const GiftCard = () => {
             rounded={"full"}
           /> */}
 
-        {item?.orderid}
+        {item?.id}
       </Text>
     ),
+    "Order ID": (
+      <NavLink to="/gift-card/digital-application-status">
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+          color="#3725EA"
+        >
+          {/* <Icon
+            as={PiReceipt}
+            boxSize={8}
+            p={1.5}
+            bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
+            rounded={"full"}
+          /> */}
+
+          {item?.orderid}
+        </Text>
+      </NavLink>
+    ),
     "Email Address": item?.emailAddress,
     "Date & time": item?.dateTime,
     "Total valuation": item?.totalvaluation,
@@ -448,21 +439,11 @@ const GiftCard = () => {
           bgColor="#F9F5FF"
           left="5.9rem"
           boxShadow="md"
+          justifyContent={"center"}
         >
-          <Box
-            display="flex"
-            flexDirection="row"
-            alignItems="center"
-            pt={1}
-            pr={1}
-          >
-            <Text color="#7F56D9" fontSize="small">
-              +
-            </Text>
-            <Text color="#7F56D9" fontSize="small">
-              {users}
-            </Text>
-          </Box>
+          <Text color="#7F56D9" fontSize="xs" mb={0}>
+            +{users}
+          </Text>
         </Box>
       </Box>
     ),
@@ -530,30 +511,30 @@ const GiftCard = () => {
   }));
 
   const instaCardArr = digital.map((item, index) => ({
+    id: item.id,
     "Sr. no": (
       // <Radio colorScheme="purple" value="1">
-      <Checkbox colorScheme="purple">
-        <Text
-          as={"span"}
-          display={"flex"}
-          gap={2}
-          alignItems={"center"}
-          fontSize={"xs"}
-        >
-          {/* <Icon
+      // <Checkbox colorScheme="purple">
+      <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?.id}
-        </Text>
-      </Checkbox>
+        {item?.id}
+      </Text>
+      // </Checkbox>
     ),
     "Order ID": (
-      <NavLink to={"/application-status"}>
+      <NavLink to={"/gift-card/application-status"}>
         <Text
           as={"span"}
           display={"flex"}
@@ -628,21 +609,11 @@ const GiftCard = () => {
           bgColor="#F9F5FF"
           left="5.9rem"
           boxShadow="md"
+          justifyContent={"center"}
         >
-          <Box
-            display="flex"
-            flexDirection="row"
-            alignItems="center"
-            pt={1}
-            pr={1}
-          >
-            <Text color="#7F56D9" fontSize="small">
-              +
-            </Text>
-            <Text color="#7F56D9" fontSize="small">
-              {users}
-            </Text>
-          </Box>
+          <Text color="#7F56D9" fontSize="xs" mb={0}>
+            +{users}
+          </Text>
         </Box>
       </Box>
     ),
@@ -845,7 +816,12 @@ const GiftCard = () => {
             </Box>
           </HStack>
         </VStack>
-        <Tabs position="relative" variant="unstyled">
+        <Tabs
+          index={tabIndex}
+          onChange={(index) => setTabIndex(index)}
+          position="relative"
+          variant="unstyled"
+        >
           <TabList color="#B0B0B0">
             <Tab
               fontSize="small"
@@ -889,6 +865,9 @@ const GiftCard = () => {
                 tableHeadRow={tableHeadRow}
                 data={extractedArray}
                 isLoading={isLoading}
+                showRadioButton={true}
+                setSelectedRadio={setSelectedCheckBox}
+                selectedRadio={selectedCheckBox}
               />
             </TabPanel>
             <TabPanel>
@@ -897,6 +876,9 @@ const GiftCard = () => {
                 tableHeadRow={physicaltableHeadRow}
                 data={physicalCardArr}
                 isLoading={isLoading}
+                showRadioButton={true}
+                setSelectedRadio={setSelectedCheckBox}
+                selectedRadio={selectedCheckBox}
               />
             </TabPanel>
             <TabPanel>
@@ -905,6 +887,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,378 @@
+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) => ({
+    id: item.id,
+    "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,389 @@
+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) => ({
+    id: item.id,
+    "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/OptiFiiTaxBenefit/BeinifitOverView.jsx

@@ -0,0 +1,394 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  Flex,
+  HStack,
+  Icon,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Radio,
+  Select,
+  Tag,
+  TagLabel,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+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 MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import Food from "../../assets/icons/Food.png";
+import Fuel from "../../assets/icons/Fuel.png";
+import Gift from "../../assets/icons/gift.png";
+import books from "../../assets/icons/bookStack.png";
+import telecom from "../../assets/icons/telecom.png";
+import gadget from "../../assets/icons/gadget.png";
+import foods from "../../assets/icons/foods.png";
+import {
+  AddIcon,
+  CalendarIcon,
+  ChevronDownIcon,
+  EmailIcon,
+  SearchIcon,
+  ViewIcon,
+} from "@chakra-ui/icons";
+import {
+  MdFilterList,
+  MdNotificationsNone,
+  MdOutlineHeadsetMic,
+} from "react-icons/md";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { Link, NavLink, useNavigate } from "react-router-dom";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import { LuListFilter } from "react-icons/lu";
+import { BsFilterRight } from "react-icons/bs";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+
+const BenifitOverView = () => {
+  const [dash, setDash] = useState([
+    {
+      id: 1,
+      wallet: "Food",
+      walletAmount: "₹ 70,000",
+      balanceRemaining: "₹ 20,000",
+      status: "Approved",
+      totalEmployees: 500,
+      users: 5,
+      icon: foods,
+    },
+    {
+      id: 2,
+      wallet: "Fuel",
+      walletAmount: "₹ 50,000",
+      balanceRemaining: "₹ 15,000",
+      status: "Approved",
+      totalEmployees: 200,
+      users: 3,
+      icon: Fuel,
+    },
+    {
+      id: 3,
+      wallet: "Books & Periodicals",
+      walletAmount: "₹ 100,000",
+      balanceRemaining: "₹ 80,000",
+      status: "Pending",
+      totalEmployees: 300,
+      users: 4,
+      icon: books,
+    },
+    {
+      id: 4,
+      wallet: "Telecom",
+      walletAmount: "₹ 100,000",
+      balanceRemaining: "₹ 80,000",
+      status: "Pending",
+      totalEmployees: 300,
+      users: 4,
+      icon: telecom,
+    },
+    {
+      id: 5,
+      wallet: "Books & periodicals",
+      walletAmount: "₹ 100,000",
+      balanceRemaining: "₹ 80,000",
+      status: "Pending",
+      totalEmployees: 300,
+      users: 4,
+      icon: books,
+    },
+    {
+      id: 6,
+      wallet: "Learning & development",
+      walletAmount: "₹ 100,000",
+      balanceRemaining: "₹ 80,000",
+      status: "Pending",
+      totalEmployees: 300,
+      users: 4,
+      icon: books,
+    },
+    {
+      id: 7,
+      wallet: "Gadget & equipment",
+      walletAmount: "₹ 100,000",
+      balanceRemaining: "₹ 80,000",
+      status: "Pending",
+      totalEmployees: 300,
+      users: 4,
+      icon: gadget,
+    },
+    {
+      id: 8,
+      wallet: "Telecom",
+      walletAmount: "₹ 100,000",
+      balanceRemaining: "₹ 80,000",
+      status: "Pending",
+      totalEmployees: 300,
+      users: 4,
+      icon: telecom,
+    },
+    {
+      id: 1,
+      wallet: "Food",
+      walletAmount: "₹ 70,000",
+      balanceRemaining: "₹ 20,000",
+      status: "Approved",
+      totalEmployees: 500,
+      users: 5,
+      icon: foods,
+    },
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [users, setusers] = useState(50);
+  const [selectedRadio, setSelectedRadio] = useState([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Set isLoading to true
+    setIsLoading(true);
+
+    // Simulate a 3-second delay
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ===============================[ Table Header ]
+
+  const dashHeadSecRow = [
+    "Sr No",
+    "Wallet Name",
+    "Total employees",
+    "Amount in card",
+    "Pending amount ",
+    "Pending request",
+  ];
+
+  const dashSecArr = dash.map((item, index) => ({
+    id:item.id,
+    "Sr No": item.id,
+    "Wallet Name": (
+      <HStack key={`wallet-${index}`}>
+        {/* <Box p={2} bg="#ebe0f8" rounded="full">
+              <MdNoFood color="#6311CB" />
+            </Box> */}
+        <Image src={item.icon} h="20px" />
+        <Text mb={0} fontSize="xs">
+          {item.wallet || "Food"}
+        </Text>
+      </HStack>
+    ),
+    "Total 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="xs" mb={0}>
+            +{users}
+          </Text>
+        </Box>
+      </Box>
+    ),
+   "Amount in card": (
+      <Text key={`walletAmount-${index}`} mb={0} fontSize="xs">
+        {item.walletAmount || 5000}
+      </Text>
+    ),
+    "Pending amount ": (
+      <Text key={`balance-${index}`} mb={0} fontSize="xs">
+        {item.balanceRemaining || "₹ 2000"}
+      </Text>
+    ),
+    "Pending request": (
+      <>
+      <NavLink to="/dashboard/beinefit-overview/benefit-request">
+        <Button
+          bgColor="#6311CB"
+          color="#fff"
+          fontSize="x-small"
+          w={"87px"}
+          h={"27px"}
+          _hover={{ bgColor: "#6311CB", borderRadius: "5px" }}
+        >
+          View
+        </Button>
+        </NavLink>
+      </>
+    ),
+  }));
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
+      <Box
+        rounded={"md"}
+        py={4}
+        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>
+          <Divider />
+          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+            <Flex align={"center"} gap={5}>
+              <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>
+              <Flex align={"center"} gap={2}>
+                <Text as={"span"} fontSize={"xs"}>
+                  Show
+                </Text>
+                <Select borderRadius={5} size={"sm"}>
+                  <option value="10">10</option>
+                  <option value="30">30</option>
+                  <option value="50">50</option>
+                  <option value="80">80</option>
+                </Select>
+                <Text as={"span"} fontSize={"xs"}>
+                  entries
+                </Text>
+              </Flex>
+            </Flex>
+            <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={<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={dashHeadSecRow}
+          data={dashSecArr}
+          isLoading={isLoading}
+          showRadioButton={true}
+          setSelectedRadio={setSelectedRadio}
+          selectedRadio={selectedRadio}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default BenifitOverView;

src/Pages/OptiFiiTaxBenefit/BenefitOverviewView.jsx

@@ -0,0 +1,386 @@
+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";
+  import { TiTick } from "react-icons/ti";
+  import { ImCancelCircle } from "react-icons/im";
+  
+  const tableData = [
+    {
+      id:1,
+      datetime:"Jan 12, 2022, 10 am",
+      merchant:"Dine in",
+      category :"Food",
+      paymentmethod :"Expense card",
+      reimburseAmount :"₹ 5000",
+    },
+    {
+      id:2,
+      datetime:"Jan 12, 2022, 10 am",
+      merchant:"Airtel postpaid",
+      category :"telecom",
+      paymentmethod :"Expense card",
+      reimburseAmount :"₹ 5000",
+    },
+    {
+      id:3,
+      datetime:"Jan 12, 2022, 10 am",
+      merchant:"Lorem ipsum dolor  adipiscing elit.",
+      category :"Fuel",
+      paymentmethod :"Expense card",
+      reimburseAmount :"₹ 5000",
+    },
+    {
+      id:4,
+      datetime:"Jan 12, 2022, 10 am",
+      merchant:"Airtel postpaid",
+      category :"Telecom",
+      paymentmethod :"Cash",
+      reimburseAmount :"₹ 5000",
+    },
+    {
+      id:3,
+      datetime:"Jan 12, 2022, 10 am",
+      merchant:"Lorem ipsum dolor  adipiscing elit.",
+      category :"Fuel",
+      paymentmethod :"Cash",
+      reimburseAmount :"₹ 5000",
+    },
+  ]
+  
+  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 = [
+      "Sr. No",
+      "Date & time",
+      "Merchant",
+      "Category",
+      "Payment mode",
+      "Reimburse Amount",
+      "Bills",
+    ];
+  
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+  
+    const extractedArray = tableData.map((item, index) => ({
+      "Sr. No": (
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+        >
+          {index + 1}
+        </Text>
+      ),
+      "Date & time": item?.datetime,
+      "Merchant": item?.merchant,
+      "Category": item?.category,
+      "Payment mode": item?.paymentmethod,
+      "Reimburse Amount": item?.reimburseAmount,
+      Bills: (
+        <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>
+      ),
+      Action: (
+        <HStack>
+          <Button
+            display="flex"
+            flexDirection="row"
+            fontSize="small"
+            fontWeight={400}
+            p={2}
+            bg={"#00A43824"}
+            rounded={"medium"}
+            borderRadius="7.25px"
+            border="1px solid #00A438"
+            color="#00A438"
+          >
+            <TiTick color="#00A438" />
+            Approve
+          </Button>
+          <Button
+            display="flex"
+            flexDirection="row"
+            fontSize="small"
+            fontWeight={400}
+            p={2}
+            bg={"#EE1B241A"}
+            border="1px solid #EE1B24"
+            borderRadius="7.25px"
+            color="#EE1B24"
+            gap={1}
+          >
+            <ImCancelCircle color="red" />
+            Reject
+          </Button>
+        </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/OptiFiiTaxBenefit/BenefitViewFood.jsx

@@ -0,0 +1,157 @@
+import {
+    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 { MdOutlineNoFood } from "react-icons/md";
+  import { OPACITY_ON_LOAD } from "../../Layout/animations";
+  import { NavLink, 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 = [
+      "Sr. No",
+      "Report name",
+      "Report by",
+      "Report amount",
+      "Date & time",
+      "Approver",
+      "Disburser",
+      "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>
+      ),
+      "Report name": (
+        <Text color="#3725EA" fontSize="small" fontWeight={400}>{item?.reportname}</Text>
+      ),
+      // "Report by": item?.emailAddress,
+      "Report amount": item?.reportamount,
+      "Date & time": item?.datetime,
+      "Approver": item?.approver,
+      "Disburser": item?.disburser,
+      "Report by": (
+        <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: (
+        <NavLink to="/dashboard/beinefit-overview/benefit-request/beinefit-overview-view">
+        <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>
+        </NavLink>
+      ),
+    }));
+  
+    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}
+        /> */}
+  
+        <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"} fontWeight={600} 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"} fontWeight={600} mb={1}>
+                Wallet Amount
+              </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>
+    );
+  };
+  
+  export default ReimbursementRequest;
+  

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;