root
314 lines
16 KiB
TypeScript
314 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import { ArrowLeft, Download, PenTool, Send, Check, X, Printer, FilePlus2 } from 'lucide-react';
|
|
import { useToast } from '../../components/ToastProvider';
|
|
import { useSession } from 'next-auth/react';
|
|
|
|
const typeLabels: Record<string, string> = {
|
|
QUOTE: 'Angebot', ORDER_CONFIRMATION: 'Auftragsbestätigung',
|
|
DELIVERY_NOTE: 'Lieferschein', INVOICE: 'Rechnung', CREDIT_NOTE: 'Rechnungskorrektur'
|
|
};
|
|
const statusLabels: Record<string, string> = {
|
|
DRAFT: 'Entwurf', SENT: 'Gesendet', ACCEPTED: 'Angenommen',
|
|
REJECTED: 'Abgelehnt', DELIVERED: 'Geliefert', PAID: 'Bezahlt',
|
|
CANCELLED: 'Storniert', ARCHIVED: 'Archiviert'
|
|
};
|
|
const statusColors: Record<string, string> = {
|
|
DRAFT: 'bg-slate-100 text-slate-600', SENT: 'bg-blue-100 text-blue-700',
|
|
ACCEPTED: 'bg-emerald-100 text-emerald-700', REJECTED: 'bg-red-100 text-red-700',
|
|
DELIVERED: 'bg-amber-100 text-amber-700', PAID: 'bg-emerald-100 text-emerald-700',
|
|
CANCELLED: 'bg-slate-200 text-slate-500', ARCHIVED: 'bg-slate-100 text-slate-400'
|
|
};
|
|
|
|
export default function SalesDocDetailPage() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const { toast, confirm } = useToast();
|
|
const { data: session } = useSession();
|
|
const perms = (session?.user as any)?.permissions || [];
|
|
const canManage = perms.includes('SALES_MANAGE');
|
|
const [doc, setDoc] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showSignature, setShowSignature] = useState(false);
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const isDrawing = useRef(false);
|
|
|
|
useEffect(() => { fetchDoc(); }, [params.id]);
|
|
|
|
const fetchDoc = async () => {
|
|
const res = await fetch(`/api/sales/${params.id}`);
|
|
if (res.ok) setDoc(await res.json());
|
|
setLoading(false);
|
|
};
|
|
|
|
const updateStatus = async (status: string) => {
|
|
const res = await fetch(`/api/sales/${params.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ status })
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
// If quote was accepted, auto-AB was created → show info
|
|
if (data.followUpId) {
|
|
toast(`Auftragsbestätigung ${data.followUpNumber} wurde automatisch erstellt & versendet. Angebot archiviert.`, 'success');
|
|
} else {
|
|
toast(`Status: ${statusLabels[status]}`, 'success');
|
|
}
|
|
fetchDoc();
|
|
}
|
|
};
|
|
|
|
const createFollowUp = async () => {
|
|
const followUpLabels: Record<string, string> = { ORDER_CONFIRMATION: 'Lieferschein', DELIVERY_NOTE: 'Rechnung', INVOICE: 'Rechnungskorrektur' };
|
|
const nextLabel = followUpLabels[doc.type] || 'Folgebeleg';
|
|
const msg = doc.type === 'INVOICE'
|
|
? `Rechnungskorrektur erstellen? Die Rechnung ${doc.number} wird storniert.`
|
|
: `Aus dieser ${typeLabels[doc.type]} einen ${nextLabel} erstellen?`;
|
|
const ok = await confirm({ title: `${nextLabel} erstellen`, message: msg, danger: doc.type === 'INVOICE' });
|
|
if (!ok) return;
|
|
const res = await fetch(`/api/sales/${params.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ action: 'CREATE_FOLLOWUP' })
|
|
});
|
|
if (res.ok) {
|
|
const newDoc = await res.json();
|
|
toast(`${nextLabel} ${newDoc.number} erstellt.`, 'success');
|
|
router.push(`/sales/${newDoc.id}`);
|
|
} else {
|
|
toast('Fehler beim Erstellen', 'error');
|
|
}
|
|
};
|
|
|
|
// Signature Canvas
|
|
const startDraw = (e: React.MouseEvent | React.TouchEvent) => {
|
|
isDrawing.current = true;
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = 'touches' in e ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
|
|
const y = 'touches' in e ? e.touches[0].clientY - rect.top : e.clientY - rect.top;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
};
|
|
const draw = (e: React.MouseEvent | React.TouchEvent) => {
|
|
if (!isDrawing.current) return;
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = 'touches' in e ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
|
|
const y = 'touches' in e ? e.touches[0].clientY - rect.top : e.clientY - rect.top;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = '#1e293b';
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
};
|
|
const endDraw = () => { isDrawing.current = false; };
|
|
const clearSignature = () => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx?.clearRect(0, 0, canvas.width, canvas.height);
|
|
};
|
|
|
|
const saveSignature = async () => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const dataUrl = canvas.toDataURL('image/png');
|
|
const res = await fetch(`/api/sales/${params.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ signatureData: dataUrl })
|
|
});
|
|
if (res.ok) { toast('Unterschrift gespeichert', 'success'); setShowSignature(false); fetchDoc(); }
|
|
};
|
|
|
|
if (loading) return <div className="p-8 text-slate-500 font-medium">Lade...</div>;
|
|
if (!doc) return <div className="p-8 text-red-600 font-medium">Beleg nicht gefunden.</div>;
|
|
|
|
const nextActions: Record<string, { label: string, status: string, icon: any }[]> = {
|
|
DRAFT: [{ label: 'Als gesendet markieren', status: 'SENT', icon: Send }],
|
|
SENT: doc.type === 'ORDER_CONFIRMATION' ? [] :
|
|
doc.type === 'INVOICE' ? [{ label: 'Bezahlt', status: 'PAID', icon: Check }] :
|
|
doc.type === 'CREDIT_NOTE' ? [] :
|
|
[{ label: 'Angenommen', status: 'ACCEPTED', icon: Check }, { label: 'Abgelehnt', status: 'REJECTED', icon: X }],
|
|
ACCEPTED: doc.type === 'DELIVERY_NOTE' ? [{ label: 'Geliefert', status: 'DELIVERED', icon: Check }] : [],
|
|
};
|
|
const actions = nextActions[doc.status] || [];
|
|
|
|
// Can create follow-up? AB → LS, LS → RE, RE → RK
|
|
const canCreateFollowUp = canManage && (
|
|
(doc.type === 'ORDER_CONFIRMATION' && doc.status === 'SENT') ||
|
|
(doc.type === 'DELIVERY_NOTE' && ['SENT', 'ACCEPTED', 'DELIVERED'].includes(doc.status)) ||
|
|
(doc.type === 'INVOICE' && ['SENT', 'PAID'].includes(doc.status))
|
|
);
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto space-y-6 pb-12 animate-fade-in-up">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<button onClick={() => router.push('/sales')} className="p-2 hover:bg-slate-200 rounded-lg text-slate-600 transition">
|
|
<ArrowLeft className="w-5 h-5" />
|
|
</button>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900">{typeLabels[doc.type]} {doc.number}</h1>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className={`px-2.5 py-1 rounded-full text-xs font-bold ${statusColors[doc.status]}`}>{statusLabels[doc.status]}</span>
|
|
{doc.previousStatus && ['ARCHIVED', 'CANCELLED'].includes(doc.status) && (
|
|
<span className={`px-2.5 py-1 rounded-full text-xs font-bold ${statusColors[doc.previousStatus] || 'bg-slate-100 text-slate-500'}`}>
|
|
vorher: {statusLabels[doc.previousStatus] || doc.previousStatus}
|
|
</span>
|
|
)}
|
|
<span className="text-sm text-slate-500">{new Date(doc.createdAt).toLocaleDateString('de-DE')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{canManage && !doc.signatureData && !['INVOICE', 'ORDER_CONFIRMATION'].includes(doc.type) && !['CANCELLED', 'ARCHIVED'].includes(doc.status) && (
|
|
<button onClick={() => setShowSignature(true)} className="bg-amber-500 text-white px-4 py-2 rounded-lg hover:bg-amber-600 transition flex items-center gap-2 text-sm font-medium">
|
|
<PenTool className="w-4 h-4" /> Unterschreiben
|
|
</button>
|
|
)}
|
|
{canManage && actions.map(a => (
|
|
<button key={a.status} onClick={() => updateStatus(a.status)} className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center gap-2 text-sm font-medium">
|
|
<a.icon className="w-4 h-4" /> {a.label}
|
|
</button>
|
|
))}
|
|
{canCreateFollowUp && (
|
|
<button onClick={createFollowUp} className={`${doc.type === 'INVOICE' ? 'bg-red-600 hover:bg-red-700' : 'bg-emerald-600 hover:bg-emerald-700'} text-white px-4 py-2 rounded-lg transition flex items-center gap-2 text-sm font-medium`}>
|
|
<FilePlus2 className="w-4 h-4" /> {{ ORDER_CONFIRMATION: 'Lieferschein erstellen', DELIVERY_NOTE: 'Rechnung erstellen', INVOICE: 'Rechnungskorrektur' }[doc.type]}
|
|
</button>
|
|
)}
|
|
<button onClick={() => window.print()} className="bg-slate-100 text-slate-700 px-4 py-2 rounded-lg hover:bg-slate-200 transition flex items-center gap-2 text-sm font-medium">
|
|
<Printer className="w-4 h-4" /> Drucken
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2">
|
|
{/* Document Body (print-friendly) */}
|
|
<div className="bg-white p-8 rounded-2xl shadow-lg shadow-slate-200/50 border border-slate-100 print:shadow-none print:border-none" id="print-area">
|
|
<div className="flex justify-between items-start mb-8">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-slate-900">{typeLabels[doc.type]}</h2>
|
|
<p className="text-sm text-slate-500 mt-1">Nr. {doc.number}</p>
|
|
<p className="text-sm text-slate-500">Datum: {new Date(doc.createdAt).toLocaleDateString('de-DE')}</p>
|
|
{doc.validUntil && <p className="text-sm text-slate-500">Gültig bis: {new Date(doc.validUntil).toLocaleDateString('de-DE')}</p>}
|
|
</div>
|
|
<div className="text-right text-sm text-slate-600">
|
|
<p className="font-semibold">{doc.customer?.companyName}</p>
|
|
<p>{doc.customer?.firstName} {doc.customer?.lastName}</p>
|
|
<p>{doc.customer?.address}</p>
|
|
<p>{doc.customer?.zipCode} {doc.customer?.city}</p>
|
|
<p>{doc.customer?.email}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<table className="w-full text-sm mb-6">
|
|
<thead>
|
|
<tr className="border-b-2 border-slate-200 text-slate-600">
|
|
<th className="text-left py-3 font-medium">Pos.</th>
|
|
<th className="text-left py-3 font-medium">Beschreibung</th>
|
|
<th className="text-right py-3 font-medium">Menge</th>
|
|
<th className="text-right py-3 font-medium">Einzelpreis</th>
|
|
<th className="text-right py-3 font-medium">Gesamt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{doc.items?.map((item: any, idx: number) => (
|
|
<tr key={item.id}>
|
|
<td className="py-3 text-slate-400">{idx + 1}</td>
|
|
<td className="py-3 font-medium text-slate-800">{item.description}</td>
|
|
<td className="py-3 text-right text-slate-600">{item.quantity}</td>
|
|
<td className="py-3 text-right text-slate-600">{item.unitPrice.toFixed(2)} €</td>
|
|
<td className="py-3 text-right font-semibold text-slate-800">{item.total.toFixed(2)} €</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div className="flex justify-end">
|
|
<div className="w-64 space-y-2 text-sm">
|
|
<div className="flex justify-between text-slate-600"><span>Netto</span><span>{doc.subtotal.toFixed(2)} €</span></div>
|
|
<div className="flex justify-between text-slate-600"><span>MwSt (19%)</span><span>{doc.taxAmount.toFixed(2)} €</span></div>
|
|
<div className="flex justify-between text-lg font-bold text-slate-900 pt-2 border-t-2 border-slate-200"><span>Gesamt</span><span>{doc.total.toFixed(2)} €</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
{doc.notes && (
|
|
<div className="mt-6 p-4 bg-slate-50 rounded-xl border border-slate-100">
|
|
<p className="text-xs font-semibold text-slate-500 mb-1">Notizen</p>
|
|
<p className="text-sm text-slate-700 whitespace-pre-wrap">{doc.notes}</p>
|
|
</div>
|
|
)}
|
|
|
|
{doc.signatureData && (
|
|
<div className="mt-6 pt-4 border-t border-slate-200">
|
|
<p className="text-xs text-slate-500 mb-2">Digitale Unterschrift ({new Date(doc.signedAt).toLocaleDateString('de-DE')})</p>
|
|
<img src={doc.signatureData} alt="Unterschrift" className="h-16 border border-slate-200 rounded-lg bg-white" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar Info */}
|
|
<div className="space-y-4">
|
|
<div className="bg-white p-5 rounded-2xl shadow-lg shadow-slate-200/50 border border-slate-100">
|
|
<h3 className="text-sm font-semibold text-slate-700 mb-3">Details</h3>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between"><span className="text-slate-500">Erstellt von</span><span className="font-medium">{doc.createdBy?.firstName} {doc.createdBy?.lastName}</span></div>
|
|
<div className="flex justify-between"><span className="text-slate-500">Typ</span><span className="font-medium">{typeLabels[doc.type]}</span></div>
|
|
<div className="flex justify-between"><span className="text-slate-500">Positionen</span><span className="font-medium">{doc.items?.length}</span></div>
|
|
{doc.signedAt && <div className="flex justify-between"><span className="text-slate-500">Unterschrieben</span><span className="font-medium text-emerald-600">✓</span></div>}
|
|
</div>
|
|
</div>
|
|
{canManage && !['CANCELLED', 'PAID', 'ARCHIVED'].includes(doc.status) && (
|
|
<button onClick={async () => {
|
|
const ok = await confirm({ title: 'Stornieren', message: 'Beleg wirklich stornieren?', danger: true });
|
|
if (ok) updateStatus('CANCELLED');
|
|
}} className="w-full bg-red-50 text-red-600 py-2.5 rounded-xl font-medium hover:bg-red-100 transition text-sm">
|
|
Beleg stornieren
|
|
</button>
|
|
)}
|
|
{doc.status === 'ARCHIVED' && (
|
|
<div className="p-3 bg-slate-50 rounded-xl border border-slate-100 text-center">
|
|
<p className="text-xs text-slate-400 font-medium">Dieser Beleg wurde archiviert.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Signature Modal */}
|
|
{showSignature && (
|
|
<div className="fixed inset-0 bg-slate-900/60 flex items-center justify-center z-50 backdrop-blur-sm p-4">
|
|
<div className="bg-white p-6 rounded-3xl shadow-2xl max-w-lg w-full">
|
|
<h2 className="text-lg font-bold text-slate-900 mb-4">Digitale Unterschrift</h2>
|
|
<p className="text-sm text-slate-500 mb-4">Bitte unterschreiben Sie im Feld unten.</p>
|
|
<canvas ref={canvasRef} width={460} height={200}
|
|
className="w-full border-2 border-slate-300 rounded-xl cursor-crosshair bg-white touch-none"
|
|
onMouseDown={startDraw} onMouseMove={draw} onMouseUp={endDraw} onMouseLeave={endDraw}
|
|
onTouchStart={startDraw} onTouchMove={draw} onTouchEnd={endDraw}
|
|
/>
|
|
<div className="flex justify-between mt-4">
|
|
<button onClick={clearSignature} className="text-sm text-slate-500 hover:text-slate-700 font-medium">Löschen</button>
|
|
<div className="flex gap-3">
|
|
<button onClick={() => setShowSignature(false)} className="px-4 py-2 text-slate-600 font-medium hover:bg-slate-100 rounded-xl transition">Abbrechen</button>
|
|
<button onClick={saveSignature} className="bg-indigo-600 text-white px-6 py-2 rounded-xl font-medium hover:bg-indigo-700 transition">Unterschreiben</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|