masiso

nuxt4/app/components/operaciones/Table.vue

@@ -0,0 +1,150 @@
+<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'
+
+console.log('🟡 OperacionesTable: Script ejecutado')
+
+const emit = defineEmits<{
+  create: []
+  view: [operacion: Operacion]
+}>()
+
+const { fetchOperaciones, TIPOS_OPERACION } = useLotes()
+console.log('🟡 OperacionesTable: Composable cargado')
+
+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(() => {
+//   console.log('🟡 OperacionesTable montado correctamente')
+//   loadOperaciones().catch(error => {
+//     console.error('❌ Error cargando operaciones:', error)
+//   })
+// })
+
+// watch(filtroTipo, () => {
+//   loadOperaciones()
+// })
+</script>