Update

src/routes/navstevnici.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script>
-  import { bundle } from "$lib/stores.js";
+  import { bundle, apiStatus } from "$lib/stores.js";
   import api from "$lib/api.js";
   import { format, formatDistanceToNow } from "date-fns";
   import { cs } from "date-fns/locale/index.js";
@@ -29,6 +29,31 @@
     tickets = await api.apiCall("tickets");
     lastUpdate = new Date();
   }
+
+  const statsDef = [
+    { name: "Vlna", fn: (as) => (as.wave ? as.wave.id : "?") },
+    {
+      name: "Zaplacených vstupenek",
+      fn: (as) => (as.wave ? as.wave.issued : "?"),
+    },
+    {
+      name: "Rezervovaných vstupenek",
+      fn: (as) => (as.wave ? as.wave.waiting : "?"),
+    },
+    {
+      name: "Volných vstupenek",
+      fn: (as) =>
+        as.wave
+          ? as.wave.left +
+            "/" +
+            (as.wave.issued + as.wave.waiting + as.wave.left)
+          : "?",
+    },
+    {
+      name: "KryptoKino vstupenek",
+      fn: (as) => as.kino.issued + "/" + as.kino.total,
+    },
+  ];
 </script>
 
 <svelte:head>
@@ -39,11 +64,22 @@
   <h1 class="uppercase text-2xl font-bold">Návštěvníci</h1>
 
   {#if tickets}
+    <div class="flex flex-wrap gap-5 uppercase mt-5 w-full mb-10">
+      {#each statsDef as def}
+        <div class="flex-1">
+          <div class="w-1/6">
+            <div class="text-4xl font-bold">{def.fn($apiStatus)}</div>
+            <div class="text-sm">{def.name}</div>
+          </div>
+        </div>
+      {/each}
+    </div>
     <div>
       <table class="table-auto mt-6 w-full" cellpadding="6">
         <thead>
           <tr class="text-xs uppercase text-blue-web/80">
             <th align="left">ID</th>
+            <th align="left">Obj.</th>
             <th align="left">Jmenovka</th>
             <th align="left">Kino?</th>
             <th align="left">Vytvořeno</th>
@@ -51,8 +87,13 @@
         </thead>
         <tbody>
           {#each tickets as ticket}
-            <tr class="hover:bg-blue-500/10">
+            <tr
+              class={ticket.id
+                ? "hover:bg-blue-500/10"
+                : "bg-yellow-400/20 hover:bg-yellow-600/20"}
+            >
               <td class="border-b"><pre>{ticket.id}</pre></td>
+              <td class="border-b text-sm"><pre>{ticket.orderId}</pre></td>
               <td class="border-b"
                 >{#if ticket.data.name}<span class="font-semibold"
                     >{ticket.data.name}</span