seguidorDeLotes/nuxt4/app/components/lotes/Table.vue

<template>
  <div class="space-y-4">
    <div class="flex justify-between items-center">
      <div>
        <h2 class="text-2xl font-bold">Lotes</h2>
        <p class="text-gray-500">Gestión de lotes de café</p>
      </div>
      <UButton
        icon="i-heroicons-plus"
        label="Nuevo Lote"
        @click="$emit('create')"
      />
    </div>

    <div class="flex gap-2">
      <USelect
        v-model="filtroTipo"
        :options="[{ value: '', label: 'Todos los tipos' }, ...TIPOS_LOTE]"
        placeholder="Filtrar por tipo"
        class="w-64"
      />
      <UButton
        icon="i-heroicons-arrow-path"
        label="Refrescar"
        variant="outline"
        @click="loadLotes"
      />
    </div>

    <!-- Mensaje de error -->
    <UCard v-if="error" class="bg-red-50 dark:bg-red-950 border-red-500">
      <div class="flex items-start gap-3">
        <UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6 text-red-600 flex-shrink-0 mt-0.5" />
        <div class="flex-1">
          <h3 class="font-semibold text-red-600">Error cargando lotes</h3>
          <p class="text-sm text-red-700 dark:text-red-400 mt-1">{{ error }}</p>
          <p class="text-xs text-red-600 dark:text-red-500 mt-2">Ver consola del navegador (F12) para más detalles</p>
        </div>
      </div>
    </UCard>

    <UCard>
      <UTable
        :data="lotes"
        :columns="columns"
        :loading="loading"
        :empty-state="{
          icon: 'i-heroicons-inbox',
          label: 'No hay lotes registrados'
        }"
      >
        <template #codigo-cell="{ getValue }">
          <span class="font-mono font-semibold">{{ getValue() || '-' }}</span>
        </template>

        <template #tipo-cell="{ getValue }">
          <UBadge :color="getTipoColor(getValue())" variant="subtle">
            {{ getTipoLabel(getValue()) }}
          </UBadge>
        </template>

        <template #cantidad_kg-cell="{ getValue }">
          <span v-if="getValue()" class="font-medium">
            {{ getValue().toLocaleString('es-AR') }} kg
          </span>
          <span v-else class="text-gray-400">-</span>
        </template>

        <template #fecha_creado-cell="{ getValue }">
          {{ formatDate(getValue()) }}
        </template>

        <template #actions-cell="{ row }">
          <div class="flex gap-1">
            <UButton
              icon="i-heroicons-eye"
              size="xs"
              variant="ghost"
              @click="$emit('view', row.original as Lote)"
            />
            <UButton
              icon="i-heroicons-pencil"
              size="xs"
              variant="ghost"
              @click="$emit('edit', row.original as Lote)"
            />
            <UButton
              icon="i-heroicons-chart-bar"
              size="xs"
              variant="ghost"
              color="green"
              @click="$emit('trazabilidad', row.original as Lote)"
            />
          </div>
        </template>
      </UTable>
    </UCard>
  </div>
</template>

<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { Lote } from '~/composables/useLotes'

console.log('🟢 LotesTable: <script setup> ejecutándose')

const emit = defineEmits<{
  create: []
  view: [lote: Lote]
  edit: [lote: Lote]
  trazabilidad: [lote: Lote]
}>()

console.log('🟢 LotesTable: Llamando a useLotes()...')
const { fetchLotes, TIPOS_LOTE } = useLotes()
console.log('🟢 LotesTable: useLotes() completado')

const lotes = ref<Lote[]>([])
const loading = ref(false)
const filtroTipo = ref('')
const error = ref<string | null>(null)

const columns: ColumnDef<Lote>[] = [
  { accessorKey: 'codigo', id: 'codigo', header: 'Código' },
  { accessorKey: 'tipo', id: 'tipo', header: 'Tipo' },
  { accessorKey: 'cantidad_kg', id: 'cantidad_kg', header: 'Cantidad' },
  { accessorKey: 'fecha_creado', id: 'fecha_creado', header: 'Fecha Creación' },
  { id: 'actions', header: 'Acciones' },
]

const loadLotes = async () => {
  loading.value = true
  error.value = null
  try {
    console.log('🟢 LotesTable: Iniciando carga de lotes...')
    lotes.value = await fetchLotes({
      tipo: filtroTipo.value || undefined,
    })
    console.log('🟢 LotesTable: Lotes cargados exitosamente:', lotes.value.length)
  } catch (err: any) {
    const errorMsg = err?.message || String(err)
    error.value = errorMsg
    console.error('❌ LotesTable: Error cargando lotes:', {
      message: errorMsg,
      stack: err?.stack,
      error: err
    })
  } finally {
    loading.value = false
  }
}

const getTipoLabel = (tipo: string) => {
  const found = TIPOS_LOTE.find((t) => t.value === tipo)
  return found?.label || tipo
}

const getTipoColor = (tipo: string): string => {
  const colorMap: Record<string, string> = {
    uva: 'purple',
    despulpado_primera: 'green',
    despulpado_segunda: 'yellow',
    despulpado_rechazos: 'red',
    oreado: 'orange',
    presecado: 'amber',
    reposo: 'blue',
    secado: 'emerald',
  }
  return colorMap[tipo] || 'gray'
}

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('es-AR', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// Cargar lotes al montar
onMounted(() => {
  try {
    console.log('🟢 LotesTable: Componente montado, cargando lotes...')
    loadLotes()
  } catch (err: any) {
    console.error('❌ LotesTable: Error en onMounted:', err)
  }
})

// Recargar cuando cambia el filtro
watch(filtroTipo, () => {
  try {
    console.log('🟢 LotesTable: Filtro cambiado, recargando lotes...')
    loadLotes()
  } catch (err: any) {
    console.error('❌ LotesTable: Error en watch:', err)
  }
})
</script>