feat (Full Stack): Add access card ID and attendance tracking (#395)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: Strehk

CLAUDE-UI.md

@@ -271,6 +271,40 @@ Slide-out drawer showing full entry details including place information, map, an
 
 ---
 
+## Kbd Component
+
+`src/lib/components/Kbd.svelte`
+
+Renders a keyboard shortcut hint with OS-aware modifier formatting. On macOS, replaces modifier names with symbols (`alt` → `⌥`, `shift` → `⇧`, `ctrl` → `⌃`, `enter` → `↵`). On Windows/Linux, keeps text as-is. SSR-safe (defaults to text modifiers).
+
+### Props
+
+| Prop     | Type           | Description                        |
+| -------- | -------------- | ---------------------------------- |
+| `hotkey` | `string`       | Hotkey string, e.g. `"alt+a"`      |
+| `size`   | `'xs' \| 'sm'` | DaisyUI kbd size (default: `'sm'`) |
+
+### Usage Examples
+
+```svelte
+<script lang="ts">
+	import Kbd from '$lib/components/Kbd.svelte';
+</script>
+
+<!-- In a button -->
+<button class="btn btn-primary">
+	Save <Kbd hotkey="alt+a" />
+</button>
+
+<!-- Small size for inline badges -->
+<span class="hidden sm:inline-block"><Kbd hotkey="alt+n" size="xs" /></span>
+
+<!-- Compound shortcuts -->
+<Kbd hotkey="shift+enter" />
+```
+
+---
+
 ## Form Components (Critical)
 
 Forms use `sveltekit-superforms` for validation and state management. Always structure forms consistently.
@@ -449,6 +483,96 @@ Use `Drawer` for slide-out panels (e.g., detail views, edit forms).
 
 ---
 
+## TopDrawer Component
+
+Use `TopDrawer` for overlay panels that slide down from the top of the screen. Built on `vaul-svelte`, it provides a gesture-friendly drawer with drag-to-close support. Used in management tool pages (accessFlow, postalRegistration, payments) for showing scanned/searched item details.
+
+### Props
+
+| Prop            | Type                 | Description                                   |
+| --------------- | -------------------- | --------------------------------------------- |
+| `open`          | `boolean` (bindable) | Controls visibility                           |
+| `maxWidth`      | `string`             | Max width class (default: `'max-w-2xl'`)      |
+| `title`         | `string`             | Header title text                             |
+| `titleIcon`     | `string`             | FontAwesome icon class (e.g. `'fa-id-badge'`) |
+| `headerActions` | `Snippet`            | Buttons in header (profile link, close)       |
+| `children`      | `Snippet`            | Scrollable content area                       |
+| `footer`        | `Snippet`            | Sticky footer with action buttons             |
+
+### TopDrawer Example
+
+```svelte
+<script lang="ts">
+	import TopDrawer from '$lib/components/TopDrawer.svelte';
+
+	let drawerOpen = $state(false);
+</script>
+
+<TopDrawer bind:open={drawerOpen} title="Identity Check" titleIcon="fa-id-badge">
+	{#snippet headerActions()}
+		<button class="btn btn-ghost btn-sm btn-square" onclick={() => (drawerOpen = false)}>
+			<i class="fa-solid fa-xmark text-lg"></i>
+		</button>
+	{/snippet}
+
+	<p>Scrollable content goes here...</p>
+
+	{#snippet footer()}
+		<button class="btn btn-primary flex-1">Save & Next</button>
+		<button class="btn btn-error" onclick={() => (drawerOpen = false)}>Close</button>
+	{/snippet}
+</TopDrawer>
+```
+
+**Note:** `TopDrawer` is different from `Drawer` — TopDrawer uses vaul-svelte for gesture/swipe support and slides from the top; Drawer is a right-side slide-out panel.
+
+---
+
+## BarcodeScanner Component
+
+Use `BarcodeScanner` for pages that need barcode scanning via camera or manual text input. Encapsulates camera management, barcode detection, device switching, and manual input fallback.
+
+### Props
+
+| Prop                | Type                        | Description                                                |
+| ------------------- | --------------------------- | ---------------------------------------------------------- |
+| `scannedCode`       | `string \| null` (bindable) | The detected/entered code                                  |
+| `persistKey`        | `string`                    | localStorage key for camera preference                     |
+| `barcodeFormats`    | `BarcodeFormat[]`           | Formats to detect (default: `['data_matrix', 'code_128']`) |
+| `manualPlaceholder` | `string`                    | Placeholder for manual input field                         |
+| `scanPromptText`    | `string`                    | Prompt shown while camera is scanning                      |
+| `cameraZIndex`      | `string`                    | z-index class for camera preview (default: `'z-30'`)       |
+| `extraControls`     | `Snippet`                   | Optional controls between camera settings and input        |
+
+### Exposed Methods
+
+- `reset()` — Clears scanned code and restarts camera or refocuses manual input
+
+### BarcodeScanner Example
+
+```svelte
+<script lang="ts">
+	import BarcodeScanner from '$lib/components/Scanner/BarcodeScanner.svelte';
+	import { queryParameters } from 'sveltekit-search-params';
+
+	let params = queryParameters({ queryUserId: true });
+	let scannerRef: BarcodeScanner;
+</script>
+
+<BarcodeScanner
+	bind:this={scannerRef}
+	bind:scannedCode={$params.queryUserId}
+	barcodeFormats={['data_matrix', 'code_128']}
+	persistKey="useCameraForMyPage"
+	manualPlaceholder="Enter code..."
+	scanPromptText="Present the barcode..."
+/>
+
+<!-- Call scannerRef.reset() after saving to prepare for next scan -->
+```
+
+---
+
 ## Dashboard Components
 
 Dashboard pages use consistent section layouts.

messages/de.json

@@ -8,6 +8,11 @@
 	"abroadTransactionWarning": "Wenn Sie Überweisungen aus dem Ausland vornehmen: Bitte achten Sie besonders genau darauf, dass alle Informationen richtig sind. Stellen Sie außerdem sicher, dass Sie selbst die Kosten für die Auslandsüberweisung tragen und die Gebühr nicht von der Summe, die wir erhalten, abgezogen wird. Bitte achten Sie auch auf die richtige Währung ({currency}). Wenn Sie keine SWIFT-Überweisung durchführen, wenden Sie sich bitte zuerst an die Teilnehmendenbetreuung.",
 	"absent": "Abwesend",
 	"acceptAll": "Alle akzeptieren",
+	"accessAndAttendance": "Zugang & Anwesenheit",
+	"accessCardId": "Zugangsausweis-Nr.",
+	"accessFlow": "Zugangskontrolle",
+	"accessFlowDescription": "Teilnehmenden-Badges scannen, um Zugangsausweise zuzuweisen und Anwesenheit zu erfassen",
+	"accessFlowSaved": "Zugangsausweis zugewiesen und Anwesenheit erfasst.",
 	"accountExists": "Konto vorhanden",
 	"accountHolder": "Kontoinhaber*in",
 	"actions": "Aktionen",
@@ -159,7 +164,11 @@
 	"atLeastXChars": "Mindestens {amount} Zeichen notwendig.",
 	"atThisConference": "bei dieser Konferenz",
 	"attendance": "Anwesenheit",
+	"attendanceLog": "Anwesenheitsprotokoll",
 	"attendancePercentage": "Anwesenheitsanteil",
+	"attendanceRecorded": "Anwesenheit erfasst",
+	"attendanceScanner": "Anwesenheitsscanner",
+	"attendanceScannerDescription": "Teilnehmendenbadges scannen, um die Anwesenheit zu erfassen",
 	"attendanceStatus": "Anwesenheitsstatus",
 	"authErrorAccessDeniedDescription": "Du hast den Anmeldevorgang abgebrochen oder die erforderlichen Berechtigungen abgelehnt. Falls das unbeabsichtigt war, versuche es bitte erneut.",
 	"authErrorAccessDeniedTitle": "Anmeldung abgebrochen",
@@ -190,6 +199,7 @@
 	"badgeDataTitle": "Namensschild-Daten",
 	"bankName": "Name der Bank",
 	"bankingInformation": "Überweisungsinformationen",
+	"barcodeDetectError": "Fehler bei der Barcode-Erkennung: {error}",
 	"basicInfo": "Allgemeine Informationen",
 	"before": "Vorher",
 	"bic": "BIC",
@@ -279,6 +289,12 @@
 	"calendarTrack": "Track",
 	"calendarTracks": "Tracks",
 	"calendarWorkshop": "Workshop",
+	"cameraAborted": "Kamerazugriff wurde abgebrochen. Dies kann passieren, wenn der Berechtigungsdialog geschlossen wurde.",
+	"cameraAccessDenied": "Kamerazugriff verweigert. Bitte erteile die Berechtigung in deinen Browsereinstellungen.",
+	"cameraConstraintsError": "Kameraeinstellungen konnten nicht erfüllt werden. Versuche eine andere Kamera.",
+	"cameraFailed": "Kamerazugriff fehlgeschlagen.",
+	"cameraGenericError": "Fehler beim Kamerazugriff: {error}",
+	"cameraInUse": "Kamera wird bereits verwendet oder ist nicht verfügbar.",
 	"cameraSettings": "Kameraeinstellung",
 	"cancel": "Abbruch",
 	"cannotBeUndone": "Bitte bestätige die Eingabe! Die Änderung kann nicht rückgängig gemacht werden!",
@@ -414,6 +430,7 @@
 	"conferenceTitle": "Konferenzname",
 	"conferenceWebsite": "Website",
 	"confirm": "Bestätigen",
+	"confirmAll": "Alle bestätigen",
 	"confirmDeleteAgendaItem": "Möchtest du das Thema \"{title}\" wirklich löschen?",
 	"confirmDeleteOption": "Option löschen",
 	"confirmDeleteOptionDescription": "Bist du sicher, dass du die Option \"{title}\" löschen möchtest? Dadurch werden auch alle Antworten für diese Option gelöscht und dies kann nicht rückgängig gemacht werden.",
@@ -506,6 +523,8 @@
 	"deleteAllApplications": "Alle Bewerbungen löschen",
 	"deleteAllApplicationsConfirmation": "Möchtest du wirklich alle Bewerbungen löschen? Um die Aktion rückgängig zu machen, musst du dich erneut anmelden.",
 	"deleteApplicationConfirmation": "Möchtest diese Bewerbung wirklich löschen? Um die Aktion rückgängig zu machen, musst du dich erneut anmelden.",
+	"deleteAttendanceEntry": "Anwesenheitseintrag löschen",
+	"deleteAttendanceEntryConfirm": "Sind Sie sicher, dass Sie diesen Anwesenheitseintrag löschen möchten?",
 	"deleteDelegation": "Delegation löschen",
 	"deleteDelegationConfirmation": "Möchtest du diese Delegation wirklich löschen? Dies kann nicht rückgängig gemacht werden.",
 	"deleteEntry": "Löschen",
@@ -523,6 +542,7 @@
 	"didMyStudentsAlreadyCreateADelegation": "Haben meine Schüler*innen schon eine oder mehrere Delegationen erstellt?",
 	"didSomeoneOfTheseAlreadyCreateADelegation": "Hat eine der Personen schon\neine Delegation angelegt?",
 	"diet": "Ernährungsweise",
+	"dismiss": "Verwerfen",
 	"distribution": "Verteilung",
 	"diverse": "Divers",
 	"doIhavePeopleToApplyWith": "Habe ich Personen, mit denen\nich mich als Gruppe bewerben kann?",
@@ -533,6 +553,7 @@
 	"done": "Fertig",
 	"doneToRegister": "für Anmeldung erledigt",
 	"download": "Download",
+	"downloadBackup": "Backup herunterladen",
 	"downloadCertificate": "Zertifikat herunterladen",
 	"downloadCommitteeData": "Daten für das Gremium \"{committee}\" herunterladen",
 	"downloadCurrentRegistrationData": "Aktuelle Anmeldedaten herunterladen",
@@ -543,6 +564,7 @@
 	"downloadResults": "Alle Ergebnisse herunterladen",
 	"downloads": "Downloads",
 	"downloadsPageDescription": "Exportiere Konferenzdaten in verschiedenen Formaten für externe Tools und Berichte.",
+	"duplicateScan": "Diese teilnehmende Person wurde in dieser Sitzung bereits gescannt",
 	"edit": "Bearbeiten",
 	"editAgendaItem": "Thema bearbeiten",
 	"editCommittee": "Gremium bearbeiten",
@@ -569,6 +591,7 @@
 	"emergencyContactsPlaceholder": "Maria Musterfrau, +49123456789, m.musterfrau@mail.de",
 	"emptyPlaceholders": "Textbaustein enthält leere Platzhalter (\\{\\{\\}\\}). Bitte füge einen Namen in die Klammern ein.",
 	"end": "Ende",
+	"endSession": "Sitzung beenden",
 	"enterAtLeastOneEmail": "Bitte gib mindestens eine E-Mail-Adresse ein",
 	"enterCode": "Code eingeben",
 	"enterDateOfdateReceipt": "Empfangsdatum eingeben",
@@ -580,6 +603,7 @@
 	"enterYourReviewComments": "Gib deine Bewertungskommentare hier ein",
 	"entryCode": "Eintrittscode",
 	"errorGeneratingPostalRegistrationPDF": "Fehler beim Generieren des PDFs für die postalische Anmeldung",
+	"errors": "Fehler",
 	"expand": "Ausklappen",
 	"experience": "Erfahrung",
 	"expired": "abgelaufen",
@@ -683,6 +707,7 @@
 	"httpGenericError": "Es ist ein unbekannter Fehler aufgetreten.",
 	"iban": "IBAN",
 	"ibanMustBe22Characters": "IBAN muss 22 Zeichen ohne Leerzeichen haben",
+	"identityCheck": "Identitätsprüfung",
 	"impersonation": "Stellvertretung",
 	"impersonationActive": "Stellvertretung aktiv",
 	"impersonationFailed": "Stellvertretung fehlgeschlagen",
@@ -762,6 +787,8 @@
 	"manageSnippets": "Textbausteine verwalten",
 	"markAsProblem": "Als Problem markieren",
 	"markAsRecieved": "Als Erhalten markieren",
+	"markdownSupportedPlaceholder": "# Markdown wird unterstützt...",
+	"markdownSyntaxHint": "Dieser Editor unterstützt <strong>Markdown</strong>-Formatierung. Siehe den <a href=\"https://www.markdownguide.org/basic-syntax/\" target=\"_blank\" class=\"link\">Markdown Guide</a> für eine Syntaxreferenz.",
 	"mediaAgreement": "Einwilligung Bildnutzung",
 	"mediaConsentStatus": "Fotostatus",
 	"members": "Mitglieder",
@@ -780,6 +807,10 @@
 	"nations": "Länder",
 	"nationsPool": "Länderpool",
 	"nationsPoolDescription": "Hier sind die Länder aufgelistet, die euch zur Auswahl stehen. Jeder Haken bedeutet, dass das jeweilige Land in dem entsprechenden Gremium einen Sitz hat. Die Spalte am Ende zeigt an, wie viele Delegierte das Land insgesamt auf der Konferenz hat. Ihr könnt kein Land vertreten, das weniger Plätze hat, als ihr Mitglieder in der Delegation habt.",
+	"navInfo": "Kommunikation",
+	"navMaintenance": "Wartung",
+	"navWorkflows": "Arbeitsabläufe",
+	"networkErrorRetrying": "Netzwerkfehler — automatischer erneuter Versuch",
 	"newPaper": "Neues Papier",
 	"newPieceUnlocked": "Neues Puzzlestück freigeschaltet!",
 	"newStatus": "Neuer Status",
@@ -790,8 +821,11 @@
 	"nextNumber": "Nächste Nummer",
 	"no": "Nein",
 	"noAccess": "Hier hast du keinen Zugriff",
+	"noActiveSession": "Starte eine Sitzung, um mit dem Scannen zu beginnen",
 	"noAnswer": "Keine Antwort",
 	"noAnswerYet": "Noch nicht beantwortet",
+	"noAttendanceEntries": "Keine Anwesenheitseinträge erfasst",
+	"noCameraFound": "Keine Kamera gefunden. Bitte stelle sicher, dass eine Kamera angeschlossen ist.",
 	"noChangesBetweenVersions": "Keine Änderungen zwischen diesen Versionen",
 	"noCommittees": "Keine Gremien vorhanden",
 	"noConferenceHeading": "Keine Konferenz",
@@ -849,6 +883,8 @@
 	"nsaPool": "Nichtstaatliche Akteure",
 	"nsaPoolDescription": "Hier sind die nichtstaatlichen Akteure (NAs) aufgelistet, die dir zur Auswahl stehen. Delegierte von nichtstaatlichen Akteuren sind keinen konkreten Gremien zugeordnet. Dennoch ist auch die Anzahl der Delegierten pro NA begrenzt. Wenn du hier keine NA aufgelistet siehst, bedeutet das, dass keine NAs für die Konferenz vorgesehen sind oder die Anzahl der Mitglieder der Delegation die Anzahl der verfügbaren Plätze übersteigt.",
 	"nsaSeats": "Sitze von Nichtstaatlichen Akteuren",
+	"occasion": "Anlass",
+	"occasionForSession": "Anlass f. diese Sitzung",
 	"ofAge": "Volljährig",
 	"off": "Aus",
 	"omnivore": "Omnivor",
@@ -1064,6 +1100,7 @@
 	"receiveGeneralInformation": "E-Mails zu MUN-SH, MUNBW und anderen DMUN-Projekten erhalten",
 	"receiveJoinTeamInformation": "E-Mails mit Ausschreibungen für Teampositionen erhalten",
 	"recievedDate": "Empfangen am",
+	"recordEntry": "Eintrag erfassen",
 	"redo": "Wiederherstellen",
 	"reference": "Referenz",
 	"referenceDataDescription": "Exportiere Nationenlisten und andere Referenzdaten.",
@@ -1194,12 +1231,18 @@
 	"rotateCode": "Code erneuern",
 	"save": "Speichern",
 	"saveAndContinue": "Speichern und weiter",
+	"saveAndNext": "Speichern & Weiter",
 	"saveNextDocumentNumber": "Nächste Nummer speichern",
 	"saveSettings": "Einstellungen speichern",
-	"saved": "Gespeichert ✅",
+	"saved": "Gespeichert",
 	"saving": "Speichern...",
-	"scanPostalRegistrationCode": "Scanne den quadratischen Code (Data-Matrix) in der rechten oberen Ecke der postalischen Anmeldung, um den Status zu ändern. Mit <span class=\"kbd kbd-sm\">enter</span> kannst du alles auf einmal bestätigen, mit <span class=\"kbd kbd-sm\">1</span>, <span class=\"kbd kbd-sm\">2</span>, <span class=\"kbd kbd-sm\">3</span> und <span class=\"kbd kbd-sm\">4</span> kannst du die einzelnen Dokumente bestätigen.",
+	"scanCount": "{count} Scans",
+	"scanPending": "ausstehend",
+	"scanPostalRegistrationCode": "Scanne den quadratischen Code (Data-Matrix) in der rechten oberen Ecke der postalischen Anmeldung, um den Status zu ändern.",
+	"scanPostalRegistrationCodeHotkeyConfirmAll": "kannst du alle Dokumente und die Medienfreigabe auf einmal bestätigen.",
+	"scanPostalRegistrationCodeHotkeyMedia": "kannst du den Medienfreigabe-Status einzeln setzen.",
 	"scanPostalRegistrationCodePrompt": "Präsentiere den Code...",
+	"scanSynced": "synchronisiert",
 	"schoolOrInstitution": "Schule / Institution",
 	"search": "Suche",
 	"searchByDelegation": "Nach Delegationsname suchen...",
@@ -1221,13 +1264,16 @@
 	"separateEmailsHint": "Trenne mehrere E-Mails mit Kommas, Semikolons oder neuen Zeilen",
 	"servicesPage": "Dienste",
 	"servicesPageDescription": "Zugriff auf Konferenz-Tools und Dienste",
+	"sessionActive": "Sitzung aktiv",
 	"sessionExpiredCause1": "Der Anmeldevorgang länger als 5 Minuten gedauert hat",
 	"sessionExpiredCause2": "Du die Seite während der Anmeldung aktualisiert hast",
 	"sessionExpiredCause3": "Du mehrere Anmelde-Tabs geöffnet hast",
 	"sessionExpiredCauses": "Das passiert normalerweise, wenn:",
 	"sessionExpiredDescription": "Deine Anmeldesitzung ist abgelaufen oder ungültig. Das kann verschiedene Gründe haben. Bitte versuche, dich erneut anzumelden.",
 	"sessionExpiredTitle": "Anmeldesitzung abgelaufen",
 	"sessionExpiredTryAgain": "Erneut anmelden",
+	"sessionOccasion": "Sitzungsname",
+	"sessionOccasionPlaceholder": "z.B. Eröffnungsfeier",
 	"setAttendanceFalse": "Alle auf \"Abwesend\" setzen",
 	"setAttendanceTrue": "Alle auf \"Anwesend\" setzen",
 	"setDelegationPreferences": "Wünsche festlegen",
@@ -1288,6 +1334,7 @@
 	"start": "Start",
 	"startAssignment": "Assistent starten",
 	"startCamera": "Kamera starten",
+	"startSession": "Sitzung starten",
 	"statistics": "Statistiken",
 	"statsAcceptanceRate": "Annahmequote",
 	"statsAcceptedPapers": "Angenommen",
@@ -1423,7 +1470,7 @@
 	"tabExplanationCommittees": "Verwalte hier die <strong>Gremien</strong> und <strong>Tagesordnungspunkte</strong> deiner Konferenz. Jedes Gremium kann mehrere Themen haben, zu denen Teilnehmende Paper einreichen können.",
 	"tabExplanationDocuments": "Lade <strong>PDF-Vorlagen</strong> für den Postversand und Teilnahmezertifikate hoch. Die Vorlagen werden mit Teilnehmendendaten gefüllt.",
 	"tabExplanationGeneral": "Grundlegende Informationen über deine Konferenz. Diese Daten werden auf der Startseite und in der Übersicht angezeigt.",
-	"tabExplanationLinks": "Hier konfigurierst du <strong>externe Links</strong> und <strong>Ankündigungen</strong>, die Teilnehmenden im Dashboard angezeigt werden.",
+	"tabExplanationLinks": "Hier konfigurierst du <strong>externe Links</strong>, die Teilnehmenden im Dashboard angezeigt werden.",
 	"tabExplanationPayments": "Bankverbindung für die <strong>Teilnahmegebühren</strong>. Diese Informationen werden Teilnehmenden angezeigt, wenn sie ihre Zahlung tätigen.",
 	"tabExplanationStatus": "Der <strong>Konferenzstatus</strong> bestimmt, welche Funktionen für Teilnehmende verfügbar sind. Die <strong>Feature-Schalter</strong> aktivieren oder deaktivieren einzelne Funktionen unabhängig vom Status.",
 	"tableSize": "Tabellengröße",
@@ -1523,6 +1570,7 @@
 	"userId": "Benutzer-ID",
 	"userIdInput": "Code-Eingabe (UserId)",
 	"userNotFound": "Nutzer*in nicht gefunden",
+	"userNotFoundForAccessFlow": "Kein*e Teilnehmer*in mit dieser ID gefunden.",
 	"userNotFoundForPostalRegistration": "Kein*e Nutzer*in gefunden",
 	"usersAddedDirectly": "{count} Benutzer*innen direkt hinzugefügt",
 	"usubscribeSomeOnly": "Du willst stattdessen nur einzelne Newsletter abmelden?",