From 5d71a16ec720816a8756089ca384fa73ae4ad8be Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 3 Feb 2025 09:30:31 +0100
Subject: [PATCH] feat: refs #6321 changes after review

---
 src/components/common/VnPopupProxy.vue        |  14 +-
 src/components/ui/VnStockValueDisplay.vue     |   4 +-
 src/pages/Item/components/ItemProposal.vue    |   8 +-
 src/pages/Ticket/Card/TicketSale.vue          |   4 +-
 src/pages/Ticket/Card/TicketSplit.vue         |  75 ++++++++++
 src/pages/Ticket/Card/TicketTransfer.vue      | 141 +++++++-----------
 src/pages/Ticket/Card/TicketTransferProxy.vue |  54 +++++++
 .../Ticket/Negative/TicketLackDetail.vue      |  54 +++++--
 src/pages/Ticket/Negative/TicketLackList.vue  |  24 ++-
 src/pages/Ticket/Negative/TicketLackTable.vue |  23 +--
 src/router/modules/ticket.js                  |   2 +-
 11 files changed, 260 insertions(+), 143 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketSplit.vue
 create mode 100644 src/pages/Ticket/Card/TicketTransferProxy.vue

diff --git a/src/components/common/VnPopupProxy.vue b/src/components/common/VnPopupProxy.vue
index ec713188a..b7509cfd7 100644
--- a/src/components/common/VnPopupProxy.vue
+++ b/src/components/common/VnPopupProxy.vue
@@ -25,11 +25,13 @@ const popupProxyRef = ref(null);
 
 <template>
     <QBtn :color="$props.color" :icon="$props.icon" :label="$t($props.label)">
-        <QPopupProxy ref="popupProxyRef" style="max-width: none">
-            <QCard>
-                <slot :popup="popupProxyRef"></slot>
-            </QCard>
-        </QPopupProxy>
-        <QTooltip>{{ $t($props.tooltip) }}</QTooltip>
+        <template #default>
+            <QPopupProxy ref="popupProxyRef" style="max-width: none">
+                <QCard>
+                    <slot :popup="popupProxyRef"></slot>
+                </QCard>
+            </QPopupProxy>
+            <QTooltip>{{ $t($props.tooltip) }}</QTooltip>
+        </template>
     </QBtn>
 </template>
diff --git a/src/components/ui/VnStockValueDisplay.vue b/src/components/ui/VnStockValueDisplay.vue
index 3c3c465ae..8021769d9 100644
--- a/src/components/ui/VnStockValueDisplay.vue
+++ b/src/components/ui/VnStockValueDisplay.vue
@@ -25,10 +25,10 @@ const formattedValue = computed(() => props.value);
 
 <style lang="scss" scoped>
 .positive {
-    color: green;
+    color: $secondary;
 }
 .negative {
-    color: red;
+    color: $negative;
 }
 .neutral {
     color: orange;
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index 43196eb2d..8dc74fb91 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -155,8 +155,6 @@ const gradientStyle = (value) => {
     }
     return color;
 };
-const tagColor = (match) => `color: ${!match ? 'red' : 'var(--vn-label-color)'}`;
-
 const statusConditionalValue = (row) => {
     const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
     return total;
@@ -274,13 +272,13 @@ const isSelectionAvailable = (itemProposal) => {
             </QTd>
         </template>
         <template #column-tag5="{ row }">
-            <span :style="tagColor(row.match5)">{{ row.value5 }}</span>
+            <span :class="{ match: !row.match5 }">{{ row.value5 }}</span>
         </template>
         <template #column-tag6="{ row }">
-            <span :style="tagColor(row.match6)">{{ row.value6 }}</span>
+            <span :class="{ match: !row.match6 }">{{ row.value6 }}</span>
         </template>
         <template #column-tag7="{ row }">
-            <span :style="tagColor(row.match7)">{{ row.value7 }}</span>
+            <span :class="{ match: !row.match7 }">{{ row.value7 }}</span>
         </template>
         <template #column-counter="{ row }">
             <span
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 8bb054a3b..6925738e5 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -14,7 +14,7 @@ import VnImg from 'src/components/ui/VnImg.vue';
 
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import TicketSaleMoreActions from './TicketSaleMoreActions.vue';
-import TicketTransfer from './TicketTransfer.vue';
+import TicketTransferProxy from './TicketTransferProxy.vue';
 
 import { toCurrency, toPercentage } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
@@ -609,7 +609,7 @@ watch(
                     data-cy="ticketSaleTransferBtn"
                 >
                     <QTooltip>{{ t('ticketSale.transferLines') }}</QTooltip>
-                    <TicketTransfer
+                    <TicketTransferProxy
                         class="full-width"
                         :transfer="transfer"
                         :ticket="store.data"
diff --git a/src/pages/Ticket/Card/TicketSplit.vue b/src/pages/Ticket/Card/TicketSplit.vue
new file mode 100644
index 000000000..461b7e4d6
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketSplit.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+import { toDateFormat } from 'src/filters/date.js';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import split from './components/split';
+const emit = defineEmits(['ticketTransfered']);
+
+const $props = defineProps({
+    ticket: {
+        type: [Array, Object],
+        default: () => {},
+    },
+});
+
+const { t } = useI18n();
+const splitDate = ref(Date.vnNew());
+const agencySelected = ref(null);
+const zoneSelected = ref(null);
+
+const splitSelectedRows = async () => {
+    const tickets = Array.isArray($props.ticket) ? $props.ticket : [$props.ticket];
+    await split(tickets, splitDate.value);
+    emit('ticketTransfered', tickets);
+};
+const agencies = ref([]);
+const handleDateChanged = async () => {
+    const { data: agencyData } = await axios.get('Agencies/getLanded', {
+        params: {
+            addressFk: 123,
+            agencyModeFk: 8,
+            warehouseFk: 1,
+            shipped: '2001-02-08T23:00:00.000Z',
+        },
+    });
+    if (!agencyData) agencies.value = [];
+    const { zoneFk } = agencyData;
+    const { data: zoneData } = await axios.get('Zones/Includingexpired', {
+        params: { filter: { fields: ['id', 'name'], where: { id: zoneFk } } },
+    });
+    agencies = zoneData;
+    if (zoneData.length === 1) zoneSelected.value = zoneData[0];
+};
+</script>
+
+<template>
+    <VnInputDate
+        class="q-mr-sm"
+        :label="$t('New date')"
+        v-model="splitDate"
+        clearable
+        @update:model-value="handleDateChanged"
+    />
+    <VnSelect
+        class="q-ml-sm"
+        :disable="splitDate"
+        :label="t('Agency')"
+        v-model="agencySelected"
+        :options="agencies"
+    />
+    <QBtn class="q-mr-sm" color="primary" label="Split" @click="splitSelectedRows"></QBtn>
+</template>
+<style lang="scss">
+.q-table__bottom.row.items-center.q-table__bottom--nodata {
+    border-top: none;
+}
+</style>
+<i18n>
+es:
+    Sales to transfer: Líneas a transferir
+    Destination ticket: Ticket destinatario
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketTransfer.vue b/src/pages/Ticket/Card/TicketTransfer.vue
index 9062520e0..ffa964c92 100644
--- a/src/pages/Ticket/Card/TicketTransfer.vue
+++ b/src/pages/Ticket/Card/TicketTransfer.vue
@@ -1,13 +1,10 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import VnInput from 'src/components/common/VnInput.vue';
 import TicketTransferForm from './TicketTransferForm.vue';
 
 import { toDateFormat } from 'src/filters/date.js';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
-import split from './components/split';
 const emit = defineEmits(['ticketTransfered']);
 
 const $props = defineProps({
@@ -27,17 +24,12 @@ const $props = defineProps({
         type: [Array, Object],
         default: () => {},
     },
-    split: {
-        type: Boolean,
-        default: false,
-    },
 });
 
 onMounted(() => (_transfer.value = $props.transfer));
 const { t } = useI18n();
 const transferFormRef = ref(null);
 const _transfer = ref();
-const splitDate = ref(Date.vnNew());
 const transferLinesColumns = computed(() => [
     {
         label: t('ticketList.id'),
@@ -93,87 +85,66 @@ const handleRowClick = (row) => {
         transferFormRef.value.transferSales(ticketId);
     }
 };
-const splitSelectedRows = async () => {
-    const tickets = Array.isArray($props.ticket) ? $props.ticket : [$props.ticket];
-    await split(tickets, splitDate.value);
-    emit('ticketTransfered', tickets);
-};
 </script>
 
 <template>
-    <QPopupProxy ref="popupProxyRef" data-cy="ticketTransferPopup">
-        <div class="flex row items-center q-ma-lg" v-if="$props.split">
-            <QBtn
-                class="q-mr-sm"
-                color="primary"
-                label="Split"
-                @click="splitSelectedRows"
-            ></QBtn>
-            <VnInputDate :label="$t('New date')" v-model="splitDate"></VnInputDate>
-        </div>
-        <div v-else>
-            <QSeparator class="q-my-lg" color="primary" />
-            <QCard class="full-width q-px-md" style="display: flex; width: 80vw">
-                <QTable
-                    :rows="transfer.sales"
-                    :columns="transferLinesColumns"
-                    :title="t('Sales to transfer')"
-                    row-key="id"
-                    :pagination="{ rowsPerPage: 0 }"
-                    class="full-width q-mt-md"
-                    :no-data-label="t('globals.noResults')"
-                >
-                    <template #body-cell-quantity="{ row }">
-                        <QTd @click.stop>
-                            <VnInput
-                                v-model.number="row.quantity"
-                                :clearable="false"
-                                style="max-width: 60px"
-                            />
-                        </QTd>
-                    </template>
-                </QTable>
-                <QSeparator vertical spaced />
-                <QTable
-                    v-if="transfer.lastActiveTickets"
-                    :rows="transfer.lastActiveTickets"
-                    :columns="destinationTicketColumns"
-                    :title="t('Destination ticket')"
-                    row-key="id"
-                    class="full-width q-mt-md"
-                    @row-click="(_, row) => handleRowClick(row)"
-                    :no-data-label="t('globals.noResults')"
-                    :pagination="{ rowsPerPage: 0 }"
-                >
-                    <template #body-cell-address="{ row }">
-                        <QTd @click.stop>
-                            <span>
-                                {{ row.nickname }}
-                                {{ row.name }}
-                                {{ row.street }}
-                                {{ row.postalCode }}
-                                {{ row.city }}
-                            </span>
-                            <QTooltip>
-                                {{ row.nickname }}
-                                {{ row.name }}
-                                {{ row.street }}
-                                {{ row.postalCode }}
-                                {{ row.city }}
-                            </QTooltip>
-                        </QTd>
-                    </template>
+    <QTable
+        :rows="transfer.sales"
+        :columns="transferLinesColumns"
+        :title="t('Sales to transfer')"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        :no-data-label="t('globals.noResults')"
+    >
+        <template #body-cell-quantity="{ row }">
+            <QTd @click.stop>
+                <VnInput
+                    v-model.number="row.quantity"
+                    :clearable="false"
+                    style="max-width: 60px"
+                />
+            </QTd>
+        </template>
+    </QTable>
+    <QSeparator vertical spaced />
+    <QTable
+        v-if="transfer.lastActiveTickets"
+        :rows="transfer.lastActiveTickets"
+        :columns="destinationTicketColumns"
+        :title="t('Destination ticket')"
+        row-key="id"
+        class="full-width q-mt-md"
+        @row-click="(_, row) => handleRowClick(row)"
+        :no-data-label="t('globals.noResults')"
+        :pagination="{ rowsPerPage: 0 }"
+    >
+        <template #body-cell-address="{ row }">
+            <QTd @click.stop>
+                <span>
+                    {{ row.nickname }}
+                    {{ row.name }}
+                    {{ row.street }}
+                    {{ row.postalCode }}
+                    {{ row.city }}
+                </span>
+                <QTooltip>
+                    {{ row.nickname }}
+                    {{ row.name }}
+                    {{ row.street }}
+                    {{ row.postalCode }}
+                    {{ row.city }}
+                </QTooltip>
+            </QTd>
+        </template>
 
-                    <template #no-data>
-                        <TicketTransferForm ref="transferFormRef" v-bind="$props" />
-                    </template>
-                    <template #bottom>
-                        <TicketTransferForm ref="transferFormRef" v-bind="$props" />
-                    </template>
-                </QTable>
-            </QCard>
-        </div>
-    </QPopupProxy>
+        <template #no-data>
+            <TicketTransferForm ref="transferFormRef" v-bind="$props" />
+        </template>
+        <template #bottom>
+            <TicketTransferForm ref="transferFormRef" v-bind="$props" />
+        </template>
+    </QTable>
 </template>
 <style lang="scss">
 .q-table__bottom.row.items-center.q-table__bottom--nodata {
diff --git a/src/pages/Ticket/Card/TicketTransferProxy.vue b/src/pages/Ticket/Card/TicketTransferProxy.vue
new file mode 100644
index 000000000..3f3f018df
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketTransferProxy.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { ref } from 'vue';
+import TicketTransfer from './TicketTransfer.vue';
+import Split from './TicketSplit.vue';
+const emit = defineEmits(['ticketTransfered']);
+
+const $props = defineProps({
+    mana: {
+        type: Number,
+        default: null,
+    },
+    newPrice: {
+        type: Number,
+        default: 0,
+    },
+    transfer: {
+        type: Object,
+        default: () => {},
+    },
+    ticket: {
+        type: [Array, Object],
+        default: () => {},
+    },
+    split: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const popupProxyRef = ref(null);
+const splitRef = ref(null);
+const transferRef = ref(null);
+</script>
+
+<template>
+    <QPopupProxy ref="popupProxyRef" data-cy="ticketTransferPopup">
+        <div class="flex row items-center q-ma-lg" v-if="$props.split">
+            <Split
+                ref="splitRef"
+                @splitSelectedRows="splitSelectedRows"
+                :ticket="$props.ticket"
+            />
+        </div>
+
+        <div v-else>
+            <TicketTransfer
+                ref="transferRef"
+                :ticket="$props.ticket"
+                :sales="$props.sales"
+                :transfer="$props.transfer"
+            />
+        </div>
+    </QPopupProxy>
+</template>
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index 462b00c46..91e5c1735 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import ChangeQuantityDialog from './components/ChangeQuantityDialog.vue';
 import ChangeStateDialog from './components/ChangeStateDialog.vue';
 import ChangeItemDialog from './components/ChangeItemDialog.vue';
-import TicketTransfer from '../Card/TicketTransfer.vue';
+import TicketTransferProxy from '../Card/TicketTransferProxy.vue';
 import FetchData from 'src/components/FetchData.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
@@ -27,7 +27,6 @@ const showProposalDialog = ref(false);
 const showChangeQuantityDialog = ref(false);
 const selectedRows = ref([]);
 const route = useRoute();
-const itemLack = ref(null);
 onMounted(() => {
     stateStore.rightDrawer = false;
 });
@@ -88,6 +87,24 @@ const filterTable = { stateFk: 0, warehouseFk: useState().getUser().value.wareho
         auto-load
     />
 
+    <QIcon size="md" name="exposure" color="negative" />
+    <QIcon size="md" name="edit" color="negative" />
+    <QIcon size="md" name="shopping_cart" color="negative" />
+    <QIcon size="md" name="production_quantity_limits" color="negative" />
+    <QIcon size="md" name="playlist_add" color="negative" />
+    <QIcon size="md" name="task_alt" color="negative" />
+    <QIcon size="md" name="fact_check" color="negative" />
+    <QIcon size="md" name="inventory" color="negative" />
+    <QIcon size="md" name="receipt_long" color="negative" />
+    <QIcon size="md" name="sync" color="negative" />
+    <QIcon size="md" name="confirmation_number" color="negative" />
+    <QIcon size="md" name="airplane_ticket" color="negative" />
+    <QBadge color="negative" floating>
+        <!-- <QIcon size="md" name="highlight_off" color="white" /> -->
+        <QIcon size="md" name="edit" color="white" />
+        <QIcon size="md" name="sync" color="white" />
+    </QBadge>
+    <QIcon size="md" name="confirmation_number" color="negative" />
     <TicketLackTable
         ref="tableRef"
         :filter="filterTable"
@@ -101,17 +118,22 @@ const filterTable = { stateFk: 0, warehouseFk: useState().getUser().value.wareho
                     icon="vn:splitline"
                     :disable="!(selectedRows.length === 1)"
                 >
-                    <QTooltip>{{ t('ticketSale.transferLines') }} </QTooltip>
-                    <TicketTransfer
-                        ref="transferFormRef"
-                        split="true"
-                        :ticket="selectedRows"
-                        :transfer="{
-                            sales: selectedRows,
-                            lastActiveTickets: selectedRows.map((row) => row.id),
-                        }"
-                        @ticket-transfered="reload"
-                    ></TicketTransfer>
+                    <template #default>
+                        <QIcon name="vn:splitline" />
+                        <QIcon name="vn:item" />
+
+                        <QTooltip>{{ t('ticketSale.transferLines') }} </QTooltip>
+                        <TicketTransferProxy
+                            ref="transferFormRef"
+                            split="true"
+                            :ticket="selectedRows"
+                            :transfer="{
+                                sales: selectedRows,
+                                lastActiveTickets: selectedRows.map((row) => row.id),
+                            }"
+                            @ticket-transfered="reload"
+                        ></TicketTransferProxy>
+                    </template>
                 </QBtn>
                 <QBtn
                     color="primary"
@@ -129,7 +151,7 @@ const filterTable = { stateFk: 0, warehouseFk: useState().getUser().value.wareho
                 </QBtn>
                 <VnPopupProxy
                     data-cy="changeItem"
-                    icon="refresh"
+                    icon="sync"
                     :disable="selectedRows.length < 1"
                     :label="t('negative.buttonsUpdate.item')"
                     :tooltip="t('negative.detail.modal.changeItem.title')"
@@ -143,7 +165,7 @@ const filterTable = { stateFk: 0, warehouseFk: useState().getUser().value.wareho
                 </VnPopupProxy>
                 <VnPopupProxy
                     data-cy="changeState"
-                    icon="refresh"
+                    icon="sync"
                     :disable="selectedRows.length < 1"
                     :label="t('negative.buttonsUpdate.state')"
                     :tooltip="t('negative.detail.modal.changeState.title')"
@@ -157,7 +179,7 @@ const filterTable = { stateFk: 0, warehouseFk: useState().getUser().value.wareho
                 </VnPopupProxy>
                 <VnPopupProxy
                     data-cy="changeQuantity"
-                    icon="refresh"
+                    icon="sync"
                     :disable="selectedRows.length < 1"
                     :label="t('negative.buttonsUpdate.quantity')"
                     :tooltip="t('negative.detail.modal.changeQuantity.title')"
diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index f86df857a..ce80cb95c 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -10,10 +10,9 @@ import { useState } from 'src/composables/useState';
 import { useRole } from 'src/composables/useRole';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
-const router = useRouter();
-import VnImg from 'src/components/ui/VnImg.vue';
 import TicketLackFilter from './TicketLackFilter.vue';
 
+const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const selectedRows = ref([]);
@@ -130,7 +129,7 @@ const columns = computed(() => [
         actions: [
             {
                 title: t('Open details'),
-                icon: 'preview',
+                icon: 'edit',
                 action: redirectToCreateView,
                 isPrimary: true,
             },
@@ -173,24 +172,19 @@ onBeforeMount(() => {
             selection: 'multiple',
         }"
     >
+        <template #column-itemFk="{ row }">
+            <div
+                style="display: flex; justify-content: space-around; align-items: center"
+            >
+                <span @click.stop>{{ row.itemFk }}</span>
+            </div>
+        </template>
         <template #column-longName="{ row }">
             <span class="link" @click.stop>
                 {{ row.longName }}
                 <ItemDescriptorProxy :id="row.itemFk" />
             </span>
         </template>
-        <template #column-itemFk="{ row }">
-            <div
-                style="display: flex; justify-content: space-around; align-items: center"
-            >
-                <span class="link" @click.stop>{{ row.itemFk }}</span>
-                <VnImg
-                    style="width: 50px; height: 50px; float: inline-end"
-                    :id="row.itemFk"
-                    class="rounded"
-                ></VnImg>
-            </div>
-        </template>
     </VnTable>
 </template>
 
diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index 9f0e54cb8..c2bd06594 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -1,7 +1,6 @@
 <script setup>
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
-import VnImg from 'src/components/ui/VnImg.vue';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
@@ -14,6 +13,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 import TicketDescriptorProxy from '../Card/TicketDescriptorProxy.vue';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 
 const $props = defineProps({
     filter: {
@@ -240,13 +240,13 @@ function onBuysFetched(data) {
     >
         <template #top-left>
             <div style="display: flex; align-items: center" v-if="itemLack">
-                <VnImg :id="itemLack.itemFk" class="rounded image-wrapper"></VnImg>
+                <!-- <VnImg :id="itemLack.itemFk" class="rounded image-wrapper"></VnImg> -->
                 <div class="flex column" style="align-items: center">
                     <QBadge
                         ref="badgeLackRef"
                         class="q-ml-xs"
                         text-color="white"
-                        :color="itemLack.lack === 0 ? 'green' : 'red'"
+                        :color="itemLack.lack !== 0 ? 'green' : 'red'"
                         :label="itemLack.lack"
                     />
                 </div>
@@ -254,8 +254,8 @@ function onBuysFetched(data) {
                     <QBtn flat class="link text-blue">
                         {{ item?.longName ?? item.name }}
                         <ItemDescriptorProxy :id="entityId" />
+                        <FetchedTags class="q-ml-md" :item="item" :columns="7" />
                     </QBtn>
-                    <FetchedTags class="q-ml-md" :item="item" :columns="7" />
                 </div>
             </div>
         </template>
@@ -324,16 +324,17 @@ function onBuysFetched(data) {
                 </div></QTd
             >
         </template>
-
+        <template #column-nickname="{ row }">
+            <span class="link" @click.stop>
+                {{ row.nickname }}
+                <CustomerDescriptorProxy :id="row.itemFk" />
+            </span>
+        </template>
         <template #column-ticketFk="{ row }">
-            <QBadge
-                class="q-pa-sm"
-                :class="{ link: hasToIgnore(row) }"
-                :color="rowColor(row)"
-            >
+            <span class="q-pa-sm link">
                 {{ row.id }}
                 <TicketDescriptorProxy :id="row.id" />
-            </QBadge>
+            </span>
         </template>
         <template #column-alertLevelCode="props">
             <VnSelect
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 79baac744..81c0bc28f 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -243,7 +243,7 @@ export default {
                             name: 'TicketNegative',
                             meta: {
                                 title: 'negative',
-                                icon: 'view_list',
+                                icon: 'exposure',
                             },
                             // redirect: { name: 'TicketNegative' },
                             component: () =>