diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 07992f616..95b4b5866 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -314,7 +314,19 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
         show-if-above
     >
         <QScrollArea class="fit">
-            <VnTableFilter :data-key="$attrs['data-key']" :columns="columns" :redirect="redirect" />
+            <VnTableFilter
+                :data-key="$attrs['data-key']"
+                :columns="columns"
+                :redirect="redirect"
+            >
+                <template
+                    v-for="(_, slotName) in $slots"
+                    #[slotName]="slotData"
+                    :key="slotName"
+                >
+                    <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+                </template>
+            </VnTableFilter>
         </QScrollArea>
     </QDrawer>
     <CrudModel
diff --git a/src/components/VnTable/VnTableFilter.vue b/src/components/VnTable/VnTableFilter.vue
index 8632842f4..732605ce5 100644
--- a/src/components/VnTable/VnTableFilter.vue
+++ b/src/components/VnTable/VnTableFilter.vue
@@ -62,5 +62,8 @@ function columnName(col) {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+        </template>
     </VnFilterPanel>
 </template>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 139917d05..f46884834 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -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>
diff --git a/src/pages/Customer/Card/CustomerConsumptionFilter.vue b/src/pages/Customer/Card/CustomerConsumptionFilter.vue
deleted file mode 100644
index 289b2eb08..000000000
--- a/src/pages/Customer/Card/CustomerConsumptionFilter.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import { QItem } from 'quasar';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import { QItemSection } from 'quasar';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
-import { toDate } from 'src/filters';
-
-const { t } = useI18n();
-defineProps({ dataKey: { type: String, required: true } });
-</script>
-<template>
-    <VnFilterPanel :data-key="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 }">
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.item')"
-                        v-model="params.itemId"
-                        is-outlined
-                        lazy-rules
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        v-model="params.buyerId"
-                        url="TicketRequests/getItemTypeWorker"
-                        :fields="['id', 'nickname']"
-                        sort-by="nickname ASC"
-                        :label="t('params.buyer')"
-                        option-value="id"
-                        option-label="nickname"
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        v-model="params.typeId"
-                        url="ItemTypes"
-                        :include="['category']"
-                        :fields="['id', 'name', 'categoryFk']"
-                        sort-by="name ASC"
-                        :label="t('params.typeId')"
-                        option-label="name"
-                        option-value="id"
-                        dense
-                        outlined
-                        rounded
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                    <QItemLabel caption>{{
-                                        scope.opt?.category?.name
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        v-model="params.categoryId"
-                        url="ItemCategories"
-                        :fields="['id', 'name']"
-                        sort-by="name ASC"
-                        :label="t('params.categoryId')"
-                        option-label="name"
-                        option-value="id"
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnSelect
-                        v-model="params.campaignId"
-                        url="Campaigns/latest"
-                        sort-by="dated DESC"
-                        :label="t('params.campaignId')"
-                        option-label="code"
-                        option-value="id"
-                        dense
-                        outlined
-                        rounded
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{
-                                        t(`params.${scope.opt?.code}`)
-                                    }}</QItemLabel>
-                                    <QItemLabel caption>{{
-                                        toDate(scope.opt.dated)
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        :label="t('params.from')"
-                        v-model="params.from"
-                        @update:model-value="searchFn()"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        :label="t('params.to')"
-                        v-model="params.to"
-                        @update:model-value="searchFn()"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-        </template>
-    </VnFilterPanel>
-</template>
-<i18n>
-en:
-    params:
-        item: Item id
-        buyer: Buyer
-        type: Type
-        category: Category
-        itemId: Item id
-        buyerId: Buyer
-        typeId: Type
-        categoryId: Category
-        from: From
-        to: To
-        campaignId: Campaña
-        valentinesDay: Valentine's Day
-        mothersDay: Mother's Day
-        allSaints: All Saints' Day
-es:
-    params:
-        item: Id artículo
-        buyer: Comprador
-        type: Tipo
-        category: Categoría
-        itemId: Id Artículo
-        buyerId: Comprador
-        typeId: Tipo
-        categoryId: Reino
-        from: Desde
-        to: Hasta
-        campaignId: Campaña
-        valentinesDay: Día de San Valentín
-        mothersDay: Día de la Madre
-        allSaints: Día de Todos los Santos
-</i18n>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index bd2947cfc..f6458fd64 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -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',
@@ -398,82 +399,91 @@ 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',
+            order: ['id DESC'],
+        }"
+    >
+        <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'],
+        <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:
diff --git a/src/pages/Customer/locale/en.yml b/src/pages/Customer/locale/en.yml
index 1918838b7..118f04a31 100644
--- a/src/pages/Customer/locale/en.yml
+++ b/src/pages/Customer/locale/en.yml
@@ -94,6 +94,8 @@ customer:
             hasToInvoiceByAddress: Invoice by address
             isToBeMailed: Mailing
             hasSepaVnl: VNL B2B received
+    search: Search customer
+    searchInfo: You can search by customer ID
     params:
         id: Id
         isWorker: Is Worker
diff --git a/src/pages/Customer/locale/es.yml b/src/pages/Customer/locale/es.yml
index d5db3df1b..7c33ffee8 100644
--- a/src/pages/Customer/locale/es.yml
+++ b/src/pages/Customer/locale/es.yml
@@ -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,6 +94,8 @@ customer:
             hasToInvoiceByAddress: Factura por consigna
             isToBeMailed: Env. emails
             hasSepaVnl: Recibido B2B VNL
+    search: Buscar cliente
+    searchInfo: Puedes buscar por id o nombre del cliente
     params:
         id: ID
         isWorker: Es trabajador
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 9e7f6fe70..67b00b161 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -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'),
-                        },
-                    ],
-                },
-            ],
-        },
     ],
 };