src/components/CrudModel.vue

@@ -76,8 +76,13 @@ defineExpose({
     reset,
     hasChanges,
     saveChanges,
+    getFormData,
 });
 
+function getFormData() {
+    return formData.value;
+}
+
 async function fetch(data) {
     if (data && Array.isArray(data)) {
         let $index = 0;
@@ -196,7 +201,6 @@ function getChanges() {
     const creates = [];
 
     const pk = $props.primaryKey;
-
     for (const [i, row] of formData.value.entries()) {
         if (!row[pk]) {
             creates.push(row);
@@ -211,7 +215,6 @@ function getChanges() {
         }
     }
     const changes = { updates, creates };
-
     for (let prop in changes) {
         if (changes[prop].length === 0) changes[prop] = undefined;
     }

src/components/LeftMenu.vue

@@ -50,7 +50,7 @@ function addChildren(module, route, parent) {
         const matches = findMatches(mainMenus, route);
 
         for (const child of matches) {
-            navigation.addMenuItem(module, child, parent);
+            if (!child.meta.hidden) navigation.addMenuItem(module, child, parent);
         }
     }
 }

src/i18n/en/index.js

@@ -62,6 +62,10 @@ export default {
         selectRows: 'Select all { numberRows } row(s)',
         allRows: 'All { numberRows } row(s)',
         markAll: 'Mark all',
+        requiredField: 'Required field',
+        class: 'clase',
+        type: 'type',
+        reason: 'reason',
         noResults: 'No results',
         system: 'System',
     },
@@ -557,6 +561,7 @@ export default {
             vat: 'VAT',
             dueDay: 'Due day',
             intrastat: 'Intrastat',
+            corrective: 'Corrective',
             log: 'Logs',
         },
         list: {

src/i18n/es/index.js

@@ -62,6 +62,10 @@ export default {
         selectRows: 'Seleccionar las { numberRows } filas(s)',
         allRows: 'Todo { numberRows } filas(s)',
         markAll: 'Marcar todo',
+        requiredField: 'Campo obligatorio',
+        class: 'clase',
+        type: 'tipo',
+        reason: 'motivo',
         noResults: 'Sin resultados',
         system: 'Sistema',
     },
@@ -615,6 +619,7 @@ export default {
             vat: 'IVA',
             dueDay: 'Vencimiento',
             intrastat: 'Intrastat',
+            corrective: 'Rectificativa',
             log: 'Registros de auditoría',
         },
         list: {

src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -31,7 +31,6 @@ onBeforeMount(async () => {
         },
         0
     );
-    console.log(balanceDueTotal.value);
     stateStore.rightDrawer = true;
 });
 

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -485,7 +485,6 @@ const selectCustomerId = (id) => {
 };
 
 const selectSalesPersonId = (id) => {
-    console.log('selectedSalesPersonId:: ', selectedSalesPersonId.value);
     selectedSalesPersonId.value = id;
 };
 </script>

src/pages/Department/Card/DepartmentDescriptor.vue

@@ -44,7 +44,6 @@ const setData = (entity) => {
 };
 
 const removeDepartment = () => {
-    console.log('entityId: ', entityId.value);
     quasar
         .dialog({
             title: 'Are you sure you want to delete it?',

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -38,7 +38,7 @@ const inputFileRef = ref();
 const editDmsRef = ref();
 const createDmsRef = ref();
 
-const requiredFieldRule = (val) => val || t('Required field');
+const requiredFieldRule = (val) => val || t('globals.requiredField');
 const dateMask = '####-##-##';
 const fillMask = '_';
 
@@ -707,7 +707,6 @@ function supplierRefFilter(val) {
         Type: Tipo
         Description: Descripción
         Generate identifier for original file: Generar identificador para archivo original
-        Required field: Campo obligatorio
         File: Fichero
         Create document: Crear documento
         Select a file: Seleccione un fichero

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -44,8 +44,7 @@ const arrayData = useArrayData('InvoiceIn', {
     filter,
 });
 
-onMounted(async () => {
+onMounted(async () => await arrayData.fetch({ append: false }));
-    await arrayData.fetch({ append: false });
 watch(
     () => route.params.id,
     async (newId, oldId) => {
@@ -55,7 +54,6 @@ onMounted(async () => {
         }
     }
 );
-});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">

src/pages/InvoiceIn/Card/InvoiceInCorrective.vue

@@ -0,0 +1,221 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useFirstUpper } from 'src/composables/useFirstUpper';
+import CrudModel from 'src/components/CrudModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const invoiceId = route.params.id;
+const arrayData = useArrayData('InvoiceIn');
+const invoiceIn = computed(() => arrayData.store.data);
+const invoiceInCorrectionRef = ref();
+const filter = {
+    include: { relation: 'invoiceIn' },
+    where: { correctingFk: invoiceId },
+};
+const columns = computed(() => [
+    {
+        name: 'origin',
+        label: t('Original invoice'),
+        field: (row) => row.correctedFk,
+        model: 'correctedFk',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'type',
+        label: useFirstUpper(t('globals.type')),
+        field: (row) => row.cplusRectificationTypeFk,
+        options: cplusRectificationTypes.value,
+        model: 'cplusRectificationTypeFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'class',
+        label: useFirstUpper(t('globals.class')),
+        field: (row) => row.siiTypeInvoiceOutFk,
+        options: siiTypeInvoiceOuts.value,
+        model: 'siiTypeInvoiceOutFk',
+        optionValue: 'id',
+        optionLabel: 'code',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'reason',
+        label: useFirstUpper(t('globals.reason')),
+        field: (row) => row.invoiceCorrectionTypeFk,
+        options: invoiceCorrectionTypes.value,
+        model: 'invoiceCorrectionTypeFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+]);
+const cplusRectificationTypes = ref([]);
+const siiTypeInvoiceOuts = ref([]);
+const invoiceCorrectionTypes = ref([]);
+const rowsSelected = ref([]);
+
+const requiredFieldRule = (val) => val || t('globals.requiredField');
+
+const onSave = (data) => data?.deletes && router.push(`/invoice-in/${invoiceId}/summary`);
+</script>
+<template>
+    <FetchData
+        url="CplusRectificationTypes"
+        @on-fetch="(data) => (cplusRectificationTypes = data)"
+        auto-load
+    />
+    <FetchData
+        url="SiiTypeInvoiceOuts"
+        :where="{ code: { like: 'R%' } }"
+        @on-fetch="(data) => (siiTypeInvoiceOuts = data)"
+        auto-load
+    />
+    <FetchData
+        url="InvoiceCorrectionTypes"
+        @on-fetch="(data) => (invoiceCorrectionTypes = data)"
+        auto-load
+    />
+    <CrudModel
+        ref="invoiceInCorrectionRef"
+        v-if="invoiceIn"
+        data-key="InvoiceInCorrection"
+        url="InvoiceInCorrections"
+        :filter="filter"
+        auto-load
+        v-model:selected="rowsSelected"
+        primary-key="correctingFk"
+        @save-changes="onSave"
+    >
+        <template #body="{ rows }">
+            <QTable
+                v-model:selected="rowsSelected"
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="single"
+                hide-pagination
+                :grid="$q.screen.lt.sm"
+                :pagination="{ rowsPerPage: 0 }"
+            >
+                <template #body-cell-origin="{ row, col }">
+                    <QTd>
+                        <QInput v-model="row[col.model]" readonly />
+                    </QTd>
+                </template>
+                <template #body-cell-type="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :readonly="row.invoiceIn.isBooked"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-class="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :rules="[requiredFieldRule]"
+                            :readonly="row.invoiceIn.isBooked"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-reason="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :rules="[requiredFieldRule]"
+                            :readonly="row.invoiceIn.isBooked"
+                        />
+                    </QTd>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard bordered flat class="q-my-xs">
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList>
+                                <QItem>
+                                    <QInput
+                                        class="full-width"
+                                        :label="t('Original invoice')"
+                                        v-model="props.row['correctedFk']"
+                                        readonly
+                                    />
+                                </QItem>
+                                <QItem>
+                                    <VnSelectFilter
+                                        class="full-width"
+                                        v-model="props.row['cplusRectificationTypeFk']"
+                                        :options="cplusRectificationTypes"
+                                        option-value="id"
+                                        option-label="description"
+                                        :label="useFirstUpper(t('globals.type'))"
+                                        :readonly="props.row.invoiceIn.isBooked"
+                                    />
+                                </QItem>
+                                <QItem>
+                                    <VnSelectFilter
+                                        class="full-width"
+                                        v-model="props.row['siiTypeInvoiceOutFk']"
+                                        :options="siiTypeInvoiceOuts"
+                                        option-value="id"
+                                        option-label="code"
+                                        :label="useFirstUpper(t('globals.class'))"
+                                        :rules="[requiredFieldRule]"
+                                        :readonly="props.row.invoiceIn.isBooked"
+                                    />
+                                </QItem>
+                                <QItem>
+                                    <VnSelectFilter
+                                        class="full-width"
+                                        v-model="props.row['invoiceCorrectionTypeFk']"
+                                        :options="invoiceCorrectionTypes"
+                                        option-value="id"
+                                        option-label="description"
+                                        :label="useFirstUpper(t('globals.reason'))"
+                                        :rules="[requiredFieldRule]"
+                                        :readonly="props.row.invoiceIn.isBooked"
+                                    />
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+</template>
+<style scoped></style>
+<i18n>
+es:
+    Original invoice: Factura origen
+</i18n>

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, reactive, computed, onBeforeMount, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -15,6 +15,8 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import FetchData from 'src/components/FetchData.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import { useFirstUpper } from 'src/composables/useFirstUpper';
 
 const $props = defineProps({
     id: {
@@ -34,11 +36,14 @@ const arrayData = useArrayData('InvoiceIn');
 
 const invoiceIn = computed(() => arrayData.store.data);
 const cardDescriptorRef = ref();
+const correctionDialogRef = ref();
 const entityId = computed(() => $props.id || route.params.id);
 const totalAmount = ref();
 const currentAction = ref();
 const config = ref();
-
+const cplusRectificationTypes = ref([]);
+const siiTypeInvoiceOuts = ref([]);
+const invoiceCorrectionTypes = ref([]);
 const actions = {
     book: {
         title: 'Are you sure you want to book this invoice?',
@@ -59,6 +64,9 @@ const actions = {
     sendPdf: {
         cb: sendPdfInvoiceConfirmation,
     },
+    correct: {
+        cb: () => correctionDialogRef.value.show(),
+    },
 };
 const filter = {
     include: [
@@ -86,8 +94,86 @@ const filter = {
         },
     ],
 };
-
 const data = ref(useCardDescription());
+const invoiceInCorrection = reactive({
+    correcting: [],
+    corrected: null,
+});
+const routes = reactive({
+    getSupplier: (id) => {
+        return { name: 'SupplierCard', params: { id } };
+    },
+    getTickets: (id) => {
+        return {
+            name: 'InvoiceInList',
+            query: {
+                params: JSON.stringify({ supplierFk: id }),
+            },
+        };
+    },
+    getCorrection: (invoiceInCorrection) => {
+        if (invoiceInCorrection.correcting.length > 1)
+            return {
+                name: 'InvoiceInList',
+                query: {
+                    params: JSON.stringify({ correctedFk: entityId.value }),
+                },
+            };
+
+        return {
+            name: 'InvoiceInCard',
+            params: {
+                id: invoiceInCorrection.corrected ?? invoiceInCorrection.correcting[0],
+            },
+        };
+    },
+});
+const correctionFormData = reactive({
+    id: +entityId.value,
+    invoiceReason: 2,
+    invoiceType: 2,
+    invoiceClass: 6,
+});
+const isNotFilled = computed(() => Object.values(correctionFormData).includes(null));
+
+onBeforeMount(async () => await setInvoiceCorrection(entityId.value));
+
+watch(
+    () => route.params.id,
+    async (newId, oldId) => {
+        invoiceInCorrection.correcting.length = 0;
+        invoiceInCorrection.corrected = null;
+        if (newId) await setInvoiceCorrection(entityId.value);
+    }
+);
+
+async function setInvoiceCorrection(id) {
+    const [{ data: correctingData }, { data: correctedData }] = await Promise.all([
+        axios.get('InvoiceInCorrections', {
+            params: {
+                filter: {
+                    where: {
+                        correctingFk: id,
+                    },
+                },
+            },
+        }),
+        axios.get('InvoiceInCorrections', {
+            params: {
+                filter: {
+                    where: {
+                        correctedFk: id,
+                    },
+                },
+            },
+        }),
+    ]);
+    if (correctingData[0]) invoiceInCorrection.corrected = correctingData[0].correctedFk;
+
+    invoiceInCorrection.correcting = correctedData.map(
+        (corrected) => corrected.correctingFk
+    );
+}
 
 async function setData(entity) {
     data.value = useCardDescription(entity.supplierRef, entity.id);
@@ -104,7 +190,7 @@ function openDialog() {
     quasar.dialog({
         component: VnConfirm,
         componentProps: {
-            title: currentAction.value.title,
+            title: t(currentAction.value.title),
             promise: currentAction.value.action,
         },
     });
@@ -135,7 +221,6 @@ async function checkToBook() {
 async function toBook() {
     await axios.post(`InvoiceIns/${entityId.value}/toBook`);
 
-    // Pendiente de sincronizar todo con arrayData
     quasar.notify({
         type: 'positive',
         message: t('globals.dataSaved'),
@@ -163,6 +248,8 @@ async function cloneInvoice() {
     router.push({ path: `/invoice-in/${data.id}/summary` });
 }
 
+const requiredFieldRule = (val) => val || t('globals.requiredField');
+
 const isAdministrative = () => hasAny(['administrative']);
 
 const isAgricultural = () =>
@@ -202,6 +289,14 @@ function triggerMenu(type) {
     if (currentAction.value.cb) currentAction.value.cb();
     else openDialog(type);
 }
+
+const createInvoiceInCorrection = async () => {
+    const { data: correctingId } = await axios.post(
+        'InvoiceIns/corrective',
+        correctionFormData
+    );
+    router.push({ path: `/invoice-in/${correctingId}/summary` });
+};
 </script>
 
 <template>
@@ -211,7 +306,22 @@ function triggerMenu(type) {
         auto-load
         @on-fetch="(data) => (config = data)"
     />
-    <!--Refactor para añadir en el arrayData-->
+    <FetchData
+        url="CplusRectificationTypes"
+        @on-fetch="(data) => (cplusRectificationTypes = data)"
+        auto-load
+    />
+    <FetchData
+        url="SiiTypeInvoiceOuts"
+        :where="{ code: { like: 'R%' } }"
+        @on-fetch="(data) => (siiTypeInvoiceOuts = data)"
+        auto-load
+    />
+    <FetchData
+        url="InvoiceCorrectionTypes"
+        @on-fetch="(data) => (invoiceCorrectionTypes = data)"
+        auto-load
+    />
     <CardDescriptor
         ref="cardDescriptorRef"
         module="InvoiceIn"
@@ -265,6 +375,22 @@ function triggerMenu(type) {
                     >{{ t('Send agricultural receipt as PDF') }}...</QItemSection
                 >
             </QItem>
+            <QItem
+                v-if="!invoiceInCorrection.corrected"
+                v-ripple
+                clickable
+                @click="triggerMenu('correct')"
+            >
+                <QItemSection>{{ t('Create rectificative invoice') }}...</QItemSection>
+            </QItem>
+            <QItem
+                v-if="entity.dmsFk"
+                v-ripple
+                clickable
+                @click="downloadFile(entity.dmsFk)"
+            >
+                <QItemSection>{{ t('components.smartCard.downloadFile') }}</QItemSection>
+            </QItem>
             <QItem
                 v-if="entity.dmsFk"
                 v-ripple
@@ -285,29 +411,121 @@ function triggerMenu(type) {
         </template>
         <template #actions="{ entity }">
             <QCardActions>
-                <!--Sección proveedores no disponible-->
+                <QBtn
+                    size="md"
+                    icon="person"
+                    color="primary"
+                    :to="routes.getSupplier(entity.supplierFk)"
+                >
+                    <QTooltip>{{ t('invoiceIn.list.supplier') }}</QTooltip>
+                </QBtn>
                 <!--Sección entradas no disponible-->
                 <QBtn
                     size="md"
                     icon="vn:ticket"
                     color="primary"
-                    :to="{
+                    :to="routes.getTickets(entity.supplierFk)"
-                        name: 'InvoiceInList',
-                        query: {
-                            params: JSON.stringify({ supplierFk: entity.supplierFk }),
-                        },
-                    }"
                 >
                     <QTooltip>{{ t('invoiceOut.card.ticketList') }}</QTooltip>
                 </QBtn>
+                <!--Falta crear los iconos con la flecha-->
+                <QBtn
+                    v-if="
+                        invoiceInCorrection.corrected ||
+                        invoiceInCorrection.correcting.length
+                    "
+                    size="md"
+                    icon="attachment"
+                    color="primary"
+                    :to="routes.getCorrection(invoiceInCorrection)"
+                >
+                    <QTooltip>{{
+                        invoiceInCorrection.corrected
+                            ? t('Original invoice')
+                            : t('Rectificative invoice')
+                    }}</QTooltip>
+                </QBtn>
             </QCardActions>
         </template>
     </CardDescriptor>
+    <QDialog ref="correctionDialogRef">
+        <QCard>
+            <QCardSection>
+                <QItem class="q-px-none">
+                    <span class="text-primary text-h6 full-width">
+                        {{ t('Create rectificative invoice') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup />
+                </QItem>
+            </QCardSection>
+            <QCardSection>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('Original invoice')"
+                            v-model="correctionFormData.id"
+                            readonly
+                        />
+                        <VnSelectFilter
+                            :label="`${useFirstUpper(t('globals.class'))}*`"
+                            v-model="correctionFormData.invoiceClass"
+                            :options="siiTypeInvoiceOuts"
+                            option-value="id"
+                            option-label="code"
+                            :rules="[requiredFieldRule]"
+                        />
+                    </QItemSection>
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="`${useFirstUpper(t('globals.type'))}*`"
+                            v-model="correctionFormData.invoiceType"
+                            :options="cplusRectificationTypes"
+                            option-value="id"
+                            option-label="description"
+                            :rules="[requiredFieldRule]"
+                        />
+                        <VnSelectFilter
+                            :label="`${useFirstUpper(t('globals.reason'))}*`"
+                            v-model="correctionFormData.invoiceReason"
+                            :options="invoiceCorrectionTypes"
+                            option-value="id"
+                            option-label="description"
+                            :rules="[requiredFieldRule]"
+                        />
+                    </QItemSection>
+                </QItem>
+            </QCardSection>
+            <QCardActions class="justify-end q-mr-sm">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn
+                    :label="t('globals.save')"
+                    color="primary"
+                    v-close-popup
+                    @click="createInvoiceInCorrection"
+                    :disable="isNotFilled"
+                />
+            </QCardActions>
+        </QCard>
+    </QDialog>
 </template>
 <style lang="scss" scoped>
 .q-dialog {
     .q-card {
-        width: 35em;
+        max-width: 45em;
+        .q-item__section > .q-input {
+            padding-bottom: 1.4em;
+        }
+    }
+}
+
+@media (max-width: $breakpoint-xs) {
+    .q-dialog {
+        .q-card__section:nth-child(2) {
+            .q-item,
+            .q-item__section {
+                flex-direction: column;
+            }
+        }
     }
 }
 </style>
@@ -324,4 +542,7 @@ es:
     Send agricultural receipt as PDF: Enviar recibo agrícola como PDF
     Are you sure you want to send it?: Estás seguro que quieres enviarlo?
     Send PDF invoice: Enviar factura a PDF
+    Create rectificative invoice: Crear factura rectificativa
+    Rectificative invoice: Factura rectificativa
+    Original invoice: Factura origen
 </i18n>

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -1,12 +1,10 @@
 <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 { useFirstUpper } from 'src/composables/useFirstUpper';
-import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -36,32 +34,40 @@ const suppliersRef = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
+            <QList dense>
                 <QItem>
                     <QItemSection>
-                        <VnInput
+                        <QInput :label="t('Id or Supplier')" v-model="params.search">
-                            :label="t('Id or Supplier')"
-                            v-model="params.search"
-                            is-outlined
-                        >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </VnInput>
+                        </QInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput
+                        <QInput
                             :label="t('params.supplierRef')"
                             v-model="params.supplierRef"
-                            is-outlined
+                            @input.
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
-                        </VnInput>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="useFirstUpper(t('params.correctedFk'))"
+                            v-model="params.correctedFk"
+                        >
+                            <template #prepend>
+                                <QIcon name="attachment" size="sm" />
+                            </template>
+                        </QInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -73,67 +79,52 @@ const suppliersRef = ref();
                             option-value="id"
                             option-label="nickname"
                             @input-value="suppliersRef.fetch()"
-                            dense
-                            outlined
-                            rounded
                         >
                         </VnSelectFilter>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput
+                        <QInput :label="t('params.fi')" v-model="params.fi" lazy-rules>
-                            :label="t('params.fi')"
-                            v-model="params.fi"
-                            is-outlined
-                            lazy-rules
-                        >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </VnInput>
+                        </QInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput
+                        <QInput
                             :label="t('params.serialNumber')"
                             v-model="params.serialNumber"
-                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </VnInput>
+                        </QInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput
+                        <QInput
                             :label="t('params.serial')"
                             v-model="params.serial"
-                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </VnInput>
+                        </QInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput
+                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
-                            :label="t('Amount')"
-                            v-model="params.amount"
-                            is-outlined
-                            lazy-rules
-                        >
                             <template #prepend>
                                 <QIcon name="euro" size="sm"></QIcon>
                             </template>
-                        </VnInput>
+                        </QInput>
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
@@ -149,57 +140,137 @@ const suppliersRef = ref();
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <VnInput
+                            <QInput
                                 :label="t('params.awb')"
                                 v-model="params.awbCode"
-                                is-outlined
                                 lazy-rules
                             >
                                 <template #prepend>
                                     <QIcon name="badge" size="sm"></QIcon>
                                 </template>
-                            </VnInput>
+                            </QInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <VnInput
+                            <QInput
                                 :label="t('params.account')"
                                 v-model="params.account"
-                                is-outlined
                                 lazy-rules
                             >
                                 <template #prepend>
                                     <QIcon name="person" size="sm" />
                                 </template>
-                            </VnInput>
+                            </QInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <VnInputDate
+                            <QInput :label="t('From')" v-model="params.from" mask="date">
-                                :label="t('From')"
+                                <template #append>
-                                v-model="params.from"
+                                    <QIcon name="event" class="cursor-pointer">
-                                is-outlined
+                                        <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
                                                     />
-                        </QItemSection>
+                                                    <QBtn
-                    </QItem>
+                                                        :label="t('globals.confirm')"
-                    <QItem>
+                                                        color="primary"
-                        <QItemSection>
+                                                        flat
-                            <VnInputDate
+                                                        @click="save"
-                                :label="t('To')"
+                                                        v-close-popup
-                                v-model="params.to"
-                                is-outlined
                                                     />
+                                                </div>
+                                            </QDate>
+                                        </QPopupProxy>
+                                    </QIcon>
+                                </template>
+                            </QInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <VnInputDate
+                            <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>
+                        </QItemSection>
+                    </QItem>
+                    <QItem>
+                        <QItemSection>
+                            <QInput
                                 :label="t('Issued')"
                                 v-model="params.issued"
-                                is-outlined
+                                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>
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
@@ -208,15 +279,6 @@ const suppliersRef = ref();
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:
@@ -233,6 +295,7 @@ en:
         serial: Serial
         account: Account
         isBooked: is booked
+        correctedFk: Rectificatives
 es:
     params:
         search: Contiene
@@ -249,6 +312,7 @@ es:
         account: Cuenta
         created: Creada
         dued: Vencida
+        correctedFk: Rectificativas
     From: Desde
     To: Hasta
     Amount: Importe

src/router/modules/invoiceIn.js

@@ -17,6 +17,7 @@ export default {
             'InvoiceInDueDay',
             'InvoiceInIntrastat',
             'InvoiceInLog',
+            'InvoiceInCorrective',
         ],
     },
     children: [
@@ -102,6 +103,16 @@ export default {
                     },
                     component: () => import('src/pages/InvoiceIn/Card/InvoiceInLog.vue'),
                 },
+                {
+                    name: 'InvoiceInCorrective',
+                    path: 'corrective',
+                    meta: {
+                        title: 'corrective',
+                        icon: 'attachment',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Card/InvoiceInCorrective.vue'),
+                },
             ],
         },
     ],