feat: global time range context with custom date picker

Lift time range state into a shared React context so the selected
range persists across page navigation and browser refreshes
(localStorage). Add a "Custom" option with a popover date picker
that lets users specify arbitrary start/end dates. All preset end
times now use endOf("day") (23:59:59) instead of the current moment.

app/page.tsx

@@ -7,12 +7,13 @@ import { StatsCard } from "@/components/StatsCard";
 import { TimeRangeSelector } from "@/components/TimeRangeSelector";
 import { TrendChart } from "@/components/charts/TrendChart";
 import { RankingBar } from "@/components/charts/RankingBar";
-import { type TimeRange, getTimeRange, buildQuery } from "@/lib/utils";
+import { buildQuery } from "@/lib/utils";
+import { useTimeRange } from "@/lib/time-range-context";
 import { useI18n } from "@/lib/i18n";
 
 export default function DashboardPage() {
   const { t } = useI18n();
-  const [range, setRange] = useState<TimeRange>("30d");
+  const { getEffectiveRange } = useTimeRange();
   const [granularity, setGranularity] = useState<"day" | "week" | "month">("day");
   const [trendMetric, setTrendMetric] = useState<"total_tokens" | "calls">("total_tokens");
   const [overview, setOverview] = useState<any>(null);
@@ -23,7 +24,7 @@ export default function DashboardPage() {
 
   const fetchData = useCallback(async () => {
     setLoading(true);
-    const { start, end } = getTimeRange(range);
+    const { start, end } = getEffectiveRange();
     const tp = { start, end };
     const [ov, tr, ur, mr] = await Promise.all([
       fetch(buildQuery("/api/overview", tp)).then(r => r.json()),
@@ -32,7 +33,7 @@ export default function DashboardPage() {
       fetch(buildQuery("/api/rankings", { ...tp, type: "model", limit: 10 })).then(r => r.json()),
     ]);
     setOverview(ov); setTrends(tr); setUserRank(ur); setModelRank(mr); setLoading(false);
-  }, [range, granularity]);
+  }, [granularity, getEffectiveRange]);
 
   useEffect(() => { fetchData(); }, [fetchData]);
 
@@ -48,7 +49,7 @@ export default function DashboardPage() {
         <motion.h1 initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="text-2xl font-bold gradient-text">
           {t("dash.title")}
         </motion.h1>
-        <TimeRangeSelector value={range} onChange={setRange} />
+        <TimeRangeSelector />
       </div>
 
       {overview && (