wip

src/routes/staff.team.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
 
+import { StaffTabs } from '#/components/staff-tabs'
 import { getCurrentStaffUser } from '#/lib/auth'
 import { authClient } from '#/lib/auth-client'
 import { listStaffMembers } from '#/lib/staff'
@@ -129,6 +130,12 @@ function StaffTeam() {
     setBusyId(null)
   }
 
+  async function handleLogout() {
+    await authClient.signOut()
+    await router.navigate({ to: '/staff/login' })
+    await router.invalidate()
+  }
+
   async function handleSetPassword(member: StaffMember) {
     const newPassword = window.prompt(`Neues Passwort für ${member.name} (mind. 8 Zeichen):`)
 
@@ -156,17 +163,23 @@ function StaffTeam() {
 
   return (
     <div className="staff-page">
-      <header className="staff-topbar">
-        <Link className="wordmark" to="/">
-          Steakhaus <span>bei Mirko</span>
-        </Link>
-        <div className="staff-topbar-right">
-          <Link className="btn btn-secondary" to="/staff">
-            Zu den Reservierungen
+      <div className="staff-nav">
+        <header className="staff-topbar">
+          <Link className="wordmark" to="/">
+            Steakhaus <span>bei Mirko</span>
           </Link>
-          <span>Angemeldet als {staffUser.name}</span>
+          <div className="staff-topbar-right">
+            <span>Angemeldet als {staffUser.name}</span>
+            <button type="button" className="btn btn-secondary" onClick={handleLogout}>
+              Abmelden
+            </button>
+          </div>
+        </header>
+
+        <div className="staff-tabs-bar">
+          <StaffTabs role={staffUser.role} />
         </div>
-      </header>
+      </div>
 
       <main className="page staff-main">
         <h1 className="section-heading">Mitarbeiter</h1>
@@ -249,39 +262,41 @@ function StaffTeam() {
                     <td>{member.email}</td>
                     <td>{member.role === 'admin' ? 'Admin' : 'Mitarbeiter'}</td>
                     <td>{member.banned ? 'Gesperrt' : 'Aktiv'}</td>
-                    <td className="table-actions">
-                      <button
-                        type="button"
-                        className="btn btn-secondary"
-                        disabled={busyId === member.id}
-                        onClick={() => handleToggleRole(member)}
-                      >
-                        {member.role === 'admin' ? 'Zu Mitarbeiter machen' : 'Zu Admin machen'}
-                      </button>
-                      <button
-                        type="button"
-                        className="btn btn-secondary"
-                        disabled={busyId === member.id}
-                        onClick={() => handleSetPassword(member)}
-                      >
-                        Passwort setzen
-                      </button>
-                      <button
-                        type="button"
-                        className="btn btn-secondary"
-                        disabled={busyId === member.id || member.id === staffUser.id}
-                        onClick={() => handleToggleBan(member)}
-                      >
-                        {member.banned ? 'Entsperren' : 'Sperren'}
-                      </button>
-                      <button
-                        type="button"
-                        className="btn btn-danger"
-                        disabled={busyId === member.id || member.id === staffUser.id}
-                        onClick={() => handleRemove(member)}
-                      >
-                        Entfernen
-                      </button>
+                    <td>
+                      <div className="table-actions">
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          disabled={busyId === member.id}
+                          onClick={() => handleToggleRole(member)}
+                        >
+                          {member.role === 'admin' ? 'Zu Mitarbeiter machen' : 'Zu Admin machen'}
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          disabled={busyId === member.id}
+                          onClick={() => handleSetPassword(member)}
+                        >
+                          Passwort setzen
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          disabled={busyId === member.id || member.id === staffUser.id}
+                          onClick={() => handleToggleBan(member)}
+                        >
+                          {member.banned ? 'Entsperren' : 'Sperren'}
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-danger"
+                          disabled={busyId === member.id || member.id === staffUser.id}
+                          onClick={() => handleRemove(member)}
+                        >
+                          Entfernen
+                        </button>
+                      </div>
                     </td>
                   </tr>
                 ))}