142 lines
3.0 KiB
Markdown
142 lines
3.0 KiB
Markdown
# Access Control Frontend
|
|
|
|
The frontend module provides the admin-facing UI for managing admins, roles, and permissions.
|
|
|
|
Source: `apps/admin/src/core/AccessControl/`
|
|
|
|
## Directory Structure
|
|
|
|
```txt
|
|
AccessControl/
|
|
config/ Routes, menu, messages, translations.
|
|
data/
|
|
api/ Raw HTTP calls and DTOs.
|
|
mappers/ DTO-to-entity mapping.
|
|
queries/ React Query hooks, keys, and cache invalidation.
|
|
entities/ Admin, role, permission entities and enums.
|
|
pages/ Route-level pages.
|
|
view/
|
|
forms/ Admin and role forms.
|
|
layouts/ Module layout.
|
|
widgets/ Tables and modal triggers.
|
|
```
|
|
|
|
## Routes
|
|
|
|
Frontend route config:
|
|
|
|
```txt
|
|
config/routing.tsx
|
|
```
|
|
|
|
Mounted module path:
|
|
|
|
```txt
|
|
/access-control
|
|
```
|
|
|
|
| Route | Page | Purpose |
|
|
| ----------------------- | --------------- | ----------------------------------------- |
|
|
| `/access-control/admin` | `AdminListPage` | Manage admin accounts and assigned roles. |
|
|
| `/access-control/role` | `RoleListPage` | Manage roles and assigned permissions. |
|
|
|
|
## Data Layer
|
|
|
|
Raw API calls live in:
|
|
|
|
```txt
|
|
data/api/AdminAPI.ts
|
|
data/api/RoleAPI.ts
|
|
data/api/PermissionAPI.ts
|
|
data/api/dto.ts
|
|
```
|
|
|
|
Query hooks live in:
|
|
|
|
```txt
|
|
data/queries/admin.ts
|
|
data/queries/role.ts
|
|
data/queries/permission.ts
|
|
```
|
|
|
|
Cache invalidation helpers live in:
|
|
|
|
```txt
|
|
data/queries/cache.ts
|
|
```
|
|
|
|
Current helpers:
|
|
|
|
```ts
|
|
invalidateAdminList();
|
|
invalidateAdminDetailed(id?);
|
|
invalidateRoleList();
|
|
invalidateRoleDetailed(id?);
|
|
invalidatePermissionList();
|
|
```
|
|
|
|
## DTO Mapping
|
|
|
|
The API layer returns DTOs. Query hooks map DTOs into entities before data reaches UI code.
|
|
|
|
```txt
|
|
data/mappers/AdminMapper.ts
|
|
data/mappers/RoleMapper.ts
|
|
data/mappers/PermissionMapper.ts
|
|
entities/AdminEntity.ts
|
|
entities/RoleEntity.ts
|
|
entities/PermissionEntity.ts
|
|
```
|
|
|
|
Keep backend response shape in DTOs. Keep UI/domain shape in entities.
|
|
|
|
## Forms
|
|
|
|
Admin form:
|
|
|
|
```txt
|
|
view/forms/AdminForm/
|
|
```
|
|
|
|
Responsibilities:
|
|
|
|
- Create and update admin data.
|
|
- Select admin status.
|
|
- Assign roles.
|
|
- Optionally update password.
|
|
|
|
Role form:
|
|
|
|
```txt
|
|
view/forms/RoleForm/
|
|
```
|
|
|
|
Responsibilities:
|
|
|
|
- Create and update role name.
|
|
- Group available permissions by module slug prefix.
|
|
- Assign permission slugs to the role.
|
|
|
|
## Widgets
|
|
|
|
| Widget | Purpose |
|
|
| -------------------- | -------------------------------------------- |
|
|
| `AdminTable` | Admin list, filters, actions, create button. |
|
|
| `RoleTable` | Role list, actions, create button. |
|
|
| `ManageAdminTrigger` | Admin create/edit dialog orchestration. |
|
|
| `ManageRoleTrigger` | Role create/edit dialog orchestration. |
|
|
| `DeleteAdminTrigger` | Admin delete confirmation and mutation. |
|
|
| `DeleteRoleTrigger` | Role delete confirmation and mutation. |
|
|
|
|
## Translations
|
|
|
|
Translations are module-local:
|
|
|
|
```txt
|
|
config/messages.ts
|
|
config/translation/en.json
|
|
config/translation/uk.json
|
|
```
|
|
|
|
Use only `ACCESS_CONTROL.*` keys inside this module.
|