Merge branch 'corpstatic' of http://git.wdipl.com/Siddhesh.More/optifii-corporate into corpstatic

src/Contexts/GlobalStateProvider.jsx

@@ -2149,6 +2149,7 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
+
   return (
     <GlobalStateContext.Provider
       value={{

src/Pages/OptiFiiGifsAndVouchers/BrandVoucherTable.jsx

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

src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx

@@ -72,7 +72,7 @@ const BuyVoucher = () => {
 
   const handleProceed = () => {
     if (selectedCard !== null) {
-      navigate("/brand-voucher/preview"); // Proceed with the selected card
+      navigate("/brand-voucher/buy-voucher-card/preview"); // Proceed with the selected card
     }
   };
 

src/Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher.jsx

@@ -0,0 +1,136 @@
+import { Box, HStack, Image, Text, VStack } from "@chakra-ui/react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+} from "@chakra-ui/react";
+import React from "react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import Amazonlogo from "../../../assets/amazon.png";
+
+const PaymentVoucher = () => {
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <Text color="#111729" fontWeight={600}>
+        Payment
+      </Text>
+      <HStack>
+        <Accordion w="100%" allowToggle>
+          <AccordionItem border="none" w="100%">
+            <h2>
+              <AccordionButton w="100%">
+                <Box as="span" flex="1" textAlign="left">
+                  Show Order Summary
+                </Box>
+                <AccordionIcon />
+              </AccordionButton>
+            </h2>
+            <AccordionPanel w="100%">
+              <Box>
+                <HStack
+                  bgColor={"#F8FAFC"}
+                  w="100%"
+                  position="relative"
+                  alignItems="center"
+                  border=" 1px solid #E3E8EF"
+                >
+                  <HStack
+                    bgColor={"#FFFFFF05"}
+                    justifyContent="space-between"
+                    w="30%"
+                    p={3}
+                  >
+                    <Box
+                      bgColor="#FFFFFF"
+                      boxShadow="0px 2px 4px rgba(17, 27, 35, 0.1)"
+                      borderRadius="8px"
+                      p={2}
+                    >
+                      <Image src={Amazonlogo} h="44px" />
+                    </Box>
+                    <Box
+                      h="16px"
+                      w="16px"
+                      borderRadius="50%"
+                      position="absolute"
+                      bgColor="#FFFFFF"
+                      bottom="4.1rem"
+                      left="3.5rem"
+                      border="1px solid #E3E8EF"
+                      boxShadow="0px 2px 4px rgba(175, 187, 195, 0.2)"
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                      fontSize="small"
+                      fontWeight={600}
+                    >
+                      3
+                    </Box>
+                  </HStack>
+
+                  <VStack alignItems="flex-start" w="40%">
+                    <Text color="#111729" fontWeight={600} fontSize="small">
+                      Amazon voucher
+                    </Text>
+                    <HStack alignItems="flex-start">
+                      <Text color="#111729" fontWeight={400} fontSize="small">
+                        Validity:
+                      </Text>
+                      <Text color="#111729" fontWeight={600} fontSize="small">
+                        20 June
+                      </Text>
+                    </HStack>
+                  </VStack>
+
+                  <Text fontSize="small" fontWeight={600} color="#111729">
+                    ₹ 25000
+                  </Text>
+                </HStack>
+                <Box w="100%" mt={6} borderBottom="1px solid #E3E8EF" />
+
+                <HStack w="100%" mt={2} justifyContent="space-between">
+                  <Text fontSize="small" fontWeight={600} color="#111729">
+                    Total
+                  </Text>
+                  <Text fontSize="small" fontWeight={600} color="#111729">
+                    ₹ 50000
+                  </Text>
+                </HStack>
+
+                <Text color="#000000" fontSize={"medium"} fontWeight={600}>
+                  Make the payment on the below bank account details:
+                </Text>
+                <VStack
+                  alignItems="flex-start"
+                  w="100%"
+                >
+                <HStack w="100%" justifyContent="space-between" >
+                    <Text color="#677489" fontWeight={600} fontSize="small">Name at the bank</Text>
+                    <Text color="#111729" fontWeight={600} fontSize="small">Reethik thota</Text>
+                </HStack>
+                <HStack w="100%" justifyContent="space-between" >
+                    <Text color="#677489" fontWeight={600} fontSize="small">Account number</Text>
+                    <Text color="#111729" fontWeight={600} fontSize="small">458754215787441</Text>
+                </HStack>
+                <HStack w="100%" justifyContent="space-between" >
+                    <Text color="#677489" fontWeight={600} fontSize="small">Bank name</Text>
+                    <Text color="#111729" fontWeight={600} fontSize="small">Bank of India</Text>
+                </HStack>
+                <HStack w="100%" justifyContent="space-between" >
+                    <Text color="#677489" fontWeight={600} fontSize="small">IFSC code</Text>
+                    <Text color="#111729" fontWeight={600} fontSize="small">Reethik thota</Text>
+                </HStack>
+
+                </VStack>
+              </Box>
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      </HStack>
+    </Box>
+  );
+};
+
+export default PaymentVoucher;

src/Pages/OptiFiiGifsAndVouchers/Preview.jsx

@@ -23,6 +23,7 @@ import {
 } from "react-icons/fa";
 import AllTemp from "./Tabs/AllTemp";
 import amazon from "../../assets/amazonlogoF.png";
+import { Link } from "react-router-dom";
 
 const Preview = () => {
   const [selectedCard, setSelectedCard] = useState(null);
@@ -95,9 +96,28 @@ const Preview = () => {
           </TabList>
           <Box w="100%" border="0.5px solid #6311CB5E" mt="2" />
           {/* Mapping through tabData to create tab panels */}
-          <TabPanels >
+          <TabPanels>
             {tabData.map((tab, index) => (
-              <TabPanel h={"450px"} overflowY="scroll" key={index}>
+              <TabPanel
+                sx={{
+                  "&::-webkit-scrollbar": {
+                    width: "8px",
+                  },
+                  "&::-webkit-scrollbar-track": {
+                    background: "#6311CB1A",
+                  },
+                  "&::-webkit-scrollbar-thumb": {
+                    background: "#6311CB",
+                    borderRadius: "8px",
+                  },
+                  "&::-webkit-scrollbar-thumb:hover": {
+                    background: "#555",
+                  },
+                }}
+                h={"450px"}
+                overflowY="scroll"
+                key={index}
+              >
                 <p>{tab.content}</p>
               </TabPanel>
             ))}
@@ -115,13 +135,32 @@ const Preview = () => {
         borderColor="gray.200"
         borderRadius="md"
         p={4}
+        sx={{
+          "&::-webkit-scrollbar": {
+            width: "8px",
+          },
+          "&::-webkit-scrollbar-track": {
+            background: "#6311CB1A",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            background: "#6311CB",
+            borderRadius: "8px",
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            background: "#555",
+          },
+        }}
       >
         <Text fontWeight="bold" fontSize="medium">
           Preview:
         </Text>
         {selectedCard ? (
           <>
-            <Image h="201px" src={selectedCard.image} alt={selectedCard.title} />
+            <Image
+              h="201px"
+              src={selectedCard.image}
+              alt={selectedCard.title}
+            />
 
             <Box
               display="flex"
@@ -171,10 +210,18 @@ const Preview = () => {
                   </Box>
                 </Box>
               </Box>
-              <Button fontSize="small" bgColor="#6311CB" color="#fff" p={4} w="301px">
-                {" "}
-                Proceed to add
-              </Button>
+              <Link to="/brand-voucher/buy-voucher-card/preview/Apply-For-GiftCard">
+                <Button
+                  fontSize="small"
+                  bgColor="#6311CB"
+                  color="#fff"
+                  p={4}
+                  w="301px"
+                >
+                  {" "}
+                  Proceed to add
+                </Button>
+              </Link>
             </Box>
             {/* <Text fontWeight="bold" mt={2}>
                 {selectedCard.title}

src/Pages/OptiFiiGifsAndVouchers/SelectDepartment.jsx

@@ -0,0 +1,376 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  HStack,
+  Icon,
+  IconButton,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Radio,
+  Tag,
+  TagLabel,
+  Text,
+  useDisclosure,
+  VStack,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md";
+import { FaRegUser } from "react-icons/fa";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { Link, useNavigate } from "react-router-dom";
+import backFund from "../../assets/backfund.svg";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import SecondaryButton from "../../Components/Buttons/SecondaryButton";
+import { LuEye, LuListFilter } from "react-icons/lu";
+import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+import { HiOutlineUserGroup } from "react-icons/hi";
+import blackmen from "../../assets/blackmen.png";
+import koreanpfp from "../../assets/koreanboi.png";
+import asian from "../../assets/asain.png";
+import goth from "../../assets/goth.png";
+import womenpfp from "../../assets/womenpfp1.png";
+
+const Employees = () => {
+  const { employees } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [users, setusers] = useState(50);
+  const navigate = useNavigate();
+  const btnRef = useRef();
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = ["Sr No", "Department", "Employees"];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = employees.map((item, index) => ({
+    "Sr No": (
+      <Checkbox colorScheme="purple" value="1">
+        <Text as={"span"} fontSize={"xs"}>
+          {item?.id}
+        </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,
+    "Mobile number": item?.mobileNumber,
+    Grade: item?.Grade,
+    Department: item?.Department,
+    Designation: item?.Role,
+    Employees: (
+      <>
+        <Box
+          position="relative"
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+        >
+          <Image src={womenpfp} h={"30px"} position="absolute" />
+          <Image src={blackmen} h={"30px"} position="absolute" left="1.4rem" />
+          <Image src={koreanpfp} h={"30px"} position="absolute" left="2.7rem" />
+          <Image src={asian} h={"30px"} position="absolute" left="3.9rem" />
+          <Image src={goth} h={"30px"} position="absolute" left="4.9rem" />
+          <Box
+            display="flex"
+            position="absolute"
+            alignItems="center"
+            flexDirection="column"
+            borderRadius="50%"
+            h={"30px"}
+            w="30px"
+            bgColor="#F9F5FF"
+            left="5.9rem"
+            boxShadow="md"
+            justifyContent={"center"}
+          >
+            <Text color="#7F56D9" fontSize="xs" mb={0}>
+              +{users}
+            </Text>
+          </Box>
+        </Box>
+      </>
+    ),
+    Action: (
+      <Box>
+        <Menu>
+          <MenuButton
+            as={IconButton}
+            aria-label="Options"
+            icon={<BsThreeDotsVertical />}
+            bg={"transparent"}
+          />
+          <MenuList>
+            <MenuItem
+              icon={<MdOutlineModeEdit color="#6311CB" size={16} />}
+              fontSize={"sm"}
+              fontWeight={500}
+              color={"#4D4D4D"}
+            >
+              Edit
+            </MenuItem>
+            <MenuItem
+              icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}
+              fontSize={"sm"}
+              fontWeight={500}
+              color={"#4D4D4D"}
+            >
+              Delete
+            </MenuItem>
+            <MenuItem
+              icon={<LuEye color="#6311CB" size={16} />}
+              fontSize={"sm"}
+              fontWeight={500}
+              color={"#4D4D4D"}
+              onClick={() => navigate("/employees/view")}
+            >
+              View
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </Box>
+    ),
+  }));
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <Box
+        rounded={"xl"}
+        py={3}
+        // pb={0}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <Box
+            display={"flex"}
+            //   justifyContent={"space-between"}
+            alignItems={"flex-end"}
+            w={"100%"}
+          >
+            <Box>
+              <Menu>
+                <MenuList>
+                  <MenuItem
+                    icon={<FaRegUser size={14} />}
+                    fontSize={"xs"}
+                    fontWeight={500}
+                    color={"#4D4D4D"}
+                  >
+                    Add single employee
+                  </MenuItem>
+                  <MenuItem
+                    icon={<HiOutlineUserGroup size={14} />}
+                    fontSize={"xs"}
+                    fontWeight={500}
+                    color={"#4D4D4D"}
+                  >
+                    Add multiple employee
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+          </Box>
+          <Divider />
+          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+            <Box>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<BsFilterRight fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Sort
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+            <HStack>
+              <InputGroup width={300} size="sm">
+                <InputLeftElement pointerEvents="none">
+                  <SearchIcon color="gray.300" />
+                </InputLeftElement>
+                <Input
+                  type="search"
+                  placeholder="Type to search..."
+                  rounded="md"
+                  focusBorderColor="#3725EA"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </InputGroup>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<LuListFilter fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Filter
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </HStack>
+          </HStack>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+        <Button
+          ref={btnRef}
+          onClick={onOpen}
+          bgColor="#6311CB"
+          color="white"
+          _hover={{ bgColor: "#6311CB" }}
+        >
+          Open Bottom Drawer
+        </Button>
+
+        <Drawer
+          isOpen={isOpen}
+          placement="bottom"
+          onClose={onClose}
+          finalFocusRef={btnRef}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerBody>
+              <Box
+                display="flex"
+                flexDirection="row"
+                bgColor="#FFFFFF"
+                w="100%"
+                alignItems="center"
+                justifyContent="space-between"
+                mt={4}
+              >
+                <Box
+                  display="flex"
+                  flexDirection="column"
+                  alignItems="flex-start"
+                >
+                  <Text color="#0F0F0F" fontWeight={600}>
+                    Summary of order
+                  </Text>
+
+                  <Box
+                    display="flex"
+                    flexDirection="row"
+                    alignItems="center"
+                    mt={2}
+                  >
+                    <Image src={womenpfp} h="30px" />
+                    <Image src={blackmen} h="30px" ml="-10px" />
+                    <Image src={koreanpfp} h="30px" ml="-10px" />
+                    <Image src={asian} h="30px" ml="-10px" />
+                    <Image src={goth} h="30px" ml="-10px" />
+
+                    {/* +200 circle */}
+                    <Box
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                      borderRadius="50%"
+                      h="30px"
+                      w="30px"
+                      bgColor="#F9F5FF"
+                      boxShadow="md"
+                      ml={"-10px"}
+                    >
+                      <Text color="#7F56D9" fontSize="xs">
+                        +200
+                      </Text>
+                    </Box>
+                  </Box>
+                </Box>
+                <Box
+                  display="flex"
+                  flexDirection="row"
+                  alignItems="flex-start"
+                  gap={4}
+                >
+                  <Text>₹ 10,000</Text>
+                  <Link to="/brand-voucher/voucher-payment">
+                    <Button
+                      bgColor="#6311CB"
+                      color="white"
+                      _hover={{ bgColor: "#6311CB" }}
+                      p={4}
+                      w={"123px"}
+                    >
+                      Proceed
+                    </Button>
+                  </Link>
+                </Box>
+              </Box>
+            </DrawerBody>
+            <DrawerFooter>
+              {/* <Button variant="outline" mr={3} onClick={onClose}>
+                Close
+              </Button> */}
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      </Box>
+    </Box>
+  );
+};
+
+export default Employees;

src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx

@@ -0,0 +1,230 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  HStack,
+  IconButton,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Tag,
+  TagLabel,
+  Text,
+  useDisclosure,
+  VStack,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+} from "@chakra-ui/react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import { MdOutlineDeleteOutline, MdOutlineModeEdit } from "react-icons/md";
+import { FaRegUser } from "react-icons/fa";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router-dom";
+import SecondaryButton from "../../Components/Buttons/SecondaryButton";
+import { LuEye, LuListFilter } from "react-icons/lu";
+import { BsFilterRight, BsThreeDotsVertical } from "react-icons/bs";
+import womenpfp from "../../assets/womenpfp1.png";
+import blackmen from "../../assets/blackmen.png";
+import koreanpfp from "../../assets/koreanboi.png";
+import asian from "../../assets/asain.png";
+import goth from "../../assets/goth.png";
+import Payment from "./Payment/PaymentaVoucher"
+const Employees = () => {
+  const { employees } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = useRef();
+  const {
+    isOpen: isModalOpen,
+    onOpen: onModalOpen,
+    onClose: onModalClose,
+  } = useDisclosure();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const tableHeadRow = ["Emp ID", "Name", "Email Address", "Department", "Designation"];
+
+  const extractedArray = employees.map((item) => ({
+    "Emp ID": (
+      <Checkbox colorScheme="purple" value="1">
+        <Text as={"span"} fontSize={"xs"}>
+          {item?.EmpID}
+        </Text>
+      </Checkbox>
+    ),
+    Name: (
+      <HStack>
+        <Image borderRadius="full" boxSize="40px" src="https://bit.ly/dan-abramov" alt="Dan Abramov" />
+        <Text mb={0}>{item?.Name}</Text>
+      </HStack>
+    ),
+    "Email Address": item?.emailAddress,
+    Department: item?.Department,
+    Designation: item?.Role,
+    Status: (
+      <Tag
+        my={1}
+        size={"sm"}
+        borderRadius="full"
+        colorScheme={item?.status === "Active" ? "green" : item?.status === "Inactive" ? "red" : "gray"}
+        border={`1px solid ${item?.status === "Active" ? "green" : item?.status === "Inactive" ? "red" : "gray"}`}
+        p={1}
+        px={3}
+      >
+        <TagLabel>{item?.status}</TagLabel>
+      </Tag>
+    ),
+    Action: (
+      <Box>
+        <Menu>
+          <MenuButton as={IconButton} aria-label="Options" icon={<BsThreeDotsVertical />} bg={"transparent"} />
+          <MenuList>
+            <MenuItem icon={<MdOutlineModeEdit color="#6311CB" size={16} />}>Edit</MenuItem>
+            <MenuItem icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}>Delete</MenuItem>
+            <MenuItem icon={<LuEye color="#6311CB" size={16} />} onClick={() => navigate("/employees/view")}>
+              View
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </Box>
+    ),
+  }));
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <Box rounded={"xl"} py={3} display={"flex"} flexDirection={"column"} bg={"#fff"} shadow={"md"} minH={"100%"}>
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+            <Box>
+              <Menu>
+                <MenuButton as={Button} leftIcon={<BsFilterRight fontSize={"16px"} />} rightIcon={<ChevronDownIcon />}>
+                  Sort
+                </MenuButton>
+                <MenuList>
+                  <MenuItem>Ascending</MenuItem>
+                  <MenuItem>Descending</MenuItem>
+                  <MenuItem>Recently Viewed</MenuItem>
+                  <MenuItem>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+            <HStack>
+              <InputGroup width={300} size="sm">
+                <InputLeftElement pointerEvents="none">
+                  <SearchIcon color="gray.300" />
+                </InputLeftElement>
+                <Input
+                  type="search"
+                  placeholder="Type to search..."
+                  rounded="md"
+                  focusBorderColor="#3725EA"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </InputGroup>
+              <Menu>
+                <MenuButton as={Button} leftIcon={<LuListFilter fontSize={"16px"} />} rightIcon={<ChevronDownIcon />}>
+                  Filter
+                </MenuButton>
+                <MenuList>
+                  <MenuItem>Ascending</MenuItem>
+                  <MenuItem>Descending</MenuItem>
+                  <MenuItem>Recently Viewed</MenuItem>
+                  <MenuItem>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </HStack>
+          </HStack>
+        </VStack>
+        <NormalTable emptyMessage={`We don't have any Employees`} tableHeadRow={tableHeadRow} data={extractedArray} isLoading={isLoading} />
+
+        <Button ref={btnRef} onClick={onOpen} bgColor="#6311CB" color="white" _hover={{ bgColor: "#6311CB" }}>
+          Open Bottom Drawer
+        </Button>
+        <Drawer isOpen={isOpen} placement="bottom" onClose={onClose} finalFocusRef={btnRef}>
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerBody>
+              <Box display="flex" flexDirection="row" w="100%" alignItems="center" justifyContent="space-between" mt={4}>
+                <Box>
+                  <Text fontWeight={600}>Summary of order</Text>
+                  <Box display="flex" alignItems="center" mt={2}>
+                    <Image src={womenpfp} h="30px" />
+                    <Image src={blackmen} h="30px" ml="-10px" />
+                    <Image src={koreanpfp} h="30px" ml="-10px" />
+                    <Image src={asian} h="30px" ml="-10px" />
+                    <Image src={goth} h="30px" ml="-10px" />
+                    <Box
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                      borderRadius="50%"
+                      h="30px"
+                      w="30px"
+                      bgColor="#F9F5FF"
+                      ml={"-10px"}
+                    >
+                      <Text color="#7F56D9" fontSize="xs">
+                        +200
+                      </Text>
+                    </Box>
+                  </Box>
+                </Box>
+                <Box display="flex" flexDirection="row" alignItems="center" gap={4}>
+                  <Text>₹ 10,000</Text>
+                  <Button bgColor="#6311CB" color="white" onClick={onModalOpen}>
+                    Proceed
+                  </Button>
+                </Box>
+              </Box>
+            </DrawerBody>
+            <DrawerFooter></DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+
+        <Modal isOpen={isModalOpen} onClose={onModalClose}>
+          <ModalOverlay />
+          <ModalContent>
+            <Payment/>
+              <Button variant="ghost" onClick={onModalClose}>
+                Cancel
+              </Button>
+          </ModalContent>
+        </Modal>
+      </Box>
+    </Box>
+  );
+};
+
+export default Employees;

src/Routes/Routes.js

@@ -34,6 +34,9 @@ import BrandVoucher from "../Pages/OptiFiiGifsAndVouchers/BrandVoucher";
 import BuyVoucher from "../Pages/OptiFiiGifsAndVouchers/BuyVoucher";
 import BuySingleVouchers from "../Pages/OptiFiiGifsAndVouchers/BuySingleVouchers";
 import Preview from "../Pages/OptiFiiGifsAndVouchers/Preview";
+import BrandVoucherTable from "../Pages/OptiFiiGifsAndVouchers/BrandVoucherTable";
+import PaymentaVoucher from "../Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher";
+
 export const RouteLink = [
   { path: "/", Component: Dashbaord },
   { path: "/expenses", Component: Expenses },
@@ -60,15 +63,22 @@ export const RouteLink = [
   { path: "/optiFii-expense-dashboard", Component: OptiFiiExpenseDashboard },
   { path: "/gift-card", Component: GiftCard },
   { path: "/gift-card/application-status", Component: ApplicationStatus },
-  { path: "/gift-card/digital-application-status", Component: DigitalApplicationStatus },
-  {path:"/wallet-program/create-wallet" , Component : CreateWallet},
+  {
+    path: "/gift-card/digital-application-status",
+    Component: DigitalApplicationStatus,
+  },
+  { path: "/wallet-program/create-wallet", Component: CreateWallet },
   { path: "/employees/pull-back-funds", Component: EmployeesPullBackFunds },
   { path: "/employees/view", Component: EmployeesView },
-  { path: "/employees/view/recent-reports", Component: EmployeesViewRecentReports },
+  {
+    path: "/employees/view/recent-reports",
+    Component: EmployeesViewRecentReports,
+  },
   // { path: "/employees/view/recent-reports/view", Component: EmployeesViewRecentReportsView },
-  { path: "/employees/view/recent-transaction", Component: EmployeesViewRecentTransaction },
-
-
+  {
+    path: "/employees/view/recent-transaction",
+    Component: EmployeesViewRecentTransaction,
+  },
 
   {
     path: "/gift-card/digital-application-status",
@@ -81,5 +91,10 @@ export const RouteLink = [
   { path: "/brand-voucher", Component: BrandVoucher },
   { path: "/brand-voucher/buy-voucher", Component: BuyVoucher },
   { path: "/brand-voucher/buy-voucher-card", Component: BuySingleVouchers },
-  { path: "/brand-voucher/preview", Component: Preview },
+  { path: "/brand-voucher/buy-voucher-card/preview", Component: Preview },
+  {
+    path: "/brand-voucher/buy-voucher-card/preview/Apply-For-GiftCard",
+    Component: BrandVoucherTable,
+  },
+  { path: "/brand-voucher/voucher-payment", Component: PaymentaVoucher },
 ];