From 44fb1591d864ab8cf38e8e42a323281c8cd4aee3 Mon Sep 17 00:00:00 2001 From: npcdazai Date: Fri, 4 Oct 2024 13:27:32 +0530 Subject: [PATCH] Brand Vouchers --- .../OptiFiiGifsAndVouchers/BrandVoucher.jsx | 6 +- .../Payment/PaymentaVoucher.jsx | 239 +++++++++++------- .../OptiFiiGifsAndVouchers/SelectEmployee.jsx | 203 +++++++++++++-- src/assets/icons/tick.png | Bin 0 -> 3229 bytes 4 files changed, 338 insertions(+), 110 deletions(-) create mode 100644 src/assets/icons/tick.png diff --git a/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx b/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx index 43c812e..ed410c0 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx @@ -58,6 +58,7 @@ const BrandVoucher = () => { const { voucher } = useContext(GlobalStateContext); const [isLoading, setIsLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(""); + const [selectedRadio, setSelectedRadio] = useState([]); useEffect(() => { // Set isLoading to true @@ -86,7 +87,6 @@ const BrandVoucher = () => { const extractedArray = voucher.map((item, index) => ({ "Sr. no": ( - { > {item?.id} - ), "Date & time": item?.DateTime, "Employees/department": item?.EmployeesDepartment, @@ -274,6 +273,9 @@ const BrandVoucher = () => { tableHeadRow={tableHeadRow} data={extractedArray} isLoading={isLoading} + showRadioButton={true} + setSelectedRadio={setSelectedRadio} + selectedRadio={selectedRadio} /> diff --git a/src/Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher.jsx b/src/Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher.jsx index 985be56..9f234dc 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher.jsx @@ -6,90 +6,138 @@ import { AccordionPanel, AccordionIcon, } from "@chakra-ui/react"; -import React from "react"; +import React, { useState } from "react"; +import { + FormControl, + FormLabel, + Input, + InputGroup, + InputLeftElement, + IconButton, +} from "@chakra-ui/react"; +import { CalendarIcon } from "@chakra-ui/icons"; import { OPACITY_ON_LOAD } from "../../../Layout/animations"; import Amazonlogo from "../../../assets/amazon.png"; +import { useToast } from "@chakra-ui/react"; + +// Mock Data +const bankDetails = [ + { label: "Name at the bank", value: "Reethik thota" }, + { label: "Account number", value: "458754215787441" }, + { label: "Bank name", value: "Bank of India" }, + { label: "IFSC code", value: "TGY4875845" }, +]; + +const vouchers = [ + { + id: 1, + logo: Amazonlogo, + name: "Amazon voucher", + validity: "20 June", + amount: "₹ 25000", + count: 3, + }, +]; + const PaymentVoucher = () => { + const [selectedDate, setSelectedDate] = useState(""); + + const toast = useToast(); + + const handleDateChange = (e) => { + setSelectedDate(e.target.value); + }; return ( - + Payment - +

- + Show Order Summary + + ₹ 50,000 +

- + {vouchers.map((voucher) => ( - - - - - 3 - - - - - - Amazon voucher - - - - Validity: - - - 20 June - + + + + + {voucher.count} + - - - ₹ 25000 - - + + + {voucher.name} + + + + Validity: + + + {voucher.validity} + + + + + + {voucher.amount} + + + ))} - Total @@ -98,37 +146,56 @@ const PaymentVoucher = () => { ₹ 50000 - - - Make the payment on the below bank account details: - - - - Name at the bank - Reethik thota - - - Account number - 458754215787441 - - - Bank name - Bank of India - - - IFSC code - Reethik thota - - - - + + + Make the payment on the below bank account details: + + + {bankDetails.map((detail, index) => ( + + + {detail.label} + + + {detail.value} + + + ))} + + + + + Schedule order + + + Schedule order + + + + + + + + + + *Once Payment is done kindly share the UTR Code + + + ); }; diff --git a/src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx b/src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx index a6668cd..8605e7c 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx @@ -50,18 +50,40 @@ import blackmen from "../../assets/blackmen.png"; import koreanpfp from "../../assets/koreanboi.png"; import asian from "../../assets/asain.png"; import goth from "../../assets/goth.png"; -import Payment from "./Payment/PaymentaVoucher" +import Payment from "./Payment/PaymentaVoucher"; +import { useToast } from "@chakra-ui/react"; +import tick from "../../assets/icons/tick.png"; + +const OverlayOne = () => ( + +); + const Employees = () => { const { employees } = useContext(GlobalStateContext); const [isLoading, setIsLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const { isOpen, onOpen, onClose } = useDisclosure(); + const [scrollBehavior, setScrollBehavior] = useState("inside"); + const [overlay, setOverlay] = React.useState(); + const [selectedRadio, setSelectedRadio] = useState([]); + const toast = useToast(); const btnRef = useRef(); + const { isOpen: isModalOpen, onOpen: onModalOpen, onClose: onModalClose, } = useDisclosure(); + + const { + isOpen: isPaymentOpen, + onOpen: onPaymentOpen, + onClose: onPaymentClose, + } = useDisclosure(); + const navigate = useNavigate(); useEffect(() => { @@ -72,19 +94,30 @@ const Employees = () => { return () => clearTimeout(timer); }, []); - const tableHeadRow = ["Emp ID", "Name", "Email Address", "Department", "Designation"]; + const tableHeadRow = [ + "Emp ID", + "Name", + "Email Address", + "Department", + "Designation", + ]; const extractedArray = employees.map((item) => ({ "Emp ID": ( - + // {item?.EmpID} - + // ), Name: ( - Dan Abramov + Dan Abramov {item?.Name} ), @@ -96,8 +129,20 @@ const Employees = () => { my={1} size={"sm"} borderRadius="full" - colorScheme={item?.status === "Active" ? "green" : item?.status === "Inactive" ? "red" : "gray"} - border={`1px solid ${item?.status === "Active" ? "green" : item?.status === "Inactive" ? "red" : "gray"}`} + colorScheme={ + item?.status === "Active" + ? "green" + : item?.status === "Inactive" + ? "red" + : "gray" + } + border={`1px solid ${ + item?.status === "Active" + ? "green" + : item?.status === "Inactive" + ? "red" + : "gray" + }`} p={1} px={3} > @@ -107,11 +152,25 @@ const Employees = () => { Action: ( - } bg={"transparent"} /> + } + bg={"transparent"} + /> - }>Edit - }>Delete - } onClick={() => navigate("/employees/view")}> + }> + Edit + + } + > + Delete + + } + onClick={() => navigate("/employees/view")} + > View @@ -122,12 +181,24 @@ const Employees = () => { return ( - + - } rightIcon={}> + } + rightIcon={} + > Sort @@ -153,7 +224,11 @@ const Employees = () => { /> - } rightIcon={}> + } + rightIcon={} + > Filter @@ -166,17 +241,43 @@ const Employees = () => { - + - - + - + Summary of order @@ -201,7 +302,12 @@ const Employees = () => { - + ₹ 10,000 + + + + + + + {overlay} + + + + + + + + Your Voucher request has been submitted + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + consectetur adipiscing elit. + + + + + + diff --git a/src/assets/icons/tick.png b/src/assets/icons/tick.png new file mode 100644 index 0000000000000000000000000000000000000000..33b0ba691e8a9af078fcd9d425e53aca431f48d8 GIT binary patch literal 3229 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 P00000NkvXXu0mjfMd~_0 literal 0 HcmV?d00001