From 22614a9a66ae1a188afe393e540e59cc125d0001 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 25 Nov 2025 02:02:22 -0600
Subject: [PATCH] feat: Agregar modal de ayuda en el header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Agrega un botón de información en la barra superior que abre un modal con documentación sobre:
- Descripción general de PrinterCentral
- Tipos de comandos disponibles (Texto, Feed, Cortar, Pulse, QR, Barcode)
- Cómo usar templates y la sintaxis de variables
- Configuración de impresoras
- Funcionamiento de la cola de impresión
---
 app/components/layout/AppHeader.vue | 118 ++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)

diff --git a/app/components/layout/AppHeader.vue b/app/components/layout/AppHeader.vue
index b8da0c9..44793e5 100644
--- a/app/components/layout/AppHeader.vue
+++ b/app/components/layout/AppHeader.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
 const queue = usePrintQueue()
+const showHelp = ref(false)
+
+// Ejemplos de sintaxis de variables (para mostrar en la ayuda)
+const varExamples = {
+  simple: '{{nombre}}',
+  withLabel: '{{nombre:Etiqueta}}',
+  withDefault: '{{nombre:Etiqueta:valor}}',
+  example: '{{cliente:Nombre del cliente}}'
+}
 </script>
 
 <template>
@@ -24,8 +33,117 @@ const queue = usePrintQueue()
         {{ queue.operations.value.length }} en cola
       </UBadge>
 
+      <!-- Botón de ayuda -->
+      <UButton
+        icon="i-heroicons-information-circle"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        title="Ayuda"
+        @click="showHelp = true"
+      />
+
       <!-- Toggle Dark/Light mode -->
       <UColorModeButton />
     </div>
   </header>
+
+  <!-- Modal de ayuda -->
+  <UModal v-model:open="showHelp" title="Ayuda - PrinterCentral" description="Guía de uso de la aplicación" :ui="{ width: 'max-w-2xl' }">
+    <template #body>
+      <div class="space-y-6 text-sm">
+        <!-- Introducción -->
+        <section>
+          <h3 class="font-semibold text-gray-900 dark:text-white mb-2">
+            Acerca de PrinterCentral
+          </h3>
+          <p class="text-gray-600 dark:text-gray-400">
+            PrinterCentral es una aplicación para controlar impresoras térmicas Epson compatibles con ePOS.
+            Permite crear comandos de impresión, guardarlos como templates reutilizables y enviarlos a múltiples impresoras.
+          </p>
+        </section>
+
+        <!-- Constructor de comandos -->
+        <section>
+          <h3 class="font-semibold text-gray-900 dark:text-white mb-2">
+            Constructor de Comandos
+          </h3>
+          <p class="text-gray-600 dark:text-gray-400 mb-2">
+            Crea comandos de impresión usando los diferentes tipos disponibles:
+          </p>
+          <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
+            <li><strong>Texto:</strong> Imprime texto con opciones de alineación, tamaño y estilo</li>
+            <li><strong>Feed:</strong> Avanza el papel N líneas</li>
+            <li><strong>Cortar:</strong> Corta el papel (completo o parcial)</li>
+            <li><strong>Pulse:</strong> Activa el cajón de dinero</li>
+            <li><strong>QR:</strong> Genera códigos QR</li>
+            <li><strong>Barcode:</strong> Genera códigos de barras (EAN13, CODE128, etc.)</li>
+          </ul>
+        </section>
+
+        <!-- Templates -->
+        <section>
+          <h3 class="font-semibold text-gray-900 dark:text-white mb-2">
+            Templates
+          </h3>
+          <p class="text-gray-600 dark:text-gray-400 mb-2">
+            Los templates permiten guardar secuencias de comandos para reutilizarlos.
+            Guarda un template desde la cola de impresión usando el botón "Guardar template".
+          </p>
+          <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 mt-2">
+            <h4 class="font-medium text-gray-900 dark:text-white mb-1">Variables en Templates</h4>
+            <p class="text-gray-600 dark:text-gray-400 mb-2">
+              Puedes usar variables en el texto para crear templates dinámicos:
+            </p>
+            <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1 text-xs">
+              <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{{ varExamples.simple }}</code> - Variable simple</li>
+              <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{{ varExamples.withLabel }}</code> - Con etiqueta descriptiva</li>
+              <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{{ varExamples.withDefault }}</code> - Con etiqueta y valor por defecto</li>
+            </ul>
+            <p class="text-gray-500 dark:text-gray-500 mt-2 text-xs">
+              Ejemplo: <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">Cliente: {{ varExamples.example }}</code>
+            </p>
+          </div>
+        </section>
+
+        <!-- Impresoras -->
+        <section>
+          <h3 class="font-semibold text-gray-900 dark:text-white mb-2">
+            Configuración de Impresoras
+          </h3>
+          <p class="text-gray-600 dark:text-gray-400 mb-2">
+            Configura las impresoras desde el panel lateral (desktop) o desde la pestaña "Impresoras" (mobile).
+          </p>
+          <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
+            <li><strong>Nombre:</strong> Identificador para la impresora</li>
+            <li><strong>IP:</strong> Dirección IP de la impresora en la red</li>
+            <li><strong>Puerto:</strong> Puerto del servicio ePOS (default: 8008)</li>
+            <li><strong>Device ID:</strong> Identificador del dispositivo (default: local_printer)</li>
+          </ul>
+          <p class="text-gray-500 dark:text-gray-500 mt-2 text-xs">
+            La impresora marcada como "default" se selecciona automáticamente al iniciar.
+          </p>
+        </section>
+
+        <!-- Cola de impresión -->
+        <section>
+          <h3 class="font-semibold text-gray-900 dark:text-white mb-2">
+            Cola de Impresión
+          </h3>
+          <p class="text-gray-600 dark:text-gray-400">
+            Los comandos se agregan a la cola antes de imprimir. Puedes reordenar, editar o eliminar comandos
+            individuales. Cuando la cola esté lista, selecciona la impresora y presiona "Imprimir".
+          </p>
+        </section>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end">
+        <UButton color="primary" @click="showHelp = false">
+          Entendido
+        </UButton>
+      </div>
+    </template>
+  </UModal>
 </template>