Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

mobile view

Browse Source
This commit is contained in:
YasinShaikh123
2024-08-16 15:12:37 +05:30
parent 395d60fd2f
commit ee8f905d3a
7 changed files with 125 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Components/CurrencyInput.jsx
View File

@@ -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;

96
src/Components/MobileView.jsx
View File

@@ -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>

7
src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
View File

@@ -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>
),

4
src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
View File

@@ -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"}

2
src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
View File

@@ -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();

73
src/Pages/Master/ExchangeRate/ExchangeRate.jsx
View File

@@ -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>

4
src/Routes/Routes.js
View File

@@ -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 },