diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 8c24fae..0d5245e 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -2149,6 +2149,7 @@ const GlobalStateProvider = ({ children }) => { }, ]); + return ( { + const [selectedValue, setSelectedValue] = useState("1"); + const { isOpen, onOpen, onClose } = useDisclosure(); + const btnRef = useRef(); + + const renderContent = () => { + switch (selectedValue) { + case "1": + return ; + case "2": + return ; + default: + return null; + } + }; + + return ( + + + + Select employee + + + + + + Download a{" "} + + sample spreadsheet + {" "} + to quickly start your import + + + + + + + Select employee + + + Select department + + + + + {renderContent()} + + + ); +}; + +export default BrandVoucherTable; diff --git a/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx b/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx index 4305d69..7e1ed56 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx +++ b/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 } }; diff --git a/src/Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher.jsx b/src/Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher.jsx new file mode 100644 index 0000000..985be56 --- /dev/null +++ b/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 ( + + + Payment + + + + +

+ + + Show Order Summary + + + +

+ + + + + + + + + 3 + + + + + + Amazon voucher + + + + Validity: + + + 20 June + + + + + + ₹ 25000 + + + + + + + Total + + + ₹ 50000 + + + + + Make the payment on the below bank account details: + + + + Name at the bank + Reethik thota + + + Account number + 458754215787441 + + + Bank name + Bank of India + + + IFSC code + Reethik thota + + + + + + + + + + ); +}; + +export default PaymentVoucher; diff --git a/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx b/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx index cbb1261..c2983b5 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx +++ b/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 = () => { {/* Mapping through tabData to create tab panels */} - + {tabData.map((tab, index) => ( - +

{tab.content}

 ))} @@ -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", + }, + }} > Preview: {selectedCard ? ( <> - {selectedCard.title} + {selectedCard.title} { - + + + {/* {selectedCard.title} diff --git a/src/Pages/OptiFiiGifsAndVouchers/SelectDepartment.jsx b/src/Pages/OptiFiiGifsAndVouchers/SelectDepartment.jsx new file mode 100644 index 0000000..e67fb75 --- /dev/null +++ b/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": ( + + + {item?.id} + + + ), + Name: ( + + Dan Abramov + {item?.Name} + + ), + "Email Address": item?.emailAddress, + "Mobile number": item?.mobileNumber, + Grade: item?.Grade, + Department: item?.Department, + Designation: item?.Role, + Employees: ( + <> + + + + + + + + + +{users} + + + + + ), + Action: ( + + + } + bg={"transparent"} + /> + + } + fontSize={"sm"} + fontWeight={500} + color={"#4D4D4D"} + > + Edit + + } + fontSize={"sm"} + fontWeight={500} + color={"#4D4D4D"} + > + Delete + + } + fontSize={"sm"} + fontWeight={500} + color={"#4D4D4D"} + onClick={() => navigate("/employees/view")} + > + View + + + + + ), + })); + + return ( + + + + + + + + } + fontSize={"xs"} + fontWeight={500} + color={"#4D4D4D"} + > + Add single employee + + } + fontSize={"xs"} + fontWeight={500} + color={"#4D4D4D"} + > + Add multiple employee + + + + + + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + + + + + + + + + Summary of order + + + + + + + + + + {/* +200 circle */} + + + +200 + + + + + + ₹ 10,000 + + + + + + + + {/* */} + + + + + + ); +}; + +export default Employees; diff --git a/src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx b/src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx new file mode 100644 index 0000000..a6668cd --- /dev/null +++ b/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": ( + + + {item?.EmpID} + + + ), + Name: ( + + Dan Abramov + {item?.Name} + + ), + "Email Address": item?.emailAddress, + Department: item?.Department, + Designation: item?.Role, + Status: ( + + {item?.status} + + ), + Action: ( + + + } bg={"transparent"} /> + + }>Edit + }>Delete + } onClick={() => navigate("/employees/view")}> + View + + + + + ), + })); + + return ( + + + + + + + } rightIcon={}> + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + } rightIcon={}> + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + + + + + + + + Summary of order + + + + + + + + + +200 + + + + + + ₹ 10,000 + + + + + + + + + + + + + + + + + + ); +}; + +export default Employees; diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index f816b1a..fb81dfc 100644 --- a/src/Routes/Routes.js +++ b/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 }, ];