ProyectoGrupal/doli-front/presentacion/guion_presentacion.md

# Guion de presentación — Frontend (doli-front)

> Tiempo estimado de esta parte: ~15 min dentro de los 50 min totales del equipo.

---

## 1. Introducción al frontend (2 min)

- Qué es `doli-front`: SPA que consume el BFF para mostrar y gestionar los datos de Dolibarr.
- Decisión técnica: **Vanilla JS** sin frameworks → sin dependencias de React/Vue, control total del DOM.
- Herramienta de build: **Vite 7** — HMR instantáneo en desarrollo, build optimizado con ES Modules.

---

## 2. Arquitectura interna (3 min)

Mostrar la estructura de carpetas en el IDE:

```
src/
├── main.js          ← punto de entrada, monta layout
├── router.js        ← escucha hash, carga la página correcta
├── pages/           ← cada página es una función que devuelve un HTMLElement
├── services/        ← apiClient.js centraliza el fetch + JWT
└── components/      ← sidebar, modales reutilizables
```

**Puntos clave a explicar:**
- El router es hash-based (`#/facturas`, `#/clientes`…) → no necesita servidor con rutas configuradas.
- `apiClient.js`: adjunta el token JWT automáticamente en cada petición, redirige al login en 401.
- Cada página encapsula su propio estado, listeners y cleanup (sin estado global compartido).

---

## 3. Demo en vivo — recorrido por las páginas (8 min)

Abrir la app en el navegador y mostrar:

### Dashboard
- Gráficas de facturas con **Chart.js**.
- Métricas en tarjetas (total clientes, facturas pendientes…).

### Facturas de proveedores ← parte más completa
- Listar facturas con búsqueda en tiempo real.
- Abrir detalle: ver líneas, importes, estado.
- Cambiar estado: Borrador → Validada → Pagada (botones contextuales).
- Añadir línea a una factura en borrador.
- Registrar un pago (seleccionar tipo, importe, fecha).
- Eliminar factura en borrador con confirmación.

### Contactos
- Búsqueda en tiempo real sobre la tabla.
- Ver detalle / editar inline.
- Crear nuevo contacto con selector de empresa.

### Configuración
- Toggle tema claro/oscuro (persiste en localStorage).
- Temporizador de expiración del JWT en tiempo real.
- Configurar URL de webhook (Teams/Slack).
- Registro de certificado VeriFactu: selector de archivo `.p12` → se convierte a base64 → se envía al BFF.

---

## 4. Decisiones técnicas destacables (2 min)

- **Sin framework**: cada página es una función `render*()` → fácil de leer, sin magia.
- **FileReader API**: el certificado `.p12` se lee en el navegador y se convierte a base64 antes de enviarlo, sin exponer rutas del servidor.
- **Asistente de voz**: Whisper ejecutándose en local en el navegador con `@huggingface/transformers` (sin APIs externas de voz).
- **Toast notifications**: sistema propio ligero sin librerías externas.
- **Cleanup de páginas**: cada página registra un método `cleanup()` que el router llama al navegar, evitando memory leaks de intervals/listeners.

---

## Capturas recomendadas para incluir en slides

- Captura del dashboard con las gráficas.
- Captura del modal de detalle de factura de proveedor (con líneas y pagos).
- Captura de la sección VeriFactu en ajustes.
- Diagrama simple del flujo: `Página → apiClient → BFF`.

---

## Posibles preguntas del profesor

**¿Por qué Vanilla JS y no React?**
→ Para demostrar conocimiento de las APIs del navegador sin abstracciones. El proyecto es de tamaño manejable y no requería el overhead de un framework.

**¿Cómo gestionas el estado?**
→ Cada página tiene su propio estado local (variables en el closure). No hay estado global; el router destruye la página anterior antes de montar la nueva.

**¿Cómo funciona el JWT?**
→ El BFF devuelve un token al hacer login. El frontend lo guarda en `localStorage` y `apiClient.js` lo adjunta en el header `Authorization: Bearer` de cada petición.

**¿Cómo se integra con VeriFactu?**
→ La página de ajustes lee el `.p12` como base64 con `FileReader`, lo envía al BFF, y el BFF lo reenvía al servicio Go que valida y almacena el certificado.