Merge branch 'feature-dev' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into dev
This commit is contained in:
217
src/Components/MobileView.jsx
Normal file
217
src/Components/MobileView.jsx
Normal 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;
|
||||
BIN
src/Components/mobileWing.png
Normal file
BIN
src/Components/mobileWing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
@@ -319,7 +319,7 @@ const DepositRequest = () => {
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<DepositRequestApprove
|
||||
data={data?.data?.rows}
|
||||
data={data?.data?.rows}
|
||||
isOpen={isConfirmOpen}
|
||||
onClose={onConfirmClose}
|
||||
id={actionId}
|
||||
|
||||
@@ -46,7 +46,7 @@ const RejectModal = ({ isOpen, onClose, firstField }) => {
|
||||
|
||||
setCreate((prevCreate) => [...prevCreate, newDocument]);
|
||||
onClose();
|
||||
};
|
||||
};
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
const selectedFile = event.target.files[0];
|
||||
|
||||
@@ -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
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
BIN
src/assets/mobileWing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Reference in New Issue
Block a user