update

backend/app/database.py

@@ -86,13 +86,35 @@ class CrmLead(Base):
     last_reply_subject = Column(String)
     last_reply_body = Column(Text)
     last_reply_at = Column(DateTime, nullable=True)
-    crm_status = Column(String, default="new_lead")  # new_lead|attempted_to_contact|contacted|qualified|unqualified|none
+    crm_status = Column(String, default="new_lead")  # new_lead|contacted|qualified|unqualified|none
     contact_id = Column(Integer, nullable=True)  # links to contacts.id after "Move to Contacts"
     raw_webhook = Column(JSON)
     created_at = Column(DateTime, default=datetime.utcnow)
     updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
 
 
+class CrmDeal(Base):
+    """Pipeline deal (often converted from a lead)."""
+    __tablename__ = "crm_deals"
+
+    id = Column(Integer, primary_key=True, index=True)
+    name = Column(String, index=True)
+    stage = Column(String, default="new")  # new|discovery|proposal|negotiation|won|lost
+    owner_initials = Column(String, default="")
+    deal_value = Column(Integer, nullable=True)  # whole USD (nullable)
+    contact_display = Column(String, default="")  # primary person label
+    account_name = Column(String, default="")
+    expected_close_date = Column(DateTime, nullable=True)
+    close_probability = Column(Integer, default=10)  # 0–100
+    country = Column(String, default="")
+    last_interaction_at = Column(DateTime, nullable=True)
+    source_lead_id = Column(Integer, nullable=True)
+    source_campaign_name = Column(String, default="")
+    contact_id = Column(Integer, nullable=True)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+
 class SmartleadRun(Base):
     __tablename__ = "smartlead_runs"
     

backend/app/main.py

@@ -18,7 +18,17 @@ import math
 import re
 from datetime import datetime, timedelta
 
-from .database import get_db, UploadedFile, Prompt, GeneratedSequence, SmartleadRun, Contact, CrmLead
+from .database import (
+    get_db,
+    SessionLocal,
+    UploadedFile,
+    Prompt,
+    GeneratedSequence,
+    SmartleadRun,
+    Contact,
+    CrmLead,
+    CrmDeal,
+)
 from .models import (
     UploadResponse,
     PromptSaveRequest,
@@ -26,6 +36,8 @@ from .models import (
     SmartleadPushRequest,
     SmartleadRunResponse,
     CrmLeadPatchRequest,
+    BulkLeadIdsRequest,
+    CrmDealPatchRequest,
 )
 from .gpt_service import generate_email_sequence
 from .smartlead_client import SmartleadClient
@@ -129,14 +141,37 @@ def _to_datetime(val):
 CRM_STATUS_ALLOWED = frozenset({
     "none",
     "new_lead",
-    "attempted_to_contact",
     "contacted",
     "qualified",
     "unqualified",
 })
+DEAL_STAGE_ALLOWED = frozenset({
+    "new",
+    "discovery",
+    "proposal",
+    "negotiation",
+    "won",
+    "lost",
+})
 SMARTLEAD_IMPORT_FILE_ID = "smartlead-imports"
 
 
+@app.on_event("startup")
+def _migrate_lead_status_removed_option():
+    """Map legacy attempted_to_contact rows to contacted once at startup."""
+    db = SessionLocal()
+    try:
+        db.query(CrmLead).filter(CrmLead.crm_status == "attempted_to_contact").update(
+            {CrmLead.crm_status: "contacted"},
+            synchronize_session=False,
+        )
+        db.commit()
+    except Exception:
+        db.rollback()
+    finally:
+        db.close()
+
+
 def _strip_html_simple(text: str) -> str:
     if not text:
         return ""
@@ -260,6 +295,95 @@ def _crm_lead_to_dict(row: CrmLead) -> dict:
     }
 
 
+def _move_lead_to_contacts_core(db: Session, lead: CrmLead) -> dict:
+    if lead.contact_id:
+        return {"ok": True, "contact_id": lead.contact_id, "message": "Already linked to Contacts"}
+    email = (lead.email or "").strip()
+    if not email:
+        return {"ok": False, "error": "Lead has no email"}
+    existing = (
+        db.query(Contact)
+        .filter(func.lower(Contact.email) == email.lower())
+        .first()
+    )
+    if existing:
+        lead.contact_id = existing.id
+        return {"ok": True, "contact_id": existing.id, "message": "Linked to existing contact"}
+    raw = {
+        "Company Name": lead.company_name or "",
+        "Title": lead.title or "",
+        "source": "smartlead_reply",
+        "smartlead_lead_id": lead.smartlead_lead_id,
+        "campaign_id": lead.campaign_id,
+        "last_reply_subject": lead.last_reply_subject,
+        "last_reply_body": lead.last_reply_body,
+        "smartlead_webhook": lead.raw_webhook,
+    }
+    contact = Contact(
+        file_id=SMARTLEAD_IMPORT_FILE_ID,
+        row_index=lead.id,
+        first_name=lead.first_name or "",
+        last_name=lead.last_name or "",
+        email=email,
+        company=lead.company_name or "",
+        title=lead.title or "",
+        source="smartlead",
+        raw_data=raw,
+    )
+    db.add(contact)
+    db.flush()
+    lead.contact_id = contact.id
+    return {"ok": True, "contact_id": contact.id, "message": "Contact created"}
+
+
+def _deal_name_from_lead(lead: CrmLead) -> str:
+    person = " ".join(filter(None, [lead.first_name or "", lead.last_name or ""])).strip()
+    if lead.company_name and person:
+        return f"{lead.company_name} — {person}"
+    if lead.company_name:
+        return lead.company_name or "Deal"
+    if person:
+        return person
+    return (lead.email or "").strip() or "Untitled deal"
+
+
+def _owner_initials_from_lead(lead: CrmLead) -> str:
+    a = (lead.first_name or "").strip()[:1].upper()
+    b = (lead.last_name or "").strip()[:1].upper()
+    s = a + b
+    return s if s else "?"
+
+
+def _deal_to_dict(d: CrmDeal) -> dict:
+    fv = None
+    if d.deal_value is not None and d.close_probability is not None:
+        fv = int(round(d.deal_value * (d.close_probability / 100.0)))
+    ecd = None
+    if d.expected_close_date:
+        try:
+            ecd = d.expected_close_date.date().isoformat()
+        except Exception:
+            ecd = d.expected_close_date.isoformat()
+    return {
+        "id": d.id,
+        "name": d.name or "",
+        "stage": d.stage or "new",
+        "owner_initials": d.owner_initials or "",
+        "deal_value": d.deal_value,
+        "contact_display": d.contact_display or "",
+        "account_name": d.account_name or "",
+        "expected_close_date": ecd,
+        "close_probability": d.close_probability if d.close_probability is not None else 10,
+        "forecast_value": fv,
+        "last_interaction_at": d.last_interaction_at.isoformat() if d.last_interaction_at else None,
+        "country": d.country or "",
+        "source_lead_id": d.source_lead_id,
+        "source_campaign_name": d.source_campaign_name or "",
+        "contact_id": d.contact_id,
+        "created_at": d.created_at.isoformat() if d.created_at else None,
+    }
+
+
 @app.get("/api/health")
 def health():
     return {"status": "ok"}
@@ -1155,7 +1279,7 @@ async def seed_demo_leads(db: Session = Depends(get_db)):
             "last_name": "Chen",
             "company_name": "Pacific Rail Partners",
             "title": "Director of Procurement",
-            "crm_status": "attempted_to_contact",
+            "crm_status": "contacted",
             "subject": "Re: Partnership",
             "body": (
                 "Not interested right now — we renewed with our incumbent through 2026. "
@@ -1352,50 +1476,213 @@ async def move_lead_to_contacts(lead_id: int, db: Session = Depends(get_db)):
     lead = db.query(CrmLead).filter(CrmLead.id == lead_id).first()
     if not lead:
         raise HTTPException(status_code=404, detail="Lead not found")
-    if lead.contact_id:
-        return {"contact_id": lead.contact_id, "message": "Already linked to Contacts"}
+    r = _move_lead_to_contacts_core(db, lead)
+    if not r["ok"]:
+        raise HTTPException(status_code=400, detail=r.get("error", "Move failed"))
+    db.commit()
+    return {"contact_id": r["contact_id"], "message": r["message"]}
+
+
+@app.post("/api/leads/bulk-move-to-contacts")
+async def bulk_move_leads_to_contacts(body: BulkLeadIdsRequest, db: Session = Depends(get_db)):
+    if not body.lead_ids:
+        raise HTTPException(status_code=400, detail="lead_ids required")
+    moved = 0
+    errors: List[dict] = []
+    for lid in body.lead_ids:
+        lead = db.query(CrmLead).filter(CrmLead.id == lid).first()
+        if not lead:
+            errors.append({"lead_id": lid, "error": "not found"})
+            continue
+        r = _move_lead_to_contacts_core(db, lead)
+        if not r["ok"]:
+            errors.append({"lead_id": lid, "error": r.get("error", "failed")})
+        else:
+            moved += 1
+    db.commit()
+    return {"moved": moved, "errors": errors}
 
-    email = (lead.email or "").strip()
-    if not email:
-        raise HTTPException(status_code=400, detail="Lead has no email")
 
-    existing = (
-        db.query(Contact)
-        .filter(func.lower(Contact.email) == email.lower())
-        .first()
+@app.post("/api/leads/bulk-delete")
+async def bulk_delete_leads(body: BulkLeadIdsRequest, db: Session = Depends(get_db)):
+    if not body.lead_ids:
+        raise HTTPException(status_code=400, detail="lead_ids required")
+    deleted = (
+        db.query(CrmLead)
+        .filter(CrmLead.id.in_(body.lead_ids))
+        .delete(synchronize_session=False)
     )
-    if existing:
-        lead.contact_id = existing.id
-        db.commit()
-        return {"contact_id": existing.id, "message": "Linked to existing contact"}
+    db.commit()
+    return {"deleted": deleted}
+
+
+@app.post("/api/deals/from-leads")
+async def deals_from_leads(body: BulkLeadIdsRequest, db: Session = Depends(get_db)):
+    """Create one deal per selected lead and remove those leads from the Leads table."""
+    if not body.lead_ids:
+        raise HTTPException(status_code=400, detail="lead_ids required")
+    created: List[dict] = []
+    errors: List[dict] = []
+    for lid in body.lead_ids:
+        lead = db.query(CrmLead).filter(CrmLead.id == lid).first()
+        if not lead:
+            errors.append({"lead_id": lid, "error": "not found"})
+            continue
+        person = " ".join(filter(None, [lead.first_name or "", lead.last_name or ""])).strip()
+        deal = CrmDeal(
+            name=_deal_name_from_lead(lead),
+            stage="new",
+            owner_initials=_owner_initials_from_lead(lead),
+            deal_value=None,
+            contact_display=person or (lead.email or ""),
+            account_name=lead.company_name or "",
+            expected_close_date=datetime.utcnow() + timedelta(days=60),
+            close_probability=25,
+            country="",
+            last_interaction_at=lead.last_reply_at or datetime.utcnow(),
+            source_lead_id=lead.id,
+            source_campaign_name=lead.campaign_name or lead.campaign_id or "",
+            contact_id=lead.contact_id,
+        )
+        db.add(deal)
+        db.flush()
+        created.append(_deal_to_dict(deal))
+        db.delete(lead)
+    db.commit()
+    return {"created": created, "errors": errors}
 
-    raw = {
-        "Company Name": lead.company_name or "",
-        "Title": lead.title or "",
-        "source": "smartlead_reply",
-        "smartlead_lead_id": lead.smartlead_lead_id,
-        "campaign_id": lead.campaign_id,
-        "last_reply_subject": lead.last_reply_subject,
-        "last_reply_body": lead.last_reply_body,
-        "smartlead_webhook": lead.raw_webhook,
+
+@app.get("/api/deals")
+async def list_deals(
+    search: str = Query(""),
+    sort_by: str = Query("created_at"),
+    sort_dir: str = Query("desc"),
+    limit: int = Query(100, ge=1, le=500),
+    offset: int = Query(0, ge=0),
+    db: Session = Depends(get_db),
+):
+    q = db.query(CrmDeal)
+    if search.strip():
+        term = f"%{search.strip().lower()}%"
+        q = q.filter(
+            or_(
+                func.lower(CrmDeal.name).like(term),
+                func.lower(func.coalesce(CrmDeal.account_name, "")).like(term),
+                func.lower(func.coalesce(CrmDeal.contact_display, "")).like(term),
+            )
+        )
+    total = q.count()
+    col_map = {
+        "created_at": CrmDeal.created_at,
+        "name": CrmDeal.name,
+        "deal_value": CrmDeal.deal_value,
+        "stage": CrmDeal.stage,
+        "last_interaction_at": CrmDeal.last_interaction_at,
     }
-    contact = Contact(
-        file_id=SMARTLEAD_IMPORT_FILE_ID,
-        row_index=lead_id,
-        first_name=lead.first_name or "",
-        last_name=lead.last_name or "",
-        email=email,
-        company=lead.company_name or "",
-        title=lead.title or "",
-        source="smartlead",
-        raw_data=raw,
-    )
-    db.add(contact)
+    col = col_map.get(sort_by, CrmDeal.created_at)
+    if sort_dir == "asc":
+        q = q.order_by(col.asc())
+    else:
+        q = q.order_by(col.desc())
+    rows = q.offset(offset).limit(limit).all()
+    return {"total": total, "deals": [_deal_to_dict(r) for r in rows]}
+
+
+@app.patch("/api/deals/{deal_id}")
+async def patch_deal(deal_id: int, body: CrmDealPatchRequest, db: Session = Depends(get_db)):
+    row = db.query(CrmDeal).filter(CrmDeal.id == deal_id).first()
+    if not row:
+        raise HTTPException(status_code=404, detail="Deal not found")
+    if body.stage is not None:
+        if body.stage not in DEAL_STAGE_ALLOWED:
+            raise HTTPException(
+                status_code=400,
+                detail=f"stage must be one of: {sorted(DEAL_STAGE_ALLOWED)}",
+            )
+        row.stage = body.stage
+    if body.deal_value is not None:
+        row.deal_value = body.deal_value
+    if body.close_probability is not None:
+        row.close_probability = max(0, min(100, body.close_probability))
+    if body.country is not None:
+        row.country = body.country
+    if body.expected_close_date is not None:
+        ts = _to_datetime(body.expected_close_date)
+        row.expected_close_date = ts
     db.commit()
-    db.refresh(contact)
-    lead.contact_id = contact.id
+    db.refresh(row)
+    return _deal_to_dict(row)
+
+
+@app.post("/api/deals/seed-demo")
+async def seed_demo_deals(db: Session = Depends(get_db)):
+    removed = db.query(CrmDeal).filter(CrmDeal.name.like("DEMO: %")).delete(synchronize_session=False)
+    now = datetime.utcnow()
+    samples = [
+        {
+            "name": "DEMO: Ramco — Aus",
+            "stage": "discovery",
+            "owner_initials": "KW",
+            "deal_value": 10000,
+            "contact_display": "KENNETH WON",
+            "account_name": "Quanticsit",
+            "close_probability": 10,
+            "close_in_days": 120,
+            "country": "Australia",
+        },
+        {
+            "name": "DEMO: HT Pilot",
+            "stage": "proposal",
+            "owner_initials": "SL",
+            "deal_value": 1600,
+            "contact_display": "SARAH LEE",
+            "account_name": "HT Logistics",
+            "close_probability": 60,
+            "close_in_days": 45,
+            "country": "Malaysia",
+        },
+        {
+            "name": "DEMO: Northwind rollout",
+            "stage": "negotiation",
+            "owner_initials": "JD",
+            "deal_value": 45000,
+            "contact_display": "JAMES DIAZ",
+            "account_name": "Northwind Trading",
+            "close_probability": 40,
+            "close_in_days": 60,
+            "country": "USA",
+        },
+        {
+            "name": "DEMO: Maple cold chain",
+            "stage": "new",
+            "owner_initials": "AR",
+            "deal_value": None,
+            "contact_display": "ALEX RUIZ",
+            "account_name": "Maple Cold",
+            "close_probability": 15,
+            "close_in_days": 90,
+            "country": "Canada",
+        },
+    ]
+    for s in samples:
+        db.add(
+            CrmDeal(
+                name=s["name"],
+                stage=s["stage"],
+                owner_initials=s["owner_initials"],
+                deal_value=s["deal_value"],
+                contact_display=s["contact_display"],
+                account_name=s["account_name"],
+                expected_close_date=now + timedelta(days=s["close_in_days"]),
+                close_probability=s["close_probability"],
+                country=s["country"],
+                last_interaction_at=now - timedelta(days=1),
+                source_lead_id=None,
+                source_campaign_name="Demo",
+            )
+        )
     db.commit()
-    return {"contact_id": contact.id, "message": "Contact created"}
+    return {"ok": True, "removed_previous_demo_rows": removed, "inserted": len(samples)}
 
 
 @app.get("/api/leads/{lead_id}/smartlead-thread")

backend/app/models.py

@@ -37,6 +37,18 @@ class CrmLeadPatchRequest(BaseModel):
     crm_status: str
 
 
+class BulkLeadIdsRequest(BaseModel):
+    lead_ids: List[int]
+
+
+class CrmDealPatchRequest(BaseModel):
+    stage: Optional[str] = None
+    deal_value: Optional[int] = None
+    close_probability: Optional[int] = None
+    expected_close_date: Optional[str] = None  # ISO date or datetime
+    country: Optional[str] = None
+
+
 class SmartleadRunResponse(BaseModel):
     run_id: str
     campaign_id: Optional[str] = None

frontend/src/App.jsx

@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import EmailSequenceGenerator from "./pages/EmailSequenceGenerator";
 import Contacts from "./pages/Contacts";
 import Leads from "./pages/Leads";
+import Deals from "./pages/Deals";
 import "./index.css";
 
 export default function App() {
@@ -12,6 +13,7 @@ export default function App() {
         <Route path="/" element={<EmailSequenceGenerator />} />
         <Route path="/contacts" element={<Contacts />} />
         <Route path="/leads" element={<Leads />} />
+        <Route path="/deals" element={<Deals />} />
         <Route path="/history" element={<Navigate to="/leads" replace />} />
       </Routes>
     </BrowserRouter>

frontend/src/components/layout/AppHeader.jsx

@@ -7,6 +7,7 @@ const MENU_ITEMS = [
     { label: 'Generator', href: '/' },
     { label: 'Contacts', href: '/contacts' },
     { label: 'Leads', href: '/leads' },
+    { label: 'Deals', href: '/deals' },
 ];
 
 function pathMatches(locationPath, href) {

frontend/src/components/layout/AppShell.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Zap, LayoutDashboard, Users, Inbox } from 'lucide-react';
+import { Zap, LayoutDashboard, Users, Inbox, Handshake } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 
 const NAV_ITEMS = [
     { label: 'Generator', href: '/', icon: LayoutDashboard },
     { label: 'Contacts', href: '/contacts', icon: Users },
     { label: 'Leads', href: '/leads', icon: Inbox },
+    { label: 'Deals', href: '/deals', icon: Handshake },
 ];
 
 function pathMatches(locationPath, href) {

frontend/src/pages/Deals.jsx

@@ -0,0 +1,298 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+    Search,
+    ChevronDown,
+    ChevronRight,
+    Loader2,
+    LayoutGrid,
+} from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
+import AppShell from '@/components/layout/AppShell';
+import { cn } from '@/lib/utils';
+
+const STAGES = [
+    { value: 'new', label: 'New', className: 'bg-slate-800 text-white' },
+    { value: 'discovery', label: 'Discovery', className: 'bg-cyan-400 text-slate-900' },
+    { value: 'proposal', label: 'Proposal', className: 'bg-sky-400 text-slate-900' },
+    { value: 'negotiation', label: 'Negotiation', className: 'bg-teal-500 text-white' },
+    { value: 'won', label: 'Won', className: 'bg-emerald-500 text-white' },
+    { value: 'lost', label: 'Lost', className: 'bg-red-500 text-white' },
+];
+
+function stageMeta(v) {
+    return STAGES.find((s) => s.value === v) || STAGES[0];
+}
+
+function fmtMoney(n) {
+    if (n == null || n === '') return '—';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(n);
+}
+
+function fmtDate(iso) {
+    if (!iso) return '—';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return iso;
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+export default function Deals() {
+    const [deals, setDeals] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState('');
+    const [sectionOpen, setSectionOpen] = useState(true);
+    const [seedBusy, setSeedBusy] = useState(false);
+
+    const fetchDeals = useCallback(async () => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams();
+            params.set('limit', '200');
+            params.set('offset', '0');
+            params.set('sort_by', 'created_at');
+            params.set('sort_dir', 'desc');
+            if (search.trim()) params.set('search', search.trim());
+            const res = await fetch(`/api/deals?${params.toString()}`);
+            if (res.ok) {
+                const data = await res.json();
+                setDeals(data.deals || []);
+                setTotal(data.total ?? 0);
+            }
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setLoading(false);
+        }
+    }, [search]);
+
+    useEffect(() => {
+        const t = setTimeout(() => fetchDeals(), 250);
+        return () => clearTimeout(t);
+    }, [fetchDeals]);
+
+    const seedDemo = async () => {
+        setSeedBusy(true);
+        try {
+            const res = await fetch('/api/deals/seed-demo', { method: 'POST' });
+            if (!res.ok) throw new Error('Seed failed');
+            await fetchDeals();
+        } catch (e) {
+            console.error(e);
+            alert('Could not load demo deals');
+        } finally {
+            setSeedBusy(false);
+        }
+    };
+
+    const updateStage = async (dealId, stage) => {
+        try {
+            const res = await fetch(`/api/deals/${dealId}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ stage }),
+            });
+            if (!res.ok) throw new Error('Update failed');
+            const updated = await res.json();
+            setDeals((prev) => prev.map((d) => (d.id === dealId ? { ...d, ...updated } : d)));
+        } catch (e) {
+            console.error(e);
+            alert('Could not update stage');
+        }
+    };
+
+    return (
+        <AppShell
+            title="Deals"
+            subtitle="Pipeline from converted leads — stage, value, and forecast."
+        >
+            <div className="space-y-4">
+                <div className="flex flex-wrap gap-2 border-b border-slate-200 pb-3">
+                    <button
+                        type="button"
+                        className="rounded-full px-4 py-1.5 text-sm font-medium bg-violet-100 text-violet-800"
+                    >
+                        Main table
+                    </button>
+                    <span className="text-sm text-slate-400 py-1.5 px-2">By Stage</span>
+                    <span className="text-sm text-slate-400 py-1.5 px-2">Pipeline</span>
+                </div>
+
+                <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
+                    <Button size="sm" className="bg-teal-600 hover:bg-teal-700 text-white w-fit">
+                        New deal
+                    </Button>
+                    <div className="flex flex-1 flex-wrap gap-2 justify-end items-center">
+                        <div className="relative flex-1 min-w-[200px] max-w-md">
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+                            <Input
+                                className="pl-9"
+                                placeholder="Search deals…"
+                                value={search}
+                                onChange={(e) => setSearch(e.target.value)}
+                            />
+                        </div>
+                        <Button
+                            variant="secondary"
+                            size="sm"
+                            onClick={() => seedDemo()}
+                            disabled={seedBusy}
+                        >
+                            {seedBusy ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Demo data'}
+                        </Button>
+                        <Button variant="outline" size="sm" onClick={() => fetchDeals()}>
+                            Refresh
+                        </Button>
+                    </div>
+                </div>
+
+                <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden">
+                    <button
+                        type="button"
+                        onClick={() => setSectionOpen(!sectionOpen)}
+                        className="w-full flex items-center gap-2 px-4 py-3 text-left font-semibold text-slate-800 border-b border-slate-100 hover:bg-slate-50"
+                    >
+                        {sectionOpen ? (
+                            <ChevronDown className="h-5 w-5 text-violet-600" />
+                        ) : (
+                            <ChevronRight className="h-5 w-5 text-violet-600" />
+                        )}
+                        <LayoutGrid className="h-5 w-5 text-slate-500" />
+                        Active Deals
+                        <span className="text-slate-400 font-normal text-sm ml-2">{total} total</span>
+                    </button>
+
+                    {sectionOpen && (
+                        <div className="overflow-x-auto">
+                            {loading ? (
+                                <div className="flex justify-center py-16 text-slate-500">
+                                    <Loader2 className="h-8 w-8 animate-spin" />
+                                </div>
+                            ) : deals.length === 0 ? (
+                                <div className="text-center py-16 text-slate-500 space-y-3">
+                                    <p>No deals yet. Convert leads from the Leads page, or load demo data.</p>
+                                    <Button size="sm" variant="secondary" onClick={() => seedDemo()} disabled={seedBusy}>
+                                        Load demo deals
+                                    </Button>
+                                </div>
+                            ) : (
+                                <table className="w-full text-sm min-w-[960px]">
+                                    <thead>
+                                        <tr className="bg-slate-50 text-left text-slate-600 border-b border-slate-200">
+                                            <th className="px-2 py-2 w-10" />
+                                            <th className="px-3 py-2 font-medium">Deal</th>
+                                            <th className="px-3 py-2 font-medium">Stage</th>
+                                            <th className="px-3 py-2 font-medium">Owner</th>
+                                            <th className="px-3 py-2 font-medium">Deal value</th>
+                                            <th className="px-3 py-2 font-medium">Contacts</th>
+                                            <th className="px-3 py-2 font-medium">Accounts</th>
+                                            <th className="px-3 py-2 font-medium">Expected close</th>
+                                            <th className="px-3 py-2 font-medium">Close %</th>
+                                            <th className="px-3 py-2 font-medium">Forecast</th>
+                                            <th className="px-3 py-2 font-medium">Last interaction</th>
+                                            <th className="px-3 py-2 font-medium">Country</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {deals.map((deal) => {
+                                            const meta = stageMeta(deal.stage);
+                                            const safeStage = STAGES.some((s) => s.value === deal.stage)
+                                                ? deal.stage
+                                                : 'new';
+                                            return (
+                                                <tr
+                                                    key={deal.id}
+                                                    className="border-b border-slate-100 hover:bg-violet-50/40"
+                                                >
+                                                    <td className="px-2 py-2">
+                                                        <input type="checkbox" className="rounded border-slate-300" />
+                                                    </td>
+                                                    <td className="px-3 py-2 font-medium text-slate-900">{deal.name}</td>
+                                                    <td className="px-3 py-2">
+                                                        <Select
+                                                            value={safeStage}
+                                                            onValueChange={(v) => updateStage(deal.id, v)}
+                                                        >
+                                                            <SelectTrigger
+                                                                className={cn(
+                                                                    'h-8 w-[min(100%,150px)] border-slate-200 shadow-none'
+                                                                )}
+                                                            >
+                                                                <span
+                                                                    className={cn(
+                                                                        'rounded-full px-2 py-0.5 text-xs font-medium',
+                                                                        meta.className
+                                                                    )}
+                                                                >
+                                                                    {meta.label}
+                                                                </span>
+                                                            </SelectTrigger>
+                                                            <SelectContent className="min-w-[180px]">
+                                                                {STAGES.map((s) => (
+                                                                    <SelectItem key={s.value} value={s.value}>
+                                                                        <span
+                                                                            className={cn(
+                                                                                'rounded-full px-2 py-0.5 text-xs font-medium inline-block',
+                                                                                s.className
+                                                                            )}
+                                                                        >
+                                                                            {s.label}
+                                                                        </span>
+                                                                    </SelectItem>
+                                                                ))}
+                                                            </SelectContent>
+                                                        </Select>
+                                                    </td>
+                                                    <td className="px-3 py-2">
+                                                        <div className="h-8 w-8 rounded-full bg-violet-100 text-violet-700 text-xs font-semibold flex items-center justify-center border border-violet-200">
+                                                            {deal.owner_initials || '?'}
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-3 py-2 text-slate-700 tabular-nums">
+                                                        {fmtMoney(deal.deal_value)}
+                                                    </td>
+                                                    <td className="px-3 py-2">
+                                                        {deal.contact_display ? (
+                                                            <span className="inline-flex rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-800">
+                                                                {deal.contact_display}
+                                                            </span>
+                                                        ) : (
+                                                            '—'
+                                                        )}
+                                                    </td>
+                                                    <td className="px-3 py-2">
+                                                        {deal.account_name ? (
+                                                            <span className="inline-flex rounded-md bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-800">
+                                                                {deal.account_name}
+                                                            </span>
+                                                        ) : (
+                                                            '—'
+                                                        )}
+                                                    </td>
+                                                    <td className="px-3 py-2 text-slate-600">
+                                                        {fmtDate(deal.expected_close_date)}
+                                                    </td>
+                                                    <td className="px-3 py-2 tabular-nums text-slate-700">
+                                                        {deal.close_probability ?? '—'}%
+                                                    </td>
+                                                    <td className="px-3 py-2 tabular-nums text-slate-700">
+                                                        {fmtMoney(deal.forecast_value)}
+                                                    </td>
+                                                    <td className="px-3 py-2 text-slate-600">
+                                                        {fmtDate(deal.last_interaction_at)}
+                                                    </td>
+                                                    <td className="px-3 py-2 text-slate-700">{deal.country || '—'}</td>
+                                                </tr>
+                                            );
+                                        })}
+                                    </tbody>
+                                </table>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </AppShell>
+    );
+}

frontend/src/pages/Leads.jsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
     Inbox,
     Search,
@@ -9,6 +10,9 @@ import {
     Mail,
     ExternalLink,
     Loader2,
+    UserPlus,
+    Trash2,
+    Handshake,
 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -19,17 +23,23 @@ import { cn } from '@/lib/utils';
 const CRM_STATUSES = [
     { value: 'none', label: '—', className: 'bg-slate-300 text-slate-800' },
     { value: 'new_lead', label: 'New Lead', className: 'bg-amber-200 text-amber-950' },
-    { value: 'attempted_to_contact', label: 'Attempted to contact', className: 'bg-rose-100 text-rose-800' },
     { value: 'contacted', label: 'Contacted', className: 'bg-orange-500 text-white' },
     { value: 'qualified', label: 'Qualified', className: 'bg-lime-500 text-white' },
     { value: 'unqualified', label: 'Unqualified', className: 'bg-fuchsia-900 text-white' },
 ];
 
 function statusMeta(value) {
-    return CRM_STATUSES.find((s) => s.value === value) || CRM_STATUSES[1];
+    const v = value === 'attempted_to_contact' ? 'contacted' : value;
+    return CRM_STATUSES.find((s) => s.value === v) || CRM_STATUSES[1];
+}
+
+function statusValueForSelect(leadStatus) {
+    const v = leadStatus === 'attempted_to_contact' ? 'contacted' : leadStatus;
+    return CRM_STATUSES.some((s) => s.value === v) ? v : 'new_lead';
 }
 
 export default function Leads() {
+    const navigate = useNavigate();
     const [leads, setLeads] = useState([]);
     const [total, setTotal] = useState(0);
     const [loading, setLoading] = useState(true);
@@ -39,8 +49,16 @@ export default function Leads() {
     const [selected, setSelected] = useState(null);
     const [threadLoading, setThreadLoading] = useState(false);
     const [threadData, setThreadData] = useState(null);
-    const [moveBusy, setMoveBusy] = useState(null);
     const [seedBusy, setSeedBusy] = useState(false);
+    const [rowSelection, setRowSelection] = useState({});
+    const [bulkBusy, setBulkBusy] = useState(null);
+
+    const selectedIds = useMemo(
+        () => Object.keys(rowSelection).filter((id) => rowSelection[id]).map(Number),
+        [rowSelection]
+    );
+
+    const allPageSelected = leads.length > 0 && leads.every((l) => rowSelection[l.id]);
 
     const webhookUrl = useMemo(() => {
         if (typeof window === 'undefined') return '';
@@ -111,24 +129,6 @@ export default function Leads() {
         }
     };
 
-    const moveToContacts = async (leadId) => {
-        setMoveBusy(leadId);
-        try {
-            const res = await fetch(`/api/leads/${leadId}/move-to-contacts`, { method: 'POST' });
-            const data = await res.json().catch(() => ({}));
-            if (!res.ok) throw new Error(data.detail || res.statusText);
-            await fetchLeads();
-            setSelected((s) =>
-                s && s.id === leadId ? { ...s, contact_id: data.contact_id } : s
-            );
-        } catch (e) {
-            console.error(e);
-            alert(e.message || 'Move failed');
-        } finally {
-            setMoveBusy(null);
-        }
-    };
-
     const loadThread = async (leadId) => {
         setThreadLoading(true);
         setThreadData(null);
@@ -159,6 +159,89 @@ export default function Leads() {
         }
     };
 
+    const toggleRow = (id) => {
+        setRowSelection((prev) => ({ ...prev, [id]: !prev[id] }));
+    };
+
+    const toggleAllPage = () => {
+        if (allPageSelected) {
+            setRowSelection((prev) => {
+                const next = { ...prev };
+                leads.forEach((l) => {
+                    delete next[l.id];
+                });
+                return next;
+            });
+        } else {
+            setRowSelection((prev) => {
+                const next = { ...prev };
+                leads.forEach((l) => {
+                    next[l.id] = true;
+                });
+                return next;
+            });
+        }
+    };
+
+    const runBulkAction = async (action) => {
+        if (selectedIds.length === 0) return;
+        setBulkBusy(action);
+        try {
+            if (action === 'move') {
+                const res = await fetch('/api/leads/bulk-move-to-contacts', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ lead_ids: selectedIds }),
+                });
+                const data = await res.json().catch(() => ({}));
+                if (!res.ok) {
+                    throw new Error(typeof data.detail === 'string' ? data.detail : 'Move failed');
+                }
+                if (data.errors?.length) {
+                    alert(`Moved ${data.moved}. Some rows failed — check console.`);
+                    console.warn(data.errors);
+                }
+            } else if (action === 'delete') {
+                if (!window.confirm(`Delete ${selectedIds.length} lead(s)? This cannot be undone.`)) {
+                    return;
+                }
+                const res = await fetch('/api/leads/bulk-delete', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ lead_ids: selectedIds }),
+                });
+                const data = await res.json().catch(() => ({}));
+                if (!res.ok) {
+                    throw new Error(typeof data.detail === 'string' ? data.detail : 'Delete failed');
+                }
+            } else if (action === 'deals') {
+                const res = await fetch('/api/deals/from-leads', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ lead_ids: selectedIds }),
+                });
+                const data = await res.json().catch(() => ({}));
+                if (!res.ok) {
+                    throw new Error(typeof data.detail === 'string' ? data.detail : 'Convert failed');
+                }
+                if (data.errors?.length) {
+                    console.warn(data.errors);
+                }
+                navigate('/deals');
+            }
+            setRowSelection({});
+            setSelected(null);
+            await fetchLeads();
+        } catch (e) {
+            console.error(e);
+            alert(e.message || 'Action failed');
+        } finally {
+            setBulkBusy(null);
+        }
+    };
+
+    const bulkDisabled = selectedIds.length === 0 || bulkBusy;
+
     return (
         <AppShell
             title="Leads"
@@ -259,151 +342,191 @@ export default function Leads() {
                                     </Button>
                                 </div>
                             ) : (
-                                <table className="w-full text-sm">
-                                    <thead>
-                                        <tr className="bg-slate-50 text-left text-slate-600 border-b border-slate-200">
-                                            <th className="px-3 py-2 font-medium w-10" />
-                                            <th className="px-3 py-2 font-medium">Lead</th>
-                                            <th className="px-3 py-2 font-medium">Status</th>
-                                            <th className="px-3 py-2 font-medium">Create a contact</th>
-                                            <th className="px-3 py-2 font-medium">Company</th>
-                                            <th className="px-3 py-2 font-medium">Title</th>
-                                            <th className="px-3 py-2 font-medium">Email</th>
-                                            <th className="px-3 py-2 font-medium">Last reply</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        {leads.map((lead) => {
-                                            const meta = statusMeta(lead.crm_status);
-                                            const displayName =
-                                                [lead.first_name, lead.last_name].filter(Boolean).join(' ') ||
-                                                lead.email;
-                                            const busy = moveBusy === lead.id;
-                                            return (
-                                                <tr
-                                                    key={lead.id}
-                                                    className={cn(
-                                                        'border-b border-slate-100 hover:bg-violet-50/40',
-                                                        selected?.id === lead.id && 'bg-violet-50/60'
-                                                    )}
-                                                >
-                                                    <td className="px-3 py-2">
-                                                        <input type="checkbox" className="rounded border-slate-300" />
-                                                    </td>
-                                                    <td className="px-3 py-2">
-                                                        <button
-                                                            type="button"
-                                                            onClick={() => openDetail(lead)}
-                                                            className="text-left text-violet-700 hover:underline font-medium"
-                                                        >
-                                                            {displayName}
-                                                        </button>
-                                                    </td>
-                                                    <td className="px-3 py-2">
-                                                        <Select
-                                                            value={
-                                                                CRM_STATUSES.some(
-                                                                    (s) => s.value === lead.crm_status
-                                                                )
-                                                                    ? lead.crm_status
-                                                                    : 'new_lead'
-                                                            }
-                                                            onValueChange={(v) => updateStatus(lead.id, v)}
-                                                        >
-                                                            <SelectTrigger
-                                                                className={cn(
-                                                                    'h-9 w-[min(100%,200px)] border-slate-200',
-                                                                    'shadow-none'
-                                                                )}
+                                <>
+                                    <div className="flex flex-wrap items-center gap-2 px-4 py-2.5 border-b border-slate-100 bg-slate-50/90">
+                                        <span className="text-xs text-slate-500 mr-2">
+                                            {selectedIds.length} selected
+                                        </span>
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            size="icon"
+                                            className="h-9 w-9 shrink-0"
+                                            title="Move to contacts"
+                                            disabled={bulkDisabled}
+                                            onClick={() => runBulkAction('move')}
+                                        >
+                                            {bulkBusy === 'move' ? (
+                                                <Loader2 className="h-4 w-4 animate-spin" />
+                                            ) : (
+                                                <UserPlus className="h-4 w-4" />
+                                            )}
+                                        </Button>
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            size="icon"
+                                            className="h-9 w-9 shrink-0 text-red-600 border-red-200 hover:bg-red-50"
+                                            title="Delete"
+                                            disabled={bulkDisabled}
+                                            onClick={() => runBulkAction('delete')}
+                                        >
+                                            {bulkBusy === 'delete' ? (
+                                                <Loader2 className="h-4 w-4 animate-spin" />
+                                            ) : (
+                                                <Trash2 className="h-4 w-4" />
+                                            )}
+                                        </Button>
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            size="icon"
+                                            className="h-9 w-9 shrink-0 text-violet-700 border-violet-200 hover:bg-violet-50"
+                                            title="Convert as deals"
+                                            disabled={bulkDisabled}
+                                            onClick={() => runBulkAction('deals')}
+                                        >
+                                            {bulkBusy === 'deals' ? (
+                                                <Loader2 className="h-4 w-4 animate-spin" />
+                                            ) : (
+                                                <Handshake className="h-4 w-4" />
+                                            )}
+                                        </Button>
+                                    </div>
+                                    <table className="w-full text-sm">
+                                        <thead>
+                                            <tr className="bg-slate-50 text-left text-slate-600 border-b border-slate-200">
+                                                <th className="px-3 py-2 font-medium w-10">
+                                                    <input
+                                                        type="checkbox"
+                                                        className="rounded border-slate-300"
+                                                        checked={allPageSelected}
+                                                        onChange={toggleAllPage}
+                                                        aria-label="Select all on page"
+                                                    />
+                                                </th>
+                                                <th className="px-3 py-2 font-medium">Lead</th>
+                                                <th className="px-3 py-2 font-medium">Status</th>
+                                                <th className="px-3 py-2 font-medium">Company</th>
+                                                <th className="px-3 py-2 font-medium">Title</th>
+                                                <th className="px-3 py-2 font-medium">Email</th>
+                                                <th className="px-3 py-2 font-medium">Last reply</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {leads.map((lead) => {
+                                                const meta = statusMeta(lead.crm_status);
+                                                const displayName =
+                                                    [lead.first_name, lead.last_name].filter(Boolean).join(' ') ||
+                                                    lead.email;
+                                                return (
+                                                    <tr
+                                                        key={lead.id}
+                                                        className={cn(
+                                                            'border-b border-slate-100 hover:bg-violet-50/40',
+                                                            selected?.id === lead.id && 'bg-violet-50/60'
+                                                        )}
+                                                    >
+                                                        <td className="px-3 py-2">
+                                                            <input
+                                                                type="checkbox"
+                                                                className="rounded border-slate-300"
+                                                                checked={!!rowSelection[lead.id]}
+                                                                onChange={() => toggleRow(lead.id)}
+                                                                aria-label={`Select ${displayName}`}
+                                                            />
+                                                        </td>
+                                                        <td className="px-3 py-2">
+                                                            <button
+                                                                type="button"
+                                                                onClick={() => openDetail(lead)}
+                                                                className="text-left text-violet-700 hover:underline font-medium"
                                                             >
-                                                                <span
+                                                                {displayName}
+                                                            </button>
+                                                            {lead.contact_id ? (
+                                                                <span className="ml-2 text-xs text-emerald-600">
+                                                                    (in Contacts)
+                                                                </span>
+                                                            ) : null}
+                                                        </td>
+                                                        <td className="px-3 py-2">
+                                                            <Select
+                                                                value={statusValueForSelect(lead.crm_status)}
+                                                                onValueChange={(v) => updateStatus(lead.id, v)}
+                                                            >
+                                                                <SelectTrigger
                                                                     className={cn(
-                                                                        'rounded-full px-2.5 py-0.5 text-xs font-medium',
-                                                                        meta.className
+                                                                        'h-9 w-[min(100%,200px)] border-slate-200',
+                                                                        'shadow-none'
                                                                     )}
                                                                 >
-                                                                    {meta.label}
-                                                                </span>
-                                                            </SelectTrigger>
-                                                            <SelectContent className="min-w-[240px]">
-                                                                {CRM_STATUSES.map((s) => (
-                                                                    <SelectItem
-                                                                        key={s.value}
-                                                                        value={s.value}
-                                                                        className="cursor-pointer"
+                                                                    <span
+                                                                        className={cn(
+                                                                            'rounded-full px-2.5 py-0.5 text-xs font-medium',
+                                                                            meta.className
+                                                                        )}
                                                                     >
-                                                                        <span
-                                                                            className={cn(
-                                                                                'rounded-full px-2.5 py-0.5 text-xs font-medium inline-block',
-                                                                                s.className
-                                                                            )}
+                                                                        {meta.label}
+                                                                    </span>
+                                                                </SelectTrigger>
+                                                                <SelectContent className="min-w-[240px]">
+                                                                    {CRM_STATUSES.map((s) => (
+                                                                        <SelectItem
+                                                                            key={s.value}
+                                                                            value={s.value}
+                                                                            className="cursor-pointer"
                                                                         >
-                                                                            {s.label}
-                                                                        </span>
-                                                                    </SelectItem>
-                                                                ))}
-                                                            </SelectContent>
-                                                        </Select>
-                                                    </td>
-                                                    <td className="px-3 py-2">
-                                                        {lead.contact_id ? (
-                                                            <a
-                                                                href={`/contacts`}
-                                                                className="text-xs text-emerald-700 font-medium"
-                                                            >
-                                                                In Contacts (#{lead.contact_id})
-                                                            </a>
-                                                        ) : (
-                                                            <Button
-                                                                size="sm"
-                                                                className="bg-emerald-600 hover:bg-emerald-700 text-white h-8"
-                                                                disabled={busy}
-                                                                onClick={() => moveToContacts(lead.id)}
-                                                            >
-                                                                {busy ? (
-                                                                    <Loader2 className="h-4 w-4 animate-spin" />
-                                                                ) : (
-                                                                    'Move to Contacts'
-                                                                )}
-                                                            </Button>
-                                                        )}
-                                                    </td>
-                                                    <td className="px-3 py-2 text-slate-700">
-                                                        <span className="inline-flex items-center gap-1">
-                                                            <Building2 className="h-3.5 w-3.5 text-slate-400" />
-                                                            {lead.company_name || '—'}
-                                                        </span>
-                                                    </td>
-                                                    <td className="px-3 py-2 text-slate-700">
-                                                        <span className="inline-flex items-center gap-1">
-                                                            <Briefcase className="h-3.5 w-3.5 text-slate-400" />
-                                                            {lead.title || '—'}
-                                                        </span>
-                                                    </td>
-                                                    <td className="px-3 py-2">
-                                                        {lead.email ? (
-                                                            <a
-                                                                href={`mailto:${lead.email}`}
-                                                                className="text-violet-600 hover:underline inline-flex items-center gap-1"
-                                                            >
-                                                                <Mail className="h-3.5 w-3.5" />
-                                                                {lead.email}
-                                                            </a>
-                                                        ) : (
-                                                            '—'
-                                                        )}
-                                                    </td>
-                                                    <td className="px-3 py-2 text-slate-600 max-w-[200px] truncate" title={lead.last_reply_body}>
-                                                        {lead.last_reply_body
-                                                            ? lead.last_reply_body.slice(0, 80) +
-                                                              (lead.last_reply_body.length > 80 ? '…' : '')
-                                                            : '—'}
-                                                    </td>
-                                                </tr>
-                                            );
-                                        })}
-                                    </tbody>
-                                </table>
+                                                                            <span
+                                                                                className={cn(
+                                                                                    'rounded-full px-2.5 py-0.5 text-xs font-medium inline-block',
+                                                                                    s.className
+                                                                                )}
+                                                                            >
+                                                                                {s.label}
+                                                                            </span>
+                                                                        </SelectItem>
+                                                                    ))}
+                                                                </SelectContent>
+                                                            </Select>
+                                                        </td>
+                                                        <td className="px-3 py-2 text-slate-700">
+                                                            <span className="inline-flex items-center gap-1">
+                                                                <Building2 className="h-3.5 w-3.5 text-slate-400" />
+                                                                {lead.company_name || '—'}
+                                                            </span>
+                                                        </td>
+                                                        <td className="px-3 py-2 text-slate-700">
+                                                            <span className="inline-flex items-center gap-1">
+                                                                <Briefcase className="h-3.5 w-3.5 text-slate-400" />
+                                                                {lead.title || '—'}
+                                                            </span>
+                                                        </td>
+                                                        <td className="px-3 py-2">
+                                                            {lead.email ? (
+                                                                <a
+                                                                    href={`mailto:${lead.email}`}
+                                                                    className="text-violet-600 hover:underline inline-flex items-center gap-1"
+                                                                >
+                                                                    <Mail className="h-3.5 w-3.5" />
+                                                                    {lead.email}
+                                                                </a>
+                                                            ) : (
+                                                                '—'
+                                                            )}
+                                                        </td>
+                                                        <td className="px-3 py-2 text-slate-600 max-w-[200px] truncate" title={lead.last_reply_body}>
+                                                            {lead.last_reply_body
+                                                                ? lead.last_reply_body.slice(0, 80) +
+                                                                  (lead.last_reply_body.length > 80 ? '…' : '')
+                                                                : '—'}
+                                                        </td>
+                                                    </tr>
+                                                );
+                                            })}
+                                        </tbody>
+                                    </table>
+                                </>
                             )}
                         </div>
                     )}