126 lines
2.9 KiB
JavaScript
126 lines
2.9 KiB
JavaScript
import { Box } from "@chakra-ui/react";
|
|
import React, { useContext } from "react";
|
|
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { useForm } from "react-hook-form";
|
|
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
|
import DataTable from "../../../Components/DataTable/DataTable";
|
|
import FormInputView from "../../../Components/FormInputView";
|
|
|
|
const ViewIOdetails = () => {
|
|
const params = useParams();
|
|
const { IODetails } = useContext(GlobalStateContext);
|
|
console.log(IODetails);
|
|
const { reset } = useForm(); // assuming react-hook-form
|
|
|
|
const id = params?.id;
|
|
console.log(id);
|
|
const foundObject = IODetails?.find(
|
|
(item) => item?.id.toString() === id.toString()
|
|
);
|
|
|
|
const formFields = [
|
|
{
|
|
label: "IO Name (English)",
|
|
value: foundObject?.ioName,
|
|
width: "49%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "IO Name (Arabic)",
|
|
value: foundObject?.ioNameArabic,
|
|
width: "49%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "Description (English)",
|
|
value: foundObject?.discription,
|
|
width: "49%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "Description (Arabic)",
|
|
value: foundObject?.discriptionArabic,
|
|
width: "49%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "Investment Type (English)",
|
|
value: foundObject?.typeName,
|
|
width: "49%",
|
|
section: "",
|
|
},
|
|
// {
|
|
// label: "Investment Type (Arabic)",
|
|
// value: foundObject?.typeName,
|
|
// width: "49%",
|
|
// section: "",
|
|
// },
|
|
{
|
|
label: "Sponser Name (English)",
|
|
value: foundObject?.sponserName,
|
|
width: "49%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "Goal Amount (English)",
|
|
value: foundObject?.goalAmount,
|
|
width: "49%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "Minimum Investment Amount (English)",
|
|
value: foundObject?.minInvestment,
|
|
width: "32.3%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "Maximum Investment Amount (English)",
|
|
value: foundObject?.maxInvestment,
|
|
width: "32.3%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "Holding Period (English)",
|
|
value: foundObject?.holdingPeriod,
|
|
width: "32.3%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "Expected Return Estimated (English)",
|
|
value: foundObject?.expectedReturn,
|
|
width: "32.3%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "Closing Date (English)",
|
|
value: foundObject?.closingDate,
|
|
width: "32.3%",
|
|
section: "",
|
|
},
|
|
{
|
|
label: "IO Status (English)",
|
|
value: foundObject?.ioStatus,
|
|
width: "32.3%",
|
|
section: "",
|
|
},
|
|
];
|
|
|
|
const groupedFields = formFields.reduce((groups, field) => {
|
|
const { section } = field;
|
|
if (!groups[section]) {
|
|
groups[section] = [];
|
|
}
|
|
groups[section].push(field);
|
|
return groups;
|
|
}, {});
|
|
|
|
if (!foundObject) {
|
|
return <Box>Loading...</Box>;
|
|
}
|
|
|
|
return <FormInputView groupedFields={groupedFields} />;
|
|
};
|
|
|
|
export default ViewIOdetails;
|