Jakob Wennberg
170b2722d6
* feat(import): the Din historia reveal after a successful SIE import Fourth slice of the activation concept, stacked on the theater (#1471). When the theater ran, the result step's success header becomes the reveal: the settled constellation beside the personalized story ({years} år av historia, verifikat/konton/motparter, the balance tie-out) and the bank bridge ("Historiken är på plats. Det som saknas är nuet: banken.") deep-linking into the bank connect flow. Honesty guards from the adversarial pass: the reveal requires actually imported entries (an opening-balances-only run keeps the plain header), the balance claim is suppressed when unbalanced vouchers were skipped, and sandbox hides the bank bridge (live connections are stripped from /import there). Failures and theater-less successes render the exact previous header + stats grid. The canvas is extracted to a shared TheaterCanvas (build mode driven by the narration timeline via an imperative handle; settled mode for the reveal: everything born, camera home, breathing only). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(import): tame the constellation labels against real-world data Real BAS names are paragraph-length and real files cluster in one class region, which piled fifteen full labels into mush (founder screenshot, Arcim Technology import). Labels now truncate hard (24/16 chars), only the five heaviest accounts and counterparties carry labels, spread and radius widen within a bucket, and a greedy per-frame collision pass skips any label that would overlap one already drawn (importance order: hub, buckets, heaviest first). The reveal also drops its meta line: less text, the story is the headline + stats + bridge. 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>
481 lines
20 KiB
TypeScript
481 lines
20 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useTranslations } from 'next-intl'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import {
|
|
CheckCircle,
|
|
XCircle,
|
|
AlertCircle,
|
|
FileText,
|
|
ExternalLink,
|
|
RotateCcw,
|
|
Info,
|
|
Undo2,
|
|
} from 'lucide-react'
|
|
import {
|
|
DestructiveConfirmDialog,
|
|
useDestructiveConfirm,
|
|
} from '@/components/ui/destructive-confirm-dialog'
|
|
import { formatCurrency } from '@/lib/utils'
|
|
import { useCompany } from '@/contexts/CompanyContext'
|
|
import { ENABLED_EXTENSION_IDS } from '@/lib/extensions/_generated/enabled-extensions'
|
|
import TheaterCanvas from '@/components/import/TheaterCanvas'
|
|
import type { ImportPreview, ImportResult } from '@/lib/import/types'
|
|
import type { TheaterModel } from '@/lib/import/theater-model'
|
|
|
|
interface ImportResultStepProps {
|
|
result: ImportResult
|
|
onNewImport: () => void
|
|
onUndo?: (importId: string) => Promise<void> | void
|
|
/** When the theater ran, the reveal replaces the plain success header:
|
|
* the settled constellation beside the personalized story + the bank
|
|
* bridge. Absent (failure, oversized file, parse miss) = plain header. */
|
|
preview?: ImportPreview | null
|
|
theaterModel?: TheaterModel | null
|
|
}
|
|
|
|
export default function ImportResultStep({
|
|
result,
|
|
onNewImport,
|
|
onUndo,
|
|
preview = null,
|
|
theaterModel = null,
|
|
}: ImportResultStepProps) {
|
|
const t = useTranslations('import')
|
|
const { dialogProps, confirm } = useDestructiveConfirm()
|
|
const { isSandbox } = useCompany()
|
|
const hasBanking = ENABLED_EXTENSION_IDS.has('enable-banking')
|
|
// The reveal only tells a story that is true: it needs the theater model,
|
|
// the preview, and actual imported entries (an opening-balances-only run
|
|
// must not claim "history in place" over an untouched constellation).
|
|
const showReveal =
|
|
result.success && !!theaterModel && !!preview && result.journalEntriesCreated > 0
|
|
|
|
const handleUndoClick = async () => {
|
|
if (!result.importId || !onUndo) return
|
|
const ok = await confirm({
|
|
title: 'Ångra hela importen?',
|
|
description: `Detta raderar ${result.journalEntriesCreated} verifikation${result.journalEntriesCreated === 1 ? '' : 'er'} och rensar ingående balanser från den här importen. Bifogade dokument blir okopplade men finns kvar.`,
|
|
confirmLabel: 'Ångra import',
|
|
})
|
|
if (!ok) return
|
|
await onUndo(result.importId)
|
|
}
|
|
const hasErrors = result.errors.length > 0
|
|
const skipped = result.details?.skippedVouchers
|
|
const untransferred = result.details?.untransferredResults
|
|
|
|
// Filter out raw warnings when we have structured data for them
|
|
let otherWarnings = skipped && skipped.total > 0
|
|
? result.warnings.filter((w) => !w.includes('hoppades över'))
|
|
: result.warnings
|
|
if (untransferred && untransferred.length > 0) {
|
|
otherWarnings = otherWarnings.filter((w) => !w.includes('förts om till eget kapital'))
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* "Din historia" reveal (theater ran) or the plain success/failure header */}
|
|
{showReveal && theaterModel && preview ? (
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="grid items-center gap-6 md:grid-cols-[minmax(280px,380px)_1fr]">
|
|
<div>
|
|
<p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
|
|
{t('reveal_eyebrow')}
|
|
</p>
|
|
<h2 className="mt-2 font-display text-2xl leading-8 tracking-tight text-balance">
|
|
{t('reveal_title', { years: Math.max(theaterModel.years.length, 1) })}
|
|
</h2>
|
|
<p className="mt-3 text-[13px] text-muted-foreground tabular-nums">
|
|
{t('reveal_stats', {
|
|
vouchers: result.journalEntriesCreated,
|
|
accounts: preview.accountCount,
|
|
counterparties: theaterModel.totalCounterparties,
|
|
})}
|
|
</p>
|
|
{/* The balance claim comes from the pre-import file check; it
|
|
stays honest only when no unbalanced voucher was skipped. */}
|
|
{preview.trialBalance.isBalanced && !(skipped && skipped.unbalanced > 0) && (
|
|
<p className="mt-1 text-[13px] tabular-nums text-success">{t('reveal_tie_ok')}</p>
|
|
)}
|
|
{skipped && skipped.total > 0 && (
|
|
<p className="mt-1 text-[13px] text-warning">
|
|
{t('reveal_skipped', { count: skipped.total })}
|
|
</p>
|
|
)}
|
|
<div className="mt-6 border-t border-border pt-4">
|
|
{/* Sandbox strips live bank connections from /import, so the
|
|
bridge quiets down to the plain way onward there. */}
|
|
{!isSandbox && <p className="font-display text-base">{t('reveal_bridge')}</p>}
|
|
<div className="mt-3 flex flex-wrap items-center gap-3">
|
|
{!isSandbox && (
|
|
<Button asChild size="sm">
|
|
<Link href={hasBanking ? '/import?mode=psd2' : '/import?mode=bank'}>
|
|
{t('reveal_cta_bank')}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
<Link
|
|
href="/"
|
|
className="text-xs text-muted-foreground underline decoration-border underline-offset-4 transition-colors hover:text-foreground"
|
|
>
|
|
{t('reveal_cta_open')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative hidden min-h-[360px] md:block">
|
|
<TheaterCanvas model={theaterModel} settled />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card className={result.success ? 'border-border' : 'border-destructive/50'}>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
{result.success ? (
|
|
<>
|
|
<CheckCircle className="h-6 w-6 text-success" />
|
|
Import genomförd
|
|
</>
|
|
) : (
|
|
<>
|
|
<XCircle className="h-6 w-6 text-destructive" />
|
|
Import misslyckades
|
|
</>
|
|
)}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{result.success
|
|
? skipped && skipped.total > 0
|
|
? `Din bokföring har importerats. ${result.journalEntriesCreated} verifikationer skapades, ${skipped.total} hoppades över: se detaljer nedan.`
|
|
: 'Din bokföring har importerats framgångsrikt.'
|
|
: 'Det uppstod fel under importen. Läs felmeddelanden nedan för att förstå vad som gick snett och hur du kan åtgärda det.'}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
)}
|
|
|
|
{/* IB resync notice (prior-year backfill) */}
|
|
{result.success && result.nextPeriodIBResync && (
|
|
<Card className="border-success/50">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<CheckCircle className="h-5 w-5 text-success" />
|
|
Ingående balanser synkades om
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Eftersom du importerade ett tidigare räkenskapsår uppdaterades ingående balanser för{' '}
|
|
<span className="font-medium">{result.nextPeriodIBResync.nextPeriodName}</span>{' '}
|
|
automatiskt (gammal IB makulerad, ny IB skapad från utgående balans).
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
)}
|
|
|
|
{result.success && result.nextPeriodIBResyncSkipped && (
|
|
<Card className="border-warning/50">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base text-warning">
|
|
<AlertCircle className="h-5 w-5" />
|
|
Ingående balanser för {result.nextPeriodIBResyncSkipped.nextPeriodName} kunde inte synkas
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Nästa räkenskapsår är låst eller stängt. Lås upp perioden och kör importen igen om du
|
|
vill att ingående balanser ska uppdateras automatiskt.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Dimensions detected (lossless SIE round-trip, dimensions plan PR5) */}
|
|
{result.success && result.dimensionsImported && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Info className="h-5 w-5 text-muted-foreground" />
|
|
Dimensioner följde med importen
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Filen innehöll kostnadsställen/projekt: {result.dimensionsImported.taggedLines}{' '}
|
|
taggade rader importerades
|
|
{result.dimensionsImported.values > 0 && (
|
|
<> och {result.dimensionsImported.values} nya värden lades till i registret</>
|
|
)}
|
|
.{' '}
|
|
{result.dimensionsImported.toggleEnabled && (
|
|
<>Dimensioner aktiverades automatiskt för företaget: du hittar registret under{' '}
|
|
<Link href="/dimensions" className="underline underline-offset-4">
|
|
Kostnadsställen & projekt
|
|
</Link>
|
|
.</>
|
|
)}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Statistics */}
|
|
{result.success && !showReveal && (
|
|
<div className="grid grid-cols-2 gap-4 md:grid-cols-3">
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center gap-2 text-muted-foreground mb-1">
|
|
<FileText className="h-4 w-4" />
|
|
<span className="text-sm">Verifikationer skapade</span>
|
|
</div>
|
|
<p className="text-2xl font-display tabular-nums">{result.journalEntriesCreated}</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center gap-2 text-muted-foreground mb-1">
|
|
<span className="text-sm">Räkenskapsår</span>
|
|
</div>
|
|
<div className="text-2xl font-display">
|
|
{result.fiscalPeriodId ? (
|
|
<Badge variant="success">Skapat</Badge>
|
|
) : (
|
|
<Badge variant="secondary">Befintligt</Badge>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center gap-2 text-muted-foreground mb-1">
|
|
<span className="text-sm">Ingående balanser</span>
|
|
</div>
|
|
<div className="text-2xl font-display">
|
|
{result.openingBalanceEntryId ? (
|
|
<Badge variant="success">Importerade</Badge>
|
|
) : (
|
|
<Badge variant="secondary">Inga</Badge>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Errors */}
|
|
{hasErrors && (
|
|
<Card className="border-destructive/50">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-destructive">
|
|
<XCircle className="h-5 w-5" />
|
|
Fel ({result.errors.length})
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2 max-h-48 overflow-y-auto">
|
|
{result.errors.map((error, i) => (
|
|
<div key={i} className="text-sm flex gap-2">
|
|
<XCircle className="h-4 w-4 text-destructive flex-shrink-0 mt-0.5" />
|
|
<span>{error}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{!result.success && (
|
|
<div className="text-sm text-muted-foreground border-t pt-3 space-y-1">
|
|
<p className="font-medium">Vad kan du göra?</p>
|
|
<ul className="list-disc list-inside space-y-0.5 text-muted-foreground">
|
|
<li>Kontrollera att SIE-filen exporterades korrekt från källsystemet</li>
|
|
<li>Prova att exportera filen igen och ladda upp på nytt</li>
|
|
<li>Om felet kvarstår, kontakta support med felmeddelandet ovan</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Skipped vouchers: structured breakdown */}
|
|
{skipped && skipped.total > 0 && (
|
|
<Card className="border-muted-foreground/20">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-muted-foreground">
|
|
<Info className="h-5 w-5" />
|
|
Hoppade över {skipped.total} verifikationer
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{skipped.empty > 0 && (
|
|
<div className="text-sm">
|
|
<p className="font-medium">{skipped.empty} tomma verifikationer</p>
|
|
<p className="text-muted-foreground">
|
|
Platshållare utan bokföringsrader: vanligt i Fortnox och Visma. Påverkar inte din bokföring.
|
|
</p>
|
|
</div>
|
|
)}
|
|
{skipped.unbalanced > 0 && (
|
|
<div className="text-sm">
|
|
<p className="font-medium">{skipped.unbalanced} obalanserade verifikationer</p>
|
|
<p className="text-muted-foreground">
|
|
Debet och kredit stämmer inte överens i källsystemet. Saldon har justerats automatiskt.
|
|
</p>
|
|
</div>
|
|
)}
|
|
{skipped.singleLine > 0 && (
|
|
<div className="text-sm">
|
|
<p className="font-medium">{skipped.singleLine} enradsverifikationer</p>
|
|
<p className="text-muted-foreground">
|
|
Verifikationer med bara en rad (t.ex. periodiseringar). Kräver minst två rader för dubbelbokning.
|
|
</p>
|
|
</div>
|
|
)}
|
|
{skipped.unmapped > 0 && (
|
|
<div className="text-sm">
|
|
<p className="font-medium">{skipped.unmapped} verifikationer med ej kopplade konton</p>
|
|
<p className="text-muted-foreground">
|
|
Innehåller konton som inte kunde kopplas till din kontoplan.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Untransferred prior-year results — the year-end omföring is missing */}
|
|
{untransferred && untransferred.length > 0 && (
|
|
<Card className="border-warning/50">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-warning">
|
|
<AlertCircle className="h-5 w-5" />
|
|
Årets resultat är inte omfört
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Följande räkenskapsår saknar omföring av årets resultat till eget kapital.
|
|
Senare års balansräkning visar en differens på beloppet tills omföringen
|
|
bokförs (konto 8999 mot eget kapital, t.ex. 2099) i respektive år.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
{untransferred.map((u) => (
|
|
<div key={u.fiscal_period_id} className="text-sm flex justify-between gap-4">
|
|
<span className="font-medium">{u.period_name}</span>
|
|
<span className="tabular-nums">
|
|
{formatCurrency(u.pl_net, 'SEK', { minimumFractionDigits: 2 })}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Other warnings (filtered) */}
|
|
{otherWarnings.length > 0 && (
|
|
<Card className="border-warning/50">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-warning">
|
|
<AlertCircle className="h-5 w-5" />
|
|
Varningar ({otherWarnings.length})
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2 max-h-48 overflow-y-auto">
|
|
{otherWarnings.map((warning, i) => (
|
|
<div key={i} className="text-sm flex gap-2">
|
|
<AlertCircle className="h-4 w-4 text-warning flex-shrink-0 mt-0.5" />
|
|
<span>{warning}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Next steps */}
|
|
{result.success && (
|
|
<Card className="bg-muted/50">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Nästa steg</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-medium">
|
|
1
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">Granska importerade verifikationer</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Kontrollera att allt ser korrekt ut i bokföringslistan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-medium">
|
|
2
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">Verifiera balanserna</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Jämför huvudboken med din tidigare bokföring
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-medium">
|
|
3
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">Fortsätt med ny bokföring</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Nu kan du börja lägga till nya transaktioner
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-between">
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
|
<Button variant="outline" className="min-h-11" onClick={onNewImport}>
|
|
<RotateCcw className="mr-2 h-4 w-4" />
|
|
Ny import
|
|
</Button>
|
|
{result.success && result.importId && onUndo && (
|
|
<Button variant="outline" className="min-h-11 text-destructive hover:text-destructive" onClick={handleUndoClick}>
|
|
<Undo2 className="mr-2 h-4 w-4" />
|
|
Ångra import
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
|
{result.success && (
|
|
<>
|
|
<Button variant="outline" className="min-h-11" asChild>
|
|
<Link href="/bookkeeping">
|
|
Visa bokföring
|
|
<ExternalLink className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button className="min-h-11" asChild>
|
|
<Link href="/reports">
|
|
Visa rapporter
|
|
<ExternalLink className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DestructiveConfirmDialog {...dialogProps} />
|
|
</div>
|
|
)
|
|
}
|