From cb5f2b73d0a5f71875f48d381382919f9bee364e Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Wed, 12 Apr 2023 18:29:06 +0200
Subject: [PATCH] drop old datatables

---
 package.json                                  |   1 -
 pnpm-lock.yaml                                |   7 -
 src/App.svelte                                |   1 -
 src/components/cards/CardsOverview.svelte     | 225 ++++++-------
 .../contacts/ContactsOverview.svelte          |   2 +-
 .../donations/DonationsOverview.svelte        |   2 +-
 src/components/donors/DonorsOverview.svelte   |   2 +-
 .../groups/UserGroupsOverview.svelte          |   2 +-
 src/components/orgs/OrgOverview.svelte        |   2 +-
 src/components/presets/DataTable.svelte       |  30 --
 src/components/scans/ScansOverview.svelte     | 309 +++++++++---------
 .../scanstations/ScanStationsOverview.svelte  |   2 +-
 .../statsclients/StatsClientsOverview.svelte  |   2 +-
 src/components/teams/TeamsOverview.svelte     |   2 +-
 src/components/tracks/Tracks.svelte           |   6 +-
 src/components/users/UsersOverview.svelte     |   2 +-
 src/main.js                                   |   1 -
 17 files changed, 273 insertions(+), 325 deletions(-)
 delete mode 100644 src/components/presets/DataTable.svelte

diff --git a/package.json b/package.json
index 6ed4031f..5003d5e2 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
 		"@paralleldrive/cuid2": "^2.2.0",
 		"@tanstack/svelte-table": "^8.8.5",
 		"@tanstack/table-core": "^8.8.5",
-		"@vincjo/datatables": "^1.5.2",
 		"check-password-strength": "2.0.7",
 		"csvtojson": "2.0.10",
 		"gridjs": "3.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 072d3385..95937cc9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,9 +13,6 @@ dependencies:
   '@tanstack/table-core':
     specifier: ^8.8.5
     version: 8.8.5
-  '@vincjo/datatables':
-    specifier: ^1.5.2
-    version: 1.5.2
   check-password-strength:
     specifier: 2.0.7
     version: 2.0.7
@@ -641,10 +638,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /@vincjo/datatables@1.5.2:
-    resolution: {integrity: sha512-pdpwJ0y/CobZdfIxeujXB1jIARVlaKRf0aGhr6cINdUTuW0Ab0kgpZNy/MdAXnKeE6lBFzBXjI8FcJzkdmN/wg==}
-    dev: false
-
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
diff --git a/src/App.svelte b/src/App.svelte
index 586d88b4..77561f97 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,5 @@
 <script>
   import "toastify-js/src/toastify.css";
-  import "gridjs/dist/theme/mermaid.css";
   import { Route, router } from "tinro";
   router.subscribe((routeInfo) => {
     window.scrollTo(0, 0);
diff --git a/src/components/cards/CardsOverview.svelte b/src/components/cards/CardsOverview.svelte
index e9a693f1..04dad4c6 100644
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -3,7 +3,6 @@
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
-  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
   import CardsEmptyState from "./CardsEmptyState.svelte";
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
@@ -89,8 +88,7 @@
               Toastify({
                 text: $_("cards-deleted"),
                 duration: 3500,
-                backgroundColor:
-                  "linear-gradient(to right, #00b09b, #96c93d)",
+                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
               }).showToast();
               //TODO: Delete cards from table
             }}
@@ -114,138 +112,131 @@
         {/if}
         <GenerateRunnerCards bind:cards_show bind:generate_cards />
       </div>
-      <Datatable {handler}>
-        <table>
-          <thead>
+      <table>
+        <thead>
+          <tr>
+            <th style="border-bottom: 1px solid #ddd;">
+              <input
+                type="checkbox"
+                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                checked={generate_cards.length == current_cards.length}
+                on:click={() => {
+                  if (generate_cards.length != current_cards.length) {
+                    generate_cards = current_cards;
+                  } else {
+                    generate_cards = [];
+                  }
+                }}
+              />
+            </th>
+            <Th {handler} orderBy="code">{$_("code")}</Th>
+            <Th {handler} orderBy="runner">{$_("runner")}</Th>
+            <Th {handler} orderBy="status">{$_("status")}</Th>
+            <th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
+          </tr>
+          <tr>
+            <th style="border-bottom: 1px solid #ddd;" />
+            <ThFilter {handler} filterBy="code" />
+            <ThFilterRunner {handler} />
+            <ThFilterStatus {handler} />
+            <th style="border-bottom: 1px solid #ddd;" />
+          </tr>
+        </thead>
+        <tbody>
+          {#each $rows as row}
             <tr>
-              <th style="border-bottom: 1px solid #ddd;">
+              <td>
                 <input
                   type="checkbox"
                   class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                  checked={generate_cards.length == current_cards.length}
+                  checked={generate_cards.filter((i) => i.id == row.id).length >
+                    0}
                   on:click={() => {
-                    if (generate_cards.length != current_cards.length) {
-                      generate_cards = current_cards;
+                    if (generate_cards.findIndex((i) => i.id == row.id) == -1) {
+                      generate_cards.push(row);
+                      generate_cards = generate_cards;
                     } else {
-                      generate_cards = [];
+                      generate_cards = generate_cards.filter(
+                        (r) => r.id != row.id
+                      );
                     }
+                    console.log(generate_cards);
                   }}
                 />
-              </th>
-              <Th {handler} orderBy="code">{$_("code")}</Th>
-              <Th {handler} orderBy="runner">{$_("runner")}</Th>
-              <Th {handler} orderBy="status">{$_("status")}</Th>
-              <th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
-            </tr>
-            <tr>
-              <th style="border-bottom: 1px solid #ddd;" />
-              <ThFilter {handler} filterBy="code" />
-              <ThFilterRunner {handler} />
-              <ThFilterStatus {handler} />
-              <th style="border-bottom: 1px solid #ddd;" />
-            </tr>
-          </thead>
-          <tbody>
-            {#each $rows as row}
-              <tr>
-                <td>
-                  <input
-                    type="checkbox"
-                    class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                    checked={generate_cards.filter((i) => i.id == row.id)
-                      .length > 0}
+              </td>
+              <td>{row.code}</td>
+              <td>
+                {#if row.runner}
+                  <a
+                    href="../runners/{row.runner.id}"
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                    >{row.runner.firstname}
+                    {row.runner.middlename || ""}
+                    {row.runner.lastname}</a
+                  >
+                {:else}{$_("non-blanko")}{/if}
+              </td>
+              <td>
+                {#if row.enabled}
+                  <span
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+                    >{$_("enabled")}</span
+                  >
+                {:else}
+                  <span
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+                    >{$_("disabled")}</span
+                  >
+                {/if}
+              </td>
+              <td>
+                {#if active_deletes[row.id] === true}
+                  <button
                     on:click={() => {
-                      if (
-                        generate_cards.findIndex((i) => i.id == row.id) == -1
-                      ) {
-                        generate_cards.push(row);
-                        generate_cards = generate_cards;
-                      } else {
-                        generate_cards = generate_cards.filter(
-                          (r) => r.id != row.id
-                        );
-                      }
-                      console.log(generate_cards);
+                      active_deletes[row.id] = false;
                     }}
-                  />
-                </td>
-                <td>{row.code}</td>
-                <td>
-                  {#if row.runner}
-                    <a
-                      href="../runners/{row.runner.id}"
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                      >{row.runner.firstname}
-                      {row.runner.middlename || ""}
-                      {row.runner.lastname}</a
-                    >
-                  {:else}{$_("non-blanko")}{/if}
-                </td>
-                <td>
-                  {#if row.enabled}
-                    <span
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
-                      >{$_("enabled")}</span
-                    >
-                  {:else}
-                    <span
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
-                      >{$_("disabled")}</span
-                    >
-                  {/if}
-                </td>
-                <td>
-                  {#if active_deletes[row.id] === true}
+                    tabindex="0"
+                    class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                    >{$_("cancel-delete")}</button
+                  >
+                  <button
+                    on:click={() => {
+                      RunnerCardService.runnerCardControllerRemove(row.id, true)
+                        .then((resp) => {
+                          current_cards = current_cards.filter(
+                            (obj) => obj.id !== row.id
+                          );
+                        })
+                        .catch((err) => {});
+                    }}
+                    tabindex="0"
+                    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                    >{$_("confirm-delete")}</button
+                  >
+                {:else}
+                  <button
+                    on:click={() => {
+                      open_edit_modal(row);
+                    }}
+                    class="text-indigo-600 hover:text-indigo-900"
+                    >{$_("details")}</button
+                  >
+                  {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE")}
                     <button
                       on:click={() => {
-                        active_deletes[row.id] = false;
-                      }}
-                      tabindex="0"
-                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                      >{$_("cancel-delete")}</button
-                    >
-                    <button
-                      on:click={() => {
-                        RunnerCardService.runnerCardControllerRemove(
-                          row.id,
-                          true
-                        )
-                          .then((resp) => {
-                            current_cards = current_cards.filter(
-                              (obj) => obj.id !== row.id
-                            );
-                          })
-                          .catch((err) => {});
+                        active_deletes[row.id] = true;
                       }}
                       tabindex="0"
                       class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                      >{$_("confirm-delete")}</button
+                      >{$_("delete")}</button
                     >
-                  {:else}
-                    <button
-                      on:click={() => {
-                        open_edit_modal(row);
-                      }}
-                      class="text-indigo-600 hover:text-indigo-900"
-                      >{$_("details")}</button
-                    >
-                    {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE")}
-                      <button
-                        on:click={() => {
-                          active_deletes[row.id] = true;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                        >{$_("delete")}</button
-                      >
-                    {/if}
                   {/if}
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </Datatable>
+                {/if}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
     {/if}
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
diff --git a/src/components/contacts/ContactsOverview.svelte b/src/components/contacts/ContactsOverview.svelte
index 64c1431a..345f9431 100644
--- a/src/components/contacts/ContactsOverview.svelte
+++ b/src/components/contacts/ContactsOverview.svelte
@@ -31,7 +31,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
diff --git a/src/components/donations/DonationsOverview.svelte b/src/components/donations/DonationsOverview.svelte
index 8db4ea4d..c509f98f 100644
--- a/src/components/donations/DonationsOverview.svelte
+++ b/src/components/donations/DonationsOverview.svelte
@@ -49,7 +49,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
diff --git a/src/components/donors/DonorsOverview.svelte b/src/components/donors/DonorsOverview.svelte
index f399858c..9c7153ff 100644
--- a/src/components/donors/DonorsOverview.svelte
+++ b/src/components/donors/DonorsOverview.svelte
@@ -51,7 +51,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
diff --git a/src/components/groups/UserGroupsOverview.svelte b/src/components/groups/UserGroupsOverview.svelte
index 3af8e6d1..d6886aa2 100644
--- a/src/components/groups/UserGroupsOverview.svelte
+++ b/src/components/groups/UserGroupsOverview.svelte
@@ -30,7 +30,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
diff --git a/src/components/orgs/OrgOverview.svelte b/src/components/orgs/OrgOverview.svelte
index 2158fd16..fbbaf2d0 100644
--- a/src/components/orgs/OrgOverview.svelte
+++ b/src/components/orgs/OrgOverview.svelte
@@ -51,7 +51,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div class="h-12">
         <GenerateSponsoringContracts
             bind:sponsoring_contracts_show
diff --git a/src/components/presets/DataTable.svelte b/src/components/presets/DataTable.svelte
deleted file mode 100644
index 5aaba815..00000000
--- a/src/components/presets/DataTable.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-  import { _, json } from "svelte-i18n";
-  import { getlang } from "./datatable_i18n";
-  import { Grid } from "gridjs";
-  //
-  let table;
-  const datatable = new Grid({
-    columns: ["Name", "Email", "Phone Number"],
-    language: getlang($json("datatable")),
-    sort: true,
-    search: { enabled: true },
-    data: [
-      ["John", "john@example.com", "(353) 01 222 3333"],
-      ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
-      ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
-      ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
-      ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
-    ],
-    pagination: {
-      enabled: true,
-      limit: 2,
-      summary: false,
-    },
-  });
-  setTimeout(() => {
-    datatable.render(table);
-  }, 0);
-</script>
-
-<div bind:this={table} />
diff --git a/src/components/scans/ScansOverview.svelte b/src/components/scans/ScansOverview.svelte
index e3d54752..96fa9ba7 100644
--- a/src/components/scans/ScansOverview.svelte
+++ b/src/components/scans/ScansOverview.svelte
@@ -1,6 +1,5 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
   import { ScanService, TrackService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
@@ -57,169 +56,167 @@
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
       >
-        <Datatable {handler}>
-          <table class="divide-y divide-gray-200 w-full">
-            <thead class="bg-gray-50">
-              <tr>
-                <Th {handler} orderBy="id">ID</Th>
-                <Th {handler}>
-                  {$_("runner")}
-                </Th>
-                <Th {handler}>
-                  {$_("distance")}
-                </Th>
-                <Th {handler}>
-                  {$_("track")}
-                </Th>
-                <Th {handler}>
-                  {$_("laptime")}
-                </Th>
-                <Th {handler}>
-                  {$_("status")}
-                </Th>
-                <th
-                  scope="col"
-                  class="relative px-6 py-3"
-                  style="border-bottom: 1px solid #ddd;"
-                >
-                  {$_("action")}
-                </th>
-              </tr>
-              <tr>
-                <ThFilter {handler} filterBy="id" />
-                <ThFilterRunner {handler} />
-                <th style="border-bottom: 1px solid #ddd;" />
-                <ThFilterTrack tracks={allTracks} {handler} />
-                <!-- <th style="border-bottom: 1px solid #ddd;" /> -->
-                <th style="border-bottom: 1px solid #ddd;" />
-                <th style="border-bottom: 1px solid #ddd;" />
-                <!-- TODO: filter status -->
-                <th style="border-bottom: 1px solid #ddd;" />
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-gray-200">
-              {#each $rows as scan}
-                <tr data-rowid="scan_{scan.id}">
-                  <td class="px-6 py-4 whitespace-nowrap text-left">
-                    <div class="text-sm font-medium text-gray-900">
-                      {scan.id}
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <a
-                        href="../runners/{scan.runner.id}"
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                        >{scan.runner.firstname}
-                        {scan.runner.middlename || ""}
-                        {scan.runner.lastname}</a
-                      >
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-left">
-                    <div class="text-sm font-medium text-gray-900">
-                      {#if scan.distance < 1000}
-                        {scan.distance}m
-                      {:else}{scan.distance / 1000}km{/if}
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-left">
-                    <div class="text-sm font-medium text-gray-900">
-                      {#if scan.track}
-                        <a
-                          href="../tracks"
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                          >{scan.track.name}
-                        </a>
-                      {/if}
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-left">
-                    {#if scan.responseType === "TRACKSCAN"}
-                      <div class="text-sm font-medium text-gray-900">
-                        {format_laptime(scan.lapTime)}
-                      </div>
-                    {:else}
-                      <div class="text-sm font-medium text-gray-900">
-                        {$_("scan-with-fixed-distance")}
-                      </div>
-                    {/if}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      {#if scan.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}
-                    </div>
-                  </td>
-
-                  {#if active_deletes[scan.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <Th {handler} orderBy="id">ID</Th>
+              <Th {handler}>
+                {$_("runner")}
+              </Th>
+              <Th {handler}>
+                {$_("distance")}
+              </Th>
+              <Th {handler}>
+                {$_("track")}
+              </Th>
+              <Th {handler}>
+                {$_("laptime")}
+              </Th>
+              <Th {handler}>
+                {$_("status")}
+              </Th>
+              <th
+                scope="col"
+                class="relative px-6 py-3"
+                style="border-bottom: 1px solid #ddd;"
+              >
+                {$_("action")}
+              </th>
+            </tr>
+            <tr>
+              <ThFilter {handler} filterBy="id" />
+              <ThFilterRunner {handler} />
+              <th style="border-bottom: 1px solid #ddd;" />
+              <ThFilterTrack tracks={allTracks} {handler} />
+              <!-- <th style="border-bottom: 1px solid #ddd;" /> -->
+              <th style="border-bottom: 1px solid #ddd;" />
+              <th style="border-bottom: 1px solid #ddd;" />
+              <!-- TODO: filter status -->
+              <th style="border-bottom: 1px solid #ddd;" />
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each $rows as scan}
+              <tr data-rowid="scan_{scan.id}">
+                <td class="px-6 py-4 whitespace-nowrap text-left">
+                  <div class="text-sm font-medium text-gray-900">
+                    {scan.id}
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    <a
+                      href="../runners/{scan.runner.id}"
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                      >{scan.runner.firstname}
+                      {scan.runner.middlename || ""}
+                      {scan.runner.lastname}</a
                     >
-                      <button
-                        on:click={() => {
-                          active_deletes[scan.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                        >{$_("cancel-delete")}</button
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-left">
+                  <div class="text-sm font-medium text-gray-900">
+                    {#if scan.distance < 1000}
+                      {scan.distance}m
+                    {:else}{scan.distance / 1000}km{/if}
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-left">
+                  <div class="text-sm font-medium text-gray-900">
+                    {#if scan.track}
+                      <a
+                        href="../tracks"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                        >{scan.track.name}
+                      </a>
+                    {/if}
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-left">
+                  {#if scan.responseType === "TRACKSCAN"}
+                    <div class="text-sm font-medium text-gray-900">
+                      {format_laptime(scan.lapTime)}
+                    </div>
+                  {:else}
+                    <div class="text-sm font-medium text-gray-900">
+                      {$_("scan-with-fixed-distance")}
+                    </div>
+                  {/if}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    {#if scan.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}
+                  </div>
+                </td>
+
+                {#if active_deletes[scan.id] === true}
+                  <td
+                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                  >
+                    <button
+                      on:click={() => {
+                        active_deletes[scan.id] = false;
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                      >{$_("cancel-delete")}</button
+                    >
+                    <button
+                      on:click={() => {
+                        ScanService.scanControllerRemove(scan.id, false).then(
+                          (resp) => {
+                            current_scans = current_scans.filter(
+                              (obj) => obj.id !== scan.id
+                            );
+                            Toastify({
+                              text: "Scan deleted",
+                              duration: 500,
+                              backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                            }).showToast();
+                          }
+                        );
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                      >{$_("confirm-delete")}</button
+                    >
+                  </td>
+                {:else}
+                  <td
+                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                  >
+                    <a
+                      href="./{scan.id}"
+                      class="text-indigo-600 hover:text-indigo-900"
+                      >{$_("details")}</a
+                    >
+                    {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
                       <button
                         on:click={() => {
-                          ScanService.scanControllerRemove(scan.id, false).then(
-                            (resp) => {
-                              current_scans = current_scans.filter(
-                                (obj) => obj.id !== scan.id
-                              );
-                              Toastify({
-                                text: "Scan deleted",
-                                duration: 500,
-                                backgroundColor:
-                                  "linear-gradient(to right, #00b09b, #96c93d)",
-                              }).showToast();
-                            }
-                          );
+                          active_deletes[scan.id] = true;
                         }}
                         tabindex="0"
                         class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                        >{$_("confirm-delete")}</button
+                        >{$_("delete")}</button
                       >
-                    </td>
-                  {:else}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                    >
-                      <a
-                        href="./{scan.id}"
-                        class="text-indigo-600 hover:text-indigo-900"
-                        >{$_("details")}</a
-                      >
-                      {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
-                        <button
-                          on:click={() => {
-                            active_deletes[scan.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                          >{$_("delete")}</button
-                        >
-                      {/if}
-                    </td>
-                  {/if}
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </Datatable>
+                    {/if}
+                  </td>
+                {/if}
+              </tr>
+            {/each}
+          </tbody>
+        </table>
       </div>
     {/if}
   {:catch error}
diff --git a/src/components/scanstations/ScanStationsOverview.svelte b/src/components/scanstations/ScanStationsOverview.svelte
index 72a64162..ad5be277 100644
--- a/src/components/scanstations/ScanStationsOverview.svelte
+++ b/src/components/scanstations/ScanStationsOverview.svelte
@@ -41,7 +41,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
diff --git a/src/components/statsclients/StatsClientsOverview.svelte b/src/components/statsclients/StatsClientsOverview.svelte
index 85a629d0..06419b5c 100644
--- a/src/components/statsclients/StatsClientsOverview.svelte
+++ b/src/components/statsclients/StatsClientsOverview.svelte
@@ -41,7 +41,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
diff --git a/src/components/teams/TeamsOverview.svelte b/src/components/teams/TeamsOverview.svelte
index 4f6e5b47..16c6ce4d 100644
--- a/src/components/teams/TeamsOverview.svelte
+++ b/src/components/teams/TeamsOverview.svelte
@@ -57,7 +57,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div class="h-12">
         <GenerateSponsoringContracts
           bind:sponsoring_contracts_show
diff --git a/src/components/tracks/Tracks.svelte b/src/components/tracks/Tracks.svelte
index 4dcabb1c..ec87e0ef 100644
--- a/src/components/tracks/Tracks.svelte
+++ b/src/components/tracks/Tracks.svelte
@@ -57,9 +57,9 @@
             .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
             .classList.add("hidden");
           //
-          elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
-          elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
-          elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
+          elem.childNodes[0].innerHTML = `<td data-column-id="trackName">${elem.childNodes[0].childNodes[0].value}</td>`;
+          elem.childNodes[1].innerHTML = `<td data-column-id="trackName">${elem.childNodes[1].childNodes[0].value}</td>`;
+          elem.childNodes[2].innerHTML = `<td data-column-id="trackName">${elem.childNodes[2].childNodes[0].value}</td>`;
         })
         .catch((err) => {});
     }
diff --git a/src/components/users/UsersOverview.svelte b/src/components/users/UsersOverview.svelte
index a187e9cc..46b5e7a7 100644
--- a/src/components/users/UsersOverview.svelte
+++ b/src/components/users/UsersOverview.svelte
@@ -36,7 +36,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <!-- {/if} -->
       <!-- <button
         on:click={() => {
diff --git a/src/main.js b/src/main.js
index 51f1c65b..26111a91 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,5 @@
 import './style.css';
 import "toastify-js/src/toastify.css";
-import "gridjs/dist/theme/mermaid.css";
 import App from './App.svelte';
 
 const app = new App({