feat(reconciliation): the Avstämning page: one body for every account with an outside truth (#1834)
* feat(reconciliation): skattekonto bridge engine, sync-time twin proposals, account-keyed facade The engine half of the reconciliation page (design: Avstämningsmotorn). - lib/reconciliation/skattekonto-reconciliation.ts: getSkattekontoReconciliationStatus anchors at the saldo snapshot and returns the bridge (saldo hos Skatteverket, händelser som saknas, 1630-rader utan händelse, ignorerade, ingående skillnad, bokfört), the item buckets the page shows (proposed, unmatched external, unmatched ledger, matched, ignored, upcoming), opening_difference, unexplained_difference (0,00 by construction when data is consistent), dead-link handling (a link to a reversed/draft entry counts as unlinked and is flagged), awaiting_external for ledger lines within 5 days of the snapshot, staleness, and a window that scopes item lists without hiding older rows. Core reads skattekonto_transactions and the extension's snapshot row directly; no @/extensions import. - lib/reconciliation/gl-balance.ts: one ledger-balance helper with the trial-balance predicate status IN (posted, reversed). The drift check summed posted only, which misstated 1630 for any company with a storno on the account; skattekonto-drift.ts now delegates to the helper. - Proposals at sync: migration 20260823120000 adds suggested_journal_entry_id / suggested_at (ON DELETE SET NULL, partial index on open rows); the sync calls refreshSkattekontoProposals after the upsert. findMatchSuggestionsBulk now assigns one-to-one across rows (AGI period first, then nearest date) and falls back to an entry whose 1630 lines net to the amount (split lines); a proposal is never a link. - lib/reconciliation/service.ts + schemas.ts: the account-keyed facade (bank:<cash_account_id> | skattekonto | manual:NNNN) with listReconciliationAccounts (enabled cash accounts folded per IBAN, skattekonto when configured) and getAccountStatus dispatching to the bank engine or the new one; shared Zod shapes for the v1 registry, MCP schemas and the UI (PR 2). Tests: identity on a mixed fixture, storno pair, stale snapshot, awaiting window, window scoping, failed ledger read, live-linked entries never proposed; matcher one-to-one and split-line cases; proposal refresh writes/clears; service dedupe and dispatch. No UI in this PR. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(reconciliation): roundOre instead of inline öre rounding (guard ratchet) The antipattern ratchet counts Math.round(x*100)/100; the new engine used it in five places. Switch to roundOre from @/lib/money and ratchet the baseline down by the three occurrences this removes net of the matcher rewrite. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(reconciliation): three doors over one engine: dashboard routes, v1 API and MCP tools for account-keyed reconciliation PR 2 of the Avstämning build (design: Avstämning via API och MCP). Every door calls lib/reconciliation/{service,items,actions}.ts; none re-implements a link. - lib/reconciliation/items.ts: listAccountItems per account_key, the page's buckets (proposed, unmatched_external, unmatched_ledger, matched, ignored, upcoming), limit/offset; skattekonto from the engine, bank from the scoped transactions + unlinked GL lines (netted per entry). - lib/reconciliation/actions.ts: matchPairs (pairs or use_proposals, dry run, partial success with codes), unmatchLink, setItemIgnored; emits reconciliation.matched / reconciliation.unmatched. - lib/skatteverket/skattekonto-link.ts: canonical core link semantics for a skattekonto row (single line or entry net on 1630, live-link guard, race-safe update, unlink, ignore); the extension keeps its own matchSkattekontoToEntry until its tests are ported. - Dashboard routes /api/reconciliation/accounts[...]: list, status, items, links (POST), links/{linkId} (DELETE), items/{itemId}/ignore (POST); apply directly (a human clicked). - v1 routes /api/v1/companies/{id}/reconciliation/accounts[...]: same six, withApiV1, new scopes reconciliation:read / reconciliation:write (write is a staging scope for SoD), Idempotency-Key + dry_run on writes, registered for OpenAPI, load-routes, skills/accounted-api regenerated. Legacy bank routes and their transactions:* scopes unchanged. - MCP: gnubok_get_reconciliation_status takes account_key (legacy bank path untouched), new gnubok_list_reconciliation_items (default catalog), gnubok_reconcile_match (stages reconciliation_match, preflight = status) and gnubok_reconcile_unmatch (stages reconciliation_unmatch), both search-only to stay under the tools/list payload ceiling; gnubok_link_transaction_to_journal_entry moved to search. Executors in commit.ts; risk tiers medium/low; migration pair 20260823130000/130001 adds the two op types to the CHECK constraint (value list = live prod as of 2026-08-23 + the two); close_period loadout updated. Tests: service/actions/items/link unit tests, v1 route tests (401/403/400/404/ happy, idempotency, dry run), dashboard route tests, MCP tool tests + the guard suite (payload ceiling, descriptions, staging meta, qualified ids). Guards and apiskill:check green; no type errors in changed files. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(reconciliation): refresh the v1 spec snapshot and keep the ignore update readable by the phantom-column guard The six new v1 reconciliation endpoints and the two new scopes were not recorded in the spec snapshot, and setSkattekontoRowIgnored updated through one conditional payload, which the phantom-column scanner cannot read (ceiling 380 -> 381). Two literal payloads instead; snapshot updated. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(reconciliation): the Avstämning page, one body for every account with an outside truth /reconciliation in Arbeta (after Transaktioner), on the approved layout: an account rail on the left (bank accounts and the skattekonto, logo or monogram, last fetch, status dot, URL-owned selection), and for the selected account four tiles (outside, ledger, difference, unexplained), the bridge that explains the difference, an actions row (link the proposed pairs, book the unbooked skattekonto events, run the bank matcher) and a full-width table banded by bucket with proposal rows linkable one by one. Every read and write goes through the PR 2 dashboard routes, so the page shows exactly what the v1 API and the MCP tools see. Also: nav item, command palette entry, sv/en strings. Period picker, manual match mode and sign-off are deliberately not here (PR 4/5). 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>
This commit is contained in:
Jakob Wennberg
co-authored by
Claude Fable 5
Jakob Wennberg
Claude Fable 5
Jakob Wennberg
parent
3a62c5419e
commit
c609dbb228
@@ -1178,3 +1178,4 @@ One line per decision: `[YYYY-MM-DD] <decision>: <why>`. Appended by agents and
|
||||
[2026-08-24] No-IBAN reconnect pairing (issue #1709) uses only per-currency exactly-one-each-side elimination, deliberately WITHOUT name equality: ASPSPs reformat product names between consents, so requiring it would silently disable the fix for the banks that need it, while the one-per-currency guard already bounds a mis-pair to skipping rows whose account+date+amount+occurrence all collide. upsertFromPsd2 needed no change: its explicit reuse_cash_account_id promote path already covers a same-connection holder, so the fix only names the paired row from the callback.
|
||||
[2026-08-23] Reconciliation engine (PR 1): the skattekonto status engine lives in core lib/reconciliation (reads the core table + the extension snapshot row in extension_data directly) instead of in the skatteverket extension: core must never import @/extensions/*, and the reconciliation facade must work with zero extensions; the matcher stays in the extension and writes its proposals to the row at sync time. Proposals are propose-only (suggested_journal_entry_id is never a link); the same per-entry one-to-one assignment replaces per-row "exactly one candidate". Ledger balances everywhere in reconciliation use the trial-balance predicate status IN (posted, reversed): the drift check summed posted only, which misstated 1630 for every company with a storno on the account.
|
||||
[2026-08-23] Reconciliation doors (PR 2): dashboard routes, the v1 API and the MCP tools all call lib/reconciliation/{service,items,actions}.ts; no door re-implements a link. Policy lives in the door: page + REST apply directly, MCP stages (reconciliation_match / reconciliation_unmatch pending operations, executors in commit.ts). The MCP write tools are catalogVisibility search (and gnubok_link_transaction_to_journal_entry moved to search) because the tools/list payload ceiling (59 900 tokens) left no room for them in the default catalog; the reads (status with account_key, items) stay default and the items description points at the write. The skattekonto link now has its canonical implementation in core lib/skatteverket/skattekonto-link.ts (needed by core doors; core must not import the extension); the extension route still uses its own matchSkattekontoToEntry until its queued-mock tests are ported, then it delegates. New scopes reconciliation:read/write; gnubok_get_reconciliation_status keeps reports:read and the legacy bank routes keep transactions:* so no existing key is cut off.
|
||||
[2026-08-23] Avstämning page (PR 3) ships without the period picker, the manual two-pane match mode and the sign-off button: the page renders the approved 'Vald riktning' layout (rail + tiles + bridge + actions + banded table) over the PR 2 dashboard routes only, so that it is verifiable on its own; period + sign-off arrive together in PR 4 (both are period-bound), manual N:M matching with residual booking in PR 5. Bank accounts get the same generic body plus links to the existing bank view for the matcher run rather than embedding the 1900-line BankReconciliationView: one body for every account kind is the point of the page, and embedding would have doubled the header.
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Suspense } from 'react'
|
||||
import { ReconciliationWorkspace } from '@/components/reconciliation/ReconciliationWorkspace'
|
||||
|
||||
// useSearchParams in the workspace needs a Suspense boundary above it.
|
||||
export default function ReconciliationPage() {
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<ReconciliationWorkspace />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
@@ -22,6 +22,7 @@ import {
|
||||
Settings,
|
||||
HelpCircle,
|
||||
ArrowRight,
|
||||
Scale,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
@@ -68,6 +69,7 @@ const PAGE_ENTRIES: Entry[] = [
|
||||
// ReportDescriptor.searchTerms instead, where the library shows a list.
|
||||
{ id: 'rapport-huvudbok', label: 'Visa rapport: Huvudbok', icon: BookOpen, href: '/reports/huvudbok', keywords: 'rapport huvudbok ledger general konto saldo transaktioner per konto verifikat verifikationer verifikationer per konto kontoutdrag kontoanalys kontokort kontohistorik balance account statement transactions vouchers' },
|
||||
{ id: 'rapport-kundreskontra', label: 'Visa rapport: Kundreskontra', icon: Users, href: '/reports/kundreskontra', keywords: 'rapport kundreskontra ar kundfordringar' },
|
||||
{ id: 'avstamning', label: 'Avstämning', hint: 'Stäm av bank och skattekonto', icon: Scale, href: '/reconciliation', keywords: 'avstämning stäm av bank skattekonto matcha reconcile reconciliation 1630 1930' },
|
||||
{ id: 'rapport-bankavstamning', label: 'Bankavstämning', hint: 'Stäm av bank mot bokföring', icon: ArrowLeftRight, href: '/reports/bank-reconciliation', keywords: 'avstämning stäm av bank matcha banktransaktioner reconcile reconciliation 1930' },
|
||||
{ id: 'importera', label: 'Importera', icon: Upload, href: '/import' },
|
||||
{ id: 'granskning', label: 'Granskning', icon: ClipboardCheck, href: '/pending', keywords: 'pending review' },
|
||||
|
||||
@@ -35,6 +35,7 @@ import {
|
||||
Sparkles,
|
||||
Percent,
|
||||
Landmark,
|
||||
Scale,
|
||||
CalendarClock,
|
||||
CalendarRange,
|
||||
FileCheck,
|
||||
@@ -118,6 +119,7 @@ type NavLabelKey =
|
||||
| 'suppliers'
|
||||
| 'review'
|
||||
| 'transactions'
|
||||
| 'reconciliation'
|
||||
| 'bookkeeping'
|
||||
| 'chart_of_accounts'
|
||||
| 'dimensions'
|
||||
@@ -208,6 +210,7 @@ const navItems: NavItem[] = [
|
||||
{ href: '/bookkeeping', labelKey: 'bookkeeping', icon: BookOpen, group: 'arbeta' },
|
||||
{ href: '/e/general/invoice-inbox', labelKey: 'invoice_inbox', icon: Inbox, group: 'arbeta', requiredCapability: EXTENSION_REQUIRED_CAPABILITY['general/invoice-inbox'] },
|
||||
{ href: '/transactions', labelKey: 'transactions', icon: ArrowLeftRight, group: 'arbeta' },
|
||||
{ href: '/reconciliation', labelKey: 'reconciliation', icon: Scale, group: 'arbeta' },
|
||||
{ href: '/pending', labelKey: 'review', icon: ClipboardCheck, group: 'arbeta' },
|
||||
{ href: '/invoices', labelKey: 'invoices', icon: ReceiptText, group: 'arbeta' },
|
||||
// Webshop orders: visible only for companies that actually have a webshop
|
||||
|
||||
@@ -0,0 +1,680 @@
|
||||
'use client'
|
||||
|
||||
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import Link from 'next/link'
|
||||
import { useLocale, useTranslations } from 'next-intl'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { AttnLine } from '@/components/ui/attn-line'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { DialogLoadingSkeleton } from '@/components/ui/dialog-loading-skeleton'
|
||||
import { TH_CLASS, TD_CLASS, QUIET_LINK_CLASS, HOVER_REVEAL_CLASS } from '@/components/ui/dry-table'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { cn, formatCurrency, formatDate } from '@/lib/utils'
|
||||
import { formatVoucher } from '@/lib/bookkeeping/voucher-series-resolver'
|
||||
import { getErrorMessage as getUserErrorMessage } from '@/lib/errors/get-error-message'
|
||||
import type {
|
||||
ReconciliationAccount,
|
||||
ReconciliationItem,
|
||||
ReconciliationItemBucket,
|
||||
ReconciliationStatus,
|
||||
} from '@/lib/reconciliation/schemas'
|
||||
import type { SkattekontoBatchRowResult, SkattekontoTransactionWithSuggestion } from '@/types/skatteverket'
|
||||
|
||||
const SkattekontoBookDialog = dynamic(
|
||||
() => import('@/components/skattekonto/SkattekontoBookDialog'),
|
||||
{ loading: DialogLoadingSkeleton },
|
||||
)
|
||||
|
||||
/**
|
||||
* The body of the Avstämning page for one selected account: the four tiles
|
||||
* (outside, ledger, difference, unexplained), the bridge that explains the
|
||||
* difference, the actions row, and the full-width banded table of the rows
|
||||
* behind the bridge. Everything comes from the PR 2 dashboard routes; the
|
||||
* same service functions feed the v1 API and the MCP tools, so what the page
|
||||
* shows is what an agent sees.
|
||||
*/
|
||||
|
||||
interface ItemsPayload {
|
||||
items: ReconciliationItem[]
|
||||
count: number
|
||||
total_count: number
|
||||
has_more: boolean
|
||||
older_unmatched_count: number
|
||||
}
|
||||
|
||||
const BUCKET_ORDER: ReconciliationItemBucket[] = [
|
||||
'proposed',
|
||||
'unmatched_external',
|
||||
'unmatched_ledger',
|
||||
'matched',
|
||||
'ignored',
|
||||
'upcoming',
|
||||
]
|
||||
|
||||
/** Buckets that start folded: they explain the bridge but are not work. */
|
||||
const FOLDED_BY_DEFAULT: ReadonlySet<ReconciliationItemBucket> = new Set(['matched', 'ignored'])
|
||||
|
||||
const ITEMS_LIMIT = 200
|
||||
|
||||
interface AccountOverviewProps {
|
||||
account: ReconciliationAccount
|
||||
/** Called after any write so the rail can refresh its status dots. */
|
||||
onChanged: () => void
|
||||
}
|
||||
|
||||
export function AccountOverview({ account, onChanged }: AccountOverviewProps) {
|
||||
const t = useTranslations('reconciliation')
|
||||
const locale = useLocale()
|
||||
const { toast } = useToast()
|
||||
const [status, setStatus] = useState<ReconciliationStatus | null>(null)
|
||||
const [items, setItems] = useState<ItemsPayload | null>(null)
|
||||
const [loadError, setLoadError] = useState(false)
|
||||
const [busy, setBusy] = useState<string | null>(null)
|
||||
const [unfolded, setUnfolded] = useState<Set<ReconciliationItemBucket>>(new Set())
|
||||
const [bookRow, setBookRow] = useState<ReconciliationItem | null>(null)
|
||||
|
||||
const isSkv = account.kind === 'skattekonto'
|
||||
const base = `/api/reconciliation/accounts/${encodeURIComponent(account.account_key)}`
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const [statusRes, itemsRes] = await Promise.all([
|
||||
fetch(base),
|
||||
fetch(`${base}/items?limit=${ITEMS_LIMIT}`),
|
||||
])
|
||||
setLoadError(false)
|
||||
if (!statusRes.ok || !itemsRes.ok) {
|
||||
setLoadError(true)
|
||||
return
|
||||
}
|
||||
const statusJson = await statusRes.json()
|
||||
const itemsJson = await itemsRes.json()
|
||||
setStatus(statusJson.data as ReconciliationStatus)
|
||||
setItems(itemsJson.data as ItemsPayload)
|
||||
} catch {
|
||||
setLoadError(true)
|
||||
}
|
||||
}, [base])
|
||||
|
||||
// The workspace keys this component on account_key, so a new account is a
|
||||
// fresh mount: no state to reset here.
|
||||
useEffect(() => {
|
||||
void load()
|
||||
}, [load])
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
await load()
|
||||
onChanged()
|
||||
}, [load, onChanged])
|
||||
|
||||
const byBucket = useMemo(() => {
|
||||
const map = new Map<ReconciliationItemBucket, ReconciliationItem[]>()
|
||||
for (const b of BUCKET_ORDER) map.set(b, [])
|
||||
for (const item of items?.items ?? []) map.get(item.bucket)?.push(item)
|
||||
return map
|
||||
}, [items])
|
||||
|
||||
const proposedCount = status?.counts.proposed ?? 0
|
||||
const bookableIds = useMemo(
|
||||
() =>
|
||||
(byBucket.get('unmatched_external') ?? [])
|
||||
.filter((i) => i.item_type === 'skattekonto_transaction' && i.actions.includes('book'))
|
||||
.map((i) => i.item_id),
|
||||
[byBucket],
|
||||
)
|
||||
|
||||
// ---- writes -------------------------------------------------------------
|
||||
|
||||
async function postJson(url: string, body: unknown, method: 'POST' | 'DELETE' = 'POST') {
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: body === undefined ? undefined : { 'Content-Type': 'application/json' },
|
||||
body: body === undefined ? undefined : JSON.stringify(body),
|
||||
})
|
||||
const json = await res.json().catch(() => ({}))
|
||||
if (!res.ok) {
|
||||
toast({
|
||||
title: t('toast_failed'),
|
||||
description: getUserErrorMessage(json, { statusCode: res.status }),
|
||||
variant: 'destructive',
|
||||
})
|
||||
return null
|
||||
}
|
||||
return json.data as Record<string, unknown>
|
||||
}
|
||||
|
||||
async function matchProposals() {
|
||||
setBusy('proposals')
|
||||
try {
|
||||
const data = await postJson(`${base}/links`, { use_proposals: true })
|
||||
if (data) {
|
||||
const applied = (data.applied as unknown[]).length
|
||||
const skipped = (data.skipped as unknown[]).length
|
||||
toast({
|
||||
title: skipped > 0 ? t('toast_matched_skipped', { applied, skipped }) : t('toast_matched', { applied }),
|
||||
})
|
||||
await refresh()
|
||||
}
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function matchOne(item: ReconciliationItem) {
|
||||
if (!item.proposal) return
|
||||
setBusy(item.item_id)
|
||||
try {
|
||||
const data = await postJson(`${base}/links`, {
|
||||
pairs: [{ external_ids: [item.item_id], journal_entry_ids: [item.proposal.journal_entry_id] }],
|
||||
})
|
||||
if (data) {
|
||||
const skipped = data.skipped as Array<{ message: string }>
|
||||
if (skipped.length > 0) {
|
||||
toast({ title: t('toast_failed'), description: skipped[0].message, variant: 'destructive' })
|
||||
} else {
|
||||
toast({ title: t('toast_matched', { applied: 1 }) })
|
||||
}
|
||||
await refresh()
|
||||
}
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function unmatchOne(item: ReconciliationItem) {
|
||||
setBusy(item.item_id)
|
||||
try {
|
||||
const data = await postJson(`${base}/links/${item.item_id}`, undefined, 'DELETE')
|
||||
if (data) {
|
||||
toast({ title: t('toast_unmatched') })
|
||||
await refresh()
|
||||
}
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function setIgnored(item: ReconciliationItem, ignored: boolean) {
|
||||
setBusy(item.item_id)
|
||||
try {
|
||||
const data = await postJson(`${base}/items/${item.item_id}/ignore`, { ignored })
|
||||
if (data) {
|
||||
toast({ title: ignored ? t('toast_ignored') : t('toast_unignored') })
|
||||
await refresh()
|
||||
}
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function bookAll() {
|
||||
if (bookableIds.length === 0) return
|
||||
setBusy('book')
|
||||
try {
|
||||
const data = await postJson('/api/extensions/ext/skatteverket/skattekonto/transaktioner/bokfor-batch', {
|
||||
ids: bookableIds,
|
||||
})
|
||||
if (data) {
|
||||
const results = (data.results ?? []) as SkattekontoBatchRowResult[]
|
||||
const ok = results.filter((r) => r.ok).length
|
||||
const failed = results.length - ok
|
||||
toast({
|
||||
title: failed > 0 ? t('toast_book_partial', { ok, failed }) : t('toast_booked', { count: ok }),
|
||||
variant: failed > 0 && ok === 0 ? 'destructive' : undefined,
|
||||
})
|
||||
await refresh()
|
||||
}
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
}
|
||||
|
||||
// ---- render -------------------------------------------------------------
|
||||
|
||||
if (loadError) {
|
||||
return (
|
||||
<AttnLine action={{ label: t('older_show'), onClick: () => void load() }}>
|
||||
{t('load_failed')}
|
||||
</AttnLine>
|
||||
)
|
||||
}
|
||||
|
||||
if (!status || !items) {
|
||||
return (
|
||||
<div className="space-y-6" aria-busy>
|
||||
<div className="grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-border bg-border">
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
<div key={i} className="bg-background p-4">
|
||||
<Skeleton className="h-3 w-32" />
|
||||
<Skeleton className="mt-3 h-6 w-28" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Skeleton className="h-4 w-72" />
|
||||
<Skeleton className="h-40 w-full" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const currency = status.currency
|
||||
const money = (n: number | null | undefined) => (n == null ? t('tile_unknown') : formatCurrency(n, currency))
|
||||
const asOfDate = status.as_of.slice(0, 10)
|
||||
const fetchedAt = isSkv ? status.skattekonto?.fetched_at : account.source.synced_at
|
||||
const sourceLabel = isSkv ? t('source_skv') : t('source_bank')
|
||||
|
||||
const tiles: Array<{ key: string; label: string; value: string; sub: string; tone?: 'ok' | 'attn' }> = [
|
||||
{
|
||||
key: 'external',
|
||||
label: isSkv ? t('tile_external_skv') : t('tile_external_bank'),
|
||||
value: money(status.external_balance),
|
||||
sub: fetchedAt ? t('tile_synced', { date: formatDate(fetchedAt) }) : t('rail_never_synced'),
|
||||
},
|
||||
{
|
||||
key: 'ledger',
|
||||
label: isSkv
|
||||
? t('tile_ledger', { account: status.account_number })
|
||||
: t('tile_ledger_bank', { account: status.account_number }),
|
||||
value: money(status.ledger_balance),
|
||||
sub: t('tile_per', { date: formatDate(asOfDate) }),
|
||||
},
|
||||
{ key: 'difference', label: t('tile_difference'), value: money(status.difference), sub: '' },
|
||||
{
|
||||
key: 'unexplained',
|
||||
label: t('tile_unexplained'),
|
||||
value: money(status.unexplained_difference),
|
||||
sub: '',
|
||||
tone: status.unexplained_difference == null ? undefined : status.is_reconciled ? 'ok' : 'attn',
|
||||
},
|
||||
]
|
||||
|
||||
const unexplained = status.unexplained_difference
|
||||
const attn = status.stale
|
||||
? t('stale_line', { source: sourceLabel })
|
||||
: unexplained != null && Math.abs(unexplained) >= 0.005
|
||||
? t('unexplained_line', { amount: formatCurrency(unexplained, currency) })
|
||||
: null
|
||||
|
||||
const bucketLabel = (bucket: ReconciliationItemBucket): string => {
|
||||
switch (bucket) {
|
||||
case 'proposed':
|
||||
return t('bucket_proposed')
|
||||
case 'unmatched_external':
|
||||
return isSkv ? t('bucket_unmatched_external_skv') : t('bucket_unmatched_external_bank')
|
||||
case 'unmatched_ledger':
|
||||
return isSkv ? t('bucket_unmatched_ledger_skv') : t('bucket_unmatched_ledger_bank')
|
||||
case 'matched':
|
||||
return t('bucket_matched')
|
||||
case 'ignored':
|
||||
return t('bucket_ignored')
|
||||
case 'upcoming':
|
||||
return t('bucket_upcoming')
|
||||
}
|
||||
}
|
||||
|
||||
const openWork =
|
||||
(byBucket.get('proposed')?.length ?? 0) +
|
||||
(byBucket.get('unmatched_external')?.length ?? 0) +
|
||||
(byBucket.get('unmatched_ledger')?.length ?? 0)
|
||||
|
||||
const bankRunHref = '/reports/bank-reconciliation?autorun=1'
|
||||
const bankViewHref = '/reports/bank-reconciliation'
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Tiles: label + number, nothing else. */}
|
||||
<div className="grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-border bg-border stagger-enter">
|
||||
{tiles.map((tile) => (
|
||||
<div key={tile.key} className="bg-background px-4 py-3.5">
|
||||
<div className="text-[11px] font-medium uppercase tracking-[0.07em] text-muted-foreground">{tile.label}</div>
|
||||
<div
|
||||
className={cn(
|
||||
'mt-1 text-[22px] font-semibold leading-tight tabular-nums',
|
||||
tile.tone === 'ok' && 'text-success',
|
||||
tile.tone === 'attn' && 'text-warning',
|
||||
)}
|
||||
data-ph-mask
|
||||
>
|
||||
{tile.value}
|
||||
</div>
|
||||
{tile.sub && <div className="mt-0.5 text-[11.5px] text-muted-foreground">{tile.sub}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{attn ? (
|
||||
<AttnLine>{attn}</AttnLine>
|
||||
) : status.is_reconciled ? (
|
||||
<p className="text-[13px] text-muted-foreground">{t('reconciled_line')}</p>
|
||||
) : null}
|
||||
|
||||
{/* Bridge: how the difference is explained. */}
|
||||
{status.bridge.length > 0 && (
|
||||
<dl className="max-w-[520px] text-[13px]">
|
||||
{status.bridge.map((line) => (
|
||||
<div
|
||||
key={line.key}
|
||||
className="flex items-baseline justify-between gap-4 border-b border-border/60 py-1.5 last:border-b-0"
|
||||
>
|
||||
<dt className="text-muted-foreground">
|
||||
{locale === 'en' ? line.label_en : line.label_sv}
|
||||
{line.count != null && line.count > 0 && (
|
||||
<span className="ml-1.5 tabular-nums text-muted-foreground/70" data-ph-mask>
|
||||
({line.count})
|
||||
</span>
|
||||
)}
|
||||
</dt>
|
||||
<dd className="tabular-nums" data-ph-mask>
|
||||
{formatCurrency(line.amount, currency)}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
)}
|
||||
|
||||
{/* Actions row: the work, then the way to the richer surfaces. */}
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
|
||||
{proposedCount > 0 && (
|
||||
<Button size="sm" onClick={() => void matchProposals()} disabled={busy !== null}>
|
||||
{t('action_match_proposals', { count: proposedCount })}
|
||||
</Button>
|
||||
)}
|
||||
{isSkv && bookableIds.length > 0 && (
|
||||
<Button size="sm" variant="outline" onClick={() => void bookAll()} disabled={busy !== null}>
|
||||
{t('action_book_rows', { count: bookableIds.length })}
|
||||
</Button>
|
||||
)}
|
||||
{!isSkv && (
|
||||
<Button size="sm" variant="outline" asChild>
|
||||
<Link href={bankRunHref}>{t('action_run_bank_matcher')}</Link>
|
||||
</Button>
|
||||
)}
|
||||
<span className="ml-auto">
|
||||
<Link href={isSkv ? '/skattekonto' : bankViewHref} className={QUIET_LINK_CLASS}>
|
||||
{isSkv ? t('action_open_skattekonto') : t('action_open_bank_view')}
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{items.older_unmatched_count > 0 && (
|
||||
<p className="text-[12.5px] text-muted-foreground">
|
||||
{t('older_unmatched', { count: items.older_unmatched_count })}
|
||||
{' · '}
|
||||
<Link href={isSkv ? '/skattekonto' : bankViewHref} className={QUIET_LINK_CLASS}>
|
||||
{t('older_show')}
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* The table: full width, banded by bucket, paired proposal rows. */}
|
||||
{items.items.length === 0 ? (
|
||||
<p className="text-[13px] text-muted-foreground">{t('all_clear')}</p>
|
||||
) : (
|
||||
<div className="-mx-4 overflow-x-auto sm:mx-0">
|
||||
<table className="w-full text-[13px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={cn(TH_CLASS, 'w-[110px]')}>{t('col_date')}</th>
|
||||
<th className={TH_CLASS}>{t('col_event')}</th>
|
||||
<th className={cn(TH_CLASS, 'w-[140px] text-right')}>{t('col_amount')}</th>
|
||||
<th className={cn(TH_CLASS, 'w-[34%]')}>{t('col_voucher')}</th>
|
||||
<th className={cn(TH_CLASS, 'w-[170px]')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="stagger-enter">
|
||||
{BUCKET_ORDER.map((bucket) => {
|
||||
const rows = byBucket.get(bucket) ?? []
|
||||
if (rows.length === 0) return null
|
||||
const folded = FOLDED_BY_DEFAULT.has(bucket) && !unfolded.has(bucket)
|
||||
const toggle = () =>
|
||||
setUnfolded((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(bucket)) next.delete(bucket)
|
||||
else next.add(bucket)
|
||||
return next
|
||||
})
|
||||
return (
|
||||
<Fragment key={bucket}>
|
||||
<tr className="bg-muted/30">
|
||||
<td
|
||||
colSpan={5}
|
||||
className="px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.06em] text-muted-foreground"
|
||||
>
|
||||
<span className="flex items-center gap-3">
|
||||
<span>
|
||||
{bucketLabel(bucket)}
|
||||
<span className="ml-1.5 font-normal tabular-nums text-muted-foreground/70" data-ph-mask>
|
||||
{rows.length}
|
||||
</span>
|
||||
</span>
|
||||
{FOLDED_BY_DEFAULT.has(bucket) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
className="normal-case tracking-normal text-[12px] font-normal text-muted-foreground underline decoration-border underline-offset-4 hover:text-foreground"
|
||||
>
|
||||
{folded ? t('show_all', { count: rows.length }) : t('hide')}
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{!folded &&
|
||||
rows.map((item) => (
|
||||
<ItemRow
|
||||
key={item.item_id}
|
||||
item={item}
|
||||
isSkv={isSkv}
|
||||
sourceLabel={sourceLabel}
|
||||
currency={currency}
|
||||
busy={busy === item.item_id}
|
||||
anyBusy={busy !== null}
|
||||
onMatch={() => void matchOne(item)}
|
||||
onUnmatch={() => void unmatchOne(item)}
|
||||
onIgnore={() => void setIgnored(item, true)}
|
||||
onUnignore={() => void setIgnored(item, false)}
|
||||
onBook={() => setBookRow(item)}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{items.has_more && (
|
||||
<p className="px-4 pt-3 text-[12px] text-muted-foreground">{t('truncated', { count: ITEMS_LIMIT })}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{openWork === 0 && items.items.length > 0 && (
|
||||
<p className="text-[13px] text-muted-foreground">{t('all_clear')}</p>
|
||||
)}
|
||||
|
||||
{isSkv && (
|
||||
<SkattekontoBookDialog
|
||||
row={bookRow ? toDialogRow(bookRow) : null}
|
||||
open={bookRow !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setBookRow(null)
|
||||
}}
|
||||
onBooked={() => {
|
||||
setBookRow(null)
|
||||
void refresh()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* The booking dialog reads six fields of a skattekonto row (id, date, text,
|
||||
* amount, booking_suggestion, booking_gate). The reconciliation item carries
|
||||
* the first four; the suggestion is left undefined on purpose, which routes
|
||||
* the dialog to its draft-confirm path (the /skattekonto page is the place
|
||||
* with full rule-based suggestions).
|
||||
*/
|
||||
function toDialogRow(item: ReconciliationItem): SkattekontoTransactionWithSuggestion {
|
||||
return {
|
||||
id: item.item_id,
|
||||
transaktionsdatum: item.date,
|
||||
transaktionstext: item.description,
|
||||
belopp_skatteverket: item.amount,
|
||||
booking_suggestion: undefined,
|
||||
booking_gate: null,
|
||||
} as unknown as SkattekontoTransactionWithSuggestion
|
||||
}
|
||||
|
||||
interface ItemRowProps {
|
||||
item: ReconciliationItem
|
||||
isSkv: boolean
|
||||
sourceLabel: string
|
||||
currency: string
|
||||
busy: boolean
|
||||
anyBusy: boolean
|
||||
onMatch: () => void
|
||||
onUnmatch: () => void
|
||||
onIgnore: () => void
|
||||
onUnignore: () => void
|
||||
onBook: () => void
|
||||
}
|
||||
|
||||
function ItemRow({
|
||||
item,
|
||||
isSkv,
|
||||
sourceLabel,
|
||||
currency,
|
||||
busy,
|
||||
anyBusy,
|
||||
onMatch,
|
||||
onUnmatch,
|
||||
onIgnore,
|
||||
onUnignore,
|
||||
onBook,
|
||||
}: ItemRowProps) {
|
||||
const t = useTranslations('reconciliation')
|
||||
const can = (a: ReconciliationItem['actions'][number]) => item.actions.includes(a)
|
||||
const voucherOf = (e: { voucher_series?: string | null; voucher_number?: number | null }) =>
|
||||
e.voucher_number != null ? formatVoucher({ voucher_series: e.voucher_series, voucher_number: e.voucher_number }) : null
|
||||
|
||||
// The voucher column: for a ledger item, its own voucher; for an external
|
||||
// item, the linked or proposed verifikat.
|
||||
let voucherCell: React.ReactNode = null
|
||||
if (item.side === 'ledger') {
|
||||
const v = voucherOf(item)
|
||||
voucherCell = (
|
||||
<span className="flex items-center gap-2">
|
||||
<Link href={`/bookkeeping/${item.item_id}`} className={QUIET_LINK_CLASS} data-ph-mask>
|
||||
{v ?? item.item_id.slice(0, 8)}
|
||||
</Link>
|
||||
{item.entry_status === 'draft' && <Chip>{t('chip_draft')}</Chip>}
|
||||
{item.entry_status === 'reversed' && <Chip>{t('chip_reversed')}</Chip>}
|
||||
{item.awaiting_external && <Chip>{t('chip_awaiting', { source: sourceLabel })}</Chip>}
|
||||
</span>
|
||||
)
|
||||
} else if (item.proposal) {
|
||||
const p = item.proposal
|
||||
voucherCell = (
|
||||
<span className="flex flex-col gap-0.5">
|
||||
<span className="flex items-center gap-2">
|
||||
<Link href={`/bookkeeping/${p.journal_entry_id}`} className={QUIET_LINK_CLASS} data-ph-mask>
|
||||
{voucherOf(p) ?? p.journal_entry_id.slice(0, 8)}
|
||||
</Link>
|
||||
<span className="text-[11.5px] tabular-nums text-muted-foreground">{formatDate(p.entry_date)}</span>
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
{t('confidence', { percent: Math.round(p.confidence * 100) })}
|
||||
</span>
|
||||
</span>
|
||||
<span className="truncate text-[12px] text-muted-foreground" data-ph-mask>
|
||||
{p.description}
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
} else if (item.linked_journal_entry_id) {
|
||||
voucherCell = (
|
||||
<span className="flex items-center gap-2">
|
||||
<Link href={`/bookkeeping/${item.linked_journal_entry_id}`} className={QUIET_LINK_CLASS} data-ph-mask>
|
||||
{item.linked_journal_entry_id.slice(0, 8)}
|
||||
</Link>
|
||||
{item.link_problem === 'entry_draft' && <Chip>{t('chip_draft')}</Chip>}
|
||||
{item.link_problem === 'entry_reversed' && <Chip>{t('chip_reversed')}</Chip>}
|
||||
{item.link_problem === 'entry_missing' && <Chip>{t('chip_missing')}</Chip>}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const openHref = item.item_type === 'transaction' ? `/transactions?highlight=${item.item_id}` : null
|
||||
|
||||
return (
|
||||
<tr className="group">
|
||||
<td className={cn(TD_CLASS, 'whitespace-nowrap tabular-nums text-muted-foreground')}>{formatDate(item.date)}</td>
|
||||
<td className={cn(TD_CLASS, 'max-w-0')}>
|
||||
<span className="block truncate" data-ph-mask title={item.description}>
|
||||
{item.description}
|
||||
</span>
|
||||
</td>
|
||||
<td className={cn(TD_CLASS, 'whitespace-nowrap text-right tabular-nums')} data-ph-mask>
|
||||
{formatCurrency(item.amount, currency)}
|
||||
</td>
|
||||
<td className={cn(TD_CLASS, 'max-w-0')}>{voucherCell}</td>
|
||||
<td className={cn(TD_CLASS, 'text-right')}>
|
||||
<span className="flex items-center justify-end gap-1.5">
|
||||
{can('match') && item.proposal && (
|
||||
<Button size="sm" variant="outline" onClick={onMatch} disabled={anyBusy} aria-busy={busy}>
|
||||
{t('row_match')}
|
||||
</Button>
|
||||
)}
|
||||
{can('book') && isSkv && (
|
||||
<Button size="sm" variant="outline" onClick={onBook} disabled={anyBusy}>
|
||||
{t('row_book')}
|
||||
</Button>
|
||||
)}
|
||||
{can('book') && !isSkv && openHref && (
|
||||
<Button size="sm" variant="outline" asChild>
|
||||
<Link href={openHref}>{t('row_open')}</Link>
|
||||
</Button>
|
||||
)}
|
||||
{can('review') && item.side === 'ledger' && (
|
||||
<Link href={`/bookkeeping/${item.item_id}`} className={QUIET_LINK_CLASS}>
|
||||
{t('row_review')}
|
||||
</Link>
|
||||
)}
|
||||
{can('unmatch') && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onUnmatch}
|
||||
disabled={anyBusy}
|
||||
className={cn(QUIET_LINK_CLASS, HOVER_REVEAL_CLASS)}
|
||||
>
|
||||
{t('row_unmatch')}
|
||||
</button>
|
||||
)}
|
||||
{can('ignore') && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onIgnore}
|
||||
disabled={anyBusy}
|
||||
className={cn(QUIET_LINK_CLASS, HOVER_REVEAL_CLASS)}
|
||||
>
|
||||
{t('row_ignore')}
|
||||
</button>
|
||||
)}
|
||||
{can('unignore') && (
|
||||
<button type="button" onClick={onUnignore} disabled={anyBusy} className={QUIET_LINK_CLASS}>
|
||||
{t('row_unignore')}
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
function Chip({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<span className="whitespace-nowrap rounded-full bg-muted px-1.5 py-px text-[10.5px] text-muted-foreground">
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { cn, formatDate } from '@/lib/utils'
|
||||
import type { ReconciliationAccount } from '@/lib/reconciliation/schemas'
|
||||
|
||||
/**
|
||||
* The account rail of the Avstämning page: one row per account with an
|
||||
* outside truth (bank accounts, the skattekonto), logo or monogram, the
|
||||
* account number, when its outside side was last fetched, and a status dot.
|
||||
* Selection is URL-owned (?account=) by the workspace; the rail only reports.
|
||||
*/
|
||||
|
||||
const DOT_CLASS: Record<NonNullable<ReconciliationAccount['status']>['state'] | 'unknown', string> = {
|
||||
reconciled: 'bg-success',
|
||||
open: 'bg-warning',
|
||||
stale: 'bg-warning',
|
||||
not_configured: 'bg-muted-foreground/40',
|
||||
unknown: 'bg-muted-foreground/40',
|
||||
}
|
||||
|
||||
function monogram(name: string): string {
|
||||
const words = name.trim().split(/\s+/).filter(Boolean)
|
||||
if (words.length === 0) return '?'
|
||||
if (words.length === 1) return words[0].slice(0, 2).toUpperCase()
|
||||
return (words[0][0] + words[1][0]).toUpperCase()
|
||||
}
|
||||
|
||||
export function AccountLogo({ account, className }: { account: ReconciliationAccount; className?: string }) {
|
||||
if (account.logo_url) {
|
||||
return (
|
||||
<Image
|
||||
src={account.logo_url}
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className={cn('h-5 w-5 shrink-0 rounded-sm object-contain', className)}
|
||||
unoptimized
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'flex h-5 w-5 shrink-0 items-center justify-center rounded-sm bg-secondary text-[9px] font-semibold tracking-tight text-secondary-foreground',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{monogram(account.name)}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
interface ReconciliationRailProps {
|
||||
accounts: ReconciliationAccount[]
|
||||
selectedKey: string | null
|
||||
onSelect: (accountKey: string) => void
|
||||
}
|
||||
|
||||
export function ReconciliationRail({ accounts, selectedKey, onSelect }: ReconciliationRailProps) {
|
||||
const t = useTranslations('reconciliation')
|
||||
return (
|
||||
<nav aria-label={t('rail_heading')} className="stagger-enter">
|
||||
<ul className="flex flex-col gap-0.5">
|
||||
{accounts.map((account) => {
|
||||
const selected = account.account_key === selectedKey
|
||||
const state = account.status?.state ?? 'unknown'
|
||||
const synced = account.source.synced_at
|
||||
const open = account.status
|
||||
? account.status.open_counts.proposed +
|
||||
account.status.open_counts.unmatched_external +
|
||||
account.status.open_counts.unmatched_ledger
|
||||
: 0
|
||||
return (
|
||||
<li key={account.account_key}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect(account.account_key)}
|
||||
aria-current={selected ? 'page' : undefined}
|
||||
className={cn(
|
||||
'group flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors duration-150',
|
||||
selected ? 'bg-secondary' : 'hover:bg-muted/60',
|
||||
account.superseded_by && 'opacity-60',
|
||||
)}
|
||||
>
|
||||
<AccountLogo account={account} />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="truncate text-[13px] font-medium text-foreground" data-ph-mask>
|
||||
{account.name}
|
||||
</span>
|
||||
{account.superseded_by && (
|
||||
<span className="rounded-full bg-muted px-1.5 py-px text-[10px] text-muted-foreground">
|
||||
{t('rail_superseded')}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="block truncate text-[11.5px] text-muted-foreground tabular-nums">
|
||||
<span data-ph-mask>{account.account_number}</span>
|
||||
{' · '}
|
||||
{synced ? t('rail_synced', { date: formatDate(synced) }) : t('rail_never_synced')}
|
||||
</span>
|
||||
</span>
|
||||
<span className="flex shrink-0 items-center gap-1.5">
|
||||
{open > 0 && (
|
||||
<span className="text-[11px] tabular-nums text-muted-foreground" data-ph-mask>
|
||||
{open}
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
aria-label={t(`state_${state === 'unknown' ? 'not_configured' : state}`)}
|
||||
title={t(`state_${state === 'unknown' ? 'not_configured' : state}`)}
|
||||
className={cn('h-2 w-2 rounded-full', DOT_CLASS[state])}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
'use client'
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { Scale } from 'lucide-react'
|
||||
import { PageHeader } from '@/components/ui/page-header'
|
||||
import { HelpPopover } from '@/components/ui/help-popover'
|
||||
import { EmptyState } from '@/components/ui/empty-state'
|
||||
import { AttnLine } from '@/components/ui/attn-line'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import type { ReconciliationAccount } from '@/lib/reconciliation/schemas'
|
||||
import { ReconciliationRail } from './ReconciliationRail'
|
||||
import { AccountOverview } from './AccountOverview'
|
||||
|
||||
/**
|
||||
* /reconciliation: one page for every account with an outside truth. The
|
||||
* rail on the left lists the accounts (bank accounts, the skattekonto) with
|
||||
* their status; the body shows the selected account's bridge and the rows
|
||||
* behind it. Selection lives in the URL (?account=) so a link lands on the
|
||||
* right account and a reload keeps it.
|
||||
*/
|
||||
export function ReconciliationWorkspace() {
|
||||
const t = useTranslations('reconciliation')
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const searchParams = useSearchParams()
|
||||
const [accounts, setAccounts] = useState<ReconciliationAccount[] | null>(null)
|
||||
const [loadError, setLoadError] = useState(false)
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/reconciliation/accounts')
|
||||
setLoadError(false)
|
||||
if (!res.ok) {
|
||||
setLoadError(true)
|
||||
return
|
||||
}
|
||||
const json = await res.json()
|
||||
setAccounts((json.data?.accounts ?? []) as ReconciliationAccount[])
|
||||
} catch {
|
||||
setLoadError(true)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
void load()
|
||||
}, [load])
|
||||
|
||||
const requestedKey = searchParams.get('account')
|
||||
const selected = useMemo(() => {
|
||||
if (!accounts || accounts.length === 0) return null
|
||||
return (
|
||||
accounts.find((a) => a.account_key === requestedKey) ??
|
||||
accounts.find((a) => !a.superseded_by) ??
|
||||
accounts[0]
|
||||
)
|
||||
}, [accounts, requestedKey])
|
||||
|
||||
const select = useCallback(
|
||||
(accountKey: string) => {
|
||||
const params = new URLSearchParams(searchParams.toString())
|
||||
params.set('account', accountKey)
|
||||
router.replace(`${pathname}?${params.toString()}`, { scroll: false })
|
||||
},
|
||||
[pathname, router, searchParams],
|
||||
)
|
||||
|
||||
const header = (
|
||||
<PageHeader
|
||||
title={t('title')}
|
||||
help={
|
||||
<HelpPopover>
|
||||
<p>{t('help_text')}</p>
|
||||
</HelpPopover>
|
||||
}
|
||||
/>
|
||||
)
|
||||
|
||||
if (loadError) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{header}
|
||||
<AttnLine action={{ label: t('older_show'), onClick: () => void load() }}>{t('load_failed')}</AttnLine>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (accounts === null) {
|
||||
return (
|
||||
<div className="space-y-6" aria-busy>
|
||||
{header}
|
||||
<div className="grid gap-8 lg:grid-cols-[220px_1fr]">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-9 w-full" />
|
||||
<Skeleton className="h-9 w-full" />
|
||||
</div>
|
||||
<Skeleton className="h-48 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (accounts.length === 0) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{header}
|
||||
<EmptyState
|
||||
icon={Scale}
|
||||
title={t('empty_title')}
|
||||
description={t('empty_body')}
|
||||
actionLabel={t('empty_connect_bank')}
|
||||
actionHref="/settings/banking"
|
||||
secondaryActionLabel={t('empty_connect_skv')}
|
||||
secondaryActionHref="/settings/skatteverket"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{header}
|
||||
<div className="grid gap-8 lg:grid-cols-[220px_1fr]">
|
||||
<ReconciliationRail accounts={accounts} selectedKey={selected?.account_key ?? null} onSelect={select} />
|
||||
<div className="min-w-0">
|
||||
{selected && <AccountOverview key={selected.account_key} account={selected} onChanged={() => void load()} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -91,6 +91,7 @@
|
||||
"suppliers": "Suppliers",
|
||||
"review": "Review",
|
||||
"transactions": "Transactions",
|
||||
"reconciliation": "Reconciliation",
|
||||
"bookkeeping": "Bookkeeping",
|
||||
"chart_of_accounts": "Chart of accounts",
|
||||
"dimensions": "Cost centres & projects",
|
||||
@@ -7793,6 +7794,82 @@
|
||||
"skattekonto_body": "Connect with BankID and the balance and events are fetched continuously, ready to book.",
|
||||
"skattekonto_primary": "Connect Skatteverket"
|
||||
},
|
||||
"reconciliation": {
|
||||
"title": "Reconciliation",
|
||||
"help_text": "Every account with a truth outside the ledger, the bank or the tax account, is reconciled here. What exists outside is compared with what is booked, each row on one side is linked to a row on the other, and whatever remains is explained or booked.",
|
||||
"rail_heading": "Accounts",
|
||||
"rail_synced": "fetched {date}",
|
||||
"rail_never_synced": "never fetched",
|
||||
"rail_superseded": "replaced",
|
||||
"state_reconciled": "Reconciled",
|
||||
"state_open": "Open items",
|
||||
"state_stale": "Stale data",
|
||||
"state_not_configured": "Not connected",
|
||||
"empty_title": "Nothing to reconcile yet",
|
||||
"empty_body": "Connect the bank or Skatteverket and the accounts show up here.",
|
||||
"empty_connect_bank": "Connect bank",
|
||||
"empty_connect_skv": "Connect Skatteverket",
|
||||
"load_failed": "Could not load the reconciliation. Try again in a moment.",
|
||||
"tile_external_skv": "Balance at Skatteverket",
|
||||
"tile_external_bank": "Bank transactions in the period",
|
||||
"tile_ledger": "Booked on {account}",
|
||||
"tile_ledger_bank": "Booked on {account} in the period",
|
||||
"tile_difference": "Difference",
|
||||
"tile_unexplained": "Unexplained",
|
||||
"tile_per": "as of {date}",
|
||||
"tile_synced": "fetched {date}",
|
||||
"tile_unknown": "unknown",
|
||||
"reconciled_line": "Everything is explained: the difference is covered by the rows below.",
|
||||
"unexplained_line": "{amount} is not explained yet.",
|
||||
"stale_line": "The data from {source} is older than seven days. Fetch again before trusting the numbers.",
|
||||
"source_skv": "Skatteverket",
|
||||
"source_bank": "the bank",
|
||||
"bridge_heading": "How it adds up",
|
||||
"action_match_proposals": "Link {count} proposed",
|
||||
"action_book_rows": "Book {count} events",
|
||||
"action_open_skattekonto": "Open the tax account",
|
||||
"action_run_bank_matcher": "Match automatically",
|
||||
"action_open_bank_view": "Open bank reconciliation",
|
||||
"older_unmatched": "{count} older unmatched rows before the period start",
|
||||
"older_show": "Show",
|
||||
"col_date": "Date",
|
||||
"col_event": "Event",
|
||||
"col_amount": "Amount",
|
||||
"col_voucher": "Voucher",
|
||||
"bucket_proposed": "To link: proposed pairs",
|
||||
"bucket_unmatched_external_skv": "At Skatteverket, missing in the ledger",
|
||||
"bucket_unmatched_external_bank": "At the bank, missing in the ledger",
|
||||
"bucket_unmatched_ledger_skv": "In the ledger, missing at Skatteverket",
|
||||
"bucket_unmatched_ledger_bank": "In the ledger, missing at the bank",
|
||||
"bucket_matched": "Linked",
|
||||
"bucket_ignored": "Ignored",
|
||||
"bucket_upcoming": "Upcoming at Skatteverket",
|
||||
"row_match": "Link",
|
||||
"row_unmatch": "Unlink",
|
||||
"row_book": "Book",
|
||||
"row_review": "Review",
|
||||
"row_ignore": "Ignore",
|
||||
"row_unignore": "Restore",
|
||||
"row_open": "Open",
|
||||
"chip_awaiting": "awaiting {source}",
|
||||
"chip_draft": "draft",
|
||||
"chip_reversed": "reversed",
|
||||
"chip_missing": "missing",
|
||||
"chip_proposal_via_total": "via the voucher total",
|
||||
"confidence": "{percent}% confident",
|
||||
"show_all": "Show all {count}",
|
||||
"hide": "Hide",
|
||||
"all_clear": "No open items. Everything on the account is linked.",
|
||||
"toast_matched": "{applied} linked",
|
||||
"toast_matched_skipped": "{applied} linked, {skipped} skipped",
|
||||
"toast_unmatched": "Link removed",
|
||||
"toast_ignored": "Row ignored",
|
||||
"toast_unignored": "Row restored",
|
||||
"toast_booked": "{count} booked",
|
||||
"toast_book_partial": "{ok} booked, {failed} failed",
|
||||
"toast_failed": "That did not work",
|
||||
"truncated": "Showing the first {count} rows per group."
|
||||
},
|
||||
"skattekonto": {
|
||||
"help_text": "The balance and events are fetched from Skatteverket and synced automatically every night. Completed events are booked against 1630 Skattekonto, usually automatically; anything that cannot be matched is flagged in the list. Pay in via bankgiro 5050-1055 with your OCR number.",
|
||||
"copy": "copy",
|
||||
|
||||
@@ -91,6 +91,7 @@
|
||||
"suppliers": "Leverantörer",
|
||||
"review": "Granskning",
|
||||
"transactions": "Transaktioner",
|
||||
"reconciliation": "Avstämning",
|
||||
"bookkeeping": "Bokföring",
|
||||
"chart_of_accounts": "Kontoplan",
|
||||
"dimensions": "Kostnadsställen & projekt",
|
||||
@@ -7793,6 +7794,82 @@
|
||||
"skattekonto_body": "Anslut med BankID så hämtas saldo och händelser löpande, färdiga att bokföra.",
|
||||
"skattekonto_primary": "Anslut Skatteverket"
|
||||
},
|
||||
"reconciliation": {
|
||||
"title": "Avstämning",
|
||||
"help_text": "Varje konto med en sanning utanför bokföringen, banken eller skattekontot, stäms av här. Det som finns utanför jämförs med det som är bokfört, varje rad på ena sidan kopplas till en rad på den andra, och det som blir kvar förklaras eller bokförs.",
|
||||
"rail_heading": "Konton",
|
||||
"rail_synced": "hämtat {date}",
|
||||
"rail_never_synced": "aldrig hämtat",
|
||||
"rail_superseded": "ersatt",
|
||||
"state_reconciled": "Avstämt",
|
||||
"state_open": "Öppna poster",
|
||||
"state_stale": "Gamla uppgifter",
|
||||
"state_not_configured": "Ej kopplat",
|
||||
"empty_title": "Inget att stämma av ännu",
|
||||
"empty_body": "Koppla banken eller Skatteverket så dyker kontona upp här.",
|
||||
"empty_connect_bank": "Koppla bank",
|
||||
"empty_connect_skv": "Koppla Skatteverket",
|
||||
"load_failed": "Kunde inte hämta avstämningen. Försök igen om en stund.",
|
||||
"tile_external_skv": "Saldo hos Skatteverket",
|
||||
"tile_external_bank": "Banktransaktioner i perioden",
|
||||
"tile_ledger": "Bokfört på {account}",
|
||||
"tile_ledger_bank": "Bokfört på {account} i perioden",
|
||||
"tile_difference": "Differens",
|
||||
"tile_unexplained": "Oförklarat",
|
||||
"tile_per": "per {date}",
|
||||
"tile_synced": "hämtat {date}",
|
||||
"tile_unknown": "okänt",
|
||||
"reconciled_line": "Allt är förklarat: differensen täcks av raderna nedan.",
|
||||
"unexplained_line": "{amount} är inte förklarat ännu.",
|
||||
"stale_line": "Uppgifterna från {source} är äldre än sju dagar. Hämta igen innan du litar på siffrorna.",
|
||||
"source_skv": "Skatteverket",
|
||||
"source_bank": "banken",
|
||||
"bridge_heading": "Så hänger det ihop",
|
||||
"action_match_proposals": "Koppla {count} föreslagna",
|
||||
"action_book_rows": "Bokför {count} händelser",
|
||||
"action_open_skattekonto": "Öppna skattekontot",
|
||||
"action_run_bank_matcher": "Matcha automatiskt",
|
||||
"action_open_bank_view": "Öppna bankavstämningen",
|
||||
"older_unmatched": "{count} äldre omatchade rader före periodstart",
|
||||
"older_show": "Visa",
|
||||
"col_date": "Datum",
|
||||
"col_event": "Händelse",
|
||||
"col_amount": "Belopp",
|
||||
"col_voucher": "Verifikat",
|
||||
"bucket_proposed": "Att koppla: föreslagna par",
|
||||
"bucket_unmatched_external_skv": "Hos Skatteverket, saknas i bokföringen",
|
||||
"bucket_unmatched_external_bank": "På banken, saknas i bokföringen",
|
||||
"bucket_unmatched_ledger_skv": "I bokföringen, saknas hos Skatteverket",
|
||||
"bucket_unmatched_ledger_bank": "I bokföringen, saknas på banken",
|
||||
"bucket_matched": "Kopplade",
|
||||
"bucket_ignored": "Ignorerade",
|
||||
"bucket_upcoming": "Kommande hos Skatteverket",
|
||||
"row_match": "Koppla",
|
||||
"row_unmatch": "Koppla bort",
|
||||
"row_book": "Bokför",
|
||||
"row_review": "Granska",
|
||||
"row_ignore": "Ignorera",
|
||||
"row_unignore": "Återställ",
|
||||
"row_open": "Öppna",
|
||||
"chip_awaiting": "väntar på {source}",
|
||||
"chip_draft": "utkast",
|
||||
"chip_reversed": "makulerat",
|
||||
"chip_missing": "saknas",
|
||||
"chip_proposal_via_total": "via verifikatets summa",
|
||||
"confidence": "{percent} % säker",
|
||||
"show_all": "Visa alla {count}",
|
||||
"hide": "Dölj",
|
||||
"all_clear": "Inga öppna poster. Allt på kontot är kopplat.",
|
||||
"toast_matched": "{applied} kopplade",
|
||||
"toast_matched_skipped": "{applied} kopplade, {skipped} hoppades över",
|
||||
"toast_unmatched": "Kopplingen togs bort",
|
||||
"toast_ignored": "Raden ignoreras",
|
||||
"toast_unignored": "Raden är tillbaka",
|
||||
"toast_booked": "{count} bokförda",
|
||||
"toast_book_partial": "{ok} bokförda, {failed} misslyckades",
|
||||
"toast_failed": "Det gick inte",
|
||||
"truncated": "Visar de första {count} raderna per grupp."
|
||||
},
|
||||
"skattekonto": {
|
||||
"help_text": "Saldot och händelserna hämtas från Skatteverket och synkas automatiskt varje natt. Genomförda händelser bokförs mot 1630 Skattekonto, oftast automatiskt; det som inte kan matchas flaggas i listan. Betala in via bankgiro 5050-1055 med ditt OCR-nummer.",
|
||||
"copy": "kopiera",
|
||||
|
||||
Reference in New Issue
Block a user