Initial commit: Certificate Generator App with FastAPI and React

.devcontainer/devcontainer.json

@@ -0,0 +1,33 @@
+{
+  "name": "Python 3",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
+  "customizations": {
+    "codespaces": {
+      "openFiles": [
+        "README.md",
+        "app.py"
+      ]
+    },
+    "vscode": {
+      "settings": {},
+      "extensions": [
+        "ms-python.python",
+        "ms-python.vscode-pylance"
+      ]
+    }
+  },
+  "updateContentCommand": "[ -f packages.txt ] && sudo apt update && sudo apt upgrade -y && sudo xargs apt install -y <packages.txt; [ -f requirements.txt ] && pip3 install --user -r requirements.txt; pip3 install --user streamlit; echo '✅ Packages installed and Requirements met'",
+  "postAttachCommand": {
+    "server": "streamlit run app.py --server.enableCORS false --server.enableXsrfProtection false"
+  },
+  "portsAttributes": {
+    "8501": {
+      "label": "Application",
+      "onAutoForward": "openPreview"
+    }
+  },
+  "forwardPorts": [
+    8501
+  ]
+}

.env.example

@@ -0,0 +1,2 @@
+SENDGRID_API_KEY=your_sendgrid_api_key_here
+MAIL_FROM_ADDRESS=your_email@example.com

.gitignore

@@ -0,0 +1,38 @@
+# Environment variables (IMPORTANT: Contains API keys)
+.env
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+venv/
+certappvenv/
+ENV/
+*.egg-info/
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+dist/
+build/
+
+# Uploads (certificate templates and data)
+uploads/
+output/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+.DS_Store
+
+# Temporary files
+temp_*.pdf
+*.tmp

README.md

@@ -0,0 +1,94 @@
+# Certificate Generator App
+
+A professional certificate generation and email distribution system built with FastAPI and React.
+
+## Features
+
+- 📝 **Dynamic Certificate Generation**: Create personalized certificates from PDF templates
+- 📧 **Bulk Email Sending**: Send certificates to multiple recipients via SendGrid
+- 🎨 **Custom Fonts**: Support for TTF font files
+- 📊 **Real-time Progress**: Live progress tracking for email campaigns
+- 🔒 **Secure**: Environment-based credential management
+
+## Tech Stack
+
+- **Backend**: FastAPI, Python, PyMuPDF, SendGrid
+- **Frontend**: React, Vite, TailwindCSS, Framer Motion
+- **Database**: In-memory (for progress tracking)
+
+## Getting Started
+
+### Prerequisites
+
+- Python 3.8+
+- Node.js 16+
+- SendGrid API Key
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/saifisvibinn/Cert_Web_App_Volaris.git
+cd Cert_Web_App_Volaris
+```
+
+2. Set up the backend:
+```bash
+# Create virtual environment
+python -m venv certappvenv
+certappvenv\Scripts\activate  # Windows
+# source certappvenv/bin/activate  # macOS/Linux
+
+# Install dependencies
+pip install -r requirements.txt
+```
+
+3. Set up the frontend:
+```bash
+cd frontend
+npm install
+```
+
+4. Configure environment variables:
+Create a `.env` file in the root directory:
+```
+SENDGRID_API_KEY=your_sendgrid_api_key
+MAIL_FROM_ADDRESS=your_verified_sender@domain.com
+```
+
+### Running Locally
+
+1. Start the backend:
+```bash
+uvicorn backend.main:app --reload
+```
+
+2. Start the frontend (in a new terminal):
+```bash
+cd frontend
+npm run dev
+```
+
+3. Open http://localhost:5173 in your browser
+
+## Usage
+
+1. **Upload Files**: Upload your Excel file (with Name and Email columns) and PDF certificate template
+2. **Design**: Position the name text on the certificate and customize styling
+3. **Configure**: Fill in event details (name, date, company) for email templates
+4. **Send**: Monitor real-time progress as certificates are generated and emailed
+
+## Environment Variables
+
+| Variable | Description |
+|----------|-------------|
+| `SENDGRID_API_KEY` | Your SendGrid API key |
+| `MAIL_FROM_ADDRESS` | Verified sender email address |
+
+## Deployment
+
+See [deployment_guide.md](deployment_guide.md) for deployment instructions.
+
+## License
+
+MIT

backend/main.py

@@ -0,0 +1,43 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+import os
+from dotenv import load_dotenv
+
+# Load environment variables BEFORE importing routers that need them
+load_dotenv()
+
+# Debug: verify environment variables are loaded
+print(f"DEBUG: SENDGRID_API_KEY loaded: {bool(os.getenv('SENDGRID_API_KEY'))}")
+print(f"DEBUG: MAIL_FROM_ADDRESS loaded: {os.getenv('MAIL_FROM_ADDRESS')}")
+
+# Import routers AFTER loading environment variables
+from backend.routers import certificates, email
+
+app = FastAPI(title="Certificate Generator API")
+
+# CORS Configuration
+origins = [
+    "http://localhost:5173",  # Vite default port
+    "http://localhost:5174",  # Vite fallback port
+    "http://localhost:5175",
+    "http://localhost:3000",
+]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Include Routers
+app.include_router(certificates.router, prefix="/api/certificates", tags=["certificates"])
+app.include_router(email.router, prefix="/api/email", tags=["email"])
+
+@app.get("/")
+def read_root():
+    return {"message": "Certificate Generator API is running"}
+
+# Ensure output directory exists
+os.makedirs("output", exist_ok=True)

backend/requirements.txt

@@ -0,0 +1,8 @@
+fastapi
+uvicorn
+python-multipart
+pandas
+openpyxl
+pymupdf
+sendgrid
+python-dotenv

backend/routers/certificates.py

@@ -0,0 +1,139 @@
+from fastapi import APIRouter, UploadFile, File, Form, HTTPException
+from fastapi.responses import Response, FileResponse
+from backend.utils.pdf_generator import generate_certificate_pdf, get_pdf_preview_image
+import shutil
+import os
+import pandas as pd
+import zipfile
+from io import BytesIO
+
+router = APIRouter()
+
+# In-memory storage for simplicity (in a real app, use a DB or temporary file storage with IDs)
+# For this single-user local app, we can store the latest uploaded files in a specific location.
+UPLOAD_DIR = "uploads"
+os.makedirs(UPLOAD_DIR, exist_ok=True)
+
+@router.post("/upload")
+async def upload_files(
+    excel_file: UploadFile = File(...),
+    pdf_file: UploadFile = File(...)
+):
+    try:
+        # Save Excel
+        excel_path = os.path.join(UPLOAD_DIR, "data.xlsx")
+        with open(excel_path, "wb") as f:
+            shutil.copyfileobj(excel_file.file, f)
+            
+        # Save PDF
+        pdf_path = os.path.join(UPLOAD_DIR, "template.pdf")
+        with open(pdf_path, "wb") as f:
+            shutil.copyfileobj(pdf_file.file, f)
+            
+        # Parse Excel to get columns and preview data
+        df = pd.read_excel(excel_path)
+        columns = df.columns.tolist()
+        preview_data = df.head().to_dict(orient="records")
+        
+        return {
+            "message": "Files uploaded successfully",
+            "columns": columns,
+            "preview_data": preview_data,
+            "total_rows": len(df)
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.post("/preview")
+async def preview_certificate(
+    name: str = Form(...),
+    name_color: str = Form("#000000"),
+    font_size: int = Form(60),
+    x: float = Form(None),
+    y: float = Form(None),
+    fontname: str = Form("helv")
+):
+    pdf_path = os.path.join(UPLOAD_DIR, "template.pdf")
+    font_path = os.path.join("backend", "fonts", "custom_font.ttf")
+    
+    if not os.path.exists(pdf_path):
+        raise HTTPException(status_code=400, detail="Template not found. Please upload files first.")
+    
+    try:
+        with open(pdf_path, "rb") as f:
+            template_bytes = f.read()
+            
+        print(f"Generating preview for name: '{name}', font: {fontname}, file: {font_path}")
+        img_bytes = get_pdf_preview_image(
+            template_bytes, 
+            name=name, 
+            name_color_hex=name_color, 
+            font_size=font_size, 
+            x=x if x is not None else None, 
+            y=y if y is not None else None,
+            fontname=fontname,
+            fontfile=font_path if os.path.exists(font_path) else None
+        )
+        print(f"Preview generated, size: {len(img_bytes)} bytes")
+        return Response(content=img_bytes, media_type="image/png")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.post("/generate")
+async def generate_certificates(
+    name_column: str = Form(...),
+    email_column: str = Form(...),
+    name_color: str = Form("#000000"),
+    font_size: int = Form(60),
+    x: float = Form(None),
+    y: float = Form(None),
+    fontname: str = Form("helv")
+):
+    excel_path = os.path.join(UPLOAD_DIR, "data.xlsx")
+    pdf_path = os.path.join(UPLOAD_DIR, "template.pdf")
+    font_path = os.path.join("backend", "fonts", "custom_font.ttf")
+    
+    if not os.path.exists(excel_path) or not os.path.exists(pdf_path):
+        raise HTTPException(status_code=400, detail="Files not found.")
+        
+    try:
+        df = pd.read_excel(excel_path)
+        with open(pdf_path, "rb") as f:
+            template_bytes = f.read()
+            
+        output_zip_buffer = BytesIO()
+        
+        with zipfile.ZipFile(output_zip_buffer, "w", zipfile.ZIP_DEFLATED) as zipf:
+            for index, row in df.iterrows():
+                name = str(row.get(name_column, ""))
+                if not name: continue
+                
+                # Generate individual PDF in memory (or temp file)
+                # For simplicity, we'll use a temp file
+                temp_filename = f"temp_{index}.pdf"
+                generate_certificate_pdf(
+                    name, 
+                    template_bytes, 
+                    temp_filename, 
+                    name_color_hex=name_color, 
+                    font_size=font_size, 
+                    x=x if x is not None else None, 
+                    y=y if y is not None else None,
+                    fontname=fontname,
+                    fontfile=font_path if os.path.exists(font_path) else None
+                )
+                
+                # Add to zip
+                zipf.write(temp_filename, arcname=f"{name}.pdf")
+                os.remove(temp_filename)
+                
+        output_zip_buffer.seek(0)
+        
+        return Response(
+            content=output_zip_buffer.getvalue(),
+            media_type="application/zip",
+            headers={"Content-Disposition": "attachment; filename=certificates.zip"}
+        )
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

backend/routers/email.py

@@ -0,0 +1,234 @@
+from fastapi import APIRouter, HTTPException, Form, BackgroundTasks
+from pydantic import BaseModel, EmailStr
+from typing import List
+import os
+import pandas as pd
+from sendgrid import SendGridAPIClient
+from sendgrid.helpers.mail import Mail, Attachment, FileContent, FileName, FileType, Disposition
+import base64
+import uuid
+from backend.utils.pdf_generator import generate_certificate_pdf
+
+router = APIRouter()
+
+# Get credentials from environment variables
+SENDGRID_API_KEY = os.getenv('SENDGRID_API_KEY', '')
+FROM_EMAIL = os.getenv('MAIL_FROM_ADDRESS', '')
+
+class EmailRequest(BaseModel):
+    subject: str
+    body: str
+    sendgrid_api_key: str
+    from_email: str
+    name_column: str
+    email_column: str
+    # Design params
+    name_color: str = "#000000"
+    font_size: int = 60
+    x: float = None
+    y: float = None
+    fontname: str = "helv"
+
+UPLOAD_DIR = "uploads"
+
+# In-memory progress tracking
+email_progress = {}
+
+@router.get("/config")
+async def get_email_config():
+    """Return the configured from email address for display in UI"""
+    return {"from_email": FROM_EMAIL}
+
+@router.get("/progress/{job_id}")
+async def get_email_progress(job_id: str):
+    """Return the current progress of an email sending job"""
+    if job_id not in email_progress:
+        raise HTTPException(status_code=404, detail="Job not found")
+    return email_progress[job_id]
+
+def send_email_task(
+    job_id,
+    row, 
+    template_bytes, 
+    subject_template, 
+    body_template, 
+    from_email, 
+    api_key, 
+    name_col, 
+    email_col,
+    design_params,
+    event_name="",
+    event_date="",
+    client_company="",
+    fontfile=None
+):
+    name = str(row.get(name_col, "")).strip()
+    email = str(row.get(email_col, "")).strip()
+    
+    # Log the extraction for debugging
+    print(f"Processing Row: {row.to_dict()}")
+    print(f"Extracted Name: '{name}' (from col '{name_col}')")
+    print(f"Extracted Email: '{email}' (from col '{email_col}')")
+    
+    if not name or not email:
+        print(f"Skipping row with missing name or email")
+        return
+
+    print(f"Starting email task for: {name} ({email})")
+    try:
+        # Generate PDF
+        temp_pdf = f"temp_send_{name}.pdf"
+        generate_certificate_pdf(
+            name, 
+            template_bytes, 
+            temp_pdf, 
+            name_color_hex=design_params['name_color'],
+            font_size=design_params['font_size'],
+            x=design_params['x'],
+            y=design_params['y'],
+            fontname=design_params['fontname'],
+            fontfile=fontfile
+        )
+        print(f"PDF generated for {name}")
+        
+        with open(temp_pdf, "rb") as f:
+            pdf_data = f.read()
+        encoded_pdf = base64.b64encode(pdf_data).decode()
+        os.remove(temp_pdf)
+        
+        # Prepare Email
+        first_name = name.split()[0]
+        formatted_subject = subject_template.format(
+            first_name=first_name, 
+            name=name,
+            event_name=event_name,
+            event_date=event_date,
+            client_company=client_company
+        )
+        formatted_body = body_template.format(
+            first_name=first_name, 
+            name=name,
+            event_name=event_name,
+            event_date=event_date,
+            client_company=client_company
+        )
+        
+        # Convert newlines to HTML breaks for proper email formatting
+        formatted_body_html = formatted_body.replace('\n', '<br>')
+        
+        message = Mail(
+            from_email=from_email,
+            to_emails=email,
+            subject=formatted_subject,
+            html_content=formatted_body_html
+        )
+        
+        attachment = Attachment(
+            FileContent(encoded_pdf),
+            FileName(f"{name}.pdf"),
+            FileType("application/pdf"),
+            Disposition("attachment")
+        )
+        message.attachment = attachment
+        
+        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}")
+        
+        # Update progress
+        if job_id in email_progress:
+            email_progress[job_id]["sent"] += 1
+        
+    except Exception as e:
+        print(f"Failed to send to {email}: {e}")
+        import traceback
+        traceback.print_exc()
+        
+        # Update progress even on failure
+        if job_id in email_progress:
+            email_progress[job_id]["sent"] += 1
+            email_progress[job_id]["failed"] += 1
+
+@router.post("/send")
+async def send_emails(
+    background_tasks: BackgroundTasks,
+    subject: str = Form(...),
+    body: str = Form(...),
+    name_column: str = Form(...),
+    email_column: str = Form(...),
+    event_name: str = Form(""),
+    event_date: str = Form(""),
+    client_company: str = Form(""),
+    name_color: str = Form("#000000"),
+    font_size: int = Form(60),
+    x: float = Form(None),
+    y: float = Form(None),
+    fontname: str = Form("helv")
+):
+    # Use environment variables for sensitive credentials
+    if not SENDGRID_API_KEY or not FROM_EMAIL:
+        raise HTTPException(
+            status_code=500, 
+            detail="SendGrid credentials not configured. Please check environment variables."
+        )
+    excel_path = os.path.join(UPLOAD_DIR, "data.xlsx")
+    pdf_path = os.path.join(UPLOAD_DIR, "template.pdf")
+    font_path = os.path.join("backend", "fonts", "custom_font.ttf")
+    
+    if not os.path.exists(excel_path) or not os.path.exists(pdf_path):
+        raise HTTPException(status_code=400, detail="Files not found.")
+
+    df = pd.read_excel(excel_path)
+    with open(pdf_path, "rb") as f:
+        template_bytes = f.read()
+        
+    design_params = {
+        "name_color": name_color,
+        "font_size": font_size,
+        "x": x if x is not None else None,
+        "y": y if y is not None else None,
+        "fontname": fontname
+    }
+
+    # Generate unique job ID for progress tracking
+    job_id = str(uuid.uuid4())
+    email_progress[job_id] = {
+        "total": len(df),
+        "sent": 0,
+        "failed": 0,
+        "status": "processing"
+    }
+    
+    count = 0
+    for _, row in df.iterrows():
+        background_tasks.add_task(
+            send_email_task,
+            job_id,
+            row,
+            template_bytes,
+            subject,
+            body,
+            FROM_EMAIL,
+            SENDGRID_API_KEY,
+            name_column,
+            email_column,
+            design_params,
+            event_name,
+            event_date,
+            client_company,
+            fontfile=font_path if os.path.exists(font_path) else None
+        )
+        count += 1
+    
+    # Mark job as complete after all tasks are queued
+    def mark_complete():
+        if job_id in email_progress:
+            email_progress[job_id]["status"] = "completed"
+    
+    background_tasks.add_task(mark_complete)
+        
+    return {
+        "message": f"Successfully started sending process for {count} emails. Check your inbox!",
+        "job_id": job_id
+    }

backend/utils/pdf_generator.py

@@ -0,0 +1,263 @@
+import fitz
+import os
+
+def hex_to_rgb(hex_color):
+    hex_color = hex_color.lstrip('#')
+    return tuple(int(hex_color[i:i+2], 16)/255 for i in (0, 2, 4))
+
+def generate_certificate_pdf(name, template_bytes, output_path, name_color_hex="#000000", font_size=60, x=None, y=None, fontname="helv", fontfile=None):
+    """
+    Generates a certificate PDF by overlaying text.
+    If x and y are provided, uses those coordinates.
+    Otherwise, searches for <fullName> placeholder.
+    """
+    doc = fitz.open(stream=template_bytes, filetype="pdf")
+    name_color = hex_to_rgb(name_color_hex)
+    
+    for page in doc:
+        target_x, target_y = x, y
+        
+        # If no manual coordinates, try to find placeholder
+        if target_x is None or target_y is None:
+            found = False
+            for inst in page.search_for("<fullName>"):
+                rect = fitz.Rect(inst)
+                # Calculate center of the placeholder
+                name_width = fitz.get_text_length(name, fontsize=font_size, fontname=fontname, fontfile=fontfile)
+                target_x = rect.x0 + (rect.width - name_width) / 2
+                # For Y: use baseline position (rect.y1 is bottom of box)
+                target_y = rect.y0 + rect.height / 2 + font_size / 3
+                found = True
+                break
+            
+            if not found:
+                # Fallback default if nothing found and no coordinates
+                page_width = page.rect.width
+                page_height = page.rect.height
+                rect_width = int(page_width * 0.6)
+                x0_default = int((page_width - rect_width) / 2)
+                name_width = fitz.get_text_length(name, fontsize=font_size, fontname=fontname, fontfile=fontfile)
+                target_x = x0_default + (rect_width - name_width) / 2
+                # Place at 60% down the page
+                target_y = page_height * 0.6
+        
+        # Insert text (ensure coordinates are within page bounds)
+        if target_x is not None and target_y is not None:
+            # Calculate text dimensions for centering
+            if fontfile and os.path.exists(fontfile):
+                font = fitz.Font(fontfile=fontfile)
+            else:
+                font = fitz.Font(fontname)
+            name_width = font.text_length(name, fontsize=font_size)
+            
+            # Adjust x to center the text
+            insert_x = target_x - (name_width / 2)
+            
+            # Adjust y from center to baseline (approximate)
+            # Center is target_y. Baseline is typically target_y + font_size/3
+            insert_y = target_y + (font_size / 3)
+            
+            # Clamp coordinates to page bounds
+            page_rect = page.rect
+            insert_x = max(10, min(insert_x, page_rect.width - name_width - 10))
+            insert_y = max(font_size, min(insert_y, page_rect.height - 10))
+            
+            page.insert_text(
+                (insert_x, insert_y),
+                name,
+                fontsize=font_size,
+                color=name_color,
+                fontname=fontname,
+                fontfile=fontfile
+            )
+
+    doc.save(output_path)
+    doc.close()
+    return output_path
+
+def get_pdf_preview_image(template_bytes, name="Sample Name", name_color_hex="#000000", font_size=60, x=None, y=None, fontname="helv", fontfile=None):
+    """
+    Generates a preview image (PNG) of the first page of the certificate.
+    Returns bytes of the PNG image.
+    """
+    doc = fitz.open(stream=template_bytes, filetype="pdf")
+    name_color = hex_to_rgb(name_color_hex)
+    page = doc[0] # Preview only first page
+    
+    target_x, target_y = x, y
+    
+    # Logic similar to generation, but just for one page and return image
+    if target_x is None or target_y is None:
+        found = False
+        for inst in page.search_for("<fullName>"):
+            rect = fitz.Rect(inst)
+            name_width = fitz.get_text_length(name, fontsize=font_size, fontname=fontname, fontfile=fontfile)
+            target_x = rect.x0 + (rect.width - name_width) / 2
+            target_y = rect.y0 + rect.height / 2 + font_size / 3
+            found = True
+            break
+        
+        if not found:
+            page_width = page.rect.width
+            page_height = page.rect.height
+            rect_width = int(page_width * 0.6)
+            x0_default = int((page_width - rect_width) / 2)
+            name_width = fitz.get_text_length(name, fontsize=font_size, fontname=fontname, fontfile=fontfile)
+            target_x = x0_default + (rect_width - name_width) / 2
+import fitz
+import os
+
+def hex_to_rgb(hex_color):
+    hex_color = hex_color.lstrip('#')
+    return tuple(int(hex_color[i:i+2], 16)/255 for i in (0, 2, 4))
+
+def generate_certificate_pdf(name, template_bytes, output_path, name_color_hex="#000000", font_size=60, x=None, y=None, fontname="helv", fontfile=None):
+    """
+    Generates a certificate PDF by overlaying text.
+    If x and y are provided, uses those coordinates.
+    Otherwise, searches for <fullName> placeholder.
+    """
+    doc = fitz.open(stream=template_bytes, filetype="pdf")
+    name_color = hex_to_rgb(name_color_hex)
+    
+    for page in doc:
+        target_x, target_y = x, y
+        
+        # If no manual coordinates, try to find placeholder
+        if target_x is None or target_y is None:
+            found = False
+            for inst in page.search_for("<fullName>"):
+                rect = fitz.Rect(inst)
+                # Calculate center of the placeholder
+                if fontfile and os.path.exists(fontfile):
+                    font = fitz.Font(fontfile=fontfile)
+                else:
+                    font = fitz.Font(fontname)
+                name_width = font.text_length(name, fontsize=font_size)
+                target_x = rect.x0 + (rect.width - name_width) / 2
+                # For Y: use baseline position (rect.y1 is bottom of box)
+                target_y = rect.y0 + rect.height / 2 + font_size / 3
+                found = True
+                break
+            
+            if not found:
+                # Fallback default if nothing found and no coordinates
+                page_width = page.rect.width
+                page_height = page.rect.height
+                rect_width = int(page_width * 0.6)
+                x0_default = int((page_width - rect_width) / 2)
+                if fontfile and os.path.exists(fontfile):
+                    font = fitz.Font(fontfile=fontfile)
+                else:
+                    font = fitz.Font(fontname)
+                name_width = font.text_length(name, fontsize=font_size)
+                target_x = x0_default + (rect_width - name_width) / 2
+                # Place at 60% down the page
+                target_y = page_height * 0.6
+        
+        # Insert text (ensure coordinates are within page bounds)
+        if target_x is not None and target_y is not None:
+            # Calculate text dimensions for centering
+            if fontfile and os.path.exists(fontfile):
+                font = fitz.Font(fontfile=fontfile)
+            else:
+                font = fitz.Font(fontname)
+            name_width = font.text_length(name, fontsize=font_size)
+            
+            # Adjust x to center the text
+            insert_x = target_x - (name_width / 2)
+            
+            # Adjust y from center to baseline (approximate)
+            # Center is target_y. Baseline is typically target_y + font_size/3
+            insert_y = target_y + (font_size / 3)
+            
+            # Clamp coordinates to page bounds
+            page_rect = page.rect
+            insert_x = max(10, min(insert_x, page_rect.width - name_width - 10))
+            insert_y = max(font_size, min(insert_y, page_rect.height - 10))
+            
+            page.insert_text(
+                (insert_x, insert_y),
+                name,
+                fontsize=font_size,
+                color=name_color,
+                fontname=fontname,
+                fontfile=fontfile
+            )
+
+    doc.save(output_path)
+    doc.close()
+    return output_path
+
+def get_pdf_preview_image(template_bytes, name="Sample Name", name_color_hex="#000000", font_size=60, x=None, y=None, fontname="helv", fontfile=None):
+    """
+    Generates a preview image (PNG) of the first page of the certificate.
+    Returns bytes of the PNG image.
+    """
+    doc = fitz.open(stream=template_bytes, filetype="pdf")
+    name_color = hex_to_rgb(name_color_hex)
+    page = doc[0] # Preview only first page
+    
+    target_x, target_y = x, y
+    
+    # Logic similar to generation, but just for one page and return image
+    if target_x is None or target_y is None:
+        found = False
+        for inst in page.search_for("<fullName>"):
+            rect = fitz.Rect(inst)
+            if fontfile and os.path.exists(fontfile):
+                font = fitz.Font(fontfile=fontfile)
+            else:
+                font = fitz.Font(fontname)
+            name_width = font.text_length(name, fontsize=font_size)
+            target_x = rect.x0 + (rect.width - name_width) / 2
+            target_y = rect.y0 + rect.height / 2 + font_size / 3
+            found = True
+            break
+        
+        if not found:
+            page_width = page.rect.width
+            page_height = page.rect.height
+            rect_width = int(page_width * 0.6)
+            x0_default = int((page_width - rect_width) / 2)
+            if fontfile and os.path.exists(fontfile):
+                font = fitz.Font(fontfile=fontfile)
+            else:
+                font = fitz.Font(fontname)
+            name_width = font.text_length(name, fontsize=font_size)
+            target_x = x0_default + (rect_width - name_width) / 2
+            target_y = page_height * 0.6
+
+    if target_x is not None and target_y is not None:
+        # Calculate text dimensions for centering
+        if fontfile and os.path.exists(fontfile):
+            font = fitz.Font(fontfile=fontfile)
+        else:
+            font = fitz.Font(fontname)
+        name_width = font.text_length(name, fontsize=font_size)
+        
+        # Adjust x to center the text
+        insert_x = target_x - (name_width / 2)
+        
+        # Adjust y from center to baseline (approximate)
+        # Center is target_y. Baseline is typically target_y + font_size/3
+        insert_y = target_y + (font_size / 3)
+        
+        # Clamp coordinates to page bounds
+        page_rect = page.rect
+        insert_x = max(10, min(insert_x, page_rect.width - name_width - 10))
+        insert_y = max(font_size, min(insert_y, page_rect.height - 10))
+        
+        page.insert_text(
+            (insert_x, insert_y),
+            name,
+            fontsize=font_size,
+            color=name_color,
+            fontname=fontname,
+            fontfile=fontfile
+        )
+    
+    pix = page.get_pixmap()
+    img_bytes = pix.tobytes("png")
+    doc.close()
+    return img_bytes

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "framer-motion": "^12.23.24",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-draggable": "^4.5.0",
+    "react-icons": "^5.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.18",
+    "vite": "^5.4.0"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.jsx

@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+import UploadStep from './components/UploadStep';
+import DesignStep from './components/DesignStep';
+import ReviewSendStep from './components/ReviewSendStep';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FaCheckCircle } from 'react-icons/fa';
+
+function App() {
+  const [step, setStep] = useState(1);
+  const [fileData, setFileData] = useState(null);
+  const [designParams, setDesignParams] = useState({
+    name_color: "#000000",
+    font_size: 60,
+    x: null,
+    y: null,
+    fontname: "helv"
+  });
+  const [mappings, setMappings] = useState({
+    name_column: "",
+    email_column: ""
+  });
+
+  const nextStep = () => setStep(step + 1);
+  const prevStep = () => setStep(step - 1);
+
+  const steps = [
+    { id: 1, title: "Upload" },
+    { id: 2, title: "Design" },
+    { id: 3, title: "Send" }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
+      {/* Header */}
+      <div className="bg-white border-b border-gray-200 shadow-sm">
+        <div className="max-w-6xl mx-auto px-6 py-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900">Certificate Manager</h1>
+              <p className="text-gray-600 mt-1">Professional certificate generation and distribution</p>
+            </div>
+            <div className="text-right">
+              <div className="text-sm text-gray-500">Step {step} of 3</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-6xl mx-auto px-6 py-8">
+        {/* Progress Steps */}
+        <div className="mb-10">
+          <div className="flex items-center justify-between">
+            {steps.map((s, index) => (
+              <React.Fragment key={s.id}>
+                <div className="flex flex-col items-center flex-1">
+                  <motion.div
+                    initial={false}
+                    animate={{
+                      scale: step === s.id ? 1.1 : 1
+                    }}
+                    className={`w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg transition-all duration-300 ${step > s.id
+                      ? 'bg-green-500 text-white shadow-lg'
+                      : step === s.id
+                        ? 'bg-blue-600 text-white shadow-lg shadow-blue-200'
+                        : 'bg-gray-200 text-gray-500'
+                      }`}
+                  >
+                    {step > s.id ? <FaCheckCircle className="text-2xl" /> : s.id}
+                  </motion.div>
+                  <div className={`mt-2 text-sm font-medium ${step >= s.id ? 'text-gray-900' : 'text-gray-500'
+                    }`}>
+                    {s.title}
+                  </div>
+                </div>
+                {index < steps.length - 1 && (
+                  <div className="flex-1 h-1 mx-4 mt-[-20px]">
+                    <div className={`h-full rounded transition-all duration-500 ${step > s.id ? 'bg-green-500' : 'bg-gray-200'
+                      }`}></div>
+                  </div>
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <motion.div
+          layout
+          className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"
+        >
+          <div className="p-10">
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={step}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -10 }}
+                transition={{ duration: 0.2 }}
+              >
+                {step === 1 && (
+                  <UploadStep
+                    onUploadSuccess={(data) => {
+                      setFileData(data);
+                      nextStep();
+                    }}
+                  />
+                )}
+
+                {step === 2 && (
+                  <DesignStep
+                    fileData={fileData}
+                    designParams={designParams}
+                    setDesignParams={setDesignParams}
+                    mappings={mappings}
+                    setMappings={setMappings}
+                    onNext={nextStep}
+                    onBack={prevStep}
+                  />
+                )}
+
+                {step === 3 && (
+                  <ReviewSendStep
+                    fileData={fileData}
+                    designParams={designParams}
+                    mappings={mappings}
+                    onBack={prevStep}
+                  />
+                )}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

frontend/src/components/DesignStep.jsx

@@ -0,0 +1,296 @@
+import React, { useState, useEffect, useRef } from 'react';
+import axios from 'axios';
+import { motion } from 'framer-motion';
+import { FaPalette, FaFont, FaArrowsAlt, FaChevronLeft, FaChevronRight, FaMousePointer } from 'react-icons/fa';
+
+const DesignStep = ({ fileData, designParams, setDesignParams, mappings, setMappings, onNext, onBack }) => {
+    const [previewImage, setPreviewImage] = useState(null);
+    const [loadingPreview, setLoadingPreview] = useState(false);
+    const [previewName, setPreviewName] = useState("Sample Name");
+    const [pdfSize, setPdfSize] = useState({ width: 595, height: 842 });
+    const imageRef = useRef(null);
+
+    // Fetch clean preview once on mount
+    useEffect(() => {
+        fetchCleanPreview();
+    }, []);
+
+    const fetchCleanPreview = async () => {
+        setLoadingPreview(true);
+        const formData = new FormData();
+        formData.append("name", " "); // Space for clean background (avoids empty string issues)
+        formData.append("name_color", "#000000");
+        formData.append("font_size", "60");
+        formData.append("fontname", "helv");
+
+        try {
+            const response = await axios.post("http://localhost:8000/api/certificates/preview", formData, {
+                responseType: 'blob'
+            });
+            const imageUrl = URL.createObjectURL(response.data);
+            setPreviewImage(imageUrl);
+        } catch (error) {
+            console.error("Error fetching preview:", error);
+            if (error.response) {
+                console.error("Response data:", error.response.data);
+                console.error("Response status:", error.response.status);
+            }
+        } finally {
+            setLoadingPreview(false);
+        }
+    };
+
+    const handleImageLoad = (e) => {
+        const img = e.target;
+        setPdfSize({ width: img.naturalWidth, height: img.naturalHeight });
+    };
+
+    const handleImageClick = (e) => {
+        if (!imageRef.current) return;
+        const rect = imageRef.current.getBoundingClientRect();
+        const clickX = e.clientX - rect.left;
+        const clickY = e.clientY - rect.top;
+        const scaleX = pdfSize.width / rect.width;
+        const scaleY = pdfSize.height / rect.height;
+        const pdfX = clickX * scaleX;
+        const pdfY = clickY * scaleY;
+        setDesignParams({ ...designParams, x: Math.round(pdfX), y: Math.round(pdfY) });
+    };
+
+    const handleKeyboardMove = (e) => {
+        if (!designParams.x && !designParams.y) return;
+        const stepX = e.shiftKey ? 60 : 30;
+        const stepY = e.shiftKey ? 40 : 20;
+        let newX = designParams.x || pdfSize.width / 2;
+        let newY = designParams.y || pdfSize.height / 2;
+
+        switch (e.key) {
+            case 'ArrowLeft': newX -= stepX; break;
+            case 'ArrowRight': newX += stepX; break;
+            case 'ArrowUp': newY -= stepY; break;
+            case 'ArrowDown': newY += stepY; break;
+            default: return;
+        }
+
+        e.preventDefault();
+        setDesignParams({ ...designParams, x: Math.round(newX), y: Math.round(newY) });
+    };
+
+    const InputGroup = ({ label, icon: Icon, children }) => (
+        <div className="bg-white border border-gray-200 p-5 rounded-lg shadow-sm">
+            <div className="flex items-center space-x-2 mb-4 text-blue-600">
+                <Icon className="text-lg" />
+                <span className="font-semibold text-sm uppercase tracking-wide">{label}</span>
+            </div>
+            {children}
+        </div>
+    );
+
+    return (
+        <div className="flex flex-col lg:flex-row gap-8">
+            <motion.div
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                className="w-full lg:w-1/3 space-y-6"
+            >
+                <div className="mb-6">
+                    <h2 className="text-2xl font-bold text-gray-900">Customize Design</h2>
+                    <p className="text-gray-600 text-sm mt-1">Fine-tune the appearance of your certificates.</p>
+                </div>
+
+                <InputGroup label="Data Mapping" icon={FaFont}>
+                    <div className="space-y-3">
+                        <div>
+                            <label className="block text-xs font-medium text-gray-700 mb-1">Name Column</label>
+                            <select
+                                className="w-full border border-gray-300 rounded-lg p-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none bg-white"
+                                value={mappings.name_column}
+                                onChange={(e) => setMappings({ ...mappings, name_column: e.target.value })}
+                            >
+                                <option value="">Select Column</option>
+                                {fileData.columns.map(col => <option key={col} value={col}>{col}</option>)}
+                            </select>
+                        </div>
+                        <div>
+                            <label className="block text-xs font-medium text-gray-700 mb-1">Email Column</label>
+                            <select
+                                className="w-full border border-gray-300 rounded-lg p-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none bg-white"
+                                value={mappings.email_column}
+                                onChange={(e) => setMappings({ ...mappings, email_column: e.target.value })}
+                            >
+                                <option value="">Select Column</option>
+                                {fileData.columns.map(col => <option key={col} value={col}>{col}</option>)}
+                            </select>
+                        </div>
+                    </div>
+                </InputGroup>
+
+                <InputGroup label="Typography & Color" icon={FaPalette}>
+                    <div className="space-y-4">
+                        <div>
+                            <div className="flex justify-between text-xs font-medium text-gray-700 mb-1">
+                                <span>Font Size</span>
+                                <span className="text-blue-600">{designParams.font_size}px</span>
+                            </div>
+                            <input
+                                type="range" min="10" max="200"
+                                value={designParams.font_size}
+                                onChange={(e) => setDesignParams({ ...designParams, font_size: parseInt(e.target.value) })}
+                                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-xs font-medium text-gray-700 mb-1">Text Color</label>
+                            <div className="flex items-center space-x-3">
+                                <input
+                                    type="color"
+                                    value={designParams.name_color}
+                                    onChange={(e) => setDesignParams({ ...designParams, name_color: e.target.value })}
+                                    className="w-10 h-10 rounded-lg cursor-pointer border border-gray-300"
+                                />
+                                <span className="text-gray-700 font-mono text-sm">{designParams.name_color}</span>
+                            </div>
+                        </div>
+                    </div>
+                </InputGroup>
+
+                <InputGroup label="Positioning" icon={FaArrowsAlt}>
+                    <div className="space-y-3">
+                        <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                            <div className="flex items-start space-x-2">
+                                <FaMousePointer className="text-blue-600 mt-0.5 flex-shrink-0" />
+                                <div className="text-xs text-blue-700">
+                                    <p className="font-semibold mb-1">Real-Time Positioning</p>
+                                    <ul className="space-y-1">
+                                        <li>• Click preview to set position</li>
+                                        <li>• Arrow ←→: 30px, ↑↓: 20px (Shift: 2x)</li>
+                                        <li>• Drag sliders for smooth control</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="space-y-3">
+                            <div>
+                                <div className="flex justify-between text-xs font-medium text-gray-700 mb-1">
+                                    <label>X Position</label>
+                                    <span className="text-blue-600">{designParams.x || 'Auto'}</span>
+                                </div>
+                                <input
+                                    type="range"
+                                    min="0"
+                                    max={pdfSize.width}
+                                    value={designParams.x || pdfSize.width / 2}
+                                    onChange={(e) => setDesignParams({ ...designParams, x: parseInt(e.target.value) })}
+                                    className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
+                                />
+                            </div>
+                            <div>
+                                <div className="flex justify-between text-xs font-medium text-gray-700 mb-1">
+                                    <label>Y Position</label>
+                                    <span className="text-blue-600">{designParams.y || 'Auto'}</span>
+                                </div>
+                                <input
+                                    type="range"
+                                    min="0"
+                                    max={pdfSize.height}
+                                    value={designParams.y || pdfSize.height / 2}
+                                    onChange={(e) => setDesignParams({ ...designParams, y: parseInt(e.target.value) })}
+                                    className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
+                                />
+                            </div>
+                        </div>
+
+                        <button
+                            onClick={() => setDesignParams({ ...designParams, x: null, y: null })}
+                            className="w-full text-xs text-blue-600 hover:text-blue-700 font-medium mt-2"
+                        >
+                            Reset to Auto Center
+                        </button>
+                    </div>
+                </InputGroup>
+
+                <div className="flex space-x-3 pt-4">
+                    <button
+                        onClick={onBack}
+                        className="flex-1 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors flex items-center justify-center space-x-2 font-medium"
+                    >
+                        <FaChevronLeft className="text-xs" />
+                        <span>Back</span>
+                    </button>
+                    <button
+                        onClick={onNext}
+                        disabled={!mappings.name_column || !mappings.email_column}
+                        className={`flex-1 py-3 rounded-lg text-white font-semibold shadow-md flex items-center justify-center space-x-2 transition-all ${!mappings.name_column || !mappings.email_column
+                            ? 'bg-gray-300 cursor-not-allowed text-gray-500'
+                            : 'bg-blue-600 hover:bg-blue-700 hover:shadow-lg'
+                            }`}
+                    >
+                        <span>Next Step</span>
+                        <FaChevronRight className="text-xs" />
+                    </button>
+                </div>
+            </motion.div>
+
+            <motion.div
+                initial={{ opacity: 0, scale: 0.98 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="w-full lg:w-2/3 bg-gray-50 rounded-lg border border-gray-200 p-6 flex items-center justify-center min-h-[600px]"
+                tabIndex={0}
+                onKeyDown={handleKeyboardMove}
+            >
+                {loadingPreview ? (
+                    <div className="flex flex-col items-center space-y-4">
+                        <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+                        <p className="text-gray-600 font-medium">Loading Preview...</p>
+                    </div>
+                ) : previewImage ? (
+                    <div className="relative">
+                        <img
+                            ref={imageRef}
+                            src={previewImage}
+                            alt="Certificate Preview"
+                            className="max-w-full max-h-full shadow-xl rounded border border-gray-300 cursor-crosshair"
+                            onClick={handleImageClick}
+                            onLoad={handleImageLoad}
+                        />
+
+                        {/* Real-time Frontend Text Overlay */}
+                        {designParams.x !== null && designParams.y !== null && imageRef.current && (
+                            <div
+                                className="absolute pointer-events-none flex items-center justify-center"
+                                style={{
+                                    left: `${(designParams.x / pdfSize.width) * 100}%`,
+                                    top: `${(designParams.y / pdfSize.height) * 100}%`,
+                                    transform: 'translate(-50%, -50%)',
+                                    fontSize: `${(designParams.font_size / pdfSize.width) * imageRef.current.offsetWidth}px`,
+                                    color: designParams.name_color,
+                                    fontFamily: 'Helvetica, Arial, sans-serif', // Approximate PDF font
+                                    fontWeight: 'bold',
+                                    whiteSpace: 'nowrap',
+                                    lineHeight: 1,
+                                    // No transition for instant responsiveness
+                                }}
+                            >
+                                {previewName}
+                            </div>
+                        )}
+
+                        {designParams.x !== null && designParams.y !== null && (
+                            <div className="absolute top-2 right-2 bg-black/70 text-white text-xs px-3 py-1 rounded">
+                                Position: {Math.round(designParams.x)}, {Math.round(designParams.y)}
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <div className="text-gray-400 text-center">
+                        <p className="text-lg font-medium">Preview Area</p>
+                        <p className="text-sm">Upload files to see a preview</p>
+                    </div>
+                )}
+            </motion.div>
+        </div>
+    );
+};
+
+export default DesignStep;

frontend/src/components/ReviewSendStep.jsx

@@ -0,0 +1,316 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { motion } from 'framer-motion';
+import { FaPaperPlane, FaDownload, FaChevronLeft, FaEnvelope, FaKey } from 'react-icons/fa';
+
+const ReviewSendStep = ({ fileData, designParams, mappings, onBack }) => {
+    const [eventName, setEventName] = useState("");
+    const [eventDate, setEventDate] = useState("");
+    const [clientCompany, setClientCompany] = useState("");
+    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 [sending, setSending] = useState(false);
+    const [status, setStatus] = useState(null);
+    const [progress, setProgress] = useState(null);
+    const [jobId, setJobId] = useState(null);
+
+    // Fetch email configuration on mount
+    useEffect(() => {
+        const fetchEmailConfig = async () => {
+            try {
+                const response = await axios.get("http://localhost:8000/api/email/config");
+                setFromEmail(response.data.from_email);
+            } catch (error) {
+                console.error("Failed to fetch email config:", error);
+            }
+        };
+        fetchEmailConfig();
+    }, []);
+
+    const handleSend = async () => {
+        if (!eventName || !eventDate || !clientCompany) {
+            alert("Please fill in all required fields: Event Name, Event Date, and Client Company");
+            return;
+        }
+
+        setSending(true);
+        const formData = new FormData();
+        formData.append("subject", subject);
+        formData.append("body", body);
+        formData.append("name_column", mappings.name_column);
+        formData.append("email_column", mappings.email_column);
+        formData.append("event_name", eventName);
+        formData.append("event_date", eventDate);
+        formData.append("client_company", clientCompany);
+
+        formData.append("name_color", designParams.name_color);
+        formData.append("font_size", designParams.font_size);
+        formData.append("fontname", designParams.fontname);
+        if (designParams.x !== null) formData.append("x", designParams.x);
+        if (designParams.y !== null) formData.append("y", designParams.y);
+
+        try {
+            const response = await axios.post("http://localhost:8000/api/email/send", formData);
+            const newJobId = response.data.job_id;
+            setJobId(newJobId);
+            setProgress({ sent: 0, total: fileData.total_rows, failed: 0 });
+
+            // Start polling for progress
+            const pollInterval = setInterval(async () => {
+                try {
+                    const progressResponse = await axios.get(`http://localhost:8000/api/email/progress/${newJobId}`);
+                    const progressData = progressResponse.data;
+                    setProgress(progressData);
+
+                    // Stop polling when all emails are sent
+                    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)` : ''}` });
+                        setProgress(null);
+                    }
+                } catch (pollError) {
+                    console.error("Progress polling error:", pollError);
+                }
+            }, 500); // Poll every 500ms
+
+        } catch (error) {
+            setStatus({ type: 'error', msg: "Failed to start sending process." });
+            console.error(error);
+            setSending(false);
+        }
+    };
+
+    const handleDownload = async () => {
+        const formData = new FormData();
+        formData.append("name_column", mappings.name_column);
+        formData.append("email_column", mappings.email_column);
+        formData.append("name_color", designParams.name_color);
+        formData.append("font_size", designParams.font_size);
+        formData.append("fontname", designParams.fontname);
+        if (designParams.x !== null) formData.append("x", designParams.x);
+        if (designParams.y !== null) formData.append("y", designParams.y);
+
+        try {
+            const response = await axios.post("http://localhost:8000/api/certificates/generate", formData, {
+                responseType: 'blob'
+            });
+            const url = window.URL.createObjectURL(new Blob([response.data]));
+            const link = document.createElement('a');
+            link.href = url;
+            link.setAttribute('download', 'certificates.zip');
+            document.body.appendChild(link);
+            link.click();
+        } catch (error) {
+            console.error("Download failed", error);
+        }
+    };
+
+    return (
+        <div className="max-w-5xl mx-auto">
+            <div className="text-center mb-8">
+                <h2 className="text-2xl font-bold text-gray-900 mb-2">Review & Send</h2>
+                <p className="text-gray-600">Configure your email settings and launch the campaign.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                {/* Email Configuration */}
+                <div className="space-y-6">
+                    <div className="bg-white border border-gray-200 p-6 rounded-lg shadow-sm">
+                        <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+                            Event Details
+                        </h3>
+
+                        <div className="space-y-4">
+                            <div>
+                                <label className="block text-xs font-medium text-gray-700 mb-1">Event 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., Annual Medical Conference"
+                                    value={eventName}
+                                    onChange={(e) => setEventName(e.target.value)}
+                                />
+                            </div>
+
+                            <div>
+                                <label className="block text-xs font-medium text-gray-700 mb-1">Event Date *</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., November 2024"
+                                    value={eventDate}
+                                    onChange={(e) => setEventDate(e.target.value)}
+                                />
+                            </div>
+
+                            <div>
+                                <label className="block text-xs font-medium text-gray-700 mb-1">Client Company *</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., Pharmaceutical Corp"
+                                    value={clientCompany}
+                                    onChange={(e) => setClientCompany(e.target.value)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-white border border-gray-200 p-6 rounded-lg shadow-sm">
+                        <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+                            <FaEnvelope className="mr-2 text-blue-600" /> Email Configuration
+                        </h3>
+
+                        <div className="space-y-4">
+                            <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">
+                                    {fromEmail || 'Loading...'}
+                                </div>
+                                <p className="text-xs text-gray-500 mt-1">Configured in environment settings</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-white border border-gray-200 p-6 rounded-lg shadow-sm">
+                        <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+                            <FaEnvelope className="mr-2 text-blue-600" /> Email Content
+                        </h3>
+
+                        <div className="space-y-4">
+                            <div>
+                                <label className="block text-xs font-medium text-gray-700 mb-1">Subject Line</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"
+                                    value={subject}
+                                    onChange={(e) => setSubject(e.target.value)}
+                                />
+                            </div>
+
+                            <div>
+                                <label className="block text-xs font-medium text-gray-700 mb-1">Email Body</label>
+                                <textarea
+                                    rows={6}
+                                    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 font-mono text-sm"
+                                    value={body}
+                                    onChange={(e) => setBody(e.target.value)}
+                                />
+                                <p className="text-xs text-gray-500 mt-2">
+                                    Variables: <span className="text-blue-600 font-mono">{'{first_name}'}</span>, <span className="text-blue-600 font-mono">{'{name}'}</span>, <span className="text-blue-600 font-mono">{'{event_name}'}</span>, <span className="text-blue-600 font-mono">{'{event_date}'}</span>, <span className="text-blue-600 font-mono">{'{client_company}'}</span>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Summary & Actions */}
+                <div className="space-y-6">
+                    <div className="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 p-6 rounded-lg">
+                        <h3 className="text-lg font-semibold text-gray-900 mb-4">Campaign Summary</h3>
+                        <ul className="space-y-3 text-sm text-gray-700">
+                            <li className="flex justify-between border-b border-blue-200 pb-2">
+                                <span>Total Recipients</span>
+                                <span className="font-bold text-gray-900">{fileData.total_rows}</span>
+                            </li>
+                            <li className="flex justify-between border-b border-blue-200 pb-2">
+                                <span>Name Column</span>
+                                <span className="font-mono text-blue-700">{mappings.name_column}</span>
+                            </li>
+                            <li className="flex justify-between border-b border-blue-200 pb-2">
+                                <span>Email Column</span>
+                                <span className="font-mono text-blue-700">{mappings.email_column}</span>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div className="space-y-4">
+                        <motion.button
+                            whileHover={{ scale: 1.02 }}
+                            whileTap={{ scale: 0.98 }}
+                            onClick={handleDownload}
+                            className="w-full py-4 px-6 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 font-medium flex items-center justify-center space-x-2 transition-colors"
+                        >
+                            <FaDownload />
+                            <span>Download All Certificates (ZIP)</span>
+                        </motion.button>
+
+                        <motion.button
+                            whileHover={{ scale: 1.02 }}
+                            whileTap={{ scale: 0.98 }}
+                            onClick={handleSend}
+                            disabled={sending}
+                            className={`w-full py-4 px-6 rounded-lg text-white font-bold shadow-md flex items-center justify-center space-x-2 transition-all ${sending
+                                ? 'bg-gray-400 cursor-not-allowed'
+                                : 'bg-green-600 hover:bg-green-700 hover:shadow-lg'
+                                }`}
+                        >
+                            {sending ? (
+                                <span>Sending Campaign...</span>
+                            ) : (
+                                <>
+                                    <FaPaperPlane />
+                                    <span>Send Certificates Now</span>
+                                </>
+                            )}
+                        </motion.button>
+                    </div>
+
+                    {progress && (
+                        <motion.div
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            className="bg-white border border-blue-200 p-6 rounded-lg shadow-sm"
+                        >
+                            <h4 className="text-sm font-semibold text-gray-900 mb-3">Sending Progress</h4>
+                            <div className="space-y-3">
+                                <div className="flex justify-between text-sm text-gray-700 mb-2">
+                                    <span className="font-medium">{progress.sent} / {progress.total} emails sent</span>
+                                    <span className="text-blue-600 font-bold">{Math.round((progress.sent / progress.total) * 100)}%</span>
+                                </div>
+                                <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
+                                    <motion.div
+                                        className="bg-gradient-to-r from-blue-500 to-green-500 h-full rounded-full"
+                                        initial={{ width: 0 }}
+                                        animate={{ width: `${(progress.sent / progress.total) * 100}%` }}
+                                        transition={{ duration: 0.3 }}
+                                    />
+                                </div>
+                                {progress.failed > 0 && (
+                                    <p className="text-xs text-red-600">⚠️ {progress.failed} failed</p>
+                                )}
+                            </div>
+                        </motion.div>
+                    )}
+
+                    {status && (
+                        <motion.div
+                            initial={{ opacity: 0, y: 10 }}
+                            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.msg}
+                        </motion.div>
+                    )}
+                </div>
+            </div>
+
+            <div className="mt-8">
+                <button
+                    onClick={onBack}
+                    className="text-gray-600 hover:text-gray-900 flex items-center space-x-2 transition-colors font-medium"
+                >
+                    <FaChevronLeft />
+                    <span>Back to Design</span>
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default ReviewSendStep;

frontend/src/components/UploadStep.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { FaCloudUploadAlt, FaFileExcel, FaFilePdf, FaSpinner } from 'react-icons/fa';
+import { motion } from 'framer-motion';
+
+const UploadStep = ({ onUploadSuccess }) => {
+    const [excelFile, setExcelFile] = useState(null);
+    const [pdfFile, setPdfFile] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+
+    const handleUpload = async () => {
+        if (!excelFile || !pdfFile) {
+            setError("Please select both files.");
+            return;
+        }
+
+        setLoading(true);
+        setError(null);
+
+        const formData = new FormData();
+        formData.append("excel_file", excelFile);
+        formData.append("pdf_file", pdfFile);
+
+        try {
+            const response = await axios.post("http://localhost:8000/api/certificates/upload", formData, {
+                headers: { "Content-Type": "multipart/form-data" }
+            });
+            onUploadSuccess(response.data);
+        } catch (err) {
+            setError("Upload failed. Please try again.");
+            console.error(err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const FileInput = ({ accept, label, icon: Icon, file, setFile }) => (
+        <motion.div
+            whileHover={{ y: -4 }}
+            className={`relative border-2 border-dashed rounded-lg p-8 text-center transition-all cursor-pointer ${file ? 'border-blue-500 bg-blue-50' : 'border-gray-300 bg-white hover:border-blue-400 hover:bg-gray-50'
+                }`}
+        >
+            <input
+                type="file"
+                accept={accept}
+                onChange={(e) => setFile(e.target.files[0])}
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
+            />
+            <div className="flex flex-col items-center pointer-events-none">
+                <div className={`w-16 h-16 rounded-full flex items-center justify-center mb-4 ${file ? 'bg-blue-100' : 'bg-gray-100'
+                    }`}>
+                    <Icon className={`text-3xl ${file ? 'text-blue-600' : 'text-gray-400'}`} />
+                </div>
+                <h3 className="text-base font-semibold text-gray-900 mb-1">{label}</h3>
+                <p className="text-sm text-gray-500">
+                    {file ? (
+                        <span className="text-blue-600 font-medium">{file.name}</span>
+                    ) : (
+                        "Click to browse or drag & drop"
+                    )}
+                </p>
+            </div>
+        </motion.div>
+    );
+
+    return (
+        <div className="max-w-3xl mx-auto">
+            <div className="text-center mb-8">
+                <h2 className="text-2xl font-bold text-gray-900 mb-2">Upload Files</h2>
+                <p className="text-gray-600">Upload your attendee list and certificate template to begin.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                <FileInput
+                    accept=".xlsx"
+                    label="Attendee Data (.xlsx)"
+                    icon={FaFileExcel}
+                    file={excelFile}
+                    setFile={setExcelFile}
+                />
+                <FileInput
+                    accept=".pdf"
+                    label="Certificate Template (.pdf)"
+                    icon={FaFilePdf}
+                    file={pdfFile}
+                    setFile={setPdfFile}
+                />
+            </div>
+
+            {error && (
+                <motion.div
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 text-center text-sm"
+                >
+                    {error}
+                </motion.div>
+            )}
+
+            <div className="flex justify-center">
+                <motion.button
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                    onClick={handleUpload}
+                    disabled={loading}
+                    className={`flex items-center justify-center space-x-2 py-3 px-8 rounded-lg text-white font-semibold shadow-md transition-all ${loading ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700 hover:shadow-lg'
+                        }`}
+                >
+                    {loading ? (
+                        <>
+                            <FaSpinner className="animate-spin" />
+                            <span>Processing...</span>
+                        </>
+                    ) : (
+                        <>
+                            <FaCloudUploadAlt className="text-xl" />
+                            <span>Upload & Continue</span>
+                        </>
+                    )}
+                </motion.button>
+            </div>
+        </div>
+    );
+};
+
+export default UploadStep;

frontend/src/index.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  background-color: #f3f4f6;
+  font-family: 'Inter', sans-serif;
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}

frontend/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

requirements.txt

@@ -0,0 +1,5 @@
+sendgrid
+streamlit
+pandas
+openpyxl
+PyMuPDF