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

add form of loan request and edit form of it and debuging and cleaning uploadsystem

Browse Source
This commit is contained in:
Mohammad Jalali
2023-08-27 10:19:23 +03:30
parent fd1a6bcf2e
commit 9098881ceb
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,
},
};