adb-ui

Rôle

Frontend Angular 19 historique de la plateforme. Interface utilisateur centralisée pour la gestion immobilière : personnes, parts, contrats, factures, paiements, tickets, dashboards.

C'est le client direct de tous les microservices via la gateway Nginx (adb/proxy). L'authentification est gérée par Keycloak (keycloak-angular adapter).

⚠️ Il existe une migration en cours vers adb-web (Cloudflare Workers). À terme, adb-ui sera remplacé par adb-web/apps/ui.

Stack

Élément	Valeur
Angular	19.0.5 / 19.1.0
TypeScript	5.7.2
Angular CLI	19.0.6
RxJS	7.8.1
Auth	`keycloak-angular` 19.0.2 + `keycloak-js` 22.0.5
UI	Angular Material 19.0.4, Angular CDK 19.1.0, ng-bootstrap 18.0.0
Éditeur	CKEditor 5 (build classic 41.4.2)
Cartes	Google Maps (`@googlemaps/js-api-loader`)
Tracking	Sentry 6.11.0, Google Tag Manager (GTM-5S3CNCX en prod)
Charts	MongoDB Charts (`@mongodb-js/charts-embed-dom` 3.2.1)
Tests	Karma + Jasmine 5.5, Cypress 13.17 + cucumber preprocessor
Version	`0.65.0-SNAPSHOT`

Dépendances notables

i18n : @ngx-translate/core 16.0.4
Date : moment 2.30, dayjs 1.11, ngx-daterangepicker-material
Notifications : ngx-toastr 19.0
Forms : ngx-mask 19.0, ng-select 11.0
Pagination/Tables : ngx-pagination, ngx-easy-table
Image : ngx-image-cropper

Architecture interne

flowchart TB
    Browser[Navigateur]

    subgraph adb-ui["adb-ui (Angular SPA)"]
        App[AppComponent + AppRoutingModule]

        subgraph Core
            AuthGuard
            Interceptors[HttpInterceptors<br/>JWT, errors]
            CoreServices[28+ services par domaine]
        end

        subgraph Content
            Layout[Header / Aside / Alerts]
            Pages[PagesModule lazy-loaded]
            Components[Domain components<br/>persons, parts, contracts,<br/>accounting, tickets, sales,<br/>GRR, agency-settings]
        end

        Shared[Shared components]
    end

    Gateway[adb/proxy Nginx]
    Keycloak

    Browser --> App
    App --> Core
    App --> Content
    Content --> Shared

    AuthGuard --> Keycloak
    CoreServices -->|HTTP| Gateway
    Gateway --> Backend[adb-* microservices]

Modules principaux

src/app/
├── app/                       AppComponent + AppRoutingModule
├── core/
│   ├── guards/                AuthGuard
│   ├── services/              28+ services HTTP
│   ├── models/                domaines métier
│   ├── interceptors/          JWT, errors
│   ├── directives/, pipes/, decorators/, helpers/, mappings/
│   └── integrations/          Google Analytics, Sentry
├── content/
│   ├── layout/                Header, Aside, Alerts, NotesBar, SearchResult
│   ├── components/            persons, parts, contracts, accounting,
│   │                          tickets, sales, GRR, agency-settings
│   └── pages/                 PagesRoutingModule (lazy-loaded)
└── shared/                    Composants partagés

Services API (HttpClient)

Une vingtaine de services groupés par domaine :

Domaine	Services
Accounting	`accounts.service`, `payment.service`, `invoice.service`, `allowance.service`, `events.service`, `cfr.websocket.service`
Contracts	`contracts.service`, `vats.service`, `cfr.service`
Persons	`persons.service`
Parts	`parts.service`
Security	`security.service`
Tickets	`tickets.service`
Admin	`organization.service`
Sales	`sales.service`
GRR	`grr.service` (Global Rental Report)
Agency settings	`agency-settings.service`, `litigation-setting.service`
Layout / Stream / Utilities	`layout.service`, `stream.service`

Service central : core/services/shared/request.service.ts — wrapper HttpClient qui ajoute le token JWT et gère les erreurs.

Configurations d'environnement

Sept fichiers (src/environments/) pour les différents targets :

Fichier	Usage
`environment.ts`	Default
`environment.dev.ts`	Développement
`environment.dev.filatov.ts`	Env custom dev
`environment.int.ts`	Intégration
`environment.test.ts`	Test
`environment.stage.ts`	Staging
`environment.preprod.ts`	Préproduction
`environment.prod.ts`	Production

Clés principales (prod)

{
  apiBaseURL: '/ui',
  keycloak: { issuer, realm: 'ADB', clientId, redirectUri },
  sentryDSN: '...',
  googleKey: '...',
  wsUrl: '...',
  tagMangerId: 'GTM-5S3CNCX',
  // formats date/mask, événements de création/modification métier
}

Build

ng serve                                    # dev server
ng build --configuration=develop            # build dev
ng build --configuration=integration        # build intégration
ng build --configuration=preprod            # build preprod
ng build                                    # build prod (par défaut)
ng test                                     # tests Karma + Jasmine
cypress run --headless                      # tests E2E

Dépendances inter-services

flowchart LR
    ui[adb-ui]
    gw[adb/proxy]
    backend[Tous les microservices<br/>adb-*]

    ui --> gw
    gw --> backend

adb-ui parle à tous les services backend via la gateway, sur les chemins /persons/*, /parts/*, /contracts/*, /accounting/*, /files/*, /utilities/*, /aggregates/*, /view/*, /reports/*, /tickets/*.

Code : adb-ui/
Migration cible : adb-web/apps/ui