feat: group proceeding types by jurisdiction (UPC/DE) + add German patent proceedings

frontend/src/components/cases/CaseForm.tsx

@@ -1,16 +1,14 @@
 "use client";
 
 import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { ProceedingType } from "@/lib/types";
 
-const TYPE_OPTIONS = [
+const JURISDICTION_LABELS: Record<string, string> = {
-  { value: "", label: "-- Typ wählen --" },
+  UPC: "UPC-Verfahren",
-  { value: "INF", label: "Verletzungsklage (INF)" },
+  DE: "Deutsche Patentverfahren",
-  { value: "REV", label: "Widerruf (REV)" },
+};
-  { value: "CCR", label: "Einstweilige Verfügung (CCR)" },
-  { value: "APP", label: "Berufung (APP)" },
-  { value: "PI", label: "Vorläufiger Rechtsschutz (PI)" },
-  { value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
-];
 
 export interface CaseFormData {
   case_number: string;
@@ -34,6 +32,10 @@ export function CaseForm({
   isSubmitting,
   submitLabel = "Akte anlegen",
 }: CaseFormProps) {
+  const { data: proceedingTypes } = useQuery({
+    queryKey: ["proceeding-types"],
+    queryFn: () => api.get<ProceedingType[]>("/proceeding-types"),
+  });
   const [form, setForm] = useState<CaseFormData>({
     case_number: initialData?.case_number ?? "",
     title: initialData?.title ?? "",
@@ -139,11 +141,24 @@ export function CaseForm({
             onChange={(e) => update("case_type", e.target.value)}
             className={inputClass}
           >
-            {TYPE_OPTIONS.map((o) => (
+            <option value="">-- Typ wählen --</option>
-              <option key={o.value} value={o.value}>
+            {(() => {
-                {o.label}
+              const grouped = new Map<string, ProceedingType[]>();
+              for (const pt of proceedingTypes ?? []) {
+                const key = pt.jurisdiction ?? "Sonstige";
+                if (!grouped.has(key)) grouped.set(key, []);
+                grouped.get(key)!.push(pt);
+              }
+              return Array.from(grouped.entries()).map(([jurisdiction, types]) => (
+                <optgroup key={jurisdiction} label={JURISDICTION_LABELS[jurisdiction] ?? jurisdiction}>
+                  {types.map((pt) => (
+                    <option key={pt.id} value={pt.code}>
+                      {pt.name} ({pt.code})
                     </option>
                   ))}
+                </optgroup>
+              ));
+            })()}
           </select>
         </div>
         <div>

frontend/src/components/deadlines/DeadlineCalculator.tsx

@@ -85,11 +85,27 @@ export function DeadlineCalculator() {
               className={inputClass}
             >
               <option value="">Bitte wählen...</option>
-              {proceedingTypes?.map((pt) => (
+              {(() => {
+                const grouped = new Map<string, ProceedingType[]>();
+                for (const pt of proceedingTypes ?? []) {
+                  const key = pt.jurisdiction ?? "Sonstige";
+                  if (!grouped.has(key)) grouped.set(key, []);
+                  grouped.get(key)!.push(pt);
+                }
+                const labels: Record<string, string> = {
+                  UPC: "UPC-Verfahren",
+                  DE: "Deutsche Patentverfahren",
+                };
+                return Array.from(grouped.entries()).map(([jurisdiction, types]) => (
+                  <optgroup key={jurisdiction} label={labels[jurisdiction] ?? jurisdiction}>
+                    {types.map((pt) => (
                       <option key={pt.id} value={pt.code}>
                         {pt.name} ({pt.code})
                       </option>
                     ))}
+                  </optgroup>
+                ));
+              })()}
             </select>
           </div>
           <div>

frontend/src/components/deadlines/DeadlineWizard.tsx

@@ -276,13 +276,30 @@ export function DeadlineWizard() {
           )}
         </div>
 
-        <div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6">
+        <div className="mt-4 space-y-4">
           {typesLoading ? (
-            <div className="col-span-full flex justify-center py-4">
+            <div className="flex justify-center py-4">
               <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
             </div>
           ) : (
-            proceedingTypes?.map((pt) => (
+            (() => {
+              const grouped = new Map<string, ProceedingType[]>();
+              for (const pt of proceedingTypes ?? []) {
+                const key = pt.jurisdiction ?? "Sonstige";
+                if (!grouped.has(key)) grouped.set(key, []);
+                grouped.get(key)!.push(pt);
+              }
+              const labels: Record<string, string> = {
+                UPC: "UPC-Verfahren",
+                DE: "Deutsche Patentverfahren",
+              };
+              return Array.from(grouped.entries()).map(([jurisdiction, types]) => (
+                <div key={jurisdiction}>
+                  <div className="mb-2 text-xs font-medium text-neutral-500">
+                    {labels[jurisdiction] ?? jurisdiction}
+                  </div>
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6">
+                    {types.map((pt) => (
                       <button
                         key={pt.id}
                         onClick={() => handleTypeSelect(pt.code)}
@@ -301,7 +318,11 @@ export function DeadlineWizard() {
                         </div>
                         <div className="mt-1 text-xs leading-tight opacity-80">{pt.name}</div>
                       </button>
-            ))
+                    ))}
+                  </div>
+                </div>
+              ));
+            })()
           )}
         </div>
       </div>
@@ -444,7 +465,7 @@ export function DeadlineWizard() {
             <Scale className="h-6 w-6 text-neutral-400" />
           </div>
           <p className="mt-3 text-sm font-medium text-neutral-700">
-            UPC-Fristenbestimmung
+            Fristenbestimmung
           </p>
           <p className="mt-1 max-w-sm text-xs text-neutral-500">
             Waehlen Sie die Verfahrensart und geben Sie das Datum des ausloesenden Ereignisses ein.