From cf4dbec2c91aa0d713cf7c955453bc38e869c46b Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Thu, 5 Sep 2024 11:52:46 +0530
Subject: [PATCH] =?UTF-8?q?Table=20Optimize=20=F0=9F=99=8B=E2=80=8D?=
 =?UTF-8?q?=E2=99=80=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                               |    5 +
 src/App.css                              |    1 +
 src/Components/DataTable/NormalTable.jsx |   71 +-
 src/Components/EmptySearchList.jsx       |    4 +-
 src/Components/HeaderMain.jsx            |   14 +-
 src/Components/MiniHeader.jsx            |   69 +-
 src/Contexts/GlobalStateProvider.jsx     | 1900 ++--------------------
 src/Layout/DefaultLayout.jsx             |   37 +-
 src/Pages/Report/Report.jsx              |  176 +-
 src/Pages/Requests/Requests.jsx          |    1 +
 10 files changed, 453 insertions(+), 1825 deletions(-)

diff --git a/index.html b/index.html
index 5ca0de8..1c93d30 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,11 @@ const craftedMsg = "Crafted with ❤️ by WDI Team for a better web.";
 <!-- <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+<!-- <script>
+  document.addEventListener('contextmenu', function (event) {
+    event.preventDefault();
+  });
+</script> -->
 
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
index 2ffbf6b..cb3ff02 100644
--- a/src/App.css
+++ b/src/App.css
@@ -27,6 +27,7 @@
   background: linear-gradient(
     to right,
     #7a45fb,
+    /* #764aaf67, */
     #de41b5
   ); /* Gradient background */
   -webkit-background-clip: text; /* Clip text to the background area */
diff --git a/src/Components/DataTable/NormalTable.jsx b/src/Components/DataTable/NormalTable.jsx
index 0ae24b8..4456794 100644
--- a/src/Components/DataTable/NormalTable.jsx
+++ b/src/Components/DataTable/NormalTable.jsx
@@ -20,39 +20,48 @@ const DataTable = ({
   tableHeadRow,
   emptyMessage,
   centered,
+  total,
 }) => {
-
   console.log(data);
-  
+
   const columnWidth =
     data && data[0]
       ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
       : "auto";
   return (
-    <TableContainer overflowX={"hidden"} className="h-auto mb-3 w-100">
+    <TableContainer
+      overflowX={"auto"}
+      className="h-auto w-100 table-scroll"
+    >
       {data?.length === 0 ? (
         <EmptySearchList message={emptyMessage} />
       ) : (
         <Table size="sm">
-          <TableCaption>Tanami v1.0.0</TableCaption>
-          <Thead backgroundColor="gray.50">
+          <TableCaption p={total ? 0 : null}>
+            {total ? total : "OptiFii v1.0.0"}
+          </TableCaption>
+          <Thead 
+          // bgGradient="linear(to-r, gray.50, gray.50)"
+          bg="#6311cb37"
+          >
             <Tr>
               {tableHeadRow.map((heading, index) => (
                 <Th
+                  color={"purple.900"}
+                  // fontSize={'sm'}
                   textAlign={
                     tableHeadRow.length - 1 === index || centered
                       ? "center"
                       : "left"
                   }
                   key={index}
-                  p={3}
-                  width="20px" // Adjust width as needed
-                  color={"#004118"}
+                  p={4}
+                  // width="20px" // Adjust width as needed
+                  // color={"#fff"}
                   whiteSpace="normal" // Allow text to wrap
                   wordBreak="normal" // Ensure long words break properly
                   overflowWrap="normal" // Break long words if necessary
-                  textTransform={'none'}
-                  
+                  textTransform={"none"}
                 >
                   {isLoading ? <Skeleton height="20px" /> : heading}
                   {/* {heading} */}
@@ -62,26 +71,29 @@ const DataTable = ({
           </Thead>
           <Tbody className="web-text-small">
             {isLoading
-              ? Array.from({ length: TABLE_PAGINATION?.size }).map((_, index) => (
-                  <Tr key={index}>
-                    {tableHeadRow.map((_, i) => (
-                      <Td
-                      width={'fit-content'}
-                        key={i}
-                        style={{
-                          whiteSpace: "nowrap",
-                          textOverflow: "ellipsis",
-                        }}
-                        className="web-text-small"
-                        w={columnWidth}
-                      >
-                        <Skeleton height="20px" mb={1} mt={1} />
-                      </Td>
-                    ))}
-                  </Tr>
-                ))
+              ? Array.from({ length: TABLE_PAGINATION?.size }).map(
+                  (_, index) => (
+                    <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
+                      {tableHeadRow.map((_, i) => (
+                        <Td
+                          // width={"fit-content"}
+                          key={i}
+                          style={{
+                            whiteSpace: "nowrap",
+                            textOverflow: "ellipsis",
+                          }}
+
+                          className="web-text-small"
+                          // w={columnWidth}
+                        >
+                          <Skeleton height="20px" mb={1} mt={1} />
+                        </Td>
+                      ))}
+                    </Tr>
+                  )
+                )
               : data?.map((item, index) => (
-                  <Tr key={index}>
+                  <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
                     {tableHeadRow.map((heading, i) => (
                       <Td
                         textAlign={
@@ -91,6 +103,7 @@ const DataTable = ({
                         }
                         color={"gray.600"}
                         key={i}
+                        fontWeight={500}
                         style={{
                           whiteSpace: "nowrap",
                           textOverflow: "ellipsis",
diff --git a/src/Components/EmptySearchList.jsx b/src/Components/EmptySearchList.jsx
index f78ab51..aee0636 100644
--- a/src/Components/EmptySearchList.jsx
+++ b/src/Components/EmptySearchList.jsx
@@ -1,6 +1,6 @@
 import { Box, Image, Text } from "@chakra-ui/react"
 // import EmptySearchListImage from "../assets/empty_state_empty_folder.svg"
-import EmptySearchListImage from "../assets/EmptySearchList.png"
+// import EmptySearchListImage from "../assets/EmptySearchList.png"
 
 const EmptySearchList = ({message}) => {
   return (
@@ -11,7 +11,7 @@ const EmptySearchList = ({message}) => {
     flexDirection={'column'}
     w={"100%"} h={"40vh"}  
     >
-        <Image w={200} mb={8}  src={EmptySearchListImage} alt='empty list' />
+        {/* <Image w={200} mb={8}  src={EmptySearchListImage} alt='empty list' /> */}
         {/* <Text className=" fw-bold fs-5" >{message}</Text> */}
         <Text className=" fw-bold fs-5" >We do not have any records</Text>
         {/* <Text as={'p'} className="web-text-medium">Posts of tanami will appear here.</Text> */}
diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index ca87df5..c8e77e7 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -49,7 +49,7 @@ const HeaderMain = ({
   return (
     <Box
       w={"100%"}
-      h={"8%"}
+      h={{base:"8%", lg:"6%"}}
       position={"relative"}
       className={` pt-2 pb-2  fw-400 border-bottom d-flex ${
         slideDirecttion ? " ps-2" : ""
@@ -88,7 +88,7 @@ const HeaderMain = ({
             {isDrawerOpen ? (
               <ArrowLeftIcon className="web-text-small" color={"#6311CB"} />
             ) : (
-              <ArrowRightIcon className="web-text-small " />
+              <ArrowRightIcon className="web-text-small "  color={"#6311CB"} />
             )}
           </Button>
         </Box>
@@ -108,15 +108,15 @@ const HeaderMain = ({
         </InputGroup>
       </Box>
       <Box display={"flex"} justifyContent={"space-between"}>
-        <Box display={"flex"}>
-          <Box me={10}>
-            <Button bg={"none"} p={0}>
+        <Box display={"flex"} gap={2}>
+          <Box display={"flex"} gap={2} alignItems={'center'} me={10}>
+            <Button size={'sm'} bg={"none"} p={0}>
               <MdOutlineHeadsetMic fontSize={"18px"} />
             </Button>
-            <Button bg={"none"} p={0}>
+            <Button size={'sm'} bg={"none"} p={0}>
               <RiWallet3Line fontSize={"18px"} />
             </Button>
-            <Button bg={"none"} p={0}>
+            <Button size={'sm'} bg={"none"} p={0}>
               <MdNotificationsNone fontSize={"20px"} />
             </Button>
           </Box>
diff --git a/src/Components/MiniHeader.jsx b/src/Components/MiniHeader.jsx
index cd2a13e..3f97e27 100644
--- a/src/Components/MiniHeader.jsx
+++ b/src/Components/MiniHeader.jsx
@@ -1,33 +1,48 @@
-import { ArrowBackIcon } from '@chakra-ui/icons';
-import { Box, HStack, Icon, Text, VStack } from '@chakra-ui/react'
-import React from 'react'
-import { useNavigate } from 'react-router-dom';
+import { ArrowBackIcon } from "@chakra-ui/icons";
+import { Box, HStack, Icon, Text, VStack } from "@chakra-ui/react";
+import React from "react";
+import { useNavigate } from "react-router-dom";
 
-const MiniHeader = ({title, subTitle, backButton}) => {
-  const navigate = useNavigate()
+const MiniHeader = ({ title, subTitle, backButton }) => {
+  const navigate = useNavigate();
   const [firstPart, secondPart] = title.split(/ (.+)/);
-  
+
   return (
-    <HStack gap={3}>
-      {backButton&&<Icon onClick={()=> navigate(-1)} as={ArrowBackIcon}  boxSize={7} bg={'#fff'} p={1}  rounded={'full'} />}
-    <VStack alignItems={'start'} gap={1} >
-      <Box  as='span' display={'flex'} gap={2}>
-        <Text fontSize={'lg'} as={'span'} fontWeight={600}>
-        {firstPart}
+    <HStack gap={3} mb={4}>
+      {backButton && (
+        <Icon
+          cursor={"pointer"}
+          onClick={() => navigate(-1)}
+          as={ArrowBackIcon}
+          boxSize={7}
+          bg={"#fff"}
+          p={1}
+          rounded={"full"}
+        />
+      )}
+      <VStack alignItems={"start"} gap={1}>
+        <Box as="span" display={"flex"} gap={2}>
+          <Text fontSize={"lg"} as={"span"} fontWeight={600}>
+            {firstPart}
+          </Text>
+
+          <Text
+            bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+            bgClip="text"
+            fontSize={"lg"}
+            as={"span"}
+            fontWeight={600}
+          >
+            {secondPart}
+          </Text>
+        </Box>
+
+        <Text fontSize={"xs"} color={"gray.500"} fontWeight={500} as={"span"}>
+          {subTitle}
         </Text>
-
-        <Text 
-  bgGradient='linear(to-l, #3725EA, #5E0FCD)'
-  bgClip='text' fontSize={'lg'} as={'span'} fontWeight={600}>
-        {secondPart}
-        </Text>
-      </Box>
-
-      <Text fontSize={'xs'} color={'gray.500'} fontWeight={500} as={'span'}>{subTitle}</Text>
-
-    </VStack>
+      </VStack>
     </HStack>
-  )
-}
+  );
+};
 
-export default MiniHeader
\ No newline at end of file
+export default MiniHeader;
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index aac69de..f6cf43a 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -41,1773 +41,185 @@ export const generateUniqueId = () => {
 
 const GlobalStateProvider = ({ children }) => {
   const [isAuthenticate, setIsAuthenticate] = useState(false);
-  const [memberIfo, setMemberInfo] = useState();
-  const [communityMembers, setCommityMembers] = useState();
-  const [slideFromRight, setSlideFormRight] = useState(false);
-  const { colorMode, toggleColorMode } = useColorMode();
-  const [sponser, setSponser] = useState([]);
-
-  const [investors, setInvestors] = useState([
+  const [ reportsHistory, setReportsHistory ] = useState([
     {
-      id: 1,
-      clientId: "BH00000001",
-      firstName: "Faisal",
-      lastName: "Aljalahma",
-      investedAmount: 100000,
-      percentage: "10.0%",
-      marketValue: 114050,
-      returnOnInvestment: "14.1%",
-      distribution: 5000,
-      totalReturn: 62025,
-      totalReturnOnInvestment: "24.1%",
+      "id": 1,
+      "name": "Office Supplies - July 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Approved"
     },
     {
-      id: 2,
-      clientId: "BH00000002",
-      firstName: "Sara",
-      lastName: "Ahmed",
-      investedAmount: 150000,
-      percentage: "15.0%",
-      marketValue: 171075,
-      returnOnInvestment: "14.05%",
-      distribution: 7500,
-      totalReturn: 93038,
-      totalReturnOnInvestment: "25.5%",
+      "id": 2,
+      "name": "Travel Reimbursement - Q2 2024",
+      "lastUpdated": "15-08-2024 02:45 pm",
+      "reportType": "Expense",
+      "totalExpense": 1250.00,
+      "status": "Approved"
     },
     {
-      id: 3,
-      clientId: "BH00000003",
-      firstName: "Ali",
-      lastName: "Khan",
-      investedAmount: 200000,
-      percentage: "20.0%",
-      marketValue: 228100,
-      returnOnInvestment: "14.05%",
-      distribution: 10000,
-      totalReturn: 124050,
-      totalReturnOnInvestment: "31.0%",
+      "id": 3,
+      "name": "Client Meeting Expenses - August 2024",
+      "lastUpdated": "28-08-2024 09:30 am",
+      "reportType": "Expense",
+      "totalExpense": 600.50,
+      "status": "Fully Reimbursed"
     },
     {
-      id: 4,
-      clientId: "BH00000004",
-      firstName: "Laila",
-      lastName: "Hassan",
-      investedAmount: 250000,
-      percentage: "25.0%",
-      marketValue: 285125,
-      returnOnInvestment: "14.05%",
-      distribution: 12500,
-      totalReturn: 155063,
-      totalReturnOnInvestment: "37.0%",
+      "id": 4,
+      "name": "Marketing Campaign - Q3 2024",
+      "lastUpdated": "10-09-2024 11:00 am",
+      "reportType": "Expense",
+      "totalExpense": 2300.00,
+      "status": "Disapproved"
     },
     {
-      id: 5,
-      clientId: "BH00000005",
-      firstName: "Omar",
-      lastName: "Rahman",
-      investedAmount: 300000,
-      percentage: "30.0%",
-      marketValue: 342150,
-      returnOnInvestment: "14.05%",
-      distribution: 15000,
-      totalReturn: 186075,
-      totalReturnOnInvestment: "43.0%",
+      "id": 5,
+      "name": "Team Building Event - September 2024",
+      "lastUpdated": "22-09-2024 04:20 pm",
+      "reportType": "Expense",
+      "totalExpense": 800.00,
+      "status": "Fully Reimbursed"
     },
     {
-      id: 6,
-      clientId: "BH00000006",
-      firstName: "Aisha",
-      lastName: "Saeed",
-      investedAmount: 350000,
-      percentage: "35.0%",
-      marketValue: 399175,
-      returnOnInvestment: "14.05%",
-      distribution: 17500,
-      totalReturn: 217088,
-      totalReturnOnInvestment: "49.0%",
+      "id": 6,
+      "name": "Office Renovation - Phase 1",
+      "lastUpdated": "30-09-2024 03:10 pm",
+      "reportType": "Expense",
+      "totalExpense": 4500.00,
+      "status": "Saved"
     },
     {
-      id: 7,
-      clientId: "BH00000007",
-      firstName: "Mohammed",
-      lastName: "Yousef",
-      investedAmount: 400000,
-      percentage: "40.0%",
-      marketValue: 456200,
-      returnOnInvestment: "14.05%",
-      distribution: 20000,
-      totalReturn: 248100,
-      totalReturnOnInvestment: "55.0%",
+      "id": 7,
+      "name": "Software Licenses - 2024 Renewal",
+      "lastUpdated": "05-10-2024 01:50 pm",
+      "reportType": "Expense",
+      "totalExpense": 3200.00,
+      "status": "Saved"
     },
     {
-      id: 8,
-      clientId: "BH00000008",
-      firstName: "Fatima",
-      lastName: "Jaber",
-      investedAmount: 450000,
-      percentage: "45.0%",
-      marketValue: 513225,
-      returnOnInvestment: "14.05%",
-      distribution: 22500,
-      totalReturn: 279113,
-      totalReturnOnInvestment: "61.0%",
+      "id": 8,
+      "name": "Conference Attendance - October 2024",
+      "lastUpdated": "15-10-2024 09:00 am",
+      "reportType": "Expense",
+      "totalExpense": 1500.00,
+      "status": "Partially Reimbursed"
     },
     {
-      id: 9,
-      clientId: "BH00000009",
-      firstName: "Yasin",
-      lastName: "Abdullah",
-      investedAmount: 500000,
-      percentage: "50.0%",
-      marketValue: 570250,
-      returnOnInvestment: "14.05%",
-      distribution: 25000,
-      totalReturn: 310125,
-      totalReturnOnInvestment: "67.0%",
-    },
-    {
-      id: 10,
-      clientId: "BH00000010",
-      firstName: "Zara",
-      lastName: "Mustafa",
-      investedAmount: 550000,
-      percentage: "55.0%",
-      marketValue: 627275,
-      returnOnInvestment: "14.05%",
-      distribution: 27500,
-      totalReturn: 341138,
-      totalReturnOnInvestment: "73.0%",
-    },
-  ]);
-
-  const [caseDetails, setCaseDetails] = useState([
-    {
-      id: 1,
-      date: "02-Jan-24",
-      particulars: "Cash Reserve- Initated",
-      amount: "50,000.00",
-      comments: " ",
-      updateBy: "Faisal",
-      updateOn: "02-Jan-24",
-    },
-    {
-      id: 2,
-      date: "12-Feb-24",
-      particulars: "Fees & Expense",
-      amount: "22,000.00",
-      comments: "Fees = $20,000 Expense = $2,000 ",
-      updateBy: "Faisal",
-      updateOn: "13-Feb-24",
-    },
-    {
-      id: 3,
-      date: "23-Mar-24",
-      particulars: "Distribution Received From Sponsor",
-      amount: "50,000.00",
-      comments: " ",
-      updateBy: "Nawab",
-      updateOn: "24-Mar-24",
-    },
-    {
-      id: 4,
-      date: "28-Mar-24",
-      particulars: "Distribution Paid To Investors",
-      amount: "40,000.00",
-      comments: " ",
-      updateBy: "Faisal",
-      updateOn: "28-Mar-24",
-    },
-    {
-      id: 5,
-      date: "26-Jun-24",
-      particulars: "Distribution Received From Sponsor",
-      amount: "70,000.00",
-      comments: " ",
-      updateBy: "Faisal",
-      updateOn: "27-Jun-24",
-    },
-    {
-      id: 6,
-      date: "02-Jan-24",
-      particulars: "Distribution Paid To Investors",
-      amount: "60,000.00",
-      comments: " ",
-      updateBy: "Nawab",
-      updateOn: "28-Jun-24",
-    },
-  ]);
-
-  const [navDetails, setNavDetails] = useState([
-    {
-      id: 1,
-      date: "02-Jan-24",
-      IONavValue: 1229750,
-      comments: "MV Increased by 10%",
-      updateBy: "Faisal",
-      updateOn: "02-Jan-24",
-    },
-    {
-      id: 2,
-      date: "02-Jan-24",
-      IONavValue: 1229750,
-      comments: "MV Increased by 10%",
-      updateBy: "Faisal",
-      updateOn: "13-Feb-24",
-    },
-  ]);
-
-  const [create, setCreate] = useState([
-    {
-      id: 1,
-      Type: <GrDocumentPdf />,
-      fileName: "Investment Private Company",
-      document: "Investment.pdf",
-      status: true,
-    },
-    {
-      id: 2,
-      Type: <AiOutlineFileGif fontSize={25} />,
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
-    },
-  ]);
-  const [keyMerits, setKeyMerits] = useState([
-    {
-      id: 1,
-      title: "Diversified Holdings",
-      subTitle:
-        "Private equity portfolio of over 60 companies in various sectors and different countries around the world",
-      Icon: <TbClock2 fontSize={"18px"} />,
-      status: true,
-    },
-    {
-      id: 2,
-      title: "Top-Tier Manager",
-      subTitle:
-        "KKR is a world-class global PE manager with over $570bn in assets under management",
-      Icon: <CiWallet fontSize={"18px"} />,
-      status: true,
-    },
-    {
-      id: 3,
-      title: "Strong performance",
-      subTitle:
-        "Direct exposure to the KKR’s best performing Buyout and Growth funds",
-      Icon: <HiOutlineReceiptPercent fontSize={"18px"} />,
-      status: true,
-    },
-    {
-      id: 4,
-      title: "Leading Track Record",
-      subTitle:
-        "Almost 50 year track record since 1977 of consistent, double-digit annual returns",
-      Icon: <IoMdQrScanner fontSize={"18px"} />,
-      status: true,
-    },
-  ]);
-  const [iOArtifacts, setIOArtifacts] = useState([
-    {
-      id: 1,
-      fileName: "Banner image",
-      document: "Banner.jpg",
-      status: true,
-    },
-    {
-      id: 2,
-      fileName: "Banner image",
-      document: "Banner.jpg",
-      status: true,
-    },
-    {
-      id: 3,
-      fileName: "Banner image",
-      document: "Banner.jpg",
-      status: true,
-    },
-    {
-      id: 4,
-      fileName: "Banner image",
-      document: "Banner.jpg",
-      status: true,
-    },
-  ]);
-
-  const [iOArtifactsTwo, setIOArtifactsTwo] = useState([
-    {
-      id: 1,
-      videoFileName: "Property preview",
-      status: true,
-    },
-    {
-      id: 2,
-      videoFileName: "Property preview",
-      status: true,
-    },
-    {
-      id: 3,
-      videoFileName: "Property preview",
-      status: true,
-    },
-    {
-      id: 4,
-      videoFileName: "Property preview",
-      status: true,
-    },
-  ]);
-
-  const [investmentType, setInvestmentType] = useState([
-    {
-      id: 1,
-      investmentName: "Commercial",
-      description: "Investment Private Company",
-      investmentNameArabic: "لعفكعلفكع كعلجلجعيجكجلدسجوي",
-      descriptionArabic: "لعفكعلفكع كعلجلجع",
-      status: true,
-    },
-  ]);
-  const [investment, setInvestment] = useState([
-    // {
-    //   banner_image:
-    //     "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
-    //   ioName: "Multi Family Residence Portfolio",
-    //   sponserName: "KKR",
-    //   annualReturn: "12.5%",
-    //   annualyield: "12.5%",
-    //   minInvests: ",00 $0",
-    //   targetClose: "24 December",
-    //   year: "5-7 years",
-    //   tenure: 92,
-    //   quaterly: "Q2",
-    //   destributedAmount: 62,
-    //   ioName: "Sybil Christensen",
-    //   ioNameArabic: "September Kelley",
-    //   status: "Available"
-    // },
-    // {
-    //   banner_image:
-    //     "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
-    //   ioName: "Multi Family Residence Portfolio",
-    //   sponserName: "KKR",
-    //   annualReturn: "12.5%",
-    //   annualyield: "12.5%",
-    //   minInvests: ",00 $0",
-    //   targetClose: "24 December",
-    //   year: "5-7 years",
-    //   tenure: 92,
-    //   quaterly: "Q2",
-    //   destributedAmount: 62,
-    //   ioName: "Sybil Christensen",
-    //   ioNameArabic: "September Kelley",
-    //   status: "Available"
-    // },
-    // {
-    //   banner_image:
-    //     "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
-    //   ioName: "Multi Family Residence Portfolio",
-    //   sponserName: "KKR",
-    //   annualReturn: "12.5%",
-    //   annualyield: "12.5%",
-    //   minInvests: ",00 $0",
-    //   targetClose: "24 December",
-    //   year: "5-7 years",
-    //   tenure: 92,
-    //   quaterly: "Q2",
-    //   destributedAmount: 62,
-    //   ioName: "Sybil Christensen",
-    //   ioNameArabic: "September Kelley",
-    //   status: "Available"
-    // },
-  ]);
-  const [rateExchange, setRateExchange] = useState([
-    {
-      id: uuidv4(),
-      fromCurr: "USD $",
-      toCurr: "BHD .د.ب;",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-    {
-      id: uuidv4(),
-      fromCurr: "USD $",
-      toCurr: "KWD ·د.ك",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-    {
-      id: uuidv4(),
-      fromCurr: "USD $",
-      toCurr: "OMR ﷼.",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-    {
-      id: uuidv4(),
-      fromCurr: "USD $",
-      toCurr: "QAR ﷼.",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-    {
-      id: uuidv4(),
-      fromCurr: "USD $",
-      toCurr: "SAR ﷼.",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-    {
-      id: uuidv4(),
-      fromCurr: "USD $",
-      toCurr: "AED د.إ. ",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-
-    {
-      id: uuidv4(),
-      fromCurr: "AED د.إ. ",
-      toCurr: "USD $",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-    {
-      id: uuidv4(),
-      fromCurr: "SAR ﷼.",
-      toCurr: "USD $",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-    {
-      id: uuidv4(),
-      fromCurr: "QAR ﷼.",
-      toCurr: "USD $",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-
-    {
-      id: uuidv4(),
-      fromCurr: "BHD .د.ب;",
-      toCurr: "USD $",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-    {
-      id: uuidv4(),
-      fromCurr: "KWD ·د.ك",
-      toCurr: "USD $",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-    {
-      id: uuidv4(),
-      fromCurr: "OMR ﷼.",
-      toCurr: "USD $",
-      effectFrom: getRandomDate(startDate, endDate),
-      effectTill: getRandomDate(startDate, endDate),
-      rate: 2.66,
-    },
-  ]);
-  const [InvestorDetails, setInvestorDetails] = useState([ 
-    {
-      id: 1,
-      clientId: "SA00000001",
-      fullName: "John David",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      address: "Saudi Arabia",
-      emailID: "john@gmail.com",
-      InvestorType:"Retail",
-      bankName: "Lorem Text",
-      branchAddress: "Hohenzollernring 58, 95444",
-      iban: "DE 1234 5678 9012 3456",
-      swiftCode: "BC12345",
-      referenceID: "FRYU FHDU 1234",
-      kycStatus: "Completed",
-      status: "Unban",
-    },
-    {
-      id: 2,
-      clientId: "SA00000001",
-      fullName: "John David",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      address: "Saudi Arabia",
-      emailID: "john@gmail.com",
-      InvestorType:"Accredited Investors",
-      bankName: "Lorem Text",
-      branchAddress: "Hohenzollernring 58, 95444",
-      iban: "DE 1234 5678 9012 3456",
-      swiftCode: "BC12345",
-      referenceID: "FRYU FHDU 1234",
-      kycStatus: "Incompleted",
-      status: "Unban",
-    },
-    {
-      id: 3,
-      clientId: "SA00000001",
-      fullName: "John David",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      address: "Saudi Arabia",
-      emailID: "john@gmail.com",
-      InvestorType:"Retail",
-      bankName: "Lorem Text",
-      branchAddress: "Hohenzollernring 58, 95444",
-      iban: "DE 1234 5678 9012 3456",
-      swiftCode: "BC12345",
-      referenceID: "FRYU FHDU 1234",
-      kycStatus: "Completed",
-      status: "Unban",
-    },
-    {
-      id: 4,
-      clientId: "SA00000001",
-      fullName: "John David",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      address: "Saudi Arabia",
-      emailID: "john@gmail.com",
-      InvestorType:"Accredited Investors",
-      bankName: "Lorem Text",
-      branchAddress: "Hohenzollernring 58, 95444",
-      iban: "DE 1234 5678 9012 3456",
-      swiftCode: "BC12345",
-      referenceID: "FRYU FHDU 1234",
-      kycStatus: "Incompleted",
-      status: "Unban",
-    },
-    {
-      id: 5,
-      clientId: "SA00000001",
-      fullName: "John David",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      address: "Saudi Arabia",
-      emailID: "john@gmail.com",
-      InvestorType:"Retail",
-      bankName: "Lorem Text",
-      branchAddress: "Hohenzollernring 58, 95444",
-      iban: "DE 1234 5678 9012 3456",
-      swiftCode: "BC12345",
-      referenceID: "FRYU FHDU 1234",
-      kycStatus: "Completed",
-      status: "Unban",
-    },
-    {
-      id: 6,
-      clientId: "SA00000001",
-      fullName: "John David",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      address: "Saudi Arabia",
-      emailID: "john@gmail.com",
-      InvestorType:"Accredited Investors",
-      bankName: "Lorem Text",
-      branchAddress: "Hohenzollernring 58, 95444",
-      iban: "DE 1234 5678 9012 3456",
-      swiftCode: "BC12345",
-      referenceID: "FRYU FHDU 1234",
-      kycStatus: "Completed",
-      status: "Unban",
-    },
-    {
-      id: 7,
-      clientId: "SA00000001",
-      fullName: "John David",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      address: "Saudi Arabia",
-      emailID: "john@gmail.com",
-      InvestorType:"Retail",
-      bankName: "Lorem Text",
-      branchAddress: "Hohenzollernring 58, 95444",
-      iban: "DE 1234 5678 9012 3456",
-      swiftCode: "BC12345",
-      referenceID: "FRYU FHDU 1234",
-      kycStatus: "Incompleted",
-      status: "Unban",
-    },
-    {
-      id: 8,
-      clientId: "SA00000001",
-      fullName: "John David",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      address: "Saudi Arabia",
-      emailID: "john@gmail.com",
-      InvestorType:"Accredited Investors",
-      bankName: "Lorem Text",
-      branchAddress: "Hohenzollernring 58, 95444",
-      iban: "DE 1234 5678 9012 3456",
-      swiftCode: "BC12345",
-      referenceID: "FRYU FHDU 1234",
-      kycStatus: "Incompleted",
-      status: "Unban",
-    },
-    {
-      id: 9,
-      clientId: "SA00000001",
-      fullName: "John David",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      address: "Saudi Arabia",
-      emailID: "john@gmail.com",
-      InvestorType:"Retail",
-      bankName: "Lorem Text",
-      branchAddress: "Hohenzollernring 58, 95444",
-      iban: "DE 1234 5678 9012 3456",
-      swiftCode: "BC12345",
-      referenceID: "FRYU FHDU 1234",
-      kycStatus: "Completed",
-      status: "Unban",
-    },
-    {
-      id: 10,
-      clientId: "SA00000001",
-      fullName: "John David",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      address: "Saudi Arabia",
-      emailID: "john@gmail.com",
-      InvestorType:"Accredited Investors",
-      bankName: "Lorem Text",
-      branchAddress: "Hohenzollernring 58, 95444",
-      iban: "DE 1234 5678 9012 3456",
-      swiftCode: "BC12345",
-      referenceID: "FRYU FHDU 1234",
-      kycStatus: "Completed",
-      status: "Unban",
-    },
-  ]);
-
-  const [viewInvestor, setViewInvestor] = useState([
-    {
-      id: 1,
-      dealId: "UWE3424992",
-      dealName: "KKR Private Equity Fund",
-      sponsorName: "KKR",
-      investAmount: "$100,000",
-      holdingPeriod: "4-5 years",
-      estimatedReturn: "50-60%",
-      kycStatus: "Open",
-    },
-    {
-      id: 2,
-      dealId: "UWE3424992",
-      dealName: "Blackstone Real Estate Income Trust",
-      sponsorName: "Blackstone",
-      investAmount: "$100,000",
-      holdingPeriod: "4-5 years",
-      estimatedReturn: "50-60%",
-      kycStatus: "Pending",
-    },
-    {
-      id: 3,
-      dealId: "UWE3424992",
-      dealName: "J.P. Morgan",
-      sponsorName: "J.P. Morgan",
-      investAmount: "$100,000",
-      holdingPeriod: "4-5 years",
-      estimatedReturn: "50-60%",
-      kycStatus: "Closed",
-    },
-  ]);
-  const [transaction, setTransaction] = useState([
-    {
-      id: 1,
-      date: "2-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "12000.00",
-      fromUSD: "",
-      toUSD: "2.6376",
-      USDamount: "31,651.20",
-      IOName:"",
-      paymentMethod:"Bank"
-    },
-    {
-      id: 2,
-      date: "6-Jan-24",
-      transaction: "Invested",
-      currency: "BHD",
-      amount: "-4000.00",
-      fromUSD: "",
-      toUSD: "2.6376",
-      USDamount: "-10,550.40",
-      IOName:"KKR Private Equity Fund",
-      paymentMethod:"-"
-    },
-    {
-      id: 3,
-      date: "7-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "4000.00",
-      fromUSD: "",
-      toUSD: "2.6376",
-      USDamount: "10,550.40",
-      IOName:"-",
-      paymentMethod:"Apple Pay"
-    },
-    {
-      id: 4,
-      date: "8-Jan-24",
-      transaction: "Invested",
-      currency: "BHD",
-      amount: "-3000.00",
-      fromUSD: "",
-      toUSD: "2.6376",
-      USDamount: "-7,912.80",
-      IOName:"Black Stone Real Estate Income Trust",
-      paymentMethod:"-"
-    },
-    {
-      id: 5,
-      date: "2-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "12000.00",
-      fromUSD: "0.3747",
-      toUSD: "",
-      USDamount: "31,651.20",
-      IOName:"KKR Private Equity Fund",
-      paymentMethod:"-"
-    },
-    {
-      id: 6,
-      date: "2-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "12000.00",
-      fromUSD: "0.3747",
-      toUSD: "",
-      USDamount: "31,651.20",
-      IOName:"Black Stone Real Estate Income Trust",
-      paymentMethod:"-"
-    },
-    {
-      id: 7,
-      date: "2-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "12000.00",
-      fromUSD: "0.3747",
-      toUSD: "",
-      USDamount: "31,651.20",
-      IOName:"KKR Private Equity Fund",
-      paymentMethod:"-"
-    },
-    {
-      id: 8,
-      date: "2-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "12000.00",
-      fromUSD: "",
-      toUSD: "2.6376",
-      USDamount: "31,651.20",
-      IOName:"",
-      paymentMethod:"Bank"
-    },
-  ]);
-
-  const [investorTransaction, setInvestorTransaction] = useState([
-    {
-      id: 1,
-      InvestorName: "ICC",
-      Sponsor: "Adani",
-      InvestmentAmount: "1000000",
-      Action: "Distribute",
-    },
-    {
-      id: 2,
-      InvestorName: "ECHO Investment",
-      Sponsor: "Tata",
-      InvestmentAmount: "2500000",
-      Action: "Distribute",
-    },
-    {
-      id: 3,
-      InvestorName: "ICC",
-      Sponsor: "Adani",
-      InvestmentAmount: "1000000",
-      Action: "Distribute",
-    },
-    {
-      id: 4,
-      InvestorName: "ECHO Investment",
-      Sponsor: "Tata",
-      InvestmentAmount: "2500000",
-      Action: "Distribute",
-    },
-  ]);
-
-  const [pendingRequest, setPendingRequest] = useState([
-    {
-      id: 1,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      currency: "SAR",
-      withDrawalAmount: "$100,000",
-      amountcurrency: "382574.17",
-    },
-    {
-      id: 2,
-      date: "02-Jan-2024",
-      clientId: "KU00000001",
-      firstName: "Faisal",
-      lastName: "Aljalahma",
-      country: "Kuwait",
-      phoneNumber: "8226278945",
-      currency: "KWD",
-      withDrawalAmount: "$200,000",
-      amountcurrency: "62438.98",
-    },
-    {
-      id: 3,
-      date: "02-Jan-2024",
-      clientId: "BH00000001",
-      firstName: "Nawaf",
-      lastName: "Almaskati",
-      country: "Bahrain",
-      phoneNumber: "8940035906",
-      currency: "BHD",
-      withDrawalAmount: "$300,000",
-      amountcurrency: "115328.04",
-    },
-    {
-      id: 4,
-      date: "02-Jan-2024",
-      clientId: "SA00000002",
-      firstName: "Sulaiman",
-      lastName: "AlBassam",
-      country: "Saudi Arabia",
-      phoneNumber: "8226278945",
-      currency: "SAR",
-      withDrawalAmount: "$400,000",
-      amountcurrency: "1530296.67",
-    },
-  ]);
-  const [viewHistory, setViewHistory] = useState([
-    {
-      id: 1,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      currency: "SAR",
-      withDrawalAmount: "$100,000",
-      amountcurrency: "382574.17",
-      status: "Approved",
-    },
-    {
-      id: 2,
-      date: "02-Jan-2024",
-      clientId: "KU00000001",
-      firstName: "Faisal",
-      lastName: "Aljalahma",
-      country: "Kuwait",
-      phoneNumber: "8226278945",
-      currency: "KWD",
-      withDrawalAmount: "$200,000",
-      amountcurrency: "62438.98",
-      status: "Rejected",
-    },
-    {
-      id: 3,
-      date: "02-Jan-2024",
-      clientId: "BH00000001",
-      firstName: "Nawaf",
-      lastName: "Almaskati",
-      country: "Bahrain",
-      phoneNumber: "8940035906",
-      currency: "BHD",
-      withDrawalAmount: "$300,000",
-      amountcurrency: "115328.04",
-      status: "Approved",
-    },
-    {
-      id: 4,
-      date: "02-Jan-2024",
-      clientId: "SA00000002",
-      firstName: "Sulaiman",
-      lastName: "AlBassam",
-      country: "Saudi Arabia",
-      phoneNumber: "8226278945",
-      currency: "SAR",
-      withDrawalAmount: "$400,000",
-      amountcurrency: "1530296.67",
-      status: "Rejected",
-    },
-  ]);
-  const [upgradeHistory, setUpgradeHistory] = useState([
-    {
-      id: uuidv4(),
-      date: "2024-01-15",
-      Distribution: "Office supplies",
-      charge: "200.50",
-      year: "2024",
-      quarter: "Q1",
-      amount: 1500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-02-10",
-      Distribution: "Marketing expenses",
-      charge: "450.00",
-      year: "2024",
-      quarter: "Q1",
-      amount: 2000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-03-05",
-      Distribution: "Software subscription",
-      charge: "300.75",
-      year: "2024",
-      quarter: "Q1",
-      amount: 1200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-04-18",
-      Distribution: "Travel expenses",
-      charge: "600.30",
-      year: "2024",
-      quarter: "Q2",
-      amount: 2500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-05-22",
-      Distribution: "Consulting fees",
-      charge: "800.00",
-      year: "2024",
-      quarter: "Q2",
-      amount: 3000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-06-14",
-      Distribution: "Office rent",
-      charge: "1200.25",
-      year: "2024",
-      quarter: "Q2",
-      amount: 3500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-07-09",
-      Distribution: "Utilities",
-      charge: "150.40",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-08-29",
-      Distribution: "Employee training",
-      charge: "500.00",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1800,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-09-13",
-      Distribution: "Website maintenance",
-      charge: "350.65",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1400,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
-    },
-  ]);
-  const [deleteHistory, setDeleteHistory] = useState([
-    {
-      id: uuidv4(),
-      date: "2024-01-15",
-      Distribution: "Office supplies",
-      charge: "200.50",
-      year: "2024",
-      quarter: "Q1",
-      amount: 1500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-02-10",
-      Distribution: "Marketing expenses",
-      charge: "450.00",
-      year: "2024",
-      quarter: "Q1",
-      amount: 2000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-03-05",
-      Distribution: "Software subscription",
-      charge: "300.75",
-      year: "2024",
-      quarter: "Q1",
-      amount: 1200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-04-18",
-      Distribution: "Travel expenses",
-      charge: "600.30",
-      year: "2024",
-      quarter: "Q2",
-      amount: 2500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-05-22",
-      Distribution: "Consulting fees",
-      charge: "800.00",
-      year: "2024",
-      quarter: "Q2",
-      amount: 3000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-06-14",
-      Distribution: "Office rent",
-      charge: "1200.25",
-      year: "2024",
-      quarter: "Q2",
-      amount: 3500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-07-09",
-      Distribution: "Utilities",
-      charge: "150.40",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-08-29",
-      Distribution: "Employee training",
-      charge: "500.00",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1800,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-09-13",
-      Distribution: "Website maintenance",
-      charge: "350.65",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1400,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
-    },
-  ]);
-  const [investorRequest, setInvestorRequest] = useState([
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-  ]);
-  const [deleteRequest, setDeleteRequest] = useState([
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-  ]);
-  const [viewIO, setViewIO] = useState([
-    {
-      id: 1,
-      DealID: "UWE3424992",
-      DealName: "K-Prime",
-      SponsorName: "KKR",
-      IOstatus: "Open",
-    },
-    {
-      id: 2,
-      DealID: "UWE3424993",
-      DealName: "K-Prime",
-      SponsorName: "KKR",
-      IOstatus: "Pending",
-    },
-    {
-      id: 3,
-      DealID: "UWE3424994",
-      DealName: "K-Prime",
-      SponsorName: "KKR",
-      IOstatus: "Close",
-    },
-    {
-      id: 4,
-      DealID: "UWE3424995",
-      DealName: "K-Prime",
-      SponsorName: "KKR",
-      IOstatus: "Open",
-    },
-  ]);
-
-
-  const [depositRequest, setDepositRequest] = useState([
-    {
-      id: 1,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      currency: "SAR",
-      depositAmount: "$100,000",
-      fees: "$2,000",
-      totalAmount: "$102,000",
-      amountcurrency: "382574.17",
-    },
-    {
-      id: 2,
-      date: "02-Jan-2024",
-      clientId: "KU00000001",
-      firstName: "Faisal",
-      lastName: "Aljalahma",
-      country: "Kuwait",
-      phoneNumber: "8226278945",
-      currency: "KWD",
-      depositAmount: "$200,000",
-      fees: "$4,000",
-      totalAmount: "$204,000",
-      amountcurrency: "62438.98",
-    },
-    {
-      id: 3,
-      date: "02-Jan-2024",
-      clientId: "BH00000001",
-      firstName: "Nawaf",
-      lastName: "Almaskati",
-      country: "Bahrain",
-      phoneNumber: "8940035906",
-      currency: "BHD",
-      depositAmount: "$300,000",
-      fees: "$6,000",
-      totalAmount: "$306,000",
-      amountcurrency: "115328.04",
-    },
-    {
-      id: 4,
-      date: "02-Jan-2024",
-      clientId: "SA00000002",
-      firstName: "Sulaiman",
-      lastName: "AlBassam",
-      country: "Saudi Arabia",
-      phoneNumber: "8226278945",
-      currency: "SAR",
-      depositAmount: "$400,000",
-      fees: "$8,000",
-      totalAmount: "$408,000",
-      amountcurrency: "1530296.67",
-    },
-  ]);
-
-  const [depositHistory, setDepositHistory] = useState([
-    {
-      id: 1,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      currency: "SAR",
-      depositAmount: "$100,000",
-      fees: "$2,000",
-      totalAmount: "$102,000",
-      amountcurrency: "382574.17",
-      status: "Approved",
-    },
-    {
-      id: 2,
-      date: "02-Jan-2024",
-      clientId: "KU00000001",
-      firstName: "Faisal",
-      lastName: "Aljalahma",
-      country: "Kuwait",
-      phoneNumber: "8226278945",
-      currency: "KWD",
-      depositAmount: "$200,000",
-      fees: "$4,000",
-      totalAmount: "$204,000",
-      amountcurrency: "62438.98",
-      status: "Rejected",
-    },
-    {
-      id: 3,
-      date: "02-Jan-2024",
-      clientId: "BH00000001",
-      firstName: "Nawaf",
-      lastName: "Almaskati",
-      country: "Bahrain",
-      phoneNumber: "8940035906",
-      currency: "BHD",
-      depositAmount: "$300,000",
-      fees: "$6,000",
-      totalAmount: "$306,000",
-      amountcurrency: "115328.04",
-      status: "Approved",
-    },
-    {
-      id: 4,
-      date: "02-Jan-2024",
-      clientId: "SA00000002",
-      firstName: "Sulaiman",
-      lastName: "AlBassam",
-      country: "Saudi Arabia",
-      phoneNumber: "8226278945",
-      currency: "SAR",
-      depositAmount: "$400,000",
-      fees: "$8,000",
-      totalAmount: "$408,000",
-      amountcurrency: "1530296.67",
-      status: "Rejected",
-    },
-  ]);
-
-  const [bankInvestor, setBankInvestor] = useState([
-    {
-      id: 1,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      mailId: "john@gmail.com",
-      status: "Completed",
-    },
-    {
-      id: 2,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      mailId: "john@gmail.com",
-      status: "Incompleted",
-    },
-    {
-      id: 3,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      mailId: "john@gmail.com",
-      status: "Completed",
-    },
-    {
-      id: 4,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      mailId: "john@gmail.com",
-      status: "Incompleted",
-    },
-    {
-      id: 5,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      mailId: "john@gmail.com",
-      status: "Completed",
-    },
-    {
-      id: 6,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      mailId: "john@gmail.com",
-      status: "Incompleted",
-    },
-    {
-      id: 7,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      mailId: "john@gmail.com",
-      status: "Incompleted",
-    },
-    {
-      id: 8,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      mailId: "john@gmail.com",
-      status: "Completed",
-    },
-    {
-      id: 9,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      mailId: "john@gmail.com",
-      status: "Completed",
-    },
-    {
-      id: 10,
-      date: "02-Jan-2024",
-      clientId: "SA00000001",
-      firstName: "John",
-      lastName: "David",
-      country: "Saudi Arabia",
-      phoneNumber: "8940035906",
-      mailId: "john@gmail.com",
-      status: "Incompleted",
-    },
-  ]);
-
-  const [manageAcademy, setManageAcademy] = useState([
-    {
-      id: 1,
-      header: "Investing in Private Equity",
-      content: "Private equity investing involve...",
-      bannerImage: "John",
-    },
-    {
-      id: 2,
-      header: "Investing in Private Equity",
-      content: "Private equity investing involve...",
-      bannerImage: "John",
-    },
-    {
-      id: 3,
-      header: "Investing in Private Equity",
-      content: "Private equity investing involve...",
-      bannerImage: "John",
-    },
-  ]);
-
-  const [manageVideo, setManageVideo] = useState([
-    {
-      id: 1,
-      name: "Investing in Private Equity",
-      videoUploaded: "Video.mp4",
-    },
-  ]);
-
-  const [academicDocuments, setAcademicDocuments] = useState([
-    {
-      id: 1,
-      fullName: "Investing in Private Equity",
-      document: "Video.mp4",
-    },
-  ]);
-
-
-
-
-
-
-
-
-  // ==============[ prod state ]===============================
-  const [IODetails, setIODetails] = useState(null);
-  const [ isIOloading, setIOloading ] = useState(false)
+      "id": 9,
+      "name": "Holiday Party - December 2024",
+      "lastUpdated": "20-12-2024 05:30 pm",
+      "reportType": "Expense",
+      "totalExpense": 2500.00,
+      "status": "Saved"
+    },
+    {
+      "id": 10,
+      "name": "Client Gifts - End of Year 2024",
+      "lastUpdated": "31-12-2024 02:00 pm",
+      "reportType": "Expense",
+      "totalExpense": 1200.00,
+      "status": "Approved"
+    },
+    {
+      "id": 11,
+      "name": "Training Programs - January 2025",
+      "lastUpdated": "15-01-2025 10:30 am",
+      "reportType": "Expense",
+      "totalExpense": 900.00,
+      "status": "Saved"
+    },
+    {
+      "id": 7,
+      "name": "Software Licenses - 2024 Renewal",
+      "lastUpdated": "05-10-2024 01:50 pm",
+      "reportType": "Expense",
+      "totalExpense": 3200.00,
+      "status": "Saved"
+    },
+    {
+      "id": 8,
+      "name": "Conference Attendance - October 2024",
+      "lastUpdated": "15-10-2024 09:00 am",
+      "reportType": "Expense",
+      "totalExpense": 1500.00,
+      "status": "Partially Reimbursed"
+    },
+    {
+      "id": 9,
+      "name": "Holiday Party - December 2024",
+      "lastUpdated": "20-12-2024 05:30 pm",
+      "reportType": "Expense",
+      "totalExpense": 2500.00,
+      "status": "Saved"
+    },
+    {
+      "id": 10,
+      "name": "Client Gifts - End of Year 2024",
+      "lastUpdated": "31-12-2024 02:00 pm",
+      "reportType": "Expense",
+      "totalExpense": 1200.00,
+      "status": "Approved"
+    },
+    {
+      "id": 11,
+      "name": "Training Programs - January 2025",
+      "lastUpdated": "15-01-2025 10:30 am",
+      "reportType": "Expense",
+      "totalExpense": 900.00,
+      "status": "Saved"
+    },
+    {
+      "id": 7,
+      "name": "Software Licenses - 2024 Renewal",
+      "lastUpdated": "05-10-2024 01:50 pm",
+      "reportType": "Expense",
+      "totalExpense": 3200.00,
+      "status": "Saved"
+    },
+    {
+      "id": 8,
+      "name": "Conference Attendance - October 2024",
+      "lastUpdated": "15-10-2024 09:00 am",
+      "reportType": "Expense",
+      "totalExpense": 1500.00,
+      "status": "Partially Reimbursed"
+    },
+    {
+      "id": 9,
+      "name": "Holiday Party - December 2024",
+      "lastUpdated": "20-12-2024 05:30 pm",
+      "reportType": "Expense",
+      "totalExpense": 2500.00,
+      "status": "Saved"
+    },
+    {
+      "id": 10,
+      "name": "Client Gifts - End of Year 2024",
+      "lastUpdated": "31-12-2024 02:00 pm",
+      "reportType": "Expense",
+      "totalExpense": 1200.00,
+      "status": "Approved"
+    },
+    {
+      "id": 11,
+      "name": "Training Programs - January 2025",
+      "lastUpdated": "15-01-2025 10:30 am",
+      "reportType": "Expense",
+      "totalExpense": 900.00,
+      "status": "Saved"
+    }
+  ]
+  )
 
   return (
     <GlobalStateContext.Provider
       value={{
         isAuthenticate,
         setIsAuthenticate,
-        memberIfo,
-        setMemberInfo,
-        communityMembers,
-        setCommityMembers,
-        sponser,
-        setSponser,
-        colorMode,
-        toggleColorMode,
-        slideFromRight,
-        setSlideFormRight,
-        InvestorDetails,
-        setInvestorDetails,
-        investment,
-        setInvestment,
-        rateExchange,
-        setRateExchange,
-        pendingRequest,
-        setPendingRequest,
-        viewHistory,
-        setViewHistory,
-        investmentType,
-        setInvestmentType,
-        investorRequest,
-        setInvestorRequest,
-        investorTransaction,
-        setInvestorTransaction,
-        upgradeHistory,
-        setUpgradeHistory,
-        deleteHistory,
-        setDeleteHistory,
-        deleteRequest,
-        setDeleteRequest,
-        viewIO,
-        setViewIO,
-        create,
-        setCreate,
-        keyMerits,
-        setKeyMerits,
-        iOArtifacts,
-        setIOArtifacts,
-        investors,
-        setInvestors,
-        IODetails,
-        setIODetails,
-        navDetails,
-        setNavDetails,
-        caseDetails,
-        setCaseDetails,
-        viewInvestor,
-        setViewInvestor,
-        transaction,
-        setTransaction,
-        depositRequest,
-        setDepositRequest,
-        depositHistory,
-        setDepositHistory,
-        bankInvestor,
-        setBankInvestor,
-        manageAcademy,
-        setManageAcademy,
-        manageVideo,
-        setManageVideo,
-        academicDocuments,
-        setAcademicDocuments,
-        iOArtifactsTwo,
-        setIOArtifactsTwo,
-        
-
-        isIOloading, 
-        setIOloading 
+        reportsHistory, 
+        setReportsHistory
       }}
     >
       {children}
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 8ab4bd8..02e9403 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -321,8 +321,7 @@ const DashboardLayout = ({ isOnline }) => {
   }
 
   return (
-    <Box 
-    height={"100vh"}>
+    <Box height={"100vh"}>
       <HeaderMain
         isDrawerOpen={isDrawerOpen}
         logOutHandler={logOutHandler}
@@ -331,8 +330,8 @@ const DashboardLayout = ({ isOnline }) => {
         title={getTitle()}
       />
       <Box
+        h={{ base: "92%", lg: "96%" }}
         style={{
-          height: "92%",
           width: "100%",
           position: "relative",
           overflow: "hidden",
@@ -390,9 +389,13 @@ const DashboardLayout = ({ isOnline }) => {
                 ({ title, type, Icon, submenu, path, colorCode }, index) => {
                   if (type === "accordion") {
                     return (
-                      <AccordionItem key={index} border={"none"} style={{borderRadius:"2px", marginBottom:"8px"}}>
+                      <AccordionItem
+                        key={index}
+                        border={"none"}
+                        style={{ borderRadius: "2px", marginBottom: "8px" }}
+                      >
                         <AccordionButton
-                          style={{ height: "auto", borderRadius:"2px" }}
+                          style={{ height: "auto", borderRadius: "2px" }}
                           _hover={{ bg: "#ced8e6a2" }}
                           className={`${
                             true
@@ -400,7 +403,9 @@ const DashboardLayout = ({ isOnline }) => {
                               : "p-2 ps-1 web-text-xlarge justify-content-center"
                           }  link d-flex align-items-center gap-2 w-100 mb-1`}
                         >
-                          <NavLink to="/home"  as="span"
+                          <NavLink
+                            to="/home"
+                            as="span"
                             className="d-flex align-items-centre gap-2 w-50 py-1"
                           >
                             {/* {Icon && title === "Admin" ? <Image w={15} src={shield} /> : <Icon className={`web-text-large`} />} */}
@@ -451,7 +456,7 @@ const DashboardLayout = ({ isOnline }) => {
                                 }  d-flex align-items-center  p-0`}
                               >
                                 <NavLink
-                                style={{borderRadius:"2px"}}
+                                  style={{ borderRadius: "2px" }}
                                   className={`${
                                     true
                                       ? "p-2 ps-1 ms-2 web-text-medium "
@@ -495,7 +500,11 @@ const DashboardLayout = ({ isOnline }) => {
                     return (
                       <NavLink
                         key={index}
-                        style={{ height: "auto", position: "relative", borderRadius:"2px" }}
+                        style={{
+                          height: "auto",
+                          position: "relative",
+                          borderRadius: "2px",
+                        }}
                         className={`${
                           true
                             ? "p-2 web-text-medium"
@@ -523,15 +532,17 @@ const DashboardLayout = ({ isOnline }) => {
           </Box>
         </Box>
 
-        <main
-          className={`    d-flex flex-column gap-0 `}
+        <Box
           style={{
             width: `calc(100% - ${isDrawerOpen ? 230 : 0}px)`,
             transition: "width 0.3s ease-in-out",
-            backgroundColor:"#F3F3F9"
+            backgroundColor: "#F3F3F9",
+            display:'flex',
+            flexDirection:'column',
+            gap:0
           }}
         >
-          {/* <HeaderMain
+          {/* <HeaderBox
           slideDirecttion={slideFromRight}
           logOutHandler={logOutHandler}
           icon
@@ -541,7 +552,7 @@ const DashboardLayout = ({ isOnline }) => {
           {/* <CustomBreadcrumb /> */}
 
           <AppContent />
-        </main>
+        </Box>
       </Box>
     </Box>
   );
diff --git a/src/Pages/Report/Report.jsx b/src/Pages/Report/Report.jsx
index c105129..be4d491 100644
--- a/src/Pages/Report/Report.jsx
+++ b/src/Pages/Report/Report.jsx
@@ -1,14 +1,184 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import {
+  Box,
+  Button,
+  Divider,
+  HStack,
+  Icon,
+  Tag,
+  TagLabel,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { CalendarIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
+import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiReceipt } from "react-icons/pi";
 
 const Report = () => {
+  const { reportsHistory } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+
+  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
+    return () => clearTimeout(timer);
+  }, []); // Empty dependency array means this effect runs once after the component mounts
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Name",
+    "Last Update",
+    "Report type",
+    "Total Expense",
+    "Status",
+    "Actions",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = reportsHistory.map((item, index) => ({
+    Name: <Text as={'span'} display={'flex'} gap={2} alignItems={'center'}>
+    <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>,
+    "Last Update": 
+      item?.lastUpdated,
+    "Report type": item?.reportType,
+    "Total Expense": item?.totalExpense,
+    Status: (
+      <Tag
+        my={1}
+        size={"sm"}
+        borderRadius="full"
+        colorScheme={
+          item?.status === "Approved"
+            ? "green"
+            : item?.status === "Fully Reimbursed"
+            ? "purple"
+            : item?.status === "Disapproved"
+            ? "red"
+            : item?.status === "Saved"
+            ? "yellow"
+            : item?.status === "Partially Reimbursed"
+            ? "orange"
+            : "gray" // default color scheme if status doesn't match any condition
+        }
+        border={`1px solid ${
+          item?.status === "Approved"
+            ? "green"
+            : item?.status === "Fully Reimbursed"
+            ? "purple"
+            : item?.status === "Disapproved"
+            ? "red"
+            : item?.status === "Saved"
+            ? "orange"
+            : item?.status === "Partially Reimbursed"
+            ? "orange"
+            : "gray" // default border color if status doesn't match any condition
+        }`}
+        p={1}
+        px={3}
+      >
+        <TagLabel>{item?.status}</TagLabel>
+      </Tag>
+    ),
+    Actions: (
+      <Box
+        display={"flex"}
+        gap={1}
+        alignItems={"center"}
+        justifyContent={"center"}
+      >
+        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
+          <FaRegEye fontSize={"18px"} />
+        </Button>
+        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
+          <AiOutlineEdit fontSize={"19px"} />
+        </Button>
+        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
+          <RiDeleteBin5Line fontSize={"18px"} />
+        </Button>
+      </Box>
+    ),
+  }));
+
   return (
-    <Box h={"100%"} p={6}>
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
       <MiniHeader
         title={"Reports History"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
       />
+
+      <Box
+        rounded={"xl"}
+        py={3}
+        // pb={0}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <Text fontSize={"lg"} fontWeight={600}>
+            Reports
+          </Text>
+          <HStack w={"100%"} justifyContent={"space-between"}>
+            <Button
+              fontWeight={500}
+              size={"sm"}
+              leftIcon={<CalendarIcon color={"purple.800"} />}
+              colorScheme="gray"
+              color={"gray.700"}
+              variant="outline"
+              fontSize={"xs"}
+            >
+              Select Date Range
+            </Button>
+
+            <Button
+              _hover={{
+                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+                opacity: 0.8,
+              }}
+              bgGradient="linear(to-r, #3725EA, #5E0FCD)"
+              fontSize={"xs"}
+              px={8}
+              fontWeight={500}
+              size={"sm"}
+              color={"#fff"}
+              variant="outline"
+              transition={"0.5s all"}
+              _active={{
+                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+                opacity: 1,
+              }}
+            >
+              Add to Report
+            </Button>
+          </HStack>
+        </VStack>
+        <Divider />
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+      </Box>
     </Box>
   );
 };
diff --git a/src/Pages/Requests/Requests.jsx b/src/Pages/Requests/Requests.jsx
index 2a90c1c..c3a48f5 100644
--- a/src/Pages/Requests/Requests.jsx
+++ b/src/Pages/Requests/Requests.jsx
@@ -8,6 +8,7 @@ const Requests = () => {
       <MiniHeader
         title={"My Requests"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
       />
     </Box>
   );