MattssonandClaude Fable 5
87f0d5af48
* fix(errors): close remaining raw-message leaks after #1048 (#337) Follow-up to PR #1048. No user-visible toast or response field can now carry a raw engine or DB message; everything maps through getErrorMessage or the structured-errors registry. - get-error-message: only normalize a code-carrying Error instance into the structured path when the registry knows the code; unknown codes (Node system errors, stray third-party codes, Error-wrapped Postgres SQLSTATEs) fall through to pattern match, Swedish check, Postgres map and the status/context/generic fallbacks instead of returning the raw message. New Swedish-detection pattern for "ar last" phrases and a known-pattern row for "already has a journal entry". - structured-errors: add CANNOT_EDIT_NON_DRAFT (409) and MANDATORY_DIMENSION_MISSING (400) rows, plus common Node network codes (ECONNREFUSED, ECONNRESET, ETIMEDOUT, ENOTFOUND, EAI_AGAIN, EPIPE) as retryable 503 transients with a Swedish message. - pending-operations commit + bulk-commit routes: map executor error strings through getErrorMessage before responding (raw stays in logs); Swedish passes through, English falls to status-appropriate Swedish. - pending page: toast via getErrorMessage, fixing raw English toasts and "[object Object]" for structured envelopes on commit/bulk/reject. - transactions book + journal-entries routes: untyped catch and DB list errors no longer return err.message; mapped or static Swedish instead. - invoice send + issue-credit-note: partial_failures reasons are now Swedish (raw provider/DB text logged, never returned). - Tests: new unknown-code/Error-instance suite, registry rows asserted, route tests updated off the pinned raw-English expectations. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(skatteverket): target the räkenskapsår for yearly VAT redovisningsperiod A yearly filer with a broken fiscal year has a Skatteverket period ending in its FY-end month, not December, and the panel's year state is never maintained in yearly mode (the year picker is replaced by the räkenskapsår selector), so calls targeted the wrong period even for calendar-FY companies filing after year end. The selected fiscal period now rides through the whole chain: panel query strings, draft/validate/ submit bodies, buildMomsuppgift (which resolves the FY bounds so the period id and the figures describe the same räkenskapsår), and the staged-commit path. MCP callers without a fiscal period keep the calendar fallback. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(deadlines): group same-day skattekonto deadlines into one card Moms, AGI and preliminärskatt legally share the skattekonto date (den 12:e), so a small monthly-moms employer saw 2-3 near-identical rows per month. Two or more pending system rows of the skattekonto family on the same due date now render as one grouped card with the date block once and each obligation as a sub-row keeping its own confirm-to-complete flow. Presentation only: rows, statuses, ICS feed unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(deadlines): KU + ROT/RUT + long-tail opt-in deadlines, rolling horizon Follow-ups from the #1028 audit left out of the #1057-#1060 fix stack, each with its own condition modeling: - kontrolluppgifter (KU10/KU20/KU31), due 31 Jan (SFL 24 kap. 1 §): opt-in flag suggested from ledger signals (2898 utdelning, 2393/2893 ägarlån; deliberately not 2091, see DECISIONS.md), AB only, mirroring the #1059 EU-sales suggest-and-confirm pattern. - rot_rut_begaran, due 31 Jan after the payment year (Lag 2009:194 8 §): rows generated only for years with actually PAID ROT/RUT invoices, resolved inside the generator; invoice-derived suggestion. - Long tail, explicit opt-in ('Fler deadlines'): OSS quarterly and IOSS monthly with a skipBankingDayAdjustment config flag (EU-law dates stand on weekends), Intrastat (10th banking day of the following month), punktskatt (ordinary skattedeklaration schedule), and fyllnadsinbetalning (12th of 2nd month over 30k / 3rd of 5th month, SFL 62:8 + 65 kap.). Kvarskatt deferred: needs a slutskattebesked date the app does not hold. - Rolling generation horizon: recurring types ~6 months ahead, annual 12 months, mirrored in the backfill expectation keys so the nightly cron never thrashes; regeneration now preserves manual in_progress status; one-time cleanup migration removes existing far-future rows. Migrations also applied to the staging branch, together with the previously missing 20260717xxxxxx deadline migrations (staging had drifted and lacked dismissed_at). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(arsredovisning): keep narrative editable after year-end close The narrative save endpoint refused writes whenever the fiscal period was closed/locked, but Verkstall bokslut closes the period before the arsredovisning text is ever written, so every legitimate save failed with PERIOD_LOCKED and the PDF fell back to placeholder text. The narrative is arsredovisning document text (ARL 6 kap.), not journal rakenskapsinformation, so the bookkeeping period lock does not apply. Saves are now refused only once a Bolagsverket submission for the period is registrerad (ARSREDOVISNING_REGISTERED, 409); the filed artifact was already frozen separately by the submissions immutability trigger. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(skatteverket): surface dead SKV connections and nudge reconnect Prod has ~70 companies that connected Skatteverket before the post-connect sync fix (#1010) and silently never synced skattekonto: the only reconnect prompt lived in the settings panel nobody revisits. - transactions-page banner when the connection is needs_reconsent or expired without refresh, linking to /settings/tax - pre-connect note in the connect panel: approve ALL behorigheter on Skatteverket's consent page (previously only shown after a failure) - wire the inert skattekonto.connection.expired event to an email nudge to the token owner; one send per consent episode via claim-first dedup in notification_log (type skv_connection_expired, partial unique index in migration 20260720090000, applied to staging) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(archive): per-year behandlingshistorik covers late-booked vouchers + Drive backup disclaimer The per-fiscal-year archive filtered audit rows by created_at within the period, dropping treatment history for bokslut entries, stornos and SIE imports booked after year end (BFNAR 2013:2 kap 8). The year archive now unions the date window with every audit row touching the period's journal entries and lines, deduped by audit id; line rows (company_id NULL by trigger design) are admitted via a scoped OR and reachable on the service-role backup path. ARCHIVE_FORMAT_VERSION 2->3 forces a one-time Drive re-upload so existing archives pick up the complete history. The Drive card on /import Exportera and the LASMIG texts now state the Drive copy is a convenience backup, not the BFL 7 kap legal archive. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(decisions): clarify Arsredovisning narrative save behavior on submission status * feat(invoices): gate payment links behind invoice settings opt-in The payment-link section (manual URL field + Stripe auto-create toggle) was visible on every invoice and auto-created Stripe links on send for any connected company. It is now opt-in per company: - new company_settings.invoice_payment_links_enabled, default false for everyone (no grandfathering of Stripe-connected companies) - invoice editor hides the whole section unless enabled; a draft that already carries a link still shows it so old links stay clearable - enforced server-side in maybeCreatePaymentLinkForInvoice (after the provider lookup, so the extension-free core build never queries), so dashboard, v1, MCP and recurring sends all obey it - new toggle on Settings -> Invoicing, saves instantly; sv/en strings Migration applied to the staging branch; prod gets it on merge. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(tests): add invoice_payment_links_enabled to company settings fixture The makeCompanySettings fixture missed the new required boolean, failing the core-only build's type check of tests/helpers.ts. Default false, matching the migration default. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Emil <emilmattsson14@gmail.com> * fix(review): address CodeRabbit, compliance and Swedish review findings Round 2 of PR #1076 review feedback, one change per accepted finding: - pending page: res.json() safe fallback in both commit paths so a non-JSON proxy response cannot surface a raw parser error - bulk-commit: map operation status enums to Swedish display labels in the 'Redan hanterad' skip message - payment-link settings: disable the toggle while a save is in flight to prevent out-of-order PUT responses - deadlines group card: route all UI strings through next-intl (deadlines namespace, sv + en) - archive export: scope the period audit entry lookup to posted/reversed, matching the rest of the export - error tests: assert the exact registry English message for ECONNREFUSED to lock the no-leakage contract - signal routes: log.warn when best-effort lookups swallow a Supabase error (forensics), keep fail-closed behavior - narrative route: document that 'avslutad' submissions deliberately stay editable (never registered at Bolagsverket) - VAT: yearly declarations without an explicit fiscalPeriodId now resolve the räkenskapsår ending in the target year from fiscal_periods instead of assuming a calendar FY (SFL 26 kap 10-11 §§); calendar fallback only when no fiscal period exists - deadlines: IOSS deadline no longer requires vat_registered (Art. 369s has no Swedish VAT registration prerequisite) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Emil <emilmattsson14@gmail.com> --------- Signed-off-by: Emil <emilmattsson14@gmail.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
3320 lines
126 KiB
TypeScript
3320 lines
126 KiB
TypeScript
'use client'
|
||
|
||
// Report view components, extracted verbatim from app/(dashboard)/reports/page.tsx.
|
||
// Rendered by the focused /reports/[slug] route (see components/reports/FocusedReport.tsx).
|
||
// The regulated table/figure rendering is unchanged from the original monolith.
|
||
|
||
import React, { useState, useEffect, useCallback } from 'react'
|
||
import Link from 'next/link'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { AlertCircle, ChevronDown, ChevronRight, ExternalLink, FileCode, FileDown, Percent } from 'lucide-react'
|
||
import AgentSparkleButton from '@/components/agent/AgentSparkleButton'
|
||
import { Skeleton } from '@/components/ui/skeleton'
|
||
import { EmptyState } from '@/components/ui/empty-state'
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from '@/components/ui/select'
|
||
import { FiscalYearSelector } from '@/components/common/FiscalYearSelector'
|
||
import { formatDate } from '@/lib/utils'
|
||
import { roundOre } from '@/lib/money'
|
||
import { formatVoucher } from '@/lib/bookkeeping/voucher-series-resolver'
|
||
import { AccountNumber } from '@/components/ui/account-number'
|
||
import { ReportExportMenu } from '@/components/reports/ReportExportMenu'
|
||
import { VatChecksCard } from '@/components/reports/VatChecksCard'
|
||
import { runVatDeclarationChecks } from '@/lib/reports/vat-declaration-checks'
|
||
import { Table, TableBody } from '@/components/ui/table'
|
||
import { useCompanySettings } from '@/components/settings/useSettings'
|
||
import dynamic from 'next/dynamic'
|
||
import { SkatteverketPanel } from '@/components/reports/SkatteverketPanel'
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||
import { useCanWrite } from '@/lib/hooks/use-can-write'
|
||
import type { FormLine } from '@/components/bookkeeping/JournalEntryForm'
|
||
import type { VatSettlementProposal } from '@/lib/reports/vat-settlement'
|
||
|
||
// Recharts is ~180KB: defer the chart components so report tables (the
|
||
// regulated content) render without waiting for the charting bundle.
|
||
const chartFallback = () => <Skeleton className="h-64 w-full" />
|
||
const TrialBalanceChart = dynamic(
|
||
() => import('@/components/reports/TrialBalanceChart').then((m) => m.TrialBalanceChart),
|
||
{ ssr: false, loading: chartFallback },
|
||
)
|
||
const IncomeExpenseChart = dynamic(
|
||
() => import('@/components/reports/IncomeExpenseChart').then((m) => m.IncomeExpenseChart),
|
||
{ ssr: false, loading: chartFallback },
|
||
)
|
||
// The full journal entry editor is heavy (BAS catalogue, comboboxes, review
|
||
// dialogs): defer it until the user opens the momsverifikat dialog.
|
||
const JournalEntryForm = dynamic(() => import('@/components/bookkeeping/JournalEntryForm'), {
|
||
ssr: false,
|
||
loading: () => <Skeleton className="h-64 w-full" />,
|
||
})
|
||
import { useReportRowExpansion } from '@/components/reports/ReportRowExpansion'
|
||
import type {
|
||
ReportSourceLine,
|
||
ReportSourceFetcher,
|
||
} from '@/lib/reports/source-lines'
|
||
import type { MonthlyDataPoint } from '@/components/reports/IncomeExpenseChart'
|
||
import type { DateRangeValue } from '@/components/common/ReportDateRange'
|
||
import type { DimensionFilterValue } from '@/components/reports/DimensionFilter'
|
||
import type {
|
||
TrialBalanceRow,
|
||
IncomeStatementReport,
|
||
BalanceSheetReport,
|
||
ResultatrapportReport,
|
||
BalansrapportReport,
|
||
DimensionPnlReport,
|
||
VatDeclaration,
|
||
VatPeriodType,
|
||
} from '@/types'
|
||
|
||
function formatAmount(amount: number): string {
|
||
return amount.toLocaleString('sv-SE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||
}
|
||
|
||
function reportQuery(
|
||
periodId: string,
|
||
range?: DateRangeValue,
|
||
dimensionFilter?: DimensionFilterValue | null,
|
||
): string {
|
||
const params = new URLSearchParams({ period_id: periodId })
|
||
if (range?.fromDate) params.set('from_date', range.fromDate)
|
||
if (range?.toDate) params.set('to_date', range.toDate)
|
||
if (dimensionFilter) {
|
||
params.set('dim_no', dimensionFilter.dimNo)
|
||
params.set('dim_code', dimensionFilter.code)
|
||
}
|
||
return params.toString()
|
||
}
|
||
|
||
export function TrialBalanceView({ periodId, onNavigateToAccount }: { periodId: string; onNavigateToAccount: (account: string) => void }) {
|
||
const [data, setData] = useState<{
|
||
rows: TrialBalanceRow[]
|
||
totalDebit: number
|
||
totalCredit: number
|
||
isBalanced: boolean
|
||
} | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [viewMode, setViewMode] = useState<'simplified' | 'detailed'>('simplified')
|
||
|
||
useEffect(() => {
|
||
setLoading(true)
|
||
setError(null)
|
||
fetch(`/api/reports/trial-balance?period_id=${periodId}`)
|
||
.then((res) => res.json())
|
||
.then((result) => {
|
||
if (result.error) {
|
||
setError(result.error)
|
||
} else {
|
||
setData(result.data)
|
||
}
|
||
setLoading(false)
|
||
})
|
||
.catch(() => {
|
||
setError('Kunde inte hämta saldobalans')
|
||
setLoading(false)
|
||
})
|
||
}, [periodId])
|
||
|
||
if (loading) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-6 space-y-2">
|
||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||
<Skeleton key={i} className="h-4 w-full" />
|
||
))}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-destructive">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2" />
|
||
{error}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (!data || data.rows.length === 0) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Inga bokförda verifikationer i denna period.
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
function getNetBalance(row: TrialBalanceRow, type: 'opening' | 'period' | 'closing'): number {
|
||
let debit: number, credit: number
|
||
if (type === 'opening') {
|
||
debit = row.opening_debit; credit = row.opening_credit
|
||
} else if (type === 'period') {
|
||
debit = row.period_debit; credit = row.period_credit
|
||
} else {
|
||
debit = row.closing_debit; credit = row.closing_credit
|
||
}
|
||
// Credit-normal accounts (liabilities/equity class 2, revenue class 3): positive when credit > debit
|
||
// Debit-normal accounts (assets class 1, expenses class 4-9): positive when debit > credit
|
||
const creditNormal = row.account_class === 2 || row.account_class === 3
|
||
return roundOre(creditNormal ? credit - debit : debit - credit)
|
||
}
|
||
|
||
function formatSigned(amount: number): string {
|
||
if (amount === 0) return ''
|
||
return amount < 0
|
||
? `−${formatAmount(Math.abs(amount))}`
|
||
: formatAmount(amount)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<ReportExportMenu items={[{ format: 'xlsx', href: `/api/reports/trial-balance/xlsx?period_id=${periodId}` }]} />
|
||
<TrialBalanceChart rows={data.rows} />
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle>Saldobalans</CardTitle>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex items-center gap-0.5 rounded-md border border-border bg-card p-0.5">
|
||
<button
|
||
onClick={() => setViewMode('simplified')}
|
||
className={`px-3 py-1 text-xs rounded-sm transition-colors ${
|
||
viewMode === 'simplified'
|
||
? 'bg-secondary text-foreground'
|
||
: 'text-muted-foreground hover:text-foreground'
|
||
}`}
|
||
>
|
||
Förenklad
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('detailed')}
|
||
className={`px-3 py-1 text-xs rounded-sm transition-colors ${
|
||
viewMode === 'detailed'
|
||
? 'bg-secondary text-foreground'
|
||
: 'text-muted-foreground hover:text-foreground'
|
||
}`}
|
||
>
|
||
Detaljerad
|
||
</button>
|
||
</div>
|
||
{data.isBalanced ? (
|
||
<Badge variant="success">Balanserad</Badge>
|
||
) : (
|
||
<Badge variant="destructive">Ej balanserad</Badge>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="overflow-x-auto -mx-2 px-2">
|
||
{viewMode === 'simplified' ? (
|
||
<table className="w-full text-sm min-w-[500px]">
|
||
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
|
||
<tr className="border-b text-left">
|
||
<th className="py-2 w-8"></th>
|
||
<th className="py-2 w-20">Konto</th>
|
||
<th className="py-2">Namn</th>
|
||
<th className="py-2 w-32 text-right">Ingående saldo</th>
|
||
<th className="py-2 w-32 text-right">Förändring</th>
|
||
<th className="py-2 w-32 text-right">Utgående saldo</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{data.rows.map((row) => (
|
||
<TrialBalanceSimplifiedRow
|
||
key={row.account_number}
|
||
row={row}
|
||
periodId={periodId}
|
||
onNavigateToAccount={onNavigateToAccount}
|
||
getNetBalance={getNetBalance}
|
||
formatSigned={formatSigned}
|
||
/>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
) : (
|
||
<table className="w-full text-sm min-w-[600px]">
|
||
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
|
||
<tr className="border-b text-left">
|
||
<th className="py-2 w-8"></th>
|
||
<th className="py-2 w-20">Konto</th>
|
||
<th className="py-2">Namn</th>
|
||
<th className="py-2 w-28 text-right">Period debet</th>
|
||
<th className="py-2 w-28 text-right">Period kredit</th>
|
||
<th className="py-2 w-28 text-right">Saldo debet</th>
|
||
<th className="py-2 w-28 text-right">Saldo kredit</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{data.rows.map((row) => (
|
||
<TrialBalanceDetailedRow
|
||
key={row.account_number}
|
||
row={row}
|
||
periodId={periodId}
|
||
onNavigateToAccount={onNavigateToAccount}
|
||
/>
|
||
))}
|
||
</tbody>
|
||
<tfoot>
|
||
<tr className="font-semibold border-t-2">
|
||
<td className="py-2"></td>
|
||
<td colSpan={2} className="py-2">Summa</td>
|
||
<td className="py-2 text-right">
|
||
{formatAmount(data.rows.reduce((s, r) => s + r.period_debit, 0))}
|
||
</td>
|
||
<td className="py-2 text-right">
|
||
{formatAmount(data.rows.reduce((s, r) => s + r.period_credit, 0))}
|
||
</td>
|
||
<td className={`py-2 text-right ${data.isBalanced ? 'text-success' : 'text-destructive'}`}>
|
||
{formatAmount(data.totalDebit)}
|
||
</td>
|
||
<td className={`py-2 text-right ${data.isBalanced ? 'text-success' : 'text-destructive'}`}>
|
||
{formatAmount(data.totalCredit)}
|
||
</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Lazy fetcher for a TB account's source lines. Memoised at the row level so
|
||
// repeated toggling never refetches.
|
||
function makeTrialBalanceFetcher(accountNumber: string, periodId: string): ReportSourceFetcher {
|
||
return async () => {
|
||
const res = await fetch(
|
||
`/api/reports/trial-balance/account/${encodeURIComponent(accountNumber)}/sources?fiscal_period_id=${encodeURIComponent(periodId)}`
|
||
)
|
||
const json = await res.json()
|
||
if (!res.ok) throw new Error(json.error || 'Kunde inte hämta verifikat')
|
||
const lines: ReportSourceLine[] = json.data?.lines || []
|
||
return { lines, next_cursor: json.data?.next_cursor ?? null }
|
||
}
|
||
}
|
||
|
||
function TrialBalanceSimplifiedRow({
|
||
row,
|
||
periodId,
|
||
onNavigateToAccount,
|
||
getNetBalance,
|
||
formatSigned,
|
||
}: {
|
||
row: TrialBalanceRow
|
||
periodId: string
|
||
onNavigateToAccount: (account: string) => void
|
||
getNetBalance: (row: TrialBalanceRow, type: 'opening' | 'period' | 'closing') => number
|
||
formatSigned: (amount: number) => string
|
||
}) {
|
||
const fetcher = React.useMemo(
|
||
() => makeTrialBalanceFetcher(row.account_number, periodId),
|
||
[row.account_number, periodId]
|
||
)
|
||
const { Toggle, Panel } = useReportRowExpansion(fetcher, `tb-${row.account_number}`)
|
||
|
||
const ob = getNetBalance(row, 'opening')
|
||
const ch = getNetBalance(row, 'period')
|
||
const cb = getNetBalance(row, 'closing')
|
||
|
||
return (
|
||
<>
|
||
<tr className="border-b last:border-0 hover:bg-muted/50 transition-colors">
|
||
<td className="py-2" onClick={(e) => e.stopPropagation()}>
|
||
<Toggle />
|
||
</td>
|
||
<td
|
||
className="py-2 cursor-pointer"
|
||
onClick={() => onNavigateToAccount(row.account_number)}
|
||
>
|
||
<AccountNumber number={row.account_number} name={row.account_name} />
|
||
</td>
|
||
<td
|
||
className="py-2 cursor-pointer"
|
||
onClick={() => onNavigateToAccount(row.account_number)}
|
||
>
|
||
{row.account_name}
|
||
</td>
|
||
<td className={`py-2 text-right tabular-nums ${ob < 0 ? 'text-destructive' : ''}`}>
|
||
{formatSigned(ob)}
|
||
</td>
|
||
<td className={`py-2 text-right tabular-nums ${ch < 0 ? 'text-destructive' : ''}`}>
|
||
{formatSigned(ch)}
|
||
</td>
|
||
<td className={`py-2 text-right tabular-nums font-medium ${cb < 0 ? 'text-destructive' : ''}`}>
|
||
{formatSigned(cb)}
|
||
</td>
|
||
</tr>
|
||
<Panel colSpan={6} />
|
||
</>
|
||
)
|
||
}
|
||
|
||
function TrialBalanceDetailedRow({
|
||
row,
|
||
periodId,
|
||
onNavigateToAccount,
|
||
}: {
|
||
row: TrialBalanceRow
|
||
periodId: string
|
||
onNavigateToAccount: (account: string) => void
|
||
}) {
|
||
const fetcher = React.useMemo(
|
||
() => makeTrialBalanceFetcher(row.account_number, periodId),
|
||
[row.account_number, periodId]
|
||
)
|
||
const { Toggle, Panel } = useReportRowExpansion(fetcher, `tb-det-${row.account_number}`)
|
||
|
||
return (
|
||
<>
|
||
<tr className="border-b last:border-0 hover:bg-muted/50 transition-colors">
|
||
<td className="py-2" onClick={(e) => e.stopPropagation()}>
|
||
<Toggle />
|
||
</td>
|
||
<td
|
||
className="py-2 cursor-pointer"
|
||
onClick={() => onNavigateToAccount(row.account_number)}
|
||
>
|
||
<AccountNumber number={row.account_number} name={row.account_name} />
|
||
</td>
|
||
<td
|
||
className="py-2 cursor-pointer"
|
||
onClick={() => onNavigateToAccount(row.account_number)}
|
||
>
|
||
{row.account_name}
|
||
</td>
|
||
<td className="py-2 text-right">
|
||
{row.period_debit > 0 ? formatAmount(row.period_debit) : ''}
|
||
</td>
|
||
<td className="py-2 text-right">
|
||
{row.period_credit > 0 ? formatAmount(row.period_credit) : ''}
|
||
</td>
|
||
<td className="py-2 text-right">
|
||
{row.closing_debit > 0 ? formatAmount(row.closing_debit) : ''}
|
||
</td>
|
||
<td className="py-2 text-right">
|
||
{row.closing_credit > 0 ? formatAmount(row.closing_credit) : ''}
|
||
</td>
|
||
</tr>
|
||
<Panel colSpan={7} />
|
||
</>
|
||
)
|
||
}
|
||
export function IncomeStatementView({ periodId, dateRange, dimensionFilter = null, onNavigateToAccount }: { periodId: string; dateRange: DateRangeValue; dimensionFilter?: DimensionFilterValue | null; onNavigateToAccount: (account: string) => void }) {
|
||
const [data, setData] = useState<IncomeStatementReport | null>(null)
|
||
const [monthlyData, setMonthlyData] = useState<MonthlyDataPoint[]>([])
|
||
const [monthlyLoading, setMonthlyLoading] = useState(false)
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const reportQs = reportQuery(periodId, dateRange, dimensionFilter)
|
||
|
||
useEffect(() => {
|
||
setLoading(true)
|
||
setError(null)
|
||
setMonthlyLoading(true)
|
||
|
||
fetch(`/api/reports/income-statement?${reportQs}`)
|
||
.then((res) => res.json())
|
||
.then((result) => {
|
||
if (result.error) {
|
||
setError(result.error)
|
||
} else {
|
||
setData(result.data)
|
||
}
|
||
setLoading(false)
|
||
})
|
||
.catch(() => {
|
||
setError('Kunde inte hämta resultaträkning')
|
||
setLoading(false)
|
||
})
|
||
|
||
// Monthly breakdown is full-period by design (it IS the per-month view),
|
||
// so the date range only affects the headline numbers above the chart.
|
||
// The dimension filter DOES apply: a dimension-scoped view must not
|
||
// silently chart company-wide months.
|
||
fetch(`/api/reports/monthly-breakdown?${reportQuery(periodId, undefined, dimensionFilter)}`)
|
||
.then((res) => res.json())
|
||
.then((result) => {
|
||
if (result.data?.months) {
|
||
setMonthlyData(result.data.months)
|
||
}
|
||
setMonthlyLoading(false)
|
||
})
|
||
.catch(() => {
|
||
setMonthlyLoading(false)
|
||
})
|
||
}, [periodId, reportQs])
|
||
|
||
if (loading) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-6 space-y-2">
|
||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||
<Skeleton key={i} className="h-4 w-full" />
|
||
))}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-destructive">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2" />
|
||
{error}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (!data) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Ingen data för denna period.
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<ReportExportMenu
|
||
items={[
|
||
{ format: 'pdf', href: `/api/reports/income-statement/pdf?${reportQs}` },
|
||
{ format: 'xlsx', href: `/api/reports/income-statement/xlsx?${reportQs}` },
|
||
]}
|
||
/>
|
||
|
||
{!monthlyLoading && monthlyData.length > 0 && (
|
||
<IncomeExpenseChart months={monthlyData} />
|
||
)}
|
||
|
||
{/* Revenue */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Rörelseintäkter</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ReportSectionTable sections={data.revenue_sections} onNavigateToAccount={onNavigateToAccount} />
|
||
<div className="flex justify-between font-semibold pt-2 border-t mt-2">
|
||
<span>Summa rörelseintäkter</span>
|
||
<span>{formatAmount(data.total_revenue)} kr</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Expenses */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Rörelsekostnader</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ReportSectionTable sections={data.expense_sections} negate onNavigateToAccount={onNavigateToAccount} />
|
||
<div className="flex justify-between font-semibold pt-2 border-t mt-2">
|
||
<span>Summa rörelsekostnader</span>
|
||
<span>-{formatAmount(data.total_expenses)} kr</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Operating result */}
|
||
<Card>
|
||
<CardContent className="py-4">
|
||
<div className="flex justify-between font-bold text-lg">
|
||
<span>Rörelseresultat</span>
|
||
<span className={data.total_revenue - data.total_expenses >= 0 ? 'text-success' : 'text-destructive'}>
|
||
{formatAmount(data.total_revenue - data.total_expenses)} kr
|
||
</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Financial items */}
|
||
{data.financial_sections.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Finansiella poster</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ReportSectionTable sections={data.financial_sections} onNavigateToAccount={onNavigateToAccount} />
|
||
<div className="flex justify-between font-semibold pt-2 border-t mt-2">
|
||
<span>Summa finansiella poster</span>
|
||
<span>{formatAmount(data.total_financial)} kr</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Net result */}
|
||
<Card className="border-2">
|
||
<CardContent className="py-4">
|
||
<div className="flex justify-between font-bold text-xl">
|
||
<span>Årets resultat</span>
|
||
<span className={data.net_result >= 0 ? 'text-success' : 'text-destructive'}>
|
||
{formatAmount(data.net_result)} kr
|
||
</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export function BalanceSheetView({ periodId, dateRange, onNavigateToAccount }: { periodId: string; dateRange: DateRangeValue; onNavigateToAccount: (account: string) => void }) {
|
||
const [data, setData] = useState<BalanceSheetReport | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const reportQs = reportQuery(periodId, dateRange)
|
||
|
||
useEffect(() => {
|
||
setLoading(true)
|
||
setError(null)
|
||
fetch(`/api/reports/balance-sheet?${reportQs}`)
|
||
.then((res) => res.json())
|
||
.then((result) => {
|
||
if (result.error) {
|
||
setError(result.error)
|
||
} else {
|
||
setData(result.data)
|
||
}
|
||
setLoading(false)
|
||
})
|
||
.catch(() => {
|
||
setError('Kunde inte hämta balansräkning')
|
||
setLoading(false)
|
||
})
|
||
}, [periodId, reportQs])
|
||
|
||
if (loading) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Laddar balansräkning...
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-destructive">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2" />
|
||
{error}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (!data) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Ingen data för denna period.
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
const isBalanced = Math.abs(data.total_assets - data.total_equity_liabilities) < 0.01
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<ReportExportMenu
|
||
items={[
|
||
{ format: 'pdf', href: `/api/reports/balance-sheet/pdf?${reportQs}` },
|
||
{ format: 'xlsx', href: `/api/reports/balance-sheet/xlsx?${reportQs}` },
|
||
]}
|
||
/>
|
||
|
||
{/* Assets */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Tillgångar</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ReportSectionTable sections={data.asset_sections} onNavigateToAccount={onNavigateToAccount} />
|
||
<div className="flex justify-between font-semibold pt-2 border-t mt-2">
|
||
<span>Summa tillgångar</span>
|
||
<span>{formatAmount(data.total_assets)} kr</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Equity and liabilities */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Eget kapital och skulder</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ReportSectionTable sections={data.equity_liability_sections} onNavigateToAccount={onNavigateToAccount} />
|
||
<div className="flex justify-between font-semibold pt-2 border-t mt-2">
|
||
<span>Summa eget kapital och skulder</span>
|
||
<span>{formatAmount(data.total_equity_liabilities)} kr</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Balance check */}
|
||
<Card className="border-2">
|
||
<CardContent className="py-4">
|
||
<div className="flex justify-between items-center">
|
||
<span className="font-bold text-lg">Balanscheck</span>
|
||
{isBalanced ? (
|
||
<Badge variant="success" className="text-base px-3 py-1">
|
||
Balanserar
|
||
</Badge>
|
||
) : (
|
||
<div className="text-right">
|
||
<Badge variant="destructive" className="text-base px-3 py-1">
|
||
Balanserar ej
|
||
</Badge>
|
||
<p className="text-sm text-destructive mt-1">
|
||
Differens: {formatAmount(Math.abs(data.total_assets - data.total_equity_liabilities))} kr
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
{!isBalanced && data.imbalance_diagnosis && (
|
||
<p className="text-sm text-muted-foreground mt-3 pt-3 border-t">
|
||
{data.imbalance_diagnosis.message}
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export function ResultatrapportView({ periodId, dateRange, dimensionFilter = null, onNavigateToAccount }: { periodId: string; dateRange: DateRangeValue; dimensionFilter?: DimensionFilterValue | null; onNavigateToAccount: (account: string) => void }) {
|
||
const [data, setData] = useState<ResultatrapportReport | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const reportQs = reportQuery(periodId, dateRange, dimensionFilter)
|
||
|
||
useEffect(() => {
|
||
setLoading(true)
|
||
setError(null)
|
||
fetch(`/api/reports/resultatrapport?${reportQs}`)
|
||
.then((res) => res.json())
|
||
.then((result) => {
|
||
if (result.error) {
|
||
setError(result.error)
|
||
} else {
|
||
setData(result.data)
|
||
}
|
||
setLoading(false)
|
||
})
|
||
.catch(() => {
|
||
setError('Kunde inte hämta resultatrapport')
|
||
setLoading(false)
|
||
})
|
||
}, [periodId, reportQs])
|
||
|
||
if (loading) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-6 space-y-2">
|
||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||
<Skeleton key={i} className="h-4 w-full" />
|
||
))}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-destructive">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2" />
|
||
{error}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (!data || data.groups.length === 0) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Inga bokförda intäkter eller kostnader i denna period.
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
const hasPrior = data.prior_period !== null
|
||
const colCount = 4
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<ReportExportMenu
|
||
items={[
|
||
{ format: 'pdf', href: `/api/reports/resultatrapport/pdf?${reportQs}` },
|
||
{ format: 'xlsx', href: `/api/reports/resultatrapport/xlsx?${reportQs}` },
|
||
]}
|
||
/>
|
||
|
||
<Card>
|
||
<CardContent className="p-0">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b text-[11px] uppercase tracking-wider text-muted-foreground">
|
||
<th className="text-left font-medium px-4 py-2 w-20">Konto</th>
|
||
<th className="text-left font-medium px-4 py-2">Kontonamn</th>
|
||
<th className="text-right font-medium px-4 py-2 w-32 tabular-nums">Innevarande</th>
|
||
<th className="text-right font-medium px-4 py-2 w-32 tabular-nums">Föregående</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{data.groups.map((group) => (
|
||
<React.Fragment key={group.class}>
|
||
<tr className="bg-muted/30">
|
||
<td colSpan={colCount} className="px-4 py-2 text-[12px] font-semibold text-muted-foreground">
|
||
{group.class_label}
|
||
</td>
|
||
</tr>
|
||
{group.rows.map((row) => (
|
||
<tr
|
||
key={row.account_number}
|
||
className="border-b last:border-0 cursor-pointer hover:bg-muted/50 transition-colors"
|
||
onClick={() => onNavigateToAccount(row.account_number)}
|
||
>
|
||
<td className="px-4 py-1.5">
|
||
<AccountNumber number={row.account_number} name={row.account_name} />
|
||
</td>
|
||
<td className="px-4 py-1.5">{row.account_name}</td>
|
||
<td className="px-4 py-1.5 text-right tabular-nums">{formatAmount(row.current_period)}</td>
|
||
<td className="px-4 py-1.5 text-right tabular-nums text-muted-foreground">
|
||
{hasPrior ? formatAmount(row.prior_period) : '-'}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
<tr className="border-b font-medium">
|
||
<td colSpan={2} className="px-4 py-1.5 text-right text-muted-foreground">
|
||
Summa
|
||
</td>
|
||
<td className="px-4 py-1.5 text-right tabular-nums">{formatAmount(group.subtotal_current)}</td>
|
||
<td className="px-4 py-1.5 text-right tabular-nums text-muted-foreground">
|
||
{hasPrior ? formatAmount(group.subtotal_prior) : '-'}
|
||
</td>
|
||
</tr>
|
||
</React.Fragment>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-2">
|
||
<CardContent className="py-4">
|
||
<div className="grid gap-x-6 items-baseline grid-cols-[1fr_auto_auto]">
|
||
<span className="font-bold text-lg">Beräknat resultat</span>
|
||
<span className={`tabular-nums font-bold text-lg w-32 text-right ${data.net_result_current >= 0 ? 'text-success' : 'text-destructive'}`}>
|
||
{formatAmount(data.net_result_current)} kr
|
||
</span>
|
||
<span className="tabular-nums text-base text-muted-foreground w-32 text-right">
|
||
{hasPrior ? `${formatAmount(data.net_result_prior)} kr` : '-'}
|
||
</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export function BalansrapportView({ periodId, dateRange, onNavigateToAccount }: { periodId: string; dateRange: DateRangeValue; onNavigateToAccount: (account: string) => void }) {
|
||
const [data, setData] = useState<BalansrapportReport | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const reportQs = reportQuery(periodId, dateRange)
|
||
|
||
useEffect(() => {
|
||
setLoading(true)
|
||
setError(null)
|
||
fetch(`/api/reports/balansrapport?${reportQs}`)
|
||
.then((res) => res.json())
|
||
.then((result) => {
|
||
if (result.error) {
|
||
setError(result.error)
|
||
} else {
|
||
setData(result.data)
|
||
}
|
||
setLoading(false)
|
||
})
|
||
.catch(() => {
|
||
setError('Kunde inte hämta balansrapport')
|
||
setLoading(false)
|
||
})
|
||
}, [periodId, reportQs])
|
||
|
||
if (loading) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Laddar balansrapport...
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-destructive">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2" />
|
||
{error}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (!data || data.groups.length === 0) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Inga balansposter i denna period.
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<ReportExportMenu
|
||
items={[
|
||
{ format: 'pdf', href: `/api/reports/balansrapport/pdf?${reportQs}` },
|
||
{ format: 'xlsx', href: `/api/reports/balansrapport/xlsx?${reportQs}` },
|
||
]}
|
||
/>
|
||
|
||
<Card>
|
||
<CardContent className="p-0">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b text-[11px] uppercase tracking-wider text-muted-foreground">
|
||
<th className="text-left font-medium px-4 py-2 w-20">Konto</th>
|
||
<th className="text-left font-medium px-4 py-2">Kontonamn</th>
|
||
<th className="text-right font-medium px-4 py-2 w-32 tabular-nums">Ingående balans</th>
|
||
<th className="text-right font-medium px-4 py-2 w-32 tabular-nums">Förändring</th>
|
||
<th className="text-right font-medium px-4 py-2 w-32 tabular-nums">Utgående balans</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{data.groups.map((group) => (
|
||
<React.Fragment key={group.class}>
|
||
<tr className="bg-muted/30">
|
||
<td colSpan={5} className="px-4 py-2 text-[12px] font-semibold text-muted-foreground">
|
||
{group.class_label}
|
||
</td>
|
||
</tr>
|
||
{group.rows.map((row) => (
|
||
<tr
|
||
key={row.account_number}
|
||
className="border-b last:border-0 cursor-pointer hover:bg-muted/50 transition-colors"
|
||
onClick={() => onNavigateToAccount(row.account_number)}
|
||
>
|
||
<td className="px-4 py-1.5">
|
||
<AccountNumber number={row.account_number} name={row.account_name} />
|
||
</td>
|
||
<td className="px-4 py-1.5">{row.account_name}</td>
|
||
<td className="px-4 py-1.5 text-right tabular-nums text-muted-foreground">{formatAmount(row.ib)}</td>
|
||
<td className="px-4 py-1.5 text-right tabular-nums text-muted-foreground">{formatAmount(row.period_change)}</td>
|
||
<td className="px-4 py-1.5 text-right tabular-nums">{formatAmount(row.ub)}</td>
|
||
</tr>
|
||
))}
|
||
<tr className="border-b font-medium">
|
||
<td colSpan={2} className="px-4 py-1.5 text-right text-muted-foreground">
|
||
Summa
|
||
</td>
|
||
<td className="px-4 py-1.5 text-right tabular-nums text-muted-foreground">{formatAmount(group.subtotal_ib)}</td>
|
||
<td className="px-4 py-1.5 text-right tabular-nums text-muted-foreground">
|
||
{formatAmount(group.subtotal_ub - group.subtotal_ib)}
|
||
</td>
|
||
<td className="px-4 py-1.5 text-right tabular-nums">{formatAmount(group.subtotal_ub)}</td>
|
||
</tr>
|
||
</React.Fragment>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-2">
|
||
<CardContent className="py-4 space-y-2">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">Summa tillgångar</span>
|
||
<span className="tabular-nums">{formatAmount(data.total_assets_ub)} kr</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">Summa eget kapital, reserver, avsättningar och skulder</span>
|
||
<span className="tabular-nums">{formatAmount(data.total_equity_liabilities_ub)} kr</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">Beräknat resultat (ej bokslutsjusterat)</span>
|
||
<span className="tabular-nums">{formatAmount(data.beraknat_resultat)} kr</span>
|
||
</div>
|
||
<div className="flex justify-between items-center pt-2 border-t">
|
||
<span className="font-bold text-lg">Balanscheck</span>
|
||
{data.is_balanced ? (
|
||
<Badge variant="success" className="text-base px-3 py-1">
|
||
Balanserar
|
||
</Badge>
|
||
) : (
|
||
<div className="text-right">
|
||
<Badge variant="destructive" className="text-base px-3 py-1">
|
||
Balanserar ej
|
||
</Badge>
|
||
{data.imbalance_diagnosis && (
|
||
<p className="text-sm text-destructive mt-1">
|
||
Differens: {formatAmount(Math.abs(data.imbalance_diagnosis.differens))} kr
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
{!data.is_balanced && data.imbalance_diagnosis && (
|
||
<p className="text-sm text-muted-foreground pt-2 border-t">
|
||
{data.imbalance_diagnosis.message}
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function ReportSectionTable({
|
||
sections,
|
||
negate,
|
||
onNavigateToAccount,
|
||
}: {
|
||
sections: { title: string; rows: { account_number: string; account_name: string; amount: number }[]; subtotal: number }[]
|
||
negate?: boolean
|
||
onNavigateToAccount?: (account: string) => void
|
||
}) {
|
||
if (sections.length === 0) {
|
||
return <p className="text-sm text-muted-foreground">Inga poster.</p>
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
{sections.map((section) => (
|
||
<div key={section.title}>
|
||
<h4 className="text-sm font-semibold text-muted-foreground mb-1">{section.title}</h4>
|
||
<div className="overflow-x-auto -mx-2 px-2"><table className="w-full text-sm min-w-[400px]">
|
||
<tbody>
|
||
{section.rows.map((row) => (
|
||
<tr
|
||
key={row.account_number}
|
||
className={`border-b last:border-0 ${onNavigateToAccount ? 'cursor-pointer hover:bg-muted/50 transition-colors' : ''}`}
|
||
onClick={onNavigateToAccount ? () => onNavigateToAccount(row.account_number) : undefined}
|
||
>
|
||
<td className="py-1 w-16"><AccountNumber number={row.account_number} name={row.account_name} /></td>
|
||
<td className="py-1">{row.account_name}</td>
|
||
<td className="py-1 text-right w-28">
|
||
{negate ? `-${formatAmount(row.amount)}` : formatAmount(row.amount)} kr
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table></div>
|
||
<div className="flex justify-between text-sm font-medium border-t pt-1 mt-1">
|
||
<span>{section.title}</span>
|
||
<span>
|
||
{negate ? `-${formatAmount(section.subtotal)}` : formatAmount(section.subtotal)} kr
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Carries the selected fiscal period into the ruta drill-down rows so their
|
||
// source-verifikat query matches the report's period. Only set for yearly
|
||
// (räkenskapsår); undefined for monthly/quarterly (calendar periods).
|
||
const VatDrillContext = React.createContext<{ fiscalPeriodId?: string }>({})
|
||
|
||
// Skatteverket's e-service entry point for manually filing the momsdeklaration.
|
||
// Manual filing needs no connection, so this link is the default path for
|
||
// anyone who hasn't set up (or doesn't want) the direct-submission integration.
|
||
const SKATTEVERKET_MOMS_URL =
|
||
'https://www.skatteverket.se/foretag/etjansterochblanketter/etjanster/momsocharbetsgivardeklarationer'
|
||
|
||
/**
|
||
* Manual-filing affordance shown directly under the calculated momsdeklaration.
|
||
* The report is generated purely from the bookkeeping and never depends on the
|
||
* Skatteverket connection, so every user (including core builds with the
|
||
* skatteverket extension disabled) can file manually. Two paths are offered:
|
||
* an eSKD XML file to upload directly under "Deklarera via fil" (the fast path),
|
||
* and a PDF (in hela kronor) to read off if the user would rather type the
|
||
* boxes into the form. A PDF cannot be uploaded to Skatteverket, only the XML.
|
||
*/
|
||
function VatManualFilingCard({ xmlHref, pdfHref }: { xmlHref: string; pdfHref: string }) {
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base">Lämna in själv (utan anslutning)</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<p className="text-sm text-muted-foreground">
|
||
Du behöver inte vara ansluten till Skatteverket för att lämna in.
|
||
</p>
|
||
<ol className="list-decimal pl-6 space-y-1 text-sm text-muted-foreground">
|
||
<li>Ladda ner XML-filen nedan.</li>
|
||
<li>Logga in på skatteverket.se med BankID.</li>
|
||
<li>Öppna Moms- och arbetsgivardeklarationer och välj Deklarera via fil.</li>
|
||
<li>Ladda upp filen, granska och signera.</li>
|
||
</ol>
|
||
<p className="text-xs text-muted-foreground">
|
||
Vill du hellre fylla i rutorna för hand laddar du ner PDF:en och skriver av
|
||
beloppen (i hela kronor).
|
||
</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button variant="outline" asChild className="gap-2">
|
||
<a href={xmlHref} target="_blank" rel="noopener noreferrer">
|
||
<FileCode className="h-4 w-4" />
|
||
Ladda ner fil för uppladdning (XML)
|
||
</a>
|
||
</Button>
|
||
<Button variant="outline" asChild className="gap-2">
|
||
<a href={pdfHref} target="_blank" rel="noopener noreferrer">
|
||
<FileDown className="h-4 w-4" />
|
||
Ladda ner momsdeklaration (PDF)
|
||
</a>
|
||
</Button>
|
||
<Button variant="outline" asChild className="gap-2">
|
||
<a href={SKATTEVERKET_MOMS_URL} target="_blank" rel="noopener noreferrer">
|
||
<ExternalLink className="h-4 w-4" />
|
||
Öppna skatteverket.se
|
||
</a>
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* "Bokför momsrapport" (issue #980): builds an editable verifikat proposal
|
||
* from the momsrapport (clearing the period's 26xx accounts to 2650/1650,
|
||
* öre gap on 3740) and books it through the ordinary journal entry form, so
|
||
* every line can be adjusted before committing. The proposal comes from
|
||
* /api/reports/vat-declaration/settlement-proposal; booking goes through
|
||
* POST /api/bookkeeping/journal-entries with source_type 'vat_settlement',
|
||
* which the declaration projection excludes, so the report above keeps
|
||
* showing the declared figures after booking.
|
||
*/
|
||
function VatBookingCard({
|
||
periodType,
|
||
year,
|
||
period,
|
||
fiscalPeriodId,
|
||
checksBlocked,
|
||
}: {
|
||
periodType: VatPeriodType
|
||
year: number
|
||
period: number
|
||
fiscalPeriodId?: string
|
||
/**
|
||
* True when the local pre-flight checks found ERRORs. Booking stays
|
||
* possible (the RC-basis fixes only touch 44xx/45xx pairs, never the 26xx
|
||
* accounts the settlement clears), but the user should know before filing.
|
||
*/
|
||
checksBlocked?: boolean
|
||
}) {
|
||
const { canWrite } = useCanWrite()
|
||
const [dialogOpen, setDialogOpen] = useState(false)
|
||
const [refreshKey, setRefreshKey] = useState(0)
|
||
// Fetch outcome tagged with the key it was requested under; proposal/failed
|
||
// are derived by comparing that tag with the current key, so the effect
|
||
// never sets state synchronously (same pattern as VatDeclarationView).
|
||
const [result, setResult] = useState<{
|
||
key: string
|
||
proposal?: VatSettlementProposal
|
||
failed?: boolean
|
||
} | null>(null)
|
||
const fetchKey = `${periodType}:${year}:${period}:${fiscalPeriodId ?? ''}:${refreshKey}`
|
||
|
||
useEffect(() => {
|
||
const params = new URLSearchParams({
|
||
periodType,
|
||
year: String(year),
|
||
period: String(period),
|
||
})
|
||
if (fiscalPeriodId) params.set('fiscal_period_id', fiscalPeriodId)
|
||
let cancelled = false
|
||
fetch(`/api/reports/vat-declaration/settlement-proposal?${params.toString()}`)
|
||
.then(async (res) => {
|
||
const json = await res.json().catch(() => null)
|
||
if (cancelled) return
|
||
if (!res.ok || !json?.data) setResult({ key: fetchKey, failed: true })
|
||
else setResult({ key: fetchKey, proposal: json.data })
|
||
})
|
||
.catch(() => {
|
||
if (!cancelled) setResult({ key: fetchKey, failed: true })
|
||
})
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [fetchKey, periodType, year, period, fiscalPeriodId])
|
||
|
||
const upToDate = result !== null && result.key === fetchKey
|
||
const proposal = upToDate ? (result.proposal ?? null) : null
|
||
const failed = upToDate && !!result.failed
|
||
|
||
const booked = proposal?.existing_entries.find((e) => e.status === 'posted')
|
||
const draft = booked ? undefined : proposal?.existing_entries.find((e) => e.status === 'draft')
|
||
|
||
// FormLine amounts are input strings; the proposal's numbers are already
|
||
// öre-rounded server-side, so this is display formatting, not money math.
|
||
const initialLines: FormLine[] = (proposal?.lines ?? []).map((l) => ({
|
||
account_number: l.account_number,
|
||
debit_amount: l.debit_amount > 0 ? l.debit_amount.toFixed(2) : '',
|
||
credit_amount: l.credit_amount > 0 ? l.credit_amount.toFixed(2) : '',
|
||
line_description: l.line_description ?? '',
|
||
}))
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base">Bokför momsrapporten</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<p className="text-sm text-muted-foreground">
|
||
Skapa ett verifikat som nollställer periodens momskonton och bokför
|
||
momsen att betala eller få tillbaka på redovisningskontot. Du granskar
|
||
förslaget och kan ändra raderna innan verifikatet bokförs.
|
||
</p>
|
||
|
||
{booked && (
|
||
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 p-3 text-sm">
|
||
<AlertCircle className="h-4 w-4 mt-0.5 shrink-0 text-muted-foreground" />
|
||
<p>
|
||
Momsen för perioden är redan bokförd:{' '}
|
||
<Link
|
||
href={`/bookkeeping/${booked.id}`}
|
||
className="underline underline-offset-2 hover:text-foreground"
|
||
>
|
||
verifikat {formatVoucher(booked)} ({formatDate(booked.entry_date)})
|
||
</Link>
|
||
. Annullera det verifikatet först om perioden behöver bokföras om.
|
||
</p>
|
||
</div>
|
||
)}
|
||
{draft && (
|
||
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 p-3 text-sm">
|
||
<AlertCircle className="h-4 w-4 mt-0.5 shrink-0 text-muted-foreground" />
|
||
<p>
|
||
Det finns redan ett{' '}
|
||
<Link
|
||
href={`/bookkeeping/${draft.id}`}
|
||
className="underline underline-offset-2 hover:text-foreground"
|
||
>
|
||
utkast för momsen i perioden
|
||
</Link>
|
||
.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{checksBlocked && (
|
||
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 p-3 text-sm">
|
||
<AlertCircle className="h-4 w-4 mt-1 shrink-0 text-muted-foreground" />
|
||
<p>
|
||
Det finns fel under 1 · Kontrollera underlaget. Du kan bokföra momsen ändå,
|
||
men åtgärda felen innan du lämnar in.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{failed ? (
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<p className="text-sm text-destructive">Kunde inte hämta verifikatförslaget.</p>
|
||
<Button variant="outline" onClick={() => setRefreshKey((k) => k + 1)}>
|
||
Försök igen
|
||
</Button>
|
||
</div>
|
||
) : !upToDate ? (
|
||
<Skeleton className="h-10 w-40" />
|
||
) : proposal?.is_empty ? (
|
||
<p className="text-sm text-muted-foreground">Ingen moms att bokföra för perioden.</p>
|
||
) : (
|
||
<div className="space-y-2">
|
||
<Button
|
||
// A posted settlement blocks re-booking: the proposal re-clears the
|
||
// FULL period (it is not delta-aware), so booking twice would
|
||
// corrupt the 26xx balances. Annulling the verifikat restores them
|
||
// and re-enables the button.
|
||
disabled={!proposal || !canWrite || !!booked}
|
||
onClick={() => setDialogOpen(true)}
|
||
>
|
||
Skapa verifikat
|
||
</Button>
|
||
{!canWrite && (
|
||
<p className="text-xs text-muted-foreground">
|
||
Du har läsbehörighet och kan inte bokföra.
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
|
||
{proposal && (
|
||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||
<DialogContent
|
||
className="sm:max-w-3xl max-h-[95dvh] sm:max-h-[90vh] overflow-y-auto"
|
||
// A reviewed-but-unbooked proposal must survive an accidental
|
||
// backdrop click or stray Escape (same rationale as
|
||
// NewJournalEntryDialog): closing is explicit via the header X.
|
||
onEscapeKeyDown={(e) => e.preventDefault()}
|
||
onPointerDownOutside={(e) => e.preventDefault()}
|
||
onInteractOutside={(e) => e.preventDefault()}
|
||
>
|
||
<DialogHeader>
|
||
<DialogTitle>Bokför momsrapport</DialogTitle>
|
||
</DialogHeader>
|
||
<p className="text-sm text-muted-foreground">
|
||
Förslaget bygger på momsrapporten för {proposal.period_label}. Justera
|
||
datum, konton eller belopp vid behov och bokför sedan verifikatet.
|
||
</p>
|
||
{dialogOpen && (
|
||
<JournalEntryForm
|
||
bare
|
||
sourceType="vat_settlement"
|
||
initialDate={proposal.entry_date}
|
||
initialDescription={proposal.description}
|
||
initialLines={initialLines}
|
||
onCreated={() => {
|
||
setDialogOpen(false)
|
||
setRefreshKey((k) => k + 1)
|
||
}}
|
||
/>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
)}
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
export function VatDeclarationView() {
|
||
const currentYear = new Date().getFullYear()
|
||
const currentMonth = new Date().getMonth() + 1
|
||
const currentQuarter = Math.ceil(currentMonth / 3)
|
||
|
||
// periodType stays null until the company's VAT settings have settled, so
|
||
// the first (automatic) fetch runs against the configured momsperiod instead
|
||
// of a guessed default.
|
||
const [periodType, setPeriodType] = useState<VatPeriodType | null>(null)
|
||
const [year, setYear] = useState(currentYear)
|
||
const [period, setPeriod] = useState(currentQuarter)
|
||
// Annual VAT (helårsmoms) is reported per räkenskapsår, not per calendar
|
||
// year — picked inline in yearly mode. Monthly/quarterly are calendar
|
||
// periods and need no fiscal year. The period's end date rides along so
|
||
// the Skatteverket panel can target the FY-end month (broken fiscal years
|
||
// do not end in December).
|
||
const [fiscalPeriodId, setFiscalPeriodId] = useState('')
|
||
const [fiscalPeriodEnd, setFiscalPeriodEnd] = useState<string | null>(null)
|
||
// Latest fetch outcome, tagged with the fetch key it was requested under.
|
||
// loading / error / data are all derived by comparing that tag with the
|
||
// current key, so the fetch effect never sets state synchronously.
|
||
const [result, setResult] = useState<{
|
||
key: string
|
||
declaration?: VatDeclaration
|
||
error?: string
|
||
} | null>(null)
|
||
const [retryKey, setRetryKey] = useState(0)
|
||
|
||
// Company settings drive both the momsregistrerad gate and the default
|
||
// periodicity (moms_period in Inställningar). Applied once per company the
|
||
// first time its settings settle — as a render-phase adjustment, not an
|
||
// effect. A later manual change to the picker is preserved, and a company
|
||
// switch re-applies the new company's setting. `useCompanySettings` only
|
||
// refetches when the active company changes, so this never clobbers a
|
||
// manual selection mid-session.
|
||
const { settings, isLoading: settingsLoading } = useCompanySettings()
|
||
const [appliedCompany, setAppliedCompany] = useState<string | null>(null)
|
||
const companyKey = settingsLoading ? null : (settings?.company_id ?? 'none')
|
||
if (companyKey !== null && appliedCompany !== companyKey) {
|
||
setAppliedCompany(companyKey)
|
||
const configured = settings?.moms_period ?? 'quarterly'
|
||
setPeriodType(configured)
|
||
setPeriod(
|
||
configured === 'monthly' ? currentMonth : configured === 'quarterly' ? currentQuarter : 1,
|
||
)
|
||
}
|
||
|
||
// Settings row present and the company answered "not VAT-registered" —
|
||
// the declaration is meaningless, so the whole view is gated below.
|
||
const notVatRegistered = !settingsLoading && settings !== null && !settings.vat_registered
|
||
// Registered but never picked a redovisningsperiod (rare — onboarding
|
||
// requires it, but companies created outside that flow can miss it).
|
||
const momsPeriodMissing = settings?.vat_registered === true && !settings.moms_period
|
||
|
||
// Generate year options (last 5 years)
|
||
const yearOptions = Array.from({ length: 5 }, (_, i) => currentYear - i)
|
||
|
||
// Generate period options based on type
|
||
const getPeriodOptions = () => {
|
||
switch (periodType) {
|
||
case 'monthly':
|
||
return [
|
||
{ value: 1, label: 'Januari' },
|
||
{ value: 2, label: 'Februari' },
|
||
{ value: 3, label: 'Mars' },
|
||
{ value: 4, label: 'April' },
|
||
{ value: 5, label: 'Maj' },
|
||
{ value: 6, label: 'Juni' },
|
||
{ value: 7, label: 'Juli' },
|
||
{ value: 8, label: 'Augusti' },
|
||
{ value: 9, label: 'September' },
|
||
{ value: 10, label: 'Oktober' },
|
||
{ value: 11, label: 'November' },
|
||
{ value: 12, label: 'December' },
|
||
]
|
||
case 'quarterly':
|
||
return [
|
||
{ value: 1, label: 'Kvartal 1 (jan-mar)' },
|
||
{ value: 2, label: 'Kvartal 2 (apr-jun)' },
|
||
{ value: 3, label: 'Kvartal 3 (jul-sep)' },
|
||
{ value: 4, label: 'Kvartal 4 (okt-dec)' },
|
||
]
|
||
case 'yearly':
|
||
return [{ value: 1, label: 'Helår' }]
|
||
default:
|
||
return []
|
||
}
|
||
}
|
||
|
||
// Switching periodicity resets the period to "now" in the new unit. Done in
|
||
// the change handler (not an effect) so the auto-fetch below never sees an
|
||
// inconsistent periodType/period pair.
|
||
const handlePeriodTypeChange = (value: VatPeriodType) => {
|
||
setPeriodType(value)
|
||
setPeriod(value === 'monthly' ? currentMonth : value === 'quarterly' ? currentQuarter : 1)
|
||
}
|
||
|
||
// Annual VAT (helårsmoms) is reported per räkenskapsår, not per calendar year.
|
||
// For yearly we pass the selected fiscal period so the API uses its actual
|
||
// bounds (handles extended/shortened years); monthly/quarterly stay calendar.
|
||
const isYearly = periodType === 'yearly'
|
||
const awaitingFiscalPeriod = isYearly && !fiscalPeriodId
|
||
const vatQueryString = () => {
|
||
const params = new URLSearchParams({
|
||
periodType: periodType ?? 'quarterly',
|
||
year: String(year),
|
||
period: String(period),
|
||
})
|
||
if (isYearly && fiscalPeriodId) params.set('fiscal_period_id', fiscalPeriodId)
|
||
return params.toString()
|
||
}
|
||
|
||
// The declaration loads as soon as the period is known — no manual "Hämta"
|
||
// step. fetchKey is null while a prerequisite is missing (settings pending,
|
||
// gated, or no redovisningsperiod configured); any change to it triggers a
|
||
// refetch and stale responses are discarded.
|
||
const fetchKey =
|
||
periodType === null || notVatRegistered || momsPeriodMissing || awaitingFiscalPeriod
|
||
? null
|
||
: `${periodType}:${year}:${period}:${isYearly ? fiscalPeriodId : ''}:${retryKey}`
|
||
|
||
useEffect(() => {
|
||
if (!fetchKey || periodType === null) return
|
||
const params = new URLSearchParams({
|
||
periodType,
|
||
year: String(year),
|
||
period: String(period),
|
||
})
|
||
if (periodType === 'yearly') params.set('fiscal_period_id', fiscalPeriodId)
|
||
let cancelled = false
|
||
fetch(`/api/reports/vat-declaration?${params.toString()}`)
|
||
.then(async (res) => {
|
||
const json = await res.json().catch(() => null)
|
||
if (cancelled) return
|
||
if (!res.ok || json?.error) {
|
||
setResult({
|
||
key: fetchKey,
|
||
error:
|
||
typeof json?.error === 'string' ? json.error : 'Kunde inte hämta momsdeklaration',
|
||
})
|
||
} else {
|
||
setResult({ key: fetchKey, declaration: json.data })
|
||
}
|
||
})
|
||
.catch(() => {
|
||
if (!cancelled) setResult({ key: fetchKey, error: 'Kunde inte hämta momsdeklaration' })
|
||
})
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [fetchKey, periodType, year, period, fiscalPeriodId])
|
||
|
||
// Derived fetch state: the previous declaration stays visible (dimmed)
|
||
// while the next period loads.
|
||
const upToDate = result !== null && result.key === fetchKey
|
||
const data = result?.declaration ?? null
|
||
const error = upToDate ? (result.error ?? null) : null
|
||
const loading = fetchKey !== null && !upToDate
|
||
|
||
// Local pre-flight checks on the calculated declaration. Computed here (not
|
||
// in SkatteverketPanel) so every user sees them: they gate direct submission
|
||
// but concern manual filers just as much.
|
||
const checks = data ? runVatDeclarationChecks(data.rutor) : []
|
||
const checksBlocked = checks.some((c) => c.status === 'ERROR')
|
||
|
||
// Settings not settled yet — the picker defaults and the gate both depend
|
||
// on them, so hold the whole view in a skeleton.
|
||
if (settingsLoading || periodType === null) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-6 space-y-4">
|
||
<Skeleton className="h-5 w-32" />
|
||
<Skeleton className="h-64" />
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (notVatRegistered) {
|
||
return (
|
||
<EmptyState
|
||
icon={Percent}
|
||
title="Företaget är inte momsregistrerat"
|
||
description="Momsdeklarationen bygger på företagets skatteinställningar. Om företaget är momsregistrerat anger du momsregistrering och redovisningsperiod i inställningarna, så visas deklarationen här."
|
||
actionLabel="Öppna skatteinställningar"
|
||
actionHref="/settings/tax"
|
||
/>
|
||
)
|
||
}
|
||
|
||
// Registered but no redovisningsperiod picked: block instead of guessing.
|
||
// A declaration rendered (and submittable via panelen) for the wrong
|
||
// period type is a compliance hazard, not a convenience.
|
||
if (momsPeriodMissing) {
|
||
return (
|
||
<EmptyState
|
||
icon={Percent}
|
||
title="Redovisningsperiod för moms saknas"
|
||
description="Företaget är momsregistrerat men ingen redovisningsperiod (månad, kvartal eller helår) är vald. Ange den i skatteinställningarna så visas deklarationen för rätt period."
|
||
actionLabel="Öppna skatteinställningar"
|
||
actionHref="/settings/tax"
|
||
/>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<VatDrillContext.Provider value={{ fiscalPeriodId: isYearly ? fiscalPeriodId : undefined }}>
|
||
<div className="space-y-8">
|
||
{/* XML and PDF live in "Lämna in" below: they are filing artifacts, not
|
||
report exports, and one home avoids two competing download surfaces. */}
|
||
<ReportExportMenu
|
||
items={[
|
||
{ format: 'xlsx', href: `/api/reports/vat-declaration/xlsx?${vatQueryString()}` },
|
||
]}
|
||
>
|
||
<AgentSparkleButton
|
||
intentId="vat.review"
|
||
intentArgs={{ period_type: periodType, year, period }}
|
||
contextRef={`vat:${year}-${periodType}-${period}`}
|
||
/>
|
||
</ReportExportMenu>
|
||
|
||
{/* Period selection — the declaration below follows it automatically */}
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="flex flex-wrap items-end gap-4">
|
||
<div>
|
||
<Label>Periodicitet</Label>
|
||
<Select
|
||
value={periodType}
|
||
onValueChange={(value) => handlePeriodTypeChange(value as VatPeriodType)}
|
||
>
|
||
<SelectTrigger className="mt-1 w-40">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="monthly">Månadsvis</SelectItem>
|
||
<SelectItem value="quarterly">Kvartalsvis</SelectItem>
|
||
<SelectItem value="yearly">Årsvis</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
{isYearly ? (
|
||
// Annual VAT covers a räkenskapsår: picked here, not a
|
||
// calendar year.
|
||
<FiscalYearSelector
|
||
value={fiscalPeriodId || null}
|
||
onChange={(id, fp) => {
|
||
setFiscalPeriodId(id || '')
|
||
setFiscalPeriodEnd(fp?.period_end ?? null)
|
||
}}
|
||
includeAllOption={false}
|
||
hideFuturePeriods
|
||
/>
|
||
) : (
|
||
<>
|
||
<div>
|
||
<Label>År</Label>
|
||
<Select value={String(year)} onValueChange={(value) => setYear(parseInt(value))}>
|
||
<SelectTrigger className="mt-1 w-28 tabular-nums">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{yearOptions.map((y) => (
|
||
<SelectItem key={y} value={String(y)} className="tabular-nums">
|
||
{y}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div>
|
||
<Label>Period</Label>
|
||
<Select
|
||
value={String(period)}
|
||
onValueChange={(value) => setPeriod(parseInt(value))}
|
||
>
|
||
<SelectTrigger className="mt-1 w-44">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{getPeriodOptions().map((opt) => (
|
||
<SelectItem key={opt.value} value={String(opt.value)}>
|
||
{opt.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{error && (
|
||
<Card>
|
||
<CardContent className="flex flex-col items-center p-8 text-center">
|
||
<AlertCircle className="mb-2 h-6 w-6 text-destructive" />
|
||
<p className="mb-4 text-sm text-destructive">{error}</p>
|
||
<Button variant="outline" size="sm" onClick={() => setRetryKey((k) => k + 1)}>
|
||
Försök igen
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{!error && (awaitingFiscalPeriod || (loading && !data)) && (
|
||
<Card>
|
||
<CardContent className="p-6 space-y-4">
|
||
<Skeleton className="h-5 w-48" />
|
||
<Skeleton className="h-64" />
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{data && !awaitingFiscalPeriod && (
|
||
<div
|
||
className={`space-y-8 transition-opacity duration-150 ${loading ? 'opacity-60' : ''}`}
|
||
>
|
||
{/* The page follows the filing pipeline: kontrollera, granska,
|
||
bokför, lämna in. The checks come first because their errors
|
||
invalidate everything below them. */}
|
||
<section className="space-y-3">
|
||
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
|
||
1 · Kontrollera underlaget
|
||
</h2>
|
||
<VatChecksCard
|
||
checks={checks}
|
||
periodType={periodType}
|
||
year={year}
|
||
period={period}
|
||
fiscalPeriodId={isYearly ? fiscalPeriodId : undefined}
|
||
onCorrected={() => setRetryKey((k) => k + 1)}
|
||
/>
|
||
</section>
|
||
|
||
<section className="space-y-3">
|
||
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
|
||
2 · Granska deklarationen
|
||
</h2>
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||
<CardTitle>Momsdeklaration - {data.period.start} till {data.period.end}</CardTitle>
|
||
<div className="flex items-center gap-3">
|
||
<Badge
|
||
variant={
|
||
data.rutor.ruta49 > 0
|
||
? 'warning'
|
||
: data.rutor.ruta49 < 0
|
||
? 'success'
|
||
: 'secondary'
|
||
}
|
||
>
|
||
{data.rutor.ruta49 > 0
|
||
? 'Att betala'
|
||
: data.rutor.ruta49 < 0
|
||
? 'Att återfå'
|
||
: 'Ingen moms'}
|
||
</Badge>
|
||
{data.rutor.ruta49 !== 0 && (
|
||
<span className="font-display text-xl tabular-nums">
|
||
{formatAmount(Math.abs(data.rutor.ruta49))} kr
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-sm text-muted-foreground mb-4">
|
||
Baserat på {data.invoiceCount} fakturor och {data.transactionCount} transaktioner
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
{/* Utgående moms */}
|
||
<div>
|
||
<h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-3">
|
||
Utgående moms (försäljning)
|
||
</h3>
|
||
<Table>
|
||
<TableBody>
|
||
{data.rutor.ruta05 > 0 && (
|
||
<VatRutaRow
|
||
ruta="05"
|
||
label="Momspliktig försäljning"
|
||
amount={data.rutor.ruta05}
|
||
baseAmount={0}
|
||
periodType={periodType}
|
||
year={year}
|
||
period={period}
|
||
/>
|
||
)}
|
||
<VatRutaRow
|
||
ruta="10"
|
||
label="Utgående moms 25%"
|
||
amount={data.rutor.ruta10}
|
||
baseAmount={data.breakdown.invoices.base25}
|
||
periodType={periodType}
|
||
year={year}
|
||
period={period}
|
||
/>
|
||
<VatRutaRow
|
||
ruta="11"
|
||
label="Utgående moms 12%"
|
||
amount={data.rutor.ruta11}
|
||
baseAmount={data.breakdown.invoices.base12}
|
||
periodType={periodType}
|
||
year={year}
|
||
period={period}
|
||
/>
|
||
<VatRutaRow
|
||
ruta="12"
|
||
label="Utgående moms 6%"
|
||
amount={data.rutor.ruta12}
|
||
baseAmount={data.breakdown.invoices.base6}
|
||
periodType={periodType}
|
||
year={year}
|
||
period={period}
|
||
/>
|
||
<VatRutaRow
|
||
ruta="39"
|
||
label="Tjänster EU (omvänd skattskyldighet)"
|
||
amount={0}
|
||
baseAmount={data.rutor.ruta39}
|
||
noVat
|
||
periodType={periodType}
|
||
year={year}
|
||
period={period}
|
||
/>
|
||
<VatRutaRow
|
||
ruta="40"
|
||
label="Export utanför EU"
|
||
amount={0}
|
||
baseAmount={data.rutor.ruta40}
|
||
noVat
|
||
periodType={periodType}
|
||
year={year}
|
||
period={period}
|
||
/>
|
||
</TableBody>
|
||
<tfoot>
|
||
<tr className="border-t font-medium">
|
||
<td className="py-2">Summa utgående moms</td>
|
||
<td className="py-2 text-right tabular-nums">
|
||
{formatAmount(
|
||
data.rutor.ruta10 + data.rutor.ruta11 + data.rutor.ruta12 +
|
||
data.rutor.ruta30 + data.rutor.ruta31 + data.rutor.ruta32 +
|
||
data.rutor.ruta60 + data.rutor.ruta61 + data.rutor.ruta62
|
||
)} kr
|
||
</td>
|
||
</tr>
|
||
</tfoot>
|
||
</Table>
|
||
|
||
{/* Omvänd skattskyldighet (inköp) */}
|
||
{(data.rutor.ruta20 > 0 || data.rutor.ruta21 > 0 || data.rutor.ruta22 > 0 || data.rutor.ruta23 > 0 || data.rutor.ruta24 > 0 ||
|
||
data.rutor.ruta30 > 0 || data.rutor.ruta31 > 0 || data.rutor.ruta32 > 0) && (
|
||
<>
|
||
<h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-3 mt-6">
|
||
Omvänd skattskyldighet (inköp)
|
||
</h3>
|
||
<Table>
|
||
<TableBody>
|
||
<VatRutaRow ruta="20" label="Inköp av varor från annat EU-land" amount={0} baseAmount={data.rutor.ruta20} noVat periodType={periodType} year={year} period={period} />
|
||
<VatRutaRow ruta="21" label="Inköp av tjänster från annat EU-land" amount={0} baseAmount={data.rutor.ruta21} noVat periodType={periodType} year={year} period={period} />
|
||
<VatRutaRow ruta="22" label="Inköp av tjänster utanför EU" amount={0} baseAmount={data.rutor.ruta22} noVat periodType={periodType} year={year} period={period} />
|
||
<VatRutaRow ruta="23" label="Inköp av varor i Sverige" amount={0} baseAmount={data.rutor.ruta23} noVat periodType={periodType} year={year} period={period} />
|
||
<VatRutaRow ruta="24" label="Övriga inköp av tjänster i Sverige" amount={0} baseAmount={data.rutor.ruta24} noVat periodType={periodType} year={year} period={period} />
|
||
<VatRutaRow ruta="30" label="Utgående moms 25% (omvänd)" amount={data.rutor.ruta30} baseAmount={0} periodType={periodType} year={year} period={period} />
|
||
<VatRutaRow ruta="31" label="Utgående moms 12% (omvänd)" amount={data.rutor.ruta31} baseAmount={0} periodType={periodType} year={year} period={period} />
|
||
<VatRutaRow ruta="32" label="Utgående moms 6% (omvänd)" amount={data.rutor.ruta32} baseAmount={0} periodType={periodType} year={year} period={period} />
|
||
</TableBody>
|
||
</Table>
|
||
</>
|
||
)}
|
||
|
||
{/* Moms vid import */}
|
||
{(data.rutor.ruta50 > 0 || data.rutor.ruta60 > 0 || data.rutor.ruta61 > 0 || data.rutor.ruta62 > 0) && (
|
||
<>
|
||
<h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-3 mt-6">
|
||
Moms vid import
|
||
</h3>
|
||
<Table>
|
||
<TableBody>
|
||
<VatRutaRow ruta="50" label="Beskattningsunderlag vid import" amount={0} baseAmount={data.rutor.ruta50} noVat periodType={periodType} year={year} period={period} />
|
||
<VatRutaRow ruta="60" label="Utgående moms 25% import" amount={data.rutor.ruta60} baseAmount={0} periodType={periodType} year={year} period={period} />
|
||
<VatRutaRow ruta="61" label="Utgående moms 12% import" amount={data.rutor.ruta61} baseAmount={0} periodType={periodType} year={year} period={period} />
|
||
<VatRutaRow ruta="62" label="Utgående moms 6% import" amount={data.rutor.ruta62} baseAmount={0} periodType={periodType} year={year} period={period} />
|
||
</TableBody>
|
||
</Table>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Ingående moms */}
|
||
<div>
|
||
<h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-3">
|
||
Ingående moms (avdragsgill)
|
||
</h3>
|
||
<Table>
|
||
<TableBody>
|
||
<VatRutaRow
|
||
ruta="48"
|
||
label="Ingående moms att dra av"
|
||
amount={data.rutor.ruta48}
|
||
baseAmount={0}
|
||
periodType={periodType}
|
||
year={year}
|
||
period={period}
|
||
/>
|
||
{data.breakdown.transactions.ruta48 > 0 && (
|
||
<tr className="text-muted-foreground">
|
||
<td className="py-1 pl-6 text-xs">- från transaktioner</td>
|
||
<td className="py-1 text-right text-xs">
|
||
{formatAmount(data.breakdown.transactions.ruta48)} kr
|
||
</td>
|
||
</tr>
|
||
)}
|
||
{data.breakdown.receipts.ruta48 > 0 && (
|
||
<tr className="text-muted-foreground">
|
||
<td className="py-1 pl-6 text-xs">- från kvitton</td>
|
||
<td className="py-1 text-right text-xs">
|
||
{formatAmount(data.breakdown.receipts.ruta48)} kr
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</TableBody>
|
||
<tfoot>
|
||
<tr className="border-t font-medium">
|
||
<td className="py-2">Summa ingående moms</td>
|
||
<td className="py-2 text-right tabular-nums">{formatAmount(data.rutor.ruta48)} kr</td>
|
||
</tr>
|
||
</tfoot>
|
||
</Table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Net result: the tables' sum row. The headline amount lives in
|
||
the card header next to the status badge. */}
|
||
<div className="mt-6 pt-4 border-t">
|
||
<div className="flex justify-between items-center">
|
||
<div>
|
||
<span className="font-mono text-xs bg-muted px-1 rounded mr-2">49</span>
|
||
<span className="text-sm font-medium">
|
||
{data.rutor.ruta49 >= 0 ? 'Moms att betala' : 'Moms att återfå'}
|
||
</span>
|
||
</div>
|
||
<span
|
||
className={`font-semibold tabular-nums ${
|
||
data.rutor.ruta49 > 0
|
||
? 'text-warning'
|
||
: data.rutor.ruta49 < 0
|
||
? 'text-success'
|
||
: ''
|
||
}`}
|
||
>
|
||
{formatAmount(Math.abs(data.rutor.ruta49))} kr
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</section>
|
||
|
||
<section className="space-y-3">
|
||
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
|
||
3 · Bokför momsen
|
||
</h2>
|
||
<VatBookingCard
|
||
periodType={periodType}
|
||
year={year}
|
||
period={period}
|
||
fiscalPeriodId={isYearly ? fiscalPeriodId : undefined}
|
||
checksBlocked={checksBlocked}
|
||
/>
|
||
</section>
|
||
|
||
<section className="space-y-3">
|
||
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
|
||
4 · Lämna in
|
||
</h2>
|
||
<VatManualFilingCard
|
||
xmlHref={`/api/reports/vat-declaration/eskd?${vatQueryString()}`}
|
||
pdfHref={`/api/reports/vat-declaration/pdf?${vatQueryString()}`}
|
||
/>
|
||
</section>
|
||
</div>
|
||
)}
|
||
|
||
{/* Skatteverket integration panel — hidden while the räkenskapsår for
|
||
helårsmoms is unresolved, so its actions can never target an
|
||
unconfirmed period. */}
|
||
{!awaitingFiscalPeriod && (
|
||
<SkatteverketPanel
|
||
periodType={periodType}
|
||
year={year}
|
||
period={period}
|
||
fiscalPeriodId={isYearly ? fiscalPeriodId : undefined}
|
||
fiscalYearEnd={
|
||
isYearly && fiscalPeriodEnd
|
||
? {
|
||
year: Number(fiscalPeriodEnd.slice(0, 4)),
|
||
month: Number(fiscalPeriodEnd.slice(5, 7)),
|
||
}
|
||
: undefined
|
||
}
|
||
hasData={data !== null}
|
||
localBlocked={checksBlocked}
|
||
/>
|
||
)}
|
||
</div>
|
||
</VatDrillContext.Provider>
|
||
)
|
||
}
|
||
|
||
function makeVatFetcher(
|
||
ruta: string,
|
||
periodType: VatPeriodType,
|
||
year: number,
|
||
period: number,
|
||
fiscalPeriodId?: string,
|
||
): ReportSourceFetcher {
|
||
return async () => {
|
||
const params = new URLSearchParams({
|
||
periodType,
|
||
year: String(year),
|
||
period: String(period),
|
||
})
|
||
// Yearly drill-down resolves against the räkenskapsår, matching the report.
|
||
if (periodType === 'yearly' && fiscalPeriodId) {
|
||
params.set('fiscal_period_id', fiscalPeriodId)
|
||
}
|
||
const res = await fetch(
|
||
`/api/reports/vat-declaration/ruta/${encodeURIComponent(ruta)}/sources?${params.toString()}`
|
||
)
|
||
const json = await res.json()
|
||
if (!res.ok) throw new Error(json.error || 'Kunde inte hämta verifikat')
|
||
const lines: ReportSourceLine[] = json.data?.lines || []
|
||
return { lines, next_cursor: json.data?.next_cursor ?? null }
|
||
}
|
||
}
|
||
|
||
function VatRutaRow({
|
||
ruta,
|
||
label,
|
||
amount,
|
||
baseAmount,
|
||
noVat,
|
||
periodType,
|
||
year,
|
||
period,
|
||
}: {
|
||
ruta: string
|
||
label: string
|
||
amount: number
|
||
baseAmount: number
|
||
noVat?: boolean
|
||
periodType?: VatPeriodType
|
||
year?: number
|
||
period?: number
|
||
}) {
|
||
const { fiscalPeriodId } = React.useContext(VatDrillContext)
|
||
const canDrill = periodType !== undefined && year !== undefined && period !== undefined
|
||
const fetcher = React.useMemo(
|
||
() => (canDrill ? makeVatFetcher(ruta, periodType!, year!, period!, fiscalPeriodId) : null),
|
||
[canDrill, ruta, periodType, year, period, fiscalPeriodId]
|
||
)
|
||
// Hooks must be called unconditionally: provide a noop fetcher when drill
|
||
// is disabled. The early-return for zero rows lives below the hooks.
|
||
const expansion = useReportRowExpansion(
|
||
fetcher ?? (async () => ({ lines: [], next_cursor: null })),
|
||
`vat-${ruta}`
|
||
)
|
||
|
||
// Don't show rows with zero values
|
||
if (baseAmount === 0 && amount === 0) return null
|
||
|
||
return (
|
||
<>
|
||
<tr className="border-b">
|
||
<td className="py-2">
|
||
{canDrill && (
|
||
<span className="inline-block align-middle mr-1">
|
||
<expansion.Toggle />
|
||
</span>
|
||
)}
|
||
<span className="font-mono text-xs bg-muted px-1 rounded mr-2">{ruta}</span>
|
||
{label}
|
||
</td>
|
||
<td className="py-2 text-right tabular-nums">{noVat ? `${formatAmount(baseAmount)} kr` : `${formatAmount(amount)} kr`}</td>
|
||
</tr>
|
||
{!noVat && baseAmount > 0 && (
|
||
<tr className="text-muted-foreground">
|
||
<td className="py-1 pl-6 text-xs">Underlag</td>
|
||
<td className="py-1 text-right text-xs tabular-nums">{formatAmount(baseAmount)} kr</td>
|
||
</tr>
|
||
)}
|
||
{canDrill && <expansion.Panel colSpan={2} />}
|
||
</>
|
||
)
|
||
}
|
||
|
||
interface SupplierLedgerData {
|
||
ledger: {
|
||
entries: {
|
||
supplier_id: string
|
||
supplier_name: string
|
||
current: number
|
||
days_1_30: number
|
||
days_31_60: number
|
||
days_61_90: number
|
||
days_90_plus: number
|
||
total_outstanding: number
|
||
}[]
|
||
total_outstanding: number
|
||
total_current: number
|
||
total_overdue: number
|
||
unpaid_count: number
|
||
unconverted_fx_count: number
|
||
}
|
||
reconciliation: {
|
||
supplier_ledger_total: number
|
||
account_2440_balance: number
|
||
difference: number
|
||
is_reconciled: boolean
|
||
unconverted_fx_count: number
|
||
} | null
|
||
}
|
||
|
||
// Local calendar date (YYYY-MM-DD) for the reskontra "per datum" default:
|
||
// toISOString() is UTC and rolls the date over an hour early in Sweden.
|
||
function localIsoDate(): string {
|
||
const now = new Date()
|
||
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
|
||
}
|
||
|
||
// Shared "Per datum" control + export menu header for the two reskontra views
|
||
// (#1020/#1021): pick an arbitrary as-of date and export PDF/Excel for it.
|
||
function ReskontraToolbar({
|
||
asOfDate,
|
||
onAsOfDateChange,
|
||
inputId,
|
||
exportBase,
|
||
}: {
|
||
asOfDate: string
|
||
onAsOfDateChange: (date: string) => void
|
||
inputId: string
|
||
exportBase: string
|
||
}) {
|
||
return (
|
||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||
<div className="space-y-1">
|
||
<Label htmlFor={inputId} className="text-xs text-muted-foreground">
|
||
Per datum
|
||
</Label>
|
||
<Input
|
||
id={inputId}
|
||
type="date"
|
||
value={asOfDate}
|
||
onChange={(e) => {
|
||
if (e.target.value) onAsOfDateChange(e.target.value)
|
||
}}
|
||
className="w-40"
|
||
/>
|
||
</div>
|
||
<ReportExportMenu
|
||
items={[
|
||
{ format: 'pdf', href: `${exportBase}/pdf?as_of_date=${asOfDate}` },
|
||
{ format: 'xlsx', href: `${exportBase}/xlsx?as_of_date=${asOfDate}` },
|
||
]}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export function SupplierLedgerView({ periodId }: { periodId: string }) {
|
||
const [data, setData] = useState<SupplierLedgerData | null>(null)
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [asOfDate, setAsOfDate] = useState(localIsoDate)
|
||
|
||
const fetchData = async () => {
|
||
setLoading(true)
|
||
setError(null)
|
||
try {
|
||
const res = await fetch(`/api/reports/supplier-ledger?period_id=${periodId}&as_of_date=${asOfDate}`)
|
||
const result = await res.json()
|
||
if (result.error) {
|
||
setError(result.error)
|
||
} else {
|
||
setData(result.data)
|
||
}
|
||
} catch {
|
||
setError('Kunde inte hämta leverantörsreskontra')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (periodId) fetchData()
|
||
}, [periodId, asOfDate])
|
||
|
||
if (loading) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Laddar leverantörsreskontra...
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-destructive">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2" />
|
||
{error}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (!data || !data.ledger) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Ingen data tillgänglig.
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
const { ledger, reconciliation } = data
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<ReskontraToolbar
|
||
asOfDate={asOfDate}
|
||
onAsOfDateChange={setAsOfDate}
|
||
inputId="supplier-ledger-as-of"
|
||
exportBase="/api/reports/supplier-ledger"
|
||
/>
|
||
{/* Summary cards */}
|
||
<div className="grid md:grid-cols-3 gap-4">
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-sm text-muted-foreground">Totalt utestående</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="font-display text-2xl tabular-nums">{formatAmount(ledger.total_outstanding)} kr</p>
|
||
<p className="text-xs text-muted-foreground">{ledger.unpaid_count} fakturor</p>
|
||
{ledger.unconverted_fx_count > 0 && (
|
||
<p className="mt-1 text-xs text-muted-foreground">
|
||
{ledger.unconverted_fx_count} faktura i utländsk valuta utan växelkurs är inte med i totalen.
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-sm text-muted-foreground">Ej förfallet</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="font-display text-2xl tabular-nums text-success">{formatAmount(ledger.total_current)} kr</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-sm text-muted-foreground">Förfallet</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="font-display text-2xl tabular-nums text-destructive">{formatAmount(ledger.total_overdue)} kr</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Aging table */}
|
||
{ledger.entries.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Ålderfördelning per leverantör</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="overflow-x-auto -mx-2 px-2"><table className="w-full text-sm min-w-[500px]">
|
||
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
|
||
<tr className="border-b text-left">
|
||
<th className="py-2 w-8"></th>
|
||
<th className="py-2">Leverantör</th>
|
||
<th className="py-2 text-right">Ej förfallet</th>
|
||
<th className="py-2 text-right">1-30 dagar</th>
|
||
<th className="py-2 text-right">31-60 dagar</th>
|
||
<th className="py-2 text-right">61-90 dagar</th>
|
||
<th className="py-2 text-right">90+ dagar</th>
|
||
<th className="py-2 text-right font-semibold">Totalt</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{ledger.entries.map((entry) => (
|
||
<SupplierLedgerRow key={entry.supplier_id} entry={entry} />
|
||
))}
|
||
</tbody>
|
||
<tfoot>
|
||
<tr className="font-semibold border-t-2">
|
||
<td className="py-2"></td>
|
||
<td className="py-2">Summa</td>
|
||
<td className="py-2 text-right">{formatAmount(ledger.entries.reduce((s, e) => s + e.current, 0))}</td>
|
||
<td className="py-2 text-right">{formatAmount(ledger.entries.reduce((s, e) => s + e.days_1_30, 0))}</td>
|
||
<td className="py-2 text-right">{formatAmount(ledger.entries.reduce((s, e) => s + e.days_31_60, 0))}</td>
|
||
<td className="py-2 text-right">{formatAmount(ledger.entries.reduce((s, e) => s + e.days_61_90, 0))}</td>
|
||
<td className="py-2 text-right text-destructive">{formatAmount(ledger.entries.reduce((s, e) => s + e.days_90_plus, 0))}</td>
|
||
<td className="py-2 text-right">{formatAmount(ledger.total_outstanding)}</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table></div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Reconciliation */}
|
||
{reconciliation && (
|
||
<Card className="border-2">
|
||
<CardHeader>
|
||
<CardTitle>Avstämning mot <AccountNumber number="2440" /></CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex justify-between">
|
||
<span>Leverantörsreskontra (summa utestående)</span>
|
||
<span className="font-mono">{formatAmount(reconciliation.supplier_ledger_total)} kr</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span><AccountNumber number="2440" /> saldo (huvudbok)</span>
|
||
<span className="font-mono">{formatAmount(reconciliation.account_2440_balance)} kr</span>
|
||
</div>
|
||
<div className="flex justify-between pt-2 border-t font-semibold">
|
||
<span>Differens</span>
|
||
<span className={reconciliation.is_reconciled ? 'text-success' : 'text-destructive'}>
|
||
{formatAmount(reconciliation.difference)} kr
|
||
</span>
|
||
</div>
|
||
<div className="pt-2 space-y-2">
|
||
{reconciliation.is_reconciled ? (
|
||
<Badge variant="success">Avstämd</Badge>
|
||
) : (
|
||
<Badge variant="destructive">Ej avstämd - kontrollera bokföring</Badge>
|
||
)}
|
||
{reconciliation.unconverted_fx_count > 0 && (
|
||
<p className="text-xs text-muted-foreground">
|
||
{reconciliation.unconverted_fx_count} leverantörsfaktura i utländsk valuta saknar växelkurs: differensen kan bero på saknade kursuppgifter snarare än felbokning.
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function makeSupplierFetcher(supplierId: string): ReportSourceFetcher {
|
||
return async () => {
|
||
const res = await fetch(
|
||
`/api/reports/supplier-ledger/supplier/${encodeURIComponent(supplierId)}/invoices`
|
||
)
|
||
const json = await res.json()
|
||
if (!res.ok) throw new Error(json.error || 'Kunde inte hämta leverantörsfakturor')
|
||
const lines: ReportSourceLine[] = json.data?.lines || []
|
||
return { lines, next_cursor: json.data?.next_cursor ?? null }
|
||
}
|
||
}
|
||
|
||
function SupplierLedgerRow({
|
||
entry,
|
||
}: {
|
||
entry: {
|
||
supplier_id: string
|
||
supplier_name: string
|
||
current: number
|
||
days_1_30: number
|
||
days_31_60: number
|
||
days_61_90: number
|
||
days_90_plus: number
|
||
total_outstanding: number
|
||
}
|
||
}) {
|
||
const fetcher = React.useMemo(
|
||
() => makeSupplierFetcher(entry.supplier_id),
|
||
[entry.supplier_id]
|
||
)
|
||
const { Toggle, Panel } = useReportRowExpansion(fetcher, `sup-${entry.supplier_id}`)
|
||
return (
|
||
<>
|
||
<tr className="border-b last:border-0 hover:bg-muted/30 transition-colors">
|
||
<td className="py-2"><Toggle /></td>
|
||
<td className="py-2">{entry.supplier_name}</td>
|
||
<td className="py-2 text-right tabular-nums">{entry.current > 0 ? formatAmount(entry.current) : ''}</td>
|
||
<td className="py-2 text-right tabular-nums">{entry.days_1_30 > 0 ? formatAmount(entry.days_1_30) : ''}</td>
|
||
<td className="py-2 text-right tabular-nums">{entry.days_31_60 > 0 ? formatAmount(entry.days_31_60) : ''}</td>
|
||
<td className="py-2 text-right tabular-nums">{entry.days_61_90 > 0 ? formatAmount(entry.days_61_90) : ''}</td>
|
||
<td className="py-2 text-right tabular-nums text-destructive">{entry.days_90_plus > 0 ? formatAmount(entry.days_90_plus) : ''}</td>
|
||
<td className="py-2 text-right tabular-nums font-semibold">{formatAmount(entry.total_outstanding)}</td>
|
||
</tr>
|
||
<Panel colSpan={8} />
|
||
</>
|
||
)
|
||
}
|
||
|
||
// --- General Ledger (Huvudbok) ---
|
||
|
||
interface GeneralLedgerData {
|
||
accounts: {
|
||
account_number: string
|
||
account_name: string
|
||
opening_balance: number
|
||
lines: {
|
||
date: string
|
||
voucher_series: string
|
||
voucher_number: number
|
||
journal_entry_id: string
|
||
description: string
|
||
source_type: string
|
||
debit: number
|
||
credit: number
|
||
balance: number
|
||
dimensions?: Record<string, string>
|
||
}[]
|
||
closing_balance: number
|
||
total_debit: number
|
||
total_credit: number
|
||
}[]
|
||
period: { start: string; end: string }
|
||
}
|
||
|
||
// Stable default: an inline `= {}` would change identity every render and
|
||
// re-trigger the fetch effect for callers that omit the prop.
|
||
const EMPTY_DATE_RANGE: DateRangeValue = {}
|
||
|
||
export function GeneralLedgerView({ periodId, initialAccountFilter, dimensionFilter = null, dateRange = EMPTY_DATE_RANGE }: { periodId: string; initialAccountFilter: string | null; dimensionFilter?: DimensionFilterValue | null; dateRange?: DateRangeValue }) {
|
||
const [data, setData] = useState<GeneralLedgerData | null>(null)
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [accountFrom, setAccountFrom] = useState('')
|
||
const [accountTo, setAccountTo] = useState('')
|
||
|
||
const fetchData = useCallback(async (fromOverride?: string, toOverride?: string) => {
|
||
const from = fromOverride ?? accountFrom
|
||
const to = toOverride ?? accountTo
|
||
setLoading(true)
|
||
setError(null)
|
||
try {
|
||
const params = new URLSearchParams({ period_id: periodId })
|
||
if (from) params.set('account_from', from)
|
||
if (to) params.set('account_to', to)
|
||
if (dateRange.fromDate) params.set('from_date', dateRange.fromDate)
|
||
if (dateRange.toDate) params.set('to_date', dateRange.toDate)
|
||
if (dimensionFilter) {
|
||
params.set('dim_no', dimensionFilter.dimNo)
|
||
params.set('dim_code', dimensionFilter.code)
|
||
}
|
||
const res = await fetch(`/api/reports/general-ledger?${params}`)
|
||
const result = await res.json()
|
||
if (result.error) {
|
||
setError(result.error)
|
||
} else {
|
||
setData(result.data)
|
||
}
|
||
} catch {
|
||
setError('Kunde inte hämta huvudbok')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [periodId, accountFrom, accountTo, dimensionFilter, dateRange])
|
||
|
||
// When initialAccountFilter changes (drill-down from another report), apply it
|
||
useEffect(() => {
|
||
if (initialAccountFilter) {
|
||
setAccountFrom(initialAccountFilter)
|
||
setAccountTo(initialAccountFilter)
|
||
fetchData(initialAccountFilter, initialAccountFilter)
|
||
} else {
|
||
fetchData()
|
||
}
|
||
}, [periodId, initialAccountFilter, dimensionFilter, dateRange])
|
||
|
||
if (loading) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Laddar huvudbok...
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-destructive">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2" />
|
||
{error}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (!data || data.accounts.length === 0) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Inga bokförda verifikationer i denna period.
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<ReportExportMenu items={[{ format: 'xlsx', href: `/api/reports/general-ledger/xlsx?${reportQuery(periodId, dateRange, dimensionFilter)}` }]} />
|
||
{/* Account range filter */}
|
||
<Card>
|
||
<CardContent className="pt-6">
|
||
<div className="flex flex-wrap items-end gap-4">
|
||
<div>
|
||
<Label>Konto från</Label>
|
||
<input
|
||
type="text"
|
||
value={accountFrom}
|
||
onChange={(e) => setAccountFrom(e.target.value)}
|
||
placeholder="t.ex. 1510"
|
||
className="w-full mt-1 rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label>Konto till</Label>
|
||
<input
|
||
type="text"
|
||
value={accountTo}
|
||
onChange={(e) => setAccountTo(e.target.value)}
|
||
placeholder="t.ex. 1519"
|
||
className="w-full mt-1 rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||
/>
|
||
</div>
|
||
<Button onClick={() => fetchData()} variant="outline">
|
||
Filtrera
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{data.period.start && (
|
||
<p className="text-sm text-muted-foreground">
|
||
Period: {data.period.start}: {data.period.end} | {data.accounts.length} konton
|
||
</p>
|
||
)}
|
||
|
||
{data.accounts.map((account) => (
|
||
<Card key={account.account_number}>
|
||
<CardHeader className="pb-2">
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-base">
|
||
<AccountNumber number={account.account_number} name={account.account_name} showName />
|
||
</CardTitle>
|
||
<span className="text-sm text-muted-foreground">
|
||
IB: {formatAmount(account.opening_balance)} kr
|
||
</span>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="overflow-x-auto -mx-2 px-2"><table className="w-full text-sm min-w-[500px]">
|
||
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
|
||
<tr className="border-b text-left">
|
||
<th className="py-2 w-16">Ver.nr</th>
|
||
<th className="py-2 w-24">Datum</th>
|
||
<th className="py-2">Beskrivning</th>
|
||
<th className="py-2 w-24 text-right">Debet</th>
|
||
<th className="py-2 w-24 text-right">Kredit</th>
|
||
<th className="py-2 w-28 text-right">Saldo</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{account.lines.map((line, i) => (
|
||
<tr key={i} className="border-b last:border-0">
|
||
<td className="py-1.5 font-mono text-xs">
|
||
<Link
|
||
href={`/bookkeeping/${line.journal_entry_id}`}
|
||
className="text-foreground underline underline-offset-4 decoration-muted-foreground/40 hover:decoration-foreground transition-colors"
|
||
>
|
||
{formatVoucher(line)}
|
||
</Link>
|
||
</td>
|
||
<td className="py-1.5">{formatDate(line.date)}</td>
|
||
<td className="py-1.5 max-w-[240px]">
|
||
<span className="truncate block">{line.description}</span>
|
||
{line.dimensions && Object.keys(line.dimensions).length > 0 && (
|
||
<span className="text-[11px] text-muted-foreground tabular-nums">
|
||
{Object.entries(line.dimensions)
|
||
.sort(([a], [b]) => Number(a) - Number(b))
|
||
.map(([, code]) => code)
|
||
.join(' · ')}
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td className="py-1.5 text-right tabular-nums">
|
||
{line.debit > 0 ? formatAmount(line.debit) : ''}
|
||
</td>
|
||
<td className="py-1.5 text-right tabular-nums">
|
||
{line.credit > 0 ? formatAmount(line.credit) : ''}
|
||
</td>
|
||
<td className="py-1.5 text-right font-mono tabular-nums">{formatAmount(line.balance)}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
<tfoot>
|
||
<tr className="font-semibold border-t-2">
|
||
<td colSpan={3} className="py-2">Summa / Utgående balans</td>
|
||
<td className="py-2 text-right">{formatAmount(account.total_debit)}</td>
|
||
<td className="py-2 text-right">{formatAmount(account.total_credit)}</td>
|
||
<td className="py-2 text-right font-mono">{formatAmount(account.closing_balance)}</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table></div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// --- Journal Register (Grundbok) ---
|
||
|
||
interface JournalRegisterData {
|
||
entries: {
|
||
voucher_series: string
|
||
voucher_number: number
|
||
date: string
|
||
description: string
|
||
source_type: string
|
||
status: string
|
||
lines: {
|
||
account_number: string
|
||
account_name: string
|
||
debit: number
|
||
credit: number
|
||
}[]
|
||
total_debit: number
|
||
total_credit: number
|
||
}[]
|
||
total_entries: number
|
||
total_debit: number
|
||
total_credit: number
|
||
period: { start: string; end: string }
|
||
}
|
||
|
||
export function JournalRegisterView({ periodId }: { periodId: string }) {
|
||
const [data, setData] = useState<JournalRegisterData | null>(null)
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [expandedEntries, setExpandedEntries] = useState<Set<number>>(new Set())
|
||
|
||
const fetchData = async () => {
|
||
setLoading(true)
|
||
setError(null)
|
||
setExpandedEntries(new Set())
|
||
try {
|
||
const res = await fetch(`/api/reports/journal-register?period_id=${periodId}`)
|
||
const result = await res.json()
|
||
if (result.error) {
|
||
setError(result.error)
|
||
} else {
|
||
setData(result.data)
|
||
}
|
||
} catch {
|
||
setError('Kunde inte hämta grundbok')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (periodId) fetchData()
|
||
}, [periodId])
|
||
|
||
const toggleEntry = (index: number) => {
|
||
setExpandedEntries((prev) => {
|
||
const next = new Set(prev)
|
||
if (next.has(index)) {
|
||
next.delete(index)
|
||
} else {
|
||
next.add(index)
|
||
}
|
||
return next
|
||
})
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Laddar grundbok...
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-destructive">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2" />
|
||
{error}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (!data || data.entries.length === 0) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Inga bokförda verifikationer i denna period.
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<ReportExportMenu items={[{ format: 'xlsx', href: `/api/reports/journal-register/xlsx?period_id=${periodId}` }]} />
|
||
{data.period.start && (
|
||
<p className="text-sm text-muted-foreground">
|
||
Period: {data.period.start}: {data.period.end} | {data.total_entries} verifikationer
|
||
</p>
|
||
)}
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Grundbok (registreringsordning)</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="overflow-x-auto -mx-2 px-2"><table className="w-full text-sm min-w-[500px]">
|
||
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
|
||
<tr className="border-b text-left">
|
||
<th className="py-2 w-8"></th>
|
||
<th className="py-2 w-16">Ver.nr</th>
|
||
<th className="py-2 w-24">Datum</th>
|
||
<th className="py-2">Beskrivning</th>
|
||
<th className="py-2 w-24">Typ</th>
|
||
<th className="py-2 w-24 text-right">Debet</th>
|
||
<th className="py-2 w-24 text-right">Kredit</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{data.entries.map((entry, index) => {
|
||
const isExpanded = expandedEntries.has(index)
|
||
const isReversed = entry.status === 'reversed'
|
||
|
||
return (
|
||
<React.Fragment key={index}>
|
||
<tr
|
||
className={`border-b cursor-pointer hover:bg-muted/50 ${isReversed ? 'line-through opacity-60' : ''}`}
|
||
onClick={() => toggleEntry(index)}
|
||
>
|
||
<td className="py-2">
|
||
{isExpanded ? (
|
||
<ChevronDown className="h-4 w-4" />
|
||
) : (
|
||
<ChevronRight className="h-4 w-4" />
|
||
)}
|
||
</td>
|
||
<td className="py-2 font-mono text-xs">
|
||
{formatVoucher(entry)}
|
||
</td>
|
||
<td className="py-2">{formatDate(entry.date)}</td>
|
||
<td className="py-2">
|
||
{entry.description}
|
||
{isReversed && (
|
||
<Badge variant="outline" className="ml-2 text-xs">Makulerad</Badge>
|
||
)}
|
||
</td>
|
||
<td className="py-2 text-xs text-muted-foreground">{entry.source_type}</td>
|
||
<td className="py-2 text-right tabular-nums">{formatAmount(entry.total_debit)}</td>
|
||
<td className="py-2 text-right tabular-nums">{formatAmount(entry.total_credit)}</td>
|
||
</tr>
|
||
{isExpanded && entry.lines.map((line, lineIndex) => (
|
||
<tr key={`${index}-${lineIndex}`} className="bg-muted/30 border-b last:border-0">
|
||
<td></td>
|
||
<td></td>
|
||
<td className="py-1"><AccountNumber number={line.account_number} name={line.account_name} size="sm" /></td>
|
||
<td className="py-1 text-muted-foreground">{line.account_name}</td>
|
||
<td></td>
|
||
<td className="py-1 text-right">
|
||
{line.debit > 0 ? formatAmount(line.debit) : ''}
|
||
</td>
|
||
<td className="py-1 text-right">
|
||
{line.credit > 0 ? formatAmount(line.credit) : ''}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</React.Fragment>
|
||
)
|
||
})}
|
||
</tbody>
|
||
<tfoot>
|
||
<tr className="font-semibold border-t-2">
|
||
<td colSpan={5} className="py-2">Summa</td>
|
||
<td className="py-2 text-right">{formatAmount(data.total_debit)}</td>
|
||
<td className="py-2 text-right">{formatAmount(data.total_credit)}</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table></div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// --- AR Ledger (Kundreskontra) ---
|
||
|
||
interface ARLedgerData {
|
||
ledger: {
|
||
entries: {
|
||
customer_id: string
|
||
customer_name: string
|
||
invoices: {
|
||
invoice_id: string
|
||
invoice_number: string
|
||
invoice_date: string
|
||
due_date: string
|
||
total: number
|
||
paid_amount: number
|
||
outstanding: number
|
||
outstanding_sek: number | null
|
||
days_overdue: number
|
||
currency: string
|
||
}[]
|
||
current: number
|
||
days_1_30: number
|
||
days_31_60: number
|
||
days_61_90: number
|
||
days_90_plus: number
|
||
total_outstanding: number
|
||
}[]
|
||
total_outstanding: number
|
||
total_current: number
|
||
total_overdue: number
|
||
unpaid_count: number
|
||
unconverted_fx_count: number
|
||
}
|
||
reconciliation: {
|
||
ar_ledger_total: number
|
||
account_1510_balance: number
|
||
difference: number
|
||
is_reconciled: boolean
|
||
unconverted_fx_count: number
|
||
} | null
|
||
}
|
||
|
||
// Inner expansion row component for AR ledger.
|
||
// Fetches per-customer invoices (with journal_entry_id) and renders each as a
|
||
// link to /bookkeeping/[id] when posted, /invoices/[id] when still draft.
|
||
function ARCustomerInvoiceRows({
|
||
customerId,
|
||
invoices,
|
||
}: {
|
||
customerId: string
|
||
invoices: {
|
||
invoice_id: string
|
||
invoice_number: string
|
||
invoice_date: string
|
||
due_date: string
|
||
total: number
|
||
paid_amount: number
|
||
outstanding: number
|
||
outstanding_sek: number | null
|
||
days_overdue: number
|
||
currency: string
|
||
}[]
|
||
}) {
|
||
// ARCustomerInvoiceRows is mounted lazily: only when a customer is
|
||
// expanded, so initial state matches "still loading" and resets on
|
||
// unmount. No synchronous setState in the effect is needed.
|
||
const [enriched, setEnriched] = useState<Record<string, { journal_entry_id: string; voucher_series: string; voucher_number: number } | undefined>>({})
|
||
const [loaded, setLoaded] = useState(false)
|
||
|
||
useEffect(() => {
|
||
let cancelled = false
|
||
fetch(`/api/reports/ar-ledger/customer/${encodeURIComponent(customerId)}/invoices`)
|
||
.then((r) => r.json())
|
||
.then((json) => {
|
||
if (cancelled) return
|
||
const map: typeof enriched = {}
|
||
for (const line of json.data?.lines || []) {
|
||
if (line.invoice_id && line.journal_entry_id) {
|
||
map[line.invoice_id] = {
|
||
journal_entry_id: line.journal_entry_id,
|
||
voucher_series: line.voucher_series,
|
||
voucher_number: line.voucher_number,
|
||
}
|
||
}
|
||
}
|
||
setEnriched(map)
|
||
})
|
||
.catch(() => { /* fail silently; rows still render without verifikat link */ })
|
||
.finally(() => { if (!cancelled) setLoaded(true) })
|
||
return () => { cancelled = true }
|
||
}, [customerId])
|
||
const loading = !loaded
|
||
|
||
return (
|
||
<>
|
||
{invoices.map((inv) => {
|
||
const entry = enriched[inv.invoice_id]
|
||
const targetHref = entry?.journal_entry_id
|
||
? `/bookkeeping/${entry.journal_entry_id}`
|
||
: `/invoices/${inv.invoice_id}`
|
||
return (
|
||
<tr key={inv.invoice_id} className="bg-muted/30 border-b last:border-0">
|
||
<td></td>
|
||
<td className="py-1 text-xs" colSpan={2}>
|
||
<Link href={targetHref} className="font-mono hover:underline underline-offset-4">
|
||
{inv.invoice_number || '(utkast)'}
|
||
</Link>
|
||
{entry && (
|
||
<span className="ml-2 text-muted-foreground font-mono">
|
||
{formatVoucher(entry)}
|
||
</span>
|
||
)}
|
||
<span className="text-muted-foreground ml-2 tabular-nums">{formatDate(inv.invoice_date)}</span>
|
||
<span className="text-muted-foreground ml-2 tabular-nums">förfaller {formatDate(inv.due_date)}</span>
|
||
</td>
|
||
<td className="py-1 text-right text-xs text-muted-foreground" colSpan={2}>
|
||
{inv.days_overdue > 0 ? `${inv.days_overdue} dagar förfallen` : 'Ej förfallen'}
|
||
</td>
|
||
<td className="py-1 text-right text-xs text-muted-foreground">
|
||
{inv.paid_amount > 0 ? `Betalt: ${formatAmount(inv.paid_amount)}` : ''}
|
||
</td>
|
||
<td></td>
|
||
<td className="py-1 text-right text-xs font-medium tabular-nums">
|
||
{formatAmount(inv.outstanding)} {inv.currency}
|
||
</td>
|
||
</tr>
|
||
)
|
||
})}
|
||
{loading && (
|
||
<tr className="bg-muted/30">
|
||
<td></td>
|
||
<td colSpan={7} className="py-1 text-[10px] text-muted-foreground">Letar verifikat…</td>
|
||
</tr>
|
||
)}
|
||
</>
|
||
)
|
||
}
|
||
|
||
export function ARLedgerView({ periodId }: { periodId: string }) {
|
||
const [data, setData] = useState<ARLedgerData | null>(null)
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [expandedCustomers, setExpandedCustomers] = useState<Set<string>>(new Set())
|
||
const [asOfDate, setAsOfDate] = useState(localIsoDate)
|
||
|
||
const fetchData = async () => {
|
||
setLoading(true)
|
||
setError(null)
|
||
try {
|
||
const res = await fetch(`/api/reports/ar-ledger?period_id=${periodId}&as_of_date=${asOfDate}`)
|
||
const result = await res.json()
|
||
if (result.error) {
|
||
setError(result.error)
|
||
} else {
|
||
setData(result.data)
|
||
}
|
||
} catch {
|
||
setError('Kunde inte hämta kundreskontra')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (periodId) fetchData()
|
||
}, [periodId, asOfDate])
|
||
|
||
const toggleCustomer = (customerId: string) => {
|
||
setExpandedCustomers((prev) => {
|
||
const next = new Set(prev)
|
||
if (next.has(customerId)) {
|
||
next.delete(customerId)
|
||
} else {
|
||
next.add(customerId)
|
||
}
|
||
return next
|
||
})
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Laddar kundreskontra...
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-destructive">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2" />
|
||
{error}
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
if (!data || !data.ledger) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Ingen data tillgänglig.
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
const { ledger, reconciliation } = data
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<ReskontraToolbar
|
||
asOfDate={asOfDate}
|
||
onAsOfDateChange={setAsOfDate}
|
||
inputId="ar-ledger-as-of"
|
||
exportBase="/api/reports/ar-ledger"
|
||
/>
|
||
{/* Summary cards */}
|
||
<div className="grid md:grid-cols-3 gap-4">
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-sm text-muted-foreground">Totalt utestående</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="font-display text-2xl tabular-nums">{formatAmount(ledger.total_outstanding)} kr</p>
|
||
<p className="text-xs text-muted-foreground">{ledger.unpaid_count} fakturor</p>
|
||
{ledger.unconverted_fx_count > 0 && (
|
||
<p className="mt-1 text-xs text-muted-foreground">
|
||
{ledger.unconverted_fx_count} faktura i utländsk valuta utan växelkurs är inte med i totalen.
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-sm text-muted-foreground">Ej förfallet</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="font-display text-2xl tabular-nums text-success">{formatAmount(ledger.total_current)} kr</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-sm text-muted-foreground">Förfallet</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="font-display text-2xl tabular-nums text-destructive">{formatAmount(ledger.total_overdue)} kr</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Aging table with expandable invoice details */}
|
||
{ledger.entries.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Ålderfördelning per kund</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="overflow-x-auto -mx-2 px-2"><table className="w-full text-sm min-w-[500px]">
|
||
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
|
||
<tr className="border-b text-left">
|
||
<th className="py-2 w-8"></th>
|
||
<th className="py-2">Kund</th>
|
||
<th className="py-2 text-right">Ej förfallet</th>
|
||
<th className="py-2 text-right">1-30 dagar</th>
|
||
<th className="py-2 text-right">31-60 dagar</th>
|
||
<th className="py-2 text-right">61-90 dagar</th>
|
||
<th className="py-2 text-right">90+ dagar</th>
|
||
<th className="py-2 text-right font-semibold">Totalt</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{ledger.entries.map((entry) => {
|
||
const isExpanded = expandedCustomers.has(entry.customer_id)
|
||
return (
|
||
<React.Fragment key={entry.customer_id}>
|
||
<tr
|
||
className="border-b cursor-pointer hover:bg-muted/50"
|
||
onClick={() => toggleCustomer(entry.customer_id)}
|
||
>
|
||
<td className="py-2">
|
||
{isExpanded ? (
|
||
<ChevronDown className="h-4 w-4" />
|
||
) : (
|
||
<ChevronRight className="h-4 w-4" />
|
||
)}
|
||
</td>
|
||
<td className="py-2">{entry.customer_name}</td>
|
||
<td className="py-2 text-right">{entry.current > 0 ? formatAmount(entry.current) : ''}</td>
|
||
<td className="py-2 text-right">{entry.days_1_30 > 0 ? formatAmount(entry.days_1_30) : ''}</td>
|
||
<td className="py-2 text-right">{entry.days_31_60 > 0 ? formatAmount(entry.days_31_60) : ''}</td>
|
||
<td className="py-2 text-right">{entry.days_61_90 > 0 ? formatAmount(entry.days_61_90) : ''}</td>
|
||
<td className="py-2 text-right text-destructive">{entry.days_90_plus > 0 ? formatAmount(entry.days_90_plus) : ''}</td>
|
||
<td className="py-2 text-right font-semibold">{formatAmount(entry.total_outstanding)}</td>
|
||
</tr>
|
||
{isExpanded && (
|
||
<ARCustomerInvoiceRows
|
||
customerId={entry.customer_id}
|
||
invoices={entry.invoices}
|
||
/>
|
||
)}
|
||
</React.Fragment>
|
||
)
|
||
})}
|
||
</tbody>
|
||
<tfoot>
|
||
<tr className="font-semibold border-t-2">
|
||
<td className="py-2"></td>
|
||
<td className="py-2">Summa</td>
|
||
<td className="py-2 text-right">{formatAmount(ledger.entries.reduce((s, e) => s + e.current, 0))}</td>
|
||
<td className="py-2 text-right">{formatAmount(ledger.entries.reduce((s, e) => s + e.days_1_30, 0))}</td>
|
||
<td className="py-2 text-right">{formatAmount(ledger.entries.reduce((s, e) => s + e.days_31_60, 0))}</td>
|
||
<td className="py-2 text-right">{formatAmount(ledger.entries.reduce((s, e) => s + e.days_61_90, 0))}</td>
|
||
<td className="py-2 text-right text-destructive">{formatAmount(ledger.entries.reduce((s, e) => s + e.days_90_plus, 0))}</td>
|
||
<td className="py-2 text-right">{formatAmount(ledger.total_outstanding)}</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table></div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Reconciliation */}
|
||
{reconciliation && (
|
||
<Card className="border-2">
|
||
<CardHeader>
|
||
<CardTitle>Avstämning mot <AccountNumber number="1510" /></CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex justify-between">
|
||
<span>Kundreskontra (summa utestående)</span>
|
||
<span className="font-mono">{formatAmount(reconciliation.ar_ledger_total)} kr</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>Kundfordringar (<AccountNumber number="1510" /> + <AccountNumber number="1513" />) saldo</span>
|
||
<span className="font-mono">{formatAmount(reconciliation.account_1510_balance)} kr</span>
|
||
</div>
|
||
<div className="flex justify-between pt-2 border-t font-semibold">
|
||
<span>Differens</span>
|
||
<span className={reconciliation.is_reconciled ? 'text-success' : 'text-destructive'}>
|
||
{formatAmount(reconciliation.difference)} kr
|
||
</span>
|
||
</div>
|
||
<div className="pt-2 space-y-2">
|
||
{reconciliation.is_reconciled ? (
|
||
<Badge variant="success">Avstämd</Badge>
|
||
) : (
|
||
<Badge variant="destructive">Ej avstämd - kontrollera bokföring</Badge>
|
||
)}
|
||
{reconciliation.unconverted_fx_count > 0 && (
|
||
<p className="text-xs text-muted-foreground">
|
||
{reconciliation.unconverted_fx_count} kundfaktura i utländsk valuta saknar växelkurs: differensen kan bero på saknade kursuppgifter snarare än felbokning.
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// --- Resultat per projekt/kostnadsställe (dimension P&L matrix) ---
|
||
|
||
export function DimensionPnlView({ periodId, dateRange }: { periodId: string; dateRange: DateRangeValue }) {
|
||
// Loading is DERIVED (result key ≠ current query string) instead of a
|
||
// setState at effect start: keeps react-hooks/set-state-in-effect clean
|
||
// and is race-safe when the pivot/date changes mid-flight.
|
||
const [result, setResult] = useState<{
|
||
qs: string
|
||
data: DimensionPnlReport | null
|
||
error: string | null
|
||
} | null>(null)
|
||
const [dims, setDims] = useState<{ sie_dim_no: number; name: string }[]>([])
|
||
const [dimNo, setDimNo] = useState('6')
|
||
const reportQs = `${reportQuery(periodId, dateRange)}&dim_no=${encodeURIComponent(dimNo)}`
|
||
|
||
// Registered dimensions for the pivot picker (best-effort; the report
|
||
// defaults to projekt if the registry read fails).
|
||
useEffect(() => {
|
||
fetch('/api/dimensions')
|
||
.then((res) => res.json())
|
||
.then((payload) => {
|
||
if (Array.isArray(payload.data)) {
|
||
setDims(payload.data.map((d: { sie_dim_no: number; name: string }) => ({ sie_dim_no: d.sie_dim_no, name: d.name })))
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
let cancelled = false
|
||
fetch(`/api/reports/dimension-pnl?${reportQs}`)
|
||
.then((res) => res.json())
|
||
.then((payload) => {
|
||
if (cancelled) return
|
||
if (payload.error) {
|
||
setResult({
|
||
qs: reportQs,
|
||
data: null,
|
||
error: typeof payload.error === 'string' ? payload.error : 'Kunde inte hämta rapporten',
|
||
})
|
||
} else {
|
||
setResult({ qs: reportQs, data: payload.data, error: null })
|
||
}
|
||
})
|
||
.catch(() => {
|
||
if (!cancelled) setResult({ qs: reportQs, data: null, error: 'Kunde inte hämta rapporten' })
|
||
})
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [reportQs])
|
||
|
||
const loading = result?.qs !== reportQs
|
||
const error = loading ? null : result?.error ?? null
|
||
const data = loading ? null : result?.data ?? null
|
||
|
||
const pivotPicker = dims.length > 1 && (
|
||
<div className="flex flex-wrap items-center gap-1.5">
|
||
{dims.map((d) => {
|
||
const active = String(d.sie_dim_no) === dimNo
|
||
return (
|
||
<button
|
||
key={d.sie_dim_no}
|
||
type="button"
|
||
onClick={() => setDimNo(String(d.sie_dim_no))}
|
||
className={
|
||
active
|
||
? 'px-3 py-1.5 text-xs rounded-md border transition-colors duration-150 bg-secondary border-border text-foreground'
|
||
: 'px-3 py-1.5 text-xs rounded-md border transition-colors duration-150 bg-transparent border-border text-muted-foreground hover:bg-secondary/60 hover:text-foreground'
|
||
}
|
||
>
|
||
{d.name}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
)
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="space-y-4">
|
||
{pivotPicker}
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Laddar rapport...
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="space-y-4">
|
||
{pivotPicker}
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-destructive">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2" />
|
||
{error}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!data || data.groups.length === 0) {
|
||
return (
|
||
<div className="space-y-4">
|
||
{pivotPicker}
|
||
<Card>
|
||
<CardContent className="p-8 text-center text-muted-foreground">
|
||
Inga taggade intäkter eller kostnader i denna period.
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const columnLabel = (c: DimensionPnlReport['columns'][number]) =>
|
||
c.code === null ? '(Utan dimension)' : c.code
|
||
|
||
const colCount = 2 + data.columns.length + 1
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
{pivotPicker || <span />}
|
||
<ReportExportMenu items={[{ format: 'xlsx', href: `/api/reports/dimension-pnl/xlsx?${reportQs}` }]} />
|
||
</div>
|
||
|
||
<Card>
|
||
<CardContent className="p-0">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b text-[11px] uppercase tracking-wider text-muted-foreground">
|
||
<th className="text-left font-medium px-4 py-2 w-20">Konto</th>
|
||
<th className="text-left font-medium px-4 py-2">Kontonamn</th>
|
||
{data.columns.map((c, i) => (
|
||
<th key={i} className="text-right font-medium px-4 py-2 w-32 tabular-nums" title={c.name ?? undefined}>
|
||
{columnLabel(c)}
|
||
</th>
|
||
))}
|
||
<th className="text-right font-medium px-4 py-2 w-32 tabular-nums">Totalt</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{data.groups.map((group) => (
|
||
<React.Fragment key={group.class}>
|
||
<tr className="bg-muted/30">
|
||
<td colSpan={colCount} className="px-4 py-2 text-[12px] font-semibold text-muted-foreground">
|
||
{group.class_label}
|
||
</td>
|
||
</tr>
|
||
{group.rows.map((row) => (
|
||
<tr key={row.account_number} className="border-b last:border-0">
|
||
<td className="px-4 py-1.5">
|
||
<AccountNumber number={row.account_number} name={row.account_name} />
|
||
</td>
|
||
<td className="px-4 py-1.5">{row.account_name}</td>
|
||
{row.values.map((v, i) => (
|
||
<td key={i} className="px-4 py-1.5 text-right tabular-nums">
|
||
{Math.abs(v) >= 0.005 ? formatAmount(v) : ''}
|
||
</td>
|
||
))}
|
||
<td className="px-4 py-1.5 text-right tabular-nums font-medium">{formatAmount(row.total)}</td>
|
||
</tr>
|
||
))}
|
||
<tr className="border-b font-medium">
|
||
<td colSpan={2} className="px-4 py-1.5 text-right text-muted-foreground">
|
||
Summa
|
||
</td>
|
||
{group.subtotals.map((v, i) => (
|
||
<td key={i} className="px-4 py-1.5 text-right tabular-nums">{formatAmount(v)}</td>
|
||
))}
|
||
<td className="px-4 py-1.5 text-right tabular-nums">{formatAmount(group.subtotal_total)}</td>
|
||
</tr>
|
||
</React.Fragment>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-2">
|
||
<CardContent className="py-4">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<tbody>
|
||
<tr>
|
||
<td className="px-4 font-bold text-lg">Beräknat resultat</td>
|
||
<td className="px-4" />
|
||
{data.net_per_column.map((v, i) => (
|
||
<td key={i} className={`px-4 text-right tabular-nums font-semibold w-32 ${v >= 0 ? 'text-success' : 'text-destructive'}`}>
|
||
{formatAmount(v)}
|
||
</td>
|
||
))}
|
||
<td className={`px-4 text-right tabular-nums font-bold text-lg w-32 ${data.net_total >= 0 ? 'text-success' : 'text-destructive'}`}>
|
||
{formatAmount(data.net_total)} kr
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|