ADD: changed to rect router

2026-03-10 21:49:01 +01:00
parent 44e79e657f
commit 4bc57b2c4e
102 changed files with 5067 additions and 4824 deletions
@@ -0,0 +1,106 @@
+import { Link, useLoaderData } from "react-router";
+import { requireUser } from "@/session.server";
+import prisma from "@/lib/prisma";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { InvoiceStatusBadge } from "@/components/invoice/invoice-status-badge";
+import { formatCurrency, formatDate } from "@/lib/tax";
+import { Plus, FileText, ChevronLeft } from "lucide-react";
+
+export async function loader({ request, params }: { request: Request; params: { id: string } }) {
+  const user = await requireUser(request);
+  const { id } = params;
+
+  const company = await prisma.company.findFirst({
+    where: { id, userId: user.id },
+  });
+  if (!company) throw new Response("Not Found", { status: 404 });
+
+  const invoices = await prisma.invoice.findMany({
+    where: { companyId: id },
+    include: { customer: { select: { name: true } } },
+    orderBy: { issueDate: "desc" },
+  });
+
+  return {
+    company,
+    invoices: invoices.map((inv) => ({
+      ...inv,
+      grossTotal: Number(inv.grossTotal),
+      issueDate: inv.issueDate.toISOString(),
+      dueDate: inv.dueDate.toISOString(),
+    })),
+  };
+}
+
+export default function InvoicesPage() {
+  const { company, invoices } = useLoaderData<typeof loader>();
+  const id = company.id;
+
+  return (
+    <div>
+      <Link
+        to={`/companies/${id}`}
+        className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6"
+      >
+        <ChevronLeft className="h-4 w-4" /> {company.name}
+      </Link>
+
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Rechnungen</h1>
+          <p className="text-gray-500 mt-1">{invoices.length} Rechnungen für {company.name}</p>
+        </div>
+        <Button asChild>
+          <Link to={`/companies/${id}/invoices/new`}>
+            <Plus className="h-4 w-4" /> Neue Rechnung
+          </Link>
+        </Button>
+      </div>
+
+      {invoices.length === 0 ? (
+        <Card>
+          <CardContent className="py-16 text-center">
+            <FileText className="h-12 w-12 text-gray-300 mx-auto mb-4" />
+            <h3 className="font-semibold text-gray-700 mb-2">Noch keine Rechnungen</h3>
+            <p className="text-gray-500 mb-6 text-sm">Erstellen Sie die erste Rechnung für diesen Mandanten.</p>
+            <Button asChild>
+              <Link to={`/companies/${id}/invoices/new`}>
+                <Plus className="h-4 w-4" /> Erste Rechnung erstellen
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <div className="divide-y divide-gray-100">
+            {invoices.map((invoice) => (
+              <Link
+                key={invoice.id}
+                to={`/companies/${id}/invoices/${invoice.id}`}
+                className="flex items-center justify-between px-6 py-4 hover:bg-gray-50 transition-colors group"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="p-2 rounded-lg bg-gray-100 group-hover:bg-indigo-50 transition-colors">
+                    <FileText className="h-4 w-4 text-gray-500 group-hover:text-indigo-600 transition-colors" />
+                  </div>
+                  <div>
+                    <p className="font-medium text-gray-900">{invoice.number}</p>
+                    <p className="text-sm text-gray-500">{invoice.customer.name}</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-6">
+                  <p className="text-sm text-gray-500">{formatDate(invoice.issueDate)}</p>
+                  <InvoiceStatusBadge status={invoice.status} />
+                  <p className="font-medium text-gray-900 w-28 text-right">
+                    {formatCurrency(invoice.grossTotal)}
+                  </p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}