feat(rbac): implement dynamic permission gates, role matrix ui, and centralize constants (!24) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(rbac): implement dynamic permission gates, role matrix ui, and centralize constants

Overview

Integrated Dynamic RBAC on the client side, replacing hardcoded role logic with granular permission evaluation, protecting client routes with Claymorphism fallback screens, and providing a dedicated Roles & Permissions Management interface.

Key Changes

Dynamic Permission Hook (usePermission):
- Removed hardcoded ADMIN role bypass; permissions are evaluated 100% dynamically from user.permissions.
- Added support for PermissionName type-safety.
Route & UI Protection:
- Created <AccessDenied />: 403 Forbidden claymorphism fallback page with navigation back to Home.
- Wrapped all private feature routes in src/components/layout.tsx with <PermissionGate permission={PERMISSIONS.*} fallback={<AccessDenied />}>.
- Fixed <DocumentTitle /> position inside <ZMPRouter> for valid router context and updated route title mappings.
Role & Permission Management UI (/roles, /admin/roles):
- Claymorphism-styled Roles tab, Permission Matrix grouped by resource/action with centered checkmarks, and Audit Logs tab.
- Automatic session & permission refresh on permission matrix update without requiring re-login.
Centralized Constants (src/common/constants/):
- Synchronized PERMISSIONS and SYSTEM_ROLES constants.
- Refactored layout.tsx, HomePage, ProfilePage, RolesPage, and usePermission to use PERMISSIONS.*.

### Overview
Integrated Dynamic RBAC on the client side, replacing hardcoded role logic with granular permission evaluation, protecting client routes with Claymorphism fallback screens, and providing a dedicated Roles & Permissions Management interface.

### Key Changes
- **Dynamic Permission Hook (`usePermission`)**:
  - Removed hardcoded `ADMIN` role bypass; permissions are evaluated 100% dynamically from `user.permissions`.
  - Added support for `PermissionName` type-safety.
- **Route & UI Protection**:
  - Created `<AccessDenied />`: 403 Forbidden claymorphism fallback page with navigation back to Home.
  - Wrapped all private feature routes in `src/components/layout.tsx` with `<PermissionGate permission={PERMISSIONS.*} fallback={<AccessDenied />}>`.
  - Fixed `<DocumentTitle />` position inside `<ZMPRouter>` for valid router context and updated route title mappings.
- **Role & Permission Management UI (`/roles`, `/admin/roles`)**:
  - Claymorphism-styled Roles tab, Permission Matrix grouped by resource/action with centered checkmarks, and Audit Logs tab.
  - Automatic session & permission refresh on permission matrix update without requiring re-login.
- **Centralized Constants (`src/common/constants/`)**:
  - Synchronized `PERMISSIONS` and `SYSTEM_ROLES` constants.
  - Refactored `layout.tsx`, `HomePage`, `ProfilePage`, `RolesPage`, and `usePermission` to use `PERMISSIONS.*`.