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: (
-
+
{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: (