feat: QR-Stempeln als eigener Menüpunkt + Tablet-Link

QR-Stempeln aus CompanySettingsPage in eigene Seite /settings/qr-stamp ausgelagert, eigener Nav-Eintrag 'QR-Stempeln' (COMPANY_ADMIN/SUPER_ADMIN). Toggle speichert jetzt eigenständig (PATCH public_stamp_enabled). Neuer Tablet-Link-Bereich: Direkt-URL kopieren + 'Auf diesem Gerät öffnen' zum dauerhaften Einrichten eines Tablets am Eingang (gleicher Token wie Handy-QR). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-02 22:10:48 +02:00
parent 548aebe994
commit de35eaa3ea
6 changed files with 285 additions and 166 deletions
@@ -1934,3 +1934,15 @@ Keine Commits in dieser Session.
 - frontend/src/pages/PublicStampPage.tsx                 | 265 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 ---
+## 2026-06-02 18:27 – 20:06 (1h 38m)
+**Beschreibung:** Claude Code Session
+**Projekt:** timemaster
+
+### Commits
+- 548aebe fix: QR-Stempel-Status korrekt – Status vor mid-request commit ermitteln
+- 3423b65 docs: DEVLOG für QR-Stempel-Feature
+
+### Geänderte Dateien
+- backend/app/routers/public_stamp.py | 11 +++++++++--
+
+---
@@ -598,3 +598,25 @@ Keine Commits in dieser Session.
 - frontend/src/pages/mobile/MobileTodayScreen.tsx | 225 ++++++++++++++++++------

 ---
+## 2026-06-02 21:25 – 21:26 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** timemaster
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- backend/app/routers/public_stamp.py | 11 +++++++++--
+
+---
+## 2026-06-02 21:50 – 21:53 (3m)
+**Beschreibung:** Claude Code Session
+**Projekt:** frontend
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- backend/app/routers/public_stamp.py | 11 +++++++++--
+
+---
@@ -19,6 +19,7 @@ import { AbsenceTypesPage } from './pages/AbsenceTypesPage'
 import ImportPage from './pages/ImportPage'
 import UserImportPage from './pages/UserImportPage'
 import { CompanySettingsPage } from './pages/CompanySettingsPage'
+import { QrStampSettingsPage } from './pages/QrStampSettingsPage'
 import { ProfilePage } from './pages/ProfilePage'
 import { KioskDevicesPage } from './pages/KioskDevicesPage'
 import { AuditLogPage } from './pages/AuditLogPage'
@@ -60,6 +61,7 @@ export default function App() {
            <Route path='/settings/import'         element={<ImportPage />} />
            <Route path='/settings/company'        element={<CompanySettingsPage />} />
            <Route path='/settings/kiosk'          element={<KioskDevicesPage />} />
+            <Route path='/settings/qr-stamp'       element={<QrStampSettingsPage />} />
            <Route path='/settings/audit-log'      element={<AuditLogPage />} />
            <Route path='/hr/special-assignments'  element={<SpecialAssignmentsPage />} />
            <Route path='/hr/payouts'              element={<HoursPayoutPage />} />
@@ -30,6 +30,7 @@ const SETTINGS_NAV: NavItem[] = [
  { path: '/settings/absence-types', label: 'Abwesenheitstypen', roles: ['COMPANY_ADMIN', 'SUPER_ADMIN'] },
  { path: '/settings/company',       label: 'Firma',             roles: ['COMPANY_ADMIN', 'SUPER_ADMIN'] },
  { path: '/settings/kiosk',          label: 'Kiosk-Geräte',      roles: ['COMPANY_ADMIN', 'SUPER_ADMIN'] },
+  { path: '/settings/qr-stamp',       label: 'QR-Stempeln',       roles: ['COMPANY_ADMIN', 'SUPER_ADMIN'] },
  { path: '/users/import',           label: 'Mitarbeiter-Import', roles: ['COMPANY_ADMIN', 'SUPER_ADMIN'] },
  { path: '/settings/import',        label: 'Daten importieren', roles: ['COMPANY_ADMIN', 'SUPER_ADMIN', 'HR'] },
  { path: '/settings/caldav',        label: 'CalDAV' },
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react'
-import QRCode from 'qrcode'
 import { api } from '../api/client'
 import { Layout } from '../components/Layout'

@@ -76,13 +75,6 @@ export function CompanySettingsPage() {
  const [blPlaintext, setBlPlaintext] = useState<string | null>(null)
  const [blBusy, setBlBusy] = useState(false)
  const [blCopied, setBlCopied] = useState(false)
-  // Öffentliches QR-Stempeln
-  const [psEnabled, setPsEnabled] = useState(false)
-  const [psStatus, setPsStatus] = useState<{ configured: boolean; created_at: string | null } | null>(null)
-  const [psUrl, setPsUrl] = useState<string | null>(null)
-  const [psQr, setPsQr] = useState<string | null>(null)
-  const [psBusy, setPsBusy] = useState(false)
-  const [psCopied, setPsCopied] = useState(false)
  const [saving, setSaving] = useState(false)
  const [saved, setSaved] = useState(false)
  const [error, setError] = useState<string | null>(null)
@@ -118,68 +110,8 @@ export function CompanySettingsPage() {
    api.get<{ configured: boolean; created_at: string | null }>('/companies/me/busylight-token')
      .then(setBlStatus)
      .catch(() => {})
-    api.get<{ enabled: boolean; configured: boolean; created_at: string | null }>('/companies/me/public-stamp-token')
-      .then(s => { setPsStatus({ configured: s.configured, created_at: s.created_at }); setPsEnabled(s.enabled) })
-      .catch(() => {})
  }, [])

-  async function rotatePublicStampToken() {
-    setPsBusy(true)
-    setError(null)
-    try {
-      const res = await api.post<{ token: string; public_url: string; created_at: string }>(
-        '/companies/me/public-stamp-token/rotate', {}
-      )
-      setPsUrl(res.public_url)
-      setPsStatus({ configured: true, created_at: res.created_at })
-      setPsCopied(false)
-      setPsQr(await QRCode.toDataURL(res.public_url, { width: 320, margin: 2, errorCorrectionLevel: 'H' }))
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : 'Fehler beim Generieren des QR-Tokens')
-    } finally {
-      setPsBusy(false)
-    }
-  }
-
-  async function revokePublicStampToken() {
-    if (!confirm('QR-Code wirklich deaktivieren? Bestehende ausgedruckte Codes funktionieren danach nicht mehr.')) return
-    setPsBusy(true)
-    setError(null)
-    try {
-      await api.del('/companies/me/public-stamp-token')
-      setPsStatus({ configured: false, created_at: null })
-      setPsUrl(null)
-      setPsQr(null)
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : 'Fehler beim Deaktivieren')
-    } finally {
-      setPsBusy(false)
-    }
-  }
-
-  async function copyPublicStampUrl() {
-    if (!psUrl) return
-    try {
-      await navigator.clipboard.writeText(psUrl)
-      setPsCopied(true)
-      setTimeout(() => setPsCopied(false), 2000)
-    } catch { /* clipboard nicht verfügbar */ }
-  }
-
-  function printPublicStampQr() {
-    if (!psQr) return
-    const w = window.open('', '_blank', 'width=600,height=800')
-    if (!w) return
-    w.document.write(`<!doctype html><html><head><title>QR-Stempel</title>
-      <style>body{font-family:sans-serif;text-align:center;padding:40px}
-      h1{font-size:22px}img{width:340px;height:340px}p{color:#555;font-size:15px}</style></head>
-      <body><h1>Zeiterfassung – ${name || company?.name || ''}</h1>
-      <img src="${psQr}" alt="QR" />
-      <p>Mit dem Handy scannen, dann Personalnummer + PIN eingeben und ein-/ausstempeln.</p>
-      <script>window.onload=function(){window.print()}</script></body></html>`)
-    w.document.close()
-  }
-
  async function rotateBusylightToken() {
    setBlBusy(true)
    setError(null)
@@ -247,7 +179,6 @@ export function CompanySettingsPage() {
        kiosk_require_approval: kioskRequireApproval,
        kiosk_track_current_user: kioskTrackCurrentUser,
        kiosk_heartbeat_interval_sec: kioskHeartbeatIntervalSec,
-        public_stamp_enabled: psEnabled,
        overtime_cap_hours: overtimeCapEnabled ? overtimeCapHours : null,
        overtime_expiry_enabled: overtimeExpiryEnabled,
        overtime_expiry_month: overtimeExpiryMonth,
@@ -641,103 +572,7 @@ export function CompanySettingsPage() {
          </div>
        )}

-        {/* Öffentliches QR-Stempeln */}
-        {isAdmin && (
-          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-5">
-            <div className="flex items-center gap-2">
-              <span className="text-lg">📲</span>
-              <h2 className="font-semibold text-gray-700">QR-Stempeln (Handy)</h2>
-            </div>
-            <p className="text-xs text-gray-400 -mt-2">
-              Statischer QR-Code zum Aushängen am Eingang. Mitarbeiter scannen mit dem privaten Handy,
-              melden sich per Personalnummer + PIN an und stempeln ein/aus.
-            </p>
-
-            <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
-              ⚠ Schwächer als Kiosk-Terminals: keine Geräte-Signatur. Schutz nur über PIN + Sperre nach
-              Fehlversuchen. Nur aktivieren, wenn benötigt.
-            </div>
-
-            {/* Toggle aktiv */}
-            <div className="flex items-center justify-between gap-4">
-              <div>
-                <p className="text-sm font-medium text-gray-800">QR-Stempeln aktivieren</p>
-                <p className="text-xs text-gray-500 mt-0.5">Speichern nicht vergessen.</p>
-              </div>
-              <button
-                type="button"
-                onClick={() => setPsEnabled(v => !v)}
-                className={`relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none ${
-                  psEnabled ? 'bg-blue-600' : 'bg-gray-300'
-                }`}
-              >
-                <span className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform transition-transform duration-200 ${
-                  psEnabled ? 'translate-x-5' : 'translate-x-0'
-                }`} />
-              </button>
-            </div>
-
-            <div className="text-sm">
-              {psStatus?.configured ? (
-                <div className="flex items-center gap-2 text-green-700">
-                  <span className="inline-block w-2 h-2 rounded-full bg-green-500" />
-                  <span>QR-Code aktiv
-                    {psStatus.created_at && (
-                      <span className="text-gray-400 ml-1">(seit {new Date(psStatus.created_at).toLocaleString('de-DE')})</span>
-                    )}
-                  </span>
-                </div>
-              ) : (
-                <div className="flex items-center gap-2 text-gray-500">
-                  <span className="inline-block w-2 h-2 rounded-full bg-gray-300" />
-                  <span>Kein QR-Code generiert</span>
-                </div>
-              )}
-            </div>
-
-            {psUrl && (
-              <div className="rounded-lg border-2 border-amber-300 bg-amber-50 p-4 space-y-3">
-                <p className="text-xs font-semibold text-amber-800">
-                  ⚠ QR-Code jetzt drucken/sichern – die URL wird nur einmal angezeigt.
-                </p>
-                {psQr && (
-                  <div className="flex justify-center">
-                    <img src={psQr} alt="QR-Code" className="w-48 h-48 rounded-lg border border-amber-300 bg-white p-2" />
-                  </div>
-                )}
-                <div className="flex items-stretch gap-2">
-                  <input type="text" readOnly value={psUrl}
-                    onFocus={e => e.currentTarget.select()}
-                    className="flex-1 font-mono text-xs px-3 py-2 border border-amber-300 rounded bg-white" />
-                  <button onClick={copyPublicStampUrl}
-                    className="px-3 py-2 bg-amber-600 text-white text-xs font-medium rounded hover:bg-amber-700">
-                    {psCopied ? '✓ Kopiert' : 'Kopieren'}
-                  </button>
-                </div>
-                <button onClick={printPublicStampQr}
-                  className="w-full px-3 py-2 bg-gray-800 text-white text-xs font-medium rounded hover:bg-gray-900">
-                  🖨 QR-Code drucken
-                </button>
-              </div>
-            )}
-
-            <div className="flex flex-wrap items-center gap-3">
-              <button onClick={rotatePublicStampToken} disabled={psBusy}
-                className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50">
-                {psStatus?.configured ? 'Neuen QR-Code generieren' : 'QR-Code generieren'}
-              </button>
-              {psStatus?.configured && (
-                <button onClick={revokePublicStampToken} disabled={psBusy}
-                  className="px-4 py-2 bg-white border border-red-300 text-red-700 text-sm font-medium rounded-lg hover:bg-red-50 disabled:opacity-50">
-                  Deaktivieren
-                </button>
-              )}
-              {psStatus?.configured && (
-                <span className="text-xs text-gray-400">Beim Neugenerieren wird der bisherige QR-Code ungültig.</span>
-              )}
-            </div>
-          </div>
-        )}
+        {/* QR-Stempeln wurde in eine eigene Seite ausgelagert: /settings/qr-stamp */}

        {/* Mobile-Einstellungen */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
@@ -0,0 +1,247 @@
+import { useEffect, useState } from 'react'
+import QRCode from 'qrcode'
+import { api } from '../api/client'
+import { Layout } from '../components/Layout'
+
+interface UserOut {
+  id: string; first_name: string; last_name: string; email: string; role: string
+}
+
+export function QrStampSettingsPage() {
+  const [me, setMe] = useState<UserOut | null>(null)
+  const [companyName, setCompanyName] = useState('')
+
+  const [psEnabled, setPsEnabled] = useState(false)
+  const [psStatus, setPsStatus] = useState<{ configured: boolean; created_at: string | null } | null>(null)
+  const [psUrl, setPsUrl] = useState<string | null>(null)
+  const [psQr, setPsQr] = useState<string | null>(null)
+  const [psBusy, setPsBusy] = useState(false)
+  const [psCopied, setPsCopied] = useState(false)
+
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    api.get<UserOut>('/auth/me').then(setMe).catch(() => {})
+    api.get<{ name: string }>('/companies/me').then(c => setCompanyName(c.name)).catch(() => {})
+    api.get<{ enabled: boolean; configured: boolean; created_at: string | null }>('/companies/me/public-stamp-token')
+      .then(s => { setPsStatus({ configured: s.configured, created_at: s.created_at }); setPsEnabled(s.enabled) })
+      .catch(() => {})
+  }, [])
+
+  async function saveEnabled(next: boolean) {
+    setSaving(true)
+    setError(null)
+    setSaved(false)
+    try {
+      await api.patch('/companies/me', { public_stamp_enabled: next })
+      setPsEnabled(next)
+      setSaved(true)
+      setTimeout(() => setSaved(false), 3000)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function rotatePublicStampToken() {
+    setPsBusy(true)
+    setError(null)
+    try {
+      const res = await api.post<{ token: string; public_url: string; created_at: string }>(
+        '/companies/me/public-stamp-token/rotate', {}
+      )
+      setPsUrl(res.public_url)
+      setPsStatus({ configured: true, created_at: res.created_at })
+      setPsCopied(false)
+      setPsQr(await QRCode.toDataURL(res.public_url, { width: 320, margin: 2, errorCorrectionLevel: 'H' }))
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Fehler beim Generieren des QR-Tokens')
+    } finally {
+      setPsBusy(false)
+    }
+  }
+
+  async function revokePublicStampToken() {
+    if (!confirm('QR-Code wirklich deaktivieren? Bestehende ausgedruckte Codes und eingerichtete Tablets funktionieren danach nicht mehr.')) return
+    setPsBusy(true)
+    setError(null)
+    try {
+      await api.del('/companies/me/public-stamp-token')
+      setPsStatus({ configured: false, created_at: null })
+      setPsUrl(null)
+      setPsQr(null)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Fehler beim Deaktivieren')
+    } finally {
+      setPsBusy(false)
+    }
+  }
+
+  async function copyPublicStampUrl() {
+    if (!psUrl) return
+    try {
+      await navigator.clipboard.writeText(psUrl)
+      setPsCopied(true)
+      setTimeout(() => setPsCopied(false), 2000)
+    } catch { /* clipboard nicht verfügbar */ }
+  }
+
+  function openOnThisDevice() {
+    if (!psUrl) return
+    window.open(psUrl, '_blank', 'noopener')
+  }
+
+  function printPublicStampQr() {
+    if (!psQr) return
+    const w = window.open('', '_blank', 'width=600,height=800')
+    if (!w) return
+    w.document.write(`<!doctype html><html><head><title>QR-Stempel</title>
+      <style>body{font-family:sans-serif;text-align:center;padding:40px}
+      h1{font-size:22px}img{width:340px;height:340px}p{color:#555;font-size:15px}</style></head>
+      <body><h1>Zeiterfassung – ${companyName || ''}</h1>
+      <img src="${psQr}" alt="QR" />
+      <p>Mit dem Handy scannen, dann Personalnummer + PIN eingeben und ein-/ausstempeln.</p>
+      <script>window.onload=function(){window.print()}</script></body></html>`)
+    w.document.close()
+  }
+
+  const isAdmin = me?.role === 'COMPANY_ADMIN' || me?.role === 'SUPER_ADMIN'
+
+  return (
+    <Layout userRole={me?.role ?? ''} userName={me ? `${me.first_name} ${me.last_name}` : ''}>
+      <div className="max-w-2xl mx-auto space-y-6">
+        <h1 className="text-2xl font-bold text-gray-900">QR-Stempeln (Handy &amp; Tablet)</h1>
+
+        {!isAdmin && (
+          <div className="rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500">
+            Diese Einstellung ist nur für Firmen-Administratoren verfügbar.
+          </div>
+        )}
+
+        {error && (
+          <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>
+        )}
+        {saved && (
+          <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">Gespeichert.</div>
+        )}
+
+        {isAdmin && (
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-5">
+            <div className="flex items-center gap-2">
+              <span className="text-lg">📲</span>
+              <h2 className="font-semibold text-gray-700">QR-Stempeln</h2>
+            </div>
+            <p className="text-xs text-gray-400 -mt-2">
+              Statischer Zugang zum Ein-/Ausstempeln. Mitarbeiter scannen den QR-Code mit dem privaten Handy
+              oder ihr richtet ein <strong>Tablet am Eingang</strong> dauerhaft auf der Stempel-Seite ein.
+              Anmeldung jeweils per Personalnummer + PIN.
+            </p>
+
+            <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
+              ⚠ Schwächer als Kiosk-Terminals: keine Geräte-Signatur. Schutz nur über PIN + Sperre nach
+              Fehlversuchen. Nur aktivieren, wenn benötigt.
+            </div>
+
+            {/* Toggle aktiv (eigenes Speichern) */}
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="text-sm font-medium text-gray-800">QR-Stempeln aktivieren</p>
+                <p className="text-xs text-gray-500 mt-0.5">Wird sofort gespeichert.</p>
+              </div>
+              <button
+                type="button"
+                disabled={saving}
+                onClick={() => saveEnabled(!psEnabled)}
+                className={`relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none disabled:opacity-50 ${
+                  psEnabled ? 'bg-blue-600' : 'bg-gray-300'
+                }`}
+              >
+                <span className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform transition-transform duration-200 ${
+                  psEnabled ? 'translate-x-5' : 'translate-x-0'
+                }`} />
+              </button>
+            </div>
+
+            <div className="text-sm">
+              {psStatus?.configured ? (
+                <div className="flex items-center gap-2 text-green-700">
+                  <span className="inline-block w-2 h-2 rounded-full bg-green-500" />
+                  <span>Zugang aktiv
+                    {psStatus.created_at && (
+                      <span className="text-gray-400 ml-1">(seit {new Date(psStatus.created_at).toLocaleString('de-DE')})</span>
+                    )}
+                  </span>
+                </div>
+              ) : (
+                <div className="flex items-center gap-2 text-gray-500">
+                  <span className="inline-block w-2 h-2 rounded-full bg-gray-300" />
+                  <span>Kein Zugang generiert</span>
+                </div>
+              )}
+            </div>
+
+            {psUrl && (
+              <div className="rounded-lg border-2 border-amber-300 bg-amber-50 p-4 space-y-4">
+                <p className="text-xs font-semibold text-amber-800">
+                  ⚠ Jetzt sichern – der Link/QR-Code wird aus Sicherheitsgründen nur einmal angezeigt.
+                </p>
+
+                {psQr && (
+                  <div className="flex justify-center">
+                    <img src={psQr} alt="QR-Code" className="w-48 h-48 rounded-lg border border-amber-300 bg-white p-2" />
+                  </div>
+                )}
+
+                {/* Tablet-Link */}
+                <div className="space-y-2">
+                  <p className="text-xs font-semibold text-gray-700">🖥 Tablet-Link (Direktaufruf am Eingang)</p>
+                  <div className="flex items-stretch gap-2">
+                    <input type="text" readOnly value={psUrl}
+                      onFocus={e => e.currentTarget.select()}
+                      className="flex-1 font-mono text-xs px-3 py-2 border border-amber-300 rounded bg-white" />
+                    <button onClick={copyPublicStampUrl}
+                      className="px-3 py-2 bg-amber-600 text-white text-xs font-medium rounded hover:bg-amber-700">
+                      {psCopied ? '✓ Kopiert' : 'Link kopieren'}
+                    </button>
+                  </div>
+                  <p className="text-xs text-gray-500">
+                    Diesen Link auf dem Tablet im Browser öffnen und als Startseite/Lesezeichen oder im
+                    Kiosk-/Vollbildmodus fixieren. Derselbe Link funktioniert auch hinter dem QR-Code fürs Handy.
+                  </p>
+                  <button onClick={openOnThisDevice}
+                    className="w-full px-3 py-2 bg-blue-600 text-white text-xs font-medium rounded hover:bg-blue-700">
+                    ▶ Auf diesem Gerät öffnen
+                  </button>
+                </div>
+
+                <button onClick={printPublicStampQr}
+                  className="w-full px-3 py-2 bg-gray-800 text-white text-xs font-medium rounded hover:bg-gray-900">
+                  🖨 QR-Code drucken (Aushang)
+                </button>
+              </div>
+            )}
+
+            <div className="flex flex-wrap items-center gap-3">
+              <button onClick={rotatePublicStampToken} disabled={psBusy}
+                className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50">
+                {psStatus?.configured ? 'Neuen Link/QR-Code generieren' : 'Link/QR-Code generieren'}
+              </button>
+              {psStatus?.configured && (
+                <button onClick={revokePublicStampToken} disabled={psBusy}
+                  className="px-4 py-2 bg-white border border-red-300 text-red-700 text-sm font-medium rounded-lg hover:bg-red-50 disabled:opacity-50">
+                  Deaktivieren
+                </button>
+              )}
+              {psStatus?.configured && (
+                <span className="text-xs text-gray-400">Beim Neugenerieren werden der bisherige Link und QR-Code ungültig.</span>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </Layout>
+  )
+}