0f5d18dac7
- /api/ai-search: sends user description to GPT-4o-mini, returns 2-4 structured query/region pairs as JSON - AiSearchModal: textarea, generates previews, user selects queries to run - KI-Suche button in hero section of /suche page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
507 lines
21 KiB
TypeScript
507 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useCallback } from "react";
|
|
import Link from "next/link";
|
|
import { toast } from "sonner";
|
|
import { SearchCard } from "@/components/search/SearchCard";
|
|
import { LoadingCard, type LeadResult } from "@/components/search/LoadingCard";
|
|
import { AiSearchModal } from "@/components/search/AiSearchModal";
|
|
|
|
export default function SuchePage() {
|
|
const [query, setQuery] = useState("");
|
|
const [region, setRegion] = useState("");
|
|
const [count, setCount] = useState(50);
|
|
const [loading, setLoading] = useState(false);
|
|
const [jobId, setJobId] = useState<string | null>(null);
|
|
const [leads, setLeads] = useState<LeadResult[]>([]);
|
|
const [searchDone, setSearchDone] = useState(false);
|
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
|
const [deleting, setDeleting] = useState(false);
|
|
const [onlyNew, setOnlyNew] = useState(false);
|
|
const [saveOnlyNew, setSaveOnlyNew] = useState(false);
|
|
const [aiOpen, setAiOpen] = useState(false);
|
|
|
|
function handleChange(field: "query" | "region" | "count", value: string | number) {
|
|
if (field === "query") setQuery(value as string);
|
|
if (field === "region") setRegion(value as string);
|
|
if (field === "count") setCount(value as number);
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
if (!query.trim() || loading) return;
|
|
setLoading(true);
|
|
setJobId(null);
|
|
setLeads([]);
|
|
setSearchDone(false);
|
|
setSelected(new Set());
|
|
setOnlyNew(false);
|
|
// saveOnlyNew intentionally kept — user setting persists across searches
|
|
try {
|
|
const res = await fetch("/api/search", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ query: query.trim(), region: region.trim(), count }),
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json() as { error?: string };
|
|
throw new Error(err.error || "Fehler beim Starten der Suche");
|
|
}
|
|
const data = await res.json() as { jobId: string };
|
|
setJobId(data.jobId);
|
|
} catch (err) {
|
|
const msg = err instanceof Error ? err.message : "Unbekannter Fehler";
|
|
toast.error(msg);
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
const handleDone = useCallback((result: LeadResult[], warning?: string) => {
|
|
setLoading(false);
|
|
setLeads(result);
|
|
setSearchDone(true);
|
|
if (warning) {
|
|
toast.warning(`${result.length} Unternehmen gefunden — E-Mail-Anreicherung fehlgeschlagen: ${warning}`, { duration: 6000 });
|
|
} else {
|
|
toast.success(`✓ ${result.length} Leads gefunden und im Leadspeicher gespeichert`, { duration: 4000 });
|
|
}
|
|
}, []);
|
|
|
|
async function handleDelete(ids: string[]) {
|
|
if (!ids.length || deleting) return;
|
|
setDeleting(true);
|
|
try {
|
|
await fetch("/api/leads/delete-from-results", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ resultIds: ids }),
|
|
});
|
|
setLeads(prev => prev.filter(l => !ids.includes(l.id)));
|
|
setSelected(prev => {
|
|
const next = new Set(prev);
|
|
ids.forEach(id => next.delete(id));
|
|
return next;
|
|
});
|
|
toast.success(`${ids.length} Lead${ids.length > 1 ? "s" : ""} gelöscht`);
|
|
} catch {
|
|
toast.error("Löschen fehlgeschlagen");
|
|
} finally {
|
|
setDeleting(false);
|
|
}
|
|
}
|
|
|
|
async function handleSaveOnlyNew() {
|
|
const existingIds = leads.filter(l => !l.isNew).map(l => l.id);
|
|
if (!existingIds.length || deleting) return;
|
|
setDeleting(true);
|
|
try {
|
|
await fetch("/api/leads/delete-from-results", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ resultIds: existingIds }),
|
|
});
|
|
setSaveOnlyNew(true);
|
|
const newCount = leads.filter(l => l.isNew).length;
|
|
toast.success(`✓ ${newCount} neue Leads behalten, ${existingIds.length} vorhandene aus Leadspeicher entfernt`, { duration: 5000 });
|
|
} catch {
|
|
toast.error("Fehler beim Bereinigen");
|
|
} finally {
|
|
setDeleting(false);
|
|
}
|
|
}
|
|
|
|
const handleError = useCallback((message: string) => {
|
|
setLoading(false);
|
|
setJobId(null);
|
|
toast.error(`Suche fehlgeschlagen: ${message}`);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: "72px 120px",
|
|
maxWidth: 900,
|
|
margin: "0 auto",
|
|
}}
|
|
>
|
|
{/* Hero */}
|
|
<div className="relative rounded-2xl border border-[#1e1e2e] p-6 overflow-hidden mb-6"
|
|
style={{ background: "linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.08) 100%)" }}>
|
|
<div className="absolute inset-0" style={{ background: "linear-gradient(135deg, rgba(59,130,246,0.04) 0%, transparent 60%)" }} />
|
|
<div className="relative">
|
|
<div className="flex items-center gap-2 text-xs mb-2" style={{ color: "#3b82f6" }}>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
<span>Lead-Suche</span>
|
|
</div>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 style={{ fontSize: 22, fontWeight: 500, color: "#ffffff", margin: 0, marginBottom: 6 }}>
|
|
Leads finden
|
|
</h1>
|
|
<p style={{ fontSize: 13, color: "#9ca3af", margin: 0 }}>
|
|
Suchbegriff eingeben — wir finden passende Unternehmen mit Kontaktdaten.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setAiOpen(true)}
|
|
disabled={loading}
|
|
style={{
|
|
display: "flex", alignItems: "center", gap: 7,
|
|
padding: "8px 14px", borderRadius: 8,
|
|
border: "1px solid rgba(139,92,246,0.35)",
|
|
background: "rgba(139,92,246,0.1)", color: "#a78bfa",
|
|
fontSize: 13, fontWeight: 500,
|
|
cursor: loading ? "not-allowed" : "pointer",
|
|
opacity: loading ? 0.5 : 1, whiteSpace: "nowrap",
|
|
}}
|
|
onMouseEnter={e => { if (!loading) { e.currentTarget.style.background = "rgba(139,92,246,0.18)"; e.currentTarget.style.borderColor = "rgba(139,92,246,0.6)"; }}}
|
|
onMouseLeave={e => { e.currentTarget.style.background = "rgba(139,92,246,0.1)"; e.currentTarget.style.borderColor = "rgba(139,92,246,0.35)"; }}
|
|
>
|
|
✨ KI-Suche
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search Card */}
|
|
<SearchCard
|
|
query={query}
|
|
region={region}
|
|
count={count}
|
|
loading={loading}
|
|
onChange={handleChange}
|
|
onSubmit={handleSubmit}
|
|
/>
|
|
|
|
|
|
{/* Loading Card */}
|
|
{loading && jobId && (
|
|
<LoadingCard
|
|
jobId={jobId}
|
|
targetCount={count}
|
|
query={query}
|
|
region={region}
|
|
onDone={handleDone}
|
|
onError={handleError}
|
|
/>
|
|
)}
|
|
|
|
{/* AI Modal */}
|
|
{aiOpen && (
|
|
<AiSearchModal
|
|
onStart={(queries) => {
|
|
setAiOpen(false);
|
|
if (!queries.length) return;
|
|
// Fill first query into the search fields and submit
|
|
const first = queries[0];
|
|
setQuery(first.query);
|
|
setRegion(first.region);
|
|
setCount(first.count);
|
|
setLoading(true);
|
|
setJobId(null);
|
|
setLeads([]);
|
|
setSearchDone(false);
|
|
setSelected(new Set());
|
|
fetch("/api/search", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ query: first.query, region: first.region, count: first.count }),
|
|
})
|
|
.then(r => r.json())
|
|
.then((d: { jobId?: string; error?: string }) => {
|
|
if (d.jobId) setJobId(d.jobId);
|
|
else throw new Error(d.error);
|
|
})
|
|
.catch(err => {
|
|
toast.error(err instanceof Error ? err.message : "Fehler");
|
|
setLoading(false);
|
|
});
|
|
}}
|
|
onClose={() => setAiOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Results */}
|
|
{searchDone && leads.length > 0 && (() => {
|
|
const newCount = leads.filter(l => l.isNew).length;
|
|
const visibleLeads = onlyNew ? leads.filter(l => l.isNew) : leads;
|
|
const allVisibleSelected = visibleLeads.length > 0 && visibleLeads.every(l => selected.has(l.id));
|
|
const someVisibleSelected = visibleLeads.some(l => selected.has(l.id));
|
|
const selectedVisible = visibleLeads.filter(l => selected.has(l.id));
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
marginTop: 16,
|
|
background: "#111118",
|
|
border: "1px solid #1e1e2e",
|
|
borderRadius: 12,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<style>{`
|
|
.del-btn:hover { opacity: 1 !important; }
|
|
.lead-row:hover { background: rgba(255,255,255,0.02); }
|
|
.lead-row:hover .row-del { opacity: 1 !important; }
|
|
.filter-pill { transition: background 0.15s, color 0.15s; }
|
|
.filter-pill:hover { background: rgba(59,130,246,0.15) !important; }
|
|
.save-new-btn {
|
|
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
|
|
}
|
|
.save-new-btn:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(139,92,246,0.22)) !important;
|
|
border-color: rgba(99,102,241,0.65) !important;
|
|
color: #c7d2fe !important;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(99,102,241,0.2);
|
|
}
|
|
.save-new-btn:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
box-shadow: none;
|
|
}
|
|
`}</style>
|
|
|
|
{/* Header */}
|
|
<div
|
|
style={{
|
|
padding: "12px 16px",
|
|
borderBottom: "1px solid #1e1e2e",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
gap: 12,
|
|
flexWrap: "wrap",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
|
|
{/* Select-all checkbox */}
|
|
<input
|
|
type="checkbox"
|
|
checked={allVisibleSelected}
|
|
ref={el => { if (el) el.indeterminate = someVisibleSelected && !allVisibleSelected; }}
|
|
onChange={e => {
|
|
if (e.target.checked) {
|
|
setSelected(prev => {
|
|
const next = new Set(prev);
|
|
visibleLeads.forEach(l => next.add(l.id));
|
|
return next;
|
|
});
|
|
} else {
|
|
setSelected(prev => {
|
|
const next = new Set(prev);
|
|
visibleLeads.forEach(l => next.delete(l.id));
|
|
return next;
|
|
});
|
|
}
|
|
}}
|
|
style={{ accentColor: "#3b82f6", cursor: "pointer", width: 14, height: 14 }}
|
|
/>
|
|
<span style={{ fontSize: 13, fontWeight: 500, color: "#ffffff" }}>
|
|
{selectedVisible.length > 0
|
|
? `${selectedVisible.length} ausgewählt`
|
|
: `${visibleLeads.length} Leads`}
|
|
</span>
|
|
|
|
{/* Filter tabs */}
|
|
<div style={{
|
|
display: "flex",
|
|
background: "#0d0d18",
|
|
border: "1px solid #2e2e3e",
|
|
borderRadius: 8,
|
|
padding: 2,
|
|
gap: 2,
|
|
}}>
|
|
{[
|
|
{ label: `Alle (${leads.length})`, value: false },
|
|
{ label: `Nur neue (${newCount})`, value: true },
|
|
].map(tab => (
|
|
<button
|
|
key={String(tab.value)}
|
|
onClick={() => setOnlyNew(tab.value)}
|
|
style={{
|
|
padding: "3px 10px",
|
|
borderRadius: 6,
|
|
border: "none",
|
|
fontSize: 11,
|
|
cursor: "pointer",
|
|
background: onlyNew === tab.value ? "#1e1e2e" : "transparent",
|
|
color: onlyNew === tab.value ? "#ffffff" : "#6b7280",
|
|
fontWeight: onlyNew === tab.value ? 500 : 400,
|
|
transition: "background 0.12s, color 0.12s",
|
|
}}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
|
{selectedVisible.length > 0 && (
|
|
<button
|
|
className="del-btn"
|
|
onClick={() => handleDelete(selectedVisible.map(l => l.id))}
|
|
disabled={deleting}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 6,
|
|
background: "rgba(239,68,68,0.12)",
|
|
border: "1px solid rgba(239,68,68,0.3)",
|
|
borderRadius: 7,
|
|
padding: "5px 12px",
|
|
fontSize: 12,
|
|
color: "#ef4444",
|
|
cursor: deleting ? "not-allowed" : "pointer",
|
|
opacity: deleting ? 0.5 : 0.85,
|
|
}}
|
|
>
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/>
|
|
</svg>
|
|
{selectedVisible.length} löschen
|
|
</button>
|
|
)}
|
|
|
|
{/* Nur neue speichern — only shown when there are existing leads */}
|
|
{!saveOnlyNew && leads.some(l => !l.isNew) && (
|
|
<button
|
|
className="save-new-btn"
|
|
onClick={handleSaveOnlyNew}
|
|
disabled={deleting}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 6,
|
|
background: "linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.12))",
|
|
border: "1px solid rgba(99,102,241,0.35)",
|
|
borderRadius: 7,
|
|
padding: "5px 12px",
|
|
fontSize: 12,
|
|
color: "#a5b4fc",
|
|
cursor: deleting ? "not-allowed" : "pointer",
|
|
whiteSpace: "nowrap",
|
|
opacity: deleting ? 0.5 : 1,
|
|
}}
|
|
>
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/>
|
|
<path d="M9 12h6M12 9v6"/>
|
|
</svg>
|
|
Nur neue speichern
|
|
</button>
|
|
)}
|
|
|
|
<Link href="/leadspeicher" style={{ fontSize: 12, color: "#3b82f6", textDecoration: "none" }}>
|
|
Im Leadspeicher →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div style={{ overflowX: "auto" }}>
|
|
<table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
|
|
<thead>
|
|
<tr style={{ borderBottom: "1px solid #1e1e2e" }}>
|
|
<th style={{ width: 40, padding: "8px 16px" }} />
|
|
{["Unternehmen", "Domain", "Kontakt", "E-Mail"].map(h => (
|
|
<th key={h} style={{ padding: "8px 16px", textAlign: "left", color: "#6b7280", fontWeight: 500 }}>
|
|
{h}
|
|
</th>
|
|
))}
|
|
<th style={{ width: 40, padding: "8px 16px" }} />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{visibleLeads.map((lead, i) => {
|
|
const isSelected = selected.has(lead.id);
|
|
return (
|
|
<tr
|
|
key={lead.id}
|
|
className="lead-row"
|
|
style={{
|
|
borderBottom: i < visibleLeads.length - 1 ? "1px solid #1a1a2a" : "none",
|
|
background: isSelected ? "rgba(59,130,246,0.06)" : undefined,
|
|
}}
|
|
>
|
|
<td style={{ padding: "9px 16px", textAlign: "center" }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={isSelected}
|
|
onChange={e => {
|
|
setSelected(prev => {
|
|
const next = new Set(prev);
|
|
e.target.checked ? next.add(lead.id) : next.delete(lead.id);
|
|
return next;
|
|
});
|
|
}}
|
|
style={{ accentColor: "#3b82f6", cursor: "pointer", width: 13, height: 13 }}
|
|
/>
|
|
</td>
|
|
<td style={{ padding: "9px 16px", color: "#ffffff" }}>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
|
{lead.companyName || "—"}
|
|
{!lead.isNew && (
|
|
<span style={{
|
|
fontSize: 10,
|
|
color: "#6b7280",
|
|
background: "#1e1e2e",
|
|
borderRadius: 4,
|
|
padding: "1px 6px",
|
|
whiteSpace: "nowrap",
|
|
}}>
|
|
vorhanden
|
|
</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td style={{ padding: "9px 16px", color: "#6b7280" }}>{lead.domain || "—"}</td>
|
|
<td style={{ padding: "9px 16px", color: "#d1d5db" }}>
|
|
{lead.contactName
|
|
? `${lead.contactName}${lead.contactTitle ? ` · ${lead.contactTitle}` : ""}`
|
|
: "—"}
|
|
</td>
|
|
<td style={{ padding: "9px 16px" }}>
|
|
{lead.email ? (
|
|
<a href={`mailto:${lead.email}`} style={{ color: "#3b82f6", textDecoration: "none" }}>
|
|
{lead.email}
|
|
</a>
|
|
) : (
|
|
<span style={{ color: "#4b5563" }}>—</span>
|
|
)}
|
|
</td>
|
|
<td style={{ padding: "9px 12px", textAlign: "center" }}>
|
|
<button
|
|
className="row-del"
|
|
onClick={() => handleDelete([lead.id])}
|
|
disabled={deleting}
|
|
title="Lead löschen"
|
|
style={{
|
|
background: "none",
|
|
border: "none",
|
|
cursor: deleting ? "not-allowed" : "pointer",
|
|
color: "#6b7280",
|
|
opacity: 0,
|
|
padding: 4,
|
|
borderRadius: 4,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/>
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
);
|
|
}
|