0
0
Fork 0

refactor: refs #8316 used VnSection and VnCardBeta

This commit is contained in:
Jose Antonio Tubau 2024-12-27 13:45:01 +01:00
parent 93047ab179
commit 37a87fa8e1
5 changed files with 528 additions and 526 deletions

View File

@ -1,25 +1,12 @@
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import VnCard from 'components/common/VnCard.vue';
import VnCardBeta from 'components/common/VnCardBeta.vue';
import CustomerDescriptor from './CustomerDescriptor.vue';
import CustomerFilter from '../CustomerFilter.vue';
const route = useRoute();
const routeName = computed(() => route.name);
</script>
<template>
<VnCard
<VnCardBeta
data-key="Client"
base-url="Clients"
:descriptor="CustomerDescriptor"
:filter-panel="routeName != 'CustomerConsumption' && CustomerFilter"
search-data-key="CustomerList"
:searchbar-props="{
url: 'Clients/filter',
label: 'Search customer',
info: 'You can search by customer id or name',
}"
/>
</template>

View File

@ -5,18 +5,19 @@ import { useRouter } from 'vue-router';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toDate } from 'src/filters';
import RightMenu from 'src/components/common/RightMenu.vue';
import CustomerSummary from './Card/CustomerSummary.vue';
import CustomerFilter from './CustomerFilter.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnLocation from 'src/components/common/VnLocation.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
import VnSection from 'src/components/common/VnSection.vue';
const { t } = useI18n();
const router = useRouter();
const tableRef = ref();
const dataKey = 'CustomerList';
const columns = computed(() => [
{
align: 'left',
@ -390,82 +391,86 @@ function handleLocation(data, location) {
</script>
<template>
<VnSearchbar
:info="t('You can search by customer id or name')"
:label="t('Search customer')"
data-key="CustomerList"
/>
<RightMenu>
<template #right-panel>
<VnSection
:data-key="dataKey"
:columns="columns"
prefix="customer"
:array-data-props="{
url: 'Clients/filter',
exprBuilder,
}"
>
<template #rightMenu>
<CustomerFilter data-key="CustomerList" />
</template>
</RightMenu>
<VnTable
ref="tableRef"
data-key="CustomerList"
url="Clients/filter"
order="id DESC"
:create="{
urlCreate: 'Clients/createWithUser',
title: t('globals.pageTitles.customerCreate'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {
active: true,
isEqualizated: false,
},
}"
:columns="columns"
:right-search="false"
redirect="customer"
>
<template #more-create-dialog="{ data }">
<VnSelectWorker
:label="t('customer.summary.salesPerson')"
v-model="data.salesPersonFk"
:params="{
departmentCodes: ['VT', 'shopping'],
<template #body>
<VnTable
ref="tableRef"
:data-key="dataKey"
url="Clients/filter"
:create="{
urlCreate: 'Clients/createWithUser',
title: t('globals.pageTitles.customerCreate'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {
active: true,
isEqualizated: false,
},
}"
:has-avatar="true"
:id-value="data.salesPersonFk"
emit-value
auto-load
:columns="columns"
:right-search="false"
redirect="customer"
>
<template #prepend>
<VnAvatar
:worker-id="data.salesPersonFk"
color="primary"
:title="title"
<template #more-create-dialog="{ data }">
<VnSelectWorker
:label="t('customer.summary.salesPerson')"
v-model="data.salesPersonFk"
:params="{
departmentCodes: ['VT', 'shopping'],
}"
:has-avatar="true"
:id-value="data.salesPersonFk"
emit-value
auto-load
>
<template #prepend>
<VnAvatar
:worker-id="data.salesPersonFk"
color="primary"
:title="title"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
<QItemLabel caption
>{{ scope.opt?.nickname }},
{{ scope.opt?.code }}</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelectWorker>
<VnLocation
:acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
v-model="data.location"
@update:model-value="(location) => handleLocation(data, location)"
/>
<QInput v-model="data.userName" :label="t('Web user')" />
<QInput :label="t('Email')" clearable type="email" v-model="data.email">
<template #append>
<QIcon name="info" class="cursor-info">
<QTooltip max-width="400px">{{
t('customer.basicData.youCanSaveMultipleEmails')
}}</QTooltip>
</QIcon>
</template>
</QInput>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
<QItemLabel caption
>{{ scope.opt?.nickname }},
{{ scope.opt?.code }}</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelectWorker>
<VnLocation
:acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
v-model="data.location"
@update:model-value="(location) => handleLocation(data, location)"
/>
<QInput v-model="data.userName" :label="t('Web user')" />
<QInput :label="t('Email')" clearable type="email" v-model="data.email">
<template #append>
<QIcon name="info" class="cursor-info">
<QTooltip max-width="400px">{{
t('customer.basicData.youCanSaveMultipleEmails')
}}</QTooltip>
</QIcon>
</template>
</QInput>
</VnTable>
</template>
</VnTable>
</VnSection>
</template>
<i18n>
es:

View File

@ -94,3 +94,5 @@ customer:
hasToInvoiceByAddress: Invoice by address
isToBeMailed: Mailing
hasSepaVnl: VNL B2B received
search: Search customer
searchInfo: You can search by customer ID

View File

@ -1,5 +1,3 @@
Search customer: Buscar cliente
You can search by customer id or name: Puedes buscar por id o nombre del cliente
customer:
card:
debt: Riesgo
@ -96,3 +94,5 @@ customer:
hasToInvoiceByAddress: Factura por consigna
isToBeMailed: Env. emails
hasSepaVnl: Recibido B2B VNL
search: Buscar cliente
searchInfo: Puedes buscar por id o nombre del cliente

View File

@ -1,24 +1,12 @@
import { RouterView } from 'vue-router';
export default {
path: '/customer',
name: 'Customer',
meta: {
title: 'customers',
icon: 'vn:client',
moduleName: 'Customer',
keyBinding: 'c',
},
component: RouterView,
redirect: { name: 'CustomerMain' },
menus: {
main: [
'CustomerList',
'CustomerPayments',
'CustomerNotifications',
'CustomerDefaulter',
],
card: [
const customerCard = {
name: 'CustomerCard',
path: ':id',
component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
redirect: { name: 'CustomerSummary' },
meta: {
menu: [
'CustomerBasicData',
'CustomerFiscalData',
'CustomerBillingData',
@ -37,19 +25,449 @@ export default {
},
children: [
{
path: '',
name: 'CustomerMain',
component: () => import('src/components/common/VnModule.vue'),
redirect: { name: 'CustomerList' },
name: 'CustomerSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Customer/Card/CustomerSummary.vue'),
},
{
path: 'basic-data',
name: 'CustomerBasicData',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () =>
import('src/pages/Customer/Card/CustomerBasicData.vue'),
},
{
path: 'fiscal-data',
name: 'CustomerFiscalData',
meta: {
title: 'fiscalData',
icon: 'vn:dfiscales',
},
component: () =>
import('src/pages/Customer/Card/CustomerFiscalData.vue'),
},
{
path: 'billing-data',
name: 'CustomerBillingData',
meta: {
title: 'billingData',
icon: 'vn:payment',
},
component: () =>
import('src/pages/Customer/Card/CustomerBillingData.vue'),
},
{
path: 'address',
name: 'AddressCard',
redirect: { name: 'CustomerAddress' },
children: [
{
path: 'list',
name: 'CustomerList',
path: '',
name: 'CustomerAddress',
meta: {
title: 'list',
icon: 'view_list',
icon: 'vn:delivery',
title: 'consignees',
},
component: () =>
import('src/pages/Customer/Card/CustomerAddress.vue'),
},
{
path: 'create',
name: 'CustomerAddressCreate',
meta: {
title: 'address-create',
},
component: () =>
import(
'src/pages/Customer/components/CustomerAddressCreate.vue'
),
},
{
path: ':addressId',
name: 'CustomerAddressEditCard',
redirect: { name: 'CustomerAddressEdit' },
children: [
{
path: 'edit',
name: 'CustomerAddressEdit',
meta: {
title: 'addressEdit',
},
component: () =>
import(
'src/pages/Customer/components/CustomerAddressEdit.vue'
),
},
],
},
],
},
{
path: 'notes',
name: 'CustomerNotes',
meta: {
title: 'notes',
icon: 'vn:notes',
},
component: () => import('src/pages/Customer/Card/CustomerNotes.vue'),
},
{
path: 'credits',
name: 'CustomerCredits',
meta: {
title: 'credits',
icon: 'vn:credit',
},
component: () =>
import('src/pages/Customer/Card/CustomerCredits.vue'),
},
{
path: 'greuges',
name: 'CustomerGreuges',
meta: {
title: 'greuges',
icon: 'vn:greuge',
},
component: () =>
import('src/pages/Customer/Card/CustomerGreuges.vue'),
},
{
path: 'balance',
name: 'CustomerBalance',
meta: {
title: 'balance',
icon: 'balance',
},
component: () =>
import('src/pages/Customer/Card/CustomerBalance.vue'),
},
{
path: 'recoveries',
name: 'CustomerRecoveries',
meta: {
title: 'recoveries',
icon: 'vn:recovery',
},
component: () =>
import('src/pages/Customer/Card/CustomerRecoveries.vue'),
},
{
path: 'web-access',
name: 'CustomerWebAccess',
meta: {
title: 'webAccess',
icon: 'vn:web',
},
component: () =>
import('src/pages/Customer/Card/CustomerWebAccess.vue'),
},
{
path: 'log',
name: 'CustomerLog',
meta: {
title: 'log',
icon: 'vn:History',
},
component: () => import('src/pages/Customer/Card/CustomerLog.vue'),
},
{
path: 'sms',
name: 'CustomerSms',
meta: {
title: 'sms',
icon: 'sms',
},
component: () => import('src/pages/Customer/Card/CustomerSms.vue'),
},
{
path: 'credit-management',
name: 'CustomerCreditManagement',
meta: {
title: 'creditManagement',
icon: 'paid',
menuChildren: [
{
name: 'CustomerCreditContracts',
title: 'creditContracts',
icon: 'vn:solunion',
},
{
name: 'CustomerCreditOpinion',
title: 'creditOpinion',
icon: 'vn:linesprepaired',
},
],
},
children: [
{
path: 'credit-contracts',
name: 'CreditContractsCard',
redirect: { name: 'CustomerCreditContracts' },
children: [
{
path: '',
name: 'CustomerCreditContracts',
meta: {
title: 'creditContracts',
},
component: () =>
import(
'src/pages/Customer/Card/CustomerCreditContracts.vue'
),
},
{
path: 'create',
name: 'CustomerCreditContractsCreate',
component: () =>
import(
'src/pages/Customer/components/CustomerCreditContractsCreate.vue'
),
},
{
path: 'insurance/:creditId',
name: 'CustomerCreditContractsInsurance',
component: () =>
import(
'src/pages/Customer/components/CustomerCreditContractsInsurance.vue'
),
},
],
},
{
path: 'credit-opinion',
name: 'CustomerCreditOpinion',
meta: {
title: 'creditOpinion',
},
component: () =>
import(
'src/pages/Customer/Card/CustomerCreditOpinion.vue'
),
},
],
},
{
path: 'others',
name: 'CustomerOthers',
meta: {
title: 'others',
icon: 'pending',
menuChildren: [
{
name: 'CustomerSamples',
title: 'samples',
icon: 'vn:notes',
},
{
name: 'CustomerConsumption',
title: 'consumption',
icon: 'show_chart',
},
{
name: 'CustomerMandates',
title: 'mandates',
icon: 'vn:mandatory',
},
{
name: 'CustomerContacts',
title: 'contacts',
icon: 'contact_phone',
},
{
name: 'CustomerWebPayment',
title: 'webPayment',
icon: 'vn:onlinepayment',
},
{
name: 'CustomerFileManagement',
title: 'fileManagement',
icon: 'Upload',
},
{
name: 'CustomerUnpaid',
title: 'unpaid',
icon: 'vn:defaulter',
},
],
},
children: [
{
path: 'samples',
name: 'CustomerSamples',
meta: {
title: 'samples',
},
component: () =>
import('src/pages/Customer/Card/CustomerSamples.vue'),
},
{
path: 'samples',
name: 'CustomerSamplesCard',
redirect: { name: 'CustomerSamples' },
children: [
{
path: '',
name: 'CustomerSamples',
meta: {
title: 'samples',
},
component: () =>
import(
'src/pages/Customer/Card/CustomerSamples.vue'
),
},
{
path: 'create',
name: 'CustomerSamplesCreate',
component: () =>
import(
'src/pages/Customer/components/CustomerSamplesCreate.vue'
),
},
],
},
{
path: 'consumption',
name: 'CustomerConsumption',
meta: {
title: 'consumption',
},
component: () =>
import('src/pages/Customer/Card/CustomerConsumption.vue'),
},
{
path: 'mandates',
name: 'CustomerMandates',
meta: {
title: 'mandates',
},
component: () =>
import('src/pages/Customer/Card/CustomerMandates.vue'),
},
{
path: 'contacts',
name: 'CustomerContacts',
meta: {
title: 'contacts',
},
component: () =>
import('src/pages/Customer/Card/CustomerContacts.vue'),
},
{
path: 'web-payment',
name: 'CustomerWebPayment',
meta: {
title: 'webPayment',
},
component: () =>
import('src/pages/Customer/Card/CustomerWebPayment.vue'),
},
{
path: 'file-management',
name: 'CustomerFileManagement',
meta: {
title: 'fileManagement',
},
component: () =>
import(
'src/pages/Customer/Card/CustomerFileManagement.vue'
),
},
{
path: 'file-management',
name: 'CustomerFileManagementCard',
redirect: { name: 'CustomerFileManagement' },
children: [
{
path: '',
name: 'CustomerFileManagement',
meta: {
title: 'fileManagement',
},
component: () =>
import(
'src/pages/Customer/Card/CustomerFileManagement.vue'
),
},
{
path: 'create',
name: 'CustomerFileManagementCreate',
component: () =>
import(
'src/pages/Customer/components/CustomerFileManagementCreate.vue'
),
},
{
path: ':dmsId/edit',
name: 'CustomerFileManagementEdit',
component: () =>
import(
'src/pages/Customer/components/CustomerFileManagementEdit.vue'
),
},
],
},
{
path: 'unpaid',
name: 'CustomerUnpaid',
meta: {
title: 'unpaid',
},
component: () =>
import('src/pages/Customer/Card/CustomerUnpaid.vue'),
},
],
},
],
};
export default {
name: 'Customer',
path: '/customer',
meta: {
title: 'customers',
icon: 'vn:client',
moduleName: 'Customer',
keyBinding: 'c',
menu: [
'CustomerList',
'CustomerPayments',
'CustomerNotifications',
'CustomerDefaulter',
],
},
component: RouterView,
redirect: { name: 'CustomerMain' },
children: [
{
name: 'CustomerMain',
path: '',
component: () => import('src/components/common/VnModule.vue'),
redirect: { name: 'CustomerIndexMain' },
children: [
{
path: '',
name: 'CustomerIndexMain',
redirect: { name: 'CustomerList' },
component: () => import('src/pages/Customer/CustomerList.vue'),
children: [
{
name: 'CustomerList',
path: 'list',
meta: {
title: 'list',
icon: 'view_list',
},
},
customerCard,
],
},
{
path: 'create',
@ -94,415 +512,5 @@ export default {
},
],
},
{
name: 'CustomerCard',
path: ':id',
component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
redirect: { name: 'CustomerSummary' },
children: [
{
name: 'CustomerSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () =>
import('src/pages/Customer/Card/CustomerSummary.vue'),
},
{
path: 'basic-data',
name: 'CustomerBasicData',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () =>
import('src/pages/Customer/Card/CustomerBasicData.vue'),
},
{
path: 'fiscal-data',
name: 'CustomerFiscalData',
meta: {
title: 'fiscalData',
icon: 'vn:dfiscales',
},
component: () =>
import('src/pages/Customer/Card/CustomerFiscalData.vue'),
},
{
path: 'billing-data',
name: 'CustomerBillingData',
meta: {
title: 'billingData',
icon: 'vn:payment',
},
component: () =>
import('src/pages/Customer/Card/CustomerBillingData.vue'),
},
{
path: 'address',
name: 'AddressCard',
redirect: { name: 'CustomerAddress' },
children: [
{
path: '',
name: 'CustomerAddress',
meta: {
icon: 'vn:delivery',
title: 'consignees',
},
component: () =>
import('src/pages/Customer/Card/CustomerAddress.vue'),
},
{
path: 'create',
name: 'CustomerAddressCreate',
meta: {
title: 'address-create',
},
component: () =>
import(
'src/pages/Customer/components/CustomerAddressCreate.vue'
),
},
{
path: ':addressId',
name: 'CustomerAddressEditCard',
redirect: { name: 'CustomerAddressEdit' },
children: [
{
path: 'edit',
name: 'CustomerAddressEdit',
meta: {
title: 'addressEdit',
},
component: () =>
import(
'src/pages/Customer/components/CustomerAddressEdit.vue'
),
},
],
},
],
},
{
path: 'notes',
name: 'CustomerNotes',
meta: {
title: 'notes',
icon: 'vn:notes',
},
component: () => import('src/pages/Customer/Card/CustomerNotes.vue'),
},
{
path: 'credits',
name: 'CustomerCredits',
meta: {
title: 'credits',
icon: 'vn:credit',
},
component: () =>
import('src/pages/Customer/Card/CustomerCredits.vue'),
},
{
path: 'greuges',
name: 'CustomerGreuges',
meta: {
title: 'greuges',
icon: 'vn:greuge',
},
component: () =>
import('src/pages/Customer/Card/CustomerGreuges.vue'),
},
{
path: 'balance',
name: 'CustomerBalance',
meta: {
title: 'balance',
icon: 'balance',
},
component: () =>
import('src/pages/Customer/Card/CustomerBalance.vue'),
},
{
path: 'recoveries',
name: 'CustomerRecoveries',
meta: {
title: 'recoveries',
icon: 'vn:recovery',
},
component: () =>
import('src/pages/Customer/Card/CustomerRecoveries.vue'),
},
{
path: 'web-access',
name: 'CustomerWebAccess',
meta: {
title: 'webAccess',
icon: 'vn:web',
},
component: () =>
import('src/pages/Customer/Card/CustomerWebAccess.vue'),
},
{
path: 'log',
name: 'CustomerLog',
meta: {
title: 'log',
icon: 'vn:History',
},
component: () => import('src/pages/Customer/Card/CustomerLog.vue'),
},
{
path: 'sms',
name: 'CustomerSms',
meta: {
title: 'sms',
icon: 'sms',
},
component: () => import('src/pages/Customer/Card/CustomerSms.vue'),
},
{
path: 'credit-management',
name: 'CustomerCreditManagement',
meta: {
title: 'creditManagement',
icon: 'paid',
menuChildren: [
{
name: 'CustomerCreditContracts',
title: 'creditContracts',
icon: 'vn:solunion',
},
{
name: 'CustomerCreditOpinion',
title: 'creditOpinion',
icon: 'vn:linesprepaired',
},
],
},
children: [
{
path: 'credit-contracts',
name: 'CreditContractsCard',
redirect: { name: 'CustomerCreditContracts' },
children: [
{
path: '',
name: 'CustomerCreditContracts',
meta: {
title: 'creditContracts',
},
component: () =>
import(
'src/pages/Customer/Card/CustomerCreditContracts.vue'
),
},
{
path: 'create',
name: 'CustomerCreditContractsCreate',
component: () =>
import(
'src/pages/Customer/components/CustomerCreditContractsCreate.vue'
),
},
{
path: 'insurance/:creditId',
name: 'CustomerCreditContractsInsurance',
component: () =>
import(
'src/pages/Customer/components/CustomerCreditContractsInsurance.vue'
),
},
],
},
{
path: 'credit-opinion',
name: 'CustomerCreditOpinion',
meta: {
title: 'creditOpinion',
},
component: () =>
import(
'src/pages/Customer/Card/CustomerCreditOpinion.vue'
),
},
],
},
{
path: 'others',
name: 'CustomerOthers',
meta: {
title: 'others',
icon: 'pending',
menuChildren: [
{
name: 'CustomerSamples',
title: 'samples',
icon: 'vn:notes',
},
{
name: 'CustomerConsumption',
title: 'consumption',
icon: 'show_chart',
},
{
name: 'CustomerMandates',
title: 'mandates',
icon: 'vn:mandatory',
},
{
name: 'CustomerContacts',
title: 'contacts',
icon: 'contact_phone',
},
{
name: 'CustomerWebPayment',
title: 'webPayment',
icon: 'vn:onlinepayment',
},
{
name: 'CustomerFileManagement',
title: 'fileManagement',
icon: 'Upload',
},
{
name: 'CustomerUnpaid',
title: 'unpaid',
icon: 'vn:defaulter',
},
],
},
children: [
{
path: 'samples',
name: 'CustomerSamples',
meta: {
title: 'samples',
},
component: () =>
import('src/pages/Customer/Card/CustomerSamples.vue'),
},
{
path: 'samples',
name: 'CustomerSamplesCard',
redirect: { name: 'CustomerSamples' },
children: [
{
path: '',
name: 'CustomerSamples',
meta: {
title: 'samples',
},
component: () =>
import(
'src/pages/Customer/Card/CustomerSamples.vue'
),
},
{
path: 'create',
name: 'CustomerSamplesCreate',
component: () =>
import(
'src/pages/Customer/components/CustomerSamplesCreate.vue'
),
},
],
},
{
path: 'consumption',
name: 'CustomerConsumption',
meta: {
title: 'consumption',
},
component: () =>
import('src/pages/Customer/Card/CustomerConsumption.vue'),
},
{
path: 'mandates',
name: 'CustomerMandates',
meta: {
title: 'mandates',
},
component: () =>
import('src/pages/Customer/Card/CustomerMandates.vue'),
},
{
path: 'contacts',
name: 'CustomerContacts',
meta: {
title: 'contacts',
},
component: () =>
import('src/pages/Customer/Card/CustomerContacts.vue'),
},
{
path: 'web-payment',
name: 'CustomerWebPayment',
meta: {
title: 'webPayment',
},
component: () =>
import('src/pages/Customer/Card/CustomerWebPayment.vue'),
},
{
path: 'file-management',
name: 'CustomerFileManagement',
meta: {
title: 'fileManagement',
},
component: () =>
import(
'src/pages/Customer/Card/CustomerFileManagement.vue'
),
},
{
path: 'file-management',
name: 'CustomerFileManagementCard',
redirect: { name: 'CustomerFileManagement' },
children: [
{
path: '',
name: 'CustomerFileManagement',
meta: {
title: 'fileManagement',
},
component: () =>
import(
'src/pages/Customer/Card/CustomerFileManagement.vue'
),
},
{
path: 'create',
name: 'CustomerFileManagementCreate',
component: () =>
import(
'src/pages/Customer/components/CustomerFileManagementCreate.vue'
),
},
{
path: ':dmsId/edit',
name: 'CustomerFileManagementEdit',
component: () =>
import(
'src/pages/Customer/components/CustomerFileManagementEdit.vue'
),
},
],
},
{
path: 'unpaid',
name: 'CustomerUnpaid',
meta: {
title: 'unpaid',
},
component: () =>
import('src/pages/Customer/Card/CustomerUnpaid.vue'),
},
],
},
],
},
],
};