# Apuntes de presentacion — Frontend + UX (Marcos)

Notas extendidas para exponer la parte de interfaz y experiencia de usuario. Incluye el guion, el por que de cada decision y el funcionamiento interno. Esta pensado para explicar mas de lo que aparece en las slides.

---

## 1) Vista de mando (KPIs + grid)

**Que mostrar:**
- Captura real del dashboard principal (KPIs arriba + grid debajo)

**Por que es importante:**
- Es la entrada principal del usuario y resume el estado global.
- Permite pasar de vision general a detalle en un clic.

**Como funciona y que muestra:**
- Los KPIs agregan informacion clave: proyectos activos, presupuesto y progreso medio.
- Debajo se renderiza el grid con tarjetas, cada una representando un proyecto.
- La jerarquia visual dirige la mirada primero a los KPIs y luego a la exploracion.

**Guion corto:**
- “La vista de mando prioriza lectura rapida: KPIs arriba y tarjetas abajo.”
- “Con un vistazo se entiende el estado general y se puede bajar al detalle.”

---

## 2) KPI protagonista

**Que mostrar:**
- Captura del KPI grande (ej. 94.2%)

**Por que es importante:**
- Jerarquia visual clara para decisiones rapidas.
- La comparacion contextual evita interpretar mal el dato.

**Como funciona y que muestra:**
- Numero principal con tipografia grande.
- Texto de apoyo con comparativa y periodo temporal.
- Se usa contraste para que el dato sea lo primero que se lea.

**Guion corto:**
- “Numero grande, etiqueta corta y contexto de mejora.”
- “El usuario detecta la tendencia sin leer mucho texto.”

---

## 3) Grid vs List

**Que mostrar:**
- Dos capturas reales: grid y list

**Por que es importante:**
- Grid para exploracion visual; list para operacion rapida.
- El usuario elige la forma de trabajo que necesita.

**Como funciona y que muestra:**
- El toggle cambia la representacion sin cambiar la fuente de datos.
- El grid prioriza tarjetas y resumen; la lista prioriza columnas y densidad.
- Se mantiene el mismo estado de filtros y busqueda al cambiar la vista.

**Guion corto:**
- “Cambio de vista inmediato sin perder contexto.”
- “Es el mismo contenido, con distinta densidad de informacion.”

---

## 4) Project Card (unidad visual)

**Que mostrar:**
- Captura real de una tarjeta

**Por que es importante:**
- Resume estado, progreso y presupuesto en un bloque.
- Es el componente base de la UI.

**Como funciona y que muestra:**
- Incluye estado con badge, progreso con barra y cifras clave.
- Usa color para semaforizacion y lectura inmediata.
- Es reutilizable en grid y otras vistas.

**Guion corto:**
- “La tarjeta condensa lo esencial sin saturar.”
- “Badges y color facilitan lectura rapida.”

---

## 5) Toolbar (busqueda, filtros, exportacion)

**Que mostrar:**
- Captura real de la toolbar en proyectos

**Por que es importante:**
- Centraliza acciones clave y acelera la navegacion.
- Reduce pasos para filtrar y exportar.

**Como funciona y que muestra:**
- Busqueda por texto con actualizacion instantanea.
- Filtros por estado y otros atributos.
- Accion de exportacion para reporting rapido.

**Guion corto:**
- “Todo lo operativo esta en una sola barra.”
- “UX clara: buscar, filtrar, exportar.”

---

## 6) Filtrado ultra-rapido

**Que mostrar:**
- Captura del input de busqueda + snippet corto con `useMemo`

**Por que es importante:**
- Respuesta instantanea sin recargar.
- Reduce friccion y mejora la percepcion de velocidad.

**Como funciona y que muestra:**
- Se memoiza la lista filtrada para evitar recalculos innecesarios.
- El filtro trabaja sobre el dataset cargado en memoria.
- La UI responde a cada pulsacion sin bloquear.

**Guion corto:**
- “El filtrado se calcula en memoria y se actualiza al vuelo.”
- “La UI responde en tiempo real incluso con listas grandes.”

---

## 7) Vista de detalle 360 grados

**Que mostrar:**
- Captura real del detalle con tabs

**Por que es importante:**
- Todo el proyecto en una sola pantalla, pero segmentado.
- Evita saltos entre paginas.

**Como funciona y que muestra:**
- Cabecera con informacion clave y acciones.
- Bloque de estadisticas y progreso.
- Tabs para tareas, Gantt y datos relacionados.

**Guion corto:**
- “Tabs para dividir informacion sin perder contexto.”
- “Reduce la carga cognitiva del usuario.”

---

## 8) Acciones criticas

**Que mostrar:**
- Captura del header del detalle con botones de accion

**Por que es importante:**
- Las acciones clave siempre visibles.
- Menos pasos para editar, exportar o cerrar.

**Como funciona y que muestra:**
- Botones de accion primaria con contraste y jerarquia.
- Acciones secundarias en menu contextual si existen.
- Se mantiene consistencia con el resto de headers.

**Guion corto:**
- “Acciones primarias en cabecera para operativa rapida.”
- “Mejora la eficiencia del flujo.”

---

## 9) Segmentacion de informacion

**Que mostrar:**
- Captura de tabs/resumen en detalle

**Por que es importante:**
- Cada seccion tiene su proposito.
- Mantiene coherencia y legibilidad.

**Como funciona y que muestra:**
- La informacion se distribuye por contextos (resumen, tareas, timeline).
- Se evita scroll excesivo y se mejora la orientacion.
- Los tabs conservan estado visual y posicion.

**Guion corto:**
- “La informacion se agrupa por contexto, no por pantalla.”
- “Facilita la navegacion mental.”

---

## 10) Data mapping (Dolibarr -> UI)

**Que mostrar:**
- Captura del mapper en `types/project.ts`

**Por que es importante:**
- Dolibarr devuelve datos crudos; la UI necesita formato amigable.
- Se estandarizan fechas, estados y etiquetas.

**Como funciona y que muestra:**
- Se transforma `status` en etiquetas legibles y colores.
- Fechas pasan de timestamp a formato local.
- Presupuesto y progreso se normalizan para la UI.

**Guion corto:**
- “El mapper convierte datos de API en modelos de UI consistentes.”
- “Esto evita errores y mejora la claridad para el usuario.”

---

## 11) Tolerancia a fallos

**Que mostrar:**
- Captura del banner de error con boton Reintentar

**Por que es importante:**
- El sistema comunica fallos sin bloquear al usuario.
- Permite recuperar la operacion rapidamente.

**Como funciona y que muestra:**
- Mensaje de error claro y accion inmediata.
- Estado de fallo visible sin romper la UI.
- Reintento vuelve a lanzar la peticion.

**Guion corto:**
- “Mensaje claro + accion inmediata.”
- “Se mantiene la confianza en la interfaz.”

---

## 12) Estados de carga (skeletons)

**Que mostrar:**
- Captura real de skeletons en dashboard

**Por que es importante:**
- Evita pantallas vacias durante la carga.
- Mantiene jerarquia visual.

**Como funciona y que muestra:**
- Se renderizan placeholders con la misma estructura que el contenido real.
- El usuario entiende que hay informacion en camino.
- La percepcion de rendimiento mejora aunque la red sea lenta.

**Guion corto:**
- “El usuario sabe que la informacion llegara.”
- “Mejora la percepcion de rendimiento.”

---

## 13) Producto final (desktop / tablet / detalle)

**Que mostrar:**
- Tres capturas reales: dashboard desktop, vista movil, detalle

**Por que es importante:**
- Demuestra consistencia visual en distintos contextos.
- Refuerza que el producto esta terminado.

**Como funciona y que muestra:**
- Layout responsive con breakpoints.
- Sidebar y tablas se adaptan a pantalla.
- Mismo lenguaje visual en todas las resoluciones.

**Guion corto:**
- “UI coherente en escritorio, movil y detalle.”
- “Experiencia continua sin cambios de lenguaje visual.”

---

## 14) Conclusiones (Frontend + UX)

**Que mostrar:**
- Slide de conclusiones sin capturas

**Por que es importante:**
- Cierre claro con tres ideas fuertes.

**Como funciona y que muestra:**
- Escalabilidad: componentes reutilizables y layout consistente.
- UX: busqueda y filtrado minimizan tiempo de acceso.
- Frontend: stack moderno y cohesion visual.

**Guion corto:**
- “Escalabilidad: arquitectura modular para crecer.”
- “UX: acceso rapido a informacion clave.”
- “Frontend: stack moderno y UI consistente.”

---

## 15) Arquitectura de UI (resumen tecnico)

**Que mostrar:**
- Esquema simple: datos -> mapeo -> componentes -> vistas

**Por que es importante:**
- Explica el flujo completo de datos hacia la interfaz.
- Justifica por que la UI es estable y mantenible.

**Como funciona y que muestra:**
- Los servicios obtienen datos desde Dolibarr.
- El mapper convierte datos crudos a formato UI.
- Componentes reutilizables construyen las vistas.

**Guion corto:**
- “La UI consume datos normalizados y los presenta en componentes.”
- “Esto hace la interfaz escalable y consistente.”

---

## 16) Sistema de diseno (tokens y componentes)

**Que mostrar:**
- Captura de variables/tokens en `app/globals.css`

**Por que es importante:**
- Garantiza coherencia visual.
- Facilita cambios globales de estilo.

**Como funciona y que muestra:**
- Variables CSS para color, tipografia y espaciado.
- Componentes de UI consistentes con Tailwind + shadcn/ui.
- Estilos utilitarios sin CSS ad-hoc.

**Guion corto:**
- “Tokens = coherencia y escalabilidad visual.”
- “Componentes reutilizables evitan duplicar estilos.”

---

## 17) Accesibilidad y usabilidad

**Que mostrar:**
- Captura con componentes nativos (botones, inputs) y estados focus

**Por que es importante:**
- Mejora la experiencia para todos los usuarios.
- Cumple buenas practicas de accesibilidad.

**Como funciona y que muestra:**
- Uso de elementos semanticos y aria cuando aplica.
- Contraste suficiente en badges y botones.
- Navegacion por teclado en menus y formularios.

**Guion corto:**
- “La UI es usable con teclado y mantiene buen contraste.”
- “Se prioriza accesibilidad desde la base.”

---

## 18) Rendimiento percibido

**Que mostrar:**
- Captura de skeletons y un ejemplo de renderizado rapido

**Por que es importante:**
- La velocidad percibida es clave en productos de gestion.
- Mejora la sensacion de fluidez.

**Como funciona y que muestra:**
- Carga progresiva con placeholders.
- Evita flashes de contenido sin estilo.
- Componentes optimizados para renderizar rapido.

**Guion corto:**
- “La carga se siente inmediata aunque haya espera real.”
- “Eso mantiene al usuario en flujo de trabajo.”

---