update

backend/app/database.py

@@ -54,6 +54,22 @@ class GeneratedSequence(Base):
     created_at = Column(DateTime, default=datetime.utcnow)
 
 
+class Contact(Base):
+    __tablename__ = "contacts"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    file_id = Column(String, index=True)
+    row_index = Column(Integer)
+    first_name = Column(String)
+    last_name = Column(String)
+    email = Column(String, index=True)
+    company = Column(String)
+    title = Column(String)
+    source = Column(String, default="apollo_csv")
+    raw_data = Column(JSON)
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+
 class SmartleadRun(Base):
     __tablename__ = "smartlead_runs"
     

backend/app/main.py

@@ -16,7 +16,7 @@ import asyncio
 import math
 from datetime import datetime
 
-from .database import get_db, UploadedFile, Prompt, GeneratedSequence, SmartleadRun
+from .database import get_db, UploadedFile, Prompt, GeneratedSequence, SmartleadRun, Contact
 from .models import UploadResponse, PromptSaveRequest, SequenceResponse, SmartleadPushRequest, SmartleadRunResponse
 from .gpt_service import generate_email_sequence
 from .smartlead_client import SmartleadClient
@@ -36,6 +36,24 @@ UPLOAD_DIR = Path("/data/uploads")
 UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
 
 # ---- API ----
+def _safe_str(value):
+    if value is None:
+        return ""
+    if isinstance(value, float):
+        if math.isnan(value):
+            return ""
+        return str(value).strip()
+    return str(value).strip()
+
+
+def _pick_field(row_dict: Dict, aliases: List[str]) -> str:
+    lowered = {str(k).strip().lower(): v for k, v in row_dict.items()}
+    for alias in aliases:
+        if alias in lowered:
+            return _safe_str(lowered[alias])
+    return ""
+
+
 @app.get("/api/health")
 def health():
     return {"status": "ok"}
@@ -62,7 +80,7 @@ async def upload_csv(file: UploadFile = File(...), db: Session = Depends(get_db)
         df = pd.read_csv(file_path)
         contact_count = len(df)
         
-        # Save to database
+        # Save upload metadata
         db_file = UploadedFile(
             file_id=file_id,
             filename=file.filename,
@@ -70,6 +88,24 @@ async def upload_csv(file: UploadFile = File(...), db: Session = Depends(get_db)
             file_path=str(file_path)
         )
         db.add(db_file)
+
+        # Persist uploaded contacts for CRM/contacts views
+        for idx, row in df.iterrows():
+            row_dict = row.to_dict()
+            sanitized_raw_data = {str(k): _safe_str(v) for k, v in row_dict.items()}
+            contact = Contact(
+                file_id=file_id,
+                row_index=idx + 1,
+                first_name=_pick_field(row_dict, ["first name", "firstname", "first_name"]),
+                last_name=_pick_field(row_dict, ["last name", "lastname", "last_name"]),
+                email=_pick_field(row_dict, ["email", "work email", "email address"]),
+                company=_pick_field(row_dict, ["company", "organization name", "account name"]),
+                title=_pick_field(row_dict, ["title", "job title"]),
+                source="apollo_csv",
+                raw_data=sanitized_raw_data,
+            )
+            db.add(contact)
+
         db.commit()
         
         return {
@@ -81,6 +117,107 @@ async def upload_csv(file: UploadFile = File(...), db: Session = Depends(get_db)
         raise HTTPException(status_code=500, detail=f"Error uploading file: {str(e)}")
 
 
+@app.get("/api/contacts")
+async def list_contacts(
+    search: str = Query("", description="Search by name/email/company/title"),
+    limit: int = Query(200, ge=1, le=1000),
+    offset: int = Query(0, ge=0),
+    db: Session = Depends(get_db)
+):
+    query = db.query(Contact)
+    if search:
+        pattern = f"%{search}%"
+        query = query.filter(
+            (Contact.first_name.ilike(pattern)) |
+            (Contact.last_name.ilike(pattern)) |
+            (Contact.email.ilike(pattern)) |
+            (Contact.company.ilike(pattern)) |
+            (Contact.title.ilike(pattern))
+        )
+    total = query.count()
+    contacts = (
+        query.order_by(Contact.created_at.desc(), Contact.id.desc())
+        .offset(offset)
+        .limit(limit)
+        .all()
+    )
+    return {
+        "total": total,
+        "contacts": [
+            {
+                "id": c.id,
+                "file_id": c.file_id,
+                "row_index": c.row_index,
+                "first_name": c.first_name or "",
+                "last_name": c.last_name or "",
+                "email": c.email or "",
+                "company": c.company or "",
+                "title": c.title or "",
+                "source": c.source or "apollo_csv",
+                "created_at": c.created_at.isoformat() if c.created_at else None,
+            }
+            for c in contacts
+        ],
+    }
+
+
+@app.get("/api/contacts/{contact_id}")
+async def get_contact(contact_id: int, db: Session = Depends(get_db)):
+    contact = db.query(Contact).filter(Contact.id == contact_id).first()
+    if not contact:
+        raise HTTPException(status_code=404, detail="Contact not found")
+    return {
+        "id": contact.id,
+        "file_id": contact.file_id,
+        "row_index": contact.row_index,
+        "first_name": contact.first_name or "",
+        "last_name": contact.last_name or "",
+        "email": contact.email or "",
+        "company": contact.company or "",
+        "title": contact.title or "",
+        "source": contact.source or "apollo_csv",
+        "created_at": contact.created_at.isoformat() if contact.created_at else None,
+        "raw_data": contact.raw_data or {},
+    }
+
+
+@app.get("/api/contacts/{contact_id}/sequences")
+async def get_contact_sequences(contact_id: int, db: Session = Depends(get_db)):
+    contact = db.query(Contact).filter(Contact.id == contact_id).first()
+    if not contact:
+        raise HTTPException(status_code=404, detail="Contact not found")
+
+    if not contact.email:
+        return {"contact_id": contact_id, "sequences": []}
+
+    sequences = (
+        db.query(GeneratedSequence)
+        .filter(
+            GeneratedSequence.file_id == contact.file_id,
+            GeneratedSequence.email == contact.email
+        )
+        .order_by(GeneratedSequence.sequence_id, GeneratedSequence.email_number)
+        .all()
+    )
+
+    return {
+        "contact_id": contact_id,
+        "sequences": [
+            {
+                "id": s.id,
+                "file_id": s.file_id,
+                "sequence_id": s.sequence_id,
+                "email_number": s.email_number,
+                "subject": s.subject or "",
+                "email_content": s.email_content or "",
+                "product": s.product or "",
+                "created_at": s.created_at.isoformat() if s.created_at else None,
+            }
+            for s in sequences
+        ],
+    }
+
+
 @app.post("/api/save-prompts")
 async def save_prompts(request: PromptSaveRequest, db: Session = Depends(get_db)):
     """Save prompt templates for products"""

frontend/src/App.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import EmailSequenceGenerator from "./pages/EmailSequenceGenerator";
 import RunHistory from "./pages/RunHistory";
+import Contacts from "./pages/Contacts";
 import "./index.css";
 
 export default function App() {
@@ -9,6 +10,7 @@ export default function App() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<EmailSequenceGenerator />} />
+        <Route path="/contacts" element={<Contacts />} />
         <Route path="/history" element={<RunHistory />} />
       </Routes>
     </BrowserRouter>

frontend/src/components/layout/AppHeader.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Zap } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+
+const MENU_ITEMS = [
+    { label: 'Generator', href: '/' },
+    { label: 'Contacts', href: '/contacts' },
+    { label: 'Run History', href: '/history' },
+];
+
+export default function AppHeader({ rightContent }) {
+    const location = useLocation();
+
+    return (
+        <header className="border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-50">
+            <div className="max-w-6xl mx-auto px-6 py-4">
+                <div className="flex items-center justify-between gap-4">
+                    <div className="flex items-center gap-6">
+                        <div className="flex items-center gap-3">
+                            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-200">
+                                <Zap className="h-5 w-5 text-white" />
+                            </div>
+                            <div>
+                                <h1 className="font-bold text-slate-800 text-lg">SequenceAI</h1>
+                                <p className="text-xs text-slate-500">Personalized Email Outreach</p>
+                            </div>
+                        </div>
+                        <nav className="hidden md:flex items-center gap-2">
+                            {MENU_ITEMS.map((item) => {
+                                const isActive = location.pathname === item.href;
+                                return (
+                                    <Button
+                                        key={item.href}
+                                        asChild
+                                        variant={isActive ? "default" : "ghost"}
+                                        size="sm"
+                                        className={isActive ? "bg-violet-600 hover:bg-violet-700" : "text-slate-600"}
+                                    >
+                                        <Link to={item.href}>{item.label}</Link>
+                                    </Button>
+                                );
+                            })}
+                        </nav>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        {rightContent}
+                    </div>
+                </div>
+                <nav className="md:hidden flex items-center gap-2 mt-3">
+                    {MENU_ITEMS.map((item) => {
+                        const isActive = location.pathname === item.href;
+                        return (
+                            <Button
+                                key={item.href}
+                                asChild
+                                variant={isActive ? "default" : "outline"}
+                                size="sm"
+                                className={isActive ? "bg-violet-600 hover:bg-violet-700" : ""}
+                            >
+                                <Link to={item.href}>{item.label}</Link>
+                            </Button>
+                        );
+                    })}
+                </nav>
+            </div>
+        </header>
+    );
+}

frontend/src/pages/Contacts.jsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Users, Search, Mail, Building2, Briefcase, FileText } from 'lucide-react';
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import AppHeader from '@/components/layout/AppHeader';
+
+export default function Contacts() {
+    const [contacts, setContacts] = useState([]);
+    const [selectedContact, setSelectedContact] = useState(null);
+    const [sequences, setSequences] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [seqLoading, setSeqLoading] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+
+    useEffect(() => {
+        fetchContacts();
+    }, []);
+
+    const fetchContacts = async () => {
+        setLoading(true);
+        try {
+            const res = await fetch('/api/contacts?limit=1000');
+            if (res.ok) {
+                const data = await res.json();
+                setContacts(data.contacts || []);
+            }
+        } catch (e) {
+            console.error('Failed to fetch contacts:', e);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const openContact = async (contact) => {
+        setSelectedContact(contact);
+        setSeqLoading(true);
+        try {
+            const res = await fetch(`/api/contacts/${contact.id}/sequences`);
+            if (res.ok) {
+                const data = await res.json();
+                setSequences(data.sequences || []);
+            } else {
+                setSequences([]);
+            }
+        } catch (e) {
+            console.error('Failed to fetch contact sequences:', e);
+            setSequences([]);
+        } finally {
+            setSeqLoading(false);
+        }
+    };
+
+    const filteredContacts = useMemo(() => {
+        const q = searchQuery.trim().toLowerCase();
+        if (!q) return contacts;
+        return contacts.filter((c) =>
+            `${c.first_name} ${c.last_name}`.toLowerCase().includes(q) ||
+            (c.email || '').toLowerCase().includes(q) ||
+            (c.company || '').toLowerCase().includes(q) ||
+            (c.title || '').toLowerCase().includes(q)
+        );
+    }, [contacts, searchQuery]);
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-violet-50">
+            <AppHeader />
+            <main className="max-w-6xl mx-auto px-6 py-8">
+                <div className="mb-8">
+                    <h2 className="text-2xl font-bold text-slate-800 mb-2">Contacts</h2>
+                    <p className="text-slate-500">Apollo CSV contacts stored in your local database.</p>
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+                    <section className="lg:col-span-2 rounded-2xl border border-slate-200 bg-white p-4">
+                        <div className="relative mb-4">
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+                            <Input
+                                placeholder="Search contacts..."
+                                value={searchQuery}
+                                onChange={(e) => setSearchQuery(e.target.value)}
+                                className="pl-10"
+                            />
+                        </div>
+                        <div className="max-h-[70vh] overflow-y-auto space-y-2 pr-1">
+                            {loading ? (
+                                <p className="text-sm text-slate-500 p-3">Loading contacts...</p>
+                            ) : filteredContacts.length === 0 ? (
+                                <div className="text-center py-12 text-slate-400">
+                                    <Users className="h-8 w-8 mx-auto mb-2" />
+                                    <p>No contacts found</p>
+                                </div>
+                            ) : (
+                                filteredContacts.map((contact) => {
+                                    const active = selectedContact?.id === contact.id;
+                                    return (
+                                        <button
+                                            key={contact.id}
+                                            onClick={() => openContact(contact)}
+                                            className={`w-full text-left rounded-xl border p-3 transition ${
+                                                active
+                                                    ? 'border-violet-300 bg-violet-50'
+                                                    : 'border-slate-200 bg-white hover:bg-slate-50'
+                                            }`}
+                                        >
+                                            <div className="font-medium text-slate-800">
+                                                {contact.first_name} {contact.last_name}
+                                            </div>
+                                            <div className="text-xs text-slate-500 truncate">{contact.email || 'No email'}</div>
+                                            <div className="text-xs text-slate-400 truncate">{contact.company || 'No company'}</div>
+                                        </button>
+                                    );
+                                })
+                            )}
+                        </div>
+                    </section>
+
+                    <section className="lg:col-span-3 rounded-2xl border border-slate-200 bg-white p-6">
+                        {!selectedContact ? (
+                            <div className="h-full min-h-[300px] flex items-center justify-center text-slate-400">
+                                <div className="text-center">
+                                    <FileText className="h-10 w-10 mx-auto mb-2" />
+                                    <p>Select a contact to view generated sequences</p>
+                                </div>
+                            </div>
+                        ) : (
+                            <div>
+                                <div className="mb-6">
+                                    <h3 className="text-xl font-semibold text-slate-800">
+                                        {selectedContact.first_name} {selectedContact.last_name}
+                                    </h3>
+                                    <div className="mt-2 flex flex-wrap gap-2 text-xs text-slate-600">
+                                        <Badge variant="outline" className="gap-1"><Mail className="h-3 w-3" /> {selectedContact.email || 'N/A'}</Badge>
+                                        <Badge variant="outline" className="gap-1"><Building2 className="h-3 w-3" /> {selectedContact.company || 'N/A'}</Badge>
+                                        <Badge variant="outline" className="gap-1"><Briefcase className="h-3 w-3" /> {selectedContact.title || 'N/A'}</Badge>
+                                    </div>
+                                </div>
+
+                                {seqLoading ? (
+                                    <p className="text-sm text-slate-500">Loading sequences...</p>
+                                ) : sequences.length === 0 ? (
+                                    <p className="text-sm text-slate-500">No generated sequences found for this contact yet.</p>
+                                ) : (
+                                    <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1">
+                                        {sequences.map((seq) => (
+                                            <div key={seq.id} className="rounded-xl border border-slate-200 p-4 bg-slate-50/50">
+                                                <div className="flex items-center justify-between mb-2">
+                                                    <div className="font-medium text-slate-800">
+                                                        Email {seq.email_number} {seq.product ? `• ${seq.product}` : ''}
+                                                    </div>
+                                                </div>
+                                                <div className="text-sm mb-2">
+                                                    <span className="font-semibold text-slate-700">Subject: </span>
+                                                    <span className="text-slate-700">{seq.subject}</span>
+                                                </div>
+                                                <div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-700 whitespace-pre-wrap">
+                                                    {seq.email_content}
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </section>
+                </div>
+            </main>
+        </div>
+    );
+}

frontend/src/pages/EmailSequenceGenerator.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import { Sparkles, ArrowRight, ArrowLeft, Mail, Zap } from 'lucide-react';
+import { Sparkles, ArrowRight, ArrowLeft } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 import { motion, AnimatePresence } from 'framer-motion';
 
@@ -7,6 +7,7 @@ import UploadStep from '@/components/upload/UploadStep';
 import ProductSelector from '@/components/products/ProductSelector';
 import PromptEditor from '@/components/prompts/PromptEditor';
 import SequenceViewer from '@/components/sequences/SequenceViewer';
+import AppHeader from '@/components/layout/AppHeader';
 
 export default function EmailSequenceGenerator() {
     const [step, setStep] = useState(1);
@@ -78,32 +79,19 @@ export default function EmailSequenceGenerator() {
 
     return (
         <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-violet-50">
-            {/* Header */}
-            <header className="border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-50">
-                <div className="max-w-6xl mx-auto px-6 py-4">
-                    <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-violet-600 to-purple-600 
-                                            flex items-center justify-center shadow-lg shadow-violet-200">
-                                <Zap className="h-5 w-5 text-white" />
-                            </div>
-                            <div>
-                                <h1 className="font-bold text-slate-800 text-lg">SequenceAI</h1>
-                                <p className="text-xs text-slate-500">Personalized Email Outreach</p>
-                            </div>
-                        </div>
-                        {step > 1 && (
-                            <Button
-                                variant="ghost"
-                                onClick={handleReset}
-                                className="text-slate-500 hover:text-slate-700"
-                            >
-                                Start Over
-                            </Button>
-                        )}
-                    </div>
-                </div>
-            </header>
+            <AppHeader
+                rightContent={
+                    step > 1 ? (
+                        <Button
+                            variant="ghost"
+                            onClick={handleReset}
+                            className="text-slate-500 hover:text-slate-700"
+                        >
+                            Start Over
+                        </Button>
+                    ) : null
+                }
+            />
 
             <main className="max-w-6xl mx-auto px-6 py-8">
                 {/* Progress Steps */}

frontend/src/pages/RunHistory.jsx

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
 import { motion } from 'framer-motion';
+import AppHeader from '@/components/layout/AppHeader';
 
 export default function RunHistory() {
     const [runs, setRuns] = useState([]);
@@ -68,30 +69,7 @@ export default function RunHistory() {
 
     return (
         <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-violet-50">
-            {/* Header */}
-            <header className="border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-50">
-                <div className="max-w-6xl mx-auto px-6 py-4">
-                    <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-violet-600 to-purple-600 
-                                            flex items-center justify-center shadow-lg shadow-violet-200">
-                                <History className="h-5 w-5 text-white" />
-                            </div>
-                            <div>
-                                <h1 className="font-bold text-slate-800 text-lg">Run History</h1>
-                                <p className="text-xs text-slate-500">Smartlead campaign push history</p>
-                            </div>
-                        </div>
-                        <Button
-                            variant="outline"
-                            onClick={() => window.location.href = '/'}
-                            className="text-slate-500 hover:text-slate-700"
-                        >
-                            Back to Generator
-                        </Button>
-                    </div>
-                </div>
-            </header>
+            <AppHeader />
 
             <main className="max-w-6xl mx-auto px-6 py-8">
                 {/* Filters */}