# sap-intercompany-viewer

Frontend (Angular 22, standalone components + signals, Angular Material)
para [`sap-intercompany-api`](../sap-intercompany-api) — reemplaza a
`sap-webhook-viewer` (retirado del repo) consolidando en un solo visor
todo lo relacionado a la replicación entre bases SAP: log de eventos,
bases de datos, y escenarios.

## Pantallas

- **`/log`** (default) — eventos recibidos (`webhook_events`) con filtros
  por fecha, business object, escenario y estado. Cada fila es
  expandible: muestra los `replication_attempts` (escenario, origen →
  destino, verbo, HTTP status, error, result key). Botón **Reprocesar**
  con confirmación explícita (avisa que reintenta TODOS los escenarios y
  destinos aplicables, no solo el que falló).
- **`/databases`** — listado + alta/edición (diálogo) + activar/desactivar
  de bases SAP. El `password` nunca se muestra (la API tampoco lo
  devuelve); al editar, dejarlo vacío significa "no cambiarlo".
- **`/scenarios`** — listado de escenarios (como `scenario:list` del CLI
  del worker).
- **`/scenarios/new`** — alta de escenario (todos los campos de
  `scenario:add`, incluido modo `payload` con `routingField`). Al crear,
  la API escribe el scaffold del `.ts` y esta pantalla redirige al
  detalle mostrando dónde completar `filter`/`transform`.
- **`/scenarios/:code`** — detalle: configuración, destinos (agregar/
  quitar), código fuente de `filter`/`transform` en solo lectura, y
  mapeos de valor (listado + alta).

## Qué NO hace (deliberado, v1)

- **No edita el `.ts` de un escenario.** Se muestra en solo lectura; la
  edición de `filter`/`transform` es siempre en el editor del usuario
  (VSCode) — decisión explícita, ver `CLAUDE.md` en la raíz del repo.
- **No resalta sintaxis** en el código fuente mostrado (bloque monoespaciado
  simple) — para no sumar una dependencia extra en esta v1; se puede
  agregar Prism/highlight.js más adelante si hace falta.
- **No tiene un formulario de edición completo para un escenario
  existente** — solo activar/desactivar. Editar el resto de los campos
  (`PATCH /scenarios/:code`, ya expuesto por la API) queda para una
  iteración futura si se necesita.

## Quick start

```bash
npm install
ng serve   # http://localhost:4200 — requiere sap-intercompany-api corriendo en :3001
```

La URL base de la API está fija en `src/app/core/api.ts`
(`http://localhost:3001`) — simplificación deliberada para esta v1 (Angular
CLI ya no genera `environments/` por default); si hace falta apuntar a otro
host, cambiar esa constante.

## Stack

- Angular 22, standalone components (sin NgModules), signals para estado
  local de componente.
- Angular Material 3 (tema `azure-blue`). Sin `@angular/animations`: es un
  paquete deprecado en esta versión de Angular (reemplazado por
  `animate.enter`/`animate.leave` nativos), y Material 3 no lo necesita
  para su UI base.
- `HttpClient` con un wrapper mínimo (`core/api.ts`) — sin librerías de
  manejo de estado (NgRx, etc.), no hace falta para esta escala.