add votes

app/admin/members/page.tsx

@@ -42,19 +42,31 @@ import { Checkbox } from "@/components/ui/checkbox"
 
 interface User {
   id: string
+  username: string
   name: string
   email: string
   is_active: boolean
   created_at: string
   updated_at: string
-  roles: Array<{
+  roles?: Array<{
     id: string
     name: string
     code: string
-  }>
+  }> | null
   department_response?: {
     name: string
   } | null
+  profile?: {
+    user_id: string
+    full_name: string
+    timezone: string
+    locale: string
+    preferences: any
+    notification_prefs: any
+    created_at: string
+    updated_at: string
+    roles: any
+  } | null
 }
 
 interface ApiResponse {
@@ -164,6 +176,13 @@ function MembersPageContent() {
     }
   }, [user])
 
+  // Reset search when changing pages since search is limited to current page
+  useEffect(() => {
+    if (user && currentPage > 1) {
+      setSearchTerm("")
+    }
+  }, [currentPage])
+
   // Reset to first page when filters change
   useEffect(() => {
     if (user && (searchTerm || statusFilter !== "all")) {
@@ -181,11 +200,18 @@ function MembersPageContent() {
       if (data.success) {
         setUsers(data.data.users)
         setTotalUsers(data.data.pagination.total_count)
-        setCurrentPage(page)
+        setCurrentPage(data.data.pagination.page)
+        
+        console.log('📊 Pagination Info:', {
+          currentPage: data.data.pagination.page,
+          totalCount: data.data.pagination.total_count,
+          totalPages: data.data.pagination.total_pages,
+          limit: data.data.pagination.limit
+        })
         
         toast({
           title: "Success",
-          description: `Fetched ${data.data.users.length} users`,
+          description: `Fetched ${data.data.users.length} users (Page ${data.data.pagination.page} of ${data.data.pagination.total_pages})`,
         })
       } else {
         toast({
@@ -434,6 +460,7 @@ function MembersPageContent() {
   const filteredUsers = users.filter((user) => {
     const matchesSearch =
       user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      user.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
       user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
       (user.department_response?.name || "").toLowerCase().includes(searchTerm.toLowerCase())
 
@@ -473,7 +500,7 @@ function MembersPageContent() {
               <Users className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold">{users.length}</div>
+              <div className="text-2xl font-bold">{totalUsers}</div>
             </CardContent>
           </Card>
           
@@ -485,6 +512,7 @@ function MembersPageContent() {
             <CardContent>
               <div className="text-2xl font-bold text-green-600">
                 {users.filter(u => u.is_active).length}
+                <span className="text-sm text-gray-500 ml-1">/ {totalUsers}</span>
               </div>
             </CardContent>
           </Card>
@@ -497,6 +525,7 @@ function MembersPageContent() {
             <CardContent>
               <div className="text-2xl font-bold text-yellow-600">
                 {users.filter(u => !u.is_active).length}
+                <span className="text-sm text-gray-500 ml-1">/ {totalUsers}</span>
               </div>
             </CardContent>
           </Card>
@@ -527,11 +556,14 @@ function MembersPageContent() {
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                   <Input
                     id="search"
-                    placeholder="Search by name, email, or department..."
+                    placeholder="Search by username, name, email, or department..."
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
                     className="pl-10"
                   />
+                  <p className="text-xs text-gray-500 mt-1">
+                    Search is limited to the current page. Use pagination to view more users.
+                  </p>
                 </div>
               </div>
               
@@ -623,7 +655,7 @@ function MembersPageContent() {
             <CardTitle>Users List</CardTitle>
             <CardDescription>
               Showing {startIndex}-{endIndex} of {totalUsers} total users
-              {filteredUsers.length !== users.length && ` (${filteredUsers.length} filtered)`}
+              {filteredUsers.length !== users.length && ` (${filteredUsers.length} filtered from current page)`}
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -643,6 +675,7 @@ function MembersPageContent() {
                                   <Table>
                     <TableHeader>
                       <TableRow>
+                        <TableHead>Username</TableHead>
                         <TableHead>Name</TableHead>
                         <TableHead>Email</TableHead>
                         <TableHead>Department</TableHead>
@@ -654,6 +687,9 @@ function MembersPageContent() {
                     <TableBody>
                       {filteredUsers.map((user) => (
                         <TableRow key={user.id}>
+                          <TableCell className="font-mono text-sm">
+                            {user.username}
+                          </TableCell>
                           <TableCell className="font-medium">{user.name}</TableCell>
                           <TableCell>{user.email}</TableCell>
                           <TableCell>