Last updated 2026-05-03

adb-ui

AI-generated content

This document was generated by an AI assistant. Verify accuracy before relying on the details.

Role

Legacy Angular 19 frontend of the platform. Centralised user interface for property management: persons, parts, contracts, invoices, payments, tickets, dashboards.

It is the direct client of all microservices through the Nginx gateway (adb/proxy). Authentication is handled by Keycloak (keycloak-angular adapter).

⚠️ A migration is in progress towards adb-web (Cloudflare Workers). Eventually, adb-ui will be replaced by adb-web/apps/ui.

Stack

Item	Value
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
Editor	CKEditor 5 (classic build 41.4.2)
Maps	Google Maps (`@googlemaps/js-api-loader`)
Tracking	Sentry 6.11.0, Google Tag Manager (GTM-5S3CNCX in 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`

Notable dependencies

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

Internal architecture

flowchart TB
    Browser[Browser]

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

        subgraph Core
            AuthGuard
            Interceptors[HttpInterceptors<br/>JWT, errors]
            CoreServices[28+ services per domain]
        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]

Main modules

src/app/
├── app/                       AppComponent + AppRoutingModule
├── core/
│   ├── guards/                AuthGuard
│   ├── services/              28+ HTTP services
│   ├── models/                business domains
│   ├── 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/                    Shared components

API services (HttpClient)

About twenty services grouped by domain:

Domain	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`

Central service: core/services/shared/request.service.ts — HttpClient wrapper that adds the JWT token and handles errors.

Environment configurations

Seven files (src/environments/) for the various targets:

File	Usage
`environment.ts`	Default
`environment.dev.ts`	Development
`environment.dev.filatov.ts`	Custom dev env
`environment.int.ts`	Integration
`environment.test.ts`	Test
`environment.stage.ts`	Staging
`environment.preprod.ts`	Pre-production
`environment.prod.ts`	Production

Main keys (prod)

{
  apiBaseURL: '/ui',
  keycloak: { issuer, realm: 'ADB', clientId, redirectUri },
  sentryDSN: '...',
  googleKey: '...',
  wsUrl: '...',
  tagMangerId: 'GTM-5S3CNCX',
  // date/mask formats, business creation/modification events
}

Build

ng serve                                    # dev server
ng build --configuration=develop            # dev build
ng build --configuration=integration        # integration build
ng build --configuration=preprod            # preprod build
ng build                                    # prod build (default)
ng test                                     # Karma + Jasmine tests
cypress run --headless                      # E2E tests

Inter-service dependencies

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

    ui --> gw
    gw --> backend

adb-ui talks to all backend services through the gateway, on the paths /persons/*, /parts/*, /contracts/*, /accounting/*, /files/*, /utilities/*, /aggregates/*, /view/*, /reports/*, /tickets/*.