root
215 lines
11 KiB
TypeScript
215 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { ArrowLeft, Plus, Trash2, Search } from 'lucide-react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useToast } from '../../components/ToastProvider';
|
|
|
|
const docTypes = [
|
|
{ value: 'QUOTE', label: 'Angebot' },
|
|
{ value: 'ORDER_CONFIRMATION', label: 'Auftragsbestätigung' },
|
|
{ value: 'DELIVERY_NOTE', label: 'Lieferschein' },
|
|
{ value: 'INVOICE', label: 'Rechnung' },
|
|
];
|
|
|
|
export default function NewSalesDocPage() {
|
|
const router = useRouter();
|
|
const { toast } = useToast();
|
|
const [type, setType] = useState('QUOTE');
|
|
const [customerId, setCustomerId] = useState<number | null>(null);
|
|
const [customerSearch, setCustomerSearch] = useState('');
|
|
const [customerResults, setCustomerResults] = useState<any[]>([]);
|
|
const [selectedCustomer, setSelectedCustomer] = useState<any>(null);
|
|
const [notes, setNotes] = useState('');
|
|
const [validUntil, setValidUntil] = useState('');
|
|
const [items, setItems] = useState<any[]>([{ description: '', quantity: 1, unitPrice: 0, productId: null }]);
|
|
const [products, setProducts] = useState<any[]>([]);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/products').then(r => r.json()).then(setProducts).catch(() => {});
|
|
}, []);
|
|
|
|
const searchCustomers = async (q: string) => {
|
|
setCustomerSearch(q);
|
|
if (q.length < 2) { setCustomerResults([]); return; }
|
|
const res = await fetch(`/api/customers/search?q=${encodeURIComponent(q)}`);
|
|
if (res.ok) setCustomerResults(await res.json());
|
|
};
|
|
|
|
const selectCustomer = (c: any) => {
|
|
setSelectedCustomer(c);
|
|
setCustomerId(c.id);
|
|
setCustomerSearch(c.companyName || `${c.firstName} ${c.lastName}`);
|
|
setCustomerResults([]);
|
|
};
|
|
|
|
const updateItem = (idx: number, field: string, value: any) => {
|
|
const newItems = [...items];
|
|
newItems[idx] = { ...newItems[idx], [field]: value };
|
|
// Auto-fill price from product
|
|
if (field === 'productId' && value) {
|
|
const prod = products.find(p => p.id === parseInt(value));
|
|
if (prod) {
|
|
newItems[idx].unitPrice = prod.salePrice;
|
|
newItems[idx].description = prod.name;
|
|
}
|
|
}
|
|
setItems(newItems);
|
|
};
|
|
|
|
const addItem = () => setItems([...items, { description: '', quantity: 1, unitPrice: 0, productId: null }]);
|
|
const removeItem = (idx: number) => setItems(items.filter((_, i) => i !== idx));
|
|
|
|
const subtotal = items.reduce((sum, i) => sum + (i.quantity * i.unitPrice), 0);
|
|
const tax = subtotal * 0.19;
|
|
const total = subtotal + tax;
|
|
|
|
const handleSubmit = async () => {
|
|
if (!customerId) { toast('Bitte Kunde auswählen', 'error'); return; }
|
|
if (items.length === 0 || !items[0].description) { toast('Bitte mindestens eine Position', 'error'); return; }
|
|
setSaving(true);
|
|
|
|
const res = await fetch('/api/sales', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
type, customerId, notes, validUntil: validUntil || null,
|
|
items: items.map(i => ({
|
|
description: i.description, quantity: parseFloat(i.quantity) || 1,
|
|
unitPrice: parseFloat(i.unitPrice) || 0,
|
|
productId: i.productId ? parseInt(i.productId) : null
|
|
}))
|
|
})
|
|
});
|
|
|
|
if (res.ok) {
|
|
const doc = await res.json();
|
|
toast('Beleg erstellt', 'success');
|
|
router.push(`/sales/${doc.id}`);
|
|
} else {
|
|
toast('Fehler beim Erstellen', 'error');
|
|
}
|
|
setSaving(false);
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto space-y-6 pb-12 animate-fade-in-up">
|
|
<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>
|
|
<h1 className="text-2xl font-bold text-slate-900">Neuen Beleg erstellen</h1>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Left: Details */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<div className="bg-white p-6 rounded-2xl shadow-lg shadow-slate-200/50 border border-slate-100">
|
|
<h2 className="font-semibold text-slate-800 mb-4">Belegdaten</h2>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Belegart *</label>
|
|
<select className="w-full border border-slate-300 p-2.5 rounded-xl focus-ring outline-none bg-white" value={type} onChange={e => setType(e.target.value)}>
|
|
{docTypes.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Gültig bis</label>
|
|
<input type="date" className="w-full border border-slate-300 p-2.5 rounded-xl focus-ring outline-none" value={validUntil} onChange={e => setValidUntil(e.target.value)} />
|
|
</div>
|
|
<div className="col-span-2 relative">
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Kunde *</label>
|
|
<div className="relative">
|
|
<Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
|
<input type="text" placeholder="Kunde suchen..." className="w-full pl-9 border border-slate-300 p-2.5 rounded-xl focus-ring outline-none" value={customerSearch} onChange={e => searchCustomers(e.target.value)} />
|
|
</div>
|
|
{customerResults.length > 0 && (
|
|
<div className="absolute z-20 left-0 right-0 mt-1 bg-white border border-slate-200 rounded-xl shadow-xl max-h-48 overflow-y-auto">
|
|
{customerResults.map(c => (
|
|
<button key={c.id} onClick={() => selectCustomer(c)} className="w-full text-left px-4 py-3 hover:bg-indigo-50 transition text-sm">
|
|
<span className="font-semibold">{c.companyName || `${c.firstName} ${c.lastName}`}</span>
|
|
<span className="text-slate-400 ml-2">{c.email}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
{selectedCustomer && <p className="text-xs text-emerald-600 mt-1 font-medium">✓ {selectedCustomer.companyName || `${selectedCustomer.firstName} ${selectedCustomer.lastName}`}</p>}
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Notizen</label>
|
|
<textarea rows={2} className="w-full border border-slate-300 p-2.5 rounded-xl focus-ring outline-none resize-none" value={notes} onChange={e => setNotes(e.target.value)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Positions */}
|
|
<div className="bg-white p-6 rounded-2xl shadow-lg shadow-slate-200/50 border border-slate-100">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="font-semibold text-slate-800">Positionen</h2>
|
|
<button type="button" onClick={addItem} className="text-indigo-600 hover:text-indigo-800 transition flex items-center gap-1 text-sm font-medium">
|
|
<Plus className="w-4 h-4" /> Position
|
|
</button>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{items.map((item, idx) => (
|
|
<div key={idx} className="grid grid-cols-12 gap-2 items-end p-3 bg-slate-50 rounded-xl border border-slate-100">
|
|
<div className="col-span-3">
|
|
<label className="block text-[10px] font-medium text-slate-500 mb-0.5">Produkt</label>
|
|
<select className="w-full border border-slate-300 p-2 rounded-lg text-sm bg-white" value={item.productId || ''} onChange={e => updateItem(idx, 'productId', e.target.value || null)}>
|
|
<option value="">Freitext</option>
|
|
{products.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
|
|
</select>
|
|
</div>
|
|
<div className="col-span-4">
|
|
<label className="block text-[10px] font-medium text-slate-500 mb-0.5">Beschreibung *</label>
|
|
<input type="text" required className="w-full border border-slate-300 p-2 rounded-lg text-sm" value={item.description} onChange={e => updateItem(idx, 'description', e.target.value)} />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-[10px] font-medium text-slate-500 mb-0.5">Menge</label>
|
|
<input type="number" step="0.01" min="0.01" className="w-full border border-slate-300 p-2 rounded-lg text-sm" value={item.quantity} onChange={e => updateItem(idx, 'quantity', e.target.value)} />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-[10px] font-medium text-slate-500 mb-0.5">Einzelpreis €</label>
|
|
<input type="number" step="0.01" className="w-full border border-slate-300 p-2 rounded-lg text-sm" value={item.unitPrice} onChange={e => updateItem(idx, 'unitPrice', e.target.value)} />
|
|
</div>
|
|
<div className="col-span-1 flex justify-center">
|
|
{items.length > 1 && (
|
|
<button type="button" onClick={() => removeItem(idx)} className="p-2 text-slate-400 hover:text-red-600 rounded-lg transition">
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Summary */}
|
|
<div className="space-y-6">
|
|
<div className="bg-white p-6 rounded-2xl shadow-lg shadow-slate-200/50 border border-slate-100 sticky top-6">
|
|
<h2 className="font-semibold text-slate-800 mb-4">Zusammenfassung</h2>
|
|
<div className="space-y-3 text-sm">
|
|
<div className="flex justify-between text-slate-600">
|
|
<span>Netto</span><span className="font-semibold">{subtotal.toFixed(2)} €</span>
|
|
</div>
|
|
<div className="flex justify-between text-slate-600">
|
|
<span>MwSt (19%)</span><span className="font-semibold">{tax.toFixed(2)} €</span>
|
|
</div>
|
|
<div className="flex justify-between text-lg font-bold text-slate-900 pt-3 border-t border-slate-200">
|
|
<span>Gesamt</span><span>{total.toFixed(2)} €</span>
|
|
</div>
|
|
<div className="text-xs text-slate-400">{items.filter(i => i.description).length} Position(en)</div>
|
|
</div>
|
|
<button onClick={handleSubmit} disabled={saving}
|
|
className="w-full mt-6 bg-indigo-600 text-white py-3 rounded-xl font-bold hover:bg-indigo-700 transition disabled:opacity-50">
|
|
{saving ? 'Erstelle...' : 'Beleg erstellen'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|