feat(export): direct download of the complete archive from the Exportera tab (#1632)
The full-archive ZIP endpoint (SIE + reports + all documents) has existed since the settings/backup page, but lost its UI when that page became a redirect: the BackupDownloadForm component was orphaned and the download was API-only. Resurface it the way the export tab already works: a "Komplett arkiv" ImportRow (owner/admin only, matching the route's role gate) opening a small centered dialog like the SIE export next to it, with scope choice, fiscal-year picker, include-documents toggle, live size estimate, 413 handling, and a #full-archive deep link. The orphaned form and its dead settings_backup_download i18n namespace are deleted; its logic lives on in components/import/FullArchiveDialog. Over-limit copy now points at the existing cloud sync instead of promising it "in a later version". 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
Jakob Wennberg
Claude Fable 5
Jakob Wennberg
Claude Fable 5
parent
c897a906df
commit
44c3116357
@@ -1,425 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useLocale, useTranslations } from 'next-intl'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { AttnLine } from '@/components/ui/attn-line'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import { Cloud, Download, Info, Loader2 } from 'lucide-react'
|
||||
import { ENABLED_EXTENSION_IDS } from '@/lib/extensions/_generated/enabled-extensions'
|
||||
import { getSettingsPanel } from '@/lib/extensions/settings-panel-registry'
|
||||
import type { FiscalPeriod } from '@/types'
|
||||
import {
|
||||
getErrorMessage as getUserErrorMessage,
|
||||
type ErrorLocale,
|
||||
} from '@/lib/errors/get-error-message'
|
||||
|
||||
const CloudBackupPanel = getSettingsPanel('cloud-backup')
|
||||
const hasCloudBackup = ENABLED_EXTENSION_IDS.has('cloud-backup')
|
||||
|
||||
type Scope = 'all' | 'period'
|
||||
|
||||
interface EstimateResponse {
|
||||
total_bytes: number
|
||||
document_bytes: number
|
||||
document_count: number
|
||||
size_limit_bytes: number
|
||||
within_limit: boolean
|
||||
}
|
||||
|
||||
const LAST_DOWNLOAD_STORAGE_KEY = 'Accounted:last-backup-download'
|
||||
|
||||
export function BackupDownloadForm() {
|
||||
const t = useTranslations('settings_backup_download')
|
||||
const errorLocale = useLocale() as ErrorLocale
|
||||
const { toast } = useToast()
|
||||
const { company } = useCompany()
|
||||
|
||||
const [scope, setScope] = useState<Scope>('all')
|
||||
const [includeDocuments, setIncludeDocuments] = useState(true)
|
||||
// null = the fiscal years are not known: still loading, or the read failed
|
||||
// (periodsError). A failed read must never render the confirmed-empty
|
||||
// "Inga räkenskapsår" option: the company usually has fiscal years, the
|
||||
// read just did not land. Scope "all" never touches this list, so the full
|
||||
// backup keeps working either way.
|
||||
const [periods, setPeriods] = useState<FiscalPeriod[] | null>(null)
|
||||
// detail === null: transient, so the line carries a retry. A detail sentence
|
||||
// means the user has to act (an expired session) and a retry cannot help.
|
||||
const [periodsError, setPeriodsError] = useState<{ detail: string | null } | null>(null)
|
||||
const [periodsReloadKey, setPeriodsReloadKey] = useState(0)
|
||||
const [selectedPeriodId, setSelectedPeriodId] = useState<string>('')
|
||||
const [estimate, setEstimate] = useState<EstimateResponse | null>(null)
|
||||
const [isLoadingEstimate, setIsLoadingEstimate] = useState(false)
|
||||
const [isDownloading, setIsDownloading] = useState(false)
|
||||
const [lastDownloadedAt, setLastDownloadedAt] = useState<string | null>(null)
|
||||
|
||||
const storageKey = useMemo(
|
||||
() => (company ? `${LAST_DOWNLOAD_STORAGE_KEY}:${company.id}` : null),
|
||||
[company]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!storageKey) return
|
||||
setLastDownloadedAt(window.localStorage.getItem(storageKey))
|
||||
}, [storageKey])
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
async function loadPeriods() {
|
||||
setPeriodsError(null)
|
||||
try {
|
||||
const res = await fetch('/api/bookkeeping/fiscal-periods')
|
||||
if (!res.ok) {
|
||||
// Not-JSON bodies (an HTML error page, an empty 502) leave null,
|
||||
// and getErrorMessage falls back to the status map.
|
||||
const body = await res.json().catch(() => null)
|
||||
if (cancelled) return
|
||||
const sessionGone = res.status === 401 || res.status === 403
|
||||
setPeriods(null)
|
||||
setPeriodsError({
|
||||
detail: sessionGone
|
||||
? getUserErrorMessage(body, { statusCode: res.status, locale: errorLocale })
|
||||
: null,
|
||||
})
|
||||
return
|
||||
}
|
||||
// A 200 whose body will not parse throws into the catch below; a 200
|
||||
// without the list is a failed read too. Neither may become a
|
||||
// fabricated "Inga räkenskapsår".
|
||||
const body = await res.json()
|
||||
if (cancelled) return
|
||||
if (!Array.isArray(body?.data)) {
|
||||
setPeriods(null)
|
||||
setPeriodsError({ detail: null })
|
||||
return
|
||||
}
|
||||
const sorted = body.data as FiscalPeriod[]
|
||||
setPeriods(sorted)
|
||||
if (sorted.length > 0) {
|
||||
setSelectedPeriodId((prev) => prev || sorted[0].id)
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) {
|
||||
setPeriods(null)
|
||||
setPeriodsError({ detail: null })
|
||||
}
|
||||
}
|
||||
}
|
||||
void loadPeriods()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [periodsReloadKey, errorLocale])
|
||||
|
||||
const estimateUrl = useMemo(() => {
|
||||
const params = new URLSearchParams({ estimate: '1', scope })
|
||||
if (scope === 'period' && selectedPeriodId) {
|
||||
params.set('period_id', selectedPeriodId)
|
||||
}
|
||||
if (!includeDocuments) {
|
||||
params.set('include_documents', 'false')
|
||||
}
|
||||
return `/api/reports/full-archive?${params.toString()}`
|
||||
}, [scope, selectedPeriodId, includeDocuments])
|
||||
|
||||
useEffect(() => {
|
||||
if (scope === 'period' && !selectedPeriodId) {
|
||||
setEstimate(null)
|
||||
return
|
||||
}
|
||||
let cancelled = false
|
||||
setIsLoadingEstimate(true)
|
||||
setEstimate(null)
|
||||
;(async () => {
|
||||
try {
|
||||
const res = await fetch(estimateUrl)
|
||||
if (!res.ok) return
|
||||
const { data } = (await res.json()) as { data: EstimateResponse }
|
||||
if (!cancelled) setEstimate(data)
|
||||
} catch {
|
||||
// leave estimate null; we still let users attempt the download
|
||||
} finally {
|
||||
if (!cancelled) setIsLoadingEstimate(false)
|
||||
}
|
||||
})()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [estimateUrl, scope, selectedPeriodId])
|
||||
|
||||
const downloadUrl = useMemo(() => {
|
||||
const params = new URLSearchParams({ scope })
|
||||
if (scope === 'period' && selectedPeriodId) {
|
||||
params.set('period_id', selectedPeriodId)
|
||||
}
|
||||
if (!includeDocuments) {
|
||||
params.set('include_documents', 'false')
|
||||
}
|
||||
return `/api/reports/full-archive?${params.toString()}`
|
||||
}, [scope, selectedPeriodId, includeDocuments])
|
||||
|
||||
const handleDownload = useCallback(async () => {
|
||||
if (scope === 'period' && !selectedPeriodId) return
|
||||
|
||||
setIsDownloading(true)
|
||||
try {
|
||||
const res = await fetch(downloadUrl)
|
||||
if (!res.ok) {
|
||||
if (res.status === 413) {
|
||||
const body = await res.json().catch(() => ({}))
|
||||
const sizeMb = body.size_bytes ? Math.round(body.size_bytes / (1024 * 1024)) : null
|
||||
toast({
|
||||
title: t('toast_too_large_title'),
|
||||
description: sizeMb
|
||||
? t('toast_too_large_with_size', { size: sizeMb })
|
||||
: t('toast_too_large_generic'),
|
||||
variant: 'destructive',
|
||||
})
|
||||
return
|
||||
}
|
||||
const body = await res.json().catch(() => ({}))
|
||||
throw new Error(body.error || t('error_create_archive'))
|
||||
}
|
||||
|
||||
const blob = await res.blob()
|
||||
const contentDisposition = res.headers.get('Content-Disposition') || ''
|
||||
const match = contentDisposition.match(/filename="?([^";]+)"?/)
|
||||
const filename = match?.[1] || 'arkiv.zip'
|
||||
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = filename
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
window.URL.revokeObjectURL(url)
|
||||
|
||||
const now = new Date().toISOString()
|
||||
if (storageKey) {
|
||||
window.localStorage.setItem(storageKey, now)
|
||||
setLastDownloadedAt(now)
|
||||
}
|
||||
|
||||
toast({ title: t('toast_backup_created'), description: filename })
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: t('toast_backup_failed'),
|
||||
description: err instanceof Error ? getUserErrorMessage(err) : t('toast_try_again'),
|
||||
variant: 'destructive',
|
||||
})
|
||||
} finally {
|
||||
setIsDownloading(false)
|
||||
}
|
||||
}, [downloadUrl, scope, selectedPeriodId, storageKey, toast, t])
|
||||
|
||||
const isOverLimit = !!estimate && !estimate.within_limit && includeDocuments
|
||||
const canDownload = !isDownloading && !isOverLimit && (scope === 'all' || !!selectedPeriodId)
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('create_backup_title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('scope_label')}</Label>
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<ScopeRadio
|
||||
checked={scope === 'all'}
|
||||
onChange={() => setScope('all')}
|
||||
label={t('scope_all_label')}
|
||||
description={t('scope_all_desc')}
|
||||
recommendedLabel={t('recommended')}
|
||||
recommended
|
||||
/>
|
||||
<ScopeRadio
|
||||
checked={scope === 'period'}
|
||||
onChange={() => setScope('period')}
|
||||
label={t('scope_period_label')}
|
||||
description={t('scope_period_desc')}
|
||||
recommendedLabel={t('recommended')}
|
||||
/>
|
||||
</div>
|
||||
{/* Live region always mounted so the failure is announced when it
|
||||
appears, not merely inserted. The full-history scope stays
|
||||
fully functional; the line only reports that per-period backup
|
||||
cannot be offered until the fiscal years can be read. */}
|
||||
<div role="status" aria-live="polite" className="min-w-0">
|
||||
{periodsError && (
|
||||
<AttnLine
|
||||
action={
|
||||
periodsError.detail
|
||||
? undefined
|
||||
: {
|
||||
label: t('periods_load_retry'),
|
||||
onClick: () => setPeriodsReloadKey((k) => k + 1),
|
||||
}
|
||||
}
|
||||
>
|
||||
{periodsError.detail
|
||||
? `${t('periods_load_failed')} ${periodsError.detail}`
|
||||
: t('periods_load_failed')}
|
||||
</AttnLine>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{scope === 'period' && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="backup-period">{t('fiscal_year_label')}</Label>
|
||||
<select
|
||||
id="backup-period"
|
||||
value={selectedPeriodId}
|
||||
onChange={(e) => setSelectedPeriodId(e.target.value)}
|
||||
className="flex h-10 w-full max-w-xs rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
||||
disabled={periods === null || periods.length === 0}
|
||||
>
|
||||
{/* The confirmed-empty option only after a confirmed empty
|
||||
read; an unknown list renders an empty disabled select. */}
|
||||
{periods !== null && periods.length === 0 && (
|
||||
<option value="">{t('no_fiscal_years')}</option>
|
||||
)}
|
||||
{(periods ?? []).map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.period_start}: {p.period_end}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="include-documents">{t('include_docs_label')}</Label>
|
||||
<p className="text-xs text-muted-foreground max-w-prose">
|
||||
{t('include_docs_help')}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="include-documents"
|
||||
checked={includeDocuments}
|
||||
onCheckedChange={setIncludeDocuments}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border bg-muted/30 p-3 text-sm">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Info className="h-3.5 w-3.5" />
|
||||
{isLoadingEstimate ? (
|
||||
<span>{t('calculating_size')}</span>
|
||||
) : estimate ? (
|
||||
<span>
|
||||
{t('estimated_size')} <strong className="text-foreground">{formatBytes(estimate.total_bytes)}</strong>
|
||||
{' '}({estimate.document_count} {estimate.document_count === 1 ? t('attachment_singular') : t('attachment_plural')})
|
||||
</span>
|
||||
) : (
|
||||
<span>{t('size_will_calculate')}</span>
|
||||
)}
|
||||
</div>
|
||||
{isOverLimit && (
|
||||
<p className="mt-2 text-xs text-destructive">
|
||||
{t('over_limit_message', { limit: formatBytes(estimate!.size_limit_bytes) })}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<Button onClick={handleDownload} disabled={!canDownload}>
|
||||
{isDownloading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
{t('creating_backup')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{t('create_and_download')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{lastDownloadedAt && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('last_download')}: {formatDate(lastDownloadedAt)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{hasCloudBackup && CloudBackupPanel ? (
|
||||
<CloudBackupPanel />
|
||||
) : (
|
||||
<Card className="border-dashed">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Cloud className="h-4 w-4 text-muted-foreground" />
|
||||
{t('cloud_sync_title')}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground max-w-prose">
|
||||
{t('cloud_sync_disabled_help')}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface ScopeRadioProps {
|
||||
checked: boolean
|
||||
onChange: () => void
|
||||
label: string
|
||||
description: string
|
||||
recommended?: boolean
|
||||
recommendedLabel: string
|
||||
}
|
||||
|
||||
function ScopeRadio({ checked, onChange, label, description, recommended, recommendedLabel }: ScopeRadioProps) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onChange}
|
||||
className={`flex-1 rounded-lg border-2 p-3 text-left transition-colors ${
|
||||
checked ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/40'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm">{label}</span>
|
||||
{recommended && (
|
||||
<span className="text-[10px] font-medium uppercase tracking-wider text-primary">
|
||||
{recommendedLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
const kb = bytes / 1024
|
||||
if (kb < 1024) return `${kb.toFixed(1)} kB`
|
||||
const mb = kb / 1024
|
||||
if (mb < 1024) return `${mb.toFixed(1)} MB`
|
||||
return `${(mb / 1024).toFixed(2)} GB`
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
const d = new Date(iso)
|
||||
return d.toLocaleString('sv-SE', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user