Seitenleiste: direkt ins Projekt-Admin wechseln

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/Navbar.jsx

@@ -13,13 +13,21 @@ import {
   IconLogout,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconExternalLink,
 } from '@tabler/icons-react'
+import { openProjectAdmin } from '../lib/employeeAdminApi'
 
 export default function Sidebar() {
   const { user, logout, isAdmin } = useAuth()
   const navigate = useNavigate()
   const location = useLocation()
   const [collapsed, setCollapsed] = useState(false)
+  const [switching, setSwitching] = useState(false)
+
+  const handleProjectAdmin = async () => {
+    setSwitching(true)
+    await openProjectAdmin()
+  }
 
   const handleLogout = async () => {
     await logout()
@@ -64,6 +72,16 @@ export default function Sidebar() {
               <span className="side-link-label">{link.label}</span>
             </Link>
           ))}
+          <button
+            type="button"
+            className="side-link side-link-button"
+            onClick={handleProjectAdmin}
+            disabled={switching}
+            title="Projekt-Admin"
+          >
+            <IconExternalLink />
+            <span className="side-link-label">Projekt-Admin</span>
+          </button>
         </div>
       </nav>
 

src/lib/employeeAdminApi.js

@@ -38,3 +38,13 @@ export function updateEmployeeWithLogin(employeeId, payload) {
 export function deleteEmployeeWithLogin(employeeId) {
   return adminFetch(`/api/admin/employees/${employeeId}`, { method: 'DELETE' })
 }
+
+/** Wechsel ins Projekt-Admin ohne zweiten Login: Einmal-Link holen und im selben Tab oeffnen. */
+export async function openProjectAdmin() {
+  try {
+    const { openUrl } = await adminFetch('/api/admin/switch-link', { method: 'POST', body: {} })
+    window.location.assign(openUrl)
+  } catch {
+    window.location.assign('https://project.webklar.com/login.html')
+  }
+}

src/styles/global.css

@@ -843,6 +843,11 @@ textarea.form-control {
 }
 .side-link svg { width: 20px; height: 20px; flex-shrink: 0; }
 .side-link:hover { background: var(--surface-2); color: var(--text); }
+.side-link-button {
+  background: transparent; border: none; font: inherit; cursor: pointer;
+  width: calc(100% - 2 * var(--sp-1)); text-align: left;
+}
+.side-link-button:disabled { opacity: 0.6; cursor: progress; }
 .side-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
 .side-link.active svg { color: var(--accent); }
 .side-foot { border-top: 1px solid var(--border); padding: var(--sp-3); }