Merge branch 'dev' of http://git.wdipl.com/Siddhesh.More/optifii-corporate into corpstatic
This commit is contained in:
YasinShaikh123
41
src/Components/Cards/BlueCard.jsx
Normal file
41
src/Components/Cards/BlueCard.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { Box, Stack, Text, } from '@chakra-ui/react'
|
||||
import React from 'react'
|
||||
import { MdGroups } from 'react-icons/md'
|
||||
|
||||
function BlueCard() {
|
||||
return (
|
||||
<Box
|
||||
backgroundColor={item.backgroundColor}
|
||||
borderRadius="xl"
|
||||
>
|
||||
<Box bg="#fff" borderRadius="xl" p={4} h="115px">
|
||||
<Stack direction={["column", "row"]} color={item.backgroundColor}>
|
||||
<Text as="span">
|
||||
<MdGroups />
|
||||
</Text>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
|
||||
{item.count}
|
||||
</Text>
|
||||
</Box>
|
||||
<Stack
|
||||
direction={["column", "row"]}
|
||||
color="#fff"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Text as="span">
|
||||
<MdGroups />
|
||||
</Text>
|
||||
<Text fontSize="sm" m={0} py={2}>
|
||||
<Link mb={0}>{item.linkText}</Link>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default BlueCard
|
||||
@@ -46,7 +46,9 @@ const CustomBreadcrumb = () => {
|
||||
breadcrumbs.push({ path: currentPath, title: menuItem.title });
|
||||
} else {
|
||||
// For nested paths without direct match, create a custom breadcrumb title
|
||||
const customTitle = part.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
const customTitle = part
|
||||
.replace(/-/g, " ")
|
||||
.replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
breadcrumbs.push({ path: currentPath, title: customTitle });
|
||||
}
|
||||
});
|
||||
@@ -68,7 +70,7 @@ const CustomBreadcrumb = () => {
|
||||
mt={1}
|
||||
borderBottom={"1px dashed #DEE2E6"}
|
||||
>
|
||||
<Button
|
||||
{/* <Button
|
||||
cursor={"pointer"}
|
||||
variant="ghost"
|
||||
pt={1.5}
|
||||
@@ -79,29 +81,28 @@ const CustomBreadcrumb = () => {
|
||||
size={"xs"}
|
||||
as={"span"}
|
||||
>
|
||||
Home
|
||||
</Button>
|
||||
Dashboard
|
||||
</Button> */}
|
||||
{breadcrumbs.map((item, index) => (
|
||||
<React.Fragment key={index}>
|
||||
|
||||
<Text size={"md"} as={"span"}>
|
||||
{/* <MinusIcon fontStyle={4} color={"#1A202C"}/> */}
|
||||
/
|
||||
</Text>
|
||||
<Link to={item.path}>
|
||||
<Button
|
||||
cursor={"pointer"}
|
||||
variant="ghost"
|
||||
pt={0.5}
|
||||
pb={0.5}
|
||||
ps={2}
|
||||
pe={2}
|
||||
rounded={"full"}
|
||||
size={"xs"}
|
||||
as={"span"}
|
||||
>
|
||||
{item.title}
|
||||
</Button></Link>
|
||||
<Button
|
||||
cursor={"pointer"}
|
||||
variant="ghost"
|
||||
pt={0.5}
|
||||
pb={0.5}
|
||||
ps={2}
|
||||
pe={2}
|
||||
rounded={"full"}
|
||||
size={"xs"}
|
||||
as={"span"}
|
||||
>
|
||||
{item.title}
|
||||
</Button>
|
||||
</Link>
|
||||
<Text size={"md"} as={"span"}>
|
||||
/
|
||||
</Text>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -20,7 +20,7 @@ const Header = () => {
|
||||
{navLinks.map((link, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
href={`#${link.replace(/\s+/g, '-').toLowerCase()}`} // Links are placeholders
|
||||
href={`#${link.replace(/\s+/g, '-').toLowerCase()}`}
|
||||
color={"#000000"}
|
||||
fontWeight="500"
|
||||
fontSize="sm"
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
Box, Text, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps,
|
||||
StepIcon, StepTitle, Divider, Button, HStack, IconButton, Flex,
|
||||
StepTitle, Divider, Button, HStack, IconButton, Flex,
|
||||
useDisclosure
|
||||
} from '@chakra-ui/react';
|
||||
import Header from './Header';
|
||||
import onboarding_bg from "../../assets/onboarding_bg.svg";
|
||||
import onboarding_bg from "../../assets/onboarding_bg.webp";
|
||||
import { ArrowBackIcon, ArrowForwardIcon, CheckIcon, Icon } from '@chakra-ui/icons';
|
||||
import { FaUser, FaBuilding, FaClipboard, FaUserTie, FaBoxOpen } from 'react-icons/fa';
|
||||
import OnboardingYourDetails from './OnboardingYourDetails';
|
||||
@@ -97,7 +97,7 @@ const handleNext = () => {
|
||||
<Header />
|
||||
<Box
|
||||
w={'100%'}
|
||||
minH={'92vh'}
|
||||
minH="calc(100vh - 62px)"
|
||||
bgImage={`url(${onboarding_bg})`}
|
||||
bgSize={'cover'}
|
||||
bgPosition={'center'}
|
||||
@@ -128,7 +128,21 @@ const handleNext = () => {
|
||||
py={6}
|
||||
px={4}
|
||||
borderRadius={'md'}
|
||||
minH={"82vh"}
|
||||
maxH={"82.9vh"}
|
||||
overflowY={"auto"}
|
||||
sx={{
|
||||
/* Custom scrollbar styling */
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '6px',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
backgroundColor: '#6311CB',
|
||||
borderRadius: '6px',
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
backgroundColor: '#F6F0FF',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'}>
|
||||
@@ -141,6 +155,7 @@ const handleNext = () => {
|
||||
orientation="vertical"
|
||||
h="400"
|
||||
gap="0"
|
||||
my={"5"}
|
||||
sx={{ '--stepper-accent-color': '#6311CB' }}
|
||||
>
|
||||
{steps.map((step, index) => (
|
||||
@@ -184,7 +199,21 @@ const handleNext = () => {
|
||||
my={5}
|
||||
boxShadow={'md'}
|
||||
zIndex={2}
|
||||
minH={"82vh"}
|
||||
maxH="calc(82vh - 0px)"
|
||||
overflowY={"auto"}
|
||||
sx={{
|
||||
/* Custom scrollbar styling */
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '6px',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
backgroundColor: '#6311CB',
|
||||
borderRadius: '6px',
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
backgroundColor: '#F6F0FF',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<HStack justifyContent={"end"}>
|
||||
|
||||
|
||||
@@ -27,6 +27,8 @@ const OnboardingSelectPackageModalChild = ({isOpen,onClose}) => {
|
||||
}, 3000);
|
||||
};
|
||||
return (
|
||||
|
||||
|
||||
<>
|
||||
<Modal isOpen={isOpen} onClose={onClose} isCentered>
|
||||
<ModalOverlay />
|
||||
|
||||
183
src/Pages/OptiFiiExpense/Grid/ActiveCards.jsx
Normal file
183
src/Pages/OptiFiiExpense/Grid/ActiveCards.jsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import { Box, Button, Image, Text } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import Food from "../../../assets/icons/Food.png";
|
||||
import Fuel from "../../../assets/icons/Fuel.png";
|
||||
import Gift from "../../../assets/icons/gift.png";
|
||||
import Telecom from "../../../assets/icons/telecom.png";
|
||||
import { SlOptionsVertical } from "react-icons/sl";
|
||||
|
||||
const data = [
|
||||
{
|
||||
icon: Food,
|
||||
name: "Food",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "Active",
|
||||
},
|
||||
{
|
||||
icon: Fuel,
|
||||
name: "Fuel",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "Active",
|
||||
},
|
||||
{
|
||||
icon: Gift,
|
||||
name: "Gift",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "Active",
|
||||
},
|
||||
{
|
||||
icon: Telecom,
|
||||
name: "Telecom",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "Active",
|
||||
},
|
||||
];
|
||||
|
||||
const ActiveCards = () => {
|
||||
return (
|
||||
<Box display="flex" flexDirection="row" alignItems="center" gap={2}>
|
||||
{data.map((item) => {
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
key={item.name}
|
||||
p={2}
|
||||
bg="white"
|
||||
justifyContent="space-between"
|
||||
alignItems="flex-start"
|
||||
bgColor="#3725EA0D"
|
||||
boxShadow="md"
|
||||
gap={2}
|
||||
w="100%"
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="flex-start"
|
||||
gap={2}
|
||||
justifyContent="space-between"
|
||||
w="100%"
|
||||
>
|
||||
<Image src={item?.icon} h="50.75px" />
|
||||
<Text
|
||||
// h="28.75px"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="flex-start"
|
||||
fontSize="small"
|
||||
w="100%"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{item?.name}
|
||||
<Text fontSize="x-small" fontWeight={400}>
|
||||
{item?.subtitle}
|
||||
</Text>
|
||||
<Button
|
||||
fontSize="xx-small"
|
||||
color="#00A438"
|
||||
bgColor="#00A43814"
|
||||
border="0.5px solid #00A438"
|
||||
h="23px"
|
||||
>
|
||||
{item?.Status}
|
||||
</Button>
|
||||
</Text>
|
||||
|
||||
<Button bgColor="#3725EA0D" borderRadius="50%">
|
||||
<SlOptionsVertical color="#3725EA" />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box w="100%" border={"0.5px solid #3725EA"} />
|
||||
<Box w="100%" px={3}>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={2}
|
||||
w="100%"
|
||||
>
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Wallet type
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.walletType}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Department
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.department}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box w="100%" display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Wallet amount
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.walletamount}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={2}
|
||||
w="100%"
|
||||
>
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Created by
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.CreatedBy}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Approved by
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.ApprovedBy}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActiveCards;
|
||||
183
src/Pages/OptiFiiExpense/Grid/Decline.jsx
Normal file
183
src/Pages/OptiFiiExpense/Grid/Decline.jsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import { Box, Button, Image, Text } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import Food from "../../../assets/icons/Food.png";
|
||||
import Fuel from "../../../assets/icons/Fuel.png";
|
||||
import Gift from "../../../assets/icons/gift.png";
|
||||
import Telecom from "../../../assets/icons/telecom.png";
|
||||
import { SlOptionsVertical } from "react-icons/sl";
|
||||
|
||||
const data = [
|
||||
{
|
||||
icon: Food,
|
||||
name: "Food",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "DECLINED",
|
||||
},
|
||||
{
|
||||
icon: Fuel,
|
||||
name: "Fuel",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "DECLINED",
|
||||
},
|
||||
{
|
||||
icon: Gift,
|
||||
name: "Gift",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "DECLINED",
|
||||
},
|
||||
{
|
||||
icon: Telecom,
|
||||
name: "Telecom",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "DECLINED",
|
||||
},
|
||||
];
|
||||
|
||||
const Decline = () => {
|
||||
return (
|
||||
<Box display="flex" flexDirection="row" alignItems="center" gap={2}>
|
||||
{data.map((item) => {
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
key={item.name}
|
||||
p={2}
|
||||
bg="white"
|
||||
justifyContent="space-between"
|
||||
alignItems="flex-start"
|
||||
bgColor="#3725EA0D"
|
||||
boxShadow="md"
|
||||
gap={2}
|
||||
w="100%"
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="flex-start"
|
||||
gap={2}
|
||||
justifyContent="space-between"
|
||||
w="100%"
|
||||
>
|
||||
<Image src={item?.icon} h="50.75px" />
|
||||
<Text
|
||||
// h="28.75px"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="flex-start"
|
||||
fontSize="small"
|
||||
w="100%"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{item?.name}
|
||||
<Text fontSize="x-small" fontWeight={400}>
|
||||
{item?.subtitle}
|
||||
</Text>
|
||||
<Button
|
||||
fontSize="xx-small"
|
||||
color="#EE1B24"
|
||||
bgColor="#00A43814"
|
||||
border="0.5px solid #EE1B24"
|
||||
h="23px"
|
||||
>
|
||||
{item?.Status}
|
||||
</Button>
|
||||
</Text>
|
||||
|
||||
<Button bgColor="#3725EA0D" borderRadius="50%">
|
||||
<SlOptionsVertical color="#3725EA" />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box w="100%" border={"0.5px solid #3725EA"} />
|
||||
<Box w="100%" px={3}>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={2}
|
||||
w="100%"
|
||||
>
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Wallet type
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.walletType}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Department
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.department}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box w="100%" display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Wallet amount
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.walletamount}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={2}
|
||||
w="100%"
|
||||
>
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Created by
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.CreatedBy}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Approved by
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.ApprovedBy}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Decline;
|
||||
185
src/Pages/OptiFiiExpense/Grid/PendingApproval.jsx
Normal file
185
src/Pages/OptiFiiExpense/Grid/PendingApproval.jsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import { Box, Button, Image, Text } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import Food from "../../../assets/icons/Food.png";
|
||||
import Fuel from "../../../assets/icons/Fuel.png";
|
||||
import Gift from "../../../assets/icons/gift.png";
|
||||
import Telecom from "../../../assets/icons/telecom.png";
|
||||
import { SlOptionsVertical } from "react-icons/sl";
|
||||
|
||||
const data = [
|
||||
{
|
||||
icon: Food,
|
||||
name: "Food",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "PENDING FOR APPROVAL",
|
||||
},
|
||||
{
|
||||
icon: Fuel,
|
||||
name: "Fuel",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "PENDING FOR APPROVAL",
|
||||
},
|
||||
{
|
||||
icon: Gift,
|
||||
name: "Gift",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "PENDING FOR APPROVAL",
|
||||
},
|
||||
{
|
||||
icon: Telecom,
|
||||
name: "Telecom",
|
||||
subtitle: "Created on 12 June 2024",
|
||||
walletType: "Prefilled",
|
||||
department: "Sales",
|
||||
walletamount: "₹ 50,000",
|
||||
CreatedBy: "Kartikey Gautam",
|
||||
ApprovedBy: "Manav Sain",
|
||||
Status: "PENDING FOR APPROVAL",
|
||||
},
|
||||
];
|
||||
|
||||
const PendingApproval = () => {
|
||||
return (
|
||||
<Box display="flex" flexDirection="row" alignItems="center" gap={2}>
|
||||
{data.map((item) => {
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
key={item.name}
|
||||
p={2}
|
||||
bg="white"
|
||||
justifyContent="space-between"
|
||||
alignItems="flex-start"
|
||||
bgColor="#3725EA0D"
|
||||
boxShadow="md"
|
||||
gap={2}
|
||||
w="100%"
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="flex-start"
|
||||
gap={2}
|
||||
justifyContent="space-between"
|
||||
w="100%"
|
||||
>
|
||||
<Image src={item?.icon} h="50.75px" />
|
||||
<Text
|
||||
// h="28.75px"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="flex-start"
|
||||
fontSize="small"
|
||||
w="100%"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{item?.name}
|
||||
<Text fontSize="x-small" fontWeight={400}>
|
||||
{item?.subtitle}
|
||||
</Text>
|
||||
<Button
|
||||
fontSize="xx-small"
|
||||
color="#E0BC01"
|
||||
bgColor="#E0BC0114"
|
||||
border="0.5px solid #E0BC01"
|
||||
h="23px"
|
||||
w="135px"
|
||||
p={2}
|
||||
>
|
||||
{item?.Status}
|
||||
</Button>
|
||||
</Text>
|
||||
|
||||
<Button bgColor="#3725EA0D" borderRadius="50%">
|
||||
<SlOptionsVertical color="#3725EA" />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box w="100%" border={"0.5px solid #3725EA"} />
|
||||
<Box w="100%" px={3}>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={2}
|
||||
w="100%"
|
||||
>
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Wallet type
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.walletType}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Department
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.department}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box w="100%" display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Wallet amount
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.walletamount}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={2}
|
||||
w="100%"
|
||||
>
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Created by
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.CreatedBy}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Text fontSize="x-small" color="#848B99">
|
||||
Approved by
|
||||
</Text>
|
||||
<Text fontSize="x-small" fontWeight="bold">
|
||||
{item?.ApprovedBy}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default PendingApproval;
|
||||
@@ -228,6 +228,8 @@ const OptiFiiExpenseDashboard = () => {
|
||||
</GridItem>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
|
||||
<Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4}>
|
||||
{gridItemsData.map((item, index) => (
|
||||
<GridItem key={index} backgroundColor="#fff" borderRadius="xl">
|
||||
|
||||
@@ -1,15 +1,154 @@
|
||||
import { Box } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Icon,
|
||||
Checkbox,
|
||||
Tag,
|
||||
TagLabel,
|
||||
Text,
|
||||
Image,
|
||||
} 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 { RiDeleteBin5Line } from "react-icons/ri";
|
||||
import { AiOutlineEdit } from "react-icons/ai";
|
||||
import { FaRegEye } from "react-icons/fa";
|
||||
import { PiReceipt } from "react-icons/pi";
|
||||
import { MdOutlineNoFood } from "react-icons/md";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
|
||||
const ReimbursementRequest = () => {
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
const { employees } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
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 = [
|
||||
"Select",
|
||||
"Sr. No",
|
||||
"Name",
|
||||
"Status",
|
||||
"Email Address",
|
||||
"Mobile number",
|
||||
"Grade",
|
||||
"Department",
|
||||
"Role",
|
||||
"Action",
|
||||
];
|
||||
|
||||
// const extractedArray = reportsHistory.map((item)=>({ }))
|
||||
|
||||
const extractedArray = employees.map((item, index) => ({
|
||||
"Sr. No": (
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
"Name": item?.Name,
|
||||
"Email Address": item?.emailAddress,
|
||||
"Mobile number": item?.mobileNumber,
|
||||
Grade: item?.Grade,
|
||||
Department: item?.Department,
|
||||
Role: item?.Role,
|
||||
Status: (
|
||||
<HStack>
|
||||
<Image
|
||||
borderRadius='full'
|
||||
boxSize='40px'
|
||||
src='https://bit.ly/dan-abramov'
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={1}>
|
||||
Pooja Shah
|
||||
</Text>
|
||||
</HStack>
|
||||
),
|
||||
Action: (
|
||||
|
||||
<Button
|
||||
_hover={{ color: "gray.900", bg: "gray.300" }}
|
||||
transition={"0.3s"}
|
||||
onClick={() => navigate("/reimbursement-request-view")}
|
||||
size={"xs"}
|
||||
bg={"#6311CB"}
|
||||
py={1}
|
||||
fontWeight={400}
|
||||
px={3}
|
||||
color="#fff"
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box h={"100%"} p={6}>
|
||||
<MiniHeader
|
||||
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
|
||||
{/* <MiniHeader
|
||||
title={"My Requests"}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
backButton={true}
|
||||
/>
|
||||
/> */}
|
||||
|
||||
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"} mb={4}>
|
||||
<HStack justifyContent={"space-between"}>
|
||||
<HStack alignItems={"start"} spacing={4}>
|
||||
<Box bg={"#d7d3fb"} p={2} rounded={"full"}>
|
||||
<MdOutlineNoFood color="#3725EA" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontSize={"sm"} mb={1}>
|
||||
Food
|
||||
</Text>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={0}>
|
||||
Created by - Reethik Thota
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={1}>
|
||||
Created by - Reethik Thota
|
||||
</Text>
|
||||
<Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
|
||||
₹ 50,000
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
showRadioButton={true}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
275
src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx
Normal file
275
src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx
Normal file
@@ -0,0 +1,275 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
VStack,
|
||||
Icon,
|
||||
Checkbox,
|
||||
Tag,
|
||||
TagLabel,
|
||||
Text,
|
||||
Image,
|
||||
useDisclosure,
|
||||
Alert,
|
||||
CloseButton,
|
||||
AlertDescription,
|
||||
} 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 { RiDeleteBin5Line } from "react-icons/ri";
|
||||
import { AiOutlineEdit } from "react-icons/ai";
|
||||
import { LiaFileInvoiceSolid } from "react-icons/lia";
|
||||
import { PiReceipt } from "react-icons/pi";
|
||||
import { MdOutlineNoFood } from "react-icons/md";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import { IoMdCheckmark } from "react-icons/io";
|
||||
import { RxCross2 } from "react-icons/rx";
|
||||
import PrimaryButton from "../../Components/Buttons/PrimaryButton"
|
||||
import SecondaryButton from "../../Components/Buttons/SecondaryButton"
|
||||
|
||||
const ReimbursementRequestView = () => {
|
||||
|
||||
const [alertStatus, setAlertStatus] = useState(null);
|
||||
|
||||
const handleApprove = () => {
|
||||
setAlertStatus('success');
|
||||
};
|
||||
|
||||
const handleReject = () => {
|
||||
setAlertStatus('error');
|
||||
};
|
||||
|
||||
const { employees } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
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 = [
|
||||
"Select",
|
||||
"Sr. No",
|
||||
"Name",
|
||||
"Email Address",
|
||||
"Mobile number",
|
||||
"Grade",
|
||||
"Department",
|
||||
"Role",
|
||||
"Action",
|
||||
];
|
||||
|
||||
// const extractedArray = reportsHistory.map((item)=>({ }))
|
||||
|
||||
const extractedArray = employees.map((item, index) => ({
|
||||
"Sr. No": (
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
Name: item?.Name,
|
||||
"Email Address": item?.emailAddress,
|
||||
"Mobile number": item?.mobileNumber,
|
||||
Grade: item?.Grade,
|
||||
Department: item?.Department,
|
||||
Role: item?.Role,
|
||||
Action: (
|
||||
<HStack
|
||||
>
|
||||
<Box p={2} bg={"#ebe0f8"} rounded={"full"}>
|
||||
<LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
|
||||
</Box>
|
||||
<Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
|
||||
Invoice243
|
||||
</Text>
|
||||
</HStack>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
|
||||
{/* <MiniHeader
|
||||
title={"My Requests"}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
backButton={true}
|
||||
/> */}
|
||||
{alertStatus === 'success' && (
|
||||
<Alert status="success" bg="#6311CB" color="#fff" rounded={"md"} mb={4}>
|
||||
<Box>
|
||||
<HStack>
|
||||
<IoMdCheckmark size={16} />
|
||||
<Text fontSize="xs" mb={0} fontWeight={500}>
|
||||
Approved by giftryt
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{alertStatus === 'error' && (
|
||||
<Alert status="error" bg="#EE1B24" color="#fff" rounded={"md"} mb={4}>
|
||||
<Box>
|
||||
<HStack>
|
||||
<RxCross2 size={16} />
|
||||
<Text fontSize="xs" mb={0} fontWeight={500}>
|
||||
Rejected by giftryt
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
<Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
|
||||
<HStack width={"100%"} mb={8}>
|
||||
<Box bg={"#e5f6eb"} border={"1px solid #00A438"} px={4} py={1} rounded={"md"} h={14} flex={1}>
|
||||
<HStack>
|
||||
<IoMdCheckmark color="#00A438" />
|
||||
<Text color={"#00A438"} fontSize={"sm"} mb={1} fontWeight={500}>
|
||||
Approved
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text color={"#667085"} fontSize={"xs"} fontWeight={400} mb={0}>
|
||||
By Sr. Manager
|
||||
</Text>
|
||||
</Box>
|
||||
<HStack bg={"#00A438"} px={4} py={1} rounded={"md"} h={14} justifyContent={"start"} flex={1}>
|
||||
<Text color={"#fff"} fontSize={"sm"} mb={0} fontWeight={400}>
|
||||
In progress
|
||||
</Text>
|
||||
</HStack>
|
||||
<VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
|
||||
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
|
||||
Pending
|
||||
</Text>
|
||||
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
By Sr. Manager
|
||||
</Text>
|
||||
</VStack>
|
||||
<VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
|
||||
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
|
||||
Pending
|
||||
</Text>
|
||||
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
By Sr. Manager
|
||||
</Text>
|
||||
</VStack>
|
||||
<VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
|
||||
<Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
|
||||
Pending
|
||||
</Text>
|
||||
<Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
By Sr. Manager
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
</HStack>
|
||||
|
||||
<HStack justifyContent={"space-between"} mb={6}>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={1}>
|
||||
Report number : 1254587841
|
||||
</Text>
|
||||
<Text color={"#252C32"} fontSize={"sm"} mb={0} fontWeight={500}>
|
||||
Reimbursement report 2024
|
||||
</Text>
|
||||
</Box>
|
||||
<Box >
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={1}>
|
||||
Amount to be reimbursed
|
||||
</Text>
|
||||
<Text color={"#252C32"} fontSize={"sm"} fontWeight={500} mb={0}>
|
||||
₹ 50,000
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
<HStack justifyContent={"space-between"} mb={6}>
|
||||
<Box>
|
||||
<Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
|
||||
Submitted by
|
||||
</Text>
|
||||
<HStack mb={4} alignItems={"start"}>
|
||||
<Image
|
||||
borderRadius='full'
|
||||
boxSize='40px'
|
||||
src='https://bit.ly/dan-abramov'
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
<Box>
|
||||
<Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
|
||||
Pooja Shah
|
||||
</Text>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
poojashah @wdipl.com
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
<Text color={"#252C32"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
Duration - 10 June - 28 June
|
||||
</Text>
|
||||
</Box>
|
||||
<Box textAlign={"end"}>
|
||||
<Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
|
||||
Pending approval
|
||||
</Text>
|
||||
<HStack mb={4} alignItems={"start"} >
|
||||
<Box>
|
||||
<Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
|
||||
Manav sain
|
||||
</Text>
|
||||
<Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
|
||||
manavsain@wdipl.com
|
||||
</Text>
|
||||
</Box>
|
||||
<Image
|
||||
borderRadius='full'
|
||||
boxSize='40px'
|
||||
src='https://bit.ly/dan-abramov'
|
||||
alt='Dan Abramov'
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
showRadioButton={true}
|
||||
/>
|
||||
|
||||
<HStack justifyContent={"end"} my={4} spacing={4}>
|
||||
<SecondaryButton title="Reject" onClick={handleReject} />
|
||||
<PrimaryButton title="Approve" onClick={handleApprove} />
|
||||
</HStack>
|
||||
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReimbursementRequestView;
|
||||
@@ -22,6 +22,8 @@ import React, { useContext, useEffect, useState } from "react";
|
||||
import MiniHeader from "../../Components/MiniHeader";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import NormalTable from "../../Components/DataTable/NormalTable";
|
||||
import { CiBoxList } from "react-icons/ci";
|
||||
import { BsFillGridFill } from "react-icons/bs";
|
||||
import {
|
||||
AddIcon,
|
||||
CalendarIcon,
|
||||
@@ -30,7 +32,13 @@ import {
|
||||
SearchIcon,
|
||||
ViewIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
import { MdFilterList, MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
|
||||
import {
|
||||
MdFilterList,
|
||||
MdNotificationsNone,
|
||||
MdOutlineHeadsetMic,
|
||||
} from "react-icons/md";
|
||||
import { MdOutlineUnarchive } from "react-icons/md";
|
||||
|
||||
import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
|
||||
import { AiOutlineEdit } from "react-icons/ai";
|
||||
import { FaRegEye } from "react-icons/fa";
|
||||
@@ -44,12 +52,24 @@ 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 ExcelIcon from "../../assets/ExcelIcon.svg";
|
||||
import ActiveCards from "./Grid/ActiveCards";
|
||||
import PendingApproval from "./Grid/PendingApproval";
|
||||
import Decline from "./Grid/Decline";
|
||||
import {
|
||||
Tabs,
|
||||
TabList,
|
||||
Tab,
|
||||
TabIndicator,
|
||||
TabPanels,
|
||||
TabPanel,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
const WalletProgram = () => {
|
||||
const { walletProgram } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [showGrid, setShowGird] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Set isLoading to true
|
||||
@@ -66,110 +86,77 @@ const WalletProgram = () => {
|
||||
|
||||
// ===============================[ Table Header ]
|
||||
const tableHeadRow = [
|
||||
"Emp ID",
|
||||
"Name",
|
||||
"Email Address",
|
||||
"Mobile number",
|
||||
"Grade",
|
||||
"ID",
|
||||
"Wallet Name",
|
||||
"Wallet type",
|
||||
"Department",
|
||||
"Role",
|
||||
"Status",
|
||||
"Action",
|
||||
"Wallet amount",
|
||||
"Created on",
|
||||
"Created by",
|
||||
];
|
||||
|
||||
// const extractedArray = reportsHistory.map((item)=>({ }))
|
||||
|
||||
walletProgram.map((item) => console.log(item));
|
||||
const extractedArray = walletProgram.map((item, index) => ({
|
||||
"Emp ID": (
|
||||
<Radio colorScheme="purple" value="1">
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
<Icon
|
||||
as={PiReceipt}
|
||||
boxSize={8}
|
||||
p={1.5}
|
||||
bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
|
||||
rounded={"full"}
|
||||
/>
|
||||
{item?.EmpID}
|
||||
</Text>
|
||||
</Radio>
|
||||
ID: (
|
||||
// <Radio colorScheme="purple" value="1">
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{item?.id}
|
||||
</Text>
|
||||
// </Radio>
|
||||
),
|
||||
Name: item?.Name,
|
||||
"Email Address": item?.emailAddress,
|
||||
"Mobile number": item?.mobileNumber,
|
||||
"Wallet Name": (
|
||||
<Box display="flex" flexDirection="row" alignItems="center" gap={1}>
|
||||
<Image
|
||||
h="23px"
|
||||
src={item.walletName[0]?.icon}
|
||||
alt={item.walletName[0]?.icon}
|
||||
/>
|
||||
|
||||
{/* <Text fontSize={"xs"}></Text> */}
|
||||
{item?.walletName[0]?.name}
|
||||
</Box>
|
||||
),
|
||||
"Wallet type": item?.WalletType,
|
||||
Department: item?.mobileNumber,
|
||||
Grade: item?.Grade,
|
||||
Department: item?.Department,
|
||||
Department: item?.department,
|
||||
Role: item?.Role,
|
||||
Status: (
|
||||
<Tag
|
||||
my={1}
|
||||
size={"sm"}
|
||||
borderRadius="full"
|
||||
colorScheme={
|
||||
bgColor={
|
||||
item?.status === "Active"
|
||||
? "green"
|
||||
? "#00A43814"
|
||||
: item?.status === "Inactive"
|
||||
? "red"
|
||||
: "gray"
|
||||
? "#C33FAD21"
|
||||
: "#E0BC0114"
|
||||
}
|
||||
border={`1px solid ${
|
||||
color={
|
||||
item?.status === "Active"
|
||||
? "green"
|
||||
? "#00A438"
|
||||
: item?.status === "Inactive"
|
||||
? "red"
|
||||
: "gray" // default border color if status doesn't match any condition
|
||||
}`}
|
||||
? "#C33FAD"
|
||||
: "#E0BC01"
|
||||
}
|
||||
p={1}
|
||||
px={3}
|
||||
>
|
||||
<TagLabel>{item?.status}</TagLabel>
|
||||
</Tag>
|
||||
),
|
||||
Action: (
|
||||
<Box
|
||||
display={"flex"}
|
||||
gap={1}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Button
|
||||
_hover={{ color: "gray.800", bg: "gray.100" }}
|
||||
transition={"0.5s"}
|
||||
size={"sm"}
|
||||
bg={"none"}
|
||||
p={0}
|
||||
color="gray.600"
|
||||
>
|
||||
<FaRegEye fontSize={"18px"} />
|
||||
</Button>
|
||||
<Button
|
||||
_hover={{ color: "gray.800", bg: "gray.100" }}
|
||||
transition={"0.5s"}
|
||||
size={"sm"}
|
||||
bg={"none"}
|
||||
p={0}
|
||||
color="gray.600"
|
||||
>
|
||||
<AiOutlineEdit fontSize={"19px"} />
|
||||
</Button>
|
||||
<Button
|
||||
_hover={{ color: "gray.800", bg: "gray.100" }}
|
||||
transition={"0.5s"}
|
||||
size={"sm"}
|
||||
bg={"none"}
|
||||
p={0}
|
||||
color="gray.600"
|
||||
>
|
||||
<RiDeleteBin5Line fontSize={"18px"} />
|
||||
</Button>
|
||||
</Box>
|
||||
),
|
||||
"Wallet amount": item?.WalletAmount,
|
||||
"Created on": item?.CreatedOn,
|
||||
"Created by": item?.CreatedBy,
|
||||
}));
|
||||
|
||||
return (
|
||||
@@ -191,7 +178,7 @@ const WalletProgram = () => {
|
||||
alignItems={"center"}
|
||||
w={"100%"}
|
||||
>
|
||||
<InputGroup width={300} size="sm">
|
||||
<InputGroup width={300} size="sm" ml={5}>
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
@@ -205,7 +192,17 @@ const WalletProgram = () => {
|
||||
/>
|
||||
</InputGroup>
|
||||
<Box>
|
||||
<Button size={"sm"} variant='ghost' border={"1px solid #ccc"}>
|
||||
<Button
|
||||
as={Button}
|
||||
leftIcon={<MdOutlineUnarchive />}
|
||||
// rightIcon={<ChevronDownIcon />}
|
||||
fontSize={"xs"}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
View achieve
|
||||
</Button>
|
||||
<Menu>
|
||||
@@ -223,17 +220,21 @@ const WalletProgram = () => {
|
||||
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>
|
||||
<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>
|
||||
<PrimaryButton leftIcon={<AddIcon />} title={"walletProgram"} />
|
||||
<PrimaryButton leftIcon={<AddIcon />} title={"Create wallet"} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Divider />
|
||||
<HStack w={"100%"} justifyContent={"space-between"} mb={4}>
|
||||
<Box>
|
||||
<Menu>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
leftIcon={<BsFilterRight fontSize={"16px"} />}
|
||||
@@ -247,7 +248,7 @@ const WalletProgram = () => {
|
||||
Sort
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Ascending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Descending</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
|
||||
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
|
||||
@@ -255,12 +256,12 @@ const WalletProgram = () => {
|
||||
</Menu>
|
||||
</Box>
|
||||
<Box>
|
||||
<Link to={"#"} style={{marginRight:"8px"}}>
|
||||
<SecondaryButton
|
||||
{/* <Link to={"#"} style={{ marginRight: "8px" }}>
|
||||
<SecondaryButton
|
||||
leftIcon={<Image me={2} src={backFund} w={"17px"} />}
|
||||
title={"Pull back funds"}
|
||||
/>
|
||||
</Link>
|
||||
</Link> */}
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
@@ -281,15 +282,86 @@ const WalletProgram = () => {
|
||||
<MenuItem fontSize={"sm"}>Recently Added</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
|
||||
<Button
|
||||
bgColor="#3725EA30"
|
||||
fontWeight={600}
|
||||
fontSize="small"
|
||||
color="#3725EA"
|
||||
onClick={() => setShowGird(!showGrid)}
|
||||
leftIcon={<CiBoxList color="#3725EA" fontSize={"15px"} />}
|
||||
>
|
||||
{showGrid && "List"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
ml="8px"
|
||||
bgColor="#3725EA30"
|
||||
fontWeight={600}
|
||||
fontSize="small"
|
||||
color="#3725EA"
|
||||
onClick={() => setShowGird(!showGrid)}
|
||||
>
|
||||
<BsFillGridFill color="#3725EA" fontSize={"15px"} />{" "}
|
||||
{!showGrid && "Gird"}
|
||||
</Button>
|
||||
</Box>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
{showGrid ? (
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
) : (
|
||||
<Box>
|
||||
<Tabs position="relative" variant="unstyled">
|
||||
<TabList color="#B0B0B0">
|
||||
<Tab
|
||||
fontSize="small"
|
||||
_selected={{
|
||||
color: "#6311CB",
|
||||
fontWeight: "medium",
|
||||
}}
|
||||
>
|
||||
Active wallets
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize="small"
|
||||
_selected={{
|
||||
color: "#6311CB",
|
||||
fontWeight: "medium",
|
||||
}}
|
||||
>
|
||||
Pending for approval
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize="small"
|
||||
_selected={{
|
||||
color: "#6311CB",
|
||||
fontWeight: "medium",
|
||||
}}
|
||||
>
|
||||
Declined wallets
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabIndicator
|
||||
mt="-1.5px"
|
||||
height="2px"
|
||||
bg="blue.500"
|
||||
borderRadius="1px"
|
||||
color="red"
|
||||
/>
|
||||
<TabPanels>
|
||||
<TabPanel><ActiveCards/></TabPanel>
|
||||
<TabPanel><PendingApproval/></TabPanel>
|
||||
<TabPanel><Decline/></TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
),
|
||||
@@ -356,14 +347,15 @@ const GiftCard = () => {
|
||||
"Sr. no": (
|
||||
// <Radio colorScheme="purple" value="1">
|
||||
<Checkbox colorScheme="purple">
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{/* <Icon
|
||||
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{/* <Icon
|
||||
as={PiReceipt}
|
||||
boxSize={8}
|
||||
p={1.5}
|
||||
@@ -371,11 +363,12 @@ const GiftCard = () => {
|
||||
rounded={"full"}
|
||||
/> */}
|
||||
|
||||
{item?.id}
|
||||
</Text>
|
||||
{item?.id}
|
||||
</Text>
|
||||
</Checkbox>
|
||||
),
|
||||
"Order ID": (
|
||||
<NavLink to="/gift-card/digital-application-status">
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
@@ -394,6 +387,7 @@ const GiftCard = () => {
|
||||
|
||||
{item?.orderid}
|
||||
</Text>
|
||||
</NavLink>
|
||||
),
|
||||
"Email Address": item?.emailAddress,
|
||||
"Date & time": item?.dateTime,
|
||||
@@ -448,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>
|
||||
),
|
||||
@@ -547,13 +531,12 @@ const GiftCard = () => {
|
||||
bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
|
||||
rounded={"full"}
|
||||
/> */}
|
||||
|
||||
{item?.id}
|
||||
</Text>
|
||||
</Checkbox>
|
||||
),
|
||||
"Order ID": (
|
||||
<NavLink to={"/application-status"}>
|
||||
<NavLink to={"/gift-card/application-status"}>
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
@@ -628,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>
|
||||
),
|
||||
|
||||
@@ -223,6 +223,7 @@ const Employees = () => {
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
|
||||
<Box
|
||||
x
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
// pb={0}
|
||||
|
||||
434
src/Pages/OptiFiiGifsAndVouchers/id/DigitalApplication.jsx
Normal file
434
src/Pages/OptiFiiGifsAndVouchers/id/DigitalApplication.jsx
Normal file
@@ -0,0 +1,434 @@
|
||||
// import React from "react";
|
||||
// import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
// import { Box, Tag, TagLabel, Text } from "@chakra-ui/react";
|
||||
|
||||
// const ApplicationStatus = () => {
|
||||
// return (
|
||||
// <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
|
||||
|
||||
// </Box>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default ApplicationStatus;
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
HStack,
|
||||
Icon,
|
||||
Image,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Radio,
|
||||
Tag,
|
||||
TagLabel,
|
||||
Text,
|
||||
useDisclosure,
|
||||
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 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(() => {
|
||||
setIsLoading(true);
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
// Table Header
|
||||
const tableHeadRow = [
|
||||
"Emp ID",
|
||||
"Name",
|
||||
"Email address/Mobile number",
|
||||
"Member since",
|
||||
"Load Status",
|
||||
"Action",
|
||||
];
|
||||
|
||||
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": (
|
||||
<Text
|
||||
as={"span"}
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{item?.EmpID}
|
||||
</Text>
|
||||
),
|
||||
Name: (
|
||||
<Box display="flex" flexDirection="row" alignItems="center" gap={2}>
|
||||
<Image src={pooja} h="40px" />
|
||||
<Text pt={4} fontSize="xs" fontWeight={400}>
|
||||
{item?.Name}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Email address/Mobile number": item?.emailAddressMobile,
|
||||
"Member since": item?.MemberSince,
|
||||
"Load Status": (
|
||||
<Box display="flex" flexDirection="column" alignItems="center">
|
||||
{item?.LoadStatus === "10,000" ? (
|
||||
<Text>{item?.LoadStatus}</Text>
|
||||
) : item?.LoadStatus === "load Card" ? (
|
||||
<Tag
|
||||
my={1}
|
||||
size={"sm"}
|
||||
bgColor="transparent"
|
||||
borderRadius="13.75px"
|
||||
color="#6311CB"
|
||||
p={1}
|
||||
px={3}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
>
|
||||
<Image h="14px" src={redinfo} />
|
||||
<TagLabel textDecoration="underline">{item?.LoadStatus}</TagLabel>
|
||||
</Tag>
|
||||
) : null}
|
||||
</Box>
|
||||
),
|
||||
Action: (
|
||||
<Box
|
||||
display={"flex"}
|
||||
gap={1}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
{item?.Action === "Activate card" ? (
|
||||
<Tag
|
||||
my={1}
|
||||
size={"sm"}
|
||||
bgColor="#ECFDF3"
|
||||
borderRadius="13.75px"
|
||||
color="#027A48"
|
||||
p={1}
|
||||
px={3}
|
||||
onClick={() => {
|
||||
setSelectedAction(item?.Action); // Set action to "Activate card"
|
||||
onOpen();
|
||||
}}
|
||||
>
|
||||
<TagLabel>{item?.Action}</TagLabel>
|
||||
</Tag>
|
||||
) : item?.Action === "Load card" ? (
|
||||
<Tag
|
||||
my={1}
|
||||
size={"sm"}
|
||||
bgColor="#FFE1E0"
|
||||
borderRadius="13.75px"
|
||||
color="#CC4E4B"
|
||||
p={1}
|
||||
px={3}
|
||||
onClick={() => {
|
||||
setSelectedAction(item?.Action); // Set action to "Load card"
|
||||
onOpen();
|
||||
}}
|
||||
>
|
||||
<TagLabel>{item?.Action}</TagLabel>
|
||||
</Tag>
|
||||
) : null}
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
px={3}
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* 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"
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>
|
||||
{selectedAction === "Load card" ? "Load Card" : "Activate Card"}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
{selectedAction === "Activate card" ? (
|
||||
<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}>
|
||||
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%"}
|
||||
>
|
||||
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>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default DigitalApplicationStatus;
|
||||
@@ -18,8 +18,10 @@ import Roles from "../Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles";
|
||||
import OptiFiiExpenseDashboard from "../Pages/OptiFiiExpense/OptiFiiExpenseDashboard";
|
||||
import GiftCard from "../Pages/OptiFiiGifsAndVouchers/GiftCard";
|
||||
import ApplicationStatus from "../Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus";
|
||||
import DigitalApplicationStatus from "../Pages/OptiFiiGifsAndVouchers/id/DigitalApplication";
|
||||
import GiftDashboard from "../Pages/OptiFiiGifsAndVouchers/GiftDashboard";
|
||||
import AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
|
||||
import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
|
||||
export const RouteLink = [
|
||||
{ path: "/", Component: Dashbaord },
|
||||
{ path: "/expenses", Component: Expenses },
|
||||
@@ -30,6 +32,7 @@ export const RouteLink = [
|
||||
{ path: "/Manage-roles", Component: ManageDepartmentAndRoles },
|
||||
{ path: "/wallet-program", Component: WalletProgram },
|
||||
{ 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: "/optiFii-benefit", Component: OptiFiiTaxBenefit },
|
||||
@@ -41,6 +44,8 @@ export const RouteLink = [
|
||||
{ path: "/roles", Component: Roles },
|
||||
{ path: "/optiFii-expense-dashboard", Component: OptiFiiExpenseDashboard },
|
||||
{ path: "/gift-card", Component: GiftCard },
|
||||
{ path: "/gift-card/application-status", Component: ApplicationStatus },
|
||||
{ path: "/gift-card/digital-application-status", Component: DigitalApplicationStatus },
|
||||
{ path: "/application-status", Component: ApplicationStatus },
|
||||
|
||||
|
||||
|
||||
BIN
src/assets/icons/Food.png
Normal file
BIN
src/assets/icons/Food.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 966 B |
BIN
src/assets/icons/Fuel.png
Normal file
BIN
src/assets/icons/Fuel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/icons/bookStack.png
Normal file
BIN
src/assets/icons/bookStack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/icons/gadget.png
Normal file
BIN
src/assets/icons/gadget.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/icons/gift.png
Normal file
BIN
src/assets/icons/gift.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/icons/telecom.png
Normal file
BIN
src/assets/icons/telecom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/onboarding_bg.webp
Normal file
BIN
src/assets/onboarding_bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Reference in New Issue
Block a user