updated

src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx

@@ -1,4 +1,14 @@
-import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import {
+  Badge,
+  Box,
+  Icon,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useContext, useEffect, useState } from "react";
 import { useForm } from "react-hook-form"; // assuming react-hook-form is used
@@ -7,6 +17,7 @@ import { ArrowBackIcon } from "@chakra-ui/icons";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import FormInputView from "../../../Components/FormInputView";
 import ViewInvestorDetails from "./ViewInvestorDetails";
+import { LuWallet } from "react-icons/lu";
 
 const ProfileView = () => {
   const navigate = useNavigate();
@@ -119,15 +130,70 @@ const ProfileView = () => {
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <span
-        onClick={() => navigate(-1)}
-        style={{ fontSize: "15px", cursor: "pointer" }}
+      <Box
+        pt={2}
+        pb={2}
+        pe={4}
+        display={"flex"}
+        justifyContent={"space-between"}
+        alignItems={"center"}
       >
-        <ArrowBackIcon cursor={"pointer"} /> Back
-      </span>
+        <Text ps={2} as={"span"} fontSize={"sm"}>
+          View Investor Details
+        </Text>
+
+        <Box
+          display={"flex"}
+          p={2}
+          alignItems={"center"}
+          gap={5}
+          height={"auto"}
+          width={"auto"}
+          fontSize={"sm"}
+          as="span"
+          boxShadow={'lg'}
+          rounded={'md'}
+          bg={'#EAF2EC'}
+        >
+          <Icon color={'#004717'} boxSize={8} as={LuWallet} />
+
+          <Box display={'flex'} flexDirection={'column'} as="span">
+            <Text as={'span'} color={"#6F6F6F"} fontSize={'10px'}>Amount</Text>
+            <Box as="span" gap={2} alignItems={'center'} fontSize={'sm'} display={'flex'} >
+              <Text fontWeight={500} as={'span'}>26,763.40</Text>
+              <Badge display={'flex'} alignItems={'center'}>USD</Badge>
+            </Box>
+          </Box>
+
+
+          <Box display={'flex'} flexDirection={'column'} as="span">
+            <Text as={'span'} color={"#6F6F6F"} fontSize={'10px'}>Investor Currency</Text>
+            <Box as="span" gap={2} alignItems={'center'} fontSize={'sm'} display={'flex'} >
+              <Text fontWeight={500} as={'span'}>10,075.01</Text>
+              <Badge display={'flex'} alignItems={'center'}>BHD</Badge>
+            </Box>
+          </Box>
+
+
+
+
+        </Box>
+
+
+
+
+
+
+
+      </Box>
       <Tabs mt={0}>
         <Box>
-          <TabList >
+          <TabList alignItems={"center"}>
+            <ArrowBackIcon
+              onClick={() => navigate(-1)}
+              cursor={"pointer"}
+              me={3}
+            />
             <Tab
               fontSize={"sm"}
               _selected={{