From 8be0bd93d2b73b86a9c76c2471a84b95ddc8dc39 Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Fri, 6 Sep 2024 16:04:08 +0530
Subject: [PATCH] Image upload in profile pending

---
 src/Components/HeaderMain.jsx         |   6 +-
 src/Pages/Profile/EditProfile.jsx     | 104 ++++++++++++++
 src/Pages/Profile/Profile.jsx         | 175 ++++++++++++++++++++++++
 src/Pages/Report/AddNewReport.jsx     |   2 +-
 src/Pages/Requests/AdvanceExpense.jsx |  63 +++++++++
 src/Pages/Requests/Reimbursement.jsx  |  63 +++++++++
 src/Pages/Requests/Requests.jsx       | 188 +++++---------------------
 src/Routes/Routes.js                  |   5 +
 8 files changed, 452 insertions(+), 154 deletions(-)
 create mode 100644 src/Pages/Profile/EditProfile.jsx
 create mode 100644 src/Pages/Profile/Profile.jsx
 create mode 100644 src/Pages/Requests/AdvanceExpense.jsx
 create mode 100644 src/Pages/Requests/Reimbursement.jsx

diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index 18143b4..1e47937 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -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
diff --git a/src/Pages/Profile/EditProfile.jsx b/src/Pages/Profile/EditProfile.jsx
new file mode 100644
index 0000000..8fa559e
--- /dev/null
+++ b/src/Pages/Profile/EditProfile.jsx
@@ -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;
diff --git a/src/Pages/Profile/Profile.jsx b/src/Pages/Profile/Profile.jsx
new file mode 100644
index 0000000..46d8dd0
--- /dev/null
+++ b/src/Pages/Profile/Profile.jsx
@@ -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;
diff --git a/src/Pages/Report/AddNewReport.jsx b/src/Pages/Report/AddNewReport.jsx
index f7ad753..17ce5d0 100644
--- a/src/Pages/Report/AddNewReport.jsx
+++ b/src/Pages/Report/AddNewReport.jsx
@@ -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>
diff --git a/src/Pages/Requests/AdvanceExpense.jsx b/src/Pages/Requests/AdvanceExpense.jsx
new file mode 100644
index 0000000..6206fad
--- /dev/null
+++ b/src/Pages/Requests/AdvanceExpense.jsx
@@ -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;
diff --git a/src/Pages/Requests/Reimbursement.jsx b/src/Pages/Requests/Reimbursement.jsx
new file mode 100644
index 0000000..551a31e
--- /dev/null
+++ b/src/Pages/Requests/Reimbursement.jsx
@@ -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;
diff --git a/src/Pages/Requests/Requests.jsx b/src/Pages/Requests/Requests.jsx
index f7fa210..dc75d0f 100644
--- a/src/Pages/Requests/Requests.jsx
+++ b/src/Pages/Requests/Requests.jsx
@@ -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>
   );
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index add1fce..a891fb4 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -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 },
 ];