Correcciones solicitadas en la revision del pr

src/pages/Customer/Card/CustomerBalance.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import axios from 'axios';
 import { date, QCheckbox, QBtn, useQuasar } from 'quasar';
 
 import { toCurrency } from 'src/filters';
@@ -24,8 +23,19 @@ const companiesOptions = ref([]);
 const companyId = ref(442);
 const rows = ref(null);
 const workerId = ref(0);
+const receiptsRef = ref(null);
+const clientRisksRef = ref(null);
 
 const filterCompanies = { order: ['code'] };
+const params = {
+    clientId: `${route.params.id}`,
+    companyId: companyId.value,
+    filter: { limit: 20 },
+};
+const filter = {
+    include: { relation: 'company', scope: { fields: ['code'] } },
+    where: { clientFk: `${route.params.id}`, companyFk: companyId.value },
+};
 
 const tableColumnComponents = {
     payed: {
@@ -91,7 +101,7 @@ const columns = computed(() => [
     {
         align: 'left',
         field: 'created',
-        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm:ss'),
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm'),
         label: t('Creation date'),
         name: 'created',
     },
@@ -141,36 +151,10 @@ const columns = computed(() => [
     },
 ]);
 
-onBeforeMount(() => {
-    getData();
-});
-
 const getData = () => {
-    getReceipts();
-    getClientRisks();
-};
-
-const getReceipts = async () => {
-    const params = {
-        clientId: `${route.params.id}`,
-        companyId: companyId.value,
-        filter: { limit: 20 },
-    };
-    const { data } = await axios.get('Receipts/filter', { params });
-    rows.value = data;
     stateStore.rightDrawer = true;
-};
-
-const getClientRisks = async () => {
-    const filter = {
-        include: { relation: 'company', scope: { fields: ['code'] } },
-        where: { clientFk: `${route.params.id}`, companyFk: companyId.value },
-    };
-    const { data } = await axios.get('ClientRisks', {
-        params: { filter: JSON.stringify(filter) },
-    });
-    clientRisks.value = data;
-    console.log(clientRisks.value[0].amount);
+    receiptsRef.value?.fetch();
+    clientRisksRef.value?.fetch();
 };
 
 const showNewPaymentDialog = () => {
@@ -197,6 +181,20 @@ const updateCompanyId = (id) => {
         auto-load
         url="Companies"
     />
+    <FetchData
+        :params="params"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        ref="receiptsRef"
+        url="Receipts/filter"
+    />
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (clientRisks = data)"
+        auto-load
+        ref="clientRisksRef"
+        url="ClientRisks"
+    />
 
     <QTable
         :columns="columns"
@@ -215,7 +213,9 @@ const updateCompanyId = (id) => {
                         v-bind="tableColumnComponents[props.col.name].props(props)"
                         @click="tableColumnComponents[props.col.name].event(props)"
                     >
+                        <template v-if="props.col.name !== 'isConciliate'">
                             {{ props.value }}
+                        </template>
                         <WorkerDescriptorProxy :id="workerId" />
                     </component>
                 </QTr>

src/pages/Customer/components/CustomerNewPayment.vue

@@ -129,7 +129,7 @@ const onDataSaved = async () => {
             @on-data-saved="onDataSaved()"
         >
             <template #form="{ data }">
-                <span ref="closeButton" class="close-icon" v-close-popup>
+                <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
                     <QIcon name="close" size="sm" />
                 </span>