Refactor UsageChart and UsageStats components to support dynamic period selection

src/app/api/usage/stats/route.js

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import { getUsageStats } from "@/lib/usageDb";
+
+const VALID_PERIODS = new Set(["24h", "7d", "30d", "60d", "all"]);
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const period = searchParams.get("period") || "7d";
+
+    if (!VALID_PERIODS.has(period)) {
+      return NextResponse.json({ error: "Invalid period" }, { status: 400 });
+    }
+
+    const stats = await getUsageStats(period);
+    return NextResponse.json(stats);
+  } catch (error) {
+    console.error("[API] Failed to get usage stats:", error);
+    return NextResponse.json({ error: "Failed to fetch usage stats" }, { status: 500 });
+  }
+}