feat: expand tax settings form, refactor settings save flow, and update docs (#159)

Expand the tax settings page with F-skatt, VAT registration, fiscal year start month, and salary payment toggles. Refactor SettingsFormWrapper to support onSuccess callbacks so local state only updates after server confirmation. Fix logo upload to use service client for storage RLS bypass. Allow empty email in settings schema. Update CLAUDE.md with comprehensive multi-tenant, auth, and engine documentation. Remove unused langchain skills.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
2026-04-01 21:14:05 +02:00
committed by GitHub
co-authored by Claude Opus 4.6
parent d0b3f21bde
commit 197beb1c58
13 changed files with 519 additions and 2213 deletions
+12 -2
View File
@@ -5,9 +5,13 @@ import { Button } from '@/components/ui/button'
import { Loader2, Check } from 'lucide-react'
import { useToast } from '@/components/ui/use-toast'
type SaveResult =
| Record<string, unknown>
| { updates: Record<string, unknown>; onSuccess?: (data: Record<string, unknown>) => void }
interface SettingsFormWrapperProps {
children: React.ReactNode
onSave?: (formData: FormData) => Record<string, unknown>
onSave?: (formData: FormData) => SaveResult
className?: string
}
@@ -28,7 +32,12 @@ export function SettingsFormWrapper({ children, onSave, className }: SettingsFor
if (!onSave) return
const formData = new FormData(e.currentTarget)
const updates = onSave(formData)
const saveResult = onSave(formData)
// Support both plain object and { updates, onSuccess } return types
const isStructured = saveResult && 'updates' in saveResult && typeof saveResult.updates === 'object'
const updates = isStructured ? saveResult.updates : saveResult
const onSuccess = isStructured ? (saveResult as { onSuccess?: (data: Record<string, unknown>) => void }).onSuccess : undefined
if (!updates || Object.keys(updates).length === 0) return
@@ -48,6 +57,7 @@ export function SettingsFormWrapper({ children, onSave, className }: SettingsFor
throw new Error(result.error || 'Kunde inte spara inställningar')
}
onSuccess?.(result.data ?? updates)
setSaved(true)
timerRef.current = setTimeout(() => setSaved(false), 2000)
} catch (error) {
+181 -20
View File
@@ -1,7 +1,11 @@
'use client'
import { useState } from 'react'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Checkbox } from '@/components/ui/checkbox'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Badge } from '@/components/ui/badge'
import type { CompanySettings } from '@/types'
interface TaxSettingsFormProps {
@@ -9,26 +13,183 @@ interface TaxSettingsFormProps {
}
export function TaxSettingsForm({ settings }: TaxSettingsFormProps) {
return (
<section className="space-y-4">
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
Preliminärskatt
</h2>
const [vatRegistered, setVatRegistered] = useState(settings.vat_registered ?? false)
const [fSkatt, setFSkatt] = useState(settings.f_skatt ?? true)
const [paysSalaries, setPaysSalaries] = useState(settings.pays_salaries ?? false)
<div className="max-w-xs space-y-2">
<Label htmlFor="preliminary_tax_monthly">
Månatlig preliminärskatt (F-skatt)
</Label>
<Input
id="preliminary_tax_monthly"
name="preliminary_tax_monthly"
type="number"
defaultValue={settings.preliminary_tax_monthly || ''}
/>
<p className="text-xs text-muted-foreground">
Belopp i SEK som betalas varje månad.
</p>
</div>
</section>
const isEnskildFirma = settings.entity_type === 'enskild_firma'
return (
<div className="space-y-8">
{/* Entity type — read-only */}
<section className="space-y-4">
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
Företagsform
</h2>
<div className="flex items-center gap-3">
<Badge variant="secondary" className="text-sm">
{settings.entity_type === 'aktiebolag' ? 'Aktiebolag' : 'Enskild firma'}
</Badge>
<p className="text-xs text-muted-foreground">
Företagsform kan inte ändras. Kontakta support vid behov.
</p>
</div>
</section>
{/* F-skatt */}
<section className="border-t border-border/8 pt-8 space-y-4">
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
Skatt & moms
</h2>
<div className="space-y-4">
<div className="flex items-start space-x-3">
<Checkbox
id="f_skatt"
checked={fSkatt}
onCheckedChange={(v) => setFSkatt(v === true)}
/>
<input type="hidden" name="f_skatt" value={fSkatt ? 'true' : 'false'} />
<div className="space-y-1">
<Label htmlFor="f_skatt" className="cursor-pointer">F-skattsedel</Label>
<p className="text-xs text-muted-foreground">
Godkänd för F-skatt (självständig näringsverksamhet).
</p>
</div>
</div>
<div className="flex items-start space-x-3">
<Checkbox
id="vat_registered"
checked={vatRegistered}
onCheckedChange={(v) => setVatRegistered(v === true)}
/>
<input type="hidden" name="vat_registered" value={vatRegistered ? 'true' : 'false'} />
<div className="space-y-1">
<Label htmlFor="vat_registered" className="cursor-pointer">Momsregistrerad</Label>
<p className="text-xs text-muted-foreground">
Obligatoriskt om omsättningen överstiger 120 000 kr per år.
</p>
</div>
</div>
{vatRegistered && (
<div className="space-y-4 pl-7">
<div className="max-w-xs space-y-2">
<Label htmlFor="vat_number">Momsregistreringsnummer</Label>
<Input
id="vat_number"
name="vat_number"
placeholder="SE123456789001"
defaultValue={settings.vat_number || ''}
/>
<p className="text-xs text-muted-foreground">
Format: SE + organisationsnummer + 01
</p>
</div>
<div className="max-w-xs space-y-2">
<Label>Momsredovisningsperiod</Label>
<Select
name="moms_period"
defaultValue={settings.moms_period || undefined}
>
<SelectTrigger>
<SelectValue placeholder="Välj period" />
</SelectTrigger>
<SelectContent>
<SelectItem value="monthly">Månad</SelectItem>
<SelectItem value="quarterly">Kvartal</SelectItem>
<SelectItem value="yearly">År</SelectItem>
</SelectContent>
</Select>
<p className="text-xs text-muted-foreground">
Enligt beslut från Skatteverket.
</p>
</div>
</div>
)}
</div>
</section>
{/* Fiscal year & salaries */}
<section className="border-t border-border/8 pt-8 space-y-4">
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
Räkenskapsår & löner
</h2>
<div className="max-w-xs space-y-2">
<Label>Räkenskapsårets startmånad</Label>
{isEnskildFirma ? (
<>
<Input value="Januari" disabled />
<input type="hidden" name="fiscal_year_start_month" value="1" />
<p className="text-xs text-muted-foreground">
Enskild firma måste använda kalenderår (BFL 3 kap.).
</p>
</>
) : (
<>
<Select
name="fiscal_year_start_month"
defaultValue={String(settings.fiscal_year_start_month || 1)}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{[
'Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni',
'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December',
].map((month, i) => (
<SelectItem key={i + 1} value={String(i + 1)}>{month}</SelectItem>
))}
</SelectContent>
</Select>
<p className="text-xs text-muted-foreground">
Ändring påverkar framtida räkenskapsår.
</p>
</>
)}
</div>
<div className="flex items-start space-x-3">
<Checkbox
id="pays_salaries"
checked={paysSalaries}
onCheckedChange={(v) => setPaysSalaries(v === true)}
/>
<input type="hidden" name="pays_salaries" value={paysSalaries ? 'true' : 'false'} />
<div className="space-y-1">
<Label htmlFor="pays_salaries" className="cursor-pointer">Betalar löner</Label>
<p className="text-xs text-muted-foreground">
Påverkar vilka skattedeadlines som visas (arbetsgivardeklaration m.m.).
</p>
</div>
</div>
</section>
{/* Preliminary tax */}
<section className="border-t border-border/8 pt-8 space-y-4">
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
Preliminärskatt
</h2>
<div className="max-w-xs space-y-2">
<Label htmlFor="preliminary_tax_monthly">
Månatlig preliminärskatt (F-skatt)
</Label>
<Input
id="preliminary_tax_monthly"
name="preliminary_tax_monthly"
type="number"
defaultValue={settings.preliminary_tax_monthly || ''}
/>
<p className="text-xs text-muted-foreground">
Belopp i SEK som betalas varje månad.
</p>
</div>
</section>
</div>
)
}