commit 1a34c3b133a144aac0280fa906b69635493e403f
Author: Kavehhn174 <Kavehhn174@gmail.com>
Date:   Sun Aug 9 04:18:09 2026 +0200

    Initial commit: admin dashboard for GameNo.
    
    Vue 3 + Vite dashboard with PrimeVue, i18n, and API integration for institution management.

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..26a8408
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+npm-debug.log
+.git
+.env
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..64c0b37
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://localhost:5000/api
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..438657a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..a7cea0b
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..2ad8da5
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,13 @@
+FROM node:24-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..efe50a7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,90 @@
+# Gameno Dashboard - Persian Teaching Institution Admin Dashboard
+
+A complete, production-ready admin dashboard built with Vue 3 (Composition API), PrimeVue 4, PrimeFlex, Pinia, Vue Router 4, vue-i18n, and Axios. Designed specifically for managing an educational institution in Persian (RTL layout) with role-based access control (RBAC).
+
+---
+
+## 🚀 Setup and Installation
+
+### Prerequisites
+- Node.js v18+ and npm v9+
+
+### Commands
+
+```bash
+# 1. Install dependencies
+npm install
+
+# 2. Run local development server
+npm run dev
+
+# 3. Build production bundle
+npm run build
+
+# 4. Preview production build
+npm run preview
+```
+
+---
+
+## 🗺️ Route Permission Mapping
+
+All routes enforce client-side permission checks via global navigation guards (`/src/router/guards.js`) and UI element visibility gates (`<PermissionGate>`).
+
+| Route Path | View Component | Required Permission | Description |
+| :--- | :--- | :--- | :--- |
+| `/login` | `LoginView.vue` | Public | Admin login page |
+| `/` | `DashboardHomeView.vue` | Authenticated | Dashboard home statistics & shortcuts |
+| `/users` | `UserListView.vue` | `users:read` | List students & staff |
+| `/users/create` | `UserFormView.vue` | `users:create` | Create new user |
+| `/users/edit/:id` | `UserFormView.vue` | `users:update` | Edit user profile |
+| `/users/:id` | `UserDetailView.vue` | `users:read` | Profile summary, courses, payments, certificates |
+| `/professors` | `ProfessorListView.vue` | `professors:read` | List instructors |
+| `/professors/create` | `ProfessorFormView.vue` | `professors:create` | Add instructor |
+| `/professors/edit/:id` | `ProfessorFormView.vue` | `professors:update` | Edit instructor |
+| `/courses` | `CourseListView.vue` | `courses:read` | List courses |
+| `/courses/create` | `CourseFormView.vue` | `courses:create` | Create course & auto/manual session generator |
+| `/courses/edit/:id` | `CourseFormView.vue` | `courses:update` | Edit course & sessions |
+| `/courses/:id` | `CourseDetailView.vue` | `courses:read` | Course details & sessions overview |
+| `/sessions` | `SessionListView.vue` | `sessions:read` | List scheduled sessions |
+| `/sessions/create` | `SessionFormView.vue` | `sessions:create` | Schedule single session |
+| `/sessions/edit/:id` | `SessionFormView.vue` | `sessions:update` | Edit session details |
+| `/attendances/session/:id` | `AttendanceEntryView.vue` | `sessions:attendance` | Bulk session attendance entry |
+| `/payments` | `PaymentListView.vue` | `payments:read` | Payment ledgers & invoices |
+| `/payments/:id` | `PaymentDetailView.vue` | `payments:read` | Payment detail & record transactions |
+| `/roles` | `RoleListView.vue` | `roles:read` | List custom roles |
+| `/roles/create` | `RoleFormView.vue` | `roles:create` | Create role & permission matrix |
+| `/roles/edit/:id` | `RoleFormView.vue` | `roles:update` | Edit role permissions |
+| `/notifications` | `NotificationListView.vue` | `notifications:read` | Delivery log & manual retry |
+| `/forbidden` | `ForbiddenView.vue` | Authenticated | 403 Forbidden page |
+| `/*` | `NotFoundView.vue` | Public | 404 Not Found page |
+
+---
+
+## ⚙️ Automatic Session Date Generation Algorithm
+
+In `CourseFormView.vue` (Automatic Tab):
+1. **Inputs**: Admin specifies requested total sessions count (e.g. `12`), start date in Jalali Shamsi format (e.g. `1403/01/01`), start/end time, and selected weekdays (e.g. Saturday = 6, Tuesday = 2).
+2. **Rolling Calendar Loop**:
+   - Converts the start date into a `moment` instance in Jalali locale.
+   - Iteratively increments day by day.
+   - Checks if `currentMoment.day()` matches any of the chosen weekdays.
+   - When matched, increments session counter and pushes a preview row object (`sessionNumber`, `date` formatted in Jalali `YYYY/MM/DD`, `startTime`, `endTime`, `topic`).
+3. **Interactive Preview**: Renders an inline editable data table so the admin can review or manually adjust individual row dates or topics before final submission.
+4. **Bulk Dispatch**: Sends the generated session array to `POST /sessions/admin/create` in a single API request.
+
+---
+
+## 📝 Key Architecture Assumptions
+
+1. **Authentication & Token Storage**:
+   - JWT `accessToken` and `refreshToken` are stored in `localStorage` and synchronized with HTTP cookies via `js-cookie`.
+   - Axios request interceptor attaches `Authorization: Bearer <accessToken>`.
+   - On `401 Unauthorized` responses, Axios automatically triggers silent token renewal calling `POST /auth/refresh`.
+2. **Permission Store Rehydration**:
+   - Permissions array is loaded once on login from `response.user.role.permissions`.
+   - On hard page refresh, if a valid token exists but Pinia store is unpopulated, `guards.js` triggers `GET /users/user/get-self` once to rehydrate permissions.
+3. **Certificate Upload Flow**:
+   - Uses two-stage S3/MinIO upload strategy.
+   - `ImageManager.vue` uploads binary file to `POST /files/admin/upload-temp` returning a temporary filename (`tempFileName`).
+   - Committing a certificate form dispatches `tempFileName` to `/certificates/user/upload`, moving the file to persistent storage on the backend.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9bd0130
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>گام نو</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..60f8d2b
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3439 @@
+{
+  "name": "gameno-dashboard",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "gameno-dashboard",
+      "version": "0.0.0",
+      "dependencies": {
+        "@fontsource/vazirmatn": "^5.3.0",
+        "@primevue/themes": "4.0.7",
+        "axios": "^1.19.0",
+        "filepond": "^4.32.12",
+        "filepond-plugin-file-validate-type": "^1.2.9",
+        "filepond-plugin-image-preview": "^4.6.12",
+        "jalali-moment": "^3.3.11",
+        "js-cookie": "^3.0.8",
+        "photoswipe": "^5.4.4",
+        "pinia": "^4.0.2",
+        "primeflex": "^4.0.0",
+        "primeicons": "^8.0.0",
+        "primevue": "4.0.7",
+        "sass": "^1.102.0",
+        "vee-validate": "^4.15.1",
+        "vue": "^3.5.40",
+        "vue-filepond": "^8.0.0",
+        "vue-i18n": "^11.4.8",
+        "vue-router": "^5.2.0",
+        "vue3-persian-datetime-picker": "^1.2.2",
+        "yup": "^1.7.1"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.8",
+        "vite": "^8.2.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-8.0.0.tgz",
+      "integrity": "sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^8.0.0",
+        "@babel/types": "^8.0.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "@types/jsesc": "^2.5.0",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@babel/helper-string-parser": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-8.0.0.tgz",
+      "integrity": "sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@babel/helper-validator-identifier": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-8.0.4.tgz",
+      "integrity": "sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@babel/parser": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-8.0.4.tgz",
+      "integrity": "sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^8.0.4"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@babel/types": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-8.0.4.tgz",
+      "integrity": "sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^8.0.0",
+        "@babel/helper-validator-identifier": "^8.0.4"
+      },
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@fontsource/vazirmatn": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/vazirmatn/-/vazirmatn-5.3.0.tgz",
+      "integrity": "sha512-XC/2yN2r5gwhFT3klSuWaqncODX2DOfRYfNmbyzgtWYxHxMC+tcoaX+tgggrm6hSkEgpR1TuSDEf1PiI91G7qg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@inquirer/external-editor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-1.0.3.tgz",
+      "integrity": "sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==",
+      "license": "MIT",
+      "dependencies": {
+        "chardet": "^2.1.1",
+        "iconv-lite": "^0.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@intlify/core-base": {
+      "version": "11.4.8",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.4.8.tgz",
+      "integrity": "sha512-A+Q7SKm5oEcy1E/cghqd7n/St4XjTqLhiiyDuieNcMrJcrHlkY5n0jp7Q9dD3txvVHzvsmBVV5M9wD5/s1zfzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/devtools-types": "11.4.8",
+        "@intlify/message-compiler": "11.4.8",
+        "@intlify/shared": "11.4.8"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/devtools-types": {
+      "version": "11.4.8",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-types/-/devtools-types-11.4.8.tgz",
+      "integrity": "sha512-MGpID+rlfzGUbNcnC20bm5NMSBHPrvx0atLTfv9dftn3kjXw1hGKDcIcwrO99tSrZEc2i+hczRL7ks8qXsHPkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.4.8",
+        "@intlify/shared": "11.4.8"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.4.8",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.4.8.tgz",
+      "integrity": "sha512-vbzk17dYwduYiv52EK61+FDCyhfVg1uPUtPmiD/d45W99uJIcXywrweOBcHv7n9/iEqmXiMGT52bgJbZDQqK3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.4.8",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.4.8",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.4.8.tgz",
+      "integrity": "sha512-XbRgrv+XEuvDr7UCY55oibVrh+o4u+A0VB6nSL0F5Z8LcZxE/8j573LYG6bCrOigIcHdGpSNI7Rh5UpC5/B/eg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.143.0.tgz",
+      "integrity": "sha512-u6JZdLBTLotrNC9Vd6vPssINdzcCzleKAH6EJKImQb7GtYvX5keN2dxkoK44stCc4tffE6QQRtZTXVSzsLUlWA==",
+      "devOptional": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.6.0.tgz",
+      "integrity": "sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.6.0",
+        "@parcel/watcher-darwin-arm64": "2.6.0",
+        "@parcel/watcher-darwin-x64": "2.6.0",
+        "@parcel/watcher-freebsd-x64": "2.6.0",
+        "@parcel/watcher-linux-arm-glibc": "2.6.0",
+        "@parcel/watcher-linux-arm-musl": "2.6.0",
+        "@parcel/watcher-linux-arm64-glibc": "2.6.0",
+        "@parcel/watcher-linux-arm64-musl": "2.6.0",
+        "@parcel/watcher-linux-x64-glibc": "2.6.0",
+        "@parcel/watcher-linux-x64-musl": "2.6.0",
+        "@parcel/watcher-win32-arm64": "2.6.0",
+        "@parcel/watcher-win32-x64": "2.6.0"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz",
+      "integrity": "sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.6.0.tgz",
+      "integrity": "sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.6.0.tgz",
+      "integrity": "sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.6.0.tgz",
+      "integrity": "sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.6.0.tgz",
+      "integrity": "sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.6.0.tgz",
+      "integrity": "sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.6.0.tgz",
+      "integrity": "sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.6.0.tgz",
+      "integrity": "sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.6.0.tgz",
+      "integrity": "sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.6.0.tgz",
+      "integrity": "sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.6.0.tgz",
+      "integrity": "sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.6.0.tgz",
+      "integrity": "sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@primeuix/styled": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
+      "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
+      "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.7.tgz",
+      "integrity": "sha512-SvWiNBEeR6hm4wjnze+rITUjHMFLwIzpRFlq+GqmJyZmjJy4h8UUksi0EoyqAWCAwKgmwlxY6XNqGJmMVyOguQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.7.tgz",
+      "integrity": "sha512-tj4dfRdV5iN6O0mbkpjhMsGlT3wZTqOPL779ndY5gKuCwN5zcFmKmABWVQmr/ClRivnMkw6Yr1x6gRTV/N0ydg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.7"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/themes": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.7.tgz",
+      "integrity": "sha512-ZbDUrpBmtuqdeegNwUaJTubaLDBBJWOc4Z6UoQM3DG2c7EAE19wQbuh+cG9zqA7sT/Xsp+ACC/Z9e4FnfqB55g==",
+      "deprecated": "Deprecated. This package is no longer maintained. Please migrate to @primeuix/themes: https://www.npmjs.com/package/@primeuix/themes",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.3.tgz",
+      "integrity": "sha512-zrJtHDcaZJ1Fp7xf4hNl+7seH9Cn/N5TwLYkhgXREtBwAd/jaqW3uqeHxpDugJLVICWg4eW44kOQEGJ1r6jCGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-ieIiibVCp0tX7TLu2cafoNPv8wJyYi01ekXpbf8q2j7F4rGAhhXb/eQh7ge9DRBY78GwmRQtvjZDux7EDbA8kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Zh9tCon19eDXJoihx0rqKhMUlMYqzwj3aPsSuHmI4RWZh62dWUL+DJN4C5YQya5TcQBJU/Fe8+rY0jhXTQITqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.3.tgz",
+      "integrity": "sha512-nGbJWewA1wrXXZiQhjAT5rhibGfns5ZNkDVqxsO6zJ3f3YvpoDNNmGMSbbhLuXKjNScaBJVOAboztAWVespQMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.3.tgz",
+      "integrity": "sha512-QNniJr5Kml0kDEB98jiDOJjXNroxIIi0IXIbdYzY26Xt1pVbeP62+KnoIZLwirOymX/0jDk/2gI/bNUv7A7OIw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.3.tgz",
+      "integrity": "sha512-TkqEAcmmvH3I/q4114NB4RVt6241Dao48pF45uLcFGrwAaIn0iITgTAKP/dLjbN0R4buJjGb91+UHSoFmpgIWw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.3.tgz",
+      "integrity": "sha512-NHqjnxpsndf4MPymxteFAWHHfkTL8HjWh1KB7z23ofZ6QO2euONuxDXjat69dKZRALnGypg8k8SsK8vZJoXv1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.3.tgz",
+      "integrity": "sha512-6tbrbwfz5GB9DQ4Jwo6hy9v+vR31xZlvzZ6n5Xut6Hhx5PvrA9q/HsK8KMaYQp063iqZGXwNvZtYNLD7EM/x0w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.3.tgz",
+      "integrity": "sha512-oyuXxXmoZHjXC917IAPFAAv4wWAa0cM9afk8nx1+9/jNNOX1uPf8yDA6p7G0RypOfw/X0PQt5IfoquY1um+zSg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.3.tgz",
+      "integrity": "sha512-TytMwF2KVGqP2tgd0I1OY0PAv78dZRAYcF5ssDzjM34SUXCED3uXvSd5+lHoC0bTD6eEdFz7LdQNCO1y0oVk9w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.3.tgz",
+      "integrity": "sha512-/E9m3qstrJFVPoULV25mVQblSNExY2+kBsYe4sy0Tn0yOOgJ8wZbZt3KnRbF/XeU2Gl1STKUQnDNTqhIE5MD4A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.3.tgz",
+      "integrity": "sha512-Kr0OcsoQI816i6HOl3vFHpd1K0eZyh76zgfj4c1nTyaTsd5r2Mj1lwM4R90y/qaCfmTn9eHy0SKwi98eitRxug==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.3.tgz",
+      "integrity": "sha512-hOtMwTqnME+/gJcH/PCZ0wn0zPUjiWOgkHpxbSJpfGKMezHltx1S7/k1SitzVa7Ww2cqrDDaFbZEhcJZO8o+Jw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.3.tgz",
+      "integrity": "sha512-ekcqMMkI2PlhYnfzQnB/cEdYUVVJViWvoUyLrbzgDoi3Snfc1mVBwdnc306ufA5ejy8JSPjT2RlW1nQSjW7efg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/jsesc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@types/jsesc/-/jsesc-2.5.1.tgz",
+      "integrity": "sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
+      "integrity": "sha512-0ZjgOg7oO6farnNGup7yvoM/YXZV84OZxHAwtflItNa/6zzQyVb5LNxyea3FEKEX2XlagIKzrlH7wwxkKgtiew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue-macros/common": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.4.tgz",
+      "integrity": "sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.5.22",
+        "ast-kit": "^2.1.2",
+        "local-pkg": "^1.1.2",
+        "magic-string-ast": "^1.0.2",
+        "unplugin-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/vue-macros"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
+      "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/shared": "3.5.41",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz",
+      "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz",
+      "integrity": "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/compiler-core": "3.5.41",
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/compiler-ssr": "3.5.41",
+        "@vue/shared": "3.5.41",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.19",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz",
+      "integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.2.1.tgz",
+      "integrity": "sha512-6u4vXBlIBAC1wMplIZgpyPn7uh/s4Bf6F5bMzvLv+EdJ0aHs/+4B7Ygv864EStQSjRbsRzTko/kUG1A1IejQ3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^8.2.1"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.2.1.tgz",
+      "integrity": "sha512-FIGIuq3AWReEpbAHY/cRGeHDfI0qOb8OCQ3YjbEAX04uaxIDbGc9rhkbVcG7rnfHPXE3RsU5KrWOu9V/okd8AQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^8.2.1",
+        "birpc": "^2.6.1",
+        "hookable": "^5.5.3",
+        "perfect-debounce": "^2.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.2.1.tgz",
+      "integrity": "sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.41.tgz",
+      "integrity": "sha512-rznsqKM0np0x18EjzF8x88MpEhdNsffbvFbckLL5+oUKz1BxAImEmO7J1ArRYSyo6aQaVoBDp7jEkT91OOxydA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.41.tgz",
+      "integrity": "sha512-Vcry58hiAKwGen9Z1jUZE0feFsNArPCMOImYI8el48A9Idf6DuQYD0U05zZIF2Iad1hGhPSvcbBbAOhNr55fhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.41.tgz",
+      "integrity": "sha512-3vVBahVBS9+U6cmXBLyb8nE6/yYo4J/CGI9eVFs3KiMc0YHuudwKyShTD65jtJy/L9PUUxNAFu4cj4LiJ0UFbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.41",
+        "@vue/runtime-core": "3.5.41",
+        "@vue/shared": "3.5.41",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.41.tgz",
+      "integrity": "sha512-n6hx/pNFfbD6SuyeuMVkvqox8bwf/ET9JlA/kAz/imw8sw++wkqKe2mHX5KutjPpbKE4Z56yTHszoOjGMI9igQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.41",
+        "@vue/runtime-dom": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz",
+      "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
+      "license": "MIT"
+    },
+    "node_modules/acorn": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
+      "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/ast-kit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.2.0.tgz",
+      "integrity": "sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "pathe": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.9.0.tgz",
+      "integrity": "sha512-IJdzo2vLiElBxKzwS36VsCue/62d6IdWjnPB2v3nuPKeWGynp6FF/CYoLa5i/3jXH/z97ZDdsXz6abpgM6w07A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.2",
+        "@babel/types": "^7.29.0",
+        "ast-kit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.19.0.tgz",
+      "integrity": "sha512-ht/iuYZXEjFxLH/Hkezgd7m6JKlHHXEUSneaDz8uZe1Gj5QZtCnpyDsckvAiEnT89OEbCLmnte4R4sn7P0EKFw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.6",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
+      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chardet": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.2.0.tgz",
+      "integrity": "sha512-rddelWYNPRrXq6PtNEN2S3f6t9ILzvqaN5pVgi4kqt9jHQaXIial9PznB5iSPVlQSLNaaH22ItWz3EJtQ10+OA==",
+      "license": "MIT"
+    },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-width": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+      "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "license": "MIT"
+    },
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "license": "MIT"
+    },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/exsolve": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.1.1.tgz",
+      "integrity": "sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==",
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/filepond": {
+      "version": "4.32.12",
+      "resolved": "https://registry.npmjs.org/filepond/-/filepond-4.32.12.tgz",
+      "integrity": "sha512-wro0/deLwua9CkL7HJygOlDaPo1c7Ov8kfzbZjH7m4hdi56gdHGDeRWnYa+qXnRm3Lty69gUGVFb3JZy/9vT8g==",
+      "license": "MIT"
+    },
+    "node_modules/filepond-plugin-file-validate-type": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/filepond-plugin-file-validate-type/-/filepond-plugin-file-validate-type-1.2.9.tgz",
+      "integrity": "sha512-Tzv07aNdZvjUXDRA3XL16QMEvh6llDrXlcZ6W0eTHQ+taHaVg/JKJTFs/AViO+6ZcpPCcQStbhYEL2HoS+vldw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "filepond": ">=1.x <5.x"
+      }
+    },
+    "node_modules/filepond-plugin-image-preview": {
+      "version": "4.6.12",
+      "resolved": "https://registry.npmjs.org/filepond-plugin-image-preview/-/filepond-plugin-image-preview-4.6.12.tgz",
+      "integrity": "sha512-Y8ETX5QVV0mbPB0586UH8AUmG9tZg8PuN5bdEAIlZVJFTct5ebViJ7+Am94/VhTPjLqZjBf1zmDq5JU6XRsZKw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "filepond": ">=4.x <5.x"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.3.tgz",
+      "integrity": "sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/immutable": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz",
+      "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==",
+      "license": "MIT"
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/inquirer": {
+      "version": "8.2.7",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.7.tgz",
+      "integrity": "sha512-UjOaSel/iddGZJ5xP/Eixh6dY1XghiBw4XK13rCCIJcJfyhhoul/7KhLLUGtebEj6GDYM6Vnx/mVsjx2L/mFIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/external-editor": "^1.0.0",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.1.1",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^3.0.0",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.21",
+        "mute-stream": "0.0.8",
+        "ora": "^5.4.1",
+        "run-async": "^2.4.0",
+        "rxjs": "^7.5.5",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6",
+        "wrap-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/jalaali-js": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/jalaali-js/-/jalaali-js-1.2.8.tgz",
+      "integrity": "sha512-Jl/EwY84JwjW2wsWqeU4pNd22VNQ7EkjI36bDuLw31wH98WQW4fPjD0+mG7cdCK+Y8D6s9R3zLiQ3LaKu6bD8A==",
+      "license": "MIT"
+    },
+    "node_modules/jalali-moment": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/jalali-moment/-/jalali-moment-3.3.11.tgz",
+      "integrity": "sha512-tdSaRs9cjWjOIaWhcsGFZMhZQhfgok5J0TwqFpBIZPudZxxa6yjUPoLCOwuvbAtRpiZn7k/mvazAJh+vEN5suw==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^7.0.0",
+        "inquirer": "^8.0.0",
+        "moment": "^2.26.0"
+      },
+      "bin": {
+        "jalalim": "cli.js"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.8.tgz",
+      "integrity": "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "devOptional": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/local-pkg": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
+      "integrity": "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/magic-string-ast": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/magic-string-ast/-/magic-string-ast-1.0.3.tgz",
+      "integrity": "sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==",
+      "license": "MIT",
+      "dependencies": {
+        "magic-string": "^0.30.19"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/moment-jalaali": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/moment-jalaali/-/moment-jalaali-0.9.6.tgz",
+      "integrity": "sha512-v8wXjQplvk5ez+sUqgsWIrafwIf1BEXXvzTYwsg1wHcqh27nSgKPCJ6FnZRrCz03MoNyB9N31L0oms+vE8Rq7g==",
+      "license": "MIT",
+      "dependencies": {
+        "jalaali-js": "^1.1.0",
+        "moment": "^2.22.2",
+        "moment-timezone": "^0.5.21",
+        "rimraf": "^3.0.2"
+      }
+    },
+    "node_modules/moment-timezone": {
+      "version": "0.5.48",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.48.tgz",
+      "integrity": "sha512-f22b8LV1gbTO2ms2j2z13MuPogNoh5UzxL3nzNAYKGraILnbGc9NEE6dyiiiLv46DGRb8A4kg8UKWLjPthxBHw==",
+      "license": "MIT",
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "license": "MIT"
+    },
+    "node_modules/mute-stream": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
+      "license": "ISC"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/nostics": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/nostics/-/nostics-1.2.0.tgz",
+      "integrity": "sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==",
+      "license": "MIT"
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
+      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
+      "license": "MIT"
+    },
+    "node_modules/photoswipe": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.4.tgz",
+      "integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-4.0.2.tgz",
+      "integrity": "sha512-yKVVA7bSj5oRZFp/Ab9wLlmyb5gPUYEiIm4ryiWTe/xe7PtkRdMVOp1X1ggvq0c6Uj7Q0Du1HnV2mtAwM0Ks1g==",
+      "license": "MIT",
+      "dependencies": {
+        "nostics": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/devtools-api": "^8.1.5",
+        "typescript": ">=5.6.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "@vue/devtools-api": {
+          "optional": false
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
+      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.4",
+        "exsolve": "^1.0.8",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/primeflex": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-4.0.0.tgz",
+      "integrity": "sha512-UOEZCRjR36+sm5bUpDhS1xbA068l9VC6y1aTNVqQPtXuKIdPTqAWHRUxj3mKAoPrQ9W373ooJJMgNVXfiaw04g==",
+      "license": "MIT"
+    },
+    "node_modules/primeicons": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-8.0.0.tgz",
+      "integrity": "sha512-eZGk+Mgb4fE+LkJi9LvllbnB4RVUF9kzmnLVnT3ZMY6stqKVh7TUJ0mFoMNIEgTnJSvhaGcJotDiSvtVvkHd7g==",
+      "license": "SEE LICENSE IN LICENSE.md"
+    },
+    "node_modules/primevue": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.7.tgz",
+      "integrity": "sha512-88qazHqldkqsCxvhjnjO65XMBfJyHQoFW3BQvrJYO6RqPheHB4f7cY61eqtBpJAjnM5x+YKTZiWx/gBuUzqT7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.7",
+        "@primevue/icons": "4.0.7"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+      "license": "MIT"
+    },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
+      "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.3.tgz",
+      "integrity": "sha512-rn9wpmxplLf7NLNyCk9FyWh3FM43DbY8jOzCdEPzH7uflhTftRbCEpqi6Ly2osgoU8OwObtmavMbWLaWy4LX7A==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.143.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.2.3",
+        "@rolldown/binding-darwin-arm64": "1.2.3",
+        "@rolldown/binding-darwin-x64": "1.2.3",
+        "@rolldown/binding-freebsd-x64": "1.2.3",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.3",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.3",
+        "@rolldown/binding-linux-arm64-musl": "1.2.3",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.3",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.3",
+        "@rolldown/binding-linux-x64-gnu": "1.2.3",
+        "@rolldown/binding-linux-x64-musl": "1.2.3",
+        "@rolldown/binding-openharmony-arm64": "1.2.3",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.3",
+        "@rolldown/binding-win32-x64-msvc": "1.2.3"
+      }
+    },
+    "node_modules/run-async": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/sass": {
+      "version": "1.102.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.102.0.tgz",
+      "integrity": "sha512-NSOyTnaQF7rTAEOtI2fwb386vL+akyiQLBZu8Na7hXCb+umJy0GAqlcMIaqACZ6Z1VgTBS4K9PG6B3IdjHGJsw==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "license": "MIT"
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "license": "MIT"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "license": "MIT"
+    },
+    "node_modules/unplugin": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.3.0.tgz",
+      "integrity": "sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.4",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@farmfe/core": "*",
+        "@rspack/core": "*",
+        "bun-types-no-globals": "*",
+        "esbuild": "*",
+        "rolldown": "*",
+        "rollup": "*",
+        "unloader": "*",
+        "vite": "*",
+        "webpack": "*"
+      },
+      "peerDependenciesMeta": {
+        "@farmfe/core": {
+          "optional": true
+        },
+        "@rspack/core": {
+          "optional": true
+        },
+        "bun-types-no-globals": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "unloader": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.2.tgz",
+      "integrity": "sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/vee-validate": {
+      "version": "4.15.1",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.15.1.tgz",
+      "integrity": "sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.5.2",
+        "type-fest": "^4.8.3"
+      },
+      "peerDependencies": {
+        "vue": "^3.4.26"
+      }
+    },
+    "node_modules/vee-validate/node_modules/@vue/devtools-api": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.10.tgz",
+      "integrity": "sha512-KxtEpUOOpFz/qOGRrAwA36QF7DqIA+FXgCYit9mk9wjbaZt0sXOFz81ElOZtKA4HbWHUdwNjZHBFsFFyp5BZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.10"
+      }
+    },
+    "node_modules/vee-validate/node_modules/@vue/devtools-kit": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.10.tgz",
+      "integrity": "sha512-3WNi2Kq4tbpVbmhml7RiphmAt0279oh3fKNeWMQIrltfX8Q91b4i5PL8DtyNKdwmcsGrV4fg+erwWOmD05CLIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.10",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/vee-validate/node_modules/@vue/devtools-shared": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.10.tgz",
+      "integrity": "sha512-wOPslzB8vTvpxwdaOcR2qAbwmuSP0L+rhpoC6Cf56V3Jip+HWb7PQQXOUPgBNQARpXsbQX/+mvi8kKucmBGRwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/vee-validate/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/vee-validate/node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.1.tgz",
+      "integrity": "sha512-EU/eS7BH3XROHh2YnBefjM6DBKA6ZeMZEYQbj7NLWg5wHYlhB8B/Mayd5XsgWq+NFYccDOTemRpdETWR6Ka/lw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.25",
+        "rolldown": "~1.2.1",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.4.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.41.tgz",
+      "integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/compiler-sfc": "3.5.41",
+        "@vue/runtime-dom": "3.5.41",
+        "@vue/server-renderer": "3.5.41",
+        "@vue/shared": "3.5.41"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-filepond": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/vue-filepond/-/vue-filepond-8.0.0.tgz",
+      "integrity": "sha512-FluypMbKJIcOfDi9gT34RQm7MkLDxnPbHQ4VrzNydAUTI1aMYVb1GhJGJjsz/iEtqAfR4V61BCN1TtWuXmTLsg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "filepond": ">=4.7.4 < 5.x",
+        "vue": ">=3 < 4"
+      }
+    },
+    "node_modules/vue-i18n": {
+      "version": "11.4.8",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.4.8.tgz",
+      "integrity": "sha512-0ULeHP6Z9CGvAm67S77ZEp41cfGXIREGL8qfhos2BMgcQQewtQcDKuojt6jjasAD/S8GwfTp2ySPmDSpwvrCMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.4.8",
+        "@intlify/devtools-types": "11.4.8",
+        "@intlify/shared": "11.4.8",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-i18n/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/vue-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.2.0.tgz",
+      "integrity": "sha512-QAC5i0LEb1GLG0LXDQmHu8L7FX12j0KwU/JTKmLQUJMrn04gQdKP6Du+p0QwpHb3iy71vBlqnHQ8WAfOSAWhqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/generator": "^8.0.0",
+        "@vue-macros/common": "^3.1.3",
+        "@vue/devtools-api": "^8.1.5",
+        "ast-walker-scope": "^0.9.0",
+        "chokidar": "^5.0.0",
+        "json5": "^2.2.3",
+        "local-pkg": "^1.2.1",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.2",
+        "muggle-string": "^0.4.1",
+        "nostics": "^1.1.4",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.5",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.17",
+        "unplugin": "^3.3.0",
+        "unplugin-utils": "^0.3.2",
+        "yaml": "^2.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@pinia/colada": ">=0.21.2",
+        "@vue/compiler-sfc": "^3.5.34 || ^4.0.0",
+        "pinia": "^3.0.4 || ^4.0.2",
+        "vite": "^7.3.0 || ^8.0.0",
+        "vue": "^3.5.34 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@pinia/colada": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue3-persian-datetime-picker": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/vue3-persian-datetime-picker/-/vue3-persian-datetime-picker-1.2.2.tgz",
+      "integrity": "sha512-d7nkj5vgtUvEXZboSdRmP1uwBfXvXgXqdvsOOMQb34jiMZU/aBDrTYWTEe1N+XKF9pvTTJn8Rws9ttJmyhK/hw==",
+      "license": "MIT",
+      "dependencies": {
+        "moment-jalaali": "^0.9.4"
+      }
+    },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/yup": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
+      "integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
+      "license": "MIT",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a77986f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "gameno-dashboard",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/vazirmatn": "^5.3.0",
+    "@primevue/themes": "4.0.7",
+    "axios": "^1.19.0",
+    "filepond": "^4.32.12",
+    "filepond-plugin-file-validate-type": "^1.2.9",
+    "filepond-plugin-image-preview": "^4.6.12",
+    "jalali-moment": "^3.3.11",
+    "js-cookie": "^3.0.8",
+    "photoswipe": "^5.4.4",
+    "pinia": "^4.0.2",
+    "primeflex": "^4.0.0",
+    "primeicons": "^8.0.0",
+    "primevue": "4.0.7",
+    "sass": "^1.102.0",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.40",
+    "vue-filepond": "^8.0.0",
+    "vue-i18n": "^11.4.8",
+    "vue-router": "^5.2.0",
+    "vue3-persian-datetime-picker": "^1.2.2",
+    "yup": "^1.7.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.8",
+    "vite": "^8.2.0"
+  }
+}
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/public/icons.svg b/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..434fd38
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,27 @@
+<!-- /src/App.vue -->
+<template>
+  <div id="app-root">
+    <Toast />
+    <ConfirmDialog />
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { useThemeStore } from '@/stores/themeStore';
+import Toast from 'primevue/toast';
+import ConfirmDialog from 'primevue/confirmdialog';
+
+const themeStore = useThemeStore();
+
+onMounted(() => {
+  themeStore.initTheme();
+});
+</script>
+
+<style lang="scss">
+#app-root {
+  min-height: 100vh;
+}
+</style>
diff --git a/src/api/activityLogApi.js b/src/api/activityLogApi.js
new file mode 100644
index 0000000..9081953
--- /dev/null
+++ b/src/api/activityLogApi.js
@@ -0,0 +1,7 @@
+// /src/api/activityLogApi.js
+import axiosInstance from './axiosInstance';
+
+export const activityLogApi = {
+  getAll: (params) => axiosInstance.get('/activity-logs/admin/get-all', { params }),
+  getActions: () => axiosInstance.get('/activity-logs/admin/actions')
+};
diff --git a/src/api/attendanceApi.js b/src/api/attendanceApi.js
new file mode 100644
index 0000000..06546d3
--- /dev/null
+++ b/src/api/attendanceApi.js
@@ -0,0 +1,8 @@
+// /src/api/attendanceApi.js
+import axiosInstance from './axiosInstance';
+
+export const attendanceApi = {
+  recordSessionAttendance: (sessionId, attendanceList) =>
+    axiosInstance.put(`/sessions/admin/${sessionId}/attendance`, { attendanceList }),
+  getSessionAttendance: (sessionId) => axiosInstance.get(`/sessions/admin/get-one/${sessionId}`)
+};
diff --git a/src/api/authApi.js b/src/api/authApi.js
new file mode 100644
index 0000000..10759ab
--- /dev/null
+++ b/src/api/authApi.js
@@ -0,0 +1,9 @@
+// /src/api/authApi.js
+import axiosInstance from './axiosInstance';
+
+export const authApi = {
+  login: (data) => axiosInstance.post('/auth/login', data),
+  refresh: (refreshToken) => axiosInstance.post('/auth/refresh', { refreshToken }),
+  logout: (refreshToken) => axiosInstance.post('/auth/logout', { refreshToken }),
+  getSelf: () => axiosInstance.get('/users/user/get-self')
+};
diff --git a/src/api/axiosInstance.js b/src/api/axiosInstance.js
new file mode 100644
index 0000000..3ecc8fc
--- /dev/null
+++ b/src/api/axiosInstance.js
@@ -0,0 +1,121 @@
+// /src/api/axiosInstance.js
+import axios from 'axios';
+import Cookies from 'js-cookie';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000/api';
+
+const axiosInstance = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json'
+  },
+  timeout: 15000
+});
+
+// Request interceptor: attach token
+axiosInstance.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('accessToken') || Cookies.get('accessToken');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+
+    // Ask backend for Persian (or stored) localized error messages
+    const lang = localStorage.getItem('lang') || 'fa';
+    config.headers['Accept-Language'] = lang;
+    if (!config.params) config.params = {};
+    if (config.params.lang == null) {
+      config.params.lang = lang;
+    }
+
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+// Response interceptor: auto-refresh token on 401
+let isRefreshing = false;
+let failedQueue = [];
+
+const processQueue = (error, token = null) => {
+  failedQueue.forEach(prom => {
+    if (error) {
+      prom.reject(error);
+    } else {
+      prom.resolve(token);
+    }
+  });
+  failedQueue = [];
+};
+
+axiosInstance.interceptors.response.use(
+  (response) => response.data,
+  async (error) => {
+    const originalRequest = error.config;
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (originalRequest.url.includes('/auth/login') || originalRequest.url.includes('/auth/refresh')) {
+        return Promise.reject(error);
+      }
+
+      if (isRefreshing) {
+        return new Promise((resolve, reject) => {
+          failedQueue.push({ resolve, reject });
+        })
+          .then((token) => {
+            originalRequest.headers.Authorization = `Bearer ${token}`;
+            return axiosInstance(originalRequest);
+          })
+          .catch((err) => Promise.reject(err));
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+
+      const refreshToken = localStorage.getItem('refreshToken') || Cookies.get('refreshToken');
+
+      if (!refreshToken) {
+        isRefreshing = false;
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+        window.location.href = '/login';
+        return Promise.reject(error);
+      }
+
+      try {
+        const refreshResponse = await axios.post(`${API_BASE_URL}/auth/refresh`, { refreshToken });
+        const data = refreshResponse.data?.data || refreshResponse.data;
+        const newAccessToken = data.accessToken;
+        const newRefreshToken = data.refreshToken;
+
+        localStorage.setItem('accessToken', newAccessToken);
+        Cookies.set('accessToken', newAccessToken);
+        if (newRefreshToken) {
+          localStorage.setItem('refreshToken', newRefreshToken);
+          Cookies.set('refreshToken', newRefreshToken);
+        }
+
+        axiosInstance.defaults.headers.common.Authorization = `Bearer ${newAccessToken}`;
+        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+
+        processQueue(null, newAccessToken);
+        return axiosInstance(originalRequest);
+      } catch (refreshErr) {
+        processQueue(refreshErr, null);
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+        Cookies.remove('accessToken');
+        Cookies.remove('refreshToken');
+        window.location.href = '/login';
+        return Promise.reject(refreshErr);
+      } finally {
+        isRefreshing = false;
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;
diff --git a/src/api/certificateApi.js b/src/api/certificateApi.js
new file mode 100644
index 0000000..a957741
--- /dev/null
+++ b/src/api/certificateApi.js
@@ -0,0 +1,16 @@
+// /src/api/certificateApi.js
+import axiosInstance from './axiosInstance';
+
+export const certificateApi = {
+  getAll: (params) => axiosInstance.get('/certificates/admin/get-all', { params }),
+  search: (params) => axiosInstance.get('/certificates/admin/search', { params }),
+  getOne: (id) => axiosInstance.get(`/certificates/admin/get-one/${id}`),
+  create: (data) => axiosInstance.post('/certificates/admin/create', data),
+  update: (id, data) => axiosInstance.put(`/certificates/admin/update/${id}`, data),
+  delete: (id) => axiosInstance.delete(`/certificates/admin/delete/${id}`),
+  uploadTemp: (formData) => axiosInstance.post('/files/admin/upload-temp', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  }),
+  userUpload: (data) => axiosInstance.post('/certificates/user/upload', data),
+  getUserCertificates: () => axiosInstance.get('/certificates/user/my-certificates')
+};
diff --git a/src/api/classApi.js b/src/api/classApi.js
new file mode 100644
index 0000000..feede01
--- /dev/null
+++ b/src/api/classApi.js
@@ -0,0 +1,12 @@
+// /src/api/classApi.js
+import axiosInstance from './axiosInstance';
+
+export const classApi = {
+  getAll: (params) => axiosInstance.get('/classes/admin/get-all', { params }),
+  search: (params) => axiosInstance.get('/classes/admin/search', { params }),
+  getOne: (id) => axiosInstance.get(`/classes/admin/get-one/${id}`),
+  create: (data) => axiosInstance.post('/classes/admin/create', data),
+  update: (id, data) => axiosInstance.put(`/classes/admin/update/${id}`, data),
+  delete: (id) => axiosInstance.delete(`/classes/admin/delete/${id}`),
+  registerUsers: (classId, userIds) => axiosInstance.post(`/classes/admin/${classId}/register-users`, { userIds })
+};
diff --git a/src/api/contactInquiryApi.js b/src/api/contactInquiryApi.js
new file mode 100644
index 0000000..20f2170
--- /dev/null
+++ b/src/api/contactInquiryApi.js
@@ -0,0 +1,7 @@
+import axiosInstance from './axiosInstance';
+
+export const contactInquiryApi = {
+  getAll: (params) => axiosInstance.get('/contact-inquiries/admin/get-all', { params }),
+  getOne: (id) => axiosInstance.get(`/contact-inquiries/admin/get-one/${id}`),
+  update: (id, data) => axiosInstance.put(`/contact-inquiries/admin/update/${id}`, data)
+};
diff --git a/src/api/courseApi.js b/src/api/courseApi.js
new file mode 100644
index 0000000..237307a
--- /dev/null
+++ b/src/api/courseApi.js
@@ -0,0 +1,11 @@
+// /src/api/courseApi.js
+import axiosInstance from './axiosInstance';
+
+export const courseApi = {
+  getAll: (params) => axiosInstance.get('/courses/admin/get-all', { params }),
+  search: (params) => axiosInstance.get('/courses/admin/search', { params }),
+  getOne: (id) => axiosInstance.get(`/courses/admin/get-one/${id}`),
+  create: (data) => axiosInstance.post('/courses/admin/create', data),
+  update: (id, data) => axiosInstance.put(`/courses/admin/update/${id}`, data),
+  delete: (id) => axiosInstance.delete(`/courses/admin/delete/${id}`)
+};
diff --git a/src/api/dashboardApi.js b/src/api/dashboardApi.js
new file mode 100644
index 0000000..4e597df
--- /dev/null
+++ b/src/api/dashboardApi.js
@@ -0,0 +1,6 @@
+// /src/api/dashboardApi.js
+import axiosInstance from './axiosInstance';
+
+export const dashboardApi = {
+  getStats: () => axiosInstance.get('/dashboard/admin/stats')
+};
diff --git a/src/api/notificationApi.js b/src/api/notificationApi.js
new file mode 100644
index 0000000..f996289
--- /dev/null
+++ b/src/api/notificationApi.js
@@ -0,0 +1,12 @@
+// /src/api/notificationApi.js
+import axiosInstance from './axiosInstance';
+
+export const notificationApi = {
+  getAll: (params) => axiosInstance.get('/notifications/admin/get-all', { params }),
+  search: (params) => axiosInstance.get('/notifications/admin/search', { params }),
+  getOne: (id) => axiosInstance.get(`/notifications/admin/get-one/${id}`),
+  create: (data) => axiosInstance.post('/notifications/admin/create', data),
+  update: (id, data) => axiosInstance.put(`/notifications/admin/update/${id}`, data),
+  delete: (id) => axiosInstance.delete(`/notifications/admin/delete/${id}`),
+  retry: (id) => axiosInstance.post(`/notifications/admin/${id}/retry`)
+};
diff --git a/src/api/paymentApi.js b/src/api/paymentApi.js
new file mode 100644
index 0000000..7c26f1b
--- /dev/null
+++ b/src/api/paymentApi.js
@@ -0,0 +1,12 @@
+// /src/api/paymentApi.js
+import axiosInstance from './axiosInstance';
+
+export const paymentApi = {
+  getAll: (params) => axiosInstance.get('/payments/admin/get-all', { params }),
+  search: (params) => axiosInstance.get('/payments/admin/search', { params }),
+  getOne: (id) => axiosInstance.get(`/payments/admin/get-one/${id}`),
+  create: (data) => axiosInstance.post('/payments/admin/create', data),
+  update: (id, data) => axiosInstance.put(`/payments/admin/update/${id}`, data),
+  delete: (id) => axiosInstance.delete(`/payments/admin/delete/${id}`),
+  recordTransaction: (paymentId, data) => axiosInstance.post(`/payments/user/pay/${paymentId}`, data)
+};
diff --git a/src/api/professorApi.js b/src/api/professorApi.js
new file mode 100644
index 0000000..fdd4eda
--- /dev/null
+++ b/src/api/professorApi.js
@@ -0,0 +1,11 @@
+// /src/api/professorApi.js
+import axiosInstance from './axiosInstance';
+
+export const professorApi = {
+  getAll: (params) => axiosInstance.get('/professors/admin/get-all', { params }),
+  search: (params) => axiosInstance.get('/professors/admin/search', { params }),
+  getOne: (id) => axiosInstance.get(`/professors/admin/get-one/${id}`),
+  create: (data) => axiosInstance.post('/professors/admin/create', data),
+  update: (id, data) => axiosInstance.put(`/professors/admin/update/${id}`, data),
+  delete: (id) => axiosInstance.delete(`/professors/admin/delete/${id}`)
+};
diff --git a/src/api/roleApi.js b/src/api/roleApi.js
new file mode 100644
index 0000000..96514b4
--- /dev/null
+++ b/src/api/roleApi.js
@@ -0,0 +1,11 @@
+// /src/api/roleApi.js
+import axiosInstance from './axiosInstance';
+
+export const roleApi = {
+  getAll: (params) => axiosInstance.get('/roles/admin/get-all', { params }),
+  search: (params) => axiosInstance.get('/roles/admin/search', { params }),
+  getOne: (id) => axiosInstance.get(`/roles/admin/get-one/${id}`),
+  create: (data) => axiosInstance.post('/roles/admin/create', data),
+  update: (id, data) => axiosInstance.put(`/roles/admin/update/${id}`, data),
+  delete: (id) => axiosInstance.delete(`/roles/admin/delete/${id}`)
+};
diff --git a/src/api/sessionApi.js b/src/api/sessionApi.js
new file mode 100644
index 0000000..d5bdc1f
--- /dev/null
+++ b/src/api/sessionApi.js
@@ -0,0 +1,14 @@
+// /src/api/sessionApi.js
+import axiosInstance from './axiosInstance';
+
+export const sessionApi = {
+  getAll: (params) => axiosInstance.get('/sessions/admin/get-all', { params }),
+  search: (params) => axiosInstance.get('/sessions/admin/search', { params }),
+  getOne: (id) => axiosInstance.get(`/sessions/admin/get-one/${id}`),
+  create: (data) => axiosInstance.post('/sessions/admin/create', data),
+  update: (id, data) => axiosInstance.put(`/sessions/admin/update/${id}`, data),
+  delete: (id) => axiosInstance.delete(`/sessions/admin/delete/${id}`),
+  bulkDelete: (ids) => axiosInstance.post('/sessions/admin/bulk-delete', { ids }),
+  bulkUpdateStatus: (ids, status) => axiosInstance.post('/sessions/admin/bulk-status', { ids, status }),
+  recordAttendance: (sessionId, data) => axiosInstance.put(`/sessions/admin/${sessionId}/attendance`, data)
+};
diff --git a/src/api/userApi.js b/src/api/userApi.js
new file mode 100644
index 0000000..3d8d79d
--- /dev/null
+++ b/src/api/userApi.js
@@ -0,0 +1,12 @@
+// /src/api/userApi.js
+import axiosInstance from './axiosInstance';
+
+export const userApi = {
+  getAll: (params) => axiosInstance.get('/users/admin/get-all', { params }),
+  search: (params) => axiosInstance.get('/users/admin/search', { params }),
+  getOne: (id) => axiosInstance.get(`/users/admin/get-one/${id}`),
+  create: (data) => axiosInstance.post('/users/admin/create', data),
+  update: (id, data) => axiosInstance.put(`/users/admin/update/${id}`, data),
+  delete: (id) => axiosInstance.delete(`/users/admin/delete/${id}`),
+  enroll: (userId, data) => axiosInstance.post(`/users/admin/${userId}/enroll`, data)
+};
diff --git a/src/assets/hero.png b/src/assets/hero.png
new file mode 100644
index 0000000..02251f4
Binary files /dev/null and b/src/assets/hero.png differ
diff --git a/src/assets/styles/dark-theme.scss b/src/assets/styles/dark-theme.scss
new file mode 100644
index 0000000..4f6f297
--- /dev/null
+++ b/src/assets/styles/dark-theme.scss
@@ -0,0 +1,13 @@
+// /src/assets/styles/dark-theme.scss
+:root.dark-mode {
+  --bg-primary: #121212;
+  --surface-card: #1e1e1e;
+  --surface-hover: #2a2a2a;
+  --border-color: #333333;
+  --text-primary: #f3f4f6;
+  --text-secondary: #9ca3af;
+  --text-muted: #6b7280;
+  --primary-color: #10b981;
+  --primary-color-hover: #059669;
+  --primary-color-light: rgba(16, 185, 129, 0.15);
+}
diff --git a/src/assets/styles/light-theme.scss b/src/assets/styles/light-theme.scss
new file mode 100644
index 0000000..c92823e
--- /dev/null
+++ b/src/assets/styles/light-theme.scss
@@ -0,0 +1,13 @@
+// /src/assets/styles/light-theme.scss
+:root {
+  --bg-primary: #f8fafc;
+  --surface-card: #ffffff;
+  --surface-hover: #f1f5f9;
+  --border-color: #e2e8f0;
+  --text-primary: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #94a3b8;
+  --primary-color: #10b981;
+  --primary-color-hover: #059669;
+  --primary-color-light: rgba(16, 185, 129, 0.1);
+}
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
new file mode 100644
index 0000000..f2f3486
--- /dev/null
+++ b/src/assets/styles/main.scss
@@ -0,0 +1,272 @@
+// /src/assets/styles/main.scss
+
+@import '@fontsource/vazirmatn/400.css';
+@import '@fontsource/vazirmatn/500.css';
+@import '@fontsource/vazirmatn/700.css';
+
+@import './light-theme.scss';
+@import './dark-theme.scss';
+@import './rtl-overrides.scss';
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+  &:hover {
+    color: var(--primary-color-hover);
+  }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-tertiary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--text-muted);
+  border-radius: 3px;
+  &:hover {
+    background: var(--text-secondary);
+  }
+}
+
+/* ==========================================
+   Global Border Polish (Removing Harsh Outlines)
+   ========================================== */
+.border-color,
+.border-1,
+.border-top-1,
+.border-bottom-1,
+.border-left-1,
+.border-right-1 {
+  border-color: var(--border-color) !important;
+}
+
+.surface-card,
+.p-component,
+.p-card,
+.p-panel,
+.p-datatable,
+.p-datatable-header,
+.p-datatable-thead > tr > th,
+.p-datatable-tbody > tr > td,
+.p-paginator,
+.p-dialog,
+.p-sidebar,
+.p-menu,
+.p-select,
+.p-inputtext,
+.p-button {
+  border-color: var(--border-color) !important;
+}
+
+/* ==========================================
+   Vue Persian Datetime Picker Styling & Theme
+   Theme & coloring rebuilt from scratch using CSS variables
+   ========================================== */
+.vpd-wrapper {
+  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif !important;
+
+  .vpd-container {
+    border-radius: 16px !important;
+    overflow: hidden !important;
+    box-shadow: var(--shadow-lg) !important;
+    border: 1px solid var(--border-color) !important;
+    background-color: var(--surface-card) !important;
+  }
+
+  .vpd-header {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%) !important;
+    color: #ffffff !important;
+
+    .vpd-year-label,
+    .vpd-year-label span {
+      color: rgba(255, 255, 255, 0.85) !important;
+    }
+
+    .vpd-date,
+    .vpd-date span {
+      color: #ffffff !important;
+      font-weight: 700 !important;
+    }
+  }
+
+  .vpd-content {
+    background-color: var(--surface-card) !important;
+    color: var(--text-primary) !important;
+  }
+
+  .vpd-controls {
+    color: var(--text-primary) !important;
+
+    button, span, i, svg, .vpd-month-label {
+      color: var(--text-primary) !important;
+      fill: var(--text-primary) !important;
+    }
+
+    button:hover {
+      background-color: var(--surface-hover) !important;
+      border-radius: 50%;
+    }
+
+    .vpd-month-label span {
+      border-color: var(--border-color) !important;
+
+      &:hover {
+        background-color: var(--surface-hover) !important;
+      }
+    }
+  }
+
+  .vpd-week {
+    .vpd-weekday {
+      color: var(--text-muted) !important;
+      font-weight: 600 !important;
+    }
+  }
+
+  .vpd-days {
+    .vpd-day {
+      color: var(--text-primary) !important;
+
+      .vpd-day-text {
+        color: var(--text-primary) !important;
+        font-weight: 500;
+      }
+
+      &:not([disabled="true"]):hover:not(.vpd-selected):not(.vpd-empty) {
+        .vpd-day-effect {
+          background-color: var(--surface-hover) !important;
+          opacity: 0.9 !important;
+        }
+      }
+
+      &.vpd-selected {
+        .vpd-day-effect {
+          background-color: var(--primary-color) !important;
+          opacity: 1 !important;
+        }
+        .vpd-day-text {
+          color: #ffffff !important;
+          font-weight: 700 !important;
+        }
+      }
+
+      &.vpd-range-first,
+      &.vpd-range-last,
+      &.vpd-range-between,
+      &.vpd-range-hover {
+        .vpd-day-effect {
+          background-color: var(--primary-color-light) !important;
+          opacity: 1 !important;
+        }
+        .vpd-day-text {
+          color: var(--primary-color) !important;
+        }
+      }
+
+      &[disabled="true"] {
+        .vpd-day-text {
+          color: var(--text-muted) !important;
+          opacity: 0.4 !important;
+        }
+      }
+
+      &.vpd-empty {
+        background: transparent !important;
+      }
+    }
+  }
+
+  .vpd-actions {
+    border-top: 1px solid var(--border-color) !important;
+    background-color: var(--surface-card) !important;
+
+    button {
+      color: var(--primary-color) !important;
+      font-weight: 700 !important;
+      font-family: inherit !important;
+      border-radius: 8px !important;
+      transition: background-color 0.15s ease, color 0.15s ease;
+
+      &:hover {
+        background-color: var(--primary-color-light) !important;
+      }
+    }
+  }
+
+  .vpd-addon-list {
+    background-color: var(--surface-card) !important;
+    border-color: var(--border-color) !important;
+
+    .vpd-addon-list-item {
+      color: var(--text-secondary) !important;
+      background-color: transparent !important;
+
+      &:hover {
+        background-color: var(--surface-hover) !important;
+        color: var(--text-primary) !important;
+      }
+
+      &.vpd-selected {
+        background-color: var(--primary-color-light) !important;
+        color: var(--primary-color) !important;
+        font-weight: 700 !important;
+      }
+
+      &[disabled="true"] {
+        color: var(--text-muted) !important;
+        opacity: 0.4 !important;
+      }
+    }
+  }
+
+  .vpd-close-addon {
+    color: var(--text-primary) !important;
+    background-color: var(--surface-hover) !important;
+  }
+}
+
+/* ==========================================
+   Global High-Contrast Hover & Selection States
+   ========================================== */
+.p-datatable-tbody > tr {
+  transition: background-color 0.15s ease;
+  &:hover {
+    background-color: var(--surface-hover) !important;
+  }
+}
+
+.p-select-option,
+.p-dropdown-item {
+  transition: all 0.15s ease;
+  &:hover {
+    background-color: var(--primary-color-light) !important;
+    color: var(--primary-color) !important;
+  }
+  &.p-select-option-selected,
+  &.p-highlight {
+    background-color: var(--primary-color) !important;
+    color: #ffffff !important;
+  }
+}
+
diff --git a/src/assets/styles/rtl-overrides.scss b/src/assets/styles/rtl-overrides.scss
new file mode 100644
index 0000000..c5f1062
--- /dev/null
+++ b/src/assets/styles/rtl-overrides.scss
@@ -0,0 +1,158 @@
+// /src/assets/styles/rtl-overrides.scss
+
+html[dir="rtl"] {
+  body {
+    direction: rtl;
+    text-align: right;
+  }
+
+  /* PrimeVue DataTable RTL Fixes */
+  .p-datatable {
+    direction: rtl;
+    
+    .p-datatable-header {
+      direction: rtl;
+      text-align: right;
+    }
+
+    .p-datatable-thead > tr > th {
+      text-align: right !important;
+      direction: rtl !important;
+      font-weight: 600;
+      
+      .p-column-header-content {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 0.5rem;
+      }
+
+      .p-sortable-column-icon {
+        margin-left: 0;
+        margin-right: 0.5rem;
+      }
+    }
+
+    .p-datatable-tbody > tr > td {
+      text-align: right !important;
+      direction: rtl !important;
+    }
+  }
+
+  /* PrimeVue RTL Icon and Layout Fixes */
+  .p-iconfield {
+    direction: rtl;
+    .p-inputicon {
+      right: 0.85rem;
+      left: auto;
+    }
+  }
+
+  .p-paginator {
+    direction: rtl;
+    justify-content: center;
+    gap: 0.25rem;
+
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-next,
+    .p-paginator-last {
+      transform: scaleX(-1);
+    }
+  }
+
+  .p-breadcrumb ul {
+    direction: rtl;
+    li .p-breadcrumb-chevron {
+      transform: scaleX(-1);
+    }
+  }
+
+  .p-sidebar,
+  .p-dialog,
+  .p-menu,
+  .p-popover,
+  .p-select-option,
+  .p-select-overlay,
+  .p-toast {
+    direction: rtl;
+    text-align: right;
+  }
+
+  /* PrimeVue SelectButton RTL Fixes */
+  .p-selectbutton {
+    direction: rtl;
+    display: inline-flex;
+    max-width: 100%;
+    overflow-x: auto;
+
+    .p-togglebutton {
+      border-radius: 0 !important;
+      border-width: 1px 0 1px 1px !important;
+      text-align: center;
+      justify-content: center;
+
+      &:first-child {
+        border-right-width: 1px !important;
+        border-top-right-radius: var(--p-selectbutton-border-radius, 6px) !important;
+        border-bottom-right-radius: var(--p-selectbutton-border-radius, 6px) !important;
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
+
+      &:last-child {
+        border-left-width: 1px !important;
+        border-top-left-radius: var(--p-selectbutton-border-radius, 6px) !important;
+        border-bottom-left-radius: var(--p-selectbutton-border-radius, 6px) !important;
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+      }
+
+      &:focus-visible,
+      &.p-togglebutton-checked,
+      &.p-highlight {
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }
+
+  /* PrimeVue ButtonGroup RTL Fixes */
+  .p-button-group {
+    direction: rtl;
+    display: inline-flex;
+
+    .p-button {
+      border-radius: 0 !important;
+      border-width: 1px 0 1px 1px !important;
+
+      &:first-child {
+        border-right-width: 1px !important;
+        border-top-right-radius: var(--p-button-border-radius, 6px) !important;
+        border-bottom-right-radius: var(--p-button-border-radius, 6px) !important;
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
+
+      &:last-child {
+        border-left-width: 1px !important;
+        border-top-left-radius: var(--p-button-border-radius, 6px) !important;
+        border-bottom-left-radius: var(--p-button-border-radius, 6px) !important;
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+      }
+
+      &:focus-visible,
+      &:active {
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }
+
+  /* Vue FilePond RTL adjustment */
+  .filepond--root {
+    direction: rtl;
+    font-family: inherit;
+  }
+}
diff --git a/src/assets/vite.svg b/src/assets/vite.svg
new file mode 100644
index 0000000..5101b67
--- /dev/null
+++ b/src/assets/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
new file mode 100644
index 0000000..770e9d3
--- /dev/null
+++ b/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..f91553d
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { ref } from 'vue'
+import viteLogo from '../assets/vite.svg'
+import heroImg from '../assets/hero.png'
+import vueLogo from '../assets/vue.svg'
+
+const count = ref(0)
+</script>
+
+<template>
+  <section id="center">
+    <div class="hero">
+      <img :src="heroImg" class="base" width="170" height="179" alt="" />
+      <img :src="vueLogo" class="framework" alt="Vue logo" />
+      <img :src="viteLogo" class="vite" alt="Vite logo" />
+    </div>
+    <div>
+      <h1>Get started</h1>
+      <p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
+    </div>
+    <button type="button" class="counter" @click="count++">
+      Count is {{ count }}
+    </button>
+  </section>
+
+  <div class="ticks"></div>
+
+  <section id="next-steps">
+    <div id="docs">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#documentation-icon"></use>
+      </svg>
+      <h2>Documentation</h2>
+      <p>Your questions, answered</p>
+      <ul>
+        <li>
+          <a href="https://vite.dev/" target="_blank">
+            <img class="logo" :src="viteLogo" alt="" />
+            Explore Vite
+          </a>
+        </li>
+        <li>
+          <a href="https://vuejs.org/" target="_blank">
+            <img class="button-icon" :src="vueLogo" alt="" />
+            Learn more
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div id="social">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#social-icon"></use>
+      </svg>
+      <h2>Connect with us</h2>
+      <p>Join the Vite community</p>
+      <ul>
+        <li>
+          <a href="https://github.com/vitejs/vite" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#github-icon"></use>
+            </svg>
+            GitHub
+          </a>
+        </li>
+        <li>
+          <a href="https://chat.vite.dev/" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#discord-icon"></use>
+            </svg>
+            Discord
+          </a>
+        </li>
+        <li>
+          <a href="https://x.com/vite_js" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#x-icon"></use>
+            </svg>
+            X.com
+          </a>
+        </li>
+        <li>
+          <a href="https://bsky.app/profile/vite.dev" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#bluesky-icon"></use>
+            </svg>
+            Bluesky
+          </a>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <div class="ticks"></div>
+  <section id="spacer"></section>
+</template>
diff --git a/src/components/classes/ClassSessionsSection.vue b/src/components/classes/ClassSessionsSection.vue
new file mode 100644
index 0000000..770aa81
--- /dev/null
+++ b/src/components/classes/ClassSessionsSection.vue
@@ -0,0 +1,548 @@
+<!-- Sessions management for a class: list existing, bulk create when empty, manual add at bottom -->
+<template>
+  <div class="class-sessions-section flex flex-column gap-4">
+    <!-- Always show sessions list below students -->
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm">
+      <div class="flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
+        <div>
+          <h2 class="text-lg font-bold m-0">جلسات کلاس</h2>
+          <p class="text-muted text-sm m-0 mt-1">جلسات برنامه‌ریزی‌شده برای این کلاس</p>
+        </div>
+        <div class="flex align-items-center gap-2 flex-wrap">
+          <Tag :value="`${toPersianDigits(sessions.length)} جلسه`" severity="info" />
+          <template v-if="selectedSessions.length">
+            <Tag :value="`${toPersianDigits(selectedSessions.length)} انتخاب‌شده`" />
+            <Select
+              v-model="bulkStatus"
+              :options="statusOptions"
+              optionLabel="label"
+              optionValue="value"
+              placeholder="تغییر وضعیت"
+              class="text-sm"
+              style="min-width: 9rem"
+            />
+            <Button
+              label="اعمال"
+              icon="pi pi-check"
+              size="small"
+              :loading="isBulkUpdating"
+              :disabled="!bulkStatus"
+              @click="applyBulkStatus"
+            />
+            <Button
+              label="حذف"
+              icon="pi pi-trash"
+              size="small"
+              severity="danger"
+              outlined
+              @click="confirmBulkDelete"
+            />
+            <Button label="لغو" text size="small" severity="secondary" @click="selectedSessions = []" />
+          </template>
+        </div>
+      </div>
+
+      <div v-if="loadingSessions" class="mb-2">
+        <TableSkeleton :rows="6" :columns="6" />
+      </div>
+
+      <DataTable
+        v-else
+        v-model:selection="selectedSessions"
+        :value="sessions"
+        dataKey="_id"
+        class="p-datatable-sm text-sm"
+        emptyMessage="جلسه‌ای ثبت نشده است"
+      >
+        <Column selectionMode="multiple" headerStyle="width: 3rem" />
+        <Column header="#" style="width: 50px">
+          <template #body="{ index }">{{ toPersianDigits(index + 1) }}</template>
+        </Column>
+        <Column header="موضوع">
+          <template #body="{ data }">{{ data.topic || '—' }}</template>
+        </Column>
+        <Column header="تاریخ">
+          <template #body="{ data }">{{ formatJalali(data.day || data.date) }}</template>
+        </Column>
+        <Column header="زمان">
+          <template #body="{ data }">
+            <span dir="ltr">{{ data.startTime || '—' }} – {{ data.endTime || '—' }}</span>
+          </template>
+        </Column>
+        <Column header="وضعیت" style="width: 100px">
+          <template #body="{ data }">
+            <StatusTag :status="data.status || 'scheduled'" type="session" />
+          </template>
+        </Column>
+        <Column header="عملیات" style="width: 140px">
+          <template #body="{ data }">
+            <div class="flex align-items-center gap-1">
+              <Button
+                icon="pi pi-check-square"
+                text
+                rounded
+                size="small"
+                severity="success"
+                v-tooltip.top="'حضور و غیاب'"
+                @click="$router.push(`/sessions/attendance/${data._id || data.id}`)"
+              />
+              <Button
+                icon="pi pi-pencil"
+                text
+                rounded
+                size="small"
+                severity="warning"
+                v-tooltip.top="'ویرایش'"
+                @click="$router.push(`/sessions/edit/${data._id || data.id}`)"
+              />
+              <Button
+                icon="pi pi-trash"
+                text
+                rounded
+                size="small"
+                severity="danger"
+                v-tooltip.top="'حذف'"
+                @click="confirmDeleteOne(data)"
+              />
+            </div>
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+
+    <ConfirmDeleteDialog
+      v-model="deleteDialogVisible"
+      :loading="isDeleting"
+      :title="bulkDeleteMode ? 'حذف گروهی جلسات' : 'حذف جلسه'"
+      :message="deleteMessage"
+      @confirm="handleDeleteConfirm"
+    />
+
+    <!-- Bulk auto-create: only when no sessions yet -->
+    <div v-if="!hasSessions" class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm">
+      <h2 class="text-lg font-bold text-color mb-1">ایجاد جلسات کلاس</h2>
+      <p class="text-muted text-sm mb-3">جلسات را به‌صورت خودکار بر اساس روزهای هفته بسازید، یا از بخش دستی پایین صفحه استفاده کنید.</p>
+
+      <div class="grid">
+        <div class="col-12 sm:col-6 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">تعداد جلسات</label>
+          <InputNumber v-model="autoForm.sessionCount" :min="1" class="w-full text-sm" />
+        </div>
+        <div class="col-12 sm:col-6 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">تاریخ شروع</label>
+          <DatePicker v-model="autoForm.startDate" class="w-full text-sm" placeholder="1403/01/01" />
+        </div>
+        <div class="col-12 sm:col-6 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">ساعت شروع</label>
+          <InputText v-model="autoForm.startTime" class="w-full text-sm" placeholder="19:00" dir="ltr" />
+        </div>
+        <div class="col-12 sm:col-6 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">ساعت پایان</label>
+          <InputText v-model="autoForm.endTime" class="w-full text-sm" placeholder="20:30" dir="ltr" />
+        </div>
+        <div class="col-12 flex flex-column gap-2 my-2">
+          <label class="font-semibold text-sm">روزهای هفته</label>
+          <SelectButton v-model="autoForm.selectedDays" :options="weekdays" optionLabel="label" optionValue="value" multiple class="text-sm" />
+        </div>
+        <div class="col-12">
+          <Button label="پیش‌نمایش و ساخت جلسات" icon="pi pi-cog" severity="help" @click="generateSessionsPreview" />
+        </div>
+      </div>
+
+      <div v-if="generatedSessions.length > 0" class="mt-4 pt-3 border-top-1 border-color">
+        <h3 class="text-md font-bold mb-3">پیش‌نمایش جلسات (قابل ویرایش)</h3>
+        <DataTable :value="generatedSessions" class="p-datatable-sm text-sm">
+          <Column field="sessionNumber" header="جلسه #" style="width: 70px">
+            <template #body="{ data }">{{ toPersianDigits(data.sessionNumber) }}</template>
+          </Column>
+          <Column field="date" header="تاریخ">
+            <template #body="{ data }">
+              <InputText v-model="data.date" class="w-full p-inputtext-sm text-sm" />
+            </template>
+          </Column>
+          <Column field="startTime" header="ساعت شروع">
+            <template #body="{ data }">
+              <InputText v-model="data.startTime" class="w-full p-inputtext-sm text-sm" dir="ltr" />
+            </template>
+          </Column>
+          <Column field="endTime" header="ساعت پایان">
+            <template #body="{ data }">
+              <InputText v-model="data.endTime" class="w-full p-inputtext-sm text-sm" dir="ltr" />
+            </template>
+          </Column>
+          <Column field="topic" header="موضوع جلسه">
+            <template #body="{ data }">
+              <InputText v-model="data.topic" class="w-full p-inputtext-sm text-sm" />
+            </template>
+          </Column>
+        </DataTable>
+        <div class="flex justify-content-end mt-3">
+          <Button label="ثبت نهایی جلسات" icon="pi pi-save" severity="success" :loading="isSaving" @click="submitGeneratedSessions" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Manual create: always at the bottom -->
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm">
+      <h2 class="text-lg font-bold text-color mb-1">
+        {{ hasSessions ? 'افزودن جلسه دستی' : 'تعریف دستی جلسات' }}
+      </h2>
+      <p class="text-muted text-sm mb-3">
+        {{ hasSessions ? 'در صورت نیاز می‌توانید یک یا چند جلسه اضافه کنید.' : 'جلسات را یکی‌یکی تعریف کنید.' }}
+      </p>
+
+      <div v-for="(session, index) in manualSessions" :key="index" class="grid align-items-center mb-2 p-2 border-round surface-ground">
+        <div class="col-12 sm:col-1 text-center font-bold">#{{ toPersianDigits(index + 1) }}</div>
+        <div class="col-12 sm:col-3">
+          <InputText v-model="session.date" placeholder="تاریخ (1403/01/01)" class="w-full text-sm" />
+        </div>
+        <div class="col-6 sm:col-2">
+          <InputText v-model="session.startTime" placeholder="ساعت شروع" class="w-full text-sm" dir="ltr" />
+        </div>
+        <div class="col-6 sm:col-2">
+          <InputText v-model="session.endTime" placeholder="ساعت پایان" class="w-full text-sm" dir="ltr" />
+        </div>
+        <div class="col-12 sm:col-3">
+          <InputText v-model="session.topic" placeholder="موضوع جلسه" class="w-full text-sm" />
+        </div>
+        <div class="col-12 sm:col-1 text-center">
+          <Button
+            icon="pi pi-times"
+            text
+            rounded
+            severity="danger"
+            size="small"
+            :disabled="manualSessions.length === 1"
+            @click="manualSessions.splice(index, 1)"
+          />
+        </div>
+      </div>
+
+      <div class="flex align-items-center justify-content-between mt-3">
+        <Button
+          label="افزودن ردیف"
+          icon="pi pi-plus"
+          text
+          @click="manualSessions.push({ date: todayJalali(), startTime: '19:00', endTime: '20:30', topic: '' })"
+        />
+        <Button label="ثبت جلسات" icon="pi pi-save" severity="success" :loading="isSaving" @click="submitManualSessions" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch } from 'vue';
+import moment from 'jalali-moment';
+import { sessionApi } from '@/api/sessionApi';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import StatusTag from '@/components/common/StatusTag.vue';
+import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
+import TableSkeleton from '@/components/common/TableSkeleton.vue';
+import InputText from 'primevue/inputtext';
+import InputNumber from 'primevue/inputnumber';
+import Button from 'primevue/button';
+import Tag from 'primevue/tag';
+import Select from 'primevue/select';
+import SelectButton from 'primevue/selectbutton';
+import DatePicker from 'vue3-persian-datetime-picker';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+
+const props = defineProps({
+  classId: { type: [String, Object], required: true },
+  courseId: { type: [String, Object], required: true },
+  professorId: { type: [String, Object], default: null },
+  defaultSessionCount: { type: Number, default: 12 }
+});
+
+const { toPersianDigits, toLatinDigits, formatJalali } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const todayJalali = () => moment().locale('fa').format('jYYYY/jMM/jDD');
+
+const sessions = ref([]);
+const selectedSessions = ref([]);
+const loadingSessions = ref(false);
+const isSaving = ref(false);
+const isDeleting = ref(false);
+const isBulkUpdating = ref(false);
+const deleteDialogVisible = ref(false);
+const bulkDeleteMode = ref(false);
+const sessionToDelete = ref(null);
+const bulkStatus = ref(null);
+const generatedSessions = ref([]);
+const manualSessions = ref([{ date: todayJalali(), startTime: '19:00', endTime: '20:30', topic: '' }]);
+
+const statusOptions = [
+  { label: 'طبق برنامه', value: 'scheduled' },
+  { label: 'برگزار شده', value: 'held' },
+  { label: 'لغو شده', value: 'cancelled' }
+];
+
+const selectedIds = computed(() =>
+  selectedSessions.value.map((s) => s._id || s.id).filter(Boolean)
+);
+
+const deleteMessage = computed(() => {
+  if (bulkDeleteMode.value) {
+    return `آیا از حذف ${toPersianDigits(selectedSessions.value.length)} جلسه انتخاب‌شده اطمینان دارید؟ این عملیات قابل بازگشت نیست.`;
+  }
+  return 'آیا از حذف این جلسه اطمینان دارید؟ این عملیات قابل بازگشت نیست.';
+});
+
+const resolvedClassId = computed(() => {
+  const value = props.classId;
+  if (!value) return null;
+  return typeof value === 'object' ? (value._id || value.id || null) : String(value);
+});
+
+const resolvedCourseId = computed(() => {
+  const value = props.courseId;
+  if (!value) return null;
+  return typeof value === 'object' ? (value._id || value.id || null) : String(value);
+});
+
+const resolvedProfessorId = computed(() => {
+  const value = props.professorId;
+  if (!value) return null;
+  return typeof value === 'object' ? (value._id || value.id || null) : String(value);
+});
+
+const hasSessions = computed(() => sessions.value.length > 0);
+
+const normalizeList = (response) => {
+  if (!response) return [];
+  if (Array.isArray(response)) return response;
+  if (Array.isArray(response.data)) return response.data;
+  if (Array.isArray(response.items)) return response.items;
+  if (Array.isArray(response.sessions)) return response.sessions;
+  if (response.data && typeof response.data === 'object') {
+    if (Array.isArray(response.data.data)) return response.data.data;
+    if (Array.isArray(response.data.items)) return response.data.items;
+    if (Array.isArray(response.data.sessions)) return response.data.sessions;
+  }
+  return [];
+};
+
+const weekdays = [
+  { label: 'شنبه', value: 6 },
+  { label: 'یکشنبه', value: 0 },
+  { label: 'دوشنبه', value: 1 },
+  { label: 'سه‌شنبه', value: 2 },
+  { label: 'چهارشنبه', value: 3 },
+  { label: 'پنجشنبه', value: 4 },
+  { label: 'جمعه', value: 5 }
+];
+
+const autoForm = reactive({
+  sessionCount: props.defaultSessionCount || 12,
+  startDate: todayJalali(),
+  startTime: '19:00',
+  endTime: '20:30',
+  selectedDays: [6, 2]
+});
+
+const toSessionDayIso = (value) => {
+  if (!value) return null;
+  const latin = toLatinDigits(String(value));
+  const m = moment(latin, ['jYYYY/jMM/jDD', 'YYYY/MM/DD', moment.ISO_8601], true);
+  return m.isValid() ? m.toDate().toISOString() : null;
+};
+
+const fetchSessions = async () => {
+  const classId = resolvedClassId.value;
+  if (!classId) return;
+  loadingSessions.value = true;
+  try {
+    // Use schema field `class` only. Sending classId alongside it makes older
+    // API builds add `{ classId: ... }` to the Mongo filter and return 0 rows.
+    const res = await sessionApi.getAll({
+      limit: 100,
+      class: classId,
+      sortBy: 'day',
+      sortOrder: 'asc'
+    });
+    sessions.value = normalizeList(res);
+    selectedSessions.value = [];
+  } catch (err) {
+    showError(err);
+    sessions.value = [];
+  } finally {
+    loadingSessions.value = false;
+  }
+};
+
+const confirmDeleteOne = (session) => {
+  bulkDeleteMode.value = false;
+  sessionToDelete.value = session;
+  deleteDialogVisible.value = true;
+};
+
+const confirmBulkDelete = () => {
+  if (!selectedSessions.value.length) return;
+  bulkDeleteMode.value = true;
+  sessionToDelete.value = null;
+  deleteDialogVisible.value = true;
+};
+
+const handleDeleteConfirm = async () => {
+  isDeleting.value = true;
+  try {
+    if (bulkDeleteMode.value) {
+      const res = await sessionApi.bulkDelete(selectedIds.value);
+      const deletedCount = res?.data?.deletedCount ?? selectedIds.value.length;
+      showSuccess(`${toPersianDigits(deletedCount)} جلسه حذف شد`);
+      selectedSessions.value = [];
+    } else if (sessionToDelete.value) {
+      await sessionApi.delete(sessionToDelete.value._id || sessionToDelete.value.id);
+      showSuccess('جلسه با موفقیت حذف شد');
+    }
+    deleteDialogVisible.value = false;
+    await fetchSessions();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isDeleting.value = false;
+  }
+};
+
+const applyBulkStatus = async () => {
+  if (!selectedIds.value.length || !bulkStatus.value) return;
+  isBulkUpdating.value = true;
+  try {
+    const res = await sessionApi.bulkUpdateStatus(selectedIds.value, bulkStatus.value);
+    const updatedCount = res?.data?.updatedCount ?? selectedIds.value.length;
+    showSuccess(`وضعیت ${toPersianDigits(updatedCount)} جلسه به‌روز شد`);
+    bulkStatus.value = null;
+    selectedSessions.value = [];
+    await fetchSessions();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isBulkUpdating.value = false;
+  }
+};
+
+const resetCreationForms = () => {
+  generatedSessions.value = [];
+  manualSessions.value = [{ date: todayJalali(), startTime: '19:00', endTime: '20:30', topic: '' }];
+};
+
+const generateSessionsPreview = () => {
+  if (!autoForm.startDate) {
+    showError('لطفا تاریخ شروع را وارد کنید');
+    return;
+  }
+  if (!autoForm.selectedDays?.length) {
+    showError('لطفا حداقل یک روز از هفته را انتخاب کنید');
+    return;
+  }
+
+  const list = [];
+  const latinStartDate = toLatinDigits(autoForm.startDate);
+  let currentMoment = moment(latinStartDate, 'jYYYY/jMM/jDD');
+  let count = 0;
+  const targetCount = autoForm.sessionCount || 12;
+
+  while (count < targetCount) {
+    if (autoForm.selectedDays.includes(currentMoment.day())) {
+      count++;
+      list.push({
+        sessionNumber: count,
+        date: currentMoment.locale('fa').format('YYYY/MM/DD'),
+        startTime: autoForm.startTime,
+        endTime: autoForm.endTime,
+        topic: `جلسه ${count}`
+      });
+    }
+    currentMoment.add(1, 'day');
+  }
+  generatedSessions.value = list;
+};
+
+const ensureIds = () => {
+  if (!resolvedClassId.value) {
+    showError('ابتدا کلاس را ذخیره کنید');
+    return false;
+  }
+  if (!resolvedCourseId.value) {
+    showError('دوره مرتبط با کلاس مشخص نیست');
+    return false;
+  }
+  if (!resolvedProfessorId.value) {
+    showError('لطفا استاد کلاس را انتخاب و ذخیره کنید');
+    return false;
+  }
+  return true;
+};
+
+const submitGeneratedSessions = async () => {
+  if (!ensureIds()) return;
+  isSaving.value = true;
+  try {
+    await sessionApi.create({
+      courseId: resolvedCourseId.value,
+      classId: resolvedClassId.value,
+      professorId: resolvedProfessorId.value,
+      sessions: generatedSessions.value.map((s) => ({
+        topic: s.topic,
+        startTime: s.startTime,
+        endTime: s.endTime,
+        day: toSessionDayIso(s.date)
+      }))
+    });
+    showSuccess('جلسات کلاس با موفقیت ایجاد شدند');
+    resetCreationForms();
+    await fetchSessions();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isSaving.value = false;
+  }
+};
+
+const submitManualSessions = async () => {
+  if (!ensureIds()) return;
+  const invalid = manualSessions.value.some((s) => !s.date || !s.startTime || !s.endTime);
+  if (invalid) {
+    showError('تاریخ و ساعت همه جلسات الزامی است');
+    return;
+  }
+  isSaving.value = true;
+  try {
+    await sessionApi.create({
+      courseId: resolvedCourseId.value,
+      classId: resolvedClassId.value,
+      professorId: resolvedProfessorId.value,
+      sessions: manualSessions.value.map((s) => ({
+        topic: s.topic,
+        startTime: s.startTime,
+        endTime: s.endTime,
+        day: toSessionDayIso(s.date)
+      }))
+    });
+    showSuccess('جلسات با موفقیت ثبت شدند');
+    resetCreationForms();
+    await fetchSessions();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isSaving.value = false;
+  }
+};
+
+watch(
+  () => props.defaultSessionCount,
+  (val) => {
+    if (val && !hasSessions.value) autoForm.sessionCount = val;
+  }
+);
+
+watch(resolvedClassId, (id) => {
+  if (id) fetchSessions();
+}, { immediate: true });
+
+defineExpose({ fetchSessions });
+</script>
diff --git a/src/components/common/ConfirmDeleteDialog.vue b/src/components/common/ConfirmDeleteDialog.vue
new file mode 100644
index 0000000..8ae83d7
--- /dev/null
+++ b/src/components/common/ConfirmDeleteDialog.vue
@@ -0,0 +1,57 @@
+<!-- /src/components/common/ConfirmDeleteDialog.vue -->
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :header="title || 'تایید حذف'"
+    :style="{ width: '400px' }"
+    :closable="!loading"
+  >
+    <div class="flex align-items-center gap-3 py-2">
+      <i class="pi pi-exclamation-triangle text-3xl text-red-500"></i>
+      <span class="text-color text-sm">{{ message || 'آیا از حذف این مورد اطمینان دارید؟ این عملیات قابل بازگشت نیست.' }}</span>
+    </div>
+    <template #footer>
+      <div class="flex justify-content-end gap-2">
+        <Button label="انصراف" text class="p-button-secondary" :disabled="loading" @click="visible = false" />
+        <Button label="حذف نهایی" icon="pi pi-trash" severity="danger" :loading="loading" @click="onConfirm" />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  message: {
+    type: String,
+    default: ''
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'confirm']);
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
+
+const onConfirm = () => {
+  emit('confirm');
+};
+</script>
diff --git a/src/components/common/DataTableWrapper.vue b/src/components/common/DataTableWrapper.vue
new file mode 100644
index 0000000..b4105ce
--- /dev/null
+++ b/src/components/common/DataTableWrapper.vue
@@ -0,0 +1,188 @@
+<!-- /src/components/common/DataTableWrapper.vue -->
+<template>
+  <div class="data-table-wrapper surface-card p-4 border-round border-1 border-color shadow-sm">
+    <!-- Toolbar / Search / Filter Header -->
+    <div class="flex flex-column sm:flex-row align-items-center justify-content-between gap-3 mb-4">
+      <div class="p-input-icon-right w-full sm:w-20rem">
+        <IconField iconPosition="right">
+          <InputIcon class="pi pi-search" />
+          <InputText
+            v-model="searchValue"
+            :placeholder="$t('app.search')"
+            class="w-full text-sm"
+            @input="onSearchInput"
+          />
+        </IconField>
+      </div>
+
+      <div class="flex align-items-center gap-2 w-full sm:w-auto justify-content-end">
+        <slot name="toolbar" />
+      </div>
+    </div>
+
+    <!-- Skeleton loading -->
+    <TableSkeleton v-if="loading" :rows="skeletonRowCount" :columns="skeletonColumnCount" />
+
+    <!-- Data Table -->
+    <DataTable
+      v-else
+      :value="items"
+      :lazy="true"
+      :sortField="sortBy"
+      :sortOrder="sortOrder === 'asc' ? 1 : -1"
+      :selection="selection"
+      dataKey="_id"
+      responsiveLayout="scroll"
+      class="p-datatable-sm text-sm"
+      @sort="onSort"
+      @update:selection="onSelectionChange"
+    >
+      <template #empty>
+        <EmptyState />
+      </template>
+
+      <Column v-if="selectable" selectionMode="multiple" headerStyle="width: 3rem" />
+      <slot />
+    </DataTable>
+
+    <!-- Custom Paginator -->
+    <div
+      class="flex flex-column sm:flex-row align-items-center justify-content-between gap-3 mt-4 pt-3 border-top-1 border-color"
+      v-if="totalCount > 0 || loading"
+    >
+      <span class="text-muted text-sm">
+        <template v-if="loading">در حال بارگذاری…</template>
+        <template v-else>
+          نمایش {{ toPersianDigits(firstItemIndex) }} تا {{ toPersianDigits(lastItemIndex) }} از {{ toPersianDigits(totalCount) }} مورد
+        </template>
+      </span>
+
+      <Paginator
+        :rows="limit"
+        :totalRecords="Math.max(totalCount, 1)"
+        :first="(page - 1) * limit"
+        :rowsPerPageOptions="[10, 20, 50, 100]"
+        :disabled="loading"
+        @page="onPage"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { usePersianDate } from '@/composables/usePersianDate';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Paginator from 'primevue/paginator';
+import InputText from 'primevue/inputtext';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import EmptyState from './EmptyState.vue';
+import TableSkeleton from './TableSkeleton.vue';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  totalCount: {
+    type: Number,
+    default: 0
+  },
+  page: {
+    type: Number,
+    default: 1
+  },
+  limit: {
+    type: Number,
+    default: 20
+  },
+  sortBy: {
+    type: String,
+    default: 'createdAt'
+  },
+  sortOrder: {
+    type: String,
+    default: 'desc'
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  selectable: {
+    type: Boolean,
+    default: false
+  },
+  selection: {
+    type: Array,
+    default: () => []
+  },
+  skeletonColumns: {
+    type: Number,
+    default: 5
+  }
+});
+
+const emit = defineEmits(['page-change', 'sort-change', 'search-change', 'update:selection']);
+
+const { toPersianDigits } = usePersianDate();
+
+const searchValue = ref('');
+const skeletonColumnCount = computed(() => Math.max(3, props.skeletonColumns || 5));
+const skeletonRowCount = computed(() => Math.min(Math.max(props.limit || 20, 5), 12));
+
+const onSelectionChange = (value) => {
+  emit('update:selection', value || []);
+};
+
+let searchTimer = null;
+const onSearchInput = () => {
+  if (searchTimer) clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => {
+    emit('search-change', searchValue.value);
+  }, 400);
+};
+
+const onSort = (event) => {
+  emit('sort-change', {
+    sortBy: event.sortField,
+    sortOrder: event.sortOrder === 1 ? 'asc' : 'desc'
+  });
+};
+
+const onPage = (event) => {
+  emit('page-change', {
+    page: event.page + 1,
+    limit: event.rows
+  });
+};
+
+const firstItemIndex = computed(() => {
+  if (props.totalCount === 0) return 0;
+  return (props.page - 1) * props.limit + 1;
+});
+
+const lastItemIndex = computed(() => {
+  return Math.min(props.page * props.limit, props.totalCount);
+});
+
+watch(
+  () => props.items,
+  () => {
+    if (props.selectable && props.selection?.length) {
+      const ids = new Set(props.items.map((item) => String(item._id || item.id)));
+      const next = props.selection.filter((item) => ids.has(String(item._id || item.id)));
+      if (next.length !== props.selection.length) {
+        emit('update:selection', next);
+      }
+    }
+  }
+);
+</script>
+
+<style scoped lang="scss">
+.data-table-wrapper {
+  background-color: var(--surface-card);
+}
+</style>
diff --git a/src/components/common/EmptyState.vue b/src/components/common/EmptyState.vue
new file mode 100644
index 0000000..e46e824
--- /dev/null
+++ b/src/components/common/EmptyState.vue
@@ -0,0 +1,36 @@
+<!-- /src/components/common/EmptyState.vue -->
+<template>
+  <div class="empty-state flex flex-column align-items-center justify-content-center p-5 text-center my-4">
+    <div class="icon-wrapper mb-3 text-muted">
+      <i :class="[icon, 'text-6xl']"></i>
+    </div>
+    <h3 class="text-xl font-bold text-color mb-2">{{ title }}</h3>
+    <p class="text-muted text-sm mb-4 max-w-26rem">{{ description }}</p>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: 'اطلاعاتی یافت نشد'
+  },
+  description: {
+    type: String,
+    default: 'موردی برای نمایش در این بخش وجود ندارد.'
+  },
+  icon: {
+    type: String,
+    default: 'pi pi-folder-open'
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.empty-state {
+  background: var(--surface-card);
+  border: 1px dashed var(--border-color);
+  border-radius: 8px;
+}
+</style>
diff --git a/src/components/common/PageHeader.vue b/src/components/common/PageHeader.vue
new file mode 100644
index 0000000..a3b1323
--- /dev/null
+++ b/src/components/common/PageHeader.vue
@@ -0,0 +1,25 @@
+<!-- /src/components/common/PageHeader.vue -->
+<template>
+  <div class="page-header flex flex-column md:flex-row align-items-start md:align-items-center justify-content-between mb-4 gap-3">
+    <div>
+      <h1 class="text-2xl font-bold text-color m-0">{{ title }}</h1>
+      <p v-if="subtitle" class="text-muted text-sm mt-1 mb-0">{{ subtitle }}</p>
+    </div>
+    <div class="flex align-items-center gap-2">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  }
+});
+</script>
diff --git a/src/components/common/PermissionGate.vue b/src/components/common/PermissionGate.vue
new file mode 100644
index 0000000..b007531
--- /dev/null
+++ b/src/components/common/PermissionGate.vue
@@ -0,0 +1,32 @@
+<!-- /src/components/common/PermissionGate.vue -->
+<template>
+  <slot v-if="hasAccess" />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { usePermission } from '@/composables/usePermission';
+
+const props = defineProps({
+  permission: {
+    type: String,
+    default: null
+  },
+  anyPermission: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const { hasPermission, hasAnyPermission } = usePermission();
+
+const hasAccess = computed(() => {
+  if (props.permission) {
+    return hasPermission(props.permission);
+  }
+  if (props.anyPermission && props.anyPermission.length > 0) {
+    return hasAnyPermission(props.anyPermission);
+  }
+  return true;
+});
+</script>
diff --git a/src/components/common/StatusTag.vue b/src/components/common/StatusTag.vue
new file mode 100644
index 0000000..72ef625
--- /dev/null
+++ b/src/components/common/StatusTag.vue
@@ -0,0 +1,101 @@
+<!-- /src/components/common/StatusTag.vue -->
+<template>
+  <Tag :severity="severity" :value="label" class="text-xs font-semibold px-2 py-1" />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Tag from 'primevue/tag';
+
+const props = defineProps({
+  status: {
+    type: [String, Boolean],
+    required: true
+  },
+  type: {
+    type: String,
+    default: 'general' // general | payment | session | notification | contact
+  }
+});
+
+const SESSION_LABELS = {
+  scheduled: 'طبق برنامه',
+  Scheduled: 'طبق برنامه',
+  held: 'برگزارشده',
+  cancelled: 'لغوشده',
+  canceled: 'لغوشده'
+};
+
+const CONTACT_LABELS = {
+  new: 'جدید',
+  seen: 'مشاهده‌شده',
+  call_later: 'تماس بعدی',
+  contacted: 'تماس گرفته شد',
+  closed: 'بسته'
+};
+
+const NOTIFICATION_LABELS = {
+  pending: 'در انتظار',
+  sent: 'ارسال‌شده',
+  delivered: 'تحویل‌شده',
+  failed: 'ناموفق',
+  retrying: 'تلاش مجدد'
+};
+
+const PAYMENT_LABELS = {
+  paid: 'تسویه‌شده',
+  partial: 'پرداخت جزئی',
+  pending: 'در انتظار پرداخت',
+  overdue: 'معوق'
+};
+
+const severity = computed(() => {
+  const val = String(props.status).toLowerCase();
+
+  if (props.type === 'payment') {
+    if (val === 'paid' || val === 'تسویه شده' || val === 'تسویه‌شده') return 'success';
+    if (val === 'partial' || val === 'پرداخت جزئی') return 'warning';
+    if (val === 'pending' || val === 'در انتظار پرداخت') return 'info';
+    if (val === 'overdue' || val === 'معوق شده' || val === 'معوق') return 'danger';
+  }
+
+  if (props.type === 'session') {
+    if (val === 'scheduled' || val.includes('برنامه')) return 'info';
+    if (val === 'held' || val.includes('برگزار')) return 'success';
+    if (val === 'cancelled' || val === 'canceled' || val.includes('لغو')) return 'danger';
+  }
+
+  if (props.type === 'contact') {
+    if (val === 'new') return 'info';
+    if (val === 'seen') return 'secondary';
+    if (val === 'call_later') return 'warning';
+    if (val === 'contacted') return 'success';
+    if (val === 'closed') return 'contrast';
+  }
+
+  if (props.type === 'notification') {
+    if (val === 'success' || val === 'delivered' || val === 'sent' || val === 'تحویل شده' || val === 'ارسال‌شده') return 'success';
+    if (val === 'pending' || val === 'retrying' || val === 'در حال تلاش مجدد' || val === 'در انتظار') return 'warning';
+    if (val === 'failed' || val === 'ناموفق') return 'danger';
+  }
+
+  if (val === 'true' || val === 'active' || val === 'فعال') return 'success';
+  if (val === 'false' || val === 'inactive' || val === 'غیرفعال') return 'danger';
+
+  return 'info';
+});
+
+const label = computed(() => {
+  const raw = String(props.status);
+  const val = raw.toLowerCase();
+
+  if (props.type === 'session') return SESSION_LABELS[val] || SESSION_LABELS[raw] || raw;
+  if (props.type === 'contact') return CONTACT_LABELS[val] || raw;
+  if (props.type === 'notification') return NOTIFICATION_LABELS[val] || raw;
+  if (props.type === 'payment') return PAYMENT_LABELS[val] || raw;
+
+  if (val === 'true' || val === 'active') return 'فعال';
+  if (val === 'false' || val === 'inactive') return 'غیرفعال';
+  return raw;
+});
+</script>
diff --git a/src/components/common/TableSkeleton.vue b/src/components/common/TableSkeleton.vue
new file mode 100644
index 0000000..3ef29b3
--- /dev/null
+++ b/src/components/common/TableSkeleton.vue
@@ -0,0 +1,32 @@
+<!-- Reusable table skeleton placeholder -->
+<template>
+  <div class="table-skeleton" aria-busy="true" aria-live="polite">
+    <div class="flex gap-2 mb-3 pb-2 border-bottom-1 border-color">
+      <Skeleton
+        v-for="col in columns"
+        :key="`h-${col}`"
+        height="0.85rem"
+        :width="widths[(col - 1) % widths.length]"
+      />
+    </div>
+    <div v-for="row in rows" :key="`r-${row}`" class="flex align-items-center gap-2 mb-2">
+      <Skeleton
+        v-for="col in columns"
+        :key="`c-${row}-${col}`"
+        height="1.35rem"
+        :width="widths[(col - 1) % widths.length]"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Skeleton from 'primevue/skeleton';
+
+defineProps({
+  rows: { type: Number, default: 6 },
+  columns: { type: Number, default: 5 }
+});
+
+const widths = ['18%', '22%', '16%', '20%', '14%', '12%', '10%', '15%'];
+</script>
diff --git a/src/components/layout/AppBreadcrumb.vue b/src/components/layout/AppBreadcrumb.vue
new file mode 100644
index 0000000..d18d239
--- /dev/null
+++ b/src/components/layout/AppBreadcrumb.vue
@@ -0,0 +1,41 @@
+<!-- /src/components/layout/AppBreadcrumb.vue -->
+<template>
+  <div v-if="items && items.length > 0" class="app-breadcrumb mb-3">
+    <Breadcrumb :home="home" :model="items">
+      <template #item="{ item }">
+        <router-link v-if="item.to" :to="item.to" class="text-color hover:text-primary font-medium text-sm">
+          {{ item.label }}
+        </router-link>
+        <span v-else class="text-muted font-normal text-sm">{{ item.label }}</span>
+      </template>
+    </Breadcrumb>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import Breadcrumb from 'primevue/breadcrumb';
+
+const route = useRoute();
+
+const home = { icon: 'pi pi-home', to: '/' };
+
+const items = computed(() => {
+  const matched = route.matched.filter(m => m.meta && m.meta.title && m.path !== '/');
+  return matched.map(m => ({
+    label: m.meta.title,
+    to: m.path === route.path ? null : m.path
+  }));
+});
+</script>
+
+<style scoped lang="scss">
+.app-breadcrumb {
+  :deep(.p-breadcrumb) {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+}
+</style>
diff --git a/src/components/layout/AppLayout.vue b/src/components/layout/AppLayout.vue
new file mode 100644
index 0000000..2fb878c
--- /dev/null
+++ b/src/components/layout/AppLayout.vue
@@ -0,0 +1,8 @@
+<!-- /src/components/layout/AppLayout.vue -->
+<template>
+  <DashboardLayout />
+</template>
+
+<script setup>
+import DashboardLayout from '@/layouts/DashboardLayout.vue';
+</script>
diff --git a/src/components/layout/AppSidebar.vue b/src/components/layout/AppSidebar.vue
new file mode 100644
index 0000000..e6fbf60
--- /dev/null
+++ b/src/components/layout/AppSidebar.vue
@@ -0,0 +1,69 @@
+<!-- /src/components/layout/AppSidebar.vue -->
+<template>
+  <div class="app-sidebar p-3 surface-card border-left-1 border-color flex flex-column h-full">
+    <div class="logo flex align-items-center gap-3 px-2 py-3 mb-3 border-bottom-1 border-color">
+      <i class="pi pi-graduation-cap text-primary text-3xl"></i>
+      <span class="font-bold text-xl text-color">گام نو</span>
+    </div>
+
+    <div class="menu-list flex-grow-1 overflow-y-auto">
+      <router-link
+        v-for="item in menuItems"
+        :key="item.to"
+        :to="item.to"
+        class="menu-item flex align-items-center gap-3 px-3 py-2 border-round text-color mb-1 transition-colors"
+        :class="{ 'active-item': isMenuActive(item.to) }"
+      >
+        <i :class="item.icon" class="text-lg"></i>
+        <span class="font-medium text-sm">{{ item.label }}</span>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const menuItems = [
+  { label: 'داشبورد اصلی', icon: 'pi pi-home', to: '/' },
+  { label: 'مدیریت کاربران', icon: 'pi pi-users', to: '/users' },
+  { label: 'مدیریت اساتید', icon: 'pi pi-id-card', to: '/professors' },
+  { label: 'دوره‌های آموزشی', icon: 'pi pi-book', to: '/courses' },
+  { label: 'کلاس‌ها', icon: 'pi pi-desktop', to: '/classes' },
+  { label: 'جلسات آموزشی', icon: 'pi pi-calendar', to: '/sessions' },
+  { label: 'امور مالی و پرداخت‌ها', icon: 'pi pi-wallet', to: '/payments' },
+  { label: 'اطلاعیه‌ها', icon: 'pi pi-bell', to: '/notifications' },
+  { label: 'درخواست‌های تماس', icon: 'pi pi-comments', to: '/contact-inquiries' },
+  { label: 'گزارش فعالیت‌ها', icon: 'pi pi-history', to: '/logs' },
+  { label: 'نقش‌ها و دسترسی‌ها', icon: 'pi pi-shield', to: '/roles' }
+];
+
+function isMenuActive(to) {
+  if (to === '/') {
+    return route.path === '/';
+  }
+  return route.path === to || route.path.startsWith(`${to}/`);
+}
+</script>
+
+<style lang="scss" scoped>
+.app-sidebar {
+  width: 240px;
+  min-height: 100vh;
+}
+.menu-item {
+  color: var(--text-secondary);
+  text-decoration: none;
+  &:hover {
+    background-color: var(--surface-hover);
+    color: var(--text-primary);
+  }
+  &.active-item {
+    background-color: var(--primary-color-light);
+    color: var(--primary-color);
+    font-weight: 700;
+  }
+}
+</style>
diff --git a/src/components/layout/AppTopbar.vue b/src/components/layout/AppTopbar.vue
new file mode 100644
index 0000000..48aeb8b
--- /dev/null
+++ b/src/components/layout/AppTopbar.vue
@@ -0,0 +1,166 @@
+<!-- /src/components/layout/AppTopbar.vue -->
+<template>
+  <header class="app-topbar flex align-items-center justify-content-between px-4 py-2 surface-card border-bottom-1 border-color">
+    <div class="flex align-items-center gap-3">
+      <Button
+        icon="pi pi-bars"
+        text
+        rounded
+        class="lg:hidden"
+        @click="uiStore.toggleMobileSidebar"
+      />
+      <Button
+        icon="pi pi-bars"
+        text
+        rounded
+        class="hidden lg:flex"
+        @click="uiStore.toggleSidebar"
+      />
+      <div class="flex align-items-center gap-2 font-bold text-xl text-primary">
+        <i class="pi pi-building text-2xl"></i>
+        <span>{{ $t('app.title') }}</span>
+      </div>
+    </div>
+
+    <div class="flex align-items-center gap-3">
+      <!-- Dark/Light Theme Toggle -->
+      <Button
+        :icon="themeStore.isDarkMode ? 'pi pi-sun' : 'pi pi-moon'"
+        text
+        rounded
+        :aria-label="themeStore.isDarkMode ? $t('app.lightMode') : $t('app.darkMode')"
+        v-tooltip.bottom="themeStore.isDarkMode ? $t('app.lightMode') : $t('app.darkMode')"
+        @click="themeStore.toggleTheme"
+      />
+
+      <!-- Notifications Icon -->
+      <button
+        type="button"
+        class="notification-trigger"
+        :aria-label="$t('navigation.notifications')"
+        v-tooltip.bottom="$t('navigation.notifications')"
+        @click="$router.push('/notifications')"
+      >
+        <i class="pi pi-bell"></i>
+        <span v-if="notificationCount > 0" class="notification-badge">{{ notificationCount }}</span>
+      </button>
+
+      <!-- User Menu -->
+      <div class="flex align-items-center gap-2">
+        <Avatar
+          icon="pi pi-user"
+          shape="circle"
+          class="bg-primary text-white cursor-pointer"
+          @click="toggleUserMenu"
+        />
+        <span class="font-medium hidden sm:inline text-color cursor-pointer" @click="toggleUserMenu">
+          {{ authStore.user?.name || authStore.user?.username || 'کاربر سیستم' }}
+        </span>
+        <Menu ref="userMenu" :model="menuItems" :popup="true" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useAuthStore } from '@/stores/authStore';
+import { useThemeStore } from '@/stores/themeStore';
+import { useUiStore } from '@/stores/uiStore';
+import { useI18n } from 'vue-i18n';
+import Button from 'primevue/button';
+import Avatar from 'primevue/avatar';
+import Menu from 'primevue/menu';
+
+const authStore = useAuthStore();
+const themeStore = useThemeStore();
+const uiStore = useUiStore();
+const router = useRouter();
+const { t } = useI18n();
+
+const userMenu = ref(null);
+const notificationCount = ref(3);
+
+const toggleUserMenu = (event) => {
+  userMenu.value.toggle(event);
+};
+
+const menuItems = ref([
+  {
+    label: authStore.user?.name || authStore.user?.username || 'کاربر',
+    items: [
+      {
+        label: t('app.profile'),
+        icon: 'pi pi-user',
+        command: () => {
+          const id = authStore.user?._id || authStore.user?.id;
+          if (id) {
+            router.push(`/users/edit/${id}`);
+          }
+        }
+      },
+      {
+        label: t('app.logout'),
+        icon: 'pi pi-sign-out',
+        command: async () => {
+          await authStore.logout();
+          router.push('/login');
+        }
+      }
+    ]
+  }
+]);
+</script>
+
+<style scoped lang="scss">
+.app-topbar {
+  height: 60px;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}
+
+.notification-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--primary-color);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--primary-color-light);
+  }
+
+  .pi-bell {
+    font-size: 1.15rem;
+    line-height: 1;
+  }
+}
+
+.notification-badge {
+  position: absolute;
+  top: 0.2rem;
+  inset-inline-end: 0.15rem;
+  min-width: 1.05rem;
+  height: 1.05rem;
+  padding: 0 0.25rem;
+  border-radius: 999px;
+  background: #ef4444;
+  color: #fff;
+  font-size: 0.65rem;
+  font-weight: 700;
+  line-height: 1.05rem;
+  text-align: center;
+  box-shadow: 0 0 0 2px var(--surface-card, #1e293b);
+  pointer-events: none;
+}
+</style>
diff --git a/src/components/uploader/CertificateUploader.vue b/src/components/uploader/CertificateUploader.vue
new file mode 100644
index 0000000..4ca9095
--- /dev/null
+++ b/src/components/uploader/CertificateUploader.vue
@@ -0,0 +1,37 @@
+<!-- /src/components/uploader/CertificateUploader.vue -->
+<template>
+  <div class="certificate-uploader">
+    <ImageManager
+      v-model="certificates"
+      upload-endpoint="/certificates/user/upload"
+      delete-endpoint="/files/admin/delete"
+      :max-files="1"
+      :allow-multiple="false"
+      gallery-id="certificate-gallery"
+      @upload-success="onCertificateUploaded"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import ImageManager from './ImageManager.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'uploaded']);
+
+const certificates = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
+
+const onCertificateUploaded = (fileData) => {
+  emit('uploaded', fileData);
+};
+</script>
diff --git a/src/components/uploader/ImageManager.vue b/src/components/uploader/ImageManager.vue
new file mode 100644
index 0000000..1ade362
--- /dev/null
+++ b/src/components/uploader/ImageManager.vue
@@ -0,0 +1,198 @@
+<!-- /src/components/uploader/ImageManager.vue -->
+<template>
+  <div class="image-manager">
+    <!-- FilePond Upload Input -->
+    <file-pond
+      ref="pond"
+      name="file"
+      :label-idle="labelIdle"
+      :allow-multiple="allowMultiple"
+      :max-files="maxFiles"
+      accepted-file-types="image/jpeg, image/png, image/webp, application/pdf"
+      :server="serverOptions"
+      @processfile="handleProcessFile"
+      @removefile="handleRemoveFile"
+    />
+
+    <!-- Gallery Lightbox Preview Grid -->
+    <div v-if="imagesList && imagesList.length > 0" class="gallery-grid grid mt-3" :id="galleryId">
+      <div
+        v-for="(img, index) in imagesList"
+        :key="img.url || index"
+        class="col-12 sm:col-6 md:col-4 lg:col-3"
+      >
+        <div class="gallery-card surface-card border-1 border-color border-round overflow-hidden relative group">
+          <a
+            :href="img.url"
+            :data-pswp-width="img.width || 1200"
+            :data-pswp-height="img.height || 800"
+            target="_blank"
+            class="block overflow-hidden"
+          >
+            <img :src="img.url" :alt="img.name || 'تصویر'" class="w-full h-10rem object-cover block transition-transform transition-duration-200 hover:scale-105" />
+          </a>
+          <div class="p-2 flex align-items-center justify-content-between border-top-1 border-color">
+            <span class="text-xs text-muted truncate max-w-8rem">{{ img.name || `فایل ${index + 1}` }}</span>
+            <Button
+              icon="pi pi-trash"
+              severity="danger"
+              text
+              rounded
+              size="small"
+              @click="removeGalleryImage(index)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import vueFilePond from 'vue-filepond';
+import 'filepond/dist/filepond.min.css';
+import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
+import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
+import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+import 'photoswipe/style.css';
+
+import { useAuthStore } from '@/stores/authStore';
+import Button from 'primevue/button';
+
+const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  uploadEndpoint: {
+    type: String,
+    default: '/files/admin/upload-temp'
+  },
+  deleteEndpoint: {
+    type: String,
+    default: '/files/admin/delete'
+  },
+  maxFiles: {
+    type: Number,
+    default: 5
+  },
+  allowMultiple: {
+    type: Boolean,
+    default: true
+  },
+  galleryId: {
+    type: String,
+    default: 'pswp-gallery'
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'upload-success']);
+
+const authStore = useAuthStore();
+const pond = ref(null);
+let lightbox = null;
+
+const labelIdle = 'کشیدن و رها کردن فایل یا <span class="filepond--label-action">مرور سیستم</span>';
+
+const imagesList = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000/api';
+
+const serverOptions = computed(() => ({
+  url: API_BASE_URL,
+  process: {
+    url: props.uploadEndpoint,
+    headers: {
+      Authorization: `Bearer ${authStore.accessToken}`
+    },
+    onload: (response) => {
+      try {
+        const res = typeof response === 'string' ? JSON.parse(response) : response;
+        const fileData = res.data || res;
+        return fileData.tempFileName || fileData.filename || fileData.url || JSON.stringify(fileData);
+      } catch (e) {
+        return response;
+      }
+    }
+  },
+  revert: {
+    url: props.deleteEndpoint,
+    headers: {
+      Authorization: `Bearer ${authStore.accessToken}`
+    }
+  }
+}));
+
+const handleProcessFile = (error, file) => {
+  if (!error) {
+    let serverRes = file.serverId;
+    let url = '';
+    let tempFileName = '';
+    try {
+      const parsed = JSON.parse(serverRes);
+      url = parsed.url || parsed.publicUrl || '';
+      tempFileName = parsed.tempFileName || parsed.filename || '';
+    } catch (e) {
+      tempFileName = serverRes;
+      url = `${API_BASE_URL}/files/admin/signed-url/${serverRes}`;
+    }
+
+    const newItem = {
+      name: file.filename,
+      tempFileName: tempFileName || file.filename,
+      url: url || `${API_BASE_URL}/files/admin/signed-url/${tempFileName}`,
+      width: 1200,
+      height: 800
+    };
+
+    const updated = [...imagesList.value, newItem];
+    emit('update:modelValue', updated);
+    emit('upload-success', newItem);
+  }
+};
+
+const handleRemoveFile = (error, file) => {
+  // handled via gallery card actions or filepond
+};
+
+const removeGalleryImage = (index) => {
+  const updated = [...imagesList.value];
+  updated.splice(index, 1);
+  emit('update:modelValue', updated);
+};
+
+onMounted(() => {
+  lightbox = new PhotoSwipeLightbox({
+    gallery: `#${props.galleryId}`,
+    children: 'a',
+    pswpModule: () => import('photoswipe')
+  });
+  lightbox.init();
+});
+
+onUnmounted(() => {
+  if (lightbox) {
+    lightbox.destroy();
+    lightbox = null;
+  }
+});
+</script>
+
+<style lang="scss">
+.image-manager {
+  .filepond--panel-root {
+    background-color: var(--surface-card);
+    border: 1px dashed var(--border-color);
+  }
+  .filepond--drop-label {
+    color: var(--text-secondary);
+  }
+}
+</style>
diff --git a/src/composables/useDataTable.js b/src/composables/useDataTable.js
new file mode 100644
index 0000000..f8cf68c
--- /dev/null
+++ b/src/composables/useDataTable.js
@@ -0,0 +1,163 @@
+// /src/composables/useDataTable.js
+import { ref, reactive } from 'vue';
+
+export function useDataTable(fetchApiFn, defaultParams = {}) {
+  const items = ref([]);
+  const totalCount = ref(0);
+  const totalPages = ref(1);
+  const isLoading = ref(false);
+
+  const queryParams = reactive({
+    page: 1,
+    limit: 20,
+    sortBy: 'createdAt',
+    sortOrder: 'desc',
+    q: '',
+    ...defaultParams
+  });
+
+  let searchTimeout = null;
+  let requestSeq = 0;
+
+  async function loadData() {
+    const seq = ++requestSeq;
+    isLoading.value = true;
+    try {
+      const cleanParams = {};
+      Object.keys(queryParams).forEach((key) => {
+        if (queryParams[key] !== '' && queryParams[key] !== null && queryParams[key] !== undefined) {
+          cleanParams[key] = queryParams[key];
+        }
+      });
+
+      const response = await fetchApiFn(cleanParams);
+      if (seq !== requestSeq) return;
+
+      // listResponse shape: { success, data: [], meta }
+      const body = response && typeof response === 'object' ? response : {};
+      const data = Array.isArray(body.data) ? body : (body.data || body);
+
+      if (Array.isArray(data)) {
+        items.value = data;
+        totalCount.value = data.length;
+        totalPages.value = 1;
+      } else if (Array.isArray(data.data)) {
+        items.value = data.data;
+        totalCount.value = data.meta?.totalCount ?? data.data.length;
+        totalPages.value = data.meta?.totalPages ?? Math.ceil(totalCount.value / queryParams.limit) ?? 1;
+      } else if (
+        data.items ||
+        data.docs ||
+        data.users ||
+        data.courses ||
+        data.sessions ||
+        data.payments ||
+        data.roles ||
+        data.notifications ||
+        data.certificates ||
+        data.professors ||
+        data.logs ||
+        data.activityLogs
+      ) {
+        items.value =
+          data.items ||
+          data.docs ||
+          data.users ||
+          data.courses ||
+          data.sessions ||
+          data.payments ||
+          data.roles ||
+          data.notifications ||
+          data.certificates ||
+          data.professors ||
+          data.logs ||
+          data.activityLogs ||
+          [];
+        totalCount.value = data.meta?.totalCount ?? data.total ?? items.value.length;
+        totalPages.value = data.meta?.totalPages ?? Math.ceil(totalCount.value / queryParams.limit) ?? 1;
+      } else {
+        items.value = [];
+        totalCount.value = 0;
+        totalPages.value = 1;
+      }
+    } catch (error) {
+      if (seq !== requestSeq) return;
+      console.error('Error fetching datatable data:', error);
+      items.value = [];
+      totalCount.value = 0;
+    } finally {
+      if (seq === requestSeq) {
+        isLoading.value = false;
+      }
+    }
+  }
+
+  function onPageChange(event = {}) {
+    // DataTableWrapper emits { page (1-based), limit }
+    // Raw PrimeVue Paginator emits { page (0-based), rows }
+    if (event.limit != null) {
+      queryParams.page = Number(event.page) || 1;
+      queryParams.limit = Number(event.limit) || queryParams.limit;
+    } else if (event.rows != null) {
+      queryParams.page = (Number(event.page) || 0) + 1;
+      queryParams.limit = Number(event.rows) || queryParams.limit;
+    } else if (event.page != null) {
+      queryParams.page = Number(event.page) || 1;
+    }
+    loadData();
+  }
+
+  function onSort(event = {}) {
+    // DataTableWrapper emits { sortBy, sortOrder: 'asc'|'desc' }
+    // Raw PrimeVue emits { sortField, sortOrder: 1|-1 }
+    const field = event.sortBy || event.sortField;
+    if (!field) return;
+
+    queryParams.sortBy = field;
+    if (event.sortOrder === 'asc' || event.sortOrder === 'desc') {
+      queryParams.sortOrder = event.sortOrder;
+    } else {
+      queryParams.sortOrder = event.sortOrder === 1 ? 'asc' : 'desc';
+    }
+    loadData();
+  }
+
+  function onSearch(value) {
+    queryParams.q = value;
+    queryParams.page = 1;
+    if (searchTimeout) clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+      loadData();
+    }, 400);
+  }
+
+  function setFilter(key, value) {
+    queryParams[key] = value;
+    queryParams.page = 1;
+    loadData();
+  }
+
+  function resetFilters() {
+    Object.keys(defaultParams).forEach((k) => {
+      queryParams[k] = defaultParams[k];
+    });
+    queryParams.page = 1;
+    queryParams.limit = defaultParams.limit ?? 20;
+    queryParams.q = '';
+    loadData();
+  }
+
+  return {
+    items,
+    totalCount,
+    totalPages,
+    isLoading,
+    queryParams,
+    loadData,
+    onPageChange,
+    onSort,
+    onSearch,
+    setFilter,
+    resetFilters
+  };
+}
diff --git a/src/composables/usePermission.js b/src/composables/usePermission.js
new file mode 100644
index 0000000..0b5b5b4
--- /dev/null
+++ b/src/composables/usePermission.js
@@ -0,0 +1,20 @@
+// /src/composables/usePermission.js
+import { usePermissionStore } from '@/stores/permissionStore';
+
+export function usePermission() {
+  const permissionStore = usePermissionStore();
+
+  const hasPermission = (perm) => {
+    return permissionStore.hasPermission(perm);
+  };
+
+  const hasAnyPermission = (permsArray) => {
+    return permissionStore.hasAnyPermission(permsArray);
+  };
+
+  return {
+    hasPermission,
+    hasAnyPermission,
+    roleName: permissionStore.roleName
+  };
+}
diff --git a/src/composables/usePersianDate.js b/src/composables/usePersianDate.js
new file mode 100644
index 0000000..de1cc4a
--- /dev/null
+++ b/src/composables/usePersianDate.js
@@ -0,0 +1,52 @@
+// /src/composables/usePersianDate.js
+import moment from 'jalali-moment';
+
+export function usePersianDate() {
+  const toPersianDigits = (num) => {
+    if (num === null || num === undefined) return '';
+    const str = String(num);
+    const farsiDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
+    return str.replace(/\d/g, (x) => farsiDigits[parseInt(x)]);
+  };
+
+  const toLatinDigits = (str) => {
+    if (!str) return '';
+    const farsiDigits = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g];
+    let result = String(str);
+    for (let i = 0; i < 10; i++) {
+      result = result.replace(farsiDigits[i], String(i));
+    }
+    return result;
+  };
+
+  const formatJalali = (date, formatStr = 'YYYY/MM/DD') => {
+    if (!date) return '-';
+    try {
+      return moment(date).locale('fa').format(formatStr);
+    } catch (e) {
+      return '-';
+    }
+  };
+
+  const formatJalaliWithTime = (date) => {
+    return formatJalali(date, 'YYYY/MM/DD - HH:mm');
+  };
+
+  const jalaliToIso = (jalaliStr) => {
+    if (!jalaliStr) return null;
+    try {
+      const latinStr = toLatinDigits(jalaliStr);
+      return moment(latinStr, 'jYYYY/jMM/jDD').toISOString();
+    } catch (e) {
+      return null;
+    }
+  };
+
+  return {
+    toPersianDigits,
+    toLatinDigits,
+    formatJalali,
+    formatJalaliWithTime,
+    jalaliToIso
+  };
+}
diff --git a/src/composables/useToast.js b/src/composables/useToast.js
new file mode 100644
index 0000000..f36c57e
--- /dev/null
+++ b/src/composables/useToast.js
@@ -0,0 +1,31 @@
+// /src/composables/useToast.js
+import { useToast as usePrimeToast } from 'primevue/usetoast';
+import { getApiErrorMessage } from '@/utils/apiError';
+
+export function useToast() {
+  const toast = usePrimeToast();
+
+  const showSuccess = (detail, summary = 'موفقیت‌آمیز') => {
+    toast.add({ severity: 'success', summary, detail, life: 4000 });
+  };
+
+  const showError = (detail, summary = 'خطا') => {
+    const message = getApiErrorMessage(detail);
+    toast.add({ severity: 'error', summary, detail: message, life: 6000 });
+  };
+
+  const showInfo = (detail, summary = 'اطلاعیه') => {
+    toast.add({ severity: 'info', summary, detail, life: 4000 });
+  };
+
+  const showWarn = (detail, summary = 'هشدار') => {
+    toast.add({ severity: 'warn', summary, detail, life: 4000 });
+  };
+
+  return {
+    showSuccess,
+    showError,
+    showInfo,
+    showWarn
+  };
+}
diff --git a/src/constants/permissions.js b/src/constants/permissions.js
new file mode 100644
index 0000000..8028696
--- /dev/null
+++ b/src/constants/permissions.js
@@ -0,0 +1,217 @@
+// /src/constants/permissions.js
+// Mirrors the backend constants/permissions.js
+
+export const PERMISSIONS = {
+  USERS_CREATE: 'users:create',
+  USERS_READ: 'users:read',
+  USERS_UPDATE: 'users:update',
+  USERS_DELETE: 'users:delete',
+  USERS_SEARCH: 'users:search',
+  USERS_ENROLL: 'users:enroll',
+
+  PROFESSORS_CREATE: 'professors:create',
+  PROFESSORS_READ: 'professors:read',
+  PROFESSORS_UPDATE: 'professors:update',
+  PROFESSORS_DELETE: 'professors:delete',
+  PROFESSORS_SEARCH: 'professors:search',
+
+  COURSES_CREATE: 'courses:create',
+  COURSES_READ: 'courses:read',
+  COURSES_UPDATE: 'courses:update',
+  COURSES_DELETE: 'courses:delete',
+  COURSES_SEARCH: 'courses:search',
+
+  CLASSES_CREATE: 'classes:create',
+  CLASSES_READ: 'classes:read',
+  CLASSES_UPDATE: 'classes:update',
+  CLASSES_DELETE: 'classes:delete',
+  CLASSES_SEARCH: 'classes:search',
+  CLASSES_REGISTER_USERS: 'classes:register_users',
+
+  SESSIONS_CREATE: 'sessions:create',
+  SESSIONS_READ: 'sessions:read',
+  SESSIONS_UPDATE: 'sessions:update',
+  SESSIONS_DELETE: 'sessions:delete',
+  SESSIONS_SEARCH: 'sessions:search',
+  SESSIONS_ATTENDANCE: 'sessions:attendance',
+
+  PAYMENTS_CREATE: 'payments:create',
+  PAYMENTS_READ: 'payments:read',
+  PAYMENTS_UPDATE: 'payments:update',
+  PAYMENTS_DELETE: 'payments:delete',
+  PAYMENTS_SEARCH: 'payments:search',
+
+  ROLES_CREATE: 'roles:create',
+  ROLES_READ: 'roles:read',
+  ROLES_UPDATE: 'roles:update',
+  ROLES_DELETE: 'roles:delete',
+  ROLES_SEARCH: 'roles:search',
+
+  NOTIFICATIONS_CREATE: 'notifications:create',
+  NOTIFICATIONS_READ: 'notifications:read',
+  NOTIFICATIONS_UPDATE: 'notifications:update',
+  NOTIFICATIONS_DELETE: 'notifications:delete',
+  NOTIFICATIONS_SEARCH: 'notifications:search',
+  NOTIFICATIONS_RETRY: 'notifications:retry',
+
+  CERTIFICATES_CREATE: 'certificates:create',
+  CERTIFICATES_READ: 'certificates:read',
+  CERTIFICATES_UPDATE: 'certificates:update',
+  CERTIFICATES_DELETE: 'certificates:delete',
+  CERTIFICATES_SEARCH: 'certificates:search',
+
+  FILES_UPLOAD: 'files:upload',
+  FILES_READ: 'files:read',
+  FILES_DELETE: 'files:delete',
+
+  LOGS_READ: 'logs:read',
+  LOGS_SEARCH: 'logs:search',
+
+  CONTACT_INQUIRIES_READ: 'contact_inquiries:read',
+  CONTACT_INQUIRIES_UPDATE: 'contact_inquiries:update'
+};
+
+export const PERMISSION_GROUPS = [
+  {
+    key: 'users',
+    label: 'مدیریت کاربران',
+    icon: 'pi pi-users',
+    permissions: [
+      { key: PERMISSIONS.USERS_CREATE, label: 'ایجاد کاربر' },
+      { key: PERMISSIONS.USERS_READ, label: 'مشاهده کاربران' },
+      { key: PERMISSIONS.USERS_UPDATE, label: 'ویرایش کاربر' },
+      { key: PERMISSIONS.USERS_DELETE, label: 'حذف کاربر' },
+      { key: PERMISSIONS.USERS_SEARCH, label: 'جستجوی کاربران' },
+      { key: PERMISSIONS.USERS_ENROLL, label: 'ثبت‌نام کاربر در دوره' }
+    ]
+  },
+  {
+    key: 'professors',
+    label: 'مدیریت اساتید',
+    icon: 'pi pi-id-card',
+    permissions: [
+      { key: PERMISSIONS.PROFESSORS_CREATE, label: 'ایجاد استاد' },
+      { key: PERMISSIONS.PROFESSORS_READ, label: 'مشاهده اساتید' },
+      { key: PERMISSIONS.PROFESSORS_UPDATE, label: 'ویرایش استاد' },
+      { key: PERMISSIONS.PROFESSORS_DELETE, label: 'حذف استاد' },
+      { key: PERMISSIONS.PROFESSORS_SEARCH, label: 'جستجوی اساتید' }
+    ]
+  },
+  {
+    key: 'courses',
+    label: 'دوره‌های آموزشی',
+    icon: 'pi pi-book',
+    permissions: [
+      { key: PERMISSIONS.COURSES_CREATE, label: 'ایجاد دوره' },
+      { key: PERMISSIONS.COURSES_READ, label: 'مشاهده دوره‌ها' },
+      { key: PERMISSIONS.COURSES_UPDATE, label: 'ویرایش دوره' },
+      { key: PERMISSIONS.COURSES_DELETE, label: 'حذف دوره' },
+      { key: PERMISSIONS.COURSES_SEARCH, label: 'جستجوی دوره‌ها' }
+    ]
+  },
+  {
+    key: 'classes',
+    label: 'کلاس‌ها',
+    icon: 'pi pi-desktop',
+    permissions: [
+      { key: PERMISSIONS.CLASSES_CREATE, label: 'ایجاد کلاس' },
+      { key: PERMISSIONS.CLASSES_READ, label: 'مشاهده کلاس‌ها' },
+      { key: PERMISSIONS.CLASSES_UPDATE, label: 'ویرایش کلاس' },
+      { key: PERMISSIONS.CLASSES_DELETE, label: 'حذف کلاس' },
+      { key: PERMISSIONS.CLASSES_SEARCH, label: 'جستجوی کلاس‌ها' },
+      { key: PERMISSIONS.CLASSES_REGISTER_USERS, label: 'ثبت‌نام کاربران در کلاس' }
+    ]
+  },
+  {
+    key: 'sessions',
+    label: 'جلسات آموزشی',
+    icon: 'pi pi-calendar',
+    permissions: [
+      { key: PERMISSIONS.SESSIONS_CREATE, label: 'ایجاد جلسه' },
+      { key: PERMISSIONS.SESSIONS_READ, label: 'مشاهده جلسات' },
+      { key: PERMISSIONS.SESSIONS_UPDATE, label: 'ویرایش جلسه' },
+      { key: PERMISSIONS.SESSIONS_DELETE, label: 'حذف جلسه' },
+      { key: PERMISSIONS.SESSIONS_SEARCH, label: 'جستجوی جلسات' },
+      { key: PERMISSIONS.SESSIONS_ATTENDANCE, label: 'ثبت حضور و غیاب' }
+    ]
+  },
+  {
+    key: 'payments',
+    label: 'امور مالی و پرداخت‌ها',
+    icon: 'pi pi-wallet',
+    permissions: [
+      { key: PERMISSIONS.PAYMENTS_CREATE, label: 'ایجاد صورتحساب' },
+      { key: PERMISSIONS.PAYMENTS_READ, label: 'مشاهده پرداخت‌ها' },
+      { key: PERMISSIONS.PAYMENTS_UPDATE, label: 'ویرایش / ثبت تراکنش' },
+      { key: PERMISSIONS.PAYMENTS_DELETE, label: 'حذف صورتحساب' },
+      { key: PERMISSIONS.PAYMENTS_SEARCH, label: 'جستجوی پرداخت‌ها' }
+    ]
+  },
+  {
+    key: 'roles',
+    label: 'نقش‌ها و دسترسی‌ها',
+    icon: 'pi pi-shield',
+    permissions: [
+      { key: PERMISSIONS.ROLES_CREATE, label: 'ایجاد نقش' },
+      { key: PERMISSIONS.ROLES_READ, label: 'مشاهده نقش‌ها' },
+      { key: PERMISSIONS.ROLES_UPDATE, label: 'ویرایش نقش' },
+      { key: PERMISSIONS.ROLES_DELETE, label: 'حذف نقش' },
+      { key: PERMISSIONS.ROLES_SEARCH, label: 'جستجوی نقش‌ها' }
+    ]
+  },
+  {
+    key: 'notifications',
+    label: 'اطلاعیه‌ها و پیام‌رسانی',
+    icon: 'pi pi-bell',
+    permissions: [
+      { key: PERMISSIONS.NOTIFICATIONS_CREATE, label: 'ارسال اطلاعیه' },
+      { key: PERMISSIONS.NOTIFICATIONS_READ, label: 'مشاهده اطلاعیه‌ها' },
+      { key: PERMISSIONS.NOTIFICATIONS_UPDATE, label: 'ویرایش اطلاعیه' },
+      { key: PERMISSIONS.NOTIFICATIONS_DELETE, label: 'حذف اطلاعیه' },
+      { key: PERMISSIONS.NOTIFICATIONS_SEARCH, label: 'جستجوی اطلاعیه‌ها' },
+      { key: PERMISSIONS.NOTIFICATIONS_RETRY, label: 'ارسال مجدد اطلاعیه' }
+    ]
+  },
+  {
+    key: 'certificates',
+    label: 'گواهینامه‌ها',
+    icon: 'pi pi-verified',
+    permissions: [
+      { key: PERMISSIONS.CERTIFICATES_CREATE, label: 'صدور گواهینامه' },
+      { key: PERMISSIONS.CERTIFICATES_READ, label: 'مشاهده گواهینامه‌ها' },
+      { key: PERMISSIONS.CERTIFICATES_UPDATE, label: 'ویرایش گواهینامه' },
+      { key: PERMISSIONS.CERTIFICATES_DELETE, label: 'حذف گواهینامه' },
+      { key: PERMISSIONS.CERTIFICATES_SEARCH, label: 'جستجوی گواهینامه‌ها' }
+    ]
+  },
+  {
+    key: 'files',
+    label: 'مدیریت فایل‌ها',
+    icon: 'pi pi-folder',
+    permissions: [
+      { key: PERMISSIONS.FILES_UPLOAD, label: 'آپلود فایل' },
+      { key: PERMISSIONS.FILES_READ, label: 'مشاهده فایل‌ها' },
+      { key: PERMISSIONS.FILES_DELETE, label: 'حذف فایل' }
+    ]
+  },
+  {
+    key: 'logs',
+    label: 'گزارش فعالیت‌ها',
+    icon: 'pi pi-history',
+    permissions: [
+      { key: PERMISSIONS.LOGS_READ, label: 'مشاهده لاگ‌ها' },
+      { key: PERMISSIONS.LOGS_SEARCH, label: 'جستجوی لاگ‌ها' }
+    ]
+  },
+  {
+    key: 'contact_inquiries',
+    label: 'درخواست‌های تماس',
+    icon: 'pi pi-comments',
+    permissions: [
+      { key: PERMISSIONS.CONTACT_INQUIRIES_READ, label: 'مشاهده درخواست‌ها' },
+      { key: PERMISSIONS.CONTACT_INQUIRIES_UPDATE, label: 'ویرایش / پیگیری درخواست‌ها' }
+    ]
+  }
+];
+
+export const ALL_PERMISSIONS = Object.values(PERMISSIONS);
diff --git a/src/layouts/AuthLayout.vue b/src/layouts/AuthLayout.vue
new file mode 100644
index 0000000..e3fef87
--- /dev/null
+++ b/src/layouts/AuthLayout.vue
@@ -0,0 +1,26 @@
+<!-- /src/layouts/AuthLayout.vue -->
+<template>
+  <div class="auth-layout-wrapper">
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped lang="scss">
+.auth-layout-wrapper {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-height: 100vh !important;
+  width: 100vw !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+  background: var(--bg-primary);
+  margin: 0 !important;
+  padding: 1.5rem !important;
+  position: relative !important;
+}
+</style>
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
new file mode 100644
index 0000000..92483fe
--- /dev/null
+++ b/src/layouts/DashboardLayout.vue
@@ -0,0 +1,29 @@
+<!-- /src/layouts/DashboardLayout.vue -->
+<template>
+  <div class="dashboard-layout min-h-screen flex flex-column">
+    <AppTopbar />
+    <div class="layout-main-container flex flex-grow-1">
+      <AppSidebar />
+      <main class="layout-main flex-grow-1 p-4 overflow-x-hidden">
+        <AppBreadcrumb />
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import AppTopbar from '@/components/layout/AppTopbar.vue';
+import AppSidebar from '@/components/layout/AppSidebar.vue';
+import AppBreadcrumb from '@/components/layout/AppBreadcrumb.vue';
+</script>
+
+<style scoped lang="scss">
+.dashboard-layout {
+  background-color: var(--bg-primary);
+}
+
+.layout-main {
+  min-height: calc(100vh - 60px);
+}
+</style>
diff --git a/src/locales/fa.json b/src/locales/fa.json
new file mode 100644
index 0000000..d13eb3c
--- /dev/null
+++ b/src/locales/fa.json
@@ -0,0 +1,139 @@
+{
+  "app": {
+    "title": "داشبورد مدیریتی موسسه آموزشی",
+    "dashboard": "داشبورد",
+    "search": "جستجو...",
+    "save": "ذخیره",
+    "cancel": "انصراف",
+    "delete": "حذف",
+    "edit": "ویرایش",
+    "actions": "عملیات",
+    "status": "وضعیت",
+    "created": "تاریخ ایجاد",
+    "updated": "تاریخ بروزرسانی",
+    "loading": "در حال بارگذاری...",
+    "noData": "اطلاعاتی یافت نشد",
+    "profile": "پروفایل",
+    "logout": "خروج"
+  },
+  "auth": {
+    "loginTitle": "ورود به پنل مدیریتی",
+    "welcome": "خوش آمدید! اطلاعات حساب خود را وارد کنید",
+    "login": "ورود به سیستم",
+    "username": "نام کاربری",
+    "password": "رمز عبور",
+    "loginButton": "ورود به داشبورد",
+    "submit": "ورود",
+    "logout": "خروج",
+    "loginSuccess": "ورود با موفقیت انجام شد",
+    "loginError": "نام کاربری یا رمز عبور اشتباه است",
+    "loginFailed": "نام کاربری یا رمز عبور اشتباه است"
+  },
+  "navigation": {
+    "dashboard": "داشبورد اصلی",
+    "users": "مدیریت کاربران",
+    "professors": "مدیریت اساتید",
+    "courses": "دوره های آموزشی",
+    "classes": "کلاس ها",
+    "sessions": "جلسات آموزشی",
+    "payments": "امور مالی و پرداخت ها",
+    "roles": "نقش ها و دسترسی ها",
+    "notifications": "اطلاعیه ها",
+    "contactInquiries": "درخواست‌های تماس",
+    "certificates": "گواهی نامه ها",
+    "logs": "گزارش فعالیت‌ها"
+  },
+  "users": {
+    "title": "مدیریت کاربران",
+    "subtitle": "لیست و مدیریت تمام کاربران موسسه",
+    "addUser": "افزودن کاربر جدید",
+    "editUser": "ویرایش کاربر",
+    "name": "نام",
+    "surname": "نام خانوادگی",
+    "nationalId": "کد ملی",
+    "phone": "شماره همراه",
+    "email": "ایمیل",
+    "preferredMessenger": "پیام‌رسان ترجیحی",
+    "role": "نقش کاربر",
+    "status": "وضعیت حساب",
+    "tabInfo": "اطلاعات شخصی",
+    "tabCourses": "دوره‌های ثبت‌نامی",
+    "tabSessions": "حضور و غیاب",
+    "tabPayments": "پرداخت‌ها",
+    "tabCertificates": "گواهینامه‌ها"
+  },
+  "professors": {
+    "title": "مدیریت اساتید",
+    "subtitle": "لیست اساتید و مربیان موسسه",
+    "addProfessor": "افزودن استاد جدید",
+    "editProfessor": "ویرایش اطلاعات استاد",
+    "bio": "بیوگرافی / رزومه",
+    "expertise": "تخصص ها"
+  },
+  "courses": {
+    "title": "دوره‌های آموزشی",
+    "subtitle": "تعریف و مدیریت دوره‌های موسسه",
+    "addCourse": "افزودن دوره جدید",
+    "editCourse": "ویرایش دوره",
+    "courseTitle": "عنوان دوره",
+    "type": "نوع دوره",
+    "typeGeneral": "عمومی",
+    "typePrivate": "خصوصی",
+    "official": "دارای مدرک رسمی",
+    "unofficial": "بدون مدرک رسمی",
+    "price": "شهریه (تومان)",
+    "capacity": "ظرفیت",
+    "isOfficial": "دوره رسمی",
+    "description": "توضیحات دوره",
+    "professor": "استاد مدرس",
+    "sessionsTabTitle": "جلسات دوره",
+    "autoTab": "ایجاد خودکار جلسات",
+    "manualTab": "تعریف دستی جلسات",
+    "classesSectionTitle": "کلاس‌های این دوره",
+    "addClass": "تعریف کلاس جدید",
+    "sessionCount": "تعداد جلسات",
+    "startDate": "تاریخ شروع",
+    "startTime": "ساعت شروع",
+    "endTime": "ساعت پایان",
+    "daysOfWeek": "روزهای هفته"
+  },
+  "sessions": {
+    "title": "جلسات آموزشی",
+    "subtitle": "برنامه‌ریزی و مدیریت جلسات",
+    "addSession": "افزودن جلسه جدید",
+    "editSession": "ویرایش جلسه",
+    "date": "تاریخ جلسه",
+    "topic": "موضوع جلسه",
+    "attendance": "حضور و غیاب",
+    "enterAttendance": "ثبت حضور و غیاب"
+  },
+  "attendances": {
+    "title": "حضور و غیاب جلسه",
+    "submitAttendance": "ثبت حضور و غیاب"
+  },
+  "roles": {
+    "title": "نقش‌ها و دسترسی‌ها",
+    "subtitle": "مدیریت نقش‌های سیستمی و مجوزها",
+    "addRole": "افزودن نقش جدید",
+    "editRole": "ویرایش نقش",
+    "roleName": "نام نقش",
+    "systemRoleWarning": "نقش‌های سیستمی قابل حذف یا تغییر نام نیستند",
+    "permissionsTitle": "مجوزهای دسترسی",
+    "selectAll": "انتخاب همه"
+  },
+  "notifications": {
+    "title": "مدیریت اطلاعیه‌ها",
+    "subtitle": "ارسال پیامک و ایمیل گروهی",
+    "addNotification": "ارسال اطلاعیه جدید"
+  },
+  "logs": {
+    "title": "گزارش فعالیت کاربران",
+    "subtitle": "مشاهده و فیلتر تمام عملیات ایجاد، ویرایش، حذف و ورود کاربران"
+  },
+  "payments": {
+    "title": "امور مالی و پرداخت‌ها",
+    "subtitle": "مدیریت تراکنش‌ها و شهریه‌ها",
+    "addPayment": "ثبت پرداخت جدید",
+    "paymentDetail": "جزئیات صورتحساب"
+  }
+}
diff --git a/src/locales/i18n.js b/src/locales/i18n.js
new file mode 100644
index 0000000..62b7bec
--- /dev/null
+++ b/src/locales/i18n.js
@@ -0,0 +1,14 @@
+// /src/locales/i18n.js
+import { createI18n } from 'vue-i18n';
+import fa from './fa.json';
+
+export default function setupI18n() {
+  return createI18n({
+    legacy: false,
+    locale: 'fa',
+    fallbackLocale: 'fa',
+    messages: {
+      fa
+    }
+  });
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..5f2eb0e
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,48 @@
+// /src/main.js
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import createI18n from '@/locales/i18n';
+import router from '@/router';
+import App from '@/App.vue';
+
+// PrimeVue Core & Theme Preset
+import PrimeVue from 'primevue/config';
+import Aura from '@primevue/themes/aura';
+import ToastService from 'primevue/toastservice';
+import ConfirmationService from 'primevue/confirmationservice';
+import Tooltip from 'primevue/tooltip';
+
+// PrimeIcons & PrimeFlex Layout
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
+
+// RTL & Main Custom Styling
+import '@/assets/styles/main.scss';
+
+const app = createApp(App);
+
+const pinia = createPinia();
+app.use(pinia);
+
+const i18n = createI18n();
+app.use(i18n);
+
+app.use(router);
+
+app.use(PrimeVue, {
+  theme: {
+    preset: Aura,
+    options: {
+      darkModeSelector: '.dark-mode',
+      cssLayer: false
+    }
+  },
+  ripple: true
+});
+
+app.use(ToastService);
+app.use(ConfirmationService);
+
+app.directive('tooltip', Tooltip);
+
+app.mount('#app');
diff --git a/src/router/guards.js b/src/router/guards.js
new file mode 100644
index 0000000..5874050
--- /dev/null
+++ b/src/router/guards.js
@@ -0,0 +1,56 @@
+// /src/router/guards.js
+import { useAuthStore } from '@/stores/authStore';
+import { usePermissionStore } from '@/stores/permissionStore';
+
+function isPublicRoute(to) {
+  if (to.meta.public === true) return true;
+  if (to.meta.requiresAuth === false) return true;
+  return to.matched.some(
+    (record) => record.meta.public === true || record.meta.requiresAuth === false
+  );
+}
+
+export function setupGuards(router) {
+  router.beforeEach(async (to, from, next) => {
+    const authStore = useAuthStore();
+    const permissionStore = usePermissionStore();
+
+    // 1. Public / unauthenticated routes (e.g. Login)
+    if (isPublicRoute(to)) {
+      if (to.name === 'Login' && authStore.isAuthenticated) {
+        return next({ name: 'DashboardHome' });
+      }
+      return next();
+    }
+
+    // 2. Auth check
+    if (!authStore.isAuthenticated) {
+      if (to.name === 'Login') {
+        return next();
+      }
+      return next({ name: 'Login', query: { redirect: to.fullPath } });
+    }
+
+    // 3. Rehydrate permission store if token exists but permissions store is unpopulated
+    if (!permissionStore.isLoaded || permissionStore.permissions.length === 0) {
+      try {
+        await permissionStore.fetchPermissions();
+      } catch (err) {
+        console.error('Failed to rehydrate permissions, logging out:', err);
+        await authStore.logout();
+        return next({ name: 'Login' });
+      }
+    }
+
+    // 4. Permission check against stored permissions list
+    const requiredPermission = to.meta.permission;
+    if (requiredPermission) {
+      const hasAccess = permissionStore.hasPermission(requiredPermission);
+      if (!hasAccess) {
+        return next({ name: 'Forbidden' });
+      }
+    }
+
+    next();
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..318a1b1
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,13 @@
+// /src/router/index.js
+import { createRouter, createWebHistory } from 'vue-router';
+import { routes } from './routes';
+import { setupGuards } from './guards';
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+});
+
+setupGuards(router);
+
+export default router;
diff --git a/src/router/routes.js b/src/router/routes.js
new file mode 100644
index 0000000..1804949
--- /dev/null
+++ b/src/router/routes.js
@@ -0,0 +1,197 @@
+// /src/router/routes.js
+import DashboardLayout from '@/layouts/DashboardLayout.vue';
+import AuthLayout from '@/layouts/AuthLayout.vue';
+
+export const routes = [
+  {
+    path: '/login',
+    component: AuthLayout,
+    children: [
+      {
+        path: '',
+        name: 'Login',
+        component: () => import('@/views/auth/LoginView.vue'),
+        meta: { requiresAuth: false }
+      }
+    ]
+  },
+  {
+    path: '/',
+    component: DashboardLayout,
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        name: 'DashboardHome',
+        component: () => import('@/views/dashboard/DashboardHomeView.vue')
+      },
+
+      // Users
+      {
+        path: 'users',
+        name: 'UserList',
+        component: () => import('@/views/users/UserListView.vue')
+      },
+      {
+        path: 'users/create',
+        name: 'UserCreate',
+        component: () => import('@/views/users/UserFormView.vue')
+      },
+      {
+        path: 'users/edit/:id',
+        name: 'UserEdit',
+        component: () => import('@/views/users/UserFormView.vue')
+      },
+
+      // Professors
+      {
+        path: 'professors',
+        name: 'ProfessorList',
+        component: () => import('@/views/professors/ProfessorListView.vue')
+      },
+      {
+        path: 'professors/create',
+        name: 'ProfessorCreate',
+        component: () => import('@/views/professors/ProfessorFormView.vue')
+      },
+      {
+        path: 'professors/edit/:id',
+        name: 'ProfessorEdit',
+        component: () => import('@/views/professors/ProfessorFormView.vue')
+      },
+
+      // Courses
+      {
+        path: 'courses',
+        name: 'CourseList',
+        component: () => import('@/views/courses/CourseListView.vue')
+      },
+      {
+        path: 'courses/create',
+        name: 'CourseCreate',
+        component: () => import('@/views/courses/CourseFormView.vue')
+      },
+      {
+        path: 'courses/edit/:id',
+        name: 'CourseEdit',
+        component: () => import('@/views/courses/CourseFormView.vue')
+      },
+      {
+        path: 'courses/view/:id',
+        name: 'CourseDetail',
+        component: () => import('@/views/courses/CourseDetailView.vue')
+      },
+
+      // Classes
+      {
+        path: 'classes',
+        name: 'ClassList',
+        component: () => import('@/views/classes/ClassListView.vue')
+      },
+      {
+        path: 'classes/create',
+        name: 'ClassCreate',
+        component: () => import('@/views/classes/ClassFormView.vue')
+      },
+      {
+        path: 'classes/edit/:id',
+        name: 'ClassEdit',
+        component: () => import('@/views/classes/ClassFormView.vue')
+      },
+      {
+        path: 'classes/view/:id',
+        name: 'ClassDetail',
+        component: () => import('@/views/classes/ClassDetailView.vue')
+      },
+
+      // Sessions
+      {
+        path: 'sessions',
+        name: 'SessionList',
+        component: () => import('@/views/sessions/SessionListView.vue')
+      },
+      {
+        path: 'sessions/create',
+        name: 'SessionCreate',
+        component: () => import('@/views/sessions/SessionFormView.vue')
+      },
+      {
+        path: 'sessions/edit/:id',
+        name: 'SessionEdit',
+        component: () => import('@/views/sessions/SessionFormView.vue')
+      },
+      {
+        path: 'sessions/attendance/:id',
+        name: 'AttendanceEntry',
+        component: () => import('@/views/attendances/AttendanceEntryView.vue')
+      },
+
+      // Payments
+      {
+        path: 'payments',
+        name: 'PaymentList',
+        component: () => import('@/views/payments/PaymentListView.vue')
+      },
+      {
+        path: 'payments/view/:id',
+        name: 'PaymentDetail',
+        component: () => import('@/views/payments/PaymentDetailView.vue')
+      },
+
+      // Roles
+      {
+        path: 'roles',
+        name: 'RoleList',
+        component: () => import('@/views/roles/RoleListView.vue')
+      },
+      {
+        path: 'roles/create',
+        name: 'RoleCreate',
+        component: () => import('@/views/roles/RoleFormView.vue')
+      },
+      {
+        path: 'roles/edit/:id',
+        name: 'RoleEdit',
+        component: () => import('@/views/roles/RoleFormView.vue')
+      },
+
+      // Notifications
+      {
+        path: 'notifications',
+        name: 'NotificationList',
+        component: () => import('@/views/notifications/NotificationListView.vue')
+      },
+
+      // Contact inquiries
+      {
+        path: 'contact-inquiries',
+        name: 'ContactInquiryList',
+        component: () => import('@/views/contactInquiries/ContactInquiryListView.vue')
+      },
+      {
+        path: 'contact-inquiries/view/:id',
+        name: 'ContactInquiryDetail',
+        component: () => import('@/views/contactInquiries/ContactInquiryDetailView.vue')
+      },
+
+      {
+        path: 'logs',
+        name: 'LogList',
+        component: () => import('@/views/logs/LogListView.vue'),
+        meta: { permission: 'logs:read' }
+      },
+
+      // Errors
+      {
+        path: '403',
+        name: 'Forbidden',
+        component: () => import('@/views/errors/ForbiddenView.vue')
+      }
+    ]
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: () => import('@/views/errors/NotFoundView.vue')
+  }
+];
diff --git a/src/stores/authStore.js b/src/stores/authStore.js
new file mode 100644
index 0000000..71f30b5
--- /dev/null
+++ b/src/stores/authStore.js
@@ -0,0 +1,84 @@
+// /src/stores/authStore.js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { authApi } from '@/api/authApi';
+import Cookies from 'js-cookie';
+import { usePermissionStore } from './permissionStore';
+
+export const useAuthStore = defineStore('auth', () => {
+  const accessToken = ref(localStorage.getItem('accessToken') || Cookies.get('accessToken') || '');
+  const refreshToken = ref(localStorage.getItem('refreshToken') || Cookies.get('refreshToken') || '');
+  const user = ref(JSON.parse(localStorage.getItem('user') || 'null'));
+
+  const isAuthenticated = computed(() => !!accessToken.value);
+
+  function setTokens(access, refresh) {
+    accessToken.value = access;
+    refreshToken.value = refresh;
+    if (access) {
+      localStorage.setItem('accessToken', access);
+      Cookies.set('accessToken', access);
+    } else {
+      localStorage.removeItem('accessToken');
+      Cookies.remove('accessToken');
+    }
+    if (refresh) {
+      localStorage.setItem('refreshToken', refresh);
+      Cookies.set('refreshToken', refresh);
+    } else {
+      localStorage.removeItem('refreshToken');
+      Cookies.remove('refreshToken');
+    }
+  }
+
+  function setUser(userData) {
+    user.value = userData;
+    if (userData) {
+      localStorage.setItem('user', JSON.stringify(userData));
+    } else {
+      localStorage.removeItem('user');
+    }
+  }
+
+  async function login(credentials) {
+    const response = await authApi.login(credentials);
+    const data = response.data || response;
+    
+    // Server response: accessToken, refreshToken, user, permissions / role
+    setTokens(data.accessToken, data.refreshToken);
+    setUser(data.user);
+
+    const permissionStore = usePermissionStore();
+    const perms = data.user?.role?.permissions || data.permissions || [];
+    const roleName = data.user?.role?.name || data.role || '';
+    permissionStore.setPermissions(perms, roleName);
+
+    return data;
+  }
+
+  async function logout() {
+    try {
+      if (refreshToken.value) {
+        await authApi.logout(refreshToken.value);
+      }
+    } catch (e) {
+      console.warn('Logout API error:', e);
+    } finally {
+      setTokens('', '');
+      setUser(null);
+      const permissionStore = usePermissionStore();
+      permissionStore.clearPermissions();
+    }
+  }
+
+  return {
+    accessToken,
+    refreshToken,
+    user,
+    isAuthenticated,
+    setTokens,
+    setUser,
+    login,
+    logout
+  };
+});
diff --git a/src/stores/permissionStore.js b/src/stores/permissionStore.js
new file mode 100644
index 0000000..2efe1ca
--- /dev/null
+++ b/src/stores/permissionStore.js
@@ -0,0 +1,63 @@
+// /src/stores/permissionStore.js
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { authApi } from '@/api/authApi';
+
+export const usePermissionStore = defineStore('permission', () => {
+  const permissions = ref(JSON.parse(localStorage.getItem('permissions') || '[]'));
+  const roleName = ref(localStorage.getItem('roleName') || '');
+  const isLoaded = ref(permissions.value.length > 0);
+
+  function setPermissions(permsArray = [], role = '') {
+    permissions.value = Array.isArray(permsArray) ? permsArray : [];
+    roleName.value = role;
+    isLoaded.value = true;
+    localStorage.setItem('permissions', JSON.stringify(permissions.value));
+    localStorage.setItem('roleName', roleName.value);
+  }
+
+  function clearPermissions() {
+    permissions.value = [];
+    roleName.value = '';
+    isLoaded.value = false;
+    localStorage.removeItem('permissions');
+    localStorage.removeItem('roleName');
+  }
+
+  async function fetchPermissions() {
+    try {
+      const response = await authApi.getSelf();
+      const userData = response.data || response;
+      const perms = userData.role?.permissions || [];
+      const role = userData.role?.name || '';
+      setPermissions(perms, role);
+      return permissions.value;
+    } catch (err) {
+      console.error('Failed to fetch user permissions:', err);
+      clearPermissions();
+      throw err;
+    }
+  }
+
+  function hasPermission(perm) {
+    if (!perm) return true;
+    if (permissions.value.includes('*') || permissions.value.includes('admin:all')) return true;
+    return permissions.value.includes(perm);
+  }
+
+  function hasAnyPermission(permsArray) {
+    if (!Array.isArray(permsArray) || permsArray.length === 0) return true;
+    return permsArray.some(p => hasPermission(p));
+  }
+
+  return {
+    permissions,
+    roleName,
+    isLoaded,
+    setPermissions,
+    clearPermissions,
+    fetchPermissions,
+    hasPermission,
+    hasAnyPermission
+  };
+});
diff --git a/src/stores/themeStore.js b/src/stores/themeStore.js
new file mode 100644
index 0000000..1bef0ba
--- /dev/null
+++ b/src/stores/themeStore.js
@@ -0,0 +1,35 @@
+// /src/stores/themeStore.js
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useThemeStore = defineStore('theme', () => {
+  const savedTheme = localStorage.getItem('theme');
+  const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const isDarkMode = ref(savedTheme ? savedTheme === 'dark' : prefersDark);
+
+  function applyTheme() {
+    const htmlEl = document.documentElement;
+    if (isDarkMode.value) {
+      htmlEl.classList.add('dark-mode', 'dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      htmlEl.classList.remove('dark-mode', 'dark');
+      localStorage.setItem('theme', 'light');
+    }
+  }
+
+  function toggleTheme() {
+    isDarkMode.value = !isDarkMode.value;
+    applyTheme();
+  }
+
+  function initTheme() {
+    applyTheme();
+  }
+
+  return {
+    isDarkMode,
+    toggleTheme,
+    initTheme
+  };
+});
diff --git a/src/stores/uiStore.js b/src/stores/uiStore.js
new file mode 100644
index 0000000..c950c09
--- /dev/null
+++ b/src/stores/uiStore.js
@@ -0,0 +1,30 @@
+// /src/stores/uiStore.js
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useUiStore = defineStore('ui', () => {
+  const isSidebarOpen = ref(true);
+  const isMobileSidebarOpen = ref(false);
+  const breadcrumbs = ref([]);
+
+  function toggleSidebar() {
+    isSidebarOpen.value = !isSidebarOpen.value;
+  }
+
+  function toggleMobileSidebar() {
+    isMobileSidebarOpen.value = !isMobileSidebarOpen.value;
+  }
+
+  function setBreadcrumbs(items) {
+    breadcrumbs.value = items;
+  }
+
+  return {
+    isSidebarOpen,
+    isMobileSidebarOpen,
+    breadcrumbs,
+    toggleSidebar,
+    toggleMobileSidebar,
+    setBreadcrumbs
+  };
+});
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..2c9ad66
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,2 @@
+/* /src/style.css */
+@import './assets/styles/main.scss';
diff --git a/src/utils/apiError.js b/src/utils/apiError.js
new file mode 100644
index 0000000..4a35f57
--- /dev/null
+++ b/src/utils/apiError.js
@@ -0,0 +1,52 @@
+// /src/utils/apiError.js
+
+/**
+ * Extracts the user-facing error message from an Axios/API error,
+ * preferring the localized message returned by the backend.
+ */
+export function getApiErrorMessage(error, fallback = 'خطایی رخ داده است') {
+  if (!error) return fallback;
+
+  if (typeof error === 'string') {
+    return error.trim() || fallback;
+  }
+
+  const payload = error?.response?.data;
+  const apiError = payload?.error;
+
+  if (apiError && typeof apiError === 'object') {
+    if (typeof apiError.message === 'string' && apiError.message.trim()) {
+      return apiError.message.trim();
+    }
+  }
+
+  if (typeof payload?.message === 'string' && payload.message.trim()) {
+    return payload.message.trim();
+  }
+
+  // Network / timeout / cancel — Axios message is useful here
+  if (!error.response && typeof error.message === 'string' && error.message.trim()) {
+    if (error.code === 'ECONNABORTED') {
+      return 'زمان پاسخ‌گویی سرور به پایان رسید.';
+    }
+    if (error.message === 'Network Error') {
+      return 'ارتباط با سرور برقرار نشد.';
+    }
+    return error.message;
+  }
+
+  // Avoid showing generic "Request failed with status code XXX"
+  if (
+    typeof error.message === 'string' &&
+    error.message.trim() &&
+    !/^Request failed with status code \d+/i.test(error.message)
+  ) {
+    return error.message.trim();
+  }
+
+  return fallback;
+}
+
+export function getApiErrorCode(error) {
+  return error?.response?.data?.error?.code || null;
+}
diff --git a/src/views/attendances/AttendanceEntryView.vue b/src/views/attendances/AttendanceEntryView.vue
new file mode 100644
index 0000000..eff0085
--- /dev/null
+++ b/src/views/attendances/AttendanceEntryView.vue
@@ -0,0 +1,158 @@
+<!-- /src/views/attendances/AttendanceEntryView.vue -->
+<template>
+  <div class="attendance-entry-view" v-if="session">
+    <PageHeader
+      :title="$t('attendances.title')"
+      :subtitle="`دوره: ${session.course?.title || '-'} | کلاس: ${session.class?.name || '-'} | تاریخ: ${formatJalali(session.day)} (${session.startTime || ''} تا ${session.endTime || ''})`"
+    >
+      <Button label="بازگشت" icon="pi pi-arrow-left" text severity="secondary" @click="$router.push('/sessions')" />
+    </PageHeader>
+
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm mb-3" v-if="session.note">
+      <span class="text-muted text-xs block mb-1">یادداشت جلسه</span>
+      <p class="m-0 white-space-pre-wrap">{{ session.note }}</p>
+    </div>
+
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm">
+      <div class="flex align-items-center justify-content-between mb-4 pb-3 border-bottom-1 border-color">
+        <div>
+          <h2 class="text-lg font-bold text-color m-0">لیست دانشجویان کلاس</h2>
+          <span class="text-muted text-xs">وضعیت حضور هر دانشجو را مشخص کنید</span>
+        </div>
+        <div class="flex align-items-center gap-2">
+          <Button label="علامت‌گذاری همه به عنوان حاضر" icon="pi pi-check-circle" size="small" text severity="success" @click="markAllPresent" />
+        </div>
+      </div>
+
+      <DataTable :value="studentList" class="p-datatable-sm text-sm" emptyMessage="دانشجویی در این کلاس ثبت‌نام نشده است">
+        <Column header="#" style="width: 50px">
+          <template #body="{ index }">{{ toPersianDigits(index + 1) }}</template>
+        </Column>
+
+        <Column field="name" header="نام و نام خانوادگی دانشجو">
+          <template #body="{ data }">
+            <span class="font-bold text-color">{{ data.name }} {{ data.surname }}</span>
+            <span class="text-xs text-muted block">کد ملی: {{ toPersianDigits(data.nationalIdCode || '—') }}</span>
+          </template>
+        </Column>
+
+        <Column field="status" header="وضعیت حضور">
+          <template #body="{ data }">
+            <SelectButton
+              v-model="data.status"
+              :options="statusOptions"
+              optionLabel="label"
+              optionValue="value"
+              class="text-xs"
+            />
+          </template>
+        </Column>
+
+        <Column field="note" header="یادداشت / توضیحات">
+          <template #body="{ data }">
+            <InputText v-model="data.note" class="w-full text-xs" placeholder="دلیل غیبت یا تاخیر..." />
+          </template>
+        </Column>
+      </DataTable>
+
+      <div class="flex justify-content-end gap-2 mt-4 pt-3 border-top-1 border-color">
+        <Button label="انصراف" text severity="secondary" @click="$router.push('/sessions')" />
+        <Button
+          :label="$t('attendances.submitAttendance')"
+          icon="pi pi-save"
+          severity="success"
+          :loading="isSubmitting"
+          :disabled="!studentList.length"
+          @click="handleSubmit"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { sessionApi } from '@/api/sessionApi';
+import { attendanceApi } from '@/api/attendanceApi';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import PageHeader from '@/components/common/PageHeader.vue';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import SelectButton from 'primevue/selectbutton';
+import InputText from 'primevue/inputtext';
+
+const route = useRoute();
+const router = useRouter();
+const sessionId = route.params.id;
+
+const { toPersianDigits, formatJalali } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const session = ref(null);
+const studentList = ref([]);
+const isSubmitting = ref(false);
+
+const statusOptions = [
+  { label: 'حاضر', value: 'present' },
+  { label: 'غایب', value: 'absent' },
+  { label: 'تاخیر', value: 'late' },
+  { label: 'موجه', value: 'excused' }
+];
+
+const fetchSessionAttendance = async () => {
+  try {
+    const res = await sessionApi.getOne(sessionId);
+    const data = res.data || res;
+    session.value = data;
+
+    const roster = data.class?.students || [];
+    const attendanceByUser = new Map(
+      (data.attendanceList || []).map((row) => [
+        String(row.user?._id || row.user),
+        row
+      ])
+    );
+
+    studentList.value = roster.map((user) => {
+      const existing = attendanceByUser.get(String(user._id));
+      return {
+        userId: user._id,
+        name: user.name || '',
+        surname: user.surname || '',
+        nationalIdCode: user.nationalIdCode || '',
+        status: existing?.status || 'present',
+        note: existing?.note || ''
+      };
+    });
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const markAllPresent = () => {
+  studentList.value.forEach((s) => { s.status = 'present'; });
+};
+
+const handleSubmit = async () => {
+  isSubmitting.value = true;
+  try {
+    const payloadList = studentList.value.map((s) => ({
+      user: s.userId,
+      status: s.status,
+      note: s.note
+    }));
+    await attendanceApi.recordSessionAttendance(sessionId, payloadList);
+    showSuccess('حضور و غیاب جلسه با موفقیت ثبت شد');
+    router.push('/sessions');
+  } catch (err) {
+    showError(err);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+onMounted(fetchSessionAttendance);
+</script>
diff --git a/src/views/auth/LoginView.vue b/src/views/auth/LoginView.vue
new file mode 100644
index 0000000..ba960c0
--- /dev/null
+++ b/src/views/auth/LoginView.vue
@@ -0,0 +1,158 @@
+<!-- /src/views/auth/LoginView.vue -->
+<template>
+  <div class="login-card-container">
+    <div class="login-view surface-card p-4 sm:p-5 border-round-2xl border-1 border-color shadow-lg">
+      <div class="text-center mb-4">
+        <div class="inline-flex align-items-center justify-content-center w-4rem h-4rem border-circle bg-primary-light text-primary mb-3">
+          <i class="pi pi-building text-3xl"></i>
+        </div>
+        <h1 class="text-2xl font-bold text-color m-0">{{ $t('auth.loginTitle') }}</h1>
+        <p class="text-muted text-sm mt-2 mb-0">{{ $t('auth.welcome') }}</p>
+      </div>
+
+      <!-- Credentials Hint Box -->
+      <div class="surface-ground p-3 border-round border-1 border-color mb-4 text-xs">
+        <div class="font-bold text-primary mb-1 flex align-items-center gap-1">
+          <i class="pi pi-key"></i>
+          <span>اطلاعات ورود مدیر سیستم:</span>
+        </div>
+        <div class="flex justify-content-between align-items-center mt-1">
+          <span>نام کاربری: <code class="font-bold text-color">superadmin</code></span>
+          <span>رمز عبور: <code class="font-bold text-color">SuperAdminSecret123!</code></span>
+        </div>
+        <Button label="جاگذاری اطلاعات حساب مدیر" size="small" text class="w-full mt-2 text-xs p-1" @click="fillDemo" />
+      </div>
+
+      <form @submit.prevent="handleLogin" class="flex flex-column gap-3">
+        <div class="flex flex-column gap-2">
+          <label for="username" class="font-semibold text-sm text-color">{{ $t('auth.username') }}</label>
+          <IconField iconPosition="right">
+            <InputIcon class="pi pi-user" />
+            <InputText
+              id="username"
+              v-model.trim="form.username"
+              class="w-full text-sm"
+              :class="{ 'p-invalid': errors.username }"
+              placeholder="superadmin"
+              autocomplete="username"
+            />
+          </IconField>
+          <small v-if="errors.username" class="text-red-500 text-xs">{{ errors.username }}</small>
+        </div>
+
+        <div class="flex flex-column gap-2">
+          <label for="password" class="font-semibold text-sm text-color">{{ $t('auth.password') }}</label>
+          <IconField iconPosition="right">
+            <InputIcon class="pi pi-lock" />
+            <Password
+              id="password"
+              v-model="form.password"
+              :feedback="false"
+              toggleMask
+              class="w-full text-sm"
+              inputClass="w-full text-sm"
+              :class="{ 'p-invalid': errors.password }"
+              placeholder="SuperAdminSecret123!"
+              autocomplete="current-password"
+            />
+          </IconField>
+          <small v-if="errors.password" class="text-red-500 text-xs">{{ errors.password }}</small>
+        </div>
+
+        <Button
+          type="submit"
+          :label="$t('auth.loginButton')"
+          icon="pi pi-sign-in"
+          class="w-full mt-2 font-bold"
+          :loading="loading"
+        />
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useAuthStore } from '@/stores/authStore';
+import { useToast } from '@/composables/useToast';
+import { useI18n } from 'vue-i18n';
+import InputText from 'primevue/inputtext';
+import Password from 'primevue/password';
+import Button from 'primevue/button';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+
+const router = useRouter();
+const route = useRoute();
+const authStore = useAuthStore();
+const { showSuccess, showError } = useToast();
+const { t } = useI18n();
+
+const form = reactive({
+  username: 'superadmin',
+  password: 'SuperAdminSecret123!'
+});
+
+const errors = reactive({
+  username: '',
+  password: ''
+});
+
+const loading = ref(false);
+
+const fillDemo = () => {
+  form.username = 'superadmin';
+  form.password = 'SuperAdminSecret123!';
+};
+
+const validate = () => {
+  let valid = true;
+  errors.username = '';
+  errors.password = '';
+
+  if (!form.username) {
+    errors.username = 'ورود نام کاربری الزامی است';
+    valid = false;
+  }
+  if (!form.password) {
+    errors.password = 'ورود رمز عبور الزامی است';
+    valid = false;
+  }
+
+  return valid;
+};
+
+const handleLogin = async () => {
+  if (!validate()) return;
+
+  loading.value = true;
+  try {
+    await authStore.login(form);
+    showSuccess(t('auth.loginSuccess'));
+    const redirectPath = route.query.redirect || '/';
+    router.push(redirectPath);
+  } catch (err) {
+    console.error('Login error:', err);
+    showError(err);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.login-card-container {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 100% !important;
+  max-width: 28rem !important;
+  margin: auto !important;
+}
+
+.login-view {
+  width: 100% !important;
+  background: var(--surface-card);
+}
+</style>
diff --git a/src/views/classes/ClassDetailView.vue b/src/views/classes/ClassDetailView.vue
new file mode 100644
index 0000000..c23bff6
--- /dev/null
+++ b/src/views/classes/ClassDetailView.vue
@@ -0,0 +1,162 @@
+<!-- /src/views/classes/ClassDetailView.vue -->
+<template>
+  <div class="class-detail-view" v-if="classData">
+    <PageHeader :title="classData.name" :subtitle="`دوره: ${classData.course?.title || '-'}`">
+      <Button label="ویرایش" icon="pi pi-pencil" class="ml-2" @click="$router.push(`/classes/edit/${classId}`)" />
+      <Button label="بازگشت" icon="pi pi-arrow-left" text severity="secondary" @click="$router.push('/classes')" />
+    </PageHeader>
+
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm mb-4">
+      <h2 class="text-lg font-bold text-color mb-3">مشخصات کلاس</h2>
+      <div class="grid">
+        <div class="col-12 sm:col-4">
+          <span class="text-muted text-xs block mb-1">استاد مدرس</span>
+          <span class="font-bold text-color text-sm">
+            {{ classData.professor ? `${classData.professor.name || ''} ${classData.professor.surname || ''}`.trim() : '—' }}
+          </span>
+        </div>
+        <div class="col-12 sm:col-4">
+          <span class="text-muted text-xs block mb-1">ظرفیت کل</span>
+          <span class="font-bold text-color text-sm">{{ toPersianDigits(classData.capacity || 0) }} نفر</span>
+        </div>
+        <div class="col-12 sm:col-4">
+          <span class="text-muted text-xs block mb-1">تعداد ثبت‌نامی‌ها</span>
+          <span class="font-bold text-color text-sm">{{ toPersianDigits((classData.students || []).length) }} نفر</span>
+        </div>
+        <div class="col-12 sm:col-4">
+          <span class="text-muted text-xs block mb-1">شهریه</span>
+          <span class="font-bold text-color text-sm">{{ toPersianDigits((classData.tuitionFee || 0).toLocaleString('en-US')) }} تومان</span>
+        </div>
+        <div class="col-12 sm:col-4">
+          <span class="text-muted text-xs block mb-1">بازه زمانی</span>
+          <span class="font-bold text-color text-sm">
+            {{ formatJalali(classData.startDate) }} — {{ formatJalali(classData.endDate) }}
+          </span>
+        </div>
+        <div class="col-12 sm:col-4">
+          <span class="text-muted text-xs block mb-1">وضعیت</span>
+          <StatusTag :status="classData.isActive !== false" />
+        </div>
+      </div>
+    </div>
+
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm mb-4">
+      <h2 class="text-lg font-bold mb-3">دانشجویان</h2>
+      <DataTable :value="classData.students || []" class="p-datatable-sm text-sm" emptyMessage="دانشجویی ثبت نشده">
+        <Column header="#">
+          <template #body="{ index }">{{ toPersianDigits(index + 1) }}</template>
+        </Column>
+        <Column header="نام">
+          <template #body="{ data }">{{ data.name }} {{ data.surname }}</template>
+        </Column>
+        <Column header="موبایل">
+          <template #body="{ data }"><span dir="ltr">{{ data.phoneNumber || '—' }}</span></template>
+        </Column>
+      </DataTable>
+    </div>
+
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm">
+      <div class="flex align-items-center justify-content-between mb-3">
+        <h2 class="text-lg font-bold m-0">جلسات کلاس</h2>
+        <Button
+          label="مدیریت جلسات"
+          icon="pi pi-calendar"
+          text
+          size="small"
+          @click="$router.push(`/classes/edit/${classId}`)"
+        />
+      </div>
+      <TableSkeleton v-if="loadingSessions" :rows="5" :columns="5" />
+      <DataTable
+        v-else
+        :value="sessions"
+        class="p-datatable-sm text-sm"
+        emptyMessage="جلسه‌ای برای این کلاس ثبت نشده است"
+      >
+        <Column header="#">
+          <template #body="{ index }">{{ toPersianDigits(index + 1) }}</template>
+        </Column>
+        <Column header="موضوع">
+          <template #body="{ data }">{{ data.topic || '—' }}</template>
+        </Column>
+        <Column header="تاریخ">
+          <template #body="{ data }">{{ formatJalali(data.day || data.date) }}</template>
+        </Column>
+        <Column header="زمان">
+          <template #body="{ data }">
+            <span dir="ltr">{{ data.startTime || '—' }} – {{ data.endTime || '—' }}</span>
+          </template>
+        </Column>
+        <Column header="وضعیت">
+          <template #body="{ data }">
+            <StatusTag :status="data.status || 'scheduled'" type="session" />
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { classApi } from '@/api/classApi';
+import { sessionApi } from '@/api/sessionApi';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import PageHeader from '@/components/common/PageHeader.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import TableSkeleton from '@/components/common/TableSkeleton.vue';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+
+const route = useRoute();
+const classId = route.params.id;
+const { toPersianDigits, formatJalali } = usePersianDate();
+const { showError } = useToast();
+
+const classData = ref(null);
+const sessions = ref([]);
+const loadingSessions = ref(false);
+
+const fetchClass = async () => {
+  try {
+    const res = await classApi.getOne(classId);
+    classData.value = res.data || res;
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const fetchSessions = async () => {
+  loadingSessions.value = true;
+  try {
+    const res = await sessionApi.getAll({
+      limit: 100,
+      class: classId,
+      sortBy: 'day',
+      sortOrder: 'asc'
+    });
+    if (Array.isArray(res)) {
+      sessions.value = res;
+    } else if (Array.isArray(res?.data)) {
+      sessions.value = res.data;
+    } else if (Array.isArray(res?.items)) {
+      sessions.value = res.items;
+    } else {
+      sessions.value = [];
+    }
+  } catch (err) {
+    showError(err);
+    sessions.value = [];
+  } finally {
+    loadingSessions.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchClass();
+  fetchSessions();
+});
+</script>
diff --git a/src/views/classes/ClassFormView.vue b/src/views/classes/ClassFormView.vue
new file mode 100644
index 0000000..a5f4230
--- /dev/null
+++ b/src/views/classes/ClassFormView.vue
@@ -0,0 +1,316 @@
+<!-- /src/views/classes/ClassFormView.vue -->
+<template>
+  <div class="class-form-view w-full max-w-5xl mx-auto">
+    <PageHeader
+      :title="isEditMode ? 'ویرایش کلاس' : 'تعریف کلاس جدید'"
+      :subtitle="isEditMode ? 'ویرایش کلاس، دانشجویان و جلسات' : 'تعریف کلاس جدید برای دوره'"
+    >
+      <Button
+        label="انصراف"
+        text
+        severity="secondary"
+        @click="goBack"
+      />
+    </PageHeader>
+
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm mb-4">
+      <form @submit.prevent="handleSubmit" class="grid">
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">نام کلاس *</label>
+          <InputText v-model.trim="form.name" class="w-full text-sm" placeholder="مثلا: گروه الف - تابستان" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">دوره آموزشی مرتبط *</label>
+          <Dropdown v-model="form.course" :options="courses" optionLabel="title" optionValue="_id" placeholder="دوره را انتخاب کنید" class="w-full text-sm" filter />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">استاد مدرس</label>
+          <Dropdown v-model="form.professor" :options="professors" optionLabel="name" optionValue="_id" placeholder="استاد را انتخاب کنید" class="w-full text-sm" filter />
+        </div>
+
+        <div class="col-12 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">ظرفیت کلاس</label>
+          <InputNumber v-model="form.capacity" :min="1" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">شهریه کلاس</label>
+          <InputNumber v-model="form.tuitionFee" :min="0" class="w-full text-sm" suffix=" تومان" />
+        </div>
+
+        <div class="col-12 md:col-4 flex flex-column gap-2">
+          <label class="font-semibold text-sm">تاریخ شروع</label>
+          <DatePicker v-model="form.startDate" class="w-full text-sm" placeholder="1403/01/01" />
+        </div>
+
+        <div class="col-12 md:col-4 flex flex-column gap-2">
+          <label class="font-semibold text-sm">تاریخ پایان</label>
+          <DatePicker v-model="form.endDate" class="w-full text-sm" placeholder="1403/03/01" />
+        </div>
+
+        <div class="col-12 md:col-4 flex align-items-center gap-2 mt-4">
+          <InputSwitch v-model="form.isActive" />
+          <label class="font-semibold text-sm">کلاس فعال است</label>
+        </div>
+
+        <div class="col-12 flex justify-content-end gap-2 mt-4 pt-3 border-top-1 border-color">
+          <Button label="انصراف" text severity="secondary" @click="goBack" />
+          <Button type="submit" :label="$t('app.save')" icon="pi pi-check" :loading="isSubmitting" />
+        </div>
+      </form>
+    </div>
+
+    <template v-if="isEditMode">
+      <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm mb-4">
+        <div class="flex align-items-center justify-content-between mb-3">
+          <div>
+            <h2 class="text-lg font-bold m-0">دانشجویان کلاس</h2>
+            <p class="text-muted text-sm m-0 mt-1">دانشجویان ثبت‌نام‌شده در این کلاس</p>
+          </div>
+          <Tag :value="`${toPersianDigits(students.length)} نفر`" severity="info" />
+        </div>
+
+        <div class="flex flex-column md:flex-row gap-2 mb-3">
+          <MultiSelect
+            v-model="selectedUserIds"
+            :options="availableUsers"
+            optionLabel="label"
+            optionValue="_id"
+            placeholder="افزودن دانشجو…"
+            filter
+            display="chip"
+            class="flex-grow-1 text-sm"
+          />
+          <Button
+            label="ثبت‌نام در کلاس"
+            icon="pi pi-user-plus"
+            :loading="registering"
+            :disabled="!selectedUserIds.length"
+            @click="registerSelected"
+          />
+        </div>
+
+        <DataTable :value="students" class="p-datatable-sm text-sm" emptyMessage="هنوز دانشجویی ثبت‌نام نشده است">
+          <Column header="#" style="width: 50px">
+            <template #body="{ index }">{{ toPersianDigits(index + 1) }}</template>
+          </Column>
+          <Column header="نام">
+            <template #body="{ data }">{{ data.name }} {{ data.surname }}</template>
+          </Column>
+          <Column header="موبایل">
+            <template #body="{ data }">
+              <span dir="ltr">{{ data.phoneNumber || '—' }}</span>
+            </template>
+          </Column>
+        </DataTable>
+      </div>
+
+      <ClassSessionsSection
+        v-if="classId"
+        :class-id="String(classId)"
+        :course-id="form.course ? String(form.course) : ''"
+        :professor-id="form.professor ? String(form.professor) : null"
+        :default-session-count="defaultSessionCount"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import moment from 'jalali-moment';
+import { classApi } from '@/api/classApi';
+import { courseApi } from '@/api/courseApi';
+import { professorApi } from '@/api/professorApi';
+import { userApi } from '@/api/userApi';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import PageHeader from '@/components/common/PageHeader.vue';
+import ClassSessionsSection from '@/components/classes/ClassSessionsSection.vue';
+import InputText from 'primevue/inputtext';
+import InputNumber from 'primevue/inputnumber';
+import Dropdown from 'primevue/select';
+import MultiSelect from 'primevue/multiselect';
+import InputSwitch from 'primevue/toggleswitch';
+import Button from 'primevue/button';
+import Tag from 'primevue/tag';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import DatePicker from 'vue3-persian-datetime-picker';
+
+const route = useRoute();
+const router = useRouter();
+const { showSuccess, showError } = useToast();
+const { toPersianDigits, toLatinDigits } = usePersianDate();
+
+const classId = route.params.id;
+const queryCourseId = route.query.courseId ? String(route.query.courseId) : null;
+const isEditMode = computed(() => !!classId);
+const isSubmitting = ref(false);
+const registering = ref(false);
+const defaultSessionCount = ref(12);
+
+const courses = ref([]);
+const professors = ref([]);
+const students = ref([]);
+const allUsers = ref([]);
+const selectedUserIds = ref([]);
+
+const form = reactive({
+  name: '',
+  course: queryCourseId,
+  professor: null,
+  capacity: 20,
+  tuitionFee: 0,
+  startDate: '',
+  endDate: '',
+  isActive: true
+});
+
+const availableUsers = computed(() => {
+  const enrolled = new Set(students.value.map((s) => String(s._id)));
+  return allUsers.value
+    .filter((u) => !enrolled.has(String(u._id)))
+    .map((u) => ({
+      ...u,
+      label: `${u.name || ''} ${u.surname || ''} — ${u.phoneNumber || ''}`.trim()
+    }));
+});
+
+const goBack = () => {
+  if (form.course) {
+    router.push(`/courses/edit/${form.course}`);
+    return;
+  }
+  router.push('/classes');
+};
+
+const toGregorianIso = (jalaliValue) => {
+  if (!jalaliValue) return undefined;
+  if (jalaliValue instanceof Date) return jalaliValue.toISOString();
+  const latin = toLatinDigits(String(jalaliValue));
+  const m = moment(latin, 'jYYYY/jMM/jDD');
+  return m.isValid() ? m.toDate().toISOString() : undefined;
+};
+
+const toJalaliDisplay = (value) => {
+  if (!value) return '';
+  return moment(value).locale('fa').format('jYYYY/jMM/jDD');
+};
+
+const applyCourseDefaults = (course) => {
+  if (!course) return;
+  if (!form.professor && (course.professor?._id || course.professor)) {
+    form.professor = course.professor?._id || course.professor;
+  }
+  if (course.capacity) form.capacity = course.capacity;
+  if (course.price != null) form.tuitionFee = course.price;
+  if (course.sectionCount) defaultSessionCount.value = course.sectionCount;
+};
+
+const fetchData = async () => {
+  try {
+    const [cRes, pRes, uRes] = await Promise.all([
+      courseApi.getAll({ limit: 100 }),
+      professorApi.getAll({ limit: 100 }),
+      userApi.getAll({ limit: 200 })
+    ]);
+
+    const cData = cRes.data || cRes;
+    courses.value = Array.isArray(cData) ? cData : (cData.items || cData.courses || cData.data || []);
+
+    const pData = pRes.data || pRes;
+    professors.value = (Array.isArray(pData) ? pData : (pData.items || pData.professors || pData.data || [])).map((p) => ({
+      ...p,
+      name: `${p.name || ''} ${p.surname || ''}`.trim()
+    }));
+
+    const uData = uRes.data || uRes;
+    allUsers.value = Array.isArray(uData) ? uData : (uData.items || uData.users || uData.data || []);
+
+    if (classId) {
+      const res = await classApi.getOne(classId);
+      const data = res.data || res;
+      Object.assign(form, {
+        name: data.name || '',
+        course: data.course?._id || data.course || null,
+        professor: data.professor?._id || data.professor || null,
+        capacity: data.capacity || 20,
+        tuitionFee: data.tuitionFee || 0,
+        startDate: toJalaliDisplay(data.startDate),
+        endDate: toJalaliDisplay(data.endDate),
+        isActive: data.isActive !== false
+      });
+      students.value = data.students || [];
+      if (data.course?.sectionCount) defaultSessionCount.value = data.course.sectionCount;
+    } else if (queryCourseId) {
+      const linked = courses.value.find((c) => String(c._id) === String(queryCourseId));
+      if (linked) {
+        applyCourseDefaults(linked);
+      } else {
+        try {
+          const one = await courseApi.getOne(queryCourseId);
+          applyCourseDefaults(one.data || one);
+        } catch (e) {
+          console.warn('Course prefetch error:', e);
+        }
+      }
+    }
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const handleSubmit = async () => {
+  if (!form.name) { showError('نام کلاس الزامی است'); return; }
+  if (!form.course) { showError('دوره مرتبط الزامی است'); return; }
+  isSubmitting.value = true;
+  try {
+    const payload = {
+      name: form.name,
+      course: form.course,
+      professor: form.professor || undefined,
+      capacity: form.capacity,
+      tuitionFee: form.tuitionFee,
+      startDate: toGregorianIso(form.startDate),
+      endDate: toGregorianIso(form.endDate),
+      isActive: form.isActive
+    };
+    if (isEditMode.value) {
+      await classApi.update(classId, payload);
+      showSuccess('کلاس با موفقیت ویرایش شد');
+      await fetchData();
+    } else {
+      const res = await classApi.create(payload);
+      const created = res.data || res;
+      showSuccess('کلاس جدید با موفقیت ایجاد شد');
+      router.push(`/classes/edit/${created._id || created.id}`);
+    }
+  } catch (err) {
+    showError(err);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+const registerSelected = async () => {
+  if (!selectedUserIds.value.length) return;
+  registering.value = true;
+  try {
+    const res = await classApi.registerUsers(classId, selectedUserIds.value);
+    const data = res.data || res;
+    students.value = data.students || [];
+    selectedUserIds.value = [];
+    showSuccess('دانشجویان با موفقیت به کلاس اضافه شدند');
+  } catch (err) {
+    showError(err);
+  } finally {
+    registering.value = false;
+  }
+};
+
+onMounted(fetchData);
+</script>
diff --git a/src/views/classes/ClassListView.vue b/src/views/classes/ClassListView.vue
new file mode 100644
index 0000000..26b5b55
--- /dev/null
+++ b/src/views/classes/ClassListView.vue
@@ -0,0 +1,93 @@
+<!-- /src/views/classes/ClassListView.vue -->
+<template>
+  <div class="class-list-view">
+    <PageHeader title="مدیریت کلاس‌ها" subtitle="لیست گروه‌ها و کلاس‌های در حال برگزاری">
+      <PermissionGate permission="classes:create">
+        <Button label="تعریف کلاس جدید" icon="pi pi-plus" @click="$router.push('/classes/create')" />
+      </PermissionGate>
+    </PageHeader>
+
+    <DataTableWrapper
+      :items="items"
+      :totalCount="totalCount"
+      :page="queryParams.page"
+      :limit="queryParams.limit"
+      :loading="isLoading"
+      @page-change="onPageChange"
+      @sort-change="onSort"
+      @search-change="onSearch"
+    >
+      <Column field="name" header="نام کلاس" sortable>
+        <template #body="{ data }">
+          <span class="font-bold text-color">{{ data.name }}</span>
+        </template>
+      </Column>
+
+      <Column field="course.title" header="دوره مرتبط">
+        <template #body="{ data }">
+          {{ data.course?.title || data.courseTitle || '-' }}
+        </template>
+      </Column>
+
+      <Column field="capacity" header="ظرفیت">
+        <template #body="{ data }">
+          {{ toPersianDigits(data.capacity || 0) }} نفر
+        </template>
+      </Column>
+
+      <Column header="عملیات" style="width: 120px">
+        <template #body="{ data }">
+          <div class="flex align-items-center gap-1">
+            <Button
+              icon="pi pi-eye"
+              text
+              rounded
+              size="small"
+              severity="info"
+              @click="$router.push(`/classes/view/${data._id || data.id}`)"
+            />
+            <PermissionGate permission="classes:update">
+              <Button
+                icon="pi pi-pencil"
+                text
+                rounded
+                size="small"
+                severity="warning"
+                @click="$router.push(`/classes/edit/${data._id || data.id}`)"
+              />
+            </PermissionGate>
+          </div>
+        </template>
+      </Column>
+    </DataTableWrapper>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { useDataTable } from '@/composables/useDataTable';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { classApi } from '@/api/classApi';
+import PageHeader from '@/components/common/PageHeader.vue';
+import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+
+const { toPersianDigits } = usePersianDate();
+
+const {
+  items,
+  totalCount,
+  isLoading,
+  queryParams,
+  loadData,
+  onPageChange,
+  onSort,
+  onSearch
+} = useDataTable(classApi.getAll);
+
+onMounted(() => {
+  loadData();
+});
+</script>
diff --git a/src/views/contactInquiries/ContactInquiryDetailView.vue b/src/views/contactInquiries/ContactInquiryDetailView.vue
new file mode 100644
index 0000000..4f19691
--- /dev/null
+++ b/src/views/contactInquiries/ContactInquiryDetailView.vue
@@ -0,0 +1,173 @@
+<!-- /src/views/contactInquiries/ContactInquiryDetailView.vue -->
+<template>
+  <div class="contact-inquiry-detail" v-if="inquiry">
+    <PageHeader
+      :title="`${inquiry.name} ${inquiry.surname}`"
+      subtitle="جزئیات و پیگیری درخواست تماس"
+    >
+      <Button label="بازگشت" icon="pi pi-arrow-left" text severity="secondary" @click="$router.push('/contact-inquiries')" />
+    </PageHeader>
+
+    <div class="grid">
+      <div class="col-12 lg:col-7">
+        <div class="surface-card p-4 border-round border-1 border-color shadow-sm mb-3">
+          <h2 class="text-lg font-bold mb-3">اطلاعات تماس</h2>
+          <div class="grid">
+            <div class="col-12 sm:col-6">
+              <span class="text-muted text-xs block">کد ملی</span>
+              <span class="font-semibold" dir="ltr">{{ inquiry.nationalIdCode ? toPersianDigits(inquiry.nationalIdCode) : '—' }}</span>
+            </div>
+            <div class="col-12 sm:col-6">
+              <span class="text-muted text-xs block">موبایل</span>
+              <span class="font-semibold" dir="ltr">{{ inquiry.phoneNumber || '—' }}</span>
+            </div>
+            <div class="col-12 sm:col-6">
+              <span class="text-muted text-xs block">ایمیل</span>
+              <span class="font-semibold" dir="ltr">{{ inquiry.email || '—' }}</span>
+            </div>
+            <div class="col-12 sm:col-6">
+              <span class="text-muted text-xs block">زمان ثبت</span>
+              <span class="font-semibold">{{ formatJalali(inquiry.createdAt, 'jYYYY/jMM/jDD HH:mm') }}</span>
+            </div>
+            <div class="col-12">
+              <span class="text-muted text-xs block mb-1">روش‌های ترجیحی تماس</span>
+              <div class="flex flex-wrap gap-1">
+                <Tag
+                  v-for="method in (inquiry.preferredContactMethods || [])"
+                  :key="method"
+                  :value="methodLabel(method)"
+                />
+              </div>
+            </div>
+            <div class="col-12">
+              <span class="text-muted text-xs block mb-1">دوره‌های مورد علاقه</span>
+              <div class="flex flex-wrap gap-1">
+                <Tag
+                  v-for="course in (inquiry.courses || [])"
+                  :key="course._id || course"
+                  :value="course.title || course"
+                  severity="info"
+                />
+                <span v-if="!(inquiry.courses || []).length" class="text-muted">انتخاب نشده</span>
+              </div>
+            </div>
+            <div class="col-12">
+              <span class="text-muted text-xs block mb-1">پیام کاربر</span>
+              <p class="m-0 white-space-pre-wrap">{{ inquiry.message || '—' }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 lg:col-5">
+        <div class="surface-card p-4 border-round border-1 border-color shadow-sm">
+          <h2 class="text-lg font-bold mb-3">پیگیری</h2>
+          <div class="flex flex-column gap-3">
+            <div class="flex flex-column gap-2">
+              <label class="font-semibold text-sm">وضعیت</label>
+              <Dropdown
+                v-model="form.status"
+                :options="statusOptions"
+                optionLabel="label"
+                optionValue="value"
+                class="w-full text-sm"
+              />
+            </div>
+            <div class="flex flex-column gap-2">
+              <label class="font-semibold text-sm">یادداشت داخلی</label>
+              <Textarea
+                v-model="form.notes"
+                rows="8"
+                class="w-full text-sm"
+                placeholder="نتیجه تماس، زمان مناسب تماس بعدی و …"
+              />
+            </div>
+            <Button
+              label="ذخیره پیگیری"
+              icon="pi pi-save"
+              :loading="saving"
+              @click="save"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { contactInquiryApi } from '@/api/contactInquiryApi';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import PageHeader from '@/components/common/PageHeader.vue';
+import Button from 'primevue/button';
+import Dropdown from 'primevue/select';
+import Textarea from 'primevue/textarea';
+import Tag from 'primevue/tag';
+
+const route = useRoute();
+const { toPersianDigits, formatJalali } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const inquiry = ref(null);
+const saving = ref(false);
+const form = reactive({ status: 'new', notes: '' });
+
+const statusOptions = [
+  { label: 'جدید', value: 'new' },
+  { label: 'مشاهده‌شده', value: 'seen' },
+  { label: 'تماس بعدی', value: 'call_later' },
+  { label: 'تماس گرفته شد', value: 'contacted' },
+  { label: 'بسته', value: 'closed' }
+];
+
+const METHOD_LABELS = {
+  WhatsApp: 'واتساپ',
+  Telegram: 'تلگرام',
+  Soroush: 'سروش',
+  Bale: 'بله',
+  Eitaa: 'ایتا',
+  SMS: 'پیامک',
+  Call: 'تماس تلفنی'
+};
+
+const methodLabel = (value) => METHOD_LABELS[value] || value;
+
+const load = async () => {
+  try {
+    const res = await contactInquiryApi.getOne(route.params.id);
+    const data = res.data || res;
+    inquiry.value = data;
+    form.status = data.status || 'new';
+    form.notes = data.notes || '';
+
+    if (data.status === 'new') {
+      await contactInquiryApi.update(route.params.id, { status: 'seen' });
+      form.status = 'seen';
+      inquiry.value.status = 'seen';
+    }
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const save = async () => {
+  saving.value = true;
+  try {
+    const res = await contactInquiryApi.update(route.params.id, {
+      status: form.status,
+      notes: form.notes
+    });
+    inquiry.value = res.data || res;
+    showSuccess('پیگیری ذخیره شد');
+  } catch (err) {
+    showError(err);
+  } finally {
+    saving.value = false;
+  }
+};
+
+onMounted(load);
+</script>
diff --git a/src/views/contactInquiries/ContactInquiryListView.vue b/src/views/contactInquiries/ContactInquiryListView.vue
new file mode 100644
index 0000000..bb54229
--- /dev/null
+++ b/src/views/contactInquiries/ContactInquiryListView.vue
@@ -0,0 +1,172 @@
+<!-- /src/views/contactInquiries/ContactInquiryListView.vue -->
+<template>
+  <div class="contact-inquiry-list-view">
+    <PageHeader title="درخواست‌های تماس" subtitle="پیگیری علاقه‌مندان و درخواست‌های مشاوره از وب‌سایت">
+      <div class="flex flex-wrap gap-2 align-items-center">
+        <Dropdown
+          v-model="selectedStatus"
+          :options="statusOptions"
+          optionLabel="label"
+          optionValue="value"
+          placeholder="وضعیت"
+          showClear
+          class="w-12rem text-sm"
+          @change="onStatusFilter"
+        />
+        <Dropdown
+          v-model="selectedCourse"
+          :options="courses"
+          optionLabel="title"
+          optionValue="_id"
+          placeholder="فیلتر دوره"
+          showClear
+          filter
+          class="w-16rem text-sm"
+          @change="onCourseFilter"
+        />
+      </div>
+    </PageHeader>
+
+    <DataTableWrapper
+      :items="items"
+      :totalCount="totalCount"
+      :page="queryParams.page"
+      :limit="queryParams.limit"
+      :sortBy="queryParams.sortBy"
+      :sortOrder="queryParams.sortOrder"
+      :loading="isLoading"
+      @page-change="onPageChange"
+      @sort-change="onSort"
+      @search-change="onSearch"
+    >
+      <Column field="name" header="نام">
+        <template #body="{ data }">
+          <span class="font-bold text-color">{{ data.name }} {{ data.surname }}</span>
+          <span v-if="data.nationalIdCode" class="text-xs text-muted block" dir="ltr">
+            کد ملی: {{ toPersianDigits(data.nationalIdCode) }}
+          </span>
+        </template>
+      </Column>
+
+      <Column field="phoneNumber" header="تماس">
+        <template #body="{ data }">
+          <span class="block" dir="ltr">{{ data.phoneNumber || '—' }}</span>
+          <span v-if="data.email" class="text-xs text-muted block" dir="ltr">{{ data.email }}</span>
+        </template>
+      </Column>
+
+      <Column field="courses" header="دوره‌های انتخابی">
+        <template #body="{ data }">
+          <div class="flex flex-wrap gap-1">
+            <Tag
+              v-for="course in (data.courses || [])"
+              :key="course._id || course"
+              :value="course.title || course"
+              severity="info"
+              class="text-xs"
+            />
+            <span v-if="!(data.courses || []).length" class="text-muted text-xs">—</span>
+          </div>
+        </template>
+      </Column>
+
+      <Column field="preferredContactMethods" header="روش تماس">
+        <template #body="{ data }">
+          <span class="text-sm">{{ (data.preferredContactMethods || []).map(methodLabel).join('، ') || '—' }}</span>
+        </template>
+      </Column>
+
+      <Column field="status" header="وضعیت" sortable>
+        <template #body="{ data }">
+          <StatusTag :status="data.status" type="contact" />
+        </template>
+      </Column>
+
+      <Column field="createdAt" header="زمان ثبت" sortable>
+        <template #body="{ data }">
+          {{ formatJalali(data.createdAt, 'jYYYY/jMM/jDD HH:mm') }}
+        </template>
+      </Column>
+
+      <Column header="عملیات" style="width: 90px">
+        <template #body="{ data }">
+          <Button
+            icon="pi pi-eye"
+            text
+            rounded
+            size="small"
+            v-tooltip.top="'مشاهده و پیگیری'"
+            @click="$router.push(`/contact-inquiries/view/${data._id}`)"
+          />
+        </template>
+      </Column>
+    </DataTableWrapper>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import { contactInquiryApi } from '@/api/contactInquiryApi';
+import { courseApi } from '@/api/courseApi';
+import { useDataTable } from '@/composables/useDataTable';
+import { usePersianDate } from '@/composables/usePersianDate';
+import PageHeader from '@/components/common/PageHeader.vue';
+import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import Dropdown from 'primevue/select';
+import Tag from 'primevue/tag';
+
+const { toPersianDigits, formatJalali } = usePersianDate();
+
+const {
+  items,
+  totalCount,
+  isLoading,
+  queryParams,
+  loadData,
+  onPageChange,
+  onSort,
+  onSearch,
+  setFilter
+} = useDataTable(contactInquiryApi.getAll, { sortBy: 'createdAt', sortOrder: 'desc' });
+
+const courses = ref([]);
+const selectedStatus = ref(null);
+const selectedCourse = ref(null);
+
+const statusOptions = [
+  { label: 'جدید', value: 'new' },
+  { label: 'مشاهده‌شده', value: 'seen' },
+  { label: 'تماس بعدی', value: 'call_later' },
+  { label: 'تماس گرفته شد', value: 'contacted' },
+  { label: 'بسته', value: 'closed' }
+];
+
+const METHOD_LABELS = {
+  WhatsApp: 'واتساپ',
+  Telegram: 'تلگرام',
+  Soroush: 'سروش',
+  Bale: 'بله',
+  Eitaa: 'ایتا',
+  SMS: 'پیامک',
+  Call: 'تماس تلفنی'
+};
+
+const methodLabel = (value) => METHOD_LABELS[value] || value;
+
+const onStatusFilter = () => setFilter('status', selectedStatus.value || '');
+const onCourseFilter = () => setFilter('course', selectedCourse.value || '');
+
+onMounted(async () => {
+  loadData();
+  try {
+    const res = await courseApi.getAll({ limit: 100 });
+    const data = res.data || res;
+    courses.value = Array.isArray(data) ? data : (data.items || data.courses || data.data || []);
+  } catch {
+    courses.value = [];
+  }
+});
+</script>
diff --git a/src/views/courses/CourseDetailView.vue b/src/views/courses/CourseDetailView.vue
new file mode 100644
index 0000000..6319404
--- /dev/null
+++ b/src/views/courses/CourseDetailView.vue
@@ -0,0 +1,112 @@
+<!-- /src/views/courses/CourseDetailView.vue -->
+<template>
+  <div class="course-detail-view" v-if="course">
+    <PageHeader :title="course.title" :subtitle="`استاد: ${course.professor?.name || course.professor || '-'}`">
+      <PermissionGate permission="courses:update">
+        <Button :label="$t('app.edit')" icon="pi pi-pencil" severity="warning" @click="$router.push(`/courses/edit/${course._id || course.id}`)" />
+      </PermissionGate>
+      <Button label="بازگشت" icon="pi pi-arrow-left" text severity="secondary" @click="$router.push('/courses')" />
+    </PageHeader>
+
+    <div class="grid mb-4">
+      <div class="col-12 md:col-8">
+        <div class="surface-card p-4 border-round border-1 border-color shadow-sm mb-4">
+          <h3 class="text-lg font-bold mb-3">توضیحات دوره</h3>
+          <p class="text-color text-sm line-height-3">{{ course.description || 'توضیحاتی برای این دوره ثبت نشده است.' }}</p>
+        </div>
+
+        <div class="surface-card p-4 border-round border-1 border-color shadow-sm">
+          <h3 class="text-lg font-bold mb-3">جلسات دوره</h3>
+          <DataTable :value="courseSessions" class="p-datatable-sm text-sm">
+            <Column field="sessionNumber" header="#" style="width: 60px">
+              <template #body="{ data }">{{ toPersianDigits(data.sessionNumber) }}</template>
+            </Column>
+            <Column field="topic" header="موضوع جلسه" />
+            <Column field="date" header="تاریخ برگزاری">
+              <template #body="{ data }">{{ formatJalali(data.date) }}</template>
+            </Column>
+            <Column field="time" header="زمان">
+              <template #body="{ data }">{{ data.startTime }} - {{ data.endTime }}</template>
+            </Column>
+            <Column field="status" header="وضعیت">
+              <template #body="{ data }">
+                <StatusTag :status="data.status || 'Scheduled'" type="session" />
+              </template>
+            </Column>
+          </DataTable>
+        </div>
+      </div>
+
+      <div class="col-12 md:col-4">
+        <div class="surface-card p-4 border-round border-1 border-color shadow-sm mb-4">
+          <h3 class="text-lg font-bold mb-3">اطلاعات تکمیلی</h3>
+          <div class="flex flex-column gap-3">
+            <div>
+              <span class="text-muted text-xs block mb-1">نوع دوره</span>
+              <Tag :value="course.type === 'Private' ? 'خصوصی' : 'عمومی'" :severity="course.type === 'Private' ? 'warning' : 'info'" />
+            </div>
+            <div>
+              <span class="text-muted text-xs block mb-1">شهریه</span>
+              <span class="font-bold text-color">{{ toPersianDigits(course.price?.toLocaleString()) }} تومان</span>
+            </div>
+            <div>
+              <span class="text-muted text-xs block mb-1">ظرفیت</span>
+              <span class="font-bold text-color">{{ toPersianDigits(course.capacity) }} نفر</span>
+            </div>
+            <div>
+              <span class="text-muted text-xs block mb-1">مدرک رسمی</span>
+              <Tag :value="course.isOfficial ? 'دارای مدرک رسمی' : 'بدون مدرک رسمی'" :severity="course.isOfficial ? 'success' : 'secondary'" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { courseApi } from '@/api/courseApi';
+import { sessionApi } from '@/api/sessionApi';
+import { usePersianDate } from '@/composables/usePersianDate';
+import PageHeader from '@/components/common/PageHeader.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import Button from 'primevue/button';
+import Tag from 'primevue/tag';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+
+const route = useRoute();
+const courseId = route.params.id;
+const { toPersianDigits, formatJalali } = usePersianDate();
+
+const course = ref(null);
+const courseSessions = ref([]);
+
+const fetchDetail = async () => {
+  try {
+    const res = await courseApi.getOne(courseId);
+    course.value = res.data || res;
+
+    const sessionRes = await sessionApi.getAll({
+      courseId,
+      limit: 100,
+      sortBy: 'day',
+      sortOrder: 'asc'
+    });
+    const sessionData = sessionRes.data || sessionRes;
+    const list = Array.isArray(sessionData)
+      ? sessionData
+      : (sessionData.items || sessionData.sessions || sessionData.data || []);
+    courseSessions.value = Array.isArray(list) ? list : [];
+  } catch (e) {
+    console.warn('Fetch course detail error:', e);
+  }
+};
+
+onMounted(() => {
+  fetchDetail();
+});
+</script>
diff --git a/src/views/courses/CourseFormView.vue b/src/views/courses/CourseFormView.vue
new file mode 100644
index 0000000..3d1fe70
--- /dev/null
+++ b/src/views/courses/CourseFormView.vue
@@ -0,0 +1,303 @@
+<!-- /src/views/courses/CourseFormView.vue -->
+<template>
+  <div class="course-form-view w-full max-w-5xl mx-auto">
+    <PageHeader
+      :title="isEditMode ? $t('courses.editCourse') : $t('courses.addCourse')"
+      :subtitle="isEditMode ? 'ویرایش مشخصات دوره و مدیریت کلاس‌ها' : 'تعریف دوره آموزشی جدید'"
+    >
+      <Button label="انصراف" text severity="secondary" @click="$router.push('/courses')" />
+    </PageHeader>
+
+    <!-- Course Details -->
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm mb-4">
+      <h2 class="text-lg font-bold text-color mb-4 pb-2 border-bottom-1 border-color">مشخصات اصلی دوره</h2>
+      <form @submit.prevent="handleSubmitCourse" class="grid">
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('courses.courseTitle') }} *</label>
+          <InputText v-model.trim="form.title" class="w-full text-sm" :class="{ 'p-invalid': errors.title }" />
+          <small v-if="errors.title" class="text-red-500 text-xs">{{ errors.title }}</small>
+        </div>
+
+        <div class="col-12 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('courses.type') }}</label>
+          <Dropdown v-model="form.type" :options="typeOptions" optionLabel="label" optionValue="value" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('courses.price') }} *</label>
+          <InputNumber v-model="form.price" class="w-full text-sm" :class="{ 'p-invalid': errors.price }" suffix=" تومان" />
+          <small v-if="errors.price" class="text-red-500 text-xs">{{ errors.price }}</small>
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('courses.professor') }}</label>
+          <Dropdown v-model="form.professor" :options="professors" optionLabel="name" optionValue="_id" placeholder="انتخاب استاد" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('courses.capacity') }}</label>
+          <InputNumber v-model="form.capacity" class="w-full text-sm" :min="1" />
+        </div>
+
+        <div class="col-12 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">تعداد جلسات</label>
+          <InputNumber v-model="form.sectionCount" class="w-full text-sm" :min="1" />
+        </div>
+
+        <div class="col-12 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">ساعت هر جلسه</label>
+          <InputNumber v-model="form.hoursPerSection" class="w-full text-sm" :min="0" :maxFractionDigits="1" />
+        </div>
+
+        <div class="col-12 md:col-3 flex align-items-center gap-2 mt-4">
+          <InputSwitch v-model="form.isOfficial" />
+          <label class="font-semibold text-sm">{{ $t('courses.isOfficial') }}</label>
+        </div>
+
+        <div class="col-12 md:col-3 flex align-items-center gap-2 mt-4">
+          <InputSwitch v-model="form.showOnFrontend" />
+          <label class="font-semibold text-sm">نمایش در وب‌سایت</label>
+        </div>
+
+        <div class="col-12 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('courses.description') }}</label>
+          <Textarea v-model="form.description" rows="3" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 flex flex-column gap-2">
+          <label class="font-semibold text-sm">نکات برجسته (هر خط یک مورد)</label>
+          <Textarea
+            v-model="highlightsText"
+            rows="4"
+            class="w-full text-sm"
+            placeholder="مثال:&#10;مناسب مبتدیان&#10;همراه با گواهی‌نامه&#10;تمرین عملی"
+          />
+        </div>
+
+        <div class="col-12 flex justify-content-end mt-3">
+          <Button type="submit" label="ذخیره مشخصات دوره" icon="pi pi-check" :loading="isSubmitting" />
+        </div>
+      </form>
+    </div>
+
+    <!-- Classes of this course (edit mode only) -->
+    <div v-if="isEditMode" class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm">
+      <div class="flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
+        <div>
+          <h2 class="text-lg font-bold m-0">کلاس‌های این دوره</h2>
+          <p class="text-muted text-sm m-0 mt-1">برای هر کلاس می‌توانید دانشجویان و جلسات را جداگانه مدیریت کنید</p>
+        </div>
+        <Button
+          label="تعریف کلاس جدید"
+          icon="pi pi-plus"
+          @click="$router.push(`/classes/create?courseId=${courseId}`)"
+        />
+      </div>
+
+      <TableSkeleton v-if="loadingClasses" :rows="5" :columns="6" />
+      <DataTable
+        v-else
+        :value="courseClasses"
+        class="p-datatable-sm text-sm"
+        emptyMessage="هنوز کلاسی برای این دوره تعریف نشده است"
+      >
+        <Column header="#" style="width: 50px">
+          <template #body="{ index }">{{ toPersianDigits(index + 1) }}</template>
+        </Column>
+        <Column header="نام کلاس">
+          <template #body="{ data }">
+            <span class="font-bold">{{ data.name }}</span>
+          </template>
+        </Column>
+        <Column header="استاد">
+          <template #body="{ data }">
+            {{ data.professor ? `${data.professor.name || ''} ${data.professor.surname || ''}`.trim() : '—' }}
+          </template>
+        </Column>
+        <Column header="ظرفیت" style="width: 90px">
+          <template #body="{ data }">{{ toPersianDigits(data.capacity || 0) }}</template>
+        </Column>
+        <Column header="دانشجو" style="width: 90px">
+          <template #body="{ data }">{{ toPersianDigits((data.students || []).length) }}</template>
+        </Column>
+        <Column header="وضعیت" style="width: 90px">
+          <template #body="{ data }">
+            <StatusTag :status="data.isActive !== false" />
+          </template>
+        </Column>
+        <Column header="عملیات" style="width: 120px">
+          <template #body="{ data }">
+            <div class="flex align-items-center gap-1">
+              <Button
+                icon="pi pi-eye"
+                text
+                rounded
+                size="small"
+                severity="info"
+                v-tooltip.top="'مشاهده'"
+                @click="$router.push(`/classes/view/${data._id || data.id}`)"
+              />
+              <Button
+                icon="pi pi-pencil"
+                text
+                rounded
+                size="small"
+                severity="warning"
+                v-tooltip.top="'ویرایش / جلسات'"
+                @click="$router.push(`/classes/edit/${data._id || data.id}`)"
+              />
+            </div>
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+
+    <div v-else class="surface-card p-4 border-round border-1 border-color shadow-sm">
+      <p class="text-muted text-sm m-0">پس از ذخیره دوره، می‌توانید کلاس‌های آن را در همین صفحه تعریف کنید. جلسات از داخل هر کلاس ساخته می‌شوند.</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { courseApi } from '@/api/courseApi';
+import { professorApi } from '@/api/professorApi';
+import { classApi } from '@/api/classApi';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+
+import PageHeader from '@/components/common/PageHeader.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import TableSkeleton from '@/components/common/TableSkeleton.vue';
+import InputText from 'primevue/inputtext';
+import InputNumber from 'primevue/inputnumber';
+import Dropdown from 'primevue/select';
+import Textarea from 'primevue/textarea';
+import InputSwitch from 'primevue/toggleswitch';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+
+const route = useRoute();
+const router = useRouter();
+const { toPersianDigits } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const courseId = route.params.id;
+const isEditMode = computed(() => !!courseId);
+
+const isSubmitting = ref(false);
+const loadingClasses = ref(false);
+const professors = ref([]);
+const courseClasses = ref([]);
+
+const typeOptions = [
+  { label: 'عمومی', value: 'General' },
+  { label: 'خصوصی', value: 'Private' }
+];
+
+const form = reactive({
+  title: '',
+  description: '',
+  type: 'General',
+  price: 1500000,
+  professor: null,
+  capacity: 20,
+  sectionCount: 12,
+  hoursPerSection: 1.5,
+  isOfficial: true,
+  showOnFrontend: true
+});
+
+const highlightsText = ref('');
+
+const errors = reactive({
+  title: '',
+  price: ''
+});
+
+const fetchProfessors = async () => {
+  try {
+    const res = await professorApi.getAll({ limit: 100 });
+    const data = res.data || res;
+    professors.value = data.items || data.professors || data || [];
+  } catch (e) {
+    console.warn('Professors fetch error:', e);
+  }
+};
+
+const fetchClassesForCourse = async () => {
+  if (!courseId) return;
+  loadingClasses.value = true;
+  try {
+    const res = await classApi.getAll({ limit: 100, courseId });
+    const data = res.data || res;
+    courseClasses.value = Array.isArray(data) ? data : (data.items || data.data || []);
+  } catch (e) {
+    console.warn('Classes fetch error:', e);
+  } finally {
+    loadingClasses.value = false;
+  }
+};
+
+const fetchCourse = async () => {
+  if (!courseId) return;
+  try {
+    const res = await courseApi.getOne(courseId);
+    const data = res.data || res;
+    Object.assign(form, {
+      title: data.title || '',
+      description: data.description || '',
+      type: data.type || 'General',
+      price: data.price || 0,
+      professor: data.professor?._id || data.professor || null,
+      capacity: data.capacity || 20,
+      sectionCount: data.sectionCount || 1,
+      hoursPerSection: data.hoursPerSection ?? 1.5,
+      isOfficial: data.isOfficial !== false,
+      showOnFrontend: data.showOnFrontend !== false
+    });
+    highlightsText.value = Array.isArray(data.highlights) ? data.highlights.join('\n') : '';
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const handleSubmitCourse = async () => {
+  if (!form.title) { errors.title = 'عنوان دوره الزامی است'; return; }
+  if (form.price === null) { errors.price = 'شهریه الزامی است'; return; }
+
+  isSubmitting.value = true;
+  try {
+    const payload = {
+      ...form,
+      highlights: highlightsText.value
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean)
+    };
+    if (isEditMode.value) {
+      await courseApi.update(courseId, payload);
+      showSuccess('مشخصات دوره با موفقیت ویرایش شد');
+    } else {
+      const res = await courseApi.create(payload);
+      const newCourse = res.data || res;
+      showSuccess('دوره جدید با موفقیت ایجاد شد');
+      if (newCourse._id || newCourse.id) {
+        router.push(`/courses/edit/${newCourse._id || newCourse.id}`);
+      }
+    }
+  } catch (err) {
+    showError(err);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchProfessors();
+  fetchCourse();
+  fetchClassesForCourse();
+});
+</script>
diff --git a/src/views/courses/CourseListView.vue b/src/views/courses/CourseListView.vue
new file mode 100644
index 0000000..f38d654
--- /dev/null
+++ b/src/views/courses/CourseListView.vue
@@ -0,0 +1,144 @@
+<!-- /src/views/courses/CourseListView.vue -->
+<template>
+  <div class="course-list-view">
+    <PageHeader :title="$t('courses.title')" :subtitle="$t('courses.subtitle')">
+      <PermissionGate permission="courses:create">
+        <Button :label="$t('courses.addCourse')" icon="pi pi-plus" @click="$router.push('/courses/create')" />
+      </PermissionGate>
+    </PageHeader>
+
+    <DataTableWrapper
+      :items="items"
+      :totalCount="totalCount"
+      :page="queryParams.page"
+      :limit="queryParams.limit"
+      :sortBy="queryParams.sortBy"
+      :sortOrder="queryParams.sortOrder"
+      :loading="isLoading"
+      @page-change="onPageChange"
+      @sort-change="onSort"
+      @search-change="onSearch"
+    >
+      <Column field="title" header="عنوان دوره" sortable>
+        <template #body="{ data }">
+          <router-link :to="`/courses/${data._id || data.id}`" class="font-bold text-color hover:text-primary">
+            {{ data.title }}
+          </router-link>
+        </template>
+      </Column>
+
+      <Column field="type" header="نوع دوره">
+        <template #body="{ data }">
+          <Tag :value="data.type === 'Private' ? $t('courses.typePrivate') : $t('courses.typeGeneral')" :severity="data.type === 'Private' ? 'warning' : 'info'" />
+        </template>
+      </Column>
+
+      <Column field="price" header="شهریه">
+        <template #body="{ data }">
+          {{ toPersianDigits(data.price?.toLocaleString()) }} تومان
+        </template>
+      </Column>
+
+      <Column field="rating" header="امتیاز">
+        <template #body="{ data }">
+          <Rating :modelValue="data.rating || 5" readonly :cancel="false" />
+        </template>
+      </Column>
+
+      <Column field="isOfficial" header="مدرک رسمی">
+        <template #body="{ data }">
+          <Tag :value="data.isOfficial ? $t('courses.official') : $t('courses.unofficial')" :severity="data.isOfficial ? 'success' : 'secondary'" />
+        </template>
+      </Column>
+
+      <Column header="تخفیف فعال">
+        <template #body="{ data }">
+          <Tag v-if="data.activeDiscount" value="دارای تخفیف" severity="danger" />
+          <span v-else class="text-muted text-xs">-</span>
+        </template>
+      </Column>
+
+      <Column header="عملیات" style="width: 130px">
+        <template #body="{ data }">
+          <div class="flex align-items-center gap-1">
+            <PermissionGate permission="courses:read">
+              <Button icon="pi pi-eye" text rounded size="small" v-tooltip.top="'مشاهده'" @click="$router.push(`/courses/${data._id || data.id}`)" />
+            </PermissionGate>
+
+            <PermissionGate permission="courses:update">
+              <Button icon="pi pi-pencil" text rounded size="small" severity="warning" v-tooltip.top="'ویرایش'" @click="$router.push(`/courses/edit/${data._id || data.id}`)" />
+            </PermissionGate>
+
+            <PermissionGate permission="courses:delete">
+              <Button icon="pi pi-trash" text rounded size="small" severity="danger" v-tooltip.top="'حذف'" @click="confirmDelete(data)" />
+            </PermissionGate>
+          </div>
+        </template>
+      </Column>
+    </DataTableWrapper>
+
+    <ConfirmDeleteDialog
+      v-model="deleteDialogVisible"
+      :loading="isDeleting"
+      @confirm="handleDelete"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useDataTable } from '@/composables/useDataTable';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import { courseApi } from '@/api/courseApi';
+import PageHeader from '@/components/common/PageHeader.vue';
+import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
+import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+import Rating from 'primevue/rating';
+
+const { toPersianDigits } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const {
+  items,
+  totalCount,
+  isLoading,
+  queryParams,
+  loadData,
+  onPageChange,
+  onSort,
+  onSearch
+} = useDataTable(courseApi.getAll);
+
+const deleteDialogVisible = ref(false);
+const selectedCourse = ref(null);
+const isDeleting = ref(false);
+
+const confirmDelete = (course) => {
+  selectedCourse.value = course;
+  deleteDialogVisible.value = true;
+};
+
+const handleDelete = async () => {
+  if (!selectedCourse.value) return;
+  isDeleting.value = true;
+  try {
+    await courseApi.delete(selectedCourse.value._id || selectedCourse.value.id);
+    showSuccess('دوره آموزشی با موفقیت حذف شد');
+    deleteDialogVisible.value = false;
+    loadData();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isDeleting.value = false;
+  }
+};
+
+onMounted(() => {
+  loadData();
+});
+</script>
diff --git a/src/views/dashboard/DashboardHomeView.vue b/src/views/dashboard/DashboardHomeView.vue
new file mode 100644
index 0000000..5965af9
--- /dev/null
+++ b/src/views/dashboard/DashboardHomeView.vue
@@ -0,0 +1,432 @@
+<!-- /src/views/dashboard/DashboardHomeView.vue -->
+<template>
+  <div class="dashboard-home-view">
+    <PageHeader title="داشبورد مدیریتی" subtitle="خلاصه آمار، عملکرد و دسترسی‌های سریع سیستم">
+      <Button icon="pi pi-refresh" text rounded v-tooltip.top="'بروزرسانی'" :loading="isLoading" @click="loadStats" />
+    </PageHeader>
+
+    <!-- ── Stats Cards ──────────────────────────────────────────────────────── -->
+    <div class="grid mb-4">
+      <div class="col-12 sm:col-6 lg:col-3" v-for="stat in statCards" :key="stat.title">
+        <div class="stat-card surface-card p-4 border-round-xl border-1 border-color shadow-sm flex align-items-center justify-content-between gap-3">
+          <div class="flex-grow-1">
+            <span class="text-muted text-xs block mb-1">{{ stat.title }}</span>
+            <div class="flex align-items-baseline gap-2">
+              <span class="text-3xl font-bold text-color">
+                <span v-if="isLoading">—</span>
+                <span v-else>{{ toPersianDigits(stat.value) }}</span>
+              </span>
+              <span v-if="stat.sub !== undefined && !isLoading" class="text-xs text-muted">
+                ({{ toPersianDigits(stat.sub) }} فعال)
+              </span>
+            </div>
+          </div>
+          <div class="stat-icon w-3rem h-3rem border-round-xl flex align-items-center justify-content-center flex-shrink-0" :class="stat.bgClass">
+            <i :class="stat.icon" class="text-xl"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Charts Row ───────────────────────────────────────────────────────── -->
+    <div class="grid mb-4">
+      <!-- Daily Enrollment Chart -->
+      <div class="col-12 lg:col-8">
+        <div class="surface-card p-4 border-round-xl border-1 border-color shadow-sm h-full">
+          <div class="flex align-items-center justify-content-between mb-4">
+            <h3 class="text-base font-bold text-color m-0">روند ثبت‌نام کاربران (۱۴ روز اخیر)</h3>
+            <Tag value="روزانه" severity="info" />
+          </div>
+          <div class="chart-container" style="height: 200px;">
+            <div v-if="isLoading" class="flex align-items-center justify-content-center h-full">
+              <ProgressSpinner style="width: 40px; height: 40px;" />
+            </div>
+            <div v-else-if="!dailyLabels.length" class="flex align-items-center justify-content-center h-full text-muted">
+              <span>داده‌ای برای نمایش وجود ندارد</span>
+            </div>
+            <div v-else class="bar-chart-wrapper h-full flex align-items-end gap-1">
+              <div
+                v-for="(item, idx) in dailyEnrollmentData"
+                :key="idx"
+                class="bar-group flex flex-column align-items-center gap-1 flex-grow-1"
+              >
+                <span class="text-xs font-bold text-primary">{{ toPersianDigits(item.count) }}</span>
+                <div
+                  class="bar-fill border-round-top"
+                  :style="{ height: getBarHeight(item.count, maxEnrollment) + 'px', minHeight: '4px' }"
+                ></div>
+                <span class="bar-label text-muted text-center">{{ item.label }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Summary Doughnuts -->
+      <div class="col-12 lg:col-4">
+        <div class="surface-card p-4 border-round-xl border-1 border-color shadow-sm h-full">
+          <h3 class="text-base font-bold text-color m-0 mb-4">وضعیت فعال / کل</h3>
+          <div class="flex flex-column gap-3">
+            <div v-for="ring in ringStats" :key="ring.label" class="flex align-items-center gap-3">
+              <div class="ring-chart flex-shrink-0" :style="getRingStyle(ring)">
+                <span class="ring-pct text-xs font-bold">{{ ring.pct }}٪</span>
+              </div>
+              <div class="flex-grow-1">
+                <div class="text-sm font-semibold text-color">{{ ring.label }}</div>
+                <div class="text-xs text-muted mt-1">
+                  <span class="font-bold" :class="ring.activeClass">{{ toPersianDigits(ring.active) }}</span>
+                  <span class="mx-1">/</span>
+                  <span>{{ toPersianDigits(ring.total) }} کل</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Quick Access ─────────────────────────────────────────────────────── -->
+    <div class="surface-card p-4 border-round-xl border-1 border-color shadow-sm mb-4">
+      <h3 class="text-base font-bold text-color mb-4 pb-2 border-bottom-1 border-color">دسترسی سریع</h3>
+      <div class="grid">
+        <div
+          v-for="link in quickLinks"
+          :key="link.to"
+          class="col-6 sm:col-4 lg:col-2"
+        >
+          <div
+            class="quick-link-card border-round-xl p-3 flex flex-column align-items-center gap-2 cursor-pointer text-center"
+            :class="link.cardClass"
+            @click="$router.push(link.to)"
+          >
+            <div class="quick-link-icon w-3rem h-3rem border-round-xl flex align-items-center justify-content-center" :class="link.iconBg">
+              <i :class="[link.icon, 'text-xl', link.iconColor]"></i>
+            </div>
+            <span class="text-sm font-semibold text-color">{{ link.label }}</span>
+            <Tag v-if="link.badge !== undefined" :value="toPersianDigits(link.badge)" :severity="link.badgeSeverity || 'secondary'" class="text-xs" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Recent Sessions ─────────────────────────────────────────────────── -->
+    <div class="surface-card p-4 border-round-xl border-1 border-color shadow-sm">
+      <div class="flex align-items-center justify-content-between mb-3">
+        <h3 class="text-base font-bold text-color m-0">آخرین جلسات</h3>
+        <Button label="مشاهده همه" icon="pi pi-arrow-left" text size="small" @click="$router.push('/sessions')" />
+      </div>
+      <DataTable :value="recentSessions" class="p-datatable-sm text-sm" :loading="isLoading">
+        <template #empty>
+          <div class="text-center text-muted p-4">هنوز جلسه‌ای ثبت نشده است</div>
+        </template>
+        <Column field="topic" header="موضوع">
+          <template #body="{ data }">
+            <span class="font-semibold text-color">{{ data.topic || '—' }}</span>
+          </template>
+        </Column>
+        <Column field="course" header="دوره">
+          <template #body="{ data }">
+            {{ data.course?.title || data.courseTitle || '—' }}
+          </template>
+        </Column>
+        <Column field="class" header="کلاس">
+          <template #body="{ data }">
+            {{ data.class?.name || '—' }}
+          </template>
+        </Column>
+        <Column field="professor" header="استاد">
+          <template #body="{ data }">
+            {{
+              data.professor
+                ? `${data.professor.name || ''} ${data.professor.surname || ''}`.trim() || '—'
+                : '—'
+            }}
+          </template>
+        </Column>
+        <Column field="day" header="تاریخ">
+          <template #body="{ data }">
+            {{ formatJalali(data.day || data.date) }}
+          </template>
+        </Column>
+        <Column field="time" header="ساعت">
+          <template #body="{ data }">
+            <span dir="ltr">{{ data.startTime || '—' }} – {{ data.endTime || '—' }}</span>
+          </template>
+        </Column>
+        <Column field="status" header="وضعیت">
+          <template #body="{ data }">
+            <StatusTag :status="data.status || 'scheduled'" type="session" />
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { dashboardApi } from '@/api/dashboardApi';
+import PageHeader from '@/components/common/PageHeader.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import Button from 'primevue/button';
+import Tag from 'primevue/tag';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import ProgressSpinner from 'primevue/progressspinner';
+
+const { toPersianDigits, formatJalali } = usePersianDate();
+
+// ── State ─────────────────────────────────────────────────────────────────────
+const isLoading = ref(false);
+const stats = ref({
+  totals: { users: 0, activeUsers: 0, professors: 0, activeProfessors: 0, courses: 0, sessions: 0 },
+  recentSessions: [],
+  charts: { dailyUsers: [], dailySessions: [] }
+});
+
+// ── Stat Cards ────────────────────────────────────────────────────────────────
+const statCards = computed(() => [
+  {
+    title: 'کل کاربران',
+    value: stats.value.totals.users,
+    sub: stats.value.totals.activeUsers,
+    icon: 'pi pi-users text-blue-500',
+    bgClass: 'bg-blue-100'
+  },
+  {
+    title: 'اساتید موسسه',
+    value: stats.value.totals.professors,
+    sub: stats.value.totals.activeProfessors,
+    icon: 'pi pi-id-card text-green-500',
+    bgClass: 'bg-green-100'
+  },
+  {
+    title: 'دوره‌های آموزشی',
+    value: stats.value.totals.courses,
+    icon: 'pi pi-book text-purple-500',
+    bgClass: 'bg-purple-100'
+  },
+  {
+    title: 'کل جلسات',
+    value: stats.value.totals.sessions,
+    icon: 'pi pi-calendar text-orange-500',
+    bgClass: 'bg-orange-100'
+  }
+]);
+
+// ── Ring Stats ────────────────────────────────────────────────────────────────
+const ringStats = computed(() => {
+  const t = stats.value.totals;
+  return [
+    {
+      label: 'کاربران فعال',
+      total: t.users,
+      active: t.activeUsers,
+      pct: t.users ? Math.round((t.activeUsers / t.users) * 100) : 0,
+      color: '#3B82F6',
+      activeClass: 'text-blue-500'
+    },
+    {
+      label: 'اساتید فعال',
+      total: t.professors,
+      active: t.activeProfessors,
+      pct: t.professors ? Math.round((t.activeProfessors / t.professors) * 100) : 0,
+      color: '#10B981',
+      activeClass: 'text-green-500'
+    }
+  ];
+});
+
+// ── Chart Helpers ─────────────────────────────────────────────────────────────
+const dailyEnrollmentData = computed(() => {
+  const raw = stats.value.charts?.dailyUsers || [];
+  return raw.map((item) => ({
+    count: item.count || 0,
+    label: formatJalali(item.date || buildDateFromParts(item._id), 'jD jMMMM')
+  }));
+});
+
+const buildDateFromParts = (parts) => {
+  if (!parts?.year || !parts?.month || !parts?.day) return null;
+  return new Date(parts.year, parts.month - 1, parts.day);
+};
+
+const dailyLabels = computed(() => dailyEnrollmentData.value.map((i) => i.label));
+
+const maxEnrollment = computed(() => {
+  const counts = dailyEnrollmentData.value.map((i) => i.count);
+  return Math.max(...counts, 1);
+});
+
+const MAX_BAR_HEIGHT = 140;
+const getBarHeight = (val, max) => Math.max(4, (val / max) * MAX_BAR_HEIGHT);
+
+const getRingStyle = (ring) => {
+  const deg = (ring.pct / 100) * 360;
+  return {
+    background: `conic-gradient(${ring.color} ${deg}deg, var(--surface-border) ${deg}deg)`,
+    borderRadius: '50%',
+    width: '48px',
+    height: '48px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  };
+};
+
+// ── Recent Sessions ───────────────────────────────────────────────────────────
+const recentSessions = computed(() => stats.value.recentSessions || []);
+
+// ── Quick Links ───────────────────────────────────────────────────────────────
+const quickLinks = computed(() => [
+  {
+    to: '/users/create',
+    label: 'افزودن کاربر',
+    icon: 'pi pi-user-plus',
+    iconBg: 'bg-blue-100',
+    iconColor: 'text-blue-600',
+    cardClass: 'quick-link-blue',
+    badge: stats.value.totals.users,
+    badgeSeverity: 'info'
+  },
+  {
+    to: '/professors/create',
+    label: 'افزودن استاد',
+    icon: 'pi pi-plus-circle',
+    iconBg: 'bg-green-100',
+    iconColor: 'text-green-600',
+    cardClass: 'quick-link-green',
+    badge: stats.value.totals.professors,
+    badgeSeverity: 'success'
+  },
+  {
+    to: '/courses/create',
+    label: 'دوره جدید',
+    icon: 'pi pi-book',
+    iconBg: 'bg-purple-100',
+    iconColor: 'text-purple-600',
+    cardClass: 'quick-link-purple',
+    badge: stats.value.totals.courses,
+    badgeSeverity: 'secondary'
+  },
+  {
+    to: '/sessions/create',
+    label: 'جلسه جدید',
+    icon: 'pi pi-calendar-plus',
+    iconBg: 'bg-orange-100',
+    iconColor: 'text-orange-600',
+    cardClass: 'quick-link-orange',
+    badge: stats.value.totals.sessions,
+    badgeSeverity: 'warning'
+  },
+  {
+    to: '/payments',
+    label: 'امور مالی',
+    icon: 'pi pi-wallet',
+    iconBg: 'bg-teal-100',
+    iconColor: 'text-teal-600',
+    cardClass: 'quick-link-teal'
+  },
+  {
+    to: '/roles',
+    label: 'نقش‌ها',
+    icon: 'pi pi-shield',
+    iconBg: 'bg-red-100',
+    iconColor: 'text-red-600',
+    cardClass: 'quick-link-red'
+  }
+]);
+
+// ── Load Data ─────────────────────────────────────────────────────────────────
+const loadStats = async () => {
+  isLoading.value = true;
+  try {
+    const res = await dashboardApi.getStats();
+    const data = res.data || res;
+    // Support both { data: { totals... } } and { totals... } structures
+    stats.value = data.data || data;
+  } catch (err) {
+    console.warn('Dashboard stats not available, showing zeros:', err.message);
+    // Graceful fallback — zeros, no crash
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadStats();
+});
+</script>
+
+<style scoped lang="scss">
+.stat-card {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
+  }
+}
+
+.stat-icon {
+  transition: transform 0.2s ease;
+
+  .stat-card:hover & {
+    transform: scale(1.05);
+  }
+}
+
+.bar-chart-wrapper {
+  padding-bottom: 4px;
+}
+
+.bar-fill {
+  width: 100%;
+  background: linear-gradient(to top, var(--primary-color), var(--primary-color-light, #818cf8));
+  min-width: 12px;
+  transition: height 0.4s ease;
+}
+
+.bar-label {
+  font-size: 9px;
+  line-height: 1.2;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ring-chart {
+  position: relative;
+
+  .ring-pct {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--surface-card);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 9px;
+  }
+}
+
+.quick-link-card {
+  background: var(--surface-ground);
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+
+  &:hover {
+    transform: translateY(-3px);
+    border-color: var(--primary-color);
+    background: var(--primary-50, rgba(99, 102, 241, 0.04));
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  }
+}
+</style>
diff --git a/src/views/errors/ForbiddenView.vue b/src/views/errors/ForbiddenView.vue
new file mode 100644
index 0000000..0bafb58
--- /dev/null
+++ b/src/views/errors/ForbiddenView.vue
@@ -0,0 +1,15 @@
+<!-- /src/views/errors/ForbiddenView.vue -->
+<template>
+  <div class="forbidden-view flex flex-column align-items-center justify-content-center min-h-screen text-center p-4">
+    <div class="inline-flex align-items-center justify-content-center w-6rem h-6rem border-circle bg-red-100 text-red-600 mb-4">
+      <i class="pi pi-lock text-5xl"></i>
+    </div>
+    <h1 class="text-4xl font-bold text-color mb-2">{{ $t('errors.forbiddenTitle') }}</h1>
+    <p class="text-muted text-base max-w-28rem mb-4">{{ $t('errors.forbiddenMessage') }}</p>
+    <Button :label="$t('errors.backToDashboard')" icon="pi pi-home" @click="$router.push('/')" />
+  </div>
+</template>
+
+<script setup>
+import Button from 'primevue/button';
+</script>
diff --git a/src/views/errors/NotFoundView.vue b/src/views/errors/NotFoundView.vue
new file mode 100644
index 0000000..1276f66
--- /dev/null
+++ b/src/views/errors/NotFoundView.vue
@@ -0,0 +1,15 @@
+<!-- /src/views/errors/NotFoundView.vue -->
+<template>
+  <div class="not-found-view flex flex-column align-items-center justify-content-center min-h-screen text-center p-4">
+    <div class="inline-flex align-items-center justify-content-center w-6rem h-6rem border-circle bg-orange-100 text-orange-600 mb-4">
+      <i class="pi pi-exclamation-circle text-5xl"></i>
+    </div>
+    <h1 class="text-4xl font-bold text-color mb-2">{{ $t('errors.notFoundTitle') }}</h1>
+    <p class="text-muted text-base max-w-28rem mb-4">{{ $t('errors.notFoundMessage') }}</p>
+    <Button :label="$t('errors.backToDashboard')" icon="pi pi-home" @click="$router.push('/')" />
+  </div>
+</template>
+
+<script setup>
+import Button from 'primevue/button';
+</script>
diff --git a/src/views/notifications/NotificationListView.vue b/src/views/notifications/NotificationListView.vue
new file mode 100644
index 0000000..f8bf3e1
--- /dev/null
+++ b/src/views/notifications/NotificationListView.vue
@@ -0,0 +1,131 @@
+<!-- /src/views/notifications/NotificationListView.vue -->
+<template>
+  <div class="notification-list-view">
+    <PageHeader :title="$t('notifications.title')" :subtitle="$t('notifications.subtitle')" />
+
+    <DataTableWrapper
+      :items="items"
+      :totalCount="totalCount"
+      :page="queryParams.page"
+      :limit="queryParams.limit"
+      :sortBy="queryParams.sortBy"
+      :sortOrder="queryParams.sortOrder"
+      :loading="isLoading"
+      @page-change="onPageChange"
+      @sort-change="onSort"
+      @search-change="onSearch"
+    >
+      <Column field="recipient" header="گیرنده">
+        <template #body="{ data }">
+          <span class="font-bold text-color">{{ data.user?.name || data.recipient || '-' }}</span>
+          <span class="text-xs text-muted block" dir="ltr">{{ data.user?.phoneNumber || data.targetAddress || '' }}</span>
+        </template>
+      </Column>
+
+      <Column field="channel" header="کانال ارسال">
+        <template #body="{ data }">
+          <Tag :value="getChannelLabel(data.channel)" :severity="getChannelSeverity(data.channel)" />
+        </template>
+      </Column>
+
+      <Column field="subject" header="موضوع / متن">
+        <template #body="{ data }">
+          <span class="text-sm truncate max-w-20rem block" :title="data.subject || data.content">
+            {{ data.subject || data.content || '-' }}
+          </span>
+        </template>
+      </Column>
+
+      <Column field="status" header="وضعیت تحویل">
+        <template #body="{ data }">
+          <StatusTag :status="data.status || 'delivered'" type="notification" />
+        </template>
+      </Column>
+
+      <Column field="retryCount" header="تعداد تلاش">
+        <template #body="{ data }">
+          {{ toPersianDigits(data.retryCount || 0) }}
+        </template>
+      </Column>
+
+      <Column header="عملیات" style="width: 120px">
+        <template #body="{ data }">
+          <PermissionGate permission="notifications:retry">
+            <Button
+              v-if="data.status === 'failed' || data.status === 'ناموفق'"
+              icon="pi pi-refresh"
+              label="تلاش مجدد"
+              size="small"
+              severity="warning"
+              :loading="retryingId === (data._id || data.id)"
+              @click="handleRetry(data)"
+            />
+          </PermissionGate>
+        </template>
+      </Column>
+    </DataTableWrapper>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useDataTable } from '@/composables/useDataTable';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import { notificationApi } from '@/api/notificationApi';
+import PageHeader from '@/components/common/PageHeader.vue';
+import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+
+const { toPersianDigits } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const {
+  items,
+  totalCount,
+  isLoading,
+  queryParams,
+  loadData,
+  onPageChange,
+  onSort,
+  onSearch
+} = useDataTable(notificationApi.getAll);
+
+const retryingId = ref(null);
+
+const getChannelLabel = (ch) => {
+  if (ch === 'bale') return 'پیام‌رسان بله';
+  if (ch === 'sms') return 'پیامک SMS';
+  if (ch === 'email') return 'ایمیل';
+  return ch || 'بله';
+};
+
+const getChannelSeverity = (ch) => {
+  if (ch === 'bale') return 'success';
+  if (ch === 'sms') return 'info';
+  if (ch === 'email') return 'warning';
+  return 'secondary';
+};
+
+const handleRetry = async (item) => {
+  const id = item._id || item.id;
+  retryingId.value = id;
+  try {
+    await notificationApi.retry(id);
+    showSuccess('ارسال مجدد با موفقیت درخواست شد');
+    loadData();
+  } catch (err) {
+    showError(err);
+  } finally {
+    retryingId.value = null;
+  }
+};
+
+onMounted(() => {
+  loadData();
+});
+</script>
diff --git a/src/views/payments/PaymentDetailView.vue b/src/views/payments/PaymentDetailView.vue
new file mode 100644
index 0000000..31eb13a
--- /dev/null
+++ b/src/views/payments/PaymentDetailView.vue
@@ -0,0 +1,176 @@
+<!-- /src/views/payments/PaymentDetailView.vue -->
+<template>
+  <div class="payment-detail-view" v-if="payment">
+    <PageHeader :title="$t('payments.paymentDetail')" :subtitle="`کد صورتحساب: ${payment._id || payment.id}`">
+      <Button label="بازگشت" icon="pi pi-arrow-left" text severity="secondary" @click="$router.push('/payments')" />
+    </PageHeader>
+
+    <div class="grid mb-4">
+      <!-- Summary Card -->
+      <div class="col-12 lg:col-4">
+        <div class="surface-card p-4 border-round border-1 border-color shadow-sm mb-4">
+          <h3 class="text-lg font-bold mb-3">خلاصه صورتحساب</h3>
+          <div class="flex flex-column gap-3">
+            <div>
+              <span class="text-muted text-xs block mb-1">نام کاربر / دانشجو</span>
+              <span class="font-bold text-color text-base">{{ payment.user?.name || payment.userName || 'کاربر' }} {{ payment.user?.surname || '' }}</span>
+            </div>
+            <div v-if="payment.classes && payment.classes.length">
+              <span class="text-muted text-xs block mb-1">کلاس‌های مربوطه</span>
+              <div class="flex flex-wrap gap-1 mt-1">
+                <Tag v-for="c in payment.classes" :key="c._id || c" :value="c.name || 'کلاس'" severity="info" class="text-xs" />
+              </div>
+            </div>
+            <div v-else-if="payment.course">
+              <span class="text-muted text-xs block mb-1">دوره آموزشی</span>
+              <span class="font-semibold text-color text-sm">{{ payment.course?.title }}</span>
+            </div>
+            <div>
+              <span class="text-muted text-xs block mb-1">مبلغ کل صورتحساب</span>
+              <span class="font-bold text-color text-xl">{{ toPersianDigits(payment.amount?.toLocaleString()) }} تومان</span>
+            </div>
+            <div>
+              <span class="text-muted text-xs block mb-1">مبلغ کل دریافتی</span>
+              <span class="font-bold text-green-600 text-lg">{{ toPersianDigits((payment.paidAmount || 0).toLocaleString()) }} تومان</span>
+            </div>
+            <div>
+              <span class="text-muted text-xs block mb-1">باقیمانده</span>
+              <span class="font-bold text-red-500 text-lg">{{ toPersianDigits((payment.amount - (payment.paidAmount || 0)).toLocaleString()) }} تومان</span>
+            </div>
+            <div>
+              <span class="text-muted text-xs block mb-1">وضعیت پرداخت</span>
+              <StatusTag :status="payment.status" type="payment" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Transaction History & Form -->
+      <div class="col-12 lg:col-8">
+        <div class="surface-card p-4 border-round border-1 border-color shadow-sm mb-4">
+          <div class="flex align-items-center justify-content-between mb-3">
+            <h3 class="text-lg font-bold m-0">تاریخچه تراکنش‌های دریافتی</h3>
+            <PermissionGate permission="payments:update">
+              <Button label="ثبت تراکنش جدید" icon="pi pi-plus" size="small" severity="success" @click="showTransactionModal = true" />
+            </PermissionGate>
+          </div>
+
+          <DataTable :value="payment.transactions || []" class="p-datatable-sm text-sm">
+            <Column field="amount" header="مبلغ تراکنش">
+              <template #body="{ data }">
+                {{ toPersianDigits(data.amount?.toLocaleString()) }} تومان
+              </template>
+            </Column>
+            <Column field="method" header="روش پرداخت">
+              <template #body="{ data }">
+                <Tag :value="data.method === 'online' ? 'درگاه آنلاین' : (data.method === 'card' ? 'کارت به کارت' : 'نقدی')" severity="info" />
+              </template>
+            </Column>
+            <Column field="receiptNumber" header="شماره فیش / پیگیری">
+              <template #body="{ data }">
+                <span dir="ltr">{{ toPersianDigits(data.receiptNumber || '-') }}</span>
+              </template>
+            </Column>
+            <Column field="createdAt" header="تاریخ ثبت">
+              <template #body="{ data }">
+                {{ formatJalali(data.createdAt || data.date) }}
+              </template>
+            </Column>
+          </DataTable>
+        </div>
+      </div>
+    </div>
+
+    <!-- Record New Transaction Modal -->
+    <Dialog v-model:visible="showTransactionModal" header="ثبت تراکنش جدید" modal :style="{ width: '450px' }">
+      <div class="flex flex-column gap-3 py-2">
+        <div class="flex flex-column gap-2">
+          <label class="font-semibold text-sm">مبلغ واریزی (تومان) *</label>
+          <InputNumber v-model="trxForm.amount" class="w-full text-sm" suffix=" تومان" />
+        </div>
+        <div class="flex flex-column gap-2">
+          <label class="font-semibold text-sm">روش پرداخت *</label>
+          <Dropdown v-model="trxForm.method" :options="methodOptions" optionLabel="label" optionValue="value" class="w-full text-sm" />
+        </div>
+        <div class="flex flex-column gap-2">
+          <label class="font-semibold text-sm">شماره فیش / پیگیری *</label>
+          <InputText v-model.trim="trxForm.receiptNumber" class="w-full text-sm" dir="ltr" />
+        </div>
+      </div>
+      <template #footer>
+        <Button label="انصراف" text severity="secondary" @click="showTransactionModal = false" />
+        <Button label="ثبت تراکنش" icon="pi pi-check" severity="success" :loading="isSubmittingTrx" @click="handleRecordTransaction" />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { paymentApi } from '@/api/paymentApi';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import PageHeader from '@/components/common/PageHeader.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import Button from 'primevue/button';
+import Tag from 'primevue/tag';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Dialog from 'primevue/dialog';
+import Dropdown from 'primevue/select';
+import InputText from 'primevue/inputtext';
+import InputNumber from 'primevue/inputnumber';
+
+const route = useRoute();
+const paymentId = route.params.id;
+const { toPersianDigits, formatJalali } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const payment = ref(null);
+const showTransactionModal = ref(false);
+const isSubmittingTrx = ref(false);
+
+const methodOptions = [
+  { label: 'کارت به کارت', value: 'card' },
+  { label: 'درگاه آنلاین', value: 'online' },
+  { label: 'نقدی / شبا', value: 'cash' }
+];
+
+const trxForm = reactive({
+  amount: 500000,
+  method: 'card',
+  receiptNumber: ''
+});
+
+const fetchPayment = async () => {
+  try {
+    const res = await paymentApi.getOne(paymentId);
+    payment.value = res.data || res;
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const handleRecordTransaction = async () => {
+  if (!trxForm.amount) { showError('لطفا مبلغ را وارد کنید'); return; }
+  if (!trxForm.receiptNumber) { showError('لطفا شماره فیش یا پیگیری را وارد کنید'); return; }
+
+  isSubmittingTrx.value = true;
+  try {
+    await paymentApi.recordTransaction(paymentId, trxForm);
+    showSuccess('تراکنش جدید با موفقیت ثبت شد');
+    showTransactionModal.value = false;
+    fetchPayment();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isSubmittingTrx.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchPayment();
+});
+</script>
diff --git a/src/views/payments/PaymentListView.vue b/src/views/payments/PaymentListView.vue
new file mode 100644
index 0000000..5a98865
--- /dev/null
+++ b/src/views/payments/PaymentListView.vue
@@ -0,0 +1,250 @@
+<!-- /src/views/payments/PaymentListView.vue -->
+<template>
+  <div class="payment-list-view">
+    <PageHeader :title="$t('payments.title')" :subtitle="$t('payments.subtitle')">
+      <PermissionGate permission="payments:create">
+        <Button :label="$t('payments.addPayment')" icon="pi pi-plus" severity="success" @click="showCreateModal = true" />
+      </PermissionGate>
+    </PageHeader>
+
+    <DataTableWrapper
+      :items="items"
+      :totalCount="totalCount"
+      :page="queryParams.page"
+      :limit="queryParams.limit"
+      :sortBy="queryParams.sortBy"
+      :sortOrder="queryParams.sortOrder"
+      :loading="isLoading"
+      @page-change="onPageChange"
+      @sort-change="onSort"
+      @search-change="onSearch"
+    >
+      <Column field="user" header="نام دانشجو / کاربر">
+        <template #body="{ data }">
+          <router-link :to="`/payments/view/${data._id || data.id}`" class="font-bold text-color hover:text-primary">
+            {{ data.user?.name || data.userName || 'کاربر' }} {{ data.user?.surname || '' }}
+          </router-link>
+        </template>
+      </Column>
+
+      <Column field="classes" header="کلاس‌های مربوطه">
+        <template #body="{ data }">
+          <div class="flex flex-wrap gap-1" v-if="data.classes && data.classes.length">
+            <Tag v-for="c in data.classes" :key="c._id || c" :value="c.name || 'کلاس'" severity="info" class="text-xs" />
+          </div>
+          <span v-else-if="data.course" class="text-muted text-xs">{{ data.course?.title }}</span>
+          <span v-else class="text-muted text-xs">-</span>
+        </template>
+      </Column>
+
+      <Column field="amount" header="مبلغ کل (تومان)" sortable>
+        <template #body="{ data }">
+          {{ toPersianDigits((data.amount || 0).toLocaleString()) }} تومان
+        </template>
+      </Column>
+
+      <Column field="paidAmount" header="مبلغ پرداختی">
+        <template #body="{ data }">
+          {{ toPersianDigits((data.paidAmount || 0).toLocaleString()) }} تومان
+        </template>
+      </Column>
+
+      <Column field="dueDate" header="تاریخ سررسید" sortable>
+        <template #body="{ data }">
+          {{ formatJalali(data.dueDate) }}
+        </template>
+      </Column>
+
+      <Column field="status" header="وضعیت">
+        <template #body="{ data }">
+          <StatusTag :status="data.status" type="payment" />
+        </template>
+      </Column>
+
+      <Column header="عملیات" style="width: 110px">
+        <template #body="{ data }">
+          <div class="flex align-items-center gap-1">
+            <PermissionGate permission="payments:read">
+              <Button icon="pi pi-eye" text rounded size="small" v-tooltip.top="'مشاهده'" @click="$router.push(`/payments/view/${data._id || data.id}`)" />
+            </PermissionGate>
+
+            <PermissionGate permission="payments:delete">
+              <Button icon="pi pi-trash" text rounded size="small" severity="danger" v-tooltip.top="'حذف'" @click="confirmDelete(data)" />
+            </PermissionGate>
+          </div>
+        </template>
+      </Column>
+    </DataTableWrapper>
+
+    <!-- Create Payment Modal -->
+    <Dialog v-model:visible="showCreateModal" header="ایجاد صورتحساب جدید" modal :style="{ width: '480px' }">
+      <div class="flex flex-column gap-3 py-2">
+        <div class="flex flex-column gap-2">
+          <label class="font-semibold text-sm">انتخاب کاربر / دانشجو *</label>
+          <Dropdown v-model="createForm.user" :options="usersList" optionLabel="fullName" optionValue="_id" filter placeholder="کاربر را انتخاب کنید" class="w-full text-sm" />
+        </div>
+
+        <div class="flex flex-column gap-2">
+          <label class="font-semibold text-sm">انتخاب یک یا چند کلاس مربوطه *</label>
+          <MultiSelect
+            v-model="createForm.classes"
+            :options="classesList"
+            optionLabel="name"
+            optionValue="_id"
+            display="chip"
+            placeholder="کلاس‌ها را انتخاب کنید"
+            class="w-full text-sm"
+            @change="onClassesSelected"
+          />
+        </div>
+
+        <div class="flex flex-column gap-2">
+          <label class="font-semibold text-sm">مبلغ کل صورتحساب (تومان) *</label>
+          <InputNumber v-model="createForm.amount" class="w-full text-sm" suffix=" تومان" />
+        </div>
+
+        <div class="flex flex-column gap-2">
+          <label class="font-semibold text-sm">تاریخ سررسید *</label>
+          <DatePicker v-model="createForm.dueDate" class="w-full text-sm" placeholder="1403/01/01" />
+        </div>
+      </div>
+      <template #footer>
+        <Button label="انصراف" text severity="secondary" @click="showCreateModal = false" />
+        <Button label="ایجاد صورتحساب" icon="pi pi-check" severity="success" :loading="isCreating" @click="handleCreatePayment" />
+      </template>
+    </Dialog>
+
+    <ConfirmDeleteDialog
+      v-model="deleteDialogVisible"
+      :loading="isDeleting"
+      @confirm="handleDelete"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { useDataTable } from '@/composables/useDataTable';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import { paymentApi } from '@/api/paymentApi';
+import { userApi } from '@/api/userApi';
+import { classApi } from '@/api/classApi';
+import PageHeader from '@/components/common/PageHeader.vue';
+import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
+import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+import Dialog from 'primevue/dialog';
+import Dropdown from 'primevue/select';
+import MultiSelect from 'primevue/multiselect';
+import InputNumber from 'primevue/inputnumber';
+import DatePicker from 'vue3-persian-datetime-picker';
+
+const { toPersianDigits, formatJalali } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const {
+  items,
+  totalCount,
+  isLoading,
+  queryParams,
+  loadData,
+  onPageChange,
+  onSort,
+  onSearch
+} = useDataTable(paymentApi.getAll);
+
+const showCreateModal = ref(false);
+const usersList = ref([]);
+const classesList = ref([]);
+const isCreating = ref(false);
+
+const createForm = reactive({
+  user: null,
+  classes: [],
+  amount: 0,
+  dueDate: ''
+});
+
+const deleteDialogVisible = ref(false);
+const selectedPayment = ref(null);
+const isDeleting = ref(false);
+
+const onClassesSelected = () => {
+  if (!createForm.classes || createForm.classes.length === 0) return;
+  let totalFee = 0;
+  createForm.classes.forEach(classId => {
+    const c = classesList.value.find(item => (item._id || item.id) === classId);
+    if (c) {
+      totalFee += (c.tuitionFee || c.course?.price || 0);
+    }
+  });
+  if (totalFee > 0) {
+    createForm.amount = totalFee;
+  }
+};
+
+const fetchDropdownData = async () => {
+  try {
+    const [uRes, cRes] = await Promise.all([
+      userApi.getAll({ limit: 150 }),
+      classApi.getAll({ limit: 100 })
+    ]);
+    const uData = uRes.data || uRes;
+    const rawUsers = uData.items || uData.users || uData || [];
+    usersList.value = rawUsers.map(u => ({ ...u, fullName: `${u.name} ${u.surname}` }));
+
+    const cData = cRes.data || cRes;
+    classesList.value = cData.items || cData.classes || cData || [];
+  } catch (e) {
+    console.warn('Dropdown fetch error:', e);
+  }
+};
+
+const handleCreatePayment = async () => {
+  if (!createForm.user) { showError('لطفا کاربر را انتخاب کنید'); return; }
+  if (!createForm.amount) { showError('لطفا مبلغ را وارد کنید'); return; }
+  if (!createForm.dueDate) { showError('لطفا تاریخ سررسید را وارد کنید'); return; }
+
+  isCreating.value = true;
+  try {
+    await paymentApi.create(createForm);
+    showSuccess('صورتحساب جدید با موفقیت ایجاد شد');
+    showCreateModal.value = false;
+    loadData();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isCreating.value = false;
+  }
+};
+
+const confirmDelete = (payment) => {
+  selectedPayment.value = payment;
+  deleteDialogVisible.value = true;
+};
+
+const handleDelete = async () => {
+  if (!selectedPayment.value) return;
+  isDeleting.value = true;
+  try {
+    await paymentApi.delete(selectedPayment.value._id || selectedPayment.value.id);
+    showSuccess('صورتحساب با موفقیت حذف شد');
+    deleteDialogVisible.value = false;
+    loadData();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isDeleting.value = false;
+  }
+};
+
+onMounted(() => {
+  loadData();
+  fetchDropdownData();
+});
+</script>
diff --git a/src/views/professors/ProfessorFormView.vue b/src/views/professors/ProfessorFormView.vue
new file mode 100644
index 0000000..4f55757
--- /dev/null
+++ b/src/views/professors/ProfessorFormView.vue
@@ -0,0 +1,112 @@
+<!-- /src/views/professors/ProfessorFormView.vue -->
+<template>
+  <div class="professor-form-view w-full max-w-4xl mx-auto">
+    <PageHeader
+      :title="isEditMode ? $t('professors.editProfessor') : $t('professors.addProfessor')"
+      :subtitle="isEditMode ? 'ویرایش رزومه و تخصص‌های استاد' : 'ثبت نام و اطلاعات استاد جدید'"
+    >
+      <Button label="انصراف" text severity="secondary" @click="$router.push('/professors')" />
+    </PageHeader>
+
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm">
+      <form @submit.prevent="handleSubmit" class="grid">
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.name') }} *</label>
+          <InputText v-model.trim="form.name" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.surname') }} *</label>
+          <InputText v-model.trim="form.surname" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.phone') }} *</label>
+          <InputText v-model.trim="form.phone" class="w-full text-sm" dir="ltr" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.email') }}</label>
+          <InputText v-model.trim="form.email" class="w-full text-sm" dir="ltr" />
+        </div>
+
+        <div class="col-12 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('professors.bio') }}</label>
+          <Textarea v-model="form.bio" rows="3" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 flex justify-content-end gap-2 mt-4 pt-3 border-top-1 border-color">
+          <Button label="انصراف" text severity="secondary" @click="$router.push('/professors')" />
+          <Button type="submit" :label="$t('app.save')" icon="pi pi-check" :loading="isSubmitting" />
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { professorApi } from '@/api/professorApi';
+import { useToast } from '@/composables/useToast';
+import PageHeader from '@/components/common/PageHeader.vue';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import Button from 'primevue/button';
+
+const route = useRoute();
+const router = useRouter();
+const { showSuccess, showError } = useToast();
+
+const professorId = route.params.id;
+const isEditMode = computed(() => !!professorId);
+const isSubmitting = ref(false);
+
+const form = reactive({
+  name: '',
+  surname: '',
+  phone: '',
+  email: '',
+  bio: ''
+});
+
+const fetchProfessor = async () => {
+  if (!professorId) return;
+  try {
+    const res = await professorApi.getOne(professorId);
+    const data = res.data || res;
+    Object.assign(form, {
+      name: data.name || '',
+      surname: data.surname || '',
+      phone: data.phone || '',
+      email: data.email || '',
+      bio: data.bio || ''
+    });
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const handleSubmit = async () => {
+  if (!form.name || !form.surname) { showError('نام و نام خانوادگی الزامی است'); return; }
+  isSubmitting.value = true;
+  try {
+    if (isEditMode.value) {
+      await professorApi.update(professorId, form);
+      showSuccess('اطلاعات استاد با موفقیت ویرایش شد');
+    } else {
+      await professorApi.create(form);
+      showSuccess('استاد جدید با موفقیت ایجاد شد');
+    }
+    router.push('/professors');
+  } catch (err) {
+    showError(err);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchProfessor();
+});
+</script>
diff --git a/src/views/professors/ProfessorListView.vue b/src/views/professors/ProfessorListView.vue
new file mode 100644
index 0000000..840db00
--- /dev/null
+++ b/src/views/professors/ProfessorListView.vue
@@ -0,0 +1,130 @@
+<!-- /src/views/professors/ProfessorListView.vue -->
+<template>
+  <div class="professor-list-view">
+    <PageHeader :title="$t('professors.title')" :subtitle="$t('professors.subtitle')">
+      <PermissionGate permission="professors:create">
+        <Button :label="$t('professors.addProfessor')" icon="pi pi-plus" @click="$router.push('/professors/create')" />
+      </PermissionGate>
+    </PageHeader>
+
+    <DataTableWrapper
+      :items="items"
+      :totalCount="totalCount"
+      :page="queryParams.page"
+      :limit="queryParams.limit"
+      :sortBy="queryParams.sortBy"
+      :sortOrder="queryParams.sortOrder"
+      :loading="isLoading"
+      @page-change="onPageChange"
+      @sort-change="onSort"
+      @search-change="onSearch"
+    >
+      <Column field="name" header="نام و نام خانوادگی" sortable>
+        <template #body="{ data }">
+          <span class="font-bold text-color">{{ data.name }} {{ data.surname }}</span>
+        </template>
+      </Column>
+
+      <Column field="specialization" header="تخصص">
+        <template #body="{ data }">
+          <Tag :value="data.specialization || 'عمومی'" severity="secondary" />
+        </template>
+      </Column>
+
+      <Column field="phoneNumber" header="شماره همراه">
+        <template #body="{ data }">
+          {{ toPersianDigits(data.phoneNumber || data.phone) || '-' }}
+        </template>
+      </Column>
+
+      <Column field="email" header="ایمیل">
+        <template #body="{ data }">
+          {{ data.email || '-' }}
+        </template>
+      </Column>
+
+      <Column field="activeCoursesCount" header="دوره‌های فعال">
+        <template #body="{ data }">
+          {{ toPersianDigits(data.activeCoursesCount || data.courses?.length || 0) }}
+        </template>
+      </Column>
+
+      <Column header="عملیات" style="width: 110px">
+        <template #body="{ data }">
+          <div class="flex align-items-center gap-1">
+            <PermissionGate permission="professors:update">
+              <Button icon="pi pi-pencil" text rounded size="small" severity="warning" v-tooltip.top="'ویرایش'" @click="$router.push(`/professors/edit/${data._id || data.id}`)" />
+            </PermissionGate>
+
+            <PermissionGate permission="professors:delete">
+              <Button icon="pi pi-trash" text rounded size="small" severity="danger" v-tooltip.top="'حذف'" @click="confirmDelete(data)" />
+            </PermissionGate>
+          </div>
+        </template>
+      </Column>
+    </DataTableWrapper>
+
+    <ConfirmDeleteDialog
+      v-model="deleteDialogVisible"
+      :loading="isDeleting"
+      @confirm="handleDelete"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useDataTable } from '@/composables/useDataTable';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import { professorApi } from '@/api/professorApi';
+import PageHeader from '@/components/common/PageHeader.vue';
+import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
+import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+
+const { toPersianDigits } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const {
+  items,
+  totalCount,
+  isLoading,
+  queryParams,
+  loadData,
+  onPageChange,
+  onSort,
+  onSearch
+} = useDataTable(professorApi.getAll);
+
+const deleteDialogVisible = ref(false);
+const selectedProf = ref(null);
+const isDeleting = ref(false);
+
+const confirmDelete = (prof) => {
+  selectedProf.value = prof;
+  deleteDialogVisible.value = true;
+};
+
+const handleDelete = async () => {
+  if (!selectedProf.value) return;
+  isDeleting.value = true;
+  try {
+    await professorApi.delete(selectedProf.value._id || selectedProf.value.id);
+    showSuccess('استاد با موفقیت حذف شد');
+    deleteDialogVisible.value = false;
+    loadData();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isDeleting.value = false;
+  }
+};
+
+onMounted(() => {
+  loadData();
+});
+</script>
diff --git a/src/views/roles/RoleFormView.vue b/src/views/roles/RoleFormView.vue
new file mode 100644
index 0000000..c60526b
--- /dev/null
+++ b/src/views/roles/RoleFormView.vue
@@ -0,0 +1,306 @@
+<!-- /src/views/roles/RoleFormView.vue -->
+<template>
+  <div class="role-form-view w-full max-w-5xl mx-auto">
+    <PageHeader
+      :title="isEditMode ? $t('roles.editRole') : $t('roles.addRole')"
+      :subtitle="isEditMode ? 'ویرایش مشخصات نقش و سطح دسترسی‌ها' : 'ایجاد نقش سیستمی جدید'"
+    >
+      <Button label="انصراف" text severity="secondary" @click="$router.push('/roles')" />
+    </PageHeader>
+
+    <div class="grid">
+      <!-- Basic Info -->
+      <div class="col-12">
+        <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm mb-4">
+          <h2 class="text-base font-bold text-color mb-4 pb-2 border-bottom-1 border-color">مشخصات نقش</h2>
+          <div class="grid">
+            <div class="col-12 md:col-6 flex flex-column gap-2">
+              <label class="font-semibold text-sm">{{ $t('roles.roleName') }} *</label>
+              <InputText
+                v-model.trim="form.name"
+                class="w-full text-sm"
+                :disabled="isSystemRole"
+                :placeholder="isSystemRole ? 'نقش‌های سیستمی قابل تغییر نام نیستند' : 'مثلا: مشاور، حسابدار'"
+              />
+              <small v-if="isSystemRole" class="text-orange-500 text-xs flex align-items-center gap-1">
+                <i class="pi pi-lock text-xs"></i> نقش سیستمی — نام قابل تغییر نیست
+              </small>
+            </div>
+            <div class="col-12 md:col-6 flex flex-column gap-2">
+              <label class="font-semibold text-sm">توضیحات نقش</label>
+              <InputText
+                v-model.trim="form.description"
+                class="w-full text-sm"
+                :disabled="isSystemRole"
+                placeholder="شرح وظایف و حوزه دسترسی این نقش..."
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Permissions -->
+      <div class="col-12">
+        <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm mb-4">
+          <div class="flex align-items-center justify-content-between mb-4 pb-2 border-bottom-1 border-color">
+            <h2 class="text-base font-bold text-color m-0">{{ $t('roles.permissionsTitle') }}</h2>
+            <div class="flex align-items-center gap-2">
+              <span class="text-muted text-xs">{{ selectedCount }} از {{ totalCount }} مجوز انتخاب شده</span>
+              <Button
+                :label="isAllSelected ? 'لغو انتخاب همه' : 'انتخاب همه مجوزها'"
+                :icon="isAllSelected ? 'pi pi-times-circle' : 'pi pi-check-circle'"
+                size="small"
+                :severity="isAllSelected ? 'secondary' : 'success'"
+                text
+                :disabled="isSystemRole"
+                @click="toggleSelectAll"
+              />
+            </div>
+          </div>
+
+          <div v-if="isSystemRole" class="surface-ground p-3 border-round border-1 border-color mb-4 text-sm flex align-items-center gap-2">
+            <i class="pi pi-info-circle text-primary"></i>
+            <span>مجوزهای نقش‌های سیستمی قابل تغییر نیستند. برای دیدن مجوزهای فعال این نقش، لیست زیر را مشاهده کنید.</span>
+          </div>
+
+          <div class="grid">
+            <div
+              v-for="group in permissionGroups"
+              :key="group.key"
+              class="col-12 md:col-6 xl:col-4 mb-3"
+            >
+              <div class="permission-group border-round border-1 border-color overflow-hidden">
+                <!-- Group Header -->
+                <div
+                  class="group-header p-3 flex align-items-center justify-content-between cursor-pointer"
+                  :class="getGroupHeaderClass(group)"
+                  @click="!isSystemRole && toggleGroup(group)"
+                >
+                  <div class="flex align-items-center gap-2">
+                    <i :class="group.icon" class="text-base"></i>
+                    <span class="font-semibold text-sm">{{ group.label }}</span>
+                  </div>
+                  <div class="flex align-items-center gap-2">
+                    <Badge
+                      :value="`${getGroupSelectedCount(group)}/${group.permissions.length}`"
+                      :severity="getGroupSelectedCount(group) === group.permissions.length ? 'success' : getGroupSelectedCount(group) > 0 ? 'warning' : 'secondary'"
+                    />
+                    <Checkbox
+                      :modelValue="isGroupFullySelected(group)"
+                      :indeterminate="isGroupPartiallySelected(group)"
+                      :disabled="isSystemRole"
+                      binary
+                      @click.stop="!isSystemRole && toggleGroup(group)"
+                    />
+                  </div>
+                </div>
+
+                <!-- Permission Items -->
+                <div class="group-items">
+                  <div
+                    v-for="perm in group.permissions"
+                    :key="perm.key"
+                    class="perm-item flex align-items-center gap-2 px-3 py-2 border-top-1 border-color"
+                    :class="{ 'perm-active': form.permissions.includes(perm.key) }"
+                  >
+                    <Checkbox
+                      v-model="form.permissions"
+                      :value="perm.key"
+                      :disabled="isSystemRole"
+                    />
+                    <label
+                      :for="`perm-${perm.key}`"
+                      class="text-xs flex-grow-1"
+                      :class="{ 'font-semibold text-primary': form.permissions.includes(perm.key), 'cursor-pointer': !isSystemRole }"
+                      @click="!isSystemRole && togglePermission(perm.key)"
+                    >
+                      {{ perm.label }}
+                    </label>
+                    <code class="text-xs text-muted" style="font-size: 10px;">{{ perm.key }}</code>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Submit -->
+      <div class="col-12">
+        <div class="flex justify-content-end gap-2">
+          <Button label="انصراف" text severity="secondary" @click="$router.push('/roles')" />
+          <Button
+            :label="$t('app.save')"
+            icon="pi pi-check"
+            :loading="isSubmitting"
+            :disabled="isSystemRole"
+            @click="handleSubmit"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { roleApi } from '@/api/roleApi';
+import { useToast } from '@/composables/useToast';
+import { PERMISSION_GROUPS, ALL_PERMISSIONS } from '@/constants/permissions';
+import PageHeader from '@/components/common/PageHeader.vue';
+import InputText from 'primevue/inputtext';
+import Checkbox from 'primevue/checkbox';
+import Badge from 'primevue/badge';
+import Button from 'primevue/button';
+
+const route = useRoute();
+const router = useRouter();
+const { showSuccess, showError } = useToast();
+
+const roleId = route.params.id;
+const isEditMode = computed(() => !!roleId);
+const isSubmitting = ref(false);
+const isSystemRole = ref(false);
+
+const permissionGroups = PERMISSION_GROUPS;
+const totalCount = ALL_PERMISSIONS.length;
+
+const form = reactive({
+  name: '',
+  description: '',
+  permissions: []
+});
+
+// ── Computed helpers ──────────────────────────────────────────────────────────
+const selectedCount = computed(() => form.permissions.length);
+
+const isAllSelected = computed(
+  () => form.permissions.length === ALL_PERMISSIONS.length
+);
+
+const isGroupFullySelected = (group) =>
+  group.permissions.every(p => form.permissions.includes(p.key));
+
+const isGroupPartiallySelected = (group) => {
+  const count = group.permissions.filter(p => form.permissions.includes(p.key)).length;
+  return count > 0 && count < group.permissions.length;
+};
+
+const getGroupSelectedCount = (group) =>
+  group.permissions.filter(p => form.permissions.includes(p.key)).length;
+
+const getGroupHeaderClass = (group) => {
+  if (isGroupFullySelected(group)) return 'bg-green-50';
+  if (isGroupPartiallySelected(group)) return 'bg-orange-50';
+  return 'surface-ground';
+};
+
+// ── Actions ───────────────────────────────────────────────────────────────────
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    form.permissions = [];
+  } else {
+    form.permissions = [...ALL_PERMISSIONS];
+  }
+};
+
+const toggleGroup = (group) => {
+  const groupKeys = group.permissions.map(p => p.key);
+  if (isGroupFullySelected(group)) {
+    form.permissions = form.permissions.filter(p => !groupKeys.includes(p));
+  } else {
+    const toAdd = groupKeys.filter(k => !form.permissions.includes(k));
+    form.permissions = [...form.permissions, ...toAdd];
+  }
+};
+
+const togglePermission = (key) => {
+  const idx = form.permissions.indexOf(key);
+  if (idx === -1) {
+    form.permissions.push(key);
+  } else {
+    form.permissions.splice(idx, 1);
+  }
+};
+
+// ── API ───────────────────────────────────────────────────────────────────────
+const fetchRole = async () => {
+  if (!roleId) return;
+  try {
+    const res = await roleApi.getOne(roleId);
+    const data = res.data || res;
+    isSystemRole.value = !!data.isSystem;
+    Object.assign(form, {
+      name: data.name || '',
+      description: data.description || '',
+      permissions: data.permissions || []
+    });
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const handleSubmit = async () => {
+  if (!form.name) { showError('نام نقش الزامی است'); return; }
+  if (isSystemRole.value) { showError('نقش‌های سیستمی قابل ویرایش نیستند'); return; }
+
+  isSubmitting.value = true;
+  try {
+    if (isEditMode.value) {
+      await roleApi.update(roleId, form);
+      showSuccess('نقش با موفقیت ویرایش شد');
+    } else {
+      await roleApi.create(form);
+      showSuccess('نقش جدید با موفقیت ایجاد شد');
+    }
+    router.push('/roles');
+  } catch (err) {
+    showError(err);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchRole();
+});
+</script>
+
+<style scoped lang="scss">
+.permission-group {
+  background: var(--surface-card);
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.group-header {
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--surface-hover) !important;
+  }
+}
+
+.perm-item {
+  transition: background-color 0.12s ease;
+
+  &:hover {
+    background-color: var(--surface-hover);
+  }
+
+  &.perm-active {
+    background-color: var(--primary-color-light);
+  }
+}
+
+.bg-green-50 {
+  background-color: rgba(16, 185, 129, 0.08) !important;
+}
+.bg-orange-50 {
+  background-color: rgba(249, 115, 22, 0.06) !important;
+}
+</style>
diff --git a/src/views/roles/RoleListView.vue b/src/views/roles/RoleListView.vue
new file mode 100644
index 0000000..50da5d5
--- /dev/null
+++ b/src/views/roles/RoleListView.vue
@@ -0,0 +1,139 @@
+<!-- /src/views/roles/RoleListView.vue -->
+<template>
+  <div class="role-list-view">
+    <PageHeader :title="$t('roles.title')" :subtitle="$t('roles.subtitle')">
+      <PermissionGate permission="roles:create">
+        <Button :label="$t('roles.addRole')" icon="pi pi-shield" @click="$router.push('/roles/create')" />
+      </PermissionGate>
+    </PageHeader>
+
+    <DataTableWrapper
+      :items="items"
+      :totalCount="totalCount"
+      :page="queryParams.page"
+      :limit="queryParams.limit"
+      :sortBy="queryParams.sortBy"
+      :sortOrder="queryParams.sortOrder"
+      :loading="isLoading"
+      @page-change="onPageChange"
+      @sort-change="onSort"
+      @search-change="onSearch"
+    >
+      <Column field="name" header="نام نقش" sortable>
+        <template #body="{ data }">
+          <span class="font-bold text-color">{{ data.name }}</span>
+          <Tag v-if="data.isSystem" value="سیستمی" severity="danger" class="mr-2 text-xs" />
+        </template>
+      </Column>
+
+      <Column field="description" header="توضیحات">
+        <template #body="{ data }">
+          {{ data.description || '-' }}
+        </template>
+      </Column>
+
+      <Column field="permissionCount" header="تعداد مجوزها">
+        <template #body="{ data }">
+          <Badge :value="toPersianDigits(data.permissions?.length || 0)" severity="info" />
+        </template>
+      </Column>
+
+      <Column header="عملیات" style="width: 110px">
+        <template #body="{ data }">
+          <div class="flex align-items-center gap-1">
+            <PermissionGate permission="roles:update">
+              <Button
+                icon="pi pi-pencil"
+                text
+                rounded
+                size="small"
+                severity="warning"
+                :disabled="data.isSystem"
+                v-tooltip.top="data.isSystem ? $t('roles.systemRoleWarning') : 'ویرایش'"
+                @click="$router.push(`/roles/edit/${data._id || data.id}`)"
+              />
+            </PermissionGate>
+
+            <PermissionGate permission="roles:delete">
+              <Button
+                icon="pi pi-trash"
+                text
+                rounded
+                size="small"
+                severity="danger"
+                :disabled="data.isSystem"
+                v-tooltip.top="data.isSystem ? $t('roles.systemRoleWarning') : 'حذف'"
+                @click="confirmDelete(data)"
+              />
+            </PermissionGate>
+          </div>
+        </template>
+      </Column>
+    </DataTableWrapper>
+
+    <ConfirmDeleteDialog
+      v-model="deleteDialogVisible"
+      :loading="isDeleting"
+      @confirm="handleDelete"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useDataTable } from '@/composables/useDataTable';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import { roleApi } from '@/api/roleApi';
+import PageHeader from '@/components/common/PageHeader.vue';
+import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
+import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+import Badge from 'primevue/badge';
+
+const { toPersianDigits } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const {
+  items,
+  totalCount,
+  isLoading,
+  queryParams,
+  loadData,
+  onPageChange,
+  onSort,
+  onSearch
+} = useDataTable(roleApi.getAll);
+
+const deleteDialogVisible = ref(false);
+const selectedRole = ref(null);
+const isDeleting = ref(false);
+
+const confirmDelete = (role) => {
+  if (role.isSystem) return;
+  selectedRole.value = role;
+  deleteDialogVisible.value = true;
+};
+
+const handleDelete = async () => {
+  if (!selectedRole.value) return;
+  isDeleting.value = true;
+  try {
+    await roleApi.delete(selectedRole.value._id || selectedRole.value.id);
+    showSuccess('نقش با موفقیت حذف شد');
+    deleteDialogVisible.value = false;
+    loadData();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isDeleting.value = false;
+  }
+};
+
+onMounted(() => {
+  loadData();
+});
+</script>
diff --git a/src/views/sessions/SessionFormView.vue b/src/views/sessions/SessionFormView.vue
new file mode 100644
index 0000000..13f549e
--- /dev/null
+++ b/src/views/sessions/SessionFormView.vue
@@ -0,0 +1,247 @@
+<!-- /src/views/sessions/SessionFormView.vue -->
+<template>
+  <div class="session-form-view w-full max-w-5xl mx-auto">
+    <PageHeader
+      :title="isEditMode ? $t('sessions.editSession') : $t('sessions.addSession')"
+      :subtitle="isEditMode ? 'ویرایش اطلاعات جلسه آموزشی' : 'تعریف جلسه جدید'"
+    >
+      <Button label="انصراف" text severity="secondary" @click="$router.push('/sessions')" />
+    </PageHeader>
+
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm">
+      <form @submit.prevent="handleSubmit" class="grid">
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">انتخاب دوره *</label>
+          <Dropdown
+            v-model="form.course"
+            :options="courses"
+            optionLabel="title"
+            optionValue="_id"
+            placeholder="دوره را انتخاب کنید"
+            class="w-full text-sm"
+            filter
+            @change="onCourseChange"
+          />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">کلاس *</label>
+          <Dropdown
+            v-model="form.class"
+            :options="classes"
+            optionLabel="name"
+            optionValue="_id"
+            placeholder="کلاس را انتخاب کنید"
+            class="w-full text-sm"
+            :disabled="!form.course"
+            filter
+          />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">استاد مدرس *</label>
+          <Dropdown v-model="form.professor" :options="professors" optionLabel="name" optionValue="_id" placeholder="استاد را انتخاب کنید" class="w-full text-sm" filter />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('sessions.date') }} *</label>
+          <DatePicker v-model="form.day" class="w-full text-sm" placeholder="1403/01/01" />
+        </div>
+
+        <div class="col-12 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('courses.startTime') }} *</label>
+          <InputText v-model="form.startTime" class="w-full text-sm" dir="ltr" placeholder="19:00" />
+        </div>
+
+        <div class="col-12 md:col-3 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('courses.endTime') }} *</label>
+          <InputText v-model="form.endTime" class="w-full text-sm" dir="ltr" placeholder="20:30" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">وضعیت جلسه</label>
+          <Dropdown v-model="form.status" :options="statusOptions" optionLabel="label" optionValue="value" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">مکان برگزاری</label>
+          <InputText v-model="form.place" class="w-full text-sm" placeholder="کلاس / آنلاین / آدرس" />
+        </div>
+
+        <div class="col-12 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('sessions.topic') }}</label>
+          <InputText v-model="form.topic" class="w-full text-sm" placeholder="عنوان یا موضوع این جلسه" />
+        </div>
+
+        <div class="col-12 flex flex-column gap-2">
+          <label class="font-semibold text-sm">یادداشت جلسه</label>
+          <Textarea v-model="form.note" rows="3" class="w-full text-sm" placeholder="یادداشت داخلی درباره این جلسه…" />
+        </div>
+
+        <div class="col-12 flex justify-content-end gap-2 mt-4 pt-3 border-top-1 border-color">
+          <Button label="انصراف" text severity="secondary" @click="$router.push('/sessions')" />
+          <Button type="submit" :label="$t('app.save')" icon="pi pi-check" :loading="isSubmitting" />
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import moment from 'jalali-moment';
+import { sessionApi } from '@/api/sessionApi';
+import { courseApi } from '@/api/courseApi';
+import { classApi } from '@/api/classApi';
+import { professorApi } from '@/api/professorApi';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import PageHeader from '@/components/common/PageHeader.vue';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import Dropdown from 'primevue/select';
+import DatePicker from 'vue3-persian-datetime-picker';
+import Button from 'primevue/button';
+
+const route = useRoute();
+const router = useRouter();
+const { showSuccess, showError } = useToast();
+const { toLatinDigits } = usePersianDate();
+
+const sessionId = route.params.id;
+const isEditMode = computed(() => !!sessionId);
+
+const isSubmitting = ref(false);
+const courses = ref([]);
+const classes = ref([]);
+const professors = ref([]);
+
+const statusOptions = [
+  { label: 'طبق برنامه', value: 'scheduled' },
+  { label: 'برگزارشده', value: 'held' },
+  { label: 'لغوشده', value: 'cancelled' }
+];
+
+const form = reactive({
+  course: null,
+  class: null,
+  professor: null,
+  day: moment().locale('fa').format('jYYYY/jMM/jDD'),
+  startTime: '19:00',
+  endTime: '20:30',
+  status: 'scheduled',
+  topic: '',
+  place: '',
+  note: ''
+});
+
+const toGregorianIso = (jalaliValue) => {
+  if (!jalaliValue) return null;
+  if (jalaliValue instanceof Date) return jalaliValue.toISOString();
+  const latin = toLatinDigits(String(jalaliValue));
+  const m = moment(latin, 'jYYYY/jMM/jDD');
+  return m.isValid() ? m.toDate().toISOString() : null;
+};
+
+const toJalaliDisplay = (value) => {
+  if (!value) return '';
+  return moment(value).locale('fa').format('jYYYY/jMM/jDD');
+};
+
+const loadClasses = async (courseId) => {
+  if (!courseId) {
+    classes.value = [];
+    return;
+  }
+  const res = await classApi.getAll({ limit: 100, courseId });
+  const data = res.data || res;
+  classes.value = Array.isArray(data) ? data : (data.items || data.data || []);
+};
+
+const onCourseChange = async () => {
+  form.class = null;
+  await loadClasses(form.course);
+};
+
+const fetchData = async () => {
+  try {
+    const [cRes, pRes] = await Promise.all([
+      courseApi.getAll({ limit: 100 }),
+      professorApi.getAll({ limit: 100 })
+    ]);
+
+    const cData = cRes.data || cRes;
+    courses.value = Array.isArray(cData) ? cData : (cData.items || cData.courses || cData.data || []);
+
+    const pData = pRes.data || pRes;
+    professors.value = (Array.isArray(pData) ? pData : (pData.items || pData.professors || pData.data || [])).map((p) => ({
+      ...p,
+      name: `${p.name || ''} ${p.surname || ''}`.trim()
+    }));
+
+    if (sessionId) {
+      const res = await sessionApi.getOne(sessionId);
+      const data = res.data || res;
+      const courseId = data.course?._id || data.course || null;
+      await loadClasses(courseId);
+      Object.assign(form, {
+        course: courseId,
+        class: data.class?._id || data.class || null,
+        professor: data.professor?._id || data.professor || null,
+        day: toJalaliDisplay(data.day || data.date),
+        startTime: data.startTime || '19:00',
+        endTime: data.endTime || '20:30',
+        status: data.status || 'scheduled',
+        topic: data.topic || '',
+        place: data.place || '',
+        note: data.note || ''
+      });
+    }
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const handleSubmit = async () => {
+  if (!form.course) { showError('لطفا دوره را انتخاب کنید'); return; }
+  if (!form.class) { showError('لطفا کلاس را انتخاب کنید'); return; }
+  if (!form.professor) { showError('لطفا استاد را انتخاب کنید'); return; }
+  if (!form.day) { showError('لطفا تاریخ جلسه را وارد کنید'); return; }
+  if (!form.startTime || !form.endTime) { showError('ساعت شروع و پایان الزامی است'); return; }
+
+  const dayIso = toGregorianIso(form.day);
+  if (!dayIso) { showError('تاریخ جلسه نامعتبر است'); return; }
+
+  isSubmitting.value = true;
+  try {
+    const payload = {
+      course: form.course,
+      class: form.class,
+      professor: form.professor,
+      day: dayIso,
+      startTime: form.startTime,
+      endTime: form.endTime,
+      status: form.status,
+      topic: form.topic,
+      place: form.place,
+      note: form.note
+    };
+
+    if (isEditMode.value) {
+      await sessionApi.update(sessionId, payload);
+      showSuccess('جلسه با موفقیت ویرایش شد');
+    } else {
+      await sessionApi.create(payload);
+      showSuccess('جلسه جدید با موفقیت ایجاد شد');
+    }
+    router.push('/sessions');
+  } catch (err) {
+    showError(err);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+onMounted(fetchData);
+</script>
diff --git a/src/views/sessions/SessionListView.vue b/src/views/sessions/SessionListView.vue
new file mode 100644
index 0000000..a04a3d6
--- /dev/null
+++ b/src/views/sessions/SessionListView.vue
@@ -0,0 +1,255 @@
+<!-- /src/views/sessions/SessionListView.vue -->
+<template>
+  <div class="session-list-view">
+    <PageHeader :title="$t('sessions.title')" :subtitle="$t('sessions.subtitle')">
+      <PermissionGate permission="sessions:create">
+        <Button :label="$t('sessions.addSession')" icon="pi pi-plus" @click="$router.push('/sessions/create')" />
+      </PermissionGate>
+    </PageHeader>
+
+    <DataTableWrapper
+      :items="items"
+      :totalCount="totalCount"
+      :page="queryParams.page"
+      :limit="queryParams.limit"
+      :sortBy="queryParams.sortBy"
+      :sortOrder="queryParams.sortOrder"
+      :loading="isLoading"
+      selectable
+      v-model:selection="selectedSessions"
+      @page-change="onPageChange"
+      @sort-change="onSort"
+      @search-change="onSearch"
+    >
+      <template #toolbar>
+        <div v-if="selectedSessions.length" class="flex align-items-center gap-2 flex-wrap justify-content-end">
+          <Tag :value="`${toPersianDigits(selectedSessions.length)} انتخاب‌شده`" severity="info" />
+          <PermissionGate permission="sessions:update">
+            <Select
+              v-model="bulkStatus"
+              :options="statusOptions"
+              optionLabel="label"
+              optionValue="value"
+              placeholder="تغییر وضعیت"
+              class="text-sm"
+              style="min-width: 10rem"
+            />
+            <Button
+              label="اعمال وضعیت"
+              icon="pi pi-check"
+              size="small"
+              :loading="isBulkUpdating"
+              :disabled="!bulkStatus"
+              @click="applyBulkStatus"
+            />
+          </PermissionGate>
+          <PermissionGate permission="sessions:delete">
+            <Button
+              label="حذف انتخاب‌شده‌ها"
+              icon="pi pi-trash"
+              size="small"
+              severity="danger"
+              outlined
+              @click="confirmBulkDelete"
+            />
+          </PermissionGate>
+          <Button label="لغو انتخاب" text size="small" severity="secondary" @click="selectedSessions = []" />
+        </div>
+      </template>
+
+      <Column field="topic" header="موضوع جلسه">
+        <template #body="{ data }">
+          <span class="font-semibold text-color">{{ data.topic || '—' }}</span>
+        </template>
+      </Column>
+
+      <Column field="course" header="عنوان دوره">
+        <template #body="{ data }">
+          <span class="font-bold text-color">{{ data.course?.title || data.courseTitle || '-' }}</span>
+        </template>
+      </Column>
+
+      <Column field="class" header="کلاس">
+        <template #body="{ data }">
+          {{ data.class?.name || '—' }}
+        </template>
+      </Column>
+
+      <Column field="professor" header="استاد مدرس">
+        <template #body="{ data }">
+          {{
+            data.professor
+              ? `${data.professor.name || ''} ${data.professor.surname || ''}`.trim() || '—'
+              : (data.professorName || '—')
+          }}
+        </template>
+      </Column>
+
+      <Column field="date" header="تاریخ برگزاری" sortable sortField="day">
+        <template #body="{ data }">
+          {{ formatJalali(data.day || data.date) }}
+        </template>
+      </Column>
+
+      <Column field="timeRange" header="زمان برگزاری">
+        <template #body="{ data }">
+          {{ data.startTime || '—' }} - {{ data.endTime || '—' }}
+        </template>
+      </Column>
+
+      <Column field="status" header="وضعیت">
+        <template #body="{ data }">
+          <StatusTag :status="data.status || 'scheduled'" type="session" />
+        </template>
+      </Column>
+
+      <Column header="عملیات" style="width: 170px">
+        <template #body="{ data }">
+          <div class="flex align-items-center gap-1">
+            <PermissionGate permission="sessions:attendance">
+              <Button
+                icon="pi pi-check-square"
+                text
+                rounded
+                size="small"
+                severity="success"
+                v-tooltip.top="$t('sessions.enterAttendance')"
+                @click="$router.push(`/sessions/attendance/${data._id || data.id}`)"
+              />
+            </PermissionGate>
+
+            <PermissionGate permission="sessions:update">
+              <Button icon="pi pi-pencil" text rounded size="small" severity="warning" v-tooltip.top="'ویرایش'" @click="$router.push(`/sessions/edit/${data._id || data.id}`)" />
+            </PermissionGate>
+
+            <PermissionGate permission="sessions:delete">
+              <Button icon="pi pi-trash" text rounded size="small" severity="danger" v-tooltip.top="'حذف'" @click="confirmDelete(data)" />
+            </PermissionGate>
+          </div>
+        </template>
+      </Column>
+    </DataTableWrapper>
+
+    <ConfirmDeleteDialog
+      v-model="deleteDialogVisible"
+      :loading="isDeleting"
+      :title="bulkDeleteMode ? 'حذف گروهی جلسات' : ''"
+      :message="bulkDeleteMessage"
+      @confirm="handleDeleteConfirm"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useDataTable } from '@/composables/useDataTable';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import { sessionApi } from '@/api/sessionApi';
+import PageHeader from '@/components/common/PageHeader.vue';
+import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
+import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+import Select from 'primevue/select';
+
+const { formatJalali, toPersianDigits } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const {
+  items,
+  totalCount,
+  isLoading,
+  queryParams,
+  loadData,
+  onPageChange,
+  onSort,
+  onSearch
+} = useDataTable(sessionApi.getAll, {
+  sortBy: 'day',
+  sortOrder: 'asc'
+});
+
+const selectedSessions = ref([]);
+const bulkStatus = ref(null);
+const isBulkUpdating = ref(false);
+const deleteDialogVisible = ref(false);
+const selectedSession = ref(null);
+const bulkDeleteMode = ref(false);
+const isDeleting = ref(false);
+
+const statusOptions = [
+  { label: 'طبق برنامه', value: 'scheduled' },
+  { label: 'برگزار شده', value: 'held' },
+  { label: 'لغو شده', value: 'cancelled' }
+];
+
+const selectedIds = computed(() =>
+  selectedSessions.value.map((s) => s._id || s.id).filter(Boolean)
+);
+
+const bulkDeleteMessage = computed(() => {
+  if (bulkDeleteMode.value) {
+    return `آیا از حذف ${toPersianDigits(selectedSessions.value.length)} جلسه انتخاب‌شده اطمینان دارید؟ این عملیات قابل بازگشت نیست.`;
+  }
+  return 'آیا از حذف این جلسه اطمینان دارید؟ این عملیات قابل بازگشت نیست.';
+});
+
+const confirmDelete = (session) => {
+  bulkDeleteMode.value = false;
+  selectedSession.value = session;
+  deleteDialogVisible.value = true;
+};
+
+const confirmBulkDelete = () => {
+  if (!selectedSessions.value.length) return;
+  bulkDeleteMode.value = true;
+  selectedSession.value = null;
+  deleteDialogVisible.value = true;
+};
+
+const handleDeleteConfirm = async () => {
+  isDeleting.value = true;
+  try {
+    if (bulkDeleteMode.value) {
+      const res = await sessionApi.bulkDelete(selectedIds.value);
+      const deletedCount = res?.data?.deletedCount ?? selectedIds.value.length;
+      showSuccess(`${toPersianDigits(deletedCount)} جلسه حذف شد`);
+      selectedSessions.value = [];
+    } else if (selectedSession.value) {
+      await sessionApi.delete(selectedSession.value._id || selectedSession.value.id);
+      showSuccess('جلسه با موفقیت حذف شد');
+    }
+    deleteDialogVisible.value = false;
+    await loadData();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isDeleting.value = false;
+  }
+};
+
+const applyBulkStatus = async () => {
+  if (!selectedIds.value.length || !bulkStatus.value) return;
+  isBulkUpdating.value = true;
+  try {
+    const res = await sessionApi.bulkUpdateStatus(selectedIds.value, bulkStatus.value);
+    const updatedCount = res?.data?.updatedCount ?? selectedIds.value.length;
+    showSuccess(`وضعیت ${toPersianDigits(updatedCount)} جلسه به‌روز شد`);
+    bulkStatus.value = null;
+    selectedSessions.value = [];
+    await loadData();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isBulkUpdating.value = false;
+  }
+};
+
+onMounted(() => {
+  loadData();
+});
+</script>
diff --git a/src/views/users/UserDetailView.vue b/src/views/users/UserDetailView.vue
new file mode 100644
index 0000000..cfe29f4
--- /dev/null
+++ b/src/views/users/UserDetailView.vue
@@ -0,0 +1,267 @@
+<!-- /src/views/users/UserDetailView.vue -->
+<template>
+  <div class="user-detail-view" v-if="user">
+    <PageHeader :title="`${user.name || ''} ${user.surname || ''}`" :subtitle="`کد ملی: ${toPersianDigits(user.nationalId)}`">
+      <PermissionGate permission="users:update">
+        <Button :label="$t('app.edit')" icon="pi pi-pencil" severity="warning" @click="$router.push(`/users/edit/${user._id || user.id}`)" />
+      </PermissionGate>
+      <Button label="بازگشت" icon="pi pi-arrow-left" text severity="secondary" @click="$router.push('/users')" />
+    </PageHeader>
+
+    <!-- Main Profile Tabs -->
+    <Tabs value="0" class="surface-card border-round border-1 border-color shadow-sm">
+      <TabList>
+        <Tab value="0">{{ $t('users.tabInfo') }}</Tab>
+        <Tab value="1">{{ $t('users.tabCourses') }}</Tab>
+        <Tab value="2">{{ $t('users.tabSessions') }}</Tab>
+        <Tab value="3">{{ $t('users.tabPayments') }}</Tab>
+        <Tab value="4">{{ $t('users.tabCertificates') }}</Tab>
+      </TabList>
+      <TabPanels>
+        <!-- Tab 1: User Info -->
+        <TabPanel value="0">
+          <div class="grid p-3">
+            <div class="col-12 sm:col-6 md:col-4 mb-3">
+              <span class="text-muted text-xs block mb-1">نام و نام خانوادگی</span>
+              <span class="font-bold text-color text-base">{{ user.name }} {{ user.surname }}</span>
+            </div>
+            <div class="col-12 sm:col-6 md:col-4 mb-3">
+              <span class="text-muted text-xs block mb-1">کد ملی</span>
+              <span class="font-bold text-color text-base" dir="ltr">{{ toPersianDigits(user.nationalId) }}</span>
+            </div>
+            <div class="col-12 sm:col-6 md:col-4 mb-3">
+              <span class="text-muted text-xs block mb-1">شماره همراه</span>
+              <span class="font-bold text-color text-base" dir="ltr">{{ toPersianDigits(user.phoneNumber || user.phone) }}</span>
+            </div>
+            <div class="col-12 sm:col-6 md:col-4 mb-3">
+              <span class="text-muted text-xs block mb-1">پست الکترونیکی</span>
+              <span class="font-bold text-color text-base">{{ user.email || '-' }}</span>
+            </div>
+            <div class="col-12 sm:col-6 md:col-4 mb-3">
+              <span class="text-muted text-xs block mb-1">پیام‌رسان ترجیحی</span>
+              <div class="flex flex-wrap gap-1">
+                <Tag
+                  v-for="messenger in (Array.isArray(user.preferredMessenger) ? user.preferredMessenger : (user.preferredMessenger ? [user.preferredMessenger] : ['SMS']))"
+                  :key="messenger"
+                  :value="messenger"
+                  severity="info"
+                />
+              </div>
+            </div>
+            <div class="col-12 sm:col-6 md:col-4 mb-3">
+              <span class="text-muted text-xs block mb-1">نقش سیستم</span>
+              <Tag :value="user.role?.name || 'دانشجو'" severity="secondary" />
+            </div>
+            <div class="col-12 mb-3">
+              <span class="text-muted text-xs block mb-1">آدرس سکونت</span>
+              <span class="text-color text-sm">{{ user.address || '-' }}</span>
+            </div>
+          </div>
+        </TabPanel>
+
+        <!-- Tab 2: Enrolled Courses -->
+        <TabPanel value="1">
+          <div class="p-3">
+            <div class="flex align-items-center justify-content-between mb-3">
+              <h3 class="text-lg font-bold m-0">دوره‌های ثبت‌نام شده</h3>
+              <PermissionGate permission="users:enroll">
+                <Button label="ثبت‌نام در دوره جدید" icon="pi pi-plus" size="small" @click="showEnrollModal = true" />
+              </PermissionGate>
+            </div>
+
+            <DataTable :value="enrolledCourses" class="p-datatable-sm text-sm">
+              <Column field="title" header="عنوان دوره" />
+              <Column field="type" header="نوع">
+                <template #body="{ data }">
+                  <Tag :value="data.type === 'Private' ? 'خصوصی' : 'عمومی'" :severity="data.type === 'Private' ? 'warning' : 'info'" />
+                </template>
+              </Column>
+              <Column field="price" header="شهریه">
+                <template #body="{ data }">
+                  {{ toPersianDigits(data.price?.toLocaleString()) }} تومان
+                </template>
+              </Column>
+              <Column field="enrollDate" header="تاریخ ثبت‌نام">
+                <template #body="{ data }">
+                  {{ formatJalali(data.enrollDate || data.createdAt) }}
+                </template>
+              </Column>
+            </DataTable>
+          </div>
+        </TabPanel>
+
+        <!-- Tab 3: Sessions & Attendance -->
+        <TabPanel value="2">
+          <div class="p-3">
+            <h3 class="text-lg font-bold mb-3">تاریخچه حضور و غیاب دانشجو</h3>
+            <DataTable :value="attendances" class="p-datatable-sm text-sm">
+              <Column field="sessionTitle" header="عنوان جلسه / دوره" />
+              <Column field="date" header="تاریخ جلسه">
+                <template #body="{ data }">
+                  {{ formatJalali(data.date) }}
+                </template>
+              </Column>
+              <Column field="status" header="وضعیت حضور">
+                <template #body="{ data }">
+                  <Tag :value="data.status" :severity="getAttendanceSeverity(data.status)" />
+                </template>
+              </Column>
+              <Column field="note" header="یادداشت" />
+            </DataTable>
+          </div>
+        </TabPanel>
+
+        <!-- Tab 4: Payments -->
+        <TabPanel value="3">
+          <div class="p-3">
+            <div class="flex align-items-center justify-content-between mb-3">
+              <h3 class="text-lg font-bold m-0">صورتحساب‌ها و پرداخت‌ها</h3>
+              <PermissionGate permission="payments:update">
+                <Button label="ثبت پرداخت جدید" icon="pi pi-wallet" size="small" severity="success" @click="$router.push('/payments')" />
+              </PermissionGate>
+            </div>
+
+            <DataTable :value="payments" class="p-datatable-sm text-sm">
+              <Column field="amount" header="مبلغ کل">
+                <template #body="{ data }">
+                  {{ toPersianDigits(data.amount?.toLocaleString()) }} تومان
+                </template>
+              </Column>
+              <Column field="paidAmount" header="پرداختی">
+                <template #body="{ data }">
+                  {{ toPersianDigits(data.paidAmount?.toLocaleString()) }} تومان
+                </template>
+              </Column>
+              <Column field="status" header="وضعیت">
+                <template #body="{ data }">
+                  <StatusTag :status="data.status" type="payment" />
+                </template>
+              </Column>
+              <Column field="dueDate" header="تاریخ سررسید">
+                <template #body="{ data }">
+                  {{ formatJalali(data.dueDate) }}
+                </template>
+              </Column>
+            </DataTable>
+          </div>
+        </TabPanel>
+
+        <!-- Tab 5: Certificates -->
+        <TabPanel value="4">
+          <div class="p-3">
+            <h3 class="text-lg font-bold mb-3">گواهینامه‌های صادر شده دانشجو</h3>
+            <CertificateUploader v-model="userCertificates" />
+          </div>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+
+    <!-- Enroll Modal -->
+    <Dialog v-model:visible="showEnrollModal" header="ثبت‌نام دانشجو در دوره جدید" modal :style="{ width: '450px' }">
+      <div class="flex flex-column gap-3 py-2">
+        <label class="font-semibold text-sm">انتخاب دوره آموزشی</label>
+        <Dropdown
+          v-model="selectedCourseId"
+          :options="allCourses"
+          optionLabel="title"
+          optionValue="_id"
+          placeholder="دوره را انتخاب کنید"
+          class="w-full text-sm"
+        />
+      </div>
+      <template #footer>
+        <Button label="انصراف" text severity="secondary" @click="showEnrollModal = false" />
+        <Button label="تایید ثبت‌نام" icon="pi pi-check" :loading="isEnrolling" @click="handleEnroll" />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { userApi } from '@/api/userApi';
+import { courseApi } from '@/api/courseApi';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import PageHeader from '@/components/common/PageHeader.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import CertificateUploader from '@/components/uploader/CertificateUploader.vue';
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+import Button from 'primevue/button';
+import Tag from 'primevue/tag';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Dialog from 'primevue/dialog';
+import Dropdown from 'primevue/select';
+
+const route = useRoute();
+const userId = route.params.id;
+const { toPersianDigits, formatJalali } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const user = ref(null);
+const enrolledCourses = ref([]);
+const attendances = ref([]);
+const payments = ref([]);
+const userCertificates = ref([]);
+
+const showEnrollModal = ref(false);
+const allCourses = ref([]);
+const selectedCourseId = ref(null);
+const isEnrolling = ref(false);
+
+const getAttendanceSeverity = (status) => {
+  if (status === 'حاضر' || status === 'present') return 'success';
+  if (status === 'غایب' || status === 'absent') return 'danger';
+  if (status === 'تاخیر' || status === 'late') return 'warning';
+  return 'info';
+};
+
+const fetchUserDetail = async () => {
+  try {
+    const res = await userApi.getOne(userId);
+    user.value = res.data || res;
+    enrolledCourses.value = user.value.enrolledCourses || user.value.courses || [];
+    payments.value = user.value.payments || [];
+    userCertificates.value = user.value.certificates || [];
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const fetchAllCourses = async () => {
+  try {
+    const res = await courseApi.getAll({ limit: 100 });
+    const data = res.data || res;
+    allCourses.value = data.items || data.courses || data || [];
+  } catch (e) {
+    console.warn('Courses fetch error:', e);
+  }
+};
+
+const handleEnroll = async () => {
+  if (!selectedCourseId.value) return;
+  isEnrolling.value = true;
+  try {
+    await userApi.enroll(userId, { courseId: selectedCourseId.value });
+    showSuccess('دانشجو با موفقیت در دوره ثبت‌نام شد');
+    showEnrollModal.value = false;
+    fetchUserDetail();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isEnrolling.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchUserDetail();
+  fetchAllCourses();
+});
+</script>
diff --git a/src/views/users/UserFormView.vue b/src/views/users/UserFormView.vue
new file mode 100644
index 0000000..f79a8af
--- /dev/null
+++ b/src/views/users/UserFormView.vue
@@ -0,0 +1,276 @@
+<!-- /src/views/users/UserFormView.vue -->
+<template>
+  <div class="user-form-view w-full max-w-4xl mx-auto">
+    <PageHeader
+      :title="isEditMode ? $t('users.editUser') : $t('users.addUser')"
+      :subtitle="isEditMode ? 'ویرایش اطلاعات حساب کاربر' : 'ایجاد حساب کاربری جدید — نام کاربری و رمز عبور به‌صورت خودکار ساخته و پیامک می‌شود'"
+    >
+      <Button label="انصراف" text severity="secondary" @click="$router.push('/users')" />
+    </PageHeader>
+
+    <div class="surface-card p-4 sm:p-5 border-round border-1 border-color shadow-sm">
+      <form @submit.prevent="handleSubmit" class="grid">
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.name') }} *</label>
+          <InputText v-model.trim="form.name" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.surname') }} *</label>
+          <InputText v-model.trim="form.surname" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.nationalId') }} *</label>
+          <InputText v-model.trim="form.nationalId" class="w-full text-sm" dir="ltr" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.phone') }} *</label>
+          <InputText v-model.trim="form.phone" class="w-full text-sm" dir="ltr" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.email') }}</label>
+          <InputText v-model.trim="form.email" class="w-full text-sm" dir="ltr" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.role') }} *</label>
+          <Dropdown v-model="form.role" :options="roles" optionLabel="name" optionValue="_id" placeholder="انتخاب نقش" class="w-full text-sm" />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2">
+          <label class="font-semibold text-sm">{{ $t('users.preferredMessenger') }}</label>
+          <MultiSelect
+            v-model="form.preferredMessenger"
+            :options="messengerOptions"
+            optionLabel="label"
+            optionValue="value"
+            display="chip"
+            placeholder="اختیاری — چند مورد قابل انتخاب"
+            class="w-full text-sm preferred-messenger-select"
+            :showClear="false"
+            :maxSelectedLabels="3"
+            selectedItemsLabel="{0} مورد انتخاب شده"
+          />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2" v-if="isEditMode">
+          <label class="font-semibold text-sm">{{ $t('auth.username') }}</label>
+          <InputText
+            v-model.trim="form.username"
+            class="w-full text-sm"
+            dir="ltr"
+            disabled
+          />
+        </div>
+
+        <div class="col-12 md:col-6 flex flex-column gap-2" v-if="isEditMode">
+          <label class="font-semibold text-sm">رمز عبور جدید (اختیاری)</label>
+          <InputText v-model="form.password" type="password" class="w-full text-sm" dir="ltr" placeholder="در صورت عدم تغییر خالی بگذارید" />
+        </div>
+
+        <div v-if="!isEditMode" class="col-12">
+          <p class="text-sm text-color-secondary m-0 line-height-3">
+            نام کاربری و رمز عبور ساده به‌صورت خودکار ساخته می‌شود و از طریق پیامک برای کاربر ارسال می‌گردد. بعداً می‌توان رمز را تغییر داد.
+          </p>
+        </div>
+
+        <div class="col-12 flex justify-content-end gap-2 mt-4 pt-3 border-top-1 border-color">
+          <Button label="انصراف" text severity="secondary" @click="$router.push('/users')" />
+          <Button type="submit" :label="$t('app.save')" icon="pi pi-check" :loading="isSubmitting" />
+        </div>
+      </form>
+    </div>
+
+    <Dialog
+      v-model:visible="credentialsVisible"
+      modal
+      header="حساب ساخته شد"
+      :style="{ width: '28rem' }"
+      :closable="false"
+    >
+      <p class="text-sm mb-3 line-height-3">
+        اطلاعات ورود ساخته شد و در صورت فعال بودن پیامک، برای کاربر ارسال می‌شود. این رمز فقط یک‌بار نمایش داده می‌شود:
+      </p>
+      <div class="flex flex-column gap-2 surface-ground p-3 border-round">
+        <div class="flex justify-content-between gap-2">
+          <span class="text-color-secondary text-sm">نام کاربری</span>
+          <code class="font-semibold" dir="ltr">{{ createdCredentials.username }}</code>
+        </div>
+        <div class="flex justify-content-between gap-2">
+          <span class="text-color-secondary text-sm">رمز عبور</span>
+          <code class="font-semibold" dir="ltr">{{ createdCredentials.password }}</code>
+        </div>
+      </div>
+      <template #footer>
+        <Button label="متوجه شدم" icon="pi pi-check" @click="finishAfterCreate" />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { userApi } from '@/api/userApi';
+import { roleApi } from '@/api/roleApi';
+import { useToast } from '@/composables/useToast';
+import PageHeader from '@/components/common/PageHeader.vue';
+import InputText from 'primevue/inputtext';
+import Dropdown from 'primevue/select';
+import MultiSelect from 'primevue/multiselect';
+import Button from 'primevue/button';
+import Dialog from 'primevue/dialog';
+
+const route = useRoute();
+const router = useRouter();
+const { showSuccess, showError } = useToast();
+
+const userId = route.params.id;
+const isEditMode = computed(() => !!userId);
+const isSubmitting = ref(false);
+const roles = ref([]);
+const credentialsVisible = ref(false);
+const createdCredentials = reactive({ username: '', password: '' });
+
+const messengerOptions = [
+  { label: 'پیامک (SMS)', value: 'SMS' },
+  { label: 'بله', value: 'Bale' },
+  { label: 'واتساپ', value: 'WhatsApp' },
+  { label: 'تلگرام', value: 'Telegram' },
+  { label: 'ایمیل', value: 'Email' }
+];
+
+const toMessengerList = (value) => {
+  if (!value) return [];
+  return Array.isArray(value) ? [...value] : [value];
+};
+
+const form = reactive({
+  name: '',
+  surname: '',
+  nationalId: '',
+  phone: '',
+  email: '',
+  role: null,
+  preferredMessenger: [],
+  username: '',
+  password: ''
+});
+
+const buildPayload = () => {
+  const payload = {
+    name: form.name,
+    surname: form.surname,
+    nationalIdCode: form.nationalId,
+    phoneNumber: form.phone,
+    email: form.email || undefined,
+    role: form.role || undefined
+  };
+
+  if (form.preferredMessenger?.length) {
+    payload.preferredMessenger = form.preferredMessenger;
+  } else if (isEditMode.value) {
+    payload.preferredMessenger = [];
+  }
+
+  if (isEditMode.value && form.password) {
+    payload.password = form.password;
+  }
+
+  return payload;
+};
+
+const fetchRoles = async () => {
+  try {
+    const res = await roleApi.getAll({ limit: 100 });
+    const data = res.data || res;
+    roles.value = Array.isArray(data)
+      ? data
+      : (data.items || data.roles || data.data || []);
+  } catch (e) {
+    console.warn('Fetch roles error:', e);
+  }
+};
+
+const fetchUser = async () => {
+  if (!userId) return;
+  try {
+    const res = await userApi.getOne(userId);
+    const data = res.data || res;
+    Object.assign(form, {
+      name: data.name || '',
+      surname: data.surname || '',
+      nationalId: data.nationalIdCode || data.nationalId || '',
+      phone: data.phoneNumber || data.phone || '',
+      email: data.email || '',
+      role: data.role?._id || data.role || null,
+      preferredMessenger: toMessengerList(data.preferredMessenger),
+      username: data.username || '',
+      password: ''
+    });
+  } catch (err) {
+    showError(err);
+  }
+};
+
+const finishAfterCreate = () => {
+  credentialsVisible.value = false;
+  router.push('/users');
+};
+
+const handleSubmit = async () => {
+  if (!form.name || !form.surname) {
+    showError('نام و نام خانوادگی الزامی است');
+    return;
+  }
+  if (!form.nationalId || !form.phone) {
+    showError('کد ملی و شماره همراه الزامی است');
+    return;
+  }
+
+  isSubmitting.value = true;
+  try {
+    const payload = buildPayload();
+    if (isEditMode.value) {
+      await userApi.update(userId, payload);
+      showSuccess('اطلاعات کاربر با موفقیت ویرایش شد');
+      router.push('/users');
+    } else {
+      const res = await userApi.create(payload);
+      const data = res.data || res;
+      const creds = data.generatedCredentials || {};
+      createdCredentials.username = creds.username || data.username || '';
+      createdCredentials.password = creds.password || '';
+      showSuccess('کاربر جدید با موفقیت ایجاد شد');
+      if (createdCredentials.username && createdCredentials.password) {
+        credentialsVisible.value = true;
+      } else {
+        router.push('/users');
+      }
+    }
+  } catch (err) {
+    showError(err);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchRoles();
+  fetchUser();
+});
+</script>
+
+<style scoped>
+.preferred-messenger-select :deep(.p-multiselect-label) {
+  padding-inline-end: 2.5rem;
+}
+
+.preferred-messenger-select :deep(.p-chip),
+.preferred-messenger-select :deep(.p-multiselect-token) {
+  margin-inline-end: 0.35rem;
+}
+</style>
diff --git a/src/views/users/UserListView.vue b/src/views/users/UserListView.vue
new file mode 100644
index 0000000..2d9d28d
--- /dev/null
+++ b/src/views/users/UserListView.vue
@@ -0,0 +1,150 @@
+<!-- /src/views/users/UserListView.vue -->
+<template>
+  <div class="user-list-view">
+    <PageHeader :title="$t('users.title')" :subtitle="$t('users.subtitle')">
+      <PermissionGate permission="users:create">
+        <Button :label="$t('users.addUser')" icon="pi pi-user-plus" @click="$router.push('/users/create')" />
+      </PermissionGate>
+    </PageHeader>
+
+    <DataTableWrapper
+      :items="items"
+      :totalCount="totalCount"
+      :page="queryParams.page"
+      :limit="queryParams.limit"
+      :sortBy="queryParams.sortBy"
+      :sortOrder="queryParams.sortOrder"
+      :loading="isLoading"
+      @page-change="onPageChange"
+      @sort-change="onSort"
+      @search-change="onSearch"
+    >
+      <Column field="name" header="نام و نام خانوادگی" sortable>
+        <template #body="{ data }">
+          <router-link :to="`/users/${data._id || data.id}`" class="font-bold text-color hover:text-primary">
+            {{ data.name }} {{ data.surname }}
+          </router-link>
+        </template>
+      </Column>
+
+      <Column field="nationalId" header="کد ملی">
+        <template #body="{ data }">
+          {{ toPersianDigits(data.nationalId) || '-' }}
+        </template>
+      </Column>
+
+      <Column field="phoneNumber" header="شماره همراه">
+        <template #body="{ data }">
+          {{ toPersianDigits(data.phoneNumber || data.phone) || '-' }}
+        </template>
+      </Column>
+
+      <Column field="preferredMessenger" header="پیام‌رسان ترجیحی">
+        <template #body="{ data }">
+          <div class="flex flex-wrap gap-1 justify-content-end">
+            <Tag
+              v-for="messenger in (Array.isArray(data.preferredMessenger) ? data.preferredMessenger : (data.preferredMessenger ? [data.preferredMessenger] : ['SMS']))"
+              :key="messenger"
+              :value="messenger"
+              severity="info"
+            />
+          </div>
+        </template>
+      </Column>
+
+      <Column field="activeCoursesCount" header="دوره‌های فعال">
+        <template #body="{ data }">
+          {{ toPersianDigits(data.activeCoursesCount || data.enrolledCourses?.length || 0) }}
+        </template>
+      </Column>
+
+      <Column field="isActive" header="وضعیت">
+        <template #body="{ data }">
+          <StatusTag :status="data.isActive !== false" />
+        </template>
+      </Column>
+
+      <Column header="عمولیات" style="width: 130px">
+        <template #body="{ data }">
+          <div class="flex align-items-center gap-1">
+            <PermissionGate permission="users:read">
+              <Button icon="pi pi-eye" text rounded size="small" v-tooltip.top="'مشاهده'" @click="$router.push(`/users/${data._id || data.id}`)" />
+            </PermissionGate>
+            
+            <PermissionGate permission="users:update">
+              <Button icon="pi pi-pencil" text rounded size="small" severity="warning" v-tooltip.top="'ویرایش'" @click="$router.push(`/users/edit/${data._id || data.id}`)" />
+            </PermissionGate>
+
+            <PermissionGate permission="users:delete">
+              <Button icon="pi pi-trash" text rounded size="small" severity="danger" v-tooltip.top="'حذف'" @click="confirmDelete(data)" />
+            </PermissionGate>
+          </div>
+        </template>
+      </Column>
+    </DataTableWrapper>
+
+    <ConfirmDeleteDialog
+      v-model="deleteDialogVisible"
+      :loading="isDeleting"
+      @confirm="handleDelete"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useDataTable } from '@/composables/useDataTable';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { useToast } from '@/composables/useToast';
+import { userApi } from '@/api/userApi';
+import PageHeader from '@/components/common/PageHeader.vue';
+import DataTableWrapper from '@/components/common/DataTableWrapper.vue';
+import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
+import StatusTag from '@/components/common/StatusTag.vue';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+
+const { toPersianDigits } = usePersianDate();
+const { showSuccess, showError } = useToast();
+
+const {
+  items,
+  totalCount,
+  isLoading,
+  queryParams,
+  loadData,
+  onPageChange,
+  onSort,
+  onSearch
+} = useDataTable(userApi.getAll);
+
+const deleteDialogVisible = ref(false);
+const selectedUser = ref(null);
+const isDeleting = ref(false);
+
+const confirmDelete = (user) => {
+  selectedUser.value = user;
+  deleteDialogVisible.value = true;
+};
+
+const handleDelete = async () => {
+  if (!selectedUser.value) return;
+  isDeleting.value = true;
+  try {
+    await userApi.delete(selectedUser.value._id || selectedUser.value.id);
+    showSuccess('کاربر با موفقیت حذف شد');
+    deleteDialogVisible.value = false;
+    loadData();
+  } catch (err) {
+    showError(err);
+  } finally {
+    isDeleting.value = false;
+  }
+};
+
+onMounted(() => {
+  loadData();
+});
+</script>
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..8a19c68
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
+