feat(settings): let a company name each verifikationsserie letter (#2336)

* 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>

components/bookkeeping/JournalEntryForm.tsx

@@ -45,7 +45,7 @@ import {
 } from '@/lib/documents/link-documents'
 import { formatCurrency } from '@/lib/utils'
 import { roundOre } from '@/lib/money'
-import { formatVoucher, resolveDefaultSeriesForSource, VOUCHER_SERIES_PRESETS } from '@/lib/bookkeeping/voucher-series-resolver'
+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'
@@ -298,15 +298,13 @@ export default function JournalEntryForm({
 
   // 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.
-  const seriesOptions = useMemo(() => {
-    const options = VOUCHER_SERIES_PRESETS.map((p) => ({ letter: p.letter, label: p.label }))
-    const seen = new Set(options.map((o) => o.letter))
-    const extras = [...configuredSeries, voucherSeries]
-      .filter((letter) => /^[A-Z]$/.test(letter) && !seen.has(letter) && seen.add(letter))
-      .sort()
-    return [...options, ...extras.map((letter) => ({ letter, label: '' }))]
-  }, [configuredSeries, voucherSeries])
+  // 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 */})

components/import/ImportReviewStep.tsx

@@ -37,6 +37,7 @@ import {
 } from '@/lib/import/opening-balance-defaults'
 import type { ImportPreview, AccountMapping } from '@/lib/import/types'
 import type { TheaterModel } from '@/lib/import/theater-model'
+import { voucherSeriesLabel } from '@/lib/bookkeeping/voucher-series-resolver'
 
 const SERIES_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
 
@@ -75,6 +76,8 @@ export default function ImportReviewStep({
   const { company } = useCompany()
   const { settings: companySettings } = useCompanySettings()
   const companyDefaultVoucherSeries = companySettings?.default_voucher_series || null
+  // Company-defined series names (presets as fallback) for the two pickers.
+  const seriesLabels = companySettings?.voucher_series_labels ?? null
   const t = useTranslations('import')
   const [options, setOptions] = useState<ImportExecuteOptions>({
     createFiscalPeriod: true,
@@ -394,9 +397,10 @@ export default function ImportReviewStep({
                         : isExisting
                           ? ', används redan'
                           : ''
+                    const name = voucherSeriesLabel(letter, seriesLabels)
                     return (
                       <SelectItem key={letter} value={letter}>
-                        {`Serie ${letter}${suffix}`}
+                        {`Serie ${letter}${name ? ` ${name}` : ''}${suffix}`}
                       </SelectItem>
                     )
                   })}
@@ -472,9 +476,10 @@ export default function ImportReviewStep({
                       : isExisting
                         ? ', används redan'
                         : ''
+                    const name = voucherSeriesLabel(letter, seriesLabels)
                     return (
                       <SelectItem key={letter} value={letter}>
-                        {`Serie ${letter}${suffix}`}
+                        {`Serie ${letter}${name ? ` ${name}` : ''}${suffix}`}
                       </SelectItem>
                     )
                   })}

components/settings/VoucherSeriesManager.tsx

@@ -1,11 +1,22 @@
 'use client'
 
 import { useTranslations } from 'next-intl'
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { Loader2 } from 'lucide-react'
 import { createClient } from '@/lib/supabase/client'
 import { useCompany } from '@/contexts/CompanyContext'
 import { Skeleton } from '@/components/ui/skeleton'
-import { SettingsGroup, SettingsRowNote } from '@/components/settings/SettingsRows'
+import { Button } from '@/components/ui/button'
+import { useToast } from '@/components/ui/use-toast'
+import {
+  SettingsGroup,
+  SettingsInput,
+  SettingsRow,
+  SettingsRowNote,
+} from '@/components/settings/SettingsRows'
+import { getErrorMessage } from '@/lib/errors/get-error-message'
+import { voucherSeriesLabel } from '@/lib/bookkeeping/voucher-series-resolver'
+import type { CompanySettings } from '@/types'
 
 interface VoucherSeries {
   voucher_series: string
@@ -14,15 +25,65 @@ interface VoucherSeries {
 }
 
 interface VoucherSeriesManagerProps {
-  defaultSeries?: string
+  settings: Pick<
+    CompanySettings,
+    'default_voucher_series' | 'default_voucher_series_per_source_type' | 'voucher_series_labels'
+  >
+  onSettingsUpdated: (settings: Partial<CompanySettings>) => void
 }
 
-/** Read-only list of the series that have actually been used. */
-export function VoucherSeriesManager({ defaultSeries }: VoucherSeriesManagerProps) {
+const SERIES_LETTER_RE = /^[A-Z]$/
+const NAME_MAX_LENGTH = 40
+
+/**
+ * The series this company uses, with a name per letter.
+ *
+ * Rows are the union of every series that has vouchers (voucher_sequences,
+ * including multi-character series such as FT or SKV carried over from a
+ * Fortnox or Bokio import), the letters configured as defaults, and the
+ * letters that already carry a name, so a freshly assigned series (L for
+ * löner, no voucher yet) can be named before its first verifikat.
+ *
+ * Only single-letter series can be named: those are the ones the pickers
+ * offer and the settings schema accepts. Imported multi-character series are
+ * listed with their highest number, as before, and cannot be picked for new
+ * vouchers anyway. The name is display only: it is what the pickers show
+ * next to the letter, with the Swedish preset as the fallback. The letter
+ * itself stays the identifier on every journal entry.
+ */
+export function VoucherSeriesManager({ settings, onSettingsUpdated }: VoucherSeriesManagerProps) {
   const t = useTranslations('settings_voucher_series')
   const { company } = useCompany()
+  const { toast } = useToast()
   const [series, setSeries] = useState<VoucherSeries[]>([])
   const [isLoading, setIsLoading] = useState(true)
+  const [isSaving, setIsSaving] = useState(false)
+
+  // The saved names, keyed by CONTENT rather than object identity. The
+  // settings hook revalidates on window focus and hands out a fresh object
+  // even when nothing changed; re-seeding the draft on that identity change
+  // would wipe whatever the user is typing. Serializing the filtered entries
+  // gives a key that only changes when a name actually changes.
+  const savedKey = useMemo(() => {
+    const entries: Array<[string, string]> = []
+    for (const [letter, name] of Object.entries(settings.voucher_series_labels ?? {})) {
+      if (SERIES_LETTER_RE.test(letter) && typeof name === 'string' && name.trim()) {
+        entries.push([letter, name.trim()])
+      }
+    }
+    entries.sort(([a], [b]) => a.localeCompare(b))
+    return JSON.stringify(entries)
+  }, [settings.voucher_series_labels])
+  const savedLabels = useMemo<Record<string, string>>(
+    () => Object.fromEntries(JSON.parse(savedKey) as Array<[string, string]>),
+    [savedKey],
+  )
+  const [draft, setDraft] = useState<Record<string, string>>(savedLabels)
+  // Re-seed only when a saved name actually changed (another form on the
+  // page saved, or the settings were refetched with different content).
+  useEffect(() => { setDraft(savedLabels) }, [savedLabels])
+
+  const defaultSeries = settings.default_voucher_series || 'A'
 
   const fetchSeries = useCallback(async () => {
     if (!company?.id) { setIsLoading(false); return }
@@ -38,41 +99,121 @@ export function VoucherSeriesManager({ defaultSeries }: VoucherSeriesManagerProp
 
   useEffect(() => { fetchSeries() }, [fetchSeries])
 
-  // Group by series letter, show the highest last_number
-  const grouped = series.reduce<Record<string, number>>((acc, s) => {
-    const existing = acc[s.voucher_series] || 0
-    acc[s.voucher_series] = Math.max(existing, s.last_number)
+  // Highest last_number per series across fiscal periods. Every series the
+  // ledger holds counts, whatever its shape: the number is the only place in
+  // the UI that shows how far an imported series has run.
+  const lastNumbers = useMemo(() => {
+    const acc: Record<string, number> = {}
+    for (const s of series) {
+      const key = s.voucher_series?.trim()
+      if (!key) continue
+      acc[key] = Math.max(acc[key] || 0, s.last_number)
+    }
     return acc
-  }, {})
+  }, [series])
 
-  const seriesEntries = Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b))
+  const rows = useMemo(() => {
+    const set = new Set<string>(Object.keys(lastNumbers))
+    const considerLetter = (value: unknown) => {
+      if (typeof value === 'string' && SERIES_LETTER_RE.test(value)) set.add(value)
+    }
+    considerLetter(defaultSeries)
+    Object.values(settings.default_voucher_series_per_source_type ?? {}).forEach(considerLetter)
+    Object.keys(savedLabels).forEach(considerLetter)
+    return Array.from(set).sort((a, b) => a.localeCompare(b))
+  }, [lastNumbers, defaultSeries, settings.default_voucher_series_per_source_type, savedLabels])
+
+  const nameableLetters = useMemo(() => rows.filter((s) => SERIES_LETTER_RE.test(s)), [rows])
+
+  const hasChanges = nameableLetters.some(
+    (letter) => (draft[letter] ?? '').trim() !== (savedLabels[letter] ?? ''),
+  )
+
+  const handleSave = async () => {
+    setIsSaving(true)
+    try {
+      // Every nameable letter is sent, empty string meaning "clear this
+      // name"; the schema strips empties before storing.
+      const payload: Record<string, string> = {}
+      for (const letter of nameableLetters) payload[letter] = (draft[letter] ?? '').trim()
+      const res = await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ voucher_series_labels: payload }),
+      })
+      const json = await res.json()
+      if (!res.ok) {
+        toast({
+          title: t('per_account_save_failed'),
+          description: getErrorMessage(json, { context: 'settings', statusCode: res.status }),
+          variant: 'destructive',
+        })
+        return
+      }
+      const stored: Record<string, string> = {}
+      for (const [letter, name] of Object.entries(payload)) if (name) stored[letter] = name
+      onSettingsUpdated({ voucher_series_labels: stored })
+      toast({ title: t('names_saved_title'), description: t('names_saved_description') })
+    } catch (err) {
+      toast({
+        title: t('per_account_save_failed'),
+        description: getErrorMessage(err, { context: 'settings' }),
+        variant: 'destructive',
+      })
+    } finally {
+      setIsSaving(false)
+    }
+  }
 
   return (
-    <SettingsGroup label={t('heading')} help={t('footnote')}>
+    <SettingsGroup label={t('heading')} help={`${t('name_help')} ${t('footnote')}`}>
       {isLoading ? (
         <div className="space-y-2 px-1 py-3">
           <Skeleton className="h-4 w-32" />
           <Skeleton className="h-4 w-24" />
         </div>
-      ) : seriesEntries.length === 0 ? (
-        <p className="px-1 py-3 text-sm text-muted-foreground">
-          {t('empty_state', { series: defaultSeries || 'A' })}
-        </p>
       ) : (
-        seriesEntries.map(([letter, lastNum]) => (
-          <div key={letter} className="flex items-center gap-3 border-b border-border px-1 py-3">
-            <span className="text-sm font-medium tabular-nums">
-              {t('series_prefix')} {letter}
-            </span>
-            {/* The default marker is a normal state: muted text, not a chip. */}
-            {letter === (defaultSeries || 'A') && (
-              <SettingsRowNote>{t('default_badge')}</SettingsRowNote>
-            )}
-            <span className="ml-auto shrink-0 text-sm text-muted-foreground tabular-nums">
-              {t('latest_number')}: {lastNum}
-            </span>
+        <>
+          {rows.map((seriesKey, i) => {
+            const lastNum = lastNumbers[seriesKey]
+            const nameable = SERIES_LETTER_RE.test(seriesKey)
+            // Placeholder shows the preset the name would fall back to, so an
+            // empty field never reads as "this series has no meaning".
+            const preset = nameable ? voucherSeriesLabel(seriesKey) : ''
+            return (
+              <SettingsRow
+                key={seriesKey}
+                label={`${t('series_prefix')} ${seriesKey}`}
+                htmlFor={nameable ? `series-name-${seriesKey}` : undefined}
+                borderless={i === rows.length - 1}
+              >
+                {nameable && (
+                  <SettingsInput
+                    id={`series-name-${seriesKey}`}
+                    value={draft[seriesKey] ?? ''}
+                    maxLength={NAME_MAX_LENGTH}
+                    placeholder={preset || t('name_placeholder')}
+                    aria-label={`${t('name_column')} ${seriesKey}`}
+                    onChange={(e) => setDraft((prev) => ({ ...prev, [seriesKey]: e.target.value }))}
+                    className="w-full md:w-64"
+                  />
+                )}
+                {seriesKey === defaultSeries && (
+                  <SettingsRowNote>{t('default_badge')}</SettingsRowNote>
+                )}
+                <span className="ml-auto shrink-0 text-sm text-muted-foreground tabular-nums">
+                  {lastNum != null ? `${t('latest_number')}: ${lastNum}` : t('no_vouchers_yet')}
+                </span>
+              </SettingsRow>
+            )
+          })}
+          <div className="flex justify-end px-1 pt-4">
+            <Button type="button" size="sm" onClick={handleSave} disabled={!hasChanges || isSaving}>
+              {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {t('save_names')}
+            </Button>
           </div>
-        ))
+        </>
       )}
     </SettingsGroup>
   )

components/settings/VoucherSeriesPerCashAccountForm.tsx

@@ -7,18 +7,19 @@ import { useToast } from '@/components/ui/use-toast'
 import { SettingsGroup, SettingsRow, SettingsSelect } from '@/components/settings/SettingsRows'
 import { useCashAccounts } from '@/lib/reference-data/hooks'
 import { getErrorMessage } from '@/lib/errors/get-error-message'
-import { VOUCHER_SERIES_PRESETS } from '@/lib/bookkeeping/voucher-series-resolver'
+import { buildVoucherSeriesOptions } from '@/lib/bookkeeping/voucher-series-resolver'
 import type { CashAccount, CompanySettings } from '@/types'
 
 // Sentinel for "no override" in the <select>: an empty option value renders
 // as the placeholder in some browsers, so use an explicit token instead.
 const FOLLOW_DEFAULT = '__default__'
 
-const SERIES_LETTER_RE = /^[A-Z]$/
-
 interface Props {
-  /** Company settings, for the letters the company has already configured. */
-  settings: Pick<CompanySettings, 'default_voucher_series' | 'default_voucher_series_per_source_type'>
+  /** Company settings, for the letters the company has already configured and named. */
+  settings: Pick<
+    CompanySettings,
+    'default_voucher_series' | 'default_voucher_series_per_source_type' | 'voucher_series_labels'
+  >
 }
 
 /** "Företagskort (1931)" or the bare ledger account when the row has no name. */
@@ -47,20 +48,21 @@ export function VoucherSeriesPerCashAccountForm({ settings }: Props) {
 
   // Presets first, then any configured or already-assigned letter the presets
   // do not cover, so a Select never renders blank on a value it does not offer.
-  const seriesOptions = useMemo(() => {
-    const preset = new Set(VOUCHER_SERIES_PRESETS.map((p) => p.letter))
-    const extras = [
+  // Names come from the company's own voucher_series_labels, presets as fallback.
+  const seriesOptions = useMemo(
+    () =>
+      buildVoucherSeriesOptions(settings.voucher_series_labels, [
+        settings.default_voucher_series,
+        ...Object.values(settings.default_voucher_series_per_source_type ?? {}),
+        ...cashAccounts.map((a) => a.voucher_series),
+      ]),
+    [
+      settings.voucher_series_labels,
       settings.default_voucher_series,
-      ...Object.values(settings.default_voucher_series_per_source_type ?? {}),
-      ...cashAccounts.map((a) => a.voucher_series),
-    ]
-      .filter((v): v is string => typeof v === 'string' && SERIES_LETTER_RE.test(v) && !preset.has(v))
-    const uniqueExtras = Array.from(new Set(extras)).sort()
-    return [
-      ...VOUCHER_SERIES_PRESETS,
-      ...uniqueExtras.map((letter) => ({ letter, label: '' })),
-    ]
-  }, [settings.default_voucher_series, settings.default_voucher_series_per_source_type, cashAccounts])
+      settings.default_voucher_series_per_source_type,
+      cashAccounts,
+    ],
+  )
 
   /** PATCH one account's override, then refresh the shared cash-account cache. */
   const handleChange = async (account: CashAccount, value: string) => {

components/settings/VoucherSeriesPerSourceTypeForm.tsx

@@ -13,11 +13,9 @@ import {
 } from '@/components/settings/SettingsRows'
 import { cn } from '@/lib/utils'
 import { getErrorMessage } from '@/lib/errors/get-error-message'
-import { VOUCHER_SERIES_PRESETS } from '@/lib/bookkeeping/voucher-series-resolver'
+import { buildVoucherSeriesOptions } from '@/lib/bookkeeping/voucher-series-resolver'
 import type { CompanySettings, JournalEntrySourceType } from '@/types'
 
-const SERIES_LETTER_RE = /^[A-Z]$/
-
 // Subset of source_types presented to the user. The DB column accepts every
 // JournalEntrySourceType, but several values (storno, correction, etc.) are
 // derived from the original entry's series and would surprise the user if
@@ -89,22 +87,22 @@ export function VoucherSeriesPerSourceTypeForm({ settings, onSettingsUpdated }:
   // the draft so a non-preset letter stays selectable after the user changes
   // that row away from it (otherwise a misclick could not be undone without
   // a reload) and so a letter that lands in settings after mount is offered.
-  // A free A-Z list would let a typo start an undocumented series.
-  const seriesOptions = useMemo(() => {
-    const preset = new Set(VOUCHER_SERIES_PRESETS.map((p) => p.letter))
-    const extras = [
+  // A free A-Z list would let a typo start an undocumented series. Names
+  // come from the company's own voucher_series_labels, presets as fallback.
+  const seriesOptions = useMemo(
+    () =>
+      buildVoucherSeriesOptions(settings.voucher_series_labels, [
+        settings.default_voucher_series,
+        ...Object.values(settings.default_voucher_series_per_source_type ?? {}),
+        ...Object.values(draft),
+      ]),
+    [
+      settings.voucher_series_labels,
       settings.default_voucher_series,
-      ...Object.values(settings.default_voucher_series_per_source_type ?? {}),
-      ...Object.values(draft),
-    ].filter(
-      (v): v is string => typeof v === 'string' && SERIES_LETTER_RE.test(v) && !preset.has(v),
-    )
-    const uniqueExtras = Array.from(new Set(extras)).sort()
-    return [
-      ...VOUCHER_SERIES_PRESETS,
-      ...uniqueExtras.map((letter) => ({ letter, label: '' })),
-    ]
-  }, [settings.default_voucher_series, settings.default_voucher_series_per_source_type, draft])
+      settings.default_voucher_series_per_source_type,
+      draft,
+    ],
+  )
 
   const handleChange = (sourceType: JournalEntrySourceType, value: string) => {
     setDraft((prev) => ({ ...prev, [sourceType]: value }))

components/settings/sections/BookkeepingSettingsContent.tsx

@@ -11,7 +11,7 @@ import { FiscalYearsManager } from '@/components/settings/FiscalYearsManager'
 import { VoucherSeriesManager } from '@/components/settings/VoucherSeriesManager'
 import { VoucherSeriesPerSourceTypeForm } from '@/components/settings/VoucherSeriesPerSourceTypeForm'
 import { VoucherSeriesPerCashAccountForm } from '@/components/settings/VoucherSeriesPerCashAccountForm'
-import { applyDefaultSeriesToMap } from '@/lib/bookkeeping/voucher-series-resolver'
+import { applyDefaultSeriesToMap, voucherSeriesLabel } from '@/lib/bookkeeping/voucher-series-resolver'
 import { DimensionsToggle } from '@/components/settings/DimensionsToggle'
 import { MileageToggle } from '@/components/settings/MileageToggle'
 import { SalesOrdersToggle } from '@/components/settings/SalesOrdersToggle'
@@ -152,11 +152,15 @@ export function BookkeepingSettingsContent() {
               defaultValue={settings.default_voucher_series || 'A'}
               className="font-mono"
             >
-              {SERIES_OPTIONS.map((letter) => (
-                <option key={letter} value={letter}>
-                  {letter}
-                </option>
-              ))}
+              {SERIES_OPTIONS.map((letter) => {
+                // Same name the pickers show: the company's own, else the preset.
+                const label = voucherSeriesLabel(letter, settings.voucher_series_labels)
+                return (
+                  <option key={letter} value={letter}>
+                    {label ? `${letter}  ${label}` : letter}
+                  </option>
+                )
+              })}
             </SettingsSelect>
           </SettingsRow>
         </SettingsGroup>
@@ -173,7 +177,7 @@ export function BookkeepingSettingsContent() {
 
       <VoucherSeriesPerCashAccountForm settings={settings} />
 
-      <VoucherSeriesManager defaultSeries={settings.default_voucher_series || 'A'} />
+      <VoucherSeriesManager settings={settings} onSettingsUpdated={updateSettings} />
 
       <SettingsGroup label={t('group_automation')}>
         {/* Periodisering is a review-gated wizard step, not an automation