From 01ffe3adb7a040e0319473540c3b11d03d692b34 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 5 Feb 2024 15:51:09 -0500
Subject: [PATCH 1/2] Se termina desarrollo de las tarjetas gestion documental
 e impagado

---
 src/components/FormModel.vue                  |  18 +-
 src/pages/Customer/Card/CustomerBalance.vue   |   2 +-
 .../Customer/Card/CustomerCreditOpinion.vue   |   2 +-
 src/pages/Customer/Card/CustomerCredits.vue   |  15 +-
 .../Customer/Card/CustomerFileManagement.vue  | 267 +++++++++++++++++-
 .../Customer/Card/CustomerRecoveries.vue      |   2 +-
 src/pages/Customer/Card/CustomerSamples.vue   |   2 +-
 src/pages/Customer/Card/CustomerUnpaid.vue    |  56 +++-
 .../CustomerDefaulterAddObservation.vue       |   3 +-
 .../CustomerFileManagementActions.vue         |  96 +++++++
 .../CustomerFileManagementCreate.vue          | 247 ++++++++++++++++
 .../CustomerFileManagementDelete.vue          |  81 ++++++
 .../components/CustomerFileManagementEdit.vue | 225 +++++++++++++++
 src/router/modules/customer.js                |  38 ++-
 14 files changed, 1017 insertions(+), 37 deletions(-)
 create mode 100644 src/pages/Customer/components/CustomerFileManagementActions.vue
 create mode 100644 src/pages/Customer/components/CustomerFileManagementCreate.vue
 create mode 100644 src/pages/Customer/components/CustomerFileManagementDelete.vue
 create mode 100644 src/pages/Customer/components/CustomerFileManagementEdit.vue

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 2bc72f96d..b18312896 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -109,14 +109,18 @@ function tMobile(...args) {
 }
 
 async function fetch() {
-    const { data } = await axios.get($props.url, {
-        params: { filter: JSON.stringify($props.filter) },
-    });
+    try {
+        const { data } = await axios.get($props.url, {
+            params: { filter: JSON.stringify($props.filter) },
+        });
+        state.set($props.model, data);
+        originalData.value = data && JSON.parse(JSON.stringify(data));
 
-    state.set($props.model, data);
-    originalData.value = data && JSON.parse(JSON.stringify(data));
-
-    emit('onFetch', state.get($props.model));
+        emit('onFetch', state.get($props.model));
+    } catch (error) {
+        state.set($props.model, {});
+        originalData.value = {};
+    }
 }
 
 async function save() {
diff --git a/src/pages/Customer/Card/CustomerBalance.vue b/src/pages/Customer/Card/CustomerBalance.vue
index e74933477..c8109eb7d 100644
--- a/src/pages/Customer/Card/CustomerBalance.vue
+++ b/src/pages/Customer/Card/CustomerBalance.vue
@@ -37,7 +37,7 @@ const params = {
 };
 const filter = {
     include: { relation: 'company', scope: { fields: ['code'] } },
-    where: { clientFk: `${route.params.id}`, companyFk: user.value.companyFk },
+    where: { clientFk: route.params.id, companyFk: user.value.companyFk },
 };
 
 const tableColumnComponents = {
diff --git a/src/pages/Customer/Card/CustomerCreditOpinion.vue b/src/pages/Customer/Card/CustomerCreditOpinion.vue
index 74d61b7c1..8a532a4e3 100644
--- a/src/pages/Customer/Card/CustomerCreditOpinion.vue
+++ b/src/pages/Customer/Card/CustomerCreditOpinion.vue
@@ -23,7 +23,7 @@ const filter = {
             },
         },
     ],
-    where: { clientFk: `${route.params.id}` },
+    where: { clientFk: route.params.id },
     order: ['created DESC'],
     limit: 20,
 };
diff --git a/src/pages/Customer/Card/CustomerCredits.vue b/src/pages/Customer/Card/CustomerCredits.vue
index 6852b42eb..f5e820aac 100644
--- a/src/pages/Customer/Card/CustomerCredits.vue
+++ b/src/pages/Customer/Card/CustomerCredits.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -27,7 +27,7 @@ const filter = {
             },
         },
     ],
-    where: { clientFk: `${route.params.id}` },
+    where: { clientFk: route.params.id },
     order: ['created DESC'],
     limit: 20,
 };
@@ -93,6 +93,7 @@ const toCustomerCreditCreate = () => {
             :rows="rows"
             class="full-width q-mt-md"
             row-key="id"
+            v-if="rows?.length"
         >
             <template #body-cell="props">
                 <QTd :props="props">
@@ -110,6 +111,10 @@ const toCustomerCreditCreate = () => {
                 </QTd>
             </template>
         </QTable>
+
+        <h5 class="flex justify-center label-color" v-else>
+            {{ t('globals.noResults') }}
+        </h5>
     </QPage>
 
     <QPageSticky :offset="[18, 18]">
@@ -120,6 +125,12 @@ const toCustomerCreditCreate = () => {
     </QPageSticky>
 </template>
 
+<style lang="scss">
+.label-color {
+    color: var(--vn-label);
+}
+</style>
+
 <i18n>
 es:
     Since: Desde
diff --git a/src/pages/Customer/Card/CustomerFileManagement.vue b/src/pages/Customer/Card/CustomerFileManagement.vue
index 228b34a44..79af7724c 100644
--- a/src/pages/Customer/Card/CustomerFileManagement.vue
+++ b/src/pages/Customer/Card/CustomerFileManagement.vue
@@ -1,3 +1,268 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date, QBadge, QBtn, QCheckbox } from 'quasar';
+import { downloadFile } from 'src/composables/downloadFile';
+
+import FetchData from 'components/FetchData.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerFileManagementActions from 'src/pages/Customer/components/CustomerFileManagementActions.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const ClientDmsRef = ref(null);
+const rows = ref([]);
+const workerId = ref(null);
+
+const filter = {
+    include: {
+        relation: 'dms',
+        scope: {
+            fields: [
+                'dmsTypeFk',
+                'reference',
+                'hardCopyNumber',
+                'workerFk',
+                'description',
+                'hasFile',
+                'file',
+                'created',
+            ],
+            include: [
+                { relation: 'dmsType', scope: { fields: ['name'] } },
+                {
+                    relation: 'worker',
+                    scope: {
+                        fields: ['id'],
+                        include: { relation: 'user', scope: { fields: ['name'] } },
+                    },
+                },
+            ],
+        },
+    },
+    where: { clientFk: route.params.id },
+    order: ['dmsFk DESC'],
+    limit: 20,
+};
+
+const tableColumnComponents = {
+    id: {
+        component: 'span',
+        props: () => {},
+        event: () => (workerId.value = null),
+    },
+    type: {
+        component: 'span',
+        props: () => {},
+        event: () => (workerId.value = null),
+    },
+    order: {
+        component: QBadge,
+        props: () => {},
+        event: () => (workerId.value = null),
+    },
+    reference: {
+        component: 'span',
+        props: () => {},
+        event: () => (workerId.value = null),
+    },
+    description: {
+        component: 'span',
+        props: () => {},
+        event: () => (workerId.value = null),
+    },
+    original: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => (workerId.value = null),
+    },
+    file: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: ({ row }) => {
+            setDownloadFile(row);
+        },
+    },
+    employee: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: ({ row }) => (workerId.value = row.clientFk),
+    },
+    created: {
+        component: 'span',
+        props: () => {},
+        event: () => (workerId.value = null),
+    },
+    actions: {
+        component: CustomerFileManagementActions,
+        props: (prop) => ({
+            id: prop.row.dmsFk,
+            promise: setData,
+        }),
+        event: () => (workerId.value = null),
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: ({ dms }) => dms.id,
+        label: t('Id'),
+        name: 'id',
+    },
+    {
+        align: 'left',
+        field: ({ dms }) => dms.dmsType.name,
+        label: t('Type'),
+        name: 'type',
+    },
+    {
+        align: 'left',
+        field: ({ dms }) => dms.hardCopyNumber,
+        label: t('Order'),
+        name: 'order',
+    },
+    {
+        align: 'left',
+        field: ({ dms }) => dms.reference,
+        label: t('Reference'),
+        name: 'reference',
+    },
+    {
+        align: 'left',
+        field: ({ dms }) => dms.description,
+        label: t('Description'),
+        name: 'description',
+    },
+    {
+        align: 'left',
+        field: ({ dms }) => dms.hasFile,
+        label: t('Original'),
+        name: 'original',
+    },
+    {
+        align: 'left',
+        field: ({ dms }) => dms.file,
+        label: t('File'),
+        name: 'file',
+    },
+    {
+        align: 'left',
+        field: ({ dms }) => dms.worker.user.name,
+        label: t('Employee'),
+        name: 'employee',
+    },
+    {
+        align: 'left',
+        field: (value) => value.dms.created,
+        label: t('Created'),
+        name: 'created',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm'),
+    },
+    {
+        align: 'right',
+        field: 'actions',
+        label: '',
+        name: 'actions',
+    },
+]);
+
+const setDownloadFile = (row) => {
+    downloadFile(row.dmsFk);
+    workerId.value = null;
+};
+
+const setData = () => {
+    ClientDmsRef.value.fetch();
+};
+
+const toCustomerFileManagementCreate = () => {
+    router.push({ name: 'CustomerFileManagementCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Customer file management</div>
+    <FetchData
+        ref="ClientDmsRef"
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        url="ClientDms"
+    />
+
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :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">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="
+                                props.col.name === 'order' && !props.value
+                                    ? 'span'
+                                    : tableColumnComponents[props.col.name].component
+                            "
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                            class="col-content"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                        >
+                            <template v-if="props.col.name !== 'original'">
+                                {{ props.value }}
+                            </template>
+                            <WorkerDescriptorProxy :id="workerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+
+        <h5 class="flex justify-center label-color" v-else>
+            {{ t('globals.noResults') }}
+        </h5>
+    </QPage>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn
+            @click.stop="toCustomerFileManagementCreate()"
+            color="primary"
+            fab
+            icon="add"
+        />
+        <QTooltip>
+            {{ t('Upload file') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss">
+.label-color {
+    color: var(--vn-label);
+}
+</style>
+
+<i18n>
+es:
+    Id: Id
+    Type: Tipo
+    Order: Orden
+    Reference: Referencia
+    Description: Descripción
+    Original: Original
+    File: Fichero
+    Employee: Empleado
+    Created: Fecha creación
+    Upload file: Subir fichero
+</i18n>
diff --git a/src/pages/Customer/Card/CustomerRecoveries.vue b/src/pages/Customer/Card/CustomerRecoveries.vue
index e747b3d79..c4ae47a64 100644
--- a/src/pages/Customer/Card/CustomerRecoveries.vue
+++ b/src/pages/Customer/Card/CustomerRecoveries.vue
@@ -15,7 +15,7 @@ const router = useRouter();
 const rows = ref([]);
 
 const filter = {
-    where: { clientFk: `${route.params.id}` },
+    where: { clientFk: route.params.id },
     order: ['started DESC'],
     limit: 20,
 };
diff --git a/src/pages/Customer/Card/CustomerSamples.vue b/src/pages/Customer/Card/CustomerSamples.vue
index c0d84eff6..499db87fb 100644
--- a/src/pages/Customer/Card/CustomerSamples.vue
+++ b/src/pages/Customer/Card/CustomerSamples.vue
@@ -71,7 +71,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: (value) => value.company.code,
+        field: (value) => value.company?.code,
         label: t('Company'),
         name: 'company',
     },
diff --git a/src/pages/Customer/Card/CustomerUnpaid.vue b/src/pages/Customer/Card/CustomerUnpaid.vue
index 66f771aba..54b4851db 100644
--- a/src/pages/Customer/Card/CustomerUnpaid.vue
+++ b/src/pages/Customer/Card/CustomerUnpaid.vue
@@ -1,3 +1,57 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const unpaidClient = ref(false);
+const initialData = reactive({
+    dated: '2001-01-01T11:00:00.000Z',
+    clientFk: 1,
+});
+
+const onFetch = () => {
+    unpaidClient.value = true;
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Customer unpaid</div>
+    <FormModel
+        :form-initial-data="initialData"
+        :observe-form-changes="true"
+        :url="`ClientUnpaids/${route.params.id}`"
+        @on-fetch="onFetch"
+        url-create="ClientUnpaids"
+        auto-load
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox :label="t('Unpaid client')" v-model="unpaidClient" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md" v-if="unpaidClient">
+                <div class="col">
+                    <VnInputDate :label="t('Date')" v-model="data.dated" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Amount')" type="number" v-model="data.amount" />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
 </template>
+
+<i18n>
+es:
+    Unpaid client: Cliente impagado
+    Date: Fecha
+    Amount: Importe
+</i18n>
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
index b150f4d8b..cb24548a3 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import axios from 'axios';
-import { useQuasar } from 'quasar';
+import { useDialogPluginComponent, useQuasar } from 'quasar';
 
 import VnRow from 'components/ui/VnRow.vue';
 
@@ -18,6 +18,7 @@ const $props = defineProps({
     },
 });
 
+const { dialogRef } = useDialogPluginComponent();
 const { t } = useI18n();
 const quasar = useQuasar();
 
diff --git a/src/pages/Customer/components/CustomerFileManagementActions.vue b/src/pages/Customer/components/CustomerFileManagementActions.vue
new file mode 100644
index 000000000..105c12cf7
--- /dev/null
+++ b/src/pages/Customer/components/CustomerFileManagementActions.vue
@@ -0,0 +1,96 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useQuasar } from 'quasar';
+
+import { downloadFile } from 'src/composables/downloadFile';
+
+import CustomerFileManagementDelete from 'src/pages/Customer/components/CustomerFileManagementDelete.vue';
+
+const { t } = useI18n();
+const quasar = useQuasar();
+const route = useRoute();
+const router = useRouter();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+});
+
+const setDownloadFile = () => downloadFile($props.id);
+
+const toCustomerFileManagementEdit = () => {
+    router.push({
+        name: 'CustomerFileManagementEdit',
+        params: {
+            id: route.params.id,
+            dmsId: $props.id,
+        },
+    });
+};
+
+const showCustomerFileManagementDeleteDialog = () => {
+    quasar.dialog({
+        component: CustomerFileManagementDelete,
+        componentProps: {
+            id: $props.id,
+            promise: setData,
+        },
+    });
+};
+
+const setData = () => {
+    $props.promise();
+};
+</script>
+
+<template>
+    <div>
+        <QIcon
+            @click.stop="setDownloadFile"
+            color="primary"
+            name="cloud_download"
+            size="sm"
+        >
+            <QTooltip>
+                {{ t('Download file') }}
+            </QTooltip>
+        </QIcon>
+        <QIcon
+            @click.stop="toCustomerFileManagementEdit"
+            class="q-ml-md"
+            color="primary"
+            name="edit"
+            size="sm"
+        >
+            <QTooltip>
+                {{ t('Edit file') }}
+            </QTooltip>
+        </QIcon>
+        <QIcon
+            @click.stop="showCustomerFileManagementDeleteDialog"
+            class="q-ml-md"
+            color="primary"
+            name="delete"
+            size="sm"
+        >
+            <QTooltip>
+                {{ t('Remove file') }}
+            </QTooltip>
+        </QIcon>
+    </div>
+</template>
+
+<i18n>
+es:
+    Download file: Descargar fichero
+    Edit file: Editar fichero
+    Remove file: Eliminar fichero
+</i18n>
diff --git a/src/pages/Customer/components/CustomerFileManagementCreate.vue b/src/pages/Customer/components/CustomerFileManagementCreate.vue
new file mode 100644
index 000000000..9e15758f8
--- /dev/null
+++ b/src/pages/Customer/components/CustomerFileManagementCreate.vue
@@ -0,0 +1,247 @@
+<script setup>
+import { onBeforeMount, ref, watch } from 'vue';
+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 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 { t } = useI18n();
+const quasar = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const state = useState();
+const user = state.getUser();
+
+const filterFindOne = { where: { code: 'paymentsLaw' } };
+const filterCompanies = { order: ['code'] };
+const filterWarehouses = { order: ['name'] };
+
+const client = ref({});
+const findOne = ref([]);
+const allowedContentTypes = ref([]);
+const optionsCompanies = ref([]);
+const optionsWarehouses = ref([]);
+const optionsDmsTypes = ref([]);
+const isLoading = ref(false);
+const dms = ref({
+    hasFile: false,
+});
+
+onBeforeMount(() => {
+    const { companyFk, warehouseFk } = user.value;
+    dms.value.reference = route.params.id;
+    dms.value.companyId = companyFk;
+    dms.value.warehouseId = warehouseFk;
+});
+
+watch([client, findOne], ([newClient, newFindOne]) => {
+    dms.value.description = t('clientFileDescription', {
+        dmsTypeName: newFindOne.name?.toUpperCase(),
+        clientName: newClient.name?.toUpperCase(),
+        clientId: newClient.id,
+    });
+    dms.value.dmsTypeId = newFindOne.id;
+});
+
+const saveData = async () => {
+    try {
+        const formData = new FormData();
+
+        if (dms.value.files) {
+            for (let i = 0; i < dms.value.files.length; i++)
+                formData.append(dms.value.files[i].name, dms.value.files[i]);
+            dms.value.hasFileAttached = true;
+        }
+        const url = `clients/${route.params.id}/uploadFile`;
+        await axios.post(url, formData, {
+            params: dms.value,
+        });
+        quasar.notify({
+            message: t('globals.dataSaved'),
+            type: 'positive',
+        });
+        router.push({ name: 'CustomerFileManagement' });
+    } catch (error) {
+        quasar.notify({
+            message: t(`${error.message}`),
+            type: 'negative',
+        });
+    }
+};
+
+const inputFileRef = ref();
+</script>
+
+<template>
+    <fetch-data
+        @on-fetch="(data) => (client = data)"
+        auto-load
+        :url="`Clients/${route.params.id}/getCard`"
+    />
+    <fetch-data
+        :filter="filterFindOne"
+        @on-fetch="(data) => (findOne = data)"
+        auto-load
+        url="DmsTypes/findOne"
+    />
+    <fetch-data
+        @on-fetch="(data) => (allowedContentTypes = data)"
+        auto-load
+        url="DmsContainers/allowedContentTypes"
+    />
+    <fetch-data
+        :filter="filterCompanies"
+        @on-fetch="(data) => (optionsCompanies = data)"
+        auto-load
+        url="Companies"
+    />
+    <fetch-data
+        :filter="filterWarehouses"
+        @on-fetch="(data) => (optionsWarehouses = data)"
+        auto-load
+        url="Warehouses"
+    />
+    <fetch-data
+        :filter="filterWarehouses"
+        @on-fetch="(data) => (optionsDmsTypes = data)"
+        auto-load
+        url="DmsTypes"
+    />
+
+    <QForm>
+        <QCard class="q-pa-lg">
+            <QCardSection>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput :label="t('Reference')" v-model="dms.reference" />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Company')"
+                            :options="optionsCompanies"
+                            option-label="code"
+                            option-value="id"
+                            v-model="dms.companyId"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Warehouse')"
+                            :options="optionsWarehouses"
+                            option-label="name"
+                            option-value="id"
+                            v-model="dms.warehouseId"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Type')"
+                            :options="optionsDmsTypes"
+                            option-label="name"
+                            option-value="id"
+                            v-model="dms.dmsTypeId"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            :label="t('Description')"
+                            type="textarea"
+                            v-model="dms.description"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QFile
+                            ref="inputFileRef"
+                            class="required"
+                            :label="t('File')"
+                            v-model="dms.files"
+                            multiple
+                            :accept="allowedContentTypes.join(',')"
+                            clearable
+                            clear-icon="close"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="attach_file_add"
+                                    flat
+                                    round
+                                    padding="xs"
+                                    @click="inputFileRef.pickFiles()"
+                                >
+                                    <QTooltip>
+                                        {{ t('Select a file') }}
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn icon="info" flat round padding="xs">
+                                    <QTooltip max-width="30rem">
+                                        {{
+                                            `${t(
+                                                'Allowed content types'
+                                            )}: ${allowedContentTypes.join(', ')}`
+                                        }}
+                                    </QTooltip>
+                                </QBtn>
+                            </template>
+                        </QFile>
+                    </div>
+                </VnRow>
+
+                <QCheckbox
+                    :label="t('Generate identifier for original file')"
+                    v-model="dms.hasFile"
+                />
+            </QCardSection>
+
+            <QCardActions class="flex justify-end">
+                <QBtn
+                    :disabled="isLoading"
+                    :label="t('globals.cancel')"
+                    :loading="isLoading"
+                    class="q-mr-xl"
+                    color="primary"
+                    flat
+                />
+                <QBtn
+                    :disabled="isLoading"
+                    :label="t('globals.save')"
+                    :loading="isLoading"
+                    color="primary"
+                    @click.stop="saveData"
+                />
+            </QCardActions>
+        </QCard>
+    </QForm>
+</template>
+
+<i18n>
+en:
+    clientFileDescription: '{dmsTypeName} FROM CLIENT {clientName} ID {clientId}'
+es:
+    Reference: Referencia
+    Company: Empresa
+    Warehouse: Almacén
+    Type: Tipo
+    Description: Descripción
+    clientFileDescription: '{dmsTypeName} DEL CLIENTE {clientName} ID {clientId}'
+    File: Fichero
+    Select a file: Selecciona un fichero
+    Allowed content types: Tipos de archivo permitidos
+    Generate identifier for original file: Generar identificador para archivo original
+</i18n>
diff --git a/src/pages/Customer/components/CustomerFileManagementDelete.vue b/src/pages/Customer/components/CustomerFileManagementDelete.vue
new file mode 100644
index 000000000..c4e80d492
--- /dev/null
+++ b/src/pages/Customer/components/CustomerFileManagementDelete.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useDialogPluginComponent, useQuasar } from 'quasar';
+import axios from 'axios';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+});
+
+const { dialogRef } = useDialogPluginComponent();
+const { t } = useI18n();
+const quasar = useQuasar();
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+
+const deleteDms = async () => {
+    isLoading.value = true;
+    try {
+        await axios.post(`ClientDms/${$props.id}/removeFile`);
+        if ($props.promise) await $props.promise();
+    } catch (error) {
+        quasar.notify({
+            message: t(`${error.message}`),
+            type: 'negative',
+        });
+    } finally {
+        closeButton.value.click();
+        isLoading.value = false;
+    }
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef">
+        <QCard class="q-pa-md q-mb-md">
+            <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+
+            <QCardSection>
+                <div class="mt-1 text-h6">{{ t('This file will be deleted') }}</div>
+                <div>{{ t('Are you sure you want to continue?') }}</div>
+            </QCardSection>
+
+            <QCardActions class="flex justify-end">
+                <QBtn
+                    :disabled="isLoading"
+                    :label="t('globals.cancel')"
+                    :loading="isLoading"
+                    class="q-mr-xl"
+                    color="primary"
+                    flat
+                    v-close-popup
+                />
+                <QBtn
+                    :disabled="isLoading"
+                    :label="t('globals.save')"
+                    :loading="isLoading"
+                    @click.stop="deleteDms"
+                    color="primary"
+                />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+</template>
+
+<i18n>
+es:
+    This file will be deleted: Este fichero va a ser borrado
+    Are you sure you want to continue?: ¿Seguro que quieres continuar?
+</i18n>
diff --git a/src/pages/Customer/components/CustomerFileManagementEdit.vue b/src/pages/Customer/components/CustomerFileManagementEdit.vue
new file mode 100644
index 000000000..5b6cb0981
--- /dev/null
+++ b/src/pages/Customer/components/CustomerFileManagementEdit.vue
@@ -0,0 +1,225 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+
+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 { t } = useI18n();
+const quasar = useQuasar();
+const route = useRoute();
+const router = useRouter();
+
+const filterCompanies = { order: ['code'] };
+const filterWarehouses = { order: ['name'] };
+
+const allowedContentTypes = ref([]);
+const optionsCompanies = ref([]);
+const optionsWarehouses = ref([]);
+const optionsDmsTypes = ref([]);
+const isLoading = ref(false);
+const dms = ref({
+    hasFile: true,
+});
+
+const setCurrentDms = (data) => {
+    dms.value.reference = data.reference;
+    dms.value.companyId = data.companyFk;
+    dms.value.warehouseId = data.warehouseFk;
+    dms.value.dmsTypeId = data.dmsTypeFk;
+    dms.value.description = data.description;
+};
+
+const saveData = async () => {
+    try {
+        const formData = new FormData();
+
+        if (dms.value.files) {
+            for (let i = 0; i < dms.value.files.length; i++)
+                formData.append(dms.value.files[i].name, dms.value.files[i]);
+            dms.value.hasFileAttached = true;
+        }
+
+        const url = `dms/${route.params.dmsId}/updateFile`;
+        await axios.post(url, formData, {
+            params: dms.value,
+        });
+
+        quasar.notify({
+            message: t('globals.dataSaved'),
+            type: 'positive',
+        });
+        router.push({ name: 'CustomerFileManagement' });
+    } catch (error) {
+        quasar.notify({
+            message: t(`${error.message}`),
+            type: 'negative',
+        });
+    }
+};
+
+const inputFileRef = ref();
+</script>
+
+<template>
+    <fetch-data :url="`Dms/${route.params.dmsId}`" @on-fetch="setCurrentDms" auto-load />
+    <fetch-data
+        @on-fetch="(data) => (allowedContentTypes = data)"
+        auto-load
+        url="DmsContainers/allowedContentTypes"
+    />
+    <fetch-data
+        :filter="filterCompanies"
+        @on-fetch="(data) => (optionsCompanies = data)"
+        auto-load
+        url="Companies"
+    />
+    <fetch-data
+        :filter="filterWarehouses"
+        @on-fetch="(data) => (optionsWarehouses = data)"
+        auto-load
+        url="Warehouses"
+    />
+    <fetch-data
+        :filter="filterWarehouses"
+        @on-fetch="(data) => (optionsDmsTypes = data)"
+        auto-load
+        url="DmsTypes"
+    />
+
+    <QForm>
+        <QCard class="q-pa-lg">
+            <QCardSection>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput :label="t('Reference')" v-model="dms.reference" />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Company')"
+                            :options="optionsCompanies"
+                            option-label="code"
+                            option-value="id"
+                            v-model="dms.companyId"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Warehouse')"
+                            :options="optionsWarehouses"
+                            option-label="name"
+                            option-value="id"
+                            v-model="dms.warehouseId"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Type')"
+                            :options="optionsDmsTypes"
+                            option-label="name"
+                            option-value="id"
+                            v-model="dms.dmsTypeId"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            :label="t('Description')"
+                            type="textarea"
+                            v-model="dms.description"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QFile
+                            ref="inputFileRef"
+                            class="required"
+                            :label="t('File')"
+                            v-model="dms.files"
+                            multiple
+                            :accept="allowedContentTypes.join(',')"
+                            clearable
+                            clear-icon="close"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="attach_file_add"
+                                    flat
+                                    round
+                                    padding="xs"
+                                    @click="inputFileRef.pickFiles()"
+                                >
+                                    <QTooltip>
+                                        {{ t('Select a file') }}
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn icon="info" flat round padding="xs">
+                                    <QTooltip max-width="30rem">
+                                        {{
+                                            `${t(
+                                                'Allowed content types'
+                                            )}: ${allowedContentTypes.join(', ')}`
+                                        }}
+                                    </QTooltip>
+                                </QBtn>
+                            </template>
+                        </QFile>
+                    </div>
+                </VnRow>
+
+                <QCheckbox
+                    :label="t('Generate identifier for original file')"
+                    v-model="dms.hasFile"
+                    disable
+                />
+            </QCardSection>
+
+            <QCardActions class="flex justify-end">
+                <QBtn
+                    :disabled="isLoading"
+                    :label="t('globals.cancel')"
+                    :loading="isLoading"
+                    class="q-mr-xl"
+                    color="primary"
+                    flat
+                />
+                <QBtn
+                    :disabled="isLoading"
+                    :label="t('globals.save')"
+                    :loading="isLoading"
+                    color="primary"
+                    @click.stop="saveData"
+                />
+            </QCardActions>
+        </QCard>
+    </QForm>
+</template>
+
+<i18n>
+en:
+    clientFileDescription: '{dmsTypeName} FROM CLIENT {clientName} ID {clientId}'
+es:
+    Reference: Referencia
+    Company: Empresa
+    Warehouse: Almacén
+    Type: Tipo
+    Description: Descripción
+    clientFileDescription: '{dmsTypeName} DEL CLIENTE {clientName} ID {clientId}'
+    File: Fichero
+    Select a file: Selecciona un fichero
+    Allowed content types: Tipos de archivo permitidos
+    Generate identifier for original file: Generar identificador para archivo original
+</i18n>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 46202128c..88faec2a5 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -356,12 +356,12 @@ export default {
                             {
                                 name: 'CustomerCreditContracts',
                                 title: 'creditContracts',
-                                icon: 'paid',
+                                icon: 'vn:solunion',
                             },
                             {
                                 name: 'CustomerCreditOpinion',
                                 title: 'creditOpinion',
-                                icon: 'paid',
+                                icon: 'vn:linesprepaired',
                             },
                         ],
                     },
@@ -371,7 +371,6 @@ export default {
                             name: 'CustomerCreditContracts',
                             meta: {
                                 title: 'creditContracts',
-                                icon: 'paid',
                             },
                             component: () =>
                                 import(
@@ -388,7 +387,6 @@ export default {
                                     name: 'CustomerCreditContracts',
                                     meta: {
                                         title: 'creditContracts',
-                                        icon: 'paid',
                                     },
                                     component: () =>
                                         import(
@@ -418,7 +416,6 @@ export default {
                             name: 'CustomerCreditOpinion',
                             meta: {
                                 title: 'creditOpinion',
-                                icon: 'paid',
                             },
                             component: () =>
                                 import(
@@ -437,37 +434,37 @@ export default {
                             {
                                 name: 'CustomerSamples',
                                 title: 'samples',
-                                icon: 'pending',
+                                icon: 'vn:notes',
                             },
                             {
                                 name: 'CustomerConsumption',
                                 title: 'consumption',
-                                icon: 'pending',
+                                icon: 'vn:lines',
                             },
                             {
                                 name: 'CustomerMandates',
                                 title: 'mandates',
-                                icon: 'pending',
+                                icon: 'vn:mandatory',
                             },
                             {
                                 name: 'CustomerContacts',
                                 title: 'contacts',
-                                icon: 'pending',
+                                icon: 'contact_phone',
                             },
                             {
                                 name: 'CustomerWebPayment',
                                 title: 'webPayment',
-                                icon: 'pending',
+                                icon: 'vn:onlinepayment',
                             },
                             {
                                 name: 'CustomerFileManagement',
                                 title: 'fileManagement',
-                                icon: 'pending',
+                                icon: 'Upload',
                             },
                             {
                                 name: 'CustomerUnpaid',
                                 title: 'unpaid',
-                                icon: 'pending',
+                                icon: 'vn:supplierfalse',
                             },
                         ],
                     },
@@ -477,7 +474,6 @@ export default {
                             name: 'CustomerSamples',
                             meta: {
                                 title: 'samples',
-                                icon: 'paid',
                             },
                             component: () =>
                                 import('src/pages/Customer/Card/CustomerSamples.vue'),
@@ -492,7 +488,6 @@ export default {
                                     name: 'CustomerSamples',
                                     meta: {
                                         title: 'samples',
-                                        icon: 'paid',
                                     },
                                     component: () =>
                                         import(
@@ -514,7 +509,6 @@ export default {
                             name: 'CustomerConsumption',
                             meta: {
                                 title: 'consumption',
-                                icon: 'paid',
                             },
                             component: () =>
                                 import('src/pages/Customer/Card/CustomerConsumption.vue'),
@@ -524,7 +518,6 @@ export default {
                             name: 'CustomerMandates',
                             meta: {
                                 title: 'mandates',
-                                icon: 'paid',
                             },
                             component: () =>
                                 import('src/pages/Customer/Card/CustomerMandates.vue'),
@@ -534,7 +527,6 @@ export default {
                             name: 'CustomerContacts',
                             meta: {
                                 title: 'contacts',
-                                icon: 'paid',
                             },
                             component: () =>
                                 import('src/pages/Customer/Card/CustomerContacts.vue'),
@@ -544,7 +536,6 @@ export default {
                             name: 'CustomerWebPayment',
                             meta: {
                                 title: 'webPayment',
-                                icon: 'paid',
                             },
                             component: () =>
                                 import('src/pages/Customer/Card/CustomerWebPayment.vue'),
@@ -554,7 +545,6 @@ export default {
                             name: 'CustomerFileManagement',
                             meta: {
                                 title: 'fileManagement',
-                                icon: 'paid',
                             },
                             component: () =>
                                 import(
@@ -571,7 +561,6 @@ export default {
                                     name: 'CustomerFileManagement',
                                     meta: {
                                         title: 'fileManagement',
-                                        icon: 'paid',
                                     },
                                     component: () =>
                                         import(
@@ -586,6 +575,14 @@ export default {
                                             'src/pages/Customer/components/CustomerFileManagementCreate.vue'
                                         ),
                                 },
+                                {
+                                    path: ':dmsId/edit',
+                                    name: 'CustomerFileManagementEdit',
+                                    component: () =>
+                                        import(
+                                            'src/pages/Customer/components/CustomerFileManagementEdit.vue'
+                                        ),
+                                },
                             ],
                         },
                         {
@@ -593,7 +590,6 @@ export default {
                             name: 'CustomerUnpaid',
                             meta: {
                                 title: 'unpaid',
-                                icon: 'paid',
                             },
                             component: () =>
                                 import('src/pages/Customer/Card/CustomerUnpaid.vue'),

From fd3eea70dea42bf5d2b35b872fe281bda872bf0e Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Tue, 6 Feb 2024 11:04:37 -0500
Subject: [PATCH 2/2] Se corrigen comentarios de PR

---
 src/css/app.scss                              |  4 +++
 src/pages/Customer/Card/CustomerBalance.vue   | 30 ++++++++--------
 .../Customer/Card/CustomerConsumption.vue     |  8 +----
 .../Customer/Card/CustomerCreditContracts.vue | 17 +++++----
 src/pages/Customer/Card/CustomerCredits.vue   | 12 ++++---
 .../Customer/Card/CustomerFileManagement.vue  | 33 ++++++++---------
 src/pages/Customer/Card/CustomerGreuges.vue   | 30 ++++++----------
 src/pages/Customer/Card/CustomerLog.vue       |  2 +-
 src/pages/Customer/Card/CustomerMandates.vue  |  8 +----
 src/pages/Customer/Card/CustomerNotes.vue     | 10 ++----
 .../Customer/Card/CustomerRecoveries.vue      | 12 +------
 src/pages/Customer/Card/CustomerSamples.vue   | 26 +++++---------
 .../Customer/Card/CustomerWebPayment.vue      |  8 +----
 .../Customer/Defaulter/CustomerDefaulter.vue  | 35 +++++++++----------
 .../CustomerDefaulterAddObservation.vue       | 16 ++++-----
 .../CustomerFileManagementCreate.vue          | 14 +++-----
 .../CustomerFileManagementDelete.vue          | 12 +++----
 .../components/CustomerFileManagementEdit.vue | 15 +++-----
 18 files changed, 113 insertions(+), 179 deletions(-)

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');
     }
 };