refactor: Entscheider-Kategorie als Einzelauswahl (Radio)

- Nur noch eine Kategorie gleichzeitig wählbar (Array → einzelner Wert)
- ceo-Label: "CEO / Owner / President / Founder" mit Empfohlen-Badge
- API-Aufruf sendet [category] statt categories[]
- Überflüssige Validierungen entfernt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Timo Uttenweiler
2026-03-17 13:05:14 +01:00
parent 717bc4f943
commit 39760b20a9
4 changed files with 61 additions and 71 deletions

View File

@@ -19,12 +19,12 @@ import { Checkbox } from "@/components/ui/checkbox";
const RESULT_OPTIONS = [10, 25, 50, 100, 200];
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" },
const CATEGORY_OPTIONS: { value: DecisionMakerCategory; label: string; recommended?: boolean }[] = [
{ value: "ceo", label: "CEO / Owner / President / Founder", recommended: true },
{ value: "operations", label: "COO" },
{ value: "engineering", label: "CTO" },
{ value: "marketing", label: "CMO" },
{ value: "finance", label: "CFO" },
{ value: "sales", label: "Vertriebsleiter" },
];
@@ -36,7 +36,7 @@ export default function SerpPage() {
const [country, setCountry] = useState("de");
const [language, setLanguage] = useState("de");
const [filterSocial, setFilterSocial] = useState(true);
const [categories, setCategories] = useState<DecisionMakerCategory[]>(["ceo"]);
const [category, setCategory] = useState<DecisionMakerCategory>("ceo");
const [stage, setStage] = useState<Stage>("idle");
const [jobId, setJobId] = useState<string | null>(null);
const [progress, setProgress] = useState({ current: 0, total: 0, phase: "" });
@@ -48,7 +48,6 @@ export default function SerpPage() {
const startJob = async () => {
if (!query.trim()) return toast.error("Suchbegriff eingeben");
if (!categories.length) return toast.error("Mindestens eine Kategorie auswählen");
setStage("running");
setResults([]);
@@ -64,7 +63,7 @@ export default function SerpPage() {
countryCode: country,
languageCode: language,
filterSocial,
categories,
categories: [category],
}),
});
const data = await res.json() as { jobId?: string; error?: string };
@@ -249,16 +248,17 @@ export default function SerpPage() {
{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)
onClick={() => setCategory(opt.value)}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium border transition-all ${
category === opt.value
? "bg-purple-500/20 text-purple-300 border-purple-500/40"
: "bg-[#0d0d18] text-gray-400 border-[#2e2e3e] hover:border-purple-500/30"
}`}
>
{opt.label}
{opt.recommended && (
<span className="text-[10px] bg-purple-500/30 text-purple-300 px-1.5 py-0.5 rounded font-semibold">Empfohlen</span>
)}
</button>
))}
</div>
@@ -274,7 +274,7 @@ export default function SerpPage() {
{stage === "idle" || stage === "failed" ? (
<Button
onClick={startJob}
disabled={!query.trim() || !categories.length}
disabled={!query.trim()}
className="bg-gradient-to-r from-purple-500 to-blue-600 hover:from-purple-600 hover:to-blue-700 text-white font-medium px-8 shadow-lg hover:shadow-purple-500/25 transition-all"
>
SERP-Suche starten