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

recode and add editor config file

Browse Source
This commit is contained in:
Amirhossein Mahmoodi
2023-07-31 09:34:59 +03:30
parent ba91b97e7c
commit 51b21957b9
108 changed files with 5993 additions and 5770 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
jsconfig.json
View File

@@ -1,8 +1,12 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"],
"&/*": ["./public/*"],
"@/*": [
"./src/*"
],
"&/*": [
"./public/*"
]
}
}
}

12
next.config.js
View File

@@ -1,12 +1,12 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
i18n: {
defaultLocale: 'fa',
locales: ['fa'],
localeDetection: false,
},
reactStrictMode: true,
i18n: {
defaultLocale: 'fa',
locales: ['fa'],
localeDetection: false,
},
}
module.exports = nextConfig

228
public/fontiran.scss
View File

@@ -17,145 +17,153 @@ This set of fonts are used in this project under the license: (.....)
*
**/
@font-face {
font-family: IRANSansFaNum;
font-style: normal;
font-weight: 900;
src: url('./fonts/eot/IRANSansWeb(FaNum)_Black.eot');
src: url('./fonts/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'),/* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'),/* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'),/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum)_Black.ttf') format('truetype');
font-family: IRANSansFaNum;
font-style: normal;
font-weight: 900;
src: url('./fonts/eot/IRANSansWeb(FaNum)_Black.eot');
src: url('./fonts/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum)_Black.ttf') format('truetype');
}
@font-face {
font-family: IRANSansFaNum;
font-style: normal;
font-weight: bold;
src: url('./fonts/eot/IRANSansWeb(FaNum)_Bold.eot');
src: url('./fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'),/* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'),/* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'),/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
font-family: IRANSansFaNum;
font-style: normal;
font-weight: bold;
src: url('./fonts/eot/IRANSansWeb(FaNum)_Bold.eot');
src: url('./fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}
@font-face {
font-family: IRANSansFaNum;
font-style: normal;
font-weight: 500;
src: url('./fonts/eot/IRANSansWeb(FaNum)_Medium.eot');
src: url('./fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'),/* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'),/* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'),/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
font-family: IRANSansFaNum;
font-style: normal;
font-weight: 500;
src: url('./fonts/eot/IRANSansWeb(FaNum)_Medium.eot');
src: url('./fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}
@font-face {
font-family: IRANSansFaNum;
font-style: normal;
font-weight: 300;
src: url('./fonts/eot/IRANSansWeb(FaNum)_Light.eot');
src: url('./fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),/* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),/* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
font-family: IRANSansFaNum;
font-style: normal;
font-weight: 300;
src: url('./fonts/eot/IRANSansWeb(FaNum)_Light.eot');
src: url('./fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}
@font-face {
font-family: IRANSansFaNum;
font-style: normal;
font-weight: 200;
src: url('./fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot');
src: url('./fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'),/* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'),/* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'),/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
font-family: IRANSansFaNum;
font-style: normal;
font-weight: 200;
src: url('./fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot');
src: url('./fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}
@font-face {
font-family: IRANSansFaNum;
font-style: normal;
font-weight: normal;
src: url('./fonts/eot/IRANSansWeb(FaNum).eot');
src: url('./fonts/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),/* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'),/* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum).woff') format('woff'),/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
font-family: IRANSansFaNum;
font-style: normal;
font-weight: normal;
src: url('./fonts/eot/IRANSansWeb(FaNum).eot');
src: url('./fonts/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('./fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('./fonts/woff/IRANSansWeb(FaNum).woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./fonts/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}
@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-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-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-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-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-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-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-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');
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');
}

65
public/images/change-password.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

105
public/images/dashboard.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 10 KiB

122
public/images/loading_logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 13 KiB

61
public/images/login.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

23
public/images/logo.svg
View File

@@ -1,10 +1,19 @@
<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 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>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

180
public/locales/fa/datatable.js
View File

@@ -1,92 +1,92 @@
export const FA_DATATABLE_LOCALIZATION = {
actions: "عملیات",
and: "و",
cancel: "لغو",
changeFilterMode: "تغییر حالت فیلتر",
changeSearchMode: "تغییر حالت جستجو",
clearFilter: "پاک کردن فیلتر",
clearSearch: "پاک کردن جستجو",
clearSort: "پاک کردن مرتب سازی",
clickToCopy: "کلیک برای کپی",
collapse: "جمع شدن",
collapseAll: "جمع شدن همه",
columnActions: "عملیات ستون",
copiedToClipboard: "کپی شد",
dropToGroupBy: "رها کردن برای گروه بندی بر اساس {column}",
edit: "ویرایش",
expand: "باز شدن",
expandAll: "باز شدن همه",
filterArrIncludes: "شامل",
filterArrIncludesAll: "شامل همه",
filterArrIncludesSome: "شامل",
filterBetween: "میان",
filterBetweenInclusive: "میان با احتساب هر دو",
filterByColumn: "فیلتر بر اساس {column}",
filterContains: "شامل",
filterEmpty: "خالی",
filterEndsWith: "به پایان می‌رسد با",
filterEquals: "برابر",
filterEqualsString: "برابر",
filterFuzzy: "نزدیک",
filterGreaterThan: "بزرگتر از",
filterGreaterThanOrEqualTo: "بزرگتر یا مساوی",
filterInNumberRange: "میان",
filterIncludesString: "شامل",
filterIncludesStringSensitive: "شامل",
filterLessThan: "کوچکتر از",
filterLessThanOrEqualTo: "کوچکتر یا مساوی",
filterMode: "حالت فیلتر: {filterType}",
filterNotEmpty: "غیر خالی",
filterNotEquals: "نا برابر",
filterStartsWith: "شروع می‌شود با",
filterWeakEquals: "برابر",
filteringByColumn: "فیلتر بر اساس {column} - {filterType} {filterValue}",
goToFirstPage: "رفتن به صفحه اول",
goToLastPage: "رفتن به صفحه آخر",
goToNextPage: "رفتن به صفحه بعدی",
goToPreviousPage: "رفتن به صفحه قبلی",
grab: "گرفتن",
groupByColumn: "گروه بندی بر اساس {column}",
groupedBy: "گروه بندی شده بر اساس",
hideAll: "پنهان کردن همه",
hideColumn: "پنهان کردن ستون {column}",
max: "حداکثر",
min: "حداقل",
move: "انتقال",
noRecordsToDisplay: "هیچ رکوردی برای نمایش وجود ندارد",
noResultsFound: "نتیجه‌ای یافت نشد",
of: "از",
or: "یا",
pinToLeft: "چسباندن به سمت چپ",
pinToRight: "چسباندن به سمت راست",
resetColumnSize: "بازنشانی اندازه ستون",
resetOrder: "بازنشانی ترتیب",
rowActions: "عملیات ردیف",
rowNumber: "#",
rowNumbers: "شماره ردیف",
rowsPerPage: "ردیف در هر صفحه",
save: "ذخیره",
search: "جستجو",
selectedCountOfRowCountRowsSelected:
"{selectedCount} از {rowCount} ردیف انتخاب شده",
select: "انتخاب",
showAll: "نمایش همه",
showAllColumns: "نمایش همه ستون‌ها",
showHideColumns: "نمایش/مخفی کردن ستون‌ها",
showHideFilters: "نمایش/مخفی کردن فیلترها",
showHideSearch: "نمایش/مخفی کردن جستجو",
sortByColumnAsc: "مرتب سازی بر اساس {column} صعودی",
sortByColumnDesc: "مرتب سازی بر اساس {column} نزولی",
sortedByColumnAsc: "مرتب شده بر اساس {column} صعودی",
sortedByColumnDesc: "مرتب شده بر اساس {column} نزولی",
thenBy: "، سپس بر اساس ",
toggleDensity: "تغییر تراکم",
toggleFullScreen: "تغییر حالت تمام صفحه",
toggleSelectAll: "انتخاب/عدم انتخاب همه",
toggleSelectRow: "انتخاب/عدم انتخاب ردیف",
toggleVisibility: "تغییر پیدا/پنهان",
ungroupByColumn: "لغو گروه بندی بر اساس {column}",
unpin: "رها کردن",
unpinAll: "رها کردن همه",
unsorted: "بدون مرتب سازی",
actions: "عملیات",
and: "و",
cancel: "لغو",
changeFilterMode: "تغییر حالت فیلتر",
changeSearchMode: "تغییر حالت جستجو",
clearFilter: "پاک کردن فیلتر",
clearSearch: "پاک کردن جستجو",
clearSort: "پاک کردن مرتب سازی",
clickToCopy: "کلیک برای کپی",
collapse: "جمع شدن",
collapseAll: "جمع شدن همه",
columnActions: "عملیات ستون",
copiedToClipboard: "کپی شد",
dropToGroupBy: "رها کردن برای گروه بندی بر اساس {column}",
edit: "ویرایش",
expand: "باز شدن",
expandAll: "باز شدن همه",
filterArrIncludes: "شامل",
filterArrIncludesAll: "شامل همه",
filterArrIncludesSome: "شامل",
filterBetween: "میان",
filterBetweenInclusive: "میان با احتساب هر دو",
filterByColumn: "فیلتر بر اساس {column}",
filterContains: "شامل",
filterEmpty: "خالی",
filterEndsWith: "به پایان می‌رسد با",
filterEquals: "برابر",
filterEqualsString: "برابر",
filterFuzzy: "نزدیک",
filterGreaterThan: "بزرگتر از",
filterGreaterThanOrEqualTo: "بزرگتر یا مساوی",
filterInNumberRange: "میان",
filterIncludesString: "شامل",
filterIncludesStringSensitive: "شامل",
filterLessThan: "کوچکتر از",
filterLessThanOrEqualTo: "کوچکتر یا مساوی",
filterMode: "حالت فیلتر: {filterType}",
filterNotEmpty: "غیر خالی",
filterNotEquals: "نا برابر",
filterStartsWith: "شروع می‌شود با",
filterWeakEquals: "برابر",
filteringByColumn: "فیلتر بر اساس {column} - {filterType} {filterValue}",
goToFirstPage: "رفتن به صفحه اول",
goToLastPage: "رفتن به صفحه آخر",
goToNextPage: "رفتن به صفحه بعدی",
goToPreviousPage: "رفتن به صفحه قبلی",
grab: "گرفتن",
groupByColumn: "گروه بندی بر اساس {column}",
groupedBy: "گروه بندی شده بر اساس",
hideAll: "پنهان کردن همه",
hideColumn: "پنهان کردن ستون {column}",
max: "حداکثر",
min: "حداقل",
move: "انتقال",
noRecordsToDisplay: "هیچ رکوردی برای نمایش وجود ندارد",
noResultsFound: "نتیجه‌ای یافت نشد",
of: "از",
or: "یا",
pinToLeft: "چسباندن به سمت چپ",
pinToRight: "چسباندن به سمت راست",
resetColumnSize: "بازنشانی اندازه ستون",
resetOrder: "بازنشانی ترتیب",
rowActions: "عملیات ردیف",
rowNumber: "#",
rowNumbers: "شماره ردیف",
rowsPerPage: "ردیف در هر صفحه",
save: "ذخیره",
search: "جستجو",
selectedCountOfRowCountRowsSelected:
"{selectedCount} از {rowCount} ردیف انتخاب شده",
select: "انتخاب",
showAll: "نمایش همه",
showAllColumns: "نمایش همه ستون‌ها",
showHideColumns: "نمایش/مخفی کردن ستون‌ها",
showHideFilters: "نمایش/مخفی کردن فیلترها",
showHideSearch: "نمایش/مخفی کردن جستجو",
sortByColumnAsc: "مرتب سازی بر اساس {column} صعودی",
sortByColumnDesc: "مرتب سازی بر اساس {column} نزولی",
sortedByColumnAsc: "مرتب شده بر اساس {column} صعودی",
sortedByColumnDesc: "مرتب شده بر اساس {column} نزولی",
thenBy: "، سپس بر اساس ",
toggleDensity: "تغییر تراکم",
toggleFullScreen: "تغییر حالت تمام صفحه",
toggleSelectAll: "انتخاب/عدم انتخاب همه",
toggleSelectRow: "انتخاب/عدم انتخاب ردیف",
toggleVisibility: "تغییر پیدا/پنهان",
ungroupByColumn: "لغو گروه بندی بر اساس {column}",
unpin: "رها کردن",
unpinAll: "رها کردن همه",
unsorted: "بدون مرتب سازی",
};

325
src/components/dashboard/change-password/index.jsx
View File

@@ -1,184 +1,177 @@
import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {
Button,
Typography,
Stack,
Paper,
Container,
Box,
} from "@mui/material";
import {Box, Button, Container, Paper, Stack, Typography,} from "@mui/material";
import Image from "next/image";
import { Formik } from "formik";
import {Formik} from "formik";
import * as Yup from "yup";
import { useTranslations } from "next-intl";
import {useTranslations} from "next-intl";
import PasswordField from "@/core/components/PasswordField";
import StyledForm from "@/core/components/StyledForm";
import { CHANGE_PASSWORD } from "@/core/data/apiRoutes";
import {CHANGE_PASSWORD} from "@/core/data/apiRoutes";
import useUser from "@/lib/app/hooks/useUser";
import axios from "axios";
import Notifications from "@/core/components/notifications";
import useDirection from "@/lib/app/hooks/useDirection";
import { toast } from "react-toastify";
import {toast} from "react-toastify";
const DashboardChangePasswordComponent = () => {
const t = useTranslations();
const { token } = useUser();
const { directionApp } = useDirection();
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const handleSubmit = (values, { setSubmitting, resetForm }) => {
toast.dismiss();
const pendingToast = toast(t("notifications.pending"), {
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
const handleSubmit = (values, {setSubmitting, resetForm}) => {
toast.dismiss();
const pendingToast = toast(t("notifications.pending"), {
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
});
axios
.post(
CHANGE_PASSWORD,
{
current_password: values.current_password,
new_password: values.new_password,
new_password_confirmation: values.new_password_confirmation,
},
{
headers: {authorization: `Bearer ${token}`},
}
)
.then((response) => {
toast.dismiss(pendingToast); // Dismiss the pending toast notification
Notifications(directionApp, response, t);
resetForm();
})
.catch((error) => {
toast.dismiss(pendingToast); // Dismiss the pending toast notification
Notifications(directionApp, error.response, t);
})
.finally(() => {
setSubmitting(false); // Set `setSubmitting` to false after the API request completes
});
};
const initialValues = {
current_password: "",
new_password: "",
new_password_confirmation: "",
};
const validationSchema = Yup.object().shape({
current_password: Yup.string().required(
t("ChangePassword.error_message_required")
),
new_password: Yup.string()
.min(8, t("ChangePassword.error_message_password_length"))
.required(t("ChangePassword.error_message_required")),
new_password_confirmation: Yup.string()
.required(t("ChangePassword.error_message_required"))
.test(
t("ChangePassword.error_message_password_match"),
t("ChangePassword.error_message_password_not_match"),
function (value) {
return this.parent.new_password === value;
}
),
});
axios
.post(
CHANGE_PASSWORD,
{
current_password: values.current_password,
new_password: values.new_password,
new_password_confirmation: values.new_password_confirmation,
},
{
headers: { authorization: `Bearer ${token}` },
}
)
.then((response) => {
toast.dismiss(pendingToast); // Dismiss the pending toast notification
Notifications(directionApp, response, t);
resetForm();
})
.catch((error) => {
toast.dismiss(pendingToast); // Dismiss the pending toast notification
Notifications(directionApp, error.response, t);
})
.finally(() => {
setSubmitting(false); // Set `setSubmitting` to false after the API request completes
});
};
const initialValues = {
current_password: "",
new_password: "",
new_password_confirmation: "",
};
const validationSchema = Yup.object().shape({
current_password: Yup.string().required(
t("ChangePassword.error_message_required")
),
new_password: Yup.string()
.min(8, t("ChangePassword.error_message_password_length"))
.required(t("ChangePassword.error_message_required")),
new_password_confirmation: Yup.string()
.required(t("ChangePassword.error_message_required"))
.test(
t("ChangePassword.error_message_password_match"),
t("ChangePassword.error_message_password_not_match"),
function (value) {
return this.parent.new_password === value;
}
),
});
return (
<DashboardLayouts>
<CenterLayout>
<Container maxWidth="sm">
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
<StyledForm
onSubmit={(e) => {
e.preventDefault();
props.handleSubmit();
}}
>
<Paper elevation={0}>
<Stack spacing={3} sx={{ p: 5 }} component="div">
<Box
sx={{ position: "relative", width: "100%", height: 200 }}
return (
<DashboardLayouts>
<CenterLayout>
<Container maxWidth="sm">
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
<Image fill src="/images/change-password.svg" alt="" />
</Box>
<Typography margin={2} variant="h4" textAlign="center">
{t("ChangePassword.typography_change_password")}
</Typography>
<Stack spacing={1} component="div">
<PasswordField
name="current_password"
label={t("ChangePassword.label_current_password")}
error={
props.touched.current_password &&
props.errors.current_password
? true
: false
}
helperText={
props.touched.current_password
? props.errors.current_password
: null
}
/>
</Stack>
<Stack spacing={1} component="div">
<PasswordField
name="new_password"
label={t("ChangePassword.label_new_password")}
error={
props.touched.new_password &&
props.errors.new_password
? true
: false
}
helperText={
props.touched.new_password
? props.errors.new_password
: null
}
/>
</Stack>
<Stack spacing={1} component="div">
<PasswordField
name="new_password_confirmation"
label={t("ChangePassword.label_confirm_password")}
error={
props.touched.new_password_confirmation &&
props.errors.new_password_confirmation
? true
: false
}
helperText={
props.touched.new_password_confirmation
? props.errors.new_password_confirmation
: null
}
/>
</Stack>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
size="large"
disabled={props.isSubmitting}
>
{props.isSubmitting
? t("SubmitButton.button_while_submit")
: t("SubmitButton.button_submit")}
</Button>
</Stack>
</Paper>
</StyledForm>
)}
</Formik>
</Container>
</CenterLayout>
</DashboardLayouts>
);
{(props) => (
<StyledForm
onSubmit={(e) => {
e.preventDefault();
props.handleSubmit();
}}
>
<Paper elevation={0}>
<Stack spacing={3} sx={{p: 5}} component="div">
<Box
sx={{position: "relative", width: "100%", height: 200}}
>
<Image fill src="/images/change-password.svg" alt=""/>
</Box>
<Typography margin={2} variant="h4" textAlign="center">
{t("ChangePassword.typography_change_password")}
</Typography>
<Stack spacing={1} component="div">
<PasswordField
name="current_password"
label={t("ChangePassword.label_current_password")}
error={
props.touched.current_password &&
props.errors.current_password
? true
: false
}
helperText={
props.touched.current_password
? props.errors.current_password
: null
}
/>
</Stack>
<Stack spacing={1} component="div">
<PasswordField
name="new_password"
label={t("ChangePassword.label_new_password")}
error={
props.touched.new_password &&
props.errors.new_password
? true
: false
}
helperText={
props.touched.new_password
? props.errors.new_password
: null
}
/>
</Stack>
<Stack spacing={1} component="div">
<PasswordField
name="new_password_confirmation"
label={t("ChangePassword.label_confirm_password")}
error={
props.touched.new_password_confirmation &&
props.errors.new_password_confirmation
? true
: false
}
helperText={
props.touched.new_password_confirmation
? props.errors.new_password_confirmation
: null
}
/>
</Stack>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
size="large"
disabled={props.isSubmitting}
>
{props.isSubmitting
? t("SubmitButton.button_while_submit")
: t("SubmitButton.button_submit")}
</Button>
</Stack>
</Paper>
</StyledForm>
)}
</Formik>
</Container>
</CenterLayout>
</DashboardLayouts>
);
};
export default DashboardChangePasswordComponent;

523
src/components/dashboard/edit-profile/index.jsx
View File

@@ -2,277 +2,268 @@ import StyledForm from "@/core/components/StyledForm";
import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import useUser from "@/lib/app/hooks/useUser";
import {
Box,
Button,
Container,
Grid,
Paper,
Stack,
TextField,
Typography,
} from "@mui/material";
import {Box, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
import * as Yup from "yup";
import { Field, Formik } from "formik";
import { useTranslations } from "next-intl";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import AvatarUpload from "@/core/components/AvatarUpload";
import axios from "axios";
import { UPDATE_PROFILE, UPDATE_AVATAR } from "@/core/data/apiRoutes";
import {UPDATE_AVATAR} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import Notifications from "@/core/components/notifications";
import ImageResizer from "@/core/components/ImageConvertor";
const DashboardEditProfile = () => {
const t = useTranslations();
const { user, token, getUser, changeUser } = useUser();
console.log(user);
const { directionApp } = useDirection();
const t = useTranslations();
const {user, token, getUser, changeUser} = useUser();
console.log(user);
const {directionApp} = useDirection();
const editAvatar = async (avatar) => {
try {
const formData = new FormData();
const editAvatar = async (avatar) => {
try {
const formData = new FormData();
if (avatar != null) {
var resizedAvatar;
resizedAvatar = await ImageResizer(avatar);
formData.append("avatar", resizedAvatar);
}
if (avatar != null) {
var resizedAvatar;
resizedAvatar = await ImageResizer(avatar);
formData.append("avatar", resizedAvatar);
}
await axios.post(UPDATE_AVATAR, formData, {
headers: {
authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
},
});
} catch (error) {
Notifications(directionApp, error.response, t);
throw error;
}
};
const handleSubmit = (values, { setSubmitting }) => {
// const formData = new FormData();
// formData.append("email", values.expert_email);
// if (values.change_avatar !== false) {
// editAvatar(values.expert_avatar)
// .then(() => {
// return axios.post(UPDATE_PROFILE, formData, {
// headers: {
// authorization: `Bearer ${token}`,
// "Content-Type": "multipart/form-data",
// },
// });
// })
// .then((response) => {
// Notifications(directionApp, response, t);
// getUser((data) => {
// changeUser(data);
// });
// })
// .catch((error) => {
// Notifications(directionApp, error.response, t);
// })
// .finally(() => {
// setSubmitting(false);
// });
// } else {
// axios
// .post(UPDATE_PROFILE, formData, {
// headers: {
// authorization: `Bearer ${token}`,
// "Content-Type": "multipart/form-data",
// },
// })
// .then((response) => {
// Notifications(directionApp, response, t);
// getUser((data) => {
// changeUser(data);
// });
// })
// .catch((error) => {
// Notifications(directionApp, error.response, t);
// })
// .finally(() => {
// setSubmitting(false);
// });
// }
};
const initialValues = {
expert_avatar: null,
username: user.username,
name: user.name,
email: user.email,
province_name: user.province_name,
position: user.position,
};
const validationSchema = Yup.object().shape({
// username: Yup.string().required(t("UpdateProfile.error_message_required")),
// name: Yup.string().required(t("UpdateProfile.error_message_required")),
// email: Yup.string()
// .email(t("UpdateProfile.error_invalid_email"))
// .required(t("UpdateProfile.error_message_required")),
// province_name: Yup.string().required(
// t("UpdateProfile.error_message_required")
// ),
// position: Yup.string().required(t("UpdateProfile.error_message_required")),
});
await axios.post(UPDATE_AVATAR, formData, {
headers: {
authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
},
});
} catch (error) {
Notifications(directionApp, error.response, t);
throw error;
}
};
const handleSubmit = (values, {setSubmitting}) => {
// const formData = new FormData();
// formData.append("email", values.expert_email);
// if (values.change_avatar !== false) {
// editAvatar(values.expert_avatar)
// .then(() => {
// return axios.post(UPDATE_PROFILE, formData, {
// headers: {
// authorization: `Bearer ${token}`,
// "Content-Type": "multipart/form-data",
// },
// });
// })
// .then((response) => {
// Notifications(directionApp, response, t);
// getUser((data) => {
// changeUser(data);
// });
// })
// .catch((error) => {
// Notifications(directionApp, error.response, t);
// })
// .finally(() => {
// setSubmitting(false);
// });
// } else {
// axios
// .post(UPDATE_PROFILE, formData, {
// headers: {
// authorization: `Bearer ${token}`,
// "Content-Type": "multipart/form-data",
// },
// })
// .then((response) => {
// Notifications(directionApp, response, t);
// getUser((data) => {
// changeUser(data);
// });
// })
// .catch((error) => {
// Notifications(directionApp, error.response, t);
// })
// .finally(() => {
// setSubmitting(false);
// });
// }
};
const initialValues = {
expert_avatar: null,
username: user.username,
name: user.name,
email: user.email,
province_name: user.province_name,
position: user.position,
};
const validationSchema = Yup.object().shape({
// username: Yup.string().required(t("UpdateProfile.error_message_required")),
// name: Yup.string().required(t("UpdateProfile.error_message_required")),
// email: Yup.string()
// .email(t("UpdateProfile.error_invalid_email"))
// .required(t("UpdateProfile.error_message_required")),
// province_name: Yup.string().required(
// t("UpdateProfile.error_message_required")
// ),
// position: Yup.string().required(t("UpdateProfile.error_message_required")),
});
return (
<DashboardLayouts>
<CenterLayout>
<Container maxWidth="sm">
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
<StyledForm
onSubmit={(e) => {
e.preventDefault();
props.handleSubmit();
}}
>
<Paper elevation={0}>
<Stack spacing={3} sx={{ p: 5 }} component="div">
<Typography margin={2} variant="h4" textAlign="center">
{t("UpdateProfile.typography_edit_profile")}
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
return (
<DashboardLayouts>
<CenterLayout>
<Container maxWidth="sm">
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
<AvatarUpload
user={user}
setFieldValue={props.setFieldValue}
valueAvatar="expert_avatar"
changeFlag="change_avatar"
/>
</Box>
<Grid container spacing={2} sx={{ pb: 2 }}>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="username"
label={t("UpdateProfile.text_field_username")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={
props.touched.username && props.errors.username
? true
: false
}
helperText={
props.touched.username
? props.errors.username
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="name"
label={t("UpdateProfile.text_field_name")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={
props.touched.name && props.errors.name
? true
: false
}
helperText={
props.touched.name ? props.errors.name : null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="email"
label={t("UpdateProfile.text_field_email")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={
props.touched.email && props.errors.email
? true
: false
}
helperText={
props.touched.email ? props.errors.email : null
}
sx={{
width: "100%",
}}
/>
</Grid>
{(props) => (
<StyledForm
onSubmit={(e) => {
e.preventDefault();
props.handleSubmit();
}}
>
<Paper elevation={0}>
<Stack spacing={3} sx={{p: 5}} component="div">
<Typography margin={2} variant="h4" textAlign="center">
{t("UpdateProfile.typography_edit_profile")}
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
<AvatarUpload
user={user}
setFieldValue={props.setFieldValue}
valueAvatar="expert_avatar"
changeFlag="change_avatar"
/>
</Box>
<Grid container spacing={2} sx={{pb: 2}}>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="username"
label={t("UpdateProfile.text_field_username")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={
props.touched.username && props.errors.username
? true
: false
}
helperText={
props.touched.username
? props.errors.username
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="name"
label={t("UpdateProfile.text_field_name")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={
props.touched.name && props.errors.name
? true
: false
}
helperText={
props.touched.name ? props.errors.name : null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="email"
label={t("UpdateProfile.text_field_email")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={
props.touched.email && props.errors.email
? true
: false
}
helperText={
props.touched.email ? props.errors.email : null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="province_name"
label={t("UpdateProfile.text_field_province_name")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={
props.touched.province_name &&
props.errors.province_name
? true
: false
}
helperText={
props.touched.province_name
? props.errors.province_name
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="position"
label={t("UpdateProfile.text_field_position")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={
props.touched.position && props.errors.position
? true
: false
}
helperText={
props.touched.position
? props.errors.position
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
</Grid>
{/* <Button
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="province_name"
label={t("UpdateProfile.text_field_province_name")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={
props.touched.province_name &&
props.errors.province_name
? true
: false
}
helperText={
props.touched.province_name
? props.errors.province_name
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="position"
label={t("UpdateProfile.text_field_position")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={
props.touched.position && props.errors.position
? true
: false
}
helperText={
props.touched.position
? props.errors.position
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
</Grid>
{/* <Button
type="submit"
fullWidth
variant="contained"
@@ -285,15 +276,15 @@ const DashboardEditProfile = () => {
? t("SubmitButton.button_while_submit")
: t("SubmitButton.button_submit")}
</Button> */}
</Stack>
</Paper>
</StyledForm>
)}
</Formik>
</Container>
</CenterLayout>
</DashboardLayouts>
);
</Stack>
</Paper>
</StyledForm>
)}
</Formik>
</Container>
</CenterLayout>
</DashboardLayouts>
);
};
export default DashboardEditProfile;

2
src/components/dashboard/first/index.jsx
View File

@@ -1,7 +1,7 @@
import DashboardLayouts from "@/layouts/dashboardLayouts";
const DashboardFirstComponent = () => {
return <DashboardLayouts></DashboardLayouts>;
return <DashboardLayouts></DashboardLayouts>;
};
export default DashboardFirstComponent;

252
src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
View File

@@ -1,140 +1,132 @@
import { CONFIRM_MACHINARY_OFFICE } from "@/core/data/apiRoutes";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { useFormik } from "formik";
import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {useFormik} from "formik";
import * as Yup from "yup";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
//formik
const validationSchema = Yup.object().shape({
proposed_amount: Yup.string().required(t("ConfirmDialog.amount_error")),
});
const formik = useFormik({
initialValues: {
proposed_amount: "",
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("proposed_amount", proposedAmount);
if (description != "") formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_MACHINARY_OFFICE, rowId, formData);
},
});
//formik
const validationSchema = Yup.object().shape({
proposed_amount: Yup.string().required(t("ConfirmDialog.amount_error")),
});
const formik = useFormik({
initialValues: {
proposed_amount: "",
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("proposed_amount", proposedAmount);
if (description != "") formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_MACHINARY_OFFICE, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
};
const handleAmountChange = (event) => {
if (/^\d*$/.test(event.target.value)) {
setProposedAmount(event.target.value);
}
formik.handleChange(event);
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
};
const handleAmountChange = (event) => {
if (/^\d*$/.test(event.target.value)) {
setProposedAmount(event.target.value);
}
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<TextField
name="proposed_amount"
label={t("ConfirmDialog.proposed_amount")}
type="number"
inputProps={{
min: 0,
inputMode: "numeric",
pattern: "[0-9]*",
}}
variant="outlined"
value={proposedAmount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("proposed_amount")}
error={
formik.touched.proposed_amount &&
Boolean(formik.errors.proposed_amount)
}
helperText={
formik.touched.proposed_amount && formik.errors.proposed_amount
}
sx={{ mt: 1 }}
fullWidth
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<TextField
name="proposed_amount"
label={t("ConfirmDialog.proposed_amount")}
type="number"
inputProps={{
min: 0,
inputMode: "numeric",
pattern: "[0-9]*",
}}
variant="outlined"
value={proposedAmount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("proposed_amount")}
error={
formik.touched.proposed_amount &&
Boolean(formik.errors.proposed_amount)
}
helperText={
formik.touched.proposed_amount && formik.errors.proposed_amount
}
sx={{mt: 1}}
fullWidth
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
};
export default ConfirmForm;

198
src/components/dashboard/machinary-office/Form/RejectForm.jsx
View File

@@ -1,116 +1,108 @@
import { REJECT_MACHINARY_OFFICE } from "@/core/data/apiRoutes";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import {REJECT_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
import * as Yup from "yup";
import { useState } from "react";
import {useState} from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_MACHINARY_OFFICE, rowId, formData);
},
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_MACHINARY_OFFICE, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
};
export default RejectForm;

104
src/components/dashboard/machinary-office/TableRowActions.jsx
View File

@@ -1,60 +1,60 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import { Box, IconButton, Tooltip } from "@mui/material";
import { useContext } from "react";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useContext} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import { useTranslations } from "next-intl";
import { DataTableContext } from "@/lib/app/contexts/DatatableContext";
import {useTranslations} from "next-intl";
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
const TableRowActions = ({ row }) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
}}
>
<ThumbUpAltIcon />
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<ThumbDownIcon />
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
</Box>
);
const TableRowActions = ({row}) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
</Box>
);
};
export default TableRowActions;

16
src/components/dashboard/machinary-office/TableTolbar.jsx
View File

@@ -1,13 +1,13 @@
import { Stack, Tooltip } from "@mui/material";
import { useTranslations } from "next-intl";
import {Stack, Tooltip} from "@mui/material";
import {useTranslations} from "next-intl";
function TableToolbar() {
const t = useTranslations();
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
</Stack>
);
const t = useTranslations();
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
</Stack>
);
}
export default TableToolbar;

457
src/components/dashboard/machinary-office/index.jsx
View File

@@ -1,244 +1,241 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import { Box, IconButton, Typography } from "@mui/material";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { useMemo } from "react";
import {useMemo} from "react";
// import TableToolbar from "./TableTollbar";
import { GET_MACHINARY_OFFICE } from "@/core/data/apiRoutes";
import { useTranslations } from "next-intl";
import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
import {
LocalizationProvider,
MobileDateTimePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales";
import {faIR} from "@mui/x-date-pickers/locales";
function DashboardMachinaryOfficeComponent() {
const t = useTranslations();
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("PassengerOffice.id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
const t = useTranslations();
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("PassengerOffice.id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("MachinaryOffice.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("MachinaryOffice.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("MachinaryOffice.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("MachinaryOffice.created_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Filter: ({column}) => {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{display: "flex", alignItems: "start"}}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: {minWidth: "120px"},
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon/>
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("MachinaryOffice.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("MachinaryOffice.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("MachinaryOffice.vehicle_type"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("MachinaryOffice.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
// filterVariant: "select",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("MachinaryOffice.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("MachinaryOffice.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("MachinaryOffice.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("MachinaryOffice.created_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({ renderedCellValue }) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({ column }) => <em>{column.columnDef.header}</em>,
Filter: ({ column }) => {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{ display: "flex", alignItems: "start" }}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: { minWidth: "120px" },
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
[]
);
return (
<DashboardLayouts>
<Box sx={{px: 3}}>
<DataTableStructure
tableUrl={GET_MACHINARY_OFFICE}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={true}
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({row}) => <TableRowActions row={row}/>}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon />
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("MachinaryOffice.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("MachinaryOffice.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("MachinaryOffice.vehicle_type"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("MachinaryOffice.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
// filterVariant: "select",
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
[]
);
return (
<DashboardLayouts>
<Box sx={{ px: 3 }}>
<DataTableStructure
tableUrl={GET_MACHINARY_OFFICE}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={true}
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({ row }) => <TableRowActions row={row} />}
/>
</Box>
</DashboardLayouts>
);
</DashboardLayouts>
);
}
export default DashboardMachinaryOfficeComponent;

256
src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
View File

@@ -1,142 +1,134 @@
import { CONFIRM_PASSENGER_BOSS } from "@/core/data/apiRoutes";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { useFormik } from "formik";
import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes";
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {useFormik} from "formik";
import * as Yup from "yup";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
//formik
const validationSchema = Yup.object().shape({
proposed_amount: Yup.string().required(
t("ConfirmDialog.approved_amount_error")
),
});
const formik = useFormik({
initialValues: {
proposed_amount: "",
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("approved_amount", proposedAmount);
if (description != "") formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_PASSENGER_BOSS, rowId, formData);
},
});
//formik
const validationSchema = Yup.object().shape({
proposed_amount: Yup.string().required(
t("ConfirmDialog.approved_amount_error")
),
});
const formik = useFormik({
initialValues: {
proposed_amount: "",
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("approved_amount", proposedAmount);
if (description != "") formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_PASSENGER_BOSS, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
};
const handleAmountChange = (event) => {
if (/^\d*$/.test(event.target.value)) {
setProposedAmount(event.target.value);
}
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
};
const handleAmountChange = (event) => {
if (/^\d*$/.test(event.target.value)) {
setProposedAmount(event.target.value);
}
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<TextField
name="proposed_amount"
label={t("ConfirmDialog.approved_amount")}
type="number"
inputProps={{
min: 0,
inputMode: "numeric",
pattern: "[0-9]*",
}}
variant="outlined"
value={proposedAmount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("proposed_amount")}
error={
formik.touched.proposed_amount &&
Boolean(formik.errors.proposed_amount)
}
helperText={
formik.touched.proposed_amount && formik.errors.proposed_amount
}
sx={{ mt: 1 }}
fullWidth
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<TextField
name="proposed_amount"
label={t("ConfirmDialog.approved_amount")}
type="number"
inputProps={{
min: 0,
inputMode: "numeric",
pattern: "[0-9]*",
}}
variant="outlined"
value={proposedAmount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("proposed_amount")}
error={
formik.touched.proposed_amount &&
Boolean(formik.errors.proposed_amount)
}
helperText={
formik.touched.proposed_amount && formik.errors.proposed_amount
}
sx={{mt: 1}}
fullWidth
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
};
export default ConfirmForm;

198
src/components/dashboard/passenger-boss/Form/RejectForm.jsx
View File

@@ -1,116 +1,108 @@
import { REJECT_PASSENGER_BOSS } from "@/core/data/apiRoutes";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import {REJECT_PASSENGER_BOSS} from "@/core/data/apiRoutes";
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
import * as Yup from "yup";
import { useState } from "react";
import {useState} from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_PASSENGER_BOSS, rowId, formData);
},
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_PASSENGER_BOSS, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
};
export default RejectForm;

104
src/components/dashboard/passenger-boss/TableRowActions.jsx
View File

@@ -1,60 +1,60 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import { Box, IconButton, Tooltip } from "@mui/material";
import { useContext } from "react";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useContext} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import { useTranslations } from "next-intl";
import { DataTableContext } from "@/lib/app/contexts/DatatableContext";
import {useTranslations} from "next-intl";
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
const TableRowActions = ({ row }) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
}}
>
<ThumbUpAltIcon />
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<ThumbDownIcon />
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
</Box>
);
const TableRowActions = ({row}) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
</Box>
);
};
export default TableRowActions;

16
src/components/dashboard/passenger-boss/TableTollbar.jsx
View File

@@ -1,13 +1,13 @@
import { Stack, Tooltip } from "@mui/material";
import { useTranslations } from "next-intl";
import {Stack, Tooltip} from "@mui/material";
import {useTranslations} from "next-intl";
function TableToolbar() {
const t = useTranslations();
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
</Stack>
);
const t = useTranslations();
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
</Stack>
);
}
export default TableToolbar;

457
src/components/dashboard/passenger-boss/index.jsx
View File

@@ -1,245 +1,242 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import { Box, IconButton, Typography } from "@mui/material";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { useMemo } from "react";
import {useMemo} from "react";
// import TableToolbar from "./TableTollbar";
import { GET_PASSENGER_BOSS } from "@/core/data/apiRoutes";
import { useTranslations } from "next-intl";
import {GET_PASSENGER_BOSS} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
import {
LocalizationProvider,
MobileDateTimePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales";
import {faIR} from "@mui/x-date-pickers/locales";
function DashboardPassengerOfficeComponent() {
const t = useTranslations();
const t = useTranslations();
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("PassengerBoss.id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("PassengerBoss.id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("PassengerBoss.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("PassengerBoss.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("PassengerBoss.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("PassengerBoss.created_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Filter: ({column}) => {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{display: "flex", alignItems: "start"}}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: {minWidth: "120px"},
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon/>
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("PassengerBoss.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("PassengerBoss.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("PassengerBoss.vehicle_type"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("PassengerBoss.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
// filterVariant: "select",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("PassengerBoss.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("PassengerBoss.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("PassengerBoss.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("PassengerBoss.created_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({ renderedCellValue }) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({ column }) => <em>{column.columnDef.header}</em>,
Filter: ({ column }) => {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{ display: "flex", alignItems: "start" }}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: { minWidth: "120px" },
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
[]
);
return (
<DashboardLayouts>
<Box sx={{px: 3}}>
<DataTableStructure
tableUrl={GET_PASSENGER_BOSS}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={true}
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({row}) => <TableRowActions row={row}/>}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon />
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("PassengerBoss.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("PassengerBoss.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("PassengerBoss.vehicle_type"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("PassengerBoss.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
// filterVariant: "select",
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
[]
);
return (
<DashboardLayouts>
<Box sx={{ px: 3 }}>
<DataTableStructure
tableUrl={GET_PASSENGER_BOSS}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={true}
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({ row }) => <TableRowActions row={row} />}
/>
</Box>
</DashboardLayouts>
);
</DashboardLayouts>
);
}
export default DashboardPassengerOfficeComponent;

184
src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
View File

@@ -1,106 +1,98 @@
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import { CONFIRM_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
import {CONFIRM_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useFormik } from "formik";
import { useTranslations } from "next-intl";
import { useRef, useState } from "react";
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {useState} from "react";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const formik = useFormik({
initialValues: {
description: "",
},
onSubmit: () => {
const formData = new FormData();
if (description !== "")
formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_PASSENGER_OFFICE, rowId, formData);
},
});
const formik = useFormik({
initialValues: {
description: "",
},
onSubmit: () => {
const formData = new FormData();
if (description !== "")
formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_PASSENGER_OFFICE, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
};
export default ConfirmForm;

198
src/components/dashboard/passenger-office/Form/RejectForm.jsx
View File

@@ -1,114 +1,106 @@
import { REJECT_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import {REJECT_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
import * as Yup from "yup";
import { useState } from "react";
import {useState} from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_PASSENGER_OFFICE, rowId, formData);
},
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_PASSENGER_OFFICE, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
};
export default RejectForm;

104
src/components/dashboard/passenger-office/TableRowActions.jsx
View File

@@ -1,60 +1,60 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import { Box, IconButton, Tooltip } from "@mui/material";
import { useContext } from "react";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useContext} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import { useTranslations } from "next-intl";
import { DataTableContext } from "@/lib/app/contexts/DatatableContext";
import {useTranslations} from "next-intl";
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
const TableRowActions = ({ row }) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
}}
>
<ThumbUpAltIcon />
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<ThumbDownIcon />
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
</Box>
);
const TableRowActions = ({row}) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
</Box>
);
};
export default TableRowActions;

16
src/components/dashboard/passenger-office/TableTollbar.jsx
View File

@@ -1,13 +1,13 @@
import { Stack, Tooltip } from "@mui/material";
import { useTranslations } from "next-intl";
import {Stack, Tooltip} from "@mui/material";
import {useTranslations} from "next-intl";
function TableToolbar() {
const t = useTranslations();
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
</Stack>
);
const t = useTranslations();
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
</Stack>
);
}
export default TableToolbar;

460
src/components/dashboard/passenger-office/index.jsx
View File

@@ -1,247 +1,243 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import { Box, IconButton, Typography } from "@mui/material";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { useMemo } from "react";
import { faIR } from "@mui/x-date-pickers/locales";
import {useMemo} from "react";
import {faIR} from "@mui/x-date-pickers/locales";
// import TableToolbar from "./TableTollbar";
import { GET_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
import { useTranslations } from "next-intl";
import {GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
import {
LocalizationProvider,
MobileDateTimePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import dayjs from "dayjs";
function DashboardPassengerOfficeComponent() {
const t = useTranslations();
const t = useTranslations();
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("PassengerOffice.id"),
enableColumnFilter: true,
datatype: "numeric",
maxSize: 100,
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("PassengerOffice.id"),
enableColumnFilter: true,
datatype: "numeric",
maxSize: 100,
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("PassengerOffice.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("PassengerOffice.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("PassengerOffice.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("PassengerOffice.created_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Filter: ({column}) => {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{display: "flex", alignItems: "start"}}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: {minWidth: "120px"},
variant: "standard",
actionBar: {actions: ["accept", "today"]},
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon/>
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
id: "updated_at",
header: t("PassengerOffice.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("PassengerOffice.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
maxSize: 100,
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("PassengerOffice.vehicle_type"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("PassengerOffice.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
// filterVariant: "select",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("PassengerOffice.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("PassengerOffice.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("PassengerOffice.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("PassengerOffice.created_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({ renderedCellValue }) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({ column }) => <em>{column.columnDef.header}</em>,
Filter: ({ column }) => {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{ display: "flex", alignItems: "start" }}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: { minWidth: "120px" },
variant: "standard",
actionBar: { actions: ["accept", "today"] },
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
[]
);
return (
<DashboardLayouts>
<Box sx={{px: 3}}>
<DataTableStructure
tableUrl={GET_PASSENGER_OFFICE}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={true}
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({row}) => <TableRowActions row={row}/>}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon />
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
id: "updated_at",
header: t("PassengerOffice.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("PassengerOffice.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
maxSize: 100,
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("PassengerOffice.vehicle_type"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("PassengerOffice.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
// filterVariant: "select",
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
[]
);
return (
<DashboardLayouts>
<Box sx={{ px: 3 }}>
<DataTableStructure
tableUrl={GET_PASSENGER_OFFICE}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={true}
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({ row }) => <TableRowActions row={row} />}
/>
</Box>
</DashboardLayouts>
);
</DashboardLayouts>
);
}
export default DashboardPassengerOfficeComponent;

184
src/components/dashboard/province-manager/Form/ConfirmForm.jsx
View File

@@ -1,106 +1,98 @@
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import { CONFIRM_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
import {CONFIRM_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useFormik } from "formik";
import { useTranslations } from "next-intl";
import { useRef, useState } from "react";
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {useState} from "react";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const formik = useFormik({
initialValues: {
description: "",
},
onSubmit: () => {
const formData = new FormData();
if (description !== "")
formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_PROVINCE_MANAGER, rowId, formData);
},
});
const formik = useFormik({
initialValues: {
description: "",
},
onSubmit: () => {
const formData = new FormData();
if (description !== "")
formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_PROVINCE_MANAGER, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
};
export default ConfirmForm;

198
src/components/dashboard/province-manager/Form/RejectForm.jsx
View File

@@ -1,115 +1,107 @@
import { REJECT_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import {REJECT_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
import * as Yup from "yup";
import { useState } from "react";
import {useState} from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_PROVINCE_MANAGER, rowId, formData);
},
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_PROVINCE_MANAGER, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
};
export default RejectForm;

104
src/components/dashboard/province-manager/TableRowActions.jsx
View File

@@ -1,60 +1,60 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import { Box, IconButton, Tooltip } from "@mui/material";
import { useContext } from "react";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useContext} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import { useTranslations } from "next-intl";
import { DataTableContext } from "@/lib/app/contexts/DatatableContext";
import {useTranslations} from "next-intl";
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
const TableRowActions = ({ row }) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
}}
>
<ThumbUpAltIcon />
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<ThumbDownIcon />
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
</Box>
);
const TableRowActions = ({row}) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
</Box>
);
};
export default TableRowActions;

16
src/components/dashboard/province-manager/TableTollbar.jsx
View File

@@ -1,13 +1,13 @@
import { Stack, Tooltip } from "@mui/material";
import { useTranslations } from "next-intl";
import {Stack, Tooltip} from "@mui/material";
import {useTranslations} from "next-intl";
function TableToolbar() {
const t = useTranslations();
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
</Stack>
);
const t = useTranslations();
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
</Stack>
);
}
export default TableToolbar;

457
src/components/dashboard/province-manager/index.jsx
View File

@@ -1,245 +1,242 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import { Box, IconButton, Typography } from "@mui/material";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { useMemo } from "react";
import {useMemo} from "react";
// import TableToolbar from "./TableTollbar";
import { GET_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
import { useTranslations } from "next-intl";
import {GET_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
import {
LocalizationProvider,
MobileDateTimePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales";
import {faIR} from "@mui/x-date-pickers/locales";
function DashboardProvinceManagerComponent() {
const t = useTranslations();
const t = useTranslations();
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("ProvinceManager.id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("ProvinceManager.id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("ProvinceManager.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("ProvinceManager.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("ProvinceManager.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("ProvinceManager.created_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <em>{column.columnDef.header}</em>,
Filter: ({column}) => {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{display: "flex", alignItems: "start"}}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: {minWidth: "120px"},
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon/>
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("ProvinceManager.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("ProvinceManager.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("ProvinceManager.vehicle_type"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("ProvinceManager.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
// filterVariant: "select",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("ProvinceManager.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("ProvinceManager.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("ProvinceManager.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("ProvinceManager.created_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
minSize: 200,
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({ renderedCellValue }) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({ column }) => <em>{column.columnDef.header}</em>,
Filter: ({ column }) => {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{ display: "flex", alignItems: "start" }}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: { minWidth: "120px" },
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
[]
);
return (
<DashboardLayouts>
<Box sx={{px: 3}}>
<DataTableStructure
tableUrl={GET_PROVINCE_MANAGER}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={true}
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({row}) => <TableRowActions row={row}/>}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon />
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("ProvinceManager.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("ProvinceManager.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("ProvinceManager.vehicle_type"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("ProvinceManager.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
// filterVariant: "select",
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
[]
);
return (
<DashboardLayouts>
<Box sx={{ px: 3 }}>
<DataTableStructure
tableUrl={GET_PROVINCE_MANAGER}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={true}
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({ row }) => <TableRowActions row={row} />}
/>
</Box>
</DashboardLayouts>
);
</DashboardLayouts>
);
}
export default DashboardProvinceManagerComponent;

178
src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
View File

@@ -1,102 +1,94 @@
import UploadSystem from "@/core/components/UploadSystem";
import { CONFIRM_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
import {CONFIRM_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useFormik } from "formik";
import { useTranslations } from "next-intl";
import { useState } from "react";
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {useState} from "react";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const formik = useFormik({
initialValues: {
description: "",
},
onSubmit: () => {
const formData = new FormData();
if (description != "") formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_TRANSPORTATION_ASSISTANCE, rowId, formData);
},
});
const formik = useFormik({
initialValues: {
description: "",
},
onSubmit: () => {
const formData = new FormData();
if (description != "") formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_TRANSPORTATION_ASSISTANCE, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
};
export default ConfirmForm;

198
src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
View File

@@ -1,113 +1,105 @@
import { REJECT_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import {REJECT_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
import * as Yup from "yup";
import { useState } from "react";
import {useState} from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const t = useTranslations();
const { directionApp } = useDirection();
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const t = useTranslations();
const {directionApp} = useDirection();
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_TRANSPORTATION_ASSISTANCE, rowId, formData);
},
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_TRANSPORTATION_ASSISTANCE, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
};
export default RejectForm;

104
src/components/dashboard/transportation-assistance/TableRowActions.jsx
View File

@@ -1,61 +1,61 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import { Box, IconButton, Tooltip } from "@mui/material";
import { useContext } from "react";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useContext} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import { useTranslations } from "next-intl";
import { DataTableContext } from "@/lib/app/contexts/DatatableContext";
import {useTranslations} from "next-intl";
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
const TableRowActions = ({ row }) => {
const t = useTranslations();
const TableRowActions = ({row}) => {
const t = useTranslations();
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
}}
>
<ThumbUpAltIcon />
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<ThumbDownIcon />
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
</Box>
);
const {
openConfirmDialog,
openRejectDialog,
handleOpenConfirmDialog,
handleOpenRejectDialog,
handleCloseConfirmDialog,
handleCloseRejectDialog,
rowId,
confirmData,
rejectData,
} = useContext(DataTableContext);
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
handleOpenConfirmDialog(row);
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
{openConfirmDialog && (
<ConfirmForm
rowId={rowId}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
/>
)}
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
{openRejectDialog && (
<RejectForm
rowId={rowId}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
/>
)}
</Box>
);
};
export default TableRowActions;

16
src/components/dashboard/transportation-assistance/TableTollbar.jsx
View File

@@ -1,13 +1,13 @@
import { Stack, Tooltip } from "@mui/material";
import { useTranslations } from "next-intl";
import {Stack, Tooltip} from "@mui/material";
import {useTranslations} from "next-intl";
function TableToolbar() {
const t = useTranslations();
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
</Stack>
);
const t = useTranslations();
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
</Stack>
);
}
export default TableToolbar;

457
src/components/dashboard/transportation-assistance/index.jsx
View File

@@ -1,245 +1,242 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import { Box, IconButton, Typography } from "@mui/material";
import {Box, IconButton, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { useMemo } from "react";
import {useMemo} from "react";
// import TableToolbar from "./TableTollbar";
import { GET_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
import { useTranslations } from "next-intl";
import {GET_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
import {
LocalizationProvider,
MobileDateTimePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import { faIR } from "@mui/x-date-pickers/locales";
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import {faIR} from "@mui/x-date-pickers/locales";
import moment from "jalali-moment";
function DashboardTransportationAssistanceComponent() {
const t = useTranslations();
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("TransportationAssistance.id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("TransportationAssistance.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
const t = useTranslations();
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("TransportationAssistance.id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("TransportationAssistance.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("TransportationAssistance.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("TransportationAssistance.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("TransportationAssistance.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("TransportationAssistance.created_at"),
enableColumnFilter: true,
datatype: "date",
minSize: 200,
filterFn: "lessThan",
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
Header: ({column}) => <em>{column.columnDef.header}</em>,
Filter: ({column}) => {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{display: "flex", alignItems: "start"}}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: {minWidth: "120px"},
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon/>
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("TransportationAssistance.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("TransportationAssistance.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("TransportationAssistance.vehicle_type"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("TransportationAssistance.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
// filterVariant: "select",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("TransportationAssistance.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("TransportationAssistance.created_at"),
enableColumnFilter: true,
datatype: "date",
minSize: 200,
filterFn: "lessThan",
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
Header: ({ column }) => <em>{column.columnDef.header}</em>,
Filter: ({ column }) => {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{ display: "flex", alignItems: "start" }}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: { minWidth: "120px" },
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
[]
);
return (
<DashboardLayouts>
<Box sx={{px: 3}}>
<DataTableStructure
tableUrl={GET_TRANSPORTATION_ASSISTANCE}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={true}
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({row}) => <TableRowActions row={row}/>}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon />
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("TransportationAssistance.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("TransportationAssistance.navgan_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
maxSize: 100,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("TransportationAssistance.vehicle_type"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("TransportationAssistance.state_name"),
enableColumnFilter: false,
datatype: "numeric",
minSize: 300,
// filterFn: "equals",
// filterSelectOptions: [
// ],
// filterVariant: "select",
Cell: ({ renderedCellValue }) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
[]
);
return (
<DashboardLayouts>
<Box sx={{ px: 3 }}>
<DataTableStructure
tableUrl={GET_TRANSPORTATION_ASSISTANCE}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
// CustomToolbar={<TableToolbar />}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={true}
enableColumnFilters={true}
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderRowActions={({ row }) => <TableRowActions row={row} />}
/>
</Box>
</DashboardLayouts>
);
</DashboardLayouts>
);
}
export default DashboardTransportationAssistanceComponent;

84
src/components/first/index.jsx
View File

@@ -1,53 +1,53 @@
import dahsboardImage from "&/images/dashboard.svg";
import { NextLinkComposed } from "@/core/components/LinkRouting";
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 { Button, Typography } from "@mui/material";
import { useTranslations } from "next-intl";
import {Button, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
const FirstComponent = () => {
const t = useTranslations();
const { isAuth } = useUser();
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>
) : (
<Button
sx={{ mx: 2 }}
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/login-expert",
}}
>
{t("login_expert")}
</Button>
)}
</CenterLayout>
</FullPageLayout>
);
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>
) : (
<Button
sx={{mx: 2}}
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/login-expert",
}}
>
{t("login_expert")}
</Button>
)}
</CenterLayout>
</FullPageLayout>
);
};
export default FirstComponent;

269
src/components/login-expert/index.jsx
View File

@@ -2,158 +2,149 @@ 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 {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 {
Box,
Button,
Container,
Paper,
Stack,
TextField,
Typography,
} from "@mui/material";
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 {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
import {useSearchParams} from "next/navigation";
import * as Yup from "yup";
const LoginComponent = () => {
const t = useTranslations();
// const { directionApp } = useDirection(); // should delete because we dont have direction anymore
const { setToken } = useUser(); // pass token to set token
const t = useTranslations();
// const { directionApp } = useDirection(); // should delete because we dont have direction anymore
const {setToken} = useUser(); // pass token to set token
// gettin url query
const searchParams = useSearchParams();
const backUrlDecodedPath = searchParams.get("back_url");
// 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")),
});
//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_expert")}
</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",
}}
>
<Button
type="submit"
variant="contained"
fullWidth
size="medium"
endIcon={<LoginIcon />}
disabled={props.isSubmitting ? true : false}
return (
<FullPageLayout sx={{p: 1}}>
<CenterLayout>
<Container maxWidth="sm">
<Paper elevation={0}>
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{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>
);
{(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_expert")}
</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",
}}
>
<Button
type="submit"
variant="contained"
fullWidth
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;

220
src/core/components/AvatarUpload.jsx
View File

@@ -1,128 +1,128 @@
import { Avatar, Box, TextField } from "@mui/material";
import { useState } from "react";
import {Avatar, Box, TextField} from "@mui/material";
import {useState} from "react";
import DeleteIcon from "@mui/icons-material/Delete";
import AddIcon from "@mui/icons-material/Add";
const AvatarUpload = ({ user, setFieldValue, valueAvatar, changeFlag }) => {
const [selectedImage, setSelectedImage] = useState(user.expert_avatar);
const [isHovered, setIsHovered] = useState(false);
const AvatarUpload = ({user, setFieldValue, valueAvatar, changeFlag}) => {
const [selectedImage, setSelectedImage] = useState(user.expert_avatar);
const [isHovered, setIsHovered] = useState(false);
const handleImageChange = (event) => {
const newImage = event.target?.files?.[0];
if (newImage) {
setSelectedImage(URL.createObjectURL(newImage));
setFieldValue(valueAvatar, newImage);
setFieldValue(changeFlag, true);
} else {
setSelectedImage("");
setFieldValue(valueAvatar, null);
}
};
const handleImageChange = (event) => {
const newImage = event.target?.files?.[0];
if (newImage) {
setSelectedImage(URL.createObjectURL(newImage));
setFieldValue(valueAvatar, newImage);
setFieldValue(changeFlag, true);
} else {
setSelectedImage("");
setFieldValue(valueAvatar, null);
}
};
const handleDeleteImage = () => {
setSelectedImage("");
setFieldValue(valueAvatar, null);
setFieldValue(changeFlag, true);
};
const handleDeleteImage = () => {
setSelectedImage("");
setFieldValue(valueAvatar, null);
setFieldValue(changeFlag, true);
};
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return (
<Box
sx={{
display: "inline-block",
position: "relative",
}}
>
<Box
component="label"
htmlFor="avatar-upload"
sx={{
display: "inline-block",
width: "fit-content",
height: "fit-content",
cursor: "pointer",
}}
>
return (
<Box
component="div"
className={`avatar-container ${isHovered ? "hovered" : ""}`}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
sx={{
position: "relative",
width: 150,
height: 150,
borderRadius: "50%",
overflow: "hidden",
transition: "transform 0.3s ease-in-out",
}}
>
<Avatar
alt="User Avatar"
src={selectedImage}
sx={{
width: 150,
height: 150,
cursor: "pointer",
position: "relative",
display: "inline-block",
position: "relative",
}}
/>
{isHovered && (
>
<Box
component="div"
className="avatar-overlay"
sx={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: "rgba(0, 0, 0, 0.6)",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "transform 0.3s ease-in-out",
transform: `scale(${isHovered ? 1 : 0})`,
}}
component="label"
htmlFor="avatar-upload"
sx={{
display: "inline-block",
width: "fit-content",
height: "fit-content",
cursor: "pointer",
}}
>
{selectedImage ? (
<DeleteIcon
sx={{
color: "#fff",
width: 35,
height: 35,
}}
onClick={handleDeleteImage}
/>
) : (
<AddIcon
sx={{
color: "#fff",
width: 35,
height: 35,
}}
/>
)}
<Box
component="div"
className={`avatar-container ${isHovered ? "hovered" : ""}`}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
sx={{
position: "relative",
width: 150,
height: 150,
borderRadius: "50%",
overflow: "hidden",
transition: "transform 0.3s ease-in-out",
}}
>
<Avatar
alt="User Avatar"
src={selectedImage}
sx={{
width: 150,
height: 150,
cursor: "pointer",
position: "relative",
}}
/>
{isHovered && (
<Box
component="div"
className="avatar-overlay"
sx={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: "rgba(0, 0, 0, 0.6)",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "transform 0.3s ease-in-out",
transform: `scale(${isHovered ? 1 : 0})`,
}}
>
{selectedImage ? (
<DeleteIcon
sx={{
color: "#fff",
width: 35,
height: 35,
}}
onClick={handleDeleteImage}
/>
) : (
<AddIcon
sx={{
color: "#fff",
width: 35,
height: 35,
}}
/>
)}
</Box>
)}
</Box>
</Box>
)}
<TextField
id="avatar-upload"
type="file"
accept="image/*"
sx={{display: "none"}}
onChange={handleImageChange}
/>
</Box>
</Box>
<TextField
id="avatar-upload"
type="file"
accept="image/*"
sx={{ display: "none" }}
onChange={handleImageChange}
/>
</Box>
);
);
};
export default AvatarUpload;

308
src/core/components/Datatable.jsx
View File

@@ -1,174 +1,174 @@
import { ReloadDataTableContext } from "@/lib/app/contexts/ReloadDatatableContext";
import {ReloadDataTableContext} from "@/lib/app/contexts/ReloadDatatableContext";
import useLanguage from "@/lib/app/hooks/useLanguage";
import { Typography } from "@mui/material";
import {Typography} from "@mui/material";
import axios from "axios";
import MaterialReactTable from "material-react-table";
import moment from "moment-jalaali";
import { useTranslations } from "next-intl";
import { useContext, useEffect, useMemo, useState } from "react";
import {useTranslations} from "next-intl";
import {useContext, useEffect, useMemo, useState} from "react";
import useSWR from "swr";
const DataTable = (props) => {
const { reloadDataTable, setReloadDataTable } = useContext(
ReloadDataTableContext
);
const fetcher = (...args) => {
return axios
.get(args, {
headers: {
Authorization: `Bearer ${props.token}`,
},
})
.then((res) => {
setRowCount(res.data.meta.totalRowCount);
return res.data.data;
});
};
const t = useTranslations();
const { languageApp, languageList } = useLanguage();
const [columnFilters, setColumnFilters] = useState([]);
const [columnFilterFns, setColumnFilterFns] = useState(() => {
let output = {};
const list = props.columns.map((item) =>
item.enableColumnFilter ? { [item.id]: item.filterFn } : { [item.id]: "" }
const {reloadDataTable, setReloadDataTable} = useContext(
ReloadDataTableContext
);
for (var key in list) {
var nestedObj = list[key];
for (var nestedKey in nestedObj) {
output[nestedKey] = nestedObj[nestedKey];
}
}
return output;
});
const [sorting, setSorting] = useState([]);
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
const [rowCount, setRowCount] = useState(0);
const [updateTime, setupdateTime] = useState(
moment().format("HH:mm | jYYYY/jM/jD")
);
const tableLocalization = useMemo(
() =>
languageList.find((item) => item.key == languageApp).tableLocalization,
[languageApp, languageList]
);
const fetchUrl = useMemo(() => {
const url = new URL(props.tableUrl /* send your api */);
url.searchParams.set(
"start",
`${pagination.pageIndex * pagination.pageSize}`
);
const filters = columnFilters.map((filter) => {
let datatype;
for (const i in props.columns) {
if (props.columns[i].id == filter.id) {
datatype = props.columns[i].datatype;
const fetcher = (...args) => {
return axios
.get(args, {
headers: {
Authorization: `Bearer ${props.token}`,
},
})
.then((res) => {
setRowCount(res.data.meta.totalRowCount);
return res.data.data;
});
};
const t = useTranslations();
const {languageApp, languageList} = useLanguage();
const [columnFilters, setColumnFilters] = useState([]);
const [columnFilterFns, setColumnFilterFns] = useState(() => {
let output = {};
const list = props.columns.map((item) =>
item.enableColumnFilter ? {[item.id]: item.filterFn} : {[item.id]: ""}
);
for (var key in list) {
var nestedObj = list[key];
for (var nestedKey in nestedObj) {
output[nestedKey] = nestedObj[nestedKey];
}
}
}
return {
...filter,
fn: columnFilterFns[filter.id],
datatype: datatype,
};
return output;
});
url.searchParams.set("size", pagination.pageSize);
url.searchParams.set("filters", JSON.stringify(filters ?? []));
url.searchParams.set("sorting", JSON.stringify(sorting ?? []));
return url;
}, [
props.tableUrl,
columnFilters,
columnFilterFns,
pagination,
sorting,
props.columns,
]);
const { data, isLoading, isValidating, mutate } = useSWR(fetchUrl, fetcher, {
revalidateOnFocus: false,
});
const [sorting, setSorting] = useState([]);
const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
const [rowCount, setRowCount] = useState(0);
const [updateTime, setupdateTime] = useState(
moment().format("HH:mm | jYYYY/jM/jD")
);
useEffect(() => {
if (reloadDataTable) {
mutate(fetchUrl).then(() => {
setReloadDataTable(false); // Set reloadDataTable to false after mutation is complete
});
}
}, [reloadDataTable, setReloadDataTable]);
const tableLocalization = useMemo(
() =>
languageList.find((item) => item.key == languageApp).tableLocalization,
[languageApp, languageList]
);
useEffect(() => {
setupdateTime(moment().format("HH:mm | jYYYY/jM/jD"));
}, [isValidating, languageApp]);
return (
<MaterialReactTable
localization={tableLocalization}
columns={props.columns} /* columns you send */
data={data ?? []}
manualFiltering
manualPagination
manualSorting
enableRowSelection={props.selectableRow} /* send condition */
enablePinning={props.enablePinning} /* send condition */
enableColumnFilters={props.enableColumnFilters} /* send condition */
enableDensityToggle={props.enableDensityToggle} /* send condition */
enableHiding={props.enableHiding} /* send condition */
enableFullScreenToggle={props.enableFullScreenToggle} /* send condition */
enableColumnResizing={props.enableColumnResizing}
muiTableHeadCellProps={{
sx: {
color: "primary.main",
"& .Mui-TableHeadCell-Content": { justifyContent: "space-between" },
},
}}
enableColumnFilterModes
muiTablePaperProps={{ elevation: 0 }}
rowCount={rowCount}
onColumnFilterFnsChange={setColumnFilterFns}
onColumnFiltersChange={setColumnFilters}
onPaginationChange={setPagination}
onSortingChange={setSorting}
positionToolbarAlertBanner="bottom"
renderTopToolbarCustomActions={({ table }) => (
<>
{props.enableCustomToolbar /* send condition */
? props.CustomToolbar /* send component */
: ""}
</>
)}
renderBottomToolbarCustomActions={({ table }) => (
<>
{props.enableLastUpdate /* send condition */ ? (
<Typography
sx={{
color: "primary.main",
alignSelf: "center",
whiteSpace: "nowrap",
maxWidth: { xs: 100, sm: "100%" },
overflowX: "scroll",
}}
variant="caption"
>
{t("last_updated_at")}: {updateTime}
</Typography>
) : (
""
)}
</>
)}
state={{
isLoading,
const fetchUrl = useMemo(() => {
const url = new URL(props.tableUrl /* send your api */);
url.searchParams.set(
"start",
`${pagination.pageIndex * pagination.pageSize}`
);
const filters = columnFilters.map((filter) => {
let datatype;
for (const i in props.columns) {
if (props.columns[i].id == filter.id) {
datatype = props.columns[i].datatype;
}
}
return {
...filter,
fn: columnFilterFns[filter.id],
datatype: datatype,
};
});
url.searchParams.set("size", pagination.pageSize);
url.searchParams.set("filters", JSON.stringify(filters ?? []));
url.searchParams.set("sorting", JSON.stringify(sorting ?? []));
return url;
}, [
props.tableUrl,
columnFilters,
columnFilterFns,
pagination,
sorting,
}}
positionActionsColumn={"last"}
enableRowActions={props.enableRowActions}
{...props}
/>
);
props.columns,
]);
const {data, isLoading, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
revalidateOnFocus: false,
});
useEffect(() => {
if (reloadDataTable) {
mutate(fetchUrl).then(() => {
setReloadDataTable(false); // Set reloadDataTable to false after mutation is complete
});
}
}, [reloadDataTable, setReloadDataTable]);
useEffect(() => {
setupdateTime(moment().format("HH:mm | jYYYY/jM/jD"));
}, [isValidating, languageApp]);
return (
<MaterialReactTable
localization={tableLocalization}
columns={props.columns} /* columns you send */
data={data ?? []}
manualFiltering
manualPagination
manualSorting
enableRowSelection={props.selectableRow} /* send condition */
enablePinning={props.enablePinning} /* send condition */
enableColumnFilters={props.enableColumnFilters} /* send condition */
enableDensityToggle={props.enableDensityToggle} /* send condition */
enableHiding={props.enableHiding} /* send condition */
enableFullScreenToggle={props.enableFullScreenToggle} /* send condition */
enableColumnResizing={props.enableColumnResizing}
muiTableHeadCellProps={{
sx: {
color: "primary.main",
"& .Mui-TableHeadCell-Content": {justifyContent: "space-between"},
},
}}
enableColumnFilterModes
muiTablePaperProps={{elevation: 0}}
rowCount={rowCount}
onColumnFilterFnsChange={setColumnFilterFns}
onColumnFiltersChange={setColumnFilters}
onPaginationChange={setPagination}
onSortingChange={setSorting}
positionToolbarAlertBanner="bottom"
renderTopToolbarCustomActions={({table}) => (
<>
{props.enableCustomToolbar /* send condition */
? props.CustomToolbar /* send component */
: ""}
</>
)}
renderBottomToolbarCustomActions={({table}) => (
<>
{props.enableLastUpdate /* send condition */ ? (
<Typography
sx={{
color: "primary.main",
alignSelf: "center",
whiteSpace: "nowrap",
maxWidth: {xs: 100, sm: "100%"},
overflowX: "scroll",
}}
variant="caption"
>
{t("last_updated_at")}: {updateTime}
</Typography>
) : (
""
)}
</>
)}
state={{
isLoading,
columnFilters,
columnFilterFns,
pagination,
sorting,
}}
positionActionsColumn={"last"}
enableRowActions={props.enableRowActions}
{...props}
/>
);
};
export default DataTable;

18
src/core/components/DatatableStructure.jsx
View File

@@ -1,15 +1,15 @@
import { DataTableProvider } from "@/lib/app/contexts/DatatableContext";
import {DataTableProvider} from "@/lib/app/contexts/DatatableContext";
import DataTable from "./Datatable";
import { ReloadDataTableProvider } from "@/lib/app/contexts/ReloadDatatableContext";
import {ReloadDataTableProvider} from "@/lib/app/contexts/ReloadDatatableContext";
function DataTableStructure(props) {
return (
<ReloadDataTableProvider>
<DataTableProvider>
<DataTable {...props} token={localStorage.getItem("_token")} />
</DataTableProvider>
</ReloadDataTableProvider>
);
return (
<ReloadDataTableProvider>
<DataTableProvider>
<DataTable {...props} token={localStorage.getItem("_token")}/>
</DataTableProvider>
</ReloadDataTableProvider>
);
}
export default DataTableStructure;

13
src/core/components/FormErrorMassage.jsx
View File

@@ -1,10 +1,11 @@
import { Typography } from "@mui/material";
import {Typography} from "@mui/material";
const FormErrorMessage = (props) => {
return (
<Typography variant="body2" color="error">
{props.children}
</Typography>
);
return (
<Typography variant="body2" color="error">
{props.children}
</Typography>
);
};
export default FormErrorMessage;

26
src/core/components/ImageConvertor.jsx
View File

@@ -1,22 +1,22 @@
import ImageResize from "image-resize";
const ImageResizer = async (image) => {
const imageResize = new ImageResize({
quality: 1,
format: "jpg",
outputType: "base64",
width: 400,
});
const imageResize = new ImageResize({
quality: 1,
format: "jpg",
outputType: "base64",
width: 400,
});
const get = await imageResize.get(image);
const resize = await imageResize.resize(get).then();
const output = await imageResize.output(resize).then();
const get = await imageResize.get(image);
const resize = await imageResize.resize(get).then();
const output = await imageResize.output(resize).then();
const avatar = await (await import("image-to-file-converter"))
.base64ToFile(output)
.then();
const avatar = await (await import("image-to-file-converter"))
.base64ToFile(output)
.then();
return avatar;
return avatar;
};
export default ImageResizer;

176
src/core/components/LinkRouting.jsx
View File

@@ -1,116 +1,116 @@
import MuiLink from "@mui/material/Link";
import { styled } from "@mui/material/styles";
import {styled} from "@mui/material/styles";
import clsx from "clsx";
import NextLink from "next/link";
import { useRouter } from "next/router";
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
props,
ref
) {
const {
to,
linkAs,
replace,
scroll,
shallow,
prefetch,
legacyBehavior = true,
locale,
...other
} = props;
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>
);
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 {
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 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);
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} />;
if (isExternal) {
if (noLinkStyle) {
return <Anchor className={className} href={href} ref={ref} {...other} />;
}
return <MuiLink 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,
};
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}
/>
);
}
if (noLinkStyle) {
return (
<NextLinkComposed
className={className}
ref={ref}
{...nextjsProps}
{...other}
/>
<MuiLink
component={NextLinkComposed}
className={className}
ref={ref}
{...nextjsProps}
{...other}
/>
);
}
return (
<MuiLink
component={NextLinkComposed}
className={className}
ref={ref}
{...nextjsProps}
{...other}
/>
);
});
export default LinkRouting;

70
src/core/components/LoadingHardPage.jsx
View File

@@ -1,44 +1,44 @@
import { Backdrop, Fade, styled } from "@mui/material";
import {Backdrop, Fade, styled} from "@mui/material";
import StyledImage from "./StyledImage";
const LoadingImage = styled(StyledImage)({
"@keyframes load": {
"0%": {
// opacity: 0,
transform: "scale(1)",
"@keyframes load": {
"0%": {
// opacity: 0,
transform: "scale(1)",
},
"50%": {
// opacity: 1,
transform: "scale(2)",
},
"100%": {
// opacity: 0,
transform: "scale(1)",
},
},
"50%": {
// opacity: 1,
transform: "scale(2)",
},
"100%": {
// opacity: 0,
transform: "scale(1)",
},
},
animation: "load 2s infinite",
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/loading_logo.svg"}
alt="loading marhaba"
priority
width={100}
height={100}
/>
</Fade>
</Backdrop>
{children}
</>
);
const LoadingHardPage = ({children, loading}) => {
return (
<>
<Backdrop
sx={{bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1}}
open={loading}
>
<Fade in={true}>
<LoadingImage
src={"/images/loading_logo.svg"}
alt="loading marhaba"
priority
width={100}
height={100}
/>
</Fade>
</Backdrop>
{children}
</>
);
};
export default LoadingHardPage;

30
src/core/components/Messages.jsx
View File

@@ -2,21 +2,21 @@ 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/loading_logo.svg"}
alt="loading loan facilities"
width={100}
height={100}
/>
{text}
{actions}
</CenterLayout>
</FullPageLayout>
);
const Message = ({text, actions}) => {
return (
<FullPageLayout sx={{p: 1}}>
<CenterLayout spacing={3}>
<StyledImage
src={"/images/loading_logo.svg"}
alt="loading loan facilities"
width={100}
height={100}
/>
{text}
{actions}
</CenterLayout>
</FullPageLayout>
);
};
export default Message;

58
src/core/components/MuiDatePicker.jsx
View File

@@ -1,35 +1,35 @@
import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import {DatePicker, LocalizationProvider} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import { useTranslations } from "next-intl";
import {useTranslations} from "next-intl";
export default function MuiDatePicker({
setFieldValue,
selectType,
error,
helperText,
}) {
const t = useTranslations();
setFieldValue,
selectType,
error,
helperText,
}) {
const t = useTranslations();
const handleDateChange = (date) => {
const selectedDate = moment(date).locale("fa"); // should add .format() at the end to format the data
setFieldValue(selectType, selectedDate);
};
const handleDateChange = (date) => {
const selectedDate = moment(date).locale("fa"); // should add .format() at the end to format the data
setFieldValue(selectType, selectedDate);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
<DatePicker
sx={{ width: "100%" }}
label={t("MuiDatePicker.date_picker_birthday")}
slotProps={{
textField: {
size: "small",
helperText: helperText ? `${helperText}` : "YYYY-MM-DD",
error: error ? true : false,
},
}}
onChange={handleDateChange}
/>
</LocalizationProvider>
);
return (
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
<DatePicker
sx={{width: "100%"}}
label={t("MuiDatePicker.date_picker_birthday")}
slotProps={{
textField: {
size: "small",
helperText: helperText ? `${helperText}` : "YYYY-MM-DD",
error: error ? true : false,
},
}}
onChange={handleDateChange}
/>
</LocalizationProvider>
);
}

52
src/core/components/PasswordField.jsx
View File

@@ -1,33 +1,33 @@
import { useState } from "react";
import { IconButton, InputAdornment, TextField } from "@mui/material";
import { Visibility, VisibilityOff } from "@mui/icons-material";
import { Field } from "formik";
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 [showPassword, setShowPassword] = useState(false);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
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>
),
}}
/>
);
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;

4
src/core/components/StyledForm.jsx
View File

@@ -1,5 +1,5 @@
import { styled } from "@mui/material";
import { Form } from "formik";
import {styled} from "@mui/material";
import {Form} from "formik";
const StyledForm = styled(Form)``;

2
src/core/components/StyledImage.jsx
View File

@@ -1,4 +1,4 @@
import { styled } from "@mui/material";
import {styled} from "@mui/material";
import Image from "next/image";
const StyledImage = styled(Image)``;

20
src/core/components/TitlePage.jsx
View File

@@ -1,15 +1,15 @@
import { useTranslations } from "next-intl";
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>
);
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;

327
src/core/components/UploadSystem.jsx
View File

@@ -1,176 +1,175 @@
import { Box, Button, Paper, Typography } from "@mui/material";
import { useTranslations } from "next-intl";
import Image from "next/image";
import {Box, Button, Paper, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import AddIcon from "@mui/icons-material/Add";
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
import { useRef } from "react";
import {useRef} from "react";
const UploadSystem = ({
selectedImage,
setselectedImage,
handleUploadChange,
fieldname,
setFieldValue,
imageAlt,
imageSize,
fileType,
fileName,
setShowAddIcon,
showAddIcon,
}) => {
const t = useTranslations();
const fileInputRef = useRef(null);
selectedImage,
setselectedImage,
handleUploadChange,
fieldname,
setFieldValue,
imageAlt,
imageSize,
fileType,
fileName,
setShowAddIcon,
showAddIcon,
}) => {
const t = useTranslations();
const fileInputRef = useRef(null);
const handleClick = () => {
fileInputRef.current.click();
};
const handleClick = () => {
fileInputRef.current.click();
};
const handleDeleteImage = () => {
setselectedImage(null);
setFieldValue(fieldname, null);
setShowAddIcon(true);
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
};
const handleDeleteImage = () => {
setselectedImage(null);
setFieldValue(fieldname, null);
setShowAddIcon(true);
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
};
const isDocumentFormat = (fileType) => {
const documentFormats = [
"application/pdf",
"application/msword",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.ms-excel",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
];
return documentFormats.includes(fileType);
};
const isDocumentFormat = (fileType) => {
const documentFormats = [
"application/pdf",
"application/msword",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.ms-excel",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
];
return documentFormats.includes(fileType);
};
return (
<Box sx={{ width: "100%", my: 1 }}>
{showAddIcon ? (
// Show the add icon and "Upload File" text when no image is selected
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
border: "1px solid #b3b3b3",
borderRadius: "10px",
cursor: "pointer",
padding: "5px",
return (
<Box sx={{width: "100%", my: 1}}>
{showAddIcon ? (
// Show the add icon and "Upload File" text when no image is selected
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
border: "1px solid #b3b3b3",
borderRadius: "10px",
cursor: "pointer",
padding: "5px",
height: imageSize[1],
}}
onClick={handleClick}
>
<AddIcon sx={{ fontSize: "2rem", color: "#a19d9d" }} />
<Typography
variant="subtitle2"
sx={{
fontWeight: 600,
fontSize: "1rem",
color: "#a19d9d",
mt: 1,
}}
textAlign="center"
>
{t("UploadSystem.upload_file")}
</Typography>
</Box>
</>
) : (
// Show the uploaded content along with the delete button when an image or document is selected
<>
{fileType && fileType.startsWith("image/") ? (
<Box
width="100%"
height={imageSize[1]}
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
objectFit: "contain",
border: "1px solid #b3b3b3",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
borderBottom: "unset",
padding: "5px",
overflow: "hidden",
}}
onClick={handleClick}
>
<Paper
elevation={0}
sx={{
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundImage: `url(${selectedImage})`,
}}
></Paper>
</Box>
) : (
fileType &&
isDocumentFormat(fileType) && (
<Box
sx={{
height: imageSize[1],
display: "flex",
border: "1px solid #b3b3b3",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
borderBottom: "unset",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
}}
onClick={handleClick}
>
<Typography
margin={2}
sx={{
fontWeight: 600,
fontSize: "1rem",
color: "#a19d9d",
}}
textAlign="center"
>
{fileName}
</Typography>
</Box>
)
)}
<Button
sx={{
width: "100%",
}}
color="error"
endIcon={<DeleteForeverIcon />}
variant="contained"
onClick={handleDeleteImage}
>
{t("UploadSystem.delete")}
</Button>
</>
)}
<input
type="file"
accept="image/*, .pdf, .doc, .docx, .xls, .xlsx"
style={{ display: "none" }}
onChange={handleUploadChange}
ref={fileInputRef}
/>
</Box>
);
height: imageSize[1],
}}
onClick={handleClick}
>
<AddIcon sx={{fontSize: "2rem", color: "#a19d9d"}}/>
<Typography
variant="subtitle2"
sx={{
fontWeight: 600,
fontSize: "1rem",
color: "#a19d9d",
mt: 1,
}}
textAlign="center"
>
{t("UploadSystem.upload_file")}
</Typography>
</Box>
</>
) : (
// Show the uploaded content along with the delete button when an image or document is selected
<>
{fileType && fileType.startsWith("image/") ? (
<Box
width="100%"
height={imageSize[1]}
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
objectFit: "contain",
border: "1px solid #b3b3b3",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
borderBottom: "unset",
padding: "5px",
overflow: "hidden",
}}
onClick={handleClick}
>
<Paper
elevation={0}
sx={{
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundImage: `url(${selectedImage})`,
}}
></Paper>
</Box>
) : (
fileType &&
isDocumentFormat(fileType) && (
<Box
sx={{
height: imageSize[1],
display: "flex",
border: "1px solid #b3b3b3",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
borderBottom: "unset",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
}}
onClick={handleClick}
>
<Typography
margin={2}
sx={{
fontWeight: 600,
fontSize: "1rem",
color: "#a19d9d",
}}
textAlign="center"
>
{fileName}
</Typography>
</Box>
)
)}
<Button
sx={{
width: "100%",
}}
color="error"
endIcon={<DeleteForeverIcon/>}
variant="contained"
onClick={handleDeleteImage}
>
{t("UploadSystem.delete")}
</Button>
</>
)}
<input
type="file"
accept="image/*, .pdf, .doc, .docx, .xls, .xlsx"
style={{display: "none"}}
onChange={handleUploadChange}
ref={fileInputRef}
/>
</Box>
);
};
export default UploadSystem;

8
src/core/components/isBotHandler.jsx
View File

@@ -1,8 +1,8 @@
import { NoSsr } from "@mui/material";
import {NoSsr} from "@mui/material";
const NoSsrHandler = ({ isBot, children }) => {
if (isBot) return children;
return <NoSsr>{children}</NoSsr>;
const NoSsrHandler = ({isBot, children}) => {
if (isBot) return children;
return <NoSsr>{children}</NoSsr>;
};
export default NoSsrHandler;

68
src/core/components/notifications/ErrorNotification.jsx
View File

@@ -1,40 +1,40 @@
import DangerousIcon from "@mui/icons-material/Dangerous";
import { Box, Typography } from "@mui/material";
import { toast } from "react-toastify";
import {Box, Typography} from "@mui/material";
import {toast} from "react-toastify";
const ErrorNotification = (directionApp, status, t, message) => {
toast(
() => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{ display: "flex", alignItems: "center" }}>
<DangerousIcon color="error" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="error" variant="button">
{t("notifications.error")} ({t("notifications.code")}: {status})
</Typography>
<Typography variant="caption">
{message || t("notifications.error_static_text")}
</Typography>
</Box>
</Box>
</Box>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
}
);
toast(
() => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{display: "flex", alignItems: "center"}}>
<DangerousIcon color="error" sx={{mr: 1.6}}/>
<Box sx={{display: "flex", flexDirection: "column"}}>
<Typography color="error" variant="button">
{t("notifications.error")} ({t("notifications.code")}: {status})
</Typography>
<Typography variant="caption">
{message || t("notifications.error_static_text")}
</Typography>
</Box>
</Box>
</Box>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
}
);
};
export default ErrorNotification;

74
src/core/components/notifications/SuccessNotification.jsx
View File

@@ -1,43 +1,43 @@
import BeenhereIcon from "@mui/icons-material/Beenhere";
import { Box, Typography } from "@mui/material";
import { toast } from "react-toastify";
import {Box, Typography} from "@mui/material";
import {toast} from "react-toastify";
const SuccessNotification = (directionApp, status, t) => {
toast(
() => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{ display: "flex", alignItems: "center" }}>
<BeenhereIcon color="success" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="success.main" variant="button">
{t("notifications.success")} ({t("notifications.code")}:{" "}
{status})
</Typography>
<Typography variant="caption">
{t("notifications.success_static_text")}
</Typography>
</Box>
</Box>
</Box>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: 3000,
hideProgressBar: true,
pauseOnHover: true,
closeOnClick: false,
draggable: true,
}
);
toast(
() => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{display: "flex", alignItems: "center"}}>
<BeenhereIcon color="success" sx={{mr: 1.6}}/>
<Box sx={{display: "flex", flexDirection: "column"}}>
<Typography color="success.main" variant="button">
{t("notifications.success")} ({t("notifications.code")}:{" "}
{status})
</Typography>
<Typography variant="caption">
{t("notifications.success_static_text")}
</Typography>
</Box>
</Box>
</Box>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: 3000,
hideProgressBar: true,
pauseOnHover: true,
closeOnClick: false,
draggable: true,
}
);
};
export default SuccessNotification;

62
src/core/components/notifications/UploadFileNotification.jsx
View File

@@ -1,37 +1,37 @@
import DangerousIcon from "@mui/icons-material/Dangerous";
import { Box, Typography } from "@mui/material";
import { toast } from "react-toastify";
import {Box, Typography} from "@mui/material";
import {toast} from "react-toastify";
const UploadFileNotification = (directionApp, t) => {
toast(
({ closeToast }) => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{ display: "flex", alignItems: "center" }}>
<DangerousIcon color="error" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="error" variant="button">
{t("UploadSystem.uploadfile_error")}
</Typography>
</Box>
</Box>
</Box>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
}
);
toast(
({closeToast}) => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{display: "flex", alignItems: "center"}}>
<DangerousIcon color="error" sx={{mr: 1.6}}/>
<Box sx={{display: "flex", flexDirection: "column"}}>
<Typography color="error" variant="button">
{t("UploadSystem.uploadfile_error")}
</Typography>
</Box>
</Box>
</Box>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
}
);
};
export default UploadFileNotification;

70
src/core/components/notifications/WarningNotification.jsx
View File

@@ -1,41 +1,41 @@
import ReportIcon from "@mui/icons-material/Report";
import { Box, Typography } from "@mui/material";
import { toast } from "react-toastify";
import {Box, Typography} from "@mui/material";
import {toast} from "react-toastify";
const WarningNotification = (directionApp, status, t) => {
toast(
() => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{ display: "flex", alignItems: "center" }}>
<ReportIcon color="warning" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="warning.main" variant="button">
{t("notifications.warning")} ({t("notifications.code")}:{" "}
{status})
</Typography>
<Typography variant="caption">
{t("notifications.warning_static_text")}
</Typography>
</Box>
</Box>
</Box>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
}
);
toast(
() => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{display: "flex", alignItems: "center"}}>
<ReportIcon color="warning" sx={{mr: 1.6}}/>
<Box sx={{display: "flex", flexDirection: "column"}}>
<Typography color="warning.main" variant="button">
{t("notifications.warning")} ({t("notifications.code")}:{" "}
{status})
</Typography>
<Typography variant="caption">
{t("notifications.warning_static_text")}
</Typography>
</Box>
</Box>
</Box>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
}
);
};
export default WarningNotification;

60
src/core/components/notifications/index.jsx
View File

@@ -3,37 +3,37 @@ import WarningNotification from "./WarningNotification";
import SuccessNotification from "./SuccessNotification";
const Notifications = async (directionApp, response, t) => {
const { status, data } = response;
const {status, data} = response;
switch (status) {
case 200:
SuccessNotification(directionApp, status, t);
break;
case 400:
ErrorNotification(directionApp, status, t);
break;
case 401:
ErrorNotification(directionApp, status, t);
break;
case 403:
ErrorNotification(directionApp, status, t);
break;
case 422:
ErrorNotification(directionApp, status, t, data.message);
break;
case 500:
WarningNotification(directionApp, status, t);
break;
case 503:
WarningNotification(directionApp, status, t);
break;
case 504:
WarningNotification(directionApp, status, t);
break;
default:
// Handle other cases if needed
break;
}
switch (status) {
case 200:
SuccessNotification(directionApp, status, t);
break;
case 400:
ErrorNotification(directionApp, status, t);
break;
case 401:
ErrorNotification(directionApp, status, t);
break;
case 403:
ErrorNotification(directionApp, status, t);
break;
case 422:
ErrorNotification(directionApp, status, t, data.message);
break;
case 500:
WarningNotification(directionApp, status, t);
break;
case 503:
WarningNotification(directionApp, status, t);
break;
case 504:
WarningNotification(directionApp, status, t);
break;
default:
// Handle other cases if needed
break;
}
};
export default Notifications;

30
src/core/data/apiRoutes.js
View File

@@ -14,55 +14,55 @@ export const GET_USER_ROUTE = BASE_URL + "/dashboard/profile/info";
//passenger office
export const GET_PASSENGER_OFFICE =
BASE_URL + "/dashboard/passenger_office_chief/show";
BASE_URL + "/dashboard/passenger_office_chief/show";
export const CONFIRM_PASSENGER_OFFICE =
BASE_URL + "/dashboard/passenger_office_chief/confirm";
BASE_URL + "/dashboard/passenger_office_chief/confirm";
export const REJECT_PASSENGER_OFFICE =
BASE_URL + "/dashboard/passenger_office_chief/reject";
BASE_URL + "/dashboard/passenger_office_chief/reject";
//passenger office
//passenger boss
export const GET_PASSENGER_BOSS =
BASE_URL + "/dashboard/province_working_group/show";
BASE_URL + "/dashboard/province_working_group/show";
export const CONFIRM_PASSENGER_BOSS =
BASE_URL + "/dashboard/province_working_group/confirm";
BASE_URL + "/dashboard/province_working_group/confirm";
export const REJECT_PASSENGER_BOSS =
BASE_URL + "/dashboard/province_working_group/reject";
BASE_URL + "/dashboard/province_working_group/reject";
//passenger boss
//transportation assistance
export const GET_TRANSPORTATION_ASSISTANCE =
BASE_URL + "/dashboard/transportation_assistant/show";
BASE_URL + "/dashboard/transportation_assistant/show";
export const CONFIRM_TRANSPORTATION_ASSISTANCE =
BASE_URL + "/dashboard/transportation_assistant/confirm";
BASE_URL + "/dashboard/transportation_assistant/confirm";
export const REJECT_TRANSPORTATION_ASSISTANCE =
BASE_URL + "/dashboard/transportation_assistant/reject";
BASE_URL + "/dashboard/transportation_assistant/reject";
//transportation assistance
//machinary office
export const GET_MACHINARY_OFFICE =
BASE_URL + "/dashboard/machinery_expert/show";
BASE_URL + "/dashboard/machinery_expert/show";
export const CONFIRM_MACHINARY_OFFICE =
BASE_URL + "/dashboard/machinery_expert/confirm";
BASE_URL + "/dashboard/machinery_expert/confirm";
export const REJECT_MACHINARY_OFFICE =
BASE_URL + "/dashboard/machinery_expert/reject";
BASE_URL + "/dashboard/machinery_expert/reject";
//passenger office
//province manager
export const GET_PROVINCE_MANAGER =
BASE_URL + "/dashboard/province_manager/show";
BASE_URL + "/dashboard/province_manager/show";
export const CONFIRM_PROVINCE_MANAGER =
BASE_URL + "/dashboard/province_manager/confirm";
BASE_URL + "/dashboard/province_manager/confirm";
export const REJECT_PROVINCE_MANAGER =
BASE_URL + "/dashboard/province_manager/reject";
BASE_URL + "/dashboard/province_manager/reject";
//province manager

24
src/core/data/headerProfileItems.jsx
View File

@@ -2,18 +2,18 @@ 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 />,
},
{
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;

104
src/core/data/sidebarMenu.jsx
View File

@@ -6,58 +6,58 @@ import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
import DesktopWindowsIcon from "@mui/icons-material/DesktopWindows";
const sidebarMenu = [
[
{
key: "sidebar.dashboard",
type: "page",
route: "/dashboard",
icon: <SpaceDashboardIcon />,
selected: false,
role: "all",
},
{
key: "sidebar.passenger-office-chief",
secondary: "secondary.passenger-office",
type: "page",
route: "/dashboard/passenger-office-chief",
icon: <AirlineSeatReclineNormalIcon />,
selected: false,
role: "passenger_office_chief",
},
{
key: "sidebar.machinary-expert",
type: "page",
route: "/dashboard/machinary-expert",
icon: <DirectionsCarFilledIcon />,
selected: false,
role: "machinery_expert",
},
{
key: "sidebar.passenger-boss",
secondary: "secondary.passenger-boss",
type: "page",
route: "/dashboard/passenger-boss",
icon: <AssignmentIndIcon />,
selected: false,
role: "passenger_office_chief",
},
{
key: "sidebar.transportation-assistant",
type: "page",
route: "/dashboard/transportation-assistant",
icon: <DirectionsRailwayIcon />,
selected: false,
role: "transportation_assistant",
},
{
key: "sidebar.province-manager",
type: "page",
route: "/dashboard/province-manager",
icon: <DesktopWindowsIcon />,
selected: false,
role: "province_manager",
},
],
[
{
key: "sidebar.dashboard",
type: "page",
route: "/dashboard",
icon: <SpaceDashboardIcon/>,
selected: false,
role: "all",
},
{
key: "sidebar.passenger-office-chief",
secondary: "secondary.passenger-office",
type: "page",
route: "/dashboard/passenger-office-chief",
icon: <AirlineSeatReclineNormalIcon/>,
selected: false,
role: "passenger_office_chief",
},
{
key: "sidebar.machinary-expert",
type: "page",
route: "/dashboard/machinary-expert",
icon: <DirectionsCarFilledIcon/>,
selected: false,
role: "machinery_expert",
},
{
key: "sidebar.passenger-boss",
secondary: "secondary.passenger-boss",
type: "page",
route: "/dashboard/passenger-boss",
icon: <AssignmentIndIcon/>,
selected: false,
role: "passenger_office_chief",
},
{
key: "sidebar.transportation-assistant",
type: "page",
route: "/dashboard/transportation-assistant",
icon: <DirectionsRailwayIcon/>,
selected: false,
role: "transportation_assistant",
},
{
key: "sidebar.province-manager",
type: "page",
route: "/dashboard/province-manager",
icon: <DesktopWindowsIcon/>,
selected: false,
role: "province_manager",
},
],
];
export default sidebarMenu;

48
src/core/utils/createEmotionCache.jsx
View File

@@ -1,38 +1,38 @@
import createCache from "@emotion/cache";
import { prefixer } from "stylis";
import {prefixer} from "stylis";
import stylisRTLPlugin from "stylis-plugin-rtl";
const isBrowser = typeof document !== "undefined";
export const createEmotionCacheLtr = () => {
let insertionPoint;
let insertionPoint;
if (isBrowser) {
const emotionInsertionPoint = document.querySelector(
'meta[name="emotion-insertion-point"]'
);
insertionPoint = emotionInsertionPoint ?? undefined;
}
if (isBrowser) {
const emotionInsertionPoint = document.querySelector(
'meta[name="emotion-insertion-point"]'
);
insertionPoint = emotionInsertionPoint ?? undefined;
}
return createCache({
key: "mui-style",
insertionPoint,
});
return createCache({
key: "mui-style",
insertionPoint,
});
};
export const createEmotionCacheRtl = () => {
let insertionPoint;
let insertionPoint;
if (isBrowser) {
const emotionInsertionPoint = document.querySelector(
'meta[name="emotion-insertion-point"]'
);
insertionPoint = emotionInsertionPoint ?? undefined;
}
if (isBrowser) {
const emotionInsertionPoint = document.querySelector(
'meta[name="emotion-insertion-point"]'
);
insertionPoint = emotionInsertionPoint ?? undefined;
}
return createCache({
key: "muirtl",
stylisPlugins: [prefixer, stylisRTLPlugin],
insertionPoint,
});
return createCache({
key: "muirtl",
stylisPlugins: [prefixer, stylisRTLPlugin],
insertionPoint,
});
};

12
src/core/utils/theme-rtl.jsx
View File

@@ -1,12 +1,12 @@
import { createTheme } from "@mui/material/styles";
import {createTheme} from "@mui/material/styles";
import theme from "./theme";
const themeRtl = createTheme({
direction: "rtl",
typography: {
fontFamily: `IRANSansFaNum, sans-serif`,
},
...theme,
direction: "rtl",
typography: {
fontFamily: `IRANSansFaNum, sans-serif`,
},
...theme,
});
export default themeRtl;

46
src/core/utils/theme.jsx
View File

@@ -1,30 +1,30 @@
import { faIR } from "@mui/x-date-pickers/locales";
import {faIR} from "@mui/x-date-pickers/locales";
const theme = {
palette: {
primary: {
main: "#084070",
contrastText: "#fff",
light: "#2c6291",
dark: "#11293e",
},
secondary: {
main: "#FF4E00",
contrastText: "#fff",
light: "#ed743e",
dark: "#ad3a07",
},
},
faIR,
components: {
MuiBackdrop: {
styleOverrides: {
root: {
backgroundColor: "#02020226", // Replace with your desired backdrop color and opacity
palette: {
primary: {
main: "#084070",
contrastText: "#fff",
light: "#2c6291",
dark: "#11293e",
},
secondary: {
main: "#FF4E00",
contrastText: "#fff",
light: "#ed743e",
dark: "#ad3a07",
},
},
faIR,
components: {
MuiBackdrop: {
styleOverrides: {
root: {
backgroundColor: "#02020226", // Replace with your desired backdrop color and opacity
},
},
},
},
},
},
};
export default theme;

174
src/layouts/AppLayout.jsx
View File

@@ -4,96 +4,96 @@ 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";
import {useEffect} from "react";
function AppLayout({ children, isBot }) {
const { languageIsReady } = useLanguage();
const { setLoadingPage } = useLoading();
const { userChangedLanguage, token, isAuth } = useUser();
useEffect(() => {
if (languageIsReady) {
if (token) {
if (isAuth) {
if (userChangedLanguage) {
setLoadingPage(true);
return;
}
setLoadingPage(false);
return;
}
setLoadingPage(true);
return;
}
setLoadingPage(false);
return;
}
setLoadingPage(true);
}, [languageIsReady, token, isAuth, userChangedLanguage]);
function AppLayout({children, isBot}) {
const {languageIsReady} = useLanguage();
const {setLoadingPage} = useLoading();
const {userChangedLanguage, token, isAuth} = useUser();
useEffect(() => {
if (languageIsReady) {
if (token) {
if (isAuth) {
if (userChangedLanguage) {
setLoadingPage(true);
return;
}
setLoadingPage(false);
return;
}
setLoadingPage(true);
return;
}
setLoadingPage(false);
return;
}
setLoadingPage(true);
}, [languageIsReady, token, isAuth, userChangedLanguage]);
if (!isBot) {
if (userChangedLanguage) return;
if (!languageIsReady) return;
}
if (!isBot) {
if (userChangedLanguage) return;
if (!languageIsReady) return;
}
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}
</>
);
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;

26
src/layouts/CenterLayout.jsx
View File

@@ -1,18 +1,18 @@
import { Fade, Stack } from "@mui/material";
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>
);
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;

32
src/layouts/FullPageLayout.jsx
View File

@@ -1,21 +1,21 @@
import { Stack } from "@mui/material";
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>
);
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;

118
src/layouts/MuiLayout.jsx
View File

@@ -1,76 +1,74 @@
import NoSsrHandler from "@/core/components/isBotHandler";
import {
createEmotionCacheRtl
} from "@/core/utils/createEmotionCache";
import {createEmotionCacheRtl} from "@/core/utils/createEmotionCache";
import themeRtl from "@/core/utils/theme-rtl";
import { CacheProvider } from "@emotion/react";
import { GlobalStyles } from "@mui/material";
import {CacheProvider} from "@emotion/react";
import {GlobalStyles} from "@mui/material";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import {ThemeProvider} from "@mui/material/styles";
import Head from "next/head";
const clientSideEmotionCacheRtl = createEmotionCacheRtl();
const MuiLayout = ({ children, isBot }) => {
const MuiLayout = ({children, isBot}) => {
const emotionCache = clientSideEmotionCacheRtl;
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",
},
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",
},
"*": {
scrollbarWidth: "thin",
scrollbarColor: "#e1e1e1 transparent",
},
"*::-moz-scrollbar-thumb": {
backgroundColor: "#e1e1e1",
},
[`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
"*::-webkit-scrollbar": {
height: "4px",
},
},
"*::-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%",
},
}}
/>
body: {
width: "100vw",
height: "100vh",
},
"#__next": {
width: "100%",
height: "100%",
},
}}
/>
<CssBaseline />
{children}
</ThemeProvider>
</CacheProvider>
</NoSsrHandler>
);
<CssBaseline/>
{children}
</ThemeProvider>
</CacheProvider>
</NoSsrHandler>
);
};
export default MuiLayout;

38
src/layouts/ScrollableLayout.jsx
View File

@@ -1,25 +1,25 @@
import { Box, Fade } from "@mui/material";
import {Box, Fade} from "@mui/material";
const ScrollableLayout = (props) => {
const overflowY = props?.y || "hidden";
const overflowX = props?.x || "hidden";
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>
);
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;

28
src/layouts/dashboardLayouts/breadcrumbs/BreadcrumbItem.jsx
View File

@@ -1,19 +1,19 @@
import LinkRouting from "@/core/components/LinkRouting";
import { Typography } from "@mui/material";
import { useTranslations } from "next-intl";
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("/")}`;
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>
);
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>
);
}

78
src/layouts/dashboardLayouts/breadcrumbs/index.jsx
View File

@@ -1,49 +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 {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();
const {isVisible} = props;
const theme = useTheme();
const router = useRouter();
if (!isVisible) {
return null;
}
if (!isVisible) {
return null;
}
const { pathname } = router;
const RouterArray = pathname.split("/").filter((segment) => segment !== "");
const {pathname} = router;
const RouterArray = pathname.split("/").filter((segment) => segment !== "");
if (RouterArray.length === 1) {
return null;
}
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>
);
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;

28
src/layouts/dashboardLayouts/header/ProfileData.jsx
View File

@@ -1,18 +1,18 @@
import { Avatar, Stack, Typography } from "@mui/material";
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.avatar}
/>
<Typography sx={{ fontSize: 15, fontWeight: 600 }} textAlign="center">
{user.username}
</Typography>
</Stack>
);
const {user} = useUser();
return (
<Stack alignItems="center" spacing={2} sx={{p: 3}}>
<Avatar
sx={{width: "80px", height: "80px"}}
alt="User Image"
src={user.avatar}
/>
<Typography sx={{fontSize: 15, fontWeight: 600}} textAlign="center">
{user.username}
</Typography>
</Stack>
);
}

105
src/layouts/dashboardLayouts/header/ProfileMenu.jsx
View File

@@ -1,61 +1,62 @@
import { Avatar, Menu, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import {Avatar, IconButton, Menu, Tooltip} from "@mui/material";
import {useState} from "react";
import ProfileData from "./ProfileData";
import ProfileOptions from "./ProfileOptions";
import { useTranslations } from "next-intl";
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 t = useTranslations();
const [anchorElUser, setAnchorElUser] = useState(null);
const {user} = useUser();
const handleOpenUserMenu = (event) => {
setAnchorElUser(event.currentTarget);
};
const handleCloseUserMenu = () => {
setAnchorElUser(null);
};
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.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>
</>
);
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.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;

90
src/layouts/dashboardLayouts/header/ProfileOptionLogOut.jsx
View File

@@ -1,49 +1,49 @@
import { Box, Button, MenuItem, Typography } from "@mui/material";
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";
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>
</>
);
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>
</>
);
}

88
src/layouts/dashboardLayouts/header/ProfileOptions.jsx
View File

@@ -1,49 +1,49 @@
import { Box, MenuItem, Typography } from "@mui/material";
import { NextLinkComposed } from "@/core/components/LinkRouting";
import { useTranslations } from "next-intl";
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();
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} />
</>
);
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}/>
</>
);
}

136
src/layouts/dashboardLayouts/header/index.jsx
View File

@@ -1,80 +1,72 @@
import MenuIcon from "@mui/icons-material/Menu";
import {
AppBar,
Box,
Container,
CssBaseline,
IconButton,
Stack,
Toolbar,
useTheme
} from "@mui/material";
import {AppBar, Box, Container, CssBaseline, IconButton, Stack, Toolbar, useTheme} from "@mui/material";
import ProfileMenu from "./ProfileMenu";
function Header({ drawerWidth, handleDrawerToggle }) {
const theme = useTheme();
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
return (
<>
<CssBaseline/>
<AppBar
position="fixed"
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,
},
},
width: {md: `calc(100% - ${drawerWidth}px)`},
ml: {md: `${drawerWidth}px`},
}}
>
</Box>
</Stack>
<Stack direction="row" justifyContent="flex-end" sx={{ flex: 1 }}>
<ProfileMenu />
</Stack>
</Toolbar>
</Container>
</AppBar>
</>
);
>
<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;

70
src/layouts/dashboardLayouts/index.jsx
View File

@@ -1,50 +1,50 @@
import { useState } from "react";
import {useState} from "react";
import FullPageLayout from "../FullPageLayout";
import Header from "./header";
import Sidebar from "./sidebar";
import { Toolbar } from "@mui/material";
import {Toolbar} from "@mui/material";
import BreadCrumbs from "./breadcrumbs";
import { ToastContainer } from "react-toastify";
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 {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}
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>
</FullPageLayout>
{directionApp === "rtl" ? <ToastContainer rtl /> : <ToastContainer ltr />}
</FullPageLayout>
);
);
};
export default DashboardLayouts;

45
src/layouts/dashboardLayouts/sidebar/SidebarDrawer.jsx
View File

@@ -1,29 +1,28 @@
import { Divider, Stack, Toolbar, Typography } from "@mui/material";
import { useTranslations } from "next-intl";
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("expert") /* make if on thease t("user_welfare_services")
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("expert") /* make if on thease t("user_welfare_services")
t("user_navy") */
}
</Typography>
</Stack>
</Toolbar>
<Divider />
<SidebarList handleDrawerToggle={handleDrawerToggle} />
</>
);
}
</Typography>
</Stack>
</Toolbar>
<Divider/>
<SidebarList handleDrawerToggle={handleDrawerToggle}/>
</>
);
};
export default SidebarDrawer;

92
src/layouts/dashboardLayouts/sidebar/SidebarList.jsx
View File

@@ -1,57 +1,57 @@
import { Divider, List } from "@mui/material";
import { useEffect, useReducer } from "react";
import {Divider, List} from "@mui/material";
import {useEffect, useReducer} from "react";
import SidebarListItem from "./SidebarListItem";
import sidebarMenu from "@/core/data/sidebarMenu";
import { useRouter } from "next/router";
import {useRouter} from "next/router";
import useUser from "@/lib/app/hooks/useUser";
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();
}
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);
const { user } = useUser();
const router = useRouter();
export default function SidebarList({handleDrawerToggle}) {
const [itemMenu, dispatch] = useReducer(reducer, sidebarMenu);
const {user} = useUser();
const router = useRouter();
useEffect(() => {
dispatch({ type: "SELECTED", route: router.pathname });
}, [router.pathname]);
useEffect(() => {
dispatch({type: "SELECTED", route: router.pathname});
}, [router.pathname]);
const filteredItemMenu = itemMenu[0].filter(
(item) => user.role.includes(item.role) || item.role === "all"
);
const filteredItemMenu = itemMenu[0].filter(
(item) => user.role.includes(item.role) || item.role === "all"
);
return (
<List>
{filteredItemMenu.map((item, index) => (
<SidebarListItem
item={item}
dispatch={dispatch}
key={item.key}
handleDrawerToggle={handleDrawerToggle}
/>
))}
{filteredItemMenu.length > 0 && <Divider />}
</List>
);
return (
<List>
{filteredItemMenu.map((item, index) => (
<SidebarListItem
item={item}
dispatch={dispatch}
key={item.key}
handleDrawerToggle={handleDrawerToggle}
/>
))}
{filteredItemMenu.length > 0 && <Divider/>}
</List>
);
}

143
src/layouts/dashboardLayouts/sidebar/SidebarListItem.jsx
View File

@@ -1,84 +1,77 @@
import { NextLinkComposed } from "@/core/components/LinkRouting";
import {NextLinkComposed} from "@/core/components/LinkRouting";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import {
Badge,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Typography,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { Fragment } from "react";
import {Badge, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography,} from "@mui/material";
import {useTranslations} from "next-intl";
import {Fragment} from "react";
import SidebarListSubItem from "./SidebarListSubItem";
const SidebarListItem = ({ item, dispatch, handleDrawerToggle }) => {
const t = useTranslations();
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)}
secondary={
item.secondary !== undefined ? (
<Typography variant="caption" color="textSecondary">
{t(item.secondary)}
</Typography>
) : null
}
/>
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)}
secondary={
item.secondary !== undefined ? (
<Typography variant="caption" color="textSecondary">
{t(item.secondary)}
</Typography>
) : null
}
/>
{item.type == "menu" &&
(item.showSubItem ? <ExpandLess /> : <ExpandMore />)}
<Badge
badgeContent="21"
color="error"
variant="standard"
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
/>
</ListItemButton>
</ListItem>
{item.subItem && (
<SidebarListSubItem
item={item}
handleDrawerToggle={handleDrawerToggle}
/>
)}
</Fragment>
);
{item.type == "menu" &&
(item.showSubItem ? <ExpandLess/> : <ExpandMore/>)}
<Badge
badgeContent="21"
color="error"
variant="standard"
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
/>
</ListItemButton>
</ListItem>
{item.subItem && (
<SidebarListSubItem
item={item}
handleDrawerToggle={handleDrawerToggle}
/>
)}
</Fragment>
);
};
export default SidebarListItem;

90
src/layouts/dashboardLayouts/sidebar/SidebarListSubItem.jsx
View File

@@ -1,54 +1,48 @@
import { NextLinkComposed } from "@/core/components/LinkRouting";
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";
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();
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>
);
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;

80
src/layouts/dashboardLayouts/sidebar/index.jsx
View File

@@ -1,46 +1,46 @@
import { Box, Drawer } from "@mui/material";
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>
);
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;

14
src/lib/app/contexts/DatatableContext.jsx
View File

@@ -1,14 +1,14 @@
import { createContext } from "react";
import {createContext} from "react";
import useDataTable from "../hooks/useDatatable";
export const DataTableContext = createContext();
export const DataTableProvider = (props) => {
const contextValue = useDataTable();
const contextValue = useDataTable();
return (
<DataTableContext.Provider value={contextValue}>
{props.children}
</DataTableContext.Provider>
);
return (
<DataTableContext.Provider value={contextValue}>
{props.children}
</DataTableContext.Provider>
);
};

20
src/lib/app/contexts/ReloadDatatableContext.jsx
View File

@@ -1,15 +1,15 @@
import { createContext, useState } from "react";
import {createContext, useState} from "react";
export const ReloadDataTableContext = createContext();
export const ReloadDataTableProvider = ({ children }) => {
const [reloadDataTable, setReloadDataTable] = useState(false);
export const ReloadDataTableProvider = ({children}) => {
const [reloadDataTable, setReloadDataTable] = useState(false);
return (
<ReloadDataTableContext.Provider
value={{ reloadDataTable, setReloadDataTable }}
>
{children}
</ReloadDataTableContext.Provider>
);
return (
<ReloadDataTableContext.Provider
value={{reloadDataTable, setReloadDataTable}}
>
{children}
</ReloadDataTableContext.Provider>
);
};

178
src/lib/app/contexts/language.jsx
View File

@@ -1,99 +1,99 @@
import { FA_DATATABLE_LOCALIZATION } from "&/locales/fa/datatable";
import { useRouter } from "next/router";
import { createContext, useEffect, useState } from "react";
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,
export const LanguageProvider = ({children}) => {
const router = useRouter();
const languageList = [
{
locale: languageApp,
key: "fa",
dir: "rtl",
name: "فارسی",
fontFamily: `IRANSans, sans-serif`,
tableLocalization: FA_DATATABLE_LOCALIZATION,
}
);
return;
}
for (const lang of languageList) {
if (languageApp != lang.key) continue;
setDirectionApp(lang.dir);
document.dir = lang.dir;
}
];
const {user, userChangedLanguage, changeLanguageState} = useUser();
const [languageIsReady, setLanguageIsReady] = useState(false);
const [languageApp, setLanguageApp] = useState();
const [directionApp, setDirectionApp] = useState(
process.env.NEXT_PUBLIC_DEFAULT_DIRECTION
);
const timer = setTimeout(() => {
changeLanguageState(false);
setLanguageIsReady(true);
}, 1000);
useEffect(() => {
const lang = localStorage.getItem("_language");
return () => {
clearTimeout(timer);
};
}, [router.locale, router.isReady, userChangedLanguage, languageApp]);
if (!lang && !languageApp) {
setLanguageApp(process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE);
} else if (lang) {
setLanguageApp(lang);
}
}, []);
return (
<LanguageContext.Provider
value={{
languageApp,
setLanguageApp,
directionApp,
languageIsReady,
setLanguageIsReady,
languageList,
}}
>
{children}
</LanguageContext.Provider>
);
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>
);
};

18
src/lib/app/contexts/loading.jsx
View File

@@ -1,14 +1,14 @@
import LoadingHardPage from "@/core/components/LoadingHardPage";
import { createContext, useState } from "react";
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>
);
export const LoadingProvider = ({children}) => {
const [loadingPage, setLoadingPage] = useState(false);
return (
<LoadingContext.Provider value={{loadingPage, setLoadingPage}}>
<LoadingHardPage loading={loadingPage}/>
{children}
</LoadingContext.Provider>
);
};

204
src/lib/app/contexts/user.jsx
View File

@@ -1,124 +1,122 @@
import {
GET_USER_ROUTE,
SET_LANGUAGE
} from "@/core/data/apiRoutes";
import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
import axios from "axios";
import { createContext, useCallback, useEffect, useReducer } from "react";
import {createContext, useCallback, useEffect, useReducer} from "react";
const initialUser = {
isAuth: false,
userChangedLanguage: false,
token: null,
user: {},
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;
}
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);
export const UserProvider = ({children}) => {
const [state, dispatch] = useReducer(reducer, initialUser);
const clearUser = useCallback(() => {
dispatch({ type: "CLEAR_USER" });
}, []);
const clearUser = useCallback(() => {
dispatch({type: "CLEAR_USER"});
}, []);
const changeUser = useCallback((user) => {
dispatch({ type: "CHANGE_USER", user });
}, []);
const changeUser = useCallback((user) => {
dispatch({type: "CHANGE_USER", user});
}, []);
const changeUserLanguage = useCallback(/* use in multi language app */);
const changeUserLanguage = useCallback(/* use in multi language app */);
const changeAuthState = useCallback((isAuth) => {
dispatch({ type: "CHANGE_AUTH_STATE", isAuth });
}, []);
const changeAuthState = useCallback((isAuth) => {
dispatch({type: "CHANGE_AUTH_STATE", isAuth});
}, []);
const changeLanguageState = useCallback((userChangedLanguage) => {
dispatch({ type: "CHANGE_LANGUAGE_STATE", userChangedLanguage });
}, []);
const changeLanguageState = useCallback((userChangedLanguage) => {
dispatch({type: "CHANGE_LANGUAGE_STATE", userChangedLanguage});
}, []);
const clearToken = useCallback(() => {
dispatch({ type: "CLEAR_TOKEN" });
}, []);
const clearToken = useCallback(() => {
dispatch({type: "CLEAR_TOKEN"});
}, []);
const setToken = useCallback((token) => {
dispatch({ type: "SET_TOKEN", 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);
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]
);
}, [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>
);
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>
);
};

180
src/lib/app/hooks/useDatatable.jsx
View File

@@ -1,113 +1,113 @@
import axios from "axios";
import { useCallback, useContext, useReducer, useState } from "react";
import { ReloadDataTableContext } from "../contexts/ReloadDatatableContext";
import {useCallback, useContext, useReducer, useState} from "react";
import {ReloadDataTableContext} from "../contexts/ReloadDatatableContext";
import useUser from "./useUser";
import Notifications from "@/core/components/notifications";
import useDirection from "./useDirection";
import { useTranslations } from "next-intl";
import {useTranslations} from "next-intl";
const initialValues = {
url: "",
rowID: "",
values: {},
url: "",
rowID: "",
values: {},
};
const reducer = (state, action) => {
switch (action.type) {
case "CONFIRM_DATA":
return {
...state,
url: action.url,
rowID: action.rowID,
};
case "REJECT_DATA":
return {
...state,
url: action.url,
rowID: action.rowID,
values: {},
};
default:
return state;
}
switch (action.type) {
case "CONFIRM_DATA":
return {
...state,
url: action.url,
rowID: action.rowID,
};
case "REJECT_DATA":
return {
...state,
url: action.url,
rowID: action.rowID,
values: {},
};
default:
return state;
}
};
const useDataTable = () => {
const { setReloadDataTable } = useContext(ReloadDataTableContext);
const [state, dispatch] = useReducer(reducer, initialValues);
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const [rowId, setRowId] = useState(null);
const { directionApp } = useDirection();
const t = useTranslations();
const {setReloadDataTable} = useContext(ReloadDataTableContext);
const [state, dispatch] = useReducer(reducer, initialValues);
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const [rowId, setRowId] = useState(null);
const {directionApp} = useDirection();
const t = useTranslations();
const { token } = useUser();
const {token} = useUser();
const confirmData = useCallback(async (url, rowID, values) => {
dispatch({ type: "CONFIRM_DATA", url: url, rowID: rowID, values: values });
axios
.post(`${url}/${rowID}`, values, {
headers: { authorization: `Bearer ${token}` },
})
.then((response) => {
setReloadDataTable(true);
Notifications(directionApp, response, t);
})
.catch((error) => {
Notifications(directionApp, error.response, t);
});
}, []);
const confirmData = useCallback(async (url, rowID, values) => {
dispatch({type: "CONFIRM_DATA", url: url, rowID: rowID, values: values});
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
setReloadDataTable(true);
Notifications(directionApp, response, t);
})
.catch((error) => {
Notifications(directionApp, error.response, t);
});
}, []);
const rejectData = useCallback(async (url, rowID, values) => {
dispatch({ type: "REJECT_DATA", url: url, rowID: rowID, values: values });
axios
.post(`${url}/${rowID}`, values, {
headers: { authorization: `Bearer ${token}` },
})
.then((response) => {
setReloadDataTable(true);
Notifications(directionApp, response, t);
})
.catch((error) => {
console.log(error);
Notifications(directionApp, error.response, t);
});
}, []);
const rejectData = useCallback(async (url, rowID, values) => {
dispatch({type: "REJECT_DATA", url: url, rowID: rowID, values: values});
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
setReloadDataTable(true);
Notifications(directionApp, response, t);
})
.catch((error) => {
console.log(error);
Notifications(directionApp, error.response, t);
});
}, []);
//Confirm Data
const handleOpenConfirmDialog = (row) => {
setRowId(row.getValue("id"));
setOpenConfirmDialog(true);
};
//Confirm Data
const handleOpenConfirmDialog = (row) => {
setRowId(row.getValue("id"));
setOpenConfirmDialog(true);
};
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
//End Confirm Data
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
//End Confirm Data
// Reject Data
const handleOpenRejectDialog = (row) => {
setRowId(row.getValue("id"));
setOpenRejectDialog(true);
};
// Reject Data
const handleOpenRejectDialog = (row) => {
setRowId(row.getValue("id"));
setOpenRejectDialog(true);
};
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
// End Reject Data
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
// End Reject Data
const contextValue = {
handleOpenConfirmDialog,
handleCloseConfirmDialog,
handleOpenRejectDialog,
handleCloseRejectDialog,
rowId,
openConfirmDialog,
openRejectDialog,
rejectData,
confirmData,
};
return contextValue;
const contextValue = {
handleOpenConfirmDialog,
handleCloseConfirmDialog,
handleOpenRejectDialog,
handleCloseRejectDialog,
rowId,
openConfirmDialog,
openRejectDialog,
rejectData,
confirmData,
};
return contextValue;
};
export default useDataTable;

8
src/lib/app/hooks/useDirection.jsx
View File

@@ -1,10 +1,10 @@
import { useContext } from "react";
import { LanguageContext } from "../contexts/language";
import {useContext} from "react";
import {LanguageContext} from "../contexts/language";
const useDirection = () => {
const { directionApp } = useContext(LanguageContext);
const {directionApp} = useContext(LanguageContext);
return { directionApp };
return {directionApp};
};
export default useDirection;

38
src/lib/app/hooks/useLanguage.jsx
View File

@@ -1,28 +1,28 @@
import { useContext } from "react";
import { LanguageContext } from "../contexts/language";
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 {isAuth, changeUserLanguage} = useUser();
const {
languageApp,
setLanguageApp,
languageIsReady,
setLanguageIsReady,
languageList,
} = useContext(LanguageContext);
const changeLanguage = (lang) => {
if (lang == languageApp) return;
const changeLanguage = (lang) => {
if (lang == languageApp) return;
setLanguageIsReady(false);
setLanguageApp(lang);
if (isAuth) {
changeUserLanguage(lang);
}
};
setLanguageIsReady(false);
setLanguageApp(lang);
if (isAuth) {
changeUserLanguage(lang);
}
};
return { languageApp, changeLanguage, languageIsReady, languageList };
return {languageApp, changeLanguage, languageIsReady, languageList};
};
export default useLanguage;

8
src/lib/app/hooks/useLoading.jsx
View File

@@ -1,10 +1,10 @@
import { useContext } from "react";
import { LoadingContext } from "../contexts/loading";
import {useContext} from "react";
import {LoadingContext} from "../contexts/loading";
const useLoading = () => {
const { setLoadingPage } = useContext(LoadingContext);
const {setLoadingPage} = useContext(LoadingContext);
return { setLoadingPage };
return {setLoadingPage};
};
export default useLoading;

56
src/lib/app/hooks/useUser.jsx
View File

@@ -1,34 +1,34 @@
import { useContext } from "react";
import { UserContext } from "../contexts/user";
import {useContext} from "react";
import {UserContext} from "../contexts/user";
const useUser = () => {
const {
isAuth,
userChangedLanguage,
token,
user,
getUser,
clearUser,
changeUser,
changeAuthState,
changeLanguageState,
clearToken,
setToken,
} = useContext(UserContext);
const {
isAuth,
userChangedLanguage,
token,
user,
getUser,
clearUser,
changeUser,
changeAuthState,
changeLanguageState,
clearToken,
setToken,
} = useContext(UserContext);
return {
isAuth,
userChangedLanguage,
token,
user,
getUser,
clearUser,
changeUser,
changeAuthState,
changeLanguageState,
clearToken,
setToken,
};
return {
isAuth,
userChangedLanguage,
token,
user,
getUser,
clearUser,
changeUser,
changeAuthState,
changeLanguageState,
clearToken,
setToken,
};
};
export default useUser;

68
src/middlewares/RolePermission.jsx
View File

@@ -1,43 +1,43 @@
import { NextLinkComposed } from "@/core/components/LinkRouting";
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 {Button, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
const RolePermission = ({ children, requiredPermissions }) => {
const { user } = useUser();
const t = useTranslations();
const RolePermission = ({children, requiredPermissions}) => {
const {user} = useUser();
const t = useTranslations();
const hasPermission = requiredPermissions.some((permission) =>
user?.role?.includes(permission)
);
if (!hasPermission) {
return (
<Message
text={
<Typography sx={{ textAlign: "center" }}>
{t("Permission.typography_you_dont_have_access")}
</Typography>
}
actions={
<>
<Button
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/dashboard",
}}
>
{t("Permission.button_back_dashboard")}
</Button>
</>
}
/>
const hasPermission = requiredPermissions.some((permission) =>
user?.role?.includes(permission)
);
}
return <>{children}</>;
if (!hasPermission) {
return (
<Message
text={
<Typography sx={{textAlign: "center"}}>
{t("Permission.typography_you_dont_have_access")}
</Typography>
}
actions={
<>
<Button
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/dashboard",
}}
>
{t("Permission.button_back_dashboard")}
</Button>
</>
}
/>
);
}
return <>{children}</>;
};
export default RolePermission;

70
src/middlewares/WithAuth.jsx
View File

@@ -1,42 +1,42 @@
import { NextLinkComposed } from "@/core/components/LinkRouting";
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";
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();
const WithAuthMiddleware = ({children}) => {
const {isAuth} = useUser();
const t = useTranslations();
const router = useRouter();
if (!isAuth)
return (
<Message
text={
<Typography sx={{ textAlign: "center" }}>
{t(
"Authorization.typography_your_access_to_this_page_has_expired_Please_login_again"
)}
</Typography>
}
actions={
<>
<Button
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/login-expert",
query: { back_url: encodeURIComponent(router.asPath) },
}}
>
{t("login")}
</Button>
</>
}
/>
);
return <>{children}</>;
if (!isAuth)
return (
<Message
text={
<Typography sx={{textAlign: "center"}}>
{t(
"Authorization.typography_your_access_to_this_page_has_expired_Please_login_again"
)}
</Typography>
}
actions={
<>
<Button
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/login-expert",
query: {back_url: encodeURIComponent(router.asPath)},
}}
>
{t("login")}
</Button>
</>
}
/>
);
return <>{children}</>;
};
export default WithAuthMiddleware;

92
src/middlewares/WithoutAuth.jsx
View File

@@ -1,56 +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";
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();
const WithoutAuthMiddleware = ({children}) => {
const {isAuth} = useUser();
const t = useTranslations();
const router = useRouter();
// gettin url query
const searchParams = useSearchParams();
const backUrlDecodedPath = searchParams.get("back_url");
// 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);
useEffect(() => {
if (!isAuth) return;
const timer = setTimeout(() => {
router.replace(
backUrlDecodedPath
? decodeURIComponent(backUrlDecodedPath)
: "/dashboard"
);
}, 2000);
return () => {
clearTimeout(timer);
};
}, [isAuth]);
return () => {
clearTimeout(timer);
};
}, [isAuth]);
if (isAuth)
return (
<Message
text={
<Stack alignItems="center" spacing={2}>
<Typography sx={{ textAlign: "center" }}>
{t(
"Authorization.typography_your_login_is_valid_and_you_do_not_need_to_login_again"
)}
</Typography>
<Typography>
{t("Authorization.typography_redirect_to")}{" "}
{backUrlDecodedPath
? t("Authorization.typography_routing_previuos_page")
: t("Authorization.typography_routing_dashbaord_page")}
</Typography>
</Stack>
}
/>
);
return <>{children}</>;
if (isAuth)
return (
<Message
text={
<Stack alignItems="center" spacing={2}>
<Typography sx={{textAlign: "center"}}>
{t(
"Authorization.typography_your_login_is_valid_and_you_do_not_need_to_login_again"
)}
</Typography>
<Typography>
{t("Authorization.typography_redirect_to")}{" "}
{backUrlDecodedPath
? t("Authorization.typography_routing_previuos_page")
: t("Authorization.typography_routing_dashbaord_page")}
</Typography>
</Stack>
}
/>
);
return <>{children}</>;
};
export default WithoutAuthMiddleware;

44
src/pages/_app.jsx
View File

@@ -1,30 +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 {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";
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>
</>
);
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;

104
src/pages/_document.jsx
View File

@@ -1,67 +1,65 @@
import {
createEmotionCacheLtr
} from "@/core/utils/createEmotionCache";
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";
import Document, {Head, Html, Main, NextScript} from "next/document";
export default function MyDocument(props) {
const { emotionStyleTags } = 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>
);
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 originalRenderPage = ctx.renderPage;
let cache;
switch (ctx.locale) {
case "fa":
cache = createEmotionCacheLtr();
break;
}
const { extractCriticalToChunks } = createEmotionServer(cache);
const {extractCriticalToChunks} = createEmotionServer(cache);
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) =>
function EnhanceApp(props) {
return <App emotionCache={cache} {...props} />;
},
});
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) =>
function EnhanceApp(props) {
return <App emotionCache={cache} {...props} />;
},
});
const initialProps = await Document.getInitialProps(ctx);
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 }}
/>
));
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,
};
return {
...initialProps,
emotionStyleTags,
};
};

30
src/pages/dashboard/change-password/index.jsx
View File

@@ -1,23 +1,23 @@
import DashboardChangePasswordComponent from "@/components/dashboard/change-password";
import TitlePage from "@/core/components/TitlePage";
import WithAuthMiddleware from "@/middlewares/WithAuth";
import { parse } from "next-useragent";
import {parse} from "next-useragent";
export default function LoanFollowUp() {
return (
<WithAuthMiddleware>
<TitlePage text="Dashboard.change_password" />
<DashboardChangePasswordComponent />
</WithAuthMiddleware>
);
return (
<WithAuthMiddleware>
<TitlePage text="Dashboard.change_password"/>
<DashboardChangePasswordComponent/>
</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,
},
};
export async function getServerSideProps({req, locale}) {
const {isBot} = parse(req.headers["user-agent"]);
return {
props: {
messages: (await import(`&/locales/${locale}/app.json`)).default,
isBot,
},
};
}

30
src/pages/dashboard/edit-profile/index.jsx
View File

@@ -1,23 +1,23 @@
import DashboardEditProfile from "@/components/dashboard/edit-profile";
import TitlePage from "@/core/components/TitlePage";
import WithAuthMiddleware from "@/middlewares/WithAuth";
import { parse } from "next-useragent";
import {parse} from "next-useragent";
export default function LoanFollowUp() {
return (
<WithAuthMiddleware>
<TitlePage text="Dashboard.edit_profile" />
<DashboardEditProfile />
</WithAuthMiddleware>
);
return (
<WithAuthMiddleware>
<TitlePage text="Dashboard.edit_profile"/>
<DashboardEditProfile/>
</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,
},
};
export async function getServerSideProps({req, locale}) {
const {isBot} = parse(req.headers["user-agent"]);
return {
props: {
messages: (await import(`&/locales/${locale}/app.json`)).default,
isBot,
},
};
}

Some files were not shown because too many files have changed in this diff Show More