Merge branch 'feature/make_loan_request_page' into 'develop'

Feature/make loan request page

See merge request witel3/loan-facilities-user!2

public/locales/fa/app.json

@@ -5,6 +5,7 @@
   "first_page": "خوش آمدید",
   "login": "ورود",
   "login_navy": "ورود اعضای ناوگان",
+  "register_navy": "ثبت نام اعضای ناوگان",
   "login_welfare_services": "ورود اعضای خدمات رفاهی",
   "user_welfare_services": "خدمات رفاهی",
   "user_navy": "ناوگان",
@@ -34,10 +35,8 @@
     "typography_routing_dashbaord_page": "داشبورد..."
   },
   "LoginPage": {
-    "text_field_user_name": "نام کاربری",
+    "text_field_phone_number": "شماره تلفن",
-    "text_field_enter_your_username": "نام کاربری خود را وارد کنید",
+    "text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید",
-    "text_field_password": "رمز عبور",
-    "text_field_enter_your_password": "رمز عبور خود را وارد کنید",
     "button_submit": "ورود",
     "link_routing_back_to": "بازگشت به",
     "link_routing_previuos_page": "صفحه قبل",
@@ -45,7 +44,45 @@
     "error_message_required": "اجباری!",
     "button_make_account": "ایجاد حساب"
   },
-  "dashboard": {
+  "RegisterPage": {
+    "link_routing_back_to": "بازگشت به",
+    "link_routing_login_navy": "صفحه ورود",
+    "text_field_phone_number": "شماره تلفن",
+    "text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید",
+    "text_field_national_id": "کد ملی",
+    "text_field_enter_your_national_id": "کد ملی خود را وارد کنید",
+    "text_field_navgan_id": "شماره ناوگان",
+    "text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید",
+    "error_message_required": "اجباری!",
+    "button_request_verification": "دریافت کد یکبارمصرف"
+  },
+  "Dashboard": {
     "dashboard_page": "داشبورد"
+  },
+  "LoanFollowUp": {
+    "loan_follow_up_page": "پیگیری درخواست"
+  },
+  "LoanRequest": {
+    "loan_request_page": "فرم درخواست وام",
+    "error_message_required": "اجباری!",
+    "text_field_phone_number": "شماره تلفن",
+    "text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید",
+    "text_field_first_name": "نام",
+    "text_field_enter_your_first_name": "نام خود را وارد کنید",
+    "text_field_last_name": "نام خانوادگی",
+    "text_field_enter_your_last_name": "نام خانوادگی خود را وارد کنید",
+    "text_field_vehicle_type": "نام وسیله نقلیه",
+    "text_field_enter_your_vehicle_type": "نام وسیله نقلیه خود را وارد کنید",
+    "text_field_province": "استان",
+    "text_field_enter_your_province": "استان خود را وارد کنید",
+    "text_field_navgan_id": "شماره ناوگان",
+    "text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید",
+    "text_field_national_code": "کد ملی",
+    "text_field_enter_your_national_code": "کد ملی خود را وارد کنید",
+    "text_field_birth_certificate_id": "شماره شناسنامه",
+    "text_field_enter_your_birth_certificate_id": "شماره شناسنامه خود را وارد کنید",
+    "text_field_plate_number": "شماره پلاک",
+    "text_field_enter_your_plate_number": "شماره پلاک خود را وارد کنید",
+    "button_submit": "ثبت درخواست"
   }
 }

src/components/dashboard/loan-request/index.jsx

@@ -1,16 +1,453 @@
+import StyledForm from "@/core/components/StyledForm";
 import CenterLayout from "@/layouts/CenterLayout";
 import DashboardLayouts from "@/layouts/dashboardLayouts";
 import useUser from "@/lib/app/hooks/useUser";
+import { Box, Button, Stack, TextField } from "@mui/material";
+import { Field, Formik } from "formik";
 import { useTranslations } from "next-intl";
-import React from "react";
+import Image from "next/image";
+import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
+import * as Yup from "yup";
 
 const DashboardLoanRequestComponent = () => {
   const t = useTranslations();
   const { token } = useUser();
+
+  const initialValues = {
+    first_name: "",
+    last_name: "",
+    phone_number: "",
+    vehicle_type: "",
+    plate_number: "",
+    province: "",
+    navgan_id: "",
+    national_code: "",
+    birth_certificate_id: "",
+    national_card_img: "",
+    birth_certificate_img: "",
+  };
+
+  const validationSchema = Yup.object().shape({
+    first_name: Yup.string().required(t("LoanRequest.error_message_required")),
+    last_name: Yup.string().required(t("LoanRequest.error_message_required")),
+    phone_number: Yup.string().required(
+      t("LoanRequest.error_message_required")
+    ),
+    vehicle_type: Yup.string().required(
+      t("LoanRequest.error_message_required")
+    ),
+    plate_number: Yup.string().required(
+      t("LoanRequest.error_message_required")
+    ),
+    province: Yup.string().required(t("LoanRequest.error_message_required")),
+    navgan_id: Yup.string().required(t("LoanRequest.error_message_required")),
+    national_code: Yup.string().required(
+      t("LoanRequest.error_message_required")
+    ),
+    birth_certificate_id: Yup.string().required(
+      t("LoanRequest.error_message_required")
+    ),
+  });
+
   return (
     <DashboardLayouts>
       <CenterLayout>
-        <p>نکنه وامم میخوای؟؟؟</p>
+        <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="first_name"
+                      variant="outlined"
+                      size="small"
+                      InputProps={{
+                        readOnly: true,
+                      }}
+                      label={t("LoanRequest.text_field_first_name")}
+                      placeholder={t(
+                        "LoanRequest.text_field_enter_your_first_name"
+                      )}
+                      type={"text"}
+                      error={
+                        props.touched.first_name && props.errors.first_name
+                          ? true
+                          : false
+                      }
+                      fullWidth
+                      helperText={
+                        props.touched.first_name
+                          ? props.errors.first_name
+                          : null
+                      }
+                    />
+                  </Box>
+                  <Box
+                    sx={{
+                      mx: { xs: 0, sm: 2 },
+                      my: 2,
+                      width: "100%",
+                    }}
+                  >
+                    <Field
+                      as={TextField}
+                      sx={{ width: "100%" }}
+                      name="last_name"
+                      variant="outlined"
+                      size="small"
+                      InputProps={{
+                        readOnly: true,
+                      }}
+                      label={t("LoanRequest.text_field_last_name")}
+                      placeholder={t(
+                        "LoanRequest.text_field_enter_your_last_name"
+                      )}
+                      type={"text"}
+                      error={
+                        props.touched.last_name && props.errors.last_name
+                          ? true
+                          : false
+                      }
+                      fullWidth
+                      helperText={
+                        props.touched.last_name ? props.errors.last_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"
+                      InputProps={{
+                        readOnly: true,
+                      }}
+                      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
+                          ? true
+                          : false
+                      }
+                      fullWidth
+                      helperText={
+                        props.touched.phone_number
+                          ? props.errors.phone_number
+                          : 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="vehicle_type"
+                      variant="outlined"
+                      size="small"
+                      InputProps={{
+                        readOnly: true,
+                      }}
+                      label={t("LoanRequest.text_field_vehicle_type")}
+                      placeholder={t(
+                        "LoanRequest.text_field_enter_your_vehicle_type"
+                      )}
+                      type={"text"}
+                      error={
+                        props.touched.vehicle_type && props.errors.vehicle_type
+                          ? true
+                          : false
+                      }
+                      fullWidth
+                      helperText={
+                        props.touched.vehicle_type
+                          ? props.errors.vehicle_type
+                          : null
+                      }
+                    />
+                  </Box>
+                  <Box
+                    sx={{
+                      mx: { xs: 0, sm: 2 },
+                      my: 2,
+                      width: "100%",
+                    }}
+                  >
+                    <Field
+                      as={TextField}
+                      sx={{ width: "100%" }}
+                      name="plate_number"
+                      variant="outlined"
+                      size="small"
+                      InputProps={{
+                        readOnly: true,
+                      }}
+                      label={t("LoanRequest.text_field_plate_number")}
+                      placeholder={t(
+                        "LoanRequest.text_field_enter_your_plate_number"
+                      )}
+                      type={"text"}
+                      error={
+                        props.touched.plate_number && props.errors.plate_number
+                          ? true
+                          : false
+                      }
+                      fullWidth
+                      helperText={
+                        props.touched.plate_number
+                          ? props.errors.plate_number
+                          : null
+                      }
+                    />
+                  </Box>
+                  <Box
+                    sx={{
+                      mx: { xs: 0, sm: 2 },
+                      my: 2,
+                      width: "100%",
+                    }}
+                  >
+                    <Field
+                      as={TextField}
+                      sx={{ width: "100%" }}
+                      name="province"
+                      variant="outlined"
+                      size="small"
+                      InputProps={{
+                        readOnly: true,
+                      }}
+                      label={t("LoanRequest.text_field_province")}
+                      placeholder={t(
+                        "LoanRequest.text_field_enter_your_province"
+                      )}
+                      type={"text"}
+                      error={
+                        props.touched.province && props.errors.province
+                          ? true
+                          : false
+                      }
+                      fullWidth
+                      helperText={
+                        props.touched.province ? props.errors.province : 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="navgan_id"
+                      variant="outlined"
+                      size="small"
+                      InputProps={{
+                        readOnly: true,
+                      }}
+                      label={t("LoanRequest.text_field_navgan_id")}
+                      placeholder={t(
+                        "LoanRequest.text_field_enter_your_navgan_id"
+                      )}
+                      type={"text"}
+                      error={
+                        props.touched.navgan_id && props.errors.navgan_id
+                          ? true
+                          : false
+                      }
+                      fullWidth
+                      helperText={
+                        props.touched.navgan_id ? props.errors.navgan_id : null
+                      }
+                    />
+                  </Box>
+                  <Box
+                    sx={{
+                      mx: { xs: 0, sm: 2 },
+                      my: 2,
+                      width: "100%",
+                    }}
+                  >
+                    <Field
+                      as={TextField}
+                      sx={{ width: "100%" }}
+                      name="national_code"
+                      variant="outlined"
+                      size="small"
+                      InputProps={{
+                        readOnly: true,
+                      }}
+                      label={t("LoanRequest.text_field_national_code")}
+                      placeholder={t(
+                        "LoanRequest.text_field_enter_your_national_code"
+                      )}
+                      type={"text"}
+                      error={
+                        props.touched.national_code &&
+                        props.errors.national_code
+                          ? true
+                          : false
+                      }
+                      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_certificate_id"
+                      variant="outlined"
+                      size="small"
+                      InputProps={{
+                        readOnly: true,
+                      }}
+                      label={t("LoanRequest.text_field_birth_certificate_id")}
+                      placeholder={t(
+                        "LoanRequest.text_field_enter_your_birth_certificate_id"
+                      )}
+                      type={"text"}
+                      error={
+                        props.touched.birth_certificate_id &&
+                        props.errors.birth_certificate_id
+                          ? true
+                          : false
+                      }
+                      fullWidth
+                      helperText={
+                        props.touched.birth_certificate_id
+                          ? props.errors.birth_certificate_id
+                          : null
+                      }
+                    />
+                  </Box>
+                </Box>
+                <Box
+                  sx={{
+                    display: "flex",
+                    flexDirection: { xs: "column", sm: "row" },
+                    alignItems: "center",
+                    justifyContent: "space-around",
+                    width: "100%",
+                  }}
+                >
+                  <Box>
+                    <Image
+                      width={300}
+                      height={300}
+                      src="/images/login.svg"
+                      alt={t("app_name")}
+                    />
+                  </Box>
+                  <Box>
+                    <Image
+                      width={300}
+                      height={300}
+                      src="/images/login.svg"
+                      alt={t("app_name")}
+                    />
+                  </Box>
+                </Box>
+                <Box
+                  sx={{
+                    display: "flex",
+                    flexDirection: { xs: "column", sm: "row" },
+                    alignItems: "center",
+                    mx: "auto",
+                    width: { xs: "100%", sm: "30%", md: "25%" },
+                  }}
+                >
+                  <Button
+                    fullWidth
+                    type="submit"
+                    variant="contained"
+                    size="large"
+                    endIcon={<DataSaverOnIcon />}
+                    disabled={props.isSubmitting ? true : false}
+                  >
+                    {t("LoanRequest.button_submit")}
+                  </Button>
+                </Box>
+              </StyledForm>
+            </Stack>
+          )}
+        </Formik>
       </CenterLayout>
     </DashboardLayouts>
   );

src/components/first/index.jsx

@@ -4,7 +4,7 @@ import StyledImage from "@/core/components/StyledImage";
 import CenterLayout from "@/layouts/CenterLayout";
 import FullPageLayout from "@/layouts/FullPageLayout";
 import useUser from "@/lib/app/hooks/useUser";
-import { Box, Button, Divider, Typography } from "@mui/material";
+import { Box, Button, Grid, Typography } from "@mui/material";
 import { useTranslations } from "next-intl";
 
 const FirstComponent = () => {
@@ -34,28 +34,42 @@ const FirstComponent = () => {
             {t("dashboard")}
           </Button>
         ) : (
-          <Box sx={{ display: "flex" }}>
+          <Box>
-            <Button
+            <Grid
-              sx={{ mx: 2 }}
+              container
-              variant="contained"
+              rowSpacing={{ xs: 1, sm: 0 }}
-              component={NextLinkComposed}
+              sx={{
-              to={{
+                flexDirection: { xs: "column", sm: "row" },
-                pathname: "/login-navy",
+                alignItems: "center",
               }}
             >
-              {t("login_navy")}
+              <Grid item xs={12} sm={6} sx={{ px: { xs: 0, sm: 1 } }}>
-            </Button>
+                <Button
-            <Divider orientation="vertical" flexItem />
+                  sx={{ whiteSpace: "nowrap" }}
-            <Button
+                  variant="contained"
-              sx={{ mx: 2 }}
+                  size="large"
-              variant="contained"
+                  component={NextLinkComposed}
-              component={NextLinkComposed}
+                  to={{
-              to={{
+                    pathname: "/login-navy",
-                pathname: "/login-welfare-services",
+                  }}
-              }}
+                >
-            >
+                  {t("login_navy")}
-              {t("login_welfare_services")}
+                </Button>
-            </Button>
+              </Grid>
+              <Grid item xs={12} sm={6} sx={{ px: { xs: 0, sm: 1 } }}>
+                <Button
+                  sx={{ whiteSpace: "nowrap" }}
+                  variant="contained"
+                  size="large"
+                  component={NextLinkComposed}
+                  to={{
+                    pathname: "/login-welfare-services",
+                  }}
+                >
+                  {t("login_welfare_services")}
+                </Button>
+              </Grid>
+            </Grid>
           </Box>
         )}
       </CenterLayout>

src/components/login-navy/index.jsx

@@ -1,6 +1,5 @@
 import LinkRouting from "@/core/components/LinkRouting";
 // import Notifications from "@/core/components/notifications";
-import PasswordField from "@/core/components/PasswordField";
 import StyledForm from "@/core/components/StyledForm";
 // import { GET_USER_TOKEN } from "@/core/data/apiRoutes";
 import CenterLayout from "@/layouts/CenterLayout";
@@ -13,6 +12,7 @@ import {
   Box,
   Button,
   Container,
+  Grid,
   Paper,
   Stack,
   TextField,
@@ -35,27 +35,24 @@ const LoginComponent = () => {
   const backUrlDecodedPath = searchParams.get("back_url");
 
   // formik properties
-//   const handleSubmit = async (values, props) => {
+  //   const handleSubmit = async (values, props) => {
-//     await axios
+  //     await axios
-//       .post(GET_USER_TOKEN, {
+  //       .post(GET_USER_TOKEN, {
-//         username: values.username,
+  //         phone_number: values.phone_number,
-//         password: values.password,
+  //       })
-//       })
+  //       .then(function (response) {
-//       .then(function (response) {
+  //         setToken(response.data.token);
-//         setToken(response.data.token);
+  //       })
-//       })
+  //       .catch(function (error) {
-//       .catch(function (error) {
+  //         Notifications(directionApp, error.response, t);
-//         Notifications(directionApp, error.response, t);
+  //         props.setSubmitting(false);
-//         props.setSubmitting(false);
+  //       });
-//       });
+  //   };
-//   };
   const initialValues = {
-    username: "",
+    phone_number: "",
-    password: "",
   };
   const validationSchema = Yup.object().shape({
-    username: Yup.string().required(t("LoginPage.error_message_required")),
+    phone_number: Yup.string().required(t("LoginPage.error_message_required")),
-    password: Yup.string().required(t("LoginPage.error_message_required")),
   });
 
   return (
@@ -82,66 +79,60 @@ const LoginComponent = () => {
                     <Stack spacing={3} sx={{ p: 2 }}>
                       <Field
                         as={TextField}
-                        name="username"
+                        name="phone_number"
                         variant="outlined"
-                        label={t("LoginPage.text_field_user_name")}
+                        label={t("LoginPage.text_field_phone_number")}
                         placeholder={t(
-                          "LoginPage.text_field_enter_your_username"
+                          "LoginPage.text_field_enter_your_phone_number"
                         )}
                         type={"text"}
                         error={
-                          props.touched.username && props.errors.username
+                          props.touched.phone_number &&
+                          props.errors.phone_number
                             ? true
                             : false
                         }
                         fullWidth
                         helperText={
-                          props.touched.username ? props.errors.username : null
+                          props.touched.phone_number
+                            ? props.errors.phone_number
+                            : null
                         }
                       />
-                      <PasswordField
+                      <Grid
-                        name="password"
+                        container
-                        label={t("LoginPage.text_field_password")}
+                        rowSpacing={{ xs: 1, sm: 0 }}
-                        error={
-                          props.touched.password && props.errors.password
-                            ? true
-                            : false
-                        }
-                        helperText={
-                          props.touched.password ? props.errors.password : null
-                        }
-                        placeholder={t(
-                          "LoginPage.text_field_enter_your_password"
-                        )}
-                      />
-                      <Box
                         sx={{
-                          display: "flex",
+                          flexDirection: { xs: "column-reverse", sm: "row" },
-                          alignItems: "center",
-                          justifyContent: "space-between",
                         }}
                       >
-                        <LinkRouting href={"/register-navy"}>
+                        <Grid item xs={12} sm={6} sx={{ pr: { xs: 0, sm: 1 } }}>
+                          <LinkRouting href={"/register-navy"}>
+                            <Button
+                              fullWidth
+                              type="submit"
+                              variant="outlined"
+                              size="large"
+                              endIcon={<PersonAddIcon />}
+                              disabled={props.isSubmitting ? true : false}
+                            >
+                              {t("LoginPage.button_make_account")}
+                            </Button>
+                          </LinkRouting>
+                        </Grid>
+                        <Grid item xs={12} sm={6} sx={{ pl: { xs: 0, sm: 1 } }}>
                           <Button
+                            fullWidth
                             type="submit"
-                            variant="outlined"
+                            variant="contained"
-                            size="small"
+                            size="large"
-                            endIcon={<PersonAddIcon />}
+                            endIcon={<LoginIcon />}
                             disabled={props.isSubmitting ? true : false}
                           >
+                            {t("LoginPage.button_submit")}
                           </Button>
-                        </LinkRouting>
+                        </Grid>
-                          {t("LoginPage.button_make_account")}
+                      </Grid>
-                        <Button
-                          type="submit"
-                          variant="contained"
-                          size="medium"
-                          endIcon={<LoginIcon />}
-                          disabled={props.isSubmitting ? true : false}
-                        >
-                          {t("LoginPage.button_submit")}
-                        </Button>
-                      </Box>
                     </Stack>
                   </StyledForm>
                 </Stack>

src/components/login-welfare-services/index.jsx

@@ -1,6 +1,5 @@
 import LinkRouting from "@/core/components/LinkRouting";
 // import Notifications from "@/core/components/notifications";
-import PasswordField from "@/core/components/PasswordField";
 import StyledForm from "@/core/components/StyledForm";
 // import { GET_USER_TOKEN } from "@/core/data/apiRoutes";
 import CenterLayout from "@/layouts/CenterLayout";
@@ -13,6 +12,7 @@ import {
   Box,
   Button,
   Container,
+  Grid,
   Paper,
   Stack,
   TextField,
@@ -38,8 +38,7 @@ const LoginComponent = () => {
   //   const handleSubmit = async (values, props) => {
   //     await axios
   //       .post(GET_USER_TOKEN, {
-  //         username: values.username,
+  //         phone_number: values.phone_number
-  //         password: values.password,
   //       })
   //       .then(function (response) {
   //         setToken(response.data.token);
@@ -50,12 +49,10 @@ const LoginComponent = () => {
   //       });
   //   };
   const initialValues = {
-    username: "",
+    phone_number: ""
-    password: "",
   };
   const validationSchema = Yup.object().shape({
-    username: Yup.string().required(t("LoginPage.error_message_required")),
+    phone_number: Yup.string().required(t("LoginPage.error_message_required"))
-    password: Yup.string().required(t("LoginPage.error_message_required")),
   });
 
   return (
@@ -82,66 +79,57 @@ const LoginComponent = () => {
                     <Stack spacing={3} sx={{ p: 2 }}>
                       <Field
                         as={TextField}
-                        name="username"
+                        name="phone_number"
                         variant="outlined"
-                        label={t("LoginPage.text_field_user_name")}
+                        label={t("LoginPage.text_field_phone_number")}
                         placeholder={t(
-                          "LoginPage.text_field_enter_your_username"
+                          "LoginPage.text_field_enter_your_phone_number"
                         )}
                         type={"text"}
                         error={
-                          props.touched.username && props.errors.username
+                          props.touched.phone_number && props.errors.phone_number
                             ? true
                             : false
                         }
                         fullWidth
                         helperText={
-                          props.touched.username ? props.errors.username : null
+                          props.touched.phone_number ? props.errors.phone_number : null
                         }
                       />
-                      <PasswordField
+                      <Grid
-                        name="password"
+                        container
-                        label={t("LoginPage.text_field_password")}
+                        rowSpacing={{ xs: 1, sm: 0 }}
-                        error={
-                          props.touched.password && props.errors.password
-                            ? true
-                            : false
-                        }
-                        helperText={
-                          props.touched.password ? props.errors.password : null
-                        }
-                        placeholder={t(
-                          "LoginPage.text_field_enter_your_password"
-                        )}
-                      />
-                      <Box
                         sx={{
-                          display: "flex",
+                          flexDirection: { xs: "column-reverse", sm: "row" },
-                          alignItems: "center",
-                          justifyContent: "space-between",
                         }}
                       >
-                        <LinkRouting href={"/register-welfare-services"}>
+                        <Grid item xs={12} sm={6} sx={{ pr: { xs: 0, sm: 1 } }}>
+                          <LinkRouting href={"/register-navy"}>
+                            <Button
+                              fullWidth
+                              type="submit"
+                              variant="outlined"
+                              size="large"
+                              endIcon={<PersonAddIcon />}
+                              disabled={props.isSubmitting ? true : false}
+                            >
+                              {t("LoginPage.button_make_account")}
+                            </Button>
+                          </LinkRouting>
+                        </Grid>
+                        <Grid item xs={12} sm={6} sx={{ pl: { xs: 0, sm: 1 } }}>
                           <Button
+                            fullWidth
                             type="submit"
-                            variant="outlined"
+                            variant="contained"
-                            size="small"
+                            size="large"
-                            endIcon={<PersonAddIcon />}
+                            endIcon={<LoginIcon />}
                             disabled={props.isSubmitting ? true : false}
                           >
-                            {t("LoginPage.button_make_account")}
+                            {t("LoginPage.button_submit")}
                           </Button>
-                        </LinkRouting>
+                        </Grid>
-                        <Button
+                      </Grid>
-                          type="submit"
-                          variant="contained"
-                          size="medium"
-                          endIcon={<LoginIcon />}
-                          disabled={props.isSubmitting ? true : false}
-                        >
-                          {t("LoginPage.button_submit")}
-                        </Button>
-                      </Box>
                     </Stack>
                   </StyledForm>
                 </Stack>

src/components/register-navy/index.jsx

@@ -0,0 +1,191 @@
+import StyledForm from "@/core/components/StyledForm";
+import {
+  Box,
+  Button,
+  Container,
+  Paper,
+  Stack,
+  Typography,
+  TextField,
+} from "@mui/material";
+import { Field, Formik } from "formik";
+import Image from "next/image";
+import FingerprintIcon from "@mui/icons-material/Fingerprint";
+import FullPageLayout from "@/layouts/FullPageLayout";
+import CenterLayout from "@/layouts/CenterLayout";
+import { useTranslations } from "next-intl";
+import * as Yup from "yup";
+import LinkRouting from "@/core/components/LinkRouting";
+import { useSearchParams } from "next/navigation";
+import useDirection from "@/lib/app/hooks/useDirection";
+import useUser from "@/lib/app/hooks/useUser";
+// import { GET_USER_TOKEN } from "@/core/data/apiRoutes";
+// import axios from "axios";
+
+const RegisterNavyComponent = () => {
+  const t = useTranslations();
+
+  const { directionApp } = useDirection();
+  const { setToken } = useUser();
+
+  const searchParams = useSearchParams();
+  const backUrlDecodedPath = searchParams.get("back_url");
+
+  const initialValues = {
+    type_id: "1",
+    phone_number: "",
+    national_id: "",
+    navgan_id: "",
+  };
+  const validationSchema = Yup.object().shape({
+    phone_number: Yup.string().required(
+      t("RegisterPage.error_message_required")
+    ),
+    national_id: Yup.string().required(
+      t("RegisterPage.error_message_required")
+    ),
+    navgan_id: Yup.string().required(t("RegisterPage.error_message_required")),
+  });
+  //   const handleSubmit = async (values, props) => {
+  //     await axios
+  //       .post(GET_USER_TOKEN, {
+  //         type_id: values.type_id,
+  //         national_id: values.national_id,
+  //         navgan_id: values.navgan_id,
+  //         phone_number: values.phone_number,
+  //       })
+  //       .then(function (response) {
+  //         setToken(response.data.token);
+  //       })
+  //       .catch(function (error) {
+  //         Notifications(directionApp, error.response, t);
+  //         props.setSubmitting(false);
+  //       });
+  //   };
+
+  return (
+    <FullPageLayout sx={{ p: 1 }}>
+      <CenterLayout>
+        <Container maxWidth="sm">
+          <Paper elevation={0}>
+            <Formik
+              initialValues={initialValues}
+              //   onSubmit={handleSubmit}
+              validationSchema={validationSchema}
+            >
+              {(props) => (
+                <Stack spacing={2} sx={{ p: 2 }}>
+                  <Box
+                    sx={{ position: "relative", width: "100%", height: 200 }}
+                  >
+                    <Image
+                      fill
+                      src="/images/register.svg"
+                      alt={t("app_name")}
+                    />
+                  </Box>
+                  <Typography margin={2} variant="h4" textAlign="center">
+                    {t("register_navy")}
+                  </Typography>
+                  <StyledForm sx={{ width: "100%" }}>
+                    <Stack spacing={3} sx={{ p: 2 }}>
+                      <Field
+                        as={TextField}
+                        name="phone_number"
+                        variant="outlined"
+                        label={t("RegisterPage.text_field_phone_number")}
+                        placeholder={t(
+                          "RegisterPage.text_field_enter_your_phone_number"
+                        )}
+                        type={"text"}
+                        error={
+                          props.touched.phone_number &&
+                          props.errors.phone_number
+                            ? true
+                            : false
+                        }
+                        fullWidth
+                        helperText={
+                          props.touched.phone_number
+                            ? props.errors.phone_number
+                            : null
+                        }
+                      />
+                      <Field
+                        as={TextField}
+                        name="national_id"
+                        variant="outlined"
+                        label={t("RegisterPage.text_field_national_id")}
+                        placeholder={t(
+                          "RegisterPage.text_field_enter_your_national_id"
+                        )}
+                        type={"text"}
+                        error={
+                          props.touched.national_id && props.errors.national_id
+                            ? true
+                            : false
+                        }
+                        fullWidth
+                        helperText={
+                          props.touched.national_id
+                            ? props.errors.national_id
+                            : null
+                        }
+                      />
+                      <Field
+                        as={TextField}
+                        name="navgan_id"
+                        variant="outlined"
+                        label={t("RegisterPage.text_field_navgan_id")}
+                        placeholder={t(
+                          "RegisterPage.text_field_enter_your_navgan_id"
+                        )}
+                        type={"text"}
+                        error={
+                          props.touched.navgan_id && props.errors.navgan_id
+                            ? true
+                            : false
+                        }
+                        fullWidth
+                        helperText={
+                          props.touched.navgan_id
+                            ? props.errors.navgan_id
+                            : null
+                        }
+                      />
+                      <Button
+                        fullWidth
+                        type="submit"
+                        variant="contained"
+                        size="large"
+                        endIcon={<FingerprintIcon />}
+                        disabled={props.isSubmitting ? true : false}
+                      >
+                        {t("RegisterPage.button_request_verification")}
+                      </Button>
+                    </Stack>
+                  </StyledForm>
+                </Stack>
+              )}
+            </Formik>
+          </Paper>
+        </Container>
+      </CenterLayout>
+      <Stack direction="row" alignItems="center" justifyContent="center">
+        <LinkRouting
+          sx={{ margin: 2 }}
+          href={
+            backUrlDecodedPath
+              ? decodeURIComponent(backUrlDecodedPath)
+              : "/login-navy"
+          }
+        >
+          {t("RegisterPage.link_routing_back_to")}{" "}
+          {t("RegisterPage.link_routing_login_navy")}
+        </LinkRouting>
+      </Stack>
+    </FullPageLayout>
+  );
+};
+
+export default RegisterNavyComponent;

src/pages/dashboard/index.jsx

@@ -6,7 +6,7 @@ import { parse } from "next-useragent";
 export default function Dashboard() {
   return (
     <WithAuthMiddleware>
-      <TitlePage text="dashboard.dashboard_page" />
+      <TitlePage text="Dashboard.dashboard_page" />
       <DashboardFirstComponent />
     </WithAuthMiddleware>
   );

src/pages/dashboard/loan-follow-up/index.jsx

@@ -6,7 +6,7 @@ import { parse } from "next-useragent";
 export default function LoanFollowUp() {
   return (
     <WithAuthMiddleware>
-      <TitlePage text="dashboard.dashboard_page" />
+      <TitlePage text="LoanFollowUp.loan_follow_up_page" />
       <DashboardLoanFollowUpComponent />
     </WithAuthMiddleware>
   );

src/pages/dashboard/loan-request/index.jsx

@@ -6,7 +6,7 @@ import { parse } from "next-useragent";
 export default function LoanRequest() {
   return (
     <WithAuthMiddleware>
-      <TitlePage text="dashboard.dashboard_page" />
+      <TitlePage text="LoanFollowUp.loan_follow_up_page" />
       <DashboardLoanRequestComponent />
     </WithAuthMiddleware>
   );

src/pages/register-navy.jsx

@@ -1,4 +1,4 @@
-import RegisterComponent from "@/components/register-navy";
+import RegisterNavyComponent from "@/components/register-navy";
 import TitlePage from "@/core/components/TitlePage";
 import WithoutAuthMiddleware from "@/middlewares/WithoutAuth";
 import { parse } from "next-useragent";
@@ -11,7 +11,7 @@ export default function RegisterNavy() {
   return (
     <WithoutAuthMiddleware>
       <TitlePage text="Titles.title_register_navy_page" />
-      <RegisterComponent />
+      <RegisterNavyComponent />
       {directionApp === "rtl" ? <ToastContainer rtl /> : <ToastContainer ltr />}
     </WithoutAuthMiddleware>
   );