Files
accounted/components/onboarding/NewUserChecklist.tsx
T
Jakob Wennberg c74b19df1b Accounted rebrand + swarm-skill cleanup + bank-reconciliation fixes (#643)
* feat(reconciliation): close the bank-feed loop on voucher links and re-tag mis-typed opening balances

Two related fixes to bank reconciliation correctness:

1. Auto-reconcile on voucher link. Linking an invoice or supplier invoice to
   an existing voucher previously advanced only the invoice — the bank
   transaction that paid it kept sitting in the Transactions inbox with a null
   journal_entry_id. linkInvoiceToVoucher / linkSupplierInvoiceToVoucher now
   call autoReconcileTransactionForLinkedVoucher (lib/reconciliation), which
   links the bank transaction to the same verifikat when exactly one unbooked
   line matches it. Best-effort and post-commit: a failure here never fails the
   link. The result surfaces reconciledTransactionId; the inbox row leaves the
   list and the UI shows link_success_tx_reconciled.

2. Re-tag mis-typed opening balances. getReconciliationStatus and the GL-line
   matching RPCs identify a cash account's ingående balans solely by
   journal_entries.source_type='opening_balance'. Companies migrated from other
   systems often booked the bank IB as an ordinary voucher (source_type
   'import' or 'manual'), so it was never excluded and surfaced as a phantom
   reconciliation difference equal to the opening balance. Adds:
   - migration mark_entry_as_opening_balance: a GUC-gated carve-out in the
     immutability trigger plus a SECURITY DEFINER RPC that validates the entry
     (balance-sheet lines only, dated on a fiscal-period boundary), flips the
     source_type, and writes an audit row — no blanket data sweep.
   - POST /api/reconciliation/bank/mark-opening-balance + MarkOpeningBalanceSchema.
   - BankReconciliationView action to trigger it from the IB diff.

The gnubok_create_voucher executor now accepts a typed is_opening_balance flag
and derives source_type='opening_balance' only after validating class 1/2 lines
on the period start, so new IBs land correctly typed.

Covered by lib/reconciliation auto-reconcile tests, voucher-executors tests,
and a mark-entry-as-opening-balance pg-real test.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore: rebrand gnubok → Accounted and prune swarm agent skills

Product rebrand and skills housekeeping. No runtime behaviour change.

Rebrand: replace user-visible "gnubok" with "Accounted" across docs, READMEs,
in-code comments, doc-site content, MCP skill/resource prose, and the
gnubok-mcp package description. The MCP resource URI scheme is moved gnubok://
→ Accounted:// consistently across resource registrations, the event-type
comment, and the resource/skill tests. Deliberately preserved as stable
identifiers (NOT rebranded): the gnubok-company-id cookie, gnubok_sk_ / gnubok_inv_
token prefixes, the gnubok-mcp npm bridge name, and the AGI <gem:Programnamn>
value (kept 'gnubok' per its source comment — it is the software identifier sent
to Skatteverket and must not churn across visual rebrands).

Skills: remove the 27 swarm-* agent SKILL.md atoms (no longer used; already
absent from the agent_atom_registry in prod), refresh the remaining skill docs,
add the .claude/rules/ path-scoped rule set, and regenerate the
seed_agent_atom_bodies migration + .skill-body-manifest.json via
`npm run skills:generate` so the DB-backed skill bodies match the trimmed set.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-03 10:52:01 +02:00

360 lines
18 KiB
TypeScript

'use client'
import Link from 'next/link'
import { useTranslations } from 'next-intl'
import {
ArrowRight,
CheckCircle2,
FileCheck,
FileText,
Landmark,
ArrowRightLeft,
MessageCircle,
ShieldCheck,
} from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { cn } from '@/lib/utils'
import { ENABLED_EXTENSION_IDS } from '@/lib/extensions/_generated/enabled-extensions'
import { getBranding } from '@/lib/branding/service'
const branding = getBranding()
interface NewUserChecklistProps {
onFreshStart: () => void
className?: string
/**
* Per-step completion flags. The render flips each step from CTA to a
* compact "done" card when its corresponding flag is true so the user
* sees their progress without having to remember what they finished.
*/
hasBookkeepingImported?: boolean
hasBankConnected?: boolean
hasSkatteverketConnected?: boolean
hasAgentBuilt?: boolean
}
export default function NewUserChecklist({
onFreshStart,
className,
hasBookkeepingImported,
hasBankConnected,
hasSkatteverketConnected,
hasAgentBuilt,
}: NewUserChecklistProps) {
const t = useTranslations('new_user_checklist')
const hasMigration = ENABLED_EXTENSION_IDS.has('arcim-migration')
const hasBanking = ENABLED_EXTENSION_IDS.has('enable-banking')
const hasSkatteverket = ENABLED_EXTENSION_IDS.has('skatteverket')
return (
<div className={cn('min-h-[75vh] flex flex-col items-center justify-center px-4 sm:px-0 stagger-enter', className)}>
<div className="w-full max-w-2xl">
{/* Header — centered welcome. Data-import steps lead; building the
assistant is the last step so a user coming from another system
brings their books in first. */}
<div className="text-center mb-8 md:mb-12">
<h1 className="font-display text-2xl md:text-3xl tracking-tight">
{t('welcome', { appName: branding.appName.toLowerCase() })}
</h1>
<p className="text-muted-foreground text-sm md:text-base leading-relaxed max-w-md mx-auto mt-3">
{t('intro')}
</p>
</div>
{/* Step 1: Migrate bookkeeping */}
<div className="mb-6 md:mb-8">
<div className="flex items-center gap-3 mb-4">
<span className={cn(
'h-7 w-7 rounded-full flex items-center justify-center text-xs font-semibold flex-shrink-0 tabular-nums',
hasBookkeepingImported
? 'bg-secondary text-foreground'
: 'bg-foreground text-background',
)}>
{hasBookkeepingImported ? <CheckCircle2 className="h-4 w-4" /> : '1'}
</span>
<h2 className="font-display text-base tracking-tight">
{t('step1_title')}
</h2>
</div>
{hasBookkeepingImported ? (
<div className="ml-0 sm:ml-10 p-4 sm:p-5 rounded-lg border border-border bg-secondary/40">
<p className="text-sm text-foreground font-medium">{t('step1_done_title')}</p>
<p className="text-xs sm:text-sm text-muted-foreground mt-1">{t('step1_done_description')}</p>
</div>
) : (
<div className="space-y-3 ml-0 sm:ml-10">
{hasMigration && (
<Link
href="/import?mode=migration"
className="group block p-4 sm:p-5 rounded-lg border border-border bg-secondary/40 hover:bg-secondary/60 hover:border-primary/40 transition-colors duration-150"
>
<div className="flex items-start gap-3 sm:gap-4">
<div className="p-2 sm:p-2.5 rounded-lg bg-primary/[0.08] group-hover:bg-primary/[0.12] transition-colors flex-shrink-0">
<ArrowRightLeft className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
</div>
<div className="flex-1 min-w-0">
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
{t('migrate_title')}
</p>
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed underline decoration-foreground/20 underline-offset-2">
{t('migrate_description')}
</p>
<div className="flex flex-wrap gap-1.5 sm:gap-2 mt-2.5 sm:mt-3">
{([
{ name: 'Fortnox', logo: '/logos/fortnox.svg' },
{ name: 'Visma', logo: '/logos/visma.jpeg' },
{ name: 'Bokio', logo: '/logos/bokio.png' },
{ name: 'Björn Lundén', logo: '/logos/bjornlunden.png' },
{ name: 'Briox', logo: '/logos/Briox_logo.png' },
{ name: 'SIE4-fil', logo: null },
] as const).map(provider => (
<div key={provider.name} className="flex items-center gap-1 sm:gap-1.5 rounded border border-border bg-muted/30 px-1.5 sm:px-2 py-0.5 sm:py-1">
{provider.logo ? (
<img src={provider.logo} alt={provider.name} className="h-3.5 w-3.5 sm:h-4 sm:w-4 shrink-0 rounded-sm object-contain" />
) : (
<FileText className="h-3.5 w-3.5 sm:h-4 sm:w-4 shrink-0 text-muted-foreground" />
)}
<span className="text-[10px] sm:text-[11px] font-medium text-muted-foreground">{provider.name}</span>
</div>
))}
</div>
</div>
<ArrowRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-primary/60 mt-1 flex-shrink-0 transition-colors" />
</div>
</Link>
)}
<Link
href="/import?mode=sie"
className="group block p-4 sm:p-5 rounded-lg border border-border hover:border-primary/40 hover:bg-primary/[0.02] transition-colors duration-150"
>
<div className="flex items-start gap-3 sm:gap-4">
<div className="p-2 sm:p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
<FileText className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-hover:text-primary transition-colors" />
</div>
<div className="flex-1 min-w-0">
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
{t('sie_title')}
</p>
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed">
{t('sie_description')}
</p>
</div>
<ArrowRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-primary/60 mt-1 flex-shrink-0 transition-colors" />
</div>
</Link>
</div>
)}
</div>
{/* Step 2: Connect bank */}
<div className="mb-6 md:mb-8">
<div className="flex items-center gap-3 mb-4">
<span className={cn(
'h-7 w-7 rounded-full flex items-center justify-center text-xs font-semibold flex-shrink-0 tabular-nums',
hasBankConnected
? 'bg-secondary text-foreground'
: 'bg-foreground text-background',
)}>
{hasBankConnected ? <CheckCircle2 className="h-4 w-4" /> : '2'}
</span>
<h2 className="font-display text-base tracking-tight">
{t('step2_title')}
</h2>
</div>
<div className="ml-0 sm:ml-10">
{hasBankConnected ? (
<div className="p-4 sm:p-5 rounded-lg border border-border bg-secondary/40">
<p className="text-sm text-foreground font-medium">Bank kopplad</p>
<p className="text-xs sm:text-sm text-muted-foreground mt-1">Transaktioner synkas automatiskt.</p>
</div>
) : (
<Link
href={hasBanking ? '/import?mode=psd2' : '/import?mode=bank'}
className="group block p-4 sm:p-5 rounded-lg border border-border hover:border-primary/40 hover:bg-primary/[0.02] transition-colors duration-150"
>
<div className="flex items-start gap-3 sm:gap-4">
<div className="p-2 sm:p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
<Landmark className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-hover:text-primary transition-colors" />
</div>
<div className="flex-1 min-w-0">
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
{t('bank_title')}
</p>
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed">
{hasBanking
? t('bank_description_psd2')
: t('bank_description_file')}
</p>
</div>
<ArrowRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-primary/60 mt-1 flex-shrink-0 transition-colors" />
</div>
</Link>
)}
</div>
</div>
{/* Step 3: Connect Skatteverket — only when the extension is enabled.
Optional: connecting here lets Accounted submit moms + AGI and read
skattekonto saldo, but the user can skip and do it later from
/settings/skatteverket. The OAuth flow returns to the dashboard
via return_to=/, which clears the gate via the same path the
user would take naturally. */}
{hasSkatteverket && (
<div className="mb-8 md:mb-12">
<div className="flex items-center gap-3 mb-4">
<span className={cn(
'h-7 w-7 rounded-full flex items-center justify-center text-xs font-semibold flex-shrink-0 tabular-nums',
hasSkatteverketConnected
? 'bg-secondary text-foreground'
: 'bg-foreground text-background',
)}>
{hasSkatteverketConnected
? <CheckCircle2 className="h-4 w-4" />
: '3'}
</span>
<h2 className="font-display text-base tracking-tight">
{t('step3_title')}
</h2>
<span className="text-xs text-muted-foreground">{t('optional_suffix')}</span>
</div>
<div className="ml-0 sm:ml-10">
{hasSkatteverketConnected ? (
<div className="block p-4 sm:p-5 rounded-lg border border-border bg-secondary/40">
<div className="flex items-start gap-3 sm:gap-4">
<div className="p-2 sm:p-2.5 rounded-lg bg-background flex-shrink-0">
<FileCheck className="h-4 w-4 sm:h-5 sm:w-5 text-foreground" />
</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-sm sm:text-base text-foreground">
{t('skatteverket_connected_title')}
</p>
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed">
{t('skatteverket_connected_description')}
</p>
</div>
</div>
</div>
) : (
// eslint-disable-next-line @next/next/no-html-link-for-pages -- /api route, not a Next page
<a
// Plain anchor — the authorize endpoint 302-redirects to
// skatteverket.se; <Link> would route via Next's client
// router which doesn't follow cross-origin redirects.
href="/api/extensions/ext/skatteverket/authorize?return_to=/"
className="group block p-4 sm:p-5 rounded-lg border border-border hover:border-primary/40 hover:bg-primary/[0.02] transition-colors duration-150"
>
<div className="flex items-start gap-3 sm:gap-4">
<div className="p-2 sm:p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
<FileCheck className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-hover:text-primary transition-colors" />
</div>
<div className="flex-1 min-w-0">
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
{t('skatteverket_connect_title')}
</p>
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed">
{t('skatteverket_connect_description', { appName: branding.appName.toLowerCase() })}
</p>
</div>
<ArrowRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-primary/60 mt-1 flex-shrink-0 transition-colors" />
</div>
</a>
)}
</div>
</div>
)}
{/* Build the assistant — always the last step, so a user migrating
from another system brings their books in first. */}
<div className="mb-8 md:mb-12">
<div className="flex items-center gap-3 mb-4">
<span className={cn(
'h-7 w-7 rounded-full flex items-center justify-center text-xs font-semibold flex-shrink-0 tabular-nums',
hasAgentBuilt
? 'bg-secondary text-foreground'
: 'bg-foreground text-background',
)}>
{hasAgentBuilt ? <CheckCircle2 className="h-4 w-4" /> : (hasSkatteverket ? '4' : '3')}
</span>
<h2 className="font-display text-base tracking-tight">
Skapa din assistent
</h2>
</div>
<div className="ml-0 sm:ml-10">
{hasAgentBuilt ? (
<div className="p-4 sm:p-5 rounded-lg border border-border bg-secondary/40">
<div className="flex items-start gap-3 sm:gap-4">
<div className="p-2 sm:p-2.5 rounded-lg bg-background flex-shrink-0">
<MessageCircle className="h-4 w-4 sm:h-5 sm:w-5 text-foreground" />
</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-sm sm:text-base text-foreground">
Assistenten är klar
</p>
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed">
Du kan börja chatta direkt. Justera tonalitet och kunskap i Inställningar &gt; Assistentens minne.
</p>
</div>
</div>
</div>
) : (
<Link
href="/onboarding/agent"
className="group block p-4 sm:p-5 rounded-lg border border-border hover:border-primary/40 hover:bg-primary/[0.02] transition-colors duration-150"
>
<div className="flex items-start gap-3 sm:gap-4">
<div className="p-2 sm:p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
<MessageCircle className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-hover:text-primary transition-colors" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
Bygg din bokföringsassistent
</p>
<Badge variant="secondary" className="uppercase tracking-wider">Beta</Badge>
</div>
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed">
Några frågor om din verksamhet kalibrerar tonalitet, signatur och vad assistenten kan. Ju mer du delar, desto bättre förstår den dig.
</p>
</div>
<ArrowRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-primary/60 mt-1 flex-shrink-0 transition-colors" />
</div>
</Link>
)}
</div>
</div>
{/* Escape hatch */}
<div className="space-y-5">
<div className="flex items-center gap-4">
<div className="flex-1 h-px bg-border/60" />
<span className="text-xs text-muted-foreground">{t('or_separator')}</span>
<div className="flex-1 h-px bg-border/60" />
</div>
<div className="text-center">
<button
onClick={onFreshStart}
className="text-sm text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1.5 group"
>
{t('fresh_start')}
<ArrowRight className="h-3.5 w-3.5 group-hover:translate-x-0.5 transition-transform" />
</button>
</div>
<div className="flex items-center justify-center gap-2 pt-2">
<ShieldCheck className="h-3.5 w-3.5 text-muted-foreground/40" />
<p className="text-xs text-muted-foreground/50">
{t('security_note')}
</p>
</div>
</div>
</div>
</div>
)
}