+ {/* ── Range + Filters ── */}
+
+
setFilters((f) => ({ ...f, range: v }))}
/>
-
- {overview && fOpts.products.length > 1 && (
- <>
-
-
+ setFilters((f) => ({ ...f, product: v }))}
+ locale={locale}
+ formatLabel={(label) => formatProductLabel(label)}
+ getIcon={(option) => productIcon(option.value)}
+ onChange={(values) => setFilters((f) => ({ ...f, products: values }))}
tooltips={{ 'claude-code': t.claudeCodeDataNotice }}
/>
- >
- )}
- {overview && fOpts.devices.length >= 1 && (
- <>
-
- formatModelName(label, isMobile)}
+ getIcon={(option) => modelIcon(option.value, option.label)}
+ onChange={(values) => setFilters((f) => ({ ...f, models: values }))}
+ />
+ setFilters((f) => ({ ...f, deviceId: v }))}
+ locale={locale}
+ onChange={(values) => setFilters((f) => ({ ...f, deviceIds: values }))}
/>
- >
- )}
-
-
- {/* ── Filters (mobile) ── */}
-
- ({ value: r.value, label: r.label, eventCount: 0, estimatedCostUsd: 0 }))}
- allLabel=""
- onChange={(v) => setFilters((f) => ({ ...f, range: v || '30d' }))}
- />
- {overview && fOpts.products.length > 1 && (
- setFilters((f) => ({ ...f, product: v }))}
- tooltips={{ 'claude-code': t.claudeCodeDataNotice }}
- />
- )}
- {overview && fOpts.devices.length >= 1 && (
- setFilters((f) => ({ ...f, deviceId: v }))}
- />
+
)}