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

mobile changes

Browse Source
This commit is contained in:
YasinShaikh123
2024-08-28 19:35:39 +05:30
parent 86ce31e86c
commit 91e362d6c2
11 changed files with 443 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/Components/MobileView.jsx
View File

@@ -27,7 +27,7 @@ import { BiWifi } from "react-icons/bi";
import { useGetIOByIdQuery } from "../Services/io.service";
import { useNavigate, useParams } from "react-router-dom";
import FullscreenLoaders from "./Loaders/FullscreenLoaders";
import { formatDate } from "../Constants/Constants";
import { calculatePercentage, formatDate } from "../Constants/Constants";
import { BsFileText } from "react-icons/bs";
const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
@@ -63,6 +63,13 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
});
};
console.log(
calculatePercentage(
IObyID?.data?.totalAmtInvestmentInUSD,
IObyID?.data?.goalAmount
)
);
return (
<Modal
display={"flex"}
@@ -89,12 +96,12 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
w={"320px"}
sx={{
"@media (max-width: 2024px)": {
height:"695px",
width:"360px",
height: "695px",
width: "360px",
},
"@media (max-width: 1440px)": {
height:"600px",
width:"320px",
height: "600px",
width: "320px",
},
}}
>
@@ -117,16 +124,12 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
>
{IObyIDisLoading ? (
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
h={"100%"}
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
h={"100%"}
>
<Spinner
thickness='3px'
color='purple.900'
size='lg'
/>
<Spinner thickness="3px" color="purple.900" size="lg" />
</Box>
) : (
<>
@@ -174,10 +177,10 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
borderBottomRightRadius={"23px"}
sx={{
"@media (max-width: 2024px)": {
height:"575px",
height: "575px",
},
"@media (max-width: 1440px)": {
height:"483px",
height: "483px",
},
}}
>
@@ -246,7 +249,10 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
<Progress
colorScheme="green"
size="sm"
value={20}
value={calculatePercentage(
IObyID?.data?.totalAmtInvestmentInUSD,
IObyID?.data?.goalAmount
)}
borderRadius={"3px"}
/>
<Text
@@ -255,7 +261,16 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
fontWeight={600}
mb={0}
>
0.0% funded
{parseFloat(
calculatePercentage(
IObyID?.data?.totalAmtInvestmentInUSD,
IObyID?.data?.goalAmount
) || 0
).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
% funded
</Text>
<Text
fontSize={"xs"}
@@ -334,25 +349,28 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
<Heading fontSize="14px" fontWeight={600}>
Key Merits
</Heading>
<Box display={"flex"} alignItems={"center"}>
{keyMerits?.[0]?.icon?.iconFilePath && (
<Image
rounded={"md"}
display={"flex"}
p={1}
justifyContent={"center"}
alignItems={"center"}
src={
"https://tanami.betadelivery.com/" +
keyMerits[0].icon.iconFilePath
}
w={8}
h={8}
/>
)}
<Text fontSize={"xs"} mb={0}>
{IObyID?.data?.keyMerits[0]?.meritsDescription}
</Text>
<Box>
{keyMerits &&
keyMerits.map((item, index) => (
<Box display={"flex"} alignItems={"center"}>
<Image
rounded={"md"}
display={"flex"}
p={1}
justifyContent={"center"}
alignItems={"center"}
src={
"https://tanami.betadelivery.com/" +
item?.icon.iconFilePath
}
w={8}
h={8}
/>
<Text fontSize={"xs"} mb={0}>
{item?.meritsDescription}
</Text>
</Box>
))}
</Box>
</Box>
<Box

7
src/Constants/Constants.js
View File

@@ -138,4 +138,11 @@ export function formatDate(dateString) {
const options = { year: 'numeric', month: 'short', day: 'numeric' };
const date = new Date(dateString);
return date.toLocaleDateString('en-US', options);
}
export function calculatePercentage(part, total) {
if (total === 0) {
return 0; // To avoid division by zero
}
return (part / total) * 100;
}

7
src/Pages/AccountDeletion/DeletionHistory.jsx
View File

@@ -38,6 +38,13 @@ const DeletionHistory = () => {
refetch
} = useGetDeleteHistoryQuery()
const formatDate = (date) => {
return new Date(date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
});
};
// Use useEffect to refetch data when the component mounts
useEffect(() => {

2
src/Pages/IO_Management/CreateIO/CreateIO.jsx
View File

@@ -23,7 +23,7 @@ const CreateIO = () => {
const { data, error, isLoading } = useGetIOprepopulateDataQuery();
// console.log(data?.data);
console.log(data?.data);
const enableNextTab = (index) => {
setTabs((prevTabs) => {

16
src/Pages/IO_Management/CreateIO/Destribution.jsx
View File

@@ -24,7 +24,13 @@ const Destribution = () => {
console.log(IODetails?.ioNAVHistory);
const formatDate = (date) => {
return new Date(date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
});
};
useEffect(() => {
// Simulate loading
@@ -69,7 +75,7 @@ const Destribution = () => {
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{formatDatee(item.transactionDate)}
{formatDate(item.transactionDate)}
</Text>
),
"Amount": (
@@ -82,7 +88,11 @@ const Destribution = () => {
>
{/* {`${item.transactionAmount}`} */}
{`$${parseFloat(item.transactionAmount||0).toLocaleString()}`}
{/* {`$${parseFloat(item.transactionAmount||0).toLocaleString()}`} */}
{`${parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}`}
</Text>
),
"% of Investment": (

103
src/Pages/IO_Management/CreateIO/IOCashDetails.jsx
View File

@@ -1,5 +1,6 @@
import {
Avatar,
Badge,
Box,
Button,
HStack,
@@ -30,7 +31,8 @@ const IOCashDetails = () => {
const toast = useToast();
const firstField = useRef();
const { isOpen, onOpen, onClose } = useDisclosure();
const { caseDetails, setCaseDetails, IODetails } = useContext(GlobalStateContext);
const { caseDetails, setCaseDetails, IODetails } =
useContext(GlobalStateContext);
const [searchTerm, setSearchTerm] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [deleteAlert, setDeleteAlert] = useState(false);
@@ -48,6 +50,14 @@ const IOCashDetails = () => {
return () => clearTimeout(timer);
}, []);
const formatDate = (date) => {
return new Date(date).toLocaleDateString("en-GB", {
day: "2-digit",
month: "2-digit",
year: "numeric",
});
};
// Calculate totals
const totalAmount = caseDetails.reduce(
(acc, caseDetail) => acc + caseDetail.amount,
@@ -72,21 +82,22 @@ const IOCashDetails = () => {
);
toast({
render: () => <ToastBox message={"Status changed succesfully.!"} />,
});
});
}, 300);
// Table filter
const filteredData = IODetails?.ioCashHistory?.filter((item) => {
const name = item.transactionType;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
return nameMatches;
}).sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
const filteredData = IODetails?.ioCashHistory
?.filter((item) => {
const name = item.transactionType;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
return nameMatches;
})
.sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
const extractedArray = filteredData?.map((item, index) => ({
id: item?.id,
"Date": (
Date: (
<Text
justifyContent={"center"}
as={"span"}
@@ -99,7 +110,7 @@ const IOCashDetails = () => {
),
"Transaction type": (
<Text
justifyContent ={"center"}
justifyContent={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
@@ -108,20 +119,27 @@ const IOCashDetails = () => {
{item?.transactionType}
</Text>
),
"Amount": (
Amount: (
<Text
justifyContent ={"center"}
justifyContent={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{`$${parseFloat(item.transactionAmount||0).toLocaleString()}`}
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{/* {parseFloat(item.transactionAmount || 0).toLocaleString()} */}
{`${parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}`}
</Text>
),
"Comments": (
Comments: (
<Text
justifyContent ={"center"}
justifyContent={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
@@ -132,20 +150,24 @@ const IOCashDetails = () => {
),
"Update by ": (
<Text
justifyContent ={"center"}
justifyContent={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
gap={2}
className="d-flex align-items-center web-text-small"
>
<Avatar size='sm' name={item.creator?.firstName} src={item.creator?.profilePhoto} />{item.creator?.firstName}
<Avatar
size="sm"
name={item.creator?.firstName}
src={item.creator?.profilePhoto}
/>
{item.creator?.firstName}
</Text>
),
"Update On": (
<Text
justifyContent ={"center"}
justifyContent={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
@@ -173,7 +195,7 @@ const IOCashDetails = () => {
return (
<Table size="sm">
<Tbody backgroundColor="gray.50">
<Tr >
<Tr>
<Th
textAlign={"center"}
p={3}
@@ -267,9 +289,18 @@ const IOCashDetails = () => {
onChange={(e) => setSearchTerm(e.target.value)}
/>
{IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Cash</Button>:null}
{IODetails?.isInvestedAmount ? (
<Button
onClick={onOpen}
leftIcon={<AddIcon />}
colorScheme="forestGreen"
size={"sm"}
rounded={"sm"}
fontSize={"xs"}
>
Add IO Cash
</Button>
) : null}
</HStack>
</Box>
@@ -277,7 +308,7 @@ const IOCashDetails = () => {
centered={true}
emptyMessage={`We don't have any Sponers`}
tableHeadRow={tableHeadRow}
data={extractedArray}
data={extractedArray}
isLoading={isLoading}
viewActionId={actionId}
setViewActionId={setActionId}
@@ -294,23 +325,11 @@ const IOCashDetails = () => {
isLoading={isLoading}
/>
<AddCashDetails
isOpen={isOpen}
onClose={onClose}
firstField={firstField} />
<AddCashDetails
isOpen={isOpen}
onClose={onClose}
firstField={firstField}
/>
</Box>
);
};

244
src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
View File

@@ -1,32 +1,42 @@
import React, { useContext, useEffect, useRef, useState } from 'react'
import GlobalStateContext from '../../../Contexts/GlobalStateContext';
import { Box, HStack, Input,Text, Table, Tbody, Th, Tr, Avatar, useDisclosure,Button } from '@chakra-ui/react';
import { OPACITY_ON_LOAD } from '../../../Layout/animations';
import Pagination from '../../../Components/Pagination';
import NormalTable from '../../../Components/DataTable/NormalTable';
import CustomAlertDialog from '../../../Components/CustomAlertDialog';
import { formatDatee } from '../../../Components/FormField';
import { AddIcon } from '@chakra-ui/icons';
import AddIONav from './AddIONav';
import { formatDate } from '../../Master/Sponser/Sponsers';
import React, { useContext, useEffect, useRef, useState } from "react";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import {
Box,
HStack,
Input,
Text,
Table,
Tbody,
Th,
Tr,
Avatar,
useDisclosure,
Button,
Badge,
} from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import Pagination from "../../../Components/Pagination";
import NormalTable from "../../../Components/DataTable/NormalTable";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import { formatDatee } from "../../../Components/FormField";
import { AddIcon } from "@chakra-ui/icons";
import AddIONav from "./AddIONav";
import { formatDate } from "../../Master/Sponser/Sponsers";
const IONAVDetails = () => {
const { navDetails, setNavDetails, IODetails } =
useContext(GlobalStateContext);
const firstField = useRef();
const { isOpen, onOpen, onClose } = useDisclosure();
const [searchTerm, setSearchTerm] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [deleteAlert, setDeleteAlert] = useState(false);
const [actionId, setActionId] = useState(false);
const [mouseEntered, setMouseEntered] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
const firstField = useRef();
const { isOpen, onOpen, onClose } = useDisclosure();
const [searchTerm, setSearchTerm] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [deleteAlert, setDeleteAlert] = useState(false);
const [actionId, setActionId] = useState(false);
const [mouseEntered, setMouseEntered] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
console.log(IODetails?.ioNAVHistory);
console.log(IODetails?.ioNAVHistory);
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
@@ -37,29 +47,31 @@ const IONAVDetails = () => {
return () => clearTimeout(timer);
}, []);
// Table setup
const tableHeadRow = [
// "Sr.No",
"Valuation Date",
"NAV",
"Last NAV update",
"Investment Closed",
"Comments",
"Update by ",
// "Update On",
];
// Table setup
const tableHeadRow = [
// "Sr.No",
"Valuation Date",
"NAV",
"Last NAV update",
"Investment Closed",
"Comments",
"Update by ",
// "Update On",
];
// Table filter
const filteredData = IODetails?.ioNAVHistory?.filter((item) => {
const name = item.transactionType;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
return nameMatches;
}).sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));
// Table filter
const filteredData = IODetails?.ioNAVHistory
?.filter((item) => {
const name = item.transactionType;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
return nameMatches;
})
.sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));
const extractedArray=filteredData?.map((item, index) => ({
const extractedArray = filteredData?.map((item, index) => ({
id: item?.id,
"Sr.No": index +1,
"Sr.No": index + 1,
"Valuation Date": (
<Text
justifyContent={"center"}
@@ -72,17 +84,23 @@ const IONAVDetails = () => {
{formatDate(item?.transactionDate)}
</Text>
),
"NAV": (
NAV: (
<Text
justifyContent={"center"}
justifyContent={"left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
className="d-flex align-items-left web-text-small"
>
{/* {`${item.transactionAmount}`} */}
{`$${parseFloat(item.transactionAmount||0).toLocaleString()}`}
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</Text>
),
"Last NAV update": (
@@ -104,10 +122,10 @@ const IONAVDetails = () => {
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.initialNAVvalue&& `${item.initialNAVvalue}`}
{item.initialNAVvalue && `${item.initialNAVvalue}`}
</Text>
),
"Comments": (
Comments: (
<Text
justifyContent={"center"}
as={"span"}
@@ -120,15 +138,15 @@ const IONAVDetails = () => {
),
"Update by ": (
<Text
justifyContent ={"center"}
justifyContent={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
gap={2}
className="d-flex align-items-center web-text-small"
>
<Avatar size='sm' name={"faisal"} src={null} />Faisal
<Avatar size="sm" name={"faisal"} src={null} />
Faisal
</Text>
),
"Update On": (
@@ -144,12 +162,8 @@ const IONAVDetails = () => {
),
}));
const handleDelete = () => {
const updatedNav = navDetails.filter(
(sponsor) => sponsor.id !== actionId
);
const updatedNav = navDetails.filter((sponsor) => sponsor.id !== actionId);
setTimeout(() => {
setNavDetails(updatedNav);
@@ -159,71 +173,71 @@ const IONAVDetails = () => {
setIsLoading(true);
};
return (
<Box {...OPACITY_ON_LOAD} pb={0}>
<Box bg="white.500">
<HStack
display={"flex"}
justifyContent={"space-between"}
pb={3}
spacing="24px"
>
<Input
type="search"
width={300}
placeholder="Search..."
size="sm"
rounded="sm"
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
return (<Box {...OPACITY_ON_LOAD} pb={0}>
<Box bg="white.500">
<HStack
display={"flex"}
justifyContent={"space-between"}
pb={3}
spacing="24px"
>
<Input
type="search"
width={300}
placeholder="Search..."
size="sm"
rounded="sm"
focusBorderColor="green.500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
{/* <HStack display={"flex"} alignItems={"center"}>
{/* <HStack display={"flex"} alignItems={"center"}>
<Pagination totalItems={10} />
</HStack> */}
{/* {IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Cash</Button>:null} */}
{IODetails?.isInvestedAmount ? (
<Button
onClick={onOpen}
leftIcon={<AddIcon />}
colorScheme="forestGreen"
size={"sm"}
rounded={"sm"}
fontSize={"xs"}
>
Add IO Nav
</Button>
) : null}
</HStack>
</Box>
{IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Nav</Button>:null}
<NormalTable
centered={true}
emptyMessage={`We don't have any Sponers`}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
viewActionId={actionId}
setViewActionId={setActionId}
caption={"Tanami v1.0"}
setMouseEnteredId={setMouseEnteredId}
setMouseEntered={setMouseEntered}
/>
</HStack>
<CustomAlertDialog
onClose={() => setDeleteAlert(false)}
isOpen={deleteAlert}
message={"Are you sure you want to delete sponers?"}
alertHandler={handleDelete}
isLoading={isLoading}
/>
<AddIONav isOpen={isOpen} onClose={onClose} firstField={firstField} />
</Box>
);
};
<NormalTable
centered={true}
emptyMessage={`We don't have any Sponers`}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
viewActionId={actionId}
setViewActionId={setActionId}
caption={"Tanami v1.0"}
setMouseEnteredId={setMouseEnteredId}
setMouseEntered={setMouseEntered}
/>
<CustomAlertDialog
onClose={() => setDeleteAlert(false)}
isOpen={deleteAlert}
message={"Are you sure you want to delete sponers?"}
alertHandler={handleDelete}
isLoading={isLoading}
/>
<AddIONav
isOpen={isOpen}
onClose={onClose}
firstField={firstField} />
</Box>
)
}
export default IONAVDetails
export default IONAVDetails;

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

@@ -42,14 +42,17 @@ import { formatCurrency } from "../../../Components/CurrencyInput";
import { IoIosPhonePortrait } from "react-icons/io";
import MobileView from "../../../Components/MobileView";
import { ImMobile } from "react-icons/im";
import { generateSerialNumber, removeTrailingZeros } from "../../../Constants/Constants";
import {
generateSerialNumber,
removeTrailingZeros,
} from "../../../Constants/Constants";
// import { debounce } from "./AddIOCharges";
const formatDate = (date) => {
return new Date(date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
return new Date(date).toLocaleDateString("en-GB", {
day: "2-digit",
month: "2-digit",
year: "numeric",
});
}; // Simple date formatter
@@ -74,12 +77,11 @@ const ViewIOTable = () => {
// ===============================[ RTK Api calls ] =============================================
const { data, isLoading, error } = useGetIOsQuery({
page: currentPage,
page: currentPage,
size: pageSize,
});
console.log(data);
// ===============================[ Table Header ]
const tableHeadRow = [
@@ -91,7 +93,7 @@ const ViewIOTable = () => {
"Goal Amount",
"Closing Date",
"IO Status",
// "Preview",
"Preview",
"Action",
];
@@ -114,16 +116,16 @@ const ViewIOTable = () => {
const extractedArray = filteredData?.map((item, idx) => ({
"Sr No.": (
<Text
w={'24px'}
w={"24px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center fw-bold web-text-small"
>
{/* {item.id} */}
{generateSerialNumber(idx,currentPage, pageSize )}
</Text>),
{generateSerialNumber(idx, currentPage, pageSize)}
</Text>
),
"IO ID": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
@@ -140,27 +142,27 @@ const ViewIOTable = () => {
// </Text>
// </Box>
<Tooltip
hasArrow
bg={"#fff"}
fontSize={"xs"}
label={item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
placement="top-start"
color={"blue.800"}
>
<Text
as={"span"}
color={"teal.900"}
fontWeight={"500"}
maxWidth="200px" // Adjust width as needed
display="block" // Ensure block display for proper truncation
overflow="hidden"
isTruncated
textOverflow="ellipsis"
cursor={"grab"}
hasArrow
bg={"#fff"}
fontSize={"xs"}
label={item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
placement="top-start"
color={"blue.800"}
>
{item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
</Text>
</Tooltip>
<Text
as={"span"}
color={"teal.900"}
fontWeight={"500"}
maxWidth="200px" // Adjust width as needed
display="block" // Ensure block display for proper truncation
overflow="hidden"
isTruncated
textOverflow="ellipsis"
cursor={"grab"}
>
{item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
</Text>
</Tooltip>
),
Sponsor: (
<Box w={"auto"} isTruncated={true}>
@@ -179,18 +181,18 @@ const ViewIOTable = () => {
</Box>
),
"Goal Amount": (
<Box w={"100%"}>
<Text
w={"100%"}
textAlign={"center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
>
<Box w={"100%"} display={"flex"} justifyContent={"end"}>
<Text color={"teal.900"} fontWeight={"500"}>
{/* {item.goalAmount
? formatCurrency(removeTrailingZeros(item.goalAmount))
: "---"} */}
{`$${parseFloat(item.goalAmount||0).toLocaleString()}`}
{`${parseFloat(item.goalAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}`}
<Badge ms={1} colorScheme="green">
USD
</Badge>
</Text>
</Box>
),
@@ -201,7 +203,7 @@ const ViewIOTable = () => {
{formatDate(item.closingDate ? item.closingDate : "---")}
</Text>
</Box>
),
),
"IO Status": (
<Box w={"auto"} isTruncated={true}>
<Badge
@@ -238,12 +240,15 @@ const ViewIOTable = () => {
Preview: (
<Box display={"flex"} justifyContent={"start"}>
<Badge
display={"flex"} px={2} py={1} alignItems={"center"}
color={"#000"}
fontWeight={500}
display={"flex"}
px={2}
py={1}
alignItems={"center"}
color={"#000"}
fontWeight={500}
bg="purple.200"
onClick={() =>{
setActionId(item.id)
onClick={() => {
setActionId(item.id);
onOpen();
}}
rounded={"sm"}

152
src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
View File

@@ -162,6 +162,9 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
apiTransactionTitles?.includes(item.id)
);
const balanceAmount = IODetails?.goalAmount - IODetails?.totalAmtInvestmentInUSD
return IODetails?.investmentNameEnglish ? (
<Box
display={"flex"}
@@ -195,7 +198,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
boxShadow={"md"}
position={"relative"}
>
<HStack gap={8}>
<HStack gap={4}>
<Box h={100} w={200} p={1.5}>
{/* <Image rounded={'md'} h={"100%"} src={ " https://tanami.betadelivery.com/" + IODetails?.ioName} alt={IODetails?.ioName}/> */}
{IODetails?.artifactsImage?.[0]?.artifactPathName ? (
@@ -225,41 +228,102 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
)}
</Box>
<Box display={"flex"} w={"auto"} flexDirection={"column"} gap={2}>
<Text
as={"span"}
fontSize={"xs"}
color={"gray.500"}
fontWeight={"500"}
>
IO Name
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{IODetails?.investmentNameEnglish
? IODetails?.investmentNameEnglish
: "---"}
</Text>
</Box>
<Box>
<Box w={"auto"} flexDirection={"column"} gap={2}>
<Text
as={"span"}
fontSize={"xs"}
color={"gray.500"}
fontWeight={"500"}
me={2}
>
IO Name :-
</Text>
<Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
{IODetails?.investmentNameEnglish
? IODetails?.investmentNameEnglish
: "---"}
</Text>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Text
as={"span"}
fontSize={"xs"}
color={"gray.500"}
fontWeight={"500"}
>
Sponsor Name
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{IODetails?.sponsor?.sponsorName
? IODetails?.sponsor?.sponsorName
: "---"}
</Text>
<Box gap={2}>
<Text
as={"span"}
fontSize={"xs"}
color={"gray.500"}
fontWeight={"500"}
me={2}
>
Sponsor Name :-
</Text>
<Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
{IODetails?.sponsor?.sponsorName
? IODetails?.sponsor?.sponsorName
: "---"}
</Text>
</Box>
</Box>
</HStack>
<Box gap={8} me={12} w={"200px"}>
<HStack gap={8} me={20}>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
<Text
as={"span"}
fontSize={"xs"}
color={"gray.500"}
fontWeight={"500"}
>
Goal Amount :-
</Text>
<Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
{/* {IODetails?.ioNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioNAV)) : "00.00"} */}
{parseFloat(IODetails?.goalAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</Text>
</Box>
<Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
<Text
as={"span"}
fontSize={"xs"}
color={"gray.500"}
fontWeight={"500"}
>
Amount Invested :-
</Text>
<Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
{/* {IODetails?.ioCash ? formatCurrency(removeTrailingZeros(IODetails?.ioCash)) : "00.00"} */}
{parseFloat(IODetails?.totalAmtInvestmentInUSD || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</Text>
</Box>
<Box display={"flex"} justifyContent={"space-between"} gap={2}>
<Text
as={"span"}
fontSize={"xs"}
color={"gray.500"}
fontWeight={"500"}
>
Balance :-
</Text>
<Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
{/* {IODetails?.ioMVNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioMVNAV)) : "00.00"} */}
{parseFloat(balanceAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</Text>
</Box>
</Box>
<Box gap={8} me={12} w={"140px"}>
<Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
<Text
as={"span"}
textAlign={"center"}
@@ -267,14 +331,12 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
color={"gray.500"}
fontWeight={"500"}
>
IO Status
IO Status :-
</Text>
<Badge
rounded={"full"}
pt={0}
pb={0.5}
ps={4}
pe={4}
textTransform={"none"}
// variant={"solid"}
colorScheme={
@@ -299,16 +361,16 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
</Badge>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
<Text
as={"span"}
fontSize={"xs"}
color={"gray.500"}
fontWeight={"500"}
>
IO MV
IO MV :-
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
<Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
{/* {IODetails?.ioNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioNAV)) : "00.00"} */}
{parseFloat(IODetails?.ioNAV || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
@@ -317,16 +379,16 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
</Text>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
<Text
as={"span"}
fontSize={"xs"}
color={"gray.500"}
fontWeight={"500"}
>
IO cash
IO cash :-
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
<Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
{/* {IODetails?.ioCash ? formatCurrency(removeTrailingZeros(IODetails?.ioCash)) : "00.00"} */}
{parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
@@ -335,16 +397,16 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
</Text>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Box display={"flex"} justifyContent={"space-between"} gap={2}>
<Text
as={"span"}
fontSize={"xs"}
color={"gray.500"}
fontWeight={"500"}
>
IO NAV
IO NAV :-
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
<Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
{/* {IODetails?.ioMVNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioMVNAV)) : "00.00"} */}
{parseFloat(IODetails?.ioMVNAV || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
@@ -352,7 +414,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
})}
</Text>
</Box>
</HStack>
</Box>
<Box
position={"absolute"}

19
src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
View File

@@ -121,7 +121,7 @@ console.log(transaction);
</Box>
),
"Transaction": (
<Box w={"100px"} isTruncated={true}>
<Box w={"80px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.investorTransaction?.transactionName}
</Text>
@@ -135,7 +135,7 @@ console.log(transaction);
</Box>
),
"Amount in investors currency": (
<Box w={"120px"} isTruncated={true} display={"flex"} justifyContent={"end"}>
<Box w={"100px"} isTruncated={true} display={"flex"} justifyContent={"end"}>
<Text as={"span"} color={"teal.900"}>
{/* {item.investorAmount} */}
{parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
@@ -147,14 +147,14 @@ console.log(transaction);
</Box>
),
"From USD": (
<Box w={"80px"} isTruncated={true}>
<Box w={"100px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.USDToInvCur_Rate}
</Text>
</Box>
),
"TO USD": (
<Box w={"80px"} isTruncated={true}>
<Box w={"100px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.invCurToUSD_Rate}
</Text>
@@ -168,7 +168,8 @@ console.log(transaction);
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
<Badge ms={1} colorScheme="green">$</Badge>
{/* <Badge ms={1} colorScheme="green">$</Badge> */}
<Badge ms={1} colorScheme="green">USD</Badge>
</Text>
</Box>
),
@@ -246,7 +247,7 @@ console.log(transaction);
<Th
textAlign={"center"}
p={3}
width="80px"
width="100px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
@@ -257,7 +258,7 @@ console.log(transaction);
<Th
textAlign={"center"}
p={3}
width="80px"
width="100px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
@@ -268,7 +269,7 @@ console.log(transaction);
<Th
textAlign={"center"}
p={3}
width="80px"
width="100px"
color={"#004118"}
whiteSpace="normal"
wordBreak="normal"
@@ -276,7 +277,7 @@ console.log(transaction);
>
<Box display={"flex"} justifyContent={"end"}>
{parseFloat(InvestorWallet?.WalletBalance_InUSD).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
<Badge ms={1} colorScheme="green">{InvestorWallet?.currencyCode_InCur}</Badge>
<Badge ms={1} colorScheme="green">USD</Badge>
</Box>
</Th>
<Th

2
src/Pages/WithDrawal/DrawalView/ViewHistory.jsx
View File

@@ -188,7 +188,7 @@ const ViewHistory = () => {
"Withdrawal Amount": (
<Box isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
${parseFloat(item?.USDAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
<Badge ms={1} colorScheme="green" me={1}>$</Badge>{parseFloat(item?.USDAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</Text>
</Box>
),