pagina panorama facturador en camino

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

@@ -0,0 +1,44 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <template #header>
+      <h2 class="text-xl font-bold brand-section-title">Secos Vendidos y Pérdidas</h2>
+    </template>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <MetricCard
+        label="Total QQ Secos por Vender"
+        :value="metrics.totalQqSecoPorVender.value.toFixed(2)"
+        unit="QQ"
+        variant="info"
+      />
+      <MetricCard
+        label="Precio de Venta Promedio por QQ"
+        :value="formatCurrency(metrics.precioVentaPromedioPorQq.value)"
+      />
+      <MetricCard
+        label="Precio de Compra Promedio por QQ"
+        :value="formatCurrency(metrics.precioCompraPromedioPorQq.value)"
+      />
+      <MetricCard
+        label="Margen de Ganancia por QQ"
+        :value="formatCurrency(metrics.margenGananciaPorQq.value)"
+        :variant="metrics.margenGananciaPorQq.value > 0 ? 'success' : 'danger'"
+      />
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import type { IngresosMetrics } from '~/composables/useIngresosMetrics'
+
+defineProps<{
+  metrics: IngresosMetrics
+}>()
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat('es-GT', {
+    style: 'currency',
+    currency: 'GTQ'
+  }).format(value)
+}
+</script>