# Componentes frontend

```mermaid
flowchart TD
  main["main.ts"] --> appConfig["appConfig"]
  appConfig --> router["Router<br/>app.routes.ts"]
  appConfig --> httpClient["HttpClient<br/>withInterceptors"]
  appConfig --> authInterceptor["authInterceptor"]

  router --> loginRoute["/login"]
  loginRoute --> login["LoginPageComponent"]

  router --> protectedRoute["/"]
  protectedRoute --> authGuard["authGuard"]
  authGuard --> authService["AuthService"]
  authGuard -- "si no hay sesion" --> loginRoute
  authGuard -- "si hay sesion" --> layout["MainLayoutComponent"]

  layout --> outlet["router-outlet"]
  outlet --> dashboard["/dashboard<br/>DashboardPageComponent"]
  outlet --> catalogo["/catalogo<br/>CatalogPageComponent"]
  outlet --> sincronizacion["/sincronizacion<br/>SyncPageComponent"]

  login --> authService
  dashboard --> authService
  layout --> authService
  catalogo --> invimaService["InvimaService"]
  sincronizacion --> invimaService

  authService -- "POST /api/auth/login<br/>GET /api/auth/me<br/>POST /api/auth/logout" --> httpClient
  invimaService -- "GET /api/invima/datasets<br/>GET /api/invima/categorias<br/>GET /api/invima/filtros<br/>GET /api/invima/catalogo<br/>POST /api/invima/sync<br/>GET /api/invima/sync/stats<br/>GET /api/invima/sync/job<br/>GET /api/invima/catalogo/export" --> httpClient

  authInterceptor --> authService
  authInterceptor -- "Authorization: Bearer token" --> httpClient
  httpClient --> proxy["Angular proxy<br/>/api -> http://localhost:3000"]
  proxy --> backend["Express API"]
```

## Archivos analizados

- `diagramas/frontend-clases.mmd`
- `diagramas/frontend-clases.svg`
- `semillero/src/app/app.config.ts`
- `semillero/src/app/app.routes.ts`
- `semillero/src/app/core/guards/auth.guard.ts`
- `semillero/src/app/core/interceptors/auth.interceptor.ts`
- `semillero/src/app/core/services/auth.service.ts`
- `semillero/src/app/core/services/invima.service.ts`
- `semillero/src/app/core/models.ts`
- `semillero/src/app/features/auth/login-page.component.ts`
- `semillero/src/app/features/dashboard/dashboard-page.component.ts`
- `semillero/src/app/features/layout/main-layout.component.ts`
- `semillero/src/app/features/invima/catalog-page.component.ts`
- `semillero/src/app/features/invima/sync-page.component.ts`
- `semillero/proxy.conf.json`