From 955584275b0444b5a271ee9fda37287f9235bba3 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 24 Nov 2025 18:27:29 -0600
Subject: [PATCH] =?UTF-8?q?fix:=20Corregir=20configuraci=C3=B3n=20de=20est?=
 =?UTF-8?q?ilos=20y=20componentes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregar imports de Tailwind CSS v4 y Nuxt UI en main.css
- Renombrar QueueActions.vue -> Actions.vue y QueueItem.vue -> Item.vue para evitar conflictos de nombres de componentes
- Crear composable useMediaQuery para manejo de responsive
- Corregir referencias a componentes en index.vue y PrintQueue.vue
- Actualizar imports de servidor a rutas relativas
- Instalar @iconify-json/heroicons y @iconify-json/lucide
- Actualizar Jimp a sintaxis v1.x
---
 app/assets/css/main.css                       | 16 ++++++++--
 .../queue/{QueueActions.vue => Actions.vue}   |  0
 .../queue/{QueueItem.vue => Item.vue}         |  0
 app/components/queue/PrintQueue.vue           |  2 +-
 app/composables/useMediaQuery.ts              | 20 +++++++++++++
 app/pages/index.vue                           |  4 +--
 package-lock.json                             | 24 +++++++++++++++
 package.json                                  |  4 +++
 server/api/print/cut.post.ts                  |  4 +--
 server/api/print/image.post.ts                | 30 +++++++++----------
 server/api/print/index.post.ts                |  4 +--
 server/api/print/pulse.post.ts                |  4 +--
 server/api/print/text.post.ts                 |  4 +--
 13 files changed, 87 insertions(+), 29 deletions(-)
 rename app/components/queue/{QueueActions.vue => Actions.vue} (100%)
 rename app/components/queue/{QueueItem.vue => Item.vue} (100%)
 create mode 100644 app/composables/useMediaQuery.ts

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index d79433e..2ee3f42 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1,3 +1,6 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
 /* Safe area para PWA en iOS */
 .safe-area-bottom {
   padding-bottom: env(safe-area-inset-bottom);
@@ -19,11 +22,20 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-gray-300 dark:bg-gray-700 rounded-full;
+  background: rgb(209 213 219); /* gray-300 */
+  border-radius: 9999px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-400 dark:bg-gray-600;
+  background: rgb(156 163 175); /* gray-400 */
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: rgb(55 65 81); /* gray-700 */
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgb(75 85 99); /* gray-600 */
 }
 
 /* Reset básico */
diff --git a/app/components/queue/QueueActions.vue b/app/components/queue/Actions.vue
similarity index 100%
rename from app/components/queue/QueueActions.vue
rename to app/components/queue/Actions.vue
diff --git a/app/components/queue/QueueItem.vue b/app/components/queue/Item.vue
similarity index 100%
rename from app/components/queue/QueueItem.vue
rename to app/components/queue/Item.vue
diff --git a/app/components/queue/PrintQueue.vue b/app/components/queue/PrintQueue.vue
index 216123e..6e64939 100644
--- a/app/components/queue/PrintQueue.vue
+++ b/app/components/queue/PrintQueue.vue
@@ -15,7 +15,7 @@ const queue = usePrintQueue()
     </div>
 
     <TransitionGroup name="list" tag="div" class="space-y-2">
-      <QueueQueueItem
+      <QueueItem
         v-for="(op, index) in queue.operations.value"
         :key="index"
         :operation="op"
diff --git a/app/composables/useMediaQuery.ts b/app/composables/useMediaQuery.ts
new file mode 100644
index 0000000..f05a011
--- /dev/null
+++ b/app/composables/useMediaQuery.ts
@@ -0,0 +1,20 @@
+export function useMediaQuery(query: string) {
+  const matches = ref(false)
+
+  if (import.meta.client) {
+    const mediaQuery = window.matchMedia(query)
+    matches.value = mediaQuery.matches
+
+    const handler = (e: MediaQueryListEvent) => {
+      matches.value = e.matches
+    }
+
+    mediaQuery.addEventListener('change', handler)
+
+    onUnmounted(() => {
+      mediaQuery.removeEventListener('change', handler)
+    })
+  }
+
+  return matches
+}
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 32a8f0a..acb6181 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -28,7 +28,7 @@ const queue = usePrintQueue()
         </div>
 
         <div class="p-4 border-t border-gray-200 dark:border-gray-800">
-          <QueueQueueActions />
+          <QueueActions />
         </div>
       </aside>
 
@@ -44,7 +44,7 @@ const queue = usePrintQueue()
 
           <template v-else-if="activeTab === 'queue'">
             <QueuePrintQueue />
-            <QueueQueueActions class="mt-4" />
+            <QueueActions class="mt-4" />
           </template>
 
           <template v-else-if="activeTab === 'templates'">
diff --git a/package-lock.json b/package-lock.json
index f1d6fc1..a539610 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,10 @@
         "nuxt": "^4.2.1",
         "vue": "^3.5.24",
         "vue-router": "^4.6.3"
+      },
+      "devDependencies": {
+        "@iconify-json/heroicons": "^1.2.3",
+        "@iconify-json/lucide": "^1.2.75"
       }
     },
     "node_modules/@ai-sdk/gateway": {
@@ -2236,6 +2240,26 @@
         }
       }
     },
+    "node_modules/@iconify-json/heroicons": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@iconify-json/heroicons/-/heroicons-1.2.3.tgz",
+      "integrity": "sha512-n+vmCEgTesRsOpp5AB5ILB6srsgsYK+bieoQBNlafvoEhjVXLq8nIGN4B0v/s4DUfa0dOrjwE/cKJgIKdJXOEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify-json/lucide": {
+      "version": "1.2.75",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.75.tgz",
+      "integrity": "sha512-sWBN0t/rTo1FxWG/46xKgkIcDerHpsjyNgMH48nvtC4/kUG88sFQXI+7mxX3SD8eSUaQQ2kS9C7ZKWm2DKgBlw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/collections": {
       "version": "1.0.616",
       "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.616.tgz",
diff --git a/package.json b/package.json
index de861ed..b282d99 100644
--- a/package.json
+++ b/package.json
@@ -17,5 +17,9 @@
     "nuxt": "^4.2.1",
     "vue": "^3.5.24",
     "vue-router": "^4.6.3"
+  },
+  "devDependencies": {
+    "@iconify-json/heroicons": "^1.2.3",
+    "@iconify-json/lucide": "^1.2.75"
   }
 }
diff --git a/server/api/print/cut.post.ts b/server/api/print/cut.post.ts
index 3897177..2671d34 100644
--- a/server/api/print/cut.post.ts
+++ b/server/api/print/cut.post.ts
@@ -1,6 +1,6 @@
 // Endpoint para cortar papel
-import { buildFromOperations } from '~/server/utils/eposBuilder'
-import { buildSoapEnvelope, sendToPrinter, parsePrinterResponse } from '~/server/utils/printer'
+import { buildFromOperations } from '../../utils/eposBuilder'
+import { buildSoapEnvelope, sendToPrinter, parsePrinterResponse } from '../../utils/printer'
 
 export default defineEventHandler(async (event) => {
   try {
diff --git a/server/api/print/image.post.ts b/server/api/print/image.post.ts
index 41c7e80..bf85b7f 100644
--- a/server/api/print/image.post.ts
+++ b/server/api/print/image.post.ts
@@ -1,7 +1,7 @@
 // Endpoint para imprimir imágenes usando Jimp
-import Jimp from 'jimp'
-import { EposMessageBuilder } from '~/server/utils/eposBuilder'
-import { buildSoapEnvelope, sendToPrinter, parsePrinterResponse } from '~/server/utils/printer'
+import { Jimp } from 'jimp'
+import { EposMessageBuilder } from '../../utils/eposBuilder'
+import { buildSoapEnvelope, sendToPrinter, parsePrinterResponse } from '../../utils/printer'
 
 export default defineEventHandler(async (event) => {
   try {
@@ -29,14 +29,15 @@ export default defineEventHandler(async (event) => {
 
     // Leer y procesar imagen
     const img = await Jimp.read(path)
-    let targetWidth = width || img.bitmap.width
-    if (targetWidth <= 0) targetWidth = img.bitmap.width
+    let targetWidth = width || img.width
+    if (targetWidth <= 0) targetWidth = img.width
 
-    const scale = targetWidth / img.bitmap.width
-    const targetHeight = Math.max(1, Math.round(img.bitmap.height * scale))
+    const scale = targetWidth / img.width
+    const targetHeight = Math.max(1, Math.round(img.height * scale))
 
-    img.resize(targetWidth, targetHeight, Jimp.RESIZE_BILINEAR)
-    img.grayscale()
+    // Resize y convertir a escala de grises
+    img.resize({ w: targetWidth, h: targetHeight })
+    img.greyscale()
 
     // Empaquetar bits MSB first por byte
     const bytesPerRow = Math.ceil(targetWidth / 8)
@@ -49,13 +50,10 @@ export default defineEventHandler(async (event) => {
       let rowBytes = 0
 
       for (let x = 0; x < targetWidth; x++) {
-        const idx = (y * targetWidth + x) * 4
-        const rgba = img.bitmap.data
-        const r = rgba[idx]
-        const g = rgba[idx + 1]
-        const b = rgba[idx + 2]
-        const lum = 0.299 * r + 0.587 * g + 0.114 * b
-        const isBlack = lum < threshold
+        const color = img.getPixelColor(x, y)
+        // Extraer componente rojo (ya es greyscale, todos los canales son iguales)
+        const r = (color >> 24) & 0xFF
+        const isBlack = r < threshold
 
         if (isBlack) byte |= (1 << bit)
         bit--
diff --git a/server/api/print/index.post.ts b/server/api/print/index.post.ts
index 56985a5..f4ff1dc 100644
--- a/server/api/print/index.post.ts
+++ b/server/api/print/index.post.ts
@@ -1,6 +1,6 @@
 // Endpoint genérico de impresión que acepta una lista de operaciones
-import { buildFromOperations, type Operation } from '~/server/utils/eposBuilder'
-import { buildSoapEnvelope, sendToPrinter, parsePrinterResponse } from '~/server/utils/printer'
+import { buildFromOperations, type Operation } from '../../utils/eposBuilder'
+import { buildSoapEnvelope, sendToPrinter, parsePrinterResponse } from '../../utils/printer'
 
 export default defineEventHandler(async (event) => {
   try {
diff --git a/server/api/print/pulse.post.ts b/server/api/print/pulse.post.ts
index 115d575..a785704 100644
--- a/server/api/print/pulse.post.ts
+++ b/server/api/print/pulse.post.ts
@@ -1,6 +1,6 @@
 // Endpoint para abrir cajón de dinero
-import { buildFromOperations } from '~/server/utils/eposBuilder'
-import { buildSoapEnvelope, sendToPrinter, parsePrinterResponse } from '~/server/utils/printer'
+import { buildFromOperations } from '../../utils/eposBuilder'
+import { buildSoapEnvelope, sendToPrinter, parsePrinterResponse } from '../../utils/printer'
 
 export default defineEventHandler(async (event) => {
   try {
diff --git a/server/api/print/text.post.ts b/server/api/print/text.post.ts
index e76e3d4..7277d9d 100644
--- a/server/api/print/text.post.ts
+++ b/server/api/print/text.post.ts
@@ -1,6 +1,6 @@
 // Endpoint de conveniencia para imprimir texto con opciones
-import { buildFromOperations, type Operation } from '~/server/utils/eposBuilder'
-import { buildSoapEnvelope, sendToPrinter, parsePrinterResponse } from '~/server/utils/printer'
+import { buildFromOperations, type Operation } from '../../utils/eposBuilder'
+import { buildSoapEnvelope, sendToPrinter, parsePrinterResponse } from '../../utils/printer'
 
 export default defineEventHandler(async (event) => {
   try {