Cards Modal
This commit is contained in:
npcdazai
@@ -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"}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
pt={1}
|
||||
pr={1}
|
||||
>
|
||||
<Text color="#7F56D9" fontSize="small">
|
||||
+
|
||||
<Text color="#7F56D9" fontSize="xs" mb={0}>
|
||||
+{users}
|
||||
</Text>
|
||||
<Text color="#7F56D9" fontSize="small">
|
||||
{users}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
),
|
||||
@@ -451,21 +442,11 @@ const GiftCard = () => {
|
||||
bgColor="#F9F5FF"
|
||||
left="5.9rem"
|
||||
boxShadow="md"
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
pt={1}
|
||||
pr={1}
|
||||
>
|
||||
<Text color="#7F56D9" fontSize="small">
|
||||
+
|
||||
<Text color="#7F56D9" fontSize="xs" mb={0}>
|
||||
+{users}
|
||||
</Text>
|
||||
<Text color="#7F56D9" fontSize="small">
|
||||
{users}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
),
|
||||
@@ -630,21 +611,11 @@ const GiftCard = () => {
|
||||
bgColor="#F9F5FF"
|
||||
left="5.9rem"
|
||||
boxShadow="md"
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
pt={1}
|
||||
pr={1}
|
||||
>
|
||||
<Text color="#7F56D9" fontSize="small">
|
||||
+
|
||||
<Text color="#7F56D9" fontSize="xs" mb={0}>
|
||||
+{users}
|
||||
</Text>
|
||||
<Text color="#7F56D9" fontSize="small">
|
||||
{users}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
),
|
||||
|
||||
@@ -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": (
|
||||
// <Radio colorScheme="purple" value="1">
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
@@ -106,16 +131,8 @@ const DigitalApplicationStatus = () => {
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{/* <Icon
|
||||
as={PiReceipt}
|
||||
boxSize={8}
|
||||
p={1.5}
|
||||
bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
|
||||
rounded={"full"}
|
||||
/> */}
|
||||
{item?.EmpID}
|
||||
</Text>
|
||||
// </Radio>
|
||||
),
|
||||
Name: (
|
||||
<Box display="flex" flexDirection="row" alignItems="center" gap={2}>
|
||||
@@ -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": (
|
||||
<Box display="flex" flexDirection="column" alignItems="center">
|
||||
{item?.LoadStatus === "10,000" ? (
|
||||
@@ -148,35 +162,11 @@ const DigitalApplicationStatus = () => {
|
||||
gap={1}
|
||||
>
|
||||
<Image h="14px" src={redinfo} />
|
||||
<TagLabel textDecoration="underline"> {item?.LoadStatus}</TagLabel>
|
||||
<TagLabel textDecoration="underline">{item?.LoadStatus}</TagLabel>
|
||||
</Tag>
|
||||
) : null}
|
||||
</Box>
|
||||
// <Tag
|
||||
// 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" // default border color if status doesn't match any condition
|
||||
// }`}
|
||||
// p={1}
|
||||
// px={3}
|
||||
// >
|
||||
// <TagLabel>{item?.status}</TagLabel>
|
||||
// </Tag>
|
||||
),
|
||||
|
||||
Action: (
|
||||
<Box
|
||||
display={"flex"}
|
||||
@@ -193,9 +183,12 @@ const DigitalApplicationStatus = () => {
|
||||
color="#027A48"
|
||||
p={1}
|
||||
px={3}
|
||||
// border="1px solid #007E23"
|
||||
onClick={() => {
|
||||
setSelectedAction(item?.Action); // Set action to "Activate card"
|
||||
onOpen();
|
||||
}}
|
||||
>
|
||||
<TagLabel> {item?.Action}</TagLabel>
|
||||
<TagLabel>{item?.Action}</TagLabel>
|
||||
</Tag>
|
||||
) : item?.Action === "Load card" ? (
|
||||
<Tag
|
||||
@@ -206,9 +199,12 @@ const DigitalApplicationStatus = () => {
|
||||
color="#CC4E4B"
|
||||
p={1}
|
||||
px={3}
|
||||
// border="1px solid #007E23"
|
||||
onClick={() => {
|
||||
setSelectedAction(item?.Action); // Set action to "Load card"
|
||||
onOpen();
|
||||
}}
|
||||
>
|
||||
<TagLabel> {item?.Action}</TagLabel>
|
||||
<TagLabel>{item?.Action}</TagLabel>
|
||||
</Tag>
|
||||
) : null}
|
||||
</Box>
|
||||
@@ -217,142 +213,188 @@ const DigitalApplicationStatus = () => {
|
||||
|
||||
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%"}
|
||||
{/* Table and other UI components */}
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponsors`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
{/* Modal for Activate or Load card based on action */}
|
||||
<Modal
|
||||
isCentered
|
||||
onClose={onClose}
|
||||
isOpen={isOpen}
|
||||
motionPreset="slideInBottom"
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
px={3}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
gap={8}
|
||||
alignItems="flex-start"
|
||||
>
|
||||
<Box display="flex" flexDirection="column" alignItems="flex-start">
|
||||
<Text color="#6311CB" fontWeight={400} fontSize="medium">
|
||||
#45152487
|
||||
</Text>
|
||||
<Text color="#8C9198" fontWeight={400} fontSize="small">
|
||||
Order ID
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display="flex" flexDirection="column" alignItems="flex-start">
|
||||
<Text color="#6311CB" fontWeight={400} fontSize="medium">
|
||||
Digital Card
|
||||
</Text>
|
||||
<Text color="#8C9198" fontWeight={400} fontSize="small">
|
||||
Card
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Tag
|
||||
my={1}
|
||||
size={"sm"}
|
||||
bgColor="#3725EA26"
|
||||
borderRadius="13.75px"
|
||||
color="#3725EA"
|
||||
p={2}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
fontWeight={500}
|
||||
>
|
||||
<TagLabel>Order accepted</TagLabel>
|
||||
</Tag>
|
||||
</Box>
|
||||
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
|
||||
<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>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>
|
||||
{selectedAction === "Load card" ? "Load Card" : "Activate Card"}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
{selectedAction === "Activate card" ? (
|
||||
<Box>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<FaArrowUpFromBracket />}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
<Box
|
||||
display={"flex"}
|
||||
flexDirection="row"
|
||||
alignItems="flex-start"
|
||||
gap={1}
|
||||
>
|
||||
<Text color="#A0A0A0" fontWeight={500} fontSize="small">
|
||||
Order Id :
|
||||
</Text>
|
||||
<Text color="#3725EA" fontWeight={500} fontSize="small">
|
||||
#451245
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<FormControl>
|
||||
<FormLabel fontSize={"sm"} mb={0}>
|
||||
Mobile Number
|
||||
</FormLabel>
|
||||
<Box
|
||||
border="1px solid #DCDCDC"
|
||||
display="flex"
|
||||
w="100%"
|
||||
flexDirection="row"
|
||||
alignItems="baseline"
|
||||
justifyContent="center"
|
||||
pt={"8px"}
|
||||
px={"8px"}
|
||||
borderRadius="10px"
|
||||
>
|
||||
<Text fontSize="small">+91</Text>
|
||||
<Input
|
||||
pt={1}
|
||||
placeholder="Please enter your mobile number here"
|
||||
onChange={(e) => setMobileNumber(e.target.value)}
|
||||
maxLength={10}
|
||||
type="tele"
|
||||
size={"sm"}
|
||||
rounded={5}
|
||||
variant="none"
|
||||
/>
|
||||
</Box>
|
||||
</FormControl>
|
||||
<Button
|
||||
onClick={handleGetOtp}
|
||||
variant="link"
|
||||
colorScheme="purple"
|
||||
fontSize={"md"}
|
||||
display={"flex"}
|
||||
justifyContent={"end"}
|
||||
mt={2}
|
||||
textDecoration={"underline"}
|
||||
w={"100%"}
|
||||
>
|
||||
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>
|
||||
Get OTP
|
||||
</Button>
|
||||
{/* <FormLabel fontSize="small">Mobile Number</FormLabel>
|
||||
<VStack spacing={1} align="flex-start" gap={1}>
|
||||
<HStack alignItems="center" border="1px solid #DCDCDC" borderRadius="10px" p={2} h={"50px"}>
|
||||
<Text pt={3} fontSize="medium">+91</Text>
|
||||
<Input
|
||||
placeholder="Please enter your mobile number here"
|
||||
value={mobileNumber}
|
||||
onChange={(e) => setMobileNumber(e.target.value)}
|
||||
maxLength={10}
|
||||
type="tel"
|
||||
variant="none"
|
||||
width="100%"
|
||||
h={"40px"}
|
||||
fontSize="small"
|
||||
/>
|
||||
</HStack>
|
||||
<Button onClick={handleGetOtp} variant="link" colorScheme="purple">
|
||||
Get OTP
|
||||
</Button>
|
||||
</VStack> */}
|
||||
|
||||
<Text fontSize={"md"} fontWeight={500} mt={5}>
|
||||
OTP
|
||||
</Text>
|
||||
<HStack>
|
||||
{otp.map((_, index) => (
|
||||
<Input
|
||||
key={index}
|
||||
id={`otp-input-${index}`}
|
||||
value={otp[index]}
|
||||
onChange={(e) => handleChange(e, index)}
|
||||
maxLength={1}
|
||||
textAlign="center"
|
||||
variant="outline"
|
||||
width="50px"
|
||||
type="tel"
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Box>
|
||||
<Box
|
||||
display={"flex"}
|
||||
flexDirection="row"
|
||||
alignItems="flex-start"
|
||||
gap={1}
|
||||
>
|
||||
<Text color="#A0A0A0" fontWeight={500} fontSize="small">
|
||||
Order Id :
|
||||
</Text>
|
||||
<Text color="#3725EA" fontWeight={500} fontSize="small">
|
||||
#451245
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<FormControl>
|
||||
<FormLabel fontSize={"sm"} mb={0}>
|
||||
Enter Denomination
|
||||
</FormLabel>
|
||||
<Box
|
||||
border="1px solid #DCDCDC"
|
||||
display="flex"
|
||||
w="100%"
|
||||
flexDirection="row"
|
||||
alignItems="baseline"
|
||||
justifyContent="center"
|
||||
pt={"8px"}
|
||||
px={"8px"}
|
||||
borderRadius="10px"
|
||||
>
|
||||
<Text fontSize="small">$</Text>
|
||||
<Input
|
||||
pt={1}
|
||||
placeholder="Enter amount"
|
||||
size={"sm"}
|
||||
rounded={5}
|
||||
variant="none"
|
||||
/>
|
||||
</Box>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button colorScheme="white" color="black" mr={3} onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
bgColor="#6311CB"
|
||||
color="white"
|
||||
_hover={{ bgColor: "#6311CB" }}
|
||||
mr={3}
|
||||
>
|
||||
{selectedAction === "Load card" ? "Load Amount" : "Activate Cards"}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user