feat: Initial implementation of Annas Rechnungsmanager
Full-stack German accounting & invoice management web application: - Multi-company management (Mandantenverwaltung) with full CRUD - Invoice creation with dynamic line items and automatic tax calculation - Sequential invoice numbering per company (RE-2024-001 format) - §14 UStG compliant PDF invoice generation via @react-pdf/renderer - Customer management (Kundenverwaltung) per company - Tax reports: quarterly USt-Voranmeldung and monthly revenue overview - Email/password authentication via NextAuth.js v5 - Responsive, modern UI with Tailwind CSS and custom shadcn/ui components - Prisma v5 ORM with MySQL/MariaDB schema + demo seed data Stack: Next.js 14 (App Router) · TypeScript · Prisma/MySQL · NextAuth.js https://claude.ai/code/session_01FN53KKxo5ebrGwqFhxzkT9
This commit is contained in:
Claude
@@ -0,0 +1,213 @@
|
||||
import { auth } from "@/lib/auth";
|
||||
import prisma from "@/lib/prisma";
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { InvoiceStatusBadge } from "@/components/invoice/invoice-status-badge";
|
||||
import { InvoiceActions } from "./invoice-actions";
|
||||
import { formatCurrency, formatDate } from "@/lib/tax";
|
||||
import { ChevronLeft } from "lucide-react";
|
||||
|
||||
export default async function InvoiceDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string; invoiceId: string }>;
|
||||
}) {
|
||||
const { id, invoiceId } = await params;
|
||||
const session = await auth();
|
||||
|
||||
const invoice = await prisma.invoice.findFirst({
|
||||
where: { id: invoiceId, companyId: id, company: { userId: session!.user!.id! } },
|
||||
include: {
|
||||
items: { orderBy: { position: "asc" } },
|
||||
customer: true,
|
||||
company: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!invoice) notFound();
|
||||
|
||||
// Group items by tax rate for totals block
|
||||
const taxGroups = invoice.items.reduce(
|
||||
(acc, item) => {
|
||||
const rate = Number(item.taxRate);
|
||||
if (!acc[rate]) acc[rate] = { net: 0, tax: 0 };
|
||||
acc[rate].net += Number(item.netAmount);
|
||||
acc[rate].tax += Number(item.taxAmount);
|
||||
return acc;
|
||||
},
|
||||
{} as Record<number, { net: number; tax: number }>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Link
|
||||
href={`/companies/${id}/invoices`}
|
||||
className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" /> Zurück zu Rechnungen
|
||||
</Link>
|
||||
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<h1 className="text-2xl font-bold text-gray-900">{invoice.number}</h1>
|
||||
<InvoiceStatusBadge status={invoice.status} />
|
||||
</div>
|
||||
<p className="text-gray-500">
|
||||
{invoice.customer.name} · {formatDate(invoice.issueDate)}
|
||||
</p>
|
||||
</div>
|
||||
<InvoiceActions invoice={{ id: invoice.id, status: invoice.status, companyId: id }} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Invoice document preview */}
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
{/* Sender & Recipient */}
|
||||
<div className="grid grid-cols-2 gap-8 mb-8">
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Absender</p>
|
||||
<p className="font-semibold text-gray-900">{invoice.company.name}</p>
|
||||
{invoice.company.legalForm && <p className="text-sm text-gray-600">{invoice.company.legalForm}</p>}
|
||||
<p className="text-sm text-gray-600">{invoice.company.address}</p>
|
||||
<p className="text-sm text-gray-600">{invoice.company.zip} {invoice.company.city}</p>
|
||||
{invoice.company.taxId && (
|
||||
<p className="text-xs text-gray-500 mt-1">St.-Nr.: {invoice.company.taxId}</p>
|
||||
)}
|
||||
{invoice.company.vatId && (
|
||||
<p className="text-xs text-gray-500">USt-IdNr.: {invoice.company.vatId}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Rechnungsempfänger</p>
|
||||
<p className="font-semibold text-gray-900">{invoice.customer.name}</p>
|
||||
<p className="text-sm text-gray-600">{invoice.customer.address}</p>
|
||||
<p className="text-sm text-gray-600">{invoice.customer.zip} {invoice.customer.city}</p>
|
||||
{invoice.customer.vatId && (
|
||||
<p className="text-xs text-gray-500 mt-1">USt-IdNr.: {invoice.customer.vatId}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-8 p-4 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Rechnungsnummer</p>
|
||||
<p className="text-sm font-semibold text-gray-900">{invoice.number}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Rechnungsdatum</p>
|
||||
<p className="text-sm font-medium text-gray-900">{formatDate(invoice.issueDate)}</p>
|
||||
</div>
|
||||
{invoice.deliveryDate && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Leistungsdatum</p>
|
||||
<p className="text-sm font-medium text-gray-900">{formatDate(invoice.deliveryDate)}</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Fällig am</p>
|
||||
<p className="text-sm font-medium text-gray-900">{formatDate(invoice.dueDate)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Items table */}
|
||||
<div className="border border-gray-200 rounded-lg overflow-hidden mb-6">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200">
|
||||
<th className="text-left px-4 py-2.5 font-medium text-gray-600 w-8">#</th>
|
||||
<th className="text-left px-4 py-2.5 font-medium text-gray-600">Beschreibung</th>
|
||||
<th className="text-right px-4 py-2.5 font-medium text-gray-600">Menge</th>
|
||||
<th className="text-right px-4 py-2.5 font-medium text-gray-600">EP (netto)</th>
|
||||
<th className="text-right px-4 py-2.5 font-medium text-gray-600">MwSt.</th>
|
||||
<th className="text-right px-4 py-2.5 font-medium text-gray-600">Betrag (brutto)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{invoice.items.map((item) => (
|
||||
<tr key={item.id} className="hover:bg-gray-50">
|
||||
<td className="px-4 py-3 text-gray-500">{item.position}</td>
|
||||
<td className="px-4 py-3 text-gray-900">{item.description}</td>
|
||||
<td className="px-4 py-3 text-right text-gray-700">
|
||||
{Number(item.quantity)} {item.unit && <span className="text-gray-500">{item.unit}</span>}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-gray-700">{formatCurrency(Number(item.unitPrice))}</td>
|
||||
<td className="px-4 py-3 text-right text-gray-700">{Number(item.taxRate)}%</td>
|
||||
<td className="px-4 py-3 text-right font-medium text-gray-900">{formatCurrency(Number(item.grossAmount))}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Totals */}
|
||||
<div className="flex justify-end">
|
||||
<div className="w-72 space-y-1.5">
|
||||
<div className="flex justify-between text-sm text-gray-600">
|
||||
<span>Nettobetrag</span>
|
||||
<span>{formatCurrency(Number(invoice.netTotal))}</span>
|
||||
</div>
|
||||
{Object.entries(taxGroups).map(([rate, { net, tax }]) => (
|
||||
<div key={rate} className="flex justify-between text-sm text-gray-600">
|
||||
<span>MwSt. {rate}% auf {formatCurrency(net)}</span>
|
||||
<span>{formatCurrency(tax)}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-between text-base font-bold text-gray-900 border-t border-gray-300 pt-2">
|
||||
<span>Gesamtbetrag (brutto)</span>
|
||||
<span>{formatCurrency(Number(invoice.grossTotal))}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{invoice.notes && (
|
||||
<div className="mt-6 pt-4 border-t border-gray-200">
|
||||
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Hinweise</p>
|
||||
<p className="text-sm text-gray-700 whitespace-pre-wrap">{invoice.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bank details */}
|
||||
{invoice.company.bankIban && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-100">
|
||||
<p className="text-xs text-gray-500">
|
||||
Bankverbindung: {invoice.company.bankName && `${invoice.company.bankName} · `}
|
||||
IBAN: {invoice.company.bankIban}
|
||||
{invoice.company.bankBic && ` · BIC: ${invoice.company.bankBic}`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">Zusammenfassung</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Netto</p>
|
||||
<p className="font-medium text-gray-900">{formatCurrency(Number(invoice.netTotal))}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">MwSt.</p>
|
||||
<p className="font-medium text-gray-900">{formatCurrency(Number(invoice.taxTotal))}</p>
|
||||
</div>
|
||||
<div className="border-t border-gray-200 pt-2">
|
||||
<p className="text-xs text-gray-500">Brutto</p>
|
||||
<p className="text-lg font-bold text-gray-900">{formatCurrency(Number(invoice.grossTotal))}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user