525 lines
21 KiB
TypeScript
525 lines
21 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { FiArrowLeft, FiExternalLink, FiDownload, FiLoader } from 'react-icons/fi';
|
|
import type { DiscoveryResult, TechnologyCandidate, DeepDiveResult } from '../../types';
|
|
|
|
export default function DiscoveryDetailPage() {
|
|
const params = useParams();
|
|
const [discovery, setDiscovery] = useState<DiscoveryResult | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedCandidate, setSelectedCandidate] = useState<TechnologyCandidate | null>(null);
|
|
const [deepDiveLoading, setDeepDiveLoading] = useState(false);
|
|
const [deepDiveResult, setDeepDiveResult] = useState<DeepDiveResult | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (params.id) {
|
|
fetch(`/api/discoveries/${params.id}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
setDiscovery(data);
|
|
setLoading(false);
|
|
})
|
|
.catch(err => {
|
|
console.error('Failed to load discovery:', err);
|
|
setLoading(false);
|
|
});
|
|
}
|
|
}, [params.id]);
|
|
|
|
const handleExport = () => {
|
|
if (!discovery) return;
|
|
|
|
// Create CSV content
|
|
const headers = ['Rank', 'Title', 'Organization', 'Score', 'TRL', 'Source', 'Award Amount', 'URL'];
|
|
const rows = discovery.candidates.map((c, i) => [
|
|
i + 1,
|
|
`"${c.title.replace(/"/g, '""')}"`,
|
|
`"${c.organization.replace(/"/g, '""')}"`,
|
|
(c.score * 100).toFixed(1) + '%',
|
|
c.trl_estimate || 'N/A',
|
|
c.source_type,
|
|
c.award_amount ? `$${c.award_amount.toLocaleString()}` : 'N/A',
|
|
c.url
|
|
]);
|
|
|
|
const csv = [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
|
|
|
|
// Download
|
|
const blob = new Blob([csv], { type: 'text/csv' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `techscout_${discovery.id}_results.csv`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
const handleDeepDive = async (candidate: TechnologyCandidate) => {
|
|
if (!candidate || !discovery) return;
|
|
|
|
setDeepDiveLoading(true);
|
|
setDeepDiveResult(null);
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:8000/api/deepdive', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
organization: candidate.organization,
|
|
technology: candidate.description,
|
|
gap: discovery.capability_gap,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || 'Deep dive failed');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
throw new Error(data.error);
|
|
}
|
|
|
|
if (data.result) {
|
|
setDeepDiveResult(data.result);
|
|
}
|
|
} catch (error) {
|
|
console.error('Deep dive failed:', error);
|
|
alert(`Deep dive failed: ${error}`);
|
|
} finally {
|
|
setDeepDiveLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500">Loading discovery...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!discovery) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<p className="text-gray-500">Discovery not found</p>
|
|
<Link href="/discoveries" className="text-[#00d4ff] hover:underline mt-4 inline-block">
|
|
Back to discoveries
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<Link href="/discoveries" className="text-gray-500 hover:text-white flex items-center gap-2 mb-4">
|
|
<FiArrowLeft /> Back to discoveries
|
|
</Link>
|
|
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold mb-2">{discovery.capability_gap}</h1>
|
|
<div className="flex items-center gap-4 text-sm text-gray-500">
|
|
<span>{new Date(discovery.timestamp).toLocaleString()}</span>
|
|
<span>{discovery.search_duration_seconds.toFixed(1)}s</span>
|
|
<span>{discovery.total_results_found} total results</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleExport}
|
|
className="flex items-center gap-2 px-4 py-2 bg-[#1e1e2e] rounded-lg hover:bg-[#2e2e3e] transition-colors"
|
|
>
|
|
<FiDownload /> Export CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Query Analysis */}
|
|
<div className="bg-[#12121a] rounded-2xl border border-[#1e1e2e] p-6 mb-6">
|
|
<h2 className="text-lg font-semibold text-[#00d4ff] mb-3">Query Analysis</h2>
|
|
<p className="text-gray-300 mb-4">{discovery.decomposition.understanding}</p>
|
|
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{discovery.decomposition.technical_domains.map((domain, i) => (
|
|
<span
|
|
key={i}
|
|
className="px-3 py-1 bg-[#7c3aed]/20 text-[#7c3aed] rounded-full text-sm border border-[#7c3aed]/30"
|
|
>
|
|
{domain}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 text-center">
|
|
<StatCard label="Candidates" value={discovery.candidates.length} color="#00d4ff" />
|
|
<StatCard label="SBIR" value={discovery.source_stats.sbir || 0} color="#22c55e" />
|
|
<StatCard label="Patents" value={discovery.source_stats.patents || 0} color="#f59e0b" />
|
|
<StatCard label="Contracts" value={discovery.source_stats.contracts || 0} color="#7c3aed" />
|
|
<StatCard label="Web" value={discovery.source_stats.web || 0} color="#ef4444" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Results */}
|
|
<div className="flex gap-6">
|
|
{/* Candidate List */}
|
|
<div className="flex-1">
|
|
<h2 className="text-lg font-semibold mb-4">Technology Candidates ({discovery.candidates.length})</h2>
|
|
<div className="space-y-3">
|
|
{discovery.candidates.map((candidate, i) => (
|
|
<div
|
|
key={candidate.id}
|
|
onClick={() => setSelectedCandidate(candidate)}
|
|
className={`bg-[#12121a] rounded-xl border p-4 cursor-pointer transition-all ${
|
|
selectedCandidate?.id === candidate.id
|
|
? 'border-[#00d4ff] glow-accent'
|
|
: 'border-[#1e1e2e] hover:border-[#2e2e3e]'
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between mb-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-mono text-gray-500">#{i + 1}</span>
|
|
<span className={`text-xs px-2 py-0.5 rounded ${
|
|
candidate.source_type === 'sbir' ? 'bg-[#22c55e]/20 text-[#22c55e]' :
|
|
candidate.source_type === 'patent' ? 'bg-[#f59e0b]/20 text-[#f59e0b]' :
|
|
candidate.source_type === 'contract' ? 'bg-[#00d4ff]/20 text-[#00d4ff]' :
|
|
'bg-[#1e1e2e] text-gray-400'
|
|
}`}>
|
|
{candidate.source_type}
|
|
</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-sm font-semibold text-[#00d4ff]">
|
|
{(candidate.score * 100).toFixed(0)}%
|
|
</div>
|
|
{candidate.trl_estimate && (
|
|
<div className="text-xs text-gray-500">TRL {candidate.trl_estimate}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<h3 className="font-medium text-white mb-1">{candidate.title}</h3>
|
|
<p className="text-sm text-gray-500">{candidate.organization}</p>
|
|
{candidate.award_amount && (
|
|
<p className="text-xs text-[#22c55e] mt-1">${candidate.award_amount.toLocaleString()}</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Selected Candidate Detail */}
|
|
{selectedCandidate && (
|
|
<div className="w-96 bg-[#12121a] rounded-2xl border border-[#00d4ff] p-6 sticky top-8 h-fit glow-accent">
|
|
<h3 className="text-lg font-semibold text-white mb-4">{selectedCandidate.title}</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-xs text-gray-500">Organization</label>
|
|
<p className="text-white">{selectedCandidate.organization}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs text-gray-500">Description</label>
|
|
<p className="text-gray-300 text-sm">{selectedCandidate.description}</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-xs text-gray-500">Score</label>
|
|
<p className="text-[#00d4ff] font-semibold">{(selectedCandidate.score * 100).toFixed(1)}%</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-500">TRL</label>
|
|
<p className="text-white">{selectedCandidate.trl_estimate || 'Unknown'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-500">Source</label>
|
|
<p className="text-white capitalize">{selectedCandidate.source_type}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-500">Date</label>
|
|
<p className="text-white">{selectedCandidate.published_date || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedCandidate.award_amount && (
|
|
<div>
|
|
<label className="text-xs text-gray-500">Award Amount</label>
|
|
<p className="text-[#22c55e] font-semibold">${selectedCandidate.award_amount.toLocaleString()}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-2 pt-4">
|
|
<a
|
|
href={selectedCandidate.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex-1 py-2 bg-[#1e1e2e] text-center text-sm rounded-lg hover:bg-[#2e2e3e] transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<FiExternalLink /> View Source
|
|
</a>
|
|
<button
|
|
onClick={() => handleDeepDive(selectedCandidate)}
|
|
disabled={deepDiveLoading || selectedCandidate.organization === 'Unknown'}
|
|
title={selectedCandidate.organization === 'Unknown' ? 'Deep Dive requires a known organization' : 'Run deep dive analysis'}
|
|
className="flex-1 py-2 bg-gradient-to-r from-[#00d4ff] to-[#7c3aed] text-center text-sm rounded-lg font-semibold hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|
>
|
|
{deepDiveLoading ? (
|
|
<>
|
|
<FiLoader className="animate-spin" />
|
|
Analyzing...
|
|
</>
|
|
) : selectedCandidate.organization === 'Unknown' ? (
|
|
'No Organization'
|
|
) : (
|
|
'Deep Dive'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Deep Dive Modal */}
|
|
{deepDiveResult && (
|
|
<DeepDiveModal
|
|
result={deepDiveResult}
|
|
onClose={() => setDeepDiveResult(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
|
|
return (
|
|
<div className="bg-[#0a0a12] rounded-lg p-3">
|
|
<div className="text-2xl font-bold" style={{ color }}>{value}</div>
|
|
<div className="text-xs text-gray-500">{label}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DeepDiveModal({
|
|
result,
|
|
onClose
|
|
}: {
|
|
result: DeepDiveResult;
|
|
onClose: () => void;
|
|
}) {
|
|
return (
|
|
<div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-8">
|
|
<div className="bg-[#0a0a12] rounded-2xl border border-[#1e1e2e] max-w-4xl w-full max-h-[90vh] overflow-y-auto">
|
|
{/* Header */}
|
|
<div className="sticky top-0 bg-[#0a0a12] border-b border-[#1e1e2e] p-6 flex items-start justify-between">
|
|
<div>
|
|
<h2 className="text-2xl font-bold gradient-text">{result.organization}</h2>
|
|
<p className="text-gray-500 text-sm mt-1">Deep Dive Analysis</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-500 hover:text-white text-2xl"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-6">
|
|
{/* Recommendation Banner */}
|
|
<div className={`p-4 rounded-xl border ${
|
|
result.recommendation.includes('STRONGLY RECOMMEND') ? 'bg-[#22c55e]/10 border-[#22c55e]/30 text-[#22c55e]' :
|
|
result.recommendation.includes('RECOMMEND') ? 'bg-[#00d4ff]/10 border-[#00d4ff]/30 text-[#00d4ff]' :
|
|
result.recommendation.includes('CONSIDER') ? 'bg-[#f59e0b]/10 border-[#f59e0b]/30 text-[#f59e0b]' :
|
|
'bg-[#ef4444]/10 border-[#ef4444]/30 text-[#ef4444]'
|
|
}`}>
|
|
<div className="font-semibold text-lg">{result.recommendation}</div>
|
|
</div>
|
|
|
|
{/* Assessment */}
|
|
<Section title="Assessment">
|
|
<p className="text-gray-300 whitespace-pre-wrap">{result.assessment}</p>
|
|
</Section>
|
|
|
|
{/* Company Profile */}
|
|
<Section title="Company Profile">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<InfoItem label="Headquarters" value={result.company_profile.headquarters} />
|
|
<InfoItem label="Founded" value={result.company_profile.founded} />
|
|
<InfoItem label="Employees" value={result.company_profile.employee_count} />
|
|
<InfoItem label="Website" value={result.company_profile.website} isLink />
|
|
</div>
|
|
<p className="text-gray-400 mt-4 text-sm">{result.company_profile.description}</p>
|
|
{result.company_profile.leadership.length > 0 && (
|
|
<div className="mt-4">
|
|
<label className="text-xs text-gray-500">Leadership</label>
|
|
<div className="flex flex-wrap gap-2 mt-1">
|
|
{result.company_profile.leadership.map((leader, i) => (
|
|
<span key={i} className="px-3 py-1 bg-[#1e1e2e] rounded-full text-sm">
|
|
{leader.name} - {leader.title}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Section>
|
|
|
|
{/* Technology Profile */}
|
|
<Section title="Technology Profile">
|
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
|
<InfoItem label="TRL Assessment" value={`TRL ${result.technology_profile.trl_assessment}`} />
|
|
<InfoItem label="Technology" value={result.technology_profile.name} />
|
|
</div>
|
|
<div className="mb-4">
|
|
<label className="text-xs text-gray-500">Technical Approach</label>
|
|
<p className="text-gray-300 text-sm mt-1">{result.technology_profile.technical_approach}</p>
|
|
</div>
|
|
<div className="mb-4">
|
|
<label className="text-xs text-gray-500">Competitive Advantage</label>
|
|
<p className="text-gray-300 text-sm mt-1">{result.technology_profile.competitive_advantage}</p>
|
|
</div>
|
|
{result.technology_profile.key_capabilities.length > 0 && (
|
|
<div className="mb-4">
|
|
<label className="text-xs text-gray-500">Key Capabilities</label>
|
|
<ul className="list-disc list-inside text-gray-300 text-sm mt-1">
|
|
{result.technology_profile.key_capabilities.map((cap, i) => (
|
|
<li key={i}>{cap}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
{result.technology_profile.limitations.length > 0 && (
|
|
<div>
|
|
<label className="text-xs text-gray-500">Limitations</label>
|
|
<ul className="list-disc list-inside text-gray-400 text-sm mt-1">
|
|
{result.technology_profile.limitations.map((lim, i) => (
|
|
<li key={i}>{lim}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</Section>
|
|
|
|
{/* Contract History */}
|
|
<Section title="Contract History">
|
|
<div className="grid grid-cols-3 gap-4 mb-4">
|
|
<div className="bg-[#1e1e2e] rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-[#00d4ff]">{result.contract_history.total_contracts}</div>
|
|
<div className="text-xs text-gray-500">Total Contracts</div>
|
|
</div>
|
|
<div className="bg-[#1e1e2e] rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-[#22c55e]">
|
|
${(result.contract_history.total_value / 1000000).toFixed(1)}M
|
|
</div>
|
|
<div className="text-xs text-gray-500">Total Value</div>
|
|
</div>
|
|
<div className="bg-[#1e1e2e] rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-[#f59e0b]">{result.contract_history.sbir_awards.length}</div>
|
|
<div className="text-xs text-gray-500">SBIR Awards</div>
|
|
</div>
|
|
</div>
|
|
{result.contract_history.primary_agencies.length > 0 && (
|
|
<div className="mb-4">
|
|
<label className="text-xs text-gray-500">Primary Agencies</label>
|
|
<div className="flex flex-wrap gap-2 mt-1">
|
|
{result.contract_history.primary_agencies.map((agency, i) => (
|
|
<span key={i} className="px-3 py-1 bg-[#7c3aed]/20 text-[#7c3aed] rounded-full text-sm">
|
|
{agency}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Section>
|
|
|
|
{/* Risk Factors */}
|
|
{result.risk_factors.length > 0 && (
|
|
<Section title="Risk Factors">
|
|
<ul className="space-y-2">
|
|
{result.risk_factors.map((risk, i) => (
|
|
<li key={i} className="flex items-start gap-2 text-[#f59e0b]">
|
|
<span className="text-[#f59e0b]">!</span>
|
|
<span className="text-gray-300">{risk}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Section>
|
|
)}
|
|
|
|
{/* News Mentions */}
|
|
{result.news_mentions.length > 0 && (
|
|
<Section title="Recent News">
|
|
<div className="space-y-3">
|
|
{result.news_mentions.slice(0, 5).map((news, i) => (
|
|
<a
|
|
key={i}
|
|
href={news.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block p-3 bg-[#1e1e2e] rounded-lg hover:bg-[#2e2e3e] transition-colors"
|
|
>
|
|
<div className="font-medium text-white text-sm">{news.title}</div>
|
|
<div className="text-gray-500 text-xs mt-1">{news.date}</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="bg-[#12121a] rounded-xl border border-[#1e1e2e] p-5">
|
|
<h3 className="text-lg font-semibold text-[#00d4ff] mb-4">{title}</h3>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InfoItem({ label, value, isLink }: { label: string; value: unknown; isLink?: boolean }) {
|
|
if (!value) return null;
|
|
|
|
// Convert value to string, handling objects
|
|
let displayValue: string;
|
|
if (typeof value === 'object' && value !== null) {
|
|
const obj = value as Record<string, unknown>;
|
|
// Handle common object shapes like {location: "..."}
|
|
if (obj.location) {
|
|
displayValue = String(obj.location);
|
|
} else if (obj.name) {
|
|
displayValue = String(obj.name);
|
|
} else if (obj.value) {
|
|
displayValue = String(obj.value);
|
|
} else {
|
|
// Fallback to JSON for unknown object shapes
|
|
displayValue = JSON.stringify(value);
|
|
}
|
|
} else {
|
|
displayValue = String(value);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<label className="text-xs text-gray-500">{label}</label>
|
|
{isLink ? (
|
|
<a href={displayValue} target="_blank" rel="noopener noreferrer" className="block text-[#00d4ff] hover:underline text-sm">
|
|
{displayValue}
|
|
</a>
|
|
) : (
|
|
<p className="text-white text-sm">{displayValue}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|