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>
This commit is contained in:
Claude Opus 4.8
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user