feat(supplier-invoices): "Vem betalade?" control replaces the paid privately switch and books an open utlägg (#2362)

The supplier-invoice form asks who paid with the same control as the
Underlag pane (Företaget / Jag, privat / En anställd / Ingen ännu) instead
of its own switch under Förval. A person paying is an utlägg: the route
hands the invoice to registerExpenseClaim with the invoice's kontering as
the claim's lines, so the verifikat and the expense_claims row come from
the same writer as the Underlag pane, the person shows up under "Betala ut
utlägg" on Hem and the bank matcher closes the debt. Employees book on
2820 with employee_id; the owner's blank name falls back to the shared
label so Hem groups one person.

Also routes a person-paid inbox document through the core route with
inbox_item_id: the extension's convert endpoint never read
paid_with_private_funds, so the old switch was silently dropped whenever
a receipt was attached. The second entry generator, the Förval switch,
the outline "Registrera & markera som betald" button and the duplicated
owner/employee picker are removed; PayerChoiceSelect and the claimant
fields move to components/expenses so core and the extension share them.

Closes #2332


Claude-Session: https://claude.ai/code/session_01LvMaHcTnwAfxzgYD1fGYX1

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

components/extensions/general/InvoiceInboxWorkspace.tsx

@@ -23,7 +23,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { useToast } from '@/components/ui/use-toast'
 import {
   Inbox,
@@ -76,6 +75,7 @@ import {
 } from '@/lib/documents/inbox-kind'
 import BookDirectlyDialog from '@/components/extensions/general/BookDirectlyDialog'
 import RegisterExpenseDialog, { type ExpensePayer } from '@/components/extensions/general/RegisterExpenseDialog'
+import { PayerChoiceSelect, type PayerChoice } from '@/components/expenses/PayerChoiceSelect'
 import NewSupplierInvoiceDialog from '@/components/supplier-invoices/NewSupplierInvoiceDialog'
 import BulkBookInboxDialog from '@/components/extensions/general/BulkBookInboxDialog'
 // InboxCustomDomainDialog (egen domän) is built but gated off: see
@@ -3092,75 +3092,6 @@ function ProposedBooking({
   )
 }
 
-// ── Vem betalade? ────────────────────────────────────────────
-
-/**
- * How an unmatched underlag gets booked, phrased as who paid for it.
- * 'company' → match the bank line; 'unpaid' → supplier invoice (2440);
- * 'owner' / 'employee' → utlägg against the person's liability account.
- */
-export type PayerChoice = 'company' | 'unpaid' | ExpensePayer
-
-const PAYER_ORDER: PayerChoice[] = ['company', 'owner', 'employee', 'unpaid']
-
-/**
- * The "Vem betalade?" control: a compact select so the rail keeps its
- * primary button above the fold, with the chosen answer's one-line
- * consequence under it. Each option in the list carries the same help so
- * the choice is made with the consequence visible, not after.
- */
-export function PayerChoiceSelect({
-  value,
-  onChange,
-  accountingMethod,
-}: {
-  value: PayerChoice
-  onChange: (next: PayerChoice) => void
-  accountingMethod: AccountingMethod
-}) {
-  const t = useTranslations('inbox_workspace')
-  // An enskild firma owner makes an egen insättning, not a loan to the
-  // company: no debt, nothing to pay out, so the help line says so.
-  const isEf = useCompanyOptional()?.company?.entity_type === 'enskild_firma'
-  // Företaget carries no help line: the button under it ("Matcha mot
-  // transaktion") already says what happens. The other answers name the
-  // liability the company takes on, which is the consequence worth reading.
-  const helpKey = (choice: PayerChoice): string | null =>
-    choice === 'company'
-      ? null
-      : choice === 'owner' && isEf
-        ? 'payer_help_owner_ef'
-        : choice === 'unpaid' && accountingMethod === 'cash'
-          ? 'payer_help_unpaid_cash'
-          : `payer_help_${choice}`
-  const selectedHelp = helpKey(value)
-  return (
-    <div className="space-y-1.5">
-      <p className="text-[13px] font-medium">{t('payer_question')}</p>
-      <Select value={value} onValueChange={(next) => onChange(next as PayerChoice)}>
-        <SelectTrigger aria-label={t('payer_question')} className="h-9 text-[13px]">
-          {/* Explicit children: the items render label + help, and the
-              trigger must show the label alone. */}
-          <SelectValue>{t(`payer_${value}`)}</SelectValue>
-        </SelectTrigger>
-        {/* Match the trigger width so the two-line options wrap inside the rail
-            instead of spilling over the document viewer. */}
-        <SelectContent align="start" className="w-[var(--radix-select-trigger-width)]">
-          {PAYER_ORDER.map((choice) => (
-            <SelectItem key={choice} value={choice} className="py-2">
-              <span className="block text-[13px]">{t(`payer_${choice}`)}</span>
-              {helpKey(choice) && (
-                <span className="block text-xs text-muted-foreground">{t(helpKey(choice)!)}</span>
-              )}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      {selectedHelp && <p className="text-xs text-muted-foreground">{t(selectedHelp)}</p>}
-    </div>
-  )
-}
-
 // ── Fields rail ──────────────────────────────────────────────
 
 function FieldsRail({