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) => {