up

package-lock.json

@@ -26,6 +26,7 @@
         "react-router-dom": "^7.9.4",
         "react-spinners": "^0.17.0",
         "react-toastify": "^11.0.5",
+        "recharts": "^3.10.0",
         "swiper": "^12.0.2",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.14",
@@ -1440,6 +1441,32 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.38",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.38.tgz",
@@ -1733,6 +1760,18 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.17",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
@@ -2102,6 +2141,69 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2169,6 +2271,12 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.46.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.0.tgz",
@@ -2797,6 +2905,127 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2814,6 +3043,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2927,6 +3162,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.49.0.tgz",
+      "integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/esbuild": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
@@ -3170,6 +3415,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3575,6 +3826,17 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.15.tgz",
+      "integrity": "sha512-VrNANlmnWQnh5COXIIOQXM9oOJw7naGKlBT74ZOOR6lpVXc3gFEu9FJLDFcpCJ2j+NWr8TIwtWD//T6ZX6TKiQ==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3602,6 +3864,15 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4496,7 +4767,8 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-loading-skeleton": {
       "version": "3.5.0",
@@ -4531,6 +4803,30 @@
         "react-dom": ">=16.8.6 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4602,6 +4898,58 @@
         "react-dom": "^18 || ^19"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.10.0.tgz",
+      "integrity": "sha512-wulMvfncpIlmu2uFtRU/mE5/+NiVtASXkw2KdwJTdHs3WsASX0WxZlX+rpKgyn5BDbIhkPtCpUKkB9XNK5KE0w==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^11.1.8",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.2.0",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4862,6 +5210,12 @@
       "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
       "license": "MIT"
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -5093,6 +5447,28 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",

package.json

@@ -28,6 +28,7 @@
     "react-router-dom": "^7.9.4",
     "react-spinners": "^0.17.0",
     "react-toastify": "^11.0.5",
+    "recharts": "^3.10.0",
     "swiper": "^12.0.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14",

src/components/ArchiveWithConfirm.tsx

@@ -0,0 +1,46 @@
+import { Archive } from 'iconsax-react'
+import { type FC, useState } from 'react'
+import ModalConfrim from './ModalConfrim'
+
+interface Props {
+    onArchive: () => void
+    isloading?: boolean
+    colorIcon?: string
+    title?: string
+}
+
+const ArchiveWithConfirm: FC<Props> = ({
+    onArchive,
+    isloading = false,
+    colorIcon,
+    title = 'آرشیو',
+}) => {
+    const [isConfirm, setIsConfirm] = useState(false)
+
+    return (
+        <div>
+            <button
+                type="button"
+                title={title}
+                onClick={() => setIsConfirm(true)}
+                className="inline-flex"
+            >
+                <Archive className="size-5" color={colorIcon || '#8C90A3'} />
+            </button>
+
+            <ModalConfrim
+                isOpen={isConfirm}
+                close={() => setIsConfirm(false)}
+                onConfrim={() => {
+                    onArchive()
+                    setIsConfirm(false)
+                }}
+                isloading={isloading}
+                title_header="آرشیو پیش‌فاکتور"
+                label="آیا از آرشیو کردن این پیش‌فاکتور مطمئن هستید؟"
+            />
+        </div>
+    )
+}
+
+export default ArchiveWithConfirm

src/components/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type FC, type MouseEvent } from 'react'
+import { useEffect, useRef, useState, type FC, type MouseEvent as ReactMouseEvent } from 'react'
 import { ArrowDown2, CloseCircle, TickSquare } from 'iconsax-react'
 import { clx } from '../helpers/utils'
 import type { ItemsSelectType } from './Select'
@@ -55,7 +55,7 @@ const MultiSelect: FC<Props> = ({
         }
     }
 
-    const handleClear = (e: MouseEvent) => {
+    const handleClear = (e: ReactMouseEvent) => {
         e.stopPropagation()
         onChange([])
         onBlur?.()

src/config/Paths.tsx

@@ -8,8 +8,8 @@ export const Paths = {
     create: '/product/create',
     update: '/product/update/',
     category: {
-      create: '/product/category/create',
       list: '/product/category/list',
+      children: '/product/category/list/',
       update: '/product/category/update/',
     },
     attribute: {
@@ -56,6 +56,7 @@ export const Paths = {
     print: '/service/print',
   },
   home: '/home',
+  profile: '/profile',
   myOrders: '/my-orders',
   perfomaInvoice: {
     list: '/invoice/list',

src/config/permissions.ts

@@ -0,0 +1,67 @@
+import { Paths } from '@/config/Paths'
+
+/** Permission names aligned with API PermissionEnum. */
+export const Permissions = {
+  DASHBOARD: 'dashboard',
+  VIEW_ORDERS: 'view_orders',
+  VIEW_ASSIGNED_ORDERS: 'view_assigned_orders',
+  VIEW_INVOICES: 'view_invoices',
+  VIEW_REQUESTS: 'view_requests',
+  MANAGE_PAYMENTS: 'manage_payments',
+  VIEW_USERS: 'view_users',
+  VIEW_PRINT_FORM: 'view_print_form',
+  MANAGE_ADMINS: 'manage_admins',
+  MANAGE_ROLES: 'manage_roles',
+  MANAGE_PRODUCTS: 'manage_products',
+  MANAGE_TICKETS: 'manage_tickets',
+  MANAGE_ANNOUNCEMENTS: 'manage_announcements',
+  MANAGE_CRITICISMS: 'manage_criticisms',
+  MANAGE_LEARNINGS: 'manage_learnings',
+} as const
+
+export type PermissionName = (typeof Permissions)[keyof typeof Permissions]
+
+export const ORDER_VIEW_PERMISSIONS: PermissionName[] = [
+  Permissions.VIEW_ORDERS,
+  Permissions.VIEW_ASSIGNED_ORDERS,
+]
+
+type LandingRoute = {
+  permissions: PermissionName | PermissionName[]
+  path: string
+}
+
+/** Sidebar-ordered landing candidates when choosing a post-login / fallback path. */
+const LANDING_ROUTES: LandingRoute[] = [
+  { permissions: Permissions.DASHBOARD, path: Paths.home },
+  { permissions: ORDER_VIEW_PERMISSIONS, path: Paths.order.list },
+  { permissions: Permissions.VIEW_INVOICES, path: Paths.perfomaInvoice.list },
+  { permissions: Permissions.VIEW_REQUESTS, path: Paths.requests.list },
+  { permissions: Permissions.MANAGE_PAYMENTS, path: Paths.payments.list },
+  { permissions: Permissions.VIEW_USERS, path: Paths.users.list },
+  { permissions: Permissions.VIEW_PRINT_FORM, path: Paths.print.list },
+  { permissions: Permissions.MANAGE_ADMINS, path: Paths.admin.list },
+  { permissions: Permissions.MANAGE_PRODUCTS, path: Paths.product.list },
+  { permissions: Permissions.MANAGE_TICKETS, path: Paths.tickets.list },
+  { permissions: Permissions.MANAGE_ANNOUNCEMENTS, path: Paths.announcement.list },
+  { permissions: Permissions.MANAGE_CRITICISMS, path: Paths.criticisms.list },
+  { permissions: Permissions.MANAGE_LEARNINGS, path: Paths.learning.list },
+]
+
+export const hasPermission = (
+  userPermissions: string[],
+  required: string | string[],
+): boolean => {
+  const requiredList = Array.isArray(required) ? required : [required]
+  return requiredList.some((permission) => userPermissions.includes(permission))
+}
+
+/** First permitted app path, or profile if none match. */
+export const getDefaultAdminPath = (permissions: string[]): string => {
+  for (const route of LANDING_ROUTES) {
+    if (hasPermission(permissions, route.permissions)) {
+      return route.path
+    }
+  }
+  return Paths.profile
+}

src/config/sessionAuth.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { getToken, removeRefreshToken, removeToken } from "./func";
+import { useAuthStore } from "@/pages/auth/store/AuthStore";
 
 type SessionAuthStore = {
   isAuthenticated: boolean;
@@ -14,6 +15,7 @@ export const useSessionAuth = create<SessionAuthStore>((set) => ({
     removeToken();
     removeRefreshToken();
     window.isRefreshTokenExpired = false;
+    useAuthStore.getState().reset();
     set({ isAuthenticated: false });
   },
 }));

src/locale/fa.ts

@@ -26,6 +26,10 @@ export const fa = {
     factureCount: "پیش فاکتور تایید نشده",
     orderCount: "سفارش های در حال انجام",
     orderDoneCount: "سفارشات انجام شده",
+    customerCount: "تعداد مشتریان",
+    weeklyOrders: "سفارشات هفتگی",
+    week: "هفته",
+    orders: "سفارش",
     services: "خدمات",
     submitNewOrder: "سفارش خودرا ثبت کنید",
     submitNewOrderButton: "سفارش جدید",

src/pages/admin/List.tsx

@@ -1,32 +1,48 @@
 import { useState, type FC } from "react";
-import { useGetAdmins, useDeleteAdmin } from "./hooks/useAdminData";
+import { useGetAdmins, useDeleteAdmin, useGetAdminMe } from "./hooks/useAdminData";
 import Table from "@/components/Table";
 import PresignedImage from "@/components/PresignedImage";
 import moment from "moment-jalaali";
 import { Link } from "react-router-dom";
 import { Paths } from "@/config/Paths";
 import Button from "@/components/Button";
-import { AddSquare, Eye } from "iconsax-react";
+import { AddSquare, Eye, ShieldSecurity } from "iconsax-react";
 import TrashWithConfrim from "@/components/TrashWithConfrim";
 
 const AdminList: FC = () => {
   const [page, setPage] = useState<number>(1);
   const { data } = useGetAdmins(page);
   const deleteAdminMutation = useDeleteAdmin();
+  const { data: adminMe } = useGetAdminMe();
+  const canManageRoles = adminMe?.data?.role?.permissions?.some(
+    (p) => p.name === "manage_roles",
+  );
 
   return (
     <div className="mt-5">
       <div className="flex justify-between items-center">
         <h1 className="text-lg font-light">مدیران</h1>
+        <div className="flex gap-2">
+          {canManageRoles && (
+            <Link to={Paths.role.list}>
+              <Button className="w-fit px-6 bg-[#F5F7FC]">
+                <div className="flex gap-1.5">
+                  <ShieldSecurity size={18} color="black" />
+                  <div className="text-[13px] font-light text-black">نقش‌ها</div>
+                </div>
+              </Button>
+            </Link>
+          )}
           <Link to={Paths.admin.create}>
             <Button className="w-fit px-6">
               <div className="flex gap-1.5">
                 <AddSquare size={18} color="black" />
-              <div className="text-[13px] font-light">ادمین جدید</div>
+                <div className="text-[13px] font-light">کاربر جدید</div>
               </div>
             </Button>
           </Link>
         </div>
+      </div>
 
       <Table
         columns={[

src/pages/admin/hooks/useAdminData.ts

@@ -1,6 +1,6 @@
 import * as api from "../service/AdminService";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import type { CreateAdminType } from "../types/Types";
+import type { CreateAdminType, UpdateAdminMeType } from "../types/Types";
 
 export const useGetAdmins = (page: number = 1, limit: number = 10) => {
   return useQuery({
@@ -59,3 +59,14 @@ export const useGetAdminMe = () => {
     queryFn: api.getAdminMe,
   });
 };
+
+export const useUpdateAdminMe = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (params: UpdateAdminMeType) => api.updateAdminMe(params),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["adminMe"] });
+    },
+  });
+};

src/pages/admin/service/AdminService.ts

@@ -5,6 +5,7 @@ import type {
   RolesResponseType,
   AdminDetailResponseType,
   AdminMeResponseType,
+  UpdateAdminMeType,
 } from "../types/Types";
 
 export const getAdmins = async (page: number, limit: number = 10) => {
@@ -52,3 +53,8 @@ export const getAdminMe = async () => {
   const { data } = await axios.get<AdminMeResponseType>("/admin/admins/me");
   return data;
 };
+
+export const updateAdminMe = async (params: UpdateAdminMeType) => {
+  const { data } = await axios.patch<AdminMeResponseType>("/admin/admins/me", params);
+  return data;
+};

src/pages/admin/types/Types.ts

@@ -51,8 +51,25 @@ export type RoleItemType = {
 export type RolesResponseType = BaseResponse<RoleItemType[]>;
 export type AdminDetailResponseType = BaseResponse<AdminItemType>;
 
-/** Admin "me" response: admin with full role including permissions */
+/** Admin "me" response: admin with full role including permissions.
-export type AdminMeDataType = Omit<AdminItemType, "role"> & {
+ * Defined as an interface (not Omit) so RowDataType's index signature
+ * does not widen named fields to unknown via mapped types.
+ */
+export interface AdminMeDataType {
+  id: string;
+  createdAt: string;
+  deletedAt: string | null;
+  firstName: string;
+  lastName: string;
+  phone: string;
+  avatarUrl?: string | null;
   role: RoleItemType;
+}
+export type UpdateAdminMeType = {
+  phone: string;
+  firstName: string;
+  lastName: string;
+  avatarUrl?: string;
 };
+
 export type AdminMeResponseType = BaseResponse<AdminMeDataType>;

src/pages/auth/components/LoginStep2.tsx

@@ -11,9 +11,11 @@ import { useLoginWithOtp, useOtpVerify } from '../hooks/useAuthData'
 import { extractErrorMessage, setRefreshToken } from '../../../config/func'
 import { setToken } from '../../../config/func'
 import { toast } from '@/shared/toast'
-import { Paths } from '@/config/Paths'
 import { useSessionAuth } from '@/config/sessionAuth'
 import { appNavigate } from '@/config/navigation'
+import { getDefaultAdminPath } from '@/config/permissions'
+import type { BaseResponse } from '@/shared/types/Types'
+import type { OtpVerifyResponseType } from '../types/AuthTypes'
 
 const LoginStep2: FC = () => {
 
@@ -39,11 +41,12 @@ const LoginStep2: FC = () => {
                 otp: values.otp
             }
             otpVerify.mutate(params, {
-                onSuccess(data) {
+                onSuccess(data: BaseResponse<OtpVerifyResponseType>) {
                     setToken(data?.data?.tokens?.accessToken?.token)
                     setRefreshToken(data?.data?.tokens?.refreshToken?.token)
                     useSessionAuth.getState().setAuthenticated(true)
-                    appNavigate(Paths.home, { replace: true })
+                    const permissions = data?.data?.admin?.permissions ?? []
+                    appNavigate(getDefaultAdminPath(permissions), { replace: true })
                 },
                 onError(error) {
                     toast(extractErrorMessage(error), 'error')

src/pages/auth/store/AuthStore.ts

@@ -1,21 +1,28 @@
 import { create } from "zustand";
 import { type AuthStoreType } from "../../auth/types/AuthTypes";
 
-export const useAuthStore = create<AuthStoreType>((set) => ({
+const initialState = {
   phone: "",
+  email: "",
+  stepLogin: 1,
+  devOtpCode: "",
+};
+
+export const useAuthStore = create<AuthStoreType>((set) => ({
+  ...initialState,
   setPhone(value) {
     set({ phone: value });
   },
-  email: "",
   setEmail(value) {
     set({ email: value });
   },
-  stepLogin: 1,
   setStepLogin(value) {
     set({ stepLogin: value });
   },
-  devOtpCode: "",
   setDevOtpCode(value) {
     set({ devOtpCode: value });
   },
+  reset() {
+    set({ ...initialState });
+  },
 }));

src/pages/auth/types/AuthTypes.ts

@@ -15,6 +15,7 @@ export type AuthStoreType = {
   /** TODO: remove before production — dev-only OTP from API response */
   devOtpCode: string;
   setDevOtpCode: (value: string) => void;
+  reset: () => void;
 };
 
 export type LoginWithPasswordType = {
@@ -32,6 +33,22 @@ export type OtpVerifyType = {
   otp: string;
 };
 
+export type AdminLoginResponseType = {
+  firstName?: string;
+  lastName?: string;
+  phone: string;
+  role: string;
+  permissions: string[];
+};
+
+export type OtpVerifyResponseType = {
+  tokens: {
+    accessToken: { token: string };
+    refreshToken: { token: string };
+  };
+  admin: AdminLoginResponseType;
+};
+
 export type CheckHasAccountType = {
   email: string;
 };

src/pages/chat/components/ChatMessage.tsx

@@ -11,7 +11,7 @@ import { getChatSenderName } from '../type/Types'
 
 type Props = {
     content: string
-    attachments?: ChatAttachmentType[]
+    attachments?: ChatAttachmentType[] | null
     senderName?: string
     senderLabel?: string
     createdAt?: string
@@ -29,7 +29,7 @@ type Props = {
 
 const ChatMessage: FC<Props> = ({
     content,
-    attachments = [],
+    attachments,
     senderName,
     senderLabel = 'پشتیبان',
     createdAt,
@@ -44,8 +44,9 @@ const ChatMessage: FC<Props> = ({
     onDelete,
     isDeleting = false,
 }) => {
-    const fileAttachments = attachments.filter((a) => a.type !== 'voice')
+    const safeAttachments = attachments ?? []
-    const voiceAttachments = attachments.filter((a) => a.type === 'voice')
+    const fileAttachments = safeAttachments.filter((a) => a.type !== 'voice')
+    const voiceAttachments = safeAttachments.filter((a) => a.type === 'voice')
 
     const handleOpenLink = async (key: string) => {
         const url = await getPresignedUrl(key)

src/pages/chat/type/Types.ts

@@ -29,7 +29,7 @@ export type ChatParentMessageType = {
 export type ChatMessageType = {
     admin?: ChatParticipantType | null
     user?: ChatParticipantType | null
-    attachments: ChatAttachmentType[]
+    attachments?: ChatAttachmentType[] | null
     content: string
     createdAt: string
     id: string

src/pages/dashboard/hooks/useDashboardData.ts

@@ -10,3 +10,19 @@ export const useGetDashboardCounts = () => {
     refetchInterval: DASHBOARD_COUNTS_REFETCH_MS,
   });
 };
+
+export const useGetHomeStats = () => {
+  return useQuery({
+    queryKey: ['home-stats'],
+    queryFn: () => api.getHomeStats(),
+    refetchInterval: DASHBOARD_COUNTS_REFETCH_MS,
+  });
+};
+
+export const useGetWeeklyOrders = () => {
+  return useQuery({
+    queryKey: ['weekly-orders'],
+    queryFn: () => api.getWeeklyOrders(),
+    refetchInterval: DASHBOARD_COUNTS_REFETCH_MS,
+  });
+};

src/pages/dashboard/service/DashboardService.ts

@@ -8,7 +8,30 @@ export type DashboardCountsType = {
   paymentsCount: number;
 };
 
+export type HomeStatsType = {
+  requestsCount: number;
+  unconfirmedInvoicesCount: number;
+  inProgressOrdersCount: number;
+  completedOrdersCount: number;
+  customersCount: number;
+};
+
+export type WeeklyOrdersPoint = {
+  weekStart: string;
+  count: number;
+};
+
 export const getDashboardCounts = async (): Promise<BaseResponse<DashboardCountsType>> => {
-  const { data } = await axios.get<BaseResponse<DashboardCountsType>>('/admin/dashboard/counts');
+  const { data } = await axios.get<BaseResponse<DashboardCountsType>>('/admin/menu/counts');
+  return data;
+};
+
+export const getHomeStats = async (): Promise<BaseResponse<HomeStatsType>> => {
+  const { data } = await axios.get<BaseResponse<HomeStatsType>>('/admin/home/stats');
+  return data;
+};
+
+export const getWeeklyOrders = async (): Promise<BaseResponse<WeeklyOrdersPoint[]>> => {
+  const { data } = await axios.get<BaseResponse<WeeklyOrdersPoint[]>>('/admin/home/weekly-orders');
   return data;
 };

src/pages/home/Home.tsx

@@ -1,79 +1,13 @@
 import { type FC } from 'react'
 import Stats from './components/Stats'
-import Services from './components/Services'
+import WeeklyOrdersChart from './components/WeeklyOrdersChart'
-import Orders from './components/Orders'
-import NewOrderImage from '@/assets/images/new_order.png'
-import { t } from '@/locale'
-import Button from '@/components/Button'
-import { AddSquare, MessageQuestion } from 'iconsax-react'
-import { COLORS } from '@/constants/colors'
-import SupportImage from '@/assets/images/support1.png'
 
 const Home: FC = () => {
     return (
-        <div className='flex gap-6'>
+        <>
-            <div className='flex-1'>
             <Stats />
-                <Services />
+            <WeeklyOrdersChart />
-                <Orders />
+        </>
-            </div>
-            <div className='min-w-[267px] mt-5'>
-                <div className='bg-white rounded-3xl p-6'>
-                    <img src={NewOrderImage} className='w-[98px] mx-auto' />
-                    <h4 className='mt-4 text-center font-medium'>
-                        {t('home.submitNewOrder')}
-                    </h4>
-                    <Button
-                        className='mt-2.5'>
-                        <div className='flex gap-1'>
-                            <AddSquare size={20} color='#292D32' />
-                            <div className=''>{t('home.submitNewOrderButton')}</div>
-                        </div>
-                    </Button>
-                </div>
-
-                <div className='mt-7 bg-white rounded-3xl p-6 relative'>
-                    <h4>
-                        {t('home.specialSolution')}
-                    </h4>
-                    <p className='mt-2 text-[#7B7E8B] text-xs'>
-                        {t('home.specialSolutionDescription')}
-                    </p>
-
-                    <div className='mt-2 flex flex-col gap-2'>
-                        <div className='flex gap-2 items-center text-xs'>
-                            <div className='size-1.5 rounded-full bg-primary'></div>
-                            <div>{t('home.specialSolutionFeature1')}</div>
-                        </div>
-                        <div className='flex gap-2 items-center text-xs'>
-                            <div className='size-1.5 rounded-full bg-primary'></div>
-                            <div>{t('home.specialSolutionFeature2')}</div>
-                        </div>
-                        <div className='flex gap-2 items-center text-xs'>
-                            <div className='size-1.5 rounded-full bg-primary'></div>
-                            <div>{t('home.specialSolutionFeature3')}</div>
-                        </div>
-                    </div>
-
-                    <Button
-                        label={t('home.freeConsultation')}
-                        className='mt-12'
-                    />
-
-                    <div className='mt-2.5 bg-primary/11 py-6 px-4 rounded-[13px]'>
-                        <div className='flex justify-between items-center'>
-                            <div className='flex gap-2 items-center'>
-                                <MessageQuestion size={20} color={COLORS.primary} />
-                                <div className='text-xs font-light'>{t('home.contactUs')}</div>
-                            </div>
-                            <div>{t('home.phoneNumber')}</div>
-                        </div>
-                    </div>
-
-                    <img src={SupportImage} className='w-[50px] absolute bottom-[159px] left-2' />
-                </div>
-            </div>
-        </div>
     )
 }
 

src/pages/home/components/StatCard.tsx

@@ -1,33 +1,39 @@
 import { COLORS } from '@/constants/colors'
 import { ArrowLeft } from 'iconsax-react'
 import { type FC, type ReactNode } from 'react'
+import { Link } from 'react-router-dom'
 
 type Props = {
-    icon: ReactNode,
+    icon: ReactNode
-    count: number,
+    count: number | undefined
     description: string
+    to: string
 }
 
-const StatCard: FC<Props> = (props) => {
+const StatCard: FC<Props> = ({ icon, count, description, to }) => {
-    const { icon, count, description } = props
     return (
-        <div className='flex-1 bg-white rounded-3xl p-6'>
+        <Link
-            <div className='flex justify-between items-center'>
+            to={to}
+            className='block flex-1 rounded-3xl bg-white p-6 transition-shadow hover:shadow-md'
+        >
+            <div className='flex items-center justify-between'>
                 {icon}
 
-                <div className='size-8 bg-[#FFF1D7] rounded-full flex justify-center items-center'>
+                <div className='flex size-8 items-center justify-center rounded-full bg-[#FFF1D7]'>
-                    <ArrowLeft size={16} color={COLORS.primary} className='rotate-45' />
+                    <ArrowLeft
+                        size={16}
+                        color={COLORS.primary}
+                        className='rotate-45'
+                    />
                 </div>
             </div>
 
             <div className='mt-2 text-2xl font-semibold'>
-                {count}
+                {count ?? 0}
             </div>
 
-            <div className='mt-2 text-sm'>
+            <div className='mt-2 text-sm'>{description}</div>
-                {description}
+        </Link>
-            </div>
-        </div>
     )
 }
 

src/pages/home/components/Stats.tsx

@@ -1,51 +1,71 @@
 import GridWrapper from '@/components/GridWrapper'
+import { Paths } from '@/config/Paths'
 import { COLORS } from '@/constants/colors'
+import { useGetHomeStats } from '@/pages/dashboard/hooks/useDashboardData'
+import { ProformaInvoiceStatusEnum } from '@/pages/invoice/enum/InvoiceEnum'
+import { TabOrderListEnum } from '@/pages/order/enum/OrderEnum'
 import { t } from '@/locale'
-import { BoxTick, BoxTime, ReceiptText, TruckTick } from 'iconsax-react'
+import { BoxTick, BoxTime, People, ReceiptText, TruckTick } from 'iconsax-react'
 import { type FC } from 'react'
 import StatCard from './StatCard'
 
 const Stats: FC = () => {
+    const { data } = useGetHomeStats()
+    const stats = data?.data
+
     return (
         <GridWrapper
-            desktop={4}
+            desktop={5}
             mobile={2}
             gapDesktop={24}
             gapMobile={12}
             className='mt-5'
         >
             <StatCard
-                count={2}
+                count={stats?.requestsCount}
                 description={t('home.requestCount')}
+                to={Paths.requests.list}
                 icon={<BoxTime
                     size={27}
                     color={COLORS.primary}
                 />}
             />
             <StatCard
-                count={2}
+                count={stats?.unconfirmedInvoicesCount}
                 description={t('home.factureCount')}
+                to={`${Paths.perfomaInvoice.list}?tab=${ProformaInvoiceStatusEnum.PENDING}`}
                 icon={<ReceiptText
                     size={27}
                     color={COLORS.primary}
                 />}
             />
             <StatCard
-                count={10}
+                count={stats?.inProgressOrdersCount}
                 description={t('home.orderCount')}
+                to={`${Paths.order.list}?tab=${TabOrderListEnum.IN_PROGRESS}`}
                 icon={<BoxTick
                     size={27}
                     color={COLORS.primary}
                 />}
             />
             <StatCard
-                count={20}
+                count={stats?.completedOrdersCount}
                 description={t('home.orderDoneCount')}
+                to={`${Paths.order.list}?tab=${TabOrderListEnum.FINISHED}`}
                 icon={<TruckTick
                     size={27}
                     color={COLORS.primary}
                 />}
             />
+            <StatCard
+                count={stats?.customersCount}
+                description={t('home.customerCount')}
+                to={Paths.users.list}
+                icon={<People
+                    size={27}
+                    color={COLORS.primary}
+                />}
+            />
         </GridWrapper>
     )
 }

src/pages/home/components/WeeklyOrdersChart.tsx

@@ -0,0 +1,76 @@
+import { COLORS } from '@/constants/colors'
+import { useGetWeeklyOrders } from '@/pages/dashboard/hooks/useDashboardData'
+import { t } from '@/locale'
+import moment from 'moment-jalaali'
+import { type FC, useMemo } from 'react'
+import {
+    Bar,
+    BarChart,
+    CartesianGrid,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis,
+} from 'recharts'
+
+const WeeklyOrdersChart: FC = () => {
+    const { data, isLoading } = useGetWeeklyOrders()
+
+    const chartData = useMemo(() => {
+        const points = data?.data ?? []
+        return [...points].reverse().map((point) => ({
+            week: moment(point.weekStart).format('jD jMMMM'),
+            count: point.count,
+        }))
+    }, [data?.data])
+
+    return (
+        <div className='mt-6 bg-white p-6 rounded-3xl'>
+            <h4 className='text-lg font-light mb-6'>
+                {t('home.weeklyOrders')}
+            </h4>
+
+            {isLoading ? (
+                <div className='h-64 bg-gray-100 animate-pulse rounded-2xl' />
+            ) : (
+                <div className='h-64' dir='ltr'>
+                    <ResponsiveContainer width='100%' height='100%'>
+                        <BarChart data={chartData} margin={{ top: 8, right: 8, left: -16, bottom: 0 }}>
+                            <CartesianGrid strokeDasharray='3 3' vertical={false} stroke='#f0f0f0' />
+                            <XAxis
+                                dataKey='week'
+                                tick={{ fontSize: 12, fill: COLORS.grayLight }}
+                                axisLine={false}
+                                tickLine={false}
+                            />
+                            <YAxis
+                                allowDecimals={false}
+                                tick={{ fontSize: 12, fill: COLORS.grayLight }}
+                                axisLine={false}
+                                tickLine={false}
+                            />
+                            <Tooltip
+                                formatter={(value) => [value, t('home.orders')]}
+                                labelFormatter={(label) => `${t('home.week')}: ${label}`}
+                                contentStyle={{
+                                    borderRadius: 12,
+                                    border: 'none',
+                                    boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
+                                    direction: 'rtl',
+                                }}
+                            />
+                            <Bar
+                                dataKey='count'
+                                fill={COLORS.primary}
+                                radius={[8, 8, 0, 0]}
+                                maxBarSize={48}
+                            />
+                        </BarChart>
+                    </ResponsiveContainer>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default WeeklyOrdersChart

src/pages/invoice/DetailPerfomaInvoice.tsx

@@ -1,14 +1,17 @@
-import { type FC, type ReactNode } from 'react';
+import { type FC, type ReactNode, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import moment from 'moment-jalaali';
-import { Calendar, Edit, Profile2User, ReceiptText, WalletMoney } from 'iconsax-react';
+import { Archive, Calendar, Edit, Profile2User, ReceiptText, WalletMoney } from 'iconsax-react';
 import { Paths } from '@/config/Paths';
 import BackButton from '@/components/BackButton';
 import RefreshButton from '@/components/RefreshButton';
-import { useGetInvoiceDetail } from './hooks/useInvoiceData';
+import ModalConfrim from '@/components/ModalConfrim';
+import { useArchiveInvoice, useGetInvoiceDetail } from './hooks/useInvoiceData';
 import InvoicePaymentsSection from './components/InvoicePaymentsSection';
 import { formatItemDiscountDisplay } from './utils/invoiceItem';
 import type { InvoiceItemType } from './types/Types';
+import { toast } from 'react-toastify';
+import { extractErrorMessage } from '@/config/func';
 
 const formatAmount = (amount: number) =>
   Number(amount).toLocaleString('fa-IR') + ' ریال';
@@ -110,9 +113,26 @@ const InvoiceItemTableRow: FC<{ item: InvoiceItemType }> = ({ item }) => {
 
 const DetailPerfomaInvoice: FC = () => {
   const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [isArchiveConfirmOpen, setIsArchiveConfirmOpen] = useState(false);
   const { data: invoiceData, isLoading, refetch, isFetching, isError } = useGetInvoiceDetail(id);
+  const { mutate: archiveInvoice, isPending: isArchiving } = useArchiveInvoice();
   const invoice = invoiceData?.data;
 
+  const handleArchive = () => {
+    if (!id) return;
+    archiveInvoice(id, {
+      onSuccess: () => {
+        setIsArchiveConfirmOpen(false);
+        toast.success('پیش‌فاکتور با موفقیت آرشیو شد');
+        navigate(Paths.perfomaInvoice.list);
+      },
+      onError: (error) => {
+        toast.error(extractErrorMessage(error));
+      },
+    });
+  };
+
   if (isLoading) {
     return (
       <div className="mt-5 flex min-h-[200px] items-center justify-center">
@@ -154,6 +174,16 @@ const DetailPerfomaInvoice: FC = () => {
 
         <div className="flex items-center gap-3">
           <RefreshButton onClick={() => refetch()} isLoading={isFetching} />
+          {invoice.status !== 'archived' && (
+            <>
+              <button
+                type="button"
+                onClick={() => setIsArchiveConfirmOpen(true)}
+                className="flex items-center gap-2 rounded-xl border border-border px-5 py-2.5 text-sm font-medium text-[#4B5563] transition-colors hover:bg-gray-50"
+              >
+                <Archive size={18} color="#4B5563" />
+                آرشیو
+              </button>
               <Link to={Paths.perfomaInvoice.update + invoice.id}>
                 <button
                   type="button"
@@ -163,9 +193,25 @@ const DetailPerfomaInvoice: FC = () => {
                   ویرایش
                 </button>
               </Link>
+            </>
+          )}
+          {invoice.status === 'archived' && (
+            <span className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1.5 text-xs text-gray-700">
+              آرشیو شده
+            </span>
+          )}
         </div>
       </div>
 
+      <ModalConfrim
+        isOpen={isArchiveConfirmOpen}
+        close={() => setIsArchiveConfirmOpen(false)}
+        onConfrim={handleArchive}
+        isloading={isArchiving}
+        title_header="آرشیو پیش‌فاکتور"
+        label="آیا از آرشیو کردن این پیش‌فاکتور مطمئن هستید؟"
+      />
+
       <div className="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
         <div className="rounded-3xl border border-border/70 bg-white p-6 shadow-sm">
           <div className="font-medium text-[#111827]">اطلاعات پیش فاکتور</div>

src/pages/invoice/ProformaInvoice.tsx

@@ -1,96 +1,191 @@
-import Tabs from '@/components/Tabs'
+import Tabs from "@/components/Tabs";
-import { useMemo, useState, type FC } from 'react'
+import { useCallback, useMemo, useState, type FC } from "react";
-import { ProformaInvoiceStatusEnum } from './enum/InvoiceEnum'
+import {
-import Filters from '@/components/Filters'
+  invoiceListTabs,
-import RefreshButton from '@/components/RefreshButton'
+  invoiceListTabStatuses,
-import Table from '@/components/Table'
+  ProformaInvoiceStatusEnum,
-import { Eye, Add, Edit2 } from 'iconsax-react'
+} from "./enum/InvoiceEnum";
-import { Link } from 'react-router-dom'
+import Filters from "@/components/Filters";
-import { Paths } from '@/config/Paths'
+import type { FilterValues } from "@/components/Filters";
-import moment from 'moment-jalaali'
+import RefreshButton from "@/components/RefreshButton";
-import type { FilterValues } from '@/components/Filters'
+import Table from "@/components/Table";
-import { useGetInvoice } from './hooks/useInvoiceData'
+import { Eye, Add, Edit2, ArrowDown2, Filter } from "iconsax-react";
-import type { InvoiceType } from './types/Types'
+import { Link, useSearchParams } from "react-router-dom";
+import { Paths } from "@/config/Paths";
+import moment from "moment-jalaali";
+import { useArchiveInvoice, useGetInvoice, useGetInvoiceTabCounts } from "./hooks/useInvoiceData";
+import type { InvoiceType } from "./types/Types";
+import ArchiveWithConfirm from "@/components/ArchiveWithConfirm";
+import { toast } from "react-toastify";
+import { extractErrorMessage } from "@/config/func";
+import { clx } from "@/helpers/utils";
+
+const INVOICE_TABS = invoiceListTabs.map((tab) => tab.value);
+
+const INVOICE_LIST_FILTER_FIELDS = [
+  {
+    name: "search",
+    type: "input" as const,
+    placeholder: "جستجو (شماره سفارش / مشتری)",
+  },
+  {
+    name: "from",
+    type: "date" as const,
+    placeholder: "از تاریخ",
+  },
+  {
+    name: "to",
+    type: "date" as const,
+    placeholder: "تا تاریخ",
+  },
+];
+
+const isValidInvoiceTab = (
+  value: string | null,
+): value is ProformaInvoiceStatusEnum =>
+  value !== null && INVOICE_TABS.includes(value as ProformaInvoiceStatusEnum);
+
+const countActiveFilters = (filters: FilterValues) =>
+  [filters.search, filters.from, filters.to].filter(Boolean).length;
 
 const ProformaInvoice: FC = () => {
-    const [activeTab, setActiveTab] = useState<ProformaInvoiceStatusEnum>(ProformaInvoiceStatusEnum.ALL)
+  const [searchParams, setSearchParams] = useSearchParams();
-    const [page, setPage] = useState(1)
+  const tabParam = searchParams.get("tab");
-    const [filters, setFilters] = useState<FilterValues>({})
+  const activeTab = isValidInvoiceTab(tabParam)
+    ? tabParam
+    : ProformaInvoiceStatusEnum.PENDING;
+  const [page, setPage] = useState(1);
+  const [filters, setFilters] = useState<FilterValues>({});
+  const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
+  const [filtersKey, setFiltersKey] = useState(0);
 
-    const { data, isLoading, refetch, isFetching } = useGetInvoice(page)
+  const statuses = invoiceListTabStatuses[activeTab];
+  const activeFilterCount = useMemo(
+    () => countActiveFilters(filters),
+    [filters],
+  );
+  const hasActiveFilters = activeFilterCount > 0;
 
-    const meta = data?.meta
+  const setActiveTab = (tab: ProformaInvoiceStatusEnum) => {
+    setPage(1);
+    setSearchParams(
+      (current) => {
+        const next = new URLSearchParams(current);
+        next.set("tab", tab);
+        return next;
+      },
+      { replace: true },
+    );
+  };
 
-    const filteredData = useMemo(() => {
+  const handleFiltersChange = useCallback((next: FilterValues) => {
-        const list = data?.data ?? []
+    setPage(1);
+    setFilters(next);
+  }, []);
 
-        if (activeTab === ProformaInvoiceStatusEnum.CONFIRMED) {
+  const clearFilters = useCallback(() => {
-            return list.filter((o) => o.confirmStatus === 'confirmed')
+    setPage(1);
-        }
+    setFilters({ search: null, from: null, to: null });
-        if (activeTab === ProformaInvoiceStatusEnum.PARTIALLY_CONFIRMED) {
+    setFiltersKey((key) => key + 1);
-            return list.filter((o) => o.confirmStatus === 'partially_confirmed')
+  }, []);
-        }
-        if (activeTab === ProformaInvoiceStatusEnum.NOT_CONFIRMED) {
-            return list.filter((o) => o.confirmStatus === 'pending')
-        }
 
-        let result = list
+  const { data, isLoading, refetch, isFetching } = useGetInvoice({
+    page,
+    statuses,
+    search: filters.search?.trim() || null,
+    from: filters.from || null,
+    to: filters.to || null,
+  });
+  const { data: tabCounts } = useGetInvoiceTabCounts({
+    search: filters.search?.trim() || null,
+    from: filters.from || null,
+    to: filters.to || null,
+  });
+  const { mutate: archiveInvoice, isPending: isArchiving } =
+    useArchiveInvoice();
 
-        const search = (filters.search ?? '').trim()
+  const tabCountByTab: Record<ProformaInvoiceStatusEnum, number> = useMemo(
-        if (search) {
+    () => ({
-            const lower = search.toLowerCase()
+      [ProformaInvoiceStatusEnum.PENDING]: tabCounts?.pending ?? 0,
-            result = result.filter(
+      [ProformaInvoiceStatusEnum.CONFIRMED]: tabCounts?.confirmed ?? 0,
-                (o) =>
+      [ProformaInvoiceStatusEnum.ARCHIVED]: tabCounts?.archived ?? 0,
-                    String(o.invoiceNumber).includes(search) ||
+    }),
-                    o.user?.firstName?.toLowerCase().includes(lower) ||
+    [tabCounts],
-                    o.user?.lastName?.toLowerCase().includes(lower) ||
+  );
-                    o.user?.phone?.includes(search)
+  const tabsWithCount = useMemo(
-            )
+    () =>
-        }
+      invoiceListTabs.map((tab) => {
+        const total = tabCountByTab[tab.value] ?? 0;
+        return {
+          ...tab,
+          label: total > 0 ? `${tab.label} (${total.toLocaleString("fa-IR")})` : tab.label,
+        };
+      }),
+    [tabCountByTab],
+  );
 
-        const dateFilter = filters.date
+  const meta = data?.meta;
-        if (dateFilter) {
-            const filterDate = moment(dateFilter, 'jYYYY/jMM/jDD').format('YYYY-MM-DD')
-            result = result.filter((o) => {
-                const d = o.createdAt
-                return d && moment(d).format('YYYY-MM-DD') === filterDate
-            })
-        }
 
-        return result
+  const handleArchive = useCallback(
-    }, [data?.data, activeTab, filters.search, filters.date])
+    (id: string) => {
-
+      archiveInvoice(id, {
-    const getPaymentStatus = (item: InvoiceType) => {
+        onSuccess: () => {
-        const total = Number(item.total) || 0
+          refetch();
-        const paid = Number(item.paidAmount) || 0
+          toast.success("پیش‌فاکتور با موفقیت آرشیو شد");
-        if (total <= 0) return '-'
+        },
-        if (paid >= total) return 'پرداخت شده'
+        onError: (error) => {
-        if (paid > 0) return 'پرداخت جزئی'
+          toast.error(extractErrorMessage(error));
-        return 'پرداخت نشده'
+        },
-    }
+      });
+    },
+    [archiveInvoice, refetch],
+  );
 
   const getServiceLabel = (item: InvoiceType) => {
-        if (!item.items?.length) return '-'
+    if (!item.items?.length) return "-";
-        if (item.items.length === 1) return item.items[0].product?.title ?? '-'
+    if (item.items.length === 1) return item.items[0].product?.title ?? "-";
     return (
-            <div className='flex flex-col gap-0.5'>
+      <div className="flex flex-col gap-0.5">
         {item.items.map((line) => (
           <span key={line.id}>
-                        {line.product?.title ?? '-'} ({line.quantity.toLocaleString('fa-IR')})
+            {line.product?.title ?? "-"} ×{" "}
+            {line.quantity.toLocaleString("fa-IR")}
           </span>
         ))}
       </div>
-        )
+    );
-    }
+  };
+
+  const getCustomerLabel = (item: InvoiceType) => {
+    const fullName =
+      item.user?.firstName || item.user?.lastName
+        ? [item.user.firstName, item.user.lastName].filter(Boolean).join(" ")
+        : null;
+    const phone = item.user?.phone;
+
+    if (!fullName && !phone) return "-";
 
     return (
-        <div className='mt-5'>
+      <div className="flex flex-col gap-0.5">
-            <div className='flex justify-between items-center'>
+        {fullName && <span>{fullName}</span>}
-                <h1 className='text-lg font-light'>پیش فاکتورها</h1>
+        {phone && <span className="text-xs text-[#8C90A3]">{phone}</span>}
-                <div className='flex items-center gap-3'>
+      </div>
+    );
+  };
+
+  const formatAmount = (value: number | null | undefined) =>
+    value != null ? Number(value).toLocaleString("fa-IR") + " ریال" : "-";
+
+  return (
+    <div className="mt-5 space-y-6">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h1 className="text-lg font-light">پیش فاکتورها</h1>
+        </div>
+        <div className="flex items-center gap-3">
           <RefreshButton onClick={() => refetch()} isLoading={isFetching} />
           <Link to={Paths.perfomaInvoice.create}>
-                        <button className='flex items-center gap-2 px-4 py-2 bg-primary text-black text-sm font-medium rounded-xl hover:opacity-90 transition-opacity'>
+            <button className="flex items-center gap-2 px-4 py-2 bg-primary text-black text-sm font-medium rounded-xl hover:opacity-90 transition-opacity">
               <Add size={18} />
               پیش فاکتور جدید
             </button>
@@ -98,117 +193,175 @@ const ProformaInvoice: FC = () => {
         </div>
       </div>
 
-            <div className='mt-8'>
       <Tabs
-                    items={[
+        items={tabsWithCount}
-                        { label: 'همه', value: ProformaInvoiceStatusEnum.ALL },
-                        { label: 'تایید نشده', value: ProformaInvoiceStatusEnum.NOT_CONFIRMED },
-                        { label: 'تایید جزئی', value: ProformaInvoiceStatusEnum.PARTIALLY_CONFIRMED },
-                        { label: 'تایید شده', value: ProformaInvoiceStatusEnum.CONFIRMED },
-                    ]}
         activeTab={activeTab}
         onTabChange={(tab) => setActiveTab(tab as ProformaInvoiceStatusEnum)}
       />
+
+      <div className="overflow-hidden rounded-3xl bg-white">
+        <div className="flex items-center justify-between gap-3 p-5 md:px-6">
+          <button
+            type="button"
+            onClick={() => setIsFiltersExpanded((prev) => !prev)}
+            className="flex flex-1 items-center gap-2 text-right"
+          >
+            <Filter size={18} color="#8C90A3" />
+            <span className="text-sm font-medium text-gray-700">فیلترها</span>
+            {hasActiveFilters && (
+              <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-medium text-black">
+                {activeFilterCount.toLocaleString("fa-IR")}
+              </span>
+            )}
+            <ArrowDown2
+              size={18}
+              color="#8C90A3"
+              className={clx(
+                "mr-auto transition-transform duration-200",
+                isFiltersExpanded && "rotate-180",
+              )}
+            />
+          </button>
+
+          {hasActiveFilters && (
+            <button
+              type="button"
+              onClick={clearFilters}
+              className="shrink-0 text-xs text-[#0037FF] hover:underline"
+            >
+              پاک کردن فیلترها
+            </button>
+          )}
         </div>
 
-            <div className='mt-8'>
+        {isFiltersExpanded && (
+          <div className="space-y-5 border-t border-gray-100 px-5 pb-5 pt-4 md:px-6 md:pb-6">
             <Filters
-                    fields={[
+              key={filtersKey}
-                        {
+              fields={INVOICE_LIST_FILTER_FIELDS}
-                            type: 'input',
+              initialValues={filters}
-                            name: 'search',
+              onChange={handleFiltersChange}
-                            placeholder: 'جستجو (شماره سفارش / مشتری)',
+              className="w-full"
-                        },
+              fieldClassName="grid w-full grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3"
-                        {
-                            type: 'date',
-                            name: 'date',
-                            placeholder: 'تاریخ',
-                        },
-                    ]}
-                    onChange={setFilters}
             />
           </div>
+        )}
+      </div>
 
-            <div className='mt-8'>
       <Table
         columns={[
           {
-                            key: 'invoiceNumber',
+            key: "invoiceNumber",
-                            title: 'شماره',
+            title: "شماره",
             render: (item) => item.invoiceNumber,
           },
           {
-                            key: 'service',
+            key: "customer",
-                            title: 'خدمت',
+            title: "مشتری",
-                            className: '!whitespace-normal',
+            className: "!whitespace-normal",
+            render: (item) => getCustomerLabel(item),
+          },
+          {
+            key: "service",
+            title: "آیتم ها",
+            className: "!whitespace-normal",
             render: (item) => getServiceLabel(item),
           },
           {
-                            key: 'issueDate',
+            key: "issueDate",
-                            title: 'تاریخ صدور',
+            title: "تاریخ صدور",
             render: (item) =>
               item.createdAt
-                                    ? moment(item.createdAt).format('jYYYY/jMM/jDD')
+                ? moment(item.createdAt).format("jYYYY/jMM/jDD")
-                                    : '-',
+                : "-",
           },
           {
-                            key: 'lastConfirmDate',
+            key: "lastConfirmDate",
-                            title: 'آخرین مهلت تایید',
+            title: "آخرین مهلت تایید",
             render: (item) =>
               item.approvalDeadline
-                                    ? moment(item.approvalDeadline).format('jYYYY/jMM/jDD')
+                ? moment(item.approvalDeadline).format("jYYYY/jMM/jDD")
-                                    : '-',
+                : "-",
           },
           {
-                            key: 'total',
+            key: "total",
-                            title: 'مجموع',
+            title: "مالی",
-                            render: (item) =>
+            className: "!whitespace-normal",
-                                item.total
+            render: (item) => (
-                                    ? Number(item.total).toLocaleString('fa-IR') + ' ریال'
+              <table className="w-full">
-                                    : '-',
+                <tr>
+                  <td className="text-xs text-[#8C90A3]">مجموع : </td>
+                  <td className="text-left">{formatAmount(item.total)}</td>
+                </tr>
+                <tr>
+                  <td className="text-xs text-[#8C90A3]">پرداخت : </td>
+                  <td className="text-left">{formatAmount(item.paidAmount)}</td>
+                </tr>
+                <tr>
+                  <td className="text-xs text-[#8C90A3]">مانده: </td>
+                  <td className="text-left">{formatAmount(item.balance)}</td>
+                </tr>
+              </table>
+            ),
           },
           {
-                            key: 'confirmStatus',
+            key: "status",
-                            title: 'وضعیت تایید',
+            title: "وضعیت",
             render: (item) => {
               const statusMap = {
-                                    confirmed: { className: 'bg-green-100 text-green-800', text: 'تایید شده' },
+                confirmed: {
-                                    partially_confirmed: { className: 'bg-blue-100 text-blue-800', text: 'تایید جزئی' },
+                  className: "bg-green-100 text-green-800",
-                                    pending: { className: 'bg-amber-100 text-amber-800', text: 'تایید نشده' },
+                  text: "تایید شده",
-                                }
+                },
-                                const status = statusMap[item.confirmStatus] ?? statusMap.pending
+                partially_confirmed: {
+                  className: "bg-blue-100 text-blue-800",
+                  text: "تایید جزئی",
+                },
+                pending: {
+                  className: "bg-amber-100 text-amber-800",
+                  text: "در انتظار تایید",
+                },
+                archived: {
+                  className: "bg-gray-100 text-gray-700",
+                  text: "آرشیو شده",
+                },
+              };
+              const status = statusMap[item.status] ?? statusMap.pending;
               return (
                 <span
                   className={`inline-flex h-6 items-center rounded-full px-2.5 text-xs ${status.className}`}
                 >
                   {status.text}
                 </span>
-                                )
+              );
             },
           },
           {
-                            key: 'paymentStatus',
+            key: "actions",
-                            title: 'وضعیت پرداخت',
+            title: "",
-                            render: (item) => getPaymentStatus(item),
-                        },
-                        {
-                            key: 'actions',
-                            title: '',
             render: (item) => (
-                                <div className='flex gap-2 items-center'>
+              <div className="flex gap-2 items-center">
                 <Link to={Paths.perfomaInvoice.detail + item.id}>
-                                        <Eye size={20} color='#8C90A3' />
+                  <Eye size={20} color="#8C90A3" />
                 </Link>
+                {item.status !== "archived" && (
+                  <>
                     <Link to={Paths.perfomaInvoice.update + item.id}>
-                                        <Edit2 size={20} color='#0037FF' />
+                      <Edit2 size={20} color="#0037FF" />
                     </Link>
+                    <ArchiveWithConfirm
+                      onArchive={() => handleArchive(item.id)}
+                      isloading={isArchiving}
+                    />
+                  </>
+                )}
               </div>
             ),
           },
         ]}
-                    data={filteredData}
+        data={data?.data}
         isLoading={isLoading}
-                    noDataMessage='پیش فاکتوری یافت نشد.'
+        noDataMessage="پیش فاکتوری یافت نشد."
         pagination={
           meta && meta.totalPages > 1
             ? {
@@ -220,8 +373,7 @@ const ProformaInvoice: FC = () => {
         }
       />
     </div>
-        </div>
+  );
-    )
+};
-}
 
-export default ProformaInvoice
+export default ProformaInvoice;

src/pages/invoice/enum/InvoiceEnum.tsx

@@ -1,6 +1,26 @@
 export const enum ProformaInvoiceStatusEnum {
-    ALL = 'all',
+    PENDING = 'pending',
-    NOT_CONFIRMED = 'not_confirmed',
-    PARTIALLY_CONFIRMED = 'partially_confirmed',
     CONFIRMED = 'confirmed',
+    ARCHIVED = 'archived',
 }
+
+export type InvoiceConfirmStatus =
+    | 'pending'
+    | 'partially_confirmed'
+    | 'confirmed'
+    | 'archived'
+
+export const invoiceListTabStatuses: Record<
+    ProformaInvoiceStatusEnum,
+    InvoiceConfirmStatus[]
+> = {
+    [ProformaInvoiceStatusEnum.PENDING]: ['pending'],
+    [ProformaInvoiceStatusEnum.CONFIRMED]: ['partially_confirmed', 'confirmed'],
+    [ProformaInvoiceStatusEnum.ARCHIVED]: ['archived'],
+}
+
+export const invoiceListTabs = [
+    { label: 'در انتظار تایید', value: ProformaInvoiceStatusEnum.PENDING },
+    { label: 'تایید شده', value: ProformaInvoiceStatusEnum.CONFIRMED },
+    { label: 'آرشیو شده', value: ProformaInvoiceStatusEnum.ARCHIVED },
+] as const

src/pages/invoice/hooks/useInvoiceData.ts

@@ -9,14 +9,32 @@ export const useCreateInvoice = () => {
     mutationFn: api.createInvoice,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["invoice"] });
+      queryClient.invalidateQueries({ queryKey: ["invoice-tab-counts"] });
     },
   });
 };
 
-export const useGetInvoice = (page = 1) => {
+export const useGetInvoice = (params: api.GetInvoicesParams) => {
   return useQuery({
-    queryKey: ["invoice", page],
+    queryKey: [
-    queryFn: () => api.getInvoice(page),
+      "invoice",
+      params.page,
+      params.statuses?.join(",") ?? "",
+      params.search ?? "",
+      params.from ?? "",
+      params.to ?? "",
+    ],
+    queryFn: () => api.getInvoice(params),
+  });
+};
+
+export const useGetInvoiceTabCounts = (
+  params?: api.GetInvoiceTabCountsParams,
+) => {
+  return useQuery({
+    queryKey: ["invoice-tab-counts", params],
+    queryFn: () => api.getInvoiceTabCounts(params),
+    refetchInterval: 20_000,
   });
 };
 
@@ -49,6 +67,19 @@ export const useUpdateInvoice = () => {
     }) => api.updateInvoice(id, params),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["invoice"] });
+      queryClient.invalidateQueries({ queryKey: ["invoice-tab-counts"] });
+    },
+  });
+};
+
+export const useArchiveInvoice = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string) => api.archiveInvoice(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invoice"] });
+      queryClient.invalidateQueries({ queryKey: ["invoice-tab-counts"] });
     },
   });
 };

src/pages/invoice/service/InvoiceService.ts

@@ -6,19 +6,63 @@ import type {
   InvoiceType,
   UpdatePreInvoiceType,
 } from "../types/Types";
+import type { InvoiceConfirmStatus } from "../enum/InvoiceEnum";
+import type { BaseResponse } from "@/shared/types/Types";
+
+export type GetInvoicesParams = {
+  page?: number;
+  statuses?: InvoiceConfirmStatus[];
+  search?: string | null;
+  from?: string | null;
+  to?: string | null;
+};
+
+export type GetInvoiceTabCountsParams = Omit<GetInvoicesParams, "page" | "statuses">;
+
+export type InvoiceTabCountsResponseType = {
+  pending: number;
+  confirmed: number;
+  archived: number;
+};
 
 export const createInvoice = async (params: CreatePreInvoiceType) => {
   const { data } = await axios.post("/admin/invoice", params);
   return data;
 };
 
-export const getInvoice = async (page = 1): Promise<GetInvoiceResponseType> => {
+export const getInvoice = async (
+  params: GetInvoicesParams = {},
+): Promise<GetInvoiceResponseType> => {
+  const { page = 1, statuses, search, from, to } = params;
   const { data } = await axios.get<GetInvoiceResponseType>("/admin/invoice", {
-    params: { page },
+    params: {
+      page,
+      ...(statuses?.length ? { statuses: statuses.join(",") } : {}),
+      ...(search ? { search } : {}),
+      ...(from ? { from } : {}),
+      ...(to ? { to } : {}),
+    },
   });
   return data;
 };
 
+export const getInvoiceTabCounts = async (
+  params: GetInvoiceTabCountsParams = {},
+): Promise<InvoiceTabCountsResponseType> => {
+  const { search, from, to } = params;
+  const { data } = await axios.get<BaseResponse<InvoiceTabCountsResponseType>>(
+    "/admin/invoice/tab-counts",
+    {
+      params: {
+        ...(search ? { search } : {}),
+        ...(from ? { from } : {}),
+        ...(to ? { to } : {}),
+      },
+    },
+  );
+  return data.data;
+};
+
 export const getInvoiceById = async (id: string) => {
   const { data } = await axios.get<{ data: InvoiceType }>(`/admin/invoice/${id}`);
   return data;
@@ -35,3 +79,8 @@ export const updateInvoice = async (id: string, params: UpdatePreInvoiceType) =>
   const { data } = await axios.patch(`/admin/invoice/${id}`, params);
   return data;
 };
+
+export const archiveInvoice = async (id: string) => {
+  const { data } = await axios.patch(`/admin/invoice/${id}/archive`);
+  return data;
+};

src/pages/invoice/types/Types.ts

@@ -104,7 +104,7 @@ export type InvoiceType = {
   total: number;
   paidAmount: number;
   balance: number;
-  confirmStatus: 'pending' | 'partially_confirmed' | 'confirmed';
+  status: 'pending' | 'partially_confirmed' | 'confirmed' | 'archived';
   enableTax: boolean;
   approvalDeadline: string;
   attachments: InvoiceAttachmentType[];

src/pages/order/Print.tsx

@@ -1,8 +1,9 @@
 import { useState, type FC } from 'react'
 import { useParams } from 'react-router-dom'
 import { useFormik } from 'formik'
+import * as Yup from 'yup'
 import { useGetSections } from '../print/hooks/usePrintData'
-import { useGetOrderPrint, useSubmitOrderPrint } from './hooks/useOrderData'
+import { useGetOrderDetails, useGetOrderPrint, useSubmitOrderPrint } from './hooks/useOrderData'
 import type { OrderPrintFormType } from './types/Types'
 import PrintSectionCard from './components/PrintSectionCard'
 import PrintSectionNav from './components/PrintSectionNav'
@@ -10,6 +11,7 @@ import { ORDER_PRINT_STORAGE_KEY } from './PrintPreview'
 import Button from '@/components/Button'
 import BackButton from '@/components/BackButton'
 import RefreshButton from '@/components/RefreshButton'
+import Input from '@/components/Input'
 import { TickSquare } from 'iconsax-react'
 import { toast } from '@/shared/toast'
 import { extractErrorMessage } from '@/config/func'
@@ -19,6 +21,7 @@ const OrderPrint: FC = () => {
     const { id: orderId } = useParams()
     const { data, refetch: refetchSections, isFetching: isSectionsFetching } = useGetSections()
     const { isPending, mutate } = useSubmitOrderPrint()
+    const { data: order, refetch: refetchOrder, isFetching: isOrderFetching } = useGetOrderDetails(orderId!)
     const { data: print, refetch: refetchPrint, isFetching: isPrintFetching } = useGetOrderPrint(orderId!)
 
     const sections = data?.data ?? []
@@ -27,9 +30,13 @@ const OrderPrint: FC = () => {
 
     const formik = useFormik<OrderPrintFormType>({
         initialValues: {
+            title: print?.data?.title || order?.data?.title || '',
             fields: print?.data?.fileds ?? []
         },
         enableReinitialize: true,
+        validationSchema: Yup.object({
+            title: Yup.string().required('این فیلد اجباری می باشد.')
+        }),
         onSubmit: (values) => {
             if (!orderId) return
             mutate(
@@ -87,7 +94,7 @@ const OrderPrint: FC = () => {
 
         sessionStorage.setItem(
             ORDER_PRINT_STORAGE_KEY(orderId),
-            JSON.stringify({ fields: formik.values.fields })
+            JSON.stringify({ title: formik.values.title, fields: formik.values.fields })
         )
 
         const sectionIds = Array.from(selectedSections).join(',')
@@ -96,10 +103,11 @@ const OrderPrint: FC = () => {
 
     const handleRefresh = () => {
         refetchSections()
+        refetchOrder()
         refetchPrint()
     }
 
-    const isRefreshing = isSectionsFetching || isPrintFetching
+    const isRefreshing = isSectionsFetching || isOrderFetching || isPrintFetching
 
     return (
         <div className="mt-5">
@@ -125,6 +133,13 @@ const OrderPrint: FC = () => {
 
             <div className="flex gap-6 mt-6 items-start">
                 <div className="flex-1 flex flex-col gap-5 min-w-0">
+                    <div className="bg-white p-6 rounded-3xl">
+                        <Input
+                            {...formik.getFieldProps('title')}
+                            label="عنوان"
+                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                        />
+                    </div>
                     {sections.map((section) => (
                         <PrintSectionCard
                             key={section.id}

src/pages/order/PrintPreview.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, type FC } from 'react'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { useGetSections } from '@/pages/print/hooks/usePrintData'
-import { useGetOrderPrint } from './hooks/useOrderData'
+import { useGetOrderDetails, useGetOrderPrint } from './hooks/useOrderData'
 import PrintFieldDisplay from './components/PrintFieldDisplay'
 import Button from '@/components/Button'
 import { Printer } from 'iconsax-react'
@@ -12,6 +12,7 @@ const OrderPrintPreview: FC = () => {
     const { id: orderId } = useParams()
     const [searchParams] = useSearchParams()
     const { data: sectionsData } = useGetSections()
+    const { data: orderData } = useGetOrderDetails(orderId!)
     const { data: printData } = useGetOrderPrint(orderId!)
 
     const selectedSectionIds = useMemo(() => {
@@ -19,18 +20,24 @@ const OrderPrintPreview: FC = () => {
         return param ? param.split(',').filter(Boolean) : []
     }, [searchParams])
 
-    const fieldValues = useMemo(() => {
+    const draft = useMemo(() => {
         const stored = sessionStorage.getItem(ORDER_PRINT_STORAGE_KEY(orderId!))
         if (stored) {
             try {
-                const parsed = JSON.parse(stored) as { fields: { fieldId: string; value: string }[] }
+                return JSON.parse(stored) as {
-                return parsed.fields ?? []
+                    title?: string
+                    fields: { fieldId: string; value: string }[]
+                }
             } catch {
                 // fall through to API data
             }
         }
-        return printData?.data?.fileds ?? []
+        return null
-    }, [orderId, printData?.data?.fileds])
+    }, [orderId])
+
+    const printTitle =
+        draft?.title || printData?.data?.title || orderData?.data?.title || 'فرم چاپ سفارش'
+    const fieldValues = draft?.fields ?? printData?.data?.fileds ?? []
 
     const sections = useMemo(
         () =>
@@ -41,7 +48,7 @@ const OrderPrintPreview: FC = () => {
     const handlePrint = () => window.print()
 
     useEffect(() => {
-        document.title = 'چاپ فرم سفارش'
+        document.title = printTitle
 
         const html = document.documentElement
         const root = document.getElementById('root')
@@ -67,7 +74,7 @@ const OrderPrintPreview: FC = () => {
             resetScroll(document.body)
             if (root) resetScroll(root)
         }
-    }, [])
+    }, [printTitle])
 
     if (!sections.length) {
         return (
@@ -96,7 +103,7 @@ const OrderPrintPreview: FC = () => {
 
             <div className="max-w-[210mm] mx-auto p-8 print:p-0">
                 <header className="text-center mb-8 pb-4 border-b-2 border-gray-800">
-                    <h1 className="text-2xl font-bold text-gray-900">فرم چاپ سفارش</h1>
+                    <h1 className="text-2xl font-bold text-gray-900">{printTitle}</h1>
                     <p className="text-sm text-gray-500 mt-2">
                         {new Date().toLocaleDateString('fa-IR')}
                     </p>
@@ -124,7 +131,7 @@ const OrderPrintPreview: FC = () => {
                 </div>
 
                 <footer className="mt-8 pt-4 border-t border-gray-200 text-center text-xs text-gray-400 print:mt-6">
-                    نگاره — فرم چاپ سفارش
+                    نگاره — {printTitle}
                 </footer>
             </div>
 

src/pages/order/types/Types.ts

@@ -272,11 +272,13 @@ export type OrderPrintFieldType = {
 };
 
 export type OrderPrintFormType = {
+  title: string;
   fields: OrderPrintFieldType[];
 };
 
 export type OrderPrintDataType = {
   id: string;
+  title: string;
   createdAt: string;
   deletedAt: string | null;
   fileds: OrderPrintFieldType[];

src/pages/product/Create.tsx

@@ -15,6 +15,8 @@ import { toast } from 'react-toastify';
 import type { ErrorType } from '@/helpers/types';
 import { extractErrorMessage } from '@/config/func';
 import { useNavigate } from 'react-router-dom';
+import { Paths } from '@/config/Paths'
+import BackButton from '@/components/BackButton'
 
 const CreateProduct: FC = () => {
 
@@ -71,8 +73,10 @@ const CreateProduct: FC = () => {
     return (
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
-
+                <div className='flex items-center gap-4'>
+                    <BackButton to={Paths.product.list} />
                     <h1 className='text-lg font-light'>محصول جدید</h1>
+                </div>
                 <Button
                     className='w-fit px-6'
                     onClick={() => formik.handleSubmit()}

src/pages/product/List.tsx

@@ -1,19 +1,53 @@
 import Button from '@/components/Button'
-import Filters from '@/components/Filters'
+import Filters, { type FilterValues } from '@/components/Filters'
 import Table from '@/components/Table'
 import { AddSquare, Edit, More2 } from 'iconsax-react'
-import { type FC, useState } from 'react'
+import { type FC, useMemo, useState } from 'react'
-import { useDeleteProduct, useDuplicateProduct, useGetProducts } from './hooks/useProductData'
+import { useDeleteProduct, useDuplicateProduct, useGetCategory, useGetProducts } from './hooks/useProductData'
 import { Link } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
 import TrashWithConfrim from '@/components/TrashWithConfrim'
 import CopyWithConfirm from '@/components/CopyWithConfirm'
 import { toast } from 'react-toastify'
 import { extractErrorMessage } from '@/config/func'
+import type { CategoryType } from './types/Types'
+
+const flattenCategoryOptions = (categories: CategoryType[]) => {
+    const options: { label: string; value: string }[] = []
+
+    for (const category of categories) {
+        options.push({ label: category.title, value: category.id })
+        for (const child of category.children ?? []) {
+            options.push({ label: `— ${child.title}`, value: child.id })
+        }
+    }
+
+    return options
+}
 
 const ProductList: FC = () => {
+    const [page, setPage] = useState<number>(1)
+    const [search, setSearch] = useState<string>('')
+    const [categoryId, setCategoryId] = useState<string>('')
+
+    const { data: categoriesData } = useGetCategory({ limit: 1000, parentId: 'null' })
+    const { data: products, refetch } = useGetProducts({
+        page,
+        search: search || undefined,
+        categoryId: categoryId || undefined,
+    })
+
+    const categoryOptions = useMemo(
+        () => flattenCategoryOptions((categoriesData?.data ?? []) as CategoryType[]),
+        [categoriesData?.data],
+    )
+
+    const handleFiltersChange = (filters: FilterValues) => {
+        setSearch(filters.search ?? '')
+        setCategoryId(filters.categoryId ?? '')
+        setPage(1)
+    }
 
-    const { data: products, refetch } = useGetProducts()
     const { mutate: deleteProduct, isPending: isDeleting } = useDeleteProduct()
     const { mutate: duplicateProduct, isPending: isDuplicating } = useDuplicateProduct()
     const [duplicatingId, setDuplicatingId] = useState<string | null>(null)
@@ -75,9 +109,15 @@ const ProductList: FC = () => {
                             name: 'search',
                             type: 'input',
                             placeholder: 'جستجوی محصول'
+                        },
+                        {
+                            name: 'categoryId',
+                            type: 'select',
+                            placeholder: 'دسته‌بندی',
+                            options: categoryOptions,
                         }
                     ]}
-                    onChange={() => { }}
+                    onChange={handleFiltersChange}
                 />
             </div>
 
@@ -88,6 +128,11 @@ const ProductList: FC = () => {
                             key: 'title',
                             title: 'عنوان محصول',
                         },
+                        {
+                            key: 'category',
+                            title: 'دسته‌بندی',
+                            render: (item) => item.category?.title ?? '-',
+                        },
                         {
                             key: 'attribute',
                             title: 'ویژگی ها',
@@ -109,6 +154,10 @@ const ProductList: FC = () => {
                                 )
                             }
                         },
+                        {
+                            key: 'order',
+                            title: 'ترتیب',
+                        },
                         {
                             key: 'actions',
                             title: '',
@@ -133,6 +182,11 @@ const ProductList: FC = () => {
                         },
                     ]}
                     data={products?.data}
+                    pagination={{
+                        currentPage: page,
+                        onPageChange: setPage,
+                        totalPages: products?.meta?.totalPages ?? 1,
+                    }}
                 />
             </div>
         </div>

src/pages/product/category/Create.tsx

@@ -3,39 +3,45 @@ import { useFormik } from 'formik'
 import { useState, type FC } from 'react'
 import type { CreateCategoryType } from '../types/Types'
 import * as Yup from 'yup'
-import { useCreateCategory, useGetCategory } from '../hooks/useProductData'
+import { useCreateCategory } from '../hooks/useProductData'
-import Select from '@/components/Select'
 import Button from '@/components/Button'
-import { AddSquare } from 'iconsax-react'
+import { AddSquare, TickCircle } from 'iconsax-react'
 import UploadBox from '@/components/UploadBox'
 import SwitchComponent from '@/components/Switch'
 import { useSingleUpload } from '@/pages/uploader/hooks/useUploader'
 import { toast } from 'react-toastify'
 import { extractErrorMessage } from '@/config/func'
-import { useNavigate } from 'react-router-dom'
+import DefaulModal from '@/components/DefaulModal'
-import { Paths } from '@/config/Paths'
-import BackButton from '@/components/BackButton'
 
-const ProductCategory: FC = () => {
+type Props = {
+    parentId?: string
+    refetch: () => void
+}
 
-    const navigate = useNavigate()
+const CreateCategory: FC<Props> = ({ parentId, refetch }) => {
-    const { data } = useGetCategory()
     const { mutate, isPending } = useCreateCategory()
     const { mutate: upload, isPending: isUploading } = useSingleUpload()
 
-
+    const [showModal, setShowModal] = useState(false)
     const [file, setFile] = useState<File>()
 
+    const handleClose = () => {
+        setShowModal(false)
+        setFile(undefined)
+        formik.resetForm()
+    }
+
     const handleSave = (values: CreateCategoryType) => {
         const payload: CreateCategoryType = {
             ...values,
-            parentId: values.parentId || undefined,
+            parentId: parentId || undefined,
         }
 
         mutate(payload, {
             onSuccess: () => {
                 toast.success('با موفقیت ذخیره شد')
-                navigate(Paths.product.category.list)
+                refetch()
+                handleClose()
             },
             onError: (error) => {
                 toast.error(extractErrorMessage(error))
@@ -69,55 +75,39 @@ const ProductCategory: FC = () => {
     })
 
     return (
-        <div className='mt-5'>
+        <div>
-            <div className='flex justify-between items-center'>
-                <div className='flex items-center gap-4'>
-                    <BackButton to={Paths.product.category.list} />
-                    <h1 className='text-lg font-light'>دسته جدید</h1>
-                </div>
             <Button
                 className='w-fit px-6'
-                    isLoading={isPending || isUploading}
+                onClick={() => setShowModal(true)}
-                    onClick={() => formik.handleSubmit()}
             >
                 <div className='flex gap-1.5'>
                     <AddSquare size={18} color='black' />
-                        <div className='text-[13px] font-light'>ساخت دسته</div>
+                    <div className='text-[13px] font-light'>دسته‌بندی جدید</div>
                 </div>
             </Button>
-            </div>
-            <div className='mt-8 bg-white p-6 rounded-3xl '>
 
-                <div>
+            <DefaulModal
+                open={showModal}
+                close={handleClose}
+                isHeader
+                title_header='دسته جدید'
+            >
+                <div className='mt-5'>
                     <UploadBox
                         label='تصویر دسته (اختیاری)'
                         onChange={(files) => setFile(files[0])}
                     />
                 </div>
 
-                <div className='rowTwoInput mt-6'>
+                <div className='mt-5'>
                     <Input
                         label='عنوان'
                         {...formik.getFieldProps('title')}
                         error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                     />
-
-                    <Select
-                        label='انتخاب والد درسته'
-                        placeholder='اختیاری'
-                        items={data?.data?.map((item) => {
-                            return {
-                                label: item.title,
-                                value: item.id + ''
-                            }
-                        }) || []}
-                        onChange={formik.handleChange}
-                        name='parentId'
-                        value={formik.values.parentId || ''}
-                    />
                 </div>
 
-                <div className='mt-6'>
+                <div className='mt-5'>
                     <Input
                         label='ترتیب اولویت'
                         {...formik.getFieldProps('order')}
@@ -125,15 +115,31 @@ const ProductCategory: FC = () => {
                     />
                 </div>
 
-                <div className='mt-6'>
+                <div className='mt-5'>
                     <SwitchComponent
                         active={formik.values.isActive}
                         onChange={(value) => formik.setFieldValue('isActive', value)}
                     />
                 </div>
+
+                <div className='mt-6 flex justify-end'>
+                    <Button
+                        className='w-fit px-6'
+                        isLoading={isPending || isUploading}
+                        onClick={() => formik.handleSubmit()}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle
+                                size={18}
+                                color='black'
+                            />
+                            <div>ذخیره</div>
                         </div>
+                    </Button>
+                </div>
+            </DefaulModal>
         </div>
     )
 }
 
-export default ProductCategory
+export default CreateCategory

src/pages/product/category/List.tsx

@@ -1,24 +1,34 @@
 import { type FC, useMemo } from 'react'
 import PresignedImage from '@/components/PresignedImage'
-import { useDeleteCategory, useGetCategory } from '../hooks/useProductData'
+import { useDeleteCategory, useGetCategory, useGetCategoryDetail } from '../hooks/useProductData'
 import Table from '@/components/Table'
 import type { ColumnType, RowDataType } from '@/components/types/TableTypes'
 import type { CategoryType } from '../types/Types'
-import Button from '@/components/Button'
+import { ArrowLeft2, Edit } from 'iconsax-react'
-import { AddSquare, Edit } from 'iconsax-react'
 import TrashWithConfrim from '@/components/TrashWithConfrim'
 import { toast } from 'react-toastify'
 import { extractErrorMessage } from '@/config/func'
-import { Link } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
 import BackButton from '@/components/BackButton'
+import CreateCategory from './Create'
 
 const CategoryList: FC = () => {
+    const { parentId } = useParams<{ parentId?: string }>()
 
-    const { data, refetch } = useGetCategory()
+    const { data, refetch } = useGetCategory({
+        limit: 1000,
+        parentId: parentId ?? 'null',
+    })
+    const { data: parentDetail } = useGetCategoryDetail(parentId ?? '')
     const { mutate, isPending } = useDeleteCategory()
     const categories = (data?.data ?? []) as (CategoryType & RowDataType)[]
 
+    const parentCategory = parentDetail?.data
+    const backTo = parentCategory?.parent?.id
+        ? Paths.product.category.children + parentCategory.parent.id
+        : Paths.product.category.list
+
     const handleDelete = (id: string) => {
         mutate(id, {
             onSuccess: () => {
@@ -39,19 +49,34 @@ const CategoryList: FC = () => {
         {
             title: 'عنوان',
             key: 'title',
+            render: (item) => {
+                return (
+                    <Link
+                        to={Paths.product.category.children + item.id}
+                        className='inline-flex items-center gap-1.5 text-sm text-black hover:opacity-70'
+                    >
+                        <span>{item.title}</span>
+                         <ArrowLeft2 size={16} color='#8C90A3' />
+                    </Link>
+                )
+            }
         },
         {
-            title: 'والد',
+            title: 'زیر دسته‌ها',
-            key: 'parent',
-            render: (item) => item.parent?.title || '-',
-        },
-        {
-            title: 'تعداد زیر دسته',
             key: 'children',
-            render: (item) => <div>{item.children?.length || 0}</div>
+            render: (item) => {
+                if (!item.children?.length) return '0'
+                return (
+                    <div className='flex flex-col gap-0.5'>
+                        {item.children.map((child) => (
+                            <span key={child.id}>{child.title}</span>
+                        ))}
+                    </div>
+                )
+            }
         },
         {
-            title: 'اولویت',
+            title: 'ترتیب',
             key: 'order',
             render: (item) => item.order ?? '-',
         },
@@ -75,22 +100,19 @@ const CategoryList: FC = () => {
         }
     ], [isPending])
 
+    const title = parentCategory
+        ? `زیر دسته‌های «${parentCategory.title}»`
+        : 'دسته بندی محصولات'
+
     return (
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
                 <div className='flex items-center gap-4'>
-                    <BackButton to={Paths.product.list} />
+                    <BackButton to={parentId ? backTo : Paths.product.list} />
-                    <h1 className='text-lg font-light'>دسته بندی محصولات</h1>
+                    <h1 className='text-lg font-light'>{title}</h1>
                 </div>
 
-                <Link to={Paths.product.category.create}>
+                <CreateCategory parentId={parentId} refetch={refetch} />
-                    <Button className='w-fit px-6'>
-                        <div className='flex gap-1.5'>
-                            <AddSquare size={18} color='black' />
-                            <div className='text-[13px] font-light'>دسته‌بندی جدید</div>
-                        </div>
-                    </Button>
-                </Link>
             </div>
 
             <div className='mt-8'>

src/pages/product/components/CategoriesSelect.tsx

@@ -1,6 +1,7 @@
-import { type FC, type SelectHTMLAttributes } from 'react'
+import { type FC, type SelectHTMLAttributes, useMemo } from 'react'
 import { useGetCategory } from '../hooks/useProductData'
 import Select from '@/components/Select'
+import type { CategoryType } from '../types/Types'
 
 type Props = {
     error_text?: string,
@@ -9,6 +10,19 @@ type Props = {
     clearable?: boolean,
 } & SelectHTMLAttributes<HTMLSelectElement>
 
+const flattenCategoryOptions = (categories: CategoryType[]) => {
+    const options: { label: string; value: string }[] = []
+
+    for (const category of categories) {
+        options.push({ label: category.title, value: category.id })
+        for (const child of category.children ?? []) {
+            options.push({ label: `— ${child.title}`, value: child.id })
+        }
+    }
+
+    return options
+}
+
 const CategoriesSelect: FC<Props> = ({
     isDisableShowLable,
     placeholder,
@@ -16,8 +30,12 @@ const CategoriesSelect: FC<Props> = ({
     clearable = true,
     ...selectProps
 }) => {
+    const { data: categories } = useGetCategory({ limit: 1000, parentId: 'null' })
 
-    const { data: categories } = useGetCategory()
+    const items = useMemo(
+        () => flattenCategoryOptions((categories?.data ?? []) as CategoryType[]),
+        [categories?.data],
+    )
 
     return (
         <Select
@@ -25,12 +43,7 @@ const CategoriesSelect: FC<Props> = ({
             placeholder={placeholder || 'انتخاب'}
             error_text={error_text}
             clearable={clearable}
-            items={categories?.data?.map((item) => {
+            items={items}
-                return {
-                    label: item.title,
-                    value: item.id + ''
-                }
-            }) || []}
             {...selectProps}
         />
     )

src/pages/product/hooks/useProductData.ts

@@ -12,10 +12,15 @@ import type {
   CreateProductType,
 } from "../types/Types";
 
-export const useGetCategory = () => {
+export const useGetCategory = (params?: api.GetCategoryParams) => {
+  const page = params?.page ?? 1;
+  const limit = params?.limit;
+  const search = params?.search;
+  const parentId = params?.parentId;
+
   return useQuery({
-    queryKey: ["category"],
+    queryKey: ["category", page, limit, search, parentId],
-    queryFn: api.getCategory,
+    queryFn: () => api.getCategory({ page, limit, search, parentId }),
   });
 };
 
@@ -52,10 +57,15 @@ export const useGetCategoryDetail = (id: string) => {
   });
 };
 
-export const useGetProducts = () => {
+export const useGetProducts = (params?: api.GetProductsParams) => {
+  const page = params?.page ?? 1;
+  const search = params?.search;
+  const limit = params?.limit;
+  const categoryId = params?.categoryId;
+
   return useQuery({
-    queryKey: ["products"],
+    queryKey: ["products", page, search, limit, categoryId],
-    queryFn: api.getProducts,
+    queryFn: () => api.getProducts({ page, search, limit, categoryId }),
   });
 };
 

src/pages/product/service/ProductService.ts

@@ -1,8 +1,22 @@
 import axios from "@/config/axios";
 import { type AttributeDetailResponseType, type AttributeResponseType, type AttributeValueDetailResponseType, type AttributeValuesResponseType, type CategoriesResponse, type CategoryResponse, type CreateAttributeType, type CreateAttributeValueType, type CreateCategoryType, type CreateProductType, type ProductDetailResponeType, type ProductResponeType } from "../types/Types";
 
-export const getCategory = async () => {
+export type GetCategoryParams = {
-  const { data } = await axios.get<CategoriesResponse>("/admin/category");
+  page?: number;
+  limit?: number;
+  search?: string;
+  parentId?: string;
+};
+
+export const getCategory = async (params?: GetCategoryParams) => {
+  const { data } = await axios.get<CategoriesResponse>("/admin/category", {
+    params: {
+      page: params?.page,
+      limit: params?.limit,
+      search: params?.search || undefined,
+      parentId: params?.parentId || undefined,
+    },
+  });
   return data;
 };
 
@@ -26,8 +40,22 @@ export const getCategoryDetail = async(id:string) => {
   return data
 }
 
-export const getProducts = async () => {
+export type GetProductsParams = {
-  const { data } = await axios.get<ProductResponeType>("/admin/products");
+  page?: number;
+  limit?: number;
+  search?: string;
+  categoryId?: string;
+};
+
+export const getProducts = async (params?: GetProductsParams) => {
+  const { data } = await axios.get<ProductResponeType>("/admin/products", {
+    params: {
+      page: params?.page,
+      limit: params?.limit,
+      search: params?.search || undefined,
+      categoryId: params?.categoryId || undefined,
+    },
+  });
   return data;
 };
 

src/pages/profile/Profile.tsx

@@ -0,0 +1,148 @@
+import { useFormik } from 'formik';
+import { type FC, useState } from 'react';
+import * as Yup from 'yup';
+import Button from '@/components/Button';
+import { Edit } from 'iconsax-react';
+import Input from '@/components/Input';
+import UploadBox from '@/components/UploadBox';
+import PresignedImage from '@/components/PresignedImage';
+import { useGetAdminMe, useUpdateAdminMe } from '@/pages/admin/hooks/useAdminData';
+import { useSingleUpload } from '@/pages/uploader/hooks/useUploader';
+import { toast } from 'react-toastify';
+import { extractErrorMessage } from '@/config/func';
+import type { UpdateAdminMeType } from '@/pages/admin/types/Types';
+
+const Profile: FC = () => {
+    const { data: adminData, isLoading } = useGetAdminMe();
+    const { mutate: update, isPending: isUpdating } = useUpdateAdminMe();
+    const { mutate: upload, isPending: isUploading } = useSingleUpload();
+    const [file, setFile] = useState<File>();
+
+    const admin = adminData?.data;
+
+    const handleSave = (values: UpdateAdminMeType) => {
+        update(values, {
+            onSuccess: () => {
+                toast.success('پروفایل با موفقیت ویرایش شد');
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error));
+            },
+        });
+    };
+
+    const formik = useFormik<UpdateAdminMeType>({
+        enableReinitialize: true,
+        initialValues: {
+            firstName: admin?.firstName ?? '',
+            lastName: admin?.lastName ?? '',
+            phone: admin?.phone ? `0${admin.phone}` : '',
+            avatarUrl: admin?.avatarUrl ?? undefined,
+        },
+        validationSchema: Yup.object({
+            firstName: Yup.string()
+                .required('نام اجباری می باشد')
+                .min(2, 'نام باید حداقل 2 کاراکتر باشد'),
+            lastName: Yup.string()
+                .required('نام خانوادگی اجباری می باشد')
+                .min(2, 'نام خانوادگی باید حداقل 2 کاراکتر باشد'),
+            phone: Yup.string()
+                .required('شماره موبایل اجباری می باشد')
+                .matches(/^09[0-9]{9}$/, 'شماره موبایل معتبر نمی باشد'),
+        }),
+        onSubmit: (values) => {
+            if (file) {
+                upload(file, {
+                    onSuccess: (data) => {
+                        handleSave({ ...values, avatarUrl: data?.data?.key });
+                    },
+                    onError: (error) => toast.error(extractErrorMessage(error)),
+                });
+            } else {
+                handleSave(values);
+            }
+        },
+    });
+
+    if (isLoading) {
+        return (
+            <div className='mt-5 flex h-64 items-center justify-center'>
+                <div className='text-lg'>در حال بارگذاری...</div>
+            </div>
+        );
+    }
+
+    return (
+        <div className='mt-5'>
+            <div className='flex items-center justify-between'>
+                <h1 className='text-lg font-light'>پروفایل</h1>
+                <Button
+                    className='w-fit px-6'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={isUpdating || isUploading}
+                >
+                    <div className='flex gap-1.5'>
+                        <Edit size={18} color='black' />
+                        <div className='text-[13px] font-light'>ذخیره تغییرات</div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-8 flex-1 rounded-3xl bg-white p-6'>
+                {formik.values.avatarUrl && !file && (
+                    <div className='mb-4'>
+                        <PresignedImage
+                            src={formik.values.avatarUrl}
+                            className='h-20 w-20 rounded-full object-cover'
+                            alt='آواتار'
+                        />
+                    </div>
+                )}
+
+                <UploadBox
+                    label='آواتار (اختیاری)'
+                    onChange={(files) => setFile(files[0])}
+                />
+
+                <div className='rowTwoInput mt-6'>
+                    <Input
+                        label='نام'
+                        placeholder='نام را وارد کنید'
+                        {...formik.getFieldProps('firstName')}
+                        error_text={
+                            formik.touched.firstName && formik.errors.firstName
+                                ? formik.errors.firstName
+                                : ''
+                        }
+                    />
+
+                    <Input
+                        label='نام خانوادگی'
+                        placeholder='نام خانوادگی را وارد کنید'
+                        {...formik.getFieldProps('lastName')}
+                        error_text={
+                            formik.touched.lastName && formik.errors.lastName
+                                ? formik.errors.lastName
+                                : ''
+                        }
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <Input
+                        label='شماره موبایل'
+                        placeholder='شماره موبایل را وارد کنید'
+                        {...formik.getFieldProps('phone')}
+                        error_text={
+                            formik.touched.phone && formik.errors.phone
+                                ? formik.errors.phone
+                                : ''
+                        }
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Profile;

src/pages/profile/hooks/useProfileData.ts

@@ -1,21 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import axios from "@/config/axios";
-
-export interface ProfileData {
-  user: {
-    firstName: string;
-    lastName: string;
-    email: string;
-    profilePic?: string;
-  };
-}
-
-export const useGetProfile = () => {
-  return useQuery({
-    queryKey: ["profile"],
-    queryFn: async (): Promise<{ data: ProfileData }> => {
-      const response = await axios.get("/profile");
-      return response.data;
-    },
-  });
-};

src/router/MainRouter.tsx

@@ -1,8 +1,13 @@
-import { type FC } from "react";
+import { type FC, type ReactNode } from "react";
 import { Route, Routes, useLocation } from "react-router-dom";
 import Home from "../pages/home/Home";
 import AppLayout from "../shared/AppLayout";
+import PermissionGuard from "../shared/PermissionGuard";
 import { Paths } from "@/config/Paths";
+import {
+  ORDER_VIEW_PERMISSIONS,
+  Permissions,
+} from "@/config/permissions";
 import ProformaInvoice from "@/pages/invoice/ProformaInvoice";
 import CreateInvoice from "@/pages/invoice/Create";
 import RequestList from "@/pages/requests/RequestList";
@@ -23,7 +28,6 @@ import LearningList from "@/pages/learning/List";
 import LearningCreate from "@/pages/learning/Create";
 import LearningCategory from "@/pages/learning/Category";
 import CategoryList from "@/pages/product/category/List";
-import CreateCategory from "@/pages/product/category/Create";
 import UpdateCategory from "@/pages/product/category/Update";
 import UpdateProduct from "@/pages/product/Update";
 import CreateAttribute from "@/pages/product/attribute/Create";
@@ -47,6 +51,7 @@ import UpdateUser from "@/pages/user/Update";
 import AdminList from "@/pages/admin/List";
 import CreateAdmin from "@/pages/admin/Create";
 import EditAdmin from "@/pages/admin/Update";
+import Profile from "@/pages/profile/Profile";
 import RoleList from "@/pages/role/List";
 import CreateRole from "@/pages/role/Create";
 import UpdateRole from "@/pages/role/Update";
@@ -58,6 +63,13 @@ import TicketList from "@/pages/ticket/TicketList";
 import TicketDetail from "@/pages/ticket/Detail";
 import PaymentsList from "@/pages/payment/List";
 
+const withPermission = (
+  permission: string | string[],
+  element: ReactNode,
+) => (
+  <PermissionGuard permission={permission}>{element}</PermissionGuard>
+);
+
 const MainRouter: FC = () => {
     const location = useLocation()
     const isPrintPreview = /\/order\/print\/[^/]+\/preview/.test(location.pathname)
@@ -73,73 +85,78 @@ const MainRouter: FC = () => {
     return (
         <AppLayout>
             <Routes>
-                <Route path="/" element={<Home />} />
+                <Route path="/" element={withPermission(Permissions.DASHBOARD, <Home />)} />
-                <Route path={Paths.home} element={<Home />} />
+                <Route path={Paths.home} element={withPermission(Permissions.DASHBOARD, <Home />)} />
-                <Route path={Paths.perfomaInvoice.list} element={<ProformaInvoice />} />
+                <Route path={Paths.profile} element={<Profile />} />
-                <Route path={Paths.payments.list} element={<PaymentsList />} />
-                <Route path={Paths.perfomaInvoice.create} element={<CreateInvoice />} />
-                <Route path={Paths.perfomaInvoice.detail + ":id"} element={<DetailPerfomaInvoice />} />
-                <Route path={Paths.perfomaInvoice.update + ":id"} element={<UpdateInvoice />} />
-                <Route path={Paths.requests.list} element={<RequestList />} />
-                <Route path={Paths.requests.detail + ":id"} element={<RequestDetail />} />
-                <Route path={Paths.product.list} element={<ProductList />} />
-                <Route path={Paths.product.create} element={<CreateProduct />} />
-                <Route path={Paths.product.update + ":id"} element={<UpdateProduct />} />
-                <Route path={Paths.product.attribute.create + ":id"} element={<CreateAttribute />} />
-                <Route path={Paths.product.attribute.list + ":id"} element={<AttributeList />} />
-                <Route path={Paths.product.attribute.update + ":id"} element={<UpdateAttribute />} />
-                <Route path={Paths.product.attributeValue.list + ":id"} element={<AttributeValues />} />
-                <Route path={Paths.product.category.list} element={<CategoryList />} />
-                <Route path={Paths.product.category.create} element={<CreateCategory />} />
-                <Route path={Paths.product.category.update + ":id"} element={<UpdateCategory />} />
 
-                <Route path={Paths.formBuilder.list + ":id/:type"} element={<FormBuilderList />} />
+                <Route path={Paths.perfomaInvoice.list} element={withPermission(Permissions.VIEW_INVOICES, <ProformaInvoice />)} />
-                <Route path={Paths.formBuilder.create + ":id/:type"} element={<FormBuilderCreate />} />
+                <Route path={Paths.perfomaInvoice.create} element={withPermission(Permissions.VIEW_INVOICES, <CreateInvoice />)} />
-                <Route path={Paths.formBuilder.update + ":id"} element={<FormBuilderUpdate />} />
+                <Route path={Paths.perfomaInvoice.detail + ":id"} element={withPermission(Permissions.VIEW_INVOICES, <DetailPerfomaInvoice />)} />
-                <Route path={Paths.formBuilder.values + ":id"} element={<FormBuilderValues />} />
+                <Route path={Paths.perfomaInvoice.update + ":id"} element={withPermission(Permissions.VIEW_INVOICES, <UpdateInvoice />)} />
 
-                <Route path={Paths.order.list} element={<OrdersList />} />
+                <Route path={Paths.payments.list} element={withPermission(Permissions.MANAGE_PAYMENTS, <PaymentsList />)} />
-                <Route path={Paths.order.details + ":id"} element={<OrderDetail />} />
-                <Route path={Paths.order.create} element={<NewOrder />} />
-                <Route path={Paths.order.edit + ":id"} element={<EditOrder />} />
-                <Route path={Paths.convertToOrder} element={<ConvertToOrders />} />
-                <Route path={Paths.orderPrint + ':id/preview'} element={<OrderPrintPreview />} />
-                <Route path={Paths.orderPrint + ':id'} element={<OrderPrint />} />
 
-                <Route path={Paths.tickets.list} element={<TicketList />} />
+                <Route path={Paths.requests.list} element={withPermission(Permissions.VIEW_REQUESTS, <RequestList />)} />
-                <Route path={Paths.tickets.detail + ":id"} element={<TicketDetail />} />
+                <Route path={Paths.requests.detail + ":id"} element={withPermission(Permissions.VIEW_REQUESTS, <RequestDetail />)} />
 
-                <Route path={Paths.print.list} element={<SectionList />} />
+                <Route path={Paths.product.list} element={withPermission(Permissions.MANAGE_PRODUCTS, <ProductList />)} />
-                <Route path={Paths.print.create} element={<CreateSection />} />
+                <Route path={Paths.product.create} element={withPermission(Permissions.MANAGE_PRODUCTS, <CreateProduct />)} />
-                <Route path={Paths.print.update + ":id"} element={<UpdateSection />} />
+                <Route path={Paths.product.update + ":id"} element={withPermission(Permissions.MANAGE_PRODUCTS, <UpdateProduct />)} />
-                <Route path={Paths.print.form + ":itemId/:orderId"} element={<PrintForm />} />
+                <Route path={Paths.product.attribute.create + ":id"} element={withPermission(Permissions.MANAGE_PRODUCTS, <CreateAttribute />)} />
+                <Route path={Paths.product.attribute.list + ":id"} element={withPermission(Permissions.MANAGE_PRODUCTS, <AttributeList />)} />
+                <Route path={Paths.product.attribute.update + ":id"} element={withPermission(Permissions.MANAGE_PRODUCTS, <UpdateAttribute />)} />
+                <Route path={Paths.product.attributeValue.list + ":id"} element={withPermission(Permissions.MANAGE_PRODUCTS, <AttributeValues />)} />
+                <Route path={Paths.product.category.list} element={withPermission(Permissions.MANAGE_PRODUCTS, <CategoryList />)} />
+                <Route path={Paths.product.category.children + ":parentId"} element={withPermission(Permissions.MANAGE_PRODUCTS, <CategoryList />)} />
+                <Route path={Paths.product.category.update + ":id"} element={withPermission(Permissions.MANAGE_PRODUCTS, <UpdateCategory />)} />
 
-                <Route path={Paths.users.list} element={<UsersList />} />
+                <Route path={Paths.formBuilder.list + ":id/:type"} element={withPermission(Permissions.MANAGE_PRODUCTS, <FormBuilderList />)} />
-                <Route path={Paths.users.create} element={<CreateUser />} />
+                <Route path={Paths.formBuilder.create + ":id/:type"} element={withPermission(Permissions.MANAGE_PRODUCTS, <FormBuilderCreate />)} />
-                <Route path={Paths.users.update + ":id"} element={<UpdateUser />} />
+                <Route path={Paths.formBuilder.update + ":id"} element={withPermission(Permissions.MANAGE_PRODUCTS, <FormBuilderUpdate />)} />
+                <Route path={Paths.formBuilder.values + ":id"} element={withPermission(Permissions.MANAGE_PRODUCTS, <FormBuilderValues />)} />
 
-                <Route path={Paths.admin.list} element={<AdminList />} />
+                <Route path={Paths.order.list} element={withPermission(ORDER_VIEW_PERMISSIONS, <OrdersList />)} />
-                <Route path={Paths.admin.create} element={<CreateAdmin />} />
+                <Route path={Paths.order.details + ":id"} element={withPermission(ORDER_VIEW_PERMISSIONS, <OrderDetail />)} />
-                <Route path={Paths.admin.update + ":id"} element={<EditAdmin />} />
+                <Route path={Paths.order.create} element={withPermission(ORDER_VIEW_PERMISSIONS, <NewOrder />)} />
+                <Route path={Paths.order.edit + ":id"} element={withPermission(ORDER_VIEW_PERMISSIONS, <EditOrder />)} />
+                <Route path={Paths.convertToOrder} element={withPermission(ORDER_VIEW_PERMISSIONS, <ConvertToOrders />)} />
+                <Route path={Paths.orderPrint + ':id/preview'} element={withPermission(ORDER_VIEW_PERMISSIONS, <OrderPrintPreview />)} />
+                <Route path={Paths.orderPrint + ':id'} element={withPermission(ORDER_VIEW_PERMISSIONS, <OrderPrint />)} />
 
-                <Route path={Paths.role.list} element={<RoleList />} />
+                <Route path={Paths.tickets.list} element={withPermission(Permissions.MANAGE_TICKETS, <TicketList />)} />
-                <Route path={Paths.role.create} element={<CreateRole />} />
+                <Route path={Paths.tickets.detail + ":id"} element={withPermission(Permissions.MANAGE_TICKETS, <TicketDetail />)} />
-                <Route path={Paths.role.update + ":id"} element={<UpdateRole />} />
+
+                <Route path={Paths.print.list} element={withPermission(Permissions.VIEW_PRINT_FORM, <SectionList />)} />
+                <Route path={Paths.print.create} element={withPermission(Permissions.VIEW_PRINT_FORM, <CreateSection />)} />
+                <Route path={Paths.print.update + ":id"} element={withPermission(Permissions.VIEW_PRINT_FORM, <UpdateSection />)} />
+                <Route path={Paths.print.form + ":itemId/:orderId"} element={withPermission(Permissions.VIEW_PRINT_FORM, <PrintForm />)} />
+
+                <Route path={Paths.users.list} element={withPermission(Permissions.VIEW_USERS, <UsersList />)} />
+                <Route path={Paths.users.create} element={withPermission(Permissions.VIEW_USERS, <CreateUser />)} />
+                <Route path={Paths.users.update + ":id"} element={withPermission(Permissions.VIEW_USERS, <UpdateUser />)} />
+
+                <Route path={Paths.admin.list} element={withPermission(Permissions.MANAGE_ADMINS, <AdminList />)} />
+                <Route path={Paths.admin.create} element={withPermission(Permissions.MANAGE_ADMINS, <CreateAdmin />)} />
+                <Route path={Paths.admin.update + ":id"} element={withPermission(Permissions.MANAGE_ADMINS, <EditAdmin />)} />
+
+                <Route path={Paths.role.list} element={withPermission(Permissions.MANAGE_ROLES, <RoleList />)} />
+                <Route path={Paths.role.create} element={withPermission(Permissions.MANAGE_ROLES, <CreateRole />)} />
+                <Route path={Paths.role.update + ":id"} element={withPermission(Permissions.MANAGE_ROLES, <UpdateRole />)} />
 
                 <Route path={Paths.features.list} element={<FeaturesList />} />
                 <Route path={Paths.features.create} element={<CreateFeature />} />
                 <Route path={Paths.service.print} element={<PrintService />} />
 
-                <Route path={Paths.announcement.list} element={<AnnouncementList />} />
+                <Route path={Paths.announcement.list} element={withPermission(Permissions.MANAGE_ANNOUNCEMENTS, <AnnouncementList />)} />
-                <Route path={Paths.announcement.detail + ":id"} element={<AnnouncementUpdate />} />
+                <Route path={Paths.announcement.detail + ":id"} element={withPermission(Permissions.MANAGE_ANNOUNCEMENTS, <AnnouncementUpdate />)} />
-                <Route path={Paths.announcement.create} element={<AnnouncementCreate />} />
+                <Route path={Paths.announcement.create} element={withPermission(Permissions.MANAGE_ANNOUNCEMENTS, <AnnouncementCreate />)} />
 
-                <Route path={Paths.criticisms.list} element={<CriticismsList />} />
+                <Route path={Paths.criticisms.list} element={withPermission(Permissions.MANAGE_CRITICISMS, <CriticismsList />)} />
-                <Route path={Paths.criticisms.detail + ":id"} element={<CriticismsDetail />} />
+                <Route path={Paths.criticisms.detail + ":id"} element={withPermission(Permissions.MANAGE_CRITICISMS, <CriticismsDetail />)} />
 
-                <Route path={Paths.learning.list} element={<LearningList />} />
+                <Route path={Paths.learning.list} element={withPermission(Permissions.MANAGE_LEARNINGS, <LearningList />)} />
-                <Route path={Paths.learning.create} element={<LearningCreate />} />
+                <Route path={Paths.learning.create} element={withPermission(Permissions.MANAGE_LEARNINGS, <LearningCreate />)} />
-                <Route path={Paths.learning.category} element={<LearningCategory />} />
+                <Route path={Paths.learning.category} element={withPermission(Permissions.MANAGE_LEARNINGS, <LearningCategory />)} />
             </Routes>
         </AppLayout>
     );

src/shared/Header.tsx

@@ -1,21 +1,16 @@
-import { type FC, useEffect, useState } from 'react'
+import { type FC } from 'react'
 import Input from '@/components/Input'
 import UserAvatar from '@/components/UserAvatar'
-import { ArrowDown2, CloseCircle, HambergerMenu, Logout } from 'iconsax-react'
+import { HambergerMenu } from 'iconsax-react'
 import { Link } from 'react-router-dom'
-import { useLocation } from 'react-router-dom'
 import Notifications from '@/pages/notification/Notification'
 import { useSharedStore } from './store/useSharedStore'
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
-import SidebarItem from './SidebarItem'
 import { t } from '@/locale'
 import { useGetAdminMe } from '@/pages/admin/hooks/useAdminData'
 import { Paths } from '@/config/Paths'
 
 const Header: FC = () => {
 
-    const location = useLocation();
-    const [popoverKey, setPopoverKey] = useState(0);
     const { setOpenSidebar, openSidebar } = useSharedStore()
     const { data } = useGetAdminMe()
     const admin = data?.data
@@ -23,10 +18,6 @@ const Header: FC = () => {
     const displayName = [admin?.firstName, admin?.lastName].filter(Boolean).join(' ').trim()
     const roleTitle = admin?.role?.title || admin?.role?.name || ''
 
-    useEffect(() => {
-        setPopoverKey((prevKey) => prevKey + 1);
-    }, [location.pathname]);
-
     return (
         <div className='fixed z-10 left-[var(--layout-frame)] right-[var(--layout-frame)] top-[var(--layout-frame)] flex h-[var(--layout-header-height)] items-center justify-between rounded-[32px] bg-white px-6 xl:left-auto xl:right-[calc(var(--layout-frame)+var(--layout-main-offset))] xl:h-[var(--layout-header-height-xl)] xl:w-[calc(100%-(var(--layout-frame)*2)-var(--layout-main-offset))]'>
 
@@ -39,20 +30,10 @@ const Header: FC = () => {
             <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
                 <HambergerMenu size={24} color='black' />
             </div>
-            {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
             <div className='flex xl:gap-6 gap-4 items-center'>
-                {/* <Link to={Pages.services.other}>
-                    <Element3 color='black' className='xl:size-[18px] size-[17px]' />
-                </Link>
-                <Link className='xl:hidden' to={Pages.wallet}>
-                    <Wallet className='xl:size-[18px] size-[17px]' color='black' />
-                </Link>
-                <Link className='hidden xl:block' to={Pages.wallet}> */}
                 <Notifications />
                 {admin && (
-                    <Popover className="relative" key={popoverKey}>
+                    <Link to={Paths.profile} className='flex gap-2 items-center mt-2.5'>
-                        <PopoverButton>
-                            <div className='flex gap-2 items-center mt-2.5'>
                         <UserAvatar
                             src={admin.avatarUrl}
                             firstName={admin.firstName}
@@ -60,8 +41,7 @@ const Header: FC = () => {
                             className='size-6'
                             textClassName='text-xs'
                         />
-                                <div className='xl:flex hidden gap-1 items-center'>
+                        <div className='xl:flex hidden flex-col items-start'>
-                                    <div className='flex flex-col items-start'>
                             <div className='text-xs'>
                                 {displayName || String(admin.phone ?? '')}
                             </div>
@@ -71,50 +51,7 @@ const Header: FC = () => {
                                 </div>
                             )}
                         </div>
-                                    <ArrowDown2 size={14} color='#8C90A3' />
-                                </div>
-                            </div>
-                        </PopoverButton>
-
-                        <PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-white boxShadow xl:mt-7 z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
-                            <div className='absolute xl:hidden top-6 left-6'>
-                                <CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
-                            </div>
-                            <Link to={`${Paths.admin.update}${admin.id}`} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
-                                <UserAvatar
-                                    src={admin.avatarUrl}
-                                    firstName={admin.firstName}
-                                    lastName={admin.lastName}
-                                    className='size-14'
-                                    textClassName='text-lg'
-                                />
-                                <div>
-                                    {displayName || String(admin.phone ?? '')}
-                                </div>
-                                {roleTitle && (
-                                    <div className='text-description'>
-                                        {roleTitle}
-                                    </div>
-                                )}
-                                <div className='text-description'>
-                                    {String(admin.phone ?? '')}
-                                </div>
                     </Link>
-
-
-                            <div className='px-6 -mt-[2px]'>
-                                <SidebarItem
-                                    icon={<Logout color={'black'} size={20} />}
-                                    title={t('sidebar.logout')}
-                                    isActive
-                                    link={Paths.auth.login}
-                                    isWithoutLine
-                                    isLogout
-                                    activeName=''
-                                />
-                            </div>
-                        </PopoverPanel>
-                    </Popover>
                 )}
             </div>
         </div>

src/shared/PermissionGuard.tsx

@@ -0,0 +1,35 @@
+import { type FC, type ReactNode } from 'react'
+import { Navigate } from 'react-router-dom'
+import { useGetAdminMe } from '@/pages/admin/hooks/useAdminData'
+import {
+  getDefaultAdminPath,
+  hasPermission,
+} from '@/config/permissions'
+
+type Props = {
+  permission: string | string[]
+  children: ReactNode
+}
+
+/**
+ * Blocks route access when the current admin lacks the required permission(s).
+ * Pass an array to allow access if the user has any of them.
+ */
+const PermissionGuard: FC<Props> = ({ permission, children }) => {
+  const { data: adminMe, isLoading } = useGetAdminMe()
+
+  if (isLoading) {
+    return null
+  }
+
+  const permissions =
+    adminMe?.data?.role?.permissions?.map((p) => p.name) ?? []
+
+  if (!hasPermission(permissions, permission)) {
+    return <Navigate to={getDefaultAdminPath(permissions)} replace />
+  }
+
+  return <>{children}</>
+}
+
+export default PermissionGuard

src/shared/Sidebar.tsx

@@ -13,7 +13,6 @@ import {
   Printer,
   Receipt21,
   MoneyRecive,
-  ShieldSecurity,
   Teacher,
   User,
 } from 'iconsax-react';
@@ -67,7 +66,7 @@ const SideBar: FC = () => {
               title={t('sidebar.mainPage')}
               isActive={isActive('/home')}
               link={Paths.home}
-              activeName=''
+              activeName='dashboard'
             />
 
             <SideBarItem
@@ -107,9 +106,6 @@ const SideBar: FC = () => {
             />
 
 
-
-
-
             <SideBarItem
               icon={<People size={iconSizeSideBar} color="#4F5260" />}
               title={'مشتریان'}
@@ -128,20 +124,12 @@ const SideBar: FC = () => {
 
             <SideBarItem
               icon={<User size={iconSizeSideBar} color="#4F5260" />}
-              title={'ادمین'}
+              title={'کاربران'}
               isActive={isActive('admin')}
               link={Paths.admin.list}
               activeName='manage_admins'
             />
 
-            <SideBarItem
-              icon={<ShieldSecurity size={iconSizeSideBar} color="#4F5260" />}
-              title={'نقش‌ها'}
-              isActive={isActive('role')}
-              link={Paths.role.list}
-              activeName='manage_roles'
-            />
-
             <SideBarItem
               icon={<ElementEqual size={iconSizeSideBar} color="#4F5260" />}
               title={'محصولات'}