Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 7283-itemSectionsMigration

src/components/common/VnLog.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, onUnmounted } from 'vue';
+import { ref, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
@@ -19,6 +19,7 @@ const stateStore = useStateStore();
 const validationsStore = useValidator();
 const { models } = validationsStore;
 const route = useRoute();
+const router = useRouter();
 const { t } = useI18n();
 const props = defineProps({
     model: {
@@ -381,6 +382,13 @@ setLogTree();
 onUnmounted(() => {
     stateStore.rightDrawer = false;
 });
+
+watch(
+    () => router.currentRoute.value.params.id,
+    () => {
+        applyFilter();
+    }
+);
 </script>
 <template>
     <FetchData

src/components/common/VnSelect.vue

@@ -49,6 +49,10 @@ const $props = defineProps({
         type: Array,
         default: null,
     },
+    include: {
+        type: [Object, Array],
+        default: null,
+    },
     where: {
         type: Object,
         default: null,
@@ -142,7 +146,7 @@ function filter(val, options) {
 async function fetchFilter(val) {
     if (!$props.url || !dataRef.value) return;
 
-    const { fields, sortBy, limit } = $props;
+    const { fields, include, sortBy, limit } = $props;
     const key =
         optionFilterValue.value ??
         (new RegExp(/\d/g).test(val)
@@ -153,7 +157,7 @@ async function fetchFilter(val) {
         ? { [key]: { like: `%${val}%` } }
         : { [key]: val };
     const where = { ...(val ? defaultWhere : {}), ...$props.where };
-    const fetchOptions = { where, limit };
+    const fetchOptions = { where, include, limit };
     if (fields) fetchOptions.fields = fields;
     if (sortBy) fetchOptions.order = sortBy;
     return dataRef.value.fetch(fetchOptions);

src/pages/Customer/Card/CustomerBalance.vue

@@ -17,7 +17,6 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
 import VnFilter from 'components/VnTable/VnFilter.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
 
 import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
@@ -73,17 +72,6 @@ const companyFilterColumn = {
         },
     },
     visible: false,
-    create: true,
-};
-const referenceColumn = {
-    align: 'left',
-    name: 'description',
-    label: t('Reference'),
-};
-const onlyCreate = {
-    visible: false,
-    columnFilter: false,
-    create: true,
 };
 
 const columns = computed(() => [
@@ -93,10 +81,6 @@ const columns = computed(() => [
         label: t('Date'),
         format: ({ payed }) => toDate(payed),
         cardVisible: true,
-        create: true,
-        columnCreate: {
-            component: 'date',
-        },
     },
     {
         align: 'left',
@@ -120,21 +104,18 @@ const columns = computed(() => [
         },
         cardVisible: true,
     },
-    { ...referenceColumn, isTitle: true, class: 'extend' },
+    {
-    companyFilterColumn,
+        align: 'left',
+        name: 'description',
+        label: t('Reference'),
+        isTitle: true,
+        class: 'extend',
+    },
     {
         align: 'right',
         name: 'bankFk',
         label: t('Bank'),
         cardVisible: true,
-        create: true,
-    },
-    {
-        align: 'right',
-        name: 'amountPaid',
-        label: t('Amount'),
-        component: 'number',
-        ...onlyCreate,
     },
     {
         align: 'right',
@@ -163,7 +144,6 @@ const columns = computed(() => [
         label: t('Conciliated'),
         cardVisible: true,
     },
-    { ...referenceColumn, ...onlyCreate },
     {
         align: 'left',
         name: 'tableActions',
@@ -194,8 +174,7 @@ onBeforeMount(() => {
     companyId.value = user.value.companyFk;
 });
 
-async function getClientRisk(reload = false) {
+async function getClientRisk() {
-    if (reload || !clientRisk.value?.length) {
     const { data } = await axios.get(`clientRisks`, {
         params: {
             filter: JSON.stringify({
@@ -205,7 +184,6 @@ async function getClientRisk(reload = false) {
         },
     });
     clientRisk.value = data;
-    }
     return clientRisk.value;
 }
 
@@ -230,14 +208,13 @@ async function onFetch(data) {
     balances.value = data;
 }
 
-// BORRAR COMPONENTE Y HACER CON VNTABLE
 const showNewPaymentDialog = () => {
     quasar.dialog({
         component: CustomerNewPayment,
         componentProps: {
             companyId: companyId.value,
             totalCredit: clientRisk.value[0]?.amount,
-            promise: getClientRisk(true),
+            promise: () => tableRef.value.reload(),
         },
     });
 };
@@ -282,17 +259,6 @@ const showBalancePdf = ({ id }) => {
         :is-editable="false"
         :column-search="false"
         @on-fetch="onFetch"
-        :create="{
-            urlCreate: `Clients/${route.params.id}/createReceipt`,
-            mapper: (data) => {
-                data.companyFk = data.companyId;
-                delete data.companyId;
-                return data;
-            },
-            title: t('New payment'),
-            onDataSaved: () => tableRef.reload(),
-            formInitialData: { companyId },
-        }"
         auto-load
     >
         <template #column-balance="{ rowIndex }">
@@ -314,6 +280,7 @@ const showBalancePdf = ({ id }) => {
                         value != row.description &&
                         axios.patch(`Receipts/${row.id}`, { description: value })
                 "
+                auto-save
             >
                 <VnInput
                     v-model="scope.value"
@@ -323,25 +290,13 @@ const showBalancePdf = ({ id }) => {
                 />
             </QPopupEdit>
         </template>
-        <template #column-create-bankFk="{ data, columnName, label }">
-            <VnSelect
-                url="Accountings"
-                :label="label"
-                :limit="0"
-                option-label="bank"
-                sort-by="id"
-                v-model="data[columnName]"
-            >
-                <template #option="scope">
-                    <QItem v-bind="scope.itemProps">
-                        <QItemLabel>
-                            #{{ scope.opt?.id }}: {{ scope.opt?.bank }}
-                        </QItemLabel>
-                    </QItem>
-                </template>
-            </VnSelect>
-        </template>
     </VnTable>
+    <QPageSticky :offset="[18, 18]" style="z-index: 2">
+        <QBtn @click.stop="showNewPaymentDialog()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New payment') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
 
 <i18n>

src/pages/Customer/components/CustomerNewPayment.vue

@@ -2,18 +2,24 @@
 import { onBeforeMount, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import axios from 'axios';
 
 import { useDialogPluginComponent } from 'quasar';
 
+import { usePrintService } from 'composables/usePrintService';
+import useNotify from 'src/composables/useNotify.js';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInputNumber from 'components/common/VnInputNumber.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const route = useRoute();
+const { notify } = useNotify();
+const { sendEmail, openReport } = usePrintService();
 const { dialogRef } = useDialogPluginComponent();
 
 const $props = defineProps({
@@ -27,7 +33,7 @@ const $props = defineProps({
     },
     promise: {
         type: Function,
-        required: true,
+        default: null,
     },
 });
 
@@ -36,11 +42,12 @@ const urlCreate = ref([]);
 const companyOptions = ref([]);
 const bankOptions = ref([]);
 const clientFindOne = ref([]);
-const deliveredAmount = ref(null);
-const amountToReturn = ref(null);
 const viewReceipt = ref();
-const sendEmail = ref(false);
+const shouldSendEmail = ref(false);
-const isLoading = ref(false);
+const maxAmount = ref();
+const accountingType = ref({});
+const isCash = ref(false);
+const formModelRef = ref(false);
 
 const filterBanks = {
     fields: ['id', 'bank', 'accountingTypeFk'],
@@ -67,87 +74,123 @@ onBeforeMount(() => {
     urlCreate.value = `Clients/${route.params.id}/createReceipt`;
 });
 
-const setPaymentType = (value) => {
+function setPaymentType(accounting) {
-    // if (id === 1) initialData.description = 'Credit card';
+    if (!accounting) return;
-    // if (id === 2) initialData.description = 'Cash';
+    accountingType.value = accounting.accountingType;
-    // if (id === 3 || id === 3117) initialData.description = '';
+
-    // if (id === 4) initialData.description = 'Transfer';
+    initialData.description = [];
-    // const CASH_CODE = 2;
+    initialData.payed = Date.vnNew();
-    // // const CASH_CODE = 2
+    isCash.value = accountingType.value.code == 'cash';
-    // if (!value) return;
+    viewReceipt.value = isCash.value;
-    // const accountingType = CASH_CODE;
+    if (accountingType.value.daysInFuture)
-    // initialData.description = '';
+        initialData.payed.setDate(
-    // viewReceipt.value = value == CASH_CODE;
+            initialData.payed.getDate() + accountingType.value.daysInFuture
-    // if (accountingType.code == 'compensation') this.receipt.description = '';
+        );
-    // else {
+    maxAmount.value = accountingType.value && accountingType.value.maxAmount;
-    //     if (
+
-    //         accountingType.receiptDescription != null &&
+    if (accountingType.value.code == 'compensation')
-    //         accountingType.receiptDescription != ''
+        return (initialData.description = '');
-    //     )
+    if (accountingType.value.receiptDescription)
-    //         this.receipt.description.push(accountingType.receiptDescription);
+        initialData.description.push(accountingType.value.receiptDescription);
-    //     if (this.originalDescription)
+    if (initialData.description) initialData.description.push(initialData.description);
-    //         this.receipt.description.push(this.originalDescription);
+
-    //     this.receipt.description = this.receipt.description.join(', ');
+    initialData.description = initialData.description.join(', ');
-    // }
+}
-    // this.maxAmount = accountingType && accountingType.maxAmount;
-    // this.receipt.payed = Date.vnNew();
-    // if (accountingType.daysInFuture)
-    //     this.receipt.payed.setDate(
-    //         this.receipt.payed.getDate() + accountingType.daysInFuture
-    //     );
-};
 
 const calculateFromAmount = (event) => {
-    amountToReturn.value = parseFloat(event) * -1 + parseFloat(deliveredAmount.value);
+    initialData.amountToReturn =
+        parseFloat(initialData.deliveredAmount) + parseFloat(event) * -1;
 };
 
 const calculateFromDeliveredAmount = (event) => {
-    amountToReturn.value = parseFloat($props.totalCredit) * -1 + parseFloat(event);
+    initialData.amountToReturn = parseFloat(event) - initialData.amountPaid;
 };
 
-const setClientEmail = (data) => {
+function onBeforeSave(data) {
-    initialData.email = data.email;
+    const exceededAmount = data.amountPaid > maxAmount.value;
-};
+    if (isCash.value && exceededAmount)
+        return notify(t('Amount exceeded', { maxAmount: maxAmount.value }), 'negative');
 
-const onDataSaved = async () => {
+    if (isCash.value && shouldSendEmail.value && !data.email)
-    isLoading.value = true;
+        return notify(t('There is no assigned email for this client'), 'negative');
-    if ($props.promise) {
+
+    data.bankFk = data.bankFk.id;
+    return data;
+}
+
+async function onDataSaved(formData, { id }) {
     try {
-            await $props.promise();
+        if (shouldSendEmail.value && isCash.value)
+            await sendEmail(`Receipts/${id}/receipt-email`, {
+                recipient: formData.email,
+            });
+
+        if (viewReceipt.value) openReport(`Receipts/${id}/receipt-pdf`);
     } finally {
-            isLoading.value = false;
+        if ($props.promise) $props.promise();
         if (closeButton.value) closeButton.value.click();
     }
+}
+
+async function accountShortToStandard({ target: { value } }) {
+    if (!value) return (initialData.description = '');
+    initialData.compensationAccount = value.replace('.', '0'.repeat(11 - value.length));
+    const params = { bankAccount: initialData.compensationAccount };
+    const { data } = await axios(`Clients/getClientOrSupplierReference`, { params });
+    if (!data.clientId) {
+        initialData.description = t('Supplier Compensation Reference', {
+            supplierId: data.supplierId,
+            supplierName: data.supplierName,
+        });
+        return;
     }
-};
+    initialData.description = t('Client Compensation Reference', {
+        clientId: data.clientId,
+        clientName: data.clientName,
+    });
+}
+
+async function getAmountPaid() {
+    const filter = {
+        where: {
+            clientFk: route.params.id,
+            companyFk: initialData.companyFk,
+        },
+    };
+
+    const { data } = await axios(`ClientRisks`, {
+        params: { filter: JSON.stringify(filter) },
+    });
+    initialData.amountPaid = (data?.length && data[0].amount) || undefined;
+}
 </script>
 
 <template>
-    <QDialog ref="dialogRef">
+    <QDialog ref="dialogRef" persistent>
-        <fetch-data
+        <FetchData
             @on-fetch="(data) => (companyOptions = data)"
             auto-load
             url="Companies"
         />
-        <fetch-data
+        <FetchData
             :filter="filterBanks"
             @on-fetch="(data) => (bankOptions = data)"
             auto-load
             url="Accountings"
         />
-        <fetch-data
+        <FetchData
             :filter="filterClientFindOne"
-            @on-fetch="setClientEmail"
+            @on-fetch="({ email }) => (initialData.email = email)"
             auto-load
             url="Clients/findOne"
         />
-
         <FormModel
-            :default-actions="false"
+            ref="formModelRef"
             :form-initial-data="initialData"
             :observe-form-changes="false"
             :url-create="urlCreate"
-            @on-data-saved="onDataSaved()"
+            :mapper="onBeforeSave"
+            @on-data-saved="onDataSaved"
         >
             <template #form="{ data, validate }">
                 <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
@@ -171,19 +214,22 @@ const onDataSaved = async () => {
                         option-label="code"
                         option-value="id"
                         v-model="data.companyFk"
+                        @update:model-value="getAmountPaid()"
                     />
                 </VnRow>
-
                 <VnRow>
                     <VnSelect
                         :label="t('Bank')"
-                        :options="bankOptions"
-                        :required="true"
-                        @update:model-value="setPaymentType($event)"
-                        hide-selected
-                        option-label="bank"
-                        option-value="id"
                         v-model="data.bankFk"
+                        url="Accountings"
+                        option-label="bank"
+                        :include="{ relation: 'accountingType' }"
+                        sort-by="id"
+                        :limit="0"
+                        @update:model-value="
+                            (value, options) => setPaymentType(value, options)
+                        "
+                        :emit-value="false"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -200,22 +246,21 @@ const onDataSaved = async () => {
                         :required="true"
                         @update:model-value="calculateFromAmount($event)"
                         clearable
-                        type="number"
                         v-model.number="data.amountPaid"
                     />
                 </VnRow>
-
+                <div v-if="data.bankFk?.accountingType?.code == 'compensation'">
-                <div class="text-h6" v-if="data.bankFk === 3 || data.bankFk === 3117">
+                    <div class="text-h6">
                         {{ t('Compensation') }}
                     </div>
-
                     <VnRow>
-                    <div class="col" v-if="data.bankFk === 3 || data.bankFk === 3117">
                         <VnInput
                             :label="t('Compensation account')"
                             clearable
                             v-model="data.compensationAccount"
+                            @blur="accountShortToStandard"
                         />
+                    </VnRow>
                 </div>
                 <VnInput
                     :label="t('Reference')"
@@ -223,36 +268,32 @@ const onDataSaved = async () => {
                     clearable
                     v-model="data.description"
                 />
-                </VnRow>
 
-                <div class="q-mt-lg" v-if="data.bankFk === 2">
+                <div v-if="data.bankFk?.accountingType?.code == 'cash'">
                     <div class="text-h6">{{ t('Cash') }}</div>
                     <VnRow>
-                        <VnInput
+                        <VnInputNumber
                             :label="t('Delivered amount')"
                             @update:model-value="calculateFromDeliveredAmount($event)"
                             clearable
-                            type="number"
+                            v-model="data.deliveredAmount"
-                            v-model="deliveredAmount"
                         />
-                        <VnInput
+                        <VnInputNumber
                             :label="t('Amount to return')"
-                            clearable
                             disable
-                            type="number"
+                            v-model="data.amountToReturn"
-                            v-model="amountToReturn"
                         />
                     </VnRow>
                     <VnRow>
-                        <QCheckbox v-model="viewReceipt" />
+                        <QCheckbox v-model="viewReceipt" :label="t('View recipt')" />
-                        <QCheckbox v-model="sendEmail" />
+                        <QCheckbox v-model="shouldSendEmail" :label="t('Send email')" />
                     </VnRow>
                 </div>
                 <div class="q-mt-lg row justify-end">
                     <QBtn
-                        :disabled="isLoading"
+                        :disabled="formModelRef.isLoading"
                         :label="t('globals.cancel')"
-                        :loading="isLoading"
+                        :loading="formModelRef.isLoading"
                         class="q-ml-sm"
                         color="primary"
                         flat
@@ -260,9 +301,9 @@ const onDataSaved = async () => {
                         v-close-popup
                     />
                     <QBtn
-                        :disabled="isLoading"
+                        :disabled="formModelRef.isLoading"
                         :label="t('globals.save')"
-                        :loading="isLoading"
+                        :loading="formModelRef.isLoading"
                         color="primary"
                         type="submit"
                     />
@@ -287,4 +328,8 @@ es:
     Send email: Enviar correo
     Compensation: Compensación
     Compensation account: Cuenta para compensar
+    Supplier Compensation Reference: ({supplierId}) Ntro Proveedor {supplierName}
+    Client Compensation Reference: ({clientId}) Ntro Cliente {clientName}
+    There is no assigned email for this client: No hay correo asignado para este cliente
+    Amount exceeded: Según ley contra el fraude no se puede recibir cobros por importe igual o superior a {maxAmount}
 </i18n>

src/pages/Entry/EntryBuysTableDialog.vue

@@ -20,11 +20,17 @@ const $props = defineProps({
 const entityId = computed(() => $props.id || route.params.id);
 
 const entriesTableColumns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        field: 'id',
+        label: t('globals.id'),
+    },
     {
         align: 'left',
         name: 'itemFk',
         field: 'itemFk',
-        label: t('globals.id'),
+        label: t('entry.latestBuys.tableVisibleColumns.itemFk'),
     },
     {
         align: 'left',
@@ -76,11 +82,11 @@ const entriesTableColumns = computed(() => [
             </QCardSection>
             <QCardActions align="right">
                 <QBtn
-                    :label="t('Print buys')"
+                    :label="t('printLabels')"
                     color="primary"
                     icon="print"
                     :loading="isLoading"
-                    @click="openReport(`Entries/${entityId}/buy-label`)"
+                    @click="openReport(`Entries/${entityId}/print`)"
                     unelevated
                     autofocus
                 />
@@ -109,6 +115,19 @@ const entriesTableColumns = computed(() => [
                                     <QTd v-for="col in props.cols" :key="col.name">
                                         {{ col.value }}
                                     </QTd>
+                                    <QBtn
+                                        icon="print"
+                                        v-if="props.row.stickers > 0"
+                                        :loading="isLoading"
+                                        @click="
+                                            openReport(
+                                                `Entries/${props.row.id}/buy-label`
+                                            )
+                                        "
+                                        unelevated
+                                    >
+                                        <QTooltip>{{ t('printLabel') }}</QTooltip>
+                                    </QBtn>
                                 </QTr>
                             </template>
                         </QTable>

src/pages/Entry/MyEntries.vue

@@ -86,7 +86,7 @@ const columns = computed(() => [
         name: 'tableActions',
         actions: [
             {
-                title: t('printBuys'),
+                title: t('printLabels'),
                 icon: 'print',
                 action: (row) => printBuys(row.id),
             },

src/pages/Entry/locale/en.yml

@@ -10,4 +10,5 @@ landed: Landed
 shipped: Shipped
 fromShipped: Shipped(from)
 toShipped: Shipped(to)
-printBuys: Print buys
+printLabels: Print stickers
+printLabel: Print sticker

src/pages/Entry/locale/es.yml

@@ -14,4 +14,5 @@ landed: F. llegada
 shipped: F. salida
 fromShipped: F. salida(desde)
 toShipped: F. salida(hasta)
-Print buys: Imprimir etiquetas
+printLabels: Imprimir etiquetas
+printLabel: Imprimir etiqueta

src/pages/Item/Card/ItemDescriptor.vue

@@ -48,7 +48,6 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 const regularizeStockFormDialog = ref(null);
-const item = ref(null);
 const available = ref(null);
 const visible = ref(null);
 const _warehouseFk = ref(null);
@@ -131,12 +130,7 @@ const openCloneDialog = async () => {
         :subtitle="data.subtitle"
         :summary="$props.summary"
         :url="`Items/${entityId}/getCard`"
-        @on-fetch="
+        @on-fetch="setData"
-            (data) => {
-                item = data;
-                setData(data);
-            }
-        "
     >
         <template #menu="{}">
             <QItem v-ripple clickable @click="openRegularizeStockForm()">

src/pages/Item/Card/ItemDiary.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { onMounted, computed, onUnmounted, reactive, ref, nextTick } from 'vue';
+import { onMounted, computed, onUnmounted, reactive, ref, nextTick, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
@@ -21,6 +21,7 @@ import axios from 'axios';
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 const stateStore = useStateStore();
 const state = useState();
 
@@ -169,6 +170,14 @@ onMounted(async () => {
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
+
+watch(
+    () => router.currentRoute.value.params.id,
+    (newId) => {
+        itemsBalanceFilter.where.itemFk = newId;
+        itemBalancesRef.value.fetch();
+    }
+);
 </script>
 
 <template>

src/pages/Ticket/Card/TicketSummary.vue

@@ -391,7 +391,7 @@ async function changeState(value) {
                             <QTd>{{ props.row.quantity }}</QTd>
                             <QTd class="description-cell">
                                 <div class="row full-width justify-between">
-                                    {{ props.row.item.name }}
+                                    {{ props.row.concept }}
                                     <div v-if="props.row.item.subName" class="subName">
                                         {{ props.row.item.subName.toUpperCase() }}
                                     </div>

src/pages/Ticket/TicketList.vue

@@ -1,6 +1,7 @@
 <script setup>
 import axios from 'axios';
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters/index';
 import TicketSummary from './Card/TicketSummary.vue';
@@ -10,6 +11,8 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import TicketFilter from './TicketFilter.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -18,6 +21,15 @@ const clientsOptions = ref([]);
 const addressesOptions = ref([]);
 const agenciesOptions = ref([]);
 const selectedClient = ref();
+const stateStore = useStateStore();
+const from = Date.vnNew();
+const to = Date.vnNew();
+to.setDate(to.getDate() + 1);
+
+const userParams = {
+    from: from.toISOString(),
+    to: to.toISOString(),
+};
 
 const columns = computed(() => [
     {
@@ -187,6 +199,8 @@ const fetchAddresses = async (formData) => {
 const getColor = (row) => {
     return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
 };
+
+onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
 <template>
@@ -195,6 +209,11 @@ const getColor = (row) => {
         :label="t('Search ticket')"
         :info="t('You can search by ticket id or alias')"
     />
+    <RightMenu>
+        <template #right-panel>
+            <TicketFilter data-key="Tickets" />
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="Tickets"
@@ -206,7 +225,10 @@ const getColor = (row) => {
             formInitialData: {},
         }"
         default-mode="table"
+        order="id DESC"
         :columns="columns"
+        :user-params="userParams"
+        :right-search="false"
         redirect="ticket"
         auto-load
     >