Mattsson
0c854ac54f
* feat(settings): let a company name each verifikationsserie letter
The series pickers show a fixed preset label next to every letter (A
Redovisning ... M Momsrapport, Fortnox's layout). A byrå that lays its
series out differently sees a wrong or missing name in every dropdown: a
partner running löner on L saw "Kontantfaktura" in the verifikat form and
asked for the series name.
- company_settings.voucher_series_labels JSONB ({"L": "Lön"}), keys A-Z,
values 1 to 40 chars, CHECK on the JSON shape. Display only; the engine
never reads it.
- UpdateSettingsSchema validates the map, trims names and strips empty
values so a cleared field removes the name.
- voucherSeriesLabel(letter, labels) is the one place that decides what a
letter is called: company name, then preset, then empty.
buildVoucherSeriesOptions replaces the three near-identical option
builders in the verifikat form and the two settings pickers.
- The Verifikationsserier list in settings edits the names: rows are the
union of used, configured and named letters, one save button.
- The SIE import review's two series pickers show the name too.
Migration applied to staging (metjnjrhvujscngnpzdv) as 20260906131300.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBj3hzDUb8sgtxTvyAjFWC
* fix(settings): keep imported series in the list and unsaved names through a refetch
Skeptic pass on the series-name editor refuted two things:
- The rewritten list filtered voucher_sequences to single letters, dropping
multi-character series (FT, LB, SKV, ...) that 54 production companies
carry over from Fortnox and Bokio imports; the old list showed them with
their highest number. Rows are now every used series plus the configured
and named letters; only single-letter series get a name input, since
those are what the pickers offer and the schema accepts.
- The draft re-seeded on the identity of settings.voucher_series_labels,
and the settings hook revalidates on window focus with a fresh object, so
unsaved typing was wiped after any earlier save on the page. The re-seed
is now keyed on the serialized content of the saved names.
Also folds the "new series are created on first use" footnote back into
the group help, which the rewrite had dropped.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBj3hzDUb8sgtxTvyAjFWC
* fix(settings): name the default-series options and enforce the label shape in the database
Review pass on #2336:
- CodeRabbit: the Standardserie selector under Bokföring still rendered
bare letters; it now shows the same name the other pickers do, through
voucherSeriesLabel.
- Compliance swarm (SOC 2 PI1.1, low): the key and length rules for
voucher_series_labels lived only in UpdateSettingsSchema. Migration
20260906134700 adds voucher_series_labels_valid(jsonb) and swaps the
object-only CHECK for one that mirrors the Zod rules (keys A-Z, values
non-blank strings of at most 40 characters), so a write that bypasses
/api/settings cannot store a map the pickers cannot handle. Applied to
staging with its schema_migrations row; verified against good, empty,
lowercase, blank, over-long, numeric and array inputs.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBj3hzDUb8sgtxTvyAjFWC
* test(pg): cover the voucher_series_labels CHECK against real Postgres
The coverage gate refuses a migration that adds a function without a
*.pg.test.ts. voucher_series_labels_valid(jsonb) and the constraint that
wraps it now have one: accepts the empty map and single-letter keys with
names of 1 to 40 characters, rejects lowercase and multi-letter keys,
blank, over-long, numeric and null values, arrays and scalars, and leaves
the row untouched after a refused write.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBj3hzDUb8sgtxTvyAjFWC
---------
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
2280 lines
96 KiB
TypeScript
2280 lines
96 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import { useTranslations, useLocale } from 'next-intl'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Textarea } from '@/components/ui/textarea'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog'
|
||
import { useToast } from '@/components/ui/use-toast'
|
||
import { ToastAction } from '@/components/ui/toast'
|
||
import { Plus, Trash2, AlertTriangle, Loader2, Lock, CalendarPlus, Eraser, Tags, BookmarkPlus } from 'lucide-react'
|
||
import { Badge } from '@/components/ui/badge'
|
||
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 LineDimensionFields from '@/components/dimensions/LineDimensionFields'
|
||
import { loadBasCatalog, type CatalogAccount } from '@/lib/bookkeeping/bas-catalog-client'
|
||
import BookingTemplatePicker from '@/components/bookkeeping/BookingTemplatePicker'
|
||
import { deriveTemplateLinesFromBooking } from '@/lib/bookkeeping/template-library'
|
||
import { sourceTypeForTemplateCategory } from '@/lib/bookkeeping/template-source-type'
|
||
import { TemplateForm } from '@/components/settings/TemplateForm'
|
||
import CreatePeriodDialog from '@/components/bookkeeping/CreatePeriodDialog'
|
||
import { useAccounts, useCompanySettings, useFiscalPeriods } from '@/lib/reference-data/hooks'
|
||
import { invalidateReferenceData } from '@/lib/reference-data/invalidate'
|
||
import { ActivateAccountsDialog } from '@/components/bookkeeping/ActivateAccountsDialog'
|
||
import { AddAccountDialog } from '@/components/bookkeeping/AddAccountDialog'
|
||
import { splitCreateAccountPrefill } from '@/lib/bookkeeping/create-account-prefill'
|
||
import DuplicateBookingDialog, { type DuplicateMatchTransaction } from '@/components/transactions/DuplicateBookingDialog'
|
||
import { Skeleton } from '@/components/ui/skeleton'
|
||
import {
|
||
useSubmitWithAccountActivation,
|
||
throwOnStructuredError,
|
||
} from '@/lib/hooks/use-submit-with-account-activation'
|
||
import { getErrorMessage } from '@/lib/errors/get-error-message'
|
||
import {
|
||
linkDocuments,
|
||
formatFailedDocumentNames,
|
||
type DocumentLinkFailure,
|
||
} from '@/lib/documents/link-documents'
|
||
import { formatCurrency } from '@/lib/utils'
|
||
import { roundOre } from '@/lib/money'
|
||
import { buildVoucherSeriesOptions, formatVoucher, resolveDefaultSeriesForSource } from '@/lib/bookkeeping/voucher-series-resolver'
|
||
import { resolveFxLineSlot } from '@/lib/bookkeeping/fx-line-slot'
|
||
import { useUnsavedChanges } from '@/lib/hooks/use-unsaved-changes'
|
||
import { useCompany } from '@/contexts/CompanyContext'
|
||
import type { UploadedFile } from '@/components/bookkeeping/DocumentUploadZone'
|
||
import type { CreateJournalEntryLineInput, FiscalPeriod, JournalEntrySourceType, Currency, BookingTemplateLibrary, BookingTemplateCategory } from '@/types'
|
||
import type { BookedDuplicateCandidate } from '@/lib/transactions/booking-duplicate-detection'
|
||
|
||
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
|
||
/** Pass-through only (set via API/MCP, never edited in this form): edit
|
||
* mode replaces all lines, so dropping it would strip the stored code. */
|
||
tax_code?: string | null
|
||
/** SIE dimension map {sie_dim_no: object_code}, e.g. {"1":"KS01","6":"P001"}. */
|
||
dimensions?: Record<string, string>
|
||
}
|
||
|
||
interface Props {
|
||
onCreated?: () => void
|
||
onEntryCreated?: (entryId: string) => void
|
||
initialLines?: FormLine[]
|
||
initialDate?: string
|
||
initialDescription?: string
|
||
initialNotes?: string
|
||
initialVoucherSeries?: string
|
||
sourceType?: JournalEntrySourceType
|
||
sourceId?: string
|
||
submitUrl?: string
|
||
embedded?: boolean
|
||
/** Render without the Card chrome (e.g. inside a dialog) but keep the full
|
||
* non-embedded field set (series, notes, documents, voucher hint). */
|
||
bare?: boolean
|
||
/** Edit an existing DRAFT in place: the form PATCHes this entry instead of
|
||
* creating a new one. Only the draft's header + lines are updated. */
|
||
editEntryId?: string
|
||
/** Edit mode: hydrate the currency picker + FX fields from the stored draft
|
||
* so a foreign-currency draft is not displayed (and resaved) as SEK. */
|
||
initialCurrency?: Currency
|
||
initialExchangeRate?: number
|
||
initialForeignAmount?: number
|
||
/** Fired after a successful draft edit (editEntryId path). */
|
||
onUpdated?: () => void
|
||
/** The bank transaction being booked (set by TransactionBookingDialog).
|
||
* Enables the duplicate guard's "Matcha mot verifikatet" action for
|
||
* ledger-only voucher candidates. */
|
||
/**
|
||
* Extra keys for the submit body, for endpoints that need something this
|
||
* form does not model. The invoice-inbox book-direct route needs
|
||
* transaction_id to book the underlag against its bank line; without it the
|
||
* entry posts standalone and the match is cleared.
|
||
*/
|
||
extraBody?: Record<string, unknown>
|
||
duplicateMatchTransaction?: DuplicateMatchTransaction
|
||
/** Embedded variant only: show the series picker anyway. The series is
|
||
* seeded from the server (source type + cash account override) so the
|
||
* dialog and the booking route can never disagree. */
|
||
seriesPicker?: boolean
|
||
/** Bank account the entry is booked from; its voucher_series override
|
||
* (Inställningar → Bokföring) seeds the picker. */
|
||
cashAccountId?: string | null
|
||
/** Fired after the duplicate guard's match action links the transaction to
|
||
* the existing voucher (no new entry was created). */
|
||
onDuplicateMatched?: (journalEntryId: string) => void
|
||
}
|
||
|
||
const BLANK_LINE: FormLine = { account_number: '', debit_amount: '', credit_amount: '', line_description: '' }
|
||
|
||
export default function JournalEntryForm({
|
||
onCreated,
|
||
onEntryCreated,
|
||
initialLines,
|
||
initialDate,
|
||
initialDescription,
|
||
initialNotes,
|
||
initialVoucherSeries,
|
||
sourceType,
|
||
sourceId,
|
||
submitUrl,
|
||
embedded,
|
||
bare,
|
||
editEntryId,
|
||
initialCurrency,
|
||
initialExchangeRate,
|
||
initialForeignAmount,
|
||
onUpdated,
|
||
extraBody,
|
||
duplicateMatchTransaction,
|
||
seriesPicker,
|
||
cashAccountId,
|
||
onDuplicateMatched,
|
||
}: Props) {
|
||
const { canWrite } = useCanWrite()
|
||
const { toast } = useToast()
|
||
const router = useRouter()
|
||
const { company } = useCompany()
|
||
const t = useTranslations('journal_form')
|
||
// Reused only for the bilingual entity-type labels the shared TemplateForm
|
||
// expects (matches BookingTemplatesPanel); the form itself already pulls its
|
||
// copy from this namespace.
|
||
const tTpl = useTranslations('settings_booking_templates')
|
||
const locale = useLocale()
|
||
// Session-cached reference data (lib/reference-data): seeded by the
|
||
// dashboard layout, so the period select, the account picker and the
|
||
// settings-driven defaults render populated on the first paint instead of
|
||
// after four round trips, and re-opening the dialog costs no requests.
|
||
const { periods } = useFiscalPeriods()
|
||
const { settings: companySettings } = useCompanySettings()
|
||
const [selectedPeriod, setSelectedPeriod] = useState('')
|
||
const [entryDate, setEntryDate] = useState(initialDate ?? new Date().toISOString().split('T')[0])
|
||
const [description, setDescription] = useState(initialDescription ?? '')
|
||
const [notes, setNotes] = useState(initialNotes ?? '')
|
||
const [showNotes, setShowNotes] = useState(false)
|
||
// Dimension tagging (kostnadsställe/projekt). The affordances render only
|
||
// when company_settings.dimensions_enabled: a UI-visibility gate; lines
|
||
// that already carry dimensions (e.g. a draft being edited) still round-trip
|
||
// untouched when the toggle is off.
|
||
const dimensionsEnabled = companySettings?.dimensions_enabled === true
|
||
const [showDims, setShowDims] = useState(false)
|
||
// Header-level default dims ("gäller alla rader"). The per-row maps on
|
||
// `lines` are the ONE source of truth: this state only drives the header
|
||
// comboboxes; setHeaderDimension writes the default through to the rows.
|
||
const [headerDims, setHeaderDims] = useState<Record<string, string>>({})
|
||
// Which row's dimension popover is open (desktop table), and its container
|
||
// for the outside-click close.
|
||
const [dimPopoverRow, setDimPopoverRow] = useState<number | null>(null)
|
||
const dimPopoverRef = useRef<HTMLDivElement | null>(null)
|
||
const [lines, setLines] = useState<FormLine[]>(
|
||
initialLines ?? [{ ...BLANK_LINE }, { ...BLANK_LINE }]
|
||
)
|
||
const [voucherSeries, setVoucherSeries] = useState(initialVoucherSeries ?? 'A')
|
||
// Embedded forms show the picker only on request (bank transaction dialog).
|
||
const showSeries = !embedded || !!seriesPicker
|
||
// Whether voucherSeries is authoritative. The standalone form seeds it from
|
||
// company settings; the embedded picker asks the server once (source type +
|
||
// cash account override) and marks it resolved, or when the user picks. Until
|
||
// then the submit omits voucher_series so the route resolves it itself: an
|
||
// unresolved 'A' must never override the bank account's own series.
|
||
const [seriesResolved, setSeriesResolved] = useState(!embedded)
|
||
// The source_type the entry will be committed with. Seeded from the prop
|
||
// (undefined -> 'manual' for the standalone form). Applying a booking template
|
||
// whose category maps to a dedicated source type (e.g. VAT -> vat_settlement)
|
||
// flips this so the entry lands in that type's configured voucher series.
|
||
const [effectiveSourceType, setEffectiveSourceType] = useState<JournalEntrySourceType>(
|
||
sourceType ?? 'manual',
|
||
)
|
||
// Cache of the company's series config so template routing can re-resolve the
|
||
// default series without re-fetching /api/settings. Populated by the settings
|
||
// effect below.
|
||
const seriesMapRef = useRef<Record<string, string> | null>(null)
|
||
const defaultSeriesRef = useRef<string>('A')
|
||
// Series letters this company has configured beyond the fixed presets. The
|
||
// dropdown is a closed list, so anything already in use (a legacy letter, an
|
||
// override in the per-source-type map) has to stay selectable: otherwise the
|
||
// Select would render blank on a value it does not offer.
|
||
const [configuredSeries, setConfiguredSeries] = useState<string[]>([])
|
||
// Mirror of effectiveSourceType for the settings-fetch callback: if a template
|
||
// routed the source type before /api/settings resolved, the late callback must
|
||
// re-apply the series for the ROUTED type, not the mount-time base (otherwise
|
||
// the entry submits as vat_settlement in the manual series).
|
||
const effectiveSourceTypeRef = useRef<JournalEntrySourceType>(sourceType ?? 'manual')
|
||
const [nextVoucherNumber, setNextVoucherNumber] = useState<number | null>(null)
|
||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||
// Booking-time duplicate guard (TRANSACTION_BOOK_POSSIBLE_DUPLICATE): the
|
||
// /book endpoint flags an already-booked sibling sharing date+amount+account.
|
||
// Surface it and let the user book anyway. The override is bound to the
|
||
// reviewed candidate via a ref the next submit reads: force is sent ONLY on
|
||
// that retry, never on a normal submit or to the manual journal-entry endpoint.
|
||
const [duplicateCandidate, setDuplicateCandidate] = useState<BookedDuplicateCandidate | null>(null)
|
||
const forceDuplicateRef = useRef<{ force: true; expected_duplicate_journal_entry_id: string } | null>(null)
|
||
const [showReview, setShowReview] = useState(false)
|
||
const [isSavingDraft, setIsSavingDraft] = useState(false)
|
||
const saveAsDraftRef = useRef(false)
|
||
const [showNoDocWarning, setShowNoDocWarning] = useState(false)
|
||
// The what's-missing lines render only after a submit attempt (error-on-
|
||
// submit), never as standing chrome on an empty form. The buttons stay
|
||
// enabled so the attempt can happen; the handlers gate on validity.
|
||
const [showValidationHints, setShowValidationHints] = useState(false)
|
||
const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([])
|
||
const { accounts } = useAccounts()
|
||
// Full BAS catalogue (static reference data, fetched once per session). Lets
|
||
// the account picker surface standard accounts the company hasn't activated
|
||
// yet; picking one activates it at commit via the existing rail.
|
||
const [catalog, setCatalog] = useState<CatalogAccount[]>([])
|
||
const [entryCurrency, setEntryCurrency] = useState<Currency>(initialCurrency ?? 'SEK')
|
||
const [exchangeRate, setExchangeRate] = useState(initialExchangeRate != null ? String(initialExchangeRate) : '')
|
||
const [isFetchingRate, setIsFetchingRate] = useState(false)
|
||
const [foreignAmount, setForeignAmount] = useState(initialForeignAmount != null ? String(initialForeignAmount) : '')
|
||
const [periodMismatch, setPeriodMismatch] = useState<'no_period' | 'wrong_period' | null>(null)
|
||
const [showCreatePeriod, setShowCreatePeriod] = useState(false)
|
||
const [showClearConfirm, setShowClearConfirm] = useState(false)
|
||
// "Spara som mall": derive a reusable template from the current kontering and
|
||
// hand it to the shared TemplateForm (create mode). Amounts become ratios/VAT
|
||
// rates so the mall re-computes when applied to a fresh amount later.
|
||
const [showSaveTemplate, setShowSaveTemplate] = useState(false)
|
||
// Month (YYYY-MM) of the most recently posted voucher this session. Used to
|
||
// flag, at the review step, when the user is about to book into a different
|
||
// month: guards against accidentally posting to the wrong month.
|
||
const [lastPostedMonth, setLastPostedMonth] = useState<string | null>(null)
|
||
// Per-account saldo as of entryDate, keyed by account_number.
|
||
// undefined = not fetched, null = fetch in flight.
|
||
const [accountBalances, setAccountBalances] = useState<Record<string, number | null>>({})
|
||
// Inline account-creation: which line triggered the dialog, and what the
|
||
// user typed in the combobox so we can prefill the dialog.
|
||
const [creatingAccountForLine, setCreatingAccountForLine] = useState<number | null>(null)
|
||
const [createAccountPrefill, setCreateAccountPrefill] = useState<string>('')
|
||
// Per-row refs to the account/debit/credit inputs so the keyboard flow can
|
||
// advance focus with Enter: konto → debet → kredit → nästa rads konto. Two
|
||
// layouts render simultaneously (mobile cards + desktop table); we focus
|
||
// whichever one is actually visible.
|
||
const desktopAccountRefs = useRef<(HTMLInputElement | null)[]>([])
|
||
const mobileAccountRefs = useRef<(HTMLInputElement | null)[]>([])
|
||
const desktopDebitRefs = useRef<(HTMLInputElement | null)[]>([])
|
||
const mobileDebitRefs = useRef<(HTMLInputElement | null)[]>([])
|
||
const desktopCreditRefs = useRef<(HTMLInputElement | null)[]>([])
|
||
const mobileCreditRefs = useRef<(HTMLInputElement | null)[]>([])
|
||
// Confirm button in the inline (bare) review, focused on open so Enter posts.
|
||
const bareConfirmRef = useRef<HTMLButtonElement>(null)
|
||
|
||
const isForeign = entryCurrency !== 'SEK'
|
||
|
||
const isUploading = uploadedFiles.some((f) => f.status === 'uploading')
|
||
|
||
const hasContent = description !== '' || notes !== '' ||
|
||
lines.some(l => l.account_number !== '' || l.debit_amount !== '' || l.credit_amount !== '') ||
|
||
uploadedFiles.length > 0
|
||
useUnsavedChanges(hasContent)
|
||
|
||
// Resolve + set the default voucher series for a source type from the cached
|
||
// company config: prefer the per-source-type mapping, fall back to the legacy
|
||
// default_voucher_series, then to 'A'. Reads refs (stable), so it can run both
|
||
// on load and when template application changes the source type.
|
||
const applySeriesForSourceType = useCallback((st: JournalEntrySourceType) => {
|
||
const perSource = resolveDefaultSeriesForSource(seriesMapRef.current, st)
|
||
setVoucherSeries(perSource !== 'A' ? perSource : defaultSeriesRef.current || 'A')
|
||
}, [])
|
||
|
||
// The series picker: the fixed Swedish presets first, then any letter this
|
||
// company already uses (settings map, global default, or the series a draft
|
||
// was saved with) so no existing value falls out of the list. Names come
|
||
// from the company's own voucher_series_labels, preset text as fallback.
|
||
const seriesLabels = companySettings?.voucher_series_labels ?? null
|
||
const seriesOptions = useMemo(
|
||
() => buildVoucherSeriesOptions(seriesLabels, [...configuredSeries, voucherSeries]),
|
||
[seriesLabels, configuredSeries, voucherSeries],
|
||
)
|
||
|
||
useEffect(() => {
|
||
loadBasCatalog().then(setCatalog).catch(() => {/* search degrades to the active chart */})
|
||
}, [])
|
||
|
||
// Company settings seed the default voucher series for the standalone form:
|
||
// prefer the per-source-type mapping when present; fall back to the legacy
|
||
// default_voucher_series, then to 'A'. In edit mode the draft's own series
|
||
// is pre-filled: never override it from the company defaults. (dimensions_
|
||
// enabled, which gates the tagging affordances in all modes incl. the
|
||
// TransactionBookingDialog embed, is derived directly above.)
|
||
useEffect(() => {
|
||
if (!companySettings) return
|
||
seriesMapRef.current =
|
||
(companySettings.default_voucher_series_per_source_type as Record<string, string> | null) ?? null
|
||
defaultSeriesRef.current = companySettings.default_voucher_series || 'A'
|
||
setConfiguredSeries(
|
||
Array.from(
|
||
new Set(
|
||
[
|
||
...Object.values(seriesMapRef.current || {}),
|
||
defaultSeriesRef.current,
|
||
].filter((v): v is string => typeof v === 'string' && /^[A-Z]$/.test(v)),
|
||
),
|
||
),
|
||
)
|
||
if (!embedded && !editEntryId) {
|
||
applySeriesForSourceType(effectiveSourceTypeRef.current)
|
||
}
|
||
}, [companySettings, embedded, sourceType, editEntryId, applySeriesForSourceType])
|
||
|
||
// Auto-select the period matching the entry date (on load and whenever the
|
||
// date changes). With no match, fall back to the newest period only when
|
||
// nothing is selected yet, and flag the mismatch either way.
|
||
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 {
|
||
setSelectedPeriod((current) => current || periods[0].id)
|
||
setPeriodMismatch('no_period')
|
||
}
|
||
}, [entryDate, periods])
|
||
|
||
// Earliest fiscal period, for the pre-FY affordance in the no_period block:
|
||
// a date before the company's first rakenskapsar (e.g. the aktiekapital
|
||
// deposit paid in before the Bolagsverket registration) must not lead to
|
||
// creating a pre-registration year. The correct remedy per BFL is to book
|
||
// the event on the first fiscal year's first day, so we offer exactly that
|
||
// when the earliest period is open and unlocked (issue #1825).
|
||
const preFyClampTarget = useMemo(() => {
|
||
const earliest = periods.reduce<FiscalPeriod | null>(
|
||
(min, p) => (min === null || p.period_start < min.period_start ? p : min),
|
||
null,
|
||
)
|
||
if (!earliest) return null
|
||
if (entryDate >= earliest.period_start) return null
|
||
if (earliest.is_closed || earliest.locked_at) return null
|
||
return earliest
|
||
}, [periods, entryDate])
|
||
|
||
// Preview the upcoming voucher number for the selected period + series.
|
||
// Read-only hint; the actual number is reserved atomically at commit time,
|
||
// so this may shift by one if another entry lands first.
|
||
useEffect(() => {
|
||
if (!showSeries || !entryDate || !voucherSeries) {
|
||
setNextVoucherNumber(null)
|
||
return
|
||
}
|
||
let cancelled = false
|
||
// Keyed on the entry date rather than the resolved period so the preview
|
||
// fires as soon as the series is known: the route resolves the period
|
||
// from the date itself, which is exactly how selectedPeriod is derived.
|
||
// Before the embedded picker is resolved, ask by source type + cash
|
||
// account instead of by series: the route answers with the series the
|
||
// booking would actually get, and that seeds the picker.
|
||
const qs = new URLSearchParams({ date: entryDate })
|
||
if (seriesResolved) {
|
||
qs.set('series', voucherSeries)
|
||
} else {
|
||
if (sourceType) qs.set('source_type', sourceType)
|
||
if (cashAccountId) qs.set('cash_account_id', cashAccountId)
|
||
}
|
||
fetch(`/api/bookkeeping/voucher-sequences/next?${qs}`)
|
||
.then((r) => (r.ok ? r.json() : null))
|
||
.then((body) => {
|
||
if (cancelled) return
|
||
const next = body?.data?.next
|
||
setNextVoucherNumber(typeof next === 'number' ? next : null)
|
||
if (!seriesResolved && body) {
|
||
const resolved = body?.data?.series
|
||
if (typeof resolved === 'string' && /^[A-Z]$/.test(resolved)) {
|
||
setVoucherSeries(resolved)
|
||
}
|
||
setSeriesResolved(true)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
if (!cancelled) setNextVoucherNumber(null)
|
||
})
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [showSeries, seriesResolved, entryDate, voucherSeries, sourceType, cashAccountId])
|
||
|
||
// 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])
|
||
|
||
// Edit mode hydrates the draft's STORED rate: the mount-time fetch must not
|
||
// replace it with today's rate, or a text-only edit would silently save a
|
||
// different FX rate. Fetch only after the user changes currency (or date).
|
||
const skipInitialRateFetch = useRef(initialExchangeRate != null)
|
||
useEffect(() => {
|
||
if (entryCurrency !== 'SEK') {
|
||
if (skipInitialRateFetch.current) {
|
||
skipInitialRateFetch.current = false
|
||
return
|
||
}
|
||
fetchRate(entryCurrency)
|
||
}
|
||
}, [entryCurrency, fetchRate])
|
||
|
||
// Stable key of selected account numbers across all lines, sorted + deduped.
|
||
// Only valid 4-digit BAS account numbers are included.
|
||
const accountsKey = useMemo(
|
||
() =>
|
||
Array.from(
|
||
new Set(lines.map((l) => l.account_number).filter((a) => /^\d{4}$/.test(a)))
|
||
)
|
||
.sort()
|
||
.join(','),
|
||
[lines]
|
||
)
|
||
|
||
// Fetch per-account saldo as of entryDate for the accounts currently on the
|
||
// form. The fetched value is always "saldo before this entry"; the render
|
||
// layer adds the typed draft amounts on top (draftDeltas) so the column
|
||
// shows where the account is heading.
|
||
useEffect(() => {
|
||
if (!accountsKey) {
|
||
setAccountBalances({})
|
||
return
|
||
}
|
||
const accountList = accountsKey.split(',')
|
||
// Carry forward any previously-known balances for these accounts so the
|
||
// value doesn't blank out on re-fetch; mark genuinely new accounts as
|
||
// loading (null).
|
||
setAccountBalances((prev) => {
|
||
const next: Record<string, number | null> = {}
|
||
for (const a of accountList) next[a] = a in prev ? prev[a] : null
|
||
return next
|
||
})
|
||
|
||
let cancelled = false
|
||
const handle = setTimeout(async () => {
|
||
try {
|
||
const qs = new URLSearchParams({ accounts: accountsKey, as_of: entryDate })
|
||
const res = await fetch(`/api/bookkeeping/account-balances?${qs}`)
|
||
if (!res.ok) {
|
||
// 4xx (e.g. future entryDate rejected by Zod) or 5xx: collapse the
|
||
// loading skeleton so the column doesn't get stuck. Saldo is a
|
||
// reference value, not authoritative: showing 0 here is preferable
|
||
// to an indefinite spinner.
|
||
if (cancelled) return
|
||
setAccountBalances((prev) => {
|
||
const next = { ...prev }
|
||
for (const a of accountList) {
|
||
if (next[a] == null) next[a] = 0
|
||
}
|
||
return next
|
||
})
|
||
return
|
||
}
|
||
const body = (await res.json()) as {
|
||
data: Array<{ account_number: string; balance: number }>
|
||
}
|
||
if (cancelled) return
|
||
setAccountBalances((prev) => {
|
||
const next = { ...prev }
|
||
for (const row of body.data) next[row.account_number] = row.balance
|
||
return next
|
||
})
|
||
} catch {
|
||
// Reference value: failure is non-fatal, just leave previous state.
|
||
}
|
||
}, 150)
|
||
|
||
return () => {
|
||
cancelled = true
|
||
clearTimeout(handle)
|
||
}
|
||
}, [accountsKey, entryDate])
|
||
|
||
// What the typed-but-unposted rows would do to each account's saldo. The
|
||
// /account-balances convention is debit-positive for every class, so
|
||
// delta = debit - credit encodes direction without needing the account type:
|
||
// rendering "before -> after" gives instant feedback on whether the chosen
|
||
// side increases or decreases the account.
|
||
const draftDeltas = useMemo(() => {
|
||
const deltas: Record<string, number> = {}
|
||
for (const l of lines) {
|
||
if (!/^\d{4}$/.test(l.account_number)) continue
|
||
const delta = (parseFloat(l.debit_amount) || 0) - (parseFloat(l.credit_amount) || 0)
|
||
if (delta === 0) continue
|
||
deltas[l.account_number] = roundOre((deltas[l.account_number] ?? 0) + delta)
|
||
}
|
||
return deltas
|
||
}, [lines])
|
||
|
||
// New rows inherit the current header default (a row without a per-row
|
||
// override follows the header (see setHeaderDimension).
|
||
const makeBlankLine = useCallback(
|
||
(): FormLine =>
|
||
Object.keys(headerDims).length > 0
|
||
? { ...BLANK_LINE, dimensions: { ...headerDims } }
|
||
: { ...BLANK_LINE },
|
||
[headerDims]
|
||
)
|
||
|
||
const addLine = () => {
|
||
setLines([...lines, makeBlankLine()])
|
||
}
|
||
|
||
const removeLine = (index: number) => {
|
||
if (lines.length <= 2) return
|
||
setLines(lines.filter((_, i) => i !== index))
|
||
// Keep the open dimension popover attached to the same row after the splice.
|
||
setDimPopoverRow((r) => (r === null ? r : r === index ? null : r > index ? r - 1 : r))
|
||
}
|
||
|
||
/**
|
||
* Header default write-through. Inheritance rule: a row inherits dimension
|
||
* `dimNo` iff its current value equals the previous header default (unset
|
||
* counts as equal to an unset default). Inheriting rows follow the change
|
||
* (including clearing); rows whose value differs are per-row overrides and
|
||
* are left untouched. A row explicitly set to the same code as the header is
|
||
* indistinguishable from an inherited one and follows later header changes
|
||
* by design: the per-row maps stay the single source of truth.
|
||
*/
|
||
const setHeaderDimension = (dimNo: string, code: string | null) => {
|
||
const prev = headerDims[dimNo]
|
||
const next = code?.trim() || undefined
|
||
setHeaderDims((h) => {
|
||
const out = { ...h }
|
||
if (next) out[dimNo] = next
|
||
else delete out[dimNo]
|
||
return out
|
||
})
|
||
setLines((ls) =>
|
||
ls.map((l) => {
|
||
if (l.dimensions?.[dimNo] !== prev) return l // per-row override: keep
|
||
const dims = { ...(l.dimensions ?? {}) }
|
||
if (next) dims[dimNo] = next
|
||
else delete dims[dimNo]
|
||
return { ...l, dimensions: Object.keys(dims).length > 0 ? dims : undefined }
|
||
})
|
||
)
|
||
}
|
||
|
||
const updateLineDimension = (index: number, dimNo: string, code: string | null) => {
|
||
setLines((ls) =>
|
||
ls.map((l, i) => {
|
||
if (i !== index) return l
|
||
const dims = { ...(l.dimensions ?? {}) }
|
||
const trimmed = code?.trim()
|
||
if (trimmed) dims[dimNo] = trimmed
|
||
else delete dims[dimNo]
|
||
return { ...l, dimensions: Object.keys(dims).length > 0 ? dims : undefined }
|
||
})
|
||
)
|
||
}
|
||
|
||
// Compact per-row display, e.g. "KS01 · P001" (dim number order).
|
||
const compactDims = (dims: Record<string, string>) =>
|
||
Object.entries(dims)
|
||
.filter(([, v]) => v)
|
||
.sort(([a], [b]) => Number(a) - Number(b))
|
||
.map(([, v]) => v)
|
||
.join(' · ')
|
||
|
||
// Close the row dimension popover on outside click (same pattern as the
|
||
// comboboxes' own dropdowns; their option clicks preventDefault so a
|
||
// selection never counts as outside).
|
||
useEffect(() => {
|
||
if (dimPopoverRow === null) return
|
||
function handlePointerDown(e: MouseEvent | TouchEvent) {
|
||
if (dimPopoverRef.current && !dimPopoverRef.current.contains(e.target as Node)) {
|
||
setDimPopoverRow(null)
|
||
}
|
||
}
|
||
document.addEventListener('mousedown', handlePointerDown)
|
||
document.addEventListener('touchstart', handlePointerDown)
|
||
return () => {
|
||
document.removeEventListener('mousedown', handlePointerDown)
|
||
document.removeEventListener('touchstart', handlePointerDown)
|
||
}
|
||
}, [dimPopoverRow])
|
||
|
||
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.
|
||
// NOTE: we intentionally do NOT auto-fill a balancing amount here: that was
|
||
// surprising when splitting across several lines. The balancing amount is
|
||
// now opt-in via double-clicking a debit/credit field (handleFillBalance).
|
||
if (field === 'account_number' && value) {
|
||
// Fall back to the BAS catalogue so the description still auto-fills when
|
||
// the chosen account isn't in the active chart yet.
|
||
const account =
|
||
accounts.find((a) => a.account_number === value) ??
|
||
catalog.find((a) => a.account_number === value)
|
||
if (account) {
|
||
updated[index].line_description = account.account_name
|
||
// Fortnox-style: seed the verifikationstext from the first row's account
|
||
// when the user hasn't typed one yet. Non-destructive: never overwrites.
|
||
if (index === 0 && !description.trim()) {
|
||
setDescription(account.account_name)
|
||
}
|
||
}
|
||
}
|
||
|
||
setLines(updated)
|
||
}
|
||
|
||
// Outstanding imbalance from every line except `excludeIndex`.
|
||
// Positive => debit side is short (a debit on the target row balances it);
|
||
// negative => credit side is short.
|
||
const computeBalancingDiff = useCallback(
|
||
(excludeIndex: number) => {
|
||
const others = lines.filter((_, i) => i !== excludeIndex)
|
||
const d = others.reduce((sum, l) => sum + (parseFloat(l.debit_amount) || 0), 0)
|
||
const c = others.reduce((sum, l) => sum + (parseFloat(l.credit_amount) || 0), 0)
|
||
return Math.round((c - d) * 100) / 100
|
||
},
|
||
[lines]
|
||
)
|
||
|
||
// Opt-in balancing: double-click a debit/credit field to fill the amount that
|
||
// makes the voucher balance. No-op if already balanced or if the balancing
|
||
// entry belongs on the other side.
|
||
const handleFillBalance = (index: number, side: 'debit' | 'credit') => {
|
||
const diff = computeBalancingDiff(index)
|
||
const fill = side === 'debit' ? diff : -diff
|
||
if (fill <= 0) return
|
||
updateLine(index, side === 'debit' ? 'debit_amount' : 'credit_amount', fill.toFixed(2))
|
||
}
|
||
|
||
// Tabbing (or clicking) into an untouched amount proposes the outstanding
|
||
// difference, so the closing row of a moms-split voucher fills itself. The
|
||
// proposal is pre-selected: typing replaces it, which keeps a multi-row split
|
||
// exactly as fast as before. Guards: the row must already have an account (so
|
||
// you can tab through the trailing blank row), both amounts must still be
|
||
// empty (never overwrite a typed figure), and the difference must belong on
|
||
// this side.
|
||
const handleAmountFocus =
|
||
(index: number, side: 'debit' | 'credit') =>
|
||
(e: React.FocusEvent<HTMLInputElement>) => {
|
||
const target = e.currentTarget
|
||
const line = lines[index]
|
||
if (!line || !line.account_number) return
|
||
if (line.debit_amount || line.credit_amount) return
|
||
const diff = computeBalancingDiff(index)
|
||
const fill = side === 'debit' ? diff : -diff
|
||
if (fill <= 0) return
|
||
updateLine(index, side === 'debit' ? 'debit_amount' : 'credit_amount', fill.toFixed(2))
|
||
// Select after the controlled re-render has written the value.
|
||
requestAnimationFrame(() => target.select())
|
||
}
|
||
|
||
// Move focus to a row's input. Deferred a frame so it runs after any
|
||
// re-render (e.g. the auto-appended trailing row). offsetParent is null for
|
||
// display:none elements, so this picks whichever layout is currently visible.
|
||
const focusRowInput = useCallback(
|
||
(
|
||
desktop: React.RefObject<(HTMLInputElement | null)[]>,
|
||
mobile: React.RefObject<(HTMLInputElement | null)[]>,
|
||
index: number
|
||
) => {
|
||
requestAnimationFrame(() => {
|
||
const d = desktop.current?.[index]
|
||
const m = mobile.current?.[index]
|
||
const target = d && d.offsetParent !== null ? d : m && m.offsetParent !== null ? m : (d ?? m)
|
||
target?.focus()
|
||
target?.select?.()
|
||
})
|
||
},
|
||
[]
|
||
)
|
||
const focusAccount = useCallback(
|
||
(index: number) => focusRowInput(desktopAccountRefs, mobileAccountRefs, index),
|
||
[focusRowInput]
|
||
)
|
||
const focusDebit = useCallback(
|
||
(index: number) => focusRowInput(desktopDebitRefs, mobileDebitRefs, index),
|
||
[focusRowInput]
|
||
)
|
||
const focusCredit = useCallback(
|
||
(index: number) => focusRowInput(desktopCreditRefs, mobileCreditRefs, index),
|
||
[focusRowInput]
|
||
)
|
||
|
||
// Keep exactly one trailing blank row so the user never has to click "Lägg
|
||
// till rad": once the last row is started (account or amount), append a fresh
|
||
// blank below it. Applies uniformly to typed, templated and copied lines.
|
||
// The guard lives inside the functional updater so chained updates see each
|
||
// other's result, making it idempotent and safe under StrictMode's dev-only
|
||
// double-invoke (no runaway append, no double blank row).
|
||
useEffect(() => {
|
||
setLines((prev) => {
|
||
const last = prev[prev.length - 1]
|
||
if (!last) return prev
|
||
const trailingBlank =
|
||
last.account_number === '' && last.debit_amount === '' && last.credit_amount === ''
|
||
return trailingBlank ? prev : [...prev, makeBlankLine()]
|
||
})
|
||
}, [lines, makeBlankLine])
|
||
|
||
// Inline (bare) review: move focus to the confirm button when it opens so
|
||
// Enter posts: parity with the ConfirmationDialog's autoFocusConfirm.
|
||
useEffect(() => {
|
||
if (bare && showReview) {
|
||
requestAnimationFrame(() => bareConfirmRef.current?.focus())
|
||
}
|
||
}, [bare, showReview])
|
||
|
||
// Only lines with both an account and a non-zero amount end up in the submit
|
||
// payload (see the filter in handleConfirm). Compute totals and balance from
|
||
// those same lines so the enable-gate matches what the API will actually see.
|
||
const submittableLines = lines.filter((l) => {
|
||
const d = parseFloat(l.debit_amount) || 0
|
||
const c = parseFloat(l.credit_amount) || 0
|
||
return !!l.account_number && (d > 0 || c > 0)
|
||
})
|
||
const incompleteLineCount = lines.filter((l) => {
|
||
const d = parseFloat(l.debit_amount) || 0
|
||
const c = parseFloat(l.credit_amount) || 0
|
||
const hasAmount = d > 0 || c > 0
|
||
const hasAccount = !!l.account_number
|
||
// Row counts as incomplete if exactly one of (account, amount) is present.
|
||
return hasAccount !== hasAmount
|
||
}).length
|
||
const totalDebit = submittableLines.reduce((sum, l) => sum + (parseFloat(l.debit_amount) || 0), 0)
|
||
const totalCredit = submittableLines.reduce((sum, l) => sum + (parseFloat(l.credit_amount) || 0), 0)
|
||
const isBalanced =
|
||
Math.round((totalDebit - totalCredit) * 100) === 0
|
||
&& totalDebit > 0
|
||
&& submittableLines.length >= 2
|
||
&& incompleteLineCount === 0
|
||
|
||
// Account number → BAS name, so derived template lines get meaningful labels.
|
||
const accountNameMap = useMemo(
|
||
() => Object.fromEntries(catalog.map((a) => [a.account_number, a.account_name])),
|
||
[catalog],
|
||
)
|
||
// Template lines derived from the current kontering. Fewer than two usable
|
||
// lines (a 4-digit account + an amount) disables "Spara som mall".
|
||
const derivedTemplateLines = useMemo(
|
||
() => deriveTemplateLinesFromBooking(lines, accountNameMap),
|
||
[lines, accountNameMap],
|
||
)
|
||
|
||
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
|
||
|
||
// Month/period safety signals surfaced at the review step (not as a blocking
|
||
// dialog on every date change (that would add friction to routine entry).
|
||
const monthLabel = useCallback(
|
||
(ym: string) => {
|
||
const [y, m] = ym.split('-').map(Number)
|
||
if (!y || !m) return ym
|
||
return new Date(y, m - 1, 1).toLocaleDateString(locale === 'en' ? 'en-GB' : 'sv-SE', {
|
||
month: 'long',
|
||
year: 'numeric',
|
||
})
|
||
},
|
||
[locale]
|
||
)
|
||
const entryMonth = entryDate.slice(0, 7)
|
||
const monthChanged = lastPostedMonth != null && entryMonth !== lastPostedMonth
|
||
const selectedPeriodObj = periods.find((p) => p.id === selectedPeriod)
|
||
const selectedPeriodLocked = !!(selectedPeriodObj?.locked_at || selectedPeriodObj?.is_closed)
|
||
|
||
const handleTemplateApply = (
|
||
templateLines: FormLine[],
|
||
templateDescription: string,
|
||
category?: BookingTemplateCategory,
|
||
) => {
|
||
setLines(templateLines)
|
||
if (!description) setDescription(templateDescription)
|
||
// Route templates whose category maps to a dedicated source type (VAT ->
|
||
// vat_settlement) so the entry books into that type's configured series.
|
||
// Create mode only: embedded/edit keep their caller-provided source type.
|
||
// Non-mapped categories fall back to the form's base source type, which
|
||
// also reverts a prior VAT routing if the user swaps templates.
|
||
if (!embedded && !editEntryId) {
|
||
const base = sourceType ?? 'manual'
|
||
const routed = sourceTypeForTemplateCategory(category) ?? base
|
||
if (routed !== effectiveSourceType) {
|
||
setEffectiveSourceType(routed)
|
||
effectiveSourceTypeRef.current = routed
|
||
applySeriesForSourceType(routed)
|
||
}
|
||
}
|
||
}
|
||
|
||
// Wipe the form back to a blank entry. Mirrors the post-submit reset: it
|
||
// clears the data the user typed (lines, description, note, attachments,
|
||
// currency) but keeps the contextual defaults (period, date) so the form is
|
||
// immediately ready for the next entry. Template-routed source type does NOT
|
||
// survive a clear: the next entry is hand-typed, and a sticky vat_settlement
|
||
// would tag it into the moms series and skip the manual-entry underlag
|
||
// tracking. Posted entries are immutable, so that mistag is storno-only.
|
||
const handleClearAll = () => {
|
||
setDescription('')
|
||
setNotes('')
|
||
setUploadedFiles([])
|
||
setLines([{ ...BLANK_LINE }, { ...BLANK_LINE }])
|
||
setHeaderDims({})
|
||
setEntryCurrency('SEK')
|
||
setExchangeRate('')
|
||
setForeignAmount('')
|
||
if (!embedded && !editEntryId) {
|
||
const base = sourceType ?? 'manual'
|
||
if (base !== effectiveSourceType) {
|
||
setEffectiveSourceType(base)
|
||
effectiveSourceTypeRef.current = base
|
||
applySeriesForSourceType(base)
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleOpenCreateAccount = (lineIndex: number, prefill: string) => {
|
||
setCreatingAccountForLine(lineIndex)
|
||
setCreateAccountPrefill(prefill)
|
||
}
|
||
|
||
// After a new account is created, refresh the chart, auto-select it on the
|
||
// line that initiated the create, and close the dialog. All other form
|
||
// state is preserved: we never navigate away from the form.
|
||
//
|
||
// Only the number is required: the dialog also reaches here after
|
||
// reactivating an existing account, where the rest of the row is whatever
|
||
// the company already had stored and is picked up by fetchAccounts.
|
||
const handleAccountCreated = async (account: { account_number: string }) => {
|
||
await invalidateReferenceData('ref:accounts')
|
||
if (creatingAccountForLine != null) {
|
||
updateLine(creatingAccountForLine, 'account_number', account.account_number)
|
||
}
|
||
setCreatingAccountForLine(null)
|
||
setCreateAccountPrefill('')
|
||
}
|
||
|
||
const handleReview = () => {
|
||
if (!selectedPeriod || !description || !isBalanced || periodMismatch) {
|
||
setShowValidationHints(true)
|
||
return
|
||
}
|
||
setShowValidationHints(false)
|
||
const hasDocuments = uploadedFiles.some((f) => f.status === 'uploaded')
|
||
if (!embedded && !bare && !hasDocuments) {
|
||
setShowNoDocWarning(true)
|
||
return
|
||
}
|
||
setShowReview(true)
|
||
}
|
||
|
||
// Nothing in flight and the user may write: the buttons' enable gate.
|
||
// Validity is deliberately NOT part of it; an attempt on an incomplete
|
||
// form is what surfaces the validation hints.
|
||
const processReady = () =>
|
||
!isUploading &&
|
||
canWrite &&
|
||
!isSubmitting &&
|
||
!isSavingDraft
|
||
|
||
// Whether the entry is actually submittable. The Enter-to-advance handlers
|
||
// below key off this: navigation fires while the entry is incomplete, and
|
||
// once it balances Enter falls through to the review instead.
|
||
const canSubmitReview = () =>
|
||
isBalanced &&
|
||
!!description &&
|
||
!!selectedPeriod &&
|
||
!periodMismatch &&
|
||
processReady()
|
||
|
||
// Enter anywhere in the form = "Granska & skapa": opens the review exactly as
|
||
// the button does, from any field. Navigation is Tab's job. Two Enter
|
||
// exceptions stay intact: the account combobox (it calls preventDefault to
|
||
// select the highlighted account (we skip when defaultPrevented) and the
|
||
// internal-note textarea (newlines). The inline review owns its own Enter.
|
||
const handleFormKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
|
||
if (e.key !== 'Enter') return
|
||
if (e.defaultPrevented || showReview) return
|
||
if ((e.target as HTMLElement).tagName === 'TEXTAREA') return
|
||
e.preventDefault()
|
||
if (processReady()) handleReview()
|
||
}
|
||
|
||
// Enter-to-advance inside the konteringsrader: konto → debet → kredit →
|
||
// nästa rads konto. Navigation only fires while the entry is NOT
|
||
// submittable: once the voucher balances, Enter falls through to the
|
||
// form-level handler above and opens the review instead, so a single Enter
|
||
// never both moves focus and submits.
|
||
const handleAmountKeyDown =
|
||
(index: number, side: 'debit' | 'credit') =>
|
||
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
||
if (e.key !== 'Enter' || canSubmitReview()) return
|
||
e.preventDefault()
|
||
// An amount on this side finishes the row (debit clears credit and vice
|
||
// versa) → jump to the next row's account. An empty debit means the row
|
||
// books on the credit side → hop across first.
|
||
if (side === 'debit' && !(parseFloat(lines[index].debit_amount) > 0)) {
|
||
focusCredit(index)
|
||
} else {
|
||
focusAccount(index + 1)
|
||
}
|
||
}
|
||
|
||
// Enter in a radbeskrivning continues to that row's amount.
|
||
const handleLineDescKeyDown =
|
||
(index: number) => (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||
if (e.key !== 'Enter' || canSubmitReview()) return
|
||
e.preventDefault()
|
||
focusDebit(index)
|
||
}
|
||
|
||
// Enter in the verifikationstext drops into the first row still missing an
|
||
// account, so the top-to-bottom keyboard flow never needs the mouse.
|
||
const handleHeaderDescKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||
if (e.key !== 'Enter' || canSubmitReview()) return
|
||
const idx = lines.findIndex((l) => !l.account_number)
|
||
if (idx === -1) return
|
||
e.preventDefault()
|
||
focusAccount(idx)
|
||
}
|
||
|
||
// Inner submit: builds payload, POSTs, throws a structured error on failure
|
||
// (so the activation hook can intercept ACCOUNTS_NOT_IN_CHART).
|
||
const postJournalEntry = useCallback(async () => {
|
||
const submittableLines = lines.filter(
|
||
(l) => l.account_number && (l.debit_amount || l.credit_amount)
|
||
)
|
||
|
||
// PRE-PASS: decide which single line carries the entry's FX metadata BEFORE
|
||
// any line is built, so the answer cannot depend on line order. Deciding
|
||
// inside the map meant the "already applied" latch only closed once the
|
||
// loop had reached a hydrated FX line, so an agent-created EUR draft edited
|
||
// here could end up with TWO lines claiming the same foreign amount; and
|
||
// the old test (first account starting with '19') picked the SEK leg of a
|
||
// EUR/SEK växling and dropped the metadata entirely on entries with no 19xx
|
||
// line at all. lib/bookkeeping/fx-line-slot.ts states the rule.
|
||
const fxSlot = resolveFxLineSlot(
|
||
submittableLines.map((l) => ({
|
||
account_number: l.account_number,
|
||
debit_amount: parseFloat(l.debit_amount) || 0,
|
||
credit_amount: parseFloat(l.credit_amount) || 0,
|
||
currency: l.currency,
|
||
})),
|
||
{ entryCurrency, exchangeRate: rate, foreignAmount: computedForeignAmount }
|
||
)
|
||
|
||
if (fxSlot.kind === 'unplaceable') {
|
||
// `journal_entries` has no currency or exchange_rate column: a rate that
|
||
// is not written onto a line is unrecoverable, and the verifikat would
|
||
// post looking as if it had always been in SEK. Refuse instead, before
|
||
// anything is sent, and say which rader are involved.
|
||
const messageKey =
|
||
fxSlot.reason === 'ambiguous'
|
||
? 'fx_unplaceable_ambiguous'
|
||
: fxSlot.reason === 'currency_conflict'
|
||
? 'fx_unplaceable_currency_conflict'
|
||
: 'fx_unplaceable_no_carrier'
|
||
const message = t(messageKey, {
|
||
currency: entryCurrency,
|
||
amount: computedForeignAmount.toLocaleString('sv-SE', { minimumFractionDigits: 2 }),
|
||
rate: rate.toLocaleString('sv-SE', { minimumFractionDigits: 4 }),
|
||
accounts: fxSlot.accounts.join(', '),
|
||
lineCurrency: fxSlot.lineCurrency ?? '',
|
||
})
|
||
throw Object.assign(new Error(message), { body: { error: { message } }, status: 400 })
|
||
}
|
||
|
||
const entryLines: CreateJournalEntryLineInput[] = submittableLines.map((l, index) => {
|
||
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,
|
||
}
|
||
|
||
if (l.dimensions) {
|
||
const dims = Object.fromEntries(
|
||
Object.entries(l.dimensions).filter(([, v]) => typeof v === 'string' && v.trim() !== '')
|
||
)
|
||
if (Object.keys(dims).length > 0) base.dimensions = dims
|
||
}
|
||
|
||
if (l.tax_code) base.tax_code = l.tax_code
|
||
|
||
if (l.currency) {
|
||
// The line speaks for itself (hydrated draft, agent-created entry).
|
||
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
|
||
} else if (fxSlot.kind === 'slot' && fxSlot.index === index) {
|
||
base.currency = entryCurrency
|
||
base.amount_in_currency = computedForeignAmount
|
||
base.exchange_rate = rate
|
||
}
|
||
|
||
return base
|
||
})
|
||
|
||
const baseUrl = submitUrl ?? '/api/bookkeeping/journal-entries'
|
||
// Edit mode PATCHes the draft in place; create mode POSTs (with ?as_draft
|
||
// when saving a draft rather than posting).
|
||
const url = editEntryId
|
||
? `${baseUrl}/${editEntryId}`
|
||
: saveAsDraftRef.current
|
||
? `${baseUrl}?as_draft=true`
|
||
: baseUrl
|
||
const res = await fetch(url, {
|
||
method: editEntryId ? 'PATCH' : 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
fiscal_period_id: selectedPeriod,
|
||
entry_date: entryDate,
|
||
description,
|
||
source_type: effectiveSourceType,
|
||
source_id: sourceId,
|
||
// Omitted while an embedded picker is still unresolved: see
|
||
// seriesResolved. Endpoints that do not declare the key strip it.
|
||
...(seriesResolved ? { voucher_series: voucherSeries || 'A' } : {}),
|
||
notes: notes || undefined,
|
||
lines: entryLines,
|
||
// Set only when retrying past the booking-time duplicate guard (see
|
||
// handleBookAnyway). Stripped by schemas that don't declare it, so a
|
||
// stray value never reaches the manual journal-entry endpoint.
|
||
...(forceDuplicateRef.current ?? {}),
|
||
// Fields only the caller's endpoint knows about. Same safety as above:
|
||
// a schema that does not declare a key strips it, so this cannot leak
|
||
// into the manual journal-entry route.
|
||
...(extraBody ?? {}),
|
||
}),
|
||
})
|
||
return (await throwOnStructuredError(res)) as { data?: { id?: string; voucher_series?: string; voucher_number?: number }; journal_entry_id?: string }
|
||
}, [lines, rate, entryCurrency, computedForeignAmount, t, submitUrl, editEntryId, selectedPeriod, entryDate, description, effectiveSourceType, sourceId, voucherSeries, seriesResolved, notes, extraBody])
|
||
|
||
const { runSubmit, dialog: activationDialog, confirm: confirmActivation, cancel: cancelActivation } =
|
||
useSubmitWithAccountActivation(postJournalEntry)
|
||
|
||
// Attach the uploaded underlag to the entry that was just written. BFL 5 kap
|
||
// 7 § requires the verifikation to reference its underlag and BFL 7 kap
|
||
// requires that underlag to be archived with it, but the entry is already
|
||
// committed when this runs: a failed link cannot be rolled back, only
|
||
// reported. Files that did not attach are KEPT in the upload zone (clearing
|
||
// them would erase the user's only pointer to the underlag they believed
|
||
// was filed); the ones that attached are dropped.
|
||
const linkUploadedDocuments = async (
|
||
journalEntryId: string | undefined,
|
||
): Promise<DocumentLinkFailure[]> => {
|
||
const targets = uploadedFiles
|
||
.filter((f) => f.status === 'uploaded' && f.id)
|
||
.map((f) => ({ documentId: f.id as string, fileName: f.fileName }))
|
||
if (targets.length === 0) {
|
||
setUploadedFiles([])
|
||
return []
|
||
}
|
||
if (!journalEntryId) {
|
||
// No id came back, so there is nothing to link to: report it as a
|
||
// failure rather than clearing the files behind a success toast.
|
||
return targets.map((target) => ({
|
||
documentId: target.documentId,
|
||
fileName: target.fileName ?? null,
|
||
status: 0,
|
||
code: null,
|
||
reason: null,
|
||
}))
|
||
}
|
||
const { failed } = await linkDocuments(targets, journalEntryId)
|
||
if (failed.length === 0) {
|
||
setUploadedFiles([])
|
||
return []
|
||
}
|
||
const failedIds = new Set(failed.map((f) => f.documentId))
|
||
setUploadedFiles((prev) => prev.filter((f) => f.id != null && failedIds.has(f.id)))
|
||
return failed
|
||
}
|
||
|
||
const handleConfirm = async () => {
|
||
setIsSubmitting(true)
|
||
saveAsDraftRef.current = false
|
||
try {
|
||
const result = await runSubmit()
|
||
|
||
const journalEntryId = result.data?.id ?? result.journal_entry_id
|
||
const voucher = formatVoucher(result.data ?? {})
|
||
const linkFailures = await linkUploadedDocuments(journalEntryId)
|
||
|
||
if (linkFailures.length > 0) {
|
||
// The verifikat exists but its underlag does not: say exactly that.
|
||
// Never the plain "Verifikation skapad", which would leave the user
|
||
// believing the receipt is on the books.
|
||
toast({
|
||
title: t('toast_created_missing_docs_title'),
|
||
description: t('toast_created_missing_docs_description', {
|
||
voucher,
|
||
count: linkFailures.length,
|
||
files: formatFailedDocumentNames(linkFailures),
|
||
}),
|
||
variant: 'destructive',
|
||
action: journalEntryId ? (
|
||
<ToastAction
|
||
altText={t('toast_open_entry')}
|
||
onClick={() => router.push(`/bookkeeping/${journalEntryId}`)}
|
||
>
|
||
{t('toast_open_entry')}
|
||
</ToastAction>
|
||
) : undefined,
|
||
})
|
||
} else {
|
||
toast({
|
||
title: t('toast_created_title'),
|
||
description: t('toast_created_description', { voucher }),
|
||
})
|
||
}
|
||
setLastPostedMonth(entryDate.slice(0, 7))
|
||
setShowReview(false)
|
||
setDescription('')
|
||
setNotes('')
|
||
setLines([{ ...BLANK_LINE }, { ...BLANK_LINE }])
|
||
setHeaderDims({})
|
||
setEntryCurrency('SEK')
|
||
setExchangeRate('')
|
||
setForeignAmount('')
|
||
onCreated?.()
|
||
if (journalEntryId) {
|
||
onEntryCreated?.(journalEntryId)
|
||
}
|
||
} catch (err) {
|
||
if (err instanceof Error && err.message === 'cancelled') {
|
||
// User dismissed the activation dialog: no toast needed
|
||
} else {
|
||
const anyErr = err as {
|
||
body?: { error?: { code?: string; details?: { candidate?: BookedDuplicateCandidate } } }
|
||
status?: number
|
||
}
|
||
const candidate = anyErr.body?.error?.details?.candidate
|
||
if (anyErr.body?.error?.code === 'TRANSACTION_BOOK_POSSIBLE_DUPLICATE' && candidate) {
|
||
// Soft duplicate guard fired: don't dead-end on a toast that merely
|
||
// says "book anyway". Open the dialog so the user can review the
|
||
// existing verifikat or confirm. handleBookAnyway re-submits with
|
||
// force bound to this candidate.
|
||
setDuplicateCandidate(candidate)
|
||
} else {
|
||
toast({
|
||
title: t('toast_create_failed'),
|
||
description: getErrorMessage(anyErr.body ?? err, { context: 'journal_entry', statusCode: anyErr.status }),
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
} finally {
|
||
setIsSubmitting(false)
|
||
}
|
||
}
|
||
|
||
// Retry the booking past the duplicate guard. force is bound to the reviewed
|
||
// candidate via the ref; cleared afterwards so a later normal submit can't
|
||
// inherit it. handleConfirm runs its full success path (toast, reset,
|
||
// onEntryCreated) exactly as a first-try booking would.
|
||
const handleBookAnyway = async () => {
|
||
const candidate = duplicateCandidate
|
||
if (!candidate) return
|
||
forceDuplicateRef.current = {
|
||
force: true,
|
||
// Bind on the voucher id: present on both a sibling-transaction candidate
|
||
// and a ledger-only voucher candidate (which has no transaction_id).
|
||
expected_duplicate_journal_entry_id: candidate.journal_entry_id,
|
||
}
|
||
setDuplicateCandidate(null)
|
||
try {
|
||
await handleConfirm()
|
||
} finally {
|
||
forceDuplicateRef.current = null
|
||
}
|
||
}
|
||
|
||
const handleSaveDraft = async () => {
|
||
if (!selectedPeriod || !description || !isBalanced || periodMismatch) {
|
||
setShowValidationHints(true)
|
||
return
|
||
}
|
||
setShowValidationHints(false)
|
||
setIsSavingDraft(true)
|
||
saveAsDraftRef.current = true
|
||
try {
|
||
const result = await runSubmit()
|
||
|
||
const journalEntryId = result.data?.id ?? result.journal_entry_id
|
||
const linkFailures = await linkUploadedDocuments(journalEntryId)
|
||
|
||
if (linkFailures.length > 0) {
|
||
// Same rule as the posted path: the draft was saved, the underlag was
|
||
// not attached, and the user is told which files are missing.
|
||
toast({
|
||
title: t('toast_draft_missing_docs_title'),
|
||
description: t('toast_draft_missing_docs_description', {
|
||
count: linkFailures.length,
|
||
files: formatFailedDocumentNames(linkFailures),
|
||
}),
|
||
variant: 'destructive',
|
||
action: journalEntryId ? (
|
||
<ToastAction
|
||
altText={t('toast_open_entry')}
|
||
onClick={() => router.push(`/bookkeeping/${journalEntryId}`)}
|
||
>
|
||
{t('toast_open_entry')}
|
||
</ToastAction>
|
||
) : undefined,
|
||
})
|
||
} else {
|
||
toast({
|
||
title: t('toast_draft_saved_title'),
|
||
description: t('toast_draft_saved_description'),
|
||
})
|
||
}
|
||
setDescription('')
|
||
setNotes('')
|
||
setLines([{ ...BLANK_LINE }, { ...BLANK_LINE }])
|
||
setHeaderDims({})
|
||
setEntryCurrency('SEK')
|
||
setExchangeRate('')
|
||
setForeignAmount('')
|
||
onCreated?.()
|
||
if (journalEntryId) {
|
||
onEntryCreated?.(journalEntryId)
|
||
}
|
||
} catch (err) {
|
||
if (err instanceof Error && err.message === 'cancelled') {
|
||
// Activation dialog dismissed: silent
|
||
} else {
|
||
const anyErr = err as { body?: unknown; status?: number }
|
||
toast({
|
||
title: t('toast_save_draft_failed'),
|
||
description: getErrorMessage(anyErr.body ?? err, { context: 'journal_entry', statusCode: anyErr.status }),
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
} finally {
|
||
saveAsDraftRef.current = false
|
||
setIsSavingDraft(false)
|
||
}
|
||
}
|
||
|
||
// Edit an existing draft: PATCH in place (postJournalEntry routes to the
|
||
// editEntryId URL) and keep it a draft. No field reset: the host dialog
|
||
// closes on success via onUpdated.
|
||
const handleSaveEdit = async () => {
|
||
if (!selectedPeriod || !description || !isBalanced || periodMismatch) {
|
||
setShowValidationHints(true)
|
||
return
|
||
}
|
||
setShowValidationHints(false)
|
||
setIsSavingDraft(true)
|
||
try {
|
||
await runSubmit()
|
||
toast({
|
||
title: t('toast_updated_title'),
|
||
description: t('toast_updated_description'),
|
||
})
|
||
onUpdated?.()
|
||
} catch (err) {
|
||
if (err instanceof Error && err.message === 'cancelled') {
|
||
// Activation dialog dismissed: silent
|
||
} else {
|
||
const anyErr = err as { body?: unknown; status?: number }
|
||
toast({
|
||
title: t('toast_update_failed'),
|
||
description: getErrorMessage(anyErr.body ?? err, { context: 'journal_entry', statusCode: anyErr.status }),
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
} finally {
|
||
setIsSavingDraft(false)
|
||
}
|
||
}
|
||
|
||
// Inline review for the modal (bare): swap the form body to a read-only
|
||
// summary instead of stacking a second dialog over the form dialog. The
|
||
// no-underlag caveat folds in here so there's a single confirm step.
|
||
const reviewPanel = (
|
||
<div
|
||
className="space-y-4"
|
||
// The host dialog swallows Escape (accidental-close guard), so Escape
|
||
// here is free to mean "back to the form": keyboard mirror of ←.
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Escape' && !isSubmitting) {
|
||
e.stopPropagation()
|
||
setShowReview(false)
|
||
}
|
||
}}
|
||
>
|
||
<div className="flex items-center justify-between gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowReview(false)}
|
||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
← {t('review_back')}
|
||
</button>
|
||
<span className="font-display text-lg">
|
||
{nextVoucherNumber != null
|
||
? t('review_title_with_voucher', { voucher: formatVoucher({ voucher_series: voucherSeries, voucher_number: nextVoucherNumber }) })
|
||
: t('review_title')}
|
||
</span>
|
||
</div>
|
||
|
||
{(monthChanged || selectedPeriodLocked) && (
|
||
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 p-3">
|
||
<AlertTriangle className="h-5 w-5 text-attn mt-0.5 shrink-0" />
|
||
<div className="flex-1 text-sm text-attn space-y-0.5">
|
||
{monthChanged && (
|
||
<p className="font-medium">
|
||
{t('review_month_changed', { prev: monthLabel(lastPostedMonth as string), current: monthLabel(entryMonth) })}
|
||
</p>
|
||
)}
|
||
{selectedPeriodLocked && <p>{t('review_period_locked')}</p>}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{uploadedFiles.filter((f) => f.status === 'uploaded').length === 0 && (
|
||
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 p-3 text-sm text-attn">
|
||
<AlertTriangle className="h-5 w-5 mt-0.5 shrink-0" />
|
||
<p>{t('no_doc_body')}</p>
|
||
</div>
|
||
)}
|
||
|
||
<JournalEntryReviewContent
|
||
periodName={periods.find((p) => p.id === selectedPeriod)?.name || ''}
|
||
entryDate={entryDate}
|
||
description={description}
|
||
notes={notes || undefined}
|
||
voucherSeries={voucherSeries}
|
||
lines={lines}
|
||
totalDebit={totalDebit}
|
||
totalCredit={totalCredit}
|
||
attachmentCount={uploadedFiles.filter((f) => f.status === 'uploaded').length}
|
||
showBalanceBadge
|
||
hideDate={false}
|
||
/>
|
||
|
||
<div className="flex justify-end gap-2 pt-2 border-t">
|
||
<Button variant="outline" onClick={() => setShowReview(false)} disabled={isSubmitting}>
|
||
{t('review_back')}
|
||
</Button>
|
||
<Button ref={bareConfirmRef} onClick={handleConfirm} disabled={isSubmitting}>
|
||
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||
{/* No underlag attached → explicit acknowledgement, equivalent to the
|
||
blocking "Bokför utan underlag" dialog in the non-bare flow (BFL
|
||
5 kap 6-7 §§). With a document it's the normal create label. */}
|
||
{uploadedFiles.some((f) => f.status === 'uploaded')
|
||
? t('review_confirm')
|
||
: t('no_doc_confirm')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
const formContent = (
|
||
<div className="space-y-4" onKeyDown={handleFormKeyDown}>
|
||
{bare && showReview ? reviewPanel : (
|
||
<>
|
||
{/* Verifikat metadata: compact bar on top (Fortnox-style). Date, series
|
||
and period are pre-filled; the period derives from the date. The
|
||
konteringsrader below are the focus. */}
|
||
<div className="rounded-lg border bg-muted/20 p-3 space-y-3">
|
||
<div className="grid gap-3 grid-cols-1 sm:grid-cols-[1fr_2fr_auto]">
|
||
{!(embedded && initialDate) && (
|
||
<div>
|
||
<Label className="text-xs text-muted-foreground">{t('date')}</Label>
|
||
<Input
|
||
type="date"
|
||
value={entryDate}
|
||
onChange={(e) => setEntryDate(e.target.value)}
|
||
className="mt-1 h-8"
|
||
/>
|
||
</div>
|
||
)}
|
||
<div>
|
||
<Label className="text-xs text-muted-foreground">{t('description')}</Label>
|
||
<Input
|
||
value={description}
|
||
onChange={(e) => setDescription(e.target.value)}
|
||
onKeyDown={handleHeaderDescKeyDown}
|
||
placeholder={t('description_placeholder')}
|
||
className="mt-1 h-8"
|
||
/>
|
||
</div>
|
||
{showSeries && (
|
||
// Closed list, not free text: the letters carry fixed meanings
|
||
// (A = redovisning, B = kundfakturor, ...) and a typo here silently
|
||
// starts a new series with its own number sequence.
|
||
<div className="w-full sm:w-72">
|
||
<Label className="text-xs text-muted-foreground">{t('series')}</Label>
|
||
<Select
|
||
value={voucherSeries}
|
||
onValueChange={(v) => {
|
||
setVoucherSeries(v)
|
||
setSeriesResolved(true)
|
||
}}
|
||
>
|
||
<SelectTrigger className="mt-1 h-8">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{seriesOptions.map((option) => (
|
||
<SelectItem key={option.letter} value={option.letter}>
|
||
<span className="font-mono">{option.letter}</span>
|
||
{option.label && (
|
||
<span className="ml-2 text-muted-foreground">{option.label}</span>
|
||
)}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs">
|
||
{/* The period is a total function of the entry date (Swedish fiscal
|
||
periods never overlap), so it renders as derived text in both
|
||
variants. The embedded Select this replaces allowed hand-picking
|
||
a period that disagreed with the date, which only the DB period
|
||
trigger would catch. */}
|
||
{selectedPeriodObj && (
|
||
<span className="text-muted-foreground">
|
||
{t('fiscal_year')}:{' '}
|
||
<span className="text-foreground">{selectedPeriodObj.name}</span>
|
||
{nextVoucherNumber != null && (
|
||
<span className="ml-2 font-mono text-foreground">
|
||
{voucherSeries}{nextVoucherNumber}
|
||
</span>
|
||
)}
|
||
</span>
|
||
)}
|
||
<div className="flex items-center gap-2">
|
||
<Label className="text-xs text-muted-foreground">{t('currency')}</Label>
|
||
<Select value={entryCurrency} onValueChange={(v) => {
|
||
setEntryCurrency(v as Currency)
|
||
if (v === 'SEK') {
|
||
setExchangeRate('')
|
||
setForeignAmount('')
|
||
}
|
||
}}>
|
||
<SelectTrigger className="h-7 w-20 text-xs">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{CURRENCIES.map((c) => (
|
||
<SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
{!embedded && !showNotes && !notes && (
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowNotes(true)}
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
+ {t('internal_note')}
|
||
</button>
|
||
)}
|
||
{dimensionsEnabled && !showDims && (
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowDims(true)}
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
+ {t('add_dimensions')}
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{isForeign && (
|
||
<div className="flex flex-wrap items-end gap-3">
|
||
<div className="w-40">
|
||
<Label className="text-xs text-muted-foreground">
|
||
{t('exchange_rate_label', { currency: entryCurrency })}
|
||
</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">
|
||
{t('amount_in_currency_label', { currency: 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>
|
||
)}
|
||
|
||
{!embedded && (showNotes || notes) && (
|
||
<div>
|
||
<Label className="text-xs text-muted-foreground">
|
||
{t('internal_note')}{' '}
|
||
<span className="font-normal">{t('internal_note_optional')}</span>
|
||
</Label>
|
||
<Textarea
|
||
value={notes}
|
||
onChange={(e) => setNotes(e.target.value)}
|
||
placeholder={t('internal_note_placeholder')}
|
||
className="mt-1 resize-none"
|
||
rows={2}
|
||
maxLength={2000}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Header default dims: writes through to all rows without a per-row
|
||
override (see setHeaderDimension for the inheritance rule). */}
|
||
{dimensionsEnabled && showDims && (
|
||
<div className="max-w-md space-y-1">
|
||
<LineDimensionFields
|
||
dimensions={headerDims}
|
||
onChange={setHeaderDimension}
|
||
inputClassName="h-8"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{periodMismatch === 'no_period' && (
|
||
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 p-3">
|
||
<AlertTriangle className="h-5 w-5 text-attn mt-0.5 shrink-0" />
|
||
<div className="flex-1 text-sm text-attn">
|
||
<p className="font-medium">{t('no_period_warning', { date: entryDate })}</p>
|
||
<p className="mt-0.5">
|
||
{preFyClampTarget ? t('pre_fy_help') : t('no_period_help')}
|
||
</p>
|
||
</div>
|
||
{/* Pre-FY: the date predates the first rakenskapsar. Offering
|
||
"Skapa räkenskapsår" here would propose a pre-registration year
|
||
(legally wrong); the correct remedy is booking on the first
|
||
fiscal year's first day, so offer that instead. Setting the
|
||
entry date state drives the /book payload even in embedded mode
|
||
where the date input is hidden. */}
|
||
{preFyClampTarget ? (
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setEntryDate(preFyClampTarget.period_start)}
|
||
className="shrink-0"
|
||
>
|
||
<CalendarPlus className="h-3.5 w-3.5 mr-1.5" />
|
||
{t('pre_fy_book_on_first_day', { date: preFyClampTarget.period_start })}
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setShowCreatePeriod(true)}
|
||
className="shrink-0"
|
||
>
|
||
<CalendarPlus className="h-3.5 w-3.5 mr-1.5" />
|
||
{t('create_period')}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</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}
|
||
catalog={catalog}
|
||
notActivatedLabel={t('account_not_activated')}
|
||
onChange={(num) => updateLine(index, 'account_number', num)}
|
||
onCommit={() => focusDebit(index)}
|
||
onCreateAccount={(prefill) => handleOpenCreateAccount(index, prefill)}
|
||
inputRef={(el) => { mobileAccountRefs.current[index] = el }}
|
||
/>
|
||
</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)}
|
||
onKeyDown={handleLineDescKeyDown(index)}
|
||
placeholder={t('line_description_placeholder')}
|
||
/>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div className="space-y-1">
|
||
<Label className="text-xs text-muted-foreground">{t('col_debit')}</Label>
|
||
<Input
|
||
ref={(el) => { mobileDebitRefs.current[index] = el }}
|
||
type="number"
|
||
value={line.debit_amount}
|
||
onChange={(e) => updateLine(index, 'debit_amount', e.target.value)}
|
||
onKeyDown={handleAmountKeyDown(index, 'debit')}
|
||
onFocus={handleAmountFocus(index, 'debit')}
|
||
onDoubleClick={() => handleFillBalance(index, 'debit')}
|
||
title={t('fill_balance_tooltip')}
|
||
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">{t('col_credit')}</Label>
|
||
<Input
|
||
ref={(el) => { mobileCreditRefs.current[index] = el }}
|
||
type="number"
|
||
value={line.credit_amount}
|
||
onChange={(e) => updateLine(index, 'credit_amount', e.target.value)}
|
||
onKeyDown={handleAmountKeyDown(index, 'credit')}
|
||
onFocus={handleAmountFocus(index, 'credit')}
|
||
onDoubleClick={() => handleFillBalance(index, 'credit')}
|
||
title={t('fill_balance_tooltip')}
|
||
placeholder="0,00"
|
||
className="text-right"
|
||
inputMode="decimal"
|
||
min="0"
|
||
step="0.01"
|
||
/>
|
||
</div>
|
||
</div>
|
||
{dimensionsEnabled && (
|
||
<LineDimensionFields
|
||
dimensions={line.dimensions}
|
||
onChange={(dimNo, code) => updateLineDimension(index, dimNo, code)}
|
||
/>
|
||
)}
|
||
{/^\d{4}$/.test(line.account_number) && (
|
||
<div className="flex justify-end text-xs text-muted-foreground tabular-nums pt-0.5">
|
||
{accountBalances[line.account_number] === null || accountBalances[line.account_number] === undefined ? (
|
||
<Skeleton className="h-3 w-20" />
|
||
) : (
|
||
(() => {
|
||
const bal = accountBalances[line.account_number] as number
|
||
const delta = draftDeltas[line.account_number]
|
||
if (!delta) {
|
||
return (
|
||
<span>
|
||
{t('saldo_label')} {formatCurrency(bal)}
|
||
</span>
|
||
)
|
||
}
|
||
const after = roundOre(bal + delta)
|
||
return (
|
||
<span>
|
||
{t('saldo_label')} {formatCurrency(bal)}{' '}
|
||
<span className="text-foreground">→ {formatCurrency(after)}</span>
|
||
</span>
|
||
)
|
||
})()
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
|
||
{/* Mobile totals */}
|
||
<div className="flex justify-between items-center px-1 pt-2 font-semibold text-sm">
|
||
<span>{t('sum')}</span>
|
||
<div className="flex gap-4">
|
||
<span className={isBalanced ? 'text-success' : 'text-destructive'}>
|
||
{t('sum_d', { amount: totalDebit.toLocaleString('sv-SE', { minimumFractionDigits: 2 }) })}
|
||
</span>
|
||
<span className={isBalanced ? 'text-success' : 'text-destructive'}>
|
||
{t('sum_k', { amount: totalCredit.toLocaleString('sv-SE', { minimumFractionDigits: 2 }) })}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={addLine}
|
||
className="flex-1"
|
||
>
|
||
<Plus className="h-3 w-3 mr-1" />
|
||
{t('add_line')}
|
||
</Button>
|
||
<BookingTemplatePicker
|
||
onApply={handleTemplateApply}
|
||
entityType={company?.entity_type}
|
||
/>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setShowSaveTemplate(true)}
|
||
disabled={derivedTemplateLines.length < 2}
|
||
title={derivedTemplateLines.length < 2 ? t('save_template_disabled_hint') : undefined}
|
||
>
|
||
<BookmarkPlus className="h-3 w-3 mr-1" />
|
||
{t('save_as_template')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Entry lines: desktop table */}
|
||
<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-28">{t('col_account')}</th>
|
||
<th className="py-2 px-1">{t('col_description')}</th>
|
||
<th className="py-2 w-32 px-1 text-right">{t('col_debit')}</th>
|
||
<th className="py-2 w-32 px-1 text-right">{t('col_credit')}</th>
|
||
<th className="py-2 w-28 px-1 text-right">{t('col_saldo')}</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}
|
||
catalog={catalog}
|
||
notActivatedLabel={t('account_not_activated')}
|
||
onChange={(num) => updateLine(index, 'account_number', num)}
|
||
onCommit={() => focusDebit(index)}
|
||
onCreateAccount={(prefill) => handleOpenCreateAccount(index, prefill)}
|
||
inputRef={(el) => { desktopAccountRefs.current[index] = el }}
|
||
className="h-8"
|
||
/>
|
||
</td>
|
||
<td className="py-1.5 px-1">
|
||
<Input
|
||
value={line.line_description}
|
||
onChange={(e) => updateLine(index, 'line_description', e.target.value)}
|
||
onKeyDown={handleLineDescKeyDown(index)}
|
||
placeholder={t('line_description_placeholder')}
|
||
className="h-8"
|
||
/>
|
||
{line.dimensions &&
|
||
Object.keys(line.dimensions).length > 0 &&
|
||
(line.account_number || line.debit_amount || line.credit_amount) && (
|
||
<Badge data-ph-mask="" variant="outline" className="mt-1 font-mono text-[11px] font-normal">
|
||
{compactDims(line.dimensions)}
|
||
</Badge>
|
||
)}
|
||
</td>
|
||
<td className="py-1.5 px-1">
|
||
<Input
|
||
ref={(el) => { desktopDebitRefs.current[index] = el }}
|
||
type="number"
|
||
value={line.debit_amount}
|
||
onChange={(e) => updateLine(index, 'debit_amount', e.target.value)}
|
||
onKeyDown={handleAmountKeyDown(index, 'debit')}
|
||
onFocus={handleAmountFocus(index, 'debit')}
|
||
onDoubleClick={() => handleFillBalance(index, 'debit')}
|
||
title={t('fill_balance_tooltip')}
|
||
placeholder="0,00"
|
||
className="text-right h-8"
|
||
inputMode="decimal"
|
||
min="0"
|
||
step="0.01"
|
||
/>
|
||
</td>
|
||
<td className="py-1.5 px-1">
|
||
<Input
|
||
ref={(el) => { desktopCreditRefs.current[index] = el }}
|
||
type="number"
|
||
value={line.credit_amount}
|
||
onChange={(e) => updateLine(index, 'credit_amount', e.target.value)}
|
||
onKeyDown={handleAmountKeyDown(index, 'credit')}
|
||
onFocus={handleAmountFocus(index, 'credit')}
|
||
onDoubleClick={() => handleFillBalance(index, 'credit')}
|
||
title={t('fill_balance_tooltip')}
|
||
placeholder="0,00"
|
||
className="text-right h-8"
|
||
inputMode="decimal"
|
||
min="0"
|
||
step="0.01"
|
||
/>
|
||
</td>
|
||
<td className="py-1.5 px-1 text-right tabular-nums text-muted-foreground">
|
||
{(() => {
|
||
if (!/^\d{4}$/.test(line.account_number)) return null
|
||
const bal = accountBalances[line.account_number]
|
||
if (bal === null || bal === undefined) {
|
||
return <Skeleton className="h-4 w-20 ml-auto" />
|
||
}
|
||
const delta = draftDeltas[line.account_number]
|
||
if (!delta) return formatCurrency(bal)
|
||
const after = roundOre(bal + delta)
|
||
return (
|
||
<span className="inline-flex flex-col items-end leading-tight">
|
||
<span className="text-[11px]">{formatCurrency(bal)}</span>
|
||
<span className="text-foreground">→ {formatCurrency(after)}</span>
|
||
</span>
|
||
)
|
||
})()}
|
||
</td>
|
||
<td className="py-1.5">
|
||
<div className="flex items-center justify-end">
|
||
{dimensionsEnabled && (
|
||
<div
|
||
className="relative"
|
||
ref={dimPopoverRow === index ? dimPopoverRef : undefined}
|
||
>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setDimPopoverRow(dimPopoverRow === index ? null : index)}
|
||
className={`h-8 w-8 p-0 min-h-[44px] min-w-[44px] ${
|
||
line.dimensions && Object.keys(line.dimensions).length > 0
|
||
? 'text-foreground'
|
||
: 'text-muted-foreground'
|
||
}`}
|
||
aria-label={t('row_dimensions_aria')}
|
||
aria-expanded={dimPopoverRow === index}
|
||
title={t('row_dimensions_aria')}
|
||
>
|
||
<Tags className="h-3.5 w-3.5" />
|
||
</Button>
|
||
{dimPopoverRow === index && (
|
||
<div
|
||
className="absolute right-0 top-full z-50 mt-1 w-64 rounded-lg border bg-card p-3 shadow-md"
|
||
onKeyDown={(e) => {
|
||
// The comboboxes preventDefault their own Escape
|
||
// (closing their dropdown): only an unhandled
|
||
// Escape closes the popover.
|
||
if (e.key === 'Escape' && !e.defaultPrevented) {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
setDimPopoverRow(null)
|
||
}
|
||
}}
|
||
>
|
||
<LineDimensionFields
|
||
stacked
|
||
dimensions={line.dimensions}
|
||
onChange={(dimNo, code) => updateLineDimension(index, dimNo, code)}
|
||
inputClassName="h-8"
|
||
/>
|
||
</div>
|
||
)}
|
||
</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]"
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
</Button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
<tfoot>
|
||
<tr className="font-semibold">
|
||
<td colSpan={2} className="py-2 px-1">
|
||
{t('sum')}
|
||
</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>
|
||
<td></td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
|
||
<div className="flex gap-2 mt-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={addLine}
|
||
>
|
||
<Plus className="h-3 w-3 mr-1" />
|
||
{t('add_line')}
|
||
</Button>
|
||
<BookingTemplatePicker
|
||
onApply={handleTemplateApply}
|
||
entityType={company?.entity_type}
|
||
/>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setShowSaveTemplate(true)}
|
||
disabled={derivedTemplateLines.length < 2}
|
||
title={derivedTemplateLines.length < 2 ? t('save_template_disabled_hint') : undefined}
|
||
>
|
||
<BookmarkPlus className="h-3 w-3 mr-1" />
|
||
{t('save_as_template')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Document attachments: hidden when editing a draft; underlag is
|
||
managed from the verifikat detail page (JournalEntryAttachments). */}
|
||
{!embedded && !editEntryId && (
|
||
<div>
|
||
<Label className="mb-2 block">{t('attachments_label')}</Label>
|
||
<DocumentUploadZone
|
||
files={uploadedFiles}
|
||
onFilesChange={setUploadedFiles}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{!isBalanced && totalDebit > 0 && (
|
||
<p className="text-sm text-destructive">
|
||
{t('difference', { amount: formatCurrency(Math.abs(totalDebit - totalCredit)) })}
|
||
</p>
|
||
)}
|
||
|
||
<div className="flex flex-col items-end gap-1">
|
||
<div className="flex gap-2">
|
||
{editEntryId ? (
|
||
<Button
|
||
onClick={handleSaveEdit}
|
||
disabled={isSubmitting || isSavingDraft || isUploading || !canWrite}
|
||
title={!canWrite ? t('read_only_tooltip') : undefined}
|
||
>
|
||
{!canWrite ? <Lock className="mr-2 h-4 w-4" /> : isSavingDraft && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||
{t('save_edit')}
|
||
</Button>
|
||
) : (
|
||
<>
|
||
{!embedded && (
|
||
<Button
|
||
variant="ghost"
|
||
onClick={() => setShowClearConfirm(true)}
|
||
disabled={!hasContent || isSubmitting || isSavingDraft}
|
||
title={t('clear_all_tooltip')}
|
||
>
|
||
<Eraser className="mr-2 h-4 w-4" />
|
||
{t('clear_all')}
|
||
</Button>
|
||
)}
|
||
{/* Draft-saving rides on ?as_draft=true, which only the standard
|
||
journal-entries endpoint honors. A custom submitUrl (e.g. the
|
||
bank-transaction /book route) ignores the flag and commits a
|
||
numbered voucher, so the draft button must not render there. */}
|
||
{!submitUrl && (
|
||
<Button
|
||
variant="outline"
|
||
onClick={handleSaveDraft}
|
||
disabled={isSubmitting || isSavingDraft || isUploading || !canWrite}
|
||
title={!canWrite ? t('read_only_tooltip') : t('save_draft_tooltip')}
|
||
>
|
||
{!canWrite ? <Lock className="mr-2 h-4 w-4" /> : isSavingDraft && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||
{t('save_draft')}
|
||
</Button>
|
||
)}
|
||
<Button
|
||
onClick={handleReview}
|
||
disabled={isSubmitting || isSavingDraft || isUploading || !canWrite}
|
||
title={!canWrite ? t('read_only_tooltip') : undefined}
|
||
>
|
||
{!canWrite && <Lock className="mr-2 h-4 w-4" />}
|
||
{t('review_and_create')}
|
||
</Button>
|
||
</>
|
||
)}
|
||
</div>
|
||
{showValidationHints && (!description || !selectedPeriod || isUploading || periodMismatch || incompleteLineCount > 0 || (!isBalanced && submittableLines.length < 2)) && (
|
||
<div className="text-xs text-destructive space-y-0.5 text-right">
|
||
{!description && <p>{t('validation_description')}</p>}
|
||
{!selectedPeriod && <p>{t('validation_period')}</p>}
|
||
{periodMismatch === 'no_period' && (
|
||
<p>{preFyClampTarget ? t('validation_pre_fy') : t('validation_no_matching_period')}</p>
|
||
)}
|
||
{isUploading && <p>{t('validation_uploading')}</p>}
|
||
{incompleteLineCount > 0 && (
|
||
<p>{t('validation_incomplete_lines')}</p>
|
||
)}
|
||
{submittableLines.length < 2 && incompleteLineCount === 0 && (
|
||
<p>{t('validation_min_lines')}</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Save the current kontering as a reusable template. Amounts are stored
|
||
as ratios of the total, so the user picks a fresh amount when applying
|
||
the mall later. The shared TemplateForm re-seeds from the derived lines
|
||
each time the dialog opens (Radix unmounts its content when closed). */}
|
||
<Dialog open={showSaveTemplate} onOpenChange={setShowSaveTemplate}>
|
||
<DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle>{t('save_template_dialog_title')}</DialogTitle>
|
||
<DialogDescription>{t('save_template_dialog_description')}</DialogDescription>
|
||
</DialogHeader>
|
||
{showSaveTemplate && (
|
||
<TemplateForm
|
||
mode="create"
|
||
entityLabels={{
|
||
all: tTpl('entity_all'),
|
||
enskild_firma: tTpl('entity_enskild_firma'),
|
||
aktiebolag: tTpl('entity_aktiebolag'),
|
||
}}
|
||
initialTemplate={{
|
||
id: '',
|
||
company_id: null,
|
||
team_id: null,
|
||
created_by: null,
|
||
name: description.trim(),
|
||
description: '',
|
||
category: 'other',
|
||
entity_type: company?.entity_type ?? 'all',
|
||
lines: derivedTemplateLines,
|
||
is_system: false,
|
||
is_active: true,
|
||
created_at: '',
|
||
updated_at: '',
|
||
} satisfies BookingTemplateLibrary}
|
||
onSaved={() => setShowSaveTemplate(false)}
|
||
/>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
<ActivateAccountsDialog
|
||
open={activationDialog.open}
|
||
accountNumbers={activationDialog.accountNumbers}
|
||
onConfirm={confirmActivation}
|
||
onCancel={cancelActivation}
|
||
onCreateUnknown={(num) => {
|
||
cancelActivation()
|
||
const lineIndex = lines.findIndex((l) => l.account_number === num)
|
||
setCreatingAccountForLine(lineIndex >= 0 ? lineIndex : null)
|
||
setCreateAccountPrefill(num)
|
||
}}
|
||
/>
|
||
|
||
<AddAccountDialog
|
||
open={creatingAccountForLine != null}
|
||
onOpenChange={(next) => {
|
||
if (!next) {
|
||
setCreatingAccountForLine(null)
|
||
setCreateAccountPrefill('')
|
||
}
|
||
}}
|
||
{...splitCreateAccountPrefill(createAccountPrefill)}
|
||
onCreated={handleAccountCreated}
|
||
/>
|
||
|
||
<ConfirmationDialog
|
||
open={showReview && !bare}
|
||
onOpenChange={setShowReview}
|
||
onConfirm={handleConfirm}
|
||
isSubmitting={isSubmitting}
|
||
autoFocusConfirm
|
||
title={
|
||
!embedded && nextVoucherNumber != null
|
||
? t('review_title_with_voucher', { voucher: formatVoucher({ voucher_series: voucherSeries, voucher_number: nextVoucherNumber }) })
|
||
: t('review_title')
|
||
}
|
||
warningText={embedded ? '' : t('review_warning')}
|
||
>
|
||
{(monthChanged || selectedPeriodLocked) && (
|
||
<div className="mb-4 flex items-start gap-3 rounded-lg border border-border bg-muted/30 p-3">
|
||
<AlertTriangle className="h-5 w-5 text-attn mt-0.5 shrink-0" />
|
||
<div className="flex-1 text-sm text-attn space-y-0.5">
|
||
{monthChanged && (
|
||
<p className="font-medium">
|
||
{t('review_month_changed', {
|
||
prev: monthLabel(lastPostedMonth as string),
|
||
current: monthLabel(entryMonth),
|
||
})}
|
||
</p>
|
||
)}
|
||
{selectedPeriodLocked && <p>{t('review_period_locked')}</p>}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<JournalEntryReviewContent
|
||
periodName={periods.find((p) => p.id === selectedPeriod)?.name || ''}
|
||
entryDate={entryDate}
|
||
description={description}
|
||
notes={notes || undefined}
|
||
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 && !bare}
|
||
onOpenChange={setShowNoDocWarning}
|
||
onConfirm={() => {
|
||
setShowNoDocWarning(false)
|
||
setShowReview(true)
|
||
}}
|
||
isSubmitting={false}
|
||
autoFocusConfirm
|
||
title={t('no_doc_dialog_title')}
|
||
warningText={t('no_doc_dialog_warning')}
|
||
confirmLabel={t('no_doc_confirm')}
|
||
>
|
||
<div className="text-sm text-muted-foreground">
|
||
{t('no_doc_body')}
|
||
</div>
|
||
</ConfirmationDialog>
|
||
|
||
<CreatePeriodDialog
|
||
open={showCreatePeriod}
|
||
onOpenChange={setShowCreatePeriod}
|
||
entryDate={entryDate}
|
||
periods={periods}
|
||
onCreated={() => void invalidateReferenceData('ref:fiscal-periods')}
|
||
/>
|
||
|
||
{/* Clear-all confirmation */}
|
||
<Dialog open={showClearConfirm} onOpenChange={setShowClearConfirm}>
|
||
<DialogContent className="sm:max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>{t('clear_all_confirm_title')}</DialogTitle>
|
||
<DialogDescription>{t('clear_all_confirm_body')}</DialogDescription>
|
||
</DialogHeader>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setShowClearConfirm(false)}>
|
||
{t('clear_all_cancel')}
|
||
</Button>
|
||
<Button
|
||
variant="destructive"
|
||
onClick={() => {
|
||
handleClearAll()
|
||
setShowClearConfirm(false)
|
||
}}
|
||
>
|
||
<Eraser className="mr-2 h-4 w-4" />
|
||
{t('clear_all_confirm')}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
<DuplicateBookingDialog
|
||
candidate={duplicateCandidate}
|
||
processing={isSubmitting}
|
||
onCancel={() => setDuplicateCandidate(null)}
|
||
onBookAnyway={handleBookAnyway}
|
||
matchTransaction={duplicateMatchTransaction ?? null}
|
||
onMatched={
|
||
onDuplicateMatched
|
||
? (_transactionId, journalEntryId) => {
|
||
setDuplicateCandidate(null)
|
||
onDuplicateMatched(journalEntryId)
|
||
}
|
||
: undefined
|
||
}
|
||
/>
|
||
</div>
|
||
)
|
||
|
||
if (embedded || bare) {
|
||
return formContent
|
||
}
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>{t('card_title')}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{formContent}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|