Bug/accounting suggestion (#456)

* feat: add bike benefit handling and optional vacation accrual

- Introduced bike benefit (cykelförmån) with calculations for annual market value and monthly taxable value.
- Updated schemas to include new benefit types and validation rules.
- Implemented API routes for creating, updating, and deleting employee benefits.
- Enhanced salary calculation logic to accommodate new vacation rule options, including a 'none' option for no accrual.
- Added UI components for managing employee benefits, including input for bike benefit specifics.
- Created database migrations for employee benefits and updated salary line items to support new benefit types.

* chore: remove Langfuse env var checks

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat: enhance OAuth callback URL handling and update default scopes for Visma integration

* feat: remove trade_name field and simplify company naming in invoices

* refactor: destructure canWrite from useCanWrite for consistency across components

* feat: enhance PATCH endpoint to validate existing benefits and handle bike benefit updates

* feat: add missing label for bike benefit in salary line item types

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mattsson
2026-05-13 00:26:04 +02:00
committed by GitHub
co-authored by Claude Opus 4.7
parent cd96e5ec26
commit 3fa871c742
53 changed files with 1182 additions and 125 deletions
+267
View File
@@ -0,0 +1,267 @@
'use client'
import { useEffect, useState } from 'react'
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Plus, Trash2, Loader2 } from 'lucide-react'
import { useToast } from '@/components/ui/use-toast'
import { formatCurrency, formatDate } from '@/lib/utils'
import { getErrorMessage } from '@/lib/errors/get-error-message'
type BenefitType = 'bike' | 'car' | 'meals' | 'housing' | 'wellness' | 'other'
interface EmployeeBenefit {
id: string
benefit_type: BenefitType
description: string
monthly_value: number
valid_from: string
valid_to: string | null
metadata: Record<string, unknown>
is_active: boolean
}
const BENEFIT_LABELS: Record<BenefitType, string> = {
bike: 'Cykelförmån',
car: 'Bilförmån',
meals: 'Kostförmån',
housing: 'Bostadsförmån',
wellness: 'Friskvård (skattepliktig del)',
other: 'Övrig förmån',
}
export function EmployeeBenefitsPanel({ employeeId, canWrite }: { employeeId: string; canWrite: boolean }) {
const { toast } = useToast()
const [benefits, setBenefits] = useState<EmployeeBenefit[]>([])
const [loading, setLoading] = useState(true)
const [adding, setAdding] = useState(false)
const [submitting, setSubmitting] = useState(false)
const [type, setType] = useState<BenefitType>('bike')
const [description, setDescription] = useState('')
const [monthlyValue, setMonthlyValue] = useState('')
const [annualMarketValue, setAnnualMarketValue] = useState('')
const [validFrom, setValidFrom] = useState(() => new Date().toISOString().slice(0, 10))
const [validTo, setValidTo] = useState('')
async function load() {
setLoading(true)
const res = await fetch(`/api/salary/employees/${employeeId}/benefits`)
if (res.ok) {
const { data } = await res.json()
setBenefits(data || [])
}
setLoading(false)
}
useEffect(() => {
load()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [employeeId])
function reset() {
setType('bike')
setDescription('')
setMonthlyValue('')
setAnnualMarketValue('')
setValidFrom(new Date().toISOString().slice(0, 10))
setValidTo('')
setAdding(false)
}
async function handleAdd() {
setSubmitting(true)
const body: Record<string, unknown> = {
benefit_type: type,
description: description || BENEFIT_LABELS[type],
valid_from: validFrom,
}
if (validTo) body.valid_to = validTo
if (type === 'bike') {
body.annual_market_value = parseFloat(annualMarketValue) || 0
} else {
body.monthly_value = parseFloat(monthlyValue) || 0
}
const res = await fetch(`/api/salary/employees/${employeeId}/benefits`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
})
if (res.ok) {
toast({ title: 'Förmån tillagd' })
reset()
await load()
} else {
const result = await res.json()
toast({
title: 'Kunde inte spara förmån',
description: getErrorMessage(result, { statusCode: res.status }),
variant: 'destructive',
})
}
setSubmitting(false)
}
async function handleDelete(id: string) {
const res = await fetch(`/api/salary/employees/${employeeId}/benefits/${id}`, { method: 'DELETE' })
if (res.ok) {
toast({ title: 'Förmån borttagen' })
await load()
} else {
toast({ title: 'Kunde inte ta bort', variant: 'destructive' })
}
}
const previewMonthlyBike = (() => {
const annual = parseFloat(annualMarketValue) || 0
return Math.max(0, annual - 3000) / 12
})()
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle className="text-base">Förmåner</CardTitle>
{canWrite && !adding && (
<Button size="sm" variant="outline" onClick={() => setAdding(true)}>
<Plus className="mr-2 h-4 w-4" />
Lägg till förmån
</Button>
)}
</CardHeader>
<CardContent className="space-y-4">
{loading ? (
<p className="text-sm text-muted-foreground">Laddar…</p>
) : benefits.length === 0 && !adding ? (
<p className="text-sm text-muted-foreground">
Inga förmåner registrerade. Aktiva förmåner läggs till automatiskt som rader vid lönekörning.
</p>
) : (
benefits.length > 0 && (
<Table>
<TableHeader>
<TableRow>
<TableHead>Typ</TableHead>
<TableHead>Beskrivning</TableHead>
<TableHead className="text-right">Värde/mån</TableHead>
<TableHead>Period</TableHead>
<TableHead></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{benefits.map(b => (
<TableRow key={b.id}>
<TableCell>{BENEFIT_LABELS[b.benefit_type]}</TableCell>
<TableCell className="text-muted-foreground">{b.description}</TableCell>
<TableCell className="text-right tabular-nums">{formatCurrency(b.monthly_value)}</TableCell>
<TableCell className="text-muted-foreground tabular-nums text-xs">
{formatDate(b.valid_from)}
{b.valid_to ? ` – ${formatDate(b.valid_to)}` : ' – löpande'}
</TableCell>
<TableCell className="text-right">
{canWrite && (
<Button size="icon" variant="ghost" onClick={() => handleDelete(b.id)} aria-label="Ta bort">
<Trash2 className="h-4 w-4" />
</Button>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)
)}
{adding && (
<div className="space-y-4 rounded-md border bg-muted/30 p-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="benefit_type">Typ</Label>
<Select value={type} onValueChange={(v) => setType(v as BenefitType)}>
<SelectTrigger id="benefit_type">
<SelectValue />
</SelectTrigger>
<SelectContent>
{(Object.keys(BENEFIT_LABELS) as BenefitType[]).map(k => (
<SelectItem key={k} value={k}>{BENEFIT_LABELS[k]}</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="benefit_description">Beskrivning</Label>
<Input
id="benefit_description"
value={description}
onChange={e => setDescription(e.target.value)}
placeholder={BENEFIT_LABELS[type]}
/>
</div>
</div>
{type === 'bike' ? (
<div className="space-y-2">
<Label htmlFor="annual_market_value">Årligt marknadsvärde (SEK)</Label>
<Input
id="annual_market_value"
type="number"
step="1"
min="0"
value={annualMarketValue}
onChange={e => setAnnualMarketValue(e.target.value)}
placeholder="t.ex. 8 400 (700 kr/mån)"
className="max-w-xs"
/>
<p className="text-xs text-muted-foreground">
Skatteverkets schablon: första 3 000 kr/år är skattefri. Resterande beskattas månadsvis.
{parseFloat(annualMarketValue) > 0 && (
<span className="ml-1">
Månatligt förmånsvärde: <strong className="tabular-nums">{formatCurrency(previewMonthlyBike)}</strong>
</span>
)}
</p>
</div>
) : (
<div className="space-y-2">
<Label htmlFor="monthly_value">Månatligt förmånsvärde (SEK)</Label>
<Input
id="monthly_value"
type="number"
step="1"
min="0"
value={monthlyValue}
onChange={e => setMonthlyValue(e.target.value)}
className="max-w-xs"
/>
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="valid_from">Gäller från</Label>
<Input id="valid_from" type="date" value={validFrom} onChange={e => setValidFrom(e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="valid_to">Gäller till (valfritt)</Label>
<Input id="valid_to" type="date" value={validTo} onChange={e => setValidTo(e.target.value)} />
</div>
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" size="sm" onClick={reset} disabled={submitting}>Avbryt</Button>
<Button size="sm" onClick={handleAdd} disabled={submitting}>
{submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Spara
</Button>
</div>
</div>
)}
</CardContent>
</Card>
)
}
+49 -1
View File
@@ -4,7 +4,7 @@ import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Download, Loader2, CheckCircle2 } from 'lucide-react'
import { Download, Loader2, CheckCircle2, ChevronDown, Info } from 'lucide-react'
import { useToast } from '@/components/ui/use-toast'
import { getErrorMessage } from '@/lib/errors/get-error-message'
@@ -30,6 +30,20 @@ const FORMAT_DESCRIPTION: Record<PaymentFormat, string> = {
pain001: 'ISO 20022. För banker som inte är anslutna till Bankgirot, eller internationell SEPA.',
}
const BANK_INSTRUCTIONS: Record<PaymentFormat, Array<{ bank: string; steps: string }>> = {
bg_lb: [
{ bank: 'Swedbank Företag', steps: 'Företagsbetalningar → Importera fil → välj LB-format → ladda upp och signera med BankID.' },
{ bank: 'SEB Företag', steps: 'Betalningar → Filöverföring → välj Bankgiro LB → ladda upp och attestera.' },
{ bank: 'Handelsbanken', steps: 'Betala → Filimport → välj LB → kontrollera summor → signera.' },
{ bank: 'Nordea Företag', steps: 'Filimport → Bankgiro LB → ladda upp → attestera betalningen.' },
],
pain001: [
{ bank: 'SEB', steps: 'Betalningar → Importera SEPA / ISO 20022 (pain.001) → ladda upp och signera.' },
{ bank: 'Handelsbanken', steps: 'Betala → Filimport → ISO 20022 → välj pain.001.' },
{ bank: 'Nordea', steps: 'Filimport → Format pain.001.001.03 → ladda upp → attestera.' },
],
}
export function PaymentFilePanel({
salaryRunId,
periodLabel,
@@ -42,6 +56,7 @@ export function PaymentFilePanel({
const { toast } = useToast()
const [format, setFormat] = useState<PaymentFormat>(defaultFormat)
const [downloading, setDownloading] = useState(false)
const [showInstructions, setShowInstructions] = useState(false)
const endpoint =
format === 'bg_lb'
@@ -123,6 +138,39 @@ export function PaymentFilePanel({
Ladda ner betalfil
</Button>
</div>
<button
type="button"
onClick={() => setShowInstructions(s => !s)}
className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground"
aria-expanded={showInstructions}
>
<ChevronDown className={`h-3 w-3 transition-transform ${showInstructions ? 'rotate-180' : ''}`} />
Så importerar du filen i din bank
</button>
{showInstructions && (
<div className="space-y-2 rounded-md border bg-muted/30 p-3 text-xs">
{BANK_INSTRUCTIONS[format].map(b => (
<div key={b.bank}>
<strong className="text-foreground">{b.bank}.</strong>{' '}
<span className="text-muted-foreground">{b.steps}</span>
</div>
))}
<p className="pt-1 text-muted-foreground border-t mt-2">
Filen innehåller både lön till anställda och beloppen är förberedda — bankens BankID-signering är det enda steget kvar.
</p>
</div>
)}
<div className="flex items-start gap-2 rounded-md border border-dashed bg-muted/20 p-3 text-xs text-muted-foreground">
<Info className="h-3.5 w-3.5 mt-0.5 shrink-0" />
<span>
<strong className="text-foreground">Open Payments / direktbetalning</strong> via PSD2 (utan filimport)
är planerat för framtiden via Enable Banking. Initiering kräver separat PIS-avtal — vi följer upp när
tillräckligt många kunder använder lönebetalfiler regelbundet.
</span>
</div>
</>
)}
</CardContent>
+86
View File
@@ -0,0 +1,86 @@
'use client'
import { useEffect, useState } from 'react'
import { Globe, CheckCircle2, AlertTriangle, RefreshCcw, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
type Source = 'api' | 'fallback' | 'unavailable'
interface Status {
year: number
source: Source
reachable: boolean
checkedAt: string
}
interface Props {
year?: number
compact?: boolean
}
export function TaxTableStatus({ year, compact = false }: Props) {
const [status, setStatus] = useState<Status | null>(null)
const [loading, setLoading] = useState(true)
async function check() {
setLoading(true)
const params = new URLSearchParams()
if (year) params.set('year', String(year))
const res = await fetch(`/api/salary/tax-tables/status?${params}`)
if (res.ok) {
const { data } = await res.json()
setStatus(data)
}
setLoading(false)
}
useEffect(() => {
check()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [year])
if (loading && !status) {
return (
<div className="text-xs text-muted-foreground flex items-center gap-1.5">
<Loader2 className="h-3 w-3 animate-spin" />
Kontrollerar skattetabeller…
</div>
)
}
if (!status) return null
const Icon = status.source === 'api' ? CheckCircle2 : AlertTriangle
const iconColor =
status.source === 'api' ? 'text-success' :
status.source === 'fallback' ? 'text-warning' :
'text-destructive'
const label =
status.source === 'api'
? `Skattetabeller för ${status.year} hämtas live från Skatteverket`
: status.source === 'fallback'
? `Skatteverkets API är inte nåbart — använder lokal reservdata för ${status.year}`
: `Skattetabeller för ${status.year} kunde inte hämtas`
if (compact) {
return (
<p className="text-xs text-muted-foreground flex items-center gap-1.5">
<Globe className="h-3 w-3" />
{label}
</p>
)
}
return (
<div className="flex items-center justify-between gap-3 rounded-md border bg-muted/30 px-3 py-2">
<div className="flex items-center gap-2 text-sm">
<Icon className={`h-4 w-4 ${iconColor}`} />
<span>{label}</span>
</div>
<Button variant="ghost" size="sm" onClick={check} disabled={loading} aria-label="Kontrollera igen">
{loading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCcw className="h-3.5 w-3.5" />}
</Button>
</div>
)
}
+1 -14
View File
@@ -22,22 +22,9 @@ export function CompanyInfoForm({ settings }: CompanyInfoFormProps) {
id="company_name"
name="company_name"
defaultValue={settings.company_name || ''}
disabled={settings.onboarding_complete === true}
/>
{settings.onboarding_complete && (
<p className="text-xs text-muted-foreground">Kan inte ändras efter att kontot skapats</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="trade_name">Handelsnamn</Label>
<Input
id="trade_name"
name="trade_name"
defaultValue={settings.trade_name || ''}
placeholder="Visas på fakturor istället för företagsnamnet"
/>
<p className="text-xs text-muted-foreground">
Valfritt. Visas som huvudnamn på fakturor och e-post, med det juridiska namnet i parentes.
Visas på fakturor, e-post och deklarationsfiler. För enskild firma är det vanligtvis ditt eget namn (Förnamn Efternamn).
</p>
</div>
<div className="space-y-2">
+11
View File
@@ -95,6 +95,17 @@ export function PdfPrintSettings({ settings, onUpdate }: PdfPrintSettingsProps)
onCheckedChange={(v) => saveToggle('invoice_show_plusgiro', v)}
/>
</div>
<div className="flex items-center justify-between">
<div>
<Label>Visa logga</Label>
<p className="text-xs text-muted-foreground">Visa uppladdad logga i fakturahuvudet</p>
</div>
<Switch
checked={settings.invoice_show_logo ?? true}
onCheckedChange={(v) => saveToggle('invoice_show_logo', v)}
/>
</div>
</div>
<div className="space-y-4 pt-2">
@@ -90,12 +90,25 @@ export default function JournalEntryPreview({
const vatRate = templateVatRate ?? 0
const vatAmt = extractVatAmount(absAmount, vatRate)
const netAmt = extractNetAmount(absAmount, vatRate)
const isIncome = amount > 0
result.push({ side: 'debet', account: templateDebitAccount, amount: netAmt })
if (vatAmt > 0) {
result.push({ side: 'debet', account: '2641', amount: vatAmt })
if (isIncome) {
// Income: debit bank gross, credit revenue net, credit output VAT
result.push({ side: 'debet', account: templateDebitAccount, amount: absAmount })
result.push({ side: 'kredit', account: templateCreditAccount, amount: netAmt })
if (vatAmt > 0) {
// Map rate → output VAT account (BAS 2611/2621/2631)
const outputVatAccount = vatRate === 0.06 ? '2631' : vatRate === 0.12 ? '2621' : '2611'
result.push({ side: 'kredit', account: outputVatAccount, amount: vatAmt })
}
} else {
// Expense: debit expense net + input VAT, credit bank gross
result.push({ side: 'debet', account: templateDebitAccount, amount: netAmt })
if (vatAmt > 0) {
result.push({ side: 'debet', account: '2641', amount: vatAmt })
}
result.push({ side: 'kredit', account: templateCreditAccount, amount: absAmount })
}
result.push({ side: 'kredit', account: templateCreditAccount, amount: absAmount })
return result
}