129 lines
5.1 KiB
TypeScript
129 lines
5.1 KiB
TypeScript
import React from 'react'
|
|
import { CheckCircle2, MinusCircle } from 'lucide-react'
|
|
import type { LineItemsResult } from '../api/types'
|
|
|
|
interface LineItemsTableProps {
|
|
lineItems: LineItemsResult
|
|
}
|
|
|
|
export const LineItemsTable: React.FC<LineItemsTableProps> = ({ lineItems }) => {
|
|
if (!lineItems.items || lineItems.items.length === 0) {
|
|
return (
|
|
<div className="text-center py-8 text-warm-text-muted">
|
|
No line items found in this document
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-warm-divider">
|
|
<th className="text-left py-3 px-4 font-semibold text-warm-text-muted text-xs uppercase tracking-wide">
|
|
#
|
|
</th>
|
|
<th className="text-left py-3 px-4 font-semibold text-warm-text-muted text-xs uppercase tracking-wide">
|
|
Description
|
|
</th>
|
|
<th className="text-right py-3 px-4 font-semibold text-warm-text-muted text-xs uppercase tracking-wide">
|
|
Qty
|
|
</th>
|
|
<th className="text-right py-3 px-4 font-semibold text-warm-text-muted text-xs uppercase tracking-wide">
|
|
Unit Price
|
|
</th>
|
|
<th className="text-right py-3 px-4 font-semibold text-warm-text-muted text-xs uppercase tracking-wide">
|
|
Amount
|
|
</th>
|
|
<th className="text-right py-3 px-4 font-semibold text-warm-text-muted text-xs uppercase tracking-wide">
|
|
VAT %
|
|
</th>
|
|
<th className="text-center py-3 px-4 font-semibold text-warm-text-muted text-xs uppercase tracking-wide">
|
|
Conf.
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{lineItems.items.map((item) => (
|
|
<tr
|
|
key={`row-${item.row_index}`}
|
|
className={`border-b border-warm-divider hover:bg-warm-hover/50 transition-colors ${
|
|
item.is_deduction ? 'bg-red-50' : ''
|
|
}`}
|
|
>
|
|
<td className="py-3 px-4 text-warm-text-muted font-mono text-xs">
|
|
{item.row_index}
|
|
</td>
|
|
<td className="py-3 px-4 font-medium max-w-xs truncate">
|
|
<div className="flex items-center gap-2">
|
|
{item.is_deduction && (
|
|
<MinusCircle size={14} className="text-red-500 flex-shrink-0" />
|
|
)}
|
|
<span className={item.is_deduction ? 'text-red-600' : 'text-warm-text-primary'}>
|
|
{item.description || '-'}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-3 px-4 text-right text-warm-text-primary font-mono">
|
|
{item.quantity || '-'}
|
|
{item.unit && (
|
|
<span className="text-warm-text-muted ml-1">{item.unit}</span>
|
|
)}
|
|
</td>
|
|
<td className="py-3 px-4 text-right text-warm-text-primary font-mono">
|
|
{item.unit_price || '-'}
|
|
</td>
|
|
<td className={`py-3 px-4 text-right font-bold font-mono ${
|
|
item.is_deduction ? 'text-red-600' : 'text-warm-text-primary'
|
|
}`}>
|
|
{item.amount || '-'}
|
|
</td>
|
|
<td className="py-3 px-4 text-right text-warm-text-secondary font-mono">
|
|
{item.vat_rate ? `${item.vat_rate}%` : '-'}
|
|
</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<div className="flex items-center justify-center gap-1">
|
|
<CheckCircle2
|
|
size={14}
|
|
className={
|
|
item.confidence >= 0.8
|
|
? 'text-green-500'
|
|
: item.confidence >= 0.5
|
|
? 'text-yellow-500'
|
|
: 'text-red-500'
|
|
}
|
|
/>
|
|
<span
|
|
className={`text-xs font-medium ${
|
|
item.confidence >= 0.8
|
|
? 'text-green-600'
|
|
: item.confidence >= 0.5
|
|
? 'text-yellow-600'
|
|
: 'text-red-600'
|
|
}`}
|
|
>
|
|
{(item.confidence * 100).toFixed(0)}%
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{lineItems.total_amount && (
|
|
<div className="flex justify-end pt-4 border-t border-warm-divider">
|
|
<div className="text-right">
|
|
<span className="text-sm text-warm-text-muted mr-4">Total:</span>
|
|
<span className="text-lg font-bold text-warm-text-primary font-mono">
|
|
{lineItems.total_amount} SEK
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|