feat(panel): harcanabilir ve grup harcama grafikleri

- Günlük / Haftalık / Aylık sekmeli iki çizgi grafik (Recharts, ayrı parça olarak yüklenir)
- Kümülatif harcanabilir vs gerçekleşen; 4 grup (+ isteğe bağlı harcanabilir çizgisi)
- Dönem istatistiklerine grup kırılımı (spent_by_group)
- Grafik altında metin özeti, koyu tema uyumlu renkler

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/segmented.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils'
+
+/** Tek seçimlik düğme grubu (ör. Haftalık / Aylık). Her düğme ≥ 44 px yüksek. */
+export function Segmented<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  /** Ekran okuyucu için grup adı */
+  label: string
+  value: T
+  options: readonly { value: T; label: string }[]
+  onChange: (value: T) => void
+}) {
+  return (
+    <div role="group" aria-label={label} className="flex rounded-lg border p-0.5">
+      {options.map((o) => (
+        <button
+          key={o.value}
+          type="button"
+          aria-pressed={value === o.value}
+          onClick={() => onChange(o.value)}
+          className={cn(
+            'min-h-11 rounded-md px-3 text-sm font-medium sm:px-4',
+            value === o.value ? 'bg-primary text-primary-foreground' : 'hover:bg-muted',
+          )}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  )
+}