salix-front/src/pages/Customer/Card/CustomerSummary.vue

283 lines
11 KiB
Vue

<script setup>
import { computed, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency, toPercentage, toDate } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue';
import { getUrl } from 'src/composables/getUrl';
import VnLv from 'src/components/ui/VnLv.vue';
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
const route = useRoute();
const { t } = useI18n();
const $props = defineProps({
id: {
type: Number,
default: 0,
},
});
const entityId = computed(() => $props.id || route.params.id);
const customer = computed(() => summary.value.entity);
const summary = ref();
const clientUrl = ref();
onMounted(async () => {
clientUrl.value = (await getUrl('client/')) + entityId.value + '/';
});
const balanceDue = computed(() => {
return (
customer.value &&
customer.value.defaulters.length &&
customer.value.defaulters[0].amount
);
});
const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
const claimRate = computed(() => {
return customer.value.claimsRatio.claimingRate * 100;
});
const priceIncreasingRate = computed(() => {
return customer.value.claimsRatio.priceIncreasing / 100;
});
const debtWarning = computed(() => {
return customer.value?.debt?.debt > customer.value.credit ? 'negative' : '';
});
const creditWarning = computed(() => {
const data = customer.value;
const tooMuchInsurance = data.credit > data.creditInsurance;
const noCreditInsurance = data.credit && data.creditInsurance == null;
return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
});
</script>
<template>
<CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
<template #body="{ entity }">
<QCard class="vn-one">
<a class="header" :href="clientUrl + `basic-data`">
{{ t('customer.summary.basicData') }}
<QIcon name="open_in_new" color="primary" />
</a>
<VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
<VnLv :label="t('customer.summary.name')" :value="entity.name" />
<VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
<VnLv :value="entity.phone">
<template #label>
{{ t('customer.summary.phone') }}
<VnLinkPhone :phone-number="entity.phone" />
</template>
</VnLv>
<VnLv :value="entity.mobile">
<template #label>
{{ t('customer.summary.mobile') }}
<VnLinkPhone :phone-number="entity.mobile" />
</template>
</VnLv>
<VnLv :label="t('customer.summary.email')" :value="entity.email" />
<VnLv
:label="t('customer.summary.salesPerson')"
:value="entity?.salesPersonUser?.name"
/>
<VnLv
:label="t('customer.summary.contactChannel')"
:value="entity?.contactChannel?.name"
/>
<VnLv
:label="t('customer.summary.businessType')"
:value="entity.businessType.description"
/>
</QCard>
<QCard class="vn-one">
<a class="header" :href="clientUrl + `fiscal-data`">
{{ t('customer.summary.fiscalAddress') }}
<QIcon name="open_in_new" color="primary" />
</a>
<VnLv
:label="t('customer.summary.socialName')"
:value="entity.socialName"
/>
<VnLv :label="t('customer.summary.fiscalId')" :value="entity.fi" />
<VnLv :label="t('customer.summary.city')" :value="entity.city" />
<VnLv :label="t('customer.summary.postcode')" :value="entity.postcode" />
<VnLv
v-if="entity.province"
:label="t('customer.summary.province')"
:value="entity.province.name"
/>
<VnLv
v-if="entity.country"
:label="t('customer.summary.country')"
:value="entity.country.country"
/>
<VnLv :label="t('customer.summary.street')" :value="entity.street" />
</QCard>
<QCard class="vn-one">
<a class="header link" :href="clientUrl + `fiscal-data`" link>
{{ t('customer.summary.fiscalAddress') }}
<QIcon name="open_in_new" color="primary" />
</a>
<VnLv
:label="t('customer.summary.isEqualizated')"
:value="entity.isEqualizated"
/>
<VnLv :label="t('customer.summary.isActive')" :value="entity.isActive" />
<VnLv
:label="t('customer.summary.invoiceByAddress')"
:value="entity.hasToInvoiceByAddress"
/>
<VnLv
:label="t('customer.summary.verifiedData')"
:value="entity.isTaxDataChecked"
/>
<VnLv
:label="t('customer.summary.hasToInvoice')"
:value="entity.hasToInvoice"
/>
<VnLv
:label="t('customer.summary.notifyByEmail')"
:value="entity.isToBeMailed"
/>
<VnLv :label="t('customer.summary.vies')" :value="entity.isVies" />
</QCard>
<QCard class="vn-one">
<a class="header link" :href="clientUrl + `billing-data`" link>
{{ t('customer.summary.billingData') }}
<QIcon name="open_in_new" color="primary" />
</a>
<VnLv
:label="t('customer.summary.payMethod')"
:value="entity.payMethod.name"
/>
<VnLv :label="t('customer.summary.bankAccount')" :value="entity.iban" />
<VnLv :label="t('customer.summary.dueDay')" :value="entity.dueDay" />
<VnLv :label="t('customer.summary.hasLcr')" :value="entity.hasLcr" />
<VnLv
:label="t('customer.summary.hasCoreVnl')"
:value="entity.hasCoreVnl"
/>
<VnLv
:label="t('customer.summary.hasB2BVnl')"
:value="entity.hasSepaVnl"
/>
</QCard>
<QCard class="vn-one" v-if="entity.defaultAddress">
<a class="header link" :href="clientUrl + `address/index`" link>
{{ t('customer.summary.consignee') }}
<QIcon name="open_in_new" color="primary" />
</a>
<VnLv
:label="t('customer.summary.addressName')"
:value="entity.defaultAddress.nickname"
/>
<VnLv
:label="t('customer.summary.addressCity')"
:value="entity.defaultAddress.city"
/>
<VnLv
:label="t('customer.summary.addressStreet')"
:value="entity.defaultAddress.street"
/>
</QCard>
<QCard class="vn-one" v-if="entity.account">
<a class="header link" :href="clientUrl + `web-access`">
{{ t('customer.summary.webAccess') }}
<QIcon name="open_in_new" color="primary" />
</a>
<VnLv
:label="t('customer.summary.username')"
:value="entity.account.name"
/>
<VnLv
:label="t('customer.summary.webAccess')"
:value="entity.account.active"
/>
</QCard>
<QCard class="vn-one" v-if="entity.account">
<div class="header">
{{ t('customer.summary.businessData') }}
</div>
<VnLv
:label="t('customer.summary.totalGreuge')"
:value="toCurrency(entity.totalGreuge)"
/>
<VnLv
:label="t('customer.summary.mana')"
:value="toCurrency(entity?.mana?.mana)"
/>
<VnLv
v-if="entity.claimsRatio"
:label="t('customer.summary.priceIncreasingRate')"
:value="toPercentage(priceIncreasingRate)"
/>
<VnLv
:label="t('customer.summary.averageInvoiced')"
:value="toCurrency(entity?.averageInvoiced?.invoiced)"
/>
<VnLv
v-if="entity.claimsRatio"
:label="t('customer.summary.claimRate')"
:value="toPercentage(claimRate)"
/>
</QCard>
<QCard class="vn-one" v-if="entity.account">
<a
class="header link"
:href="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
link
>
{{ t('customer.summary.financialData') }}
<QIcon name="vn:grafana" color="primary" />
</a>
<VnLv
:label="t('customer.summary.risk')"
:value="toCurrency(entity?.debt?.debt)"
:class="debtWarning"
:info="t('customer.summary.riskInfo')"
/>
<VnLv
:label="t('customer.summary.credit')"
:value="toCurrency(entity.credit)"
:class="creditWarning"
:info="t('customer.summary.creditInfo')"
/>
<VnLv
v-if="entity.creditInsurance"
:label="t('customer.summary.securedCredit')"
:value="toCurrency(entity.creditInsurance)"
:info="t('customer.summary.securedCreditInfo')"
/>
<VnLv
:label="t('customer.summary.balance')"
:value="toCurrency(entity.sumRisk) || toCurrency(0)"
:info="t('customer.summary.balanceInfo')"
/>
<VnLv
v-if="entity.defaulters"
:label="t('customer.summary.balanceDue')"
:value="toCurrency(balanceDue)"
:class="balanceDueWarning"
:info="t('customer.summary.balanceDueInfo')"
/>
<VnLv
v-if="entity.recovery"
:label="t('customer.summary.recoverySince')"
:value="toDate(entity.recovery.started)"
/>
</QCard>
</template>
</CardSummary>
</template>