fix: refs #6321 colors with variables

src/components/ui/VnStockValueDisplay.vue

@@ -33,7 +33,7 @@ const formattedValue = computed(() => props.value);
     color: $negative;
 }
 .neutral {
-    color: orange;
+    color: $primary;
 }
 .value-icon {
     margin-right: 4px;

src/pages/Item/components/ItemProposal.vue

@@ -28,7 +28,6 @@ const $props = defineProps({
     },
 });
 const proposalSelected = ref([]);
-const quantity = ref(-1);
 const sale = computed(() => $props.sales[0]);
 const saleFk = computed(() => sale.value.saleFk);
 const filter = computed(() => ({
@@ -146,15 +145,11 @@ const columns = computed(() => [
     },
 ]);
 
-const extractNumericValue = (percentageString) => {
+const compatibilityItem = (value) => 100 * (value / MATCH_VALUES.length);
-    const match = percentageString.match(/(\d+(\.\d+)?)/);
-    return match ? parseFloat(match[0]) : null;
-};
-const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`;
 
 const gradientStyle = (value) => {
     let color = 'white';
-    const perc = extractNumericValue(compatibilityItem(value));
+    const perc = parseFloat(compatibilityItem(value));
     switch (true) {
         case perc >= 0 && perc < 33:
             color = 'orange';
@@ -241,13 +236,13 @@ const isSelectionAvailable = (itemProposal) => {
                 </QTooltip>
 
                 <div
-                    class="middle compatibility"
+                    class="middle full-width"
                     :style="{
                         background: gradientStyle(statusConditionalValue(row)),
                     }"
                 >
                     <QTooltip>
-                        {{ compatibilityItem(statusConditionalValue(row)) }}
+                        {{ compatibilityItem(statusConditionalValue(row)) }}%
                     </QTooltip>
                 </div>
                 <div style="flex: 2 0 100%; align-content: center">
@@ -281,8 +276,6 @@ const isSelectionAvailable = (itemProposal) => {
         </template>
         <template #column-price2="{ row }">
             <div class="flex column items-center content-center">
-                {{ toCurrency(sales[0].price) }}
-                {{ toCurrency(row.price2) }}
                 <VnStockValueDisplay :value="(sales[0].price - row.price2) / 100" />
                 <span :class="[conditionalValuePrice(row.price2)]">{{
                     toCurrency(row.price2)
@@ -292,9 +285,6 @@ const isSelectionAvailable = (itemProposal) => {
     </VnTable>
 </template>
 <style lang="scss" scoped>
-.compatibility {
-    width: 100%;
-}
 .middle {
     float: left;
     margin-right: 2px;

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -54,6 +54,7 @@ function onBuysFetched(data) {
 }
 const showItemProposal = () => {
     quasar
+
         .dialog({
             component: ItemProposalProxy,
             componentProps: {

src/pages/Ticket/Negative/TicketLackTable.vue

@@ -235,7 +235,7 @@ function onBuysFetched(data) {
                         ref="badgeLackRef"
                         class="q-ml-xs"
                         text-color="white"
-                        :color="itemLack.lack !== 0 ? 'green' : 'red'"
+                        :color="itemLack.lack === 0 ? 'positive' : 'negative'"
                         :label="itemLack.lack"
                     />
                 </div>