# mariamomri/projet-angular architecture

> Architecture diagram of the GitHub repository mariamomri/projet-angular, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mariamomri/projet-angular
- Repository: https://github.com/mariamomri/projet-angular

## Overview

PermissionRoles is an Angular training-management application with role-aware login and separate administration, learner, and overview screens. The main workflow is login against user records, then navigation to a dashboard or a domain screen to manage or view training data. Sampled component code confirms HTTP access for users, trainees, trainers, and courses; the profile screen is documented by routing and the tree, but its behavior was not sampled.

Main entry points: [`src/app/app.routes.ts`](https://github.com/mariamomri/projet-angular/blob/main/src/app/app.routes.ts) (Route table), [`src/app/components/login/login.ts`](https://github.com/mariamomri/projet-angular/blob/main/src/app/components/login/login.ts) (Login), [`src/app/components/dashboard/dashboard.ts`](https://github.com/mariamomri/projet-angular/blob/main/src/app/components/dashboard/dashboard.ts) (Dashboard), [`src/app/services/auth.ts`](https://github.com/mariamomri/projet-angular/blob/main/src/app/services/auth.ts) (Authentication)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application navigation"]
  node_root["Application shell<br/>[app.ts]"]
  node_routes["Route table<br/>[app.routes.ts]"]
  node_dashboard["Dashboard<br/>[dashboard.ts]"]
end

subgraph group_identity["Identity and roles"]
  node_login["Login<br/>[login.ts]"]
  node_auth["Authentication<br/>[auth.ts]"]
end

subgraph group_training["Training operations"]
  node_trainees["Trainee management"]
  node_trainers["Trainer management"]
  node_courses["Course management"]
  node_mycourses["My courses<br/>[mes-formations.ts]"]
  node_profile["Trainee profile"]
end

subgraph group_data["Data services"]
  node_api["JSON API"]
  node_database[("JSON data<br/>[db.json]")]
end

node_user(("User"))

node_user -->|"opens app"| node_root
node_root -->|"hosts routes"| node_routes
node_routes -->|"routes login"| node_login
node_routes -->|"routes dashboard"| node_dashboard
node_routes -->|"routes trainees"| node_trainees
node_routes -->|"routes trainers"| node_trainers
node_routes -->|"routes courses"| node_courses
node_routes -->|"routes courses"| node_mycourses
node_routes -->|"routes profile"| node_profile
node_login -->|"checks credentials"| node_auth
node_auth -->|"fetches users"| node_api
node_api -.->|"reads records"| node_database
node_login -->|"navigates on success"| node_dashboard
node_dashboard -->|"logs out"| node_auth
node_trainees -->|"manages trainees"| node_api
node_trainers -->|"manages trainers"| node_api
node_courses -->|"manages courses"| node_api
node_mycourses -->|"fetches courses"| node_api

click node_root "https://github.com/mariamomri/projet-angular/blob/main/src/app/app.ts"
click node_routes "https://github.com/mariamomri/projet-angular/blob/main/src/app/app.routes.ts"
click node_login "https://github.com/mariamomri/projet-angular/blob/main/src/app/components/login/login.ts"
click node_auth "https://github.com/mariamomri/projet-angular/blob/main/src/app/services/auth.ts"
click node_dashboard "https://github.com/mariamomri/projet-angular/blob/main/src/app/components/dashboard/dashboard.ts"
click node_trainees "https://github.com/mariamomri/projet-angular/blob/main/src/app/components/gestion-stagiaires/gestion-stagiaires.ts"
click node_trainers "https://github.com/mariamomri/projet-angular/blob/main/src/app/components/gestion-formateurs/gestion-formateurs.ts"
click node_courses "https://github.com/mariamomri/projet-angular/blob/main/src/app/components/gestion-formations/gestion-formations.ts"
click node_mycourses "https://github.com/mariamomri/projet-angular/blob/main/src/app/components/mes-formations/mes-formations.ts"
click node_profile "https://github.com/mariamomri/projet-angular/blob/main/src/app/components/profil-stagiaire/profil-stagiaire.ts"
click node_database "https://github.com/mariamomri/projet-angular/blob/main/database/db.json"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_root,node_routes,node_dashboard,node_user toneBlue
class node_login,node_auth toneAmber
class node_trainees,node_trainers,node_courses,node_mycourses,node_profile toneMint
class node_api,node_database toneRose
```

## Components

### Application navigation

- [Application shell](https://github.com/mariamomri/projet-angular/blob/main/src/app/app.ts): `src/app/app.ts`
- [Route table](https://github.com/mariamomri/projet-angular/blob/main/src/app/app.routes.ts): `src/app/app.routes.ts`
- [Dashboard](https://github.com/mariamomri/projet-angular/blob/main/src/app/components/dashboard/dashboard.ts): `src/app/components/dashboard/dashboard.ts`

### Identity and roles

- [Login](https://github.com/mariamomri/projet-angular/blob/main/src/app/components/login/login.ts): `src/app/components/login/login.ts`
- [Authentication](https://github.com/mariamomri/projet-angular/blob/main/src/app/services/auth.ts): `src/app/services/auth.ts`

### Training operations

- [Trainee management](https://github.com/mariamomri/projet-angular/blob/main/src/app/components/gestion-stagiaires/gestion-stagiaires.ts): `src/app/components/gestion-stagiaires/gestion-stagiaires.ts`
- [Trainer management](https://github.com/mariamomri/projet-angular/blob/main/src/app/components/gestion-formateurs/gestion-formateurs.ts): `src/app/components/gestion-formateurs/gestion-formateurs.ts`
- [Course management](https://github.com/mariamomri/projet-angular/blob/main/src/app/components/gestion-formations/gestion-formations.ts): `src/app/components/gestion-formations/gestion-formations.ts`
- [My courses](https://github.com/mariamomri/projet-angular/blob/main/src/app/components/mes-formations/mes-formations.ts): `src/app/components/mes-formations/mes-formations.ts`
- [Trainee profile](https://github.com/mariamomri/projet-angular/blob/main/src/app/components/profil-stagiaire/profil-stagiaire.ts): `src/app/components/profil-stagiaire/profil-stagiaire.ts`

### Data services

- **JSON API**
- [JSON data](https://github.com/mariamomri/projet-angular/blob/main/database/db.json): `database/db.json`

### Other components

- **User**

## Connections

- User → Application shell: opens app
- Application shell → Route table: hosts routes
- Route table → Login: routes login
- Route table → Dashboard: routes dashboard
- Route table → Trainee management: routes trainees
- Route table → Trainer management: routes trainers
- Route table → Course management: routes courses
- Route table → My courses: routes courses
- Route table → Trainee profile: routes profile
- Login → Authentication: checks credentials
- Authentication → JSON API: fetches users
- JSON API → JSON data: reads records
- Login → Dashboard: navigates on success
- Dashboard → Authentication: logs out
- Trainee management → JSON API: manages trainees
- Trainer management → JSON API: manages trainers
- Course management → JSON API: manages courses
- My courses → JSON API: fetches courses