Added Entity Wiki

backend/src/routes/wiki.ts

@@ -1,17 +1,37 @@
 import { FastifyInstance } from "fastify"
-import { and, eq, isNull, asc, desc } from "drizzle-orm"
+import { and, eq, isNull, asc, inArray } from "drizzle-orm"
-import { wikiPages, authUsers } from "../../db/schema/"
+// WICHTIG: Hier müssen die Schemas der Entitäten importiert werden!
+import {
+    wikiPages,
+    authUsers,
+    customers,
+    projects,
+    plants,
+    products,
+    inventoryitems,
+    // ... weitere Schemas hier importieren
+} from "../../db/schema/"
 
-// Types für Request Body & Query (statt Zod)
+// Konfiguration: Welche Entitäten sollen im Wiki auftauchen?
+const ENTITY_CONFIG: Record<string, { table: any, labelField: any, rootLabel: string, idField: 'id' | 'uuid' }> = {
+    'customers': { table: customers, labelField: customers.name, rootLabel: 'Kunden', idField: 'id' },
+    'projects': { table: projects, labelField: projects.name, rootLabel: 'Projekte', idField: 'id' },
+    'plants': { table: plants, labelField: plants.name, rootLabel: 'Objekte', idField: 'id' },
+    'products': { table: products, labelField: products.name, rootLabel: 'Artikel', idField: 'id' },
+    'inventoryitems': { table: inventoryitems, labelField: inventoryitems.name, rootLabel: 'Inventarartikel', idField: 'id' },
+    // Hier weitere hinzufügen (z.B. vehicles, products...)
+}
+
+// Types
 interface WikiTreeQuery {
     entityType?: string
-    entityId?: number    // Kommt als string oder number an, je nach parser
+    entityId?: number
     entityUuid?: string
 }
 
 interface WikiCreateBody {
     title: string
-    parentId?: string    // UUID
+    parentId?: string
     isFolder?: boolean
     entityType?: string
     entityId?: number
@@ -20,42 +40,53 @@ interface WikiCreateBody {
 
 interface WikiUpdateBody {
     title?: string
-    content?: any        // Das Tiptap JSON Object
+    content?: any
     parentId?: string | null
     sortOrder?: number
     isFolder?: boolean
 }
 
-export default async function wikiRoutes (server: FastifyInstance) {
+export default async function wikiRoutes(server: FastifyInstance) {
 
     // ---------------------------------------------------------
     // 1. GET /wiki/tree
-    // Lädt die Struktur für die Sidebar (OHNE Content -> Schnell)
+    // Lädt Struktur: Entweder gefiltert (Widget) oder Global (mit virtuellen Ordnern)
     // ---------------------------------------------------------
     server.get<{ Querystring: WikiTreeQuery }>("/wiki/tree", async (req, reply) => {
         const user = req.user
         const { entityType, entityId, entityUuid } = req.query
 
-        // Basis-Filter: Tenant Sicherheit
+        // FALL A: WIDGET-ANSICHT (Spezifische Entität)
-        const filters = [eq(wikiPages.tenantId, user.tenant_id)]
+        // Wenn wir spezifisch filtern, wollen wir nur die echten Seiten ohne virtuelle Ordner
+        if (entityType && (entityId || entityUuid)) {
+            const filters = [
+                eq(wikiPages.tenantId, user.tenant_id),
+                eq(wikiPages.entityType, entityType)
+            ]
 
-        // Logik: Laden wir "Allgemein" oder "Entitäts-Spezifisch"?
+            if (entityId) filters.push(eq(wikiPages.entityId, Number(entityId)))
-        if (entityType) {
+            else if (entityUuid) filters.push(eq(wikiPages.entityUuid, entityUuid))
-            // Spezifisch (z.B. Kunde)
-            filters.push(eq(wikiPages.entityType, entityType))
 
-            if (entityId) {
+            return server.db
-                filters.push(eq(wikiPages.entityId, Number(entityId)))
+                .select({
-            } else if (entityUuid) {
+                    id: wikiPages.id,
-                filters.push(eq(wikiPages.entityUuid, entityUuid))
+                    parentId: wikiPages.parentId,
-            }
+                    title: wikiPages.title,
-        } else {
+                    isFolder: wikiPages.isFolder,
-            // Allgemein (alles wo entityType NULL ist)
+                    sortOrder: wikiPages.sortOrder,
-            filters.push(isNull(wikiPages.entityType))
+                    entityType: wikiPages.entityType,
+                    updatedAt: wikiPages.updatedAt,
+                })
+                .from(wikiPages)
+                .where(and(...filters))
+                .orderBy(asc(wikiPages.sortOrder), asc(wikiPages.title))
         }
 
-        // Performance: Nur Metadaten laden, kein riesiges JSON-Content
+        // FALL B: GLOBALE ANSICHT (Haupt-Wiki)
-        const pages = await server.db
+        // Wir laden ALLES und bauen virtuelle Ordner für die Entitäten
+
+        // 1. Alle Wiki-Seiten des Tenants laden
+        const allPages = await server.db
             .select({
                 id: wikiPages.id,
                 parentId: wikiPages.parentId,
@@ -63,24 +94,115 @@ export default async function wikiRoutes (server: FastifyInstance) {
                 isFolder: wikiPages.isFolder,
                 sortOrder: wikiPages.sortOrder,
                 entityType: wikiPages.entityType,
+                entityId: wikiPages.entityId,     // Wichtig für Zuordnung
+                entityUuid: wikiPages.entityUuid, // Wichtig für Zuordnung
                 updatedAt: wikiPages.updatedAt,
             })
             .from(wikiPages)
-            .where(and(...filters))
+            .where(eq(wikiPages.tenantId, user.tenant_id))
             .orderBy(asc(wikiPages.sortOrder), asc(wikiPages.title))
 
-        return pages
+        // Trennen in Standard-Seiten und Entity-Seiten
+        const standardPages = allPages.filter(p => !p.entityType)
+        const entityPages = allPages.filter(p => p.entityType)
+
+        const virtualNodes: any[] = []
+
+        // 2. Virtuelle Ordner generieren
+        // Wir iterieren durch unsere Config (Kunden, Projekte...)
+        await Promise.all(Object.entries(ENTITY_CONFIG).map(async ([typeKey, config]) => {
+
+            // Haben wir überhaupt Notizen für diesen Typ?
+            const pagesForType = entityPages.filter(p => p.entityType === typeKey)
+            if (pagesForType.length === 0) return
+
+            // IDs sammeln, um Namen aus der DB zu holen
+            // Wir unterscheiden zwischen ID (int) und UUID
+            let entities: any[] = []
+
+            if (config.idField === 'id') {
+                const ids = [...new Set(pagesForType.map(p => p.entityId).filter((id): id is number => id !== null))]
+                if (ids.length > 0) {
+                    //@ts-ignore - Drizzle Typisierung bei dynamischen Tables ist tricky
+                    entities = await server.db.select({ id: config.table.id, label: config.labelField })
+                        .from(config.table)
+                        //@ts-ignore
+                        .where(inArray(config.table.id, ids))
+                }
+            } else {
+                // Falls UUID genutzt wird (z.B. IoT Devices)
+                const uuids = [...new Set(pagesForType.map(p => p.entityUuid).filter((uuid): uuid is string => uuid !== null))]
+                if (uuids.length > 0) {
+                    //@ts-ignore
+                    entities = await server.db.select({ id: config.table.id, label: config.labelField })
+                        .from(config.table)
+                        //@ts-ignore
+                        .where(inArray(config.table.id, uuids))
+                }
+            }
+
+            if (entities.length === 0) return
+
+            // 3. Virtuellen Root Ordner erstellen (z.B. "Kunden")
+            const rootId = `virtual-root-${typeKey}`
+            virtualNodes.push({
+                id: rootId,
+                parentId: null, // Ganz oben im Baum
+                title: config.rootLabel,
+                isFolder: true,
+                isVirtual: true, // Flag fürs Frontend (read-only Folder)
+                sortOrder: 1000  // Ganz unten anzeigen
+            })
+
+            // 4. Virtuelle Entity Ordner erstellen (z.B. "Müller GmbH")
+            entities.forEach(entity => {
+                const entityNodeId = `virtual-entity-${typeKey}-${entity.id}`
+
+                virtualNodes.push({
+                    id: entityNodeId,
+                    parentId: rootId,
+                    title: entity.label || 'Unbekannt',
+                    isFolder: true,
+                    isVirtual: true,
+                    sortOrder: 0
+                })
+
+                // 5. Die echten Notizen verschieben
+                // Wir suchen alle Notizen, die zu dieser Entity gehören
+                const myPages = pagesForType.filter(p =>
+                    (config.idField === 'id' && p.entityId === entity.id) ||
+                    (config.idField === 'uuid' && p.entityUuid === entity.id)
+                )
+
+                myPages.forEach(page => {
+                    // Nur Root-Notizen der Entity verschieben.
+                    // Sub-Pages bleiben wo sie sind (parentId zeigt ja schon auf die richtige Seite)
+                    if (!page.parentId) {
+                        // Wir modifizieren das Objekt für die Response (nicht in der DB!)
+                        // Wir müssen es clonen, sonst ändern wir es für alle Referenzen
+                        const pageClone = { ...page }
+                        pageClone.parentId = entityNodeId
+                        virtualNodes.push(pageClone)
+                    } else {
+                        // Sub-Pages einfach so hinzufügen
+                        virtualNodes.push(page)
+                    }
+                })
+            })
+        }))
+
+        // Ergebnis: Normale Seiten + Virtuelle Struktur
+        return [...standardPages, ...virtualNodes]
     })
 
     // ---------------------------------------------------------
     // 2. GET /wiki/:id
-    // Lädt EINEN Eintrag komplett MIT Content (für den Editor)
+    // Lädt EINEN Eintrag komplett MIT Content
     // ---------------------------------------------------------
     server.get<{ Params: { id: string } }>("/wiki/:id", async (req, reply) => {
         const user = req.user
         const { id } = req.params
 
-        // Drizzle Query API nutzen für Relation (optional Author laden)
         const page = await server.db.query.wikiPages.findFirst({
             where: and(
                 eq(wikiPages.id, id),
@@ -88,18 +210,12 @@ export default async function wikiRoutes (server: FastifyInstance) {
             ),
             with: {
                 author: {
-                    columns: {
+                    columns: { id: true } // Name falls vorhanden
-                        id: true,
-                        // name: true, // Falls im authUsers schema vorhanden
-                    }
                 }
             }
         })
 
-        if (!page) {
+        if (!page) return reply.code(404).send({ error: "Page not found" })
-            return reply.code(404).send({ error: "Page not found" })
-        }
-
         return page
     })
 
@@ -111,10 +227,8 @@ export default async function wikiRoutes (server: FastifyInstance) {
         const user = req.user
         const body = req.body
 
-        // Simple Validierung
         if (!body.title) return reply.code(400).send({ error: "Title required" })
 
-        // Split Logik für Polymorphie
         const hasEntity = !!body.entityType
 
         const [newPage] = await server.db
@@ -122,10 +236,8 @@ export default async function wikiRoutes (server: FastifyInstance) {
             .values({
                 tenantId: user.tenant_id,
                 title: body.title,
-                parentId: body.parentId || null, // undefined abfangen
+                parentId: body.parentId || null,
                 isFolder: body.isFolder ?? false,
-
-                // Polymorphe Zuweisung
                 entityType: hasEntity ? body.entityType : null,
                 entityId: hasEntity && body.entityId ? body.entityId : null,
                 entityUuid: hasEntity && body.entityUuid ? body.entityUuid : null,
@@ -141,7 +253,7 @@ export default async function wikiRoutes (server: FastifyInstance) {
 
     // ---------------------------------------------------------
     // 4. PATCH /wiki/:id
-    // Universal-Update (Inhalt, Titel, Verschieben, Sortieren)
+    // Universal-Update
     // ---------------------------------------------------------
     server.patch<{ Params: { id: string }; Body: WikiUpdateBody }>(
         "/wiki/:id",
@@ -150,21 +262,19 @@ export default async function wikiRoutes (server: FastifyInstance) {
             const { id } = req.params
             const body = req.body
 
-            // 1. Prüfen ob Eintrag existiert & Tenant gehört
             const existing = await server.db.query.wikiPages.findFirst({
                 where: and(eq(wikiPages.id, id), eq(wikiPages.tenantId, user.tenant_id)),
                 columns: { id: true }
             })
 
-            if(!existing) return reply.code(404).send({ error: "Not found" })
+            if (!existing) return reply.code(404).send({ error: "Not found" })
 
-            // 2. Update durchführen
             const [updatedPage] = await server.db
                 .update(wikiPages)
                 .set({
-                    title: body.title,       // update title if defined
+                    title: body.title,
-                    content: body.content,   // update content if defined
+                    content: body.content,
-                    parentId: body.parentId, // update parent (move) if defined
+                    parentId: body.parentId,
                     sortOrder: body.sortOrder,
                     isFolder: body.isFolder,
                     updatedAt: new Date(),
@@ -180,7 +290,7 @@ export default async function wikiRoutes (server: FastifyInstance) {
 
     // ---------------------------------------------------------
     // 5. DELETE /wiki/:id
-    // Löscht Eintrag (DB Cascade erledigt die Kinder)
+    // Löscht Eintrag
     // ---------------------------------------------------------
     server.delete<{ Params: { id: string } }>("/wiki/:id", async (req, reply) => {
         const user = req.user
@@ -190,13 +300,11 @@ export default async function wikiRoutes (server: FastifyInstance) {
             .delete(wikiPages)
             .where(and(
                 eq(wikiPages.id, id),
-                eq(wikiPages.tenantId, user.tenant_id) // WICHTIG: Security
+                eq(wikiPages.tenantId, user.tenant_id)
             ))
             .returning({ id: wikiPages.id })
 
-        if (result.length === 0) {
+        if (result.length === 0) return reply.code(404).send({ error: "Not found" })
-            return reply.code(404).send({ error: "Not found or not authorized" })
-        }
 
         return { success: true, deletedId: result[0].id }
     })

frontend/components/EntityShow.vue

@@ -1,6 +1,7 @@
 <script setup>
 
 import EntityShowSubTimes from "~/components/EntityShowSubTimes.vue";
+import WikiEntityWidget from "~/components/wiki/WikiEntityWidget.vue";
 
 const props = defineProps({
   type: {
@@ -288,6 +289,13 @@ const changePinned = async () => {
           v-else-if="tab.label === 'Zeiten'"
           :platform="platform"
       />
+      <div v-else-if="tab.label === 'Wiki'" class="h-[600px] w-full overflow-hidden">
+        <WikiEntityWidget
+            :entity-type="type"
+            :entity-id="typeof props.item.id === 'number' ? props.item.id : undefined"
+            :entity-uuid="typeof props.item.id === 'string' ? props.item.id : undefined"
+        />
+      </div>
       <EntityShowSub
           :item="props.item"
           :query-string-data="getAvailableQueryStringData()"

frontend/components/wiki/TreeItem.vue

@@ -3,7 +3,10 @@
 
     <div
         class="group flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors mb-0.5 relative pr-8"
-        :class="[isActive ? 'bg-primary-50 dark:bg-primary-900/10 text-primary-600 dark:text-primary-400 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-800']"
+        :class="[
+            isActive ? 'bg-primary-50 dark:bg-primary-900/10 text-primary-600 dark:text-primary-400 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-800',
+            item.isVirtual ? 'opacity-90' : ''
+        ]"
         :style="{ paddingLeft: `${indent}rem` }"
         @click.stop="handleClick"
     >
@@ -17,20 +20,42 @@
       </button>
       <span v-else class="w-4"></span>
 
-      <span class="text-gray-400 shrink-0 flex items-center">
+      <span class="shrink-0 flex items-center">
-        <UIcon v-if="item.isFolder" name="i-heroicons-folder-solid" class="w-4 h-4 text-yellow-400" />
+        <UIcon
-        <UIcon v-else name="i-heroicons-document-text" class="w-4 h-4" />
+            v-if="item.isFolder && item.isVirtual"
+            name="i-heroicons-folder"
+            class="w-4 h-4 text-primary-500 dark:text-primary-400"
+        />
+        <UIcon
+            v-else-if="item.isFolder"
+            name="i-heroicons-folder-solid"
+            class="w-4 h-4 text-yellow-400"
+        />
+        <UIcon
+            v-else
+            name="i-heroicons-document-text"
+            class="w-4 h-4 text-gray-400"
+        />
       </span>
 
-      <span class="truncate flex-1">{{ item.title }}</span>
+      <span class="truncate flex-1" :class="{'italic text-gray-500': item.isVirtual && !item.parentId}">
+        {{ item.title }}
+      </span>
 
-      <div class="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity" :class="{ '!opacity-100': showMenu }">
+      <div v-if="!item.isVirtual" class="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity" :class="{ '!opacity-100': showMenu }">
         <button @click.stop="showMenu = !showMenu" class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-500">
           <UIcon name="i-heroicons-ellipsis-horizontal" class="w-4 h-4" />
         </button>
       </div>
 
+      <div v-else class="absolute right-1 top-1 opacity-0 group-hover:opacity-50 transition-opacity flex items-center justify-center pt-0.5 pr-0.5">
+        <UTooltip text="Automatisch generiert">
+          <UIcon name="i-heroicons-lock-closed" class="w-3 h-3 text-gray-300" />
+        </UTooltip>
+      </div>
+
       <div v-if="showMenu" v-on-click-outside="() => showMenu = false" class="absolute right-0 top-8 z-50 w-40 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-100 dark:border-gray-700 py-1 text-xs text-gray-700 dark:text-gray-200 animate-in fade-in slide-in-from-top-1 duration-100">
+
         <template v-if="item.isFolder">
           <button @click.stop="triggerCreate(false)" class="w-full text-left px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2">
             <UIcon name="i-heroicons-plus" class="w-3 h-3" /> Neue Seite
@@ -40,6 +65,7 @@
           </button>
           <div class="h-px bg-gray-100 dark:bg-gray-700 my-1"></div>
         </template>
+
         <button @click.stop="triggerDelete" class="w-full text-left px-3 py-1.5 hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 flex items-center gap-2">
           <UIcon name="i-heroicons-trash" class="w-3 h-3" /> Löschen
         </button>
@@ -60,7 +86,6 @@ import type { WikiPageItem } from '~/composables/useWikiTree'
 const props = defineProps<{ item: WikiPageItem; depth?: number }>()
 const router = useRouter()
 const route = useRoute()
-// NEU: searchQuery importieren für Auto-Expand
 const { searchQuery } = useWikiTree()
 
 const openWikiAction = inject('openWikiAction') as (action: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder?: boolean) => void
@@ -71,12 +96,12 @@ const isOpen = ref(false)
 const showMenu = ref(false)
 const isActive = computed(() => route.params.id === props.item.id)
 
-// Auto-Open Logic 1: Aktive Seite
+// Auto-Open: Active Page
 watch(() => route.params.id, (newId) => {
   if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
 }, { immediate: true })
 
-// NEU: Auto-Open Logic 2: Suche aktiv -> Alles aufklappen
+// Auto-Open: Search
 watch(searchQuery, (newVal) => {
   if (newVal.trim().length > 0 && props.item.isFolder) {
     isOpen.value = true
@@ -89,15 +114,30 @@ function hasActiveChild(node: WikiPageItem, targetId: string): boolean {
 }
 
 function handleClick() {
-  props.item.isFolder ? (isOpen.value = !isOpen.value) : router.push(`/wiki/${props.item.id}`)
+  if (props.item.isFolder) {
+    isOpen.value = !isOpen.value
+  } else {
+    // Falls es eine virtuelle Seite ist (Read only Entity View?), leiten wir trotzdem weiter
+    // oder verhindern es, je nach Wunsch. Aktuell erlauben wir Navigation:
+    router.push(`/wiki/${props.item.id}`)
+  }
 }
+
 function toggleFolder() { isOpen.value = !isOpen.value }
+
 function triggerCreate(isFolder: boolean) {
+  // Sicherheitscheck: Virtuelle Ordner dürfen nichts erstellen
+  if (props.item.isVirtual) return
+
   showMenu.value = false
   isOpen.value = true
   openWikiAction('create', props.item, isFolder)
 }
+
 function triggerDelete() {
+  // Sicherheitscheck
+  if (props.item.isVirtual) return
+
   showMenu.value = false
   openWikiAction('delete', props.item)
 }

frontend/components/wiki/WikiEntityWidget.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="flex h-full w-full min-h-[500px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 shadow-sm relative isolate overflow-hidden">
+
+    <div
+        class="flex flex-col border-r border-gray-200 dark:border-gray-800 bg-gray-50/80 dark:bg-gray-900/50 transition-all duration-300"
+        :class="selectedPage ? 'w-64 hidden md:flex shrink-0' : 'w-full'"
+    >
+      <div class="flex items-center justify-between px-3 py-3 border-b border-gray-200 dark:border-gray-800 shrink-0">
+        <span class="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
+          <UIcon name="i-heroicons-list-bullet" class="w-3 h-3" />
+          Inhalte
+        </span>
+        <UTooltip text="Neue Notiz erstellen">
+          <UButton size="2xs" color="primary" variant="ghost" icon="i-heroicons-plus" @click="isCreateModalOpen = true" />
+        </UTooltip>
+      </div>
+
+      <div class="flex-1 overflow-y-auto p-2 space-y-1 custom-scrollbar">
+        <div v-if="loadingList" class="space-y-2 pt-2">
+          <USkeleton class="h-8 w-full" />
+          <USkeleton class="h-8 w-full" />
+        </div>
+
+        <template v-else-if="pages.length">
+          <div
+              v-for="page in pages"
+              :key="page.id"
+              class="flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer text-sm transition-all border border-transparent"
+              :class="selectedPage?.id === page.id ? 'bg-white dark:bg-gray-800 text-primary-600 shadow-sm border-gray-200 dark:border-gray-700 font-medium' : 'text-gray-600 hover:bg-white dark:hover:bg-gray-800 hover:shadow-sm'"
+              @click="selectPage(page.id)"
+          >
+            <UIcon :name="page.isFolder ? 'i-heroicons-folder' : 'i-heroicons-document-text'" class="w-4 h-4 shrink-0" />
+            <span class="truncate flex-1">{{ page.title }}</span>
+          </div>
+        </template>
+
+        <div v-else class="flex flex-col items-center justify-center py-12 px-4 text-center">
+          <p class="text-xs text-gray-500">Keine Notizen vorhanden.</p>
+          <UButton variant="link" size="xs" color="primary" @click="isCreateModalOpen = true" class="mt-1">Erstellen</UButton>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex-1 flex flex-col bg-white dark:bg-gray-900 h-full relative min-w-0 w-full overflow-hidden">
+
+      <div v-if="selectedPage" class="flex flex-col h-full w-full">
+        <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 dark:border-gray-800 z-10 shrink-0 bg-white dark:bg-gray-900">
+          <div class="flex items-center gap-2 flex-1 min-w-0">
+            <UButton icon="i-heroicons-arrow-left" variant="ghost" color="gray" class="md:hidden shrink-0" @click="selectedPage = null" />
+            <input
+                v-model="selectedPage.title"
+                @input="onInputTitle"
+                class="bg-transparent font-semibold text-gray-900 dark:text-white focus:outline-none w-full truncate"
+                placeholder="Titel..."
+            />
+          </div>
+          <div class="flex items-center gap-2 text-xs text-gray-400 shrink-0 ml-2">
+            <span class="hidden sm:inline">{{ isSaving ? 'Speichert...' : 'Gespeichert' }}</span>
+            <UButton icon="i-heroicons-trash" color="gray" variant="ghost" size="xs" @click="deleteCurrentPage"/>
+          </div>
+        </div>
+
+        <div class="flex-1 overflow-hidden relative w-full">
+          <div v-if="loadingContent" class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-900/80 z-20">
+            <UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-primary-500" />
+          </div>
+
+          <WikiEditor
+              v-model="selectedPage.content"
+              class="h-full w-full"
+              :page-id="selectedPage.id"
+          />
+        </div>
+      </div>
+
+      <div v-else class="hidden md:flex flex-1 flex-col items-center justify-center w-full h-full bg-gray-50/30 dark:bg-gray-900 p-6 text-center">
+
+        <div class="bg-white dark:bg-gray-800 p-4 rounded-full shadow-sm ring-1 ring-gray-100 dark:ring-gray-700 mb-4">
+          <UIcon name="i-heroicons-book-open" class="w-10 h-10 text-primary-200 dark:text-primary-800" />
+        </div>
+
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
+          Wiki & Dokumentation
+        </h3>
+
+        <p class="text-sm text-gray-500 dark:text-gray-400 max-w-xs mx-auto mb-6">
+          Wähle links eine Notiz aus oder erstelle einen neuen Eintrag für diesen Datensatz.
+        </p>
+
+        <UButton
+            icon="i-heroicons-plus"
+            color="primary"
+            @click="isCreateModalOpen = true"
+        >
+          Neue Seite erstellen
+        </UButton>
+
+      </div>
+    </div>
+
+    <UModal v-model="isCreateModalOpen">
+      <div class="p-5">
+        <h3 class="font-bold mb-4">Neue Seite</h3>
+        <form @submit.prevent="createPage">
+          <UInput v-model="newTitle" placeholder="Titel..." autofocus />
+          <div class="mt-4 flex justify-end gap-2">
+            <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
+            <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
+          </div>
+        </form>
+      </div>
+    </UModal>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import WikiEditor from '~/components/wiki/WikiEditor.vue'
+
+const props = defineProps<{
+  entityType: string
+  entityId?: number | null
+  entityUuid?: string | null
+}>()
+
+const { $api } = useNuxtApp()
+const toast = useToast()
+
+const loadingList = ref(false)
+const loadingContent = ref(false)
+const isCreateModalOpen = ref(false)
+const isCreating = ref(false)
+const isSaving = ref(false)
+const pages = ref<any[]>([])
+const selectedPage = ref<any>(null)
+const newTitle = ref('')
+let saveTimeout: any = null
+
+const getParams = () => {
+  const p: any = { entityType: props.entityType }
+  if (props.entityId) p.entityId = props.entityId
+  else if (props.entityUuid) p.entityUuid = props.entityUuid
+  return p
+}
+
+async function fetchList() {
+  loadingList.value = true
+  try {
+    const data = await $api('/api/wiki/tree', { method: 'GET', params: getParams() })
+    pages.value = data
+  } catch (e) {
+    console.error("Fetch Error:", e)
+  } finally {
+    loadingList.value = false
+  }
+}
+
+async function selectPage(id: string) {
+  if (selectedPage.value?.id === id) return
+  loadingContent.value = true
+  try {
+    const data = await $api(`/api/wiki/${id}`, { method: 'GET' })
+    selectedPage.value = data
+  } catch (e) {
+    toast.add({ title: 'Fehler beim Laden', color: 'red' })
+  } finally {
+    loadingContent.value = false
+  }
+}
+
+function triggerSave() {
+  if (saveTimeout) clearTimeout(saveTimeout)
+  isSaving.value = true
+  saveTimeout = setTimeout(async () => {
+    if (!selectedPage.value) return
+    try {
+      await $api(`/api/wiki/${selectedPage.value.id}`, {
+        method: 'PATCH',
+        body: {
+          title: selectedPage.value.title,
+          content: selectedPage.value.content
+        }
+      })
+      const item = pages.value.find(p => p.id === selectedPage.value.id)
+      if (item) item.title = selectedPage.value.title
+    } catch (e) {
+      console.error(e)
+    } finally {
+      isSaving.value = false
+    }
+  }, 1000)
+}
+
+function onInputTitle() {
+  triggerSave()
+}
+
+watch(() => selectedPage.value?.content, (newVal, oldVal) => {
+  if (newVal && oldVal && !loadingContent.value) triggerSave()
+}, { deep: true })
+
+async function createPage() {
+  if (!newTitle.value) return
+  isCreating.value = true
+  try {
+    const res = await $api('/api/wiki', {
+      method: 'POST',
+      body: { title: newTitle.value, parentId: null, isFolder: false, ...getParams() }
+    })
+    await fetchList()
+    newTitle.value = ''
+    isCreateModalOpen.value = false
+    await selectPage(res.id)
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isCreating.value = false
+  }
+}
+
+async function deleteCurrentPage() {
+  if(!confirm('Löschen?')) return
+  await $api(`/api/wiki/${selectedPage.value.id}`, { method: 'DELETE' })
+  selectedPage.value = null
+  fetchList()
+}
+
+onMounted(fetchList)
+watch(() => [props.entityId, props.entityUuid], fetchList)
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar { width: 4px; }
+.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 4px; }
+</style>

frontend/stores/data.js

@@ -857,6 +857,8 @@ export const useDataStore = defineStore('data', () => {
                 label: "Aufgaben"
             },{
                 label: "Dateien"
+            },{
+                label: "Wiki"
             }]
         },
         products: {
@@ -975,7 +977,9 @@ export const useDataStore = defineStore('data', () => {
             ],
             showTabs: [
                 {
-                    label: "Informationen"
+                    label: "Informationen",
+                },{
+                    label: "Wiki",
                 }
             ]
         },