feat: add Chart.js doughnut charts and refine KPI card layout

- Replace CSS conic-gradient donuts with Chart.js Doughnut component

- New DonutChart.vue with hover tooltips, centered label, two-column legend

- KPI cards: icon-left layout, compact K/M formatting, horizontal trend row

- Value font scaled down to 18-22px for better visual hierarchy

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

src/components/charts/DonutChart.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="donut-chart">
+    <div class="donut-body">
+      <Doughnut :data="chartData" :options="chartOptions" />
+      <div class="donut-center">
+        <strong>{{ centerValue }}</strong>
+        <span>{{ centerLabel }}</span>
+      </div>
+    </div>
+    <div class="donut-legend">
+      <div v-for="item in items" :key="item.name" class="legend-row">
+        <i :style="{ background: item.color }"></i>
+        <span class="legend-name">{{ item.name }}</span>
+        <span class="legend-val">{{ item.display }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Doughnut } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend
+} from 'chart.js'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const props = defineProps({
+  items: { type: Array, required: true },
+  centerValue: { type: String, required: true },
+  centerLabel: { type: String, required: true }
+})
+
+const chartData = computed(() => ({
+  labels: props.items.map((i) => i.name),
+  datasets: [{
+    data: props.items.map((i) => i.value),
+    backgroundColor: props.items.map((i) => i.color),
+    borderWidth: 0,
+    cutout: '68%',
+    spacing: 3,
+    borderRadius: 4
+  }]
+}))
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: { display: false },
+    tooltip: {
+      backgroundColor: 'rgba(255,255,255,0.96)',
+      titleColor: '#1e293b',
+      bodyColor: '#64748b',
+      borderColor: '#e2e8f0',
+      borderWidth: 1,
+      padding: 10,
+      boxPadding: 4,
+      cornerRadius: 6,
+      usePointStyle: true,
+      callbacks: {
+        label: (ctx) => {
+          const total = ctx.dataset.data.reduce((a, b) => a + b, 0)
+          const pct = ((ctx.parsed / total) * 100).toFixed(1)
+          return ` ${ctx.label}: ${pct}%`
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.donut-chart {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 240px;
+}
+
+.donut-body {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  margin: 0 auto;
+  margin-top: 16px;
+}
+
+.donut-center {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  place-content: center;
+  pointer-events: none;
+  text-align: center;
+}
+
+.donut-center strong {
+  color: #1e293b;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.donut-center span {
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 11px;
+}
+
+.donut-legend {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px 16px;
+}
+
+.legend-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-row i {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  flex: 0 0 auto;
+}
+
+.legend-name {
+  color: #475569;
+  font-size: 12px;
+}
+
+.legend-val {
+  margin-left: auto;
+  color: #94a3b8;
+  font-size: 11px;
+}
+</style>