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>
56 lines
2 KiB
TypeScript
56 lines
2 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useMemo } from 'react'
|
|
import type { PbiTokenRow } from '@/lib/insights/token-history'
|
|
|
|
interface Props {
|
|
rows: PbiTokenRow[]
|
|
}
|
|
|
|
export function PbiTokenTable({ rows }: Props) {
|
|
const [sortDesc, setSortDesc] = useState(true)
|
|
|
|
const sorted = useMemo(
|
|
() => [...rows].sort((a, b) => sortDesc ? b.totalCostUsd - a.totalCostUsd : a.totalCostUsd - b.totalCostUsd),
|
|
[rows, sortDesc],
|
|
)
|
|
|
|
if (rows.length === 0) {
|
|
return <p className="text-muted-foreground text-sm">Geen PBI-data voor deze sprint.</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">PBI-code</th>
|
|
<th className="py-2 pr-4 text-left font-medium">Titel</th>
|
|
<th className="py-2 pr-4 text-right font-medium">Tokens</th>
|
|
<th
|
|
className="py-2 text-right font-medium cursor-pointer select-none text-primary"
|
|
onClick={() => setSortDesc(d => !d)}
|
|
>
|
|
Kosten (USD) {sortDesc ? '▾' : '▴'}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sorted.map(r => {
|
|
const title = r.pbiTitle.length > 60 ? r.pbiTitle.slice(0, 57) + '…' : r.pbiTitle
|
|
return (
|
|
<tr key={r.pbiId} className="border-b border-border last:border-0">
|
|
<td className="py-2 pr-4 text-muted-foreground whitespace-nowrap">{r.pbiCode}</td>
|
|
<td className="py-2 pr-4 text-foreground">{title}</td>
|
|
<td className="py-2 pr-4 text-right tabular-nums">{r.totalTokens.toLocaleString()}</td>
|
|
<td className="py-2 text-right tabular-nums">
|
|
{r.totalCostUsd > 0 ? `$${r.totalCostUsd.toFixed(4)}` : '—'}
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|