File size: 3,730 Bytes
ab13a8a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 'use client';
import React from 'react';
import { ChevronRight, ArrowUpRight, ShieldCheck, AlertTriangle, Target } from 'lucide-react';
export default function CandidateTable({ evaluations, onViewDetail }) {
if (!evaluations || evaluations.length === 0) return null;
return (
<div className="overflow-x-auto">
<table className="w-full text-left border-separate border-spacing-y-3">
<thead>
<tr className="text-slate-500 text-sm font-medium">
<th className="px-4 pb-2">Rank</th>
<th className="px-4 pb-2">Candidate</th>
<th className="px-4 pb-2">Score</th>
<th className="px-4 pb-2">Decision</th>
<th className="px-4 pb-2">Confidence</th>
<th className="px-4 pb-2 text-right">Action</th>
</tr>
</thead>
<tbody>
{evaluations.map((evalItem, index) => (
<tr
key={evalItem.candidate_id}
className="glass-card hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-all group cursor-pointer"
onClick={() => onViewDetail(evalItem)}
>
<td className="px-4 py-4 rounded-l-xl">
<span className={`flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold ${
index === 0 ? 'bg-amber-100 text-amber-600' :
index === 1 ? 'bg-slate-100 text-slate-600' :
index === 2 ? 'bg-orange-100 text-orange-600' : 'bg-slate-50 text-slate-400'
}`}>
{index + 1}
</span>
</td>
<td className="px-4 py-4">
<div>
<div className="font-semibold text-slate-900 dark:text-white">{evalItem.name}</div>
<div className="text-xs text-slate-500 truncate max-w-[150px]">{evalItem.candidate_id}</div>
</div>
</td>
<td className="px-4 py-4">
<div className="flex items-center gap-2">
<div className="w-16 h-2 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
<div
className="h-full bg-indigo-500 transition-all duration-1000"
style={{ width: `${evalItem.final_score}%` }}
/>
</div>
<span className="text-sm font-bold text-indigo-600">{Math.round(evalItem.final_score)}</span>
</div>
</td>
<td className="px-4 py-4">
<span className={`px-2 py-1 rounded-md text-[10px] uppercase font-bold tracking-wider ${
evalItem.decision === 'Strong Hire' ? 'bg-emerald-100 text-emerald-700' :
evalItem.decision === 'Hire' ? 'bg-blue-100 text-blue-700' :
evalItem.decision === 'Reject' ? 'bg-rose-100 text-rose-700' : 'bg-slate-100 text-slate-700'
}`}>
{evalItem.decision}
</span>
</td>
<td className="px-4 py-4">
<div className="flex items-center gap-1.6 text-sm">
<Target className="w-4 h-4 text-slate-400" />
<span>{evalItem.confidence}%</span>
</div>
</td>
<td className="px-4 py-4 text-right rounded-r-xl">
<button className="p-2 hover:bg-white dark:hover:bg-slate-700 rounded-lg transition-colors">
<ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-indigo-600" />
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
|