diff --git a/src/css/app.scss b/src/css/app.scss
index f11ab865c..fdb402053 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -48,6 +48,10 @@ body.body--dark {
     background-color: var(--vn-dark);
 }
 
+.color-vn-label {
+    color: var(--vn-label);
+}
+
 .color-vn-text {
     color: var(--vn-text);
 }
diff --git a/src/pages/Customer/Card/CustomerBalance.vue b/src/pages/Customer/Card/CustomerBalance.vue
index c8109eb7d..9e2cfb6ff 100644
--- a/src/pages/Customer/Card/CustomerBalance.vue
+++ b/src/pages/Customer/Card/CustomerBalance.vue
@@ -27,7 +27,6 @@ const companiesOptions = ref([]);
 const companyId = ref(null);
 const receiptsRef = ref(null);
 const rows = ref([]);
-const workerId = ref(null);
 
 const filterCompanies = { order: ['code'] };
 const params = {
@@ -44,42 +43,42 @@ const tableColumnComponents = {
     payed: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     created: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     userName: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: ({ row }) => (workerId.value = row.clientFk),
+        event: () => {},
     },
     description: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     bankFk: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     debit: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     credit: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     balance: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     isConciliate: {
         component: QCheckbox,
@@ -87,7 +86,7 @@ const tableColumnComponents = {
             disable: true,
             'model-value': Boolean(prop.value),
         }),
-        event: () => (workerId.value = null),
+        event: () => {},
     },
 };
 
@@ -207,11 +206,11 @@ const updateCompanyId = (id) => {
 
     <QTable
         :columns="columns"
+        :no-data-label="t('globals.noResults')"
         :pagination="{ rowsPerPage: 12 }"
         :rows="rows"
         class="full-width q-mt-md"
         row-key="id"
-        v-if="rows?.length"
     >
         <template #body-cell="props">
             <QTd :props="props">
@@ -225,17 +224,16 @@ const updateCompanyId = (id) => {
                         <template v-if="props.col.name !== 'isConciliate'">
                             {{ props.value }}
                         </template>
-                        <WorkerDescriptorProxy :id="workerId" />
+                        <WorkerDescriptorProxy
+                            :id="props.row.clientFk"
+                            v-if="props.col.name === 'userName'"
+                        />
                     </component>
                 </QTr>
             </QTd>
         </template>
     </QTable>
 
-    <h5 class="flex justify-center label-color" v-else>
-        {{ t('globals.noResults') }}
-    </h5>
-
     <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
         <div class="q-mt-xl q-px-md">
             <VnSelectFilter
diff --git a/src/pages/Customer/Card/CustomerConsumption.vue b/src/pages/Customer/Card/CustomerConsumption.vue
index 16d8fa6d6..1ee771bf8 100644
--- a/src/pages/Customer/Card/CustomerConsumption.vue
+++ b/src/pages/Customer/Card/CustomerConsumption.vue
@@ -5,17 +5,11 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <h5 class="flex justify-center label-color">
+    <h5 class="flex justify-center color-vn-label">
         {{ t('Enter a new search') }}
     </h5>
 </template>
 
-<style lang="scss">
-.label-color {
-    color: var(--vn-label);
-}
-</style>
-
 <i18n>
 es:
     Enter a new search: Introduce una nueva búsqueda
diff --git a/src/pages/Customer/Card/CustomerCreditContracts.vue b/src/pages/Customer/Card/CustomerCreditContracts.vue
index 71bf42fd4..c23e3e6c0 100644
--- a/src/pages/Customer/Card/CustomerCreditContracts.vue
+++ b/src/pages/Customer/Card/CustomerCreditContracts.vue
@@ -108,7 +108,7 @@ const updateData = () => {
 
                             <div class="q-ml-lg">
                                 <div class="flex q-mb-xs">
-                                    <div class="q-mr-sm label-color">
+                                    <div class="q-mr-sm color-vn-label">
                                         {{ t('Since') }}:
                                     </div>
                                     <div class="text-weight-bold">
@@ -116,7 +116,9 @@ const updateData = () => {
                                     </div>
                                 </div>
                                 <div class="flex">
-                                    <div class="q-mr-sm label-color">{{ t('To') }}:</div>
+                                    <div class="q-mr-sm color-vn-label">
+                                        {{ t('To') }}:
+                                    </div>
                                     <div class="text-weight-bold">
                                         {{ toDate(item.finished) }}
                                     </div>
@@ -129,7 +131,7 @@ const updateData = () => {
                         <div class="flex">
                             <div class="flex items-center">
                                 <div class="flex q-mr-xl">
-                                    <div class="q-mr-sm label-color">
+                                    <div class="q-mr-sm color-vn-label">
                                         {{ t('Credit') }}:
                                     </div>
                                     <div class="text-weight-bold">
@@ -137,7 +139,7 @@ const updateData = () => {
                                     </div>
                                 </div>
                                 <div class="flex q-mr-xl">
-                                    <div class="q-mr-sm label-color">
+                                    <div class="q-mr-sm color-vn-label">
                                         {{ t('Grade') }}:
                                     </div>
                                     <div class="text-weight-bold">
@@ -145,7 +147,7 @@ const updateData = () => {
                                     </div>
                                 </div>
                                 <div class="flex">
-                                    <div class="q-mr-sm label-color">
+                                    <div class="q-mr-sm color-vn-label">
                                         {{ t('Date') }}:
                                     </div>
                                     <div class="text-weight-bold">
@@ -167,7 +169,7 @@ const updateData = () => {
                         </div>
                     </QCard>
                 </div>
-                <h5 class="flex justify-center label-color" v-else>
+                <h5 class="flex justify-center color-vn-label" v-else>
                     {{ t('globals.noResults') }}
                 </h5>
             </template>
@@ -188,9 +190,6 @@ const updateData = () => {
 </template>
 
 <style lang="scss" scoped>
-.label-color {
-    color: var(--vn-label);
-}
 .customer-card {
     border: 2px solid var(--vn-light-gray);
     border-radius: 10px;
diff --git a/src/pages/Customer/Card/CustomerCredits.vue b/src/pages/Customer/Card/CustomerCredits.vue
index f5e820aac..5e39c5728 100644
--- a/src/pages/Customer/Card/CustomerCredits.vue
+++ b/src/pages/Customer/Card/CustomerCredits.vue
@@ -14,7 +14,6 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
-const workerId = ref(null);
 const rows = ref([]);
 
 const filter = {
@@ -36,17 +35,17 @@ const tableColumnComponents = {
     created: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     employee: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: ({ row }) => (workerId.value = row.clientFk),
+        event: () => {},
     },
     amount: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
 };
 
@@ -105,7 +104,10 @@ const toCustomerCreditCreate = () => {
                             v-bind="tableColumnComponents[props.col.name].props(props)"
                         >
                             {{ props.value }}
-                            <WorkerDescriptorProxy :id="workerId" />
+                            <WorkerDescriptorProxy
+                                :id="props.row.clientFk"
+                                v-if="props.col.name === 'employee'"
+                            />
                         </component>
                     </QTr>
                 </QTd>
diff --git a/src/pages/Customer/Card/CustomerFileManagement.vue b/src/pages/Customer/Card/CustomerFileManagement.vue
index 79af7724c..47b561596 100644
--- a/src/pages/Customer/Card/CustomerFileManagement.vue
+++ b/src/pages/Customer/Card/CustomerFileManagement.vue
@@ -16,7 +16,6 @@ const router = useRouter();
 
 const ClientDmsRef = ref(null);
 const rows = ref([]);
-const workerId = ref(null);
 
 const filter = {
     include: {
@@ -53,27 +52,27 @@ const tableColumnComponents = {
     id: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     type: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     order: {
         component: QBadge,
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     reference: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     description: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     original: {
         component: QCheckbox,
@@ -81,24 +80,22 @@ const tableColumnComponents = {
             disable: true,
             'model-value': Boolean(prop.value),
         }),
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     file: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: ({ row }) => {
-            setDownloadFile(row);
-        },
+        event: ({ row }) => downloadFile(row.dmsFk),
     },
     employee: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: ({ row }) => (workerId.value = row.clientFk),
+        event: () => {},
     },
     created: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     actions: {
         component: CustomerFileManagementActions,
@@ -106,7 +103,7 @@ const tableColumnComponents = {
             id: prop.row.dmsFk,
             promise: setData,
         }),
-        event: () => (workerId.value = null),
+        event: () => {},
     },
 };
 
@@ -174,11 +171,6 @@ const columns = computed(() => [
     },
 ]);
 
-const setDownloadFile = (row) => {
-    downloadFile(row.dmsFk);
-    workerId.value = null;
-};
-
 const setData = () => {
     ClientDmsRef.value.fetch();
 };
@@ -222,7 +214,10 @@ const toCustomerFileManagementCreate = () => {
                             <template v-if="props.col.name !== 'original'">
                                 {{ props.value }}
                             </template>
-                            <WorkerDescriptorProxy :id="workerId" />
+                            <WorkerDescriptorProxy
+                                :id="props.row.clientFk"
+                                v-if="props.col.name === 'employee'"
+                            />
                         </component>
                     </QTr>
                 </QTd>
diff --git a/src/pages/Customer/Card/CustomerGreuges.vue b/src/pages/Customer/Card/CustomerGreuges.vue
index 19cbb42ba..4328f4312 100644
--- a/src/pages/Customer/Card/CustomerGreuges.vue
+++ b/src/pages/Customer/Card/CustomerGreuges.vue
@@ -16,7 +16,6 @@ const router = useRouter();
 
 const rows = ref([]);
 const totalAmount = ref(0);
-const workerId = ref(null);
 
 const filter = {
     include: [
@@ -44,27 +43,27 @@ const tableColumnComponents = {
     date: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     createdBy: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: ({ row }) => (workerId.value = row.clientFk),
+        event: () => {},
     },
     comment: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     type: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     amount: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
 };
 
@@ -121,18 +120,18 @@ const toCustomerGreugeCreate = () => {
     <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">
-                <span class="label-color q-mr-md">{{ t('Total') }}:</span>
+                <span class="color-vn-label q-mr-md">{{ t('Total') }}:</span>
                 {{ toCurrency(totalAmount) }}
             </h6>
         </QCard>
 
         <QTable
             :columns="columns"
+            :no-data-label="t('globals.noResults')"
             :pagination="{ rowsPerPage: 12 }"
             :rows="rows"
             class="full-width q-mt-md"
             row-key="id"
-            v-if="rows?.length"
         >
             <template #body-cell="props">
                 <QTd :props="props">
@@ -144,18 +143,15 @@ const toCustomerGreugeCreate = () => {
                             @click="tableColumnComponents[props.col.name].event(props)"
                         >
                             {{ props.value }}
-                            <WorkerDescriptorProxy :id="workerId" />
+                            <WorkerDescriptorProxy
+                                :id="props.row.clientFk"
+                                v-if="props.col.name === 'createdBy'"
+                            />
                         </component>
                     </QTr>
                 </QTd>
             </template>
         </QTable>
-
-        <QCard class="full-width" v-else>
-            <h5 class="flex justify-center label-color">
-                {{ t('globals.noResults') }}
-            </h5>
-        </QCard>
     </QPage>
 
     <QPageSticky :offset="[18, 18]">
@@ -172,10 +168,6 @@ const toCustomerGreugeCreate = () => {
     border-radius: 10px;
     padding: 10px;
 }
-
-.label-color {
-    color: var(--vn-label);
-}
 </style>
 
 <i18n>
diff --git a/src/pages/Customer/Card/CustomerLog.vue b/src/pages/Customer/Card/CustomerLog.vue
index 36d79959d..5616bdf87 100644
--- a/src/pages/Customer/Card/CustomerLog.vue
+++ b/src/pages/Customer/Card/CustomerLog.vue
@@ -124,7 +124,7 @@ const setInq = (value, status) => {
         :url="urlClientLogsModels"
     />
 
-    <h5 class="flex justify-center label-color">
+    <h5 class="flex justify-center color-vn-label">
         {{ t('globals.noResults') }}
     </h5>
 
diff --git a/src/pages/Customer/Card/CustomerMandates.vue b/src/pages/Customer/Card/CustomerMandates.vue
index 676c9f551..9d9634a16 100644
--- a/src/pages/Customer/Card/CustomerMandates.vue
+++ b/src/pages/Customer/Card/CustomerMandates.vue
@@ -5,13 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <h5 class="flex justify-center label-color">
+    <h5 class="flex justify-center color-vn-label">
         {{ t('globals.noResults') }}
     </h5>
 </template>
-
-<style lang="scss">
-.label-color {
-    color: var(--vn-label);
-}
-</style>
diff --git a/src/pages/Customer/Card/CustomerNotes.vue b/src/pages/Customer/Card/CustomerNotes.vue
index 781c57e50..eca1e165f 100644
--- a/src/pages/Customer/Card/CustomerNotes.vue
+++ b/src/pages/Customer/Card/CustomerNotes.vue
@@ -43,8 +43,8 @@ const toCustomerNoteCreate = () => {
                         }"
                     >
                         <div class="flex justify-between">
-                            <p class="label-color">{{ item.worker.user.nickname }}</p>
-                            <p class="label-color">
+                            <p class="color-vn-label">{{ item.worker.user.nickname }}</p>
+                            <p class="color-vn-label">
                                 {{
                                     date.formatDate(item?.created, 'DD-MM-YYYY HH:mm:ss')
                                 }}
@@ -55,7 +55,7 @@ const toCustomerNoteCreate = () => {
                 </div>
 
                 <div v-else>
-                    <h5 class="flex justify-center label-color">
+                    <h5 class="flex justify-center color-vn-label">
                         {{ t('globals.noResults') }}
                     </h5>
                 </div>
@@ -89,8 +89,4 @@ const toCustomerNoteCreate = () => {
     border-radius: 10px;
     padding: 10px;
 }
-
-.label-color {
-    color: var(--vn-label);
-}
 </style>
diff --git a/src/pages/Customer/Card/CustomerRecoveries.vue b/src/pages/Customer/Card/CustomerRecoveries.vue
index c4ae47a64..749eec4cc 100644
--- a/src/pages/Customer/Card/CustomerRecoveries.vue
+++ b/src/pages/Customer/Card/CustomerRecoveries.vue
@@ -89,11 +89,11 @@ const toCustomerRecoverieCreate = () => {
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
+            :no-data-label="t('globals.noResults')"
             :pagination="{ rowsPerPage: 12 }"
             :rows="rows"
             class="full-width q-mt-md"
             row-key="id"
-            v-if="rows?.length"
         >
             <template #body-cell="props">
                 <QTd :props="props">
@@ -110,12 +110,6 @@ const toCustomerRecoverieCreate = () => {
                 </QTd>
             </template>
         </QTable>
-
-        <QCard class="full-width" v-else>
-            <h5 class="flex justify-center label-color">
-                {{ t('globals.noResults') }}
-            </h5>
-        </QCard>
     </QPage>
 
     <QPageSticky :offset="[18, 18]">
@@ -132,10 +126,6 @@ const toCustomerRecoverieCreate = () => {
     border-radius: 10px;
     padding: 10px;
 }
-
-.label-color {
-    color: var(--vn-label);
-}
 </style>
 
 <i18n>
diff --git a/src/pages/Customer/Card/CustomerSamples.vue b/src/pages/Customer/Card/CustomerSamples.vue
index 499db87fb..ca5d63dcb 100644
--- a/src/pages/Customer/Card/CustomerSamples.vue
+++ b/src/pages/Customer/Card/CustomerSamples.vue
@@ -12,7 +12,6 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
-const workerId = ref(null);
 const rows = ref([]);
 
 const filter = {
@@ -30,22 +29,22 @@ const tableColumnComponents = {
     sent: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     description: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
     worker: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: ({ row }) => (workerId.value = row.clientFk),
+        event: () => {},
     },
     company: {
         component: 'span',
         props: () => {},
-        event: () => (workerId.value = null),
+        event: () => {},
     },
 };
 
@@ -97,7 +96,7 @@ const toCustomerSamplesCreate = () => {
             :rows="rows"
             class="full-width q-mt-md"
             row-key="id"
-            v-if="rows?.length"
+            :no-data-label="t('globals.noResults')"
         >
             <template #body-cell="props">
                 <QTd :props="props">
@@ -109,18 +108,15 @@ const toCustomerSamplesCreate = () => {
                             @click="tableColumnComponents[props.col.name].event(props)"
                         >
                             {{ props.value }}
-                            <WorkerDescriptorProxy :id="workerId" />
+                            <WorkerDescriptorProxy
+                                :id="props.row.clientFk"
+                                v-if="props.col.name === 'worker'"
+                            />
                         </component>
                     </QTr>
                 </QTd>
             </template>
         </QTable>
-
-        <QCard class="full-width" v-else>
-            <h5 class="flex justify-center label-color">
-                {{ t('globals.noResults') }}
-            </h5>
-        </QCard>
     </QPage>
 
     <QPageSticky :offset="[18, 18]">
@@ -137,10 +133,6 @@ const toCustomerSamplesCreate = () => {
     border-radius: 10px;
     padding: 10px;
 }
-
-.label-color {
-    color: var(--vn-label);
-}
 </style>
 
 <i18n>
diff --git a/src/pages/Customer/Card/CustomerWebPayment.vue b/src/pages/Customer/Card/CustomerWebPayment.vue
index 676c9f551..9d9634a16 100644
--- a/src/pages/Customer/Card/CustomerWebPayment.vue
+++ b/src/pages/Customer/Card/CustomerWebPayment.vue
@@ -5,13 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <h5 class="flex justify-center label-color">
+    <h5 class="flex justify-center color-vn-label">
         {{ t('globals.noResults') }}
     </h5>
 </template>
-
-<style lang="scss">
-.label-color {
-    color: var(--vn-label);
-}
-</style>
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index 89a106a18..69f9052c2 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -17,7 +17,6 @@ const { t } = useI18n();
 const quasar = useQuasar();
 
 const balanceDueTotal = ref(0);
-const customerId = ref(0);
 const selected = ref([]);
 const workerId = ref(0);
 const rows = ref([]);
@@ -26,7 +25,7 @@ const tableColumnComponents = {
     client: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: ({ row }) => selectCustomerId(row.clientFk),
+        event: () => {},
     },
     isWorker: {
         component: QCheckbox,
@@ -35,10 +34,10 @@ const tableColumnComponents = {
             'model-value': Boolean(row.selected),
         }),
     },
-    salesperson: {
+    salesPerson: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: ({ row }) => selectWorkerId(row.salesPersonFk),
+        event: () => {},
     },
     country: {
         component: 'span',
@@ -58,7 +57,7 @@ const tableColumnComponents = {
     author: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
-        event: ({ row }) => selectWorkerId(row.workerFk),
+        event: () => {},
     },
     lastObservation: {
         component: 'span',
@@ -99,7 +98,7 @@ const columns = computed(() => [
         align: 'left',
         field: 'salesPersonName',
         label: t('Salesperson'),
-        name: 'salesperson',
+        name: 'salesPerson',
     },
     {
         align: 'left',
@@ -158,16 +157,6 @@ const setRows = (data) => {
     }, 0);
 };
 
-const selectCustomerId = (id) => {
-    workerId.value = 0;
-    customerId.value = id;
-};
-
-const selectWorkerId = (id) => {
-    customerId.value = 0;
-    workerId.value = id;
-};
-
 const viewAddObservation = (rowsSelected) => {
     quasar.dialog({
         component: CustomerDefaulterAddObservation,
@@ -233,8 +222,18 @@ const refreshData = () => {
                         >
                             {{ props.value }}
 
-                            <WorkerDescriptorProxy v-if="workerId" :id="workerId" />
-                            <CustomerDescriptorProxy v-else :id="customerId" />
+                            <WorkerDescriptorProxy
+                                :id="props.row.salesPersonFk"
+                                v-if="props.col.name === 'salesPerson'"
+                            />
+                            <WorkerDescriptorProxy
+                                :id="props.row.workerFk"
+                                v-if="props.col.name === 'author'"
+                            />
+                            <CustomerDescriptorProxy
+                                :id="props.row.clientFk"
+                                v-if="props.col.name === 'client'"
+                            />
                         </component>
                     </QTr>
                 </QTd>
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
index cb24548a3..2d5125f39 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
@@ -3,7 +3,9 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import axios from 'axios';
-import { useDialogPluginComponent, useQuasar } from 'quasar';
+import { useDialogPluginComponent } from 'quasar';
+
+import useNotify from 'src/composables/useNotify';
 
 import VnRow from 'components/ui/VnRow.vue';
 
@@ -19,8 +21,8 @@ const $props = defineProps({
 });
 
 const { dialogRef } = useDialogPluginComponent();
+const { notify } = useNotify();
 const { t } = useI18n();
-const quasar = useQuasar();
 
 const newObservation = ref(null);
 
@@ -39,15 +41,9 @@ const onSubmit = async () => {
 
         await $props.promise();
 
-        quasar.notify({
-            message: t('globals.dataSaved'),
-            type: 'positive',
-        });
+        notify('globals.dataSaved', 'positive');
     } catch (error) {
-        quasar.notify({
-            message: t(`${error.message}`),
-            type: 'negative',
-        });
+        notify(error.message, 'negative');
     }
 };
 </script>
diff --git a/src/pages/Customer/components/CustomerFileManagementCreate.vue b/src/pages/Customer/components/CustomerFileManagementCreate.vue
index 9e15758f8..c401d1924 100644
--- a/src/pages/Customer/components/CustomerFileManagementCreate.vue
+++ b/src/pages/Customer/components/CustomerFileManagementCreate.vue
@@ -4,17 +4,17 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import axios from 'axios';
-import { useQuasar } from 'quasar';
 
 import { useState } from 'src/composables/useState';
+import useNotify from 'src/composables/useNotify';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
+const { notify } = useNotify();
 const { t } = useI18n();
-const quasar = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const state = useState();
@@ -64,16 +64,10 @@ const saveData = async () => {
         await axios.post(url, formData, {
             params: dms.value,
         });
-        quasar.notify({
-            message: t('globals.dataSaved'),
-            type: 'positive',
-        });
+        notify('globals.dataSaved', 'positive');
         router.push({ name: 'CustomerFileManagement' });
     } catch (error) {
-        quasar.notify({
-            message: t(`${error.message}`),
-            type: 'negative',
-        });
+        notify(error.message, 'negative');
     }
 };
 
diff --git a/src/pages/Customer/components/CustomerFileManagementDelete.vue b/src/pages/Customer/components/CustomerFileManagementDelete.vue
index c4e80d492..aadcd5c12 100644
--- a/src/pages/Customer/components/CustomerFileManagementDelete.vue
+++ b/src/pages/Customer/components/CustomerFileManagementDelete.vue
@@ -2,9 +2,11 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import { useDialogPluginComponent, useQuasar } from 'quasar';
+import { useDialogPluginComponent } from 'quasar';
 import axios from 'axios';
 
+import useNotify from 'src/composables/useNotify';
+
 const $props = defineProps({
     id: {
         type: Number,
@@ -17,8 +19,8 @@ const $props = defineProps({
 });
 
 const { dialogRef } = useDialogPluginComponent();
+const { notify } = useNotify();
 const { t } = useI18n();
-const quasar = useQuasar();
 
 const closeButton = ref(null);
 const isLoading = ref(false);
@@ -28,11 +30,9 @@ const deleteDms = async () => {
     try {
         await axios.post(`ClientDms/${$props.id}/removeFile`);
         if ($props.promise) await $props.promise();
+        notify('globals.dataDeleted', 'positive');
     } catch (error) {
-        quasar.notify({
-            message: t(`${error.message}`),
-            type: 'negative',
-        });
+        notify(error.message, 'negative');
     } finally {
         closeButton.value.click();
         isLoading.value = false;
diff --git a/src/pages/Customer/components/CustomerFileManagementEdit.vue b/src/pages/Customer/components/CustomerFileManagementEdit.vue
index 5b6cb0981..6773db42e 100644
--- a/src/pages/Customer/components/CustomerFileManagementEdit.vue
+++ b/src/pages/Customer/components/CustomerFileManagementEdit.vue
@@ -4,15 +4,16 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import axios from 'axios';
-import { useQuasar } from 'quasar';
+
+import useNotify from 'src/composables/useNotify';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
+const { notify } = useNotify();
 const { t } = useI18n();
-const quasar = useQuasar();
 const route = useRoute();
 const router = useRouter();
 
@@ -51,16 +52,10 @@ const saveData = async () => {
             params: dms.value,
         });
 
-        quasar.notify({
-            message: t('globals.dataSaved'),
-            type: 'positive',
-        });
+        notify('globals.dataSaved', 'positive');
         router.push({ name: 'CustomerFileManagement' });
     } catch (error) {
-        quasar.notify({
-            message: t(`${error.message}`),
-            type: 'negative',
-        });
+        notify(error.message, 'negative');
     }
 };