371 lines
10 KiB
JavaScript
371 lines
10 KiB
JavaScript
import { Box, Button, Text } from "@chakra-ui/react";
|
|
import React, { useContext, useEffect } 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";
|
|
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
|
|
import { useGetIOByIdQuery } from "../../../Services/io.service";
|
|
import * as yup from "yup";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { formatDate } from "../../Master/Sponser/Sponsers";
|
|
import { formatCurrency } from "../../../Components/CurrencyInput";
|
|
import { removeTrailingZeros } from "../../../Constants/Constants";
|
|
|
|
const schema = yup.object().shape({
|
|
investmentNameEnglish: 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"),
|
|
|
|
investmentNameArabic: 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"),
|
|
|
|
descriptionEnglish: 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"),
|
|
|
|
descriptionArabic: 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"),
|
|
|
|
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"),
|
|
|
|
closingDate: yup
|
|
.date()
|
|
.required("Closing date is required")
|
|
.min(new Date(), "Closing date cannot be in the past"),
|
|
|
|
holdingPeriod: yup
|
|
.number()
|
|
.required("Holding period is required")
|
|
.positive("Holding period must be a positive number"),
|
|
|
|
// minInvestmentAmount: yup
|
|
// .number()
|
|
// .required("Minimum investment is required")
|
|
// .positive("Minimum investment must be a positive number")
|
|
// .min(1, "Minimum investment must be at least 1"),
|
|
|
|
ISIN: yup.string(),
|
|
|
|
InvestmentDetails: yup.string(),
|
|
|
|
comment: yup.string(),
|
|
|
|
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"),
|
|
});
|
|
|
|
const ViewIOdetails = () => {
|
|
const navigate = useNavigate();
|
|
const params = useParams();
|
|
const id = params?.id;
|
|
const { IODetails, setIODetails } = useContext(GlobalStateContext);
|
|
|
|
const {
|
|
data: IObyID,
|
|
isLoading: IObyIDisLoading,
|
|
error: IObyIDerror,
|
|
} = useGetIOByIdQuery(id, { skip: !id });
|
|
|
|
// ======================[ Validator filter ]
|
|
const {
|
|
control,
|
|
reset,
|
|
setValue,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(schema),
|
|
});
|
|
useEffect(() => {
|
|
setIODetails({
|
|
...IObyID?.data,
|
|
});
|
|
if (IObyID?.data) {
|
|
reset({
|
|
investmentNameEnglish: IObyID?.data?.investmentNameEnglish,
|
|
investmentNameArabic: IObyID?.data?.investmentNameArabic,
|
|
descriptionEnglish: IObyID?.data?.descriptionEnglish,
|
|
descriptionArabic: IObyID?.data?.descriptionArabic,
|
|
goalAmount: removeTrailingZeros(IObyID?.data?.goalAmount),
|
|
closingDate: IObyID?.data?.closingDate,
|
|
holdingPeriod: IObyID?.dpata?.holdingPeriod,
|
|
ISIN: IObyID?.data?.ISIN,
|
|
comment: IObyID?.data?.comment,
|
|
expectedReturn: IObyID?.data?.expectedReturn,
|
|
investmentType_xid: IObyID?.data?.investmentType_xid,
|
|
InvestmentDetails: IObyID?.data?.InvestmentDetails,
|
|
minInvestmentAmount: IObyID?.data?.minInvestmentAmount,
|
|
});
|
|
}
|
|
}, [id, IObyID]);
|
|
|
|
const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, currencyCode, id})=>{
|
|
return{
|
|
id:id,
|
|
country: country?.countryName,
|
|
value: removeTrailingZeros(minInvestmentAmt),
|
|
logo: country?.flagIcon,
|
|
curr: currencyCode,
|
|
}
|
|
})
|
|
|
|
|
|
console.log();
|
|
|
|
|
|
//=======================[ Editor ]
|
|
const formFields = [
|
|
{
|
|
label: "IO Name",
|
|
value: IObyID?.data?.investmentNameEnglish
|
|
? IObyID?.data?.investmentNameEnglish
|
|
: "---",
|
|
name: "investmentNameEnglish",
|
|
type: "text",
|
|
section: " ",
|
|
width: "49%",
|
|
isRequired: true,
|
|
},
|
|
{
|
|
label: "IO Name (Arabic)",
|
|
name: "investmentNameArabic",
|
|
type: "text",
|
|
value: IObyID?.data?.investmentNameArabic
|
|
? IObyID?.data?.investmentNameArabic
|
|
: "---",
|
|
isRequired: true,
|
|
arabic: true,
|
|
section: " ",
|
|
width: "49%",
|
|
},
|
|
{
|
|
label: "Description",
|
|
name: "descriptionEnglish",
|
|
value: IObyID?.data?.descriptionEnglish
|
|
? IObyID?.data?.descriptionEnglish
|
|
: "---",
|
|
type: "textarea",
|
|
isRequired: true,
|
|
section: " ",
|
|
width: "49%",
|
|
},
|
|
{
|
|
label: "Description (Arabic)",
|
|
name: "descriptionArabic",
|
|
value: IObyID?.data?.descriptionArabic
|
|
? IObyID?.data?.descriptionArabic
|
|
: "---",
|
|
type: "textarea",
|
|
isRequired: true,
|
|
arabic: true,
|
|
section: " ",
|
|
width: "49%",
|
|
},
|
|
|
|
{
|
|
label: "Holding Period",
|
|
name: "holdingPeriod",
|
|
value: IObyID?.data?.holdingPeriod ? IObyID?.data?.holdingPeriod : "---",
|
|
type: "text",
|
|
isRequired: true,
|
|
placeHolder: "1Y",
|
|
section: " ",
|
|
width: "49%",
|
|
},
|
|
{
|
|
label: "Holding Period (Arabic)",
|
|
name: "holdingPeriodArabic",
|
|
value: IObyID?.data?.holdingPeriodArabic ? IObyID?.data?.holdingPeriodArabic : "---",
|
|
type: "text",
|
|
isRequired: true,
|
|
arabic: true,
|
|
placeHolder: "1Y",
|
|
section: " ",
|
|
width: "49%",
|
|
},
|
|
{
|
|
label: "Expected Return",
|
|
placeHolder: "$00.00",
|
|
name: "expectedReturn",
|
|
type: "number",
|
|
isRequired: true,
|
|
value: IObyID?.data?.expectedReturn
|
|
? IObyID?.data?.expectedReturn
|
|
: "---",
|
|
section: " ",
|
|
width: "32.3%",
|
|
},
|
|
|
|
{
|
|
label: "Expected Return (Arabic)",
|
|
name: "expectedReturnArabic",
|
|
placeHolder: "$00.00",
|
|
type: "number",
|
|
isRequired: true,
|
|
arabic: true,
|
|
value: IObyID?.data?.expectedReturnArabic
|
|
? IObyID?.data?.expectedReturnArabic
|
|
: "---",
|
|
section: " ",
|
|
width: "32.3%",
|
|
},
|
|
|
|
|
|
{
|
|
label: "Shariah",
|
|
name: "isShariah",
|
|
type: "checkBox",
|
|
// isRequired: true,
|
|
section: " ",
|
|
width: "32.3%",
|
|
value: IObyID?.data?.isShariah,
|
|
},
|
|
{
|
|
label: "Investment Type",
|
|
placeHolder: "Select option",
|
|
value: IObyID?.data?.investmentType?.investmentTypeName
|
|
? IObyID?.data?.investmentType?.investmentTypeName
|
|
: "---",
|
|
name: "investmentType_xid",
|
|
type: "select",
|
|
isRequired: true,
|
|
section: " ",
|
|
width: "32.3%",
|
|
},
|
|
{
|
|
label: "Sponsor Name",
|
|
placeHolder: "Select option",
|
|
name: "sponsor_xid",
|
|
type: "select",
|
|
// options: sponserNameOption,
|
|
value: IObyID?.data?.sponsor?.sponsorName ? IObyID?.data?.sponsor?.sponsorName : "---",
|
|
section: " ",
|
|
isRequired: true,
|
|
width: "32.3%",
|
|
},
|
|
|
|
{
|
|
label: "Goal Amount",
|
|
placeHolder: "$00.00",
|
|
value: IObyID?.data?.goalAmount?parseFloat(IObyID?.data?.goalAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "---",
|
|
|
|
name: "goalAmount",
|
|
type: "number",
|
|
isRequired: true,
|
|
arabic:true,
|
|
section: " ",
|
|
width: "32.3%",
|
|
},
|
|
{
|
|
label: "Closing Date",
|
|
name: "closingDate",
|
|
type: "date",
|
|
isRequired: true,
|
|
value: IObyID?.data?.closingDate
|
|
? formatDate(IObyID?.data?.closingDate)
|
|
: "---",
|
|
section: " ",
|
|
width: "32.3%",
|
|
},
|
|
{
|
|
label: "ISIN",
|
|
placeHolder: "$00.00",
|
|
name: "ISIN",
|
|
value: IObyID?.data?.ISIN ? IObyID?.data?.ISIN : "---",
|
|
type: "number",
|
|
section: " ",
|
|
width: "32.3%",
|
|
align:"right"
|
|
},
|
|
{
|
|
label: "Investment Details",
|
|
placeHolder: "",
|
|
name: "InvestmentDetails",
|
|
value: IObyID?.data?.InvestmentDetails
|
|
? IObyID?.data?.InvestmentDetails
|
|
: "---",
|
|
type: "text",
|
|
section: " ",
|
|
width: "32.3%",
|
|
},
|
|
|
|
{
|
|
label: "Minimum Investment",
|
|
placeHolder: "Enter comment here",
|
|
name: "table",
|
|
type: "table",
|
|
section: " ",
|
|
width: "100%",
|
|
isRequired: true,
|
|
value: minInvestmentById,
|
|
},
|
|
|
|
{
|
|
label: "Comment",
|
|
placeHolder: "Enter comment here",
|
|
name: "comment",
|
|
type: "textarea",
|
|
value: IObyID?.data?.comment ? IObyID?.data?.comment : "---",
|
|
section: " ",
|
|
width: "100%",
|
|
},
|
|
];
|
|
|
|
const groupedFields = formFields.reduce((groups, field) => {
|
|
const { section } = field;
|
|
if (!groups[section]) {
|
|
groups[section] = [];
|
|
}
|
|
groups[section].push(field);
|
|
return groups;
|
|
}, {});
|
|
|
|
if (!IObyID?.data) {
|
|
return <FullscreenLoaders height={'70vh'} />;
|
|
}
|
|
|
|
return (
|
|
<Box position={"relative"}>
|
|
<Box display={"flex"} justifyContent={"space-between"}>
|
|
<Text></Text>
|
|
<Button
|
|
// position={"absolute"}
|
|
// top={"-62px"}
|
|
right={0}
|
|
onClick={() => navigate(`/create-io/${params?.id}`)}
|
|
ps={4}
|
|
pe={4}
|
|
colorScheme="forestGreen"
|
|
rounded={"sm"}
|
|
size={"xs"}
|
|
>
|
|
Edit IO
|
|
</Button>
|
|
</Box>
|
|
<FormInputView groupedFields={groupedFields} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ViewIOdetails;
|