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/ChartPie.vue

@@ -1,85 +1,59 @@
-<template>
-  <svg class="chart-pie" ref="chart" id="chart-pie" viewBox="-1 -1 2 2"></svg>
-</template>
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import type ISlice from '@/models/ISlice'
 
-<script lang="ts">
-// https://codepen.io/soluhmin/pen/jexywg
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
-import ISlice from '@/models/ISlice'
+const props = defineProps<{ slices: ISlice[] }>()
+const chart = ref<SVGSVGElement | null>(null)
 
-@Component
-export default class ChartPie extends Vue {
-  @Prop({ type: Array, default: () => [] })
-  public slices!: ISlice[]
-  public svgEl: Element | null = null
+const getCoordinatesForPercent = (percent: number): [number, number] => [
+  Math.cos(2 * Math.PI * percent),
+  Math.sin(2 * Math.PI * percent)
+]
 
-  public mounted(): void {
-    this.svgEl = this.$refs.chart as Element
-    this.constructChart()
-  }
-
-  public getCoordinatesForPercent(percent: number): number[] {
-    const x = Math.cos(2 * Math.PI * percent)
-    const y = Math.sin(2 * Math.PI * percent)
-    return [x, y]
-  }
-
-  public clearSvg(): void {
-    if (!this.svgEl) {
-      return
-    }
-    const svgEl = this.svgEl
-    while (svgEl.lastChild) {
-      svgEl.removeChild(svgEl.lastChild)
-    }
-  }
-
-  public constructChart(): void {
-    if (!this.svgEl) {
-      return
-    }
-    const svgEl = this.svgEl
-    this.clearSvg()
-    let cumulativePercent = 0
-
-    this.slices.forEach((slice: ISlice) => {
-      const [startX, startY] = this.getCoordinatesForPercent(cumulativePercent)
-      cumulativePercent += slice.percent
-      const [endX, endY] = this.getCoordinatesForPercent(cumulativePercent)
-
-      /*
-       * if the slice is more than 50%,
-       * take the large arc (the long way around)
-       */
-      const largeArcFlag = slice.percent > 0.5 ? 1 : 0
-
-      const pathData = [
-        `M ${startX} ${startY}`, // Move
-        `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
-        `L 0 0` // Line
-      ].join(' ')
-
-      const pathEl = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'path'
-      )
-      pathEl.setAttribute('d', pathData)
-      pathEl.setAttribute('fill', slice.color)
-      svgEl.appendChild(pathEl)
-    })
-  }
-
-  @Watch('slices')
-  public onSliceChange(): void {
-    this.constructChart()
-  }
+const clearSvg = () => {
+  const svg = chart.value
+  if (!svg) return
+  while (svg.lastChild) svg.removeChild(svg.lastChild)
 }
+
+const constructChart = () => {
+  const svg = chart.value
+  if (!svg) return
+  clearSvg()
+  let cumulativePercent = 0
+  props.slices.forEach((slice) => {
+    const [startX, startY] = getCoordinatesForPercent(cumulativePercent)
+    cumulativePercent += slice.percent
+    const [endX, endY] = getCoordinatesForPercent(cumulativePercent)
+    const largeArcFlag = slice.percent > 0.5 ? 1 : 0
+    const pathData = [
+      `M ${startX} ${startY}`,
+      `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`,
+      `L 0 0`
+    ].join(' ')
+    const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    pathEl.setAttribute('d', pathData)
+    pathEl.setAttribute('fill', slice.color)
+    svg.appendChild(pathEl)
+  })
+}
+
+onMounted(constructChart)
+watch(() => props.slices, constructChart, { deep: true })
 </script>
 
+<template>
+  <svg
+    id="chart-pie"
+    ref="chart"
+    class="chart-pie"
+    viewBox="-1 -1 2 2"
+  />
+</template>
+
 <style scoped>
 .chart-pie {
   transform: rotate(-90deg);
-  /* height: 200px; */
   max-width: 400pt;
 }
 </style>