Issue #49: Users Management Page

[wumibals]

Labels: frontend admin users
Area: frontend/app/(auth)/admin/users/UsersClient.tsx, frontend/app/(auth)/admin/users/page.tsx
Difficulty: Advanced

Description

The users management page lets privileged admins manage all admin users in the system. It shows 4 stat cards (total, active, inactive, roles distribution), a filterable user table, and supports inline role changes and account status toggles. Access is filtered by role — SUPER_ADMIN sees all users; other roles cannot see SUPER_ADMIN accounts.

Acceptance Criteria

• Create frontend/app/(auth)/admin/users/page.tsx (server component, metadata: { title: "Users" }, renders <UsersPage />)
• Create frontend/app/(auth)/admin/users/UsersClient.tsx as a "use client" component
• Restrict access to SUPER_ADMIN, ADMIN, MANAGER via <RoleProtectedPage>
• Fetch users via TanStack Query (adminApi.getUsers())
• Filter displayed users: if the current user is not SUPER_ADMIN, exclude users with role SUPER_ADMIN from the displayed list
• Render 4 stat cards: Total Users, Active, Inactive, Admin Count (ADMIN + SUPER_ADMIN)
• Render "Add User" button (visible only to SUPER_ADMIN, links to /admin/users/new)
• Render <UserTable> supporting:
  • Toggle active/inactive status (inline mutation)
  • Change role (dropdown mutation)
  • Neither action applies to SUPER_ADMIN accounts
• Show loading skeleton and error state

Technical Notes

• UserTable is pre-built in @/components/admin/users/UserTable
• Read current role from useAuthStore to determine filtering and button visibility
• On successful mutation, invalidate the users query

[JoeX17]

@JoeX17 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

can i work on this?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @JoeX17 to this issue.

[drips-wave]

Congratulations, @JoeX17! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @JoeX17: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @JoeX17 as part of the Stellar Wave Program's 3rd Wave 🥳

😎 @JoeX17: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.