update

src/Components/HeaderMain.jsx

@@ -49,7 +49,7 @@ const HeaderMain = ({
   return (
     <Box
       w={"100%"}
-      h={{base:"8%", lg:"6%"}}
+      h={{base:"8%", lg:"8%"}}
       position={"relative"}
       className={` pt-2 pb-2  fw-400 border-bottom d-flex ${
         slideDirecttion ? " ps-2" : ""

src/Components/MiniHeader.jsx

@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 
 const MiniHeader = ({ title, subTitle, backButton }) => {
   const navigate = useNavigate();
-  const [firstPart, secondPart] = title.split(/ (.+)/);
+  const [firstPart, secondPart] = title && title?.split(/ (.+)/);
 
   return (
     <HStack gap={3} mb={4}>

src/Pages/Report/AddNewReport.jsx

@@ -0,0 +1,22 @@
+import { Box, Input, Text } from '@chakra-ui/react'
+import React from 'react'
+import MiniHeader from '../../Components/MiniHeader'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+
+const AddNewReport = () => {
+    return (
+        <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+            <MiniHeader
+                title={"Add New Report"}
+                backButton={true}
+                subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+            />
+            <Box>
+                <Text mb='8px' >Name of the Report</Text>
+                <Input placeholder='Basic usage' />
+            </Box>
+        </Box>
+    )
+}
+
+export default AddNewReport

src/Pages/Requests/Requests.jsx

@@ -23,8 +23,10 @@ import MiniHeader from "../../Components/MiniHeader";
 import NormalTable from "../../Components/DataTable/NormalTable";
 import { FaRegFilePdf } from "react-icons/fa";
 import { MdOutlineRamenDining } from "react-icons/md";
+import { useNavigate } from "react-router-dom";
 
 const Requests = () => {
+  const navigate = useNavigate()
   const { requestsTable } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -236,6 +238,8 @@ const Requests = () => {
                         // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
                         opacity: 1,
                       }}
+                      onClick={() => navigate('/reports/add-new-report')}
+
                     >
                       Add to Report
                     </Button>

src/Routes/Routes.js

@@ -1,5 +1,6 @@
 import Dashbaord from "../Pages/Dashbaord";
 import Expenses from "../Pages/Expenses";
+import AddNewReport from "../Pages/Report/AddNewReport";
 import Report from "../Pages/Report/Report";
 import Requests from "../Pages/Requests/Requests";
 
@@ -8,5 +9,6 @@ export const RouteLink = [
   { path: "/", Component: Dashbaord },
   { path: "/expenses", Component: Expenses },
   { path: "/reports", Component: Report },
+  { path: "/reports/add-new-report", Component: AddNewReport },
   { path: "/requests", Component: Requests },
 ];