Add email verification and failed email detection with detailed error display

backend/routers/email.py

@@ -41,10 +41,22 @@ async def get_email_config():
 
 @router.get("/progress/{job_id}")
 async def get_email_progress(job_id: str):
-    """Return the current progress of an email sending job"""
+    """Return the current progress of an email sending job with detailed failure info"""
     if job_id not in email_progress:
         raise HTTPException(status_code=404, detail="Job not found")
-    return email_progress[job_id]
+    
+    progress = email_progress[job_id]
+    
+    # Return detailed progress including failed email details
+    return {
+        "total": progress["total"],
+        "sent": progress["sent"],
+        "failed": progress["failed"],
+        "status": progress["status"],
+        "failed_emails": progress.get("failed_emails", []),  # List of {email, name, error}
+        "success_emails": progress.get("success_emails", [])  # List of emails sent successfully
+    }
+
 
 def send_email_task(
     job_id,
@@ -134,21 +146,55 @@ def send_email_task(
         print(f"Sending email to {email} via SendGrid...")
         sg = SendGridAPIClient(api_key)
         response = sg.send(message)
-        print(f"Sent to {email}: Status {response.status_code}")
+        status_code = response.status_code
+        print(f"Sent to {email}: Status {status_code}")
         
-        # Update progress
-        if job_id in email_progress:
-            email_progress[job_id]["sent"] += 1
+        # Check if email was actually sent successfully (2xx status codes)
+        if status_code >= 200 and status_code < 300:
+            # Update progress - successful
+            if job_id in email_progress:
+                email_progress[job_id]["sent"] += 1
+                # Track successful email
+                if "success_emails" not in email_progress[job_id]:
+                    email_progress[job_id]["success_emails"] = []
+                email_progress[job_id]["success_emails"].append({
+                    "email": email,
+                    "name": name,
+                    "status_code": status_code
+                })
+        else:
+            # Non-2xx status code - treat as failure
+            print(f"SendGrid returned non-success status {status_code} for {email}")
+            if job_id in email_progress:
+                email_progress[job_id]["sent"] += 1
+                email_progress[job_id]["failed"] += 1
+                if "failed_emails" not in email_progress[job_id]:
+                    email_progress[job_id]["failed_emails"] = []
+                email_progress[job_id]["failed_emails"].append({
+                    "email": email,
+                    "name": name,
+                    "error": f"SendGrid status code: {status_code}"
+                })
         
     except Exception as e:
-        print(f"Failed to send to {email}: {e}")
+        error_message = str(e)
+        print(f"Failed to send to {email}: {error_message}")
         import traceback
         traceback.print_exc()
         
-        # Update progress even on failure
+        # Update progress with detailed failure info
         if job_id in email_progress:
             email_progress[job_id]["sent"] += 1
             email_progress[job_id]["failed"] += 1
+            # Track failed email with error details
+            if "failed_emails" not in email_progress[job_id]:
+                email_progress[job_id]["failed_emails"] = []
+            email_progress[job_id]["failed_emails"].append({
+                "email": email,
+                "name": name,
+                "error": error_message
+            })
+
 
 @router.post("/send")
 async def send_emails(

frontend/src/components/ReviewSendStep.jsx

@@ -14,6 +14,7 @@ const ReviewSendStep = ({ fileData, designParams, mappings, onBack }) => {
     const [status, setStatus] = useState(null);
     const [progress, setProgress] = useState(null);
     const [jobId, setJobId] = useState(null);
+    const [failedEmails, setFailedEmails] = useState([]);  // Store failed email details
 
     // Fetch email configuration on mount
     useEffect(() => {
@@ -67,7 +68,17 @@ const ReviewSendStep = ({ fileData, designParams, mappings, onBack }) => {
                     if (progressData.sent >= progressData.total) {
                         clearInterval(pollInterval);
                         setSending(false);
-                        setStatus({ type: 'success', msg: `Successfully sent ${progressData.sent - progressData.failed} emails! ${progressData.failed > 0 ? `(${progressData.failed} failed)` : ''}` });
+
+                        // Store failed emails for display
+                        if (progressData.failed_emails && progressData.failed_emails.length > 0) {
+                            setFailedEmails(progressData.failed_emails);
+                        }
+
+                        const successCount = progressData.sent - progressData.failed;
+                        setStatus({
+                            type: progressData.failed > 0 ? 'warning' : 'success',
+                            msg: `Successfully sent ${successCount} emails!${progressData.failed > 0 ? ` (${progressData.failed} failed)` : ''}`
+                        });
                         setProgress(null);
                     }
                 } catch (pollError) {
@@ -291,12 +302,40 @@ const ReviewSendStep = ({ fileData, designParams, mappings, onBack }) => {
                             animate={{ opacity: 1, y: 0 }}
                             className={`p-4 rounded-lg border text-center ${status.type === 'success'
                                 ? 'bg-green-50 border-green-200 text-green-700'
-                                : 'bg-red-50 border-red-200 text-red-700'
+                                : status.type === 'warning'
+                                    ? 'bg-yellow-50 border-yellow-200 text-yellow-700'
+                                    : 'bg-red-50 border-red-200 text-red-700'
                                 }`}
                         >
                             {status.msg}
                         </motion.div>
                     )}
+
+                    {/* Failed Emails Details */}
+                    {failedEmails.length > 0 && (
+                        <motion.div
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            className="bg-red-50 border border-red-200 p-6 rounded-lg"
+                        >
+                            <h4 className="text-sm font-semibold text-red-800 mb-3 flex items-center">
+                                ⚠️ Failed Emails ({failedEmails.length})
+                            </h4>
+                            <div className="max-h-48 overflow-y-auto space-y-2">
+                                {failedEmails.map((failed, index) => (
+                                    <div key={index} className="bg-white rounded p-3 border border-red-100">
+                                        <div className="flex justify-between items-start">
+                                            <div>
+                                                <p className="text-sm font-medium text-gray-900">{failed.name}</p>
+                                                <p className="text-xs text-gray-600">{failed.email}</p>
+                                            </div>
+                                        </div>
+                                        <p className="text-xs text-red-600 mt-1 font-mono">{failed.error}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        </motion.div>
+                    )}
                 </div>
             </div>