From 600f9ce2548439fdf87cd8877db1386797fb32c9 Mon Sep 17 00:00:00 2001
From: Yuhao Jiang <danisjiang@gmail.com>
Date: Sat, 3 Jan 2026 21:04:34 -0600
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8D=E8=B7=A8?=
 =?UTF-8?q?=E6=97=B6=E5=8C=BA=E6=97=A5=E6=9C=9F=E8=8C=83=E5=9B=B4=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

当管理员在比服务器时区更早的时区（如芝加哥 UTC-6）访问使用记录页面时，
由于服务器时区（如中国 UTC+8）已经是"明天"，导致最新的记录无法显示。

修复方案：
- DateRangePicker: 将日期选择器的 max 限制从"今天"改为"明天"
- UsageView: 默认和重置时的 endDate 使用"明天"而非"今天"

这样可以确保跨时区场景下用户能看到所有最新记录。

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/components/common/DateRangePicker.vue | 12 ++++++++++--
 frontend/src/views/admin/UsageView.vue             | 12 +++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/common/DateRangePicker.vue b/frontend/src/components/common/DateRangePicker.vue
index be641f9b..4fce029f 100644
--- a/frontend/src/components/common/DateRangePicker.vue
+++ b/frontend/src/components/common/DateRangePicker.vue
@@ -59,7 +59,7 @@
             <input
               type="date"
               v-model="localStartDate"
-              :max="localEndDate || today"
+              :max="localEndDate || tomorrow"
               class="date-picker-input"
               @change="onDateChange"
             />
@@ -85,7 +85,7 @@
               type="date"
               v-model="localEndDate"
               :min="localStartDate"
-              :max="today"
+              :max="tomorrow"
               class="date-picker-input"
               @change="onDateChange"
             />
@@ -144,6 +144,14 @@ const today = computed(() => {
   return `${year}-${month}-${day}`
 })
 
+// Tomorrow's date - used for max date to handle timezone differences
+// When user is in a timezone behind the server, "today" on server might be "tomorrow" locally
+const tomorrow = computed(() => {
+  const d = new Date()
+  d.setDate(d.getDate() + 1)
+  return formatDateToString(d)
+})
+
 // Helper function to format date to YYYY-MM-DD using local timezone
 const formatDateToString = (date: Date): string => {
   const year = date.getFullYear()
diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue
index 85a748f4..ac5d1e05 100644
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -888,13 +888,17 @@ const formatLocalDate = (date: Date): string => {
 }
 
 // Initialize date range immediately
+// Use tomorrow as end date to handle timezone differences between client and server
+// e.g., when server is in Asia/Shanghai and client is in America/Chicago
 const now = new Date()
+const tomorrow = new Date(now)
+tomorrow.setDate(tomorrow.getDate() + 1)
 const weekAgo = new Date(now)
 weekAgo.setDate(weekAgo.getDate() - 6)
 
 // Date range state
 const startDate = ref(formatLocalDate(weekAgo))
-const endDate = ref(formatLocalDate(now))
+const endDate = ref(formatLocalDate(tomorrow))
 
 const filters = ref<AdminUsageQueryParams>({
   user_id: undefined,
@@ -1215,12 +1219,14 @@ const resetFilters = () => {
     end_date: undefined
   }
   granularity.value = 'day'
-  // Reset date range to default (last 7 days)
+  // Reset date range to default (last 7 days, with tomorrow as end to handle timezone differences)
   const now = new Date()
+  const tomorrowDate = new Date(now)
+  tomorrowDate.setDate(tomorrowDate.getDate() + 1)
   const weekAgo = new Date(now)
   weekAgo.setDate(weekAgo.getDate() - 6)
   startDate.value = formatLocalDate(weekAgo)
-  endDate.value = formatLocalDate(now)
+  endDate.value = formatLocalDate(tomorrowDate)
   filters.value.start_date = startDate.value
   filters.value.end_date = endDate.value
   pagination.value.page = 1