fix

src/app/dashboard/users/[id]/page.tsx

@@ -38,6 +38,7 @@ export default function UserDetailPage() {
   const [isUpdatingVerification, setIsUpdatingVerification] = useState(false);
   const [verificationHistory, setVerificationHistory] = useState<VerificationHistoryEntry[]>([]);
   const [agentFieldValues, setAgentFieldValues] = useState<AgentFieldValue[]>([]);
+  const [isTogglingStatus, setIsTogglingStatus] = useState(false);
 
   // Helper function to check if avatar is an S3 key
   const isS3Key = (avatar: string | null | undefined): boolean => {
@@ -61,6 +62,27 @@ export default function UserDetailPage() {
     }
   }, [user?.id, user?.role]);
 
+  const handleToggleStatus = async () => {
+    if (!user) return;
+    const newStatus = user.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE';
+    const confirmed = window.confirm(
+      newStatus === 'INACTIVE'
+        ? 'Deactivate this user? They will not be able to login and their profile will be hidden from search.'
+        : 'Reactivate this user? They will be able to login again.'
+    );
+    if (!confirmed) return;
+
+    setIsTogglingStatus(true);
+    try {
+      await usersService.updateUserStatus(user.id, newStatus);
+      await fetchUser();
+    } catch (err) {
+      setError(getErrorMessage(err));
+    } finally {
+      setIsTogglingStatus(false);
+    }
+  };
+
   const fetchUser = async () => {
     setIsLoading(true);
     setError('');
@@ -362,13 +384,22 @@ export default function UserDetailPage() {
                 className={`px-3 py-1 text-sm font-semibold rounded-full ${
                   user.status === 'ACTIVE'
                     ? 'bg-green-100 text-green-800'
-                    : user.status === 'SUSPENDED'
+                    : 'bg-red-100 text-red-800'
-                    ? 'bg-red-100 text-red-800'
-                    : 'bg-yellow-100 text-yellow-800'
                 }`}
               >
                 {user.status}
               </span>
+              <button
+                onClick={handleToggleStatus}
+                disabled={isTogglingStatus}
+                className={`px-3 py-1 text-xs font-medium rounded-full transition-colors disabled:opacity-50 ${
+                  user.status === 'ACTIVE'
+                    ? 'bg-red-50 text-red-600 hover:bg-red-100'
+                    : 'bg-green-50 text-green-600 hover:bg-green-100'
+                }`}
+              >
+                {isTogglingStatus ? '...' : user.status === 'ACTIVE' ? 'Deactivate' : 'Activate'}
+              </button>
             </div>
           </div>
         </div>