loan/user-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/refahi_crud' into 'develop'

Browse Source 
bug fixing in user project error messages of yop / placement of submit loan...

See merge request witel3/loan-facilities-user!22
This commit is contained in:
AmirHossein Mahmoodi
2023-08-27 06:51:40 +00:00
parent 8cdf7f8105 9098881ceb
commit 24e59a75cd
14 changed files with 747 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example.env.local
View File

@@ -6,8 +6,6 @@ NEXT_PUBLIC_DEFAULT_DIRECTION = "rtl"
NEXT_PUBLIC_PRIMARY_MAIN = "#084070"
NEXT_PUBLIC_SECONDARY_MAIN = "#FF4E00"
NEXT_PUBLIC_API_URL = "http://Your IP:3000"
NEXT_PUBLIC_BASE_URL = "deploy api"
NODE_ENV = "development"

23
public/locales/fa/app.json
View File

@@ -14,6 +14,7 @@
"resend_code": "ارسال مجدد کد",
"Resend_code_in": "ارسال مجدد کد در",
"seconds_later": "ثانیه دیگر",
"upload_file_text": "بارگذاری فایل",
"header": {
"open_profile": "پروفایل",
"edit_profile": "ویرایش پروفایل",
@@ -54,7 +55,8 @@
"sidebar": {
"dashboard": "داشبورد",
"add-request-loan": "درخواست وام",
"followUp-loan": "پیگیری درخواست"
"followUp-loan": "پیگیری درخواست",
"edit-request-loan": "ویرایش درخواست وام"
},
"Authorization": {
"typography_your_login_is_valid_and_you_do_not_need_to_login_again": "شما دسترسی لازم به این صفحه را دارید نیاز به ورود مجدد نیست.",
@@ -109,7 +111,9 @@
"loan_follow_up_page": "پیگیری درخواست"
},
"LoanRequest": {
"loan_request_page": "فرم درخواست وام",
"loan_request_page": "ثبت درخواست وام",
"personal_info": "اطلاعات شخصی",
"uploading_documents": "اسناد",
"error_message_name": "لطفا نام خود را وارد کنید!",
"error_message_phone_number": "لطفا شماره تلفن خود را وارد کنید!",
"error_message_vehicle_type": "لطفا نوع وسیله نقلیه خود را وارد کنید!",
@@ -135,7 +139,20 @@
"text_field_plate_number": "شماره پلاک",
"text_field_enter_your_plate_number": "شماره پلاک خود را وارد کنید",
"button_submit": "ثبت درخواست",
"file_field_sherkat_naft_doc": "مجوز شرکت نفت",
"file_field_estate_doc": "سند مالکیت",
"file_field_agreement_doc": "موافقت نامه اصولی",
"error_message_sherkat_naft_doc": "مجوز شرکت نفت خود را وارد کنید",
"error_message_estate_doc": "سند مالکیت خود را وارد کنید",
"error_message_agreement_doc": "موافقت نامه اصولی خود را وارد کنید",
"file_field_shenasname_image": "تصویر شناسنامه",
"file_field_national_card_image": "تصویر کارت ملی"
"file_field_national_card_image": "تصویر کارت ملی",
"file_field_payan_khedmat_image": "تصویر کارت پایان خدمت",
"error_message_national_card_image": "تصویر کارت ملی خود را وارد کنید",
"error_message_shenasname_image": "تصویر شناسنامه خود را وارد کنید",
"error_message_payan_khedmat_image": "تصویر کارت پایان خدمت خود را وارد کنید"
},
"EditLoanRequest": {
"edit_loan_request_page": "ویرایش درخواست وام"
}
}

234
src/components/dashboard/refahi/add-request-loan/forms/AddForm.jsx
View File

@@ -4,8 +4,7 @@ import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoute
import useDirection from "@/lib/app/hooks/useDirection";
import useUser from "@/lib/app/hooks/useUser";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {Box, Button, Stack, TextField} from "@mui/material";
import axios from "axios";
import {Box, Button, Chip, Divider, Stack, TextField} from "@mui/material";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import {useEffect, useState} from "react";
@@ -19,8 +18,9 @@ const AddFormComponent = () => {
const {token} = useUser();
const requestServer = useRequest()
// get province list
const [provinceList, setProvinceList] = useState([]);
// get province list
useEffect(() => {
requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
.then(function ({data}) {
@@ -35,42 +35,6 @@ const AddFormComponent = () => {
}, []);
// end get province list
// upload files
const [selectedImageShenasname, setSelectedImageShenasname] = useState(
"/images/upload-image.svg"
);
const [fileTypeShenasname, setFileTypeShenasname] = useState(null);
const [fileNameShenasname, setFileNameShenasname] = useState(null);
const [selectedImageNationalCard, setSelectedImageNationalCard] = useState(
"/images/upload-image.svg"
);
const [fileTypeNationalCard, setFileTypeNationalCard] = useState(null);
const [fileNameNationalCard, setFileNameNationalCard] = useState(null);
const handleUploadChangeShenasname = (event, setFieldValue) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImageShenasname(URL.createObjectURL(uploadedFile));
setFileTypeShenasname(fileType);
setFileNameShenasname(fileName);
setFieldValue("shenasname_img", uploadedFile);
}
};
const handleUploadChangeNationalCard = (event, setFieldValue) => {
const uploadedFile = event.target?.files?.[0];
const fileType = event.target.files[0].type;
const fileName = event.target.files[0].name;
if (uploadedFile) {
setSelectedImageNationalCard(URL.createObjectURL(uploadedFile));
setFileTypeNationalCard(fileType);
setFileNameNationalCard(fileName);
setFieldValue("national_card_img", uploadedFile);
}
};
// end upload files
// initial values, validation and request action of form
const initialValues = {
name: "",
@@ -78,8 +42,12 @@ const AddFormComponent = () => {
province: "",
national_code: "",
shenasname_id: "",
national_card_img: null,
shenasname_img: null,
sherkat_naft_doc: null,
estate_doc: null,
agreement_doc: null,
national_card_image: null,
shenasname_image: null,
payan_khedmat_image: null,
};
const validationSchema = Yup.object().shape({
@@ -94,8 +62,13 @@ const AddFormComponent = () => {
shenasname_id: Yup.string().required(
t("LoanRequest.error_message_shenasname_id")
),
sherkat_naft_doc: Yup.mixed().required(t("LoanRequest.error_message_sherkat_naft_doc")),
estate_doc: Yup.mixed().required(t("LoanRequest.error_message_estate_doc")),
agreement_doc: Yup.mixed().required(t("LoanRequest.error_message_agreement_doc")),
national_card_image: Yup.mixed().required(t("LoanRequest.error_message_national_card_image")),
shenasname_image: Yup.mixed().required(t("LoanRequest.error_message_shenasname_image")),
payan_khedmat_image: Yup.mixed().required(t("LoanRequest.error_message_payan_khedmat_image")),
});
const handleSubmit = async (values, props) => {
const formData = new FormData();
formData.append("name", values.name);
@@ -103,10 +76,18 @@ const AddFormComponent = () => {
formData.append("province_id", values.province);
formData.append("national_id", values.national_code);
formData.append("shenasname_id", values.shenasname_id);
if (values.shenasname_img != null)
formData.append("shenasname_image", values.shenasname_img);
if (values.national_card_img != null)
formData.append("national_card_image", values.national_card_img);
if (values.sherkat_naft_doc != null)
formData.append("sherkat_naft_doc", values.sherkat_naft_doc);
if (values.estate_doc != null)
formData.append("estate_doc", values.estate_doc);
if (values.agreement_doc != null)
formData.append("agreement_doc", values.agreement_doc);
if (values.shenasname_image != null)
formData.append("shenasname_image", values.shenasname_image);
if (values.national_card_image != null)
formData.append("national_card_image", values.national_card_image);
if (values.payan_khedmat_image != null)
formData.append("payan_khedmat_image", values.payan_khedmat_image);
requestServer(SEND_LOAN_REQUEST_WELFARE, "post", {auth: true, data: formData})
.then(function (response) {
@@ -132,6 +113,13 @@ const AddFormComponent = () => {
}}
>
<StyledForm sx={{width: "100%"}}>
<Box sx={{my: 1}}>
<Divider>
<Chip
label={t("LoanRequest.personal_info")}
/>
</Divider>
</Box>
<Box
sx={{
display: "flex",
@@ -285,44 +273,124 @@ const AddFormComponent = () => {
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "center",
justifyContent: "space-around",
width: "100%",
}}
>
<UploadSystem
selectedImage={selectedImageShenasname}
handleUploadChange={(e) =>
handleUploadChangeShenasname(e, props.setFieldValue)
}
setselectedImage={setSelectedImageShenasname}
setFieldValue={props.setFieldValue}
fieldname="shenasname_img"
fileType={fileTypeShenasname}
fileName={fileNameShenasname}
imageAlt={t("app_name")}
imageSize={[300 /*width*/, 150 /*height*/]}
label={t("LoanRequest.file_field_shenasname_image")}
/>
<UploadSystem
selectedImage={selectedImageNationalCard}
handleUploadChange={(e) =>
handleUploadChangeNationalCard(e, props.setFieldValue)
}
setselectedImage={setSelectedImageNationalCard}
setFieldValue={props.setFieldValue}
fieldname="national_card_img"
fileType={fileTypeNationalCard}
fileName={fileNameNationalCard}
imageAlt={t("app_name")}
imageSize={[300 /*width*/, 150 /*height*/]}
label={t("LoanRequest.file_field_national_card_image")}
/>
<Box sx={{my: 1}}>
<Divider>
<Chip
label={t("LoanRequest.uploading_documents")}
/>
</Divider>
</Box>
<Stack spacing={{xs: 1, sm: 2}} direction="row" useFlexGap flexWrap="wrap"
sx={{justifyContent: "center"}}>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="sherkat_naft_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_sherkat_naft_doc")}
enableDelete={false}
error={
!!(props.touched.sherkat_naft_doc && props.errors.sherkat_naft_doc)
}
helperText={
props.touched.sherkat_naft_doc ? props.errors.sherkat_naft_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="estate_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_estate_doc")}
enableDelete={false}
error={
!!(props.touched.estate_doc && props.errors.estate_doc)
}
helperText={
props.touched.estate_doc ? props.errors.estate_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="agreement_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_agreement_doc")}
enableDelete={false}
error={
!!(props.touched.agreement_doc && props.errors.agreement_doc)
}
helperText={
props.touched.agreement_doc ? props.errors.agreement_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="shenasname_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_shenasname_image")}
enableDelete={false}
error={
!!(props.touched.shenasname_image && props.errors.shenasname_image)
}
helperText={
props.touched.shenasname_image ? props.errors.shenasname_image : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="payan_khedmat_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_payan_khedmat_image")}
enableDelete={false}
error={
!!(props.touched.payan_khedmat_image && props.errors.payan_khedmat_image)
}
helperText={
props.touched.payan_khedmat_image ? props.errors.payan_khedmat_image : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
fieldName="national_card_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_national_card_image")}
enableDelete={false}
error={
!!(props.touched.national_card_image && props.errors.national_card_image)
}
helperText={
props.touched.national_card_image ? props.errors.national_card_image : null
}
/>
</Box>
</Stack>
<Box
sx={{
display: "flex",

14
src/components/dashboard/refahi/add-request-loan/index.jsx
View File

@@ -1,4 +1,3 @@
import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import useUser from "@/lib/app/hooks/useUser";
import {Box, Chip, Divider} from "@mui/material";
@@ -11,18 +10,7 @@ const LoanRequestComponent = () => {
return (
<DashboardLayouts>
<CenterLayout>
<Box sx={{width: "80%", my: 2}}>
<Divider>
<Chip
label={`${t("LoanRequest.loan_request_page")} | ${
user.type_name
}`}
/>
</Divider>
</Box>
<AddFormComponent/>
</CenterLayout>
<AddFormComponent/>
</DashboardLayouts>
);
};

445
src/components/dashboard/refahi/edit-request-loan/forms/EditForm.jsx Normal file
View File

@@ -0,0 +1,445 @@
import StyledForm from "@/core/components/StyledForm";
import UploadSystem from "@/core/components/UploadSystem";
import {GET_PROVINCE_LIST, UPDATE_LOAN_REQUEST_WELFARE, DETAILS_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import useUser from "@/lib/app/hooks/useUser";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {Box, Button, Chip, Divider, Stack, TextField} from "@mui/material";
import axios from "axios";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import {useEffect, useMemo, useState} from "react";
import * as Yup from "yup";
import SelectBox from "@/core/components/SelectBox";
import useRequest from "@/lib/app/hooks/useRequest";
import {useRouter} from "next/router";
import useLoading from "@/lib/app/hooks/useLoading";
const EditFormComponent = () => {
const t = useTranslations();
const {directionApp} = useDirection();
const {token} = useUser();
const requestServer = useRequest();
const router = useRouter();
const {setLoadingPage} = useLoading();
const [provinceList, setProvinceList] = useState(null);
const [initialValues, setInitialValues] = useState(null);
// get province list
useEffect(() => {
setLoadingPage(true)
requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
.then(function ({data}) {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setProvinceList(formattedData);
}).catch(() => {
});
}, []);
// get form data
useEffect(() => {
if (!provinceList) return;
requestServer(DETAILS_LOAN_REQUEST_WELFARE + router.query.id, "get", {auth: true, notification: false})
.then(function ({data}) {
const item = data.data;
const formattedData = {
name: item.name,
phone_number: item.phone_number,
province_id: item.province_id,
national_id: item.national_id,
shenasname_id: item.shenasname_id,
sherkat_naft_doc: item.sherkat_naft_doc,
estate_doc: item.estate_doc,
agreement_doc: item.agreement_doc,
national_card_image: item.national_card_image,
shenasname_image: item.shenasname_image,
payan_khedmat_image: item.payan_khedmat_image,
}
setInitialValues(formattedData);
setLoadingPage(false)
}).catch(() => {
})
}, [provinceList]);
// validation and request action of form
const validationSchema = Yup.object().shape({
name: Yup.string().required(t("LoanRequest.error_message_name")),
phone_number: Yup.string().required(
t("LoanRequest.error_message_phone_number")
),
province_id: Yup.string().required(t("LoanRequest.error_message_province")),
national_id: Yup.string().required(t("LoanRequest.error_message_national_code")),
shenasname_id: Yup.string().required(t("LoanRequest.error_message_shenasname_id")),
sherkat_naft_doc: Yup.mixed().required(t("LoanRequest.error_message_sherkat_naft_doc")),
estate_doc: Yup.mixed().required(t("LoanRequest.error_message_estate_doc")),
agreement_doc: Yup.mixed().required(t("LoanRequest.error_message_agreement_doc")),
national_card_image: Yup.mixed().required(t("LoanRequest.error_message_national_card_image")),
shenasname_image: Yup.mixed().required(t("LoanRequest.error_message_shenasname_image")),
payan_khedmat_image: Yup.mixed().required(t("LoanRequest.error_message_payan_khedmat_image")),
});
const handleSubmit = async (values, props) => {
const formData = new FormData();
formData.append("name", values.name);
formData.append("phone_number", values.phone_number);
formData.append("province_id", values.province_id);
formData.append("national_id", values.national_id);
formData.append("shenasname_id", values.shenasname_id);
if (values.sherkat_naft_doc != initialValues.sherkat_naft_doc)
formData.append("sherkat_naft_doc", values.sherkat_naft_doc);
if (values.estate_doc != initialValues.estate_doc)
formData.append("estate_doc", values.estate_doc);
if (values.agreement_doc != initialValues.agreement_doc)
formData.append("agreement_doc", values.agreement_doc);
if (values.shenasname_image != initialValues.shenasname_image)
formData.append("shenasname_image", values.shenasname_image);
if (values.national_card_image != initialValues.national_card_image)
formData.append("national_card_image", values.national_card_image);
if (values.payan_khedmat_image != initialValues.payan_khedmat_image)
formData.append("payan_khedmat_image", values.payan_khedmat_image);
requestServer(UPDATE_LOAN_REQUEST_WELFARE + router.query.id, "post", {auth: true, data: formData})
.then(function (response) {
})
.catch(function (error) {
})
.finally(function () {
props.setSubmitting(false);
});
};
if (!initialValues) return "";
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
<Stack
spacing={2}
sx={{
p: 1,
width: "100%",
}}
>
<StyledForm sx={{width: "100%"}}>
<Box sx={{my: 1}}>
<Divider>
<Chip
label={t("LoanRequest.personal_info")}
/>
</Divider>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="name"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_name")}
placeholder={t("LoanRequest.text_field_enter_your_name")}
type={"text"}
error={!!(props.touched.name && props.errors.name)}
fullWidth
helperText={props.touched.name ? props.errors.name : null}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="phone_number"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_phone_number")}
placeholder={t(
"LoanRequest.text_field_enter_your_phone_number"
)}
type={"text"}
error={
!!(props.touched.phone_number && props.errors.phone_number)
}
fullWidth
helperText={
props.touched.phone_number
? props.errors.phone_number
: null
}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
name="province_id"
label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
size="small"
selectType="province_id"
component={SelectBox}
selectors={provinceList}
select={props.values.province_id}
setFieldValue={props.setFieldValue}
setFieldTouched={props.setFieldTouched}
error={
!!(props.touched.province_id && props.errors.province_id)
}
helperText={
props.touched.province_id ? props.errors.province_id : null
}
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="national_id"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_national_code")}
placeholder={t(
"LoanRequest.text_field_enter_your_national_code"
)}
type={"text"}
error={
!!(props.touched.national_id && props.errors.national_id)
}
fullWidth
helperText={
props.touched.national_id
? props.errors.national_id
: null
}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="shenasname_id"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_shenasname_id")}
placeholder={t(
"LoanRequest.text_field_enter_your_shenasname_id"
)}
type={"text"}
error={
!!(props.touched.shenasname_id && props.errors.shenasname_id)
}
fullWidth
helperText={
props.touched.shenasname_id
? props.errors.shenasname_id
: null
}
/>
</Box>
</Box>
<Box sx={{my: 1}}>
<Divider>
<Chip
label={t("LoanRequest.uploading_documents")}
/>
</Divider>
</Box>
<Stack spacing={{xs: 1, sm: 2}} direction="row" useFlexGap flexWrap="wrap"
sx={{justifyContent: "center"}}>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.sherkat_naft_doc}
fieldName="sherkat_naft_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_sherkat_naft_doc")}
enableDelete={false}
error={
!!(props.touched.sherkat_naft_doc && props.errors.sherkat_naft_doc)
}
helperText={
props.touched.sherkat_naft_doc ? props.errors.sherkat_naft_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.estate_doc}
fieldName="estate_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_estate_doc")}
enableDelete={false}
error={
!!(props.touched.estate_doc && props.errors.estate_doc)
}
helperText={
props.touched.estate_doc ? props.errors.estate_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.agreement_doc}
fieldName="agreement_doc"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_agreement_doc")}
enableDelete={false}
error={
!!(props.touched.agreement_doc && props.errors.agreement_doc)
}
helperText={
props.touched.agreement_doc ? props.errors.agreement_doc : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.shenasname_image}
fieldName="shenasname_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_shenasname_image")}
enableDelete={false}
error={
!!(props.touched.shenasname_image && props.errors.shenasname_image)
}
helperText={
props.touched.shenasname_image ? props.errors.shenasname_image : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.payan_khedmat_image}
fieldName="payan_khedmat_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_payan_khedmat_image")}
enableDelete={false}
error={
!!(props.touched.payan_khedmat_image && props.errors.payan_khedmat_image)
}
helperText={
props.touched.payan_khedmat_image ? props.errors.payan_khedmat_image : null
}
/>
</Box>
<Box sx={{
mx: {xs: 0, sm: 1},
maxWidth: "200px"
}}>
<UploadSystem
setFieldValue={props.setFieldValue}
default_image={initialValues.national_card_image}
fieldName="national_card_image"
imageAlt={t("app_name")}
label={t("LoanRequest.file_field_national_card_image")}
enableDelete={false}
error={
!!(props.touched.national_card_image && props.errors.national_card_image)
}
helperText={
props.touched.national_card_image ? props.errors.national_card_image : null
}
/>
</Box>
</Stack>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "center",
mx: "auto",
my: 2,
width: {xs: "100%", sm: "30%", md: "25%"},
}}
>
<Button
fullWidth
type="submit"
variant="contained"
size="large"
sx={{mt: 2}}
endIcon={<DataSaverOnIcon/>}
disabled={props.isSubmitting}
>
{t("LoanRequest.button_submit")}
</Button>
</Box>
</StyledForm>
</Stack>
)}
</Formik>
);
};
export default EditFormComponent;

17
src/components/dashboard/refahi/edit-request-loan/index.jsx Normal file
View File

@@ -0,0 +1,17 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
import useUser from "@/lib/app/hooks/useUser";
import {useTranslations} from "next-intl";
import EditFormComponent from "@/components/dashboard/refahi/edit-request-loan/forms/EditForm";
const LoanRequestComponent = () => {
const t = useTranslations();
const {user} = useUser();
return (
<DashboardLayouts>
<EditFormComponent/>
</DashboardLayouts>
);
};
export default LoanRequestComponent;

179
src/core/components/UploadSystem.jsx
View File

@@ -1,24 +1,56 @@
import {Box, Button, TextField, Typography} from "@mui/material";
import {Box, Button, FormHelperText, TextField, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import Image from "next/image";
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
import {useRef} from "react";
import {useRef, useState} from "react";
const UploadSystem = ({
selectedImage,
setselectedImage,
handleUploadChange,
fieldname,
fieldName,
default_image,
helperText,
error,
setFieldValue,
imageAlt,
imageSize,
fileType,
fileName,
label,
enableDelete
}) => {
const t = useTranslations();
const fileInputRef = useRef(null);
const [selectedImage, setSelectedImage] = useState(default_image || "/images/upload-image.svg");
const [fileType, setFileType] = useState(null);
const [fileName, setFileName] = useState("");
// upload files
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
setSelectedImage(URL.createObjectURL(uploadedFile));
setFileType(uploadedFile.type);
setFileName(uploadedFile.name);
setFieldValue(fieldName, uploadedFile);
}
};
// end upload files
const uploadBoxStyle = error ? {
cursor: "pointer",
objectFit: "contain",
border: "1px dashed #d32f2f",
borderRadius: "5px",
padding: "5px",
width: '200px',
height: '200px'
} : {
cursor: "pointer",
objectFit: "contain",
border: "1px dashed #e1e1e1",
borderRadius: "5px",
padding: "5px",
width: '200px',
height: '200px'
}
const handleClick = () => {
fileInputRef.current.click();
};
@@ -27,24 +59,13 @@ const UploadSystem = ({
setFieldValue(fieldname, null);
};
const isDocumentFormat = (fileType) => {
const documentFormats = [
"application/pdf",
"application/msword",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.ms-excel",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
];
return documentFormats.includes(fileType);
};
return (
<Box sx={{width: imageSize[0], my: 2}}>
<Box sx={{my: 2}}>
<Typography
margin={2}
margin={1}
sx={{
fontWeight: 500,
fontSize: "1rem",
fontSize: "0.9rem",
color: "#a19d9d",
}}
textAlign="center"
@@ -53,64 +74,54 @@ const UploadSystem = ({
</Typography>
{selectedImage === "/images/upload-image.svg" ? (
<Image
width={imageSize[0]}
height={imageSize[1]}
src={selectedImage}
priority
alt={imageAlt}
width={0}
height={0}
onClick={handleClick}
style={{
cursor: "pointer",
objectFit: "contain",
border: "1px dashed #e1e1e1",
borderBottom: "unset",
padding: "5px",
}}
style={uploadBoxStyle}
/>
) : fileType && fileType.startsWith("image/") ? (
<Image
width={imageSize[0]}
height={imageSize[1]}
src={selectedImage}
priority
alt={imageAlt}
width={0}
height={0}
onClick={handleClick}
style={{
cursor: "pointer",
objectFit: "contain",
border: "1px dashed #e1e1e1",
borderBottom: "unset",
padding: "5px",
}}
style={uploadBoxStyle}
/>
) : (
fileType &&
isDocumentFormat(fileType) && (
<Box
<Box
sx={{
display: "flex",
border: "1px dashed #e1e1e1",
cursor: "pointer",
borderRadius: "5px",
alignItems: "center",
justifyContent: "center",
width: "200px",
height: "200px"
}}
onClick={handleClick}
>
<Typography
margin={2}
sx={{
width: imageSize[0],
height: imageSize[1],
fontWeight: 600,
fontSize: "1rem",
color: "#a19d9d",
textAlign: "center",
display: "flex",
border: "1px dashed #e1e1e1",
borderBottom: "unset",
alignItems: "center",
justifyContent: "center",
justifyContent: "end",
overflow: "hidden"
}}
onClick={handleClick}
textAlign="center"
>
<Typography
margin={2}
sx={{
fontWeight: 600,
fontSize: "1rem",
color: "#a19d9d",
}}
textAlign="center"
>
{fileName}
</Typography>
</Box>
)
{fileName}
</Typography>
</Box>
)}
<TextField
@@ -118,10 +129,10 @@ const UploadSystem = ({
type="file"
accept="image/*"
style={{display: "none"}}
onChange={handleUploadChange}
onChange={(e) => handleUploadChange(e)}
inputRef={fileInputRef}
/>
<Button
{enableDelete ? <Button
sx={{
width: "100%",
borderTopLeftRadius: "unset",
@@ -134,42 +145,10 @@ const UploadSystem = ({
onClick={handleDeleteImage}
>
{t("delete")}
</Button>
</Button> : ""}
<FormHelperText sx={{color: "#d32f2f"}}>{helperText}</FormHelperText>
</Box>
);
};
export default UploadSystem;
//////****** usage document ******/////////
// 1.) use <UploadSystem /> component inside your page
// 2.) list of props that you need to send is down below
// 2.1) selectedImage // this value come from useState that you need to write on your own component
// 2.2) handleUploadChange // use on your own component (explain below more) you should set it to {(e) =>handleUploadChange[your special name]](e, props.setFieldValue)}
// 2.3) setFieldValue // for setting value of file to null when user click on Delete button. you should set it to {props.setFieldValue}
// 2.4) fieldname name that file field has on your formik initialValues.
// 2.5) fileType // type of your file shows its document image etc...
// 2.6) imageAlt // alt of your image.
// 2.7) imageSize // this is size of your image box and value type is like that imageSize={ [width , height] }.
// 2.9) setselectedImage // for making box empty when user click on delete button (explain below more)
// const [selectedImage[your special name]], setSelectedImage[your special name]] = useState(
// "/images/upload-image.svg" // default image
// );
// const [fileType[your special name], setFileType[your special name]] = useState(null);
// const [fileName[your special name], setFileName[your special name]] = useState(null);
// const handleUploadChange[your special name]] = (event, setFieldValue) => {
// const uploadedFile = event.target?.files?.[0];
// const fileType = event.target.files[0].type;
// const fileName = event.target.files[0].name;
// if (uploadedFile) { // just check file is uploaded or not
// setSelectedImage[your special name]](URL.createObjectURL(uploadedFile)); // set image value
// setFileType[your special name]](fileType); // set fileType
// setFileName[your special name]](fileName); // set fileName
// setFieldValue("[your special name]]_img", uploadedFile); set field value for sending data (this automaticaly append value in initial state)
// }
// };
//////****** end usage document ******/////////

2
src/core/data/apiRoutes.js
View File

@@ -8,6 +8,8 @@ export const REGISTER = BASE_URL + "/register";
export const USER_INFO = BASE_URL + "/profile/info";
export const SEND_LOAN_REQUEST_NAVGAN = BASE_URL + "/navgan/loan/store";
export const SEND_LOAN_REQUEST_WELFARE = BASE_URL + "/refahi/loan/store";
export const UPDATE_LOAN_REQUEST_WELFARE = BASE_URL + "/refahi/loan/update/";
export const DETAILS_LOAN_REQUEST_WELFARE = BASE_URL + "/refahi/loan/details/";
export const GET_PROVINCE_LIST = BASE_URL + "/provinces";

2
src/layouts/dashboardLayouts/breadcrumbs/index.jsx
View File

@@ -19,7 +19,7 @@ const BreadCrumbs = (props) => {
const RouterArray = pathname.split("/").filter((segment) => segment !== "");
// every part of your router you want to remove add it to this array
const segmentsToRemove = ["navgan", "refahi"];
const segmentsToRemove = ["navgan", "refahi", "[id]"];
segmentsToRemove.forEach((segmentToRemove) => {
const index = RouterArray.indexOf(segmentToRemove);

2
src/pages/dashboard/navgan/add-request-loan/index.jsx
View File

@@ -4,7 +4,7 @@ import UserTypeMiddleware from "@/middlewares/UserType";
import LoanRequestComponent from "@/components/dashboard/navgan/add-request-loan";
const user_type = 1;
export default function LoanRequest() {
export default function AddLoanRequest() {
return (
<WithAuthMiddleware>
<UserTypeMiddleware user_type={user_type}>

2
src/pages/dashboard/navgan/followUp-loan/index.jsx
View File

@@ -4,7 +4,7 @@ import UserTypeMiddleware from "@/middlewares/UserType";
import LoanFollowUpComponent from "@/components/dashboard/navgan/followUp-loan";
const user_type = 1;
export default function LoanRequest() {
export default function FollowUpLoan() {
return (
<WithAuthMiddleware>
<UserTypeMiddleware user_type={user_type}>

2
src/pages/dashboard/refahi/add-request-loan/index.jsx
View File

@@ -4,7 +4,7 @@ import UserTypeMiddleware from "@/middlewares/UserType";
import LoanRequestComponent from "@/components/dashboard/refahi/add-request-loan";
const user_type = 2;
export default function LoanRequest() {
export default function AddLoanRequest() {
return (
<WithAuthMiddleware>
<UserTypeMiddleware user_type={user_type}>

26
src/pages/dashboard/refahi/edit-request-loan/[id].jsx Normal file
View File

@@ -0,0 +1,26 @@
import WithAuthMiddleware from "@/middlewares/WithAuth";
import {parse} from "next-useragent";
import UserTypeMiddleware from "@/middlewares/UserType";
import LoanRequestComponent from "@/components/dashboard/refahi/edit-request-loan";
const user_type = 2;
export default function EditLoanRequest() {
return (
<WithAuthMiddleware>
<UserTypeMiddleware user_type={user_type}>
<LoanRequestComponent/>
</UserTypeMiddleware>
</WithAuthMiddleware>
);
}
export async function getServerSideProps({req, locale}) {
const {isBot} = parse(req.headers["user-agent"]);
return {
props: {
messages: (await import(`&/locales/${locale}/app.json`)).default,
title: "EditLoanRequest.edit_loan_request_page",
isBot,
},
};
}

4
src/pages/dashboard/refahi/followUp-loan/index.jsx
View File

@@ -4,7 +4,7 @@ import UserTypeMiddleware from "@/middlewares/UserType";
import LoanFollowUpComponent from "@/components/dashboard/refahi/followUp-loan";
const user_type = 2;
export default function LoanRequest() {
export default function FollowUpLoan() {
return (
<WithAuthMiddleware>
<UserTypeMiddleware user_type={user_type}>
@@ -19,7 +19,7 @@ export async function getServerSideProps({req, locale}) {
return {
props: {
messages: (await import(`&/locales/${locale}/app.json`)).default,
title: "LoanRequest.loan_request_page",
title: "LoanFollowUp.loan_follow_up_page",
isBot,
},
};