feat: OnyvaLeads customer UI — Suche + Leadspeicher
- New Topbar: logo, 2-tab pill switcher, live "Neu" badge - /suche page: SearchCard, LoadingCard, ExamplePills - /leadspeicher page: full leads table with filters, pagination - StatusBadge, StatusPopover, LeadSidePanel, BulkActionBar - POST /api/search: unified search entry point → serp-enrich - Remove Sidebar + old TopBar from layout - Title: OnyvaLeads, redirect / → /suche Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Timo Uttenweiler
53
components/search/ExamplePills.tsx
Normal file
53
components/search/ExamplePills.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
interface ExamplePill {
|
||||
label: string;
|
||||
query: string;
|
||||
region: string;
|
||||
}
|
||||
|
||||
const EXAMPLES: ExamplePill[] = [
|
||||
{ label: "☀️ Solaranlagen Bayern", query: "Solaranlagen", region: "Bayern" },
|
||||
{ label: "🔧 Dachdecker NRW", query: "Dachdecker", region: "NRW" },
|
||||
{ label: "📊 Steuerberater Berlin", query: "Steuerberater", region: "Berlin" },
|
||||
{ label: "🏗️ Bauunternehmen Süddeutschland", query: "Bauunternehmen", region: "Süddeutschland" },
|
||||
{ label: "🌿 Landschaftsgärtner Hamburg", query: "Landschaftsgärtner", region: "Hamburg" },
|
||||
{ label: "🔌 Elektroinstallateur München", query: "Elektroinstallateur", region: "München" },
|
||||
];
|
||||
|
||||
interface ExamplePillsProps {
|
||||
onSelect: (query: string, region: string) => void;
|
||||
}
|
||||
|
||||
export function ExamplePills({ onSelect }: ExamplePillsProps) {
|
||||
return (
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
|
||||
{EXAMPLES.map((ex) => (
|
||||
<button
|
||||
key={ex.label}
|
||||
onClick={() => onSelect(ex.query, ex.region)}
|
||||
style={{
|
||||
padding: "5px 12px",
|
||||
border: "1px solid #2e2e3e",
|
||||
borderRadius: 20,
|
||||
fontSize: 12,
|
||||
color: "#9ca3af",
|
||||
background: "transparent",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.15s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLButtonElement).style.borderColor = "#3b82f6";
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "#3b82f6";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLButtonElement).style.borderColor = "#2e2e3e";
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "#9ca3af";
|
||||
}}
|
||||
>
|
||||
{ex.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
220
components/search/LoadingCard.tsx
Normal file
220
components/search/LoadingCard.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type Phase = "scraping" | "enriching" | "emails" | "done";
|
||||
|
||||
interface JobStatus {
|
||||
status: "running" | "complete" | "failed";
|
||||
totalLeads: number;
|
||||
emailsFound: number;
|
||||
}
|
||||
|
||||
interface LoadingCardProps {
|
||||
jobId: string;
|
||||
onDone: (totalFound: number) => void;
|
||||
onError: () => void;
|
||||
}
|
||||
|
||||
const STEPS = [
|
||||
{ id: "scraping" as Phase, label: "Unternehmen gefunden" },
|
||||
{ id: "enriching" as Phase, label: "Kontakte ermitteln" },
|
||||
{ id: "emails" as Phase, label: "E-Mails suchen" },
|
||||
{ id: "done" as Phase, label: "Fertig" },
|
||||
];
|
||||
|
||||
function getPhase(s: JobStatus): Phase {
|
||||
if (s.status === "complete") return "done";
|
||||
if (s.emailsFound > 0) return "emails";
|
||||
if (s.totalLeads > 0) return "enriching";
|
||||
return "scraping";
|
||||
}
|
||||
|
||||
function stepState(step: Phase, currentPhase: Phase): "done" | "active" | "pending" {
|
||||
const order: Phase[] = ["scraping", "enriching", "emails", "done"];
|
||||
const stepIdx = order.indexOf(step);
|
||||
const currentIdx = order.indexOf(currentPhase);
|
||||
if (stepIdx < currentIdx) return "done";
|
||||
if (stepIdx === currentIdx) return "active";
|
||||
return "pending";
|
||||
}
|
||||
|
||||
export function LoadingCard({ jobId, onDone, onError }: LoadingCardProps) {
|
||||
const [jobStatus, setJobStatus] = useState<JobStatus>({
|
||||
status: "running",
|
||||
totalLeads: 0,
|
||||
emailsFound: 0,
|
||||
});
|
||||
const [progressWidth, setProgressWidth] = useState(40);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
let pendulumInterval: ReturnType<typeof setInterval> | null = null;
|
||||
let pollTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
// Pendulum animation while running
|
||||
let goingUp = true;
|
||||
pendulumInterval = setInterval(() => {
|
||||
if (cancelled) return;
|
||||
setProgressWidth((prev) => {
|
||||
if (goingUp) {
|
||||
if (prev >= 85) { goingUp = false; return 84; }
|
||||
return prev + 1;
|
||||
} else {
|
||||
if (prev <= 40) { goingUp = true; return 41; }
|
||||
return prev - 1;
|
||||
}
|
||||
});
|
||||
}, 120);
|
||||
|
||||
async function poll() {
|
||||
if (cancelled) return;
|
||||
try {
|
||||
const res = await fetch(`/api/jobs/${jobId}/status`);
|
||||
if (!res.ok) throw new Error("fetch failed");
|
||||
const data = await res.json() as JobStatus;
|
||||
|
||||
if (!cancelled) {
|
||||
setJobStatus(data);
|
||||
if (data.status === "complete") {
|
||||
if (pendulumInterval) clearInterval(pendulumInterval);
|
||||
setProgressWidth(100);
|
||||
setTimeout(() => {
|
||||
if (!cancelled) onDone(data.totalLeads);
|
||||
}, 800);
|
||||
} else if (data.status === "failed") {
|
||||
if (pendulumInterval) clearInterval(pendulumInterval);
|
||||
onError();
|
||||
} else {
|
||||
pollTimeout = setTimeout(poll, 2500);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) {
|
||||
pollTimeout = setTimeout(poll, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
poll();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (pendulumInterval) clearInterval(pendulumInterval);
|
||||
if (pollTimeout) clearTimeout(pollTimeout);
|
||||
};
|
||||
}, [jobId, onDone, onError]);
|
||||
|
||||
const phase = getPhase(jobStatus);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "#111118",
|
||||
border: "1px solid #1e1e2e",
|
||||
borderRadius: 12,
|
||||
padding: 24,
|
||||
marginTop: 16,
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 500, color: "#ffffff" }}>
|
||||
Ergebnisse werden gesucht
|
||||
</span>
|
||||
<span style={{ fontSize: 12, color: "#9ca3af" }}>
|
||||
{jobStatus.totalLeads > 0 || jobStatus.emailsFound > 0
|
||||
? `${jobStatus.emailsFound} von ${jobStatus.totalLeads} gefunden`
|
||||
: "Wird gestartet…"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div
|
||||
style={{
|
||||
height: 5,
|
||||
borderRadius: 3,
|
||||
background: "#1e1e2e",
|
||||
overflow: "hidden",
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
width: `${progressWidth}%`,
|
||||
background: "linear-gradient(90deg, #3b82f6, #8b5cf6)",
|
||||
borderRadius: 3,
|
||||
transition: phase === "done" ? "width 0.5s ease" : "width 0.12s linear",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div style={{ display: "flex", gap: 20, marginBottom: 16 }}>
|
||||
{STEPS.map((step) => {
|
||||
const state = stepState(step.id, phase);
|
||||
return (
|
||||
<div key={step.id} style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||||
<div
|
||||
style={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
background:
|
||||
state === "done"
|
||||
? "#22c55e"
|
||||
: state === "active"
|
||||
? "#3b82f6"
|
||||
: "#2e2e3e",
|
||||
animation: state === "active" ? "pulse 1.5s infinite" : "none",
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color:
|
||||
state === "done"
|
||||
? "#22c55e"
|
||||
: state === "active"
|
||||
? "#ffffff"
|
||||
: "#6b7280",
|
||||
}}
|
||||
>
|
||||
{step.label}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Email note */}
|
||||
{phase === "emails" && (
|
||||
<p style={{ fontSize: 11, color: "#6b7280", fontStyle: "italic", marginBottom: 12 }}>
|
||||
E-Mail-Suche kann einen Moment dauern.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Warning banner */}
|
||||
<div
|
||||
style={{
|
||||
borderLeft: "3px solid #f59e0b",
|
||||
background: "rgba(245,158,11,0.08)",
|
||||
padding: "10px 14px",
|
||||
borderRadius: 8,
|
||||
fontSize: 12,
|
||||
color: "#9ca3af",
|
||||
}}
|
||||
>
|
||||
⚠️ Bitte diesen Tab nicht schließen, während die Suche läuft.
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
207
components/search/SearchCard.tsx
Normal file
207
components/search/SearchCard.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
|
||||
import { ExamplePills } from "./ExamplePills";
|
||||
|
||||
interface SearchCardProps {
|
||||
query: string;
|
||||
region: string;
|
||||
count: number;
|
||||
loading: boolean;
|
||||
onChange: (field: "query" | "region" | "count", value: string | number) => void;
|
||||
onSubmit: () => void;
|
||||
}
|
||||
|
||||
export function SearchCard({ query, region, count, loading, onChange, onSubmit }: SearchCardProps) {
|
||||
const canSubmit = query.trim().length > 0 && !loading;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "#111118",
|
||||
border: "1px solid #1e1e2e",
|
||||
borderRadius: 12,
|
||||
padding: 24,
|
||||
opacity: loading ? 0.55 : 1,
|
||||
pointerEvents: loading ? "none" : "auto",
|
||||
transition: "opacity 0.2s",
|
||||
}}
|
||||
>
|
||||
{/* 3-column grid */}
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr 120px",
|
||||
gap: 12,
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
{/* Suchbegriff */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
color: "#6b7280",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
Suchbegriff
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => onChange("query", e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) onSubmit(); }}
|
||||
placeholder="z.B. Dachdecker, Solaranlage, Steuerberater…"
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0d0d18",
|
||||
border: "1px solid #1e1e2e",
|
||||
borderRadius: 8,
|
||||
padding: "9px 12px",
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
outline: "none",
|
||||
boxSizing: "border-box",
|
||||
transition: "border-color 0.15s",
|
||||
}}
|
||||
onFocus={(e) => { e.currentTarget.style.borderColor = "#3b82f6"; }}
|
||||
onBlur={(e) => { e.currentTarget.style.borderColor = "#1e1e2e"; }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Region */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
color: "#6b7280",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
Region
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={region}
|
||||
onChange={(e) => onChange("region", e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) onSubmit(); }}
|
||||
placeholder="z.B. Bayern, München, Deutschland"
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0d0d18",
|
||||
border: "1px solid #1e1e2e",
|
||||
borderRadius: 8,
|
||||
padding: "9px 12px",
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
outline: "none",
|
||||
boxSizing: "border-box",
|
||||
transition: "border-color 0.15s",
|
||||
}}
|
||||
onFocus={(e) => { e.currentTarget.style.borderColor = "#3b82f6"; }}
|
||||
onBlur={(e) => { e.currentTarget.style.borderColor = "#1e1e2e"; }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Anzahl */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
color: "#6b7280",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
Anzahl
|
||||
</label>
|
||||
<select
|
||||
value={count}
|
||||
onChange={(e) => onChange("count", Number(e.target.value))}
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0d0d18",
|
||||
border: "1px solid #1e1e2e",
|
||||
borderRadius: 8,
|
||||
padding: "9px 12px",
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
outline: "none",
|
||||
cursor: "pointer",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<option value={25}>25 Leads</option>
|
||||
<option value={50}>50 Leads</option>
|
||||
<option value={100}>100 Leads</option>
|
||||
<option value={200}>200 Leads</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit button */}
|
||||
<button
|
||||
onClick={onSubmit}
|
||||
disabled={!canSubmit}
|
||||
style={{
|
||||
width: "100%",
|
||||
background: canSubmit ? "linear-gradient(135deg, #3b82f6, #8b5cf6)" : "#1e1e2e",
|
||||
color: canSubmit ? "#ffffff" : "#6b7280",
|
||||
border: "none",
|
||||
borderRadius: 10,
|
||||
padding: "12px 16px",
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
cursor: canSubmit ? "pointer" : "not-allowed",
|
||||
opacity: canSubmit ? 1 : 0.5,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
marginBottom: 20,
|
||||
transition: "opacity 0.15s",
|
||||
}}
|
||||
>
|
||||
{/* Magnifying glass icon */}
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none">
|
||||
<circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" strokeWidth="1.5" />
|
||||
<line x1="10.5" y1="10.5" x2="13.5" y2="13.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
Leads suchen
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, height: 1, background: "#1e1e2e" }} />
|
||||
<span style={{ fontSize: 12, color: "#6b7280", flexShrink: 0 }}>Beispielsuche</span>
|
||||
<div style={{ flex: 1, height: 1, background: "#1e1e2e" }} />
|
||||
</div>
|
||||
|
||||
{/* Example pills */}
|
||||
<ExamplePills
|
||||
onSelect={(q, r) => {
|
||||
onChange("query", q);
|
||||
onChange("region", r);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user