Claude
44e79e657f
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
84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { signOut } from "next-auth/react";
|
|
import {
|
|
Calculator,
|
|
Building2,
|
|
FileText,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
ChevronRight,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface NavItem {
|
|
label: string;
|
|
href: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{ label: "Dashboard", href: "/", icon: <LayoutDashboard className="h-4 w-4" /> },
|
|
{ label: "Mandanten", href: "/companies", icon: <Building2 className="h-4 w-4" /> },
|
|
];
|
|
|
|
export function Sidebar({ userName }: { userName?: string | null }) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<aside className="w-60 shrink-0 flex flex-col bg-white border-r border-gray-200 min-h-screen">
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-3 px-4 py-5 border-b border-gray-200">
|
|
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-600">
|
|
<Calculator className="w-4 h-4 text-white" />
|
|
</div>
|
|
<span className="font-semibold text-gray-900 text-sm leading-tight">
|
|
Rechnungs-<br />manager
|
|
</span>
|
|
</div>
|
|
|
|
{/* Nav */}
|
|
<nav className="flex-1 px-3 py-4 space-y-0.5">
|
|
{navItems.map((item) => {
|
|
const active = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
|
|
active
|
|
? "bg-indigo-50 text-indigo-700"
|
|
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
|
)}
|
|
>
|
|
{item.icon}
|
|
{item.label}
|
|
{active && <ChevronRight className="ml-auto h-3 w-3 text-indigo-400" />}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* User */}
|
|
<div className="px-3 py-4 border-t border-gray-200">
|
|
{userName && (
|
|
<p className="text-xs text-gray-500 px-3 mb-2 truncate">{userName}</p>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-start text-gray-600 hover:text-red-600 hover:bg-red-50"
|
|
onClick={() => signOut({ callbackUrl: "/login" })}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Abmelden
|
|
</Button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|