update

backend/app/main.py

@@ -46,6 +46,21 @@ def _safe_str(value):
     return str(value).strip()
 
 
+def _json_safe(value):
+    if value is None:
+        return None
+    if isinstance(value, float):
+        if math.isnan(value):
+            return None
+        return value
+    # Pandas may return numpy scalar types; use Python-native via json fallback
+    try:
+        json.dumps(value)
+        return value
+    except TypeError:
+        return _safe_str(value)
+
+
 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:
@@ -92,7 +107,7 @@ async def upload_csv(file: UploadFile = File(...), db: Session = Depends(get_db)
         # 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()}
+            sanitized_raw_data = {str(k): _json_safe(v) for k, v in row_dict.items()}
             contact = Contact(
                 file_id=file_id,
                 row_index=idx + 1,
@@ -117,9 +132,24 @@ 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/contact-fields")
+async def contact_fields(db: Session = Depends(get_db)):
+    """Return all available contact field names from uploaded Apollo rows."""
+    contacts = db.query(Contact.raw_data).all()
+    fields = set(["first_name", "last_name", "email", "company", "title", "file_id", "created_at"])
+    for item in contacts:
+        raw = item[0] or {}
+        if isinstance(raw, dict):
+            for key in raw.keys():
+                fields.add(str(key))
+    return {"fields": sorted(fields)}
+
+
 @app.get("/api/contacts")
 async def list_contacts(
     search: str = Query("", description="Search by name/email/company/title"),
+    field: str = Query("", description="Optional field name to filter"),
+    value: str = Query("", description="Optional field value to filter"),
     limit: int = Query(200, ge=1, le=1000),
     offset: int = Query(0, ge=0),
     db: Session = Depends(get_db)
@@ -134,13 +164,34 @@ async def list_contacts(
             (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()
-    )
+    contacts_all = query.order_by(Contact.created_at.desc(), Contact.id.desc()).all()
+
+    # Dynamic field filtering for all imported Apollo attributes.
+    if field and value:
+        v = value.lower()
+
+        def match_dynamic(c: Contact):
+            if field == "first_name":
+                return v in (c.first_name or "").lower()
+            if field == "last_name":
+                return v in (c.last_name or "").lower()
+            if field == "email":
+                return v in (c.email or "").lower()
+            if field == "company":
+                return v in (c.company or "").lower()
+            if field == "title":
+                return v in (c.title or "").lower()
+            if field == "file_id":
+                return v in (c.file_id or "").lower()
+            if field == "created_at":
+                return v in ((c.created_at.isoformat() if c.created_at else "").lower())
+            raw_val = (c.raw_data or {}).get(field)
+            return v in _safe_str(raw_val).lower()
+
+        contacts_all = [c for c in contacts_all if match_dynamic(c)]
+
+    total = len(contacts_all)
+    contacts = contacts_all[offset:offset + limit]
     return {
         "total": total,
         "contacts": [

frontend/src/components/layout/AppShell.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Zap, LayoutDashboard, Users, History } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+
+const NAV_ITEMS = [
+    { label: 'Generator', href: '/', icon: LayoutDashboard },
+    { label: 'Contacts', href: '/contacts', icon: Users },
+    { label: 'Run History', href: '/history', icon: History },
+];
+
+export default function AppShell({ title, subtitle, rightContent, children }) {
+    const location = useLocation();
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-violet-50">
+            <div className="flex min-h-screen">
+                <aside className="hidden md:flex w-72 border-r border-slate-200 bg-white/85 backdrop-blur-sm p-4 flex-col gap-6 sticky top-0 h-screen">
+                    <div className="flex items-center gap-3 px-2 py-1">
+                        <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">CRM-ready workspace</p>
+                        </div>
+                    </div>
+                    <nav className="space-y-1">
+                        {NAV_ITEMS.map((item) => {
+                            const Icon = item.icon;
+                            const active = location.pathname === item.href;
+                            return (
+                                <Button
+                                    asChild
+                                    key={item.href}
+                                    variant={active ? "default" : "ghost"}
+                                    className={`w-full justify-start ${active ? 'bg-violet-600 hover:bg-violet-700' : 'text-slate-700'}`}
+                                >
+                                    <Link to={item.href}>
+                                        <Icon className="h-4 w-4 mr-2" />
+                                        {item.label}
+                                    </Link>
+                                </Button>
+                            );
+                        })}
+                    </nav>
+                </aside>
+
+                <div className="flex-1 min-w-0">
+                    <header className="border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-40">
+                        <div className="max-w-6xl mx-auto px-6 py-4">
+                            <div className="flex items-center justify-between gap-4">
+                                <div>
+                                    <h2 className="text-xl font-bold text-slate-800">{title}</h2>
+                                    {subtitle && <p className="text-sm text-slate-500">{subtitle}</p>}
+                                </div>
+                                <div className="flex items-center gap-2">{rightContent}</div>
+                            </div>
+                            <nav className="md:hidden flex items-center gap-2 mt-3">
+                                {NAV_ITEMS.map((item) => {
+                                    const active = location.pathname === item.href;
+                                    return (
+                                        <Button
+                                            asChild
+                                            key={item.href}
+                                            size="sm"
+                                            variant={active ? "default" : "outline"}
+                                            className={active ? "bg-violet-600 hover:bg-violet-700" : ""}
+                                        >
+                                            <Link to={item.href}>{item.label}</Link>
+                                        </Button>
+                                    );
+                                })}
+                            </nav>
+                        </div>
+                    </header>
+                    <main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/src/pages/Contacts.jsx

@@ -1,26 +1,54 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Users, Search, Mail, Building2, Briefcase, FileText } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { Users, Search, Mail, Building2, Briefcase, FileText, SlidersHorizontal } 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';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import AppShell from '@/components/layout/AppShell';
 
 export default function Contacts() {
     const [contacts, setContacts] = useState([]);
+    const [fields, setFields] = useState([]);
     const [selectedContact, setSelectedContact] = useState(null);
     const [sequences, setSequences] = useState([]);
     const [loading, setLoading] = useState(true);
     const [seqLoading, setSeqLoading] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
+    const [filterField, setFilterField] = useState('none');
+    const [filterValue, setFilterValue] = useState('');
 
     useEffect(() => {
+        fetchFields();
         fetchContacts();
     }, []);
 
+    useEffect(() => {
+        const timer = setTimeout(() => fetchContacts(), 250);
+        return () => clearTimeout(timer);
+    }, [searchQuery, filterField, filterValue]);
+
+    const fetchFields = async () => {
+        try {
+            const res = await fetch('/api/contact-fields');
+            if (res.ok) {
+                const data = await res.json();
+                setFields(data.fields || []);
+            }
+        } catch (e) {
+            console.error('Failed to fetch contact fields:', e);
+        }
+    };
+
     const fetchContacts = async () => {
         setLoading(true);
         try {
-            const res = await fetch('/api/contacts?limit=1000');
+            const params = new URLSearchParams();
+            params.set('limit', '1000');
+            if (searchQuery.trim()) params.set('search', searchQuery.trim());
+            if (filterField !== 'none' && filterValue.trim()) {
+                params.set('field', filterField);
+                params.set('value', filterValue.trim());
+            }
+            const res = await fetch(`/api/contacts?${params.toString()}`);
             if (res.ok) {
                 const data = await res.json();
                 setContacts(data.contacts || []);
@@ -51,120 +79,128 @@ export default function Contacts() {
         }
     };
 
-    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" />
+        <AppShell
+            title="Contacts"
+            subtitle="Apollo CSV contacts stored in SQLite with full field payload."
+        >
+            <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-3">
+                        <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="grid grid-cols-1 gap-2 mb-4">
+                        <div className="flex items-center text-xs text-slate-500 gap-1">
+                            <SlidersHorizontal className="h-3 w-3" />
+                            Filter by any Apollo field
+                        </div>
+                        <Select value={filterField} onValueChange={setFilterField}>
+                            <SelectTrigger>
+                                <SelectValue placeholder="Choose field" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="none">No field filter</SelectItem>
+                                {fields.map((field) => (
+                                    <SelectItem key={field} value={field}>{field}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        {filterField !== 'none' && (
                             <Input
-                                placeholder="Search contacts..."
-                                value={searchQuery}
-                                onChange={(e) => setSearchQuery(e.target.value)}
-                                className="pl-10"
+                                placeholder={`Contains value for "${filterField}"`}
+                                value={filterValue}
+                                onChange={(e) => setFilterValue(e.target.value)}
                             />
-                        </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 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>
+                        ) : contacts.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>
                         ) : (
-                            <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>
+                            contacts.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}
+                            {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>
-                                )}
-                            </div>
-                        )}
-                    </section>
-                </div>
-            </main>
-        </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>
+        </AppShell>
     );
 }

frontend/src/pages/EmailSequenceGenerator.jsx

@@ -7,7 +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';
+import AppShell from '@/components/layout/AppShell';
 
 export default function EmailSequenceGenerator() {
     const [step, setStep] = useState(1);
@@ -78,22 +78,21 @@ export default function EmailSequenceGenerator() {
     };
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-violet-50">
-            <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">
+        <AppShell
+            title="Sequence Generator"
+            subtitle="Import Apollo contacts, configure prompts, and generate sequences."
+            rightContent={
+                step > 1 ? (
+                    <Button
+                        variant="ghost"
+                        onClick={handleReset}
+                        className="text-slate-500 hover:text-slate-700"
+                    >
+                        Start Over
+                    </Button>
+                ) : null
+            }
+        >
                 {/* Progress Steps */}
                 <div className="mb-10">
                     <div className="flex items-center justify-center gap-4">
@@ -278,8 +277,6 @@ export default function EmailSequenceGenerator() {
                         </motion.div>
                     )}
                 </AnimatePresence>
-            </main>
-
             {/* Footer */}
             <footer className="border-t border-slate-100 mt-16">
                 <div className="max-w-6xl mx-auto px-6 py-6">
@@ -306,6 +303,6 @@ export default function EmailSequenceGenerator() {
                     background: #94a3b8;
                 }
             `}</style>
-        </div>
+        </AppShell>
     );
 }

frontend/src/pages/RunHistory.jsx

@@ -5,7 +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';
+import AppShell from '@/components/layout/AppShell';
 
 export default function RunHistory() {
     const [runs, setRuns] = useState([]);
@@ -68,10 +68,10 @@ export default function RunHistory() {
     };
 
     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">
+        <AppShell
+            title="Run History"
+            subtitle="Smartlead campaign push history"
+        >
                 {/* Filters */}
                 <div className="mb-6 flex flex-col sm:flex-row gap-3">
                     <div className="relative flex-1">
@@ -215,7 +215,6 @@ export default function RunHistory() {
                         ))}
                     </div>
                 )}
-            </main>
-        </div>
+        </AppShell>
     );
 }