feat(gui-v2): StatCard (PrimeVue Card KPI tile, replaces AppKpiCard) + story

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/app/src/components-v2/shared/__tests__/StatCard.spec.ts

@@ -0,0 +1,29 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { defineComponent } from 'vue'
+import StatCard from '@/components-v2/shared/StatCard.vue'
+
+const CardStub = defineComponent({ name: 'CardStub', template: '<div class="card-stub"><slot name="content" /></div>' })
+const IconStub = defineComponent({ name: 'Icon', props: ['name', 'size'], template: '<i class="icon-stub" :data-icon="name" />' })
+
+const mountCard = (props: { icon: string; label: string; value: string | number; trend?: string; trendDir?: 'up' | 'down' }) =>
+  mount(StatCard, { props, global: { stubs: { Card: CardStub, Icon: IconStub } } })
+
+describe('StatCard', () => {
+  it('renders label, value and the leading icon', () => {
+    const w = mountCard({ icon: 'tabler-users', label: 'Vrijwilligers', value: 128 })
+
+    expect(w.text()).toContain('Vrijwilligers')
+    expect(w.text()).toContain('128')
+    expect(w.get('.icon-stub').attributes('data-icon')).toBe('tabler-users')
+  })
+
+  it('shows the trend row with direction class only when trend is set', () => {
+    expect(mountCard({ icon: 'tabler-users', label: 'X', value: 1 }).find('[data-trend]').exists()).toBe(false)
+
+    const up = mountCard({ icon: 'tabler-users', label: 'X', value: 1, trend: '+12%', trendDir: 'up' })
+
+    expect(up.get('[data-trend]').attributes('data-trend')).toBe('up')
+    expect(up.text()).toContain('+12%')
+  })
+})