feat: implement last 24 hours date range preset and update filters in UsageView

frontend/src/views/admin/__tests__/UsageView.spec.ts

@@ -19,11 +19,19 @@ const { list, getStats, getSnapshotV2, getById } = vi.hoisted(() => {
 })
 
 const messages: Record<string, string> = {
+  'admin.dashboard.timeRange': 'Time Range',
   'admin.dashboard.day': 'Day',
   'admin.dashboard.hour': 'Hour',
   'admin.usage.failedToLoadUser': 'Failed to load user',
 }
 
+const formatLocalDate = (date: Date): string => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
 vi.mock('@/api/admin', () => ({
   adminAPI: {
     usage: {
@@ -68,6 +76,12 @@ vi.mock('vue-i18n', async () => {
   }
 })
 
+vi.mock('vue-router', () => ({
+  useRoute: () => ({
+    query: {}
+  })
+}))
+
 const AppLayoutStub = { template: '<div><slot /></div>' }
 const UsageFiltersStub = { template: '<div><slot name="after-reset" /></div>' }
 const ModelDistributionChartStub = {
@@ -138,6 +152,7 @@ describe('admin UsageView distribution metric toggles', () => {
           UserBalanceHistoryModal: true,
           Pagination: true,
           Select: true,
+          DateRangePicker: true,
           Icon: true,
           TokenUsageTrend: true,
           ModelDistributionChart: ModelDistributionChartStub,
@@ -150,6 +165,13 @@ describe('admin UsageView distribution metric toggles', () => {
     await flushPromises()
 
     expect(getSnapshotV2).toHaveBeenCalledTimes(1)
+    const now = new Date()
+    const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+    expect(getSnapshotV2).toHaveBeenCalledWith(expect.objectContaining({
+      start_date: formatLocalDate(yesterday),
+      end_date: formatLocalDate(now),
+      granularity: 'hour'
+    }))
 
     const modelChart = wrapper.find('[data-test="model-chart"]')
     const groupChart = wrapper.find('[data-test="group-chart"]')