diff --git a/app/admin/users/page.tsx b/app/admin/users/page.tsx
index 5ad23d7..150300d 100644
--- a/app/admin/users/page.tsx
+++ b/app/admin/users/page.tsx
@@ -18,7 +18,7 @@ import {
DialogTrigger,
} from "@/components/ui/dialog"
import { Alert, AlertDescription } from "@/components/ui/alert"
-import { Plus, Edit, Trash2, ArrowLeft, Eye, EyeOff } from "lucide-react"
+import { Plus, Edit, Trash2, ArrowLeft, Eye, EyeOff, ChevronLeft, ChevronRight } from "lucide-react"
import Link from "next/link"
import { useAuth, type User } from "@/lib/hooks/use-auth"
@@ -45,6 +45,14 @@ function UsersManagementContent() {
role: "user" as "user" | "admin",
})
const [error, setError] = useState("")
+
+ // 分頁相關狀態
+ const [currentPage, setCurrentPage] = useState(1)
+ const [totalPages, setTotalPages] = useState(1)
+ const [totalUsers, setTotalUsers] = useState(0)
+ const [adminCount, setAdminCount] = useState(0)
+ const [userCount, setUserCount] = useState(0)
+ const usersPerPage = 5
const departments = ["人力資源部", "資訊技術部", "財務部", "行銷部", "業務部", "研發部", "客服部", "其他"]
@@ -52,13 +60,20 @@ function UsersManagementContent() {
loadUsers()
}, [])
- const loadUsers = async () => {
+ const loadUsers = async (page: number = 1) => {
try {
- const response = await fetch('/api/admin/users')
+ const response = await fetch(`/api/admin/users?page=${page}&limit=${usersPerPage}`)
const data = await response.json()
if (data.success) {
- setUsers(data.data)
+ setUsers(data.data.users)
+ setTotalPages(data.data.totalPages)
+ setTotalUsers(data.data.totalUsers)
+ setCurrentPage(page)
+
+ // 更新統計數據
+ setAdminCount(data.data.adminCount)
+ setUserCount(data.data.userCount)
} else {
setError(data.error || '載入用戶列表失敗')
}
@@ -89,7 +104,7 @@ function UsersManagementContent() {
if (data.success) {
// 重新載入用戶列表
- await loadUsers()
+ await loadUsers(currentPage)
setNewUser({
name: "",
@@ -150,7 +165,7 @@ function UsersManagementContent() {
if (data.success) {
// 重新載入用戶列表
- await loadUsers()
+ await loadUsers(currentPage)
setEditingUser(null)
setNewUser({
@@ -189,7 +204,7 @@ function UsersManagementContent() {
if (data.success) {
// 重新載入用戶列表
- await loadUsers()
+ await loadUsers(currentPage)
setDeletingUser(null)
} else {
setError(data.error || '刪除用戶失敗')
@@ -200,6 +215,25 @@ function UsersManagementContent() {
}
}
+ // 分頁控制函數
+ const handlePageChange = (page: number) => {
+ if (page >= 1 && page <= totalPages) {
+ loadUsers(page)
+ }
+ }
+
+ const handlePreviousPage = () => {
+ if (currentPage > 1) {
+ handlePageChange(currentPage - 1)
+ }
+ }
+
+ const handleNextPage = () => {
+ if (currentPage < totalPages) {
+ handlePageChange(currentPage + 1)
+ }
+ }
+
return (
{/* Header */}
@@ -229,7 +263,7 @@ function UsersManagementContent() {
總用戶數
- {users.length}
+ {totalUsers}
@@ -238,7 +272,7 @@ function UsersManagementContent() {
管理員
- {users.filter((u) => u.role === "admin").length}
+ {adminCount}
@@ -247,7 +281,7 @@ function UsersManagementContent() {
一般用戶
- {users.filter((u) => u.role === "user").length}
+ {userCount}
@@ -432,6 +466,50 @@ function UsersManagementContent() {
+ {/* Pagination */}
+ {totalPages > 1 && (
+
+
+ 顯示第 {((currentPage - 1) * usersPerPage) + 1} - {Math.min(currentPage * usersPerPage, totalUsers)} 筆,共 {totalUsers} 筆
+
+
+
+
+
+ {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+
+ ))}
+
+
+
+
+
+ )}
+
{/* Edit User Dialog */}