feat: multi-series SIE import, reusable FiscalYearSelector, library templates in picker (#278)
* feat: multi-series SIE import, reusable FiscalYearSelector, library templates in picker - SIE import preserves each voucher's source series (B/C/I/V/...), essential for Fortnox migrations where series carry semantic meaning (kundfakturor, inbetalningar, etc.). Target numbering still goes through next_voucher_number per series; source (series, number) is stored in the migration mapping for BFNAR 2013:2 audit trail. - Execute route reads company_settings.default_voucher_series as the fallback for vouchers arriving without a series (SIE4I). - Extract shared FiscalYearSelector component; adopt in /reports and /bookkeeping. - Transaction TemplatePicker now surfaces user-created library templates (company + team scope) alongside the static registry, with a helper to convert simple library templates into the BookingTemplate shape. - Exclude 8999 "Årets resultat" from income statement financial section and monthly breakdown so year-end closing entries don't cancel the net result. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * test: skip Bokio SIE regression when fixtures are absent /dev_docs is gitignored (contains anonymised customer exports), so the integration test can't find its input files in CI. Gate the suite on fixture presence so it still runs locally. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix: address Greptile review feedback - convertLibraryToBookingTemplate: default entity_applicability to 'all' when the source template has no entity_type, so TemplatePicker doesn't silently hide it for companies with a set entity type. - FiscalYearSelector: fire onReady in the no-company early-return branch so consumers (e.g. ReportsPage) don't get stuck in a loading skeleton while the company context is still hydrating. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
d708a85d4c
commit
23664e79cb
@@ -0,0 +1,191 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Lock } from 'lucide-react'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import type { FiscalPeriod } from '@/types'
|
||||
|
||||
const STORAGE_KEY_PREFIX = 'gnubok:fiscal-year:'
|
||||
const ALL_YEARS_VALUE = '__all__'
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* Current selection. `null` means "all years" — no filter applied.
|
||||
*/
|
||||
value: string | null
|
||||
onChange: (periodId: string | null) => void
|
||||
/**
|
||||
* If true, include an "Alla räkenskapsår" option that clears the filter.
|
||||
* Pages that require a specific period (e.g. Reports) should pass false.
|
||||
*/
|
||||
includeAllOption?: boolean
|
||||
/**
|
||||
* Optional label above the select. Pass null to render without a label.
|
||||
*/
|
||||
label?: string | null
|
||||
/**
|
||||
* If true, only show periods whose start date is on or before today.
|
||||
* Matches the Reports-page filter.
|
||||
*/
|
||||
hideFuturePeriods?: boolean
|
||||
/**
|
||||
* Called once after the initial period fetch completes. Useful for callers
|
||||
* that want to suppress a skeleton until the selector is ready.
|
||||
*/
|
||||
onReady?: () => void
|
||||
className?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Shared fiscal-year (räkenskapsår) selector.
|
||||
*
|
||||
* Loads periods for the active company, persists the last selection per
|
||||
* company in localStorage, and renders the same Select used elsewhere in the
|
||||
* app so the UX is consistent across Bookkeeping, Reports, etc.
|
||||
*
|
||||
* The component is controlled: the caller owns the selected period id and
|
||||
* threads it into whichever queries need scoping.
|
||||
*/
|
||||
export function FiscalYearSelector({
|
||||
value,
|
||||
onChange,
|
||||
includeAllOption = true,
|
||||
label = 'Räkenskapsår',
|
||||
hideFuturePeriods = false,
|
||||
onReady,
|
||||
className,
|
||||
}: Props) {
|
||||
const { company } = useCompany()
|
||||
const [periods, setPeriods] = useState<FiscalPeriod[]>([])
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!company?.id) {
|
||||
// Fire onReady so consumers don't stall in a loading state while the
|
||||
// company context hydrates. The effect re-runs once company.id arrives.
|
||||
onReady?.()
|
||||
return
|
||||
}
|
||||
let cancelled = false
|
||||
;(async () => {
|
||||
const res = await fetch('/api/bookkeeping/fiscal-periods')
|
||||
if (!res.ok) {
|
||||
if (!cancelled) {
|
||||
setLoaded(true)
|
||||
onReady?.()
|
||||
}
|
||||
return
|
||||
}
|
||||
const { data } = await res.json()
|
||||
if (cancelled) return
|
||||
|
||||
let fetched: FiscalPeriod[] = data || []
|
||||
if (hideFuturePeriods) {
|
||||
const today = new Date().toISOString().split('T')[0]
|
||||
fetched = fetched.filter((p) => p.period_start <= today)
|
||||
}
|
||||
// Newest first — most migrations list recent years at the top
|
||||
fetched.sort((a, b) => b.period_start.localeCompare(a.period_start))
|
||||
setPeriods(fetched)
|
||||
setLoaded(true)
|
||||
|
||||
// Restore last selection (only if caller hasn't already set a value).
|
||||
// localStorage access is guarded because this is a 'use client' component
|
||||
// but still runs during SSR on first render for some setups.
|
||||
if (value === null && typeof window !== 'undefined') {
|
||||
const stored = window.localStorage.getItem(STORAGE_KEY_PREFIX + company.id)
|
||||
if (stored === ALL_YEARS_VALUE) {
|
||||
if (includeAllOption) onChange(null)
|
||||
else if (fetched.length > 0) onChange(fetched[0].id)
|
||||
} else if (stored && fetched.some((p) => p.id === stored)) {
|
||||
onChange(stored)
|
||||
} else if (!includeAllOption && fetched.length > 0) {
|
||||
onChange(fetched[0].id)
|
||||
}
|
||||
}
|
||||
|
||||
onReady?.()
|
||||
})()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
// onReady is intentionally excluded from deps: it's a lifecycle callback that
|
||||
// should fire once per load, not re-trigger if the parent re-creates it.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [company?.id, hideFuturePeriods, includeAllOption])
|
||||
|
||||
const handleChange = (next: string) => {
|
||||
const nextPeriodId = next === ALL_YEARS_VALUE ? null : next
|
||||
if (company?.id && typeof window !== 'undefined') {
|
||||
window.localStorage.setItem(
|
||||
STORAGE_KEY_PREFIX + company.id,
|
||||
nextPeriodId ?? ALL_YEARS_VALUE,
|
||||
)
|
||||
}
|
||||
onChange(nextPeriodId)
|
||||
}
|
||||
|
||||
const selectValue = value ?? (includeAllOption ? ALL_YEARS_VALUE : '')
|
||||
|
||||
// Surface lock status for the currently-selected period. Browsing locked
|
||||
// years is read-only and allowed (BFL 7:1 requires access to historical
|
||||
// data), but the user should see clearly that they're looking at a
|
||||
// closed/locked year so the absence of write controls feels intentional.
|
||||
const selectedPeriod = value ? periods.find((p) => p.id === value) : null
|
||||
const lockState: 'locked' | 'closed' | null = selectedPeriod?.locked_at
|
||||
? 'locked'
|
||||
: selectedPeriod?.is_closed
|
||||
? 'closed'
|
||||
: null
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{label && <Label>{label}</Label>}
|
||||
<div className={`flex items-center gap-2 ${label ? 'mt-1' : ''}`}>
|
||||
<Select
|
||||
value={selectValue}
|
||||
onValueChange={handleChange}
|
||||
disabled={!loaded || periods.length === 0}
|
||||
>
|
||||
<SelectTrigger className="w-full sm:w-[280px]">
|
||||
<SelectValue placeholder={loaded ? 'Välj räkenskapsår' : 'Laddar…'} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{includeAllOption && (
|
||||
<SelectItem value={ALL_YEARS_VALUE}>Alla räkenskapsår</SelectItem>
|
||||
)}
|
||||
{periods.map((p) => (
|
||||
<SelectItem key={p.id} value={p.id}>
|
||||
{p.name} ({p.period_start} — {p.period_end})
|
||||
{p.locked_at ? ' — låst' : p.is_closed ? ' — stängt' : ''}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{lockState && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="gap-1 text-xs font-normal shrink-0"
|
||||
title={
|
||||
lockState === 'locked'
|
||||
? 'Räkenskapsåret är låst — ingen bokföring kan ändras eller läggas till'
|
||||
: 'Räkenskapsåret är stängt (årsbokslut upprättat) — kan återöppnas av admin'
|
||||
}
|
||||
>
|
||||
<Lock className="h-3 w-3" />
|
||||
{lockState === 'locked' ? 'Låst' : 'Stängt'}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import { formatCurrency, formatDate } from '@/lib/utils'
|
||||
import { checkExpenseWarnings } from '@/lib/tax/expense-warnings'
|
||||
import { getDefaultAccountForCategory, getDefaultVatTreatmentForCategory } from '@/lib/bookkeeping/category-mapping'
|
||||
import { getTemplateById, type BookingTemplate } from '@/lib/bookkeeping/booking-templates'
|
||||
import { isLibraryTemplateId } from '@/lib/bookkeeping/template-library'
|
||||
import TemplatePicker from './TemplatePicker'
|
||||
import JournalEntryPreview from './JournalEntryPreview'
|
||||
import AccountCombobox from '@/components/bookkeeping/AccountCombobox'
|
||||
@@ -62,6 +63,7 @@ export default function SwipeCategorizationView({
|
||||
|
||||
const [showVatDropdown, setShowVatDropdown] = useState(false)
|
||||
const [pendingTemplateId, setPendingTemplateId] = useState<string | null>(null)
|
||||
const [pendingTemplate, setPendingTemplate] = useState<BookingTemplate | null>(null)
|
||||
const [pendingInboxItemId, setPendingInboxItemId] = useState<string | null>(null)
|
||||
|
||||
// Clear VAT treatment when switching to a liability/equity account (class 2)
|
||||
@@ -125,6 +127,7 @@ export default function SwipeCategorizationView({
|
||||
setAccountOverride(defaultAccount)
|
||||
setVatTreatment(defaultVat ?? 'none')
|
||||
setPendingTemplateId(null)
|
||||
setPendingTemplate(null)
|
||||
setPendingInboxItemId(null)
|
||||
setShowVatDropdown(false)
|
||||
setShowCategorySelect(false)
|
||||
@@ -136,7 +139,11 @@ export default function SwipeCategorizationView({
|
||||
setPendingCategory(template.fallback_category)
|
||||
setAccountOverride(template.debit_account)
|
||||
setVatTreatment(template.vat_treatment ?? 'none')
|
||||
setPendingTemplateId(template.id)
|
||||
// Library templates aren't in the static registry the backend validates against,
|
||||
// so we only send the ID for static templates. The pre-filled account/VAT drive
|
||||
// the booking for library templates.
|
||||
setPendingTemplateId(isLibraryTemplateId(template.id) ? null : template.id)
|
||||
setPendingTemplate(template)
|
||||
setPendingInboxItemId(null)
|
||||
setShowVatDropdown(false)
|
||||
setShowCategorySelect(false)
|
||||
@@ -152,6 +159,7 @@ export default function SwipeCategorizationView({
|
||||
setAccountOverride(template.debit_account)
|
||||
setVatTreatment(template.vat_treatment ?? 'none')
|
||||
setPendingTemplateId(templateId)
|
||||
setPendingTemplate(template)
|
||||
setPendingInboxItemId(inboxItemId ?? null)
|
||||
setShowVatDropdown(false)
|
||||
setShowCategorySelect(false)
|
||||
@@ -246,6 +254,7 @@ export default function SwipeCategorizationView({
|
||||
setShowReviewStep(false)
|
||||
setPendingCategory(null)
|
||||
setPendingTemplateId(null)
|
||||
setPendingTemplate(null)
|
||||
setPendingInboxItemId(null)
|
||||
moveToNext()
|
||||
} else {
|
||||
@@ -345,7 +354,7 @@ export default function SwipeCategorizationView({
|
||||
entityType={entityType}
|
||||
suggestedTemplates={txSuggestions}
|
||||
onSelect={handlePickerTemplateSelect}
|
||||
selectedTemplateId={pendingTemplateId ?? undefined}
|
||||
selectedTemplateId={pendingTemplate?.id ?? pendingTemplateId ?? undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -367,7 +376,7 @@ export default function SwipeCategorizationView({
|
||||
const categoryLabel = [...expenseCategories, ...incomeCategories].find(
|
||||
(c) => c.value === pendingCategory
|
||||
)?.label || pendingCategory
|
||||
const selectedTemplate = pendingTemplateId ? getTemplateById(pendingTemplateId) : null
|
||||
const selectedTemplate = pendingTemplate
|
||||
|
||||
// Auto-clear VAT when a class 2 (liability/equity) account is selected
|
||||
const isLiabilityAccount = accountOverride.startsWith('2')
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useState, useMemo, useEffect } from 'react'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Search, ChevronDown, ChevronUp, AlertTriangle, Info } from 'lucide-react'
|
||||
import { Search, ChevronDown, ChevronUp, AlertTriangle, Info, Building2 } from 'lucide-react'
|
||||
import {
|
||||
getCommonTemplates,
|
||||
getAdvancedTemplates,
|
||||
@@ -14,8 +14,9 @@ import {
|
||||
} from '@/lib/bookkeeping/booking-templates'
|
||||
import { formatAccountWithName } from '@/lib/bookkeeping/client-account-names'
|
||||
import { isCounterpartyTemplateId } from '@/lib/bookkeeping/counterparty-templates'
|
||||
import { convertLibraryToBookingTemplate } from '@/lib/bookkeeping/template-library'
|
||||
import { getAccountName } from '@/lib/bookkeeping/client-account-names'
|
||||
import type { EntityType } from '@/types'
|
||||
import type { BookingTemplateLibrary, EntityType } from '@/types'
|
||||
import type { SuggestedTemplate } from '@/lib/transactions/category-suggestions'
|
||||
|
||||
const GROUP_ORDER: TemplateGroup[] = [
|
||||
@@ -150,10 +151,34 @@ export default function TemplatePicker({
|
||||
}: TemplatePickerProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [showAdvanced, setShowAdvanced] = useState(false)
|
||||
const [libraryTemplates, setLibraryTemplates] = useState<BookingTemplate[]>([])
|
||||
|
||||
// Map direction to template direction filter (transfers show in both)
|
||||
const templateDirection = direction === 'income' ? 'income' : 'expense'
|
||||
|
||||
// Fetch user-created booking templates (company + team scope) and map
|
||||
// convertible ones into BookingTemplate shape. System templates are
|
||||
// already covered by the static list below, so we exclude them here.
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
;(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/settings/booking-templates', { signal: controller.signal })
|
||||
if (!res.ok) return
|
||||
const { data } = await res.json() as { data?: BookingTemplateLibrary[] }
|
||||
if (!data) return
|
||||
const mapped = data
|
||||
.filter((t) => !t.is_system && t.is_active)
|
||||
.map(convertLibraryToBookingTemplate)
|
||||
.filter((t): t is BookingTemplate => t !== null)
|
||||
setLibraryTemplates(mapped)
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return
|
||||
}
|
||||
})()
|
||||
return () => { controller.abort() }
|
||||
}, [])
|
||||
|
||||
const commonTemplates = useMemo(
|
||||
() => getCommonTemplates(entityType, templateDirection),
|
||||
[entityType, templateDirection]
|
||||
@@ -183,14 +208,29 @@ export default function TemplatePicker({
|
||||
[advancedTemplates, advancedTransfers]
|
||||
)
|
||||
|
||||
// Search results
|
||||
// User-created library templates filtered by direction + entity
|
||||
const relevantLibraryTemplates = useMemo(() => {
|
||||
return libraryTemplates.filter((t) => {
|
||||
if (entityType && t.entity_applicability !== 'all' && t.entity_applicability !== entityType) {
|
||||
return false
|
||||
}
|
||||
return t.direction === templateDirection || t.direction === 'transfer'
|
||||
})
|
||||
}, [libraryTemplates, entityType, templateDirection])
|
||||
|
||||
// Search results (static + library)
|
||||
const searchResults = useMemo(() => {
|
||||
if (!searchQuery.trim()) return null
|
||||
return searchTemplates(searchQuery, entityType).filter((t) => {
|
||||
const q = searchQuery.toLowerCase()
|
||||
const libraryMatches = relevantLibraryTemplates.filter((t) =>
|
||||
t.name_sv.toLowerCase().includes(q) || t.description_sv.toLowerCase().includes(q)
|
||||
)
|
||||
const staticMatches = searchTemplates(searchQuery, entityType).filter((t) => {
|
||||
if (t.direction === templateDirection || t.direction === 'transfer') return true
|
||||
return false
|
||||
})
|
||||
}, [searchQuery, entityType, templateDirection])
|
||||
return [...libraryMatches, ...staticMatches]
|
||||
}, [searchQuery, entityType, templateDirection, relevantLibraryTemplates])
|
||||
|
||||
// Group templates by group for display
|
||||
const commonGrouped = useMemo(() => groupTemplates(allCommon), [allCommon])
|
||||
@@ -246,6 +286,27 @@ export default function TemplatePicker({
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* User-created library templates (company + team scope) */}
|
||||
{relevantLibraryTemplates.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1.5">
|
||||
<Building2 className="h-3 w-3" />
|
||||
Mina mallar
|
||||
</p>
|
||||
<div className="space-y-1.5">
|
||||
{relevantLibraryTemplates.map((t) => (
|
||||
<TemplateCard
|
||||
key={t.id}
|
||||
template={t}
|
||||
selected={selectedTemplateId === t.id}
|
||||
onClick={() => handleSelect(t)}
|
||||
compact
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Counterparty templates — learned from history */}
|
||||
{hasCounterparty && (
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user