71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<template>
|
|
<div class="stats">
|
|
<h5 class="mb-2 text-center">Dépassements de budgets</h5>
|
|
<BTableSimple
|
|
v-if="Object.keys(data).length > 0"
|
|
caption-top
|
|
responsive
|
|
>
|
|
<BThead>
|
|
<BTr>
|
|
<BTh
|
|
width="120px"
|
|
class="text-start"
|
|
>Mois</BTh
|
|
>
|
|
<BTh class="text-start">Catégorie</BTh>
|
|
<BTh
|
|
width="120px"
|
|
class="text-end"
|
|
>Seuil</BTh
|
|
>
|
|
<BTh
|
|
width="120px"
|
|
class="text-end"
|
|
>Montant</BTh
|
|
>
|
|
<BTh
|
|
width="120px"
|
|
class="text-end"
|
|
>Dépassement</BTh
|
|
>
|
|
</BTr>
|
|
</BThead>
|
|
<BTbody>
|
|
<template v-for="(item, date) in data">
|
|
<BTr
|
|
v-for="(row, key) in item"
|
|
:key="key"
|
|
>
|
|
<BTd class="text-start">{{ date }}</BTd>
|
|
<BTd class="text-start">
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<span v-html="renderCategory(row.category)"></span>
|
|
</BTd>
|
|
<BTd class="text-end">{{ renderEuro(row.category.month_threshold) }}</BTd>
|
|
<BTd class="text-end">{{ renderEuro(row.amount) }}</BTd>
|
|
<BTd class="text-end">{{ renderEuro(row.amount - row.category.month_threshold) }}</BTd>
|
|
</BTr>
|
|
</template>
|
|
</BTbody>
|
|
</BTableSimple>
|
|
<div
|
|
v-else
|
|
class="text-center"
|
|
>
|
|
<p>Aucune donnée.</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { BTableSimple, BThead, BTbody, BTr, BTh, BTd } from 'bootstrap-vue-next'
|
|
import { renderCategory, renderEuro } from '../../lib/renderers'
|
|
|
|
defineProps({
|
|
data: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
})
|
|
</script>
|