invest card fix

src/Components/InvestmentCard/InvestmentCard.jsx

@@ -11,51 +11,10 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 
-const investments = [
-  {
-    imgSrc:
-      "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
-    title: "Multi Family Residence Portfolio",
-    sponsor: "KKR",
-    annReturn: "12.5%",
-    annYield: "12.5%",
-    minInvests: "$1,000",
-    targClose: "24 December",
-    holdingPer: "5-7 years",
-    progressValue: 80,
-  },
-  {
-    imgSrc:
-      "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
-    title: "Multi Family Residence Portfolio",
-    sponsor: "KKR",
-    annReturn: "12.5%",
-    annYield: "12.5%",
-    minInvests: "$1,000",
-    targClose: "24 December",
-    holdingPer: "5-7 years",
-    progressValue: 80,
-  },
-  {
-    imgSrc:
-      "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
-    title: "Multi Family Residence Portfolio",
-    sponsor: "KKR",
-    annReturn: "12.5%",
-    annYield: "12.5%",
-    minInvests: "$1,000",
-    targClose: "24 December",
-    holdingPer: "5-7 years",
-    progressValue: 80,
-  },
-];
 
-const InvestmentCard = () => {
+const InvestmentCard = ({investment}) => {
   return (
-    <Box w={"100%"}>
-      <Box>
-        {investments.map((investment, index) => (
-          <Card
+   <Card
             direction={{ base: "column", sm: "row" }}
             overflow="scroll"
             variant="outline"
@@ -71,31 +30,31 @@ const InvestmentCard = () => {
               objectFit="cover"
               w={"200px"}
               h={"160px"}
-              src={investment.imgSrc}
-              alt={investment.title}
+              src={investment?.imgSrc}
+              alt={investment?.title}
             />
 
             <Stack>
               <CardBody>
                 <Heading size="sm" fontWeight={"500"}>
-                  {investment.title}
+                  {investment?.title}
                 </Heading>
                 <Text fontSize="sm" mb={"4px"}>
                   Sponsor:{" "}
                   <Text as={"span"} fontWeight={"600"}>
-                    {investment.sponsor}
+                    {investment?.sponsor}
                   </Text>{" "}
                 </Text>
                 <Text fontSize="sm" mb={"4px"}>
                   Ann return:{" "}
                   <Text as={"span"} fontWeight={"600"}>
-                    {investment.annReturn}
+                    {investment?.annReturn}
                   </Text>{" "}
                 </Text>
                 <Text fontSize="sm" mb={"4px"}>
                   Ann Yield:{" "}
                   <Text as={"span"} fontWeight={"600"}>
-                    {investment.annYield}
+                    {investment?.annYield}
                   </Text>{" "}
                 </Text>
               </CardBody>
@@ -105,29 +64,29 @@ const InvestmentCard = () => {
                 <Text fontSize="sm" mb={"4px"}>
                   Min.Invests:{" "}
                   <Text as={"span"} fontWeight={"600"}>
-                    {investment.minInvests}
+                    {investment?.minInvests}
                   </Text>{" "}
                 </Text>
                 <Text fontSize="sm" mb={"4px"}>
                   Targ Close:{" "}
                   <Text as={"span"} fontWeight={"600"}>
-                    {investment.targClose}
+                    {investment?.targClose}
                   </Text>{" "}
                 </Text>
                 <Text fontSize="sm" mb={"4px"}>
                   Holding per:{" "}
                   <Text as={"span"} fontWeight={"600"}>
-                    {investment.holdingPer}
+                    {investment?.holdingPer}
                   </Text>{" "}
                 </Text>
               </CardBody>
             </Stack>
             <Stack>
               <CardBody>
-              <Tooltip hasArrow placement='top-start' label={investment.progressValue} bg='white' color='#000'>
+              <Tooltip hasArrow placement='top-start' label={investment?.progressValue} bg='white' color='#000'>
                 <Progress
                   width={"200px"}
-                  value={investment.progressValue}
+                  value={investment?.progressValue}
                   rounded={"10px"}
                   colorScheme={"green"}
                   size={'sm'}
@@ -146,9 +105,6 @@ const InvestmentCard = () => {
               </CardBody>
             </Stack>
           </Card>
-        ))}
-      </Box>
-    </Box>
   );
 };
 

src/Contexts/GlobalStateProvider.jsx

@@ -301,18 +301,6 @@ const GlobalStateProvider = ({ children }) => {
       holdingPer: "5-7 years",
       progressValue: 80,
     },
-    {
-      imgSrc:
-        "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
-      title: "Multi Family Residence Portfolio",
-      sponsor: "KKR",
-      annReturn: "12.5%",
-      annYield: "12.5%",
-      minInvests: ",00 $0",
-      targClose: "24 December",
-      holdingPer: "5-7 years",
-      progressValue: 80,
-    },
   ]);
 
   const [rateExchange, setRateExchange] = useState([

src/Pages/IO_Management/ViewIO.jsx

@@ -55,7 +55,7 @@ const ExchangeRate = () => {
         <TabPanels>
           <TabPanel>
             {investment?.map((investmentDetails, index) => (
-                <Skeleton isLoaded={!isLoading}><InvestmentCard key={index} investment={investmentDetails} /></Skeleton>
+                <Skeleton  key={index} isLoaded={!isLoading}><InvestmentCard  investment={investmentDetails} /></Skeleton>
                 ))}
           </TabPanel>
           <TabPanel>