✨ first version

2026-08-27 22:16:18 +02:00
parent 55a51a521d
commit ba35f9eab0
69 changed files with 12699 additions and 483 deletions
@@ -0,0 +1,83 @@
+import { useEffect } from 'react'
+
+import type { listStaffMembers } from '#/lib/staff'
+
+type StaffMember = Awaited<ReturnType<typeof listStaffMembers>>[number]
+
+type Props = {
+  member: StaffMember | null
+  onClose: () => void
+}
+
+const dateFormatter = new Intl.DateTimeFormat('de-DE', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+})
+
+export function StaffMemberDetailDialog({ member, onClose }: Props) {
+  useEffect(() => {
+    if (!member) return
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [member, onClose])
+
+  if (!member) return null
+
+  return (
+    <div className="confirm-dialog-backdrop" onClick={onClose}>
+      <div
+        className="confirm-dialog reservation-detail-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="staff-member-detail-title"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <h2 id="staff-member-detail-title" className="confirm-dialog-title">
+          {member.name}
+        </h2>
+
+        <dl className="detail-list">
+          <div>
+            <dt>E-Mail</dt>
+            <dd>
+              <a href={`mailto:${member.email}`}>{member.email}</a>
+            </dd>
+          </div>
+          <div>
+            <dt>Telefon</dt>
+            <dd>{member.phone ? <a href={`tel:${member.phone}`}>{member.phone}</a> : '—'}</dd>
+          </div>
+          <div>
+            <dt>Rolle</dt>
+            <dd>{member.role === 'admin' ? 'Admin' : 'Mitarbeiter'}</dd>
+          </div>
+          <div>
+            <dt>Status</dt>
+            <dd>{member.banned ? 'Gesperrt' : 'Aktiv'}</dd>
+          </div>
+          {member.banned && member.banReason && (
+            <div>
+              <dt>Sperrgrund</dt>
+              <dd>{member.banReason}</dd>
+            </div>
+          )}
+          <div>
+            <dt>Angelegt am</dt>
+            <dd>{dateFormatter.format(new Date(member.createdAt))}</dd>
+          </div>
+        </dl>
+
+        <div className="confirm-dialog-actions">
+          <button type="button" className="btn btn-secondary" onClick={onClose}>
+            Schließen
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}