306 lines
12 KiB
Vue
306 lines
12 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;
|
|
});
|
|
|
|
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="`#/customer/${entityId}/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" copy />
|
|
<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="`#/customer/${entityId}/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="`#/customer/${entityId}/fiscal-data`" link>
|
|
{{ t('customer.summary.fiscalData') }}
|
|
<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="`#/customer/${entityId}/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="`#/customer/${entityId}/consignees`" 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="`#/customer/${entityId}/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)"
|
|
/>
|
|
<VnLv
|
|
:label="t('customer.summary.rating')"
|
|
:value="entity.rating"
|
|
:info="t('valueInfo', { min: 1, max: 20 })"
|
|
/>
|
|
|
|
<VnLv
|
|
:label="t('customer.summary.recommendCredit')"
|
|
:value="entity.recommendedCredit"
|
|
/>
|
|
</QCard>
|
|
</template>
|
|
</CardSummary>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
@media (min-width: $breakpoint-md) {
|
|
.summary .vn-one {
|
|
min-width: 300px;
|
|
}
|
|
}
|
|
</style>
|
|
<i18n>
|
|
en:
|
|
valueInfo: Value from {min} to {max}. The higher the better value
|
|
es:
|
|
valueInfo: Valor de {min} a {max}. Cuanto más alto, mejor valor
|
|
</i18n>
|