From 226b8a39bca7ae37d5697112822f6720cc55f437 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Tue, 3 Sep 2024 13:14:49 +0530
Subject: [PATCH] portfolio switch btn

---
 .../InvestorDetails/Transaction.jsx           | 62 ++++++++++-------
 .../InvestorDetails/ViewInvestorDetails.jsx   | 66 ++++++++++++++++---
 2 files changed, 95 insertions(+), 33 deletions(-)

diff --git a/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx b/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
index c12ccd7..d319ad6 100644
--- a/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
@@ -133,10 +133,16 @@ const Transaction = () => {
         </Text>
       </Box>
     ),
-    "Amount": (
+    Amount: (
       <Box w={100} display={"flex"} justifyContent={"right"}>
-        <Text as={"span"} w={"100%"} color={"teal.900"} display={"flex"} justifyContent={"end"}>
-        {/* <Badge ms={1} colorScheme="green" me={1}>$</Badge> */}
+        <Text
+          as={"span"}
+          w={"100%"}
+          color={"teal.900"}
+          display={"flex"}
+          justifyContent={"end"}
+        >
+          {/* <Badge ms={1} colorScheme="green" me={1}>$</Badge> */}
           {parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
@@ -158,19 +164,18 @@ const Transaction = () => {
       </Text>
     ),
     "USD amount": (
-      
       <Box w={100} display={"flex"} justifyContent={"left"}>
-        {
-          item?.invCurToUSD_Rate ===  '0.0000' && (
-        <Text as={"span"}  w={"100%"} color={"teal.900"}>
-          <Badge ms={1} colorScheme="green" me={1}>$</Badge>
-          {parseFloat(item?.USDAmount || 0).toLocaleString(undefined, {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-          })}
-        </Text>
-          )
-        }
+        {item?.invCurToUSD_Rate === "0.0000" && (
+          <Text as={"span"} w={"100%"} color={"teal.900"}>
+            <Badge ms={1} colorScheme="green" me={1}>
+              $
+            </Badge>
+            {parseFloat(item?.USDAmount || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+          </Text>
+        )}
       </Box>
     ),
     "IO Name": (
@@ -209,14 +214,22 @@ const Transaction = () => {
     ),
     Transaction: null,
     // "Currency": null,
-    "Amount": (
-      InvestorWallet?.currencyCode_InCur&&<Box w={100} display={"flex"} justifyContent={"end"}>
-        <Text as={"span"} textAlign={"right"} w={"100%"} color={"teal.900"} fontWeight={600}>
-        {/* <Badge ms={1} colorScheme="green" me={1}>$</Badge> */}
-          {parseFloat(InvestorWallet?.WalletBalance_InInvCur||0).toLocaleString(
-            undefined,
-            { minimumFractionDigits: 2, maximumFractionDigits: 2 }
-          )}
+    Amount: InvestorWallet?.currencyCode_InCur && (
+      <Box w={100} display={"flex"} justifyContent={"end"}>
+        <Text
+          as={"span"}
+          textAlign={"right"}
+          w={"100%"}
+          color={"teal.900"}
+          fontWeight={600}
+        >
+          {/* <Badge ms={1} colorScheme="green" me={1}>$</Badge> */}
+          {parseFloat(
+            InvestorWallet?.WalletBalance_InInvCur || 0
+          ).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
           <Badge ms={1} colorScheme="green">
             {InvestorWallet?.currencyCode_InCur}
           </Badge>
@@ -230,7 +243,6 @@ const Transaction = () => {
     "Payment Method": null,
   };
 
-  
   extractedArray?.push(totalRow);
 
   const handleDelete = () => {
@@ -247,7 +259,7 @@ const Transaction = () => {
   };
 
   return (
-    <Box {...OPACITY_ON_LOAD}  height={"100vh"} pb={38}>
+    <Box {...OPACITY_ON_LOAD} height={"100vh"} pb={38}>
       <Box bg="white.500">
         <HStack
           display={"flex"}
diff --git a/src/Pages/Investor_Management/InvestorDetails/ViewInvestorDetails.jsx b/src/Pages/Investor_Management/InvestorDetails/ViewInvestorDetails.jsx
index 8c1fae9..960f669 100644
--- a/src/Pages/Investor_Management/InvestorDetails/ViewInvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/ViewInvestorDetails.jsx
@@ -47,6 +47,7 @@ const ViewInvestorDetails = () => {
   const [actionId, setActionId] = useState(false);
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const [isSwitchOn, setIsSwitchOn] = useState(false);
 
   useEffect(() => {
     // Simulate loading
@@ -75,7 +76,6 @@ const ViewInvestorDetails = () => {
     // "Action",
   ];
 
-
   // ====================================================[Table Filter]================================================================
   const filteredData = viewInvestor?.filter((item) => {
     // Filter by name (case insensitive)
@@ -118,7 +118,7 @@ const ViewInvestorDetails = () => {
       </Box>
     ),
     "Sponsor Name": (
-      <Box  w={"auto"} isTruncated={true}>
+      <Box w={"auto"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
           {item.sponsorName}
         </Text>
@@ -127,7 +127,9 @@ const ViewInvestorDetails = () => {
     "Investment Amount": (
       <Box w={"auto"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
-          <Badge ms={1} colorScheme="green" me={1}>$</Badge>
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
           {parseFloat(item?.investedAmount || 0).toLocaleString(undefined, {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
@@ -144,8 +146,10 @@ const ViewInvestorDetails = () => {
     ),
     "Market Value": (
       <Box w={"auto"} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"}> 
-        <Badge ms={1} colorScheme="green" me={1}>$</Badge>
+        <Text as={"span"} color={"teal.900"}>
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
           {parseFloat(item?.MarketValue || 0).toLocaleString(undefined, {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
@@ -163,7 +167,9 @@ const ViewInvestorDetails = () => {
     Distribution: (
       <Box w={"auto"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
-        <Badge ms={1} colorScheme="green" me={1}>$</Badge>
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
           {parseFloat(item?.DistributionAmountReceived || 0).toLocaleString(
             undefined,
             {
@@ -184,7 +190,9 @@ const ViewInvestorDetails = () => {
     "Total return": (
       <Box w={"auto"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
-        <Badge ms={1} colorScheme="green" me={1}>$</Badge>
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
           {parseFloat(item?.TotalReturn || 0).toLocaleString(undefined, {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
@@ -267,6 +275,10 @@ const ViewInvestorDetails = () => {
     setIsLoading(true);
   };
 
+  const switchOnChangeHandle = () => {
+    setIsSwitchOn(!isSwitchOn); // Toggle the switch state
+  };
+
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box bg="white.500">
@@ -289,7 +301,45 @@ const ViewInvestorDetails = () => {
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-
+          <Box
+            as="button"
+            display="flex"
+            alignItems="center"
+            justifyContent={isSwitchOn ? "flex-end" : "flex-start"} // Use this if needed
+            width="155px"
+            height="30px"
+            borderRadius="20px"
+            backgroundColor={isSwitchOn ? "#004118" : "#ef0000"}
+            onClick={switchOnChangeHandle} // Correct handler name
+            position="relative"
+            fontSize="13px"
+            fontWeight="100"
+            transition="background-color 0.2s"
+            _before={{
+              content: '""',
+              position: "absolute",
+              width: "20px",
+              height: "20px",
+              borderRadius: "50%",
+              backgroundColor: "#FFF",
+              boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+              transform: isSwitchOn ? "translateX(128px)" : "translateX(0)",
+              transition: "transform 0.2s",
+              left: "4px",
+            }}
+          >
+            <Text
+              fontWeight="400"
+              zIndex={1}
+              position="absolute"
+              mb={0}
+              color="#fff"
+              left={isSwitchOn ? "10px" : "auto"}
+              right={isSwitchOn ? "auto" : "10px"}
+            >
+              {isSwitchOn ? "Investor Currency" : "Investor Currency"}
+            </Text>
+          </Box>
           {/* <HStack display={"flex"} alignItems={"center"}>
             <Pagination totalItems={10} />
           </HStack> */}