feat: add review confirmation dialogs and BAS account number tooltips
Add modal review/confirmation dialogs before submitting invoices, supplier invoices, and journal entries. Since journal entries are legally immutable once posted, users now see a full summary with an amber warning before confirming. Add AccountNumber component with rich tooltips showing account name, class, type, and plain-language Swedish explanation for ~45 key BAS accounts across all report views. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
885f362a29
commit
ba94f60d06
@@ -0,0 +1,115 @@
|
||||
'use client'
|
||||
|
||||
import { getAccountDescription, type AccountType } from '@/lib/bookkeeping/account-descriptions'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
} from '@/components/ui/info-tooltip'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const TYPE_COLORS: Record<AccountType, string> = {
|
||||
asset: 'bg-green-500',
|
||||
liability: 'bg-orange-500',
|
||||
equity: 'bg-blue-500',
|
||||
revenue: 'bg-purple-500',
|
||||
expense: 'bg-red-500',
|
||||
}
|
||||
|
||||
const TYPE_LABELS: Record<AccountType, string> = {
|
||||
asset: 'Tillgång',
|
||||
liability: 'Skuld',
|
||||
equity: 'Eget kapital',
|
||||
revenue: 'Intäkt',
|
||||
expense: 'Kostnad',
|
||||
}
|
||||
|
||||
interface AccountNumberProps {
|
||||
number: string
|
||||
name?: string
|
||||
showName?: boolean
|
||||
size?: 'sm' | 'default'
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function AccountNumber({
|
||||
number,
|
||||
name,
|
||||
showName,
|
||||
size = 'default',
|
||||
className,
|
||||
}: AccountNumberProps) {
|
||||
const desc = getAccountDescription(number)
|
||||
const displayName = desc?.name ?? name
|
||||
|
||||
const numberElement = (
|
||||
<span
|
||||
className={cn(
|
||||
'font-mono',
|
||||
size === 'sm' ? 'text-xs' : 'text-sm',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{number}
|
||||
</span>
|
||||
)
|
||||
|
||||
if (!desc) {
|
||||
return (
|
||||
<>
|
||||
{numberElement}
|
||||
{showName && displayName && (
|
||||
<span className="ml-1">{displayName}</span>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={200}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 cursor-help',
|
||||
'decoration-dotted underline underline-offset-4 decoration-muted-foreground/40',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'font-mono',
|
||||
size === 'sm' ? 'text-xs' : 'text-sm',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{number}
|
||||
</span>
|
||||
{showName && displayName && (
|
||||
<span className={size === 'sm' ? 'text-xs' : 'text-sm'}>
|
||||
{displayName}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top" className="max-w-xs p-3">
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn('h-2 w-2 rounded-full shrink-0', TYPE_COLORS[desc.type])} />
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{desc.classLabel} · {TYPE_LABELS[desc.type]}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-medium">
|
||||
<span className="font-mono mr-1.5">{number}</span>
|
||||
{desc.name}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
{desc.explanation}
|
||||
</p>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
'use client'
|
||||
|
||||
import { ReactNode } from 'react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ClipboardCheck, Loader2, AlertTriangle } from 'lucide-react'
|
||||
|
||||
interface ConfirmationDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onConfirm: () => void
|
||||
isSubmitting: boolean
|
||||
title: string
|
||||
warningText?: string
|
||||
confirmLabel?: string
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function ConfirmationDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onConfirm,
|
||||
isSubmitting,
|
||||
title,
|
||||
warningText = 'En verifikation skapas och kan inte ändras efteråt.',
|
||||
confirmLabel = 'Bekräfta & skapa',
|
||||
children,
|
||||
}: ConfirmationDialogProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl border-t-2 border-primary p-0 gap-0">
|
||||
<DialogHeader className="px-6 pt-6 pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
|
||||
<ClipboardCheck className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<DialogTitle className="text-xl">{title}</DialogTitle>
|
||||
<DialogDescription>Granska uppgifterna innan du bekräftar</DialogDescription>
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="overflow-y-auto max-h-[70vh] px-6 pb-4">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<div className="border-t px-6 py-4 space-y-4">
|
||||
<div className="flex items-start gap-2 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 p-3">
|
||||
<AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
|
||||
<p className="text-sm text-amber-800 dark:text-amber-300">{warningText}</p>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Tillbaka
|
||||
</Button>
|
||||
<Button onClick={onConfirm} disabled={isSubmitting}>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Skapar...
|
||||
</>
|
||||
) : (
|
||||
confirmLabel
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user