7db914084e
- Apply Stitch design system to leadspeicher, suche, TopBar, globals.css - Add Energieversorger queue campaign (Netzbetreiber, Fernwärme, Industriepark) with BW + Bayern priority, tracks usage per term+location combo - Remove TopBar right-side actions (Leads finden, bell, settings) - Remove mode tabs from manual search, rename KI button - Fix Google Fonts @import order (move to <link> in layout.tsx) - Add cursor-pointer globally via globals.css - Responsive fixes for campaign buttons and KI button - Fix .dockerignore to exclude .env from image build - Add stadtwerke-cities API + city data (50 cities per Bundesland) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
851 lines
39 KiB
TypeScript
851 lines
39 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useCallback } from "react";
|
|
import Link from "next/link";
|
|
import { toast } from "sonner";
|
|
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);
|
|
const [queueRunning, setQueueRunning] = useState(false);
|
|
const [queueIndex, setQueueIndex] = useState(0);
|
|
const [queueTotal, setQueueTotal] = useState(0);
|
|
const [queueLabel, setQueueLabel] = useState("");
|
|
const [industrieRunning, setIndustrieRunning] = useState(false);
|
|
const [industrieIndex, setIndustrieIndex] = useState(0);
|
|
const [industrieTotal, setIndustrieTotal] = useState(0);
|
|
const [industrieLabel, setIndustrieLabel] = useState("");
|
|
|
|
const INDUSTRIE_TERMS = ["Netzbetreiber", "Fernwärme", "Industriepark"];
|
|
|
|
const BUNDESLAENDER = [
|
|
"Bayern", "NRW", "Baden-Württemberg", "Hessen", "Niedersachsen",
|
|
"Sachsen", "Berlin", "Hamburg", "Bremen", "Thüringen",
|
|
"Sachsen-Anhalt", "Brandenburg", "Mecklenburg-Vorpommern",
|
|
"Saarland", "Rheinland-Pfalz", "Schleswig-Holstein",
|
|
];
|
|
|
|
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);
|
|
// Fire-and-forget KI-Anreicherung
|
|
if (jobId) {
|
|
fetch("/api/enrich-leads", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ jobId }),
|
|
}).catch(() => {});
|
|
}
|
|
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 });
|
|
}
|
|
}, [jobId]);
|
|
|
|
async function runSearchAndWait(query: string, region: string, historyMode = "stadtwerke") {
|
|
try {
|
|
const res = await fetch("/api/search", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ query, region, count: 50 }),
|
|
});
|
|
const data = await res.json() as { jobId?: string };
|
|
if (!data.jobId) return;
|
|
// Save to history
|
|
fetch("/api/search-history", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ query, region, searchMode: historyMode }),
|
|
}).catch(() => {});
|
|
// Poll until done
|
|
await new Promise<void>((resolve) => {
|
|
const interval = setInterval(async () => {
|
|
try {
|
|
const statusRes = await fetch(`/api/jobs/${data.jobId}/status`);
|
|
const status = await statusRes.json() as { status: string };
|
|
if (status.status === "complete" || status.status === "failed") {
|
|
clearInterval(interval);
|
|
resolve();
|
|
}
|
|
} catch { clearInterval(interval); resolve(); }
|
|
}, 3000);
|
|
});
|
|
} catch { /* continue with next */ }
|
|
}
|
|
|
|
async function startStadtwerkeQueue() {
|
|
if (loading || queueRunning) return;
|
|
setQueueRunning(true);
|
|
setQueueIndex(0);
|
|
setLeads([]);
|
|
setSearchDone(false);
|
|
|
|
// Fetch already-used regions to skip Bundesländer already done
|
|
let usedRegions = new Set<string>();
|
|
try {
|
|
const hRes = await fetch("/api/search-history?mode=stadtwerke");
|
|
if (hRes.ok) {
|
|
const hist = await hRes.json() as Array<{ region: string }>;
|
|
usedRegions = new Set(hist.map(h => h.region));
|
|
}
|
|
} catch { /* ignore */ }
|
|
|
|
// Phase 1: Unused Bundesländer
|
|
const unusedBL = BUNDESLAENDER.filter(bl => !usedRegions.has(bl));
|
|
|
|
// Phase 2: Next batch of unused cities
|
|
let cities: string[] = [];
|
|
try {
|
|
const cRes = await fetch("/api/stadtwerke-cities?count=50");
|
|
if (cRes.ok) {
|
|
const cData = await cRes.json() as { cities: string[]; exhausted: boolean };
|
|
cities = cData.cities;
|
|
if (cData.exhausted) {
|
|
toast.info("Alle vordefinierten Städte durchsucht — KI generiert neue Vorschläge", { duration: 4000 });
|
|
}
|
|
}
|
|
} catch { /* ignore */ }
|
|
|
|
const allTargets = [
|
|
...unusedBL.map(bl => ({ label: `Bundesland: ${bl}`, query: "Stadtwerke", region: bl })),
|
|
...cities.map(city => ({ label: `Stadt: ${city}`, query: "Stadtwerke", region: city })),
|
|
];
|
|
|
|
if (allTargets.length === 0) {
|
|
setQueueRunning(false);
|
|
toast.info("Alle bekannten Regionen wurden bereits durchsucht", { duration: 4000 });
|
|
return;
|
|
}
|
|
|
|
setQueueTotal(allTargets.length);
|
|
|
|
for (let i = 0; i < allTargets.length; i++) {
|
|
const target = allTargets[i];
|
|
setQueueIndex(i + 1);
|
|
setQueueLabel(target.label);
|
|
await runSearchAndWait(target.query, target.region);
|
|
}
|
|
|
|
setQueueRunning(false);
|
|
const blCount = unusedBL.length;
|
|
const cityCount = cities.length;
|
|
const parts = [];
|
|
if (blCount > 0) parts.push(`${blCount} Bundesländer`);
|
|
if (cityCount > 0) parts.push(`${cityCount} Städte`);
|
|
toast.success(`✓ ${parts.join(" + ")} durchsucht — Leads im Leadspeicher`, { duration: 5000 });
|
|
}
|
|
|
|
async function startIndustrieQueue() {
|
|
if (loading || queueRunning || industrieRunning) return;
|
|
setIndustrieRunning(true);
|
|
setIndustrieIndex(0);
|
|
|
|
// Load already-searched [term::location] combos
|
|
let usedKeys = new Set<string>();
|
|
try {
|
|
const hRes = await fetch("/api/search-history?mode=industrie");
|
|
if (hRes.ok) {
|
|
const hist = await hRes.json() as Array<{ region: string }>;
|
|
usedKeys = new Set(hist.map(h => h.region));
|
|
}
|
|
} catch { /* ignore */ }
|
|
|
|
// Cities data (inline priority order)
|
|
const BW_CITIES = [
|
|
"Stuttgart","Karlsruhe","Mannheim","Freiburg","Heidelberg","Ulm","Heilbronn","Pforzheim","Reutlingen","Ludwigsburg",
|
|
"Esslingen","Tübingen","Villingen-Schwenningen","Konstanz","Aalen","Friedrichshafen","Sindelfingen","Ravensburg","Offenburg","Göppingen",
|
|
"Böblingen","Schwäbisch Gmünd","Lahr","Waiblingen","Baden-Baden","Bruchsal","Weinheim","Leonberg","Bietigheim-Bissingen","Heidenheim",
|
|
"Schwäbisch Hall","Nagold","Singen","Nürtingen","Fellbach","Tuttlingen","Überlingen","Backnang","Ditzingen","Kirchheim",
|
|
"Schorndorf","Filderstadt","Leinfelden-Echterdingen","Ettlingen","Weil am Rhein","Rottenburg","Rheinfelden","Leutkirch","Mosbach","Crailsheim",
|
|
];
|
|
const BAYERN_CITIES = [
|
|
"München","Nürnberg","Augsburg","Regensburg","Ingolstadt","Würzburg","Fürth","Erlangen","Bayreuth","Landshut",
|
|
"Rosenheim","Kempten","Bamberg","Aschaffenburg","Neu-Ulm","Schweinfurt","Ansbach","Straubing","Passau","Coburg",
|
|
"Dachau","Freising","Germering","Memmingen","Kaufbeuren","Hof","Amberg","Weiden","Pfaffenhofen","Starnberg",
|
|
"Traunreut","Gauting","Garching","Erding","Fürstenfeldbruck","Unterschleißheim","Waldkraiburg","Marktoberdorf","Neumarkt","Altötting",
|
|
"Weißenburg","Schwabach","Deggendorf","Traunstein","Burghausen","Bad Reichenhall","Neuburg an der Donau","Kelheim","Dillingen","Günzburg",
|
|
];
|
|
const OTHER_BL = ["NRW","Hessen","Niedersachsen","Sachsen","Berlin","Hamburg","Bremen","Thüringen","Sachsen-Anhalt","Brandenburg","Mecklenburg-Vorpommern","Saarland","Rheinland-Pfalz","Schleswig-Holstein"];
|
|
|
|
// Build priority targets: BW + Bayern first, then rest
|
|
const priorityLocations = [
|
|
"Baden-Württemberg",
|
|
...BW_CITIES,
|
|
"Bayern",
|
|
...BAYERN_CITIES,
|
|
];
|
|
const restLocations = OTHER_BL;
|
|
|
|
// All [term, location] combos in priority order
|
|
const allTargets: Array<{ label: string; term: string; location: string }> = [];
|
|
for (const loc of [...priorityLocations, ...restLocations]) {
|
|
for (const term of INDUSTRIE_TERMS) {
|
|
const key = `${term}::${loc}`;
|
|
if (!usedKeys.has(key)) {
|
|
allTargets.push({ label: `${term} · ${loc}`, term, location: loc });
|
|
}
|
|
}
|
|
}
|
|
|
|
if (allTargets.length === 0) {
|
|
setIndustrieRunning(false);
|
|
toast.info("Alle Energieversorger-Suchen wurden bereits durchgeführt", { duration: 4000 });
|
|
return;
|
|
}
|
|
|
|
setIndustrieTotal(allTargets.length);
|
|
|
|
for (let i = 0; i < allTargets.length; i++) {
|
|
const t = allTargets[i];
|
|
setIndustrieIndex(i + 1);
|
|
setIndustrieLabel(t.label);
|
|
await runSearchAndWait(t.term, t.location, "industrie");
|
|
// Override the region saved in history with the key so we can track term+location combos
|
|
fetch("/api/search-history", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ query: t.term, region: `${t.term}::${t.location}`, searchMode: "industrie" }),
|
|
}).catch(() => {});
|
|
}
|
|
|
|
setIndustrieRunning(false);
|
|
toast.success(`✓ ${allTargets.length} Energieversorger-Suchen abgeschlossen — Leads im Leadspeicher`, { duration: 5000 });
|
|
}
|
|
|
|
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 className="pb-12 px-8 max-w-7xl mx-auto pt-8 space-y-10">
|
|
<style>{`
|
|
@keyframes spin { to { transform: rotate(360deg) } }
|
|
.del-btn:hover { opacity: 1 !important; }
|
|
.lead-row:hover { background: rgba(255,255,255,0.02); }
|
|
.lead-row:hover .row-del { opacity: 1 !important; }
|
|
`}</style>
|
|
|
|
{/* ── Strategische Kampagnen ── */}
|
|
<section>
|
|
<h2 className="text-2xl font-extrabold tracking-tight mb-6" style={{ fontFamily: "Manrope, sans-serif", color: "#dce3ea" }}>
|
|
Strategische Energiewirtschafts-Kampagnen
|
|
</h2>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* CTA Card — Stadtwerke */}
|
|
<div className="rounded-xl p-8 relative overflow-hidden flex flex-col justify-center" style={{ background: "#161c21", border: "1px solid rgba(255,255,255,0.05)" }}>
|
|
<div className="absolute -top-24 -right-24 w-64 h-64 rounded-full pointer-events-none" style={{ background: "rgba(26,115,232,0.2)", filter: "blur(100px)" }} />
|
|
<div className="relative z-10">
|
|
<p className="text-xs font-bold uppercase tracking-widest mb-4" style={{ color: "#c1c6d6", fontFamily: "Inter, sans-serif", letterSpacing: "0.1em" }}>Hauptkampagne</p>
|
|
<h3 className="text-3xl font-extrabold mb-6 leading-tight" style={{ fontFamily: "Manrope, sans-serif" }}>
|
|
Bundesweite<br />Lead-Gewinnung
|
|
</h3>
|
|
<p className="text-sm leading-relaxed mb-8 max-w-md" style={{ color: "#c1c6d6" }}>
|
|
Startet sofort den Deep-Scrape aller Stadtwerke in allen deutschen Bundesländern.
|
|
</p>
|
|
{queueRunning ? (
|
|
<div className="w-full py-4 rounded-xl flex items-center justify-center gap-3" style={{ background: "#242b30" }}>
|
|
<svg style={{ animation: "spin 1s linear infinite", flexShrink: 0 }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#adc7ff" strokeWidth="2">
|
|
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
|
|
</svg>
|
|
<div>
|
|
<div className="font-bold text-sm" style={{ color: "#adc7ff", fontFamily: "Manrope, sans-serif" }}>{queueLabel || "Wird durchsucht…"} ({queueIndex}/{queueTotal})</div>
|
|
<div className="text-xs mt-0.5" style={{ color: "#c1c6d6" }}>Leads werden automatisch gespeichert</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={startStadtwerkeQueue}
|
|
disabled={loading}
|
|
className="w-full py-5 rounded-xl font-black text-lg text-white transition-all active:scale-[0.98] disabled:opacity-50"
|
|
style={{
|
|
fontFamily: "Manrope, sans-serif",
|
|
background: "linear-gradient(135deg, #adc7ff, #1a73e8)",
|
|
boxShadow: "0 10px 30px rgba(26,115,232,0.4)",
|
|
}}
|
|
onMouseEnter={e => { e.currentTarget.style.boxShadow = "0 15px 40px rgba(26,115,232,0.6)"; }}
|
|
onMouseLeave={e => { e.currentTarget.style.boxShadow = "0 10px 30px rgba(26,115,232,0.4)"; }}
|
|
>
|
|
START 16 BUNDESLÄNDER STADTWERKE-SUCHE (1-Klick)
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Card — Energieversorger */}
|
|
<div className="rounded-xl p-8 relative overflow-hidden flex flex-col justify-center" style={{ background: "#161c21", border: "1px solid rgba(255,255,255,0.05)" }}>
|
|
<div className="absolute -top-24 -right-24 w-64 h-64 rounded-full pointer-events-none" style={{ background: "rgba(160,216,44,0.12)", filter: "blur(100px)" }} />
|
|
<div className="relative z-10">
|
|
<p className="text-xs font-bold uppercase tracking-widest mb-4" style={{ color: "#c1c6d6", fontFamily: "Inter, sans-serif", letterSpacing: "0.1em" }}>Energieversorger-Kampagne</p>
|
|
<h3 className="text-3xl font-extrabold mb-6 leading-tight" style={{ fontFamily: "Manrope, sans-serif" }}>
|
|
Industrie &<br />Energieversorger
|
|
</h3>
|
|
<p className="text-sm leading-relaxed mb-8 max-w-md" style={{ color: "#c1c6d6" }}>
|
|
Sucht nach <strong style={{ color: "#a0d82c" }}>Netzbetreiber</strong>, <strong style={{ color: "#a0d82c" }}>Fernwärme</strong> und <strong style={{ color: "#a0d82c" }}>Industriepark</strong> — priorisiert BW & Bayern, dann alle weiteren Bundesländer.
|
|
</p>
|
|
{industrieRunning ? (
|
|
<div className="w-full py-4 rounded-xl flex items-center justify-center gap-3" style={{ background: "#242b30" }}>
|
|
<svg style={{ animation: "spin 1s linear infinite", flexShrink: 0 }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#a0d82c" strokeWidth="2">
|
|
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
|
|
</svg>
|
|
<div>
|
|
<div className="font-bold text-sm" style={{ color: "#a0d82c", fontFamily: "Manrope, sans-serif" }}>{industrieLabel || "Wird durchsucht…"} ({industrieIndex}/{industrieTotal})</div>
|
|
<div className="text-xs mt-0.5" style={{ color: "#c1c6d6" }}>Leads werden automatisch gespeichert</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={startIndustrieQueue}
|
|
disabled={loading || queueRunning}
|
|
className="w-full py-5 rounded-xl font-black text-lg transition-all active:scale-[0.98] disabled:opacity-50"
|
|
style={{
|
|
fontFamily: "Manrope, sans-serif",
|
|
background: "linear-gradient(135deg, #a0d82c, #5c8200)",
|
|
color: "#131f00",
|
|
boxShadow: "0 10px 30px rgba(160,216,44,0.3)",
|
|
}}
|
|
onMouseEnter={e => { e.currentTarget.style.boxShadow = "0 15px 40px rgba(160,216,44,0.5)"; }}
|
|
onMouseLeave={e => { e.currentTarget.style.boxShadow = "0 10px 30px rgba(160,216,44,0.3)"; }}
|
|
>
|
|
START ENERGIEVERSORGER-SUCHE
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Manuelle Suche ── */}
|
|
<section>
|
|
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-end gap-3 mb-6">
|
|
<div>
|
|
<h2 className="text-2xl font-extrabold tracking-tight" style={{ fontFamily: "Manrope, sans-serif", color: "#dce3ea" }}>
|
|
Manuelle Lead- & Nischensuche
|
|
</h2>
|
|
<p className="text-sm mt-1" style={{ color: "#c1c6d6" }}>Verfeinern Sie Ihre Zielparameter für eine hochspezifische Extraktion.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setAiOpen(true)}
|
|
disabled={loading}
|
|
className="flex items-center gap-2 px-3 py-2 md:px-4 rounded-xl transition-all disabled:opacity-50 flex-shrink-0"
|
|
style={{ background: "#161c21", border: "1px solid rgba(173,199,255,0.2)", boxShadow: "0 0 20px rgba(26,115,232,0.1)" }}
|
|
>
|
|
<span className="material-symbols-outlined text-xl" style={{ color: "#adc7ff", fontVariationSettings: "'FILL' 1" }}>smart_toy</span>
|
|
<span className="hidden sm:inline font-bold text-sm uppercase tracking-wider" style={{ fontFamily: "Manrope, sans-serif", color: "#adc7ff" }}>KI-gestützte Suche</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="rounded-2xl p-8 shadow-2xl" style={{ background: "#161c21", border: "1px solid rgba(255,255,255,0.05)" }}>
|
|
{/* Form fields */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-12 gap-4 md:gap-6 items-end">
|
|
<div className="md:col-span-5 space-y-2">
|
|
<label className="block text-[10px] font-bold uppercase tracking-widest ml-1" style={{ color: "#c1c6d6" }}>Suchbegriff</label>
|
|
<div className="relative">
|
|
<input
|
|
className="w-full rounded-xl px-4 py-4 text-sm transition-all outline-none"
|
|
style={{ background: "#080f13", border: "1px solid rgba(65,71,84,0.4)", color: "#dce3ea" }}
|
|
value={query}
|
|
onChange={e => handleChange("query", e.target.value)}
|
|
onKeyDown={e => { if (e.key === "Enter" && query.trim() && !loading) handleSubmit(); }}
|
|
placeholder="z.B. Stadtwerke"
|
|
onFocus={e => { e.currentTarget.style.borderColor = "#adc7ff"; e.currentTarget.style.boxShadow = "0 0 0 2px rgba(173,199,255,0.2)"; }}
|
|
onBlur={e => { e.currentTarget.style.borderColor = "rgba(65,71,84,0.4)"; e.currentTarget.style.boxShadow = "none"; }}
|
|
/>
|
|
<span className="absolute right-4 top-1/2 -translate-y-1/2 material-symbols-outlined" style={{ color: "#8b909f", fontSize: 20 }}>search</span>
|
|
</div>
|
|
</div>
|
|
<div className="md:col-span-4 space-y-2">
|
|
<label className="block text-[10px] font-bold uppercase tracking-widest ml-1" style={{ color: "#c1c6d6" }}>Region</label>
|
|
<div className="relative">
|
|
<input
|
|
className="w-full rounded-xl px-4 py-4 text-sm transition-all outline-none"
|
|
style={{ background: "#080f13", border: "1px solid rgba(65,71,84,0.4)", color: "#dce3ea" }}
|
|
value={region}
|
|
onChange={e => handleChange("region", e.target.value)}
|
|
onKeyDown={e => { if (e.key === "Enter" && query.trim() && !loading) handleSubmit(); }}
|
|
placeholder="z.B. Bayern"
|
|
onFocus={e => { e.currentTarget.style.borderColor = "#adc7ff"; e.currentTarget.style.boxShadow = "0 0 0 2px rgba(173,199,255,0.2)"; }}
|
|
onBlur={e => { e.currentTarget.style.borderColor = "rgba(65,71,84,0.4)"; e.currentTarget.style.boxShadow = "none"; }}
|
|
/>
|
|
<span className="absolute right-4 top-1/2 -translate-y-1/2 material-symbols-outlined" style={{ color: "#8b909f", fontSize: 20 }}>location_on</span>
|
|
</div>
|
|
</div>
|
|
<div className="md:col-span-2 space-y-2">
|
|
<label className="block text-[10px] font-bold uppercase tracking-widest ml-1" style={{ color: "#c1c6d6" }}>Anzahl</label>
|
|
<select
|
|
className="w-full rounded-xl px-4 py-4 text-sm outline-none appearance-none"
|
|
style={{ background: "#080f13", border: "1px solid rgba(65,71,84,0.4)", color: "#dce3ea" }}
|
|
value={count}
|
|
onChange={e => handleChange("count", Number(e.target.value))}
|
|
>
|
|
<option value={25}>25</option>
|
|
<option value={50}>50</option>
|
|
<option value={100}>100</option>
|
|
</select>
|
|
</div>
|
|
<div className="sm:col-span-2 md:col-span-1">
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={!query.trim() || loading || queueRunning}
|
|
className="w-full h-[58px] rounded-xl flex items-center justify-center gap-2 transition-all active:scale-95 disabled:opacity-50"
|
|
style={{ background: "#333a3f" }}
|
|
onMouseEnter={e => { if (!e.currentTarget.disabled) { e.currentTarget.style.background = "#1a73e8"; } }}
|
|
onMouseLeave={e => { e.currentTarget.style.background = "#333a3f"; }}
|
|
>
|
|
<span className="material-symbols-outlined" style={{ color: "#dce3ea" }}>bolt</span>
|
|
<span className="md:hidden text-sm font-bold" style={{ color: "#dce3ea", fontFamily: "Manrope, sans-serif" }}>Suchen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Presets */}
|
|
<div className="mt-8 pt-8" style={{ borderTop: "1px solid rgba(255,255,255,0.05)" }}>
|
|
<p className="text-[10px] font-bold uppercase tracking-widest mb-4" style={{ color: "#c1c6d6" }}>Quick Presets</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
{["Stadtwerke", "Energieversorger", "Industrie-Energie", "Gemeindewerke", "Netzbetreiber"].map(preset => (
|
|
<button
|
|
key={preset}
|
|
onClick={() => handleChange("query", preset)}
|
|
className="px-5 py-2 rounded-full text-sm font-medium transition-all"
|
|
style={{ background: "rgba(47,54,59,0.5)", border: "1px solid rgba(255,255,255,0.05)", color: "#dce3ea" }}
|
|
onMouseEnter={e => { e.currentTarget.style.background = "rgba(26,115,232,0.2)"; e.currentTarget.style.borderColor = "rgba(173,199,255,0.3)"; }}
|
|
onMouseLeave={e => { e.currentTarget.style.background = "rgba(47,54,59,0.5)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.05)"; }}
|
|
>
|
|
{preset}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
{/* Loading Card */}
|
|
{loading && jobId && (
|
|
<LoadingCard
|
|
jobId={jobId}
|
|
targetCount={count}
|
|
query={query}
|
|
region={region}
|
|
onDone={handleDone}
|
|
onError={handleError}
|
|
/>
|
|
)}
|
|
|
|
{/* AI Modal */}
|
|
{aiOpen && (
|
|
<AiSearchModal
|
|
searchMode="custom"
|
|
onStart={(queries) => {
|
|
setAiOpen(false);
|
|
if (!queries.length) return;
|
|
const first = queries[0];
|
|
setQuery(first.query);
|
|
setRegion(first.region);
|
|
setCount(first.count);
|
|
setLoading(true);
|
|
setJobId(null);
|
|
setLeads([]);
|
|
setSearchDone(false);
|
|
setSelected(new Set());
|
|
// Save to history
|
|
fetch("/api/search-history", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ query: first.query, region: first.region, searchMode: "custom" }),
|
|
}).catch(() => {});
|
|
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={{
|
|
background: "#161c21",
|
|
border: "1px solid rgba(65,71,84,0.3)",
|
|
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>
|
|
);
|
|
}
|