Global and Employee List Success Modal

package-lock.json

@@ -28,6 +28,7 @@
         "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",
@@ -5321,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",

package.json

@@ -30,6 +30,7 @@
     "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",

src/App.css

@@ -46,6 +46,7 @@ a.active {
     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%);
@@ -535,4 +536,32 @@ a.active {
 }
 
 
+@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/Components/Cards/BlueCard.jsx

@@ -1,41 +1,69 @@
-import { Box, Stack, Text, Link, Badge } from '@chakra-ui/react';
-import React from 'react';
-import { MdGroups } from 'react-icons/md';
+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}) {
-    return (
-        <Box
-            backgroundColor={blueCardData.backgroundColor}
-            borderRadius="xl"
+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}
         >
-            <Box bg="#fff" borderRadius="xl" p={4} h="115px">
-                <Stack direction={["column", "row"]} color={blueCardData.backgroundColor}>
-                    <Text as="span">
-                        <MdGroups />
-                    </Text>
-                    <Text textTransform={'capitalize'} display={'flex'} alignItems={'center'} as={'span'} fontSize="xs" mb={0} fontWeight={500}>
-                        {blueCardData.title.toUpperCase()}
-                    </Text>
-                </Stack>
-                <Text  fontSize="xl" fontWeight={500} mt={2} mb={0}>
-                    {blueCardData.count}
-                </Text>
-            </Box>
-            <Stack
-                direction={["column", "row"]}
-                color="#fff"
-                justifyContent="center"
-                alignItems="center"
-            >
-                <Text as="span">
-                    <MdGroups />
-                </Text>
-                <Text fontSize="sm" m={0} py={2}>
-                    <Link mb={0}>{blueCardData.buttonText}</Link>
-                </Text>
-            </Stack>
-        </Box>
-    );
+          <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/DataTable/AccordianTable.jsx

@@ -14,7 +14,7 @@ import {
   Collapse,
   HStack,
   Text,
-  Box, // Import Collapse from Chakra UI
+  Box,
 } from "@chakra-ui/react";
 import EmptySearchList from "../EmptySearchList";
 import { TABLE_PAGINATION } from "../../Constants/Paginations";
@@ -30,24 +30,38 @@ const AccordionTable = ({
   selectedRadio,
   setSelectedRadio,
 }) => {
-  const [expandedRow, setExpandedRow] = useState(null); // Track the expanded row
-
-  console.log(data);
-
+  const [expandedRow, setExpandedRow] = useState(null);
 
   const columnWidth =
     data && data[0]
       ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
       : "auto";
 
-  const handleRadioChange = (value) => {
-    setSelectedRadio(value);
-  };
-
   const toggleRow = (index) => {
     setExpandedRow(expandedRow === index ? null : index); // Toggle row expansion
   };
 
+  // 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 ? (
@@ -59,6 +73,15 @@ const AccordionTable = ({
           </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"}
@@ -74,15 +97,7 @@ const AccordionTable = ({
                   overflowWrap="normal"
                   textTransform={"none"}
                 >
-                  {showRadioButton && heading === "Select" ? (
-                    <CheckboxGroup value={selectedRadio}>
-                      <Checkbox isDisabled />
-                    </CheckboxGroup>
-                  ) : isLoading ? (
-                    <Skeleton height="20px" />
-                  ) : (
-                    heading
-                  )}
+                  {isLoading ? <Skeleton height="20px" /> : heading}
                 </Th>
               ))}
             </Tr>
@@ -90,98 +105,97 @@ const AccordionTable = ({
           <Tbody className="web-text-small">
             {isLoading
               ? Array.from({ length: TABLE_PAGINATION?.size }).map(
-                (_, index) => (
-                  <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
-                    {tableHeadRow.map((_, i) => (
-                      <Td
-                        key={i}
-                        style={{
-                          whiteSpace: "nowrap",
-                          textOverflow: "ellipsis",
-                        }}
-                        className="web-text-small"
-                      >
-                        <Skeleton height="20px" mb={1} mt={1} />
-                      </Td>
-                    ))}
-                  </Tr>
+                  (_, 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)} // Handle row click
-                  >
-                    {tableHeadRow.map((heading, i) => (
-                      <Td
-                        textAlign={
-                          tableHeadRow?.length - 1 === i || centered
-                            ? "center"
-                            : "left"
-                        }
-                        color={"gray.600"}
-                        key={i}
-                        fontWeight={500}
-                        style={{
-                          whiteSpace: "nowrap",
-                          textOverflow: "ellipsis",
-                        }}
-                        className="web-text-small"
-                      >
-                        {showRadioButton && heading === "Select" ? (
-                          <CheckboxGroup
-                            value={selectedRadio}
-                            onChange={handleRadioChange}
-                          >
-                            <Checkbox bg={"#fff"} value={item.id} />
-                          </CheckboxGroup>
-                        ) : (
-                          item[heading]
-                        )}
-                      </Td>
-                    ))}
-                  </Tr>
-
-                  {/* Conditionally render the expanded content with transition */}
-                  <Tr>
-                    <Td colSpan={tableHeadRow.length} p={0}>
-                      <Collapse in={expandedRow === index} animateOpacity>
-                        {item?.subMenu?.map(({ wallet, walBal }, index) => <div
-                          key={index}
+                  <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={{
-                            padding: "4px 75px ",
-                            margin: "5px 0",
+                            whiteSpace: "nowrap",
+                            textOverflow: "ellipsis",
                           }}
+                          className="web-text-small"
                         >
-                          <Box display={"flex"} alignItems={"center"}>
-                            <Box opacity={0} flex={1}>
-                              <Text mb={0}>Hide contetnt</Text>
-                            </Box>
-                            <HStack justifyContent={"space-between"} w={"220px"}>
-                              <Box>
-                                <Checkbox >
-                                  <Text
-                                    as={"span"}
-                                    fontSize={"xs"}
-                                  >
-                                    {wallet}
+                          {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>
-                                </Checkbox>
+                                </HStack>
                               </Box>
-                              <Text fontSize={"xs"} mb={0}>{walBal}</Text>
-                            </HStack>
-                          </Box>
-                        </div>)}
-                      </Collapse>
-                    </Td>
-                  </Tr>
-                </React.Fragment>
-              ))}
+                            </div>
+                          ))}
+                        </Collapse>
+                      </Td>
+                    </Tr>
+                  </React.Fragment>
+                ))}
           </Tbody>
         </Table>
       )}

src/Components/DataTable/NormalTable.jsx

@@ -32,9 +32,10 @@ const NormalTable = ({
 
   // Toggle checkbox selection for individual rows
   const handleCheckboxChange = (value) => {
-    console.log(value);
+    console.log(value , "Noggas values");
     
-    setSelectedRadio((prev) => {
+    setSelectedRadio((prev) =>
+       {
       if (prev.includes(value)) {
         // Remove if already selected
         return prev.filter((id) => id !== value);
@@ -42,7 +43,8 @@ const NormalTable = ({
         // Add to selected
         return [...prev, value];
       }
-    });
+    }
+  );
   };
 
   // Handle "Check All" checkbox
@@ -63,9 +65,9 @@ const NormalTable = ({
         <EmptySearchList message={emptyMessage} />
       ) : (
         <Table size="sm">
-          <TableCaption p={total ? 0 : null}>
-            {total ? total : "Tanami v1.0.0"}
-          </TableCaption>
+          {/* <TableCaption p={total ? 0 : null}>
+            {total ? total : "Optifii v1.0.0"}
+          </TableCaption> */}
           <Thead bg="purple.100">
             <Tr>
               {showRadioButton && (

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/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,
@@ -33,6 +37,9 @@ 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 users = [
   { id: 1, user: "Jenny Wilson", role: "Admin" },
@@ -49,6 +56,34 @@ const HeaderMain = ({
   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 = () => {};
 
@@ -126,11 +161,192 @@ const HeaderMain = ({
         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>
@@ -152,47 +368,53 @@ const HeaderMain = ({
                     </PopoverBody>
                   </Link> */}
                   <PopoverBody className="web-text-medium pointer ">
-                    <VStack>
-                      <Text color="#A0ABBB" fontSize={"small"} fontWeight={600}>
+                    <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={2}
-                            key={val.id}
+                          // <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"
                           >
-                            <HStack
-                              alignItems="flex-start"
-                              justifyContent="space-evenly"
-                              w="100%"
+                            <Image
+                              src={womenpfp}
+                              h="31.79px"
+                              alt="Profile Picture"
+                            />
+                            <Text
+                              as={"span"}
+                              fontSize="x-small"
+                              fontWeight={600}
+                              color="#191D23"
                             >
-                              <Image
-                                src={womenpfp}
-                                h="31.79px"
-                                alt="Profile Picture"
-                              />
+                              {val.user}
                               <Text
-                                as={"span"}
+                                // as={"span"}
                                 fontSize="x-small"
                                 fontWeight={600}
-                                color="#191D23"
+                                color="#A0ABBB"
                               >
-                                {val.user}
-                                <Text
-                                  // as={"span"}
-                                  fontSize="x-small"
-                                  fontWeight={600}
-                                  color="#A0ABBB"
-                                >
-                                  {val.role}
-                                </Text>
+                                {val.role}
                               </Text>
-                            </HStack>
-                          </VStack>
+                            </Text>
+                          </HStack>
+                          // </VStack>
                         );
                       })}
                     </VStack>

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/Contexts/GlobalStateProvider.jsx

@@ -1,7 +1,7 @@
 // GlobalStateContext.js
 import React, { useState } from "react";
 import GlobalStateContext from "./GlobalStateContext";
-import { effect, useColorMode } from "@chakra-ui/react";
+import { effect, useColorMode, useDisclosure } from "@chakra-ui/react";
 import { v4 as uuidv4 } from "uuid";
 import { TbClock2 } from "react-icons/tb";
 import { CiWallet } from "react-icons/ci";
@@ -20,6 +20,8 @@ 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 { useForm } from "react-hook-form";
 const getRandomDate = (start, end) => {
   const date = new Date(
     start.getTime() + Math.random() * (end.getTime() - start.getTime())
@@ -58,58 +60,70 @@ const GlobalStateProvider = ({ children }) => {
       EmpID: "124589",
       Name: "Jackson",
       emailAddress: "in***@wdimails.com",
+      reportname: "Reimbursement report 2024",
       mobileNumber: "+91 ***8451254",
       Grade: "L1",
       Department: "Sales",
       Role: "Sr. Manager",
       status: "Active",
+      datetime: "10 June, 2924 10 am",
+      disburser: "Manav sain",
       subMenu: [
         {
           wallet: "Food",
           walBal: "₹ 5000",
-
-        }, {
+        },
+        {
           wallet: "Travel",
           walBal: "₹ 7000",
-
-        }, {
+        },
+        {
           wallet: "Toor",
           walBal: "₹ 3000",
-
-        },]
+        },
+      ],
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
     {
       id: 2,
-      EmpID: "124589",
+      EmpID: "124556",
       Name: "Status",
+      reportname: "Reimbursement report 2024",
       emailAddress: "in***@wdimails.com",
       mobileNumber: "+91 ***8451254",
       Grade: "L1",
+      disburser: "Manav sain",
       Department: "Sales",
       Role: "Sr. Manager",
       status: "Active",
+      datetime: "10 June, 2924 10 am",
       subMenu: [
         {
           wallet: "Food",
           walBal: "₹ 5000",
-
-        }, {
+        },
+        {
           wallet: "Travel",
           walBal: "₹ 7000",
-
-        }, {
+        },
+        {
           wallet: "Toor",
           walBal: "₹ 3000",
-
-        },]
-
+        },
+      ],
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
     {
       id: 3,
       EmpID: "124589",
       Name: "Status",
+      disburser: "Manav sain",
       emailAddress: "in***@wdimails.com",
       mobileNumber: "+91 ***8451254",
+      reportname: "Reimbursement report 2024",
+      datetime: "10 June, 2924 10 am",
       Grade: "L1",
       Department: "Sales",
       Role: "Sr. Manager",
@@ -118,24 +132,28 @@ const GlobalStateProvider = ({ children }) => {
         {
           wallet: "Food",
           walBal: "₹ 5000",
-
-        }, {
+        },
+        {
           wallet: "Travel",
           walBal: "₹ 7000",
-
-        }, {
+        },
+        {
           wallet: "Toor",
           walBal: "₹ 3000",
-
-        },]
-
+        },
+      ],
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
     {
       id: 4,
       EmpID: "124589",
+      disburser: "Manav sain",
       Name: "Status",
       emailAddress: "in***@wdimails.com",
+      datetime: "10 June, 2924 10 am",
       mobileNumber: "+91 ***8451254",
+      reportname: "Reimbursement report 2024",
       Grade: "L1",
       Department: "Sales",
       Role: "Sr. Manager",
@@ -144,17 +162,18 @@ const GlobalStateProvider = ({ children }) => {
         {
           wallet: "Food",
           walBal: "₹ 5000",
-
-        }, {
+        },
+        {
           wallet: "Travel",
           walBal: "₹ 7000",
-
-        }, {
+        },
+        {
           wallet: "Toor",
           walBal: "₹ 3000",
-
-        },]
-
+        },
+      ],
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
     {
       id: 5,
@@ -162,32 +181,39 @@ const GlobalStateProvider = ({ children }) => {
       Name: "Status",
       emailAddress: "in***@wdimails.com",
       mobileNumber: "+91 ***8451254",
+      reportname: "Reimbursement report 2024",
+      datetime: "10 June, 2924 10 am",
       Grade: "L1",
       Department: "Sales",
+      disburser: "Manav sain",
       Role: "Sr. Manager",
       status: "Inactive",
       subMenu: [
         {
           wallet: "Food",
           walBal: "₹ 5000",
-
-        }, {
+        },
+        {
           wallet: "Travel",
           walBal: "₹ 7000",
-
-        }, {
+        },
+        {
           wallet: "Toor",
           walBal: "₹ 3000",
-
-        },]
-
+        },
+      ],
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
     {
       id: 6,
       EmpID: "124589",
+      disburser: "Manav sain",
       Name: "Status",
       emailAddress: "in***@wdimails.com",
       mobileNumber: "+91 ***8451254",
+      reportname: "Reimbursement report 2024",
+      datetime: "10 June, 2924 10 am",
       Grade: "L1",
       Department: "Sales",
       Role: "Sr. Manager",
@@ -196,17 +222,18 @@ const GlobalStateProvider = ({ children }) => {
         {
           wallet: "Food",
           walBal: "₹ 5000",
-
-        }, {
+        },
+        {
           wallet: "Travel",
           walBal: "₹ 7000",
-
-        }, {
+        },
+        {
           wallet: "Toor",
           walBal: "₹ 3000",
-
-        },]
-
+        },
+      ],
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
     {
       id: 7,
@@ -214,18 +241,24 @@ const GlobalStateProvider = ({ children }) => {
       Name: "Status",
       emailAddress: "in***@wdimails.com",
       mobileNumber: "+91 ***8451254",
+      datetime: "10 June, 2924 10 am",
       Grade: "L1",
       Department: "Sales",
       Role: "Sr. Manager",
       status: "Active",
-
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
     {
       id: 8,
       EmpID: "124589",
       Name: "Status",
+      disburser: "Manav sain",
       emailAddress: "in***@wdimails.com",
+      reportname: "Reimbursement report 2024",
       mobileNumber: "+91 ***8451254",
+      datetime: "10 June, 2924 10 am",
+      reportamount: "₹ 50000",
       Grade: "L1",
       Department: "Sales",
       Role: "Sr. Manager",
@@ -234,29 +267,33 @@ const GlobalStateProvider = ({ children }) => {
         {
           wallet: "Food",
           walBal: "₹ 5000",
-
-        }, {
+        },
+        {
           wallet: "Travel",
           walBal: "₹ 7000",
-
-        }, {
+        },
+        {
           wallet: "Toor",
           walBal: "₹ 3000",
-
-        },]
-
+        },
+      ],
+      approver: "Reethik thota",
     },
     {
       id: 9,
       EmpID: "124589",
       Name: "Status",
+      disburser: "Manav sain",
       emailAddress: "in***@wdimails.com",
       mobileNumber: "+91 ***8451254",
+      reportname: "Reimbursement report 2024",
+      datetime: "10 June, 2924 10 am",
       Grade: "L1",
       Department: "Sales",
       Role: "Sr. Manager",
       status: "Active",
-
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
     {
       id: 10,
@@ -264,36 +301,49 @@ const GlobalStateProvider = ({ children }) => {
       Name: "Status",
       emailAddress: "in***@wdimails.com",
       mobileNumber: "+91 ***8451254",
+      reportname: "Reimbursement report 2024",
+      datetime: "10 June, 2924 10 am",
       Grade: "L1",
+      disburser: "Manav sain",
       Department: "Sales",
       Role: "Sr. Manager",
       status: "Inactive",
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
     {
       id: 10,
       EmpID: "124589",
       Name: "Status",
+      disburser: "Manav sain",
       emailAddress: "in***@wdimails.com",
       mobileNumber: "+91 ***8451254",
+      reportname: "Reimbursement report 2024",
       Grade: "L1",
       Department: "Sales",
       Role: "Sr. Manager",
       status: "Active",
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
     {
       id: 11,
       EmpID: "124589",
+      disburser: "Manav sain",
       Name: "Status",
       emailAddress: "in***@wdimails.com",
       mobileNumber: "+91 ***8451254",
+      reportname: "Reimbursement report 2024",
+      datetime: "10 June, 2924 10 am",
       Grade: "L1",
       Department: "Sales",
       Role: "Sr. Manager",
       status: "Active",
+      reportamount: "₹ 50000",
+      approver: "Reethik thota",
     },
   ]);
 
-
   const [reportsHistory, setReportsHistory] = useState([
     {
       id: 1,
@@ -1245,7 +1295,7 @@ const GlobalStateProvider = ({ children }) => {
       reportBy: "in***@wdimails.com",
       reportAmount: "+91 ***8451254",
       dateTime: "Sales",
-      orderStatus: "Approved",
+      orderStatus: "Fully reimbursed",
       approver: "Sales",
       disburser: "Sales",
     },
@@ -1255,7 +1305,7 @@ const GlobalStateProvider = ({ children }) => {
       reportBy: "in***@wdimails.com",
       reportAmount: "+91 ***8451254",
       dateTime: "Sales",
-      orderStatus: "Approved",
+      orderStatus: "Fully reimbursed",
       approver: "Sales",
       disburser: "Sales",
     },
@@ -1275,7 +1325,7 @@ const GlobalStateProvider = ({ children }) => {
       reportBy: "in***@wdimails.com",
       reportAmount: "+91 ***8451254",
       dateTime: "Sales",
-      orderStatus: "Fully reimbursed",
+      orderStatus: "Approved",
       approver: "Sales",
       disburser: "Sales",
     },
@@ -2015,9 +2065,6 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
-
-
-
   // Recent report
   const [recentReports, setRecentReports] = useState([
     {
@@ -2086,7 +2133,7 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
-  // Recent transaction 
+  // Recent transaction
 
   const [recentTransaction, setRecentTransaction] = useState([
     {
@@ -2140,7 +2187,7 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
-  // Wallets EB&G 
+  // Wallets EB&G
   const [walletExpense, setWalletExpense] = useState([
     {
       wallet: "Food",
@@ -2168,44 +2215,232 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
-  
-  // main dash 
+  // main dash
 
   const [dash, setDash] = useState([
     {
       id: 1,
-      wallet: "Employee Wallet",
+      wallet: "Food",
       walletAmount: "₹ 70,000",
       balanceRemaining: "₹ 20,000",
       status: "Approved",
       totalEmployees: 500,
       users: 5,
+      icon: foods,
     },
     {
       id: 2,
-      wallet: "Travel Wallet",
+      wallet: "Fuel",
       walletAmount: "₹ 50,000",
       balanceRemaining: "₹ 15,000",
       status: "Approved",
       totalEmployees: 200,
       users: 3,
+      icon: Fuel,
     },
     {
       id: 3,
-      wallet: "Food Wallet",
+      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,
     },
-
   ]);
 
+  const [transactionHistory, setTransactionHistory] = useState([
+    {
+      id: 1,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+    {
+      id: 2,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+    {
+      id: 3,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+    {
+      id: 4,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+    {
+      id: 5,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+    {
+      id: 6,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+  ]);
 
+  const [reportStatus, setReportStatus] = useState([
+    {
+      id: 1,
+      reportName: "Food",
+      // reportBy: "#356567",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Fully Reimbursed",
+      approver: "Reimbursed",
+      disburser: "12 July 24, 10am",
+      action: "₹ 5000",
+    },
+    {
+      id: 2,
+      reportName: "Food",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Partially Reimbursed",
+    },
+    {
+      id: 3,
+      reportName: "Food",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Fully Reimbursed",
+    },
+    {
+      id: 4,
+      reportName: "Food",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Fully Reimbursed",
+    },
+    {
+      id: 5,
+      reportName: "Food",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Approved",
+    },
+    {
+      id: 6,
+      reportName: "Food",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Approved",
+    },
+  ]);
+
+  const [viewReports, setViewReports] = useState([
+    {
+      id: 1,
+      inVoice: "Invoice #01 - Dec 2023",
+      amount: "₹ 5000",
+      paidWallet: "Food",
+      status: "Approved",
+    },
+    {
+      id: 2,
+      inVoice: "Invoice #01 - Dec 2023",
+      amount: "₹ 5000",
+      paidWallet: "Food",
+      status: "Approved",
+    },
+    {
+      id: 3,
+      inVoice: "Invoice #01 - Dec 2023",
+      amount: "₹ 5000",
+      paidWallet: "Food",
+      status: "Approved",
+    },
+    {
+      id: 4,
+      inVoice: "Invoice #01 - Dec 2023",
+      amount: "₹ 5000",
+      paidWallet: "Food",
+      status: "Approved",
+    },
+    {
+      id: 5,
+      inVoice: "Invoice #01 - Dec 2023",
+      amount: "₹ 5000",
+      paidWallet: "Food",
+      status: "Approved",
+    },
+  ]);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  const [selectedCardIndex, setSelectedCardIndex] = useState(null);
+  const [selectionCount, setSelectionCount] = useState(0);
+  const [showAnotherComponent, setShowAnotherComponent] = useState(false);
+  const [hasProceeded, setHasProceeded] = useState(false);
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
   return (
     <GlobalStateContext.Provider
       value={{
+        selectedCardIndex,
+        setSelectedCardIndex,
+        selectionCount,
+        setSelectionCount,
+        showAnotherComponent,
+        setShowAnotherComponent,
+        hasProceeded,
+        setHasProceeded,
+        onOpen,
+        isOpen,
+        onClose,
         reportsHistory,
         setReportsHistory,
         isAuthenticate,
@@ -2226,7 +2461,7 @@ const GlobalStateProvider = ({ children }) => {
         digital,
         setDigital,
         ApplicationStatus,
-        setAdvanceStatus,
+        // setAdvanceStatus,
         AdvanceExpenseRequest,
         setAdvanceExpenseRequest,
         AdvanceExpenseRequestView,
@@ -2234,13 +2469,25 @@ const GlobalStateProvider = ({ children }) => {
         walletProgram,
         SupportAndTicket,
         setSupportAndTicket,
-
-        recentReports, setRecentReports,
-        recentTransaction, setRecentTransaction,
+        recentReports,
+        setRecentReports,
+        recentTransaction,
+        setRecentTransaction,
+        useForm,
+        // recentReports,
+        // setRecentReports,
+        // recentTransaction,
+        // setRecentTransaction,
         walletExpense,
         setWalletExpense,
         dash,
-        setDash
+        setDash,
+        transactionHistory,
+        setTransactionHistory,
+        reportStatus,
+        setReportStatus,
+        viewReports,
+        setViewReports,
       }}
     >
       {children}

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

@@ -31,6 +31,7 @@ import React, { useContext, useState } from "react";
 import BlueCard from "../../Components/Cards/BlueCard";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import { HStack, Text, VStack, Icon } from "@chakra-ui/react";
+
 import {
   BsArrowsAngleExpand,
   BsBarChartFill,
@@ -55,42 +56,24 @@ import { ChevronDownIcon } from "@chakra-ui/icons";
 import PrimaryButton from "../../Components/Buttons/PrimaryButton";
 import SecondaryButton from "../../Components/Buttons/SecondaryButton";
 import { GoDotFill } from "react-icons/go";
-import { FaUser } from 'react-icons/fa';
-import { Doughnut } from 'react-chartjs-2';
+import { NavLink, useNavigate } from "react-router-dom";
+import LoadMoneyModal from "./LoadMoneyModal";
 
 const Dashbaord = () => {
   const { dash } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [users, setusers] = useState(50);
-  const data = {
-    labels: ['Full KYC', 'Min KYC'],
-    datasets: [{
-      label: 'KYC Status',
-      data: [72, 28], // Sample percentages
-      backgroundColor: [
-        'rgba(54, 162, 235, 0.2)',
-        'rgba(255, 159, 64, 0.2)',
-      ],
-      borderColor: [
-        'rgba(54, 162, 235, 1)',
-        'rgba(255, 159, 64, 1)',
-      ],
-      borderWidth: 1
-    }]
-  };
+  const [scale, setScale] = useState(1);
+  const navigate = useNavigate();
 
-  const options = {
-    title: {
-      display: true,
-      text: 'Employee KYC Status'
-    },
-    scales: {
-      y: {
-        beginAtZero: true
-      }
-    }
-  };
+  const zoomIn = () => setScale((prev) => (prev < 2 ? prev + 0.1 : prev));
+  const zoomOut = () => setScale((prev) => (prev > 0.5 ? prev - 0.1 : prev));
+
+  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
 
   const blueCardData = [
     {
@@ -105,30 +88,6 @@ const Dashbaord = () => {
       badgeColor: "#3725EA",
       viewTextColor: "#6311CB",
     },
-    // {
-    //   backgroundColor: "#C33FAD",
-    //   iconColor: "#00A438",
-    //   title: "WALLET REQUEST",
-    //   count: 100,
-    //   buttonBg: "#FCA1001A",
-    //   buttonBorder: "#FCA100",
-    //   buttonText: "View Requests",
-    //   badgeText: "20 New",
-    //   badgeColor: "#3725EA",
-    //   viewTextColor: "#6311CB",
-    // },
-    // {
-    //   backgroundColor: "#6311CB",
-    //   iconColor: "#00A438",
-    //   title: "WALLET REQUEST",
-    //   count: 100,
-    //   buttonBg: "#FCA1001A",
-    //   buttonBorder: "#FCA100",
-    //   buttonText: "View Requests",
-    //   badgeText: "20 New",
-    //   badgeColor: "#3725EA",
-    //   viewTextColor: "#6311CB",
-    // },
     {
       backgroundColor: "#C33FAD",
       iconColor: "#00A438",
@@ -145,9 +104,10 @@ const Dashbaord = () => {
 
   const gridItemsData = [
     {
+      cardType: "Expense card",
       backgroundColor: "#218F001A",
       iconColor: "#00A438",
-      title: "Bills for approval",
+      title: "Active expense wallets",
       count: 50,
       buttonBg: "#FCA1001A",
       buttonBorder: "#FCA100",
@@ -155,11 +115,13 @@ const Dashbaord = () => {
       badgeText: "20 New",
       badgeColor: "#3725EA",
       viewTextColor: "#6311CB",
+      manageWallet: "Manage expense wallets",
     },
     {
+      cardType: "Benefit card",
       backgroundColor: "#218F001A",
       iconColor: "#00A438",
-      title: "Bills for pending",
+      title: "Active benefit wallets",
       count: 50,
       buttonBg: "#FCA1001A",
       buttonBorder: "#FCA100",
@@ -167,6 +129,7 @@ const Dashbaord = () => {
       badgeText: "20 New",
       badgeColor: "#3725EA",
       viewTextColor: "#6311CB",
+      manageWallet: "Manage benefit wallets",
     },
   ];
 
@@ -199,9 +162,10 @@ const Dashbaord = () => {
   const dashArr = dash.map((item, index) => ({
     "Wallet Name": (
       <HStack key={`wallet-${index}`}>
-        <Box p={2} bg="#ebe0f8" rounded="full">
+        {/* <Box p={2} bg="#ebe0f8" rounded="full">
           <MdNoFood color="#6311CB" />
-        </Box>
+        </Box> */}
+        <Image src={item.icon} h="20px" />
         <Text mb={0} fontSize="xs">
           {item.wallet || "Food"}
         </Text>
@@ -274,9 +238,10 @@ const Dashbaord = () => {
   const dashSecArr = dash.map((item, index) => ({
     "Wallet Name": (
       <HStack key={`wallet-${index}`}>
-        <Box p={2} bg="#ebe0f8" rounded="full">
+        {/* <Box p={2} bg="#ebe0f8" rounded="full">
           <MdNoFood color="#6311CB" />
-        </Box>
+        </Box> */}
+        <Image src={item.icon} h="20px" />
         <Text mb={0} fontSize="xs">
           {item.wallet || "Food"}
         </Text>
@@ -409,107 +374,125 @@ const Dashbaord = () => {
           <BlueCard key={index} blueCardData={item} />
         ))}
         {/* <EmployeeKYCStatus/> */}
-        <div>
-      <h2>Employee KYC Status</h2>
-      <Doughnut data={data} options={options} />
-      <div>
-        <p>Full KYC: 72%</p>
-        <p>Min KYC: 28%</p>
-      </div>
-    </div>
+        <Box bgColor="#FFFFFF" borderRadius="8.22px">
+          <Text color="#474279" fontSize="small" p={2} fontWeight={600}>
+            Employee KYC Status
+          </Text>
+          <HStack alignItems="center">
+            <Box h="100px" w="100px"></Box>
+          </HStack>
+        </Box>
+        <Box bgColor="#FFFFFF" borderRadius="8.22px">
+          <Text color="#474279" fontSize="small" p={2} fontWeight={600}>
+            Payment Status
+          </Text>
+          <HStack alignItems="center">
+            <Box h="100px" w="100px"></Box>
+          </HStack>
+        </Box>
       </Grid>
 
       {/* EXP card  */}
 
       <Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4} mt={6}>
         {gridItemsData.map((item, index) => (
-          <GridItem key={index} backgroundColor="#fff" borderRadius="xl">
-            <Box bg="#fff" borderRadius="xl" p={4}>
-              <HStack w={"100%"} justifyContent={"space-between"} mb={3}>
-                <Text fontSize={"sm"} as={"span"} fontWeight={500}>
-                  Expense card
-                </Text>
-                <HStack spacing={1}>
-                  <Text
-                    fontSize={"sm"}
-                    as={"span"}
-                    fontWeight={500}
-                    color={"#6311CB"}
-                  >
-                    Manage expense wallets
-                  </Text>
-                  <MdArrowForward size={14} color="#6311CB" />
-                </HStack>
-              </HStack>
-              <Divider borderStyle="dashed" />
-              <HStack spacing={4} alignItems={"start"} mt={6}>
-                <Box
-                  backgroundColor={item.backgroundColor}
-                  h="80px"
-                  w="80px"
-                  rounded="full"
-                  display="flex"
-                  justifyContent="center"
-                  alignItems="center"
-                >
-                  <FiBarChart2 color={item.iconColor} fontSize="25px" />
-                </Box>
-
-                <Box fontSize="md" fontWeight={500}>
-                  <Text mb={0} color="#A3AED0">
-                    {item.title}
-                  </Text>
-                  <Text fontSize="2xl" fontWeight={600} color={"#2B3674"}>
-                    {item.count}
-                  </Text>
-                </Box>
-              </HStack>
-              <Box mt={16}>
-                <Button
-                  fontSize="xl"
+          <GridItem
+            key={index}
+            backgroundColor="#fff"
+            h="100%"
+            borderRadius="10px"
+            p={4}
+          >
+            <HStack w={"100%"} justifyContent={"space-between"} mb={0}>
+              <Text fontSize={"sm"} as={"span"} fontWeight={500}>
+                {/* Expense card */}
+                {item.cardType}
+              </Text>
+              <HStack spacing={1}>
+                <Text
+                  fontSize={"sm"}
+                  as={"span"}
                   fontWeight={500}
-                  mt={2}
-                  w="100%"
-                  display="flex"
-                  justifyContent="space-between"
-                  backgroundColor={item.buttonBg}
-                  border={`1px solid ${item.buttonBorder}`}
+                  color={"#6311CB"}
                 >
-                  {!item.hideBadge && (
-                    <Text
-                      display="flex"
-                      alignItems="center"
-                      color="#FCA100"
-                      mb={0}
-                    >
-                      <WiTime4 />
-                      <Text fontSize="xs" as="span" mx={2}>
-                        {item.buttonText}
-                      </Text>
-                      <Badge
-                        bg={item.badgeColor}
-                        fontSize="8px"
-                        color="white"
-                        fontWeight={400}
-                        p={1}
-                        rounded="5px"
-                      >
-                        {item.badgeText}
-                      </Badge>
-                    </Text>
-                  )}
+                  {/* Manage expense wallets */}
+                  {item.manageWallet}
+                </Text>
+                <MdArrowForward size={14} color="#6311CB" />
+              </HStack>
+            </HStack>
+            <Divider borderStyle="dashed" />
+            <HStack spacing={4} alignItems={"start"} mt={6}>
+              <Box
+                backgroundColor={item.backgroundColor}
+                h="56px"
+                w="56px"
+                rounded="full"
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+              >
+                <FiBarChart2
+                  color={item.iconColor}
+                  fontSize="22px"
+                  fontWeight={900}
+                />
+              </Box>
+
+              <Box fontSize="md" fontWeight={500}>
+                <Text mb={0} color="#A3AED0">
+                  {item.title}
+                </Text>
+                <Text fontSize="2xl" fontWeight={600} color={"#2B3674"}>
+                  {item.count}
+                </Text>
+              </Box>
+            </HStack>
+            <Box mt={16}>
+              <Button
+                fontSize="xl"
+                fontWeight={500}
+                mt={2}
+                w="100%"
+                display="flex"
+                justifyContent="space-between"
+                backgroundColor={item.buttonBg}
+                border={`1px solid ${item.buttonBorder}`}
+              >
+                {!item.hideBadge && (
                   <Text
-                    as="span"
                     display="flex"
                     alignItems="center"
-                    color={item.viewTextColor}
-                    fontSize="sm"
-                    gap={1}
+                    color="#FCA100"
+                    mb={0}
                   >
-                    View <MdArrowForward />
+                    <WiTime4 />
+                    <Text fontSize="xs" as="span" mx={2}>
+                      {item.buttonText}
+                    </Text>
+                    <Badge
+                      bg={item.badgeColor}
+                      fontSize="8px"
+                      color="white"
+                      fontWeight={400}
+                      p={1}
+                      rounded="5px"
+                    >
+                      {item.badgeText}
+                    </Badge>
                   </Text>
-                </Button>
-              </Box>
+                )}
+                <Text
+                  as="span"
+                  display="flex"
+                  alignItems="center"
+                  color={item.viewTextColor}
+                  fontSize="sm"
+                  gap={1}
+                >
+                  View <MdArrowForward />
+                </Text>
+              </Button>
             </Box>
           </GridItem>
         ))}
@@ -533,19 +516,19 @@ const Dashbaord = () => {
                 <Text color={"#A3AED0"} fontWeight={500} fontSize={"xs"} mb={6}>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
                 </Text>
-                <PrimaryButton
-                  title={" Issue gift cards"}
-                  px={4}
-                  leftIcon={<PiUsersThreeFill color={"#fff"} />}
-                />
+                <NavLink to="/optifii-gifts-dashboard/apply-for-giftcards">
+                  <PrimaryButton
+                    title={" Issue gift cards"}
+                    px={4}
+                    leftIcon={<PiUsersThreeFill color={"#fff"} />}
+                  />
+                </NavLink>
               </Box>
             </HStack>
           </Box>
         </GridItem>
       </Grid>
-
       {/* EXP overview */}
-
       <HStack alignItems={"start"} spacing={6}>
         <Box flex={1}>
           {/* table 1 */}
@@ -559,13 +542,6 @@ const Dashbaord = () => {
               >
                 Expense Overview
               </Heading>
-              <BsArrowsAngleExpand
-                // onClick={() => navigate("")}
-                as={Button}
-                color={"#6311CB"}
-                size={18}
-                cursor={"pointer"}
-              />
             </HStack>
 
             <Tabs position="relative" variant="unstyled">
@@ -637,44 +613,61 @@ const Dashbaord = () => {
                 </Box>
               </HStack>
 
-              <HStack justifyContent={"space-between"} mt={2}>
-                <HStack bg={"#F2EEF8"} p={2} rounded={"md"}>
-                  <Text fontSize={"xs"} color={"#888888"} mb={0}>
-                    Total report amount
-                  </Text>
-                  <Text
-                    fontSize={"sm"}
-                    color={"#6311CB"}
-                    mb={0}
-                    fontWeight={500}
-                  >
-                    ₹ 50,000
-                  </Text>
-                </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>
-              </HStack>
-
               <TabPanels>
                 <TabPanel px={0}>
+                  <HStack justifyContent={"space-between"} mb={4}>
+                    <HStack bg={"#F2EEF8"} p={2} rounded={"md"}>
+                      <Text fontSize={"xs"} color={"#888888"} mb={0}>
+                        Total report amount
+                      </Text>
+                      <Text
+                        fontSize={"sm"}
+                        color={"#6311CB"}
+                        mb={0}
+                        fontWeight={500}
+                      >
+                        ₹ 50,000
+                      </Text>
+                    </HStack>
+                    <HStack alignItems="center">
+                      <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>
+                      <NavLink
+                        style={{
+                          float: "right",
+                          marginRight: "4px",
+                        }}
+                        to="/reimbursement-request"
+                      >
+                        <BsArrowsAngleExpand
+                          as={Button}
+                          color={"#6311CB"}
+                          size={18}
+                          cursor={"pointer"}
+
+                          // onClick={zoomIn}
+                        />
+                      </NavLink>
+                    </HStack>
+                  </HStack>
                   <NormalTable
                     emptyMessage={`We don't have any Sponers `}
                     tableHeadRow={dashHeadRow}
@@ -683,6 +676,59 @@ const Dashbaord = () => {
                   />
                 </TabPanel>
                 <TabPanel px={0}>
+                  <HStack justifyContent={"space-between"} mb={4}>
+                    <HStack bg={"#F2EEF8"} p={2} rounded={"md"}>
+                      <Text fontSize={"xs"} color={"#888888"} mb={0}>
+                        Total report amount
+                      </Text>
+                      <Text
+                        fontSize={"sm"}
+                        color={"#6311CB"}
+                        mb={0}
+                        fontWeight={500}
+                      >
+                        ₹ 50,000
+                      </Text>
+                    </HStack>
+                    <HStack alignItems="center">
+                      <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>
+                      <NavLink
+                        style={{
+                          float: "right",
+                          marginRight: "4px",
+                        }}
+                        to="/advance-expense-request"
+                      >
+                        <BsArrowsAngleExpand
+                          as={Button}
+                          color={"#6311CB"}
+                          size={18}
+                          cursor={"pointer"}
+
+                          // onClick={zoomIn}
+                        />
+                      </NavLink>
+                    </HStack>
+                  </HStack>
                   <NormalTable
                     emptyMessage={`We don't have any Sponers `}
                     tableHeadRow={dashHeadRow}
@@ -706,7 +752,6 @@ const Dashbaord = () => {
               >
                 Benefit Overview
               </Heading>
-
               <HStack>
                 <Box
                   fontSize={"xs"}
@@ -738,14 +783,17 @@ const Dashbaord = () => {
                     <IoMdArrowDropdown />
                   </Text>
                 </Box>
-                <BsArrowsAngleExpand
-                  // onClick={() => navigate("")}
-                  as={Button}
-                  color={"#6311CB"}
-                  size={18}
-                  cursor={"pointer"}
-                />
+                <NavLink to="/dashboard/beinefit-overview">
+                  <BsArrowsAngleExpand
+                    // onClick={() => navigate("")}
+                    as={Button}
+                    color={"#6311CB"}
+                    size={18}
+                    cursor={"pointer"}
+                  />
+                </NavLink>
               </HStack>
+              vis
             </HStack>
 
             <HStack justifyContent={"space-between"} mt={2}>
@@ -815,6 +863,7 @@ const Dashbaord = () => {
             </Box>
             <HStack mt={10} mb={6}>
               <PrimaryButton
+                onClick={openModal}
                 px={"4"}
                 leftIcon={<IoMdAddCircleOutline size={14} color="#fff" />}
                 title={"Load Money"}
@@ -863,10 +912,8 @@ const Dashbaord = () => {
                   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>
+                  <MenuItem fontSize={"sm"}>Expense</MenuItem>
+                  <MenuItem fontSize={"sm"}>Benefit</MenuItem>
                 </MenuList>
               </Menu>
             </HStack>
@@ -877,7 +924,7 @@ const Dashbaord = () => {
               rounded="md"
               hasStripe={false} // No stripes for a clean look
               colorScheme="gray" // Neutral base color
-              mb={12}
+              mb={8}
               sx={{
                 "& > div": {
                   background: `linear-gradient(to right, 
@@ -1141,7 +1188,7 @@ const Dashbaord = () => {
                 </Text>
               </Box>
               <BsArrowsAngleExpand
-                // onClick={() => navigate("")}
+                onClick={() => navigate("/dashboard/employees-transaction")}
                 as={Button}
                 color={"#6311CB"}
                 size={18}
@@ -1191,6 +1238,7 @@ const Dashbaord = () => {
           </Box>
         </Box>
       </HStack>
+      <LoadMoneyModal isOpen={isOpen} onClose={closeModal} />
     </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/ManageHumanResource/Approvers.jsx

@@ -1,5 +1,12 @@
 import {
-  Box, Grid, Heading, Menu, MenuButton, MenuItem, MenuList, VStack,
+  Box,
+  Grid,
+  Heading,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  VStack,
   Button,
   Image,
   Input,
@@ -7,6 +14,12 @@ import {
   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";
@@ -20,13 +33,13 @@ 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 { 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);
@@ -82,8 +95,8 @@ const Approvers = () => {
           item?.orderStatus === "Approved"
             ? "#027A48"
             : item?.orderStatus === "Fully reimbursed"
-              ? "#3725EA"
-              : "red"
+            ? "#3725EA"
+            : "red"
         }
       >
         {item?.orderStatus}
@@ -107,8 +120,8 @@ const Approvers = () => {
           item?.orderStatus === "Approved"
             ? "#027A48"
             : item?.orderStatus === "Fully reimbursed"
-              ? "#3725EA"
-              : "red"
+            ? "#3725EA"
+            : "red"
         }
       >
         {item?.orderStatus}
@@ -201,16 +214,10 @@ const Approvers = () => {
       badgeColor: "#3725EA",
       viewTextColor: "#6311CB",
     },
-  ]
+  ];
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
-      <MiniHeader
-        title={"Approvers"}
-        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
-        backButton={true}
-      />
-
       <Box>
         <Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4}>
           {blueCardData.map((item, index) => (
@@ -354,11 +361,71 @@ const Approvers = () => {
                 >
                   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>
 

src/Pages/ManageHumanResource/Employees.jsx

@@ -25,11 +25,7 @@ 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,
-  ChevronDownIcon,
-  SearchIcon,
-} from "@chakra-ui/icons";
+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";
@@ -41,16 +37,25 @@ 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 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 {
@@ -100,27 +105,21 @@ const Employees = () => {
   // const extractedArray = reportsHistory.map((item)=>({ }))
 
   const extractedArray = employees.map((item, index) => ({
+    id: item.id,
     "Emp ID": (
-      <Checkbox colorScheme="purple" value="1">
-        <Text
-          as={"span"}
-          fontSize={"xs"}
-        >
-          {item?.EmpID}
-        </Text>
-      </Checkbox>
+      <Text as={"span"} fontSize={"xs"}>
+        {item?.EmpID}
+      </Text>
     ),
-    "Name": (
+    Name: (
       <HStack>
         <Image
-          borderRadius='full'
-          boxSize='40px'
-          src='https://bit.ly/dan-abramov'
-          alt='Dan Abramov'
+          borderRadius="full"
+          boxSize="40px"
+          src="https://bit.ly/dan-abramov"
+          alt="Dan Abramov"
         />
-        <Text mb={0}>
-          {item?.Name}
-        </Text>
+        <Text mb={0}>{item?.Name}</Text>
       </HStack>
     ),
     "Email Address": item?.emailAddress,
@@ -137,15 +136,16 @@ const Employees = () => {
           item?.status === "Active"
             ? "green"
             : item?.status === "Inactive"
-              ? "red"
-              : "gray"
+            ? "red"
+            : "gray"
         }
-        border={`1px solid ${item?.status === "Active"
-          ? "green"
-          : item?.status === "Inactive"
+        border={`1px solid ${
+          item?.status === "Active"
+            ? "green"
+            : item?.status === "Inactive"
             ? "red"
             : "gray" // default border color if status doesn't match any condition
-          }`}
+        }`}
         p={1}
         px={3}
       >
@@ -157,7 +157,7 @@ const Employees = () => {
         <Menu>
           <MenuButton
             as={IconButton}
-            aria-label='Options'
+            aria-label="Options"
             icon={<BsThreeDotsVertical />}
             bg={"transparent"}
           />
@@ -183,7 +183,7 @@ const Employees = () => {
               fontSize={"sm"}
               fontWeight={500}
               color={"#4D4D4D"}
-              onClick={()=>navigate("/employees/view")}
+              onClick={() => navigate("/employees/view")}
             >
               View
             </MenuItem>
@@ -241,12 +241,35 @@ 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>
-                <PrimaryButton as={MenuButton} leftIcon={<AddIcon />} title={"Add Employee"} />
+                {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} />}
@@ -313,11 +336,71 @@ 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>
             </HStack>
@@ -328,6 +411,9 @@ const Employees = () => {
           tableHeadRow={tableHeadRow}
           data={extractedArray}
           isLoading={isLoading}
+          selectedRadio={selectedRadio}
+          setSelectedRadio={setSelectedRadio}
+          showRadioButton={true}
         />
       </Box>
       {/* Call EmployeesAddModal */}
@@ -337,8 +423,10 @@ const Employees = () => {
       <EmployeesEditModal isOpen={isEditOpen} onClose={onEditClose} />
 
       {/* Call EmployeesEditModal */}
-      <EmployeesAddMultipleModal isOpen={isMultipleOpen} onClose={onMultipleClose} />
-
+      <EmployeesAddMultipleModal
+        isOpen={isMultipleOpen}
+        onClose={onMultipleClose}
+      />
     </Box>
   );
 };

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

@@ -94,7 +94,7 @@ const EmployeesView = () => {
                 {item.date || 'Jun 10, 2024'}
             </Text>
         ),
-        'Order Status': (
+        'Status': (
             <Tag
                 my={1}
                 size="sm"
@@ -325,12 +325,13 @@ const EmployeesView = () => {
                         />
                     </HStack>
                     <Box>
-                        <Tabs position='relative' variant='unstyled'>
+                        <Tabs  position='relative' variant='unstyled'>
                             <TabList>
                                 <Tab
                                     color={"#313039"}
                                     fontSize={"sm"}
                                     fontWeight={500}
+                                    mr={6}
                                     _selected={{
                                         color: "#5E0FCD",
                                     }}>
@@ -340,6 +341,7 @@ const EmployeesView = () => {
                                     color={"#313039"}
                                     fontSize={"sm"}
                                     fontWeight={500}
+                                    mr={6}
                                     _selected={{
                                         color: "#5E0FCD",
                                     }}>Benefit</Tab>
@@ -347,9 +349,10 @@ const EmployeesView = () => {
                                     color={"#313039"}
                                     fontSize={"sm"}
                                     fontWeight={500}
+                                    mr={6}
                                     _selected={{
                                         color: "#5E0FCD",
-                                    }}>Gifts</Tab>
+                                    }}>Gift & reward</Tab>
                             </TabList>
                             <TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
                             <TabPanels>
@@ -471,7 +474,7 @@ const EmployeesView = () => {
                 </VStack>
 
                 <NormalTable
-                    emptyMessage={`We don't have any Sponers `}
+                    emptyMessage={`We don't have any reports `}
                     tableHeadRow={tableHeadRow}
                     data={extractedArray}
                     isLoading={isLoading}

src/Pages/ManageHumanResource/PullBackFundsBenefit.jsx

@@ -1,216 +1,202 @@
 import {
-    Accordion,
-    AccordionButton,
-    AccordionItem,
-    AccordionPanel,
-    Box,
-    Button,
-    Checkbox,
-    HStack,
-    Image,
-    Input,
-    InputGroup,
-    InputLeftElement,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuList,
-    Text,
-    VStack,
+  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 { 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 { employees } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedRadio, setSelectedRadio] = useState([]);
 
-    useEffect(() => {
-        // Set isLoading to true
-        setIsLoading(true);
+  useEffect(() => {
+    // Set isLoading to true
+    setIsLoading(true);
 
-        // Simulate a 3-second delay
-        const timer = setTimeout(() => {
-            setIsLoading(false); // Set isLoading to false after 3 seconds
-        }, 500);
+    // 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
+    // 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",
-    ];
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Emp ID",
+    "Name",
+    "Email Address",
+    // "Mobile number",
+    "Wallet",
+    "Wallet balance",
+  ];
 
-    // const extractedArray = reportsHistory.map((item)=>({ }))
+  // const extractedArray = reportsHistory.map((item)=>({ }))
 
-    const extractedArray = employees.map((item, index) => ({
-        "Emp ID": (
-            <Checkbox colorScheme="purple" value="1">
-                <HStack spacing={1}>
-                    <Text
-                        as={"span"}
-                        fontSize={"xs"}
-                    >
-                        {item?.EmpID}
-                    </Text>
-                </HStack>
-            </Checkbox >
-        ),
-        "Name": (
-            <HStack>
-                <Image
-                    borderRadius='full'
-                    boxSize='40px'
-                    src='https://bit.ly/dan-abramov'
-                    alt='Dan Abramov'
-                />
-                <Text mb={0}>
-                    {item?.Name}
-                </Text>
-            </HStack>
-        ),
-        "Email Address": item?.emailAddress,
-        "Mobile number": item?.mobileNumber,
-        "Wallet": (
+  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,
+  }));
 
-            <HStack>
-                <Text
-                    fontSize={"xs"}
-                    mb={0}
-                    fontWeight={500}
-                    bg={"#EFE3FF"}
-                    px={2}
-                    py={1}
-                    color={"#6311CB"}
-                    textAlign={"center"}
-                    rounded={"md"}
+  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}
                 >
-                    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}
-                />
+                  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>
-    );
+          </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

@@ -38,6 +38,7 @@ const PullBackFundsExpense = () => {
     const { employees } = useContext(GlobalStateContext);
     const [isLoading, setIsLoading] = useState(false);
     const [searchTerm, setSearchTerm] = useState("");
+    const [selectedRadio ,setSelectedRadio]=useState([]);
 
     useEffect(() => {
         // Set isLoading to true
@@ -57,7 +58,7 @@ const PullBackFundsExpense = () => {
         "Emp ID",
         "Name",
         "Email Address",
-        "Mobile number",
+        // "Mobile number",
         "Wallet",
         "Wallet balance",
     ];
@@ -65,8 +66,9 @@ const PullBackFundsExpense = () => {
     // const extractedArray = reportsHistory.map((item)=>({ }))
 
     const extractedArray = employees.map((item, index) => ({
+        id: item.id,
         "Emp ID": (
-            <Checkbox colorScheme="purple" value="1">
+            // <Checkbox colorScheme="purple" value="1">
                 <HStack spacing={1}>
                     <Text
                         as={"span"}
@@ -75,7 +77,6 @@ const PullBackFundsExpense = () => {
                         {item?.EmpID}
                     </Text>
                 </HStack>
-            </Checkbox >
         ),
         "Name": (
             <HStack>
@@ -173,6 +174,9 @@ const PullBackFundsExpense = () => {
                     tableHeadRow={tableHeadRow}
                     data={extractedArray}
                     isLoading={isLoading}
+                    selectedRadio={selectedRadio}
+                    setSelectedRadio={setSelectedRadio}
+                    showRadioButton={true}
                 />
             </Box>
         </Box>

src/Pages/ManageHumanResource/PullBackFundsGifts.jsx

@@ -37,7 +37,7 @@ 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);
@@ -56,7 +56,7 @@ const PullBackFundsGifts = () => {
         "Emp ID",
         "Name",
         "Email Address",
-        "Mobile number",
+        // "Mobile number",
         "Card number",
         "Wallet balance",
     ];
@@ -64,8 +64,9 @@ const PullBackFundsGifts = () => {
     // const extractedArray = reportsHistory.map((item)=>({ }))
 
     const extractedArray = employees.map((item, index) => ({
+        id: item.id,
         "Emp ID": (
-            <Checkbox colorScheme="purple" value="1">
+            // <Checkbox colorScheme="purple" value="1">
                 <HStack spacing={1}>
                     <Text
                         as={"span"}
@@ -74,7 +75,6 @@ const PullBackFundsGifts = () => {
                         {item?.EmpID}
                     </Text>
                 </HStack>
-            </Checkbox >
         ),
         "Name": (
             <HStack>
@@ -170,6 +170,9 @@ const PullBackFundsGifts = () => {
                     tableHeadRow={tableHeadRow}
                     data={extractedArray}
                     isLoading={isLoading}
+                    selectedRadio={selectedRadio}
+                    setSelectedRadio={setSelectedRadio}
+                    showRadioButton={true}
                 />
             </Box>
         </Box>

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/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

@@ -225,9 +225,9 @@ const OnboardingAddCompanyDetails = ({
 
         {/* Company PAN Field */}
         <Box mb={3}>
-          <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+          <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
             Company PAN
-          </Text>
+          </FormLabel>
           <Input
             type='text'
             border="1px solid #e2e8f0"
@@ -241,9 +241,9 @@ const OnboardingAddCompanyDetails = ({
 
         {/* Company GST Number */}
         <Box mb={3}>
-          <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+          <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
             Company GST number
-          </Text>
+          </FormLabel>
           <Input
             type='text'
             border="1px solid #e2e8f0"

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,
-     StepTitle, Divider, Button, HStack, IconButton, Flex,
-    useDisclosure
-} from '@chakra-ui/react';
-import Header from './Header';
+  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 {
+  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,175 +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="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,
-                    }}
+  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'}
-                        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' }}
-                                >
-                                    {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}
-                        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"}>
+          {/* 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 />}
@@ -267,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/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/ReimbursementRequest.jsx

@@ -13,10 +13,6 @@ import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import NormalTable from "../../Components/DataTable/NormalTable";
-import { RiDeleteBin5Line } from "react-icons/ri";
-import { AiOutlineEdit } from "react-icons/ai";
-import { FaRegEye } from "react-icons/fa";
-import { PiReceipt } from "react-icons/pi";
 import { MdOutlineNoFood } from "react-icons/md";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import { useNavigate } from "react-router-dom";
@@ -44,21 +40,20 @@ const ReimbursementRequest = () => {
 
   // ===============================[ Table Header ]
   const tableHeadRow = [
-    "Select",
     "Sr. No",
-    "Name",
-    "Status",
-    "Email Address",
-    "Mobile number",
-    "Grade",
-    "Department",
-    "Role",
-    "Action",
+    "Report name",
+    "Report by",
+    "Report amount",
+    "Date & time",
+    "Approver",
+    "Disburser",
+    "Action"
   ];
 
   // const extractedArray = reportsHistory.map((item)=>({ }))
 
-  const extractedArray = employees.map((item, index) => ({
+  const extractedArray = employees.map((item, index) => 
+    ({
     "Sr. No": (
       <Text
         as={"span"}
@@ -70,13 +65,15 @@ const ReimbursementRequest = () => {
         {index + 1}
       </Text>
     ),
-    "Name": item?.Name,
-    "Email Address": item?.emailAddress,
-    "Mobile number": item?.mobileNumber,
-    Grade: item?.Grade,
-    Department: item?.Department,
-    Role: item?.Role,
-    Status: (
+    "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'
@@ -122,7 +119,7 @@ const ReimbursementRequest = () => {
               <MdOutlineNoFood color="#3725EA" />
             </Box>
             <Box>
-              <Text color={"#667085"} fontSize={"sm"} mb={1}>
+              <Text color={"#667085"} fontWeight={600} fontSize={"sm"} mb={1}>
                 Food
               </Text>
               <Text color={"#667085"} fontSize={"xs"} mb={0}>
@@ -131,8 +128,8 @@ const ReimbursementRequest = () => {
             </Box>
           </HStack>
           <Box>
-            <Text color={"#667085"} fontSize={"xs"} mb={1}>
-              Created by - Reethik Thota
+            <Text color={"#667085"} fontSize={"xs"} fontWeight={600} mb={1}>
+              Wallet Amount
             </Text>
             <Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
               ₹ 50,000

src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx

@@ -1,18 +1,18 @@
 import {
-    Box,
-    Button,
-    HStack,
-    VStack,
-    Icon,
-    Checkbox,
-    Tag,
-    TagLabel,
-    Text,
-    Image,
-    useDisclosure,
-    Alert,
-    CloseButton,
-    AlertDescription,
+  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";
@@ -26,250 +26,360 @@ 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 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 = [
-        "Select",
-        "Sr. No",
-        "Name",
-        "Email Address",
-        "Mobile number",
-        "Grade",
-        "Department",
-        "Role",
-        "Action",
-    ];
-
-    // const extractedArray = reportsHistory.map((item)=>({ }))
-
-    const extractedArray = employees.map((item, index) => ({
-        "Sr. No": (
-            <Text
-                as={"span"}
-                display={"flex"}
-                gap={2}
-                alignItems={"center"}
-                fontSize={"xs"}
-            >
-                {index + 1}
-            </Text>
-        ),
-        Name: item?.Name,
-        "Email Address": item?.emailAddress,
-        "Mobile number": item?.mobileNumber,
-        Grade: item?.Grade,
-        Department: item?.Department,
-        Role: item?.Role,
-        Action: (
-            <HStack
-            >
-                <Box p={2} bg={"#ebe0f8"} rounded={"full"}>
-                    <LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
-                </Box>
-                <Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
-                    Invoice243
-                </Text>
-            </HStack>
-        ),
-    }));
-
-    return (
+  const [alertStatus, setAlertStatus] = useState(null);
 
 
+  const handleApprove = () => {
+    setAlertStatus("success");
+  };
 
+  const handleReject = () => {
+    setAlertStatus("error");
+  };
 
+  const { employees } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
 
-        <Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
-            {/* <MiniHeader
+  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 === "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>
+      {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>
+        <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"} 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>
 
-                <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>
 
-                        <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}
+        />
 
-                <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>
-    );
+        <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,6 +1,11 @@
 import {
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
   Box,
   Button,
+  Checkbox,
   Divider,
   HStack,
   Icon,
@@ -16,6 +21,7 @@ import {
   Tag,
   TagLabel,
   Text,
+  useDisclosure,
   VStack,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useMemo, useState } from "react";
@@ -28,6 +34,7 @@ import {
   AddIcon,
   CalendarIcon,
   ChevronDownIcon,
+  ChevronRightIcon,
   EmailIcon,
   SearchIcon,
   ViewIcon,
@@ -64,12 +71,15 @@ import {
   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");
@@ -107,7 +117,11 @@ const WalletProgram = () => {
       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} />
+          <Image
+            h="23px"
+            src={item.walletName[0]?.icon}
+            alt={item.walletName[0]?.icon}
+          />
           {item?.walletName[0]?.name}
         </Box>
       ),
@@ -117,8 +131,20 @@ const WalletProgram = () => {
         <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"}
+          bgColor={
+            item?.status === "Active"
+              ? "#00A43814"
+              : item?.status === "Inactive"
+              ? "#C33FAD21"
+              : "#E0BC0114"
+          }
+          color={
+            item?.status === "Active"
+              ? "#00A438"
+              : item?.status === "Inactive"
+              ? "#C33FAD"
+              : "#E0BC01"
+          }
           p={1}
           px={3}
         >
@@ -130,7 +156,6 @@ const WalletProgram = () => {
       "Created by": item?.CreatedBy,
     }));
   }, [walletProgram]);
-  
 
   return (
     <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
@@ -201,9 +226,14 @@ const WalletProgram = () => {
                   </MenuItem>
                 </MenuList>
               </Menu>
-              <NavLink to="/wallet-program/create-wallet">
-                <PrimaryButton leftIcon={<AddIcon />} title={"Create wallet"} />
-              </NavLink>
+              <PrimaryButton
+                onClick={onOpen}
+                leftIcon={<AddIcon />}
+                title={"Create wallet"}
+              />
+
+              {/* <NavLink to="/wallet-program/create-wallet">
+              </NavLink> */}
             </Box>
           </Box>
           <Divider />
@@ -250,13 +280,45 @@ const WalletProgram = () => {
                 >
                   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="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"
@@ -343,6 +405,8 @@ const WalletProgram = () => {
           </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/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/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/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx

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

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

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

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

@@ -1,48 +1,67 @@
-import { Box, Button, Image, Text, VStack } from "@chakra-ui/react";
-import React, { useEffect, useRef } from "react";
-import VanillaTilt from "vanilla-tilt"; // Ensure this is imported
+import { 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 cards = [
-  {
-    title: "Save More",
-    subtitle: "Digital Gift Card",
-    description:
-      "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
-    image: mobilepng,
-    img: cardfooter,
-    link: "/dashboard/apply-for-giftcards/apply-for-digitalcard",
-  },
-  {
-    title: "Save More",
-    subtitle: "Physical Gift Card",
-    description:
-      "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
-    img: cardfooter2,
-  },
-  {
-    title: "Save More",
-    subtitle: "Insta Gift Card",
-    description:
-      "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
-    img: cardfooter3,
-  },
-];
-
-const SelectCard = () => {
+const 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: 13,
+          max: 8,
           speed: 700,
           glare: true,
-          scale: 1.05,
+          scale: 1.01,
           "max-glare": 0.5,
           onEnter: () => {
             node.style.zIndex = 10; // Bring to top on hover
@@ -54,7 +73,7 @@ const SelectCard = () => {
       }
     });
 
-    // Cleanup VanillaTilt instances on unmount
+    // Cleanup VanillaTilt
     return () => {
       tiltRefs.current.forEach((node) => {
         if (node?.vanillaTilt) {
@@ -62,85 +81,105 @@ const SelectCard = () => {
         }
       });
     };
-  }, [tiltRefs]);
+  }, []);
 
   return (
-    <Box p={4}>
-      <Text color="#000000" fontWeight={600} fontSize="small">
-        Select card type
-      </Text>
-
-      <Box display="flex" justifyContent="center" gap={4}>
-        {cards.map((card, index) => (
-          <Box
-            key={index}
-            ref={(el) => (tiltRefs.current[index] = el)}
-            bgGradient="linear-gradient(180deg, #6311CB 0%, #1F1584 100%)"
-            color="white"
-            borderRadius="lg"
-            overflow="hidden"
-            width={{ base: "100%", md: "300px" }}
-            padding={6}
-            textAlign="center"
-            boxShadow="lg"
-            position="relative"
-          >
-            <VStack
-              h="373px"
-              alignItems="flex-start"
-              spacing={4}
+    <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"
             >
-              <Button
-                p={4}
-                bgColor="transparent"
-                border="1px solid #fff"
-                color="#fff"
-                fontSize="small"
-                _hover={{ bgColor: "transparent", color: "white" }}
+              <VStack
+                h="373px"
+                alignItems="flex-start"
+                spacing={0}
+                position="relative"
               >
-                Select
-              </Button>
+                <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="large">
-                {card.title}
-              </Text>
+                <Text as="span" fontSize="lg" fontWeight={400} mb={0} mt={4}>
+                  {card.title}
+                </Text>
 
-              <Text as="span" fontSize="large">
-                {card.subtitle}
-              </Text>
+                <Text as="span" fontSize="lg" fontWeight={500} mb={2}>
+                  {card.subtitle}
+                </Text>
 
-              <Text as="span" fontSize="small" textAlign="start">
-                {card.description}
-              </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.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>
+                {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>
   );
 };

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx

@@ -1,44 +1,144 @@
-import { Box, FormControl, FormLabel, Input, Text } from "@chakra-ui/react";
-import { Grid, GridItem } from "@chakra-ui/react";
-import React from "react";
-
+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",
-  },
-  {
-    label: "Address line 2",
-  },
-  {
-    label: "Pincode",
-  },
-  {
-    label: "City",
-  },
-  {
-    label: "Single Point Activation Number",
-  },
+  { 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 p={4}>
-      <Text color="#5E5E5E" fontWeight={600} fontSize="small" mb={4}>
+    <Box>
+      <Text color="#5E5E5E" fontWeight={500} fontSize="small" mb={4}>
         Fill address details
       </Text>
 
-      <FormControl>
-        <Grid templateColumns='repeat(2, 1fr)' gap={6}>
+      <FormControl as="form">
+        <Grid templateColumns="repeat(2, 1fr)" gap={6}>
           {formsInfos.map((val) => (
-            <GridItem
-              key={val.label}
-            >
-              <FormLabel>{val.label}</FormLabel>
-              <Input type="text" />
+            <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>
   );
 };

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx

@@ -1,6 +1,7 @@
-import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
+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");
@@ -10,7 +11,7 @@ const WhereToShare = ({ register }) => {
       case "1":
         return <SingleAddress />;
       case "2":
-        return <Box>Add department content</Box>;
+        return <MultipleAddress/>;
       default:
         return null;
     }
@@ -25,10 +26,11 @@ const WhereToShare = ({ register }) => {
             display="flex"
             flexDirection="row"
             borderRadius="5px"
-            bgColor="#F4F4F4"
           >
             <Radio size="sm" colorScheme="purple" value="1">
-              Single address
+              <Text color={"#3F4754"} mb={0} fontWeight={500} fontSize={"xs"}>
+                Single address
+              </Text>
             </Radio>
           </Box>
           <Box
@@ -36,14 +38,16 @@ const WhereToShare = ({ register }) => {
             display="flex"
             flexDirection="row"
             borderRadius="5px"
-            bgColor="#F4F4F4"
           >
-            <Radio size="sm" colorScheme="blue" value="2">
-              Multiple address
+            <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>
     </>
   );

src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx

@@ -86,6 +86,7 @@ const BrandVoucher = () => {
   // const extractedArray = reportsHistory.map((item)=>({ }))
 
   const extractedArray = voucher.map((item, index) => ({
+    id: item.id,
     "Sr. no": (
         <Text
           as={"span"}

src/Pages/OptiFiiGifsAndVouchers/DigiTable.jsx

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

src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx

@@ -59,25 +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 = [
@@ -113,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
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+      >
+        {/* <Icon
             as={PiReceipt}
             boxSize={8}
             p={1.5}
@@ -131,8 +137,8 @@ const GiftCard = () => {
             rounded={"full"}
           /> */}
 
-          {item?.id}
-        </Text>
+        {item?.id}
+      </Text>
       // </Checkbox>
     ),
     "Order ID": (
@@ -177,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}
@@ -210,9 +216,9 @@ const GiftCard = () => {
           boxShadow="md"
           justifyContent={"center"}
         >
-            <Text color="#7F56D9" fontSize="xs" mb={0}>
-              +{users}
-            </Text>
+          <Text color="#7F56D9" fontSize="xs" mb={0}>
+            +{users}
+          </Text>
         </Box>
       </Box>
     ),
@@ -335,37 +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"}
-          /> */}
 
-            {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}
@@ -375,8 +361,29 @@ 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,
@@ -434,9 +441,9 @@ const GiftCard = () => {
           boxShadow="md"
           justifyContent={"center"}
         >
-            <Text color="#7F56D9" fontSize="xs" mb={0}>
-              +{users}
-            </Text>
+          <Text color="#7F56D9" fontSize="xs" mb={0}>
+            +{users}
+          </Text>
         </Box>
       </Box>
     ),
@@ -504,25 +511,26 @@ 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
+      <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>
+        {item?.id}
+      </Text>
       // </Checkbox>
     ),
     "Order ID": (
@@ -603,9 +611,9 @@ const GiftCard = () => {
           boxShadow="md"
           justifyContent={"center"}
         >
-            <Text color="#7F56D9" fontSize="xs" mb={0}>
-             +{users}
-            </Text>
+          <Text color="#7F56D9" fontSize="xs" mb={0}>
+            +{users}
+          </Text>
         </Box>
       </Box>
     ),
@@ -808,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"

src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx

@@ -40,7 +40,7 @@ import {
 } from "@chakra-ui/icons";
 import info from "../../assets/info.png";
 import redinfo from "../../assets/redinfo.png";
-import { NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import { CiCalendar } from "react-icons/ci";
 import ReactApexChart from "react-apexcharts";
 import { GoDotFill } from "react-icons/go";
@@ -752,31 +752,41 @@ const GiftDashboard = () => {
       <Box>
         <HStack align="center" wrap="wrap" gap={4} mb={6}>
           {/* Gift Card */}
-          <Box
-            h="20"
-            borderRadius="md"
-            bgGradient="linear(94.7deg, #C33FAD -20.49%, #3725EA -10.28%, #6311CB 39.15%)"
-            px={4}
-            color="white"
-            display="flex"
-            alignItems="center"
-            justifyContent="space-between"
-            shadow="md"
-            flex={1}
-            position={"relative"}
-            overflow={"hidden"}
+          <NavLink
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              cursor: "pointer",
+              flex: 1,
+            }}
+            to="/optifii-gifts-dashboard/apply-for-giftcards"
           >
-            <Flex alignItems="center" gap={4}>
-              <Box
-                bgGradient={
-                  "linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
-                }
-                p={2}
-                rounded={"md"}
-              >
-                <Image src={GC} w={10} h={6}></Image>
-              </Box>
-              <NavLink style={{display:"flex" , flexDirection:"row" , alignItems:"center"}} to="/dashboard/apply-for-giftcards">
+            <Box
+              h="20"
+              borderRadius="md"
+              bgGradient="linear(94.7deg, #C33FAD -20.49%, #3725EA -10.28%, #6311CB 39.15%)"
+              px={4}
+              color="white"
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              shadow="md"
+              flex={1}
+              position={"relative"}
+              overflow={"hidden"}
+            >
+              <Flex alignItems="center" gap={4}>
+                <Box
+                  bgGradient={
+                    "linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
+                  }
+                  p={2}
+                  rounded={"md"}
+                >
+                  <Image src={GC} w={10} h={6}></Image>
+                </Box>
+
                 <Text fontWeight="500" fontSize="sm" mb={0}>
                   Apply for gift card
                 </Text>
@@ -792,66 +802,76 @@ const GiftDashboard = () => {
                 >
                   <ArrowForwardIcon boxSize={5} color="white" />
                 </Box>
-              </NavLink>
-            </Flex>
-            <Box position={"absolute"} right={-2}>
-              <Image
-                src={GC}
-                w={16}
-                mixBlendMode={"screen"}
-                opacity={0.7}
-              ></Image>
+              </Flex>
+              <Box position={"absolute"} right={-2}>
+                <Image
+                  src={GC}
+                  w={16}
+                  mixBlendMode={"screen"}
+                  opacity={0.7}
+                ></Image>
+              </Box>
             </Box>
-          </Box>
+          </NavLink>
 
           {/* Brand Voucher */}
-          <Box
-            h="20"
-            borderRadius="md"
-            bgGradient="linear(94.7deg, #C33FAD -20.49%, #6311CB -10.28%, #3725EA 39.15%)"
-            px={4}
-            color="white"
-            display="flex"
-            alignItems="center"
-            justifyContent="space-between"
-            shadow="md"
-            flex={1}
-            position={"relative"}
+          <Link
+            style={{
+              flex: 1,
+              display:"flex",
+              flexDirection:"row",
+              alignItems:"center"
+            }}
+            to="/brand-voucher/buy-voucher"
           >
-            <Flex alignItems="center" gap={4}>
-              <Box
-                bgGradient={
-                  "linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
-                }
-                p={2}
-                rounded={"md"}
-              >
-                <Image src={BV} w={10} h={6}></Image>
+            <Box
+              h="20"
+              borderRadius="md"
+              bgGradient="linear(94.7deg, #C33FAD -20.49%, #6311CB -10.28%, #3725EA 39.15%)"
+              px={4}
+              color="white"
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              shadow="md"
+              flex={1}
+              position={"relative"}
+            >
+              <Flex alignItems="center" gap={4}>
+                <Box
+                  bgGradient={
+                    "linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
+                  }
+                  p={2}
+                  rounded={"md"}
+                >
+                  <Image src={BV} w={10} h={6}></Image>
+                </Box>
+                <Text fontWeight="500" fontSize="sm" mb={0}>
+                  Apply for brand voucher
+                </Text>
+                <Box
+                  bg="#5f51ee"
+                  w="6"
+                  h="6"
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  rounded="full"
+                >
+                  <ArrowForwardIcon boxSize={5} color="white" />
+                </Box>
+              </Flex>
+              <Box position={"absolute"} right={-2}>
+                <Image
+                  src={BV}
+                  w={16}
+                  mixBlendMode={"screen"}
+                  opacity={0.7}
+                ></Image>
               </Box>
-              <Text fontWeight="500" fontSize="sm" mb={0}>
-                Apply for brand voucher
-              </Text>
-              <Box
-                bg="#5f51ee"
-                w="6"
-                h="6"
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-                rounded="full"
-              >
-                <ArrowForwardIcon boxSize={5} color="white" />
-              </Box>
-            </Flex>
-            <Box position={"absolute"} right={-2}>
-              <Image
-                src={BV}
-                w={16}
-                mixBlendMode={"screen"}
-                opacity={0.7}
-              ></Image>
             </Box>
-          </Box>
+          </Link>
 
           {/* GPR Card */}
           <Box

src/Pages/OptiFiiGifsAndVouchers/SelectDepartment.jsx

@@ -75,6 +75,7 @@ const Employees = () => {
   // const extractedArray = reportsHistory.map((item)=>({ }))
 
   const extractedArray = employees.map((item, index) => ({
+    id: item.id,
     "Sr No": (
       <Text as={"span"} fontSize={"small"}>
         {item?.id}

src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx

@@ -111,6 +111,7 @@ const Employees = () => {
   ];
 
   const extractedArray = employees.map((item) => ({
+    id: item.id,
     "Emp ID": (
       // <Checkbox colorScheme="purple" value="1">
         <Text as={"span"} fontSize={"xs"}>

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

@@ -1,9 +1,17 @@
 import {
+  Badge,
   Box,
   Button,
   Divider,
+  Heading,
   HStack,
   Icon,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Select,
   Tag,
   TagLabel,
   Text,
@@ -13,16 +21,24 @@ import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import NormalTable from "../../Components/DataTable/NormalTable";
-import { CalendarIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
+import { CalendarIcon, ChevronDownIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
+import { MdNotificationsNone, MdOutlineHeadsetMic, MdOutlineUnarchive } from "react-icons/md";
 import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
-import { AiOutlineEdit } from "react-icons/ai";
+import { AiOutlineCalendar, AiOutlineEdit } from "react-icons/ai";
 import { FaRegEye } from "react-icons/fa";
 import { PiReceipt } from "react-icons/pi";
+import ApexLine from "../../Components/Doughnut/ApexLine";
+import PieCharts from "../../Components/Doughnut/PieCharts";
+import { GoDotFill } from "react-icons/go";
+import { Link } from "react-router-dom";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import { IoMdArrowDropdown } from "react-icons/io";
+import Chart from 'chart.js/auto'
 
 const Report = () => {
-  const { reportsHistory } = useContext(GlobalStateContext);
+  const { transactionHistory } = useContext(GlobalStateContext);
+  const { reportStatus } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
@@ -40,138 +56,207 @@ const Report = () => {
 
   // ===============================[ Table Header ]
   const tableHeadRow = [
-    "Name",
-    "Last Update",
-    "Report type",
-    "Total Expense",
-    "Status",
-    "Actions",
+    "Employee Name",
+    "Employee ID",
+    "Department",
+    "Wallet",
+    "Merchant",
+    "Nature of expense",
+    "Date & time",
+    "Amount",
   ];
 
   // const extractedArray = reportsHistory.map((item)=>({ }))
-
-  const extractedArray = reportsHistory.map((item, index) => ({
+  const extractedArray = transactionHistory.map((item, index) => ({
     Name: <Text as={'span'} display={'flex'} gap={2} alignItems={'center'}>
     <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>,
-    "Last Update": 
-      item?.lastUpdated,
-    "Report type": item?.reportType,
-    "Total Expense": item?.totalExpense,
-    Status: (
-      <Tag
-        my={1}
-        size={"sm"}
-        borderRadius="full"
-        colorScheme={
-          item?.status === "Approved"
-            ? "green"
-            : item?.status === "Fully Reimbursed"
-            ? "purple"
-            : item?.status === "Disapproved"
-            ? "red"
-            : item?.status === "Saved"
-            ? "yellow"
-            : item?.status === "Partially Reimbursed"
-            ? "orange"
-            : "gray" // default color scheme if status doesn't match any condition
-        }
-        border={`1px solid ${
-          item?.status === "Approved"
-            ? "green"
-            : item?.status === "Fully Reimbursed"
-            ? "purple"
-            : item?.status === "Disapproved"
-            ? "red"
-            : item?.status === "Saved"
-            ? "orange"
-            : item?.status === "Partially Reimbursed"
-            ? "orange"
-            : "gray" // default border color if status doesn't match any condition
-        }`}
-        p={1}
-        px={3}
-      >
-        <TagLabel>{item?.status}</TagLabel>
-      </Tag>
-    ),
-    Actions: (
-      <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>
+    "Employee Name": 
+      item?.employeeName,
+    "Employee ID": item?.employeeID,
+    "Department": item?.department,
+    "Wallet": item?.wallet,
+    "Merchant": item?.merchant,
+    "Nature of expense": item?.natureExpense,
+    "Date & time": item?.dateTime,
+    "Amount":(
+      <Box color={"#59C36A"}>{item?.amount}</Box>
     ),
   }));
 
+
+    // ===============================[ Table Header ]
+    const tableHeadRowReport = [
+      "Report Name",
+      "Report by",
+      "Report amount",
+      "Date & time",
+      "Status",
+      "Approver",
+      "Disburser",
+      "Action",
+    ];
+  
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+    const extractedArrayReport = reportStatus.map((item, index) => ({
+      Name: <Text as={'span'} display={'flex'} gap={2} alignItems={'center'}>
+      <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>,
+        "Report Name":item?.reportName,
+        "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>
+        ),
+        "Report amount": item?.reportAmount,
+        "Date & time": item?.dateTime,
+        "Status":  (
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+            gap={1}
+            bg={
+              item?.status === "Fully Reimbursed"
+                ? "#F8F3FF"
+                : item?.status === "Partially Reimbursed"
+                  ? "Partially Reimbursed"
+                  : item?.status === "Approved"
+                    ? "#00A43814"
+                    : "#f8d7da" 
+            }
+            rounded={"full"}
+            color={
+              item?.status === "Fully Reimbursed"
+                ? "#6311CB"
+                : item?.status === "Partially Reimbursed"
+                  ? "#EAB600"
+                  : item?.status === "Approved"
+                    ? "#00A438"
+                    : "#721c24" // Default red text for unknown statuses
+            }
+            py={1.5}
+            px={1}
+          >
+            <GoDotFill />
+            {item?.status}
+          </Box>
+        ),
+        "Approver": (
+          <HStack>
+            <Image
+              borderRadius='full'
+              boxSize='40px'
+              src='https://bit.ly/dan-abramov'
+              alt='Dan Abramov'
+            />
+            <Text color={"#667085"} fontSize={"xs"} mb={1}>
+            Ravi Sharma
+            </Text>
+          </HStack>
+        ),
+        "Disburser":(
+          <HStack>
+            <Image
+              borderRadius='full'
+              boxSize='40px'
+              src='https://bit.ly/dan-abramov'
+              alt='Dan Abramov'
+            />
+            <Text color={"#667085"} fontSize={"xs"} mb={1}>
+            Karan Johar
+            </Text>
+          </HStack>
+        ),
+        "Action":(
+          <Link to="/reports/view-report"><Badge fontWeight={500} fontSize={"10px"} bg="#6211CB" color={"#fff"} p={1} px={2} rounded={5}>View Reports</Badge></Link>
+       ),
+    }));
+
   return (
     <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
-      <MiniHeader
-        title={"Reports History"}
-        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
-        backButton={true}
-      />
-
+      <HStack mb={4} justifyContent={"space-between"}>
+          <Heading fontSize={"md"} fontWeight={500} mb={0}>
+             Report
+          </Heading>
+          <Box display={"flex"} alignItems={"center"} gap={3}>
+              <Box
+                fontSize={"xs"}
+                display={"flex"}
+                alignItems={"center"}
+                bg={"#fff"}
+                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>
+              <Button
+                as={Button}
+                leftIcon={<MdOutlineUnarchive fontSize={"16px"} />}
+                // rightIcon={<ChevronDownIcon />}
+                fontSize={"xs"}
+                size={"sm"}
+                me={2}
+                style={{backgroundColor:"#fff"}}
+                color={"#6311CB"}
+              >
+                Export
+              </Button>
+          </Box>
+        </HStack>
+      <HStack w={"100%"} mb={4}>
+          <Box h={300} bg={"#fff"} me={2} rounded={6} w={"65%"} pb={0} p={4} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
+            {/* <ApexLine /> */}
+          </Box>
+          <Box  h={300} bg={"#fff"} rounded={6} w={"35%"} p={4} display={"flex"} justifyContent={"center"} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
+            {/* <PieCharts /> */}
+          </Box>
+        </HStack>
       <Box
         rounded={"xl"}
-        py={3}
-        // pb={0}
         display={"flex"}
         flexDirection={"column"}
         bg={"#fff"}
         shadow={"md"}
         minH={"100%"}
+        mb={4}
       >
-        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
-          <Text fontSize={"lg"} fontWeight={600}>
-            Reports
-          </Text>
-          <HStack w={"100%"} justifyContent={"space-between"}>
-            <Button
-              fontWeight={500}
-              size={"sm"}
-              leftIcon={<CalendarIcon color={"purple.800"} />}
-              colorScheme="gray"
-              color={"gray.700"}
-              variant="outline"
-              fontSize={"xs"}
-            >
-              Select Date Range
-            </Button>
-
-            <Button
-              _hover={{
-                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
-                opacity: 0.8,
-              }}
-              bgGradient="linear(to-r, #3725EA, #5E0FCD)"
-              fontSize={"xs"}
-              px={8}
-              fontWeight={500}
-              size={"sm"}
-              color={"#fff"}
-              variant="outline"
-              transition={"0.5s all"}
-              _active={{
-                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
-                opacity: 1,
-              }}
-            >
-              Add to Report
-            </Button>
-          </HStack>
-        </VStack>
-        <Divider />
+        <Box display={"flex"} justifyContent={"space-between"} p={4} alignItems={"center"}>
+          <Heading fontSize={"md"} mb={0} fontWeight={500}>Transaction history</Heading>
+          <Box display={"flex"}>
+            <Select placeholder="Weekly" size={"sm"} rounded={"md"}>
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+              <option value="option3">Option 3</option>
+            </Select>
+          </Box>
+        </Box>
         <NormalTable
           emptyMessage={`We don't have any Sponers `}
           tableHeadRow={tableHeadRow}
@@ -179,6 +264,31 @@ const Report = () => {
           isLoading={isLoading}
         />
       </Box>
+      <Box
+        rounded={"xl"}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+      <Box display={"flex"} justifyContent={"space-between"} p={4} alignItems={"center"}>
+          <Heading fontSize={"md"} mb={0} fontWeight={500}>Reimbursement status</Heading>
+          <Box display={"flex"}>
+            <Select placeholder="Weekly" size={"sm"} rounded={"md"}>
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+              <option value="option3">Option 3</option>
+            </Select>
+          </Box>
+        </Box>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRowReport}
+          data={extractedArrayReport}
+          isLoading={isLoading}
+        />
+        </Box>
     </Box>
   );
 };

src/Pages/Report/ViewReports.jsx

@@ -0,0 +1,201 @@
+import { Box, Button, Divider, Heading, HStack, Image, Menu, MenuButton, MenuItem, MenuList, Tag, TagLabel, Text } from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { LiaFileInvoiceSolid } from "react-icons/lia";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { GrDownload } from "react-icons/gr";
+import { GoDotFill } from "react-icons/go";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import { ChevronDownIcon } from "@chakra-ui/icons";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+
+const ViewReports = () => {
+  const { viewReports } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ======================= [ Table Header ] =======================
+  const tableHeadRow = [
+    "Invoice",
+    "Amount",
+    "Paid from wallet",
+    "Status",
+    "Action",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = viewReports.map((item, index) => ({
+    Invoice: (
+      <HStack>
+        <Box p={2} bg={"#ebe0f8"} rounded={"full"}>
+          <LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
+        </Box>
+        <Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
+          {item?.inVoice}
+        </Text>
+      </HStack>
+    ),
+    Amount: item?.amount,
+    "Paid from wallet": item?.paidWallet,
+    Status:(
+        <Box
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+            gap={1}
+            bg={
+              item?.status === "Fully Reimbursed"
+                ? "#F8F3FF"
+                : item?.status === "Partially Reimbursed"
+                  ? "Partially Reimbursed"
+                  : item?.status === "Approved"
+                    ? "#00A43814"
+                    : "#f8d7da" 
+            }
+            rounded={"full"}
+            color={
+              item?.status === "Fully Reimbursed"
+                ? "#6311CB"
+                : item?.status === "Partially Reimbursed"
+                  ? "#EAB600"
+                  : item?.status === "Approved"
+                    ? "#00A438"
+                    : "#721c24" // Default red text for unknown statuses
+            }
+            p={1}          >
+            <GoDotFill />
+            {item?.status}
+        </Box>
+      ),
+    Action: (
+        <Button
+          gap={2}
+          fontSize="x-small"
+          color="#039E38"
+          bgColor="transparent"
+          _hover={{ bgColor: "white" }}
+        >
+          <GrDownload />
+          Download
+        </Button>
+    ),
+  }));
+
+  return (
+    <Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
+      <Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"} mb={5}>
+        <HStack mb={4} justifyContent={"space-between"}>
+          <Heading fontSize={"md"} fontWeight={500} mb={0}>
+            Food expense June 2024
+          </Heading>
+          <Box
+            fontSize={"xs"}
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+            gap={1}
+            bg={"#F8F3FF"}
+            rounded={"full"}
+            color={"#6311CB"}
+            py={1} px={2}          >
+            <GoDotFill />
+            Fully Reimbursed
+        </Box>
+        </HStack>
+        <Divider />
+        <HStack width={"100%"} mb={8}>
+          <Box flex={1}>
+            <Text fontSize={"sm"} mb={2} fontWeight={500}>
+              Report by
+            </Text>
+            <Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
+              Kartikey Gautam
+            </Text>
+          </Box>
+          <Box flex={1}>
+            <Text fontSize={"sm"} mb={2} fontWeight={500}>
+              Report amount
+            </Text>
+            <Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
+              ₹ 10,000
+            </Text>
+          </Box>
+          <Box flex={1}>
+            <Text fontSize={"sm"} mb={2} fontWeight={500}>
+              Date & time
+            </Text>
+            <Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
+              22 June, 2024
+            </Text>
+          </Box>
+          <Box flex={1}>
+            <Text fontSize={"sm"} mb={2} fontWeight={500}>
+              Approver
+            </Text>
+            <Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
+              Pooja Patade
+            </Text>
+          </Box>
+          <Box flex={1}>
+            <Text fontSize={"sm"} mb={2} fontWeight={500}>
+              Disburser
+            </Text>
+            <Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
+              Pooja Patade
+            </Text>
+          </Box>
+        </HStack>
+      </Box>
+      <Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
+      <HStack mb={4} justifyContent={"space-between"}>
+          <Heading fontSize={"md"} fontWeight={500} mb={0}>
+            Food expense June 2024
+          </Heading>
+          <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>
+        </HStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          showRadioButton={true}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default ViewReports;

src/Pages/SupportAndTicket/SupportAndTicket.jsx

@@ -20,13 +20,14 @@ import {
   useDisclosure,
   Select,
   Textarea,
+  Flex,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import NormalTable from "../../Components/DataTable/NormalTable";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import { useNavigate } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import ExcelIcon from "../../assets/ExcelIcon.svg";
 import { GoDotFill } from "react-icons/go";
 import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
@@ -34,14 +35,15 @@ import { FaArrowUpFromBracket } from "react-icons/fa6";
 import { PiIdentificationBadge } from "react-icons/pi";
 import PrimaryButton from "../../Components/Buttons/PrimaryButton";
 import SecondaryButton from "../../Components/Buttons/SecondaryButton";
+import { BsFilterRight } from "react-icons/bs";
+import { LuListFilter } from "react-icons/lu";
 
 const SupportAndTicket = () => {
-
   const navigate = useNavigate();
   const { SupportAndTicket } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
-  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   useEffect(() => {
     // Set isLoading to true
@@ -58,12 +60,12 @@ const SupportAndTicket = () => {
 
   // ===============================[ Table Header ]
   const tableHeadRow = [
-    "Select",
     "Ticket ID",
     "Subject",
     "Status",
     "Last update",
     "Support",
+    "Action",
   ];
 
   // const extractedArray = reportsHistory.map((item)=>({ }))
@@ -80,8 +82,8 @@ const SupportAndTicket = () => {
         {item?.TicketID}
       </Text>
     ),
-    "Subject": item?.Subject,
-    "Status": (
+    Subject: item?.Subject,
+    Status: (
       <Box
         display={"flex"}
         alignItems={"center"}
@@ -91,20 +93,20 @@ const SupportAndTicket = () => {
           item?.Status === "In progress"
             ? "#ebf8ef"
             : item?.Status === "On hold"
-              ? "#f2f9ff"
-              : item?.Status === "Inactive"
-                ? "#ffeeed"
-                : "#f8d7da" // Default reddish background for unknown statuses
+            ? "#f2f9ff"
+            : item?.Status === "Inactive"
+            ? "#ffeeed"
+            : "#f8d7da" // Default reddish background for unknown statuses
         }
         rounded={"full"}
         color={
           item?.Status === "In progress"
             ? "#00A438"
             : item?.Status === "On hold"
-              ? "#62B2FD"
-              : item?.Status === "Inactive"
-                ? "#FF2E23"
-                : "#721c24" // Default red text for unknown statuses
+            ? "#62B2FD"
+            : item?.Status === "Inactive"
+            ? "#FF2E23"
+            : "#721c24" // Default red text for unknown statuses
         }
         py={1.5}
         px={1}
@@ -114,7 +116,21 @@ const SupportAndTicket = () => {
       </Box>
     ),
     "Last update": item?.LastUpdate,
-    "Support": item?.Support,
+    Support: item?.Support,
+    Action: (
+      <NavLink to="/support-ticket/view-ticket">
+        <Button
+          bgColor="#6311CB"
+          color="#fff"
+          fontSize="x-small"
+          w={"87px"}
+          h={"27px"}
+          _hover={{ bgColor: "#6311CB", borderRadius: "5px" }}
+        >
+          View
+        </Button>
+      </NavLink>
+    ),
   }));
 
   return (
@@ -140,7 +156,7 @@ const SupportAndTicket = () => {
             </InputLeftElement>
             <Input
               type="search"
-              placeholder="Search"
+              placeholder=" "
               rounded="md"
               focusBorderColor="#3725EA"
               value={searchTerm}
@@ -174,10 +190,69 @@ const SupportAndTicket = () => {
             <PrimaryButton
               onClick={onOpen}
               leftIcon={<AddIcon />}
-              title={"Add new ticket"} />
+              title={"Add new ticket"}
+            />
           </Box>
         </Box>
         <hr />
+        <HStack w={"100%"} justifyContent={"space-between"} px={4} 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>
+            <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>
         <NormalTable
           emptyMessage={`We don't have any Sponers `}
           tableHeadRow={tableHeadRow}
@@ -188,56 +263,83 @@ const SupportAndTicket = () => {
       </Box>
 
       {/* modal  */}
-      <Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
+      <Modal size={"md"} isOpen={isOpen} onClose={onClose} isCentered>
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Add New ticket</ModalHeader>
+          <ModalHeader fontSize={"md"}>Add New ticket</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
             <Box mb={4}>
               <Text fontSize={"xs"} fontWeight={500} mb={1}>
                 Requester
               </Text>
-              <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+              <Input
+                size={"sm"}
+                rounded={"md"}
+                fontSize={"sm"}
+                fontWeight={500}
+              />
             </Box>
             <Box mb={4}>
               <Text fontSize={"xs"} fontWeight={500} mb={1}>
                 Subject
               </Text>
-              <Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
+              <Input
+                size={"sm"}
+                rounded={"md"}
+                fontSize={"sm"}
+                fontWeight={500}
+              />
             </Box>
             <Box mb={4}>
               <Text fontSize={"xs"} fontWeight={500} mb={1}>
                 Type
               </Text>
-              <Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
-                <option value='option1'>Option 1</option>
-                <option value='option2'>Option 2</option>
-                <option value='option3'>Option 3</option>
+              <Select
+                size={"sm"}
+                rounded={"md"}
+                fontSize={"sm"}
+                fontWeight={500}
+                placeholder=" "
+              >
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
               </Select>
             </Box>
             <Box mb={4}>
               <Text fontSize={"xs"} fontWeight={500} mb={1}>
                 Priority
               </Text>
-              <Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
-                <option value='option1'>Option 1</option>
-                <option value='option2'>Option 2</option>
-                <option value='option3'>Option 3</option>
+              <Select
+                size={"sm"}
+                rounded={"md"}
+                fontSize={"sm"}
+                fontWeight={500}
+                placeholder=" "
+              >
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
               </Select>
             </Box>
             <Box mb={4}>
               <Text fontSize={"xs"} fontWeight={500} mb={1}>
                 Description
               </Text>
-              <Textarea size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} resize={"none"} />
+              <Textarea
+                size={"sm"}
+                rounded={"md"}
+                fontSize={"sm"}
+                fontWeight={500}
+                resize={"none"}
+              />
             </Box>
 
             <HStack py={4} justifyContent={"center"}>
-              <SecondaryButton title={"Cancel"}/>
+              <SecondaryButton title={"Cancel"} />
               <PrimaryButton title={"Create ticket"} />
             </HStack>
-
           </ModalBody>
         </ModalContent>
       </Modal>

src/Pages/SupportAndTicket/ViewTicket.jsx

@@ -0,0 +1,252 @@
+import {
+    Box,
+    Button,
+    Flex,
+    HStack,
+    Image,
+    Input,
+    Switch,
+    Tag,
+    Text,
+    Textarea,
+    VStack,
+  } from "@chakra-ui/react";
+  import React from "react";
+  import { OPACITY_ON_LOAD } from "../../Layout/animations";
+  import womenpfp from "../../assets/womenpfp1.png";
+  import { AttachmentIcon } from "@chakra-ui/icons";
+  
+  const data = [{ id: 1, label: "Ticket ID:" }];
+  
+  const ViewTicket = () => {
+    return (
+      <Box
+        bgColor="#F3F3F9"
+        {...OPACITY_ON_LOAD}
+        p={4}
+        overflowX="scroll"
+        display="flex"
+        flexDirection="column"
+        gap={4}
+      >
+        <Flex
+          p={4}
+          alignItems="flex-start"
+          flexDirection="row"
+          gap={2}
+          bgColor="#FFFFFF"
+          boxShadow="0px 6px 12px 0px #0000001A"
+          h="100%"
+          borderRadius="10px"
+          justifyContent="space-between"
+        >
+          <VStack alignItems="flex-start">
+            <HStack alignItems="center" gap={2}>
+              <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={400}>
+                Ticket ID:
+              </Text>
+              <Box
+                borderRadius="50px"
+                px={2}
+                py={1}
+                variant="outline"
+                bg={"#ececec"}
+                color="#202020"
+                fontSize="x-small"
+                border="1px solid #9E9E9E"
+                fontWeight={600}
+              >
+                #1E233
+              </Box>
+            </HStack>
+            <HStack alignItems="center" gap={2}>
+              <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={500}>
+                Created:
+              </Text>
+              <Text as="span" fontSize="small" color="#202020" fontWeight={600}>
+                31 Dec 2022
+              </Text>
+            </HStack>
+            <HStack alignItems="center" gap={2}>
+              <Text fontSize="small" as="span" color="#7E7E7E" fontWeight={500}>
+                Last message:
+              </Text>
+              <Text fontSize="small" as="span" color="#202020" fontWeight={600}>
+                31 Dec 2022
+              </Text>
+            </HStack>
+          </VStack>
+  
+          <VStack>
+            <HStack alignItems="center" gap={2}>
+              <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={500}>
+                Status:
+              </Text>
+              <Box
+                borderRadius="50px"
+                px={2}
+                py={1}
+                fontWeight={700}
+                variant="outline"
+                bgColor="#f0f9f2"
+                color="#03781D"
+                fontSize="x-small"
+                border="1px solid #6DC580"
+              >
+                Open
+              </Box>
+            </HStack>
+            <HStack alignItems="center" gap={2}>
+              <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={500}>
+                Priority:
+              </Text>
+              <Box
+                borderRadius="50px"
+                px={2}
+                py={1}
+                fontWeight={700}
+                variant="outline"
+                bgColor="#f9f2f2"
+                color="#BA1717"
+                fontSize="x-small"
+                border="1px solid #E2A1A1"
+              >
+                Urgent
+              </Box>
+            </HStack>
+          </VStack>
+        </Flex>
+  
+        <Box p={4} bgColor="#FFFFFF" boxShadow="0px 6px 12px 0px #0000001A" borderRadius="10px">
+          {/* {/ First Chat Bubble /} */}
+          <HStack py={4} alignItems="start" spacing={2}>
+            <Box
+              bgColor="#FFFF"
+              h="40px"
+              w="40px"
+              borderRadius="50%"
+              boxShadow="0px 4px 20px 0px #00000040"
+              p={1}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+            >
+              <Image
+                borderRadius='full'
+                boxSize='30px'
+                src='https://bit.ly/dan-abramov'
+                alt='Dan Abramov'
+              />
+            </Box>
+  
+            <VStack alignItems="flex-start" gap={2}>
+              <Box
+                borderTopRightRadius="10px"
+                borderBottomRadius="10px"
+                backgroundColor="#EBEBEB"
+                p={4}
+              >
+                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                  Life seasons open have. Air have of. Lights fill after let third darkness replenish fruitful let. Wherein set image. Creepeth said above gathered bring.
+                </Text>
+              </Box>
+              <HStack ml={1} alignSelf="flex-start">
+                <Text color="#3F3F3F" fontSize="x-small" fontWeight={600}>
+                  Katherine
+                </Text>
+                <Text color="#9E9E9E" fontSize="x-small" fontWeight={500}>
+                  Today, 11:30 PM
+                </Text>
+              </HStack>
+            </VStack>
+          </HStack>
+  
+          {/* {/ Second Chat Bubble /} */}
+          <Flex py={4} flexDirection="row" gap={2} justifyContent="flex-end">
+            <VStack alignItems="flex-start" gap={2}>
+              <Box
+                borderTopLeftRadius="10px"
+                borderBottomRadius="10px"
+                backgroundColor="#F7F5FF"
+                p={4}
+              >
+                <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                  Life seasons open have. Air have of.
+                </Text>
+              </Box>
+              <HStack ml={1} alignSelf="flex-end">
+                <Text color="#3F3F3F" fontSize="x-small" fontWeight={600}>
+                  Katherine
+                </Text>
+                <Text color="#9E9E9E" fontSize="x-small" fontWeight={500}>
+                  Today, 11:30 PM
+                </Text>
+              </HStack>
+            </VStack>
+            <Box
+              bgColor="#FFFF"
+              h="40px"
+              w="40px"
+              borderRadius="50%"
+              boxShadow="0px 4px 20px 0px #00000040"
+              p={1}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+            >
+             <Image
+                borderRadius='full'
+                boxSize='30px'
+                src='https://bit.ly/code-beast'
+                alt='Dan Abramov'
+              />
+            </Box>
+          </Flex>
+        </Box>
+  
+        <Flex
+          p={4}
+          alignItems="flex-start"
+          flexDirection="column"
+          gap={3}
+          bgColor="#FFFFFF"
+          boxShadow="0px 6px 12px 0px #0000001A"
+          h="100%"
+          borderRadius="10px"
+        >
+          <Textarea fontSize="small" placeholder="Write  your response for issue" outline="none" />
+  
+          <HStack w="100%" justifyContent="space-between">
+            <HStack alignItems="center">
+              <Switch w="44px" size="sm" />
+              <Text as="span" color="#5F5F5F" fontSize="small">Private</Text>
+            </HStack>
+            <HStack>
+              <Button
+                as="label"
+                htmlFor="file-upload"
+                leftIcon={<AttachmentIcon />}
+                variant="outline"
+                cursor="pointer"
+                border="1px solid #9E9E9E"
+                bgColor="#FFFFFF"
+                color="#5F5F5F"
+                borderRadius="5px"
+                fontSize="small"
+              >
+                Attach
+                <Input id="file-upload" type="file" display="none" />
+              </Button>
+  
+              <Button fontSize="small" color="#fff" bgColor="#3818D9">
+                Send
+              </Button>
+            </HStack>
+          </HStack>
+        </Flex>
+      </Box>
+    );
+  };
+  
+  export default ViewTicket;
+  

src/Routes/Nav.js

@@ -16,12 +16,12 @@ export const nav = [
     Icon: AiOutlineHome,
   },
   {
-    title: "Analytics",
+    title: "ANALYTICS",
     type: "title",
   },
   {
     title: "Manage Human Resource",
-    Icon: FaRegAddressCard,
+    Icon: TbAlignBoxBottomCenter,
     path: "/home",
     submenu: [
       {
@@ -123,7 +123,7 @@ export const nav = [
     type: "accordion",
   },
   {
-    title: "Shop",
+    title: "SHOP",
     type: "title",
   },
   {
@@ -138,6 +138,18 @@ export const nav = [
     path: "/support-ticket",
     Icon: MdOutlineNotifications,
   },
+  {
+    title: "Notification",
+    type: "single",
+    path: "/notification",
+    Icon: TbAlignBoxBottomCenter,
+  },
+  {
+    title: "Settings",
+    type: "single",
+    path: "/setting",
+    Icon: IoSettingsOutline,
+  },
   // {
   //   title: "Settings",
   //   type: "title",

src/Routes/Routes.js

@@ -38,8 +38,19 @@ import BrandVoucherTable from "../Pages/OptiFiiGifsAndVouchers/BrandVoucherTable
 import PaymentaVoucher from "../Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher";
 import Profile from "../Pages/Profile/Profile";
 import WalletsPullBackFunds from "../Pages/ManageHumanResource/WalletsPullBackFunds";
+import ViewReports from "../Pages/Report/ViewReports";
 import ApplyForGiftCard from "../Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard";
 import ApplyForDigitalCard from "../Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard";
+import BenifitOverView from "../Pages/OptiFiiTaxBenefit/BeinifitOverView";
+import ViewTicket from "../Pages/SupportAndTicket/ViewTicket";
+import Notification from "../Pages/Notification/Notification";
+import WalletRequest from "../Pages/OptiFiiExpense/WalletRequest"
+import OnboardingDirectorDetails from "../Pages/Onboarding/OnboardingDirectorDetails";
+import BenifitOverViewView from "../Pages/OptiFiiTaxBenefit/BenefitOverviewView";
+import BenefitViewFood from "../Pages/OptiFiiTaxBenefit/BenefitViewFood"
+import ExpenseOverView from "../Pages/Expenses/ExpenseOverView"
+import ExpenseView from "../Pages/Expenses/ExpenseView"
+
 export const RouteLink = [
   { path: "/", Component: Dashbaord },
   { path: "/expenses", Component: Expenses },
@@ -52,6 +63,14 @@ export const RouteLink = [
   { path: "/reimbursement-request", Component: ReimbursementRequest },
   { path: "/reimbursement-request-view", Component: ReimbursementRequestView },
   { path: "/advance-expense-request", Component: AdvanceExpenseRequest },
+  {path :"/OnboardingDirectorDetails"  , Component : OnboardingDirectorDetails },
+  
+
+  // Notification 
+
+  { path: "/notification", Component: Notification },
+
+
   {
     path: "/advance-expense-request-view",
     Component: AdvanceExpenseRequestView,
@@ -60,6 +79,7 @@ export const RouteLink = [
   { path: "/optiFii-benefit", Component: OptiFiiExpenseDashboard },
   { path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },
   { path: "/reports", Component: Report },
+  { path: "/reports/view-report", Component: ViewReports },
   { path: "/support-ticket", Component: SupportAndTicket },
   { path: "/settings", Component: Settings },
   { path: "/department", Component: Department },
@@ -99,13 +119,33 @@ export const RouteLink = [
     path: "/employees/view/wallet-pull-back-funds",
     Component: WalletsPullBackFunds,
   },
-
+  {
+    path: "/dashboard/beinefit-overview",
+    Component: BenifitOverView,
+  },
+  {
+    path:"/dashboard/beinefit-overview/benefit-request/beinefit-overview-view",
+    Component :BenifitOverViewView
+  },
   {
     path: "/gift-card/digital-application-status",
     Component: DigitalApplicationStatus,
   },
+  {
+    path: "/dashboard/expense-over-View",
+    Component : ExpenseOverView
+  },
+  {
+    path:"/dashboard/expense-over-View/expense-view",
+    Component : ExpenseView
+  },
+  {
+    path: "/dashboard/beinefit-overview/benefit-request",
+    Component: BenefitViewFood
+  },
   { path: "/wallet-program/create-wallet", Component: CreateWallet },
-  { path: "/dashboard/apply-for-giftcards", Component: ApplyForGiftCard },
+  { path: "/optifii-gifts-dashboard/apply-for-giftcards", Component: ApplyForGiftCard },
+  {path :"dashboard/wallet-request",Component : WalletRequest},
   {
     path: "/dashboard/apply-for-giftcards/apply-for-digitalcard",
     Component: ApplyForDigitalCard,
@@ -125,4 +165,5 @@ export const RouteLink = [
   // =======================[ Gift Voucher ]==============
 
   { path: "/profile", Component: Profile },
+  { path: "/support-ticket/view-ticket", Component: ViewTicket },
 ];