digitable pending

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx

@@ -7,15 +7,16 @@ 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 WhereToShare from "./WhereToShare";
+import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton";
 
-
+const Stepper = () => {
+  const [step, setStep] = useState(1);
 
   const handleNext = () => {
     if (step < steps.length) {
@@ -29,79 +30,100 @@ import WhereToShare from "./WhereToShare";
     }
   };
 
-  const Stepper = () => {
-    const [step, setStep] = useState(1);
-    const steps = [
-      { component: <SelectCard handleNext={handleNext}/>, description: "In Progress" },
-      {
-        component: <WhereToShare handleNext={handleNext} />,
-  
-        label: "Where to share?",
-        description: "Pending",
-      },
-      {
-        component: <DigiTable handleNext={handleNext} />,
-        label: "Select employee",
-        description: "Pending",
-      },
-    ];
+  const steps = [
+    {
+      component: <SelectCard handleNext={handleNext} />,
+      label: "Select card type",
+      description: "In Progress",
+    },
+    {
+      component: <WhereToShare handleNext={handleNext} />,
+      label: "Where to share?",
+      description: "Pending",
+    },
+    {
+      component: <DigiTable handleNext={handleNext} />,
+      label: "Select employee",
+      description: "Pending",
+    },
+  ];
 
   const currentStep = step - 1;
-  const 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"
+      <Box>
+        <Box bgColor="#fff" maxW="100%" rounded={"md"} p={4} mb={4}>
+          <RadioGroup
+            value={String(step)}
+            onChange={(val) => setStep(Number(val))}
           >
-            Previous
-          </Button>
-          {/* <Button
-            onClick={handleNext}
-            disabled={isLastStep}
-            colorScheme="purple"
-          >
-            Next
-          </Button> */}
-        </Flex>
+            <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" : "#666666"}
+                    >
+                      {index + 1 === step ? "In Progress" : "Pending"}
+                    </Text>
+                  </VStack>
+
+                  {/* Add the line between steps with conditional color */}
+                  {index < steps.length - 1 && (
+                    <Box
+                      flex="1"
+                      height="1px"
+                      mb={"60px"}
+                      position="relative"
+                      top="50%"
+                      // Color the line based on whether the step is active or completed
+                      bgColor={index + 1 <= step ? "#3725EA" : "#e2e2e2"}
+                    />
+                  )}
+                </React.Fragment>
+              ))}
+            </Flex>
+          </RadioGroup>
+        </Box>
+
+        <Box bgColor="#fff" maxW="100%" rounded={"md"} p={4}>
+
+          <Text color="#000000" fontWeight={600} fontSize="small">
+            {steps[currentStep].label} 
+          </Text>
+          {/* Stepper Content */}
+          <Box>{steps[currentStep].component}</Box>
+
+          <Box mt={8}>
+            <PrimaryButton
+              title={" Save & Proceed"}
+              onClick={handleNext}
+              isDisabled={step === steps.length}
+            />
+          </Box>
+        </Box>
       </Box>
     </Box>
   );

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigiTable.jsx

@@ -1,69 +1,67 @@
 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 "./DigitalTable";
-  
-  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,
+  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 "./DigitalTable";
+
+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
-        bgColor="#F3F3F9"
-        h="100%"
-        {...OPACITY_ON_LOAD}
+        display="flex"
+        w="100%"
+        flexDirection="column"
+        bgColor="#FFFFFF"
         p={4}
-        overflowX="scroll"
+        alignItems="start"
+        rounded={"md"}
       >
-        <Box
-          display="flex"
-          w="100%"
-          flexDirection="column"
-          bgColor="#FFFFFF"
-          p={4}
-          alignItems="start"
-          rounded={"md"}
-        >
-          <Text fontSize="medium" fontWeight={600}>
-            Select employee
-          </Text>
-          <FileUploader />
-        </Box>
-  
+        <Text fontSize="sm" fontWeight={600}>
+          Import employee
+        </Text>
+        <FileUploader />
+      </Box>
+      <Box bg={"#F4F4F4"} p={2}>
         <Text
           align="center"
           mt="1rem"
@@ -77,12 +75,13 @@ import {
           </span>{" "}
           to quickly start your import
         </Text>
-        <Box>
-          <DigiTable />
-        </Box>
       </Box>
-    );
-  };
-  
-  export default BrandVoucherTable;
-  
+
+      <Box>
+        <DigiTable />
+      </Box>
+    </Box>
+  );
+};
+
+export default BrandVoucherTable;

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/DigitalTable.jsx

@@ -173,7 +173,7 @@ import {
     }));
   
     return (
-      <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <Box {...OPACITY_ON_LOAD}  overflowX={"scroll"}>
         <Box
           rounded={"xl"}
           py={3}
@@ -183,79 +183,6 @@ import {
           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}

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx

@@ -1,10 +1,12 @@
-import { Box, Button, Image, Text, VStack } from "@chakra-ui/react";
-import React, { useEffect, useRef } from "react";
+import { Box, Button, Icon, Image, Text, VStack } from "@chakra-ui/react";
+import React, { useEffect, useRef, useState } from "react";
 import VanillaTilt from "vanilla-tilt"; // Ensure this is imported
 import mobilepng from "../../../assets/mobileCard.png";
 import cardfooter from "../../../assets/cardFooter.png";
 import cardfooter2 from "../../../assets/cardFooter2.png";
 import cardfooter3 from "../../../assets/cardFooter3.png";
+import { CheckIcon } from "@chakra-ui/icons";
+import { IoMdCheckmark } from "react-icons/io";
 
 const cards = [
   {
@@ -64,13 +66,18 @@ const SelectCard = ({ handleNext }) => {
     };
   }, [tiltRefs]);
 
-  return (
-    <Box p={4}>
-      <Text color="#000000" fontWeight={600} fontSize="small">
-        Select card type
-      </Text>
+  // For check select 
 
-      <Box display="flex" justifyContent="center" gap={4}>
+  const [isSelected, setIsSelected] = useState(false);
+
+  const handleClick = () => {
+    setIsSelected((prevState) => !prevState);
+  };
+
+
+  return (
+    <Box >
+      <Box display="flex" justifyContent={"start"} alignItems={"start"} gap={6}>
         {cards.map((card, index) => (
           <Box
             key={index}
@@ -88,30 +95,39 @@ const SelectCard = ({ handleNext }) => {
             <VStack
               h="373px"
               alignItems="flex-start"
-              spacing={4}
+              spacing={0}
               position="relative"
             >
               <Button
-                onClick={handleNext}
-                p={4}
-                bgColor="transparent"
+                h={8}
+                px={6}
+                bgColor={isSelected ? "#fff" : "transparent"} // Change background color when selected
+                color={isSelected ? "purple.500" : "#fff"} // Change text color when selected
                 border="1px solid #fff"
-                color="#fff"
                 fontSize="small"
+                fontWeight={500}
                 _hover={{ bgColor: "transparent", color: "white" }}
+                onClick={handleClick}
               >
-                Select
+                {isSelected ? (
+                  <>
+                    <Icon as={IoMdCheckmark} mr={2} /> {/* Check icon when selected */}
+                    Selected
+                  </>
+                ) : (
+                  "Select"
+                )}
               </Button>
 
-              <Text as="span" fontSize="large">
+              <Text as="span" fontSize="lg" fontWeight={400} mb={0} mt={4}>
                 {card.title}
               </Text>
 
-              <Text as="span" fontSize="large">
+              <Text as="span" fontSize="lg" fontWeight={500} mb={2}>
                 {card.subtitle}
               </Text>
 
-              <Text as="span" fontSize="small" textAlign="start">
+              <Text as="span" fontSize="xs" textAlign="start">
                 {card.description}
               </Text>
 

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SingleAddress.jsx

@@ -1,4 +1,4 @@
-import { Box, FormControl, FormLabel, Input, Text } from "@chakra-ui/react";
+import { Box, FormControl, FormLabel, Input, Select, Text } from "@chakra-ui/react";
 import { Grid, GridItem } from "@chakra-ui/react";
 import React from "react";
 
@@ -22,19 +22,26 @@ const formsInfos = [
 
 const SingleAddress = () => {
   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}>
           {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">
+                  <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" />
+              )}
             </GridItem>
           ))}
         </Grid>

src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/WhereToShare.jsx

@@ -1,4 +1,4 @@
-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";
 
@@ -25,10 +25,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 +37,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/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";
@@ -781,6 +781,7 @@ const GiftDashboard = () => {
                   Apply for gift card
                 </Text>
 
+              </NavLink>
                 <Box
                   bg="#8241d5"
                   w="6"
@@ -792,7 +793,6 @@ const GiftDashboard = () => {
                 >
                   <ArrowForwardIcon boxSize={5} color="white" />
                 </Box>
-              </NavLink>
             </Flex>
             <Box position={"absolute"} right={-2}>
               <Image