{
setEmployeePermissions,
reimbursementStatus,
setReimbursementStatus,
+ voucher,
advanceStatus,
setAdvanceStatus,
digital,
@@ -1910,7 +2053,9 @@ const GlobalStateProvider = ({ children }) => {
setAdvanceExpenseRequest,
AdvanceExpenseRequestView,
setAdvanceExpenseRequestView,
- walletProgram
+ walletProgram,
+ SupportAndTicket,
+ setSupportAndTicket,
}}
>
{children}
diff --git a/src/Pages/ManageHumanResource/Approvers.jsx b/src/Pages/ManageHumanResource/Approvers.jsx
index 2491bf2..6421477 100644
--- a/src/Pages/ManageHumanResource/Approvers.jsx
+++ b/src/Pages/ManageHumanResource/Approvers.jsx
@@ -1,15 +1,543 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import {
+ Box, Grid, Heading, Menu, MenuButton, MenuItem, MenuList, VStack,
+ Button,
+ Image,
+ Input,
+ InputGroup,
+ InputLeftElement,
+ Text,
+ Tag,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
+import BlueCard from "../../Components/Cards/BlueCard";
+
+import { LuListFilter } from "react-icons/lu";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+import { AiOutlineCalendar } from "react-icons/ai";
+import { IoMdArrowDropdown } from "react-icons/io";
+import { BsArrowsAngleExpand, BsFilterRight } from "react-icons/bs";
+import { ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router-dom";
const Approvers = () => {
+
+ const { reimbursementStatus } = useContext(GlobalStateContext);
+ const { advanceStatus } = useContext(GlobalStateContext);
+ const [isLoading, setIsLoading] = useState(false);
+ const [searchTerm, setSearchTerm] = useState("");
+ const navigate = useNavigate();
+
+ 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 = [
+ "Report name",
+ "Report by",
+ "Report amount",
+ "Date & time",
+ "Order Status",
+ "Approver",
+ "Disburser",
+ ];
+
+ const tableHeadRowAdvance = [
+ "Report name",
+ "Report by",
+ "Report amount",
+ "Date & time",
+ "Order Status",
+ "Approver",
+ ];
+
+ // const extractedArray = reportsHistory.map((item)=>({ }))
+
+ const extractedArray = reimbursementStatus.map((item, index) => ({
+ "Report name": item?.reportName,
+ "Report by": item?.reportBy,
+ "Report amount": item?.reportAmount,
+ "Date & time": item?.dateTime,
+ "Order Status": (
+
+ {item?.orderStatus}
+
+ ),
+ Approver: item?.approver,
+ Disburser: item?.disburser,
+ }));
+
+ const extractedArrayAdvance = advanceStatus.map((item, index) => ({
+ "Report name": item?.reportName,
+ "Report by": item?.reportBy,
+ "Report amount": item?.reportAmount,
+ "Date & time": item?.dateTime,
+ "Order Status": (
+
+ {item?.orderStatus}
+
+ ),
+ Approver: item?.approver,
+ }));
+
+ const requestItems = [
+ {
+ backgroundColor: "#3725EA",
+ title: "REIMBURSEMENT REQUEST",
+ count: 200,
+ linkText: "View Requests",
+ },
+ {
+ backgroundColor: "#C33FAD",
+ title: "ADVANCE EXPENSE REQUEST",
+ count: 200,
+ linkText: "View Requests",
+ },
+ {
+ backgroundColor: "#3725EA",
+ title: "WALLET APPROVAL REQUEST",
+ count: 200,
+ linkText: "View Requests",
+ },
+ ];
+
+ const gridItemsData = [
+ {
+ backgroundColor: "#218F001A",
+ iconColor: "#00A438",
+ title: "Bills for approval",
+ count: 50,
+ buttonBg: "#FCA1001A",
+ buttonBorder: "#FCA100",
+ buttonText: "Pending requests",
+ badgeText: "20 New",
+ badgeColor: "#3725EA",
+ viewTextColor: "#6311CB",
+ },
+ {
+ backgroundColor: "#218F001A",
+ iconColor: "#00A438",
+ title: "Bills for pending",
+ count: 50,
+ buttonBg: "#FCA1001A",
+ buttonBorder: "#FCA100",
+ buttonText: "Pending requests",
+ badgeText: "20 New",
+ badgeColor: "#3725EA",
+ viewTextColor: "#6311CB",
+ },
+ {
+ backgroundColor: "#218F001A",
+ iconColor: "#00A438",
+ title: "Active expense wallets",
+ count: 50,
+ buttonBg: "#3725EA1A",
+ buttonBorder: "#3725EA",
+ buttonText: "View",
+ viewTextColor: "#6311CB",
+ hideBadge: true,
+ },
+ ];
+
+ const blueCardData = [
+ {
+ backgroundColor: "#6311CB",
+ iconColor: "#00A438",
+ title: "Pending reimbursement request",
+ count: 200,
+ buttonBg: "#FCA1001A",
+ buttonBorder: "#FCA100",
+ buttonText: "View requests",
+ badgeText: "20 New",
+ badgeColor: "#3725EA",
+ viewTextColor: "#6311CB",
+ },
+ {
+ backgroundColor: "#C33FAD",
+ iconColor: "#00A438",
+ title: "Pending wallet requests ",
+ count: 50,
+ buttonBg: "#FCA1001A",
+ buttonBorder: "#FCA100",
+ buttonText: "View requests",
+ badgeText: "20 New",
+ badgeColor: "#3725EA",
+ viewTextColor: "#6311CB",
+ },
+ ]
+
return (
-
+
+
+
+
+ {blueCardData.map((item, index) => (
+
+ ))}
+
+
+
+ {/* dhbfdbf */}
+
+
+
+
+
+ Reimbursement status
+
+
+
+
+
+ Time Period :
+
+
+
+ Feb 20 - Jan 30, 2024{" "}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+ navigate("/reimbursement-request")}
+ as={Button}
+ color={"#6311CB"}
+ size={18}
+ cursor={"pointer"}
+ />
+
+
+
+
+
+
+
+
+
+
+ Advance expense status
+
+
+
+
+
+ Time Period :
+
+
+
+ Feb 20 - Jan 30, 2024{" "}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+ navigate("/reimbursement-request")}
+ as={Button}
+ color={"#6311CB"}
+ size={18}
+ cursor={"pointer"}
+ />
+
+
+
+
+
);
};
diff --git a/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx b/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx
index c677e92..93a35a6 100644
--- a/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx
+++ b/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx
@@ -39,6 +39,7 @@ import ExcelIcon from "../../assets/ExcelIcon.svg";
import { AiOutlineCalendar } from "react-icons/ai";
import { IoMdArrowDropdown } from "react-icons/io";
import { BsFilterRight } from "react-icons/bs";
+import BlueCard from "../../Components/Cards/BlueCard";
const OptiFiiExpenseDashboard = () => {
const { reimbursementStatus } = useContext(GlobalStateContext);
@@ -96,8 +97,8 @@ const OptiFiiExpenseDashboard = () => {
item?.orderStatus === "Approved"
? "#027A48"
: item?.orderStatus === "Fully reimbursed"
- ? "#3725EA"
- : "red"
+ ? "#3725EA"
+ : "red"
}
>
{item?.orderStatus}
@@ -121,8 +122,8 @@ const OptiFiiExpenseDashboard = () => {
item?.orderStatus === "Approved"
? "#027A48"
: item?.orderStatus === "Fully reimbursed"
- ? "#3725EA"
- : "red"
+ ? "#3725EA"
+ : "red"
}
>
{item?.orderStatus}
@@ -190,46 +191,44 @@ const OptiFiiExpenseDashboard = () => {
},
];
+
+ const blueCardData = [
+ {
+ backgroundColor: "#6311CB",
+ iconColor: "#00A438",
+ title: "Bills for pending",
+ count: 50,
+ buttonBg: "#FCA1001A",
+ buttonBorder: "#FCA100",
+ buttonText: "Pending requests",
+ badgeText: "20 New",
+ badgeColor: "#3725EA",
+ viewTextColor: "#6311CB",
+ },
+ {
+ backgroundColor: "#C33FAD",
+ iconColor: "#00A438",
+ title: "Bills for pending",
+ count: 50,
+ buttonBg: "#FCA1001A",
+ buttonBorder: "#FCA100",
+ buttonText: "Pending requests",
+ badgeText: "20 New",
+ badgeColor: "#3725EA",
+ viewTextColor: "#6311CB",
+ },
+ ]
+
+
return (
- {requestItems.map((item, index) => (
-
-
-
-
-
-
-
- {item.title}
-
-
-
- {item.count}
-
-
-
-
-
-
-
- {item.linkText}
-
-
-
+ {blueCardData.map((item, index) => (
+
))}
-
+
{gridItemsData.map((item, index) => (
@@ -473,6 +472,7 @@ const OptiFiiExpenseDashboard = () => {
isLoading={isLoading}
/>
+
{
+
+
-
+
)}
{activeStep === 1 && (
diff --git a/src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx b/src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx
index bbf53e7..a3eed27 100644
--- a/src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx
+++ b/src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx
@@ -16,16 +16,31 @@ import {
WrapItem,
Button,
useToast,
+ Checkbox,
+ Stack,
+ CheckboxGroup,
+ Text,
+ RadioGroup,
+ Radio,
} from "@chakra-ui/react";
-import { AddIcon } from "@chakra-ui/icons";
+import { AddIcon, ChevronDownIcon } from "@chakra-ui/icons";
import React, { useState } from "react";
import dayjs from "dayjs";
+import { CiCircleInfo } from "react-icons/ci";
const OutOfPoket = ({ register, formState }) => {
const [selectedDepartments, setSelectedDepartments] = useState([]);
const [selectedTimes, setSelectedTimes] = useState([]);
+ const [transaction, setTransaction] = useState([]);
+ const [transactionRule, setTransactionRule] = useState("none");
+ const [categories, setCategories] = useState(["Food", "Fuel"]);
+ const [selectedCategories, setSelectedCategories] = useState([]);
+ const [inputValue, setInputValue] = useState("");
+
const toast = useToast();
+ const transactionTags = ["Food", "Fuel"];
+
const departments = ["Finance", "HR", "Marketing", "Engineering"];
const options = [
{
@@ -50,6 +65,40 @@ const OutOfPoket = ({ register, formState }) => {
},
];
+ const availableCategories = [
+ "Entertainment",
+ "Groceries",
+ "Fuel",
+ "Shopping",
+ "Food",
+ "Utilities",
+ ];
+
+ const handleCategoryRemove = (categoryToRemove) => {
+ setCategories(
+ categories.filter((category) => category !== categoryToRemove)
+ );
+ };
+
+ const handleCategoryAdd = (categoryToAdd) => {
+ if (!categories.includes(categoryToAdd)) {
+ setCategories([...categories, categoryToAdd]);
+ }
+ };
+
+ const addCategory = () => {
+ if (inputValue && !selectedCategories.includes(inputValue)) {
+ setSelectedCategories([...selectedCategories, inputValue]);
+ setInputValue("");
+ }
+ };
+
+ const removeCategory = (categoryToRemove) => {
+ setSelectedCategories(
+ selectedCategories.filter((category) => category !== categoryToRemove)
+ );
+ };
+
const handleSelect = (time) => {
if (!selectedTimes.includes(time)) {
setSelectedTimes([...selectedTimes, time]);
@@ -64,6 +113,17 @@ const OutOfPoket = ({ register, formState }) => {
}
};
+ const handleRemoveTags = (time) => {
+ setSelectedTimes(selectedTimes.filter((t) => t !== time));
+ };
+
+ const handleSelectChangeTags = (event) => {
+ const value = event.target.value;
+ if (value && !transactionTags.includes(value)) {
+ setSelectedDepartments([...transactionTags, value]);
+ }
+ };
+
const handleRemove = (time) => {
setSelectedTimes(selectedTimes.filter((t) => t !== time));
};
@@ -82,28 +142,37 @@ const OutOfPoket = ({ register, formState }) => {
return (
-
+
- Wallet policy
+
+ Wallet name
+
- Description
+
+ Description
+
- Department
-
- {/* Dropdown Menu */}
-
+
+ Set reminder
+
+
{/* Displaying selected times as tags */}
@@ -164,6 +230,138 @@ const OutOfPoket = ({ register, formState }) => {
))}
+
+
+
+ Select wallet type
+
+
+
+ Prepaid
+ Reimbursement
+
+
+
+
+
+
+ Select transaction type
+
+
+
+ Ecommerce
+ POS
+ ATM
+ Contactless
+ Wallet transfer
+
+
+
+
+ {/*
+
+
+
+
+
+
+ {categories.map((category, index) => (
+
+ {category}
+ handleCategoryRemove(category)}
+ />
+
+ ))}
+
+ */}
+
+
+
+ {/* Transaction Rule */}
+
+ Transaction rule
+
+
+
+ {/* Merchant Category */}
+
+ Merchant category
+
+ {/* Input for adding categories */}
+ setInputValue(e.target.value)}
+ placeholder="Add category"
+ width="auto"
+ onKeyPress={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ addCategory();
+ }
+ }}
+ />
+
+ {selectedCategories.map((category) => (
+
+ {category}
+ removeCategory(category)}
+ />
+
+ ))}
+
+
+
+
+
diff --git a/src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx b/src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx
index a8a797b..1f4e29c 100644
--- a/src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx
+++ b/src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx
@@ -24,6 +24,7 @@ const WalletPolicy = ({ register }) => {
display="flex"
flexDirection="row"
borderRadius="5px"
+ bgColor="#F4F4F4"
border={selectedValue === "1" && "1px solid #3725EA"}
>
@@ -35,6 +36,7 @@ const WalletPolicy = ({ register }) => {
display="flex"
flexDirection="row"
borderRadius="5px"
+ bgColor="#F4F4F4"
border={selectedValue === "2" && "1px solid #3725EA"}
>
diff --git a/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx b/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
new file mode 100644
index 0000000..29019df
--- /dev/null
+++ b/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
@@ -0,0 +1,270 @@
+import {
+ Box,
+ Button,
+ Checkbox,
+ 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 {
+ AddIcon,
+ CalendarIcon,
+ ChevronDownIcon,
+ EmailIcon,
+ SearchIcon,
+ ViewIcon,
+} from "@chakra-ui/icons";
+import {
+ MdFilterList,
+ 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 } 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 { AiOutlineShoppingCart } from "react-icons/ai";
+import VoucherImg from "../../assets/voucher.png";
+import { GrDownload } from "react-icons/gr";
+
+const BrandVoucher = () => {
+ const { voucher } = useContext(GlobalStateContext);
+ const [isLoading, setIsLoading] = useState(false);
+ const [searchTerm, setSearchTerm] = useState("");
+
+ 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 = [
+ "Sr. no",
+ "Date & time",
+ "Employees/department",
+ "Total amount",
+ "Order Status",
+ "Allotment history",
+ ];
+
+ // const extractedArray = reportsHistory.map((item)=>({ }))
+
+ const extractedArray = voucher.map((item, index) => ({
+ "Sr. no": (
+
+
+ {item?.id}
+
+
+ ),
+ "Date & time": item?.DateTime,
+ "Employees/department": item?.EmployeesDepartment,
+ "Total amount": item?.TotalAmount,
+ // Grade: item?.Grade,
+ // Department: item?.Department,
+ // Role: item?.Role,
+ "Order Status": (
+
+ ● {item?.OrderStatus}
+
+ ),
+ "Allotment history": (
+ <>
+
+
+ ),
+ }));
+
+ return (
+
+
+
+
+
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+ }
+ title={"Voucher draft"}
+ />
+
+
+ }
+ title={"Buy vouchers"}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default BrandVoucher;
diff --git a/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx b/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
new file mode 100644
index 0000000..78f23a1
--- /dev/null
+++ b/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const BuyVoucher = () => {
+ return (
+ BuyVoucher
+ )
+}
+
+export default BuyVoucher
\ No newline at end of file
diff --git a/src/Pages/SupportAndTicket/SupportAndTicket.jsx b/src/Pages/SupportAndTicket/SupportAndTicket.jsx
index edd9078..eb9d000 100644
--- a/src/Pages/SupportAndTicket/SupportAndTicket.jsx
+++ b/src/Pages/SupportAndTicket/SupportAndTicket.jsx
@@ -1,15 +1,246 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import {
+ Box,
+ Button,
+ HStack,
+ Text,
+ Image,
+ InputGroup,
+ InputLeftElement,
+ Input,
+ Menu,
+ MenuButton,
+ MenuList,
+ MenuItem,
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalBody,
+ useDisclosure,
+ Select,
+ Textarea,
+} 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 { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router-dom";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+import { GoDotFill } from "react-icons/go";
+import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import { PiIdentificationBadge } from "react-icons/pi";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+import SecondaryButton from "../../Components/Buttons/SecondaryButton";
const SupportAndTicket = () => {
+
+ const navigate = useNavigate();
+ const { SupportAndTicket } = useContext(GlobalStateContext);
+ const [isLoading, setIsLoading] = useState(false);
+ const [searchTerm, setSearchTerm] = useState("");
+ const { isOpen, onOpen, onClose } = useDisclosure()
+
+ 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 = [
+ "Select",
+ "Ticket ID",
+ "Subject",
+ "Status",
+ "Last update",
+ "Support",
+ ];
+
+ // const extractedArray = reportsHistory.map((item)=>({ }))
+
+ const extractedArray = SupportAndTicket.map((item, index) => ({
+ "Ticket ID": (
+
+ {item?.TicketID}
+
+ ),
+ "Subject": item?.Subject,
+ "Status": (
+
+
+ {item?.Status}
+
+ ),
+ "Last update": item?.LastUpdate,
+ "Support": item?.Support,
+ }));
+
return (
-
+
+
+
+
+
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+ }
+ title={"Add new ticket"} />
+
+
+
+
+
+
+ {/* modal */}
+
+
+
+ Add New ticket
+
+
+
+
+ Requester
+
+
+
+
+
+ Subject
+
+
+
+
+
+ Type
+
+
+
+
+
+ Priority
+
+
+
+
+
+ Description
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js
index 631b4b9..13d85a9 100644
--- a/src/Routes/Nav.js
+++ b/src/Routes/Nav.js
@@ -138,16 +138,16 @@ export const nav = [
path: "/support-ticket",
Icon: MdOutlineNotifications,
},
- {
- title: "Settings",
- type: "title",
- },
- {
- title: "Settings",
- type: "single",
- path: "/settings",
- Icon: IoSettingsOutline,
- },
+ // {
+ // title: "Settings",
+ // type: "title",
+ // },
+ // {
+ // title: "Settings",
+ // type: "single",
+ // path: "/settings",
+ // Icon: IoSettingsOutline,
+ // },
];
// export const nestedNav = [
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index f966efa..2b0a61e 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -23,8 +23,10 @@ import CreateWallet from "../Pages/OptiFiiExpense/wallet/CreateWallet";
import GiftDashboard from "../Pages/OptiFiiGifsAndVouchers/GiftDashboard";
import AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
+import BrandVoucher from "../Pages/OptiFiiGifsAndVouchers/BrandVoucher";
// import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
// import AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
+import BuyVoucher from "../Pages/OptiFiiGifsAndVouchers/BuyVoucher";
export const RouteLink = [
{ path: "/", Component: Dashbaord },
{ path: "/expenses", Component: Expenses },
@@ -51,11 +53,8 @@ export const RouteLink = [
{ path: "/gift-card/digital-application-status", Component: DigitalApplicationStatus },
{path:"/wallet-program/create-wallet" , Component : CreateWallet},
-
-
-
// =======================[ Gift Voucher ]==============
{ path: "/optifii-gifts-dashboard", Component: GiftDashboard },
-
-
+ { path: "/brand-voucher", Component: BrandVoucher },
+ { path: "/buy-voucher", Component: BuyVoucher },
];
diff --git a/src/assets/parkeAvenue.png b/src/assets/parkeAvenue.png
new file mode 100644
index 0000000..70649f8
Binary files /dev/null and b/src/assets/parkeAvenue.png differ
diff --git a/src/assets/voucher.png b/src/assets/voucher.png
new file mode 100644
index 0000000..dd53c27
Binary files /dev/null and b/src/assets/voucher.png differ
diff --git a/src/styles/multiSlect.css b/src/styles/multiSlect.css
new file mode 100644
index 0000000..1f5df8d
--- /dev/null
+++ b/src/styles/multiSlect.css
@@ -0,0 +1,42 @@
+/* Overall multiselect container */
+.custom-multiselect .multiselect-container {
+ width: 300px;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ padding: 5px;
+ }
+
+ /* Search box style */
+ .custom-multiselect .searchBox {
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ padding: 5px;
+ }
+
+ /* Chips (selected items) */
+ .custom-multiselect .chips {
+ background-color: #007bff;
+ color: white;
+ border-radius: 5px;
+ padding: 5px;
+ }
+
+ /* Option container (dropdown list) */
+ .custom-multiselect .optionContainer {
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ }
+
+ /* Individual option styling */
+ .custom-multiselect .option {
+ color: #007bff;
+ background-color: #f0f0f0;
+ padding: 10px;
+ }
+
+ /* Customize the option when hovered */
+ .custom-multiselect .option:hover {
+ background-color: #d1e7ff;
+ cursor: pointer;
+ }
+
\ No newline at end of file