codigo0/PLAN_CONVERSION_APP_COMPLETA.md

PLAN DE CONVERSIÓN: APP MANUAL TES DIGITAL COMPLETA

Fecha: 2025-12-17
Estado Actual: App básica con datos estáticos
Objetivo: Guía TES completa con 93 capítulos integrados

---

📊 ESTADO ACTUAL DE LA APP

✅ Lo que YA tiene:

• Framework: React + Vite + TypeScript
• UI Components: shadcn/ui (componentes completos)
• Navegación básica: React Router con rutas simples
• Búsqueda básica: SearchModal que busca en datos estáticos (procedures.ts, drugs.ts)
• Menú lateral: MenuSheet con opciones básicas
• Navegación inferior: BottomNav con acceso rápido
• Páginas funcionales: Index, SoporteVital, Farmacos, Herramientas, Material, Telefono, Comunicacion
• Datos estáticos: Archivos TypeScript con procedimientos, fármacos, calculadoras

❌ Lo que NO tiene (y necesita):

• Integración con archivos .md: No carga ni renderiza los 93 capítulos del manual
• Navegación jerárquica: No hay menú lateral organizado por partes/bloques
• Sistema de favoritos: Opción en menú pero sin funcionalidad
• Progreso de lectura: No hay tracking de capítulos leídos
• Búsqueda en contenido: Solo busca en datos estáticos, no en .md
• Acceso a protocolos críticos: Botones básicos pero no integrados con manual completo
• Funcionalidad offline: PWA mencionada pero no implementada completamente
• Sistema de usuarios: No hay login ni perfiles

---

✅ VERIFICACIÓN: ARCHIVOS .MD DEL ÍNDICE

Resultado: ✅ TODOS LOS ARCHIVOS EXISTEN

• Total según índice: 93 capítulos
• Archivos .md encontrados: 93 archivos
• Archivos faltantes: 0
• Completitud: 100%

Ubicación: manual-tes/TES_Manual_Digital/BLOQUE_X_*/

Todos los capítulos del índice tienen su archivo .md correspondiente y están correctamente organizados en 15 bloques.

---

🔍 IDENTIFICACIÓN DE HUECOS EN EL CONTENIDO

Análisis de Completitud por Bloque:

Bloque	Capítulos Esperados	Archivos Encontrados	Estado
Bloque 0	1	1	✅ Completo
Bloque 1	4	4	✅ Completo
Bloque 2	14	14	✅ Completo
Bloque 3	28	28	✅ Completo
Bloque 4	11	11	✅ Completo
Bloque 5	10	10	✅ Completo
Bloque 6	8	8	✅ Completo
Bloque 7	6	6	✅ Completo
Bloque 8	5	5	✅ Completo
Bloque 9	1	1	✅ Completo
Bloque 10	1	1	✅ Completo
Bloque 11	1	1	✅ Completo
Bloque 12	1	1	✅ Completo
Bloque 13	1	1	✅ Completo
Bloque 14	1	1	✅ Completo
TOTAL	93	93	✅ 100%

Huecos Identificados:

1. Contenido Visual (Prioridad Media)

• ❌ No hay imágenes/diagramas: Los archivos .md no contienen referencias a imágenes
• 💡 Recomendación: Considerar agregar diagramas de flujo, ilustraciones anatómicas, tablas visuales

2. Contenido Interactivo (Prioridad Alta)

• ❌ No hay tests/autoevaluaciones: No hay sistema de preguntas por capítulo
• 💡 Recomendación: Crear tests por bloque para autoevaluación

3. Contenido de Referencia Rápida (Prioridad Alta)

• ⚠️ Algunos capítulos son muy extensos: Pueden necesitar resúmenes ejecutivos
• 💡 Recomendación: Extraer "puntos clave" y "checklists rápidos" de cada capítulo

4. Integración con App Actual (Prioridad Crítica)

• ❌ Los datos estáticos (procedures.ts, drugs.ts) no están sincronizados con los .md
• 💡 Recomendación: Migrar datos estáticos a .md o generar TypeScript desde .md

---

📐 ESTRUCTURA DE DATOS RECOMENDADA PARA LA APP

1. Archivo de Índice Principal (src/data/manual-index.ts)

export interface Capitulo {
  id: string; // "1.1.1", "2.1.3", etc.
  titulo: string;
  subtitulo?: string;
  parte: number;
  parteNombre: string;
  bloque: number;
  bloqueNombre: string;
  rutaArchivo: string; // Ruta relativa al archivo .md
  rutaUrl: string; // "/manual/parte-i/bloque-0/1.1.1"
  nivelDificultad: 'basico' | 'intermedio' | 'avanzado';
  importancia: 'alta' | 'media' | 'baja';
  palabrasClave: string[];
  tipoContenido: 'formativo' | 'operativo' | 'referencia';
  tiempoLectura: number; // minutos estimados
  navegacion: {
    anterior: string | null; // ID del capítulo anterior
    siguiente: string | null; // ID del capítulo siguiente
    relacionados: string[]; // IDs de capítulos relacionados
  };
  metadata: {
    version: string;
    fechaActualizacion: string;
    autor: string;
  };
}

export interface Bloque {
  id: number;
  nombre: string;
  descripcion: string;
  capitulos: Capitulo[];
  icono?: string;
}

export interface Parte {
  id: number;
  nombre: string;
  descripcion: string;
  bloques: Bloque[];
  icono?: string;
}

export const manualIndex: Parte[] = [
  {
    id: 1,
    nombre: "Fundamentos y Evaluación Inicial",
    descripcion: "Conceptos básicos y procedimientos de evaluación",
    bloques: [
      {
        id: 0,
        nombre: "Fundamentos de Emergencias Prehospitalarias",
        descripcion: "Marco conceptual y operativo",
        capitulos: [
          {
            id: "1.1.1",
            titulo: "Fundamentos de Emergencias",
            parte: 1,
            parteNombre: "Fundamentos y Evaluación Inicial",
            bloque: 0,
            bloqueNombre: "Fundamentos de Emergencias Prehospitalarias",
            rutaArchivo: "manual-tes/TES_Manual_Digital/BLOQUE_0_FUNDAMENTOS/BLOQUE_00_0_FUNDAMENTOS_EMERGENCIAS.md",
            rutaUrl: "/manual/parte-i/bloque-0/1.1.1",
            nivelDificultad: "basico",
            importancia: "alta",
            palabrasClave: ["emergencias", "soporte vital", "cadena supervivencia"],
            tipoContenido: "formativo",
            tiempoLectura: 15,
            navegacion: {
              anterior: null,
              siguiente: "1.2.1",
              relacionados: ["1.2.1", "2.1.1"]
            },
            metadata: {
              version: "1.0",
              fechaActualizacion: "2024-12-13",
              autor: "Manual TES Digital"
            }
          }
          // ... resto de capítulos
        ]
      }
      // ... resto de bloques
    ]
  }
  // ... resto de partes
];

2. Sistema de Favoritos (src/data/favorites.ts)

export interface Favorito {
  capituloId: string;
  fechaAgregado: string;
  etiquetas?: string[];
}

export interface ProgresoLectura {
  capituloId: string;
  ultimaLectura: string;
  progreso: number; // 0-100
  tiempoLectura: number; // minutos totales
  completado: boolean;
}

// Almacenamiento en localStorage
export const favoritesStorage = {
  get: (): Favorito[] => {
    const data = localStorage.getItem('manual-favorites');
    return data ? JSON.parse(data) : [];
  },
  add: (capituloId: string) => {
    const favorites = favoritesStorage.get();
    if (!favorites.find(f => f.capituloId === capituloId)) {
      favorites.push({ capituloId, fechaAgregado: new Date().toISOString() });
      localStorage.setItem('manual-favorites', JSON.stringify(favorites));
    }
  },
  remove: (capituloId: string) => {
    const favorites = favoritesStorage.get().filter(f => f.capituloId !== capituloId);
    localStorage.setItem('manual-favorites', JSON.stringify(favorites));
  },
  has: (capituloId: string): boolean => {
    return favoritesStorage.get().some(f => f.capituloId === capituloId);
  }
};

export const progressStorage = {
  get: (): ProgresoLectura[] => {
    const data = localStorage.getItem('manual-progress');
    return data ? JSON.parse(data) : [];
  },
  update: (capituloId: string, progreso: Partial<ProgresoLectura>) => {
    const progress = progressStorage.get();
    const index = progress.findIndex(p => p.capituloId === capituloId);
    if (index >= 0) {
      progress[index] = { ...progress[index], ...progreso };
    } else {
      progress.push({
        capituloId,
        ultimaLectura: new Date().toISOString(),
        progreso: 0,
        tiempoLectura: 0,
        completado: false,
        ...progreso
      });
    }
    localStorage.setItem('manual-progress', JSON.stringify(progress));
  },
  getCapitulo: (capituloId: string): ProgresoLectura | null => {
    return progressStorage.get().find(p => p.capituloId === capituloId) || null;
  }
};

3. Sistema de Búsqueda (src/data/search-index.ts)

export interface SearchResult {
  capituloId: string;
  titulo: string;
  snippet: string; // Fragmento de texto relevante
  tipo: 'titulo' | 'contenido' | 'palabra_clave';
  relevancia: number; // Score de relevancia
  rutaUrl: string;
}

// Índice de búsqueda pre-generado desde los .md
export const searchIndex: Map<string, SearchResult[]> = new Map();

// Función para buscar en contenido
export function buscarEnManual(query: string): SearchResult[] {
  const resultados: SearchResult[] = [];
  const queryLower = query.toLowerCase();
  
  // Buscar en títulos
  manualIndex.forEach(parte => {
    parte.bloques.forEach(bloque => {
      bloque.capitulos.forEach(capitulo => {
        if (capitulo.titulo.toLowerCase().includes(queryLower)) {
          resultados.push({
            capituloId: capitulo.id,
            titulo: capitulo.titulo,
            snippet: capitulo.titulo,
            tipo: 'titulo',
            relevancia: 10,
            rutaUrl: capitulo.rutaUrl
          });
        }
        
        // Buscar en palabras clave
        if (capitulo.palabrasClave.some(kw => kw.toLowerCase().includes(queryLower))) {
          resultados.push({
            capituloId: capitulo.id,
            titulo: capitulo.titulo,
            snippet: `Palabra clave: ${query}`,
            tipo: 'palabra_clave',
            relevancia: 8,
            rutaUrl: capitulo.rutaUrl
          });
        }
      });
    });
  });
  
  // TODO: Buscar en contenido de archivos .md (requiere carga de contenido)
  
  return resultados.sort((a, b) => b.relevancia - a.relevancia);
}

4. Protocolos Críticos (src/data/protocolos-criticos.ts)

export interface ProtocoloCritico {
  id: string;
  titulo: string;
  capituloId: string; // ID del capítulo relacionado
  prioridad: 'critica' | 'alta' | 'media';
  icono: string;
  color: string;
  accesoRapido: boolean; // Mostrar en home
  tiempoEstimado: number; // segundos para ejecutar
}

export const protocolosCriticos: ProtocoloCritico[] = [
  {
    id: 'rcp-adulto',
    titulo: 'RCP Adulto',
    capituloId: '2.1.3',
    prioridad: 'critica',
    icono: 'Heart',
    color: 'red',
    accesoRapido: true,
    tiempoEstimado: 30
  },
  {
    id: 'ovace-adulto',
    titulo: 'OVACE Adulto',
    capituloId: '2.1.8',
    prioridad: 'critica',
    icono: 'Wind',
    color: 'red',
    accesoRapido: true,
    tiempoEstimado: 20
  },
  {
    id: 'abcde',
    titulo: 'ABCDE Operativo',
    capituloId: '1.2.2',
    prioridad: 'alta',
    icono: 'Activity',
    color: 'orange',
    accesoRapido: true,
    tiempoEstimado: 60
  },
  // ... más protocolos
];

---

🧭 SISTEMA DE NAVEGACIÓN RECOMENDADO

1. Menú Lateral Jerárquico (src/components/layout/ManualSidebar.tsx)

Características:

• Expandible/colapsable por niveles (Parte → Bloque → Capítulo)
• Indicador visual del capítulo actual
• Búsqueda integrada
• Filtros por parte/bloque
• Indicadores de progreso (capítulos leídos)
• Marcadores de favoritos

Estructura:

📚 Manual TES Digital
├── 📖 Parte I: Fundamentos
│   ├── 🔹 Bloque 0: Fundamentos
│   │   └── ✅ 1.1.1 Fundamentos de Emergencias
│   └── 🔹 Bloque 1: Procedimientos Básicos
│       ├── ✅ 1.2.1 Constantes Vitales
│       ├── ⏳ 1.2.2 ABCDE Operativo (en progreso)
│       ├── ⭕ 1.2.3 Glasgow Operativo
│       └── ⭕ 1.2.4 Triage START
├── 💉 Parte II: Soporte Vital
│   └── ...
└── 🔍 Buscar...

2. Breadcrumbs (src/components/layout/Breadcrumbs.tsx)

Inicio > Parte I > Bloque 1 > 1.2.1 Constantes Vitales

Funcionalidad:

• Click en cualquier nivel para navegar
• Contexto visual de ubicación
• Navegación rápida a niveles superiores

3. Navegación Anterior/Siguiente

<nav className="flex justify-between py-4 border-t">
  <Link to={capituloAnterior?.rutaUrl}>
    ← {capituloAnterior?.titulo}
  </Link>
  <Link to={capituloSiguiente?.rutaUrl}>
    {capituloSiguiente?.titulo} →
  </Link>
</nav>

4. Índice Rápido (Modal/Sidebar)

• Modal o sidebar deslizable
• Búsqueda instantánea
• Filtros por parte/bloque/tipo
• Acceso desde cualquier página (tecla I)

---

📱 FUNCIONALIDADES ADICIONALES RECOMENDADAS

1. Sistema de Favoritos

• ✅ Marcar capítulos como favoritos
• ✅ Carpeta de favoritos en menú
• ✅ Acceso rápido desde home
• ✅ Sincronización con localStorage

2. Progreso de Lectura

• ✅ Tracking de capítulos leídos
• ✅ Porcentaje de completitud por parte/bloque
• ✅ Historial de lectura
• ✅ Continuar leyendo desde donde se quedó

3. Búsqueda Avanzada

• ✅ Búsqueda por texto completo en contenido .md
• ✅ Filtros por parte, bloque, tipo de contenido
• ✅ Búsqueda por palabras clave
• ✅ Historial de búsquedas
• ✅ Sugerencias mientras escribes

4. Acceso Rápido a Protocolos Críticos

• ✅ Botones grandes en home para emergencias críticas
• ✅ Acceso directo desde cualquier página (botón flotante)
• ✅ Modo "emergencia" que muestra solo protocolos críticos
• ✅ Atajos de teclado (ej: E para emergencias)

5. Modo Offline (PWA)

• ✅ Service Worker para cache agresivo
• ✅ Instalación como app móvil
• ✅ Funcionamiento sin conexión
• ✅ Sincronización cuando hay conexión

6. Personalización

• ✅ Modo oscuro/claro
• ✅ Tamaño de fuente ajustable
• ✅ Notas/annotaciones por capítulo
• ✅ Marcadores personalizados

---

🎯 PLAN DE IMPLEMENTACIÓN POR FASES

FASE 1: Integración Básica (Prioridad Crítica)

Objetivo: Conectar los 93 archivos .md con la app

1. Crear sistema de carga de .md

   • Instalar react-markdown o marked
   • Crear componente MarkdownViewer
   • Cargar archivos .md desde public/ o importarlos

2. Generar índice desde estructura

   • Script para generar manual-index.ts desde estructura de carpetas
   • Mapear todos los 93 capítulos
   • Incluir metadatos básicos

3. Crear rutas dinámicas

   • Ruta /manual/:parte/:bloque/:capitulo
   • Componente ManualViewer que carga y renderiza .md
   • Navegación básica anterior/siguiente

Tiempo estimado: 2-3 días

FASE 2: Navegación Jerárquica (Prioridad Alta)

Objetivo: Menú lateral completo y navegación intuitiva

1. Crear ManualSidebar

   • Componente jerárquico expandible
   • Integrar con manual-index.ts
   • Indicadores de progreso y favoritos

2. Implementar Breadcrumbs

   • Componente de migas de pan
   • Navegación por niveles

3. Mejorar SearchModal

   • Integrar búsqueda en manual-index.ts
   • Buscar en títulos y palabras clave
   • Resultados con contexto

Tiempo estimado: 3-4 días

FASE 3: Funcionalidades Avanzadas (Prioridad Media)

Objetivo: Favoritos, progreso, búsqueda completa

1. Sistema de Favoritos

   • localStorage para persistencia
   • UI para marcar/desmarcar
   • Página de favoritos

2. Tracking de Progreso

   • localStorage para progreso
   • Indicadores visuales
   • Estadísticas de lectura

3. Búsqueda en Contenido

   • Indexar contenido de .md
   • Búsqueda full-text
   • Resultados con snippets

Tiempo estimado: 4-5 días

FASE 4: Optimización y PWA (Prioridad Media)

Objetivo: Modo offline y optimización

1. Service Worker

   • Cache de archivos .md
   • Cache de assets
   • Estrategia offline-first

2. Optimización de Carga

   • Lazy loading de capítulos
   • Code splitting
   • Preload de capítulos críticos

Tiempo estimado: 2-3 días

---

📋 CHECKLIST DE IMPLEMENTACIÓN

Integración con .md

• Instalar librería de Markdown (react-markdown o marked)
• Crear componente MarkdownViewer
• Configurar carga de archivos .md
• Generar manual-index.ts desde estructura
• Crear rutas dinámicas /manual/:parte/:bloque/:capitulo
• Implementar navegación anterior/siguiente

Navegación

• Crear ManualSidebar jerárquico
• Implementar Breadcrumbs
• Mejorar SearchModal con búsqueda en índice
• Crear página de índice rápido

Funcionalidades

• Sistema de favoritos (localStorage)
• Tracking de progreso (localStorage)
• Búsqueda en contenido de .md
• Acceso rápido a protocolos críticos

PWA y Optimización

• Configurar Service Worker
• Cache de archivos .md
• Lazy loading de capítulos
• Optimización de bundle

---

🎨 RECOMENDACIONES DE UX/UI

Diseño Móvil-First

• Navegación optimizada para una mano
• Botones grandes y accesibles
• Swipe gestures para navegación
• Modo landscape para tablets

Accesibilidad

• Contraste adecuado
• Tamaños de fuente legibles
• Navegación por teclado
• Screen reader friendly

Performance

• Carga inicial < 2 segundos
• Transiciones suaves
• Sin lag al navegar
• Cache inteligente

---

📊 MEDIOS FALTANTES CON PRIORIDAD

Resultado del Análisis: ✅ NO HAY MEDIOS FALTANTES

No se encontraron referencias a imágenes, videos o documentos en los archivos .md.

Recomendaciones Futuras (si se agregan medios):

Prioridad Alta (si se agregan):

1. Diagramas de flujo de protocolos (RCP, ABCDE, etc.)

   • Formato: SVG o PNG de alta calidad
   • Ubicación: public/assets/imagenes/diagramas/
   • Referencia en .md: ![Diagrama RCP](../assets/imagenes/diagramas/rcp-flujo.svg)

2. Ilustraciones anatómicas (para Bloque 2)

   • Formato: SVG o PNG
   • Ubicación: public/assets/imagenes/anatomia/
   • Referencia: ![Anatomía Columna](../assets/imagenes/anatomia/columna-vertebral.svg)

Prioridad Media:

3. Tablas visuales de fármacos

   • Formato: PNG o SVG
   • Ubicación: public/assets/imagenes/tablas/

4. Videos de técnicas (opcional, futuro)

   • Formato: MP4 (optimizado para web)
   • Ubicación: public/assets/videos/

---

🚀 PRÓXIMOS PASOS INMEDIATOS

1. Instalar dependencias necesarias:

   npm install react-markdown remark-gfm rehype-highlight
   

2. Crear estructura de datos:

   • Generar manual-index.ts desde estructura de carpetas
   • Crear tipos TypeScript para capítulos/bloques/partes

3. Crear componente MarkdownViewer:

   • Componente que carga y renderiza .md
   • Estilos para Markdown
   • Navegación integrada

4. Implementar rutas dinámicas:

   • /manual/parte-i/bloque-0/1.1.1
   • Cargar archivo correspondiente
   • Renderizar con MarkdownViewer

5. Crear ManualSidebar:

   • Navegación jerárquica
   • Integración con manual-index

---

Este plan proporciona una hoja de ruta completa para convertir la app actual en una guía TES completa con todos los 93 capítulos integrados.