src/components/scans/ScanValid.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let valid = false;
+</script>
+
+{#if valid}
+  <span
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    >{$_("valid")}</span
+  >
+{:else}
+  <span
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+    >{$_("invalid")}</span
+  >
+{/if}

src/components/scans/ScansOverview.svelte

@@ -20,6 +20,8 @@
   import InputElement from "../shared/InputElement.svelte";
   import TableActions from "../shared/TableActions.svelte";
   import { runnerFilter } from "../shared/tablefilters";
+  import CardRunner from "../cards/CardRunner.svelte";
+  import ScanValid from "./ScanValid.svelte";
 
   $: selectedScans =
     $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
@@ -73,11 +75,9 @@
       accessorKey: "runner",
       header: () => $_("runner"),
       cell: (info) => {
-        const runner = info.getValue();
+        return renderComponent(CardRunner, { runner: info.getValue() });
-        return `#${runner.id} - ${runner.firstname} ${runner.lastname}`;
       },
       filterFn: `runner`,
-      enableColumnFilter: true,
     },
     {
       accessorKey: "lapTime",
@@ -107,6 +107,14 @@
       },
       enableColumnFilter: true,
     },
+    {
+      accessorKey: "valid",
+      cell: (info) => {
+        return renderComponent(ScanValid, { valid: info.getValue() });
+      },
+      header: () => $_("status"),
+      filterFn: `includesString`,
+    },
     {
       accessorKey: "actions",
       header: () => $_("action"),