Reference dashboard and settings

Two React pages to copy into your app and change as you like. Both read through your own server route, so no key reaches the browser.

Files

FileWhat it is
Dashboard.tsxCredits left this cycle, each campaign's sent, replied and bounced counts, the Readiness Cards waiting for a rep and the queued Revenue Actions. Uses @outlevo/components for the cards and the list.
Settings.tsxWebhook settings: the subscriptions, adding one (the secret is shown once), a test delivery, secret rotation, recent deliveries and removal. Plain fetch, no package needed.
allow.tsThe paths the two pages call, to add to your proxy's allow list.

Use them

  1. Add a server route at /api/outlevo: the Next.js or Express template, with the entries from allow.ts added to its ALLOW list.
  2. Give the route's key the scopes the pages read: usage:read, campaigns:read, handoffs:read, revenue_actions:read, plus handoffs:write (with "Acts as me") to accept or reject cards and webhooks:manage for the settings page.
  3. Install the components (npm install https://developers.outlevo.com/outlevo-components-0.3.0.tgz) and render <Dashboard /> and <Settings /> behind your own sign-in. The settings page manages your workspace's webhooks, so show it to admins only.

Keys themselves are created at app.outlevo.com → Developers, never from an API call, so neither page creates one.

Try them on fake data

With a test key, the dashboard shows the sandbox's campaigns, five Readiness Cards and queued actions, and the settings page signs test deliveries with the sandbox secret.