diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index d74ae2f..ee73477 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -9,7 +9,17 @@ import { HiOutlineReceiptPercent } from "react-icons/hi2"; import { IoMdQrScanner } from "react-icons/io"; import { GrDocumentPdf } from "react-icons/gr"; import { AiOutlineFileGif } from "react-icons/ai"; - +import { MdOutlineNoFood } from "react-icons/md"; +import { LuFuel } from "react-icons/lu"; +import { GoGift } from "react-icons/go"; +import { FaWifi } from "react-icons/fa"; +import { SiBookstack } from "react-icons/si"; +import Food from "../assets/icons/Food.png"; +import Fuel from "../assets/icons/Fuel.png"; +import Gift from "../assets/icons/gift.png"; +import books from "../assets/icons/bookStack.png" +import telecom from "../assets/icons/telecom.png" +import gadget from "../assets/icons/gadget.png" const getRandomDate = (start, end) => { const date = new Date( start.getTime() + Math.random() * (end.getTime() - start.getTime()) @@ -1006,6 +1016,101 @@ const GlobalStateProvider = ({ children }) => { }, ]); + const [walletProgram, setWalletProgram] = useState( + [ + { + id: 1, + walletName: [{ name: "Food", icon: Food }], + WalletType : "Prefilled", + department :"sales", + status :"Active", + WalletAmount :"₹ 50,000", + CreatedOn :"Jan 12, 2022", + CreatedBy:"Jenny wilson" + }, + { + id: 2, + walletName: [{ name: "Fuel", icon: Fuel }], + WalletType : "Prefilled", + department :"sales", + status :"Active", + WalletAmount :"₹ 50,000", + CreatedOn :"Jan 12, 2022", + CreatedBy:"Jenny wilson" + }, + { + id: 3, + walletName: [{ name: "Gift", icon: Gift }], + WalletType : "Prefilled", + department :"sales", + status :"Active", + WalletAmount :"₹ 50,000", + CreatedOn :"Jan 12, 2022", + CreatedBy:"Jenny wilson" + }, + { + id: 4, + walletName: [{ name: "Telecom", icon: telecom }], + WalletType : "Prefilled", + department :"sales", + status :"Saved as draft", + WalletAmount :"₹ 50,000", + CreatedOn :"Jan 12, 2022", + CreatedBy:"Jenny wilson" + }, + { + id: 5, + walletName: [{ name: "Books & periodicals", icon: books }], + WalletType : "Prefilled", + department :"sales", + status :"Active", + WalletAmount :"₹ 50,000", + CreatedOn :"Jan 12, 2022", + CreatedBy:"Jenny wilson" + }, + { + id: 6, + walletName: [{ name: "Learning & development", icon: books }], + WalletType : "Prefilled", + department :"sales", + status :"Active", + WalletAmount :"₹ 50,000", + CreatedOn :"Jan 12, 2022", + CreatedBy:"Jenny wilson" + }, + { + id: 7, + walletName: [{ name: "Gadget & equipment", icon: gadget }], + WalletType : "Prefilled", + department :"sales", + status :"Active", + WalletAmount :"₹ 50,000", + CreatedOn :"Jan 12, 2022", + CreatedBy:"Jenny wilson" + }, + { + id: 8, + walletName: [{ name: "Telecom", icon: telecom }], + WalletType : "Prefilled", + department :"sales", + status :"Pending", + WalletAmount :"₹ 50,000", + CreatedOn :"Jan 12, 2022", + CreatedBy:"Jenny wilson" + }, + { + id: 9, + walletName: [{ name: "Food", icon: Food }], + WalletType : "Prefilled", + department :"sales", + status :"Pending", + WalletAmount :"₹ 50,000", + CreatedOn :"Jan 12, 2022", + CreatedBy:"Jenny wilson" + }, + ] +); + return ( { setDigital, ApplicationStatus, setAdvanceStatus, + walletProgram }} > {children} diff --git a/src/Pages/OptiFiiExpense/Grid/ActiveCards.jsx b/src/Pages/OptiFiiExpense/Grid/ActiveCards.jsx new file mode 100644 index 0000000..d233589 --- /dev/null +++ b/src/Pages/OptiFiiExpense/Grid/ActiveCards.jsx @@ -0,0 +1,183 @@ +import { Box, Button, Image, Text } from "@chakra-ui/react"; +import React from "react"; +import Food from "../../../assets/icons/Food.png"; +import Fuel from "../../../assets/icons/Fuel.png"; +import Gift from "../../../assets/icons/gift.png"; +import Telecom from "../../../assets/icons/telecom.png"; +import { SlOptionsVertical } from "react-icons/sl"; + +const data = [ + { + icon: Food, + name: "Food", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "Active", + }, + { + icon: Fuel, + name: "Fuel", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "Active", + }, + { + icon: Gift, + name: "Gift", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "Active", + }, + { + icon: Telecom, + name: "Telecom", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "Active", + }, +]; + +const ActiveCards = () => { + return ( + + {data.map((item) => { + return ( + + + + + {item?.name} + + {item?.subtitle} + + + + + + + + + + + + + Wallet type + + + {item?.walletType} + + + + + + Department + + + {item?.department} + + + + + + Wallet amount + + + {item?.walletamount} + + + + + + + Created by + + + {item?.CreatedBy} + + + + + + Approved by + + + {item?.ApprovedBy} + + + + + + ); + })} + + ); +}; + +export default ActiveCards; diff --git a/src/Pages/OptiFiiExpense/Grid/Decline.jsx b/src/Pages/OptiFiiExpense/Grid/Decline.jsx new file mode 100644 index 0000000..57ffdea --- /dev/null +++ b/src/Pages/OptiFiiExpense/Grid/Decline.jsx @@ -0,0 +1,183 @@ +import { Box, Button, Image, Text } from "@chakra-ui/react"; +import React from "react"; +import Food from "../../../assets/icons/Food.png"; +import Fuel from "../../../assets/icons/Fuel.png"; +import Gift from "../../../assets/icons/gift.png"; +import Telecom from "../../../assets/icons/telecom.png"; +import { SlOptionsVertical } from "react-icons/sl"; + +const data = [ + { + icon: Food, + name: "Food", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "DECLINED", + }, + { + icon: Fuel, + name: "Fuel", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "DECLINED", + }, + { + icon: Gift, + name: "Gift", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "DECLINED", + }, + { + icon: Telecom, + name: "Telecom", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "DECLINED", + }, +]; + +const Decline = () => { + return ( + + {data.map((item) => { + return ( + + + + + {item?.name} + + {item?.subtitle} + + + + + + + + + + + + + Wallet type + + + {item?.walletType} + + + + + + Department + + + {item?.department} + + + + + + Wallet amount + + + {item?.walletamount} + + + + + + + Created by + + + {item?.CreatedBy} + + + + + + Approved by + + + {item?.ApprovedBy} + + + + + + ); + })} + + ); +}; + +export default Decline; diff --git a/src/Pages/OptiFiiExpense/Grid/PendingApproval.jsx b/src/Pages/OptiFiiExpense/Grid/PendingApproval.jsx new file mode 100644 index 0000000..45a49c6 --- /dev/null +++ b/src/Pages/OptiFiiExpense/Grid/PendingApproval.jsx @@ -0,0 +1,185 @@ +import { Box, Button, Image, Text } from "@chakra-ui/react"; +import React from "react"; +import Food from "../../../assets/icons/Food.png"; +import Fuel from "../../../assets/icons/Fuel.png"; +import Gift from "../../../assets/icons/gift.png"; +import Telecom from "../../../assets/icons/telecom.png"; +import { SlOptionsVertical } from "react-icons/sl"; + +const data = [ + { + icon: Food, + name: "Food", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "PENDING FOR APPROVAL", + }, + { + icon: Fuel, + name: "Fuel", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "PENDING FOR APPROVAL", + }, + { + icon: Gift, + name: "Gift", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "PENDING FOR APPROVAL", + }, + { + icon: Telecom, + name: "Telecom", + subtitle: "Created on 12 June 2024", + walletType: "Prefilled", + department: "Sales", + walletamount: "₹ 50,000", + CreatedBy: "Kartikey Gautam", + ApprovedBy: "Manav Sain", + Status: "PENDING FOR APPROVAL", + }, +]; + +const PendingApproval = () => { + return ( + + {data.map((item) => { + return ( + + + + + {item?.name} + + {item?.subtitle} + + + + + + + + + + + + + Wallet type + + + {item?.walletType} + + + + + + Department + + + {item?.department} + + + + + + Wallet amount + + + {item?.walletamount} + + + + + + + Created by + + + {item?.CreatedBy} + + + + + + Approved by + + + {item?.ApprovedBy} + + + + + + ); + })} + + ); +}; + +export default PendingApproval; diff --git a/src/Pages/OptiFiiExpense/WalletProgram.jsx b/src/Pages/OptiFiiExpense/WalletProgram.jsx index 414f0ea..f2f3755 100644 --- a/src/Pages/OptiFiiExpense/WalletProgram.jsx +++ b/src/Pages/OptiFiiExpense/WalletProgram.jsx @@ -1,15 +1,368 @@ -import { Box } from "@chakra-ui/react"; -import React from "react"; +import { + Box, + Button, + Divider, + HStack, + Icon, + Image, + Input, + InputGroup, + InputLeftElement, + Menu, + MenuButton, + MenuItem, + MenuList, + Radio, + Tag, + TagLabel, + Text, + VStack, +} from "@chakra-ui/react"; +import React, { useContext, useEffect, useState } from "react"; import MiniHeader from "../../Components/MiniHeader"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import NormalTable from "../../Components/DataTable/NormalTable"; +import { CiBoxList } from "react-icons/ci"; +import { BsFillGridFill } from "react-icons/bs"; +import { + AddIcon, + CalendarIcon, + ChevronDownIcon, + EmailIcon, + SearchIcon, + ViewIcon, +} from "@chakra-ui/icons"; +import { + MdFilterList, + MdNotificationsNone, + MdOutlineHeadsetMic, +} from "react-icons/md"; +import { MdOutlineUnarchive } 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 } 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"; +import ExcelIcon from "../../assets/ExcelIcon.svg"; +import ActiveCards from "./Grid/ActiveCards"; +import PendingApproval from "./Grid/PendingApproval"; +import Decline from "./Grid/Decline"; +import { + Tabs, + TabList, + Tab, + TabIndicator, + TabPanels, + TabPanel, +} from "@chakra-ui/react"; const WalletProgram = () => { + const { walletProgram } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const [showGrid, setShowGird] = useState(true); + + 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 = [ + "ID", + "Wallet Name", + "Wallet type", + "Department", + "Status", + "Wallet amount", + "Created on", + "Created by", + ]; + + // 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, + })); + return ( - - + + + + + + + + + setSearchTerm(e.target.value)} + /> + + + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + } title={"Create wallet"} /> + + + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + {/* + } + title={"Pull back funds"} + /> + */} + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + + + + + + + {showGrid ? ( + + ) : ( + + + + + Active wallets + + + Pending for approval + + + Declined wallets + + + + + + + + + + + )} + ); }; diff --git a/src/Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus.jsx b/src/Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus.jsx index 6cdc2b8..85e0046 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus.jsx @@ -223,6 +223,7 @@ const Employees = () => { return ( { return ( + + + + #45152487 + + + Order ID + + + + Order accepted + + + {/* Table and other UI components */} { data={extractedArray} isLoading={isLoading} /> + {/* Modal for Activate or Load card based on action */} { px={"8px"} borderRadius="10px" > - $ + ₹