# 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.