Added Wiki

backend/db/schema/index.ts

@@ -72,3 +72,4 @@ export * from "./staff_time_events"
 export * from "./serialtypes"
 export * from "./serialexecutions"
 export * from "./public_links"
+export * from "./wikipages"

backend/db/schema/wikipages.ts

@@ -0,0 +1,99 @@
+import {
+    pgTable,
+    bigint,
+    text,
+    timestamp,
+    boolean,
+    jsonb,
+    integer,
+    index,
+    uuid,
+    AnyPgColumn
+} from "drizzle-orm/pg-core"
+import { relations } from "drizzle-orm"
+import { tenants } from "./tenants"
+import { authUsers } from "./auth_users"
+
+export const wikiPages = pgTable(
+    "wiki_pages",
+    {
+        // ID des Wiki-Eintrags selbst (neu = UUID)
+        id: uuid("id")
+            .primaryKey()
+            .defaultRandom(),
+
+        tenantId: bigint("tenant_id", { mode: "number" })
+            .notNull()
+            .references(() => tenants.id, { onDelete: "cascade" }),
+
+        parentId: uuid("parent_id")
+            .references((): AnyPgColumn => wikiPages.id, { onDelete: "cascade" }),
+
+        title: text("title").notNull(),
+
+        content: jsonb("content"),
+
+        isFolder: boolean("is_folder").notNull().default(false),
+
+        sortOrder: integer("sort_order").notNull().default(0),
+
+        // --- POLYMORPHE BEZIEHUNG (Split) ---
+
+        // Art der Entität (z.B. 'customer', 'invoice', 'iot_device')
+        entityType: text("entity_type"),
+
+        // SPALTE 1: Für Legacy-Tabellen (BigInt)
+        // Nutzung: Wenn entityType='customer', wird hier die ID 1050 gespeichert
+        entityId: bigint("entity_id", { mode: "number" }),
+
+        // SPALTE 2: Für neue Tabellen (UUID)
+        // Nutzung: Wenn entityType='iot_device', wird hier die UUID gespeichert
+        entityUuid: uuid("entity_uuid"),
+
+        // ------------------------------------
+
+        createdAt: timestamp("created_at", { withTimezone: true })
+            .notNull()
+            .defaultNow(),
+
+        updatedAt: timestamp("updated_at", { withTimezone: true }),
+
+        createdBy: uuid("created_by").references(() => authUsers.id),
+        updatedBy: uuid("updated_by").references(() => authUsers.id),
+    },
+    (table) => ({
+        tenantIdx: index("wiki_pages_tenant_idx").on(table.tenantId),
+        parentIdx: index("wiki_pages_parent_idx").on(table.parentId),
+
+        // ZWEI separate Indexe für schnelle Lookups, je nachdem welche ID genutzt wird
+        // Fall 1: Suche nach Notizen für Kunde 1050
+        entityIntIdx: index("wiki_pages_entity_int_idx")
+            .on(table.tenantId, table.entityType, table.entityId),
+
+        // Fall 2: Suche nach Notizen für IoT-Device 550e84...
+        entityUuidIdx: index("wiki_pages_entity_uuid_idx")
+            .on(table.tenantId, table.entityType, table.entityUuid),
+    })
+)
+
+export const wikiPagesRelations = relations(wikiPages, ({ one, many }) => ({
+    tenant: one(tenants, {
+        fields: [wikiPages.tenantId],
+        references: [tenants.id],
+    }),
+    parent: one(wikiPages, {
+        fields: [wikiPages.parentId],
+        references: [wikiPages.id],
+        relationName: "parent_child",
+    }),
+    children: many(wikiPages, {
+        relationName: "parent_child",
+    }),
+    author: one(authUsers, {
+        fields: [wikiPages.createdBy],
+        references: [authUsers.id],
+    }),
+}))
+
+export type WikiPage = typeof wikiPages.$inferSelect
+export type NewWikiPage = typeof wikiPages.$inferInsert

backend/src/index.ts

@@ -29,6 +29,7 @@ import staffTimeRoutes from "./routes/staff/time";
 import staffTimeConnectRoutes from "./routes/staff/timeconnects";
 import userRoutes from "./routes/auth/user";
 import publiclinksAuthenticatedRoutes from "./routes/publiclinks/publiclinks-authenticated";
+import wikiRoutes from "./routes/wiki";
 
 //Public Links
 import publiclinksNonAuthenticatedRoutes from "./routes/publiclinks/publiclinks-non-authenticated";
@@ -144,6 +145,7 @@ async function main() {
         await subApp.register(userRoutes);
         await subApp.register(publiclinksAuthenticatedRoutes);
         await subApp.register(resourceRoutes);
+        await subApp.register(wikiRoutes);
 
     },{prefix: "/api"})
 

backend/src/plugins/cors.ts

@@ -14,7 +14,7 @@ export default fp(async (server: FastifyInstance) => {
             "https://app.fedeo.de", // dein Nuxt-Frontend
             "capacitor://localhost", // dein Nuxt-Frontend
         ],
-        methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS",
+        methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS","PATCH",
             "PROPFIND", "PROPPATCH", "MKCOL", "COPY", "MOVE", "LOCK", "UNLOCK"],
         allowedHeaders: ["Content-Type", "Authorization", "Context", "X-Public-Pin","Depth", "Overwrite", "Destination", "Lock-Token", "If"],
         exposedHeaders: ["Authorization", "Content-Disposition", "Content-Type", "Content-Length"], // optional, falls du ihn auch auslesen willst

backend/src/routes/wiki.ts

@@ -0,0 +1,203 @@
+import { FastifyInstance } from "fastify"
+import { and, eq, isNull, asc, desc } from "drizzle-orm"
+import { wikiPages, authUsers } from "../../db/schema/"
+
+// Types für Request Body & Query (statt Zod)
+interface WikiTreeQuery {
+    entityType?: string
+    entityId?: number    // Kommt als string oder number an, je nach parser
+    entityUuid?: string
+}
+
+interface WikiCreateBody {
+    title: string
+    parentId?: string    // UUID
+    isFolder?: boolean
+    entityType?: string
+    entityId?: number
+    entityUuid?: string
+}
+
+interface WikiUpdateBody {
+    title?: string
+    content?: any        // Das Tiptap JSON Object
+    parentId?: string | null
+    sortOrder?: number
+    isFolder?: boolean
+}
+
+export default async function wikiRoutes (server: FastifyInstance) {
+
+    // ---------------------------------------------------------
+    // 1. GET /wiki/tree
+    // Lädt die Struktur für die Sidebar (OHNE Content -> Schnell)
+    // ---------------------------------------------------------
+    server.get<{ Querystring: WikiTreeQuery }>("/wiki/tree", async (req, reply) => {
+        const user = req.user
+        const { entityType, entityId, entityUuid } = req.query
+
+        // Basis-Filter: Tenant Sicherheit
+        const filters = [eq(wikiPages.tenantId, user.tenant_id)]
+
+        // Logik: Laden wir "Allgemein" oder "Entitäts-Spezifisch"?
+        if (entityType) {
+            // Spezifisch (z.B. Kunde)
+            filters.push(eq(wikiPages.entityType, entityType))
+
+            if (entityId) {
+                filters.push(eq(wikiPages.entityId, Number(entityId)))
+            } else if (entityUuid) {
+                filters.push(eq(wikiPages.entityUuid, entityUuid))
+            }
+        } else {
+            // Allgemein (alles wo entityType NULL ist)
+            filters.push(isNull(wikiPages.entityType))
+        }
+
+        // Performance: Nur Metadaten laden, kein riesiges JSON-Content
+        const pages = await server.db
+            .select({
+                id: wikiPages.id,
+                parentId: wikiPages.parentId,
+                title: wikiPages.title,
+                isFolder: wikiPages.isFolder,
+                sortOrder: wikiPages.sortOrder,
+                entityType: wikiPages.entityType,
+                updatedAt: wikiPages.updatedAt,
+            })
+            .from(wikiPages)
+            .where(and(...filters))
+            .orderBy(asc(wikiPages.sortOrder), asc(wikiPages.title))
+
+        return pages
+    })
+
+    // ---------------------------------------------------------
+    // 2. GET /wiki/:id
+    // Lädt EINEN Eintrag komplett MIT Content (für den Editor)
+    // ---------------------------------------------------------
+    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),
+                eq(wikiPages.tenantId, user.tenant_id)
+            ),
+            with: {
+                author: {
+                    columns: {
+                        id: true,
+                        // name: true, // Falls im authUsers schema vorhanden
+                    }
+                }
+            }
+        })
+
+        if (!page) {
+            return reply.code(404).send({ error: "Page not found" })
+        }
+
+        return page
+    })
+
+    // ---------------------------------------------------------
+    // 3. POST /wiki
+    // Erstellt neuen Eintrag
+    // ---------------------------------------------------------
+    server.post<{ Body: WikiCreateBody }>("/wiki", async (req, reply) => {
+        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
+            .insert(wikiPages)
+            .values({
+                tenantId: user.tenant_id,
+                title: body.title,
+                parentId: body.parentId || null, // undefined abfangen
+                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,
+                //@ts-ignore
+                createdBy: user.id,
+                //@ts-ignore
+                updatedBy: user.id
+            })
+            .returning()
+
+        return newPage
+    })
+
+    // ---------------------------------------------------------
+    // 4. PATCH /wiki/:id
+    // Universal-Update (Inhalt, Titel, Verschieben, Sortieren)
+    // ---------------------------------------------------------
+    server.patch<{ Params: { id: string }; Body: WikiUpdateBody }>(
+        "/wiki/:id",
+        async (req, reply) => {
+            const user = req.user
+            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" })
+
+            // 2. Update durchführen
+            const [updatedPage] = await server.db
+                .update(wikiPages)
+                .set({
+                    title: body.title,       // update title if defined
+                    content: body.content,   // update content if defined
+                    parentId: body.parentId, // update parent (move) if defined
+                    sortOrder: body.sortOrder,
+                    isFolder: body.isFolder,
+                    updatedAt: new Date(),
+                    //@ts-ignore
+                    updatedBy: user.id
+                })
+                .where(eq(wikiPages.id, id))
+                .returning()
+
+            return updatedPage
+        }
+    )
+
+    // ---------------------------------------------------------
+    // 5. DELETE /wiki/:id
+    // Löscht Eintrag (DB Cascade erledigt die Kinder)
+    // ---------------------------------------------------------
+    server.delete<{ Params: { id: string } }>("/wiki/:id", async (req, reply) => {
+        const user = req.user
+        const { id } = req.params
+
+        const result = await server.db
+            .delete(wikiPages)
+            .where(and(
+                eq(wikiPages.id, id),
+                eq(wikiPages.tenantId, user.tenant_id) // WICHTIG: Security
+            ))
+            .returning({ id: wikiPages.id })
+
+        if (result.length === 0) {
+            return reply.code(404).send({ error: "Not found or not authorized" })
+        }
+
+        return { success: true, deletedId: result[0].id }
+    })
+}

frontend/components/wiki/TreeItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="select-none text-sm text-gray-700">
+    <div
+        class="group flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors mb-0.5"
+        :class="[isActive ? 'bg-primary-50 text-primary-700 font-medium' : 'hover:bg-gray-100']"
+        :style="{ paddingLeft: `${indent}rem` }"
+        @click.stop="handleClick"
+    >
+      <button
+          v-if="item.isFolder"
+          class="h-4 w-4 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-transform duration-200"
+          :class="{ 'rotate-90': isOpen }"
+          @click.stop="toggleFolder"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /></svg>
+      </button>
+      <span v-else class="w-4"></span>
+
+      <span class="text-gray-400">
+        <svg v-if="item.isFolder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-yellow-400"><path d="M3.75 3A1.75 1.75 0 002 4.75v3.26a3.235 3.235 0 011.75-.51h12.5c.644 0 1.245.188 1.75.51V6.75A1.75 1.75 0 0016.25 5h-4.836a.25.25 0 01-.177-.073L9.823 3.513A1.75 1.75 0 008.586 3H3.75zM3.75 9A1.75 1.75 0 002 10.75v4.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0018 15.25v-4.5A1.75 1.75 0 0016.25 9H3.75z" /></svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd" /></svg>
+      </span>
+
+      <span class="truncate flex-1">{{ item.title }}</span>
+    </div>
+
+    <div v-if="item.isFolder && isOpen">
+      <TreeItem v-for="child in item.children" :key="child.id" :item="child" :depth="depth + 1" />
+      <div v-if="!item.children?.length" class="text-xs text-gray-400 py-1 italic" :style="{ paddingLeft: `${indent + 1.8}rem` }">Leer</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { WikiPageItem } from '~/composables/useWikiTree'
+// Expliziter Self-Import für Rekursion (wichtig in manchen Nuxt Setups)
+import TreeItem from './TreeItem.vue'
+
+const props = defineProps<{ item: WikiPageItem; depth?: number }>()
+const router = useRouter()
+const route = useRoute()
+
+const depth = props.depth ?? 0
+const indent = computed(() => 0.5 + (depth * 0.7))
+const isOpen = ref(false)
+const isActive = computed(() => route.params.id === props.item.id)
+
+// Auto-Open: Wenn wir ein Parent sind und das aktive Kind enthalten
+watch(() => route.params.id, (newId) => {
+  if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
+}, { immediate: true })
+
+function hasActiveChild(node: WikiPageItem, targetId: string): boolean {
+  if (node.id === targetId) return true
+  return node.children?.some(c => hasActiveChild(c, targetId)) ?? false
+}
+
+function handleClick() {
+  props.item.isFolder ? (isOpen.value = !isOpen.value) : router.push(`/wiki/${props.item.id}`)
+}
+
+function toggleFolder() { isOpen.value = !isOpen.value }
+</script>

frontend/components/wiki/WikiEditor.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex flex-col h-full bg-white relative">
+    <div v-if="editor" class="border-b border-gray-100 px-8 py-2 flex gap-1 items-center sticky top-0 bg-white z-10 shadow-sm">
+      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('bold') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold transition-colors">B</button>
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('italic') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 italic transition-colors">I</button>
+
+      <div class="w-px h-4 bg-gray-200 mx-2"></div>
+
+      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'bg-gray-100 text-black': editor.isActive('heading', { level: 1 }) }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold text-sm">H1</button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'bg-gray-100 text-black': editor.isActive('heading', { level: 2 }) }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold text-xs">H2</button>
+
+      <div class="w-px h-4 bg-gray-200 mx-2"></div>
+
+      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('bulletList') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 text-sm">Liste</button>
+    </div>
+
+    <editor-content :editor="editor" class="flex-1 overflow-y-auto px-8 py-6 prose prose-slate max-w-none focus:outline-none custom-editor-area" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue'])
+
+const editor = useEditor({
+  content: props.modelValue,
+  extensions: [
+    StarterKit,
+    Placeholder.configure({ placeholder: 'Schreibe etwas...' }),
+  ],
+  editorProps: {
+    // Tailwind Klassen für den inneren Bereich (damit man überall hinklicken kann)
+    attributes: { class: 'focus:outline-none min-h-[500px] pb-20' },
+  },
+  onUpdate: ({ editor }) => {
+    emit('update:modelValue', editor.getJSON())
+  },
+})
+
+// Reactivity: Wenn Parent Daten ändert (z.B. Seitenwechsel), Editor updaten
+watch(() => props.modelValue, (val) => {
+  if (editor.value && JSON.stringify(val) !== JSON.stringify(editor.value.getJSON())) {
+    editor.value.commands.setContent(val, false)
+  }
+})
+</script>
+
+<style>
+/* Placeholder Grau */
+.ProseMirror p.is-editor-empty:first-child::before {
+  color: #9ca3af;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+</style>

frontend/composables/useWikiTree.ts

@@ -0,0 +1,83 @@
+// composables/useWikiTree.ts
+export interface WikiPageItem {
+    id: string
+    parentId: string | null
+    title: string
+    isFolder: boolean
+    sortOrder: number
+    entityType?: string | null
+    // children wird im Frontend berechnet
+    children?: WikiPageItem[]
+}
+
+export const useWikiTree = () => {
+    const { $api } = useNuxtApp()
+
+    // Globaler State (bleibt beim Navigieren erhalten)
+    const items = useState<WikiPageItem[]>('wiki-items', () => [])
+    const isLoading = useState<boolean>('wiki-loading', () => false)
+
+    // --- Computed: Flat List zu Baum ---
+    const tree = computed(() => {
+        const rawItems = items.value
+        if (!rawItems || rawItems.length === 0) return []
+
+        const roots: WikiPageItem[] = []
+        const lookup: Record<string, WikiPageItem> = {}
+
+        // 1. Kopieren & Lookup füllen
+        rawItems.forEach(item => {
+            lookup[item.id] = { ...item, children: [] }
+        })
+
+        // 2. Verknüpfen
+        rawItems.forEach(item => {
+            const node = lookup[item.id]
+            if (item.parentId && lookup[item.parentId]) {
+                lookup[item.parentId].children?.push(node)
+            } else {
+                roots.push(node)
+            }
+        })
+
+        // 3. Sortieren (Ordner zuerst, dann SortOrder, dann Alphabet)
+        const sortNodes = (nodes: WikiPageItem[]) => {
+            nodes.sort((a, b) => {
+                if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1
+                if (a.sortOrder !== b.sortOrder) return a.sortOrder - b.sortOrder
+                return a.title.localeCompare(b.title)
+            })
+            nodes.forEach(node => {
+                if (node.children?.length) sortNodes(node.children)
+            })
+        }
+
+        sortNodes(roots)
+        return roots
+    })
+
+    // --- Actions ---
+
+    /**
+     * Lädt den Baum.
+     * params kann { entityType: 'customer', entityId: 100 } enthalten.
+     */
+    const loadTree = async (params: { entityType?: string, entityId?: number, entityUuid?: string } = {}) => {
+        isLoading.value = true
+        try {
+            // Wichtig: Bei GET nutzen wir 'query' für Parameter
+            const data = await $api<WikiPageItem[]>('/api/wiki/tree', {
+                method: 'GET',
+                query: params
+            })
+            items.value = data
+        } catch (e) {
+            // Fehler werden vom Plugin (Toast) behandelt, hier nur Log
+            console.error('Wiki Tree Load Error', e)
+        } finally {
+            isLoading.value = false
+        }
+    }
+
+    return { tree, items, isLoading, loadTree }
+}

frontend/package.json

@@ -46,10 +46,10 @@
     "@popperjs/core": "^2.11.8",
     "@sentry/browser": "^9.11.0",
     "@sentry/integrations": "^7.114.0",
-    "@tiptap/extension-underline": "^2.1.15",
+    "@tiptap/extension-placeholder": "^3.17.1",
-    "@tiptap/pm": "^2.1.15",
+    "@tiptap/pm": "^3.17.1",
-    "@tiptap/starter-kit": "^2.1.15",
+    "@tiptap/starter-kit": "^3.17.1",
-    "@tiptap/vue-3": "^2.1.15",
+    "@tiptap/vue-3": "^3.17.1",
     "@vicons/ionicons5": "^0.12.0",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue-pdf-viewer/viewer": "^3.0.1",

frontend/pages/wiki/[id].vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="h-full flex flex-col relative">
+
+    <div v-if="pending" class="flex h-full items-center justify-center text-gray-400">
+      <div class="flex flex-col items-center gap-2">
+        <svg class="animate-spin h-6 w-6 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+        <span>Lade Inhalt...</span>
+      </div>
+    </div>
+
+    <div v-else-if="page" class="flex flex-col h-full bg-white">
+      <header class="px-8 pt-8 pb-2">
+        <input
+            v-model="page.title"
+            @blur="saveTitle"
+            @keydown.enter="($event.target as HTMLInputElement).blur()"
+            class="text-4xl font-bold text-gray-900 w-full outline-none placeholder-gray-300 bg-transparent"
+            placeholder="Unbenannte Seite"
+        />
+
+        <div class="flex items-center gap-4 mt-2 text-xs text-gray-400 h-6">
+          <span>Erstellt am {{ new Date(page.createdAt).toLocaleDateString() }}</span>
+
+          <transition name="fade">
+            <span v-if="isSaving" class="text-primary-600 flex items-center gap-1">
+              <svg class="animate-spin h-3 w-3" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+              Speichert...
+            </span>
+            <span v-else-if="lastSaved" class="text-green-600">Gespeichert</span>
+          </transition>
+        </div>
+      </header>
+
+      <div class="flex-1 overflow-hidden">
+        <WikiEditor
+            v-model="contentBuffer"
+            @update:modelValue="handleContentChange"
+        />
+      </div>
+    </div>
+
+    <div v-else class="flex h-full items-center justify-center text-gray-500">
+      Seite nicht gefunden oder keine Berechtigung.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import WikiEditor from '~/components/wiki/WikiEditor.vue'
+
+const route = useRoute()
+const { $api } = useNuxtApp()
+const { loadTree } = useWikiTree()
+
+const pageId = route.params.id as string
+
+const isSaving = ref(false)
+const lastSaved = ref(false)
+const saveTimeout = ref<any>(null)
+const contentBuffer = ref(null) // Zwischenspeicher für Editor
+
+// Daten asynchron laden
+// Wir nutzen eine unique Key-Strategy basierend auf der ID
+const { data: page, pending } = await useAsyncData(`wiki-page-${pageId}`, async () => {
+  const res = await $api<any>(`/api/wiki/${pageId}`)
+  contentBuffer.value = res.content // Initiale Daten in Buffer
+  return res
+}, {
+  // Wichtig: Neu laden wenn sich die Route ID ändert
+  watch: [() => route.params.id]
+})
+
+// Titel Speichern (Sofort bei Blur)
+async function saveTitle() {
+  if (!page.value) return
+  isSaving.value = true
+
+  try {
+    await $api(`/api/wiki/${pageId}`, {
+      method: 'PATCH',
+      body: { title: page.value.title }
+    })
+
+    // Sidebar neu laden, damit Titel dort aktuell ist
+    loadTree()
+
+    showSavedFeedback()
+  } finally {
+    isSaving.value = false
+  }
+}
+
+// Inhalt Speichern (Mit Debounce Verzögerung)
+function handleContentChange(newContent: any) {
+  contentBuffer.value = newContent
+  isSaving.value = true
+  lastSaved.value = false
+
+  if (saveTimeout.value) clearTimeout(saveTimeout.value)
+
+  // Warte 1000ms nach dem letzten Tippen
+  saveTimeout.value = setTimeout(async () => {
+    try {
+      await $api(`/api/wiki/${pageId}`, {
+        method: 'PATCH',
+        body: { content: contentBuffer.value }
+      })
+      showSavedFeedback()
+    } catch (e) {
+      // Fehler behandelt Plugin
+    } finally {
+      isSaving.value = false
+    }
+  }, 1000)
+}
+
+function showSavedFeedback() {
+  lastSaved.value = true
+  setTimeout(() => { lastSaved.value = false }, 2000)
+}
+</script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+</style>

frontend/pages/wiki/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="flex h-full w-full bg-white overflow-hidden">
+
+    <aside class="flex w-72 flex-col border-r border-gray-200 bg-gray-50/50">
+
+      <div class="flex items-center justify-between border-b border-gray-200 px-4 py-3 bg-white h-14">
+        <h2 class="font-semibold text-gray-800">Wiki</h2>
+        <button
+            @click="createNewPage"
+            class="p-1.5 text-gray-500 hover:text-primary-600 rounded hover:bg-gray-100 transition-colors"
+            title="Neue Seite erstellen"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" /></svg>
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto px-2 py-3 custom-scrollbar">
+        <div v-if="isLoading && !tree.length" class="space-y-2 px-2 mt-2">
+          <div class="h-4 w-3/4 bg-gray-200 animate-pulse rounded"></div>
+          <div class="h-4 w-1/2 bg-gray-200 animate-pulse rounded"></div>
+          <div class="h-4 w-5/6 bg-gray-200 animate-pulse rounded"></div>
+        </div>
+
+        <div v-else>
+          <WikiTreeItem v-for="node in tree" :key="node.id" :item="node" />
+
+          <div v-if="!tree.length" class="text-center text-sm text-gray-400 mt-10 px-4">
+            Keine Einträge vorhanden.<br>Erstelle die erste Seite!
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <main class="flex-1 overflow-hidden relative bg-white h-full">
+      <NuxtPage />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import WikiTreeItem from '~/components/wiki/TreeItem.vue'
+
+const { tree, isLoading, loadTree } = useWikiTree()
+const { $api } = useNuxtApp()
+const router = useRouter()
+
+// Initiales Laden des "Allgemeinen" Wikis
+onMounted(() => loadTree())
+
+async function createNewPage() {
+  const title = prompt("Titel der neuen Seite:", "Neue Notiz")
+  if (!title) return
+
+  try {
+    // API Call: POST mit body
+    const newPage = await $api('/api/wiki', {
+      method: 'POST',
+      body: {
+        title,
+        parentId: null,
+        isFolder: false,
+        // EntityType ist hier null, da es im Haupt-Wiki erstellt wird
+        entityType: null
+      }
+    })
+
+    await loadTree() // Baum refreshen
+
+    // @ts-ignore (Falls Typen nicht perfekt gematcht)
+    if (newPage?.id) {
+      // @ts-ignore
+      router.push(`/wiki/${newPage.id}`)
+    }
+  } catch (e) {
+    // Fehler werden durch Plugin angezeigt
+  }
+}
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar { width: 4px; }
+.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 10px; }
+</style>

frontend/stores/wiki.ts

@@ -0,0 +1,53 @@
+// stores/wiki.ts
+import { defineStore } from 'pinia'
+
+export const useWikiStore = defineStore('wiki', () => {
+    const flatItems = ref<any[]>([])
+    const isLoading = ref(false)
+
+    // Computed: Wandelt flatItems automatisch in Baum um, wenn sich Daten ändern
+    const tree = computed(() => buildTree(flatItems.value))
+
+    // Action: Baum laden
+    async function fetchTree(params: { entityType?: string, entityId?: number, entityUuid?: string } = {}) {
+        isLoading.value = true
+        try {
+            const { data } = await useFetch('/api/wiki/tree', {
+                query: params
+            })
+            if (data.value) {
+                flatItems.value = data.value
+            }
+        } catch (e) {
+            console.error('Wiki tree fetch error', e)
+        } finally {
+            isLoading.value = false
+        }
+    }
+
+    // Action: Eintrag verschieben (Drag & Drop im UI)
+    async function moveItem(itemId: string, newParentId: string | null, newSortOrder: number) {
+        // 1. Optimistic Update im State (damit es sich sofort schnell anfühlt)
+        const itemIndex = flatItems.value.findIndex(i => i.id === itemId)
+        if (itemIndex > -1) {
+            flatItems.value[itemIndex].parentId = newParentId
+            flatItems.value[itemIndex].sortOrder = newSortOrder
+        }
+
+        // 2. API Call im Hintergrund
+        await $fetch(`/api/wiki/${itemId}`, {
+            method: 'PATCH',
+            body: { parentId: newParentId, sortOrder: newSortOrder }
+        })
+
+        // Fallback: Wenn Error, müsste man hier den alten State wiederherstellen
+    }
+
+    return {
+        flatItems,
+        tree,
+        isLoading,
+        fetchTree,
+        moveItem
+    }
+})