Add comprehensive admin features and multi-system integration

- Add admin dashboard with sync controls and data browser
- Implement RMM, Auvik, and Addigy organization mappings
- Add chunked ticket sync with progress tracking
- Implement entity sync service with rate limiting
- Add analytics engine and performance optimizer
- Create data browser for all PSA entities
- Add navigation components and UI improvements
- Implement background processing and sync services
- Add comprehensive documentation and migration scripts
- Update configuration items with multi-system support
- Enhance contact management and purchase history
- Add issue type assignment and LLM analyzer
- Improve error handling and logging utilities

app/admin/sync/page.tsx

@@ -0,0 +1,92 @@
+/**
+ * Admin Sync Page
+ * Main page for controlling and monitoring Autotask PostgreSQL sync operations
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import SyncControlPanel from '@/components/admin/SyncControlPanel';
+import SyncDashboard from '@/components/admin/SyncDashboard';
+import SyncHistoryTable from '@/components/admin/SyncHistoryTable';
+import { EntityType } from '@/lib/types/sync';
+import { Button } from '@/components/ui/button';
+import { ArrowLeft, Home } from 'lucide-react';
+import Link from 'next/link';
+
+export default function AdminSyncPage() {
+  const [selectedEntities, setSelectedEntities] = useState<EntityType[]>([]);
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  // Auto-refresh during sync and check if sync completed
+  useEffect(() => {
+    if (isSyncing) {
+      const interval = setInterval(async () => {
+        setRefreshKey(prev => prev + 1);
+        
+        // Check if sync is still in progress
+        try {
+          const response = await fetch('/api/sync/status');
+          if (response.ok) {
+            const data = await response.json();
+            // If no sync in progress, mark as complete
+            if (!data.inProgress) {
+              setIsSyncing(false);
+            }
+          }
+        } catch (error) {
+          console.error('Failed to check sync status:', error);
+        }
+      }, 5000); // Refresh every 5 seconds
+
+      return () => clearInterval(interval);
+    }
+  }, [isSyncing]);
+
+  const handleSyncStart = () => {
+    setIsSyncing(true);
+  };
+
+  const handleSyncComplete = () => {
+    setIsSyncing(false);
+    setRefreshKey(prev => prev + 1);
+  };
+
+  return (
+    <div className="container mx-auto py-4 md:py-8 px-4 space-y-6 md:space-y-8">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/">
+            <Button variant="outline" size="sm" className="gap-2">
+              <ArrowLeft className="w-4 h-4" />
+              <Home className="w-4 h-4" />
+              <span className="hidden sm:inline">Back to Dashboard</span>
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-2xl md:text-3xl font-bold">Autotask Sync</h1>
+            <p className="text-sm md:text-base text-muted-foreground mt-1">
+              Sync Autotask data to PostgreSQL database
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Sync Control Panel */}
+      <SyncControlPanel
+        selectedEntities={selectedEntities}
+        onSelectedEntitiesChange={setSelectedEntities}
+        onSyncStart={handleSyncStart}
+        onSyncComplete={handleSyncComplete}
+        isSyncing={isSyncing}
+      />
+
+      {/* Sync Dashboard */}
+      <SyncDashboard refreshKey={refreshKey} />
+
+      {/* Sync History */}
+      <SyncHistoryTable refreshKey={refreshKey} />
+    </div>
+  );
+}