feat: add subscription status display and approval confirmation modal for unpaid agents

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

@@ -39,6 +39,12 @@ export default function UserDetailPage() {
   const [verificationHistory, setVerificationHistory] = useState<VerificationHistoryEntry[]>([]);
   const [agentFieldValues, setAgentFieldValues] = useState<AgentFieldValue[]>([]);
   const [isTogglingStatus, setIsTogglingStatus] = useState(false);
+  const [pendingApprovalConfirm, setPendingApprovalConfirm] = useState(false);
+
+  // Is the agent subscription active (paid)?
+  const PAID_STATUSES = new Set(['ACTIVE', 'TRIALING', 'PAST_DUE']);
+  const isSubscriptionActive = (status?: string | null) =>
+    !!status && PAID_STATUSES.has(status.toUpperCase());
 
   // Helper function to check if avatar is an S3 key
   const isS3Key = (avatar: string | null | undefined): boolean => {
@@ -183,9 +189,23 @@ export default function UserDetailPage() {
     }
   };
 
-  const handleVerification = async (status: VerificationStatus) => {
+  const handleVerification = async (
+    status: VerificationStatus,
+    opts?: { skipPaymentCheck?: boolean },
+  ) => {
     if (!user) return;
 
+    // Guard: approving a user without active subscription requires extra confirmation
+    if (
+      status === 'APPROVED' &&
+      !opts?.skipPaymentCheck &&
+      !isSubscriptionActive(user.agentProfile?.subscriptionStatus)
+    ) {
+      setPendingApprovalConfirm(true);
+      return;
+    }
+
+    setPendingApprovalConfirm(false);
     setIsUpdatingVerification(true);
     setError('');
     setUpdateSuccess('');
@@ -525,6 +545,29 @@ export default function UserDetailPage() {
             </div>
           </div>
           <div className="p-6">
+            {/* Payment / subscription status */}
+            <div className="mb-4 flex items-center justify-between p-3 rounded-lg border"
+              style={{
+                backgroundColor: isSubscriptionActive(user.agentProfile.subscriptionStatus) ? '#f0fdf4' : '#fef2f2',
+                borderColor: isSubscriptionActive(user.agentProfile.subscriptionStatus) ? '#bbf7d0' : '#fecaca',
+              }}>
+              <div>
+                <p className="text-sm font-medium text-gray-900">Payment Status</p>
+                <p className="text-xs text-gray-600 mt-0.5">
+                  {user.agentProfile.subscriptionStatus || 'No subscription'}
+                </p>
+              </div>
+              {isSubscriptionActive(user.agentProfile.subscriptionStatus) ? (
+                <span className="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
+                  Paid
+                </span>
+              ) : (
+                <span className="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
+                  Not Paid
+                </span>
+              )}
+            </div>
+
             {/* Verification Info */}
             {user.agentProfile.isVerified && user.agentProfile.verifiedAt && (
               <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
@@ -805,6 +848,45 @@ export default function UserDetailPage() {
           </div>
         </div>
       )}
+
+      {/* Approve-without-payment confirmation modal */}
+      {pendingApprovalConfirm && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">Approve Without Payment?</h3>
+            </div>
+            <div className="px-6 py-4 space-y-3">
+              <p className="text-sm text-gray-700">
+                This user has <span className="font-semibold text-red-700">not paid</span> for a subscription.
+              </p>
+              <p className="text-sm text-gray-600">
+                Approving will mark the profile as verified and it will be visible in
+                public search results. Payment is not required for visibility.
+              </p>
+              <p className="text-sm text-gray-600">
+                Are you sure you want to approve this profile anyway?
+              </p>
+            </div>
+            <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
+              <button
+                onClick={() => setPendingApprovalConfirm(false)}
+                disabled={isUpdatingVerification}
+                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => handleVerification('APPROVED', { skipPaymentCheck: true })}
+                disabled={isUpdatingVerification}
+                className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg transition-colors disabled:opacity-50"
+              >
+                {isUpdatingVerification ? 'Approving...' : 'Approve Anyway'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/services/users.service.ts

@@ -40,6 +40,8 @@ export interface AgentProfileDetails {
   // Stats
   averageRating?: number | null;
   totalReviews?: number | null;
+  // Subscription / payment status (denormalized from AgentSubscription)
+  subscriptionStatus?: string | null;
 }
 
 export interface User {