StatisticsDateFilter

Implemented

Controlled date-range filter with preset pills (Today/Yesterday/This week/Last week/This month/Year to date/ALL), From/To date inputs, and a Clear reset, labeled via a string map for i18n.

Categoryorganisms

Sourcecomponents/organisms/StatisticsDateFilter/StatisticsDateFilter.tsx

AI Hintfrom/to stay parent-controlled as ISO YYYY-MM-DD strings (empty string = open boundary); onChange fires on preset, input, or Clear, and all copy arrives via labels. The active preset is detected back from the current values — a hand-typed range matching last week highlights the LAST_WEEK pill; presets are inclusive calendar windows resolved in the viewer's own calendar (weeks run Monday to Sunday; THIS_MONTH = 1st of this month…today; YEAR_TO_DATE = 1 January…today). presetToRange(preset, now?) and detectActivePreset(from, to, now?) ship as exported helpers for tests and server-side range math.

Controlled date-range filter with preset pills (Today/Yesterday/This week/Last week/This month/Year to date/ALL), From/To date inputs, and a Clear reset — all copy arrives via the labels string map for i18n.

StatisticsDateFilter

Organism — Dashboard & statistics family

The range selector for the producer-statistics surface (DS-STAT-01, promoted from the storefront dashboard). Preset pills render as a role="tablist" group, From/To constrain each other (max/min), and Clear resets to the open ALL range. Fully controlled: from/to are ISO YYYY-MM-DD strings owned by the parent (empty string = open boundary), onChange fires on preset, input, or Clear, and the component never calls the API itself.

FromTo

Range: ALL (open boundaries) — the Clear button is hidden until a bound is set.

This component supports light and dark mode.

Usage

Keep from / to in one state object and refetch on onChange — the emitted pair is always the full range. Presets are inclusive calendar windows — weeks run Monday to Sunday, and this month / year to date both end today; ALL and Clear both emit empty strings (open boundaries). The preview above also toggles the labels map to show the i18n contract.

import { useState } from 'react'
import { StatisticsDateFilter } from '@epasslive/design-system'

const [range, setRange] = useState({ from: '', to: '' }) // ALL

<StatisticsDateFilter
  from={range.from}
  to={range.to}
  onChange={setRange}
  labels={labels}
/>

Behavior notes

The active preset is detected back from the current values — a hand-typed range that happens to match "last 30 days" highlights the 30D pill; anything else highlights nothing. The From input carries max={to} and the To input min={from}, and changing either fires onChange immediately (no separate Apply step). The Clear button renders only when a bound is set. Helpers ship with the organism — presetToRange(preset, now?) and detectActivePreset(from, to, now?) — for tests and server-side range math.

Accessibility

The preset group is a role="tablist" with each pill a role="tab" button carrying aria-selected — the same announcement shape the pre-refactor storefront markup had (WCAG 4.1.2). The row and pill group are named via the labels map, and both date inputs carry dedicated input aria-labels in addition to the visible group labels. Presets are real <button type="button"> elements with the standard DS focus ring (WCAG 2.1.1).

Props

Prop

Type

Default

Description

from*

string

—

Current ISO YYYY-MM-DD lower bound (empty string = open). Parent-controlled.

to*

string

—

Current ISO YYYY-MM-DD upper bound (empty string = open). Parent-controlled.

onChange*

(next: { from: string; to: string }) => void

—

Fires whenever the user changes from / to / preset / clear.

labels*

StatisticsDateFilterLabels

—

Localized copy for every region of the filter — see the labels table below.

className

string

—

Extra classes on the row container.

Labels map

StatisticsDateFilterLabels — every string the organism renders arrives here, so consumers own i18n.

Prop

Type

Default

Description

rowAriaLabel*

string

—

aria-label on the row container.

presetsAriaLabel*

string

—

aria-label on the preset pill group (role="tablist").

from*

string

—

Visible label for the From date input group.

fromInputAriaLabel*

string

—

aria-label on the From input.

to*

string

—

Visible label for the To date input group.

toInputAriaLabel*

string

—

aria-label on the To input.

clear*

string

—

Visible label for the Clear button.

presets*

Record<StatisticsDatePreset, string>

—

Preset key to visible label — TODAY, YESTERDAY, THIS_WEEK, LAST_WEEK, THIS_MONTH, YEAR_TO_DATE, ALL.

presets is a complete record over the StatisticsDatePreset keys:

Prop

Type

Default

Description

TODAY

string

—

Label for the today preset ([today, today]).

YESTERDAY

string

—

Label for the yesterday preset ([today − 1, today − 1]).

THIS_WEEK

string

—

Label for the current-week preset — Monday to Sunday of the week containing today.

LAST_WEEK

string

—

Label for the previous-week preset — Monday to Sunday of the week before.

THIS_MONTH

string

—

Label for the month-to-date preset ([1st of this month, today]).

YEAR_TO_DATE

string

—

Label for the year-to-date preset ([1 January, today]).

ALL

string

—

Label for the open-range preset ({ from: "", to: "" }).

Props

Preview

StatisticsDateFilter

Prop

Type

Required

Default

Description

from

string

Required

—

Current ISO YYYY-MM-DD `from` value (empty string = open boundary). Parent-controlled.

to

string

Required

—

Current ISO YYYY-MM-DD `to` value (empty string = open boundary). Parent-controlled.

onChange

(next: { from: string; to: string }) => void

Required

—

Called whenever the user changes from / to / preset / clear — always emits the full range pair.

labels

StatisticsDateFilterLabels

Required

—

Localized copy for every region of the filter: rowAriaLabel, presetsAriaLabel, from, fromInputAriaLabel, to, toInputAriaLabel, clear, and presets (Record<StatisticsDatePreset, string>).

className

string

Optional

—

Optional extra className for the row container.

Quick use:<StatisticsDateFilter />

Accessibility

ARIA roletablist (preset pill group; each pill role=tab with aria-selected)

Usage

Import

tsxSnippet

import { StatisticsDateFilter } from "@epasslive/design-system"

Example 1

tsxSnippet

<StatisticsDateFilter from={range.from} to={range.to} onChange={setRange} labels={labels} />

Anti-patterns

— Do not fetch data or call APIs inside this organism — it stays purely controlled and presentational

— Do not hardcode English copy around it — every string arrives via the labels map (consumers own i18n)

— Do not store parsed Date objects in the controlled state — the contract is ISO YYYY-MM-DD strings