This document describes the implementation of 11 new service modules in the UI layer to integrate with all backend endpoints exposed by the IACT API.
The system implements a granular permissions model based on functional groups rather than hierarchical roles:
Database Schema:
- FUNCIONES (Functions): Resources like dashboards, users, calls
- CAPACIDADES (Capabilities): Actions like view, create, edit, delete
- GRUPOS_PERMISOS (Permission Groups): Functional descriptive groups
- USUARIOS (Users): Can belong to multiple groups simultaneously
- PERMISOS_EXCEPCIONALES (Exceptional Permissions): Temporary or permanent overrides
- AUDITORIA_PERMISOS (Audit Log): Track all permission checks
Key Principles:
- NO hierarchical roles like "Admin", "Supervisor", "Agent"
- YES functional groups like "Customer Service", "Team Management"
- Users can have multiple groups simultaneously
- Groups are combinable and flexible
- Clear description of what each person can do
All services follow the resilient service pattern defined in createResilientService.js:
createResilientService({
fetchFromApi: async () => { /* API call */ },
fetchFromMock: async () => { /* mock fallback */ },
shouldUseMock: () => flags.backendIntegrity.SOURCE === 'MOCK',
serviceName: 'ServiceName'
})- Endpoint:
/api/v1/usuarios/ - Operations: CRUD, suspend, reactivate, assign_groups
- Mock:
usuarios.json
- Endpoint:
/api/v1/dashboard/ - Operations: overview, export, customize, share
- Mock:
dashboard.json
- Endpoint:
/api/v1/configuracion/ - Operations: list, detail, modify, export, import, history, audit
- Mock:
configuracion.json
- Endpoint:
/api/v1/configuracion/ - Operations: list, edit, export, import, restore
- Mock:
configuration.json
- Endpoint:
/api/v1/presupuestos/ - Operations: CRUD, approve, reject, export
- Mock:
presupuestos.json
- Endpoint:
/api/v1/politicas/ - Operations: CRUD, publish, archive, new_version
- Mock:
politicas.json
- Endpoint:
/api/v1/excepciones/ - Operations: CRUD, approve, reject, export
- Mock:
excepciones.json
- Endpoint:
/api/v1/reportes/ - Operations: list by type, advanced filters, unified export
- Mock:
reportes.json
- Endpoint:
/api/v1/notifications/messages/ - Operations: CRUD, mark_read, unread, unread_count
- Mock:
notifications.json
- Endpoint:
/api/v1/etl/jobs/,/api/v1/etl/errors/ - Operations: read-only queries, stats, summary, recent_failures, by_severity
- Mock:
etl.json
- Endpoint:
/api/dora/ - Operations: delivery metrics
- Mock:
dora.json
Run the setup script to create all service files:
cd ui
npm run services:setupThis will create:
- 11 service directories under
ui/src/services/ - 11 service implementation files
- 11 test files with 80%+ coverage
All mock files are already created in ui/src/mocks/. Verify they exist:
ls -la ui/src/mocks/*.jsonExecute the test suite to verify all services:
cd ui
npm testExpected output:
- All tests passing
- Coverage above 80% threshold
- No linting errors
The services integrate with backendIntegrity.js for feature flags. Update environment variables as needed:
UI_BACKEND_USERS_SOURCE=MOCK
UI_BACKEND_DASHBOARD_SOURCE=MOCK
# ... etc- Tests written before implementation
- Coverage maintained at 80% or higher
- All edge cases covered
- Follows existing patterns in
createResilientService.js - No duplication (DRY principle)
- Clear separation of concerns
- Proper error handling
- Conventional Commits format
- Clear, descriptive messages
- Atomic commits per service
ui/
src/
services/
users/
UsersService.js
UsersService.test.js
dashboard/
DashboardService.js
DashboardService.test.js
... (9 more services)
mocks/
usuarios.json
dashboard.json
... (9 more mocks)
scripts/
setup-services.js
- Execute
npm run services:setupto generate all service files - Run
npm testto verify implementation - Integrate services into UI components as needed
- Update feature flags based on backend availability
- Document any deviations or special cases
- Architecture documentation:
docs/frontend/arquitectura/ - Backend API:
api/callcentersite/callcentersite/urls.py - Existing services:
ui/src/services/calls/CallsService.js - Test patterns:
ui/src/services/calls/CallsService.test.js