init project

2023-07-10 11:13:28 +03:30
parent 029d939715
commit 7ac890e7e7
103 changed files with 11164 additions and 0 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+.next
+.env.local
--- a/example.env.local
+++ b/example.env.local
@@ -0,0 +1,9 @@
+NEXT_PUBLIC_API_NAME = "Loan Facilities Dashboard"
+NEXT_PUBLIC_DEFAULT_LANGUAGE = "fa"
+NEXT_PUBLIC_DEFAULT_DIRECTION = "rtl"
+
+NEXT_PUBLIC_API_URL = "http://Your IP:3000"
+
+NEXT_PUBLIC_BASE_URL = "deploy api"
+
+NODE_ENV = "development"
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"],
+      "&/*": ["./public/*"],
+    }
+  }
+}
--- a/next.config.js
+++ b/next.config.js
@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  reactStrictMode: true,
+  i18n: {
+    defaultLocale: 'fa',
+    locales: ['fa'],
+    localeDetection: false,
+  },
+}
+
+module.exports = nextConfig
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/server": "^11.10.0",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.12.0",
+    "axios": "^1.4.0",
+    "eslint": "8.36.0",
+    "formik": "^2.2.9",
+    "fs-extra": "^11.1.1",
+    "material-react-table": "^1.11.1",
+    "moment": "^2.29.4",
+    "next": "^13.3.0",
+    "next-intl": "^2.13.1",
+    "next-useragent": "^2.8.0",
+    "nextjs-progressbar": "^0.0.16",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-toastify": "^9.1.3",
+    "sass": "^1.62.0",
+    "stylis": "^4.1.3",
+    "stylis-plugin-rtl": "^2.1.1",
+    "swr": "^2.1.5",
+    "yup": "^1.1.1"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^7.6.0",
+    "eslint-config-next": "^13.3.0"
+  }
+}
--- a/public/fontiran.scss
+++ b/public/fontiran.scss
@@ -0,0 +1,96 @@
+/**
+*
+*	Name:			IRAN Sans-Serif Font
+*	Version:		5.0
+*	Author:			Moslem Ebrahimi (moslemebrahimi.com)
+*	Created on:		Dec 25, 2012
+*	Updated on:		Sep 01, 2017
+*	Website:		             http://fontiran.com
+*	Copyright:		Commercial/Proprietary Software
+--------------------------------------------------------------------------------------
+فونت های ایران سن سریف یک نرم افزار مالکیتی محسوب می شود. جهت آگاهی از قوانین استفاده از این فونت ها لطفا به وب سایت (فونت ایران دات کام) مراجعه نمایید
+--------------------------------------------------------------------------------------
+IRAN Sans-serif fonts are considered a proprietary software. To gain information about the laws regarding the use of these fonts, please visit www.fontiran.com 
+--------------------------------------------------------------------------------------
+This set of fonts are used in this project under the license: (.....)
+--------------------------------------------------------------------------------------
+*	
+**/
+@font-face {
+	font-family: IRANSans;
+	font-style: normal;
+	font-weight: 900;
+	src: url('./fonts/eot/IRANSansWeb_Black.eot');
+	src: url('./fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+		 url('./fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+		 url('./fonts/woff/IRANSansWeb_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+		 url('./fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
+}
+@font-face {
+	font-family: IRANSans;
+	font-style: normal;
+	font-weight: bold;
+	src: url('./fonts/eot/IRANSansWeb_Bold.eot');
+	src: url('./fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+		 url('./fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+		 url('./fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+		 url('./fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
+}
+@font-face {
+	font-family: IRANSans;
+	font-style: normal;
+	font-weight: 500;
+	src: url('./fonts/eot/IRANSansWeb_Medium.eot');
+	src: url('./fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+		 url('./fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+		 url('./fonts/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+		 url('./fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
+}
+@font-face {
+	font-family: IRANSans;
+	font-style: normal;
+	font-weight: 300;
+	src: url('./fonts/eot/IRANSansWeb_Light.eot');
+	src: url('./fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+		 url('./fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+		 url('./fonts/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+		 url('./fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
+}
+@font-face {
+	font-family: IRANSans;
+	font-style: normal;
+	font-weight: 200;
+	src: url('./fonts/eot/IRANSansWeb_UltraLight.eot');
+	src: url('./fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+		 url('./fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+		 url('./fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+		 url('./fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
+}
+@font-face {
+	font-family: IRANSans;
+	font-style: normal;
+	font-weight: normal;
+	src: url('./fonts/eot/IRANSansWeb.eot');
+	src: url('./fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+		 url('./fonts/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+		 url('./fonts/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+		 url('./fonts/ttf/IRANSansWeb.ttf') format('truetype');
+}
+@font-face {
+	font-family: Parastoo;
+	font-style: normal;
+	font-weight: normal;
+	src: url('./fonts/eot/Parastoo.eot');
+	src: url('./fonts/eot/Parastoo.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+		 url('./fonts/woff/Parastoo.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+		 url('./fonts/ttf/Parastoo.ttf') format('truetype');
+}
+@font-face {
+	font-family: Parastoo;
+	font-style: normal;
+	font-weight: bold;
+	src: url('./fonts/eot/Parastoo-Bold.eot');
+	src: url('./fonts/eot/Parastoo-Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+		 url('./fonts/woff/Parastoo-Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+		 url('./fonts/ttf/Parastoo-Bold.ttf') format('truetype');
+}
--- a/public/fonts/eot/IRANSansWeb.eot
+++ b/public/fonts/eot/IRANSansWeb.eot
--- a/public/fonts/eot/IRANSansWeb_Black.eot
+++ b/public/fonts/eot/IRANSansWeb_Black.eot
--- a/public/fonts/eot/IRANSansWeb_Bold.eot
+++ b/public/fonts/eot/IRANSansWeb_Bold.eot
--- a/public/fonts/eot/IRANSansWeb_Light.eot
+++ b/public/fonts/eot/IRANSansWeb_Light.eot
--- a/public/fonts/eot/IRANSansWeb_Medium.eot
+++ b/public/fonts/eot/IRANSansWeb_Medium.eot
--- a/public/fonts/eot/IRANSansWeb_UltraLight.eot
+++ b/public/fonts/eot/IRANSansWeb_UltraLight.eot
--- a/public/fonts/eot/Parastoo-Bold.eot
+++ b/public/fonts/eot/Parastoo-Bold.eot
--- a/public/fonts/eot/Parastoo.eot
+++ b/public/fonts/eot/Parastoo.eot
--- a/public/fonts/ttf/IRANSansWeb.ttf
+++ b/public/fonts/ttf/IRANSansWeb.ttf
--- a/public/fonts/ttf/IRANSansWeb_Black.ttf
+++ b/public/fonts/ttf/IRANSansWeb_Black.ttf
--- a/public/fonts/ttf/IRANSansWeb_Bold.ttf
+++ b/public/fonts/ttf/IRANSansWeb_Bold.ttf
--- a/public/fonts/ttf/IRANSansWeb_Light.ttf
+++ b/public/fonts/ttf/IRANSansWeb_Light.ttf
--- a/public/fonts/ttf/IRANSansWeb_Medium.ttf
+++ b/public/fonts/ttf/IRANSansWeb_Medium.ttf
--- a/public/fonts/ttf/IRANSansWeb_UltraLight.ttf
+++ b/public/fonts/ttf/IRANSansWeb_UltraLight.ttf
--- a/public/fonts/ttf/Parastoo-Bold.ttf
+++ b/public/fonts/ttf/Parastoo-Bold.ttf
--- a/public/fonts/ttf/Parastoo.ttf
+++ b/public/fonts/ttf/Parastoo.ttf
--- a/public/fonts/woff/IRANSansWeb.woff
+++ b/public/fonts/woff/IRANSansWeb.woff
--- a/public/fonts/woff/IRANSansWeb_Black.woff
+++ b/public/fonts/woff/IRANSansWeb_Black.woff
--- a/public/fonts/woff/IRANSansWeb_Bold.woff
+++ b/public/fonts/woff/IRANSansWeb_Bold.woff
--- a/public/fonts/woff/IRANSansWeb_Light.woff
+++ b/public/fonts/woff/IRANSansWeb_Light.woff
--- a/public/fonts/woff/IRANSansWeb_Medium.woff
+++ b/public/fonts/woff/IRANSansWeb_Medium.woff
--- a/public/fonts/woff/IRANSansWeb_UltraLight.woff
+++ b/public/fonts/woff/IRANSansWeb_UltraLight.woff
--- a/public/fonts/woff/Parastoo-Bold.woff
+++ b/public/fonts/woff/Parastoo-Bold.woff
--- a/public/fonts/woff/Parastoo.woff
+++ b/public/fonts/woff/Parastoo.woff
--- a/public/fonts/woff2/IRANSansWeb.woff2
+++ b/public/fonts/woff2/IRANSansWeb.woff2
--- a/public/fonts/woff2/IRANSansWeb_Black.woff2
+++ b/public/fonts/woff2/IRANSansWeb_Black.woff2
--- a/public/fonts/woff2/IRANSansWeb_Bold.woff2
+++ b/public/fonts/woff2/IRANSansWeb_Bold.woff2
--- a/public/fonts/woff2/IRANSansWeb_Light.woff2
+++ b/public/fonts/woff2/IRANSansWeb_Light.woff2
--- a/public/fonts/woff2/IRANSansWeb_Medium.woff2
+++ b/public/fonts/woff2/IRANSansWeb_Medium.woff2
--- a/public/fonts/woff2/IRANSansWeb_UltraLight.woff2
+++ b/public/fonts/woff2/IRANSansWeb_UltraLight.woff2
--- a/public/images/change-password.svg
+++ b/public/images/change-password.svg
--- a/public/images/dashboard.svg
+++ b/public/images/dashboard.svg
--- a/public/images/login.svg
+++ b/public/images/login.svg
--- a/public/images/logo.svg
+++ b/public/images/logo.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="611.781" height="634.738" viewBox="0 0 611.781 634.738">
+  <g id="Group_67" data-name="Group 67" transform="translate(17717.998 5548)">
+    <g id="Group_35" data-name="Group 35" transform="translate(-18337.291 -5635.72)">
+      <path id="Path_5" data-name="Path 5" d="M126.892,461.042c-1.676-6.24-3.057-12-4.776-17.668-6.5-21.426-17.146-40.936-27.846-60.456-10.362-18.9-20.22-38.081-30.31-57.132-.389-.734-.9-1.406-1.791-2.8C36.884,364.062,18.983,407.918,1.474,451.962l-1.21-.256a8.878,8.878,0,0,1-.214-2.524c2.581-12.372,4.479-24.951,8.05-37.034a334.761,334.761,0,0,1,13.91-37.364Q35.923,342.5,51.02,310.733c3.525-7.389,1.922-13.976.051-20.991a185.716,185.716,0,0,1-6.18-54.9,183.572,183.572,0,0,1,21.089-78.7A248.249,248.249,0,0,1,132.8,75.26a320,320,0,0,1,59.11-36.67c23.209-11.317,47.033-21.1,72.336-26.513A487.808,487.808,0,0,1,314.282,3.7C333.731,1.624,353.352,1.16,372.9.018a22,22,0,0,1,3.3.145c.4.037.775.291,1.236,1.13L360.926,4.642c-26.4,5.318-52.988,9.831-79.147,16.136a295.335,295.335,0,0,0-105.32,48.21c-24.648,17.9-45.935,39.123-61.823,65.3-11.419,18.813-17.813,39.38-20.064,61.275-1.445,14.062-1.024,28.1.166,42.133a44.216,44.216,0,0,0,1,4.8c1.418-1.165,2.427-1.875,3.3-2.728,10.2-10.038,20.041-20.48,30.661-30.055,14.1-12.713,29.419-23.882,46.9-31.678,21.42-9.55,43.69-13.568,66.553-6.9,10.553,3.079,20.531,8.393,30.44,13.353,20.075,10.051,39.841,20.721,59.892,30.821a182.512,182.512,0,0,0,68.478,19.421c33.07,2.549,64.407-3.894,93.662-19.748,25.04-13.571,46.544-31.674,66.252-52.041,15.44-15.956,28.916-33.487,41.494-51.746,2.217-3.219,4.962-6.073,7.463-9.1l.983.382a15.039,15.039,0,0,1-.828,3.67c-3.9,7.643-7.67,15.361-11.911,22.812-17.8,31.272-39.019,60-64.85,85.13-26.732,26.009-56.556,47.619-90.953,62.526a162.5,162.5,0,0,1-74.241,14.106c-24.876-.775-48.015,5.5-69.742,17.063-14.861,7.91-29.333,16.559-43.879,25.049-13.773,8.039-28.189,13.431-44.484,11.949-2.667-.242-2.49,1.854-2.988,3.479-2.151,7.019-3.92,14.193-6.627,20.993-3.8,9.547-10.327,17.4-17.557,24.572-15.526,15.4-28.738,32.778-42.59,49.608-4.68,5.687-9.284,11.436-14.28,17.6M284.4,266.987c-.334-.819-.375-1.206-.591-1.393a13.8,13.8,0,0,0-1.854-1.356c-22.793-13.885-46.277-26.286-71.807-34.532-20.915-6.755-41.455-6.841-61.848,1.941-15.741,6.779-28.925,17.112-41,29.01-5.591,5.508-5.981,8.93-2.421,15.921q12.355,24.272,24.657,48.572c10.087,19.93,20.125,39.886,30.279,59.783.543,1.062,1.967,1.674,2.98,2.5a12.859,12.859,0,0,0,1.933-3.081,49.022,49.022,0,0,0-2.4-33.292c-6.476-14.911-14.075-29.337-21.275-43.93-4.967-10.065-10.144-20.026-15.07-30.112-1.63-3.338-2.558-6.917.574-10.1,10.226-10.371,22.1-18.1,36.115-22.335,3.993-1.206,5.77-.416,7.975,3.16,3.927,6.365,7.687,12.846,11.888,19.028,9.727,14.31,23.437,21.051,40.7,20.974,16.93-.075,32.491-5.033,47.273-12.854,4.715-2.495,9.282-5.27,13.894-7.9" transform="translate(619.257 87.713)" fill="#231955"/>
+      <path id="Path_6" data-name="Path 6" d="M104.479,767.41c2.322-11.049,4.27-22.193,7.046-33.127,5.72-22.532,15.277-43.572,26.263-63.957,16.423-30.474,34.631-59.844,55.63-87.405,20.939-27.481,43.511-53.464,70.53-75.261,24.13-19.467,50.887-33.842,81.027-41.582,4.676-1.2,9.437-2.118,14.2-2.939a15,15,0,0,0,11.744-9.6c4.286-10.252,11.9-14.085,22.732-13.761a202.3,202.3,0,0,0,89.232-17.644A257.328,257.328,0,0,0,528.458,395.6c1.4-1.009,2.885-1.912,5.222-3.451-.953,3.026-1.265,5.258-2.293,7.089-14.936,26.6-31.633,51.891-54.057,72.956-18.879,17.734-40.265,31.046-65.744,36.862-15.1,3.446-30.348,6.253-45.529,9.349-18.622,3.8-37.406,6.945-55.825,11.553-27.566,6.9-51.782,20.673-73.654,38.685-23.608,19.441-42.473,43.054-59.8,68-24.96,35.939-44.814,74.717-63.24,114.278q-3.9,8.368-7.793,16.738l-1.263-.245" transform="translate(583.845 -45.198)" fill="#231955"/>
+      <path id="Path_7" data-name="Path 7" d="M405.392,690.855l-53.546,54.494-55.389-51.215,55.1-53.062L405.4,690.854" transform="translate(518.777 -129.57)" fill="#ff9100"/>
+    </g>
+    <text id="MARHABA" transform="translate(-17322 -4931)" fill="#bcbcbc" font-size="50" font-family="Montserrat-ExtraBold, Montserrat" font-weight="800"><tspan x="-281.35" y="0">MARHABA</tspan></text>
+  </g>
+</svg>
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -0,0 +1,51 @@
+{
+  "app_name": "سامانه جامع تسهیلات",
+  "app_short_name": "سامانه تسهیلات",
+  "dashboard": "داشبورد",
+  "first_page": "خوش آمدید",
+  "login": "ورود",
+  "login_navy": "ورود اعضای ناوگان",
+  "login_welfare_services": "ورود اعضای خدمات رفاهی",
+  "user_welfare_services": "خدمات رفاهی",
+  "user_navy": "ناوگان",
+  "header": {
+    "open_profile": "پروفایل",
+    "edit_profile": "ویرایش پروفایل",
+    "change_password": "تغییر رمز عبور",
+    "logout": "خروج"
+  },
+  "Titles": {
+    "title_login_page": "صفحه ورود",
+    "title_login_navy_page": "ورود اعضای ناوگان",
+    "title_login_welfare_services_page": "ورود اعضای خدمات رفاهی",
+    "title_register_navy_page": "ثبت نام اعضای ناوگان",
+    "title_register_welfare_services_page": "ثبت نام اعضای خدمات رفاهی"
+  },
+  "sidebar": {
+    "dashboard": "داشبورد",
+    "loan-request": "درخواست وام",
+    "loan-follow-up": "پیگیری درخواست"
+  },
+  "Authorization": {
+    "typography_your_login_is_valid_and_you_do_not_need_to_login_again": "شما دسترسی لازم به این صفحه را دارید نیاز به ورود مجدد نیست.",
+    "typography_your_access_to_this_page_has_expired_Please_login_again": "دسترسی شما منقضی شده است لطفا دوباره ورود نمایید.",
+    "typography_redirect_to": "رفتن به صفحه",
+    "typography_routing_previuos_page": "صفحه قبل...",
+    "typography_routing_dashbaord_page": "داشبورد..."
+  },
+  "LoginPage": {
+    "text_field_user_name": "نام کاربری",
+    "text_field_enter_your_username": "نام کاربری خود را وارد کنید",
+    "text_field_password": "رمز عبور",
+    "text_field_enter_your_password": "رمز عبور خود را وارد کنید",
+    "button_submit": "ورود",
+    "link_routing_back_to": "بازگشت به",
+    "link_routing_previuos_page": "صفحه قبل",
+    "link_routing_main_page": "صفحه اصلی",
+    "error_message_required": "اجباری!",
+    "button_make_account": "ایجاد حساب"
+  },
+  "dashboard": {
+    "dashboard_page": "داشبورد"
+  }
+}
--- a/public/locales/fa/datatable.js
+++ b/public/locales/fa/datatable.js
@@ -0,0 +1,92 @@
+export const FA_DATATABLE_LOCALIZATION = {
+  actions: "Actions",
+  and: "and",
+  cancel: "Cancel",
+  changeFilterMode: "Change filter mode",
+  changeSearchMode: "Change search mode",
+  clearFilter: "Clear filter",
+  clearSearch: "Clear search",
+  clearSort: "Clear sort",
+  clickToCopy: "Click to copy",
+  collapse: "Collapse",
+  collapseAll: "Collapse all",
+  columnActions: "Column Actions",
+  copiedToClipboard: "Copied to clipboard",
+  dropToGroupBy: "Drop to group by {column}",
+  edit: "Edit",
+  expand: "Expand",
+  expandAll: "Expand all",
+  filterArrIncludes: "Includes",
+  filterArrIncludesAll: "Includes all",
+  filterArrIncludesSome: "Includes",
+  filterBetween: "Between",
+  filterBetweenInclusive: "Between Inclusive",
+  filterByColumn: "Filter by {column}",
+  filterContains: "Contains",
+  filterEmpty: "Empty",
+  filterEndsWith: "Ends With",
+  filterEquals: "Equals",
+  filterEqualsString: "Equals",
+  filterFuzzy: "Fuzzy",
+  filterGreaterThan: "Greater Than",
+  filterGreaterThanOrEqualTo: "Greater Than Or Equal To",
+  filterInNumberRange: "Between",
+  filterIncludesString: "Contains",
+  filterIncludesStringSensitive: "Contains",
+  filterLessThan: "Less Than",
+  filterLessThanOrEqualTo: "Less Than Or Equal To",
+  filterMode: "Filter Mode: {filterType}",
+  filterNotEmpty: "Not Empty",
+  filterNotEquals: "Not Equals",
+  filterStartsWith: "Starts With",
+  filterWeakEquals: "Equals",
+  filteringByColumn: "Filtering by {column} - {filterType} {filterValue}",
+  goToFirstPage: "Go to first page",
+  goToLastPage: "Go to last page",
+  goToNextPage: "Go to next page",
+  goToPreviousPage: "Go to previous page",
+  grab: "Grab",
+  groupByColumn: "Group by {column}",
+  groupedBy: "Grouped by ",
+  hideAll: "Hide all",
+  hideColumn: "Hide {column} column",
+  max: "Max",
+  min: "Min",
+  move: "Move",
+  noRecordsToDisplay: "No records to display",
+  noResultsFound: "No results found",
+  of: "of",
+  or: "or",
+  pinToLeft: "Pin to left",
+  pinToRight: "Pin to right",
+  resetColumnSize: "Reset column size",
+  resetOrder: "Reset order",
+  rowActions: "Row Actions",
+  rowNumber: "#",
+  rowNumbers: "Row Numbers",
+  rowsPerPage: "Rows per page",
+  save: "Save",
+  search: "Search",
+  selectedCountOfRowCountRowsSelected:
+    "{selectedCount} of {rowCount} row(s) selected",
+  select: "Select",
+  showAll: "Show all",
+  showAllColumns: "Show all columns",
+  showHideColumns: "Show/Hide columns",
+  showHideFilters: "Show/Hide filters",
+  showHideSearch: "Show/Hide search",
+  sortByColumnAsc: "Sort by {column} ascending",
+  sortByColumnDesc: "Sort by {column} descending",
+  sortedByColumnAsc: "Sorted by {column} ascending",
+  sortedByColumnDesc: "Sorted by {column} descending",
+  thenBy: ", then by ",
+  toggleDensity: "Toggle density",
+  toggleFullScreen: "Toggle full screen",
+  toggleSelectAll: "Toggle select all",
+  toggleSelectRow: "Toggle select row",
+  toggleVisibility: "Toggle visibility",
+  ungroupByColumn: "Ungroup by {column}",
+  unpin: "Unpin",
+  unpinAll: "Unpin all",
+  unsorted: "Unsorted",
+};
--- a/src/components/dashboard/first/index.jsx
+++ b/src/components/dashboard/first/index.jsx
@@ -0,0 +1,7 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+
+const DashboardFirstComponent = () => {
+  return <DashboardLayouts></DashboardLayouts>;
+};
+
+export default DashboardFirstComponent;
--- a/src/components/dashboard/loan-follow-up/index.jsx
+++ b/src/components/dashboard/loan-follow-up/index.jsx
@@ -0,0 +1,19 @@
+import CenterLayout from "@/layouts/CenterLayout";
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import useUser from "@/lib/app/hooks/useUser";
+import { useTranslations } from "next-intl";
+import React from "react";
+
+const DashboardLoanFollowUpComponent = () => {
+  const t = useTranslations();
+  const { token } = useUser();
+  return (
+    <DashboardLayouts>
+      <CenterLayout>
+        <p>چه کشکی چه پشمی</p>
+      </CenterLayout>
+    </DashboardLayouts>
+  );
+};
+
+export default DashboardLoanFollowUpComponent;
--- a/src/components/dashboard/loan-request/index.jsx
+++ b/src/components/dashboard/loan-request/index.jsx
@@ -0,0 +1,19 @@
+import CenterLayout from "@/layouts/CenterLayout";
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import useUser from "@/lib/app/hooks/useUser";
+import { useTranslations } from "next-intl";
+import React from "react";
+
+const DashboardLoanRequestComponent = () => {
+  const t = useTranslations();
+  const { token } = useUser();
+  return (
+    <DashboardLayouts>
+      <CenterLayout>
+        <p>نکنه وامم میخوای؟؟؟</p>
+      </CenterLayout>
+    </DashboardLayouts>
+  );
+};
+
+export default DashboardLoanRequestComponent;
--- a/src/components/first/index.jsx
+++ b/src/components/first/index.jsx
@@ -0,0 +1,66 @@
+import dahsboardImage from "&/images/dashboard.svg";
+import { NextLinkComposed } from "@/core/components/LinkRouting";
+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 { useTranslations } from "next-intl";
+
+const FirstComponent = () => {
+  const t = useTranslations();
+  const { isAuth } = useUser();
+
+  return (
+    <FullPageLayout sx={{ p: 1 }}>
+      <CenterLayout spacing={3}>
+        <StyledImage
+          src={dahsboardImage}
+          alt={t("app_name")}
+          width={300}
+          height={200}
+        />
+        <Typography variant="h5" sx={{ textAlign: "center" }}>
+          {t("app_name")}
+        </Typography>
+        {isAuth ? (
+          <Button
+            variant="outlined"
+            component={NextLinkComposed}
+            to={{
+              pathname: "/dashboard",
+            }}
+          >
+            {t("dashboard")}
+          </Button>
+        ) : (
+          <Box sx={{ display: "flex" }}>
+            <Button
+              sx={{ mx: 2 }}
+              variant="contained"
+              component={NextLinkComposed}
+              to={{
+                pathname: "/login-navy",
+              }}
+            >
+              {t("login_navy")}
+            </Button>
+            <Divider orientation="vertical" flexItem />
+            <Button
+              sx={{ mx: 2 }}
+              variant="contained"
+              component={NextLinkComposed}
+              to={{
+                pathname: "/login-welfare-services",
+              }}
+            >
+              {t("login_welfare_services")}
+            </Button>
+          </Box>
+        )}
+      </CenterLayout>
+    </FullPageLayout>
+  );
+};
+
+export default FirstComponent;
--- a/src/components/login-navy/index.jsx
+++ b/src/components/login-navy/index.jsx
@@ -0,0 +1,170 @@
+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";
+import FullPageLayout from "@/layouts/FullPageLayout";
+import useDirection from "@/lib/app/hooks/useDirection";
+import useUser from "@/lib/app/hooks/useUser";
+import LoginIcon from "@mui/icons-material/Login";
+import PersonAddIcon from "@mui/icons-material/PersonAdd";
+import {
+  Box,
+  Button,
+  Container,
+  Paper,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+// import axios from "axios";
+import { Field, Formik } from "formik";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useSearchParams } from "next/navigation";
+import * as Yup from "yup";
+
+const LoginComponent = () => {
+  const t = useTranslations();
+  const { directionApp } = useDirection();
+  const { setToken } = useUser(); // pass token to set token
+
+  // gettin url query
+  const searchParams = useSearchParams();
+  const backUrlDecodedPath = searchParams.get("back_url");
+
+  // formik properties
+//   const handleSubmit = async (values, props) => {
+//     await axios
+//       .post(GET_USER_TOKEN, {
+//         username: values.username,
+//         password: values.password,
+//       })
+//       .then(function (response) {
+//         setToken(response.data.token);
+//       })
+//       .catch(function (error) {
+//         Notifications(directionApp, error.response, t);
+//         props.setSubmitting(false);
+//       });
+//   };
+  const initialValues = {
+    username: "",
+    password: "",
+  };
+  const validationSchema = Yup.object().shape({
+    username: Yup.string().required(t("LoginPage.error_message_required")),
+    password: Yup.string().required(t("LoginPage.error_message_required")),
+  });
+
+  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/login.svg" alt={t("app_name")} />
+                  </Box>
+                  <Typography margin={2} variant="h4" textAlign="center">
+                    {t("login_navy")}
+                  </Typography>
+                  <StyledForm sx={{ width: "100%" }}>
+                    <Stack spacing={3} sx={{ p: 2 }}>
+                      <Field
+                        as={TextField}
+                        name="username"
+                        variant="outlined"
+                        label={t("LoginPage.text_field_user_name")}
+                        placeholder={t(
+                          "LoginPage.text_field_enter_your_username"
+                        )}
+                        type={"text"}
+                        error={
+                          props.touched.username && props.errors.username
+                            ? true
+                            : false
+                        }
+                        fullWidth
+                        helperText={
+                          props.touched.username ? props.errors.username : null
+                        }
+                      />
+                      <PasswordField
+                        name="password"
+                        label={t("LoginPage.text_field_password")}
+                        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",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                        }}
+                      >
+                        <LinkRouting href={"/register-navy"}>
+                          <Button
+                            type="submit"
+                            variant="outlined"
+                            size="small"
+                            endIcon={<PersonAddIcon />}
+                            disabled={props.isSubmitting ? true : false}
+                          >
+                          </Button>
+                        </LinkRouting>
+                          {t("LoginPage.button_make_account")}
+                        <Button
+                          type="submit"
+                          variant="contained"
+                          size="medium"
+                          endIcon={<LoginIcon />}
+                          disabled={props.isSubmitting ? true : false}
+                        >
+                          {t("LoginPage.button_submit")}
+                        </Button>
+                      </Box>
+                    </Stack>
+                  </StyledForm>
+                </Stack>
+              )}
+            </Formik>
+          </Paper>
+        </Container>
+      </CenterLayout>
+      <Stack direction="row" alignItems="center" justifyContent="center">
+        <LinkRouting
+          sx={{ margin: 2 }}
+          href={
+            backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
+          }
+        >
+          {t("LoginPage.link_routing_back_to")}{" "}
+          {backUrlDecodedPath
+            ? t("LoginPage.link_routing_previuos_page")
+            : t("LoginPage.link_routing_main_page")}
+        </LinkRouting>
+      </Stack>
+    </FullPageLayout>
+  );
+};
+
+export default LoginComponent;
--- a/src/components/login-welfare-services/index.jsx
+++ b/src/components/login-welfare-services/index.jsx
@@ -0,0 +1,170 @@
+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";
+import FullPageLayout from "@/layouts/FullPageLayout";
+import useDirection from "@/lib/app/hooks/useDirection";
+import useUser from "@/lib/app/hooks/useUser";
+import LoginIcon from "@mui/icons-material/Login";
+import PersonAddIcon from "@mui/icons-material/PersonAdd";
+import {
+  Box,
+  Button,
+  Container,
+  Paper,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+// import axios from "axios";
+import { Field, Formik } from "formik";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useSearchParams } from "next/navigation";
+import * as Yup from "yup";
+
+const LoginComponent = () => {
+  const t = useTranslations();
+  const { directionApp } = useDirection();
+  const { setToken } = useUser(); // pass token to set token
+
+  // gettin url query
+  const searchParams = useSearchParams();
+  const backUrlDecodedPath = searchParams.get("back_url");
+
+  // formik properties
+  //   const handleSubmit = async (values, props) => {
+  //     await axios
+  //       .post(GET_USER_TOKEN, {
+  //         username: values.username,
+  //         password: values.password,
+  //       })
+  //       .then(function (response) {
+  //         setToken(response.data.token);
+  //       })
+  //       .catch(function (error) {
+  //         Notifications(directionApp, error.response, t);
+  //         props.setSubmitting(false);
+  //       });
+  //   };
+  const initialValues = {
+    username: "",
+    password: "",
+  };
+  const validationSchema = Yup.object().shape({
+    username: Yup.string().required(t("LoginPage.error_message_required")),
+    password: Yup.string().required(t("LoginPage.error_message_required")),
+  });
+
+  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/login.svg" alt={t("app_name")} />
+                  </Box>
+                  <Typography margin={2} variant="h4" textAlign="center">
+                    {t("login_welfare_services")}
+                  </Typography>
+                  <StyledForm sx={{ width: "100%" }}>
+                    <Stack spacing={3} sx={{ p: 2 }}>
+                      <Field
+                        as={TextField}
+                        name="username"
+                        variant="outlined"
+                        label={t("LoginPage.text_field_user_name")}
+                        placeholder={t(
+                          "LoginPage.text_field_enter_your_username"
+                        )}
+                        type={"text"}
+                        error={
+                          props.touched.username && props.errors.username
+                            ? true
+                            : false
+                        }
+                        fullWidth
+                        helperText={
+                          props.touched.username ? props.errors.username : null
+                        }
+                      />
+                      <PasswordField
+                        name="password"
+                        label={t("LoginPage.text_field_password")}
+                        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",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                        }}
+                      >
+                        <LinkRouting href={"/register-welfare-services"}>
+                          <Button
+                            type="submit"
+                            variant="outlined"
+                            size="small"
+                            endIcon={<PersonAddIcon />}
+                            disabled={props.isSubmitting ? true : false}
+                          >
+                            {t("LoginPage.button_make_account")}
+                          </Button>
+                        </LinkRouting>
+                        <Button
+                          type="submit"
+                          variant="contained"
+                          size="medium"
+                          endIcon={<LoginIcon />}
+                          disabled={props.isSubmitting ? true : false}
+                        >
+                          {t("LoginPage.button_submit")}
+                        </Button>
+                      </Box>
+                    </Stack>
+                  </StyledForm>
+                </Stack>
+              )}
+            </Formik>
+          </Paper>
+        </Container>
+      </CenterLayout>
+      <Stack direction="row" alignItems="center" justifyContent="center">
+        <LinkRouting
+          sx={{ margin: 2 }}
+          href={
+            backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
+          }
+        >
+          {t("LoginPage.link_routing_back_to")}{" "}
+          {backUrlDecodedPath
+            ? t("LoginPage.link_routing_previuos_page")
+            : t("LoginPage.link_routing_main_page")}
+        </LinkRouting>
+      </Stack>
+    </FullPageLayout>
+  );
+};
+
+export default LoginComponent;
--- a/src/components/register-navy/index.jsx
+++ b/src/components/register-navy/index.jsx
--- a/src/components/register-welfare-services/index.jsx
+++ b/src/components/register-welfare-services/index.jsx
--- a/src/core/components/LinkRouting.jsx
+++ b/src/core/components/LinkRouting.jsx
@@ -0,0 +1,116 @@
+import MuiLink from "@mui/material/Link";
+import { styled } from "@mui/material/styles";
+import clsx from "clsx";
+import NextLink from "next/link";
+import { useRouter } from "next/router";
+import * as React from "react";
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled("a")({});
+
+export const NextLinkComposed = React.forwardRef(function NextLinkComposed(
+  props,
+  ref
+) {
+  const {
+    to,
+    linkAs,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    legacyBehavior = true,
+    locale,
+    ...other
+  } = props;
+
+  return (
+    <NextLink
+      href={to}
+      prefetch={prefetch}
+      as={linkAs}
+      replace={replace}
+      scroll={scroll}
+      shallow={shallow}
+      passHref
+      locale={locale}
+      legacyBehavior={legacyBehavior}
+    >
+      <Anchor ref={ref} {...other} />
+    </NextLink>
+  );
+});
+
+// A styled version of the Next.js Link component:
+// https://nextjs.org/docs/api-reference/next/link
+const LinkRouting = React.forwardRef(function Link(props, ref) {
+  const {
+    activeClassName = "active",
+    as,
+    className: classNameProps,
+    href,
+    legacyBehavior,
+    linkAs: linkAsProp,
+    locale,
+    noLinkStyle,
+    prefetch,
+    replace,
+    role, // Link don't have roles.
+    scroll,
+    shallow,
+    ...other
+  } = props;
+
+  const router = useRouter();
+  const pathname = typeof href === "string" ? href : href.pathname;
+  const className = clsx(classNameProps, {
+    [activeClassName]: router.pathname === pathname && activeClassName,
+  });
+
+  const isExternal =
+    typeof href === "string" &&
+    (href.indexOf("http") === 0 || href.indexOf("mailto:") === 0);
+
+  if (isExternal) {
+    if (noLinkStyle) {
+      return <Anchor className={className} href={href} ref={ref} {...other} />;
+    }
+
+    return <MuiLink className={className} href={href} ref={ref} {...other} />;
+  }
+
+  const linkAs = linkAsProp || as;
+  const nextjsProps = {
+    to: href,
+    linkAs,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    legacyBehavior,
+    locale,
+  };
+
+  if (noLinkStyle) {
+    return (
+      <NextLinkComposed
+        className={className}
+        ref={ref}
+        {...nextjsProps}
+        {...other}
+      />
+    );
+  }
+
+  return (
+    <MuiLink
+      component={NextLinkComposed}
+      className={className}
+      ref={ref}
+      {...nextjsProps}
+      {...other}
+    />
+  );
+});
+
+export default LinkRouting;
--- a/src/core/components/LoadingHardPage.jsx
+++ b/src/core/components/LoadingHardPage.jsx
@@ -0,0 +1,44 @@
+import { Backdrop, Fade, styled } from "@mui/material";
+import StyledImage from "./StyledImage";
+
+const LoadingImage = styled(StyledImage)({
+  "@keyframes load": {
+    "0%": {
+      // opacity: 0,
+      transform: "scale(1)",
+    },
+    "50%": {
+      // opacity: 1,
+      transform: "scale(2)",
+    },
+    "100%": {
+      // opacity: 0,
+      transform: "scale(1)",
+    },
+  },
+  animation: "load 2s infinite",
+});
+
+const LoadingHardPage = ({ children, loading }) => {
+  return (
+    <>
+      <Backdrop
+        sx={{ bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={loading}
+      >
+        <Fade in={true}>
+          <LoadingImage
+            src={"/images/logo.svg"}
+            alt="loading marhaba"
+            priority
+            width={100}
+            height={100}
+          />
+        </Fade>
+      </Backdrop>
+      {children}
+    </>
+  );
+};
+
+export default LoadingHardPage;
--- a/src/core/components/Messages.jsx
+++ b/src/core/components/Messages.jsx
@@ -0,0 +1,22 @@
+import CenterLayout from "@/layouts/CenterLayout";
+import FullPageLayout from "@/layouts/FullPageLayout";
+import StyledImage from "./StyledImage";
+
+const Message = ({ text, actions }) => {
+  return (
+    <FullPageLayout sx={{ p: 1 }}>
+      <CenterLayout spacing={3}>
+        <StyledImage
+          src={"/images/logo.svg"}
+          alt="loading loan facilities"
+          width={100}
+          height={100}
+        />
+        {text}
+        {actions}
+      </CenterLayout>
+    </FullPageLayout>
+  );
+};
+
+export default Message;
--- a/src/core/components/PasswordField.jsx
+++ b/src/core/components/PasswordField.jsx
@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { IconButton, InputAdornment, TextField } from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { Field } from "formik";
+
+const PasswordField = (props) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <Field
+      variant="outlined"
+      fullWidth
+      as={TextField}
+      {...props}
+      type={showPassword ? "text" : "password"}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton onClick={handleClickShowPassword}>
+              {showPassword ? <Visibility /> : <VisibilityOff />}
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+    />
+  );
+};
+
+export default PasswordField;
--- a/src/core/components/StyledForm.jsx
+++ b/src/core/components/StyledForm.jsx
@@ -0,0 +1,6 @@
+import { styled } from "@mui/material";
+import { Form } from "formik";
+
+const StyledForm = styled(Form)``;
+
+export default StyledForm;
--- a/src/core/components/StyledImage.jsx
+++ b/src/core/components/StyledImage.jsx
@@ -0,0 +1,6 @@
+import { styled } from "@mui/material";
+import Image from "next/image";
+
+const StyledImage = styled(Image)``;
+
+export default StyledImage;
--- a/src/core/components/TitlePage.jsx
+++ b/src/core/components/TitlePage.jsx
@@ -0,0 +1,15 @@
+import { useTranslations } from "next-intl";
+import Head from "next/head";
+
+const TitlePage = ({ text }) => {
+  const t = useTranslations();
+  return (
+    <Head>
+      <title>
+        {text ? `${t("app_short_name")} | ${t(text)}` : t("app_short_name")}
+      </title>
+    </Head>
+  );
+};
+
+export default TitlePage;
--- a/src/core/components/isBotHandler.jsx
+++ b/src/core/components/isBotHandler.jsx
@@ -0,0 +1,8 @@
+import { NoSsr } from "@mui/material";
+
+const NoSsrHandler = ({ isBot, children }) => {
+  if (isBot) return children;
+  return <NoSsr>{children}</NoSsr>;
+};
+
+export default NoSsrHandler;
--- a/src/core/data/apiRoutes.js
+++ b/src/core/data/apiRoutes.js
--- a/src/core/data/headerProfileItems.jsx
+++ b/src/core/data/headerProfileItems.jsx
@@ -0,0 +1,19 @@
+import BorderColorIcon from "@mui/icons-material/BorderColor";
+import PasswordIcon from "@mui/icons-material/Password";
+
+const headerProfileItems = [
+  {
+    key: 0,
+    name: "header.edit_profile",
+    route: "/dashboard/edit-profile",
+    icon: <BorderColorIcon />,
+  },
+  {
+    key: 1,
+    name: "header.change_password",
+    route: "/dashboard/change-password",
+    icon: <PasswordIcon />,
+  },
+];
+
+export default headerProfileItems;
--- a/src/core/data/sidebarMenu.jsx
+++ b/src/core/data/sidebarMenu.jsx
@@ -0,0 +1,31 @@
+import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
+import BookmarkAddedIcon from "@mui/icons-material/BookmarkAdded";
+import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
+
+const sidebarMenu = [
+  [
+    {
+      key: "sidebar.dashboard",
+      type: "page",
+      route: "/dashboard",
+      icon: <SpaceDashboardIcon />,
+      selected: false,
+    },
+    {
+      key: "sidebar.loan-request",
+      type: "page",
+      route: "/dashboard/loan-request",
+      icon: <DataSaverOnIcon />,
+      selected: false,
+    },
+    {
+      key: "sidebar.loan-follow-up",
+      type: "page",
+      route: "/dashboard/loan-follow-up",
+      icon: <BookmarkAddedIcon />,
+      selected: false,
+    },
+  ],
+];
+
+export default sidebarMenu;
--- a/src/core/utils/createEmotionCache.jsx
+++ b/src/core/utils/createEmotionCache.jsx
@@ -0,0 +1,38 @@
+import createCache from "@emotion/cache";
+import { prefixer } from "stylis";
+import stylisRTLPlugin from "stylis-plugin-rtl";
+
+const isBrowser = typeof document !== "undefined";
+
+export const createEmotionCacheLtr = () => {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector(
+      'meta[name="emotion-insertion-point"]'
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({
+    key: "mui-style",
+    insertionPoint,
+  });
+};
+
+export const createEmotionCacheRtl = () => {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector(
+      'meta[name="emotion-insertion-point"]'
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({
+    key: "muirtl",
+    stylisPlugins: [prefixer, stylisRTLPlugin],
+    insertionPoint,
+  });
+};
--- a/src/core/utils/theme-rtl.jsx
+++ b/src/core/utils/theme-rtl.jsx
@@ -0,0 +1,12 @@
+import { createTheme } from "@mui/material/styles";
+import theme from "./theme";
+
+const themeRtl = createTheme({
+  direction: "rtl",
+  typography: {
+    fontFamily: `IRANSans, sans-serif`,
+  },
+  ...theme,
+});
+
+export default themeRtl;
--- a/src/core/utils/theme.jsx
+++ b/src/core/utils/theme.jsx
@@ -0,0 +1,18 @@
+const theme = {
+  palette: {
+    primary: {
+      main: "#084070",
+      contrastText: "#fff",
+      light: "#2c6291",
+      dark: "#11293e",
+    },
+    secondary: {
+      main: "#FF4E00",
+      contrastText: "#fff",
+      light: "#ed743e",
+      dark: "#ad3a07",
+    },
+  },
+};
+
+export default theme;
--- a/src/layouts/AppLayout.jsx
+++ b/src/layouts/AppLayout.jsx
@@ -0,0 +1,85 @@
+import theme from "@/core/utils/theme";
+import useLoading from "@/lib/app/hooks/useLoading";
+import useUser from "@/lib/app/hooks/useUser";
+import Head from "next/head";
+import NextNProgress from "nextjs-progressbar";
+import { useEffect } from "react";
+
+function AppLayout({ children, isBot }) {
+  const { setLoadingPage } = useLoading();
+  const { token, isAuth } = useUser();
+  useEffect(() => {
+      if (token) {
+        if (isAuth) {
+          setLoadingPage(false);
+          return;
+        }
+        setLoadingPage(true);
+        return;
+      }
+      setLoadingPage(false);
+      return;
+  }, [token, isAuth]);
+
+  return (
+    <>
+      <Head>
+        <meta
+          name="application-name"
+          content={process.env.NEXT_PUBLIC_API_NAME}
+        />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta
+          name="apple-mobile-web-app-status-bar-style"
+          content="black-translucent"
+        />
+        <meta
+          name="apple-mobile-web-app-title"
+          content={process.env.NEXT_PUBLIC_API_NAME}
+        />
+        <meta name="description" content="Marhaba does it for you" />
+        <meta name="format-detection" content="telephone=no" />
+        <meta name="format-detection" content="date=no" />
+        <meta name="format-detection" content="address=no" />
+        <meta name="format-detection" content="email=no" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <link rel="apple-touch-icon" href="/icons/maskable_icon_x512.png" />
+        <link
+          rel="apple-touch-icon"
+          sizes="120x120"
+          href="/icons/maskable_icon_x128.png"
+        />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/icons/maskable_icon_x192.png"
+        />
+        <meta name="google" content="notranslate" />
+        <meta name="robots" content="noindex" />
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
+        />
+        <link
+          rel="icon"
+          type="image/svg"
+          sizes="32x32"
+          href="/images/logo.png"
+        />
+        <link
+          rel="icon"
+          type="image/svg"
+          sizes="16x16"
+          href="/images/logo.png"
+        />
+      </Head>
+      <NextNProgress
+        color={theme.palette.secondary.dark}
+        options={{ showSpinner: false }}
+      />
+      {children}
+    </>
+  );
+}
+
+export default AppLayout;
--- a/src/layouts/CenterLayout.jsx
+++ b/src/layouts/CenterLayout.jsx
@@ -0,0 +1,18 @@
+import { Fade, Stack } from "@mui/material";
+
+const CenterLayout = (props) => {
+  return (
+    <Fade in={true}>
+      <Stack
+        alignItems="center"
+        justifyContent="center"
+        spacing={props?.spacing}
+        sx={{ flex: 1, ...props?.sx, py: 3 }}
+      >
+        {props.children}
+      </Stack>
+    </Fade>
+  );
+};
+
+export default CenterLayout;
--- a/src/layouts/FullPageLayout.jsx
+++ b/src/layouts/FullPageLayout.jsx
@@ -0,0 +1,21 @@
+import { Stack } from "@mui/material";
+
+const FullPageLayout = (props) => {
+  return (
+    <Stack
+      spacing={props?.spacing}
+      direction={props?.direction}
+      sx={{
+        width: "100%",
+        height: "100%",
+        overflowY: "scroll",
+        overflowX: "scroll",
+        ...props?.sx,
+      }}
+    >
+      {props.children}
+    </Stack>
+  );
+};
+
+export default FullPageLayout;
--- a/src/layouts/MuiLayout.jsx
+++ b/src/layouts/MuiLayout.jsx
@@ -0,0 +1,76 @@
+import NoSsrHandler from "@/core/components/isBotHandler";
+import {
+  createEmotionCacheRtl
+} from "@/core/utils/createEmotionCache";
+import themeRtl from "@/core/utils/theme-rtl";
+import { CacheProvider } from "@emotion/react";
+import { GlobalStyles } from "@mui/material";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import Head from "next/head";
+
+const clientSideEmotionCacheRtl = createEmotionCacheRtl();
+
+const MuiLayout = ({ children, isBot }) => {
+
+  const emotionCache =  clientSideEmotionCacheRtl;
+
+  const theme = themeRtl;
+  return (
+    <NoSsrHandler isBot={isBot}>
+      <CacheProvider value={emotionCache}>
+        <Head>
+          <meta name="viewport" content="initial-scale=1, width=device-width" />
+        </Head>
+        <ThemeProvider theme={theme}>
+          <GlobalStyles
+            styles={{
+              "*:not(.MuiTableContainer-root)::-webkit-scrollbar": {
+                display: "none",
+              },
+              "*::-webkit-scrollbar": {
+                height: "8px",
+              },
+              "*::-webkit-scrollbar-thumb": {
+                background: "#e1e1e1",
+                borderRadius: "3px",
+              },
+              "*:not(.MuiTableContainer-root)": {
+                scrollbarWidth: "thin",
+                scrollbarColor: "transparent transparent",
+              },
+
+              "*": {
+                scrollbarWidth: "thin",
+                scrollbarColor: "#e1e1e1 transparent",
+              },
+
+              "*::-moz-scrollbar-thumb": {
+                backgroundColor: "#e1e1e1",
+              },
+              [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
+                "*::-webkit-scrollbar": {
+                  height: "4px",
+                },
+              },
+
+              body: {
+                width: "100vw",
+                height: "100vh",
+              },
+              "#__next": {
+                width: "100%",
+                height: "100%",
+              },
+            }}
+          />
+
+          <CssBaseline />
+          {children}
+        </ThemeProvider>
+      </CacheProvider>
+    </NoSsrHandler>
+  );
+};
+
+export default MuiLayout;
--- a/src/layouts/ScrollableLayout.jsx
+++ b/src/layouts/ScrollableLayout.jsx
@@ -0,0 +1,25 @@
+import { Box, Fade } from "@mui/material";
+
+const ScrollableLayout = (props) => {
+  const overflowY = props?.y || "hidden";
+  const overflowX = props?.x || "hidden";
+
+  return (
+    <Fade in={true}>
+      <Box
+        spacing={props?.spacing}
+        sx={{
+          width: "auto",
+          height: "auto",
+          overflowY: overflowY,
+          overflowX: overflowX,
+          ...props?.sx,
+        }}
+      >
+        {props.children}
+      </Box>
+    </Fade>
+  );
+};
+
+export default ScrollableLayout;
--- a/src/layouts/dashboardLayouts/breadcrumbs/BreadcrumbItem.jsx
+++ b/src/layouts/dashboardLayouts/breadcrumbs/BreadcrumbItem.jsx
@@ -0,0 +1,19 @@
+import LinkRouting from "@/core/components/LinkRouting";
+import { Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
+
+export default function BreadcrumbItem(props) {
+  const t = useTranslations();
+  const isLast = props.index === props.RouterArray.length - 1;
+  const url = `/${props.RouterArray.slice(0, props.index + 1).join("/")}`;
+
+  return isLast ? (
+    <Typography variant="body2" color="primary">
+      {t("sidebar." + props.label)}
+    </Typography>
+  ) : (
+    <LinkRouting underline="hover" color="inherit" passHref href={url}>
+      <Typography variant="body2">{t("sidebar." + props.label)}</Typography>
+    </LinkRouting>
+  );
+}
--- a/src/layouts/dashboardLayouts/breadcrumbs/index.jsx
+++ b/src/layouts/dashboardLayouts/breadcrumbs/index.jsx
@@ -0,0 +1,49 @@
+import { useRouter } from "next/router";
+import { Box, Breadcrumbs } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { NavigateBefore, NavigateNext } from "@mui/icons-material";
+import BreadcrumbItem from "./BreadcrumbItem";
+
+const BreadCrumbs = (props) => {
+  const { isVisible } = props;
+  const theme = useTheme();
+  const router = useRouter();
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const { pathname } = router;
+  const RouterArray = pathname.split("/").filter((segment) => segment !== "");
+
+  if (RouterArray.length === 1) {
+    return null;
+  }
+
+  return (
+    <Box p={3} component="span">
+      <Breadcrumbs
+        maxItems={2}
+        separator={
+          theme.direction === "ltr" ? (
+            <NavigateNext fontSize="small" />
+          ) : (
+            <NavigateBefore fontSize="small" />
+          )
+        }
+        aria-label="breadcrumb"
+      >
+        {RouterArray.map((segment, index) => (
+          <BreadcrumbItem
+            RouterArray={RouterArray}
+            label={segment}
+            key={segment}
+            index={index}
+          />
+        ))}
+      </Breadcrumbs>
+    </Box>
+  );
+};
+
+export default BreadCrumbs;
--- a/src/layouts/dashboardLayouts/header/ProfileData.jsx
+++ b/src/layouts/dashboardLayouts/header/ProfileData.jsx
@@ -0,0 +1,18 @@
+import { Avatar, Stack, Typography } from "@mui/material";
+import useUser from "@/lib/app/hooks/useUser";
+
+export default function ProfileData() {
+  const { user } = useUser();
+  return (
+    <Stack alignItems="center" spacing={2} sx={{ p: 3 }}>
+      <Avatar
+        sx={{ width: "80px", height: "80px" }}
+        alt="User Image"
+        src={user.user_avatar}
+      />
+      <Typography sx={{ fontSize: 15, fontWeight: 600 }} textAlign="center">
+        {user.user_username}
+      </Typography>
+    </Stack>
+  );
+}
--- a/src/layouts/dashboardLayouts/header/ProfileMenu.jsx
+++ b/src/layouts/dashboardLayouts/header/ProfileMenu.jsx
@@ -0,0 +1,61 @@
+import { Avatar, Menu, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import ProfileData from "./ProfileData";
+import ProfileOptions from "./ProfileOptions";
+import { useTranslations } from "next-intl";
+import useUser from "@/lib/app/hooks/useUser";
+
+function ProfileMenu() {
+  const t = useTranslations();
+  const [anchorElUser, setAnchorElUser] = useState(null);
+  const { user } = useUser();
+
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <>
+      <Tooltip title={t("header.open_profile")} arrow>
+        <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+          <Avatar
+            sx={{
+              width: 24,
+              height: 24,
+              backgroundColor: "#fff",
+              color: "primary.main",
+            }}
+            alt="User Image"
+            src={user.user_avatar}
+          />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        MenuListProps={{ sx: { py: 0 } }}
+        sx={{
+          mt: 6,
+        }}
+        id="menu-appbar"
+        anchorEl={anchorElUser}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        open={Boolean(anchorElUser)}
+        onClose={handleCloseUserMenu}
+      >
+        <ProfileData />
+        <ProfileOptions handleCloseUserMenu={handleCloseUserMenu} />
+      </Menu>
+    </>
+  );
+}
+export default ProfileMenu;
--- a/src/layouts/dashboardLayouts/header/ProfileOptionLogOut.jsx
+++ b/src/layouts/dashboardLayouts/header/ProfileOptionLogOut.jsx
@@ -0,0 +1,49 @@
+import { Box, Button, MenuItem, Typography } from "@mui/material";
+import MeetingRoomIcon from "@mui/icons-material/MeetingRoom";
+import useUser from "@/lib/app/hooks/useUser";
+import { useTranslations } from "next-intl";
+
+export default function ProfileOptionLogOut({ handleCloseUserMenu }) {
+  const t = useTranslations();
+  const { clearToken } = useUser();
+  const handleClickLogOut = () => {
+    handleCloseUserMenu();
+    clearToken();
+  };
+  return (
+    <>
+      <MenuItem
+        component={Button}
+        to={{
+          pathname: "/dashboard/logout",
+        }}
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          borderTop: 1,
+          px: 3,
+          py: 1.5,
+          borderColor: "#e1e1e1",
+          textTransform: "unset",
+        }}
+        onClick={handleClickLogOut}
+      >
+        <Box sx={{ display: "flex", alignItems: "center", flex: 1 }}>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              color: "primary.main",
+              pr: 2,
+            }}
+          >
+            <MeetingRoomIcon />
+          </Box>
+          <Typography sx={{ flex: 1 }} textAlign="start">
+            {t("header.logout")}
+          </Typography>
+        </Box>
+      </MenuItem>
+    </>
+  );
+}
--- a/src/layouts/dashboardLayouts/header/ProfileOptions.jsx
+++ b/src/layouts/dashboardLayouts/header/ProfileOptions.jsx
@@ -0,0 +1,49 @@
+import { Box, MenuItem, Typography } from "@mui/material";
+import { NextLinkComposed } from "@/core/components/LinkRouting";
+import { useTranslations } from "next-intl";
+import headerProfileItems from "@/core/data/headerProfileItems";
+import ProfileOptionLogOut from "./ProfileOptionLogOut";
+
+export default function ProfileOptions({ handleCloseUserMenu }) {
+  const t = useTranslations();
+
+  return (
+    <>
+      {headerProfileItems.map((profile_item) => (
+        <MenuItem
+          component={NextLinkComposed}
+          to={{
+            pathname: profile_item.route,
+          }}
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            borderTop: 1,
+            px: 3,
+            py: 1.5,
+            borderColor: "#e1e1e1",
+          }}
+          key={profile_item.key}
+          onClick={handleCloseUserMenu}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", flex: 1 }}>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                color: "primary.main",
+                pr: 2,
+              }}
+            >
+              {profile_item.icon}
+            </Box>
+            <Typography sx={{ flex: 1 }} textAlign="start">
+              {t(profile_item.name)}
+            </Typography>
+          </Box>
+        </MenuItem>
+      ))}
+      <ProfileOptionLogOut handleCloseUserMenu={handleCloseUserMenu} />
+    </>
+  );
+}
--- a/src/layouts/dashboardLayouts/header/index.jsx
+++ b/src/layouts/dashboardLayouts/header/index.jsx
@@ -0,0 +1,80 @@
+import MenuIcon from "@mui/icons-material/Menu";
+import {
+  AppBar,
+  Box,
+  Container,
+  CssBaseline,
+  IconButton,
+  Stack,
+  Toolbar,
+  useTheme
+} from "@mui/material";
+import ProfileMenu from "./ProfileMenu";
+
+function Header({ drawerWidth, handleDrawerToggle }) {
+  const theme = useTheme();
+
+  return (
+    <>
+      <CssBaseline />
+      <AppBar
+        position="fixed"
+        sx={{
+          width: { md: `calc(100% - ${drawerWidth}px)` },
+          ml: { md: `${drawerWidth}px` },
+        }}
+      >
+        <Container maxWidth="xxl">
+          <Toolbar
+            disableGutters
+            sx={{
+              display: "flex",
+            }}
+          >
+            <Stack direction="row" justifyContent="flex-start" sx={{ flex: 1 }}>
+              <IconButton
+                color="inherit"
+                aria-label="open drawer"
+                onClick={handleDrawerToggle}
+                edge="start"
+                sx={{ display: { md: "none" }, m: 0 }}
+              >
+                <MenuIcon />
+              </IconButton>
+            </Stack>
+            <Stack
+              direction="row"
+              justifyContent="center"
+              sx={{
+                flex: 1,
+                position: "relative",
+                ...theme.mixins.toolbar,
+              }}
+            >
+              <Box
+                sx={{
+                  position: "relative",
+                  my: 1,
+                  width: 56,
+                  height: 56,
+                  "@media (min-width:600px)": { maxWidth: 64, maxHeight: 64 },
+                  "@media (min-width:0px)": {
+                    "@media (orientation: landscape)": {
+                      width: 48,
+                      height: 48,
+                    },
+                  },
+                }}
+              >
+              </Box>
+            </Stack>
+            <Stack direction="row" justifyContent="flex-end" sx={{ flex: 1 }}>
+              <ProfileMenu />
+            </Stack>
+          </Toolbar>
+        </Container>
+      </AppBar>
+    </>
+  );
+}
+export default Header;
--- a/src/layouts/dashboardLayouts/index.jsx
+++ b/src/layouts/dashboardLayouts/index.jsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import FullPageLayout from "../FullPageLayout";
+import Header from "./header";
+import Sidebar from "./sidebar";
+import { Toolbar } from "@mui/material";
+import BreadCrumbs from "./breadcrumbs";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import useDirection from "@/lib/app/hooks/useDirection";
+
+const drawerWidth = 240;
+
+const DashboardLayouts = (props) => {
+  const { directionApp } = useDirection();
+  const { window } = props;
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const container =
+    window !== undefined ? () => window().document.body : undefined;
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+  return (
+    <FullPageLayout direction="row">
+      <Header
+        handleDrawerToggle={handleDrawerToggle}
+        drawerWidth={drawerWidth}
+      />
+      <Sidebar
+        container={container}
+        mobileOpen={mobileOpen}
+        handleDrawerToggle={handleDrawerToggle}
+        drawerWidth={drawerWidth}
+      />
+      <FullPageLayout
+        component="main"
+        sx={{ flexGrow: 1, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+      >
+        <Toolbar />
+        <FullPageLayout sx={{ mt: 3 }}>
+          <BreadCrumbs isVisible={true} />
+          {props.children}
+        </FullPageLayout>
+      </FullPageLayout>
+      {directionApp === "rtl" ? <ToastContainer rtl /> : <ToastContainer ltr />}
+    </FullPageLayout>
+  );
+};
+
+export default DashboardLayouts;
--- a/src/layouts/dashboardLayouts/sidebar/SidebarDrawer.jsx
+++ b/src/layouts/dashboardLayouts/sidebar/SidebarDrawer.jsx
@@ -0,0 +1,29 @@
+import { Divider, Stack, Toolbar, Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
+import SidebarList from "./SidebarList";
+import StyledImage from "@/core/components/StyledImage";
+
+const SidebarDrawer = ({ handleDrawerToggle }) => {
+  const t = useTranslations();
+  return (
+    <>
+      <Toolbar>
+        <Stack>
+          <Typography variant="h6" sx={{ color: "primary.main" }}>
+            {t("app_short_name")}
+          </Typography>
+          <Typography variant="caption">
+            {
+              t("user_navy") /* make if on thease t("user_welfare_services")
+              t("user_navy") */
+            }
+          </Typography>
+        </Stack>
+      </Toolbar>
+      <Divider />
+      <SidebarList handleDrawerToggle={handleDrawerToggle} />
+    </>
+  );
+};
+
+export default SidebarDrawer;
--- a/src/layouts/dashboardLayouts/sidebar/SidebarList.jsx
+++ b/src/layouts/dashboardLayouts/sidebar/SidebarList.jsx
@@ -0,0 +1,56 @@
+import { Divider, List } from "@mui/material";
+import { Fragment, useEffect, useReducer } from "react";
+import SidebarListItem from "./SidebarListItem";
+import sidebarMenu from "@/core/data/sidebarMenu";
+import { useRouter } from "next/router";
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "COLLAPSE_MENU":
+      return state.map((itemsArr) =>
+        itemsArr.map((item) =>
+          action.key == item.key
+            ? { ...item, showSubItem: !item.showSubItem }
+            : item
+        )
+      );
+    case "SELECTED":
+      return state.map((itemsArr) =>
+        itemsArr.map((item) =>
+          action.route == item.route
+            ? { ...item, selected: true }
+            : { ...item, selected: false }
+        )
+      );
+    default:
+      throw new Error();
+  }
+}
+
+export default function SidebarList({ handleDrawerToggle }) {
+  const [itemMenu, dispatch] = useReducer(reducer, sidebarMenu);
+
+  // activate current page in menu
+  const router = useRouter();
+  useEffect(() => {
+    dispatch({ type: "SELECTED", route: router.pathname });
+  }, [router.pathname]);
+
+  return (
+    <List>
+      {itemMenu.map((itemArr, index) => (
+        <Fragment key={index}>
+          {itemArr.map((item) => (
+            <SidebarListItem
+              item={item}
+              dispatch={dispatch}
+              key={item.key}
+              handleDrawerToggle={handleDrawerToggle}
+            />
+          ))}
+          <Divider />
+        </Fragment>
+      ))}
+    </List>
+  );
+}
--- a/src/layouts/dashboardLayouts/sidebar/SidebarListItem.jsx
+++ b/src/layouts/dashboardLayouts/sidebar/SidebarListItem.jsx
@@ -0,0 +1,64 @@
+import { NextLinkComposed } from "@/core/components/LinkRouting";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import { Fragment } from "react";
+import SidebarListSubItem from "./SidebarListSubItem";
+
+const SidebarListItem = ({ item, dispatch, handleDrawerToggle }) => {
+  const t = useTranslations();
+
+  return (
+    <Fragment key={item.key}>
+      <ListItem disablePadding sx={{ display: "block" }}>
+        <ListItemButton
+          selected={item.selected}
+          {...(item.type == "page" && {
+            component: NextLinkComposed,
+            to: {
+              pathname: item.route,
+            },
+          })}
+          onClick={() => {
+            if (item.type == "menu") {
+              dispatch({ type: "COLLAPSE_MENU", key: item.key });
+            }
+            handleDrawerToggle();
+          }}
+          sx={{
+            minHeight: 48,
+          }}
+        >
+          <ListItemIcon
+            sx={{
+              minWidth: 0,
+              justifyContent: "center",
+              color: "primary.main",
+              pr: 2,
+            }}
+          >
+            {item.icon}
+          </ListItemIcon>
+          <ListItemText primary={t(item.key)} />
+
+          {item.type == "menu" &&
+            (item.showSubItem ? <ExpandLess /> : <ExpandMore />)}
+        </ListItemButton>
+      </ListItem>
+      {item.subItem && (
+        <SidebarListSubItem
+          item={item}
+          handleDrawerToggle={handleDrawerToggle}
+        />
+      )}
+    </Fragment>
+  );
+};
+
+export default SidebarListItem;
--- a/src/layouts/dashboardLayouts/sidebar/SidebarListSubItem.jsx
+++ b/src/layouts/dashboardLayouts/sidebar/SidebarListSubItem.jsx
@@ -0,0 +1,54 @@
+import { NextLinkComposed } from "@/core/components/LinkRouting";
+import InboxIcon from "@mui/icons-material/MoveToInbox";
+import {
+  Collapse,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import { Fragment } from "react";
+
+const SidebarListSubItem = ({ item, handleDrawerToggle }) => {
+  const t = useTranslations();
+
+  return (
+    <Collapse in={item.showSubItem} timeout="auto" unmountOnExit>
+      <List component="div" disablePadding sx={{ bgcolor: "#f6f6f6" }}>
+        {item.subItem.map((subitem, index) => (
+          <Fragment key={subitem.key}>
+            <ListItemButton
+              component={NextLinkComposed}
+              to={{
+                pathname: subitem.route,
+              }}
+              sx={{
+                minHeight: 48,
+              }}
+              onClick={(event) => {
+                if (item.type == "menu") {
+                  dispatch({ type: "COLLAPSE_MENU", key: item.key });
+                }
+                handleDrawerToggle();
+              }}
+            >
+              <ListItemIcon
+                sx={{
+                  minWidth: 0,
+                  justifyContent: "center",
+                  pr: 2,
+                }}
+              >
+                <InboxIcon />
+              </ListItemIcon>
+              <ListItemText primary={t(subitem.key)} />
+            </ListItemButton>
+          </Fragment>
+        ))}
+      </List>
+    </Collapse>
+  );
+};
+
+export default SidebarListSubItem;
--- a/src/layouts/dashboardLayouts/sidebar/index.jsx
+++ b/src/layouts/dashboardLayouts/sidebar/index.jsx
@@ -0,0 +1,46 @@
+import { Box, Drawer } from "@mui/material";
+import SidebarDrawer from "./SidebarDrawer";
+
+const Sidebar = (props) => {
+  return (
+    <Box
+      component="nav"
+      sx={{ width: { md: props.drawerWidth }, flexShrink: { sm: 0 } }}
+      aria-label="mailbox folders"
+    >
+      <Drawer
+        container={props.container}
+        variant="temporary"
+        open={props.mobileOpen}
+        onClose={props.handleDrawerToggle}
+        ModalProps={{
+          keepMounted: true,
+        }}
+        sx={{
+          display: { xs: "block", md: "none" },
+          "& .MuiDrawer-paper": {
+            boxSizing: "border-box",
+            width: props.drawerWidth,
+          },
+        }}
+      >
+        <SidebarDrawer handleDrawerToggle={props.handleDrawerToggle} />
+      </Drawer>
+      <Drawer
+        variant="permanent"
+        sx={{
+          display: { xs: "none", md: "block" },
+          "& .MuiDrawer-paper": {
+            boxSizing: "border-box",
+            width: props.drawerWidth,
+          },
+        }}
+        open
+      >
+        <SidebarDrawer handleDrawerToggle={props.handleDrawerToggle} />
+      </Drawer>
+    </Box>
+  );
+};
+
+export default Sidebar;
--- a/src/lib/app/contexts/language.jsx
+++ b/src/lib/app/contexts/language.jsx
@@ -0,0 +1,99 @@
+import { FA_DATATABLE_LOCALIZATION } from "&/locales/fa/datatable";
+import { useRouter } from "next/router";
+import { createContext, useEffect, useState } from "react";
+import useUser from "../hooks/useUser";
+
+export const LanguageContext = createContext();
+
+export const LanguageProvider = ({ children }) => {
+  const router = useRouter();
+  const languageList = [
+    {
+      key: "fa",
+      dir: "rtl",
+      name: "فارسی",
+      fontFamily: `IRANSans, sans-serif`,
+      tableLocalization: FA_DATATABLE_LOCALIZATION,
+    }
+  ];
+  const { user, userChangedLanguage, changeLanguageState } = useUser();
+  const [languageIsReady, setLanguageIsReady] = useState(false);
+  const [languageApp, setLanguageApp] = useState();
+  const [directionApp, setDirectionApp] = useState(
+    process.env.NEXT_PUBLIC_DEFAULT_DIRECTION
+  );
+
+  useEffect(() => {
+    const lang = localStorage.getItem("_language");
+
+    if (!lang && !languageApp) {
+      setLanguageApp(process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE);
+    } else if (lang) {
+      setLanguageApp(lang);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!languageApp) return;
+
+    const lang = localStorage.getItem("_language");
+
+    if (!lang) {
+      localStorage.setItem("_language", languageApp);
+    } else {
+      if (languageApp != lang) {
+        localStorage.setItem("_language", languageApp);
+      }
+    }
+  }, [languageApp]);
+
+  useEffect(() => {
+    if (!router.isReady) return;
+    if (user.user_language) {
+      if (user.user_language != languageApp) {
+        setLanguageApp(user.user_language);
+        return;
+      }
+    }
+
+    if (languageApp != router.locale) {
+      router.replace(
+        { pathname: router.pathname, query: router.query },
+        router.asPath,
+        {
+          locale: languageApp,
+        }
+      );
+      return;
+    }
+    for (const lang of languageList) {
+      if (languageApp != lang.key) continue;
+      setDirectionApp(lang.dir);
+      document.dir = lang.dir;
+    }
+
+    const timer = setTimeout(() => {
+      changeLanguageState(false);
+      setLanguageIsReady(true);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [router.locale, router.isReady, userChangedLanguage, languageApp]);
+
+  return (
+    <LanguageContext.Provider
+      value={{
+        languageApp,
+        setLanguageApp,
+        directionApp,
+        languageIsReady,
+        setLanguageIsReady,
+        languageList,
+      }}
+    >
+      {children}
+    </LanguageContext.Provider>
+  );
+};
--- a/src/lib/app/contexts/loading.jsx
+++ b/src/lib/app/contexts/loading.jsx
@@ -0,0 +1,14 @@
+import LoadingHardPage from "@/core/components/LoadingHardPage";
+import { createContext, useState } from "react";
+
+export const LoadingContext = createContext();
+
+export const LoadingProvider = ({ children }) => {
+  const [loadingPage, setLoadingPage] = useState(false);
+  return (
+    <LoadingContext.Provider value={{ loadingPage, setLoadingPage }}>
+      <LoadingHardPage loading={loadingPage} />
+      {children}
+    </LoadingContext.Provider>
+  );
+};
--- a/src/lib/app/contexts/user.jsx
+++ b/src/lib/app/contexts/user.jsx
@@ -0,0 +1,144 @@
+import {
+  GET_USER_ROUTE,
+  SET_LANGUAGE
+} from "@/core/data/apiRoutes";
+import axios from "axios";
+import { createContext, useCallback, useEffect, useReducer } from "react";
+
+const initialUser = {
+  isAuth: false,
+  userChangedLanguage: false,
+  token: null,
+  user: {},
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "CLEAR_USER":
+      return { ...state, user: {} };
+    case "CHANGE_USER":
+      return { ...state, user: action.user };
+    case "CHANGE_USER_LANGUAGE":
+      return {
+        ...state,
+        user: { ...state.user, user_language: action.language },
+      };
+    case "CHANGE_AUTH_STATE":
+      return { ...state, isAuth: action.isAuth };
+    case "CHANGE_LANGUAGE_STATE":
+      return { ...state, userChangedLanguage: action.userChangedLanguage };
+    case "CLEAR_TOKEN":
+      localStorage.removeItem("_token");
+      return { ...state, token: null };
+    case "SET_TOKEN":
+      localStorage.setItem("_token", action.token);
+      return { ...state, token: action.token };
+    default:
+      return state;
+  }
+};
+
+export const UserContext = createContext();
+
+export const UserProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialUser);
+
+  const clearUser = useCallback(() => {
+    dispatch({ type: "CLEAR_USER" });
+  }, []);
+
+  const changeUser = useCallback((user) => {
+    dispatch({ type: "CHANGE_USER", user });
+  }, []);
+
+  const changeUserLanguage = useCallback(
+    (language) => {
+      dispatch({ type: "CHANGE_USER_LANGUAGE", language });
+      axios
+        .post(
+          SET_LANGUAGE,
+          { language: language },
+          {
+            headers: {
+              authorization: `Bearer ${state.token}`,
+            },
+          }
+        )
+        .then(() => {
+          getUser((data) => {
+            changeUser(data);
+          });
+        });
+    },
+    [state.token]
+  );
+
+  const changeAuthState = useCallback((isAuth) => {
+    dispatch({ type: "CHANGE_AUTH_STATE", isAuth });
+  }, []);
+
+  const changeLanguageState = useCallback((userChangedLanguage) => {
+    dispatch({ type: "CHANGE_LANGUAGE_STATE", userChangedLanguage });
+  }, []);
+
+  const clearToken = useCallback(() => {
+    dispatch({ type: "CLEAR_TOKEN" });
+  }, []);
+
+  const setToken = useCallback((token) => {
+    dispatch({ type: "SET_TOKEN", token });
+  }, []);
+
+  const getUser = useCallback(
+    (callback = () => {}) => {
+      axios
+        .get(GET_USER_ROUTE, {
+          headers: { authorization: `Bearer ${state.token}` },
+        })
+        .then(({ data }) => {
+          if (typeof callback === "function") callback(data);
+        });
+    },
+    [state.token]
+  );
+
+  useEffect(() => {
+    const localToken = localStorage.getItem("_token");
+    if (localToken) dispatch({ type: "SET_TOKEN", token: localToken });
+  }, []);
+
+  useEffect(() => {
+    if (!state.token) {
+      clearUser();
+      changeAuthState(false);
+      changeLanguageState(false);
+      return;
+    }
+    getUser((data) => {
+      changeUser(data);
+      changeAuthState(true);
+      changeLanguageState(true);
+    });
+  }, [state.token]);
+
+  return (
+    <UserContext.Provider
+      value={{
+        isAuth: state.isAuth,
+        userChangedLanguage: state.userChangedLanguage,
+        token: state.token,
+        user: state.user,
+        getUser,
+        clearUser,
+        changeUser,
+        changeUserLanguage,
+        changeAuthState,
+        changeLanguageState,
+        clearToken,
+        setToken,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  );
+};
--- a/src/lib/app/hooks/useDirection.jsx
+++ b/src/lib/app/hooks/useDirection.jsx
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { LanguageContext } from "../contexts/language";
+
+const useDirection = () => {
+  const { directionApp } = useContext(LanguageContext);
+
+  return { directionApp };
+};
+
+export default useDirection;
--- a/src/lib/app/hooks/useLanguage.jsx
+++ b/src/lib/app/hooks/useLanguage.jsx
@@ -0,0 +1,28 @@
+import { useContext } from "react";
+import { LanguageContext } from "../contexts/language";
+import useUser from "./useUser";
+
+const useLanguage = () => {
+  const { isAuth, changeUserLanguage } = useUser();
+  const {
+    languageApp,
+    setLanguageApp,
+    languageIsReady,
+    setLanguageIsReady,
+    languageList,
+  } = useContext(LanguageContext);
+
+  const changeLanguage = (lang) => {
+    if (lang == languageApp) return;
+
+    setLanguageIsReady(false);
+    setLanguageApp(lang);
+    if (isAuth) {
+      changeUserLanguage(lang);
+    }
+  };
+
+  return { languageApp, changeLanguage, languageIsReady, languageList };
+};
+
+export default useLanguage;
--- a/src/lib/app/hooks/useLoading.jsx
+++ b/src/lib/app/hooks/useLoading.jsx
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { LoadingContext } from "../contexts/loading";
+
+const useLoading = () => {
+  const { setLoadingPage } = useContext(LoadingContext);
+
+  return { setLoadingPage };
+};
+
+export default useLoading;
--- a/src/lib/app/hooks/useUser.jsx
+++ b/src/lib/app/hooks/useUser.jsx
@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import { UserContext } from "../contexts/user";
+
+const useUser = () => {
+  const {
+    isAuth,
+    userChangedLanguage,
+    token,
+    user,
+    getUser,
+    clearUser,
+    changeUser,
+    changeUserLanguage,
+    changeAuthState,
+    changeLanguageState,
+    clearToken,
+    setToken,
+  } = useContext(UserContext);
+
+  return {
+    isAuth,
+    userChangedLanguage,
+    token,
+    user,
+    getUser,
+    clearUser,
+    changeUser,
+    changeUserLanguage,
+    changeAuthState,
+    changeLanguageState,
+    clearToken,
+    setToken,
+  };
+};
+
+export default useUser;
--- a/src/middlewares/WithAuth.jsx
+++ b/src/middlewares/WithAuth.jsx
@@ -0,0 +1,42 @@
+import { NextLinkComposed } from "@/core/components/LinkRouting";
+import Message from "@/core/components/Messages";
+import useUser from "@/lib/app/hooks/useUser";
+import { Button, Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/router";
+
+const WithAuthMiddleware = ({ children }) => {
+  const { isAuth } = useUser();
+  const t = useTranslations();
+  const router = useRouter();
+
+  if (!isAuth)
+    return (
+      <Message
+        text={
+          <Typography sx={{ textAlign: "center" }}>
+            {t(
+              "typography_your_access_to_this_page_has_expired_Please_login_again"
+            )}
+          </Typography>
+        }
+        actions={
+          <>
+            <Button
+              variant="contained"
+              component={NextLinkComposed}
+              to={{
+                pathname: "/login",
+                query: { back_url: encodeURIComponent(router.asPath) },
+              }}
+            >
+              {t("login")}
+            </Button>
+          </>
+        }
+      />
+    );
+  return <>{children}</>;
+};
+
+export default WithAuthMiddleware;
--- a/src/middlewares/WithoutAuth.jsx
+++ b/src/middlewares/WithoutAuth.jsx
@@ -0,0 +1,56 @@
+import Message from "@/core/components/Messages";
+import useUser from "@/lib/app/hooks/useUser";
+import { Stack, Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+const WithoutAuthMiddleware = ({ children }) => {
+  const { isAuth } = useUser();
+  const t = useTranslations();
+  const router = useRouter();
+
+  // gettin url query
+  const searchParams = useSearchParams();
+  const backUrlDecodedPath = searchParams.get("back_url");
+
+  useEffect(() => {
+    if (!isAuth) return;
+    const timer = setTimeout(() => {
+      router.replace(
+        backUrlDecodedPath
+          ? decodeURIComponent(backUrlDecodedPath)
+          : "/dashboard"
+      );
+    }, 2000);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [isAuth]);
+
+  if (isAuth)
+    return (
+      <Message
+        text={
+          <Stack alignItems="center" spacing={2}>
+            <Typography sx={{ textAlign: "center" }}>
+              {t(
+                "typography_your_login_is_valid_and_you_do_not_need_to_login_again"
+              )}
+            </Typography>
+            <Typography>
+              {t("typography_redirect_to")}{" "}
+              {backUrlDecodedPath
+                ? t("typography_routing_previuos_page")
+                : t("typography_routing_dashbaord_page")}
+            </Typography>
+          </Stack>
+        }
+      />
+    );
+  return <>{children}</>;
+};
+
+export default WithoutAuthMiddleware;
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -0,0 +1,30 @@
+import "&/fontiran.scss";
+import AppLayout from "@/layouts/AppLayout";
+import MuiLayout from "@/layouts/MuiLayout";
+import { LanguageProvider } from "@/lib/app/contexts/language";
+import { LoadingProvider } from "@/lib/app/contexts/loading";
+import { UserProvider } from "@/lib/app/contexts/user";
+import "moment/locale/fa";
+import { NextIntlProvider } from "next-intl";
+
+const App = ({ Component, pageProps }) => {
+  return (
+    <>
+      <UserProvider>
+        <LanguageProvider>
+          <NextIntlProvider messages={pageProps.messages}>
+            <MuiLayout isBot={pageProps.isBot}>
+              <LoadingProvider>
+                <AppLayout isBot={pageProps.isBot}>
+                  <Component {...pageProps} />
+                </AppLayout>
+              </LoadingProvider>
+            </MuiLayout>
+          </NextIntlProvider>
+        </LanguageProvider>
+      </UserProvider>
+    </>
+  );
+};
+
+export default App;
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -0,0 +1,67 @@
+import {
+  createEmotionCacheLtr
+} from "@/core/utils/createEmotionCache";
+import theme from "@/core/utils/theme";
+import createEmotionServer from "@emotion/server/create-instance";
+import Document, { Head, Html, Main, NextScript } from "next/document";
+
+export default function MyDocument(props) {
+  const { emotionStyleTags } = props;
+
+  return (
+    <Html>
+      <Head>
+        <meta name="theme-color" content={theme.palette.primary.main} />
+        <meta name="emotion-insertion-point" content="" />
+        <link rel="shortcut icon" href="/icons/favicon.ico" />
+        <link rel="manifest" href="/manifest.json" />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+        />
+        {emotionStyleTags}
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
+
+MyDocument.getInitialProps = async (ctx) => {
+  const originalRenderPage = ctx.renderPage;
+  let cache;
+  switch (ctx.locale) {
+    case "fa":
+      cache = createEmotionCacheLtr();
+      break;
+  }
+
+  const { extractCriticalToChunks } = createEmotionServer(cache);
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App) =>
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />;
+        },
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
+
+  const emotionStyles = extractCriticalToChunks(initialProps.html);
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(" ")}`}
+      key={style.key}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ));
+
+  return {
+    ...initialProps,
+    emotionStyleTags,
+  };
+};
--- a/src/pages/dashboard/index.jsx
+++ b/src/pages/dashboard/index.jsx
@@ -0,0 +1,23 @@
+import DashboardFirstComponent from "@/components/dashboard/first";
+import TitlePage from "@/core/components/TitlePage";
+import WithAuthMiddleware from "@/middlewares/WithoutAuth";
+import { parse } from "next-useragent";
+
+export default function Dashboard() {
+  return (
+    <WithAuthMiddleware>
+      <TitlePage text="dashboard.dashboard_page" />
+      <DashboardFirstComponent />
+    </WithAuthMiddleware>
+  );
+}
+
+export async function getServerSideProps({ req, locale }) {
+  const { isBot } = parse(req.headers["user-agent"]);
+  return {
+    props: {
+      messages: (await import(`&/locales/${locale}/app.json`)).default,
+      isBot,
+    },
+  };
+}
--- a/src/pages/dashboard/loan-follow-up/index.jsx
+++ b/src/pages/dashboard/loan-follow-up/index.jsx
@@ -0,0 +1,23 @@
+import DashboardLoanFollowUpComponent from "@/components/dashboard/loan-follow-up";
+import TitlePage from "@/core/components/TitlePage";
+import WithAuthMiddleware from "@/middlewares/WithoutAuth";
+import { parse } from "next-useragent";
+
+export default function LoanFollowUp() {
+  return (
+    <WithAuthMiddleware>
+      <TitlePage text="dashboard.dashboard_page" />
+      <DashboardLoanFollowUpComponent />
+    </WithAuthMiddleware>
+  );
+}
+
+export async function getServerSideProps({ req, locale }) {
+  const { isBot } = parse(req.headers["user-agent"]);
+  return {
+    props: {
+      messages: (await import(`&/locales/${locale}/app.json`)).default,
+      isBot,
+    },
+  };
+}
--- a/src/pages/dashboard/loan-request/index.jsx
+++ b/src/pages/dashboard/loan-request/index.jsx
@@ -0,0 +1,23 @@
+import DashboardLoanRequestComponent from "@/components/dashboard/loan-request";
+import TitlePage from "@/core/components/TitlePage";
+import WithAuthMiddleware from "@/middlewares/WithoutAuth";
+import { parse } from "next-useragent";
+
+export default function LoanRequest() {
+  return (
+    <WithAuthMiddleware>
+      <TitlePage text="dashboard.dashboard_page" />
+      <DashboardLoanRequestComponent />
+    </WithAuthMiddleware>
+  );
+}
+
+export async function getServerSideProps({ req, locale }) {
+  const { isBot } = parse(req.headers["user-agent"]);
+  return {
+    props: {
+      messages: (await import(`&/locales/${locale}/app.json`)).default,
+      isBot,
+    },
+  };
+}
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -0,0 +1,22 @@
+import FirstComponent from "@/components/first";
+import TitlePage from "@/core/components/TitlePage";
+import { parse } from "next-useragent";
+
+export default function Home() {
+  return (
+    <>
+      <TitlePage text="first_page" />
+      <FirstComponent />
+    </>
+  );
+}
+
+export async function getServerSideProps({ req, locale }) {
+  const { isBot } = parse(req.headers["user-agent"]);
+  return {
+    props: {
+      messages: (await import(`&/locales/${locale}/app.json`)).default,
+      isBot,
+    },
+  };
+}
--- a/src/pages/login-navy.jsx
+++ b/src/pages/login-navy.jsx
@@ -0,0 +1,28 @@
+import LoginComponent from "@/components/login-navy";
+import TitlePage from "@/core/components/TitlePage";
+import WithoutAuthMiddleware from "@/middlewares/WithoutAuth";
+import { parse } from "next-useragent";
+import "react-toastify/dist/ReactToastify.css";
+import { ToastContainer } from "react-toastify";
+import useDirection from "@/lib/app/hooks/useDirection";
+
+export default function LoginNavy() {
+  const { directionApp } = useDirection();
+  return (
+    <WithoutAuthMiddleware>
+      <TitlePage text="Titles.title_login_navy_page" />
+      <LoginComponent />
+      {directionApp === "rtl" ? <ToastContainer rtl /> : <ToastContainer ltr />}
+    </WithoutAuthMiddleware>
+  );
+}
+
+export async function getServerSideProps({ req, locale }) {
+  const { isBot } = parse(req.headers["user-agent"]);
+  return {
+    props: {
+      messages: (await import(`&/locales/${locale}/app.json`)).default,
+      isBot,
+    },
+  };
+}
--- a/Show More
+++ b/Show More