feat: add date presets, assign default operators, and unify formatting across dashboard, query builder, and chart

[AdnanQuazi]

Overview

This PR adds date range presets for absolute and relative dates (between and within operator), introduces a <PresetWrapper> component, and unifies date filtering UI and label formatting across Dashboard, Query Builder, and Chart filters for consistency across the application.
Previously, absolute date range (between) filters and relative date range (within) did not have preset options, requiring users to select ranges on the calendar manually or select from the dropdown components in within. In addition, custom date selections displayed raw ISO strings, and Dashboard filters used a separate implementation from the Query Builder and Chart filters.

Key Changes

1. Added Date Range Presets (between & within)

• Added quick-select preset options (Today, Yesterday, This Month, Last Month, This Quarter, Last Year, etc.) for both absolute (between) and relative (within) date filters.
• Created the Preset type structure (value: () => string | string[]). This ensures dynamic date ranges (like This Month) are evaluated fresh when selected, preventing dates from becoming stale if the application stays open across day boundaries.

2. Created Shared UI Wrapper (<PresetWrapper>)

• Built <PresetWrapper.vue> to handle dropdown preset selection above custom calendar or relative form controls.
• Users can select a preset from the dropdown or interact directly with the calendar and relative forms below without needing to toggle between views.
• The dropdown automatically switches to "Custom" whenever a user manually modifies a date on the calendar or changes interval inputs.

3. Unified Formatting Across Dashboard, Query, and Charts

• Added formatDateFilterValue() and formatDateRangeDescription() to serve as the single source of truth for date labels across the frontend.
• Year Formatting Rules:
  • Current year dates omit the year: Jan 1 - Dec 31
  • Different years include the year: Jan 1, 2024 - Dec 31, 2024
• Replaced raw ISO strings (2025-01-01,2025-12-31) with clean, formatted date spans (Jan 1 - Dec 31, 2025) across filter button labels.

---

Component & Architectural Breakdown

Core Types & Utilities (query/components/)

• query.types.ts: Added the Preset type to use consistent function returns (label: string, value: () => string | string[], description?: () => string).
• filter_utils.ts: Added getDatePresets(operator), and findPresetByValue().
• formatting_utils.ts: Added formatDateFilterValue() and formatDateRangeDescription() to handle date label formatting centrally.

Shared Pickers & Wrappers (query/components/)

• PresetWrapper.vue (NEW): Built the shared wrapper component that manages dropdown selection and custom override state.
• AbsoluteDatePicker.vue (NEW): Created a shared component combining <PresetWrapper> with <DateRangePicker>.
• AbsoluteDatePickerControl.vue (NEW): Created a popover-wrapped input trigger for both Query Builder rows and Chart sidebar filter rules.
• RelativeDatePicker.vue & RelativeDatePickerControl.vue: Wrapped these components in <PresetWrapper> so they share the exact same preset dropdown and automatic "Custom" detection as the absolute date pickers.

Query Builder & Chart Filters (query/components/)

• FilterRule.vue: Integrated <AbsoluteDatePickerControl> for between operators and <RelativeDatePickerControl> for within operators so Chart sidebar filters and Query Builder rules share the exact same UI.

Dashboard Filters (dashboard/)

• DashboardFilter.vue: Updated button label formatting to use centralized formatFilterValue() calls for consistency.
• DashboardFilterEditor.vue: Replaced standard <DateRangePicker> with <AbsoluteDatePicker>, making presets available when setting default dashboard filters.
• Filter.vue: Updated popover rendering to use <AbsoluteDatePicker> for absolute date ranges.

---

1. Dashboard Filter Presets

dash-filter-preset.mp4

2. Chart Filter Presets

chart-filter-presets.mp4

[mergify]

Tick the box to add this pull request to the merge queue (same as @mergifyio queue).

• Queue this pull request

[greptile-apps]

Confidence Score: 5/5

Safe to merge — all changes are frontend-only Vue components and utilities with no backend or security-sensitive paths touched.

The change is a well-scoped frontend feature addition. Logic for preset evaluation, date formatting, and model binding is internally consistent. The only gaps are missing translation wrappers on a handful of newly added strings.

frontend/src2/query/components/AbsoluteDatePickerControl.vue and RelativeDatePickerControl.vue — both new files are missing __() imports and wrappers for their hardcoded strings.

_{Reviews (2): Last reviewed commit: "chore: remove unused dayjs import" | Re-trigger Greptile}

[nextchamp-saqib]

@AdnanQuazi we should use frappe-ui's new date picker component, https://ui.frappe.io/docs/components/datepicker

I'll update frappe-ui soon, maybe you can refactor it after that?

[AdnanQuazi]

@nextchamp-saqib sure!