kai/invoice-master-poc-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update paddle, and support invoice line item

Browse Source
This commit is contained in:
Yaojia Wang
2026-02-03 21:28:06 +01:00
parent c4e3773df1
commit 35988b1ebf
41 changed files with 6832 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
frontend/src/components/LineItemsTable.tsx Normal file
View File

@@ -0,0 +1,128 @@
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>
)
}