From ee8f905d3aa5445882d80bb299e6e2f8aef38b7c Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:12:37 +0530
Subject: [PATCH] mobile view

---
 src/Components/CurrencyInput.jsx              | 13 ++-
 src/Components/MobileView.jsx                 | 96 ++++++++++++++-----
 .../IO_Management/ViewIO/ViewIOTable.jsx      |  7 +-
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx |  4 +-
 .../IO_Management/ViewIO/ViewIOdetails.jsx    |  2 +-
 .../Master/ExchangeRate/ExchangeRate.jsx      | 73 +++++++-------
 src/Routes/Routes.js                          |  4 -
 7 files changed, 125 insertions(+), 74 deletions(-)

diff --git a/src/Components/CurrencyInput.jsx b/src/Components/CurrencyInput.jsx
index 45932c4..f2a46b1 100644
--- a/src/Components/CurrencyInput.jsx
+++ b/src/Components/CurrencyInput.jsx
@@ -1,8 +1,19 @@
 import React, { forwardRef } from 'react';
 import { Input } from "@chakra-ui/react";
 
+// export const formatCurrency = (value) => {
+//   if (!value) return '';
+//   const [integer, decimal] = value.split('.');
+//   const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+//   return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+// };
+
 export const formatCurrency = (value) => {
-  if (!value) return '';
+  if (!value && value !== 0) return ''; // Handle null, undefined, and empty strings
+
+  // Ensure the value is a string
+  value = value.toString();
+
   const [integer, decimal] = value.split('.');
   const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
diff --git a/src/Components/MobileView.jsx b/src/Components/MobileView.jsx
index be6b8a5..f2c461a 100644
--- a/src/Components/MobileView.jsx
+++ b/src/Components/MobileView.jsx
@@ -12,13 +12,47 @@ import {
   Stack,
   Text,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Mobile from "../assets/mobileWing.png";
 import mobileBanner from "../assets/welcome.avif";
 import { GrDownload } from "react-icons/gr";
 import { LuClock } from "react-icons/lu";
+import { GiNetworkBars } from "react-icons/gi";
+import { GrLinkedinOption } from "react-icons/gr";
+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";
 
 const MobileView = ({ isOpen, onClose, finalRef }) => {
+
+  const [time, setTime] = useState(new Date());
+  const params = useParams();
+  const id = params?.id;
+
+  const {
+    data,
+    isLoading: IObyIDisLoading,
+    error: IObyIDerror,
+  } = useGetIOByIdQuery(id, { skip: !id });
+
+  console.log(data);
+  
+
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const formatTime = (date) => {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
+  };
+
   return (
     <div>
       <Modal isCentered finalFocusRef={finalRef} isOpen={isOpen} onClose={onClose}>
@@ -46,6 +80,18 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
             pt={"30px"}
             px={"15px"}
           >
+            <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>
             <Box
               p={"10px"}
               overflowY={"scroll"}
@@ -63,11 +109,11 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                   "rgba(0, 0, 0, 0.15) 0px 2px 8px"
                 }
               >
-                <Box>
-                  <Box display={"flex"} justifyContent={"space-between"} alignItems={"center"}>
-                    <Text fontSize={"xs"} fontWeight={500} color="green">Stock</Text>
-                    <Text fontSize={"xs"} display={"flex"} alignItems={"center"} fontWeight={500}><LuClock /> Closing Date Aug 23 2024</Text>
-                  </Box>
+                <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"}
@@ -94,43 +140,43 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                     value={20}
                     borderRadius={"3px"}
                   />
-                  <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                  <Text color={"#4e4e4e"} fontSize={"xs"} fontWeight={600} mb={0}>
                     0.0% funded
                   </Text>
-                  <Text fontSize={"sm"} fontWeight={500} mb={0}>
+                  <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={"xs"} mb={1} fontWeight={600}>
+                    <Text fontSize={"10px"} mb={1} fontWeight={600} color={"#616161"}>
                       Sponsor name:
                     </Text>
-                    <Text fontSize={"xs"} mb={1} fontWeight={600}>
+                    <Text fontSize={"10px"} mb={1} fontWeight={600}>
                       Scott Simon
                     </Text>
                   </Box>
                   <Box display={"flex"} justifyContent={"space-between"}>
-                    <Text fontSize={"xs"} mb={1} fontWeight={600}>
+                    <Text fontSize={"10px"} mb={1} fontWeight={600} color={"#616161"}>
                       Estimated return:
                     </Text>
-                    <Text fontSize={"xs"} mb={1} fontWeight={600}>
+                    <Text fontSize={"10px"} mb={1} fontWeight={600}>
                       A provident veniam
                     </Text>
                   </Box>
                   <Box display={"flex"} justifyContent={"space-between"}>
-                    <Text fontSize={"xs"} mb={1} fontWeight={600}>
+                    <Text fontSize={"10px"} mb={1} fontWeight={600} color={"#616161"}>
                       Hoiding period:
                     </Text>
-                    <Text fontSize={"xs"} mb={1} fontWeight={600}>
+                    <Text fontSize={"10px"} mb={1} fontWeight={600}>
                       Eius eiusmod exericit
                     </Text>
                   </Box>
                   <Box display={"flex"} justifyContent={"space-between"}>
-                    <Text fontSize={"xs"} mb={1} fontWeight={600}>
+                    <Text fontSize={"10px"} mb={1} fontWeight={600} color={"#616161"}>
                       Minimum investment:
                     </Text>
-                    <Text fontSize={"xs"} mb={1} fontWeight={600}>
+                    <Text fontSize={"10px"} mb={1} fontWeight={600}>
                       BHD 1
                     </Text>
                   </Box>
@@ -145,7 +191,7 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                   "rgba(0, 0, 0, 0.15) 0px 2px 8px"
                 }
               >
-                <Heading fontSize="15px" fontWeight={600}>Key Merits</Heading>
+                <Heading fontSize="14px" fontWeight={600}>Key Merits</Heading>
                 <Box display={"flex"} alignItems={"center"}>
                   <Image
                     width={"30px"}
@@ -165,10 +211,10 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                   "rgba(0, 0, 0, 0.15) 0px 2px 8px"
                 }
               >
-                <Heading fontSize="15px" fontWeight={600}>Investment Documents</Heading>
+                <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 src="https://tanami.betadelivery.com/public/icons/icon8.svg" />
+                    <Image me={1} src="https://tanami.betadelivery.com/public/icons/icon8.svg" />
                     <Text fontSize={"xs"} mb={0}>
                       Merrill Rocha
                     </Text>
@@ -193,19 +239,19 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
                   "rgba(0, 0, 0, 0.15) 0px 2px 8px"
                 }
               >
-                <Heading fontSize="15px" fontWeight={600}>Videos</Heading>
+                <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" />
+                  <source src="https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4" type="video/mp4" style={{height:"200px"}} />
                 </video>
               </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>
+              <Button margin={"auto"} width={"85%"}  bottom="10px" left="0" colorScheme='forestGreen' mr={3} w={"100%"} fontWeight={500} borderRadius={"20px"}>
+                Invest
+              </Button>
+            </Box>
           </Box>
         </ModalContent>
       </Modal>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
index 12d42ab..81c084c 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -41,6 +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 { FaMobileAlt } from "react-icons/fa";
 // import { debounce } from "./AddIOCharges";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
@@ -85,7 +86,7 @@ const ViewIOTable = () => {
     "Goal Amount",
     "Holding Period",
     "IO Status",
-    "Priority",
+    // "Priority",
     "Action",
   ];
 
@@ -190,7 +191,9 @@ const ViewIOTable = () => {
     "Priority": (
       <Box w={"auto"} isTruncated={true}>
         <Text onClick={onOpen} as={"span"} color={"teal.900"} cursor={"pointer"}>
-          <Badge textTransform={"lowercase"} fontWeight={"500"} display={"flex"} alignItems={"center"} justifyContent={"center"} p={"2px 2px"} borderRadius={"4px"} ><IoIosPhonePortrait fontSize={"14px"} /> View</Badge>
+          <Badge color={"#000"}  colorScheme="purple" textTransform={"lowercase"} fontWeight={"500"} display={"flex"} alignItems={"center"} justifyContent={"center"} p={"2px 2px"} borderRadius={"4px"} >
+            <FaMobileAlt fontSize={"14px"} /><Text as={"span"} ml={1}>View</Text>
+          </Badge>
         </Text>
       </Box>
     ),
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index bb20909..4dde58b 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -45,7 +45,7 @@ const ViewIOdata = () => {
   const navigate = useNavigate();
   const [isEditing, setIsEditing] = useState(false);
 
-
+ 
   const tabs = [
     { label: "IO Details", content: <ViewIOdetails data={data?.data} /> },
     { label: "Investment documents", content: <InvestmentDocument data={data?.data} /> },
@@ -73,7 +73,7 @@ const ViewIOdata = () => {
         <TabList justifyContent={'space-between'} pe={4} alignItems={'center'}>
           <Box display={'flex'} >
           {tabs.map(({ label }, index) => (
-            <Tab
+            <Tab px={3}
               disabled={true}
               key={index}
               fontSize={"sm"}
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
index 015655f..a53f126 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
@@ -72,7 +72,7 @@ const schema = yup.object().shape({
     .positive("Expected return must be a positive number")
     .min(0.01, "Expected return must be at least 0.01"),
 });
-
+  
 const ViewIOdetails = () => {
   const navigate = useNavigate();
   const params = useParams();
diff --git a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
index c459a86..04dcf56 100644
--- a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
+++ b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
@@ -38,7 +38,7 @@ import { formatCurrency } from "../../../Components/CurrencyInput";
 
 const ExchangeRate = () => {
   const toast = useToast();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   const { slideFromRight, rateExchange, setRateExchange } =
     useContext(GlobalStateContext);
   const [searchTerm, setSearchTerm] = useState("");
@@ -52,14 +52,13 @@ const ExchangeRate = () => {
   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
   const [currentPage, setCurrentPage] = useState(1);
 
-    const {
-      data,
-      isLoading: isExchangeRateLoading,
-      errors,
-    } = useGetAllExchangeRatesQuery({ page: currentPage, size: pageSize })
-
-    console.log(data?.data);
+  const {
+    data,
+    isLoading: isExchangeRateLoading,
+    errors,
+  } = useGetAllExchangeRatesQuery({ page: currentPage, size: pageSize });
 
+  console.log(data?.data);
 
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
@@ -102,7 +101,7 @@ const ExchangeRate = () => {
         fontWeight={"600"}
         className="d-flex align-items-center fw- web-text-small"
       >
-      {item?.toCurrency?.currencyCode}
+        {item?.toCurrency?.currencyCode}
       </Text>
     ),
     "Effective from": (
@@ -119,7 +118,7 @@ const ExchangeRate = () => {
     Rate: (
       <Text
         justifyContent={"left"}
-        as={"span"} 
+        as={"span"}
         color={"gray.600"}
         fontWeight={"600"}
         className="d-flex align-items-center  web-text-small"
@@ -128,7 +127,7 @@ const ExchangeRate = () => {
       </Text>
     ),
 
-    Action: ( 
+    Action: (
       // <Button colorScheme="forestGreen" size={"xs"} variant={"ghost"}>
       //   Edit
       // </Button>
@@ -138,32 +137,30 @@ const ExchangeRate = () => {
           id={item.id}
           // updateHistory={updateHistory}
         />
-        
-    <Tooltip
-      rounded={"sm"}
-      fontSize={"xs"}
-      label="History"
-      bg="#fff"
-      color={"purple.500"}
-      placement="top"
-    >
-      <Button
-        // _hover={{ color: "purple.500" }}
-        // transition={"0.5s all"}
-        // color="purple.400"
-        colorScheme="purple"
-        rounded={"sm"}
-        size={{base:'xs', lg:'xs'}}
-        onClick={() => navigate(`currency-history/${item?.id}`)}
 
-        display={'flex'}
-        alignItems={'center'}
-        gap={1}
-        
-      >
-        <MdHistory /> 
-      </Button>
-      </Tooltip>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="History"
+          bg="#fff"
+          color={"purple.500"}
+          placement="top"
+        >
+          <Button
+            // _hover={{ color: "purple.500" }}
+            // transition={"0.5s all"}
+            // color="purple.400"
+            colorScheme="purple"
+            rounded={"sm"}
+            size={{ base: "xs", lg: "xs" }}
+            onClick={() => navigate(`currency-history/${item?.id}`)}
+            display={"flex"}
+            alignItems={"center"}
+            gap={1}
+          >
+            <MdHistory />
+          </Button>
+        </Tooltip>
       </Box>
     ),
   }));
@@ -187,7 +184,7 @@ const ExchangeRate = () => {
         <HStack
           display={"flex"}
           justifyContent={"space-between"}
-          ps={1} 
+          ps={1}
           pe={1}
           pb={4}
           pt={4}
@@ -203,8 +200,6 @@ const ExchangeRate = () => {
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-
-
         </HStack>
       </Box>
 
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index 3a35262..647a61b 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -49,10 +49,6 @@ export const RouteLink = [
   { path: "/exchange-rate", Component: ExchangeRate },
   { path: "/exchange-rate/currency-history/:id", Component: ExchangeHistory },
 
-
-
-
-
   { path: "/investment-type", Component: InvestmentType },
   { path: "/investment-type/add-investment/:id", Component: AddInvestmentType },
   { path: "/investment-type/add-investment", Component: AddInvestmentType },