Summary of Changes - Frontend

1. Dynamic Permission-Based Access Control (RBAC)

• Auth Provider (auth-provider.tsx, auth.ts): Replaced hardcoded role === "ADMIN" checks with dynamic permission evaluators:
  • hasPermission(permission: string): boolean
  • hasAnyPermission(permissions: string[]): boolean
  • hasAllPermissions(permissions: string[]): boolean
  • Exposes active user roles: string[] and permissions: string[].

2. Roles & Visual Permission Matrix (/roles & /settings/developer/roles)

• Dedicated Role Management Page (src/app/roles/page.tsx):
  • Card & Table dual view modes with impact KPI metrics.
  • Special visual badges for default system roles (ADMIN, USER) with deletion locks.
• Visual Permission Matrix Dialog (permission-matrix-dialog.tsx):
  • Grouped permissions across 10 business modules (Crawl Jobs, Schedules, Templates, Exports, Webhooks, API Keys, Users, Roles, Audit Logs, Dashboard).
  • Module-level "Select All" / "Deselect All" toggles, realtime search filter, and selection counter.
  • Seamless persistence to PUT /roles/:id/permissions.
• Role Form Modal (role-form-modal.tsx): Auto-slug generation from Vietnamese display name, system role protection, and description editor.
• Role Members Modal (role-users-modal.tsx): Displays assigned accounts via GET /roles/:id/users.
• Role Deletion Guard (role-delete-dialog.tsx): Prevents accidental deletion of system roles or roles with active members.

3. User Management & Developer Area Navigation

• User Management (src/components/users/): Comprehensive user table with search, role/status filtering, pagination, user creation/edit, and active status toggling.
• Developer Shell Tabs (developer-shell.tsx): URL-based tab routing (/settings/developer/users, roles, api-keys, webhooks, docs).

4. API Services, Hooks & Schemas

• Implemented services and TanStack Query hooks for all 10 Roles & Permissions endpoints and 9 User Management endpoints.
• Full bilingual i18n support (Vietnamese & English) in translations.ts.