make directories and add dependencies and make structure of form

public/locales/fa/app.json

@@ -170,6 +170,28 @@
     "error_message_payan_khedmat_image": "تصویر کارت پایان خدمت خود را وارد کنید",
     "add_loan_request_permission": "اکنون امکان ثبت درخواست جدید برای شما مقدور نیست"
   },
+  "showLoan": {
+    "show_loan_page": "نمایش وام",
+    "text_field_national_code": "کد ملی",
+    "text_field_postal_code": "کد پستی",
+    "text_field_national_card_serial_num": "سریال پشت کارت ملی",
+    "text_field_address": "آدرس",
+    "text_field_birth_date": "تاریخ تولد",
+    "text_field_navgan_id": "کد ناوگان",
+    "text_field_enter_your_national_code": "کد ملی خود را وارد کنید",
+    "text_field_enter_your_postal_code": "کد پستی خود را وارد کنید",
+    "text_field_enter_your_national_card_serial_num": "سریال پشت کارت ملی خود را وارد کنید",
+    "text_field_enter_your_address": "آدرس خود را وارد کنید",
+    "text_field_enter_your_birth_date": "تاریخ تولد خود را وارد کنید",
+    "text_field_enter_your_navgan_id": "کد ناوگان خود را وارد کنید",
+    "error_message_national_code": "لطفا کد ملی خود را وارد کنید!",
+    "error_message_postal_code": "لطفا کد پستی خود را وارد کنید!",
+    "error_message_national_card_serial_num": "لطفا سریال پشت کارت ملی خود را وارد کنید!",
+    "error_message_address": "لطفا آدرس خود را وارد کنید!",
+    "error_message_birth_date": "لطفا تاریخ تولد خود را وارد کنید!",
+    "error_message_navgan_id": "لطفا کد ناوگان خود را وارد کنید!",
+    "button_submit": "ویرایش"
+  },
   "EditLoanRequest": {
     "edit_loan_request_page": "ویرایش درخواست وام"
   }

src/components/dashboard/navgan/show/form/index.jsx

@@ -0,0 +1,264 @@
+import StyledForm from "@/core/components/StyledForm";
+import {Box, Button, Stack, TextField} from "@mui/material";
+import {Field, Formik} from "formik";
+import {useTranslations} from "next-intl";
+import EditIcon from '@mui/icons-material/Edit';
+import * as Yup from "yup";
+
+const ShowLoanForm = () => {
+    const t = useTranslations();
+
+    // initial values
+    const initialValues = {
+        national_code: "0312288875",
+        postal_code: "326585475",
+        national_card_serial_num: "0312288875",
+        address: "تهران - ثنایی - مطهری ساختمان مهتاب",
+        birth_date: "10/25/44",
+        navgan_id: "14575"
+    };
+    // end initial values
+
+    // validation
+    const validationSchema = Yup.object().shape({
+        national_code: Yup.string().required(t("showLoan.error_message_national_code")),
+        postal_code: Yup.string().required(t("showLoan.error_message_postal_code")),
+        national_card_serial_num: Yup.string().required(t("showLoan.error_message_national_card_serial_num")),
+        address: Yup.string().required(t("showLoan.error_message_address")),
+        birth_date: Yup.string().required(t("showLoan.error_message_birth_date")),
+        navgan_id: Yup.string().required(t("showLoan.error_message_navgan_id")),
+    });
+    // end validation
+
+    // submit
+    const handleSubmit = async (values, props) => {
+        const formData = new FormData();
+        formData.append("national_code", values.national_code);
+        formData.append("postal_code", values.postal_code);
+        formData.append("national_card_serial_num", values.national_card_serial_num);
+        formData.append("address", values.address);
+        formData.append("birth_date", values.birth_date);
+        formData.append("navgan_id", values.navgan_id);
+    };
+    // end submit
+
+    return (
+        <Formik
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+            validationSchema={validationSchema}
+        >
+            {(props) => (
+                <Stack
+                    spacing={2}
+                    sx={{
+                        p: 1,
+                        width: "100%",
+                    }}
+                >
+                    <StyledForm sx={{width: "100%"}}>
+                        <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_code"
+                                    disabled
+                                    variant="standard"
+                                    size="small"
+                                    label={t("showLoan.text_field_national_code")}
+                                    placeholder={t("showLoan.text_field_enter_your_national_code")}
+                                    type={"text"}
+                                    error={!!(props.touched.national_code && props.errors.national_code)}
+                                    fullWidth
+                                    helperText={props.touched.national_code ? props.errors.national_code : null}
+                                />
+                            </Box>
+                            <Box
+                                sx={{
+                                    mx: {xs: 0, sm: 2},
+                                    my: 2,
+                                    width: "100%",
+                                }}
+                            >
+                                <Field
+                                    as={TextField}
+                                    sx={{width: "100%"}}
+                                    name="birth_date"
+                                    disabled
+                                    variant="standard"
+                                    size="small"
+                                    label={t("showLoan.text_field_birth_date")}
+                                    placeholder={t(
+                                        "showLoan.text_field_enter_your_birth_date"
+                                    )}
+                                    type={"text"}
+                                    error={!!(props.touched.birth_date && props.errors.birth_date)}
+                                    fullWidth
+                                    helperText={
+                                        props.touched.birth_date
+                                            ? props.errors.birth_date
+                                            : null
+                                    }
+                                />
+                            </Box>
+                            <Box
+                                sx={{
+                                    mx: {xs: 0, sm: 2},
+                                    my: 2,
+                                    width: "100%",
+                                }}
+                            >
+                                <Field
+                                    as={TextField}
+                                    sx={{width: "100%"}}
+                                    name="national_card_serial_num"
+                                    disabled
+                                    variant="standard"
+                                    size="small"
+                                    label={t("showLoan.text_field_national_card_serial_num")}
+                                    placeholder={t(
+                                        "showLoan.text_field_enter_your_national_card_serial_num"
+                                    )}
+                                    type={"text"}
+                                    error={!!(props.touched.national_card_serial_num && props.errors.national_card_serial_num)}
+                                    fullWidth
+                                    helperText={
+                                        props.touched.national_card_serial_num
+                                            ? props.errors.national_card_serial_num
+                                            : 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="address"
+                                    variant="outlined"
+                                    size="small"
+                                    label={t("showLoan.text_field_address")}
+                                    placeholder={t("showLoan.text_field_enter_your_address")}
+                                    type={"text"}
+                                    error={!!(props.touched.address && props.errors.address)}
+                                    fullWidth
+                                    helperText={props.touched.address ? props.errors.address : null}
+                                />
+                            </Box>
+                            <Box
+                                sx={{
+                                    mx: {xs: 0, sm: 2},
+                                    my: 2,
+                                    width: "100%",
+                                }}
+                            >
+                                <Field
+                                    as={TextField}
+                                    sx={{width: "100%"}}
+                                    name="postal_code"
+                                    variant="outlined"
+                                    size="small"
+                                    label={t("showLoan.text_field_postal_code")}
+                                    placeholder={t(
+                                        "showLoan.text_field_enter_your_postal_code"
+                                    )}
+                                    type={"text"}
+                                    error={!!(props.touched.postal_code && props.errors.postal_code)}
+                                    fullWidth
+                                    helperText={
+                                        props.touched.postal_code
+                                            ? props.errors.postal_code
+                                            : null
+                                    }
+                                />
+                            </Box>
+                            <Box
+                                sx={{
+                                    mx: {xs: 0, sm: 2},
+                                    my: 2,
+                                    width: "100%",
+                                }}
+                            >
+                                <Field
+                                    as={TextField}
+                                    sx={{width: "100%"}}
+                                    name="navgan_id"
+                                    variant="outlined"
+                                    size="small"
+                                    label={t("showLoan.text_field_navgan_id")}
+                                    placeholder={t(
+                                        "showLoan.text_field_enter_your_navgan_id"
+                                    )}
+                                    type={"text"}
+                                    error={!!(props.touched.navgan_id && props.errors.navgan_id)}
+                                    fullWidth
+                                    helperText={
+                                        props.touched.navgan_id
+                                            ? props.errors.navgan_id
+                                            : null
+                                    }
+                                />
+                            </Box>
+                        </Box>
+                        <Box
+                            sx={{
+                                mx: {xs: 0, sm: 2},
+                                display: "flex",
+                                justifyContent: "end"
+                            }}
+                        >
+                            <Button
+                                fullWidth
+                                type="submit"
+                                variant="contained"
+                                size="large"
+                                sx={{
+                                    mt: 2,
+                                    width: "fit-content",
+                                    display: "flex",
+                                }}
+                                endIcon={<EditIcon/>}
+                                disabled={props.isSubmitting}
+                            >
+                                {t("showLoan.button_submit")}
+                            </Button>
+                        </Box>
+                    </StyledForm>
+                </Stack>
+            )}
+        </Formik>
+    );
+};
+
+export default ShowLoanForm;

src/components/dashboard/navgan/show/index.jsx

@@ -0,0 +1,26 @@
+import {Box, Chip, Divider} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {CenterLayout, useUser} from "@witel/webapp-builder";
+import ShowLoanForm from "@/components/dashboard/navgan/show/form";
+
+const ShowLoan = () => {
+    const t = useTranslations();
+    const {user} = useUser();
+
+    return (
+        <CenterLayout>
+            <Box sx={{width: "80%", my: 2}}>
+                <Divider>
+                    <Chip
+                        label={`${t("showLoan.show_loan_page")} | ${
+                            user.type_name
+                        }`}
+                    />
+                </Divider>
+            </Box>
+            <ShowLoanForm/>
+        </CenterLayout>
+    );
+};
+
+export default ShowLoan;

src/components/login/SendToken.jsx

@@ -1,9 +1,6 @@
 import ResendToken from "@/core/components/ResendToken";
 import StyledForm from "@/core/components/StyledForm";
 import {LOGIN} from "@/core/data/apiRoutes";
-import CenterLayout from "@/layouts/CenterLayout";
-import FullPageLayout from "@/layouts/FullPageLayout";
-import useUser from "@/lib/app/hooks/useUser";
 import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
 import LoginIcon from "@mui/icons-material/Login";
 import {Box, Button, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
@@ -11,8 +8,8 @@ import {Field, Formik} from "formik";
 import {useTranslations} from "next-intl";
 import * as Yup from "yup";
 import SvgLogin from "@/core/components/svgs/SvgLogin";
-import useRequest from "@/lib/app/hooks/useRequest";
 import AutoSubmit from "@/core/components/AutoSubmit";
+import {CenterLayout, FullPageLayout, useRequest, useUser} from "@witel/webapp-builder";
 
 const SendTokenComponent = ({
                                 PhoneNumber,

src/components/login/SendUserData.jsx

@@ -1,8 +1,5 @@
-import LinkRouting from "@/core/components/LinkRouting";
 import StyledForm from "@/core/components/StyledForm";
 import {SEND_OTP_TOKEN} from "@/core/data/apiRoutes";
-import CenterLayout from "@/layouts/CenterLayout";
-import FullPageLayout from "@/layouts/FullPageLayout";
 import FingerprintIcon from "@mui/icons-material/Fingerprint";
 import PersonAddIcon from "@mui/icons-material/PersonAdd";
 import {Button, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
@@ -11,7 +8,7 @@ import {useTranslations} from "next-intl";
 import {useSearchParams} from "next/navigation";
 import * as Yup from "yup";
 import SvgLogin from "@/core/components/svgs/SvgLogin";
-import useRequest from "@/lib/app/hooks/useRequest";
+import {CenterLayout, FullPageLayout, LinkRouting, useRequest} from "@witel/webapp-builder";
 
 const SendUserDataComponent = ({
                                    setOtpToken,

src/core/components/ResendToken.jsx

@@ -1,11 +1,8 @@
-import Notifications from "@/core/components/notifications";
-import useDirection from "@/lib/app/hooks/useDirection";
 import {Button} from "@mui/material";
-import axios from "axios";
 import {useTranslations} from "next-intl";
 import {useEffect} from "react";
-import {LOGIN, SEND_OTP_TOKEN} from "../data/apiRoutes";
-import useRequest from "@/lib/app/hooks/useRequest";
+import {SEND_OTP_TOKEN} from "../data/apiRoutes";
+import {useDirection, useRequest} from "@witel/webapp-builder";
 
 const ResendToken = ({initialTimerValue, timer, setTimer, PhoneNumber, disabled}) => {
     const t = useTranslations();

src/pages/dashboard/navgan/[id]/show/index.jsx

@@ -0,0 +1,21 @@
+import {parse} from "next-useragent";
+import ShowLoan from "@/components/dashboard/navgan/show";
+
+export default function ShowLoanRequest() {
+    return (
+        <ShowLoan/>
+    );
+}
+
+export async function getServerSideProps({req, locale}) {
+    const {isBot} = parse(req.headers["user-agent"]);
+    return {
+        props: {
+            messages: (await import(`&/locales/${locale}/app.json`)).default,
+            title: "showLoan.show_loan_page",
+            isBot,
+            locale,
+            layout: {name: 'DashboardLayout'}
+        },
+    };
+}