// view-developer.jsx — "API & Webhooks" workspace (the developer add-on) plus // the Identity/Server status panels. Gated by the 'api-webhooks' entitlement. function DeveloperView() { const [tab, setTab] = useState('keys'); // Use subscription entitlement (Supabase-backed) with fallback to localStorage addon flag const enabled = (RFP.subscription && RFP.subscription.hasApiAddon()) || RFP.addon('api-webhooks'); if (!enabled) { return ( <> ); } return ( <> API operational} />
{[['keys', 'API keys'], ['webhooks', 'Webhooks'], ['events', 'Event log'], ['docs', 'API reference']].map(([id, label]) => { const on = tab === id; return ; })}
{tab === 'keys' && } {tab === 'webhooks' && } {tab === 'events' && } {tab === 'docs' && } ); } function AddonUpsell({ id, name, price, desc, bullets, checkoutUrl }) { return (
OPTIONAL ADD-ON · {price}
{name} isn't enabled
{desc}
{bullets.map(b =>
{b}
)}
{checkoutUrl ? ( Add {name} — {price} ) : (
Enable in System → Company config → Add-on modules.
)}
); } // ── API keys ───────────────────────────────────────────────── function ApiKeysTab() { const { toast } = useAdmin(); const [keys, setKeys] = useState(() => RFP.webhooks.listKeys()); const [reveal, setReveal] = useState(null); const create = () => { const k = RFP.webhooks.createKey('Production key', ['read', 'write']); setKeys(RFP.webhooks.listKeys()); setReveal(k.id); toast('API key created — copy the secret now', 'success'); }; const revoke = (id) => { RFP.webhooks.revokeKey(id); setKeys(RFP.webhooks.listKeys()); toast('Key revoked', 'info'); }; return ( <> } onClick={create}>Create key}> {keys.length === 0 &&
No API keys yet. Create one to start making requests.
}
{keys.map(k => (
{k.label}
{reveal === k.id ? k.secret : k.prefix + '••••••••••••••••'}
{k.scopes.map(s => {s})}
{k.status === 'active' ? active : revoked} {k.status === 'active' && }
))}
Authentication: send Authorization: Bearer <access_token> from the OAuth token endpoint, or X-API-Key: <secret> for server-to-server. All requests are logged.
); } // ── Webhooks ───────────────────────────────────────────────── function WebhooksTab() { const { toast } = useAdmin(); const [hooks, setHooks] = useState(() => RFP.webhooks.listWebhooks()); const [url, setUrl] = useState('https://hooks.bnsf.com/railflagspro'); const [sel, setSel] = useState(['timecard.approved', 'payrun.accepted', 'invoice.posted']); const add = () => { if (!url) return; RFP.webhooks.addWebhook(url, sel); setHooks(RFP.webhooks.listWebhooks()); toast('Webhook endpoint added', 'success'); }; const toggle = (id) => { RFP.webhooks.toggleWebhook(id); setHooks(RFP.webhooks.listWebhooks()); }; const del = (id) => { RFP.webhooks.deleteWebhook(id); setHooks(RFP.webhooks.listWebhooks()); toast('Webhook removed', 'info'); }; const test = (h) => { const r = RFP.webhooks.emit(h.events[0] || 'invoice.posted', { test: true }); toast(`Test event sent · ${r.delivered} delivered`, 'success'); }; return ( <>
setUrl(e.target.value)} placeholder="https://your-system.com/webhook" style={{ flex: 1, padding: '9px 12px', border: '1px solid var(--line-strong)', borderRadius: 9, fontSize: 13.5, fontFamily: 'var(--font-mono)' }} />
{RFP.webhooks.EVENT_TYPES.map(ev => { const on = sel.includes(ev); return ; })}
{hooks.length === 0 &&
No endpoints configured.
}
{hooks.map(h => (
{h.url}
{h.events.map(e => {e})}
Signing secret: {h.secret.slice(0, 16)}••••
))}
); } // ── Event/delivery log ─────────────────────────────────────── function EventLogTab() { const { toast } = useAdmin(); const [, force] = useState(0); const deliveries = RFP.webhooks.listDeliveries(); const events = RFP.webhooks.listEvents(); const redeliver = (id) => { RFP.webhooks.redeliver(id); toast('Redelivered', 'success'); force(x => x + 1); }; return (
{events.length === 0 &&
No events emitted yet.
} {events.map((e, i) => (
{e.type} {new Date(e.at).toLocaleTimeString('en-US', { hour12: false })}
{e.id}
))}
{deliveries.length === 0 &&
No deliveries yet. Add a webhook and emit an event.
} {deliveries.map((d, i) => (
{d.status === 'delivered' ? : }
{d.type}
{d.url}
{d.responseCode} {d.ms}ms {d.status === 'failed' && }
))}
); } // ── API reference ──────────────────────────────────────────── function ApiDocsTab() { const cfg = RFP.idp.config(); const endpoints = [ ['GET', '/v1/health', 'Service health check'], ['POST', '/oauth/token', 'Exchange credentials for an access token'], ['GET', '/userinfo', 'OIDC userinfo for the bearer token'], ['GET', '/v1/accounts', 'List identity-directory accounts'], ['POST', '/v1/accounts', 'Create an account'], ['PATCH', '/v1/accounts/:id', 'Update an account'], ['GET', '/v1/payruns', 'List payroll runs'], ]; const mtone = { GET: 'info', POST: 'good', PATCH: 'warn', DELETE: 'bad' }; return (
{endpoints.map(([m, p, d], i) => (
{m} {p} {d}
))}
EXAMPLE REQUEST
{`curl -X POST https://api.railflagspro.com/oauth/token \\
  -d grant_type=password \\
  -d username=svc@bnsf.com \\
  -d password=•••• \\
  -d scope="openid compliance"

# → { "access_token": "eyJ…", "token_type": "Bearer",
#     "expires_in": 86400, "id_token": "eyJ…" }`}
/.well-known/openid-configuration
{[['issuer', cfg.issuer], ['token', cfg.token_endpoint], ['userinfo', cfg.userinfo_endpoint], ['jwks', cfg.jwks_uri]].map(([k, v]) => (
{k}
{v}
))}
{cfg.grant_types_supported.map(g => {g})}
); } Object.assign(window, { DeveloperView, AddonUpsell });