From b06e5b9252d9eae235e7410cc829c9b5c84f66e1 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Fri, 2 Feb 2024 08:21:23 -0500
Subject: [PATCH] Correcciones comentarios pr

---
 src/pages/Customer/Card/CustomerBalance.vue   | 26 +++---
 .../Customer/Card/CustomerCreditContracts.vue |  5 +-
 src/pages/Customer/Card/CustomerCredits.vue   | 64 ++++++---------
 src/pages/Customer/Card/CustomerGreuges.vue   | 82 ++++++++-----------
 .../Customer/Card/CustomerRecoveries.vue      | 39 ++++-----
 src/pages/Customer/Card/CustomerSamples.vue   | 62 ++++++--------
 .../Customer/Defaulter/CustomerDefaulter.vue  | 43 ++++------
 .../ExtendedList/CustomerExtendedList.vue     | 40 ++++-----
 .../Notifications/CustomerNotifications.vue   | 30 +++----
 .../CustomerCreditContractsInsurance.vue      | 37 ++++-----
 .../components/CustomerSamplesCreate.vue      |  8 --
 src/router/modules/customer.js                | 27 ++++++
 12 files changed, 208 insertions(+), 255 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerBalance.vue b/src/pages/Customer/Card/CustomerBalance.vue
index db514fab0..e74933477 100644
--- a/src/pages/Customer/Card/CustomerBalance.vue
+++ b/src/pages/Customer/Card/CustomerBalance.vue
@@ -22,12 +22,12 @@ const state = useState();
 const user = state.getUser();
 
 const clientRisks = ref(null);
+const clientRisksRef = ref(null);
 const companiesOptions = ref([]);
 const companyId = ref(null);
-const rows = ref(null);
-const workerId = ref(0);
 const receiptsRef = ref(null);
-const clientRisksRef = ref(null);
+const rows = ref([]);
+const workerId = ref(null);
 
 const filterCompanies = { order: ['code'] };
 const params = {
@@ -44,44 +44,42 @@ const tableColumnComponents = {
     payed: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     created: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     userName: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => {
-            workerId.value = prop.row.clientFk;
-        },
+        event: ({ row }) => (workerId.value = row.clientFk),
     },
     description: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     bankFk: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     debit: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     credit: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     balance: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     isConciliate: {
         component: QCheckbox,
@@ -89,7 +87,7 @@ const tableColumnComponents = {
             disable: true,
             'model-value': Boolean(prop.value),
         }),
-        event: () => {},
+        event: () => (workerId.value = null),
     },
 };
 
diff --git a/src/pages/Customer/Card/CustomerCreditContracts.vue b/src/pages/Customer/Card/CustomerCreditContracts.vue
index 04e8eccef..71bf42fd4 100644
--- a/src/pages/Customer/Card/CustomerCreditContracts.vue
+++ b/src/pages/Customer/Card/CustomerCreditContracts.vue
@@ -88,6 +88,7 @@ const updateData = () => {
                         :class="{
                             'customer-card': true,
                             'q-mb-md': index < rows.length - 1,
+                            'is-active': !item.finished,
                         }"
                     >
                         <QCardSection class="flex q-py-none">
@@ -192,12 +193,14 @@ const updateData = () => {
 }
 .customer-card {
     border: 2px solid var(--vn-light-gray);
-    background-color: var(--vn-light-gray);
     border-radius: 10px;
     padding: 10px;
     display: flex;
     justify-content: space-between;
 }
+.is-active {
+    background-color: var(--vn-light-gray);
+}
 </style>
 
 <i18n>
diff --git a/src/pages/Customer/Card/CustomerCredits.vue b/src/pages/Customer/Card/CustomerCredits.vue
index 077312f1b..6852b42eb 100644
--- a/src/pages/Customer/Card/CustomerCredits.vue
+++ b/src/pages/Customer/Card/CustomerCredits.vue
@@ -1,65 +1,52 @@
 <script setup>
-import { ref, computed, onBeforeMount } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import { date, QBtn } from 'quasar';
 
 import { toCurrency } from 'src/filters';
-import { useArrayData } from 'composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 
+import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-const stateStore = useStateStore();
 
-const arrayData = ref(null);
-const workerId = ref(0);
-const rows = computed(() => arrayData.value.store.data);
+const workerId = ref(null);
+const rows = ref([]);
 
-onBeforeMount(async () => {
-    const filter = {
-        include: [
-            {
-                relation: 'worker',
-                scope: {
-                    fields: ['id'],
-                    include: { relation: 'user', scope: { fields: ['name'] } },
-                },
+const filter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: { relation: 'user', scope: { fields: ['name'] } },
             },
-        ],
-        where: { clientFk: `${route.params.id}` },
-        order: ['created DESC'],
-        limit: 20,
-    };
-    arrayData.value = useArrayData('CustomerCreditsCard', {
-        url: 'ClientCredits',
-        filter,
-    });
-    await arrayData.value.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
+        },
+    ],
+    where: { clientFk: `${route.params.id}` },
+    order: ['created DESC'],
+    limit: 20,
+};
 
 const tableColumnComponents = {
     created: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     employee: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => {
-            selectWorkerId(prop.row.clientFk);
-        },
+        event: ({ row }) => (workerId.value = row.clientFk),
     },
     amount: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
 };
 
@@ -86,16 +73,19 @@ const columns = computed(() => [
     },
 ]);
 
-const selectWorkerId = (id) => {
-    workerId.value = id;
-};
-
 const toCustomerCreditCreate = () => {
     router.push({ name: 'CustomerCreditCreate' });
 };
 </script>
 
 <template>
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        url="ClientCredits"
+    />
+
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
diff --git a/src/pages/Customer/Card/CustomerGreuges.vue b/src/pages/Customer/Card/CustomerGreuges.vue
index d92d7b4ee..19cbb42ba 100644
--- a/src/pages/Customer/Card/CustomerGreuges.vue
+++ b/src/pages/Customer/Card/CustomerGreuges.vue
@@ -1,87 +1,70 @@
 <script setup>
-import { ref, computed, onBeforeMount } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import { date, QBtn } from 'quasar';
 
-import { useArrayData } from 'composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'src/filters';
 
+import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-const stateStore = useStateStore();
 
-const arrayData = ref(null);
+const rows = ref([]);
 const totalAmount = ref(0);
-const workerId = ref(0);
-const rows = computed(() => arrayData.value.store.data);
+const workerId = ref(null);
 
-onBeforeMount(async () => {
-    const filter = {
-        include: [
-            {
-                relation: 'greugeType',
-                scope: {
-                    fields: ['id', 'name'],
-                },
+const filter = {
+    include: [
+        {
+            relation: 'greugeType',
+            scope: {
+                fields: ['id', 'name'],
             },
-            {
-                relation: 'user',
-                scope: {
-                    fields: ['id', 'name'],
-                },
-            },
-        ],
-        order: 'shipped DESC, amount',
-        where: {
-            clientFk: `${route.params.id}`,
         },
-        limit: 20,
-    };
-
-    arrayData.value = useArrayData('CustomerGreugesCard', {
-        url: 'greuges',
-        filter,
-    });
-    await arrayData.value.fetch({ append: false });
-    totalAmount.value = arrayData.value.store.data.reduce((accumulator, currentValue) => {
-        return accumulator + currentValue.amount;
-    }, 0);
-    stateStore.rightDrawer = true;
-});
+        {
+            relation: 'user',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+    order: 'shipped DESC, amount',
+    where: {
+        clientFk: `${route.params.id}`,
+    },
+    limit: 20,
+};
 
 const tableColumnComponents = {
     date: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     createdBy: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => {
-            selectWorkerId(prop.row.clientFk);
-        },
+        event: ({ row }) => (workerId.value = row.clientFk),
     },
     comment: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     type: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     amount: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
 };
 
@@ -120,8 +103,11 @@ const columns = computed(() => [
     },
 ]);
 
-const selectWorkerId = (id) => {
-    workerId.value = id;
+const setRows = (data) => {
+    rows.value = data;
+    totalAmount.value = data.reduce((accumulator, currentValue) => {
+        return accumulator + currentValue.amount;
+    }, 0);
 };
 
 const toCustomerGreugeCreate = () => {
@@ -130,6 +116,8 @@ const toCustomerGreugeCreate = () => {
 </script>
 
 <template>
+    <FetchData :filter="filter" @on-fetch="setRows" auto-load url="greuges" />
+
     <QPage class="column items-center q-pa-md">
         <QCard class="full-width" v-if="totalAmount">
             <h6 class="flex justify-end q-my-lg q-pr-lg">
diff --git a/src/pages/Customer/Card/CustomerRecoveries.vue b/src/pages/Customer/Card/CustomerRecoveries.vue
index 7247145f2..e747b3d79 100644
--- a/src/pages/Customer/Card/CustomerRecoveries.vue
+++ b/src/pages/Customer/Card/CustomerRecoveries.vue
@@ -1,39 +1,24 @@
 <script setup>
-import { ref, computed, onBeforeMount } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import { date, QBtn } from 'quasar';
 
-import { useArrayData } from 'composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'src/filters';
 
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import FetchData from 'components/FetchData.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-const stateStore = useStateStore();
+const rows = ref([]);
 
-const arrayData = ref(null);
-const workerId = ref(0);
-const rows = computed(() => arrayData.value.store.data);
-
-onBeforeMount(async () => {
-    const filter = {
-        where: { clientFk: `${route.params.id}` },
-        order: ['started DESC'],
-        limit: 20,
-    };
-
-    arrayData.value = useArrayData('CustomerRecoveriesCard', {
-        url: 'Recoveries',
-        filter,
-    });
-    await arrayData.value.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
+const filter = {
+    where: { clientFk: `${route.params.id}` },
+    order: ['started DESC'],
+    limit: 20,
+};
 
 const tableColumnComponents = {
     since: {
@@ -94,6 +79,13 @@ const toCustomerRecoverieCreate = () => {
 </script>
 
 <template>
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        url="Recoveries"
+    />
+
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
@@ -113,7 +105,6 @@ const toCustomerRecoverieCreate = () => {
                             @click="tableColumnComponents[props.col.name].event(props)"
                         >
                             {{ props.value }}
-                            <WorkerDescriptorProxy :id="workerId" />
                         </component>
                     </QTr>
                 </QTd>
diff --git a/src/pages/Customer/Card/CustomerSamples.vue b/src/pages/Customer/Card/CustomerSamples.vue
index 98afe1c52..c0d84eff6 100644
--- a/src/pages/Customer/Card/CustomerSamples.vue
+++ b/src/pages/Customer/Card/CustomerSamples.vue
@@ -1,66 +1,51 @@
 <script setup>
-import { ref, computed, onBeforeMount } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import { date, QBtn } from 'quasar';
 
-import { useArrayData } from 'composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
-
+import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-const stateStore = useStateStore();
 
-const arrayData = ref(null);
-const workerId = ref(0);
-const rows = computed(() => arrayData.value.store.data);
+const workerId = ref(null);
+const rows = ref([]);
 
-onBeforeMount(async () => {
-    const filter = {
-        include: [
-            { relation: 'type', scope: { fields: ['code', 'description'] } },
-            { relation: 'user', scope: { fields: ['id', 'name'] } },
-            { relation: 'company', scope: { fields: ['code'] } },
-        ],
-        where: { clientFk: route.params.id },
-        order: ['created DESC'],
-        limit: 20,
-    };
-
-    arrayData.value = useArrayData('CustomerSamplesCard', {
-        url: 'ClientSamples',
-        filter,
-    });
-    await arrayData.value.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
+const filter = {
+    include: [
+        { relation: 'type', scope: { fields: ['code', 'description'] } },
+        { relation: 'user', scope: { fields: ['id', 'name'] } },
+        { relation: 'company', scope: { fields: ['code'] } },
+    ],
+    where: { clientFk: route.params.id },
+    order: ['created DESC'],
+    limit: 20,
+};
 
 const tableColumnComponents = {
     sent: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     description: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
     worker: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => {
-            selectWorkerId(prop.row.clientFk);
-        },
+        event: ({ row }) => (workerId.value = row.clientFk),
     },
     company: {
         component: 'span',
         props: () => {},
-        event: () => {},
+        event: () => (workerId.value = null),
     },
 };
 
@@ -92,16 +77,19 @@ const columns = computed(() => [
     },
 ]);
 
-const selectWorkerId = (id) => {
-    workerId.value = id;
-};
-
 const toCustomerSamplesCreate = () => {
     router.push({ name: 'CustomerSamplesCreate' });
 };
 </script>
 
 <template>
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        url="ClientSamples"
+    />
+
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index bf7480985..89a106a18 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -1,13 +1,12 @@
 <script setup>
-import { ref, computed, onBeforeMount } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { QBtn, QCheckbox, useQuasar } from 'quasar';
 
 import { toCurrency, toDate } from 'filters/index';
-import { useArrayData } from 'composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 
+import FetchData from 'components/FetchData.vue';
 import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
 import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -15,16 +14,13 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
 import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
 
 const { t } = useI18n();
-const stateStore = useStateStore();
 const quasar = useQuasar();
 
-const arrayData = ref(null);
 const balanceDueTotal = ref(0);
 const customerId = ref(0);
 const selected = ref([]);
 const workerId = ref(0);
-
-const rows = computed(() => arrayData.value.store.data);
+const rows = ref([]);
 
 const tableColumnComponents = {
     client: {
@@ -155,23 +151,11 @@ const columns = computed(() => [
     },
 ]);
 
-onBeforeMount(() => {
-    getArrayData();
-});
-
-const getArrayData = async () => {
-    arrayData.value = useArrayData('CustomerDefaulter', {
-        url: 'Defaulters/filter',
-        limit: 0,
-    });
-    await arrayData.value.fetch({ append: false });
-    balanceDueTotal.value = arrayData.value.store.data.reduce(
-        (accumulator, currentValue) => {
-            return accumulator + (currentValue['amount'] || 0);
-        },
-        0
-    );
-    stateStore.rightDrawer = true;
+const setRows = (data) => {
+    rows.value = data;
+    balanceDueTotal.value = data.reduce((accumulator, currentValue) => {
+        return accumulator + (currentValue['amount'] || 0);
+    }, 0);
 };
 
 const selectCustomerId = (id) => {
@@ -195,12 +179,19 @@ const viewAddObservation = (rowsSelected) => {
 };
 
 const refreshData = () => {
-    getArrayData();
+    setRows();
 };
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        url="Defaulters/filter"
+    />
+
+    <QDrawer side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <CustomerNotificationsFilter data-key="CustomerDefaulter" />
         </QScrollArea>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 65acf78a2..d86f5cc42 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -1,33 +1,29 @@
 <script setup>
-import { ref, computed, onBeforeMount, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import { QBtn, QIcon } from 'quasar';
+
+import { useStateStore } from 'stores/useStateStore';
+import { dashIfEmpty, toDate } from 'src/filters';
+
+import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
 import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 
-import { useArrayData } from 'composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
-import { dashIfEmpty, toDate } from 'src/filters';
-
 const { t } = useI18n();
 const router = useRouter();
 const stateStore = useStateStore();
 
-const arrayData = ref(null);
-
-onBeforeMount(async () => {
-    arrayData.value = useArrayData('CustomerExtendedList', {
-        url: 'Clients/extendedListFilter',
-        limit: 0,
-    });
-    await arrayData.value.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
+const allColumnNames = ref([]);
+const rows = ref([]);
+const selectedCustomerId = ref(0);
+const selectedSalesPersonId = ref(0);
+const visibleColumns = ref([]);
 
 onMounted(() => {
     const filteredColumns = columns.value.filter(
@@ -36,13 +32,6 @@ onMounted(() => {
     allColumnNames.value = filteredColumns.map((col) => col.name);
 });
 
-const rows = computed(() => arrayData.value.store.data);
-
-const selectedCustomerId = ref(0);
-const selectedSalesPersonId = ref(0);
-const allColumnNames = ref([]);
-const visibleColumns = ref([]);
-
 const tableColumnComponents = {
     customerStatus: {
         component: QIcon,
@@ -490,6 +479,13 @@ const selectSalesPersonId = (id) => {
 </script>
 
 <template>
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        url="Clients/extendedListFilter"
+    />
+
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <CustomerExtendedListFilter
diff --git a/src/pages/Customer/Notifications/CustomerNotifications.vue b/src/pages/Customer/Notifications/CustomerNotifications.vue
index cf66443b9..efd71afef 100644
--- a/src/pages/Customer/Notifications/CustomerNotifications.vue
+++ b/src/pages/Customer/Notifications/CustomerNotifications.vue
@@ -1,32 +1,17 @@
 <script setup>
-import { ref, computed, onBeforeMount } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { QBtn } from 'quasar';
 
-import { useArrayData } from 'composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
-
+import FetchData from 'components/FetchData.vue';
 import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
 import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
-const stateStore = useStateStore();
-
-const arrayData = ref(null);
-
-onBeforeMount(async () => {
-    arrayData.value = useArrayData('CustomerNotifications', {
-        url: 'Clients',
-        limit: 0,
-    });
-    await arrayData.value.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
-
-const rows = computed(() => arrayData.value.store.data);
 
+const rows = ref([]);
 const selected = ref([]);
 const selectedCustomerId = ref(0);
 
@@ -97,7 +82,14 @@ const selectCustomerId = (id) => {
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        url="Clients"
+    />
+
+    <QDrawer side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <CustomerNotificationsFilter data-key="CustomerNotifications" />
         </QScrollArea>
diff --git a/src/pages/Customer/components/CustomerCreditContractsInsurance.vue b/src/pages/Customer/components/CustomerCreditContractsInsurance.vue
index eddfe3cd9..57f877a54 100644
--- a/src/pages/Customer/components/CustomerCreditContractsInsurance.vue
+++ b/src/pages/Customer/components/CustomerCreditContractsInsurance.vue
@@ -1,35 +1,25 @@
 <script setup>
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import { date } from 'quasar';
 
-import { useArrayData } from 'src/composables/useArrayData';
 import { toCurrency } from 'src/filters';
-import { useStateStore } from 'src/stores/useStateStore';
+
+import FetchData from 'components/FetchData.vue';
 
 const { t } = useI18n();
 const route = useRoute();
-const stateStore = useStateStore();
 
-const arrayData = ref(null);
-const rows = computed(() => arrayData.value.store.data);
+const rows = ref([]);
 
-onBeforeMount(async () => {
-    const filter = {
-        where: {
-            creditClassificationFk: `${route.params.creditId}`,
-        },
-        limit: 20,
-    };
-    arrayData.value = useArrayData('CustomerCreditsContractsInsuranceCard', {
-        url: 'CreditInsurances',
-        filter,
-    });
-    await arrayData.value.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
+const filter = {
+    where: {
+        creditClassificationFk: `${route.params.creditId}`,
+    },
+    limit: 20,
+};
 
 const tableColumnComponents = {
     created: {
@@ -74,6 +64,13 @@ const columns = computed(() => [
 </script>
 
 <template>
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        url="CreditInsurances"
+    />
+
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
diff --git a/src/pages/Customer/components/CustomerSamplesCreate.vue b/src/pages/Customer/components/CustomerSamplesCreate.vue
index faeb2443f..4176ab43e 100644
--- a/src/pages/Customer/components/CustomerSamplesCreate.vue
+++ b/src/pages/Customer/components/CustomerSamplesCreate.vue
@@ -227,14 +227,6 @@ const onDataSaved = async ({
     </FormModel>
 </template>
 
-<style lang="scss" scoped>
-.add-icon {
-    cursor: pointer;
-    background-color: $primary;
-    border-radius: 50px;
-}
-</style>
-
 <i18n>
 es:
     Sample: Plantilla
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 7e6171c61..46202128c 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -561,6 +561,33 @@ export default {
                                     'src/pages/Customer/Card/CustomerFileManagement.vue'
                                 ),
                         },
+                        {
+                            path: 'file-management',
+                            name: 'CustomerFileManagementCard',
+                            redirect: { name: 'CustomerFileManagement' },
+                            children: [
+                                {
+                                    path: '',
+                                    name: 'CustomerFileManagement',
+                                    meta: {
+                                        title: 'fileManagement',
+                                        icon: 'paid',
+                                    },
+                                    component: () =>
+                                        import(
+                                            'src/pages/Customer/Card/CustomerFileManagement.vue'
+                                        ),
+                                },
+                                {
+                                    path: 'create',
+                                    name: 'CustomerFileManagementCreate',
+                                    component: () =>
+                                        import(
+                                            'src/pages/Customer/components/CustomerFileManagementCreate.vue'
+                                        ),
+                                },
+                            ],
+                        },
                         {
                             path: 'unpaid',
                             name: 'CustomerUnpaid',