Working nice, looks like shit

src/routes/private/scanner/TicketDisplay.svelte

@@ -1,14 +1,24 @@
 <script lang="ts">
 	import type { TicketData } from '$lib/types';
+	import { ScanState } from '$lib/types';
 
-	let { ticket_data }: { ticket_data: TicketData } = $props();
+	let { ticket_data, scan_state }: { ticket_data: TicketData, scan_state: ScanState } = $props();
 </script>
 
-<p class="robo">{ticket_data.name}</p>
-<p>{ticket_data.surname}</p>
+{#if scan_state === ScanState.scanning}
+	<p>Waiting for data...</p>
 
-<style>
-.robo {
-	font-family: var(--font-display);
-}
-</style>
+{:else if scan_state === ScanState.scan_failed}
+	<p>Scan failed. Please try again.</p>
+
+{:else if scan_state === ScanState.scan_successful}
+	{#if ticket_data.scanned}
+		<p>Ticket already scanned!</p>
+		<p>By {ticket_data.scanned_by} at {ticket_data.scanned_at}</p>
+	{:else}
+		<p>Scan successful!</p>
+		<ol>
+			<li>{ticket_data.name} {ticket_data.surname}</li>
+		</ol>
+	{/if}
+{/if}