From 01ce0f5346f645f4ca585b62f145f8fdf4da3640 Mon Sep 17 00:00:00 2001
From: seaznCode <alexander.atmn@gmail.com>
Date: Sun, 30 Nov 2025 13:30:16 +0100
Subject: [PATCH] refactor: enhance user status display and button
 accessibility in UserDetailModal

---
 src/app/components/UserDetailModal.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/components/UserDetailModal.tsx b/src/app/components/UserDetailModal.tsx
index ddee6dd..3eb188a 100644
--- a/src/app/components/UserDetailModal.tsx
+++ b/src/app/components/UserDetailModal.tsx
@@ -312,8 +312,8 @@ export default function UserDetailModal({ isOpen, onClose, userId, onUserUpdated
                               </label>
                               <Listbox value={selectedStatus} onChange={handleStatusChange} disabled={saving}>
                                 <div className="relative">
-                                  <Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white py-2.5 pl-3 pr-10 text-left border border-gray-300 hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed">
-                                    <span className="block truncate font-medium">
+                                  <Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white py-2.5 pl-3 pr-10 text-left border border-gray-300 hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-black">
+                                    <span className="block truncate font-medium text-black">
                                       {STATUS_OPTIONS.find(opt => opt.value === selectedStatus)?.label || selectedStatus}
                                     </span>
                                     <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -362,10 +362,18 @@ export default function UserDetailModal({ isOpen, onClose, userId, onUserUpdated
                               <label className="block text-sm font-medium text-gray-700 mb-2">
                                 Admin Verification
                               </label>
+                              {userDetails?.userStatus && (
+                                <p className="text-xs text-gray-500 mb-2">
+                                  {userDetails.userStatus.email_verified === 1 && userDetails.userStatus.profile_completed === 1 && userDetails.userStatus.documents_uploaded === 1 && userDetails.userStatus.contract_signed === 1
+                                    ? 'All steps completed. You can verify this user.'
+                                    : 'User has not yet completed all required steps.'}
+                                </p>
+                              )}
                               <button
                                 type="button"
                                 onClick={handleToggleAdminVerification}
-                                disabled={saving}
+                                disabled={saving || !(userDetails?.userStatus && userDetails.userStatus.email_verified === 1 && userDetails.userStatus.profile_completed === 1 && userDetails.userStatus.documents_uploaded === 1 && userDetails.userStatus.contract_signed === 1)}
+                                title={!(userDetails?.userStatus && userDetails.userStatus.email_verified === 1 && userDetails.userStatus.profile_completed === 1 && userDetails.userStatus.documents_uploaded === 1 && userDetails.userStatus.contract_signed === 1) ? 'Complete all steps before admin verification' : undefined}
                                 className={`w-full inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${
                                   userDetails.userStatus?.is_admin_verified === 1
                                     ? 'bg-amber-600 hover:bg-amber-500 text-white focus-visible:outline-amber-600'