fix: address review feedback on timezone inconsistencies

- config.ts: fix catch branch returning 'UTC' while warning says
  'Asia/Shanghai'; both now consistently fall back to Asia/Shanghai

- getOverview() now returns the timezone it used for SQL bucketing,
  and the overview API includes it in the response payload

- page.tsx: buildHourlySeries accepts an optional timezone parameter
  and uses it to create the gap-fill label formatter, so gap labels
  match the server-side bucket labels instead of using the browser's
  local timezone

Author: etnperlong

app/api/overview/route.ts

@@ -10,6 +10,7 @@ type CachedOverview = {
     overview: Awaited<ReturnType<typeof getOverview>>["overview"] | null;
     empty: boolean;
     days: number;
+    timezone: string;
     meta?: Awaited<ReturnType<typeof getOverview>>["meta"];
     filters?: Awaited<ReturnType<typeof getOverview>>["filters"];
   };
@@ -79,7 +80,7 @@ export async function GET(request: Request) {
       }
     }
 
-    const { overview, empty, days: appliedDays, meta, filters } = await getOverview(days, {
+    const { overview, empty, days: appliedDays, meta, filters, timezone } = await getOverview(days, {
       model: model || undefined,
       route: route || undefined,
       page,
@@ -89,7 +90,7 @@ export async function GET(request: Request) {
       timezone: config.timezone
     });
 
-    const payload = { overview, empty, days: appliedDays, meta, filters };
+    const payload = { overview, empty, days: appliedDays, meta, filters, timezone };
     setCached(cacheKey, payload);
     return NextResponse.json(payload, { status: 200 });
   } catch (error) {

app/page.tsx

@@ -23,7 +23,7 @@ const PIE_COLORS = [
 ];
 
 type OverviewMeta = { page: number; pageSize: number; totalModels: number; totalPages: number };
-type OverviewAPIResponse = { overview: UsageOverview | null; empty: boolean; days: number; meta?: OverviewMeta; filters?: { models: string[]; routes: string[] } };
+type OverviewAPIResponse = { overview: UsageOverview | null; empty: boolean; days: number; timezone?: string; meta?: OverviewMeta; filters?: { models: string[]; routes: string[] } };
 
 type PriceForm = {
   model: string;
@@ -65,15 +65,21 @@ const numericTooltipFormatter: TooltipProps<number, string>["formatter"] = (valu
   return [formatNumberWithCommas(numericValue), name];
 };
 
-function formatHourKeyFromTs(ts: number) {
-  const parts = hourFormatter.formatToParts(new Date(ts));
+function formatHourKeyFromTs(ts: number, formatter: Intl.DateTimeFormat) {
+  const parts = formatter.formatToParts(new Date(ts));
   const month = parts.find((p) => p.type === "month")?.value ?? "00";
   const day = parts.find((p) => p.type === "day")?.value ?? "00";
   const hour = parts.find((p) => p.type === "hour")?.value ?? "00";
   return `${month}-${day} ${hour}`;
 }
 
-function buildHourlySeries(series: UsageSeriesPoint[], rangeHours?: number) {
+function buildHourlySeries(series: UsageSeriesPoint[], rangeHours?: number, timezone?: string) {
+  // Use the server's bucketing timezone for gap-fill labels so they match the
+  // labels returned for real data points. Falls back to the module-level formatter
+  // (browser timezone) when no timezone is provided.
+  const gapFormatter = timezone
+    ? new Intl.DateTimeFormat("en-CA", { timeZone: timezone, month: "2-digit", day: "2-digit", hour: "2-digit", hour12: false })
+    : hourFormatter;
   if (!series.length) return [] as UsageSeriesPoint[];
 
   const withTs = series
@@ -97,7 +103,7 @@ function buildHourlySeries(series: UsageSeriesPoint[], rangeHours?: number) {
       filled.push(rest);
     } else {
       filled.push({
-        label: formatHourKeyFromTs(ts),
+        label: formatHourKeyFromTs(ts, gapFormatter),
         timestamp: new Date(ts).toISOString(),
         requests: 0,
         tokens: 0,
@@ -166,6 +172,7 @@ export default function DashboardPage() {
     }
   }, []);
   const [overview, setOverview] = useState<UsageOverview | null>(null);
+  const [bucketTimezone, setBucketTimezone] = useState<string | undefined>(undefined);
   const [overviewError, setOverviewError] = useState<string | null>(null);
   const [overviewEmpty, setOverviewEmpty] = useState(false);
   const [loadingOverview, setLoadingOverview] = useState(true);
@@ -729,6 +736,7 @@ export default function DashboardPage() {
         const data: OverviewAPIResponse = await res.json();
         if (!active) return;
         setOverview(data.overview ?? null);
+        setBucketTimezone(data.timezone);
         setOverviewEmpty(Boolean(data.empty));
         setOverviewError(null);
         setPage(data.meta?.page ?? 1);
@@ -759,8 +767,8 @@ export default function DashboardPage() {
     if (!overviewData?.byHour) return [] as UsageSeriesPoint[];
     if (hourRange === "all") return overviewData.byHour;
     const hours = hourRange === "24h" ? 24 : 72;
-    return buildHourlySeries(overviewData.byHour, hours);
-  }, [hourRange, overviewData?.byHour]);
+    return buildHourlySeries(overviewData.byHour, hours, bucketTimezone);
+  }, [hourRange, overviewData?.byHour, bucketTimezone]);
 
   const hourlyLineStyle = useMemo(
     () => buildHourlyLineStyle(hourlySeries.length, 3),

lib/config.ts

@@ -18,7 +18,7 @@ function normalizeTimezone(raw: string | undefined): string {
     return value;
   } catch {
     console.warn(`TIMEZONE env var "${value}" is not a valid IANA timezone. Falling back to Asia/Shanghai.`);
-    return "UTC";
+    return "Asia/Shanghai";
   }
 }
 

lib/queries/overview.ts

@@ -85,7 +85,7 @@ function normalizePageSize(value?: number | null) {
 export async function getOverview(
   daysInput?: number,
   opts?: { model?: string | null; route?: string | null; page?: number | null; pageSize?: number | null; start?: string | Date | null; end?: string | Date | null; timezone?: string | null }
-): Promise<{ overview: UsageOverview; empty: boolean; days: number; meta: OverviewMeta; filters: { models: string[]; routes: string[] } }> {
+): Promise<{ overview: UsageOverview; empty: boolean; days: number; meta: OverviewMeta; filters: { models: string[]; routes: string[] }; timezone: string }> {
   const startDate = parseDateInput(opts?.start);
   const endDate = parseDateInput(opts?.end);
   const hasCustomRange = startDate && endDate && endDate >= startDate;
@@ -338,6 +338,7 @@ export async function getOverview(
     empty: totalRequests === 0,
     days,
     meta: { page, pageSize, totalModels, totalPages },
-    filters
+    filters,
+    timezone: tz
   };
 }