ui/ux panorama facturador

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

@@ -6,21 +6,21 @@
 
     <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"
+        label="Total qq Secos por Vender"
+        :value="formatNumber(metrics.totalQqSecoPorVender.value)"
+        unit="qq"
         variant="info"
       />
       <MetricCard
-        label="Precio de Venta Promedio por QQ"
+        label="Precio de Venta Promedio por qq"
         :value="formatCurrency(metrics.precioVentaPromedioPorQq.value)"
       />
       <MetricCard
-        label="Precio de Compra Promedio por QQ"
+        label="Precio de Compra Promedio por qq"
         :value="formatCurrency(metrics.precioCompraPromedioPorQq.value)"
       />
       <MetricCard
-        label="Margen de Ganancia por QQ"
+        label="Margen de Ganancia por qq"
         :value="formatCurrency(metrics.margenGananciaPorQq.value)"
         :variant="metrics.margenGananciaPorQq.value > 0 ? 'success' : 'danger'"
       />
@@ -35,6 +35,13 @@ defineProps<{
   metrics: IngresosMetrics
 }>()
 
+const formatNumber = (value: number) => {
+  return value.toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })
+}
+
 const formatCurrency = (value: number) => {
   return new Intl.NumberFormat('es-HN', {
     style: 'currency',