mejroas ui/ux cuentas-cliente

nuxt4-app/app/components/ingresos/VistaTablaIngresos.vue

@@ -3,7 +3,7 @@
     <template #header>
       <div class="flex items-center justify-between">
         <div>
-          <h2 class="text-xl font-bold brand-section-title">Vista Tabla de Ingresos</h2>
+          <h2 class="text-xl font-bold text-cyan-400">Vista Tabla de Ingresos</h2>
           <p class="text-sm text-[var(--brand-text-muted)] mt-1">
             {{ props.records.length }} registros filtrados
           </p>
@@ -51,6 +51,9 @@
       :global-filter="globalFilter"
       sticky
       class="h-96"
+      :ui="{
+        thead: 'bg-cyan-400/20 [&>tr>th]:text-white [&>tr>th]:font-semibold'
+      }"
     />
 
     <!-- Table Footer -->
@@ -196,7 +199,7 @@ const tableColumns = computed((): TableColumn<Record<string, unknown>>[] => {
         variant: 'ghost',
         label: upperFirst(column),
         icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
-        class: '-mx-2.5',
+        class: '-mx-2.5 text-white hover:text-cyan-100',
         onClick: () => tableColumn.toggleSorting(tableColumn.getIsSorted() === 'asc')
       })
     },
@@ -334,6 +337,67 @@ function formatCellValue(value: unknown, column: string): any {
     })
   }
 
+  // created_at - fecha en bold y un poco más grande
+  if (column === 'created_at' && typeof value === 'string' && value.includes('T')) {
+    try {
+      const date = new Date(value)
+      const formattedDate = dateFormat.value === 'long'
+        ? date.toLocaleDateString('es-HN', { day: 'numeric', month: 'long', year: 'numeric' })
+        : date.toLocaleDateString('es-HN')
+      return h('span', { class: 'font-bold text-base' }, formattedDate)
+    } catch {
+      return String(value)
+    }
+  }
+
+  // fecha_pagado - fecha en verde
+  if (column === 'fecha_pagado' && typeof value === 'string' && value.includes('T')) {
+    try {
+      const date = new Date(value)
+      const formattedDate = dateFormat.value === 'long'
+        ? date.toLocaleDateString('es-HN', { day: 'numeric', month: 'long', year: 'numeric' })
+        : date.toLocaleDateString('es-HN')
+      return h('span', { class: 'text-green-500 font-semibold' }, formattedDate)
+    } catch {
+      return String(value)
+    }
+  }
+
+  // pagado_id - ID en verde
+  if (column === 'pagado_id' && typeof value === 'number') {
+    return h(UBadge, {
+      label: `P-${value}`,
+      color: 'success',
+      variant: 'subtle',
+      size: 'md',
+      class: 'rounded-full'
+    })
+  }
+
+  // fecha_anulado - fecha en rojo
+  if (column === 'fecha_anulado' && typeof value === 'string' && value.includes('T')) {
+    try {
+      const date = new Date(value)
+      const formattedDate = dateFormat.value === 'long'
+        ? date.toLocaleDateString('es-HN', { day: 'numeric', month: 'long', year: 'numeric' })
+        : date.toLocaleDateString('es-HN')
+      return h('span', { class: 'text-red-500 font-semibold' }, formattedDate)
+    } catch {
+      return String(value)
+    }
+  }
+
+  // anulador_id - ID en rojo
+  if (column === 'anulador_id' && typeof value === 'number') {
+    return h(UBadge, {
+      label: `A-${value}`,
+      color: 'error',
+      variant: 'subtle',
+      size: 'md',
+      class: 'rounded-full'
+    })
+  }
+
   // precio - formato lempiras con decimales y comas
   if (column === 'precio' && typeof value === 'number') {
     return `L. ${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
@@ -349,7 +413,7 @@ function formatCellValue(value: unknown, column: string): any {
     return value.toLocaleString('en-US', { maximumFractionDigits: 2 })
   }
 
-  // Formatear fechas
+  // Formatear fechas (genérico para otras fechas)
   if (typeof value === 'string' && value.includes('T')) {
     try {
       const date = new Date(value)