feat(admin): add collapsible desktop sidebar

package-lock.json

@@ -8,7 +8,14 @@
       "name": "guilan-ace-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@codemirror/commands": "^6.10.3",
+        "@codemirror/lang-markdown": "^6.5.0",
+        "@codemirror/language": "^6.12.3",
+        "@codemirror/search": "^6.7.0",
+        "@codemirror/state": "^6.6.0",
+        "@codemirror/view": "^6.43.1",
         "@hookform/resolvers": "^3.10.0",
+        "@lezer/highlight": "^1.2.3",
         "@radix-ui/react-accordion": "^1.2.11",
         "@radix-ui/react-alert-dialog": "^1.1.14",
         "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -49,12 +56,15 @@
         "next": "^15.4.6",
         "next-themes": "^0.3.0",
         "react": "^18.3.1",
+        "react-date-object": "^2.1.9",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.61.1",
         "react-markdown": "^9.0.3",
+        "react-multi-date-picker": "^4.5.2",
         "react-qr-code": "^2.0.11",
         "react-resizable-panels": "^2.1.9",
+        "react-syntax-highlighter": "^16.1.1",
         "recharts": "^2.15.4",
         "rehype-raw": "^7.0.0",
         "rehype-sanitize": "^6.0.0",
@@ -72,6 +82,7 @@
         "@types/node": "^22.16.5",
         "@types/react": "^18.3.26",
         "@types/react-dom": "^18.3.7",
+        "@types/react-syntax-highlighter": "^15.5.13",
         "autoprefixer": "^10.4.21",
         "eslint": "^9.32.0",
         "eslint-plugin-react-hooks": "^5.2.0",
@@ -96,14 +107,155 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.2.tgz",
-      "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==",
+      "version": "7.29.7",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.3",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/autocomplete/-/autocomplete-6.20.3.tgz",
+      "integrity": "sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.3",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/commands/-/commands-6.10.3.tgz",
+      "integrity": "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.6.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.3.1",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+      "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.1.7"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.11",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/lang-html/-/lang-html-6.4.11.tgz",
+      "integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.12"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.5",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
+      "integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-markdown": {
+      "version": "6.5.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/lang-markdown/-/lang-markdown-6.5.0.tgz",
+      "integrity": "sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.7.1",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.3.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/markdown": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.12.3",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/language/-/language-6.12.3.tgz",
+      "integrity": "sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.7",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/lint/-/lint-6.9.7.tgz",
+      "integrity": "sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.42.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.7.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/search/-/search-6.7.0.tgz",
+      "integrity": "sha512-ZvGm99wc/s2cITtMT15LFdn8aH/aS+V+DqyGq/N5ZlV5vWtH+nILvC2nw0zX7ByNoHHDZ2IxxdW38O0tc5nVHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.37.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.6.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/state/-/state-6.6.0.tgz",
+      "integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.43.1",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@codemirror/view/-/view-6.43.1.tgz",
+      "integrity": "sha512-+BIjw/AG3tDQ4pJgTLPYdAW25eDE66YsvM4LKyVPgGzVgZ4a9Wj1SRX8kPVKgBDdPt8oHtZ15F0qx7p0oOHdHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.6.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.10.0",
       "resolved": "https://package-mirror.liara.ir/repository/npm/@emnapi/runtime/-/runtime-1.10.0.tgz",
@@ -912,6 +1064,79 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lezer/common": {
+      "version": "1.5.2",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@lezer/common/-/common-1.5.2.tgz",
+      "integrity": "sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.3.3",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@lezer/css/-/css-1.3.3.tgz",
+      "integrity": "sha512-RzBo8r+/6QJeow7aPHIpGVIH59xTcJXp399820gZoMo9noQDRVpJLheIBUicYwKcsbOYoBRoLZlf2720dG/4Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.13",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@lezer/html/-/html-1.3.13.tgz",
+      "integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.5.4",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@lezer/javascript/-/javascript-1.5.4.tgz",
+      "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.10",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@lezer/lr/-/lr-1.4.10.tgz",
+      "integrity": "sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/markdown": {
+      "version": "1.6.4",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@lezer/markdown/-/markdown-1.6.4.tgz",
+      "integrity": "sha512-N0SxazMj4k65DBfaf1azqtMZd6u7MqluP84/NZnB/io8Td9aleFmAhz9hcbvSfsxT5tdYlJ5qgv5aMJGY4zEtA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
     "node_modules/@next/env": {
       "version": "15.5.18",
       "resolved": "https://package-mirror.liara.ir/repository/npm/@next/env/-/env-15.5.18.tgz",
@@ -2663,6 +2888,12 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
@@ -2694,6 +2925,16 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.13",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
+      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -3476,6 +3717,12 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4098,6 +4345,19 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "license": "MIT",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/fflate": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
@@ -4182,6 +4442,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4476,6 +4744,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+      "license": "CC0-1.0"
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -4875,6 +5158,20 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "license": "MIT",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -6267,6 +6564,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6349,6 +6655,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-date-object": {
+      "version": "2.1.9",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/react-date-object/-/react-date-object-2.1.9.tgz",
+      "integrity": "sha512-BHxD/quWOTo9fLKV/cfL/M31ePoj4a1JaJ/CnOf8Ndg3mrkh4x9wEMMkCfTrzduxDOgU8ZgR8uarhqI5G71sTg==",
+      "license": "MIT"
+    },
     "node_modules/react-day-picker": {
       "version": "8.10.1",
       "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
@@ -6376,6 +6688,16 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-element-popper": {
+      "version": "2.1.7",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/react-element-popper/-/react-element-popper-2.1.7.tgz",
+      "integrity": "sha512-tuM2OxKlW32h+6uFSK6EENHPeZ2OGgOipHfOAl+VLWEv9/j3QkSGbD+ADX3A9uJlmq24i37n28RjJmAbGTfpEg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.61.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.61.1.tgz",
@@ -6424,6 +6746,20 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-multi-date-picker": {
+      "version": "4.5.2",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/react-multi-date-picker/-/react-multi-date-picker-4.5.2.tgz",
+      "integrity": "sha512-FgWjZB3Z6IA6XpcWiLPk85PwcRUhOiYhKK42o5k672gD/n2I6rzPfQ8bUrldOIiF/Z7FfOCdH7a6FeubzqteLg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-date-object": "^2.1.8",
+        "react-element-popper": "^2.1.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-qr-code": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.18.tgz",
@@ -6530,6 +6866,26 @@
         }
       }
     },
+    "node_modules/react-syntax-highlighter": {
+      "version": "16.1.1",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz",
+      "integrity": "sha512-PjVawBGy80C6YbC5DDZJeUjBmC7skaoEUdvfFQediQHgCL7aKyVHe57SaJGfQsloGDac+gCpTfRdtxzWWKmCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.30.0",
+        "refractor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 16.20.2"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -6599,6 +6955,22 @@
         "decimal.js-light": "^2.4.1"
       }
     },
+    "node_modules/refractor": {
+      "version": "5.0.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/refractor/-/refractor-5.0.0.tgz",
+      "integrity": "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -7022,6 +7394,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "license": "MIT"
+    },
     "node_modules/style-to-js": {
       "version": "1.1.18",
       "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.18.tgz",
@@ -7583,6 +7961,12 @@
         "d3-timer": "^3.0.1"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/web-namespaces": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",

package.json

@@ -10,7 +10,14 @@
     "start": "next start --port 3000"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/search": "^6.7.0",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.1",
     "@hookform/resolvers": "^3.10.0",
+    "@lezer/highlight": "^1.2.3",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -51,12 +58,15 @@
     "next": "^15.4.6",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
+    "react-date-object": "^2.1.9",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.61.1",
     "react-markdown": "^9.0.3",
+    "react-multi-date-picker": "^4.5.2",
     "react-qr-code": "^2.0.11",
     "react-resizable-panels": "^2.1.9",
+    "react-syntax-highlighter": "^16.1.1",
     "recharts": "^2.15.4",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -74,6 +84,7 @@
     "@types/node": "^22.16.5",
     "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.32.0",
     "eslint-plugin-react-hooks": "^5.2.0",

src/app/admin/authorizations/page.tsx

@@ -0,0 +1,5 @@
+import AdminAuthorizations from "@/views/AdminAuthorizations";
+
+export default function AdminAuthorizationsPage() {
+  return <AdminAuthorizations />;
+}

src/app/admin/blog/categories/page.tsx

@@ -0,0 +1,5 @@
+import AdminBlogCategories from "@/views/AdminBlogCategories";
+
+export default function AdminBlogCategoriesPage() {
+  return <AdminBlogCategories />;
+}

src/app/admin/blog/tags/page.tsx

@@ -0,0 +1,5 @@
+import AdminBlogTags from "@/views/AdminBlogTags";
+
+export default function AdminBlogTagsPage() {
+  return <AdminBlogTags />;
+}

src/app/admin/coupons/page.tsx

@@ -0,0 +1,5 @@
+import AdminCoupons from "@/views/AdminCoupons";
+
+export default function AdminCouponsRoute() {
+  return <AdminCoupons />;
+}

src/app/admin/dashboard/page.tsx

@@ -0,0 +1,5 @@
+import AdminDashboard from "@/views/AdminDashboard";
+
+export default function AdminDashboardPage() {
+  return <AdminDashboard />;
+}

src/app/admin/events/create/page.tsx

@@ -0,0 +1,5 @@
+import AdminEventForm from "@/views/AdminEventForm";
+
+export default function AdminEventCreateRoute() {
+  return <AdminEventForm mode="create" />;
+}

src/app/admin/majors/page.tsx

@@ -0,0 +1,5 @@
+import AdminMetaOptions from "@/views/AdminMetaOptions";
+
+export default function AdminMajorsRoute() {
+  return <AdminMetaOptions kind="majors" />;
+}

src/app/admin/page.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
 
 export default function AdminPage() {
-  redirect("/admin/users");
+  redirect("/admin/dashboard");
 }

src/app/admin/universities/page.tsx

@@ -0,0 +1,5 @@
+import AdminMetaOptions from "@/views/AdminMetaOptions";
+
+export default function AdminUniversitiesRoute() {
+  return <AdminMetaOptions kind="universities" />;
+}

src/app/blog/[slug]/loading.tsx

@@ -1,5 +1,5 @@
-import { DetailPageLoading } from "@/components/page-loading";
+import { BlogDetailPageLoading } from "@/components/page-loading";
 
 export default function Loading() {
-  return <DetailPageLoading />;
+  return <BlogDetailPageLoading />;
 }

src/app/blog/[slug]/page.tsx

@@ -1,17 +1,23 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import Markdown from "@/components/Markdown";
+import { CalendarDays, Clock3, Hash, ListTree } from "lucide-react";
+import BlogPostActions from "@/components/BlogPostActions";
 import BlogPostInteractions from "@/components/BlogPostInteractions";
+import BlogTableOfContents from "@/components/BlogTableOfContents";
+import BlogThumbnail from "@/components/BlogThumbnail";
+import Markdown from "@/components/Markdown";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import { Link } from "@/lib/router";
-import { PublicApiError, getPublicPost } from "@/lib/public-api";
-import { apiBaseUrl, siteUrl, toAbsoluteUrl } from "@/lib/site";
 import { blogPostPath, blogPostUrl, normalizeBlogSlugParam } from "@/lib/blog-routes";
-import { formatJalali } from "@/lib/utils";
+import { extractMarkdownHeadings } from "@/lib/markdown-headings";
+import { PublicApiError, getPublicPost, getRecommendedPosts } from "@/lib/public-api";
+import { apiBaseUrl, siteUrl, toAbsoluteUrl } from "@/lib/site";
+import type * as Types from "@/lib/types";
+import { formatJalaliDate, getBlogCardImageUrl, getBlogHeroImageUrl, toPersianDigits } from "@/lib/utils";
 
 type Params = Promise<{ slug: string }>;
+type Writer = NonNullable<Types.PostListSchema["writers"]>[number];
 
 export const dynamic = "force-dynamic";
 
@@ -20,6 +26,10 @@ function cleanText(value?: string | null) {
   return value.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
 }
 
+function personName(person: { first_name: string; last_name: string; username: string }) {
+  return [person.first_name, person.last_name].filter(Boolean).join(" ") || person.username;
+}
+
 async function loadPost(slug: string) {
   try {
     return await getPublicPost(slug);
@@ -31,6 +41,121 @@ async function loadPost(slug: string) {
   }
 }
 
+async function loadRecommended(slug: string) {
+  try {
+    return await getRecommendedPosts(slug, 3);
+  } catch {
+    return [];
+  }
+}
+
+function Topics({ tags }: { tags: Types.PostListSchema["tags"] }) {
+  if (!tags.length) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center justify-start gap-2" aria-label="موضوعات نوشته">
+      
+      {tags.map((tag) => (
+        <Link key={tag.id} to={`/blog?tag=${encodeURIComponent(tag.slug)}`}>
+          <Badge variant="outline" className="rounded-full px-3 py-1 transition bg-slate-200 dark:bg-slate-600 hover:border-primary hover:text-primary">
+            <Hash className="h-3 w-3 text-primary" />
+            {tag.name}
+          </Badge>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+function Breadcrumbs({ post }: { post: Types.PostDetailSchema }) {
+  const crumbs = post.category_path || [];
+
+  return (
+    <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground" aria-label="مسیر نوشته">
+      <Link to="/blog" className="transition hover:text-primary">
+        بلاگ
+      </Link>
+      {crumbs.map((category) => (
+        <span key={category.id} className="flex items-center gap-2">
+          <span>/</span>
+          <Link to={`/blog?category=${encodeURIComponent(category.slug)}`} className="transition hover:text-primary">
+            {category.name}
+          </Link>
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+function WriterCards({ post }: { post: Types.PostDetailSchema }) {
+  const writers = post.writers?.length ? post.writers : [post.author];
+
+  return (
+    <section className="mt-8 rounded-[2rem] border border-border/70 bg-card/90 p-5 shadow-sm">
+      {/* <div className="mb-4 text-right">
+        <p className="text-sm font-medium text-primary">نویسندگان</p>
+      </div> */}
+        <h2 className="mb-4 text-2xl font-bold">درباره نویسندگان این مقاله</h2>
+      <div className="grid gap-4 md:grid-cols-2">
+        {writers.map((writer: Writer) => {
+          const image = writer.profile_picture_preview_url || writer.profile_picture_thumbnail_url || writer.profile_picture;
+          return (
+            <Link
+              key={writer.id}
+              to={`/blog?author=${encodeURIComponent(writer.username)}`}
+              className="flex items-start gap-4 rounded-3xl border border-border/70 bg-background/80 p-4 text-right transition hover:-translate-y-0.5 hover:border-primary/50 hover:shadow-lg"
+            >
+              <Avatar className="h-14 w-14">
+                <AvatarImage src={image || undefined} alt={personName(writer)} />
+                <AvatarFallback>{personName(writer)[0] || "ن"}</AvatarFallback>
+              </Avatar>
+              <div className="min-w-0 flex-1">
+                <h3 className="font-bold">{personName(writer)}</h3>
+                <p className="mt-2 line-clamp-4 text-sm leading-7 text-muted-foreground">
+                  {writer.bio || "توضیحی برای این نویسنده ثبت نشده است."}
+                </p>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+function RecommendedPosts({ posts }: { posts: Types.PostListSchema[] }) {
+  if (!posts.length) return null;
+
+  return (
+    <section className="mt-10 rounded-[2rem] border border-border/70 bg-card/90 p-5 shadow-sm">
+        <h2 className="mb-4 text-2xl font-bold">مقالات پیشنهادی</h2>
+      <div className="grid gap-4 md:grid-cols-3">
+        {posts.map((post) => (
+          <Link
+            key={post.id}
+            to={blogPostPath(post.slug)}
+            className="group overflow-hidden rounded-3xl border border-border/70 bg-background transition hover:-translate-y-1 hover:shadow-lg"
+          >
+            <BlogThumbnail
+              post={post}
+              imageUrl={toAbsoluteUrl(getBlogCardImageUrl(post), apiBaseUrl)}
+              className="aspect-[16/10]"
+            />
+            <div className="space-y-2 p-4 text-right">
+              <h3 className="line-clamp-2 font-semibold leading-7 group-hover:text-primary">{post.title}</h3>
+              <time className="text-xs text-muted-foreground" dateTime={post.published_at || post.created_at}>
+                {formatJalaliDate(post.published_at || post.created_at)}
+              </time>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
 export async function generateMetadata({
   params,
 }: {
@@ -43,7 +168,7 @@ export async function generateMetadata({
   const metaDescription = post.seo_description || post.og_description || description;
   const canonical = post.canonical_url || blogPostPath(post.slug);
   const image = toAbsoluteUrl(
-    post.og_image_url || post.absolute_featured_image_url || post.featured_image,
+    post.og_image_url || getBlogHeroImageUrl(post),
     apiBaseUrl,
   ) ?? `${siteUrl}/favicon.ico`;
 
@@ -56,7 +181,7 @@ export async function generateMetadata({
       title: post.og_title || metaTitle,
       description: post.og_description || metaDescription,
       url: blogPostUrl(siteUrl, post.slug),
-      siteName: "انجمن علمی کامپیوتر شرق گیلان",
+      siteName: "انجمن علمی مهندسی کامپیوتر شرق گیلان",
       type: "article",
       images: [image],
       locale: "fa_IR",
@@ -79,92 +204,125 @@ export default async function BlogDetailPage({
 }) {
   const { slug } = await params;
   const post = await loadPost(normalizeBlogSlugParam(slug));
+  const recommendedPosts = await loadRecommended(post.slug);
+  const headings = extractMarkdownHeadings(post.content);
   const description = cleanText(post.excerpt || post.content).slice(0, 160);
   const metaDescription = post.seo_description || post.og_description || description;
-  const image = toAbsoluteUrl(
-    post.og_image_url || post.absolute_featured_image_url || post.featured_image,
-    apiBaseUrl,
-  ) ?? `${siteUrl}/favicon.ico`;
+  const coverImage = toAbsoluteUrl(getBlogHeroImageUrl(post), apiBaseUrl);
+  const seoImage = toAbsoluteUrl(post.og_image_url || getBlogHeroImageUrl(post), apiBaseUrl) ?? `${siteUrl}/favicon.ico`;
+  const writers = post.writers?.length ? post.writers : [post.author];
 
   const structuredData = {
     "@context": "https://schema.org",
     "@type": "BlogPosting",
     headline: post.title,
     description: metaDescription,
-    image: [image],
+    image: [seoImage],
     datePublished: post.published_at || post.created_at,
     dateModified: post.updated_at,
     url: blogPostUrl(siteUrl, post.slug),
-    author: {
+    author: writers.map((writer) => ({
       "@type": "Person",
-      name: [post.author.first_name, post.author.last_name].filter(Boolean).join(" ") || post.author.username,
-    },
+      name: personName(writer),
+    })),
     publisher: {
       "@type": "Organization",
-      name: "انجمن علمی کامپیوتر شرق گیلان",
+      name: "انجمن علمی مهندسی کامپیوتر شرق گیلان",
       logo: {
         "@type": "ImageObject",
         url: `${siteUrl}/favicon.ico`,
       },
     },
+    keywords: post.tags.map((tag) => tag.name).join(", "),
   };
 
   return (
-    <div className="min-h-screen bg-background" dir="rtl">
+    <div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.28))]" dir="rtl">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
       />
       <div className="container mx-auto px-4 py-8">
-        <div className="mb-6 flex items-center justify-between gap-3">
-          <Button variant="outline" asChild>
-            <Link to="/blog">بازگشت به وبلاگ</Link>
-          </Button>
-          <div className="text-sm text-muted-foreground">
-            {formatJalali(post.published_at || post.created_at, false)}
-          </div>
-        </div>
+        <div className="gap-8 xl:flex xl:items-start">
+          <aside className="sticky top-24 max-h-[calc(100vh-7rem)] space-y-4 overflow-y-auto pr-1 hidden w-72 shrink-0 xl:block">
+            <section className="rounded-[1.75rem] border border-border/70 bg-card/90 p-4 shadow-sm backdrop-blur">
+              <h2 className="mb-3 flex items-center justify-start gap-2 text-right font-bold">
+                <ListTree className="h-4 w-4 text-primary" />
+                فهرست محتوا
+              </h2>
+              <BlogTableOfContents headings={headings} />
+            </section>
+          </aside>
 
-        <Card>
-          {image && (
-            <div className="w-full aspect-video overflow-hidden rounded-t-lg bg-muted">
-              <img
-                src={image}
-                alt={post.title}
-                className="h-full w-full object-cover"
-                loading="eager"
-              />
-            </div>
-          )}
-          <CardHeader>
-            <div className="flex flex-wrap gap-2">
-              {post.category?.name ? <Badge variant="secondary">{post.category.name}</Badge> : null}
-              {post.tags.map((tag) => (
-                <Badge key={tag.id} variant="outline">
-                  {tag.name}
-                </Badge>
-              ))}
-            </div>
-            <CardTitle className="text-3xl leading-relaxed">{post.title}</CardTitle>
-            <CardDescription className="text-sm">
-              نویسنده: {[post.author.first_name, post.author.last_name].filter(Boolean).join(" ") || post.author.username}
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            {post.excerpt ? (
-              <p className="rounded-lg border bg-muted/30 p-4 text-sm leading-7 text-muted-foreground">
-                {post.excerpt}
-              </p>
-            ) : null}
-            <Markdown content={post.content} justify size="base" />
-          </CardContent>
-        </Card>
-        <BlogPostInteractions
-          slug={post.slug}
-          initialLikes={post.likes_count ?? 0}
-          initialSaves={post.saves_count ?? 0}
-          initialComments={post.comments_count ?? 0}
-        />
+          <main className="min-w-0 flex-1">
+            <article className="overflow-hidden rounded-[2.5rem] border border-border/70 bg-card/95">
+              <header className="space-y-6 p-5 text-right md:p-8">
+                <Breadcrumbs post={post} />
+                <div className="space-y-4">
+                  <h1 className="text-3xl font-black leading-[1.35] tracking-tight md:text-5xl md:leading-[1.45]">
+                    {post.title}
+                  </h1>
+                  {post.excerpt ? (
+                    <p className="text-base leading-8 text-muted-foreground md:text-lg">
+                      {post.excerpt}
+                    </p>
+                  ) : null}
+                </div>
+                <div className="flex flex-wrap gap-3 text-sm text-muted-foreground">
+                  <span className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1">
+                    <Clock3 className="h-4 w-4 text-primary" />
+                    {toPersianDigits(post.reading_time ?? 1)} دقیقه مطالعه
+                  </span>
+                  <time
+                    className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1"
+                    dateTime={post.published_at || post.created_at}
+                  >
+                    <CalendarDays className="h-4 w-4 text-primary" />
+                    {formatJalaliDate(post.published_at || post.created_at)}
+                  </time>
+                </div>
+              </header>
+
+              <div className="px-5 md:px-8">
+                <BlogThumbnail
+                  post={post}
+                  imageUrl={coverImage}
+                  className="aspect-[16/9] rounded-[2rem]"
+                  priority
+                />
+              </div>
+
+              <div className="space-y-5 p-5 md:p-8 xl:hidden">
+                <section className="rounded-[1.5rem] border border-border/70 bg-muted/20 p-4">
+                  <h2 className="mb-3 flex items-center justify-start gap-2 text-right font-bold">
+                    <ListTree className="h-4 w-4 text-primary" />
+                    فهرست محتوا
+                  </h2>
+                  <BlogTableOfContents headings={headings} />
+                </section>
+              </div>
+
+              <div className="space-y-8 px-5 pb-8 pt-6 md:px-8 md:pb-10">
+                <Markdown content={post.content} justify size="base" className="mx-auto max-w-4xl" />
+                <div className="mx-auto max-w-4xl">
+                  <Topics tags={post.tags} />
+                </div>
+                <BlogPostActions
+                  slug={post.slug}
+                  initialLikes={post.likes_count ?? 0}
+                  initialSaves={post.saves_count ?? 0}
+                />
+              </div>
+            </article>
+
+            <WriterCards post={post} />
+            <RecommendedPosts posts={recommendedPosts} />
+            <BlogPostInteractions
+              slug={post.slug}
+              initialComments={post.comments_count ?? 0}
+            />
+          </main>
+        </div>
       </div>
     </div>
   );

src/app/blog/loading.tsx

@@ -1,5 +1,5 @@
-import { ListingPageLoading } from "@/components/page-loading";
+import { BlogListingPageLoading } from "@/components/page-loading";
 
 export default function Loading() {
-  return <ListingPageLoading />;
+  return <BlogListingPageLoading />;
 }

src/app/blog/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Blog from "@/views/Blog";
-import { getPublicPosts } from "@/lib/public-api";
+import { getBlogBanners, getBlogFilters, getPublicPosts } from "@/lib/public-api";
 import { siteUrl } from "@/lib/site";
 
 type SearchParams = Promise<Record<string, string | string[] | undefined>>;
@@ -9,6 +9,11 @@ function firstString(value?: string | string[]) {
   return Array.isArray(value) ? (value[0] ?? "") : (value ?? "");
 }
 
+function stringList(value?: string | string[]) {
+  const values = Array.isArray(value) ? value : value ? [value] : [];
+  return values.flatMap((item) => item.split(",")).map((item) => item.trim()).filter(Boolean);
+}
+
 export async function generateMetadata({
   searchParams,
 }: {
@@ -45,7 +50,24 @@ export default async function BlogPage({
 }) {
   const resolved = await searchParams;
   const search = firstString(resolved.search).trim();
-  const posts = await getPublicPosts({ search: search || undefined });
+  const category = firstString(resolved.category).trim();
+  const tags = stringList(resolved.tag);
+  const authors = stringList(resolved.author);
+  const [posts, banners, filters] = await Promise.all([
+    getPublicPosts({ search: search || undefined, category: category || undefined, tag: tags, author: authors }),
+    getBlogBanners().catch(() => []),
+    getBlogFilters().catch(() => ({ categories: [], tags: [], authors: [] })),
+  ]);
 
-  return <Blog initialPosts={posts} initialSearch={search} />;
+  return (
+    <Blog
+      initialPosts={posts}
+      initialSearch={search}
+      initialCategory={category}
+      initialTags={tags}
+      initialAuthors={authors}
+      banners={banners}
+      filters={filters}
+    />
+  );
 }

src/components/AdminDateTimeField.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+import DateObject from "react-date-object";
+import persian from "react-date-object/calendars/persian";
+import persian_fa from "react-date-object/locales/persian_fa";
+import DatePicker from "react-multi-date-picker";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type AdminDateTimeFieldProps = {
+  label: string;
+  value?: string | null;
+  onChange: (value: string | null) => void;
+  required?: boolean;
+  disabled?: boolean;
+};
+
+function splitDateTime(value?: string | null) {
+  if (!value) {
+    return { date: null as DateObject | null, time: "" };
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return { date: null, time: "" };
+  }
+  return {
+    date: new DateObject({ date, calendar: persian, locale: persian_fa }),
+    time: `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`,
+  };
+}
+
+function combineDateTime(date: DateObject | null, time: string) {
+  if (!date || !time || !/^\d{2}:\d{2}$/.test(time)) return null;
+  const gregorian = date.toDate();
+  const [hours, minutes] = time.split(":").map(Number);
+  gregorian.setHours(hours, minutes, 0, 0);
+  return gregorian.toISOString();
+}
+
+export default function AdminDateTimeField({
+  label,
+  value,
+  onChange,
+  required,
+  disabled,
+}: AdminDateTimeFieldProps) {
+  const initial = React.useMemo(() => splitDateTime(value), [value]);
+  const [date, setDate] = React.useState<DateObject | null>(initial.date);
+  const [time, setTime] = React.useState(initial.time);
+
+  React.useEffect(() => {
+    setDate(initial.date);
+    setTime(initial.time);
+  }, [initial.date, initial.time]);
+
+  const emitChange = (nextDate: DateObject | null, nextTime: string) => {
+    onChange(combineDateTime(nextDate, nextTime));
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label>
+        {label}
+        {required ? <span className="text-destructive"> *</span> : null}
+      </Label>
+      <div className="grid gap-2 sm:grid-cols-[1fr_120px]">
+        <DatePicker
+          value={date}
+          onChange={(next) => {
+            const nextDate = next instanceof DateObject ? next : null;
+            setDate(nextDate);
+            emitChange(nextDate, time);
+          }}
+          calendar={persian}
+          locale={persian_fa}
+          calendarPosition="bottom-right"
+          disabled={disabled}
+          inputClass="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-right ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          placeholder="تاریخ"
+          containerClassName="w-full"
+        />
+        <Input
+          dir="ltr"
+          type="time"
+          value={time}
+          disabled={disabled}
+          onChange={(event) => {
+            setTime(event.target.value);
+            emitChange(date, event.target.value);
+          }}
+        />
+      </div>
+    </div>
+  );
+}

src/components/AsyncSearchableCombobox.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export type AsyncComboboxOption = {
+  value: string;
+  label: string;
+  description?: string;
+};
+
+type AsyncSearchableComboboxProps = {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+  loadOptions: (params: { search: string; limit: number; offset: number }) => Promise<{
+    count: number;
+    results: AsyncComboboxOption[];
+  }>;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  disabled?: boolean;
+  allowClear?: boolean;
+  pageSize?: number;
+  className?: string;
+};
+
+export default function AsyncSearchableCombobox({
+  value,
+  onChange,
+  loadOptions,
+  placeholder = "انتخاب کنید",
+  searchPlaceholder = "جستجو...",
+  emptyText = "موردی پیدا نشد.",
+  disabled = false,
+  allowClear = true,
+  pageSize = 20,
+  className,
+}: AsyncSearchableComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React.useState("");
+  const [options, setOptions] = React.useState<AsyncComboboxOption[]>([]);
+  const [count, setCount] = React.useState(0);
+  const [loading, setLoading] = React.useState(false);
+  const [loadingMore, setLoadingMore] = React.useState(false);
+
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedSearch(search.trim()), 300);
+    return () => window.clearTimeout(timer);
+  }, [search]);
+
+  const selected = React.useMemo(
+    () => options.find((option) => option.value === value),
+    [options, value],
+  );
+
+  const fetchPage = React.useCallback(
+    async (offset: number, append = false) => {
+      if (append) setLoadingMore(true);
+      else setLoading(true);
+      try {
+        const data = await loadOptions({ search: debouncedSearch, limit: pageSize, offset });
+        setCount(data.count);
+        setOptions((current) => {
+          const next = append ? [...current, ...data.results] : data.results;
+          const byValue = new Map(next.map((option) => [option.value, option]));
+          return Array.from(byValue.values());
+        });
+      } finally {
+        setLoading(false);
+        setLoadingMore(false);
+      }
+    },
+    [debouncedSearch, loadOptions, pageSize],
+  );
+
+  React.useEffect(() => {
+    if (!open) return;
+    void fetchPage(0);
+  }, [fetchPage, open]);
+
+  const hasMore = options.length < count;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn("w-full justify-between gap-2", className)}
+        >
+          <span className="truncate text-right">{selected?.label || value || placeholder}</span>
+          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start" dir="rtl">
+        <Command shouldFilter={false}>
+          <CommandInput value={search} onValueChange={setSearch} placeholder={searchPlaceholder} />
+          <CommandList>
+            {loading ? (
+              <div className="flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                در حال جستجو...
+              </div>
+            ) : (
+              <>
+                <CommandEmpty>{emptyText}</CommandEmpty>
+                <CommandGroup>
+                  {allowClear ? (
+                    <CommandItem
+                      value="__clear"
+                      onSelect={() => {
+                        onChange(null);
+                        setOpen(false);
+                      }}
+                    >
+                      <Check className={cn("ml-2 h-4 w-4", !value ? "opacity-100" : "opacity-0")} />
+                      همه موارد
+                    </CommandItem>
+                  ) : null}
+                  {options.map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.value}
+                      onSelect={() => {
+                        onChange(option.value === value ? null : option.value);
+                        setOpen(false);
+                      }}
+                      className="flex items-center justify-between gap-2"
+                    >
+                      <span className="min-w-0 flex-1 text-right">
+                        <span className="block truncate">{option.label}</span>
+                        {option.description ? (
+                          <span className="block truncate text-xs text-muted-foreground">{option.description}</span>
+                        ) : null}
+                      </span>
+                      <Check className={cn("h-4 w-4", value === option.value ? "opacity-100" : "opacity-0")} />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+                {hasMore ? (
+                  <div className="p-2">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="w-full"
+                      disabled={loadingMore}
+                      onClick={() => void fetchPage(options.length, true)}
+                    >
+                      {loadingMore ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : null}
+                      بارگذاری بیشتر
+                    </Button>
+                  </div>
+                ) : null}
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

src/components/BlogPostActions.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Bookmark, Heart, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/contexts/AuthContext";
+import { api } from "@/lib/api";
+import type * as Types from "@/lib/types";
+import { cn, toPersianDigits } from "@/lib/utils";
+
+type BlogPostActionsProps = {
+  slug: string;
+  initialLikes: number;
+  initialSaves: number;
+};
+
+export default function BlogPostActions({
+  slug,
+  initialLikes,
+  initialSaves,
+}: BlogPostActionsProps) {
+  const { isAuthenticated } = useAuth();
+  const [loadingAction, setLoadingAction] = useState<"like" | "save" | null>(null);
+  const [interaction, setInteraction] = useState<Types.BlogInteractionSchema>({
+    liked: false,
+    saved: false,
+    likes_count: initialLikes,
+    saves_count: initialSaves,
+    comments_count: 0,
+  });
+
+  useEffect(() => {
+    let mounted = true;
+    if (!isAuthenticated) return;
+
+    api.getBlogInteraction(slug)
+      .then((data) => {
+        if (mounted) setInteraction(data);
+      })
+      .catch(() => undefined);
+
+    return () => {
+      mounted = false;
+    };
+  }, [isAuthenticated, slug]);
+
+  const toggleLike = async () => {
+    if (!isAuthenticated || loadingAction) return;
+    setLoadingAction("like");
+    try {
+      setInteraction(await api.toggleLike(slug));
+    } finally {
+      setLoadingAction(null);
+    }
+  };
+
+  const toggleSave = async () => {
+    if (!isAuthenticated || loadingAction) return;
+    setLoadingAction("save");
+    try {
+      setInteraction(await api.toggleSave(slug));
+    } finally {
+      setLoadingAction(null);
+    }
+  };
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-3 border-t border-border/70 pt-6" dir="rtl">
+      <Button
+        type="button"
+        variant="ghost"
+        size="lg"
+        onClick={toggleLike}
+        disabled={!isAuthenticated || Boolean(loadingAction)}
+        className="gap-2 rounded-full border border-border/60 bg-background/80 px-5 shadow-sm backdrop-blur hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/30"
+        aria-label="پسندیدن نوشته"
+      >
+        {loadingAction === "like" ? (
+          <Loader2 className="h-5 w-5 animate-spin" />
+        ) : (
+          <Heart
+            className={cn(
+              "h-5 w-5",
+              interaction.liked && "fill-rose-500 text-rose-500",
+            )}
+          />
+        )}
+        <span>{toPersianDigits(interaction.likes_count)}</span>
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        onClick={toggleSave}
+        disabled={!isAuthenticated || Boolean(loadingAction)}
+        className="rounded-full border border-border/60 bg-background/80 shadow-sm backdrop-blur hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-950/30"
+        aria-label="ذخیره نوشته"
+      >
+        {loadingAction === "save" ? (
+          <Loader2 className="h-5 w-5 animate-spin" />
+        ) : (
+          <Bookmark
+            className={cn(
+              "h-5 w-5",
+              interaction.saved && "fill-amber-500 text-amber-500",
+            )}
+          />
+        )}
+      </Button>
+      {!isAuthenticated ? (
+        <span className="basis-full text-center text-xs text-muted-foreground">
+          برای پسندیدن یا ذخیره کردن وارد حساب کاربری شوید.
+        </span>
+      ) : null}
+    </div>
+  );
+}

src/components/BlogPostInteractions.tsx

@@ -1,77 +1,131 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
-import { Bookmark, Heart, Loader2, MessageSquare, Send, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Check,
+  Edit3,
+  Eye,
+  EyeOff,
+  Loader2,
+  MessageSquare,
+  Reply,
+  Send,
+  Trash2,
+  X,
+} from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
 import { api } from "@/lib/api";
 import type * as Types from "@/lib/types";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
 import { Link } from "@/lib/router";
-import { formatJalali, resolveErrorMessage } from "@/lib/utils";
+import { cn, formatJalaliDate, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
 import { useToast } from "@/hooks/use-toast";
 
 type Props = {
   slug: string;
-  initialLikes: number;
-  initialSaves: number;
   initialComments: number;
 };
 
+type FlattenedReply = {
+  comment: Types.CommentSchema;
+  replyTo: Types.CommentSchema;
+};
+
 function displayName(author: Types.CommentSchema["author"]) {
   return [author.first_name, author.last_name].filter(Boolean).join(" ") || author.username;
 }
 
+function avatarInitial(author: Types.CommentSchema["author"]) {
+  return displayName(author).trim()[0] || "ک";
+}
+
+function visibleCommentCount(comments: Types.CommentSchema[]) {
+  return comments.reduce((total, comment) => {
+    if (comment.is_deleted || comment.is_hidden) return total;
+    return total + 1 + visibleCommentCount(comment.replies || []);
+  }, 0);
+}
+
+function allDescendants(comment: Types.CommentSchema): Types.CommentSchema[] {
+  return (comment.replies || []).flatMap((reply) => [reply, ...allDescendants(reply)]);
+}
+
+function flattenReplies(comment: Types.CommentSchema): FlattenedReply[] {
+  const replies: FlattenedReply[] = [];
+
+  const walk = (items: Types.CommentSchema[] | undefined, parent: Types.CommentSchema) => {
+    (items || []).forEach((reply) => {
+      replies.push({ comment: reply, replyTo: parent });
+      walk(reply.replies, reply);
+    });
+  };
+
+  walk(comment.replies, comment);
+  return replies;
+}
+
+function findComment(comments: Types.CommentSchema[], id: number | null): Types.CommentSchema | undefined {
+  if (!id) return undefined;
+  for (const comment of comments) {
+    if (comment.id === id) return comment;
+    const reply = findComment(comment.replies || [], id);
+    if (reply) return reply;
+  }
+  return undefined;
+}
+
 export default function BlogPostInteractions({
   slug,
-  initialLikes,
-  initialSaves,
   initialComments,
 }: Props) {
   const { user, isAuthenticated } = useAuth();
   const { toast } = useToast();
   const [comments, setComments] = useState<Types.CommentSchema[]>([]);
-  const [interaction, setInteraction] = useState<Types.BlogInteractionSchema>({
-    liked: false,
-    saved: false,
-    likes_count: initialLikes,
-    saves_count: initialSaves,
-    comments_count: initialComments,
-  });
+  const [commentCount, setCommentCount] = useState(initialComments);
   const [content, setContent] = useState("");
   const [replyTo, setReplyTo] = useState<number | null>(null);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editContent, setEditContent] = useState("");
+  const [deleteTarget, setDeleteTarget] = useState<Types.CommentSchema | null>(null);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
+  const [savingEdit, setSavingEdit] = useState(false);
+  const [moderatingId, setModeratingId] = useState<number | null>(null);
+  const [highlightedCommentId, setHighlightedCommentId] = useState<number | null>(null);
+  const highlightTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const canModerate = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
 
   const replyTarget = useMemo(
-    () => comments.find((comment) => comment.id === replyTo),
+    () => findComment(comments, replyTo),
     [comments, replyTo],
   );
 
   const loadComments = async () => {
     const data = await api.getComments(slug);
     setComments(data);
-    setInteraction((prev) => ({ ...prev, comments_count: data.length }));
+    setCommentCount(visibleCommentCount(data));
   };
 
   useEffect(() => {
     let mounted = true;
-    Promise.all([
-      api.getComments(slug),
-      isAuthenticated ? api.getBlogInteraction(slug).catch(() => null) : Promise.resolve(null),
-    ])
-      .then(([commentData, interactionData]) => {
+    api.getComments(slug)
+      .then((data) => {
         if (!mounted) return;
-        setComments(commentData);
-        if (interactionData) {
-          setInteraction(interactionData);
-        } else {
-          setInteraction((prev) => ({ ...prev, comments_count: commentData.length }));
-        }
+        setComments(data);
+        setCommentCount(visibleCommentCount(data));
       })
       .finally(() => {
         if (mounted) setLoading(false);
@@ -79,16 +133,28 @@ export default function BlogPostInteractions({
     return () => {
       mounted = false;
     };
-  }, [isAuthenticated, slug]);
+  }, [slug]);
 
-  const toggleLike = async () => {
-    if (!isAuthenticated) return;
-    setInteraction(await api.toggleLike(slug));
-  };
+  useEffect(() => () => {
+    if (highlightTimeoutRef.current) {
+      clearTimeout(highlightTimeoutRef.current);
+    }
+  }, []);
 
-  const toggleSave = async () => {
-    if (!isAuthenticated) return;
-    setInteraction(await api.toggleSave(slug));
+  const scrollToComment = (commentId: number) => {
+    const element = document.getElementById(`blog-comment-${commentId}`);
+    if (!element) return;
+
+    if (highlightTimeoutRef.current) {
+      clearTimeout(highlightTimeoutRef.current);
+    }
+
+    element.scrollIntoView({ behavior: "smooth", block: "center" });
+    setHighlightedCommentId(commentId);
+    highlightTimeoutRef.current = setTimeout(() => {
+      setHighlightedCommentId(null);
+      highlightTimeoutRef.current = null;
+    }, 1800);
   };
 
   const submitComment = async () => {
@@ -100,10 +166,10 @@ export default function BlogPostInteractions({
       setContent("");
       setReplyTo(null);
       await loadComments();
-      toast({ title: "نظر ثبت شد", variant: "success" });
+      toast({ title: "کامنت ثبت شد", variant: "success" });
     } catch (error) {
       toast({
-        title: "ثبت نظر ناموفق بود",
+        title: "ثبت کامنت ناموفق بود",
         description: resolveErrorMessage(error, "دوباره تلاش کنید"),
         variant: "destructive",
       });
@@ -114,129 +180,328 @@ export default function BlogPostInteractions({
 
   const hideComment = async (commentId: number) => {
     try {
+      setModeratingId(commentId);
       await api.hideComment(commentId);
       await loadComments();
-      toast({ title: "نظر مخفی شد", variant: "success" });
+      toast({ title: "کامنت مخفی شد", variant: "success" });
     } catch (error) {
       toast({
-        title: "حذف نظر ناموفق بود",
+        title: "مخفی کردن کامنت ناموفق بود",
         description: resolveErrorMessage(error, "دوباره تلاش کنید"),
         variant: "destructive",
       });
+    } finally {
+      setModeratingId(null);
     }
   };
 
-  const renderComment = (comment: Types.CommentSchema, nested = false) => (
-    <div key={comment.id} className={nested ? "mr-6 border-r pr-4" : ""}>
-      <div className="rounded-2xl border border-border/70 bg-background/80 p-4 text-right">
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="flex items-center gap-2">
-            {canModerate ? (
-              <Button variant="ghost" size="sm" onClick={() => hideComment(comment.id)}>
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            ) : null}
-            {isAuthenticated ? (
-              <Button variant="ghost" size="sm" onClick={() => setReplyTo(comment.id)}>
-                پاسخ
-              </Button>
-            ) : null}
-          </div>
-          <div>
-            <p className="font-medium">{displayName(comment.author)}</p>
-            <p className="text-xs text-muted-foreground">{formatJalali(comment.created_at, false)}</p>
-          </div>
-        </div>
-        <p className="mt-3 whitespace-pre-wrap leading-7 text-sm">{comment.content}</p>
-      </div>
-      {comment.replies?.length ? (
-        <div className="mt-3 space-y-3">
-          {comment.replies.map((reply) => renderComment(reply, true))}
-        </div>
-      ) : null}
-    </div>
-  );
+  const unhideComment = async (commentId: number) => {
+    try {
+      setModeratingId(commentId);
+      await api.unhideComment(commentId);
+      await loadComments();
+      toast({ title: "کامنت دوباره نمایش داده شد", variant: "success" });
+    } catch (error) {
+      toast({
+        title: "نمایش دوباره کامنت ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setModeratingId(null);
+    }
+  };
 
-  return (
-    <Card className="mt-8 rounded-[1.75rem] border border-border/70 shadow-sm" dir="rtl">
-      <CardHeader className="text-right">
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div className="flex items-center gap-2">
-            <Button
-              variant={interaction.saved ? "default" : "outline"}
-              onClick={toggleSave}
-              disabled={!isAuthenticated}
-            >
-              <Bookmark className="ml-2 h-4 w-4" />
-              ذخیره
-              <Badge className="mr-2" variant="secondary">{interaction.saves_count}</Badge>
-            </Button>
-            <Button
-              variant={interaction.liked ? "default" : "outline"}
-              onClick={toggleLike}
-              disabled={!isAuthenticated}
-            >
-              <Heart className="ml-2 h-4 w-4" />
-              پسندیدن
-              <Badge className="mr-2" variant="secondary">{interaction.likes_count}</Badge>
-            </Button>
+  const deleteComment = async () => {
+    if (!deleteTarget) return;
+    try {
+      setModeratingId(deleteTarget.id);
+      await api.deleteComment(deleteTarget.id);
+      setDeleteTarget(null);
+      await loadComments();
+      toast({ title: "کامنت حذف شد", variant: "success" });
+    } catch (error) {
+      toast({
+        title: "حذف کامنت ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setModeratingId(null);
+    }
+  };
+
+  const startEdit = (comment: Types.CommentSchema) => {
+    setEditingId(comment.id);
+    setEditContent(comment.content);
+    setReplyTo(null);
+  };
+
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditContent("");
+  };
+
+  const saveEdit = async () => {
+    const trimmed = editContent.trim();
+    if (!editingId || !trimmed) return;
+    try {
+      setSavingEdit(true);
+      await api.updateComment(editingId, { content: trimmed });
+      await loadComments();
+      cancelEdit();
+      toast({ title: "کامنت ویرایش شد", variant: "success" });
+    } catch (error) {
+      toast({
+        title: "ویرایش کامنت ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setSavingEdit(false);
+    }
+  };
+
+  const renderComment = (
+    comment: Types.CommentSchema,
+    options: {
+      parentHidden?: boolean;
+      replyToComment?: Types.CommentSchema;
+      topLevelParent?: Types.CommentSchema;
+    } = {},
+  ) => {
+    const isOwnComment = Boolean(user?.id === comment.author.id);
+    const isEditing = editingId === comment.id;
+    const { parentHidden = false, replyToComment, topLevelParent } = options;
+    const hidden = parentHidden || Boolean(comment.is_hidden);
+    const isReply = Boolean(replyToComment);
+    const flattenedReplies = isReply ? [] : flattenReplies(comment);
+    const showReplyContext = Boolean(
+      replyToComment && topLevelParent && replyToComment.id !== topLevelParent.id,
+    );
+
+    return (
+      <div
+        id={`blog-comment-${comment.id}`}
+        key={comment.id}
+        className={cn(
+          "relative scroll-mt-28 rounded-3xl border p-4 shadow-sm transition-colors duration-300 border-border/70 bg-muted/20",
+          hidden && "border-amber-400/40 bg-amber-50/50 dark:bg-amber-950/20",
+          highlightedCommentId === comment.id && "border-primary bg-primary/10 shadow-lg shadow-primary/20 ring-2 ring-primary/30",
+        )}
+      >
+        <div className={cn("flex items-start gap-3 text-right", hidden && "opacity-75")}>
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/12 text-base font-black text-primary shadow-inner">
+            {avatarInitial(comment.author)}
           </div>
-          <div>
-            <CardTitle className="flex items-center justify-end gap-2">
-              دیدگاه‌ها
-              <MessageSquare className="h-5 w-5 text-primary" />
-            </CardTitle>
-            <CardDescription className="mt-2">
-              {interaction.comments_count} نظر برای این نوشته ثبت شده است.
-            </CardDescription>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-5">
-        {!isAuthenticated ? (
-          <div className="rounded-2xl border border-dashed border-border/70 bg-muted/20 p-5 text-center text-sm text-muted-foreground">
-            برای پسندیدن، ذخیره‌کردن یا ثبت نظر باید وارد حساب شوید.
-            <Button asChild className="mr-3" size="sm">
-              <Link to="/auth">ورود / ثبت‌نام</Link>
-            </Button>
-          </div>
-        ) : (
-          <div className="rounded-2xl border border-border/70 bg-muted/20 p-4">
-            {replyTarget ? (
-              <div className="mb-3 flex items-center justify-between rounded-xl bg-background px-3 py-2 text-sm">
-                <Button variant="ghost" size="sm" onClick={() => setReplyTo(null)}>
-                  لغو پاسخ
-                </Button>
-                <span>پاسخ به {displayName(replyTarget.author)}</span>
+          <div className="min-w-0 flex-1">
+            <div className="mb-2 flex flex-wrap items-center justify-start gap-2 text-sm">
+              <span className="font-semibold">{displayName(comment.author)}</span>
+              <time className="text-xs text-muted-foreground" dateTime={comment.created_at}>
+                {formatJalaliDate(comment.created_at)}
+              </time>
+              {showReplyContext && replyToComment ? (
+                <button
+                  type="button"
+                  className="rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary transition hover:bg-primary/20 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                  onClick={() => scrollToComment(replyToComment.id)}
+                >
+                  در پاسخ به {displayName(replyToComment.author)}
+                </button>
+              ) : null}
+              {hidden ? (
+                <span className="rounded-full bg-amber-500/10 px-2 py-0.5 text-xs text-amber-600 dark:text-amber-300">
+                  مخفی شده
+                </span>
+              ) : null}
+            </div>
+            <div>
+              {isEditing ? (
+                <div className="space-y-3">
+                  <Textarea
+                    value={editContent}
+                    onChange={(event) => setEditContent(event.target.value)}
+                    className="min-h-24 rounded-2xl bg-background text-right"
+                  />
+                  <div className="flex flex-wrap justify-start gap-2">
+                    <Button type="button" size="sm" variant="ghost" className="gap-1 rounded-full" onClick={cancelEdit}>
+                      <X className="h-3.5 w-3.5" />
+                      لغو
+                    </Button>
+                    <Button type="button" size="sm" className="gap-1 rounded-full" onClick={saveEdit} disabled={savingEdit || !editContent.trim()}>
+                      {savingEdit ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Check className="h-3.5 w-3.5" />}
+                      ذخیره
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <p className="whitespace-pre-wrap text-sm leading-7">{comment.content}</p>
+              )}
+            </div>
+            {!isEditing ? (
+              <div className="mt-2 flex flex-wrap items-center justify-start gap-2 text-xs text-muted-foreground">
+                {isAuthenticated && !hidden ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 gap-1 rounded-full px-3 text-xs"
+                    onClick={() => setReplyTo(comment.id)}
+                  >
+                    <Reply className="h-3.5 w-3.5" />
+                    پاسخ
+                  </Button>
+                ) : null}
+                {isOwnComment && !hidden ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 gap-1 rounded-full px-3 text-xs"
+                    onClick={() => startEdit(comment)}
+                  >
+                    <Edit3 className="h-3.5 w-3.5" />
+                    ویرایش
+                  </Button>
+                ) : null}
+                {canModerate ? (
+                  <>
+                    {hidden ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 gap-1 rounded-full px-3 text-xs text-primary"
+                        onClick={() => unhideComment(comment.id)}
+                        disabled={moderatingId === comment.id}
+                      >
+                        {moderatingId === comment.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Eye className="h-3.5 w-3.5" />}
+                        نمایش مجدد
+                      </Button>
+                    ) : (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 gap-1 rounded-full px-3 text-xs"
+                        onClick={() => hideComment(comment.id)}
+                        disabled={moderatingId === comment.id}
+                      >
+                        {moderatingId === comment.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <EyeOff className="h-3.5 w-3.5" />}
+                        مخفی کردن
+                      </Button>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 gap-1 rounded-full px-3 text-xs text-destructive hover:text-destructive"
+                      onClick={() => setDeleteTarget(comment)}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                      حذف
+                    </Button>
+                  </>
+                ) : null}
               </div>
             ) : null}
-            <Textarea
-              value={content}
-              onChange={(event) => setContent(event.target.value)}
-              placeholder="نظر خود را بنویسید..."
-              className="min-h-28 text-right"
-            />
-            <div className="mt-3 flex justify-end">
-              <Button onClick={submitComment} disabled={submitting || !content.trim()}>
-                {submitting ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : <Send className="ml-2 h-4 w-4" />}
-                ثبت نظر
+          </div>
+        </div>
+        {flattenedReplies.length ? (
+          <div className="mt-4 space-y-3 border-r border-primary/15 pr-4">
+            {flattenedReplies.map(({ comment: reply, replyTo }) => (
+              renderComment(reply, {
+                parentHidden: hidden,
+                replyToComment: replyTo,
+                topLevelParent: comment,
+              })
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
+  const deleteReplyCount = deleteTarget ? allDescendants(deleteTarget).length : 0;
+
+  return (
+    <>
+      <Card className="mt-10 overflow-hidden rounded-[2rem] border border-border/70 bg-card/90 shadow-sm" dir="rtl">
+        <CardHeader className="border-b border-border/60 bg-muted/20 text-right">
+          <CardTitle className="flex items-center justify-start gap-2 text-2xl">
+            <MessageSquare className="h-5 w-5 text-primary" />
+            کامنت‌ها
+          </CardTitle>
+          <CardDescription>
+            {toPersianDigits(commentCount)} کامنت برای این نوشته ثبت شده است.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6 p-4 md:p-6">
+          {!isAuthenticated ? (
+            <div className="rounded-3xl border border-dashed border-border/70 bg-muted/20 p-5 text-center text-sm leading-7 text-muted-foreground">
+              برای ثبت کامنت باید وارد حساب کاربری شوید.
+              <Button asChild className="mr-3" size="sm">
+                <Link to="/auth">ورود / ثبت‌نام</Link>
               </Button>
             </div>
-          </div>
-        )}
+          ) : (
+            <div className="rounded-3xl border border-border/70 bg-muted/20 p-4">
+              {replyTarget ? (
+                <div className="mb-3 flex items-center justify-between rounded-2xl bg-background px-3 py-2 text-sm">
+                  <Button variant="ghost" size="sm" onClick={() => setReplyTo(null)}>
+                    لغو پاسخ
+                  </Button>
+                  <span>پاسخ به {displayName(replyTarget.author)}</span>
+                </div>
+              ) : null}
+              <Textarea
+                value={content}
+                onChange={(event) => setContent(event.target.value)}
+                placeholder="کامنت خود را بنویسید..."
+                className="min-h-32 rounded-2xl bg-background text-right"
+              />
+              <div className="mt-3 flex justify-start">
+                <Button onClick={submitComment} disabled={submitting || !content.trim()} className="gap-2 rounded-full">
+                  {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+                  ثبت کامنت
+                </Button>
+              </div>
+            </div>
+          )}
 
-        {loading ? (
-          <div className="flex justify-center py-8 text-muted-foreground">
-            <Loader2 className="h-5 w-5 animate-spin" />
-          </div>
-        ) : comments.length ? (
-          <div className="space-y-4">{comments.map((comment) => renderComment(comment))}</div>
-        ) : (
-          <div className="rounded-2xl border border-dashed border-border/70 p-8 text-center text-sm text-muted-foreground">
-            هنوز نظری ثبت نشده است.
-          </div>
-        )}
-      </CardContent>
-    </Card>
+          {loading ? (
+            <div className="flex justify-center py-8 text-muted-foreground">
+              <Loader2 className="h-5 w-5 animate-spin" />
+            </div>
+          ) : comments.length ? (
+            <div className="space-y-5">{comments.map((comment) => renderComment(comment))}</div>
+          ) : (
+            <div className="rounded-3xl border border-dashed border-border/70 p-8 text-center text-sm text-muted-foreground">
+              هنوز کامنتی ثبت نشده است.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={Boolean(deleteTarget)} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <AlertDialogContent dir="rtl" className="text-right">
+          <AlertDialogHeader>
+            <AlertDialogTitle>حذف کامنت</AlertDialogTitle>
+            <AlertDialogDescription className="leading-7">
+              این عملیات کامنت را به‌صورت نرم حذف می‌کند و دیگر در سایت نمایش داده نمی‌شود.
+              {deleteReplyCount ? (
+                <span className="mt-2 block font-medium text-destructive">
+                  {toPersianDigits(deleteReplyCount)} پاسخ وابسته به این کامنت هم حذف می‌شود.
+                </span>
+              ) : null}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="gap-2 sm:justify-start">
+            <AlertDialogCancel>انصراف</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={deleteComment}
+            >
+              حذف کامنت
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }

src/components/BlogTableOfContents.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { MarkdownHeading } from "@/lib/markdown-headings";
+import { cn } from "@/lib/utils";
+
+type Props = {
+  headings: MarkdownHeading[];
+};
+
+function getParentHeading(headings: MarkdownHeading[], index: number) {
+  const heading = headings[index];
+  for (let cursor = index - 1; cursor >= 0; cursor -= 1) {
+    if (headings[cursor].level < heading.level) {
+      return headings[cursor];
+    }
+  }
+  return null;
+}
+
+export default function BlogTableOfContents({ headings }: Props) {
+  const [activeId, setActiveId] = useState(headings[0]?.id ?? "");
+
+  const parentById = new Map<string, string | null>();
+  headings.forEach((heading, index) => {
+    parentById.set(heading.id, getParentHeading(headings, index)?.id ?? null);
+  });
+
+  const activeBranch = new Set<string>();
+  let cursor = activeId;
+  while (cursor) {
+    activeBranch.add(cursor);
+    cursor = parentById.get(cursor) ?? "";
+  }
+
+  const visibleHeadings = headings.filter((heading) => {
+    const parentId = parentById.get(heading.id);
+    if (!parentId) return true;
+    return activeBranch.has(parentId);
+  });
+
+  useEffect(() => {
+    if (!headings.length) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
+        if (visible?.target.id) {
+          setActiveId(visible.target.id);
+        }
+      },
+      {
+        rootMargin: "-20% 0px -65% 0px",
+        threshold: [0, 1],
+      },
+    );
+
+    headings.forEach((heading) => {
+      const element = document.getElementById(heading.id);
+      if (element) observer.observe(element);
+    });
+
+    return () => observer.disconnect();
+  }, [headings]);
+
+  if (!headings.length) {
+    return <p className="text-sm leading-7 text-muted-foreground">برای این نوشته فهرست محتوا ثبت نشده است.</p>;
+  }
+
+  const scrollToHeading = (id: string) => {
+    const element = document.getElementById(id);
+    if (!element) return;
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+    window.history.replaceState(null, "", `#${id}`);
+    setActiveId(id);
+  };
+
+  return (
+    <nav className="space-y-1 text-sm">
+      {visibleHeadings.map((heading) => {
+        const active = activeId === heading.id;
+        return (
+          <button
+            key={heading.id}
+            type="button"
+            onClick={() => scrollToHeading(heading.id)}
+            className={cn(
+              "block w-full rounded-2xl px-3 py-2 text-right leading-6 transition",
+              active
+                ? "bg-primary text-primary-foreground shadow-sm"
+                : "text-muted-foreground hover:bg-primary/10 hover:text-primary",
+            )}
+            style={{ paddingRight: `${(heading.level - 1) * 0.85 + 0.75}rem` }}
+          >
+            {heading.text}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

src/components/BlogThumbnail.tsx

@@ -0,0 +1,58 @@
+import type * as Types from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+type BlogThumbnailProps = {
+  post: Pick<Types.PostListSchema, "title" | "category" | "absolute_featured_image_thumbnail_url" | "absolute_featured_image_preview_url" | "absolute_featured_image_url" | "featured_image">;
+  imageUrl?: string | null;
+  className?: string;
+  imageClassName?: string;
+  priority?: boolean;
+};
+
+function initials(title: string) {
+  return title
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join("");
+}
+
+export default function BlogThumbnail({
+  post,
+  imageUrl,
+  className,
+  imageClassName,
+  priority = false,
+}: BlogThumbnailProps) {
+  if (imageUrl) {
+    return (
+      <div className={cn("overflow-hidden bg-muted", className)}>
+        <img
+          src={imageUrl}
+          alt={post.title}
+          className={cn("h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]", imageClassName)}
+          loading={priority ? "eager" : "lazy"}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative overflow-hidden bg-[radial-gradient(circle_at_20%_20%,rgba(34,197,94,0.28),transparent_32%),linear-gradient(135deg,#0f3d2e,#163f59_52%,#111827)] text-white",
+        className,
+      )}
+    >
+      <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.08)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.08)_50%,rgba(255,255,255,0.08)_75%,transparent_75%,transparent)] bg-[length:28px_28px] opacity-25" />
+      <div className="relative flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
+        <span className="rounded-full border border-white/25 bg-white/15 px-3 py-1 text-xs backdrop-blur">
+          {post.category?.name || "بلاگ"}
+        </span>
+        <span className="text-5xl font-black tracking-tight">{initials(post.title) || "گـ"}</span>
+      </div>
+    </div>
+  );
+}

src/components/ConfirmAction.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+type ConfirmActionProps = {
+  trigger: ReactNode;
+  title: string;
+  description: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => unknown | Promise<unknown>;
+  disabled?: boolean;
+};
+
+export default function ConfirmAction({
+  trigger,
+  title,
+  description,
+  confirmLabel = "حذف",
+  cancelLabel = "انصراف",
+  onConfirm,
+  disabled = false,
+}: ConfirmActionProps) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        {trigger}
+      </AlertDialogTrigger>
+      <AlertDialogContent dir="rtl">
+        <AlertDialogHeader className="text-right">
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription className="leading-7">{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="gap-2 sm:justify-start">
+          <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            disabled={disabled}
+            onClick={() => void onConfirm()}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

src/components/Markdown.tsx

@@ -1,101 +1,164 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import type { PluggableList } from 'unified';
-import remarkGfm from 'remark-gfm';
-import rehypeRaw from 'rehype-raw';
-import rehypeSanitize from 'rehype-sanitize';
+"use client";
 
-type MarkdownSize = 'sm' | 'base' | 'lg';
+import React, { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import type { PluggableList } from "unified";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { extractMarkdownHeadings } from "@/lib/markdown-headings";
+import { cn } from "@/lib/utils";
+
+type MarkdownSize = "sm" | "base" | "lg";
 
 type MarkdownProps = {
   content?: string;
   allowHtml?: boolean;
   className?: string;
-  dir?: 'rtl' | 'ltr';
+  dir?: "rtl" | "ltr";
   justify?: boolean;
   size?: MarkdownSize;
 };
 
+function CodeBlock({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const [copied, setCopied] = useState(false);
+  const language = /language-([\w-]+)/.exec(className || "")?.[1] || "text";
+  const code = String(children).replace(/\n$/, "");
+
+  const copyCode = async () => {
+    if (!navigator.clipboard) return;
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1600);
+  };
+
+  return (
+    <div
+      dir="ltr"
+      className="my-5 overflow-hidden rounded-2xl border border-slate-700/70 bg-[#0f172a] text-left shadow-xl shadow-slate-950/10"
+    >
+      <div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-4 py-2 text-xs text-slate-300">
+        <span className="font-mono uppercase tracking-wide">{language}</span>
+        <button
+          type="button"
+          onClick={copyCode}
+          className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-slate-300 transition hover:bg-white/10 hover:text-white"
+        >
+          {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        PreTag="div"
+        customStyle={{
+          margin: 0,
+          background: "transparent",
+          direction: "ltr",
+          padding: "1rem",
+        }}
+        codeTagProps={{
+          dir: "ltr",
+          style: {
+            direction: "ltr",
+            textAlign: "left",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          },
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
+
 export default function Markdown({
-  content = '',
+  content = "",
   allowHtml = false,
-  className = '',
-  dir = 'rtl',
+  className = "",
+  dir = "rtl",
   justify = false,
-  size = 'sm',
+  size = "sm",
 }: MarkdownProps) {
   const rehypePlugins: PluggableList | undefined = allowHtml ? [rehypeRaw, rehypeSanitize] : undefined;
+  const headings = extractMarkdownHeadings(content);
+  let headingIndex = 0;
 
   const baseSizeClass =
-    size === 'sm' ? 'text-sm' : size === 'lg' ? 'text-lg' : 'text-base';
+    size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base";
 
   const hScale =
-    size === 'sm'
-      ? { h1: 'text-xl', h2: 'text-lg', h3: 'text-base', h4: 'text-base' }
-      : size === 'base'
-      ? { h1: 'text-3xl', h2: 'text-2xl', h3: 'text-xl', h4: 'text-lg' }
-      : { h1: 'text-4xl', h2: 'text-3xl', h3: 'text-2xl', h4: 'text-xl' };
+    size === "sm"
+      ? { h1: "text-xl", h2: "text-lg", h3: "text-base", h4: "text-base" }
+      : size === "base"
+      ? { h1: "text-3xl", h2: "text-2xl", h3: "text-xl", h4: "text-lg" }
+      : { h1: "text-4xl", h2: "text-3xl", h3: "text-2xl", h4: "text-xl" };
 
   const justifyStyle: React.CSSProperties | undefined = justify
-    ? { textAlign: 'justify', textJustify: 'inter-word' }
+    ? { textAlign: "justify", textJustify: "inter-word" }
     : undefined;
 
+  const nextHeadingId = (level: 1 | 2 | 3) => {
+    while (headingIndex < headings.length) {
+      const heading = headings[headingIndex];
+      headingIndex += 1;
+      if (heading.level === level) return heading.id;
+    }
+    return undefined;
+  };
+
   return (
     <div
       dir={dir}
-      className={`markdown-body ${baseSizeClass} text-right leading-7 break-words ${className}`}
+      className={cn("markdown-body break-words text-right leading-8", baseSizeClass, className)}
       style={justifyStyle}
     >
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={rehypePlugins}
         components={{
-          h1: (p) => <h1 className={`mt-6 font-bold ${hScale.h1}`} {...p} />,
-          h2: (p) => <h2 className={`mt-6 font-bold ${hScale.h2}`} {...p} />,
-          h3: (p) => <h3 className={`mt-5 font-semibold ${hScale.h3}`} {...p} />,
-          h4: (p) => <h4 className={`mt-4 font-semibold ${hScale.h4}`} {...p} />,
-          p:  (p) => <p className="my-3" {...p} />,
-          a:  (p) => <a className="underline decoration-primary hover:opacity-90 break-all" target="_blank" rel="noopener noreferrer" {...p} />,
-          ul: (p) => <ul className="my-3 list-disc ps-6 space-y-1.5" {...p} />,
-          ol: (p) => <ol className="my-3 list-decimal ps-6 space-y-1.5" {...p} />,
-          li: (p) => <li className="[&>ul]:my-1.5 [&>ol]:my-1.5" {...p} />,
-          hr: (p) => <hr className="my-5 border-muted" {...p} />,
+          h1: (p) => <h1 {...p} id={nextHeadingId(1)} className={cn("scroll-mt-28 pt-2 text-right font-bold", hScale.h1)} style={{ ...p.style, textAlign: "right" }} />,
+          h2: (p) => <h2 {...p} id={nextHeadingId(2)} className={cn("scroll-mt-28 pt-2 text-right font-bold", hScale.h2)} style={{ ...p.style, textAlign: "right" }} />,
+          h3: (p) => <h3 {...p} id={nextHeadingId(3)} className={cn("scroll-mt-28 pt-2 text-right font-semibold", hScale.h3)} style={{ ...p.style, textAlign: "right" }} />,
+          h4: (p) => <h4 {...p} className={cn("mt-4 text-right font-semibold", hScale.h4)} style={{ ...p.style, textAlign: "right" }} />,
+          p: (p) => <p className="my-4" {...p} />,
+          a: (p) => <a className="break-all underline decoration-primary hover:opacity-90" target="_blank" rel="noopener noreferrer" {...p} />,
+          ul: (p) => <ul className="my-4 list-disc space-y-1.5 pe-0 ps-6" {...p} />,
+          ol: (p) => <ol className="my-4 list-decimal space-y-1.5 pe-0 ps-6" {...p} />,
+          li: (p) => <li className="[&>ol]:my-1.5 [&>ul]:my-1.5" {...p} />,
+          hr: (p) => <hr className="my-6 border-muted" {...p} />,
           blockquote: (p) => (
-            <blockquote className="my-3 border-r-4 pr-4 italic text-muted-foreground" {...p} />
+            <blockquote className="my-4 rounded-2xl border-r-4 border-primary bg-muted/40 py-3 pr-4 italic text-muted-foreground" {...p} />
           ),
           code: ({ className, children, node, ...p }) => {
             const isInline =
-              node?.tagName === 'code' &&
-              !/language-/.test(className || '') &&
-              !String(children).includes('\n');
+              node?.tagName === "code" &&
+              !/language-/.test(className || "") &&
+              !String(children).includes("\n");
 
             if (isInline) {
               return (
-                <code className="rounded bg-muted px-1 py-0.5 text-[0.9em]" {...p}>
+                <code dir="ltr" className="rounded bg-muted px-1.5 py-0.5 text-[0.9em]" {...p}>
                   {children}
                 </code>
               );
             }
 
-            return (
-              <code className={className} {...p}>
-                {children}
-              </code>
-            );
+            return <CodeBlock className={className}>{children}</CodeBlock>;
           },
-          pre: ({ className = '', children, ...p }) => (
-            <pre
-              className={[
-                "my-4 overflow-x-auto rounded-md bg-muted p-4 text-[0.9em]",
-                className,
-              ].filter(Boolean).join(" ")}
-              {...p}
-            >
-              {children}
-            </pre>
-          ),
+          pre: ({ children }) => <>{children}</>,
           table: (p) => (
-            <div className="my-3 overflow-x-auto">
+            <div className="my-4 overflow-x-auto">
               <table className="w-full border-collapse" {...p} />
             </div>
           ),

src/components/MarkdownEditor.tsx

@@ -0,0 +1,683 @@
+"use client";
+
+import { useEffect, useRef, useState, type ComponentType } from "react";
+import { defaultKeymap, history, historyKeymap, redo, undo } from "@codemirror/commands";
+import { markdown } from "@codemirror/lang-markdown";
+import { bracketMatching, defaultHighlightStyle, HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { search, searchKeymap } from "@codemirror/search";
+import { Compartment, EditorState, RangeSetBuilder, type Extension } from "@codemirror/state";
+import { tags } from "@lezer/highlight";
+import {
+  Decoration,
+  drawSelection,
+  dropCursor,
+  EditorView,
+  highlightActiveLine,
+  highlightSpecialChars,
+  keymap,
+  rectangularSelection,
+} from "@codemirror/view";
+import {
+  Bold,
+  Code2,
+  Heading1,
+  Heading2,
+  Heading3,
+  HelpCircle,
+  Image as ImageIcon,
+  IndentDecrease,
+  IndentIncrease,
+  Italic,
+  Link as LinkIcon,
+  List,
+  ListChecks,
+  ListOrdered,
+  Minus,
+  Quote,
+  Redo2,
+  Strikethrough,
+  Table2,
+  TextCursorInput,
+  Undo2,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+export type MarkdownDirectionMode = "auto" | "rtl" | "ltr";
+
+type MarkdownEditorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  minHeight?: string;
+  directionMode?: MarkdownDirectionMode;
+  onDirectionModeChange?: (mode: MarkdownDirectionMode) => void;
+  onSave?: () => unknown | Promise<unknown>;
+  className?: string;
+};
+
+type ToolbarAction = {
+  key: string;
+  label: string;
+  icon: ComponentType<{ className?: string }>;
+  run: () => void;
+};
+
+type InsertDialogState =
+  | { type: "link"; from: number; to: number; selectedText: string }
+  | { type: "image"; from: number; to: number; selectedText: string }
+  | null;
+
+const rtlStrongPattern = /[\u0590-\u08FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
+const ltrStrongPattern = /[A-Za-z0-9]/;
+const codeFontFamily =
+  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+
+const codeFontHighlightStyle = HighlightStyle.define([
+  {
+    tag: [tags.monospace, tags.processingInstruction],
+    fontFamily: codeFontFamily,
+  },
+]);
+
+function detectLineDirection(text: string): "rtl" | "ltr" {
+  for (const char of text.trimStart()) {
+    if (rtlStrongPattern.test(char)) return "rtl";
+    if (ltrStrongPattern.test(char)) return "ltr";
+  }
+  return "ltr";
+}
+
+function directionExtension(mode: MarkdownDirectionMode): Extension {
+  if (mode !== "auto") {
+    return [
+      EditorView.editorAttributes.of({ dir: mode }),
+      EditorView.contentAttributes.of({ dir: mode }),
+      EditorView.perLineTextDirection.of(false),
+    ];
+  }
+
+  return [
+    EditorView.editorAttributes.of({ dir: "rtl" }),
+    EditorView.perLineTextDirection.of(true),
+    EditorView.decorations.compute(["doc"], (state) => {
+      const builder = new RangeSetBuilder<Decoration>();
+      for (let lineNumber = 1; lineNumber <= state.doc.lines; lineNumber += 1) {
+        const line = state.doc.line(lineNumber);
+        builder.add(
+          line.from,
+          line.from,
+          Decoration.line({ attributes: { dir: detectLineDirection(line.text) } }),
+        );
+      }
+      return builder.finish();
+    }),
+  ];
+}
+
+function editorTheme(minHeight: string): Extension {
+  return EditorView.theme({
+    "&": {
+      minHeight,
+      backgroundColor: "hsl(var(--muted) / 0.28)",
+      color: "hsl(var(--foreground))",
+      fontSize: "14px",
+      direction: "rtl",
+    },
+    ".cm-scroller": {
+      minHeight,
+      fontFamily: "inherit",
+      lineHeight: "1.9",
+    },
+    ".cm-content": {
+      caretColor: "hsl(var(--primary))",
+      padding: "1rem",
+      backgroundColor: "hsl(var(--muted) / 0.16)",
+    },
+    ".cm-line": {
+      padding: "0 0.25rem",
+      unicodeBidi: "plaintext",
+    },
+    ".cm-monospace": {
+      fontFamily: codeFontFamily,
+    },
+    ".cm-line[dir='rtl']": {
+      textAlign: "right",
+    },
+    ".cm-line[dir='ltr']": {
+      textAlign: "left",
+    },
+    ".cm-activeLine": {
+      backgroundColor: "hsl(var(--background) / 0.82)",
+    },
+    ".cm-selectionBackground, &.cm-focused .cm-selectionBackground": {
+      backgroundColor: "hsl(var(--primary) / 0.2)",
+    },
+    "&.cm-focused": {
+      outline: "none",
+    },
+    ".cm-cursor": {
+      borderLeftColor: "hsl(var(--primary))",
+    },
+    ".cm-tooltip": {
+      borderRadius: "0.75rem",
+      borderColor: "hsl(var(--border))",
+      backgroundColor: "hsl(var(--popover))",
+      color: "hsl(var(--popover-foreground))",
+    },
+    ".cm-gutters": {
+      display: "none",
+    },
+  });
+}
+
+function insertAtSelection(view: EditorView, text: string, cursorOffset = text.length) {
+  const selection = view.state.selection.main;
+  view.dispatch({
+    changes: { from: selection.from, to: selection.to, insert: text },
+    selection: { anchor: selection.from + cursorOffset },
+    scrollIntoView: true,
+  });
+  view.focus();
+}
+
+function wrapSelection(view: EditorView, before: string, after = before, placeholder = "متن") {
+  const selection = view.state.selection.main;
+  const selected = view.state.doc.sliceString(selection.from, selection.to) || placeholder;
+  const insert = `${before}${selected}${after}`;
+  view.dispatch({
+    changes: { from: selection.from, to: selection.to, insert },
+    selection: {
+      anchor: selection.from + before.length,
+      head: selection.from + before.length + selected.length,
+    },
+    scrollIntoView: true,
+  });
+  view.focus();
+}
+
+function selectedLines(view: EditorView) {
+  const selection = view.state.selection.main;
+  const startLine = view.state.doc.lineAt(selection.from);
+  const endLine = view.state.doc.lineAt(selection.to);
+  return { startLine, endLine };
+}
+
+function prefixLines(view: EditorView, makePrefix: (index: number) => string) {
+  const { startLine, endLine } = selectedLines(view);
+  const changes: Array<{ from: number; insert: string }> = [];
+
+  for (let lineNumber = startLine.number; lineNumber <= endLine.number; lineNumber += 1) {
+    const line = view.state.doc.line(lineNumber);
+    changes.push({ from: line.from, insert: makePrefix(lineNumber - startLine.number + 1) });
+  }
+
+  view.dispatch({ changes, scrollIntoView: true });
+  view.focus();
+}
+
+function indentListLines(view: EditorView) {
+  const { startLine, endLine } = selectedLines(view);
+  const changes: Array<{ from: number; insert: string }> = [];
+
+  for (let lineNumber = startLine.number; lineNumber <= endLine.number; lineNumber += 1) {
+    const line = view.state.doc.line(lineNumber);
+    if (/^\s*(?:[-*+]|\d+\.)(?:\s+\[[ xX]\])?\s+/.test(line.text)) {
+      changes.push({ from: line.from, insert: "  " });
+    }
+  }
+
+  if (!changes.length) return false;
+  view.dispatch({ changes, scrollIntoView: true });
+  view.focus();
+  return true;
+}
+
+function outdentListLines(view: EditorView) {
+  const { startLine, endLine } = selectedLines(view);
+  const changes: Array<{ from: number; to: number; insert: string }> = [];
+
+  for (let lineNumber = startLine.number; lineNumber <= endLine.number; lineNumber += 1) {
+    const line = view.state.doc.line(lineNumber);
+    const match = line.text.match(/^(\t| {1,2})/);
+    if (match && /^\s*(?:[-*+]|\d+\.)(?:\s+\[[ xX]\])?\s+/.test(line.text)) {
+      changes.push({ from: line.from, to: line.from + match[1].length, insert: "" });
+    }
+  }
+
+  if (!changes.length) return false;
+  view.dispatch({ changes, scrollIntoView: true });
+  view.focus();
+  return true;
+}
+
+function setHeading(view: EditorView, level: 1 | 2 | 3) {
+  const { startLine, endLine } = selectedLines(view);
+  const changes: Array<{ from: number; to?: number; insert: string }> = [];
+  const marker = `${"#".repeat(level)} `;
+
+  for (let lineNumber = startLine.number; lineNumber <= endLine.number; lineNumber += 1) {
+    const line = view.state.doc.line(lineNumber);
+    const match = line.text.match(/^(\s{0,3})(#{1,6}\s+)/);
+    if (match) {
+      const prefixStart = line.from + match[1].length;
+      changes.push({ from: prefixStart, to: prefixStart + match[2].length, insert: marker });
+    } else {
+      changes.push({ from: line.from, insert: marker });
+    }
+  }
+
+  view.dispatch({ changes, scrollIntoView: true });
+  view.focus();
+}
+
+function wrapBlock(view: EditorView, before: string, after: string, placeholder: string) {
+  const selection = view.state.selection.main;
+  const selected = view.state.doc.sliceString(selection.from, selection.to) || placeholder;
+  const insert = `${before}${selected}${after}`;
+  view.dispatch({
+    changes: { from: selection.from, to: selection.to, insert },
+    selection: {
+      anchor: selection.from + before.length,
+      head: selection.from + before.length + selected.length,
+    },
+    scrollIntoView: true,
+  });
+  view.focus();
+}
+
+function getSelectedText(view: EditorView) {
+  const selection = view.state.selection.main;
+  return view.state.doc.sliceString(selection.from, selection.to);
+}
+
+function insertLinkAtSelection(view: EditorView, from: number, to: number, selectedText: string, text: string, url: string) {
+  const label = text.trim() || selectedText || "متن لینک";
+  view.dispatch({
+    changes: { from, to, insert: `[${label}](${url})` },
+    selection: { anchor: from + 1, head: from + 1 + label.length },
+    scrollIntoView: true,
+  });
+  view.focus();
+}
+
+function insertImageAtSelection(view: EditorView, from: number, to: number, selectedText: string, altText: string, url: string) {
+  const alt = altText.trim() || selectedText || "تصویر";
+  view.dispatch({
+    changes: { from, to, insert: `![${alt}](${url})` },
+    selection: { anchor: from + 2, head: from + 2 + alt.length },
+    scrollIntoView: true,
+  });
+  view.focus();
+}
+
+function runEditorCommand(view: EditorView | null, command: (view: EditorView) => void) {
+  if (!view) return;
+  command(view);
+}
+
+export default function MarkdownEditor({
+  value,
+  onChange,
+  minHeight = "520px",
+  directionMode = "auto",
+  onDirectionModeChange,
+  onSave,
+  className,
+}: MarkdownEditorProps) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  const onSaveRef = useRef(onSave);
+  const initialValueRef = useRef(value);
+  const initialDirectionModeRef = useRef(directionMode);
+  const directionCompartment = useRef(new Compartment());
+  const [guideOpen, setGuideOpen] = useState(false);
+  const [insertDialog, setInsertDialog] = useState<InsertDialogState>(null);
+  const [insertUrl, setInsertUrl] = useState("");
+  const [insertText, setInsertText] = useState("");
+
+  onChangeRef.current = onChange;
+  onSaveRef.current = onSave;
+
+  const openInsertDialog = (view: EditorView, type: "link" | "image") => {
+    const selection = view.state.selection.main;
+    const selectedText = getSelectedText(view);
+    setInsertDialog({ type, from: selection.from, to: selection.to, selectedText });
+    setInsertText(selectedText);
+    setInsertUrl("");
+  };
+
+  const closeInsertDialog = () => {
+    setInsertDialog(null);
+    setInsertText("");
+    setInsertUrl("");
+    viewRef.current?.focus();
+  };
+
+  const submitInsertDialog = () => {
+    const view = viewRef.current;
+    const dialog = insertDialog;
+    const url = insertUrl.trim();
+    if (!view || !dialog || !url) return;
+
+    if (dialog.type === "link") {
+      insertLinkAtSelection(view, dialog.from, dialog.to, dialog.selectedText, insertText, url);
+    } else {
+      insertImageAtSelection(view, dialog.from, dialog.to, dialog.selectedText, insertText, url);
+    }
+    closeInsertDialog();
+  };
+
+  useEffect(() => {
+    if (!hostRef.current) return undefined;
+
+    const extensions: Extension[] = [
+      highlightSpecialChars(),
+      history(),
+      drawSelection(),
+      dropCursor(),
+      rectangularSelection(),
+      bracketMatching(),
+      highlightActiveLine(),
+      markdown(),
+      search({ top: true }),
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      syntaxHighlighting(codeFontHighlightStyle),
+      EditorView.lineWrapping,
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          onChangeRef.current(update.state.doc.toString());
+        }
+      }),
+      keymap.of([
+        { key: "Mod-s", run: () => (void onSaveRef.current?.(), true) },
+        { key: "Mod-b", run: (view) => (wrapSelection(view, "**"), true) },
+        { key: "Mod-i", run: (view) => (wrapSelection(view, "_"), true) },
+        { key: "Mod-k", run: (view) => (openInsertDialog(view, "link"), true) },
+        { key: "Mod-/", run: () => (setGuideOpen(true), true) },
+        { key: "Mod-Shift-7", run: (view) => (prefixLines(view, (index) => `${index}. `), true) },
+        { key: "Mod-Shift-8", run: (view) => (prefixLines(view, () => "- "), true) },
+        { key: "Mod-e", run: (view) => (wrapSelection(view, "`"), true) },
+        { key: "Mod-Alt-c", run: (view) => (wrapBlock(view, "\n```text\n", "\n```\n", "code"), true) },
+        { key: "Mod-Alt-i", run: (view) => (openInsertDialog(view, "image"), true) },
+        { key: "Mod-Alt-1", run: (view) => (setHeading(view, 1), true) },
+        { key: "Mod-Alt-2", run: (view) => (setHeading(view, 2), true) },
+        { key: "Mod-Alt-3", run: (view) => (setHeading(view, 3), true) },
+        {
+          key: "Mod-Alt-t",
+          run: (view) => (
+            insertAtSelection(view, "\n| ستون اول | ستون دوم |\n| --- | --- |\n| مقدار | مقدار |\n"),
+            true
+          ),
+        },
+        { key: "Mod-Alt-x", run: (view) => (prefixLines(view, () => "- [ ] "), true) },
+        { key: "Mod-Shift-x", run: (view) => (wrapSelection(view, "~~"), true) },
+        { key: "Tab", run: indentListLines },
+        { key: "Shift-Tab", run: outdentListLines },
+        ...searchKeymap,
+        ...defaultKeymap,
+        ...historyKeymap,
+      ]),
+      editorTheme(minHeight),
+      directionCompartment.current.of(directionExtension(initialDirectionModeRef.current)),
+    ];
+
+    const state = EditorState.create({
+      doc: initialValueRef.current,
+      extensions,
+    });
+    const view = new EditorView({ state, parent: hostRef.current });
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [minHeight]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (current === value) return;
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: value },
+    });
+  }, [value]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: directionCompartment.current.reconfigure(directionExtension(directionMode)),
+    });
+  }, [directionMode]);
+
+  const setDirectionMode = (mode: MarkdownDirectionMode) => {
+    onDirectionModeChange?.(mode);
+  };
+
+  const actions: ToolbarAction[] = [
+    { key: "bold", label: "درشت (Ctrl+B)", icon: Bold, run: () => runEditorCommand(viewRef.current, (view) => wrapSelection(view, "**")) },
+    { key: "italic", label: "کج (Ctrl+I)", icon: Italic, run: () => runEditorCommand(viewRef.current, (view) => wrapSelection(view, "_")) },
+    {
+      key: "strike",
+      label: "خط‌خورده (Ctrl+Shift+X)",
+      icon: Strikethrough,
+      run: () => runEditorCommand(viewRef.current, (view) => wrapSelection(view, "~~")),
+    },
+    { key: "h1", label: "تیتر ۱ (Ctrl+Alt+1)", icon: Heading1, run: () => runEditorCommand(viewRef.current, (view) => setHeading(view, 1)) },
+    { key: "h2", label: "تیتر ۲ (Ctrl+Alt+2)", icon: Heading2, run: () => runEditorCommand(viewRef.current, (view) => setHeading(view, 2)) },
+    { key: "h3", label: "تیتر ۳ (Ctrl+Alt+3)", icon: Heading3, run: () => runEditorCommand(viewRef.current, (view) => setHeading(view, 3)) },
+    { key: "quote", label: "نقل قول", icon: Quote, run: () => runEditorCommand(viewRef.current, (view) => prefixLines(view, () => "> ")) },
+    { key: "ul", label: "فهرست نقطه‌ای (Ctrl+Shift+8)", icon: List, run: () => runEditorCommand(viewRef.current, (view) => prefixLines(view, () => "- ")) },
+    {
+      key: "ol",
+      label: "فهرست شماره‌ای (Ctrl+Shift+7)",
+      icon: ListOrdered,
+      run: () => runEditorCommand(viewRef.current, (view) => prefixLines(view, (index) => `${index}. `)),
+    },
+    {
+      key: "task-list",
+      label: "فهرست کارها (Ctrl+Alt+X)",
+      icon: ListChecks,
+      run: () => runEditorCommand(viewRef.current, (view) => prefixLines(view, () => "- [ ] ")),
+    },
+    { key: "link", label: "لینک (Ctrl+K)", icon: LinkIcon, run: () => runEditorCommand(viewRef.current, (view) => openInsertDialog(view, "link")) },
+    { key: "image", label: "تصویر (Ctrl+Alt+I)", icon: ImageIcon, run: () => runEditorCommand(viewRef.current, (view) => openInsertDialog(view, "image")) },
+    { key: "inline-code", label: "کد کوتاه (Ctrl+E)", icon: TextCursorInput, run: () => runEditorCommand(viewRef.current, (view) => wrapSelection(view, "`", "`", "code")) },
+    {
+      key: "code",
+      label: "بلوک کد (Ctrl+Alt+C)",
+      icon: Code2,
+      run: () => runEditorCommand(viewRef.current, (view) => wrapBlock(view, "\n```text\n", "\n```\n", "code")),
+    },
+    {
+      key: "table",
+      label: "جدول (Ctrl+Alt+T)",
+      icon: Table2,
+      run: () =>
+        runEditorCommand(viewRef.current, (view) =>
+          insertAtSelection(view, "\n| ستون اول | ستون دوم |\n| --- | --- |\n| مقدار | مقدار |\n"),
+        ),
+    },
+    { key: "hr", label: "خط جداکننده", icon: Minus, run: () => runEditorCommand(viewRef.current, (view) => insertAtSelection(view, "\n---\n")) },
+    { key: "undo", label: "بازگردانی (Ctrl+Z)", icon: Undo2, run: () => runEditorCommand(viewRef.current, (view) => undo(view)) },
+    { key: "redo", label: "انجام دوباره (Ctrl+Shift+Z)", icon: Redo2, run: () => runEditorCommand(viewRef.current, (view) => redo(view)) },
+  ];
+
+  const shortcutSections = [
+    {
+      title: "قالب‌بندی متن",
+      items: [
+        ["Ctrl/Cmd + B", "درشت کردن متن"],
+        ["Ctrl/Cmd + I", "کج کردن متن"],
+        ["Ctrl/Cmd + Shift + X", "خط‌خورده"],
+        ["Ctrl/Cmd + E", "کد کوتاه درون‌خطی"],
+        ["Ctrl/Cmd + Alt + 1/2/3", "تیترهای سطح ۱، ۲ و ۳"],
+      ],
+    },
+    {
+      title: "بلوک‌ها و ساختار",
+      items: [
+        ["Ctrl/Cmd + Shift + 8", "فهرست نقطه‌ای"],
+        ["Ctrl/Cmd + Shift + 7", "فهرست شماره‌ای"],
+        ["Ctrl/Cmd + Alt + X", "فهرست کارها"],
+        ["Ctrl/Cmd + Alt + C", "بلوک کد"],
+        ["Ctrl/Cmd + Alt + T", "جدول"],
+        ["Tab / Shift + Tab", "تورفتگی یا خروج از تورفتگی برای آیتم‌های فهرست"],
+      ],
+    },
+    {
+      title: "درج محتوا",
+      items: [
+        ["Ctrl/Cmd + K", "لینک"],
+        ["Ctrl/Cmd + Alt + I", "تصویر"],
+      ],
+    },
+    {
+      title: "عملیات و راهنما",
+      items: [
+        ["Ctrl/Cmd + S", "ذخیره پیش‌نویس"],
+        ["Ctrl/Cmd + F", "جست‌وجو در متن ویرایشگر"],
+        ["Ctrl/Cmd + Z", "بازگردانی"],
+        ["Ctrl/Cmd + Shift + Z", "انجام دوباره"],
+        ["Ctrl/Cmd + /", "باز کردن همین راهنما"],
+      ],
+    },
+  ];
+
+  return (
+    <div className={cn("overflow-hidden rounded-2xl border bg-muted/30 shadow-inner", className)} dir="rtl">
+      <TooltipProvider delayDuration={150}>
+        <div className="flex flex-wrap items-center justify-between gap-2 border-b bg-background/80 p-2">
+          <div className="flex flex-wrap items-center justify-start gap-1">
+            {actions.map((action) => {
+              const Icon = action.icon;
+              return (
+                <Tooltip key={action.key}>
+                  <TooltipTrigger asChild>
+                    <Button type="button" variant="ghost" size="icon" className="h-8 w-8" onClick={action.run}>
+                      <Icon className="h-4 w-4" />
+                      <span className="sr-only">{action.label}</span>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{action.label}</TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+
+          <div className="flex items-center gap-1 rounded-full border bg-background/80 p-1">
+            {(["auto", "rtl", "ltr"] as const).map((mode) => (
+              <Button
+                key={mode}
+                type="button"
+                variant={directionMode === mode ? "default" : "ghost"}
+                size="sm"
+                className="h-7 rounded-full px-3 text-xs"
+                onClick={() => setDirectionMode(mode)}
+              >
+                {mode === "auto" ? "Auto" : mode.toUpperCase()}
+              </Button>
+            ))}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button type="button" variant="ghost" size="icon" className="h-7 w-7 rounded-full" onClick={() => setGuideOpen(true)}>
+                  <HelpCircle className="h-3.5 w-3.5" />
+                  <span className="sr-only">راهنمای میانبرها</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>راهنمای میانبرها</TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      </TooltipProvider>
+      <div ref={hostRef} className="text-left" />
+      <Dialog open={guideOpen} onOpenChange={setGuideOpen}>
+        <DialogContent className="max-h-[88vh] max-w-3xl overflow-y-auto rounded-3xl" dir="rtl">
+          <DialogHeader className="text-right md:text-right mt-6 mb-2">
+            <DialogTitle>راهنمای میانبرهای ویرایشگر مارک‌داون</DialogTitle>
+            <DialogDescription>
+              در ویندوز و لینوکس از Ctrl و در مک از Cmd استفاده کنید. میانبرها فقط وقتی ویرایشگر فعال است اجرا می‌شوند.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 md:grid-cols-2">
+            {shortcutSections.map((section) => (
+              <section key={section.title} className="rounded-2xl border bg-muted/20 p-4">
+                <h3 className="mb-3 text-right font-bold">{section.title}</h3>
+                <div className="space-y-2">
+                  {section.items.map(([shortcut, description]) => (
+                    <div key={`${section.title}-${shortcut}`} className="flex items-center justify-between gap-3 rounded-xl bg-background/80 px-3 py-2 text-sm">
+                      <span className="text-right text-muted-foreground">{description}</span>
+                      <kbd className="shrink-0 rounded-lg border bg-muted px-2 py-1 font-mono text-[11px] leading-none text-foreground">
+                        {shortcut}
+                      </kbd>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={Boolean(insertDialog)} onOpenChange={(open) => (open ? undefined : closeInsertDialog())}>
+        <DialogContent className="max-w-lg rounded-3xl" dir="rtl">
+          <DialogHeader className="mt-6 text-right md:text-right">
+            <DialogTitle>{insertDialog?.type === "image" ? "درج تصویر" : "درج لینک"}</DialogTitle>
+            <DialogDescription>
+              {insertDialog?.type === "image"
+                ? "آدرس تصویر و متن جایگزین را وارد کنید. برای فایل‌های آپلودشده می‌توانید لینک را از مرکز آپلود کپی کنید."
+                : "آدرس مقصد و متن لینک را وارد کنید. اگر متن انتخاب کرده باشید، به عنوان متن لینک استفاده می‌شود."}
+            </DialogDescription>
+          </DialogHeader>
+          <form
+            className="space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              submitInsertDialog();
+            }}
+          >
+            <div className="space-y-2">
+              <Label htmlFor="markdown-insert-url" className="block text-right">
+                آدرس
+              </Label>
+              <Input
+                id="markdown-insert-url"
+                value={insertUrl}
+                onChange={(event) => setInsertUrl(event.target.value)}
+                placeholder={insertDialog?.type === "image" ? "https://example.com/image.png" : "https://example.com"}
+                dir="ltr"
+                autoFocus
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="markdown-insert-text" className="block text-right">
+                {insertDialog?.type === "image" ? "متن جایگزین" : "متن لینک"}
+              </Label>
+              <Input
+                id="markdown-insert-text"
+                value={insertText}
+                onChange={(event) => setInsertText(event.target.value)}
+                placeholder={insertDialog?.type === "image" ? "توضیح کوتاه تصویر" : "متن قابل کلیک"}
+                className="text-right"
+              />
+            </div>
+            <div className="flex flex-wrap justify-start gap-2 pt-2">
+              <Button type="submit" disabled={!insertUrl.trim()}>
+                {insertDialog?.type === "image" ? "درج تصویر" : "درج لینک"}
+              </Button>
+              <Button type="button" variant="outline" onClick={closeInsertDialog}>
+                انصراف
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/components/ModeToggle.tsx

@@ -29,7 +29,7 @@ export default function ModeToggle({ className }: { className?: string }) {
       variant="ghost"
       size="icon"
       className={cn(
-        "rounded-full border-0 bg-transparent shadow-none backdrop-blur transition hover:bg-background/45 hover:shadow-sm",
+        "rounded-full border-0 bg-transparent shadow-none transition hover:bg-background/45 hover:shadow-sm",
         className,
       )}
       aria-label={`تغییر تم به حالت ${nextThemeLabel}`}

src/components/Navbar.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from "react";
 import { useMemo } from "react";
-import { LayoutDashboard, LogOut, PencilLine, RotateCcw, UserRound } from "lucide-react";
+import { LayoutDashboard, LogOut, RotateCcw, UserRound } from "lucide-react";
 import { Link, NavLink } from "@/lib/router";
 import { useAuth } from "@/contexts/AuthContext";
 import ModeToggle from "@/components/ModeToggle";
@@ -83,37 +83,31 @@ function ProfileAvatarMenu() {
           {[user?.first_name, user?.last_name].filter(Boolean).join(" ") || user?.username || "حساب کاربری"}
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <DropdownMenuItem asChild className="flex-row-reverse justify-start gap-2 rounded-xl">
+        <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl">
           <Link to="/profile">
-            <UserRound className="h-4 w-4" />
             مشاهده پروفایل
+            <UserRound className="h-4 w-4" />
           </Link>
         </DropdownMenuItem>
-        <DropdownMenuItem asChild className="flex-row-reverse justify-start gap-2 rounded-xl">
-          <Link to="/profile?edit=1">
-            <PencilLine className="h-4 w-4" />
-            ویرایش پروفایل
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild className="flex-row-reverse justify-start gap-2 rounded-xl">
+        <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl">
           <Link to="/reset-password">
-            <RotateCcw className="h-4 w-4" />
             تغییر یا بازیابی رمز
+            <RotateCcw className="h-4 w-4" />
           </Link>
         </DropdownMenuItem>
         {isAdminUser ? (
-          <DropdownMenuItem asChild className="flex-row-reverse justify-start gap-2 rounded-xl">
+          <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl">
             <Link to="/admin">
-              <LayoutDashboard className="h-4 w-4" />
               داشبورد مدیریت
+              <LayoutDashboard className="h-4 w-4" />
             </Link>
           </DropdownMenuItem>
         ) : null}
         <DropdownMenuSeparator />
-        <DropdownMenuItem asChild className="flex-row-reverse justify-start gap-2 rounded-xl text-destructive focus:text-destructive">
+        <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl text-destructive focus:text-destructive">
           <Link to="/logout">
-            <LogOut className="h-4 w-4" />
             خروج از حساب
+            <LogOut className="h-4 w-4" />
           </Link>
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -132,8 +126,8 @@ export default function Navbar() {
       <div className="container mx-auto px-4 py-3">
         <div className="flex items-center justify-between gap-4">
           <Link to="/" className="flex min-w-0 items-center gap-3">
-            <div className="hidden h-10 w-10 items-center justify-center rounded-2xl border border-border/70 bg-background/90 shadow-sm sm:flex">
-              <span className="text-lg font-bold text-primary">گ</span>
+            <div className="hidden rounded-2xl sm:flex">
+              <img src="/favicon.ico" alt="لوگوی انجمن" className="h-10 w-10 object-contain" />
             </div>
             <div className="min-w-0 text-right">
               <p className="truncate text-sm font-semibold text-foreground sm:text-base">

src/components/NotificationsBell.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Bell, CheckCheck, Loader2, Trash2 } from "lucide-react";
+import ConfirmAction from "@/components/ConfirmAction";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -33,15 +34,21 @@ function NotificationItem({
       )}
     >
       <div className="flex items-start justify-between gap-3">
-        <Button
-          type="button"
-          size="icon"
-          variant="ghost"
-          className="h-8 w-8 shrink-0 rounded-full text-muted-foreground hover:text-destructive"
-          onClick={() => void onDelete(notification)}
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
+        <ConfirmAction
+          title="حذف اعلان"
+          description="آیا از حذف این اعلان مطمئن هستید؟"
+          onConfirm={() => onDelete(notification)}
+          trigger={
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              className="h-8 w-8 shrink-0 rounded-full text-muted-foreground hover:text-destructive"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          }
+        />
         <button
           type="button"
           onClick={() => void onOpen(notification)}
@@ -87,7 +94,7 @@ export default function NotificationsBell() {
           type="button"
           variant="ghost"
           size="icon"
-          className="relative h-10 w-10 rounded-full border-0 bg-transparent shadow-none backdrop-blur transition hover:bg-background/45 hover:shadow-sm"
+          className="relative h-10 w-10 rounded-full border-0 bg-transparent shadow-none transition hover:bg-background/45 hover:shadow-sm"
           aria-label="اعلان‌ها"
         >
           <Bell className="h-4 w-4" />

src/components/page-loading.tsx

@@ -1,5 +1,136 @@
 import { Skeleton } from "@/components/ui/skeleton";
 
+export function BlogCardsSkeleton({ count = 6 }: { count?: number }) {
+  return (
+    <div className="grid gap-6 md:grid-cols-2 2xl:grid-cols-3" aria-hidden="true">
+      {Array.from({ length: count }).map((_, index) => (
+        <div
+          key={index}
+          className="overflow-hidden rounded-[2rem] border border-border/70 bg-card/85 shadow-sm"
+        >
+          <Skeleton className="aspect-[16/10] w-full rounded-t-[2rem] rounded-b-none" />
+          <div className="space-y-4 p-5">
+            <Skeleton className="h-7 w-11/12" />
+            <Skeleton className="h-7 w-3/4" />
+            <div className="space-y-2 pt-1">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-10/12" />
+              <Skeleton className="h-4 w-8/12" />
+            </div>
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function BlogListingPageLoading() {
+  return (
+    <div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.32))]" dir="rtl">
+      <div className="container mx-auto px-4 py-10">
+        <Skeleton className="mb-8 aspect-[5/1.25] w-full rounded-[2rem] md:aspect-[6/1.25]" />
+
+        <div className="mb-8 flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
+          <div className="space-y-3 text-right">
+            <Skeleton className="h-5 w-36" />
+            <Skeleton className="h-11 w-28" />
+            <Skeleton className="h-5 w-full max-w-xl" />
+            <Skeleton className="h-5 w-10/12 max-w-lg" />
+          </div>
+          <div className="flex w-full max-w-md items-center gap-2">
+            <Skeleton className="h-12 flex-1 rounded-2xl" />
+            <Skeleton className="h-12 w-12 rounded-2xl xl:hidden" />
+          </div>
+        </div>
+
+        <div className="grid gap-8 xl:grid-cols-[18rem_minmax(0,1fr)] xl:items-start">
+          <aside className="hidden xl:block">
+            <div className="sticky top-24 space-y-4 rounded-[2rem] border border-border/70 bg-card/80 p-4 shadow-sm">
+              <Skeleton className="h-7 w-32" />
+              <Skeleton className="h-32 w-full rounded-3xl" />
+              <Skeleton className="h-28 w-full rounded-3xl" />
+              <Skeleton className="h-40 w-full rounded-3xl" />
+            </div>
+          </aside>
+          <BlogCardsSkeleton />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function BlogDetailPageLoading() {
+  return (
+    <div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.28))]" dir="rtl">
+      <div className="container mx-auto px-4 py-8">
+        <div className="gap-8 xl:flex xl:items-start">
+          <aside className="sticky top-24 hidden w-72 shrink-0 xl:block">
+            <div className="rounded-[1.75rem] border border-border/70 bg-card/90 p-4 shadow-sm">
+              <Skeleton className="mb-4 h-6 w-36" />
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-10/12" />
+                <Skeleton className="h-4 w-8/12" />
+                <Skeleton className="h-4 w-9/12" />
+              </div>
+            </div>
+          </aside>
+
+          <main className="min-w-0 flex-1">
+            <article className="overflow-hidden rounded-[2.5rem] border border-border/70 bg-card/95">
+              <header className="space-y-6 p-5 md:p-8">
+                <Skeleton className="h-5 w-64" />
+                <div className="space-y-4">
+                  <Skeleton className="h-12 w-11/12" />
+                  <Skeleton className="h-12 w-8/12" />
+                  <Skeleton className="h-5 w-full max-w-3xl" />
+                  <Skeleton className="h-5 w-10/12 max-w-2xl" />
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  <Skeleton className="h-8 w-28 rounded-full" />
+                  <Skeleton className="h-8 w-36 rounded-full" />
+                </div>
+              </header>
+
+              <div className="px-5 md:px-8">
+                <Skeleton className="aspect-[16/9] w-full rounded-[2rem]" />
+              </div>
+
+              <div className="space-y-5 p-5 md:p-8 xl:hidden">
+                <Skeleton className="h-32 w-full rounded-[1.5rem]" />
+              </div>
+
+              <div className="space-y-8 px-5 pb-8 pt-6 md:px-8 md:pb-10">
+                <div className="mx-auto max-w-4xl space-y-4">
+                  <Skeleton className="h-8 w-7/12" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-11/12" />
+                  <Skeleton className="h-4 w-9/12" />
+                  <Skeleton className="mt-8 h-8 w-6/12" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-10/12" />
+                </div>
+                <div className="mx-auto flex max-w-4xl flex-wrap gap-2">
+                  <Skeleton className="h-8 w-20 rounded-full" />
+                  <Skeleton className="h-8 w-24 rounded-full" />
+                  <Skeleton className="h-8 w-16 rounded-full" />
+                </div>
+                <Skeleton className="mx-auto h-12 w-full max-w-4xl rounded-2xl" />
+              </div>
+            </article>
+
+            <Skeleton className="mt-8 h-48 w-full rounded-[2rem]" />
+            <Skeleton className="mt-10 h-56 w-full rounded-[2rem]" />
+            <Skeleton className="mt-10 h-72 w-full rounded-[2rem]" />
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function ListingPageLoading() {
   return (
     <div className="min-h-screen bg-background" dir="rtl">

src/index.css

@@ -97,6 +97,10 @@ All colors MUST be HSL.
 }
 
 @layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
   * {
     @apply border-border;
   }

src/lib/api.ts

@@ -397,29 +397,114 @@ class ApiClient {
     return this.request<Types.UserListSchema[]>(`/api/auth/users${query.toString() ? `?${query.toString()}` : ''}`);
   }
 
+  async getUserDetail(userId: number) {
+    return this.request<Types.UserProfileSchema>(`/api/auth/users/${userId}`);
+  }
+
+  async listAuthorizationRoles() {
+    return this.request<Types.AuthorizationRoleSchema[]>('/api/auth/roles');
+  }
+
+  async getUserAuthorization(userId: number) {
+    return this.request<Types.UserAuthorizationSchema>(`/api/auth/users/${userId}/authorization`);
+  }
+
+  async updateUserAuthorization(userId: number, data: Types.UserAuthorizationUpdateSchema) {
+    return this.request<Types.UserAuthorizationSchema>(`/api/auth/users/${userId}/authorization`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async getAdminDashboard(params?: {
+    date_from?: string;
+    date_to?: string;
+    event_id?: number;
+    granularity?: 'auto' | 'day' | 'week' | 'month';
+  }) {
+    const query = new URLSearchParams();
+    if (params?.date_from) query.set('date_from', params.date_from);
+    if (params?.date_to) query.set('date_to', params.date_to);
+    if (params?.event_id != null) query.set('event_id', String(params.event_id));
+    if (params?.granularity) query.set('granularity', params.granularity);
+    return this.request<Types.AdminDashboardAnalyticsSchema>(
+      `/api/analytics/admin/dashboard${query.toString() ? `?${query.toString()}` : ''}`,
+    );
+  }
+
+  async getAdminUserAnalytics(params?: { date_from?: string; date_to?: string }) {
+    const query = new URLSearchParams();
+    if (params?.date_from) query.set('date_from', params.date_from);
+    if (params?.date_to) query.set('date_to', params.date_to);
+    return this.request<Types.UserAnalyticsSchema>(
+      `/api/analytics/admin/users${query.toString() ? `?${query.toString()}` : ''}`,
+    );
+  }
+
+  async getAdminEventAnalytics(params?: { date_from?: string; date_to?: string; event_id?: number }) {
+    const query = new URLSearchParams();
+    if (params?.date_from) query.set('date_from', params.date_from);
+    if (params?.date_to) query.set('date_to', params.date_to);
+    if (params?.event_id != null) query.set('event_id', String(params.event_id));
+    return this.request<Types.EventAnalyticsSchema>(
+      `/api/analytics/admin/events${query.toString() ? `?${query.toString()}` : ''}`,
+    );
+  }
+
+  async getAdminBlogAnalytics(params?: { date_from?: string; date_to?: string }) {
+    const query = new URLSearchParams();
+    if (params?.date_from) query.set('date_from', params.date_from);
+    if (params?.date_to) query.set('date_to', params.date_to);
+    return this.request<Types.BlogAnalyticsSchema>(
+      `/api/analytics/admin/blog${query.toString() ? `?${query.toString()}` : ''}`,
+    );
+  }
+
+  async getAdminDashboardEventOptions(params?: { search?: string; limit?: number; offset?: number }) {
+    const query = new URLSearchParams();
+    if (params?.search) query.set('search', params.search);
+    if (params?.limit != null) query.set('limit', String(params.limit));
+    if (params?.offset != null) query.set('offset', String(params.offset));
+    return this.request<Types.AnalyticsEventOptionsSchema>(
+      `/api/analytics/admin/events/options${query.toString() ? `?${query.toString()}` : ''}`,
+    );
+  }
+
   // ============= Blog Endpoints =============
   
   async getPosts(params?: {
     page?: number;
     limit?: number;
     category?: string;
-    tag?: string;
+    tag?: string | string[];
     search?: string;
     featured?: boolean;
-    author?: string;
+    author?: string | string[];
   }) {
     const queryParams = new URLSearchParams();
     if (params?.page) queryParams.append('page', params.page.toString());
     if (params?.limit) queryParams.append('limit', params.limit.toString());
     if (params?.category) queryParams.append('category', params.category);
-    if (params?.tag) queryParams.append('tag', params.tag);
+    if (Array.isArray(params?.tag)) {
+      params.tag.forEach((tag) => queryParams.append('tag', tag));
+    } else if (params?.tag) {
+      queryParams.append('tag', params.tag);
+    }
     if (params?.search) queryParams.append('search', params.search);
     if (params?.featured !== undefined) queryParams.append('featured', params.featured.toString());
-    if (params?.author) queryParams.append('author', params.author);
+    if (Array.isArray(params?.author)) {
+      params.author.forEach((author) => queryParams.append('author', author));
+    } else if (params?.author) {
+      queryParams.append('author', params.author);
+    }
 
     const query = queryParams.toString();
     return this.request<Types.PostListSchema[]>(`/api/blog/posts${query ? `?${query}` : ''}`);
     }
+
+  async getBlogFilters() {
+    return this.request<Types.BlogFiltersSchema>('/api/blog/filters');
+  }
   
   async getPost(slug: string) {
     return this.request<Types.PostDetailSchema>(`/api/blog/posts/${encodeURIComponent(slug)}`);
@@ -455,6 +540,10 @@ class ApiClient {
     return this.request<Types.PostListSchema[]>(`/api/blog/admin/posts${query.toString() ? `?${query.toString()}` : ''}`);
   }
 
+  async listBlogWriters() {
+    return this.request<NonNullable<Types.PostListSchema['writers']>>('/api/blog/admin/writers');
+  }
+
   async getAdminBlogPost(postId: number) {
     return this.request<Types.PostDetailSchema>(`/api/blog/admin/posts/${postId}`);
   }
@@ -531,6 +620,52 @@ class ApiClient {
     return response.json() as Promise<Types.PostAssetSchema>;
   }
 
+  uploadBlogPostAssetWithProgress(
+    postId: number,
+    file: File,
+    data: { title?: string; alt_text?: string; caption?: string } = {},
+    onProgress?: (progress: number) => void,
+  ) {
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('title', data.title ?? '');
+    formData.append('alt_text', data.alt_text ?? '');
+    formData.append('caption', data.caption ?? '');
+
+    const token = this.getStorageValue('access_token');
+
+    return new Promise<Types.PostAssetSchema>((resolve, reject) => {
+      const request = new XMLHttpRequest();
+      request.open('POST', `${this.baseUrl}/api/blog/admin/posts/${postId}/assets`);
+      if (token) {
+        request.setRequestHeader('Authorization', `Bearer ${token}`);
+      }
+
+      request.upload.onprogress = (event) => {
+        if (!event.lengthComputable) return;
+        onProgress?.(Math.round((event.loaded / event.total) * 100));
+      };
+
+      request.onload = () => {
+        let body: (Types.PostAssetSchema & ApiErrorBody) | null = null;
+        try {
+          body = request.responseText ? JSON.parse(request.responseText) as Types.PostAssetSchema & ApiErrorBody : null;
+        } catch {
+          body = null;
+        }
+        if (request.status >= 200 && request.status < 300 && body) {
+          onProgress?.(100);
+          resolve(body);
+          return;
+        }
+        reject(new Error(body?.error || body?.detail || 'Asset upload failed'));
+      };
+
+      request.onerror = () => reject(new Error('Asset upload failed'));
+      request.send(formData);
+    });
+  }
+
   async deleteBlogPostAsset(postId: number, assetId: number) {
     return this.request<Types.MessageSchema>(`/api/blog/admin/posts/${postId}/assets/${assetId}`, {
       method: 'DELETE',
@@ -565,6 +700,13 @@ class ApiClient {
     });
   }
 
+  async updateComment(commentId: number, data: Types.CommentUpdateSchema) {
+    return this.request<Types.CommentSchema>(`/api/blog/comments/${commentId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
   async hideComment(commentId: number, note?: string) {
     return this.request<Types.MessageSchema>(`/api/blog/comments/${commentId}/hide`, {
       method: 'POST',
@@ -572,6 +714,19 @@ class ApiClient {
     });
   }
 
+  async unhideComment(commentId: number) {
+    return this.request<Types.MessageSchema>(`/api/blog/comments/${commentId}/unhide`, {
+      method: 'POST',
+    });
+  }
+
+  async deleteComment(commentId: number, note?: string) {
+    return this.request<Types.MessageSchema>(`/api/blog/comments/${commentId}/delete`, {
+      method: 'POST',
+      body: JSON.stringify({ note: note ?? '' }),
+    });
+  }
+
   async listDeletedComments() {
     return this.request<Types.CommentSchema[]>('/api/blog/deleted/comments');
   }
@@ -612,6 +767,30 @@ class ApiClient {
     return this.request<Types.CategorySchema[]>('/api/blog/categories');
   }
 
+  async listAdminCategories() {
+    return this.request<Types.AdminCategorySchema[]>('/api/blog/admin/categories');
+  }
+
+  async createCategory(data: Types.CategoryWriteSchema) {
+    return this.request<Types.AdminCategorySchema>('/api/blog/admin/categories', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async updateCategory(categoryId: number, data: Types.CategoryWriteSchema) {
+    return this.request<Types.AdminCategorySchema>(`/api/blog/admin/categories/${categoryId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteCategory(categoryId: number) {
+    return this.request<Types.MessageSchema>(`/api/blog/admin/categories/${categoryId}`, {
+      method: 'DELETE',
+    });
+  }
+
   async getCategory(slug: string) {
     return this.request<Types.CategorySchema>(`/api/blog/categories/${slug}`);
   }
@@ -631,6 +810,30 @@ class ApiClient {
     return this.request<Types.TagSchema[]>('/api/blog/tags');
   }
 
+  async listAdminTags() {
+    return this.request<Types.AdminTagSchema[]>('/api/blog/admin/tags');
+  }
+
+  async createTag(data: Types.TagWriteSchema) {
+    return this.request<Types.AdminTagSchema>('/api/blog/admin/tags', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async updateTag(tagId: number, data: Types.TagWriteSchema) {
+    return this.request<Types.AdminTagSchema>(`/api/blog/admin/tags/${tagId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteTag(tagId: number) {
+    return this.request<Types.MessageSchema>(`/api/blog/admin/tags/${tagId}`, {
+      method: 'DELETE',
+    });
+  }
+
   async getTag(slug: string) {
     return this.request<Types.TagSchema>(`/api/blog/tags/${slug}`);
   }
@@ -711,6 +914,68 @@ class ApiClient {
     });
   }
 
+  async createEvent(data: Types.EventCreateSchema) {
+    return this.request<Types.EventDetailSchema>('/api/events/', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+  }
+
+  async uploadEventFeaturedImage(eventId: number, file: File) {
+    const formData = new FormData();
+    formData.append('file', file);
+    const token = this.getStorageValue('access_token');
+    const response = await fetch(`${this.baseUrl}/api/events/${eventId}/featured-image`, {
+      method: 'POST',
+      headers: {
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      body: formData,
+    });
+    if (!response.ok) {
+      const body = (await response.json().catch(() => ({}))) as ApiErrorBody;
+      throw new Error(body.error || body.detail || 'Event image upload failed');
+    }
+    return response.json() as Promise<Types.EventDetailSchema>;
+  }
+
+  async deleteEventFeaturedImage(eventId: number) {
+    return this.request<Types.EventDetailSchema>(`/api/events/${eventId}/featured-image`, {
+      method: 'DELETE',
+    });
+  }
+
+  async listEventGallery(eventId: number) {
+    return this.request<Types.EventGalleryItem[]>(`/api/events/${eventId}/gallery`);
+  }
+
+  async uploadEventGalleryImage(eventId: number, file: File, data: { title?: string; alt_text?: string } = {}) {
+    const formData = new FormData();
+    formData.append('file', file);
+    if (data.title) formData.append('title', data.title);
+    if (data.alt_text) formData.append('alt_text', data.alt_text);
+    const token = this.getStorageValue('access_token');
+    const response = await fetch(`${this.baseUrl}/api/events/${eventId}/gallery`, {
+      method: 'POST',
+      headers: {
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      body: formData,
+    });
+    if (!response.ok) {
+      const body = (await response.json().catch(() => ({}))) as ApiErrorBody;
+      throw new Error(body.error || body.detail || 'Event gallery upload failed');
+    }
+    return response.json() as Promise<Types.EventGalleryItem>;
+  }
+
+  async deleteEventGalleryImage(eventId: number, imageId: number) {
+    return this.request<Types.MessageSchema>(`/api/events/${eventId}/gallery/${imageId}`, {
+      method: 'DELETE',
+    });
+  }
+
   async deleteEvent(eventId: number) {
     return this.request<Types.MessageSchema>(`/api/events/${eventId}`, {
       method: 'DELETE',
@@ -826,6 +1091,44 @@ class ApiClient {
     );
   }
 
+  async listDiscountCodes(params?: {
+    search?: string;
+    is_active?: boolean;
+    type?: 'percent' | 'fixed';
+    limit?: number;
+    offset?: number;
+  }) {
+    const query = new URLSearchParams();
+    if (params?.search) query.set('search', params.search);
+    if (params?.is_active != null) query.set('is_active', String(params.is_active));
+    if (params?.type) query.set('type', params.type);
+    if (params?.limit != null) query.set('limit', String(params.limit));
+    if (params?.offset != null) query.set('offset', String(params.offset));
+    return this.request<Types.PagedDiscountCodeSchema>(
+      `/api/payments/admin/discount-codes${query.toString() ? `?${query.toString()}` : ''}`,
+    );
+  }
+
+  async createDiscountCode(data: Types.DiscountCodeWriteSchema) {
+    return this.request<Types.DiscountCodeSchema>('/api/payments/admin/discount-codes', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async updateDiscountCode(codeId: number, data: Types.DiscountCodeWriteSchema) {
+    return this.request<Types.DiscountCodeSchema>(`/api/payments/admin/discount-codes/${codeId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteDiscountCode(codeId: number) {
+    return this.request<Types.MessageSchema>(`/api/payments/admin/discount-codes/${codeId}`, {
+      method: 'DELETE',
+    });
+  }
+
   // ============= Gallery Endpoints =============
   
   async getGalleryImages(params?: {
@@ -874,12 +1177,86 @@ class ApiClient {
     });
   }
 
-  async getMajors(): Promise<Types.MajorOption[]> {
-    return this.request('/api/meta/majors', { method: 'GET' });
+  async getMajors(params?: { search?: string; limit?: number; offset?: number }): Promise<Types.MajorOption[]> {
+    const data = await this.getMajorsPaged({ limit: 100, offset: 0, ...params });
+    return data.results.map((item) => ({ code: item.code, label: item.label, id: item.id, name: item.name, user_count: item.user_count }));
   }
 
-  async getUniversities(): Promise<Types.MajorOption[]> {
-    return this.request('/api/meta/universities', { method: 'GET' });
+  async getUniversities(params?: { search?: string; limit?: number; offset?: number }): Promise<Types.MajorOption[]> {
+    const data = await this.getUniversitiesPaged({ limit: 100, offset: 0, ...params });
+    return data.results.map((item) => ({ code: item.code, label: item.label, id: item.id, name: item.name, user_count: item.user_count }));
+  }
+
+  async getMajorsPaged(params?: { search?: string; limit?: number; offset?: number }) {
+    const query = new URLSearchParams();
+    if (params?.search) query.set('search', params.search);
+    if (params?.limit != null) query.set('limit', String(params.limit));
+    if (params?.offset != null) query.set('offset', String(params.offset));
+    return this.request<Types.PagedMetaOptionSchema>(`/api/meta/majors${query.toString() ? `?${query.toString()}` : ''}`);
+  }
+
+  async getUniversitiesPaged(params?: { search?: string; limit?: number; offset?: number }) {
+    const query = new URLSearchParams();
+    if (params?.search) query.set('search', params.search);
+    if (params?.limit != null) query.set('limit', String(params.limit));
+    if (params?.offset != null) query.set('offset', String(params.offset));
+    return this.request<Types.PagedMetaOptionSchema>(`/api/meta/universities${query.toString() ? `?${query.toString()}` : ''}`);
+  }
+
+  async listAdminMajors(params?: { search?: string; limit?: number; offset?: number }) {
+    const query = new URLSearchParams();
+    if (params?.search) query.set('search', params.search);
+    if (params?.limit != null) query.set('limit', String(params.limit));
+    if (params?.offset != null) query.set('offset', String(params.offset));
+    return this.request<Types.PagedMetaOptionSchema>(`/api/meta/admin/majors${query.toString() ? `?${query.toString()}` : ''}`);
+  }
+
+  async createMajor(data: Types.MetaOptionWriteSchema) {
+    return this.request<Types.MetaOptionSchema>('/api/meta/admin/majors', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async updateMajor(id: number, data: Types.MetaOptionWriteSchema) {
+    return this.request<Types.MetaOptionSchema>(`/api/meta/admin/majors/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteMajor(id: number) {
+    return this.request<Types.MessageSchema>(`/api/meta/admin/majors/${id}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async listAdminUniversities(params?: { search?: string; limit?: number; offset?: number }) {
+    const query = new URLSearchParams();
+    if (params?.search) query.set('search', params.search);
+    if (params?.limit != null) query.set('limit', String(params.limit));
+    if (params?.offset != null) query.set('offset', String(params.offset));
+    return this.request<Types.PagedMetaOptionSchema>(`/api/meta/admin/universities${query.toString() ? `?${query.toString()}` : ''}`);
+  }
+
+  async createUniversity(data: Types.MetaOptionWriteSchema) {
+    return this.request<Types.MetaOptionSchema>('/api/meta/admin/universities', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async updateUniversity(id: number, data: Types.MetaOptionWriteSchema) {
+    return this.request<Types.MetaOptionSchema>(`/api/meta/admin/universities/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteUniversity(id: number) {
+    return this.request<Types.MessageSchema>(`/api/meta/admin/universities/${id}`, {
+      method: 'DELETE',
+    });
   }
 
   async subscribeNewsletter(email: string) {

src/lib/markdown-headings.ts

@@ -0,0 +1,52 @@
+export type MarkdownHeading = {
+  id: string;
+  level: 1 | 2 | 3;
+  text: string;
+};
+
+function plainHeadingText(value: string) {
+  return value
+    .replace(/`([^`]+)`/g, "$1")
+    .replace(/\*\*([^*]+)\*\*/g, "$1")
+    .replace(/\*([^*]+)\*/g, "$1")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/<[^>]*>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function headingIdBase(text: string) {
+  const normalized = text
+    .normalize("NFKC")
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}\s_-]/gu, "")
+    .trim()
+    .replace(/\s+/g, "-")
+    .slice(0, 80);
+
+  return normalized || "section";
+}
+
+export function extractMarkdownHeadings(content?: string): MarkdownHeading[] {
+  const counters = new Map<string, number>();
+
+  return (content || "")
+    .split(/\r?\n/)
+    .map((line) => {
+      const match = /^(#{1,3})\s+(.+?)\s*#*$/.exec(line.trim());
+      if (!match) return null;
+
+      const level = match[1].length as 1 | 2 | 3;
+      const text = plainHeadingText(match[2]);
+      const base = headingIdBase(text);
+      const nextCount = (counters.get(base) || 0) + 1;
+      counters.set(base, nextCount);
+
+      return {
+        id: nextCount === 1 ? base : `${base}-${nextCount}`,
+        level,
+        text,
+      };
+    })
+    .filter(Boolean) as MarkdownHeading[];
+}

src/lib/public-api.ts

@@ -71,15 +71,39 @@ async function requestJson<T>(
   return (await response.json()) as T;
 }
 
-export async function getPublicPosts(options?: { search?: string; limit?: number }) {
+export async function getPublicPosts(options?: {
+  search?: string;
+  category?: string;
+  tag?: string[];
+  author?: string[];
+  limit?: number;
+}) {
   const search = options?.search?.trim();
+  const category = options?.category?.trim();
+  const tag = options?.tag?.filter(Boolean) ?? [];
+  const author = options?.author?.filter(Boolean) ?? [];
 
   return requestJson<Types.PostListSchema[]>("/api/blog/posts", {
     params: {
       limit: options?.limit ?? 50,
       ...(search ? { search } : {}),
+      ...(category ? { category } : {}),
+      ...(tag.length ? { tag } : {}),
+      ...(author.length ? { author } : {}),
     },
-    revalidate: search ? 60 : DEFAULT_REVALIDATE_SECONDS,
+    revalidate: search || category || tag.length || author.length ? 60 : DEFAULT_REVALIDATE_SECONDS,
+  });
+}
+
+export async function getBlogFilters() {
+  return requestJson<Types.BlogFiltersSchema>("/api/blog/filters", {
+    revalidate: DEFAULT_REVALIDATE_SECONDS,
+  });
+}
+
+export async function getBlogBanners() {
+  return requestJson<Types.BlogBannerSchema[]>("/api/blog/banners", {
+    revalidate: DEFAULT_REVALIDATE_SECONDS,
   });
 }
 
@@ -89,6 +113,16 @@ export async function getPublicPost(slug: string) {
   });
 }
 
+export async function getRecommendedPosts(slug: string, limit = 3) {
+  return requestJson<Types.PostListSchema[]>(
+    `/api/blog/posts/${encodeURIComponent(slug)}/recommended`,
+    {
+      params: { limit },
+      revalidate: DEFAULT_REVALIDATE_SECONDS,
+    },
+  );
+}
+
 export async function getPublicEvents(options?: { search?: string; limit?: number }) {
   const search = options?.search?.trim();
 

src/lib/types.ts

@@ -18,6 +18,27 @@ export interface TokenSchema {
 export interface MajorOption {
   code: string;
   label: string;
+  id?: number;
+  name?: string;
+  user_count?: number;
+}
+
+export interface MetaOptionSchema {
+  id: number;
+  code: string;
+  name: string;
+  label: string;
+  user_count?: number;
+}
+
+export interface PagedMetaOptionSchema {
+  count: number;
+  results: MetaOptionSchema[];
+}
+
+export interface MetaOptionWriteSchema {
+  code: string;
+  name: string;
 }
 
 export interface UserProfileSchema {
@@ -62,12 +83,52 @@ export interface UserListSchema {
   full_name?: string | null;
   university?: string | null;
   major?: string | null;
+  profile_picture?: string | null;
+  profile_picture_thumbnail_url?: string | null;
+  profile_picture_preview_url?: string | null;
+  student_id?: string | null;
+  year_of_study?: number | null;
+  bio?: string | null;
+  is_email_verified?: boolean;
+  is_mobile_verified?: boolean;
+  is_deleted?: boolean;
+  deleted_at?: string | null;
+  can_access_blog_admin?: boolean;
+  can_write_blog_posts?: boolean;
+  can_review_blog_posts?: boolean;
   is_active: boolean;
   is_staff: boolean;
   is_superuser: boolean;
   date_joined: string;
 }
 
+export interface AuthorizationRoleSchema {
+  key: string;
+  label: string;
+  description: string;
+  enabled: boolean;
+  locked: boolean;
+}
+
+export interface UserAuthorizationSchema {
+  id: number;
+  username: string;
+  email?: string | null;
+  mobile?: string | null;
+  first_name: string;
+  last_name: string;
+  is_active: boolean;
+  is_staff: boolean;
+  is_superuser: boolean;
+  groups: string[];
+  roles: AuthorizationRoleSchema[];
+}
+
+export interface UserAuthorizationUpdateSchema {
+  is_staff: boolean;
+  groups: string[];
+}
+
 export interface UserRegistrationSchema {
   mobile: string;
   code: string;
@@ -229,6 +290,7 @@ export interface PostListSchema {
     username: string;
     first_name: string;
     last_name: string;
+    bio?: string | null;
     profile_picture?: string;
     profile_picture_thumbnail_url?: string | null;
     profile_picture_preview_url?: string | null;
@@ -238,7 +300,23 @@ export interface PostListSchema {
     name: string;
     slug: string;
     description?: string;
+    parent_id?: number | null;
   };
+  category_path?: Array<{
+    id: number;
+    name: string;
+    slug: string;
+  }>;
+  writers?: Array<{
+    id: number;
+    username: string;
+    first_name: string;
+    last_name: string;
+    bio?: string | null;
+    profile_picture?: string;
+    profile_picture_thumbnail_url?: string | null;
+    profile_picture_preview_url?: string | null;
+  }>;
   tags: Array<{
     id: number;
     name: string;
@@ -265,6 +343,7 @@ export interface PostListSchema {
 export interface PostDetailSchema extends PostListSchema {
   content: string;
   content_html?: string;
+  review_note?: string;
   og_image_url?: string | null;
   views_count?: number;
   assets?: PostAssetSchema[];
@@ -276,6 +355,7 @@ export interface PostCreateSchema {
   excerpt?: string;
   category_id?: number | null;
   tag_ids?: number[];
+  writer_ids?: number[];
   is_featured?: boolean;
   status?: 'draft' | 'submitted' | 'changes_requested' | 'published' | 'archived';
   seo_title?: string;
@@ -323,14 +403,23 @@ export interface CommentSchema {
     username: string;
     first_name: string;
     last_name: string;
+    bio?: string | null;
+    profile_picture?: string | null;
+    profile_picture_thumbnail_url?: string | null;
+    profile_picture_preview_url?: string | null;
   };
   post_id: number;
   post_title: string;
   post_slug: string;
   parent_id?: number;
   created_at: string;
+  updated_at?: string;
   is_approved: boolean;
+  is_hidden?: boolean;
+  is_deleted?: boolean;
   hidden_at?: string | null;
+  deleted_at?: string | null;
+  hidden_replies_count?: number;
   replies?: CommentSchema[];
 }
 
@@ -339,6 +428,19 @@ export interface CommentCreateSchema {
   parent_id?: number;
 }
 
+export interface CommentUpdateSchema {
+  content: string;
+}
+
+export interface BlogBannerSchema {
+  id: number;
+  title?: string;
+  alt_text?: string;
+  image_url: string;
+  url: string;
+  sort_order: number;
+}
+
 export interface BlogInteractionSchema {
   liked: boolean;
   saved: boolean;
@@ -359,9 +461,21 @@ export interface CategorySchema {
   name: string;
   slug: string;
   description?: string;
+  parent_id?: number | null;
   created_at: string;
 }
 
+export interface AdminCategorySchema extends CategorySchema {
+  post_count: number;
+}
+
+export interface CategoryWriteSchema {
+  name: string;
+  slug?: string | null;
+  description?: string | null;
+  parent_id?: number | null;
+}
+
 export interface TagSchema {
   id: number;
   name: string;
@@ -369,6 +483,45 @@ export interface TagSchema {
   created_at: string;
 }
 
+export interface AdminTagSchema extends TagSchema {
+  post_count: number;
+}
+
+export interface TagWriteSchema {
+  name: string;
+  slug?: string | null;
+}
+
+export interface BlogFilterCategory {
+  id: number;
+  name: string;
+  slug: string;
+  parent_id?: number | null;
+  post_count: number;
+  children: BlogFilterCategory[];
+}
+
+export interface BlogFilterTag {
+  id: number;
+  name: string;
+  slug: string;
+  post_count: number;
+}
+
+export interface BlogFilterAuthor {
+  id: number;
+  username: string;
+  first_name: string;
+  last_name: string;
+  post_count: number;
+}
+
+export interface BlogFiltersSchema {
+  categories: BlogFilterCategory[];
+  tags: BlogFilterTag[];
+  authors: BlogFilterAuthor[];
+}
+
 // Events Types
 export interface EventListItemSchema {
   id: number;
@@ -405,6 +558,12 @@ export interface EventGalleryItem {
   absolute_image_blur_url?: string | null;
   width?: number;
   height?: number;
+  file_size_mb?: number;
+  markdown_url?: string;
+  image?: string;
+  alt_text?: string | null;
+  is_public?: boolean;
+  created_at?: string;
 }
 
 export interface EventDetailSchema extends EventListItemSchema {
@@ -417,19 +576,28 @@ export interface EventDetailSchema extends EventListItemSchema {
 export interface EventCreateSchema {
   title: string;
   description: string;
-  start_date: string;
-  end_date?: string;
-  location: string;
-  capacity?: number;
-  event_image?: string;
-  requirements?: string;
-  is_registration_open?: boolean;
+  slug?: string | null;
+  event_type: 'online' | 'on_site' | 'hybrid';
+  address?: string | null;
+  location?: string | null;
+  online_link?: string | null;
+  start_time: string;
+  end_time: string;
+  registration_start_date?: string | null;
+  registration_end_date?: string | null;
+  capacity?: number | null;
+  price?: number | null;
+  status?: 'draft' | 'published' | 'cancelled' | 'completed';
+  registration_success_markdown?: string | null;
+  gallery_image_ids?: number[] | null;
 }
 
 export interface PaymentAdminSchema {
   id: number;
   authority?: string | null;
   ref_id?: string | null;
+  card_pan?: string | null;
+  card_hash?: string | null;
   status: number;
   status_label: string;
   base_amount: number;
@@ -454,6 +622,14 @@ export interface RegistrationAdminSchema {
     first_name: string;
     last_name: string;
     email: string;
+    mobile?: string | null;
+    profile_picture?: string | null;
+    profile_picture_thumbnail_url?: string | null;
+    profile_picture_preview_url?: string | null;
+    university?: string | null;
+    major?: string | null;
+    student_id?: string | null;
+    year_of_study?: number | null;
   };
   payments: PaymentAdminSchema[];
 }
@@ -463,6 +639,7 @@ export interface EventAdminDetailSchema extends EventDetailSchema {
 }
 export interface EventUpdateSchema {
   title?: string;
+  slug?: string | null;
   description?: string;
   event_type?: 'online' | 'on_site' | 'hybrid';
   address?: string | null;
@@ -475,9 +652,47 @@ export interface EventUpdateSchema {
   capacity?: number | null;
   price?: number | null;
   status?: 'draft' | 'published' | 'cancelled' | 'completed';
+  registration_success_markdown?: string | null;
   gallery_image_ids?: number[] | null;
 }
 
+export interface DiscountCodeSchema {
+  id: number;
+  code: string;
+  type: 'percent' | 'fixed';
+  value: number;
+  max_discount?: number | null;
+  is_active: boolean;
+  starts_at?: string | null;
+  ends_at?: string | null;
+  usage_limit_total?: number | null;
+  usage_limit_per_user?: number | null;
+  min_amount?: number | null;
+  applicable_event_ids: number[];
+  usage_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface PagedDiscountCodeSchema {
+  count: number;
+  results: DiscountCodeSchema[];
+}
+
+export interface DiscountCodeWriteSchema {
+  code: string;
+  type: 'percent' | 'fixed';
+  value: number;
+  max_discount?: number | null;
+  is_active?: boolean;
+  starts_at?: string | null;
+  ends_at?: string | null;
+  usage_limit_total?: number | null;
+  usage_limit_per_user?: number | null;
+  min_amount?: number | null;
+  applicable_event_ids?: number[];
+}
+
 export interface EventRegistrationSchema {
   id: number;
   status: 'pending' | 'confirmed' | 'cancelled' | 'attended';
@@ -538,6 +753,197 @@ export interface PaginatedResponse<T> {
   previous?: string;
 }
 
+// Admin analytics
+export interface AnalyticsPointSchema {
+  label: string;
+  value: number;
+}
+
+export interface AnalyticsPointGroupSchema {
+  items: AnalyticsPointSchema[];
+  top_items: AnalyticsPointSchema[];
+  other_count: number;
+  total_count: number;
+}
+
+export interface AnalyticsTrendPointSchema {
+  date: string;
+  label: string;
+  value: number;
+}
+
+export interface AnalyticsRegistrationStatusSchema {
+  status: string;
+  label: string;
+  value: number;
+}
+
+export interface AnalyticsTopEventSchema {
+  id: number;
+  title: string;
+  slug: string;
+  attendees: number;
+  capacity?: number | null;
+  fill_rate?: number | null;
+  revenue: number;
+}
+
+export interface AnalyticsPostPopularitySchema {
+  id: number;
+  title: string;
+  slug: string;
+  likes: number;
+  saves: number;
+  comments: number;
+}
+
+export interface AnalyticsPostPopularityGroupSchema {
+  items: AnalyticsPostPopularitySchema[];
+  top_items: AnalyticsPostPopularitySchema[];
+  other_count: number;
+  total_count: number;
+}
+
+export interface AnalyticsTopPostSchema extends AnalyticsPostPopularitySchema {
+  score: number;
+}
+
+export interface AdminDashboardAnalyticsSchema {
+  filters: {
+    date_from?: string | null;
+    date_to?: string | null;
+    event_id?: number | null;
+    granularity: 'day' | 'week' | 'month';
+  };
+  summary: {
+    total_users: number;
+    verified_users: number;
+    total_events: number;
+    total_registrations: number;
+    total_revenue: number;
+    total_discount: number;
+    published_posts: number;
+    total_likes: number;
+    total_saves: number;
+    total_comments: number;
+  };
+  users: {
+    signup_trend: AnalyticsTrendPointSchema[];
+    by_major: AnalyticsPointSchema[];
+    by_university: AnalyticsPointSchema[];
+    by_year: AnalyticsPointSchema[];
+  };
+  events: {
+    registration_status: AnalyticsRegistrationStatusSchema[];
+    by_major: AnalyticsPointSchema[];
+    by_university: AnalyticsPointSchema[];
+    top_events: AnalyticsTopEventSchema[];
+    registration_trend: AnalyticsTrendPointSchema[];
+  };
+  revenue: {
+    trend: AnalyticsTrendPointSchema[];
+    by_event: AnalyticsPointSchema[];
+    payment_status: AnalyticsRegistrationStatusSchema[];
+    total_paid: number;
+    total_discount: number;
+    total_base: number;
+  };
+  blog: {
+    totals: {
+      posts: number;
+      likes: number;
+      saves: number;
+      comments: number;
+    };
+    post_popularity: AnalyticsPostPopularitySchema[];
+    top_posts: AnalyticsTopPostSchema[];
+    activity_trend: Array<{ date: string; likes: number; saves: number; comments: number }>;
+    by_category: AnalyticsPointSchema[];
+    by_tag: AnalyticsPointSchema[];
+  };
+  achievements: {
+    distinct_participants: number;
+    learning_hours: number;
+    published_content: number;
+    community_engagement: number;
+  };
+}
+
+export interface AnalyticsEventOptionsSchema {
+  count: number;
+  results: Array<{
+    value: string;
+    label: string;
+    description?: string | null;
+  }>;
+}
+
+export interface UserAnalyticsSchema {
+  filters: {
+    date_from?: string | null;
+    date_to?: string | null;
+    granularity: 'day' | 'week' | 'month';
+  };
+  summary: {
+    total_users: number;
+    verified_users: number;
+    unverified_users: number;
+    profile_completion_rate: number;
+  };
+  signup_trend: AnalyticsTrendPointSchema[];
+  by_major: AnalyticsPointGroupSchema;
+  by_university: AnalyticsPointGroupSchema;
+  by_year: AnalyticsPointGroupSchema;
+}
+
+export interface EventAnalyticsSchema {
+  filters: {
+    date_from?: string | null;
+    date_to?: string | null;
+    event_id?: number | null;
+  };
+  summary: {
+    total_events: number;
+    total_registrations: number;
+    distinct_participants: number;
+    total_revenue: number;
+    total_discount: number;
+    total_base: number;
+    learning_hours: number;
+  };
+  registration_status: AnalyticsRegistrationStatusSchema[];
+  payment_status: AnalyticsRegistrationStatusSchema[];
+  attendee_by_major: AnalyticsPointGroupSchema;
+  attendee_by_university: AnalyticsPointGroupSchema;
+  registration_trend: AnalyticsTrendPointSchema[];
+  revenue_trend: AnalyticsTrendPointSchema[];
+  revenue_by_event: AnalyticsPointGroupSchema;
+  top_events: {
+    top_items: AnalyticsTopEventSchema[];
+    other_count: number;
+    total_count: number;
+  };
+}
+
+export interface BlogAnalyticsSchema {
+  filters: {
+    date_from?: string | null;
+    date_to?: string | null;
+  };
+  summary: {
+    published_posts: number;
+    total_likes: number;
+    total_saves: number;
+    total_comments: number;
+    community_engagement: number;
+  };
+  activity_trend: Array<{ date: string; likes: number; saves: number; comments: number }>;
+  post_popularity: AnalyticsPostPopularityGroupSchema;
+  top_posts: AnalyticsTopPostSchema[];
+  by_category: AnalyticsPointGroupSchema;
+  by_tag: AnalyticsPointGroupSchema;
+}
+
 // payment
 export interface CreatePaymentOut {
   start_pay_url: string;

src/lib/utils.ts

@@ -35,6 +35,24 @@ export function formatJalali(iso?: string, withTime: boolean = true): string {
   }
 }
 
+export function formatJalaliDate(iso?: string): string {
+  if (!iso) return '—';
+  try {
+    const date = new Date(iso);
+    const locale = Intl.DateTimeFormat.supportedLocalesOf(['fa-IR-u-ca-persian']).length > 0
+      ? 'fa-IR-u-ca-persian'
+      : 'fa-IR';
+
+    return new Intl.DateTimeFormat(locale, {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    }).format(date);
+  } catch {
+    return '—';
+  }
+}
+
 const DEFAULT_THUMB = "/placeholder.svg";
 
 const pickFirstUrl = (...values: Array<string | null | undefined>) =>
@@ -66,6 +84,22 @@ export const getEventSeoImageUrl = (event: Types.EventListItemSchema) =>
 
 export const getThumbUrl = getEventCardImageUrl;
 
+export const getBlogCardImageUrl = (post: Types.PostListSchema) =>
+  [
+    post.absolute_featured_image_thumbnail_url,
+    post.absolute_featured_image_preview_url,
+    post.absolute_featured_image_url,
+    post.featured_image,
+  ].find((value) => Boolean(value));
+
+export const getBlogHeroImageUrl = (post: Types.PostListSchema) =>
+  [
+    post.absolute_featured_image_preview_url,
+    post.absolute_featured_image_url,
+    post.absolute_featured_image_thumbnail_url,
+    post.featured_image,
+  ].find((value) => Boolean(value));
+
 export const getGalleryImagePreviewUrl = (
   image:
     | Types.EventGalleryItem

src/views/AdminAuthorizations.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2, Search, ShieldCheck, UserCog } from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";
+import { api } from "@/lib/api";
+import type * as Types from "@/lib/types";
+import { cn, resolveErrorMessage } from "@/lib/utils";
+import { useToast } from "@/hooks/use-toast";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+
+const PAGE_SIZE = 25;
+
+const normalizeSearchDigits = (value: string) =>
+  value
+    .replace(/[۰-۹]/g, (digit) => String("۰۱۲۳۴۵۶۷۸۹".indexOf(digit)))
+    .replace(/[٠-٩]/g, (digit) => String("٠١٢٣٤٥٦٧٨٩".indexOf(digit)));
+
+function fullName(user: Pick<Types.UserListSchema, "first_name" | "last_name" | "username">) {
+  return [user.first_name, user.last_name].filter(Boolean).join(" ") || user.username;
+}
+
+export default function AdminAuthorizations() {
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const [searchDraft, setSearchDraft] = useState("");
+  const [search, setSearch] = useState("");
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
+  const [draftAuth, setDraftAuth] = useState<Types.UserAuthorizationUpdateSchema | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const usersQuery = useQuery({
+    queryKey: ["admin", "authorizations", "users", search],
+    queryFn: () => api.listUsers({ search: search || undefined, limit: PAGE_SIZE, offset: 0 }),
+  });
+
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setSearch(normalizeSearchDigits(searchDraft).trim());
+    }, 400);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [searchDraft]);
+
+  const authQuery = useQuery({
+    queryKey: ["admin", "authorizations", selectedUserId],
+    queryFn: () => api.getUserAuthorization(selectedUserId as number),
+    enabled: Boolean(selectedUserId),
+  });
+
+  const selectedAuth = authQuery.data;
+  const isSelf = Boolean(selectedAuth && user?.id === selectedAuth.id);
+  const effectiveDraft = draftAuth ?? (selectedAuth ? {
+    is_staff: selectedAuth.is_staff,
+    groups: selectedAuth.groups.filter((group) => ["blog_editor", "blog_supervisor", "association_admin"].includes(group)),
+  } : null);
+
+  const selectUser = async (target: Types.UserListSchema) => {
+    setSelectedUserId(target.id);
+    setDraftAuth(null);
+  };
+
+  const toggleGroup = (group: string, checked: boolean) => {
+    if (!effectiveDraft || isSelf) return;
+    setDraftAuth({
+      ...effectiveDraft,
+      groups: checked
+        ? Array.from(new Set([...effectiveDraft.groups, group]))
+        : effectiveDraft.groups.filter((item) => item !== group),
+    });
+  };
+
+  const toggleStaff = (checked: boolean) => {
+    if (!effectiveDraft || isSelf) return;
+    setDraftAuth({ ...effectiveDraft, is_staff: checked });
+  };
+
+  const saveAuthorization = async () => {
+    if (!selectedUserId || !effectiveDraft || isSelf) return;
+    try {
+      setSaving(true);
+      const updated = await api.updateUserAuthorization(selectedUserId, effectiveDraft);
+      setDraftAuth({
+        is_staff: updated.is_staff,
+        groups: updated.groups.filter((group) => ["blog_editor", "blog_supervisor", "association_admin"].includes(group)),
+      });
+      toast({ title: "دسترسی کاربر به‌روزرسانی شد", variant: "success" });
+      await usersQuery.refetch();
+      await authQuery.refetch();
+    } catch (error) {
+      toast({
+        title: "ذخیره دسترسی ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-right">
+        <h2 className="text-2xl font-bold">مدیریت دسترسی‌ها</h2>
+        <p className="mt-1 text-sm text-muted-foreground">تخصیص نقش‌های امن و آماده به کاربران. مجوزهای مستقیم Django از این صفحه قابل تغییر نیستند.</p>
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-[380px_1fr]">
+        <Card className="h-fit">
+          <CardHeader className="text-right">
+            <CardTitle>جستجوی کاربر</CardTitle>
+            <CardDescription>نام، موبایل، ایمیل یا نام کاربری را جستجو کنید.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4" dir="ltr">
+            <div className="relative">
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={searchDraft}
+                onChange={(event) => setSearchDraft(event.target.value)}
+                placeholder="جستجو..."
+                className="pl-10 text-right"
+              />
+            </div>
+            {usersQuery.isLoading ? (
+              <div className="flex justify-center py-8 text-muted-foreground">
+                <Loader2 className="h-5 w-5 animate-spin" />
+              </div>
+            ) : usersQuery.data?.length ? (
+              <div className="space-y-2">
+                {usersQuery.data.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    onClick={() => void selectUser(item)}
+                    className={cn(
+                      "w-full rounded-2xl border p-3 text-right transition hover:bg-muted/40",
+                      selectedUserId === item.id ? "border-primary bg-primary/10" : "border-border/70 bg-background",
+                    )}
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <Badge variant={item.is_superuser ? "default" : item.is_staff ? "secondary" : "outline"}>
+                        {item.is_superuser ? "سوپریوزر" : item.is_staff ? "staff" : "کاربر"}
+                      </Badge>
+                      <span className="font-medium">{fullName(item)}</span>
+                    </div>
+                    <div className="mt-2 space-y-1 text-xs text-muted-foreground">
+                      <p dir="ltr" className="text-right">{item.mobile || "بدون شماره موبایل"}</p>
+                      <p>{item.email || item.username}</p>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            ) : (
+              <p className="rounded-2xl border border-dashed p-6 text-center text-sm text-muted-foreground">کاربری یافت نشد.</p>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="text-right">
+            <div className="flex items-center gap-2">
+              <UserCog className="h-5 w-5 text-primary" />
+              <CardTitle>نقش‌های کاربر</CardTitle>
+            </div>
+            <CardDescription>فقط نقش‌های آماده قابل تغییر هستند؛ سوپریوزر خواندنی است.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {!selectedUserId ? (
+              <div className="rounded-3xl border border-dashed p-10 text-center text-sm text-muted-foreground">یک کاربر را از لیست انتخاب کنید.</div>
+            ) : authQuery.isLoading || !selectedAuth || !effectiveDraft ? (
+              <div className="flex justify-center py-12 text-muted-foreground">
+                <Loader2 className="h-5 w-5 animate-spin" />
+              </div>
+            ) : (
+              <div className="space-y-5">
+                <div className="rounded-3xl border bg-muted/20 p-4 text-right">
+                  <p className="text-lg font-bold">{fullName(selectedAuth)}</p>
+                  <p className="mt-1 text-sm text-muted-foreground">{selectedAuth.mobile || selectedAuth.email || selectedAuth.username}</p>
+                  {isSelf ? (
+                    <p className="mt-3 rounded-2xl border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300">
+                      برای جلوگیری از قفل شدن حساب، نقش‌های کاربر فعلی از این صفحه قابل تغییر نیست.
+                    </p>
+                  ) : null}
+                </div>
+
+                <div className="space-y-3" dir="ltr">
+                  {selectedAuth.roles.map((role) => {
+                    const isStaffRole = role.key === "staff_admin";
+                    const isSuperuserRole = role.key === "is_superuser";
+                    const checked = isStaffRole
+                      ? effectiveDraft.is_staff
+                      : isSuperuserRole
+                      ? selectedAuth.is_superuser
+                      : effectiveDraft.groups.includes(role.key);
+                    const disabled = role.locked || isSelf || saving;
+                    return (
+                      <div key={role.key} className="flex items-center justify-between gap-4 rounded-2xl border p-4">
+                        <Switch
+                          checked={checked}
+                          disabled={disabled}
+                          onCheckedChange={(value) => {
+                            if (isStaffRole) toggleStaff(value);
+                            else if (!isSuperuserRole) toggleGroup(role.key, value);
+                          }}
+                        />
+                        <div className="text-right">
+                          <div className="flex items-center justify-end gap-2">
+                            {role.locked ? <ShieldCheck className="h-4 w-4 text-primary" /> : null}
+                            <p className="font-medium">{role.label}</p>
+                          </div>
+                          <p className="mt-1 text-sm text-muted-foreground">{role.description}</p>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                <div className="flex justify-start gap-2">
+                  <Button variant="outline" onClick={() => setDraftAuth(null)} disabled={saving || isSelf}>
+                    بازنشانی تغییرات
+                  </Button>
+                  <Button onClick={saveAuthorization} disabled={saving || isSelf}>
+                    {saving ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : null}
+                    ذخیره دسترسی‌ها
+                  </Button>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/views/AdminBlog.tsx

@@ -3,14 +3,18 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { BookOpenText, CheckCircle2, Clock3, Edit, Eye, Loader2, Plus, Send, XCircle } from "lucide-react";
 import { Link } from "@/lib/router";
+import BlogThumbnail from "@/components/BlogThumbnail";
 import { useAuth } from "@/contexts/AuthContext";
 import { api } from "@/lib/api";
 import type * as Types from "@/lib/types";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useToast } from "@/hooks/use-toast";
 import { formatJalali, resolveErrorMessage } from "@/lib/utils";
 
@@ -30,6 +34,8 @@ export default function AdminBlog() {
   const [search, setSearch] = useState("");
   const [loading, setLoading] = useState(true);
   const [actingId, setActingId] = useState<number | null>(null);
+  const [changesPost, setChangesPost] = useState<Types.PostListSchema | null>(null);
+  const [changesNote, setChangesNote] = useState("");
 
   const canReview = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
 
@@ -77,10 +83,10 @@ export default function AdminBlog() {
     }
   };
 
-  const reviewPost = async (postId: number, action: Types.PostReviewSchema["action"]) => {
+  const reviewPost = async (postId: number, action: Types.PostReviewSchema["action"], note?: string) => {
     setActingId(postId);
     try {
-      await api.reviewBlogPost(postId, { action });
+      await api.reviewBlogPost(postId, { action, note });
       await loadPosts();
       toast({ title: action === "publish" ? "نوشته منتشر شد" : "درخواست اصلاح ثبت شد", variant: "success" });
     } catch (error) {
@@ -90,38 +96,59 @@ export default function AdminBlog() {
     }
   };
 
+  const openChangesDialog = (post: Types.PostListSchema) => {
+    setChangesPost(post);
+    setChangesNote("");
+  };
+
+  const closeChangesDialog = () => {
+    if (actingId) return;
+    setChangesPost(null);
+    setChangesNote("");
+  };
+
+  const requestChanges = async () => {
+    if (!changesPost) return;
+    await reviewPost(changesPost.id, "request_changes", changesNote.trim() || undefined);
+    setChangesPost(null);
+    setChangesNote("");
+  };
+
   return (
     <div className="space-y-6" dir="rtl">
       <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <Button asChild>
-          <Link to="/admin/blog/new/edit">
-            <Plus className="ml-2 h-4 w-4" />
-            نوشته جدید
-          </Link>
-        </Button>
         <div className="text-right">
           <h2 className="text-2xl font-bold">مدیریت بلاگ</h2>
           <p className="mt-1 text-sm text-muted-foreground">
             پیش‌نویس‌ها، صف بررسی، انتشار و اصلاح نوشته‌ها.
           </p>
         </div>
+        <Button asChild>
+          <Link to="/admin/blog/new/edit">
+            <Plus className="ml-2 h-4 w-4" />
+            نوشته جدید
+          </Link>
+        </Button>
       </div>
 
       <div className="grid gap-4 md:grid-cols-4">
-        <Card><CardContent className="flex items-center justify-between p-4"><BookOpenText className="h-5 w-5 text-primary" /><span>کل: {posts.length}</span></CardContent></Card>
-        <Card><CardContent className="flex items-center justify-between p-4"><Clock3 className="h-5 w-5 text-amber-600" /><span>بررسی: {stats.submitted ?? 0}</span></CardContent></Card>
-        <Card><CardContent className="flex items-center justify-between p-4"><CheckCircle2 className="h-5 w-5 text-emerald-600" /><span>منتشر: {stats.published ?? 0}</span></CardContent></Card>
-        <Card><CardContent className="flex items-center justify-between p-4"><XCircle className="h-5 w-5 text-rose-600" /><span>اصلاح: {stats.changes_requested ?? 0}</span></CardContent></Card>
+        <Card><CardContent className="flex items-center flex-row gap-2 p-4"><BookOpenText className="h-5 w-5 text-primary" /><span>کل: {posts.length}</span></CardContent></Card>
+        <Card><CardContent className="flex items-center flex-row gap-2 p-4"><Clock3 className="h-5 w-5 text-amber-600" /><span>بررسی: {stats.submitted ?? 0}</span></CardContent></Card>
+        <Card><CardContent className="flex items-center flex-row gap-2 p-4"><CheckCircle2 className="h-5 w-5 text-emerald-600" /><span>منتشر: {stats.published ?? 0}</span></CardContent></Card>
+        <Card><CardContent className="flex items-center flex-row gap-2 p-4"><XCircle className="h-5 w-5 text-rose-600" /><span>اصلاح: {stats.changes_requested ?? 0}</span></CardContent></Card>
       </div>
 
       <Card>
         <CardHeader>
           <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-            <div className="flex gap-2">
-              <Button variant="outline" onClick={loadPosts}>جستجو</Button>
-              <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="جستجو..." className="w-64 text-right" />
+            <div className="text-right">
+              <CardTitle>نوشته‌ها</CardTitle>
+              <CardDescription>دسترسی نویسنده‌ها به نوشته‌های خودشان محدود می‌شود.</CardDescription>
+            </div>
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="جستجو..." className="w-full text-right sm:w-64" />
               <Select value={status} onValueChange={setStatus}>
-                <SelectTrigger className="w-48"><SelectValue /></SelectTrigger>
+                <SelectTrigger className="w-full sm:w-48"><SelectValue /></SelectTrigger>
                 <SelectContent>
                   <SelectItem value="all">همه وضعیت‌ها</SelectItem>
                   <SelectItem value="draft">پیش‌نویس</SelectItem>
@@ -132,10 +159,6 @@ export default function AdminBlog() {
                 </SelectContent>
               </Select>
             </div>
-            <div className="text-right">
-              <CardTitle>نوشته‌ها</CardTitle>
-              <CardDescription>دسترسی نویسنده‌ها به نوشته‌های خودشان محدود می‌شود.</CardDescription>
-            </div>
           </div>
         </CardHeader>
         <CardContent className="space-y-3">
@@ -143,35 +166,117 @@ export default function AdminBlog() {
             <div className="flex justify-center py-10"><Loader2 className="h-5 w-5 animate-spin" /></div>
           ) : posts.length ? (
             posts.map((post) => (
-              <div key={post.id} className="flex flex-col gap-3 rounded-2xl border p-4 md:flex-row md:items-center md:justify-between">
-                <div className="flex flex-wrap gap-2">
-                  <Button variant="outline" size="sm" asChild>
-                    <Link to={`/admin/blog/${post.id}/preview`}><Eye className="ml-2 h-4 w-4" />پیش‌نمایش</Link>
-                  </Button>
-                  <Button variant="secondary" size="sm" asChild>
-                    <Link to={`/admin/blog/${post.id}/edit`}><Edit className="ml-2 h-4 w-4" />ویرایش</Link>
-                  </Button>
+              <div key={post.id} className="flex flex-col gap-4 rounded-2xl border p-3 sm:p-4 md:flex-row md:items-center md:justify-between">
+                <div className="flex min-w-0 flex-1 items-start gap-3 md:gap-4">
+                  <BlogThumbnail
+                    post={post}
+                    imageUrl={post.absolute_featured_image_thumbnail_url || post.absolute_featured_image_preview_url || post.absolute_featured_image_url || post.featured_image}
+                    className="h-20 w-24 shrink-0 rounded-xl sm:h-24 sm:w-36 md:h-28 md:w-44"
+                    imageClassName="group-hover:scale-100"
+                  />
+                  <div className="min-w-0 flex-1 text-right">
+                    <div className="flex flex-col-reverse flex-wrap items-start gap-2 sm:flex-row sm:items-center">
+                      <h3 className="line-clamp-2 font-semibold leading-7">{post.title}</h3>
+                      <Badge variant={post.status === "published" ? "default" : "secondary"}>{statusLabels[post.status] ?? post.status}</Badge>
+                    </div>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      {post.updated_at ? formatJalali(post.updated_at, false) : ""}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-2 md:grid md:grid-cols-2 md:grid-rows-2" dir="ltr">
+                  <div className="flex flex-1 basis-[calc(33.333%-0.5rem)] md:col-start-1 md:row-start-1 md:block md:basis-auto">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button variant="outline" size="sm" asChild className="w-full">
+                          <Link
+                            to={`/admin/blog/${post.id}/preview`}
+                            aria-label="پیش‌نمایش"
+                            className="flex justify-center"
+                          >
+                            <Eye className="h-4 w-4" />
+                          </Link>
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>پیش‌نمایش</TooltipContent>
+                    </Tooltip>
+                  </div>
+
+                  <div className="flex flex-1 basis-[calc(33.333%-0.5rem)] md:col-start-1 md:row-start-2 md:block md:basis-auto">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button variant="secondary" size="sm" asChild className="w-full">
+                          <Link
+                            to={`/admin/blog/${post.id}/edit`}
+                            aria-label="ویرایش"
+                            className="flex justify-center"
+                          >
+                            <Edit className="h-4 w-4" />
+                          </Link>
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>ویرایش</TooltipContent>
+                    </Tooltip>
+                  </div>
+
                   {post.status === "draft" || post.status === "changes_requested" ? (
-                    <Button size="sm" onClick={() => submitPost(post.id)} disabled={actingId === post.id}>
-                      <Send className="ml-2 h-4 w-4" />ارسال برای بررسی
-                    </Button>
+                    <div className="flex flex-1 basis-[calc(33.333%-0.5rem)] md:col-start-2 md:row-start-1 md:block md:basis-auto">
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            size="sm"
+                            onClick={() => submitPost(post.id)}
+                            disabled={actingId === post.id}
+                            aria-label="ارسال برای بررسی"
+                            className="w-full"
+                          >
+                            <Send className="h-4 w-4" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>ارسال برای بررسی</TooltipContent>
+                      </Tooltip>
+                    </div>
                   ) : null}
+
                   {canReview && post.status === "submitted" ? (
                     <>
-                      <Button size="sm" onClick={() => reviewPost(post.id, "publish")} disabled={actingId === post.id}>انتشار</Button>
-                      <Button size="sm" variant="outline" onClick={() => reviewPost(post.id, "request_changes")} disabled={actingId === post.id}>درخواست اصلاح</Button>
+                      <div className="flex flex-1 basis-[calc(33.333%-0.5rem)] md:col-start-2 md:row-start-1 md:block md:basis-auto">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              size="sm"
+                              onClick={() => reviewPost(post.id, "publish")}
+                              disabled={actingId === post.id}
+                              aria-label="انتشار"
+                              className="w-full"
+                            >
+                              <CheckCircle2 className="h-4 w-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>انتشار</TooltipContent>
+                        </Tooltip>
+                      </div>
+
+                      <div className="flex flex-1 basis-[calc(33.333%-0.5rem)] md:col-start-2 md:row-start-2 md:block md:basis-auto">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => openChangesDialog(post)}
+                              disabled={actingId === post.id}
+                              aria-label="درخواست اصلاح"
+                              className="w-full"
+                            >
+                              <XCircle className="h-4 w-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>درخواست اصلاح</TooltipContent>
+                        </Tooltip>
+                      </div>
                     </>
                   ) : null}
                 </div>
-                <div className="text-right">
-                  <div className="flex flex-wrap items-center justify-end gap-2">
-                    <Badge variant={post.status === "published" ? "default" : "secondary"}>{statusLabels[post.status] ?? post.status}</Badge>
-                    <h3 className="font-semibold">{post.title}</h3>
-                  </div>
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    {post.updated_at ? formatJalali(post.updated_at, false) : ""}
-                  </p>
-                </div>
               </div>
             ))
           ) : (
@@ -181,6 +286,45 @@ export default function AdminBlog() {
           )}
         </CardContent>
       </Card>
+
+      <Dialog open={Boolean(changesPost)} onOpenChange={(open) => (open ? undefined : closeChangesDialog())}>
+        <DialogContent className="max-w-xl rounded-3xl" dir="rtl">
+          <DialogHeader className="mt-6 text-right md:text-right">
+            <DialogTitle>درخواست اصلاح نوشته</DialogTitle>
+            <DialogDescription>
+              توضیح کوتاهی بنویسید تا نویسنده بداند چه چیزی باید در نوشته اصلاح شود.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="rounded-2xl border bg-muted/30 p-3 text-right">
+            <p className="text-xs text-muted-foreground">نوشته</p>
+            <p className="mt-1 font-semibold">{changesPost?.title}</p>
+          </div>
+          <form
+            className="space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void requestChanges();
+            }}
+          >
+            <Textarea
+              value={changesNote}
+              onChange={(event) => setChangesNote(event.target.value)}
+              placeholder="مثلاً: بخش مقدمه نیاز به منبع دارد، تیترها را واضح‌تر کنید، یا نمونه کد را اصلاح کنید..."
+              className="min-h-36 text-right leading-7"
+              autoFocus
+            />
+            <div className="flex flex-wrap justify-start gap-2">
+              <Button type="submit" disabled={!changesPost || actingId === changesPost.id}>
+                {actingId === changesPost?.id ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : null}
+                ثبت درخواست اصلاح
+              </Button>
+              <Button type="button" variant="outline" onClick={closeChangesDialog} disabled={Boolean(actingId)}>
+                انصراف
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

src/views/AdminBlogAssets.tsx

@@ -1,29 +1,96 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-import { ArrowRight, Copy, Loader2, Trash2, UploadCloud } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  AlertCircle,
+  ArrowRight,
+  CheckCircle2,
+  Copy,
+  ExternalLink,
+  File,
+  FileArchive,
+  FileText,
+  ImageIcon,
+  Loader2,
+  Trash2,
+  UploadCloud,
+  Video,
+  X,
+} from "lucide-react";
 import { useRouter } from "next/navigation";
+import ConfirmAction from "@/components/ConfirmAction";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Progress } from "@/components/ui/progress";
 import { api } from "@/lib/api";
 import type * as Types from "@/lib/types";
-import { resolveErrorMessage } from "@/lib/utils";
+import { cn, resolveErrorMessage } from "@/lib/utils";
 import { useToast } from "@/hooks/use-toast";
 
 type Props = {
   postId: number;
 };
 
+type QueueStatus = "queued" | "uploading" | "uploaded" | "failed";
+
+type QueueItem = {
+  id: string;
+  file: File;
+  progress: number;
+  status: QueueStatus;
+  error?: string;
+};
+
+const formatSize = (size: number) => {
+  if (size < 1024 * 1024) return `${Math.ceil(size / 1024)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const fileKindFromAsset = (asset: Types.PostAssetSchema) => asset.file_type;
+
+const fileKindFromFile = (file: File): Types.PostAssetSchema["file_type"] => {
+  if (file.type.startsWith("image/")) return "image";
+  if (file.type.startsWith("video/")) return "video";
+  if (file.type.includes("zip") || /\.(zip|rar|7z|tar|gz)$/i.test(file.name)) return "archive";
+  if (file.type || /\.(pdf|doc|docx|xls|xlsx|ppt|pptx|txt|md)$/i.test(file.name)) return "document";
+  return "other";
+};
+
+const iconForKind = (kind: Types.PostAssetSchema["file_type"]) => {
+  if (kind === "image") return ImageIcon;
+  if (kind === "video") return Video;
+  if (kind === "document") return FileText;
+  if (kind === "archive") return FileArchive;
+  return File;
+};
+
+const statusLabel: Record<QueueStatus, string> = {
+  queued: "در صف",
+  uploading: "در حال آپلود",
+  uploaded: "آپلود شد",
+  failed: "ناموفق",
+};
+
 export default function AdminBlogAssets({ postId }: Props) {
   const router = useRouter();
   const { toast } = useToast();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const processingRef = useRef(false);
   const [post, setPost] = useState<Types.PostDetailSchema | null>(null);
   const [assets, setAssets] = useState<Types.PostAssetSchema[]>([]);
+  const [queue, setQueue] = useState<QueueItem[]>([]);
   const [loading, setLoading] = useState(true);
-  const [uploading, setUploading] = useState(false);
   const [deletingId, setDeletingId] = useState<number | null>(null);
+  const [previewAsset, setPreviewAsset] = useState<Types.PostAssetSchema | null>(null);
+
+  const hasActiveUpload = queue.some((item) => item.status === "uploading");
+  const queueSummary = useMemo(() => {
+    const uploaded = queue.filter((item) => item.status === "uploaded").length;
+    const failed = queue.filter((item) => item.status === "failed").length;
+    return { uploaded, failed, total: queue.length };
+  }, [queue]);
 
   const loadData = async () => {
     if (!Number.isFinite(postId)) {
@@ -55,27 +122,71 @@ export default function AdminBlogAssets({ postId }: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [postId]);
 
-  const uploadAsset = async (file: File) => {
-    setUploading(true);
-    try {
-      const asset = await api.uploadBlogPostAsset(postId, file, { title: file.name });
-      setAssets((prev) => [asset, ...prev]);
-      toast({ title: "فایل آپلود شد", variant: "success" });
-    } catch (error) {
-      toast({
-        title: "آپلود ناموفق بود",
-        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
-        variant: "destructive",
+  useEffect(() => {
+    const nextItem = queue.find((item) => item.status === "queued");
+    if (!nextItem || processingRef.current) return;
+
+    processingRef.current = true;
+    setQueue((current) =>
+      current.map((item) => (item.id === nextItem.id ? { ...item, status: "uploading", progress: 1 } : item)),
+    );
+
+    api.uploadBlogPostAssetWithProgress(
+      postId,
+      nextItem.file,
+      { title: nextItem.file.name },
+      (progress) => {
+        setQueue((current) =>
+          current.map((item) => (item.id === nextItem.id ? { ...item, progress: Math.max(progress, item.progress) } : item)),
+        );
+      },
+    )
+      .then((asset) => {
+        setAssets((current) => [asset, ...current]);
+        setQueue((current) =>
+          current.map((item) => (item.id === nextItem.id ? { ...item, status: "uploaded", progress: 100 } : item)),
+        );
+      })
+      .catch((error) => {
+        setQueue((current) =>
+          current.map((item) =>
+            item.id === nextItem.id
+              ? { ...item, status: "failed", error: resolveErrorMessage(error, "آپلود ناموفق بود") }
+              : item,
+          ),
+        );
+      })
+      .finally(() => {
+        processingRef.current = false;
+        setQueue((current) => [...current]);
       });
-    } finally {
-      setUploading(false);
-    }
+  }, [postId, queue]);
+
+  const addFilesToQueue = (files: FileList | File[]) => {
+    const nextFiles = Array.from(files);
+    if (!nextFiles.length) return;
+    setQueue((current) => [
+      ...current,
+      ...nextFiles.map((file) => ({
+        id: `${file.name}-${file.size}-${file.lastModified}-${crypto.randomUUID()}`,
+        file,
+        progress: 0,
+        status: "queued" as const,
+      })),
+    ]);
   };
 
   const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
+    if (event.target.files) addFilesToQueue(event.target.files);
     event.currentTarget.value = "";
-    if (file) void uploadAsset(file);
+  };
+
+  const removeQueueItem = (itemId: string) => {
+    setQueue((current) => current.filter((item) => item.id !== itemId || item.status === "uploading"));
+  };
+
+  const clearFinishedQueue = () => {
+    setQueue((current) => current.filter((item) => item.status === "queued" || item.status === "uploading"));
   };
 
   const copySnippet = async (asset: Types.PostAssetSchema) => {
@@ -101,6 +212,15 @@ export default function AdminBlogAssets({ postId }: Props) {
     }
   };
 
+  const openAssetPreview = (asset: Types.PostAssetSchema) => {
+    const fileUrl = asset.absolute_file_url;
+    if (asset.file_type === "image" || asset.file_type === "video") {
+      setPreviewAsset(asset);
+      return;
+    }
+    if (fileUrl) window.open(fileUrl, "_blank", "noopener,noreferrer");
+  };
+
   if (loading) {
     return (
       <div className="flex min-h-[50vh] items-center justify-center" dir="rtl">
@@ -110,8 +230,8 @@ export default function AdminBlogAssets({ postId }: Props) {
   }
 
   return (
-    <div className="space-y-6" dir="rtl">
-      <div className="flex flex-col gap-4 md:flex-row-reverse md:items-center md:justify-between">
+    <div className="space-y-6">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
         <div className="text-right">
           <h2 className="text-2xl font-bold">مرکز آپلود نوشته</h2>
           <p className="mt-1 text-sm text-muted-foreground">
@@ -124,56 +244,136 @@ export default function AdminBlogAssets({ postId }: Props) {
         </Button>
       </div>
 
-      <Card>
-        <CardHeader className="text-right">
-          <CardTitle>آپلود فایل</CardTitle>
-          <CardDescription>تصاویر، ویدئوها، اسناد و فایل‌های فشرده مجاز هستند. لینک مارک‌داون هر فایل بعد از آپلود قابل کپی است.</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-5">
-          <input ref={fileInputRef} type="file" className="hidden" onChange={onFileChange} />
-          <Button variant="secondary" onClick={() => fileInputRef.current?.click()} disabled={uploading}>
-            {uploading ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : <UploadCloud className="ml-2 h-4 w-4" />}
-            آپلود فایل
-          </Button>
+      <Card className="overflow-hidden">
+        <CardContent className="space-y-5 p-4 md:p-6">
+          <input ref={fileInputRef} type="file" multiple className="hidden" onChange={onFileChange} />
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="flex min-h-48 w-full flex-col items-center justify-center rounded-2xl border border-dashed bg-muted/20 p-6 text-center transition hover:bg-muted/40"
+          >
+            <UploadCloud className="mb-3 h-12 w-12 text-muted-foreground" />
+            <span className="font-semibold">افزودن فایل‌های بیشتر</span>
+            <span className="mt-1 text-sm text-muted-foreground">چند فایل را همزمان انتخاب کنید؛ فایل‌ها یکی‌یکی آپلود می‌شوند.</span>
+          </button>
 
-          {assets.length ? (
-            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-              {assets.map((asset) => (
-                <div key={asset.id} className="rounded-2xl border p-3">
-                  <div className="flex flex-row-reverse items-start justify-between gap-3">
-                    <div className="text-right">
-                      <div className="flex flex-wrap items-center justify-end gap-2">
-                        <Badge variant="secondary">{asset.file_type}</Badge>
-                        <p className="font-medium">{asset.title}</p>
-                      </div>
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        {asset.mime_type || "file"} · {Math.ceil(asset.size / 1024)} KB
-                      </p>
-                    </div>
-                    <div className="flex shrink-0 gap-1">
-                      <Button variant="ghost" size="icon" onClick={() => copySnippet(asset)}>
-                        <Copy className="h-4 w-4" />
-                      </Button>
+          {queue.length ? (
+            <div className="space-y-3">
+              <div className="flex flex-col gap-2 text-right text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+                <Button variant="outline" size="sm" onClick={clearFinishedQueue} disabled={hasActiveUpload}>
+                  پاکسازی فایل‌های تمام‌شده
+                </Button>
+                <span>
+                  {queueSummary.total} فایل · {queueSummary.uploaded} موفق · {queueSummary.failed} ناموفق
+                </span>
+              </div>
+              {queue.map((item) => {
+                const kind = fileKindFromFile(item.file);
+                const Icon = iconForKind(kind);
+                return (
+                  <div key={item.id} className="rounded-2xl border bg-background p-3">
+                    <div className="flex items-center gap-3">
                       <Button
+                        type="button"
                         variant="ghost"
                         size="icon"
-                        className="text-destructive hover:text-destructive"
-                        onClick={() => deleteAsset(asset.id)}
-                        disabled={deletingId === asset.id}
+                        className="h-8 w-8 shrink-0 text-muted-foreground"
+                        disabled={item.status === "uploading"}
+                        onClick={() => removeQueueItem(item.id)}
                       >
-                        {deletingId === asset.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+                        <X className="h-4 w-4" />
                       </Button>
+                      <div className="min-w-0 flex-1 text-right">
+                        <p className="truncate text-sm font-medium">{item.file.name}</p>
+                        <p className="text-xs text-muted-foreground">{formatSize(item.file.size)}</p>
+                      </div>
+                      <Badge
+                        variant={item.status === "failed" ? "destructive" : item.status === "uploaded" ? "default" : "secondary"}
+                        className="shrink-0"
+                      >
+                        {statusLabel[item.status]}
+                      </Badge>
+                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-muted">
+                        <Icon className="h-5 w-5 text-muted-foreground" />
+                      </div>
+                    </div>
+                    <div className="mt-3 flex items-center gap-2">
+                      {item.status === "uploaded" ? <CheckCircle2 className="h-4 w-4 text-emerald-600" /> : null}
+                      {item.status === "failed" ? <AlertCircle className="h-4 w-4 text-destructive" /> : null}
+                      <Progress value={item.progress} className="h-2" />
+                    </div>
+                    {item.error ? <p className="mt-2 text-right text-xs text-destructive">{item.error}</p> : null}
+                  </div>
+                );
+              })}
+            </div>
+          ) : null}
+
+          {assets.length ? (
+            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+              {assets.map((asset) => {
+                const kind = fileKindFromAsset(asset);
+                const Icon = iconForKind(kind);
+                const previewUrl = asset.absolute_thumbnail_url || asset.absolute_preview_url || asset.absolute_file_url;
+                return (
+                  <div key={asset.id} className="rounded-2xl border bg-background p-3">
+                    <button
+                      type="button"
+                      onClick={() => openAssetPreview(asset)}
+                      className={cn(
+                        "flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl bg-muted text-muted-foreground",
+                        asset.absolute_file_url ? "cursor-pointer hover:bg-muted/70" : "cursor-default",
+                      )}
+                    >
+                      {kind === "image" && previewUrl ? (
+                        <img src={previewUrl} alt={asset.alt_text || asset.title} className="h-full w-full object-cover" />
+                      ) : (
+                        <Icon className="h-10 w-10" />
+                      )}
+                    </button>
+                    <div className="mt-3 flex items-start gap-3">
+                      <div className="flex shrink-0 gap-1">
+                        <Button variant="ghost" size="icon" onClick={() => copySnippet(asset)} aria-label="کپی مارک‌داون">
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                        {asset.absolute_file_url ? (
+                          <Button variant="ghost" size="icon" asChild aria-label="باز کردن فایل">
+                            <a href={asset.absolute_file_url} target="_blank" rel="noreferrer">
+                              <ExternalLink className="h-4 w-4" />
+                            </a>
+                          </Button>
+                        ) : null}
+                        <ConfirmAction
+                          title="حذف فایل"
+                          description={`آیا از حذف فایل «${asset.title}» مطمئن هستید؟ لینک‌های استفاده‌شده از این فایل دیگر کار نخواهند کرد.`}
+                          onConfirm={() => deleteAsset(asset.id)}
+                          disabled={deletingId === asset.id}
+                          trigger={
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="text-destructive hover:text-destructive"
+                              disabled={deletingId === asset.id}
+                              aria-label="حذف فایل"
+                            >
+                              {deletingId === asset.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+                            </Button>
+                          }
+                        />
+                      </div>
+                      <div className="min-w-0 flex-1 text-right">
+                        <div className="flex flex-wrap items-center justify-end gap-2">
+                          <Badge variant="secondary">{asset.file_type}</Badge>
+                          <p className="truncate font-medium">{asset.title}</p>
+                        </div>
+                        <p className="mt-1 text-xs text-muted-foreground">
+                          {asset.mime_type || "file"} · {formatSize(asset.size)}
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  {asset.absolute_preview_url ? (
-                    <img src={asset.absolute_preview_url} alt={asset.alt_text || asset.title} className="mt-3 aspect-video w-full rounded-xl object-cover" />
-                  ) : asset.absolute_file_url ? (
-                    <a className="mt-3 block truncate rounded-xl bg-muted px-3 py-2 text-left text-xs underline" href={asset.absolute_file_url} target="_blank" rel="noreferrer">
-                      {asset.absolute_file_url}
-                    </a>
-                  ) : null}
-                </div>
-              ))}
+                );
+              })}
             </div>
           ) : (
             <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">
@@ -182,6 +382,25 @@ export default function AdminBlogAssets({ postId }: Props) {
           )}
         </CardContent>
       </Card>
+
+      <Dialog open={Boolean(previewAsset)} onOpenChange={(open) => !open && setPreviewAsset(null)}>
+        <DialogContent className="max-w-4xl" dir="rtl">
+          <DialogHeader className="text-right">
+            <DialogTitle>{previewAsset?.title}</DialogTitle>
+            <DialogDescription>{previewAsset?.caption || previewAsset?.mime_type || "پیش‌نمایش فایل"}</DialogDescription>
+          </DialogHeader>
+          {previewAsset?.file_type === "image" ? (
+            <img
+              src={previewAsset.absolute_preview_url || previewAsset.absolute_file_url || ""}
+              alt={previewAsset.alt_text || previewAsset.title}
+              className="max-h-[75vh] w-full rounded-2xl object-contain"
+            />
+          ) : null}
+          {previewAsset?.file_type === "video" && previewAsset.absolute_file_url ? (
+            <video src={previewAsset.absolute_file_url} className="max-h-[75vh] w-full rounded-2xl" controls />
+          ) : null}
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

src/views/AdminBlogCategories.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Edit3, Loader2, Plus, RotateCcw, Trash2 } from "lucide-react";
+import ConfirmAction from "@/components/ConfirmAction";
+import { useAuth } from "@/contexts/AuthContext";
+import { api } from "@/lib/api";
+import type * as Types from "@/lib/types";
+import { resolveErrorMessage, toPersianDigits } from "@/lib/utils";
+import { useToast } from "@/hooks/use-toast";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+type CategoryForm = {
+  name: string;
+  slug: string;
+  description: string;
+  parent_id: string;
+};
+
+const emptyForm: CategoryForm = {
+  name: "",
+  slug: "",
+  description: "",
+  parent_id: "none",
+};
+
+export default function AdminBlogCategories() {
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const [search, setSearch] = useState("");
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editing, setEditing] = useState<Types.AdminCategorySchema | null>(null);
+  const [form, setForm] = useState<CategoryForm>(emptyForm);
+  const [submitting, setSubmitting] = useState(false);
+
+  const canDelete = Boolean(user?.is_superuser);
+
+  const categoriesQuery = useQuery({
+    queryKey: ["admin", "blog", "categories"],
+    queryFn: () => api.listAdminCategories(),
+  });
+
+  const deletedQuery = useQuery({
+    queryKey: ["admin", "blog", "categories", "deleted"],
+    queryFn: () => api.listDeletedCategories(),
+    enabled: canDelete,
+  });
+
+  const categories = useMemo(() => categoriesQuery.data ?? [], [categoriesQuery.data]);
+  const rootCategories = useMemo(() => categories.filter((category) => !category.parent_id), [categories]);
+  const editingHasChildren = useMemo(
+    () => Boolean(editing && categories.some((category) => category.parent_id === editing.id)),
+    [categories, editing],
+  );
+  const visibleCategories = useMemo(() => {
+    const needle = search.trim().toLowerCase();
+    if (!needle) return categories;
+    return categories.filter((category) =>
+      [category.name, category.slug, category.description ?? ""].some((value) => value.toLowerCase().includes(needle)),
+    );
+  }, [categories, search]);
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyForm);
+    setDialogOpen(true);
+  };
+
+  const openEdit = (category: Types.AdminCategorySchema) => {
+    setEditing(category);
+    setForm({
+      name: category.name,
+      slug: category.slug,
+      description: category.description ?? "",
+      parent_id: category.parent_id ? String(category.parent_id) : "none",
+    });
+    setDialogOpen(true);
+  };
+
+  const closeDialog = (force = false) => {
+    if (submitting && !force) return;
+    setDialogOpen(false);
+    setEditing(null);
+    setForm(emptyForm);
+  };
+
+  const saveCategory = async () => {
+    const payload: Types.CategoryWriteSchema = {
+      name: form.name.trim(),
+      slug: form.slug.trim() || null,
+      description: form.description,
+      parent_id: form.parent_id === "none" ? null : Number(form.parent_id),
+    };
+    try {
+      setSubmitting(true);
+      if (editing) {
+        await api.updateCategory(editing.id, payload);
+      } else {
+        await api.createCategory(payload);
+      }
+      toast({ title: editing ? "دسته‌بندی ویرایش شد" : "دسته‌بندی ساخته شد", variant: "success" });
+      await categoriesQuery.refetch();
+      closeDialog(true);
+    } catch (error) {
+      toast({
+        title: "ذخیره دسته‌بندی ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const deleteCategory = async (category: Types.AdminCategorySchema) => {
+    try {
+      await api.deleteCategory(category.id);
+      toast({ title: "دسته‌بندی حذف شد", variant: "success" });
+      await Promise.all([categoriesQuery.refetch(), deletedQuery.refetch()]);
+    } catch (error) {
+      toast({
+        title: "حذف دسته‌بندی ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const restoreCategory = async (category: Types.CategorySchema) => {
+    try {
+      await api.restoreCategory(category.id);
+      toast({ title: "دسته‌بندی بازیابی شد", variant: "success" });
+      await Promise.all([categoriesQuery.refetch(), deletedQuery.refetch()]);
+    } catch (error) {
+      toast({
+        title: "بازیابی دسته‌بندی ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="text-right">
+          <h2 className="text-2xl font-bold">دسته‌بندی‌های بلاگ</h2>
+          <p className="mt-1 text-sm text-muted-foreground">ساخت و مدیریت دسته‌بندی‌های تو در تو برای نوشته‌ها.</p>
+        </div>
+        <Button onClick={openCreate} className="gap-2">
+          <Plus className="h-4 w-4" />
+          دسته‌بندی جدید
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader className="text-right">
+          <CardTitle>لیست دسته‌بندی‌ها</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="جستجو در نام، اسلاگ یا توضیح..." className="text-right" />
+          {categoriesQuery.isLoading ? (
+            <div className="flex justify-center py-10 text-muted-foreground">
+              <Loader2 className="h-5 w-5 animate-spin" />
+            </div>
+          ) : visibleCategories.length ? (
+            <div className="overflow-x-auto rounded-2xl border">
+              <table className="w-full min-w-[760px] text-sm">
+                <thead className="bg-muted/40 text-muted-foreground">
+                  <tr>
+                    <th className="px-4 py-3 text-right">عنوان</th>
+                    {/* <th className="px-4 py-3 text-right">اسلاگ</th> */}
+                    <th className="px-4 py-3 text-right">والد</th>
+                    <th className="px-4 py-3 text-right">تعداد نوشته</th>
+                    <th className="px-4 py-3 text-right"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {visibleCategories.map((category) => (
+                    <tr key={category.id} className="border-t">
+                      <td className="px-4 py-3 font-medium">{category.name}</td>
+                      {/* <td className="px-4 py-3 text-muted-foreground">{category.slug}</td> */}
+                      <td className="px-4 py-3 text-muted-foreground">
+                        {categories.find((item) => item.id === category.parent_id)?.name ?? "—"}
+                      </td>
+                      <td className="px-4 py-3">{toPersianDigits(String(category.post_count))}</td>
+                      <td className="px-4 py-3">
+                        <div className="flex flex-wrap justify-end gap-2">
+                          <Button size="sm" variant="outline" onClick={() => openEdit(category)}>
+                            <Edit3 className="h-3.5 w-3.5" />
+                          </Button>
+                          {canDelete ? (
+                            <ConfirmAction
+                              title="حذف دسته‌بندی"
+                              description={`آیا از حذف دسته‌بندی «${category.name}» مطمئن هستید؟`}
+                              onConfirm={() => deleteCategory(category)}
+                              trigger={
+                                <Button size="sm" variant="outline" className="text-destructive hover:text-destructive">
+                                  <Trash2 className="h-3.5 w-3.5" />
+                                </Button>
+                              }
+                            />
+                          ) : null}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <p className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">دسته‌بندی‌ای یافت نشد.</p>
+          )}
+        </CardContent>
+      </Card>
+
+      {canDelete ? (
+        <Card>
+          <CardHeader className="text-right">
+            <CardTitle>دسته‌بندی‌های حذف‌شده</CardTitle>
+            <CardDescription>بازیابی رکوردهای حذف شده.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {deletedQuery.data?.length ? (
+              <div className="flex flex-col gap-3">
+                {deletedQuery.data.map((category) => (
+                  <div key={category.id} className="flex items-center justify-between rounded-2xl border p-3">
+                    <span className="font-medium">{category.name}</span>
+                    <Button size="sm" variant="outline" onClick={() => void restoreCategory(category)}>
+                      <RotateCcw className="ml-1 h-3.5 w-3.5" />
+                      بازیابی
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">مورد حذف‌شده‌ای وجود ندارد.</p>
+            )}
+          </CardContent>
+        </Card>
+      ) : null}
+
+      <Dialog open={dialogOpen} onOpenChange={(open) => !open && closeDialog()}>
+        <DialogContent dir="rtl" className="text-right">
+          <DialogHeader>
+            <DialogTitle>{editing ? "ویرایش دسته‌بندی" : "دسته‌بندی جدید"}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <Label className="mb-2 block">نام</Label>
+              <Input value={form.name} onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))} />
+            </div>
+            <div>
+              <Label className="mb-2 block">اسلاگ اختیاری</Label>
+              <Input value={form.slug} onChange={(event) => setForm((prev) => ({ ...prev, slug: event.target.value }))} dir="ltr" />
+            </div>
+            <div>
+              <Label className="mb-2 block">والد</Label>
+              <Select
+                value={form.parent_id}
+                onValueChange={(value) => setForm((prev) => ({ ...prev, parent_id: value }))}
+                disabled={editingHasChildren}
+              >
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">بدون والد</SelectItem>
+                  {rootCategories.filter((item) => item.id !== editing?.id).map((category) => (
+                    <SelectItem key={category.id} value={String(category.id)}>{category.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {editingHasChildren ? (
+                <p className="mt-2 text-xs text-muted-foreground">
+                  دسته‌بندی‌هایی که زیرمجموعه دارند باید در سطح ریشه باقی بمانند.
+                </p>
+              ) : null}
+            </div>
+            <div>
+              <Label className="mb-2 block">توضیحات</Label>
+              <Textarea value={form.description} onChange={(event) => setForm((prev) => ({ ...prev, description: event.target.value }))} className="min-h-24" />
+            </div>
+            <div className="flex justify-start gap-2">
+              <Button variant="outline" onClick={() => closeDialog()} disabled={submitting}>انصراف</Button>
+              <Button onClick={saveCategory} disabled={submitting || !form.name.trim()}>
+                {submitting ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : null}
+                ذخیره
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/views/AdminBlogEditor.tsx

@@ -1,9 +1,13 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { ArrowLeft, ArrowRight, FolderUp, ImageUp, Loader2, Save, Send, Trash2 } from "lucide-react";
+import { AlertTriangle, ArrowLeft, ArrowRight, FolderUp, ImageUp, Loader2, Save, Send, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
+import ConfirmAction from "@/components/ConfirmAction";
 import Markdown from "@/components/Markdown";
+import MarkdownEditor, { type MarkdownDirectionMode } from "@/components/MarkdownEditor";
+import { useAuth } from "@/contexts/AuthContext";
+import { Link } from "@/lib/router";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -11,6 +15,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/lib/api";
 import type * as Types from "@/lib/types";
@@ -27,6 +32,7 @@ const emptyForm: Types.PostCreateSchema = {
   excerpt: "",
   category_id: null,
   tag_ids: [],
+  writer_ids: [],
   status: "draft",
   is_featured: false,
   seo_title: "",
@@ -40,19 +46,24 @@ const emptyForm: Types.PostCreateSchema = {
 
 export default function AdminBlogEditor({ postId }: Props) {
   const router = useRouter();
+  const { user } = useAuth();
   const { toast } = useToast();
   const featuredInputRef = useRef<HTMLInputElement | null>(null);
   const [form, setForm] = useState<Types.PostCreateSchema>(emptyForm);
   const [post, setPost] = useState<Types.PostDetailSchema | null>(null);
   const [categories, setCategories] = useState<Types.CategorySchema[]>([]);
   const [tags, setTags] = useState<Types.TagSchema[]>([]);
+  const [users, setUsers] = useState<NonNullable<Types.PostListSchema["writers"]>>([]);
   const [loading, setLoading] = useState(Boolean(postId));
   const [saving, setSaving] = useState(false);
   const [uploadingFeatured, setUploadingFeatured] = useState(false);
+  const [editorDirection, setEditorDirection] = useState<MarkdownDirectionMode>("auto");
 
   const isNew = postId == null;
   const featuredImage = post?.absolute_featured_image_preview_url || post?.absolute_featured_image_url || post?.featured_image;
   const canPersistPost = form.title.trim() && form.content.trim();
+  const canAssignWriters = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
+  const reviewNote = post?.status === "changes_requested" ? post.review_note?.trim() : "";
 
   useEffect(() => {
     Promise.all([api.getCategories(), api.getTags()])
@@ -63,6 +74,13 @@ export default function AdminBlogEditor({ postId }: Props) {
       .catch(() => undefined);
   }, []);
 
+  useEffect(() => {
+    if (!canAssignWriters) return;
+    api.listBlogWriters()
+      .then((data) => setUsers(data))
+      .catch(() => undefined);
+  }, [canAssignWriters]);
+
   useEffect(() => {
     if (!postId) return;
     setLoading(true);
@@ -75,6 +93,7 @@ export default function AdminBlogEditor({ postId }: Props) {
           excerpt: data.excerpt ?? "",
           category_id: data.category?.id ?? null,
           tag_ids: data.tags.map((tag) => tag.id),
+          writer_ids: data.writers?.map((writer) => writer.id) ?? [data.author.id],
           status: data.status as Types.PostCreateSchema["status"],
           is_featured: data.is_featured,
           seo_title: data.seo_title ?? "",
@@ -97,6 +116,7 @@ export default function AdminBlogEditor({ postId }: Props) {
   }, [postId, toast]);
 
   const selectedTagIds = useMemo(() => form.tag_ids ?? [], [form.tag_ids]);
+  const selectedWriterIds = useMemo(() => form.writer_ids ?? [], [form.writer_ids]);
 
   const updateForm = <K extends keyof Types.PostCreateSchema>(key: K, value: Types.PostCreateSchema[K]) => {
     setForm((prev) => ({ ...prev, [key]: value }));
@@ -155,13 +175,6 @@ export default function AdminBlogEditor({ postId }: Props) {
     return savePost();
   };
 
-  const openUploadCenter = async () => {
-    const targetPost = await ensureSavedPost();
-    if (targetPost) {
-      router.push(`/admin/blog/${targetPost.id}/assets`);
-    }
-  };
-
   const onFeaturedImageChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     event.currentTarget.value = "";
@@ -213,27 +226,54 @@ export default function AdminBlogEditor({ postId }: Props) {
   }
 
   return (
-    <div className="space-y-6" dir="rtl">
-      <div className="flex flex-col gap-4 md:flex-row-reverse md:items-center md:justify-between">
-        <div className="text-right">
-          <h2 className="text-2xl font-bold">{isNew ? "نوشته جدید" : "ویرایش نوشته"}</h2>
-          <p className="mt-1 text-sm text-muted-foreground">
-            متن را با مارک‌داون بنویسید، تصویر شاخص را تنظیم کنید و فایل‌های داخل متن را از مرکز آپلود جداگانه مدیریت کنید.
-          </p>
+    <div className="space-y-6">
+      <div className="rounded-3xl border bg-background/90 p-4 shadow-sm">
+        <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
+          <div className="text-right">
+            <div className="flex flex-wrap items-center gap-2">
+              <h2 className="text-2xl font-bold">{isNew ? "نوشته جدید" : "ویرایش نوشته"}</h2>
+              <Badge variant="outline">{form.status || "draft"}</Badge>
+            </div>
+            <p className="mt-1 text-sm text-muted-foreground">
+              نوشتن مارک‌داون، پیش‌نمایش زنده و تنظیمات انتشار در یک محیط مینیمال.
+            </p>
+          </div>
+          <div className="flex flex-wrap justify-start gap-2">
+            <Button variant="outline" onClick={() => router.push("/admin/blog")}>
+              <ArrowRight className="ml-2 h-4 w-4" />
+              بازگشت
+            </Button>
+            <Button variant="secondary" onClick={savePost} disabled={saving}>
+              {saving ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : <Save className="ml-2 h-4 w-4" />}
+              ذخیره پیش‌نویس
+            </Button>
+            <Button onClick={submitForReview} disabled={saving || !canPersistPost}>
+              <Send className="ml-2 h-4 w-4" />
+              ارسال برای بررسی
+            </Button>
+          </div>
         </div>
-        <Button variant="outline" onClick={() => router.push("/admin/blog")}>
-          <ArrowRight className="ml-2 h-4 w-4" />
-          بازگشت
-        </Button>
       </div>
 
-      <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
-        <Card>
-          <CardHeader className="text-right">
-            <CardTitle>محتوا و سئو</CardTitle>
-            <CardDescription>عنوان، متن مارک‌داون و متادیتای موتورهای جست‌وجو.</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-5">
+      {reviewNote ? (
+        <div className="rounded-3xl border border-amber-300/70 bg-amber-50 p-5 text-amber-950 shadow-sm dark:border-amber-500/40 dark:bg-amber-950/30 dark:text-amber-100">
+          <div className="flex items-start gap-3 text-right">
+            <AlertTriangle className="mt-1 h-5 w-5 shrink-0 text-amber-600 dark:text-amber-300" />
+            <div className="space-y-2">
+              <p className="font-bold">این نوشته نیازمند اصلاح است</p>
+              <p className="text-sm leading-7">{reviewNote}</p>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      <Card>
+        <CardHeader className="text-right">
+          <CardTitle>مشخصات نوشته</CardTitle>
+          <CardDescription>اطلاعات اصلی، دسته‌بندی، نویسندگان، تصویر شاخص و فایل‌های ضمیمه.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-6 xl:grid-cols-[1fr_320px]">
+          <div className="space-y-5">
             <div className="grid gap-4 md:grid-cols-2">
               <div>
                 <Label className="mb-2 block text-right">عنوان</Label>
@@ -261,46 +301,33 @@ export default function AdminBlogEditor({ postId }: Props) {
               <Textarea value={form.excerpt ?? ""} onChange={(event) => updateForm("excerpt", event.target.value)} className="min-h-20 text-right" />
             </div>
 
-            <div>
-              <Label className="mb-2 block text-right">متن مارک‌داون</Label>
-              <Textarea
-                value={form.content}
-                onChange={(event) => updateForm("content", event.target.value)}
-                className="min-h-[420px] font-mono text-left"
-                dir="ltr"
-              />
-            </div>
-
             <div className="grid gap-4 md:grid-cols-2">
               <div>
-                <Label className="mb-2 block text-right">SEO Title</Label>
-                <Input value={form.seo_title ?? ""} onChange={(event) => updateForm("seo_title", event.target.value)} className="text-right" maxLength={70} />
-              </div>
-              <div>
-                <Label className="mb-2 block text-right">Focus Keyword</Label>
-                <Input value={form.focus_keyword ?? ""} onChange={(event) => updateForm("focus_keyword", event.target.value)} className="text-right" />
-              </div>
-            </div>
-
-            <div>
-              <Label className="mb-2 block text-right">SEO Description</Label>
-              <Textarea value={form.seo_description ?? ""} onChange={(event) => updateForm("seo_description", event.target.value)} className="min-h-20 text-right" maxLength={170} />
-            </div>
-
-            <div className="grid gap-4 md:grid-cols-2">
-              <div>
-                <Label className="mb-2 block text-right">Canonical URL</Label>
-                <Input value={form.canonical_url ?? ""} onChange={(event) => updateForm("canonical_url", event.target.value)} dir="ltr" />
+                <Label className="mb-2 block text-right">وضعیت</Label>
+                <Select
+                  value={form.status || "draft"}
+                  onValueChange={(value) => updateForm("status", value as Types.PostCreateSchema["status"])}
+                  disabled={!canAssignWriters}
+                >
+                  <SelectTrigger><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="draft">پیش‌نویس</SelectItem>
+                    <SelectItem value="submitted">در انتظار بررسی</SelectItem>
+                    <SelectItem value="changes_requested">نیازمند تغییر</SelectItem>
+                    <SelectItem value="published">منتشر شده</SelectItem>
+                    <SelectItem value="archived">آرشیو</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
               <div className="flex items-center justify-end gap-2 pt-8">
-                <Label>noindex</Label>
-                <Checkbox checked={Boolean(form.noindex)} onCheckedChange={(checked) => updateForm("noindex", Boolean(checked))} />
+                <Label>نوشته ویژه</Label>
+                <Checkbox checked={Boolean(form.is_featured)} onCheckedChange={(checked) => updateForm("is_featured", Boolean(checked))} />
               </div>
             </div>
 
             <div>
               <Label className="mb-2 block text-right">برچسب‌ها</Label>
-              <div className="flex flex-wrap justify-end gap-2">
+              <div className="flex flex-wrap gap-2">
                 {tags.map((tag) => {
                   const selected = selectedTagIds.includes(tag.id);
                   return (
@@ -309,12 +336,7 @@ export default function AdminBlogEditor({ postId }: Props) {
                       type="button"
                       size="sm"
                       variant={selected ? "default" : "outline"}
-                      onClick={() => {
-                        updateForm(
-                          "tag_ids",
-                          selected ? selectedTagIds.filter((id) => id !== tag.id) : [...selectedTagIds, tag.id],
-                        );
-                      }}
+                      onClick={() => updateForm("tag_ids", selected ? selectedTagIds.filter((id) => id !== tag.id) : [...selectedTagIds, tag.id])}
                     >
                       {tag.name}
                     </Button>
@@ -322,84 +344,173 @@ export default function AdminBlogEditor({ postId }: Props) {
                 })}
               </div>
             </div>
-          </CardContent>
-        </Card>
 
-        <div className="space-y-6">
-          <Card>
-            <CardHeader className="text-right">
-              <CardTitle>تصویر شاخص</CardTitle>
-              <CardDescription>این تصویر به عنوان تامبنیل کارت‌های لیست بلاگ و کاور نوشته استفاده می‌شود.</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <input ref={featuredInputRef} type="file" accept="image/*" className="hidden" onChange={onFeaturedImageChange} />
-              <div className="overflow-hidden rounded-2xl border bg-muted">
-                {featuredImage ? (
-                  <img src={featuredImage} alt={post?.title || form.title || "thumbnail"} className="aspect-video w-full object-cover" />
-                ) : (
-                  <div className="flex aspect-video items-center justify-center text-sm text-muted-foreground">
-                    تصویری انتخاب نشده است.
-                  </div>
-                )}
-              </div>
-              <div className="flex flex-wrap justify-end gap-2">
-                {post?.featured_image || post?.absolute_featured_image_url ? (
-                  <Button variant="outline" onClick={deleteFeaturedImage} disabled={uploadingFeatured}>
-                    <Trash2 className="ml-2 h-4 w-4" />
-                    حذف تصویر
-                  </Button>
-                ) : null}
-                <Button variant="secondary" onClick={() => featuredInputRef.current?.click()} disabled={uploadingFeatured || saving}>
-                  {uploadingFeatured ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : <ImageUp className="ml-2 h-4 w-4" />}
-                  انتخاب تصویر
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="text-right">
-              <CardTitle>مرکز آپلود</CardTitle>
-              <CardDescription>فایل‌های داخل متن، تصاویر، اسناد و آرشیوها در صفحه جداگانه همین نوشته مدیریت می‌شوند.</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <Button className="w-full justify-center rounded-2xl py-6" variant="outline" onClick={openUploadCenter} disabled={saving}>
-                <FolderUp className="ml-2 h-4 w-4" />
-                رفتن به مرکز آپلود
-                <ArrowLeft className="mr-2 h-4 w-4" />
-              </Button>
-              {!post?.id ? (
-                <p className="text-right text-xs text-muted-foreground">
-                  برای نوشته جدید، ابتدا پیش‌نویس ذخیره می‌شود و سپس مرکز آپلود باز خواهد شد.
+            {canAssignWriters ? (
+              <div>
+                <Label className="mb-2 block text-right">نویسندگان</Label>
+                <div className="flex flex-wrap gap-2">
+                  {users.map((writer) => {
+                    const selected = selectedWriterIds.includes(writer.id);
+                    const fullName = [writer.first_name, writer.last_name].filter(Boolean).join(" ") || writer.username;
+                    return (
+                      <Button
+                        key={writer.id}
+                        type="button"
+                        size="sm"
+                        variant={selected ? "default" : "outline"}
+                        onClick={() => updateForm("writer_ids", selected ? selectedWriterIds.filter((id) => id !== writer.id) : [...selectedWriterIds, writer.id])}
+                      >
+                        {fullName}
+                      </Button>
+                    );
+                  })}
+                </div>
+                <p className="mt-2 text-right text-xs text-muted-foreground">
+                  مالک اصلی نوشته تغییر نمی‌کند؛ این گزینه فقط لیست نویسندگان عمومی را تنظیم می‌کند.
                 </p>
-              ) : null}
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="text-right">
-              <CardTitle>پیش‌نمایش</CardTitle>
-              <CardDescription>همان متن مارک‌داون بدون ویرایش WYSIWYG.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="rounded-2xl border bg-background p-4">
-                <Markdown content={form.content || "هنوز محتوایی نوشته نشده است."} justify size="base" />
               </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
+            ) : null}
+          </div>
 
-      <div className="sticky bottom-4 z-20 flex flex-wrap justify-end gap-3 rounded-2xl border bg-background/90 p-3 shadow-lg backdrop-blur">
-        <Button variant="secondary" onClick={savePost} disabled={saving}>
-          {saving ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : <Save className="ml-2 h-4 w-4" />}
-          ذخیره پیش‌نویس
-        </Button>
-        <Button onClick={submitForReview} disabled={saving || !canPersistPost}>
-          <Send className="ml-2 h-4 w-4" />
-          ارسال برای بررسی
-        </Button>
-      </div>
+          <div className="space-y-4">
+            <input ref={featuredInputRef} type="file" accept="image/*" className="hidden" onChange={onFeaturedImageChange} />
+            <div className="overflow-hidden rounded-2xl border bg-muted">
+              {featuredImage ? (
+                <img src={featuredImage} alt={post?.title || form.title || "thumbnail"} className="aspect-video w-full object-cover" />
+              ) : (
+                <div className="flex aspect-video items-center justify-center text-sm text-muted-foreground">
+                  تصویری انتخاب نشده است.
+                </div>
+              )}
+            </div>
+            <div className="flex flex-wrap justify-end gap-2">
+              {post?.featured_image || post?.absolute_featured_image_url ? (
+                <ConfirmAction
+                  title="حذف تصویر شاخص"
+                  description="آیا از حذف تصویر شاخص این نوشته مطمئن هستید؟"
+                  onConfirm={deleteFeaturedImage}
+                  disabled={uploadingFeatured}
+                  trigger={
+                    <Button variant="outline" disabled={uploadingFeatured}>
+                  <Trash2 className="ml-2 h-4 w-4" />
+                  حذف تصویر
+                    </Button>
+                  }
+                />
+              ) : null}
+              <Button variant="secondary" onClick={() => featuredInputRef.current?.click()} disabled={uploadingFeatured || saving}>
+                {uploadingFeatured ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : <ImageUp className="ml-2 h-4 w-4" />}
+                انتخاب تصویر شاخص
+              </Button>
+            </div>
+            {post?.id ? (
+              <Button asChild className="w-full justify-center rounded-2xl py-6" variant="outline">
+                <Link to={`/admin/blog/${post.id}/assets`}>
+                  <FolderUp className="ml-2 h-4 w-4" />
+                  رفتن به مرکز آپلود
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                </Link>
+              </Button>
+            ) : (
+              <div className="rounded-2xl border border-dashed p-4 text-right text-sm text-muted-foreground">
+                برای باز شدن مرکز آپلود، ابتدا نوشته را به عنوان پیش‌نویس ذخیره کنید.
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="text-right">
+          <CardTitle>متن نوشته</CardTitle>
+          <CardDescription>ویرایشگر مارک‌داون در کنار پیش‌نمایش زنده</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="hidden grid-cols-2 gap-0 overflow-hidden bg-muted/20 md:grid">
+            <div className="bg-background ">
+              {/* <div className="border-b px-4 py-3 text-right text-sm font-medium">متن مارک‌داون</div> */}
+              <MarkdownEditor
+                value={form.content}
+                onChange={(value) => updateForm("content", value)}
+                minHeight="620px"
+                directionMode={editorDirection}
+                onDirectionModeChange={setEditorDirection}
+                onSave={savePost}
+                className="rounded-none border-0"
+              />
+            </div>
+            <div className="bg-background">
+              {/* <div className="border-b px-4 py-3 text-right text-sm font-medium">پیش‌نمایش</div> */}
+              <div className="min-h-[560px] p-5">
+                <Markdown content={form.content || "هنوز محتوایی نوشته نشده است."} justify={false} size="base" />
+              </div>
+            </div>
+          </div>
+
+          <Tabs defaultValue="editor" className="md:hidden" dir="rtl">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="editor">ویرایش</TabsTrigger>
+              <TabsTrigger value="preview">پیش‌نمایش</TabsTrigger>
+            </TabsList>
+            <TabsContent value="editor">
+              <MarkdownEditor
+                value={form.content}
+                onChange={(value) => updateForm("content", value)}
+                minHeight="520px"
+                directionMode={editorDirection}
+                onDirectionModeChange={setEditorDirection}
+                onSave={savePost}
+              />
+            </TabsContent>
+            <TabsContent value="preview">
+              <div className="min-h-[520px] rounded-2xl border bg-background p-4">
+                <Markdown content={form.content || "هنوز محتوایی نوشته نشده است."} justify={false} size="base" />
+              </div>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="text-right">
+          <CardTitle>تنظیمات سئو</CardTitle>
+          {/* <CardDescription>این بخش جدا از متن اصلی است تا جریان نوشتن ساده و متمرکز بماند.</CardDescription> */}
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div>
+              <Label className="mb-2 block text-right">SEO Title</Label>
+              <Input value={form.seo_title ?? ""} onChange={(event) => updateForm("seo_title", event.target.value)} className="text-right" maxLength={70} />
+            </div>
+            <div>
+              <Label className="mb-2 block text-right">Focus Keyword</Label>
+              <Input value={form.focus_keyword ?? ""} onChange={(event) => updateForm("focus_keyword", event.target.value)} className="text-right" />
+            </div>
+          </div>
+          <div>
+            <Label className="mb-2 block text-right">SEO Description</Label>
+            <Textarea value={form.seo_description ?? ""} onChange={(event) => updateForm("seo_description", event.target.value)} className="min-h-20 text-right" maxLength={170} />
+          </div>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div>
+              <Label className="mb-2 block text-right">Canonical URL</Label>
+              <Input value={form.canonical_url ?? ""} onChange={(event) => updateForm("canonical_url", event.target.value)} dir="ltr" />
+            </div>
+            <div>
+              <Label className="mb-2 block text-right">OG Title</Label>
+              <Input value={form.og_title ?? ""} onChange={(event) => updateForm("og_title", event.target.value)} className="text-right" />
+            </div>
+          </div>
+          <div>
+            <Label className="mb-2 block text-right">OG Description</Label>
+            <Textarea value={form.og_description ?? ""} onChange={(event) => updateForm("og_description", event.target.value)} className="min-h-20 text-right" />
+          </div>
+          <div className="flex items-center justify-end gap-2 rounded-2xl border p-4">
+            <Label>noindex</Label>
+            <Checkbox checked={Boolean(form.noindex)} onCheckedChange={(checked) => updateForm("noindex", Boolean(checked))} />
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 }

src/views/AdminBlogTags.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Edit3, Loader2, Plus, RotateCcw, Trash2 } from "lucide-react";
+import ConfirmAction from "@/components/ConfirmAction";
+import { useAuth } from "@/contexts/AuthContext";
+import { api } from "@/lib/api";
+import type * as Types from "@/lib/types";
+import { resolveErrorMessage, toPersianDigits } from "@/lib/utils";
+import { useToast } from "@/hooks/use-toast";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type TagForm = {
+  name: string;
+  slug: string;
+};
+
+const emptyForm: TagForm = {
+  name: "",
+  slug: "",
+};
+
+export default function AdminBlogTags() {
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const [search, setSearch] = useState("");
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editing, setEditing] = useState<Types.AdminTagSchema | null>(null);
+  const [form, setForm] = useState<TagForm>(emptyForm);
+  const [submitting, setSubmitting] = useState(false);
+  const canDelete = Boolean(user?.is_superuser);
+
+  const tagsQuery = useQuery({
+    queryKey: ["admin", "blog", "tags"],
+    queryFn: () => api.listAdminTags(),
+  });
+
+  const deletedQuery = useQuery({
+    queryKey: ["admin", "blog", "tags", "deleted"],
+    queryFn: () => api.listDeletedTags(),
+    enabled: canDelete,
+  });
+
+  const tags = useMemo(() => tagsQuery.data ?? [], [tagsQuery.data]);
+  const visibleTags = useMemo(() => {
+    const needle = search.trim().toLowerCase();
+    if (!needle) return tags;
+    return tags.filter((tag) => [tag.name, tag.slug].some((value) => value.toLowerCase().includes(needle)));
+  }, [search, tags]);
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyForm);
+    setDialogOpen(true);
+  };
+
+  const openEdit = (tag: Types.AdminTagSchema) => {
+    setEditing(tag);
+    setForm({ name: tag.name, slug: tag.slug });
+    setDialogOpen(true);
+  };
+
+  const closeDialog = (force = false) => {
+    if (submitting && !force) return;
+    setDialogOpen(false);
+    setEditing(null);
+    setForm(emptyForm);
+  };
+
+  const saveTag = async () => {
+    const payload: Types.TagWriteSchema = {
+      name: form.name.trim(),
+      slug: form.slug.trim() || null,
+    };
+    try {
+      setSubmitting(true);
+      if (editing) {
+        await api.updateTag(editing.id, payload);
+      } else {
+        await api.createTag(payload);
+      }
+      toast({ title: editing ? "برچسب ویرایش شد" : "برچسب ساخته شد", variant: "success" });
+      await tagsQuery.refetch();
+      closeDialog(true);
+    } catch (error) {
+      toast({
+        title: "ذخیره برچسب ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const deleteTag = async (tag: Types.AdminTagSchema) => {
+    try {
+      await api.deleteTag(tag.id);
+      toast({ title: "برچسب حذف شد", variant: "success" });
+      await Promise.all([tagsQuery.refetch(), deletedQuery.refetch()]);
+    } catch (error) {
+      toast({
+        title: "حذف برچسب ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const restoreTag = async (tag: Types.TagSchema) => {
+    try {
+      await api.restoreTag(tag.id);
+      toast({ title: "برچسب بازیابی شد", variant: "success" });
+      await Promise.all([tagsQuery.refetch(), deletedQuery.refetch()]);
+    } catch (error) {
+      toast({
+        title: "بازیابی برچسب ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="text-right">
+          <h2 className="text-2xl font-bold">برچسب‌های بلاگ</h2>
+          <p className="mt-1 text-sm text-muted-foreground">مدیریت موضوعات و برچسب‌هایی که روی نوشته‌ها استفاده می‌شوند.</p>
+        </div>
+        <Button onClick={openCreate} className="gap-2">
+          <Plus className="h-4 w-4" />
+          برچسب جدید
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader className="text-right">
+          <CardTitle>لیست برچسب‌ها</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="جستجو در نام یا اسلاگ..." className="text-right" />
+          {tagsQuery.isLoading ? (
+            <div className="flex justify-center py-10 text-muted-foreground">
+              <Loader2 className="h-5 w-5 animate-spin" />
+            </div>
+          ) : visibleTags.length ? (
+            <div className="overflow-x-auto rounded-2xl border">
+              <table className="w-full min-w-[620px] text-sm">
+                <thead className="bg-muted/40 text-muted-foreground">
+                  <tr>
+                    <th className="px-4 py-3 text-right">عنوان</th>
+                    {/* <th className="px-4 py-3 text-right">اسلاگ</th> */}
+                    <th className="px-4 py-3 text-right">تعداد نوشته</th>
+                    <th className="px-4 py-3 text-right"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {visibleTags.map((tag) => (
+                    <tr key={tag.id} className="border-t">
+                      <td className="px-4 py-3 font-medium">{tag.name}</td>
+                      {/* <td className="px-4 py-3 text-muted-foreground">{tag.slug}</td> */}
+                      <td className="px-4 py-3">{toPersianDigits(String(tag.post_count))}</td>
+                      <td className="px-4 py-3">
+                        <div className="flex flex-wrap gap-2 justify-end">
+                          <Button size="sm" variant="outline" onClick={() => openEdit(tag)}>
+                            <Edit3 className="h-3.5 w-3.5" />
+                          </Button>
+                          {canDelete ? (
+                            <ConfirmAction
+                              title="حذف برچسب"
+                              description={`آیا از حذف برچسب «${tag.name}» مطمئن هستید؟`}
+                              onConfirm={() => deleteTag(tag)}
+                              trigger={
+                                <Button size="sm" variant="outline" className="text-destructive hover:text-destructive">
+                                  <Trash2 className="h-3.5 w-3.5" />
+                                </Button>
+                              }
+                            />
+                          ) : null}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <p className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">برچسبی یافت نشد.</p>
+          )}
+        </CardContent>
+      </Card>
+
+      {canDelete ? (
+        <Card>
+          <CardHeader className="text-right">
+            <CardTitle>برچسب‌های حذف‌شده</CardTitle>
+            <CardDescription>بازیابی رکوردهای حذف شده.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {deletedQuery.data?.length ? (
+              <div className="flex flex-col gap-3">
+                {deletedQuery.data.map((tag) => (
+                  <div key={tag.id} className="flex items-center justify-between rounded-2xl border p-3">
+                    <span className="font-medium">{tag.name}</span>
+                    <Button size="sm" variant="outline" onClick={() => void restoreTag(tag)}>
+                      <RotateCcw className="ml-1 h-3.5 w-3.5" />
+                      بازیابی
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">مورد حذف‌شده‌ای وجود ندارد.</p>
+            )}
+          </CardContent>
+        </Card>
+      ) : null}
+
+      <Dialog open={dialogOpen} onOpenChange={(open) => !open && closeDialog()}>
+        <DialogContent dir="rtl" className="text-right">
+          <DialogHeader>
+            <DialogTitle>{editing ? "ویرایش برچسب" : "برچسب جدید"}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <Label className="mb-2 block">نام</Label>
+              <Input value={form.name} onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))} />
+            </div>
+            <div>
+              <Label className="mb-2 block">اسلاگ اختیاری</Label>
+              <Input value={form.slug} onChange={(event) => setForm((prev) => ({ ...prev, slug: event.target.value }))} dir="ltr" />
+            </div>
+            <div className="flex justify-start gap-2">
+              <Button variant="outline" onClick={() => closeDialog()} disabled={submitting}>انصراف</Button>
+              <Button onClick={saveTag} disabled={submitting || !form.name.trim()}>
+                {submitting ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : null}
+                ذخیره
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/views/AdminCoupons.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Edit3, Plus, Trash2 } from "lucide-react";
+import AdminDateTimeField from "@/components/AdminDateTimeField";
+import ConfirmAction from "@/components/ConfirmAction";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import type { DiscountCodeSchema, DiscountCodeWriteSchema } from "@/lib/types";
+import { api } from "@/lib/api";
+import { formatNumberPersian, resolveErrorMessage } from "@/lib/utils";
+import { useToast } from "@/hooks/use-toast";
+
+const PAGE_SIZE = 20;
+
+const emptyForm: DiscountCodeWriteSchema = {
+  code: "",
+  type: "percent",
+  value: 0,
+  max_discount: null,
+  is_active: true,
+  starts_at: null,
+  ends_at: null,
+  usage_limit_total: null,
+  usage_limit_per_user: null,
+  min_amount: null,
+  applicable_event_ids: [],
+};
+
+export default function AdminCoupons() {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [search, setSearch] = React.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React.useState("");
+  const [page, setPage] = React.useState(1);
+  const [editing, setEditing] = React.useState<DiscountCodeSchema | null>(null);
+  const [open, setOpen] = React.useState(false);
+  const [form, setForm] = React.useState<DiscountCodeWriteSchema>(emptyForm);
+
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedSearch(search.trim()), 300);
+    return () => window.clearTimeout(timer);
+  }, [search]);
+
+  const query = useQuery({
+    queryKey: ["admin", "coupons", debouncedSearch, page],
+    queryFn: () => api.listDiscountCodes({ search: debouncedSearch || undefined, limit: PAGE_SIZE, offset: (page - 1) * PAGE_SIZE }),
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: () => (editing ? api.updateDiscountCode(editing.id, form) : api.createDiscountCode(form)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["admin", "coupons"] });
+      setOpen(false);
+      toast({ title: "کد تخفیف ذخیره شد", variant: "success" });
+    },
+    onError: (error) => toast({ title: "خطا", description: resolveErrorMessage(error), variant: "destructive" }),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: number) => api.deleteDiscountCode(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["admin", "coupons"] });
+      toast({ title: "کد تخفیف حذف شد", variant: "success" });
+    },
+    onError: (error) => toast({ title: "خطا", description: resolveErrorMessage(error), variant: "destructive" }),
+  });
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyForm);
+    setOpen(true);
+  };
+
+  const openEdit = (item: DiscountCodeSchema) => {
+    setEditing(item);
+    setForm({
+      code: item.code,
+      type: item.type,
+      value: item.value,
+      max_discount: item.max_discount,
+      is_active: item.is_active,
+      starts_at: item.starts_at,
+      ends_at: item.ends_at,
+      usage_limit_total: item.usage_limit_total,
+      usage_limit_per_user: item.usage_limit_per_user,
+      min_amount: item.min_amount,
+      applicable_event_ids: item.applicable_event_ids,
+    });
+    setOpen(true);
+  };
+
+  const items = query.data?.results ?? [];
+  const count = query.data?.count ?? 0;
+  const hasMore = page * PAGE_SIZE < count;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold">کدهای تخفیف</h2>
+          <p className="mt-1 text-sm text-muted-foreground">مدیریت کدهای تخفیف رویدادها</p>
+        </div>
+        <Button onClick={openCreate}>
+          <Plus className="ml-2 h-4 w-4" />
+          افزودن
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>فهرست کدها</CardTitle>
+          <CardDescription>جستجو و مدیریت وضعیت کدهای تخفیف</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Input
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setPage(1);
+            }}
+            placeholder="جستجو بر اساس کد..."
+            className="max-w-md"
+          />
+          <div className="overflow-x-auto rounded-2xl border">
+            <table className="w-full min-w-[760px] text-sm">
+              <thead className="bg-muted/40 text-muted-foreground">
+                <tr>
+                  <th className="px-4 py-3 text-right">کد</th>
+                  <th className="px-4 py-3 text-right">نوع</th>
+                  <th className="px-4 py-3 text-right">مقدار</th>
+                  <th className="px-4 py-3 text-right">استفاده</th>
+                  <th className="px-4 py-3 text-right">وضعیت</th>
+                  <th className="px-4 py-3 text-left"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {query.isLoading ? (
+                  <tr><td colSpan={6} className="px-4 py-6 text-center text-muted-foreground">در حال بارگذاری...</td></tr>
+                ) : items.length === 0 ? (
+                  <tr><td colSpan={6} className="px-4 py-6 text-center text-muted-foreground">کدی یافت نشد.</td></tr>
+                ) : (
+                  items.map((item) => (
+                    <tr key={item.id} className="border-t hover:bg-muted/40">
+                      <td className="px-4 py-3 font-mono font-bold">{item.code}</td>
+                      <td className="px-4 py-3">{item.type === "percent" ? "درصدی" : "مبلغ ثابت"}</td>
+                      <td className="px-4 py-3">{formatNumberPersian(item.value)}</td>
+                      <td className="px-4 py-3">{formatNumberPersian(item.usage_count)}</td>
+                      <td className="px-4 py-3">
+                        <Badge variant={item.is_active ? "default" : "outline"}>{item.is_active ? "فعال" : "غیرفعال"}</Badge>
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex justify-end gap-2">
+                          <Button size="icon" variant="outline" onClick={() => openEdit(item)} aria-label="ویرایش">
+                            <Edit3 className="h-4 w-4" />
+                          </Button>
+                          <ConfirmAction
+                            title="حذف کد تخفیف"
+                            description={`آیا از حذف کد «${item.code}» مطمئن هستید؟ این کد دیگر در لیست‌های عادی نمایش داده نمی‌شود.`}
+                            onConfirm={() => deleteMutation.mutate(item.id)}
+                            disabled={deleteMutation.isPending}
+                            trigger={
+                              <Button size="icon" variant="outline" className="text-destructive hover:text-destructive" disabled={deleteMutation.isPending} aria-label="حذف">
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            }
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>صفحه {formatNumberPersian(page)} از {formatNumberPersian(Math.max(1, Math.ceil(count / PAGE_SIZE)))}</span>
+            <div className="flex gap-2">
+              <Button size="sm" variant="outline" disabled={page === 1} onClick={() => setPage((current) => Math.max(1, current - 1))}>قبلی</Button>
+              <Button size="sm" variant="outline" disabled={!hasMore} onClick={() => setPage((current) => current + 1)}>بعدی</Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-h-[90vh] overflow-y-auto" dir="rtl">
+          <DialogHeader className="text-right">
+            <DialogTitle>{editing ? "ویرایش کد تخفیف" : "افزودن کد تخفیف"}</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-2 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>کد</Label>
+              <Input dir="ltr" value={form.code} onChange={(event) => setForm((current) => ({ ...current, code: event.target.value }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>نوع</Label>
+              <Select value={form.type} onValueChange={(value) => setForm((current) => ({ ...current, type: value as "percent" | "fixed" }))}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="percent">درصدی</SelectItem>
+                  <SelectItem value="fixed">مبلغ ثابت</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>مقدار</Label>
+              <Input type="number" value={form.value} onChange={(event) => setForm((current) => ({ ...current, value: Number(event.target.value) }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>حداکثر تخفیف</Label>
+              <Input type="number" value={form.max_discount ?? ""} onChange={(event) => setForm((current) => ({ ...current, max_discount: event.target.value ? Number(event.target.value) : null }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>حداقل مبلغ</Label>
+              <Input type="number" value={form.min_amount ?? ""} onChange={(event) => setForm((current) => ({ ...current, min_amount: event.target.value ? Number(event.target.value) : null }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>محدودیت کل</Label>
+              <Input type="number" value={form.usage_limit_total ?? ""} onChange={(event) => setForm((current) => ({ ...current, usage_limit_total: event.target.value ? Number(event.target.value) : null }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>محدودیت هر کاربر</Label>
+              <Input type="number" value={form.usage_limit_per_user ?? ""} onChange={(event) => setForm((current) => ({ ...current, usage_limit_per_user: event.target.value ? Number(event.target.value) : null }))} />
+            </div>
+            <div className="flex items-center justify-between rounded-xl border px-3 py-2">
+              <Label>فعال</Label>
+              <Switch checked={form.is_active ?? true} onCheckedChange={(checked) => setForm((current) => ({ ...current, is_active: checked }))} />
+            </div>
+            <AdminDateTimeField label="شروع اعتبار" value={form.starts_at} onChange={(value) => setForm((current) => ({ ...current, starts_at: value }))} />
+            <AdminDateTimeField label="پایان اعتبار" value={form.ends_at} onChange={(value) => setForm((current) => ({ ...current, ends_at: value }))} />
+          </div>
+          <DialogFooter className="gap-2 sm:justify-start">
+            <Button variant="outline" onClick={() => setOpen(false)}>انصراف</Button>
+            <Button disabled={saveMutation.isPending || !form.code.trim() || form.value <= 0} onClick={() => saveMutation.mutate()}>
+              ذخیره
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/views/AdminEventDetail.tsx

@@ -1,216 +1,277 @@
 "use client";
 
-import * as React from 'react';
-import { useParams, Link, Navigate } from '@/lib/router';
-import { useQuery } from '@tanstack/react-query';
-import { api } from '@/lib/api';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { useToast } from '@/hooks/use-toast';
-import { formatJalali, formatToman, resolveErrorMessage, toPersianDigits } from '@/lib/utils';
-import { useAuth } from '@/contexts/AuthContext';
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { CheckCircle2, Clock3, XCircle } from "lucide-react";
+import AsyncSearchableCombobox from "@/components/AsyncSearchableCombobox";
+import Markdown from "@/components/Markdown";
+import ProgressiveImage from "@/components/ProgressiveImage";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Link, Navigate, useParams } from "@/lib/router";
+import type { RegistrationAdminSchema } from "@/lib/types";
+import { api } from "@/lib/api";
+import { formatJalali, formatToman, getEventCardImageUrl, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
+import { useAuth } from "@/contexts/AuthContext";
+import { useToast } from "@/hooks/use-toast";
 
-const registrationStatusOptions = [
-  { value: 'confirmed', label: 'تایید شده' },
-  { value: 'pending', label: 'در انتظار' },
-  { value: 'cancelled', label: 'لغو شده' },
-  { value: 'attended', label: 'حضور یافته' },
-] as const;
 const REGISTRATIONS_PAGE_SIZE = 10;
 
+const statusOptions = [
+  { value: "all", label: "همه" },
+  { value: "confirmed", label: "تایید شده" },
+  { value: "pending", label: "در انتظار" },
+  { value: "cancelled", label: "لغو شده" },
+  { value: "attended", label: "حضور یافته" },
+] as const;
+
+function initials(registration: RegistrationAdminSchema) {
+  const text = [registration.user.first_name, registration.user.last_name].filter(Boolean).join(" ") || registration.user.username;
+  return text.slice(0, 2).toUpperCase();
+}
+
+function statusIcon(status: RegistrationAdminSchema["status"]) {
+  if (status === "confirmed" || status === "attended") return <CheckCircle2 className="h-4 w-4 text-emerald-500" />;
+  if (status === "pending") return <Clock3 className="h-4 w-4 text-amber-500" />;
+  return <XCircle className="h-4 w-4 text-destructive" />;
+}
+
+function RegistrationDialog({
+  registration,
+  onOpenChange,
+}: {
+  registration: RegistrationAdminSchema | null;
+  onOpenChange: (open: boolean) => void;
+}) {
+  return (
+    <Dialog open={Boolean(registration)} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto" dir="rtl">
+        <DialogHeader className="text-right">
+          <DialogTitle>جزئیات ثبت‌نام</DialogTitle>
+        </DialogHeader>
+        {registration ? (
+          <div className="space-y-4">
+            <div className="flex items-center gap-3 rounded-2xl border p-4">
+              <Avatar className="h-14 w-14">
+                <AvatarImage src={registration.user.profile_picture_thumbnail_url || registration.user.profile_picture || undefined} />
+                <AvatarFallback>{initials(registration)}</AvatarFallback>
+              </Avatar>
+              <div className="min-w-0 text-right">
+                <div className="font-bold">{registration.user.first_name} {registration.user.last_name}</div>
+                <div className="text-sm text-muted-foreground">{registration.user.mobile || registration.user.email}</div>
+              </div>
+              <Badge className="mr-auto" variant={registration.status === "cancelled" ? "destructive" : "secondary"}>
+                {registration.status_label}
+              </Badge>
+            </div>
+            <div className="grid gap-2 md:grid-cols-2">
+              <Info label="موبایل" value={registration.user.mobile} />
+              <Info label="ایمیل" value={registration.user.email} />
+              <Info label="دانشگاه" value={registration.user.university} />
+              <Info label="رشته" value={registration.user.major} />
+              <Info label="شماره دانشجویی" value={registration.user.student_id} />
+              <Info label="کد بلیت" value={registration.ticket_id} />
+              <Info label="تاریخ ثبت‌نام" value={formatJalali(registration.registered_at)} />
+              <Info label="مبلغ نهایی" value={formatToman(registration.final_price ?? 0)} />
+              <Info label="تخفیف" value={formatToman(registration.discount_amount ?? 0)} />
+            </div>
+            <div className="space-y-2">
+              <div className="font-semibold">پرداخت‌ها</div>
+              {registration.payments.length ? registration.payments.map((payment) => (
+                <div key={payment.id} className="rounded-2xl border bg-muted/20 p-3 text-sm">
+                  <div className="grid gap-2 md:grid-cols-2">
+                    <Info label="وضعیت" value={payment.status_label} />
+                    <Info label="مبلغ" value={formatToman(payment.amount)} />
+                    <Info label="کد رهگیری" value={payment.ref_id} />
+                    <Info label="Authority" value={payment.authority} />
+                    <Info label="کارت" value={payment.card_pan} />
+                    <Info label="کد تخفیف" value={payment.discount_code} />
+                  </div>
+                </div>
+              )) : <p className="text-sm text-muted-foreground">پرداختی ثبت نشده است.</p>}
+            </div>
+          </div>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Info({ label, value }: { label: string; value?: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-xl bg-background px-3 py-2">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="text-left font-medium">{value || "—"}</span>
+    </div>
+  );
+}
+
 export default function AdminEventDetail() {
   const { id } = useParams();
   const { toast } = useToast();
   const { user, isAuthenticated, loading } = useAuth();
-  const [statusFilter, setStatusFilter] = React.useState<typeof registrationStatusOptions[number]['value'] | 'all'>('all');
-  const [search, setSearch] = React.useState('');
-  const [regPage, setRegPage] = React.useState(1);
-
   const eventId = Number(id);
+  const [statusFilter, setStatusFilter] = React.useState("all");
+  const [search, setSearch] = React.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React.useState("");
+  const [university, setUniversity] = React.useState<string | null>(null);
+  const [major, setMajor] = React.useState<string | null>(null);
+  const [regPage, setRegPage] = React.useState(1);
+  const [selectedRegistration, setSelectedRegistration] = React.useState<RegistrationAdminSchema | null>(null);
+
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedSearch(search.trim()), 300);
+    return () => window.clearTimeout(timer);
+  }, [search]);
+
   const detailQuery = useQuery({
-    queryKey: ['admin', 'event-detail', eventId],
+    queryKey: ["admin", "event-detail", eventId],
     queryFn: () => api.getEventAdminDetail(eventId),
     enabled: Number.isFinite(eventId),
   });
 
   const registrationsQuery = useQuery({
-    queryKey: ['admin', 'event', eventId, 'registrations', statusFilter, search, regPage],
+    queryKey: ["admin", "event", eventId, "registrations", statusFilter, debouncedSearch, university, major, regPage],
     enabled: Number.isFinite(eventId),
     queryFn: () =>
       api.listEventRegistrationsAdmin(eventId, {
-        statuses:
-          statusFilter === 'all'
-            ? registrationStatusOptions.map((s) => s.value)
-            : [statusFilter],
-        search: search || undefined,
+        statuses: statusFilter === "all" ? undefined : [statusFilter],
+        search: debouncedSearch || undefined,
+        university: university || undefined,
+        major: major || undefined,
         limit: REGISTRATIONS_PAGE_SIZE,
         offset: (regPage - 1) * REGISTRATIONS_PAGE_SIZE,
       }),
   });
 
   React.useEffect(() => {
-    if (detailQuery.error) {
-      toast({ title: 'خطا در دریافت جزئیات رویداد', description: resolveErrorMessage(detailQuery.error), variant: 'destructive' });
-    }
-  }, [detailQuery.error, toast]);
+    const error = detailQuery.error || registrationsQuery.error;
+    if (error) toast({ title: "خطا در دریافت اطلاعات رویداد", description: resolveErrorMessage(error), variant: "destructive" });
+  }, [detailQuery.error, registrationsQuery.error, toast]);
 
-  React.useEffect(() => {
-    if (registrationsQuery.error) {
-      toast({ title: 'خطا در ثبت‌نام‌ها', description: resolveErrorMessage(registrationsQuery.error), variant: 'destructive' });
-    }
-  }, [registrationsQuery.error, toast]);
+  const loadMajors = React.useCallback(async (params: { search: string; limit: number; offset: number }) => {
+    const data = await api.getMajorsPaged(params);
+    return { count: data.count, results: data.results.map((item) => ({ value: item.code, label: item.label })) };
+  }, []);
 
-  if (loading) {
-    return <div className="min-h-screen flex items-center justify-center text-muted-foreground" dir="rtl">در حال بارگذاری...</div>;
-  }
-  if (!isAuthenticated || !(user?.is_staff || user?.is_superuser)) {
-    return <Navigate to="/" replace />;
-  }
-  if (!Number.isFinite(eventId)) {
-    return <div className="min-h-screen flex items-center justify-center" dir="rtl">شناسه رویداد معتبر نیست.</div>;
-  }
+  const loadUniversities = React.useCallback(async (params: { search: string; limit: number; offset: number }) => {
+    const data = await api.getUniversitiesPaged(params);
+    return { count: data.count, results: data.results.map((item) => ({ value: item.code, label: item.label })) };
+  }, []);
+
+  if (loading) return <div className="flex min-h-screen items-center justify-center text-muted-foreground" dir="rtl">در حال بارگذاری...</div>;
+  if (!isAuthenticated || !(user?.is_staff || user?.is_superuser)) return <Navigate to="/" replace />;
+  if (!Number.isFinite(eventId)) return <div className="flex min-h-screen items-center justify-center" dir="rtl">شناسه رویداد معتبر نیست.</div>;
 
   const event = detailQuery.data;
   const paged = registrationsQuery.data;
   const registrationPageCount = paged ? Math.max(1, Math.ceil(paged.count / REGISTRATIONS_PAGE_SIZE)) : 1;
 
   return (
-    <div className="min-h-screen bg-background" dir="rtl">
-      <div className="container mx-auto px-4 py-6 space-y-6">
-        <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
-          <div>
-            <h1 className="text-2xl font-bold">{event?.title ?? 'جزئیات رویداد'}</h1>
-            {event && (
-              <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground mt-1">
-                <Badge variant="secondary">{event.status_label ?? event.status}</Badge>
-                {event.start_time ? <span>شروع: {formatJalali(event.start_time)}</span> : null}
-                {event.event_type ? <span>نوع: {event.event_type_label ?? event.event_type}</span> : null}
-              </div>
-            )}
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Button asChild>
-              <Link to={`/admin/events/${eventId}/edit`}>ویرایش پیشرفته</Link>
-            </Button>
-            <Button variant="outline" asChild>
-              <Link to="/admin/events">بازگشت</Link>
-            </Button>
-          </div>
+    <div className="space-y-6" dir="rtl">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-black">{event?.title ?? "جزئیات رویداد"}</h1>
+          {event ? <p className="mt-1 text-sm text-muted-foreground">شروع: {formatJalali(event.start_time)} · ثبت‌نام‌ها: {toPersianDigits(event.registration_count)}</p> : null}
         </div>
+        <div className="flex flex-wrap gap-2">
+          <Button asChild><Link to={`/admin/events/${eventId}/edit`}>ویرایش</Link></Button>
+          <Button variant="outline" asChild><Link to="/admin/events">بازگشت</Link></Button>
+        </div>
+      </div>
 
-        {event && (
-          <div className="grid gap-4 md:grid-cols-3">
-            <Card>
-              <CardHeader>
-                <CardTitle>وضعیت</CardTitle>
-                <CardDescription>اطلاعات پایه رویداد</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-2 text-sm text-muted-foreground">
-                <div>ظرفیت: {event.capacity ?? 'نامحدود'}</div>
-                <div>ثبت‌نام‌ها: {toPersianDigits(event.registration_count ?? 0)}</div>
-                <div>قیمت: {formatToman(event.price)}</div>
-              </CardContent>
-            </Card>
-            <Card className="md:col-span-2">
-              <CardHeader>
-                <CardTitle>توضیحات</CardTitle>
-              </CardHeader>
-              <CardContent className="text-sm text-muted-foreground leading-6">
-                {event.description || 'توضیحی ثبت نشده است.'}
-              </CardContent>
-            </Card>
-          </div>
-        )}
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
+        <main className="space-y-6">
+          {event ? (
+            <>
+              <ProgressiveImage
+                src={getEventCardImageUrl(event)}
+                alt={event.title}
+                wrapperClassName="aspect-video overflow-hidden rounded-3xl bg-muted shadow-sm"
+                className="h-full w-full object-cover"
+              />
+              <Card>
+                <CardContent className="grid gap-3 p-5 text-sm md:grid-cols-2">
+                  <Info label="نوع" value={event.event_type} />
+                  <Info label="وضعیت" value={event.status} />
+                  <Info label="ظرفیت" value={event.capacity ?? "نامحدود"} />
+                  <Info label="قیمت" value={Number(event.price || 0) === 0 ? "رایگان" : formatToman(event.price)} />
+                  <Info label="شروع ثبت‌نام" value={event.registration_start_date ? formatJalali(event.registration_start_date) : "—"} />
+                  <Info label="پایان ثبت‌نام" value={event.registration_end_date ? formatJalali(event.registration_end_date) : "—"} />
+                  <Info label="آدرس" value={event.address} />
+                  <Info label="لینک آنلاین" value={event.online_link} />
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="p-6">
+                  <Markdown content={event.description || "توضیحی ثبت نشده است."} />
+                </CardContent>
+              </Card>
+            </>
+          ) : (
+            <p className="text-sm text-muted-foreground">در حال بارگذاری جزئیات...</p>
+          )}
+        </main>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>ثبت‌نام‌ها و پرداخت‌ها</CardTitle>
-            <CardDescription>لیست ثبت‌نام‌های مرتبط با این رویداد</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
-              <div className="flex flex-wrap gap-2">
-                <Select value={statusFilter} onValueChange={(value) => { setStatusFilter(value as typeof statusFilter); setRegPage(1); }}>
-                  <SelectTrigger className="w-full md:w-40">
-                    <SelectValue placeholder="وضعیت">وضعیت: {statusFilter === 'all' ? 'همه' : statusFilter}</SelectValue>
-                  </SelectTrigger>
+        <aside className="space-y-4 lg:sticky lg:top-24 lg:self-start">
+          <Card>
+            <CardHeader>
+              <CardTitle>اطلاعات ثبت‌نام</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <Input placeholder="جستجو نام، موبایل یا ایمیل..." value={search} onChange={(event) => { setSearch(event.target.value); setRegPage(1); }} />
+              <Select value={statusFilter} onValueChange={(value) => { setStatusFilter(value); setRegPage(1); }}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="all">همه</SelectItem>
-                  {registrationStatusOptions.map((s) => (
-                    <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
-                  ))}
+                  {statusOptions.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}
                 </SelectContent>
               </Select>
-            </div>
-              <Input
-                className="md:w-64"
-                placeholder="جستجو نام/ایمیل/نام‌کاربری"
-                value={search}
-                onChange={(e) => { setSearch(e.target.value); setRegPage(1); }}
-              />
-            </div>
+              <AsyncSearchableCombobox value={university} onChange={(value) => { setUniversity(value); setRegPage(1); }} loadOptions={loadUniversities} placeholder="دانشگاه" />
+              <AsyncSearchableCombobox value={major} onChange={(value) => { setMajor(value); setRegPage(1); }} loadOptions={loadMajors} placeholder="رشته" />
 
-            {registrationsQuery.isLoading ? (
-              <p className="text-sm text-muted-foreground">در حال بارگذاری ثبت‌نام‌ها...</p>
-            ) : !paged || paged.results.length === 0 ? (
-              <p className="text-sm text-muted-foreground">ثبت‌نامی یافت نشد.</p>
-            ) : (
-              <ScrollArea className="rounded-md border max-h-[70vh]">
-                <div className="divide-y">
-                  {paged.results.map((registration) => (
-                    <div key={registration.id} className="p-4">
-                      <div className="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
-                        <div>
-                          <div className="font-semibold">{registration.user.first_name} {registration.user.last_name}</div>
-                          <div className="text-xs text-muted-foreground">{registration.user.email}</div>
-                        </div>
-                        <Badge variant={registration.status === 'confirmed' ? 'default' : 'outline'}>
-                          {registration.status_label}
-                        </Badge>
-                      </div>
-                      <div className="mt-2 grid gap-1 text-xs text-muted-foreground md:grid-cols-2 lg:grid-cols-3">
-                        <div>نام‌کاربری: {registration.user.username}</div>
-                        <div>کد بلیت: {registration.ticket_id}</div>
-                        <div>تاریخ ثبت‌نام: {formatJalali(registration.registered_at)}</div>
-                        <div>مبلغ پرداختی: {formatToman(registration.final_price ?? 0)}</div>
-                        <div>تخفیف: {formatToman(registration.discount_amount ?? 0)}</div>
-                      </div>
-                      {registration.payments.length > 0 && (
-                        <div className="mt-2 space-y-1 text-xs">
-                          <div className="font-medium">پرداخت‌ها</div>
-                          {registration.payments.map((payment) => (
-                            <div key={payment.id} className="flex flex-wrap items-center justify-between gap-2 rounded border px-2 py-1">
-                              <span className="text-muted-foreground">{payment.status_label}</span>
-                              <span>{formatToman(payment.amount)}</span>
-                              <span className="text-muted-foreground text-[11px]">Ref: {payment.ref_id ?? '—'}</span>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </ScrollArea>
-            )}
-
-            <div className="flex items-center justify-between text-xs text-muted-foreground">
-              <span>صفحه {toPersianDigits(regPage)} از {toPersianDigits(registrationPageCount)}</span>
-              <div className="flex gap-2">
-                <Button size="sm" variant="outline" disabled={regPage <= 1} onClick={() => setRegPage((p) => Math.max(1, p - 1))}>
-                  قبلی
-                </Button>
-                <Button size="sm" variant="outline" disabled={regPage >= registrationPageCount} onClick={() => setRegPage((p) => p + 1)}>
-                  بعدی
-                </Button>
+              <div className="space-y-2">
+                {registrationsQuery.isLoading ? (
+                  <p className="text-sm text-muted-foreground">در حال بارگذاری...</p>
+                ) : !paged || paged.results.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">ثبت‌نامی یافت نشد.</p>
+                ) : paged.results.map((registration) => (
+                  <button
+                    key={registration.id}
+                    type="button"
+                    className="flex w-full items-center gap-3 rounded-2xl border bg-background p-3 text-right transition hover:bg-muted/40"
+                    onClick={() => setSelectedRegistration(registration)}
+                  >
+                    <Avatar className="h-10 w-10">
+                      <AvatarImage src={registration.user.profile_picture_thumbnail_url || registration.user.profile_picture || undefined} />
+                      <AvatarFallback>{initials(registration)}</AvatarFallback>
+                    </Avatar>
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-sm font-semibold">{registration.user.first_name} {registration.user.last_name}</span>
+                      <span className="block truncate text-xs text-muted-foreground">{registration.user.mobile || registration.user.email}</span>
+                    </span>
+                    {statusIcon(registration.status)}
+                  </button>
+                ))}
               </div>
-            </div>
-          </CardContent>
-        </Card>
+
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>صفحه {toPersianDigits(regPage)} از {toPersianDigits(registrationPageCount)}</span>
+                <div className="flex gap-2">
+                  <Button size="sm" variant="outline" disabled={regPage <= 1} onClick={() => setRegPage((page) => Math.max(1, page - 1))}>قبلی</Button>
+                  <Button size="sm" variant="outline" disabled={regPage >= registrationPageCount} onClick={() => setRegPage((page) => page + 1)}>بعدی</Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </aside>
       </div>
+
+      <RegistrationDialog registration={selectedRegistration} onOpenChange={(open) => { if (!open) setSelectedRegistration(null); }} />
     </div>
   );
 }

src/views/AdminEventEdit.tsx

@@ -1,284 +1,7 @@
 "use client";
 
-import * as React from 'react';
-import { useNavigate, useParams, Navigate } from '@/lib/router';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useAuth } from '@/contexts/AuthContext';
-import { api } from '@/lib/api';
-import type { EventAdminDetailSchema, EventUpdateSchema } from '@/lib/types';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { useToast } from '@/hooks/use-toast';
-import { resolveErrorMessage } from '@/lib/utils';
-
-const statusOptions = [
-  { value: 'draft', label: 'پیش‌نویس' },
-  { value: 'published', label: 'منتشر شده' },
-  { value: 'cancelled', label: 'لغو شده' },
-  { value: 'completed', label: 'برگزار شده' },
-];
-
-const typeOptions = [
-  { value: 'online', label: 'آنلاین' },
-  { value: 'on_site', label: 'حضوری' },
-  { value: 'hybrid', label: 'ترکیبی' },
-];
-
-const toInputDateTime = (iso?: string | null) => {
-  if (!iso) return '';
-  const d = new Date(iso);
-  return `${d.getFullYear().toString().padStart(4, '0')}-${(d.getMonth() + 1)
-    .toString()
-    .padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}T${d
-    .getHours()
-    .toString()
-    .padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
-};
+import AdminEventForm from "@/views/AdminEventForm";
 
 export default function AdminEventEdit() {
-  const { user, isAuthenticated, loading } = useAuth();
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const eventId = Number(id);
-  const { toast } = useToast();
-  const queryClient = useQueryClient();
-
-  const detailQuery = useQuery({
-    queryKey: ['admin', 'edit-event', eventId],
-    queryFn: () => api.getEventAdminDetail(eventId),
-    enabled: Boolean(eventId) && isAuthenticated,
-  });
-
-  const [formData, setFormData] = React.useState({
-    title: '',
-    status: 'draft' as NonNullable<EventUpdateSchema['status']>,
-    event_type: 'online' as NonNullable<EventUpdateSchema['event_type']>,
-    price: '',
-    capacity: '',
-    start_time: '',
-    end_time: '',
-    registration_start_date: '',
-    registration_end_date: '',
-    location: '',
-    address: '',
-    online_link: '',
-    description: '',
-  });
-
-  React.useEffect(() => {
-    if (detailQuery.data) {
-      const d: EventAdminDetailSchema = detailQuery.data;
-      setFormData({
-        title: d.title || '',
-        status: d.status || 'draft',
-        event_type: d.event_type || 'online',
-        price: d.price ? Math.floor(Number(d.price) / 10).toString() : '',
-        capacity: d.capacity != null ? String(d.capacity) : '',
-        start_time: toInputDateTime(d.start_time),
-        end_time: toInputDateTime(d.end_time),
-        registration_start_date: toInputDateTime(d.registration_start_date),
-        registration_end_date: toInputDateTime(d.registration_end_date),
-        location: d.location || '',
-        address: d.address || '',
-        online_link: d.online_link || '',
-        description: d.description || '',
-      });
-    }
-  }, [detailQuery.data]);
-
-  const updateMutation = useMutation({
-    mutationFn: (payload: EventUpdateSchema) => api.updateEvent(eventId, payload),
-    onSuccess: () => {
-      toast({ title: 'رویداد به‌روزرسانی شد', variant: 'success' });
-      queryClient.invalidateQueries({ queryKey: ['admin', 'edit-event', eventId] });
-      queryClient.invalidateQueries({ queryKey: ['admin', 'events'] });
-      navigate(`/admin/events/${eventId}`);
-    },
-    onError: (error) => {
-      toast({
-        variant: 'destructive',
-        title: 'خطا در ذخیره‌سازی رویداد',
-        description: resolveErrorMessage(error),
-      });
-    },
-  });
-
-  React.useEffect(() => {
-    if (detailQuery.error) {
-      toast({
-        variant: 'destructive',
-        title: 'خطا در دریافت رویداد',
-        description: resolveErrorMessage(detailQuery.error),
-      });
-    }
-  }, [detailQuery.error, toast]);
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <p className="text-muted-foreground">در حال بررسی دسترسی...</p>
-      </div>
-    );
-  }
-
-  if (!isAuthenticated || !(user?.is_staff || user?.is_superuser)) {
-    return <Navigate to="/" />;
-  }
-
-  return (
-    <div className="min-h-screen bg-background" dir="rtl">
-      <div className="container mx-auto px-4 py-10">
-        <Card>
-          <CardHeader>
-            <CardTitle>ویرایش رویداد</CardTitle>
-            <CardDescription>فرم کامل برای ویرایش جزئیات رویداد</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {detailQuery.isLoading ? (
-              <p className="text-sm text-muted-foreground">در حال بارگذاری جزئیات...</p>
-            ) : detailQuery.data ? (
-              <form
-                className="space-y-4"
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  updateMutation.mutate({
-                    title: formData.title,
-                    status: formData.status,
-                    event_type: formData.event_type,
-                    price: formData.price ? Number(formData.price) * 10 : 0,
-                    capacity: formData.capacity ? Number(formData.capacity) : null,
-                    start_time: formData.start_time || undefined,
-                    end_time: formData.end_time || null,
-                    registration_start_date: formData.registration_start_date || null,
-                    registration_end_date: formData.registration_end_date || null,
-                    location: formData.location || null,
-                    address: formData.address || null,
-                    online_link: formData.online_link || null,
-                    description: formData.description || '',
-                  });
-                }}
-              >
-                <div className="grid gap-3 md:grid-cols-2">
-                  <Input
-                    placeholder="عنوان رویداد"
-                    value={formData.title}
-                    onChange={(e) => setFormData((p) => ({ ...p, title: e.target.value }))}
-                    required
-                  />
-                  <Select
-                    value={formData.status}
-                    onValueChange={(value) =>
-                      setFormData((p) => ({
-                        ...p,
-                        status: value as NonNullable<EventUpdateSchema['status']>,
-                      }))
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="وضعیت" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {statusOptions.map((opt) => (
-                        <SelectItem key={opt.value} value={opt.value}>
-                          {opt.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <Select
-                    value={formData.event_type}
-                    onValueChange={(value) =>
-                      setFormData((p) => ({
-                        ...p,
-                        event_type: value as NonNullable<EventUpdateSchema['event_type']>,
-                      }))
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="نوع رویداد" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {typeOptions.map((opt) => (
-                        <SelectItem key={opt.value} value={opt.value}>
-                          {opt.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <Input
-                    placeholder="قیمت (تومان)"
-                    value={formData.price}
-                    onChange={(e) => setFormData((p) => ({ ...p, price: e.target.value }))}
-                  />
-                  <Input
-                    placeholder="ظرفیت"
-                    value={formData.capacity}
-                    onChange={(e) => setFormData((p) => ({ ...p, capacity: e.target.value }))}
-                  />
-                  <Input
-                    type="datetime-local"
-                    placeholder="تاریخ شروع"
-                    value={formData.start_time}
-                    onChange={(e) => setFormData((p) => ({ ...p, start_time: e.target.value }))}
-                  />
-                  <Input
-                    type="datetime-local"
-                    placeholder="تاریخ پایان"
-                    value={formData.end_time}
-                    onChange={(e) => setFormData((p) => ({ ...p, end_time: e.target.value }))}
-                  />
-                  <Input
-                    type="datetime-local"
-                    placeholder="شروع ثبت‌نام"
-                    value={formData.registration_start_date}
-                    onChange={(e) => setFormData((p) => ({ ...p, registration_start_date: e.target.value }))}
-                  />
-                  <Input
-                    type="datetime-local"
-                    placeholder="پایان ثبت‌نام"
-                    value={formData.registration_end_date}
-                    onChange={(e) => setFormData((p) => ({ ...p, registration_end_date: e.target.value }))}
-                  />
-                  <Input
-                    placeholder="محل برگزاری"
-                    value={formData.location}
-                    onChange={(e) => setFormData((p) => ({ ...p, location: e.target.value }))}
-                  />
-                  <Input
-                    placeholder="آدرس دقیق"
-                    value={formData.address}
-                    onChange={(e) => setFormData((p) => ({ ...p, address: e.target.value }))}
-                  />
-                  <Input
-                    placeholder="لینک آنلاین"
-                    value={formData.online_link}
-                    onChange={(e) => setFormData((p) => ({ ...p, online_link: e.target.value }))}
-                  />
-                </div>
-                <Textarea
-                  placeholder="توضیحات رویداد"
-                  value={formData.description}
-                  onChange={(e) => setFormData((p) => ({ ...p, description: e.target.value }))}
-                  rows={8}
-                />
-                <div className="flex flex-wrap gap-2 justify-end">
-                  <Button type="button" variant="outline" onClick={() => navigate(-1)}>
-                    بازگشت
-                  </Button>
-                  <Button type="submit" disabled={updateMutation.isPending}>
-                    ذخیره
-                  </Button>
-                </div>
-              </form>
-            ) : (
-              <p className="text-sm text-destructive">امکان دریافت رویداد وجود ندارد.</p>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
+  return <AdminEventForm mode="edit" />;
 }

src/views/AdminEventForm.tsx

@@ -0,0 +1,387 @@
+"use client";
+
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ImagePlus, Trash2, Upload } from "lucide-react";
+import AdminDateTimeField from "@/components/AdminDateTimeField";
+import ConfirmAction from "@/components/ConfirmAction";
+import Markdown from "@/components/Markdown";
+import MarkdownEditor from "@/components/MarkdownEditor";
+import ProgressiveImage from "@/components/ProgressiveImage";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Link, Navigate, useNavigate, useParams } from "@/lib/router";
+import type { EventCreateSchema, EventDetailSchema, EventGalleryItem } from "@/lib/types";
+import { api } from "@/lib/api";
+import { getEventCardImageUrl, resolveErrorMessage } from "@/lib/utils";
+import { useAuth } from "@/contexts/AuthContext";
+import { useToast } from "@/hooks/use-toast";
+
+type Mode = "create" | "edit";
+
+const emptyForm = {
+  title: "",
+  slug: "",
+  status: "draft" as EventCreateSchema["status"],
+  event_type: "on_site" as EventCreateSchema["event_type"],
+  price: "",
+  capacity: "",
+  start_time: null as string | null,
+  end_time: null as string | null,
+  registration_start_date: null as string | null,
+  registration_end_date: null as string | null,
+  location: "",
+  address: "",
+  online_link: "",
+  description: "",
+  registration_success_markdown: "",
+};
+
+function toForm(event: EventDetailSchema) {
+  return {
+    title: event.title || "",
+    slug: event.slug || "",
+    status: event.status || "draft",
+    event_type: event.event_type || "on_site",
+    price: event.price ? String(Math.floor(Number(event.price) / 10)) : "",
+    capacity: event.capacity != null ? String(event.capacity) : "",
+    start_time: event.start_time || null,
+    end_time: event.end_time || null,
+    registration_start_date: event.registration_start_date || null,
+    registration_end_date: event.registration_end_date || null,
+    location: event.location || "",
+    address: event.address || "",
+    online_link: event.online_link || "",
+    description: event.description || "",
+    registration_success_markdown: event.registration_success_markdown || "",
+  };
+}
+
+export default function AdminEventForm({ mode }: { mode: Mode }) {
+  const { user, isAuthenticated, loading } = useAuth();
+  const { id } = useParams<{ id?: string }>();
+  const eventId = Number(id);
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [form, setForm] = React.useState(emptyForm);
+  const [previewMode, setPreviewMode] = React.useState<"editor" | "preview">("editor");
+  const [galleryPreview, setGalleryPreview] = React.useState<EventGalleryItem | null>(null);
+
+  const detailQuery = useQuery({
+    queryKey: ["admin", "edit-event", eventId],
+    queryFn: () => api.getEventAdminDetail(eventId),
+    enabled: mode === "edit" && Number.isFinite(eventId) && isAuthenticated,
+  });
+
+  const galleryQuery = useQuery({
+    queryKey: ["admin", "event", eventId, "gallery"],
+    queryFn: () => api.listEventGallery(eventId),
+    enabled: mode === "edit" && Number.isFinite(eventId) && isAuthenticated,
+  });
+
+  React.useEffect(() => {
+    if (detailQuery.data) setForm(toForm(detailQuery.data));
+  }, [detailQuery.data]);
+
+  const makePayload = (): EventCreateSchema => ({
+    title: form.title,
+    slug: form.slug || null,
+    status: form.status,
+    event_type: form.event_type,
+    price: form.price ? Number(form.price) * 10 : 0,
+    capacity: form.capacity ? Number(form.capacity) : null,
+    start_time: form.start_time || new Date().toISOString(),
+    end_time: form.end_time || form.start_time || new Date().toISOString(),
+    registration_start_date: form.registration_start_date,
+    registration_end_date: form.registration_end_date,
+    location: form.location || null,
+    address: form.address || null,
+    online_link: form.online_link || null,
+    description: form.description || "",
+    registration_success_markdown: form.registration_success_markdown || null,
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: async () => {
+      const payload = makePayload();
+      return mode === "edit" ? api.updateEvent(eventId, payload) : api.createEvent(payload);
+    },
+    onSuccess: (event) => {
+      queryClient.invalidateQueries({ queryKey: ["admin", "events"] });
+      toast({ title: "رویداد ذخیره شد", variant: "success" });
+      navigate(`/admin/events/${event.id}/edit`);
+    },
+    onError: (error) => toast({ title: "خطا در ذخیره رویداد", description: resolveErrorMessage(error), variant: "destructive" }),
+  });
+
+  const posterMutation = useMutation({
+    mutationFn: (file: File) => api.uploadEventFeaturedImage(eventId, file),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["admin", "edit-event", eventId] });
+      toast({ title: "پوستر ذخیره شد", variant: "success" });
+    },
+    onError: (error) => toast({ title: "خطا در آپلود پوستر", description: resolveErrorMessage(error), variant: "destructive" }),
+  });
+
+  const galleryUploadMutation = useMutation({
+    mutationFn: (file: File) => api.uploadEventGalleryImage(eventId, file, { title: file.name }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["admin", "event", eventId, "gallery"] });
+      toast({ title: "تصویر گالری افزوده شد", variant: "success" });
+    },
+    onError: (error) => toast({ title: "خطا در آپلود گالری", description: resolveErrorMessage(error), variant: "destructive" }),
+  });
+
+  const galleryDeleteMutation = useMutation({
+    mutationFn: (imageId: number) => api.deleteEventGalleryImage(eventId, imageId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["admin", "event", eventId, "gallery"] });
+      toast({ title: "تصویر حذف شد", variant: "success" });
+    },
+    onError: (error) => toast({ title: "خطا در حذف تصویر", description: resolveErrorMessage(error), variant: "destructive" }),
+  });
+
+  if (loading) return <div className="py-10 text-center text-muted-foreground">در حال بررسی دسترسی...</div>;
+  if (!isAuthenticated || !(user?.is_staff || user?.is_superuser)) return <Navigate to="/" />;
+  if (mode === "edit" && !Number.isFinite(eventId)) return <div className="py-10 text-center">شناسه رویداد معتبر نیست.</div>;
+
+  const event = detailQuery.data;
+  const gallery = galleryQuery.data ?? event?.gallery_images ?? [];
+
+  return (
+    <div className="space-y-6" dir="rtl">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-black">{mode === "edit" ? "ویرایش رویداد" : "افزودن رویداد"}</h1>
+          <p className="text-sm text-muted-foreground">فرم کامل رویداد با توضیحات Markdown، زمان‌بندی، پوستر و گالری</p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button variant="outline" asChild><Link to="/admin/events">بازگشت</Link></Button>
+          <Button disabled={saveMutation.isPending || !form.title.trim()} onClick={() => saveMutation.mutate()}>ذخیره</Button>
+        </div>
+      </div>
+
+      {detailQuery.isLoading ? <p className="text-sm text-muted-foreground">در حال بارگذاری...</p> : null}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>اطلاعات اصلی</CardTitle>
+          <CardDescription>عنوان، وضعیت، نوع رویداد، ظرفیت و هزینه</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label>عنوان</Label>
+            <Input value={form.title} onChange={(event) => setForm((current) => ({ ...current, title: event.target.value }))} />
+          </div>
+          <div className="space-y-2">
+            <Label>اسلاگ</Label>
+            <Input dir="ltr" value={form.slug} onChange={(event) => setForm((current) => ({ ...current, slug: event.target.value }))} />
+          </div>
+          <div className="space-y-2">
+            <Label>وضعیت</Label>
+            <Select value={form.status} onValueChange={(value) => setForm((current) => ({ ...current, status: value as typeof form.status }))}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="draft">پیش‌نویس</SelectItem>
+                <SelectItem value="published">منتشر شده</SelectItem>
+                <SelectItem value="cancelled">لغو شده</SelectItem>
+                <SelectItem value="completed">برگزار شده</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label>نوع</Label>
+            <Select value={form.event_type} onValueChange={(value) => setForm((current) => ({ ...current, event_type: value as typeof form.event_type }))}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="on_site">حضوری</SelectItem>
+                <SelectItem value="online">آنلاین</SelectItem>
+                <SelectItem value="hybrid">ترکیبی</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label>قیمت (تومان)</Label>
+            <Input type="number" value={form.price} onChange={(event) => setForm((current) => ({ ...current, price: event.target.value }))} />
+          </div>
+          <div className="space-y-2">
+            <Label>ظرفیت</Label>
+            <Input type="number" value={form.capacity} onChange={(event) => setForm((current) => ({ ...current, capacity: event.target.value }))} />
+          </div>
+          <div className="space-y-2">
+            <Label>محل / مختصات</Label>
+            <Input value={form.location} onChange={(event) => setForm((current) => ({ ...current, location: event.target.value }))} />
+          </div>
+          <div className="space-y-2">
+            <Label>آدرس</Label>
+            <Input value={form.address} onChange={(event) => setForm((current) => ({ ...current, address: event.target.value }))} />
+          </div>
+          <div className="space-y-2 md:col-span-2">
+            <Label>لینک آنلاین</Label>
+            <Input dir="ltr" value={form.online_link} onChange={(event) => setForm((current) => ({ ...current, online_link: event.target.value }))} />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>زمان‌بندی</CardTitle>
+          <CardDescription>تاریخ شمسی و زمان جداگانه نمایش داده می‌شود.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-2">
+          <AdminDateTimeField label="شروع رویداد" value={form.start_time} required onChange={(value) => setForm((current) => ({ ...current, start_time: value }))} />
+          <AdminDateTimeField label="پایان رویداد" value={form.end_time} required onChange={(value) => setForm((current) => ({ ...current, end_time: value }))} />
+          <AdminDateTimeField label="شروع ثبت‌نام" value={form.registration_start_date} onChange={(value) => setForm((current) => ({ ...current, registration_start_date: value }))} />
+          <AdminDateTimeField label="پایان ثبت‌نام" value={form.registration_end_date} onChange={(value) => setForm((current) => ({ ...current, registration_end_date: value }))} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>پوستر</CardTitle>
+          <CardDescription>تصویر شاخص رویداد</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {event ? (
+            <ProgressiveImage
+              src={getEventCardImageUrl(event)}
+              alt={event.title}
+              wrapperClassName="aspect-video max-w-xl overflow-hidden rounded-2xl bg-muted"
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <div className="flex aspect-video max-w-xl items-center justify-center rounded-2xl border bg-muted/30 text-muted-foreground">
+              <ImagePlus className="h-8 w-8" />
+            </div>
+          )}
+          {mode === "edit" ? (
+            <label className="inline-flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted">
+              <Upload className="h-4 w-4" />
+              آپلود پوستر
+              <input
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={(event) => {
+                  const file = event.target.files?.[0];
+                  if (file) posterMutation.mutate(file);
+                  event.currentTarget.value = "";
+                }}
+              />
+            </label>
+          ) : (
+            <p className="text-sm text-muted-foreground">پس از ذخیره اولیه، امکان آپلود پوستر فعال می‌شود.</p>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>متن رویداد</CardTitle>
+          <CardDescription>ویرایشگر Markdown و پیش‌نمایش</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex gap-2 md:hidden">
+            <Button variant={previewMode === "editor" ? "default" : "outline"} size="sm" onClick={() => setPreviewMode("editor")}>ویرایش</Button>
+            <Button variant={previewMode === "preview" ? "default" : "outline"} size="sm" onClick={() => setPreviewMode("preview")}>پیش‌نمایش</Button>
+          </div>
+          <div className="grid gap-4 lg:grid-cols-2">
+            <div className={previewMode === "preview" ? "hidden lg:block" : ""}>
+              <MarkdownEditor value={form.description} onChange={(value) => setForm((current) => ({ ...current, description: value }))} minHeight="520px" onSave={() => saveMutation.mutate()} />
+            </div>
+            <div className={previewMode === "editor" ? "hidden lg:block" : ""}>
+              <div className="min-h-[520px] rounded-2xl border bg-background p-5">
+                <Markdown content={form.description || "هنوز متنی وارد نشده است."} />
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>پیام موفقیت ثبت‌نام</CardTitle>
+          <CardDescription>متنی که بعد از ثبت‌نام موفق به کاربر نمایش داده می‌شود.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Textarea
+            value={form.registration_success_markdown}
+            onChange={(event) => setForm((current) => ({ ...current, registration_success_markdown: event.target.value }))}
+            rows={6}
+          />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>گالری رویداد</CardTitle>
+          <CardDescription>تصاویر مرتبط با رویداد</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {mode === "edit" ? (
+            <label className="inline-flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-muted">
+              <Upload className="h-4 w-4" />
+              آپلود تصویر
+              <input
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={(event) => {
+                  const files = Array.from(event.target.files ?? []);
+                  files.forEach((file) => galleryUploadMutation.mutate(file));
+                  event.currentTarget.value = "";
+                }}
+                multiple
+              />
+            </label>
+          ) : (
+            <p className="text-sm text-muted-foreground">پس از ذخیره اولیه، امکان آپلود گالری فعال می‌شود.</p>
+          )}
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            {gallery.map((item) => (
+              <div key={item.id} className="overflow-hidden rounded-2xl border bg-card">
+                <button type="button" className="block w-full" onClick={() => setGalleryPreview(item)}>
+                  <ProgressiveImage
+                    src={item.absolute_image_preview_url || item.absolute_image_url}
+                    alt={item.title}
+                    wrapperClassName="aspect-video w-full bg-muted"
+                    className="h-full w-full object-cover"
+                  />
+                </button>
+                <div className="flex items-center justify-between gap-2 p-3 text-sm">
+                  <span className="truncate">{item.title}</span>
+                  <ConfirmAction
+                    title="حذف تصویر گالری"
+                    description={`آیا از حذف «${item.title}» از گالری رویداد مطمئن هستید؟`}
+                    onConfirm={() => galleryDeleteMutation.mutate(item.id)}
+                    disabled={galleryDeleteMutation.isPending}
+                    trigger={
+                      <Button size="icon" variant="ghost" className="text-destructive" disabled={galleryDeleteMutation.isPending}>
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    }
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {galleryPreview ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4" onClick={() => setGalleryPreview(null)}>
+          <img
+            src={galleryPreview.absolute_image_preview_url || galleryPreview.absolute_image_url || ""}
+            alt={galleryPreview.title}
+            className="max-h-[90vh] max-w-full rounded-2xl object-contain"
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/views/AdminEvents.tsx

@@ -1,70 +1,80 @@
 "use client";
 
-import * as React from 'react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Link, useNavigate } from '@/lib/router';
-import type { EventListItemSchema } from '@/lib/types';
-import { api } from '@/lib/api';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import ProgressiveImage from '@/components/ProgressiveImage';
-import { useToast } from '@/hooks/use-toast';
-import { formatJalali, formatToman, getEventCardImageUrl, resolveErrorMessage, toPersianDigits } from '@/lib/utils';
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Edit3, Eye, Plus, Trash2 } from "lucide-react";
+import { Link, useNavigate } from "@/lib/router";
+import type { EventListItemSchema } from "@/lib/types";
+import { api } from "@/lib/api";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import ProgressiveImage from "@/components/ProgressiveImage";
+import { useToast } from "@/hooks/use-toast";
+import { formatJalali, formatToman, getEventCardImageUrl, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
 
 const EVENTS_PAGE_SIZE = 30;
 
 const eventStatusOptions = [
-  { value: 'all', label: 'همه وضعیت‌ها' },
-  { value: 'draft', label: 'پیش‌نویس' },
-  { value: 'published', label: 'منتشر شده' },
-  { value: 'cancelled', label: 'لغو شده' },
-  { value: 'completed', label: 'برگزار شده' },
-];
+  { value: "all", label: "همه وضعیت‌ها" },
+  { value: "draft", label: "پیش‌نویس" },
+  { value: "published", label: "منتشر شده" },
+  { value: "cancelled", label: "لغو شده" },
+  { value: "completed", label: "برگزار شده" },
+] as const;
 
 const statusConfig: Record<
-  EventListItemSchema['status'],
-  { label: string; variant: 'outline' | 'default' | 'destructive' | 'secondary' }
+  EventListItemSchema["status"],
+  { label: string; variant: "outline" | "default" | "destructive" | "secondary" }
 > = {
-  draft: { label: 'پیش‌نویس', variant: 'outline' },
-  published: { label: 'منتشر شده', variant: 'default' },
-  cancelled: { label: 'لغو شده', variant: 'destructive' },
-  completed: { label: 'برگزار شده', variant: 'secondary' },
+  draft: { label: "پیش‌نویس", variant: "outline" },
+  published: { label: "منتشر شده", variant: "default" },
+  cancelled: { label: "لغو شده", variant: "destructive" },
+  completed: { label: "برگزار شده", variant: "secondary" },
 };
 
 const eventSortOptions = [
-  { value: 'newest', label: 'جدیدترین شروع' },
-  { value: 'oldest', label: 'قدیمی‌ترین شروع' },
-  { value: 'priceAsc', label: 'قیمت صعودی' },
-  { value: 'priceDesc', label: 'قیمت نزولی' },
-];
+  { value: "newest", label: "جدیدترین شروع" },
+  { value: "oldest", label: "قدیمی‌ترین شروع" },
+  { value: "priceAsc", label: "قیمت صعودی" },
+  { value: "priceDesc", label: "قیمت نزولی" },
+] as const;
 
-const AdminEventsPage: React.FC = () => {
+function priceLabel(price?: number | null) {
+  return Number(price || 0) === 0 ? "رایگان" : formatToman(price);
+}
+
+export default function AdminEventsPage() {
   const { toast } = useToast();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [filters, setFilters] = React.useState({
-    search: '',
-    status: 'all' as 'all' | EventListItemSchema['status'],
-    type: 'all' as 'all' | EventListItemSchema['event_type'],
-    sort: 'newest' as (typeof eventSortOptions)[number]['value'],
+    search: "",
+    status: "all" as "all" | EventListItemSchema["status"],
+    type: "all" as "all" | EventListItemSchema["event_type"],
+    sort: "newest" as (typeof eventSortOptions)[number]["value"],
   });
 
   const eventsQuery = useQuery({
-    queryKey: ['admin', 'events', filters],
+    queryKey: ["admin", "events", filters],
     queryFn: () =>
       api.getEvents({
-        statuses:
-          filters.status === 'all'
-            ? undefined
-            : [filters.status as EventListItemSchema['status']],
-        event_type:
-          filters.type === 'all'
-            ? undefined
-            : (filters.type as EventListItemSchema['event_type']),
+        statuses: filters.status === "all" ? undefined : [filters.status],
+        event_type: filters.type === "all" ? undefined : filters.type,
         search: filters.search || undefined,
         limit: EVENTS_PAGE_SIZE,
       }),
@@ -73,39 +83,95 @@ const AdminEventsPage: React.FC = () => {
   const deleteMutation = useMutation({
     mutationFn: (eventId: number) => api.deleteEvent(eventId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin', 'events'] });
-      toast({ title: 'رویداد حذف شد', variant: 'success' });
+      queryClient.invalidateQueries({ queryKey: ["admin", "events"] });
+      toast({ title: "رویداد حذف شد", variant: "success" });
     },
     onError: (error) => {
-      toast({
-        title: 'خطا',
-        description: resolveErrorMessage(error),
-        variant: 'destructive',
-      });
+      toast({ title: "خطا", description: resolveErrorMessage(error), variant: "destructive" });
     },
   });
 
   const sortedEvents = React.useMemo(() => {
     const list = (eventsQuery.data ?? []).slice();
     switch (filters.sort) {
-      case 'newest':
+      case "newest":
         return list.sort((a, b) => new Date(b.start_time).getTime() - new Date(a.start_time).getTime());
-      case 'oldest':
+      case "oldest":
         return list.sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime());
-      case 'priceAsc':
+      case "priceAsc":
         return list.sort((a, b) => Number(a.price) - Number(b.price));
-      case 'priceDesc':
+      case "priceDesc":
         return list.sort((a, b) => Number(b.price) - Number(a.price));
       default:
         return list;
     }
   }, [eventsQuery.data, filters.sort]);
 
+  const renderEventActions = (event: EventListItemSchema) => (
+    <div className="flex items-center justify-end gap-1">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="icon" variant="outline" onClick={() => navigate(`/admin/events/${event.id}`)} aria-label="جزئیات">
+            <Eye className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>جزئیات</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="icon" variant="outline" asChild aria-label="ویرایش">
+            <Link to={`/admin/events/${event.id}/edit`}>
+              <Edit3 className="h-4 w-4" />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>ویرایش</TooltipContent>
+      </Tooltip>
+      <AlertDialog>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <AlertDialogTrigger asChild>
+              <Button size="icon" variant="destructive" disabled={deleteMutation.isPending} aria-label="حذف">
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </AlertDialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent>حذف</TooltipContent>
+        </Tooltip>
+        <AlertDialogContent dir="rtl">
+          <AlertDialogHeader className="text-right">
+            <AlertDialogTitle>حذف رویداد</AlertDialogTitle>
+            <AlertDialogDescription>
+              آیا از حذف رویداد «{event.title}» مطمئن هستید؟ این عملیات رویداد را از لیست‌های عادی حذف می‌کند.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="gap-2 sm:justify-start">
+            <AlertDialogCancel>انصراف</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => deleteMutation.mutate(event.id)}
+            >
+              حذف
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+
   return (
-    <div className="space-y-6" dir="rtl">
-      <div className="flex flex-col gap-1">
-        <h2 className="text-xl font-semibold">رویدادها</h2>
-        <p className="text-sm text-muted-foreground">مدیریت رویدادها، ثبت‌نام‌ها و وضعیت انتشار</p>
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-xl font-semibold">رویدادها</h2>
+          <p className="text-sm text-muted-foreground">مدیریت رویدادها، ثبت‌نام‌ها و وضعیت انتشار</p>
+        </div>
+        <Button asChild>
+          <Link to="/admin/events/create">
+            <Plus className="ml-2 h-4 w-4" />
+            افزودن رویداد
+          </Link>
+        </Button>
       </div>
 
       <Card>
@@ -113,55 +179,23 @@ const AdminEventsPage: React.FC = () => {
           <CardTitle>فیلترها</CardTitle>
           <CardDescription>پیدا کردن سریع رویدادها</CardDescription>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent>
           <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
             <Input
               placeholder="عنوان رویداد..."
               value={filters.search}
               onChange={(event) => setFilters((prev) => ({ ...prev, search: event.target.value }))}
             />
-            <Select
-              value={filters.status}
-              onValueChange={(value) =>
-                setFilters((prev) => ({
-                  ...prev,
-                  status: value as 'all' | EventListItemSchema['status'],
-                }))
-              }
-            >
-              <SelectTrigger>
-                <SelectValue>
-                  {eventStatusOptions.find((option) => option.value === filters.status)?.label ||
-                    'وضعیت'}
-                </SelectValue>
-              </SelectTrigger>
+            <Select value={filters.status} onValueChange={(value) => setFilters((prev) => ({ ...prev, status: value as typeof filters.status }))}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
                 {eventStatusOptions.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
+                  <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
                 ))}
               </SelectContent>
             </Select>
-            <Select
-              value={filters.type}
-              onValueChange={(value) =>
-                setFilters((prev) => ({
-                  ...prev,
-                  type: value as 'all' | EventListItemSchema['event_type'],
-                }))
-              }
-            >
-              <SelectTrigger>
-                <SelectValue>
-                  {{
-                    all: 'همه انواع',
-                    online: 'آنلاین',
-                    on_site: 'حضوری',
-                    hybrid: 'ترکیبی',
-                  }[filters.type]}
-                </SelectValue>
-              </SelectTrigger>
+            <Select value={filters.type} onValueChange={(value) => setFilters((prev) => ({ ...prev, type: value as typeof filters.type }))}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">همه انواع</SelectItem>
                 <SelectItem value="online">آنلاین</SelectItem>
@@ -169,26 +203,11 @@ const AdminEventsPage: React.FC = () => {
                 <SelectItem value="hybrid">ترکیبی</SelectItem>
               </SelectContent>
             </Select>
-            <Select
-              value={filters.sort}
-              onValueChange={(value) =>
-                setFilters((prev) => ({
-                  ...prev,
-                  sort: value as (typeof eventSortOptions)[number]['value'],
-                }))
-              }
-            >
-              <SelectTrigger>
-                <SelectValue>
-                  {eventSortOptions.find((option) => option.value === filters.sort)?.label ||
-                    'مرتب‌سازی'}
-                </SelectValue>
-              </SelectTrigger>
+            <Select value={filters.sort} onValueChange={(value) => setFilters((prev) => ({ ...prev, sort: value as typeof filters.sort }))}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
                 {eventSortOptions.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
+                  <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
                 ))}
               </SelectContent>
             </Select>
@@ -207,97 +226,75 @@ const AdminEventsPage: React.FC = () => {
           ) : sortedEvents.length === 0 ? (
             <p className="text-sm text-muted-foreground">رویدادی یافت نشد.</p>
           ) : (
-            <div className="space-y-4">
-              <div className="hidden md:block">
-                <ScrollArea className="rounded-md border">
-                  <table dir="rtl" className="w-full min-w-[780px] text-sm">
-                    <thead className="text-xs uppercase text-muted-foreground">
-                      <tr>
-                        <th className="px-3 py-2 text-right">پوستر</th>
-                        <th className="px-3 py-2 text-right">عنوان</th>
-                        <th className="px-3 py-2 text-right">وضعیت</th>
-                        <th className="px-3 py-2 text-right">تاریخ شروع</th>
-                        <th className="px-3 py-2 text-right">ثبت‌نام‌ها</th>
-                        <th className="px-3 py-2 text-right">قیمت (تومان)</th>
-                        <th className="px-3 py-2 text-right">عملیات</th>
+            <>
+              <div className="hidden overflow-x-auto rounded-md border md:block">
+                <table dir="rtl" className="w-full min-w-[860px] text-sm">
+                  <thead className="text-xs uppercase text-muted-foreground">
+                    <tr>
+                      <th className="w-36 px-3 py-2 text-right">پوستر</th>
+                      <th className="px-3 py-2 text-right">عنوان</th>
+                      <th className="px-3 py-2 text-right">وضعیت</th>
+                      <th className="px-3 py-2 text-right">تاریخ شروع</th>
+                      <th className="px-3 py-2 text-right">ثبت‌نام‌ها</th>
+                      <th className="px-3 py-2 text-right">قیمت</th>
+                      <th className="px-3 py-2 text-right"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {sortedEvents.map((event) => (
+                      <tr key={event.id} className="border-b last:border-0 hover:bg-muted/50">
+                        <td className="px-3 py-2">
+                          <ProgressiveImage
+                            src={getEventCardImageUrl(event)}
+                            alt={event.title}
+                            wrapperClassName="aspect-video w-28 overflow-hidden rounded-lg bg-muted"
+                            className="h-full w-full object-cover"
+                          />
+                        </td>
+                        <td className="cursor-pointer px-3 py-2 text-right font-medium" onClick={() => navigate(`/admin/events/${event.id}`)}>
+                          {event.title}
+                        </td>
+                        <td className="px-3 py-2 text-right">
+                          <Badge variant={statusConfig[event.status].variant}>{statusConfig[event.status].label}</Badge>
+                        </td>
+                        <td className="px-3 py-2 text-right">{formatJalali(event.start_time)}</td>
+                        <td className="px-3 py-2 text-right">{toPersianDigits(event.registration_count)}</td>
+                        <td className="px-3 py-2 text-right">{priceLabel(event.price)}</td>
+                        <td className="px-3 py-2 text-left">{renderEventActions(event)}</td>
                       </tr>
-                    </thead>
-                    <tbody>
-                      {sortedEvents.map((event) => (
-                        <tr key={event.id} className="border-b last:border-0 hover:bg-muted/50">
-                          <td className="px-3 py-2 text-right">
-                            <ProgressiveImage
-                              src={getEventCardImageUrl(event)}
-                              alt={event.title}
-                              wrapperClassName="h-12 w-12 rounded"
-                              className="h-12 w-12 rounded object-cover"
-                            />
-                          </td>
-                          <td className="px-3 py-2 text-right cursor-pointer" onClick={() => navigate(`/admin/events/${event.id}`)}>
-                            {event.title}
-                          </td>
-                          <td className="px-3 py-2 text-center">
-                            <Badge variant={statusConfig[event.status].variant}>
-                              {statusConfig[event.status].label}
-                            </Badge>
-                          </td>
-                          <td className="px-3 py-2 text-right">{formatJalali(event.start_time)}</td>
-                          <td className="px-3 py-2 text-right">{toPersianDigits(event.registration_count)}</td>
-                          <td className="px-3 py-2 text-right">{formatToman(event.price)}</td>
-                          <td className="px-3 py-2 text-left flex items-center gap-1">
-                            <Button size="sm" variant="outline" onClick={() => navigate(`/admin/events/${event.id}`)}>
-                              جزئیات
-                            </Button>
-                            <Button size="sm" variant="outline" asChild>
-                              <Link to={`/admin/events/${event.id}/edit`}>ویرایش</Link>
-                            </Button>
-                            <Button
-                              size="sm"
-                              variant="destructive"
-                              onClick={() => deleteMutation.mutate(event.id)}
-                            >
-                              حذف
-                            </Button>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </ScrollArea>
+                    ))}
+                  </tbody>
+                </table>
               </div>
 
               <div className="grid gap-3 md:hidden">
                 {sortedEvents.map((event) => (
-                  <div key={event.id} className="rounded-lg border p-3 space-y-2 bg-card">
+                  <div key={event.id} className="space-y-3 rounded-lg border bg-card p-3">
+                    <ProgressiveImage
+                      src={getEventCardImageUrl(event)}
+                      alt={event.title}
+                      wrapperClassName="aspect-video w-full overflow-hidden rounded-lg bg-muted"
+                      className="h-full w-full object-cover"
+                    />
                     <div className="flex items-center justify-between gap-2">
-                      <div className="font-semibold text-right">{event.title}</div>
+                      <button className="text-right font-semibold" onClick={() => navigate(`/admin/events/${event.id}`)}>
+                        {event.title}
+                      </button>
                       <Badge variant={statusConfig[event.status].variant}>{statusConfig[event.status].label}</Badge>
                     </div>
-                    <div className="text-xs text-muted-foreground text-right space-y-1">
+                    <div className="space-y-1 text-right text-xs text-muted-foreground">
                       <div>تاریخ شروع: {formatJalali(event.start_time)}</div>
                       <div>ثبت‌نام‌ها: {toPersianDigits(event.registration_count)}</div>
-                      <div>قیمت: {formatToman(event.price)}</div>
-                    </div>
-                    <div className="flex items-center gap-2 justify-end">
-                      <Button size="sm" variant="outline" onClick={() => navigate(`/admin/events/${event.id}`)}>
-                        جزئیات
-                      </Button>
-                      <Button size="sm" variant="outline" asChild>
-                        <Link to={`/admin/events/${event.id}/edit`}>ویرایش</Link>
-                      </Button>
-                      <Button size="sm" variant="destructive" onClick={() => deleteMutation.mutate(event.id)}>
-                        حذف
-                      </Button>
+                      <div>قیمت: {priceLabel(event.price)}</div>
                     </div>
+                    {renderEventActions(event)}
                   </div>
                 ))}
               </div>
-            </div>
+            </>
           )}
         </CardContent>
       </Card>
     </div>
   );
-};
-
-export default AdminEventsPage;
+}

src/views/AdminLayout.tsx

@@ -1,19 +1,71 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import {
+  Building2,
+  CalendarDays,
+  FileText,
+  FolderTree,
+  GraduationCap,
+  LayoutDashboard,
+  Menu,
+  PanelRightClose,
+  PanelRightOpen,
+  ShieldCheck,
+  Tags,
+  TicketPercent,
+  UsersRound,
+} from "lucide-react";
 import { Navigate, NavLink, useLocation } from "@/lib/router";
 import { useAuth } from "@/contexts/AuthContext";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
 
-const navItems = [
-  { to: "/admin/users", label: "مدیریت کاربران", requiresStaff: true },
-  { to: "/admin/events", label: "مدیریت رویدادها", requiresStaff: true },
-  { to: "/admin/blog", label: "مدیریت بلاگ", requiresStaff: false },
+const navGroups = [
+  {
+    key: "dashboard",
+    label: "داشبورد",
+    items: [
+      { to: "/admin/dashboard", label: "داشبورد", icon: LayoutDashboard, visibility: "staff" },
+    ],
+  },
+  {
+    key: "users",
+    label: "کاربران",
+    items: [
+      { to: "/admin/users", label: "کاربران", icon: UsersRound, visibility: "staff" },
+      { to: "/admin/universities", label: "دانشگاه‌ها", icon: Building2, visibility: "staff" },
+      { to: "/admin/majors", label: "رشته‌ها", icon: GraduationCap, visibility: "staff" },
+    ],
+  },
+  {
+    key: "events",
+    label: "رویدادها",
+    items: [
+      { to: "/admin/events", label: "رویدادها", icon: CalendarDays, visibility: "staff" },
+      { to: "/admin/coupons", label: "کدهای تخفیف", icon: TicketPercent, visibility: "staff" },
+    ],
+  },
+  {
+    key: "blog",
+    label: "بلاگ و دسترسی",
+    items: [
+      { to: "/admin/blog", label: "نوشته‌های بلاگ", icon: FileText, visibility: "blog" },
+      { to: "/admin/blog/categories", label: "دسته‌بندی‌ها", icon: FolderTree, visibility: "taxonomy" },
+      { to: "/admin/blog/tags", label: "برچسب‌ها", icon: Tags, visibility: "taxonomy" },
+      { to: "/admin/authorizations", label: "دسترسی‌ها", icon: ShieldCheck, visibility: "superuser" },
+    ],
+  },
 ] as const;
 
+type NavItem = (typeof navGroups)[number]["items"][number];
+
 export default function AdminLayout({ children }: { children: ReactNode }) {
   const location = useLocation();
   const { user, isAuthenticated, loading } = useAuth();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const canAccessAdmin = useMemo(
     () => isAuthenticated && Boolean(user?.is_staff || user?.is_superuser || user?.can_access_blog_admin),
     [isAuthenticated, user?.can_access_blog_admin, user?.is_staff, user?.is_superuser],
@@ -31,41 +83,156 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
     return <Navigate to="/" replace />;
   }
 
-  const visibleNavItems = navItems.filter((item) => {
-    if (item.requiresStaff) {
-      return Boolean(user?.is_staff || user?.is_superuser);
-    }
+  const canSeeItem = (item: NavItem) => {
+    if (item.visibility === "staff") return Boolean(user?.is_staff || user?.is_superuser);
+    if (item.visibility === "taxonomy") return Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
+    if (item.visibility === "superuser") return Boolean(user?.is_superuser);
     return Boolean(user?.is_staff || user?.is_superuser || user?.can_access_blog_admin);
-  });
+  };
+
+  const visibleGroups = navGroups
+    .map((group) => ({ ...group, items: group.items.filter(canSeeItem) }))
+    .filter((group) => group.items.length > 0);
+
+  const isItemActive = (to: string) => {
+    if (location.pathname === to) return true;
+    if (to === "/admin/blog") {
+      return /^\/admin\/blog\/(new|\d+)/.test(location.pathname ?? "");
+    }
+    if (to === "/admin/events") {
+      return /^\/admin\/events(\/(create|\d+))?/.test(location.pathname ?? "");
+    }
+    return Boolean(location.pathname?.startsWith(`${to}/`));
+  };
 
   return (
-    <div className="min-h-screen bg-background" dir="rtl">
-      <div className="border-b bg-muted/20">
-        <div className="container mx-auto flex items-center justify-between px-4 py-4 gap-4 flex-row-reverse md:flex-row">
-          <h1 className="text-2xl font-bold">پنل مدیریت</h1>
-          <div className="flex flex-wrap items-center gap-2">
-            {visibleNavItems.map((item) => (
-              <NavLink
-                key={item.to}
-                to={item.to}
-                className={({ isActive }) =>
-                  [
-                    "rounded-full px-4 py-2 text-sm transition",
-                    (isActive || location.pathname?.startsWith(item.to))
-                      ? "bg-primary text-primary-foreground shadow"
-                      : "bg-card text-muted-foreground hover:text-foreground border",
-                  ].join(" ")
-                }
+    <div className="min-h-screen bg-muted/15" dir="rtl">
+      <div className="flex min-h-screen">
+        <aside
+          className={cn(
+            "sticky top-0 hidden h-screen shrink-0 border-l bg-background/95 shadow-sm backdrop-blur transition-[width] duration-300 lg:flex lg:flex-col",
+            sidebarCollapsed ? "w-20" : "w-72",
+          )}
+        >
+          <div className={cn("border-b p-4", sidebarCollapsed ? "text-center" : "text-right")}>
+            <div className={cn("flex items-center gap-2", sidebarCollapsed ? "justify-center" : "justify-start")}>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9 shrink-0 rounded-2xl"
+                onClick={() => setSidebarCollapsed((value) => !value)}
+                aria-label={sidebarCollapsed ? "باز کردن منوی مدیریت" : "جمع کردن منوی مدیریت"}
+                title={sidebarCollapsed ? "باز کردن منو" : "جمع کردن منو"}
               >
-                {item.label}
-              </NavLink>
+                {sidebarCollapsed ? <PanelRightOpen className="h-4 w-4" /> : <PanelRightClose className="h-4 w-4" />}
+              </Button>
+              {!sidebarCollapsed ? (
+                <div className="min-w-0">
+                  <h1 className="text-lg font-bold">پنل مدیریت</h1>
+                  <p className="text-xs text-muted-foreground">انجمن علمی مهندسی کامپیوتر</p>
+                </div>
+              ) : null}
+            </div>
+          </div>
+          <nav className="flex-1 space-y-3 p-3">
+            {visibleGroups.map((group) => (
+              <div key={group.key} className="space-y-2">
+                <p
+                  className={cn(
+                    "px-3 py-2 text-xs font-semibold text-muted-foreground transition-opacity",
+                    sidebarCollapsed && "sr-only",
+                  )}
+                >
+                  {group.label}
+                </p>
+                {group.items.map((item) => {
+                  const Icon = item.icon;
+                  const active = isItemActive(item.to);
+                  return (
+                    <NavLink
+                      key={item.to}
+                      to={item.to}
+                      title={sidebarCollapsed ? item.label : undefined}
+                      className={cn(
+                        "flex items-center rounded-2xl px-3 py-3 text-sm transition",
+                        sidebarCollapsed ? "justify-center" : "gap-3",
+                        active
+                          ? "bg-primary text-primary-foreground shadow"
+                          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                      )}
+                    >
+                      <Icon className="h-5 w-5 shrink-0" />
+                      <span className={cn("font-medium", sidebarCollapsed && "sr-only")}>{item.label}</span>
+                    </NavLink>
+                  );
+                })}
+              </div>
             ))}
+          </nav>
+        </aside>
+
+        <div className="min-w-0 flex-1">
+          <div className="border-b bg-background/90 lg:hidden">
+            <div className="flex items-center justify-between gap-3 px-4 py-3">
+              <div className="text-right">
+                <h1 className="text-lg font-bold">پنل مدیریت</h1>
+                <p className="text-xs text-muted-foreground">مدیریت بخش‌های سامانه</p>
+              </div>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-2 rounded-2xl">
+                    <Menu className="h-4 w-4" />
+                    منو
+                  </Button>
+                </SheetTrigger>
+                <SheetContent
+                  side="bottom"
+                  className="max-h-[82vh] overflow-y-auto rounded-t-[2rem] border-t p-4 pb-[calc(env(safe-area-inset-bottom)+1rem)]"
+                  dir="rtl"
+                >
+                  <SheetHeader className="mt-6 text-right">
+                    <SheetTitle>بخش‌های پنل مدیریت</SheetTitle>
+                  </SheetHeader>
+                  <nav className="mt-5 space-y-5">
+                    {visibleGroups.map((group) => (
+                      <div key={group.key} className="space-y-2">
+                        <p className="px-2 text-xs font-semibold text-muted-foreground">{group.label}</p>
+                        <div className="grid gap-2 sm:grid-cols-2">
+                          {group.items.map((item) => {
+                            const Icon = item.icon;
+                            const active = isItemActive(item.to);
+                            return (
+                              <SheetClose asChild key={item.to}>
+                                <NavLink
+                                  to={item.to}
+                                  className={cn(
+                                    "flex items-center gap-3 rounded-2xl border px-3 py-3 text-sm transition",
+                                    active
+                                      ? "border-primary bg-primary text-primary-foreground shadow"
+                                      : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
+                                  )}
+                                  aria-current={active ? "page" : undefined}
+                                >
+                                  <Icon className="h-5 w-5 shrink-0" />
+                                  <span className="font-medium">{item.label}</span>
+                                </NavLink>
+                              </SheetClose>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    ))}
+                  </nav>
+                </SheetContent>
+              </Sheet>
+            </div>
+          </div>
+          <div className="container mx-auto min-w-0 px-3 pb-8 pt-4 sm:px-4 lg:py-6">
+            {children}
           </div>
         </div>
       </div>
-      <div className="container mx-auto px-4 py-6">
-        {children}
-      </div>
     </div>
   );
 }

src/views/AdminMetaOptions.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Edit3, Plus, Trash2 } from "lucide-react";
+import ConfirmAction from "@/components/ConfirmAction";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { MetaOptionSchema, MetaOptionWriteSchema } from "@/lib/types";
+import { api } from "@/lib/api";
+import { formatNumberPersian, resolveErrorMessage } from "@/lib/utils";
+import { useToast } from "@/hooks/use-toast";
+
+const PAGE_SIZE = 20;
+
+type Kind = "majors" | "universities";
+
+const config = {
+  majors: {
+    title: "رشته‌ها",
+    description: "مدیریت رشته‌های قابل انتخاب کاربران",
+    list: api.listAdminMajors.bind(api),
+    create: api.createMajor.bind(api),
+    update: api.updateMajor.bind(api),
+    delete: api.deleteMajor.bind(api),
+  },
+  universities: {
+    title: "دانشگاه‌ها",
+    description: "مدیریت دانشگاه‌های قابل انتخاب کاربران",
+    list: api.listAdminUniversities.bind(api),
+    create: api.createUniversity.bind(api),
+    update: api.updateUniversity.bind(api),
+    delete: api.deleteUniversity.bind(api),
+  },
+};
+
+export default function AdminMetaOptions({ kind }: { kind: Kind }) {
+  const spec = config[kind];
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const [search, setSearch] = React.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React.useState("");
+  const [page, setPage] = React.useState(1);
+  const [editing, setEditing] = React.useState<MetaOptionSchema | null>(null);
+  const [open, setOpen] = React.useState(false);
+  const [form, setForm] = React.useState<MetaOptionWriteSchema>({ code: "", name: "" });
+
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedSearch(search.trim()), 300);
+    return () => window.clearTimeout(timer);
+  }, [search]);
+
+  const query = useQuery({
+    queryKey: ["admin", kind, debouncedSearch, page],
+    queryFn: () => spec.list({ search: debouncedSearch || undefined, limit: PAGE_SIZE, offset: (page - 1) * PAGE_SIZE }),
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: () => (editing ? spec.update(editing.id, form) : spec.create(form)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["admin", kind] });
+      setOpen(false);
+      toast({ title: "ذخیره شد", variant: "success" });
+    },
+    onError: (error) => toast({ title: "خطا", description: resolveErrorMessage(error), variant: "destructive" }),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: number) => spec.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["admin", kind] });
+      toast({ title: "حذف شد", variant: "success" });
+    },
+    onError: (error) => toast({ title: "خطا", description: resolveErrorMessage(error), variant: "destructive" }),
+  });
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm({ code: "", name: "" });
+    setOpen(true);
+  };
+
+  const openEdit = (item: MetaOptionSchema) => {
+    setEditing(item);
+    setForm({ code: item.code, name: item.label });
+    setOpen(true);
+  };
+
+  const items = query.data?.results ?? [];
+  const count = query.data?.count ?? 0;
+  const hasMore = page * PAGE_SIZE < count;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold">{spec.title}</h2>
+          <p className="mt-1 text-sm text-muted-foreground">{spec.description}</p>
+        </div>
+        <Button onClick={openCreate}>
+          <Plus className="ml-2 h-4 w-4" />
+          افزودن
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>فهرست</CardTitle>
+          <CardDescription>جستجو، ویرایش و حذف نرم موارد</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Input
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setPage(1);
+            }}
+            placeholder="جستجو..."
+            className="max-w-md"
+          />
+          <div className="overflow-x-auto rounded-2xl border">
+            <table className="w-full min-w-[520px] text-sm">
+              <thead className="bg-muted/40 text-muted-foreground">
+                <tr>
+                  <th className="px-4 py-3 text-right">نام</th>
+                  <th className="px-4 py-3 text-right">کد</th>
+                  <th className="px-4 py-3 text-right">کاربران</th>
+                  <th className="px-4 py-3 text-left"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {query.isLoading ? (
+                  <tr>
+                    <td className="px-4 py-6 text-center text-muted-foreground" colSpan={4}>در حال بارگذاری...</td>
+                  </tr>
+                ) : items.length === 0 ? (
+                  <tr>
+                    <td className="px-4 py-6 text-center text-muted-foreground" colSpan={4}>موردی یافت نشد.</td>
+                  </tr>
+                ) : (
+                  items.map((item) => (
+                    <tr key={item.id} className="border-t hover:bg-muted/40">
+                      <td className="px-4 py-3 font-medium">{item.label}</td>
+                      <td className="px-4 py-3 text-muted-foreground">{item.code}</td>
+                      <td className="px-4 py-3">{formatNumberPersian(item.user_count ?? 0)}</td>
+                      <td className="px-4 py-3">
+                        <div className="flex justify-end gap-2">
+                          <Button size="icon" variant="outline" onClick={() => openEdit(item)} aria-label="ویرایش">
+                            <Edit3 className="h-4 w-4" />
+                          </Button>
+                          <ConfirmAction
+                            title="حذف مورد"
+                            description={`آیا از حذف «${item.label}» مطمئن هستید؟ این عملیات رکورد را از لیست‌های عادی حذف می‌کند.`}
+                            onConfirm={() => deleteMutation.mutate(item.id)}
+                            disabled={deleteMutation.isPending}
+                            trigger={
+                              <Button
+                            size="icon"
+                            variant="outline"
+                            className="text-destructive hover:text-destructive"
+                            disabled={deleteMutation.isPending}
+                            aria-label="حذف"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                              </Button>
+                            }
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>صفحه {formatNumberPersian(page)} از {formatNumberPersian(Math.max(1, Math.ceil(count / PAGE_SIZE)))}</span>
+            <div className="flex gap-2">
+              <Button size="sm" variant="outline" disabled={page === 1} onClick={() => setPage((current) => Math.max(1, current - 1))}>قبلی</Button>
+              <Button size="sm" variant="outline" disabled={!hasMore} onClick={() => setPage((current) => current + 1)}>بعدی</Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent dir="rtl">
+          <DialogHeader className="text-right">
+            <DialogTitle>{editing ? "ویرایش" : "افزودن"} {spec.title}</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-2">
+            <div className="space-y-2">
+              <Label>نام</Label>
+              <Input value={form.name} onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>کد</Label>
+              <Input dir="ltr" value={form.code} onChange={(event) => setForm((current) => ({ ...current, code: event.target.value }))} />
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:justify-start">
+            <Button variant="outline" onClick={() => setOpen(false)}>انصراف</Button>
+            <Button disabled={saveMutation.isPending || !form.name.trim() || !form.code.trim()} onClick={() => saveMutation.mutate()}>
+              ذخیره
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/views/AdminUsers.tsx

@@ -1,183 +1,238 @@
 "use client";
 
-import * as React from 'react';
-import {
-  useQuery,
-} from '@tanstack/react-query';
-import type { UserListSchema } from '@/lib/types';
-import { api } from '@/lib/api';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { useToast } from '@/hooks/use-toast';
-import {
-  formatJalali,
-  formatNumberPersian,
-  resolveErrorMessage,
-} from '@/lib/utils';
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Mail, Phone, UserRound } from "lucide-react";
+import AsyncSearchableCombobox from "@/components/AsyncSearchableCombobox";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import type { UserListSchema, UserProfileSchema } from "@/lib/types";
+import { api } from "@/lib/api";
+import { formatJalali, formatNumberPersian, resolveErrorMessage } from "@/lib/utils";
+import { useToast } from "@/hooks/use-toast";
 
 const USERS_PAGE_SIZE = 25;
 
-const AdminUsersPage: React.FC = () => {
+function fullName(user: Pick<UserListSchema, "first_name" | "last_name" | "username">) {
+  return [user.first_name, user.last_name].filter(Boolean).join(" ") || user.username;
+}
+
+function initials(user: Pick<UserListSchema, "first_name" | "last_name" | "username">) {
+  const base = [user.first_name, user.last_name].filter(Boolean).join(" ") || user.username;
+  return base.slice(0, 2).toUpperCase();
+}
+
+function InfoRow({ label, value }: { label: string; value?: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-xl bg-muted/35 px-3 py-2 text-sm">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="text-left font-medium">{value || "—"}</span>
+    </div>
+  );
+}
+
+function UserDetailDialog({
+  user,
+  open,
+  onOpenChange,
+}: {
+  user: UserProfileSchema | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  if (!user) return null;
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto" dir="rtl">
+        <DialogHeader className="text-right">
+          <DialogTitle>جزئیات کاربر</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-5">
+          <div className="flex items-center gap-3 rounded-2xl border bg-muted/20 p-4">
+            <Avatar className="h-16 w-16">
+              <AvatarImage src={user.profile_picture_thumbnail_url || user.profile_picture || undefined} />
+              <AvatarFallback>{initials(user)}</AvatarFallback>
+            </Avatar>
+            <div className="min-w-0 text-right">
+              <h3 className="truncate text-lg font-bold">{fullName(user)}</h3>
+              <p className="truncate text-sm text-muted-foreground">{user.username}</p>
+            </div>
+            <div className="mr-auto flex flex-wrap gap-2">
+              <Badge variant={user.is_active ? "default" : "outline"}>{user.is_active ? "فعال" : "غیرفعال"}</Badge>
+              {user.is_staff ? <Badge variant="secondary">Staff</Badge> : null}
+              {user.is_superuser ? <Badge variant="destructive">Superuser</Badge> : null}
+            </div>
+          </div>
+
+          <div className="grid gap-2 md:grid-cols-2">
+            <InfoRow label="نام" value={user.first_name} />
+            <InfoRow label="نام خانوادگی" value={user.last_name} />
+            <InfoRow label="موبایل" value={user.mobile} />
+            <InfoRow label="ایمیل" value={user.email} />
+            <InfoRow label="شماره دانشجویی" value={user.student_id} />
+            <InfoRow label="سال ورود" value={user.year_of_study ? formatNumberPersian(user.year_of_study) : null} />
+            <InfoRow label="دانشگاه" value={user.university} />
+            <InfoRow label="رشته" value={user.major} />
+            <InfoRow label="تاریخ عضویت" value={formatJalali(user.date_joined)} />
+            <InfoRow label="حذف شده" value={user.is_deleted ? "بله" : "خیر"} />
+            <InfoRow label="تایید موبایل" value={user.is_mobile_verified ? "بله" : "خیر"} />
+            <InfoRow label="تایید ایمیل" value={user.is_email_verified ? "بله" : "خیر"} />
+            <InfoRow label="دسترسی بلاگ" value={user.can_access_blog_admin ? "دارد" : "ندارد"} />
+            <InfoRow label="نوشتن بلاگ" value={user.can_write_blog_posts ? "دارد" : "ندارد"} />
+            <InfoRow label="بازبینی بلاگ" value={user.can_review_blog_posts ? "دارد" : "ندارد"} />
+            <InfoRow label="اتصال گوگل" value={user.has_google_link ? "دارد" : "ندارد"} />
+          </div>
+
+          {user.bio ? (
+            <div className="rounded-2xl border bg-background p-4 text-right text-sm leading-7">
+              <div className="mb-2 font-semibold">بیوگرافی</div>
+              {user.bio}
+            </div>
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function AdminUsersPage() {
   const { toast } = useToast();
   const [filters, setFilters] = React.useState({
-    search: '',
-    studentId: '',
-    university: 'all',
-    major: 'all',
-    isActive: 'all',
+    search: "",
+    studentId: "",
+    university: null as string | null,
+    major: null as string | null,
+    isActive: "all",
   });
+  const [debouncedSearch, setDebouncedSearch] = React.useState("");
   const [page, setPage] = React.useState(1);
+  const [selectedUserId, setSelectedUserId] = React.useState<number | null>(null);
 
-  const majorsQuery = useQuery({
-    queryKey: ['majors'],
-    queryFn: () => api.getMajors(),
-  });
-  const universitiesQuery = useQuery({
-    queryKey: ['universities'],
-    queryFn: () => api.getUniversities(),
-  });
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedSearch(filters.search.trim()), 300);
+    return () => window.clearTimeout(timer);
+  }, [filters.search]);
 
   const usersQuery = useQuery({
-    queryKey: ['admin', 'users', filters, page],
+    queryKey: ["admin", "users", filters, debouncedSearch, page],
     queryFn: () =>
       api.listUsers({
-        search: filters.search || undefined,
+        search: debouncedSearch || undefined,
         student_id: filters.studentId || undefined,
-        university: filters.university === 'all' ? undefined : filters.university,
-        major: filters.major === 'all' ? undefined : filters.major,
+        university: filters.university || undefined,
+        major: filters.major || undefined,
         is_active:
-          filters.isActive === 'all'
+          filters.isActive === "all"
             ? undefined
-            : filters.isActive === 'active'
-            ? 'true'
-            : 'false',
+            : filters.isActive === "active"
+              ? "true"
+              : "false",
         limit: USERS_PAGE_SIZE,
         offset: (page - 1) * USERS_PAGE_SIZE,
       }),
   });
 
-  const users = usersQuery.data ?? [];
-  const hasMore = users.length === USERS_PAGE_SIZE;
+  const selectedUserQuery = useQuery({
+    queryKey: ["admin", "users", selectedUserId, "detail"],
+    queryFn: () => api.getUserDetail(selectedUserId as number),
+    enabled: selectedUserId != null,
+  });
 
   React.useEffect(() => {
     if (usersQuery.error) {
       toast({
-        title: 'خطا در بارگذاری کاربران',
+        title: "خطا در بارگذاری کاربران",
         description: resolveErrorMessage(usersQuery.error),
-        variant: 'destructive',
+        variant: "destructive",
       });
     }
   }, [usersQuery.error, toast]);
 
-  const handleFilterChange = (field: keyof typeof filters, value: string) => {
-    setFilters((prev) => ({ ...prev, [field]: value }));
+  const users = usersQuery.data ?? [];
+  const hasMore = users.length === USERS_PAGE_SIZE;
+
+  const handleFilterChange = (field: keyof typeof filters, value: string | null) => {
+    setFilters((prev) => ({ ...prev, [field]: value ?? "" }));
     setPage(1);
   };
 
+  const loadMajors = React.useCallback(async (params: { search: string; limit: number; offset: number }) => {
+    const data = await api.getMajorsPaged(params);
+    return {
+      count: data.count,
+      results: data.results.map((item) => ({ value: item.code, label: item.label })),
+    };
+  }, []);
+
+  const loadUniversities = React.useCallback(async (params: { search: string; limit: number; offset: number }) => {
+    const data = await api.getUniversitiesPaged(params);
+    return {
+      count: data.count,
+      results: data.results.map((item) => ({ value: item.code, label: item.label })),
+    };
+  }, []);
+
   return (
-    <div className="space-y-6" dir="rtl">
+    <div className="space-y-6">
       <div>
         <h2 className="text-xl font-semibold">کاربران</h2>
-        <p className="text-sm text-muted-foreground mt-1">مدیریت و جستجوی کاربران سامانه</p>
+        <p className="mt-1 text-sm text-muted-foreground">مدیریت و جستجوی کاربران سامانه</p>
       </div>
 
       <Card>
         <CardHeader>
           <CardTitle>فیلترها</CardTitle>
-          <CardDescription>جستجو و محدود کردن نتایج</CardDescription>
+          <CardDescription>جستجو با نام، ایمیل، موبایل، دانشگاه یا رشته</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
             <Input
-              placeholder="نام، نام‌کاربری یا ایمیل..."
+              placeholder="نام، نام‌کاربری، ایمیل یا موبایل..."
               value={filters.search}
-              onChange={(event) => handleFilterChange('search', event.target.value)}
+              onChange={(event) => handleFilterChange("search", event.target.value)}
             />
             <Input
               placeholder="شماره دانشجویی"
               value={filters.studentId}
-              onChange={(event) => handleFilterChange('studentId', event.target.value)}
+              onChange={(event) => handleFilterChange("studentId", event.target.value)}
             />
-            <Select value={filters.isActive} onValueChange={(value) => handleFilterChange('isActive', value)}>
+            <Select value={filters.isActive} onValueChange={(value) => handleFilterChange("isActive", value)}>
               <SelectTrigger>
-                <SelectValue placeholder="وضعیت">
-                  {{
-                    all: 'همه وضعیت‌ها',
-                    active: 'فعال',
-                    inactive: 'غیرفعال',
-                  }[filters.isActive]}
-                </SelectValue>
+                <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="all">همه</SelectItem>
+                <SelectItem value="all">همه وضعیت‌ها</SelectItem>
                 <SelectItem value="active">فعال</SelectItem>
                 <SelectItem value="inactive">غیرفعال</SelectItem>
               </SelectContent>
             </Select>
-          </div>
-
-          <div className="grid gap-3 md:grid-cols-2">
-            <Select
+            <AsyncSearchableCombobox
               value={filters.university}
-              onValueChange={(value) => handleFilterChange('university', value)}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="دانشگاه">
-                  {filters.university === 'all'
-                    ? 'همه'
-                    : universitiesQuery.data?.find((item) => item.code === filters.university)?.label}
-                </SelectValue>
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">همه</SelectItem>
-                {universitiesQuery.data?.map((item) => (
-                  <SelectItem key={item.code} value={item.code}>
-                    {item.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Select value={filters.major} onValueChange={(value) => handleFilterChange('major', value)}>
-              <SelectTrigger>
-                <SelectValue placeholder="رشته">
-                  {filters.major === 'all'
-                    ? 'همه'
-                    : majorsQuery.data?.find((item) => item.code === filters.major)?.label}
-                </SelectValue>
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">همه</SelectItem>
-                {majorsQuery.data?.map((item) => (
-                  <SelectItem key={item.code} value={item.code}>
-                    {item.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+              onChange={(value) => handleFilterChange("university", value)}
+              loadOptions={loadUniversities}
+              placeholder="دانشگاه"
+            />
+          </div>
+          <div className="max-w-xl">
+            <AsyncSearchableCombobox
+              value={filters.major}
+              onChange={(value) => handleFilterChange("major", value)}
+              loadOptions={loadMajors}
+              placeholder="رشته"
+            />
           </div>
         </CardContent>
       </Card>
 
       <Card>
-        <CardHeader className="pb-0 md:pb-2">
+        <CardHeader>
           <CardTitle>لیست کاربران</CardTitle>
-          <CardDescription>نمایش کاربران مطابق فیلترهای انتخابی</CardDescription>
+          <CardDescription>برای مشاهده جزئیات، روی هر ردیف کلیک کنید.</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           {usersQuery.isLoading ? (
@@ -185,91 +240,86 @@ const AdminUsersPage: React.FC = () => {
           ) : users.length === 0 ? (
             <p className="text-sm text-muted-foreground">کاربری یافت نشد.</p>
           ) : (
-            <div className="space-y-3">
-              <ScrollArea className="rounded-md border hidden md:block">
-                <table dir="rtl" className="w-full min-w-[700px] text-sm">
-                  <thead className="text-xs uppercase text-muted-foreground">
-                    <tr>
-                      <th className="px-3 py-2 text-right">نام کامل</th>
-                      <th className="px-3 py-2 text-right">نام کاربری</th>
-                      <th className="px-3 py-2 text-right">ایمیل</th>
-                      <th className="px-3 py-2 text-right">دانشگاه / گرایش</th>
-                      <th className="px-3 py-2 text-right">وضعیت</th>
-                      <th className="px-3 py-2 text-right">تاریخ عضویت</th>
+            <div className="overflow-x-auto rounded-2xl border">
+              <table dir="rtl" className="w-full min-w-[620px] text-sm">
+                <thead className="bg-muted/40 text-muted-foreground">
+                  <tr>
+                    <th className="px-4 py-3 text-right">کاربر</th>
+                    <th className="px-4 py-3 text-right">موبایل</th>
+                    <th className="px-4 py-3 text-right">ایمیل</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {users.map((user) => (
+                    <tr
+                      key={user.id}
+                      role="button"
+                      tabIndex={0}
+                      className="cursor-pointer border-t transition hover:bg-muted/50"
+                      onClick={() => setSelectedUserId(user.id)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") setSelectedUserId(user.id);
+                      }}
+                    >
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-3">
+                          <Avatar className="h-11 w-11">
+                            <AvatarImage src={user.profile_picture_thumbnail_url || user.profile_picture || undefined} />
+                            <AvatarFallback>{initials(user)}</AvatarFallback>
+                          </Avatar>
+                          <div className="min-w-0 text-right">
+                            <div className="truncate font-semibold">{fullName(user)}</div>
+                            <div className="truncate text-xs text-muted-foreground">{user.username}</div>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3">
+                        <span className="inline-flex items-center gap-2">
+                          <Phone className="h-4 w-4 text-muted-foreground" />
+                          {user.mobile || "—"}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3">
+                        <span className="inline-flex items-center gap-2">
+                          <Mail className="h-4 w-4 text-muted-foreground" />
+                          {user.email || "—"}
+                        </span>
+                      </td>
                     </tr>
-                  </thead>
-                  <tbody>
-                    {users.map((user) => (
-                      <tr key={user.id} className="border-b last:border-0 hover:bg-muted/50">
-                        <td className="px-3 py-2 text-right">
-                          {(() => {
-                            const parts = [user.first_name, user.last_name].filter(Boolean);
-                            if (parts.length) return parts.join(' ');
-                            return user.username;
-                          })()}
-                        </td>
-                        <td className="px-3 py-2 text-right">{user.username}</td>
-                        <td className="px-3 py-2 text-right">{user.email}</td>
-                        <td className="px-3 py-2 text-right">
-                          {user.major || '—'} · {user.university || '—'}
-                        </td>
-                        <td className="px-3 py-2 text-right">
-                          <Badge variant={user.is_active ? 'default' : 'outline'}>
-                            {user.is_active ? 'فعال' : 'غیرفعال'}
-                          </Badge>
-                        </td>
-                        <td className="px-3 py-2 text-right">
-                          {formatJalali(user.date_joined)}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </ScrollArea>
-
-              <div className="grid gap-3 md:hidden">
-                {users.map((user) => (
-                  <div key={user.id} className="rounded-lg border p-3 space-y-2 bg-card">
-                    <div className="flex items-center justify-between gap-2">
-                      <div className="font-semibold text-right">{user.first_name || user.last_name ? `${user.first_name || ''} ${user.last_name || ''}`.trim() : user.username}</div>
-                      <Badge variant={user.is_active ? 'default' : 'outline'}>{user.is_active ? 'فعال' : 'غیرفعال'}</Badge>
-                    </div>
-                    <div className="text-xs text-muted-foreground text-right space-y-1">
-                      <div>نام کاربری: {user.username}</div>
-                      <div>ایمیل: {user.email}</div>
-                      <div>دانشگاه / گرایش: {user.university || '—'} · {user.major || '—'}</div>
-                      <div>تاریخ عضویت: {formatJalali(user.date_joined)}</div>
-                    </div>
-                  </div>
-                ))}
-              </div>
+                  ))}
+                </tbody>
+              </table>
             </div>
           )}
+
           <div className="flex items-center justify-between text-xs text-muted-foreground">
             <span>صفحه {formatNumberPersian(page)}</span>
             <div className="flex gap-2">
-              <Button
-                size="sm"
-                variant="outline"
-                disabled={page === 1}
-                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
-              >
+              <Button size="sm" variant="outline" disabled={page === 1} onClick={() => setPage((prev) => Math.max(1, prev - 1))}>
                 قبلی
               </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                disabled={!hasMore}
-                onClick={() => setPage((prev) => prev + 1)}
-              >
+              <Button size="sm" variant="outline" disabled={!hasMore} onClick={() => setPage((prev) => prev + 1)}>
                 بعدی
               </Button>
             </div>
           </div>
         </CardContent>
       </Card>
+
+      <UserDetailDialog
+        user={selectedUserQuery.data ?? null}
+        open={selectedUserId != null}
+        onOpenChange={(open) => {
+          if (!open) setSelectedUserId(null);
+        }}
+      />
+
+      {selectedUserQuery.isFetching && selectedUserId ? (
+        <div className="fixed inset-x-0 bottom-24 z-50 mx-auto flex w-fit items-center gap-2 rounded-full border bg-background px-4 py-2 text-sm shadow-lg">
+          <UserRound className="h-4 w-4 animate-pulse" />
+          در حال بارگذاری جزئیات...
+        </div>
+      ) : null}
     </div>
   );
-};
-
-export default AdminUsersPage;
+}

src/views/Auth.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   AlertTriangle,
   ArrowRight,
@@ -10,7 +9,7 @@ import {
   MessageSquareMore,
   Smartphone,
 } from "lucide-react";
-import SearchableCombobox from "@/components/SearchableCombobox";
+import AsyncSearchableCombobox from "@/components/AsyncSearchableCombobox";
 import OtpCodeField from "@/components/OtpCodeField";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -96,25 +95,23 @@ export default function Auth() {
     return () => window.clearInterval(timer);
   }, []);
 
-  const { data: majors = [], isLoading: majorsLoading } = useQuery({
-    queryKey: ["majors"],
-    queryFn: () => api.getMajors(),
-    staleTime: 7 * 24 * 60 * 60 * 1000,
-  });
-  const { data: universities = [], isLoading: universitiesLoading } = useQuery({
-    queryKey: ["universities"],
-    queryFn: () => api.getUniversities(),
-    staleTime: 7 * 24 * 60 * 60 * 1000,
-  });
+  const loadMajors = useCallback(async (params: { search: string; limit: number; offset: number }) => {
+    const data = await api.getMajorsPaged(params);
+    return {
+      count: data.count,
+      results: data.results.map((major) => ({ value: String(major.code), label: major.label })),
+    };
+  }, []);
 
-  const majorItems = useMemo(
-    () => majors.map((major) => ({ value: String(major.code), label: major.label })),
-    [majors],
-  );
-  const universityItems = useMemo(
-    () => universities.map((university) => ({ value: String(university.code), label: university.label })),
-    [universities],
-  );
+  const loadUniversities = useCallback(async (params: { search: string; limit: number; offset: number }) => {
+    const data = await api.getUniversitiesPaged(params);
+    return {
+      count: data.count,
+      results: data.results.map((university) => ({ value: String(university.code), label: university.label })),
+    };
+  }, []);
+  const majorsLoading = false;
+  const universitiesLoading = false;
 
   const stepMeta = useMemo(() => {
     switch (step) {
@@ -666,14 +663,14 @@ export default function Auth() {
           {universitiesLoading ? (
             <div className="h-12 animate-pulse rounded-2xl bg-muted" />
           ) : (
-            <SearchableCombobox
-              items={universityItems}
+            <AsyncSearchableCombobox
+              loadOptions={loadUniversities}
               value={registerForm.university}
               onChange={(value) => updateRegisterForm("university", value)}
               placeholder="انتخاب دانشگاه"
               searchPlaceholder="نام دانشگاه را بنویسید..."
               emptyText="دانشگاهی پیدا نشد"
-              dir="rtl"
+              className="h-12 rounded-2xl"
             />
           )}
         </div>
@@ -684,14 +681,14 @@ export default function Auth() {
           {majorsLoading ? (
             <div className="h-12 animate-pulse rounded-2xl bg-muted" />
           ) : (
-            <SearchableCombobox
-              items={majorItems}
+            <AsyncSearchableCombobox
+              loadOptions={loadMajors}
               value={registerForm.major}
               onChange={(value) => updateRegisterForm("major", value)}
               placeholder="انتخاب رشته"
               searchPlaceholder="نام رشته را بنویسید..."
               emptyText="رشته‌ای پیدا نشد"
-              dir="rtl"
+              className="h-12 rounded-2xl"
             />
           )}
         </div>

src/views/Blog.tsx

@@ -1,122 +1,453 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "@/lib/router";
-import { api } from "@/lib/api";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useEffect, useState } from "react";
+import { ChevronDown, ChevronLeft, ChevronRight, Filter, UserRound, X } from "lucide-react";
+import BlogThumbnail from "@/components/BlogThumbnail";
+import { BlogCardsSkeleton } from "@/components/page-loading";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
 import { Input } from "@/components/ui/input";
-import type * as Types from "@/lib/types";
+import { Link, useLocation, useNavigate } from "@/lib/router";
 import { blogPostPath } from "@/lib/blog-routes";
+import { apiBaseUrl, toAbsoluteUrl } from "@/lib/site";
+import type * as Types from "@/lib/types";
+import { cn, formatJalaliDate, getBlogCardImageUrl } from "@/lib/utils";
 
 type BlogProps = {
   initialPosts?: Types.PostListSchema[];
   initialSearch?: string;
+  initialCategory?: string;
+  initialTags?: string[];
+  initialAuthors?: string[];
+  banners?: Types.BlogBannerSchema[];
+  filters?: Types.BlogFiltersSchema;
 };
 
+function buildBlogPath(
+  pathname: string,
+  search: string,
+  category: string,
+  tags: string[],
+  authors: string[],
+) {
+  const params = new URLSearchParams();
+  if (category.trim()) params.set("category", category.trim());
+  tags.forEach((tag) => params.append("tag", tag));
+  authors.forEach((author) => params.append("author", author));
+  if (search.trim()) params.set("search", search.trim());
+  return params.size ? `${pathname}?${params.toString()}` : pathname;
+}
+
+function BlogBannerSlider({ banners }: { banners: Types.BlogBannerSchema[] }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useEffect(() => {
+    if (banners.length <= 1) return;
+    const timer = window.setInterval(() => {
+      setActiveIndex((index) => (index + 1) % banners.length);
+    }, 6000);
+    return () => window.clearInterval(timer);
+  }, [banners.length]);
+
+  if (!banners.length) return null;
+
+  const activeBanner = banners[activeIndex] ?? banners[0];
+  const goToPrevious = () => setActiveIndex((index) => (index - 1 + banners.length) % banners.length);
+  const goToNext = () => setActiveIndex((index) => (index + 1) % banners.length);
+
+  return (
+    <section className="mb-8 overflow-hidden rounded-[2rem] border border-border/70 bg-card">
+      <a href={activeBanner.url} target="_blank" rel="noopener noreferrer" className="block">
+        <img
+          src={activeBanner.image_url}
+          alt={activeBanner.alt_text || activeBanner.title || "بنر بلاگ"}
+          className="aspect-[5/1.25] w-full object-cover md:aspect-[6/1.25]"
+        />
+      </a>
+      {banners.length > 1 ? (
+        <div className="flex items-center justify-between gap-3 bg-background/80 px-4 py-3 backdrop-blur">
+          <div className="flex gap-1.5">
+            {banners.map((banner, index) => (
+              <button
+                key={banner.id}
+                type="button"
+                onClick={() => setActiveIndex(index)}
+                className={cn(
+                  "h-2.5 rounded-full transition-all",
+                  index === activeIndex ? "w-8 bg-primary" : "w-2.5 bg-muted-foreground/30",
+                )}
+                aria-label={`نمایش بنر ${index + 1}`}
+              />
+            ))}
+          </div>
+          <div className="flex gap-2">
+            <Button type="button" size="icon" variant="ghost" className="rounded-full" onClick={goToNext}>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button type="button" size="icon" variant="ghost" className="rounded-full" onClick={goToPrevious}>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
 export default function Blog({
   initialPosts = [],
   initialSearch = "",
+  initialCategory = "",
+  initialTags = [],
+  initialAuthors = [],
+  banners = [],
+  filters = { categories: [], tags: [], authors: [] },
 }: BlogProps) {
   const navigate = useNavigate();
   const location = useLocation();
-  const [posts, setPosts] = useState<Types.PostListSchema[]>(initialPosts);
-  const [search, setSearch] = useState(initialSearch);
-  const [loading, setLoading] = useState(!initialPosts.length && !initialSearch);
+  const pathname = location.pathname || "/blog";
+  const posts = initialPosts;
+  const [searchDraft, setSearchDraft] = useState(initialSearch);
+  const [selectedCategory, setSelectedCategory] = useState(initialCategory);
+  const [selectedTags, setSelectedTags] = useState<string[]>(initialTags);
+  const [selectedAuthors, setSelectedAuthors] = useState<string[]>(initialAuthors);
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
+    () => new Set(initialCategory ? [initialCategory] : []),
+  );
+  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
+  const [listPending, setListPending] = useState(false);
 
   useEffect(() => {
-    setPosts(initialPosts);
-  }, [initialPosts]);
-
-  useEffect(() => {
-    setSearch(initialSearch);
+    setSearchDraft(initialSearch);
+    setListPending(false);
   }, [initialSearch]);
 
-  const loadPosts = useCallback(async () => {
-    try {
-      setLoading(true);
-      const data = await api.getPosts({ search: search || undefined });
-      setPosts(data);
-    } catch (error) {
-      console.error("Error loading posts:", error);
-    } finally {
-      setLoading(false);
+  useEffect(() => {
+    setSelectedCategory(initialCategory);
+    if (initialCategory) {
+      setExpandedCategories((current) => new Set([...current, initialCategory]));
     }
-  }, [search]);
+    setListPending(false);
+  }, [initialCategory]);
 
   useEffect(() => {
-    loadPosts();
-  }, [loadPosts]);
+    setSelectedTags(initialTags);
+    setListPending(false);
+  }, [initialTags]);
 
   useEffect(() => {
-    const params = new URLSearchParams();
-    if (search.trim()) {
-      params.set("search", search.trim());
-    }
-    const basePath = location.pathname || "/blog";
-    const nextPath = params.size
-      ? `${basePath}?${params.toString()}`
-      : basePath;
-    navigate(nextPath, { replace: true });
-  }, [location.pathname, navigate, search]);
+    setSelectedAuthors(initialAuthors);
+    setListPending(false);
+  }, [initialAuthors]);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      if (searchDraft.trim() !== initialSearch.trim()) {
+        setListPending(true);
+        navigate(
+          buildBlogPath(pathname, searchDraft, selectedCategory, selectedTags, selectedAuthors),
+          { replace: true },
+        );
+      }
+    }, 400);
+
+    return () => window.clearTimeout(timer);
+  }, [initialSearch, navigate, pathname, searchDraft, selectedAuthors, selectedCategory, selectedTags]);
+
+  const navigateFilters = (next: {
+    search?: string;
+    category?: string;
+    tags?: string[];
+    authors?: string[];
+  }) => {
+    setListPending(true);
+    navigate(
+      buildBlogPath(
+        pathname,
+        next.search ?? searchDraft,
+        next.category ?? selectedCategory,
+        next.tags ?? selectedTags,
+        next.authors ?? selectedAuthors,
+      ),
+      { replace: true },
+    );
+  };
+
+  const selectCategory = (slug: string) => {
+    const nextCategory = selectedCategory === slug ? "" : slug;
+    setSelectedCategory(nextCategory);
+    navigateFilters({ category: nextCategory });
+  };
+
+  const toggleCategoryExpanded = (slug: string) => {
+    setExpandedCategories((current) => {
+      const next = new Set(current);
+      if (next.has(slug)) {
+        next.delete(slug);
+      } else {
+        next.add(slug);
+      }
+      return next;
+    });
+  };
+
+  const toggleTag = (slug: string) => {
+    const nextTags = selectedTags.includes(slug)
+      ? selectedTags.filter((item) => item !== slug)
+      : [...selectedTags, slug];
+    setSelectedTags(nextTags);
+    navigateFilters({ tags: nextTags });
+  };
+
+  const toggleAuthor = (username: string) => {
+    const nextAuthors = selectedAuthors.includes(username)
+      ? selectedAuthors.filter((item) => item !== username)
+      : [...selectedAuthors, username];
+    setSelectedAuthors(nextAuthors);
+    navigateFilters({ authors: nextAuthors });
+  };
+
+  const clearFilters = () => {
+    setSearchDraft("");
+    setSelectedCategory("");
+    setSelectedTags([]);
+    setSelectedAuthors([]);
+    setListPending(true);
+    navigate(pathname, { replace: true });
+  };
+
+  const renderCategoryTree = (categories: Types.BlogFilterCategory[], level = 0) => (
+    <div className={level === 0 ? "space-y-2" : "mt-2 space-y-2"}>
+      {categories.map((category) => {
+        const active = selectedCategory === category.slug;
+        const hasChildren = Boolean(category.children?.length);
+        const expanded = expandedCategories.has(category.slug);
+        return (
+          <div key={category.id} style={{ paddingRight: `${level * 0.75}rem` }}>
+            <div
+              className={cn(
+                "flex w-full items-center gap-1 rounded-2xl text-sm transition",
+                active ? "bg-primary text-primary-foreground shadow-sm" : "bg-background/70 text-muted-foreground hover:bg-primary/10 hover:text-primary",
+              )}
+            >
+              {hasChildren ? (
+                <button
+                  type="button"
+                  onClick={() => toggleCategoryExpanded(category.slug)}
+                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition hover:bg-current/10"
+                  aria-label={expanded ? "بستن زیر دسته‌ها" : "نمایش زیر دسته‌ها"}
+                >
+                  <ChevronDown className={cn("h-4 w-4 transition", expanded && "rotate-180")} />
+                </button>
+              ) : (
+                <span className="h-8 w-8 shrink-0" />
+              )}
+              <button
+                type="button"
+                onClick={() => selectCategory(category.slug)}
+                className="min-w-0 flex-1 px-2 py-2 text-right"
+              >
+                <span className="line-clamp-1">{category.name}</span>
+              </button>
+            </div>
+            {hasChildren && expanded ? renderCategoryTree(category.children, level + 1) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  const hasActiveFilters = Boolean(searchDraft || selectedCategory || selectedTags.length || selectedAuthors.length);
+
+  const filtersPanel = (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3 text-right">
+        <div className="flex items-center justify-start gap-2">
+          <Filter className="h-5 w-5 text-primary" />
+          <div>
+            <h2 className="font-bold">فیلترهای بلاگ</h2>
+          </div>
+        </div>
+        {hasActiveFilters ? (
+          <Button type="button" variant="ghost" size="sm" className="gap-2 rounded-full" onClick={clearFilters}>
+            <X className="h-4 w-4" />
+            پاک کردن
+          </Button>
+        ) : null}
+      </div>
+      <div className="space-y-4">
+        <div className="rounded-3xl border border-border/60 bg-muted/20 p-3">
+          <h3 className="mb-3 text-right text-sm font-semibold">دسته‌بندی‌ها</h3>
+          {filters.categories.length ? renderCategoryTree(filters.categories) : (
+            <p className="text-right text-xs text-muted-foreground">دسته‌ای برای فیلتر وجود ندارد.</p>
+          )}
+        </div>
+        <div className="rounded-3xl border border-border/60 bg-muted/20 p-3">
+          <h3 className="mb-3 text-right text-sm font-semibold">موضوعات</h3>
+          <div className="flex flex-wrap gap-2">
+            {filters.tags.map((tag) => {
+              const active = selectedTags.includes(tag.slug);
+              return (
+                <button
+                  key={tag.id}
+                  type="button"
+                  onClick={() => toggleTag(tag.slug)}
+                  className={cn(
+                    "rounded-full px-3 py-1.5 text-xs transition",
+                    active ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-primary/10 hover:text-primary",
+                  )}
+                >
+                  {tag.name}
+                </button>
+              );
+            })}
+            {!filters.tags.length ? <p className="text-xs text-muted-foreground">موضوعی برای فیلتر وجود ندارد.</p> : null}
+          </div>
+        </div>
+        <div className="rounded-3xl border border-border/60 bg-muted/20 p-3">
+          <h3 className="mb-3 text-right text-sm font-semibold">نویسندگان</h3>
+          <div className="space-y-2">
+            {filters.authors.map((author) => {
+              const active = selectedAuthors.includes(author.username);
+              const name = [author.first_name, author.last_name].filter(Boolean).join(" ") || author.username;
+              return (
+                <button
+                  key={author.id}
+                  type="button"
+                  onClick={() => toggleAuthor(author.username)}
+                  className={cn(
+                    "flex w-full items-center justify-start gap-2 rounded-2xl px-3 py-2 text-right text-sm transition",
+                    active ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-primary/10 hover:text-primary",
+                  )}
+                >
+                  <UserRound className="h-4 w-4" />
+                  <span className="min-w-0 flex-1 truncate">{name}</span>
+                  <span className="rounded-full bg-current/10 px-2 py-0.5 text-xs">{author.post_count}</span>
+                </button>
+              );
+            })}
+            {!filters.authors.length ? <p className="text-right text-xs text-muted-foreground">نویسنده‌ای برای فیلتر وجود ندارد.</p> : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 
   return (
-    <div className="min-h-screen bg-background">
-      <div className="container mx-auto px-4 py-8">
-        <h1 className="text-4xl font-bold mb-8">وبلاگ</h1>
+    <div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.32))]" dir="rtl">
+      <div className="container mx-auto px-4 py-10">
+        <BlogBannerSlider banners={banners} />
 
-        <div className="mb-8">
+        <div className="mb-8 flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
+          <div className="text-right">
+            <p className="mb-2 text-sm font-medium text-primary">خواندنی‌های انجمن</p>
+            <h1 className="text-4xl font-black tracking-tight">بلاگ</h1>
+            <p className="mt-3 max-w-2xl text-sm leading-7 text-muted-foreground">
+              نوشته‌های آموزشی، تجربه‌های دانشجویی و یادداشت‌های تخصصی اعضای انجمن علمی.
+            </p>
+          </div>
+          <div className="flex w-full max-w-md items-center gap-2">
           <Input
             type="text"
-            placeholder="جستجو در مقالات..."
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="max-w-md"
+            placeholder="جستجو در نوشته‌ها..."
+            value={searchDraft}
+            onChange={(event) => setSearchDraft(event.target.value)}
+            className="h-12 flex-1 rounded-2xl bg-background/80 text-right shadow-sm backdrop-blur"
           />
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            aria-label="باز کردن فیلترهای بلاگ"
+            onClick={() => setMobileFiltersOpen(true)}
+            className="h-12 w-12 shrink-0 rounded-2xl border-border/70 bg-card/80 shadow-sm backdrop-blur xl:hidden"
+          >
+            <Filter className="h-5 w-5 text-primary" />
+          </Button>
+          </div>
         </div>
 
-        {loading ? (
-          <p className="text-center text-muted-foreground">در حال بارگذاری...</p>
-        ) : posts.length === 0 ? (
-          <p className="text-center text-muted-foreground">مقاله‌ای یافت نشد</p>
-        ) : (
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {posts.map((post) => (
-              <Link key={post.id} to={blogPostPath(post.slug)}>
-                <Card className="h-full hover:shadow-lg transition-shadow">
-                  {(post.absolute_featured_image_thumbnail_url || post.absolute_featured_image_preview_url || post.absolute_featured_image_url || post.featured_image) ? (
-                    <div className="aspect-video overflow-hidden rounded-t-lg bg-muted">
-                      <img
-                        src={post.absolute_featured_image_thumbnail_url || post.absolute_featured_image_preview_url || post.absolute_featured_image_url || post.featured_image}
-                        alt={post.title}
-                        className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.02]"
-                        loading="lazy"
-                      />
-                    </div>
-                  ) : null}
-                  <CardHeader>
-                    <CardTitle className="line-clamp-2">{post.title}</CardTitle>
-                    <CardDescription>
-                      {post.category?.name && (
-                        <span className="text-primary ml-2">{post.category.name}</span>
-                      )}
-                      {new Date(post.created_at).toLocaleDateString("fa-IR")}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    {post.excerpt && (
-                      <p className="text-muted-foreground line-clamp-3 mb-4">
-                        {post.excerpt}
-                      </p>
-                    )}
-                    <p className="text-sm">
-                      نویسنده: {post.author.first_name} {post.author.last_name}
+        <div className="xl:hidden">
+          <Drawer open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
+            <DrawerTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                className="hidden h-12 w-full justify-between rounded-[1.5rem] border-border/70 bg-card/80 px-4 shadow-sm backdrop-blur"
+              >
+                <span className="flex items-center justify-start gap-2 font-bold">
+                  <Filter className="h-5 w-5 text-primary" />
+                  فیلترهای بلاگ
+                </span>
+                <ChevronDown className={cn("h-4 w-4 transition", mobileFiltersOpen && "rotate-180")} />
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent className="max-h-[85vh] rounded-t-[2rem]" dir="rtl">
+              <DrawerTitle className="sr-only">فیلترهای بلاگ</DrawerTitle>
+              <DrawerDescription className="sr-only">
+                انتخاب دسته‌بندی، موضوع و نویسنده برای فیلتر کردن نوشته‌های بلاگ
+              </DrawerDescription>
+              <div className="overflow-y-auto px-4 pb-4 pt-2">
+                {filtersPanel}
+                <DrawerClose asChild>
+                  <Button type="button" variant="outline" className="mt-4 w-full rounded-full">
+                    بستن
+                  </Button>
+                </DrawerClose>
+              </div>
+            </DrawerContent>
+          </Drawer>
+        </div>
+
+        <div className="grid gap-8 xl:grid-cols-[18rem_minmax(0,1fr)] xl:items-start">
+          <aside className="hidden xl:block">
+            <div className="sticky top-24 max-h-[calc(100vh-7rem)] overflow-y-auto rounded-[2rem] border border-border/70 bg-card/80 p-4 shadow-sm backdrop-blur">
+              {filtersPanel}
+            </div>
+          </aside>
+
+          {listPending ? (
+            <BlogCardsSkeleton />
+          ) : posts.length === 0 ? (
+            <p className="rounded-3xl border border-dashed bg-background/70 p-10 text-center text-muted-foreground">
+              نوشته‌ای پیدا نشد.
+            </p>
+          ) : (
+            <div className="grid gap-6 md:grid-cols-2 2xl:grid-cols-3">
+              {posts.map((post) => (
+                <Link
+                  key={post.id}
+                  to={blogPostPath(post.slug)}
+                  className="group overflow-hidden rounded-[2rem] border border-border/70 bg-card/85 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-primary/10"
+                >
+                  <BlogThumbnail
+                    post={post}
+                    imageUrl={toAbsoluteUrl(getBlogCardImageUrl(post), apiBaseUrl)}
+                    className="aspect-[16/10] rounded-t-[2rem]"
+                  />
+                  <article className="space-y-4 p-5 text-right">
+                    <h2 className="line-clamp-2 text-xl font-bold leading-9 transition group-hover:text-primary">
+                      {post.title}
+                    </h2>
+                    <p className="line-clamp-3 min-h-[5.25rem] text-sm leading-7 text-muted-foreground">
+                      {post.excerpt || post.seo_description || "خلاصه‌ای برای این نوشته ثبت نشده است."}
                     </p>
-                  </CardContent>
-                </Card>
-              </Link>
-            ))}
-          </div>
-        )}
+                    <time className="block text-xs font-medium text-primary/80" dateTime={post.published_at || post.created_at}>
+                      {formatJalaliDate(post.published_at || post.created_at)}
+                    </time>
+                  </article>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

src/views/GoogleAuthCallback.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useState } from "react";
 import { AlertTriangle, ArrowLeft, CheckCircle2, Loader2 } from "lucide-react";
-import SearchableCombobox from "@/components/SearchableCombobox";
+import AsyncSearchableCombobox from "@/components/AsyncSearchableCombobox";
 import OtpCodeField from "@/components/OtpCodeField";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -47,27 +46,21 @@ export default function GoogleAuthCallback() {
   });
   const [claimCode, setClaimCode] = useState("");
 
-  const { data: majors = [] } = useQuery({
-    queryKey: ["majors"],
-    queryFn: () => api.getMajors(),
-    staleTime: 7 * 24 * 60 * 60 * 1000,
-    enabled: step === "collect_profile",
-  });
-  const { data: universities = [] } = useQuery({
-    queryKey: ["universities"],
-    queryFn: () => api.getUniversities(),
-    staleTime: 7 * 24 * 60 * 60 * 1000,
-    enabled: step === "collect_profile",
-  });
+  const loadMajors = useCallback(async (params: { search: string; limit: number; offset: number }) => {
+    const data = await api.getMajorsPaged(params);
+    return {
+      count: data.count,
+      results: data.results.map((major) => ({ value: String(major.code), label: major.label })),
+    };
+  }, []);
 
-  const majorItems = useMemo(
-    () => majors.map((major) => ({ value: String(major.code), label: major.label })),
-    [majors],
-  );
-  const universityItems = useMemo(
-    () => universities.map((university) => ({ value: String(university.code), label: university.label })),
-    [universities],
-  );
+  const loadUniversities = useCallback(async (params: { search: string; limit: number; offset: number }) => {
+    const data = await api.getUniversitiesPaged(params);
+    return {
+      count: data.count,
+      results: data.results.map((university) => ({ value: String(university.code), label: university.label })),
+    };
+  }, []);
 
   useEffect(() => {
     if (otpCooldown <= 0) {
@@ -323,26 +316,26 @@ export default function GoogleAuthCallback() {
                     <div className="grid gap-4 md:grid-cols-2">
                       <div>
                         <Label className="mb-2 block text-right">دانشگاه</Label>
-                        <SearchableCombobox
-                          items={universityItems}
+                        <AsyncSearchableCombobox
+                          loadOptions={loadUniversities}
                           value={profileForm.university}
                           onChange={(value) => setProfileForm((current) => ({ ...current, university: value }))}
                           placeholder="انتخاب دانشگاه"
                           searchPlaceholder="نام دانشگاه را بنویسید..."
                           emptyText="دانشگاهی پیدا نشد"
-                          dir="rtl"
+                          className="h-12 rounded-2xl"
                         />
                       </div>
                       <div>
                         <Label className="mb-2 block text-right">رشته تحصیلی</Label>
-                        <SearchableCombobox
-                          items={majorItems}
+                        <AsyncSearchableCombobox
+                          loadOptions={loadMajors}
                           value={profileForm.major}
                           onChange={(value) => setProfileForm((current) => ({ ...current, major: value }))}
                           placeholder="انتخاب رشته"
                           searchPlaceholder="نام رشته را بنویسید..."
                           emptyText="رشته‌ای پیدا نشد"
-                          dir="rtl"
+                          className="h-12 rounded-2xl"
                         />
                       </div>
                     </div>

src/views/Profile.tsx

@@ -13,21 +13,26 @@ import {
   Loader2,
   MessageSquareText,
   PencilLine,
-  Reply,
   Trash2,
   UserRound,
   XCircle,
 } from "lucide-react";
+import AsyncSearchableCombobox from "@/components/AsyncSearchableCombobox";
+import BlogThumbnail from "@/components/BlogThumbnail";
+import ConfirmAction from "@/components/ConfirmAction";
 import Markdown from "@/components/Markdown";
 import { Helmet } from "@/lib/helmet";
 import { Link, Navigate } from "@/lib/router";
 import { useAuth } from "@/contexts/AuthContext";
 import { api } from "@/lib/api";
 import { blogPostPath } from "@/lib/blog-routes";
+import { apiBaseUrl, toAbsoluteUrl } from "@/lib/site";
 import type * as Types from "@/lib/types";
 import {
   formatJalali,
   formatNumberPersian,
+  getBlogCardImageUrl,
+  getEventCardImageUrl,
   resolveErrorMessage,
   toPersianDigits,
 } from "@/lib/utils";
@@ -37,11 +42,10 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 
 type EventTab = "confirmed" | "pending" | "cancelled";
-type BlogTab = "liked" | "saved" | "comments" | "replies";
+type BlogTab = "liked" | "saved" | "comments";
 
 function InfoRow({ label, value }: { label: string; value: ReactNode }) {
   return (
@@ -63,11 +67,11 @@ function SectionTitle({
 }) {
   return (
     <div className="text-right">
-      <div className="flex items-center justify-end gap-2">
-        <CardTitle>{title}</CardTitle>
+      <div className="flex items-center gap-2">
         <div className="rounded-2xl border border-border/70 bg-muted/35 p-3">
           <Icon className="h-5 w-5 text-primary" />
         </div>
+        <CardTitle>{title}</CardTitle>
       </div>
       {description ? <CardDescription className="mt-2">{description}</CardDescription> : null}
     </div>
@@ -98,10 +102,10 @@ function TabButton<T extends string>({
           : "border-border/70 bg-background/70 text-muted-foreground hover:bg-muted/50 hover:text-foreground",
       ].join(" ")}
     >
+      <span className="font-medium">{label}</span>
       <span className="rounded-full bg-background/25 px-2 py-0.5 text-xs">
         {formatNumberPersian(count)}
       </span>
-      <span className="font-medium">{label}</span>
     </button>
   );
 }
@@ -144,7 +148,28 @@ export default function Profile() {
     staleTime: 7 * 24 * 60 * 60 * 1000,
   });
 
-  const { data: blogActivity } = useQuery({
+  const loadMajors = useCallback(async (params: { search: string; limit: number; offset: number }) => {
+    const data = await api.getMajorsPaged(params);
+    return {
+      count: data.count,
+      results: data.results.map((major) => ({ value: String(major.code), label: major.label })),
+    };
+  }, []);
+
+  const loadUniversities = useCallback(async (params: { search: string; limit: number; offset: number }) => {
+    const data = await api.getUniversitiesPaged(params);
+    return {
+      count: data.count,
+      results: data.results.map((university) => ({ value: String(university.code), label: university.label })),
+    };
+  }, []);
+
+  const {
+    data: blogActivity,
+    isLoading: blogActivityLoading,
+    isError: blogActivityError,
+    refetch: refetchBlogActivity,
+  } = useQuery({
     queryKey: ["my-blog-activity"],
     queryFn: () => api.getMyBlogActivity(),
     enabled: isAuthenticated,
@@ -261,12 +286,20 @@ export default function Profile() {
       ? pendingRegistrations
       : canceledRegistrations;
 
+  const blogCommentActivity = useMemo(
+    () =>
+      [...(blogActivity?.comments ?? []), ...(blogActivity?.replies ?? [])].sort(
+        (left, right) => new Date(right.created_at).getTime() - new Date(left.created_at).getTime(),
+      ),
+    [blogActivity?.comments, blogActivity?.replies],
+  );
+
   const blogCounts = {
     liked: blogActivity?.liked_posts.length ?? 0,
     saved: blogActivity?.saved_posts.length ?? 0,
-    comments: blogActivity?.comments.length ?? 0,
-    replies: blogActivity?.replies.length ?? 0,
+    comments: blogCommentActivity.length,
   };
+  const showBlogActivityTabs = !blogActivityLoading && !blogActivityError;
 
   const pageTitle = `پروفایل ${fullName} | انجمن علمی مهندسی کامپیوتر`;
   const pageDescription = `داشبورد حساب ${fullName} در انجمن علمی مهندسی کامپیوتر.`;
@@ -363,26 +396,32 @@ export default function Profile() {
         </span>
       ) : null}
       {me?.profile_picture ? (
-        <span
+        <ConfirmAction
+          title="حذف تصویر پروفایل"
+          description="آیا از حذف تصویر پروفایل خود مطمئن هستید؟"
+          onConfirm={onDeletePicture}
+          disabled={uploading}
+          trigger={
+            <span
           role="button"
           tabIndex={0}
           onClick={(event) => {
             event.preventDefault();
             event.stopPropagation();
-            void onDeletePicture();
           }}
           onKeyDown={(event) => {
             if (event.key === "Enter" || event.key === " ") {
               event.preventDefault();
               event.stopPropagation();
-              void onDeletePicture();
             }
           }}
           className="absolute bottom-1 right-1 flex h-9 w-9 items-center justify-center rounded-full bg-destructive text-destructive-foreground shadow-lg"
           aria-label="حذف تصویر پروفایل"
         >
           <Trash2 className="h-4 w-4" />
-        </span>
+            </span>
+          }
+        />
       ) : null}
     </button>
   );
@@ -390,19 +429,30 @@ export default function Profile() {
   const renderRegistrationRow = (registration: Types.MyEventRegistrationSchema) => {
     const eventData = registration.event as Types.EventListItemSchema & { start_date?: string };
     const rawDate = eventData.start_date ?? eventData.start_time;
+    const eventImage = getEventCardImageUrl(eventData);
+    const eventImageUrl = eventImage === "/placeholder.svg" ? eventImage : toAbsoluteUrl(eventImage, apiBaseUrl);
+
     return (
-      <div key={registration.id} className="rounded-2xl border border-border/70 bg-background/80 p-4">
-        <div className="flex flex-col gap-3 sm:flex-row-reverse sm:items-center sm:justify-between">
-          <div className="text-right">
-            <p className="font-medium">{registration.event.title}</p>
-            <div className="mt-1 flex flex-wrap items-center justify-end gap-2 text-xs text-muted-foreground">
+      <div key={registration.id} className="rounded-2xl border border-border/70 bg-background/80 p-4 text-right">
+        <div className="flex flex-row gap-4">
+          <Link to={`/events/${registration.event.slug}`} className="block w-24 shrink-0 overflow-hidden rounded-2xl sm:w-28">
+            <img
+              src={eventImageUrl}
+              alt={registration.event.title}
+              className="aspect-video h-full w-full rounded-2xl object-cover"
+              loading="lazy"
+            />
+          </Link>
+          <div className="min-w-0 flex-1">
+            <Link to={`/events/${registration.event.slug}`} className="font-medium text-primary hover:underline">
+              {registration.event.title}
+            </Link>
+            <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">{registration.event.description || "بدون توضیح"}</p>
+            <div className="mt-2 flex flex-wrap items-center justify-end gap-2 text-xs text-muted-foreground">
               <span>{statusLabels[registration.status] ?? registration.status}</span>
               {rawDate ? <span>• {formatJalali(rawDate)}</span> : null}
             </div>
           </div>
-          <Button variant="outline" size="sm" asChild>
-            <Link to={`/events/${registration.event.slug}`}>مشاهده رویداد</Link>
-          </Button>
         </div>
       </div>
     );
@@ -410,10 +460,21 @@ export default function Profile() {
 
   const renderPostRow = (post: Types.PostListSchema) => (
     <div key={post.id} className="rounded-2xl border border-border/70 bg-background/80 p-4 text-right">
-      <Link to={blogPostPath(post.slug)} className="font-medium text-primary hover:underline">
-        {post.title}
-      </Link>
-      <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">{post.excerpt || "بدون خلاصه"}</p>
+      <div className="flex flex-row gap-4">
+        <Link to={blogPostPath(post.slug)} className="block w-24 shrink-0 overflow-hidden rounded-2xl sm:w-28">
+          <BlogThumbnail
+            post={post}
+            imageUrl={toAbsoluteUrl(getBlogCardImageUrl(post), apiBaseUrl)}
+            className="aspect-video rounded-2xl"
+          />
+        </Link>
+        <div className="min-w-0 flex-1">
+          <Link to={blogPostPath(post.slug)} className="font-medium text-primary hover:underline">
+            {post.title}
+          </Link>
+          <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">{post.excerpt || "بدون خلاصه"}</p>
+        </div>
+      </div>
     </div>
   );
 
@@ -450,7 +511,7 @@ export default function Profile() {
       <div className="bg-background px-4 py-8 md:py-10" dir="rtl">
         <div className="container mx-auto max-w-6xl space-y-6">
           {(loading || fetching) && !me ? (
-            <div className="flex min-h-[50vh] items-center justify-center gap-3 text-muted-foreground">
+            <div className="flex min-h-[75vh] items-center justify-center gap-3 text-muted-foreground">
               <Loader2 className="h-5 w-5 animate-spin" />
               <span>در حال بارگذاری پروفایل...</span>
             </div>
@@ -478,21 +539,21 @@ export default function Profile() {
                   </div>
                   <div>
                     <Label htmlFor="university" className="mb-2 block text-right">دانشگاه</Label>
-                    <Select value={formData.university || ""} onValueChange={(value) => setFormData((prev) => ({ ...prev, university: value }))}>
-                      <SelectTrigger id="university"><SelectValue placeholder="انتخاب دانشگاه" /></SelectTrigger>
-                      <SelectContent>
-                        {universities?.map((item) => <SelectItem key={item.code} value={item.code}>{item.label}</SelectItem>)}
-                      </SelectContent>
-                    </Select>
+                    <AsyncSearchableCombobox
+                      value={formData.university || null}
+                      onChange={(value) => setFormData((prev) => ({ ...prev, university: value }))}
+                      loadOptions={loadUniversities}
+                      placeholder="انتخاب دانشگاه"
+                    />
                   </div>
                   <div>
                     <Label htmlFor="major" className="mb-2 block text-right">رشته</Label>
-                    <Select value={formData.major || ""} onValueChange={(value) => setFormData((prev) => ({ ...prev, major: value }))}>
-                      <SelectTrigger id="major"><SelectValue placeholder="انتخاب رشته" /></SelectTrigger>
-                      <SelectContent>
-                        {majors?.map((item) => <SelectItem key={item.code} value={item.code}>{item.label}</SelectItem>)}
-                      </SelectContent>
-                    </Select>
+                    <AsyncSearchableCombobox
+                      value={formData.major || null}
+                      onChange={(value) => setFormData((prev) => ({ ...prev, major: value }))}
+                      loadOptions={loadMajors}
+                      placeholder="انتخاب رشته"
+                    />
                   </div>
                   <div>
                     <Label htmlFor="student_id" className="mb-2 block text-right">شماره دانشجویی</Label>
@@ -519,6 +580,12 @@ export default function Profile() {
             <>
               <Card className="overflow-hidden rounded-[2rem] border border-border/70 shadow-lg">
                 <CardContent className="space-y-6 p-6 text-center">
+                  <div className="flex justify-start">
+                    <Button variant="outline" size="sm" className="rounded-full" onClick={() => setEditing(true)}>
+                      <PencilLine className="ml-2 h-4 w-4" />
+                      ویرایش
+                    </Button>
+                  </div>
                   <div className="flex justify-center">{renderAvatarControl()}</div>
                   <div>
                     <h1 className="text-2xl font-bold">{fullName}</h1>
@@ -553,7 +620,6 @@ export default function Profile() {
                   <SectionTitle
                     icon={UserRound}
                     title="اطلاعات شخصی و حساب"
-                    description="اطلاعات اصلی حساب بدون فیلدهای اضافی و با چینش مناسب فارسی."
                   />
                 </CardHeader>
                 <CardContent className="grid gap-6 md:grid-cols-2">
@@ -589,7 +655,6 @@ export default function Profile() {
                   <SectionTitle
                     icon={CalendarClock}
                     title="فعالیت‌های رویدادی"
-                    description="ثبت‌نام‌های شما با تفکیک وضعیت در نمای تب‌بندی‌شده."
                   />
                 </CardHeader>
                 <CardContent className="space-y-5">
@@ -624,20 +689,20 @@ export default function Profile() {
                   </div>
 
                   <div className="flex flex-col gap-4 lg:flex-row-reverse">
-                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
-                      <TabButton value="confirmed" active={eventTab} label="تأیید شده" count={confirmedRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
-                      <TabButton value="pending" active={eventTab} label="در انتظار" count={pendingRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
-                      <TabButton value="cancelled" active={eventTab} label="لغو شده" count={canceledRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
-                    </div>
                     <div className="min-w-0 flex-1 space-y-3">
                       {regsLoading ? <p className="text-sm text-muted-foreground">در حال بارگذاری فعالیت‌های رویدادی...</p> : null}
                       {regsError ? <p className="text-sm text-destructive">خطا در دریافت ثبت‌نام‌های رویدادی</p> : null}
                       {activeEventItems.length ? activeEventItems.map(renderRegistrationRow) : (
-                        <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">
+                        <div className="rounded-2xl flex flex-col justify-center h-full border border-dashed p-8 text-center text-sm text-muted-foreground">
                           موردی در این بخش ثبت نشده است.
                         </div>
                       )}
                     </div>
+                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
+                      <TabButton value="confirmed" active={eventTab} label="تأیید شده" count={confirmedRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
+                      <TabButton value="pending" active={eventTab} label="در انتظار" count={pendingRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
+                      <TabButton value="cancelled" active={eventTab} label="لغو شده" count={canceledRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
+                    </div>
                   </div>
                 </CardContent>
               </Card>
@@ -647,38 +712,51 @@ export default function Profile() {
                   <SectionTitle
                     icon={MessageSquareText}
                     title="فعالیت‌های بلاگ"
-                    description="لایک‌ها، ذخیره‌ها، نظرها و پاسخ‌های شما در نمای تب‌بندی‌شده."
                   />
                 </CardHeader>
                 <CardContent>
                   <div className="flex flex-col gap-4 lg:flex-row-reverse">
-                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
-                      <TabButton value="liked" active={blogTab} label="پسندیده‌ها" count={blogCounts.liked} onClick={(value) => setBlogTab(value as BlogTab)} />
-                      <TabButton value="saved" active={blogTab} label="ذخیره‌شده‌ها" count={blogCounts.saved} onClick={(value) => setBlogTab(value as BlogTab)} />
-                      <TabButton value="comments" active={blogTab} label="نظرها" count={blogCounts.comments} onClick={(value) => setBlogTab(value as BlogTab)} />
-                      <TabButton value="replies" active={blogTab} label="پاسخ‌ها" count={blogCounts.replies} onClick={(value) => setBlogTab(value as BlogTab)} />
-                    </div>
                     <div className="min-w-0 flex-1 space-y-3">
-                      {blogTab === "liked" ? (
+                      {blogActivityLoading ? (
+                        <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground flex flex-col justify-center h-full">
+                          <Loader2 className="mx-auto mb-3 h-5 w-5 animate-spin text-primary" />
+                          در حال دریافت فعالیت‌های بلاگ...
+                        </div>
+                      ) : null}
+                      {blogActivityError ? (
+                        <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground flex flex-col justify-center h-full">
+                          دریافت فعالیت‌های بلاگ ناموفق بود.
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="mx-auto mt-3 rounded-full"
+                            onClick={() => void refetchBlogActivity()}
+                          >
+                            تلاش دوباره
+                          </Button>
+                        </div>
+                      ) : null}
+                      {showBlogActivityTabs && blogTab === "liked" ? (
                         blogActivity?.liked_posts.length ? blogActivity.liked_posts.map(renderPostRow) : (
                           <EmptyBlogActivity icon={Heart} text="هنوز پستی را نپسندیده‌اید." />
                         )
                       ) : null}
-                      {blogTab === "saved" ? (
+                      {showBlogActivityTabs && blogTab === "saved" ? (
                         blogActivity?.saved_posts.length ? blogActivity.saved_posts.map(renderPostRow) : (
                           <EmptyBlogActivity icon={Bookmark} text="هنوز پستی را ذخیره نکرده‌اید." />
                         )
                       ) : null}
-                      {blogTab === "comments" ? (
-                        blogActivity?.comments.length ? blogActivity.comments.map(renderCommentRow) : (
+                      {showBlogActivityTabs && blogTab === "comments" ? (
+                        blogCommentActivity.length ? blogCommentActivity.map(renderCommentRow) : (
                           <EmptyBlogActivity icon={MessageSquareText} text="هنوز نظری ثبت نکرده‌اید." />
                         )
                       ) : null}
-                      {blogTab === "replies" ? (
-                        blogActivity?.replies.length ? blogActivity.replies.map(renderCommentRow) : (
-                          <EmptyBlogActivity icon={Reply} text="هنوز پاسخی ثبت نکرده‌اید." />
-                        )
-                      ) : null}
+                    </div>
+                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
+                      <TabButton value="liked" active={blogTab} label="پسندیده‌ها" count={blogCounts.liked} onClick={(value) => setBlogTab(value as BlogTab)} />
+                      <TabButton value="saved" active={blogTab} label="ذخیره‌شده‌ها" count={blogCounts.saved} onClick={(value) => setBlogTab(value as BlogTab)} />
+                      <TabButton value="comments" active={blogTab} label="نظرات" count={blogCounts.comments} onClick={(value) => setBlogTab(value as BlogTab)} />
                     </div>
                   </div>
                 </CardContent>
@@ -699,7 +777,7 @@ function EmptyBlogActivity({
   text: string;
 }) {
   return (
-    <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">
+    <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground flex flex-col justify-center h-full">
       <Icon className="mx-auto mb-3 h-5 w-5 text-primary" />
       {text}
     </div>