Files
accounted/components/bookkeeping/AddAccountDialog.tsx
T
Jakob Wennberg 1a41119682 perf(bundle): drop the BAS chart and the Node crypto polyfill from the shared client baseline (#1942)
* perf(bundle): drop the BAS chart and the Node crypto polyfill from the shared client baseline

Two chunks rode along in the first-load JS of almost every dashboard route:
the full BAS 2026 chart (315 KB uncompressed, in 81 route manifests) and
the browser polyfill for Node's crypto/vm/Buffer (327 KB, in 26 routes
incl. login and register). Neither was needed on first paint; both got
there through static imports of helpers that happen to live next to code
that needs the data or the builtin.

Node polyfill (4 pure splits, behaviour unchanged, re-exported from the
original modules for server callers):
- lib/auth/bankid-flags.ts: isBankIdEnabled (login, register, security
  settings imported it from bankid.ts, which imports crypto).
- lib/import/bank-file/formats.ts: the format registry + detection (the
  import history imported getFormat from parser.ts, which hashes).
- lib/salary/personnummer-format.ts: parsing/validation/formatting (the
  employee forms reached the encrypting personnummer.ts via tax-column).
- lib/auth/api-key-scopes.ts: scope catalogue, groups, tool map, helpers
  (the API key panel imported STAGING_SCOPES from the key generator).

BAS chart:
- lib/bookkeeping/bas-lazy.ts + use-bas-reference.ts: the chart becomes a
  dynamic import, fetched once per session after first paint; components
  that show BAS names/descriptions call useBasReference() and re-render
  when it lands. Until then (and on the server) only the hardcoded
  account-descriptions answer, so SSR and hydration agree.
- lib/bookkeeping/bas-labels.ts: class/group labels out of bas-reference.ts
  (account-descriptions needed a label and paid for the whole chart).
- lib/bookkeeping/bas-account-numbers.ts (generated, ~11 KB) +
  scripts/generate-bas-account-numbers.ts (--check) + parity test:
  isStandardBASAccountNumber for AddAccountDialog/ChartOfAccountsManager.
- lib/bookkeeping/account-classifier-{heuristic,client}.ts: the BAS-aligned
  heuristic shared by the server classifier and a client variant that uses
  the lazy chart.
- lib/bookkeeping/invoice-accounts.ts: INVOICE_FX_RATE_MISSING,
  InvoiceFxRateMissingError, getRevenueAccount, getOutputVatAccount out of
  invoice-entries.ts, whose engine import pulled account-backfill and the
  chart into SendInvoiceDialog/PaymentBookingDialog.
- CorrectOpeningBalanceDialog re-seeds names when the chart lands;
  OpeningBalanceRowEditor builds its Fuse indexes lazily; the
  ChartOfAccountsManager BAS-katalog tab awaits the chunk.

Tooling:
- scripts/perf/client-import-closure.mjs: static import closure of every
  'use client' module with the shortest chain to a target (file or bare
  specifier); found every path above without a build.
- scripts/checks/client-node-builtin.mjs wired into check:guards: a client
  module reaching a Node builtin is a hard failure (0 today).

Left as is: invoices/[id], its credit page and SendInvoiceDialog still
reach the chart through lib/invoices/issue-credit-note -> invoice-entries
-> engine -> account-backfill; splitting the engine is out of scope here.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(perf): unambiguous import-edge regex in the closure walker (CodeQL js/redos)

One quantifier per span: a greedy [^'"]* up to the specifier quote, which it
cannot cross, so a run of whitespace has a single parse. Same edges as
before (multi-line named imports, re-exports, side-effect imports; type-only
imports still skipped).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-08-26 15:07:49 +02:00

362 lines
14 KiB
TypeScript

'use client'
import { useEffect, useState } from 'react'
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Loader2, AlertTriangle } from 'lucide-react'
import { isStandardBASAccountNumber } from '@/lib/bookkeeping/bas-account-numbers'
import { classifyAccountClient as classifyAccount } from '@/lib/bookkeeping/account-classifier-client'
import { useBasReference } from '@/lib/bookkeeping/use-bas-reference'
import type { BASAccount } from '@/types'
import { getErrorMessage as getUserErrorMessage } from '@/lib/errors/get-error-message'
import { AccountVatTreatmentSelect } from './AccountVatTreatmentSelect'
import {
defaultRateForVatTreatment,
isVatTreatmentAllowedForAccountClass,
type AccountVatTreatment,
} from '@/lib/vat/account-vat-treatment'
/**
* The create path hands back the full row the API inserted. The reactivate
* path only learns the account number back from /accounts/activate, and the
* stored account is deliberately left untouched, so the rest is unknown here.
* Every host refetches its own list and reads only account_number.
*/
type CreatedAccount = Partial<BASAccount> & { account_number: string }
interface AddAccountDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
onCreated: (account: CreatedAccount) => void
initialAccountNumber?: string
initialAccountName?: string
}
export function AddAccountDialog({
open,
onOpenChange,
onCreated,
initialAccountNumber,
initialAccountName,
}: AddAccountDialogProps) {
// Loads the BAS chart chunk after mount so classification and the
// standard-account check get the authoritative answer once it lands.
useBasReference()
const [accountNumber, setAccountNumber] = useState('')
const [accountName, setAccountName] = useState('')
const [description, setDescription] = useState('')
// "Standard moms": the moms-sats a booking line defaults to when this konto is
// picked. 'none' = no default. SelectItem values are stringified decimals.
const [defaultVatRate, setDefaultVatRate] = useState('none')
const [defaultVatTreatment, setDefaultVatTreatment] = useState<AccountVatTreatment | 'none'>('none')
const [sruCode, setSruCode] = useState('')
const [normalBalance, setNormalBalance] = useState<'debit' | 'credit'>('debit')
const [isSaving, setIsSaving] = useState(false)
const [error, setError] = useState('')
// Set when the create failed because the number belongs to a deactivated
// account. Creating it can never succeed (the unique constraint counts
// inactive rows), so the dialog offers reactivation instead of a dead end.
const [inactiveConflict, setInactiveConflict] = useState(false)
// Apply prefill values whenever the dialog opens. Resetting on close happens
// implicitly after a successful create; here we only need to seed inputs so
// the user doesn't retype what the combobox already captured.
useEffect(() => {
if (!open) return
const num = (initialAccountNumber ?? '').replace(/\D/g, '').slice(0, 4)
setAccountNumber(num)
setAccountName(initialAccountName ?? '')
setDefaultVatRate('none')
setDefaultVatTreatment('none')
setError('')
setInactiveConflict(false)
if (num.length === 4) {
setNormalBalance(classifyAccount(num).normal_balance)
}
}, [open, initialAccountNumber, initialAccountName])
const isBASMatch = accountNumber.length === 4 && isStandardBASAccountNumber(accountNumber)
const derived = accountNumber.length === 4 ? classifyAccount(accountNumber) : null
async function handleCreate() {
setError('')
setInactiveConflict(false)
if (!/^\d{4}$/.test(accountNumber)) {
setError('Kontonumret måste vara exakt 4 siffror')
return
}
if (!accountName.trim()) {
setError('Kontonamn krävs')
return
}
setIsSaving(true)
try {
const response = await fetch('/api/bookkeeping/accounts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
account_number: accountNumber,
account_name: accountName.trim(),
account_type: derived?.account_type || 'expense',
normal_balance: normalBalance,
description: description || null,
default_vat_rate: defaultVatRate === 'none' ? null : parseFloat(defaultVatRate),
default_vat_treatment: defaultVatTreatment === 'none' ? null : defaultVatTreatment,
sru_code: sruCode || null,
}),
})
if (!response.ok) {
// Map the response itself, not `new Error(data.error)`: the route
// answers thrown errors with the canonical envelope
// `{ error: { code, message } }`, and the Error constructor would
// stringify that object to "[object Object]", throwing away the
// route's own Swedish reason. Passing the parsed body plus the status
// resolves all three shapes (envelope, bare string, no body).
const body = await response.json().catch(() => null)
const code = (body as { error?: { code?: string } } | null)?.error?.code
setInactiveConflict(code === 'ACCOUNT_EXISTS_INACTIVE')
setError(getUserErrorMessage(body, { statusCode: response.status }))
return
}
const { data: createdAccount } = await response.json() as { data: BASAccount }
// Reset form
setAccountNumber('')
setAccountName('')
setDescription('')
setDefaultVatRate('none')
setDefaultVatTreatment('none')
setSruCode('')
onCreated(createdAccount)
onOpenChange(false)
} catch (err) {
setError(err instanceof Error ? getUserErrorMessage(err) : 'Något gick fel')
} finally {
setIsSaving(false)
}
}
// Recovery for ACCOUNT_EXISTS_INACTIVE: flip the existing account back on
// instead of trying to insert a second row. The values typed into this form
// are intentionally dropped — the account comes back exactly as it was, and
// renaming it is the kontoplan's job, not a side effect of a failed create.
async function handleReactivate() {
setError('')
setIsSaving(true)
try {
const response = await fetch('/api/bookkeeping/accounts/activate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ account_numbers: [accountNumber] }),
})
if (!response.ok) {
const body = await response.json().catch(() => null)
setError(getUserErrorMessage(body, { statusCode: response.status }))
return
}
setInactiveConflict(false)
setAccountNumber('')
setAccountName('')
setDescription('')
setDefaultVatRate('none')
setDefaultVatTreatment('none')
setSruCode('')
onCreated({ account_number: accountNumber })
onOpenChange(false)
} catch (err) {
setError(err instanceof Error ? getUserErrorMessage(err) : 'Något gick fel')
} finally {
setIsSaving(false)
}
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>Lägg till eget konto</DialogTitle>
<DialogDescription>
Skapa ett eget konto utanför BAS-standarden
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-2">
{isBASMatch && (
<div className="flex items-start gap-2 rounded-lg bg-muted/30 border border-border p-3">
<AlertTriangle className="h-4 w-4 text-attn mt-0.5 shrink-0" />
<p className="text-sm text-attn">
Kontonummer {accountNumber} finns i BAS-standarden. Använd &quot;BAS-katalog&quot;-fliken för att aktivera standardkonton istället.
</p>
</div>
)}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Kontonummer</Label>
<Input
value={accountNumber}
onChange={(e) => {
const v = e.target.value.replace(/\D/g, '').slice(0, 4)
setAccountNumber(v)
const nextClass = v.length > 0 ? Number(v[0]) : null
if (
defaultVatTreatment !== 'none' &&
(nextClass === null || !isVatTreatmentAllowedForAccountClass(
defaultVatTreatment,
nextClass,
))
) {
setDefaultVatTreatment('none')
}
// The conflict is about a specific number; editing it makes
// the reactivate offer stale.
setInactiveConflict(false)
setError('')
if (v.length === 4) {
setNormalBalance(classifyAccount(v).normal_balance)
}
}}
placeholder="T.ex. 1935"
maxLength={4}
className="font-mono"
/>
</div>
<div className="space-y-2">
<Label>Normal saldo</Label>
<Select value={normalBalance} onValueChange={(v) => { if (v) setNormalBalance(v as 'debit' | 'credit') }}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="debit">Debet</SelectItem>
<SelectItem value="credit">Kredit</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{derived && (
<p className="text-xs text-muted-foreground">
Auto-detekterad typ:{' '}
<span className="font-medium">
{derived.account_type === 'asset' ? 'Tillgång'
: derived.account_type === 'liability' ? 'Skuld'
: derived.account_type === 'equity' ? 'Eget kapital'
: derived.account_type === 'untaxed_reserves' ? 'Obeskattade reserver'
: derived.account_type === 'revenue' ? 'Intäkt'
: 'Kostnad'}
</span>
</p>
)}
<div className="space-y-2">
<Label>Kontonamn</Label>
<Input
value={accountName}
onChange={(e) => setAccountName(e.target.value)}
placeholder="T.ex. Sparkonto företag"
/>
</div>
<div className="space-y-2">
<Label>Beskrivning <span className="text-muted-foreground">(valfritt)</span></Label>
<Textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Kort beskrivning av kontots användning"
rows={2}
/>
</div>
<AccountVatTreatmentSelect
value={defaultVatTreatment}
accountClass={derived ? Number(accountNumber.charAt(0)) : null}
onValueChange={(treatment) => {
setDefaultVatTreatment(treatment)
if (treatment !== 'none' && defaultVatRate === 'none') {
const rate = defaultRateForVatTreatment(treatment, Number(accountNumber.charAt(0)))
if (rate !== null) setDefaultVatRate(String(rate))
}
}}
/>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Standard moms <span className="text-muted-foreground">(valfritt)</span></Label>
<Select value={defaultVatRate} onValueChange={setDefaultVatRate}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="none">Ingen standard</SelectItem>
<SelectItem value="0">Ingen moms</SelectItem>
<SelectItem value="0.25">25 %</SelectItem>
<SelectItem value="0.12">12 %</SelectItem>
<SelectItem value="0.06">6 %</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>SRU-kod <span className="text-muted-foreground">(valfritt)</span></Label>
<Input
value={sruCode}
onChange={(e) => setSruCode(e.target.value)}
placeholder="T.ex. 7201"
/>
</div>
</div>
{error && !inactiveConflict && (
<p className="text-sm text-destructive">{error}</p>
)}
{inactiveConflict && (
<div className="space-y-3 rounded-lg border border-border p-3">
<p className="text-sm text-foreground">{error}</p>
<Button
type="button"
onClick={() => void handleReactivate()}
disabled={isSaving}
>
{isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Aktivera kontot istället
</Button>
</div>
)}
</div>
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>
Avbryt
</Button>
<Button
onClick={handleCreate}
disabled={isSaving || inactiveConflict || accountNumber.length !== 4 || !accountName.trim()}
>
{isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Skapa konto
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}