DashBoard Gift-Card

src/Pages/OptiFiiExpense/WalletProgram.jsx

@@ -18,7 +18,7 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import NormalTable from "../../Components/DataTable/NormalTable";
@@ -102,66 +102,35 @@ const WalletProgram = () => {
 
   // const extractedArray = reportsHistory.map((item)=>({ }))
   walletProgram.map((item) => console.log(item));
-  const extractedArray = walletProgram.map((item, index) => ({
-    ID: (
-      // <Radio colorScheme="purple" value="1">
-      <Text
-        as={"span"}
-        display={"flex"}
-        gap={2}
-        alignItems={"center"}
-        fontSize={"xs"}
-      >
-        {item?.id}
-      </Text>
-      // </Radio>
-    ),
-    "Wallet Name": (
-      <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
-        <Image
-          h="23px"
-          src={item.walletName[0]?.icon}
-          alt={item.walletName[0]?.icon}
-        />
-
-        {/* <Text fontSize={"xs"}></Text> */}
-        {item?.walletName[0]?.name}
-      </Box>
-    ),
-    "Wallet type": item?.WalletType,
-    Department: item?.mobileNumber,
-    Grade: item?.Grade,
-    Department: item?.department,
-    Role: item?.Role,
-    Status: (
-      <Tag
-        my={1}
-        size={"sm"}
-        borderRadius="full"
-        bgColor={
-          item?.status === "Active"
-            ? "#00A43814"
-            : item?.status === "Inactive"
-            ? "#C33FAD21"
-            : "#E0BC0114"
-        }
-        color={
-          item?.status === "Active"
-            ? "#00A438"
-            : item?.status === "Inactive"
-            ? "#C33FAD"
-            : "#E0BC01"
-        }
-        p={1}
-        px={3}
-      >
-        <TagLabel>{item?.status}</TagLabel>
-      </Tag>
-    ),
-    "Wallet amount": item?.WalletAmount,
-    "Created on": item?.CreatedOn,
-    "Created by": item?.CreatedBy,
-  }));
+  const extractedArray = useMemo(() => {
+    return walletProgram.map((item) => ({
+      ID: <Text fontSize="xs">{item?.id}</Text>,
+      "Wallet Name": (
+        <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
+          <Image h="23px" src={item.walletName[0]?.icon} alt={item.walletName[0]?.icon} />
+          {item?.walletName[0]?.name}
+        </Box>
+      ),
+      "Wallet type": item?.WalletType,
+      Department: item?.department,
+      Status: (
+        <Tag
+          size="sm"
+          borderRadius="full"
+          bgColor={item?.status === "Active" ? "#00A43814" : item?.status === "Inactive" ? "#C33FAD21" : "#E0BC0114"}
+          color={item?.status === "Active" ? "#00A438" : item?.status === "Inactive" ? "#C33FAD" : "#E0BC01"}
+          p={1}
+          px={3}
+        >
+          <TagLabel>{item?.status}</TagLabel>
+        </Tag>
+      ),
+      "Wallet amount": item?.WalletAmount,
+      "Created on": item?.CreatedOn,
+      "Created by": item?.CreatedBy,
+    }));
+  }, [walletProgram]);
+  
 
   return (
     <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx

@@ -0,0 +1,78 @@
+import { Box, Button, Flex, Radio, RadioGroup, Text, useBreakpointValue, VStack } from "@chakra-ui/react";
+import React, { useState } from "react";
+
+const ApplyForDigitalCard = () => {
+  const [step, setStep] = useState(1);
+  const steps = [
+    { label: "Select card type", description: "Pending" },
+    { label: "Select employee", description: "Pending" },
+  ];
+
+  const handleNext = () => {
+    if (step < steps.length) {
+      setStep(step + 1);
+    }
+  };
+
+  const handlePrev = () => {
+    if (step > 1) {
+      setStep(step - 1);
+    }
+  };
+  const currentStep = step - 1;
+  const isLastStep = step === steps.length;
+  const isFirstStep = step === 1;
+  const circleSize = useBreakpointValue({ base: "30px", md: "40px" });
+  return (
+    <Box p={4}>
+      <Box>
+        <RadioGroup
+          value={String(step)}
+          onChange={(val) => setStep(Number(val))}
+        >
+          <Flex p={4} justifyContent="space-between" alignItems="center">
+            {steps.map((item, index) => (
+              <VStack key={index} spacing={2}>
+                <Radio value={String(index + 1)} colorScheme="purple" size="lg">
+                  {/* {index + 1} */}
+                </Radio>
+                <Text fontSize="small" color="#9C9C9C" fontWeight={400}>
+                  STEP {index + 1}
+                </Text>
+                <Text color="#000000" fontWeight={600} fontSize="small">
+                  {item.label}
+                </Text>
+                <Text
+                  fontSize="sm"
+                  color={index + 1 === step ? "blue.500" : "gray.500"}
+                >
+                  {index + 1 === step ? "In Progress" : "Pending"}
+                </Text>
+              </VStack>
+            ))}
+          </Flex>
+        </RadioGroup>
+        <Box mt={4}>{steps[currentStep].label}</Box>
+        <Flex justifyContent="space-between" mt={8}>
+          <Button
+            onClick={handlePrev}
+            disabled={isFirstStep}
+            colorScheme="purple"
+            variant="outline"
+          >
+            Previous
+          </Button>
+          <Button
+            onClick={handleNext}
+            disabled={isLastStep}
+            colorScheme="purple"
+          >
+            Next
+          </Button>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};
+
+export default ApplyForDigitalCard;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx

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

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx

@@ -0,0 +1,113 @@
+import { Box, Button, Image, Text, VStack } from "@chakra-ui/react";
+import React from "react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+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 { NavLink } from "react-router-dom";
+
+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 = () => {
+  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}
+            bgGradient="linear-gradient(180deg, #6311CB 0%, #1F1584 100%)"
+            color="white"
+            borderRadius="lg"
+            overflow="hidden"
+            width="300px"
+            padding={6}
+            textAlign="center"
+            boxShadow="lg"
+          >
+            <VStack
+              h="373px"
+              alignItems="flex-start"
+              spacing={4}
+              position="relative"
+            >
+              <NavLink to={card.link}>
+                <Button
+                  p={4}
+                  bgColor="transparent"
+                  border="1px solid #ffff"
+                  color="#fff"
+                  fontSize="small"
+                  _hover={{ bgColor: "transparent", color: "white" }}
+                >
+                  Select
+                </Button>
+              </NavLink>
+              <Text as="span" fontSize="large">
+                {card.title}
+              </Text>
+              <Text as="span" fontSize="large">
+                {card.subtitle}
+              </Text>
+              <Text as="span" fontSize="small" textAlign="start">
+                {card.description}
+              </Text>
+
+              {card.image && (
+                <Image
+                  src={card.image}
+                  h="190px"
+                  objectFit="cover"
+                  position="absolute"
+                  bottom="-1.5rem"
+                  right="-1.5rem"
+                />
+              )}
+
+              {card.img && (
+                <Image
+                  src={card.img}
+                  h="111px"
+                  objectFit="cover"
+                  position="absolute"
+                  bottom="-1.5rem"
+                  left="-1.5rem"
+                />
+              )}
+            </VStack>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default SelectCard;

src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx

@@ -1,41 +1,65 @@
-import { Box, Button, Checkbox, Flex, Heading, Image, Input, InputGroup, InputLeftElement, Menu, MenuButton, MenuItem, MenuList, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs, Tag, TagLabel } from '@chakra-ui/react'
-import React, { useContext, useEffect, useState } from 'react'
-import { OPACITY_ON_LOAD } from '../../Layout/animations'
-import { HStack, Text, VStack } from '@chakra-ui/react';
-import { BsArrowsAngleExpand, BsFilterRight } from 'react-icons/bs';
-import GlobalStateContext from '../../Contexts/GlobalStateContext';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Flex,
+  Heading,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Tab,
+  TabIndicator,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Tag,
+  TagLabel,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { HStack, Text, VStack } from "@chakra-ui/react";
+import { BsArrowsAngleExpand, BsFilterRight } from "react-icons/bs";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import koreanpfp from "../../assets/koreanboi.png";
 import asian from "../../assets/asain.png";
 import womenpfp from "../../assets/womenpfp1.png";
-import NormalTable from '../../Components/DataTable/NormalTable';
-import { AiOutlineCalendar } from 'react-icons/ai';
-import { IoMdArrowDropdown } from 'react-icons/io';
-import { LuListFilter } from 'react-icons/lu';
-import { ArrowForwardIcon, ChevronDownIcon, SearchIcon } from '@chakra-ui/icons';
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { AiOutlineCalendar } from "react-icons/ai";
+import { IoMdArrowDropdown } from "react-icons/io";
+import { LuListFilter } from "react-icons/lu";
+import {
+  ArrowForwardIcon,
+  ChevronDownIcon,
+  SearchIcon,
+} from "@chakra-ui/icons";
 import info from "../../assets/info.png";
 import redinfo from "../../assets/redinfo.png";
-import { NavLink } from 'react-router-dom';
-import { CiCalendar } from 'react-icons/ci';
-import ReactApexChart from 'react-apexcharts';
-import { GoDotFill } from 'react-icons/go';
-import GC from '../../assets/GC.svg'
-import GPR from '../../assets/GPR.svg'
-import BV from '../../assets/BV.svg'
+import { NavLink } from "react-router-dom";
+import { CiCalendar } from "react-icons/ci";
+import ReactApexChart from "react-apexcharts";
+import { GoDotFill } from "react-icons/go";
+import GC from "../../assets/GC.svg";
+import GPR from "../../assets/GPR.svg";
+import BV from "../../assets/BV.svg";
 
 const GiftDashboard = () => {
-
   const { digital } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
   const [users, setusers] = useState(50);
   const [searchTerm, setSearchTerm] = useState("");
 
-
   const [chartData, setChartData] = useState({
     series: [78, 68, 87], // Ensure these are numeric values, not strings
     options: {
       chart: {
         height: 390,
-        type: 'radialBar',
+        type: "radialBar",
       },
       plotOptions: {
         radialBar: {
@@ -44,14 +68,14 @@ const GiftDashboard = () => {
           endAngle: 270,
           hollow: {
             margin: 5,
-            size: '50%',
-            background: 'transparent',
+            size: "50%",
+            background: "transparent",
             image: undefined,
           },
           track: {
             show: true,
-            background: '#f2f2f2', // Light background for the track
-            strokeWidth: '80%', // Thinner track for the bars
+            background: "#f2f2f2", // Light background for the track
+            strokeWidth: "80%", // Thinner track for the bars
           },
           dataLabels: {
             name: {
@@ -65,15 +89,20 @@ const GiftDashboard = () => {
             enabled: true,
             useSeriesColors: true,
             offsetX: -8,
-            fontSize: '12px',
+            fontSize: "12px",
             formatter: function (seriesName, opts) {
-              return seriesName + ': ' + opts.w.globals.series[opts.seriesIndex] + '%';
+              return (
+                seriesName +
+                ": " +
+                opts.w.globals.series[opts.seriesIndex] +
+                "%"
+              );
             },
           },
         },
       },
-      colors: ['#C33FAD', '#3725EA', '#6311CB'],
-      labels: ['540', '300', '230'],
+      colors: ["#C33FAD", "#3725EA", "#6311CB"],
+      labels: ["540", "300", "230"],
       responsive: [
         {
           breakpoint: 480,
@@ -100,8 +129,6 @@ const GiftDashboard = () => {
     return () => clearTimeout(timer);
   }, []); // Empty dependency array means this effect runs once after the component mounts
 
-
-
   // ===============================[ Table Header ]
   const tableHeadRow = [
     "Order ID",
@@ -132,7 +159,7 @@ const GiftDashboard = () => {
     "Activation Status",
   ];
 
-  // Voucher tab 
+  // Voucher tab
 
   const voucherTableHeadRow = [
     "Sr. no",
@@ -183,15 +210,16 @@ const GiftDashboard = () => {
           item?.laodStatus === "Fully Loaded"
             ? "#027A48"
             : item?.laodStatus === "Inactive"
-              ? "red"
-              : "gray"
+            ? "red"
+            : "gray"
         }
-        border={`0px solid ${item?.laodStatus === "Fully Loaded"
-          ? "green"
-          : item?.status === "Inactive"
+        border={`0px solid ${
+          item?.laodStatus === "Fully Loaded"
+            ? "green"
+            : item?.status === "Inactive"
             ? "red"
             : "gray" // default border color if status doesn't match any condition
-          }`}
+        }`}
         p={1}
         px={3}
       >
@@ -349,7 +377,6 @@ const GiftDashboard = () => {
     "Sr. no": (
       // <Radio colorScheme="purple" value="1">
       <Checkbox colorScheme="purple">
-
         <Text
           as={"span"}
           display={"flex"}
@@ -389,22 +416,23 @@ const GiftDashboard = () => {
           item?.laodStatus === "Fully Loaded"
             ? "#027A48"
             : item?.laodStatus === "Inactive"
-              ? "red"
-              : "gray"
+            ? "red"
+            : "gray"
         }
-        border={`0px solid ${item?.laodStatus === "Fully Loaded"
-          ? "green"
-          : item?.status === "Inactive"
+        border={`0px solid ${
+          item?.laodStatus === "Fully Loaded"
+            ? "green"
+            : item?.status === "Inactive"
             ? "red"
             : "gray" // default border color if status doesn't match any condition
-          }`}
+        }`}
         p={1}
         px={3}
       >
         <TagLabel>{item?.laodStatus}</TagLabel>
       </Tag>
     ),
-   "Total employees": (
+    "Total employees": (
       <Box
         position="relative"
         display="flex"
@@ -540,22 +568,23 @@ const GiftDashboard = () => {
           item?.laodStatus === "Fully Loaded"
             ? "#027A48"
             : item?.laodStatus === "Inactive"
-              ? "red"
-              : "gray"
+            ? "red"
+            : "gray"
         }
-        border={`0px solid ${item?.laodStatus === "Fully Loaded"
-          ? "green"
-          : item?.status === "Inactive"
+        border={`0px solid ${
+          item?.laodStatus === "Fully Loaded"
+            ? "green"
+            : item?.status === "Inactive"
             ? "red"
             : "gray" // default border color if status doesn't match any condition
-          }`}
+        }`}
         p={1}
         px={3}
       >
         <TagLabel>{item?.laodStatus}</TagLabel>
       </Tag>
     ),
-   "Total employees": (
+    "Total employees": (
       <Box
         position="relative"
         display="flex"
@@ -663,32 +692,29 @@ const GiftDashboard = () => {
       </Checkbox>
     ),
 
-    "Vouchers": (
+    Vouchers: (
       <HStack>
         <Text key={`balance-${index}`} mb={0} fontSize="xs" color={"#007E23"}>
           +4 new
         </Text>
-        <Text mb={0} size="xs" bg="#6311CB" rounded="md" py={1.5} px={4} fontWeight={400} color="#fff">
+        <Text
+          mb={0}
+          size="xs"
+          bg="#6311CB"
+          rounded="md"
+          py={1.5}
+          px={4}
+          fontWeight={400}
+          color="#fff"
+        >
           View
         </Text>
       </HStack>
     ),
-    "Valuation": (
-      <Text mb={0}>
-        ₹ 20,000
-      </Text>
-    ),
-    "Type": (
-      <Text mb={0}>
-        Admin
-      </Text>
-    ),
-    "Style": (
-      <Text mb={0}>
-        Admin
-      </Text>
-    ),
-    "Status": (
+    Valuation: <Text mb={0}>₹ 20,000</Text>,
+    Type: <Text mb={0}>Admin</Text>,
+    Style: <Text mb={0}>Admin</Text>,
+    Status: (
       <Tag
         size={"sm"}
         py={1.5}
@@ -698,35 +724,31 @@ const GiftDashboard = () => {
           item?.status === "Distributed"
             ? "#00A438"
             : item?.status === "Pending"
-              ? "#EAB600"
-              : "red"
-        }
-        border={`1px solid ${item?.status === "Distributed"
-          ? "#00A438"
-          : item?.status === "Pending"
             ? "#EAB600"
             : "red"
-          }`}
+        }
+        border={`1px solid ${
+          item?.status === "Distributed"
+            ? "#00A438"
+            : item?.status === "Pending"
+            ? "#EAB600"
+            : "red"
+        }`}
         bg={
           item?.status === "Distributed"
             ? "#ebf8ef"
             : item?.status === "Pending"
-              ? "#fdf9eb"
-              : "#ffe5e5"
+            ? "#fdf9eb"
+            : "#ffe5e5"
         }
       >
-          <Text mb={0}>
-            {item?.status || "N/A"}
-          </Text>
+        <Text mb={0}>{item?.status || "N/A"}</Text>
       </Tag>
     ),
   }));
 
-
-
   return (
     <Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
-
       <Box>
         <HStack align="center" wrap="wrap" gap={4} mb={6}>
           {/* Gift Card */}
@@ -746,33 +768,35 @@ const GiftDashboard = () => {
           >
             <Flex alignItems="center" gap={4}>
               <Box
-                bgGradient={"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"}
+                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>
-              <Box
-                bg="#8241d5"
-                w="6"
-                h="6"
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-                rounded="full"
-              >
-                <ArrowForwardIcon boxSize={5} color="white" />
+                <Image src={GC} w={10} h={6}></Image>
               </Box>
+              <NavLink style={{display:"flex" , flexDirection:"row" , alignItems:"center"}} to="/dashboard/apply-for-giftcards">
+                <Text fontWeight="500" fontSize="sm" mb={0}>
+                  Apply for gift card
+                </Text>
 
+                <Box
+                  bg="#8241d5"
+                  w="6"
+                  h="6"
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  rounded="full"
+                >
+                  <ArrowForwardIcon boxSize={5} color="white" />
+                </Box>
+              </NavLink>
             </Flex>
             <Box position={"absolute"} right={-2}>
-              <Image src={GC}
+              <Image
+                src={GC}
                 w={16}
                 mixBlendMode={"screen"}
                 opacity={0.7}
@@ -796,16 +820,13 @@ const GiftDashboard = () => {
           >
             <Flex alignItems="center" gap={4}>
               <Box
-                bgGradient={"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"}
+                bgGradient={
+                  "linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
+                }
                 p={2}
                 rounded={"md"}
               >
-                <Image
-                  src={BV}
-                  w={10}
-                  h={6}
-                ></Image>
-
+                <Image src={BV} w={10} h={6}></Image>
               </Box>
               <Text fontWeight="500" fontSize="sm" mb={0}>
                 Apply for brand voucher
@@ -823,7 +844,8 @@ const GiftDashboard = () => {
               </Box>
             </Flex>
             <Box position={"absolute"} right={-2}>
-              <Image src={BV}
+              <Image
+                src={BV}
                 w={16}
                 mixBlendMode={"screen"}
                 opacity={0.7}
@@ -847,15 +869,13 @@ const GiftDashboard = () => {
           >
             <Flex alignItems="center" gap={4}>
               <Box
-                bgGradient={"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"}
+                bgGradient={
+                  "linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"
+                }
                 p={2}
                 rounded={"md"}
               >
-                <Image
-                  src={GPR}
-                  w={10}
-                  h={6}
-                ></Image>
+                <Image src={GPR} w={10} h={6}></Image>
               </Box>
               <Text fontWeight="500" fontSize="sm" mb={0}>
                 Apply for GPR card
@@ -873,7 +893,8 @@ const GiftDashboard = () => {
               </Box>
             </Flex>
             <Box position={"absolute"} right={-2}>
-              <Image src={GPR}
+              <Image
+                src={GPR}
                 w={16}
                 mixBlendMode={"screen"}
                 opacity={0.7}
@@ -886,14 +907,20 @@ const GiftDashboard = () => {
       {/*Application status */}
 
       <HStack alignItems={"start"} spacing={6}>
-
-
         <Box flex={1} w={700}>
           {/* table 1 */}
-          <Box bg={"#fff"} shadow={"md"} rounded={"md"} p={4} mb={4}  h={507} overflowY={"auto"}>
+          <Box
+            bg={"#fff"}
+            shadow={"md"}
+            rounded={"md"}
+            p={4}
+            mb={4}
+            h={507}
+            overflowY={"auto"}
+          >
             <HStack justifyContent={"space-between"} mb={2}>
-              <Heading fontSize={"md"} fontWeight={500} mb={0} >
-                Application status 
+              <Heading fontSize={"md"} fontWeight={500} mb={0}>
+                Application status
               </Heading>
               <HStack>
                 <Menu>
@@ -955,8 +982,7 @@ const GiftDashboard = () => {
               </HStack>
             </HStack>
 
-            <Tabs position='relative' variant='unstyled'>
-
+            <Tabs position="relative" variant="unstyled">
               <Box borderBottom={"1px solid #D4D4D4"}>
                 <TabList>
                   <Tab
@@ -965,7 +991,8 @@ const GiftDashboard = () => {
                     fontWeight={500}
                     _selected={{
                       color: "#5E0FCD",
-                    }}>
+                    }}
+                  >
                     Digital card
                   </Tab>
                   <Tab
@@ -974,7 +1001,8 @@ const GiftDashboard = () => {
                     fontWeight={500}
                     _selected={{
                       color: "#5E0FCD",
-                    }}>
+                    }}
+                  >
                     Physical card
                   </Tab>
                   <Tab
@@ -983,7 +1011,8 @@ const GiftDashboard = () => {
                     fontWeight={500}
                     _selected={{
                       color: "#5E0FCD",
-                    }}>
+                    }}
+                  >
                     Insta card
                   </Tab>
                   <Tab
@@ -992,13 +1021,18 @@ const GiftDashboard = () => {
                     fontWeight={500}
                     _selected={{
                       color: "#5E0FCD",
-                    }}>
+                    }}
+                  >
                     GPR card
                   </Tab>
                 </TabList>
 
-                <TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
-
+                <TabIndicator
+                  mt="-1.5px"
+                  height="2px"
+                  bg="#5E0FCD"
+                  borderRadius="1px"
+                />
               </Box>
 
               <TabPanels>
@@ -1041,24 +1075,14 @@ const GiftDashboard = () => {
 
         {/* box 2 */}
 
-        <Box
-          rounded={"md"}
-          boxShadow="md"
-          p={4}
-          bg="white"
-          w={350}
-        >
+        <Box rounded={"md"} boxShadow="md" p={4} bg="white" w={350}>
           <HStack justifyContent={"space-between"} mb={4}>
             <Box>
-              <Text fontSize={"sm"} fontWeight={500} mb={0}>Card distributions</Text>
+              <Text fontSize={"sm"} fontWeight={500} mb={0}>
+                Card distributions
+              </Text>
             </Box>
-            <Box
-              fontSize={"xs"}
-              bg={"#F2EEF8"}
-              p={2}
-              rounded={"md"}
-            >
-
+            <Box fontSize={"xs"} bg={"#F2EEF8"} p={2} rounded={"md"}>
               <Text
                 as={"span"}
                 display={"flex"}
@@ -1087,46 +1111,68 @@ const GiftDashboard = () => {
             </Box>
           </Flex>
           <Box>
-            <HStack justifyContent={"space-between"} borderBottom={"1px solid #f2f2f2"} pb={4}>
+            <HStack
+              justifyContent={"space-between"}
+              borderBottom={"1px solid #f2f2f2"}
+              pb={4}
+            >
               <HStack spacing={2}>
-                <GoDotFill color='#C33FAD' />
-                <Text fontSize={"sm"} fontWeight={500} mb={0}>Gift Cards</Text>
+                <GoDotFill color="#C33FAD" />
+                <Text fontSize={"sm"} fontWeight={500} mb={0}>
+                  Gift Cards
+                </Text>
               </HStack>
               <Box>
-                <Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>20%</Text>
+                <Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>
+                  20%
+                </Text>
               </Box>
             </HStack>
 
-            <HStack justifyContent={"space-between"} borderBottom={"1px solid #f2f2f2"} py={4}>
+            <HStack
+              justifyContent={"space-between"}
+              borderBottom={"1px solid #f2f2f2"}
+              py={4}
+            >
               <HStack spacing={2}>
-                <GoDotFill color='#3725EA' />
-                <Text fontSize={"sm"} fontWeight={500} mb={0}>Gift Voucher</Text>
+                <GoDotFill color="#3725EA" />
+                <Text fontSize={"sm"} fontWeight={500} mb={0}>
+                  Gift Voucher
+                </Text>
               </HStack>
               <Box>
-                <Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>50%</Text>
+                <Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>
+                  50%
+                </Text>
               </Box>
             </HStack>
 
-            <HStack justifyContent={"space-between"} borderBottom={"1px solid #f2f2f2"} py={4}>
+            <HStack
+              justifyContent={"space-between"}
+              borderBottom={"1px solid #f2f2f2"}
+              py={4}
+            >
               <HStack spacing={2}>
-                <GoDotFill color='#6311CB' />
-                <Text fontSize={"sm"} fontWeight={500} mb={0}>GPR Cards</Text>
+                <GoDotFill color="#6311CB" />
+                <Text fontSize={"sm"} fontWeight={500} mb={0}>
+                  GPR Cards
+                </Text>
               </HStack>
               <Box>
-                <Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>30%</Text>
+                <Text fontSize={"sm"} fontWeight={500} mb={0} color={"#4B5359"}>
+                  30%
+                </Text>
               </Box>
             </HStack>
           </Box>
-
         </Box>
-
       </HStack>
 
       {/* last table  */}
 
       <Box bg={"#fff"} shadow={"md"} py={4} rounded={"md"}>
         <Box px={4} mb={4}>
-          <Heading fontSize={"md"} fontWeight={500} mb={0} >
+          <Heading fontSize={"md"} fontWeight={500} mb={0}>
             My vouchers
           </Heading>
           <HStack mt={4} justifyContent={"space-between"}>
@@ -1196,10 +1242,8 @@ const GiftDashboard = () => {
           isLoading={isLoading}
         />
       </Box>
-
     </Box>
+  );
+};
 
-  )
-}
-
-export default GiftDashboard
+export default GiftDashboard;

src/Routes/Routes.js

@@ -38,6 +38,8 @@ import BrandVoucherTable from "../Pages/OptiFiiGifsAndVouchers/BrandVoucherTable
 import PaymentaVoucher from "../Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher";
 import Profile from "../Pages/Profile/Profile";
 import WalletsPullBackFunds from "../Pages/ManageHumanResource/WalletsPullBackFunds";
+import ApplyForGiftCard from "../Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard";
+import ApplyForDigitalCard from "../Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard";
 export const RouteLink = [
   { path: "/", Component: Dashbaord },
   { path: "/expenses", Component: Expenses },
@@ -81,19 +83,33 @@ export const RouteLink = [
     path: "/employees/view/recent-transaction",
     Component: EmployeesViewRecentTransaction,
   },
-  { path: "/employees/view/recent-reports", Component: EmployeesViewRecentReports },
-  { path: "/employees/view/recent-reports/view", Component: EmployeesViewRecentReportsView },
-  { path: "/employees/view/recent-transaction", Component: EmployeesViewRecentTransaction },
-  { path: "/employees/view/wallet-pull-back-funds", Component: WalletsPullBackFunds },
-
-
+  {
+    path: "/employees/view/recent-reports",
+    Component: EmployeesViewRecentReports,
+  },
+  {
+    path: "/employees/view/recent-reports/view",
+    Component: EmployeesViewRecentReportsView,
+  },
+  {
+    path: "/employees/view/recent-transaction",
+    Component: EmployeesViewRecentTransaction,
+  },
+  {
+    path: "/employees/view/wallet-pull-back-funds",
+    Component: WalletsPullBackFunds,
+  },
 
   {
     path: "/gift-card/digital-application-status",
     Component: DigitalApplicationStatus,
   },
   { path: "/wallet-program/create-wallet", Component: CreateWallet },
-
+  { path: "/dashboard/apply-for-giftcards", Component: ApplyForGiftCard },
+  {
+    path: "/dashboard/apply-for-giftcards/apply-for-digitalcard",
+    Component: ApplyForDigitalCard,
+  },
   // =======================[ Gift Voucher ]==============
   { path: "/optifii-gifts-dashboard", Component: GiftDashboard },
   { path: "/brand-voucher", Component: BrandVoucher },
@@ -106,8 +122,7 @@ export const RouteLink = [
   },
   { path: "/brand-voucher/voucher-payment", Component: PaymentaVoucher },
 
-
   // =======================[ Gift Voucher ]==============
 
-  {path :"/profile" , Component : Profile}
+  { path: "/profile", Component: Profile },
 ];