diff --git a/package.json b/package.json
index 4668d2d56..71d80d401 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.28.1",
+    "version": "24.30.1",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 493f1480e..56d1cbe8f 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -59,6 +59,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    hasSubtoolbar: {
+        type: Boolean,
+        default: true,
+    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -175,11 +179,14 @@ function columnName(col) {
 }
 
 function getColAlign(col) {
-    return 'text-' + (col.align ?? 'left')
+    return 'text-' + (col.align ?? 'left');
 }
+
+const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
 defineExpose({
     reload,
     redirect: redirectFn,
+    selected,
 });
 </script>
 <template>
@@ -225,11 +232,18 @@ defineExpose({
             :search-url="searchUrl"
             :disable-infinite-scroll="mode == TABLE_MODE"
             @save-changes="reload"
-            :has-subtoolbar="isEditable"
+            :has-subtoolbar="$attrs['hasSubtoolbar'] ?? isEditable"
         >
+            <template
+                v-for="(_, slotName) in $slots"
+                #[slotName]="slotData"
+                :key="slotName"
+            >
+                <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+            </template>
             <template #body="{ rows }">
                 <QTable
-                    v-bind="$attrs['QTable']"
+                    v-bind="$attrs['q-table']"
                     class="vnTable"
                     :columns="splittedColumns.columns"
                     :rows="rows"
@@ -246,6 +260,7 @@ defineExpose({
                             CrudModelRef.vnPaginateRef.paginate()
                     "
                     @row-click="(_, row) => rowClickFunction(row)"
+                    @update:selected="emit('update:selected', $event)"
                 >
                     <template #top-left>
                         <slot name="top-left"></slot>
@@ -310,13 +325,15 @@ defineExpose({
                             class="no-margin q-px-xs"
                             :class="getColAlign(col)"
                         >
-                            <VnTableColumn
-                                :column="col"
-                                :row="row"
-                                :is-editable="false"
-                                v-model="row[col.name]"
-                                component-prop="columnField"
-                            />
+                            <slot :name="`column-${col.name}`" :col="col" :row="row">
+                                <VnTableColumn
+                                    :column="col"
+                                    :row="row"
+                                    :is-editable="false"
+                                    v-model="row[col.name]"
+                                    component-prop="columnField"
+                                />
+                            </slot>
                         </QTd>
                     </template>
                     <template #body-cell-tableActions="{ col, row }">
@@ -412,14 +429,20 @@ defineExpose({
                                                             stopEventPropagation($event)
                                                         "
                                                     >
-                                                        <VnTableColumn
-                                                            :column="col"
+                                                        <slot
+                                                            :name="`column-${col.name}`"
+                                                            :col="col"
                                                             :row="row"
-                                                            :is-editable="false"
-                                                            v-model="row[col.name]"
-                                                            component-prop="columnField"
-                                                            :show-label="true"
-                                                        />
+                                                        >
+                                                            <VnTableColumn
+                                                                :column="col"
+                                                                :row="row"
+                                                                :is-editable="false"
+                                                                v-model="row[col.name]"
+                                                                component-prop="columnField"
+                                                                :show-label="true"
+                                                            />
+                                                        </slot>
                                                     </span>
                                                 </template>
                                             </VnLv>
@@ -477,6 +500,7 @@ defineExpose({
                         default="input"
                         v-model="data[column.name]"
                         :show-label="true"
+                        component-prop="columnCreate"
                     />
                     <slot name="more-create-dialog" :data="data" />
                 </div>
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 4cd964012..33b97e29d 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -93,7 +93,12 @@ const inputRules = [
                     name="close"
                     size="xs"
                     v-if="hover && value && !$attrs.disabled && $props.clearable"
-                    @click="value = null"
+                    @click="
+                        () => {
+                            value = null;
+                            emit('remove');
+                        }
+                    "
                 ></QIcon>
                 <QIcon v-if="info" name="info">
                     <QTooltip max-width="350px">
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 52cb68438..3e5cd4216 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -61,6 +61,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    useLike: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const { t } = useI18n();
@@ -114,11 +118,14 @@ async function fetchFilter(val) {
     if (!$props.url || !dataRef.value) return;
 
     const { fields, sortBy, limit } = $props;
-    let key = optionLabel.value;
+    let key = optionFilter.value ?? optionLabel.value;
 
-    if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
+    if (new RegExp(/\d/g).test(val)) key = optionValue.value;
 
-    const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
+    const defaultWhere = $props.useLike
+        ? { [key]: { like: `%${val}%` } }
+        : { [key]: val };
+    const where = { ...defaultWhere, ...$props.where };
     const fetchOptions = { where, order: sortBy, limit };
     if (fields) fetchOptions.fields = fields;
     return dataRef.value.fetch(fetchOptions);
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 9eff3d322..16217946b 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -10,7 +10,7 @@ const { t } = useI18n();
 const $props = defineProps({
     modelValue: {
         type: Object,
-        default: () => {}
+        default: () => {},
     },
     dataKey: {
         type: String,
@@ -58,7 +58,14 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
+const emit = defineEmits([
+    'update:modelValue',
+    'refresh',
+    'clear',
+    'search',
+    'init',
+    'remove',
+]);
 
 const arrayData = useArrayData($props.dataKey, {
     exprBuilder: $props.exprBuilder,
@@ -67,9 +74,9 @@ const arrayData = useArrayData($props.dataKey, {
 });
 const route = useRoute();
 const store = arrayData.store;
-const userParams = ref({})
+const userParams = ref({});
 onMounted(() => {
-    userParams.value = $props.modelValue ?? {}
+    userParams.value = $props.modelValue ?? {};
     emit('init', { params: userParams.value });
 });
 
@@ -92,6 +99,11 @@ watch(
     (val) => setUserParams(val)
 );
 
+watch(
+    () => $props.modelValue,
+    (val) => (userParams.value = val ?? {})
+);
+
 const isLoading = ref(false);
 async function search(evt) {
     if (evt && $props.disableSubmitEvent) return;
@@ -145,6 +157,7 @@ async function clearFilters() {
 
     isLoading.value = false;
     emit('clear');
+    emit('update:modelValue', userParams.value);
 }
 
 const tagsList = computed(() => {
@@ -168,6 +181,7 @@ async function remove(key) {
     userParams.value[key] = undefined;
     search();
     emit('remove', key);
+    emit('update:modelValue', userParams.value);
 }
 
 function formatValue(value) {
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index ac5e99da6..8f586cd01 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -445,10 +445,14 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        volume: Volume
+        observation: Notes
         ticketAdvance: Advance tickets
         futureTickets: Future tickets
         purchaseRequest: Purchase request
         weeklyTickets: Weekly tickets
+        services: Service
+        tracking: Tracking
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 12707d33a..3a3330d11 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -444,10 +444,14 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        volume: Volumen
+        observation: Notas
         ticketAdvance: Adelantar tickets
         futureTickets: Tickets a futuro
         purchaseRequest: Petición de compra
         weeklyTickets: Tickets programados
+        services: Servicios
+        tracking: Estados
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index ccd53e8b2..32980bc29 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -65,6 +65,8 @@ const columns = computed(() => [
             url: 'Workers/activeWithInheritedRole',
             fields: ['id', 'name'],
             where: { role: 'salesPerson' },
+            optionFilter: 'firstName',
+            useLike: false,
         },
         create: true,
         columnField: {
diff --git a/src/pages/Ticket/Card/TicketCreateServiceType.vue b/src/pages/Ticket/Card/TicketCreateServiceType.vue
new file mode 100644
index 000000000..d392ec206
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketCreateServiceType.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['onDataSaved']);
+
+const nameInputRef = ref(null);
+const serviceFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    nameInputRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        url-create="TicketServiceTypes"
+        model="TicketServiceType"
+        :title="t('New service type')"
+        :form-initial-data="serviceFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    ref="nameInputRef"
+                    :label="t('service.description')"
+                    v-model="data.name"
+                    :required="true"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New service type: Nuevo tipo de servicio
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketCreateTracking.vue b/src/pages/Ticket/Card/TicketCreateTracking.vue
new file mode 100644
index 000000000..399663571
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketCreateTracking.vue
@@ -0,0 +1,86 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FormModelPopup from 'components/FormModelPopup.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useState } from 'src/composables/useState';
+
+const emit = defineEmits(['onRequestCreated']);
+
+const route = useRoute();
+const { t } = useI18n();
+const state = useState();
+const user = state.getUser();
+const stateFetchDataRef = ref(null);
+
+const statesOptions = ref([]);
+const workersOptions = ref([]);
+
+const onStateFkChange = (formData) => (formData.userFk = user.value.id);
+</script>
+<template>
+    <FetchData
+        ref="stateFetchDataRef"
+        url="States"
+        auto-load
+        @on-fetch="(data) => (statesOptions = data)"
+    />
+    <FetchData
+        url="Workers/search"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (workersOptions = data)"
+    />
+    <FormModelPopup
+        :title="t('Create tracking')"
+        url-create="Tickets/state"
+        model="CreateTicketTracking"
+        :form-initial-data="{ ticketFk: route.params.id }"
+        @on-data-saved="() => emit('onRequestCreated')"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    v-model="data.stateFk"
+                    :label="t('tracking.state')"
+                    :options="statesOptions"
+                    @update:model-value="onStateFkChange(data)"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                />
+                <VnSelect
+                    :label="t('tracking.worker')"
+                    v-model="data.userFk"
+                    :options="workersOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                >
+                    <template #option="{ opt, itemProps }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>
+                                    {{ opt.name }}
+                                </QItemLabel>
+                                <QItemLabel caption>
+                                    {{ opt.nickname }}, {{ opt.code }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template></VnSelect
+                >
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+    es:
+        Create tracking: Crear estado
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index dfbcfc106..5fb312b28 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -71,7 +71,7 @@ const filter = {
 
 const data = ref(useCardDescription());
 const setData = (entity) =>
-    (data.value = useCardDescription(entity.client.name, entity.id));
+    (data.value = useCardDescription(entity.client?.name, entity.id));
 </script>
 
 <template>
@@ -92,7 +92,7 @@ const setData = (entity) =>
                 <template #value>
                     <span class="link">
                         {{ entity.clientFk }}
-                        <CustomerDescriptorProxy :id="entity.client.id" />
+                        <CustomerDescriptorProxy :id="entity.client?.id" />
                     </span>
                 </template>
             </VnLv>
@@ -109,8 +109,8 @@ const setData = (entity) =>
             <VnLv :label="t('ticket.summary.salesPerson')">
                 <template #value>
                     <VnUserLink
-                        :name="entity.client.salesPersonUser?.name"
-                        :worker-id="entity.client.salesPersonFk"
+                        :name="entity.client?.salesPersonUser?.name"
+                        :worker-id="entity.client?.salesPersonFk"
                     />
                 </template>
             </VnLv>
diff --git a/src/pages/Ticket/Card/TicketNotes.vue b/src/pages/Ticket/Card/TicketNotes.vue
new file mode 100644
index 000000000..cfc0c2431
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketNotes.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { ref, watch, computed, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'components/CrudModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+
+const route = useRoute();
+const { t } = useI18n();
+const ticketNotesCrudRef = ref(null);
+const observationTypes = ref([]);
+const arrayData = useArrayData('TicketNotes');
+const { store } = arrayData;
+
+const crudModelFilter = reactive({
+    where: { ticketFk: route.params.id },
+    fields: ['id', 'ticketFk', 'observationTypeFk', 'description'],
+});
+
+const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
+
+watch(
+    () => route.params.id,
+    async () => {
+        crudModelFilter.where.ticketFk = route.params.id;
+        store.filter = crudModelFilter;
+        await ticketNotesCrudRef.value.reload();
+    }
+);
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (observationTypes = data)"
+        auto-load
+        url="ObservationTypes"
+    />
+    <div class="flex justify-center">
+        <CrudModel
+            ref="ticketNotesCrudRef"
+            data-key="TicketNotes"
+            url="TicketObservations"
+            model="TicketNotes"
+            :filter="crudModelFilter"
+            :data-required="crudModelRequiredData"
+            :default-remove="false"
+            auto-load
+            style="max-width: 800px"
+        >
+            <template #body="{ rows }">
+                <QCard class="q-px-lg q-py-md">
+                    <div
+                        v-for="(row, index) in rows"
+                        :key="index"
+                        class="q-mb-md row items-center q-gutter-x-md"
+                    >
+                        <VnSelect
+                            :label="t('ticketNotes.observationType')"
+                            :options="observationTypes"
+                            hide-selected
+                            option-label="description"
+                            option-value="id"
+                            v-model="row.observationTypeFk"
+                            :disable="!!row.id"
+                        />
+                        <VnInput
+                            :label="t('ticketNotes.description')"
+                            v-model="row.description"
+                            class="col"
+                        />
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="ticketNotesCrudRef.remove([row])"
+                        >
+                            <QTooltip>
+                                {{ t('ticketNotes.removeNote') }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
+                    <VnRow v-if="observationTypes.length > rows.length">
+                        <QIcon
+                            name="add_circle"
+                            class="fill-icon-on-hover q-ml-md"
+                            size="sm"
+                            color="primary"
+                            @click="ticketNotesCrudRef.insert()"
+                        >
+                            <QTooltip>
+                                {{ t('ticketNotes.addNote') }}
+                            </QTooltip>
+                        </QIcon>
+                    </VnRow>
+                </QCard>
+            </template>
+        </CrudModel>
+    </div>
+</template>
diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
new file mode 100644
index 000000000..4cc8207ef
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -0,0 +1,190 @@
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'components/CrudModel.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FetchData from 'components/FetchData.vue';
+import TicketCreateServiceType from './TicketCreateServiceType.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const ticketServiceTypeFetchRef = ref(null);
+const ticketServiceCrudRef = ref(null);
+const ticketServiceOptions = ref([]);
+const arrayData = useArrayData('TicketNotes');
+const { store } = arrayData;
+const { notify } = useNotify();
+
+const selected = ref([]);
+const defaultTaxClass = ref(null);
+
+const crudModelFilter = computed(() => ({
+    where: { ticketFk: route.params.id },
+}));
+
+const crudModelRequiredData = computed(() => ({
+    ticketFk: route.params.id,
+    taxClassFk: defaultTaxClass.value?.id,
+}));
+
+watch(
+    () => route.params.id,
+    async () => {
+        store.filter = crudModelFilter.value;
+        await ticketServiceCrudRef.value.reload();
+    }
+);
+
+onMounted(async () => await getDefaultTaxClass());
+
+const createRefund = async () => {
+    try {
+        if (!selected.value.length) return;
+
+        const params = {
+            servicesIds: selected.value.map((s) => +s.ticketFk),
+            withWarehouse: false,
+            negative: true,
+        };
+        const { data } = await axios.post('Sales/clone', params);
+        const [refundTicket] = data;
+        notify(
+            t('service.createRefundSuccess', {
+                ticketId: refundTicket.id,
+            }),
+            'positive'
+        );
+        router.push({ name: 'TicketSale', params: { id: refundTicket.id } });
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getDefaultTaxClass = async () => {
+    try {
+        let filter = {
+            where: { code: 'G' },
+        };
+        const { data } = await axios.get('TaxClasses/findOne', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        defaultTaxClass.value = data;
+        console.log('defaultTaxClass', defaultTaxClass.value);
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const columns = computed(() => [
+    {
+        name: 'description',
+        label: t('service.description'),
+        field: (row) => row.ticketServiceTypeFk,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'quantity',
+        label: t('service.quantity'),
+        field: (row) => row.quantity,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'price',
+        label: t('service.price'),
+        field: (row) => row.price,
+        sortable: true,
+        align: 'left',
+    },
+]);
+</script>
+
+<template>
+    <FetchData
+        ref="ticketServiceTypeFetchRef"
+        @on-fetch="(data) => (ticketServiceOptions = data)"
+        auto-load
+        url="TicketServiceTypes"
+    />
+    <CrudModel
+        ref="ticketServiceCrudRef"
+        data-key="TicketService"
+        url="TicketServices"
+        model="TicketService"
+        :filter="crudModelFilter"
+        :data-required="crudModelRequiredData"
+        auto-load
+        v-model:selected="selected"
+    >
+        <template #moreBeforeActions>
+            <QBtn
+                color="primary"
+                :label="t('service.pay')"
+                :disabled="!selected.length"
+                @click.stop="createRefund()"
+            />
+        </template>
+        <template #body="{ rows }">
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="multiple"
+                v-model:selected="selected"
+                table-header-class="text-left"
+            >
+                <template #body-cell-description="{ row, col }">
+                    <QTd auto-width>
+                        <VnSelectDialog
+                            :label="col.label"
+                            v-model="row.ticketServiceTypeFk"
+                            :options="ticketServiceOptions"
+                            option-label="name"
+                            option-value="id"
+                            hide-selected
+                        >
+                            <template #form>
+                                <TicketCreateServiceType
+                                    @on-data-saved="ticketServiceTypeFetchRef.fetch()"
+                                />
+                            </template>
+                        </VnSelectDialog>
+                    </QTd>
+                </template>
+                <template #body-cell-quantity="{ row, col }">
+                    <QTd auto-width>
+                        <VnInput
+                            :label="col.label"
+                            v-model.number="row.quantity"
+                            type="number"
+                            min="0"
+                            :info="t('service.quantityInfo')"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-price="{ row, col }">
+                    <QTd auto-width>
+                        <VnInput
+                            :label="col.label"
+                            v-model.number="row.price"
+                            type="number"
+                            min="0"
+                        />
+                    </QTd>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn fab color="primary" icon="add" @click="ticketServiceCrudRef.insert()" />
+    </QPageSticky>
+</template>
diff --git a/src/pages/Ticket/Card/TicketTracking.vue b/src/pages/Ticket/Card/TicketTracking.vue
new file mode 100644
index 000000000..2ddb278fa
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketTracking.vue
@@ -0,0 +1,121 @@
+<script setup>
+import { ref, computed, watch, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import TicketCreateTracking from './TicketCreateTracking.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { toDateTimeFormat } from 'src/filters/date.js';
+
+const route = useRoute();
+const { t } = useI18n();
+const createTrackingDialogRef = ref(null);
+const paginateRef = ref(null);
+
+watch(
+    () => route.params.id,
+    async (val) => {
+        paginateFilter.where.ticketFk = val;
+        paginateRef.value.fetch();
+    }
+);
+
+const paginateFilter = reactive({
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['id', 'name'],
+                include: {
+                    relation: 'worker',
+                    scope: {
+                        fields: ['id'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'state',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+
+    order: ['created DESC'],
+    where: {
+        ticketFk: route.params.id,
+    },
+});
+
+const columns = computed(() => [
+    {
+        label: t('tracking.state'),
+        name: 'state',
+        field: 'state',
+        align: 'left',
+        format: (val) => val.name,
+    },
+    {
+        label: t('tracking.worker'),
+        name: 'worker',
+        align: 'left',
+    },
+    {
+        label: t('tracking.created'),
+        name: 'created',
+        field: 'created',
+        align: 'left',
+        format: (val) => toDateTimeFormat(val),
+    },
+]);
+
+const openCreateModal = () => createTrackingDialogRef.value.show();
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <VnPaginate
+            ref="paginateRef"
+            data-key="TicketTracking"
+            :filter="paginateFilter"
+            url="TicketTrackings"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :no-data-label="t('globals.noResults')"
+                >
+                    <template #body-cell-worker="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.user?.name }}
+                                <WorkerDescriptorProxy :id="row.user?.worker?.id" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+        <QDialog
+            ref="createTrackingDialogRef"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <TicketCreateTracking @on-request-created="paginateRef.fetch()" />
+        </QDialog>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
+            <QTooltip class="text-no-wrap">
+                {{ t('tracking.addState') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Ticket/Card/TicketVolume.vue b/src/pages/Ticket/Card/TicketVolume.vue
new file mode 100644
index 000000000..93da31e53
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketVolume.vue
@@ -0,0 +1,153 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { dashIfEmpty } from 'src/filters';
+import axios from 'axios';
+
+const route = useRoute();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const salesRef = ref(null);
+
+watch(
+    () => route.params.id,
+    async () => {
+        await nextTick();
+        salesRef.value?.fetch();
+    }
+);
+
+const salesFilter = computed(() => ({
+    include: { relation: 'item' },
+    order: 'concept',
+    where: { ticketFk: route.params.id },
+    limit: 20,
+}));
+
+const sales = ref([]);
+const packingTypeVolume = ref([]);
+const rows = computed(() => sales.value);
+
+const columns = computed(() => [
+    {
+        label: t('volume.item'),
+        name: 'item',
+        align: 'left',
+    },
+    {
+        label: t('volume.description'),
+        name: 'description',
+        align: 'left',
+    },
+    {
+        label: t('volume.packingType'),
+        name: 'quantity',
+        field: (row) => row.item.itemPackingTypeFk,
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('volume.quantity'),
+        name: 'quantity',
+        field: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('volume.volumeQuantity'),
+        name: 'quantity',
+        field: (row) => row.saleVolume?.volume,
+        align: 'left',
+    },
+]);
+
+const applyVolumes = async (salesData) => {
+    try {
+        if (!salesData.length) return;
+
+        sales.value = salesData;
+        const ticket = sales.value[0].ticketFk;
+        const { data } = await axios.get(`Tickets/${ticket}/getVolume`);
+        const volumes = new Map(data.saleVolume.map((volume) => [volume.saleFk, volume]));
+
+        sales.value.forEach((sale) => {
+            sale.saleVolume = volumes.get(sale.id);
+        });
+
+        packingTypeVolume.value = data.packingTypeVolume;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(() => {
+    stateStore.rightDrawer = true;
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        ref="salesRef"
+        url="sales"
+        :filter="salesFilter"
+        @on-fetch="(data) => applyVolumes(data)"
+        auto-load
+    />
+    <RightMenu v-if="packingTypeVolume.length">
+        <template #right-panel>
+            <QCard
+                v-for="(packingType, index) in packingTypeVolume"
+                :key="index"
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('volume.type') }}:
+                        {{ dashIfEmpty(packingType.description) }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span> {{ t('volume.volume') }}: {{ packingType.volume }} </span>
+                </QCardSection>
+            </QCard>
+        </template>
+    </RightMenu>
+    <QTable
+        :rows="rows"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        :no-data-label="t('globals.noResults')"
+    >
+        <template #body-cell-item="{ row }">
+            <QTd>
+                <QBtn flat color="primary">
+                    {{ row.itemFk }}
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QBtn>
+            </QTd>
+        </template>
+        <template #body-cell-description="{ row }">
+            <QTd>
+                <div class="column">
+                    <span>{{ row.item.name }}</span>
+                    <span class="color-vn-label">{{ row.item.subName }}</span>
+                    <FetchedTags :item="row.item" :max-length="6" />
+                </div>
+            </QTd>
+        </template>
+    </QTable>
+</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 2c648e7f2..39aed4af7 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -1,3 +1,19 @@
+card:
+    search: Search tickets
+    searchInfo: You can search by ticket id or alias
+volume:
+    item: Item
+    description: Description
+    packingType: Packing Type
+    quantity: Quantity
+    volumeQuantity: m³ per quantity
+    type: Type
+    volume: Volume
+ticketNotes:
+    observationType: Observation type
+    description: Description
+    removeNote: Remove note
+    addNote: Add note
 ticketSale:
     id: Id
     visible: Visible
@@ -113,9 +129,6 @@ basicData:
     negativesConfirmMessage: Negatives are going to be generated, are you sure you want to advance all the lines?
     chooseAnOption: Choose an option
     unroutedTicket: The ticket has been unrouted
-card:
-    search: Search tickets
-    searchInfo: You can search by ticket id or alias
 purchaseRequest:
     id: Id
     description: Description
@@ -136,3 +149,18 @@ weeklyTickets:
     salesperson: Salesperson
     search: Search weekly tickets
     searchInfo: Search weekly tickets by id or client id
+service:
+    pay: Pay
+    description: Description
+    quantity: Quantity
+    price: Price
+    removeService: Remove service
+    newService: New service type
+    addService: Add service
+    quantityInfo: To create services with negative amounts mark the service on the source ticket and press the pay button.
+    createRefundSuccess: 'The following refund ticket have been created: { ticketId }'
+tracking:
+    state: State
+    worker: Worker
+    created: Created
+    addState: Add state
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 3ce4c0545..d5b50efc5 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,6 +1,34 @@
+service:
+    pay: Abonar
+    description: Descripción
+    quantity: Cantidad
+    price: Precio
+    removeService: Quitar servicio
+    newService: Nuevo tipo de servicio
+    addService: Añadir servicio
+    quantityInfo: Para crear sevicios con cantidades negativas marcar servicio en el ticket origen y apretar el boton abonar.
+    createRefundSuccess: 'Se ha creado siguiente ticket de abono: { ticketId }'
+tracking:
+    state: Estado
+    worker: Trabajador
+    created: Fecha creación
+    addState: Añadir estado
 card:
     search: Buscar tickets
     searchInfo: Buscar tickets por identificador o alias
+volume:
+    item: Artículo
+    description: Descripción
+    packingType: Encajado
+    quantity: Cantidad
+    volumeQuantity: m³ por cantidad
+    type: Tipo
+    volume: Volumen
+ticketNotes:
+    observationType: Tipo de observación
+    description: Descripción
+    removeNote: Quitar nota
+    addNote: Añadir nota
 purchaseRequest:
     Id: Id
     description: Descripción
@@ -112,8 +140,6 @@ futureTickets:
     moveTicketSuccess: Tickets movidos correctamente
     searchInfo: Buscar tickets por fecha
     futureTicket: Tickets a futuro
-Search ticket: Buscar tickets
-You can search by ticket id or alias: Puedes buscar por id o alias del ticket
 ticketSale:
     id: Id
     visible: Visible
@@ -138,3 +164,5 @@ ticketSale:
     shipped: F. Envío
     agency: Agencia
     address: Consignatario
+Search ticket: Buscar tickets
+You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 81ca405ee..1e635470b 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -19,6 +19,10 @@ export default {
             'TicketSale',
             'TicketLog',
             'TicketPurchaseRequest',
+            'TicketService',
+            'TicketTracking',
+            'TicketVolume',
+            'TicketNotes',
         ],
     },
     children: [
@@ -29,8 +33,8 @@ export default {
             redirect: { name: 'TicketList' },
             children: [
                 {
-                    name: 'TicketList',
                     path: 'list',
+                    name: 'TicketList',
                     meta: {
                         title: 'list',
                         icon: 'view_list',
@@ -38,8 +42,8 @@ export default {
                     component: () => import('src/pages/Ticket/TicketList.vue'),
                 },
                 {
-                    name: 'TicketCreate',
                     path: 'create',
+                    name: 'TicketCreate',
                     meta: {
                         title: 'createTicket',
                         icon: 'vn:ticketAdd',
@@ -48,8 +52,8 @@ export default {
                     component: () => import('src/pages/Ticket/TicketCreate.vue'),
                 },
                 {
-                    name: 'TicketWeekly',
                     path: 'weekly',
+                    name: 'TicketWeekly',
                     meta: {
                         title: 'weeklyTickets',
                         icon: 'access_time',
@@ -57,8 +61,8 @@ export default {
                     component: () => import('src/pages/Ticket/TicketWeekly.vue'),
                 },
                 {
-                    name: 'TicketFuture',
                     path: 'future',
+                    name: 'TicketFuture',
                     meta: {
                         title: 'futureTickets',
                         icon: 'keyboard_double_arrow_right',
@@ -66,8 +70,8 @@ export default {
                     component: () => import('src/pages/Ticket/TicketFuture.vue'),
                 },
                 {
-                    name: 'TicketAdvance',
                     path: 'advance',
+                    name: 'TicketAdvance',
                     meta: {
                         title: 'ticketAdvance',
                         icon: 'keyboard_double_arrow_left',
@@ -83,8 +87,8 @@ export default {
             redirect: { name: 'TicketSummary' },
             children: [
                 {
-                    name: 'TicketSummary',
                     path: 'summary',
+                    name: 'TicketSummary',
                     meta: {
                         title: 'summary',
                         icon: 'launch',
@@ -92,8 +96,8 @@ export default {
                     component: () => import('src/pages/Ticket/Card/TicketSummary.vue'),
                 },
                 {
-                    name: 'TicketBasicData',
                     path: 'basic-data',
+                    name: 'TicketBasicData',
                     meta: {
                         title: 'basicData',
                         icon: 'vn:settings',
@@ -102,8 +106,8 @@ export default {
                         import('src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue'),
                 },
                 {
-                    name: 'TicketSale',
                     path: 'sale',
+                    name: 'TicketSale',
                     meta: {
                         title: 'sale',
                         icon: 'vn:lines',
@@ -120,6 +124,15 @@ export default {
                     component: () =>
                         import('src/pages/Ticket/Card/TicketPurchaseRequest.vue'),
                 },
+                {
+                    path: 'tracking',
+                    name: 'TicketTracking',
+                    meta: {
+                        title: 'tracking',
+                        icon: 'vn:eye',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketTracking.vue'),
+                },
                 {
                     path: 'log',
                     name: 'TicketLog',
@@ -147,6 +160,34 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+
+                {
+                    path: 'service',
+                    name: 'TicketService',
+                    meta: {
+                        title: 'services',
+                        icon: 'vn:services',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketService.vue'),
+                },
+                {
+                    path: 'volume',
+                    name: 'TicketVolume',
+                    meta: {
+                        title: 'volume',
+                        icon: 'vn:volume',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketVolume.vue'),
+                },
+                {
+                    path: 'observation',
+                    name: 'TicketNotes',
+                    meta: {
+                        title: 'notes',
+                        icon: 'vn:notes',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketNotes.vue'),
+                },
             ],
         },
     ],
diff --git a/test/cypress/integration/invoiceIn/invoiceInList.spec.js b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
index 5e2a5aa4c..b2fa10d52 100644
--- a/test/cypress/integration/invoiceIn/invoiceInList.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
@@ -5,12 +5,11 @@ describe('InvoiceInList', () => {
         ':nth-child(1) > :nth-child(1) > .justify-between > .flex > .q-chip > .q-chip__content';
     const firstDetailBtn = '.q-card:nth-child(1) .q-btn:nth-child(2)';
     const summaryHeaders = '.summaryBody .header-link';
-    const screen = '.q-page-container > .q-drawer-container > .fullscreen';
 
     beforeEach(() => {
+        cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit(`/#/invoice-in/list`);
-        cy.get(screen).click();
     });
 
     it('should redirect on clicking a invoice', () => {
diff --git a/test/cypress/integration/parking/parkingList.spec.js b/test/cypress/integration/parking/parkingList.spec.js
index 3ac46f8cd..b78a660d1 100644
--- a/test/cypress/integration/parking/parkingList.spec.js
+++ b/test/cypress/integration/parking/parkingList.spec.js
@@ -8,9 +8,9 @@ describe('ParkingList', () => {
     const summaryHeader = '.summaryBody .header';
 
     beforeEach(() => {
+        cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit(`/#/parking/list`);
-        cy.closeSideMenu();
     });
 
     it('should redirect on clicking a parking', () => {
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 055cb8021..240a97908 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -221,10 +221,6 @@ Cypress.Commands.add('openLeftMenu', (element) => {
     if (element) cy.waitForElement(element);
     cy.get('.q-toolbar > .q-btn--round.q-btn--dense > .q-btn__content > .q-icon').click();
 });
-Cypress.Commands.add('closeSideMenu', (element) => {
-    if (element) cy.waitForElement(element);
-    cy.get('.fullscreen.q-drawer__backdrop:not(.hidden)').click();
-});
 
 Cypress.Commands.add('clearSearchbar', (element) => {
     if (element) cy.waitForElement(element);