Seazn/profit-planet-frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: enhance user status display and button accessibility in UserDetailModal

Browse Source
This commit is contained in:
seaznCode 2025-11-30 13:30:16 +01:00
parent e261baa7ed
commit 01ce0f5346
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/components/UserDetailModal.tsx
View File

@ -312,8 +312,8 @@ export default function UserDetailModal({ isOpen, onClose, userId, onUserUpdated
</label> </label>
<Listbox value={selectedStatus} onChange={handleStatusChange} disabled={saving}> <Listbox value={selectedStatus} onChange={handleStatusChange} disabled={saving}>
<div className="relative"> <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"> <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"> <span className="block truncate font-medium text-black">
{STATUS_OPTIONS.find(opt => opt.value === selectedStatus)?.label || selectedStatus} {STATUS_OPTIONS.find(opt => opt.value === selectedStatus)?.label || selectedStatus}
</span> </span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> <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"> <label className="block text-sm font-medium text-gray-700 mb-2">
Admin Verification Admin Verification
</label> </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 <button
type="button" type="button"
onClick={handleToggleAdminVerification} 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 ${ 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 userDetails.userStatus?.is_admin_verified === 1
? 'bg-amber-600 hover:bg-amber-500 text-white focus-visible:outline-amber-600' ? 'bg-amber-600 hover:bg-amber-500 text-white focus-visible:outline-amber-600'