Add time range filter to homepage Task Status section

t-180·WorkTask·
·
·
·Omni/Jr.hs
Created3 months ago·Updated3 months ago

Dependencies

Description

Edit

Add ability to scope homepage metrics by time range: Today, This Week, This Month, All Time.

Design: Add a row of toggle buttons above the stats-grid: [Today] [This Week] [This Month] [All Time]

Default selection: All Time

Implementation:

1. Add route with query param: "home" :> QueryParam "range" Text :> Get '[Lucid.HTML] HomePage

Range values: "today", "week", "month", "all" (default)

2. In homeHandler, filter tasks by range before computing stats:

  • "today": taskUpdatedAt >= start of today (UTC)
  • "week": taskUpdatedAt >= start of this week (Monday)
  • "month": taskUpdatedAt >= start of this month
  • "all": no filter

3. Also filter activities by range for cost/duration metrics.

4. Update HomePage ToHtml to render toggle buttons: Lucid.div_ [Lucid.class_ "time-filter"] <| do timeFilterBtn "Today" "today" currentRange timeFilterBtn "This Week" "week" currentRange timeFilterBtn "This Month" "month" currentRange timeFilterBtn "All Time" "all" currentRange

Each button is an anchor to /?range=X with active class if selected.

5. Add CSS for .time-filter:

  • Horizontal row with small gap
  • Buttons are pill-shaped, small
  • Active button has filled background

Dependencies: t-179 (cost/duration metrics)

Timeline (0)

No activity yet.