From 5729204a3b39c5f2e56f33cdd6742ffdd990b897 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Thu, 28 Dec 2023 10:25:23 -0500
Subject: [PATCH] Se crea tabla y filtros de morosos en clientes

---
 src/i18n/en/index.js                          |   9 +-
 src/i18n/es/index.js                          |   9 +-
 .../Customer/Defaulter/CustomerDefaulter.vue  | 253 ++++++++++++++++++
 .../Defaulter/CustomerDefaulterFilter.vue     | 238 ++++++++++++++++
 .../CustomerExtendedList.vue                  |   0
 .../CustomerExtendedListActions.vue           |   2 +-
 .../CustomerExtendedListFilter.vue            |  17 +-
 .../CustomerNotifications.vue                 |   2 +-
 .../CustomerNotificationsFilter.vue           |  50 ++--
 .../{ => Payments}/CustomerPayments.vue       |   2 +-
 .../{ => Payments}/CustomerPaymentsFilter.vue |   0
 src/router/modules/customer.js                |  22 +-
 .../pages/Customer/CustomerPayments.spec.js   |   8 +-
 13 files changed, 552 insertions(+), 60 deletions(-)
 create mode 100644 src/pages/Customer/Defaulter/CustomerDefaulter.vue
 create mode 100644 src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
 rename src/pages/Customer/{ => ExtendedList}/CustomerExtendedList.vue (100%)
 rename src/pages/Customer/{ => ExtendedList}/CustomerExtendedListActions.vue (94%)
 rename src/pages/Customer/{ => ExtendedList}/CustomerExtendedListFilter.vue (91%)
 rename src/pages/Customer/{ => Notifications}/CustomerNotifications.vue (98%)
 rename src/pages/Customer/{ => Notifications}/CustomerNotificationsFilter.vue (94%)
 rename src/pages/Customer/{ => Payments}/CustomerPayments.vue (99%)
 rename src/pages/Customer/{ => Payments}/CustomerPaymentsFilter.vue (100%)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index f7234ba57..18a2e4ecf 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -113,6 +113,7 @@ export default {
             webPayments: 'Web Payments',
             extendedList: 'Extended list',
             notifications: 'Notifications',
+            defaulter: 'Defaulter',
             createCustomer: 'Create customer',
             summary: 'Summary',
             basicData: 'Basic Data',
@@ -568,7 +569,7 @@ export default {
             landed: 'Landed',
             hour: 'Hour',
             agency: 'Agency',
-            total: 'Total'
+            total: 'Total',
         },
         form: {
             clientFk: 'Client',
@@ -577,7 +578,7 @@ export default {
             agencyModeFk: 'Agency',
         },
         list: {
-            newOrder: 'New Order'
+            newOrder: 'New Order',
         },
         summary: {
             basket: 'Basket',
@@ -603,8 +604,8 @@ export default {
             description: 'Description',
             quantity: 'Quantity',
             price: 'Price',
-            amount: 'Amount'
-        }
+            amount: 'Amount',
+        },
     },
     worker: {
         pageTitles: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index f96add139..af8191052 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -113,6 +113,7 @@ export default {
             webPayments: 'Pagos Web',
             extendedList: 'Listado extendido',
             notifications: 'Notificaciones',
+            defaulter: 'Morosos',
             createCustomer: 'Crear cliente',
             basicData: 'Datos básicos',
             summary: 'Resumen',
@@ -477,7 +478,7 @@ export default {
             landed: 'F. entrega',
             hour: 'Hora',
             agency: 'Agencia',
-            total: 'Total'
+            total: 'Total',
         },
         form: {
             clientFk: 'Cliente',
@@ -486,7 +487,7 @@ export default {
             agencyModeFk: 'Agencia',
         },
         list: {
-            newOrder: 'Nuevo Pedido'
+            newOrder: 'Nuevo Pedido',
         },
         summary: {
             basket: 'Cesta',
@@ -512,8 +513,8 @@ export default {
             description: 'Descripción',
             quantity: 'Cantidad',
             price: 'Precio',
-            amount: 'Monto'
-        }
+            amount: 'Monto',
+        },
     },
     shelving: {
         pageTitles: {
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
new file mode 100644
index 000000000..b35980416
--- /dev/null
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -0,0 +1,253 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { QBtn, QCheckbox } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+
+import { toCurrency, toDate } from 'filters/index';
+import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+
+onBeforeMount(async () => {
+    arrayData.value = useArrayData('CustomerDefaulter', {
+        url: 'Defaulters/filter',
+        limit: 0,
+    });
+    await arrayData.value.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
+
+const rows = computed(() => arrayData.value.store.data);
+
+const selected = ref([]);
+const worderId = ref(0);
+const customerId = ref(0);
+
+const tableColumnComponents = {
+    client: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectClientId(prop.row.clientFk),
+    },
+    isWorker: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => {},
+    },
+    salesperson: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectSalespersonId(prop.row.salesPersonFk),
+    },
+    country: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    paymentMethod: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    balance: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    author: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectAuthorId(prop.row.workerFk),
+    },
+    lastObservation: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    date: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    credit: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    from: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => {
+    return [
+        {
+            align: 'left',
+            field: 'clientName',
+            label: t('Client'),
+            name: 'client',
+        },
+        {
+            align: 'left',
+            field: 'isWorker',
+            label: t('Is worker'),
+            name: 'isWorker',
+        },
+        {
+            align: 'left',
+            field: 'salesPersonName',
+            label: t('Salesperson'),
+            name: 'salesperson',
+        },
+        {
+            align: 'left',
+            field: 'country',
+            label: t('Country'),
+            name: 'country',
+        },
+        {
+            align: 'left',
+            field: 'payMethod',
+            label: t('P. Method'),
+            name: 'paymentMethod',
+        },
+        {
+            align: 'left',
+            field: (row) => toCurrency(row.amount),
+            label: t('Balance D.'),
+            name: 'balance',
+        },
+        {
+            align: 'left',
+            field: 'workerName',
+            label: t('Author'),
+            name: 'author',
+        },
+        {
+            align: 'left',
+            field: 'observation',
+            label: t('Last observation'),
+            name: 'lastObservation',
+        },
+        {
+            align: 'left',
+            field: (row) => toDate(row.created),
+            label: t('L. O. Date'),
+            name: 'date',
+        },
+        {
+            align: 'left',
+            field: (row) => toCurrency(row.creditInsurance),
+            label: t('Credit I.'),
+            name: 'credit',
+        },
+        {
+            align: 'left',
+            field: (row) => toDate(row.defaulterSinced),
+            label: t('From'),
+            name: 'from',
+        },
+    ];
+});
+
+const selectClientId = (id) => {
+    worderId.value = 0;
+    customerId.value = id;
+};
+
+const selectSalespersonId = (id) => {
+    customerId.value = 0;
+    worderId.value = id;
+};
+
+const selectAuthorId = (id) => {
+    customerId.value = 0;
+    worderId.value = id;
+};
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <CustomerNotificationsFilter data-key="CustomerDefaulter" />
+        </QScrollArea>
+    </QDrawer>
+
+    <QToolbar class="bg-vn-dark">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 0 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            hide-bottom
+            row-key="id"
+            selection="multiple"
+            v-model:selected="selected"
+        >
+            <template #top>
+                <div v-if="rows" class="full-width flex justify-end">
+                    {{ `${rows.length} ${t('route.cmr.list.results')}` }}
+                </div>
+            </template>
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                        >
+                            {{ props.value }}
+
+                            <WorkerDescriptorProxy v-if="worderId" :id="worderId" />
+                            <CustomerDescriptorProxy v-else :id="customerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px 6px 6px 6px;
+}
+</style>
+
+<i18n>
+es:
+    Client: Cliente
+    Is worker: Es trabajador
+    Salesperson: Comercial
+    Country: País
+    P. Method: F. Pago
+    Balance D.: Saldo V.
+    Author: Autor
+    Last observation: Última observación
+    L. O. Date: Fecha Ú. O.
+    Credit I.: Crédito A.
+    From: Desde
+</i18n>
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
new file mode 100644
index 000000000..43ceb1bac
--- /dev/null
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@@ -0,0 +1,238 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const clients = ref();
+const salespersons = ref();
+const countries = ref();
+const authors = ref();
+</script>
+
+<template>
+    <FetchData @on-fetch="(data) => (clients = data)" auto-load url="Clients" />
+    <FetchData
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (salespersons = data)"
+        auto-load
+        url="Workers/activeWithInheritedRole"
+    />
+    <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
+    <FetchData
+        @on-fetch="(data) => (authors = data)"
+        auto-load
+        url="Workers/activeWithInheritedRole"
+    />
+
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+
+        <template #body="{ params }">
+            <QList dense class="list">
+                <QItem class="q-mb-sm q-mt-sm">
+                    <QItemSection v-if="clients">
+                        <VnSelectFilter
+                            :input-debounce="0"
+                            :label="t('Client')"
+                            :options="clients"
+                            dense
+                            emit-value
+                            hide-selected
+                            map-options
+                            option-label="name"
+                            option-value="clientTypeFk"
+                            outlined
+                            rounded
+                            use-input
+                            v-model="params.clientFk"
+                        />
+                    </QItemSection>
+                    <QItemSection v-else>
+                        <QSkeleton class="full-width" type="QInput" />
+                    </QItemSection>
+                </QItem>
+
+                <QItem class="q-mb-sm">
+                    <QItemSection v-if="salespersons">
+                        <VnSelectFilter
+                            :input-debounce="0"
+                            :label="t('Salesperson')"
+                            :options="salespersons"
+                            dense
+                            emit-value
+                            hide-selected
+                            map-options
+                            option-label="name"
+                            option-value="id"
+                            outlined
+                            rounded
+                            use-input
+                            v-model="params.salesPersonFk"
+                        />
+                    </QItemSection>
+                    <QItemSection v-else>
+                        <QSkeleton class="full-width" type="QInput" />
+                    </QItemSection>
+                </QItem>
+
+                <QItem class="q-mb-sm">
+                    <QItemSection v-if="countries">
+                        <VnSelectFilter
+                            :input-debounce="0"
+                            :label="t('Country')"
+                            :options="countries"
+                            dense
+                            emit-value
+                            hide-selected
+                            map-options
+                            option-label="country"
+                            option-value="id"
+                            outlined
+                            rounded
+                            use-input
+                            v-model="params.countryFk"
+                        />
+                    </QItemSection>
+                    <QItemSection v-else>
+                        <QSkeleton class="full-width" type="QInput" />
+                    </QItemSection>
+                </QItem>
+
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInput
+                            :label="t('P. Method')"
+                            is-outlined
+                            v-model="params.paymentMethod"
+                        />
+                    </QItemSection>
+                </QItem>
+
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInput
+                            :label="t('Balance D.')"
+                            is-outlined
+                            v-model="params.balance"
+                        />
+                    </QItemSection>
+                </QItem>
+
+                <QItem class="q-mb-sm">
+                    <QItemSection v-if="authors">
+                        <VnSelectFilter
+                            :input-debounce="0"
+                            :label="t('Author')"
+                            :options="authors"
+                            dense
+                            emit-value
+                            hide-selected
+                            map-options
+                            option-label="name"
+                            option-value="id"
+                            outlined
+                            rounded
+                            use-input
+                            v-model="params.workerFk"
+                        />
+                    </QItemSection>
+                    <QItemSection v-else>
+                        <QSkeleton class="full-width" type="QInput" />
+                    </QItemSection>
+                </QItem>
+
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInput
+                            :label="t('L. O. Date')"
+                            is-outlined
+                            v-model="params.date"
+                        />
+                    </QItemSection>
+                </QItem>
+
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInput
+                            :label="t('Credit I.')"
+                            is-outlined
+                            v-model="params.credit"
+                        />
+                    </QItemSection>
+                </QItem>
+
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInputDate
+                            :label="t('From')"
+                            is-outlined
+                            v-model="params.defaulterSinced"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QSeparator />
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        clientFk: Client
+        salesPersonFk: Salesperson
+        countryFk: Country
+        paymentMethod: P. Method
+        balance: Balance D.
+        workerFk: Author
+        date: L. O. Date
+        credit: Credit I.
+        defaulterSinced: From
+es:
+    params:
+        clientFk: Cliente
+        salesPersonFk: Comercial
+        countryFk: País
+        paymentMethod: F. Pago
+        balance: Saldo V.
+        workerFk: Autor
+        date: Fecha Ú. O.
+        credit: Crédito A.
+        defaulterSinced: Desde
+    Client: Cliente
+    Salesperson: Comercial
+    Country: País
+    P. Method: F. Pago
+    Balance D.: Saldo V.
+    Author: Autor
+    L. O. Date: Fecha Ú. O.
+    Credit I.: Crédito A.
+    From: Desde
+</i18n>
diff --git a/src/pages/Customer/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
similarity index 100%
rename from src/pages/Customer/CustomerExtendedList.vue
rename to src/pages/Customer/ExtendedList/CustomerExtendedList.vue
diff --git a/src/pages/Customer/CustomerExtendedListActions.vue b/src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue
similarity index 94%
rename from src/pages/Customer/CustomerExtendedListActions.vue
rename to src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue
index 1fec71ffe..7e3639522 100644
--- a/src/pages/Customer/CustomerExtendedListActions.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue
@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
 
 import { useQuasar } from 'quasar';
 
-import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
+import CustomerSummaryDialog from '../Card/CustomerSummaryDialog.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
diff --git a/src/pages/Customer/CustomerExtendedListFilter.vue b/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
similarity index 91%
rename from src/pages/Customer/CustomerExtendedListFilter.vue
rename to src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
index ba1c966dc..dbed3141d 100644
--- a/src/pages/Customer/CustomerExtendedListFilter.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
@@ -80,7 +80,7 @@ const workers = ref();
                     <QItemSection v-if="workers">
                         <VnSelectFilter
                             :label="t('Salesperson')"
-                            v-model="params.salesPersonFk"
+                            v-model="params.salesPerson"
                             @update:model-value="searchFn()"
                             :options="workers"
                             option-value="id"
@@ -128,22 +128,7 @@ const workers = ref();
 </style>
 
 <i18n>
-en:
-    params:
-        identifier: Identifier
-        socialName: Social name
-        salesPerson: Salesperson
-        phone: Phone
-        city: City
-        email: Email
 es:
-    params:
-        identifier: Identificador
-        socialName: Razón social
-        salesPerson: Comercial
-        phone: Teléfono
-        city: Población
-        email: Email
     Identifier: Identificador
     Social name: Razón social
     Salesperson: Comercial
diff --git a/src/pages/Customer/CustomerNotifications.vue b/src/pages/Customer/Notifications/CustomerNotifications.vue
similarity index 98%
rename from src/pages/Customer/CustomerNotifications.vue
rename to src/pages/Customer/Notifications/CustomerNotifications.vue
index 91d137763..f9ff66a7b 100644
--- a/src/pages/Customer/CustomerNotifications.vue
+++ b/src/pages/Customer/Notifications/CustomerNotifications.vue
@@ -8,7 +8,7 @@ import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 
 import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
-import CustomerDescriptorProxy from './Card/CustomerDescriptorProxy.vue';
+import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
diff --git a/src/pages/Customer/CustomerNotificationsFilter.vue b/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
similarity index 94%
rename from src/pages/Customer/CustomerNotificationsFilter.vue
rename to src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
index 1c4c8f3e2..650158278 100644
--- a/src/pages/Customer/CustomerNotificationsFilter.vue
+++ b/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -15,18 +15,18 @@ const props = defineProps({
     },
 });
 
-const clients = ref();
 const cities = ref();
+const clients = ref();
 </script>
 
 <template>
     <FetchData
-        url="Clients"
         :filter="{ where: { role: 'socialName' } }"
         @on-fetch="(data) => (clients = data)"
         auto-load
+        url="Clients"
     />
-    <FetchData url="Towns" @on-fetch="(data) => (cities = data)" auto-load />
+    <FetchData @on-fetch="(data) => (cities = data)" auto-load url="Towns" />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -41,8 +41,8 @@ const cities = ref();
                     <QItemSection>
                         <VnInput
                             :label="t('Identifier')"
-                            v-model="params.identifier"
                             is-outlined
+                            v-model="params.identifier"
                         />
                     </QItemSection>
                 </QItem>
@@ -53,20 +53,20 @@ const cities = ref();
                     </QItemSection>
                     <QItemSection v-if="clients">
                         <VnSelectFilter
+                            :input-debounce="0"
                             :label="t('Social name')"
-                            v-model="params.socialName"
-                            @update:model-value="searchFn()"
                             :options="clients"
-                            option-value="socialName"
-                            option-label="socialName"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
+                            @update:model-value="searchFn()"
                             dense
+                            emit-value
+                            hide-selected
+                            map-options
+                            option-label="socialName"
+                            option-value="socialName"
                             outlined
                             rounded
-                            :input-debounce="0"
+                            use-input
+                            v-model="params.socialName"
                         />
                     </QItemSection>
                 </QItem>
@@ -77,33 +77,33 @@ const cities = ref();
                     </QItemSection>
                     <QItemSection v-if="cities">
                         <VnSelectFilter
+                            :input-debounce="0"
                             :label="t('City')"
-                            v-model="params.city"
-                            @update:model-value="searchFn()"
                             :options="cities"
-                            option-value="name"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
+                            @update:model-value="searchFn()"
                             dense
+                            emit-value
+                            hide-selected
+                            map-options
+                            option-label="name"
+                            option-value="name"
                             outlined
                             rounded
-                            :input-debounce="0"
+                            use-input
+                            v-model="params.city"
                         />
                     </QItemSection>
                 </QItem>
 
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <VnInput :label="t('Phone')" v-model="params.phone" is-outlined />
+                        <VnInput :label="t('Phone')" is-outlined v-model="params.phone" />
                     </QItemSection>
                 </QItem>
 
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <VnInput :label="t('Email')" v-model="params.email" is-outlined />
+                        <VnInput :label="t('Email')" is-outlined v-model="params.email" />
                     </QItemSection>
                 </QItem>
                 <QSeparator />
diff --git a/src/pages/Customer/CustomerPayments.vue b/src/pages/Customer/Payments/CustomerPayments.vue
similarity index 99%
rename from src/pages/Customer/CustomerPayments.vue
rename to src/pages/Customer/Payments/CustomerPayments.vue
index 24e5efa39..b4a907665 100644
--- a/src/pages/Customer/CustomerPayments.vue
+++ b/src/pages/Customer/Payments/CustomerPayments.vue
@@ -7,7 +7,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
-import CustomerDescriptorProxy from './Card/CustomerDescriptorProxy.vue';
+import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
 import { toDate, toCurrency } from 'filters/index';
 import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
 
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/Payments/CustomerPaymentsFilter.vue
similarity index 100%
rename from src/pages/Customer/CustomerPaymentsFilter.vue
rename to src/pages/Customer/Payments/CustomerPaymentsFilter.vue
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 04cbf42b3..51511bcbf 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -15,6 +15,7 @@ export default {
             'CustomerPayments',
             'CustomerExtendedList',
             'CustomerNotifications',
+            'CustomerDefaulter',
         ],
         card: ['CustomerBasicData'],
     },
@@ -49,7 +50,8 @@ export default {
                         title: 'webPayments',
                         icon: 'vn:onlinepayment',
                     },
-                    component: () => import('src/pages/Customer/CustomerPayments.vue'),
+                    component: () =>
+                        import('src/pages/Customer/Payments/CustomerPayments.vue'),
                 },
                 {
                     path: 'extendedList',
@@ -59,7 +61,9 @@ export default {
                         icon: 'vn:client',
                     },
                     component: () =>
-                        import('src/pages/Customer/CustomerExtendedList.vue'),
+                        import(
+                            'src/pages/Customer/ExtendedList/CustomerExtendedList.vue'
+                        ),
                 },
                 {
                     path: 'notifications',
@@ -69,7 +73,19 @@ export default {
                         icon: 'notifications',
                     },
                     component: () =>
-                        import('src/pages/Customer/CustomerNotifications.vue'),
+                        import(
+                            'src/pages/Customer/Notifications/CustomerNotifications.vue'
+                        ),
+                },
+                {
+                    path: 'defaulter',
+                    name: 'CustomerDefaulter',
+                    meta: {
+                        title: 'defaulter',
+                        icon: 'vn:risk',
+                    },
+                    component: () =>
+                        import('src/pages/Customer/Defaulter/CustomerDefaulter.vue'),
                 },
             ],
         },
diff --git a/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js b/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
index 5d096f113..13293f596 100644
--- a/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
+++ b/test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
@@ -1,11 +1,10 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
 import { createWrapper, axios } from 'app/test/vitest/helper';
-import CustomerPayments from 'pages/Customer/CustomerPayments.vue';
+import CustomerPayments from 'src/pages/Customer/Payments/CustomerPayments.vue';
 
 describe('CustomerPayments', () => {
     let vm;
 
-
     beforeAll(() => {
         vm = createWrapper(CustomerPayments, {
             global: {
@@ -13,7 +12,7 @@ describe('CustomerPayments', () => {
                 mocks: {
                     fetch: vi.fn(),
                 },
-            }
+            },
         }).vm;
     });
 
@@ -28,11 +27,10 @@ describe('CustomerPayments', () => {
 
             await vm.confirmTransaction({ id: 1 });
 
-
             expect(vm.quasar.notify).toHaveBeenCalledWith(
                 expect.objectContaining({
                     message: 'Payment confirmed',
-                    type: 'positive'
+                    type: 'positive',
                 })
             );
         });