import { router, usePage } from '@inertiajs/react'; import { Head } from '@inertiajs/react'; import { RefreshCw, Plug, AlertTriangle, CheckCircle2 } from 'lucide-react'; type Provider = { key: string; name: string; category: string; is_mocked: boolean; connected: boolean; status: string; status_label: string; display_name: string | null; sync_frequency: string | null; last_synced_at: string | null; next_sync_at: string | null; records_imported: number; account_id: number | null; }; const ATTENTION = ['failed', 'reauthorization_required', 'rate_limited']; const DOT: Record = { rentec: 'bg-emerald-500', salesforce: 'bg-sky-500', google_ads: 'bg-amber-500', meta_ads: 'bg-blue-600', quickbooks: 'bg-green-600', }; export default function DataManager() { const { providers } = usePage().props as unknown as { providers: Provider[] }; return ( <>

Data Manager

Connect your business platforms and monitor synchronization.

{providers.map((p) => (
{p.name} {p.is_mocked && ( Mock )}
{p.category}
{p.connected ? (
) : (

Not connected yet.

)}
{p.connected ? ( <> ) : ( )}
))}
); } function Row({ label, value }: { label: string; value: string }) { return (
{label}
{value}
); } function StatusPill({ status, label }: { status: string; label: string }) { const attention = ATTENTION.includes(status); const healthy = status === 'healthy'; const cls = attention ? 'bg-destructive/10 text-destructive' : healthy ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300' : 'bg-muted text-muted-foreground'; const Icon = attention ? AlertTriangle : healthy ? CheckCircle2 : null; return ( {Icon && }{label} ); }