[V2 200pts] Add admin user management actions — deactivate, reactivate, and KYC status update

[olaleyeolajide81-sketch]

Summary

This PR adds admin user management actions to the user detail panel, including account deactivation/reactivation and KYC status updates, as specified in issue #254.

Changes Made

1. API Functions in lib/api/admin.ts

Added three new API functions for user management:

• deactivateUser(id: string): POST request to /admin/users/{id}/deactivate
• reactivateUser(id: string): POST request to /admin/users/{id}/reactivate
• updateUserKyc(id: string, status): PATCH request to /admin/users/{id}/kyc with kycStatus in body

These functions use the existing apiClient and follow the same error handling patterns as other admin API calls.

2. User Detail Panel Enhancements (components/admin/UserDetailPanel.tsx)

State Management

Added new state variables:

• showDeactivateConfirm / showReactivateConfirm - Confirmation dialog visibility
• showKycConfirm - KYC status change confirmation
• pendingKycStatus - Tracks the pending KYC status change
• actionLoading - Loading state during API calls
• actionError - Error message display

Action Handlers

• handleDeactivate() / confirmDeactivate() - Deactivate user account
• handleReactivate() / confirmReactivate() - Reactivate user account
• handleKycToggle() / confirmKycChange() - Update KYC status

All handlers include:

• Optimistic UI updates (update state immediately)
• Error handling with user-friendly messages
• Loading states with spinner indicators
• Proper cleanup on success/error

UI Components

Account Status Section

• Displays current status (Active/Inactive) with color-coded badges
• Shows "Deactivate" button for active users
• Shows "Reactivate" button for inactive users
• Buttons include Power icon and are disabled during loading

KYC Verification Section

• Enhanced with action buttons for status changes
• Shows "Mark as Verified" (ShieldCheck icon) for unverified users
• Shows "Mark as Unverified" (ShieldX icon) for verified users
• Color-coded status display (green for Verified, orange for Unverified)

Confirmation Dialogs

Three new confirmation dialogs with consistent UX:

1. Deactivate Confirmation

   • Message: "This will prevent the user from logging in. Are you sure?"
   • Red confirm button with loading spinner
   • Error display if API call fails

2. Reactivate Confirmation

   • Message: "This will allow the user to log in again. Are you sure?"
   • Green confirm button with loading spinner
   • Error display if API call fails

3. KYC Status Change Confirmation

   • Message: "This will change the user's KYC status to [Verified/Unverified]. Are you sure?"
   • Blue confirm button with loading spinner
   • Error display if API call fails

All dialogs:

• Use backdrop overlay (z-index 60)
• Centered modal (z-index 70)
• Cancel and Confirm buttons
• Disabled state during loading
• Click outside to cancel

3. Import Updates

Added new Lucide React icons:

• Power - For activate/deactivate actions
• ShieldCheck - For mark as verified action
• ShieldX - For mark as unverified action
• Removed unused MoreVertical import

Testing

Build Verification

• ✅ npm run lint - No errors, no warnings
• ✅ npm run build - Successful production build
• ✅ TypeScript compilation successful
• ✅ All 21 pages generated successfully (20 static, 2 dynamic)

Manual Testing Scenarios

The implementation supports the following user flows:

1. Deactivate User

   • Admin clicks "Deactivate" button
   • Confirmation dialog appears
   • Admin confirms → API call → User status updates to Inactive
   • Button changes to "Reactivate"
   • Error handling if API fails

2. Reactivate User

   • Admin clicks "Reactivate" button (only shown for inactive users)
   • Confirmation dialog appears
   • Admin confirms → API call → User status updates to Active
   • Button changes to "Deactivate"
   • Error handling if API fails

3. Update KYC Status

   • Admin clicks shield icon (check or X)
   • Confirmation dialog shows pending status
   • Admin confirms → API call → KYC status updates
   • Status badge color changes
   • Icon toggles to opposite action
   • Error handling if API fails

Backend Integration

The API endpoints used in this implementation need to be confirmed with the backend team:

• POST /admin/users/{id}/deactivate - Deactivate user account
• POST /admin/users/{id}/reactivate - Reactivate user account
• PATCH /admin/users/{id}/kyc - Update KYC status (body: { kycStatus: "Verified" | "Unverified" })

If the backend endpoints differ, the API functions in lib/api/admin.ts can be easily updated to match the actual backend implementation.

Audit Trail

The issue mentions displaying an audit trail if the backend returns lastModifiedBy or audit log fields. The current AdminUser interface does not include these fields. Once the backend confirms the audit trail data structure, this can be added to:

1. The AdminUser interface in lib/api/admin.ts
2. The mapAdminUser function to normalize the data
3. The UserDetailPanel UI to display the audit information

Accessibility & UX

• All buttons have proper disabled states during loading
• Loading spinners provide visual feedback
• Error messages are clearly displayed
• Confirmation dialogs prevent accidental actions
• Color coding (green/red) provides visual status indicators
• Icons enhance button meaning and accessibility

Related Issue

Closes #254

[vercel]

@olaleyeolajide81-sketch is attempting to deploy a commit to the Emmanuel Dorcas' projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@olaleyeolajide81-sketch Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[portableDD]

Hello! This PR targets main but based on the issue instructions, it should target v2. Please update the base branch to v2.

[portableDD]

Hello! This PR targets main but should target v2. Please update the base branch to v2.

[olaleyeolajide81-sketch]

Please approve workflow and merge PR