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

Merge branch 'dev' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into dev

Browse Source
This commit is contained in:
YasinShaikh123
2024-07-10 12:03:09 +05:30
parent ede08c12a6 9079bff861
commit 1d3b8d82ed
26 changed files with 866 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/DataTable/DataTable.jsx
View File

@@ -118,7 +118,7 @@ const DataTable = ({
}}
className="web-text-small"
>
<Skeleton fadeDuration={index / 12} isLoaded={!isLoading}>
<Skeleton display={'flex'} alignItems={'center'} justifyContent={tableHeadRow.length - 1 === i || centered ? "center" : "start"} h={5} fadeDuration={index / 12} isLoaded={!isLoading}>
{item[heading]}
</Skeleton>
</Td>

4
src/Components/EmptySearchList.jsx
View File

@@ -1,6 +1,6 @@
import { Box, Image, Text } from "@chakra-ui/react"
// import EmptySearchListImage from "../assets/empty_state_empty_folder.svg"
import EmptySearchListImage from "../assets/EmptySearchList.svg"
import EmptySearchListImage from "../assets/EmptySearchList.png"
const EmptySearchList = ({message}) => {
return (
@@ -11,7 +11,7 @@ const EmptySearchList = ({message}) => {
flexDirection={'column'}
w={"100%"} h={"80vh"}
>
<Image w={200} mb={8} h={200} src={EmptySearchListImage} alt='Dan Abramov' />
<Image w={200} mb={8} src={EmptySearchListImage} alt='empty list' />
<Text className=" fw-bold fs-5" >{message}</Text>
<Text as={'p'} className="web-text-medium">Posts of tanami will appear here.</Text>

19
src/Components/FormField.jsx
View File

@@ -47,12 +47,12 @@ const FormField = ({
w={width ? width : "49%"}
isInvalid={errors[name]}
isRequired={isRequired}
className="mb-3"
mb={2}
>
<FormLabel
textAlign={arabic ? "right" : "left"}
fontSize={"sm"}
fontWeight={"400"}
fontSize={"xs"}
color={"gray.600"}
>
{label}
</FormLabel>
@@ -70,10 +70,11 @@ const FormField = ({
{...field}
{...props}
cursor={"pointer"}
fontSize={'sm'}
placeholder={placeHolder ? placeHolder : label}
textAlign={arabic ? "right" : "left"}
_placeholder={{ fontSize: "xs" }}
borderRadius={"4px"}
_placeholder={{ fontSize: "sm" }}
rounded={'sm'}
>
{options.map((option, index) => (
<option key={index} value={option.value}>
@@ -91,8 +92,8 @@ const FormField = ({
{...props}
placeholder={placeHolder ? placeHolder : label}
textAlign={arabic ? "right" : "left"}
_placeholder={{ fontSize: "xs" }}
borderRadius={"4px"}
_placeholder={{ fontSize: "sm" }}
rounded={'sm'}
resize={"none"}
/>
);
@@ -359,9 +360,9 @@ const FormField = ({
{...field}
{...props}
placeholder={placeHolder ? placeHolder : label}
borderRadius={"4px"}
rounded={'sm'}
textAlign={arabic || type === "number" ? "right" : "left"}
_placeholder={{ fontSize: "xs" }}
_placeholder={{ fontSize: "sm" }}
min={type === "date" ? today : undefined}
/>
);

13
src/Components/FormInputMain.jsx
View File

@@ -17,15 +17,15 @@ const FormInputMain = ({
w,
}) => {
return (
<form onSubmit={onSubmit}>
<Box mt={0} as="form" onSubmit={onSubmit}>
{Object.entries(groupedFields).map(([section, fields], index) => (
<Box key={section} mt={4}>
<Heading as="h6" size="xs" mx={5} fontWeight={"500"}>
<Box key={section} mt={2}>
<Heading as="h6" size="xs" mx={5} my={0} fontWeight={"500"}>
{/* <ArrowBackIcon fontSize={'lg'} /> */}
{section}
</Heading>
<Box display={"flex"} gap={0}>
<Box
as="span"
width={"100%"}
p={p ? p : 5}
display={"flex"}
@@ -78,14 +78,13 @@ const FormInputMain = ({
)
)}
</Box>
</Box>
{index < Object.entries(groupedFields).length - 1 && <Divider />}
</Box>
))}
{children}
<Box display={"flex"} justifyContent={"end"} mb={5}>
<Box display={"flex"} justifyContent={"end"} mt={2} >
<Box display={"flex"} justifyContent={"end"} p={2} w={"49%"} gap={4}>
{onCancle && (
<Button
@@ -110,7 +109,7 @@ const FormInputMain = ({
</Button>
</Box>
</Box>
</form>
</Box>
);
};

68
src/Contexts/GlobalStateProvider.jsx
View File

@@ -20,6 +20,26 @@ const getRandomDate = (start, end) => {
const startDate = new Date(2020, 0, 1); // January 1, 2020
const endDate = new Date(); // Current date
export const generateUniqueId = () => {
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const digits = '0123456789';
let id = '';
// Generate three random uppercase letters
for (let i = 0; i < 3; i++) {
id += letters[Math.floor(Math.random() * letters.length)];
}
// Generate seven random digits
for (let i = 0; i < 7; i++) {
id += digits[Math.floor(Math.random() * digits.length)];
}
return id;
}
const GlobalStateProvider = ({ children }) => {
const [isAuthenticate, setIsAuthenticate] = useState(false);
const [memberIfo, setMemberInfo] = useState();
@@ -470,6 +490,29 @@ const GlobalStateProvider = ({ children }) => {
updateOn: "28-Jun-24",
},
]);
const [navDetails, setNavDetails] = useState([
{
id: 1,
date: "02-Jan-24",
IONavValue: 1229750,
comments: "MV Increased by 10%",
updateBy: "Faisal",
updateOn: "02-Jan-24",
},
{
id: 2,
date: "02-Jan-24",
IONavValue: 1229750,
comments: "MV Increased by 10%",
updateBy: "Faisal",
updateOn: "13-Feb-24",
},
]);
const [create, setCreate] = useState([
{
id: 1,
@@ -480,7 +523,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 2,
Type: <AiOutlineFileGif />,
Type: <AiOutlineFileGif fontSize={25} />,
fileName: "Investment Private",
document: "Investment.pdf",
status: true,
@@ -1461,7 +1504,7 @@ const GlobalStateProvider = ({ children }) => {
const [ IODetails, setIODetails ] = useState([
{
id:uuidv4(),
id:generateUniqueId(),
closingDate: "Fri Jul 26 2024 00:00:00 GMT+0530 (India Standard Time)",
discription: "Animi molestias cup",
discriptionArabic: "Ut aliquam corporis",
@@ -1470,14 +1513,14 @@ const GlobalStateProvider = ({ children }) => {
holdingPeriod: 47,
ioName: "Harlan Head",
ioNameArabic: "Ulric Torres",
ioStatus: "open",
ioStatus: "Open",
maxInvestment: 80,
minInvestment: 77,
sponserName: "Ella Fitzgerald",
typeName: "Commercial"
},
{
id:uuidv4(),
id:generateUniqueId(),
closingDate: "Wed Sep 18 2024 00:00:00 GMT+0530 (India Standard Time)",
discription: "Voluptas necessitatibus",
discriptionArabic: "Nemo enim ipsam",
@@ -1486,14 +1529,14 @@ const GlobalStateProvider = ({ children }) => {
holdingPeriod: 30,
ioName: "John Doe",
ioNameArabic: "Ali Ahmed",
ioStatus: "closed",
ioStatus: "Closed",
maxInvestment: 95,
minInvestment: 60,
sponserName: "Louis Armstrong",
typeName: "Residential"
},
{
id:uuidv4(),
id:generateUniqueId(),
closingDate: "Mon Oct 21 2024 00:00:00 GMT+0530 (India Standard Time)",
discription: "Tempora incidunt",
discriptionArabic: "Eius modi tempora",
@@ -1502,14 +1545,14 @@ const GlobalStateProvider = ({ children }) => {
holdingPeriod: 60,
ioName: "Jane Smith",
ioNameArabic: "Fatima Al-Hassan",
ioStatus: "open",
ioStatus: "Pending",
maxInvestment: 100,
minInvestment: 85,
sponserName: "Duke Ellington",
typeName: "Industrial"
},
{
id:uuidv4(),
id:generateUniqueId(),
closingDate: "Fri Nov 15 2024 00:00:00 GMT+0530 (India Standard Time)",
discription: "Dolor sit amet",
discriptionArabic: "Consectetur adipiscing elit",
@@ -1518,14 +1561,14 @@ const GlobalStateProvider = ({ children }) => {
holdingPeriod: 90,
ioName: "Alice Johnson",
ioNameArabic: "Layla Khalid",
ioStatus: "open",
ioStatus: "Open",
maxInvestment: 70,
minInvestment: 50,
sponserName: "Billie Holiday",
typeName: "Commercial"
},
{
id:uuidv4(),
id:generateUniqueId(),
closingDate: "Tue Dec 10 2024 00:00:00 GMT+0530 (India Standard Time)",
discription: "Consectetur adipisci",
discriptionArabic: "Elit sed do eiusmod",
@@ -1534,7 +1577,7 @@ const GlobalStateProvider = ({ children }) => {
holdingPeriod: 45,
ioName: "Robert Brown",
ioNameArabic: "Omar Hussain",
ioStatus: "closed",
ioStatus: "Closed",
maxInvestment: 90,
minInvestment: 70,
sponserName: "Miles Davis",
@@ -1588,7 +1631,8 @@ const GlobalStateProvider = ({ children }) => {
setIOArtifacts,
investors,
setInvestors,IODetails, setIODetails,
navDetails,
setNavDetails,
caseDetails,
setCaseDetails,
}}

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

@@ -116,17 +116,17 @@ const CreateIO = () => {
{
label: "Investors",
Content: Investors,
isDisabled: id ? false : true ,
isDisabled: id ? false : false ,
},
{
label: "IO Cash Details",
Content: IOCashDetails,
isDisabled: id ? false : true ,
isDisabled: id ? false : false ,
},
{
label: "IO NAV Details",
Content: IONAVDetails,
isDisabled: id ? false : true ,
isDisabled: id ? false : false ,
},
];
@@ -143,8 +143,8 @@ const CreateIO = () => {
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={10}>
<Box paddingInline={"12px"} mt={2}>
<Box {...OPACITY_ON_LOAD} w={"100%"} overflowY={"scroll"} overflowX={'hidden'} height={"100vh"} pb={10}>
<Box paddingInline={"12px"} mt={2} >
{/* <span
onClick={() => navigate(-1)}
style={{ fontSize: "15px", cursor: "pointer" }}

18
src/Pages/IO_Management/CreateIO/IODetails.jsx
View File

@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
import * as yup from "yup";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
import { generateUniqueId } from "../../../Contexts/GlobalStateProvider";
const schema = yup.object().shape({
ioName: yup
@@ -109,7 +110,7 @@ const IODetails = ({ enableNextTab, index, isLoading, setIsLoading }) => {
const id = params?.id;
const navigate = useNavigate();
const { investmentType, sponser, IODetails } = useContext(GlobalStateContext);
const { investmentType, sponser, IODetails, setIODetails } = useContext(GlobalStateContext);
const [foundObject, setFoundObject] = useState(null);
const investmentTypeOptions = investmentType.map(({ investmentName }) => {
@@ -145,6 +146,7 @@ const IODetails = ({ enableNextTab, index, isLoading, setIsLoading }) => {
const {
control,
reset,
setValue,
handleSubmit,
formState: { errors },
} = useForm({
@@ -509,11 +511,21 @@ const IODetails = ({ enableNextTab, index, isLoading, setIsLoading }) => {
}, {});
const onSubmit = (data) => {
if(params?.id){
return enableNextTab(index);
}
const id = generateUniqueId();
setValue("id", id)
const updatedData = { ...data, id };
console.log(data);
enableNextTab(index);
// Add the updated data to the IODetails array
setIODetails([...IODetails, updatedData]);
// Navigate to the new route
navigate(`/create-io/${updatedData?.id}`);
};
console.log(id);
if (isLoading) return <FullscreenLoaders/>;
return (

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

@@ -1,8 +1,178 @@
import React from 'react'
import React, { useContext, useEffect, useState } from 'react'
import GlobalStateContext from '../../../Contexts/GlobalStateContext';
import { Box, HStack, Input,Text, Table, Tbody, Th, Tr } from '@chakra-ui/react';
import { OPACITY_ON_LOAD } from '../../../Layout/animations';
import Pagination from '../../../Components/Pagination';
import DataTable from '../../../Components/DataTable/DataTable';
import CustomAlertDialog from '../../../Components/CustomAlertDialog';
const IONAVDetails = () => {
return (
<div>IONAVDetails</div>
const { navDetails, setNavDetails, slideFromRight } =
useContext(GlobalStateContext);
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("");
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
setIsLoading(false);
}, 1500);
// Cleanup the timer on component unmount
return () => clearTimeout(timer);
}, []);
// Table setup
const tableHeadRow = [
"Sr.No",
"As On Date",
"IO NAV Value",
"Comments",
"Update by ",
"Update On",
];
console.log(navDetails);
// Table filter
const filteredData = navDetails?.filter((item) => {
const name = item.updateBy;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
return nameMatches;
});
const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({
id: item?.id,
"Sr.No": index +1,
"As On Date": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.date}
</Text>
),
"IO NAV Value": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{`$${item.IONavValue}`}
</Text>
),
"Comments": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.comments}
</Text>
),
"Update by ": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.updateBy}
</Text>
),
"Update On": (
<Text
justifyContent={slideFromRight ? "right" : "center"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.updateOn}
</Text>
),
})));
console.log(extractedArray);
const handleDelete = () => {
const updatedNav = navDetails.filter(
(sponsor) => sponsor.id !== actionId
);
setTimeout(() => {
setNavDetails(updatedNav);
setDeleteAlert(false);
setIsLoading(false);
}, 100);
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)}
/>
<HStack display={"flex"} alignItems={"center"}>
<Pagination totalItems={10} />
</HStack>
</HStack>
</Box>
<DataTable
centered={true}
emptyMessage={`We don't have any Sponers`}
tableHeadRow={tableHeadRow}
data={extractedArray}
setData={setExtractedArray}
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}
/>
</Box>
)
}

13
src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
View File

@@ -52,8 +52,6 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
const navigate = useNavigate();
const toast = useToast();
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
@@ -94,12 +92,12 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
};
const handleView = (id) => {
setActionId(id)
setActionId(id);
onViewOpen();
};
const handleEdit = (id) => {
setActionId(id)
setActionId(id);
onEditOpen();
};
@@ -146,7 +144,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
</Text>
),
Action: (
<Box display="flex" justifyContent="space-evenly">
<Box display="flex" justifyContent="center" gap={2}>
<Tooltip
rounded="sm"
fontSize="xs"
@@ -256,12 +254,13 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
firstField={firstField}
/>
<InvestmentView
id={actionId}
id={actionId}
isOpen={isViewOpen}
onClose={onViewClose}
secondField={secondField}
/>
<InvestmentEdit
id={actionId}
isOpen={isEditOpen}
onClose={onEditClose}
thirdField={thirdField}
@@ -271,7 +270,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
emptyMessage="We don't have any Sponsors"
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
isLoading={false}
viewActionId={actionId}
setViewActionId={setActionId}
setMouseEnteredId={setMouseEnteredId}

55
src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
View File

@@ -12,18 +12,21 @@ import {
Box,
Text,
} from "@chakra-ui/react";
import React, { useContext, useEffect } from "react";
import { investmentDocSchema } from "../InvestmentDocuments";
import React, { useContext, useEffect, useState } from "react";
import { bytesToMB, getFileIcon, investmentDocSchema } from "../InvestmentDocuments";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
const InvestmentEdit = ({ isOpen, onClose, thirdField, id }) => {
const { create, setCreate } = useContext(GlobalStateContext);
const filteredObject = create?.find((item) => item?.id === id);
const [file, setFile] = useState(null);
const filteredObject = create?.find((item) => item?.id === id)
console.log(filteredObject?.Type);
const {
control,
watch,
setValue,
handleSubmit,
reset,
register,
@@ -31,20 +34,37 @@ import {
} = useForm({
resolver: yupResolver(investmentDocSchema),
});
console.log(filteredObject);
useEffect(() => {
if (filteredObject) {
reset(filteredObject);
reset({
fileName:filteredObject?.fileName,
document: filteredObject?.document,
Type: filteredObject?.Type
});
}
}, [id, create, reset]);
const onSubmit = (data) => {
// setValue('Type',data.Type[0]?.type)
console.log(data);
const updatedCreate = create.map((item) =>
item.id === id ? { ...item, ...data } : item
);
setCreate(updatedCreate);
onClose();
};
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
return (
<Drawer isOpen={isOpen} placement="right" onClose={onClose} initialFocusRef={thirdField}>
@@ -84,17 +104,32 @@ import {
<FormControl mb={4} isInvalid={errors.Type}>
<FormLabel fontSize="sm">Type</FormLabel>
<Input
fontSize="sm"
type="text"
size="sm"
name="Type"
{...register("Type")}
fontSize="sm"
className="form-control"
type="file"
size="sm"
onChange={handleFileChange}
/>
{errors.Type && (
{errors.type && (
<Text color="red.500" fontSize="sm">
{errors.Type.message}
{errors.type.message}
</Text>
)}
</FormControl>
{file === null ?
<Text>{filteredObject?.Type}</Text>: (
<Box mt={4}>
<Box display="flex" mb={2}>
<Text>{getFileIcon(file.type)}</Text>
<Text fontSize="sm" ml={2} mb={0 }>
{file.name}
</Text>
</Box>
<Text fontSize="sm">{bytesToMB(file.size)}</Text>
</Box>
)}
</DrawerBody>
<DrawerFooter>
<Button

36
src/Pages/IO_Management/InvestmentDocuments.jsx
View File

@@ -33,6 +33,22 @@ export const bytesToMB = (bytes) => {
return (bytes / bytesInMB).toFixed(2) + " MB";
};
export const getFileIcon = (type) => {
switch (type) {
case 'application/pdf':
return <GrDocumentPdf />;
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
case 'application/msword':
return <TbFileTypeDocx fontSize={'16px'} />;
case 'image/jpeg':
case 'image/png':
case 'image/gif':
return <AiOutlineFileGif fontSize={25} />;
default:
return <FaRegFileAlt />;
}
};
export const investmentDocSchema = yup.object().shape({
document: yup.mixed().required("Document is required"),
fileName: yup.string().required("File name is required"),
@@ -72,7 +88,7 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField, create, setCreat
};
setCreate((prevCreate) => [...prevCreate, newDocument]);
navigate(" ");
onClose()
};
const handleFileChange = (event) => {
@@ -80,21 +96,7 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField, create, setCreat
setFile(selectedFile);
};
const getFileIcon = (type) => {
switch (type) {
case 'application/pdf':
return <GrDocumentPdf />;
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
case 'application/msword':
return <TbFileTypeDocx fontSize={'16px'} />;
case 'image/jpeg':
case 'image/png':
case 'image/gif':
return <AiOutlineFileGif />;
default:
return <FaRegFileAlt />;
}
};
const getFileTitle = (type) => {
switch (type) {
@@ -136,7 +138,7 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField, create, setCreat
size="sm"
/>
{errors.fileName && (
<Text fontSize="sm" color="red">
<Text fontSize="xs" color="red">
{errors.fileName.message}
</Text>
)}

51
src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
View File

@@ -1,6 +1,8 @@
import {
Box,
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalBody,
@@ -18,32 +20,43 @@ const AmountInvested = ({ isOpen, onClose }) => {
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Amount Invested</ModalHeader>
<ModalHeader fontSize={'md'}>Amount Invested</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Date
</Text>
</FormLabel>
<Input
placeholder="Select Date"
size="md"
type="date"
size="sm"
rounded={'sm'}
fontSize={"sm"}
focusBorderColor="forestGreen.300"
type="date"
/>
</Box>
</FormControl>
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
<Text as={"label"}>Amount</Text>
<Input placeholder="Enter amount" fontSize={"sm"} />
</Box>
<FormControl mb={"15px"} >
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
<Input
size="sm"
rounded={'sm'}
textAlign={'end'}
focusBorderColor="forestGreen.300"
fontSize={"sm"} placeholder="$00.00" />
</FormControl>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Comments
</Text>
<Textarea placeholder="Write Comments" fontSize={"sm"} />
</Box>
</FormLabel>
<Textarea
size="sm"
rounded={'sm'}
focusBorderColor="forestGreen.300"
fontSize={"sm"} placeholder="Write Comments" />
</FormControl>
</ModalBody>
<ModalFooter>
<Button
@@ -53,10 +66,14 @@ const AmountInvested = ({ isOpen, onClose }) => {
_hover={{
bg: "hsl(139deg 98.99% 26.59%)",
}}
size={'sm'}
rounded={"sm"}
>
Save
</Button>
<Button mr={3} onClick={onClose}>
<Button
size={'sm'}
rounded={"sm"} mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>

51
src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
View File

@@ -1,6 +1,8 @@
import {
Box,
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalBody,
@@ -18,32 +20,43 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Distribution To investors</ModalHeader>
<ModalHeader fontSize={"md"}>Distribution To investors</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Date
</Text>
</FormLabel>
<Input
placeholder="Select Date"
size="md"
type="date"
size="sm"
rounded={'sm'}
focusBorderColor="forestGreen.300"
fontSize={"sm"}
type="date"
/>
</Box>
</FormControl>
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
<Text as={"label"}>Amount</Text>
<Input placeholder="Enter amount" fontSize={"sm"} />
</Box>
<FormControl mb={"15px"} >
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
<Input
size="sm"
rounded={'sm'}
focusBorderColor="forestGreen.300"
textAlign={'end'}
fontSize={"sm"} placeholder="$00.00" />
</FormControl>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Comments
</Text>
<Textarea placeholder="Write Comments" fontSize={"sm"} />
</Box>
</FormLabel>
<Textarea
size="sm"
rounded={'sm'}
focusBorderColor="forestGreen.300"
fontSize={"sm"} placeholder="Write Comments" />
</FormControl>
</ModalBody>
<ModalFooter>
<Button
@@ -53,10 +66,14 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
_hover={{
bg: "hsl(139deg 98.99% 26.59%)",
}}
size={'sm'}
rounded={"sm"}
>
Save
</Button>
<Button mr={3} onClick={onClose}>
<Button
size={'sm'}
rounded={"sm"} mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>

51
src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
View File

@@ -1,6 +1,8 @@
import {
Box,
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalBody,
@@ -18,32 +20,43 @@ const DistributionSponsor = ({ isOpen, onClose }) => {
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Distribution from Sponsors</ModalHeader>
<ModalHeader fontSize={'md'}>Distribution from Sponsors</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Date
</Text>
</FormLabel>
<Input
placeholder="Select Date"
size="md"
type="date"
size="sm"
rounded={'sm'}
fontSize={"sm"}
focusBorderColor="forestGreen.300"
type="date"
/>
</Box>
</FormControl>
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
<Text as={"label"}>Amount</Text>
<Input placeholder="Enter amount" fontSize={"sm"} />
</Box>
<FormControl mb={"15px"} >
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
<Input
size="sm"
rounded={'sm'}
textAlign={'end'}
focusBorderColor="forestGreen.300"
fontSize={"sm"} placeholder="$00.00" />
</FormControl>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Comments
</Text>
<Textarea placeholder="Write Comments" fontSize={"sm"} />
</Box>
</FormLabel>
<Textarea
size="sm"
rounded={'sm'}
focusBorderColor="forestGreen.300"
fontSize={"sm"} placeholder="Write Comments" />
</FormControl>
</ModalBody>
<ModalFooter>
<Button
@@ -53,10 +66,14 @@ const DistributionSponsor = ({ isOpen, onClose }) => {
_hover={{
bg: "hsl(139deg 98.99% 26.59%)",
}}
size={'sm'}
rounded={"sm"}
>
Save
</Button>
<Button mr={3} onClick={onClose}>
<Button
size={'sm'}
rounded={"sm"} mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>

51
src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
View File

@@ -1,6 +1,8 @@
import {
Box,
Button,
FormControl,
FormLabel,
Input,
InputGroup,
Modal,
@@ -19,32 +21,43 @@ const FeesExpenses = ({ isOpen, onClose }) => {
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Fees & Expenses</ModalHeader>
<ModalHeader fontSize={'md'}>Fees & Expenses</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Date
</Text>
</FormLabel>
<Input
placeholder="Select Date"
size="md"
type="date"
size="sm"
rounded={'sm'}
focusBorderColor="forestGreen.300"
fontSize={"sm"}
type="date"
/>
</Box>
</FormControl>
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
<Text as={"label"}>Amount</Text>
<Input placeholder="Enter amount" fontSize={"sm"} />
</Box>
<FormControl mb={"15px"} >
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
<Input
size="sm"
rounded={'sm'}
textAlign={'end'}
focusBorderColor="forestGreen.300"
fontSize={"sm"} placeholder="$00.00" />
</FormControl>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Comments
</Text>
<Textarea placeholder="Write Comments" fontSize={"sm"} />
</Box>
</FormLabel>
<Textarea
size="sm"
rounded={'sm'}
focusBorderColor="forestGreen.300"
fontSize={"sm"} placeholder="Write Comments" />
</FormControl>
</ModalBody>
<ModalFooter>
<Button
@@ -54,10 +67,14 @@ const FeesExpenses = ({ isOpen, onClose }) => {
_hover={{
bg: "hsl(139deg 98.99% 26.59%)",
}}
size={'sm'}
rounded={"sm"}
>
Save
</Button>
<Button mr={3} onClick={onClose}>
<Button
size={'sm'}
rounded={"sm"} mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>

51
src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
View File

@@ -1,6 +1,8 @@
import {
Box,
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalBody,
@@ -18,32 +20,43 @@ const UpdateIONav = ({ isOpen, onClose }) => {
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Update iO NAV</ModalHeader>
<ModalHeader fontSize={'md'}>Update iO NAV</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Date
</Text>
</FormLabel>
<Input
placeholder="Select Date"
size="md"
type="date"
size="sm"
rounded={'sm'}
fontSize={"sm"}
focusBorderColor="forestGreen.300"
type="date"
/>
</Box>
</FormControl>
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
<Text as={"label"}>Amount</Text>
<Input placeholder="Enter amount" fontSize={"sm"} />
</Box>
<FormControl mb={"15px"} >
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
<Input
size="sm"
rounded={'sm'}
textAlign={'end'}
focusBorderColor="forestGreen.300"
fontSize={"sm"} placeholder="$00.00" />
</FormControl>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Comments
</Text>
<Textarea placeholder="Write Comments" fontSize={"sm"} />
</Box>
</FormLabel>
<Textarea
size="sm"
rounded={'sm'}
focusBorderColor="forestGreen.300"
fontSize={"sm"} placeholder="Write Comments" />
</FormControl>
</ModalBody>
<ModalFooter>
<Button
@@ -53,10 +66,14 @@ const UpdateIONav = ({ isOpen, onClose }) => {
_hover={{
bg: "hsl(139deg 98.99% 26.59%)",
}}
size={'sm'}
rounded={"sm"}
>
Save
</Button>
<Button mr={3} onClick={onClose}>
<Button
size={'sm'}
rounded={"sm"} mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>

51
src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
View File

@@ -1,6 +1,8 @@
import {
Box,
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalBody,
@@ -18,32 +20,43 @@ const UpdateIOStatus = ({ isOpen, onClose }) => {
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Update IO Status</ModalHeader>
<ModalHeader fontSize={'md'}>Update IO Status</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Date
</Text>
</FormLabel>
<Input
placeholder="Select Date"
size="md"
type="date"
size="sm"
rounded={'sm'}
fontSize={"sm"}
type="date"
focusBorderColor="forestGreen.300"
/>
</Box>
</FormControl>
<Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
<Text as={"label"}>Amount</Text>
<Input placeholder="Enter amount" fontSize={"sm"} />
</Box>
<FormControl mb={"15px"} >
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
<Input
size="sm"
rounded={'sm'}
textAlign={'end'}
focusBorderColor="forestGreen.300"
fontSize={"sm"} placeholder="$00.00" />
</FormControl>
<Box mb={"15px"}>
<Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
<FormControl mb={"15px"}>
<FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
Comments
</Text>
<Textarea placeholder="Write Comments" fontSize={"sm"} />
</Box>
</FormLabel>
<Textarea
size="sm"
rounded={'sm'}
colorScheme={'green'}
fontSize={"sm"} placeholder="Write Comments" />
</FormControl>
</ModalBody>
<ModalFooter>
<Button
@@ -53,10 +66,14 @@ const UpdateIOStatus = ({ isOpen, onClose }) => {
_hover={{
bg: "hsl(139deg 98.99% 26.59%)",
}}
size={'sm'}
rounded={"sm"}
>
Save
</Button>
<Button mr={3} onClick={onClose}>
<Button
size={'sm'}
rounded={"sm"} mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>

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

@@ -63,10 +63,10 @@ const ViewIOTable = () => {
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Sr.no",
// "Sr.no",
"Deal ID",
"IO Name",
"Sponser Name",
"Investment Type",
"IO status",
"Action",
];
@@ -84,6 +84,7 @@ const ViewIOTable = () => {
// });
// }, 300);
console.log(IODetails);
// ====================================================[Table Filter]================================================================
const filteredData = IODetails.filter((item) => {
// Filter by name (case insensitive)
@@ -126,6 +127,13 @@ const ViewIOTable = () => {
{item.id}
</Text>
),
"IO Name": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.ioName}
</Text>
</Box>
),
"Sponser Name": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
@@ -133,27 +141,26 @@ const ViewIOTable = () => {
</Text>
</Box>
),
"Investment Type": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.typeName}
</Text>
</Box>
),
"IO status": (
<Box w={"auto"} isTruncated={true}>
<Badge
rounded={'md'}
pt={0.5}
pb={0.5}
ps={4}
pe={4}
textTransform={'none'}
color={
item.ioStatus === "open"
item.ioStatus === "Open"
? "#00B69B"
: item.ioStatus === "pending"
: item.ioStatus === "Pending"
? "#6226EF"
: "#EF3826"
}
colorScheme={
item.ioStatus === "open"
item.ioStatus === "Open"
? "green"
: item.ioStatus === "pending"
: item.ioStatus === "Pending"
? "purple"
: "red"
}
@@ -164,7 +171,7 @@ const ViewIOTable = () => {
),
Action: (
<Box display={"flex"} justifyContent={"space-evenly"}>
<Box display={"flex"} justifyContent={"center"} gap={2}>
<Tooltip
rounded={"sm"}
fontSize={"xs"}

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

@@ -29,16 +29,16 @@ import ViewIOnav from "./ViewIOnav";
import ViewDistribution from "./ViewDistribution";
import InvestmentDocument from "../CreateIO/InvestmentDocument";
import KeyMerits from "../CreateIO/KeyMerits";
import IOArtifacts from "../CreateIO/IOArtifacts";
import Investors from "../CreateIO/Investors"
import EditIO from "../EditIO/EditIO";
import IOArtifacts from "../CreateIO/IOArtifacts";
import IOCashDetails from "../CreateIO/IOCashDetails";
import IONAVDetails from "../CreateIO/IONAVDetails";
const ViewIOdata = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const navigate = useNavigate();
const params = useParams()
console.log(params?.id);
const [isEditing, setIsEditing] = useState(false);
@@ -48,8 +48,8 @@ const ViewIOdata = () => {
{ label: "Key merits", content: <KeyMerits /> },
{ label: "IO artifacts", content: <IOArtifacts /> },
{ label: "Investors", content: <Investors /> },
{ label: "IO Cash Details", content: <ViewIOcash /> },
{ label: "IO NAV Details", content: <ViewIOnav /> },
{ label: "IO Cash Details", content: <IOCashDetails /> },
{ label: "IO NAV Details", content: <IONAVDetails /> },
// { label: "Distribution", content: <ViewDistribution /> },
];
@@ -84,19 +84,6 @@ const ViewIOdata = () => {
</Box>
<Button onClick={()=> navigate(`/create-io/${params?.id}`)} ps={4} pe={4} colorScheme="green" rounded={"sm"} size={'xs'}>Edit</Button>
</TabList>
<Box p={3} width={"100%"} textAlign={"right"}>
<Button
bg={"hsla(139, 100%, 14%, 1)"}
color={"#fff"}
_hover={{
bg: "hsl(139deg 98.99% 26.59%)",
}}
onClick={onOpen}
>
Edit
</Button>
<EditIO isOpen={isOpen} onClose={onClose} />
</Box>
<TabPanels>
{tabs.map(({ content }, index) => (
<TabPanel key={index}>{content}</TabPanel>

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

@@ -19,22 +19,32 @@ import {
MenuItemOption,
MenuGroup,
MenuOptionGroup,
MenuDivider,Badge, Box
MenuDivider,
Badge,
Box,
} from "@chakra-ui/react";
import header from "../../../assets/IOheader.png";
import { HiDotsVertical } from "react-icons/hi";
import { Link } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import AmountInvested from "./HeaderModal/AmountInvested";
import FeesExpenses from "./HeaderModal/FeesExpenses";
import DistributionSponsor from "./HeaderModal/DistributionSponsor";
import DistributionInvestor from "./HeaderModal/DistributionInvestor";
import UpdateIONav from "./HeaderModal/UpdateIONav";
import UpdateIOStatus from "./HeaderModal/UpdateIOStatus";
import { useRef } from "react";
import { useContext, useRef } from "react";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
const ViewIOdataHeader = () => {
const params = useParams()
const id = params?.id;
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = useRef();
const { IODetails } = useContext(GlobalStateContext);
const foundObject = IODetails?.find(
(item) => item?.id.toString() === id?.toString()
);
const {
isOpen: isInvestmentOpen,
@@ -94,43 +104,109 @@ const ViewIOdataHeader = () => {
// bgGradient='linear(to-r, #caf5d8, #b3e5fc)'
// bgGradient='linear(to-r, #ffd54f, #caf5d8)'
// bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
boxShadow={'md'}
boxShadow={"md"}
paddingRight={"10px"}
borderRadius={"10px"}
position={"relative"}
>
<Box p={1}>
<Image h={82} src={header} />
</Box>
<Box display={"flex"} flexDirection={'column'} gap={2}>
<Text as={'span'} fontSize={"sm"} fontWeight={"500"}>KKR Private Equity Fund (K-Prime)</Text>
<Text as={'span'} fontSize={"sm"} fontWeight={"500"}>sponsor name: KKR</Text>
</Box>
<Box display={"flex"} flexDirection={'column'} gap={2}>
<Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO Status</Text>
<Badge variant='subtle' w={"auto"} color='green'>Open</Badge>
</Box>
<Box display={"flex"} flexDirection={'column'} gap={2}>
<Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO MV NAV</Text>
<Text as={'span'} fontSize={"sm"} fontWeight={"500"}>$1,092,500</Text>
</Box>
<Box display={"flex"} flexDirection={'column'} gap={2}>
<Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO cash</Text>
<Text as={'span'} fontSize={"sm"} fontWeight={"500"}>$48,000</Text>
</Box>
<Box display={"flex"} flexDirection={'column'} gap={2}>
<Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO NAV</Text>
<Text as={'span'} fontSize={"sm"} fontWeight={"500"}>$1,140,500</Text>
{/* <Box display={"flex"} flexDirection={"column"} gap={2}>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
IO name: <Text as={'span'} ms={2}>{foundObject?.ioName}</Text>
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
Sponsor name: <Text as={'span'} ms={2}>{foundObject?.sponserName}</Text>
</Text>
</Box> */}
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
IO Name
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{id ? foundObject?.ioName : "N/A"}
</Text>
</Box>
<Box display={"flex"} alignItems={"start"} height={"95px"}>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
Sponser Name
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{id ? foundObject?.sponserName : "N/A"}
</Text>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
IO Status
</Text>
<Badge
rounded={'md'}
pt={0.5}
pb={0.5}
ps={4}
pe={4}
textTransform={'none'}
color={
foundObject?.ioStatus === "Open"
? "#00B69B"
: foundObject?.ioStatus === "Pending"
? "#6226EF"
: "#EF3826"
}
colorScheme={
foundObject?.ioStatus === "Open"
? "green"
: foundObject?.ioStatus === "Pending"
? "purple"
: "red"
}
>
{id ? foundObject?.ioStatus : "N/A"}
</Badge>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
IO MV NAV
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{id? "$42012.00" : "N/A"}
</Text>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
IO cash
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{id ?"$48,000" : "N/A"}
</Text>
</Box>
<Box display={"flex"} flexDirection={"column"} gap={2}>
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
IO NAV
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
{id ? "$1,140,500" : "N/A"}
</Text>
</Box>
<Box
position={"absolute"}
right={3}
top={2}
display={"flex"}
alignItems={"start"}
height={"95px"}
>
<Menu>
<MenuButton
className="link p-1 rounded-1"
className="link p-1 rounded-1 "
bg={"#fff"}
_hover={{ backgroundColor: "#fff !important" }}
onClick={onOpen}
@@ -138,83 +214,25 @@ const ViewIOdataHeader = () => {
>
<HiDotsVertical className="rubix-text-dark fs-6" />
</MenuButton>
<MenuList>
<Box display={"grid"} alignContent={"left"} justifyItems={"start"}>
<MenuItem _hover={hover} _focus={{ bg: "transparent" }}>
<Button
onClick={onInvestmentOpen}
bg={bg}
_hover={hover}
style={style}
>
Amount Invested
</Button>
</MenuItem>
<Divider />
<MenuItem _hover={hover}>
<Button
onClick={onFeesOpen}
bg={bg}
_hover={hover}
style={style}
>
Fees & Expenses
</Button>
</MenuItem>
<Divider />
<MenuItem _hover={hover}>
<Button
onClick={onDistSponsorOpen}
bg={bg}
_hover={hover}
style={style}
>
Distribution from Sponsors
</Button>
</MenuItem>
<Divider />
<MenuItem _hover={hover}>
<Button
onClick={onDistInvestorOpen}
bg={bg}
_hover={hover}
style={style}
>
Distribution To Investors
</Button>
</MenuItem>
<Divider />
<MenuItem _hover={hover}>
<Button
onClick={onUpdateNavOpen}
bg={bg}
_hover={hover}
style={style}
>
Update IO NAV
</Button>
</MenuItem>
<Divider />
<MenuItem _hover={hover}>
<Button
onClick={onUpdateStatusOpen}
bg={bg}
_hover={hover}
style={style}
>
Update IO Status
</Button>
</MenuItem>
</Box>
<MenuList fontSize={"sm"}>
<MenuItem _hover={{
bg:"#fff"
}} as={'span'} fontWeight={600} className="border-bottom">
Tansaction
</MenuItem>
<MenuItem onClick={onInvestmentOpen} className="border-bottom">Amount Invested</MenuItem>
<MenuItem onClick={onFeesOpen} className="border-bottom">Fees & Expenses</MenuItem>
<MenuItem onClick={onDistSponsorOpen} className="border-bottom">
Distribution from Sponsors
</MenuItem>
<MenuItem onClick={onDistInvestorOpen}
className="border-bottom">
Distribution To investors
</MenuItem>
<MenuItem onClick={onUpdateNavOpen} className="border-bottom">Update iO NAV</MenuItem>
<MenuItem className="border-bottom">Exit</MenuItem>
<MenuItem className="border-bottom">Cancel</MenuItem>
<MenuItem onClick={onUpdateStatusOpen}>Update iO status</MenuItem>
</MenuList>
</Menu>

22
src/Pages/Master/ExchangeRate/EditExchangeRate.jsx
View File

@@ -12,6 +12,7 @@ import {
FormLabel,
Input,
Text,
Tooltip,
useDisclosure,
} from "@chakra-ui/react";
import React, { useContext, useRef, useState, useEffect } from "react";
@@ -20,6 +21,7 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import { FiEdit3 } from "react-icons/fi";
import { BiMessageSquareEdit } from "react-icons/bi";
import { TbEdit } from "react-icons/tb";
import { EditIcon, ViewIcon } from "@chakra-ui/icons";
// Convert date to YYYY-MM-DD format
const formatDateValue = (date) => {
@@ -79,18 +81,26 @@ const EditExchangeRate = ({ id, setIsLoading, updateHistory }) => {
};
return (
<>
<> <Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Edit"
bg="#fff"
color={"blue.500"}
placement="top"
>
<Button
leftIcon={<TbEdit />}
ref={btnRef}
onClick={onOpen}
// colorScheme="forestGreen"
color={"green.500"}
_hover={{ color: "blue.500" }}
// transition={"0.5s all"}
color="blue.400"
size={"xs"}
variant={"ghost"}
rounded={"sm"}
>
Edit
<EditIcon />
</Button>
</Tooltip>
<Drawer
isOpen={isOpen}
placement="right"

21
src/Pages/Master/ExchangeRate/ExchangeHistroy.jsx
View File

@@ -12,6 +12,7 @@ import {
FormLabel,
Input,
Text,
Tooltip,
useDisclosure,
} from "@chakra-ui/react";
import React, { useContext, useRef, useState, useEffect } from "react";
@@ -84,18 +85,26 @@ const ExchangeHistory = ({ id, setIsLoading, history }) => {
return (
<>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="History"
bg="#fff"
color={"purple.500"}
placement="top"
>
<Button
leftIcon={<MdHistory />}
ref={btnRef}
onClick={onOpen}
color={"green.500"}
_hover={{ color: "purple.500" }}
// transition={"0.5s all"}
color="purple.400"
rounded={"sm"}
size={"xs"}
variant={"ghost"}
rounded={"md"}
ms={"auto"}
>
History
<MdHistory />
</Button>
</Tooltip>
<Drawer
isOpen={isOpen}
placement="right"

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

@@ -14,6 +14,7 @@ import {
Switch,
Tag,
Text,
Tooltip,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
@@ -161,7 +162,7 @@ const ExchangeRate = () => {
// <Button colorScheme="green" size={"xs"} variant={"ghost"}>
// Edit
// </Button>
<>
<Box display={"flex"} justifyContent={"center"} gap={2}>
<EditExchangeRate
setIsLoading={setIsLoading}
id={item.id}
@@ -172,7 +173,7 @@ const ExchangeRate = () => {
id={item.id}
history={history}
/>
</>
</Box>
),
}));

4
src/Pages/Master/InvestmentType/InvestmentType.jsx
View File

@@ -103,7 +103,7 @@ const InvestmentType = () => {
});
const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({
id: item?.id,
// id: item?.id,
"Sr.no": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
@@ -184,7 +184,7 @@ const InvestmentType = () => {
// </span>
// ),
Action: (
<Box display={"flex"} justifyContent={"space-evenly"}>
<Box display={"flex"} justifyContent={"center"} gap={2} >
<Tooltip
rounded={"sm"}
fontSize={"xs"}

276
src/Pages/Master/Sponser/Sponsers.jsx
View File

@@ -92,154 +92,153 @@ const Sponser = () => {
return nameMatches;
});
const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item) => ({
id: item?.id,
"Sponser name": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.sponserName}
</Text>
),
Address: (
<Box w={350} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.sponserAddress}
</Text>
</Box>
),
"Mobile no": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.mobileNo}
</Text>
</Box>
),
Status: (
<Switch
size={"sm"}
colorScheme="green"
onChange={() => handleUpdateStatus(item.id)}
isChecked={item.status}
/>
),
// item?.status ? (
// <Badge bg={'transparent'} color={"#05c46b"}>
// Passed
// </Badge>
// ) : (
// <Badge bg={'transparent'} color={"#f53b57"}>
// Not passes
// </Badge>
// ),
"Created At": (
<Box className="d-flex justify-content-between align-items-center">
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
{formatDate(item.createdAt)}
</Text>
</Box>
),
Action: (
<Box display={"flex"} justifyContent={"space-between"}>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="View"
bg="#fff"
color={"green.500"}
placement="top"
const [extractedArray, setExtractedArray] = useState(
filteredData?.map((item) => ({
id: item?.id,
"Sponser name": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
<Button
_hover={{ color: "green.500" }}
// transition={"0.5s all"}
color="green.300"
{item.sponserName}
</Text>
),
Address: (
<Box w={200} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.sponserAddress}
</Text>
</Box>
),
"Mobile no": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.mobileNo}
</Text>
</Box>
),
Status: (
<Box minW={24} isTruncated={true}>
<Switch
size={"sm"}
colorScheme="green"
onChange={() => handleUpdateStatus(item.id)}
isChecked={item.status}
/>
</Box>
),
// item?.status ? (
// <Badge bg={'transparent'} color={"#05c46b"}>
// Passed
// </Badge>
// ) : (
// <Badge bg={'transparent'} color={"#f53b57"}>
// Not passes
// </Badge>
// ),
"Created At": (
<Box className="d-flex justify-content-between align-items-center">
<Text as={"span"} color={"gray.600"} fontWeight={"500"}>
{formatDate(item.createdAt)}
</Text>
</Box>
),
Action: (
<Box display={"flex"} justifyContent={"center"} gap={2}>
<Tooltip
rounded={"sm"}
size={"xs"}
fontSize={"xs"}
label="View"
bg="#fff"
color={"green.500"}
placement="top"
>
<ViewIcon />
</Button>
</Tooltip>
<Button
_hover={{ color: "green.500" }}
// transition={"0.5s all"}
color="green.300"
rounded={"sm"}
size={"xs"}
>
<ViewIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Edit"
bg="#fff"
color={"blue.500"}
placement="top"
>
<Button
_hover={{ color: "blue.500" }}
// transition={"0.5s all"}
color="blue.400"
<Tooltip
rounded={"sm"}
size={"xs"}
fontSize={"xs"}
label="Edit"
bg="#fff"
color={"blue.500"}
placement="top"
>
<EditIcon />
</Button>
</Tooltip>
<Button
_hover={{ color: "blue.500" }}
// transition={"0.5s all"}
color="blue.400"
rounded={"sm"}
size={"xs"}
>
<EditIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Delete"
bg="#fff"
color={"red.500"}
placement="top"
>
<Button
onClick={() => {
setActionId(item?.id);
setDeleteAlert(true);
}}
_hover={{ color: "red.500" }}
// transition={"0.5s all"}
color="red.300"
<Tooltip
rounded={"sm"}
size={"xs"}
fontSize={"xs"}
label="Delete"
bg="#fff"
color={"red.500"}
placement="top"
>
<DeleteIcon />
</Button>
</Tooltip>
</Box>
),
// "Created At":
// mouseEntered && mouseEnteredId === item?.id ? (
// // false ? (
// <Box w={38} as="span" display={"flex"} justifyContent={"start"} gap={3}>
// <Box as="span" p={1} className="link" rounded={'sm'} >
// <EditIcon fontSize={'md'} />
// </Box>
// <Box as="span" p={1} className="link" rounded={'sm'} >
// <ViewIcon fontSize={'md'} />
// </Box>
// <Box as="span" p={1} className="link" rounded={'sm'} >
// <DeleteIcon fontSize={'md'} />
// </Box>
// </Box>
// ) : (
// <Box
// as="span" display={"flex"} justifyContent={"start"}
// p={1}
// >
// <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
// {formatDate(item.createdAt)}
// </Text>
// </Box>
// ),
})))
<Button
onClick={() => {
setActionId(item?.id);
setDeleteAlert(true);
}}
_hover={{ color: "red.500" }}
// transition={"0.5s all"}
color="red.300"
rounded={"sm"}
size={"xs"}
>
<DeleteIcon />
</Button>
</Tooltip>
</Box>
),
// "Created At":
// mouseEntered && mouseEnteredId === item?.id ? (
// // false ? (
// <Box w={38} as="span" display={"flex"} justifyContent={"start"} gap={3}>
// <Box as="span" p={1} className="link" rounded={'sm'} >
// <EditIcon fontSize={'md'} />
// </Box>
// <Box as="span" p={1} className="link" rounded={'sm'} >
// <ViewIcon fontSize={'md'} />
// </Box>
// <Box as="span" p={1} className="link" rounded={'sm'} >
// <DeleteIcon fontSize={'md'} />
// </Box>
// </Box>
// ) : (
// <Box
// as="span" display={"flex"} justifyContent={"start"}
// p={1}
// >
// <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
// {formatDate(item.createdAt)}
// </Text>
// </Box>
// ),
}))
);
const handleDelete = () => {
const updatedSponsors = sponser.filter(
@@ -253,7 +252,6 @@ const Sponser = () => {
}, 100);
setIsLoading(true);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>

BIN
src/assets/EmptySearchList.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB