src/i18n/en/index.js

@@ -294,6 +294,50 @@ export default {
             returnOfMaterial: 'Return of material authorization (RMA)',
         },
     },
+    invoiceOut: {
+        pageTitles: {
+            invoiceOuts: 'InvoiceOuts',
+            list: 'List',
+            createInvoiceOut: 'Create invoice out',
+            summary: 'Summary',
+            basicData: 'Basic Data'
+        },
+        list: {
+            ref: 'Reference',
+            issued: 'Issued',
+            amount: 'Amount',
+            client: 'Client',
+            created: 'Created',
+            company: 'Company',
+            dued: 'Due date'
+        },
+        card: {
+            issued: 'Issued',
+            amount: 'Amount',
+            client: 'Client',
+            company: 'Company',
+            customerCard: 'Customer card',
+            ticketList: 'Ticket List'
+        },
+        summary: {
+            issued: 'Issued',
+            created: 'Created',
+            dued: 'Due',
+            booked: 'Booked',
+            company: 'Company',
+            taxBreakdown: 'Tax breakdown',
+            type: 'Type',
+            taxableBase: 'Taxable base',
+            rate: 'Rate',
+            fee: 'Fee',
+            tickets: 'Tickets',
+            ticketId: 'Ticket id',
+            nickname: 'Alias',
+            shipped: 'Shipped',
+            totalWithVat: 'Amount',
+
+        }
+    },
     components: {
         topbar: {},
         userPanel: {

src/i18n/es/index.js

@@ -293,6 +293,50 @@ export default {
             returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
         },
     },
+    invoiceOut: {
+        pageTitles: {
+            invoiceOuts: 'Fact. emitidas',
+            list: 'Listado',
+            createInvoiceOut: 'Crear fact. emitida',
+            summary: 'Resumen',
+            basicData: 'Datos básicos'
+        },
+        list: {
+            ref: 'Referencia',
+            issued: 'Fecha emisión',
+            amount: 'Importe',
+            client: 'Cliente',
+            created: 'Fecha creación',
+            company: 'Empresa',
+            dued: 'Fecha vencimineto'
+        },
+        card: {
+            issued: 'Fecha emisión',
+            amount: 'Importe',
+            client: 'Cliente',
+            company: 'Empresa',
+            customerCard: 'Ficha del cliente',
+            ticketList: 'Listado de tickets'
+        },
+        summary: {
+            issued: 'Fecha',
+            created: 'Fecha creación',
+            dued: 'Vencimiento',
+            booked: 'Contabilizada',
+            company: 'Empresa',
+            taxBreakdown: 'Desglose impositivo',
+            type: 'Tipo',
+            taxableBase: 'Base imp.',
+            rate: 'Tarifa',
+            fee: 'Cuota',
+            tickets: 'Tickets',
+            ticketId: 'Id ticket',
+            nickname: 'Alias',
+            shipped: 'F. envío',
+            totalWithVat: 'Importe',
+
+        }
+    },
     components: {
         topbar: {},
         userPanel: {

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { useState } from 'src/composables/useState';
+import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
+
+const state = useState();
+</script>
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+        <q-scroll-area class="fit">
+            <InvoiceOutDescriptor />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <q-page class="q-pa-md">
+            <router-view></router-view>
+        </q-page>
+    </q-page-container>
+</template>

src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toCurrency, toDate } from 'src/filters';
+import axios from 'axios';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+onMounted(async () => {
+    await fetch();
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const invoiceOut = ref();
+async function fetch() {
+    const filter = {
+        include: [
+            {
+                relation: 'company',
+                scope: {
+                    fields: ['id', 'code'],
+                },
+            },
+            {
+                relation: 'client',
+                scope: {
+                    fields: ['id', 'name', 'email'],
+                },
+            },
+        ],
+    };
+
+    const options = { params: { filter } };
+    const { data } = await axios.get(`InvoiceOuts/${entityId.value}`, options);
+    if (data) invoiceOut.value = data;
+}
+
+const filter = computed(() => {
+    return invoiceOut.value ? JSON.stringify({ refFk: invoiceOut.value.ref }) : null;
+});
+</script>
+
+<template>
+    <card-descriptor v-if="invoiceOut" module="InvoiceOut" :data="invoiceOut" :description="invoiceOut.ref">
+        <template #body>
+            <q-list>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('invoiceOut.card.issued') }}</q-item-label>
+                        <q-item-label>{{ toDate(invoiceOut.issued) }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('invoiceOut.card.amount') }}</q-item-label>
+                        <q-item-label>{{ toCurrency(invoiceOut.amount) }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="invoiceOut.company">
+                        <q-item-label caption>{{ t('invoiceOut.card.client') }}</q-item-label>
+                        <q-item-label class="link">
+                            {{ invoiceOut.client.name }}
+                            <q-popup-proxy>
+                                <customer-descriptor-popover :id="invoiceOut.client.id" />
+                            </q-popup-proxy>
+                        </q-item-label>
+                    </q-item-section>
+                    <q-item-section v-if="invoiceOut.company">
+                        <q-item-label caption>{{ t('invoiceOut.card.company') }}</q-item-label>
+                        <q-item-label>{{ invoiceOut.company.code }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+            <q-card-actions>
+                <q-btn
+                    size="md"
+                    icon="vn:client"
+                    color="primary"
+                    :to="{ name: 'CustomerCard', params: { id: invoiceOut.client.id } }"
+                >
+                    <q-tooltip>{{ t('invoiceOut.card.customerCard') }}</q-tooltip>
+                </q-btn>
+                <q-btn size="md" icon="vn:ticket" color="primary" :to="{ name: 'TicketList', params: { q: filter } }">
+                    <q-tooltip>{{ t('invoiceOut.card.ticketList') }}</q-tooltip>
+                </q-btn>
+            </q-card-actions>
+        </template>
+    </card-descriptor>
+</template>

src/pages/InvoiceOut/Card/InvoiceOutDescriptorPopover.vue

@@ -0,0 +1,15 @@
+<script setup>
+import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <q-card>
+        <invoiceOut-descriptor v-if="$props.id" :id="$props.id" />
+    </q-card>
+</template>

src/pages/InvoiceOut/Card/InvoiceOutSummary.vue

@@ -0,0 +1,201 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { toCurrency, toDate } from 'src/filters';
+import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+onMounted(() => fetch());
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const invoiceOut = ref(null);
+const tax = ref(null);
+const tikets = ref(null);
+
+function fetch() {
+    const id = entityId.value;
+
+    axios.get(`InvoiceOuts/${id}/summary`).then(({ data }) => {
+        invoiceOut.value = data.invoiceOut;
+        tax.value = data.invoiceOut.taxesBreakdown;
+        console.log('tax', tax);
+    });
+
+    axios.get(`InvoiceOuts/${id}/getTickets`).then(({ data }) => {
+        tikets.value = data;
+    });
+}
+
+const taxColumns = ref([
+    {
+        name: 'item',
+        label: 'invoiceOut.summary.type',
+        field: (row) => row.name,
+        sortable: true,
+    },
+    {
+        name: 'landed',
+        label: 'invoiceOut.summary.taxableBase',
+        field: (row) => row.taxableBase,
+        format: (value) => toCurrency(value),
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: 'invoiceOut.summary.rate',
+        field: (row) => row.rate,
+        sortable: true,
+    },
+    {
+        name: 'invoiceOuted',
+        label: 'invoiceOut.summary.fee',
+        field: (row) => row.vat,
+        sortable: true,
+    },
+]);
+
+const ticketsColumns = ref([
+    {
+        name: 'item',
+        label: 'invoiceOut.summary.ticketId',
+        field: (row) => row.id,
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: 'invoiceOut.summary.nickname',
+        field: (row) => row.nickname,
+        sortable: true,
+    },
+    {
+        name: 'landed',
+        label: 'invoiceOut.summary.shipped',
+        field: (row) => row.shipped,
+        format: (value) => toDate(value),
+        sortable: true,
+    },
+    {
+        name: 'landed',
+        label: 'invoiceOut.summary.totalWithVat',
+        field: (row) => row.totalWithVat,
+        format: (value) => toCurrency(value),
+        sortable: true,
+    },
+]);
+</script>
+
+<template>
+    <div class="summary container">
+        <q-card>
+            <skeleton-summary v-if="!invoiceOut" />
+            <template v-if="invoiceOut">
+                <div class="header bg-primary q-pa-sm q-mb-md">
+                    {{ invoiceOut.ref }} - {{ invoiceOut.client.socialName }}
+                </div>
+                <q-list>
+                    <q-item>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('invoiceOut.summary.issued') }}</q-item-label>
+                            <q-item-label>{{ toDate(invoiceOut.issued) }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('invoiceOut.summary.dued') }}</q-item-label>
+                            <q-item-label>{{ toDate(invoiceOut.dued) }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('invoiceOut.summary.created') }}</q-item-label>
+                            <q-item-label>{{ toDate(invoiceOut.created) }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('invoiceOut.summary.booked') }}</q-item-label>
+                            <q-item-label>{{ toDate(invoiceOut.booked) }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('invoiceOut.summary.company') }}</q-item-label>
+                            <q-item-label>{{ invoiceOut.company.code }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                </q-list>
+                <q-card-section class="q-pa-md">
+                    <h6>{{ t('invoiceOut.summary.taxBreakdown') }}</h6>
+                    <q-table :columns="taxColumns" :rows="tax" flat>
+                        <template #header="props">
+                            <q-tr :props="props">
+                                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                                    {{ t(col.label) }}
+                                </q-th>
+                            </q-tr>
+                        </template>
+                    </q-table>
+                </q-card-section>
+                <q-card-section class="q-pa-md">
+                    <h6>{{ t('invoiceOut.summary.tickets') }}</h6>
+                    <q-table :columns="ticketsColumns" :rows="tikets" flat>
+                        <template #header="props">
+                            <q-tr :props="props">
+                                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                                    {{ t(col.label) }}
+                                </q-th>
+                            </q-tr>
+                        </template>
+                    </q-table>
+                </q-card-section>
+            </template>
+        </q-card>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.q-card {
+    width: 100%;
+    min-width: 950px;
+    max-width: 950px;
+}
+
+.summary {
+    .header {
+        text-align: center;
+        font-size: 18px;
+    }
+
+    #slider-container {
+        max-width: 80%;
+        margin: 0 auto;
+
+        .q-slider {
+            .q-slider__marker-labels:nth-child(1) {
+                transform: none;
+            }
+            .q-slider__marker-labels:nth-child(2) {
+                transform: none;
+                left: auto !important;
+                right: 0%;
+            }
+        }
+    }
+}
+
+.q-dialog .summary {
+    max-width: 1200px;
+}
+</style>

src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import InvoiceOutSummary from './InvoiceOutSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <invoiceOut-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import Paginate from 'src/components/Paginate.vue';
+import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
+import { toDate, toCurrency } from 'src/filters/index';
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/invoiceOut/${id}` });
+}
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: InvoiceOutSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
+</script>
+
+<template>
+    <q-page class="q-pa-md">
+        <paginate url="/InvoiceOuts/filter" sort-by="issued DESC, id DESC" auto-load>
+            <template #body="{ rows }">
+                <q-card class="card" v-for="row of rows" :key="row.id">
+                    <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
+                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <div class="text-h6">{{ row.ref }}</div>
+                            <q-item-label caption>#{{ row.id }}</q-item-label>
+                            <q-list>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('invoiceOut.list.issued') }}</q-item-label>
+                                        <q-item-label>{{ toDate(row.issued) }}</q-item-label>
+                                    </q-item-section>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('invoiceOut.list.amount') }}</q-item-label>
+                                        <q-item-label>{{ toCurrency(row.amount) }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('invoiceOut.list.client') }}</q-item-label>
+                                        <q-item-label>{{ row.clientSocialName }}</q-item-label>
+                                    </q-item-section>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('invoiceOut.list.created') }}</q-item-label>
+                                        <q-item-label>{{ toDate(row.created) }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('invoiceOut.list.company') }}</q-item-label>
+                                        <q-item-label>{{ row.companyCode }}</q-item-label>
+                                    </q-item-section>
+                                    <q-item-section>
+                                        <q-item-label caption>{{ t('invoiceOut.list.dued') }}</q-item-label>
+                                        <q-item-label>{{ toDate(row.dued) }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-item-section>
+                        <q-separator vertical />
+                        <q-card-actions vertical class="justify-between">
+                            <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
+                                <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
+                            </q-btn>
+                            <q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
+                                <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
+                            </q-btn>
+                        </q-card-actions>
+                    </q-item>
+                </q-card>
+            </template>
+        </paginate>
+    </q-page>
+</template>

src/pages/InvoiceOut/InvoiceOutMain.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+</script>
+
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>

src/router/modules/invoiceOut.js

@@ -0,0 +1,47 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/invoiceOut',
+    name: 'InvoiceOut',
+    meta: {
+        title: 'invoiceOuts',
+        icon: 'vn:invoice-out'
+    },
+    component: RouterView,
+    redirect: { name: 'InvoiceOutMain' },
+    children: [
+        {
+            path: '',
+            name: 'InvoiceOutMain',
+            component: () => import('src/pages/InvoiceOut/InvoiceOutMain.vue'),
+            redirect: { name: 'InvoiceOutList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'InvoiceOutList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'),
+                }
+            ]
+        },
+        {
+            name: 'InvoiceOutCard',
+            path: ':id',
+            component: () => import('src/pages/InvoiceOut/Card/InvoiceOutCard.vue'),
+            redirect: { name: 'InvoiceOutSummary' },
+            children: [
+                {
+                    name: 'InvoiceOutSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary'
+                    },
+                    component: () => import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
+                }
+            ]
+        },
+    ]
+};

src/router/routes.js

@@ -1,6 +1,7 @@
 import customer from './modules/customer';
 import ticket from './modules/ticket';
 import claim from './modules/claim';
+import invoiceOut from './modules/invoiceOut';
 
 const routes = [
     {
@@ -25,6 +26,7 @@ const routes = [
             customer,
             ticket,
             claim,
+            invoiceOut,
             {
                 path: '/:pathMatch(.*)*',
                 name: 'NotFound',
@@ -34,4 +36,4 @@ const routes = [
     }
 ];
 
-export default routes;
+export default routes;