Request reimbursement done

This commit is contained in:
priyanshuvish
2024-09-27 19:25:30 +05:30
parent 0d12078ca2
commit 1b4bcd503b
11 changed files with 661 additions and 101 deletions

View File

@@ -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 />} />

View File

@@ -62,7 +62,7 @@ const HeaderMain = ({
style={{ width: 95 }}
src={mainLogo}
alt="Logo"
onClick={() => navigate("/")}
// onClick={() => navigate("/")}
cursor={"pointer"}
/>
</Box>

View File

@@ -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"
>

View File

@@ -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>
</>
);
};

View File

@@ -0,0 +1,9 @@
import React from 'react'
const AddExpenseModalRequestExpenseAdvance = () => {
return (
<div>AddExpenseModalRequestExpenseAdvance</div>
)
}
export default AddExpenseModalRequestExpenseAdvance

View 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;

View 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;

View File

@@ -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"}

View File

@@ -20,7 +20,7 @@ export const nav = [
{
title: "Home",
Icon: FiHome,
path: "/",
path: "/home",
submenu: [
{
title: "Report",

View File

@@ -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 },
];