Mattsson
e4488a900b
* feat: add user locale preference to user_preferences table
- Introduced a new column 'locale' in the user_preferences table to store per-user UI language preferences.
- Added a CHECK constraint to ensure only supported locales ('sv', 'en') are allowed.
- Triggered a schema reload notification for the changes.
chore: declare CSS module support in TypeScript
- Added a declaration for CSS modules in globals.d.ts to enable TypeScript support for importing CSS files.
* feat: add Swish as an invoice payment method in company settings
363 lines
13 KiB
TypeScript
363 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { AccountNumber } from '@/components/ui/account-number'
|
|
import { formatCurrency } from '@/lib/utils'
|
|
import type { Supplier } from '@/types'
|
|
|
|
interface ReviewLineItem {
|
|
description: string
|
|
amount: number
|
|
account_number: string
|
|
vat_rate: number
|
|
}
|
|
|
|
interface SupplierInvoiceReviewContentProps {
|
|
supplier: Supplier
|
|
invoiceNumber: string
|
|
invoiceDate: string
|
|
dueDate: string
|
|
deliveryDate?: string
|
|
currency: string
|
|
exchangeRate?: string
|
|
reverseCharge: boolean
|
|
paymentReference?: string
|
|
items: ReviewLineItem[]
|
|
subtotal: number
|
|
totalVat: number
|
|
total: number
|
|
}
|
|
|
|
function formatAmount(amount: number): string {
|
|
return amount.toLocaleString('sv-SE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
}
|
|
|
|
interface JournalPreviewLine {
|
|
account_number: string
|
|
description: string
|
|
debit: number
|
|
credit: number
|
|
}
|
|
|
|
function getOutputVatAccount(rate: number): string {
|
|
if (rate === 0.12) return '2624'
|
|
if (rate === 0.06) return '2634'
|
|
return '2614'
|
|
}
|
|
|
|
function buildJournalPreview(
|
|
items: ReviewLineItem[],
|
|
subtotal: number,
|
|
totalVat: number,
|
|
total: number,
|
|
reverseCharge: boolean,
|
|
supplierType: string | undefined,
|
|
// FX multiplier applied to every amount. 1 when the invoice is in SEK or
|
|
// when no rate is set. Matches what the backend writes — items go through
|
|
// resolveSekAmount(item.line_total, null, currency, exchange_rate), so the
|
|
// saved verifikation is always in SEK, never in invoice currency.
|
|
fxRate: number,
|
|
): JournalPreviewLine[] {
|
|
const lines: JournalPreviewLine[] = []
|
|
const toSek = (n: number) => Math.round(n * fxRate * 100) / 100
|
|
|
|
// Aggregate expense amounts by account number (in SEK)
|
|
const expenseByAccount = new Map<string, number>()
|
|
for (const item of items) {
|
|
const current = expenseByAccount.get(item.account_number) || 0
|
|
expenseByAccount.set(item.account_number, current + toSek(item.amount))
|
|
}
|
|
|
|
// Debit: Expense accounts
|
|
for (const [accountNumber, amount] of expenseByAccount) {
|
|
lines.push({
|
|
account_number: accountNumber,
|
|
description: accountNumber,
|
|
debit: amount,
|
|
credit: 0,
|
|
})
|
|
}
|
|
|
|
if (reverseCharge) {
|
|
// Reverse charge: fiktiv moms per VAT rate (matches engine groupVatByRate logic)
|
|
const isDomesticRC = supplierType === 'swedish_business'
|
|
const inputAccount = isDomesticRC ? '2647' : '2645'
|
|
|
|
const vatByRate = new Map<number, number>()
|
|
for (const item of items) {
|
|
if (item.vat_rate > 0) {
|
|
const current = vatByRate.get(item.vat_rate) || 0
|
|
vatByRate.set(item.vat_rate, current + toSek(item.amount))
|
|
}
|
|
}
|
|
|
|
for (const [rate, netAmount] of vatByRate) {
|
|
const fiktivVat = Math.round(netAmount * rate * 100) / 100
|
|
const outputAccount = getOutputVatAccount(rate)
|
|
lines.push({
|
|
account_number: inputAccount,
|
|
description: inputAccount,
|
|
debit: fiktivVat,
|
|
credit: 0,
|
|
})
|
|
lines.push({
|
|
account_number: outputAccount,
|
|
description: outputAccount,
|
|
debit: 0,
|
|
credit: fiktivVat,
|
|
})
|
|
}
|
|
|
|
// Credit: 2440 at subtotal (no real VAT for reverse charge)
|
|
lines.push({
|
|
account_number: '2440',
|
|
description: 'Leverantörsskulder',
|
|
debit: 0,
|
|
credit: toSek(subtotal),
|
|
})
|
|
} else {
|
|
if (totalVat > 0) {
|
|
lines.push({
|
|
account_number: '2641',
|
|
description: 'Ingående moms',
|
|
debit: toSek(totalVat),
|
|
credit: 0,
|
|
})
|
|
}
|
|
// Credit: 2440 at total incl. VAT
|
|
lines.push({
|
|
account_number: '2440',
|
|
description: 'Leverantörsskulder',
|
|
debit: 0,
|
|
credit: toSek(total),
|
|
})
|
|
}
|
|
|
|
return lines
|
|
}
|
|
|
|
export function SupplierInvoiceReviewContent({
|
|
supplier,
|
|
invoiceNumber,
|
|
invoiceDate,
|
|
dueDate,
|
|
deliveryDate,
|
|
currency,
|
|
exchangeRate,
|
|
reverseCharge,
|
|
paymentReference,
|
|
items,
|
|
subtotal,
|
|
totalVat,
|
|
total,
|
|
}: SupplierInvoiceReviewContentProps) {
|
|
const t = useTranslations('supplier_invoice_editor')
|
|
const parsedRate = exchangeRate ? parseFloat(exchangeRate) : NaN
|
|
const fxRate = currency !== 'SEK' && Number.isFinite(parsedRate) && parsedRate > 0 ? parsedRate : 1
|
|
const journalLines = buildJournalPreview(items, subtotal, totalVat, total, reverseCharge, supplier.supplier_type, fxRate)
|
|
const totalDebit = journalLines.reduce((sum, l) => sum + l.debit, 0)
|
|
const totalCredit = journalLines.reduce((sum, l) => sum + l.credit, 0)
|
|
const showingSek = fxRate !== 1
|
|
|
|
const ACCOUNT_LABELS: Record<string, string> = {
|
|
'2440': t('account_2440'),
|
|
'2641': t('account_2641'),
|
|
'2645': t('account_2645'),
|
|
'2647': t('account_2647'),
|
|
'2614': t('account_2614'),
|
|
'2624': t('account_2624'),
|
|
'2634': t('account_2634'),
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Supplier info */}
|
|
<div className="bg-muted rounded-lg p-3 sm:p-4 flex flex-col sm:flex-row sm:items-center gap-2 sm:justify-between">
|
|
<div className="min-w-0">
|
|
<p className="font-medium text-base truncate">{supplier.name}</p>
|
|
<p className="text-sm text-muted-foreground">{t('review_invoice_number_label', { number: invoiceNumber })}</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5 sm:gap-2 shrink-0">
|
|
{reverseCharge && (
|
|
<Badge variant="outline" className="border-orange-300 text-orange-700 dark:text-orange-400">
|
|
{t('reverse_charge_badge')}
|
|
</Badge>
|
|
)}
|
|
{currency !== 'SEK' && (
|
|
<Badge variant="outline" className="text-sm">
|
|
{currency}
|
|
{exchangeRate && t('review_currency_rate_suffix', { rate: exchangeRate })}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dates */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4 text-sm">
|
|
<div>
|
|
<span className="text-muted-foreground">{t('invoice_date_label')}</span>
|
|
<p className="font-medium">{invoiceDate}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">{t('due_date_label')}</span>
|
|
<p className="font-medium">{dueDate}</p>
|
|
</div>
|
|
{deliveryDate && (
|
|
<div>
|
|
<span className="text-muted-foreground">{t('delivery_date_label')}</span>
|
|
<p className="font-medium">{deliveryDate}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Line items — table on desktop, cards on mobile */}
|
|
<div className="hidden sm:block">
|
|
<table className="w-full text-sm">
|
|
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
|
|
<tr className="border-b text-left">
|
|
<th className="py-2 w-20">{t('col_account')}</th>
|
|
<th className="py-2">{t('col_description')}</th>
|
|
<th className="py-2 w-28 text-right">{t('col_amount')}</th>
|
|
<th className="py-2 w-16 text-right">{t('col_vat_rate')}</th>
|
|
<th className="py-2 w-24 text-right">{t('col_vat')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((item, index) => {
|
|
const vatAmount = Math.round(item.amount * item.vat_rate * 100) / 100
|
|
return (
|
|
<tr key={index} className="border-b last:border-0">
|
|
<td className="py-2">
|
|
<AccountNumber number={item.account_number} size="sm" />
|
|
</td>
|
|
<td className="py-2">{item.description}</td>
|
|
<td className="py-2 text-right font-mono">{formatAmount(item.amount)}</td>
|
|
<td className="py-2 text-right">{Math.round(item.vat_rate * 100)}%</td>
|
|
<td className="py-2 text-right font-mono">{formatAmount(vatAmount)}</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="sm:hidden space-y-2">
|
|
{items.map((item, index) => {
|
|
const vatAmount = Math.round(item.amount * item.vat_rate * 100) / 100
|
|
return (
|
|
<div key={index} className="border rounded-lg p-3 text-sm space-y-1.5">
|
|
<div className="flex items-center justify-between">
|
|
<p className="font-medium">{item.description}</p>
|
|
<AccountNumber number={item.account_number} size="sm" />
|
|
</div>
|
|
<div className="flex items-center justify-between text-muted-foreground">
|
|
<span>{formatAmount(item.amount)} kr</span>
|
|
<span className="text-xs">{t('review_vat_inline', { rate: Math.round(item.vat_rate * 100), amount: formatAmount(vatAmount) })}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Totals */}
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">{t('net_excl_vat')}</span>
|
|
<span>{formatCurrency(subtotal, currency)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">{t('vat_label_short')}</span>
|
|
<span>{formatCurrency(totalVat, currency)}</span>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex justify-between font-bold text-xl sm:text-2xl">
|
|
<span>{t('total_label')}</span>
|
|
<span>{formatCurrency(total, currency)}</span>
|
|
</div>
|
|
{currency !== 'SEK' && exchangeRate && (
|
|
<div className="flex justify-between text-muted-foreground">
|
|
<span>{t('review_sek_amount_at_rate', { rate: exchangeRate })}</span>
|
|
<span>{formatCurrency(total * parseFloat(exchangeRate))}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Verifikation preview */}
|
|
<div className="bg-muted/50 border rounded-lg p-3 sm:p-4 space-y-2">
|
|
<p className="text-sm font-semibold text-muted-foreground">
|
|
{t('review_voucher_preview_title')}
|
|
{showingSek && (
|
|
<span className="ml-1.5 font-normal text-xs">{t('review_voucher_in_sek_suffix')}</span>
|
|
)}
|
|
</p>
|
|
<div className="hidden sm:block">
|
|
<table className="w-full text-sm font-mono">
|
|
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
|
|
<tr className="text-left">
|
|
<th className="pb-1 w-16">{t('col_account')}</th>
|
|
<th className="pb-1">{t('col_description')}</th>
|
|
<th className="pb-1 w-24 text-right">{t('col_debit')}</th>
|
|
<th className="pb-1 w-24 text-right">{t('col_credit')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{journalLines.map((line, index) => (
|
|
<tr key={index} className="border-b border-dashed border-muted-foreground/20 last:border-0">
|
|
<td className="py-1">
|
|
<AccountNumber number={line.account_number} size="sm" />
|
|
</td>
|
|
<td className="py-1 text-xs">
|
|
{ACCOUNT_LABELS[line.account_number] || line.description}
|
|
</td>
|
|
<td className="py-1 text-right">
|
|
{line.debit > 0 ? formatAmount(line.debit) : ''}
|
|
</td>
|
|
<td className="py-1 text-right">
|
|
{line.credit > 0 ? formatAmount(line.credit) : ''}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr className="border-t font-semibold">
|
|
<td className="pt-1" colSpan={2}>{t('sum_label')}</td>
|
|
<td className="pt-1 text-right">{formatAmount(totalDebit)}</td>
|
|
<td className="pt-1 text-right">{formatAmount(totalCredit)}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
<div className="sm:hidden space-y-1.5 text-sm">
|
|
{journalLines.map((line, index) => (
|
|
<div key={index} className="flex items-center justify-between py-1 border-b border-dashed border-muted-foreground/20 last:border-0">
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-1.5">
|
|
<AccountNumber number={line.account_number} size="sm" />
|
|
<span className="text-xs text-muted-foreground truncate">
|
|
{ACCOUNT_LABELS[line.account_number] || line.description}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span className="font-mono text-xs shrink-0 ml-2">
|
|
{line.debit > 0 ? t('debit_short', { amount: formatAmount(line.debit) }) : t('credit_short', { amount: formatAmount(line.credit) })}
|
|
</span>
|
|
</div>
|
|
))}
|
|
<div className="flex justify-between pt-1 border-t font-semibold text-xs font-mono">
|
|
<span>{t('sum_label')}</span>
|
|
<span>{t('debit_credit_short', { debit: formatAmount(totalDebit), credit: formatAmount(totalCredit) })}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Payment reference */}
|
|
{paymentReference && (
|
|
<div className="border-t pt-3 text-sm text-muted-foreground">
|
|
<p>{t('review_payment_reference_inline', { reference: paymentReference })}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|