Jakob WennbergandClaude Sonnet 5
ec27228a8e
Em dashes (—) and en dashes (–) had spread across comments, docs, tests, and a few UI strings, reading as AI-generated boilerplate rather than house style. Replaced each with punctuation matching its context: colon for explanatory clauses, comma for asides, plain hyphen for numeric/legal ranges (e.g. "21-23§"), "to"/"till" for date ranges, parentheses for paired-dash asides. messages/en.json and messages/sv.json were fixed by hand together to keep sv/en in sync. Left untouched where the dash is the functional subject rather than decorative punctuation: date-range-parser.ts's separator regex, charset-repair.ts's CP1252 byte-mapping table (and its test), the SIE encoding mojibake docs, generic-csv.ts's minus-sign normalizer, the agent system-prompt files that already instruct against em dashes, and a golden iXBRL test fixture compared byte-for-byte. Also fixes two bugs surfaced along the way: an off-by-one in ApiKeysPanel's scope-label split (a leftover from an earlier partial pass), and a charset-repair test that had lost the literal en-dash it exists to verify. Regenerated the agent atom seed migration (skills:generate) since 27 SKILL.md files changed. Added a CLAUDE.md rule against em/en dashes, with an explicit carve-out for the functional-dash cases above. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
398 lines
12 KiB
TypeScript
398 lines
12 KiB
TypeScript
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'
|
||
import { getBranding } from '@/lib/branding/service'
|
||
|
||
/**
|
||
* Pay slip PDF template (Lönespecifikation).
|
||
*
|
||
* Legally required per BFL as räkenskapsinformation/underlag.
|
||
* Subject to 7-year retention per BFL 7 kap.
|
||
*
|
||
* Contents:
|
||
* - Company + employee identification
|
||
* - Line items (salary, absence, benefits, deductions)
|
||
* - Gross → Tax → Net summary with tax table reference
|
||
* - Employer cost breakdown (avgifter, vacation accrual): transparency feature
|
||
* - YTD totals (cumulative year-to-date)
|
||
* - Calculation breakdown (optional detail showing every formula step)
|
||
*/
|
||
|
||
const styles = StyleSheet.create({
|
||
page: {
|
||
fontFamily: 'Helvetica',
|
||
fontSize: 9,
|
||
padding: 40,
|
||
color: '#1a1a1a',
|
||
},
|
||
header: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
marginBottom: 20,
|
||
},
|
||
title: {
|
||
fontSize: 16,
|
||
fontFamily: 'Helvetica-Bold',
|
||
marginBottom: 4,
|
||
},
|
||
subtitle: {
|
||
fontSize: 10,
|
||
color: '#666',
|
||
},
|
||
companyName: {
|
||
fontSize: 12,
|
||
fontFamily: 'Helvetica-Bold',
|
||
},
|
||
companyInfo: {
|
||
fontSize: 8,
|
||
color: '#666',
|
||
marginTop: 2,
|
||
},
|
||
section: {
|
||
marginBottom: 14,
|
||
},
|
||
sectionTitle: {
|
||
fontSize: 10,
|
||
fontFamily: 'Helvetica-Bold',
|
||
marginBottom: 6,
|
||
paddingBottom: 3,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#e0e0e0',
|
||
},
|
||
row: {
|
||
flexDirection: 'row',
|
||
paddingVertical: 3,
|
||
},
|
||
rowAlt: {
|
||
flexDirection: 'row',
|
||
paddingVertical: 3,
|
||
backgroundColor: '#f8f8f8',
|
||
},
|
||
headerRow: {
|
||
flexDirection: 'row',
|
||
paddingVertical: 4,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#ccc',
|
||
marginBottom: 2,
|
||
},
|
||
colDesc: { flex: 3.5 },
|
||
colQty: { flex: 1, textAlign: 'right' as const },
|
||
colRate: { flex: 1.5, textAlign: 'right' as const },
|
||
colAmount: { flex: 1.5, textAlign: 'right' as const },
|
||
headerText: {
|
||
fontSize: 8,
|
||
fontFamily: 'Helvetica-Bold',
|
||
color: '#666',
|
||
textTransform: 'uppercase' as const,
|
||
},
|
||
summaryRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
paddingVertical: 3,
|
||
},
|
||
summaryLabel: {
|
||
fontSize: 9,
|
||
color: '#444',
|
||
},
|
||
summaryValue: {
|
||
fontSize: 9,
|
||
fontFamily: 'Helvetica-Bold',
|
||
textAlign: 'right' as const,
|
||
},
|
||
totalRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
paddingVertical: 6,
|
||
borderTopWidth: 2,
|
||
borderTopColor: '#1a1a1a',
|
||
marginTop: 4,
|
||
},
|
||
totalLabel: {
|
||
fontSize: 11,
|
||
fontFamily: 'Helvetica-Bold',
|
||
},
|
||
totalValue: {
|
||
fontSize: 11,
|
||
fontFamily: 'Helvetica-Bold',
|
||
textAlign: 'right' as const,
|
||
},
|
||
infoGrid: {
|
||
flexDirection: 'row',
|
||
gap: 20,
|
||
marginBottom: 14,
|
||
},
|
||
infoColumn: {
|
||
flex: 1,
|
||
},
|
||
infoLabel: {
|
||
fontSize: 7,
|
||
color: '#999',
|
||
textTransform: 'uppercase' as const,
|
||
marginBottom: 1,
|
||
},
|
||
infoValue: {
|
||
fontSize: 9,
|
||
marginBottom: 6,
|
||
},
|
||
breakdownSection: {
|
||
marginTop: 10,
|
||
padding: 10,
|
||
backgroundColor: '#f5f5f5',
|
||
borderRadius: 3,
|
||
},
|
||
breakdownTitle: {
|
||
fontSize: 9,
|
||
fontFamily: 'Helvetica-Bold',
|
||
marginBottom: 6,
|
||
},
|
||
breakdownRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
paddingVertical: 1.5,
|
||
},
|
||
breakdownLabel: {
|
||
fontSize: 7.5,
|
||
color: '#555',
|
||
flex: 3,
|
||
},
|
||
breakdownFormula: {
|
||
fontSize: 7,
|
||
color: '#888',
|
||
flex: 3,
|
||
fontFamily: 'Courier',
|
||
},
|
||
breakdownValue: {
|
||
fontSize: 7.5,
|
||
textAlign: 'right' as const,
|
||
flex: 1.5,
|
||
},
|
||
footer: {
|
||
position: 'absolute' as const,
|
||
bottom: 30,
|
||
left: 40,
|
||
right: 40,
|
||
borderTopWidth: 1,
|
||
borderTopColor: '#e0e0e0',
|
||
paddingTop: 6,
|
||
fontSize: 7,
|
||
color: '#999',
|
||
textAlign: 'center' as const,
|
||
},
|
||
ytdSection: {
|
||
marginTop: 10,
|
||
},
|
||
ytdRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
paddingVertical: 2,
|
||
},
|
||
ytdLabel: {
|
||
fontSize: 8,
|
||
color: '#666',
|
||
},
|
||
ytdValue: {
|
||
fontSize: 8,
|
||
color: '#666',
|
||
textAlign: 'right' as const,
|
||
},
|
||
})
|
||
|
||
export interface PayslipData {
|
||
// Company
|
||
companyName: string
|
||
companyOrgNumber: string
|
||
companyAddress?: string
|
||
|
||
// Employee
|
||
employeeName: string
|
||
personnummerMasked: string // YYYYMMDD-XXXX
|
||
employmentType: string
|
||
|
||
// Period
|
||
periodYear: number
|
||
periodMonth: number
|
||
paymentDate: string
|
||
|
||
// Line items
|
||
lineItems: PayslipLineItem[]
|
||
|
||
// Summary
|
||
grossSalary: number
|
||
taxWithheld: number
|
||
netSalary: number
|
||
taxReference: string // e.g. "Tabell 33, kolumn 1"
|
||
|
||
// Employer cost (transparency feature)
|
||
avgifterRate: number
|
||
avgifterAmount: number
|
||
vacationAccrual: number
|
||
vacationAccrualAvgifter: number
|
||
totalEmployerCost: number
|
||
|
||
// YTD
|
||
ytdGross: number
|
||
ytdTax: number
|
||
ytdNet: number
|
||
|
||
// Bank
|
||
bankAccount?: string // masked
|
||
|
||
// Calculation breakdown (optional)
|
||
breakdownSteps?: { label: string; formula: string; output: number }[]
|
||
}
|
||
|
||
export interface PayslipLineItem {
|
||
description: string
|
||
quantity?: number
|
||
unitPrice?: number
|
||
amount: number
|
||
}
|
||
|
||
function fmt(amount: number): string {
|
||
return new Intl.NumberFormat('sv-SE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount)
|
||
}
|
||
|
||
const MONTH_NAMES = [
|
||
'januari', 'februari', 'mars', 'april', 'maj', 'juni',
|
||
'juli', 'augusti', 'september', 'oktober', 'november', 'december',
|
||
]
|
||
|
||
export function PayslipPDF({ data }: { data: PayslipData }) {
|
||
const periodLabel = `${MONTH_NAMES[data.periodMonth - 1]} ${data.periodYear}`
|
||
|
||
return (
|
||
<Document>
|
||
<Page size="A4" style={styles.page}>
|
||
{/* Header */}
|
||
<View style={styles.header}>
|
||
<View>
|
||
<Text style={styles.title}>Lönespecifikation</Text>
|
||
<Text style={styles.subtitle}>{periodLabel}</Text>
|
||
</View>
|
||
<View style={{ alignItems: 'flex-end' as const }}>
|
||
<Text style={styles.companyName}>{data.companyName}</Text>
|
||
<Text style={styles.companyInfo}>Org.nr {data.companyOrgNumber}</Text>
|
||
{data.companyAddress && <Text style={styles.companyInfo}>{data.companyAddress}</Text>}
|
||
</View>
|
||
</View>
|
||
|
||
{/* Employee + Period info */}
|
||
<View style={styles.infoGrid}>
|
||
<View style={styles.infoColumn}>
|
||
<Text style={styles.infoLabel}>Anställd</Text>
|
||
<Text style={styles.infoValue}>{data.employeeName}</Text>
|
||
<Text style={styles.infoLabel}>Personnummer</Text>
|
||
<Text style={styles.infoValue}>{data.personnummerMasked}</Text>
|
||
</View>
|
||
<View style={styles.infoColumn}>
|
||
<Text style={styles.infoLabel}>Period</Text>
|
||
<Text style={styles.infoValue}>{periodLabel}</Text>
|
||
<Text style={styles.infoLabel}>Utbetalningsdag</Text>
|
||
<Text style={styles.infoValue}>{data.paymentDate}</Text>
|
||
</View>
|
||
<View style={styles.infoColumn}>
|
||
<Text style={styles.infoLabel}>Skattetabell</Text>
|
||
<Text style={styles.infoValue}>{data.taxReference}</Text>
|
||
{data.bankAccount && (
|
||
<>
|
||
<Text style={styles.infoLabel}>Bankkonto</Text>
|
||
<Text style={styles.infoValue}>{data.bankAccount}</Text>
|
||
</>
|
||
)}
|
||
</View>
|
||
</View>
|
||
|
||
{/* Line items table */}
|
||
<View style={styles.section}>
|
||
<Text style={styles.sectionTitle}>Lönespecifikation</Text>
|
||
<View style={styles.headerRow}>
|
||
<Text style={[styles.headerText, styles.colDesc]}>Beskrivning</Text>
|
||
<Text style={[styles.headerText, styles.colQty]}>Antal</Text>
|
||
<Text style={[styles.headerText, styles.colRate]}>á-pris</Text>
|
||
<Text style={[styles.headerText, styles.colAmount]}>Belopp</Text>
|
||
</View>
|
||
{data.lineItems.map((item, i) => (
|
||
<View key={i} style={i % 2 === 1 ? styles.rowAlt : styles.row}>
|
||
<Text style={styles.colDesc}>{item.description}</Text>
|
||
<Text style={styles.colQty}>{item.quantity != null ? item.quantity : ''}</Text>
|
||
<Text style={styles.colRate}>{item.unitPrice != null ? fmt(item.unitPrice) : ''}</Text>
|
||
<Text style={styles.colAmount}>{fmt(item.amount)}</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
|
||
{/* Summary: Gross → Tax → Net */}
|
||
<View style={styles.section}>
|
||
<View style={styles.summaryRow}>
|
||
<Text style={styles.summaryLabel}>Bruttolön</Text>
|
||
<Text style={styles.summaryValue}>{fmt(data.grossSalary)}</Text>
|
||
</View>
|
||
<View style={styles.summaryRow}>
|
||
<Text style={styles.summaryLabel}>Preliminär skatt ({data.taxReference})</Text>
|
||
<Text style={styles.summaryValue}>−{fmt(data.taxWithheld)}</Text>
|
||
</View>
|
||
<View style={styles.totalRow}>
|
||
<Text style={styles.totalLabel}>Nettolön (utbetalas)</Text>
|
||
<Text style={styles.totalValue}>{fmt(data.netSalary)}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Employer cost (transparency feature: our differentiator) */}
|
||
<View style={styles.section}>
|
||
<Text style={styles.sectionTitle}>Arbetsgivarkostnad</Text>
|
||
<View style={styles.summaryRow}>
|
||
<Text style={styles.summaryLabel}>Arbetsgivaravgifter ({(data.avgifterRate * 100).toFixed(2)}%)</Text>
|
||
<Text style={styles.summaryValue}>{fmt(data.avgifterAmount)}</Text>
|
||
</View>
|
||
<View style={styles.summaryRow}>
|
||
<Text style={styles.summaryLabel}>Semesteravsättning</Text>
|
||
<Text style={styles.summaryValue}>{fmt(data.vacationAccrual)}</Text>
|
||
</View>
|
||
<View style={styles.summaryRow}>
|
||
<Text style={styles.summaryLabel}>Sociala avgifter på semester</Text>
|
||
<Text style={styles.summaryValue}>{fmt(data.vacationAccrualAvgifter)}</Text>
|
||
</View>
|
||
<View style={styles.totalRow}>
|
||
<Text style={styles.totalLabel}>Total arbetsgivarkostnad</Text>
|
||
<Text style={styles.totalValue}>{fmt(data.totalEmployerCost)}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* YTD */}
|
||
<View style={styles.ytdSection}>
|
||
<Text style={[styles.sectionTitle, { fontSize: 9 }]}>Ackumulerat {data.periodYear}</Text>
|
||
<View style={styles.ytdRow}>
|
||
<Text style={styles.ytdLabel}>Brutto</Text>
|
||
<Text style={styles.ytdValue}>{fmt(data.ytdGross)}</Text>
|
||
</View>
|
||
<View style={styles.ytdRow}>
|
||
<Text style={styles.ytdLabel}>Skatt</Text>
|
||
<Text style={styles.ytdValue}>{fmt(data.ytdTax)}</Text>
|
||
</View>
|
||
<View style={styles.ytdRow}>
|
||
<Text style={styles.ytdLabel}>Netto</Text>
|
||
<Text style={styles.ytdValue}>{fmt(data.ytdNet)}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Calculation breakdown (optional detail page) */}
|
||
{data.breakdownSteps && data.breakdownSteps.length > 0 && (
|
||
<View style={styles.breakdownSection}>
|
||
<Text style={styles.breakdownTitle}>Beräkningsunderlag</Text>
|
||
{data.breakdownSteps.map((step, i) => (
|
||
<View key={i} style={styles.breakdownRow}>
|
||
<Text style={styles.breakdownLabel}>{step.label}</Text>
|
||
<Text style={styles.breakdownFormula}>{step.formula}</Text>
|
||
<Text style={styles.breakdownValue}>{fmt(step.output)}</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
)}
|
||
|
||
{/* Footer */}
|
||
<Text style={styles.footer}>
|
||
{data.companyName} · Org.nr {data.companyOrgNumber} · Lönespecifikation {periodLabel} · Genererad av {getBranding().appName.toLowerCase()}
|
||
</Text>
|
||
</Page>
|
||
</Document>
|
||
)
|
||
}
|