Request reimbursement done
This commit is contained in:
@@ -26,6 +26,7 @@ import FullKycQandA from "./Pages/Onboarding/FullKycQandA";
|
||||
import FullKycFaceVerification from "./Pages/Onboarding/FullKycFaceVerification";
|
||||
import FullKycAadharVerification from "./Pages/Onboarding/FullKycAadharVerification";
|
||||
import FullKycPanVerification from "./Pages/Onboarding/FullKycPanVerification";
|
||||
import RegisterOtp from "./Pages/Onboarding/RegisterOtp";
|
||||
|
||||
const App = () => {
|
||||
// const { isAuthenticate } = useSelector((state) => state?.auth);
|
||||
@@ -68,6 +69,7 @@ const App = () => {
|
||||
<Route path="/login-phone-number" element={<LoginPhoneNumber />} />
|
||||
<Route path="/login-email-address" element={<LoginEmailAddress />} />
|
||||
<Route path="/login-otp" element={<LoginEmailOtp />} />
|
||||
<Route path="/register-otp" element={<RegisterOtp />} />
|
||||
<Route path="/ekyc" element={<LoginEkyc />} />
|
||||
<Route path="/minimum-kyc" element={<MinimumKyc />} />
|
||||
<Route path="/maximum-kyc" element={<FullKyc />} />
|
||||
|
||||
@@ -62,7 +62,7 @@ const HeaderMain = ({
|
||||
style={{ width: 95 }}
|
||||
src={mainLogo}
|
||||
alt="Logo"
|
||||
onClick={() => navigate("/")}
|
||||
// onClick={() => navigate("/")}
|
||||
cursor={"pointer"}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -390,7 +390,7 @@ const DashboardLayout = ({ isOnline }) => {
|
||||
} link d-flex align-items-center gap-2 w-100 mb-1`}
|
||||
>
|
||||
<NavLink
|
||||
to="/"
|
||||
to="/home"
|
||||
as="span"
|
||||
className="d-flex align-items-centre gap-2 w-50 py-1"
|
||||
>
|
||||
|
||||
@@ -7,115 +7,282 @@ import {
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
} from "@chakra-ui/modal";
|
||||
import React from "react";
|
||||
import SeccondaryButton from "../../Components/Buttons/SecondaryButton";
|
||||
import { AddIcon, EmailIcon } from "@chakra-ui/icons";
|
||||
import { PiReceipt, PiReceiptBold } from "react-icons/pi";
|
||||
import { useNavigate } from "react-router";
|
||||
import { Box, Text, VStack } from "@chakra-ui/layout";
|
||||
import { IoReceiptOutline } from "react-icons/io5";
|
||||
import invoiceGradiant from '../../assets/invoice_gradiant.svg'
|
||||
import moneyBack from '../../assets/money_back.svg'
|
||||
import React, { useRef, useState } from "react";
|
||||
import { Box, Text, VStack, HStack } from "@chakra-ui/layout";
|
||||
import { Image } from "@chakra-ui/image";
|
||||
import { Input, InputGroup, InputLeftElement, InputRightElement, Select, Textarea } from "@chakra-ui/react";
|
||||
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
|
||||
import invoiceGradiant from '../../assets/invoice_gradiant.svg';
|
||||
import moneyBack from '../../assets/money_back.svg';
|
||||
import SecondaryButton from "../../Components/Buttons/SecondaryButton";
|
||||
import { CheckIcon } from "@chakra-ui/icons";
|
||||
import { LuCalendar } from "react-icons/lu";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const AddExpenseModal = ({ isOpen, onClose }) => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
// States for controlling each modal
|
||||
const [isAdvanceOpen, setAdvanceOpen] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
subject: '',
|
||||
issueType: '',
|
||||
subtype: '',
|
||||
description: '',
|
||||
file: null,
|
||||
});
|
||||
|
||||
const inputRef = useRef(null);
|
||||
|
||||
// Open file dialog
|
||||
const handleFileUpload = () => inputRef.current.click();
|
||||
|
||||
// Handle form changes
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
// Handle file input
|
||||
const handleFileChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
file: file,
|
||||
}));
|
||||
};
|
||||
|
||||
// Submit form (example handler)
|
||||
const handleSubmit = () => {
|
||||
console.log('Form data:', formData);
|
||||
// Add your submit logic here, e.g., API call
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal size={'xl'} isOpen={isOpen} onClose={onClose} isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader textAlign={"center"} fontSize={"md"}>
|
||||
Add Expense
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
flexDirection={"column"}
|
||||
gap={3}
|
||||
p={4}
|
||||
>
|
||||
<VStack gap={4} px={4}>
|
||||
<Button
|
||||
colorScheme="purple"
|
||||
variant={"outline"}
|
||||
display={"flex"}
|
||||
gap={4}
|
||||
justifyContent={"start"}
|
||||
w={"100%"}
|
||||
h={24}
|
||||
>
|
||||
<Image w={30} src={invoiceGradiant} />
|
||||
<Box
|
||||
<>
|
||||
{/* Main Add Expense Modal */}
|
||||
<Modal size={'xl'} isOpen={isOpen} onClose={onClose} isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader textAlign={"center"} fontSize={"md"}>
|
||||
Add Expense
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
flexDirection={"column"}
|
||||
gap={3}
|
||||
p={4}
|
||||
>
|
||||
<VStack gap={4} px={4}>
|
||||
{/* Request Expense Advance Button */}
|
||||
<Button
|
||||
onClick={() => setAdvanceOpen(true)} // Open Advance Modal
|
||||
colorScheme="purple"
|
||||
variant={"outline"}
|
||||
display={"flex"}
|
||||
alignItems={"start"}
|
||||
flexDirection={"column"}
|
||||
flexWrap={"wrap"}
|
||||
gap={2}
|
||||
color={'#6311CB'}
|
||||
borderColor={'#6311CB'}
|
||||
gap={4}
|
||||
justifyContent={"start"}
|
||||
w={"100%"}
|
||||
h={24}
|
||||
>
|
||||
<Text as={"span"} fontWeight={600}>
|
||||
Request Expense Advance
|
||||
</Text>
|
||||
<Text
|
||||
as={"span"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={400}
|
||||
textAlign={'start'}
|
||||
whiteSpace={"normal"} // Ensures the text wraps to the next line
|
||||
wordBreak={"break-word"} // Breaks long words to wrap within the container
|
||||
<Image w={30} src={invoiceGradiant} />
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"start"}
|
||||
flexDirection={"column"}
|
||||
flexWrap={"wrap"}
|
||||
gap={2}
|
||||
color={'#6311CB'}
|
||||
borderColor={'#6311CB'}
|
||||
>
|
||||
Lorem ipsum dolor sit amet,ed nulla orci psum dolor sit
|
||||
amet,ed nulla orci psum dolor sit amet,ed nulla orci psum
|
||||
dolor sit amet,ed nulla orci
|
||||
</Text>
|
||||
</Box>
|
||||
</Button>
|
||||
<Text as={"span"} fontWeight={600}>
|
||||
Request Expense Advance
|
||||
</Text>
|
||||
<Text
|
||||
as={"span"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={400}
|
||||
textAlign={'start'}
|
||||
whiteSpace={"normal"}
|
||||
wordBreak={"break-word"}
|
||||
>
|
||||
Lorem ipsum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci
|
||||
</Text>
|
||||
</Box>
|
||||
</Button>
|
||||
|
||||
|
||||
|
||||
<Button
|
||||
colorScheme="purple"
|
||||
variant={"outline"}
|
||||
display={"flex"}
|
||||
gap={4}
|
||||
justifyContent={"start"}
|
||||
w={"100%"}
|
||||
h={24}
|
||||
>
|
||||
<Image w={30} src={moneyBack} />
|
||||
<Box
|
||||
{/* Request Reimbursement Button */}
|
||||
<Button
|
||||
onClick={()=>navigate("/request-reimbursement")}
|
||||
colorScheme="purple"
|
||||
variant={"outline"}
|
||||
display={"flex"}
|
||||
alignItems={"start"}
|
||||
flexDirection={"column"}
|
||||
flexWrap={"wrap"}
|
||||
gap={2}
|
||||
color={'#6311CB'}
|
||||
borderColor={'#6311CB'}
|
||||
gap={4}
|
||||
justifyContent={"start"}
|
||||
w={"100%"}
|
||||
h={24}
|
||||
>
|
||||
<Text as={"span"} fontWeight={600}>
|
||||
Request Reimbursement
|
||||
</Text>
|
||||
<Text
|
||||
as={"span"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={400}
|
||||
textAlign={'start'}
|
||||
whiteSpace={"normal"} // Ensures the text wraps to the next line
|
||||
wordBreak={"break-word"} // Breaks long words to wrap within the container
|
||||
<Image w={30} src={moneyBack} />
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"start"}
|
||||
flexDirection={"column"}
|
||||
flexWrap={"wrap"}
|
||||
gap={2}
|
||||
color={'#6311CB'}
|
||||
borderColor={'#6311CB'}
|
||||
>
|
||||
Lorem ipsum dolor sit amet,ed nulla orci psum dolor sit
|
||||
amet,ed nulla orci psum dolor sit amet,ed nulla orci psum
|
||||
dolor sit amet,ed nulla orci
|
||||
</Text>
|
||||
</Box>
|
||||
</Button>
|
||||
<Text as={"span"} fontWeight={600}>
|
||||
Request Reimbursement
|
||||
</Text>
|
||||
<Text
|
||||
as={"span"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={400}
|
||||
textAlign={'start'}
|
||||
whiteSpace={"normal"}
|
||||
wordBreak={"break-word"}
|
||||
>
|
||||
Lorem ipsum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci
|
||||
</Text>
|
||||
</Box>
|
||||
</Button>
|
||||
</VStack>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
</VStack>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
{/* Request Expense Advance Modal */}
|
||||
<Modal size={'xl'} isOpen={isAdvanceOpen} onClose={() => setAdvanceOpen(false)} isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Advanced Expense Request
|
||||
<Text mb={1} fontWeight={"400"} fontSize={"xs"} color={"#606060"}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</Text>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Box bg={"#FFFFFF"} borderRadius={"md"} boxShadow={"sm"} p={3} mb={4}>
|
||||
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Expense type
|
||||
</Text>
|
||||
<Select
|
||||
size="sm"
|
||||
borderRadius={"md"}
|
||||
name="issueType"
|
||||
value={formData.issueType}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
</Select>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Add Amount
|
||||
</Text>
|
||||
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none' color='#363636' fontWeight={500} fontSize='sm'>
|
||||
₹
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
borderRadius={"md"}
|
||||
size="sm"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Date
|
||||
</Text>
|
||||
|
||||
<HStack>
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none' color='#313039' fontWeight={500} fontSize='xs' top={"-1"}>
|
||||
From
|
||||
</InputLeftElement>
|
||||
<Input size={"sm"} borderRadius={"md"} pl={10} />
|
||||
<InputRightElement top={"-1"}>
|
||||
<LuCalendar color="#3725EA" />
|
||||
</InputRightElement>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none' color='#313039' fontWeight={500} fontSize='xs' top={"-1"}>
|
||||
To
|
||||
</InputLeftElement>
|
||||
<Input size={"sm"} borderRadius={"md"} />
|
||||
<InputRightElement top={"-1"}>
|
||||
<LuCalendar color="#3725EA" />
|
||||
</InputRightElement>
|
||||
</InputGroup>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Evidence of Appointment
|
||||
</Text>
|
||||
|
||||
<Input ref={inputRef} type="file" display="none" onChange={handleFileChange} />
|
||||
<Button
|
||||
borderRadius={"md"}
|
||||
size="sm"
|
||||
onClick={handleFileUpload}
|
||||
border={"1px solid #e2e8f0"}
|
||||
w={"100%"}
|
||||
bg="transparent"
|
||||
color="#3725EA"
|
||||
textDecoration={"underline"}
|
||||
display={"flex"}
|
||||
justifyContent={"start"}
|
||||
>
|
||||
Upload File
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box mt={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Comments
|
||||
</Text>
|
||||
<Textarea
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Describe your issue here"
|
||||
size="sm"
|
||||
borderRadius={"md"}
|
||||
resize={"none"}
|
||||
/>
|
||||
</Box>
|
||||
<HStack mt={6} justifyContent={"center"}>
|
||||
<SecondaryButton title={"Cancel"} />
|
||||
<PrimaryButton title={"Request Expense"} />
|
||||
</HStack>
|
||||
</Box>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
const AddExpenseModalRequestExpenseAdvance = () => {
|
||||
return (
|
||||
<div>AddExpenseModalRequestExpenseAdvance</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddExpenseModalRequestExpenseAdvance
|
||||
294
src/Pages/Expenses/RequestReimbursement.jsx
Normal file
294
src/Pages/Expenses/RequestReimbursement.jsx
Normal file
@@ -0,0 +1,294 @@
|
||||
import { Box, Input, Text, HStack, Button, Icon, Tag, Divider, useToast, Radio, InputGroup, InputLeftElement, Select, InputRightElement, Textarea } from '@chakra-ui/react';
|
||||
import React, { useContext } from 'react';
|
||||
import MiniHeader from '../../Components/MiniHeader';
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations';
|
||||
import { MdOutlineRamenDining } from "react-icons/md";
|
||||
import { RiDeleteBin5Line } from "react-icons/ri";
|
||||
import { FaRegFilePdf } from "react-icons/fa";
|
||||
import { AiOutlineEdit } from "react-icons/ai";
|
||||
import GlobalStateContext from '../../Contexts/GlobalStateContext';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
import SecondaryButton from '../../Components/Buttons/SecondaryButton';
|
||||
import { FiUploadCloud } from 'react-icons/fi';
|
||||
import { BiScan } from 'react-icons/bi';
|
||||
import { LuCalendar } from 'react-icons/lu';
|
||||
|
||||
const RequestReimbursement = () => {
|
||||
const { requestsTable } = useContext(GlobalStateContext);
|
||||
const toast = useToast();
|
||||
|
||||
// Handle delete action
|
||||
const handleDelete = (id) => {
|
||||
toast({
|
||||
title: "Request Deleted.",
|
||||
description: "Your reimbursement request has been deleted.",
|
||||
status: "success",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
// Add delete logic here
|
||||
};
|
||||
|
||||
// Handle edit action
|
||||
const handleEdit = (id) => {
|
||||
toast({
|
||||
title: "Edit Request",
|
||||
description: "Edit functionality to be implemented.",
|
||||
status: "info",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
// Add edit logic here
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
|
||||
<MiniHeader
|
||||
title={"Reimbursement Request"}
|
||||
backButton={true}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
/>
|
||||
|
||||
<Box bg={"#fff"} p={4} rounded={"md"} >
|
||||
|
||||
<Box bg={"#f0e8fa"} p={4} rounded={"md"} mb={6}>
|
||||
{requestsTable?.length > 0 ? (
|
||||
<Box display={"flex"}
|
||||
gap={4}
|
||||
overflowX={"auto"}
|
||||
pb={2}
|
||||
sx={{
|
||||
// Custom Scrollbar Styles
|
||||
'&::-webkit-scrollbar': {
|
||||
height: '2px', // Set the height of the scrollbar (for horizontal scrolling)
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
backgroundColor: '#6311cb', // Scrollbar thumb color
|
||||
borderRadius: '8px', // Rounded corners for the scrollbar
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
backgroundColor: '#f9f9f9', // Scrollbar track color
|
||||
},
|
||||
'&:hover::-webkit-scrollbar-thumb': {
|
||||
backgroundColor: '#3725EA', // Change scrollbar thumb color on hover
|
||||
},
|
||||
}}
|
||||
>
|
||||
{requestsTable.map((request, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
className='card'
|
||||
p={4}
|
||||
w={["100%", "48%", "32.35%"]}
|
||||
rounded={"md"}
|
||||
border={"none"}
|
||||
boxShadow={"md"}
|
||||
minW={"280px"}
|
||||
>
|
||||
<HStack justifyContent={"space-between"}>
|
||||
<HStack>
|
||||
<Icon
|
||||
as={MdOutlineRamenDining}
|
||||
boxSize={8}
|
||||
p={1.5}
|
||||
bg={"#6311cb14"}
|
||||
rounded={"full"}
|
||||
color={"#111111"}
|
||||
/>
|
||||
<Text fontSize={"sm"} color={"#363636"} fontWeight={"600"} mb={0}>
|
||||
{request?.transactionType || "N/A"}
|
||||
</Text>
|
||||
</HStack>
|
||||
<Radio size='md' name='1' colorScheme='purple'>
|
||||
</Radio>
|
||||
</HStack>
|
||||
|
||||
<Text fontSize={"md"} color={"#363636"} fontWeight={"600"} mt={4} mb={1}>
|
||||
{request?.amountSpent || "0.00"}
|
||||
</Text>
|
||||
<Text fontSize={"xs"} color={"#545454"} fontWeight={"500"}>
|
||||
{request?.date || "Unknown Date"}
|
||||
</Text>
|
||||
|
||||
<HStack gap={4} mt={2}>
|
||||
<Tag bg={"#F0E6FF"} size="sm" py={1} px={3}>
|
||||
<Text
|
||||
bgGradient="linear(to-l, #3725EA, #5E0FCD)"
|
||||
bgClip="text"
|
||||
fontSize={"xs"}
|
||||
fontWeight={600}
|
||||
mb={0}
|
||||
>
|
||||
{request?.category || "Food"}
|
||||
</Text>
|
||||
</Tag>
|
||||
</HStack>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
) : (
|
||||
<Box textAlign="center" py={10} px={6}>
|
||||
<Text fontSize="lg" color="gray.500">
|
||||
No reimbursement requests found.
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<HStack justifyContent={"end"} my={4}>
|
||||
<PrimaryButton title={"Select for Reimbursement"} />
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
<Text fontSize={"md"} fontWeight={"600"}>
|
||||
Upload new transaction
|
||||
</Text>
|
||||
|
||||
<HStack justifyContent={"center"} mb={4}>
|
||||
<PrimaryButton title={"upload file"} leftIcon={<FiUploadCloud />} />
|
||||
<Text fontSize={"xs"} color={"#959595"} fontWeight={"400"} mb={0}>OR</Text>
|
||||
<SecondaryButton title={"Scan Bill"} leftIcon={<BiScan />} />
|
||||
</HStack>
|
||||
|
||||
{/* Wallet */}
|
||||
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Wallet
|
||||
</Text>
|
||||
<Select
|
||||
size="sm"
|
||||
fontWeight={500}
|
||||
fontSize={"sm"}
|
||||
borderRadius={"md"}
|
||||
>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
</Select>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Add Amount
|
||||
</Text>
|
||||
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none' top={-1} color='#363636' fontWeight={500} fontSize='sm'>
|
||||
₹
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
borderRadius={"md"}
|
||||
size="sm"
|
||||
name="subject"
|
||||
fontWeight={500}
|
||||
fontSize={"sm"}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Select category
|
||||
</Text>
|
||||
<Select
|
||||
fontWeight={500}
|
||||
fontSize={"sm"}
|
||||
size="sm"
|
||||
borderRadius={"md"}
|
||||
>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
</Select>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Purpose
|
||||
</Text>
|
||||
<Select
|
||||
fontWeight={500}
|
||||
fontSize={"sm"}
|
||||
size="sm"
|
||||
borderRadius={"md"}
|
||||
>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
</Select>
|
||||
</Box>
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Merchant Name
|
||||
</Text>
|
||||
<Select
|
||||
fontWeight={500}
|
||||
fontSize={"sm"}
|
||||
size="sm"
|
||||
borderRadius={"md"}
|
||||
>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
</Select>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Date
|
||||
</Text>
|
||||
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none' color='#313039' fontWeight={500} fontSize='xs' top={"-1"}>
|
||||
<LuCalendar color="#3725EA" />
|
||||
</InputLeftElement>
|
||||
<Input size={"sm"} borderRadius={"md"} pl={10} fontWeight={500}
|
||||
fontSize={"sm"} />
|
||||
</InputGroup>
|
||||
</Box>
|
||||
|
||||
<Box mb={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Payment Method
|
||||
</Text>
|
||||
<Select
|
||||
fontWeight={500}
|
||||
fontSize={"sm"}
|
||||
size="sm"
|
||||
borderRadius={"md"}
|
||||
>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
</Select>
|
||||
</Box>
|
||||
|
||||
<Box mt={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
|
||||
Comments (Optional)
|
||||
</Text>
|
||||
<Textarea
|
||||
name="description"
|
||||
placeholder="Describe your issue here"
|
||||
size="sm"
|
||||
borderRadius={"md"}
|
||||
resize={"none"}
|
||||
fontWeight={500}
|
||||
fontSize={"sm"}
|
||||
/>
|
||||
</Box>
|
||||
<HStack mt={6} justifyContent={"center"}>
|
||||
<PrimaryButton title={"Request Reimbursement"} />
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestReimbursement;
|
||||
86
src/Pages/Onboarding/RegisterOtp.jsx
Normal file
86
src/Pages/Onboarding/RegisterOtp.jsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Box, PinInput, PinInputField, Text, HStack, Container, useToast } from '@chakra-ui/react';
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
import LoginOtpFrame from './LoginOtpFrame';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Cookies from 'js-cookie';
|
||||
import ToastBox from '../../Components/ToastBox';
|
||||
|
||||
const RegisterOtp = () => {
|
||||
|
||||
const [otp, setOtp] = useState("");
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
|
||||
const handleOtpChange = (value) => {
|
||||
setOtp(value);
|
||||
};
|
||||
|
||||
// const handleLogin = () => {
|
||||
// const email = localStorage.getItem("email");
|
||||
// const phoneNumber = localStorage.getItem("phoneNumber");
|
||||
|
||||
// if (email === "wdi@gmail.com" && phoneNumber === "9988776655" && otp === "1234") {
|
||||
|
||||
// setTimeout(() => {
|
||||
// toast({
|
||||
// render: () => (
|
||||
// <ToastBox status={"success"} message={"Login Successfully"} />
|
||||
// ),
|
||||
// });
|
||||
|
||||
// Cookies.set("isAuthenticated", true, { expires: 7 });
|
||||
// navigate("/*");
|
||||
// }, 2000); // 2-second delay
|
||||
// } else {
|
||||
// setTimeout(() => {
|
||||
// toast({
|
||||
// render: () => (
|
||||
// <ToastBox status={"error"} message={"Invalid phone number or OTP"} />
|
||||
// ),
|
||||
// });
|
||||
|
||||
// reset();
|
||||
// navigate("/login-phone-number");
|
||||
// }, 2000); // 2-second delay
|
||||
// }
|
||||
// };
|
||||
|
||||
return (
|
||||
<LoginOtpFrame>
|
||||
<Container maxW={'container.xl'}>
|
||||
<Box w={"100%"} my={5} boxShadow={"md"}>
|
||||
<Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
|
||||
<Box maxW={650}>
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={"center"} mb={2}>
|
||||
Enter OTP
|
||||
</Text>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={"center"}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
|
||||
</Text>
|
||||
<Box mt={12}>
|
||||
<HStack justifyContent={"center"}>
|
||||
<PinInput value={otp} onChange={handleOtpChange} size='lg' otp>
|
||||
<PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
|
||||
<PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
|
||||
<PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
|
||||
<PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
|
||||
</PinInput>
|
||||
</HStack>
|
||||
</Box>
|
||||
<Box py={10}>
|
||||
<Box mt={16}>
|
||||
<HStack justifyContent={"center"}>
|
||||
<PrimaryButton w={"300px"} title={"Next"} onClick={()=>navigate("/ekyc")} />
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</LoginOtpFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegisterOtp;
|
||||
@@ -234,13 +234,13 @@ const WelcomeToOptifii = () => {
|
||||
</HStack>
|
||||
<HStack justifyContent={"center"} mt={6} >
|
||||
<PrimaryButton
|
||||
onClick={onOpen}
|
||||
onClick={() => navigate("/register-otp")}
|
||||
w={"300px"} title={"Register with us"} />
|
||||
</HStack>
|
||||
<HStack justifyContent={"center"} mt={4} spacing={1}>
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={0}>Already have an account?</Text>
|
||||
<Button
|
||||
onClick={() => navigate("/ekyc")}
|
||||
onClick={onOpen}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
px={0}
|
||||
fontSize={"xs"}
|
||||
|
||||
@@ -20,7 +20,7 @@ export const nav = [
|
||||
{
|
||||
title: "Home",
|
||||
Icon: FiHome,
|
||||
path: "/",
|
||||
path: "/home",
|
||||
submenu: [
|
||||
{
|
||||
title: "Report",
|
||||
|
||||
@@ -15,6 +15,7 @@ import YourWallet from "../Pages/YourWallet/YourWallet";
|
||||
import BuyVoucherCard from "../Pages/Gifts/SelectDenomination";
|
||||
import ForWhom from "../Pages/Gifts/ForWhom";
|
||||
import WelcomeToOptifiiComponent from "../Pages/Onboarding/WelcomeFrame";
|
||||
import RequestReimbursement from "../Pages/Expenses/RequestReimbursement";
|
||||
|
||||
|
||||
|
||||
@@ -35,4 +36,5 @@ export const RouteLink = [
|
||||
{ path: "/buy-voucher-card", Component: BuyVoucherCard },
|
||||
{ path: "/for-whom-card", Component: ForWhom },
|
||||
{ path: "/log-in", Component: WelcomeToOptifiiComponent },
|
||||
{ path: "/request-reimbursement", Component: RequestReimbursement },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user