added billing creation

app/admin/clients/[id]/billing/page.tsx

@@ -0,0 +1,9 @@
+import { Params } from "@/modules/shared/types/user"
+import { BillingPanel } from "@/modules/shared/ui/views/billing-panel"
+
+const BillingAdminPage = async ({ params } : { params: Params }) => {
+  const { id } = await params
+  return <BillingPanel profileId={id} isAdmin />
+}
+
+export default BillingAdminPage

app/admin/clients/[id]/data/page.tsx

@@ -1,10 +1,18 @@
-import StammdatenAdminViewPage from "@/modules/admin/ui/views/stammdaten-admin-view"
-
-type Params = Promise<{ id: string }>;
+import { getStammdaten } from "@/modules/shared/queries/stammdaten"
+import { Params } from "@/modules/shared/types/user"
+import { StammdatenPanel } from "@/modules/shared/ui/views/stammdaten-panel"
 
 const DataAdminPage = async ({ params }: { params: Params }) => {
   const { id } = await params
-  return <StammdatenAdminViewPage clientProfileId={id} />
+  const stammdaten = await getStammdaten(id)
+
+  return (
+    <StammdatenPanel
+      profileId={id}
+      client={stammdaten?.client ?? null}
+      paymentDetails={stammdaten?.paymentDetails ?? null}
+    />
+  )
 }
 
 export default DataAdminPage

app/admin/clients/[id]/layout.tsx

@@ -1,8 +1,7 @@
 import { notFound, redirect } from "next/navigation";
 import { createAdminClient } from "@/lib/supabase/admin";
 import { verifySession } from "@/lib/supabase/dal";
-
-type Params = Promise<{ id: string }>;
+import { Params } from "@/modules/shared/types/user";
 
 export default async function ClientDetailLayout({
     children,

app/admin/clients/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation";
 import { createAdminClient } from "@/lib/supabase/admin";
+import { Params } from "@/modules/shared/types/user";
 
-type Params = Promise<{ id: string }>;
 
 const ClientDetailPage = async ({ params }: { params: Params }) => {
     const { id } = await params;

app/admin/clients/[id]/passwords/page.tsx

@@ -1,10 +1,9 @@
-import PasswordAdminViewPage from "@/modules/admin/ui/views/password-admin-view"
-
-type Params = Promise<{id: string}>
+import { Params } from "@/modules/shared/types/user"
+import { CredentialsPanel } from "@/modules/shared/ui/views/credentials-panel"
 
 const PasswordAdminPage = async ({ params } : { params: Params }) => {
     const { id } = await params
-  return <PasswordAdminViewPage clientProfileId={id}/>
+  return <CredentialsPanel profileId={id} isAdmin />
 }
 
-export default PasswordAdminPage
+export default PasswordAdminPage

app/api/invoices/pdf/route.ts

@@ -0,0 +1,45 @@
+import * as z from "zod"
+import { zipSync } from "fflate"
+import type { NextRequest } from "next/server"
+import { getSession } from "@/lib/supabase/dal"
+import { getInvoicesForPdf } from "@/modules/shared/queries/invoices"
+import { invoiceFileName, renderInvoicePdf } from "@/modules/shared/pdf/render-invoice"
+
+const IdsSchema = z.array(z.string().uuid()).min(1).max(100)
+
+// Zugriff regelt RLS: Clients bekommen nur eigene, nicht stornierte Rechnungen zurück.
+export async function GET(request: NextRequest) {
+    const user = await getSession()
+    if (!user) return Response.json({ error: "Nicht angemeldet." }, { status: 401 })
+
+    const parsed = IdsSchema.safeParse(request.nextUrl.searchParams.getAll("id"))
+    if (!parsed.success) return Response.json({ error: "Ungültige Auswahl." }, { status: 400 })
+
+    const invoices = await getInvoicesForPdf(parsed.data)
+    if (invoices.length === 0) return Response.json({ error: "Keine Rechnungen gefunden." }, { status: 404 })
+
+    if (invoices.length === 1) {
+        const pdf = await renderInvoicePdf(invoices[0])
+        const disposition = request.nextUrl.searchParams.has("inline") ? "inline" : "attachment"
+        return new Response(new Uint8Array(pdf), {
+            headers: {
+                "Content-Type": "application/pdf",
+                "Content-Disposition": `${disposition}; filename="${invoiceFileName(invoices[0].invoiceNumber)}"`,
+                "Cache-Control": "no-store",
+            },
+        })
+    }
+
+    const files: Record<string, Uint8Array> = {}
+    for (const invoice of invoices) {
+        files[invoiceFileName(invoice.invoiceNumber)] = new Uint8Array(await renderInvoicePdf(invoice))
+    }
+
+    return new Response(zipSync(files, { level: 0 }), {
+        headers: {
+            "Content-Type": "application/zip",
+            "Content-Disposition": "attachment; filename=\"Rechnungen.zip\"",
+            "Cache-Control": "no-store",
+        },
+    })
+}

app/api/invoices/preview/route.ts

@@ -0,0 +1,41 @@
+import * as z from "zod"
+import { getProfile } from "@/lib/supabase/dal"
+import { InvoiceDraftSchema, firstIssueMessage } from "@/modules/shared/schemas/invoice"
+import { renderInvoicePdf } from "@/modules/shared/pdf/render-invoice"
+
+const PreviewSchema = z.object({
+    draft: InvoiceDraftSchema,
+    invoiceNumber: z.string().trim().min(1).max(40),
+})
+
+export async function POST(request: Request) {
+    const profile = await getProfile()
+    if (!profile) return Response.json({ error: "Nicht angemeldet." }, { status: 401 })
+    if (profile.role !== "admin") return Response.json({ error: "Keine Berechtigung." }, { status: 403 })
+
+    const parsed = PreviewSchema.safeParse(await request.json().catch(() => null))
+    if (!parsed.success) {
+        return Response.json({ error: firstIssueMessage(parsed.error) }, { status: 400 })
+    }
+
+    const { draft, invoiceNumber } = parsed.data
+    const pdf = await renderInvoicePdf({
+        invoiceNumber,
+        invoiceDate: draft.invoiceDate,
+        dueDate: draft.dueDate,
+        companyName: draft.companyName,
+        billingStreet: draft.billingStreet,
+        billingPostalCode: draft.billingPostalCode,
+        billingCity: draft.billingCity,
+        billingCountry: draft.billingCountry,
+        items: draft.items,
+    })
+
+    return new Response(new Uint8Array(pdf), {
+        headers: {
+            "Content-Type": "application/pdf",
+            "Content-Disposition": "inline; filename=\"Vorschau.pdf\"",
+            "Cache-Control": "no-store",
+        },
+    })
+}

app/client/billing/page.tsx

@@ -0,0 +1,9 @@
+import { verifySession } from "@/lib/supabase/dal"
+import { BillingPanel } from "@/modules/shared/ui/views/billing-panel";
+
+const BillingPage = async () => {
+  const session = await verifySession();
+  return <BillingPanel profileId={session.userId} isAdmin={false}/>
+}
+
+export default BillingPage

app/client/data/page.tsx

@@ -1,7 +1,18 @@
-import StammdatenClientViewPage from "@/modules/client/ui/views/stammdaten-client-view"
+import { verifySession } from "@/lib/supabase/dal"
+import { getStammdaten } from "@/modules/shared/queries/stammdaten"
+import { StammdatenPanel } from "@/modules/shared/ui/views/stammdaten-panel"
 
-const DataPage = () => {
-  return <StammdatenClientViewPage/>
+const DataPage = async () => {
+  const session = await verifySession()
+  const stammdaten = await getStammdaten(session.userId)
+
+  return (
+    <StammdatenPanel
+      profileId={session.userId}
+      client={stammdaten?.client ?? null}
+      paymentDetails={stammdaten?.paymentDetails ?? null}
+    />
+  )
 }
 
-export default DataPage
+export default DataPage

app/client/passwords/page.tsx

@@ -1,7 +1,9 @@
-import PasswordClientViewPage from "@/modules/client/ui/views/password-client-view"
+import { verifySession } from "@/lib/supabase/dal"
+import { CredentialsPanel } from "@/modules/shared/ui/views/credentials-panel"
 
-const PasswordPage = () => {
-  return <PasswordClientViewPage/>
+const PasswordPage = async () => {
+  const session = await verifySession()
+  return <CredentialsPanel profileId={session.userId} isAdmin={false} />
 }
 
-export default PasswordPage
+export default PasswordPage

lib/supabase/migrations/20260929150000_invoice_creation.sql

@@ -0,0 +1,73 @@
+-- Zeigt die nächste Rechnungsnummer an, ohne den Zähler zu erhöhen (für Vorbelegung im Dialog).
+-- Die echte Nummer vergibt weiterhin next_invoice_number() beim Insert.
+create or replace function public.peek_next_invoice_number()
+returns text language plpgsql stable security definer set search_path = '' as $$
+declare
+  y int := extract(year from current_date)::int;
+  n int;
+begin
+  if not public.is_admin() then
+    raise exception 'forbidden' using errcode = '42501';
+  end if;
+  select coalesce(last_number, 0) + 1 into n from public.invoice_counters where year = y;
+  return format('RE-%s-%s', y, lpad(coalesce(n, 1)::text, 4, '0'));
+end $$;
+
+-- Rechnung + Positionen in einer Transaktion anlegen, damit bei Fehlern
+-- keine Rechnung ohne Positionen (und keine verbrauchte Nummer) übrig bleibt.
+-- security invoker: RLS (admin_insert / admin_all) greift.
+create or replace function public.create_invoice(
+  p_client_id           uuid,
+  p_invoice_date        date,
+  p_due_date            date,
+  p_company_name        text,
+  p_billing_street      text,
+  p_billing_postal_code text,
+  p_billing_city        text,
+  p_billing_country     char(2),
+  p_items               jsonb
+) returns uuid
+language plpgsql
+security invoker
+set search_path = ''
+as $$
+declare
+  v_invoice_id uuid;
+begin
+  if not public.is_admin() then
+    raise exception 'forbidden' using errcode = '42501';
+  end if;
+
+  if p_items is null or jsonb_array_length(p_items) = 0 then
+    raise exception 'invoice needs at least one item' using errcode = '22023';
+  end if;
+
+  insert into public.invoices (
+    client_id, invoice_date, due_date,
+    company_name, billing_street, billing_postal_code, billing_city, billing_country
+  ) values (
+    p_client_id, p_invoice_date, p_due_date,
+    p_company_name, p_billing_street, p_billing_postal_code, p_billing_city, p_billing_country
+  )
+  returning id into v_invoice_id;
+
+  insert into public.invoice_items (
+    invoice_id, position, product_template_id, description, quantity, unit_price, tax_rate
+  )
+  select
+    v_invoice_id,
+    item.ordinality::int,
+    nullif(item.value->>'product_template_id', '')::uuid,
+    item.value->>'description',
+    (item.value->>'quantity')::numeric,
+    (item.value->>'unit_price')::numeric,
+    (item.value->>'tax_rate')::numeric
+  from jsonb_array_elements(p_items) with ordinality as item(value, ordinality);
+
+  return v_invoice_id;
+end $$;
+
+revoke execute on function public.peek_next_invoice_number() from public, anon;
+revoke execute on function public.create_invoice(uuid, date, date, text, text, text, text, char(2), jsonb) from public, anon;
+grant  execute on function public.peek_next_invoice_number() to authenticated;
+grant  execute on function public.create_invoice(uuid, date, date, text, text, text, text, char(2), jsonb) to authenticated;

modules/admin/ui/views/password-admin-view.tsx

@@ -1,27 +0,0 @@
-import { getCredentials } from "@/modules/shared/queries/credentials"
-import { CredentialsTable } from "@/modules/shared/ui/components/credentials-table"
-import { CredentialDialog } from "@/modules/shared/ui/components/credential-dialog"
-import { createAdminClient } from "@/lib/supabase/admin"
-
-const PasswordAdminViewPage = async ({ clientProfileId }: { clientProfileId: string }) => {
-  const supabase = createAdminClient()
-  const { data: profile } = await supabase
-    .from("profiles")
-    .select("client_id")
-    .eq("id", clientProfileId)
-    .single()
-
-  const credentials = profile?.client_id ? await getCredentials(profile.client_id) : []
-
-  return (
-    <div className="flex flex-col gap-8 w-full">
-        <div className="w-full flex flex-row justify-between items-center">
-            <h1 className="text-3xl font-semibold">Passwörter</h1>
-            <CredentialDialog profileId={clientProfileId} />
-        </div>
-        <CredentialsTable profileId={clientProfileId} credentials={credentials} isAdmin />
-    </div>
-  )
-}
-
-export default PasswordAdminViewPage

modules/admin/ui/views/stammdaten-admin-view.tsx

@@ -1,16 +0,0 @@
-import { getStammdaten } from "@/modules/shared/queries/stammdaten"
-import { StammdatenPanel } from "@/modules/shared/ui/components/stammdaten-panel"
-
-const StammdatenAdminViewPage = async ({ clientProfileId }: { clientProfileId: string }) => {
-  const stammdaten = await getStammdaten(clientProfileId)
-
-  return (
-    <StammdatenPanel
-      profileId={clientProfileId}
-      client={stammdaten?.client ?? null}
-      paymentDetails={stammdaten?.paymentDetails ?? null}
-    />
-  )
-}
-
-export default StammdatenAdminViewPage

modules/client/ui/views/password-client-view.tsx

@@ -1,30 +0,0 @@
-import { verifySession } from "@/lib/supabase/dal"
-import { createAdminClient } from "@/lib/supabase/admin"
-import { getCredentials } from "@/modules/shared/queries/credentials"
-import { CredentialsTable } from "@/modules/shared/ui/components/credentials-table"
-import { CredentialDialog } from "@/modules/shared/ui/components/credential-dialog"
-
-const PasswordClientViewPage = async () => {
-  const session = await verifySession()
-
-  const supabase = createAdminClient()
-  const { data: profile } = await supabase
-    .from("profiles")
-    .select("client_id")
-    .eq("id", session.userId)
-    .single()
-
-  const credentials = profile?.client_id ? await getCredentials(profile.client_id) : []
-
-  return (
-    <div className="flex flex-col gap-8 w-full">
-        <div className="w-full flex flex-row justify-between items-center">
-            <h1 className="text-3xl font-semibold">Passwörter</h1>
-            <CredentialDialog profileId={session.userId} />
-        </div>
-        <CredentialsTable profileId={session.userId} credentials={credentials} isAdmin={false} />
-    </div>
-  )
-}
-
-export default PasswordClientViewPage

modules/client/ui/views/stammdaten-client-view.tsx

@@ -1,18 +0,0 @@
-import { verifySession } from "@/lib/supabase/dal"
-import { getStammdaten } from "@/modules/shared/queries/stammdaten"
-import { StammdatenPanel } from "@/modules/shared/ui/components/stammdaten-panel"
-
-const StammdatenClientViewPage = async () => {
-  const session = await verifySession()
-  const stammdaten = await getStammdaten(session.userId)
-
-  return (
-    <StammdatenPanel
-      profileId={session.userId}
-      client={stammdaten?.client ?? null}
-      paymentDetails={stammdaten?.paymentDetails ?? null}
-    />
-  )
-}
-
-export default StammdatenClientViewPage

modules/shared/actions/credentials.ts

@@ -5,18 +5,7 @@ import { revalidatePath } from "next/cache";
 import { createAdminClient } from "@/lib/supabase/admin";
 import { createClient } from "@/lib/supabase/server";
 import { verifySession } from "@/lib/supabase/dal";
-
-async function resolveClientId(profileId: string) {
-    const supabase = createAdminClient();
-    const { data: profile, error } = await supabase
-        .from("profiles")
-        .select("client_id")
-        .eq("id", profileId)
-        .single();
-
-    if (error || !profile?.client_id) return null;
-    return profile.client_id as string;
-}
+import { getClientId } from "@/modules/shared/queries/profile";
 
 const CredentialSchema = z.object({
     profileId: z.string().uuid(),
@@ -51,7 +40,7 @@ export async function createCredential(
         return { error: firstError ?? "Bitte alle Felder ausfüllen." };
     }
 
-    const clientId = await resolveClientId(profileId);
+    const clientId = await getClientId(profileId);
     if (!clientId) {
         return { error: "Client hat noch keine Stammdaten hinterlegt." };
     }

modules/shared/actions/invoices.ts

@@ -0,0 +1,90 @@
+"use server";
+
+import * as z from "zod";
+import { revalidatePath } from "next/cache";
+import { createClient } from "@/lib/supabase/server";
+import { verifySession } from "@/lib/supabase/dal";
+import { getClientId } from "@/modules/shared/queries/profile";
+import {
+    INVOICE_STATUSES,
+    InvoiceDraftSchema,
+    firstIssueMessage,
+    type InvoiceDraft,
+    type InvoiceStatus,
+} from "@/modules/shared/schemas/invoice";
+import { toIsoDate } from "@/modules/shared/lib/invoice-math";
+
+export type InvoiceActionState = { error: string } | { success: true };
+
+function revalidateBilling(profileId: string) {
+    revalidatePath("/client/billing");
+    revalidatePath(`/admin/clients/${profileId}/billing`);
+}
+
+export async function createInvoice(draft: InvoiceDraft): Promise<InvoiceActionState> {
+    const session = await verifySession();
+    if (!session.isAdmin) return { error: "Keine Berechtigung." };
+
+    const validated = InvoiceDraftSchema.safeParse(draft);
+    if (!validated.success) return { error: firstIssueMessage(validated.error) };
+
+    const data = validated.data;
+    const clientId = await getClientId(data.profileId);
+    if (!clientId) return { error: "Client hat noch keine Stammdaten hinterlegt." };
+
+    const supabase = await createClient();
+    const { error } = await supabase.rpc("create_invoice", {
+        p_client_id: clientId,
+        p_invoice_date: data.invoiceDate,
+        p_due_date: data.dueDate,
+        p_company_name: data.companyName,
+        p_billing_street: data.billingStreet,
+        p_billing_postal_code: data.billingPostalCode,
+        p_billing_city: data.billingCity,
+        p_billing_country: data.billingCountry.toUpperCase(),
+        p_items: data.items.map((item) => ({
+            product_template_id: item.productTemplateId,
+            description: item.description,
+            quantity: item.quantity,
+            unit_price: item.unitPrice,
+            tax_rate: item.taxRate,
+        })),
+    });
+
+    if (error) return { error: "Rechnung konnte nicht erstellt werden." };
+
+    revalidateBilling(data.profileId);
+    return { success: true };
+}
+
+const StatusSchema = z.object({
+    profileId: z.string().uuid(),
+    invoiceId: z.string().uuid(),
+    status: z.enum(INVOICE_STATUSES),
+});
+
+export async function updateInvoiceStatus(
+    profileId: string,
+    invoiceId: string,
+    status: InvoiceStatus
+): Promise<InvoiceActionState> {
+    const session = await verifySession();
+    if (!session.isAdmin) return { error: "Keine Berechtigung." };
+
+    const validated = StatusSchema.safeParse({ profileId, invoiceId, status });
+    if (!validated.success) return { error: "Ungültiger Status." };
+
+    const supabase = await createClient();
+    const { error } = await supabase
+        .from("invoices")
+        .update({
+            status: validated.data.status,
+            paid_at: validated.data.status === "paid" ? toIsoDate(new Date()) : null,
+        })
+        .eq("id", validated.data.invoiceId);
+
+    if (error) return { error: "Status konnte nicht geändert werden." };
+
+    revalidateBilling(validated.data.profileId);
+    return { success: true };
+}

modules/shared/actions/stammdaten.ts

@@ -4,6 +4,7 @@ import * as z from "zod";
 import { revalidatePath } from "next/cache";
 import { createAdminClient } from "@/lib/supabase/admin";
 import { verifySession } from "@/lib/supabase/dal";
+import { getClientId } from "@/modules/shared/queries/profile";
 
 const IBAN_REGEX = /^[A-Z]{2}[0-9]{2}[A-Z0-9]{11,30}$/;
 
@@ -147,16 +148,6 @@ export async function saveStammdaten(
 
     const supabase = createAdminClient();
 
-    const { data: profile, error: profileError } = await supabase
-        .from("profiles")
-        .select("client_id")
-        .eq("id", data.profileId)
-        .single();
-
-    if (profileError || !profile) {
-        return { error: "Profil konnte nicht geladen werden." };
-    }
-
     const clientPayload = {
         company_name: data.companyName,
         legal_form: data.legalForm,
@@ -178,7 +169,7 @@ export async function saveStammdaten(
         contact_phone: data.contactPhone ?? null,
     };
 
-    let clientId = profile.client_id;
+    let clientId = await getClientId(data.profileId);
 
     if (clientId) {
         const { error } = await supabase.from("clients").update(clientPayload).eq("id", clientId);

modules/shared/lib/invoice-math.ts

@@ -0,0 +1,38 @@
+type Item = { quantity: number; unitPrice: number; taxRate: number };
+
+const round2 = (value: number) => Math.round(value * 100) / 100;
+
+// Gleiche Rundung pro Position wie die View invoices_overview.
+export function lineNet(item: Item) {
+    return round2(item.quantity * item.unitPrice);
+}
+
+export function invoiceTotals(items: Item[]) {
+    const net = round2(items.reduce((sum, item) => sum + lineNet(item), 0));
+    const tax = round2(
+        items.reduce((sum, item) => sum + round2((item.quantity * item.unitPrice * item.taxRate) / 100), 0)
+    );
+    const rates = new Set(items.map((item) => item.taxRate));
+    return { net, tax, gross: round2(net + tax), uniformTaxRate: rates.size === 1 ? [...rates][0] : null };
+}
+
+const numberFormat = new Intl.NumberFormat("de-DE", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+export function formatAmount(value: number) {
+    return numberFormat.format(value);
+}
+
+export function formatCurrency(value: number) {
+    return `${numberFormat.format(value)} €`;
+}
+
+export function formatDate(isoDate: string) {
+    const [year, month, day] = isoDate.slice(0, 10).split("-");
+    return `${day}.${month}.${year}`;
+}
+
+export function toIsoDate(date: Date) {
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${date.getFullYear()}-${month}-${day}`;
+}

modules/shared/pdf/invoice-document.tsx

@@ -0,0 +1,212 @@
+import { Document, Image as PdfImage, Link, Page, StyleSheet, Text, View } from "@react-pdf/renderer"
+import type { InvoicePdfData } from "@/modules/shared/schemas/invoice"
+import { formatAmount, formatCurrency, formatDate, invoiceTotals, lineNet } from "@/modules/shared/lib/invoice-math"
+
+const COMPANY = {
+    name: "Since3 GbR",
+    street: "Sandweg 93",
+    city: "48565 Steinfurt",
+    phone: "+49 176 47601638",
+    email: "info@since3.de",
+    web: "www.since3.de",
+    taxNumber: "311/5963/2094",
+    accountHolder: "Since3",
+    iban: "DE35 4007 0211 0068 9224 00",
+    bic: "DEUTDE3BP10",
+    bank: "Postbank",
+    partners: "Ben Luis Dalhoff, Rajpreet Singh",
+}
+
+const INK = "#1a1a1a"
+const MUTED = "#6e6e6e"
+const LINK = "#1155cc"
+const RULE = "#d9d9d9"
+
+// Maße aus Rechnung_Template_Since3_.docx (twips / 20 = pt)
+const ITEM_COLUMNS = [45, 225.3, 75, 75, 85]
+const SUMMARY_COLUMNS = [85.3, 84, 84, 84, 84, 84]
+
+const styles = StyleSheet.create({
+    // Ligaturen aus, sonst wird "tt"/"ff" beim Kopieren/Auslesen falsch extrahiert ("Bite" statt "Bitte").
+    page: { paddingTop: 35, paddingBottom: 95, paddingHorizontal: 45, fontFamily: "Google Sans", fontSize: 9, color: "#000", fontFeatureSettings: { liga: false, clig: false } },
+    gradient: { width: 499.5, height: 5.25 },
+    row: { flexDirection: "row" },
+    left: { width: 305.3 },
+    right: { width: 200, alignItems: "flex-end" },
+    senderLine: { fontSize: 7, color: MUTED, marginTop: 14, marginBottom: 6 },
+    recipient: { fontSize: 10.5, lineHeight: 1.35 },
+    bold: { fontWeight: 700 },
+    logo: { width: 122, height: 21.75, marginTop: 10 },
+    companyInfo: { fontSize: 8.5, textAlign: "right", lineHeight: 1.35 },
+    title: { fontSize: 20, fontWeight: 700, color: INK },
+    refBox: { width: 190.5, backgroundColor: "#f2f2f2", padding: 8, gap: 2 },
+    refHint: { fontSize: 8, fontWeight: 700, marginBottom: 2 },
+    refLine: { fontSize: 8.5, fontWeight: 700, color: MUTED },
+    itemHeader: { flexDirection: "row", backgroundColor: INK, color: "#fff", fontSize: 8, fontWeight: 700 },
+    itemRow: { flexDirection: "row", borderBottomWidth: 0.5, borderBottomColor: RULE, fontSize: 9 },
+    cell: { paddingVertical: 5, paddingHorizontal: 5 },
+    right_: { textAlign: "right" },
+    summaryHeader: { flexDirection: "row", borderTopWidth: 1, borderTopColor: INK, fontSize: 7.5, fontWeight: 700, color: MUTED },
+    summaryValues: { flexDirection: "row", fontSize: 9 },
+    total: { fontSize: 11, fontWeight: 700, color: INK, backgroundColor: "#f2f2f2" },
+    note: { fontSize: 8, color: MUTED, marginTop: 10 },
+    paymentBox: { borderWidth: 0.5, borderColor: RULE, backgroundColor: "#fafafa", padding: 10, marginTop: 16, gap: 2 },
+    paymentTitle: { fontSize: 9.5, fontWeight: 700, color: INK, marginBottom: 4 },
+    paymentText: { fontSize: 9, fontWeight: 700 },
+    footer: { position: "absolute", bottom: 35, left: 45, right: 45, gap: 4 },
+    footerText: { fontSize: 7, color: MUTED },
+})
+
+type PdfStyle = React.ComponentProps<typeof View>["style"]
+
+function Cell({ width, align, children, style }: {
+    width: number
+    align?: "right"
+    children: React.ReactNode
+    style?: PdfStyle
+}) {
+    return (
+        <View style={[styles.cell, { width }, style]}>
+            <Text style={align === "right" ? styles.right_ : {}}>{children}</Text>
+        </View>
+    )
+}
+
+export type InvoiceAssets = {
+    logo: { data: Buffer; format: "jpg" }
+    gradient: { data: Buffer; format: "png" }
+}
+
+function InvoicePage({ invoice, assets }: { invoice: InvoicePdfData; assets: InvoiceAssets }) {
+    const totals = invoiceTotals(invoice.items)
+    const showCountry = invoice.billingCountry.toUpperCase() !== "DE"
+
+    return (
+        <Page size="A4" style={styles.page}>
+            <PdfImage src={assets.gradient} style={styles.gradient} />
+
+            <View style={styles.row}>
+                <View style={styles.left}>
+                    <Text style={styles.senderLine}>
+                        {COMPANY.name}  ·  {COMPANY.street}  ·  {COMPANY.city}
+                    </Text>
+                </View>
+                <View style={styles.right}>
+                    <PdfImage src={assets.logo} style={styles.logo} />
+                </View>
+            </View>
+
+            <View style={[styles.row, { marginTop: 4 }]}>
+                <View style={[styles.left, styles.recipient]}>
+                    <Text style={styles.bold}>{invoice.companyName}</Text>
+                    <Text>{invoice.billingStreet}</Text>
+                    <Text>{invoice.billingPostalCode} {invoice.billingCity}</Text>
+                    {showCountry && <Text>{invoice.billingCountry.toUpperCase()}</Text>}
+                </View>
+                <View style={[styles.right, styles.companyInfo]}>
+                    <Text style={styles.bold}>{COMPANY.name}</Text>
+                    <Text>{COMPANY.street}</Text>
+                    <Text>{COMPANY.city}</Text>
+                    <Text>{COMPANY.phone}</Text>
+                    <Link src={`mailto:${COMPANY.email}`} style={{ color: LINK, textDecoration: "none" }}>{COMPANY.email}</Link>
+                    <Text>{COMPANY.web}</Text>
+                    <Text>St.-Nr.: {COMPANY.taxNumber}</Text>
+                </View>
+            </View>
+
+            <View style={[styles.row, { marginTop: 28, marginBottom: 18, alignItems: "flex-end" }]}>
+                <View style={styles.left}>
+                    <Text style={styles.title}>Rechnung</Text>
+                </View>
+                <View style={styles.right}>
+                    <View style={styles.refBox}>
+                        <Text style={styles.refHint}>Bitte bei Zahlung und Rückfragen angeben:</Text>
+                        <Text style={styles.refLine}>Rechnungsnummer:  {invoice.invoiceNumber}</Text>
+                        <Text style={styles.refLine}>Rechnungsdatum:  {formatDate(invoice.invoiceDate)}</Text>
+                        <Text style={styles.refLine}>Leistungsdatum: {formatDate(invoice.invoiceDate)}</Text>
+                    </View>
+                </View>
+            </View>
+
+            <View style={styles.itemHeader}>
+                <Cell width={ITEM_COLUMNS[0]}>Menge</Cell>
+                <Cell width={ITEM_COLUMNS[1]}>Bezeichnung</Cell>
+                <Cell width={ITEM_COLUMNS[2]} align="right">Preis/Einh. (€)</Cell>
+                <Cell width={ITEM_COLUMNS[3]} align="right">Gesamt (€)</Cell>
+                <Cell width={ITEM_COLUMNS[4]} align="right">MwSt (%)</Cell>
+            </View>
+            {invoice.items.map((item, index) => (
+                <View key={index} style={styles.itemRow} wrap={false}>
+                    <Cell width={ITEM_COLUMNS[0]}>{item.quantity.toLocaleString("de-DE")}</Cell>
+                    <Cell width={ITEM_COLUMNS[1]}>{item.description}</Cell>
+                    <Cell width={ITEM_COLUMNS[2]} align="right">{formatAmount(item.unitPrice)}</Cell>
+                    <Cell width={ITEM_COLUMNS[3]} align="right">{formatAmount(lineNet(item))}</Cell>
+                    <Cell width={ITEM_COLUMNS[4]} align="right">{formatAmount(item.taxRate)}</Cell>
+                </View>
+            ))}
+
+            <View wrap={false} style={{ marginTop: 18 }}>
+                <View style={styles.summaryHeader}>
+                    <Cell width={SUMMARY_COLUMNS[0]}>Fälligkeit</Cell>
+                    <Cell width={SUMMARY_COLUMNS[1]} align="right">Teilbetrag</Cell>
+                    <Cell width={SUMMARY_COLUMNS[2]} align="right">MwSt</Cell>
+                    <Cell width={SUMMARY_COLUMNS[3]} align="right">Betrag MwSt</Cell>
+                    <Cell width={SUMMARY_COLUMNS[4]} align="right">Brutto</Cell>
+                    <Cell width={SUMMARY_COLUMNS[5]} align="right">Gesamtbetrag</Cell>
+                </View>
+                <View style={styles.summaryValues}>
+                    <Cell width={SUMMARY_COLUMNS[0]} style={styles.bold}>{formatDate(invoice.dueDate)}</Cell>
+                    <Cell width={SUMMARY_COLUMNS[1]} align="right">{formatCurrency(totals.net)}</Cell>
+                    <Cell width={SUMMARY_COLUMNS[2]} align="right">
+                        {totals.uniformTaxRate === null ? "gemischt" : `${formatAmount(totals.uniformTaxRate)} %`}
+                    </Cell>
+                    <Cell width={SUMMARY_COLUMNS[3]} align="right">{formatCurrency(totals.tax)}</Cell>
+                    <Cell width={SUMMARY_COLUMNS[4]} align="right">{formatCurrency(totals.gross)}</Cell>
+                    <Cell width={SUMMARY_COLUMNS[5]} align="right" style={styles.total}>{formatCurrency(totals.gross)}</Cell>
+                </View>
+                {totals.tax === 0 && (
+                    <Text style={styles.note}>Gemäß § 19 UStG enthält der Rechnungsbetrag keine Umsatzsteuer.</Text>
+                )}
+            </View>
+
+            <View wrap={false} style={styles.paymentBox}>
+                <Text style={styles.paymentTitle}>Zahlungsinformationen</Text>
+                <Text style={[styles.paymentText, { marginBottom: 4 }]}>
+                    Bitte überweisen Sie den Gesamtbetrag bis zum {formatDate(invoice.dueDate)} auf folgendes Konto:
+                </Text>
+                <Text style={styles.paymentText}>Kontoinhaber: {COMPANY.accountHolder}</Text>
+                <Text style={styles.paymentText}>IBAN: {COMPANY.iban}</Text>
+                <Text style={styles.paymentText}>BIC: {COMPANY.bic}</Text>
+                <Text style={styles.paymentText}>Betrag: {formatCurrency(totals.gross)}</Text>
+                <Text style={styles.paymentText}>Verwendungszweck: {invoice.invoiceNumber}</Text>
+            </View>
+
+            <View wrap={false} style={{ marginTop: 14, gap: 10 }}>
+                <Text style={{ fontWeight: 700, color: LINK }}>
+                    Hinweis: Bei Rückfragen kontaktieren Sie uns gerne unter {COMPANY.email}.
+                </Text>
+                <Text>Mit freundlichen Grüßen</Text>
+                <PdfImage src={assets.logo} style={{ width: 82.5, height: 14.25 }} />
+            </View>
+
+            <View style={styles.footer} fixed>
+                <PdfImage src={assets.gradient} style={styles.gradient} />
+                <Text style={styles.footerText}>Das Produkt bleibt bis zur vollständigen Bezahlung unser Eigentum.</Text>
+                <Text style={styles.footerText}>
+                    {COMPANY.name}. Sitz der Gesellschaft: Steinfurt, Deutschland. Gesellschafter: {COMPANY.partners}.
+                </Text>
+                <Text style={styles.footerText}>
+                    {COMPANY.bank}, Kontoinhaber: {COMPANY.accountHolder}, IBAN: {COMPANY.iban}, BIC: {COMPANY.bic}
+                </Text>
+            </View>
+        </Page>
+    )
+}
+
+export function InvoiceDocument({ invoice, assets }: { invoice: InvoicePdfData; assets: InvoiceAssets }) {
+    return (
+        <Document title={`Rechnung ${invoice.invoiceNumber}`} author={COMPANY.name}>
+            <InvoicePage invoice={invoice} assets={assets} />
+        </Document>
+    )
+}

modules/shared/pdf/render-invoice.tsx

@@ -0,0 +1,35 @@
+import "server-only"
+import { readFileSync } from "node:fs"
+import path from "node:path"
+import { Font, renderToBuffer } from "@react-pdf/renderer"
+import type { InvoicePdfData } from "@/modules/shared/schemas/invoice"
+import { InvoiceDocument, type InvoiceAssets } from "./invoice-document"
+
+const ASSET_DIR = path.join(process.cwd(), "modules/shared/pdf/assets")
+
+Font.register({
+    family: "Google Sans",
+    fonts: [
+        { src: path.join(ASSET_DIR, "GoogleSans-regular.ttf"), fontWeight: 400 },
+        { src: path.join(ASSET_DIR, "GoogleSans-bold.ttf"), fontWeight: 700 },
+    ],
+})
+Font.registerHyphenationCallback((word) => [word])
+
+let assets: InvoiceAssets | null = null
+
+function loadAssets(): InvoiceAssets {
+    assets ??= {
+        logo: { data: readFileSync(path.join(ASSET_DIR, "since3-logo.jpg")), format: "jpg" },
+        gradient: { data: readFileSync(path.join(ASSET_DIR, "gradient-line.png")), format: "png" },
+    }
+    return assets
+}
+
+export function renderInvoicePdf(invoice: InvoicePdfData) {
+    return renderToBuffer(<InvoiceDocument invoice={invoice} assets={loadAssets()} />)
+}
+
+export function invoiceFileName(invoiceNumber: string) {
+    return `Rechnung_${invoiceNumber.replace(/[^\w-]/g, "_")}.pdf`
+}

modules/shared/queries/invoices.ts

@@ -0,0 +1,85 @@
+import "server-only"
+import { createClient } from "@/lib/supabase/server"
+import type { InvoiceListItem, InvoicePdfData, ProductTemplate } from "@/modules/shared/schemas/invoice"
+
+export async function getInvoices(clientId: string): Promise<InvoiceListItem[]> {
+    const supabase = await createClient()
+    const { data, error } = await supabase
+        .from("invoices_overview")
+        .select("id, invoice_number, status, display_status, gross_total, due_date, invoice_date")
+        .eq("client_id", clientId)
+        .order("invoice_date", { ascending: false })
+        .order("invoice_number", { ascending: false })
+
+    if (error) throw new Error("Rechnungen konnten nicht geladen werden.")
+
+    return data.map((row) => ({
+        id: row.id,
+        invoiceNumber: row.invoice_number,
+        status: row.status,
+        displayStatus: row.display_status,
+        grossTotal: Number(row.gross_total),
+        dueDate: row.due_date,
+        invoiceDate: row.invoice_date,
+    }))
+}
+
+export async function getProductTemplates(): Promise<ProductTemplate[]> {
+    const supabase = await createClient()
+    const { data, error } = await supabase
+        .from("product_templates")
+        .select("id, name, description, unit_price, tax_rate")
+        .eq("is_active", true)
+        .order("name")
+
+    if (error) throw new Error("Produktvorlagen konnten nicht geladen werden.")
+
+    return data.map((row) => ({
+        id: row.id,
+        name: row.name,
+        description: row.description,
+        unitPrice: Number(row.unit_price),
+        taxRate: Number(row.tax_rate),
+    }))
+}
+
+export async function peekNextInvoiceNumber(): Promise<string | null> {
+    const supabase = await createClient()
+    const { data, error } = await supabase.rpc("peek_next_invoice_number")
+    if (error || typeof data !== "string") return null
+    return data
+}
+
+export async function getInvoicesForPdf(invoiceIds: string[]): Promise<InvoicePdfData[]> {
+    const supabase = await createClient()
+    const { data, error } = await supabase
+        .from("invoices")
+        .select(`
+            invoice_number, invoice_date, due_date, company_name,
+            billing_street, billing_postal_code, billing_city, billing_country,
+            invoice_items ( position, description, quantity, unit_price, tax_rate )
+        `)
+        .in("id", invoiceIds)
+        .order("invoice_number")
+
+    if (error) throw new Error("Rechnungen konnten nicht geladen werden.")
+
+    return data.map((row) => ({
+        invoiceNumber: row.invoice_number,
+        invoiceDate: row.invoice_date,
+        dueDate: row.due_date,
+        companyName: row.company_name,
+        billingStreet: row.billing_street,
+        billingPostalCode: row.billing_postal_code,
+        billingCity: row.billing_city,
+        billingCountry: row.billing_country,
+        items: [...row.invoice_items]
+            .sort((a, b) => a.position - b.position)
+            .map((item) => ({
+                description: item.description,
+                quantity: Number(item.quantity),
+                unitPrice: Number(item.unit_price),
+                taxRate: Number(item.tax_rate),
+            })),
+    }))
+}

modules/shared/queries/profile.ts

@@ -0,0 +1,13 @@
+import "server-only"
+import { createClient } from "@/lib/supabase/server"
+
+export async function getClientId(profileId: string): Promise<string | null> {
+    const supabase = await createClient()
+    const { data } = await supabase
+        .from("profiles")
+        .select("client_id")
+        .eq("id", profileId)
+        .maybeSingle()
+
+    return data?.client_id ?? null
+}

modules/shared/queries/stammdaten.ts

@@ -1,24 +1,18 @@
 import "server-only"
 import { createAdminClient } from "@/lib/supabase/admin"
+import { getClientId } from "@/modules/shared/queries/profile"
 
 export async function getStammdaten(profileId: string) {
-    const supabase = createAdminClient()
+    const clientId = await getClientId(profileId)
 
-    const { data: profile, error: profileError } = await supabase
-        .from("profiles")
-        .select("client_id")
-        .eq("id", profileId)
-        .single()
-
-    if (profileError || !profile) return null
-
-    if (!profile.client_id) {
+    if (!clientId) {
         return { client: null, paymentDetails: null }
     }
 
+    const supabase = createAdminClient()
     const [clientRes, paymentRes] = await Promise.all([
-        supabase.from("clients").select("*").eq("id", profile.client_id).maybeSingle(),
-        supabase.from("client_payment_details").select("*").eq("client_id", profile.client_id).maybeSingle(),
+        supabase.from("clients").select("*").eq("id", clientId).maybeSingle(),
+        supabase.from("client_payment_details").select("*").eq("client_id", clientId).maybeSingle(),
     ])
 
     if (clientRes.error || paymentRes.error) {

modules/shared/schemas/invoice.ts

@@ -0,0 +1,68 @@
+import * as z from "zod";
+
+export const INVOICE_STATUSES = ["pending", "paid", "cancelled"] as const;
+export type InvoiceStatus = (typeof INVOICE_STATUSES)[number];
+
+const isoDate = z.string().regex(/^\d{4}-\d{2}-\d{2}$/, { error: "Ungültiges Datum." });
+
+export const InvoiceItemSchema = z.object({
+    productTemplateId: z.string().uuid().nullable(),
+    description: z.string().trim().min(1, { error: "Jede Position braucht eine Bezeichnung." }),
+    quantity: z.number().positive({ error: "Menge muss größer als 0 sein." }),
+    unitPrice: z.number().min(0, { error: "Preis darf nicht negativ sein." }),
+    taxRate: z.number().min(0).max(100),
+});
+
+export const InvoiceDraftSchema = z
+    .object({
+        profileId: z.string().uuid(),
+        companyName: z.string().trim().min(1, { error: "Firmenname ist erforderlich." }),
+        billingStreet: z.string().trim().min(1, { error: "Straße ist erforderlich." }),
+        billingPostalCode: z.string().trim().min(1, { error: "PLZ ist erforderlich." }),
+        billingCity: z.string().trim().min(1, { error: "Stadt ist erforderlich." }),
+        billingCountry: z.string().trim().length(2, { error: "Land muss ein 2-stelliger Code sein." }),
+        invoiceDate: isoDate,
+        dueDate: isoDate,
+        items: z.array(InvoiceItemSchema).min(1, { error: "Mindestens eine Position hinzufügen." }),
+    })
+    .refine((data) => data.dueDate >= data.invoiceDate, {
+        path: ["dueDate"],
+        error: "Fälligkeit darf nicht vor dem Rechnungsdatum liegen.",
+    });
+
+export type InvoiceItemDraft = z.infer<typeof InvoiceItemSchema>;
+export type InvoiceDraft = z.infer<typeof InvoiceDraftSchema>;
+
+export type InvoicePdfData = {
+    invoiceNumber: string;
+    invoiceDate: string;
+    dueDate: string;
+    companyName: string;
+    billingStreet: string;
+    billingPostalCode: string;
+    billingCity: string;
+    billingCountry: string;
+    items: { description: string; quantity: number; unitPrice: number; taxRate: number }[];
+};
+
+export type InvoiceListItem = {
+    id: string;
+    invoiceNumber: string;
+    status: InvoiceStatus;
+    displayStatus: InvoiceStatus | "overdue";
+    grossTotal: number;
+    dueDate: string;
+    invoiceDate: string;
+};
+
+export type ProductTemplate = {
+    id: string;
+    name: string;
+    description: string | null;
+    unitPrice: number;
+    taxRate: number;
+};
+
+export function firstIssueMessage(error: z.ZodError) {
+    return error.issues[0]?.message ?? "Bitte alle Pflichtfelder ausfüllen.";
+}

modules/shared/types/user.ts

@@ -1,4 +1,7 @@
 import { verifySession } from "@/lib/supabase/dal";
 
 
-export type Session = Awaited<ReturnType<typeof verifySession>>
+export type Session = Awaited<ReturnType<typeof verifySession>>
+
+// Used for the Admin to extract URI ID for Client Profile
+export type Params = Promise<{id: string}>

modules/shared/ui/components/billing-dialog.tsx

@@ -0,0 +1,392 @@
+"use client";
+
+import { useEffect, useState, useTransition } from "react";
+import { ArrowLeftIcon, EyeIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { createInvoice } from "@/modules/shared/actions/invoices";
+import {
+    InvoiceDraftSchema,
+    firstIssueMessage,
+    type InvoiceDraft,
+    type ProductTemplate,
+} from "@/modules/shared/schemas/invoice";
+import { formatCurrency, invoiceTotals, lineNet, toIsoDate } from "@/modules/shared/lib/invoice-math";
+
+export type BillingPrefill = {
+    companyName: string;
+    billingStreet: string;
+    billingPostalCode: string;
+    billingCity: string;
+    billingCountry: string;
+};
+
+type ItemRow = {
+    key: number;
+    productTemplateId: string | null;
+    description: string;
+    quantity: string;
+    unitPrice: string;
+    taxRate: string;
+};
+
+const DEFAULT_PAYMENT_DAYS = 14;
+
+const selectClassName =
+    "flex h-10 w-full rounded-md border border-input bg-background px-3 text-body outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50";
+
+let nextRowKey = 0;
+
+function emptyRow(): ItemRow {
+    return { key: nextRowKey++, productTemplateId: null, description: "", quantity: "1", unitPrice: "", taxRate: "0" };
+}
+
+function parseDecimal(value: string) {
+    const trimmed = value.trim();
+    const normalized = trimmed.includes(",") ? trimmed.replace(/\./g, "").replace(",", ".") : trimmed;
+    return normalized === "" ? Number.NaN : Number(normalized);
+}
+
+function formatInputNumber(value: number) {
+    return value.toLocaleString("de-DE", { maximumFractionDigits: 2, useGrouping: false });
+}
+
+function addDays(date: Date, days: number) {
+    const copy = new Date(date);
+    copy.setDate(copy.getDate() + days);
+    return copy;
+}
+
+function BillingDialogContent({
+    profileId,
+    prefill,
+    nextInvoiceNumber,
+    templates,
+    onDone,
+}: {
+    profileId: string;
+    prefill: BillingPrefill;
+    nextInvoiceNumber: string | null;
+    templates: ProductTemplate[];
+    onDone: () => void;
+}) {
+    const [header, setHeader] = useState(() => {
+        const today = new Date();
+        return {
+            ...prefill,
+            invoiceDate: toIsoDate(today),
+            dueDate: toIsoDate(addDays(today, DEFAULT_PAYMENT_DAYS)),
+        };
+    });
+    const [rows, setRows] = useState<ItemRow[]>(() => [emptyRow()]);
+    const [error, setError] = useState<string | null>(null);
+    const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+    const [previewPending, setPreviewPending] = useState(false);
+    const [createPending, startCreate] = useTransition();
+
+    useEffect(() => {
+        return () => {
+            if (previewUrl) URL.revokeObjectURL(previewUrl);
+        };
+    }, [previewUrl]);
+
+    const parsedItems = rows.map((row) => ({
+        productTemplateId: row.productTemplateId,
+        description: row.description,
+        quantity: parseDecimal(row.quantity),
+        unitPrice: parseDecimal(row.unitPrice),
+        taxRate: parseDecimal(row.taxRate),
+    }));
+    const validItems = parsedItems.filter(
+        (item) => Number.isFinite(item.quantity) && Number.isFinite(item.unitPrice) && Number.isFinite(item.taxRate)
+    );
+    const totals = invoiceTotals(validItems);
+
+    function updateHeader(field: keyof typeof header, value: string) {
+        setHeader((current) => ({ ...current, [field]: value }));
+    }
+
+    function updateRow(key: number, patch: Partial<ItemRow>) {
+        setRows((current) => current.map((row) => (row.key === key ? { ...row, ...patch } : row)));
+    }
+
+    function applyTemplate(key: number, templateId: string) {
+        const template = templates.find((entry) => entry.id === templateId);
+        if (!template) {
+            updateRow(key, { productTemplateId: null });
+            return;
+        }
+        updateRow(key, {
+            productTemplateId: template.id,
+            description: template.name,
+            unitPrice: formatInputNumber(template.unitPrice),
+            taxRate: formatInputNumber(template.taxRate),
+        });
+    }
+
+    function buildDraft(): InvoiceDraft | null {
+        const result = InvoiceDraftSchema.safeParse({ profileId, ...header, items: parsedItems });
+        if (!result.success) {
+            setError(firstIssueMessage(result.error));
+            return null;
+        }
+        setError(null);
+        return result.data;
+    }
+
+    async function handlePreview() {
+        const draft = buildDraft();
+        if (!draft) return;
+
+        setPreviewPending(true);
+        try {
+            const response = await fetch("/api/invoices/preview", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ draft, invoiceNumber: nextInvoiceNumber ?? "ENTWURF" }),
+            });
+            if (!response.ok) {
+                const body = await response.json().catch(() => null);
+                setError(body?.error ?? "Vorschau konnte nicht erstellt werden.");
+                return;
+            }
+            setPreviewUrl(URL.createObjectURL(await response.blob()));
+        } catch {
+            setError("Vorschau konnte nicht erstellt werden.");
+        } finally {
+            setPreviewPending(false);
+        }
+    }
+
+    function handleCreate() {
+        const draft = buildDraft();
+        if (!draft) return;
+
+        startCreate(async () => {
+            const result = await createInvoice(draft);
+            if ("error" in result) {
+                setError(result.error);
+                return;
+            }
+            onDone();
+        });
+    }
+
+    const createButton = (
+        <Button type="button" onClick={handleCreate} disabled={createPending || previewPending}>
+            {createPending ? "Wird erstellt..." : "Rechnung erstellen"}
+        </Button>
+    );
+
+    if (previewUrl) {
+        return (
+            <>
+                <DialogHeader>
+                    <DialogTitle>Vorschau</DialogTitle>
+                </DialogHeader>
+                <iframe src={previewUrl} title="Rechnungsvorschau" className="h-[70vh] w-full rounded-md border border-border" />
+                {error && <p className="text-sm text-destructive">{error}</p>}
+                <DialogFooter className="gap-2">
+                    <Button type="button" variant="outline" onClick={() => setPreviewUrl(null)} disabled={createPending}>
+                        <ArrowLeftIcon className="size-4" /> Zurück zum Bearbeiten
+                    </Button>
+                    {createButton}
+                </DialogFooter>
+            </>
+        );
+    }
+
+    return (
+        <>
+            <DialogHeader>
+                <DialogTitle>Neue Rechnung</DialogTitle>
+            </DialogHeader>
+            <FieldGroup>
+                <div className="grid gap-4 md:grid-cols-2">
+                    <Field>
+                        <FieldLabel htmlFor="companyName">Firmenname <span className="text-destructive">*</span></FieldLabel>
+                        <Input id="companyName" value={header.companyName} onChange={(e) => updateHeader("companyName", e.target.value)} />
+                    </Field>
+                    <Field>
+                        <FieldLabel htmlFor="invoiceNumber">Rechnungsnummer</FieldLabel>
+                        <Input id="invoiceNumber" value={nextInvoiceNumber ?? "Wird automatisch vergeben"} readOnly disabled />
+                        <FieldDescription>Wird beim Erstellen fortlaufend vergeben.</FieldDescription>
+                    </Field>
+                    <Field>
+                        <FieldLabel htmlFor="billingStreet">Straße <span className="text-destructive">*</span></FieldLabel>
+                        <Input id="billingStreet" value={header.billingStreet} onChange={(e) => updateHeader("billingStreet", e.target.value)} />
+                    </Field>
+                    <div className="grid grid-cols-[1fr_2fr_4rem] gap-2">
+                        <Field>
+                            <FieldLabel htmlFor="billingPostalCode">PLZ <span className="text-destructive">*</span></FieldLabel>
+                            <Input id="billingPostalCode" value={header.billingPostalCode} onChange={(e) => updateHeader("billingPostalCode", e.target.value)} />
+                        </Field>
+                        <Field>
+                            <FieldLabel htmlFor="billingCity">Stadt <span className="text-destructive">*</span></FieldLabel>
+                            <Input id="billingCity" value={header.billingCity} onChange={(e) => updateHeader("billingCity", e.target.value)} />
+                        </Field>
+                        <Field>
+                            <FieldLabel htmlFor="billingCountry">Land</FieldLabel>
+                            <Input
+                                id="billingCountry"
+                                maxLength={2}
+                                value={header.billingCountry}
+                                onChange={(e) => updateHeader("billingCountry", e.target.value.toUpperCase())}
+                            />
+                        </Field>
+                    </div>
+                    <Field>
+                        <FieldLabel htmlFor="invoiceDate">Rechnungsdatum <span className="text-destructive">*</span></FieldLabel>
+                        <Input id="invoiceDate" type="date" value={header.invoiceDate} onChange={(e) => updateHeader("invoiceDate", e.target.value)} />
+                    </Field>
+                    <Field>
+                        <FieldLabel htmlFor="dueDate">Fälligkeit <span className="text-destructive">*</span></FieldLabel>
+                        <Input id="dueDate" type="date" value={header.dueDate} onChange={(e) => updateHeader("dueDate", e.target.value)} />
+                    </Field>
+                </div>
+
+                <div className="flex flex-col gap-3">
+                    <div className="flex items-center justify-between">
+                        <h3 className="font-medium">Positionen</h3>
+                        <Button type="button" variant="outline" size="sm" onClick={() => setRows((current) => [...current, emptyRow()])}>
+                            <PlusIcon className="size-4" /> Position
+                        </Button>
+                    </div>
+                    {rows.map((row, index) => {
+                        const item = parsedItems[index];
+                        const net = Number.isFinite(item.quantity) && Number.isFinite(item.unitPrice) ? lineNet(item) : null;
+
+                        return (
+                            <div key={row.key} className="grid gap-2 rounded-lg border border-border p-3 md:grid-cols-[10rem_1fr_5rem_7rem_5rem_auto] md:items-end">
+                                <Field>
+                                    <FieldLabel htmlFor={`template-${row.key}`}>Vorlage</FieldLabel>
+                                    <select
+                                        id={`template-${row.key}`}
+                                        className={selectClassName}
+                                        value={row.productTemplateId ?? ""}
+                                        onChange={(e) => applyTemplate(row.key, e.target.value)}
+                                        disabled={templates.length === 0}
+                                    >
+                                        <option value="">{templates.length === 0 ? "Keine Vorlagen" : "Freie Position"}</option>
+                                        {templates.map((template) => (
+                                            <option key={template.id} value={template.id}>
+                                                {template.name} ({formatCurrency(template.unitPrice)})
+                                            </option>
+                                        ))}
+                                    </select>
+                                </Field>
+                                <Field>
+                                    <FieldLabel htmlFor={`description-${row.key}`}>Bezeichnung</FieldLabel>
+                                    <Input id={`description-${row.key}`} value={row.description} onChange={(e) => updateRow(row.key, { description: e.target.value })} />
+                                </Field>
+                                <Field>
+                                    <FieldLabel htmlFor={`quantity-${row.key}`}>Menge</FieldLabel>
+                                    <Input id={`quantity-${row.key}`} inputMode="decimal" value={row.quantity} onChange={(e) => updateRow(row.key, { quantity: e.target.value })} />
+                                </Field>
+                                <Field>
+                                    <FieldLabel htmlFor={`price-${row.key}`}>Preis/Einh. (€)</FieldLabel>
+                                    <Input id={`price-${row.key}`} inputMode="decimal" placeholder="0,00" value={row.unitPrice} onChange={(e) => updateRow(row.key, { unitPrice: e.target.value })} />
+                                </Field>
+                                <Field>
+                                    <FieldLabel htmlFor={`tax-${row.key}`}>MwSt %</FieldLabel>
+                                    <Input id={`tax-${row.key}`} inputMode="decimal" value={row.taxRate} onChange={(e) => updateRow(row.key, { taxRate: e.target.value })} />
+                                </Field>
+                                <div className="flex items-center justify-between gap-2 md:justify-end md:h-10">
+                                    <span className="min-w-20 text-right tabular-nums text-muted-foreground">
+                                        {net === null ? "–" : formatCurrency(net)}
+                                    </span>
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon-sm"
+                                        aria-label="Position entfernen"
+                                        disabled={rows.length === 1}
+                                        onClick={() => setRows((current) => current.filter((entry) => entry.key !== row.key))}
+                                    >
+                                        <Trash2Icon className="size-4" />
+                                    </Button>
+                                </div>
+                            </div>
+                        );
+                    })}
+                    <dl className="ml-auto grid w-full max-w-xs grid-cols-2 gap-1 text-sm tabular-nums">
+                        <dt className="text-muted-foreground">Netto</dt>
+                        <dd className="text-right">{formatCurrency(totals.net)}</dd>
+                        <dt className="text-muted-foreground">MwSt</dt>
+                        <dd className="text-right">{formatCurrency(totals.tax)}</dd>
+                        <dt className="font-medium">Gesamt</dt>
+                        <dd className="text-right font-medium">{formatCurrency(totals.gross)}</dd>
+                    </dl>
+                </div>
+
+                {error && <p className="text-sm text-destructive">{error}</p>}
+            </FieldGroup>
+            <DialogFooter className="gap-2">
+                <Button type="button" variant="outline" onClick={handlePreview} disabled={previewPending || createPending}>
+                    <EyeIcon className="size-4" /> {previewPending ? "Wird geladen..." : "Vorschau"}
+                </Button>
+                {createButton}
+            </DialogFooter>
+        </>
+    );
+}
+
+export function BillingDialog({
+    profileId,
+    prefill,
+    nextInvoiceNumber,
+    templates,
+    trigger,
+}: {
+    profileId: string;
+    prefill: BillingPrefill | null;
+    nextInvoiceNumber: string | null;
+    templates: ProductTemplate[];
+    trigger?: React.ReactElement;
+}) {
+    const [open, setOpen] = useState(false);
+    const [instanceKey, setInstanceKey] = useState(0);
+
+    function handleOpenChange(nextOpen: boolean) {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+            setInstanceKey((key) => key + 1);
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={handleOpenChange}>
+            <DialogTrigger render={trigger ?? <Button className="cursor-pointer" />}>
+                {!trigger && (
+                    <>
+                        <PlusIcon className="size-4" />
+                        Neue Rechnung
+                    </>
+                )}
+            </DialogTrigger>
+            <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-5xl">
+                {prefill ? (
+                    <BillingDialogContent
+                        key={instanceKey}
+                        profileId={profileId}
+                        prefill={prefill}
+                        nextInvoiceNumber={nextInvoiceNumber}
+                        templates={templates}
+                        onDone={() => handleOpenChange(false)}
+                    />
+                ) : (
+                    <>
+                        <DialogHeader>
+                            <DialogTitle>Neue Rechnung</DialogTitle>
+                        </DialogHeader>
+                        <p className="text-muted-foreground">
+                            Für diesen Client sind noch keine Stammdaten hinterlegt. Bitte zuerst die Stammdaten ausfüllen.
+                        </p>
+                    </>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}

modules/shared/ui/components/invoices-table.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState, useTransition } from "react";
+import { ArrowDownToLineIcon, PencilIcon, Search } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { updateInvoiceStatus } from "@/modules/shared/actions/invoices";
+import { INVOICE_STATUSES, type InvoiceListItem, type InvoiceStatus } from "@/modules/shared/schemas/invoice";
+import { formatCurrency, formatDate } from "@/modules/shared/lib/invoice-math";
+
+const STATUS_LABELS: Record<InvoiceListItem["displayStatus"], string> = {
+    pending: "Offen",
+    paid: "Bezahlt",
+    cancelled: "Storniert",
+    overdue: "Überfällig",
+};
+
+const STATUS_VARIANTS = {
+    pending: "neutral",
+    paid: "success",
+    cancelled: "error",
+    overdue: "warning",
+} as const;
+
+const checkboxClassName = "size-4 cursor-pointer accent-primary align-middle";
+
+function EditStatusDialog({ profileId, invoice }: { profileId: string; invoice: InvoiceListItem }) {
+    const [open, setOpen] = useState(false);
+    const [status, setStatus] = useState<InvoiceStatus>(invoice.status);
+    const [error, setError] = useState<string | null>(null);
+    const [pending, startTransition] = useTransition();
+
+    function handleOpenChange(nextOpen: boolean) {
+        setOpen(nextOpen);
+        if (nextOpen) {
+            setStatus(invoice.status);
+            setError(null);
+        }
+    }
+
+    function handleSave() {
+        startTransition(async () => {
+            const result = await updateInvoiceStatus(profileId, invoice.id, status);
+            if ("error" in result) {
+                setError(result.error);
+                return;
+            }
+            setOpen(false);
+        });
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={handleOpenChange}>
+            <DialogTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Status bearbeiten" />}>
+                <PencilIcon className="size-4" />
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{invoice.invoiceNumber} bearbeiten</DialogTitle>
+                </DialogHeader>
+                <Field>
+                    <FieldLabel htmlFor={`status-${invoice.id}`}>Status</FieldLabel>
+                    <select
+                        id={`status-${invoice.id}`}
+                        value={status}
+                        onChange={(event) => setStatus(event.target.value as InvoiceStatus)}
+                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 text-body outline-none"
+                    >
+                        {INVOICE_STATUSES.map((value) => (
+                            <option key={value} value={value}>
+                                {STATUS_LABELS[value]}
+                            </option>
+                        ))}
+                    </select>
+                </Field>
+                {error && <p className="text-sm text-destructive">{error}</p>}
+                <DialogFooter>
+                    <Button type="button" onClick={handleSave} disabled={pending || status === invoice.status}>
+                        {pending ? "Wird gespeichert..." : "Speichern"}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+function invoiceUrl(invoiceId: string) {
+    return `/api/invoices/pdf?id=${invoiceId}&inline`;
+}
+
+function openInvoice(event: React.MouseEvent<HTMLTableRowElement>, invoiceId: string) {
+    const target = event.target as HTMLElement;
+    // Klicks aus Portalen (Status-Dialog) bubbeln im React-Baum mit hoch, liegen im DOM aber außerhalb der Zeile.
+    if (!event.currentTarget.contains(target)) return;
+    if (target.closest("a, button, input, select, label")) return;
+    window.open(invoiceUrl(invoiceId), "_blank", "noopener,noreferrer");
+}
+
+function fileNameFromResponse(response: Response) {
+    const disposition = response.headers.get("Content-Disposition") ?? "";
+    return /filename="([^"]+)"/.exec(disposition)?.[1] ?? "Rechnungen";
+}
+
+export function InvoicesTable({
+    profileId,
+    invoices,
+    isAdmin,
+    actions,
+}: {
+    profileId: string;
+    invoices: InvoiceListItem[];
+    isAdmin: boolean;
+    actions?: React.ReactNode;
+}) {
+    const [query, setQuery] = useState("");
+    const [selected, setSelected] = useState<Set<string>>(new Set());
+    const [downloading, setDownloading] = useState(false);
+    const [downloadError, setDownloadError] = useState<string | null>(null);
+    const selectAllRef = useRef<HTMLInputElement>(null);
+
+    const visible = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        if (!needle) return invoices;
+        return invoices.filter(
+            (invoice) =>
+                invoice.invoiceNumber.toLowerCase().includes(needle) ||
+                STATUS_LABELS[invoice.displayStatus].toLowerCase().includes(needle)
+        );
+    }, [invoices, query]);
+
+    const selectedVisible = visible.filter((invoice) => selected.has(invoice.id));
+    const allVisibleSelected = visible.length > 0 && selectedVisible.length === visible.length;
+
+    useEffect(() => {
+        if (selectAllRef.current) {
+            selectAllRef.current.indeterminate = selectedVisible.length > 0 && !allVisibleSelected;
+        }
+    }, [selectedVisible.length, allVisibleSelected]);
+
+    function toggle(id: string) {
+        setSelected((current) => {
+            const next = new Set(current);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+        });
+    }
+
+    function toggleAllVisible() {
+        setSelected((current) => {
+            const next = new Set(current);
+            for (const invoice of visible) {
+                if (allVisibleSelected) next.delete(invoice.id);
+                else next.add(invoice.id);
+            }
+            return next;
+        });
+    }
+
+    async function handleDownload() {
+        if (selectedVisible.length === 0) return;
+
+        setDownloading(true);
+        setDownloadError(null);
+        try {
+            const params = new URLSearchParams(selectedVisible.map((invoice) => ["id", invoice.id]));
+            const response = await fetch(`/api/invoices/pdf?${params}`);
+            if (!response.ok) {
+                const body = await response.json().catch(() => null);
+                setDownloadError(body?.error ?? "Download fehlgeschlagen.");
+                return;
+            }
+
+            const url = URL.createObjectURL(await response.blob());
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = fileNameFromResponse(response);
+            link.click();
+            setTimeout(() => URL.revokeObjectURL(url), 1000);
+        } catch {
+            setDownloadError("Download fehlgeschlagen.");
+        } finally {
+            setDownloading(false);
+        }
+    }
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex w-full flex-col gap-3 md:flex-row md:items-center md:justify-between">
+                <div className="w-full max-w-lg">
+                    <InputGroup className="rounded-md focus-visible:ring-0">
+                        <InputGroupInput
+                            placeholder="Rechnungsnummer oder Status suchen..."
+                            value={query}
+                            onChange={(event) => setQuery(event.target.value)}
+                            aria-label="Rechnungen durchsuchen"
+                        />
+                        <InputGroupAddon>
+                            <Search />
+                        </InputGroupAddon>
+                    </InputGroup>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Button variant="secondary" onClick={handleDownload} disabled={selectedVisible.length === 0 || downloading}>
+                        <ArrowDownToLineIcon />
+                        {downloading
+                            ? "Wird erstellt..."
+                            : selectedVisible.length > 0
+                                ? `Download (${selectedVisible.length})`
+                                : "Download"}
+                    </Button>
+                    {actions}
+                </div>
+            </div>
+
+            {downloadError && <p className="text-sm text-destructive">{downloadError}</p>}
+
+            {invoices.length === 0 ? (
+                <p className="rounded-lg border border-border bg-surface/50 p-8 text-center text-muted-foreground">
+                    Noch keine Rechnungen vorhanden.
+                </p>
+            ) : (
+                <div className="overflow-hidden rounded-lg border border-border">
+                    <Table>
+                        <TableHeader>
+                            <TableRow className="hover:bg-transparent">
+                                <TableHead className="w-10">
+                                    <input
+                                        ref={selectAllRef}
+                                        type="checkbox"
+                                        className={checkboxClassName}
+                                        checked={allVisibleSelected}
+                                        onChange={toggleAllVisible}
+                                        disabled={visible.length === 0}
+                                        aria-label="Alle auswählen"
+                                    />
+                                </TableHead>
+                                <TableHead>Rechnung</TableHead>
+                                <TableHead>Status</TableHead>
+                                <TableHead className="text-right">Betrag</TableHead>
+                                <TableHead>Fällig am</TableHead>
+                                {isAdmin && <TableHead className="w-12" />}
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {visible.length === 0 ? (
+                                <TableRow className="hover:bg-transparent">
+                                    <TableCell colSpan={isAdmin ? 6 : 5} className="py-8 text-center text-muted-foreground">
+                                        Keine Treffer für „{query}“.
+                                    </TableCell>
+                                </TableRow>
+                            ) : (
+                                visible.map((invoice) => (
+                                    <TableRow
+                                        key={invoice.id}
+                                        data-state={selected.has(invoice.id) ? "selected" : undefined}
+                                        className="cursor-pointer"
+                                        onClick={(event) => openInvoice(event, invoice.id)}
+                                    >
+                                        <TableCell>
+                                            <input
+                                                type="checkbox"
+                                                className={checkboxClassName}
+                                                checked={selected.has(invoice.id)}
+                                                onChange={() => toggle(invoice.id)}
+                                                aria-label={`${invoice.invoiceNumber} auswählen`}
+                                            />
+                                        </TableCell>
+                                        <TableCell className="font-medium">
+                                            <a
+                                                href={invoiceUrl(invoice.id)}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className="hover:underline underline-offset-4"
+                                            >
+                                                {invoice.invoiceNumber}
+                                            </a>
+                                        </TableCell>
+                                        <TableCell>
+                                            <Badge variant={STATUS_VARIANTS[invoice.displayStatus]}>
+                                                {STATUS_LABELS[invoice.displayStatus]}
+                                            </Badge>
+                                        </TableCell>
+                                        <TableCell className="text-right tabular-nums">{formatCurrency(invoice.grossTotal)}</TableCell>
+                                        <TableCell className="tabular-nums text-muted-foreground">{formatDate(invoice.dueDate)}</TableCell>
+                                        {isAdmin && (
+                                            <TableCell>
+                                                <div className="flex justify-end">
+                                                    <EditStatusDialog profileId={profileId} invoice={invoice} />
+                                                </div>
+                                            </TableCell>
+                                        )}
+                                    </TableRow>
+                                ))
+                            )}
+                        </TableBody>
+                    </Table>
+                </div>
+            )}
+        </div>
+    );
+}

modules/shared/ui/views/billing-panel.tsx

@@ -0,0 +1,58 @@
+import { getClientId } from "@/modules/shared/queries/profile"
+import { getInvoices, getProductTemplates, peekNextInvoiceNumber } from "@/modules/shared/queries/invoices"
+import { getStammdaten } from "@/modules/shared/queries/stammdaten"
+import { BillingDialog, type BillingPrefill } from "@/modules/shared/ui/components/billing-dialog"
+import { InvoicesTable } from "@/modules/shared/ui/components/invoices-table"
+
+async function AdminBillingDialog({ profileId }: { profileId: string }) {
+    const [stammdaten, templates, nextInvoiceNumber] = await Promise.all([
+        getStammdaten(profileId),
+        getProductTemplates(),
+        peekNextInvoiceNumber(),
+    ])
+
+    const client = stammdaten?.client
+    const prefill: BillingPrefill | null = client
+        ? {
+            companyName: client.company_name,
+            billingStreet: client.billing_street ?? client.street,
+            billingPostalCode: client.billing_postal_code ?? client.postal_code,
+            billingCity: client.billing_city ?? client.city,
+            billingCountry: client.billing_country ?? client.country,
+        }
+        : null
+
+    return (
+        <BillingDialog
+            profileId={profileId}
+            prefill={prefill}
+            nextInvoiceNumber={nextInvoiceNumber}
+            templates={templates}
+        />
+    )
+}
+
+export async function BillingPanel({
+    profileId,
+    isAdmin,
+}: {
+    profileId: string
+    isAdmin: boolean
+}) {
+    const clientId = await getClientId(profileId)
+    const invoices = clientId ? await getInvoices(clientId) : []
+
+    return (
+        <div className="flex flex-col gap-8 w-full">
+            <div className="w-full flex flex-row justify-between items-center">
+                <h1 className="text-3xl font-semibold">Rechnungen</h1>
+            </div>
+            <InvoicesTable
+                profileId={profileId}
+                invoices={invoices}
+                isAdmin={isAdmin}
+                actions={isAdmin ? <AdminBillingDialog profileId={profileId} /> : undefined}
+            />
+        </div>
+    )
+}

modules/shared/ui/views/credentials-panel.tsx

@@ -0,0 +1,25 @@
+import { getCredentials } from "@/modules/shared/queries/credentials"
+import { getClientId } from "@/modules/shared/queries/profile"
+import { CredentialsTable } from "@/modules/shared/ui/components/credentials-table"
+import { CredentialDialog } from "@/modules/shared/ui/components/credential-dialog"
+
+export async function CredentialsPanel({
+    profileId,
+    isAdmin,
+}: {
+    profileId: string
+    isAdmin: boolean
+}) {
+    const clientId = await getClientId(profileId)
+    const credentials = clientId ? await getCredentials(clientId) : []
+
+    return (
+        <div className="flex flex-col gap-8 w-full">
+            <div className="w-full flex flex-row justify-between items-center">
+                <h1 className="text-3xl font-semibold">Passwörter</h1>
+                <CredentialDialog profileId={profileId} />
+            </div>
+            <CredentialsTable profileId={profileId} credentials={credentials} isAdmin={isAdmin} />
+        </div>
+    )
+}

next.config.ts

@@ -1,7 +1,10 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  // Fonts und Logo werden zur Laufzeit per fs gelesen und müssen mit ins Deployment.
+  outputFileTracingIncludes: {
+    "/api/invoices/*": ["./modules/shared/pdf/assets/**/*"],
+  },
 };
 
 export default nextConfig;

package-lock.json

@@ -9,10 +9,12 @@
       "version": "0.1.0",
       "dependencies": {
         "@base-ui/react": "^1.8.0",
+        "@react-pdf/renderer": "^4.9.0",
         "@supabase/ssr": "^0.12.7",
         "@supabase/supabase-js": "^2.117.2",
         "class-variance-authority": "^0.7.1",
         "cn": "^0.4.0",
+        "fflate": "^0.8.3",
         "lucide-react": "^1.48.0",
         "next": "16.3.6",
         "next-themes": "^0.4.6",
@@ -1835,6 +1837,30 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@noble/ciphers": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
+      "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@noble/hashes": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1880,6 +1906,181 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@react-pdf/fns": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@react-pdf/fns/-/fns-3.1.3.tgz",
+      "integrity": "sha512-0I7pApDr1/RLAKbizuLy/IHTEa93LSPy/bEwYniboC3Xqnp6Od8xFJKbKEzGw2wh/5zKFFwl00g4t9RwgIMc3w==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/font": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-4.1.2.tgz",
+      "integrity": "sha512-RT/jiGWIRjIC9c4S9NiqhEyfuA6YL+DtWL3Rm+k+zQhfeHYvHwGzFxr7ZJzThIMrT8sIQy+mpvFvfYyitEei/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/types": "^2.14.0",
+        "fontkit": "^2.0.2",
+        "is-url": "^1.2.4",
+        "pdfkit": "0.20.1"
+      }
+    },
+    "node_modules/@react-pdf/hyphenate": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/hyphenate/-/hyphenate-0.1.0.tgz",
+      "integrity": "sha512-CWulbuusHh2Lnos9ZffT3ZYfjCt332Yl8wjSyCKWbwhbTpe/VdFt53fM5elPp3HU3R6tzH6j3oYlLXDwC2WEHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "hyphen": "~1.6.4"
+      }
+    },
+    "node_modules/@react-pdf/image": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-3.1.2.tgz",
+      "integrity": "sha512-89vlvZCCv1hPunFtyeS2rJTRL8h2yYmTI97AM4ppibS79zGsPFbqz/YrAunndcHB9uwGdn5S3+5k18mj0L2vkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/svg": "^1.1.1",
+        "jay-peg": "^1.1.1",
+        "png-js": "^2.0.0"
+      }
+    },
+    "node_modules/@react-pdf/layout": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-5.2.0.tgz",
+      "integrity": "sha512-Hzf9cShT1bKkr9tZ+A9qK/wHqUloOCgbNer72EquQS6QzqVGiDdtt6Wh9lQXwkd89U7yZolTLnFqP/dRdoRROw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.3",
+        "@react-pdf/image": "^3.1.2",
+        "@react-pdf/paginate": "1.0.1",
+        "@react-pdf/primitives": "^4.4.0",
+        "@react-pdf/stylesheet": "^6.3.2",
+        "@react-pdf/textkit": "^7.0.1",
+        "@react-pdf/types": "^2.14.0",
+        "emoji-regex-xs": "^1.0.0",
+        "queue": "^6.0.1",
+        "yoga-layout": "^3.2.1"
+      }
+    },
+    "node_modules/@react-pdf/paginate": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/paginate/-/paginate-1.0.1.tgz",
+      "integrity": "sha512-JN6teDqkdpkcRhdGZqyrr7Y8flgTtyI8XS3yaBQLyiGjEBPbR9m/19cz2z3JkqYpApau5pEHZlLjwGqMurWysw==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/primitives": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-4.4.0.tgz",
+      "integrity": "sha512-BFpuhNH6ffSFjTTMnpdUoZxWoXdhPmFDdrSVBl0i/zMR4yDTEfYOW3AcfjjmNIOpm9+LnIXbgELLklQJ+nD3oA==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/reconciler": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/reconciler/-/reconciler-2.0.0.tgz",
+      "integrity": "sha512-7zaPRujpbHSmCpIrZ+b9HSTJHthcVZzX0Wx7RzvQGsGBUbHP4p6s5itXrAIOuQuPvDepoHGNOvf6xUuMVvdoyw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "scheduler": "0.25.0-rc-603e6108-20241029"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/reconciler/node_modules/scheduler": {
+      "version": "0.25.0-rc-603e6108-20241029",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc-603e6108-20241029.tgz",
+      "integrity": "sha512-pFwF6H1XrSdYYNLfOcGlM28/j8CGLu8IvdrxqhjWULe2bPcKiKW4CV+OWqR/9fT52mywx65l7ysNkjLKBda7eA==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/render": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-4.7.0.tgz",
+      "integrity": "sha512-UEMgR7gBmCJiKpuu9alY6QeZVNB+7b4DGHc7Hi8QIl+5PfHvyq+TV70N7+ngZ6wN7hF3XSiWz7GDuYxPIx5eRw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.3",
+        "@react-pdf/primitives": "^4.4.0",
+        "@react-pdf/textkit": "^7.0.1",
+        "@react-pdf/types": "^2.14.0",
+        "abs-svg-path": "^0.1.1",
+        "color-string": "^2.1.4",
+        "normalize-svg-path": "^1.1.0",
+        "parse-svg-path": "^0.1.2",
+        "svg-arc-to-cubic-bezier": "^3.2.0"
+      }
+    },
+    "node_modules/@react-pdf/renderer": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-4.9.0.tgz",
+      "integrity": "sha512-RAbARMwjcSYEpqpaWoWXz0uOGF1HjAl5hdJr889r5mgkPhF9xhX4CXSvcEbLTgFVj+KWbcar31MzcXYoANk/Ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.3",
+        "@react-pdf/font": "^4.1.2",
+        "@react-pdf/layout": "^5.2.0",
+        "@react-pdf/primitives": "^4.4.0",
+        "@react-pdf/reconciler": "^2.0.0",
+        "@react-pdf/render": "^4.7.0",
+        "@react-pdf/types": "^2.14.0",
+        "events": "^3.3.0",
+        "object-assign": "^4.1.1",
+        "pdfkit": "0.20.1",
+        "prop-types": "^15.6.2",
+        "queue": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/stylesheet": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-6.3.2.tgz",
+      "integrity": "sha512-UR247sNBx2k3RdL8JUCpUiyx39yQsUABagv3uAi91iMZCORE+fSCsOh7MOcEImmpms4GihydLGudbngI5g14PA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.3",
+        "@react-pdf/types": "^2.14.0",
+        "color-string": "^2.1.4",
+        "hsl-to-hex": "^1.0.0",
+        "media-engine": "^2.0.0",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "node_modules/@react-pdf/svg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/svg/-/svg-1.1.1.tgz",
+      "integrity": "sha512-m1GmGxV2wg/3VpoQ0aCJ598fBedCCfN+HtxKx1lq5kdwUWEaTbfXI1DGFAUedprFDd/i24okKFaUhV/KVZIqIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/primitives": "^4.4.0"
+      }
+    },
+    "node_modules/@react-pdf/textkit": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/textkit/-/textkit-7.0.1.tgz",
+      "integrity": "sha512-ljY/YoEETIOR/+zxWdLLmKlupz8/nBsbmxglM3mDRco62UEzEPnIeMEzYVVVraovCAJC2t+50gKFNSV17FYxbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.3",
+        "@react-pdf/hyphenate": "^0.1.0",
+        "bidi-js": "^1.0.2",
+        "unicode-properties": "^1.4.1"
+      }
+    },
+    "node_modules/@react-pdf/types": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.14.0.tgz",
+      "integrity": "sha512-TYHpThdf2sz/d1g+CP9nWjYCJ8BYBUN5ORL6+60A85Js9S/YouK8OXzi+hDpYUSZJTOdYXdRxUNeG2oW8//Ulg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/font": "^4.1.2",
+        "@react-pdf/primitives": "^4.4.0",
+        "@react-pdf/stylesheet": "^6.3.2"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -3064,6 +3265,12 @@
         "win32"
       ]
     },
+    "node_modules/abs-svg-path": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
+      "integrity": "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==",
+      "license": "MIT"
+    },
     "node_modules/accepts": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
@@ -3447,6 +3654,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.11.26",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.26.tgz",
@@ -3459,6 +3686,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.1.0.tgz",
+      "integrity": "sha512-fX1Onk0tdVPC7obPWB5EbJ1z7NVhLq4m2xZLq2YXBkxzMXIGRpNMU88n0EPgWseKl12J7zXs7qrDxPK4sRs2fg==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/body-parser": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.3.0.tgz",
@@ -3519,6 +3755,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.29.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.29.1.tgz",
@@ -3715,6 +3960,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -3762,6 +4016,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-2.1.4.tgz",
+      "integrity": "sha512-Bb6Cq8oq0IjDOe8wJmi4JeNn763Xs9cfrBcaylK1tPypWzyoy2G3l90v9k64kjphl/ZJjPIShFztenRomi8WTg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/color-string/node_modules/color-name": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.1.1.tgz",
+      "integrity": "sha512-p2FdgwVx1a9yWBHP2wI0VgShkDpgN4kZISkxdNipGBJWpa5G6b04OINlVWCyJj0JmfvcPrgqt95E9k8yvaOJFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/commander": {
       "version": "14.0.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
@@ -4199,6 +4474,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
     "node_modules/diff": {
       "version": "8.0.4",
       "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.4.tgz",
@@ -4281,6 +4562,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
+      "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
+      "license": "MIT"
+    },
     "node_modules/encodeurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -4988,6 +5275,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/eventsource": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
@@ -5189,6 +5485,12 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
     "node_modules/figures": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz",
@@ -5288,6 +5590,23 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -5691,6 +6010,21 @@
         "node": ">=16.9.0"
       }
     },
+    "node_modules/hsl-to-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz",
+      "integrity": "sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==",
+      "license": "MIT",
+      "dependencies": {
+        "hsl-to-rgb-for-reals": "^1.1.0"
+      }
+    },
+    "node_modules/hsl-to-rgb-for-reals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz",
+      "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==",
+      "license": "ISC"
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -5720,6 +6054,12 @@
         "node": ">=18.18.0"
       }
     },
+    "node_modules/hyphen": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.6.6.tgz",
+      "integrity": "sha512-XtqmnT+b9n5MX+MsqluFAVTIenbtC25iskW0Z+jLd+awfhA+ZbWKWQMIvLJccGoa2bM1R6juWJ27cZxIFOmkWw==",
+      "license": "ISC"
+    },
     "node_modules/iceberg-js": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
@@ -6327,6 +6667,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
+      "license": "MIT"
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -6419,6 +6765,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jay-peg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jay-peg/-/jay-peg-1.1.1.tgz",
+      "integrity": "sha512-D62KEuBxz/ip2gQKOEhk/mx14o7eiFRaU+VNNSP4MOiIkwb/D6B3G1Mfas7C/Fit8EsSV2/IWjZElx/Gs6A4ww==",
+      "license": "MIT",
+      "dependencies": {
+        "restructure": "^3.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@@ -6865,6 +7220,25 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -6938,7 +7312,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -6984,6 +7357,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/media-engine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-2.0.0.tgz",
+      "integrity": "sha512-FqNmlXKYrp5d3g7xEOMJb+6gXZE0fTssdyIQqYR4LbkifbNbS0hDylhNDOh8r6tCgLboHd8+mwgH2njgSYDpnQ==",
+      "license": "MIT"
+    },
     "node_modules/media-typer": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.1.tgz",
@@ -7300,6 +7679,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/normalize-svg-path": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz",
+      "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==",
+      "license": "MIT",
+      "dependencies": {
+        "svg-arc-to-cubic-bezier": "^3.0.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
@@ -7663,6 +8051,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7705,6 +8099,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-svg-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
+      "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==",
+      "license": "MIT"
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -7756,6 +8156,20 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/pdfkit": {
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/pdfkit/-/pdfkit-0.20.1.tgz",
+      "integrity": "sha512-1rRXK6x5o8I/3dBrBzXfxibpHpkfCnIA7EBAES7pEpGFc/65inMLlA8SalGWpJfal7BGekxeLf6A30IOpQpc5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@noble/ciphers": "^1.3.0",
+        "@noble/hashes": "^1.8.0",
+        "fflate": "^0.8.3",
+        "fontkit": "^2.0.4",
+        "linebreak": "^1.1.0",
+        "png-js": "^2.0.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7856,6 +8270,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/png-js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/png-js/-/png-js-2.0.0.tgz",
+      "integrity": "sha512-GdzJuUMc6ZSpxFJWVxtOH1bzYHym+TOnveqUjb+VJIbZWbZzyiRGFiKhbiielfpYbgMlhHVhsJ0FTazfuRFkMA==",
+      "dependencies": {
+        "fflate": "^0.8.2"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -7907,6 +8329,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
     "node_modules/powershell-utils": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/powershell-utils/-/powershell-utils-0.2.1.tgz",
@@ -7970,7 +8398,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -8021,6 +8448,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -8094,7 +8530,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/recast": {
@@ -8246,6 +8681,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -9144,6 +9585,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-arc-to-cubic-bezier": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
+      "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==",
+      "license": "ISC"
+    },
     "node_modules/systeminformation": {
       "version": "5.33.13",
       "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.33.13.tgz",
@@ -9191,6 +9638,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -9506,6 +9959,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
     "node_modules/unicorn-magic": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
@@ -9841,6 +10314,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yoga-layout": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
+      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
+      "license": "MIT"
+    },
     "node_modules/zod": {
       "version": "4.6.5",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.6.5.tgz",

package.json

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.8.0",
+    "@react-pdf/renderer": "^4.9.0",
     "@supabase/ssr": "^0.12.7",
     "@supabase/supabase-js": "^2.117.2",
     "class-variance-authority": "^0.7.1",
     "cn": "^0.4.0",
+    "fflate": "^0.8.3",
     "lucide-react": "^1.48.0",
     "next": "16.3.6",
     "next-themes": "^0.4.6",