---
id: w8/m6/t004
title: Month selector on the Usage page
worker: worker8
status: todo
estimate: 35m
depends_on: [w8/m6/t003]
---

## Objective

Add a month-selector control to the dashboard Usage page, wired to `useUsage`'s new `period` parameter.

## Context

- `dashboard/src/features/usage/components/usage-page.tsx` currently has no period control — it always shows the current month.
- Follows `dashboard/CLAUDE.md`'s visual layout pattern (`space-y-6`, Card conventions) and i18n rules (every string through `useTranslations()`).

## Steps

1. Add a month-selector component (dropdown or prev/next control) above the Compute/Bandwidth/Build sections.
2. Wire its value to `useUsage`'s `period` param.
3. Add translation keys for the new UI strings (`dashboard/src/features/usage/locales/{en,zh}.ts`).

## Files

- `dashboard/src/features/usage/components/usage-page.tsx`
- `dashboard/src/features/usage/locales/{en,zh}.ts`

## Acceptance criteria

- [ ] Selecting a past month updates all three sections (Compute/Bandwidth/Build) to that month's totals.

## Out of scope

- The trend chart (t005).
