Jakob Wennberg
66a4027f1e
- Update BAS account catalog with comprehensive SRU codes and K2 flags - Add currency revaluation service with tests and API route - Add expenses page and account deletion API - Enhance booking templates with new patterns and improved tests - Improve transaction categorization with template picker and description matching - Polish dashboard, onboarding, import, and transaction UIs - Refactor year-end service for multi-step closing - Move SRU generator to ne-bilaga, remove standalone SRU export - Remove unused dev docs, mock data, and extension hooks - Add invoice delivery note sequences migration Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
268 lines
11 KiB
TypeScript
268 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import { formatCurrency, formatDate } from '@/lib/utils'
|
|
import { ArrowUpRight, ArrowDownRight, FileText, Loader2, MessageSquareText, Paperclip } from 'lucide-react'
|
|
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/info-tooltip'
|
|
import { formatAccountWithName } from '@/lib/bookkeeping/client-account-names'
|
|
import { getTemplateById } from '@/lib/bookkeeping/booking-templates'
|
|
import type { TransactionWithInvoice, CategorizeHandler } from './transaction-types'
|
|
import type { SuggestedCategory, SuggestedTemplate } from '@/lib/transactions/category-suggestions'
|
|
|
|
interface TransactionInboxCardProps {
|
|
transaction: TransactionWithInvoice
|
|
suggestions?: SuggestedCategory[]
|
|
templateSuggestions?: SuggestedTemplate[]
|
|
processingId: string | null
|
|
isBatchMode: boolean
|
|
isSelected: boolean
|
|
entityType?: string
|
|
onCategorize: CategorizeHandler
|
|
onMarkPrivate: (id: string) => void
|
|
onOpenMatchDialog: (transaction: TransactionWithInvoice) => void
|
|
onOpenCategoryDialog: (transaction: TransactionWithInvoice) => void
|
|
onOpenDescribe?: (transaction: TransactionWithInvoice) => void
|
|
onOpenQuickReview?: (transaction: TransactionWithInvoice, suggestion: SuggestedCategory) => void
|
|
onOpenTemplateReview?: (transaction: TransactionWithInvoice, templateId: string) => void
|
|
onToggleSelect: (id: string) => void
|
|
onAnimationComplete?: (id: string) => void
|
|
}
|
|
|
|
export default function TransactionInboxCard({
|
|
transaction,
|
|
suggestions,
|
|
templateSuggestions,
|
|
processingId,
|
|
isBatchMode,
|
|
isSelected,
|
|
entityType = 'enskild_firma',
|
|
onCategorize,
|
|
onMarkPrivate,
|
|
onOpenMatchDialog,
|
|
onOpenCategoryDialog,
|
|
onOpenDescribe,
|
|
onOpenQuickReview,
|
|
onOpenTemplateReview,
|
|
onToggleSelect,
|
|
onAnimationComplete,
|
|
}: TransactionInboxCardProps) {
|
|
const isProcessing = processingId === transaction.id
|
|
const isDisabled = processingId !== null && processingId !== transaction.id
|
|
const isIncome = transaction.amount > 0
|
|
const hasInvoiceMatch = !!transaction.potential_invoice && !transaction.invoice_id
|
|
const hasSupplierInvoiceMatch = !!transaction.potential_supplier_invoice && !transaction.supplier_invoice_id
|
|
const topSuggestion = suggestions?.[0]
|
|
const isUncategorized = transaction.is_business === null && !transaction.journal_entry_id
|
|
const showCheckbox = isBatchMode && isUncategorized
|
|
const hasDocumentMatch = !!transaction.matched_inbox_item
|
|
|
|
function handleSuggestionClick(suggestion: SuggestedCategory) {
|
|
if (onOpenQuickReview) {
|
|
onOpenQuickReview(transaction, suggestion)
|
|
} else {
|
|
onCategorize(transaction.id, true, suggestion.category)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<motion.div
|
|
layout
|
|
initial={{ opacity: 1, height: 'auto' }}
|
|
exit={{ opacity: 0, height: 0, marginBottom: 0 }}
|
|
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
|
onAnimationComplete={(definition) => {
|
|
// Only call on exit animation
|
|
if (typeof definition === 'object' && 'opacity' in definition && definition.opacity === 0) {
|
|
onAnimationComplete?.(transaction.id)
|
|
}
|
|
}}
|
|
>
|
|
<Card
|
|
className={`transition-colors ${
|
|
hasInvoiceMatch || hasSupplierInvoiceMatch ? 'border-blue-500/50' : 'border-warning/50'
|
|
} ${isSelected ? 'border-primary bg-primary/[0.02]' : ''} ${
|
|
isDisabled ? 'opacity-50' : ''
|
|
}`}
|
|
onClick={showCheckbox ? () => onToggleSelect(transaction.id) : undefined}
|
|
>
|
|
<CardContent className="py-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
{/* Left: checkbox + icon + info */}
|
|
<div className="flex items-start gap-3 min-w-0 flex-1">
|
|
{showCheckbox && (
|
|
<Checkbox
|
|
checked={isSelected}
|
|
onCheckedChange={() => onToggleSelect(transaction.id)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="mt-1"
|
|
/>
|
|
)}
|
|
<div
|
|
className={`h-10 w-10 rounded-full flex items-center justify-center flex-shrink-0 ${
|
|
isIncome
|
|
? 'bg-success/10 text-success'
|
|
: 'bg-destructive/10 text-destructive'
|
|
}`}
|
|
>
|
|
{isIncome ? (
|
|
<ArrowUpRight className="h-5 w-5" />
|
|
) : (
|
|
<ArrowDownRight className="h-5 w-5" />
|
|
)}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="font-medium truncate">{transaction.description}</p>
|
|
<div className="flex items-center gap-2">
|
|
<p className="text-sm text-muted-foreground">{formatDate(transaction.date)}</p>
|
|
{hasDocumentMatch && (
|
|
<Badge variant="secondary" className="text-xs gap-1">
|
|
<Paperclip className="h-3 w-3" />
|
|
{transaction.matched_inbox_item!.document_type === 'receipt' ? 'Kvitto' :
|
|
transaction.matched_inbox_item!.document_type === 'supplier_invoice' ? 'Faktura' : 'Dokument'}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: amount */}
|
|
<div className="text-right flex-shrink-0">
|
|
<p className={`font-medium ${isIncome ? 'text-success' : ''}`}>
|
|
{isIncome ? '+' : ''}
|
|
{formatCurrency(transaction.amount, transaction.currency)}
|
|
</p>
|
|
{transaction.currency !== 'SEK' && transaction.amount_sek && (
|
|
<p className="text-sm text-muted-foreground">
|
|
{formatCurrency(transaction.amount_sek)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Inline action buttons - only shown when not in batch mode */}
|
|
{!isBatchMode && (
|
|
<div className="flex flex-wrap items-center gap-2 mt-3 pt-3 border-t">
|
|
{/* Primary action: invoice match or top suggestion */}
|
|
{hasInvoiceMatch ? (
|
|
<Button
|
|
size="sm"
|
|
variant="default"
|
|
className="h-8 text-xs"
|
|
onClick={() => onOpenMatchDialog(transaction)}
|
|
disabled={isProcessing || isDisabled}
|
|
>
|
|
{isProcessing ? (
|
|
<Loader2 className="mr-1.5 h-3 w-3 animate-spin" />
|
|
) : (
|
|
<FileText className="mr-1.5 h-3 w-3" />
|
|
)}
|
|
Matcha Faktura {transaction.potential_invoice!.invoice_number}
|
|
</Button>
|
|
) : hasSupplierInvoiceMatch ? (
|
|
<Button
|
|
size="sm"
|
|
variant="default"
|
|
className="h-8 text-xs"
|
|
onClick={() => onOpenMatchDialog(transaction)}
|
|
disabled={isProcessing || isDisabled}
|
|
>
|
|
{isProcessing ? (
|
|
<Loader2 className="mr-1.5 h-3 w-3 animate-spin" />
|
|
) : (
|
|
<FileText className="mr-1.5 h-3 w-3" />
|
|
)}
|
|
Matcha Leverantörsfaktura {transaction.potential_supplier_invoice!.supplier_invoice_number}
|
|
</Button>
|
|
) : templateSuggestions && templateSuggestions.length > 0 ? (
|
|
<>
|
|
{templateSuggestions.slice(0, 2).map((ts, idx) => {
|
|
const tmpl = getTemplateById(ts.template_id)
|
|
return (
|
|
<Button
|
|
key={ts.template_id}
|
|
size="sm"
|
|
variant={idx === 0 ? 'default' : 'outline'}
|
|
className="h-8 text-xs"
|
|
onClick={() => {
|
|
if (onOpenTemplateReview && tmpl) {
|
|
onOpenTemplateReview(transaction, ts.template_id)
|
|
} else if (topSuggestion) {
|
|
handleSuggestionClick(topSuggestion)
|
|
}
|
|
}}
|
|
disabled={isProcessing || isDisabled}
|
|
>
|
|
{isProcessing && idx === 0 ? (
|
|
<Loader2 className="mr-1.5 h-3 w-3 animate-spin" />
|
|
) : null}
|
|
{ts.name_sv}
|
|
<span className="ml-1 opacity-70 font-normal">
|
|
({ts.debit_account})
|
|
</span>
|
|
</Button>
|
|
)
|
|
})}
|
|
</>
|
|
) : topSuggestion ? (
|
|
<Button
|
|
size="sm"
|
|
variant="default"
|
|
className="h-8 text-xs"
|
|
onClick={() => handleSuggestionClick(topSuggestion)}
|
|
disabled={isProcessing || isDisabled}
|
|
>
|
|
{isProcessing ? (
|
|
<Loader2 className="mr-1.5 h-3 w-3 animate-spin" />
|
|
) : null}
|
|
{topSuggestion.label}
|
|
{topSuggestion.account && (
|
|
<span className="ml-1 opacity-70 font-normal">
|
|
({formatAccountWithName(topSuggestion.account)})
|
|
</span>
|
|
)}
|
|
{topSuggestion.confidence >= 0.8 && (
|
|
<Badge variant="secondary" className="ml-1.5 text-[10px] px-1 py-0">
|
|
{Math.round(topSuggestion.confidence * 100)}%
|
|
</Badge>
|
|
)}
|
|
</Button>
|
|
) : null}
|
|
|
|
{/* Describe transaction */}
|
|
{onOpenDescribe && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-8 text-xs"
|
|
onClick={() => onOpenDescribe(transaction)}
|
|
disabled={isProcessing || isDisabled}
|
|
>
|
|
<MessageSquareText className="mr-1.5 h-3 w-3" />
|
|
Beskriv...
|
|
</Button>
|
|
)}
|
|
|
|
{/* Open category dialog / template picker */}
|
|
<Button
|
|
size="sm"
|
|
variant={!hasInvoiceMatch && !hasSupplierInvoiceMatch && !topSuggestion && (!templateSuggestions || templateSuggestions.length === 0) ? 'default' : 'outline'}
|
|
className="h-8 text-xs"
|
|
onClick={() => onOpenCategoryDialog(transaction)}
|
|
disabled={isProcessing || isDisabled}
|
|
>
|
|
{!hasInvoiceMatch && !hasSupplierInvoiceMatch && !topSuggestion && (!templateSuggestions || templateSuggestions.length === 0)
|
|
? 'Välj mall...'
|
|
: 'Välj mall...'}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
)
|
|
}
|