masiso

nuxt4/app/components/lotes/Card.vue

@@ -0,0 +1,108 @@
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex justify-between items-center">
+        <div>
+          <h3 class="text-xl font-bold">{{ lote.codigo || 'Sin código' }}</h3>
+          <UBadge :color="getTipoColor(lote.tipo)" variant="subtle" class="mt-1">
+            {{ getTipoLabel(lote.tipo) }}
+          </UBadge>
+        </div>
+        <div class="flex gap-2">
+          <UButton
+            icon="i-heroicons-pencil"
+            variant="outline"
+            size="sm"
+            label="Editar"
+            @click="$emit('edit')"
+          />
+          <UButton
+            icon="i-heroicons-chart-bar"
+            variant="outline"
+            size="sm"
+            color="green"
+            label="Ver Trazabilidad"
+            @click="$emit('trazabilidad')"
+          />
+        </div>
+      </div>
+    </template>
+
+    <div class="space-y-4">
+      <div class="grid grid-cols-2 gap-4">
+        <div>
+          <p class="text-sm text-gray-500">ID</p>
+          <p class="font-mono text-xs">{{ lote.id }}</p>
+        </div>
+
+        <div>
+          <p class="text-sm text-gray-500">Fecha de Creación</p>
+          <p class="font-medium">{{ formatDate(lote.fecha_creado) }}</p>
+        </div>
+
+        <div>
+          <p class="text-sm text-gray-500">Cantidad</p>
+          <p class="font-medium text-lg">
+            {{ lote.cantidad_kg ? `${lote.cantidad_kg.toLocaleString('es-AR')} kg` : '-' }}
+          </p>
+        </div>
+
+        <div>
+          <p class="text-sm text-gray-500">Lugar ID</p>
+          <p class="font-medium">{{ lote.lugar_id || '-' }}</p>
+        </div>
+      </div>
+
+      <div v-if="lote.meta" class="pt-4 border-t">
+        <p class="text-sm text-gray-500 mb-2">Información Adicional</p>
+        <UCard class="bg-gray-50">
+          <pre class="text-xs overflow-x-auto">{{ JSON.stringify(lote.meta, null, 2) }}</pre>
+        </UCard>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import type { Lote } from '~/composables/useLotes'
+
+const props = defineProps<{
+  lote: Lote
+}>()
+
+const emit = defineEmits<{
+  edit: []
+  trazabilidad: []
+}>()
+
+const { TIPOS_LOTE } = useLotes()
+
+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',
+  })
+}
+</script>