Floke/Brancheneinstufung2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(b2b-assistant): Implement Step 7 (Customer Journey) with tactical focus on Buying Center, Deal-Breakers, and Assets. Add restart functionality for individual steps.

Browse Source
This commit is contained in:
Floke
2026-01-14 08:42:14 +00:00
parent 34203e2325
commit 09dbdac817
8 changed files with 166 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
b2b-marketing-assistant/components/Icons.tsx
View File

@@ -83,3 +83,9 @@ export const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' })
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
);
export const RefreshIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`h-6 w-6 ${className}`}>
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
);

50
b2b-marketing-assistant/components/StepDisplay.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useMemo, useRef, useEffect } from 'react';
import { CopyIcon, ClipboardTableIcon, SearchIcon, TrashIcon, LoadingSpinner, CheckIcon, XMarkIcon } from './Icons';
import { CopyIcon, ClipboardTableIcon, SearchIcon, TrashIcon, LoadingSpinner, CheckIcon, XMarkIcon, RefreshIcon } from './Icons';
import { convertArrayToTsv } from '../services/export';
import { translations } from '../constants';
@@ -14,16 +14,18 @@ interface StepDisplayProps {
canDeleteRows?: boolean;
onEnrichRow?: (productName: string, productUrl?: string) => Promise<void>;
isEnriching?: boolean;
onRestart?: () => void;
t: typeof translations.de;
}
export const StepDisplay: React.FC<StepDisplayProps> = ({ title, summary, headers, rows, onDataChange, canAddRows = false, canDeleteRows = false, onEnrichRow, isEnriching = false, t }) => {
export const StepDisplay: React.FC<StepDisplayProps> = ({ title, summary, headers, rows, onDataChange, canAddRows = false, canDeleteRows = false, onEnrichRow, isEnriching = false, onRestart, t }) => {
const [copySuccess, setCopySuccess] = useState('');
const [filterQuery, setFilterQuery] = useState('');
const [isAddingRow, setIsAddingRow] = useState(false);
const [newRowValue, setNewRowValue] = useState('');
const [newRowUrl, setNewRowUrl] = useState('');
const inputRef = useRef<HTMLInputElement>(null);
const [showRestartConfirm, setShowRestartConfirm] = useState(false);
const filteredRows = useMemo(() => {
if (!filterQuery) {
@@ -140,6 +142,15 @@ export const StepDisplay: React.FC<StepDisplayProps> = ({ title, summary, header
const newRows = rows.filter((_, index) => index !== rowIndexToDelete);
onDataChange(newRows);
};
const handleRestartClick = () => {
setShowRestartConfirm(true);
};
const handleRestartConfirm = () => {
setShowRestartConfirm(false);
if (onRestart) onRestart();
};
const getColumnStyle = (header: string): React.CSSProperties => {
const lowerHeader = header.toLowerCase();
@@ -169,9 +180,40 @@ export const StepDisplay: React.FC<StepDisplayProps> = ({ title, summary, header
const isLoadingCell = (cell: string) => cell.toLowerCase().includes(loadingText.toLowerCase());
return (
<section className="bg-white dark:bg-slate-800/50 rounded-2xl shadow-lg p-6 md:p-8 border border-slate-200 dark:border-slate-700 print:shadow-none print:border-none print:[break-inside:avoid]">
<section className="bg-white dark:bg-slate-800/50 rounded-2xl shadow-lg p-6 md:p-8 border border-slate-200 dark:border-slate-700 print:shadow-none print:border-none print:[break-inside:avoid] relative">
<div className="flex flex-col sm:flex-row justify-between sm:items-start mb-6 gap-4">
<h2 className="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white">{title}</h2>
<div className="flex items-center gap-4">
<h2 className="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white">{title}</h2>
{onRestart && (
<div className="relative print:hidden">
{!showRestartConfirm ? (
<button
onClick={handleRestartClick}
className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-full transition-colors"
title="Diesen Schritt neu starten (löscht nachfolgende Schritte)"
>
<RefreshIcon className="h-5 w-5" />
</button>
) : (
<div className="absolute top-0 left-0 z-10 flex items-center bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-lg rounded-lg p-1 animate-fade-in whitespace-nowrap">
<span className="text-xs font-semibold text-slate-700 dark:text-slate-300 mx-2">Wirklich neu starten?</span>
<button
onClick={handleRestartConfirm}
className="p-1 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/30 rounded"
>
<CheckIcon className="h-4 w-4" />
</button>
<button
onClick={() => setShowRestartConfirm(false)}
className="p-1 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded"
>
<XMarkIcon className="h-4 w-4" />
</button>
</div>
)}
</div>
)}
</div>
<div className="relative ml-auto">
<button
onClick={handleCopyTable}