m/KanzlAI-mGMT
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
m
2026-03-30 14:33:28 +02:00
parent eca0cde5e7 dea49f6f8e
commit 40a11a4c49
3 changed files with 93 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/cases/CaseForm.tsx
View File

@@ -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 = [
{ value: "", label: "-- Typ wählen --" },
{ value: "INF", label: "Verletzungsklage (INF)" },
{ 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" },
];
const JURISDICTION_LABELS: Record<string, string> = {
UPC: "UPC-Verfahren",
DE: "Deutsche Patentverfahren",
};
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 key={o.value} value={o.value}>
{o.label}
</option>
))}
<option value="">-- Typ wählen --</option>
{(() => {
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>

26
frontend/src/components/deadlines/DeadlineCalculator.tsx
View File

@@ -85,11 +85,27 @@ export function DeadlineCalculator() {
className={inputClass}
>
<option value="">Bitte wählen...</option>
{proceedingTypes?.map((pt) => (
<option key={pt.id} value={pt.code}>
{pt.name} ({pt.code})
</option>
))}
{(() => {
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>

65
frontend/src/components/deadlines/DeadlineWizard.tsx
View File

@@ -276,32 +276,53 @@ 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) => (
<button
key={pt.id}
onClick={() => handleTypeSelect(pt.code)}
className={`rounded-lg border px-3 py-2.5 text-left transition-all ${
selectedType === pt.code
? "border-neutral-900 bg-neutral-900 text-white shadow-sm"
: "border-neutral-200 bg-white text-neutral-700 hover:border-neutral-400 hover:bg-neutral-50"
}`}
>
<div className="flex items-center gap-1.5">
<div
className="h-2 w-2 rounded-full"
style={{ backgroundColor: pt.default_color }}
/>
<span className="text-xs font-semibold">{pt.code}</span>
(() => {
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)}
className={`rounded-lg border px-3 py-2.5 text-left transition-all ${
selectedType === pt.code
? "border-neutral-900 bg-neutral-900 text-white shadow-sm"
: "border-neutral-200 bg-white text-neutral-700 hover:border-neutral-400 hover:bg-neutral-50"
}`}
>
<div className="flex items-center gap-1.5">
<div
className="h-2 w-2 rounded-full"
style={{ backgroundColor: pt.default_color }}
/>
<span className="text-xs font-semibold">{pt.code}</span>
</div>
<div className="mt-1 text-xs leading-tight opacity-80">{pt.name}</div>
</button>
))}
</div>
</div>
<div className="mt-1 text-xs leading-tight opacity-80">{pt.name}</div>
</button>
))
));
})()
)}
</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.