diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 952316e..82e80bc 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -1482,6 +1482,7 @@ const GlobalStateProvider = ({ children }) => { activationStatus: "Active", CardDeliveryStatus: "Delivered", quantity: "500", + status: "Distributed", }, { id: 2, @@ -1492,6 +1493,7 @@ const GlobalStateProvider = ({ children }) => { activationStatus: "Active", CardDeliveryStatus: "Not Delivered", quantity: "500", + status: "Distributed", }, { id: 3, @@ -1502,16 +1504,7 @@ const GlobalStateProvider = ({ children }) => { activationStatus: "Activate", CardDeliveryStatus: "Delivered", quantity: "500", - }, - { - id: 3, - orderid: "#451245", - laodStatus: "Fully Loaded", - dateTime: "10 June 2024, 10am", - totalvaluation: "₹ 70,000", - activationStatus: "Partially Active", - CardDeliveryStatus: "Partially Delivered", - quantity: "500", + status: "Pending", }, { id: 4, @@ -1519,9 +1512,10 @@ const GlobalStateProvider = ({ children }) => { laodStatus: "Fully Loaded", dateTime: "10 June 2024, 10am", totalvaluation: "₹ 70,000", - activationStatus: "Active", - CardDeliveryStatus: "Not Delivered", + activationStatus: "Partially Active", + CardDeliveryStatus: "Partially Delivered", quantity: "500", + status: "Pending", }, { id: 5, @@ -1529,9 +1523,10 @@ const GlobalStateProvider = ({ children }) => { laodStatus: "Fully Loaded", dateTime: "10 June 2024, 10am", totalvaluation: "₹ 70,000", - activationStatus: "Partially Active", + activationStatus: "Active", CardDeliveryStatus: "Not Delivered", quantity: "500", + status: "Distributed", }, { id: 6, @@ -1539,9 +1534,10 @@ const GlobalStateProvider = ({ children }) => { laodStatus: "Fully Loaded", dateTime: "10 June 2024, 10am", totalvaluation: "₹ 70,000", - activationStatus: "Active", - CardDeliveryStatus: "Delivered", + activationStatus: "Partially Active", + CardDeliveryStatus: "Not Delivered", quantity: "500", + status: "Pending", }, { id: 7, @@ -1549,19 +1545,10 @@ const GlobalStateProvider = ({ children }) => { laodStatus: "Fully Loaded", dateTime: "10 June 2024, 10am", totalvaluation: "₹ 70,000", - activationStatus: "Activate", - CardDeliveryStatus: "Delivered", - quantity: "500", - }, - { - id: 8, - orderid: "#451245", - laodStatus: "Fully Loaded", - dateTime: "10 June 2024, 10am", - totalvaluation: "₹ 70,000", - activationStatus: "Activate", + activationStatus: "Active", CardDeliveryStatus: "Delivered", quantity: "500", + status: "Distributed", }, ]); @@ -2181,32 +2168,33 @@ const GlobalStateProvider = ({ children }) => { }, ]); + // main dash const [dash, setDash] = useState([ { id: 1, wallet: "Employee Wallet", - walletAmount: "₹ 70,000", - balanceRemaining: "₹ 20,000", - status: "Approved", + walletAmount: "₹ 70,000", + balanceRemaining: "₹ 20,000", + status: "Approved", totalEmployees: 500, users: 5, }, { id: 2, wallet: "Travel Wallet", - walletAmount: "₹ 50,000", - balanceRemaining: "₹ 15,000", - status: "Approved", + walletAmount: "₹ 50,000", + balanceRemaining: "₹ 15,000", + status: "Approved", totalEmployees: 200, users: 3, }, { id: 3, wallet: "Food Wallet", - walletAmount: "₹ 100,000", - balanceRemaining: "₹ 80,000", + walletAmount: "₹ 100,000", + balanceRemaining: "₹ 80,000", status: "Pending", totalEmployees: 300, users: 4, diff --git a/src/Pages/Dashboard/Dashbaord.jsx b/src/Pages/Dashboard/Dashbaord.jsx index f6aaf96..eb04751 100644 --- a/src/Pages/Dashboard/Dashbaord.jsx +++ b/src/Pages/Dashboard/Dashbaord.jsx @@ -129,6 +129,14 @@ const Dashbaord = () => { 'Remaining amount', 'Status', + ]; + const dashHeadThirdRow = [ + 'Employee Name', + "Email", + 'Wallet', + 'Amount', + 'Date & time', + ]; // first @@ -177,7 +185,7 @@ const Dashbaord = () => { ), 'Amount in card': ( - ₹ {item.walletAmount || 5000} + {item.walletAmount || 5000} ), 'Pending request': ( @@ -243,7 +251,7 @@ const Dashbaord = () => { ), 'Benefit limit': ( - ₹ {item.walletAmount || 5000} + {item.walletAmount || 5000} ), 'Remaining amount': ( @@ -288,6 +296,50 @@ const Dashbaord = () => { ), })); + // Third + + const dashThirdArr = dash.map((item, index) => ({ + "Employee Name": ( + + Dan Abramov + + + Olivia Rhye + + + WD-887 + + + + ), + + 'Email': ( + + olivia@gmail.com + + ), + 'Wallet': ( + + Food + + ), + 'Amount': ( + + {item.balanceRemaining || '₹ 2000'} + + ), + 'Date & time': ( + + 2 June 2024, 10 am + + ), + })); + return ( @@ -395,21 +447,14 @@ const Dashbaord = () => { OptiFii Gift cards - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut - + /> @@ -469,7 +514,7 @@ const Dashbaord = () => { display={"flex"} alignItems={"center"} bg={"#F2EEF8"} - p={"6px 10px"} + p={"7px 10px"} rounded={"md"} > { display={"flex"} alignItems={"center"} bg={"#F2EEF8"} - p={"6px 10px"} + p={"7px 10px"} rounded={"md"} > { boxShadow="md" p={4} bg="white" - flex={1} + w={350} + minH={395} > @@ -877,7 +923,7 @@ const Dashbaord = () => { {/* table */} - + Employee Transaction @@ -972,8 +1018,8 @@ const Dashbaord = () => { diff --git a/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx index 0ef7482..98c324a 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx @@ -46,16 +46,9 @@ import { MdNotificationsNone, MdOutlineHeadsetMic, } from "react-icons/md"; -import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri"; -import { AiOutlineEdit } from "react-icons/ai"; -import { FaRegEye } from "react-icons/fa"; -import { PiReceipt } from "react-icons/pi"; import { OPACITY_ON_LOAD } from "../../Layout/animations"; import { Link, NavLink } 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 { LuListFilter } from "react-icons/lu"; import { BsFilterRight } from "react-icons/bs"; import pdfIcon from "../../assets/pdfIcon.svg"; diff --git a/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx b/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx index 76d1375..82c68b0 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx @@ -1,11 +1,1204 @@ -import { Box } from '@chakra-ui/react' +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 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' 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', + }, + plotOptions: { + radialBar: { + offsetY: 0, + startAngle: 0, + endAngle: 270, + hollow: { + margin: 5, + size: '50%', + background: 'transparent', + image: undefined, + }, + track: { + show: true, + background: '#f2f2f2', // Light background for the track + strokeWidth: '80%', // Thinner track for the bars + }, + dataLabels: { + name: { + show: false, + }, + value: { + show: false, + }, + }, + barLabels: { + enabled: true, + useSeriesColors: true, + offsetX: -8, + fontSize: '12px', + formatter: function (seriesName, opts) { + return seriesName + ': ' + opts.w.globals.series[opts.seriesIndex] + '%'; + }, + }, + }, + }, + colors: ['#C33FAD', '#3725EA', '#6311CB'], + labels: ['540', '300', '230'], + responsive: [ + { + breakpoint: 480, + options: { + legend: { + show: false, + }, + }, + }, + ], + }, + }); + + useEffect(() => { + // Set isLoading to true + setIsLoading(true); + + // Simulate a 3-second delay + const timer = setTimeout(() => { + setIsLoading(false); // Set isLoading to false after 3 seconds + }, 500); + + // Cleanup the timer when the component unmounts or when the useEffect re-runs + return () => clearTimeout(timer); + }, []); // Empty dependency array means this effect runs once after the component mounts + + + + // ===============================[ Table Header ] + const tableHeadRow = [ + "Order ID", + "Load Status", + "Date & time", + "Total employees", + "Total valuation", + "Activation Status", + ]; + + const physicaltableHeadRow = [ + "Sr. no", + "Vouchers", + "Valuation", + "Type", + "Style", + "Status", + ]; + + const instantTableHeadRow = [ + "Sr. no", + "Order ID", + "Load Status", + "Date & time", + "Quantity", + "Total employees", + "Total valuation", + "Activation Status", + ]; + + // Voucher tab + + const voucherTableHeadRow = [ + "Sr. no", + "Vouchers", + "Valuation", + "Type", + "Style", + "Status", + ]; + + const physicalCardArr = digital.map((item, index) => ({ + "Sr. no": ( + + + {item?.id} + + + ), + "Order ID": ( + + {item?.orderid} + + ), + "Email Address": item?.emailAddress, + "Date & time": item?.dateTime, + "Total valuation": item?.totalvaluation, + Role: item?.Role, + "Load Status": ( + + {item?.laodStatus} + + ), + "Total employees": ( + + + + + + + +{users} + + + + ), + "Activation Status": ( + + {item?.activationStatus === "Active" ? ( + + {item?.activationStatus} + + ) : item?.activationStatus === "Partially Active" ? ( + + {item?.activationStatus} + + + ) : item?.activationStatus === "Activate" ? ( + + + + {" "} + {item?.activationStatus} + + + ) : ( + "" + )} + + ), + "Card delivery status": ( + + {item?.CardDeliveryStatus === "Delivered" ? ( + + {item?.CardDeliveryStatus} + + ) : item?.CardDeliveryStatus === "Partially Delivered" ? ( + + {item?.CardDeliveryStatus} + + + ) : item?.CardDeliveryStatus === "Not Delivered" ? ( + + {item?.CardDeliveryStatus} + + ) : ( + "" + )} + + ), + })); + + const extractedArray = digital.map((item, index) => ({ + "Sr. no": ( + // + + + + {item?.id} + + + ), + "Order ID": ( + + + {item?.orderid} + + + ), + "Email Address": item?.emailAddress, + "Date & time": item?.dateTime, + "Total valuation": item?.totalvaluation, + Role: item?.Role, + "Load Status": ( + + {item?.laodStatus} + + ), + "Total employees": ( + + + + + + + +{users} + + + + ), + "Activation Status": ( + + {item?.activationStatus === "Active" ? ( + + {item?.activationStatus} + + ) : item?.activationStatus === "Partially Active" ? ( + + {item?.activationStatus} + + + ) : item?.activationStatus === "Activate" ? ( + + + + {" "} + {item?.activationStatus} + + + ) : ( + "" + )} + + ), + })); + + const instaCardArr = digital.map((item, index) => ({ + "Sr. no": ( + // + + + {item?.id} + + + ), + "Order ID": ( + + + {item?.orderid} + + + ), + "Email Address": item?.emailAddress, + "Date & time": item?.dateTime, + "Total valuation": item?.totalvaluation, + Quantity: item?.quantity, + Role: item?.Role, + "Load Status": ( + + {item?.laodStatus} + + ), + "Total employees": ( + + + + + + + +{users} + + + + ), + "Activation Status": ( + + {item?.activationStatus === "Active" ? ( + + {item?.activationStatus} + + ) : item?.activationStatus === "Partially Active" ? ( + + {item?.activationStatus} + + + ) : item?.activationStatus === "Activate" ? ( + + + + {" "} + {item?.activationStatus} + + + ) : ( + "" + )} + + ), + })); + + const voucherCardArr = digital.map((item, index) => ({ + "Sr. no": ( + // + + + {item?.id} + + + ), + + "Vouchers": ( + + + +4 new + + + View + + + ), + "Valuation": ( + + ₹ 20,000 + + ), + "Type": ( + + Admin + + ), + "Style": ( + + Admin + + ), + "Status": ( + + + {item?.status || "N/A"} + + + ), + })); + + + return ( - GiftDashboard + + + + {/* Gift Card */} + + + + + + + Apply for gift card + + + + + + + + + + + + {/* Brand Voucher */} + + + + + + + + Apply for brand voucher + + + + + + + + + + + {/* GPR Card */} + + + + + + + Apply for GPR card + + + + + + + + + + + + + {/*Application status */} + + + + + + {/* table 1 */} + + + + Application status + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + Time Period : + + + + Feb 20 - Jan 30, 2024{" "} + + + + + navigate("")} + as={Button} + color={"#6311CB"} + size={18} + cursor={"pointer"} + /> + + + + + + + + + Digital card + + + Physical card + + + Insta card + + + GPR card + + + + + + + + + + + + + + + + + + + + + + + + + + {/* box 2 */} + + + + + Card distributions + + + + + + + Jan, 2024{" "} + + + + + + + {/* chart */} + + + + + + + + + + + Gift Cards + + + 20% + + + + + + + Gift Voucher + + + 50% + + + + + + + GPR Cards + + + 30% + + + + + + + + + {/* last table */} + + + + + My vouchers + + + + + + + + setSearchTerm(e.target.value)} + /> + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + + ) } diff --git a/src/assets/BV.svg b/src/assets/BV.svg new file mode 100644 index 0000000..4a4bc14 --- /dev/null +++ b/src/assets/BV.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/GC.svg b/src/assets/GC.svg new file mode 100644 index 0000000..45e4360 --- /dev/null +++ b/src/assets/GC.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/GPR.svg b/src/assets/GPR.svg new file mode 100644 index 0000000..814b0ee --- /dev/null +++ b/src/assets/GPR.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +