feat: add books/pages metric toggle on reading activity chart

Allow switching between number of books and number of pages on the
dashboard reading activity chart. Adds pages_read to the stats API
response and a MetricToggle component alongside the existing PeriodToggle.

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

apps/backoffice/app/components/MetricToggle.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+
+type Metric = "books" | "pages";
+
+export function MetricToggle({
+  labels,
+}: {
+  labels: { books: string; pages: string };
+}) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const raw = searchParams.get("metric");
+  const current: Metric = raw === "pages" ? "pages" : "books";
+
+  function setMetric(metric: Metric) {
+    const params = new URLSearchParams(searchParams.toString());
+    if (metric === "books") {
+      params.delete("metric");
+    } else {
+      params.set("metric", metric);
+    }
+    const qs = params.toString();
+    router.push(qs ? `?${qs}` : "/", { scroll: false });
+  }
+
+  const options: Metric[] = ["books", "pages"];
+
+  return (
+    <div className="flex gap-1 bg-muted rounded-lg p-0.5">
+      {options.map((m) => (
+        <button
+          key={m}
+          onClick={() => setMetric(m)}
+          className={`px-2.5 py-1 text-xs font-medium rounded-md transition-colors ${
+            current === m
+              ? "bg-card text-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {labels[m]}
+        </button>
+      ))}
+    </div>
+  );
+}