Image upload in profile pending
This commit is contained in:
priyanshuvish
@@ -125,9 +125,11 @@ const HeaderMain = ({
|
||||
<Portal>
|
||||
<PopoverContent maxW="200px" className="">
|
||||
<PopoverArrow />
|
||||
<PopoverBody className="web-text-medium pointer link">
|
||||
<Link to={"/profile"}>
|
||||
<PopoverBody className="web-text-medium pointer link">
|
||||
Profile
|
||||
</PopoverBody>
|
||||
</PopoverBody>
|
||||
</Link>
|
||||
<Link to={"/help-and-support"}>
|
||||
<PopoverBody className="web-text-medium pointer ">
|
||||
Help & Support
|
||||
|
||||
104
src/Pages/Profile/EditProfile.jsx
Normal file
104
src/Pages/Profile/EditProfile.jsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import { Box, Text, HStack, Image, Input, Icon, Button } from '@chakra-ui/react';
|
||||
import React, { useRef } from 'react';
|
||||
import MiniHeader from '../../Components/MiniHeader';
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations';
|
||||
import { BiCloudUpload } from "react-icons/bi";
|
||||
import PrimaryButton from '../../Components/Buttons/PrimaryButton';
|
||||
import SecondaryButton from '../../Components/Buttons/SecondaryButton';
|
||||
|
||||
const EditProfile = () => {
|
||||
const inputRef = useRef();
|
||||
|
||||
// Trigger the hidden file input
|
||||
const handleFileUploadClick = () => {
|
||||
inputRef.current.click();
|
||||
};
|
||||
|
||||
// Handle saving profile (you may add logic to actually handle form submission)
|
||||
const handleSaveProfile = () => {
|
||||
console.log('Profile saved');
|
||||
// Add actual save logic here (e.g., API call)
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
|
||||
<MiniHeader
|
||||
title={"Edit Your Profile"}
|
||||
subTitle={"Update your information below."}
|
||||
/>
|
||||
|
||||
<Box
|
||||
bg={'#FFFFFF'}
|
||||
borderRadius={'md'}
|
||||
boxShadow={'sm'}
|
||||
p={8}
|
||||
>
|
||||
<HStack gap={12} alignItems={"flex-start"} flexWrap={"wrap"}>
|
||||
{/* Profile Picture and Upload */}
|
||||
<Box>
|
||||
<Image
|
||||
borderRadius='full'
|
||||
boxSize='200px'
|
||||
src='https://bit.ly/dan-abramov'
|
||||
alt='Profile Picture'
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="file"
|
||||
ref={inputRef}
|
||||
display="none"
|
||||
/>
|
||||
<HStack justify={"center"} mt={4} cursor="pointer" onClick={handleFileUploadClick}>
|
||||
<Icon as={BiCloudUpload} color={"#6311CB"} boxSize={6} />
|
||||
<Text color={"#6311CB"} fontSize={"sm"} fontWeight={"600"} mb={0}>
|
||||
Upload
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
{/* Editable Profile Information */}
|
||||
<Box flex={1}>
|
||||
<ProfileField label="Name" placeholder="Enter your name" defaultValue="Kartikey Gautam" />
|
||||
<ProfileField label="Email ID" placeholder="Enter your email" defaultValue="ajinkyaanand@5gth.com" />
|
||||
<ProfileField label="Phone number" placeholder="Enter your phone number" defaultValue="9854412589" />
|
||||
<ProfileField label="Designation" placeholder="Enter your designation" defaultValue="Architect" />
|
||||
</Box>
|
||||
|
||||
</HStack>
|
||||
<HStack
|
||||
gap={4}
|
||||
justify={"center"}
|
||||
mt={4}
|
||||
>
|
||||
<SecondaryButton onClick={handleSaveProfile} title={'cancel'} />
|
||||
<PrimaryButton onClick={handleSaveProfile} title={'Save Profile'} />
|
||||
</HStack>
|
||||
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
// Profile Field Component
|
||||
// Profile Field Component
|
||||
const ProfileField = ({ label, placeholder, defaultValue, labelColor = "#363636" }) => (
|
||||
<Box width="100%" mb={4}>
|
||||
<Text color={labelColor} fontSize="xs" fontWeight="500" mb={1}>
|
||||
{label}
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={placeholder}
|
||||
defaultValue={defaultValue}
|
||||
size="sm"
|
||||
borderColor="#9D9D9D"
|
||||
borderRadius="md"
|
||||
color={"#363636"}
|
||||
fontWeight={500}
|
||||
fontSize={"sm"}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
|
||||
export default EditProfile;
|
||||
175
src/Pages/Profile/Profile.jsx
Normal file
175
src/Pages/Profile/Profile.jsx
Normal file
@@ -0,0 +1,175 @@
|
||||
import { Box, Text, HStack, Image, Input, Icon } from '@chakra-ui/react';
|
||||
import React, { useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import MiniHeader from '../../Components/MiniHeader';
|
||||
import { OPACITY_ON_LOAD } from '../../Layout/animations';
|
||||
import { AiOutlineEdit } from "react-icons/ai";
|
||||
import { BiCloudUpload } from "react-icons/bi";
|
||||
import { RxLockClosed } from "react-icons/rx";
|
||||
import { RiArrowRightSLine } from "react-icons/ri";
|
||||
import { GoArrowSwitch } from "react-icons/go";
|
||||
|
||||
const Profile = () => {
|
||||
const inputRef = useRef();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Trigger the hidden file input
|
||||
const handleFileUploadClick = () => {
|
||||
inputRef.current.click();
|
||||
};
|
||||
|
||||
// Handle navigation to edit profile page
|
||||
const handleEditProfile = () => {
|
||||
navigate('/profile/edit-profile');
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
|
||||
<MiniHeader
|
||||
title={"Your Profile"}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
/>
|
||||
|
||||
<Box
|
||||
bg={'#FFFFFF'}
|
||||
borderRadius={'md'}
|
||||
boxShadow={'sm'}
|
||||
p={8}
|
||||
>
|
||||
<Box display={"flex"} justifyContent={"end"}>
|
||||
<HStack
|
||||
cursor={'pointer'}
|
||||
rounded={'md'}
|
||||
_hover={{ bg: "gray.100" }}
|
||||
transition={'0.5s'}
|
||||
py={3}
|
||||
px={8}
|
||||
border={"1px solid rgba(99, 17, 203, 0.25)"}
|
||||
onClick={handleEditProfile} // Call handleEditProfile on click
|
||||
>
|
||||
<AiOutlineEdit color={"#3725EA"} fontSize={"16px"} />
|
||||
<Text
|
||||
bgGradient="linear(to-l, #3725EA, #5E0FCD)"
|
||||
bgClip="text"
|
||||
fontSize={"sm"}
|
||||
mb={0}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
Edit
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<HStack gap={12} alignItems={"flex-start"} flexWrap={"wrap"}>
|
||||
<Box>
|
||||
<Image
|
||||
borderRadius='full'
|
||||
boxSize='200px'
|
||||
src='https://bit.ly/dan-abramov'
|
||||
alt='Profile Picture'
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="file"
|
||||
ref={inputRef}
|
||||
display="none"
|
||||
/>
|
||||
<HStack justify={"center"} mt={4} cursor="pointer" onClick={handleFileUploadClick}>
|
||||
<Icon as={BiCloudUpload} color={"#6311CB"} boxSize={6} />
|
||||
<Text color={"#6311CB"} fontSize={"sm"} fontWeight={"600"} mb={0}>
|
||||
Upload
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<ProfileInfo label="Name" value="Kartikey Gautam" />
|
||||
<ProfileInfo label="Email ID" value="ajinkyaanand@5gth.com" />
|
||||
<ProfileInfo label="Phone number" value="9854412589" />
|
||||
<ProfileInfo label="Designation" value="Architect" />
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<HStack
|
||||
bg={'#FFFFFF'}
|
||||
borderRadius={'md'}
|
||||
boxShadow={'sm'}
|
||||
py={5}
|
||||
px={4}
|
||||
mt={4}
|
||||
justify={"space-between"}
|
||||
border={"1px solid #fff"}
|
||||
_hover={{ border: "1px solid #6311CB", bg: "#F8F2FF" }}
|
||||
transition="all 0.3s ease"
|
||||
|
||||
>
|
||||
<HStack gap={4}>
|
||||
<HStack
|
||||
borderRadius="full"
|
||||
boxSize={8}
|
||||
bg={"#fff"}
|
||||
justify={"center"}
|
||||
>
|
||||
<RxLockClosed color='#6311CB' />
|
||||
</HStack>
|
||||
<Text
|
||||
color={"#383838"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
mb={0}
|
||||
>
|
||||
Change Password
|
||||
</Text>
|
||||
</HStack>
|
||||
<RiArrowRightSLine color='#363636' />
|
||||
</HStack>
|
||||
|
||||
<HStack
|
||||
bg={'#FFFFFF'}
|
||||
borderRadius={'md'}
|
||||
boxShadow={'sm'}
|
||||
py={5}
|
||||
px={4}
|
||||
justify={"space-between"}
|
||||
border={"1px solid #fff"}
|
||||
_hover={{ border: "1px solid #6311CB", bg: "#F8F2FF" }}
|
||||
transition="all 0.3s ease"
|
||||
>
|
||||
<HStack gap={4}>
|
||||
<HStack
|
||||
borderRadius="full"
|
||||
boxSize={8}
|
||||
bg={"#fff"}
|
||||
justify={"center"}
|
||||
>
|
||||
<GoArrowSwitch color='#6311CB' />
|
||||
</HStack>
|
||||
|
||||
<Text
|
||||
color={"#383838"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
mb={0}
|
||||
>
|
||||
Switch Profile
|
||||
</Text>
|
||||
</HStack>
|
||||
<RiArrowRightSLine color='#363636' />
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const ProfileInfo = ({ label, value }) => (
|
||||
<>
|
||||
<Text color={"#868686"} fontSize={"xs"} fontWeight={"500"} mb={1}>
|
||||
{label}
|
||||
</Text>
|
||||
<Text color={"#363636"} fontSize={"sm"} fontWeight={"600"} mb={3}>
|
||||
{value}
|
||||
</Text>
|
||||
</>
|
||||
);
|
||||
|
||||
export default Profile;
|
||||
@@ -43,7 +43,7 @@ const AddNewReport = () => {
|
||||
</Box>
|
||||
<Box display={"flex"} gap={"4"} flexWrap={"wrap"} my={"8"}>
|
||||
{requestsTable?.map((request, index) =>
|
||||
<Box key={index} className='card' p={"4"} w={"32.42%"} rounded={"md"} border={"none"} boxShadow={"md"}
|
||||
<Box key={index} className='card' p={"4"} w={"32.35%"} rounded={"md"} border={"none"} boxShadow={"md"}
|
||||
>
|
||||
<HStack justifyContent={"space-between"}>
|
||||
<HStack>
|
||||
|
||||
63
src/Pages/Requests/AdvanceExpense.jsx
Normal file
63
src/Pages/Requests/AdvanceExpense.jsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import { Box, VStack, Text, HStack, Button, Divider } from '@chakra-ui/react';
|
||||
import { CalendarIcon } from '@chakra-ui/icons';
|
||||
import NormalTable from "../../Components/DataTable/NormalTable";
|
||||
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
|
||||
|
||||
const AdvanceExpense = ({ tableHeadRow, extractedArray, isLoading, onOpen }) => {
|
||||
return (
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
minH={"100%"}
|
||||
>
|
||||
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
|
||||
<Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
|
||||
Expenses
|
||||
</Text>
|
||||
<HStack w={"100%"} justifyContent={"space-between"}>
|
||||
<HStack>
|
||||
<Button
|
||||
fontWeight={500}
|
||||
size={"sm"}
|
||||
leftIcon={<CalendarIcon color={"purple.800"} />}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
fontSize={"xs"}
|
||||
>
|
||||
Select Date Range
|
||||
</Button>
|
||||
<Button
|
||||
as={"a"}
|
||||
fontWeight={500}
|
||||
size={"sm"}
|
||||
color="#667085"
|
||||
fontSize={"xs"}
|
||||
bg={"transparent"}
|
||||
_hover={"none"}
|
||||
cursor={"pointer"}
|
||||
textDecoration={"underline"}
|
||||
>
|
||||
Select all
|
||||
</Button>
|
||||
</HStack>
|
||||
<PrimaryButton onClick={onOpen} title={"Add to Report"} />
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Divider />
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponsors`}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvanceExpense;
|
||||
63
src/Pages/Requests/Reimbursement.jsx
Normal file
63
src/Pages/Requests/Reimbursement.jsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import { Box, VStack, HStack, Text, Button, Divider } from '@chakra-ui/react';
|
||||
import { CalendarIcon } from '@chakra-ui/icons';
|
||||
import NormalTable from "../../Components/DataTable/NormalTable";
|
||||
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
|
||||
|
||||
const Reimbursement = ({ onOpen, tableHeadRow, extractedArray, isLoading }) => {
|
||||
return (
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
minH={"100%"}
|
||||
>
|
||||
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
|
||||
<Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
|
||||
Expenses
|
||||
</Text>
|
||||
<HStack w={"100%"} justifyContent={"space-between"}>
|
||||
<HStack>
|
||||
<Button
|
||||
fontWeight={500}
|
||||
size={"sm"}
|
||||
leftIcon={<CalendarIcon color={"purple.800"} />}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
fontSize={"xs"}
|
||||
>
|
||||
Select Date Range
|
||||
</Button>
|
||||
<Button
|
||||
as={"a"}
|
||||
fontWeight={500}
|
||||
size={"sm"}
|
||||
color="#667085"
|
||||
fontSize={"xs"}
|
||||
bg={"transparent"}
|
||||
_hover={"none"}
|
||||
cursor={"pointer"}
|
||||
textDecoration={"underline"}
|
||||
>
|
||||
Select all
|
||||
</Button>
|
||||
</HStack>
|
||||
<PrimaryButton onClick={onOpen} title={"Add to Report"} />
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Divider />
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponsors `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Reimbursement;
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useContext, useState, useEffect } from "react";
|
||||
import {
|
||||
Box, Tabs, Tab, TabList, TabPanels, TabPanel,
|
||||
Button,
|
||||
@@ -12,42 +12,30 @@ import {
|
||||
Checkbox,
|
||||
useDisclosure
|
||||
} from "@chakra-ui/react";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
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 { CalendarIcon } from "@chakra-ui/icons";
|
||||
import MiniHeader from "../../Components/MiniHeader";
|
||||
import NormalTable from "../../Components/DataTable/NormalTable";
|
||||
import { FaRegFilePdf } from "react-icons/fa";
|
||||
import Reimbursement from "./Reimbursement";
|
||||
import AdvanceExpense from "./AdvanceExpense";
|
||||
import { MdOutlineRamenDining } from "react-icons/md";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import { AiOutlineEdit } from "react-icons/ai";
|
||||
import { RiDeleteBin5Line } from "react-icons/ri";
|
||||
import MiniHeader from "../../Components/MiniHeader";
|
||||
import { FaRegFilePdf } from "react-icons/fa";
|
||||
import AddReportModal from "./AddReportModal";
|
||||
|
||||
const Requests = () => {
|
||||
const navigate = useNavigate()
|
||||
const { requestsTable } = useContext(GlobalStateContext);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { isOpen, onOpen, onClose } = useDisclosure()
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
// Simulate loading effect
|
||||
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
|
||||
const timer = setTimeout(() => setIsLoading(false), 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, []); // Empty dependency array means this effect runs once after the component mounts
|
||||
}, []);
|
||||
|
||||
// ===============================[ Table Header ]
|
||||
// Table headers
|
||||
const tableHeadRow = [
|
||||
"Transaction Type",
|
||||
"Date",
|
||||
@@ -57,8 +45,7 @@ const Requests = () => {
|
||||
"Actions",
|
||||
];
|
||||
|
||||
// const extractedArray = requestsTable.map((item)=>({ }))
|
||||
|
||||
// Extracted data for table
|
||||
const extractedArray = requestsTable.map((item, index) => ({
|
||||
"Transaction Type": (
|
||||
<Checkbox colorScheme="purple">
|
||||
@@ -148,27 +135,21 @@ const Requests = () => {
|
||||
),
|
||||
}));
|
||||
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"auto"}>
|
||||
{/* Mini header component */}
|
||||
<MiniHeader
|
||||
title={"My Requests"}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
subTitle={"Manage your expense and reimbursement requests."}
|
||||
backButton={true}
|
||||
/>
|
||||
<Box color={"white"}>
|
||||
|
||||
{/* Tabs for switching between AdvanceExpense and Reimbursement */}
|
||||
<Box color={"black"}>
|
||||
<Tabs variant="unstyled">
|
||||
<TabList
|
||||
bg={'#FFFFFF'}
|
||||
borderRadius={'md'}
|
||||
boxShadow={'sm'}
|
||||
h={9}
|
||||
|
||||
>
|
||||
<TabList bg={'#FFFFFF'} borderRadius={'md'} boxShadow={'sm'} h={9}>
|
||||
<Tab
|
||||
_selected={{ color: "#fff", bg: "#3725EA" }}
|
||||
// _hover={{ color: "#fff", bg: "#ddd" }}
|
||||
color="black" bg="transparent"
|
||||
py={3}
|
||||
px={16}
|
||||
borderLeftRadius={'md'}
|
||||
@@ -179,7 +160,6 @@ const Requests = () => {
|
||||
</Tab>
|
||||
<Tab
|
||||
_selected={{ color: "#fff", bg: "#3725EA" }}
|
||||
color="black" bg="transparent"
|
||||
py={3}
|
||||
px={16}
|
||||
fontWeight={'600'}
|
||||
@@ -189,123 +169,29 @@ const Requests = () => {
|
||||
</Tab>
|
||||
</TabList>
|
||||
|
||||
{/* Tab panels */}
|
||||
<TabPanels>
|
||||
<TabPanel py={'4'} pl={'0'} pr={'0'}>
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
minH={"100%"}
|
||||
>
|
||||
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
|
||||
<Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
|
||||
Expenses
|
||||
</Text>
|
||||
<HStack w={"100%"} justifyContent={"space-between"}>
|
||||
<HStack>
|
||||
<Button
|
||||
fontWeight={500}
|
||||
size={"sm"}
|
||||
leftIcon={<CalendarIcon color={"purple.800"} />}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
fontSize={"xs"}
|
||||
>
|
||||
Select Date Range
|
||||
</Button>
|
||||
<Button
|
||||
as={"a"}
|
||||
fontWeight={500}
|
||||
size={"sm"}
|
||||
color="#667085"
|
||||
fontSize={"xs"}
|
||||
bg={"transparent"}
|
||||
_hover={"none"}
|
||||
cursor={"pointer"}
|
||||
textDecoration={"underline"}
|
||||
>
|
||||
Select all
|
||||
</Button>
|
||||
|
||||
</HStack>
|
||||
|
||||
<PrimaryButton onClick={onOpen} title={"Add to Report"} />
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Divider />
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
<TabPanel py={4} pl={0} pr={0}>
|
||||
<AdvanceExpense
|
||||
tableHeadRow={tableHeadRow}
|
||||
extractedArray={extractedArray}
|
||||
isLoading={isLoading}
|
||||
onOpen={onOpen}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel py={'4'} pl={'0'} pr={'0'}>
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
minH={"100%"}
|
||||
>
|
||||
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
|
||||
<Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
|
||||
Expenses
|
||||
</Text>
|
||||
<HStack w={"100%"} justifyContent={"space-between"}>
|
||||
<HStack>
|
||||
<Button
|
||||
fontWeight={500}
|
||||
size={"sm"}
|
||||
leftIcon={<CalendarIcon color={"purple.800"} />}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
fontSize={"xs"}
|
||||
>
|
||||
Select Date Range
|
||||
</Button>
|
||||
<Button
|
||||
as={"a"}
|
||||
fontWeight={500}
|
||||
size={"sm"}
|
||||
color="#667085"
|
||||
fontSize={"xs"}
|
||||
bg={"transparent"}
|
||||
_hover={"none"}
|
||||
cursor={"pointer"}
|
||||
textDecoration={"underline"}
|
||||
>
|
||||
Select all
|
||||
</Button>
|
||||
|
||||
</HStack>
|
||||
|
||||
<PrimaryButton onClick={onOpen} title={"Add to Report"} />
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Divider />
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
<TabPanel py={4} pl={0} pr={0}>
|
||||
<Reimbursement
|
||||
tableHeadRow={tableHeadRow}
|
||||
extractedArray={extractedArray}
|
||||
isLoading={isLoading}
|
||||
onOpen={onOpen}
|
||||
/>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
|
||||
</Box>
|
||||
|
||||
<AddReportModal isOpen={isOpen} onClose={onClose}/>
|
||||
<AddReportModal isOpen={isOpen} onClose={onClose} />
|
||||
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -7,6 +7,9 @@ import Requests from "../Pages/Requests/Requests";
|
||||
import Benefit from "../Pages/Benefit/Benefit";
|
||||
import Gifts from "../Pages/Gifts/Gifts";
|
||||
import HelpAndSupport from "../Pages/HelpAndSupport/HelpAndSupport";
|
||||
import Profile from "../Pages/Profile/Profile";
|
||||
import EditProfile from "../Pages/Profile/EditProfile";
|
||||
|
||||
|
||||
export const RouteLink = [
|
||||
|
||||
@@ -19,4 +22,6 @@ export const RouteLink = [
|
||||
{ path: "/benefit", Component: Benefit },
|
||||
{ path: "/gifts", Component: Gifts },
|
||||
{ path: "/help-support", Component: HelpAndSupport },
|
||||
{ path: "/profile", Component: Profile },
|
||||
{ path: "/profile/edit-profile", Component: EditProfile },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user