b2bde6934e
TokenDayChart: CartesianGrid, height 280, DD/MM formatter, var(--color-primary). SprintTokenHistoryTable: 'use client' + useRouter click naar ?sprint=<id>. PbiTokenTable: 'use client' + useState/useMemo kostensort. index.ts barrel export toegevoegd. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { useRouter } from 'next/navigation'
|
|
import type { SprintTokenRow } from '@/lib/insights/token-history'
|
|
|
|
interface Props {
|
|
rows: SprintTokenRow[]
|
|
selectedSprintId: string
|
|
}
|
|
|
|
export function SprintTokenHistoryTable({ rows, selectedSprintId }: Props) {
|
|
const router = useRouter()
|
|
|
|
if (rows.length === 0) {
|
|
return <p className="text-muted-foreground text-sm">Geen sprint-data met token-registratie.</p>
|
|
}
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-border bg-muted text-muted-foreground text-xs uppercase tracking-wide">
|
|
<th className="py-2 pr-4 text-left font-medium">Sprint goal</th>
|
|
<th className="py-2 pr-4 text-right font-medium">Tokens</th>
|
|
<th className="py-2 pr-4 text-right font-medium">Kosten (USD)</th>
|
|
<th className="py-2 text-right font-medium">Aantal jobs</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map(r => {
|
|
const goal = r.sprintGoal.length > 40 ? r.sprintGoal.slice(0, 37) + '…' : r.sprintGoal
|
|
return (
|
|
<tr
|
|
key={r.sprintId}
|
|
className={`border-b border-border last:border-0 cursor-pointer hover:bg-muted/40 ${r.sprintId === selectedSprintId ? 'bg-muted/50' : ''}`}
|
|
onClick={() => router.push(`/insights/tokens?sprint=${r.sprintId}`)}
|
|
>
|
|
<td className="py-2 pr-4 text-foreground">{goal}</td>
|
|
<td className="py-2 pr-4 text-right tabular-nums">{r.totalTokens.toLocaleString()}</td>
|
|
<td className="py-2 pr-4 text-right tabular-nums">${r.totalCostUsd.toFixed(4)}</td>
|
|
<td className="py-2 text-right tabular-nums">{r.jobCount}</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|