Merge branch 'corpstatic' of http://git.wdipl.com/Siddhesh.More/optifii-corporate into corpstatic
This commit is contained in:
priyanshuvish
21
package-lock.json
generated
21
package-lock.json
generated
@@ -18,10 +18,12 @@
|
||||
"axios": "^1.7.2",
|
||||
"bootstrap": "5.3.3",
|
||||
"chart.js": "^4.4.3",
|
||||
"dayjs": "^1.11.13",
|
||||
"dotenv": "^16.4.5",
|
||||
"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",
|
||||
@@ -36,6 +38,7 @@
|
||||
"redux-persist": "^6.0.0",
|
||||
"redux-persist-transform-encrypt": "^5.1.1",
|
||||
"uuid": "^10.0.0",
|
||||
"vanilla-tilt": "^1.8.1",
|
||||
"xlsx": "^0.18.5",
|
||||
"yup": "^1.4.0"
|
||||
},
|
||||
@@ -3196,6 +3199,11 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.13",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
|
||||
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
@@ -4839,6 +4847,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",
|
||||
@@ -6330,6 +6346,11 @@
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/vanilla-tilt": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
|
||||
"integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw=="
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "5.4.8",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
|
||||
|
||||
@@ -20,10 +20,12 @@
|
||||
"axios": "^1.7.2",
|
||||
"bootstrap": "5.3.3",
|
||||
"chart.js": "^4.4.3",
|
||||
"dayjs": "^1.11.13",
|
||||
"dotenv": "^16.4.5",
|
||||
"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",
|
||||
@@ -38,6 +40,7 @@
|
||||
"redux-persist": "^6.0.0",
|
||||
"redux-persist-transform-encrypt": "^5.1.1",
|
||||
"uuid": "^10.0.0",
|
||||
"vanilla-tilt": "^1.8.1",
|
||||
"xlsx": "^0.18.5",
|
||||
"yup": "^1.4.0"
|
||||
},
|
||||
|
||||
@@ -17,9 +17,9 @@ 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())
|
||||
@@ -293,6 +293,7 @@ const GlobalStateProvider = ({ children }) => {
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
const [reportsHistory, setReportsHistory] = useState([
|
||||
{
|
||||
id: 1,
|
||||
@@ -1470,159 +1471,167 @@ 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
|
||||
// supprt and ticket
|
||||
|
||||
const [SupportAndTicket, setSupportAndTicket] = useState([
|
||||
{
|
||||
TicketID: 124589,
|
||||
Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
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.",
|
||||
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.",
|
||||
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.",
|
||||
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.",
|
||||
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.",
|
||||
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.",
|
||||
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.",
|
||||
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.",
|
||||
Subject:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
||||
Status: "In progress",
|
||||
LastUpdate: "Jun 10, 2024",
|
||||
Support: "Reethik thota",
|
||||
@@ -1634,111 +1643,116 @@ const GlobalStateProvider = ({ children }) => {
|
||||
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([
|
||||
{
|
||||
@@ -1851,101 +1865,167 @@ const GlobalStateProvider = ({ children }) => {
|
||||
},
|
||||
]);
|
||||
|
||||
const [walletProgram, setWalletProgram] = useState(
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
walletName: [{ name: "Food", icon: Food }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
walletName: [{ name: "Fuel", icon: Fuel }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
walletName: [{ name: "Gift", icon: Gift }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
walletName: [{ name: "Telecom", icon: telecom }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Saved as draft",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
walletName: [{ name: "Books & periodicals", icon: books }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
walletName: [{ name: "Learning & development", icon: books }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
walletName: [{ name: "Gadget & equipment", icon: gadget }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
walletName: [{ name: "Telecom", icon: telecom }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Pending",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
walletName: [{ name: "Food", icon: Food }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Pending",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson"
|
||||
},
|
||||
]
|
||||
const [walletProgram, setWalletProgram] = useState([
|
||||
{
|
||||
id: 1,
|
||||
walletName: [{ name: "Food", icon: Food }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
walletName: [{ name: "Fuel", icon: Fuel }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
walletName: [{ name: "Gift", icon: Gift }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
walletName: [{ name: "Telecom", icon: telecom }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Saved as draft",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
walletName: [{ name: "Books & periodicals", icon: books }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
walletName: [{ name: "Learning & development", icon: books }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
walletName: [{ name: "Gadget & equipment", icon: gadget }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Active",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
walletName: [{ name: "Telecom", icon: telecom }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Pending",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
walletName: [{ name: "Food", icon: Food }],
|
||||
WalletType: "Prefilled",
|
||||
department: "sales",
|
||||
status: "Pending",
|
||||
WalletAmount: "₹ 50,000",
|
||||
CreatedOn: "Jan 12, 2022",
|
||||
CreatedBy: "Jenny wilson",
|
||||
},
|
||||
]);
|
||||
|
||||
);
|
||||
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",
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
|
||||
|
||||
// Recent report
|
||||
const [recentReports, setRecentReports] = useState([
|
||||
@@ -2086,6 +2166,7 @@ const GlobalStateProvider = ({ children }) => {
|
||||
setEmployeePermissions,
|
||||
reimbursementStatus,
|
||||
setReimbursementStatus,
|
||||
voucher,
|
||||
advanceStatus,
|
||||
setAdvanceStatus,
|
||||
digital,
|
||||
@@ -2099,10 +2180,9 @@ const GlobalStateProvider = ({ children }) => {
|
||||
walletProgram,
|
||||
SupportAndTicket,
|
||||
setSupportAndTicket,
|
||||
recentReports,
|
||||
setRecentReports,
|
||||
recentTransaction,
|
||||
setRecentTransaction,
|
||||
|
||||
recentReports, setRecentReports,
|
||||
recentTransaction, setRecentTransaction
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -1,32 +1,65 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import {
|
||||
Box,
|
||||
Step,
|
||||
StepDescription,
|
||||
StepIcon,
|
||||
StepIndicator,
|
||||
StepNumber,
|
||||
StepSeparator,
|
||||
StepStatus,
|
||||
StepTitle,
|
||||
Stepper,
|
||||
useSteps,
|
||||
Step,
|
||||
StepIndicator,
|
||||
StepStatus,
|
||||
StepIcon,
|
||||
StepNumber,
|
||||
Box,
|
||||
StepTitle,
|
||||
StepDescription,
|
||||
StepSeparator,
|
||||
Button,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
Heading,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import WalletPolicy from "./WalletPolicy";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
|
||||
const steps = [
|
||||
{ title: "Wallet policy", description: "Wallet policy" },
|
||||
{ title: "Approval policy", description: "Approval policy" },
|
||||
{ title: "Submission policy", description: "Submission policy" },
|
||||
{ title: "Define budget", description: "Define budget" },
|
||||
{ title: "Wallet policy", description: "Contact Info" },
|
||||
{ title: "Approval policy", description: "Date & Time" },
|
||||
{ title: "Submission policy", description: "Select Rooms" },
|
||||
{ title: "Define budget", description: "Select Rooms" },
|
||||
];
|
||||
|
||||
const CreateWallet = () => {
|
||||
const { activeStep } = useSteps({
|
||||
index: 1,
|
||||
count: steps.length,
|
||||
});
|
||||
function CreateWallet() {
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm();
|
||||
const [formData, setFormData] = useState({});
|
||||
|
||||
const nextStep = () => {
|
||||
if (activeStep < steps.length - 1) {
|
||||
setActiveStep(activeStep + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (activeStep > 0) {
|
||||
setActiveStep(activeStep - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (data) => {
|
||||
setFormData({ ...formData, ...data });
|
||||
if (activeStep === steps.length - 1) {
|
||||
console.log("Form Submitted:", formData);
|
||||
} else {
|
||||
nextStep();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
|
||||
<Stepper index={activeStep}>
|
||||
{steps.map((step, index) => (
|
||||
<Step key={index}>
|
||||
@@ -34,22 +67,64 @@ const CreateWallet = () => {
|
||||
<StepStatus
|
||||
complete={<StepIcon />}
|
||||
incomplete={<StepNumber />}
|
||||
active={<StepNumber
|
||||
/>}
|
||||
active={<StepNumber />}
|
||||
/>
|
||||
</StepIndicator>
|
||||
|
||||
<Box flexShrink="0">
|
||||
<StepTitle>{step.title}</StepTitle>
|
||||
<StepDescription>{step.description}</StepDescription>
|
||||
{/* <StepDescription>{step.description}</StepDescription> */}
|
||||
</Box>
|
||||
|
||||
<StepSeparator />
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{activeStep === 0 && (
|
||||
<Box mt={4}>
|
||||
<Heading color="#383838" fontWeight="semibold" fontSize="large">
|
||||
Create wallet policy
|
||||
</Heading>
|
||||
|
||||
<WalletPolicy register={register} />
|
||||
</Box>
|
||||
)}
|
||||
{activeStep === 1 && (
|
||||
<Box mt={4}>
|
||||
{/* <FormControl isInvalid={errors.date}>
|
||||
<FormLabel>Date & Time</FormLabel>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
{...register("date", { required: "This is required" })}
|
||||
/>
|
||||
</FormControl> */}
|
||||
</Box>
|
||||
)}
|
||||
{activeStep === 2 && (
|
||||
<Box mt={4}>
|
||||
{/* <FormControl isInvalid={errors.room}>
|
||||
<FormLabel>Select Room</FormLabel>
|
||||
<Input
|
||||
{...register("room", { required: "This is required" })}
|
||||
placeholder="Room Number"
|
||||
/>
|
||||
</FormControl> */}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box mt={4}>
|
||||
<Button onClick={prevStep} disabled={activeStep === 0} mr={4}>
|
||||
Previous
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
{activeStep === steps.length - 1 ? "Submit" : "Next"}
|
||||
</Button>
|
||||
</Box>
|
||||
</form>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default CreateWallet;
|
||||
|
||||
371
src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx
Normal file
371
src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx
Normal file
@@ -0,0 +1,371 @@
|
||||
import {
|
||||
Box,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Select,
|
||||
Tag,
|
||||
TagCloseButton,
|
||||
TagLabel,
|
||||
Textarea,
|
||||
Wrap,
|
||||
WrapItem,
|
||||
Button,
|
||||
useToast,
|
||||
Checkbox,
|
||||
Stack,
|
||||
CheckboxGroup,
|
||||
Text,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
} from "@chakra-ui/react";
|
||||
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 = [
|
||||
{
|
||||
label: "An hour from now",
|
||||
value: dayjs().add(1, "hour").format("ddd, MMM D, h:mm A"),
|
||||
},
|
||||
{
|
||||
label: "Tomorrow",
|
||||
value: dayjs()
|
||||
.add(1, "day")
|
||||
.set("hour", 21)
|
||||
.minute(0)
|
||||
.format("ddd, MMM D, h:mm A"),
|
||||
},
|
||||
{
|
||||
label: "Next week",
|
||||
value: dayjs()
|
||||
.add(7, "day")
|
||||
.set("hour", 21)
|
||||
.minute(0)
|
||||
.format("ddd, MMM D, h:mm A"),
|
||||
},
|
||||
];
|
||||
|
||||
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]);
|
||||
} else {
|
||||
toast({
|
||||
title: "Duplicate entry",
|
||||
description: "This time has already been selected.",
|
||||
status: "warning",
|
||||
duration: 2000,
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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));
|
||||
};
|
||||
|
||||
const handleSelectChange = (event) => {
|
||||
const value = event.target.value;
|
||||
if (value && !selectedDepartments.includes(value)) {
|
||||
setSelectedDepartments([...selectedDepartments, value]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveTag = (department) => {
|
||||
setSelectedDepartments(selectedDepartments.filter((d) => d !== department));
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FormControl>
|
||||
<Box
|
||||
bgColor="#F6F0FF"
|
||||
boxShadow="md"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
gap={3}
|
||||
p={2}
|
||||
>
|
||||
<Box display="flex" flexDirection="column">
|
||||
<FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
|
||||
Wallet name
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...register("walletPolicy", { required: "This is required" })}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexDirection="column">
|
||||
<FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
|
||||
Description
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
{...register("description", { required: "This is required" })}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexDirection="column">
|
||||
<FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
|
||||
Department
|
||||
</FormLabel>
|
||||
<Select placeholder=" " onChange={handleSelectChange} value="">
|
||||
{departments.map((department, index) => (
|
||||
<option key={index} value={department}>
|
||||
{department}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Wrap mt={4}>
|
||||
{selectedDepartments.map((department, index) => (
|
||||
<WrapItem key={index}>
|
||||
<Tag
|
||||
size="md"
|
||||
borderRadius="full"
|
||||
variant="subtle"
|
||||
colorScheme="purple"
|
||||
>
|
||||
<TagLabel>{department}</TagLabel>
|
||||
<TagCloseButton
|
||||
onClick={() => handleRemoveTag(department)}
|
||||
/>
|
||||
</Tag>
|
||||
</WrapItem>
|
||||
))}
|
||||
</Wrap>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<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}>
|
||||
{selectedTimes.map((time, index) => (
|
||||
<Tag
|
||||
key={index}
|
||||
size="lg"
|
||||
colorScheme="teal"
|
||||
borderRadius="full"
|
||||
m={1}
|
||||
>
|
||||
<TagLabel>{time}</TagLabel>
|
||||
<TagCloseButton onClick={() => handleRemove(time)} />
|
||||
</Tag>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export default OutOfPoket;
|
||||
53
src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx
Normal file
53
src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
|
||||
import React, { useState } from "react";
|
||||
import OutOfPoket from "./OutOfPoket";
|
||||
const WalletPolicy = ({ register }) => {
|
||||
const [selectedValue, setSelectedValue] = useState("1");
|
||||
|
||||
const renderContent = () => {
|
||||
switch (selectedValue) {
|
||||
case "1":
|
||||
return <OutOfPoket register={register} />;
|
||||
case "2":
|
||||
return <Box>Add department content</Box>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<RadioGroup onChange={setSelectedValue} value={selectedValue}>
|
||||
<Stack spacing={4} direction="row">
|
||||
<Box
|
||||
p={1}
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
borderRadius="5px"
|
||||
bgColor="#F4F4F4"
|
||||
border={selectedValue === "1" && "1px solid #3725EA"}
|
||||
>
|
||||
<Radio size="sm" colorScheme="blue" value="1">
|
||||
Out of pocket/cash
|
||||
</Radio>
|
||||
</Box>
|
||||
<Box
|
||||
p={2}
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
borderRadius="5px"
|
||||
bgColor="#F4F4F4"
|
||||
border={selectedValue === "2" && "1px solid #3725EA"}
|
||||
>
|
||||
<Radio size="sm" colorScheme="blue" value="2">
|
||||
Mileage
|
||||
</Radio>
|
||||
</Box>
|
||||
</Stack>
|
||||
</RadioGroup>
|
||||
<Box mt={4}>{renderContent()}</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WalletPolicy;
|
||||
283
src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
Normal file
283
src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
Normal file
@@ -0,0 +1,283 @@
|
||||
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>
|
||||
|
||||
<Link
|
||||
to={"/brand-voucher/buy-voucher"}
|
||||
style={{ marginRight: "8px" }}
|
||||
>
|
||||
<PrimaryButton
|
||||
leftIcon={<AiOutlineShoppingCart />}
|
||||
title={"Buy vouchers"}
|
||||
/>
|
||||
</Link>
|
||||
</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;
|
||||
83
src/Pages/OptiFiiGifsAndVouchers/BuySingleVouchers.jsx
Normal file
83
src/Pages/OptiFiiGifsAndVouchers/BuySingleVouchers.jsx
Normal file
@@ -0,0 +1,83 @@
|
||||
// import React, { useState } from "react";
|
||||
// import { Box, Image, Text, Grid, Button, Stack } from "@chakra-ui/react";
|
||||
// import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
// import temp1 from "../../assets/temp1.png";
|
||||
|
||||
// const cards = [
|
||||
// {
|
||||
// id: 1,
|
||||
// image: temp1,
|
||||
// // title: "You Deserve a Treat",
|
||||
// // description: "Thank you for everything!",
|
||||
// },
|
||||
// ];
|
||||
|
||||
// const BuySingleVouchers = () => {
|
||||
// const [selectedCard, setSelectedCard] = useState(null);
|
||||
|
||||
// const handleCardSelect = (card) => {
|
||||
// // setSelectedCard(card);
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <Grid templateColumns="repeat(3, 1fr)" gap={6}>
|
||||
// {cards.map((card) => (
|
||||
// <Box
|
||||
// bgImage={`url(${card.image})`}
|
||||
// bgSize="cover"
|
||||
// bgPosition="center"
|
||||
// key={card.id}
|
||||
// border="1px"
|
||||
// borderColor="gray.200"
|
||||
// borderRadius="md"
|
||||
// overflow="hidden"
|
||||
// cursor="pointer"
|
||||
// onClick={() => handleCardSelect(card)}
|
||||
// >
|
||||
// {/* <Box p={4}>
|
||||
// <Text fontWeight="bold">{card.title}</Text>
|
||||
// <Text>{card.description}</Text>
|
||||
// </Box> */}
|
||||
// </Box>
|
||||
// ))}
|
||||
// <PreviewCard selectedCard={selectedCard} />
|
||||
// </Grid>
|
||||
// );
|
||||
// };
|
||||
|
||||
// const PreviewCard = ({ selectedCard }) => {
|
||||
// if (!selectedCard) {
|
||||
// return <Text>Select a card to preview</Text>;
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <Box
|
||||
// bgColor="#F3F3F9"
|
||||
// h="100%"
|
||||
// {...OPACITY_ON_LOAD}
|
||||
// overflowX={"scroll"}
|
||||
// border="1px"
|
||||
// borderColor="gray.200"
|
||||
// borderRadius="md"
|
||||
// p={4}
|
||||
// >
|
||||
// <Text fontWeight="bold" mb={4}>
|
||||
// Preview:
|
||||
// </Text>
|
||||
// <Image src={selectedCard.image} alt={selectedCard.title} />
|
||||
// <Text fontWeight="bold">{selectedCard.title}</Text>
|
||||
// <Text>{selectedCard.description}</Text>
|
||||
// </Box>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default BuySingleVouchers;
|
||||
import React from 'react'
|
||||
|
||||
const BuySingleVouchers = () => {
|
||||
return (
|
||||
<div>BuySingleVouchers</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuySingleVouchers
|
||||
161
src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
Normal file
161
src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import { Box, Button, Image, Text } from "@chakra-ui/react";
|
||||
import React, { useState } from "react";
|
||||
import parkeAvenue from "../../assets/parkeAvenue.png";
|
||||
import bewakoof from "../../assets/bewakoof.png";
|
||||
import hm from "../../assets/HM.png";
|
||||
import nike from "../../assets/nike.png";
|
||||
import amazon from "../../assets/amazon.png";
|
||||
import myTrip from "../../assets/myTrip.png";
|
||||
import myGlam from "../../assets/myGlam.png";
|
||||
import Cards from "./Tabs/AllVouchers";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import {
|
||||
Tabs,
|
||||
TabList,
|
||||
TabPanels,
|
||||
Tab,
|
||||
TabPanel,
|
||||
Icon,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
FaTv,
|
||||
FaShoppingCart,
|
||||
FaUtensils,
|
||||
FaTshirt,
|
||||
FaPlane,
|
||||
FaHeart,
|
||||
} from "react-icons/fa";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const brands = [
|
||||
{
|
||||
id: 1,
|
||||
img: parkeAvenue,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: bewakoof,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: hm,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: nike,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: amazon,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: myTrip,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: myGlam,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: nike,
|
||||
},
|
||||
];
|
||||
|
||||
const BuyVoucher = () => {
|
||||
const [selectedCard, setSelectedCard] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSelectCard = (index) => {
|
||||
setSelectedCard(index);
|
||||
};
|
||||
|
||||
const handleProceed = () => {
|
||||
if (selectedCard !== null) {
|
||||
navigate("/brand-voucher/preview");
|
||||
}
|
||||
};
|
||||
|
||||
const tabData = [
|
||||
{ label: "All", icon: FaTv, content: <Cards handleSelectCard={handleSelectCard} handleProceed={handleProceed} selectedCard={selectedCard} setSelectedCard={setSelectedCard} navigate={navigate} /> },
|
||||
{ label: "Electronics", icon: FaTv, content: "Content for Electronics" },
|
||||
{
|
||||
label: "Ecommerce",
|
||||
icon: FaShoppingCart,
|
||||
content: "Content for Ecommerce",
|
||||
},
|
||||
{ label: "Lifestyle", icon: FaHeart, content: "Content for Lifestyle" },
|
||||
{
|
||||
label: "Food & Beverages",
|
||||
icon: FaUtensils,
|
||||
content: "Content for Food & Beverages",
|
||||
},
|
||||
{ label: "Clothing", icon: FaTshirt, content: "Content for Clothing" },
|
||||
{ label: "Travel", icon: FaPlane, content: "Content for Travel" },
|
||||
{ label: "Lifestyle", icon: FaHeart, content: "Content for Lifestyle" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
bgColor="#F3F3F9"
|
||||
h="100%"
|
||||
{...OPACITY_ON_LOAD}
|
||||
p={4}
|
||||
overflowX={"scroll"}
|
||||
>
|
||||
<Box p={4} bgColor="#FFFFFF" boxShadow="md" w="100%" mb={4}>
|
||||
<Text color="#222222" fontWeight={600} fontSize="small">
|
||||
Choose from popular brand
|
||||
</Text>
|
||||
|
||||
<Box display="flex" gap={8} flexDirection="row" alignItems="center">
|
||||
{brands.map((val) => {
|
||||
return (
|
||||
<>
|
||||
<Image h="45px" src={val.img} />
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box p={4} bgColor="#FFFFFF" boxShadow="md" w="100%" h="100%">
|
||||
<Text color="#222222" fontSize="small" fontWeight={600}>
|
||||
Shop by category
|
||||
</Text>
|
||||
<Tabs variant="soft-rounded" colorScheme="purple" align="start">
|
||||
<TabList display="flex" flexDirection="row" gap={4}>
|
||||
{tabData.map((tab, index) => (
|
||||
<Tab fontSize="small" key={index}>
|
||||
<Icon as={tab.icon} mr={2} />
|
||||
{tab.label}
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
<Box w="100%" border="0.5px solid #6311CB5E" mt="2" />
|
||||
{/* Mapping through tabData to create tab panels */}
|
||||
<TabPanels>
|
||||
{tabData.map((tab, index) => (
|
||||
<TabPanel key={index}>
|
||||
<p>{tab.content}</p>
|
||||
</TabPanel>
|
||||
))}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
|
||||
<Button
|
||||
bgColor="#6311CB"
|
||||
color="white"
|
||||
px="3rem"
|
||||
_hover={{ bgColor: "#6311CB" }}
|
||||
onClick={handleProceed}
|
||||
mt={"3rem"}
|
||||
>
|
||||
Proceed to add
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BuyVoucher;
|
||||
126
src/Pages/OptiFiiGifsAndVouchers/Preview.jsx
Normal file
126
src/Pages/OptiFiiGifsAndVouchers/Preview.jsx
Normal file
@@ -0,0 +1,126 @@
|
||||
import {
|
||||
Box,
|
||||
Icon,
|
||||
Image,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tabs,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useState } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import {
|
||||
FaTv,
|
||||
FaShoppingCart,
|
||||
FaUtensils,
|
||||
FaTshirt,
|
||||
FaHeart,
|
||||
} from "react-icons/fa";
|
||||
import AllTemp from "./Tabs/AllTemp";
|
||||
|
||||
const Preview = () => {
|
||||
const [selectedCard, setSelectedCard] = useState(null);
|
||||
|
||||
const handleCardSelect = (card) => {
|
||||
setSelectedCard(card);
|
||||
};
|
||||
|
||||
const tabData = [
|
||||
{
|
||||
label: "All",
|
||||
icon: FaTv,
|
||||
content: (
|
||||
<AllTemp
|
||||
selectedCard={selectedCard}
|
||||
handleCardSelect={handleCardSelect}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ label: "Thank you", icon: FaTv, content: "Content for Electronics" },
|
||||
{
|
||||
label: "Best wishes",
|
||||
icon: FaShoppingCart,
|
||||
content: "Content for Ecommerce",
|
||||
},
|
||||
{
|
||||
label: "Happy birthday",
|
||||
icon: FaHeart,
|
||||
content: "Content for Lifestyle",
|
||||
},
|
||||
{
|
||||
label: "Congratulations",
|
||||
icon: FaUtensils,
|
||||
content: "Content for Food & Beverages",
|
||||
},
|
||||
{ label: "Thank you", icon: FaTshirt, content: "Content for Clothing" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
bgColor="#F3F3F9"
|
||||
h="100%"
|
||||
{...OPACITY_ON_LOAD}
|
||||
p={4}
|
||||
overflowX={"scroll"}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
flexDirection="row"
|
||||
>
|
||||
<Box display="flex" w="60%">
|
||||
<Tabs w="90%" variant="soft-rounded" colorScheme="purple" align="start">
|
||||
<TabList overflow="scroll" display="flex" flexDirection="row" gap={1}>
|
||||
{tabData.map((tab, index) => (
|
||||
<Tab fontSize="small" key={index} whiteSpace="nowrap">
|
||||
<Icon as={tab.icon} mr={2} />
|
||||
{tab.label}
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
<Box w="100%" border="0.5px solid #6311CB5E" mt="2" />
|
||||
{/* Mapping through tabData to create tab panels */}
|
||||
<TabPanels>
|
||||
{tabData.map((tab, index) => (
|
||||
<TabPanel key={index}>
|
||||
<p>{tab.content}</p>
|
||||
</TabPanel>
|
||||
))}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
bgColor="#F3F3F9"
|
||||
h="40%"
|
||||
{...OPACITY_ON_LOAD}
|
||||
overflowX={"scroll"}
|
||||
border="1px"
|
||||
borderColor="gray.200"
|
||||
borderRadius="md"
|
||||
p={4}
|
||||
>
|
||||
<Text fontWeight="bold" mb={4}>
|
||||
Preview:
|
||||
</Text>
|
||||
{selectedCard ? (
|
||||
<>
|
||||
<Image
|
||||
src={selectedCard.image}
|
||||
alt={selectedCard.title}
|
||||
/>
|
||||
<Text fontWeight="bold" mt={2}>
|
||||
{selectedCard.title}
|
||||
</Text>
|
||||
<Text>{selectedCard.description}</Text>
|
||||
</>
|
||||
) : (
|
||||
<Text>No card selected</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Preview;
|
||||
|
||||
29
src/Pages/OptiFiiGifsAndVouchers/Previews.jsx
Normal file
29
src/Pages/OptiFiiGifsAndVouchers/Previews.jsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
|
||||
const PreviewCard = ({ selectedCard }) => {
|
||||
if (!selectedCard) {
|
||||
return <Text>Select a card to preview</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
bgColor="#F3F3F9"
|
||||
h="100%"
|
||||
{...OPACITY_ON_LOAD}
|
||||
overflowX={"scroll"}
|
||||
border="1px"
|
||||
borderColor="gray.200"
|
||||
borderRadius="md"
|
||||
p={4}
|
||||
>
|
||||
<Text fontWeight="bold" mb={4}>
|
||||
Preview:
|
||||
</Text>
|
||||
<Image src={selectedCard.image} alt={selectedCard.title} />
|
||||
<Text fontWeight="bold">{selectedCard.title}</Text>
|
||||
<Text>{selectedCard.description}</Text>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Previews;
|
||||
40
src/Pages/OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx
Normal file
40
src/Pages/OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
import temp1 from "../../../assets/temp1.png";
|
||||
import temp2 from "../../../assets/temp2.png";
|
||||
import { Box, Grid } from "@chakra-ui/react";
|
||||
|
||||
const cards = [
|
||||
{
|
||||
id: 1,
|
||||
image: temp1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: temp2,
|
||||
},
|
||||
];
|
||||
|
||||
const AllTemp = ({ selectedCard, handleCardSelect }) => {
|
||||
return (
|
||||
<Grid w="100%" templateColumns="repeat(2, 1fr)" gap={6}>
|
||||
{cards.map((card) => (
|
||||
<Box
|
||||
key={card.id}
|
||||
bgImage={`url(${card.image})`}
|
||||
bgSize="cover"
|
||||
bgPosition="center"
|
||||
border="2px"
|
||||
borderColor={selectedCard?.id === card.id ? "blue.500" : "gray.200"}
|
||||
borderRadius="md"
|
||||
overflow="hidden"
|
||||
cursor="pointer"
|
||||
onClick={() => handleCardSelect(card)}
|
||||
height="200px"
|
||||
w="100%"
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default AllTemp;
|
||||
239
src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx
Normal file
239
src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx
Normal file
@@ -0,0 +1,239 @@
|
||||
import { Box, HStack, Text, VStack, Link , Grid} from "@chakra-ui/layout";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { OPACITY_ON_LOAD, SLIDE_IN_BOTTOM } from "../../../Layout/animations";
|
||||
import amazonVoucher from "../../../assets/amazonlogo.png";
|
||||
import hAndm from "../../../assets/hAndM.png";
|
||||
import bewakoof from "../../../assets/bewakoof.png";
|
||||
import myGlam from "../../../assets/myGlam.png";
|
||||
import { Image } from "@chakra-ui/image";
|
||||
import { Button } from "@chakra-ui/button";
|
||||
import VanillaTilt from "vanilla-tilt";
|
||||
import myTrip from "../../../assets/myTrip.png";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Radio, RadioGroup } from "@chakra-ui/react";
|
||||
import parkeAvenue from "../../../assets/parkAven.png";
|
||||
const brandData = [
|
||||
{
|
||||
brandLogo: amazonVoucher,
|
||||
brandName: "Amazon",
|
||||
brandColor: "#000000",
|
||||
brandColor1: "#000000",
|
||||
cardWorth: "30% cashback",
|
||||
dateTime: "Aug 17 - 30",
|
||||
caption: "lorem ipsum dolor sit amet dolor sit ",
|
||||
patternColor: "",
|
||||
},
|
||||
{
|
||||
brandLogo: hAndm,
|
||||
brandName: "H&M",
|
||||
brandColor: "#EC1515",
|
||||
brandColor1: "#EC1515",
|
||||
cardWorth: "30% cashback",
|
||||
textColor: "#FFFFFF",
|
||||
capColor: "#E6E6E6",
|
||||
dateTime: "Aug 17 - 30",
|
||||
caption: "lorem ipsum dolor sit amet dolor sit ",
|
||||
patternColor: "",
|
||||
},
|
||||
{
|
||||
brandLogo: myGlam,
|
||||
brandName: "My Glam",
|
||||
brandColor: "#EEEEEE",
|
||||
brandColor1: "#888888",
|
||||
cardWorth: "30% cashback",
|
||||
textColor: "#000000",
|
||||
capColor: "#737373",
|
||||
dateTime: "Aug 17 - 30",
|
||||
caption: "lorem ipsum dolor sit amet dolor sit ",
|
||||
patternColor: "",
|
||||
},
|
||||
{
|
||||
brandLogo: bewakoof,
|
||||
brandName: "Amazon",
|
||||
brandColor: "#FCC700",
|
||||
brandColor1: "#E89600",
|
||||
cardWorth: "30% cashback",
|
||||
textColor: "#000000",
|
||||
capColor: "#171717",
|
||||
dateTime: "Aug 17 - 30",
|
||||
caption: "lorem ipsum dolor sit amet dolor sit ",
|
||||
patternColor: "",
|
||||
},
|
||||
{
|
||||
brandLogo: myTrip,
|
||||
brandName: "My Trip",
|
||||
brandColor: "#EC1515",
|
||||
brandColor1: "#EC1515",
|
||||
cardWorth: "30% cashback",
|
||||
textColor: "#FFFFFF",
|
||||
capColor: "#E6E6E6",
|
||||
dateTime: "Aug 17 - 30",
|
||||
caption: "lorem ipsum dolor sit amet dolor sit ",
|
||||
patternColor: "",
|
||||
},
|
||||
{
|
||||
brandLogo: myGlam,
|
||||
brandName: "My Glam",
|
||||
brandColor: "#EEEEEE",
|
||||
brandColor1: "#888888",
|
||||
cardWorth: "30% cashback",
|
||||
textColor: "#000000",
|
||||
capColor: "#737373",
|
||||
dateTime: "Aug 17 - 30",
|
||||
caption: "lorem ipsum dolor sit amet dolor sit ",
|
||||
patternColor: "",
|
||||
},
|
||||
{
|
||||
brandLogo: bewakoof,
|
||||
brandName: "Amazon",
|
||||
brandColor: "#FCC700",
|
||||
brandColor1: "#E89600",
|
||||
cardWorth: "30% cashback",
|
||||
textColor: "#000000",
|
||||
capColor: "#171717",
|
||||
dateTime: "Aug 17 - 30",
|
||||
caption: "lorem ipsum dolor sit amet dolor sit ",
|
||||
patternColor: "",
|
||||
},
|
||||
{
|
||||
brandLogo: parkeAvenue,
|
||||
brandName: "Park Avenue",
|
||||
brandColor: "#000000",
|
||||
brandColor1: "#000000",
|
||||
cardWorth: "30% cashback",
|
||||
dateTime: "Aug 17 - 30",
|
||||
caption: "lorem ipsum dolor sit amet dolor sit ",
|
||||
patternColor: "",
|
||||
},
|
||||
];
|
||||
|
||||
const MyVoucher = ({handleSelectCard,handleProceed, selectedCard , setSelectedCard }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<RadioGroup onChange={handleSelectCard} value={selectedCard}>
|
||||
<Grid
|
||||
{...SLIDE_IN_BOTTOM}
|
||||
mt={2}
|
||||
gap={4}
|
||||
w="100%"
|
||||
h="100%"
|
||||
// gridTemplateColumns="repeat(auto-fit, minmax(250px, 1fr))"
|
||||
gridTemplateColumns="repeat(4, 1fr)"
|
||||
justifyContent="center"
|
||||
>
|
||||
{brandData?.map(
|
||||
(
|
||||
{
|
||||
brandColor,
|
||||
brandLogo,
|
||||
cardWorth,
|
||||
brandName,
|
||||
caption,
|
||||
dateTime,
|
||||
brandColor1,
|
||||
textColor,
|
||||
capColor,
|
||||
},
|
||||
index
|
||||
) => {
|
||||
const tiltRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const node = tiltRef.current;
|
||||
if (node) {
|
||||
VanillaTilt.init(node, {
|
||||
max: 13,
|
||||
speed: 700,
|
||||
glare: true,
|
||||
scale: 1.05,
|
||||
"max-glare": 0.5,
|
||||
onEnter: () => {
|
||||
node.style.zIndex = 10; // Bring to top on hover
|
||||
},
|
||||
onLeave: () => {
|
||||
node.style.zIndex = 1; // Reset zIndex after hover
|
||||
},
|
||||
});
|
||||
}
|
||||
return () => {
|
||||
if (node && node.vanillaTilt) {
|
||||
node.vanillaTilt.destroy();
|
||||
}
|
||||
};
|
||||
}, [tiltRef]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
cursor="grab"
|
||||
key={index}
|
||||
ref={tiltRef}
|
||||
overflow="hidden"
|
||||
shadow="md"
|
||||
w="100%"
|
||||
h="100%"
|
||||
bg={`linear-gradient(179.86deg, ${brandColor} 0.12%, ${brandColor1} 231.77%)`}
|
||||
borderRadius="5px"
|
||||
p={1}
|
||||
>
|
||||
<HStack
|
||||
pb={1}
|
||||
justifyContent="space-between"
|
||||
pt={1}
|
||||
ps={1}
|
||||
pe={2}
|
||||
>
|
||||
<Radio value={index} />
|
||||
{/* <Image src={optifiiLogo} /> */}
|
||||
</HStack>
|
||||
<VStack
|
||||
color={brandLogo === "hAndm" ? "#E2231A" : "#fff"}
|
||||
gap={1}
|
||||
>
|
||||
<Image src={brandLogo} h="43px" />
|
||||
<Text
|
||||
fontWeight={600}
|
||||
color={`${textColor}`}
|
||||
as="span"
|
||||
fontSize="sm"
|
||||
>
|
||||
30% cashback
|
||||
</Text>
|
||||
{/* <Text as={"span"} fontWeight={700} fontSize={"medium"}>
|
||||
$ {cardWorth}
|
||||
</Text> */}
|
||||
<Text
|
||||
align="center"
|
||||
as="span"
|
||||
fontWeight={600}
|
||||
fontSize="x-small"
|
||||
color={`${capColor}`}
|
||||
>
|
||||
{caption}
|
||||
</Text>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
w="100%"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Text color={`${textColor}`} fontSize="x-small">
|
||||
{brandName}
|
||||
</Text>
|
||||
<Text color={`${textColor}`} fontSize="x-small">
|
||||
{dateTime}
|
||||
</Text>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</Grid>
|
||||
</RadioGroup>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default MyVoucher;
|
||||
@@ -28,6 +28,12 @@ import EmployeesView from "../Pages/ManageHumanResource/EmployeesView";
|
||||
import EmployeesViewRecentReports from "../Pages/ManageHumanResource/EmployeesViewRecentReports";
|
||||
import EmployeesViewRecentTransaction from "../Pages/ManageHumanResource/EmployeesViewRecentTransaction";
|
||||
import EmployeesViewRecentReportsView from "../Pages/ManageHumanResource/EmployeesViewRecentReportsView";
|
||||
import BrandVoucher from "../Pages/OptiFiiGifsAndVouchers/BrandVoucher";
|
||||
// import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
|
||||
// import AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
|
||||
import BuyVoucher from "../Pages/OptiFiiGifsAndVouchers/BuyVoucher";
|
||||
import BuySingleVouchers from "../Pages/OptiFiiGifsAndVouchers/BuySingleVouchers";
|
||||
import Preview from "../Pages/OptiFiiGifsAndVouchers/Preview";
|
||||
export const RouteLink = [
|
||||
{ path: "/", Component: Dashbaord },
|
||||
{ path: "/expenses", Component: Expenses },
|
||||
@@ -40,7 +46,10 @@ export const RouteLink = [
|
||||
{ path: "/reimbursement-request", Component: ReimbursementRequest },
|
||||
{ path: "/reimbursement-request-view", Component: ReimbursementRequestView },
|
||||
{ path: "/advance-expense-request", Component: AdvanceExpenseRequest },
|
||||
{ path: "/advance-expense-request-view", Component: AdvanceExpenseRequestView },
|
||||
{
|
||||
path: "/advance-expense-request-view",
|
||||
Component: AdvanceExpenseRequestView,
|
||||
},
|
||||
{ path: "/optiFii-benefit", Component: OptiFiiTaxBenefit },
|
||||
{ path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },
|
||||
{ path: "/reports", Component: Report },
|
||||
@@ -61,9 +70,16 @@ 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: "/brand-voucher/buy-voucher", Component: BuyVoucher },
|
||||
{ path: "/brand-voucher/buy-voucher-card", Component: BuySingleVouchers },
|
||||
{ path: "/brand-voucher/preview", Component: Preview },
|
||||
];
|
||||
|
||||
BIN
src/assets/.png
Normal file
BIN
src/assets/.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/HM.png
Normal file
BIN
src/assets/HM.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
src/assets/amazon.png
Normal file
BIN
src/assets/amazon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src/assets/amazonlogo.png
Normal file
BIN
src/assets/amazonlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/bewakoof.png
Normal file
BIN
src/assets/bewakoof.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/hAndM.png
Normal file
BIN
src/assets/hAndM.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/myGlam.png
Normal file
BIN
src/assets/myGlam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/myTrip.png
Normal file
BIN
src/assets/myTrip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
src/assets/nike.png
Normal file
BIN
src/assets/nike.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/parkAven.png
Normal file
BIN
src/assets/parkAven.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
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/temp1.png
Normal file
BIN
src/assets/temp1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
BIN
src/assets/temp2.png
Normal file
BIN
src/assets/temp2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 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