Floke
bb117ccc43
Implementierung der UI-Anpassungen zur Anzeige von ausstehenden Fehlerberichten (rote Flagge in der Unternehmensliste, Anzeige im Inspector) und zur Ermöglichung weiterer Fehlerberichte. Backend-APIs wurden entsprechend erweitert.
208 lines
13 KiB
TypeScript
208 lines
13 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import axios from 'axios'
|
|
import {
|
|
Building, Search, Upload, Globe, MapPin, Play, Search as SearchIcon, Loader2,
|
|
LayoutGrid, List, ChevronLeft, ChevronRight, ArrowDownUp, Flag
|
|
} from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
|
|
interface Company {
|
|
id: number
|
|
name: string
|
|
city: string | null
|
|
country: string
|
|
website: string | null
|
|
status: string
|
|
industry_ai: string | null
|
|
created_at: string
|
|
updated_at: string
|
|
has_pending_mistakes: boolean
|
|
}
|
|
|
|
interface CompanyTableProps {
|
|
apiBase: string
|
|
onRowClick: (companyId: number) => void
|
|
refreshKey: number
|
|
onImportClick: () => void
|
|
}
|
|
|
|
export function CompanyTable({ apiBase, onRowClick, refreshKey, onImportClick }: CompanyTableProps) {
|
|
const [data, setData] = useState<Company[]>([])
|
|
const [total, setTotal] = useState(0)
|
|
const [page, setPage] = useState(0)
|
|
const [search, setSearch] = useState("")
|
|
const [sortBy, setSortBy] = useState('name_asc')
|
|
const [loading, setLoading] = useState(false)
|
|
const [processingId, setProcessingId] = useState<number | null>(null)
|
|
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
|
|
const limit = 50
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const res = await axios.get(`${apiBase}/companies?skip=${page * limit}&limit=${limit}&search=${search}&sort_by=${sortBy}`)
|
|
setData(res.data.items)
|
|
setTotal(res.data.total)
|
|
} catch (e) {
|
|
console.error("Failed to fetch companies", e)
|
|
}
|
|
finally { setLoading(false) }
|
|
}
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(fetchData, 300)
|
|
return () => clearTimeout(timer)
|
|
}, [page, search, refreshKey, sortBy])
|
|
|
|
const triggerDiscovery = async (id: number) => {
|
|
setProcessingId(id);
|
|
try {
|
|
await axios.post(`${apiBase}/enrich/discover`, { company_id: id });
|
|
setTimeout(fetchData, 2000);
|
|
} catch (e) { alert("Discovery Error"); }
|
|
finally { setProcessingId(null); }
|
|
}
|
|
|
|
const triggerAnalysis = async (id: number) => {
|
|
setProcessingId(id);
|
|
try {
|
|
await axios.post(`${apiBase}/enrich/analyze`, { company_id: id });
|
|
setTimeout(fetchData, 2000);
|
|
} catch (e) { alert("Analysis Error"); }
|
|
finally { setProcessingId(null); }
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-white dark:bg-slate-900 transition-colors">
|
|
{/* Toolbar */}
|
|
<div className="flex flex-col md:flex-row gap-4 p-4 border-b border-slate-200 dark:border-slate-800 items-center justify-between bg-slate-50 dark:bg-slate-950/50">
|
|
<div className="flex items-center gap-2 text-slate-700 dark:text-slate-300 font-bold text-lg">
|
|
<Building className="h-5 w-5" />
|
|
<h2>Companies ({total})</h2>
|
|
</div>
|
|
|
|
<div className="flex flex-1 w-full md:w-auto items-center gap-2 max-w-2xl">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
|
|
<input type="text" placeholder="Search companies..."
|
|
className="w-full pl-10 pr-4 py-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md text-sm text-slate-900 dark:text-slate-200 focus:ring-2 focus:ring-blue-500 outline-none"
|
|
value={search} onChange={e => { setSearch(e.target.value); setPage(0); }}/>
|
|
</div>
|
|
<div className="relative flex items-center text-slate-700 dark:text-slate-300">
|
|
<ArrowDownUp className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 pointer-events-none" />
|
|
<select value={sortBy} onChange={e => setSortBy(e.target.value)}
|
|
className="pl-8 pr-4 py-2 appearance-none bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
|
<option value="name_asc">Alphabetical</option>
|
|
<option value="created_desc">Newest First</option>
|
|
<option value="updated_desc">Last Modified</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex items-center bg-slate-200 dark:bg-slate-800 p-1 rounded-md text-slate-700 dark:text-slate-300">
|
|
<button onClick={() => setViewMode('grid')} className={clsx("p-1.5 rounded", viewMode === 'grid' && "bg-white dark:bg-slate-700 shadow text-blue-600 dark:text-white")} title="Grid View"><LayoutGrid className="h-4 w-4" /></button>
|
|
<button onClick={() => setViewMode('list')} className={clsx("p-1.5 rounded", viewMode === 'list' && "bg-white dark:bg-slate-700 shadow text-blue-600 dark:text-white")} title="List View"><List className="h-4 w-4" /></button>
|
|
</div>
|
|
<button onClick={onImportClick} className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-bold rounded-md shadow-sm">
|
|
<Upload className="h-4 w-4" /> <span className="hidden md:inline">Import</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Area */}
|
|
<div className="flex-1 overflow-auto bg-slate-50 dark:bg-slate-950/30">
|
|
{loading && <div className="p-4 text-center text-slate-500">Loading companies...</div>}
|
|
|
|
{data.length === 0 && !loading ? (
|
|
<div className="p-12 text-center text-slate-500">
|
|
<Building className="h-12 w-12 mx-auto mb-4 opacity-20" />
|
|
<p className="text-lg font-medium">No companies found</p>
|
|
<p className="text-slate-400 mt-2">Import a list or create one manually to get started.</p>
|
|
</div>
|
|
) : viewMode === 'grid' ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4">
|
|
{data.map((c) => (
|
|
<div key={c.id} onClick={() => onRowClick(c.id)}
|
|
className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg p-4 hover:shadow-lg transition-all flex flex-col gap-3 group cursor-pointer border-l-4"
|
|
style={{ borderLeftColor: c.status === 'ENRICHED' ? '#22c55e' : c.status === 'DISCOVERED' ? '#3b82f6' : '#94a3b8' }}>
|
|
<div className="flex items-start justify-between">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<Flag className={clsx("h-3 w-3 text-slate-300 dark:text-slate-600", c.has_pending_mistakes && "text-red-500 fill-red-500")} />
|
|
<div className="font-bold text-slate-900 dark:text-white text-sm truncate" title={c.name}>{c.name}</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-[10px] text-slate-500 dark:text-slate-400 font-medium">
|
|
{c.city && c.country ? (<><MapPin className="h-3 w-3" /> {c.city} <span className="text-slate-400">({c.country})</span></>) : (<span className="italic opacity-50">-</span>)}
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-1 ml-2">
|
|
{processingId === c.id ? <Loader2 className="h-4 w-4 animate-spin text-blue-500" /> : c.status === 'NEW' || !c.website || c.website === 'k.A.' ? (
|
|
<button onClick={(e) => { e.stopPropagation(); triggerDiscovery(c.id); }} className="p-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded hover:bg-blue-600 hover:text-white transition-colors"><SearchIcon className="h-3.5 w-3.5" /></button>
|
|
) : (
|
|
<button onClick={(e) => { e.stopPropagation(); triggerAnalysis(c.id); }} className="p-1.5 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded hover:bg-blue-600 hover:text-white transition-colors"><Play className="h-3.5 w-3.5 fill-current" /></button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2 pt-2 border-t border-slate-100 dark:border-slate-800/50">
|
|
{c.website && c.website !== "k.A." ? (
|
|
<div className="flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400 font-medium truncate">
|
|
<Globe className="h-3 w-3" />
|
|
<span>{new URL(c.website).hostname.replace('www.', '')}</span>
|
|
</div>
|
|
) : (<div className="text-xs text-slate-400 italic">No website found</div>)}
|
|
<div className="text-[10px] text-slate-500 uppercase font-bold tracking-wider truncate">{c.industry_ai || "Industry Pending"}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<table className="min-w-full divide-y divide-slate-200 dark:divide-slate-800">
|
|
<thead className="bg-slate-100 dark:bg-slate-950/50">
|
|
<tr>
|
|
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900 dark:text-white">Company</th>
|
|
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900 dark:text-white">Location</th>
|
|
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900 dark:text-white">Website</th>
|
|
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900 dark:text-white">AI Industry</th>
|
|
<th scope="col" className="relative px-3 py-3.5"><span className="sr-only">Actions</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200 dark:divide-slate-800 bg-white dark:bg-slate-900">
|
|
{data.map((c) => (
|
|
<tr key={c.id} onClick={() => onRowClick(c.id)} className="hover:bg-slate-50 dark:hover:bg-slate-800/50 cursor-pointer">
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm font-medium text-slate-900 dark:text-white">
|
|
<div className="flex items-center gap-2">
|
|
<Flag className={clsx("h-3 w-3 text-slate-300 dark:text-slate-600", c.has_pending_mistakes && "text-red-500 fill-red-500")} />
|
|
<span>{c.name}</span>
|
|
</div>
|
|
</td>
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500 dark:text-slate-400">
|
|
{c.city && c.country ? `${c.city}, (${c.country})` : '-'}
|
|
</td>
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-blue-600 dark:text-blue-400">
|
|
{c.website && c.website !== "k.A." ? <a href={c.website} target="_blank" rel="noreferrer">{new URL(c.website).hostname.replace('www.', '')}</a> : 'n/a'}
|
|
</td>
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500 dark:text-slate-400">{c.industry_ai || 'Pending'}</td>
|
|
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
|
|
{processingId === c.id ? <Loader2 className="h-4 w-4 animate-spin text-blue-500" /> : c.status === 'NEW' || !c.website || c.website === 'k.A.' ? (
|
|
<button onClick={(e) => { e.stopPropagation(); triggerDiscovery(c.id); }} className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"><SearchIcon className="h-4 w-4" /></button>
|
|
) : (
|
|
<button onClick={(e) => { e.stopPropagation(); triggerAnalysis(c.id); }} className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"><Play className="h-4 w-4 fill-current" /></button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
<div className="p-3 border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 flex justify-between items-center text-xs text-slate-500 dark:text-slate-400">
|
|
<span>{total} Companies total</span>
|
|
<div className="flex gap-1 items-center">
|
|
<button disabled={page === 0} onClick={() => setPage(p => p - 1)} className="p-1 rounded hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-30"><ChevronLeft className="h-4 w-4" /></button>
|
|
<span>Page {page + 1}</span>
|
|
<button disabled={(page + 1) * limit >= total} onClick={() => setPage(p => p + 1)} className="p-1 rounded hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-30"><ChevronRight className="h-4 w-4" /></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |