From b5a960f7dfd1cc2e94c109e377746a8ac5170701 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 16 Aug 2024 17:59:39 +0530
Subject: [PATCH 1/2] investor details

---
 src/Components/MobileView.jsx                 | 511 +++++++++++-------
 .../IO_Management/ViewIO/ViewIOTable.jsx      |  93 ++--
 src/Routes/Routes.js                          |   4 +-
 3 files changed, 353 insertions(+), 255 deletions(-)

diff --git a/src/Components/MobileView.jsx b/src/Components/MobileView.jsx
index 8f6dd3c..c6594fa 100644
--- a/src/Components/MobileView.jsx
+++ b/src/Components/MobileView.jsx
@@ -24,11 +24,11 @@ import { FiInstagram } from "react-icons/fi";
 import { IoBatteryHalf } from "react-icons/io5";
 import { BiWifi } from "react-icons/bi";
 import { useGetIOByIdQuery } from "../Services/io.service";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 const MobileView = ({ isOpen, onClose, finalRef }) => {
-
   const [time, setTime] = useState(new Date());
+  const navigate = useNavigate();
   const params = useParams();
   const id = params?.id;
 
@@ -39,8 +39,6 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
   } = useGetIOByIdQuery(id, { skip: !id });
 
   console.log(data);
-  
-
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -51,223 +49,332 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
   }, []);
 
   const formatTime = (date) => {
-    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
+    return date.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
   };
 
   return (
-      <Modal display={'flex'} size={'xl'} justifyContent={'center'} isCentered finalFocusRef={finalRef} isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay 
-    backdropFilter="blur(5px)" // Add this line for backdrop blur
-    bg="rgba(0, 0, 0, 0.4)" // Optional: Adjust the overlay color and opacity
-     />
-        <ModalContent 
-
-          backgroundColor={"transparent"} shadow={'none'}>
-
-<HStack w={'100'} display={'flex'} justify={'center'}>
-          <Box 
-          as="span"
-          boxShadow={"none"}
-          position={"relative"}
-          display={'flex'}
-          justifyContent={'center'}
-          h={"600px"}
-          w={"330px"}
-          >
-          <Image
-            h={"100%"}
-            w={"100%"}
-            src={Mobile}
-            position={"absolute"}
-            top={"0"}
-            left={"0"}
-          />
+    <Modal
+      display={"flex"}
+      size={"xl"}
+      justifyContent={"center"}
+      isCentered
+      finalFocusRef={finalRef}
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <ModalOverlay
+        backdropFilter="blur(5px)" // Add this line for backdrop blur
+        bg="rgba(0, 0, 0, 0.4)" // Optional: Adjust the overlay color and opacity
+      />
+      <ModalContent backgroundColor={"transparent"} shadow={"none"}>
+        <HStack w={"100"} display={"flex"} justify={"center"}>
           <Box
-            backgroundColor={"#fff"}
-            h={"98%"}
-            w={'96%'}
-            // m={2}
-            borderRadius={"47px"}
-            pt={"30px"}
-            px={"15px"}
+            as="span"
+            boxShadow={"none"}
+            position={"relative"}
+            display={"flex"}
+            justifyContent={"center"}
+            h={"600px"}
+            w={"330px"}
           >
-            <Box>
-              <Box display={"flex"} alignItems={"center"} position={"absolute"} left={"30px"} top={"18px"}>
-                <Text ml={1} mb={0}><GiNetworkBars fontSize={"10px"} /></Text>
-                <Text ml={1} mb={0} fontSize={"10px"}>{formatTime(time)}</Text>
-                <Text ml={"5px"} mb={0} ><GrLinkedinOption fontSize={"10px"}  /></Text>
-                {/* <Text ml={1} mb={0}><FiInstagram fontSize={"10px"} /></Text> */}
-              </Box>
-              <Box display={"flex"} alignItems={"center"} position={"absolute"} right={"36px"} top={"17px"}>
-                <Text mb={0}><BiWifi fontSize={"14px"}  /></Text>
-                <Text ml={1} mb={0}><IoBatteryHalf  fontSize={"15px"}/></Text>
-              </Box>
-            </Box>
+            <Image
+              h={"100%"}
+              w={"100%"}
+              src={Mobile}
+              position={"absolute"}
+              top={"0"}
+              left={"0"}
+            />
             <Box
-              p={"10px"}
-              overflowY={"scroll"}
-              h={"483px"}
-              zIndex={"99"}
-              position={"relative"}
-              borderBottomLeftRadius={"23px"}
-              borderBottomRightRadius={"23px"}
+              backgroundColor={"#fff"}
+              h={"98%"}
+              w={"96%"}
+              // m={2}
+              borderRadius={"47px"}
+              pt={"36px"}
+              px={"15px"}
             >
-              <Box
-                mb={4}
-                bg={"#f5f8f6"}
-                borderRadius={"20px"}
-                boxShadow={
-                  "rgba(0, 0, 0, 0.15) 0px 2px 8px"
-                }
-              >
-                <Box position={"relative"}>
-                  <Text position={"absolute"} top={"12px"} left={"10px"} backgroundColor={"#e4f6ea"} fontSize={"10px"} fontWeight={500} color="green" p={"7px 12px"} borderRadius={"20px"}>Stock</Text>
-                  <Text  position={"absolute"} top={"12px"} right={"10px"} fontSize={"10px"} display={"flex"} alignItems={"center"} fontWeight={500} backgroundColor={"#fff"} p={"7px 12px"} borderRadius={"20px"}>
-                    <LuClock color="#d8804e" /> <Text mb={0} ml={1}>Closing Date Aug 23 2024</Text>
+              <Box>
+                <Box
+                  display={"flex"}
+                  alignItems={"center"}
+                  position={"absolute"}
+                  left={"30px"}
+                  top={"18px"}
+                >
+                  <Text ml={1} mb={0}>
+                    <GiNetworkBars fontSize={"10px"} />
                   </Text>
-                <Image
-                  borderTopLeftRadius={"20px"}
-                  borderTopRightRadius={"20px"}
-                  h={"130px"}
-                  w={"100%"}
-                  src={mobileBanner}
-                />
+                  <Text ml={1} mb={0} fontSize={"10px"}>
+                    {formatTime(time)}
+                  </Text>
+                  <Text ml={"5px"} mb={0}>
+                    <GrLinkedinOption fontSize={"10px"} />
+                  </Text>
+                  {/* <Text ml={1} mb={0}><FiInstagram fontSize={"10px"} /></Text> */}
                 </Box>
-                <Stack mt="3" bg={"#fff"} py={4} px={4}>
-                  <Text
-                    fontSize={"sm"}
-                    fontWeight={"500"}
-                    color={"#000"}
-                    mb={0}
-                  >
-                    Guinevere Gates
+                <Box
+                  display={"flex"}
+                  alignItems={"center"}
+                  position={"absolute"}
+                  right={"36px"}
+                  top={"17px"}
+                >
+                  <Text mb={0}>
+                    <BiWifi fontSize={"14px"} />
                   </Text>
-                  <Heading fontSize="16px" color={"#004717"}>
-                    BHD 46,258
+                  <Text ml={1} mb={0}>
+                    <IoBatteryHalf fontSize={"15px"} />
+                  </Text>
+                </Box>
+              </Box>
+              <Box
+                p={"10px"}
+                overflowY={"scroll"}
+                h={"483px"}
+                zIndex={"99"}
+                position={"relative"}
+                borderBottomLeftRadius={"23px"}
+                borderBottomRightRadius={"23px"}
+              >
+                <Box
+                  mb={4}
+                  bg={"#f5f8f6"}
+                  borderRadius={"20px"}
+                  boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
+                >
+                  <Box position={"relative"}>
+                    <Text
+                      position={"absolute"}
+                      top={"12px"}
+                      left={"10px"}
+                      backgroundColor={"#e4f6ea"}
+                      fontSize={"10px"}
+                      fontWeight={500}
+                      color="green"
+                      p={"7px 12px"}
+                      borderRadius={"20px"}
+                    >
+                      Stock
+                    </Text>
+                    <Text
+                      position={"absolute"}
+                      top={"12px"}
+                      right={"10px"}
+                      fontSize={"10px"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      fontWeight={500}
+                      backgroundColor={"#fff"}
+                      p={"7px 12px"}
+                      borderRadius={"20px"}
+                    >
+                      <LuClock color="#d8804e" />{" "}
+                      <Text mb={0} ml={1}>
+                        Closing Date Aug 23 2024
+                      </Text>
+                    </Text>
+                    <Image
+                      borderTopLeftRadius={"20px"}
+                      borderTopRightRadius={"20px"}
+                      h={"130px"}
+                      w={"100%"}
+                      src={mobileBanner}
+                    />
+                  </Box>
+                  <Stack mt="3" bg={"#fff"} py={4} px={4}>
+                    <Text
+                      fontSize={"sm"}
+                      fontWeight={"500"}
+                      color={"#000"}
+                      mb={0}
+                    >
+                      Guinevere Gates
+                    </Text>
+                    <Heading fontSize="16px" color={"#004717"}>
+                      BHD 46,258
+                    </Heading>
+                    <Progress
+                      colorScheme="green"
+                      size="sm"
+                      value={20}
+                      borderRadius={"3px"}
+                    />
+                    <Text
+                      color={"#4e4e4e"}
+                      fontSize={"xs"}
+                      fontWeight={600}
+                      mb={0}
+                    >
+                      0.0% funded
+                    </Text>
+                    <Text
+                      fontSize={"xs"}
+                      fontWeight={500}
+                      mb={0}
+                      color={"#9d9d9d"}
+                    >
+                      fugit eligendi dolore dolore et
+                    </Text>
+                  </Stack>
+                  <Box py={4} px={4}>
+                    <Box display={"flex"} justifyContent={"space-between"}>
+                      <Text
+                        fontSize={"10px"}
+                        mb={1}
+                        fontWeight={600}
+                        color={"#616161"}
+                      >
+                        Sponsor name:
+                      </Text>
+                      <Text fontSize={"10px"} mb={1} fontWeight={600}>
+                        Scott Simon
+                      </Text>
+                    </Box>
+                    <Box display={"flex"} justifyContent={"space-between"}>
+                      <Text
+                        fontSize={"10px"}
+                        mb={1}
+                        fontWeight={600}
+                        color={"#616161"}
+                      >
+                        Estimated return:
+                      </Text>
+                      <Text fontSize={"10px"} mb={1} fontWeight={600}>
+                        A provident veniam
+                      </Text>
+                    </Box>
+                    <Box display={"flex"} justifyContent={"space-between"}>
+                      <Text
+                        fontSize={"10px"}
+                        mb={1}
+                        fontWeight={600}
+                        color={"#616161"}
+                      >
+                        Hoiding period:
+                      </Text>
+                      <Text fontSize={"10px"} mb={1} fontWeight={600}>
+                        Eius eiusmod exericit
+                      </Text>
+                    </Box>
+                    <Box display={"flex"} justifyContent={"space-between"}>
+                      <Text
+                        fontSize={"10px"}
+                        mb={1}
+                        fontWeight={600}
+                        color={"#616161"}
+                      >
+                        Minimum investment:
+                      </Text>
+                      <Text fontSize={"10px"} mb={1} fontWeight={600}>
+                        BHD 1
+                      </Text>
+                    </Box>
+                  </Box>
+                </Box>
+                <Box
+                  mb={4}
+                  p={5}
+                  bg={"#f5f8f6"}
+                  borderRadius={"20px"}
+                  boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
+                >
+                  <Heading fontSize="14px" fontWeight={600}>
+                    Key Merits
                   </Heading>
-                  <Progress
-                    colorScheme="green"
-                    size="sm"
-                    value={20}
-                    borderRadius={"3px"}
-                  />
-                  <Text color={"#4e4e4e"} fontSize={"xs"} fontWeight={600} mb={0}>
-                    0.0% funded
-                  </Text>
-                  <Text fontSize={"xs"} fontWeight={500} mb={0} color={"#9d9d9d"}>
-                    fugit eligendi dolore dolore et
-                  </Text>
-                </Stack>
-                <Box py={4} px={4}>
-                  <Box display={"flex"} justifyContent={"space-between"}>
-                    <Text fontSize={"10px"} mb={1} fontWeight={600} color={"#616161"}>
-                      Sponsor name:
-                    </Text>
-                    <Text fontSize={"10px"} mb={1} fontWeight={600}>
-                      Scott Simon
-                    </Text>
-                  </Box>
-                  <Box display={"flex"} justifyContent={"space-between"}>
-                    <Text fontSize={"10px"} mb={1} fontWeight={600} color={"#616161"}>
-                      Estimated return:
-                    </Text>
-                    <Text fontSize={"10px"} mb={1} fontWeight={600}>
-                      A provident veniam
-                    </Text>
-                  </Box>
-                  <Box display={"flex"} justifyContent={"space-between"}>
-                    <Text fontSize={"10px"} mb={1} fontWeight={600} color={"#616161"}>
-                      Hoiding period:
-                    </Text>
-                    <Text fontSize={"10px"} mb={1} fontWeight={600}>
-                      Eius eiusmod exericit
-                    </Text>
-                  </Box>
-                  <Box display={"flex"} justifyContent={"space-between"}>
-                    <Text fontSize={"10px"} mb={1} fontWeight={600} color={"#616161"}>
-                      Minimum investment:
-                    </Text>
-                    <Text fontSize={"10px"} mb={1} fontWeight={600}>
-                      BHD 1
-                    </Text>
-                  </Box>
-                </Box>
-              </Box>
-              <Box
-                mb={4}
-                p={5}
-                bg={"#f5f8f6"}
-                borderRadius={"20px"}
-                boxShadow={
-                  "rgba(0, 0, 0, 0.15) 0px 2px 8px"
-                }
-              >
-                <Heading fontSize="14px" fontWeight={600}>Key Merits</Heading>
-                <Box display={"flex"} alignItems={"center"}>
-                  <Image
-                    width={"30px"}
-                    me={2}
-                    src="https://tanami.betadelivery.com/public/icons/icon3.svg"
-                  />
-                  <Text fontSize={"xs"} mb={0}>
-                    Sit sunt consequunt Dolores minim suscip
-                  </Text>
-                </Box>
-              </Box>
-              <Box
-                mb={4}
-                p={5}
-                borderRadius={"20px"}
-                boxShadow={
-                  "rgba(0, 0, 0, 0.15) 0px 2px 8px"
-                }
-              >
-                <Heading fontSize="14px" fontWeight={600}>Investment Documents</Heading>
-                <Box bg={"#f5f8f6"} w={"150px"} p={3} borderRadius={"10px"}>
-                  <Box display={"flex"} alignItems={"center"} mb={2}>
-                    <Image me={1} src="https://tanami.betadelivery.com/public/icons/icon8.svg" />
+                  <Box display={"flex"} alignItems={"center"}>
+                    <Image
+                      width={"30px"}
+                      me={2}
+                      src="https://tanami.betadelivery.com/public/icons/icon3.svg"
+                    />
                     <Text fontSize={"xs"} mb={0}>
-                      Merrill Rocha
+                      Sit sunt consequunt Dolores minim suscip
                     </Text>
                   </Box>
-                  <Box
-                    display={"flex"}
-                    alignItems={"center"}
-                    justifyContent={"space-between"}
-                  >
-                    <Text mb={0} fontSize={"sm"}>
-                      0.03 mb
-                    </Text>
-                    <GrDownload fontSize={"15px"} />
-                  </Box>
                 </Box>
-              </Box>
-              <Box
-                mb={4}
-                p={4}
-                borderRadius={"20px"}
-                boxShadow={
-                  "rgba(0, 0, 0, 0.15) 0px 2px 8px"
-                }
-              >
-                <Heading fontSize="14px" fontWeight={600}>Videos</Heading>
-                <video autoPlay style={{borderRadius:"18px"}}>
-                  <source src="https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4" type="video/mp4" style={{height:"200px"}} />
-                </video>
+                <Box
+                  mb={4}
+                  p={5}
+                  borderRadius={"20px"}
+                  boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
+                >
+                  <Heading fontSize="14px" fontWeight={600}>
+                    Investment Documents
+                  </Heading>
+                  <Box bg={"#f5f8f6"} w={"150px"} p={3} borderRadius={"10px"}>
+                    <Box display={"flex"} alignItems={"center"} mb={2}>
+                      <Image
+                        me={1}
+                        src="https://tanami.betadelivery.com/public/icons/icon8.svg"
+                      />
+                      <Text fontSize={"xs"} mb={0}>
+                        Merrill Rocha
+                      </Text>
+                    </Box>
+                    <Box
+                      display={"flex"}
+                      alignItems={"center"}
+                      justifyContent={"space-between"}
+                    >
+                      <Text mb={0} fontSize={"sm"}>
+                        0.03 mb
+                      </Text>
+                      <GrDownload fontSize={"15px"} />
+                    </Box>
+                  </Box>
+                </Box>
+                <Box
+                  mb={4}
+                  p={4}
+                  borderRadius={"20px"}
+                  boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
+                >
+                  <Heading fontSize="14px" fontWeight={600}>
+                    Videos
+                  </Heading>
+                  <video autoPlay style={{ borderRadius: "18px" }}>
+                    <source
+                      src="https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4"
+                      type="video/mp4"
+                      style={{ height: "200px" }}
+                    />
+                  </video>
+                </Box>
               </Box>
 
-            </Box>
-            
-            <Box   position={"relative"}  p={4} background={"#fff"} padding={"24px"}  paddingBottom={"3px"}    borderBottomLeftRadius={"30px"} borderBottomRightRadius="30px">
-              <Button margin={"auto"} width={"85%"}  bottom="10px" left="0" colorScheme='forestGreen' mr={3} w={"100%"} fontWeight={500} borderRadius={"20px"}>
-                Invest
-              </Button>
+              <Box
+                position={"relative"}
+                p={4}
+                background={"#fff"}
+                padding={"24px"}
+                paddingBottom={"3px"}
+                borderBottomLeftRadius={"30px"}
+                borderBottomRightRadius="30px"
+              >
+                <Button
+                  margin={"auto"}
+                  width={"85%"}
+                  bottom="10px"
+                  left="0"
+                  colorScheme="forestGreen"
+                  mr={3}
+                  w={"100%"}
+                  fontWeight={500}
+                  borderRadius={"20px"}
+                >
+                  Invest
+                </Button>
+              </Box>
             </Box>
           </Box>
-          </Box>
-          </HStack>
-        </ModalContent>
-      </Modal>
+        </HStack>
+      </ModalContent>
+    </Modal>
   );
 };
 
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
index a4f164f..f594ebc 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -41,7 +41,7 @@ import { TABLE_PAGINATION } from "../../../Constants/Paginations";
 import { formatCurrency } from "../../../Components/CurrencyInput";
 import { IoIosPhonePortrait } from "react-icons/io";
 import MobileView from "../../../Components/MobileView";
-import { ImMobile2 } from "react-icons/im";
+import { ImMobile } from "react-icons/im";
 import { removeTrailingZeros } from "../../../Constants/Constants";
 // import { debounce } from "./AddIOCharges";
 
@@ -60,12 +60,7 @@ const ViewIOTable = () => {
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
 
-  const {
-    isOpen: isOpen,
-    onOpen: onOpen,
-    onClose: onClose,
-  } = useDisclosure();
-
+  const { isOpen: isOpen, onOpen: onOpen, onClose: onClose } = useDisclosure();
 
   // ===============================[ Paginations ]
   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
@@ -76,7 +71,6 @@ const ViewIOTable = () => {
     page: currentPage,
     size: pageSize,
   });
-  
 
   // ===============================[ Table Header ]
   const tableHeadRow = [
@@ -87,7 +81,7 @@ const ViewIOTable = () => {
     "Goal Amount",
     "Holding Period",
     "IO Status",
-    // "Preview",
+    "Preview",
     "Action",
   ];
 
@@ -107,7 +101,6 @@ const ViewIOTable = () => {
     return nameMatches && statusMatches;
   });
 
-
   const extractedArray = filteredData?.map((item, index) => ({
     "IO ID": (
       <Box w={"auto"} isTruncated={true}>
@@ -140,9 +133,17 @@ const ViewIOTable = () => {
       </Box>
     ),
     "Goal Amount": (
-      <Box w={"100%"} display={'flex'}  alignItems={'center'} >
-        <Text w={'100%'} textAlign={'center'} as={"span"} color={"teal.900"} fontWeight={"500"}>
-          {item.goalAmount ? formatCurrency(removeTrailingZeros(item.goalAmount)) : "---"}
+      <Box w={"100%"} display={"flex"} alignItems={"center"}>
+        <Text
+          w={"100%"}
+          textAlign={"center"}
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+        >
+          {item.goalAmount
+            ? formatCurrency(removeTrailingZeros(item.goalAmount))
+            : "---"}
         </Text>
       </Box>
     ),
@@ -164,7 +165,6 @@ const ViewIOTable = () => {
           mt={1.5}
           mb={1.5}
           textTransform={"none"}
-          
           // variant={"solid"}
           colorScheme={
             item?.ioStatus?.statusAdmin === "Draft"
@@ -181,32 +181,27 @@ const ViewIOTable = () => {
               ? "orange"
               : "purple"
           }
-          
-  boxShadow={'0 4px 6px rgba(0, 0, 0, 0.1)'} // Adjusted shadow
+          boxShadow={"0 4px 6px rgba(0, 0, 0, 0.1)"} // Adjusted shadow
         >
           {item.ioStatus?.statusAdmin}
         </Badge>
       </Box>
     ),
-    "Preview": (
-      <Box display={"flex"} justifyContent={"start"} >
+    Preview: (
+      <Box display={"flex"} justifyContent={"start"}>
         <Button
-      // _hover={{ color: "green.500" }}
-      colorScheme="purple"
-      // transition={"0.5s all"}
-      onClick={onOpen} 
-      // color="green.300"
-      rounded={"sm"}
-      size={"xs"}
-      variant={'ghost'}
-      >
-      <ImMobile2 className="me-2" /> View
-      </Button>
+          // _hover={{ color: "green.500" }}
+          bg="purple.200"
+          // transition={"0.5s all"}
+          onClick={onOpen}
+          // color="green.300"
+          rounded={"md"}
+          size={"xs"}
+          variant={"ghost"}
+        >
+          <ImMobile className="me-1" /> View
+        </Button>
       </Box>
-
-
-
-      
     ),
     Action: (
       <Box display={"flex"} justifyContent={"center"} gap={2}>
@@ -218,19 +213,19 @@ const ViewIOTable = () => {
           color={"green.500"}
           placement="top"
         > */}
-          <Button
-            // _hover={{ color: "green.500" }}
-            colorScheme="green"
-            // transition={"0.5s all"}
-            onClick={() => {
-              navigate(`/view-io/${item.id}`);
-            }}
-            // color="green.300"
-            rounded={"sm"}
-            size={"xs"}
-          >
-            <ViewIcon me={2} /> View
-          </Button>
+        <Button
+          // _hover={{ color: "green.500" }}
+          colorScheme="green"
+          // transition={"0.5s all"}
+          onClick={() => {
+            navigate(`/view-io/${item.id}`);
+          }}
+          // color="green.300"
+          rounded={"sm"}
+          size={"xs"}
+        >
+          <ViewIcon me={2} /> View
+        </Button>
         {/* </Tooltip> */}
 
         {/* <Tooltip
@@ -284,7 +279,6 @@ const ViewIOTable = () => {
 
   const handleDelete = () => {};
 
-
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box bg="white.500">
@@ -369,10 +363,7 @@ const ViewIOTable = () => {
         setMouseEntered={setMouseEntered}
       />
 
-      <MobileView
-         isOpen={isOpen}
-         onClose={onClose}
-      />
+      <MobileView isOpen={isOpen} onClose={onClose} />
 
       <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index d45cb5c..efbba0b 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -62,8 +62,8 @@ export const RouteLink = [
   { path: "/view-io/:id", Component: ViewIOdata },
 
   // ===============[ Investor Management]===============
-  { path: "/investor-details", Component: InvestorDetails },
-  { path: "/investor-details/profile-view/:id", Component: ProfileView },
+  { path: "/investor-details", Componinvestorent: InvestorDetails },
+  { path: "/investor-details/profile-view/:id", Component: UnderConstruction },
   { path: "/investor-details/view-investor-details", Component: ViewInvestorDetails },
   // { path: "/investor-transactions", Component: InvestorTransactions },
   { path: "/investor-transactions", Component: UnderConstruction },

From 692e08abd6efbc7e27425d7a32d51389341c178c Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 16 Aug 2024 18:26:25 +0530
Subject: [PATCH 2/2] investor view

---
 .../Investor_Management/InvestorDetails/InvestorDetails.jsx | 6 +++++-
 .../Investor_Management/InvestorDetails/ProfileView.jsx     | 3 +++
 src/Pages/Master/Sponser/Sponsers.jsx                       | 2 ++
 src/Routes/Routes.js                                        | 4 ++--
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
index 790e56e..e785d4e 100644
--- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
@@ -262,6 +262,9 @@ const InvestorDetails = () => {
     onEditOpen();
   };
 
+  console.log(investorDetails?.data?.totalItems);
+  
+
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box bg="white.500">
@@ -363,12 +366,13 @@ const InvestorDetails = () => {
             </Select>
 
             <Pagination
-              isLoading={investorDetailsLoading}
+              isLoading={investorDetailsLoading} 
               pageSize={pageSize}
               setPageSize={setPageSize}
               currentPage={currentPage}
               setCurrentPage={setCurrentPage}
               totalItems={investorDetails?.data?.totalItems}
+              
             />
           </HStack>
         </HStack>
diff --git a/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx b/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
index a8be18a..bb14246 100644
--- a/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
@@ -237,6 +237,7 @@ const ProfileView = () => {
               View Details
             </Tab>
             <Tab
+            isDisabled={true}
               fontSize={"sm"}
               _selected={{
                 color: "#004118",
@@ -246,6 +247,7 @@ const ProfileView = () => {
               Portfolio
             </Tab>
             <Tab
+            isDisabled={true}
               fontSize={"sm"}
               _selected={{
                 color: "#004118",
@@ -255,6 +257,7 @@ const ProfileView = () => {
               Transaction
             </Tab>
             <Tab
+            isDisabled={true}
               fontSize={"sm"}
               _selected={{
                 color: "#004118",
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index 0f16db1..5340eb3 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -178,6 +178,8 @@ const Sponser = () => {
 
   console.log(isSponserLoading);
 
+  
+
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box bg="white.500">
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index efbba0b..d45cb5c 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -62,8 +62,8 @@ export const RouteLink = [
   { path: "/view-io/:id", Component: ViewIOdata },
 
   // ===============[ Investor Management]===============
-  { path: "/investor-details", Componinvestorent: InvestorDetails },
-  { path: "/investor-details/profile-view/:id", Component: UnderConstruction },
+  { path: "/investor-details", Component: InvestorDetails },
+  { path: "/investor-details/profile-view/:id", Component: ProfileView },
   { path: "/investor-details/view-investor-details", Component: ViewInvestorDetails },
   // { path: "/investor-transactions", Component: InvestorTransactions },
   { path: "/investor-transactions", Component: UnderConstruction },