create io updated
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
@@ -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"}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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"}
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user