This commit is contained in:
2024-08-14 20:33:06 +05:30
7 changed files with 242 additions and 3 deletions

View File

@@ -0,0 +1,217 @@
import {
Box,
Button,
Heading,
Image,
Modal,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Progress,
Stack,
Text,
} from "@chakra-ui/react";
import React 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";
const MobileView = ({ isOpen, onClose, finalRef }) => {
return (
<div>
<Modal finalFocusRef={finalRef} isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent
h={"600px"}
w={"330px"}
backgroundColor={"transparent"}
boxShadow={"none"}
position={"relative"}
>
<Image
h={"100%"}
w={"100%"}
src={Mobile}
position={"absolute"}
top={"0"}
left={"0"}
/>
<Box
backgroundColor={"#fff"}
h={"100%"}
m={2}
borderRadius={"30px"}
pt={"30px"}
px={"15px"}
>
<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>
<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>
<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 fontSize={"xs"} fontWeight={500} mb={0}>
0.0% funded
</Text>
<Text fontSize={"sm"} fontWeight={500} mb={0}>
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}>
Sponsor name:
</Text>
<Text fontSize={"xs"} mb={1} fontWeight={600}>
Scott Simon
</Text>
</Box>
<Box display={"flex"} justifyContent={"space-between"}>
<Text fontSize={"xs"} mb={1} fontWeight={600}>
Estimated return:
</Text>
<Text fontSize={"xs"} mb={1} fontWeight={600}>
A provident veniam
</Text>
</Box>
<Box display={"flex"} justifyContent={"space-between"}>
<Text fontSize={"xs"} mb={1} fontWeight={600}>
Hoiding period:
</Text>
<Text fontSize={"xs"} mb={1} fontWeight={600}>
Eius eiusmod exericit
</Text>
</Box>
<Box display={"flex"} justifyContent={"space-between"}>
<Text fontSize={"xs"} mb={1} fontWeight={600}>
Minimum investment:
</Text>
<Text fontSize={"xs"} 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="15px">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="15px">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" />
<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={5}
borderRadius={"20px"}
boxShadow={
"rgba(0, 0, 0, 0.15) 0px 2px 8px"
}
>
<Heading fontSize="15px">Videos</Heading>
<video controls borderRadius="30px">
<source src="path_to_your_video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</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>
</Box>
</ModalContent>
</Modal>
</div>
);
};
export default MobileView;

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@@ -319,7 +319,7 @@ const DepositRequest = () => {
isLoading={isLoading}
/>
<DepositRequestApprove
data={data?.data?.rows}
data={data?.data?.rows}
isOpen={isConfirmOpen}
onClose={onConfirmClose}
id={actionId}

View File

@@ -46,7 +46,7 @@ const RejectModal = ({ isOpen, onClose, firstField }) => {
setCreate((prevCreate) => [...prevCreate, newDocument]);
onClose();
};
};
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];

View File

@@ -15,6 +15,7 @@ import {
Tag,
Text,
Tooltip,
useDisclosure,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
@@ -38,6 +39,8 @@ import ToastBox from "../../../Components/ToastBox";
import { useGetIOsQuery } from "../../../Services/io.service";
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
import { formatCurrency } from "../../../Components/CurrencyInput";
import { IoIosPhonePortrait } from "react-icons/io";
import MobileView from "../../../Components/MobileView";
// import { debounce } from "./AddIOCharges";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
@@ -55,6 +58,13 @@ const ViewIOTable = () => {
const [mouseEntered, setMouseEntered] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
const {
isOpen: isOpen,
onOpen: onOpen,
onClose: onClose,
} = useDisclosure();
// ===============================[ Paginations ]
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
@@ -75,6 +85,7 @@ const ViewIOTable = () => {
"Goal Amount",
"Holding Period",
"IO Status",
"Priority",
"Action",
];
@@ -176,7 +187,13 @@ const ViewIOTable = () => {
</Badge>
</Box>
),
"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>
</Text>
</Box>
),
Action: (
<Box display={"flex"} justifyContent={"center"} gap={2}>
<Tooltip
@@ -339,6 +356,11 @@ const ViewIOTable = () => {
setMouseEntered={setMouseEntered}
/>
<MobileView
isOpen={isOpen}
onClose={onClose}
/>
<CustomAlertDialog
onClose={() => setDeleteAlert(false)}
isOpen={deleteAlert}

BIN
src/assets/mobileImg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
src/assets/mobileWing.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB