[pierre-b]

What changes

The transactional notifications screen of the console is rebuilt on the shared layout components (PageHeader, Panel, KpiStrip, Pill, FullDrawer, RateBar, KeyValueList, TableToolbar, Mono, MetaLine). Console only: the server parts landed in #524.

List

• Header with the count, "API documentation" and "New notification" (disabled with a tooltip without the needed permissions).
• An alert when the workspace has no transactional provider, with a link to the integrations.
• KPIs over every notification for 7, 30 or 60 days in the workspace timezone, today included: emails sent, delivered with its change against the previous period, open and click rates on tracked emails, failed with its share, bounces.
• Table: notification, template (deleted or missing flagged), sent, delivered (rate bar, warning under 97 %), opens, clicks, failed, bounces (warning from 2 %), last send over 60 days, and row actions (send test, API command, more actions: edit, preview template, copy ID, view in logs, delete), each disabled action naming the missing permission.
• Search on name or ID, mirrored in the URL; the provider and default sender in the toolbar.

Sheet (?notification={id}, loaded by transactional.get, so a shared link opens the right one)

• J and K follow the rows shown, off while a dialog or drawer is open above the sheet.
• KPIs that link to the message log filtered on the notification, sends per day with the failure peak, recent sends refreshed every 30 s, a preview of the template scaled to the column, the API call in cURL, TypeScript and Python, and the settings (tracking, UTM, Reply-To, managed by).

Freshness

• The statistics are read again on return to the tab, and the window slides when the workspace's day changes.
• A period switch keeps the old figures labelled with their own period and never compares them with the new previous period; the sheet waits for the new figures.

Logs: the message log accepts transactional_notification_id in its URL and filters on it.

Note

• Shared component: KpiStrip leaves a small space (mb-1) under each KPI label, on every screen that uses it.
• The KPI values of the sheet keep the link colour, underlined on hover: the ink colour did not apply over antd's link style.

Known, not treated (non-blocking)

• An all-digit notification ID (2024) is serialised with quotes by the router in the logs links, and the logs screen reads it as is, so the log comes back empty. The fix belongs to the logs screen.
• The sheet of a notification created after the list was loaded shows zeros until the list is read again; if the list became empty after a delete, its figures stay loading instead.
• While its template loads, fails or is missing, the sheet shows the provider's default sender unmarked.
• Disabled entries of the sheet's menu carry no reason (the table's do); the sheet's header has no "Deleted template" pill.
• Accessibility: rows open on click and Enter but have no row role or link; the reasons of disabled menu entries show on hover only; KPI links are named by their number; the chart has no text alternative.
• The "last 60 days" tooltip is a literal, independent of LAST_SENT_DAYS.
• No test pins refetchOnWindowFocus on the statistics queries, nor the last day in the daily series key.

Tests

• npm test after merging dev (Console redesign: contacts, lists and segments in one page, with a contact sheet #539): 315 files, 5,112 tests, all green; the KpiStrip commit adds one test, green with its file.
• npx tsc -b, eslint on the changed files, npm run build: clean.
• e2e features/transactional.spec.ts and protected-pages.spec.ts at 75a55ed: 33 passed. LogsPage loads and renders logs content fails on dev too, unrelated.
• The payload test of transactional.spec.ts was already red on dev: the generated ID is cut at 32 characters, and its expectation now says so.

Queries

The statistics query message_history grouped by transactional_notification_id over created_at, through the analytics schema added in #524. No query or schema change on the server here.

Review

Reviewed: c2a59e9. After it: a merge of dev, where only the translation catalogues conflicted (re-extracted, every translation kept, checked by hand), and the one-line KpiStrip spacing, left out of review as asked.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.96%. Comparing base (58b8c06) to head (66a481d).
⚠️ Report is 1 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev     #543      +/-   ##
==========================================
- Coverage   88.97%   88.96%   -0.01%     
==========================================
  Files         377      377              
  Lines       73836    73836              
==========================================
- Hits        65692    65689       -3     
- Misses       5435     5437       +2     
- Partials     2709     2710       +1     

Flag	Coverage Δ
unit	88.96% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.