Jakob WennbergandClaude Opus 4.6
497ef876bb
- Integrate Recapt session tracking with user identity in dashboard layout - Remove push-notifications extension from settings, panel registry, and toggle list - Fix journal entry preview overflow on narrow viewports - Update transaction manual booking button label - Clarify invoice email error message to reference env vars Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
743 lines
28 KiB
TypeScript
743 lines
28 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { useRouter, useSearchParams } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { createClient } from '@/lib/supabase/client'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|
import { useToast } from '@/components/ui/use-toast'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import {
|
|
Loader2,
|
|
CreditCard,
|
|
LogOut,
|
|
Sun,
|
|
Moon,
|
|
Monitor,
|
|
ExternalLink,
|
|
AlertTriangle,
|
|
} from 'lucide-react'
|
|
import { useTheme } from 'next-themes'
|
|
import type { CompanySettings } from '@/types'
|
|
import { CalendarFeedSettings } from '@/components/settings/CalendarFeedSettings'
|
|
import { getSettingsPanel } from '@/lib/extensions/settings-panel-registry'
|
|
|
|
const BankingPanel = getSettingsPanel('enable-banking')
|
|
|
|
export default function SettingsPage() {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const { toast } = useToast()
|
|
const supabase = createClient()
|
|
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
const [settings, setSettings] = useState<CompanySettings | null>(null)
|
|
const [hasBankingExtension, setHasBankingExtension] = useState(false)
|
|
const [hasCalendarExtension, setHasCalendarExtension] = useState(false)
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
|
|
const [deleteConfirmText, setDeleteConfirmText] = useState('')
|
|
const [isDeleting, setIsDeleting] = useState(false)
|
|
const { theme, setTheme } = useTheme()
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
const initialTab = searchParams.get('tab') || 'company'
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
|
|
// Handle callback messages
|
|
const bankConnected = searchParams.get('bank_connected')
|
|
const bankError = searchParams.get('bank_error')
|
|
|
|
if (bankConnected === 'true') {
|
|
toast({
|
|
title: 'Bank ansluten!',
|
|
description: 'Din bank är nu kopplad. Transaktioner hämtas...',
|
|
})
|
|
|
|
// Auto-sync transactions after connection
|
|
const connectionId = searchParams.get('connection_id')
|
|
if (connectionId) {
|
|
fetch('/api/extensions/ext/enable-banking/sync', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ connection_id: connectionId, days_back: 90 }),
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.imported > 0) {
|
|
toast({
|
|
title: 'Transaktioner hämtade',
|
|
description: `${data.imported} transaktioner importerade`,
|
|
})
|
|
}
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
router.replace('/settings?tab=banking')
|
|
}
|
|
|
|
if (bankError) {
|
|
toast({
|
|
title: 'Anslutning misslyckades',
|
|
description: decodeURIComponent(bankError),
|
|
variant: 'destructive',
|
|
})
|
|
router.replace('/settings')
|
|
}
|
|
}, [searchParams])
|
|
|
|
async function fetchData() {
|
|
setIsLoading(true)
|
|
|
|
const { data: { user } } = await supabase.auth.getUser()
|
|
if (!user) {
|
|
router.push('/login')
|
|
return
|
|
}
|
|
|
|
// Fetch settings
|
|
const { data: settingsData } = await supabase
|
|
.from('company_settings')
|
|
.select('*')
|
|
.eq('user_id', user.id)
|
|
.single()
|
|
|
|
setSettings(settingsData)
|
|
|
|
// Check extension toggles in parallel
|
|
const [bankingToggleRes, calendarToggleRes] = await Promise.all([
|
|
fetch('/api/extensions/toggles/general/enable-banking').catch(() => null),
|
|
fetch('/api/extensions/toggles/general/calendar').catch(() => null),
|
|
])
|
|
|
|
if (bankingToggleRes?.ok) {
|
|
const { data } = await bankingToggleRes.json()
|
|
setHasBankingExtension(data?.enabled || false)
|
|
} else {
|
|
// Fallback: check for existing bank connections
|
|
const { data: connections } = await supabase
|
|
.from('bank_connections')
|
|
.select('id')
|
|
.eq('user_id', user.id)
|
|
.eq('status', 'active')
|
|
.limit(1)
|
|
setHasBankingExtension((connections && connections.length > 0) || false)
|
|
}
|
|
|
|
if (calendarToggleRes?.ok) {
|
|
const { data } = await calendarToggleRes.json()
|
|
setHasCalendarExtension(data?.enabled || false)
|
|
}
|
|
|
|
setIsLoading(false)
|
|
}
|
|
|
|
async function handleSaveSettings(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
if (!settings) return
|
|
|
|
setIsSaving(true)
|
|
|
|
const formData = new FormData(e.currentTarget)
|
|
|
|
const updates: Record<string, unknown> = {
|
|
company_name: formData.get('company_name') as string,
|
|
org_number: formData.get('org_number') as string,
|
|
address_line1: formData.get('address_line1') as string,
|
|
postal_code: formData.get('postal_code') as string,
|
|
city: formData.get('city') as string,
|
|
bank_name: formData.get('bank_name') as string,
|
|
clearing_number: formData.get('clearing_number') as string,
|
|
account_number: formData.get('account_number') as string,
|
|
preliminary_tax_monthly: parseFloat(formData.get('preliminary_tax_monthly') as string) || null,
|
|
invoice_prefix: formData.get('invoice_prefix') as string || null,
|
|
next_invoice_number: parseInt(formData.get('next_invoice_number') as string) || 1,
|
|
invoice_default_days: parseInt(formData.get('invoice_default_days') as string) || 30,
|
|
accounting_method: formData.get('accounting_method') as string || 'accrual',
|
|
invoice_default_notes: (formData.get('invoice_default_notes') as string) || null,
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/settings', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(updates),
|
|
})
|
|
|
|
const result = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(result.error || 'Kunde inte spara inställningar')
|
|
}
|
|
|
|
toast({
|
|
title: 'Sparat',
|
|
description: 'Dina inställningar har uppdaterats',
|
|
})
|
|
setSettings({ ...settings, ...updates } as typeof settings)
|
|
} catch (error) {
|
|
toast({
|
|
title: 'Fel',
|
|
description: error instanceof Error ? error.message : 'Kunde inte spara inställningar',
|
|
variant: 'destructive',
|
|
})
|
|
}
|
|
|
|
setIsSaving(false)
|
|
}
|
|
|
|
async function handleLogout() {
|
|
await supabase.auth.signOut()
|
|
router.push('/login')
|
|
}
|
|
|
|
async function handleDeleteAccount() {
|
|
if (deleteConfirmText !== 'RADERA') return
|
|
setIsDeleting(true)
|
|
|
|
try {
|
|
const response = await fetch('/api/account/delete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ confirm: 'RADERA' }),
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const result = await response.json()
|
|
throw new Error(result.error || 'Kunde inte radera kontot')
|
|
}
|
|
|
|
router.push('/login')
|
|
} catch (error) {
|
|
toast({
|
|
title: 'Fel',
|
|
description: error instanceof Error ? error.message : 'Kunde inte radera kontot',
|
|
variant: 'destructive',
|
|
})
|
|
setIsDeleting(false)
|
|
}
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Inställningar</h1>
|
|
<p className="text-muted-foreground">
|
|
Hantera dina företags- och kontoinställningar
|
|
</p>
|
|
</div>
|
|
|
|
<Tabs defaultValue={initialTab} className="space-y-6">
|
|
<TabsList className="flex-wrap h-auto gap-1">
|
|
<TabsTrigger value="company">
|
|
Företag
|
|
</TabsTrigger>
|
|
<TabsTrigger value="banking">
|
|
Bank (PSD2)
|
|
</TabsTrigger>
|
|
{hasCalendarExtension && (
|
|
<TabsTrigger value="calendar">
|
|
Kalender
|
|
</TabsTrigger>
|
|
)}
|
|
<TabsTrigger value="appearance">
|
|
Utseende
|
|
</TabsTrigger>
|
|
<TabsTrigger value="account">
|
|
Konto
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Company settings */}
|
|
<TabsContent value="company">
|
|
<form onSubmit={handleSaveSettings} className="space-y-6">
|
|
{/* Företagsuppgifter */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Företagsuppgifter</CardTitle>
|
|
<CardDescription>
|
|
Namn, organisationsnummer och adress
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="company_name">Företagsnamn</Label>
|
|
<Input
|
|
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="org_number">Organisationsnummer</Label>
|
|
<Input
|
|
id="org_number"
|
|
name="org_number"
|
|
defaultValue={settings?.org_number || ''}
|
|
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>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="address_line1">Adress</Label>
|
|
<Input
|
|
id="address_line1"
|
|
name="address_line1"
|
|
defaultValue={settings?.address_line1 || ''}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="postal_code">Postnummer</Label>
|
|
<Input
|
|
id="postal_code"
|
|
name="postal_code"
|
|
defaultValue={settings?.postal_code || ''}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="city">Ort</Label>
|
|
<Input
|
|
id="city"
|
|
name="city"
|
|
defaultValue={settings?.city || ''}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Bankuppgifter */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Bankuppgifter</CardTitle>
|
|
<CardDescription>
|
|
Betalningsuppgifter som visas på dina fakturor
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="bank_name">Bank</Label>
|
|
<Input
|
|
id="bank_name"
|
|
name="bank_name"
|
|
defaultValue={settings?.bank_name || ''}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="clearing_number">Clearing</Label>
|
|
<Input
|
|
id="clearing_number"
|
|
name="clearing_number"
|
|
defaultValue={settings?.clearing_number || ''}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="account_number">Kontonummer</Label>
|
|
<Input
|
|
id="account_number"
|
|
name="account_number"
|
|
defaultValue={settings?.account_number || ''}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Fakturainställningar */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Fakturainställningar</CardTitle>
|
|
<CardDescription>
|
|
Numrering, betalningsvillkor och bokföringsmetod
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="invoice_prefix">Fakturaprefix</Label>
|
|
<Input
|
|
id="invoice_prefix"
|
|
name="invoice_prefix"
|
|
placeholder="t.ex. F-"
|
|
defaultValue={settings?.invoice_prefix || ''}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="next_invoice_number">Nästa fakturanummer</Label>
|
|
<Input
|
|
id="next_invoice_number"
|
|
name="next_invoice_number"
|
|
type="number"
|
|
min="1"
|
|
defaultValue={settings?.next_invoice_number || 1}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="invoice_default_days">Betalningsvillkor (dagar)</Label>
|
|
<Input
|
|
id="invoice_default_days"
|
|
name="invoice_default_days"
|
|
type="number"
|
|
min="0"
|
|
defaultValue={settings?.invoice_default_days || 30}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="accounting_method">Bokföringsmetod</Label>
|
|
<select
|
|
id="accounting_method"
|
|
name="accounting_method"
|
|
defaultValue={settings?.accounting_method || 'accrual'}
|
|
className="flex h-10 w-full max-w-xs rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
>
|
|
<option value="accrual">Faktureringsmetoden</option>
|
|
<option value="cash">Kontantmetoden</option>
|
|
</select>
|
|
<p className="text-xs text-muted-foreground">
|
|
{settings?.entity_type === 'aktiebolag'
|
|
? 'Aktiebolag med omsättning över 3 MSEK måste använda faktureringsmetoden enligt BFL. Mindre aktiebolag kan välja kontantmetoden.'
|
|
: 'Kontantmetoden är tillgänglig för enskild firma med omsättning under 3 MSEK.'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="invoice_default_notes">Standardtext på fakturor</Label>
|
|
<Textarea
|
|
id="invoice_default_notes"
|
|
name="invoice_default_notes"
|
|
rows={3}
|
|
placeholder="T.ex. betalningsvillkor, leveransinfo..."
|
|
defaultValue={settings?.invoice_default_notes || ''}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Texten föreslås automatiskt i anteckningsfältet vid ny faktura.
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Skatteinställningar */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Skatteinställningar</CardTitle>
|
|
<CardDescription>
|
|
Preliminärskatt och F-skatt
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="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 || ''}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="flex justify-end">
|
|
<Button type="submit" disabled={isSaving}>
|
|
{isSaving ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Sparar...
|
|
</>
|
|
) : (
|
|
'Spara ändringar'
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</TabsContent>
|
|
|
|
{/* Banking settings — loaded dynamically from extension */}
|
|
<TabsContent value="banking" className="space-y-6">
|
|
{hasBankingExtension && BankingPanel ? (
|
|
<BankingPanel />
|
|
) : (
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
|
<CreditCard className="h-10 w-10 text-muted-foreground/40 mb-4" />
|
|
<p className="font-medium mb-1">Bankintegration (PSD2) är inte aktiverad</p>
|
|
<p className="text-sm text-muted-foreground mb-4 max-w-md">
|
|
Aktivera tillägget Enable Banking för att koppla ditt bankkonto och automatiskt hämta transaktioner.
|
|
</p>
|
|
<Button variant="outline" asChild>
|
|
<Link href="/extensions">
|
|
<ExternalLink className="mr-2 h-4 w-4" />
|
|
Gå till Tillägg
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* Calendar feed settings */}
|
|
{hasCalendarExtension && (
|
|
<TabsContent value="calendar">
|
|
<CalendarFeedSettings />
|
|
</TabsContent>
|
|
)}
|
|
|
|
{/* Appearance settings */}
|
|
<TabsContent value="appearance">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Utseende</CardTitle>
|
|
<CardDescription>
|
|
Välj hur applikationen ska se ut
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{mounted && (
|
|
<div className="grid grid-cols-3 gap-4">
|
|
{/* Light */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setTheme('light')}
|
|
className={`group relative rounded-lg border-2 p-4 text-left transition-colors ${
|
|
theme === 'light'
|
|
? 'border-primary bg-primary/5'
|
|
: 'border-border hover:border-primary/40'
|
|
}`}
|
|
>
|
|
<div className="mb-3 flex h-20 items-end gap-1.5 rounded-md border bg-white p-2">
|
|
<div className="h-full w-3 rounded-sm bg-[hsl(222,47%,35%)]" />
|
|
<div className="flex flex-1 flex-col gap-1">
|
|
<div className="h-2 w-3/4 rounded-sm bg-[hsl(220,14%,96%)]" />
|
|
<div className="h-2 w-1/2 rounded-sm bg-[hsl(220,14%,96%)]" />
|
|
<div className="h-2 w-2/3 rounded-sm bg-[hsl(220,14%,96%)]" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Sun className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-medium">Ljust</span>
|
|
</div>
|
|
</button>
|
|
|
|
{/* Dark */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setTheme('dark')}
|
|
className={`group relative rounded-lg border-2 p-4 text-left transition-colors ${
|
|
theme === 'dark'
|
|
? 'border-primary bg-primary/5'
|
|
: 'border-border hover:border-primary/40'
|
|
}`}
|
|
>
|
|
<div className="mb-3 flex h-20 items-end gap-1.5 rounded-md border bg-[hsl(222,16%,10%)] p-2">
|
|
<div className="h-full w-3 rounded-sm bg-[hsl(222,50%,55%)]" />
|
|
<div className="flex flex-1 flex-col gap-1">
|
|
<div className="h-2 w-3/4 rounded-sm bg-[hsl(220,12%,20%)]" />
|
|
<div className="h-2 w-1/2 rounded-sm bg-[hsl(220,12%,20%)]" />
|
|
<div className="h-2 w-2/3 rounded-sm bg-[hsl(220,12%,20%)]" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Moon className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-medium">Mörkt</span>
|
|
</div>
|
|
</button>
|
|
|
|
{/* System */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setTheme('system')}
|
|
className={`group relative rounded-lg border-2 p-4 text-left transition-colors ${
|
|
theme === 'system'
|
|
? 'border-primary bg-primary/5'
|
|
: 'border-border hover:border-primary/40'
|
|
}`}
|
|
>
|
|
<div className="mb-3 flex h-20 overflow-hidden rounded-md border">
|
|
<div className="flex flex-1 items-end gap-1 bg-white p-2">
|
|
<div className="h-full w-2 rounded-sm bg-[hsl(222,47%,35%)]" />
|
|
<div className="flex flex-1 flex-col gap-1">
|
|
<div className="h-2 w-3/4 rounded-sm bg-[hsl(220,14%,96%)]" />
|
|
<div className="h-2 w-1/2 rounded-sm bg-[hsl(220,14%,96%)]" />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-1 items-end gap-1 bg-[hsl(222,16%,10%)] p-2">
|
|
<div className="h-full w-2 rounded-sm bg-[hsl(222,50%,55%)]" />
|
|
<div className="flex flex-1 flex-col gap-1">
|
|
<div className="h-2 w-3/4 rounded-sm bg-[hsl(220,12%,20%)]" />
|
|
<div className="h-2 w-1/2 rounded-sm bg-[hsl(220,12%,20%)]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Monitor className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-medium">System</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Account settings */}
|
|
<TabsContent value="account" className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Kontoinställningar</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between p-4 border rounded-lg">
|
|
<div>
|
|
<p className="font-medium">Logga ut</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Logga ut från ditt konto
|
|
</p>
|
|
</div>
|
|
<Button variant="outline" onClick={handleLogout}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
Logga ut
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-destructive/50">
|
|
<CardHeader>
|
|
<CardTitle className="text-destructive">Radera konto</CardTitle>
|
|
<CardDescription>
|
|
Permanent borttagning av ditt konto och all data
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4">
|
|
<div className="flex gap-3">
|
|
<AlertTriangle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
|
|
<div className="space-y-2 text-sm">
|
|
<p className="font-medium text-destructive">Varning: Denna åtgärd kan inte ångras</p>
|
|
<p className="text-muted-foreground">
|
|
All din data raderas permanent — bokföring, fakturor, verifikationer, dokument och inställningar.
|
|
</p>
|
|
<p className="text-muted-foreground">
|
|
Enligt bokföringslagen (BFL 7 kap. 2§) ska räkenskapsinformation bevaras i 7 år. Du ansvarar själv för att exportera och arkivera din bokföringsdata innan du raderar kontot.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Button variant="outline" asChild>
|
|
<Link href="/reports?type=sie">
|
|
<ExternalLink className="mr-2 h-4 w-4" />
|
|
Exportera bokföringsdata (SIE)
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => setShowDeleteDialog(true)}
|
|
>
|
|
Radera mitt konto
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
{/* Delete account confirmation dialog */}
|
|
<Dialog open={showDeleteDialog} onOpenChange={(open) => {
|
|
setShowDeleteDialog(open)
|
|
if (!open) setDeleteConfirmText('')
|
|
}}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Radera konto permanent</DialogTitle>
|
|
<DialogDescription>
|
|
All din data raderas permanent. Skriv <strong>RADERA</strong> nedan för att bekräfta.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="delete-confirm">Bekräfta genom att skriva RADERA</Label>
|
|
<Input
|
|
id="delete-confirm"
|
|
value={deleteConfirmText}
|
|
onChange={(e) => setDeleteConfirmText(e.target.value)}
|
|
placeholder="RADERA"
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setShowDeleteDialog(false)
|
|
setDeleteConfirmText('')
|
|
}}
|
|
disabled={isDeleting}
|
|
>
|
|
Avbryt
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDeleteAccount}
|
|
disabled={deleteConfirmText !== 'RADERA' || isDeleting}
|
|
>
|
|
{isDeleting ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Raderar...
|
|
</>
|
|
) : (
|
|
'Radera permanent'
|
|
)}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|