admin/docs/core/access-control/frontend.md

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.