feat!: rewrite frontend in Vue 3 with Pinia, DaisyUI, vite-plugin-pwa

Migrates every component from class-based vue-property-decorator to
<script setup> + Composition API. Replaces Vuex 3 + vuex-class with a
single Pinia store (persisted via pinia-plugin-persistedstate). Swaps
Bulma + bulma-{checkradio,switch,pricingtable} for DaisyUI 5 utilities
on Tailwind 4. Replaces register-service-worker with vite-plugin-pwa
(workbox, skipWaiting/clientsClaim preserved).

Plugins replaced:
- vue-class-component / vue-property-decorator -> <script setup>
- vuex / vuex-class / vuex-persist -> pinia + persistedstate
- vue-i18n 8 -> vue-i18n 11 (composition mode, legacy: false)
- vue-click-outside -> @vueuse/core onClickOutside
- @xkeshi/vue-qrcode -> qrcode.vue
- vue-currency-input 1 -> vue-currency-input 3 (composable wrapper)
- bus-event (Vue instance) -> mitt
- Vue filters -> plain functions imported per component

BREAKING: drops Stripe / pricing entirely (Payment, PricingTable,
/pricing route, vue-stripe-checkout, bulma-pricingtable).

Clears unused Cypress and Jest test scaffolding; leaves a Vitest
harness behind for future tests.

src/components/ChartBalance.vue

@@ -1,29 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type IAccount from '@/models/IAccount'
+import type ICurrency from '@/models/ICurrency'
+import type IStat from '@/models/IStat'
+import { findContrastColor } from '@/utils'
+import { money } from '@/utils/format'
+
+const props = defineProps<{
+  account: IAccount
+  stats: IStat[]
+  currency: ICurrency
+}>()
+
+const statOrdered = computed(() =>
+  [...props.stats].sort((a, b) => (a.balance.amount < b.balance.amount ? 1 : -1))
+)
+
+const totalCost = computed(() =>
+  props.stats.reduce((a, b) => a + b.value, 0)
+)
+
+const colorStyle = computed(() => {
+  if (!props.account) return {}
+  return {
+    backgroundColor: props.account.color ?? undefined,
+    color: findContrastColor(props.account.color ?? null) ?? undefined
+  }
+})
+
+const getColor = (amount: number): string =>
+  amount === 0 ? 'text-primary' : amount > 0 ? 'text-success' : 'text-error'
+</script>
+
 <template>
-  <div class="chart-balance">
-    <table class="table is-hoverable is-striped" v-if="stats.length">
+  <div class="chart-balance overflow-x-auto">
+    <table v-if="stats.length" class="table table-zebra mx-auto">
       <tbody>
         <tr v-for="(stat, k) in statOrdered" :key="k">
           <th scope="row">{{ stat.label }}</th>
-          <td class="numeric">{{ stat.value | money(currency) }}</td>
+          <td class="numeric font-bold text-right">{{ money(stat.value, currency) }}</td>
           <td
             v-if="stat.balance.amount !== 0"
-            class="numeric"
+            class="numeric font-bold text-right"
             :class="getColor(stat.balance.amount)"
           >
-            {{ stat.balance.amount | money(currency) }}
+            {{ money(stat.balance.amount, currency) }}
+          </td>
+          <td v-else class="text-right" :class="getColor(stat.balance.amount)">
+            👌🏾
           </td>
-          <td
-            v-else
-            class="conclude"
-            :class="getColor(stat.balance.amount)"
-          ></td>
         </tr>
       </tbody>
       <tfoot>
         <tr :style="colorStyle">
-          <th :style="colorStyle" scope="row" class="total">total</th>
-          <th :style="colorStyle" class="numeric" colspan="2">
-            {{ totalCost | money(currency) }}
+          <th :style="colorStyle" scope="row" class="font-bold">total</th>
+          <th :style="colorStyle" class="numeric text-right" colspan="2">
+            {{ money(totalCost, currency) }}
           </th>
         </tr>
       </tfoot>
@@ -31,76 +63,3 @@
     <div v-else>Aucune dépense faite</div>
   </div>
 </template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-import ICurrency from '@/models/ICurrency'
-import IStat from '@/models/IStat'
-import IAccount from '../models/IAccount'
-import { findContrastColor } from '@/utils'
-
-@Component({
-  components: {
-    'axis-label': () => import('@/components/AxisLabel.vue')
-  }
-})
-export default class ChartBalance extends Vue {
-  @Prop({ type: Object, required: true })
-  public account!: IAccount
-  @Prop({ type: Array, default: () => [] })
-  public stats!: IStat[]
-  @Prop({ type: Object, required: true })
-  public currency!: ICurrency
-
-  public getColor(amount: number): string {
-    return amount === 0 ? 'zero' : amount > 0 ? 'positive' : 'negative'
-  }
-
-  public get colorStyle() {
-    if (!this.account) {
-      return {}
-    }
-    return {
-      backgroundColor: this.account.color,
-      color: findContrastColor(this.account.color)
-    }
-  }
-
-  public get statOrdered(): IStat[] {
-    return [...this.stats].sort((a: IStat, b: IStat) =>
-      a.balance.amount < b.balance.amount ? 1 : -1
-    )
-  }
-
-  public get totalCost(): number {
-    return this.stats.reduce((a: number, b: IStat) => a + b.value, 0)
-  }
-}
-</script>
-
-<style lang="scss">
-@import '../styles/variables';
-
-.chart-balance {
-  overflow-x: auto;
-}
-.table {
-  margin: auto;
-  .numeric {
-    font-weight: bold;
-    text-align: right;
-  }
-}
-.zero {
-  color: $primary;
-  &.conclude::after {
-    content: '👌🏾';
-  }
-}
-.positive {
-  color: $green;
-}
-.negative {
-  color: $red;
-}
-</style>