Analytics Dashboard

Build an analytics dashboard for product analytics. The four KPIs are weekly active users, activation rate, day-30 retention and time to first value; the primary question is whether the last release changed activation..

AUDIENCE
An operator who opens this screen every morning to answer one question and then leaves. They are not exploring; they are checking. The layout must support a scan in under sixty seconds.

STRUCTURE (exactly this order)
1. App shell: fixed left sidebar, six navigation items maximum, current item marked with a 3px left bar plus weight change, not colour alone. Top bar with workspace switcher, a single global date range picker, and one primary action.
2. KPI row: exactly four metrics. Each shows the value with its unit, a delta with direction and the comparison period, and a sparkline with no axis. No fifth card.
3. Primary chart: one question, stated as the title (for example: Did activation improve after the March release?). One y-axis with a unit label, one x-axis with dates, up to three series in the legend. Render the primary chart as a line chart with a range brush beneath it. Dragging the brush updates the KPI row, and the brush keeps its selection while the page is open.
4. Secondary breakdown: a sorted horizontal bar list of the top eight segments with their share, and a link to the full list. Sorted descending by the metric that matters, never alphabetically.
5. Data table: Include row checkboxes, a bulk action bar that appears only when rows are selected, and a count of what is selected. Destructive bulk actions require a confirmation naming the row count. Sortable headers, sticky header row, numbers right-aligned in tabular figures, 8 rows per page with a visible count.
6. Detail drawer: opens from a row click, shows the record fields and a small history list, closes with Escape and returns focus to the triggering row.
7. States: Implement all four states. Empty: one sentence explaining what will appear here and a link to the action that creates the first record. Loading: skeleton rows matching the final layout, no spinner. Error: the failed request named, a retry button, and the timestamp of the attempt. No permission: what the role is missing and who to ask, without a support link.
8. Settings row or panel: date range, timezone, and export. The export states its format and row limit before the click, not after.

STYLE
Product neutral: white panels on a #f6f7f9 canvas, 1px borders in #e3e7ec, 8px radii, one blue accent for the primary series and interactive elements, no shadows except on the drawer.

DATA RULES
- Generate 40 to 60 rows of plausible data. Include one outlier, one zero, and one segment that dropped by half.
- Dates span 90 days with weekly seasonality so the chart has a shape rather than noise.
- Numbers use thousands separators; at most one decimal unless the unit requires more.
- Colour carries meaning only: one accent for the primary series, two muted tints for secondary, grey for everything else. No decorative colour.
- Every chart needs a one-sentence text summary beneath it, so the panel is readable without seeing the graphic.

CONSTRAINTS
- Use 44px table rows, 1rem card padding, and 16px gaps between panels. Optimised for a first-time reader rather than a daily user.
- The table must not overflow horizontally at 1280px width.
- Keyboard: every control reachable, visible focus ring, drawer closable with Escape, table rows activatable with Enter.
- Charts must remain legible at 320px wide with labels thinned rather than truncated.
- No chart without a unit. No percentage without its base.

OUTPUT
One screen, self-contained, with a mock data module at the top of the script so the numbers can be swapped in one place.