Jakob Wennberg
100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog'
|
|
import { formatCurrency, formatDate } from '@/lib/utils'
|
|
import type { TransactionWithInvoice } from './transaction-types'
|
|
|
|
interface InvoiceMatchDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
transaction: TransactionWithInvoice | null
|
|
isConfirming: boolean
|
|
onConfirm: () => void
|
|
}
|
|
|
|
export default function InvoiceMatchDialog({
|
|
open,
|
|
onOpenChange,
|
|
transaction,
|
|
isConfirming,
|
|
onConfirm,
|
|
}: InvoiceMatchDialogProps) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Bekräfta fakturamatchning</DialogTitle>
|
|
<DialogDescription>
|
|
Vill du koppla denna transaktion till fakturan? Fakturan kommer att markeras som betald.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{transaction?.potential_invoice && (
|
|
<div className="space-y-4">
|
|
{/* Transaction details */}
|
|
<div className="rounded-lg border p-4 space-y-2">
|
|
<p className="text-sm font-medium text-muted-foreground">Transaktion</p>
|
|
<p className="font-medium">{transaction.description}</p>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">{formatDate(transaction.date)}</span>
|
|
<span className="font-medium text-success">
|
|
+{formatCurrency(transaction.amount, transaction.currency)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Invoice details */}
|
|
<div className="rounded-lg border p-4 space-y-2">
|
|
<p className="text-sm font-medium text-muted-foreground">Faktura</p>
|
|
<p className="font-medium">
|
|
Faktura {transaction.potential_invoice.invoice_number}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{transaction.potential_invoice.customer?.name || 'Okänd kund'}
|
|
</p>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">
|
|
Förfaller: {formatDate(transaction.potential_invoice.due_date)}
|
|
</span>
|
|
<span className="font-medium">
|
|
{formatCurrency(
|
|
transaction.potential_invoice.total,
|
|
transaction.potential_invoice.currency
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* What will happen */}
|
|
<div className="rounded-lg bg-muted/50 p-4 space-y-2">
|
|
<p className="text-sm font-medium">Vid bekräftelse:</p>
|
|
<ul className="text-sm text-muted-foreground space-y-1">
|
|
<li>• Transaktionen kopplas till fakturan</li>
|
|
<li>• Fakturan markeras som betald</li>
|
|
<li>• Bokföringsverifikation skapas automatiskt</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => onOpenChange(false)}
|
|
disabled={isConfirming}
|
|
>
|
|
Avbryt
|
|
</Button>
|
|
<Button
|
|
onClick={onConfirm}
|
|
disabled={isConfirming}
|
|
>
|
|
{isConfirming ? 'Bekräftar...' : 'Bekräfta matchning'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|