import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { KeyRound, Check, Save } from 'lucide-react'; type Field = { set: boolean; is_secret: boolean; value: string | null }; type Groups = Record>; const LABELS: Record = { salesforce: 'Salesforce', google_ads: 'Google Ads', meta_ads: 'Meta Ads', quickbooks: 'QuickBooks', ai: 'AI Analyst (Anthropic)', }; export default function Credentials() { const { groups } = usePage().props as unknown as { groups: Groups }; const [edits, setEdits] = useState>>({}); const setVal = (group: string, key: string, val: string) => setEdits((e) => ({ ...e, [group]: { ...e[group], [key]: val } })); const save = (group: string) => router.post('/admin/settings/credentials', { group, values: edits[group] ?? {} }, { preserveScroll: true, onSuccess: () => setEdits((e) => ({ ...e, [group]: {} })), }); return ( <>

Provider Credentials

Manage OAuth app keys and API keys. Secrets are encrypted at rest and never shown after saving.

{Object.entries(groups).map(([group, fields]) => (

{LABELS[group] ?? group}

{Object.entries(fields).map(([key, field]) => (
setVal(group, key, e.target.value)} className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" />
))}
))}
); }