Merge branch 'dev' into 5633-accountNumberComponent

2023-12-11 08:31:08 +00:00 · 2023-12-11 08:31:08 +00:00 · f5e89a9edc
parent b400a23d43 5c84a68ca6
commit f5e89a9edc
24 changed files with 389 additions and 104 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## [2352.01] - 2023-12-28
+
+### Added
+- (carros) => Se añade contador de carros. #6545
+- (Reclamaciones) => Se añade la sección para hacer acciones sobre una reclamación. #5654
+### Changed
+### Fixed
+- (Reclamaciones) => Se corrige el color de la barra según el tema y el evento de actualziar cantidades #6334
+
+
 ## [2253.01] - 2023-01-05

 ### Added
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "salix-front",
-    "version": "23.48.01",
+    "version": "23.52.01",
    "description": "Salix frontend",
    "productName": "Salix",
    "author": "Verdnatura",
@ -53,4 +53,4 @@
        "vite": "^4.3.5",
        "vitest": "^0.31.1"
    }
-}
+}
--- a/quasar.config.js
+++ b/quasar.config.js
@ -66,7 +66,9 @@ module.exports = configure(function (/* ctx */) {
            // publicPath: '/',
            // analyze: true,
            // env: {},
-            // rawDefine: {}
+            rawDefine: {
+                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+            },
            // ignorePublicFolder: true,
            // minify: false,
            // polyfillModulePreload: true,
@ -89,11 +91,12 @@ module.exports = configure(function (/* ctx */) {

            vitePlugins: [
                [
-                    VueI18nPlugin,
+                    VueI18nPlugin({
+                        runtimeOnly: false
+                    }),
                    {
                        // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
                        // compositionOnly: false,
-
                        // you need to set i18n resource including paths !
                        include: path.resolve(__dirname, './src/i18n/**'),
                    },
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, useSlots, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@ -30,8 +31,12 @@ const $props = defineProps({
        type: String,
        default: '',
    },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
-
+const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
 const entity = computed(() => useArrayData($props.dataKey).store.data);
@ -57,27 +62,36 @@ async function getData() {
    emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: $props.summary,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>

 <template>
    <div class="descriptor">
        <template v-if="entity">
-            <div class="header bg-primary q-pa-sm">
-                <RouterLink :to="{ name: `${module}List` }">
-                    <QBtn
-                        round
-                        flat
-                        dense
-                        size="md"
-                        icon="view_list"
-                        color="white"
-                        class="link"
-                    >
-                        <QTooltip>
-                            {{ t('components.cardDescriptor.mainList') }}
-                        </QTooltip>
-                    </QBtn>
-                </RouterLink>
+            <div class="header bg-primary q-pa-sm justify-between">
+                <QBtn
+                    @click.stop="viewSummary(entity.id)"
+                    round
+                    flat
+                    dense
+                    size="md"
+                    icon="preview"
+                    color="white"
+                    class="link"
+                    v-if="summary"
+                >
+                    <QTooltip>
+                        {{ t('components.smartCard.openSummary') }}
+                    </QTooltip>
+                </QBtn>
                <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
                    <QBtn
                        round
@ -93,7 +107,6 @@ const emit = defineEmits(['onFetch']);
                        </QTooltip>
                    </QBtn>
                </RouterLink>
-
                <QBtn
                    v-if="slots.menu"
                    size="md"
@ -216,8 +229,6 @@ const emit = defineEmits(['onFetch']);
    width: 256px;
    .header {
        display: flex;
-        justify-content: space-between;
-        align-items: stretch;
    }
    .icons {
        margin: 0 10px;
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@ -32,7 +32,7 @@ const $props = defineProps({
        gap: 2%;
        width: 50%;
        .label {
-            width: 30%;
+            width: 35%;
            color: var(--vn-label);
            overflow: hidden;
            text-overflow: ellipsis;
--- a/src/components/ui/VnLinkPhone.vue
+++ b/src/components/ui/VnLinkPhone.vue
@ -0,0 +1,22 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+const props = defineProps({
+    phoneNumber: { type: [String, Number], default: null },
+});
+const { t } = useI18n();
+</script>
+<template>
+    <QBtn
+        v-if="props.phoneNumber"
+        flat
+        round
+        icon="phone"
+        size="sm"
+        color="primary"
+        padding="none"
+        :href="`sip:${props.phoneNumber}`"
+        :title="t('globals.microsip')"
+        @click.stop
+    />
+</template>
+<style scoped></style>
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@ -36,6 +36,7 @@ export default {
        summary: {
            basicData: 'Basic data',
        },
+        microsip: 'Open in MicroSIP',
        noSelectedRows: `You don't have any line selected`,
    },
    errors: {
@ -449,6 +450,7 @@ export default {
            typesList: 'Types List',
            typeCreate: 'Create type',
            typeEdit: 'Edit type',
+            wagonCounter: 'Trolley counter',
        },
        type: {
            name: 'Name',
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@ -37,6 +37,7 @@ export default {
            basicData: 'Datos básicos',
        },
        noSelectedRows: `No tienes ninguna línea seleccionada`,
+        microsip: 'Abrir en MicroSIP',
    },
    errors: {
        statusUnauthorized: 'Acceso denegado',
@ -449,6 +450,7 @@ export default {
            typesList: 'Listado tipos',
            typeCreate: 'Crear tipo',
            typeEdit: 'Editar tipo',
+            wagonCounter: 'Contador de carros',
        },
        type: {
            name: 'Nombre',
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@ -7,6 +7,7 @@ import { useState } from 'src/composables/useState';

 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@ -119,7 +120,7 @@ const setData = (entity) => {
                <template #value>
                    <span class="link">
                        {{ entity.worker.user.name }}
-                        <WorkerDescriptorProxy :id="entity.worker.userFk" />
+                        <WorkerDescriptorProxy :id="entity.worker.user.id" />
                    </span>
                </template>
            </VnLv>
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@ -46,7 +46,7 @@ async function onFetchClaim(data) {
 const amount = ref(0);
 const amountClaimed = ref(0);
 async function onFetch(rows) {
-    if (!rows || rows.length) return;
+    if (!rows || !rows.length) return;
    amount.value = rows.reduce(
        (acumulator, { sale }) => acumulator + sale.price * sale.quantity,
        0
@ -155,7 +155,7 @@ function showImportDialog() {
 </script>
 <template>
    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <QToolbar class="bg-dark text-white">
+        <QToolbar>
            <div class="row q-gutter-md">
                <div>
                    {{ t('Amount') }}
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@ -26,6 +26,7 @@ const client = ref({});
 const inputFile = ref();
 const files = ref({});

+const spinnerRef = ref();
 const claimDmsRef = ref();
 const dmsType = ref({});
 const config = ref({});
@ -118,11 +119,11 @@ async function create() {
            clientId: client.value.id,
        }).toUpperCase(),
    };
-
+    spinnerRef.value.show();
    await axios.post(query, formData, {
        params: dms,
    });
-
+    spinnerRef.value.hide();
    quasar.notify({
        message: t('globals.dataSaved'),
        type: 'positive',
@ -234,7 +235,9 @@ function onDrag() {
            </div>
        </div>
    </div>
-
+    <QDialog ref="spinnerRef">
+        <QSpinner color="primary" size="xl" />
+    </QDialog>
    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <label for="fileInput">
            <QBtn fab @click="inputFile.nativeEl.click()" icon="add" color="primary">
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@ -5,12 +5,13 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';

 const stateStore = useStateStore();
 const router = useRouter();
@ -37,6 +38,15 @@ function viewSummary(id) {
        },
    });
 }
+
+function viewDescriptor(id) {
+    quasar.dialog({
+        component: CustomerDescriptorProxy,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>

 <template>
@ -86,14 +96,22 @@ function viewSummary(id) {
                    >
                        <template #list-items>
                            <VnLv label="ID" :value="row.id" />
-                            <VnLv
-                                :label="t('claim.list.customer')"
-                                :value="row.clientName"
-                            />
-                            <VnLv
-                                :label="t('claim.list.assignedTo')"
-                                :value="row.workerName"
-                            />
+                            <VnLv :label="t('claim.list.customer')" @click.stop>
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('claim.list.assignedTo')" @click.stop>
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.workerName }}
+                                        <WorkerDescriptorProxy :id="row.workerFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
                            <VnLv
                                :label="t('claim.list.created')"
                                :value="toDate(row.created)"
@ -125,13 +143,6 @@ function viewSummary(id) {
                                    {{ t('components.smartCard.openSummary') }}
                                </QTooltip>
                            </QBtn>
-                            <QBtn flat icon="vn:client" @click.stop>
-                                <QTooltip>
-                                    {{ t('components.smartCard.viewDescription') }}
-                                </QTooltip>
-
-                                <CustomerDescriptorProxy :id="row.clientFk" />
-                            </QBtn>
                        </template>
                    </CardList>
                </template>
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@ -14,6 +14,10 @@ const $props = defineProps({
        required: false,
        default: null,
    },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });

 const route = useRoute();
@ -34,6 +38,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
        :title="data.title"
        :subtitle="data.subtitle"
        @on-fetch="setData"
+        :summary="$props.summary"
        data-key="customerData"
    >
        <template #body="{ entity }">
--- a/src/pages/Customer/Card/CustomerDescriptorProxy.vue
+++ b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
 import CustomerDescriptor from './CustomerDescriptor.vue';
+import CustomerSummaryDialog from './CustomerSummaryDialog.vue';

 const $props = defineProps({
    id: {
@ -8,8 +9,13 @@ const $props = defineProps({
    },
 });
 </script>
+
 <template>
    <QPopupProxy>
-        <CustomerDescriptor v-if="$props.id" :id="$props.id" />
+        <CustomerDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="CustomerSummaryDialog"
+        />
    </QPopupProxy>
 </template>
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@ -6,6 +6,7 @@ import { toCurrency, toPercentage, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';

 const route = useRoute();
 const { t } = useI18n();
@ -68,8 +69,18 @@ const creditWarning = computed(() => {
                <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
                <VnLv :label="t('customer.summary.name')" :value="entity.name" />
                <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
-                <VnLv :label="t('customer.summary.phone')" :value="entity.phone" />
-                <VnLv :label="t('customer.summary.mobile')" :value="entity.mobile" />
+                <VnLv :value="entity.phone">
+                    <template #label>
+                        {{ t('customer.summary.phone') }}
+                        <VnLinkPhone :phone-number="entity.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="entity.mobile">
+                    <template #label>
+                        {{ t('customer.summary.mobile') }}
+                        <VnLinkPhone :phone-number="entity.mobile" />
+                    </template>
+                </VnLv>
                <VnLv :label="t('customer.summary.email')" :value="entity.email" />
                <VnLv
                    :label="t('customer.summary.salesPerson')"
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@ -9,6 +9,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';

 const stateStore = useStateStore();
 const router = useRouter();
@ -77,7 +78,12 @@ function viewSummary(id) {
                        <template #list-items>
                            <VnLv label="ID" :value="row.id" />
                            <VnLv :label="t('customer.list.email')" :value="row.email" />
-                            <VnLv :label="t('customer.list.phone')" :value="row.phone" />
+                            <VnLv :value="row.phone">
+                                <template #label>
+                                    {{ t('customer.list.phone') }}
+                                    <VnLinkPhone :phone-number="row.phone" />
+                                </template>
+                            </VnLv>
                        </template>
                        <template #actions>
                            <QBtn
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@ -10,6 +10,7 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
 import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { getUrl } from 'src/composables/getUrl';

 onUpdated(() => summaryRef.value.fetch());
@ -172,7 +173,7 @@ async function changeState(value) {
                    :label="t('ticket.summary.agency')"
                    :value="ticket.agencyMode.name"
                />
-                <VnLv :label="t('ticket.summary.zone')" :value="ticket.zone.name" />
+                <VnLv :label="t('ticket.summary.zone')" :value="ticket?.zone?.name" />
                <VnLv
                    :label="t('ticket.summary.warehouse')"
                    :value="ticket.warehouse?.name"
@ -180,7 +181,7 @@ async function changeState(value) {
                <VnLv :label="t('ticket.summary.route')" :value="ticket.routeFk" />
                <VnLv :label="t('ticket.summary.invoice')">
                    <template #value>
-                        <span class="link">
+                        <span :class="{ link: ticket.refFk }">
                            {{ dashIfEmpty(ticket.refFk) }}
                            <InvoiceOutDescriptorProxy
                                :id="ticket.id"
@ -208,22 +209,30 @@ async function changeState(value) {
                    :value="toDate(ticket.landed)"
                />
                <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
-                <VnLv
-                    :label="t('ticket.summary.consigneePhone')"
-                    :value="ticket.address.phone"
-                />
-                <VnLv
-                    :label="t('ticket.summary.consigneeMobile')"
-                    :value="ticket.address.mobile"
-                />
-                <VnLv
-                    :label="t('ticket.summary.clientPhone')"
-                    :value="ticket.client.phone"
-                />
-                <VnLv
-                    :label="t('ticket.summary.clientMobile')"
-                    :value="ticket.client.mobile"
-                />
+                <VnLv :value="ticket.address.phone">
+                    <template #label>
+                        {{ t('ticket.summary.consigneePhone') }}
+                        <VnLinkPhone :phone-number="ticket.address.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="ticket.address.mobile">
+                    <template #label>
+                        {{ t('ticket.summary.consigneeMobile') }}
+                        <VnLinkPhone :phone-number="ticket.address.mobile" />
+                    </template>
+                </VnLv>
+                <VnLv :value="ticket.client.phone">
+                    <template #label>
+                        {{ t('ticket.summary.clientPhone') }}
+                        <VnLinkPhone :phone-number="ticket.client.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="ticket.client.mobile">
+                    <template #label>
+                        {{ t('ticket.summary.clientMobile') }}
+                        <VnLinkPhone :phone-number="ticket.client.mobile" />
+                    </template>
+                </VnLv>
                <VnLv
                    :label="t('ticket.summary.consignee')"
                    :value="formattedAddress()"
--- a/src/pages/Wagon/WagonCounter.vue
+++ b/src/pages/Wagon/WagonCounter.vue
@ -0,0 +1,154 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useSession } from 'src/composables/useSession';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+const quasar = useQuasar();
+const { t } = useI18n();
+const session = useSession();
+const token = session.getToken();
+
+const counters = ref({
+    alquilerBandeja: { count: 0, id: 96001, title: 'CC Bandeja', isTray: true },
+    bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota', isTray: true },
+    carryOficial: { count: 0, id: 96000, title: 'CC Carry OFICIAL TAG5' },
+    candadoRojo: { count: 0, id: 96002, title: 'CC Carry NO OFICIAL' },
+    sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
+    sinChapa: { count: 0, id: 2214, title: 'DC Carry Sin Placa CC' },
+    carroRoto: { count: 0, id: 142251, title: 'Carro Roto' },
+});
+
+const actions = {
+    add: (counter) => counter + 1,
+    subtract: (counter) => (counter ? counter - 1 : 0),
+    flush: () => 0,
+    addSpecific: (counter, amount) => counter + amount,
+};
+
+onMounted(() => {
+    const types = Object.keys(counters.value);
+    for (let type of types) {
+        const counter = localStorage.getItem(type);
+        counters.value[type].count = counter ? parseInt(counter) : 0;
+    }
+});
+
+function getUrl(id) {
+    return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
+}
+
+async function handleEvent(type, action, amount) {
+    const counter = counters.value[type].count;
+    let isOk = true;
+
+    if (action == 'flush') isOk = await confirm();
+
+    if (isOk) {
+        counters.value[type].count = actions[action](counter, amount);
+        localStorage.setItem(type, counters.value[type].count);
+    }
+}
+
+function confirm() {
+    return new Promise((resolve) => {
+        quasar
+            .dialog({
+                component: VnConfirm,
+                componentProps: {
+                    title: t('Are you sure?'),
+                    message: t('The counter will be reset to zero'),
+                },
+            })
+            .onOk(() => resolve(true))
+            .onCancel(() => resolve(false));
+    });
+}
+</script>
+<template>
+    <QList class="row q-mx-auto q-mt-xl">
+        <QItem v-for="(props, name) in counters" :key="name" class="col-6">
+            <QItemSection>
+                <QImg
+                    :src="getUrl(props.id)"
+                    width="130px"
+                    @click="handleEvent(name, 'add')"
+                />
+                <p class="title">{{ props.title }}</p>
+            </QItemSection>
+            <QItemSection class="q-ma-none">
+                <QItemLabel class="text-h4">
+                    {{ props.count }}
+                </QItemLabel>
+                <QItemLabel>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        size="sm"
+                        v-if="props.isTray"
+                        @click="handleEvent(name, 'addSpecific', 30)"
+                    >
+                        {{ t('Add 30') }}
+                    </QBtn>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        size="sm"
+                        v-else
+                        @click="handleEvent(name, 'addSpecific', 10)"
+                    >
+                        {{ t('Add 10') }}
+                    </QBtn>
+                </QItemLabel>
+                <QItemLabel>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        size="sm"
+                        @click="handleEvent(name, 'subtract')"
+                    >
+                        {{ t('Subtract 1') }}
+                    </QBtn>
+                    <QBtn
+                        class="text-center q-ml-xs"
+                        color="red"
+                        dense
+                        size="sm"
+                        @click="handleEvent(name, 'flush')"
+                    >
+                        {{ t('Flush') }}
+                    </QBtn>
+                </QItemLabel>
+            </QItemSection>
+            <QSeparator class="q-mt-sm q-mx-none" color="primary" />
+        </QItem>
+    </QList>
+</template>
+<style lang="scss" scoped>
+.q-list {
+    max-width: 50em;
+}
+@media (max-width: $breakpoint-sm) {
+    .q-item {
+        display: flex;
+        flex-direction: column;
+    }
+    .title {
+        min-height: 3em;
+    }
+}
+</style>
+<i18n>
+es:
+    Subtract 1: Quitar 1
+    Add 30: Añadir 30
+    Add 10: Añadir 10
+    Flush: Vaciar
+    Are you sure?: ¿Estás seguro?
+    It will set to 0: Se pondrá a 0
+    The counter will be reset to zero: Se pondrá el contador a cero
+</i18n>
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@ -5,13 +5,19 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+
 const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });

 const route = useRoute();
@ -51,7 +57,7 @@ const sip = computed(() => worker.value?.sip && worker.value.sip.extension);

 function getWorkerAvatar() {
    const token = getToken();
-    return `/api/Images/user/160x160/${route.params.id}/download?access_token=${token}`;
+    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
 }
 const data = ref(useCardDescription());
 const setData = (entity) => {
@ -67,6 +73,7 @@ const setData = (entity) => {
        :filter="filter"
        :title="data.title"
        :subtitle="data.subtitle"
+        :summary="$props.summary"
        @on-fetch="
            (data) => {
                worker = data;
@ -99,8 +106,18 @@ const setData = (entity) => {
                :label="t('worker.list.department')"
                :value="entity.department ? entity.department.department.name : null"
            />
-            <VnLv :label="t('worker.card.phone')" :value="entity.phone" />
-            <VnLv :label="t('worker.summary.sipExtension')" :value="sip" />
+            <VnLv :value="entity.phone">
+                <template #label>
+                    {{ t('worker.card.phone') }}
+                    <VnLinkPhone :phone-number="entity.phone" />
+                </template>
+            </VnLv>
+            <VnLv :value="sip">
+                <template #label>
+                    {{ t('worker.summary.sipExtension') }}
+                    <VnLinkPhone v-if="sip" :phone-number="sip" />
+                </template>
+            </VnLv>
        </template>
    </CardDescriptor>
 </template>
--- a/src/pages/Worker/Card/WorkerDescriptorProxy.vue
+++ b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
@ -1,5 +1,6 @@
 <script setup>
 import WorkerDescriptor from './WorkerDescriptor.vue';
+import WorkerSummaryDialog from './WorkerSummaryDialog.vue';

 const $props = defineProps({
    id: {
@ -11,6 +12,10 @@ const $props = defineProps({

 <template>
    <QPopupProxy>
-        <WorkerDescriptor v-if="$props.id" :id="$props.id" />
+        <WorkerDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="WorkerSummaryDialog"
+        />
    </QPopupProxy>
 </template>
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@ -7,6 +7,7 @@ import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
 import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue';
 import { dashIfEmpty } from 'src/filters';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';

 const route = useRoute();
 const { t } = useI18n();
@ -91,15 +92,24 @@ const filter = {
                        </span>
                    </template>
                </VnLv>
-                <VnLv
-                    :label="t('worker.summary.phoneExtension')"
-                    :value="worker.mobileExtension"
-                />
-                <VnLv :label="t('worker.summary.entPhone')" :value="worker.phone" />
-                <VnLv
-                    :label="t('worker.summary.personalPhone')"
-                    :value="worker.client.phone"
-                />
+                <VnLv :value="worker.mobileExtension">
+                    <template #label>
+                        {{ t('worker.summary.phoneExtension') }}
+                        <VnLinkPhone :phone-number="worker.mobileExtension" />
+                    </template>
+                </VnLv>
+                <VnLv :value="worker.phone">
+                    <template #label>
+                        {{ t('worker.summary.entPhone') }}
+                        <VnLinkPhone :phone-number="worker.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="worker.client.phone">
+                    <template #label>
+                        {{ t('worker.summary.personalPhone') }}
+                        <VnLinkPhone :phone-number="worker.client.phone" />
+                    </template>
+                </VnLv>
                <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
            </QCard>
            <QCard class="vn-one">
@ -109,10 +119,12 @@ const filter = {
                <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
-                <VnLv
-                    :label="t('worker.summary.sipExtension')"
-                    :value="worker?.sip?.extension"
-                />
+                <VnLv :value="worker?.sip?.extension">
+                    <template #label>
+                        {{ t('worker.summary.sipExtension') }}
+                        <VnLinkPhone :phone-number="worker?.sip?.extension" />
+                    </template>
+                </VnLv>
            </QCard>
        </template>
    </CardSummary>
--- a/src/router/modules/wagon.js
+++ b/src/router/modules/wagon.js
@ -10,7 +10,7 @@ export default {
    component: RouterView,
    redirect: { name: 'WagonMain' },
    menus: {
-        main: ['WagonList', 'WagonTypeList'],
+        main: ['WagonList', 'WagonTypeList', 'WagonCounter'],
        card: [],
    },
    children: [
@ -47,6 +47,15 @@ export default {
                    },
                    component: () => import('src/pages/Wagon/WagonCreate.vue'),
                },
+                {
+                    path: 'counter',
+                    name: 'WagonCounter',
+                    meta: {
+                        title: 'wagonCounter',
+                        icon: 'add_circle',
+                    },
+                    component: () => import('src/pages/Wagon/WagonCounter.vue'),
+                },
            ],
        },
        {
--- a/test/cypress/integration/claimNotes.spec.js
+++ b/test/cypress/integration/claimNotes.spec.js
@ -7,7 +7,7 @@ describe('ClaimNotes', () => {

    it('should add a new note', () => {
        const message = 'This is a new message.';
-        cy.get('.q-page-sticky button').click();
+        cy.get('.q-page-sticky > div > button').click();
        cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
        cy.get('.q-card__actions button:nth-child(2)').click();
        cy.get('.q-card .q-card__section:nth-child(2)')
--- a/test/cypress/integration/ticketBoxing.spec.js
+++ b/test/cypress/integration/ticketBoxing.spec.js
@ -17,18 +17,4 @@ describe('TicketBoxing', () => {
        cy.get('div[class="q-item__label text-h6"]').eq(0).click();
        cy.get('.q-notification__message').should('have.text', 'No videos available');
    });
-
-    it('should show select time and video if have video list', () => {
-        cy.intercept(
-            {
-                method: 'GET',
-                url: '/api/Boxings/*',
-            },
-            ['2022-01-01T01-01-00.mp4', '2022-02-02T02-02-00.mp4', '2022-03-03T03-03-00.mp4']
-        ).as('getVideoList');
-        cy.get('.q-list').eq(3).find('.q-item').eq(2).click();
-
-        cy.get('.q-list').eq(3).find('.q-item').eq(0).find('.q-range');
-        cy.get('.q-list').eq(3).find('.q-item').eq(1).find('.q-select');
-    });
 });