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>
   );
 }