From 3ac111e02143cd098bd690610bb3dc49e4e942c0 Mon Sep 17 00:00:00 2001 From: lorentz Date: Sun, 12 Jul 2026 07:51:23 -0400 Subject: [PATCH] feat(260712-ash): add PAX8 sync detail page - New app/admin/sync/pax8/page.tsx mirroring sentinelone/duo pattern - Polls GET /api/pax8/sync every 10s, shows companies/subscriptions/products stats - Sync Now button POSTs with triggeredBy, handles 403/409 via sonner toast, polls until complete --- app/admin/sync/pax8/page.tsx | 208 +++++++++++++++++++++++++++++++++++ 1 file changed, 208 insertions(+) create mode 100644 app/admin/sync/pax8/page.tsx diff --git a/app/admin/sync/pax8/page.tsx b/app/admin/sync/pax8/page.tsx new file mode 100644 index 0000000..36805bb --- /dev/null +++ b/app/admin/sync/pax8/page.tsx @@ -0,0 +1,208 @@ +'use client'; + +import { useState, useEffect, useCallback } from 'react'; +import Link from 'next/link'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { + ArrowLeft, RefreshCw, Play, CheckCircle2, XCircle, + Building2, Package, Boxes, +} from 'lucide-react'; +import { toast } from 'sonner'; +import { useUserTimezone } from '@/lib/hooks/use-user-timezone'; + +interface Pax8SyncHistoryEntry { + id: string; + sync_type: string; + status: string; + started_at: string; + completed_at: string | null; + records_added: number; + records_updated: number; + records_deleted: number; + error_message: string | null; + triggered_by: string; +} + +interface Pax8SyncData { + inProgress: boolean; + counts: { companies: number; subscriptions: number; products: number }; + history: Pax8SyncHistoryEntry[]; +} + +function fmtDate(d: string | null, tz: string) { + if (!d) return '—'; + return new Date(d).toLocaleString(undefined, { timeZone: tz }); +} + +function fmtDuration(started: string | null, completed: string | null) { + if (!started || !completed) return '—'; + const ms = new Date(completed).getTime() - new Date(started).getTime(); + if (!Number.isFinite(ms) || ms < 0) return '—'; + if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`; + return `${(ms / 60000).toFixed(1)}m`; +} + +function totalRecords(h: Pax8SyncHistoryEntry) { + return (h.records_added ?? 0) + (h.records_updated ?? 0) + (h.records_deleted ?? 0); +} + +export default function Pax8SyncPage() { + const tz = useUserTimezone(); + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + const [syncing, setSyncing] = useState(false); + + const fetchData = useCallback(async () => { + try { + const res = await fetch('/api/pax8/sync'); + if (res.ok) setData(await res.json()); + } finally { + setLoading(false); + } + }, []); + + useEffect(() => { + fetchData(); + const interval = setInterval(fetchData, 10000); + return () => clearInterval(interval); + }, [fetchData]); + + const triggerSync = async () => { + setSyncing(true); + try { + const res = await fetch('/api/pax8/sync', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ triggeredBy: 'manual' }), + }); + if (!res.ok) { + const json = await res.json().catch(() => ({})); + toast.error(json.message || json.error || 'Failed to start PAX8 sync'); + setSyncing(false); + return; + } + toast.success('PAX8 sync started'); + const poll = setInterval(async () => { + const r = await fetch('/api/pax8/sync'); + if (r.ok) { + const d = await r.json(); + if (!d.inProgress) { + clearInterval(poll); + setSyncing(false); + fetchData(); + } + } + }, 5000); + } catch (e) { + console.error(e); + toast.error('Failed to start PAX8 sync'); + setSyncing(false); + } + }; + + const lastSync = data?.history?.[0]; + const counts = data?.counts ?? { companies: 0, subscriptions: 0, products: 0 }; + const inProgress = data?.inProgress ?? false; + + return ( +
+
+
+ + + +
+ PAX8 +
+

PAX8 Sync

+

Companies, subscriptions, and products synced to pax8_* tables

+
+
+
+ +
+ + {/* Stats */} +
+ {[ + { label: 'Companies', value: counts.companies, icon: Building2, color: 'text-blue-500' }, + { label: 'Subscriptions', value: counts.subscriptions, icon: Package, color: 'text-green-500' }, + { label: 'Products', value: counts.products, icon: Boxes, color: 'text-purple-500' }, + ].map(({ label, value, icon: Icon, color }) => ( + + + + {label} + + + +
+ {loading ? '—' : Number(value ?? 0).toLocaleString()} +
+ + + ))} +
+ + {/* Last sync status */} + {lastSync && ( + + + Last Sync + + +
+ {lastSync.status === 'completed' + ? + : lastSync.status === 'running' + ? + : } +
+
{lastSync.status}
+
+ {fmtDate(lastSync.completed_at || lastSync.started_at, tz)} · {fmtDuration(lastSync.started_at, lastSync.completed_at)} · {totalRecords(lastSync).toLocaleString()} records +
+
+
+ {lastSync.error_message && ( +
{lastSync.error_message}
+ )} + + + )} + + {/* History */} + + Sync History + +
+ {(data?.history ?? []).map((h) => ( +
+
+ {h.status === 'completed' ? + : h.status === 'running' ? + : } + {fmtDate(h.started_at, tz)} +
+
+ {totalRecords(h).toLocaleString()} records + {fmtDuration(h.started_at, h.completed_at)} + {h.triggered_by} +
+
+ ))} + {!loading && (data?.history ?? []).length === 0 && ( +

No sync history yet — run a sync to get started

+ )} +
+ + +
+ ); +}