root
300 lines
14 KiB
TypeScript
300 lines
14 KiB
TypeScript
// /opt/erp-system/app/billing/page.tsx
|
|
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { FileText, CheckCircle, Clock, User as UserIcon, Printer, Search } from 'lucide-react';
|
|
import { jsPDF } from 'jspdf';
|
|
import autoTable from 'jspdf-autotable';
|
|
import { useToast } from '../components/ToastProvider';
|
|
|
|
export default function T2medBillingPage() {
|
|
const [groups, setGroups] = useState<any[]>([]);
|
|
const [settings, setSettings] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const { toast } = useToast();
|
|
|
|
// T2med Split-Screen States
|
|
const [activeCustomer, setActiveCustomer] = useState<any>(null);
|
|
const [draftEntries, setDraftEntries] = useState<any[]>([]);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
const [billingRes, settingsRes] = await Promise.all([
|
|
fetch('/api/billing'),
|
|
fetch('/api/settings')
|
|
]);
|
|
|
|
if (billingRes.ok && settingsRes.ok) {
|
|
const entries = await billingRes.json();
|
|
const loadedSettings = await settingsRes.json();
|
|
setSettings(loadedSettings);
|
|
|
|
// Gruppieren nach Kunde
|
|
const groupedData = entries.reduce((acc: any, entry: any) => {
|
|
const cid = entry.ticket.customerId;
|
|
if (!acc[cid]) {
|
|
acc[cid] = { customer: entry.ticket.customer, entries: [], totalMins: 0 };
|
|
}
|
|
acc[cid].entries.push(entry);
|
|
acc[cid].totalMins += entry.durationMins;
|
|
return acc;
|
|
}, {});
|
|
|
|
setGroups(Object.values(groupedData));
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
// Aktiviert den Kunden für die rechte Bildschirmhälfte
|
|
const selectCustomer = (group: any) => {
|
|
setActiveCustomer(group.customer);
|
|
// Erstelle eine tiefe Kopie der Einträge für das Inline-Editing
|
|
setDraftEntries(JSON.parse(JSON.stringify(group.entries)));
|
|
};
|
|
|
|
// Inline-Editing im Rechnungsblatt
|
|
const handleUpdateDraft = async (id: number, field: string, value: any) => {
|
|
const updated = draftEntries.map(e => e.id === id ? { ...e, [field]: value } : e);
|
|
setDraftEntries(updated);
|
|
|
|
// Speichere die Änderung sofort im Hintergrund in der DB ab (T2med-Feeling)
|
|
const entry = updated.find(e => e.id === id);
|
|
await fetch(`/api/time-entries/${id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ description: entry.description, durationMins: entry.durationMins })
|
|
});
|
|
|
|
// Aktualisiere die linke Liste leise mit den neuen Summen
|
|
fetchData();
|
|
};
|
|
|
|
const markAsBilled = async () => {
|
|
const entryIds = draftEntries.map(e => e.id);
|
|
const res = await fetch('/api/billing', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ entryIds })
|
|
});
|
|
|
|
if (res.ok) {
|
|
setActiveCustomer(null);
|
|
setDraftEntries([]);
|
|
fetchData();
|
|
} else {
|
|
toast('Fehler beim Abschließen.', 'error');
|
|
}
|
|
};
|
|
|
|
const generatePDF = () => {
|
|
if (!settings) return;
|
|
const doc = new jsPDF();
|
|
const dateStr = new Date().toLocaleDateString('de-DE');
|
|
const yyyy = new Date().getFullYear();
|
|
const mm = String(new Date().getMonth() + 1).padStart(2, '0');
|
|
const seq = String(Date.now()).slice(-5);
|
|
const invNo = `RE-${yyyy}${mm}-${seq}`;
|
|
|
|
doc.setFontSize(20);
|
|
doc.text(settings.companyName || "ERP SYSTEM", 14, 20);
|
|
doc.setFontSize(9);
|
|
doc.text(settings.companyInfo || "", 14, 30);
|
|
|
|
doc.setFontSize(11);
|
|
doc.text("Rechnung an:", 14, 55);
|
|
doc.setFont("helvetica", "bold");
|
|
doc.text(activeCustomer.companyName || `${activeCustomer.firstName} ${activeCustomer.lastName}`, 14, 62);
|
|
doc.setFont("helvetica", "normal");
|
|
doc.text(`${activeCustomer.address || ''}\n${activeCustomer.zipCode || ''} ${activeCustomer.city || ''}`, 14, 68);
|
|
|
|
doc.text(`Datum: ${dateStr}`, 140, 62);
|
|
doc.text(`Rechnungs-Nr: ${invNo}`, 140, 68);
|
|
|
|
const tableData = draftEntries.map(e => [
|
|
new Date(e.createdAt).toLocaleDateString('de-DE'),
|
|
`${e.ticket.title}\n${e.description}`,
|
|
(e.durationMins / 60).toFixed(2) + " h",
|
|
settings.hourlyRate.toFixed(2) + " €",
|
|
((e.durationMins / 60) * settings.hourlyRate).toFixed(2) + " €"
|
|
]);
|
|
|
|
autoTable(doc, {
|
|
startY: 90,
|
|
head: [['Datum', 'Leistung', 'Menge', 'Einzelpreis', 'Gesamt']],
|
|
body: tableData,
|
|
theme: 'striped',
|
|
headStyles: { fillColor: [79, 70, 229] },
|
|
styles: { cellPadding: 4, fontSize: 9 }
|
|
});
|
|
|
|
const netTotal = draftEntries.reduce((sum, e) => sum + (e.durationMins / 60 * settings.hourlyRate), 0);
|
|
const tax = netTotal * (settings.taxRate / 100);
|
|
const grossTotal = netTotal + tax;
|
|
|
|
const finalY = (doc as any).lastAutoTable.finalY + 10;
|
|
doc.text(`Netto Gesamt:`, 140, finalY);
|
|
doc.text(`${netTotal.toFixed(2)} €`, 180, finalY, { align: 'right' });
|
|
doc.text(`USt. ${settings.taxRate}%:`, 140, finalY + 6);
|
|
doc.text(`${tax.toFixed(2)} €`, 180, finalY + 6, { align: 'right' });
|
|
doc.setFont("helvetica", "bold");
|
|
doc.text(`Rechnungsbetrag:`, 140, finalY + 14);
|
|
doc.text(`${grossTotal.toFixed(2)} €`, 180, finalY + 14, { align: 'right' });
|
|
|
|
doc.save(`Rechnung_${invNo}.pdf`);
|
|
};
|
|
|
|
const filteredGroups = groups.filter(g => {
|
|
const name = g.customer.companyName || `${g.customer.firstName} ${g.customer.lastName}`;
|
|
return name.toLowerCase().includes(searchTerm.toLowerCase());
|
|
});
|
|
|
|
if (loading && groups.length === 0) return <div className="p-8 font-medium text-slate-500 animate-pulse">Lade Abrechnungs-Modul...</div>;
|
|
|
|
return (
|
|
<div className="flex h-[calc(100vh-8rem)] -m-8 bg-white border-t border-slate-200 animate-fade-in-up">
|
|
|
|
{/* LINKE SPALTE: Kunden-Liste (T2med-Style) */}
|
|
<div className="w-1/3 min-w-[320px] max-w-sm border-r border-slate-200 bg-slate-50/50 flex flex-col h-full shadow-[4px_0_24px_rgba(0,0,0,0.02)] z-10">
|
|
<div className="p-4 border-b border-slate-200 bg-white shadow-sm z-10">
|
|
<h2 className="text-lg font-bold text-slate-800 flex items-center gap-2 mb-3">
|
|
<FileText className="w-5 h-5 text-indigo-600" /> Abrechnungslauf
|
|
</h2>
|
|
<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..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-9 pr-3 py-2 bg-slate-100/80 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-indigo-400 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto divide-y divide-slate-100">
|
|
{filteredGroups.length === 0 ? (
|
|
<div className="p-6 text-center text-slate-500 text-sm">Keine offenen Positionen.</div>
|
|
) : (
|
|
filteredGroups.map((group, idx) => {
|
|
const name = group.customer.companyName || `${group.customer.firstName} ${group.customer.lastName}`;
|
|
const isActive = activeCustomer?.id === group.customer.id;
|
|
|
|
return (
|
|
<button
|
|
key={idx}
|
|
onClick={() => selectCustomer(group)}
|
|
className={`w-full text-left p-4 transition-all border-l-4 ${isActive ? 'bg-indigo-50 border-indigo-600' : 'bg-transparent border-transparent hover:bg-slate-100'}`}
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
<span className={`font-semibold ${isActive ? 'text-indigo-900' : 'text-slate-800'}`}>{name}</span>
|
|
<span className="text-xs font-bold text-slate-500 bg-white px-2 py-1 rounded-md shadow-sm border border-slate-200">
|
|
{group.entries.length} Pos.
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 mt-2 text-sm text-slate-500">
|
|
<span className="flex items-center gap-1"><Clock className="w-3.5 h-3.5" /> {(group.totalMins / 60).toFixed(1)} h</span>
|
|
{settings && (
|
|
<span className="font-mono text-indigo-600 font-medium">{((group.totalMins / 60) * settings.hourlyRate).toFixed(2)} €</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* RECHTE SPALTE: Das aktive Rechnungsblatt */}
|
|
<div className="flex-1 bg-slate-100/50 flex flex-col h-full overflow-hidden relative">
|
|
{!activeCustomer ? (
|
|
<div className="flex-1 flex flex-col items-center justify-center text-slate-400 animate-fade-in-up">
|
|
<UserIcon className="w-16 h-16 mb-4 opacity-20" />
|
|
<p className="font-medium text-lg text-slate-500">Bitte wähle links einen Kunden aus</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 overflow-y-auto p-8 relative">
|
|
|
|
{/* Action Bar (Oben rechts, sticky) */}
|
|
<div className="absolute top-8 right-8 flex gap-3 z-10">
|
|
<button onClick={generatePDF} className="bg-white border border-slate-200 text-indigo-600 px-4 py-2 rounded-xl font-bold shadow-sm hover:shadow-md hover:border-indigo-200 transition-all flex items-center gap-2 text-sm hover-lift">
|
|
<Printer className="w-4 h-4" /> PDF erstellen
|
|
</button>
|
|
<button onClick={markAsBilled} className="bg-emerald-600 text-white px-5 py-2 rounded-xl font-bold shadow-lg shadow-emerald-600/20 hover:bg-emerald-700 transition-all flex items-center gap-2 text-sm hover-lift">
|
|
<CheckCircle className="w-4 h-4" /> Als erledigt markieren
|
|
</button>
|
|
</div>
|
|
|
|
{/* Das "Papier"-Dokument */}
|
|
<div className="bg-white max-w-4xl mx-auto min-h-[800px] shadow-2xl shadow-slate-300/40 border border-slate-100 rounded-sm p-12 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
|
<div className="border-b border-slate-200 pb-8 mb-8 flex justify-between items-start">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-900 mb-2">Rechnungsentwurf</h1>
|
|
<p className="text-lg text-slate-600 font-medium">{activeCustomer.companyName || `${activeCustomer.firstName} ${activeCustomer.lastName}`}</p>
|
|
<p className="text-sm text-slate-500">{activeCustomer.address || 'Keine Adresse hinterlegt'}</p>
|
|
</div>
|
|
<div className="text-right text-slate-500 text-sm">
|
|
<p>Stundensatz: <strong className="text-slate-800">{settings?.hourlyRate} €</strong></p>
|
|
<p>MwSt: <strong className="text-slate-800">{settings?.taxRate} %</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* T2med-Style Inline-Editing Tabelle */}
|
|
<div className="w-full">
|
|
<div className="grid grid-cols-12 gap-4 pb-3 border-b-2 border-slate-800 font-bold text-slate-700 text-sm">
|
|
<div className="col-span-2">Datum</div>
|
|
<div className="col-span-6">Leistung</div>
|
|
<div className="col-span-2 text-right">Minuten</div>
|
|
<div className="col-span-2 text-right">Betrag</div>
|
|
</div>
|
|
|
|
<div className="divide-y divide-slate-100">
|
|
{draftEntries.map((entry) => (
|
|
<div key={entry.id} className="grid grid-cols-12 gap-4 py-3 group hover:bg-indigo-50/50 transition-colors -mx-4 px-4 rounded-lg">
|
|
<div className="col-span-2 text-sm text-slate-500 pt-1.5">
|
|
{new Date(entry.createdAt).toLocaleDateString('de-DE')}
|
|
</div>
|
|
<div className="col-span-6">
|
|
<p className="text-xs text-indigo-500 font-bold mb-1">Ticket #{entry.ticket.id}</p>
|
|
<textarea
|
|
className="w-full bg-transparent border border-transparent group-hover:border-slate-200 focus:bg-white focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 rounded p-1.5 text-sm text-slate-800 outline-none resize-none transition"
|
|
rows={2}
|
|
value={entry.description}
|
|
onChange={(e) => handleUpdateDraft(entry.id, 'description', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="col-span-2 text-right pt-1.5">
|
|
<input
|
|
type="number"
|
|
step="15"
|
|
className="w-16 text-right bg-transparent border border-transparent group-hover:border-slate-200 focus:bg-white focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 rounded p-1 text-sm text-slate-800 font-mono outline-none transition inline-block"
|
|
value={entry.durationMins}
|
|
onChange={(e) => handleUpdateDraft(entry.id, 'durationMins', parseInt(e.target.value))}
|
|
/>
|
|
</div>
|
|
<div className="col-span-2 text-right pt-2 font-mono text-slate-700 font-medium">
|
|
{settings ? ((entry.durationMins / 60) * settings.hourlyRate).toFixed(2) : '0.00'} €
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-8 pt-4 border-t-2 border-slate-800 grid grid-cols-12 gap-4">
|
|
<div className="col-span-10 text-right font-bold text-slate-700">Netto Gesamt:</div>
|
|
<div className="col-span-2 text-right font-bold text-slate-900 font-mono text-lg">
|
|
{settings ? draftEntries.reduce((sum, e) => sum + (e.durationMins / 60 * settings.hourlyRate), 0).toFixed(2) : '0.00'} €
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|