import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Database, Plug, RefreshCw, CircleCheck, CircleX, AlertTriangle, Plus } from 'lucide-react'; import { RentecConnectModal } from '@/components/data-manager/RentecConnectModal'; type Account = { id: number; display_name: string; status: string; frequency: string; last_synced_human: string; records: number; entities: string[]; }; type Provider = { key: string; name: string; category: string; auth_type: string; supports_multiple: boolean; accounts: Account[]; }; const DOT: Record = { property: 'bg-emerald-500', crm: 'bg-blue-500', advertising: 'bg-amber-500', accounting: 'bg-emerald-500', analytics: 'bg-slate-500', }; export default function DataManager() { const { providers } = usePage().props as unknown as { providers: Provider[] }; const [rentecModal, setRentecModal] = useState(false); const connect = (p: Provider) => { // Rentec authenticates with a stored key, so it takes a form rather than a redirect. if (p.key === 'rentec') { setRentecModal(true); return; } window.location.href = `/data-manager/connect/${p.key}`; }; const rentecCount = providers.find((p) => p.key === 'rentec')?.accounts.length ?? 0; return ( <>

Data Manager

Connect your business platforms and monitor synchronization.

{providers.map((p) => (

{p.name}

{p.category}

{p.accounts.length === 0 && ( Not connected )}
{p.accounts.length === 0 ? ( <>

Not connected yet.

) : (
{p.accounts.map((a) => (

{a.display_name}

Frequency
{a.frequency}
Last sync
{a.last_synced_human}
Records
{a.records.toLocaleString()}
))} {p.supports_multiple && ( )}
)}
))}
{rentecModal && ( setRentecModal(false)} /> )} ); } function StatusBadge({ status }: { status: string }) { if (status === 'healthy') { return Healthy; } if (status === 'failed') { return Failed; } if (status === 'reauthorization_required') { return Reconnect; } return {status}; }