Jakob WennbergandClaude Opus 4.6
ba94f60d06
Add modal review/confirmation dialogs before submitting invoices, supplier invoices, and journal entries. Since journal entries are legally immutable once posted, users now see a full summary with an amber warning before confirming. Add AccountNumber component with rich tooltips showing account name, class, type, and plain-language Swedish explanation for ~45 key BAS accounts across all report views. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
110 lines
3.4 KiB
TypeScript
110 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { AccountNumber } from '@/components/ui/account-number'
|
|
import { CheckCircle2 } from 'lucide-react'
|
|
|
|
interface ReviewLine {
|
|
account_number: string
|
|
debit_amount: string
|
|
credit_amount: string
|
|
line_description: string
|
|
}
|
|
|
|
interface JournalEntryReviewContentProps {
|
|
periodName: string
|
|
entryDate: string
|
|
description: string
|
|
lines: ReviewLine[]
|
|
totalDebit: number
|
|
totalCredit: number
|
|
}
|
|
|
|
function formatAmount(amount: number): string {
|
|
return amount.toLocaleString('sv-SE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
}
|
|
|
|
export function JournalEntryReviewContent({
|
|
periodName,
|
|
entryDate,
|
|
description,
|
|
lines,
|
|
totalDebit,
|
|
totalCredit,
|
|
}: JournalEntryReviewContentProps) {
|
|
const activeLines = lines.filter(
|
|
(l) => l.account_number && (l.debit_amount || l.credit_amount)
|
|
)
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Header info */}
|
|
<div className="bg-muted rounded-lg p-4 space-y-2">
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-muted-foreground">Räkenskapsår</span>
|
|
<p className="font-medium">{periodName}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Datum</span>
|
|
<p className="font-medium">{entryDate}</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-sm">
|
|
<span className="text-muted-foreground">Beskrivning</span>
|
|
<p className="font-medium">{description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Balance status */}
|
|
<div className="flex items-center gap-2">
|
|
<Badge className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
|
|
<CheckCircle2 className="h-3 w-3 mr-1" />
|
|
Debet = Kredit
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Debit/Credit table */}
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b text-left text-muted-foreground">
|
|
<th className="py-2 w-24">Konto</th>
|
|
<th className="py-2">Beskrivning</th>
|
|
<th className="py-2 w-28 text-right">Debet</th>
|
|
<th className="py-2 w-28 text-right">Kredit</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{activeLines.map((line, index) => (
|
|
<tr key={index} className="border-b last:border-0">
|
|
<td className="py-2">
|
|
<AccountNumber number={line.account_number} />
|
|
</td>
|
|
<td className="py-2 text-muted-foreground">
|
|
{line.line_description || ''}
|
|
</td>
|
|
<td className="py-2 text-right">
|
|
{parseFloat(line.debit_amount) > 0
|
|
? formatAmount(parseFloat(line.debit_amount))
|
|
: ''}
|
|
</td>
|
|
<td className="py-2 text-right">
|
|
{parseFloat(line.credit_amount) > 0
|
|
? formatAmount(parseFloat(line.credit_amount))
|
|
: ''}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr className="font-semibold border-t-2">
|
|
<td colSpan={2} className="py-2">Summa</td>
|
|
<td className="py-2 text-right text-green-600">{formatAmount(totalDebit)}</td>
|
|
<td className="py-2 text-right text-green-600">{formatAmount(totalCredit)}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|