# ceoalmaloco/frontend-barriodigital architecture

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

- Interactive diagram: https://gitdiagram.com/ceoalmaloco/frontend-barriodigital
- Repository: https://github.com/ceoalmaloco/frontend-barriodigital

## Overview

BarrioDigital is an Angular frontend for municipal procedures. The main workflow is sign-in and role-based access, followed by residents creating and tracking requests or staff reviewing requests and changing their status; admins also manage procedure types. Reports and audit are documented placeholder screens, not data-processing features. Arrows reflect shown calls and documented HTTP behavior; unsampled details are omitted.

Main entry points: [`src/app/app.routes.ts`](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/app.routes.ts) (Route configuration), [`src/app/features/requests/requests.component.ts`](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/requests.component.ts) (Request list and entry), [`src/app/core/auth/auth.service.ts`](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/auth/auth.service.ts) (Authentication service), [`src/app/core/catalog/catalog.service.ts`](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/catalog/catalog.service.ts) (Catalog API service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App and access"]
  node_app["App bootstrap<br/>[app.component.ts]"]
  node_routes["Route configuration<br/>[app.routes.ts]"]
  node_auth["Authentication service<br/>[auth.service.ts]"]
  node_guard["Route guards<br/>[auth.guard.ts]"]
  node_msal["MSAL configuration<br/>[msal-config.ts]"]
  node_login["Sign-in screen<br/>[login.component.ts]"]
  node_layout["Authenticated layout"]
  node_header["Role-based header"]
  node_dashboard["Home screen"]
  node_reports["Reports placeholder"]
  node_audit["Audit placeholder<br/>[audit.component.ts]"]
end

subgraph group_requests["Request workflows"]
  node_requests["Request list and entry"]
  node_request_service["Request API service"]
  node_request_actions["Request actions"]
  node_status_dialog["Status change dialog"]
  node_request_constants["Request status rules"]
end

subgraph group_catalog["Procedure catalog"]
  node_catalog_service["Catalog API service<br/>[catalog.service.ts]"]
  node_admin["Catalog administration<br/>[admin.component.ts]"]
  node_procedure_dialog["Procedure type dialog"]
end

subgraph group_shared["Shared domain"]
  node_request_model["Request data model<br/>[request.model.ts]"]
  node_procedure_model["Procedure type model"]
  node_roles["Role definitions<br/>[role.ts]"]
end

node_resident(("Resident or staff"))
node_entra{{"Microsoft Entra ID"}}
node_bff{{"Backend-for-frontend"}}

node_resident -->|"signs in"| node_login
node_app -->|"handles redirect"| node_auth
node_login -->|"starts session"| node_auth
node_auth -->|"authenticates"| node_entra
node_auth -->|"uses configuration"| node_msal
node_routes -->|"guards routes"| node_guard
node_routes -->|"mounts layout"| node_layout
node_layout -->|"renders"| node_header
node_header -->|"reads session"| node_auth
node_routes -->|"routes to"| node_login
node_routes -->|"routes to"| node_dashboard
node_routes -->|"routes to"| node_requests
node_routes -->|"routes to"| node_admin
node_routes -->|"routes to"| node_reports
node_routes -->|"routes to"| node_audit
node_guard -->|"checks roles"| node_auth
node_requests -->|"checks user role"| node_auth
node_requests -->|"loads and changes"| node_request_service
node_request_service -->|"sends API requests"| node_bff
node_requests -->|"loads procedure types"| node_catalog_service
node_catalog_service -->|"sends catalog requests"| node_bff
node_requests -->|"opens dialog"| node_status_dialog
node_requests -->|"uses actions"| node_request_actions
node_status_dialog -->|"changes status"| node_request_service
node_admin -->|"loads catalog"| node_catalog_service
node_admin -->|"opens dialog"| node_procedure_dialog
node_procedure_dialog -->|"saves changes"| node_catalog_service
node_requests -->|"uses request data"| node_request_model
node_request_service -->|"maps responses"| node_request_model
node_request_actions -->|"uses status rules"| node_request_constants
node_status_dialog -->|"uses status rules"| node_request_constants
node_admin -->|"uses catalog data"| node_procedure_model
node_catalog_service -->|"maps catalog data"| node_procedure_model
node_routes -->|"assigns route roles"| node_roles

click node_app "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/app.component.ts"
click node_routes "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/app.routes.ts"
click node_auth "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/auth/auth.service.ts"
click node_guard "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/auth/auth.guard.ts"
click node_msal "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/auth/msal-config.ts"
click node_login "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/login/login.component.ts"
click node_layout "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/layout/authenticated-layout.component.ts"
click node_header "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/shared/components/header/header.component.ts"
click node_dashboard "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/dashboard/dashboard.component.ts"
click node_requests "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/requests.component.ts"
click node_request_service "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/requests.service.ts"
click node_request_actions "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/request-actions/request-actions.component.ts"
click node_status_dialog "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/request-status-dialog/request-status-dialog.component.ts"
click node_request_constants "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/requests.constants.ts"
click node_request_model "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/shared/models/request.model.ts"
click node_catalog_service "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/catalog/catalog.service.ts"
click node_admin "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/admin/admin.component.ts"
click node_procedure_dialog "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/admin/procedure-type-dialog/procedure-type-dialog.component.ts"
click node_procedure_model "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/shared/models/procedure-type.model.ts"
click node_roles "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/shared/models/role.ts"
click node_reports "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/reports/reports.component.ts"
click node_audit "https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/audit/audit.component.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_app,node_routes,node_auth,node_guard,node_msal,node_login,node_layout,node_header,node_dashboard,node_reports,node_audit,node_bff toneBlue
class node_requests,node_request_service,node_request_actions,node_status_dialog,node_request_constants toneAmber
class node_catalog_service,node_admin,node_procedure_dialog toneMint
class node_request_model,node_procedure_model,node_roles toneRose
class node_resident,node_entra toneIndigo
```

## Components

### App and access

- [App bootstrap](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/app.component.ts): `src/app/app.component.ts`
- [Route configuration](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/app.routes.ts): `src/app/app.routes.ts`
- [Authentication service](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/auth/auth.service.ts): `src/app/core/auth/auth.service.ts`
- [Route guards](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/auth/auth.guard.ts): `src/app/core/auth/auth.guard.ts`
- [MSAL configuration](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/auth/msal-config.ts): `src/app/core/auth/msal-config.ts`
- [Sign-in screen](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/login/login.component.ts): `src/app/features/login/login.component.ts`
- [Authenticated layout](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/layout/authenticated-layout.component.ts): `src/app/core/layout/authenticated-layout.component.ts`
- [Role-based header](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/shared/components/header/header.component.ts): `src/app/shared/components/header/header.component.ts`
- [Home screen](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/dashboard/dashboard.component.ts): `src/app/features/dashboard/dashboard.component.ts`
- [Reports placeholder](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/reports/reports.component.ts): `src/app/features/reports/reports.component.ts`
- [Audit placeholder](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/audit/audit.component.ts): `src/app/features/audit/audit.component.ts`

### Request workflows

- [Request list and entry](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/requests.component.ts): `src/app/features/requests/requests.component.ts`
- [Request API service](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/requests.service.ts): `src/app/features/requests/requests.service.ts`
- [Request actions](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/request-actions/request-actions.component.ts): `src/app/features/requests/request-actions/request-actions.component.ts`
- [Status change dialog](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/request-status-dialog/request-status-dialog.component.ts): `src/app/features/requests/request-status-dialog/request-status-dialog.component.ts`
- [Request status rules](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/requests/requests.constants.ts): `src/app/features/requests/requests.constants.ts`

### Procedure catalog

- [Catalog API service](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/core/catalog/catalog.service.ts): `src/app/core/catalog/catalog.service.ts`
- [Catalog administration](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/admin/admin.component.ts): `src/app/features/admin/admin.component.ts`
- [Procedure type dialog](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/features/admin/procedure-type-dialog/procedure-type-dialog.component.ts): `src/app/features/admin/procedure-type-dialog/procedure-type-dialog.component.ts`

### Shared domain

- [Request data model](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/shared/models/request.model.ts): `src/app/shared/models/request.model.ts`
- [Procedure type model](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/shared/models/procedure-type.model.ts): `src/app/shared/models/procedure-type.model.ts`
- [Role definitions](https://github.com/ceoalmaloco/frontend-barriodigital/blob/main/src/app/shared/models/role.ts): `src/app/shared/models/role.ts`

### Other components

- **Resident or staff**
- **Microsoft Entra ID**
- **Backend-for-frontend**

## Connections

- Resident or staff → Sign-in screen: signs in (evidence: `README.md`)
- App bootstrap → Authentication service: handles redirect (evidence: `src/app/app.component.ts`)
- Sign-in screen → Authentication service: starts session (evidence: `README.md`)
- Authentication service → Microsoft Entra ID: authenticates (evidence: `README.md`)
- Authentication service → MSAL configuration: uses configuration (evidence: `src/app/core/auth/auth.service.ts`)
- Route configuration → Route guards: guards routes (evidence: `src/app/app.routes.ts`)
- Route configuration → Authenticated layout: mounts layout (evidence: `src/app/app.routes.ts`)
- Authenticated layout → Role-based header: renders (evidence: `src/app/core/layout/authenticated-layout.component.ts`)
- Role-based header → Authentication service: reads session (evidence: `src/app/shared/components/header/header.component.ts`)
- Route configuration → Sign-in screen: routes to (evidence: `src/app/app.routes.ts`)
- Route configuration → Home screen: routes to (evidence: `src/app/app.routes.ts`)
- Route configuration → Request list and entry: routes to (evidence: `src/app/app.routes.ts`)
- Route configuration → Catalog administration: routes to (evidence: `src/app/app.routes.ts`)
- Route configuration → Reports placeholder: routes to (evidence: `src/app/app.routes.ts`)
- Route configuration → Audit placeholder: routes to (evidence: `src/app/app.routes.ts`)
- Route guards → Authentication service: checks roles (evidence: `src/app/core/auth/auth.guard.ts`)
- Request list and entry → Authentication service: checks user role (evidence: `src/app/features/requests/requests.component.ts`)
- Request list and entry → Request API service: loads and changes (evidence: `src/app/features/requests/requests.component.ts`)
- Request API service → Backend-for-frontend: sends API requests (evidence: `src/app/features/requests/requests.service.ts`)
- Request list and entry → Catalog API service: loads procedure types (evidence: `src/app/features/requests/requests.component.ts`)
- Catalog API service → Backend-for-frontend: sends catalog requests (evidence: `src/app/core/catalog/catalog.service.ts`)
- Request list and entry → Status change dialog: opens dialog (evidence: `src/app/features/requests/requests.component.ts`)
- Request list and entry → Request actions: uses actions (evidence: `src/app/features/requests/requests.component.ts`)
- Status change dialog → Request API service: changes status (evidence: `src/app/features/requests/request-status-dialog/request-status-dialog.component.ts`)
- Catalog administration → Catalog API service: loads catalog (evidence: `src/app/features/admin/admin.component.ts`)
- Catalog administration → Procedure type dialog: opens dialog (evidence: `src/app/features/admin/admin.component.ts`)
- Procedure type dialog → Catalog API service: saves changes (evidence: `src/app/features/admin/procedure-type-dialog/procedure-type-dialog.component.ts`)
- Request list and entry → Request data model: uses request data (evidence: `src/app/features/requests/requests.component.ts`)
- Request API service → Request data model: maps responses (evidence: `src/app/features/requests/requests.service.ts`)
- Request actions → Request status rules: uses status rules (evidence: `src/app/features/requests/request-actions/request-actions.component.ts`)
- Status change dialog → Request status rules: uses status rules (evidence: `src/app/features/requests/request-status-dialog/request-status-dialog.component.ts`)
- Catalog administration → Procedure type model: uses catalog data (evidence: `src/app/features/admin/admin.component.ts`)
- Catalog API service → Procedure type model: maps catalog data (evidence: `src/app/core/catalog/catalog.service.ts`)
- Route configuration → Role definitions: assigns route roles (evidence: `src/app/app.routes.ts`)