Brand Wallet
This commit is contained in:
npcdazai
9
package-lock.json
generated
9
package-lock.json
generated
@@ -23,6 +23,7 @@
|
||||
"framer-motion": "^11.5.5",
|
||||
"js-cookie": "^3.0.5",
|
||||
"libphonenumber-js": "^1.11.8",
|
||||
"multiselect-react-dropdown": "^2.0.25",
|
||||
"react": "^18.2.0",
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
@@ -4845,6 +4846,14 @@
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/multiselect-react-dropdown": {
|
||||
"version": "2.0.25",
|
||||
"resolved": "https://registry.npmjs.org/multiselect-react-dropdown/-/multiselect-react-dropdown-2.0.25.tgz",
|
||||
"integrity": "sha512-z8kUSyBNOuV7vn4Dk35snzXWtIfTdSEEXhgDdLMvOmR+xJFx35vc1voUlSuOvrk3khb+hXC219Qs9szOvNm25Q==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.7.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
"framer-motion": "^11.5.5",
|
||||
"js-cookie": "^3.0.5",
|
||||
"libphonenumber-js": "^1.11.8",
|
||||
"multiselect-react-dropdown": "^2.0.25",
|
||||
"react": "^18.2.0",
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
import { Box, Stack, Text, } from '@chakra-ui/react'
|
||||
import React from 'react'
|
||||
import { MdGroups } from 'react-icons/md'
|
||||
import { Box, Stack, Text, Link, Badge } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
import { MdGroups } from 'react-icons/md';
|
||||
|
||||
function BlueCard() {
|
||||
function BlueCard({blueCardData}) {
|
||||
return (
|
||||
<Box
|
||||
backgroundColor={item.backgroundColor}
|
||||
backgroundColor={blueCardData.backgroundColor}
|
||||
borderRadius="xl"
|
||||
>
|
||||
<Box bg="#fff" borderRadius="xl" p={4} h="115px">
|
||||
<Stack direction={["column", "row"]} color={item.backgroundColor}>
|
||||
<Stack direction={["column", "row"]} color={blueCardData.backgroundColor}>
|
||||
<Text as="span">
|
||||
<MdGroups />
|
||||
</Text>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500}>
|
||||
{item.title}
|
||||
{blueCardData.title}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
|
||||
{item.count}
|
||||
{blueCardData.count}
|
||||
</Text>
|
||||
</Box>
|
||||
<Stack
|
||||
@@ -31,11 +31,11 @@ function BlueCard() {
|
||||
<MdGroups />
|
||||
</Text>
|
||||
<Text fontSize="sm" m={0} py={2}>
|
||||
<Link mb={0}>{item.linkText}</Link>
|
||||
<Link mb={0}>{blueCardData.buttonText}</Link>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default BlueCard
|
||||
export default BlueCard;
|
||||
|
||||
@@ -12,14 +12,14 @@ 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 { 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"
|
||||
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())
|
||||
@@ -1472,210 +1472,288 @@ const GlobalStateProvider = ({ children }) => {
|
||||
const [digital, setDigital] = useState([
|
||||
{
|
||||
id: 1,
|
||||
"orderid": "#451245",
|
||||
"laodStatus": "Fully Loaded",
|
||||
"dateTime": "10 June 2024, 10am",
|
||||
"totalvaluation": "₹ 70,000",
|
||||
"activationStatus": "Active",
|
||||
"CardDeliveryStatus": "Delivered",
|
||||
"quantity": "500"
|
||||
orderid: "#451245",
|
||||
laodStatus: "Fully Loaded",
|
||||
dateTime: "10 June 2024, 10am",
|
||||
totalvaluation: "₹ 70,000",
|
||||
activationStatus: "Active",
|
||||
CardDeliveryStatus: "Delivered",
|
||||
quantity: "500",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
"orderid": "#451245",
|
||||
"laodStatus": "Fully Loaded",
|
||||
"dateTime": "10 June 2024, 10am",
|
||||
"totalvaluation": "₹ 70,000",
|
||||
"activationStatus": "Active",
|
||||
"CardDeliveryStatus": "Not Delivered",
|
||||
"quantity": "500"
|
||||
orderid: "#451245",
|
||||
laodStatus: "Fully Loaded",
|
||||
dateTime: "10 June 2024, 10am",
|
||||
totalvaluation: "₹ 70,000",
|
||||
activationStatus: "Active",
|
||||
CardDeliveryStatus: "Not Delivered",
|
||||
quantity: "500",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
"orderid": "#451245",
|
||||
"laodStatus": "Fully Loaded",
|
||||
"dateTime": "10 June 2024, 10am",
|
||||
"totalvaluation": "₹ 70,000",
|
||||
"activationStatus": "Activate",
|
||||
"CardDeliveryStatus": "Delivered",
|
||||
"quantity": "500"
|
||||
orderid: "#451245",
|
||||
laodStatus: "Fully Loaded",
|
||||
dateTime: "10 June 2024, 10am",
|
||||
totalvaluation: "₹ 70,000",
|
||||
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"
|
||||
|
||||
orderid: "#451245",
|
||||
laodStatus: "Fully Loaded",
|
||||
dateTime: "10 June 2024, 10am",
|
||||
totalvaluation: "₹ 70,000",
|
||||
activationStatus: "Partially Active",
|
||||
CardDeliveryStatus: "Partially Delivered",
|
||||
quantity: "500",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
"orderid": "#451245",
|
||||
"laodStatus": "Fully Loaded",
|
||||
"dateTime": "10 June 2024, 10am",
|
||||
"totalvaluation": "₹ 70,000",
|
||||
"activationStatus": "Active",
|
||||
"CardDeliveryStatus": "Not Delivered",
|
||||
"quantity": "500"
|
||||
orderid: "#451245",
|
||||
laodStatus: "Fully Loaded",
|
||||
dateTime: "10 June 2024, 10am",
|
||||
totalvaluation: "₹ 70,000",
|
||||
activationStatus: "Active",
|
||||
CardDeliveryStatus: "Not Delivered",
|
||||
quantity: "500",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
"orderid": "#451245",
|
||||
"laodStatus": "Fully Loaded",
|
||||
"dateTime": "10 June 2024, 10am",
|
||||
"totalvaluation": "₹ 70,000",
|
||||
"activationStatus": "Partially Active",
|
||||
"CardDeliveryStatus": "Not Delivered",
|
||||
"quantity": "500"
|
||||
orderid: "#451245",
|
||||
laodStatus: "Fully Loaded",
|
||||
dateTime: "10 June 2024, 10am",
|
||||
totalvaluation: "₹ 70,000",
|
||||
activationStatus: "Partially Active",
|
||||
CardDeliveryStatus: "Not Delivered",
|
||||
quantity: "500",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
"orderid": "#451245",
|
||||
"laodStatus": "Fully Loaded",
|
||||
"dateTime": "10 June 2024, 10am",
|
||||
"totalvaluation": "₹ 70,000",
|
||||
"activationStatus": "Active",
|
||||
"CardDeliveryStatus": "Delivered",
|
||||
"quantity": "500"
|
||||
orderid: "#451245",
|
||||
laodStatus: "Fully Loaded",
|
||||
dateTime: "10 June 2024, 10am",
|
||||
totalvaluation: "₹ 70,000",
|
||||
activationStatus: "Active",
|
||||
CardDeliveryStatus: "Delivered",
|
||||
quantity: "500",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
"orderid": "#451245",
|
||||
"laodStatus": "Fully Loaded",
|
||||
"dateTime": "10 June 2024, 10am",
|
||||
"totalvaluation": "₹ 70,000",
|
||||
"activationStatus": "Activate",
|
||||
"CardDeliveryStatus": "Delivered",
|
||||
"quantity": "500"
|
||||
orderid: "#451245",
|
||||
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",
|
||||
"CardDeliveryStatus": "Delivered",
|
||||
"quantity": "500"
|
||||
orderid: "#451245",
|
||||
laodStatus: "Fully Loaded",
|
||||
dateTime: "10 June 2024, 10am",
|
||||
totalvaluation: "₹ 70,000",
|
||||
activationStatus: "Activate",
|
||||
CardDeliveryStatus: "Delivered",
|
||||
quantity: "500",
|
||||
},
|
||||
])
|
||||
]);
|
||||
|
||||
|
||||
// supprt and ticket
|
||||
|
||||
const [SupportAndTicket, setSupportAndTicket] = useState([
|
||||
{
|
||||
TicketID: 124589,
|
||||
Subject:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
Status: "On hold",
|
||||
LastUpdate: "Jun 10, 2024",
|
||||
Support: "Reethik thota",
|
||||
},
|
||||
{
|
||||
TicketID: 124589,
|
||||
Subject:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
Status: "On hold",
|
||||
LastUpdate: "Jun 10, 2024",
|
||||
Support: "Reethik thota",
|
||||
},
|
||||
{
|
||||
TicketID: 124589,
|
||||
Subject:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
Status: "On hold",
|
||||
LastUpdate: "Jun 10, 2024",
|
||||
Support: "Reethik thota",
|
||||
},
|
||||
{
|
||||
TicketID: 124589,
|
||||
Subject:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
Status: "On hold",
|
||||
LastUpdate: "Jun 10, 2024",
|
||||
Support: "Reethik thota",
|
||||
},
|
||||
{
|
||||
TicketID: 124589,
|
||||
Subject:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
Status: "Inactive",
|
||||
LastUpdate: "Jun 10, 2024",
|
||||
Support: "Reethik thota",
|
||||
},
|
||||
{
|
||||
TicketID: 124589,
|
||||
Subject:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
Status: "Inactive",
|
||||
LastUpdate: "Jun 10, 2024",
|
||||
Support: "Reethik thota",
|
||||
},
|
||||
{
|
||||
TicketID: 124589,
|
||||
Subject:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
Status: "In progress",
|
||||
LastUpdate: "Jun 10, 2024",
|
||||
Support: "Reethik thota",
|
||||
},
|
||||
{
|
||||
TicketID: 124589,
|
||||
Subject:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
Status: "In progress",
|
||||
LastUpdate: "Jun 10, 2024",
|
||||
Support: "Reethik thota",
|
||||
},
|
||||
{
|
||||
TicketID: 124589,
|
||||
Subject:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
Status: "In progress",
|
||||
LastUpdate: "Jun 10, 2024",
|
||||
Support: "Reethik thota",
|
||||
},
|
||||
]);
|
||||
|
||||
const [AdvanceExpenseRequest, setAdvanceExpenseRequest] = useState([
|
||||
{
|
||||
id: 1,
|
||||
ReportName: "Advance expense report 2024",
|
||||
ReportBy: {
|
||||
profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
||||
profImage:
|
||||
"https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
||||
profName: "Raju",
|
||||
},
|
||||
ReportAmount: "₹ 50000",
|
||||
DateTime: "10 June, 2924 10 am",
|
||||
Approver: "Reethik thota",
|
||||
Disburser: "Manav sain",
|
||||
Action: "View"
|
||||
Action: "View",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
ReportName: "Advance expense report 2024",
|
||||
ReportBy: {
|
||||
profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
||||
profImage:
|
||||
"https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
||||
profName: "Raju",
|
||||
},
|
||||
ReportAmount: "₹ 50000",
|
||||
DateTime: "10 June, 2924 10 am",
|
||||
Approver: "Reethik thota",
|
||||
Disburser: "Manav sain",
|
||||
Action: "View"
|
||||
Action: "View",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
ReportName: "Advance expense report 2024",
|
||||
ReportBy: {
|
||||
profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
||||
profImage:
|
||||
"https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
||||
profName: "Raju",
|
||||
},
|
||||
ReportAmount: "₹ 50000",
|
||||
DateTime: "10 June, 2924 10 am",
|
||||
Approver: "Reethik thota",
|
||||
Disburser: "Manav sain",
|
||||
Action: "View"
|
||||
Action: "View",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
ReportName: "Advance expense report 2024",
|
||||
ReportBy: {
|
||||
profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
||||
profImage:
|
||||
"https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
||||
profName: "Raju",
|
||||
},
|
||||
ReportAmount: "₹ 50000",
|
||||
DateTime: "10 June, 2924 10 am",
|
||||
Approver: "Reethik thota",
|
||||
Disburser: "Manav sain",
|
||||
Action: "View"
|
||||
Action: "View",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
ReportName: "Advance expense report 2024",
|
||||
ReportBy: {
|
||||
profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
||||
profImage:
|
||||
"https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
||||
profName: "Raju",
|
||||
},
|
||||
ReportAmount: "₹ 50000",
|
||||
DateTime: "10 June, 2924 10 am",
|
||||
Approver: "Reethik thota",
|
||||
Disburser: "Manav sain",
|
||||
Action: "View"
|
||||
Action: "View",
|
||||
},
|
||||
])
|
||||
]);
|
||||
|
||||
const [AdvanceExpenseRequestView, setAdvanceExpenseRequestView] = useState([
|
||||
{
|
||||
"DateTime": "10 June, 2924 10 am",
|
||||
"Merchant": "Dine in",
|
||||
"Category": "Food",
|
||||
"Paymentmode": "Expense card",
|
||||
"ReimburseAmount": "₹ 50000",
|
||||
"Bills": "",
|
||||
"Disburser": "Manav sain",
|
||||
"Action": ""
|
||||
DateTime: "10 June, 2924 10 am",
|
||||
Merchant: "Dine in",
|
||||
Category: "Food",
|
||||
Paymentmode: "Expense card",
|
||||
ReimburseAmount: "₹ 50000",
|
||||
Bills: "",
|
||||
Disburser: "Manav sain",
|
||||
Action: "",
|
||||
},
|
||||
{
|
||||
"DateTime": "10 June, 2924 10 am",
|
||||
"Merchant": "Airtel postpaid",
|
||||
"Category": "Telecom",
|
||||
"Paymentmode": "Expense card",
|
||||
"ReimburseAmount": "₹ 50000",
|
||||
"Bills": "",
|
||||
"Disburser": "Manav sain",
|
||||
"Action": ""
|
||||
DateTime: "10 June, 2924 10 am",
|
||||
Merchant: "Airtel postpaid",
|
||||
Category: "Telecom",
|
||||
Paymentmode: "Expense card",
|
||||
ReimburseAmount: "₹ 50000",
|
||||
Bills: "",
|
||||
Disburser: "Manav sain",
|
||||
Action: "",
|
||||
},
|
||||
{
|
||||
"DateTime": "10 June, 2924 10 am",
|
||||
"Merchant": "Lorem ipsme",
|
||||
"Category": "Fuel",
|
||||
"Paymentmode": "Expense card",
|
||||
"ReimburseAmount": "₹ 50000",
|
||||
"Bills": "",
|
||||
"Disburser": "Manav sain",
|
||||
"Action": ""
|
||||
DateTime: "10 June, 2924 10 am",
|
||||
Merchant: "Lorem ipsme",
|
||||
Category: "Fuel",
|
||||
Paymentmode: "Expense card",
|
||||
ReimburseAmount: "₹ 50000",
|
||||
Bills: "",
|
||||
Disburser: "Manav sain",
|
||||
Action: "",
|
||||
},
|
||||
{
|
||||
"DateTime": "10 June, 2924 10 am",
|
||||
"Merchant": "Dine in",
|
||||
"Category": "Food",
|
||||
"Paymentmode": "Expense card",
|
||||
"ReimburseAmount": "₹ 50000",
|
||||
"Bills": "",
|
||||
"Disburser": "Manav sain",
|
||||
"Action": ""
|
||||
DateTime: "10 June, 2924 10 am",
|
||||
Merchant: "Dine in",
|
||||
Category: "Food",
|
||||
Paymentmode: "Expense card",
|
||||
ReimburseAmount: "₹ 50000",
|
||||
Bills: "",
|
||||
Disburser: "Manav sain",
|
||||
Action: "",
|
||||
},
|
||||
])
|
||||
|
||||
]);
|
||||
|
||||
const [ApplicationStatus, setApplicationStatus] = useState([
|
||||
{
|
||||
@@ -1788,100 +1866,164 @@ const GlobalStateProvider = ({ children }) => {
|
||||
},
|
||||
]);
|
||||
|
||||
const [walletProgram, setWalletProgram] = useState(
|
||||
[
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Pending",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson",
|
||||
},
|
||||
]
|
||||
);
|
||||
]);
|
||||
|
||||
const [voucher, setVoucher] = useState([
|
||||
{
|
||||
id: 1,
|
||||
DateTime: "Jan 12, 2022, 10 am",
|
||||
EmployeesDepartment: "250 employees",
|
||||
TotalAmount: "₹ 50,000",
|
||||
OrderStatus: "Scheduled",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
DateTime: "Jan 12, 2022, 10 am",
|
||||
EmployeesDepartment: "250 employees",
|
||||
TotalAmount: "₹ 50,000",
|
||||
OrderStatus: "Scheduled",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
DateTime: "Jan 12, 2022, 10 am",
|
||||
EmployeesDepartment: "250 employees",
|
||||
TotalAmount: "₹ 50,000",
|
||||
OrderStatus: "Scheduled",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
DateTime: "Jan 12, 2022, 10 am",
|
||||
EmployeesDepartment: "250 employees",
|
||||
TotalAmount: "₹ 50,000",
|
||||
OrderStatus: "Scheduled",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
DateTime: "Jan 12, 2022, 10 am",
|
||||
EmployeesDepartment: "250 employees",
|
||||
TotalAmount: "₹ 50,000",
|
||||
OrderStatus: "Completed",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
DateTime: "Jan 12, 2022, 10 am",
|
||||
EmployeesDepartment: "250 employees",
|
||||
TotalAmount: "₹ 50,000",
|
||||
OrderStatus: "Completed",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
DateTime: "Jan 12, 2022, 10 am",
|
||||
EmployeesDepartment: "250 employees",
|
||||
TotalAmount: "₹ 50,000",
|
||||
OrderStatus: "Completed",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
DateTime: "Jan 12, 2022, 10 am",
|
||||
EmployeesDepartment: "250 employees",
|
||||
TotalAmount: "₹ 50,000",
|
||||
OrderStatus: "Completed",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
DateTime: "Jan 12, 2022, 10 am",
|
||||
EmployeesDepartment: "250 employees",
|
||||
TotalAmount: "₹ 50,000",
|
||||
OrderStatus: "Completed",
|
||||
},
|
||||
]);
|
||||
|
||||
return (
|
||||
<GlobalStateContext.Provider
|
||||
@@ -1900,6 +2042,7 @@ const GlobalStateProvider = ({ children }) => {
|
||||
setEmployeePermissions,
|
||||
reimbursementStatus,
|
||||
setReimbursementStatus,
|
||||
voucher,
|
||||
advanceStatus,
|
||||
setAdvanceStatus,
|
||||
digital,
|
||||
@@ -1910,7 +2053,9 @@ const GlobalStateProvider = ({ children }) => {
|
||||
setAdvanceExpenseRequest,
|
||||
AdvanceExpenseRequestView,
|
||||
setAdvanceExpenseRequestView,
|
||||
walletProgram
|
||||
walletProgram,
|
||||
SupportAndTicket,
|
||||
setSupportAndTicket,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -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": (
|
||||
<Tag
|
||||
my={1}
|
||||
size={"sm"}
|
||||
borderRadius="full"
|
||||
color={
|
||||
item?.orderStatus === "Approved"
|
||||
? "#027A48"
|
||||
: item?.orderStatus === "Fully reimbursed"
|
||||
? "#3725EA"
|
||||
: "red"
|
||||
}
|
||||
>
|
||||
{item?.orderStatus}
|
||||
</Tag>
|
||||
),
|
||||
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": (
|
||||
<Tag
|
||||
my={1}
|
||||
size={"sm"}
|
||||
borderRadius="full"
|
||||
color={
|
||||
item?.orderStatus === "Approved"
|
||||
? "#027A48"
|
||||
: item?.orderStatus === "Fully reimbursed"
|
||||
? "#3725EA"
|
||||
: "red"
|
||||
}
|
||||
>
|
||||
{item?.orderStatus}
|
||||
</Tag>
|
||||
),
|
||||
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 (
|
||||
<Box h={"100%"} p={6}>
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
|
||||
<MiniHeader
|
||||
title={"My Requests"}
|
||||
title={"Approvers"}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
backButton={true}
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4}>
|
||||
{blueCardData.map((item, index) => (
|
||||
<BlueCard key={index} blueCardData={item} />
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* dhbfdbf */}
|
||||
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
// pb={0}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
minH={"100%"}
|
||||
mb={5}
|
||||
>
|
||||
<VStack px={3} alignItems={"start"} gap={0}>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
w={"100%"}
|
||||
>
|
||||
<Heading fontSize={"md"} fontWeight={500}>
|
||||
Reimbursement status
|
||||
</Heading>
|
||||
<Box display={"flex"} alignItems={"center"}>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<FaArrowUpFromBracket />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Export
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>
|
||||
<Image src={pdfIcon} me={2} /> Export as PDF
|
||||
</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>
|
||||
<Image src={ExcelIcon} me={2} /> Export as Excel
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<Box
|
||||
fontSize={"sm"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
bg={"#F2EEF8"}
|
||||
p={"6px 10px"}
|
||||
rounded={"md"}
|
||||
>
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={1}
|
||||
>
|
||||
<AiOutlineCalendar fontSize={"16px"} /> Time Period :
|
||||
</Text>
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
color={"#6311CB"}
|
||||
fontWeight={500}
|
||||
mx={2}
|
||||
>
|
||||
<Text as={"span"} me={5}>
|
||||
Feb 20 - Jan 30, 2024{" "}
|
||||
</Text>
|
||||
<IoMdArrowDropdown />
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</VStack>
|
||||
<hr />
|
||||
<VStack mb={3} px={3} alignItems={"start"} gap={0}>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
w={"100%"}
|
||||
>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<BsFilterRight fontSize={"16px"} />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Sort
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Descending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
|
||||
<Box display={"flex"} gap={2} alignItems={"center"}>
|
||||
<InputGroup width={300} size="sm" ml={5}>
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
rounded="md"
|
||||
focusBorderColor="#3725EA"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<LuListFilter fontSize={"16px"} />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Filter
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Descending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
|
||||
<BsArrowsAngleExpand
|
||||
onClick={() => navigate("/reimbursement-request")}
|
||||
as={Button}
|
||||
color={"#6311CB"}
|
||||
size={18}
|
||||
cursor={"pointer"}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</VStack>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
// pb={0}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
minH={"100%"}
|
||||
>
|
||||
<VStack px={3} alignItems={"start"} gap={0}>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
w={"100%"}
|
||||
>
|
||||
<Heading fontSize={"md"} fontWeight={500}>
|
||||
Advance expense status
|
||||
</Heading>
|
||||
<Box display={"flex"} alignItems={"center"}>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<FaArrowUpFromBracket />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Export
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>
|
||||
<Image src={pdfIcon} me={2} /> Export as PDF
|
||||
</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>
|
||||
<Image src={ExcelIcon} me={2} /> Export as Excel
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<Box
|
||||
fontSize={"sm"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
bg={"#F2EEF8"}
|
||||
p={"6px 10px"}
|
||||
rounded={"md"}
|
||||
>
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={1}
|
||||
>
|
||||
<AiOutlineCalendar fontSize={"16px"} /> Time Period :
|
||||
</Text>
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
color={"#6311CB"}
|
||||
fontWeight={500}
|
||||
mx={2}
|
||||
>
|
||||
<Text as={"span"} me={5}>
|
||||
Feb 20 - Jan 30, 2024{" "}
|
||||
</Text>
|
||||
<IoMdArrowDropdown />
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</VStack>
|
||||
<hr />
|
||||
<VStack mb={3} px={3} alignItems={"start"} gap={0}>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
w={"100%"}
|
||||
>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<BsFilterRight fontSize={"16px"} />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Sort
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Descending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
|
||||
<Box display={"flex"} gap={2} alignItems={"center"}>
|
||||
<InputGroup width={300} size="sm" ml={5}>
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
rounded="md"
|
||||
focusBorderColor="#3725EA"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<LuListFilter fontSize={"16px"} />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Filter
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Descending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<BsArrowsAngleExpand
|
||||
onClick={() => navigate("/reimbursement-request")}
|
||||
as={Button}
|
||||
color={"#6311CB"}
|
||||
size={18}
|
||||
cursor={"pointer"}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</VStack>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRowAdvance}
|
||||
data={extractedArrayAdvance}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Box {...OPACITY_ON_LOAD} overflowX={"scroll"} p={4}>
|
||||
<Grid templateColumns="repeat(4, 1fr)" gap={6} mb={4}>
|
||||
{requestItems.map((item, index) => (
|
||||
<GridItem
|
||||
key={index}
|
||||
backgroundColor={item.backgroundColor}
|
||||
borderRadius="xl"
|
||||
>
|
||||
<Box bg="#fff" borderRadius="xl" p={4} h="115px">
|
||||
<Stack direction={["column", "row"]} color={item.backgroundColor}>
|
||||
<Text as="span">
|
||||
<MdGroups />
|
||||
</Text>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
|
||||
{item.count}
|
||||
</Text>
|
||||
</Box>
|
||||
<Stack
|
||||
direction={["column", "row"]}
|
||||
color="#fff"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Text as="span">
|
||||
<MdGroups />
|
||||
</Text>
|
||||
<Text fontSize="sm" m={0} py={2}>
|
||||
<Link mb={0}>{item.linkText}</Link>
|
||||
</Text>
|
||||
</Stack>
|
||||
</GridItem>
|
||||
{blueCardData.map((item, index) => (
|
||||
<BlueCard key={index} blueCardData={item} />
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
|
||||
|
||||
<Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4}>
|
||||
{gridItemsData.map((item, index) => (
|
||||
<GridItem key={index} backgroundColor="#fff" borderRadius="xl">
|
||||
@@ -473,6 +472,7 @@ const OptiFiiExpenseDashboard = () => {
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
|
||||
@@ -140,6 +140,8 @@ const ReimbursementRequest = () => {
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
<Box>
|
||||
</Box>
|
||||
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
|
||||
@@ -88,7 +88,7 @@ function CreateWallet() {
|
||||
Create wallet policy
|
||||
</Heading>
|
||||
|
||||
<WalletPolicy register={register} />
|
||||
<WalletPolicy register={register} />
|
||||
</Box>
|
||||
)}
|
||||
{activeStep === 1 && (
|
||||
|
||||
@@ -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 (
|
||||
<div>
|
||||
<FormControl>
|
||||
<Box display="flex" flexDirection="column" gap={3}>
|
||||
<Box
|
||||
bgColor="#F6F0FF"
|
||||
boxShadow="md"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
gap={3}
|
||||
p={2}
|
||||
>
|
||||
<Box display="flex" flexDirection="column">
|
||||
<FormLabel>Wallet policy</FormLabel>
|
||||
<FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
|
||||
Wallet name
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...register("walletPolicy", { required: "This is required" })}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexDirection="column">
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
|
||||
Description
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
{...register("description", { required: "This is required" })}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexDirection="column">
|
||||
<FormLabel>Department</FormLabel>
|
||||
<Select
|
||||
placeholder="Select Department"
|
||||
onChange={handleSelectChange}
|
||||
value=""
|
||||
>
|
||||
<FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
|
||||
Department
|
||||
</FormLabel>
|
||||
<Select placeholder=" " onChange={handleSelectChange} value="">
|
||||
{departments.map((department, index) => (
|
||||
<option key={index} value={department}>
|
||||
{department}
|
||||
@@ -131,22 +200,19 @@ const OutOfPoket = ({ register, formState }) => {
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
{/* Dropdown Menu */}
|
||||
<Menu>
|
||||
<MenuButton as={Button} rightIcon={<AddIcon />}>
|
||||
Pick date & time
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
{options.map((option) => (
|
||||
<MenuItem
|
||||
key={option.value}
|
||||
onClick={() => handleSelect(option.value)}
|
||||
>
|
||||
{option.label} ({option.value})
|
||||
</MenuItem>
|
||||
))}
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
|
||||
Set reminder
|
||||
</FormLabel>
|
||||
<Select
|
||||
onChange={(e) => handleSelect(e.target.value)}
|
||||
placeholder=" "
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label} ({option.value})
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
{/* Displaying selected times as tags */}
|
||||
<Box mt={4}>
|
||||
@@ -164,6 +230,138 @@ const OutOfPoket = ({ register, formState }) => {
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Stack>
|
||||
<Text color="#3F4754" fontWeight={700} fontSize="sm">
|
||||
Select wallet type
|
||||
</Text>
|
||||
<CheckboxGroup
|
||||
colorScheme="purple"
|
||||
defaultValue={["Prepaid", "Reimbursement"]}
|
||||
>
|
||||
<Stack spacing={[1, 5]} direction="column">
|
||||
<Checkbox value="Prepaid">Prepaid</Checkbox>
|
||||
<Checkbox value="Reimbursement">Reimbursement</Checkbox>
|
||||
</Stack>
|
||||
</CheckboxGroup>
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<Text color="#3F4754" fontWeight={700} fontSize="sm">
|
||||
Select transaction type
|
||||
</Text>
|
||||
<CheckboxGroup
|
||||
colorScheme="purple"
|
||||
defaultValue={[
|
||||
"Ecommerce",
|
||||
"POS",
|
||||
"ATM",
|
||||
"Contactless",
|
||||
"Wallet transfer",
|
||||
]}
|
||||
>
|
||||
<Stack spacing={[1, 5]} direction="column">
|
||||
<Checkbox value="Ecommerce">Ecommerce</Checkbox>
|
||||
<Checkbox value="POS">POS</Checkbox>
|
||||
<Checkbox value="ATM">ATM</Checkbox>
|
||||
<Checkbox value="Contactless">Contactless</Checkbox>
|
||||
<Checkbox value="Wallet transfer">Wallet transfer</Checkbox>
|
||||
</Stack>
|
||||
</CheckboxGroup>
|
||||
</Stack>
|
||||
|
||||
{/* <Box
|
||||
display="flex"
|
||||
gap="4"
|
||||
p="4"
|
||||
borderWidth="1px"
|
||||
borderRadius="md"
|
||||
boxShadow="sm"
|
||||
>
|
||||
|
||||
<Box display="flex" flexDirection="column" height="20px" gap={4}>
|
||||
<Menu>
|
||||
<MenuButton as={Button} rightIcon={<CiCircleInfo />}>
|
||||
Either of them
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
{availableCategories.map((category, index) => (
|
||||
<MenuItem
|
||||
key={index}
|
||||
onClick={() => handleCategoryAdd(category)}
|
||||
>
|
||||
{category}
|
||||
</MenuItem>
|
||||
))}
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Box>
|
||||
<Box display="flex" gap="2" mb="2">
|
||||
|
||||
{categories.map((category, index) => (
|
||||
<Tag
|
||||
key={index}
|
||||
size="md"
|
||||
borderRadius="full"
|
||||
variant="solid"
|
||||
colorScheme="blue"
|
||||
>
|
||||
<TagLabel>{category}</TagLabel>
|
||||
<TagCloseButton
|
||||
onClick={() => handleCategoryRemove(category)}
|
||||
/>
|
||||
</Tag>
|
||||
))}
|
||||
</Box>
|
||||
</Box> */}
|
||||
|
||||
<Box maxW="400px" mt={4}>
|
||||
<Stack spacing={4}>
|
||||
{/* Transaction Rule */}
|
||||
<Box>
|
||||
<Text mb={2}>Transaction rule</Text>
|
||||
<Select placeholder="None of them" width="fit-content">
|
||||
{/* Add more options here as needed */}
|
||||
</Select>
|
||||
</Box>
|
||||
|
||||
{/* Merchant Category */}
|
||||
<Box>
|
||||
<Text mb={2}>Merchant category</Text>
|
||||
<Box display="flex" alignItems="center">
|
||||
{/* Input for adding categories */}
|
||||
<Input
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
placeholder="Add category"
|
||||
width="auto"
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addCategory();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Box display="flex" flexWrap="wrap" gap={2} mr={2}>
|
||||
{selectedCategories.map((category) => (
|
||||
<Tag
|
||||
size="lg"
|
||||
key={category}
|
||||
borderRadius="full"
|
||||
variant="solid"
|
||||
colorScheme="purple"
|
||||
>
|
||||
<TagLabel>{category}</TagLabel>
|
||||
<TagCloseButton
|
||||
onClick={() => removeCategory(category)}
|
||||
/>
|
||||
</Tag>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
@@ -24,6 +24,7 @@ const WalletPolicy = ({ register }) => {
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
borderRadius="5px"
|
||||
bgColor="#F4F4F4"
|
||||
border={selectedValue === "1" && "1px solid #3725EA"}
|
||||
>
|
||||
<Radio size="sm" colorScheme="blue" value="1">
|
||||
@@ -35,6 +36,7 @@ const WalletPolicy = ({ register }) => {
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
borderRadius="5px"
|
||||
bgColor="#F4F4F4"
|
||||
border={selectedValue === "2" && "1px solid #3725EA"}
|
||||
>
|
||||
<Radio size="sm" colorScheme="blue" value="2">
|
||||
|
||||
270
src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
Normal file
270
src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
Normal file
@@ -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": (
|
||||
<Checkbox colorScheme="purple">
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{item?.id}
|
||||
</Text>
|
||||
</Checkbox>
|
||||
),
|
||||
"Date & time": item?.DateTime,
|
||||
"Employees/department": item?.EmployeesDepartment,
|
||||
"Total amount": item?.TotalAmount,
|
||||
// Grade: item?.Grade,
|
||||
// Department: item?.Department,
|
||||
// Role: item?.Role,
|
||||
"Order Status": (
|
||||
<Tag
|
||||
my={1}
|
||||
size={"sm"}
|
||||
borderRadius="full"
|
||||
bgColor={
|
||||
item?.OrderStatus === "Scheduled"
|
||||
? "#F8F3FF"
|
||||
: item?.OrderStatus === "#Completed"
|
||||
? "#00A43814"
|
||||
: " "
|
||||
}
|
||||
color={
|
||||
item?.OrderStatus === "Scheduled"
|
||||
? "#6311CB"
|
||||
: item?.OrderStatus === "Completed"
|
||||
? "#00A438"
|
||||
: ""
|
||||
}
|
||||
p={1}
|
||||
px={3}
|
||||
>
|
||||
<TagLabel>● {item?.OrderStatus}</TagLabel>
|
||||
</Tag>
|
||||
),
|
||||
"Allotment history": (
|
||||
<>
|
||||
<Button display="flex" alignItems="center" gap={2} fontSize="x-small" color="#3725EA" bgColor="white" _hover={{bgColor:"white"}}>
|
||||
<GrDownload/>
|
||||
Download
|
||||
</Button>
|
||||
</>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
// pb={0}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
minH={"100%"}
|
||||
>
|
||||
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
w={"100%"}
|
||||
>
|
||||
<InputGroup width={300} size="sm">
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Type to search..."
|
||||
rounded="md"
|
||||
focusBorderColor="#3725EA"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Box>
|
||||
<Link to={"#"} style={{ marginRight: "8px" }}>
|
||||
<SecondaryButton
|
||||
leftIcon={<Image me={2} src={VoucherImg} w={"17px"} />}
|
||||
title={"Voucher draft"}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<PrimaryButton
|
||||
leftIcon={<AiOutlineShoppingCart />}
|
||||
title={"Buy vouchers"}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Divider />
|
||||
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
|
||||
<Box>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<BsFilterRight fontSize={"16px"} />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Sort
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Descending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Box>
|
||||
<Box>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<FaArrowUpFromBracket />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Export
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>
|
||||
<Image src={pdfIcon} me={2} /> Export as PDF
|
||||
</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>
|
||||
<Image src={ExcelIcon} me={2} /> Export as Excel
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<LuListFilter fontSize={"16px"} />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Filter
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Descending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Box>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandVoucher;
|
||||
9
src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
Normal file
9
src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
const BuyVoucher = () => {
|
||||
return (
|
||||
<div>BuyVoucher</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuyVoucher
|
||||
@@ -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": (
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{item?.TicketID}
|
||||
</Text>
|
||||
),
|
||||
"Subject": item?.Subject,
|
||||
"Status": (
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
gap={1}
|
||||
bg={
|
||||
item?.Status === "In progress"
|
||||
? "#ebf8ef"
|
||||
: item?.Status === "On hold"
|
||||
? "#f2f9ff"
|
||||
: item?.Status === "Inactive"
|
||||
? "#ffeeed"
|
||||
: "#f8d7da" // Default reddish background for unknown statuses
|
||||
}
|
||||
rounded={"full"}
|
||||
color={
|
||||
item?.Status === "In progress"
|
||||
? "#00A438"
|
||||
: item?.Status === "On hold"
|
||||
? "#62B2FD"
|
||||
: item?.Status === "Inactive"
|
||||
? "#FF2E23"
|
||||
: "#721c24" // Default red text for unknown statuses
|
||||
}
|
||||
py={1.5}
|
||||
px={1}
|
||||
>
|
||||
<GoDotFill />
|
||||
{item?.Status}
|
||||
</Box>
|
||||
),
|
||||
"Last update": item?.LastUpdate,
|
||||
"Support": item?.Support,
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box h={"100%"} p={6}>
|
||||
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
|
||||
<MiniHeader
|
||||
title={"My Requests"}
|
||||
title={"Support & ticket"}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
backButton={true}
|
||||
/>
|
||||
|
||||
<Box bg={"#fff"} rounded={"md"} boxShadow={"md"}>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
w={"100%"}
|
||||
p={4}
|
||||
pb={0}
|
||||
>
|
||||
<InputGroup width={300} size="sm">
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
rounded="md"
|
||||
focusBorderColor="#3725EA"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Box display={"flex"} alignItems={"center"}>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<FaArrowUpFromBracket />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
Export
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>
|
||||
<Image src={PiIdentificationBadge} me={2} /> Export as PDF
|
||||
</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>
|
||||
<Image src={ExcelIcon} me={2} /> Export as Excel
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<PrimaryButton
|
||||
onClick={onOpen}
|
||||
leftIcon={<AddIcon />}
|
||||
title={"Add new ticket"} />
|
||||
</Box>
|
||||
</Box>
|
||||
<hr />
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
showRadioButton={true}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* modal */}
|
||||
<Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Add New ticket</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Box mb={4}>
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Requester
|
||||
</Text>
|
||||
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Subject
|
||||
</Text>
|
||||
<Input size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} />
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Type
|
||||
</Text>
|
||||
<Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
|
||||
<option value='option1'>Option 1</option>
|
||||
<option value='option2'>Option 2</option>
|
||||
<option value='option3'>Option 3</option>
|
||||
</Select>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Priority
|
||||
</Text>
|
||||
<Select size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} placeholder='Select option'>
|
||||
<option value='option1'>Option 1</option>
|
||||
<option value='option2'>Option 2</option>
|
||||
<option value='option3'>Option 3</option>
|
||||
</Select>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={1}>
|
||||
Description
|
||||
</Text>
|
||||
<Textarea size={"sm"} rounded={"md"} fontSize={"sm"} fontWeight={500} resize={"none"} />
|
||||
</Box>
|
||||
|
||||
<HStack py={4} justifyContent={"center"}>
|
||||
<SecondaryButton title={"Cancel"}/>
|
||||
<PrimaryButton title={"Create ticket"} />
|
||||
</HStack>
|
||||
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 = [
|
||||
|
||||
@@ -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 },
|
||||
];
|
||||
|
||||
BIN
src/assets/parkeAvenue.png
Normal file
BIN
src/assets/parkeAvenue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/voucher.png
Normal file
BIN
src/assets/voucher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 914 B |
42
src/styles/multiSlect.css
Normal file
42
src/styles/multiSlect.css
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user