From baca1281bf572864fab40b43e5e27f26581fb628 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 6 Dec 2023 13:23:32 -0300
Subject: [PATCH 1/3] Input text refactor

---
 src/components/common/SendEmailDialog.vue     |  6 +-
 src/components/common/VnInput.vue             | 51 ++++++++++++++
 src/components/common/VnSmsDialog.vue         | 28 +++-----
 src/components/ui/VnSearchbar.vue             | 10 ++-
 src/pages/Claim/Card/ClaimBasicData.vue       |  8 ++-
 src/pages/Claim/ClaimFilter.vue               | 52 ++++++++++----
 src/pages/Claim/ClaimRmaList.vue              |  9 ++-
 src/pages/Customer/Card/CustomerBasicData.vue | 11 +--
 src/pages/Customer/CustomerFilter.vue         | 70 +++++++++++++------
 src/pages/Customer/CustomerPaymentsFilter.vue | 33 +++++----
 src/pages/InvoiceOut/InvoiceOutFilter.vue     | 34 +++------
 src/pages/InvoiceOut/InvoiceOutGlobalForm.vue | 55 +++++++--------
 .../InvoiceOut/InvoiceOutNegativeBases.vue    | 11 +--
 src/pages/Login/LoginMain.vue                 |  8 ++-
 src/pages/Login/TwoFactor.vue                 |  4 +-
 src/pages/Route/Cmr/CmrFilter.vue             | 22 +++---
 src/pages/Shelving/Card/ShelvingForm.vue      |  8 ++-
 src/pages/Supplier/SupplierCreate.vue         |  7 +-
 src/pages/Ticket/TicketFilter.vue             | 45 +++++++++---
 src/pages/Travel/ExtraCommunity.vue           | 21 +++---
 src/pages/Travel/ExtraCommunityFilter.vue     | 43 ++++++------
 src/pages/Travel/TravelCreate.vue             | 11 +--
 src/pages/Travel/TravelFilter.vue             | 31 ++++----
 src/pages/Wagon/Type/WagonTypeCreate.vue      | 11 +--
 src/pages/Wagon/WagonCreate.vue               |  9 ++-
 src/pages/Worker/WorkerFilter.vue             | 36 ++++++----
 26 files changed, 390 insertions(+), 244 deletions(-)
 create mode 100644 src/components/common/VnInput.vue

diff --git a/src/components/common/SendEmailDialog.vue b/src/components/common/SendEmailDialog.vue
index ab83c0949..9bfda9614 100644
--- a/src/components/common/SendEmailDialog.vue
+++ b/src/components/common/SendEmailDialog.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { ref } from 'vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
 
 const props = defineProps({
     data: {
@@ -51,7 +53,7 @@ async function confirm() {
                 {{ t('The notification will be sent to the following address') }}
             </QCardSection>
             <QCardSection class="q-pt-none">
-                <QInput dense v-model="address" rounded outlined autofocus />
+                <VnInput v-model="address" is-outlined autofocus />
             </QCardSection>
             <QCardActions align="right">
                 <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
new file mode 100644
index 000000000..e3040a698
--- /dev/null
+++ b/src/components/common/VnInput.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:modelValue', 'update:options']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: null,
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+</script>
+
+<template>
+    <QInput
+        ref="vnInputRef"
+        v-model="value"
+        v-bind="{ ...$attrs, ...styleAttrs }"
+        type="text"
+    >
+        <template v-if="$slots.prepend" #prepend>
+            <slot name="prepend" />
+        </template>
+        <template v-if="$slots.append" #append>
+            <slot name="append" />
+        </template>
+    </QInput>
+</template>
diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index 7f019927e..8bb8c3858 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const { t, availableLocales } = useI18n();
@@ -117,24 +119,10 @@ async function send() {
                 />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <QInput
-                    :label="t('Phone')"
-                    v-model="phone"
-                    rounded
-                    outlined
-                    autofocus
-                    dense
-                />
+                <VnInput :label="t('Phone')" v-model="phone" is-outlined />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <QInput
-                    :label="t('Subject')"
-                    v-model="subject"
-                    rounded
-                    outlined
-                    autofocus
-                    dense
-                />
+                <VnInput v-model="subject" :label="t('Subject')" is-outlined />
             </QCardSection>
             <QCardSection class="q-mb-md" q-input>
                 <QInput
@@ -198,7 +186,7 @@ async function send() {
 en:
     CustomerDefaultLanguage: This customer uses <strong>{locale}</strong> as their default language
     templates:
-        pendingPayment: 'Your order is pending of payment. 
+        pendingPayment: 'Your order is pending of payment.
             Please, enter the website and make the payment with a credit card. Thank you.'
         minAmount: 'A minimum amount of 50€ (VAT excluded) is required for your order 
             { orderId } of { shipped } to receive it without additional shipping costs.'
@@ -215,7 +203,7 @@ es:
     Subject: Asunto
     Message: Mensaje
     templates:
-        pendingPayment: 'Su pedido está pendiente de pago. 
+        pendingPayment: 'Su pedido está pendiente de pago.
             Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
         minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido 
             { orderId } del día { shipped } para recibirlo sin portes adicionales.'
@@ -249,7 +237,7 @@ pt:
     Subject: Assunto
     Message: Mensagem
     templates:
-        pendingPayment: 'Seu pedido está pendente de pagamento. 
+        pendingPayment: 'Seu pedido está pendente de pagamento.
             Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.'
         minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido 
             { orderId } do dia { shipped } para recebê-lo sem custos de envio adicionais.'
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 693d6fce2..3343ba64c 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -1,8 +1,12 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { useArrayData } from 'composables/useArrayData';
 import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'composables/useArrayData';
+
 const quasar = useQuasar();
 
 const props = defineProps({
@@ -86,7 +90,7 @@ async function search() {
 
 <template>
     <QForm @submit="search">
-        <QInput
+        <VnInput
             id="searchbar"
             v-model="searchText"
             :placeholder="props.label"
@@ -113,7 +117,7 @@ async function search() {
                     <QTooltip>{{ props.info }}</QTooltip>
                 </QIcon>
             </template>
-        </QInput>
+        </VnInput>
     </QForm>
 </template>
 
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index ab818704b..f831bcf9d 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -3,10 +3,12 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -101,7 +103,7 @@ const statesFilter = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.client.name"
                         :label="t('claim.basicData.customer')"
                         disable
@@ -190,7 +192,7 @@ const statesFilter = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.rma"
                         :label="t('claim.basicData.returnOfMaterial')"
                         :rules="validate('claim.rma')"
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index ac8f4f0db..0cc20e595 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -33,30 +35,31 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
-                <QItem>
+            <QList dense style="max-width: 256px" class="list">
+                <QItem class="q-my-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
                             lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                                <QIcon name="badge" size="xs"></QIcon> </template
+                        ></VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Client Name')"
                             v-model="params.clientName"
                             lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -71,11 +74,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -90,11 +97,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -109,11 +120,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!states">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -127,6 +142,10 @@ const states = ref();
                             option-label="description"
                             emit-value
                             map-options
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
@@ -155,6 +174,9 @@ const states = ref();
                                 :label="t('Created')"
                                 autofocus
                                 readonly
+                                dense
+                                outlined
+                                rounded
                             >
                                 <template #append>
                                     <QIcon name="event" class="cursor-pointer">
@@ -185,6 +207,12 @@ const states = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:
diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
index 8eac83b1e..3774932e3 100644
--- a/src/pages/Claim/ClaimRmaList.vue
+++ b/src/pages/Claim/ClaimRmaList.vue
@@ -2,10 +2,13 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import { useArrayData } from 'src/composables/useArrayData';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import axios from 'axios';
 
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -65,7 +68,7 @@ async function remove({ id }) {
         <QPageSticky expand position="top" :offset="[16, 16]">
             <QCard class="card q-pa-md">
                 <QForm @submit="submit">
-                    <QInput
+                    <VnInput
                         ref="input"
                         v-model="newRma.code"
                         :label="t('claim.rmaList.code')"
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 47cb6e337..458d50082 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -64,7 +65,7 @@ const filterOptions = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.socialName"
                         :label="t('customer.basicData.socialName')"
                         :rules="validate('client.socialName')"
@@ -87,7 +88,7 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.contact"
                         :label="t('customer.basicData.contact')"
                         :rules="validate('client.contact')"
@@ -95,7 +96,7 @@ const filterOptions = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.email"
                         type="email"
                         :label="t('customer.basicData.email')"
@@ -106,7 +107,7 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.phone"
                         :label="t('customer.basicData.phone')"
                         :rules="validate('client.phone')"
@@ -114,7 +115,7 @@ const filterOptions = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.mobile"
                         :label="t('customer.basicData.mobile')"
                         :rules="validate('client.mobile')"
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index c276b0d3e..d7eac2b6c 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -35,31 +37,31 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
-                <QItem>
+            <QList dense style="max-width: 256px" class="list">
+                <QItem class="q-my-sm">
                     <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
+                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
+                                <QIcon name="badge" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput :label="t('Name')" v-model="params.name" lazy-rules />
+                        <VnInput :label="t('Name')" v-model="params.name" is-outlined />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Social Name')"
                             v-model="params.socialName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -74,11 +76,15 @@ const zones = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!provinces">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -92,33 +98,45 @@ const zones = ref();
                             option-label="name"
                             emit-value
                             map-options
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
                     <QItemSection>
-                        <QInput :label="t('City')" v-model="params.city" lazy-rules />
+                        <VnInput :label="t('City')" v-model="params.city" is-outlined />
                     </QItemSection>
                 </QItem>
                 <QSeparator />
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Phone')" v-model="params.phone" lazy-rules>
+                            <VnInput
+                                :label="t('Phone')"
+                                v-model="params.phone"
+                                is-outlined
+                            >
                                 <template #prepend>
-                                    <QIcon name="phone" size="sm"></QIcon>
+                                    <QIcon name="phone" size="xs" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Email')" v-model="params.email" lazy-rules>
+                            <VnInput
+                                :label="t('Email')"
+                                v-model="params.email"
+                                is-outlined
+                            >
                                 <template #prepend>
-                                    <QIcon name="email" size="sm"></QIcon>
+                                    <QIcon name="email" size="sm" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
@@ -135,15 +153,19 @@ const zones = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                hide-selected
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInput
                                 :label="t('Postcode')"
                                 v-model="params.postcode"
-                                lazy-rules
+                                is-outlined
                             />
                         </QItemSection>
                     </QItem>
@@ -153,6 +175,12 @@ const zones = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index 56fb52d79..efe7a48ee 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -24,39 +25,39 @@ function isValidNumber(value) {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Order ID')"
                             v-model="params.orderFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="vn:basket" size="sm"></QIcon>
+                                <QIcon name="vn:basket" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
+                                <QIcon name="vn:client" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Amount')"
                             v-model="params.amount"
-                            lazy-rules
+                            is-outlined
                             @update:model-value="
                                 (value) => {
                                     if (value.includes(','))
@@ -67,13 +68,15 @@ function isValidNumber(value) {
                                 (val) =>
                                     isValidNumber(val) || !val || 'Please type a number',
                             ]"
+                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="euro" size="sm" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
+
                 <QItem>
                     <QItemSection>
                         <QInput
@@ -81,6 +84,9 @@ function isValidNumber(value) {
                             :label="t('From')"
                             mask="date"
                             placeholder="yyyy/mm/dd"
+                            dense
+                            outlined
+                            rounded
                         >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
@@ -118,6 +124,9 @@ function isValidNumber(value) {
                             :label="t('To')"
                             mask="date"
                             placeholder="yyyy/mm/dd"
+                            dense
+                            outlined
+                            rounded
                         >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index 6711d17c6..af657022f 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -38,47 +40,31 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
                             v-model="params.clientFk"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('FI')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
-                            v-model="params.fi"
-                        />
+                        <VnInput v-model="params.fi" :label="t('FI')" is-outlined />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Amount')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
                             v-model="params.amount"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mt-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             :label="t('Min')"
@@ -102,7 +88,7 @@ function setWorkers(data) {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem>
                     <QItemSection>
                         <QCheckbox
                             :label="t('Has PDF')"
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
index 05b642f1f..3ab7a32db 100644
--- a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
@@ -1,11 +1,13 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { storeToRefs } from 'pinia';
-import { toDate } from 'src/filters';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
 import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
+import { toDate } from 'src/filters';
 
 const { t } = useI18n();
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
@@ -84,7 +86,7 @@ onMounted(async () => {
         class="form-container q-pa-md"
         style="max-width: 256px"
     >
-        <div class="column q-gutter-y-md">
+        <div class="column q-gutter-y-sm">
             <QRadio
                 v-model="clientsToInvoice"
                 dense
@@ -98,6 +100,7 @@ onMounted(async () => {
                 val="one"
                 :label="t('oneClient')"
                 :dark="true"
+                class="q-mb-sm"
             />
             <VnSelectFilter
                 v-if="clientsToInvoice === 'one'"
@@ -223,28 +226,24 @@ onMounted(async () => {
 </style>
 
 <i18n>
-    {
-        "en": {
-            "invoiceDate": "Invoice date",
-            "maxShipped": "Max date",
-            "allClients": "All clients",
-            "oneClient": "One client",
-            "company": "Company",
-            "printer": "Printer",
-            "invoiceOut": "Invoice out",
-            "client": "Client",
-            "stop": "Stop"
-        },
-        "es": {
-            "invoiceDate": "Fecha de factura",
-            "maxShipped": "Fecha límite",
-            "allClients": "Todos los clientes",
-            "oneClient": "Un solo cliente",
-            "company": "Empresa",
-            "printer": "Impresora",
-            "invoiceOut": "Facturar",
-            "client": "Cliente",
-            "stop": "Parar"
-        }
-    }
+en:
+    invoiceDate: Invoice date
+    maxShipped: Max date
+    allClients: All clients
+    oneClient: One client
+    company: Company
+    printer: Printer
+    invoiceOut: Invoice out
+    client: Client
+    stop: Stop
+es:
+    invoiceDate: Fecha de factura
+    maxShipped: Fecha límite
+    allClients: Todos los clientes
+    oneClient: Un solo cliente
+    company: Empresa
+    printer: Impresora
+    invoiceOut: Facturar
+    client: Cliente
+    stop: Parar
 </i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index 6ea20288d..5425b34cc 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -1,11 +1,14 @@
 <script setup>
 import { onMounted, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { QCheckbox, QBtn } from 'quasar';
+
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
-import { QCheckbox, QBtn } from 'quasar';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { toDate } from 'src/filters';
 
@@ -331,19 +334,17 @@ onMounted(async () => {
                     <QTh v-for="col in props.cols" :key="col.name" :props="props">
                         <div class="column justify-start items-start full-height">
                             {{ t(`invoiceOut.negativeBases.${col.label}`) }}
-                            <QInput
+                            <VnInput
                                 :class="{
                                     invisible:
                                         col.field === 'isActive' ||
                                         col.field === 'hasToInvoice' ||
                                         col.field === 'isTaxDataChecked',
                                 }"
-                                dense
-                                outlined
-                                rounded
                                 v-model="filter[col.field]"
                                 type="text"
                                 @keyup.enter="search()"
+                                is-outlined
                             />
                         </div>
                     </QTh>
diff --git a/src/pages/Login/LoginMain.vue b/src/pages/Login/LoginMain.vue
index 2e4fd91ca..e2ccdac16 100644
--- a/src/pages/Login/LoginMain.vue
+++ b/src/pages/Login/LoginMain.vue
@@ -3,12 +3,13 @@ import { ref } from 'vue';
 import { Notify, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import axios from 'axios';
 
 import { useSession } from 'src/composables/useSession';
 import { useLogin } from 'src/composables/useLogin';
 
 import VnLogo from 'components/ui/VnLogo.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import axios from 'axios';
 
 const quasar = useQuasar();
 const session = useSession();
@@ -68,13 +69,14 @@ async function onSubmit() {
 <template>
     <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
         <VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
-        <QInput
+
+        <VnInput
             v-model="username"
             :label="t('login.username')"
             lazy-rules
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
         />
-        <QInput
+        <VnInput
             type="password"
             v-model="password"
             :label="t('login.password')"
diff --git a/src/pages/Login/TwoFactor.vue b/src/pages/Login/TwoFactor.vue
index 1c99e8dec..b3a139149 100644
--- a/src/pages/Login/TwoFactor.vue
+++ b/src/pages/Login/TwoFactor.vue
@@ -53,7 +53,7 @@ async function onSubmit() {
             <QIcon name="phonelink_lock" size="xl" color="primary" />
             <h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
         </div>
-        <QInput
+        <VnInput
             v-model="code"
             :hint="t('twoFactor.explanation')"
             mask="# # # # # #"
@@ -64,7 +64,7 @@ async function onSubmit() {
             <template #prepend>
                 <QIcon name="lock" />
             </template>
-        </QInput>
+        </VnInput>
         <div class="q-mt-xl">
             <QBtn
                 :label="t('twoFactor.validate')"
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index b8948652a..1ccfa2404 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -28,15 +28,14 @@ const countries = ref();
             <QList dense>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.cmrFk')"
                             v-model="params.cmrFk"
-                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="article" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -50,41 +49,38 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.ticketFk')"
                             v-model="params.ticketFk"
-                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="vn:ticket" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.routeFk')"
                             v-model="params.routeFk"
-                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="vn:delivery" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.clientFk')"
                             v-model="params.clientFk"
-                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -156,7 +152,7 @@ const countries = ref();
             country: Country
             clientFk: Client id
             shipped: Preparation date
-    
+
     es:
         params:
             cmrFk: Id cmr
diff --git a/src/pages/Shelving/Card/ShelvingForm.vue b/src/pages/Shelving/Card/ShelvingForm.vue
index d919a05ba..61f4ceb8a 100644
--- a/src/pages/Shelving/Card/ShelvingForm.vue
+++ b/src/pages/Shelving/Card/ShelvingForm.vue
@@ -1,8 +1,10 @@
 <script setup>
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
-import { computed, ref } from 'vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const props = defineProps({
     data: {
@@ -57,7 +59,7 @@ const parkingSelectFilter = {
     />
     <VnRow class="row q-gutter-md q-mb-md">
         <div class="col">
-            <QInput
+            <VnInput
                 v-model="data.code"
                 :label="t('shelving.basicData.code')"
                 :rules="props.validate('Shelving.code')"
@@ -83,7 +85,7 @@ const parkingSelectFilter = {
     </VnRow>
     <VnRow class="row q-gutter-md q-mb-md">
         <div class="col">
-            <QInput
+            <VnInput
                 v-model="data.priority"
                 :label="t('shelving.basicData.priority')"
                 :rules="props.validate('Shelving.priority')"
diff --git a/src/pages/Supplier/SupplierCreate.vue b/src/pages/Supplier/SupplierCreate.vue
index 3d89264b3..a7e851623 100644
--- a/src/pages/Supplier/SupplierCreate.vue
+++ b/src/pages/Supplier/SupplierCreate.vue
@@ -1,11 +1,12 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { reactive } from 'vue';
-import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
 const { t } = useI18n();
 const stateStore = useStateStore();
 
@@ -39,7 +40,7 @@ const newSupplierForm = reactive({
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput
+                        <VnInput
                             v-model="data.name"
                             :label="t('supplier.create.supplierName')"
                         />
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index aa98b9564..f20e7d98e 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -1,8 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import toDateString from 'filters/toDateString';
 
 const { t } = useI18n();
@@ -52,26 +55,33 @@ const warehouses = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.clientFk"
                             :label="t('Customer ID')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.orderFk"
                             :label="t('Order ID')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput v-model="params.from" :label="t('From')" mask="date">
+                        <QInput
+                            v-model="params.from"
+                            :label="t('From')"
+                            mask="date"
+                            dense
+                            outlined
+                            rounded
+                        >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
                                     <QPopupProxy
@@ -103,7 +113,14 @@ const warehouses = ref();
                         </QInput>
                     </QItemSection>
                     <QItemSection>
-                        <QInput v-model="params.to" :label="t('To')" mask="date">
+                        <QInput
+                            v-model="params.to"
+                            :label="t('To')"
+                            mask="date"
+                            dense
+                            outlined
+                            rounded
+                        >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
                                     <QPopupProxy
@@ -150,6 +167,9 @@ const warehouses = ref();
                             emit-value
                             map-options
                             use-input
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
@@ -168,15 +188,18 @@ const warehouses = ref();
                             option-label="name"
                             emit-value
                             map-options
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.refFk"
                             :label="t('Invoice Ref.')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -290,7 +313,7 @@ en:
     params:
         search: Contains
         clientFk: Customer
-        orderFK: Order
+        orderFk: Order
         from: From
         to: To
         salesPersonFk: Salesperson
@@ -307,7 +330,7 @@ es:
     params:
         search: Contiene
         clientFk: Cliente
-        orderFK: Pedido
+        orderFk: Pedido
         from: Desde
         to: Hasta
         salesPersonFk: Comercial
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 8ccecb926..ffaac88a6 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -1,16 +1,19 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { QBtn, QField, QPopupEdit } from 'quasar';
+
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
-import { QBtn, QField, QPopupEdit } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { toCurrency } from 'src/filters';
-import { useArrayData } from 'composables/useArrayData';
-import { toDate } from 'src/filters';
-import { usePrintService } from 'composables/usePrintService';
-import travelService from 'src/services/travel.service';
 import ExtraCommunityFilter from './ExtraCommunityFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import travelService from 'src/services/travel.service';
+import { useArrayData } from 'composables/useArrayData';
+import { usePrintService } from 'composables/usePrintService';
+import { toDate } from 'src/filters';
+import { toCurrency } from 'src/filters';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -281,7 +284,7 @@ onMounted(async () => {
                                     label-set="Save"
                                     label-cancel="Close"
                                 >
-                                    <QInput
+                                    <VnInput
                                         v-model="rows[props.pageIndex][col.field]"
                                         dense
                                         autofocus
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index 5c2d8c190..0c00bd78f 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import { toDate } from 'src/filters';
 
 const { t } = useI18n();
@@ -70,24 +73,22 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list">
-                <QItem class="q-my-sm">
+            <QList dense style="max-width: 256px" class="list q-gutter-y-sm q-mt-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput label="id" dense outlined rounded v-model="params.id" />
+                        <VnInput label="id" v-model="params.id" is-outlined />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-my-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('params.ref')"
-                            dense
-                            outlined
-                            rounded
+                        <VnInput
+                            :label="t('params.reference')"
                             v-model="params.reference"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.totalEntries"
@@ -118,7 +119,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.agencyModeFk')"
@@ -133,7 +134,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -166,7 +167,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -199,7 +200,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseOutFk')"
@@ -214,7 +215,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseInFk')"
@@ -229,7 +230,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('supplier.pageTitles.supplier')"
@@ -244,7 +245,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.continent')"
@@ -283,7 +284,8 @@ const decrement = (paramsObj, key) => {
 <i18n>
 en:
     params:
-        ref: Reference
+        id: Id
+        reference: Reference
         totalEntries: Total entries
         agencyModeFk: Agency
         warehouseInFk: Warehouse In
@@ -294,7 +296,8 @@ en:
         continent: Continent out
 es:
     params:
-        ref: Referencia
+        id: Id
+        reference: Referencia
         totalEntries: Ent. totales
         agencyModeFk: Agencia
         warehouseInFk: Alm. entrada
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index 6b96398ed..dc23f3163 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -1,14 +1,15 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { reactive, ref } from 'vue';
-import FetchData from 'components/FetchData.vue';
+import { reactive, ref, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import { toDate } from 'src/filters';
+import VnInput from 'src/components/common/VnInput.vue';
 
-import { onBeforeMount } from 'vue';
+import { toDate } from 'src/filters';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -70,7 +71,7 @@ const onFetchWarehouses = (warehouses) => {
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput v-model="data.ref" :label="t('globals.reference')" />
+                        <VnInput v-model="data.ref" :label="t('globals.reference')" />
                     </div>
                     <div class="col">
                         <VnSelectFilter
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index aee936608..123659556 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
+
 import { toDate } from 'src/filters';
 
 const { t } = useI18n();
@@ -64,19 +67,17 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list">
-                <QItem class="q-my-sm">
+            <QList dense style="max-width: 256px" class="list q-gutter-y-sm q-mt-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('params.search')"
-                            dense
-                            outlined
-                            rounded
+                        <VnInput
                             v-model="params.search"
+                            :label="t('params.search')"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.agencyModeFk')"
@@ -91,7 +92,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseOutFk')"
@@ -106,7 +107,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseInFk')"
@@ -121,7 +122,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.scopeDays"
@@ -151,7 +152,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -184,7 +185,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -217,7 +218,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.continent')"
@@ -232,7 +233,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.totalEntries"
diff --git a/src/pages/Wagon/Type/WagonTypeCreate.vue b/src/pages/Wagon/Type/WagonTypeCreate.vue
index 50be4169c..aa14e2cbf 100644
--- a/src/pages/Wagon/Type/WagonTypeCreate.vue
+++ b/src/pages/Wagon/Type/WagonTypeCreate.vue
@@ -1,9 +1,12 @@
 <script setup>
-import axios from 'axios';
-import { useQuasar } from 'quasar';
 import { computed, ref, onMounted, onUpdated } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
 
 onMounted(() => fetch());
 onUpdated(() => fetch());
@@ -241,7 +244,7 @@ function exceedMaxHeight(pos) {
     <QPage class="q-pa-sm q-mx-xl">
         <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
             <QCard class="q-pa-md">
-                <QInput
+                <VnInput
                     filled
                     v-model="name"
                     :label="t('wagon.type.name')"
diff --git a/src/pages/Wagon/WagonCreate.vue b/src/pages/Wagon/WagonCreate.vue
index 0bd6f87be..cf6bc3ff2 100644
--- a/src/pages/Wagon/WagonCreate.vue
+++ b/src/pages/Wagon/WagonCreate.vue
@@ -1,9 +1,12 @@
 <script setup>
-import axios from 'axios';
-import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
 import { computed, onMounted, onUpdated, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
 import { useRoute, useRouter } from 'vue-router';
+import axios from 'axios';
 
 onMounted(() => fetch());
 onUpdated(() => fetch());
@@ -100,7 +103,7 @@ function filterType(val, update) {
                         />
                     </div>
                     <div class="col">
-                        <QInput
+                        <VnInput
                             filled
                             v-model="wagon.plate"
                             :label="t('wagon.create.plate')"
diff --git a/src/pages/Worker/WorkerFilter.vue b/src/pages/Worker/WorkerFilter.vue
index 079905c4f..680a17937 100644
--- a/src/pages/Worker/WorkerFilter.vue
+++ b/src/pages/Worker/WorkerFilter.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -25,40 +27,39 @@ const departments = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined
+                            ><template #prepend>
+                                <QIcon name="badge" size="xs"></QIcon> </template
+                        ></VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('First Name')"
                             v-model="params.firstName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Last Name')"
                             v-model="params.lastName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('User Name')"
                             v-model="params.userName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -77,16 +78,19 @@ const departments = ref();
                             emit-value
                             map-options
                             use-input
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Extension')"
                             v-model="params.extension"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -104,6 +108,7 @@ en:
         lastName: Last name
         userName: User
         extension: Extension
+        departmentFk: Department
 es:
     params:
         search: Contiene
@@ -112,6 +117,7 @@ es:
         lastName: Apellidos
         userName: Usuario
         extension: Extensión
+        departmentFk: Departamento
     FI: NIF
     First Name: Nombre
     Last Name: Apellidos

From e0215e52167abdd624ea2b2c4c10b2e37d4e025a Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 11 Dec 2023 10:14:45 -0300
Subject: [PATCH 2/3] Change more forms styling

---
 src/pages/Route/Cmr/CmrFilter.vue | 8 +++++++-
 src/pages/Ticket/TicketFilter.vue | 9 +++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index 1ccfa2404..e7cfd73e4 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -87,7 +87,7 @@ const countries = ref();
                     <QItemSection v-if="!countries">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
-                    <QItemSection v-if="countries">
+                    <QItemSection v-if="countries" class="q-mb-sm">
                         <QSelect
                             :label="t('route.cmr.list.country')"
                             v-model="params.country"
@@ -98,6 +98,9 @@ const countries = ref();
                             transition-hide="jump-up"
                             emit-value
                             map-options
+                            dense
+                            outlined
+                            rounded
                         >
                             <template #prepend>
                                 <QIcon name="flag" size="sm"></QIcon>
@@ -111,6 +114,9 @@ const countries = ref();
                             :label="t('route.cmr.list.shipped')"
                             v-model="params.shipped"
                             mask="date"
+                            dense
+                            outlined
+                            rounded
                         >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index f20e7d98e..b7d23eeb1 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -265,6 +265,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
@@ -282,6 +285,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
@@ -299,6 +305,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>

From d369ce715232034a80fbc26d11af54601f2cf908 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 13 Dec 2023 14:57:27 -0300
Subject: [PATCH 3/3] more filters adaptations

---
 src/pages/Claim/ClaimFilter.vue           |   5 +-
 src/pages/Customer/CustomerFilter.vue     |   5 +-
 src/pages/InvoiceIn/InvoiceInFilter.vue   | 177 ++++++++--------------
 src/pages/Route/Cmr/CmrFilter.vue         |   6 +-
 src/pages/Travel/ExtraCommunityFilter.vue |   5 +-
 src/pages/Travel/TravelFilter.vue         |   5 +-
 6 files changed, 85 insertions(+), 118 deletions(-)

diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index 9fd781dc9..b06f47653 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -36,7 +36,7 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense style="max-width: 256px" class="list">
+            <QList dense class="list">
                 <QItem class="q-my-sm">
                     <QItemSection>
                         <VnInput
@@ -184,6 +184,9 @@ const states = ref();
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index d7eac2b6c..36a9add89 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -37,7 +37,7 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense style="max-width: 256px" class="list">
+            <QList dense class="list">
                 <QItem class="q-my-sm">
                     <QItemSection>
                         <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
@@ -176,6 +176,9 @@ const zones = ref();
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 6348d4167..f8198d237 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -33,28 +36,32 @@ const suppliersRef = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('Id or Supplier')" v-model="params.search">
+                        <VnInput
+                            :label="t('Id or Supplier')"
+                            v-model="params.search"
+                            is-outlined
+                        >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('params.supplierRef')"
                             v-model="params.supplierRef"
-                            @input.
+                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -66,52 +73,67 @@ const suppliersRef = ref();
                             option-value="id"
                             option-label="nickname"
                             @input-value="suppliersRef.fetch()"
+                            dense
+                            outlined
+                            rounded
                         >
                         </VnSelectFilter>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('params.fi')" v-model="params.fi" lazy-rules>
+                        <VnInput
+                            :label="t('params.fi')"
+                            v-model="params.fi"
+                            is-outlined
+                            lazy-rules
+                        >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('params.serialNumber')"
                             v-model="params.serialNumber"
+                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('params.serial')"
                             v-model="params.serial"
+                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
+                        <VnInput
+                            :label="t('Amount')"
+                            v-model="params.amount"
+                            is-outlined
+                            lazy-rules
+                        >
                             <template #prepend>
                                 <QIcon name="euro" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
@@ -127,137 +149,57 @@ const suppliersRef = ref();
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInput
                                 :label="t('params.awb')"
                                 v-model="params.awbCode"
+                                is-outlined
                                 lazy-rules
                             >
                                 <template #prepend>
                                     <QIcon name="badge" size="sm"></QIcon>
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInput
                                 :label="t('params.account')"
                                 v-model="params.account"
+                                is-outlined
                                 lazy-rules
                             >
                                 <template #prepend>
                                     <QIcon name="person" size="sm" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('From')" v-model="params.from" mask="date">
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.from" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate
+                                :label="t('From')"
+                                v-model="params.from"
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('To')" v-model="params.to" mask="date">
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.to" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate
+                                :label="t('To')"
+                                v-model="params.to"
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInputDate
                                 :label="t('Issued')"
                                 v-model="params.issued"
-                                mask="date"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.issued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
@@ -266,6 +208,15 @@ const suppliersRef = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index 89cc822b3..a5bf5513b 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -28,12 +28,13 @@ const countries = ref();
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
                         <VnInput
                             :label="t('route.cmr.list.cmrFk')"
                             v-model="params.cmrFk"
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="article" size="sm"></QIcon>
@@ -55,6 +56,7 @@ const countries = ref();
                         <VnInput
                             :label="t('route.cmr.list.ticketFk')"
                             v-model="params.ticketFk"
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:ticket" size="sm"></QIcon>
@@ -67,6 +69,7 @@ const countries = ref();
                         <VnInput
                             :label="t('route.cmr.list.routeFk')"
                             v-model="params.routeFk"
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:delivery" size="sm"></QIcon>
@@ -79,6 +82,7 @@ const countries = ref();
                         <VnInput
                             :label="t('route.cmr.list.clientFk')"
                             v-model="params.clientFk"
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index b7c97649c..57c3ec4bf 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -72,7 +72,7 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list q-gutter-y-sm q-mt-sm">
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
                         <VnInput label="id" v-model="params.id" is-outlined />
@@ -217,6 +217,9 @@ const decrement = (paramsObj, key) => {
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index 51f398f4e..d4cb286c2 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -67,7 +67,7 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list q-gutter-y-sm q-mt-sm">
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
                         <VnInput
@@ -270,6 +270,9 @@ const decrement = (paramsObj, key) => {
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }