Add customizable sender name for emails - shows in recipient inbox instead of default

backend/routers/email.py

@@ -233,6 +233,7 @@ async def send_emails(
     event_name: str = Form(""),
     event_date: str = Form(""),
     client_company: str = Form(""),
+    sender_name: str = Form("Volaris Team"),  # Custom sender name for email display
     name_color: str = Form("#000000"),
     font_size: int = Form(60),
     x: float = Form(None),
@@ -282,7 +283,7 @@ async def send_emails(
             template_bytes,
             subject,
             body,
-            FROM_EMAIL,
+            f"{sender_name} <{FROM_EMAIL}>" if sender_name else FROM_EMAIL,  # Format as "Name <email>"
             SENDGRID_API_KEY,
             name_column,
             email_column,

frontend/src/components/ReviewSendStep.jsx

@@ -10,6 +10,7 @@ const ReviewSendStep = ({ fileData, designParams, mappings, onBack }) => {
     const [subject, setSubject] = useState("Your Attendance Certificate - {event_name}_{event_date}");
     const [body, setBody] = useState("Dear Dr {first_name},\n\nThank you for attending {event_name}.\n\nYour certificate is attached.\n\nBest Regards,\n\nVolaris Team on behalf of {client_company}");
     const [fromEmail, setFromEmail] = useState("");
+    const [senderName, setSenderName] = useState("Volaris Team");
     const [sending, setSending] = useState(false);
     const [status, setStatus] = useState(null);
     const [progress, setProgress] = useState(null);
@@ -44,6 +45,7 @@ const ReviewSendStep = ({ fileData, designParams, mappings, onBack }) => {
         formData.append("event_name", eventName);
         formData.append("event_date", eventDate);
         formData.append("client_company", clientCompany);
+        formData.append("sender_name", senderName);
 
         formData.append("name_color", designParams.name_color);
         formData.append("font_size", designParams.font_size);
@@ -175,6 +177,17 @@ const ReviewSendStep = ({ fileData, designParams, mappings, onBack }) => {
                         </h3>
 
                         <div className="space-y-4">
+                            <div>
+                                <label className="block text-xs font-medium text-gray-700 mb-1">Sender Name</label>
+                                <input
+                                    type="text"
+                                    className="w-full border border-gray-300 rounded-lg p-3 text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
+                                    placeholder="e.g., Volaris Team"
+                                    value={senderName}
+                                    onChange={(e) => setSenderName(e.target.value)}
+                                />
+                                <p className="text-xs text-gray-500 mt-1">This name appears in the recipient's inbox</p>
+                            </div>
                             <div>
                                 <label className="block text-xs font-medium text-gray-700 mb-1">Sender Email</label>
                                 <div className="w-full border border-gray-200 rounded-lg p-3 bg-gray-50 text-gray-700 font-medium">