initial 2

apps/web/src/app/yearly/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { AppShell } from "@/components/layout/app-shell";
+
+export default function YearlyPage() {
+  const year = new Date().getFullYear();
+
+  const { data: overview } = useQuery({
+    queryKey: ["stats", "overview"],
+    queryFn: async () => {
+      const res = await fetch("/api/stats/overview");
+      return res.json();
+    },
+  });
+
+  const { data: achievements } = useQuery({
+    queryKey: ["achievements"],
+    queryFn: async () => {
+      const res = await fetch("/api/achievements");
+      return res.json();
+    },
+  });
+
+  return (
+    <AppShell>
+      <div className="p-4 pb-20 md:pb-4 parchment-bg min-h-full">
+        <div className="max-w-2xl mx-auto text-center py-12">
+          <p className="text-sm text-[var(--warm-grey)] mb-2">{year}</p>
+          <h1 className="serif text-4xl font-bold mb-6">Your Year in Adventure</h1>
+
+          <div className="retro-window p-8 text-left space-y-6">
+            <ScrollSection title="Total XP" value={overview?.totalXp?.toLocaleString() ?? "—"} />
+            <ScrollSection title="Books Completed" value={overview?.booksCompleted ?? "—"} />
+            <ScrollSection title="Pages Read" value={overview?.totalPagesRead?.toLocaleString() ?? "—"} />
+            <ScrollSection
+              title="Achievements Unlocked"
+              value={achievements?.unlocked?.length ?? 0}
+            />
+            <p className="serif text-center pt-6 border-t italic">
+              Another year on the long road. The adventure continues.
+            </p>
+          </div>
+        </div>
+      </div>
+    </AppShell>
+  );
+}
+
+function ScrollSection({ title, value }: { title: string; value: string | number }) {
+  return (
+    <div className="flex justify-between items-baseline border-b border-[var(--parchment-dark)] pb-3">
+      <span className="font-bold">{title}</span>
+      <span className="text-2xl text-[var(--gold-trim)]">{value}</span>
+    </div>
+  );
+}