create io updated

This commit is contained in:
2024-07-08 20:42:55 +05:30
parent 5ceba1f8b9
commit 87f20b0466
11 changed files with 317 additions and 292 deletions

View File

@@ -20,6 +20,7 @@ import { TiWarning } from "react-icons/ti";
import { motion } from "framer-motion";
import { AddIcon, CloseIcon } from "@chakra-ui/icons";
const today = new Date().toISOString().split('T')[0]
const FormField = ({
label,
control,
@@ -359,8 +360,9 @@ const FormField = ({
{...props}
placeholder={placeHolder ? placeHolder : label}
borderRadius={"4px"}
textAlign={arabic ? "right" : "left"}
textAlign={arabic || type === "number" ? "right" : "left"}
_placeholder={{ fontSize: "xs" }}
min={type === "date" ? today : undefined}
/>
);
}

View File

@@ -20,10 +20,9 @@ const FormInputView = ({
<Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
{section}
</Heading>
<Box display={"flex"} gap={0}>
{/* <Box display={"flex"} gap={0}> */}
<Box
width={"100%"}
p={5}
display={"flex"}
flexWrap={"wrap"}
gap={4}
@@ -37,7 +36,7 @@ const FormInputView = ({
</Box>
))}
</Box>
</Box>
{/* </Box> */}
{index <
Object.entries(groupedFields, groupedFieldsTwo).length - 1 && (
<Divider />

View File

@@ -532,42 +532,8 @@ const GlobalStateProvider = ({ children }) => {
id: 1,
investmentName: "Commercial",
description: "Investment Private Company",
status: true,
},
{
id: 2,
investmentName: "Commercial",
description: "Investment Private",
status: true,
},
{
id: 3,
investmentName: "Commercial",
description: "Investment Private",
status: true,
},
{
id: 4,
investmentName: "Commercial",
description: "Investment Private",
status: true,
},
{
id: 5,
investmentName: "Commercial",
description: "Investment Private",
status: true,
},
{
id: 6,
investmentName: "Commercial",
description: "Investment Private",
status: true,
},
{
id: 7,
investmentName: "Commercial",
description: "Investment Private",
investmentNameArabic: "لعفكعلفكع كعلجلجعيجكجلدسجوي",
descriptionArabic: "لعفكعلفكع كعلجلجع",
status: true,
},
]);

View File

@@ -18,6 +18,7 @@ import Investors from "./Investors";
import IOCashDetails from "./IOCashDetails";
import IONAVDetails from "./IONAVDetails";
import InvestmentDocument from "./InvestmentDocument"; // Ensure this is the correct import
import ViewIOdataHeader from "../ViewIO/ViewIOdataHeader";
const schema = yup.object().shape({
ioName: yup.string().required("IO name english is required"),
@@ -31,10 +32,7 @@ const schema = yup.object().shape({
.string()
.required("Sponser name arabic is required"),
goalAmount: yup.string().required("Goal amount is required"),
holdingPeriod: yup.string().required("Sponser name is required"),
@@ -150,6 +148,15 @@ const CreateIO = () => {
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={10}>
<Box paddingInline={"12px"} mt={2}>
{/* <span
onClick={() => navigate(-1)}
style={{ fontSize: "15px", cursor: "pointer" }}
>
<ArrowBackIcon cursor={"pointer"} /> Back
</span> */}
<ViewIOdataHeader />
</Box>
<Tabs index={activeIndex} onChange={(index) => setActiveIndex(index)} mt={2}>
<TabList>
{tabs.map(({ label, isDisabled }, index) => (

View File

@@ -1,196 +1,298 @@
import React from "react";
import React, { useContext } from "react";
import FormInputMain from "../../../Components/FormInputMain";
import { useNavigate } from "react-router-dom";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
const schema = yup.object().shape({
ioName: yup
.string()
.required("IO name in English is required")
.min(3, "IO name in English must be at least 3 characters long")
.max(50, "IO name in English must be at most 50 characters long"),
ioNameArabic: yup
.string()
.required("IO name in Arabic is required")
.min(3, "IO name in Arabic must be at least 3 characters long")
.max(50, "IO name in Arabic must be at most 50 characters long"),
discription: yup
.string()
.required("Description in English is required")
.min(10, "Description in English must be at least 10 characters long")
.max(500, "Description in English must be at most 500 characters long"),
discriptionArabic: yup
.string()
.required("Description in Arabic is required")
.min(10, "Description in Arabic must be at least 10 characters long")
.max(500, "Description in Arabic must be at most 500 characters long"),
typeName: yup
.string()
.required("Investment type in English is required")
.min(3, "Investment type in English must be at least 3 characters long")
.max(50, "Investment type in English must be at most 50 characters long"),
// typeNameArabic: yup
// .string()
// .required("Investment type in Arabic is required")
// .min(3, "Investment type in Arabic must be at least 3 characters long")
// .max(50, "Investment type in Arabic must be at most 50 characters long"),
sponserName: yup
.string()
.required("Sponsor name is required")
.min(3, "Sponsor name must be at least 3 characters long")
.max(50, "Sponsor name must be at most 50 characters long"),
// sponserNameArabic: yup
// .string()
// .required("Sponsor name in Arabic is required")
// .min(3, "Sponsor name in Arabic must be at least 3 characters long")
// .max(50, "Sponsor name in Arabic must be at most 50 characters long"),
goalAmount: yup
.number()
.required("Goal amount is required")
.positive("Goal amount must be a positive number")
.min(1, "Goal amount must be at least 1"),
minInvestment: yup
.number()
.required("Minimum investment is required")
.positive("Minimum investment must be a positive number")
.min(1, "Minimum investment must be at least 1"),
maxInvestment: yup
.number()
.required("Maximum investment is required")
.positive("Maximum investment must be a positive number")
.min(1, "Maximum investment must be at least 1")
.moreThan(
yup.ref("minInvestment"),
"Maximum investment must be greater than minimum investment"
),
holdingPeriod: yup
.number()
.required("Holding period is required")
.positive("Holding period must be a positive number")
.min(1, "Holding period must be at least 1 month"),
expectedReturn: yup
.number()
.required("Expected return is required")
.positive("Expected return must be a positive number")
.min(0.01, "Expected return must be at least 0.01"),
closingDate: yup
.date()
.required("Closing date is required")
.min(new Date(), "Closing date cannot be in the past"),
ioStatus: yup
.string()
.required("Investment Object status is required")
.oneOf(
["open", "pending", "closed"],
"Investment Object status must be one of 'open', 'pending', or 'closed'"
),
});
const IODetails = ({ enableNextTab, index }) => {
const { investmentType, sponser } = useContext(GlobalStateContext);
const navigate = useNavigate();
const investmentTypeOptions = investmentType.map(({ investmentName }) => {
return {
label: investmentName,
value: investmentName,
};
});
const investmentTypeArabicOptions = investmentType.map(
({ investmentNameArabic }) => {
return {
label: investmentNameArabic,
value: investmentNameArabic,
};
}
);
const sponserNameOption = sponser.map(({ sponserName }) => {
return {
label: sponserName,
value: sponserName,
};
});
const sponserNameArabicOption = sponser.map(({ sponserNameArabic }) => {
return {
label: sponserNameArabic,
value: sponserNameArabic,
};
});
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
});
console.log(errors);
const IODetails = ({ enableNextTab, control, errors, index, handleSubmit }) => {
const navigate = useNavigate()
const formFields = [
{
label: "IO Name (English)",
placeHolder: " ",
label: "IO Name",
name: "ioName",
type: "text",
section: " ",
width: "49%",
},
{
label: "IO Name (Arabic)",
placeHolder: " ",
name: "ioNameArabic",
type: "text",
arabic: true,
section: " ",
width: "49%",
},
{
label: "Description (English)",
placeHolder: " ",
label: "Description",
name: "discription",
type: "textarea",
section: " ",
width: "49%",
},
{
label: "Description (Arabic)",
placeHolder: " ",
name: "discriptionArabic",
type: "textarea",
arabic: true,
section: " ",
width: "49%",
},
{
label: "Investment Type (English)",
placeHolder: " ",
label: "Investment Type",
placeHolder: "Select option",
name: "typeName",
type: "select",
section: " ",
width: "49%",
options: [
{
label: "option 1",
value: "option 1",
},
{
label: "option 2",
value: "option 2",
},
{
label: "option 3",
value: "option 3",
},
{
label: "option 4",
value: "option 4",
},
],
width: "32.3%",
options: investmentTypeOptions,
},
// {
// label: "Sponser Name (Arabic)",
// placeHolder: " ",
// name: "sponserNameArabic",
// type: "select",
// options: sponserNameArabicOption,
// arabic: true,
// section: " ",
// width: "49%",
// },
{
label: "Investment Type (Arabic)",
placeHolder: " ",
name: "typeNameArabic",
type: "select",
section: " ",
width: "49%",
options: [
{
label: "option 1",
value: "option 1",
},
{
label: "option 2",
value: "option 2",
},
{
label: "option 3",
value: "option 3",
},
{
label: "option 4",
value: "option 4",
},
],
},
{
label: "Sponser Name (English)",
placeHolder: " ",
label: "Sponser Name",
placeHolder: "Select option",
name: "sponserName",
type: "text",
type: "select",
options: sponserNameOption,
section: " ",
width: "49%",
width: "32.3%",
},
// {
// label: "Investment Type (Arabic)",
// placeHolder: " ",
// name: "typeNameArabic",
// type: "select",
// arabic: true,
// section: " ",
// width: "32.3%",
// options: investmentTypeArabicOptions,
// },
{
label: "Sponser Name (Arabic)",
placeHolder: " ",
name: "sponserNameArabic",
type: "text",
section: " ",
width: "49%",
},
{
label: "Goal Amount (English)",
placeHolder: " ",
label: "Goal Amount",
placeHolder: "$00.00",
name: "goalAmount",
type: "Number",
type: "number",
section: " ",
width: "49%",
width: "32.3%",
},
{
label: "Minimum Investment Amount (English)",
placeHolder: " ",
label: "Minimum Investment Amount",
placeHolder: "$00.00",
name: "minInvestment",
type: "number",
section: " ",
width: "32.3%",
},
{
label: "Maximum Investment Amount (English)",
placeHolder: " ",
label: "Maximum Investment Amount",
placeHolder: "$00.00",
name: "maxInvestment",
type: "number",
section: " ",
width: "32.3%",
},
{
label: "Holding Period (English)",
placeHolder: " ",
label: "Holding Period",
name: "holdingPeriod",
type: "number",
placeHolder: "1Y",
section: " ",
width: "32.3%",
},
{
label: "Expected Return Estimated (English)",
placeHolder: " ",
label: "Expected Return Estimated",
placeHolder: "$00.00",
name: "expectedReturn",
type: "number",
section: " ",
width: "32.3%",
},
{
label: "Closing Date (English)",
placeHolder: " ",
label: "Closing Date",
name: "closingDate",
type: "date",
section: " ",
width: "32.3%",
},
},
{
label: "IO status",
placeHolder: " ",
placeHolder: "Select option",
name: "ioStatus",
type: "select",
section: " ",
width: "32.3%",
options: [
{
label: "option 1",
value: "option 1",
label: "Open",
value: "open",
},
{
label: "option 2",
value: "option 2",
label: "Pending",
value: "pending",
},
{
label: "option 3",
value: "option 3",
},
{
label: "option 4",
value: "option 4",
label: "Closed",
value: "closed",
},
],
},
@@ -205,25 +307,22 @@ const IODetails = ({ enableNextTab, control, errors, index, handleSubmit }) => {
return groups;
}, {});
const onSubmit = (e) =>{
e.preventDefault();
enableNextTab(index)
}
const onSubmit = (data) => {
console.log(data);
enableNextTab(index);
};
return (
<FormInputMain
p={0.1}
w={'auto'}
w={250}
width={"23.8%"}
groupedFields={groupedFields}
control={control}
errors={errors}
// onSubmit={handleSubmit(onSubmit)}
onSubmit={onSubmit}
submitTitle={"Next"}
onSubmit={handleSubmit(onSubmit)}
// onSubmit={onSubmit}
submitTitle={"Submit"}
/>
);
};

View File

@@ -26,6 +26,10 @@ import ViewInvestors from "./ViewInvestors";
import ViewIOcash from "./ViewIOcash";
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";
const ViewIOdata = () => {
const [isEditing, setIsEditing] = useState(false);
@@ -33,24 +37,25 @@ const ViewIOdata = () => {
const tabs = [
{ label: "IO Details", content: <ViewIOdetails /> },
{ label: "Investment documents", content: <ViewIOdocs /> },
{ label: "Key merits", content: <ViewKeyMerits /> },
{ label: "IO artifacts", content: <ViewIOartifacts /> },
{ label: "Investors", content: <ViewInvestors /> },
{ label: "Investment documents", content: <InvestmentDocument /> },
{ 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: "Distribution", content: <ViewDistribution /> },
// { label: "Distribution", content: <ViewDistribution /> },
];
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<Box paddingInline={"12px"}>
<span
<Box paddingInline={"12px"} mt={2}>
{/* <span
onClick={() => navigate(-1)}
style={{ fontSize: "15px", cursor: "pointer" }}
>
<ArrowBackIcon cursor={"pointer"} /> Back
</span>
</span> */}
<ViewIOdataHeader />
</Box>

View File

@@ -1,4 +1,4 @@
import { Box, Image, Text } from "@chakra-ui/react";
import { Badge, Box, Image, Text } from "@chakra-ui/react";
import header from "../../../assets/IOheader.png";
const ViewIOdataHeader = () => {
@@ -6,33 +6,45 @@ const ViewIOdataHeader = () => {
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
justifyContent={"start"}
gap={14}
bg={"#caf5d8"}
paddingRight={"25px"}
borderRadius={"10px"}
rounded={"md"}
// bgGradient='linear(to-r, #caf5d8, #f5e8ca)'
// bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
// bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
// bgGradient='linear(to-r, #caf5d8, #b3e5fc)'
// bgGradient='linear(to-r, #ffd54f, #caf5d8)'
// bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
boxShadow={'md'}
>
<Box>
<Image src={header} />
<Box p={1}>
<Image h={82} src={header} />
</Box>
<Box fontSize={"sm"} fontWeight={"500"}>
<Text>KKR Private Equity Fund (K-Prime)</Text>
<Text>sponsor name: KKR</Text>
<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 fontSize={"sm"}>
<Text>IO Status</Text>
<Text fontWeight={"500"}>Open</Text>
<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 fontSize={"sm"}>
<Text>IO MV NAV</Text>
<Text fontWeight={"500"}>$1,092,500</Text>
<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 fontSize={"sm"}>
<Text>IO cash</Text>
<Text fontWeight={"500"}>$48,000</Text>
<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 fontSize={"sm"}>
<Text>IO NAV</Text>
<Text fontWeight={"500"}>$1,140,500</Text>
<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>
</Box>
);

View File

@@ -14,24 +14,9 @@ import FormInputMain from "../../../Components/FormInputMain";
export const addInvestmentType = yup.object().shape({
investmentName: yup.string().required("Investment name is required"),
// investmentNameArabic: yup.string().required("Investment name is required"),
// mobileNo: yup.string().required("Mobile no is required"),
description: yup.string().required("Description is required"),
// descriptionArabic: yup.string().required("Description address is required"),
// bankName: yup.string().required("Bank Name is required"),
// accountNumber: yup.string().required("Account Number is required"),
// swiftCode: yup.string().required("SWIFT/BIC Code is required"),
// bankEmail: yup.string().email("Invalid email format"),
// routingNumber: yup.string().required("Routing Number is required"),
// iban: yup.string().required("IBAN is required"),
// accountType: yup.string().required("Account Type is required"),
// bankPhoneNumber: yup.string().required("Bank Phone Number is required"),
// bankBranch: yup.string().required("Bank Branch is required"),
// branchAddress: yup.string().required("Branch Address is required"),
// ifscCode: yup.string().required("IFSC Code is required"),
// accountHolderName: yup.string().required("Account Holder's Name is required"),
investmentNameArabic: yup.string().required("Investment name is required"),
descriptionArabic: yup.string().required("Description is required"),
});
export function debounce(func, delay) {
@@ -202,6 +187,8 @@ const AddInvestmentType = () => {
...investmentType,
]);
navigate("/investment-type");
console.log(investmentType);
};
return (

View File

@@ -1,16 +1,20 @@
import { Box, Button, Divider, Heading } from "@chakra-ui/react";
import { useParams } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { v4 as uuidv4 } from "uuid";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import FormInputMain from "../../../Components/FormInputMain";
import { addInvestmentType } from "./AddInvestmentType";
import { ArrowBackIcon } from "@chakra-ui/icons";
import FormInputView from "../../../Components/FormInputView";
const EditInvestmentType = () => {
const navigate = useNavigate()
const params = useParams();
const { investmentType } = useContext(GlobalStateContext);
const { investmentType, setInvestmentType } = useContext(GlobalStateContext);
const [foundObject, setFoundObject] = useState(null);
const {
control,
@@ -35,13 +39,9 @@ const EditInvestmentType = () => {
if (found) {
reset({
investmentName: found.investmentName,
sponserNameArabic: found.sponserNameArabic,
mobileNo: found.mobileNo,
investmentAddress: found.investmentAddress,
bankName: found.bankName,
swiftCode: found.swiftCode,
accountNumber: found.accountNumber,
bankEmail: found.bankEmail,
investmentNameArabic: found.investmentNameArabic,
description: found.description,
descriptionArabic: found.descriptionArabic,
});
}
}, [params, investmentType, reset]);
@@ -54,9 +54,11 @@ const EditInvestmentType = () => {
return <Box>Loading...</Box>; // or any loading indicator
}
const formFields = [
{
label: "Investment name",
value: foundObject.investmentName,
name: "investmentName",
type: "text",
isRequired: true,
@@ -64,6 +66,7 @@ const EditInvestmentType = () => {
},
{
label: "Investment Name (Arabic)",
value: foundObject.investmentNameArabic,
name: "investmentNameArabic",
type: "text",
isRequired: true,
@@ -71,57 +74,25 @@ const EditInvestmentType = () => {
section: "Personal Details",
},
{
label: "Mobile no",
name: "mobileNo",
type: "number",
isRequired: true,
section: "Personal Details",
},
{
label: "Investment address",
name: "investmentAddress",
label: "Description",
value: foundObject.description,
name: "description",
type: "text",
isRequired: true,
section: "Personal Details",
},
{
label: "Bank name",
name: "bankName",
label: "Description Arabic",
value: foundObject.descriptionArabic,
name: "descriptionArabic",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Name",
name: "accountNumber",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "SWIFT/BIC Code",
name: "swiftCode",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
},
{
label: "Account Email",
name: "bankEmail",
type: "text",
isRequired: true,
section: "Bank Details",
arabic: true,
section: "Personal Details",
},
];
const groupedFields = formFields.reduce((groups, field) => {
const groupedFields = formFields?.reduce((groups, field) => {
const { section } = field;
if (!groups[section]) {
groups[section] = [];
@@ -134,8 +105,6 @@ const EditInvestmentType = () => {
setInvestmentType([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...investmentType,
@@ -144,8 +113,15 @@ const EditInvestmentType = () => {
}
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<FormInputMain
<span
onClick={() => navigate(-1)}
style={{ fontSize: "15px", cursor: "pointer" }}
>
<ArrowBackIcon cursor={"pointer"} /> Back
</span>
<FormInputMain
groupedFields={groupedFields}
control={control}
errors={errors}

View File

@@ -207,7 +207,7 @@ const InvestmentType = () => {
</Button>
</Tooltip>
{/* <Tooltip
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Edit"
@@ -227,7 +227,7 @@ const InvestmentType = () => {
>
<EditIcon />
</Button>
</Tooltip> */}
</Tooltip>
<Tooltip
rounded={"sm"}

View File

@@ -53,34 +53,6 @@ const ViewInvestmentType = () => {
isRequired: true,
section: "Personal Details",
},
// {
// label: "Bank name",
// value: foundObject.bankName,
// type: "text",
// isRequired: true,
// section: "Bank Details",
// },
// {
// label: "Account Name",
// value: foundObject.accountNumber,
// type: "text",
// isRequired: true,
// section: "Bank Details",
// },
// {
// label: "SWIFT/BIC Code",
// value: foundObject.swiftCode,
// type: "text",
// isRequired: true,
// section: "Bank Details",
// },
// {
// label: "Account Email",
// value: foundObject.bankEmail,
// type: "text",
// isRequired: true,
// section: "Bank Details",
// },
];
const groupedFields = formFields.reduce((groups, field) => {