diff --git a/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx b/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx index 23644d1..f55a9ba 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx @@ -17,6 +17,7 @@ import { Tag, TagLabel, Text, + useDisclosure, VStack, } from "@chakra-ui/react"; import { @@ -216,21 +217,11 @@ const GiftCard = () => { bgColor="#F9F5FF" left="5.9rem" boxShadow="md" + justifyContent={"center"} > - - - + + + +{users} - - {users} - - ), @@ -451,21 +442,11 @@ const GiftCard = () => { bgColor="#F9F5FF" left="5.9rem" boxShadow="md" + justifyContent={"center"} > - - - + + + +{users} - - {users} - - ), @@ -630,21 +611,11 @@ const GiftCard = () => { bgColor="#F9F5FF" left="5.9rem" boxShadow="md" + justifyContent={"center"} > - - - + + + +{users} - - {users} - - ), diff --git a/src/Pages/OptiFiiGifsAndVouchers/id/DigitalApplication.jsx b/src/Pages/OptiFiiGifsAndVouchers/id/DigitalApplication.jsx index 4eda1ab..e4065eb 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/id/DigitalApplication.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/id/DigitalApplication.jsx @@ -15,6 +15,8 @@ import { Box, Button, Divider, + FormControl, + FormLabel, HStack, Icon, Image, @@ -29,6 +31,7 @@ import { Tag, TagLabel, Text, + useDisclosure, VStack, } from "@chakra-ui/react"; import React, { useContext, useEffect, useState } from "react"; @@ -64,41 +67,63 @@ import pdfIcon from "../../../assets/pdfIcon.svg"; import ExcelIcon from "../../../assets/ExcelIcon.svg"; import redinfo from "../../../assets/redinfo.png"; import pooja from "../../../assets/poojaShah.png"; - +import { + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, +} from "@chakra-ui/react"; const DigitalApplicationStatus = () => { const { ApplicationStatus } = useContext(GlobalStateContext); const [isLoading, setIsLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(""); - + const { isOpen, onOpen, onClose } = useDisclosure(); + const [mobileNumber, setMobileNumber] = useState(""); + const [otp, setOtp] = useState(new Array(4).fill("")); + const [selectedAction, setSelectedAction] = 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 + setIsLoading(false); }, 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 ] + // Table Header const tableHeadRow = [ "Emp ID", "Name", "Email address/Mobile number", - // "Mobile number", "Member since", "Load Status", "Action", ]; - // const extractedArray = reportsHistory.map((item)=>({ })) + const handleChange = (e, index) => { + const value = e.target.value; + if (/^[0-9]$/.test(value)) { + const newOtp = [...otp]; + newOtp[index] = value; + setOtp(newOtp); + if (index < 3 && value) { + document.getElementById(`otp-input-${index + 1}`).focus(); + } + } + }; + + const handleGetOtp = () => { + alert("OTP sent to " + mobileNumber); + }; + + // Extracting the array for the table data const extractedArray = ApplicationStatus.map((item, index) => ({ "Emp ID": ( - // { alignItems={"center"} fontSize={"xs"} > - {/* */} {item?.EmpID} - // ), Name: ( @@ -127,9 +144,6 @@ const DigitalApplicationStatus = () => { ), "Email address/Mobile number": item?.emailAddressMobile, "Member since": item?.MemberSince, - Grade: item?.Grade, - Department: item?.Department, - Role: item?.Role, "Load Status": ( {item?.LoadStatus === "10,000" ? ( @@ -148,35 +162,11 @@ const DigitalApplicationStatus = () => { gap={1} > - {item?.LoadStatus} + {item?.LoadStatus} ) : null} - // - // {item?.status} - // ), - Action: ( { color="#027A48" p={1} px={3} - // border="1px solid #007E23" + onClick={() => { + setSelectedAction(item?.Action); // Set action to "Activate card" + onOpen(); + }} > - {item?.Action} + {item?.Action} ) : item?.Action === "Load card" ? ( { color="#CC4E4B" p={1} px={3} - // border="1px solid #007E23" + onClick={() => { + setSelectedAction(item?.Action); // Set action to "Load card" + onOpen(); + }} > - {item?.Action} + {item?.Action} ) : null} @@ -217,142 +213,188 @@ const DigitalApplicationStatus = () => { return ( - + + {/* Modal for Activate or Load card based on action */} + - - - - - #45152487 - - - Order ID - - - - - Digital Card - - - Card - - - - - Order accepted - - - - - - - - } - rightIcon={} - fontSize={"xs"} - color={"gray.700"} - variant="outline" - size={"sm"} - me={2} - > - Sort - - - Ascending - Descending - Recently Viewed - Recently Added - - - - + + + + {selectedAction === "Load card" ? "Load Card" : "Activate Card"} + + + + {selectedAction === "Activate card" ? ( - - } - rightIcon={} - fontSize={"xs"} - colorScheme="gray" - color={"gray.700"} - variant="outline" - size={"sm"} - me={2} + + + Order Id : + + + #451245 + + + + + + + Mobile Number + + + +91 + setMobileNumber(e.target.value)} + maxLength={10} + type="tele" + size={"sm"} + rounded={5} + variant="none" + /> + + + - - } - rightIcon={} - fontSize={"xs"} - color={"gray.700"} - variant="outline" - size={"sm"} - me={2} - > - Filter - - - Ascending - Descending - Recently Viewed - Recently Added - - + Get OTP + + {/* Mobile Number + + + +91 + setMobileNumber(e.target.value)} + maxLength={10} + type="tel" + variant="none" + width="100%" + h={"40px"} + fontSize="small" + /> + + + */} + + + OTP + + + {otp.map((_, index) => ( + handleChange(e, index)} + maxLength={1} + textAlign="center" + variant="outline" + width="50px" + type="tel" + /> + ))} + + - - - - - + ) : ( + + + + Order Id : + + + #451245 + + + + + + + Enter Denomination + + + $ + + + + + + )} + + + + + + + ); };