Files
accounted/components/settings/CalendarFeedSettings.tsx
T
Jakob WennbergandClaude Opus 4.7 d0fbc2b616 refactor(ui): app-wide UI/UX consistency pass (#436)
* refactor(ui): app-wide UI/UX consistency pass

Net: +1,159 / −1,373 LOC across 77 files. No new features, no behavior
changes. Locks in a uniform design system across every dashboard surface.

What changed:

- **Foundation**: sidebar width 232→256px (md:w-64), spacing scale locked
  (Tailwind 1/2/3/4/6/8/10/12; 2.5/5 forbidden), card padding p-6 default
  (p-4 for compact metric cards), space-y-8 between page sections.

- **Tables unified**: all 33 thead blocks now share the Resultatrapport
  pattern via shadcn Table primitive (text-[11px] font-medium uppercase
  tracking-wider text-muted-foreground). Hand-rolled <table> instances
  converted where they were data tables; form/edit grids kept distinct.

- **Status badges unified**: every status indicator routes through
  shadcn <Badge variant>. Eliminated raw Tailwind colors
  (bg-amber-100, bg-emerald-500/10, bg-blue-100, bg-purple-100, etc.)
  in favor of the gnubok semantic palette (success=sage, warning=ochre,
  destructive=terracotta).

- **Empty states unified**: list pages migrated from hand-rolled
  "flex flex-col items-center py-12" divs to the EmptyState primitive.

- **Loading skeletons unified**: hand-rolled bg-muted rounded animate-pulse
  divs replaced with shadcn <Skeleton> across 15 files.

- **Touch targets**: 6 back-buttons + edit-pencil + inbox delete bumped
  from 24/32/36px to shadcn's 40px icon default. Added aria-labels on
  9 icon-only navigation buttons.

- **Date formatting**: formatDate() for accounting data (ISO yyyy-MM-dd,
  table-friendly) vs formatDateLong() for metadata (Swedish long form).
  Raw {x.invoice_date} renderings routed through formatDate() in 18 sites.

- **Toast titles**: eliminated 33 generic "Fel" titles. Each toast title
  now carries the action ("Kunde inte skapa lönekörning" etc.) with
  description carrying the error detail.

- **Page-level cleanups**:
  - Dashboard: dropped greeting hero + Snabbåtgärder/Att hantera nav
    duplicates + Visa detaljer collapsible.
  - Reports: 5-col mega-menu replaced with left-rail layout
    (new ReportsNav component).
  - Bookkeeping: fixed layout jump between Verifikationer/Ny verifikation
    tabs (moved FiscalYearSelector inside journal tab).
  - Bookkeeping: added voucher sort (A1 first / latest first) alongside
    existing date sort. Required matching API param sort_by.
  - KPI page: FiscalYearSelector instead of raw <select>; InfoTooltip
    instead of inline info-button toggle; bigger numbers.
  - Salary section: enum values translated to Swedish labels, mobile
    table collapses to Anställd+Netto on <md, KPI typography aligned
    with dashboard.
  - Invoice forms: styled RequiredMark + aria-required, tabular-nums
    on amount inputs.

- **CLAUDE.md**: new "Design System Tokens" subsection documents the
  locked spacing scale, primitives table, typography rules, date helpers,
  and forbidden patterns so future contributors don't drift.

Tests: 2,906 passing (unchanged). Lint: unchanged from main baseline.

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

* fix: address PR review feedback (Greptile + compliance bot)

- **formatDate / formatDateLong timezone fix**: switch from new Date() to
  parseISO. Bare yyyy-MM-dd strings are now parsed as local midnight rather
  than UTC midnight, eliminating the off-by-one display in west-of-UTC
  timezones flagged by Greptile.

- **DashboardContentProps cleanup**: removed unused firstName and settings
  fields from the interface, and the corresponding fetch (profiles table)
  + computation in app/(dashboard)/page.tsx. The greeting was dropped in
  the dashboard cleanup; these props were dead weight.

- **Voucher sort behavior documented**: extended the comment in the journal
  entries API route to explain why voucher sort intentionally uses strict
  fiscal_period_id filtering (BFL 5 kap 6–7 §§ — voucher numbers are
  series-scoped within a fiscal year). The row-count delta between date
  sort and voucher sort is now a documented design choice.

- **delete_last_voucher migration + draft-delete test included**: the UI
  already shipped the "Radera utkast" path in the previous commit; this
  pulls in the backing RPC migration that allows draft deletes (with the
  full safety logic — drafts skip series/period checks since they have
  voucher_number=0, posted entries go through the existing unchanged
  path). This was originally meant for a separate PR but the UI shipped
  half the feature without it.

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

* chore(migration): rename to match applied version

The function delete_last_voucher is already applied to the production DB
under version 20260509103736 (verified via pg_get_functiondef — exact
byte-for-byte match to file content). The previous file timestamp
20260509120000 would cause a fresh `supabase db push` to attempt re-applying
under a different version row. Renaming the file aligns local tracking
with what the database actually has.

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

* fix: address compliance bot findings (payroll label + VAT visibility)

- sick_karens label: drop "(första sjukdagen)" qualifier. Per sjuklönelagen
  6 §, karensavdrag is a single calculated amount (20% of one week's
  sjuklön) deducted from the first sick day's pay — not bounded to the
  first day. The qualifier could mislead users when the first sick day
  and return-to-work span a weekend. Swedish-payroll bot recommendation.

- Omvänd skattskyldighet badge: variant outline → warning. The reverse-
  charge indicator is compliance-critical (ML 16 kap) — missing it leads
  to incorrect input VAT deduction. Outline was too subtle; warning's
  ochre fill matches its semantic weight.

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

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 16:34:07 +02:00

344 lines
10 KiB
TypeScript

'use client'
import { useState, useEffect } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { useToast } from '@/components/ui/use-toast'
import { Badge } from '@/components/ui/badge'
import { Calendar, Copy, RefreshCw, Loader2, ExternalLink, Check } from 'lucide-react'
import { DestructiveConfirmDialog, useDestructiveConfirm } from '@/components/ui/destructive-confirm-dialog'
import type { CalendarFeed } from '@/types'
interface CalendarFeedWithUrls extends CalendarFeed {
webcalUrl: string
httpsUrl: string
}
export function CalendarFeedSettings() {
const { toast } = useToast()
const [isLoading, setIsLoading] = useState(true)
const [isSaving, setIsSaving] = useState(false)
const [isRegenerating, setIsRegenerating] = useState(false)
const [feed, setFeed] = useState<CalendarFeedWithUrls | null>(null)
const [copied, setCopied] = useState(false)
const { dialogProps: confirmDialogProps, confirm: confirmAction } = useDestructiveConfirm()
useEffect(() => {
fetchFeed()
}, [])
const fetchFeed = async () => {
setIsLoading(true)
const response = await fetch('/api/calendar/feed')
const { data } = await response.json()
setFeed(data)
setIsLoading(false)
}
const createFeed = async () => {
setIsSaving(true)
try {
const response = await fetch('/api/calendar/feed', {
method: 'POST',
})
if (!response.ok) {
throw new Error('Failed to create feed')
}
const { data } = await response.json()
setFeed(data)
toast({
title: 'Kalenderfeed skapad',
description: 'Du kan nu koppla kalendern till Apple Calendar eller Google Calendar.',
})
} catch (error) {
toast({
title: 'Kunde inte skapa kalenderfeed.',
variant: 'destructive',
})
} finally {
setIsSaving(false)
}
}
const updateFeed = async (key: keyof CalendarFeed, value: boolean) => {
if (!feed) return
setIsSaving(true)
try {
const response = await fetch('/api/calendar/feed', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ [key]: value }),
})
if (!response.ok) {
throw new Error('Failed to update feed')
}
const { data } = await response.json()
setFeed(data)
} catch (error) {
toast({
title: 'Kunde inte uppdatera inställning.',
variant: 'destructive',
})
} finally {
setIsSaving(false)
}
}
const regenerateToken = async () => {
const ok = await confirmAction({
title: 'Skapa ny kalender-länk',
description: 'Den gamla länken slutar fungera omedelbart. Du behöver uppdatera länken i alla kalenderappar som använder den.',
confirmLabel: 'Skapa ny länk',
variant: 'warning',
})
if (!ok) return
setIsRegenerating(true)
try {
const response = await fetch('/api/calendar/feed', {
method: 'DELETE',
})
if (!response.ok) {
throw new Error('Failed to regenerate token')
}
const { data } = await response.json()
setFeed(data)
toast({
title: 'Ny länk skapad',
description: 'Den gamla länken fungerar inte längre.',
})
} catch (error) {
toast({
title: 'Kunde inte skapa ny länk.',
variant: 'destructive',
})
} finally {
setIsRegenerating(false)
}
}
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
toast({
title: 'Kopierad',
description: 'Länken har kopierats till urklipp.',
})
} catch (error) {
toast({
title: 'Kunde inte kopiera länken.',
variant: 'destructive',
})
}
}
const openWebcal = () => {
if (feed?.webcalUrl) {
window.location.href = feed.webcalUrl
}
}
if (isLoading) {
return (
<div className="flex items-center justify-center h-32">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
</div>
)
}
if (!feed) {
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Calendar className="h-5 w-5" />
Kalendersynkronisering
</CardTitle>
<CardDescription>
Synka dina deadlines med Apple Calendar, Google Calendar eller Outlook
</CardDescription>
</CardHeader>
<CardContent>
<div className="text-center space-y-4 py-4">
<p className="text-muted-foreground">
Skapa en kalenderfeed för att se dina deadlines i din vanliga kalenderapp.
</p>
<Button onClick={createFeed} disabled={isSaving}>
{isSaving ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Skapar...
</>
) : (
<>
<Calendar className="mr-2 h-4 w-4" />
Aktivera kalendersynk
</>
)}
</Button>
</div>
</CardContent>
</Card>
)
}
return (
<div className="space-y-6">
{/* Feed URL */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Calendar className="h-5 w-5" />
Kalendersynkronisering
</CardTitle>
<CardDescription>
Prenumerera på din kalender i Apple Calendar, Google Calendar eller Outlook
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{/* Quick add for Apple Calendar */}
<div className="flex gap-2">
<Button onClick={openWebcal} className="flex-1">
<Calendar className="mr-2 h-4 w-4" />
Lägg till i Apple Calendar
</Button>
<Button variant="outline" onClick={() => copyToClipboard(feed.httpsUrl)}>
{copied ? (
<Check className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)}
</Button>
</div>
{/* URL display */}
<div className="space-y-2">
<Label>Kalenderlänk (för Google Calendar m.fl.)</Label>
<div className="flex gap-2">
<Input
value={feed.httpsUrl}
readOnly
className="font-mono text-xs"
/>
</div>
<p className="text-xs text-muted-foreground">
Kopiera denna länk och lägg till som URL-prenumeration i din kalenderapp.
</p>
</div>
{/* Stats */}
{feed.last_accessed_at && (
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>Senast hämtad:</span>
<span>
{new Date(feed.last_accessed_at).toLocaleDateString('sv-SE', {
day: 'numeric',
month: 'short',
hour: '2-digit',
minute: '2-digit',
})}
</span>
<Badge variant="secondary" className="text-xs">
{feed.access_count} gånger
</Badge>
</div>
)}
{/* Regenerate link */}
<div className="pt-2 border-t">
<Button
variant="outline"
size="sm"
onClick={regenerateToken}
disabled={isRegenerating}
>
{isRegenerating ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Skapar ny länk...
</>
) : (
<>
<RefreshCw className="mr-2 h-4 w-4" />
Skapa ny länk
</>
)}
</Button>
<p className="text-xs text-muted-foreground mt-1">
Ogiltigförklarar den gamla länken. Använd om någon obehörig fått tag i länken.
</p>
</div>
</CardContent>
</Card>
{/* Content settings */}
<Card>
<CardHeader>
<CardTitle>Innehåll i kalendern</CardTitle>
<CardDescription>
Välj vilka händelser som ska visas i din kalender
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="include-tax">Skattedeadlines</Label>
<p className="text-sm text-muted-foreground">
Moms, F-skatt, deklarationer
</p>
</div>
<Switch
id="include-tax"
checked={feed.include_tax_deadlines}
onCheckedChange={(checked) =>
updateFeed('include_tax_deadlines', checked)
}
disabled={isSaving}
/>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="include-invoices">Fakturor</Label>
<p className="text-sm text-muted-foreground">
Förfallodatum för fakturor
</p>
</div>
<Switch
id="include-invoices"
checked={feed.include_invoices}
onCheckedChange={(checked) =>
updateFeed('include_invoices', checked)
}
disabled={isSaving}
/>
</div>
</CardContent>
</Card>
<DestructiveConfirmDialog {...confirmDialogProps} />
</div>
)
}