feat: ItemProposal difference column

src/components/ui/VnStockValueDisplay.vue

@@ -0,0 +1,35 @@
+<!-- src/components/StockValueDisplay.vue -->
+<template>
+    <span :class="valueClass">
+        <QIcon :name="iconName" size="sm" class="value-icon" />
+        {{ formattedValue }}
+    </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+
+const props = defineProps({
+    value: {
+        type: Number,
+        required: true,
+    },
+});
+
+const valueClass = computed(() => (props.value > 0 ? 'positive' : 'negative'));
+const iconName = computed(() => (props.value > 0 ? 'arrow_upward' : 'arrow_downward'));
+const formattedValue = computed(() => props.value);
+</script>
+
+<style scoped>
+.positive {
+    color: green;
+}
+.negative {
+    color: red;
+}
+.value-icon {
+    margin-right: 4px;
+}
+</style>

src/pages/Item/components/ItemProposal.vue

@@ -6,6 +6,9 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import { useSession } from 'src/composables/useSession';
 import VnLv from 'src/components/ui/VnLv.vue';
+import { toCurrency } from 'filters/index';
+import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
+
 const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
 const session = useSession();
@@ -70,7 +73,7 @@ const columns = computed(() => [
         ...defaultColumnAttrs,
         label: t('proposal.difference'),
         name: 'difference',
-        field: (item) => 21,
+        field: (item) => (item.id % 2 === 0 ? 10 : -10),
     },
     {
         ...defaultColumnAttrs,
@@ -301,9 +304,14 @@ async function confirm() {
                                         :class="[conditionalValuePrice(value)]"
                                     >
                                         <QTooltip>
-                                            {{ row.price2 }}/{{ currentTicket.price }}
+                                            {{ toCurrency(row.price2) }}
                                         </QTooltip>
-                                        {{ value }}
+                                        {{ toCurrency(row.price2) }}
+                                    </QTd>
+                                </template>
+                                <template #body-cell-difference="{ value }">
+                                    <QTd class="col" align="left">
+                                        <VnStockValueDisplay :value="value" />
                                     </QTd>
                                 </template>
                             </QTable>

src/pages/Item/locale/es.yml

@@ -98,11 +98,12 @@ proposal:
     value6: value6
     value7: value7
     value8: value8
-    available: Dispnible
-    minQuantity: minQuantity
-    price2: price2
+    available: Disponible
+    minQuantity: Min. cantidad
+    price2: Precio
     located: Ubicado
     counter: Contador
+    difference: Diferencial
     groupingPrice: Precio Grouping
     itemOldPrice: Precio itemOld
     status: Estado