Rollback - PDF Import funzt so semi

frontend/src/components/DeputyManagement.tsx

@@ -0,0 +1,336 @@
+import { useState, useEffect } from 'react'
+import api from '../services/api'
+import { DeputyAssignment, Employee } from '@skillmate/shared'
+import { useAuthStore } from '../stores/authStore'
+
+export default function DeputyManagement() {
+  const [asPrincipal, setAsPrincipal] = useState<any[]>([])
+  const [asDeputy, setAsDeputy] = useState<any[]>([])
+  const [availableEmployees, setAvailableEmployees] = useState<Employee[]>([])
+  const [showAddDialog, setShowAddDialog] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [formData, setFormData] = useState({
+    deputyId: '',
+    validFrom: new Date().toISOString().split('T')[0],
+    validUntil: '',
+    reason: '',
+    canDelegate: true,
+    unitId: ''
+  })
+  const { user } = useAuthStore()
+
+  useEffect(() => {
+    loadDeputies()
+    loadEmployees()
+  }, [])
+
+  const loadDeputies = async () => {
+    try {
+      const response = await api.get('/organization/deputies/my')
+      if (response.data.success) {
+        // Backend returns { asDeputy, asPrincipal }
+        setAsPrincipal(response.data.data.asPrincipal || [])
+        setAsDeputy(response.data.data.asDeputy || [])
+      }
+    } catch (error) {
+      console.error('Failed to load deputies:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadEmployees = async () => {
+    try {
+      const response = await api.get('/employees/public')
+      if (response.data.success) {
+        setAvailableEmployees(response.data.data)
+      }
+    } catch (error) {
+      console.error('Failed to load employees:', error)
+    }
+  }
+
+  const handleAddDeputy = async () => {
+    try {
+      const response = await api.post('/organization/deputies/my', {
+        ...formData,
+        validFrom: new Date(formData.validFrom).toISOString(),
+        validUntil: formData.validUntil ? new Date(formData.validUntil).toISOString() : null
+      })
+      
+      if (response.data.success) {
+        await loadDeputies()
+        setShowAddDialog(false)
+        resetForm()
+      }
+    } catch (error) {
+      console.error('Failed to add deputy:', error)
+    }
+  }
+
+  const handleRemoveDeputy = async (id: string) => {
+    if (!confirm('Möchten Sie diese Vertretung wirklich entfernen?')) return
+    
+    try {
+      await api.delete(`/organization/deputies/${id}`)
+      await loadDeputies()
+    } catch (error) {
+      console.error('Failed to remove deputy:', error)
+    }
+  }
+
+  const handleDelegate = async (assignmentId: string) => {
+    const toDeputyId = prompt('Bitte geben Sie die Mitarbeiter-ID des neuen Vertreters ein:')
+    if (!toDeputyId) return
+
+    const reason = prompt('Grund für die Weitergabe (optional):')
+    
+    try {
+      const response = await api.post('/organization/deputies/delegate', {
+        assignmentId,
+        toDeputyId,
+        validFrom: new Date().toISOString(),
+        reason
+      })
+      
+      if (response.data.success) {
+        await loadDeputies()
+        alert('Vertretung erfolgreich weitergegeben')
+      }
+    } catch (error) {
+      console.error('Failed to delegate:', error)
+      alert('Fehler beim Weitergeben der Vertretung')
+    }
+  }
+
+  const resetForm = () => {
+    setFormData({
+      deputyId: '',
+      validFrom: new Date().toISOString().split('T')[0],
+      validUntil: '',
+      reason: '',
+      canDelegate: true,
+      unitId: ''
+    })
+  }
+
+  if (loading) {
+    return <div className="p-4">Lade Vertretungen...</div>
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold mb-2 dark:text-white">Meine Vertretungen</h2>
+        <p className="text-gray-600 dark:text-gray-400">
+          Verwalten Sie hier Ihre Vertretungsregelungen
+        </p>
+      </div>
+
+      {/* Current Deputies */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-semibold dark:text-white">Aktuelle Vertretungen</h3>
+          <button
+            onClick={() => setShowAddDialog(true)}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            + Vertretung hinzufügen
+          </button>
+        </div>
+
+        {asPrincipal.length > 0 ? (
+          <div className="space-y-3">
+            {asPrincipal.map((deputy: any) => (
+              <div
+                key={deputy.id}
+                className="border dark:border-gray-700 rounded-lg p-4 flex items-center justify-between"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
+                    👤
+                  </div>
+                  <div>
+                    <p className="font-medium dark:text-white">{deputy.deputyName}</p>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      {new Date(deputy.validFrom).toLocaleDateString('de-DE')}
+                      {deputy.validUntil && ` - ${new Date(deputy.validUntil).toLocaleDateString('de-DE')}`}
+                    </p>
+                    {deputy.reason && (
+                      <p className="text-sm text-gray-500 dark:text-gray-500">
+                        Grund: {deputy.reason}
+                      </p>
+                    )}
+                    {deputy.unitName && (
+                      <p className="text-sm text-gray-500 dark:text-gray-500">
+                        Für: {deputy.unitName}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  {(deputy.canDelegate === 1 || deputy.canDelegate === true) && (
+                    <button
+                      onClick={() => handleDelegate(deputy.id)}
+                      className="px-3 py-1 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded"
+                      title="Vertretung weitergeben"
+                    >
+                      ↔️ Weitergeben
+                    </button>
+                  )}
+                  <button
+                    onClick={() => handleRemoveDeputy(deputy.id)}
+                    className="px-3 py-1 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded"
+                  >
+                    Entfernen
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-gray-500 dark:text-gray-400">
+            Keine aktiven Vertretungen vorhanden
+          </p>
+        )}
+      </div>
+
+      {/* Add Deputy Dialog */}
+      {showAddDialog && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full">
+            <h3 className="text-xl font-bold mb-4 dark:text-white">
+              Vertretung hinzufügen
+            </h3>
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1 dark:text-gray-300">
+                  Vertreter *
+                </label>
+                <select
+                  value={formData.deputyId}
+                  onChange={(e) => setFormData({ ...formData, deputyId: e.target.value })}
+                  className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+                  required
+                >
+                  <option value="">Bitte wählen...</option>
+                  {availableEmployees.map(emp => (
+                    <option key={emp.id} value={emp.id}>
+                      {emp.firstName} {emp.lastName} - {emp.position}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium mb-1 dark:text-gray-300">
+                    Von *
+                  </label>
+                  <input
+                    type="date"
+                    value={formData.validFrom}
+                    onChange={(e) => setFormData({ ...formData, validFrom: e.target.value })}
+                    className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1 dark:text-gray-300">
+                    Bis (optional)
+                  </label>
+                  <input
+                    type="date"
+                    value={formData.validUntil}
+                    onChange={(e) => setFormData({ ...formData, validUntil: e.target.value })}
+                    className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1 dark:text-gray-300">
+                  Grund (optional)
+                </label>
+                <select
+                  value={formData.reason}
+                  onChange={(e) => setFormData({ ...formData, reason: e.target.value })}
+                  className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
+                >
+                  <option value="">Kein Grund angegeben</option>
+                  <option value="Urlaub">Urlaub</option>
+                  <option value="Dienstreise">Dienstreise</option>
+                  <option value="Fortbildung">Fortbildung</option>
+                  <option value="Krankheit">Krankheit</option>
+                  <option value="Sonstiges">Sonstiges</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={formData.canDelegate}
+                    onChange={(e) => setFormData({ ...formData, canDelegate: e.target.checked })}
+                    className="rounded"
+                  />
+                  <span className="text-sm dark:text-gray-300">
+                    Vertreter darf Vertretung weitergeben
+                  </span>
+                </label>
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2 mt-6">
+              <button
+                onClick={() => {
+                  setShowAddDialog(false)
+                  resetForm()
+                }}
+                className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800"
+              >
+                Abbrechen
+              </button>
+              <button
+                onClick={handleAddDeputy}
+                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+              >
+                Hinzufügen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* My Deputy Roles */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4 dark:text-white">
+          Ich vertrete
+        </h3>
+        {asDeputy.length > 0 ? (
+          <div className="space-y-3">
+            {asDeputy.map((item: any) => (
+              <div key={item.id} className="border dark:border-gray-700 rounded-lg p-4 flex items-center justify-between">
+                <div>
+                  <p className="font-medium dark:text-white">{item.principalName}</p>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    {new Date(item.validFrom).toLocaleDateString('de-DE')}
+                    {item.validUntil && ` - ${new Date(item.validUntil).toLocaleDateString('de-DE')}`}
+                  </p>
+                  {item.unitName && (
+                    <p className="text-sm text-gray-500 dark:text-gray-500">Für: {item.unitName}</p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-gray-500 dark:text-gray-400 text-sm">
+            Keine Einträge.
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/Header.tsx

@@ -5,6 +5,8 @@ import { useAuthStore } from '../stores/authStore'
 import { authApi } from '../services/api'
 import { usePermissions } from '../hooks/usePermissions'
 import WindowControls from './WindowControls'
+import OrganizationChart from './OrganizationChart'
+import { Building2 } from 'lucide-react'
 
 export default function Header() {
   const { isDarkMode, toggleTheme } = useThemeStore()
@@ -14,6 +16,7 @@ export default function Header() {
   const [loginForm, setLoginForm] = useState({ username: '', password: '' })
   const [loginError, setLoginError] = useState('')
   const [loginLoading, setLoginLoading] = useState(false)
+  const [showOrganigramm, setShowOrganigramm] = useState(false)
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -119,6 +122,14 @@ export default function Header() {
                   Admin
                 </a>
               )}
+              <button
+                onClick={() => setShowOrganigramm(true)}
+                className="btn-secondary text-sm px-3 py-1 h-8 flex items-center gap-1"
+                title="Organigramm anzeigen"
+              >
+                <Building2 className="w-4 h-4" />
+                <span className="hidden sm:inline">Organigramm</span>
+              </button>
               <button
                 onClick={handleLogout}
                 className="btn-secondary text-sm px-3 py-1 h-8"
@@ -152,6 +163,11 @@ export default function Header() {
       </div>
       
       <WindowControls />
+      
+      {/* Organization Chart Modal */}
+      {showOrganigramm && (
+        <OrganizationChart onClose={() => setShowOrganigramm(false)} />
+      )}
     </header>
   )
 }

frontend/src/components/OrganizationChart.tsx

@@ -0,0 +1,394 @@
+import { useEffect, useState, useCallback } from 'react'
+import { OrganizationalUnit, EmployeeUnitAssignment } from '@skillmate/shared'
+import api from '../services/api'
+import { useAuthStore } from '../stores/authStore'
+
+interface OrganizationChartProps {
+  onClose: () => void
+}
+
+export default function OrganizationChart({ onClose }: OrganizationChartProps) {
+  const [units, setUnits] = useState<OrganizationalUnit[]>([])
+  const [hierarchy, setHierarchy] = useState<any[]>([])
+  const [selectedUnit, setSelectedUnit] = useState<OrganizationalUnit | null>(null)
+  const [unitEmployees, setUnitEmployees] = useState<any[]>([])
+  const [myUnits, setMyUnits] = useState<any[]>([])
+  const [searchTerm, setSearchTerm] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState<string>('')
+  const [zoomLevel, setZoomLevel] = useState(1)
+  const [panPosition, setPanPosition] = useState({ x: 0, y: 0 })
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
+  const { user } = useAuthStore()
+
+  useEffect(() => {
+    loadOrganization()
+    loadMyUnits()
+  }, [])
+
+  const loadOrganization = async () => {
+    try {
+      const response = await api.get('/organization/hierarchy')
+      if (response.data.success) {
+        setHierarchy(response.data.data)
+      }
+    } catch (error) {
+      console.error('Failed to load organization:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadMyUnits = async () => {
+    try {
+      const response = await api.get('/organization/my-units')
+      if (response.data.success) {
+        setMyUnits(response.data.data)
+      }
+    } catch (error) {
+      console.error('Failed to load my units:', error)
+    }
+  }
+
+  const loadUnitDetails = async (unitId: string) => {
+    try {
+      const response = await api.get(`/organization/units/${unitId}`)
+      if (response.data.success) {
+        setSelectedUnit(response.data.data)
+        setUnitEmployees(response.data.data.employees || [])
+      }
+    } catch (error) {
+      console.error('Failed to load unit details:', error)
+    }
+  }
+
+  const assignMeToSelectedUnit = async () => {
+    if (!selectedUnit || !user?.employeeId) return
+    setSaving(true)
+    setMessage('')
+    try {
+      await api.post('/organization/assignments', {
+        employeeId: user.employeeId,
+        unitId: selectedUnit.id,
+        role: 'mitarbeiter',
+        isPrimary: true
+      })
+      setMessage('Position erfolgreich gesetzt.')
+      await loadMyUnits()
+      await loadUnitDetails(selectedUnit.id)
+    } catch (error: any) {
+      const msg = error?.response?.data?.error?.message || 'Zuweisung fehlgeschlagen'
+      setMessage(`Fehler: ${msg}`)
+    } finally {
+      setSaving(false)
+      setTimeout(() => setMessage(''), 3000)
+    }
+  }
+
+  const getTypeIcon = (type: string) => {
+    const icons: Record<string, string> = {
+      direktion: '🏛️',
+      abteilung: '🏢',
+      dezernat: '📁',
+      sachgebiet: '📋',
+      teildezernat: '🔧',
+      fuehrungsstelle: '⭐',
+      stabsstelle: '🎯',
+      sondereinheit: '🛡️'
+    }
+    return icons[type] || '📄'
+  }
+
+  const getUnitColor = (level: number) => {
+    const colors = [
+      'bg-gradient-to-r from-purple-500 to-purple-700',
+      'bg-gradient-to-r from-pink-500 to-pink-700',
+      'bg-gradient-to-r from-blue-500 to-blue-700',
+      'bg-gradient-to-r from-green-500 to-green-700',
+      'bg-gradient-to-r from-orange-500 to-orange-700',
+      'bg-gradient-to-r from-teal-500 to-teal-700'
+    ]
+    return colors[level % colors.length]
+  }
+
+  const handleUnitClick = (unit: OrganizationalUnit) => {
+    setSelectedUnit(unit)
+    loadUnitDetails(unit.id)
+  }
+
+  const handleZoomIn = () => setZoomLevel(prev => Math.min(prev + 0.2, 3))
+  const handleZoomOut = () => setZoomLevel(prev => Math.max(prev - 0.2, 0.3))
+  const handleResetView = () => {
+    setZoomLevel(1)
+    setPanPosition({ x: 0, y: 0 })
+  }
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (e.button === 0) { // Left click only
+      setIsDragging(true)
+      setDragStart({ x: e.clientX - panPosition.x, y: e.clientY - panPosition.y })
+    }
+  }
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isDragging) {
+      setPanPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      })
+    }
+  }
+
+  const handleMouseUp = () => {
+    setIsDragging(false)
+  }
+
+  const renderUnit = (unit: any, level: number = 0) => {
+    const isMyUnit = myUnits.some(u => u.id === unit.id)
+    const isSearchMatch = searchTerm && unit.name.toLowerCase().includes(searchTerm.toLowerCase())
+    
+    return (
+      <div key={unit.id} className="flex flex-col items-center">
+        <div
+          onClick={() => handleUnitClick(unit)}
+          className={`
+            cursor-pointer transform transition-all duration-200 hover:scale-105
+            ${isMyUnit ? 'ring-4 ring-yellow-400' : ''}
+            ${isSearchMatch ? 'ring-4 ring-blue-400 animate-pulse' : ''}
+          `}
+        >
+          <div className={`rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 min-w-[200px] max-w-[250px]`}>
+            <div className={`p-2 text-white ${getUnitColor(level)}`}>
+              <div className="flex items-center justify-between">
+                <span className="text-lg">{getTypeIcon(unit.type)}</span>
+                {unit.code && <span className="text-xs opacity-90">{unit.code}</span>}
+              </div>
+            </div>
+            <div className="p-3">
+              <h4 className="font-semibold text-sm dark:text-white">{unit.name}</h4>
+              {unit.hasFuehrungsstelle && (
+                <span className="inline-block px-2 py-1 mt-1 text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded">
+                  FüSt
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+        
+        {unit.children && unit.children.length > 0 && (
+          <div className="flex flex-col items-center mt-4">
+            <div className="w-px h-8 bg-gray-300 dark:bg-gray-600"></div>
+            <div className="flex gap-4">
+              {unit.children.map((child: any) => (
+                <div key={child.id} className="flex flex-col items-center">
+                  <div className="w-px h-4 bg-gray-300 dark:bg-gray-600"></div>
+                  {renderUnit(child, level + 1)}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="bg-white dark:bg-gray-800 rounded-lg p-8">
+          <div className="text-lg">Lade Organigramm...</div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex">
+      {/* Main Modal */}
+      <div className="flex-1 bg-white dark:bg-gray-900 flex">
+        {/* Left Sidebar */}
+        <div className="w-64 bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 p-4 overflow-y-auto">
+          <h3 className="font-semibold mb-4 dark:text-white">Navigation</h3>
+          
+          {/* Search */}
+          <div className="mb-4">
+            <input
+              type="text"
+              placeholder="Suche Einheit..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            />
+          </div>
+
+          {/* Quick Links */}
+          <div className="space-y-2">
+            <button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-white">
+              📍 Meine Position
+            </button>
+            <button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-white">
+              👥 Führungsebene
+            </button>
+            <button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-white">
+              🎖️ Beauftragte
+            </button>
+          </div>
+
+          {/* Department Filters */}
+          <h4 className="font-semibold mt-6 mb-2 dark:text-white">Abteilungen</h4>
+          <div className="grid grid-cols-2 gap-2">
+            {[1, 2, 3, 4, 5, 6].map(n => (
+              <button
+                key={n}
+                className={`px-3 py-2 rounded text-white text-sm ${getUnitColor(n)}`}
+              >
+                Abt. {n}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Main Chart Area */}
+        <div className="flex-1 relative overflow-hidden">
+          {/* Header */}
+          <div className="absolute top-0 left-0 right-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4 z-10">
+            <div className="flex items-center justify-between">
+              <h2 className="text-xl font-bold dark:text-white">LKA NRW Organigramm</h2>
+              <button
+                onClick={onClose}
+                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+              >
+                ✕
+              </button>
+            </div>
+          </div>
+
+          {/* Zoom Controls */}
+          <div className="absolute top-20 right-4 z-10 flex flex-col gap-2">
+            <button
+              onClick={handleZoomIn}
+              className="p-2 bg-white dark:bg-gray-700 shadow rounded hover:bg-gray-100 dark:hover:bg-gray-600"
+            >
+              🔍+
+            </button>
+            <button
+              onClick={handleZoomOut}
+              className="p-2 bg-white dark:bg-gray-700 shadow rounded hover:bg-gray-100 dark:hover:bg-gray-600"
+            >
+              🔍-
+            </button>
+            <button
+              onClick={handleResetView}
+              className="p-2 bg-white dark:bg-gray-700 shadow rounded hover:bg-gray-100 dark:hover:bg-gray-600"
+            >
+              🎯
+            </button>
+          </div>
+
+          {/* Chart Canvas */}
+          <div
+            className="absolute inset-0 mt-16 overflow-auto cursor-move"
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+            style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
+          >
+            <div
+              className="p-8"
+              style={{
+                transform: `scale(${zoomLevel}) translate(${panPosition.x / zoomLevel}px, ${panPosition.y / zoomLevel}px)`,
+                transformOrigin: 'center',
+                transition: isDragging ? 'none' : 'transform 0.2s'
+              }}
+            >
+              {hierarchy.map(unit => renderUnit(unit))}
+            </div>
+          </div>
+        </div>
+
+        {/* Right Sidebar - Details */}
+        {selectedUnit && (
+          <div className="w-80 bg-gray-50 dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 p-4 overflow-y-auto">
+            <div className={`p-3 text-white rounded-lg mb-4 ${getUnitColor(selectedUnit.level || 0)}`}>
+              <h3 className="text-lg font-semibold">{selectedUnit.name}</h3>
+              {selectedUnit.code && <p className="text-sm opacity-90">{selectedUnit.code}</p>}
+            </div>
+
+            {/* Tabs */}
+            <div className="border-b border-gray-200 dark:border-gray-700 mb-4">
+              <div className="flex gap-4">
+                <button className="pb-2 border-b-2 border-blue-500 dark:text-white">
+                  Mitarbeiter
+                </button>
+                <button className="pb-2 dark:text-gray-400">
+                  Skills
+                </button>
+                <button className="pb-2 dark:text-gray-400">
+                  Vertretung
+                </button>
+              </div>
+            </div>
+
+            {/* Employee List */}
+            <div className="space-y-2">
+              {unitEmployees.map(emp => (
+                <div key={emp.id} className="p-3 bg-white dark:bg-gray-700 rounded-lg">
+                  <div className="flex items-center gap-3">
+                    {emp.photo ? (
+                      <img
+                        src={`/api${emp.photo}`}
+                        alt=""
+                        className="w-10 h-10 rounded-full object-cover"
+                      />
+                    ) : (
+                      <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
+                        👤
+                      </div>
+                    )}
+                    <div>
+                      <p className="font-medium dark:text-white">{emp.firstName} {emp.lastName}</p>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        {emp.role === 'leiter' && '🔑 Leitung'}
+                        {emp.role === 'stellvertreter' && '↔️ Stellvertretung'}
+                        {emp.role === 'mitarbeiter' && 'Mitarbeiter'}
+                        {emp.role === 'beauftragter' && '🎖️ Beauftragter'}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+              {unitEmployees.length === 0 && (
+                <p className="text-gray-500 dark:text-gray-400">Keine Mitarbeiter zugeordnet</p>
+              )}
+            </div>
+
+            {selectedUnit.description && (
+              <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded">
+                <h4 className="font-semibold mb-1 dark:text-white">Beschreibung</h4>
+                <p className="text-sm dark:text-gray-300">{selectedUnit.description}</p>
+              </div>
+            )}
+
+            {user?.employeeId && (
+              <div className="mt-4">
+                <button
+                  onClick={assignMeToSelectedUnit}
+                  disabled={saving}
+                  className="w-full px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-60"
+                >
+                  {saving ? 'Wird zugeordnet...' : 'In diese Einheit einordnen'}
+                </button>
+                {message && (
+                  <p className="text-sm mt-2 text-gray-700 dark:text-gray-300">{message}</p>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/OrganizationSelector.tsx

@@ -0,0 +1,280 @@
+import { useEffect, useState } from 'react'
+import { OrganizationalUnit } from '@skillmate/shared'
+import api from '../services/api'
+import { ChevronRight, Building2, Search, X } from 'lucide-react'
+
+interface OrganizationSelectorProps {
+  value?: string
+  onChange: (unitId: string | null, unitName: string) => void
+  disabled?: boolean
+}
+
+export default function OrganizationSelector({ value, onChange, disabled }: OrganizationSelectorProps) {
+  const [showModal, setShowModal] = useState(false)
+  const [hierarchy, setHierarchy] = useState<OrganizationalUnit[]>([])
+  const [selectedUnit, setSelectedUnit] = useState<OrganizationalUnit | null>(null)
+  const [currentUnitName, setCurrentUnitName] = useState<string>('')
+  const [searchTerm, setSearchTerm] = useState('')
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set())
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (showModal) {
+      loadOrganization()
+    }
+  }, [showModal])
+
+  useEffect(() => {
+    // Load current unit name if value exists
+    if (value && hierarchy.length > 0) {
+      const unit = findUnitById(hierarchy, value)
+      if (unit) {
+        setCurrentUnitName(getUnitPath(hierarchy, unit))
+        setSelectedUnit(unit)
+      }
+    }
+  }, [value, hierarchy])
+
+  const loadOrganization = async () => {
+    setLoading(true)
+    try {
+      const response = await api.get('/organization/hierarchy')
+      if (response.data.success) {
+        setHierarchy(response.data.data)
+        // Auto-expand first two levels
+        const toExpand = new Set<string>()
+        const addFirstLevels = (units: any[], level = 0) => {
+          if (level < 2) {
+            units.forEach(u => {
+              toExpand.add(u.id)
+              if (u.children) addFirstLevels(u.children, level + 1)
+            })
+          }
+        }
+        addFirstLevels(response.data.data)
+        setExpandedNodes(toExpand)
+      }
+    } catch (error) {
+      console.error('Failed to load organization:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const findUnitById = (units: OrganizationalUnit[], id: string): OrganizationalUnit | null => {
+    for (const unit of units) {
+      if (unit.id === id) return unit
+      if (unit.children) {
+        const found = findUnitById(unit.children, id)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  const getUnitPath = (units: OrganizationalUnit[], target: OrganizationalUnit): string => {
+    const path: string[] = []
+    
+    const findPath = (units: OrganizationalUnit[], current: string[] = []): boolean => {
+      for (const unit of units) {
+        const newPath = [...current, unit.name]
+        if (unit.id === target.id) {
+          path.push(...newPath)
+          return true
+        }
+        if (unit.children && findPath(unit.children, newPath)) {
+          return true
+        }
+      }
+      return false
+    }
+    
+    findPath(units)
+    return path.join(' → ')
+  }
+
+  const toggleExpand = (unitId: string) => {
+    setExpandedNodes(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(unitId)) {
+        newSet.delete(unitId)
+      } else {
+        newSet.add(unitId)
+      }
+      return newSet
+    })
+  }
+
+  const handleSelect = (unit: OrganizationalUnit) => {
+    setSelectedUnit(unit)
+    const path = getUnitPath(hierarchy, unit)
+    setCurrentUnitName(path)
+    onChange(unit.id, path)
+    setShowModal(false)
+  }
+
+  const getTypeColor = (type: string) => {
+    const colors: Record<string, string> = {
+      direktion: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
+      abteilung: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
+      dezernat: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+      sachgebiet: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
+      teildezernat: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200',
+      stabsstelle: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200',
+      sondereinheit: 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200'
+    }
+    return colors[type] || 'bg-gray-100 text-gray-800'
+  }
+
+  const matchesSearch = (unit: OrganizationalUnit): boolean => {
+    if (!searchTerm) return true
+    const term = searchTerm.toLowerCase()
+    return unit.name.toLowerCase().includes(term) || 
+           unit.code?.toLowerCase().includes(term) || false
+  }
+
+  const renderUnit = (unit: OrganizationalUnit, level = 0) => {
+    const hasChildren = unit.children && unit.children.length > 0
+    const isExpanded = expandedNodes.has(unit.id)
+    const matches = matchesSearch(unit)
+    
+    // Check if any children match
+    const hasMatchingChildren = hasChildren && unit.children!.some(child => 
+      matchesSearch(child) || (child.children && child.children.some(matchesSearch))
+    )
+    
+    if (!matches && !hasMatchingChildren) return null
+
+    return (
+      <div key={unit.id} className={level > 0 ? 'ml-4' : ''}>
+        <div
+          className={`flex items-center gap-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer ${
+            selectedUnit?.id === unit.id ? 'bg-blue-50 dark:bg-blue-900/20' : ''
+          }`}
+          onClick={() => handleSelect(unit)}
+        >
+          {hasChildren && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation()
+                toggleExpand(unit.id)
+              }}
+              className="p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded"
+            >
+              <ChevronRight 
+                className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+              />
+            </button>
+          )}
+          {!hasChildren && <div className="w-5" />}
+          
+          <div className="flex-1 flex items-center gap-2">
+            <span className={`px-2 py-0.5 text-xs rounded ${getTypeColor(unit.type)}`}>
+              {unit.code || unit.type}
+            </span>
+            <span className="text-sm dark:text-white">{unit.name}</span>
+          </div>
+        </div>
+        
+        {hasChildren && isExpanded && (
+          <div className="border-l border-gray-200 dark:border-gray-700 ml-2">
+            {unit.children!.map(child => renderUnit(child, level + 1))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="relative">
+        <input
+          type="text"
+          className="input-field w-full pr-10"
+          value={currentUnitName}
+          placeholder="Klicken zum Auswählen..."
+          readOnly
+          disabled={disabled}
+          onClick={() => !disabled && setShowModal(true)}
+        />
+        <button
+          type="button"
+          className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          onClick={() => !disabled && setShowModal(true)}
+          disabled={disabled}
+        >
+          <Building2 className="w-5 h-5" />
+        </button>
+      </div>
+
+      {showModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-3xl w-full max-h-[80vh] flex flex-col">
+            {/* Header */}
+            <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+              <div className="flex items-center justify-between mb-3">
+                <h2 className="text-lg font-semibold dark:text-white">Organisationseinheit auswählen</h2>
+                <button
+                  onClick={() => setShowModal(false)}
+                  className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+              
+              {/* Search */}
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <input
+                  type="text"
+                  placeholder="Suche nach Name oder Code..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full pl-10 pr-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+              </div>
+            </div>
+
+            {/* Tree View */}
+            <div className="flex-1 overflow-y-auto p-4">
+              {loading ? (
+                <div className="text-center text-gray-500 dark:text-gray-400">
+                  Lade Organisationsstruktur...
+                </div>
+              ) : hierarchy.length === 0 ? (
+                <div className="text-center text-gray-500 dark:text-gray-400">
+                  Keine Organisationseinheiten vorhanden
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {hierarchy.map(unit => renderUnit(unit))}
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between">
+              <button
+                onClick={() => {
+                  setSelectedUnit(null)
+                  setCurrentUnitName('')
+                  onChange(null, '')
+                  setShowModal(false)
+                }}
+                className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+              >
+                Auswahl entfernen
+              </button>
+              <button
+                onClick={() => setShowModal(false)}
+                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+              >
+                Schließen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

frontend/src/views/MyProfile.tsx

@@ -3,6 +3,8 @@ import { useAuthStore } from '../stores/authStore'
 import { employeeApi } from '../services/api'
 import PhotoUpload from '../components/PhotoUpload'
 import SkillLevelBar from '../components/SkillLevelBar'
+import DeputyManagement from '../components/DeputyManagement'
+import OrganizationSelector from '../components/OrganizationSelector'
 
 interface SkillSelection { categoryId: string; subCategoryId: string; skillId: string; name: string; level: string }
 
@@ -17,6 +19,9 @@ export default function MyProfile() {
   const [form, setForm] = useState<any | null>(null)
   const [catalog, setCatalog] = useState<{ id: string; name: string; subcategories: { id: string; name: string; skills: { id: string; name: string }[] }[] }[]>([])
   const [skills, setSkills] = useState<SkillSelection[]>([])
+  const [activeTab, setActiveTab] = useState<'profile' | 'deputies'>('profile')
+  const [currentUnitId, setCurrentUnitId] = useState<string | null>(null)
+  const [myUnits, setMyUnits] = useState<any[]>([])
 
   useEffect(() => {
     if (!employeeId) {
@@ -46,6 +51,23 @@ export default function MyProfile() {
         }
       })
       setSkills(mapped)
+      
+      // Load my organizational units
+      try {
+        const unitsRes = await fetch(((import.meta as any).env?.VITE_API_URL || 'http://localhost:3004/api') + '/organization/my-units', {
+          headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+        }).then(r => r.json())
+        if (unitsRes?.success && unitsRes.data?.length > 0) {
+          setMyUnits(unitsRes.data)
+          const primaryUnit = unitsRes.data.find((u: any) => u.isPrimary)
+          if (primaryUnit) {
+            setCurrentUnitId(primaryUnit.id)
+          }
+        }
+      } catch {
+        // ignore unit errors
+      }
+      
       // Load hierarchy non-critically
       try {
         const hierRes = await fetch(((import.meta as any).env?.VITE_API_URL || 'http://localhost:3004/api') + '/skills/hierarchy', {
@@ -85,6 +107,32 @@ export default function MyProfile() {
   const getSkillLevel = (categoryId: string, subCategoryId: string, skillId: string) =>
     (skills.find(s => s.categoryId === categoryId && s.subCategoryId === subCategoryId && s.skillId === skillId)?.level) || ''
 
+  const handleOrganizationChange = async (unitId: string | null, unitName: string) => {
+    setCurrentUnitId(unitId)
+    if (unitId && employeeId) {
+      try {
+        // Save organization assignment
+        await fetch(((import.meta as any).env?.VITE_API_URL || 'http://localhost:3004/api') + '/organization/assignments', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${localStorage.getItem('token')}`
+          },
+          body: JSON.stringify({
+            employeeId: employeeId,
+            unitId: unitId,
+            role: 'mitarbeiter',
+            isPrimary: true
+          })
+        })
+        // Update department field with unit name for backward compatibility
+        setForm((prev: any) => ({ ...prev, department: unitName }))
+      } catch (error) {
+        console.error('Failed to assign unit:', error)
+      }
+    }
+  }
+
   const onSave = async () => {
     if (!employeeId || !form) return
     setSaving(true)
@@ -151,11 +199,32 @@ export default function MyProfile() {
 
   return (
     <div>
-      <h1 className="text-title-lg font-poppins font-bold text-primary mb-8">Mein Profil</h1>
+      <h1 className="text-title-lg font-poppins font-bold text-primary mb-4">Mein Profil</h1>
+
+      {/* Tab Navigation */}
+      <div className="flex gap-4 mb-6 border-b border-gray-200 dark:border-gray-700">
+        <button
+          onClick={() => setActiveTab('profile')}
+          className={`pb-2 px-1 ${activeTab === 'profile' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600 dark:text-gray-400'}`}
+        >
+          Profildaten
+        </button>
+        <button
+          onClick={() => setActiveTab('deputies')}
+          className={`pb-2 px-1 ${activeTab === 'deputies' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-600 dark:text-gray-400'}`}
+        >
+          Vertretungen
+        </button>
+      </div>
 
       {error && (<div className="bg-error-bg text-error px-4 py-3 rounded-input text-sm mb-6">{error}</div>)}
       {success && (<div className="bg-success-bg text-success px-4 py-3 rounded-input text-sm mb-6">{success}</div>)}
 
+      {activeTab === 'deputies' ? (
+        <DeputyManagement />
+      ) : (
+        <>
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="card">
           <h2 className="text-title-card font-poppins font-semibold text-primary mb-4">Foto</h2>
@@ -182,8 +251,12 @@ export default function MyProfile() {
             </div>
             <div>
               <label className="block text-body font-medium text-secondary mb-2">Dienststelle</label>
-              <input className="input-field w-full" value={form.department || ''} onChange={(e) => setForm((p: any) => ({ ...p, department: e.target.value }))} placeholder="z. B. Abteilung 4, Dezernat 42, Sachgebiet 42.1" />
-              <p className="text-small text-tertiary mt-1">Hierarchische Angabe (Abteilung, Dezernat, Sachgebiet).</p>
+              <OrganizationSelector 
+                value={currentUnitId || undefined}
+                onChange={handleOrganizationChange}
+                disabled={false}
+              />
+              <p className="text-small text-tertiary mt-1">Wählen Sie Ihre Organisationseinheit aus dem Organigramm.</p>
             </div>
             <div>
               <label className="block text-body font-medium text-secondary mb-2">Telefon</label>
@@ -250,6 +323,9 @@ export default function MyProfile() {
           {saving ? 'Speichere...' : 'Änderungen speichern'}
         </button>
       </div>
+      
+      </>
+      )}
     </div>
   )
 }