trello_fake/presentaciones/levi/codigo_interno.md

<style>
    a {
        color: black
    }
</style>
# Dashboard de Proyectos Dolibarr

![Foto portada](capturas/portada.png)

**Alumno:** Levi Planelles Granata <br>
**Ciclo:** Desarrollo de aplicaciones multiplataforma<br>
**Asignatura:** Proyecto intermododular

---

## Índice
- [1) Infraestructura (Docker)](#infraestructura-docker)
- [2) Variables de entorno (configuración)](#variables-entorno-configuracion)
- [3) Proxy API (seguridad de la API key)](#proxy-api-seguridad-api-key)
- [4) Cliente central de Dolibarr](#cliente-central-dolibarr)
- [5) Servicios de proyectos (CRUD)](#servicios-proyectos-crud)
- [6) Mapeo de datos y estados](#mapeo-datos-estados)
- [7) Autenticación (login)](#autenticacion-login)
- [8) Middleware de acceso](#middleware-acceso)
- [9) Seed de datos (demo reproducible)](#seed-datos-demo)
- [10) Conexión entre piezas (flujo resumido)](#conexion-piezas-flujo)

---

<a id="infraestructura-docker"></a>
## 1) Infraestructura (Docker)


**Por qué es importante:**
- El proyecto depende de Dolibarr y una base de datos real.
- Docker permite reproducir el entorno en cualquier máquina.
- Sin Dolibarr activo, la API devuelve errores de conexión.

**Docker Desktop**<br>
![Docker Desktop](capturas/servicios-levantados.png)
<br>
***
**Docker compose**<br>
![Docker Compose](capturas/docker-compose.png)
<br>

**Explicación:**
- Se levantan 2 servicios: MariaDB y Dolibarr.
- Dolibarr expone el puerto `8200` para acceder al ERP.
- Las credenciales y módulos se configuran por variables de entorno.
- Los volúmenes guardan datos persistentes.

---

<a id="variables-entorno-configuracion"></a>
## 2) Variables de entorno (configuración)

**Por qué es importante:**
- La app no funciona sin apuntar a la API de Dolibarr.
- La API key se mantiene en servidor y no se expone al cliente.

**Env local (API borrada por temas de seguridad...)**<br>
![Env Local](capturas/env-local.png)


**Explicación:**
- La URL y la API key son el puente con Dolibarr.
- Existen variables legacy `NEXT_PUBLIC_*` por compatibilidad.

---

<a id="proxy-api-seguridad-api-key"></a>
## 3) Proxy API (seguridad de la API key)

**Por qué es importante:**
- El frontend nunca habla directamente con Dolibarr.
- El proxy agrega la key en servidor y protege credenciales.

**Métodos GET/POST/PUT/DELETE:**<br>
![Route.ts](capturas/route.png)
***
**Ejemplo llamada:**<br>
![Ejemplo llamada](capturas/ejemplo-llamada.png)
<br>


**Explicación:**
- Todas las llamadas pasan por `/api/dolibarr/...`.
- Se construye la URL real con `DOLIBARR_API_URL`.
- Se reenvían los métodos HTTP y se manejan errores.
- La API key nunca se expone al navegador; se inyecta en servidor.

---

<a id="cliente-central-dolibarr"></a>
## 4) Cliente central de Dolibarr

**Por qué es importante:**
- Centraliza todas las llamadas a la API.
- Simplifica los métodos de los servicios (proyectos, tareas, usuarios).

**Direct Fetch:**<br>
![Direct Fetch](capturas/direct-fetch.png)
<br>
***
**Proxy Fetch:**<br>
![Proxy Fetch](capturas/proxy-fetch.png)
<br>
***
**Decisión según entorno**<br>
![Decisión según entorno](capturas/decision.png)
<br>


**Explicación:**
- Si es servidor usa llamada directa.
- Si es cliente usa el proxy interno.
- No se aplica caché en servidor (`cache: 'no-store'`).

---

<a id="servicios-proyectos-crud"></a>
## 5) Servicios de proyectos (CRUD)

**Por qué es importante:**
- Toda la lógica de proyectos vive aquí.
- La UI solo consume estos métodos, no la API directa.

**CRUD Proyectos:**<br>
![CRUD Projects Service](capturas/crud-proyectos.png)
<br>
***
**CRUD Avanzado:**<br>
![CRUD Advanced Service](capturas/crud-avanzado.png)
<br>
***
**Ejemplo funcionamiento:**<br>
![GET Endpoint example](capturas/ejemplo-endpoint-getprojects.png)
<br>
**Explicación:**
- `getProjects()` obtiene datos y los mapea a formato UI.
- `createProject()` crea en Dolibarr y devuelve el proyecto completo.
- Se controla el flujo de errores en un solo lugar.

---

<a id="mapeo-datos-estados"></a>
## 6) Mapeo de datos y estados

**Por qué es importante:**
- Dolibarr devuelve datos crudos, la UI necesita formato amigable.
- Se normalizan fechas, presupuesto y progreso.

**Interfaz cruda y de UI para Proyectos:**<br>
![Interfaces proyectos](capturas/interfaces-proyectos.png)
<br>
***
**Mapeador Proyectos:**<br>
![Mapeador Proyectos](capturas/mapeador-proyectos.png)
<br>

**Explicación:**
- Estados oficiales: 0 Borrador, 1 Activo, 2 Cerrado.
- El mapper convierte campos y define etiquetas visibles.

---

<a id="autenticacion-login"></a>
## 7) Autenticación (login)

**Por qué es importante:**
- El acceso está protegido por credenciales reales de Dolibarr.
- El token se guarda y permite navegar por la app.

**Servicio de autenticación:**<br>
![Auth Service](capturas/auth-service.png)
<br>
***
**Servicio de autenticación - 2:**<br>
![Auth Service 2](capturas/auth-service-2.png)
<br>

**Explicación:**
- El login pide token a Dolibarr.
- Si es correcto, se guarda en localStorage y cookie.
- Se usa luego para validar sesiones.

---

<a id="middleware-acceso"></a>
## 8) Middleware de acceso

**Por qué es importante:**
- Protege rutas privadas cuando no hay token.
- Bloquea acceso directo a la app sin autenticación.

**Middleware:**<br>
![Middleware](capturas/middleware.png)
<br>

**Explicación:**
- Si no hay token, redirige a login.
- Si hay token, permite navegar.
- No valida con Dolibarr en cada request; solo comprueba token local.

---

<a id="seed-datos-demo"></a>
## 9) Seed de datos (demo reproducible)

**Por qué es importante:**
- Permite crear datos realistas en minutos.
- La demo es consistente para la presentación.

**Seed script:**<br>
![Seed Script](capturas/seed.png)
<br>

**Explicación:**
- El seed elimina proyectos previos.
- Crea 14 proyectos con tareas.
- Los que están al 100% se cierran (status 2).
- Se ejecuta con `npm run seed`.

---

<a id="conexion-piezas-flujo"></a>
## 10) Conexión entre piezas (flujo resumido)

**Diagrama visual**<br>
![Diagrama de Flujo Principal](capturas/diagrama.svg)
<br>

**Explicación:**
- La UI nunca toca la API directamente.
- El proxy y el cliente central simplifican el acceso.
- Dolibarr sigue siendo la fuente única de verdad.

---