v1.2.0: Symbol-Verwaltung, SOMA-Admin, Light Mode Farbsystem, Onboarding-Tour, Credit-Link

2026-02-24 21:13:27 +01:00
12 changed files with 700 additions and 128 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lageplan",
-  "version": "1.1.0",
+  "version": "1.2.0",
  "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
  "private": true,
  "scripts": {
--- a/prisma/migrate.js
+++ b/prisma/migrate.js
@@ -214,6 +214,23 @@ async function migrate() {
    console.log('  Privacy consent columns skipped:', e.message)
  }

+  // ─── Step 12: Create tenant_symbols table ───
+  console.log('  [12] Creating tenant_symbols table...')
+  try {
+    await prisma.$executeRawUnsafe(`
+      CREATE TABLE IF NOT EXISTS tenant_symbols (
+        id TEXT PRIMARY KEY DEFAULT gen_random_uuid(),
+        "isActive" BOOLEAN NOT NULL DEFAULT true,
+        "tenantId" TEXT NOT NULL REFERENCES tenants(id) ON DELETE CASCADE,
+        "iconId" TEXT NOT NULL REFERENCES icon_assets(id) ON DELETE CASCADE,
+        UNIQUE("tenantId", "iconId")
+      )
+    `)
+    console.log('  tenant_symbols table created (or already exists)')
+  } catch (e) {
+    console.log('  tenant_symbols table skipped:', e.message)
+  }
+
  console.log('✅ Database migrations complete')
 }

--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -89,6 +89,7 @@ model Tenant {
  checkTemplates    JournalCheckTemplate[]
  iconCategories    IconCategory[]
  iconAssets        IconAsset[]
+  tenantSymbols     TenantSymbol[]
  upgradeRequests   UpgradeRequest[]
  dictionaryEntries DictionaryEntry[]
  rapports          Rapport[]
@@ -236,6 +237,8 @@ model IconAsset {
  tenantId String?
  tenant   Tenant? @relation(fields: [tenantId], references: [id], onDelete: SetNull)

+  tenantSymbols TenantSymbol[]
+
  @@map("icon_assets")
 }

@@ -375,6 +378,22 @@ model UpgradeRequest {
  @@map("upgrade_requests")
 }

+// ─── Tenant Symbol Visibility ─────────────────────────────
+
+model TenantSymbol {
+  id       String  @id @default(uuid())
+  isActive Boolean @default(true)
+
+  tenantId String
+  tenant   Tenant @relation(fields: [tenantId], references: [id], onDelete: Cascade)
+
+  iconId String
+  icon   IconAsset @relation(fields: [iconId], references: [id], onDelete: Cascade)
+
+  @@unique([tenantId, iconId])
+  @@map("tenant_symbols")
+}
+
 // ─── Dictionary (Global + Tenant word library) ────────────

 model DictionaryEntry {
--- a/prisma/seed.js
+++ b/prisma/seed.js
@@ -252,32 +252,8 @@ async function main() {
  console.log('✅ Hose types created:', hoseTypes.length)

  // ─── Journal Check Templates (SOMA) ─────────────────────
-  const somaTemplates = [
-    { label: 'Stopp Zutritt / Ex-Gefahr', sortOrder: 1 },
-    { label: 'Alarmierung Gesamt-Fw', sortOrder: 2 },
-    { label: 'Alarmierung Ofw Wohlen', sortOrder: 3 },
-    { label: 'Alarmierung Stp Baden', sortOrder: 4 },
-    { label: 'Alarmierung Ambulanz', sortOrder: 5 },
-    { label: 'Alarmierung BWL', sortOrder: 6 },
-    { label: 'Alarmierung BL/Meister', sortOrder: 7 },
-    { label: 'Brunnenchef Villmergen', sortOrder: 8 },
-    { label: 'Berieselung Tank / Anl', sortOrder: 9 },
-    { label: 'Druckerhöhung', sortOrder: 10 },
-  ]
-
-  for (const tpl of somaTemplates) {
-    await prisma.journalCheckTemplate.upsert({
-      where: { id: tpl.label.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() },
-      update: { label: tpl.label, sortOrder: tpl.sortOrder },
-      create: {
-        id: tpl.label.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase(),
-        label: tpl.label,
-        sortOrder: tpl.sortOrder,
-      },
-    })
-  }
-
-  console.log('✅ SOMA templates created:', somaTemplates.length)
+  // No default SOMA templates — each tenant defines their own via Admin → SOMA tab
+  console.log('ℹ️  SOMA templates: keine Standard-Vorgaben (Tenants konfigurieren eigene)')
  console.log('🎉 Seed completed successfully!')
 }

--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -55,6 +55,9 @@ import {
  X,
  BookOpen,
  Download,
+  AlertTriangle,
+  GripVertical,
+  LayoutGrid,
 } from 'lucide-react'
 import Link from 'next/link'
 import { TenantDetailDialog } from '@/components/admin/tenant-detail-dialog'
@@ -223,6 +226,19 @@ export default function AdminPage() {
  // Hose Settings (Tenant Admin)
  const [isHoseSettingsOpen, setIsHoseSettingsOpen] = useState(false)

+  // SOMA Templates (Tenant Admin)
+  const [somaTemplates, setSomaTemplates] = useState<{ id: string; label: string; sortOrder: number; isActive: boolean }[]>([])
+  const [newSomaLabel, setNewSomaLabel] = useState('')
+  const [somaLoading, setSomaLoading] = useState(false)
+
+  // Symbol Management (Tenant Admin)
+  const [tenantSymbols, setTenantSymbols] = useState<{ id: string; name: string; fileKey: string; mimeType: string; iconType: string; categoryId: string | null; categoryName: string; isActive: boolean }[]>([])
+  const [symbolSearch, setSymbolSearch] = useState('')
+  const [symbolCatFilter, setSymbolCatFilter] = useState('all')
+  const [symbolViewTab, setSymbolViewTab] = useState<'library' | 'active'>('library')
+  const [selectedSymbolIds, setSelectedSymbolIds] = useState<Set<string>>(new Set())
+  const [symbolsLoading, setSymbolsLoading] = useState(false)
+
  // Redirect to login if not authenticated, or to app if not admin
  useEffect(() => {
    if (authLoading) return
@@ -246,6 +262,38 @@ export default function AdminPage() {
      .catch(() => {})
  }, [tenant?.id])

+  // Load SOMA templates (TENANT_ADMIN)
+  const fetchSomaTemplates = async () => {
+    setSomaLoading(true)
+    try {
+      const res = await fetch('/api/tenant/soma-templates')
+      if (res.ok) {
+        const data = await res.json()
+        setSomaTemplates(data.templates || [])
+      }
+    } catch {}
+    setSomaLoading(false)
+  }
+  useEffect(() => {
+    if (user?.role === 'TENANT_ADMIN') fetchSomaTemplates()
+  }, [user?.role])
+
+  // Load tenant symbols (TENANT_ADMIN)
+  const fetchTenantSymbols = async () => {
+    setSymbolsLoading(true)
+    try {
+      const res = await fetch('/api/tenant/symbols')
+      if (res.ok) {
+        const data = await res.json()
+        setTenantSymbols(data.symbols || [])
+      }
+    } catch {}
+    setSymbolsLoading(false)
+  }
+  useEffect(() => {
+    if (user?.role === 'TENANT_ADMIN') fetchTenantSymbols()
+  }, [user?.role])
+
  // Load global dictionary (SERVER_ADMIN)
  const fetchGlobalDict = async () => {
    try {
@@ -742,7 +790,7 @@ export default function AdminPage() {
              </TabsTrigger>
            </TabsList>
          ) : user?.role === 'TENANT_ADMIN' ? (
-            <TabsList className="grid w-full grid-cols-6 max-w-3xl">
+            <TabsList className="grid w-full grid-cols-7 max-w-4xl">
              <TabsTrigger value="users" className="gap-2">
                <Users className="w-4 h-4" />
                Benutzer
@@ -767,66 +815,225 @@ export default function AdminPage() {
                <Layers className="w-4 h-4" />
                Kategorien
              </TabsTrigger>
+              <TabsTrigger value="soma" className="gap-2">
+                <AlertTriangle className="w-4 h-4" />
+                SOMA
+              </TabsTrigger>
            </TabsList>
          ) : null}

          {/* ===== ICONS TAB ===== */}
          <TabsContent value="icons" className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                <Select value={selectedCategory} onValueChange={setSelectedCategory}>
-                  <SelectTrigger className="w-[200px]">
-                    <SelectValue placeholder="Kategorie filtern" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">Alle Kategorien</SelectItem>
-                    {categories.map(cat => (
-                      <SelectItem key={cat.id} value={cat.id}>{cat.name}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <span className="text-sm text-muted-foreground">{filteredIcons.length} Symbol(e)</span>
-              </div>
-              <Button onClick={() => setIsUploadDialogOpen(true)}>
-                <Upload className="w-4 h-4 mr-2" />
-                Icons hochladen
-              </Button>
-            </div>
+            {user?.role === 'TENANT_ADMIN' ? (() => {
+              // --- Tenant Symbol Management UI ---
+              const symbolCategories = [...new Set(tenantSymbols.map(s => s.categoryName))].sort()
+              const viewSymbols = tenantSymbols
+                .filter(s => symbolViewTab === 'active' ? s.isActive : true)
+                .filter(s => symbolCatFilter === 'all' || s.categoryName === symbolCatFilter)
+                .filter(s => !symbolSearch || s.name.toLowerCase().includes(symbolSearch.toLowerCase()))
+              const grouped = viewSymbols.reduce<Record<string, typeof viewSymbols>>((acc, s) => {
+                const key = s.categoryName
+                if (!acc[key]) acc[key] = []
+                acc[key].push(s)
+                return acc
+              }, {})
+              const toggleSelect = (id: string) => {
+                setSelectedSymbolIds(prev => {
+                  const next = new Set(prev)
+                  next.has(id) ? next.delete(id) : next.add(id)
+                  return next
+                })
+              }
+              const bulkUpdate = async (ids: string[], isActive: boolean) => {
+                try {
+                  await fetch('/api/tenant/symbols', {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ updates: ids.map(iconId => ({ iconId, isActive })) }),
+                  })
+                  setSelectedSymbolIds(new Set())
+                  fetchTenantSymbols()
+                  toast({ title: isActive ? 'Symbole aktiviert' : 'Symbole deaktiviert' })
+                } catch {}
+              }

-            {filteredIcons.length === 0 ? (
-              <div className="border-2 border-dashed rounded-lg p-12 text-center">
-                <Image className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
-                <h3 className="font-medium text-lg mb-2">Keine Symbole vorhanden</h3>
-                <p className="text-muted-foreground mb-4">Laden Sie eigene Symbole hoch (PNG, SVG, JPEG)</p>
-                <Button onClick={() => setIsUploadDialogOpen(true)}>
-                  <Upload className="w-4 h-4 mr-2" />
-                  Jetzt hochladen
-                </Button>
-              </div>
-            ) : (
-              <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
-                {filteredIcons.map(icon => (
-                  <div key={icon.id} className={`relative group border rounded-lg p-3 transition-all hover:shadow-md ${!icon.isActive ? 'opacity-50' : ''}`}>
-                    <div className="aspect-square flex items-center justify-center mb-2 bg-muted rounded">
-                      <img src={`/api/icons/${icon.id}/image`} alt={icon.name} className="w-12 h-12 object-contain" />
-                    </div>
-                    <p className="text-xs text-center truncate font-medium" title={icon.name}>{icon.name}</p>
-                    <p className="text-[10px] text-center text-muted-foreground truncate">{icon.category.name}</p>
-                    {icon.isSystem && <p className="text-[10px] text-center text-blue-500">System</p>}
-                    <div className="absolute inset-0 bg-background/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 rounded-lg">
-                      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleEditIcon(icon)}>
-                        <Pencil className="w-4 h-4" />
-                      </Button>
-                      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleToggleIconActive(icon)}>
-                        {icon.isActive ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                      </Button>
-                      <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" onClick={() => handleDeleteIcon(icon.id)}>
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
+              return (
+                <>
+                  {/* Header: View tabs + search + filter */}
+                  <div className="flex flex-wrap items-center gap-3">
+                    <div className="flex rounded-lg border overflow-hidden">
+                      <button
+                        className={`px-3 py-1.5 text-sm font-medium transition-colors ${symbolViewTab === 'library' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
+                        onClick={() => { setSymbolViewTab('library'); setSelectedSymbolIds(new Set()) }}
+                      >
+                        <LayoutGrid className="w-3.5 h-3.5 inline mr-1.5" />Bibliothek
+                      </button>
+                      <button
+                        className={`px-3 py-1.5 text-sm font-medium transition-colors ${symbolViewTab === 'active' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
+                        onClick={() => { setSymbolViewTab('active'); setSelectedSymbolIds(new Set()) }}
+                      >
+                        <Eye className="w-3.5 h-3.5 inline mr-1.5" />Aktive
+                      </button>
                    </div>
+                    <Input
+                      placeholder="Symbole suchen..."
+                      value={symbolSearch}
+                      onChange={e => setSymbolSearch(e.target.value)}
+                      className="w-48"
+                    />
+                    <Select value={symbolCatFilter} onValueChange={setSymbolCatFilter}>
+                      <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Kategorie" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">Alle Kategorien</SelectItem>
+                        {symbolCategories.map(cat => (
+                          <SelectItem key={cat} value={cat}>{cat}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <span className="text-sm text-muted-foreground ml-auto">
+                      {tenantSymbols.filter(s => s.isActive).length} aktiv / {tenantSymbols.length} gesamt
+                    </span>
                  </div>
-                ))}
-              </div>
+
+                  {/* Bulk category action */}
+                  {symbolCatFilter !== 'all' && (
+                    <div className="flex gap-2">
+                      <Button size="sm" variant="outline" onClick={() => {
+                        const ids = tenantSymbols.filter(s => s.categoryName === symbolCatFilter).map(s => s.id)
+                        bulkUpdate(ids, true)
+                      }}>
+                        <Eye className="w-3.5 h-3.5 mr-1" /> Alle «{symbolCatFilter}» aktivieren
+                      </Button>
+                      <Button size="sm" variant="outline" onClick={() => {
+                        const ids = tenantSymbols.filter(s => s.categoryName === symbolCatFilter).map(s => s.id)
+                        bulkUpdate(ids, false)
+                      }}>
+                        <EyeOff className="w-3.5 h-3.5 mr-1" /> Alle «{symbolCatFilter}» deaktivieren
+                      </Button>
+                    </div>
+                  )}
+
+                  {/* Selection action bar */}
+                  {selectedSymbolIds.size > 0 && (
+                    <div className="flex items-center gap-3 bg-foreground text-background px-4 py-2.5 rounded-lg">
+                      <span className="text-sm font-medium">{selectedSymbolIds.size} ausgewählt</span>
+                      <Button size="sm" variant="secondary" onClick={() => bulkUpdate([...selectedSymbolIds], true)}>
+                        <Eye className="w-3.5 h-3.5 mr-1" /> Aktivieren
+                      </Button>
+                      <Button size="sm" variant="secondary" onClick={() => bulkUpdate([...selectedSymbolIds], false)}>
+                        <EyeOff className="w-3.5 h-3.5 mr-1" /> Deaktivieren
+                      </Button>
+                      <button className="ml-auto text-sm opacity-70 hover:opacity-100" onClick={() => setSelectedSymbolIds(new Set())}>
+                        <X className="w-4 h-4" />
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Symbol grid grouped by category */}
+                  {symbolsLoading ? (
+                    <div className="flex items-center gap-2 py-8 justify-center text-muted-foreground">
+                      <Loader2 className="w-5 h-5 animate-spin" /> Symbole laden...
+                    </div>
+                  ) : viewSymbols.length === 0 ? (
+                    <div className="border-2 border-dashed rounded-lg p-12 text-center text-muted-foreground">
+                      {symbolViewTab === 'active' ? 'Keine aktiven Symbole.' : 'Keine Symbole gefunden.'}
+                    </div>
+                  ) : (
+                    Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b)).map(([catName, syms]) => (
+                      <div key={catName}>
+                        <h4 className="font-semibold text-sm mb-2 flex items-center gap-2">
+                          {catName}
+                          <span className="text-xs text-muted-foreground font-normal">({syms.length})</span>
+                        </h4>
+                        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-2 mb-4">
+                          {syms.map(sym => {
+                            const selected = selectedSymbolIds.has(sym.id)
+                            return (
+                              <div
+                                key={sym.id}
+                                onClick={() => toggleSelect(sym.id)}
+                                className={`relative cursor-pointer border-2 rounded-lg p-2 transition-all hover:shadow-sm ${
+                                  selected ? 'border-blue-500 bg-blue-50 dark:bg-blue-950/30' :
+                                  sym.isActive ? 'border-transparent hover:border-border' : 'border-transparent opacity-40'
+                                }`}
+                              >
+                                <div className="aspect-square flex items-center justify-center mb-1 bg-muted/50 rounded">
+                                  <img src={`/api/icons/${sym.id}/image`} alt={sym.name} className="w-10 h-10 object-contain" />
+                                </div>
+                                <p className="text-[10px] text-center truncate" title={sym.name}>{sym.name}</p>
+                                {/* Status dot */}
+                                <div className={`absolute top-1.5 right-1.5 w-2 h-2 rounded-full ${sym.isActive ? 'bg-green-500' : 'bg-gray-300'}`} />
+                              </div>
+                            )
+                          })}
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </>
+              )
+            })() : (
+              /* --- SERVER_ADMIN: existing icon management --- */
+              <>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-4">
+                    <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+                      <SelectTrigger className="w-[200px]">
+                        <SelectValue placeholder="Kategorie filtern" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">Alle Kategorien</SelectItem>
+                        {categories.map(cat => (
+                          <SelectItem key={cat.id} value={cat.id}>{cat.name}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <span className="text-sm text-muted-foreground">{filteredIcons.length} Symbol(e)</span>
+                  </div>
+                  <Button onClick={() => setIsUploadDialogOpen(true)}>
+                    <Upload className="w-4 h-4 mr-2" />
+                    Icons hochladen
+                  </Button>
+                </div>
+
+                {filteredIcons.length === 0 ? (
+                  <div className="border-2 border-dashed rounded-lg p-12 text-center">
+                    <Image className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+                    <h3 className="font-medium text-lg mb-2">Keine Symbole vorhanden</h3>
+                    <p className="text-muted-foreground mb-4">Laden Sie eigene Symbole hoch (PNG, SVG, JPEG)</p>
+                    <Button onClick={() => setIsUploadDialogOpen(true)}>
+                      <Upload className="w-4 h-4 mr-2" />
+                      Jetzt hochladen
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
+                    {filteredIcons.map(icon => (
+                      <div key={icon.id} className={`relative group border rounded-lg p-3 transition-all hover:shadow-md ${!icon.isActive ? 'opacity-50' : ''}`}>
+                        <div className="aspect-square flex items-center justify-center mb-2 bg-muted rounded">
+                          <img src={`/api/icons/${icon.id}/image`} alt={icon.name} className="w-12 h-12 object-contain" />
+                        </div>
+                        <p className="text-xs text-center truncate font-medium" title={icon.name}>{icon.name}</p>
+                        <p className="text-[10px] text-center text-muted-foreground truncate">{icon.category.name}</p>
+                        {icon.isSystem && <p className="text-[10px] text-center text-blue-500">System</p>}
+                        <div className="absolute inset-0 bg-background/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 rounded-lg">
+                          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleEditIcon(icon)}>
+                            <Pencil className="w-4 h-4" />
+                          </Button>
+                          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleToggleIconActive(icon)}>
+                            {icon.isActive ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                          </Button>
+                          <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" onClick={() => handleDeleteIcon(icon.id)}>
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </>
            )}
          </TabsContent>

@@ -1623,6 +1830,14 @@ export default function AdminPage() {
                  Zur Spendenseite
                </a>
              </Button>
+              <div className="mt-6 pt-4 border-t">
+                <p className="text-sm text-muted-foreground">
+                  mit ♥ von Pepe —{' '}
+                  <a href="/" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
+                    Über mich & Lageplan
+                  </a>
+                </p>
+              </div>
            </div>
            <div className="border rounded-lg p-6">
              <h3 className="font-semibold text-lg mb-4">Dein Mandant</h3>
@@ -1644,6 +1859,130 @@ export default function AdminPage() {
          </TabsContent>
          )}

+          {/* ===== SOMA TAB (TENANT_ADMIN) ===== */}
+          {user?.role === 'TENANT_ADMIN' && (
+          <TabsContent value="soma" className="space-y-6">
+            <div className="border rounded-lg p-6">
+              <h3 className="font-semibold text-lg mb-2 flex items-center gap-2">
+                <AlertTriangle className="w-5 h-5 text-red-600" />
+                SOMA-Checkliste verwalten
+              </h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Definiere die Sofortmassnahmen (SOMA), die bei jedem neuen Einsatz als Checkliste erscheinen.
+                Bestehende Einsätze werden nicht verändert.
+              </p>
+
+              {somaLoading ? (
+                <div className="flex items-center gap-2 py-4 text-muted-foreground">
+                  <Loader2 className="w-4 h-4 animate-spin" /> Laden...
+                </div>
+              ) : (
+                <>
+                  {/* Template list */}
+                  <div className="border rounded-lg divide-y">
+                    {somaTemplates.length === 0 ? (
+                      <div className="px-4 py-6 text-center text-muted-foreground text-sm">
+                        Keine SOMA-Vorlagen definiert. Neue Einsätze starten ohne Checkliste.
+                      </div>
+                    ) : somaTemplates.map((tpl, idx) => (
+                      <div key={tpl.id} className={`flex items-center gap-3 px-4 py-2.5 ${!tpl.isActive ? 'opacity-50' : ''}`}>
+                        <GripVertical className="w-4 h-4 text-muted-foreground/40 shrink-0" />
+                        <span className="text-sm font-medium flex-1">{tpl.label}</span>
+                        <span className="text-xs text-muted-foreground">#{idx + 1}</span>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 px-2"
+                          onClick={async () => {
+                            try {
+                              await fetch('/api/tenant/soma-templates', {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ updates: [{ id: tpl.id, isActive: !tpl.isActive }] }),
+                              })
+                              fetchSomaTemplates()
+                            } catch {}
+                          }}
+                        >
+                          {tpl.isActive ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 px-2 text-destructive hover:text-destructive"
+                          onClick={async () => {
+                            if (!confirm(`"${tpl.label}" wirklich löschen?`)) return
+                            try {
+                              await fetch('/api/tenant/soma-templates', {
+                                method: 'DELETE',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ id: tpl.id }),
+                              })
+                              fetchSomaTemplates()
+                              toast({ title: 'SOMA-Vorlage gelöscht' })
+                            } catch {}
+                          }}
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* Add new */}
+                  <div className="flex gap-2 mt-4">
+                    <Input
+                      placeholder="Neue Sofortmassnahme..."
+                      value={newSomaLabel}
+                      onChange={e => setNewSomaLabel(e.target.value)}
+                      onKeyDown={e => {
+                        if (e.key === 'Enter' && newSomaLabel.trim()) {
+                          e.preventDefault()
+                          ;(async () => {
+                            try {
+                              await fetch('/api/tenant/soma-templates', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ label: newSomaLabel.trim(), sortOrder: somaTemplates.length }),
+                              })
+                              setNewSomaLabel('')
+                              fetchSomaTemplates()
+                              toast({ title: 'SOMA-Vorlage hinzugefügt' })
+                            } catch {}
+                          })()
+                        }
+                      }}
+                      className="flex-1"
+                    />
+                    <Button
+                      disabled={!newSomaLabel.trim()}
+                      onClick={async () => {
+                        try {
+                          await fetch('/api/tenant/soma-templates', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ label: newSomaLabel.trim(), sortOrder: somaTemplates.length }),
+                          })
+                          setNewSomaLabel('')
+                          fetchSomaTemplates()
+                          toast({ title: 'SOMA-Vorlage hinzugefügt' })
+                        } catch {}
+                      }}
+                    >
+                      <Plus className="w-4 h-4 mr-1" /> Hinzufügen
+                    </Button>
+                  </div>
+
+                  <p className="text-xs text-muted-foreground mt-3">
+                    {somaTemplates.filter(t => t.isActive).length} aktiv / {somaTemplates.length} gesamt —
+                    Nur aktive Vorlagen erscheinen bei neuen Einsätzen.
+                  </p>
+                </>
+              )}
+            </div>
+          </TabsContent>
+          )}
+
          {/* Upgrades tab removed — plan management simplified */}
        </Tabs>
      </div>
--- a/src/app/api/icons/route.ts
+++ b/src/app/api/icons/route.ts
@@ -38,20 +38,28 @@ export async function GET() {
      },
    })

-    // Get tenant's hidden icon IDs
+    // Get tenant's hidden icon IDs (legacy) + TenantSymbol overrides
    let hiddenIconIds: string[] = []
+    let deactivatedIconIds = new Set<string>()
    if (user?.tenantId) {
-      const tenant = await (prisma as any).tenant.findUnique({
-        where: { id: user.tenantId },
-        select: { hiddenIconIds: true },
-      })
+      const [tenant, tenantSymbols] = await Promise.all([
+        (prisma as any).tenant.findUnique({
+          where: { id: user.tenantId },
+          select: { hiddenIconIds: true },
+        }),
+        (prisma as any).tenantSymbol.findMany({
+          where: { tenantId: user.tenantId, isActive: false },
+          select: { iconId: true },
+        }),
+      ])
      hiddenIconIds = tenant?.hiddenIconIds || []
+      deactivatedIconIds = new Set(tenantSymbols.map((ts: any) => ts.iconId))
    }

    const categoriesWithUrls = categories.map((cat: any) => ({
      ...cat,
      icons: cat.icons
-        .filter((icon: any) => !hiddenIconIds.includes(icon.id))
+        .filter((icon: any) => !hiddenIconIds.includes(icon.id) && !deactivatedIconIds.has(icon.id))
        .map((icon: any) => ({
          ...icon,
          url: `/api/icons/${icon.id}/image`,
--- a/src/app/api/projects/[id]/journal/check-items/route.ts
+++ b/src/app/api/projects/[id]/journal/check-items/route.ts
@@ -24,10 +24,17 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
      if (existing.length > 0) {
        return NextResponse.json(existing)
      }
-      const templates = await (prisma as any).journalCheckTemplate.findMany({
-        where: { isActive: true },
+      // Prefer tenant-specific templates; fall back to global (tenantId=null) if none exist
+      let templates = await (prisma as any).journalCheckTemplate.findMany({
+        where: { isActive: true, tenantId: user.tenantId || null },
        orderBy: { sortOrder: 'asc' },
      })
+      if (templates.length === 0 && user.tenantId) {
+        templates = await (prisma as any).journalCheckTemplate.findMany({
+          where: { isActive: true, tenantId: null },
+          orderBy: { sortOrder: 'asc' },
+        })
+      }
      const items = await Promise.all(
        templates.map((tpl: any, i: number) =>
          (prisma as any).journalCheckItem.create({
--- a/src/app/api/tenant/soma-templates/route.ts
+++ b/src/app/api/tenant/soma-templates/route.ts
@@ -0,0 +1,108 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/db'
+import { getSession } from '@/lib/auth'
+
+// GET: List SOMA templates for the current tenant
+export async function GET() {
+  try {
+    const user = await getSession()
+    if (!user) return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
+    if (user.role !== 'TENANT_ADMIN' && user.role !== 'SERVER_ADMIN') {
+      return NextResponse.json({ error: 'Keine Berechtigung' }, { status: 403 })
+    }
+
+    const templates = await (prisma as any).journalCheckTemplate.findMany({
+      where: { tenantId: user.tenantId || null },
+      orderBy: { sortOrder: 'asc' },
+    })
+
+    return NextResponse.json({ templates })
+  } catch (error) {
+    console.error('Error fetching SOMA templates:', error)
+    return NextResponse.json({ error: 'Interner Fehler' }, { status: 500 })
+  }
+}
+
+// POST: Create a new SOMA template for the current tenant
+export async function POST(req: NextRequest) {
+  try {
+    const user = await getSession()
+    if (!user) return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
+    if (user.role !== 'TENANT_ADMIN' && user.role !== 'SERVER_ADMIN') {
+      return NextResponse.json({ error: 'Keine Berechtigung' }, { status: 403 })
+    }
+
+    const { label, sortOrder } = await req.json()
+    if (!label?.trim()) {
+      return NextResponse.json({ error: 'Label ist erforderlich' }, { status: 400 })
+    }
+
+    const template = await (prisma as any).journalCheckTemplate.create({
+      data: {
+        label: label.trim(),
+        sortOrder: sortOrder ?? 0,
+        tenantId: user.tenantId || null,
+        isActive: true,
+      },
+    })
+
+    return NextResponse.json({ template }, { status: 201 })
+  } catch (error) {
+    console.error('Error creating SOMA template:', error)
+    return NextResponse.json({ error: 'Interner Fehler' }, { status: 500 })
+  }
+}
+
+// PATCH: Update multiple templates (bulk reorder/toggle)
+export async function PATCH(req: NextRequest) {
+  try {
+    const user = await getSession()
+    if (!user) return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
+    if (user.role !== 'TENANT_ADMIN' && user.role !== 'SERVER_ADMIN') {
+      return NextResponse.json({ error: 'Keine Berechtigung' }, { status: 403 })
+    }
+
+    const { updates } = await req.json()
+    if (!Array.isArray(updates)) {
+      return NextResponse.json({ error: 'updates Array erforderlich' }, { status: 400 })
+    }
+
+    await Promise.all(
+      updates.map((u: { id: string; label?: string; sortOrder?: number; isActive?: boolean }) =>
+        (prisma as any).journalCheckTemplate.update({
+          where: { id: u.id },
+          data: {
+            ...(u.label !== undefined && { label: u.label }),
+            ...(u.sortOrder !== undefined && { sortOrder: u.sortOrder }),
+            ...(u.isActive !== undefined && { isActive: u.isActive }),
+          },
+        })
+      )
+    )
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error updating SOMA templates:', error)
+    return NextResponse.json({ error: 'Interner Fehler' }, { status: 500 })
+  }
+}
+
+// DELETE: Delete a SOMA template
+export async function DELETE(req: NextRequest) {
+  try {
+    const user = await getSession()
+    if (!user) return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
+    if (user.role !== 'TENANT_ADMIN' && user.role !== 'SERVER_ADMIN') {
+      return NextResponse.json({ error: 'Keine Berechtigung' }, { status: 403 })
+    }
+
+    const { id } = await req.json()
+    if (!id) return NextResponse.json({ error: 'ID erforderlich' }, { status: 400 })
+
+    await (prisma as any).journalCheckTemplate.delete({ where: { id } })
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error deleting SOMA template:', error)
+    return NextResponse.json({ error: 'Interner Fehler' }, { status: 500 })
+  }
+}
--- a/src/app/api/tenant/symbols/route.ts
+++ b/src/app/api/tenant/symbols/route.ts
@@ -0,0 +1,83 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/db'
+import { getSession } from '@/lib/auth'
+
+// GET: List all icons with their tenant-specific active status
+export async function GET() {
+  try {
+    const user = await getSession()
+    if (!user) return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
+    if (user.role !== 'TENANT_ADMIN' && user.role !== 'SERVER_ADMIN') {
+      return NextResponse.json({ error: 'Keine Berechtigung' }, { status: 403 })
+    }
+
+    const tenantId = user.tenantId
+    if (!tenantId) return NextResponse.json({ error: 'Kein Mandant zugeordnet' }, { status: 400 })
+
+    // Get all system icons (active ones)
+    const icons = await (prisma as any).iconAsset.findMany({
+      where: { isActive: true },
+      include: { category: { select: { id: true, name: true } } },
+      orderBy: [{ category: { sortOrder: 'asc' } }, { name: 'asc' }],
+    })
+
+    // Get tenant-specific overrides
+    const overrides = await (prisma as any).tenantSymbol.findMany({
+      where: { tenantId },
+    })
+
+    const overrideMap = new Map(overrides.map((o: any) => [o.iconId, o.isActive]))
+
+    // Merge: default is active (true) unless override says otherwise
+    const symbols = icons.map((icon: any) => ({
+      id: icon.id,
+      name: icon.name,
+      fileKey: icon.fileKey,
+      mimeType: icon.mimeType,
+      iconType: icon.iconType,
+      categoryId: icon.categoryId,
+      categoryName: icon.category?.name || 'Ohne Kategorie',
+      isActive: overrideMap.has(icon.id) ? overrideMap.get(icon.id) : true,
+    }))
+
+    return NextResponse.json({ symbols })
+  } catch (error) {
+    console.error('Error fetching tenant symbols:', error)
+    return NextResponse.json({ error: 'Interner Fehler' }, { status: 500 })
+  }
+}
+
+// PATCH: Update symbol visibility for the tenant (bulk)
+export async function PATCH(req: NextRequest) {
+  try {
+    const user = await getSession()
+    if (!user) return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
+    if (user.role !== 'TENANT_ADMIN' && user.role !== 'SERVER_ADMIN') {
+      return NextResponse.json({ error: 'Keine Berechtigung' }, { status: 403 })
+    }
+
+    const tenantId = user.tenantId
+    if (!tenantId) return NextResponse.json({ error: 'Kein Mandant zugeordnet' }, { status: 400 })
+
+    const { updates } = await req.json()
+    if (!Array.isArray(updates)) {
+      return NextResponse.json({ error: 'updates Array erforderlich' }, { status: 400 })
+    }
+
+    // Upsert each symbol override
+    await Promise.all(
+      updates.map((u: { iconId: string; isActive: boolean }) =>
+        (prisma as any).tenantSymbol.upsert({
+          where: { tenantId_iconId: { tenantId, iconId: u.iconId } },
+          update: { isActive: u.isActive },
+          create: { tenantId, iconId: u.iconId, isActive: u.isActive },
+        })
+      )
+    )
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error updating tenant symbols:', error)
+    return NextResponse.json({ error: 'Interner Fehler' }, { status: 500 })
+  }
+}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,25 +4,26 @@

@layer base {
  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    /* Light Mode — optimiert für Einsatz-Kontext (WCAG 2.1 AA) */
+    --background: 210 33% 99%;          /* #fafbfc — leicht abgesetzt, kein reines Weiss */
+    --foreground: 217.2 32.6% 17.5%;    /* Slate-800 #1e293b — Primärtext, 12.6:1 Kontrast */
+    --card: 0 0% 100%;                  /* Weisse Karten/Panels */
+    --card-foreground: 217.2 32.6% 17.5%;
    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
+    --popover-foreground: 217.2 32.6% 17.5%;
+    --primary: 222.2 47.4% 11.2%;       /* Slate-900 — Buttons, aktive Elemente */
    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --secondary: 210 40% 96.1%;         /* Slate-100 */
+    --secondary-foreground: 217.2 32.6% 17.5%;
+    --muted: 210 40% 96.1%;             /* Slate-100 — Hover, dezente Flächen */
+    --muted-foreground: 215.3 19.4% 34.5%; /* Slate-600 #475569 — Sekundärtext, 7.1:1 Kontrast */
    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --accent-foreground: 217.2 32.6% 17.5%;
+    --destructive: 0 72.2% 50.6%;       /* Feuerwehr-Rot #dc2626 */
+    --destructive-foreground: 0 0% 100%;
+    --border: 214.3 31.8% 91.4%;        /* Slate-200 #e2e8f0 */
+    --input: 212.7 26.8% 83.9%;         /* Slate-300 #cbd5e1 — stärkere Input-Borders */
+    --ring: 217.2 91.2% 59.8%;          /* Blau #3b82f6 — Focus-Ring */
    --radius: 0.5rem;
  }

--- a/src/components/map/map-view.tsx
+++ b/src/components/map/map-view.tsx
@@ -2299,16 +2299,6 @@ export function MapView({
        </div>
      )}

-      {/* Credit link */}
-      <a
-        href="/"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="absolute bottom-1 left-24 z-10 text-[10px] text-muted-foreground/50 hover:text-muted-foreground/80 transition-colors no-underline hidden md:block"
-      >
-        mit ♥ von Pepe
-      </a>
-
      {/* Cursor-following tooltip — always mounted for stable ref */}
      <div
        ref={tooltipRef}
--- a/src/components/onboarding/onboarding-tour.tsx
+++ b/src/components/onboarding/onboarding-tour.tsx
@@ -2,13 +2,17 @@

 import { useState, useEffect, useCallback } from 'react'
 import { Button } from '@/components/ui/button'
-import { X, ChevronRight, ChevronLeft, SkipForward } from 'lucide-react'
+import {
+  X, ChevronRight, ChevronLeft, SkipForward,
+  MapPin, Pencil, LayoutGrid, Save, Ruler, Users, Keyboard, Rocket,
+} from 'lucide-react'

 const TOUR_STORAGE_KEY = 'lageplan-onboarding-completed'

 interface TourStep {
  title: string
  description: string
+  icon?: React.ReactNode
  targetSelector?: string
  position?: 'top' | 'bottom' | 'left' | 'right'
 }
@@ -16,39 +20,56 @@ interface TourStep {
 const TOUR_STEPS: TourStep[] = [
  {
    title: 'Willkommen bei Lageplan!',
-    description: 'Diese kurze Tour zeigt dir die wichtigsten Funktionen. Du kannst sie jederzeit überspringen.',
+    icon: <Rocket className="w-5 h-5 text-red-500" />,
+    description: 'Lageplan ist deine taktische Lageskizzen-App für den Feuerwehr-Einsatz. Diese kurze Tour zeigt dir die wichtigsten Funktionen. Du kannst sie jederzeit überspringen oder später im Benutzermenü erneut starten.',
  },
  {
-    title: 'Neuer Einsatz',
-    description: 'Erstelle einen neuen Einsatz über das Menü oben links. Gib eine Adresse ein und die Karte fliegt automatisch dorthin.',
+    title: 'Einsatz erstellen',
+    icon: <MapPin className="w-5 h-5 text-red-500" />,
+    description: 'Erstelle über «Neuer Einsatz» ein neues Projekt. Gib eine Adresse ein — die Karte fliegt automatisch dorthin. Jeder Einsatz wird separat gespeichert und kann als PDF oder PNG exportiert werden.',
    targetSelector: '[data-tour="new-project"]',
    position: 'bottom',
  },
  {
    title: 'Zeichenwerkzeuge',
-    description: 'Links findest du alle Werkzeuge: Punkte, Linien, Polygone, Freihand, Pfeile, Text und mehr. Jedes Werkzeug hat ein Tastenkürzel (drücke ? für die Übersicht).',
+    icon: <Pencil className="w-5 h-5 text-blue-500" />,
+    description: 'Die Werkzeugleiste links enthält alle Zeichentools: Punkte, Linien, Polygone, Freihand, Pfeile, Text, Radiergummi und mehr. Jedes Tool hat ein Tastenkürzel — drücke «?» für eine Übersicht.',
    targetSelector: '[data-tour="toolbar"]',
    position: 'right',
  },
  {
-    title: 'Symbole & Karte',
-    description: 'Rechts findest du die Symbol-Bibliothek. Ziehe Symbole per Drag & Drop auf die Karte. Wechsle zwischen Karte und Journal.',
+    title: 'Symbole & Sidebar',
+    icon: <LayoutGrid className="w-5 h-5 text-orange-500" />,
+    description: 'Rechts findest du über 100 taktische Feuerwehr-Symbole, sortiert nach Kategorien (Wasser, Feuer, Fahrzeuge usw.). Ziehe sie per Drag & Drop auf die Karte. Wechsle zwischen Symbolen und dem Einsatz-Journal.',
    targetSelector: '[data-tour="sidebar"]',
    position: 'left',
  },
  {
-    title: 'Speichern & Exportieren',
-    description: 'Dein Einsatz wird automatisch gespeichert. Du kannst ihn auch als PNG oder PDF exportieren.',
+    title: 'Speichern & Export',
+    icon: <Save className="w-5 h-5 text-green-500" />,
+    description: 'Speichere deinen Einsatz mit Ctrl+S oder dem Speichern-Button. Exportiere als PNG (Bild) oder als druckfertiges PDF. Die letzte Kartenansicht wird automatisch gespeichert.',
    targetSelector: '[data-tour="save"]',
    position: 'bottom',
  },
  {
-    title: 'Tastenkürzel',
-    description: 'Drücke ? oder F1 für eine Übersicht aller Tastenkürzel. Ctrl+S speichert, Ctrl+Z macht rückgängig.',
+    title: 'Messen & Schlauch-Rechner',
+    icon: <Ruler className="w-5 h-5 text-purple-500" />,
+    description: 'Mit dem Messwerkzeug (Taste «M») misst du Distanzen direkt auf der Karte. Der Schlauch-Rechner im Admin-Bereich berechnet die benötigten Schlauchlängen und -typen für deinen Einsatz.',
  },
  {
-    title: 'Bereit!',
-    description: 'Das war\'s! Du kannst diese Tour jederzeit über das Benutzermenü erneut starten. Viel Erfolg im Einsatz!',
+    title: 'Live-Zusammenarbeit',
+    icon: <Users className="w-5 h-5 text-cyan-500" />,
+    description: 'Mehrere Benutzer können gleichzeitig am selben Einsatz arbeiten. Änderungen werden in Echtzeit synchronisiert — ideal für die Einsatzleitung mit mehreren Operateuren.',
+  },
+  {
+    title: 'Tastenkürzel (CH)',
+    icon: <Keyboard className="w-5 h-5 text-slate-500" />,
+    description: 'Optimiert für Schweizer Tastaturen: Ctrl+Y = Rückgängig, Ctrl+Z = Wiederholen, Del = Löschen, Ctrl+S = Speichern. Drücke «?» oder F1 für die komplette Übersicht aller Kürzel.',
+  },
+  {
+    title: 'Bereit für den Einsatz!',
+    icon: <Rocket className="w-5 h-5 text-red-500" />,
+    description: 'Du bist startklar! Diese Tour kannst du jederzeit über dein Benutzermenü (oben rechts → «Tour starten») erneut aufrufen. Viel Erfolg im Einsatz — Feuer frei!',
  },
 ]

@@ -192,7 +213,10 @@ export function OnboardingTour({ forceShow = false, onComplete }: OnboardingTour
        style={getTooltipStyle()}
      >
        <div className="flex items-start justify-between mb-2">
-          <h3 className="font-semibold text-base">{step.title}</h3>
+          <div className="flex items-center gap-2">
+            {step.icon}
+            <h3 className="font-semibold text-base">{step.title}</h3>
+          </div>
          <button
            onClick={completeTour}
            className="text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1"