Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

[fixed] - io Deatils

Browse Source
This commit is contained in:
YasinShaikh123
2024-12-31 15:47:48 +05:30
parent 51727d4de1
commit 25df0d6160
1 changed files with 139 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
src/Pages/IO_Management/CreateIO/IODetails.jsx
View File

@@ -12,11 +12,12 @@ import {
useUpdateIOMutation,
} from "../../../Services/io.service";
import ToastBox from "../../../Components/ToastBox";
import {
useToast,
} from "@chakra-ui/react";
import { useToast } from "@chakra-ui/react";
import { formatDatee } from "../../../Components/FormField";
import { formatDateToYYYYMMDD, removeTrailingZeros } from "../../../Constants/Constants";
import {
formatDateToYYYYMMDD,
removeTrailingZeros,
} from "../../../Constants/Constants";
const schema = yup.object().shape({
investmentNameEnglish: yup
@@ -25,7 +26,7 @@ const schema = yup.object().shape({
.min(3, "IO name in English must be at least 3 characters long")
.max(150, "IO name in English must be at most 150 characters long"),
investmentNameArabic: yup
investmentNameArabic: yup
.string()
.required("IO name in Arabic is required")
.min(3, "IO name in Arabic must be at least 3 characters long")
@@ -42,15 +43,15 @@ const schema = yup.object().shape({
.required("Description in Arabic is required")
.min(10, "Description in Arabic must be at least 10 characters long")
.max(2000, "Description in Arabic must be at most 500 characters long"),
expectedReturnArabic: yup
.string()
.required("Expected return in Arabic is required"),
expectedReturnArabic: yup
.string()
.required("Expected return in Arabic is required"),
goalAmount: yup
.number()
.typeError("Goal Amount is must be number")
.required('Goal amount is required')
.positive('Goal amount must be a positive number'),
goalAmount: yup
.number()
.typeError("Goal Amount is must be number")
.required("Goal amount is required")
.positive("Goal amount must be a positive number"),
closingDate: yup
.date()
.notRequired("Closing date is required")
@@ -69,28 +70,25 @@ const schema = yup.object().shape({
InvestmentDetails: yup.string().notRequired(),
comment: yup.string().notRequired()
// .min(10, "Comment must be at least 10 characters long")
.max(100, "Comment must be at most 100 characters long"),
expectedReturn: yup
comment: yup
.string()
.required("Expected return is required"),
.notRequired()
// .min(10, "Comment must be at least 10 characters long")
.max(100, "Comment must be at most 100 characters long"),
expectedReturn: yup.string().required("Expected return is required"),
});
const IODetails = ({ enableNextTab, index, data }) => {
const params = useParams();
const navigate = useNavigate();
const toast = useToast();
const handleInputChangeCreate = (index, newValue) => {
const updatedValues = [...values];
updatedValues[index].value = newValue;
setValues(updatedValues);
console.log(values);
console.log(values);
};
const handleInputChangeEdit = (index, newValue) => {
@@ -143,9 +141,12 @@ const IODetails = ({ enableNextTab, index, data }) => {
});
const miniValue = data?.country?.map(
({ countryName, flagIcon, minInvestmentAmt, countryCode, id, currency }, index) => {
(
{ countryName, flagIcon, minInvestmentAmt, countryCode, id, currency },
index
) => {
return {
id:id,
id: id,
country: countryName,
value: minInvestmentAmt,
logo: flagIcon,
@@ -154,18 +155,19 @@ const IODetails = ({ enableNextTab, index, data }) => {
}
);
const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, currencyCode, country_xid,id })=>{
console.log(currencyCode);
return{
_id:id,
id:country_xid,
country: country?.countryName,
value: removeTrailingZeros(minInvestmentAmt),
logo: country?.flagIcon,
curr: currencyCode,
const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(
({ minInvestmentAmt, country, currencyCode, country_xid, id }) => {
console.log(currencyCode);
return {
_id: id,
id: country_xid,
country: country?.countryName,
value: removeTrailingZeros(minInvestmentAmt),
logo: country?.flagIcon,
curr: currencyCode,
};
}
})
);
const schemaEdit = yup.object().shape({
investmentNameEnglish: yup
@@ -173,73 +175,67 @@ const IODetails = ({ enableNextTab, index, data }) => {
.required("IO name in English is required")
.min(3, "IO name in English must be at least 3 characters long")
.max(150, "IO name in English must be at most 150 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(1000, "Description in English must be at most 1000 characters long"),
descriptionArabic: yup
.string()
.required("Description in Arabic is required")
.min(10, "Description in Arabic must be at least 10 characters long")
.max(2000, "Description in Arabic must be at most 500 characters long"),
expectedReturnArabic: yup
.string()
.required("Expected return in Arabic is required"),
goalAmount: yup
.number()
.typeError("Goal Amount is must be number")
.required('Goal amount is required')
.positive('Goal amount must be a positive number')
.min(IObyID?.data?.totalAmtInvestmentInUSD, `Goal amount should not be lesser then amount raised ${IObyID?.data?.totalAmtInvestmentInUSD}`),
closingDate: yup
.date()
.notRequired("Closing date is required")
.min(new Date(), "Closing date cannot be in the past"),
expectedReturnArabic: yup
.string()
.required("Expected return in Arabic is required"),
goalAmount: yup
.number()
.typeError("Goal Amount is must be number")
.required("Goal amount is required")
.positive("Goal amount must be a positive number")
.min(
IObyID?.data?.totalAmtInvestmentInUSD,
`Goal amount should not be lesser then amount raised ${IObyID?.data?.totalAmtInvestmentInUSD}`
),
closingDate: yup.date().notRequired("Closing date is required"),
holdingPeriod: yup.string().required("Holding period is required"),
holdingPeriodArabic: yup.string().required("Holding period is required"),
isShariah: yup.string().required("CheckBox is required"),
// 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().notRequired(),
InvestmentDetails: yup.string().notRequired(),
comment: yup.string().notRequired()
.min(10, "Comment must be at least 10 characters long")
.max(100, "Comment must be at most 100 characters long"),
expectedReturn: yup
comment: yup
.string()
.required("Expected return is required"),
.notRequired()
.min(10, "Comment must be at least 10 characters long")
.max(100, "Comment must be at most 100 characters long"),
expectedReturn: yup.string().required("Expected return is required"),
});
const [values, setValues] = useState(id?minInvestmentById:miniValue);
const [values, setValues] = useState(id ? minInvestmentById : miniValue);
const formatNumber = (num) => {
// Remove non-numeric characters and format with commas
return num.replace(/\D/g, '')
.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return num.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
// console.log(values);
@@ -253,10 +249,11 @@ const IODetails = ({ enableNextTab, index, data }) => {
formState: { errors },
} = useForm({
resolver: yupResolver(id ? schemaEdit : schema),
mode: "all",
});
useEffect(() => {
setIOloading(IObyIDisLoading)
setIOloading(IObyIDisLoading);
setIODetails({
...IObyID?.data,
});
@@ -277,10 +274,9 @@ const IODetails = ({ enableNextTab, index, data }) => {
minInvestmentAmount: IObyID?.data?.minInvestmentAmount,
holdingPeriodArabic: IObyID?.data?.minInvestmentAmount,
expectedReturnArabic: IObyID?.data?.minInvestmentAmount,
isShariah: IObyID?.data?.isShariah
isShariah: IObyID?.data?.isShariah,
});
}
}, [id, IObyID]);
//=======================[ Creator ]
@@ -293,8 +289,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
isRequired: true,
section: " ",
width: "49%",
maxLength:150,
helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameEnglish?.length || 0} characters.`
maxLength: 150,
helperText: `Maximum length should be 150 characters. You have entered ${
watch()?.investmentNameEnglish?.length || 0
} characters.`,
},
{
label: "IO Name (Arabic)",
@@ -305,8 +303,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
arabic: true,
section: " ",
width: "49%",
maxLength:150,
helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameArabic?.length || 0} characters.`
maxLength: 150,
helperText: `Maximum length should be 150 characters. You have entered ${
watch()?.investmentNameArabic?.length || 0
} characters.`,
},
{
label: "Description",
@@ -316,8 +316,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
isRequired: true,
section: " ",
width: "49%",
maxLength:1000,
helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionEnglish?.length || 0} characters.`
maxLength: 1000,
helperText: `Maximum length should be 1000 characters. You have entered ${
watch()?.descriptionEnglish?.length || 0
} characters.`,
},
{
label: "Description (Arabic)",
@@ -328,9 +330,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
arabic: true,
section: " ",
width: "49%",
maxLength:1000,
helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionArabic?.length || 0} characters.`
maxLength: 1000,
helperText: `Maximum length should be 1000 characters. You have entered ${
watch()?.descriptionArabic?.length || 0
} characters.`,
},
{
label: "Holding Period",
@@ -341,8 +344,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
section: " ",
width: "49%",
value: IObyID?.data?.holdingPeriod,
maxLength:20,
helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriod?.length || 0} characters.`
maxLength: 20,
helperText: `Maximum length should be 20 characters. You have entered ${
watch()?.holdingPeriod?.length || 0
} characters.`,
},
{
label: "Holding Period (Arabic)",
@@ -354,11 +359,12 @@ const IODetails = ({ enableNextTab, index, data }) => {
section: " ",
width: "49%",
value: IObyID?.data?.holdingPeriodArabic,
maxLength:20,
helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriodArabic?.length || 0} characters.`
maxLength: 20,
helperText: `Maximum length should be 20 characters. You have entered ${
watch()?.holdingPeriodArabic?.length || 0
} characters.`,
},
{
label: "Expected Return",
name: "expectedReturn",
@@ -371,7 +377,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
{
label: "Expected Return (Arabic)",
name: "expectedReturnArabic",
name: "expectedReturnArabic",
type: "text",
isRequired: true,
arabic: true,
@@ -381,16 +387,15 @@ const IODetails = ({ enableNextTab, index, data }) => {
},
{
label: "Shariah",
name: "isShariah",
name: "isShariah",
type: "checkBox",
value:IObyID?.data?.isShariah,
value: IObyID?.data?.isShariah,
// isRequired: true,
section: " ",
width: "32.3%",
value: IObyID?.data?.isShariah,
},
{
label: "Investment Type",
placeHolder: "Select option",
@@ -428,19 +433,19 @@ const IODetails = ({ enableNextTab, index, data }) => {
name: "closingDate",
// value: "IObyID?.data?.closingDate",
type: "date",
isRequired: true,
// isRequired: true,
section: " ",
width: "32.3%",
dateValue:formatDatee(IObyID?.data?.closingDate),
dateValue: formatDatee(IObyID?.data?.closingDate),
// helperText: IObyID && `Current closing date is : ${formatDate(IObyID?.data?.closingDate)}`
closingDate:true
// closingDate:true
},
{
label: "ISIN",
placeHolder: "",
name: "ISIN",
type: "text",
align:"right",
align: "right",
section: " ",
width: "32.3%",
},
@@ -452,8 +457,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
section: " ",
width: "32.3%",
value: IObyID?.data?.InvestmentDetails,
maxLength:20,
helperText:`Maximum length should be 20 characters. You have entered ${watch()?.InvestmentDetails?.length || 0} characters.`
maxLength: 20,
helperText: `Maximum length should be 20 characters. You have entered ${
watch()?.InvestmentDetails?.length || 0
} characters.`,
},
{
@@ -462,10 +469,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
name: "table",
type: "table",
section: " ",
width: "100%",
width: "100%",
isRequired: true,
options: investmentTypeOptions,
handleInputChange:id ? handleInputChangeEdit : handleInputChangeCreate,
handleInputChange: id ? handleInputChangeEdit : handleInputChangeCreate,
value: values,
},
@@ -478,8 +485,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
width: "100%",
options: investmentTypeOptions,
value: IObyID?.data?.comment,
maxLength:100,
helperText:`Maximum length should be 100 characters. You have entered ${watch()?.comment?.length || 0} characters.`
maxLength: 100,
helperText: `Maximum length should be 100 characters. You have entered ${
watch()?.comment?.length || 0
} characters.`,
},
];
const groupedFields = formFields.reduce((groups, field) => {
@@ -492,30 +501,29 @@ const IODetails = ({ enableNextTab, index, data }) => {
}, {});
const onSubmit = async (data) => {
delete data.table;
setIsLoading(true);
const updatedMinAmount = values?.map(({id, value, _id})=>{
const updatedMinAmount = values?.map(({ id, value, _id }) => {
return {
id:_id,
country_xid:id,
minInvestmentAmt: Number(value)
}
})
id: _id,
country_xid: id,
minInvestmentAmt: Number(value),
};
});
// console.log(formatDateToYYYYMMDD(data.closingDate));
const formData = {
...data,
investmentType_xid: Number(data.investmentType),
sponsor_xid: Number(data.sponserName),
minInvestmentAmt:updatedMinAmount,
closingDate: formatDateToYYYYMMDD(data.closingDate)
minInvestmentAmt: updatedMinAmount,
closingDate: formatDateToYYYYMMDD(data.closingDate),
};
// console.log(formData);
if (id) {
console.log("========================",formData);
console.log("========================", formData);
const res = await updateIO({ data: formData, id });
console.log(res);
if (res?.data?.statusCode === 200) {
@@ -525,20 +533,24 @@ const IODetails = ({ enableNextTab, index, data }) => {
});
navigate(`/view-io/${id}`);
enableNextTab(index);
} else if(res?.error?.status === 400){
} else if (res?.error?.status === 400) {
setIsLoading(false);
toast({
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
});
} else if(res?.error?.status === 500){
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
} else if (res?.error?.status === 500) {
setIsLoading(false);
toast({
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
}
} else {
try {
console.log("========================",formData);
console.log("========================", formData);
const res = await creatIO(formData);
console.log(res?.error?.status);
if (res?.data?.statusCode === 200) {
@@ -548,15 +560,19 @@ const IODetails = ({ enableNextTab, index, data }) => {
});
navigate(`/view-io/${res?.data?.data}`);
enableNextTab(index);
} else if(res?.error?.status === 400){
} else if (res?.error?.status === 400) {
setIsLoading(false);
toast({
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
}else if(res?.error?.status === 500){
} else if (res?.error?.status === 500) {
setIsLoading(false);
toast({
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
}
} catch (error) {
@@ -565,7 +581,6 @@ const IODetails = ({ enableNextTab, index, data }) => {
}
}
// ==========================
// if (params?.id) {
// return enableNextTab(index);
@@ -583,9 +598,8 @@ const IODetails = ({ enableNextTab, index, data }) => {
};
return IObyIDisLoading ? (
<FullscreenLoaders height={'70vh'} />
<FullscreenLoaders height={"70vh"} />
) : (
<FormInputMain
p={0.1}
w={250}