Component Model Diagram

Crew Management System – detailed component boundaries, UI modules, secured backend APIs, domain services, shared platform services, data stores, and cross-cutting integrations
Frontend Components
Backend API Components
Domain Components
Shared Services
Data & Cross-Cutting
Frontend Boundary
React SPA Shell
React SPA Shell Routing, shared layout, navigation, access-aware screen composition, and common UI framework
UI Modules
Authentication Module
Home / Dashboard Module
Profile Module
Roster Module
Attendance Module
Events Module
Leave Module
Trainings Module
Qualifications Module
Recruitment Module
Productivity Module
Overview Module
Specialized UI Components
Notifications UI
Document Upload / Download UI
Shared Tables, Filters, and Search Components
Backend API Boundary
Frontend-Facing Secured APIs
CMS Backend API Layer Primary frontend-facing secured API layer exposed by CMS backend services
Request Routing
Response Composition
Workflow Invocation
Error Handling & Response Normalization
Auth Context Propagation
Main Responsibility
Expose secured backend APIs to the frontend, route requests to the correct domain and shared services, and return consistent application responses
Backend Service Boundaries
Domain Services
Crew Profile Service
Roster Service
Attendance Service
Events Service
Leave Service
Trainings Service
Qualifications Service
Recruitment Service
Productivity Service
Typical Component Interaction
Frontend → CMS Backend APIs for protected reads, actions, and workflow submissions
Backend APIs → Domain Services for business-specific reads and actions
Domain Services → Microsoft Fabric for read-only enterprise data
Backend APIs / Domain Services → Shared Services for reusable workflow, document, and notification capabilities
Shared Platform Services
Reusable Services
Workflow Management Service Workflow state, transitions, routing, approvals, and lifecycle handling
Notification Service In-app notifications, email triggering, delivery tracking, and async messaging
Document Management Service Upload, retrieval, metadata handling, controlled access, and file lifecycle
Data & Cross-Cutting
Data Stores
Microsoft Fabric Read-only enterprise analytical datasets
Azure DocumentDB Workflow state, app records, notification state, preferences, and file metadata
Azure Storage Account (Blob Storage) Binary file storage, uploads, generated exports, and document artifacts
Cross-Cutting Services
Azure AD SSO, authentication, token issuance, identity context
RBAC / ABAC Authorization policy enforcement directly in protected backend services and APIs
Datadog Logs, metrics, traces, monitoring, and observability
Infobip External outbound notification delivery
Frontend → Backend APIs
All UI modules consume secured CMS backend APIs rather than a separate BFF layer.
Backend APIs → Domain Services
Business-specific functionality is separated into bounded domain services.
Backend APIs / Services → Shared Platform Services
Workflow, notifications, and document handling are exposed as reusable capabilities.
Domain Services → Fabric
Enterprise data access remains read-only and separated from operational application data.
Shared Services → DocumentDB / ADLS
Operational state and file storage are handled by different underlying stores.
Cross-Cutting Controls
Azure AD, RBAC/ABAC, Datadog, and Infobip apply across multiple components without collapsing service boundaries.
Frontend boundary Backend API boundary Domain services Shared platform services Data stores Cross-cutting services
This component model separates frontend modules, secured backend API components, domain services, shared services, data stores, and cross-cutting integrations to clearly show service boundaries and inter-component responsibilities.