chore: merge executor worktree (worktree-agent-ae30b6495d2fffaf0)

.planning/quick/260712-ash-add-pax8-to-the-admin-sync-overview-page/260712-ash-SUMMARY.md

@@ -0,0 +1,117 @@
+---
+quick_task: 260712-ash
+title: Add PAX8 to the admin sync overview page
+one_liner: PAX8 sync detail page + overview card wired to existing /api/pax8/sync route
+key_files:
+  created:
+    - app/admin/sync/pax8/page.tsx
+    - public/logos/pax8.ico
+  modified:
+    - app/admin/sync/page.tsx
+completed: 2026-07-12
+---
+
+# Quick Task 260712-ash: Add PAX8 to the admin sync overview page Summary
+
+PAX8 sync detail page + overview card wired to existing `/api/pax8/sync` route.
+
+## What was built
+
+1. **`app/admin/sync/pax8/page.tsx`** — new client detail page mirroring the
+   `sentinelone`/`duo` sibling pages:
+   - Polls `GET /api/pax8/sync` every 10s via `fetchData`/`useCallback`, uses
+     `useUserTimezone()` for date formatting.
+   - Header with back link to `/admin/sync`, `/logos/pax8.ico` logo, title
+     "PAX8 Sync", subtitle "Companies, subscriptions, and products synced to
+     pax8_* tables".
+   - Stat cards for Companies / Subscriptions / Products, sourced from
+     `data.counts`.
+   - Last-sync card showing status icon (completed/running/failed), formatted
+     timestamp, computed duration (`completed_at - started_at`, since the PAX8
+     history rows have no `duration_ms`), and total records
+     (`records_added + records_updated + records_deleted`). Renders
+     `error_message` in a red box when present.
+   - Sync history list with the same per-row shape (status icon, date, total
+     records, duration, `triggered_by` badge) and an empty-state message.
+   - "Sync Now" button: `POST /api/pax8/sync` with
+     `{ triggeredBy: 'manual' }`. On non-ok response, reads the JSON body and
+     shows `toast.error(json.message || json.error)` — covers the 403
+     (disabled) and 409 (already in progress) cases from the route. On success,
+     shows `toast.success('PAX8 sync started')` and polls `GET /api/pax8/sync`
+     every 5s until `inProgress` clears, then refetches. Button disabled while
+     `syncing` or `data.inProgress`.
+
+2. **`app/admin/sync/page.tsx`** — wired PAX8 into the existing per-integration
+   pattern:
+   - Appended a `pax8` entry to `INTEGRATIONS` (category "Licensing", href
+     `/admin/sync/pax8`, logo `/logos/pax8.ico`, color `blue`).
+   - Added `pax8Data` state and a `fetch('/api/pax8/sync')` call inside the
+     existing `Promise.all` in `fetchAll`.
+   - Added a `pax8` branch to `getSummary` returning `lastSync`, `status`,
+     `companies`, `subscriptions` (guarded on `pax8Data` being null).
+   - Added a `pax8` branch to `getStatusIcon` (no `lastSync` → muted clock;
+     `status === 'failed'` → red X; else green check).
+   - Added a card stats block for `intg.id === 'pax8'` showing Last sync /
+     Companies / Subscriptions rows, matching the existing itglue/duo markup.
+
+3. **`public/logos/pax8.ico`** — logo asset for the card/detail page. The
+   sandboxed executor environment has no outbound network access, so
+   `curl -fsSL https://www.pax8.com/favicon.ico` returned a 0-byte file. Per
+   the plan's fallback instruction, copied `public/logos/itglue.ico` as a
+   placeholder so the card never shows a broken image. **This is a known
+   placeholder — swap in the real PAX8 favicon when there's network access.**
+
+## Verification
+
+- `npx tsc --noEmit --pretty` — clean, no errors, after both tasks.
+- Task 1 automated check: file exists, contains `'/api/pax8/sync'` and
+  `triggeredBy`.
+- Task 2 automated check: `public/logos/pax8.ico` is non-empty, `page.tsx`
+  contains `id: 'pax8'`, `fetch('/api/pax8/sync')`, and `setPax8Data`.
+
+## Deviations from Plan
+
+### Auto-fixed / expected fallback
+
+**1. [Plan-specified fallback] PAX8 logo could not be fetched from the network**
+- **Found during:** Task 2
+- **Issue:** The plan instructed fetching `https://www.pax8.com/favicon.ico`
+  via curl, with an explicit fallback to copy an existing logo if the fetch
+  fails or returns empty. The executor sandbox has no outbound network access,
+  so the curl returned a 0-byte file.
+- **Fix:** Followed the plan's documented fallback exactly — copied
+  `public/logos/itglue.ico` to `public/logos/pax8.ico` as a placeholder.
+- **Files modified:** `public/logos/pax8.ico`
+- **Commit:** `6ed6c66`
+- **Follow-up needed:** Replace with the real PAX8 favicon/logo when network
+  access or a manually-downloaded asset is available. Not a stub in the
+  functional sense (the card and detail page work correctly) — purely a
+  cosmetic placeholder.
+
+No other deviations. Both tasks executed exactly as specified.
+
+## Known Stubs
+
+- `public/logos/pax8.ico` is a placeholder (copy of `itglue.ico`), not the
+  real PAX8 logo. Functionally harmless — the image renders, just not the
+  correct brand mark. Should be replaced with the actual PAX8 favicon in a
+  follow-up task once network access is available.
+
+## Threat Flags
+
+None. This plan only reads from an existing, already-authenticated admin route
+(`/api/pax8/sync`, itself protected by the existing admin page layout/auth) and
+adds no new endpoints, auth paths, or schema changes.
+
+## Commits
+
+- `3ac111e` — feat(260712-ash): add PAX8 sync detail page
+- `6ed6c66` — feat(260712-ash): add PAX8 card to sync overview page
+
+## Self-Check: PASSED
+
+- FOUND: `app/admin/sync/pax8/page.tsx`
+- FOUND: `public/logos/pax8.ico`
+- FOUND: `app/admin/sync/page.tsx` (modified, PAX8 branches present)
+- FOUND commit `3ac111e` in `git log --oneline`
+- FOUND commit `6ed6c66` in `git log --oneline`

app/admin/sync/page.tsx

@@ -26,6 +26,7 @@ const INTEGRATIONS: IntegrationCard[] = [
   { id: 'sentinelone', category: 'EDR/AV',     product: 'SentinelOne',   description: 'Endpoint agents, threat detections, site coverage, AV health',        href: '/admin/sync/sentinelone',    logo: '/logos/sentinelone.ico',  color: 'purple' },
   { id: 'mimecast',    category: 'Email Security', product: 'Mimecast',    description: 'Message tracking logs, threat events, SIEM data, 120-day retention', href: '/admin/sync/mimecast',       logo: '/logos/mimecast.ico',     color: 'blue'   },
   { id: 'duo',          category: '2FA / MFA',      product: 'Duo Security',  description: 'Users, phones, auth logs, groups, integrations across all child accounts', href: '/admin/sync/duo',            logo: '/logos/duo.ico',          color: 'green'  },
+  { id: 'pax8',         category: 'Licensing',      product: 'PAX8',          description: 'Companies, subscriptions, products, and license billing',                              href: '/admin/sync/pax8',           logo: '/logos/pax8.ico',         color: 'blue'   },
 ];
 
 const COLOR_MAP: Record<string, { bg: string; border: string }> = {
@@ -59,16 +60,18 @@ export default function SyncOverviewPage() {
 
   const [mimecastData, setMimecastData] = useState<any>(null);
   const [duoData, setDuoData] = useState<any>(null);
+  const [pax8Data, setPax8Data] = useState<any>(null);
 
   const fetchAll = async () => {
     try {
-      const [intRes, atRes, itgRes, s1Res, mcRes, duoRes] = await Promise.all([
+      const [intRes, atRes, itgRes, s1Res, mcRes, duoRes, pax8Res] = await Promise.all([
         fetch('/api/integrations/status'),
         fetch('/api/sync/last-sync'),
         fetch('/api/itglue/sync'),
         fetch('/api/sentinelone/sync'),
         fetch('/api/mimecast/status'),
         fetch('/api/duo/status'),
+        fetch('/api/pax8/sync'),
       ]);
       if (intRes.ok) setStatus(await intRes.json());
       if (atRes.ok) {
@@ -79,6 +82,7 @@ export default function SyncOverviewPage() {
       if (s1Res.ok) setS1SyncData(await s1Res.json());
       if (mcRes.ok) setMimecastData(await mcRes.json());
       if (duoRes.ok) setDuoData(await duoRes.json());
+      if (pax8Res.ok) setPax8Data(await pax8Res.json());
     } catch (e) {
       console.error(e);
     } finally {
@@ -180,6 +184,16 @@ export default function SyncOverviewPage() {
         bypass: c.bypass ?? 0,
       };
     }
+    if (id === 'pax8') {
+      if (!pax8Data) return null;
+      const h = pax8Data.history?.[0];
+      return {
+        lastSync: h?.completed_at ?? null,
+        status: h?.status ?? null,
+        companies: Number(pax8Data.counts?.companies ?? 0),
+        subscriptions: Number(pax8Data.counts?.subscriptions ?? 0),
+      };
+    }
     return null;
   };
 
@@ -219,6 +233,11 @@ export default function SyncOverviewPage() {
       if ((summary as any).bypass > 0) return <AlertTriangle className="w-4 h-4 text-red-500" />;
       return <CheckCircle2 className="w-4 h-4 text-green-500" />;
     }
+    if (id === 'pax8') {
+      if (!summary.lastSync) return <Clock className="w-4 h-4 text-muted-foreground" />;
+      if (summary.status === 'failed') return <XCircle className="w-4 h-4 text-red-500" />;
+      return <CheckCircle2 className="w-4 h-4 text-green-500" />;
+    }
     return <CheckCircle2 className="w-4 h-4 text-green-500" />;
   };
 
@@ -411,6 +430,22 @@ export default function SyncOverviewPage() {
                         )}
                       </>
                     )}
+                    {intg.id === 'pax8' && summary && (
+                      <>
+                        <div className="flex justify-between">
+                          <span>Last sync</span>
+                          <span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span>Companies</span>
+                          <span className="font-medium text-foreground">{(summary as any).companies?.toLocaleString()}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span>Subscriptions</span>
+                          <span className="font-medium text-foreground">{(summary as any).subscriptions?.toLocaleString()}</span>
+                        </div>
+                      </>
+                    )}
                     {(intg.id === 'auvik' || intg.id === 'addigy') && (
                       <div className="flex justify-between">
                         <span>Status</span>

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<Pax8SyncData | null>(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 (
+    <div className="container mx-auto py-8 space-y-6 max-w-5xl">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Link href="/admin/sync">
+            <Button variant="ghost" size="sm"><ArrowLeft className="w-4 h-4 mr-1" />Back</Button>
+          </Link>
+          <div className="flex items-center gap-3">
+            <img src="/logos/pax8.ico" alt="PAX8" className="w-8 h-8 rounded" />
+            <div>
+              <h1 className="text-2xl font-bold">PAX8 Sync</h1>
+              <p className="text-sm text-muted-foreground">Companies, subscriptions, and products synced to pax8_* tables</p>
+            </div>
+          </div>
+        </div>
+        <Button onClick={triggerSync} disabled={syncing || inProgress}>
+          {syncing || inProgress
+            ? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Syncing...</>
+            : <><Play className="w-4 h-4 mr-2" />Sync Now</>}
+        </Button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+        {[
+          { 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 }) => (
+          <Card key={label}>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-xs text-muted-foreground flex items-center gap-1">
+                <Icon className={`w-3 h-3 ${color}`} />{label}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? '—' : Number(value ?? 0).toLocaleString()}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Last sync status */}
+      {lastSync && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Last Sync</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center gap-3">
+              {lastSync.status === 'completed'
+                ? <CheckCircle2 className="w-5 h-5 text-green-500" />
+                : lastSync.status === 'running'
+                ? <RefreshCw className="w-5 h-5 text-blue-500 animate-spin" />
+                : <XCircle className="w-5 h-5 text-red-500" />}
+              <div>
+                <div className="font-medium capitalize">{lastSync.status}</div>
+                <div className="text-xs text-muted-foreground">
+                  {fmtDate(lastSync.completed_at || lastSync.started_at, tz)} · {fmtDuration(lastSync.started_at, lastSync.completed_at)} · {totalRecords(lastSync).toLocaleString()} records
+                </div>
+              </div>
+            </div>
+            {lastSync.error_message && (
+              <div className="text-xs text-red-500 bg-red-500/10 rounded p-2">{lastSync.error_message}</div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* History */}
+      <Card>
+        <CardHeader><CardTitle className="text-sm">Sync History</CardTitle></CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            {(data?.history ?? []).map((h) => (
+              <div key={h.id} className="flex items-center justify-between text-sm border-b pb-2 last:border-0">
+                <div className="flex items-center gap-2">
+                  {h.status === 'completed' ? <CheckCircle2 className="w-4 h-4 text-green-500" />
+                    : h.status === 'running' ? <RefreshCw className="w-4 h-4 text-blue-500 animate-spin" />
+                    : <XCircle className="w-4 h-4 text-red-500" />}
+                  <span className="text-muted-foreground">{fmtDate(h.started_at, tz)}</span>
+                </div>
+                <div className="flex items-center gap-3 text-muted-foreground">
+                  <span>{totalRecords(h).toLocaleString()} records</span>
+                  <span>{fmtDuration(h.started_at, h.completed_at)}</span>
+                  <Badge variant="outline" className="text-xs">{h.triggered_by}</Badge>
+                </div>
+              </div>
+            ))}
+            {!loading && (data?.history ?? []).length === 0 && (
+              <p className="text-sm text-muted-foreground text-center py-4">No sync history yet — run a sync to get started</p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}