So mit neuen UI Ideen und so

frontend/src/views/EmployeeDetail.tsx

@@ -3,13 +3,17 @@ import { useState, useEffect } from 'react'
 import type { Employee } from '@skillmate/shared'
 // Dynamische Hierarchie für Darstellung der Nutzer-Skills
 import SkillLevelBar from '../components/SkillLevelBar'
-import { employeeApi } from '../services/api' 
+import OfficeMapModal from '../components/OfficeMapModal'
+import { employeeApi } from '../services/api'
+import { useAuthStore } from '../stores/authStore' 
 
 export default function EmployeeDetail() {
   const { id } = useParams()
   const navigate = useNavigate()
+  const { user } = useAuthStore()
   const [employee, setEmployee] = useState<Employee | null>(null)
   const [error, setError] = useState('')
+  const [showOfficeMap, setShowOfficeMap] = useState(false)
   const [hierarchy, setHierarchy] = useState<{ id: string; name: string; subcategories: { id: string; name: string; skills: { id: string; name: string }[] }[] }[]>([])
   const API_BASE = (import.meta as any).env?.VITE_API_URL || 'http://localhost:3004/api'
   const PUBLIC_BASE = (import.meta as any).env?.VITE_API_PUBLIC_URL || API_BASE.replace(/\/api$/, '')
@@ -141,10 +145,17 @@ export default function EmployeeDetail() {
                 <div>
                   <span className="text-tertiary">Büro:</span>
                   <p className="text-secondary">{employee.office}</p>
+                  <button
+                    onClick={() => setShowOfficeMap(!showOfficeMap)}
+                    className="mt-2 text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline"
+                  >
+                    {showOfficeMap ? 'Karte ausblenden' : 'Büro zeigen'}
+                  </button>
                 </div>
               )}
             </div>
           </div>
+
         </div>
 
         <div className="lg:col-span-2 space-y-6">
@@ -227,6 +238,16 @@ export default function EmployeeDetail() {
           )}
         </div>
       </div>
+      
+      {/* Office Map Modal */}
+      <OfficeMapModal
+        isOpen={showOfficeMap}
+        onClose={() => setShowOfficeMap(false)}
+        targetEmployeeId={employee?.id}
+        targetRoom={employee?.office || undefined}
+        currentUserRoom="1-101" // This should come from logged-in user data
+        employeeName={employee ? `${employee.firstName} ${employee.lastName}` : undefined}
+      />
     </div>
   )
 }