717bc4f943
Entfernt: HR, IT, Einkauf, Logistik Behalten: CEO/Inhaber/Gründer, COO, CTO, CMO, CFO, Vertriebsleiter LinkedIn-Guide: Zielpositionen aktualisiert (Founder, Co-Founder, CEO, CTO, COO, CMO, Owner, Principal, Partner, CXO, Geschäftsführer, Inhaber) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
361 lines
15 KiB
TypeScript
361 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useCallback } from "react";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { FileDropZone } from "@/components/shared/FileDropZone";
|
|
import { RoleChipsInput } from "@/components/shared/RoleChipsInput";
|
|
import { ProgressCard } from "@/components/shared/ProgressCard";
|
|
import { ResultsTable, type ResultRow } from "@/components/shared/ResultsTable";
|
|
import { ExportButtons } from "@/components/shared/ExportButtons";
|
|
import { EmptyState } from "@/components/shared/EmptyState";
|
|
import { parseCSV, detectDomainColumn, type ExportRow } from "@/lib/utils/csv";
|
|
import { cleanDomain } from "@/lib/utils/domains";
|
|
import { toast } from "sonner";
|
|
import { Building2, ChevronRight, AlertCircle } from "lucide-react";
|
|
import { useAppStore } from "@/lib/store";
|
|
import type { DecisionMakerCategory } from "@/lib/services/anymailfinder";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
|
|
const DEFAULT_ROLES: DecisionMakerCategory[] = ["ceo"];
|
|
|
|
const CATEGORY_OPTIONS: { value: DecisionMakerCategory; label: string }[] = [
|
|
{ value: "ceo", label: "CEO / Inhaber / Gründer" },
|
|
{ value: "operations", label: "COO / Geschäftsführung" },
|
|
{ value: "engineering", label: "CTO / Technik" },
|
|
{ value: "marketing", label: "CMO / Marketing" },
|
|
{ value: "finance", label: "CFO / Finanzen" },
|
|
{ value: "sales", label: "Vertriebsleiter" },
|
|
];
|
|
|
|
interface CompanyRow {
|
|
name: string;
|
|
domain: string;
|
|
}
|
|
|
|
export default function AirScalePage() {
|
|
const [csvData, setCsvData] = useState<Record<string, string>[]>([]);
|
|
const [headers, setHeaders] = useState<string[]>([]);
|
|
const [domainCol, setDomainCol] = useState<string>("");
|
|
const [nameCol, setNameCol] = useState<string>("");
|
|
const [categories, setCategories] = useState<DecisionMakerCategory[]>(DEFAULT_ROLES);
|
|
const [jobId, setJobId] = useState<string | null>(null);
|
|
const [jobStatus, setJobStatus] = useState<string>("idle");
|
|
const [progress, setProgress] = useState({ current: 0, total: 0 });
|
|
const [results, setResults] = useState<ResultRow[]>([]);
|
|
const [running, setRunning] = useState(false);
|
|
const { addJob, updateJob, removeJob } = useAppStore();
|
|
|
|
const onFile = useCallback((content: string) => {
|
|
const { data, headers: h } = parseCSV(content);
|
|
setCsvData(data);
|
|
setHeaders(h);
|
|
const detected = detectDomainColumn(h);
|
|
if (detected) setDomainCol(detected);
|
|
const nameGuess = h.find(x => /company|name|firma/i.test(x));
|
|
if (nameGuess) setNameCol(nameGuess);
|
|
}, []);
|
|
|
|
const companies: CompanyRow[] = csvData
|
|
.map(row => ({
|
|
name: nameCol ? (row[nameCol] || "") : "",
|
|
domain: cleanDomain(row[domainCol] || ""),
|
|
}))
|
|
.filter(c => c.domain);
|
|
|
|
const withDomain = companies.length;
|
|
const withoutDomain = csvData.length - withDomain;
|
|
|
|
const startEnrichment = async () => {
|
|
if (!companies.length) return toast.error("Keine Unternehmen mit Domains gefunden");
|
|
if (!categories.length) return toast.error("Mindestens eine Entscheider-Kategorie auswählen");
|
|
|
|
setRunning(true);
|
|
setResults([]);
|
|
setJobStatus("running");
|
|
|
|
try {
|
|
const res = await fetch("/api/jobs/airscale-enrich", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ companies, categories }),
|
|
});
|
|
const data = await res.json() as { jobId?: string; error?: string };
|
|
if (!res.ok || !data.jobId) throw new Error(data.error || "Failed to start job");
|
|
|
|
setJobId(data.jobId);
|
|
addJob({ id: data.jobId, type: "airscale", status: "running", progress: 0, total: companies.length });
|
|
toast.success("Anreicherung gestartet!");
|
|
pollJob(data.jobId);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Failed to start");
|
|
setRunning(false);
|
|
setJobStatus("failed");
|
|
}
|
|
};
|
|
|
|
const pollJob = (id: string) => {
|
|
const interval = setInterval(async () => {
|
|
try {
|
|
const res = await fetch(`/api/jobs/${id}/status`);
|
|
const data = await res.json() as {
|
|
status: string; totalLeads: number; emailsFound: number;
|
|
results: ResultRow[]; error?: string;
|
|
};
|
|
|
|
setProgress({ current: data.emailsFound, total: data.totalLeads });
|
|
setResults(data.results || []);
|
|
updateJob(id, { status: data.status, progress: data.emailsFound, total: data.totalLeads });
|
|
|
|
if (data.status === "complete" || data.status === "failed") {
|
|
clearInterval(interval);
|
|
setJobStatus(data.status);
|
|
setRunning(false);
|
|
removeJob(id);
|
|
if (data.status === "complete") {
|
|
toast.success(`Fertig! ${data.emailsFound} E-Mails aus ${data.totalLeads} Unternehmen gefunden`);
|
|
} else {
|
|
toast.error(`Job fehlgeschlagen: ${data.error || "Unbekannter Fehler"}`);
|
|
}
|
|
}
|
|
} catch {
|
|
clearInterval(interval);
|
|
setRunning(false);
|
|
}
|
|
}, 2000);
|
|
};
|
|
|
|
const exportRows: ExportRow[] = results.map(r => ({
|
|
company_name: r.companyName,
|
|
domain: r.domain,
|
|
contact_name: r.contactName,
|
|
contact_title: r.contactTitle,
|
|
email: r.email,
|
|
confidence_score: r.confidence !== undefined ? Math.round(r.confidence * 100) : undefined,
|
|
source_tab: "airscale",
|
|
job_id: jobId || "",
|
|
found_at: new Date().toISOString(),
|
|
}));
|
|
|
|
const hitRate = results.length > 0
|
|
? Math.round((results.filter(r => r.email).length / results.length) * 100)
|
|
: 0;
|
|
|
|
return (
|
|
<div className="space-y-6 max-w-5xl">
|
|
{/* Header */}
|
|
<div className="relative rounded-2xl bg-gradient-to-r from-blue-600/10 to-purple-600/10 border border-[#1e1e2e] p-6 overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent" />
|
|
<div className="relative">
|
|
<div className="flex items-center gap-2 text-sm text-blue-400 mb-2">
|
|
<Building2 className="w-4 h-4" />
|
|
<span>Tab 1</span>
|
|
<ChevronRight className="w-3 h-3" />
|
|
<span>AirScale Companies</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white">AirScale → E-Mail Anreicherung</h1>
|
|
<p className="text-gray-400 mt-1 text-sm">
|
|
Lade einen AirScale CSV-Export hoch und finde Entscheider-E-Mails über Anymailfinder.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step 1: Upload */}
|
|
<Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-5">
|
|
<h2 className="text-base font-semibold text-white flex items-center gap-2">
|
|
<span className="w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs flex items-center justify-center font-bold">1</span>
|
|
Upload AirScale CSV
|
|
</h2>
|
|
<FileDropZone onFile={onFile} label="AirScale CSV-Export hier ablegen" />
|
|
|
|
{csvData.length > 0 && (
|
|
<div className="space-y-4">
|
|
{/* Stats */}
|
|
<div className="flex gap-4">
|
|
{[
|
|
{ label: "Zeilen gesamt", value: csvData.length, color: "text-white" },
|
|
{ label: "Mit Domain", value: withDomain, color: "text-green-400" },
|
|
{ label: "Ohne Domain", value: withoutDomain, color: "text-yellow-400" },
|
|
].map(stat => (
|
|
<div key={stat.label} className="bg-[#0d0d18] rounded-lg px-4 py-2.5 border border-[#1e1e2e]">
|
|
<p className={`text-lg font-bold ${stat.color}`}>{stat.value}</p>
|
|
<p className="text-xs text-gray-500">{stat.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Column mapper */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label className="text-gray-300 text-sm mb-1.5 block">Domain-Spalte</Label>
|
|
<Select value={domainCol} onValueChange={v => setDomainCol(v ?? "")}>
|
|
<SelectTrigger className="bg-[#0d0d18] border-[#2e2e3e] text-white">
|
|
<SelectValue placeholder="Domain-Spalte auswählen..." />
|
|
</SelectTrigger>
|
|
<SelectContent className="bg-[#111118] border-[#2e2e3e]">
|
|
{headers.map(h => (
|
|
<SelectItem key={h} value={h} className="text-gray-300">{h}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label className="text-gray-300 text-sm mb-1.5 block">Firmenname-Spalte (optional)</Label>
|
|
<Select value={nameCol} onValueChange={v => setNameCol(v ?? "")}>
|
|
<SelectTrigger className="bg-[#0d0d18] border-[#2e2e3e] text-white">
|
|
<SelectValue placeholder="Namensspalte auswählen..." />
|
|
</SelectTrigger>
|
|
<SelectContent className="bg-[#111118] border-[#2e2e3e]">
|
|
<SelectItem value="" className="text-gray-400">Keine</SelectItem>
|
|
{headers.map(h => (
|
|
<SelectItem key={h} value={h} className="text-gray-300">{h}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Preview */}
|
|
<div className="rounded-lg border border-[#1e1e2e] overflow-hidden">
|
|
<div className="bg-[#0d0d18] px-4 py-2 text-xs text-gray-500 border-b border-[#1e1e2e]">
|
|
Vorschau (erste 5 Zeilen)
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-xs">
|
|
<thead>
|
|
<tr className="border-b border-[#1e1e2e]">
|
|
{headers.slice(0, 6).map(h => (
|
|
<th key={h} className="px-3 py-2 text-left text-gray-400">{h}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{csvData.slice(0, 5).map((row, i) => (
|
|
<tr key={i} className="border-b border-[#1e1e2e]/50">
|
|
{headers.slice(0, 6).map(h => (
|
|
<td key={h} className="px-3 py-2 text-gray-300 truncate max-w-[150px]">
|
|
{row[h] || "—"}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Step 2: Configure */}
|
|
<Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-5">
|
|
<h2 className="text-base font-semibold text-white flex items-center gap-2">
|
|
<span className="w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs flex items-center justify-center font-bold">2</span>
|
|
Entscheider-Kategorien
|
|
</h2>
|
|
|
|
<div className="space-y-3">
|
|
<Label className="text-gray-300 text-sm">Kategorien auswählen (nach Priorität sortiert)</Label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{CATEGORY_OPTIONS.map(opt => (
|
|
<button
|
|
key={opt.value}
|
|
onClick={() => {
|
|
setCategories(prev =>
|
|
prev.includes(opt.value)
|
|
? prev.filter(c => c !== opt.value)
|
|
: [...prev, opt.value]
|
|
);
|
|
}}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-all ${
|
|
categories.includes(opt.value)
|
|
? "bg-blue-500/20 text-blue-300 border-blue-500/40"
|
|
: "bg-[#0d0d18] text-gray-400 border-[#2e2e3e] hover:border-blue-500/30"
|
|
}`}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<p className="text-xs text-gray-500">
|
|
Kategorien werden in Prioritätsreihenfolge durchsucht. Die erste Kategorie mit einem gültigen Ergebnis gewinnt.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Step 3: Run */}
|
|
<Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-5">
|
|
<h2 className="text-base font-semibold text-white flex items-center gap-2">
|
|
<span className="w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs flex items-center justify-center font-bold">3</span>
|
|
Anreicherung starten
|
|
</h2>
|
|
|
|
{!running && jobStatus === "idle" && (
|
|
csvData.length === 0 ? (
|
|
<EmptyState
|
|
icon={Building2}
|
|
title="CSV hochladen um zu starten"
|
|
description="Lade deinen AirScale-Export oben hoch, konfiguriere und starte die Anreicherung."
|
|
/>
|
|
) : (
|
|
<Button
|
|
onClick={startEnrichment}
|
|
disabled={!withDomain || !domainCol || !categories.length}
|
|
className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-medium px-8 shadow-lg hover:shadow-blue-500/25 transition-all"
|
|
>
|
|
Anreicherung starten ({withDomain} Unternehmen)
|
|
</Button>
|
|
)
|
|
)}
|
|
|
|
{(running || jobStatus === "running") && (
|
|
<ProgressCard
|
|
title="Unternehmen werden angereichert..."
|
|
current={progress.current}
|
|
total={progress.total || withDomain}
|
|
subtitle="Entscheider-E-Mails werden über Anymailfinder gesucht"
|
|
status="running"
|
|
/>
|
|
)}
|
|
|
|
{jobStatus === "complete" && (
|
|
<ProgressCard
|
|
title="Anreicherung abgeschlossen"
|
|
current={progress.current}
|
|
total={progress.total}
|
|
subtitle={`Trefferquote: ${hitRate}%`}
|
|
status="complete"
|
|
/>
|
|
)}
|
|
|
|
{jobStatus === "failed" && (
|
|
<div className="flex items-center gap-2 text-red-400 text-sm">
|
|
<AlertCircle className="w-4 h-4" />
|
|
Anreicherung fehlgeschlagen. Bitte API-Key in den Einstellungen prüfen.
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Results */}
|
|
{results.length > 0 && (
|
|
<Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-4">
|
|
<div className="flex items-center justify-between flex-wrap gap-3">
|
|
<h2 className="text-base font-semibold text-white flex items-center gap-2">
|
|
<span className="w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs flex items-center justify-center font-bold">4</span>
|
|
Ergebnisse
|
|
</h2>
|
|
<ExportButtons
|
|
rows={exportRows}
|
|
filename={`airscale-leads-${jobId?.slice(0, 8) || "export"}`}
|
|
summary={`${results.filter(r => r.email).length} E-Mails gefunden • ${hitRate}% Trefferquote`}
|
|
/>
|
|
</div>
|
|
<ResultsTable rows={results} loading={running && results.length === 0} />
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|