feat: reverse charge VAT (ruta 20-32) + mobile UX improvements (#50)

* fix: include reversed entries in all reports (general ledger, trial balance, VAT, SIE, NE, INK2)

Reversed entries (storno) must appear alongside their original posted entries
in reports for a complete audit trail. Previously, filtering by status='posted'
excluded them, causing discrepancies when corrections had been made.

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

* feat: semi-manual invoice payment booking with editable journal lines

When marking an invoice as paid, users now see a dialog where they can:
- Choose which bank/cash account the payment goes to (1910, 1920, 1930, etc.)
- Review and edit the proposed journal entry lines before committing
- The happy path remains fast — lines are pre-filled correctly

Implementation:
- Pure proposePaymentLines() function for line computation (accrual + cash)
- PaymentBookingDialog with AccountCombobox, balance validation, date picker
- API accepts optional custom lines, falls back to auto-generation without them
- 18 tests (8 unit + 10 API) all passing

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

* fix: address Greptile review — validation fallback, balance check, error handling

- P1: Return 400 on invalid body instead of silently falling back to
  auto-generated lines (split JSON parse from schema validation)
- P1: Add server-side balance check for custom lines before committing
  (debit must equal credit, totalDebit > 0)
- P2: Wrap PaymentBookingDialog init() in try/catch with toast on
  failure and auto-close instead of silent empty state
- Add 2 new tests: unbalanced lines → 400, invalid schema → 400

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

* fix: OAuth callback redirect for local dev and timeout resilience

- Pass redirectUri dynamically from NEXT_PUBLIC_APP_URL so OAuth
  callbacks work on localhost (not just production)
- Encode consentId/provider in OAuth state (base64url JSON) so the
  callback doesn't depend on session storage
- Add skipAuth flag to extension API routes for OAuth callbacks
  (external provider redirects have no user session cookie)
- Wrap AbortError in descriptive timeout messages in arcim-client
- Make preview endpoint resilient to partial failures (company info
  and SIE fetch are individually non-blocking)
- Simplify login page (remove unused magic link auth mode)

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

* fix: create journal entry before marking invoice as paid

Move journal entry creation before the invoice status update so that
if accounting fails, the invoice is not permanently marked paid without
a corresponding entry. Previously the error was silently swallowed.

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

* fix: update mark-paid tests for journal-first ordering

Reorder mock queue to match new flow (settings before update), update
failure test to expect 500 instead of silent success, add try-catch
with proper error response in route handler.

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

* feat: add reverse charge VAT (ruta 20-32) and improve mobile UX across dashboard

Add full reverse charge (omvänd skattskyldighet) support to the VAT declaration:
- Map accounts 2614/2624/2634 to ruta 30/31/32 for self-assessed output VAT
- Calculate purchase bases (ruta 20-24) from supplier invoices by supplier type
- Include ruta 30-32 in ruta 49 formula and totalOutputVat summary
- Display reverse charge section in reports UI and composition chart
- Add comprehensive test coverage for all reverse charge scenarios

Improve mobile UX across the app:
- Convert nav drawer to bottom sheet with drag handle and safe area padding
- Add mobile card layout for PaymentBookingDialog journal lines
- Replace settings tab pills with dropdown selector on mobile
- Make wizard step indicators responsive (collapsed on mobile)
- Ensure all dialog footers stack buttons full-width on mobile
- Add 44px minimum touch targets throughout
- Make onboarding buttons full-width on mobile

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

* fix: address Greptile review — indentation, query efficiency, tab dedup

- Fix misleading try-block indentation in mark-paid route
- Filter reversed entries at DB level (.eq('status', 'posted')) instead
  of fetching then discarding in memory
- Extract shared settingsTabs array so mobile Select and desktop
  TabsList stay in sync automatically

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

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
2026-03-18 10:42:57 +01:00
committed by GitHub
co-authored by Claude Opus 4.6
parent f33806cd15
commit ceec8c02a8
18 changed files with 824 additions and 183 deletions
+70 -54
View File
@@ -315,7 +315,7 @@ export default function DashboardNav({ companyName, entityType, uncategorizedTra
</div>
</nav>
{/* Mobile menu drawer */}
{/* Mobile menu — bottom sheet */}
{isMobileMenuOpen && (
<>
{/* Backdrop */}
@@ -327,39 +327,41 @@ export default function DashboardNav({ companyName, entityType, uncategorizedTra
onClick={closeMobileMenu}
aria-hidden="true"
/>
{/* Drawer */}
{/* Bottom sheet */}
<div
className={cn(
"md:hidden fixed right-0 top-0 bottom-0 w-72 bg-card border-l border-border/40 z-50 overflow-y-auto",
"md:hidden fixed inset-x-0 bottom-0 z-50 bg-card rounded-t-2xl border-t border-border/40 overflow-y-auto overscroll-contain",
isClosing
? "animate-out slide-out-to-right duration-200"
: "animate-in slide-in-from-right duration-300"
? "animate-out slide-out-to-bottom duration-200"
: "animate-in slide-in-from-bottom duration-300"
)}
style={{ maxHeight: '85dvh', paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
role="dialog"
aria-label="Navigeringsmeny"
>
<div className="p-4 border-b border-border/40 flex items-center justify-between">
<div>
<p className="font-medium truncate">{companyName}</p>
<p className="text-xs text-muted-foreground">Meny</p>
</div>
{/* Drag handle */}
<div className="flex justify-center pt-3 pb-1 sticky top-0 bg-card rounded-t-2xl">
<div className="w-8 h-1 rounded-full bg-muted-foreground/25" />
</div>
{/* Header */}
<div className="px-4 pb-2 flex items-center justify-between">
<p className="font-medium text-sm truncate">{companyName}</p>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 -mr-1"
onClick={closeMobileMenu}
aria-label="Stäng meny"
>
<X className="h-5 w-5" />
<X className="h-4 w-4" />
</Button>
</div>
{/* Grouped navigation */}
<div className="p-2">
{/* Main section */}
<div className="mb-4">
<p className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
Huvudmeny
</p>
{/* Navigation */}
<div className="px-2">
{/* Main items */}
<div className="space-y-0.5">
{mainItems.map((item) => {
const Icon = item.icon
const active = isActive(item.href)
@@ -369,51 +371,65 @@ export default function DashboardNav({ companyName, entityType, uncategorizedTra
href={item.href}
onClick={closeMobileMenu}
className={cn(
'flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors',
'flex items-center gap-3 px-3 min-h-[44px] rounded-lg transition-colors',
active
? 'bg-primary/10 text-primary font-medium'
: 'text-muted-foreground hover:bg-secondary/50 hover:text-foreground'
: 'text-foreground active:bg-muted/60'
)}
>
<Icon className="h-5 w-5" />
{item.label}
<Icon className={cn("h-[18px] w-[18px] flex-shrink-0", active ? "text-primary" : "text-muted-foreground")} />
<span className="text-sm">{item.label}</span>
</Link>
)
})}
</div>
{/* Finance section */}
<div className="mb-4">
<p className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
Finans
</p>
{/* Finans divider */}
<div className="flex items-center gap-3 my-1.5 px-3">
<span className="text-[10px] font-semibold text-muted-foreground/60 uppercase tracking-[0.08em]">Finans</span>
<div className="flex-1 h-px bg-border/30" />
</div>
{/* Finance items */}
<div className="space-y-0.5">
{finansItems.map((item) => {
const Icon = item.icon
const active = isActive(item.href)
const badge = item.href === '/transactions' && uncategorizedTransactionCount > 0
? uncategorizedTransactionCount
: null
return (
<Link
key={item.href}
href={item.href}
onClick={closeMobileMenu}
className={cn(
'flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors',
'flex items-center gap-3 px-3 min-h-[44px] rounded-lg transition-colors',
active
? 'bg-primary/10 text-primary font-medium'
: 'text-muted-foreground hover:bg-secondary/50 hover:text-foreground'
: 'text-foreground active:bg-muted/60'
)}
>
<Icon className="h-5 w-5" />
{item.label}
<Icon className={cn("h-[18px] w-[18px] flex-shrink-0", active ? "text-primary" : "text-muted-foreground")} />
<span className="text-sm flex-1">{item.label}</span>
{badge !== null && (
<span className="min-w-[20px] h-[20px] flex items-center justify-center rounded-full bg-primary/15 text-primary text-[10px] font-semibold px-1.5">
{badge > 99 ? '99+' : badge}
</span>
)}
</Link>
)
})}
</div>
{/* Other section */}
<div className="mb-4">
<p className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
Övrigt
</p>
{/* Övrigt divider */}
<div className="flex items-center gap-3 my-1.5 px-3">
<span className="text-[10px] font-semibold text-muted-foreground/60 uppercase tracking-[0.08em]">Övrigt</span>
<div className="flex-1 h-px bg-border/30" />
</div>
{/* Other items */}
<div className="space-y-0.5">
{övrigtItems.map((item) => {
const Icon = item.icon
const active = isActive(item.href)
@@ -423,33 +439,33 @@ export default function DashboardNav({ companyName, entityType, uncategorizedTra
href={item.href}
onClick={closeMobileMenu}
className={cn(
'flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors',
'flex items-center gap-3 px-3 min-h-[44px] rounded-lg transition-colors',
active
? 'bg-primary/10 text-primary font-medium'
: 'text-muted-foreground hover:bg-secondary/50 hover:text-foreground'
: 'text-foreground active:bg-muted/60'
)}
>
<Icon className="h-5 w-5" />
{item.label}
<Icon className={cn("h-[18px] w-[18px] flex-shrink-0", active ? "text-primary" : "text-muted-foreground")} />
<span className="text-sm">{item.label}</span>
</Link>
)
})}
</div>
</div>
{/* Logout */}
<div className="pt-4 border-t border-border/40">
<Button
variant="ghost"
className="w-full justify-start text-muted-foreground hover:text-foreground"
onClick={() => {
closeMobileMenu()
handleLogout()
}}
>
<LogOut className="mr-3 h-5 w-5" />
{isSandbox ? 'Avsluta sandbox' : 'Logga ut'}
</Button>
</div>
{/* Logout */}
<div className="px-2 py-2 mt-1 border-t border-border/30">
<Button
variant="ghost"
className="w-full justify-start text-muted-foreground active:text-foreground text-sm h-11 px-3"
onClick={() => {
closeMobileMenu()
handleLogout()
}}
>
<LogOut className="mr-3 h-[18px] w-[18px]" />
{isSandbox ? 'Avsluta sandbox' : 'Logga ut'}
</Button>
</div>
</div>
</>
@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { useToast } from '@/components/ui/use-toast'
import { cn } from '@/lib/utils'
import { ConfirmationDialog } from '@/components/ui/confirmation-dialog'
import Link from 'next/link'
import {
@@ -1513,10 +1514,16 @@ export default function ArcimMigrationWorkspace(_props: WorkspaceComponentProps)
<CardContent className="pt-6">
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span className="sm:hidden text-primary font-medium">
Steg {currentUserStepIndex + 1}/{userSteps.length}: {STEP_LABELS[step]}
</span>
{userSteps.map((s) => (
<span
key={s}
className={userSteps.indexOf(s) <= currentUserStepIndex ? 'font-medium text-primary' : 'text-muted-foreground'}
className={cn(
'hidden sm:inline',
userSteps.indexOf(s) <= currentUserStepIndex ? 'font-medium text-primary' : 'text-muted-foreground'
)}
>
{STEP_LABELS[s]}
</span>
+63 -4
View File
@@ -225,12 +225,71 @@ export default function PaymentBookingDialog({
type="date"
value={paymentDate}
onChange={(e) => setPaymentDate(e.target.value)}
className="w-48"
className="w-full sm:w-48"
/>
</div>
{/* Journal entry lines */}
<div className="space-y-2">
{/* Mobile card layout */}
<div className="sm:hidden space-y-3">
{lines.map((line, index) => (
<div key={index} className="rounded-lg border bg-card p-3 space-y-2">
<div className="flex items-start gap-2">
<div className="flex-1">
<AccountCombobox
value={line.account_number}
accounts={accounts}
onChange={(val) => updateLine(index, 'account_number', val)}
/>
</div>
<Button
type="button"
variant="ghost"
size="sm"
className="h-8 w-8 p-0 min-h-[44px] min-w-[44px] shrink-0 -mr-1 -mt-1"
onClick={() => removeLine(index)}
disabled={lines.length <= 2}
>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-xs text-muted-foreground">Debet</Label>
<Input
type="number"
step="0.01"
min="0"
placeholder="0,00"
value={line.debit_amount}
onChange={(e) => updateLine(index, 'debit_amount', e.target.value)}
className="font-mono text-right"
inputMode="decimal"
/>
</div>
<div className="space-y-1">
<Label className="text-xs text-muted-foreground">Kredit</Label>
<Input
type="number"
step="0.01"
min="0"
placeholder="0,00"
value={line.credit_amount}
onChange={(e) => updateLine(index, 'credit_amount', e.target.value)}
className="font-mono text-right"
inputMode="decimal"
/>
</div>
</div>
</div>
))}
<Button type="button" variant="outline" size="sm" onClick={addLine} className="w-full">
<Plus className="mr-1 h-3.5 w-3.5" /> Lägg till rad
</Button>
</div>
{/* Desktop table layout */}
<div className="hidden sm:block space-y-2">
{/* Header */}
<div className="grid grid-cols-[1fr_120px_120px_32px] gap-2 text-xs font-medium text-muted-foreground px-1">
<span>Konto</span>
@@ -316,10 +375,10 @@ export default function PaymentBookingDialog({
)}
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting} className="w-full sm:w-auto min-h-11">
Avbryt
</Button>
<Button onClick={handleSubmit} disabled={!isBalanced || isSubmitting || !isInitialized}>
<Button onClick={handleSubmit} disabled={!isBalanced || isSubmitting || !isInitialized} className="w-full sm:w-auto min-h-11">
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Bekräfta &amp; bokför
</Button>
+2 -1
View File
@@ -104,11 +104,12 @@ export default function Step1EntityType({ initialData, onNext, isSaving }: Step1
})}
</div>
<div className="flex justify-end">
<div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
<Button
onClick={handleNext}
disabled={!selected || isSaving}
size="lg"
className="w-full sm:w-auto"
>
{isSaving ? (
<>
@@ -139,17 +139,18 @@ export default function Step2CompanyDetails({
</div>
</div>
<div className="flex justify-between pt-4">
<div className="flex flex-col-reverse sm:flex-row sm:justify-between gap-3 pt-4">
<Button
type="button"
variant="ghost"
onClick={onBack}
disabled={isSaving}
className="w-full sm:w-auto"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Tillbaka
</Button>
<Button type="submit" disabled={isSaving}>
<Button type="submit" disabled={isSaving} className="w-full sm:w-auto">
{isSaving ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -754,17 +754,18 @@ export default function Step3TaxRegistration({
</div>
</div>
<div className="flex justify-between pt-4">
<div className="flex flex-col-reverse sm:flex-row sm:justify-between gap-3 pt-4">
<Button
type="button"
variant="ghost"
onClick={onBack}
disabled={isSaving}
className="w-full sm:w-auto"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Tillbaka
</Button>
<Button type="submit" disabled={isSaving}>
<Button type="submit" disabled={isSaving} className="w-full sm:w-auto">
{isSaving ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -15,6 +15,9 @@ const COLORS = [
'hsl(var(--chart-2))',
'hsl(var(--chart-3))',
'hsl(var(--chart-4))',
'hsl(var(--chart-1) / 0.6)',
'hsl(var(--chart-2) / 0.6)',
'hsl(var(--chart-3) / 0.6)',
]
export function VatCompositionChart({ rutor }: VatCompositionChartProps) {
@@ -23,6 +26,9 @@ export function VatCompositionChart({ rutor }: VatCompositionChartProps) {
{ name: 'Utgående 25%', value: rutor.ruta10 },
{ name: 'Utgående 12%', value: rutor.ruta11 },
{ name: 'Utgående 6%', value: rutor.ruta12 },
{ name: 'Omvänd 25%', value: rutor.ruta30 },
{ name: 'Omvänd 12%', value: rutor.ruta31 },
{ name: 'Omvänd 6%', value: rutor.ruta32 },
{ name: 'Ingående moms', value: rutor.ruta48 },
]
return segments.filter((s) => s.value > 0)
+1 -1
View File
@@ -23,7 +23,7 @@ export default function InboxZeroState({ hasTransactions, onCreateTransaction }:
<p className="text-sm text-muted-foreground text-center max-w-sm mb-6">
Importera kontoutdrag från din bank eller lägg till transaktioner manuellt för att komma igång.
</p>
<div className="flex gap-2">
<div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto px-4 sm:px-0">
<Button asChild>
<Link href="/import">
<Upload className="mr-2 h-4 w-4" />
+2 -1
View File
@@ -67,11 +67,12 @@ export function ConfirmationDialog({
variant="outline"
onClick={() => onOpenChange(false)}
disabled={isSubmitting}
className="min-h-11 w-full sm:w-auto"
>
Tillbaka
</Button>
{extraActions}
<Button onClick={onConfirm} disabled={isSubmitting}>
<Button onClick={onConfirm} disabled={isSubmitting} className="min-h-11 w-full sm:w-auto">
{isSubmitting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+5 -5
View File
@@ -78,6 +78,7 @@ export function DestructiveConfirmDialog({
variant="outline"
onClick={() => onOpenChange(false)}
disabled={isLoading}
className="min-h-11 w-full sm:w-auto"
>
{cancelLabel}
</Button>
@@ -85,11 +86,10 @@ export function DestructiveConfirmDialog({
variant={variant === 'destructive' ? 'destructive' : 'default'}
onClick={handleConfirm}
disabled={isLoading}
className={
variant === 'warning'
? 'bg-warning hover:bg-warning/90 text-warning-foreground'
: undefined
}
className={cn(
'min-h-11 w-full sm:w-auto',
variant === 'warning' && 'bg-warning hover:bg-warning/90 text-warning-foreground'
)}
>
{isLoading ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+1 -1
View File
@@ -72,7 +72,7 @@ const DialogFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2 sm:gap-0",
className
)}
{...props}