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

frontend/src/components/common/DateRangePicker.vue

@@ -106,7 +106,7 @@ const isOpen = ref(false)
 const containerRef = ref<HTMLElement | null>(null)
 const localStartDate = ref(props.startDate)
 const localEndDate = ref(props.endDate)
-const activePreset = ref<string | null>('7days')
+const activePreset = ref<string | null>('last24Hours')
 
 const today = computed(() => {
   // Use local timezone to avoid UTC timezone issues
@@ -152,6 +152,18 @@ const presets: DatePreset[] = [
       return { start: yesterday, end: yesterday }
     }
   },
+  {
+    labelKey: 'dates.last24Hours',
+    value: 'last24Hours',
+    getRange: () => {
+      const end = new Date()
+      const start = new Date(end.getTime() - 24 * 60 * 60 * 1000)
+      return {
+        start: formatDateToString(start),
+        end: formatDateToString(end)
+      }
+    }
+  },
   {
     labelKey: 'dates.last7Days',
     value: '7days',

frontend/src/components/common/__tests__/DateRangePicker.spec.ts

@@ -0,0 +1,96 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+
+import DateRangePicker from '../DateRangePicker.vue'
+
+const messages: Record<string, string> = {
+  'dates.today': 'Today',
+  'dates.yesterday': 'Yesterday',
+  'dates.last24Hours': 'Last 24 Hours',
+  'dates.last7Days': 'Last 7 Days',
+  'dates.last14Days': 'Last 14 Days',
+  'dates.last30Days': 'Last 30 Days',
+  'dates.thisMonth': 'This Month',
+  'dates.lastMonth': 'Last Month',
+  'dates.startDate': 'Start Date',
+  'dates.endDate': 'End Date',
+  'dates.apply': 'Apply',
+  'dates.selectDateRange': 'Select date range'
+}
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => messages[key] ?? key,
+    locale: ref('en')
+  })
+}))
+
+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}`
+}
+
+describe('DateRangePicker', () => {
+  it('uses last 24 hours as the default recognized preset', () => {
+    const now = new Date()
+    const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+
+    const wrapper = mount(DateRangePicker, {
+      props: {
+        startDate: formatLocalDate(yesterday),
+        endDate: formatLocalDate(now)
+      },
+      global: {
+        stubs: {
+          Icon: true
+        }
+      }
+    })
+
+    expect(wrapper.text()).toContain('Last 24 Hours')
+  })
+
+  it('emits range updates with last24Hours preset when applied', async () => {
+    const now = new Date()
+    const today = formatLocalDate(now)
+
+    const wrapper = mount(DateRangePicker, {
+      props: {
+        startDate: today,
+        endDate: today
+      },
+      global: {
+        stubs: {
+          Icon: true
+        }
+      }
+    })
+
+    await wrapper.find('.date-picker-trigger').trigger('click')
+    const presetButton = wrapper.findAll('.date-picker-preset').find((node) =>
+      node.text().includes('Last 24 Hours')
+    )
+    expect(presetButton).toBeDefined()
+
+    await presetButton!.trigger('click')
+    await wrapper.find('.date-picker-apply').trigger('click')
+
+    const nowAfterClick = new Date()
+    const yesterdayAfterClick = new Date(nowAfterClick.getTime() - 24 * 60 * 60 * 1000)
+    const expectedStart = formatLocalDate(yesterdayAfterClick)
+    const expectedEnd = formatLocalDate(nowAfterClick)
+
+    expect(wrapper.emitted('update:startDate')?.[0]).toEqual([expectedStart])
+    expect(wrapper.emitted('update:endDate')?.[0]).toEqual([expectedEnd])
+    expect(wrapper.emitted('change')?.[0]).toEqual([
+      {
+        startDate: expectedStart,
+        endDate: expectedEnd,
+        preset: 'last24Hours'
+      }
+    ])
+  })
+})