From 4918abd5d68de07c82247db9350667c408ff66d6 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 26 Mar 2025 11:40:19 +0100
Subject: [PATCH] fix: fix eslint warnings/errors

---
 frontend/js/components/CrudFilter.vue         | 195 ++++++++++++++++++
 frontend/js/components/crud/CrudHeader.vue    |  33 +++
 frontend/js/components/crud/CrudPager.vue     |  63 ++++++
 .../js/components/dashboard/CapitalChart.vue  |  70 +++++++
 .../components/dashboard/CategoriesChart.vue  | 140 +++++++++++++
 .../js/components/dashboard/DashFilter.vue    | 115 +++++++++++
 .../dashboard/DiffCreditDebitChart.vue        |  41 ++++
 .../dashboard/DistributionChart.vue           | 145 +++++++++++++
 .../dashboard/MonthThresholdsTable.vue        |  72 +++++++
 .../dashboard/SavingAccountsChart.vue         |  37 ++++
 10 files changed, 911 insertions(+)
 create mode 100644 frontend/js/components/CrudFilter.vue
 create mode 100644 frontend/js/components/crud/CrudHeader.vue
 create mode 100644 frontend/js/components/crud/CrudPager.vue
 create mode 100644 frontend/js/components/dashboard/CapitalChart.vue
 create mode 100644 frontend/js/components/dashboard/CategoriesChart.vue
 create mode 100644 frontend/js/components/dashboard/DashFilter.vue
 create mode 100644 frontend/js/components/dashboard/DiffCreditDebitChart.vue
 create mode 100644 frontend/js/components/dashboard/DistributionChart.vue
 create mode 100644 frontend/js/components/dashboard/MonthThresholdsTable.vue
 create mode 100644 frontend/js/components/dashboard/SavingAccountsChart.vue

diff --git a/frontend/js/components/CrudFilter.vue b/frontend/js/components/CrudFilter.vue
new file mode 100644
index 0000000..045bd00
--- /dev/null
+++ b/frontend/js/components/CrudFilter.vue
@@ -0,0 +1,195 @@
+<template>
+  <div v-if="dataValue && dataValue.length">
+    <div
+      v-for="(item, key) in dataValue"
+      :key="key"
+    >
+      <BFormGroup
+        :label="item.label"
+        class="mb-2"
+      >
+        <div class="row">
+          <div class="col-12 col-md-4 mb-1">
+            <BFormSelect
+              v-model="dataValue[key].comparator"
+              :options="options(item.type)"
+              @change="changed"
+            />
+          </div>
+          <div class="col-12 col-md-7 mb-1">
+            <BFormInput
+              v-if="
+                item.type == 'string' && needValue(dataValue[key].comparator)
+              "
+              v-model="dataValue[key].value"
+              @change="changed"
+            />
+
+            <BFormInput
+              v-if="item.type == 'date' && needValue(dataValue[key].comparator)"
+              v-model="dataValue[key].value"
+              type="date"
+              @change="changed"
+            />
+
+            <BFormInput
+              v-if="
+                item.type == 'number' && needValue(dataValue[key].comparator)
+              "
+              v-model="dataValue[key].value"
+              type="number"
+              @change="changed"
+            />
+
+            <BFormSelect
+              v-if="
+                item.type == 'select' && needValue(dataValue[key].comparator)
+              "
+              v-model="dataValue[key].value"
+              :options="item.options"
+              @change="changed"
+            />
+          </div>
+          <div class="col-1 px-0">
+            <BButton
+              variant="none"
+              @click="doRemove(key)"
+            >
+              <i class="fa fa-trash"></i>
+            </BButton>
+          </div>
+        </div>
+      </BFormGroup>
+    </div>
+  </div>
+  <div
+    v-else
+    class="text-center"
+  >
+    Aucun filtre pour le moment.
+  </div>
+
+  <BFormGroup class="mt-5">
+    <div class="row">
+      <div class="col">
+        <BFormSelect
+          v-model="choice"
+          :options="choices"
+          @change="changed"
+        />
+      </div>
+      <div class="col">
+        <BButton @click="doAdd">Ajouter</BButton>
+      </div>
+    </div>
+  </BFormGroup>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import {
+  BFormGroup,
+  BFormInput,
+  BFormSelect,
+  BButton,
+} from 'bootstrap-vue-next'
+
+const emit = defineEmits(['update'])
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true,
+  },
+  fields: {
+    type: [Array, null],
+    required: true,
+  },
+})
+
+const dataValue = ref(props.data.value)
+const choices = ref([])
+const choice = ref(null)
+
+const _ = { value: null, text: null }
+const eq = { value: 'eq', text: '=' }
+const neq = { value: 'neq', text: '!=' }
+const like = { value: 'like', text: 'contient' }
+const nlike = { value: 'nlike', text: 'ne content pas' }
+const empty = { value: 'empty', text: 'est vide' }
+const nEmpty = { value: 'nempty', text: 'est pas vide' }
+const gt = { value: 'gt', text: '>=' }
+const lt = { value: 'lt', text: '<=' }
+
+const stringOptions = [_, eq, neq, like, nlike, empty, nEmpty]
+const dateOptions = [_, eq, neq, gt, lt, empty, nEmpty]
+const numberOptions = [_, eq, neq, gt, lt, empty, nEmpty]
+const selectOptions = [_, eq, neq, empty, nEmpty]
+
+const options = (type) => {
+  if (type === 'string') {
+    return stringOptions
+  }
+
+  if (type === 'date') {
+    return dateOptions
+  }
+
+  if (type === 'number') {
+    return numberOptions
+  }
+
+  if (type === 'select') {
+    return selectOptions
+  }
+}
+
+const needValue = (c) => {
+  return !['empty', 'nempty'].includes(c)
+}
+
+const doAdd = () => {
+  if (!choice.value) {
+    return null
+  }
+
+  props.fields.forEach((field) => {
+    if (field.key === choice.value) {
+      dataValue.value.push({
+        key: field.key,
+        type: field.type,
+        label: field.label,
+        value: null,
+        comparator: null,
+        options: field.options ?? [],
+      })
+    }
+  })
+
+  changed()
+}
+
+const doRemove = (key) => {
+  let items = []
+
+  dataValue.value.forEach((v, k) => {
+    if (k !== key) {
+      items.push(v)
+    }
+  })
+
+  dataValue.value = items
+  changed()
+}
+
+const changed = () => {
+  emit('update', dataValue.value)
+}
+
+onMounted(() => {
+  dataValue.value = props.data
+
+  for (let field of props.fields) {
+    choices.value.push({ value: field.key, text: field.label })
+  }
+})
+</script>
diff --git a/frontend/js/components/crud/CrudHeader.vue b/frontend/js/components/crud/CrudHeader.vue
new file mode 100644
index 0000000..a4a6b4f
--- /dev/null
+++ b/frontend/js/components/crud/CrudHeader.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="header d-block p-3 mb-3">
+    <div class="d-md-flex justify-content-between menu">
+      <h3>{{ title }}</h3>
+      <slot name="menu"></slot>
+    </div>
+    <div
+      v-if="$slots.bottom"
+      class="pt-3"
+    >
+      <slot name="bottom"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: [String, null],
+    required: true,
+  }
+})
+</script>
+
+<style>
+.menu .btn {
+  margin-bottom: 4px;
+}
+
+.menu .btn:not(:last-child) {
+  margin-right: 4px;
+}
+</style>
diff --git a/frontend/js/components/crud/CrudPager.vue b/frontend/js/components/crud/CrudPager.vue
new file mode 100644
index 0000000..241eed9
--- /dev/null
+++ b/frontend/js/components/crud/CrudPager.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="d-flex justify-content-end gap-2">
+    <BPagination
+      :model-value="page"
+      :per-page="limit"
+      :total-rows="limit * pages"
+      size="sm"
+      class="m-0"
+      @page-click="updatePage"
+    />
+    <BFormSelect
+      :model-value="limit"
+      :options="limits()"
+      :required="true"
+      style="width: 70px"
+      size="sm"
+      @change="updateLimit($event.target.value)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { BFormSelect, BPagination } from 'bootstrap-vue-next'
+
+defineProps({
+  page: {
+    type: Number,
+    required: true,
+  },
+  pages: {
+    type: Number,
+    required: true,
+  },
+  limit: {
+    type: Number,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:page', 'update:limit', 'update'])
+
+const updatePage = (event, value) => {
+  emit('update:page', parseInt(value))
+  emit('update')
+}
+
+const updateLimit = (value) => {
+  emit('update:page', 1)
+  emit('update:limit', parseInt(value))
+  emit('update')
+}
+
+const limits = () => {
+  let v = []
+
+  for (let i of [10, 20, 50, 100, 0]) {
+    let label = i !== 0 ? i : 'Tout'
+    v.push({ value: i, text: label })
+  }
+
+  return v
+}
+</script>
diff --git a/frontend/js/components/dashboard/CapitalChart.vue b/frontend/js/components/dashboard/CapitalChart.vue
new file mode 100644
index 0000000..70a5047
--- /dev/null
+++ b/frontend/js/components/dashboard/CapitalChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="stats text-center">
+    <div class="d-flex justify-content-between">
+      <h5 class="mb-2">Capital</h5>
+      <BFormSelect
+        id="precision"
+        v-model="precision"
+        :options="precisions()"
+      ></BFormSelect>
+    </div>
+    <div>
+      <Line
+        v-if="data.length > 0"
+        :data="compute(data, precision, dateFrom, dateTo)"
+        :options="options()"
+        :style="chartStyle(380)"
+      />
+      <div v-else>Aucune donnée</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { getStorage, saveStorage } from '../../lib/storage'
+import { compute } from '../../chart/capital'
+import { Line } from 'vue-chartjs'
+import { BFormSelect } from 'bootstrap-vue-next'
+import { chartStyle } from '../../lib/chartStyle'
+
+defineProps({
+  data: {
+    type: Array,
+    required: true,
+  },
+  dateFrom: {
+    type: [String, null],
+    required: true,
+  },
+  dateTo: {
+    type: [String, null],
+    required: true,
+  },
+})
+
+const precision = ref(getStorage('dashboard:capital:precision'))
+
+watch(precision, (v) => saveStorage('dashboard:capital:precision', v))
+
+const precisions = () => {
+  return [
+    { value: 'month', text: 'Mois' },
+    { value: '2weeks', text: '2 semaines' },
+    { value: 'day', text: 'Jour' },
+  ]
+}
+
+const options = () => {
+  return {
+    responsive: false,
+    maintainAspectRatio: true,
+  }
+}
+</script>
+
+<style scoped>
+#precision {
+  width: 150px;
+}
+</style>
diff --git a/frontend/js/components/dashboard/CategoriesChart.vue b/frontend/js/components/dashboard/CategoriesChart.vue
new file mode 100644
index 0000000..557a319
--- /dev/null
+++ b/frontend/js/components/dashboard/CategoriesChart.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="stats">
+    <div class="d-flex justify-content-between mb-2">
+      <h5 class="mb-2">Catégories - Statistiques des débits</h5>
+      <BFormSelect
+        id="order"
+        v-model="order"
+        :options="orders"
+      ></BFormSelect>
+    </div>
+    <BTableSimple
+      v-if="Object.keys(data).length > 0"
+      caption-top
+      responsive
+    >
+      <BThead>
+        <BTr>
+          <BTh class="text-start">Catégorie</BTh>
+          <BTh
+            width="170px"
+            class="text-end"
+            v-html="
+              renderLabelWithSum(
+                'Total',
+                computed(data, dateFrom, dateTo, order),
+                'sum',
+              )
+            "
+          ></BTh>
+          <BTh
+            width="250px"
+            class="text-end"
+            valign="top"
+            >Débit moyen / transaction</BTh
+          >
+          <BTh
+            width="210px"
+            class="text-end"
+            valign="top"
+            >Débit moyen / mois</BTh
+          >
+          <BTh
+            width="170px"
+            class="text-end"
+            valign="top"
+            >Transactions</BTh
+          >
+        </BTr>
+      </BThead>
+      <BTbody>
+        <BTr
+          v-for="item in computed(data, dateFrom, dateTo, order)"
+          :key="item.category.id"
+        >
+          <BTd
+            class="text-start"
+            v-html="renderCategory(item.category)"
+          ></BTd>
+          <BTd class="text-end">{{ renderEuro(item.sum) }}</BTd>
+          <BTd class="text-end">{{ renderEuro(item.average) }}</BTd>
+          <BTd class="text-end">{{ renderEuro(item.monthAverage) }}</BTd>
+          <BTd class="text-end">{{ item.count }}</BTd>
+        </BTr>
+      </BTbody>
+    </BTableSimple>
+    <div
+      v-else
+      class="text-center"
+    >
+      <p>Aucune donnée.</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { getStorage, saveStorage } from '../../lib/storage'
+import {
+  BFormSelect,
+  BTableSimple,
+  BThead,
+  BTbody,
+  BTr,
+  BTh,
+  BTd,
+} from 'bootstrap-vue-next'
+import { compute } from '../../chart/debitAverage'
+import {
+  renderLabelWithSum,
+  renderCategory,
+  renderEuro,
+} from '../../lib/renderers'
+
+const order = ref(getStorage('dashboard:debitAverage:order', 'sum'))
+const orders = [
+  { value: 'sum', text: 'Total' },
+  { value: 'average', text: 'Débit moyen / transaction' },
+  { value: 'monthAverage', text: 'Débit moyen / mois' },
+  { value: 'count', text: 'Transactions' },
+]
+
+let cache = null
+let cacheKey = null
+
+const computed = (data, dateFrom, dateTo, order) => {
+  const key = `${dateFrom}-${dateTo}-${order}`
+
+  if (cache !== null && cacheKey === key) {
+    return cache
+  }
+
+  cacheKey = key
+  cache = compute(data, dateFrom, dateTo, order)
+
+  return cache
+}
+
+watch(order, (v) => saveStorage('dashboard:debitAverage:order', v))
+
+defineProps({
+  data: {
+    type: Array,
+    required: true,
+  },
+  dateFrom: {
+    type: [String, null],
+    required: true,
+  },
+  dateTo: {
+    type: [String, null],
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+#order {
+  width: 150px;
+}
+</style>
diff --git a/frontend/js/components/dashboard/DashFilter.vue b/frontend/js/components/dashboard/DashFilter.vue
new file mode 100644
index 0000000..2cb7bf4
--- /dev/null
+++ b/frontend/js/components/dashboard/DashFilter.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="row mb-3">
+    <div class="col-12 col-md-2 mb-1">
+      <select
+        :value="account"
+        class="form-control"
+        @change="change('update:account', $event.target.value)"
+      >
+        <option value="">Tous</option>
+        <option
+          v-for="item in accounts"
+          :key="item.id"
+          :value="item.id"
+          v-text="item.label"
+        ></option>
+      </select>
+    </div>
+    <div class="col-12 col-md-2 mb-1">
+      <BFormInput
+        ref="date-from"
+        :model-value="dateFrom"
+        type="date"
+        @change="change('update:dateFrom', $event.target.value)"
+      />
+    </div>
+    <div class="col-12 col-md-2 mb-1">
+      <BFormInput
+        ref="date-to"
+        :model-value="dateTo"
+        type="date"
+        @change="change('update:dateTo', $event.target.value)"
+      />
+    </div>
+    <div class="col-12 col-md-2 mb-1">
+      <div class="btn-group">
+        <button
+          class="btn btn-secondary"
+          @click="doDateSet(1)"
+        >
+          1m
+        </button>
+        <button
+          class="btn btn-secondary"
+          @click="doDateSet(3)"
+        >
+          3m
+        </button>
+        <button
+          class="btn btn-secondary"
+          @click="doDateSet(6)"
+        >
+          6m
+        </button>
+        <button
+          class="btn btn-secondary"
+          @click="doDateSet(12)"
+        >
+          1a
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs } from 'vue'
+import { BFormInput } from 'bootstrap-vue-next'
+
+const emit = defineEmits([
+  'update:account',
+  'update:dateFrom',
+  'update:dateTo',
+  'update',
+])
+
+const props = defineProps({
+  account: {
+    type: [Object, null],
+    required: true,
+  },
+  accounts: {
+    type: Array,
+    required: true,
+  },
+  dateFrom: {
+    type: [String, null],
+    required: true,
+  },
+  dateTo: {
+    type: [String, null],
+    required: true,
+  },
+})
+
+const { dateFrom, dateTo } = toRefs(props)
+
+const change = (event, value) => {
+  emit(event, value)
+  emit('update')
+}
+
+const doDateSet = (month) => {
+  const d = new Date()
+
+  d.setUTCMonth(d.getUTCMonth() + 1 - month)
+  let m = d.getUTCMonth() + 1
+
+  if (m < 10) {
+    m = `0${m}`
+  }
+
+  change('update:dateFrom', `${d.getUTCFullYear()}-${m}-01`)
+  change('update:dateTo', null)
+}
+</script>
diff --git a/frontend/js/components/dashboard/DiffCreditDebitChart.vue b/frontend/js/components/dashboard/DiffCreditDebitChart.vue
new file mode 100644
index 0000000..ff1546c
--- /dev/null
+++ b/frontend/js/components/dashboard/DiffCreditDebitChart.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="stats text-center">
+    <h5 class="mb-2">Différences des crédits et des débits</h5>
+    <div>
+      <Bar
+        class="chart"
+        :data="compute(data, dateFrom, dateTo)"
+        :options="options()"
+        :style="chartStyle(380)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Bar } from 'vue-chartjs'
+import { compute } from '../../chart/diffCreditDebit'
+import { chartStyle } from '../../lib/chartStyle'
+
+defineProps({
+  data: {
+    type: Array,
+    required: true,
+  },
+  dateFrom: {
+    type: [String, null],
+    required: true,
+  },
+  dateTo: {
+    type: [String, null],
+    required: true,
+  },
+})
+
+const options = () => {
+  return {
+    responsive: false,
+    maintainAspectRatio: true,
+  }
+}
+</script>
diff --git a/frontend/js/components/dashboard/DistributionChart.vue b/frontend/js/components/dashboard/DistributionChart.vue
new file mode 100644
index 0000000..f6c185e
--- /dev/null
+++ b/frontend/js/components/dashboard/DistributionChart.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="stats">
+    <h5 class="mb-2 text-center">Répartion des dépenses</h5>
+
+    <div class="row mt-3 mb-5">
+      <div
+        v-for="(item, key) in categories"
+        :key="key"
+        class="col-auto checkbox"
+        :class="{ 'checkbox--unchecked': !selectedCategories[item.label] }"
+      >
+        <BFormCheckbox v-model="selectedCategories[item.label]">
+          <span
+            class="cursor"
+            v-html="renderCategory(item)"
+          ></span>
+        </BFormCheckbox>
+      </div>
+
+      <div class="col-auto">
+        <span
+          class="cursor fw-bold"
+          @click="selectAllCategories()"
+          >Toutes</span
+        >
+        -
+        <span
+          class="cursor fw-bold"
+          @click="unSelectAllCategories()"
+          >Aucune</span
+        >
+        -
+        <span
+          class="cursor fw-bold"
+          @click="inverseCategories()"
+          >Inverser</span
+        >
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12 col-lg-4">
+        <Doughnut
+          :data="computeDoughnut(data, dateFrom, dateTo, selectedCategories)"
+          :options="fixedOptions({ plugins: { legend: { display: false } } })"
+          :style="chartStyle(380)"
+        />
+      </div>
+      <div class="col-12 col-lg-8">
+        <div class="d-flex justify-content-between">
+          <BFormCheckbox v-model="isStacked"> En pourcentage </BFormCheckbox>
+        </div>
+        <div>
+          <Bar
+            :data="
+              computeBar(data, isStacked, dateFrom, dateTo, selectedCategories)
+            "
+            :options="stackOptions({ plugins: { legend: { display: false } } })"
+            :style="chartStyle(380)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, onMounted } from 'vue'
+import { getStorage, saveStorage } from '../../lib/storage'
+import { computeDoughnut, computeBar } from '../../chart/distribution'
+import { renderCategory } from '../../lib/renderers'
+import { Doughnut, Bar } from 'vue-chartjs'
+import { BFormCheckbox } from 'bootstrap-vue-next'
+import { chartStyle } from '../../lib/chartStyle'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true,
+  },
+  categories: {
+    type: Array,
+    required: true,
+  },
+  dateFrom: {
+    type: [String, null],
+    required: true,
+  },
+  dateTo: {
+    type: [String, null],
+    required: true,
+  },
+})
+
+const isStacked = ref(getStorage('dashboard:distribution:isStacked'))
+const selectedCategories = ref({})
+const { categories } = toRefs(props)
+
+watch(isStacked, (v) => saveStorage('dashboard:distribution:isStacked', v))
+
+const fixedOptions = (opts) => {
+  let value = opts || {}
+
+  return {
+    ...value,
+    responsive: false,
+    maintainAspectRatio: true,
+  }
+}
+
+const stackOptions = (opts) => {
+  let options = { ...fixedOptions(opts) }
+
+  options.scales = {
+    y: { stacked: true, ticks: { beginAtZero: true } },
+    x: { stacked: true },
+  }
+
+  return options
+}
+
+const inverseCategories = () => {
+  for (let i in selectedCategories.value) {
+    selectedCategories.value[i] = !selectedCategories.value[i]
+  }
+}
+
+const selectAllCategories = () => {
+  for (let i in selectedCategories.value) {
+    selectedCategories.value[i] = true
+  }
+}
+
+const unSelectAllCategories = () => {
+  for (let i in selectedCategories.value) {
+    selectedCategories.value[i] = false
+  }
+}
+
+onMounted(() => {
+  for (let item of categories.value) {
+    selectedCategories.value[item.label] = true
+  }
+})
+</script>
diff --git a/frontend/js/components/dashboard/MonthThresholdsTable.vue b/frontend/js/components/dashboard/MonthThresholdsTable.vue
new file mode 100644
index 0000000..74a0c1c
--- /dev/null
+++ b/frontend/js/components/dashboard/MonthThresholdsTable.vue
@@ -0,0 +1,72 @@
+<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 in item">
+            <BTd class="text-start">{{ date }}</BTd>
+            <BTd
+              class="text-start"
+              v-html="renderCategory(row.category)"
+            ></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>
diff --git a/frontend/js/components/dashboard/SavingAccountsChart.vue b/frontend/js/components/dashboard/SavingAccountsChart.vue
new file mode 100644
index 0000000..966e1da
--- /dev/null
+++ b/frontend/js/components/dashboard/SavingAccountsChart.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="stats text-center">
+    <h5 class="mb-2">Épargnes</h5>
+    <div>
+      <Bar
+        :data="compute(data)"
+        :options="options()"
+        :style="chartStyle(380)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { compute } from '../../chart/savingAccount'
+import { Bar } from 'vue-chartjs'
+import { chartStyle } from '../../lib/chartStyle'
+
+defineProps({
+  data: {
+    type: Array,
+    required: true,
+  }
+})
+
+const options = () => {
+  return {
+    responsive: false,
+    maintainAspectRatio: true,
+    indexAxis: 'y',
+    scales: {
+      y: { stacked: true, ticks: { beginAtZero: true } },
+      x: { stacked: true },
+    },
+  }
+}
+</script>