Looking better

src/lib/types.ts

@@ -9,12 +9,12 @@ export type TicketData = {
   name: string;
   surname: string;
   email: string;
-    event: string;
+  event: { id: string; name: string };
   created_at: string;
-    created_by: string | null;
+  created_by: { id: string; display_name: string } | null;
   scanned: boolean;
   scanned_at: string | null;
-    scanned_by: string | null;
+  scanned_by: { id: string; display_name: string } | null;
 };
 
 export const defaultTicketData: TicketData = {

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script>
   import { invalidate } from '$app/navigation'
   import { onMount } from 'svelte'
+  import "../app.css";
 
   let { data, children } = $props()
   let { session, supabase } = $derived(data)

src/routes/private/+layout.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+// Add any navbar logic here if needed
+</script>
+
+<nav class="bg-gray-800 text-white p-4 flex items-center justify-between">
+  <div class="font-bold text-lg">ESN Scanner</div>
+  <ul class="flex space-x-4">
+    <li><a href="/private/home" class="hover:underline">Home</a></li>
+    <li><a href="/private/scanner" class="hover:underline">Scanner</a></li>
+  </ul>
+</nav>
+
+<div class="container p-2 bg-white ">
+    <slot />
+</div>

src/routes/private/scanner/+page.svelte

@@ -23,9 +23,7 @@
 			if (response.data && response.data.length > 0) {
 				ticket_data = response.data[0];
 				scan_state = ScanState.scan_successful;
-				data.supabase.rpc('scan_ticket', { _ticket_id: scanned_id})
+				data.supabase.rpc('scan_ticket', { _ticket_id: scanned_id}).then();
-				console.log(scanned_id)
-				console.log(response.data[0]);
 			} else {
 				ticket_data = defaultTicketData;
 				scan_state = ScanState.scan_failed;

src/routes/private/scanner/QRScanner.svelte

@@ -39,7 +39,7 @@
     });
 </script>
 
-<div id="qr-scanner" class="w-full max-w-sm bg-slate-700 rounded-lg overflow-hidden"></div>
+<div id="qr-scanner" class="w-full h-full max-w-none bg-slate-700 overflow-hidden"></div>
 
 <style>
     /* Hide unwanted icons */
@@ -48,6 +48,10 @@
         display: none;
     }
 
+    #qr-scanner {
+        color: white !important;
+    }
+
     /* Change camera permission button text */
     #qr-scanner :global(#html5-qrcode-button-camera-permission) {
         visibility: hidden;

src/routes/private/scanner/TicketDisplay.svelte

@@ -2,23 +2,43 @@
 	import type { TicketData } from '$lib/types';
 	import { ScanState } from '$lib/types';
 
-	let { ticket_data, scan_state }: { ticket_data: TicketData, scan_state: ScanState } = $props();
+	let { ticket_data, scan_state }: { ticket_data: TicketData; scan_state: ScanState } = $props();
+
+	function formatScannedAt(dateString: string): string {
+		const date = new Date(dateString);
+		const day = String(date.getDate()).padStart(2, '0');
+		const month = String(date.getMonth() + 1).padStart(2, '0');
+		const hours = String(date.getHours()).padStart(2, '0');
+		const minutes = String(date.getMinutes()).padStart(2, '0');
+		return `${day}.${month}. ${hours}:${minutes}`;
+	}
 </script>
 
-{#if scan_state === ScanState.scanning}
+<div class="py-3">
+	{#if scan_state === ScanState.scanning}
+		<div class="rounded border-l-4 border-orange-500 bg-orange-100 p-4 text-orange-700">
 			<p>Waiting for data...</p>
-
+		</div>
-{:else if scan_state === ScanState.scan_failed}
+	{:else if scan_state === ScanState.scan_failed}
+		<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
 			<p>Scan failed. Please try again.</p>
-
+		</div>
-{:else if scan_state === ScanState.scan_successful}
+	{:else if scan_state === ScanState.scan_successful}
 		{#if ticket_data.scanned}
+		<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700">
 			<p>Ticket already scanned!</p>
-		<p>By {ticket_data.scanned_by} at {ticket_data.scanned_at}</p>
+			<p>
+				By {ticket_data.scanned_by?.display_name} on
+				{formatScannedAt(ticket_data.scanned_at)}
+			</p>
+		</div>
 		{:else}
-		<p>Scan successful!</p>
+			<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
 				<ol>
+					<li>{ticket_data.event.name}</li>
 					<li>{ticket_data.name} {ticket_data.surname}</li>
 				</ol>
+			</div>
 		{/if}
-{/if}
+	{/if}
+</div>