完成品

components/admin/app-management.tsx

@@ -165,7 +165,7 @@ export function AppManagement() {
   })
   const [pagination, setPagination] = useState({
     page: 1,
-    limit: 10,
+    limit: 5,
     total: 0,
     totalPages: 0
   })
@@ -608,7 +608,7 @@ export function AppManagement() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-gray-600">總應用數</p>
-                <p className="text-2xl font-bold">{apps.length}</p>
+                <p className="text-2xl font-bold">{stats.totalApps}</p>
               </div>
               <Bot className="w-8 h-8 text-blue-600" />
             </div>
@@ -620,7 +620,7 @@ export function AppManagement() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-gray-600">已發布</p>
-                <p className="text-2xl font-bold">{apps.filter((a) => a.status === "published").length}</p>
+                <p className="text-2xl font-bold">{stats.activeApps}</p>
               </div>
               <CheckCircle className="w-8 h-8 text-green-600" />
             </div>
@@ -632,7 +632,7 @@ export function AppManagement() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-gray-600">已下架</p>
-                <p className="text-2xl font-bold">{apps.filter((a) => a.status === "draft").length}</p>
+                <p className="text-2xl font-bold">{stats.inactiveApps}</p>
               </div>
               <XCircle className="w-8 h-8 text-red-600" />
             </div>
@@ -695,7 +695,7 @@ export function AppManagement() {
       {/* Apps Table */}
       <Card>
         <CardHeader>
-          <CardTitle>應用列表 ({filteredApps.length})</CardTitle>
+          <CardTitle>應用列表 ({pagination.total})</CardTitle>
           <CardDescription>管理所有 AI 應用</CardDescription>
         </CardHeader>
         <CardContent>
@@ -842,6 +842,65 @@ export function AppManagement() {
         </CardContent>
       </Card>
 
+      {/* 分頁控制元件 */}
+      {pagination.totalPages > 1 && (
+        <div className="flex flex-col items-center space-y-4 mt-6">
+          <div className="text-sm text-gray-600">
+            第 {pagination.page} 頁，共 {pagination.totalPages} 頁 (共 {pagination.total} 個應用)
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setPagination(prev => ({ ...prev, page: Math.max(1, prev.page - 1) }))}
+              disabled={pagination.page === 1}
+              className="flex items-center space-x-1"
+            >
+              <span>‹</span>
+              <span>上一頁</span>
+            </Button>
+            
+            <div className="flex items-center space-x-1">
+              {Array.from({ length: Math.min(pagination.totalPages, 5) }, (_, i) => {
+                let page;
+                if (pagination.totalPages <= 5) {
+                  page = i + 1;
+                } else if (pagination.page <= 3) {
+                  page = i + 1;
+                } else if (pagination.page >= pagination.totalPages - 2) {
+                  page = pagination.totalPages - 4 + i;
+                } else {
+                  page = pagination.page - 2 + i;
+                }
+                
+                return (
+                  <Button
+                    key={page}
+                    variant={pagination.page === page ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setPagination(prev => ({ ...prev, page }))}
+                    className="w-10 h-10 p-0"
+                  >
+                    {page}
+                  </Button>
+                )
+              })}
+            </div>
+            
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setPagination(prev => ({ ...prev, page: Math.min(prev.totalPages, prev.page + 1) }))}
+              disabled={pagination.page === pagination.totalPages}
+              className="flex items-center space-x-1"
+            >
+              <span>下一頁</span>
+              <span>›</span>
+            </Button>
+          </div>
+        </div>
+      )}
+
       {/* Add App Dialog */}
       <Dialog open={showAddApp} onOpenChange={setShowAddApp}>
         <DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto">