feat: Add Duo Security card to /admin/sync overview + detail page

- Added Duo card to sync overview grid (category: 2FA/MFA, green)
- Shows accounts, users, phones, auth logs counts + bypass/disabled warning
- Created /admin/sync/duo detail page with:
  - Stat cards (accounts, users, phones, auth logs, groups, integrations)
  - Parent account summary
  - Child accounts table with user counts, matched company, sync time
  - Sync Now button with polling for completion
- Created GET /api/duo/status endpoint (counts + last sync + bypass count)
- Added duo.ico logo

app/admin/sync/duo/page.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { RefreshCw, ArrowLeft, Loader2, CheckCircle2, AlertTriangle, Shield, Users, Smartphone, ScrollText, Layers, AppWindow } from 'lucide-react';
+
+interface DuoStatus {
+  connected: boolean;
+  syncing: boolean;
+  lastSync: string | null;
+  counts: {
+    accounts: number;
+    users: number;
+    phones: number;
+    authLogs: number;
+    groups: number;
+    integrations: number;
+    bypassed: number;
+  };
+}
+
+interface DuoAccount {
+  id: number;
+  account_id: string;
+  name: string;
+  api_hostname: string;
+  user_count: number;
+  integration_count: number;
+  is_parent: boolean;
+  synced_at: string | null;
+  autotask_company_id: string | null;
+  autotask_company_name: string | null;
+}
+
+export default function DuoSyncPage() {
+  const [status, setStatus] = useState<DuoStatus | null>(null);
+  const [accounts, setAccounts] = useState<DuoAccount[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [syncing, setSyncing] = useState(false);
+
+  const fetchData = async () => {
+    try {
+      const [statusRes, accountsRes] = await Promise.all([
+        fetch('/api/duo/status'),
+        fetch('/api/duo/accounts'),
+      ]);
+      if (statusRes.ok) setStatus(await statusRes.json());
+      if (accountsRes.ok) {
+        const d = await accountsRes.json();
+        setAccounts(d.accounts ?? []);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchData(); }, []);
+
+  const triggerSync = async () => {
+    setSyncing(true);
+    try {
+      await fetch('/api/duo/sync', { method: 'POST' });
+      // Poll for completion
+      const poll = setInterval(async () => {
+        const r = await fetch('/api/duo/sync');
+        if (r.ok) {
+          const d = await r.json();
+          if (!d.inProgress) {
+            clearInterval(poll);
+            setSyncing(false);
+            fetchData();
+          }
+        }
+      }, 5000);
+    } catch (e) {
+      console.error(e);
+      setSyncing(false);
+    }
+  };
+
+  const fmtDate = (d: string | null) => {
+    if (!d) return 'Never';
+    return new Date(d).toLocaleString();
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  const childAccounts = accounts.filter(a => !a.is_parent);
+  const parentAccount = accounts.find(a => a.is_parent);
+
+  return (
+    <div className="container mx-auto py-4 md:py-8 px-4 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Link href="/admin/sync">
+            <Button variant="ghost" size="icon"><ArrowLeft className="w-4 h-4" /></Button>
+          </Link>
+          <div className="flex items-center gap-3">
+            <img src="/logos/duo.ico" alt="Duo" className="w-8 h-8 rounded" />
+            <div>
+              <h1 className="text-2xl font-bold">Duo Security</h1>
+              <p className="text-sm text-muted-foreground">2FA / MFA — Accounts & Admin API sync</p>
+            </div>
+          </div>
+        </div>
+        <Button onClick={triggerSync} disabled={syncing} className="gap-2">
+          {syncing ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
+          {syncing ? 'Syncing...' : 'Sync Now'}
+        </Button>
+      </div>
+
+      {/* Status cards */}
+      {status && (
+        <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-3">
+          <StatCard icon={<Shield className="w-4 h-4" />} label="Accounts" value={status.counts.accounts} />
+          <StatCard icon={<Users className="w-4 h-4" />} label="Users" value={status.counts.users} />
+          <StatCard icon={<Smartphone className="w-4 h-4" />} label="Phones" value={status.counts.phones} />
+          <StatCard icon={<ScrollText className="w-4 h-4" />} label="Auth Logs" value={status.counts.authLogs} />
+          <StatCard icon={<Layers className="w-4 h-4" />} label="Groups" value={status.counts.groups} />
+          <StatCard icon={<AppWindow className="w-4 h-4" />} label="Integrations" value={status.counts.integrations} />
+        </div>
+      )}
+
+      {/* Last sync + warnings */}
+      <div className="flex items-center gap-4 text-sm text-muted-foreground">
+        <span>Last sync: <strong className="text-foreground">{fmtDate(status?.lastSync ?? null)}</strong></span>
+        {status && status.counts.bypassed > 0 && (
+          <span className="flex items-center gap-1 text-yellow-600">
+            <AlertTriangle className="w-4 h-4" />
+            {status.counts.bypassed} user(s) in bypass/disabled status
+          </span>
+        )}
+      </div>
+
+      {/* Parent account */}
+      {parentAccount && (
+        <div className="rounded-lg border border-border p-4">
+          <h2 className="text-sm font-semibold mb-2 flex items-center gap-2">
+            <Shield className="w-4 h-4 text-blue-500" /> Parent Account
+          </h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+            <div><span className="text-muted-foreground">Name:</span> <strong>{parentAccount.name}</strong></div>
+            <div><span className="text-muted-foreground">Users:</span> <strong>{parentAccount.user_count}</strong></div>
+            <div><span className="text-muted-foreground">Integrations:</span> <strong>{parentAccount.integration_count}</strong></div>
+            <div><span className="text-muted-foreground">Synced:</span> <strong>{fmtDate(parentAccount.synced_at)}</strong></div>
+          </div>
+        </div>
+      )}
+
+      {/* Child accounts table */}
+      <div>
+        <h2 className="text-lg font-semibold mb-3">Child Accounts ({childAccounts.length})</h2>
+        <div className="rounded-lg border border-border overflow-hidden">
+          <table className="w-full text-sm">
+            <thead className="bg-muted/50">
+              <tr>
+                <th className="text-left px-4 py-2 font-medium">Account Name</th>
+                <th className="text-right px-4 py-2 font-medium">Users</th>
+                <th className="text-right px-4 py-2 font-medium">Integrations</th>
+                <th className="text-left px-4 py-2 font-medium">Matched Company</th>
+                <th className="text-left px-4 py-2 font-medium">Last Sync</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {childAccounts.map(a => (
+                <tr key={a.account_id} className="hover:bg-muted/20">
+                  <td className="px-4 py-2 font-medium">{a.name}</td>
+                  <td className="px-4 py-2 text-right">{a.user_count}</td>
+                  <td className="px-4 py-2 text-right">{a.integration_count}</td>
+                  <td className="px-4 py-2">
+                    {a.autotask_company_name ? (
+                      <span className="flex items-center gap-1">
+                        <CheckCircle2 className="w-3 h-3 text-green-500" />
+                        {a.autotask_company_name}
+                      </span>
+                    ) : (
+                      <span className="text-muted-foreground">—</span>
+                    )}
+                  </td>
+                  <td className="px-4 py-2 text-muted-foreground">{fmtDate(a.synced_at)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: number }) {
+  return (
+    <div className="rounded-lg border border-border p-3">
+      <div className="flex items-center gap-2 text-muted-foreground mb-1">
+        {icon}
+        <span className="text-xs">{label}</span>
+      </div>
+      <div className="text-xl font-bold">{value.toLocaleString()}</div>
+    </div>
+  );
+}

app/admin/sync/page.tsx

@@ -24,6 +24,7 @@ const INTEGRATIONS: IntegrationCard[] = [
   { id: 'addigy',       category: 'Apple RMM',  product: 'Addigy',        description: 'macOS/iOS device management, policies, compliance',                href: '/admin/sync/addigy',         logo: '/logos/addigy.ico',       color: 'gray'   },
   { 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'  },
 ];
 
 const COLOR_MAP: Record<string, { bg: string; border: string }> = {
@@ -56,15 +57,17 @@ export default function SyncOverviewPage() {
   const [s1SyncData, setS1SyncData] = useState<any>(null);
 
   const [mimecastData, setMimecastData] = useState<any>(null);
+  const [duoData, setDuoData] = useState<any>(null);
 
   const fetchAll = async () => {
     try {
-      const [intRes, atRes, itgRes, s1Res, mcRes] = await Promise.all([
+      const [intRes, atRes, itgRes, s1Res, mcRes, duoRes] = 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'),
       ]);
       if (intRes.ok) setStatus(await intRes.json());
       if (atRes.ok) {
@@ -74,6 +77,7 @@ export default function SyncOverviewPage() {
       if (itgRes.ok) setItglueSyncData(await itgRes.json());
       if (s1Res.ok) setS1SyncData(await s1Res.json());
       if (mcRes.ok) setMimecastData(await mcRes.json());
+      if (duoRes.ok) setDuoData(await duoRes.json());
     } catch (e) {
       console.error(e);
     } finally {
@@ -162,6 +166,19 @@ export default function SyncOverviewPage() {
         threats: s.threats ?? 0,
       };
     }
+    if (id === 'duo') {
+      if (!duoData) return null;
+      const c = duoData.counts ?? {};
+      return {
+        lastSync: duoData.lastSync ?? null,
+        connected: duoData.connected ?? false,
+        accounts: c.accounts ?? 0,
+        users: c.users ?? 0,
+        phones: c.phones ?? 0,
+        authLogs: c.authLogs ?? 0,
+        bypassed: c.bypassed ?? 0,
+      };
+    }
     return null;
   };
 
@@ -196,6 +213,11 @@ export default function SyncOverviewPage() {
       if ((summary as any).threats > 0) return <AlertTriangle className="w-4 h-4 text-yellow-500" />;
       return <CheckCircle2 className="w-4 h-4 text-green-500" />;
     }
+    if (id === 'duo') {
+      if (!summary.connected) return <Clock className="w-4 h-4 text-muted-foreground" />;
+      if ((summary as any).bypassed > 0) return <AlertTriangle className="w-4 h-4 text-yellow-500" />;
+      return <CheckCircle2 className="w-4 h-4 text-green-500" />;
+    }
     return <CheckCircle2 className="w-4 h-4 text-green-500" />;
   };
 
@@ -360,6 +382,32 @@ export default function SyncOverviewPage() {
                         )}
                       </>
                     )}
+                    {intg.id === 'duo' && summary && (
+                      <>
+                        <div className="flex justify-between">
+                          <span>Last sync</span>
+                          <span className="font-medium text-foreground">{fmtDate((summary as any).lastSync)}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span>Accounts / Users</span>
+                          <span className="font-medium text-foreground">{(summary as any).accounts} / {(summary as any).users?.toLocaleString()}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span>Phones</span>
+                          <span className="font-medium text-foreground">{(summary as any).phones?.toLocaleString()}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span>Auth logs</span>
+                          <span className="font-medium text-foreground">{(summary as any).authLogs?.toLocaleString()}</span>
+                        </div>
+                        {(summary as any).bypassed > 0 && (
+                          <div className="flex justify-between text-yellow-700">
+                            <span>Bypass / Disabled</span>
+                            <span className="font-medium">{(summary as any).bypassed}</span>
+                          </div>
+                        )}
+                      </>
+                    )}
                     {(intg.id === 'auvik' || intg.id === 'addigy') && (
                       <div className="flex justify-between">
                         <span>Status</span>

app/api/duo/status/route.ts

@@ -0,0 +1,42 @@
+import { NextResponse } from 'next/server';
+import { postgresClient } from '@/lib/services/postgres-client';
+import { duoSyncService } from '@/lib/services/duo-sync-service';
+
+export async function GET() {
+  try {
+    const [accounts, users, phones, authLogs, groups, integrations, lastSync] = await Promise.all([
+      postgresClient.query(`SELECT COUNT(*) as cnt FROM duo_accounts WHERE is_parent = false`),
+      postgresClient.query(`SELECT COUNT(*) as cnt FROM duo_users`),
+      postgresClient.query(`SELECT COUNT(*) as cnt FROM duo_phones`),
+      postgresClient.query(`SELECT COUNT(*) as cnt FROM duo_auth_logs`),
+      postgresClient.query(`SELECT COUNT(*) as cnt FROM duo_groups`),
+      postgresClient.query(`SELECT COUNT(*) as cnt FROM duo_integrations`),
+      postgresClient.query(`SELECT MAX(synced_at) as last_sync FROM duo_accounts`),
+    ]);
+
+    const bypassed = await postgresClient.query(
+      `SELECT COUNT(*) as cnt FROM duo_users WHERE status IN ('bypass', 'disabled')`
+    );
+
+    return NextResponse.json({
+      connected: true,
+      syncing: duoSyncService.isSyncInProgress(),
+      lastSync: lastSync.rows[0]?.last_sync ?? null,
+      counts: {
+        accounts: Number(accounts.rows[0].cnt),
+        users: Number(users.rows[0].cnt),
+        phones: Number(phones.rows[0].cnt),
+        authLogs: Number(authLogs.rows[0].cnt),
+        groups: Number(groups.rows[0].cnt),
+        integrations: Number(integrations.rows[0].cnt),
+        bypassed: Number(bypassed.rows[0].cnt),
+      },
+    });
+  } catch (error: any) {
+    return NextResponse.json({
+      connected: false,
+      error: error.message,
+      counts: {},
+    });
+  }
+}