init project

2023-07-10 10:48:53 +03:30
parent 75fc37753a
commit 5aeb3f0f64
104 changed files with 11256 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/README.md
+++ b/README.md
@@ -0,0 +1,92 @@
+# loan-facilities-user
+
+
+
+## Getting started
+
+To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+
+Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+
+## Add your files
+
+- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
+- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+
+```
+cd existing_repo
+git remote add origin https://gitlab.com/witel3/loan-facilities-user.git
+git branch -M main
+git push -uf origin main
+```
+
+## Integrate with your tools
+
+- [ ] [Set up project integrations](https://gitlab.com/witel3/loan-facilities-user/-/settings/integrations)
+
+## Collaborate with your team
+
+- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
+- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
+- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
+- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
+- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+
+## Test and Deploy
+
+Use the built-in continuous integration in GitLab.
+
+- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
+- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
+- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
+- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
+- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+
+***
+
+# Editing this README
+
+When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
+
+## Suggestions for a good README
+Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+
+## Name
+Choose a self-explaining name for your project.
+
+## Description
+Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+
+## Badges
+On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+
+## Visuals
+Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+
+## Installation
+Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+
+## Usage
+Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+
+## Support
+Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
+
+## Roadmap
+If you have ideas for releases in the future, it is a good idea to list them in the README.
+
+## Contributing
+State if you are open to contributions and what your requirements are for accepting them.
+
+For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
+
+You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
+
+## Authors and acknowledgment
+Show your appreciation to those who have contributed to the project.
+
+## License
+For open source projects, say how it is licensed.
+
+## Project status
+If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
--- 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/Show More
+++ b/Show More