ADD: added first working version

app/app.css

@@ -1,17 +1,28 @@
 @import "tailwindcss";
 
 :root {
-  --background: #f9fafb;
+  --background: #f8fafc;
-  --foreground: #111827;
+  --foreground: #0f172a;
+  --sidebar-width: 16rem;
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {
   box-sizing: border-box;
 }
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.3s ease-out forwards;
+}

app/components/layout/sidebar.tsx

@@ -1,13 +1,6 @@
 import { Link, Form, useLocation } from "react-router";
-import {
+import { Calculator, Building2, LayoutDashboard, LogOut, ChevronRight } from "lucide-react";
-  Calculator,
-  Building2,
-  LayoutDashboard,
-  LogOut,
-  ChevronRight,
-} from "lucide-react";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
 
 interface NavItem {
   label: string;
@@ -20,57 +13,91 @@ const navItems: NavItem[] = [
   { label: "Mandanten", href: "/companies", icon: <Building2 className="h-4 w-4" /> },
 ];
 
+function getInitials(name?: string | null): string {
+  if (!name) return "?";
+  return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+}
+
 export function Sidebar({ userName }: { userName?: string | null }) {
   const location = useLocation();
   const pathname = location.pathname;
 
   return (
-    <aside className="w-60 shrink-0 flex flex-col bg-white border-r border-gray-200 min-h-screen">
+    <aside
-      <div className="flex items-center gap-3 px-4 py-5 border-b border-gray-200">
+      className="fixed inset-y-0 left-0 z-20 flex flex-col"
-        <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-600">
+      style={{ width: "var(--sidebar-width)", background: "#0f172a", borderRight: "1px solid #1e293b" }}
+    >
+      {/* Logo */}
+      <div className="flex items-center gap-3 px-5 py-5" style={{ borderBottom: "1px solid #1e293b" }}>
+        <div
+          className="flex items-center justify-center w-9 h-9 rounded-xl"
+          style={{ background: "linear-gradient(135deg, #6366f1, #7c3aed)", boxShadow: "0 4px 12px rgba(99,102,241,0.3)" }}
+        >
           <Calculator className="w-4 h-4 text-white" />
         </div>
-        <span className="font-semibold text-gray-900 text-sm leading-tight">
+        <div>
-          Rechnungs-<br />manager
+          <span className="font-semibold text-sm leading-tight block" style={{ color: "#f1f5f9" }}>
+            Rechnungsmanager
           </span>
+          <span className="text-xs" style={{ color: "#475569" }}>Buchhaltung</span>
+        </div>
       </div>
 
-      <nav className="flex-1 px-3 py-4 space-y-0.5">
+      {/* Navigation */}
+      <nav className="flex-1 px-3 py-5" style={{ overflowY: "auto" }}>
+        <p className="text-xs font-semibold uppercase tracking-wider px-3 mb-2" style={{ color: "#334155" }}>
+          Navigation
+        </p>
         {navItems.map((item) => {
-          const active = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
+          const active =
+            pathname === item.href ||
+            (item.href !== "/" && pathname.startsWith(item.href));
           return (
             <Link
               key={item.href}
               to={item.href}
               className={cn(
-                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors mb-0.5",
-                active
-                  ? "bg-indigo-50 text-indigo-700"
-                  : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
               )}
+              style={
+                active
+                  ? { background: "#4f46e5", color: "#ffffff" }
+                  : { color: "#94a3b8" }
+              }
             >
               {item.icon}
               {item.label}
-              {active && <ChevronRight className="ml-auto h-3 w-3 text-indigo-400" />}
+              {active && <ChevronRight className="ml-auto h-3.5 w-3.5" style={{ color: "#a5b4fc" }} />}
             </Link>
           );
         })}
       </nav>
 
-      <div className="px-3 py-4 border-t border-gray-200">
+      {/* User section */}
+      <div className="px-3 py-4" style={{ borderTop: "1px solid #1e293b" }}>
+        <div
+          className="flex items-center gap-3 px-3 py-2.5 rounded-lg mb-2"
+          style={{ background: "#1e293b" }}
+        >
+          <div
+            className="flex items-center justify-center w-7 h-7 rounded-full text-white text-xs font-bold shrink-0"
+            style={{ background: "linear-gradient(135deg, #818cf8, #7c3aed)" }}
+          >
+            {getInitials(userName)}
+          </div>
           {userName && (
-          <p className="text-xs text-gray-500 px-3 mb-2 truncate">{userName}</p>
+            <p className="text-sm font-medium truncate" style={{ color: "#cbd5e1" }}>{userName}</p>
           )}
+        </div>
         <Form method="post" action="/logout">
-          <Button
+          <button
             type="submit"
-            variant="ghost"
+            className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium"
-            size="sm"
+            style={{ color: "#64748b" }}
-            className="w-full justify-start text-gray-600 hover:text-red-600 hover:bg-red-50"
           >
             <LogOut className="h-4 w-4" />
             Abmelden
-          </Button>
+          </button>
         </Form>
       </div>
     </aside>

app/components/layout/topbar.tsx

@@ -0,0 +1,110 @@
+import { useMatches, Link } from "react-router";
+import { ChevronRight } from "lucide-react";
+
+interface Breadcrumb {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbHandle {
+  breadcrumbs: (data: unknown) => Breadcrumb[];
+}
+
+function isBreadcrumbHandle(handle: unknown): handle is BreadcrumbHandle {
+  return (
+    typeof handle === "object" &&
+    handle !== null &&
+    "breadcrumbs" in handle &&
+    typeof (handle as BreadcrumbHandle).breadcrumbs === "function"
+  );
+}
+
+function getInitials(name?: string | null): string {
+  if (!name) return "?";
+  return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+}
+
+export function Topbar({ userName }: { userName?: string | null }) {
+  const matches = useMatches();
+
+  const activeMatch = [...matches].reverse().find((m) => isBreadcrumbHandle(m.handle));
+  const breadcrumbs: Breadcrumb[] =
+    activeMatch && isBreadcrumbHandle(activeMatch.handle)
+      ? activeMatch.handle.breadcrumbs(activeMatch.data)
+      : [];
+
+  return (
+    <header
+      className="sticky top-0 z-10 shrink-0"
+      style={{
+        height: "3.5rem",
+        background: "#ffffff",
+        borderBottom: "1px solid #e2e8f0",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingLeft: "1.5rem",
+        paddingRight: "1.5rem",
+      }}
+    >
+      {/* Breadcrumbs */}
+      <nav style={{ display: "flex", alignItems: "center", gap: "0.25rem", fontSize: "0.875rem", minWidth: 0 }}>
+        {breadcrumbs.length === 0 ? (
+          <span style={{ color: "#94a3b8" }}>Rechnungsmanager</span>
+        ) : (
+          breadcrumbs.map((crumb, i) => {
+            const isLast = i === breadcrumbs.length - 1;
+            return (
+              <span key={i} style={{ display: "flex", alignItems: "center", gap: "0.25rem", minWidth: 0 }}>
+                {i > 0 && <ChevronRight className="h-3.5 w-3.5" style={{ color: "#cbd5e1", flexShrink: 0 }} />}
+                {isLast || !crumb.href ? (
+                  <span
+                    style={{
+                      fontWeight: isLast ? 500 : 400,
+                      color: isLast ? "#0f172a" : "#64748b",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {crumb.label}
+                  </span>
+                ) : (
+                  <Link
+                    to={crumb.href}
+                    style={{ color: "#64748b", textDecoration: "none", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+                  >
+                    {crumb.label}
+                  </Link>
+                )}
+              </span>
+            );
+          })
+        )}
+      </nav>
+
+      {/* User */}
+      {userName && (
+        <div style={{ display: "flex", alignItems: "center", gap: "0.625rem", marginLeft: "1rem", flexShrink: 0 }}>
+          <span style={{ fontSize: "0.875rem", color: "#64748b" }}>{userName}</span>
+          <div
+            style={{
+              width: "2rem",
+              height: "2rem",
+              borderRadius: "9999px",
+              background: "linear-gradient(135deg, #818cf8, #7c3aed)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#ffffff",
+              fontSize: "0.75rem",
+              fontWeight: 700,
+            }}
+          >
+            {getInitials(userName)}
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}

app/root.tsx

@@ -8,6 +8,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Annas Rechnungsmanager</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
         <Meta />
         <Links />
       </head>

app/routes/companies.$id.customers.tsx

@@ -1,5 +1,13 @@
 import { useState } from "react";
-import { Link, useLoaderData, useParams, useRevalidator } from "react-router";
+import { Link, useLoaderData, useRevalidator } from "react-router";
+
+export const handle = {
+  breadcrumbs: (data: { companyId: string; companyName: string }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.companyName, href: `/companies/${data.companyId}` },
+    { label: "Kunden" },
+  ],
+};
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { Button } from "@/components/ui/button";
@@ -47,7 +55,7 @@ export async function loader({ request, params }: { request: Request; params: {
     orderBy: { name: "asc" },
   });
 
-  return { customers, companyId: params.id };
+  return { customers, companyId: params.id, companyName: company.name };
 }
 
 function CustomerForm({

app/routes/companies.$id.edit.tsx

@@ -1,4 +1,12 @@
 import { Link, useLoaderData, useNavigate } from "react-router";
+
+export const handle = {
+  breadcrumbs: (data: { company: { id: string; name: string } }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.company.name, href: `/companies/${data.company.id}` },
+    { label: "Bearbeiten" },
+  ],
+};
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { CompanyForm } from "@/components/company/company-form";

app/routes/companies.$id.invoices.$invoiceId.tsx

@@ -1,4 +1,13 @@
 import { Link, useLoaderData, useNavigate, useRevalidator } from "react-router";
+
+export const handle = {
+  breadcrumbs: (data: { invoice: { companyId: string; number: string; company: { name: string } } }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.invoice.company.name, href: `/companies/${data.invoice.companyId}` },
+    { label: "Rechnungen", href: `/companies/${data.invoice.companyId}/invoices` },
+    { label: data.invoice.number },
+  ],
+};
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { useState } from "react";

app/routes/companies.$id.invoices.new.tsx

@@ -1,4 +1,13 @@
 import { Link, useLoaderData, useNavigate, redirect } from "react-router";
+
+export const handle = {
+  breadcrumbs: (data: { company: { id: string; name: string } }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.company.name, href: `/companies/${data.company.id}` },
+    { label: "Rechnungen", href: `/companies/${data.company.id}/invoices` },
+    { label: "Neue Rechnung" },
+  ],
+};
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

app/routes/companies.$id.invoices.tsx

@@ -1,4 +1,12 @@
 import { Link, useLoaderData } from "react-router";
+
+export const handle = {
+  breadcrumbs: (data: { company: { id: string; name: string } }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.company.name, href: `/companies/${data.company.id}` },
+    { label: "Rechnungen" },
+  ],
+};
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { Button } from "@/components/ui/button";

app/routes/companies.$id.reports.tsx

@@ -1,9 +1,29 @@
 import { useState, useEffect } from "react";
-import { Link, useParams } from "react-router";
+import { Link, useLoaderData } from "react-router";
+import { requireUser } from "@/session.server";
+import prisma from "@/lib/prisma";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { formatCurrency } from "@/lib/tax";
 import { ChevronLeft, TrendingUp, BarChart3 } from "lucide-react";
 
+export const handle = {
+  breadcrumbs: (data: { companyId: string; companyName: string }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.companyName, href: `/companies/${data.companyId}` },
+    { label: "Berichte" },
+  ],
+};
+
+export async function loader({ request, params }: { request: Request; params: { id: string } }) {
+  const user = await requireUser(request);
+  const company = await prisma.company.findFirst({
+    where: { id: params.id, userId: user.id },
+    select: { id: true, name: true },
+  });
+  if (!company) throw new Response("Not Found", { status: 404 });
+  return { companyId: company.id, companyName: company.name };
+}
+
 const MONTHS = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
 
 interface TaxGroup {
@@ -42,7 +62,7 @@ interface ReportData {
 }
 
 export default function ReportsPage() {
-  const { id: companyId } = useParams<{ id: string }>();
+  const { companyId } = useLoaderData<typeof loader>();
   const [year, setYear] = useState(new Date().getFullYear());
   const [data, setData] = useState<ReportData | null>(null);
   const [loading, setLoading] = useState(true);

app/routes/companies.$id.tsx

@@ -11,6 +11,13 @@ import {
 } from "lucide-react";
 import { InvoiceStatus } from "@prisma/client";
 
+export const handle = {
+  breadcrumbs: (data: { company: { id: string; name: string } }) => [
+    { label: "Mandanten", href: "/companies" },
+    { label: data.company.name },
+  ],
+};
+
 const statusLabels: Record<InvoiceStatus, string> = {
   DRAFT: "Entwurf",
   SENT: "Versendet",

app/routes/companies.new.tsx

@@ -1,4 +1,11 @@
 import { Link, useNavigate } from "react-router";
+
+export const handle = {
+  breadcrumbs: () => [
+    { label: "Mandanten", href: "/companies" },
+    { label: "Neuer Mandant" },
+  ],
+};
 import { CompanyForm } from "@/components/company/company-form";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ChevronLeft } from "lucide-react";

app/routes/companies.tsx

@@ -1,29 +1,76 @@
 import { Link, useLoaderData } from "react-router";
+import { useState } from "react";
 import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
-import { Building2, Plus, FileText, Users } from "lucide-react";
+import { formatCurrency, formatDate } from "@/lib/tax";
+import {
+  Building2, Plus, FileText, Users, X, Edit, Receipt,
+  Mail, Phone, CreditCard, ChevronRight,
+} from "lucide-react";
+import { InvoiceStatus } from "@prisma/client";
+
+export const handle = {
+  breadcrumbs: () => [{ label: "Mandanten" }],
+};
+
+const statusLabels: Record<InvoiceStatus, string> = {
+  DRAFT: "Entwurf",
+  SENT: "Versendet",
+  PAID: "Bezahlt",
+  CANCELLED: "Storniert",
+};
+
+const statusVariants: Record<
+  InvoiceStatus,
+  "secondary" | "default" | "success" | "destructive" | "warning"
+> = {
+  DRAFT: "secondary",
+  SENT: "warning",
+  PAID: "success",
+  CANCELLED: "destructive",
+};
 
 export async function loader({ request }: { request: Request }) {
   const user = await requireUser(request);
   const companies = await prisma.company.findMany({
     where: { userId: user.id },
-    include: { _count: { select: { invoices: true, customers: true } } },
+    include: {
+      _count: { select: { invoices: true, customers: true } },
+      invoices: {
+        include: { customer: { select: { name: true } } },
+        orderBy: { issueDate: "desc" },
+      },
+    },
     orderBy: { name: "asc" },
   });
-  return { companies };
+  return {
+    companies: companies.map((c) => ({
+      ...c,
+      invoices: c.invoices.map((inv) => ({
+        ...inv,
+        grossTotal: Number(inv.grossTotal),
+        issueDate: inv.issueDate.toISOString(),
+        dueDate: inv.dueDate.toISOString(),
+      })),
+    })),
+  };
 }
 
 export default function CompaniesPage() {
   const { companies } = useLoaderData<typeof loader>();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const selected = companies.find((c) => c.id === selectedId) ?? null;
 
   return (
-    <div>
+    <div className="animate-fade-in flex gap-6">
+      {/* Kacheln */}
+      <div className={selected ? "flex-1 min-w-0" : "w-full"}>
         <div className="flex items-center justify-between mb-8">
           <div>
-          <h1 className="text-2xl font-bold text-gray-900">Mandanten</h1>
+            <h1 className="text-2xl font-bold text-slate-900">Mandanten</h1>
-          <p className="text-gray-500 mt-1">{companies.length} Mandanten verwaltet</p>
+            <p className="text-slate-500 mt-1 text-sm">{companies.length} Mandanten verwaltet</p>
           </div>
           <Button asChild>
             <Link to="/companies/new">
@@ -34,57 +81,203 @@ export default function CompaniesPage() {
         </div>
 
         {companies.length === 0 ? (
-        <Card>
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm py-16 text-center">
-          <CardContent className="py-16 text-center">
+            <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-100 mx-auto mb-4">
-            <Building2 className="h-12 w-12 text-gray-300 mx-auto mb-4" />
+              <Building2 className="h-7 w-7 text-slate-400" />
-            <h3 className="font-semibold text-gray-700 mb-2">Noch keine Mandanten</h3>
+            </div>
-            <p className="text-gray-500 mb-6 text-sm">Legen Sie Ihren ersten Mandanten an, um loszulegen.</p>
+            <h3 className="font-semibold text-slate-700 mb-1">Noch keine Mandanten</h3>
+            <p className="text-slate-400 mb-6 text-sm">Legen Sie Ihren ersten Mandanten an, um loszulegen.</p>
             <Button asChild>
               <Link to="/companies/new">
                 <Plus className="h-4 w-4" />
                 Ersten Mandanten anlegen
               </Link>
             </Button>
-          </CardContent>
+          </div>
-        </Card>
         ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+          <div className={`grid gap-4 ${selected ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1 md:grid-cols-2 xl:grid-cols-3"}`}>
-          {companies.map((company) => (
+            {companies.map((company) => {
-            <Link key={company.id} to={`/companies/${company.id}`}>
+              const isActive = selectedId === company.id;
-              <Card className="hover:shadow-md transition-all hover:border-indigo-200 cursor-pointer h-full">
+              return (
-                <CardHeader>
+                <button
-                  <div className="flex items-start gap-3">
+                  key={company.id}
-                    <div className="p-2 rounded-lg bg-indigo-50 shrink-0">
+                  type="button"
+                  onClick={() => setSelectedId(isActive ? null : company.id)}
+                  className={`text-left bg-white rounded-2xl border shadow-sm p-5 hover:shadow-md transition-all duration-200 cursor-pointer w-full ${
+                    isActive
+                      ? "border-indigo-400 ring-2 ring-indigo-100"
+                      : "border-slate-200 hover:border-indigo-200"
+                  }`}
+                >
+                  <div className="flex items-start gap-3 mb-4">
+                    <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-50 shrink-0">
                       <Building2 className="h-5 w-5 text-indigo-600" />
                     </div>
                     <div className="min-w-0">
-                      <CardTitle className="text-base truncate">{company.name}</CardTitle>
+                      <p className="font-semibold text-slate-900 text-sm truncate">{company.name}</p>
                       {company.legalForm && (
-                        <p className="text-xs text-gray-500 mt-0.5">{company.legalForm}</p>
+                        <p className="text-xs text-slate-400 mt-0.5">{company.legalForm}</p>
                       )}
                     </div>
                   </div>
-                </CardHeader>
+                  <div className="flex gap-4 text-xs text-slate-500">
-                <CardContent>
+                    <span className="flex items-center gap-1.5">
-                  <div className="flex gap-4 text-sm text-gray-600">
-                    <span className="flex items-center gap-1">
                       <FileText className="h-3.5 w-3.5" />
                       {company._count.invoices} Rechnungen
                     </span>
-                    <span className="flex items-center gap-1">
+                    <span className="flex items-center gap-1.5">
                       <Users className="h-3.5 w-3.5" />
                       {company._count.customers} Kunden
                     </span>
                   </div>
                   {company.city && (
-                    <p className="text-xs text-gray-400 mt-2">{company.zip} {company.city}</p>
+                    <p className="text-xs text-slate-400 mt-2">{company.zip} {company.city}</p>
                   )}
-                </CardContent>
+                </button>
-              </Card>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Detail-Panel */}
+      {selected && (
+        <div className="w-[460px] shrink-0">
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm sticky top-[calc(3.5rem+2rem)] max-h-[calc(100vh-3.5rem-4rem)] overflow-y-auto">
+            {/* Header */}
+            <div className="flex items-start justify-between p-5 border-b border-slate-100">
+              <div className="flex items-start gap-3">
+                <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-50 shrink-0">
+                  <Building2 className="h-5 w-5 text-indigo-600" />
+                </div>
+                <div>
+                  <h2 className="font-semibold text-slate-900">{selected.name}</h2>
+                  {selected.legalForm && (
+                    <p className="text-xs text-slate-400 mt-0.5">{selected.legalForm}</p>
+                  )}
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => setSelectedId(null)}
+                className="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            {/* Aktionen */}
+            <div className="flex gap-2 p-4 border-b border-slate-100">
+              <Button variant="outline" size="sm" asChild className="flex-1">
+                <Link to={`/companies/${selected.id}/edit`}>
+                  <Edit className="h-3.5 w-3.5" />
+                  Bearbeiten
+                </Link>
+              </Button>
+              <Button size="sm" asChild className="flex-1">
+                <Link to={`/companies/${selected.id}/invoices/new`}>
+                  <Plus className="h-3.5 w-3.5" />
+                  Neue Rechnung
+                </Link>
+              </Button>
+            </div>
+
+            {/* Firmendaten */}
+            <div className="p-4 border-b border-slate-100 grid grid-cols-2 gap-3 text-sm">
+              {selected.city && (
+                <div>
+                  <p className="text-xs text-slate-400 mb-0.5">Adresse</p>
+                  <p className="text-slate-700">{selected.zip} {selected.city}</p>
+                </div>
+              )}
+              {selected.email && (
+                <div>
+                  <p className="text-xs text-slate-400 mb-0.5">E-Mail</p>
+                  <p className="text-slate-700 flex items-center gap-1.5">
+                    <Mail className="h-3.5 w-3.5 text-slate-400 shrink-0" />
+                    <span className="truncate">{selected.email}</span>
+                  </p>
+                </div>
+              )}
+              {selected.phone && (
+                <div>
+                  <p className="text-xs text-slate-400 mb-0.5">Telefon</p>
+                  <p className="text-slate-700 flex items-center gap-1.5">
+                    <Phone className="h-3.5 w-3.5 text-slate-400 shrink-0" />
+                    {selected.phone}
+                  </p>
+                </div>
+              )}
+              {selected.taxId && (
+                <div>
+                  <p className="text-xs text-slate-400 mb-0.5">Steuernummer</p>
+                  <p className="text-slate-700 font-mono text-xs">{selected.taxId}</p>
+                </div>
+              )}
+              {selected.vatId && (
+                <div>
+                  <p className="text-xs text-slate-400 mb-0.5">USt-IdNr.</p>
+                  <p className="text-slate-700 font-mono text-xs">{selected.vatId}</p>
+                </div>
+              )}
+              {selected.bankIban && (
+                <div className="col-span-2">
+                  <p className="text-xs text-slate-400 mb-0.5">IBAN</p>
+                  <p className="text-slate-700 flex items-center gap-1.5">
+                    <CreditCard className="h-3.5 w-3.5 text-slate-400 shrink-0" />
+                    <span className="font-mono text-xs">{selected.bankIban}</span>
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* Rechnungen */}
+            <div className="p-4">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-sm font-semibold text-slate-900">Rechnungen</h3>
+                <Link
+                  to={`/companies/${selected.id}/invoices`}
+                  className="text-xs text-indigo-600 hover:text-indigo-700 flex items-center gap-0.5"
+                >
+                  Alle <ChevronRight className="h-3.5 w-3.5" />
+                </Link>
+              </div>
+
+              {selected.invoices.length === 0 ? (
+                <div className="py-8 text-center text-slate-400">
+                  <Receipt className="h-7 w-7 mx-auto mb-2 text-slate-200" />
+                  <p className="text-sm">Noch keine Rechnungen</p>
+                </div>
+              ) : (
+                <div className="divide-y divide-slate-100">
+                  {selected.invoices.map((invoice) => (
+                    <Link
+                      key={invoice.id}
+                      to={`/companies/${selected.id}/invoices/${invoice.id}`}
+                      className="flex items-center justify-between py-2.5 hover:bg-slate-50 -mx-1 px-1 rounded-lg transition-colors"
+                    >
+                      <div className="min-w-0">
+                        <p className="text-sm font-medium text-slate-900">{invoice.number}</p>
+                        <p className="text-xs text-slate-400 truncate">
+                          {invoice.customer.name} · {formatDate(invoice.issueDate)}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-2 shrink-0 ml-2">
+                        <Badge variant={statusVariants[invoice.status]}>
+                          {statusLabels[invoice.status]}
+                        </Badge>
+                        <span className="text-sm font-medium text-slate-900">
+                          {formatCurrency(invoice.grossTotal)}
+                        </span>
+                      </div>
                     </Link>
                   ))}
                 </div>
               )}
             </div>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }

app/routes/dashboard-layout.tsx

@@ -1,6 +1,6 @@
 import { Outlet, useLoaderData } from "react-router";
 import { requireUser } from "@/session.server";
-import { Sidebar } from "@/components/layout/sidebar";
+import { Topbar } from "@/components/layout/topbar";
 
 export async function loader({ request }: { request: Request }) {
   const user = await requireUser(request);
@@ -11,9 +11,9 @@ export default function DashboardLayout() {
   const { userName } = useLoaderData<typeof loader>();
 
   return (
-    <div className="flex min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-slate-50 flex flex-col">
-      <Sidebar userName={userName} />
+      <Topbar userName={userName} />
-      <main className="flex-1 overflow-auto">
+      <main className="flex-1">
         <div className="max-w-7xl mx-auto px-6 py-8">
           <Outlet />
         </div>

app/routes/home.tsx

@@ -3,9 +3,13 @@ import { requireUser } from "@/session.server";
 import prisma from "@/lib/prisma";
 import { formatCurrency } from "@/lib/tax";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Building2, FileText, Euro } from "lucide-react";
+import { Building2, FileText, Euro, TrendingUp } from "lucide-react";
 import { InvoiceStatus } from "@prisma/client";
 
+export const handle = {
+  breadcrumbs: () => [{ label: "Dashboard" }],
+};
+
 export async function loader({ request }: { request: Request }) {
   const user = await requireUser(request);
   const userId = user.id;
@@ -38,116 +42,150 @@ export async function loader({ request }: { request: Request }) {
   };
 }
 
+const statCards = [
+  {
+    key: "companies",
+    label: "Mandanten",
+    icon: Building2,
+    gradient: "from-indigo-500 to-violet-600",
+    bg: "bg-indigo-50",
+    iconColor: "text-indigo-600",
+    shadowColor: "shadow-indigo-500/15",
+  },
+  {
+    key: "totalInvoices",
+    label: "Rechnungen gesamt",
+    icon: FileText,
+    gradient: "from-blue-500 to-cyan-500",
+    bg: "bg-blue-50",
+    iconColor: "text-blue-600",
+    shadowColor: "shadow-blue-500/15",
+  },
+  {
+    key: "openInvoices",
+    label: "Offen / Entwurf",
+    icon: TrendingUp,
+    gradient: "from-amber-500 to-orange-500",
+    bg: "bg-amber-50",
+    iconColor: "text-amber-600",
+    shadowColor: "shadow-amber-500/15",
+  },
+  {
+    key: "paidTotal",
+    label: "Bezahlt (brutto)",
+    icon: Euro,
+    gradient: "from-emerald-500 to-teal-500",
+    bg: "bg-emerald-50",
+    iconColor: "text-emerald-600",
+    shadowColor: "shadow-emerald-500/15",
+  },
+];
+
 export default function DashboardPage() {
   const { companies, totalInvoices, paidTotal, openInvoices } = useLoaderData<typeof loader>();
 
+  const statValues: Record<string, string | number> = {
+    companies: companies.length,
+    totalInvoices,
+    openInvoices,
+    paidTotal: formatCurrency(paidTotal),
+  };
+
   return (
-    <div>
+    <div className="animate-fade-in">
       <div className="mb-8">
-        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
+        <h1 className="text-2xl font-bold text-slate-900">Dashboard</h1>
-        <p className="text-gray-500 mt-1">Übersicht aller Mandanten und Rechnungen</p>
+        <p className="text-slate-500 mt-1 text-sm">Übersicht aller Mandanten und Rechnungen</p>
       </div>
 
+      {/* Stats */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-        <Card>
+        {statCards.map((card) => {
-          <CardContent className="pt-6">
+          const Icon = card.icon;
-            <div className="flex items-center gap-4">
+          return (
-              <div className="p-2 rounded-lg bg-indigo-50">
+            <div
-                <Building2 className="h-5 w-5 text-indigo-600" />
+              key={card.key}
+              className={`bg-white rounded-2xl border border-slate-200 shadow-sm ${card.shadowColor} p-5 hover:shadow-md transition-shadow duration-200`}
+            >
+              <div className="flex items-start justify-between mb-4">
+                <div className={`p-2.5 rounded-xl ${card.bg}`}>
+                  <Icon className={`h-5 w-5 ${card.iconColor}`} />
                 </div>
-              <div>
+                <span className="text-xs font-medium text-slate-400 bg-slate-100 rounded-full px-2 py-0.5">
-                <p className="text-2xl font-bold text-gray-900">{companies.length}</p>
+                  Gesamt
-                <p className="text-sm text-gray-500">Mandanten</p>
+                </span>
               </div>
+              <p className="text-2xl font-bold text-slate-900 tabular-nums">
+                {statValues[card.key]}
+              </p>
+              <p className="text-sm text-slate-500 mt-0.5">{card.label}</p>
             </div>
-          </CardContent>
+          );
-        </Card>
+        })}
-
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 rounded-lg bg-blue-50">
-                <FileText className="h-5 w-5 text-blue-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-gray-900">{totalInvoices}</p>
-                <p className="text-sm text-gray-500">Rechnungen gesamt</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 rounded-lg bg-yellow-50">
-                <FileText className="h-5 w-5 text-yellow-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-gray-900">{openInvoices}</p>
-                <p className="text-sm text-gray-500">Offen / Entwurf</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 rounded-lg bg-green-50">
-                <Euro className="h-5 w-5 text-green-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-gray-900">{formatCurrency(paidTotal)}</p>
-                <p className="text-sm text-gray-500">Bezahlt (brutto)</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
       </div>
 
+      {/* Companies */}
       <div>
         <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold text-gray-900">Mandanten</h2>
+          <div>
-          <Link to="/companies" className="text-sm text-indigo-600 hover:text-indigo-700 font-medium">
+            <h2 className="text-lg font-semibold text-slate-900">Mandanten</h2>
-            Alle anzeigen →
+            <p className="text-xs text-slate-500 mt-0.5">{companies.length} Mandanten verwaltet</p>
+          </div>
+          <Link
+            to="/companies"
+            className="text-sm text-indigo-600 hover:text-indigo-700 font-medium inline-flex items-center gap-1 transition-colors"
+          >
+            Alle anzeigen
+            <span aria-hidden>→</span>
           </Link>
         </div>
 
         {companies.length === 0 ? (
-          <Card>
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm py-14 text-center">
-            <CardContent className="py-12 text-center">
+            <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-100 mx-auto mb-4">
-              <Building2 className="h-12 w-12 text-gray-300 mx-auto mb-4" />
+              <Building2 className="h-7 w-7 text-slate-400" />
-              <p className="text-gray-500 mb-4">Noch keine Mandanten angelegt.</p>
+            </div>
+            <p className="text-slate-700 font-medium mb-1">Noch keine Mandanten angelegt</p>
+            <p className="text-slate-400 text-sm mb-6">Legen Sie Ihren ersten Mandanten an, um loszulegen.</p>
             <Link
               to="/companies/new"
-                className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition-colors"
+              className="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 transition-colors shadow-sm shadow-indigo-500/25"
             >
               Mandant anlegen
             </Link>
-            </CardContent>
+          </div>
-          </Card>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+          <div className="flex flex-wrap justify-center gap-4">
             {companies.map((company) => (
-              <Link key={company.id} to={`/companies/${company.id}`}>
+              <Link key={company.id} to={`/companies/${company.id}`} className="w-full sm:w-80">
-                <Card className="hover:shadow-md transition-shadow cursor-pointer">
+                <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-5 hover:shadow-md hover:border-indigo-200 transition-all duration-200 cursor-pointer h-full">
-                  <CardHeader>
+                  <div className="flex items-start gap-3 mb-4">
-                    <CardTitle className="text-base">{company.name}</CardTitle>
+                    <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-50 shrink-0">
+                      <Building2 className="h-5 w-5 text-indigo-600" />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="font-semibold text-slate-900 text-sm truncate">{company.name}</p>
                       {company.legalForm && (
-                      <p className="text-xs text-gray-500">{company.legalForm}</p>
+                        <p className="text-xs text-slate-400 mt-0.5">{company.legalForm}</p>
                       )}
-                  </CardHeader>
+                    </div>
-                  <CardContent>
+                  </div>
-                    <div className="flex gap-4 text-sm text-gray-600">
+                  <div className="flex gap-4 text-xs text-slate-500">
-                      <span>{company._count.invoices} Rechnungen</span>
+                    <span className="flex items-center gap-1.5">
-                      <span>{company._count.customers} Kunden</span>
+                      <FileText className="h-3.5 w-3.5" />
+                      {company._count.invoices} Rechnungen
+                    </span>
+                    <span className="flex items-center gap-1.5">
+                      <Building2 className="h-3.5 w-3.5" />
+                      {company._count.customers} Kunden
+                    </span>
                   </div>
                   {company.city && (
-                      <p className="text-xs text-gray-400 mt-1">{company.zip} {company.city}</p>
+                    <p className="text-xs text-slate-400 mt-2">
+                      {company.zip} {company.city}
+                    </p>
                   )}
-                  </CardContent>
+                </div>
-                </Card>
               </Link>
             ))}
           </div>

app/routes/login.tsx

@@ -3,7 +3,6 @@ import { login, createUserSession, getUserSession } from "@/session.server";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Calculator, AlertCircle } from "lucide-react";
 
 export async function loader({ request }: { request: Request }) {
@@ -29,26 +28,69 @@ export default function LoginPage() {
   const loading = navigation.state === "submitting";
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-50 flex items-center justify-center p-4">
+    <div className="min-h-screen flex">
-      <div className="w-full max-w-md">
+      {/* Left decorative panel */}
-        <div className="text-center mb-8">
+      <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: "var(--sidebar-bg)" }}>
-          <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-indigo-600 mb-4">
+        <div className="absolute inset-0">
-            <Calculator className="w-7 h-7 text-white" />
+          {/* Decorative gradient blobs */}
+          <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-indigo-600/20 rounded-full blur-3xl" />
+          <div className="absolute bottom-1/3 right-1/4 w-48 h-48 bg-violet-600/20 rounded-full blur-3xl" />
+          <div className="absolute top-2/3 left-1/3 w-32 h-32 bg-blue-600/15 rounded-full blur-2xl" />
+        </div>
+        <div className="relative z-10 flex flex-col justify-center px-14">
+          <div className="flex items-center gap-3 mb-10">
+            <div className="flex items-center justify-center w-11 h-11 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 shadow-lg shadow-indigo-500/40">
+              <Calculator className="w-5 h-5 text-white" />
+            </div>
+            <span className="text-white font-semibold text-lg">Rechnungsmanager</span>
+          </div>
+          <h2 className="text-4xl font-bold text-white leading-tight mb-4">
+            Buchhaltung<br />
+            <span className="text-indigo-400">einfach gemacht.</span>
+          </h2>
+          <p className="text-slate-400 text-base leading-relaxed max-w-xs">
+            Verwalten Sie Mandanten, erstellen Sie Rechnungen und behalten Sie den Überblick über alle Zahlungen.
+          </p>
+
+          <div className="mt-12 space-y-4">
+            {[
+              { label: "Mandantenverwaltung", desc: "Alle Firmen im Blick" },
+              { label: "Rechnungserstellung", desc: "Schnell und professionell" },
+              { label: "Zahlungsübersicht", desc: "Offene Posten auf einen Blick" },
+            ].map((feat) => (
+              <div key={feat.label} className="flex items-center gap-3">
+                <div className="w-2 h-2 rounded-full bg-indigo-400 shrink-0" />
+                <div>
+                  <span className="text-slate-200 text-sm font-medium">{feat.label}</span>
+                  <span className="text-slate-500 text-sm"> — {feat.desc}</span>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
-          <h1 className="text-2xl font-bold text-gray-900">Annas Rechnungsmanager</h1>
-          <p className="text-gray-500 mt-1">Buchhaltung & Rechnungsverwaltung</p>
       </div>
 
-        <Card>
+      {/* Right login form */}
-          <CardHeader>
+      <div className="flex-1 flex items-center justify-center p-8 bg-slate-50">
-            <CardTitle>Anmelden</CardTitle>
+        <div className="w-full max-w-sm animate-fade-in">
-            <CardDescription>Geben Sie Ihre Zugangsdaten ein</CardDescription>
+          {/* Mobile logo */}
-          </CardHeader>
+          <div className="flex lg:hidden items-center gap-3 mb-8 justify-center">
-          <CardContent>
+            <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 shadow-md">
-            <Form method="post" className="space-y-4">
+              <Calculator className="w-5 h-5 text-white" />
+            </div>
+            <span className="font-semibold text-slate-900 text-base">Rechnungsmanager</span>
+          </div>
+
+          <div className="mb-8">
+            <h1 className="text-2xl font-bold text-slate-900">Willkommen zurück</h1>
+            <p className="text-slate-500 mt-1 text-sm">Melden Sie sich mit Ihren Zugangsdaten an</p>
+          </div>
+
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-8">
+            <Form method="post" className="space-y-5">
               {actionData?.error && (
-                <div className="flex items-center gap-2 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
+                <div className="flex items-center gap-2.5 rounded-xl bg-red-50 border border-red-100 p-3.5 text-sm text-red-700">
-                  <AlertCircle className="h-4 w-4 shrink-0" />
+                  <AlertCircle className="h-4 w-4 shrink-0 text-red-500" />
                   {actionData.error}
                 </div>
               )}
@@ -76,12 +118,12 @@ export default function LoginPage() {
                 />
               </div>
 
-              <Button type="submit" className="w-full" disabled={loading}>
+              <Button type="submit" className="w-full h-10 mt-2" disabled={loading}>
                 {loading ? "Anmelden..." : "Anmelden"}
               </Button>
             </Form>
-          </CardContent>
+          </div>
-        </Card>
+        </div>
       </div>
     </div>
   );

postcss.config.ts

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};