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

<template>
  <div class="space-y-4">
    <div class="flex justify-between items-center">
      <div>
        <h2 class="text-2xl font-bold">Operaciones</h2>
        <p class="text-gray-500">Historial de operaciones de proceso</p>
      </div>
      <UButton
        icon="i-heroicons-plus"
        label="Nueva Operación"
        @click="$emit('create')"
      />
    </div>

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

    <UCard>
      <UTable
        :rows="operaciones"
        :columns="columns"
        :loading="loading"
        :empty-state="{
          icon: 'i-heroicons-inbox',
          label: 'No hay operaciones registradas'
        }"
      >
        <template #tipo-data="{ row }">
          <div class="flex items-center gap-2">
            <UIcon :name="getTipoIcon(row.tipo)" class="w-4 h-4" />
            <UBadge :color="getTipoColor(row.tipo)" variant="subtle">
              {{ getTipoLabel(row.tipo) }}
            </UBadge>
          </div>
        </template>

        <template #fecha-data="{ row }">
          {{ formatDate(row.fecha) }}
        </template>

        <template #actions-data="{ row }">
          <div class="flex gap-1">
            <UButton
              icon="i-heroicons-eye"
              size="xs"
              variant="ghost"
              @click="$emit('view', row)"
            />
          </div>
        </template>
      </UTable>
    </UCard>
  </div>
</template>

<script setup lang="ts">
import type { Operacion } from '~/composables/useLotes'

const emit = defineEmits<{
  create: []
  view: [operacion: Operacion]
}>()

const { fetchOperaciones, TIPOS_OPERACION } = useLotes()

const operaciones = ref<Operacion[]>([])
const loading = ref(false)
const filtroTipo = ref('')

const columns = [
  { key: 'tipo', label: 'Tipo de Operación' },
  { key: 'fecha', label: 'Fecha' },
  { key: 'lugar_id', label: 'Lugar' },
  { key: 'actions', label: 'Acciones' },
]

const loadOperaciones = async () => {
  loading.value = true
  try {
    operaciones.value = await fetchOperaciones({
      tipo: filtroTipo.value || undefined,
    })
  } finally {
    loading.value = false
  }
}

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

const getTipoIcon = (tipo: string): string => {
  const found = TIPOS_OPERACION.find((t) => t.value === tipo)
  return found?.icon || 'i-heroicons-cube'
}

const getTipoColor = (tipo: string): string => {
  const colorMap: Record<string, string> = {
    ingreso: 'blue',
    despulpado: 'green',
    oreado: 'orange',
    presecado: 'amber',
    reposo: 'purple',
    secado: 'emerald',
    traslado: 'gray',
    mezcla: 'yellow',
    ajuste_merma: 'red',
    ajuste_cantidad: 'orange',
    ajuste_tipo: 'yellow',
  }
  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',
  })
}

onMounted(() => {
  loadOperaciones()
})

watch(filtroTipo, () => {
  loadOperaciones()
})
</script>