# Pages, composants et structure UI

## Vue d’ensemble

Le frontend sépare globalement les **écrans complets**, les **composants réutilisables** et les **popups**. Cette page sert de guide pour savoir où ajouter ou modifier une interface.

## Structure UI

```mermaid
flowchart TD
    APP[AppModule] --> ROUTES[RouterModule.forRoot]
    ROUTES --> PAGES[Pages]
    PAGES --> COMP[Components]
    PAGES --> POP[Popup]
    PAGES --> SERVICES[Services Angular]
    COMP --> SERVICES

```

## Pages

`src/app/Pages/` contient les écrans routables ou les grosses vues fonctionnelles. Les dossiers actuellement présents incluent notamment :

- `PageLogin`, `PageForgotPassword`, `PageUnauthorized`
- `PageIndex`
- `PageWebgl`
- `PageSupport` et `PageSupportAdmin`
- `PageAdminPresence`
- `PageTableList` et `PageUserInformation`
- `PageSettings`, `PageDemoSearch`, `PageActiveSimulation`, `PageSimulationComments`

## Components

`src/app/Components/` contient les composants destinés à être utilisés par d’autres vues. On y trouve notamment `CommunicationOverlay` et `WebPanel`.

Un élément devrait devenir un composant partagé lorsqu’il possède une responsabilité UI autonome ou qu’il est utilisé par plusieurs pages.

## Popup

`src/app/Popup/` regroupe les interfaces modales. Lorsqu’une interaction est temporaire et ne mérite pas une route complète, vérifier d’abord si elle appartient à cette couche.

## Routing

Le routing est centralisé directement dans `src/app/app.module.ts` avec `RouterModule.forRoot(...)`. Il n’existe pas de `app-routing.module.ts` séparé.

Les routes sont regroupées par niveau d’accès : publiques, utilisateur, utilisateur Uniksim, admin et true admin. Voir **Structure et routing Angular** pour la liste détaillée.

## Créer une nouvelle vue

```mermaid
flowchart LR
    NEED[Nouvelle interface] --> ROUTE{Doit avoir une URL ?}
    ROUTE -- Oui --> PAGE[Nouvelle Page]
    PAGE --> APP[Ajouter déclaration + route dans app.module.ts]
    ROUTE -- Non --> REUSE{Réutilisable ?}
    REUSE -- Oui --> COMPONENT[Component]
    REUSE -- Non --> POPUP{Interaction modale ?}
    POPUP -- Oui --> P[Popup]
    POPUP -- Non --> LOCAL[Composant local à la page]

```

## Conventions pratiques

- Une Page orchestre l’écran; elle ne devrait pas absorber toute la logique métier.
- Les appels backend réutilisables passent par les services Angular.
- Un composant partagé ne devrait pas dépendre inutilement d’une route précise.
- Lorsqu’une page devient très volumineuse, extraire les parties UI cohérentes plutôt que créer une deuxième page sans raison.
- Avant de créer un nouveau composant, vérifier si un équivalent existe déjà dans `Components/` ou `Popup/`.