From d84e707e6c63b4f7f330a3da3d437b32525c9d7d Mon Sep 17 00:00:00 2001 From: siddheshmorewdi Date: Tue, 9 Jul 2024 14:49:05 +0530 Subject: [PATCH] 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 },