src/pages/Claim/Card/ClaimSummary.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
@@ -26,7 +26,8 @@ const router = useRouter();
 const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
-
+const amount = ref();
+const amountClaimed = ref();
 const $props = defineProps({
     id: {
         type: Number,
@@ -47,7 +48,31 @@ const claimDmsFilter = ref({
         },
     ],
 });
+async function totalClaim(rows, newRows) {
+    if (newRows) rows = newRows;
+    const { data } = await axios.get(`Claims/${entityId.value}/getSummary`);
 
+    const lines = data.salesClaimed;
+
+    totalRow(lines);
+    amount.value = 0;
+    amountClaimed.value = 0;
+    for (const line of lines) {
+        const { sale } = line;
+        console.log('sale: ', sale);
+        amount.value = amount.value + totalRow(sale);
+        console.log('amount: ', amount.value);
+        const price = line.quantity * sale.price;
+        const discount = (sale.discount * price) / 100;
+        amountClaimed.value = amountClaimed.value + (price - discount);
+        console.log('amountClaimed: ', amountClaimed.value);
+    }
+}
+function totalRow(lines) {
+    const amount = lines.price * lines.quantity;
+    const appliedDiscount = (lines.discount * amount) / 100;
+    return amount - appliedDiscount;
+}
 const detailsColumns = ref([
     {
         name: 'item',
@@ -179,6 +204,10 @@ async function changeState(value) {
 function claimUrl(section) {
     return '#/claim/' + entityId.value + '/' + section;
 }
+
+onMounted(() => {
+    totalClaim();
+});
 </script>
 
 <template>
@@ -233,7 +262,7 @@ function claimUrl(section) {
             <ClaimDescriptorMenu :claim="entity.claim" />
         </template>
         <template #body="{ entity: { claim, salesClaimed, developments } }">
-            <QCard class="vn-one" v-if="$route.name != 'ClaimSummary'">
+            <QCard class="vn-two" v-if="$route.name != 'ClaimSummary'">
                 <VnTitle
                     :url="claimUrl('basic-data')"
                     :text="t('globals.pageTitles.basicData')"
@@ -284,7 +313,7 @@ function claimUrl(section) {
                     order="created ASC"
                 />
             </QCard>
-            <QCard class="vn-two" v-if="claimDms?.length">
+            <QCard class="vn-one" v-if="claimDms?.length">
                 <VnTitle :url="claimUrl('photos')" :text="t('claim.photos')" />
                 <div class="container max-container-height" style="overflow: auto">
                     <div
@@ -326,7 +355,20 @@ function claimUrl(section) {
                     </div>
                 </div>
             </QCard>
-            <QCard class="vn-max" v-if="salesClaimed.length > 0">
+            <QCard class="vn-one">
+                <VnTitle :text="t('claim.resume')" />
+                <div class="container max-container-height">
+                    <VnLv :label="t('Amount')" :value="toCurrency(amount)" />
+                    <VnLv :label="t('Amount Claimed')">
+                        <template #value>
+                            <QChip color="positive">
+                                {{ toCurrency(amountClaimed) }}
+                            </QChip>
+                        </template>
+                    </VnLv>
+                </div>
+            </QCard>
+            <QCard class="vn-max" v-if="salesClaimed.length > 0" @on-fetch="onFetch">
                 <VnTitle :url="claimUrl('lines')" :text="t('claim.details')" />
                 <QTable
                     :columns="detailsColumns"

src/pages/Claim/locale/en.yml

@@ -46,3 +46,4 @@ claim:
     dragDrop: Drag and drop it here
     search: Search claims
     searchInfo: You can search by claim id or customer name
+    resume: Resume

src/pages/Claim/locale/es.yml

@@ -46,3 +46,4 @@ claim:
     dragDrop: Arrastra y suelta aquí
     search: Buscar reclamación
     searchInfo: Puedes buscar por ID de la reclamación o nombre del cliente
+    resume: Resumen