Add portada image and update internal documentation structure

presentaciones/levi/codigo_interno.md

@@ -1,4 +1,34 @@
 
+<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)
 
 
@@ -7,11 +37,13 @@
 - Docker permite reproducir el entorno en cualquier máquina.
 - Sin Dolibarr activo, la API devuelve errores de conexión.
 
-**Docker Desktop**
+**Docker Desktop**<br>
 ![Docker Desktop](capturas/servicios-levantados.png)
+<br>
 ***
-**Docker compose**
+**Docker compose**<br>
 ![Docker Compose](capturas/docker-compose.png)
+<br>
 
 **Explicación:**
 - Se levantan 2 servicios: MariaDB y Dolibarr.
@@ -21,32 +53,36 @@
 
 ---
 
+<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...)**
+**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:**
+**Métodos GET/POST/PUT/DELETE:**<br>
 ![Route.ts](capturas/route.png)
 ***
-**Ejemplo llamada:**
+**Ejemplo llamada:**<br>
 ![Ejemplo llamada](capturas/ejemplo-llamada.png)
+<br>
 
 
 **Explicación:**
@@ -57,20 +93,24 @@
 
 ---
 
+<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:**
+**Direct Fetch:**<br>
 ![Direct Fetch](capturas/direct-fetch.png)
+<br>
 ***
-**Proxy Fetch:**
+**Proxy Fetch:**<br>
 ![Proxy Fetch](capturas/proxy-fetch.png)
+<br>
 ***
-**Decisión según entorno**
+**Decisión según entorno**<br>
 ![Decisión según entorno](capturas/decision.png)
+<br>
 
 
 **Explicación:**
@@ -80,20 +120,24 @@
 
 ---
 
+<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:**
+**CRUD Proyectos:**<br>
 ![CRUD Projects Service](capturas/crud-proyectos.png)
+<br>
 ***
-**CRUD Avanzado:**
+**CRUD Avanzado:**<br>
 ![CRUD Advanced Service](capturas/crud-avanzado.png)
+<br>
 ***
-**Ejemplo funcionamiento:**
+**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.
@@ -101,17 +145,20 @@
 
 ---
 
+<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:**
+**Interfaz cruda y de UI para Proyectos:**<br>
 ![Interfaces proyectos](capturas/interfaces-proyectos.png)
+<br>
 ***
-**Mapeador Proyectos:**
+**Mapeador Proyectos:**<br>
 ![Mapeador Proyectos](capturas/mapeador-proyectos.png)
+<br>
 
 **Explicación:**
 - Estados oficiales: 0 Borrador, 1 Activo, 2 Cerrado.
@@ -119,17 +166,20 @@
 
 ---
 
+<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:**
+**Servicio de autenticación:**<br>
 ![Auth Service](capturas/auth-service.png)
+<br>
 ***
-**Servicio de autenticación - 2:**
+**Servicio de autenticación - 2:**<br>
 ![Auth Service 2](capturas/auth-service-2.png)
+<br>
 
 **Explicación:**
 - El login pide token a Dolibarr.
@@ -138,19 +188,16 @@
 
 ---
 
+<a id="middleware-acceso"></a>
 ## 8) Middleware de acceso
 
-**Qué capturar:**
-- Archivo `middleware.ts`
-- Lectura de cookie `dolibarr_auth_token`
-- Redirección a `/login`
-
 **Por qué es importante:**
 - Protege rutas privadas cuando no hay token.
 - Bloquea acceso directo a la app sin autenticación.
 
-**Middleware:**
+**Middleware:**<br>
 ![Middleware](capturas/middleware.png)
+<br>
 
 **Explicación:**
 - Si no hay token, redirige a login.
@@ -159,14 +206,16 @@
 
 ---
 
+<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:**
+**Seed script:**<br>
 ![Seed Script](capturas/seed.png)
+<br>
 
 **Explicación:**
 - El seed elimina proyectos previos.
@@ -176,10 +225,12 @@
 
 ---
 
+<a id="conexion-piezas-flujo"></a>
 ## 10) Conexión entre piezas (flujo resumido)
 
-**Diagrama visual**
+**Diagrama visual**<br>
 ![Diagrama de Flujo Principal](capturas/diagrama.svg)
+<br>
 
 **Explicación:**
 - La UI nunca toca la API directamente.