fix(usage): render resource timestamps in their rollup tz, not browser-local

src/pages/usage/utils/time-buckets.ts

@@ -13,8 +13,24 @@ export type Granularity = 'hour' | 'day' | 'week' | 'month';
 // Cap the hourly axis so a wide date range doesn't render hundreds of bars.
 const HOUR_MAX_DAYS = 7;
 
+/**
+ * Parse a usage timestamp keeping the offset the backend embedded (the rollup
+ * tz, e.g. ``+08:00``) — i.e. render that wall clock verbatim, NOT converted to
+ * the browser's timezone. The typed equivalent of ``dayjs.parseZone``:
+ * ``.utcOffset(offset)`` re-displays the same instant at the embedded offset
+ * (``Z`` → UTC). A dayjs object (an axis cursor) or an offset-less date string
+ * passes through.
+ */
+export const parseRollup = (value: any): dayjs.Dayjs => {
+  if (dayjs.isDayjs(value)) return value;
+  const m = typeof value === 'string' && value.match(/([+-]\d{2}:?\d{2}|Z)$/i);
+  return m
+    ? dayjs(value).utcOffset(m[1].toUpperCase() === 'Z' ? 0 : m[1])
+    : dayjs(value);
+};
+
 export const bucketKey = (value: any, granularity: Granularity): string => {
-  const d = dayjs(value);
+  const d = parseRollup(value);
   if (granularity === 'hour') return d.format('YYYY-MM-DD HH:00');
   if (granularity === 'month') return d.format('YYYY-MM');
   return d.format('YYYY-MM-DD'); // day / week (week-start date as returned)