From 87f20b046618ab3505a57873ea8b86b5ea919cba Mon Sep 17 00:00:00 2001 From: siddheshmorewdi Date: Mon, 8 Jul 2024 20:42:55 +0530 Subject: [PATCH 1/3] create io updated --- src/Components/FormField.jsx | 4 +- src/Components/FormInputView.jsx | 5 +- src/Contexts/GlobalStateProvider.jsx | 38 +- src/Pages/IO_Management/CreateIO/CreateIO.jsx | 15 +- .../IO_Management/CreateIO/IODetails.jsx | 337 +++++++++++------- src/Pages/IO_Management/ViewIO/ViewIOdata.jsx | 21 +- .../IO_Management/ViewIO/ViewIOdataHeader.jsx | 54 +-- .../InvestmentType/AddInvestmentType.jsx | 21 +- .../InvestmentType/EditInvestmentType.jsx | 82 ++--- .../Master/InvestmentType/InvestmentType.jsx | 4 +- .../InvestmentType/ViewInvestmentType.jsx | 28 -- 11 files changed, 317 insertions(+), 292 deletions(-) diff --git a/src/Components/FormField.jsx b/src/Components/FormField.jsx index 0e3d8f9..700271c 100644 --- a/src/Components/FormField.jsx +++ b/src/Components/FormField.jsx @@ -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} /> ); } diff --git a/src/Components/FormInputView.jsx b/src/Components/FormInputView.jsx index 8519064..e4b233a 100644 --- a/src/Components/FormInputView.jsx +++ b/src/Components/FormInputView.jsx @@ -20,10 +20,9 @@ const FormInputView = ({ {section} - + {/* */} ))} - + {/* */} {index < Object.entries(groupedFields, groupedFieldsTwo).length - 1 && ( diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index c260bf5..4bfae79 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -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, }, ]); diff --git a/src/Pages/IO_Management/CreateIO/CreateIO.jsx b/src/Pages/IO_Management/CreateIO/CreateIO.jsx index 421111a..853da31 100644 --- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx +++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx @@ -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 ( + + {/* navigate(-1)} + style={{ fontSize: "15px", cursor: "pointer" }} + > + Back + */} + + setActiveIndex(index)} mt={2}> {tabs.map(({ label, isDisabled }, index) => ( diff --git a/src/Pages/IO_Management/CreateIO/IODetails.jsx b/src/Pages/IO_Management/CreateIO/IODetails.jsx index 3f907bc..1975d0d 100644 --- a/src/Pages/IO_Management/CreateIO/IODetails.jsx +++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx @@ -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 ( ); }; diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx index a9fe68e..779cac6 100644 --- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx +++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx @@ -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: }, - { label: "Investment documents", content: }, - { label: "Key merits", content: }, - { label: "IO artifacts", content: }, - { label: "Investors", content: }, + { label: "Investment documents", content: }, + { label: "Key merits", content: }, + { label: "IO artifacts", content: }, + { label: "Investors", content: }, { label: "IO Cash Details", content: }, { label: "IO NAV Details", content: }, - { label: "Distribution", content: }, + // { label: "Distribution", content: }, ]; return ( - - + {/* navigate(-1)} style={{ fontSize: "15px", cursor: "pointer" }} > Back - + */} diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx index c476aaf..b2c00e4 100644 --- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx +++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx @@ -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 = () => { - - + + - - KKR Private Equity Fund (K-Prime) - sponsor name: KKR + + KKR Private Equity Fund (K-Prime) + sponsor name: KKR - - IO Status - Open + + IO Status + Open - - IO MV NAV - $1,092,500 + + IO MV NAV + $1,092,500 - - IO cash - $48,000 + + IO cash + $48,000 - - IO NAV - $1,140,500 + + IO NAV + $1,140,500 ); diff --git a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx index 17a4e2c..ebeff43 100644 --- a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx +++ b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx @@ -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 ( diff --git a/src/Pages/Master/InvestmentType/EditInvestmentType.jsx b/src/Pages/Master/InvestmentType/EditInvestmentType.jsx index 8caba41..15f7970 100644 --- a/src/Pages/Master/InvestmentType/EditInvestmentType.jsx +++ b/src/Pages/Master/InvestmentType/EditInvestmentType.jsx @@ -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 Loading...; // 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 ( + - navigate(-1)} + style={{ fontSize: "15px", cursor: "pointer" }} + > + Back + + { - {/* { > - */} + { 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) => { From d84e707e6c63b4f7f330a3da3d437b32525c9d7d Mon Sep 17 00:00:00 2001 From: siddheshmorewdi Date: Tue, 9 Jul 2024 14:49:05 +0530 Subject: [PATCH 2/3] updated --- src/Contexts/GlobalStateProvider.jsx | 85 ++++++- src/Pages/IO_Management/CreateIO/CreateIO.jsx | 62 ++--- .../IO_Management/CreateIO/IOArtifacts.jsx | 6 +- .../IO_Management/CreateIO/IODetails.jsx | 222 +++++++++++++++++- .../CreateIO/InvestmentDocument.jsx | 6 +- .../IO_Management/CreateIO/KeyMerits.jsx | 5 +- .../IO_Management/ViewIO/ViewIOTable.jsx | 68 ++++-- src/Pages/IO_Management/ViewIO/ViewIOdata.jsx | 14 +- .../IO_Management/ViewIO/ViewIOdetails.jsx | 45 ++-- src/Routes/Routes.js | 3 +- 10 files changed, 424 insertions(+), 92 deletions(-) diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 4bfae79..18ea9d2 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -1427,6 +1427,89 @@ const GlobalStateProvider = ({ children }) => { }, ]); + + const [ IODetails, setIODetails ] = useState([ + { + id:uuidv4(), + closingDate: "Fri Jul 26 2024 00:00:00 GMT+0530 (India Standard Time)", + discription: "Animi molestias cup", + discriptionArabic: "Ut aliquam corporis", + expectedReturn: 37, + goalAmount: 40, + holdingPeriod: 47, + ioName: "Harlan Head", + ioNameArabic: "Ulric Torres", + ioStatus: "open", + maxInvestment: 80, + minInvestment: 77, + sponserName: "Ella Fitzgerald", + typeName: "Commercial" + }, + { + id:uuidv4(), + closingDate: "Wed Sep 18 2024 00:00:00 GMT+0530 (India Standard Time)", + discription: "Voluptas necessitatibus", + discriptionArabic: "Nemo enim ipsam", + expectedReturn: 42, + goalAmount: 55, + holdingPeriod: 30, + ioName: "John Doe", + ioNameArabic: "Ali Ahmed", + ioStatus: "closed", + maxInvestment: 95, + minInvestment: 60, + sponserName: "Louis Armstrong", + typeName: "Residential" + }, + { + id:uuidv4(), + closingDate: "Mon Oct 21 2024 00:00:00 GMT+0530 (India Standard Time)", + discription: "Tempora incidunt", + discriptionArabic: "Eius modi tempora", + expectedReturn: 50, + goalAmount: 75, + holdingPeriod: 60, + ioName: "Jane Smith", + ioNameArabic: "Fatima Al-Hassan", + ioStatus: "open", + maxInvestment: 100, + minInvestment: 85, + sponserName: "Duke Ellington", + typeName: "Industrial" + }, + { + id:uuidv4(), + closingDate: "Fri Nov 15 2024 00:00:00 GMT+0530 (India Standard Time)", + discription: "Dolor sit amet", + discriptionArabic: "Consectetur adipiscing elit", + expectedReturn: 45, + goalAmount: 60, + holdingPeriod: 90, + ioName: "Alice Johnson", + ioNameArabic: "Layla Khalid", + ioStatus: "open", + maxInvestment: 70, + minInvestment: 50, + sponserName: "Billie Holiday", + typeName: "Commercial" + }, + { + id:uuidv4(), + closingDate: "Tue Dec 10 2024 00:00:00 GMT+0530 (India Standard Time)", + discription: "Consectetur adipisci", + discriptionArabic: "Elit sed do eiusmod", + expectedReturn: 48, + goalAmount: 65, + holdingPeriod: 45, + ioName: "Robert Brown", + ioNameArabic: "Omar Hussain", + ioStatus: "closed", + maxInvestment: 90, + minInvestment: 70, + sponserName: "Miles Davis", + typeName: "Residential" + } + ]) return ( { iOArtifacts, setIOArtifacts, investors, - setInvestors + setInvestors,IODetails, setIODetails }} > {children} diff --git a/src/Pages/IO_Management/CreateIO/CreateIO.jsx b/src/Pages/IO_Management/CreateIO/CreateIO.jsx index 853da31..01b876a 100644 --- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx +++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx @@ -1,13 +1,6 @@ import React, { useEffect, useState } from "react"; import { OPACITY_ON_LOAD } from "../../../Layout/animations"; -import { - Box, - Tabs, - TabList, - Tab, - TabPanel, - TabPanels, -} from "@chakra-ui/react"; +import { Box, Tabs, TabList, Tab, TabPanel, TabPanels } from "@chakra-ui/react"; import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup"; @@ -19,6 +12,8 @@ import IOCashDetails from "./IOCashDetails"; import IONAVDetails from "./IONAVDetails"; import InvestmentDocument from "./InvestmentDocument"; // Ensure this is the correct import import ViewIOdataHeader from "../ViewIO/ViewIOdataHeader"; +import { useParams } from "react-router-dom"; +import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders"; const schema = yup.object().shape({ ioName: yup.string().required("IO name english is required"), @@ -26,14 +21,12 @@ const schema = yup.object().shape({ discription: yup.string().required("Discription in english is required"), discriptionArabic: yup.string().required("Discription in Arabic is required"), typeName: yup.string().required("Investment type in english is required"), - typeNameArabic: yup.string().required("Investment type in arabic is required"), - sponserName: yup.string().required("Sponser name is required"), - sponserNameArabic: yup + typeNameArabic: yup .string() - .required("Sponser name arabic is required"), - goalAmount: yup.string().required("Goal amount is required"), - - + .required("Investment type in arabic is required"), + sponserName: yup.string().required("Sponser name is required"), + sponserNameArabic: yup.string().required("Sponser name arabic is required"), + goalAmount: yup.string().required("Goal amount is required"), holdingPeriod: yup.string().required("Sponser name is required"), ioStatus: yup.string().required("Investment Object name is required"), @@ -79,6 +72,7 @@ const schema = yup.object().shape({ }); const CreateIO = () => { + const id = useParams()?.id; const { control, handleSubmit, @@ -102,50 +96,52 @@ const CreateIO = () => { { label: "IO Details", Content: IODetails, - isDisabled: false, + isDisabled: id ? false : false , }, { label: "Investment documents", Content: InvestmentDocument, - isDisabled: true, + isDisabled: id ? false : true , }, { label: "Key merits", Content: KeyMerits, - isDisabled: true, + isDisabled: id ? false : true , }, { label: "IO artifacts", Content: IOArtifacts, - isDisabled: true, + isDisabled: id ? false : true , }, { label: "Investors", Content: Investors, - isDisabled: false, + isDisabled: id ? false : true , }, { label: "IO Cash Details", Content: IOCashDetails, - isDisabled: false, + isDisabled: id ? false : true , }, { label: "IO NAV Details", Content: IONAVDetails, - isDisabled: false, + isDisabled: id ? false : true , }, ]; const [tabs, setTabs] = useState(initialTabsState); const [activeIndex, setActiveIndex] = useState(0); - - + const [isLoading, setIsLoading] = useState(true); const onSubmit = (data) => { data.preventDefault(); enableNextTab(0); }; + + + return ( @@ -157,9 +153,13 @@ const CreateIO = () => { */} - setActiveIndex(index)} mt={2}> + setActiveIndex(index)} + mt={2} + > - {tabs.map(({ label, isDisabled }, index) => ( + {tabs?.map(({ label, isDisabled }, index) => ( { {tabs.map(({ Content }, index) => ( - + ))} diff --git a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx index 8c55def..cab8a19 100644 --- a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx +++ b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx @@ -129,7 +129,7 @@ const IOArtifacts = ({enableNextTab, index}) => { ), Action: ( - + { size={"sm"} fontSize={"xs"} rounded={"sm"} - colorScheme="green" + color={'green'} > - Add + Add artifacts { - const { investmentType, sponser } = useContext(GlobalStateContext); +const IODetails = ({ enableNextTab, index, isLoading, setIsLoading }) => { + const params = useParams(); + const id = params?.id; const navigate = useNavigate(); + const { investmentType, sponser, IODetails } = useContext(GlobalStateContext); + const [foundObject, setFoundObject] = useState(null); + const investmentTypeOptions = investmentType.map(({ investmentName }) => { return { label: investmentName, @@ -122,7 +127,7 @@ const IODetails = ({ enableNextTab, index }) => { }; } ); - + const sponserNameOption = sponser.map(({ sponserName }) => { return { label: sponserName, @@ -139,13 +144,40 @@ const IODetails = ({ enableNextTab, index }) => { const { control, + reset, handleSubmit, formState: { errors }, } = useForm({ resolver: yupResolver(schema), }); - console.log(errors); + useEffect(() => { + const found = IODetails?.find( + (item) => item?.id.toString() === id?.toString() + ); + setFoundObject(found); + + if (found) { + reset({ + ioName: found.ioName, + sponserName: found.sponserName, + ioNameArabic: found.ioNameArabic, + ioStatus: found.ioStatus, + discriptionArabic: found.discriptionArabic, + typeName: found.typeName, + discription: found.discription, + sponserName: found.sponserName, + goalAmount: found.goalAmount, + minInvestment: found.minInvestment, + maxInvestment: found.maxInvestment, + holdingPeriod: found.holdingPeriod, + expectedReturn: found.expectedReturn, + closingDate: found.closingDate, + ioStatus: found.ioStatus, + }); + } + setIsLoading(false) + }, [id, IODetails, reset]); const formFields = [ { @@ -226,7 +258,7 @@ const IODetails = ({ enableNextTab, index }) => { placeHolder: "$00.00", name: "goalAmount", type: "number", - + section: " ", width: "32.3%", }, @@ -298,6 +330,166 @@ const IODetails = ({ enableNextTab, index }) => { }, ]; + const formEditFields = [ + { + label: "IO Name", + value: foundObject?.ioName, + name: "ioName", + type: "text", + section: " ", + width: "49%", + }, + { + label: "IO Name (Arabic)", + name: "ioNameArabic", + type: "text", + value: foundObject?.sponserName, + + arabic: true, + section: " ", + width: "49%", + }, + { + label: "Description", + name: "discription", + value: foundObject?.ioStatus, + type: "textarea", + + section: " ", + width: "49%", + }, + { + label: "Description (Arabic)", + name: "discriptionArabic", + value: foundObject?.discriptionArabic, + type: "textarea", + arabic: true, + section: " ", + width: "49%", + }, + { + label: "Investment Type", + placeHolder: "Select option", + value: foundObject?.typeName, + name: "typeName", + type: "select", + + section: " ", + width: "32.3%", + options: investmentTypeOptions, + }, + // { + // label: "Sponser Name (Arabic)", + // placeHolder: " ", + // name: "sponserNameArabic", + // type: "select", + // options: sponserNameArabicOption, + // arabic: true, + + // section: " ", + // width: "49%", + // }, + { + label: "Sponser Name", + placeHolder: "Select option", + name: "sponserName", + type: "select", + options: sponserNameOption, + value: foundObject?.sponserName, + section: " ", + width: "32.3%", + }, + // { + // label: "Investment Type (Arabic)", + // placeHolder: " ", + // name: "typeNameArabic", + // type: "select", + // arabic: true, + // section: " ", + // width: "32.3%", + // options: investmentTypeArabicOptions, + // }, + { + label: "Goal Amount", + placeHolder: "$00.00", + value: foundObject?.goalAmount, + name: "goalAmount", + type: "number", + + section: " ", + width: "32.3%", + }, + { + label: "Minimum Investment Amount", + placeHolder: "$00.00", + name: "minInvestment", + value: foundObject?.minInvestment, + type: "number", + + section: " ", + width: "32.3%", + }, + { + label: "Maximum Investment Amount", + placeHolder: "$00.00", + name: "maxInvestment", + type: "number", + value: foundObject?.maxInvestment, + section: " ", + width: "32.3%", + }, + { + label: "Holding Period", + name: "holdingPeriod", + value: foundObject?.holdingPeriod, + type: "number", + placeHolder: "1Y", + section: " ", + width: "32.3%", + }, + { + label: "Expected Return Estimated", + placeHolder: "$00.00", + name: "expectedReturn", + type: "number", + value: foundObject?.expectedReturn, + section: " ", + width: "32.3%", + }, + { + label: "Closing Date", + name: "closingDate", + type: "date", + + value: foundObject?.closingDate, + section: " ", + width: "32.3%", + }, + { + label: "IO status", + placeHolder: foundObject?.ioStatus, + name: "ioStatus", + type: "select", + + section: " ", + width: "32.3%", + options: [ + { + label: "Open", + value: "open", + }, + { + label: "Pending", + value: "pending", + }, + { + label: "Closed", + value: "closed", + }, + ], + }, + ]; + const groupedFields = formFields.reduce((groups, field) => { const { section } = field; if (!groups[section]) { @@ -307,22 +499,34 @@ const IODetails = ({ enableNextTab, index }) => { return groups; }, {}); + const groupedEditFields = formEditFields.reduce((groups, field) => { + const { section } = field; + if (!groups[section]) { + groups[section] = []; + } + groups[section].push(field); + return groups; + }, {}); + const onSubmit = (data) => { console.log(data); enableNextTab(index); }; + console.log(id); + + if (isLoading) return ; return ( ); }; diff --git a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx index 9101030..018ecc4 100644 --- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx +++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx @@ -216,12 +216,14 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => { onClick={onOpen} size={"sm"} // width={"44.5%"} + // width={"44.5%"} fontSize={"xs"} rounded={"sm"} - colorScheme="green" + // colorScheme="green" + color={'green'} > - Add + Add document { fontSize={"xs"} rounded={"sm"} - colorScheme="green" + // colorScheme="green" + color={'green'} > - Add + Add key merits new Date(date).toLocaleDateString(); // Simple date const ViewIOTable = () => { const navigate = useNavigate(); const toast = useToast(); - const { viewIO, setViewIO, slideFromRight } = useContext(GlobalStateContext); + const { IODetails, setIODetails, slideFromRight } = useContext(GlobalStateContext); const [searchTerm, setSearchTerm] = useState(""); const [isLoading, setIsLoading] = useState(true); const [deleteAlert, setDeleteAlert] = useState(false); @@ -51,7 +51,6 @@ const ViewIOTable = () => { const [mouseEnteredId, setMouseEnteredId] = useState(""); - console.log(viewIO); useEffect(() => { // Simulate loading const timer = setTimeout(() => { @@ -66,8 +65,8 @@ const ViewIOTable = () => { const tableHeadRow = [ "Sr.no", "Deal ID", - "Deal Name", - "Sponsor Name", + "Sponser Name", + "Investment Type", "IO status", "Action", ]; @@ -86,9 +85,9 @@ const ViewIOTable = () => { // }, 300); // ====================================================[Table Filter]================================================================ - const filteredData = viewIO.filter((item) => { + const filteredData = IODetails.filter((item) => { // Filter by name (case insensitive) - const name = item.DealName; + const name = item.ioName; const searchLower = searchTerm.toLowerCase(); const nameMatches = name.toLowerCase().includes(searchLower); @@ -124,20 +123,20 @@ const ViewIOTable = () => { fontWeight={"500"} className="d-flex align-items-center web-text-small" > - {item.DealID} + {item.id} ), - "Deal Name": ( + "Sponser Name": ( - {item.DealName} + {item.sponserName} ), - "Sponsor Name": ( + "Investment Type": ( - {item.SponsorName} + {item.typeName} ), @@ -145,21 +144,21 @@ const ViewIOTable = () => { - {item.IOstatus} + {item.ioStatus} ), @@ -188,6 +187,30 @@ const ViewIOTable = () => { + + + + + + { })); const handleDelete = () => { - const viewIO = viewIO.filter((viewIO) => viewIO.id !== actionId); + const upDatedIO = IODetails.filter((viewIO) => viewIO.id !== actionId); setTimeout(() => { - setViewIO(viewIO); + setIODetails(upDatedIO); setDeleteAlert(false); setIsLoading(false); }, 100); @@ -251,16 +274,19 @@ const ViewIOTable = () => { - {/* + - */} + diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx index 779cac6..24dbc92 100644 --- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx +++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx @@ -29,19 +29,22 @@ 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 Investors from "../CreateIO/Investors" + const ViewIOdata = () => { + const params = useParams() + console.log(params?.id); const [isEditing, setIsEditing] = useState(false); const navigate = useNavigate(); + const tabs = [ { label: "IO Details", content: }, { label: "Investment documents", content: }, { label: "Key merits", content: }, { label: "IO artifacts", content: }, - { label: "Investors", content: }, + { label: "Investors", content: }, { label: "IO Cash Details", content: }, { label: "IO NAV Details", content: }, // { label: "Distribution", content: }, @@ -60,7 +63,8 @@ const ViewIOdata = () => { - + + {tabs.map(({ label }, index) => ( { {label} ))} + + diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx index 640dcb0..d87dab6 100644 --- a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx +++ b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx @@ -9,97 +9,98 @@ import FormInputView from "../../../Components/FormInputView"; const ViewIOdetails = () => { const params = useParams(); - const { viewIO } = useContext(GlobalStateContext); - console.log(viewIO); + const { IODetails } = useContext(GlobalStateContext); + console.log(IODetails); const { reset } = useForm(); // assuming react-hook-form const id = params?.id; - const foundObject = viewIO?.find( + console.log(id); + const foundObject = IODetails?.find( (item) => item?.id.toString() === id.toString() ); const formFields = [ { label: "IO Name (English)", - value: foundObject.DealName, + value: foundObject?.ioName, width: "49%", section: "", }, { label: "IO Name (Arabic)", - value: foundObject.SponsorName, + value: foundObject?.ioNameArabic, width: "49%", section: "", }, { label: "Description (English)", - value: foundObject.IOstatus, + value: foundObject?.discription, width: "49%", section: "", }, { label: "Description (Arabic)", - value: foundObject.IOstatus, + value: foundObject?.discriptionArabic, width: "49%", section: "", }, { label: "Investment Type (English)", - value: foundObject.DealName, - width: "49%", - section: "", - }, - { - label: "Investment Type (Arabic)", - value: foundObject.DealID, + value: foundObject?.typeName, width: "49%", section: "", }, + // { + // label: "Investment Type (Arabic)", + // value: foundObject?.typeName, + // width: "49%", + // section: "", + // }, { label: "Sponser Name (English)", - value: foundObject.IOstatus, + value: foundObject?.sponserName, width: "49%", section: "", }, { label: "Goal Amount (English)", - value: foundObject.IOstatus, + value: foundObject?.goalAmount, width: "49%", section: "", }, { label: "Minimum Investment Amount (English)", - value: foundObject.IOstatus, + value: foundObject?.minInvestment, width: "32.3%", section: "", }, { label: "Maximum Investment Amount (English)", - value: foundObject.IOstatus, + value: foundObject?.maxInvestment, width: "32.3%", section: "", }, { label: "Holding Period (English)", - value: foundObject.IOstatus, + value: foundObject?.holdingPeriod, width: "32.3%", section: "", }, { label: "Expected Return Estimated (English)", - value: foundObject.IOstatus, + value: foundObject?.expectedReturn, width: "32.3%", section: "", }, { label: "Closing Date (English)", - value: foundObject.IOstatus, + value: foundObject?.closingDate, width: "32.3%", section: "", }, { label: "IO Status (English)", - value: foundObject.IOstatus, + value: foundObject?.ioStatus, width: "32.3%", section: "", }, diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index e405292..cce93a2 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -50,7 +50,8 @@ export const RouteLink = [ { path: "/investment-type/edit-investment/:id", Component: EditInvestmentType }, // ===============[ IO Management]=============== - { path: "/create-io", Component: CreateIO }, + { path: "/create-io/:id", Component: CreateIO }, + { path: "/create-io/", Component: CreateIO }, { path: "/view-io", Component: ViewIOTable }, { path: "/view-io/:id", Component: ViewIOdata }, From 116e4b70574bfcf9a1132c54fe182b96c5ff4cf4 Mon Sep 17 00:00:00 2001 From: siddheshmorewdi Date: Tue, 9 Jul 2024 14:53:31 +0530 Subject: [PATCH 3/3] merging --- src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx index 4ab5892..2d01999 100644 --- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx +++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx @@ -1,6 +1,4 @@ -import { Badge, Box, Image, Text } from "@chakra-ui/react"; import { - Box, Button, Divider, Image, @@ -21,7 +19,7 @@ import { MenuItemOption, MenuGroup, MenuOptionGroup, - MenuDivider, + MenuDivider,Badge, Box } from "@chakra-ui/react"; import header from "../../../assets/IOheader.png"; import { HiDotsVertical } from "react-icons/hi";