Siddhesh.More/optifii-corporate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

final wallet program

Browse Source
This commit is contained in:
priyanshuvish
2024-10-15 12:05:29 +05:30
parent 771faa1d99
commit 2145ce0476
1 changed files with 69 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
View File

@@ -1,8 +1,6 @@
import React, { useState } from 'react';
import {
Box, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Text, Input, Select, Stack,
InputGroup,
InputLeftElement,
HStack,
Divider,
Button
@@ -11,19 +9,16 @@ import {
Step,
StepIndicator,
StepSeparator,
StepStatus,
StepTitle,
Stepper,
} from '@chakra-ui/react';
import { IoIosCheckmark } from "react-icons/io";
import { MdCurrencyRupee } from "react-icons/md";
import { HiOutlineExclamationCircle } from "react-icons/hi2";
import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton"
import { IoCheckmark } from "react-icons/io5";
import PrimaryButton from "../../../../src/Components/Buttons/PrimaryButton";
import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
import BenifitStepOne from './BenifitStepOne';
import SubmissionPolicy from './SubmissionPolicy';
import DefineBudget from './DefineBudget';
import BenifitStepTwo from './BenifitStepTwo';
import BenifitStepThree from './BenifitStepThree';
const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
// Define steps
const steps = [
@@ -57,48 +52,66 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
<ModalHeader>Create Benefit Wallet</ModalHeader>
<ModalCloseButton />
<ModalBody>
{/* Stepper Component */}
<Stepper size="lg" index={activeStep} color={"#3725EA"} gap={1}>
{steps.map((step, index) => (
<Step key={index}>
<StepIndicator w={6} h={6} >
<Box
borderRadius="full"
bg={index < activeStep ? '#3725EA' : (index === activeStep ? '#3725EA' : 'gray.300')}
color={index < activeStep || index === activeStep ? 'white' : 'gray.500'}
w={4}
h={4}
display="flex"
alignItems="center"
justifyContent="center"
>
{index < activeStep ? (
<IoIosCheckmark boxSize={6} />
) : (
<Text mb={0} fontSize={"sm"}>{index + 1}</Text>
{/* Stepper Component with 130% width, custom scrollbar and horizontal scroll */}
<Box pb={4}
overflowX="auto"
sx={{
'&::-webkit-scrollbar': {
height: '4px',
},
'&::-webkit-scrollbar-thumb': {
background: '#3725EA', // Custom scrollbar thumb color
borderRadius: '10px',
},
'&::-webkit-scrollbar-track': {
background: '#e0e0e0', // Custom scrollbar track color
},
}}
>
<Box w="130%"> {/* Set the stepper width to 130% */}
<Stepper size="lg" index={activeStep} color={"#3725EA"} gap={1}>
{steps.map((step, index) => (
<Step key={index}>
<StepIndicator w={6} h={6}>
<Box
borderRadius="full"
bg={index < activeStep ? '#3725EA' : (index === activeStep ? '#3725EA' : 'gray.300')}
color={index < activeStep || index === activeStep ? 'white' : 'gray.500'}
w={4}
h={4}
display="flex"
alignItems="center"
justifyContent="center"
>
{index < activeStep ? (
<IoCheckmark />
) : (
<Text mb={0} fontSize={"sm"}>{index + 1}</Text>
)}
</Box>
</StepIndicator>
<Box flexShrink="0" ml={2}>
<StepTitle mb={0} fontSize="sm" >
<Text
mb={0}
fontSize="sm"
fontWeight={500}
color={index <= activeStep ? '#3725EA' : 'gray.500'}
>
{step.title}
</Text>
</StepTitle>
</Box>
{index !== steps.length - 1 && (
<StepSeparator borderColor="gray.300" />
)}
</Box>
</StepIndicator>
<Box flexShrink="0" ml={2}>
<StepTitle mb={0} fontSize="sm" >
<Text
mb={0}
fontSize="sm"
fontWeight={500}
color={index <= activeStep ? '#3725EA' : 'gray.500'}
>
{step.title}
</Text>
</StepTitle>
</Box>
{index !== steps.length - 1 && (
<StepSeparator borderColor="gray.300" />
)}
</Step>
))}
</Stepper>
</Step>
))}
</Stepper>
</Box>
</Box>
<Divider color={"#f6f1fc"} />
{/* Conditionally render form fields based on active step */}
@@ -111,28 +124,24 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
{/* Step 2 Content: Approval Policy */}
{activeStep === 1 && (
<Box>
<Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Approval Policy</Text>
<Text>This is step 2 content.</Text>
</Box>
<BenifitStepTwo />
)}
{/* Step 3 Content: Submission Policy */}
{activeStep === 2 && (
<Box>
<SubmissionPolicy/>
</Box>
<BenifitStepThree />
)}
{/* Step 4 Content: Define Budget */}
{activeStep === 3 && (
<Box>
<DefineBudget/>
<Text fontSize="sm" fontWeight="500" color={"#344054"} mb={0}>Define Budget</Text>
<RupeeSlider />
</Box>
)}
{/* Stepper Controls */}
<HStack justifyContent="center" pt={4}>
<HStack justifyContent="center" my={4}>
<Button
onClick={prevStep}
isDisabled={activeStep === 0}