ui/ux panorama facturador

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

@@ -0,0 +1,40 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <template #header>
+      <h2 class="text-xl font-bold brand-section-title">Precios Promedio Ponderados</h2>
+    </template>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <MetricCard
+        label="Precio Promedio Ponderado Uva"
+        :value="formatNumber(metrics.precioPromedioUvaPorQqLb.value)"
+        unit="L./lb"
+      />
+      <MetricCard
+        label="Precio Promedio Ponderado Oreado"
+        :value="formatNumber(metrics.precioPromedioOreadoPorQq.value)"
+        unit="L./qq"
+      />
+      <MetricCard
+        label="Precio Promedio Ponderado Mojado"
+        :value="formatNumber(metrics.precioPromedioMojadoPorQq.value)"
+        unit="L./qq"
+      />
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import type { IngresosMetrics } from '~/composables/useIngresosMetrics'
+
+defineProps<{
+  metrics: IngresosMetrics
+}>()
+
+const formatNumber = (value: number) => {
+  return value.toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })
+}
+</script>