feat: add tabs to sync page and fix pagination

- Separate Sync Status and Sync History into tabs with icons
- Fix pagination in sync history by adding offset parameter
- Update getSyncHistory to support offset for proper pagination
- Update API endpoint to pass offset parameter
- Previous/Next buttons now work correctly to navigate pages

This improves UX by organizing the sync page into logical sections
and enables users to browse through historical sync records.

app/admin/sync/page.tsx

@@ -11,7 +11,8 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ArrowLeft, Home, Activity, History } from 'lucide-react';
 import Link from 'next/link';
 
 export default function AdminSyncPage() {
@@ -82,11 +83,27 @@ export default function AdminSyncPage() {
         isSyncing={isSyncing}
       />
 
-      {/* Sync Dashboard */}
-      <SyncDashboard refreshKey={refreshKey} />
-
-      {/* Sync History */}
-      <SyncHistoryTable refreshKey={refreshKey} />
+      {/* Tabs for Sync Status and History */}
+      <Tabs defaultValue="status" className="w-full">
+        <TabsList className="grid w-full max-w-md grid-cols-2">
+          <TabsTrigger value="status" className="gap-2">
+            <Activity className="h-4 w-4" />
+            Sync Status
+          </TabsTrigger>
+          <TabsTrigger value="history" className="gap-2">
+            <History className="h-4 w-4" />
+            Sync History
+          </TabsTrigger>
+        </TabsList>
+        
+        <TabsContent value="status" className="mt-6">
+          <SyncDashboard refreshKey={refreshKey} />
+        </TabsContent>
+        
+        <TabsContent value="history" className="mt-6">
+          <SyncHistoryTable refreshKey={refreshKey} />
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }

app/api/sync/history/route.ts

@@ -12,6 +12,7 @@ export async function GET(request: NextRequest) {
   try {
     const searchParams = request.nextUrl.searchParams;
     const limit = parseInt(searchParams.get('limit') || '50');
+    const offset = parseInt(searchParams.get('offset') || '0');
     const entityType = searchParams.get('entityType') as EntityType | null;
 
     // Initialize Autotask client (needed for service instantiation)
@@ -28,7 +29,8 @@ export async function GET(request: NextRequest) {
     // Get sync history
     const history = await syncService.getSyncHistory(
       limit,
-      entityType || undefined
+      entityType || undefined,
+      offset
     );
 
     return NextResponse.json({

components/admin/SyncHistoryTable.tsx

@@ -46,7 +46,8 @@ export default function SyncHistoryTable({ refreshKey }: SyncHistoryTableProps)
   const fetchHistory = async () => {
     try {
       setLoading(true);
-      const response = await fetch(`/api/sync/history?limit=${limit}`);
+      const offset = (page - 1) * limit;
+      const response = await fetch(`/api/sync/history?limit=${limit}&offset=${offset}`);
       if (response.ok) {
         const data = await response.json();
         setHistory(data.history || []);

lib/services/sync-service.ts

@@ -352,11 +352,13 @@ export class SyncService {
    * Get sync history
    * @param limit Number of records to return
    * @param entityType Optional entity type filter
+   * @param offset Offset for pagination
    * @returns Array of sync history records
    */
   async getSyncHistory(
     limit: number = 50,
-    entityType?: EntityType
+    entityType?: EntityType,
+    offset: number = 0
   ): Promise<SyncHistoryRecord[]> {
     let query = `
       SELECT *
@@ -370,8 +372,8 @@ export class SyncService {
       params.push(entityType);
     }
 
-    query += ` ORDER BY started_at DESC LIMIT $${params.length + 1}`;
-    params.push(limit);
+    query += ` ORDER BY started_at DESC LIMIT $${params.length + 1} OFFSET $${params.length + 2}`;
+    params.push(limit, offset);
 
     const result = await postgresClient.query<SyncHistoryRecord>(query, params);
     return result.rows;