feat: AI features — drafting, strategy, similar cases (P2)

frontend/src/app/(app)/cases/[id]/ki/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useState } from "react";
+import { useParams } from "next/navigation";
+import { Brain, FileText, Search } from "lucide-react";
+import { CaseStrategy } from "@/components/ai/CaseStrategy";
+import { DocumentDrafter } from "@/components/ai/DocumentDrafter";
+import { SimilarCaseFinder } from "@/components/ai/SimilarCaseFinder";
+
+type AITab = "strategy" | "draft" | "similar";
+
+const TABS: { id: AITab; label: string; icon: typeof Brain }[] = [
+  { id: "strategy", label: "KI-Strategie", icon: Brain },
+  { id: "draft", label: "KI-Entwurf", icon: FileText },
+  { id: "similar", label: "Aehnliche Faelle", icon: Search },
+];
+
+export default function CaseAIPage() {
+  const { id } = useParams<{ id: string }>();
+  const [activeTab, setActiveTab] = useState<AITab>("strategy");
+
+  return (
+    <div>
+      {/* Sub-tabs */}
+      <div className="mb-6 flex gap-1 rounded-lg border border-neutral-200 bg-neutral-50 p-1">
+        {TABS.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+                isActive
+                  ? "bg-white text-neutral-900 shadow-sm"
+                  : "text-neutral-500 hover:text-neutral-700"
+              }`}
+            >
+              <tab.icon className="h-4 w-4" />
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Content */}
+      {activeTab === "strategy" && <CaseStrategy caseId={id} />}
+      {activeTab === "draft" && <DocumentDrafter caseId={id} />}
+      {activeTab === "similar" && <SimilarCaseFinder caseId={id} />}
+    </div>
+  );
+}

frontend/src/app/(app)/cases/[id]/layout.tsx

@@ -17,12 +17,7 @@ import {
   StickyNote,
   AlertTriangle,
   ScrollText,
-<<<<<<< HEAD
-  Timer,
-||||||| 8e65463
-=======
-  FilePlus,
->>>>>>> mai/ritchie/p1-document-templates
+  Brain,
 } from "lucide-react";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
@@ -52,9 +47,9 @@ const TABS = [
   { segment: "dokumente", label: "Dokumente", icon: FileText },
   { segment: "parteien", label: "Parteien", icon: Users },
   { segment: "mitarbeiter", label: "Mitarbeiter", icon: UserCheck },
-  { segment: "zeiterfassung", label: "Zeiterfassung", icon: Timer },
   { segment: "notizen", label: "Notizen", icon: StickyNote },
   { segment: "protokoll", label: "Protokoll", icon: ScrollText },
+  { segment: "ki", label: "KI", icon: Brain },
 ] as const;
 
 const TAB_LABELS: Record<string, string> = {
@@ -63,9 +58,9 @@ const TAB_LABELS: Record<string, string> = {
   dokumente: "Dokumente",
   parteien: "Parteien",
   mitarbeiter: "Mitarbeiter",
-  zeiterfassung: "Zeiterfassung",
   notizen: "Notizen",
   protokoll: "Protokoll",
+  ki: "KI",
 };
 
 function CaseDetailSkeleton() {
@@ -179,28 +174,19 @@ export default function CaseDetailLayout({
             {caseDetail.court_ref && <span>({caseDetail.court_ref})</span>}
           </div>
         </div>
-        <div className="flex flex-col items-end gap-2">
-          <Link
-            href={`/vorlagen?case_id=${id}`}
-            className="flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
-          >
-            <FilePlus className="h-3.5 w-3.5" />
-            Schriftsatz erstellen
-          </Link>
-          <div className="text-right text-xs text-neutral-400">
-            <p>
-              Erstellt:{" "}
-              {format(new Date(caseDetail.created_at), "d. MMM yyyy", {
-                locale: de,
-              })}
-            </p>
-            <p>
-              Aktualisiert:{" "}
-              {format(new Date(caseDetail.updated_at), "d. MMM yyyy", {
-                locale: de,
-              })}
-            </p>
-          </div>
+        <div className="text-right text-xs text-neutral-400">
+          <p>
+            Erstellt:{" "}
+            {format(new Date(caseDetail.created_at), "d. MMM yyyy", {
+              locale: de,
+            })}
+          </p>
+          <p>
+            Aktualisiert:{" "}
+            {format(new Date(caseDetail.updated_at), "d. MMM yyyy", {
+              locale: de,
+            })}
+          </p>
         </div>
       </div>