Mattsson
ade4ad5971
* feat: add fiscal period backward chaining and entry date validation Support creating fiscal periods before the earliest existing period (backward chaining) for backfill scenarios, alongside the existing forward chaining. The engine now validates that entry dates fall within the selected fiscal period, with a Swedish error message. The journal entry form auto-selects the matching period and shows a warning with a CreatePeriodDialog when no period covers the entry date. * feat: support multi-bank-account for imports and reconciliation Plumb a configurable settlement account through the entire bank import pipeline — mapping engine, transaction entries, ingest, and reconciliation — so secondary bank accounts (e.g. 1931, 1932) work correctly instead of hardcoding 1930. Adds a get_unlinked_bank_lines RPC that generalizes the existing get_unlinked_1930_lines with a fallback for backwards compatibility. The bank file import UI now shows a bank account selector when multiple 19xx accounts exist. Also adds default_vat_code/sru_code to account creation and fixes uploadDocument argument order in enable-banking sync.
783 lines
28 KiB
TypeScript
783 lines
28 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect, useCallback } from 'react'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||
import { useToast } from '@/components/ui/use-toast'
|
||
import { Plus, Trash2, AlertTriangle, Loader2, Lock, CalendarPlus } from 'lucide-react'
|
||
import { useCanWrite } from '@/lib/hooks/use-can-write'
|
||
import { ConfirmationDialog } from '@/components/ui/confirmation-dialog'
|
||
import { JournalEntryReviewContent } from '@/components/bookkeeping/JournalEntryReviewContent'
|
||
import DocumentUploadZone from '@/components/bookkeeping/DocumentUploadZone'
|
||
import AccountCombobox from '@/components/bookkeeping/AccountCombobox'
|
||
import CreatePeriodDialog from '@/components/bookkeeping/CreatePeriodDialog'
|
||
import { getErrorMessage } from '@/lib/errors/get-error-message'
|
||
import { formatCurrency } from '@/lib/utils'
|
||
import { useUnsavedChanges } from '@/lib/hooks/use-unsaved-changes'
|
||
import type { UploadedFile } from '@/components/bookkeeping/DocumentUploadZone'
|
||
import type { CreateJournalEntryLineInput, FiscalPeriod, BASAccount, JournalEntrySourceType, Currency } from '@/types'
|
||
|
||
const CURRENCIES: { value: Currency; label: string }[] = [
|
||
{ value: 'SEK', label: 'SEK' },
|
||
{ value: 'EUR', label: 'EUR' },
|
||
{ value: 'USD', label: 'USD' },
|
||
{ value: 'GBP', label: 'GBP' },
|
||
{ value: 'NOK', label: 'NOK' },
|
||
{ value: 'DKK', label: 'DKK' },
|
||
]
|
||
|
||
export interface FormLine {
|
||
account_number: string
|
||
debit_amount: string
|
||
credit_amount: string
|
||
line_description: string
|
||
currency?: string
|
||
amount_in_currency?: number
|
||
exchange_rate?: number
|
||
}
|
||
|
||
interface Props {
|
||
onCreated?: () => void
|
||
onEntryCreated?: (entryId: string) => void
|
||
initialLines?: FormLine[]
|
||
initialDate?: string
|
||
initialDescription?: string
|
||
sourceType?: JournalEntrySourceType
|
||
sourceId?: string
|
||
submitUrl?: string
|
||
embedded?: boolean
|
||
}
|
||
|
||
const BLANK_LINE: FormLine = { account_number: '', debit_amount: '', credit_amount: '', line_description: '' }
|
||
|
||
export default function JournalEntryForm({
|
||
onCreated,
|
||
onEntryCreated,
|
||
initialLines,
|
||
initialDate,
|
||
initialDescription,
|
||
sourceType,
|
||
sourceId,
|
||
submitUrl,
|
||
embedded,
|
||
}: Props) {
|
||
const { canWrite } = useCanWrite()
|
||
const { toast } = useToast()
|
||
const [periods, setPeriods] = useState<FiscalPeriod[]>([])
|
||
const [selectedPeriod, setSelectedPeriod] = useState('')
|
||
const [entryDate, setEntryDate] = useState(initialDate ?? new Date().toISOString().split('T')[0])
|
||
const [description, setDescription] = useState(initialDescription ?? '')
|
||
const [lines, setLines] = useState<FormLine[]>(
|
||
initialLines ?? [{ ...BLANK_LINE }, { ...BLANK_LINE }]
|
||
)
|
||
const [voucherSeries, setVoucherSeries] = useState('A')
|
||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||
const [showReview, setShowReview] = useState(false)
|
||
const [showNoDocWarning, setShowNoDocWarning] = useState(false)
|
||
const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([])
|
||
const [accounts, setAccounts] = useState<BASAccount[]>([])
|
||
const [entryCurrency, setEntryCurrency] = useState<Currency>('SEK')
|
||
const [exchangeRate, setExchangeRate] = useState('')
|
||
const [isFetchingRate, setIsFetchingRate] = useState(false)
|
||
const [foreignAmount, setForeignAmount] = useState('')
|
||
const [periodMismatch, setPeriodMismatch] = useState<'no_period' | 'wrong_period' | null>(null)
|
||
const [showCreatePeriod, setShowCreatePeriod] = useState(false)
|
||
|
||
const isForeign = entryCurrency !== 'SEK'
|
||
|
||
const isUploading = uploadedFiles.some((f) => f.status === 'uploading')
|
||
|
||
const hasContent = description !== '' ||
|
||
lines.some(l => l.account_number !== '' || l.debit_amount !== '' || l.credit_amount !== '') ||
|
||
uploadedFiles.length > 0
|
||
useUnsavedChanges(hasContent)
|
||
|
||
async function fetchPeriods() {
|
||
const res = await fetch('/api/bookkeeping/fiscal-periods')
|
||
const { data } = await res.json()
|
||
const fetched: FiscalPeriod[] = data || []
|
||
setPeriods(fetched)
|
||
|
||
// Auto-select period matching the current entry date
|
||
const match = fetched.find(
|
||
(p) => entryDate >= p.period_start && entryDate <= p.period_end
|
||
)
|
||
if (match) {
|
||
setSelectedPeriod(match.id)
|
||
setPeriodMismatch(null)
|
||
} else if (fetched.length > 0) {
|
||
setSelectedPeriod(fetched[0].id)
|
||
setPeriodMismatch('no_period')
|
||
}
|
||
}
|
||
|
||
async function fetchAccounts() {
|
||
const res = await fetch('/api/bookkeeping/accounts')
|
||
const { data } = await res.json()
|
||
setAccounts(data || [])
|
||
}
|
||
|
||
useEffect(() => {
|
||
fetchPeriods()
|
||
fetchAccounts()
|
||
// Fetch default voucher series from company settings
|
||
if (!embedded) {
|
||
fetch('/api/settings').then(r => r.json()).then(({ data }) => {
|
||
if (data?.default_voucher_series) setVoucherSeries(data.default_voucher_series)
|
||
}).catch(() => {/* keep 'A' */})
|
||
}
|
||
}, [])
|
||
|
||
// Auto-select period when entry date changes
|
||
useEffect(() => {
|
||
if (periods.length === 0) return
|
||
const match = periods.find(
|
||
(p) => entryDate >= p.period_start && entryDate <= p.period_end
|
||
)
|
||
if (match) {
|
||
setSelectedPeriod(match.id)
|
||
setPeriodMismatch(null)
|
||
} else {
|
||
setPeriodMismatch('no_period')
|
||
}
|
||
}, [entryDate, periods])
|
||
|
||
// Fetch exchange rate from Riksbanken when currency changes
|
||
const fetchRate = useCallback(async (currency: Currency) => {
|
||
if (currency === 'SEK') return
|
||
setIsFetchingRate(true)
|
||
try {
|
||
const res = await fetch(`/api/currency/rate?currency=${currency}&date=${entryDate}`)
|
||
if (res.ok) {
|
||
const { data } = await res.json()
|
||
if (data?.rate) {
|
||
setExchangeRate(String(data.rate))
|
||
}
|
||
}
|
||
} catch {
|
||
// Non-critical — user can enter rate manually
|
||
} finally {
|
||
setIsFetchingRate(false)
|
||
}
|
||
}, [entryDate])
|
||
|
||
useEffect(() => {
|
||
if (entryCurrency !== 'SEK') {
|
||
fetchRate(entryCurrency)
|
||
}
|
||
}, [entryCurrency, fetchRate])
|
||
|
||
const addLine = () => {
|
||
setLines([...lines, { ...BLANK_LINE }])
|
||
}
|
||
|
||
const removeLine = (index: number) => {
|
||
if (lines.length <= 2) return
|
||
setLines(lines.filter((_, i) => i !== index))
|
||
}
|
||
|
||
const updateLine = (index: number, field: keyof FormLine, value: string) => {
|
||
const updated = [...lines]
|
||
updated[index] = { ...updated[index], [field]: value }
|
||
|
||
// If entering debit, clear credit and vice versa
|
||
if (field === 'debit_amount' && value) {
|
||
updated[index].credit_amount = ''
|
||
} else if (field === 'credit_amount' && value) {
|
||
updated[index].debit_amount = ''
|
||
}
|
||
|
||
// Auto-fill line description from account name when selecting an account
|
||
if (field === 'account_number' && value) {
|
||
const account = accounts.find((a) => a.account_number === value)
|
||
if (account) {
|
||
updated[index].line_description = account.account_name
|
||
}
|
||
|
||
// Auto-fill balancing amount when both amount fields are empty
|
||
if (!updated[index].debit_amount && !updated[index].credit_amount) {
|
||
const otherLines = updated.filter((_, i) => i !== index)
|
||
const otherDebit = otherLines.reduce((sum, l) => sum + (parseFloat(l.debit_amount) || 0), 0)
|
||
const otherCredit = otherLines.reduce((sum, l) => sum + (parseFloat(l.credit_amount) || 0), 0)
|
||
const diff = Math.round((otherCredit - otherDebit) * 100) / 100
|
||
if (diff > 0) {
|
||
updated[index].debit_amount = diff.toFixed(2)
|
||
} else if (diff < 0) {
|
||
updated[index].credit_amount = Math.abs(diff).toFixed(2)
|
||
}
|
||
}
|
||
}
|
||
|
||
setLines(updated)
|
||
}
|
||
|
||
const totalDebit = lines.reduce((sum, l) => sum + (parseFloat(l.debit_amount) || 0), 0)
|
||
const totalCredit = lines.reduce((sum, l) => sum + (parseFloat(l.credit_amount) || 0), 0)
|
||
const isBalanced = Math.round((totalDebit - totalCredit) * 100) === 0 && totalDebit > 0
|
||
|
||
const rate = parseFloat(exchangeRate) || 0
|
||
// If user has manually entered a foreign amount, use that; otherwise derive from SEK total
|
||
const parsedForeignInput = parseFloat(foreignAmount) || 0
|
||
const computedForeignAmount = isForeign && rate > 0
|
||
? (parsedForeignInput > 0
|
||
? parsedForeignInput
|
||
: (totalDebit > 0 ? Math.round(totalDebit / rate * 100) / 100 : 0))
|
||
: 0
|
||
// The expected SEK equivalent based on foreign amount × rate
|
||
const computedSekAmount = isForeign && rate > 0 && computedForeignAmount > 0
|
||
? Math.round(computedForeignAmount * rate * 100) / 100
|
||
: 0
|
||
|
||
const handleReview = () => {
|
||
if (!selectedPeriod || !description || !isBalanced || periodMismatch) return
|
||
const hasDocuments = uploadedFiles.some((f) => f.status === 'uploaded')
|
||
if (!embedded && !hasDocuments) {
|
||
setShowNoDocWarning(true)
|
||
return
|
||
}
|
||
setShowReview(true)
|
||
}
|
||
|
||
const handleConfirm = async () => {
|
||
setIsSubmitting(true)
|
||
|
||
let currencyMetaApplied = false
|
||
const entryLines: CreateJournalEntryLineInput[] = lines
|
||
.filter((l) => l.account_number && (l.debit_amount || l.credit_amount))
|
||
.map((l) => {
|
||
const base: CreateJournalEntryLineInput = {
|
||
account_number: l.account_number,
|
||
debit_amount: parseFloat(l.debit_amount) || 0,
|
||
credit_amount: parseFloat(l.credit_amount) || 0,
|
||
line_description: l.line_description || undefined,
|
||
}
|
||
|
||
// Attach currency metadata from pre-populated data (e.g. transaction flow)
|
||
if (l.currency) {
|
||
base.currency = l.currency
|
||
if (l.amount_in_currency != null) base.amount_in_currency = l.amount_in_currency
|
||
if (l.exchange_rate != null) base.exchange_rate = l.exchange_rate
|
||
}
|
||
// Attach currency metadata from the entry-level currency selector (manual flow)
|
||
// Applied to the first bank/cash account (class 19xx) only
|
||
else if (isForeign && rate > 0 && l.account_number.startsWith('19') && !currencyMetaApplied) {
|
||
base.currency = entryCurrency
|
||
base.amount_in_currency = computedForeignAmount
|
||
base.exchange_rate = rate
|
||
currencyMetaApplied = true
|
||
}
|
||
|
||
return base
|
||
})
|
||
|
||
const url = submitUrl ?? '/api/bookkeeping/journal-entries'
|
||
|
||
const res = await fetch(url, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
fiscal_period_id: selectedPeriod,
|
||
entry_date: entryDate,
|
||
description,
|
||
source_type: sourceType ?? 'manual',
|
||
source_id: sourceId,
|
||
voucher_series: voucherSeries || 'A',
|
||
lines: entryLines,
|
||
}),
|
||
})
|
||
|
||
const result = await res.json()
|
||
|
||
if (result.error) {
|
||
toast({
|
||
title: 'Kunde inte skapa verifikation',
|
||
description: getErrorMessage(result, { context: 'journal_entry', statusCode: res.status }),
|
||
variant: 'destructive',
|
||
})
|
||
} else {
|
||
// Link uploaded documents to the new journal entry (non-blocking)
|
||
const journalEntryId = result.data?.id ?? result.journal_entry_id
|
||
if (journalEntryId && uploadedFiles.length > 0) {
|
||
const filesToLink = uploadedFiles.filter((f) => f.status === 'uploaded' && f.id)
|
||
let linkFailCount = 0
|
||
for (const file of filesToLink) {
|
||
try {
|
||
await fetch(`/api/documents/${file.id}/link`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ journal_entry_id: journalEntryId }),
|
||
})
|
||
} catch {
|
||
linkFailCount++
|
||
}
|
||
}
|
||
if (linkFailCount > 0) {
|
||
toast({
|
||
title: 'Underlag kunde inte bifogas',
|
||
description: `${linkFailCount} fil(er) kunde inte länkas till verifikationen. Försök igen via bokföringssidan.`,
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
|
||
toast({
|
||
title: 'Verifikation skapad',
|
||
description: `Verifikation ${result.data?.voucher_series ?? ''}${result.data?.voucher_number ?? ''} har skapats.`,
|
||
})
|
||
setShowReview(false)
|
||
// Reset form
|
||
setDescription('')
|
||
setUploadedFiles([])
|
||
setLines([{ ...BLANK_LINE }, { ...BLANK_LINE }])
|
||
setEntryCurrency('SEK')
|
||
setExchangeRate('')
|
||
setForeignAmount('')
|
||
onCreated?.()
|
||
if (journalEntryId) {
|
||
onEntryCreated?.(journalEntryId)
|
||
}
|
||
}
|
||
|
||
setIsSubmitting(false)
|
||
}
|
||
|
||
const formContent = (
|
||
<div className="space-y-4">
|
||
<div className={`grid gap-4 grid-cols-1 ${
|
||
embedded && initialDate
|
||
? 'sm:grid-cols-2'
|
||
: embedded
|
||
? 'sm:grid-cols-3'
|
||
: 'sm:grid-cols-[1fr_auto_1fr_3.5rem]'
|
||
}`}>
|
||
<div>
|
||
<Label>Räkenskapsår</Label>
|
||
<Select value={selectedPeriod} onValueChange={setSelectedPeriod}>
|
||
<SelectTrigger className="mt-1">
|
||
<SelectValue placeholder="Välj period" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{periods.map((p) => (
|
||
<SelectItem key={p.id} value={p.id}>
|
||
{p.name}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
{!(embedded && initialDate) && (
|
||
<div>
|
||
<Label>Datum</Label>
|
||
<Input
|
||
type="date"
|
||
value={entryDate}
|
||
onChange={(e) => setEntryDate(e.target.value)}
|
||
/>
|
||
</div>
|
||
)}
|
||
<div>
|
||
<Label>Beskrivning</Label>
|
||
<Input
|
||
value={description}
|
||
onChange={(e) => setDescription(e.target.value)}
|
||
placeholder="Verifikationstext..."
|
||
/>
|
||
</div>
|
||
{!embedded && (
|
||
<div>
|
||
<Label>Serie</Label>
|
||
<Input
|
||
value={voucherSeries}
|
||
onChange={(e) => {
|
||
const v = e.target.value.toUpperCase().replace(/[^A-Z]/g, '').slice(0, 1)
|
||
setVoucherSeries(v || 'A')
|
||
}}
|
||
className="mt-1 text-center font-mono"
|
||
maxLength={1}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Period mismatch warning */}
|
||
{periodMismatch === 'no_period' && (
|
||
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/10 p-3">
|
||
<AlertTriangle className="h-5 w-5 text-warning-foreground mt-0.5 shrink-0" />
|
||
<div className="flex-1 text-sm text-warning-foreground">
|
||
<p className="font-medium">Inget räkenskapsår matchar datumet {entryDate}</p>
|
||
<p className="mt-0.5">Skapa ett räkenskapsår som täcker detta datum för att kunna bokföra.</p>
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setShowCreatePeriod(true)}
|
||
className="shrink-0"
|
||
>
|
||
<CalendarPlus className="h-3.5 w-3.5 mr-1.5" />
|
||
Skapa räkenskapsår
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Currency section */}
|
||
<div className="flex flex-wrap items-end gap-3">
|
||
<div className="w-24">
|
||
<Label className="text-xs text-muted-foreground">Valuta</Label>
|
||
<Select value={entryCurrency} onValueChange={(v) => {
|
||
setEntryCurrency(v as Currency)
|
||
if (v === 'SEK') {
|
||
setExchangeRate('')
|
||
setForeignAmount('')
|
||
}
|
||
}}>
|
||
<SelectTrigger className="mt-1 h-8">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{CURRENCIES.map((c) => (
|
||
<SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
{isForeign && (
|
||
<>
|
||
<div className="w-40">
|
||
<Label className="text-xs text-muted-foreground">
|
||
Omräkningskurs (1 {entryCurrency} = ? SEK)
|
||
</Label>
|
||
<div className="relative mt-1">
|
||
<Input
|
||
type="number"
|
||
value={exchangeRate}
|
||
onChange={(e) => setExchangeRate(e.target.value)}
|
||
placeholder="0,0000"
|
||
className="h-8 pr-8"
|
||
step="0.0001"
|
||
min="0"
|
||
/>
|
||
{isFetchingRate && (
|
||
<Loader2 className="absolute right-2 top-1.5 h-4 w-4 animate-spin text-muted-foreground" />
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="w-40">
|
||
<Label className="text-xs text-muted-foreground">
|
||
Belopp i {entryCurrency}
|
||
</Label>
|
||
<Input
|
||
type="number"
|
||
value={foreignAmount || (computedForeignAmount > 0 && !parsedForeignInput ? computedForeignAmount.toFixed(2) : '')}
|
||
onChange={(e) => setForeignAmount(e.target.value)}
|
||
placeholder="0,00"
|
||
className="mt-1 h-8"
|
||
step="0.01"
|
||
min="0"
|
||
/>
|
||
</div>
|
||
{rate > 0 && computedForeignAmount > 0 && (
|
||
<p className="text-xs text-muted-foreground pb-1">
|
||
{computedForeignAmount.toLocaleString('sv-SE', { minimumFractionDigits: 2 })} {entryCurrency} × {rate.toLocaleString('sv-SE', { minimumFractionDigits: 4 })} = {computedSekAmount.toLocaleString('sv-SE', { minimumFractionDigits: 2 })} SEK
|
||
</p>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Entry lines — mobile cards */}
|
||
<div className="sm:hidden space-y-3">
|
||
{lines.map((line, index) => (
|
||
<div key={index} className="rounded-lg border bg-card p-3 space-y-2">
|
||
<div className="flex items-start gap-2">
|
||
<div className="flex-1">
|
||
<AccountCombobox
|
||
value={line.account_number}
|
||
accounts={accounts}
|
||
onChange={(num) => updateLine(index, 'account_number', num)}
|
||
/>
|
||
</div>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => removeLine(index)}
|
||
disabled={lines.length <= 2}
|
||
className="h-8 w-8 p-0 min-h-[44px] min-w-[44px] shrink-0 -mr-1 -mt-1"
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
</Button>
|
||
</div>
|
||
<Input
|
||
value={line.line_description}
|
||
onChange={(e) => updateLine(index, 'line_description', e.target.value)}
|
||
placeholder="Radtext..."
|
||
/>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div className="space-y-1">
|
||
<Label className="text-xs text-muted-foreground">Debet</Label>
|
||
<Input
|
||
type="number"
|
||
value={line.debit_amount}
|
||
onChange={(e) => updateLine(index, 'debit_amount', e.target.value)}
|
||
placeholder="0,00"
|
||
className="text-right"
|
||
inputMode="decimal"
|
||
min="0"
|
||
step="0.01"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<Label className="text-xs text-muted-foreground">Kredit</Label>
|
||
<Input
|
||
type="number"
|
||
value={line.credit_amount}
|
||
onChange={(e) => updateLine(index, 'credit_amount', e.target.value)}
|
||
placeholder="0,00"
|
||
className="text-right"
|
||
inputMode="decimal"
|
||
min="0"
|
||
step="0.01"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{/* Mobile totals */}
|
||
<div className="flex justify-between items-center px-1 pt-2 font-semibold text-sm">
|
||
<span>Summa</span>
|
||
<div className="flex gap-4">
|
||
<span className={isBalanced ? 'text-success' : 'text-destructive'}>
|
||
D: {totalDebit.toLocaleString('sv-SE', { minimumFractionDigits: 2 })}
|
||
</span>
|
||
<span className={isBalanced ? 'text-success' : 'text-destructive'}>
|
||
K: {totalCredit.toLocaleString('sv-SE', { minimumFractionDigits: 2 })}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={addLine}
|
||
className="w-full"
|
||
>
|
||
<Plus className="h-3 w-3 mr-1" />
|
||
Lägg till rad
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Entry lines — desktop table */}
|
||
<div className="hidden sm:block">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b text-left text-muted-foreground">
|
||
<th className="py-2 w-28">Konto</th>
|
||
<th className="py-2 px-1">Beskrivning</th>
|
||
<th className="py-2 w-32 px-1 text-right">Debet</th>
|
||
<th className="py-2 w-32 px-1 text-right">Kredit</th>
|
||
<th className="py-2 w-10"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{lines.map((line, index) => (
|
||
<tr key={index} className="border-b">
|
||
<td className="py-1.5">
|
||
<AccountCombobox
|
||
value={line.account_number}
|
||
accounts={accounts}
|
||
onChange={(num) => updateLine(index, 'account_number', num)}
|
||
/>
|
||
</td>
|
||
<td className="py-1.5 px-1">
|
||
<Input
|
||
value={line.line_description}
|
||
onChange={(e) => updateLine(index, 'line_description', e.target.value)}
|
||
placeholder="Radtext..."
|
||
className="h-8"
|
||
/>
|
||
</td>
|
||
<td className="py-1.5 px-1">
|
||
<Input
|
||
type="number"
|
||
value={line.debit_amount}
|
||
onChange={(e) => updateLine(index, 'debit_amount', e.target.value)}
|
||
placeholder="0,00"
|
||
className="text-right h-8"
|
||
inputMode="decimal"
|
||
min="0"
|
||
step="0.01"
|
||
/>
|
||
</td>
|
||
<td className="py-1.5 px-1">
|
||
<Input
|
||
type="number"
|
||
value={line.credit_amount}
|
||
onChange={(e) => updateLine(index, 'credit_amount', e.target.value)}
|
||
placeholder="0,00"
|
||
className="text-right h-8"
|
||
inputMode="decimal"
|
||
min="0"
|
||
step="0.01"
|
||
/>
|
||
</td>
|
||
<td className="py-1.5">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => removeLine(index)}
|
||
disabled={lines.length <= 2}
|
||
className="h-8 w-8 p-0 min-h-[44px] min-w-[44px]"
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
</Button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
<tfoot>
|
||
<tr className="font-semibold">
|
||
<td colSpan={2} className="py-2 px-1">
|
||
Summa
|
||
</td>
|
||
<td
|
||
className={`py-2 px-1 text-right ${
|
||
isBalanced ? 'text-success' : 'text-destructive'
|
||
}`}
|
||
>
|
||
{totalDebit.toLocaleString('sv-SE', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td
|
||
className={`py-2 px-1 text-right ${
|
||
isBalanced ? 'text-success' : 'text-destructive'
|
||
}`}
|
||
>
|
||
{totalCredit.toLocaleString('sv-SE', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td></td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={addLine}
|
||
className="mt-2"
|
||
>
|
||
<Plus className="h-3 w-3 mr-1" />
|
||
Lägg till rad
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Document attachments */}
|
||
{!embedded && (
|
||
<div>
|
||
<Label className="mb-2 block">Underlag</Label>
|
||
<DocumentUploadZone
|
||
files={uploadedFiles}
|
||
onFilesChange={setUploadedFiles}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{!isBalanced && totalDebit > 0 && (
|
||
<p className="text-sm text-destructive">
|
||
Differens: {formatCurrency(Math.abs(totalDebit - totalCredit))}
|
||
</p>
|
||
)}
|
||
|
||
<div className="flex flex-col items-end gap-1">
|
||
<Button
|
||
onClick={handleReview}
|
||
disabled={!isBalanced || !description || !selectedPeriod || !!periodMismatch || isSubmitting || isUploading || !canWrite}
|
||
title={!canWrite ? 'Du har endast läsbehörighet i detta företag' : undefined}
|
||
>
|
||
{!canWrite && <Lock className="mr-2 h-4 w-4" />}
|
||
Granska & skapa
|
||
</Button>
|
||
{(!description || !selectedPeriod || isUploading || periodMismatch) && (
|
||
<div className="text-xs text-muted-foreground space-y-0.5 text-right">
|
||
{!description && <p>Ange en beskrivning</p>}
|
||
{!selectedPeriod && <p>Välj en räkenskapsperiod</p>}
|
||
{periodMismatch === 'no_period' && <p>Skapa ett räkenskapsår som matchar datumet</p>}
|
||
{isUploading && <p>Vänta tills filerna laddats upp</p>}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<ConfirmationDialog
|
||
open={showReview}
|
||
onOpenChange={setShowReview}
|
||
onConfirm={handleConfirm}
|
||
isSubmitting={isSubmitting}
|
||
title="Granska verifikation"
|
||
warningText={embedded ? '' : 'En verifikation skapas och kan inte ändras efteråt. Korrigeringar görs genom storno.'}
|
||
>
|
||
<JournalEntryReviewContent
|
||
periodName={periods.find((p) => p.id === selectedPeriod)?.name || ''}
|
||
entryDate={entryDate}
|
||
description={description}
|
||
voucherSeries={!embedded ? voucherSeries : undefined}
|
||
lines={lines}
|
||
totalDebit={totalDebit}
|
||
totalCredit={totalCredit}
|
||
attachmentCount={uploadedFiles.filter((f) => f.status === 'uploaded').length}
|
||
showBalanceBadge={!embedded}
|
||
hideDate={!!embedded}
|
||
/>
|
||
</ConfirmationDialog>
|
||
|
||
{/* Warning dialog when no documents attached */}
|
||
<ConfirmationDialog
|
||
open={showNoDocWarning}
|
||
onOpenChange={setShowNoDocWarning}
|
||
onConfirm={() => {
|
||
setShowNoDocWarning(false)
|
||
setShowReview(true)
|
||
}}
|
||
isSubmitting={false}
|
||
title="Underlag saknas"
|
||
warningText="Inget underlag har bifogats. Enligt bokföringslagen (BFL) krävs underlag för varje bokföringspost."
|
||
confirmLabel="Bokför utan underlag"
|
||
>
|
||
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/10 p-4">
|
||
<AlertTriangle className="h-5 w-5 text-warning-foreground mt-0.5 shrink-0" />
|
||
<div className="text-sm text-warning-foreground">
|
||
<p className="font-medium mb-1">Inget underlag bifogat</p>
|
||
<p>
|
||
Enligt bokföringslagen (BFL 5 kap. 6-7 §§) ska varje bokföringspost ha en verifikation som
|
||
underlag. Du kan bifoga underlag nu eller fortsätta utan.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</ConfirmationDialog>
|
||
|
||
<CreatePeriodDialog
|
||
open={showCreatePeriod}
|
||
onOpenChange={setShowCreatePeriod}
|
||
entryDate={entryDate}
|
||
periods={periods}
|
||
onCreated={fetchPeriods}
|
||
/>
|
||
</div>
|
||
)
|
||
|
||
if (embedded) {
|
||
return formContent
|
||
}
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Ny verifikation</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{formContent}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|