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

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:

config/routing.tsx

Mounted module path:

/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:

data/api/AdminAPI.ts
data/api/RoleAPI.ts
data/api/PermissionAPI.ts
data/api/dto.ts

Query hooks live in:

data/queries/admin.ts
data/queries/role.ts
data/queries/permission.ts

Cache invalidation helpers live in:

data/queries/cache.ts

Current helpers:

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.

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:

view/forms/AdminForm/

Responsibilities:

Create and update admin data.
Select admin status.
Assign roles.
Optionally update password.

Role form:

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:

config/messages.ts
config/translation/en.json
config/translation/uk.json

Use only ACCESS_CONTROL.* keys inside this module.

3.0 KiB Raw Blame History