update

backend/app/main.py

@@ -159,6 +159,52 @@ DEAL_STAGE_ALLOWED = frozenset({
 })
 SMARTLEAD_IMPORT_FILE_ID = "smartlead-imports"
 MANUAL_CONTACT_FILE_ID = "manual-contacts"
+DEMO_CONTACTS_FILE_ID = "demo-contacts-crm"
+
+
+def _contact_matches_apollo_filter(c: Contact, rule: dict) -> bool:
+    """Single dynamic-field rule (same semantics as legacy single-field query)."""
+    field = _safe_str(rule.get("field"))
+    if not field:
+        return True
+    op_local = (_safe_str(rule.get("op") or "contains")).lower()
+    value = _safe_str(rule.get("value"))
+    from_value = _safe_str(rule.get("from_value"))
+    to_value = _safe_str(rule.get("to_value"))
+    cmp_value = value or from_value
+    v = _safe_str(cmp_value).lower()
+    v_from = from_value
+    v_to = to_value
+    field_val = _contact_value(c, field)
+    field_str = _safe_str(field_val).lower()
+    if op_local == "equals":
+        return field_str == v
+    if op_local == "from":
+        f_num, v_num = _to_float(field_val), _to_float(v_from or value)
+        if f_num is not None and v_num is not None:
+            return f_num >= v_num
+        f_dt, v_dt = _to_datetime(field_val), _to_datetime(v_from or value)
+        if f_dt and v_dt:
+            return f_dt >= v_dt
+        return field_str >= _safe_str(v_from or value).lower()
+    if op_local == "to":
+        f_num, v_num = _to_float(field_val), _to_float(v_to or value)
+        if f_num is not None and v_num is not None:
+            return f_num <= v_num
+        f_dt, v_dt = _to_datetime(field_val), _to_datetime(v_to or value)
+        if f_dt and v_dt:
+            return f_dt <= v_dt
+        return field_str <= _safe_str(v_to or value).lower()
+    if op_local == "between":
+        f_num, from_num, to_num = _to_float(field_val), _to_float(v_from), _to_float(v_to)
+        if f_num is not None and from_num is not None and to_num is not None:
+            return from_num <= f_num <= to_num
+        f_dt, from_dt, to_dt = _to_datetime(field_val), _to_datetime(v_from), _to_datetime(v_to)
+        if f_dt and from_dt and to_dt:
+            return from_dt <= f_dt <= to_dt
+        low, high = v_from.lower(), v_to.lower()
+        return low <= field_str <= high
+    return v in field_str
 
 
 @app.on_event("startup")
@@ -533,7 +579,11 @@ async def contact_fields(db: Session = Depends(get_db)):
 @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"),
+    filters: str = Query(
+        "",
+        description='JSON array of {field, op, value?, from_value?, to_value?}; combined with AND',
+    ),
+    field: str = Query("", description="Optional field name to filter (legacy single filter)"),
     value: str = Query("", description="Optional field value to filter"),
     op: str = Query("contains", description="Filter op: contains|equals|from|to|between"),
     from_value: str = Query("", description="From value for range filters"),
@@ -542,63 +592,44 @@ async def list_contacts(
     sort_dir: str = Query("desc", description="Sort direction: asc|desc"),
     limit: int = Query(200, ge=1, le=1000),
     offset: int = Query(0, ge=0),
-    db: Session = Depends(get_db)
+    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))
+            (Contact.first_name.ilike(pattern))
+            | (Contact.last_name.ilike(pattern))
+            | (Contact.email.ilike(pattern))
+            | (Contact.company.ilike(pattern))
+            | (Contact.title.ilike(pattern))
         )
     contacts_all = query.order_by(Contact.created_at.desc(), Contact.id.desc()).all()
 
-    # Dynamic field filtering for all imported Apollo attributes.
-    if field:
-        cmp_value = value or from_value
-        v = _safe_str(cmp_value).lower()
-        v_from = _safe_str(from_value)
-        v_to = _safe_str(to_value)
-
-        def match_dynamic(c: Contact):
-            field_val = _contact_value(c, field)
-            field_str = _safe_str(field_val).lower()
-            op_local = (op or "contains").lower()
-            if op_local == "equals":
-                return field_str == v
-            if op_local == "from":
-                # Numeric/date first, then lexical fallback
-                f_num, v_num = _to_float(field_val), _to_float(v_from or value)
-                if f_num is not None and v_num is not None:
-                    return f_num >= v_num
-                f_dt, v_dt = _to_datetime(field_val), _to_datetime(v_from or value)
-                if f_dt and v_dt:
-                    return f_dt >= v_dt
-                return field_str >= _safe_str(v_from or value).lower()
-            if op_local == "to":
-                f_num, v_num = _to_float(field_val), _to_float(v_to or value)
-                if f_num is not None and v_num is not None:
-                    return f_num <= v_num
-                f_dt, v_dt = _to_datetime(field_val), _to_datetime(v_to or value)
-                if f_dt and v_dt:
-                    return f_dt <= v_dt
-                return field_str <= _safe_str(v_to or value).lower()
-            if op_local == "between":
-                f_num, from_num, to_num = _to_float(field_val), _to_float(v_from), _to_float(v_to)
-                if f_num is not None and from_num is not None and to_num is not None:
-                    return from_num <= f_num <= to_num
-                f_dt, from_dt, to_dt = _to_datetime(field_val), _to_datetime(v_from), _to_datetime(v_to)
-                if f_dt and from_dt and to_dt:
-                    return from_dt <= f_dt <= to_dt
-                low, high = v_from.lower(), v_to.lower()
-                return low <= field_str <= high
-            # default contains
-            return v in field_str
-
-        contacts_all = [c for c in contacts_all if match_dynamic(c)]
+    # Multiple Apollo-field filters (AND). Prefer over legacy single-field params when non-empty.
+    if filters and filters.strip():
+        try:
+            rules = json.loads(filters)
+        except json.JSONDecodeError:
+            raise HTTPException(status_code=400, detail="Invalid filters JSON")
+        if not isinstance(rules, list):
+            raise HTTPException(status_code=400, detail="filters must be a JSON array")
+        active_rules = [r for r in rules if isinstance(r, dict) and _safe_str(r.get("field"))]
+        if active_rules:
+            contacts_all = [
+                c
+                for c in contacts_all
+                if all(_contact_matches_apollo_filter(c, r) for r in active_rules)
+            ]
+    elif field:
+        rule = {
+            "field": field,
+            "op": op,
+            "value": value,
+            "from_value": from_value,
+            "to_value": to_value,
+        }
+        contacts_all = [c for c in contacts_all if _contact_matches_apollo_filter(c, rule)]
 
     # Sort by mapped or raw Apollo fields
     reverse = (sort_dir or "desc").lower() != "asc"
@@ -700,6 +731,217 @@ async def bulk_delete_contacts(body: BulkContactIdsRequest, db: Session = Depend
     return {"deleted": deleted}
 
 
+@app.post("/api/contacts/seed-demo")
+async def seed_demo_contacts(db: Session = Depends(get_db)):
+    """
+    Replace previous demo-seeded contacts and insert a variety of sample rows
+    (rich Apollo-style raw_data) for testing filters and UI.
+    """
+    removed = (
+        db.query(Contact)
+        .filter(Contact.file_id == DEMO_CONTACTS_FILE_ID)
+        .delete(synchronize_session=False)
+    )
+    specs = [
+        {
+            "fn": "Morgan",
+            "ln": "Lee",
+            "email": "morgan.lee@blueharbor.demo",
+            "co": "Blue Harbor Analytics",
+            "ti": "Chief Revenue Officer",
+            "raw": {
+                "Company Name": "Blue Harbor Analytics",
+                "Company Name for Emails": "BlueHarbor",
+                "Industry": "Business intelligence & analytics software",
+                "# Employees": "51-200",
+                "Annual Revenue": "$8,200,000",
+                "Last Raised At": "2023-11",
+                "Website": "https://www.blueharbor-analytics.demo",
+                "City": "Seattle",
+                "State": "WA",
+                "Country": "United States",
+            },
+        },
+        {
+            "fn": "Priya",
+            "ln": "Shah",
+            "email": "priya.shah@lumengrid.demo",
+            "co": "LumenGrid Energy",
+            "ti": "Director of Procurement",
+            "raw": {
+                "Company Name": "LumenGrid Energy",
+                "Industry": "Renewable energy infrastructure",
+                "# Employees": "201-500",
+                "Annual Revenue": "$45,000,000",
+                "Website": "https://lumengrid.demo",
+                "City": "Toronto",
+                "State": "ON",
+                "Country": "Canada",
+            },
+        },
+        {
+            "fn": "Diego",
+            "ln": "Ramos",
+            "email": "diego.ramos@vertexledger.demo",
+            "co": "Vertex Ledger",
+            "ti": "Controller",
+            "raw": {
+                "Company Name": "Vertex Ledger",
+                "Industry": "Enterprise document and content management software",
+                "# Employees": "11-50",
+                "Annual Revenue": "$3,100,000",
+                "Website": "https://vertexledger.demo",
+                "City": "Austin",
+                "State": "TX",
+                "Country": "United States",
+            },
+        },
+        {
+            "fn": "Elena",
+            "ln": "Volkov",
+            "email": "elena.volkov@northpole.demo",
+            "co": "Northpole Freight Co.",
+            "ti": "Operations Manager",
+            "raw": {
+                "Company Name": "Northpole Freight Co.",
+                "Industry": "Logistics & Supply Chain",
+                "# Employees": "501-1000",
+                "Annual Revenue": "$120,000,000",
+                "Website": "https://northpole-freight.demo",
+                "City": "Hamburg",
+                "State": "",
+                "Country": "Germany",
+            },
+        },
+        {
+            "fn": "James",
+            "ln": "Okonkwo",
+            "email": "james.okonkwo@silverfin.demo",
+            "co": "Silverfin Capital",
+            "ti": "Investment Analyst",
+            "raw": {
+                "Company Name": "Silverfin Capital",
+                "Industry": "Financial services",
+                "# Employees": "51-200",
+                "Annual Revenue": "$22,500,000",
+                "Website": "https://silverfin.demo",
+                "City": "London",
+                "State": "",
+                "Country": "United Kingdom",
+            },
+        },
+        {
+            "fn": "Yuki",
+            "ln": "Tanaka",
+            "email": "yuki.tanaka@skyforge.demo",
+            "co": "Skyforge Robotics",
+            "ti": "Head of Engineering",
+            "raw": {
+                "Company Name": "Skyforge Robotics",
+                "Industry": "Industrial automation",
+                "# Employees": "201-500",
+                "Annual Revenue": "$67,000,000",
+                "Website": "https://skyforge.demo",
+                "City": "Osaka",
+                "State": "",
+                "Country": "Japan",
+            },
+        },
+        {
+            "fn": "Amira",
+            "ln": "Hassan",
+            "email": "amira.hassan@desertwave.demo",
+            "co": "Desert Wave Telecom",
+            "ti": "VP Customer Success",
+            "raw": {
+                "Company Name": "Desert Wave Telecom",
+                "Industry": "Telecommunications",
+                "# Employees": "1001-5000",
+                "Annual Revenue": "$410,000,000",
+                "Website": "https://desertwave.demo",
+                "City": "Dubai",
+                "State": "",
+                "Country": "United Arab Emirates",
+            },
+        },
+        {
+            "fn": "Chris",
+            "ln": "Martinez",
+            "email": "chris.martinez@cascade.demo",
+            "co": "Cascade Health Systems",
+            "ti": "Clinical Director",
+            "raw": {
+                "Company Name": "Cascade Health Systems",
+                "Industry": "Healthcare IT",
+                "# Employees": "501-1000",
+                "Annual Revenue": "$95,000,000",
+                "Website": "https://cascade-health.demo",
+                "City": "Denver",
+                "State": "CO",
+                "Country": "United States",
+            },
+        },
+        {
+            "fn": "Sofia",
+            "ln": "Andersson",
+            "email": "sofia.andersson@fjord.demo",
+            "co": "Fjord Maritime AS",
+            "ti": "Fleet Coordinator",
+            "raw": {
+                "Company Name": "Fjord Maritime AS",
+                "Industry": "Shipping & maritime",
+                "# Employees": "51-200",
+                "Annual Revenue": "$18,000,000",
+                "Website": "https://fjord-maritime.demo",
+                "City": "Bergen",
+                "State": "",
+                "Country": "Norway",
+            },
+        },
+        {
+            "fn": "Marcus",
+            "ln": "Webbe",
+            "email": "marcus.webbe@pixelloft.demo",
+            "co": "Pixelloft Creative Agency",
+            "ti": "Creative Director",
+            "raw": {
+                "Company Name": "Pixelloft Creative Agency",
+                "Industry": "Marketing & advertising",
+                "# Employees": "11-50",
+                "Annual Revenue": "$1,800,000",
+                "Website": "https://pixelloft.demo",
+                "City": "Melbourne",
+                "State": "VIC",
+                "Country": "Australia",
+            },
+        },
+    ]
+    for i, s in enumerate(specs):
+        rd = dict(s["raw"])
+        rd["Title"] = s["ti"]
+        rd["Email"] = s["email"]
+        rd["First Name"] = s["fn"]
+        rd["Last Name"] = s["ln"]
+        row = Contact(
+            file_id=DEMO_CONTACTS_FILE_ID,
+            row_index=i,
+            first_name=s["fn"],
+            last_name=s["ln"],
+            email=s["email"],
+            company=s["co"],
+            title=s["ti"],
+            source="demo",
+            raw_data=rd,
+        )
+        db.add(row)
+    db.commit()
+    return {
+        "ok": True,
+        "removed_previous_demo_rows": removed,
+        "inserted": len(specs),
+    }
+
+
 @app.post("/api/contacts/bulk-convert-to-leads")
 async def bulk_convert_contacts_to_leads(body: BulkContactIdsRequest, db: Session = Depends(get_db)):
     """

frontend/src/pages/Contacts.jsx

@@ -13,6 +13,7 @@ import {
     Trash2,
     Handshake,
     Pencil,
+    Plus,
 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -25,6 +26,17 @@ import ContactIdentityEditor from '@/components/workspace/ContactIdentityEditor'
 import { EditableCell } from '@/components/workspace/EditableCell';
 import { cn } from '@/lib/utils';
 
+function makeFilterRow() {
+    return {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+        field: 'none',
+        op: 'contains',
+        value: '',
+        fromVal: '',
+        toVal: '',
+    };
+}
+
 export default function Contacts() {
     const navigate = useNavigate();
     const [contacts, setContacts] = useState([]);
@@ -35,11 +47,8 @@ export default function Contacts() {
     const [loading, setLoading] = useState(true);
     const [seqLoading, setSeqLoading] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
-    const [filterField, setFilterField] = useState('none');
-    const [filterOp, setFilterOp] = useState('contains');
-    const [filterValue, setFilterValue] = useState('');
-    const [filterFrom, setFilterFrom] = useState('');
-    const [filterTo, setFilterTo] = useState('');
+    const [filterRows, setFilterRows] = useState(() => [makeFilterRow()]);
+    const [demoBusy, setDemoBusy] = useState(false);
     const [sortBy, setSortBy] = useState('created_at');
     const [sortDir, setSortDir] = useState('desc');
     const [page, setPage] = useState(1);
@@ -88,6 +97,25 @@ export default function Contacts() {
 
     const allPageSelected = contacts.length > 0 && contacts.every((c) => rowSelection[c.id]);
 
+    const filtersKey = useMemo(() => JSON.stringify(filterRows), [filterRows]);
+
+    const updateFilterRow = (id, patch) => {
+        setFilterRows((rows) => rows.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+    };
+
+    const addFilterRow = () => {
+        setFilterRows((rows) => [...rows, makeFilterRow()]);
+    };
+
+    const removeFilterRow = (id) => {
+        setFilterRows((rows) => {
+            if (rows.length <= 1) {
+                return [makeFilterRow()];
+            }
+            return rows.filter((r) => r.id !== id);
+        });
+    };
+
     useEffect(() => {
         fetchFields();
         fetchContacts();
@@ -117,11 +145,11 @@ export default function Contacts() {
     useEffect(() => {
         const timer = setTimeout(() => fetchContacts(), 250);
         return () => clearTimeout(timer);
-    }, [searchQuery, filterField, filterOp, filterValue, filterFrom, filterTo, sortBy, sortDir, page, pageSize]);
+    }, [searchQuery, filtersKey, sortBy, sortDir, page, pageSize]);
 
     useEffect(() => {
         setPage(1);
-    }, [searchQuery, filterField, filterOp, filterValue, filterFrom, filterTo, sortBy, sortDir, pageSize]);
+    }, [searchQuery, filtersKey, sortBy, sortDir, pageSize]);
 
     const fetchFields = async () => {
         try {
@@ -167,16 +195,17 @@ export default function Contacts() {
             params.set('sort_by', sortBy);
             params.set('sort_dir', sortDir);
             if (searchQuery.trim()) params.set('search', searchQuery.trim());
-            if (filterField !== 'none') {
-                params.set('field', filterField);
-                if (filterFrom.trim() || filterTo.trim()) {
-                    params.set('op', 'between');
-                    if (filterFrom.trim()) params.set('from_value', filterFrom.trim());
-                    if (filterTo.trim()) params.set('to_value', filterTo.trim());
-                } else {
-                    params.set('op', filterOp);
-                    params.set('value', filterValue.trim());
-                }
+            const activeFilters = filterRows
+                .filter((r) => r.field && r.field !== 'none')
+                .map((r) => ({
+                    field: r.field,
+                    op: r.op,
+                    value: r.value,
+                    from_value: r.fromVal,
+                    to_value: r.toVal,
+                }));
+            if (activeFilters.length > 0) {
+                params.set('filters', JSON.stringify(activeFilters));
             }
             const res = await fetch(`/api/contacts?${params.toString()}`);
             if (res.ok) {
@@ -191,6 +220,28 @@ export default function Contacts() {
         }
     };
 
+    const seedDemoContacts = async () => {
+        setDemoBusy(true);
+        try {
+            const res = await fetch('/api/contacts/seed-demo', { method: 'POST' });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                throw new Error(typeof data.detail === 'string' ? data.detail : 'Could not load demo data');
+            }
+            await fetchFields();
+            await fetchContacts();
+            const n = data.inserted ?? 0;
+            if (n > 0) {
+                alert(`Loaded ${n} demo contact${n === 1 ? '' : 's'} with varied Apollo-style fields.`);
+            }
+        } catch (e) {
+            console.error(e);
+            alert(e.message || 'Could not load demo data');
+        } finally {
+            setDemoBusy(false);
+        }
+    };
+
     const openContact = async (contact) => {
         setTableEditRowId(null);
         setSelectedContact(contact);
@@ -522,64 +573,109 @@ export default function Contacts() {
 
     const filtersBlock = (
         <div className="space-y-3">
-            <div className="flex items-center text-xs text-slate-500 gap-1.5 font-medium">
-                <SlidersHorizontal className="h-3.5 w-3.5" />
-                Filter by any Apollo field
+            <div className="flex flex-wrap items-center justify-between gap-2">
+                <div className="flex items-center text-xs text-slate-500 gap-1.5 font-medium">
+                    <SlidersHorizontal className="h-3.5 w-3.5" />
+                    Filter by any Apollo field (combined with AND)
+                </div>
+                <Button type="button" variant="outline" size="sm" className="gap-1" onClick={addFilterRow}>
+                    <Plus className="h-3.5 w-3.5" />
+                    Add filter
+                </Button>
             </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
-                <Select value={filterField} onValueChange={setFilterField}>
-                    <SelectTrigger className="border-slate-200 bg-white">
-                        <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' && (
-                    <>
-                        <Select value={filterOp} onValueChange={setFilterOp}>
-                            <SelectTrigger className="border-slate-200 bg-white">
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="contains">contains</SelectItem>
-                                <SelectItem value="equals">equals</SelectItem>
-                                <SelectItem value="from">from</SelectItem>
-                                <SelectItem value="to">to</SelectItem>
-                                <SelectItem value="between">between</SelectItem>
-                            </SelectContent>
-                        </Select>
-                        {(filterOp === 'contains' || filterOp === 'equals') && (
-                            <Input
-                                className="border-slate-200"
-                                placeholder={`Value for "${filterField}"`}
-                                value={filterValue}
-                                onChange={(e) => setFilterValue(e.target.value)}
-                            />
-                        )}
-                        {(filterOp === 'from' || filterOp === 'to' || filterOp === 'between') && (
-                            <div className="flex gap-2 sm:col-span-2">
-                                <Input
-                                    className="border-slate-200"
-                                    placeholder="From"
-                                    value={filterFrom}
-                                    onChange={(e) => setFilterFrom(e.target.value)}
-                                />
-                                <Input
-                                    className="border-slate-200"
-                                    placeholder="To"
-                                    value={filterTo}
-                                    onChange={(e) => setFilterTo(e.target.value)}
-                                />
-                            </div>
+            <div className="space-y-3">
+                {filterRows.map((row) => (
+                    <div
+                        key={row.id}
+                        className="grid grid-cols-1 gap-3 lg:grid-cols-12 lg:items-end lg:gap-2 rounded-xl border border-slate-100 bg-slate-50/50 p-3"
+                    >
+                        <div className="lg:col-span-3">
+                            <label className="sr-only">Field</label>
+                            <Select
+                                value={row.field}
+                                onValueChange={(v) => updateFilterRow(row.id, { field: v })}
+                            >
+                                <SelectTrigger className="border-slate-200 bg-white">
+                                    <SelectValue placeholder="Field" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="none">No field filter</SelectItem>
+                                    {fields.map((field) => (
+                                        <SelectItem key={field} value={field}>
+                                            {field}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        {row.field !== 'none' && (
+                            <>
+                                <div className="lg:col-span-2">
+                                    <label className="sr-only">Operator</label>
+                                    <Select
+                                        value={row.op}
+                                        onValueChange={(v) => updateFilterRow(row.id, { op: v })}
+                                    >
+                                        <SelectTrigger className="border-slate-200 bg-white">
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="contains">contains</SelectItem>
+                                            <SelectItem value="equals">equals</SelectItem>
+                                            <SelectItem value="from">from</SelectItem>
+                                            <SelectItem value="to">to</SelectItem>
+                                            <SelectItem value="between">between</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                {(row.op === 'contains' || row.op === 'equals') && (
+                                    <div className="lg:col-span-6">
+                                        <Input
+                                            className="border-slate-200 bg-white"
+                                            placeholder={`Value for “${row.field}”`}
+                                            value={row.value}
+                                            onChange={(e) =>
+                                                updateFilterRow(row.id, { value: e.target.value })
+                                            }
+                                        />
+                                    </div>
+                                )}
+                                {(row.op === 'from' || row.op === 'to' || row.op === 'between') && (
+                                    <div className="flex gap-2 lg:col-span-6">
+                                        <Input
+                                            className="border-slate-200 bg-white flex-1"
+                                            placeholder="From"
+                                            value={row.fromVal}
+                                            onChange={(e) =>
+                                                updateFilterRow(row.id, { fromVal: e.target.value })
+                                            }
+                                        />
+                                        <Input
+                                            className="border-slate-200 bg-white flex-1"
+                                            placeholder="To"
+                                            value={row.toVal}
+                                            onChange={(e) =>
+                                                updateFilterRow(row.id, { toVal: e.target.value })
+                                            }
+                                        />
+                                    </div>
+                                )}
+                                <div className="flex lg:col-span-1 lg:justify-end">
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="text-slate-400 hover:text-red-600"
+                                        aria-label="Remove filter row"
+                                        onClick={() => removeFilterRow(row.id)}
+                                    >
+                                        <Trash2 className="h-4 w-4" />
+                                    </Button>
+                                </div>
+                            </>
                         )}
-                    </>
-                )}
+                    </div>
+                ))}
             </div>
         </div>
     );
@@ -597,9 +693,24 @@ export default function Contacts() {
                     placeholder: 'Search contacts…',
                 }}
                 right={
-                    <Button variant="outline" size="sm" onClick={() => fetchContacts()}>
-                        Refresh
-                    </Button>
+                    <div className="flex flex-wrap items-center gap-2 justify-end">
+                        <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={seedDemoContacts}
+                            disabled={demoBusy}
+                            className="gap-1.5"
+                        >
+                            {demoBusy ? (
+                                <Loader2 className="h-4 w-4 animate-spin shrink-0" aria-hidden />
+                            ) : null}
+                            Load demo data
+                        </Button>
+                        <Button variant="outline" size="sm" onClick={() => fetchContacts()}>
+                            Refresh
+                        </Button>
+                    </div>
                 }
                 filters={filtersBlock}
                 sectionIcon={Users}
@@ -618,9 +729,23 @@ export default function Contacts() {
                         <div className="text-center py-16 text-slate-500 space-y-3">
                             <Users className="h-10 w-10 mx-auto opacity-40" />
                             <p>No contacts found</p>
-                            <Button variant="outline" size="sm" onClick={beginAddContact}>
-                                New contact
-                            </Button>
+                            <div className="flex flex-wrap items-center justify-center gap-2">
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={seedDemoContacts}
+                                    disabled={demoBusy}
+                                >
+                                    {demoBusy ? (
+                                        <Loader2 className="h-4 w-4 animate-spin mr-2" aria-hidden />
+                                    ) : null}
+                                    Load demo data
+                                </Button>
+                                <Button variant="outline" size="sm" onClick={beginAddContact}>
+                                    New contact
+                                </Button>
+                            </div>
                         </div>
                     ) : (
                         <>