# liweeddineayari/pfefront architecture

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

- Interactive diagram: https://gitdiagram.com/liweeddineayari/pfefront
- Repository: https://github.com/liweeddineayari/pfefront

## Overview

Frontapp is an Angular financial-data operations and analytics application. Users authenticate, enter a protected workspace, and use ETL/mapping and datamart workflows or manage parameters, ratios, dashboards, and stress tests; an AI chat area is another major capability. The graph highlights those user-facing domains and the shared API/auth layers. Source evidence is partial: relationships are included only where the route excerpt, README, or SOURCE INDEX references support them; unsampled behavior is not inferred.

Main entry points: [`src/app/app.routes.ts`](https://github.com/liweeddineayari/pfefront/blob/main/src/app/app.routes.ts) (Protected routes), [`src/app/core/services/etl-api.service.ts`](https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/services/etl-api.service.ts) (ETL API client), [`src/app/core/services/parameters-api.service.ts`](https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/services/parameters-api.service.ts) (Parameters API), [`src/app/core/auth/auth.service.ts`](https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/auth/auth.service.ts) (Session and identity)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workspace["Workspace and access"]
  node_routes["Protected routes<br/>[app.routes.ts]"]
  node_auth_ui["Sign-in and signup"]
  node_auth_service["Session and identity<br/>[auth.service.ts]"]
  node_auth_api["Auth and admin API"]
  node_permissions["Permission store"]
  node_layout["Application shell"]
end

subgraph group_data_ops["Data operations"]
  node_etl["ETL pipeline"]
  node_etl_api["ETL API client<br/>[etl-api.service.ts]"]
  node_mapping["Mapping configuration"]
  node_datamart["Datamart views"]
  node_client_data["Client data"]
  node_contrat_data["Contract data"]
  node_balance_data["Balance data"]
end

subgraph group_analytics["Financial analytics"]
  node_parameters["Parameter management"]
  node_parameter_api["Parameters API"]
  node_ratios["Ratio management"]
  node_ratio_api["Ratios API"]
  node_dashboard["Dashboard"]
  node_stress_test["Stress testing"]
  node_dashboard_api["Dashboard service"]
end

subgraph group_assistant["AI assistant"]
  node_chatbot["Chat assistant"]
  node_chat_area["Chat interaction"]
  node_sessions["Chat sessions<br/>[session.service.ts]"]
end

subgraph group_shared["Shared services"]
end

node_user(("Finance user"))
node_keycloak{{"Keycloak"}}
node_ai_service{{"AI backend"}}
node_app_api{{"Application backend"}}

node_user -->|"signs in"| node_auth_ui
node_user -->|"opens workspace"| node_routes
node_routes -->|"renders shell"| node_layout
node_routes -->|"routes to"| node_etl
node_routes -->|"routes to"| node_dashboard
node_routes -->|"routes to"| node_client_data
node_auth_ui -.->|"authenticates"| node_auth_service
node_auth_service -->|"requests tokens"| node_keycloak
node_auth_service -.->|"loads grants"| node_permissions
node_permissions -->|"fetches permissions"| node_auth_api
node_auth_api -.->|"sends auth requests"| node_app_api
node_etl -->|"requests ETL data"| node_etl_api
node_etl -->|"downloads quality rows"| node_etl_api
node_etl_api -->|"calls ETL endpoints"| node_app_api
node_mapping -.->|"manages mappings"| node_etl_api
node_datamart -.->|"shows client data"| node_client_data
node_parameters -->|"loads and edits"| node_parameter_api
node_parameter_api -.->|"calls parameter endpoints"| node_app_api
node_ratios -->|"manages ratios"| node_ratio_api
node_ratios -->|"uses parameters"| node_parameter_api
node_ratio_api -.->|"calls ratio endpoints"| node_app_api
node_dashboard -->|"loads dashboard"| node_dashboard_api
node_dashboard_api -.->|"loads analytics"| node_app_api
node_stress_test -->|"loads parameters"| node_parameter_api
node_stress_test -.->|"runs stress tests"| node_app_api
node_chatbot -->|"renders chat"| node_chat_area
node_chatbot -.->|"manages sessions"| node_sessions
node_sessions -.->|"requests sessions"| node_ai_service

click node_routes "https://github.com/liweeddineayari/pfefront/blob/main/src/app/app.routes.ts"
click node_auth_ui "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/auth/sign-in/sign-in.component.ts"
click node_auth_service "https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/auth/auth.service.ts"
click node_auth_api "https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/auth/auth-api.service.ts"
click node_permissions "https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/auth/permission.store.ts"
click node_layout "https://github.com/liweeddineayari/pfefront/blob/main/src/app/layout/layout/layout.component.ts"
click node_etl "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/etl-pipeline/etl-pipeline.component.ts"
click node_etl_api "https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/services/etl-api.service.ts"
click node_mapping "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/mapping-config/mapping-config.component.ts"
click node_datamart "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/datamart/datamart.component.ts"
click node_client_data "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/client-data/client-data.component.ts"
click node_contrat_data "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/contrat-data/contrat-data.component.ts"
click node_balance_data "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/balance-data/balance-data.component.ts"
click node_parameters "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/parameters/parameters-page.component.ts"
click node_parameter_api "https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/services/parameters-api.service.ts"
click node_ratios "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/ratios/ratios-page.component.ts"
click node_ratio_api "https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/services/ratios-api.service.ts"
click node_dashboard "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/dashboard/dashboard.component.ts"
click node_stress_test "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/stress-test/stress-test-page.component.ts"
click node_dashboard_api "https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/services/dashboard.service.ts"
click node_chatbot "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/chatbot/chatbot-page.component.ts"
click node_chat_area "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/chatbot/components/chat-area/chat-area.component.ts"
click node_sessions "https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/chatbot/services/session.service.ts"

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_routes,node_auth_ui,node_auth_service,node_auth_api,node_permissions,node_layout,node_user toneBlue
class node_etl,node_etl_api,node_mapping,node_datamart,node_client_data,node_contrat_data,node_balance_data toneAmber
class node_parameters,node_parameter_api,node_ratios,node_ratio_api,node_dashboard,node_stress_test,node_dashboard_api toneMint
class node_chatbot,node_chat_area,node_sessions toneRose
class node_keycloak,node_ai_service,node_app_api toneIndigo
```

## Components

### Workspace and access

- [Protected routes](https://github.com/liweeddineayari/pfefront/blob/main/src/app/app.routes.ts): `src/app/app.routes.ts`
- [Sign-in and signup](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/auth/sign-in/sign-in.component.ts): `src/app/pages/auth/sign-in/sign-in.component.ts`
- [Session and identity](https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/auth/auth.service.ts): `src/app/core/auth/auth.service.ts`
- [Auth and admin API](https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/auth/auth-api.service.ts): `src/app/core/auth/auth-api.service.ts`
- [Permission store](https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/auth/permission.store.ts): `src/app/core/auth/permission.store.ts`
- [Application shell](https://github.com/liweeddineayari/pfefront/blob/main/src/app/layout/layout/layout.component.ts): `src/app/layout/layout/layout.component.ts`

### Data operations

- [ETL pipeline](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/etl-pipeline/etl-pipeline.component.ts): `src/app/pages/etl-pipeline/etl-pipeline.component.ts`
- [ETL API client](https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/services/etl-api.service.ts): `src/app/core/services/etl-api.service.ts`
- [Mapping configuration](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/mapping-config/mapping-config.component.ts): `src/app/pages/mapping-config/mapping-config.component.ts`
- [Datamart views](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/datamart/datamart.component.ts): `src/app/pages/datamart/datamart.component.ts`
- [Client data](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/client-data/client-data.component.ts): `src/app/pages/client-data/client-data.component.ts`
- [Contract data](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/contrat-data/contrat-data.component.ts): `src/app/pages/contrat-data/contrat-data.component.ts`
- [Balance data](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/balance-data/balance-data.component.ts): `src/app/pages/balance-data/balance-data.component.ts`

### Financial analytics

- [Parameter management](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/parameters/parameters-page.component.ts): `src/app/pages/parameters/parameters-page.component.ts`
- [Parameters API](https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/services/parameters-api.service.ts): `src/app/core/services/parameters-api.service.ts`
- [Ratio management](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/ratios/ratios-page.component.ts): `src/app/pages/ratios/ratios-page.component.ts`
- [Ratios API](https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/services/ratios-api.service.ts): `src/app/core/services/ratios-api.service.ts`
- [Dashboard](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/dashboard/dashboard.component.ts): `src/app/pages/dashboard/dashboard.component.ts`
- [Stress testing](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/stress-test/stress-test-page.component.ts): `src/app/pages/stress-test/stress-test-page.component.ts`
- [Dashboard service](https://github.com/liweeddineayari/pfefront/blob/main/src/app/core/services/dashboard.service.ts): `src/app/core/services/dashboard.service.ts`

### AI assistant

- [Chat assistant](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/chatbot/chatbot-page.component.ts): `src/app/pages/chatbot/chatbot-page.component.ts`
- [Chat interaction](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/chatbot/components/chat-area/chat-area.component.ts): `src/app/pages/chatbot/components/chat-area/chat-area.component.ts`
- [Chat sessions](https://github.com/liweeddineayari/pfefront/blob/main/src/app/pages/chatbot/services/session.service.ts): `src/app/pages/chatbot/services/session.service.ts`

### Other components

- **Finance user**
- **Keycloak**
- **AI backend**
- **Application backend**

## Connections

- Finance user → Sign-in and signup: signs in
- Finance user → Protected routes: opens workspace (evidence: `src/app/app.routes.ts`)
- Protected routes → Application shell: renders shell (evidence: `src/app/app.routes.ts`)
- Protected routes → ETL pipeline: routes to (evidence: `src/app/app.routes.ts`)
- Protected routes → Dashboard: routes to (evidence: `src/app/app.routes.ts`)
- Protected routes → Client data: routes to (evidence: `src/app/app.routes.ts`)
- Sign-in and signup → Session and identity: authenticates
- Session and identity → Keycloak: requests tokens (evidence: `src/app/core/auth/auth.service.ts`)
- Session and identity → Permission store: loads grants (evidence: `src/app/core/auth/auth.service.ts`)
- Permission store → Auth and admin API: fetches permissions (evidence: `src/app/core/auth/permission.store.ts`)
- Auth and admin API → Application backend: sends auth requests
- ETL pipeline → ETL API client: requests ETL data (evidence: `src/app/pages/etl-pipeline/etl-pipeline.component.ts`)
- ETL pipeline → ETL API client: downloads quality rows (evidence: `src/app/pages/etl-pipeline/etl-pipeline.component.ts`)
- ETL API client → Application backend: calls ETL endpoints
- Mapping configuration → ETL API client: manages mappings
- Datamart views → Client data: shows client data
- Parameter management → Parameters API: loads and edits (evidence: `src/app/pages/parameters/parameters-page.component.ts`)
- Parameters API → Application backend: calls parameter endpoints
- Ratio management → Ratios API: manages ratios (evidence: `src/app/pages/ratios/ratios-page.component.ts`)
- Ratio management → Parameters API: uses parameters (evidence: `src/app/pages/ratios/ratios-page.component.ts`)
- Ratios API → Application backend: calls ratio endpoints
- Dashboard → Dashboard service: loads dashboard (evidence: `src/app/pages/dashboard/dashboard.component.ts`)
- Dashboard service → Application backend: loads analytics
- Stress testing → Parameters API: loads parameters (evidence: `src/app/pages/stress-test/stress-test-page.component.ts`)
- Stress testing → Application backend: runs stress tests
- Chat assistant → Chat interaction: renders chat (evidence: `src/app/pages/chatbot/chatbot-page.component.ts`)
- Chat assistant → Chat sessions: manages sessions (evidence: `src/app/pages/chatbot/chatbot-page.component.ts`)
- Chat sessions → AI backend: requests sessions