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.
2026-04-07 14:49:58 +08:00
parent 004fd37622
commit 9bb36432ba
10 changed files with 280 additions and 55 deletions
--- a/app/aggregation/page.tsx
+++ b/app/aggregation/page.tsx
@@ -4,7 +4,8 @@ import { useEffect, useState, useCallback } from "react";
 import { motion } from "motion/react";
 import { Users, Calendar, Hash, Zap, ArrowUpDown, ArrowDown, ArrowUp } from "lucide-react";
 import { TimeRangeSelector } from "@/components/TimeRangeSelector";
-import { type TimeRange, getTimeRange, buildQuery, formatNumber, formatTokens } from "@/lib/utils";
+import { buildQuery, formatNumber, formatTokens } from "@/lib/utils";
+import { useTimeRange } from "@/lib/time-range-context";
 import { useI18n } from "@/lib/i18n";

 interface AggItem {
@@ -16,7 +17,7 @@ type SortKey = "total_tokens" | "calls" | "prompt_tokens" | "completion_tokens";

 export default function AggregationPage() {
  const { t } = useI18n();
-  const [range, setRange] = useState<TimeRange>("30d");
+  const { getEffectiveRange } = useTimeRange();
  const [data, setData] = useState<AggItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [sortKey, setSortKey] = useState<SortKey>("total_tokens");
@@ -24,11 +25,11 @@ export default function AggregationPage() {

  const fetchData = useCallback(async () => {
    setLoading(true);
-    const { start, end } = getTimeRange(range);
+    const { start, end } = getEffectiveRange();
    const res = await fetch(buildQuery("/api/aggregation", { start, end }));
    setData(await res.json());
    setLoading(false);
-  }, [range]);
+  }, [getEffectiveRange]);

  useEffect(() => { fetchData(); }, [fetchData]);

@@ -68,7 +69,7 @@ export default function AggregationPage() {
          <Users className="h-5 w-5" style={{ color: "var(--accent)", opacity: 0.6 }} />
          <h1 className="text-2xl font-bold gradient-text">{t("agg.title")}</h1>
        </motion.div>
-        <TimeRangeSelector value={range} onChange={setRange} />
+        <TimeRangeSelector />
      </div>

      {!loading && data.length > 0 && (
--- a/app/detail/[...slug]/page.tsx
+++ b/app/detail/[...slug]/page.tsx
@@ -8,7 +8,8 @@ import Link from "next/link";
 import { StatsCard } from "@/components/StatsCard";
 import { TimeRangeSelector } from "@/components/TimeRangeSelector";
 import { TrendChart } from "@/components/charts/TrendChart";
-import { type TimeRange, getTimeRange, buildQuery, formatNumber, formatTokens } from "@/lib/utils";
+import { buildQuery, formatNumber, formatTokens } from "@/lib/utils";
+import { useTimeRange } from "@/lib/time-range-context";
 import { useI18n } from "@/lib/i18n";

 interface DetailData {
@@ -27,14 +28,14 @@ export default function DetailPage() {
  const id = segments[1] || "";
  const decodedId = decodeURIComponent(id);

-  const [range, setRange] = useState<TimeRange>("30d");
+  const { getEffectiveRange } = useTimeRange();
  const [data, setData] = useState<DetailData | null>(null);
  const [trends, setTrends] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  const fetchData = useCallback(async () => {
    setLoading(true);
-    const { start, end } = getTimeRange(range);
+    const { start, end } = getEffectiveRange();
    const tp = { start, end };
    const [detail, tr] = await Promise.all([
      fetch(buildQuery(`/api/detail/${type}/${encodeURIComponent(decodedId)}`, tp)).then(r => r.json()),
@@ -45,7 +46,7 @@ export default function DetailPage() {
      })).then(r => r.json()),
    ]);
    setData(detail); setTrends(tr); setLoading(false);
-  }, [range, type, decodedId]);
+  }, [type, decodedId, getEffectiveRange]);

  useEffect(() => { fetchData(); }, [fetchData]);

@@ -66,7 +67,7 @@ export default function DetailPage() {
            <h1 className="text-2xl font-bold" style={{ color: "var(--text-primary)" }}>{title}</h1>
          </div>
        </motion.div>
-        <TimeRangeSelector value={range} onChange={setRange} />
+        <TimeRangeSelector />
      </div>

      {loading ? (
--- a/app/logs/page.tsx
+++ b/app/logs/page.tsx
@@ -4,7 +4,8 @@ import { useEffect, useState, useCallback } from "react";
 import { motion } from "motion/react";
 import { ScrollText, Search, ChevronLeft, ChevronRight, Zap } from "lucide-react";
 import { TimeRangeSelector } from "@/components/TimeRangeSelector";
-import { type TimeRange, getTimeRange, buildQuery, formatNumber, formatTokens, formatDate } from "@/lib/utils";
+import { buildQuery, formatNumber, formatTokens, formatDate } from "@/lib/utils";
+import { useTimeRange } from "@/lib/time-range-context";
 import { useI18n } from "@/lib/i18n";

 interface LogEntry {
@@ -16,7 +17,7 @@ interface LogEntry {

 export default function LogsPage() {
  const { t } = useI18n();
-  const [range, setRange] = useState<TimeRange>("7d");
+  const { getEffectiveRange } = useTimeRange();
  const [page, setPage] = useState(1);
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [total, setTotal] = useState(0);
@@ -26,14 +27,14 @@ export default function LogsPage() {

  const fetchData = useCallback(async () => {
    setLoading(true);
-    const { start, end } = getTimeRange(range);
+    const { start, end } = getEffectiveRange();
    const res = await fetch(buildQuery("/api/logs", { start, end, page, page_size: pageSize, ...filters }));
    const data = await res.json();
    setLogs(data.logs); setTotal(data.total); setLoading(false);
-  }, [range, page, filters]);
+  }, [page, filters, getEffectiveRange]);

  useEffect(() => { fetchData(); }, [fetchData]);
-  useEffect(() => { setPage(1); }, [range, filters]);
+  useEffect(() => { setPage(1); }, [getEffectiveRange, filters]);
  const totalPages = Math.ceil(total / pageSize);

  const headers = [t("th.time"), t("th.user"), t("th.realModel"), t("th.channel"), t("th.input"), t("th.output"), t("th.totalToken"), t("th.latency"), ""];
@@ -45,7 +46,7 @@ export default function LogsPage() {
          <ScrollText className="h-5 w-5" style={{ color: "var(--accent)", opacity: 0.6 }} />
          <h1 className="text-2xl font-bold gradient-text">{t("logs.title")}</h1>
        </motion.div>
-        <TimeRangeSelector value={range} onChange={setRange} />
+        <TimeRangeSelector />
      </div>

      <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} className="flex items-center gap-3">
--- a/app/page.tsx
+++ b/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 && (
--- a/app/rankings/page.tsx
+++ b/app/rankings/page.tsx
@@ -5,7 +5,8 @@ import Link from "next/link";
 import { motion } from "motion/react";
 import { Trophy, Users, Cpu, Radio, ArrowUpDown, ArrowDown, ArrowUp } from "lucide-react";
 import { TimeRangeSelector } from "@/components/TimeRangeSelector";
-import { type TimeRange, getTimeRange, buildQuery, formatNumber, formatTokens } from "@/lib/utils";
+import { buildQuery, formatNumber, formatTokens } from "@/lib/utils";
+import { useTimeRange } from "@/lib/time-range-context";
 import { useI18n } from "@/lib/i18n";

 type Tab = "user" | "model" | "channel";
@@ -18,7 +19,7 @@ interface RankItem {

 export default function RankingsPage() {
  const { t } = useI18n();
-  const [range, setRange] = useState<TimeRange>("30d");
+  const { getEffectiveRange } = useTimeRange();
  const [tab, setTab] = useState<Tab>("user");
  const [data, setData] = useState<RankItem[]>([]);
  const [loading, setLoading] = useState(true);
@@ -33,11 +34,11 @@ export default function RankingsPage() {

  const fetchData = useCallback(async () => {
    setLoading(true);
-    const { start, end } = getTimeRange(range);
+    const { start, end } = getEffectiveRange();
    const res = await fetch(buildQuery("/api/rankings", { start, end, type: tab, limit: 100 }));
    setData(await res.json());
    setLoading(false);
-  }, [range, tab]);
+  }, [tab, getEffectiveRange]);

  useEffect(() => { fetchData(); }, [fetchData]);

@@ -80,7 +81,7 @@ export default function RankingsPage() {
          <Trophy className="h-5 w-5" style={{ color: "var(--accent)", opacity: 0.6 }} />
          <h1 className="text-2xl font-bold gradient-text">{t("rank.title")}</h1>
        </motion.div>
-        <TimeRangeSelector value={range} onChange={setRange} />
+        <TimeRangeSelector />
      </div>

      <div className="flex gap-1 rounded-lg p-1 w-fit" style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}>
--- a/components/ClientProviders.tsx
+++ b/components/ClientProviders.tsx
@@ -4,6 +4,7 @@ import { type ReactNode } from "react";
 import { usePathname } from "next/navigation";
 import { I18nProvider } from "@/lib/i18n";
 import { ThemeProvider } from "@/lib/theme";
+import { TimeRangeProvider } from "@/lib/time-range-context";
 import { Sidebar } from "@/components/Sidebar";

 export function ClientProviders({ children }: { children: ReactNode }) {
@@ -13,14 +14,16 @@ export function ClientProviders({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider>
      <I18nProvider>
-        {isPortal ? (
-          <>{children}</>
-        ) : (
-          <>
-            <Sidebar />
-            <main className="ml-[220px] min-h-screen p-6 lg:p-8">{children}</main>
-          </>
-        )}
+        <TimeRangeProvider>
+          {isPortal ? (
+            <>{children}</>
+          ) : (
+            <>
+              <Sidebar />
+              <main className="ml-[220px] min-h-screen p-6 lg:p-8">{children}</main>
+            </>
+          )}
+        </TimeRangeProvider>
      </I18nProvider>
    </ThemeProvider>
  );
--- a/components/TimeRangeSelector.tsx
+++ b/components/TimeRangeSelector.tsx
@@ -1,41 +1,156 @@
 "use client";

+import { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Calendar } from "lucide-react";
 import { type TimeRange } from "@/lib/utils";
+import { useTimeRange } from "@/lib/time-range-context";
 import { useI18n } from "@/lib/i18n";
-import { motion } from "motion/react";

-export function TimeRangeSelector({
-  value,
-  onChange,
-}: {
-  value: TimeRange;
-  onChange: (v: TimeRange) => void;
-}) {
+export function TimeRangeSelector() {
  const { t } = useI18n();
-  const ranges: { label: string; value: TimeRange }[] = [
+  const { range, setRange, customStart, customEnd, setCustomStart, setCustomEnd } = useTimeRange();
+  const [showPopover, setShowPopover] = useState(false);
+  const [localStart, setLocalStart] = useState(customStart);
+  const [localEnd, setLocalEnd] = useState(customEnd);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Sync local state when context changes
+  useEffect(() => { setLocalStart(customStart); }, [customStart]);
+  useEffect(() => { setLocalEnd(customEnd); }, [customEnd]);
+
+  // Close popover on click outside
+  useEffect(() => {
+    if (!showPopover) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setShowPopover(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [showPopover]);
+
+  const presets: { label: string; value: TimeRange }[] = [
    { label: t("time.today"), value: "today" },
    { label: t("time.7d"), value: "7d" },
    { label: t("time.30d"), value: "30d" },
    { label: t("time.all"), value: "all" },
  ];

+  function handlePreset(v: TimeRange) {
+    setRange(v);
+    setShowPopover(false);
+  }
+
+  function handleCustomClick() {
+    if (range === "custom" && showPopover) {
+      setShowPopover(false);
+    } else {
+      setRange("custom");
+      setShowPopover(true);
+    }
+  }
+
+  function handleConfirm() {
+    setCustomStart(localStart);
+    setCustomEnd(localEnd);
+    setShowPopover(false);
+  }
+
  return (
-    <div className="flex gap-1 rounded-lg p-1" style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}>
-      {ranges.map((r) => (
-        <button key={r.value} onClick={() => onChange(r.value)}
-          className="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors"
-          style={{ color: value === r.value ? "var(--text-accent)" : "var(--text-muted)" }}
+    <div ref={containerRef} className="relative">
+      <div
+        className="flex gap-1 rounded-lg p-1"
+        style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}
+      >
+        {presets.map((r) => (
+          <button
+            key={r.value}
+            onClick={() => handlePreset(r.value)}
+            className="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors"
+            style={{ color: range === r.value ? "var(--text-accent)" : "var(--text-muted)" }}
+          >
+            {range === r.value && (
+              <motion.div
+                layoutId="time-range-bg"
+                className="absolute inset-0 rounded-md"
+                style={{ background: "var(--btn-active-bg)", border: "1px solid var(--surface-border)" }}
+                transition={{ type: "spring", stiffness: 400, damping: 30 }}
+              />
+            )}
+            <span className="relative z-10">{r.label}</span>
+          </button>
+        ))}
+
+        {/* Custom button */}
+        <button
+          onClick={handleCustomClick}
+          className="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors flex items-center gap-1"
+          style={{ color: range === "custom" ? "var(--text-accent)" : "var(--text-muted)" }}
        >
-          {value === r.value && (
-            <motion.div layoutId="time-range-bg"
+          {range === "custom" && (
+            <motion.div
+              layoutId="time-range-bg"
              className="absolute inset-0 rounded-md"
              style={{ background: "var(--btn-active-bg)", border: "1px solid var(--surface-border)" }}
              transition={{ type: "spring", stiffness: 400, damping: 30 }}
            />
          )}
-          <span className="relative z-10">{r.label}</span>
+          <Calendar className="relative z-10 h-3 w-3" />
+          <span className="relative z-10">{t("time.custom")}</span>
        </button>
-      ))}
+      </div>
+
+      {/* Popover */}
+      <AnimatePresence>
+        {showPopover && (
+          <motion.div
+            ref={popoverRef}
+            initial={{ opacity: 0, y: -4, scale: 0.97 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -4, scale: 0.97 }}
+            transition={{ duration: 0.15 }}
+            className="absolute right-0 top-full mt-2 z-50 rounded-lg p-4 space-y-3 min-w-[260px]"
+            style={{
+              background: "var(--surface-bg)",
+              border: "1px solid var(--surface-border)",
+              boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+              backdropFilter: "blur(12px)",
+            }}
+          >
+            <div className="space-y-2">
+              <label className="flex items-center gap-2 text-xs" style={{ color: "var(--text-muted)" }}>
+                {t("time.startDate")}
+              </label>
+              <input
+                type="date"
+                value={localStart}
+                onChange={(e) => setLocalStart(e.target.value)}
+                className="input-glass w-full rounded-md px-3 py-1.5 text-xs font-[family-name:var(--font-geist-mono)]"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="flex items-center gap-2 text-xs" style={{ color: "var(--text-muted)" }}>
+                {t("time.endDate")}
+              </label>
+              <input
+                type="date"
+                value={localEnd}
+                onChange={(e) => setLocalEnd(e.target.value)}
+                className="input-glass w-full rounded-md px-3 py-1.5 text-xs font-[family-name:var(--font-geist-mono)]"
+              />
+            </div>
+            <button
+              onClick={handleConfirm}
+              className="btn-accent w-full rounded-md py-1.5 text-xs font-medium"
+            >
+              {t("time.confirm")}
+            </button>
+          </motion.div>
+        )}
+      </AnimatePresence>
    </div>
  );
 }
--- a/lib/i18n.tsx
+++ b/lib/i18n.tsx
@@ -26,6 +26,10 @@ const translations = {
    "time.7d": "7 天",
    "time.30d": "30 天",
    "time.all": "全部",
+    "time.custom": "自定义",
+    "time.startDate": "开始日期",
+    "time.endDate": "结束日期",
+    "time.confirm": "确认",
    // granularity
    "gran.day": "日",
    "gran.week": "周",
@@ -108,6 +112,10 @@ const translations = {
    "time.7d": "7 Days",
    "time.30d": "30 Days",
    "time.all": "All",
+    "time.custom": "Custom",
+    "time.startDate": "Start",
+    "time.endDate": "End",
+    "time.confirm": "Confirm",
    "gran.day": "Day",
    "gran.week": "Week",
    "gran.month": "Month",
--- a/lib/time-range-context.tsx
+++ b/lib/time-range-context.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
+import dayjs from "dayjs";
+import { type TimeRange, getTimeRange } from "@/lib/utils";
+
+interface TimeRangeContextType {
+  range: TimeRange;
+  setRange: (r: TimeRange) => void;
+  customStart: string;
+  customEnd: string;
+  setCustomStart: (s: string) => void;
+  setCustomEnd: (s: string) => void;
+  /** Returns { start?, end? } unix timestamps (seconds) ready for API calls */
+  getEffectiveRange: () => { start?: number; end?: number };
+}
+
+const TimeRangeContext = createContext<TimeRangeContextType>({
+  range: "30d",
+  setRange: () => {},
+  customStart: "",
+  customEnd: "",
+  setCustomStart: () => {},
+  setCustomEnd: () => {},
+  getEffectiveRange: () => ({}),
+});
+
+function loadSaved(): { range: TimeRange; customStart: string; customEnd: string } | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem("time-range");
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return {
+      range: parsed.range || "30d",
+      customStart: parsed.customStart || "",
+      customEnd: parsed.customEnd || "",
+    };
+  } catch {
+    return null;
+  }
+}
+
+function persist(range: TimeRange, customStart: string, customEnd: string) {
+  localStorage.setItem("time-range", JSON.stringify({ range, customStart, customEnd }));
+}
+
+export function TimeRangeProvider({ children }: { children: ReactNode }) {
+  const [range, setRangeState] = useState<TimeRange>(() => loadSaved()?.range ?? "30d");
+  const [customStart, setCustomStartState] = useState(() => loadSaved()?.customStart || dayjs().subtract(7, "day").format("YYYY-MM-DD"));
+  const [customEnd, setCustomEndState] = useState(() => loadSaved()?.customEnd || dayjs().format("YYYY-MM-DD"));
+
+  const setRange = useCallback((r: TimeRange) => {
+    setRangeState(r);
+    setCustomStartState(prev => { persist(r, prev, customEnd); return prev; });
+  }, [customEnd]);
+
+  const setCustomStart = useCallback((s: string) => {
+    setCustomStartState(s);
+    persist(range, s, customEnd);
+  }, [range, customEnd]);
+
+  const setCustomEnd = useCallback((e: string) => {
+    setCustomEndState(e);
+    persist(range, customStart, e);
+  }, [range, customStart]);
+
+  const getEffectiveRange = useCallback(() => {
+    if (range === "custom") {
+      const result: { start?: number; end?: number } = {};
+      if (customStart) result.start = dayjs(customStart).startOf("day").unix();
+      if (customEnd) result.end = dayjs(customEnd).endOf("day").unix();
+      return result;
+    }
+    return getTimeRange(range);
+  }, [range, customStart, customEnd]);
+
+  return (
+    <TimeRangeContext.Provider value={{
+      range, setRange,
+      customStart, customEnd,
+      setCustomStart,
+      setCustomEnd,
+      getEffectiveRange,
+    }}>
+      {children}
+    </TimeRangeContext.Provider>
+  );
+}
+
+export function useTimeRange() {
+  return useContext(TimeRangeContext);
+}
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -27,13 +27,14 @@ export type TimeRange = "today" | "7d" | "30d" | "all" | "custom";

 export function getTimeRange(range: TimeRange): { start?: number; end?: number } {
  const now = dayjs();
+  const end = now.endOf("day").unix();
  switch (range) {
    case "today":
-      return { start: now.startOf("day").unix(), end: now.unix() };
+      return { start: now.startOf("day").unix(), end };
    case "7d":
-      return { start: now.subtract(7, "day").startOf("day").unix(), end: now.unix() };
+      return { start: now.subtract(7, "day").startOf("day").unix(), end };
    case "30d":
-      return { start: now.subtract(30, "day").startOf("day").unix(), end: now.unix() };
+      return { start: now.subtract(30, "day").startOf("day").unix(), end };
    case "all":
      return {};
    default: