merge with dev

src/components/FormModel.vue

@@ -84,7 +84,7 @@ onUnmounted(() => {
 const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
 const hasChanges = ref(!$props.observeFormChanges);
-const originalData = ref();
+const originalData = ref({...$props.formInitialData});
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 
@@ -141,8 +141,10 @@ function reset() {
     originalData.value = JSON.parse(JSON.stringify(originalData.value));
 
     emit('onFetch', state.get($props.model));
+    if ($props.observeFormChanges) {
         hasChanges.value = false;
     }
+}
 
 // eslint-disable-next-line vue/no-dupe-keys
 function filter(value, update, filterOptions) {
@@ -166,7 +168,7 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner v-if="hasChanges" class="text-white bg-warning">
+    <QBanner v-if="$props.observeFormChanges && hasChanges" class="text-white bg-warning">
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>

src/components/ui/CardList.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const $props = defineProps({
     addElement: { type: Function, required: false },
@@ -13,7 +16,7 @@ const checkSelect = ref(false);
 
 watch(
     () => $props.isSelected,
-    (value, prevValue) => {
+    (value) => {
         checkSelect.value = value;
     }
 );
@@ -32,8 +35,8 @@ const selectedItem = (item) => {
                         <div class="title text-primary text-weight-bold text-h5">
                             {{ $props.title }}
                         </div>
-                        <QChip outline color="grey" size="sm">
+                        <QChip class="q-chip-color" outline size="sm">
-                            ID: {{ $props.id }}
+                            {{ t('ID') }}: {{ $props.id }}
                         </QChip>
                     </div>
                     <QCheckbox
@@ -61,6 +64,10 @@ const selectedItem = (item) => {
     margin-right: 25px;
 }
 
+.q-chip-color {
+    color: var(--vn-label);
+}
+
 .card-list-body {
     display: flex;
     justify-content: space-between;
@@ -120,3 +127,8 @@ const selectedItem = (item) => {
     width: 75%;
 }
 </style>
+
+<i18n>
+    es:
+        ID: ID
+</i18n>

src/css/app.scss

@@ -51,3 +51,7 @@ body.body--dark {
     color: var(--vn-text);
     border-radius: 8px;
 }
+
+.vn-secondary-button {
+    background-color: var(--vn-dark);
+}

src/i18n/en/index.js

@@ -421,6 +421,10 @@ export default {
                 addressId: 'Address id',
                 streetAddress: 'Street',
             },
+            statusCard: {
+                percentageText: '{getPercentage}% {getAddressNumber} of {getNAddresses}',
+                pdfsNumberText: '{nPdfs} of {totalPdfs} PDFs',
+            },
         },
         negativeBases: {
             from: 'From',
@@ -453,6 +457,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Priority',
+            newShelving: 'New Shelving'
         },
         summary: {
             code: 'Code',

src/i18n/es/index.js

@@ -423,6 +423,10 @@ export default {
                 addressId: 'Id dirección',
                 streetAddress: 'Dirección fiscal',
             },
+            statusCard: {
+                percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}',
+                pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs',
+            },
         },
         negativeBases: {
             from: 'Desde',
@@ -455,6 +459,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Prioridad',
+            newShelving: 'Nuevo Carro'
         },
         summary: {
             code: 'Código',
@@ -604,7 +609,7 @@ export default {
             notes: 'Notas',
             verified: 'Verificado',
             isActive: 'Está activo',
-            billingData: 'Billing data',
+            billingData: 'Forma de pago',
             payMethod: 'Método de pago',
             payDeadline: 'Plazo de pago',
             payDay: 'Día de pago',

src/pages/Claim/Card/ClaimBasicData.vue

@@ -127,7 +127,7 @@ const statesFilter = {
                                         <div class="row items-center justify-end">
                                             <QBtn
                                                 v-close-popup
-                                                label="Close"
+                                                :label="t('globals.close')"
                                                 color="primary"
                                                 flat
                                             />

src/pages/Claim/ClaimFilter.vue

@@ -189,7 +189,7 @@ const states = ref();
                                                 <div class="row items-center justify-end">
                                                     <QBtn
                                                         v-close-popup
-                                                        label="Close"
+                                                        :label="t('globals.close')"
                                                         color="primary"
                                                         flat
                                                     />

src/pages/Claim/ClaimList.vue

@@ -110,13 +110,13 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
                                 :label="t('components.smartCard.viewDescription')"
                                 @click.stop
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                                 style="margin-top: 15px"
                             >

src/pages/Customer/CustomerList.vue

@@ -72,10 +72,10 @@ function viewSummary(id) {
                         v-for="row of rows"
                         :key="row.id"
                         :title="row.name"
+                        :id="row.id"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
                             <VnLv :label="t('customer.list.phone')" :value="row.phone" />
                         </template>
@@ -83,7 +83,7 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn

src/pages/InvoiceOut/InvoiceOutGlobal.vue

@@ -105,11 +105,20 @@ onUnmounted(() => {
     <QPage class="column items-center q-pa-md">
         <QCard v-if="status" class="card">
             <QCardSection class="card-section">
-                <span class="status-text">{{ t(`status.${status}`) }}</span>
+                <span class="text">{{ t(`status.${status}`) }}</span>
                 <span class="text">{{
-                    `${getPercentage}% (${getAddressNumber} ${t('of')} ${getNAddresses})`
+                    t('invoiceOut.globalInvoices.statusCard.percentageText', {
+                        getPercentage: getPercentage,
+                        getAddressNumber: getAddressNumber,
+                        getNAddresses: getNAddresses,
+                    })
+                }}</span>
+                <span class="text">{{
+                    t('invoiceOut.globalInvoices.statusCard.pdfsNumberText', {
+                        nPdfs: nPdfs,
+                        totalPdfs: totalPdfs,
+                    })
                 }}</span>
-                <span class="text">{{ `${nPdfs} ${t('of')} ${totalPdfs} PDFs` }}</span>
             </QCardSection>
         </QCard>
 
@@ -149,7 +158,7 @@ onUnmounted(() => {
     display: flex;
     justify-content: center;
     width: 100%;
-    background-color: #292929;
+    background-color: var(--vn-dark);
     padding: 16px;
 
     .card-section {
@@ -158,14 +167,9 @@ onUnmounted(() => {
         padding: 0px;
     }
 
-    .status-text {
-        font-size: 14px;
-        color: white;
-    }
-
     .text {
         font-size: 14px;
-        color: #aaaaaa;
+        color: var(--vn-text);
     }
 }
 
@@ -176,24 +180,19 @@ onUnmounted(() => {
 </style>
 
 <i18n>
-   {
+en:
-        "en": {
+    status:
-            "status": {
+        packageInvoicing: Build packaging tickets
-                "packageInvoicing": "Build packaging tickets",
+        invoicing: Invoicing client
-                "invoicing": "Invoicing client",
+        stopping: Stopping process
-                "stopping": "Stopping process",
+        done: Ended process
-                "done": "Ended process"
+    of: of
-            },
+
-            "of": "of"
+es:
-        },
+    status:
-        "es": {
+        packageInvoicing: Generación de tickets de empaque
-            "status":{
+        invoicing: Facturando a cliente
-                "packageInvoicing": "Generación de tickets de empaque",
+        stopping: Deteniendo proceso
-                "invoicing": "Facturando a cliente",
+        done: Proceso detenido
-                "stopping": "Deteniendo proceso",
+    of: de
-                "done": "Proceso detenido",
-            },
-            "of": "de"
-        }
-    }
 </i18n>

src/pages/InvoiceOut/InvoiceOutGlobalForm.vue

@@ -133,7 +133,7 @@ onMounted(async () => {
                                 <div class="row items-center justify-end">
                                     <QBtn
                                         v-close-popup
-                                        label="Close"
+                                        :label="t('globals.close')"
                                         color="primary"
                                         flat
                                     />
@@ -162,7 +162,7 @@ onMounted(async () => {
                                 <div class="row items-center justify-end">
                                     <QBtn
                                         v-close-popup
-                                        label="Close"
+                                        :label="t('globals.close')"
                                         color="primary"
                                         flat
                                     />
@@ -236,6 +236,7 @@ en:
     invoiceOut: Invoice out
     client: Client
     stop: Stop
+
 es:
     invoiceDate: Fecha de factura
     maxShipped: Fecha límite

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -151,7 +151,7 @@ const downloadCsv = (rows) => {
                             :label="t('globals.download')"
                             v-else
                         >
-                            <Qlist>
+                            <QList>
                                 <QItem clickable v-close-popup @click="downloadCsv(rows)">
                                     <QItemSection>
                                         <QItemLabel>
@@ -175,7 +175,7 @@ const downloadCsv = (rows) => {
                                         </QItemLabel>
                                     </QItemSection>
                                 </QItem>
-                            </Qlist>
+                            </QList>
                         </QBtnDropdown>
 
                         <QCheckbox
@@ -233,7 +233,7 @@ const downloadCsv = (rows) => {
                                 <QBtn
                                     :label="t('components.smartCard.openCard')"
                                     @click.stop="navigate(row.id)"
-                                    color="white"
+                                    class="bg-vn-dark"
                                     outline
                                     type="reset"
                                 />

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -265,7 +265,7 @@ onMounted(async () => {
                                         <div class="row items-center justify-end">
                                             <QBtn
                                                 v-close-popup
-                                                label="Close"
+                                                :label="t('globals.close')"
                                                 color="primary"
                                                 flat
                                             />
@@ -296,7 +296,7 @@ onMounted(async () => {
                                         <div class="row items-center justify-end">
                                             <QBtn
                                                 v-close-popup
-                                                label="Close"
+                                                :label="t('globals.close')"
                                                 color="primary"
                                                 flat
                                             />

src/pages/Shelving/Card/ShelvingCard.vue

@@ -15,14 +15,7 @@ const stateStore = useStateStore();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
-            <div class="q-pa-md">
             <RouterView></RouterView>
-            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Shelving/Card/ShelvingForm.vue

@@ -1,32 +1,24 @@
 <script setup>
-import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
-const props = defineProps({
-    data: {
-        type: Object,
-        default: () => ({}),
-    },
-    filter: {
-        type: Function,
-        default: () => {},
-    },
-    validate: {
-        type: Function,
-        default: () => {},
-    },
-});
-
-const data = computed(() => props.data);
-
 const { t } = useI18n();
+const route = useRoute();
+const shelvingId = route.params?.id || null;
+const isNew = Boolean(!shelvingId);
+const defaultInitialData = {
+    parkingFk: null,
+    priority: 0,
+    code: null,
+    isRecyclable: false,
+};
 
 const parkingFilter = { fields: ['id', 'code'] };
-
 const parkingList = ref([]);
 const parkingListCopy = ref([]);
 
@@ -49,20 +41,51 @@ const parkingSelectFilter = {
         );
     },
 };
+
+const shelvingFilter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};
 </script>
 <template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
     <FetchData
         url="Parkings"
         :filter="parkingFilter"
         @on-fetch="setParkingList"
         auto-load
     />
+    <FormModel
+        :url="isNew ? null : `Shelvings/${shelvingId}`"
+        :url-create="isNew ? 'Shelvings' : null"
+        :observe-form-changes="!isNew"
+        :filter="shelvingFilter"
+        model="shelving"
+        :auto-load="!isNew"
+        :form-initial-data="defaultInitialData"
+    >
+        <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnInput
                         v-model="data.code"
                         :label="t('shelving.basicData.code')"
-                :rules="props.validate('Shelving.code')"
+                        :rules="validate('Shelving.code')"
                     />
                 </div>
                 <div class="col">
@@ -76,9 +99,9 @@ const parkingSelectFilter = {
                         map-options
                         use-input
                         @filter="
-                    (value, update) => props.filter(value, update, parkingSelectFilter)
+                            (value, update) => filter(value, update, parkingSelectFilter)
                         "
-                :rules="props.validate('Shelving.parkingFk')"
+                        :rules="validate('Shelving.parkingFk')"
                         :input-debounce="0"
                     />
                 </div>
@@ -88,15 +111,17 @@ const parkingSelectFilter = {
                     <VnInput
                         v-model="data.priority"
                         :label="t('shelving.basicData.priority')"
-                :rules="props.validate('Shelving.priority')"
+                        :rules="validate('Shelving.priority')"
                     />
                 </div>
                 <div class="col">
                     <QCheckbox
                         v-model="data.isRecyclable"
                         :label="t('shelving.basicData.recyclable')"
-                :rules="props.validate('Shelving.isRecyclable')"
+                        :rules="validate('Shelving.isRecyclable')"
                     />
                 </div>
             </VnRow>
         </template>
+    </FormModel>
+</template>

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -2,10 +2,10 @@
 import { computed, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
-import { useStateStore } from 'stores/useStateStore';
 
 const $props = defineProps({
     id: {
@@ -17,10 +17,16 @@ const route = useRoute();
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-onMounted(() => (stateStore.rightDrawer = false));
-onUnmounted(() => (stateStore.rightDrawer = false));
 
 const entityId = computed(() => $props.id || route.params.id);
+const isDialog = Boolean($props.id);
+const hideRightDrawer = () => {
+    if (!isDialog) {
+        stateStore.rightDrawer = false;
+    }
+}
+onMounted(hideRightDrawer);
+onUnmounted(hideRightDrawer);
 const filter = {
     include: [
         {
@@ -39,7 +45,7 @@ const filter = {
 </script>
 
 <template>
-  <template v-if="stateStore.isHeaderMounted()">
+    <template v-if="!isDialog && stateStore.isHeaderMounted()">
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
                 <QBtn
@@ -56,6 +62,7 @@ const filter = {
             </div>
         </Teleport>
     </template>
+    <div class="q-pa-md">
         <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
             <template #header="{ entity }">
                 <div>{{ entity.code }}</div>
@@ -70,7 +77,10 @@ const filter = {
                         :label="t('shelving.summary.parking')"
                         :value="entity.parking?.code"
                     />
-                <VnLv :label="t('shelving.summary.priority')" :value="entity.priority" />
+                    <VnLv
+                        :label="t('shelving.summary.priority')"
+                        :value="entity.priority"
+                    />
                     <VnLv
                         :label="t('shelving.summary.worker')"
                         :value="entity.worker?.user?.nickname"
@@ -82,7 +92,14 @@ const filter = {
                 </QCard>
             </template>
         </CardSummary>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    </div>
+    <QDrawer
+        v-if="!isDialog"
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+    >
         <QScrollArea class="fit text-grey-8">
             <ShelvingFilter
                 data-key="ShelvingList"

src/pages/Shelving/ShelvingBasicData.vue

@@ -1,38 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import FormModel from 'components/FormModel.vue';
-import ShelvingForm from "pages/Shelving/Card/ShelvingForm.vue";
-
-const route = useRoute();
-
-const shelvingId = route.params?.id || null;
-
-const shelvingFilter = {
-    include: [
-        {
-            relation: 'worker',
-            scope: {
-                fields: ['id'],
-                include: {
-                    relation: 'user',
-                    scope: { fields: ['nickname'] },
-                },
-            },
-        },
-        { relation: 'parking' },
-    ],
-};
-</script>
-<template>
-    <FormModel
-        :url="`Shelvings/${shelvingId}`"
-        :url-update="`Shelvings/${shelvingId}`"
-        :filter="shelvingFilter"
-        model="shelving"
-        auto-load
-    >
-        <template #form="{ data, validate, filter }">
-            <ShelvingForm :data="data" :validate="validate" :filter="filter" />
-        </template>
-    </FormModel>
-</template>

src/pages/Shelving/ShelvingCreate.vue

@@ -1,69 +0,0 @@
-<script setup>
-import ShelvingForm from 'pages/Shelving/Card/ShelvingForm.vue';
-import { useI18n } from 'vue-i18n';
-import { useValidator } from 'composables/useValidator';
-import { ref } from 'vue';
-import axios from 'axios';
-import {useRouter} from "vue-router";
-
-const { t } = useI18n();
-const { validate } = useValidator();
-
-const isLoading = ref(false);
-const formData = ref({});
-const router = useRouter();
-
-async function save() {
-    isLoading.value = true;
-    try {
-        await axios.patch('Shelvings', formData.value);
-    } catch (e) { /* empty */ }
-    isLoading.value = false;
-}
-
-function filter(value, update, filterOptions) {
-    update(
-        () => {
-            const { options, filterFn } = filterOptions;
-
-            options.value = filterFn(options, value);
-        },
-        (ref) => {
-            ref.setOptionIndex(-1);
-            ref.moveOptionSelection(1, true);
-        }
-    );
-}
-</script>
-<template>
-    <div class="column items-center">
-        <QForm v-if="formData" @submit.prevent class="q-pa-md" id="formModel">
-            <QCard>
-                <ShelvingForm :data="formData" :validate="validate" :filter="filter" />
-            </QCard>
-            <QBtn
-                :label="t('globals.create')"
-                type="submit"
-                color="primary"
-                class="q-mt-md"
-                @click="save()"
-            />
-            <QBtn :label="t('globals.cancel')" class="q-mt-md q-ml-md" flat @click.stop="router.push({ name: 'ShelvingList' })" />
-        </QForm>
-    </div>
-    <QInnerLoading
-        :showing="isLoading"
-        :label="t('globals.pleaseWait')"
-        color="primary"
-    />
-</template>
-<style lang="scss" scoped>
-#formModel {
-    max-width: 800px;
-    width: 100%;
-}
-
-.q-card {
-    padding: 32px;
-}
-</style>

src/pages/Shelving/ShelvingList.vue

@@ -105,7 +105,7 @@ function exprBuilder(param, value) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
@@ -123,7 +123,7 @@ function exprBuilder(param, value) {
             <RouterLink :to="{ name: 'ShelvingCreate' }">
                 <QBtn fab icon="add" color="primary" />
                 <QTooltip>
-                    {{ t('supplier.list.newSupplier') }}
+                    {{ t('shelving.list.newShelving') }}
                 </QTooltip>
             </RouterLink>
         </QPageSticky>

src/pages/Supplier/Card/SupplierCard.vue

@@ -61,6 +61,3 @@ const { t } = useI18n();
     }
 }
 </style>
-
-<i18n>
-</i18n>

src/pages/Supplier/Card/SupplierSummary.vue

@@ -86,7 +86,7 @@ const isAdministrative = computed(() => {
                     </template>
                 </VnLv>
 
-                <VnLv :label="t('verified')" class="q-mb-xs">
+                <VnLv :label="t('supplier.summary.verified')" class="q-mb-xs">
                     <template #value>
                         <QCheckbox
                             v-model="supplier.isSerious"
@@ -96,7 +96,7 @@ const isAdministrative = computed(() => {
                         />
                     </template>
                 </VnLv>
-                <VnLv :label="t('isActive')" class="q-mb-xs">
+                <VnLv :label="t('supplier.summary.isActive')" class="q-mb-xs">
                     <template #value>
                         <QCheckbox
                             v-model="supplier.isActive"

src/pages/Supplier/SupplierCreate.vue

@@ -56,11 +56,7 @@ const newSupplierForm = reactive({
     display: flex;
     justify-content: center;
     width: 100%;
-    background-color: #292929;
+    background-color: var(--vn-dark);
     padding: 40px;
 }
 </style>
-
-<i18n>
-
-</i18n>

src/pages/Supplier/SupplierList.vue

@@ -103,12 +103,9 @@ const viewSummary = (id) => {
 </style>
 
 <i18n>
-    {
+en:
-        "en": {
     Search suppliers: Search suppliers
-        },
+
-        "es": {
+es:
     Search suppliers: Buscar proveedores
-        }
-    }
 </i18n>

src/pages/Travel/Card/TravelCard.vue

@@ -1,21 +1,9 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="SuppliersList"
-                :limit="20"
-                :label="t('Search suppliers')"
-            />
-        </Teleport>
-    </template>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit">
             <!-- Aca iría left menu y descriptor -->
@@ -61,6 +49,3 @@ const { t } = useI18n();
     }
 }
 </style>
-
-<i18n>
-</i18n>

src/pages/Travel/Card/TravelSummary.vue

@@ -9,6 +9,7 @@ import { toDate } from 'src/filters';
 import travelService from 'src/services/travel.service';
 import { QCheckbox, QIcon } from 'quasar';
 import { toCurrency } from 'filters/index';
+import VnRow from 'components/ui/VnRow.vue';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -207,23 +208,21 @@ const openEntryDescriptor = () => {};
         </template>
 
         <template #body>
-            <QCard class="vn-one">
+            <QCard class="vn-one row justify-around" style="min-width: 100%">
-                <VnLv :label="t('globals.shipped')" :value="toDate(travel.shipped)" />
+                <VnRow>
-                <VnLv :label="t('globals.landed')" :value="toDate(travel.landed)" />
+                    <div class="col">
-                <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
+                        <VnLv
+                            :label="t('globals.shipped')"
+                            :value="toDate(travel.shipped)"
+                        />
+                    </div>
+                    <div class="col">
                         <VnLv
                             :label="t('globals.wareHouseOut')"
                             :value="travel.warehouseOut?.name"
                         />
-                <VnLv
+                    </div>
-                    :label="t('globals.wareHouseIn')"
+                    <div class="col">
-                    :value="travel.warehouseIn?.name"
-                />
-                <VnLv :label="t('globals.reference')" :value="travel.ref" />
-
-                <VnLv label="m³" :value="travel.m3" />
-                <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
-
                         <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
                             <template #value>
                                 <QCheckbox
@@ -234,6 +233,22 @@ const openEntryDescriptor = () => {};
                                 />
                             </template>
                         </VnLv>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.landed')"
+                            :value="toDate(travel.landed)"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('globals.wareHouseIn')"
+                            :value="travel.warehouseIn?.name"
+                        />
+                    </div>
+                    <div class="col">
                         <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
                             <template #value>
                                 <QCheckbox
@@ -244,6 +259,22 @@ const openEntryDescriptor = () => {};
                                 />
                             </template>
                         </VnLv>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <div class="col">
+                        <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('globals.reference')" :value="travel.ref" />
+                    </div>
+                    <div class="col">
+                        <VnLv label="m³" :value="travel.m3" />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
+                    </div>
+                </VnRow>
             </QCard>
             <QCard class="vn-two" v-if="entriesTableRows.length > 0">
                 <a class="header" :href="travelUrl + 'entry'">

src/pages/Travel/ExtraCommunity.vue

@@ -1,20 +1,23 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { QBtn, QField, QPopupEdit } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 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';
+import { useArrayData } from 'composables/useArrayData';
+import { toDate } from 'src/filters';
+import { usePrintService } from 'composables/usePrintService';
+import travelService from 'src/services/travel.service';
 
+const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openReport } = usePrintService();
@@ -225,6 +228,10 @@ const saveFieldValue = async (val, field, index) => {
     await travelService.updateTravel(id, params);
 };
 
+const navigateToTravelId = (id) => {
+    router.push({ path: `/travel/${id}` });
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
 
@@ -238,6 +245,15 @@ onMounted(async () => {
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ExtraCommunity"
+                :limit="20"
+                :label="t('searchExtraCommunity')"
+            />
+        </Teleport>
+    </template>
     <QToolbar class="bg-vn-dark justify-end">
         <div id="st-data"></div>
         <QSpace />
@@ -260,7 +276,11 @@ onMounted(async () => {
             class="full-width q-mt-md"
         >
             <template #body="props">
-                <QTr :props="props" class="bg-black">
+                <QTr
+                    :props="props"
+                    @click="navigateToTravelId(props.row.id)"
+                    class="cursor-pointer"
+                >
                     <QTd v-for="col in props.cols" :key="col.name" :props="props">
                         <component
                             :is="tableColumnComponents[col.name].component"
@@ -315,7 +335,12 @@ onMounted(async () => {
                         </component>
                     </QTd>
                 </QTr>
-                <QTr v-for="entry in props.row.entries" :key="entry.id" :props="props">
+                <QTr
+                    v-for="entry in props.row.entries"
+                    :key="entry.id"
+                    :props="props"
+                    class="secondary-row"
+                >
                     <QTd
                         ><QBtn flat color="blue" class="col-content">{{ entry.id }}</QBtn>
                         <!-- Cuando se cree el modulo relacionado a entries, crear su descriptor y colocarlo acá -->
@@ -349,9 +374,9 @@ onMounted(async () => {
                     <QTd></QTd>
                     <QTd></QTd>
                     <QTd></QTd>
+                    <QTd></QTd>
                 </QTr>
             </template>
-            <pre>{{ arrayData }}</pre>
         </QTable>
     </QPage>
 </template>
@@ -361,6 +386,10 @@ onMounted(async () => {
     border-radius: 4px;
     padding: 6px 6px 6px 6px;
 }
+
+.secondary-row {
+    background-color: var(--vn-gray);
+}
 </style>
 
 <i18n>

src/pages/Travel/ExtraCommunityFilter.vue

@@ -155,7 +155,7 @@ const decrement = (paramsObj, key) => {
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.close')"
                                                     color="primary"
                                                     flat
                                                 />
@@ -188,7 +188,7 @@ const decrement = (paramsObj, key) => {
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.close')"
                                                     color="primary"
                                                     flat
                                                 />

src/pages/Travel/TravelCreate.vue

@@ -89,7 +89,7 @@ const onFetchWarehouses = (warehouses) => {
                         <QInput
                             rounded
                             placeholder="dd-mm-aaa"
-                            :label="t('globals.landed')"
+                            :label="t('globals.shipped')"
                             :model-value="toDate(data.shipped)"
                         >
                             <template #append>
@@ -103,7 +103,7 @@ const onFetchWarehouses = (warehouses) => {
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.close')"
                                                     color="primary"
                                                     flat
                                                 />
@@ -132,7 +132,7 @@ const onFetchWarehouses = (warehouses) => {
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.close')"
                                                     color="primary"
                                                     flat
                                                 />
@@ -178,7 +178,3 @@ const onFetchWarehouses = (warehouses) => {
     grid-gap: 20px;
 }
 </style>
-
-<i18n>
-
-</i18n>

src/pages/Travel/TravelFilter.vue

@@ -173,7 +173,7 @@ const decrement = (paramsObj, key) => {
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.close')"
                                                     color="primary"
                                                     flat
                                                 />
@@ -206,7 +206,7 @@ const decrement = (paramsObj, key) => {
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.close')"
                                                     color="primary"
                                                     flat
                                                 />

src/pages/Travel/TravelList.vue

@@ -1,16 +1,17 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
-import { toDate } from 'src/filters/index';
+import { useI18n } from 'vue-i18n';
-
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
-import { useQuasar } from 'quasar';
+
 import { useStateStore } from 'stores/useStateStore';
 import TravelFilter from './TravelFilter.vue';
+import { toDate } from 'src/filters/index';
 
 const router = useRouter();
 const quasar = useQuasar();
@@ -97,13 +98,13 @@ onMounted(async () => {
                             <QBtn
                                 :label="t('components.smartCard.clone')"
                                 @click.stop="cloneTravel(row)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn
                                 :label="t('addEntry')"
                                 @click.stop="viewSummary(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                                 style="margin-top: 15px"
                             />

src/pages/Wagon/Type/WagonTypeList.vue

@@ -57,14 +57,11 @@ async function remove(row) {
                         :id="row.id"
                         @click="navigate(row.id)"
                     >
-                        <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
-                        </template>
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn

src/pages/Wagon/WagonList.vue

@@ -81,7 +81,7 @@ async function remove(row) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn

src/pages/Worker/WorkerList.vue

@@ -71,11 +71,11 @@ function viewSummary(id) {
                     <CardList
                         v-for="row of rows"
                         :key="row.id"
-                        @click="navigate(row.id)"
+                        :id="row.id"
                         :title="row.nickname"
+                        @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('worker.list.name')" :value="row.userName" />
                             <VnLv :label="t('worker.list.email')" :value="row.email" />
                             <VnLv
@@ -87,7 +87,7 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="white"
+                                class="bg-vn-dark"
                                 outline
                             />
                             <QBtn

src/router/modules/shelving.js

@@ -35,7 +35,7 @@ export default {
                     meta: {
                         title: 'create',
                     },
-                    component: () => import('src/pages/Shelving/ShelvingCreate.vue'),
+                    component: () => import('src/pages/Shelving/Card/ShelvingForm.vue'),
                 },
             ],
         },
@@ -62,7 +62,7 @@ export default {
                         icon: 'vn:settings',
                         roles: ['salesPerson'],
                     },
-                    component: () => import('pages/Shelving/ShelvingBasicData.vue'),
+                    component: () => import('pages/Shelving/Card/ShelvingForm.vue'),
                 },
                 {
                     name: 'ShelvingLog',

src/router/modules/travel.js

@@ -5,7 +5,7 @@ export default {
     name: 'Travel',
     meta: {
         title: 'travel',
-        icon: 'vn:package',
+        icon: 'local_airport',
     },
     component: RouterView,
     redirect: { name: 'TravelMain' },