Floke
6fcd29a11a
- Integrated ICP-based lookalike sourcing. - Implemented Deep Tech Audit with automated evidence collection. - Enhanced processing terminal with real-time logs. - Refined daily logging and resolved all dependency issues. - Documented final status and next steps.
64 lines
3.1 KiB
TypeScript
64 lines
3.1 KiB
TypeScript
|
|
import React, { useEffect, useRef } from 'react';
|
|
import { Loader, TrendingUp, Search, Eye } from 'lucide-react';
|
|
import { AnalysisState } from '../types';
|
|
|
|
interface StepProcessingProps {
|
|
state: AnalysisState;
|
|
}
|
|
|
|
export const StepProcessing: React.FC<StepProcessingProps> = ({ state }) => {
|
|
const percentage = Math.round((state.completed / state.total) * 100) || 0;
|
|
const terminalRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (terminalRef.current) {
|
|
terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
|
|
}
|
|
}, [state.completed, state.currentCompany, state.terminalLogs]);
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto mt-12 px-4">
|
|
<div className="text-center mb-8">
|
|
<div className="inline-block p-3 bg-indigo-50 rounded-full mb-4">
|
|
<Loader className="animate-spin text-indigo-600" size={32} />
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-slate-900">Running Market Audit</h2>
|
|
<p className="text-slate-600">Analyzing digital traces based on your strategy...</p>
|
|
</div>
|
|
|
|
<div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 mb-6">
|
|
<div className="flex justify-between text-sm font-medium text-slate-700 mb-2">
|
|
<span>Overall Progress</span>
|
|
<span>{percentage}% ({state.completed}/{state.total})</span>
|
|
</div>
|
|
<div className="w-full bg-slate-100 rounded-full h-4 overflow-hidden">
|
|
<div className="bg-indigo-600 h-4 rounded-full transition-all duration-500 ease-out" style={{ width: `${percentage}%` }}></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-slate-900 rounded-xl shadow-xl overflow-hidden font-mono text-sm border border-slate-700">
|
|
<div className="bg-slate-800 px-4 py-2 flex items-center justify-between border-b border-slate-700">
|
|
<div className="flex gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-red-500/80"></div>
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
|
|
<div className="w-3 h-3 rounded-full bg-green-500/80"></div>
|
|
</div>
|
|
<span className="text-slate-500 text-[10px] uppercase font-bold tracking-widest">Deep Tech Audit Session</span>
|
|
</div>
|
|
<div ref={terminalRef} className="p-6 h-80 overflow-y-auto text-slate-300 space-y-1.5 scroll-smooth scrollbar-thin scrollbar-thumb-slate-700">
|
|
{state.terminalLogs?.map((log, idx) => (
|
|
<div key={idx} className="flex gap-3 animate-in fade-in slide-in-from-left-2 duration-300">
|
|
<span className="text-slate-600 shrink-0">[{new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second: '2-digit'})}]</span>
|
|
<span className={log.startsWith('>') ? 'text-indigo-400 font-bold' : log.includes('✓') ? 'text-emerald-400' : 'text-slate-300'}>
|
|
{log}
|
|
</span>
|
|
</div>
|
|
))}
|
|
{!state.terminalLogs?.length && <div className="text-slate-500 italic">Initializing agent...</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|