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 79090a1..64361ef 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -539,42 +539,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, }, ]); @@ -1468,6 +1434,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, + caseDetails, setCaseDetails, }} diff --git a/src/Pages/IO_Management/CreateIO/CreateIO.jsx b/src/Pages/IO_Management/CreateIO/CreateIO.jsx index 421111a..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"; @@ -18,6 +11,9 @@ 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"; +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"), @@ -25,17 +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"), @@ -81,6 +72,7 @@ const schema = yup.object().shape({ }); const CreateIO = () => { + const id = useParams()?.id; const { control, handleSubmit, @@ -104,55 +96,70 @@ 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 ( - setActiveIndex(index)} mt={2}> + + {/* navigate(-1)} + style={{ fontSize: "15px", cursor: "pointer" }} + > + Back + */} + + + 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 194b875..6ca291c 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 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, + 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, + reset, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(schema), + }); + + 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 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: "Closed", + value: "closed", + }, + ], + }, + ]; + + 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: "option 4", - value: "option 4", + label: "Pending", + value: "pending", + }, + { + label: "Closed", + value: "closed", }, ], }, @@ -205,25 +499,34 @@ const IODetails = ({ enableNextTab, control, errors, index, handleSubmit }) => { return groups; }, {}); + const groupedEditFields = formEditFields.reduce((groups, field) => { + const { section } = field; + if (!groups[section]) { + groups[section] = []; + } + groups[section].push(field); + return groups; + }, {}); - const onSubmit = (e) =>{ - e.preventDefault(); - enableNextTab(index) - } + 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 8b9f946..815dca9 100644 --- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx +++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx @@ -238,7 +238,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => { rounded="sm" colorScheme="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 3e8db8d..b02ba7c 100644 --- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx +++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx @@ -27,37 +27,47 @@ 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" import EditIO from "../EditIO/EditIO"; + const ViewIOdata = () => { const { isOpen, onOpen, onClose } = useDisclosure(); const navigate = useNavigate(); + const params = useParams() + console.log(params?.id); + const [isEditing, setIsEditing] = useState(false); + 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 - + */} - + + {tabs.map(({ label }, index) => ( { {label} ))} + + - {/* { > - */} + { 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) => { 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 },