diff --git a/src/Pages/OptiFiiExpense/WalletProgram.jsx b/src/Pages/OptiFiiExpense/WalletProgram.jsx index 2fc0a9d..161d836 100644 --- a/src/Pages/OptiFiiExpense/WalletProgram.jsx +++ b/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: ( - // - - {item?.id} - - // - ), - "Wallet Name": ( - - {item.walletName[0]?.icon} - - {/* */} - {item?.walletName[0]?.name} - - ), - "Wallet type": item?.WalletType, - Department: item?.mobileNumber, - Grade: item?.Grade, - Department: item?.department, - Role: item?.Role, - Status: ( - - {item?.status} - - ), - "Wallet amount": item?.WalletAmount, - "Created on": item?.CreatedOn, - "Created by": item?.CreatedBy, - })); + const extractedArray = useMemo(() => { + return walletProgram.map((item) => ({ + ID: {item?.id}, + "Wallet Name": ( + + {item.walletName[0]?.icon} + {item?.walletName[0]?.name} + + ), + "Wallet type": item?.WalletType, + Department: item?.department, + Status: ( + + {item?.status} + + ), + "Wallet amount": item?.WalletAmount, + "Created on": item?.CreatedOn, + "Created by": item?.CreatedBy, + })); + }, [walletProgram]); + return ( diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard.jsx new file mode 100644 index 0000000..d366c2f --- /dev/null +++ b/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 ( + + + setStep(Number(val))} + > + + {steps.map((item, index) => ( + + + {/* {index + 1} */} + + + STEP {index + 1} + + + {item.label} + + + {index + 1 === step ? "In Progress" : "Pending"} + + + ))} + + + {steps[currentStep].label} + + + + + + + ); +}; + +export default ApplyForDigitalCard; diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForGiftCard.jsx new file mode 100644 index 0000000..6eb8c2e --- /dev/null +++ b/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: , 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 ( + + + setStep(Number(val))} + > + + {steps.map((item, index) => ( + + + {/* {index + 1} */} + + + STEP {index + 1} + + + {item.label} + + + {index + 1 === step ? "In Progress" : "Pending"} + + + ))} + + + + {/* Stepper Content */} + + {steps[currentStep].component} + + + {/* Navigation Buttons */} + + + + + + + ); +}; + +export default Stepper; diff --git a/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/SelectCard.jsx new file mode 100644 index 0000000..57782f7 --- /dev/null +++ b/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 ( + + + Select card type + + + + {cards.map((card, index) => ( + + + + + + + {card.title} + + + {card.subtitle} + + + {card.description} + + + {card.image && ( + + )} + + {card.img && ( + + )} + + + ))} + + + ); +}; + +export default SelectCard; diff --git a/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx b/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx index 82c68b0..48ce785 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx +++ b/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": ( // - { 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} > {item?.laodStatus} ), - "Total employees": ( + "Total employees": ( { 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} > {item?.laodStatus} ), - "Total employees": ( + "Total employees": ( { ), - "Vouchers": ( + Vouchers: ( +4 new - + View ), - "Valuation": ( - - ₹ 20,000 - - ), - "Type": ( - - Admin - - ), - "Style": ( - - Admin - - ), - "Status": ( + Valuation: ₹ 20,000, + Type: Admin, + Style: Admin, + Status: ( { 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" } > - - {item?.status || "N/A"} - + {item?.status || "N/A"} ), })); - - return ( - {/* Gift Card */} @@ -746,33 +768,35 @@ const GiftDashboard = () => { > - - - - Apply for gift card - - - + + + + Apply for gift card + + + + + - { > - - + Apply for brand voucher @@ -823,7 +844,8 @@ const GiftDashboard = () => { - { > - + Apply for GPR card @@ -873,7 +893,8 @@ const GiftDashboard = () => { - { {/*Application status */} - - {/* table 1 */} - + - - Application status + + Application status @@ -955,8 +982,7 @@ const GiftDashboard = () => { - - + { fontWeight={500} _selected={{ color: "#5E0FCD", - }}> + }} + > Digital card { fontWeight={500} _selected={{ color: "#5E0FCD", - }}> + }} + > Physical card { fontWeight={500} _selected={{ color: "#5E0FCD", - }}> + }} + > Insta card { fontWeight={500} _selected={{ color: "#5E0FCD", - }}> + }} + > GPR card - - + @@ -1041,24 +1075,14 @@ const GiftDashboard = () => { {/* box 2 */} - + - Card distributions + + Card distributions + - - + { - + - - Gift Cards + + + Gift Cards + - 20% + + 20% + - + - - Gift Voucher + + + Gift Voucher + - 50% + + 50% + - + - - GPR Cards + + + GPR Cards + - 30% + + 30% + - - {/* last table */} - + My vouchers @@ -1196,10 +1242,8 @@ const GiftDashboard = () => { isLoading={isLoading} /> - + ); +}; - ) -} - -export default GiftDashboard \ No newline at end of file +export default GiftDashboard; diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index efe5f52..546fe2d 100644 --- a/src/Routes/Routes.js +++ b/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 }, ]; diff --git a/src/assets/cardFooter.png b/src/assets/cardFooter.png new file mode 100644 index 0000000..c55f590 Binary files /dev/null and b/src/assets/cardFooter.png differ diff --git a/src/assets/cardFooter2.png b/src/assets/cardFooter2.png new file mode 100644 index 0000000..3984d56 Binary files /dev/null and b/src/assets/cardFooter2.png differ diff --git a/src/assets/cardFooter3.png b/src/assets/cardFooter3.png new file mode 100644 index 0000000..c45395f Binary files /dev/null and b/src/assets/cardFooter3.png differ diff --git a/src/assets/mobileCard.png b/src/assets/mobileCard.png new file mode 100644 index 0000000..540ee83 Binary files /dev/null and b/src/assets/mobileCard.png differ