nucleo000/analiticaNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mejoras ui/Ux y refactorizacion del selector rapido de dateRange

Browse Source
This commit is contained in:
josedario87
2025-09-30 15:47:03 -06:00
parent 270dc5f0bd
commit aeaf30d1d1
9 changed files with 420 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
nuxt4-app/app/components/ingresos/SecosVendidos.vue
View File

@@ -5,25 +5,39 @@
</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="formatNumber(metrics.totalQqSecoPorVender.value)"
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 class="p-4 rounded-lg border transition-all bg-[#1c140c] border-purple-900/40 text-purple-300">
<div class="flex flex-col">
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total qq Secos por Vender</span>
<div class="flex items-baseline gap-2">
<span class="text-2xl font-bold">{{ formatNumber(metrics.totalQqSecoPorVender.value) }}</span>
<span class="text-sm font-bold opacity-70">qq</span>
</div>
</div>
</div>
<div class="p-4 rounded-lg border transition-all bg-[#1c140c] border-purple-800/40 text-purple-400">
<div class="flex flex-col">
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Precio de Venta Promedio por qq</span>
<div class="flex items-baseline gap-2">
<span class="text-2xl font-bold">{{ formatCurrency(metrics.precioVentaPromedioPorQq.value) }}</span>
</div>
</div>
</div>
<div class="p-4 rounded-lg border transition-all bg-[#1c140c] border-purple-700/40 text-purple-500">
<div class="flex flex-col">
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Precio de Compra Promedio por qq</span>
<div class="flex items-baseline gap-2">
<span class="text-2xl font-bold">{{ formatCurrency(metrics.precioCompraPromedioPorQq.value) }}</span>
</div>
</div>
</div>
<div class="p-4 rounded-lg border transition-all bg-[#1c140c] text-purple-600" :class="metrics.margenGananciaPorQq.value > 0 ? 'border-purple-600/40' : 'border-red-600/40'">
<div class="flex flex-col">
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Margen de Ganancia por qq</span>
<div class="flex items-baseline gap-2">
<span class="text-2xl font-bold">{{ formatCurrency(metrics.margenGananciaPorQq.value) }}</span>
</div>
</div>
</div>
</div>
</UCard>
</template>