import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { KeyRound, Check, Save, Plug, Loader2, CircleCheck, CircleX, Copy } from 'lucide-react'; type Field = { label: string; placeholder: string; is_secret: boolean; set: boolean; value: string | null }; type Groups = Record>; type TestState = { loading: boolean; ok?: boolean; message?: string }; const TITLES: Record = { ai: 'AI Analyst (Anthropic)', mail: 'Email / SMTP', salesforce: 'Salesforce', google_ads: 'Google Ads', ga4: 'Google Analytics 4', meta_ads: 'Meta Ads', quickbooks: 'QuickBooks', }; const HINTS: Record = { ai: 'Get a key at console.anthropic.com. Enables the AI Analyst.', mail: 'Any SMTP provider works (cPanel mailbox, Brevo, Postmark…). Fill in From address too — it appears as the sender on invitations and reports.', salesforce: 'Setup → App Manager → New Connected App. Enable OAuth, PKCE, and scopes: api refresh_token offline_access.', google_ads: 'Google Cloud console OAuth client + an approved Developer Token.', ga4: 'Google Cloud OAuth client with the Analytics Data API enabled. Property ID is the numeric GA4 property.', meta_ads: 'developers.facebook.com app with ads_read permission.', quickbooks: 'developer.intuit.com app. Sandbox and production use different keys.', }; export default function Credentials() { const props = usePage().props as unknown as { groups: Groups; redirectUris: Record; auth?: { user?: { email?: string } }; }; const { groups, redirectUris } = props; const [edits, setEdits] = useState>>({}); const [tests, setTests] = useState>({}); // Default the test recipient to the signed-in admin's own address. const [testTo, setTestTo] = useState(props.auth?.user?.email ?? ''); const setVal = (g: string, k: string, v: string) => setEdits((e) => ({ ...e, [g]: { ...e[g], [k]: v } })); const save = (g: string) => router.post('/admin/settings/credentials', { group: g, values: edits[g] ?? {} }, { preserveScroll: true, onSuccess: () => setEdits((e) => ({ ...e, [g]: {} })), }); const test = async (g: string) => { setTests((t) => ({ ...t, [g]: { loading: true } })); try { const res = await fetch('/admin/settings/credentials/test', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') as HTMLMetaElement)?.content ?? '', 'X-Requested-With': 'XMLHttpRequest', }, body: JSON.stringify({ group: g, to: g === 'mail' ? testTo : undefined }), }); const d = await res.json(); setTests((t) => ({ ...t, [g]: { loading: false, ok: d.ok, message: d.message } })); } catch { setTests((t) => ({ ...t, [g]: { loading: false, ok: false, message: 'Test request failed.' } })); } }; return ( <>

Integration Settings

Enter provider keys and test each connection. Secrets are encrypted and never shown again after saving.

{Object.entries(groups).map(([group, fields]) => { const t = tests[group]; const isMail = group === 'mail'; return (

{TITLES[group] ?? group}

{isMail && ( setTestTo(e.target.value)} placeholder="send test to…" className="w-56 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs" /> )}
{HINTS[group] &&

{HINTS[group]}

} {redirectUris[group] && (
Redirect URI: {redirectUris[group]}
)}
{Object.entries(fields).map(([key, f]) => (
setVal(group, key, e.target.value)} className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" />
))}
{t && !t.loading && t.message && ( {t.ok ? : } {t.message} )}
); })}
); }