mejora ui x exageradas

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

@@ -97,8 +97,15 @@ import { upperFirst } from 'scule'
 import type { TableColumn } from '@nuxt/ui'
 import type { IngresoRecord } from '~/composables/useIngresosMetrics'
 
+interface ClienteRecord {
+  id: number
+  name: string
+  [key: string]: any
+}
+
 interface Props {
   records: IngresoRecord[]
+  clientes?: ClienteRecord[]
 }
 
 const props = defineProps<Props>()
@@ -113,6 +120,7 @@ const dateFormat = ref<'short' | 'long'>('short')
 
 const UBadge = resolveComponent('UBadge')
 const UIcon = resolveComponent('UIcon')
+const UTooltip = resolveComponent('UTooltip')
 
 function toggleDateFormat() {
   dateFormat.value = dateFormat.value === 'short' ? 'long' : 'short'
@@ -363,6 +371,37 @@ function formatCellValue(value: unknown, column: string): any {
     }
   }
 
+  // cliente_id - Badge neutral soft con ID y nombre truncado
+  if (column === 'cliente_id' && typeof value === 'number') {
+    const cliente = props.clientes?.find(c => c.id === value)
+    const clienteNombre = cliente?.name || 'Sin nombre'
+    const fullLabel = `${value} - ${clienteNombre}`
+    const shouldTruncate = fullLabel.length > 30
+
+    const badge = h(UBadge, {
+      color: 'neutral',
+      variant: 'soft',
+      size: 'sm',
+      class: shouldTruncate ? 'max-w-[220px]' : ''
+    }, {
+      default: () => h('span', {
+        class: shouldTruncate ? 'truncate block' : ''
+      }, fullLabel)
+    })
+
+    // Si está truncado, agregar tooltip con el texto completo
+    if (shouldTruncate) {
+      return h(UTooltip, {
+        text: fullLabel,
+        shortcuts: []
+      }, {
+        default: () => badge
+      })
+    }
+
+    return badge
+  }
+
   // pagado_id - ID en verde
   if (column === 'pagado_id' && typeof value === 'number') {
     return h(UBadge, {