feat(empty-states): startkort on six pages with strata imagery (#1603)

Replace the true-empty states on Kundfakturor, Transaktioner, Underlag,
Loner, Bokforing and Skattekonto with StartCard: a self-contained dark
hero (image-derived ground baked into the strata render, white primary
CTA) that says what the page can do instead of what is missing. Primary
CTAs lead with the connect/setup action per page (bank via PSD2 deep
link, mailboxes, Skatteverket, migration import); filtered/search empty
states and viewer fallbacks keep the old compact states. Design signed
off in the Startkort prototype iterations 2026-08-13.

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
2026-08-13 23:27:24 +02:00
committed by GitHub
co-authored by Jakob Wennberg Claude Fable 5
parent 08440fed94
commit 57d6651cfc
18 changed files with 556 additions and 248 deletions
+5 -2
View File
@@ -1,6 +1,6 @@
'use client'
import { Fragment, useState, useEffect, useCallback, useRef } from 'react'
import { Fragment, useState, useEffect, useCallback, useRef, type ReactNode } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useTranslations } from 'next-intl'
@@ -189,7 +189,7 @@ const PAGE_SIZE_VALUES = new Set<PageSizeChoice>(['20', '50', '100', 'all'])
// Sentinel limit sent for "Alla". The route clamps this to its own MAX_LIMIT.
const ALL_PAGE_SIZE = 100000
export default function JournalEntryList() {
export default function JournalEntryList({ pristineSlot }: { pristineSlot?: ReactNode } = {}) {
const router = useRouter()
const { toast } = useToast()
const { canWrite } = useCanWrite()
@@ -932,6 +932,9 @@ export default function JournalEntryList() {
// drafts view) must fall through to the main render below so the
// Verifikat/Utkast toggle stays reachable.
if (!loading && entries.length === 0 && !loadFailed && !hasActiveFilters && listMode === 'committed' && draftCount === 0) {
if (pristineSlot) {
return <>{pristineSlot}</>
}
return (
<DataList className="stagger-enter">
<DataListEmpty