Dateien nach "general-market-intelligence/components" hochladen

general-market-intelligence/components/StepReview.tsx

@@ -0,0 +1,122 @@
+
+import React, { useState } from 'react';
+import { Trash2, Plus, CheckCircle2, ExternalLink, FileText } from 'lucide-react';
+import { Competitor } from '../types';
+
+interface StepReviewProps {
+  competitors: Competitor[];
+  onRemove: (id: string) => void;
+  onAdd: (name: string) => void;
+  onConfirm: () => void;
+  hasResults?: boolean;
+  onShowReport?: () => void;
+}
+
+export const StepReview: React.FC<StepReviewProps> = ({ competitors, onRemove, onAdd, onConfirm, hasResults, onShowReport }) => {
+  const [newCompany, setNewCompany] = useState('');
+
+  const handleAdd = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newCompany.trim()) {
+      onAdd(newCompany.trim());
+      setNewCompany('');
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto mt-8 px-4 pb-24">
+      <div className="flex items-end justify-between mb-6">
+        <div>
+          <h2 className="text-2xl font-bold text-slate-900">Confirm Target List</h2>
+          <p className="text-slate-600 mt-1">Review the identified companies before starting the deep tech audit.</p>
+        </div>
+        <div className="text-right">
+          <span className="bg-indigo-50 text-indigo-700 font-bold py-1 px-3 rounded-full text-sm">
+            {competitors.length} Companies
+          </span>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+        <ul className="divide-y divide-slate-100">
+          {competitors.map((comp) => (
+            <li key={comp.id} className="flex items-start justify-between p-4 hover:bg-slate-50 transition-colors group">
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-bold text-slate-800 text-lg">{comp.name}</span>
+                  {comp.url && (
+                    <a 
+                      href={comp.url} 
+                      target="_blank" 
+                      rel="noreferrer" 
+                      className="text-indigo-500 hover:text-indigo-700 p-1 rounded hover:bg-indigo-50"
+                      title={comp.url}
+                    >
+                      <ExternalLink size={14} />
+                    </a>
+                  )}
+                </div>
+                {comp.description && (
+                  <p className="text-sm text-slate-500 mt-1 pr-8">{comp.description}</p>
+                )}
+              </div>
+              
+              <button
+                onClick={() => onRemove(comp.id)}
+                className="text-slate-400 hover:text-red-500 p-2 rounded-full hover:bg-red-50 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 self-center"
+                aria-label="Remove"
+              >
+                <Trash2 size={18} />
+              </button>
+            </li>
+          ))}
+          {competitors.length === 0 && (
+            <li className="p-8 text-center text-slate-500 italic">
+              No companies in list. Add some manually below.
+            </li>
+          )}
+        </ul>
+        
+        <div className="bg-slate-50 p-4 border-t border-slate-200">
+            <form onSubmit={handleAdd} className="flex gap-2">
+                <input 
+                    type="text" 
+                    value={newCompany}
+                    onChange={(e) => setNewCompany(e.target.value)}
+                    placeholder="Add another company manually..."
+                    className="flex-1 px-4 py-2 rounded-lg border border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 outline-none"
+                />
+                <button 
+                    type="submit"
+                    disabled={!newCompany.trim()}
+                    className="bg-white border border-slate-300 text-slate-700 hover:bg-slate-100 font-medium px-4 py-2 rounded-lg flex items-center gap-2 disabled:opacity-50"
+                >
+                    <Plus size={18} /> Add
+                </button>
+            </form>
+        </div>
+      </div>
+
+      {/* Sticky Footer CTA */}
+      <div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md border-t border-slate-200 p-4 z-40">
+        <div className="max-w-4xl mx-auto flex justify-end gap-3">
+             {hasResults && onShowReport && (
+                <button
+                    onClick={onShowReport}
+                    className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-bold py-3 px-6 rounded-xl shadow-sm transition-all flex items-center gap-2"
+                >
+                    <FileText size={20} /> View Report
+                </button>
+            )}
+             <button
+                onClick={onConfirm}
+                disabled={competitors.length === 0}
+                className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-8 rounded-xl shadow-lg shadow-emerald-600/20 transition-all transform active:scale-[0.98] flex items-center gap-2"
+            >
+                <CheckCircle2 size={20} /> {hasResults ? "Restart Analysis" : "Confirm & Run Audit"}
+            </button>
+        </div>
+      </div>
+    </div>
+  );
+};