99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { FiClock, FiTarget, FiTrendingUp } from 'react-icons/fi';
|
|
import type { DiscoverySummary } from '../types';
|
|
|
|
export default function DiscoveriesPage() {
|
|
const [discoveries, setDiscoveries] = useState<DiscoverySummary[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/discoveries')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
setDiscoveries(data.discoveries || []);
|
|
setLoading(false);
|
|
})
|
|
.catch(err => {
|
|
console.error('Failed to load discoveries:', err);
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500">Loading discoveries...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold mb-2">
|
|
<span className="gradient-text">Discovery History</span>
|
|
</h1>
|
|
<p className="text-gray-400">
|
|
Previous technology scouting searches
|
|
</p>
|
|
</div>
|
|
|
|
{discoveries.length === 0 ? (
|
|
<div className="bg-[#12121a] rounded-2xl border border-[#1e1e2e] p-12 text-center">
|
|
<FiTarget className="mx-auto text-4xl text-gray-600 mb-4" />
|
|
<p className="text-gray-500 mb-4">No discoveries yet</p>
|
|
<Link
|
|
href="/"
|
|
className="inline-block px-6 py-3 bg-gradient-to-r from-[#00d4ff] to-[#7c3aed] rounded-lg font-semibold hover:opacity-90 transition-opacity"
|
|
>
|
|
Start Your First Search
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{discoveries.map(discovery => (
|
|
<Link
|
|
key={discovery.id}
|
|
href={`/discoveries/${discovery.id}`}
|
|
className="block bg-[#12121a] rounded-xl border border-[#1e1e2e] p-6 hover:border-[#00d4ff]/50 transition-all group"
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<FiClock />
|
|
{new Date(discovery.timestamp).toLocaleString()}
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="text-right">
|
|
<div className="text-sm text-gray-500">Candidates</div>
|
|
<div className="text-lg font-semibold text-[#00d4ff]">
|
|
{discovery.candidate_count}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-sm text-gray-500">Top Score</div>
|
|
<div className="text-lg font-semibold text-[#22c55e]">
|
|
{(discovery.top_score * 100).toFixed(0)}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-lg font-medium text-white group-hover:text-[#00d4ff] transition-colors">
|
|
{discovery.capability_gap}
|
|
</h2>
|
|
|
|
<div className="mt-4 flex items-center gap-2 text-sm text-gray-500 group-hover:text-[#00d4ff] transition-colors">
|
|
<FiTrendingUp />
|
|
View Results
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|