graph TB
%% Styling
classDef frontend fill:#dd0031,color:white,stroke:#b30024,stroke-width:2px
classDef backend fill:#6db33f,color:white,stroke:#4a8c2a,stroke-width:2px
classDef database fill:#ff6b00,color:white,stroke:#cc5500,stroke-width:2px
classDef infrastructure fill:#4fc3f7,color:white,stroke:#029acf,stroke-width:2px
classDef external fill:#9c27b0,color:white,stroke:#7b1fa2,stroke-width:2px
subgraph FrontendAngular[Frontend - Angular]
A[User Interface]
B[Components]
C[Services]
D[RxJS Observables]
E[HTTP Client]
F[Router]
G[Reactive Forms]
H[Template Directives]
end
subgraph BackendSpringBoot[Backend - Spring Boot]
I[REST Controllers]
J[Service Layer]
K[Data Transfer Objects]
L[Business Logic]
M[Exception Handling]
N[Spring Data JPA]
O[Entity Classes]
end
subgraph DatabasePersistence[Database & Persistence]
P[(PostgreSQL Database)]
Q[(H2 Development DB)]
end
subgraph InfrastructureLayer[Infrastructure]
R[Spring Security]
S[CORS Configuration]
T[Spring Boot Actuator]
U[Application Properties]
end
subgraph ExternalServices[External Services]
V[Third-party APIs]
W[Cloud Services]
X[Authentication Providers]
end
%% Frontend connections
A --> B
B --> C
C --> D
D --> E
E --> F
B --> G
B --> H
%% Backend connections
I --> J
J --> K
J --> L
J --> M
J --> N
N --> O
%% Database connections
O --> P
O --> Q
%% Infrastructure connections
I --> S
J --> R
J --> T
J --> U
%% External connections
J --> V
J --> W
R --> X
%% Cross-stack connections
E --> I
%% Styling applications
class A,B,C,D,E,F,G,H frontend
class I,J,K,L,M,N,O backend
class P,Q database
class R,S,T,U infrastructure
class V,W,X external
sequenceDiagram
participant U as User
participant A as Angular UI
participant S as Angular Service
participant C as Spring Controller
participant SL as Service Layer
participant R as Repository
participant DB as Database
Note over U,DB: Create New Personeel Flow
U->>A: Fill Personeel Form & Submit
A->>S: personeelService.createPersoneel(personeelData)
S->>C: HTTP POST /api/personeel
Note right of S: JSON Payload with PersoneelDTO
C->>SL: personeelService.createPersoneel(personeelDTO)
SL->>SL: Validate Business Rules
SL->>R: personeelRepository.save(personeelEntity)
R->>DB: INSERT INTO personeel
DB-->>R: Saved Entity
R-->>SL: Personeel Entity
SL-->>C: PersoneelDTO
C-->>S: HTTP 201 Created + PersoneelDTO
S-->>A: Observable emits success
A-->>U: Show success message
Note over U,DB: Alternative Error Flow
SL-->>C: throws ValidationException
C-->>S: HTTP 400 Bad Request + Error DTO
S-->>A: Observable emits error
A-->>U: Show validation errors
graph LR
subgraph AngularModuleStructure[Angular Module Structure]
AM[AppModule]
BM[PersoneelModule]
RM[RouterModule]
HM[HttpClientModule]
FM[FormsModule]
PCL[PersoneelListComponent]
PCC[PersoneelCreateComponent]
PCE[PersoneelEditComponent]
PS[PersoneelService]
end
subgraph SpringBootPackageStructure[Spring Boot Package Structure]
SB[SpringBootApplication]
CTL[Controller Package]
SVC[Service Package]
REP[Repository Package]
ENT[Entity Package]
DTO[DTO Package]
CFG[Config Package]
BC[PersoneelController]
BSV[PersoneelService]
BR[PersoneelRepository]
PE[Personeel Entity]
PD[PersoneelDTO]
CORS[CorsConfig]
end
%% Angular connections
AM --> BM
AM --> RM
AM --> HM
AM --> FM
BM --> PCL
BM --> PCC
BM --> PCE
BM --> PS
%% Spring Boot connections
SB --> CTL
SB --> SVC
SB --> REP
SB --> ENT
SB --> DTO
SB --> CFG
CTL --> BC
SVC --> BSV
REP --> BR
ENT --> PE
DTO --> PD
CFG --> CORS
%% Cross-stack connections
PS -.-> BC
BC -.-> BSV
BSV -.-> BR
BR -.-> PE
PE -.-> PD
classDef angular fill:#dd0031,color:white
classDef spring fill:#6db33f,color:white
class AM,BM,RM,HM,FM,PCL,PCC,PCE,PS angular
class SB,CTL,SVC,REP,ENT,DTO,CFG,BC,BSV,BR,PE,PD,CORS spring
graph TB
subgraph ProductionDeployment[Production Deployment]
CLD[Cloud Platform]
subgraph SpringBootApplication[Spring Boot Application]
SBJ[JAR File]
SBS[Embedded Tomcat]
SBA[Spring Boot App]
SBD[Static Files]
end
subgraph DatabaseCloud[Database Cloud]
DBC[(PostgreSQL)]
end
subgraph ExternalDNS[External DNS]
DNS[Your Domain]
end
USR[Users Worldwide]
end
subgraph DevelopmentEnvironment[Development Environment]
DEV[Developer Machine]
subgraph AngularDevServer[Angular Dev Server]
ADS[ng serve]
AB[Angular App]
end
subgraph SpringBootDev[Spring Boot Dev]
SBDV[Spring Boot Dev]
SBDD[H2 Database]
end
end
%% Production connections
USR --> DNS
DNS --> CLD
CLD --> SBJ
SBJ --> SBS
SBS --> SBA
SBA --> SBD
SBA --> DBC
%% Development connections
ADS --> AB
SBDV --> SBDD
AB --> SBDV
classDef production fill:#ff6b00,color:white
classDef development fill:#4fc3f7,color:white
classDef database fill:#9c27b0,color:white
class CLD,SBJ,SBS,SBA,SBD,DNS,USR production
class DEV,ADS,AB,SBDV,SBDD development
class DBC,SBDD database