Date range picker
The header date filter used across Home, Analytics, Sales, Reports, Inventory, and Prescriptions.
Overview
The date range picker in the page header filters the page's data to a given range. It supports preset ranges (Today, Last 7 days, Last 30 days, This month, custom, etc.) and remembers your choice per page.
When to use it
- Zooming in on a specific day, week, or month
- Running a custom range report (e.g., quarter-to-date)
- Looking at yesterday's performance vs today
How to use it
Video tutorial coming soon
- Click the date range picker in the page header.
- Pick a preset (Today / Last 7 days / Last 30 days / This month / etc.) or choose Custom and drag out a range on the calendar.
- Click Apply โ the page's data refreshes to the new range.
- If the page supports a Clear button, you can reset to "no filter" โ not all pages allow this.
Where it appears
- Home โ key:
home-dates - Analytics (all tabs) โ key:
analytics-dates - Sales (all views) โ key:
sales-dates - Reports โ per-report
- Inventory โ key:
inventory-dates - Prescriptions โ per-page
- Promotions โ filters by the promo's active date range
Tips & gotchas
- Timezone: ranges are interpreted in Bangkok time (ICT, UTC+7) regardless of your browser's timezone โ what you see in the picker is what Klu uses server-side.
- Persistence is per-page (separate localStorage keys), so Home and Sales can have different ranges at the same time.
- Default: most pages default to the last 30 days. Some pages open with an empty filter if "Clear" was enabled and used.
- The picker stores
[startDate, endDate, presetName]โ presets are remembered so "Last 7 days" rolls forward as time passes. - Start Day At from org / branch settings affects daily rollups within the range (e.g., a 6am day-start bucket vs a midnight day-start bucket).