🚀RELEASE v1.8.0

.gitea/workflows/dev.yaml

@@ -0,0 +1,34 @@
+name: Build Latest and dev images
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  build-container:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 19
+      - run: npm i -g pnpm@8 && pnpm i
+      - run: pnpm licenses:export
+      - name: Login to registry
+        uses: docker/login-action@v3
+        with:
+          registry: registry.odit.services
+          username: ${{ vars.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          tags: |
+            ${{ vars.REGISTRY }}/lfk/frontend:dev
+            ${{ vars.REGISTRY }}/lfk/frontend:latest
+          platforms: linux/amd64,linux/arm64

.gitea/workflows/release.yaml

@@ -0,0 +1,33 @@
+name: Build release images
+on:
+  push:
+    tags:
+      - "*.*.*"
+
+jobs:
+  build-container:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 19
+      - run: npm i -g pnpm@8 && pnpm i
+      - run: pnpm licenses:export
+      - name: Login to registry
+        uses: docker/login-action@v3
+        with:
+          registry: registry.odit.services
+          username: ${{ vars.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          tags: |
+            ${{ vars.REGISTRY }}/lfk/frontend:${{ github.ref_name }}
+          platforms: linux/amd64,linux/arm64

.woodpecker/build.yml

@@ -1,26 +0,0 @@
-steps:
-  - name: run full license export
-    image: registry.odit.services/hub/library/node:19.7.0-alpine3.16
-    commands:
-      - npm i -g pnpm@8
-      - pnpm i
-      - pnpm licenses:export
-  - name: build dev
-    image: woodpeckerci/plugin-docker-buildx
-    settings:
-      repo: registry.odit.services/lfk/frontend
-      tags:
-        - dev
-        - latest
-      registry: registry.odit.services
-      platforms: linux/amd64,linux/arm64
-      cache_from: registry.odit.services/lfk/frontend:dev
-      username:
-        from_secret: odit-registry-builder-username
-      password:
-        from_secret: odit-registry-builder-password
-when:
-  event:
-    - push
-  branch:
-    - dev

.woodpecker/release.yml

@@ -1,17 +0,0 @@
-steps:
-  - name: build tag
-    image: woodpeckerci/plugin-docker-buildx
-    settings:
-      repo: registry.odit.services/lfk/frontend
-      tags:
-        - "${CI_COMMIT_TAG}"
-      registry: registry.odit.services
-      platforms: linux/amd64,linux/arm64
-      cache_from: registry.odit.services/lfk/frontend:latest
-      username:
-        from_secret: odit-registry-builder-username
-      password:
-        from_secret: odit-registry-builder-password
-when:
-  event:
-    - tag

CHANGELOG.md

@@ -2,12 +2,37 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.8.0](https://git.odit.services/lfk/frontend/compare/1.7.0...1.8.0)
+
+- wip [`824ecfa`](https://git.odit.services/lfk/frontend/commit/824ecfab2e976cd7c6cd2851be8a9be5c6b686e1)
+- wip [`0a6cf61`](https://git.odit.services/lfk/frontend/commit/0a6cf619b09be837d5503f4695250c7edaeeaff5)
+- feat: improve fonts + button positions [`c37fb98`](https://git.odit.services/lfk/frontend/commit/c37fb98bed377744981e927ea8d22db9e20c55ca)
+- wip [`1bc5314`](https://git.odit.services/lfk/frontend/commit/1bc53146b9f024f3cab613b227d29304d687c92b)
+- wip [`e82350d`](https://git.odit.services/lfk/frontend/commit/e82350df4af082d2bbb322658c6c022d83b819ae)
+- wip [`37cdbba`](https://git.odit.services/lfk/frontend/commit/37cdbba0a3563875e19bee560f2cd5c8fc2d7a6e)
+- feat: improve input readability [`79e6a42`](https://git.odit.services/lfk/frontend/commit/79e6a4212d06029766d0a853686ed97879ebd349)
+- wip [`5f5d827`](https://git.odit.services/lfk/frontend/commit/5f5d8277b98363ef15a92621fca0a209345aca95)
+- chore(deps): bump [`bb2319a`](https://git.odit.services/lfk/frontend/commit/bb2319a78d253a2d6239a0d3daedc90fd29abdd0)
+- feat: cleanup TeamDetail + OrgDetail [`f734d1e`](https://git.odit.services/lfk/frontend/commit/f734d1e3f643a500a6432a389c3103045cc51262)
+- refactor(ci): Switch to actions for dev [`847fa28`](https://git.odit.services/lfk/frontend/commit/847fa288f1b5bbc422cc2944bbe66e80c5a00407)
+- refactor(ci): Add Gitea workflow for building release images and remove Woodpecker configuration [`3ec18a6`](https://git.odit.services/lfk/frontend/commit/3ec18a696435ada26bf2de2220b190dc630a9759)
+- feat: athiti font [`391186d`](https://git.odit.services/lfk/frontend/commit/391186d01f3b96638a3569dc2843bf181dc3f02c)
+- fix(DonorDetail): donor deletion [`5147a20`](https://git.odit.services/lfk/frontend/commit/5147a20b3c4a46968482b1e3517047351c94f77e)
+- feat(dashboard): full width for sidebar items [`975f145`](https://git.odit.services/lfk/frontend/commit/975f145444e5a478524ea2cbbfb9059b93617185)
+- wip [`3d3ce29`](https://git.odit.services/lfk/frontend/commit/3d3ce2918bc20cf1080a2b5153ddd8aaf51374b4)
+- feat(RunnerOrganizationService.runnerOrganizationControllerGetRunners): load all runners in org [`7c10d95`](https://git.odit.services/lfk/frontend/commit/7c10d95c1c68f4842fd323698e004a5ebf2c96cf)
+- wip [`050a146`](https://git.odit.services/lfk/frontend/commit/050a146ae070d67d8308db4b9612fd6eacbb9923)
+- fix(ci): Correct tag pattern syntax in release workflow [`e567bb3`](https://git.odit.services/lfk/frontend/commit/e567bb35c3b3f6eb73a2f0bc72f601e70f881ac8)
+
 #### [1.7.0](https://git.odit.services/lfk/frontend/compare/1.6.0...1.7.0)
 
+> 17 December 2024
+
 - refactor(pdfgeneration): Switch cards over to new service [`e230984`](https://git.odit.services/lfk/frontend/commit/e23098410c7d0b326cdbbb3a4b63fed10611e252)
 - refactor(pdfgeneration): Switch to new document-server api [`878d971`](https://git.odit.services/lfk/frontend/commit/878d9714cbc0a60cfd96bd1faf8af6af46e6fb5e)
 - refactor(pdfgeneration): Switched contract generation over to new document-server [`f99b7f4`](https://git.odit.services/lfk/frontend/commit/f99b7f4bb8f166bb966022ddd10689c082d248f0)
 - refactor(cards): Switched over to new document-server api [`65ce02e`](https://git.odit.services/lfk/frontend/commit/65ce02e777e6e9b3cfed248de680e5f292b3a639)
+- 🚀RELEASE v1.7.0 [`ae056cd`](https://git.odit.services/lfk/frontend/commit/ae056cd88cb27f003845fa4534553cde841c7f99)
 - fix(pdfgeneration): Added parent_group [`7f989b2`](https://git.odit.services/lfk/frontend/commit/7f989b206b16e2687d01a38da8e3ea9be0a52ba5)
 
 #### [1.6.0](https://git.odit.services/lfk/frontend/compare/1.5.3...1.6.0)

Dockerfile

@@ -1,4 +1,4 @@
-FROM registry.odit.services/hub/library/node:23.2.0-alpine3.20 AS build
+FROM registry.odit.services/hub/library/node:23.10.0-alpine3.21 AS build
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
 

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -13,7 +13,7 @@
 
   <body>
     <span style="display: none; visibility: hidden" id="buildinfo"
-      >RELEASE_INFO-1.7.0-RELEASE_INFO</span
+      >RELEASE_INFO-1.8.0-RELEASE_INFO</span
     >
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script src="/env.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odit/lfk-frontend",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "type": "module",
   "scripts": {
     "i18n-order": "node order.js",
@@ -15,10 +15,10 @@
     "@odit/license-exporter": "0.2.0",
     "@sveltejs/vite-plugin-svelte": "2.1.1",
     "auto-changelog": "2.5.0",
-    "autoprefixer": "10.4.20",
-    "postcss": "8.4.49",
-    "prettier": "3.3.3",
-    "prettier-plugin-svelte": "3.2.8",
+    "autoprefixer": "10.4.21",
+    "postcss": "8.5.3",
+    "prettier": "3.5.3",
+    "prettier-plugin-svelte": "3.3.3",
     "release-it": "17.10.0",
     "svelte-select": "3.17.0",
     "tailwindcss": "3.4.15",
@@ -42,6 +42,7 @@
     }
   },
   "dependencies": {
+    "@fontsource/athiti": "^5.2.5",
     "@odit/lfk-client-js": "1.1.3",
     "@paralleldrive/cuid2": "2.2.2",
     "@tanstack/svelte-table": "8.9.1",
@@ -54,7 +55,7 @@
     "svelte-french-toast": "1.2.0",
     "svelte-i18n": "3.6.0",
     "tinro": "0.6.12",
-    "validator": "13.12.0",
+    "validator": "13.15.0",
     "xlsx": "0.18.5"
   },
   "volta": {

public/env.sample.js

@@ -1,12 +1,12 @@
 const config = {
-	baseurl: "http://localhost:4010",
-	baseurl_selfservice: "http://localhost:5174",
-	baseurl_documentserver: "http://localhost:4010/documents",
-	documentserver_key:
-		"NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe",
-	// optional
-	default_username: "demo",
-	default_password: "demo",
-	prefersHashRouting: true,
+  baseurl: "http://localhost:4010",
+  baseurl_selfservice: "http://localhost:5174",
+  baseurl_documentserver: "http://localhost:4010/documents",
+  documentserver_key:
+    "NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe",
+  // optional
+  default_username: "demo",
+  default_password: "demo",
+  prefersHashRouting: true,
 };
 window.config = config;

src/components/cards/AddCardBulkModal.svelte

@@ -163,7 +163,7 @@
                       type="number"
                       step="1"
                       name="amount"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder="400"
                     />
                     <span

src/components/cards/AddCardModal.svelte

@@ -148,7 +148,7 @@
                     >{$_("runner")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}

src/components/cards/CardDetailModal.svelte

@@ -139,7 +139,7 @@
                     >{$_("runner")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}

src/components/cards/CardStatus.svelte

@@ -5,12 +5,12 @@
 
 {#if enabled}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current 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"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
     >{$_("disabled")}</span
   >
 {/if}

src/components/cards/Cards.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("cards")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}

src/components/contacts/AddContactModal.svelte

@@ -208,7 +208,7 @@
                     bind:this={firstname_input}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -231,7 +231,7 @@
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -250,7 +250,7 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -270,7 +270,7 @@
                     name="team"
                     multiple
                     bind:value={selected_team}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   >
                     {#each teams as team}
                       <option value={team.id}>
@@ -300,7 +300,7 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isPhoneValidOrEmpty}
                     <span
@@ -328,7 +328,7 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span
@@ -349,7 +349,7 @@
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700"
+                    <label for="comments" class="font-semibold text-gray-700"
                       >{$_("address")}</label
                     >
                   </div>
@@ -371,7 +371,7 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !isAddress1Valid}
                       <span
@@ -394,7 +394,7 @@
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                   </div>
                   <div class="col-span-6">
@@ -413,7 +413,7 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iszipcodevalid}
                       <span
@@ -439,7 +439,7 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span

src/components/contacts/ContactDetail.svelte

@@ -1,417 +1,399 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import {
-    GroupContactService,
-    RunnerTeamService,
-    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
-  import PromiseError from "../base/PromiseError.svelte";
-  import isEmail from "validator/es/lib/isEmail";
-  import toast from "svelte-french-toast";
-  let data_loaded = false;
-  let orgs = [];
-  let teams = [];
-  export let params;
-  $: delete_triggered = false;
-  $: original_data = {};
-  $: editable = {};
-  $: changes_performed = !(
-    JSON.stringify(original_data) === JSON.stringify(editable)
-  );
-  $: isEmailValid =
-    (editable.email || "") === "" ||
-    (editable.email && isEmail(editable.email || ""));
-  $: isFirstnameValid = editable.firstname !== "";
-  $: isLastnameValid = editable.lastname !== "";
-  $: save_enabled =
-    changes_performed &&
-    isFirstnameValid &&
-    isLastnameValid &&
-    isEmailValid &&
-    isPhoneValidOrEmpty &&
-    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
-      editable.address_checked === false);
-  const promise = GroupContactService.groupContactControllerGetOne(
-    params.contact
-  ).then((data) => {
-    data_loaded = true;
-    original_data = Object.assign(original_data, data);
-    editable = Object.assign(editable, original_data);
-    editable.groups = editable.groups.map((g) => g.id);
-    original_data.groups = original_data.groups.map((g) => g.id);
-    editable.address_checked = editable.address.address1 !== null;
-    original_data.address_checked = editable.address.address1 !== null;
-    if (editable.address_checked === false) {
-      editable.address = {
-        address1: "",
-        address2: "",
-        city: "",
-        postalcode: "",
-        country: "",
-      };
-    }
-  });
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
-  });
-  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = val;
-  });
-  $: isPhoneValidOrEmpty =
-    editable.phone?.includes("+") ||
-    editable.phone === "" ||
-    editable.phone === null;
-  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-  $: iscityvalid = editable.address?.city?.trim().length !== 0;
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast.loading($_("contact-is-being-updated"));
-      editable.address.country = "DE";
-      if (editable.address_checked === false) {
-        editable.address = null;
-      }
-      if (editable.email) editable.email = editable.email;
-      if (editable.phone) editable.phone = editable.phone;
-      if (editable.middlename) editable.middlename = editable.middlename;
-      GroupContactService.groupContactControllerPut(original_data.id, editable)
-        .then((resp) => {
-          Object.assign(original_data, editable);
-          original_data = original_data;
-          toast.dismiss();
-          toast.success($_("updated-contact"));
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  function deleteContact() {
-    GroupContactService.groupContactControllerRemove(original_data.id, true)
-      .then((resp) => {
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
+	import { _ } from "svelte-i18n";
+	import store from "../../store";
+	import {
+		GroupContactService,
+		RunnerTeamService,
+		RunnerOrganizationService,
+	} from "@odit/lfk-client-js";
+	import PromiseError from "../base/PromiseError.svelte";
+	import isEmail from "validator/es/lib/isEmail";
+	import toast from "svelte-french-toast";
+	let data_loaded = false;
+	let orgs = [];
+	let teams = [];
+	export let params;
+	$: delete_triggered = false;
+	$: original_data = {};
+	$: editable = {};
+	$: changes_performed = !(
+		JSON.stringify(original_data) === JSON.stringify(editable)
+	);
+	$: isEmailValid =
+		(editable.email || "") === "" ||
+		(editable.email && isEmail(editable.email || ""));
+	$: isFirstnameValid = editable.firstname !== "";
+	$: isLastnameValid = editable.lastname !== "";
+	$: save_enabled =
+		changes_performed &&
+		isFirstnameValid &&
+		isLastnameValid &&
+		isEmailValid &&
+		isPhoneValidOrEmpty &&
+		((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+			editable.address_checked === false);
+	const promise = GroupContactService.groupContactControllerGetOne(
+		params.contact
+	).then((data) => {
+		data_loaded = true;
+		original_data = Object.assign(original_data, data);
+		editable = Object.assign(editable, original_data);
+		editable.groups = editable.groups.map((g) => g.id);
+		original_data.groups = original_data.groups.map((g) => g.id);
+		editable.address_checked = editable.address.address1 !== null;
+		original_data.address_checked = editable.address.address1 !== null;
+		if (editable.address_checked === false) {
+			editable.address = {
+				address1: "",
+				address2: "",
+				city: "",
+				postalcode: "",
+				country: "",
+			};
+		}
+	});
+	RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+		orgs = val;
+	});
+	RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+		teams = val;
+	});
+	$: isPhoneValidOrEmpty =
+		editable.phone?.includes("+") ||
+		editable.phone === "" ||
+		editable.phone === null;
+	$: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+	$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+	$: iscityvalid = editable.address?.city?.trim().length !== 0;
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast.loading($_("contact-is-being-updated"));
+			editable.address.country = "DE";
+			if (editable.address_checked === false) {
+				editable.address = null;
+			}
+			if (editable.email) editable.email = editable.email;
+			if (editable.phone) editable.phone = editable.phone;
+			if (editable.middlename) editable.middlename = editable.middlename;
+			GroupContactService.groupContactControllerPut(original_data.id, editable)
+				.then((resp) => {
+					Object.assign(original_data, editable);
+					original_data = original_data;
+					toast.dismiss();
+					toast.success($_("updated-contact"));
+				})
+				.catch((err) => {});
+		} else {
+		}
+	}
+	function deleteContact() {
+		GroupContactService.groupContactControllerRemove(original_data.id, true)
+			.then((resp) => {
+				location.replace("./");
+			})
+			.catch((err) => {});
+	}
 </script>
 
 {#await promise}
-  {$_("loading-contact-details")}
+	{$_("loading-contact-details")}
 {:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_("contacts")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2"
-                >{original_data.firstname}
-                {original_data.middlename || ""}
-                {original_data.lastname}</span
-              >
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_data.firstname}
-      {original_data.middlename || ""}
-      {original_data.lastname}
-      <span data-id="contact_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteContact}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("confirm-deletion")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("delete-contact")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div class="text-sm w-full">
-      <label for="firstname" class="font-medium text-gray-700"
-        >{$_("first-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("first-name")}
-        type="text"
-        class:border-red-500={!isFirstnameValid}
-        class:focus:border-red-500={!isFirstnameValid}
-        class:focus:ring-red-500={!isFirstnameValid}
-        bind:value={editable.firstname}
-        name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isFirstnameValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("first-name-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label for="middlename" class="font-medium text-gray-700"
-        >{$_("middle-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("middle-name")}
-        type="text"
-        bind:value={editable.middlename}
-        name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="lastname" class="font-medium text-gray-700"
-        >{$_("last-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("last-name")}
-        type="text"
-        bind:value={editable.lastname}
-        class:border-red-500={!isLastnameValid}
-        class:focus:border-red-500={!isLastnameValid}
-        class:focus:ring-red-500={!isLastnameValid}
-        name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isLastnameValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("last-name-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label for="email" class="font-medium text-gray-700"
-        >{$_("e-mail-adress")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("e-mail-adress")}
-        type="email"
-        bind:value={editable.email}
-        class:border-red-500={!isEmailValid}
-        class:focus:border-red-500={!isEmailValid}
-        class:focus:ring-red-500={!isEmailValid}
-        name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isEmailValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("valid-email-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_("phone")}
-        type="tel"
-        class:border-red-500={!isPhoneValidOrEmpty}
-        class:focus:border-red-500={!isPhoneValidOrEmpty}
-        class:focus:ring-red-500={!isPhoneValidOrEmpty}
-        bind:value={editable.phone}
-        name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isPhoneValidOrEmpty}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("valid-international-phone-number-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_("groups")}</span>
-      <select
-        bind:value={editable.groups}
-        name="team"
-        multiple
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      >
-        {#each teams as team}
-          <option value={team.id}>
-            {team.parentGroup.name}
-            &gt;
-            {team.name}
-          </option>
-        {/each}
-        {#each orgs as org}
-          <option value={org.id}>{org.name}</option>
-        {/each}
-      </select>
-    </div>
-    <!--  -->
-    <div class="flex items-start mt-2">
-      <div class="flex items-center h-5">
-        <input
-          bind:checked={editable.address_checked}
-          id="comments"
-          name="comments"
-          type="checkbox"
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-        />
-      </div>
-      <div class="ml-3 text-sm">
-        <label for="comments" class="font-medium text-gray-700"
-          >{$_("address")}</label
-        >
-      </div>
-    </div>
-    {#if editable.address_checked === true}
-      <div class="col-span-6">
-        <label for="address1" class="block text-sm font-medium text-gray-700"
-          >{$_("address")}</label
-        >
-        <input
-          autocomplete="off"
-          placeholder="Address"
-          class:border-red-500={!isAddress1Valid}
-          class:focus:border-red-500={!isAddress1Valid}
-          class:focus:ring-red-500={!isAddress1Valid}
-          bind:value={editable.address.address1}
-          type="text"
-          name="address1"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        />
-        {#if !isAddress1Valid}
-          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          >
-            {$_("address-is-required")}
-          </span>
-        {/if}
-      </div>
-      <div class="col-span-6">
-        <label for="address2" class="block text-sm font-medium text-gray-700"
-          >{$_("apartment-suite-etc")}</label
-        >
-        <input
-          autocomplete="off"
-          placeholder={$_("apartment-suite-etc")}
-          bind:value={editable.address.address2}
-          type="text"
-          name="address2"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        />
-      </div>
-      <div class="col-span-6">
-        <label for="zipcode" class="block text-sm font-medium text-gray-700"
-          >{$_("zip-postal-code")}</label
-        >
-        <input
-          autocomplete="off"
-          placeholder={$_("zip-postal-code")}
-          class:border-red-500={!iszipcodevalid}
-          class:focus:border-red-500={!iszipcodevalid}
-          class:focus:ring-red-500={!iszipcodevalid}
-          bind:value={editable.address.postalcode}
-          type="text"
-          name="zipcode"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        />
-        {#if !iszipcodevalid}
-          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          >
-            {$_("valid-zipcode-postal-code-is-required")}
-          </span>
-        {/if}
-      </div>
-      <div class="col-span-6">
-        <label for="city" class="block text-sm font-medium text-gray-700"
-          >{$_("city")}</label
-        >
-        <input
-          autocomplete="off"
-          placeholder={$_("city")}
-          class:border-red-500={!iscityvalid}
-          class:focus:border-red-500={!iscityvalid}
-          class:focus:ring-red-500={!iscityvalid}
-          bind:value={editable.address.city}
-          type="text"
-          name="city"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        />
-        {#if !iscityvalid}
-          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          >
-            {$_("valid-city-is-required")}
-          </span>
-        {/if}
-      </div>
-    {/if}
-  </section>
+	<section class="container p-5 select-none">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("contacts")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{original_data.firstname}
+			{original_data.middlename || ""}
+			{original_data.lastname}
+			<div data-id="contact_actions_${editable.id}">
+				{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteContact}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-deletion")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-contact")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						on:click={submit}
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</div>
+		</div>
+		<!--  -->
+		<div class="text-sm w-full mt-2">
+			<label for="firstname" class="font-semibold text-gray-700"
+				>{$_("first-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("first-name")}
+				type="text"
+				class:border-red-500={!isFirstnameValid}
+				class:focus:border-red-500={!isFirstnameValid}
+				class:focus:ring-red-500={!isFirstnameValid}
+				bind:value={editable.firstname}
+				name="firstname"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isFirstnameValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("first-name-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="middlename" class="font-semibold text-gray-700"
+				>{$_("middle-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("middle-name")}
+				type="text"
+				bind:value={editable.middlename}
+				name="middlename"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="lastname" class="font-semibold text-gray-700"
+				>{$_("last-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("last-name")}
+				type="text"
+				bind:value={editable.lastname}
+				class:border-red-500={!isLastnameValid}
+				class:focus:border-red-500={!isLastnameValid}
+				class:focus:ring-red-500={!isLastnameValid}
+				name="lastname"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isLastnameValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("last-name-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="email" class="font-semibold text-gray-700"
+				>{$_("e-mail-adress")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("e-mail-adress")}
+				type="email"
+				bind:value={editable.email}
+				class:border-red-500={!isEmailValid}
+				class:focus:border-red-500={!isEmailValid}
+				class:focus:ring-red-500={!isEmailValid}
+				name="email"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isEmailValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("valid-email-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
+			<input
+				autocomplete="off"
+				placeholder={$_("phone")}
+				type="tel"
+				class:border-red-500={!isPhoneValidOrEmpty}
+				class:focus:border-red-500={!isPhoneValidOrEmpty}
+				class:focus:ring-red-500={!isPhoneValidOrEmpty}
+				bind:value={editable.phone}
+				name="phone"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isPhoneValidOrEmpty}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("valid-international-phone-number-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_("groups")}</span>
+			<select
+				bind:value={editable.groups}
+				name="team"
+				multiple
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			>
+				{#each teams as team}
+					<option value={team.id}>
+						{team.parentGroup.name}
+						&gt;
+						{team.name}
+					</option>
+				{/each}
+				{#each orgs as org}
+					<option value={org.id}>{org.name}</option>
+				{/each}
+			</select>
+		</div>
+		<!--  -->
+		<div class="flex items-start mt-2">
+			<div class="flex items-center h-5">
+				<input
+					bind:checked={editable.address_checked}
+					id="comments"
+					name="comments"
+					type="checkbox"
+					class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+				/>
+			</div>
+			<div class="ml-3 text-sm">
+				<label for="comments" class="font-semibold text-gray-700"
+					>{$_("address")}</label
+				>
+			</div>
+		</div>
+		{#if editable.address_checked === true}
+			<div class="col-span-6">
+				<label for="address1" class="block text-sm font-medium text-gray-700"
+					>{$_("address")}</label
+				>
+				<input
+					autocomplete="off"
+					placeholder="Address"
+					class:border-red-500={!isAddress1Valid}
+					class:focus:border-red-500={!isAddress1Valid}
+					class:focus:ring-red-500={!isAddress1Valid}
+					bind:value={editable.address.address1}
+					type="text"
+					name="address1"
+					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+				{#if !isAddress1Valid}
+					<span
+						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+					>
+						{$_("address-is-required")}
+					</span>
+				{/if}
+			</div>
+			<div class="col-span-6">
+				<label for="address2" class="block text-sm font-medium text-gray-700"
+					>{$_("apartment-suite-etc")}</label
+				>
+				<input
+					autocomplete="off"
+					placeholder={$_("apartment-suite-etc")}
+					bind:value={editable.address.address2}
+					type="text"
+					name="address2"
+					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+			</div>
+			<div class="col-span-6">
+				<label for="zipcode" class="block text-sm font-medium text-gray-700"
+					>{$_("zip-postal-code")}</label
+				>
+				<input
+					autocomplete="off"
+					placeholder={$_("zip-postal-code")}
+					class:border-red-500={!iszipcodevalid}
+					class:focus:border-red-500={!iszipcodevalid}
+					class:focus:ring-red-500={!iszipcodevalid}
+					bind:value={editable.address.postalcode}
+					type="text"
+					name="zipcode"
+					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+				{#if !iszipcodevalid}
+					<span
+						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+					>
+						{$_("valid-zipcode-postal-code-is-required")}
+					</span>
+				{/if}
+			</div>
+			<div class="col-span-6">
+				<label for="city" class="block text-sm font-medium text-gray-700"
+					>{$_("city")}</label
+				>
+				<input
+					autocomplete="off"
+					placeholder={$_("city")}
+					class:border-red-500={!iscityvalid}
+					class:focus:border-red-500={!iscityvalid}
+					class:focus:ring-red-500={!iscityvalid}
+					bind:value={editable.address.city}
+					type="text"
+					name="city"
+					class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+				{#if !iscityvalid}
+					<span
+						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+					>
+						{$_("valid-city-is-required")}
+					</span>
+				{/if}
+			</div>
+		{/if}
+	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}

src/components/contacts/Contacts.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("contacts")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}

src/components/contacts/ContactsOverview.svelte

@@ -1,198 +1,198 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import { GroupContactService } from "@odit/lfk-client-js";
-  const promise = GroupContactService.groupContactControllerGetAll().then(
-    (result) => {
-      current_contacts = result;
-    }
-  );
-  import store from "../../store";
-  import ContactsEmptyState from "./ContactsEmptyState.svelte";
-  import toast from "svelte-french-toast";
-  $: searchvalue = "";
-  $: active_deletes = [];
-  export let current_contacts = [];
+	import { _ } from "svelte-i18n";
+	import { GroupContactService } from "@odit/lfk-client-js";
+	const promise = GroupContactService.groupContactControllerGetAll().then(
+		(result) => {
+			current_contacts = result;
+		}
+	);
+	import store from "../../store";
+	import ContactsEmptyState from "./ContactsEmptyState.svelte";
+	import toast from "svelte-french-toast";
+	$: searchvalue = "";
+	$: active_deletes = [];
+	export let current_contacts = [];
 </script>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
-  {#await promise}
-    <div
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert"
-    >
-      <p class="font-bold">{$_("contacts-are-being-loaded")}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    </div>
-  {:then}
-    {#if current_contacts.length === 0}
-      <ContactsEmptyState />
-    {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_("datatable.search")}
-        aria-label={$_("datatable.search")}
-        class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
-      />
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-      >
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
-            <tr class="odd:bg-white even:bg-gray-100">
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("name")}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("groups")}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("address")}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_("action")}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each current_contacts as t}
-              {#if Object.values(t)
-                .toString()
-                .toLowerCase()
-                .includes(searchvalue)}
-                <tr
-                  class="odd:bg-white even:bg-gray-100"
-                  data-rowid="team_{t.id}"
-                >
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {t.firstname}
-                          {t.middlename || ""}
-                          {t.lastname}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {#if t.groups.length > 0}
-                            {#each t.groups as g}
-                              {#if g.responseType === "RUNNERORGANIZATION"}
-                                <a
-                                  href="../orgs/{g.id}"
-                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                                  >{g.name}</a
-                                >
-                              {:else}
-                                <a
-                                  href="../teams/{g.id}"
-                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                                  >{g.parentGroup.name}
-                                  &gt;
-                                  {g.name}</a
-                                >
-                              {/if}
-                            {/each}
-                          {:else}
-                            {$_("contact-is-not-a-member-in-any-group")}
-                          {/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {#if t.address.address1 !== null}
-                            {t.address.address1}<br />
-                            {t.address.address2 || ""}<br />
-                            {t.address.postalcode}
-                            {t.address.city}
-                            {t.address.country}
-                          {/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  {#if active_deletes[t.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                    >
-                      <button
-                        on:click={() => {
-                          active_deletes[t.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                        >{$_("cancel-delete")}</button
-                      >
-                      <button
-                        on:click={() => {
-                          toast.loading($_("deleting-contact"));
-                          GroupContactService.groupContactControllerRemove(
-                            t.id,
-                            false
-                          ).then((resp) => {
-                            current_contacts = current_contacts.filter(
-                              (obj) => obj.id !== t.id
-                            );
-                            toast.dismiss();
-                            toast($_("contact-deleted"));
-                          });
-                        }}
-                        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="./{t.id}"
-                        class="text-indigo-600 hover:text-indigo-900"
-                        >{$_("details")}</a
-                      >
-                      {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
-                        <button
-                          on:click={() => {
-                            active_deletes[t.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                          >{$_("delete")}</button
-                        >
-                      {/if}
-                    </td>
-                  {/if}
-                </tr>
-              {/if}
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  {:catch error}
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-      <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_("general_promise_error")}</b>
-        {error}
-      </span>
-    </div>
-  {/await}
+	{#await promise}
+		<div
+			class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+			role="alert"
+		>
+			<p class="font-bold">{$_("contacts-are-being-loaded")}</p>
+			<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+		</div>
+	{:then}
+		{#if current_contacts.length === 0}
+			<ContactsEmptyState />
+		{:else}
+			<input
+				type="search"
+				bind:value={searchvalue}
+				placeholder={$_("datatable.search")}
+				aria-label={$_("datatable.search")}
+				class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
+			/>
+			<div
+				class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+			>
+				<table class="divide-y divide-gray-200 w-full">
+					<thead class="bg-gray-50">
+						<tr class="odd:bg-white even:bg-gray-100">
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								{$_("name")}
+							</th>
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								{$_("groups")}
+							</th>
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								{$_("address")}
+							</th>
+							<th scope="col" class="relative px-6 py-3">
+								<span class="sr-only">{$_("action")}</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-gray-200">
+						{#each current_contacts as t}
+							{#if Object.values(t)
+								.toString()
+								.toLowerCase()
+								.includes(searchvalue)}
+								<tr
+									class="odd:bg-white even:bg-gray-100"
+									data-rowid="team_{t.id}"
+								>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="flex items-center">
+											<div class="ml-4">
+												<div class="text-sm font-medium text-gray-900">
+													{t.firstname}
+													{t.middlename || ""}
+													{t.lastname}
+												</div>
+											</div>
+										</div>
+									</td>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="flex items-center">
+											<div
+												class="text-sm font-medium text-gray-900 gap-0.5 flex flex-wrap"
+											>
+												{#if t.groups.length > 0}
+													{#each t.groups as g}
+														{#if g.responseType === "RUNNERORGANIZATION"}
+															<a
+																href="../orgs/{g.id}"
+																class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+																>{g.name}</a
+															>
+														{:else}
+															<a
+																href="../teams/{g.id}"
+																class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+																>{g.parentGroup.name}
+																&gt;
+																{g.name}</a
+															>
+														{/if}
+													{/each}
+												{:else}
+													{$_("contact-is-not-a-member-in-any-group")}
+												{/if}
+											</div>
+										</div>
+									</td>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="flex items-center">
+											<div class="ml-4">
+												<div class="text-sm font-medium text-gray-900">
+													{#if t.address.address1 !== null}
+														{t.address.address1}<br />
+														{t.address.address2 || ""}<br />
+														{t.address.postalcode}
+														{t.address.city}
+														{t.address.country}
+													{/if}
+												</div>
+											</div>
+										</div>
+									</td>
+									{#if active_deletes[t.id] === true}
+										<td
+											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+										>
+											<button
+												on:click={() => {
+													active_deletes[t.id] = false;
+												}}
+												tabindex="0"
+												class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+												>{$_("cancel-delete")}</button
+											>
+											<button
+												on:click={() => {
+													toast.loading($_("deleting-contact"));
+													GroupContactService.groupContactControllerRemove(
+														t.id,
+														false
+													).then((resp) => {
+														current_contacts = current_contacts.filter(
+															(obj) => obj.id !== t.id
+														);
+														toast.dismiss();
+														toast($_("contact-deleted"));
+													});
+												}}
+												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="./{t.id}"
+												class="text-indigo-600 hover:text-indigo-900"
+												>{$_("details")}</a
+											>
+											{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
+												<button
+													on:click={() => {
+														active_deletes[t.id] = true;
+													}}
+													tabindex="0"
+													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+													>{$_("delete")}</button
+												>
+											{/if}
+										</td>
+									{/if}
+								</tr>
+							{/if}
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	{:catch error}
+		<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+			<span class="inline-block align-middle mr-8">
+				<b class="capitalize">{$_("general_promise_error")}</b>
+				{error}
+			</span>
+		</div>
+	{/await}
 {/if}

src/components/dashboard/Dashboard.svelte

@@ -1,428 +1,438 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import localForage from "localforage";
-  import store from "../../store";
-  import { router } from "tinro";
-  import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
-  import { AuthService } from "@odit/lfk-client-js";
-  import { Toaster } from "svelte-french-toast";
-  $: navOpen = false;
-  function logout() {
-    localForage.clear();
-    location.replace("/");
-  }
+	import { _ } from "svelte-i18n";
+	import localForage from "localforage";
+	import store from "../../store";
+	import { router } from "tinro";
+	import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
+	import { AuthService } from "@odit/lfk-client-js";
+	import { Toaster } from "svelte-french-toast";
+	$: navOpen = false;
+	function logout() {
+		localForage.clear();
+		location.replace("/");
+	}
 </script>
 
 <section class="min-h-screen bg-gray-50">
-  <div
-    class:collapsed_navigation={!navOpen}
-    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50"
-  >
-    <a href="/" class="flex items-center px-4 py-5">
-      <img src="/lfk-logo.png" alt="Logo" class="h-10" />
-      <h3 class="text-lg font-bold">LfK!Admin</h3>
-    </a>
-    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
-      <a
-        class:activenav={$router.path === "/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-        href="/"
-      >
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-        >
-          <path
-            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
-          />
-        </svg>
-        <span>{$_("dashboard-title")}</span>
-      </a>
-      {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
-        <a
-          class:activenav={$router.path === "/runners/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/runners/"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
-            /></svg
-          >
-          <span>{$_("runners")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
-        <a
-          class:activenav={$router.path === "/teams/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/teams/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"
-            ><path
-              fill="currentColor"
-              d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-            /></svg
-          >
-          <span>{$_("teams")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
-        <a
-          class:activenav={$router.path.includes("/orgs/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/orgs/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z"
-            /></svg
-          >
-          <span>{$_("orgs")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
-        <a
-          class:activenav={$router.path.includes("/donors/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/donors/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
-            /></svg
-          >
-          <span>{$_("donors")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
-        <a
-          class:activenav={$router.path.includes("/donations/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/donations/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
-            /></svg
-          >
-          <span>{$_("donations")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
-        <a
-          class:activenav={$router.path === "/tracks/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/tracks/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"
-            ><path
-              fill="currentColor"
-              d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z"
-            /></svg
-          >
-          <span>{$_("tracks")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
-        <a
-          class:activenav={$router.path === "/cards/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/cards/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-          >
-            <path fill="none" d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
-            /></svg
-          >
-          <span>{$_("cards")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
-        <a
-          class:activenav={$router.path === "/scans/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/scans/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
-            /></svg
-          >
-          <span>Scans</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
-        <a
-          class:activenav={$router.path === "/contacts/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/contacts/"
-        >
-          <svg
-            fill="currentColor"
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
-            /></svg
-          >
-          <span>{$_("contacts")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
-        <a
-          class:activenav={$router.path === "/scanstations/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/scanstations/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
-            /></svg
-          >
-          <span>{$_("scanstations")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
-        <a
-          class:activenav={$router.path === "/statsclients/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/statsclients/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
-            /></svg
-          >
-          <span>{$_("statsclients")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
-        <a
-          class:activenav={$router.path === "/users/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/users/"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            ><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z"
-            /></svg
-          >
-          <span>{$_("users")}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
-        <a
-          class:activenav={$router.path === "/groups/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-          href="/groups/"
-        >
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"
-            ><path
-              fill="currentColor"
-              d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-            /></svg
-          >
-          <span>{$_("user-groups")}</span>
-        </a>
-      {/if}
-      <a
-        class:activenav={$router.path === "/settings/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-        href="/settings/"
-      >
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
-            clip-rule="evenodd"
-          />
-        </svg>
-        <span>{$_("settings")}</span>
-      </a>
-      <a
-        class:activenav={$router.path === "/about/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-        href="/about/"
-      >
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          viewBox="0 0 24 24"
-          ><circle cx="12" cy="12" r="10" />
-          <path d="M12 16v-4M12 8h.01" /></svg
-        >
-        <span>{$_("about")}</span>
-      </a>
-      <button
-        tabindex="0"
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
-        on:click={() => {
-          AuthService.authControllerLogout();
-          logout();
-        }}
-      >
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
-          fill="currentColor"
-          width="24"
-          height="24"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z"
-          /></svg
-        >
-        <span>{$_("logout")}</span>
-      </button>
-    </nav>
-  </div>
-  <div class="ml-0 transition md:ml-60">
-    <header
-      class="flex items-center w-full px-4 bg-white border-b h-14 md:hidden"
-    >
-      <button
-        on:click={() => {
-          navOpen = true;
-        }}
-        class="block btn btn-light md:hidden"
-      >
-        <span class="sr-only">Menu</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-        </svg>
-        </button
-      >
-      <span class="inline-block">
-        <img src="/lfk-logo.png" alt="Logo" class="h-8 inline-block" />
-        <span class="text-lg font-bold">LfK!Admin</span>
-      </span>
-    </header>
-    <Toaster position="top-right" />
-    <slot>
-      <NoComponentLoaded />
-    </slot>
-  </div>
-  {#if navOpen === true}
-    <button
-      on:click={() => {
-        navOpen = false;
-      }}
-      class:hidden={!navOpen}
-      class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden"
-    />
-  {/if}
+	<div
+		class:collapsed_navigation={!navOpen}
+		class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50"
+	>
+		<a href="/" class="flex items-center px-4 py-5">
+			<img src="/lfk-logo.png" alt="Logo" class="h-10" />
+			<h3 class="text-lg font-bold">LfK!Admin</h3>
+		</a>
+		<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
+			<a
+				class:activenav={$router.path === "/"}
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+				href="/"
+			>
+				<svg
+					class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+					/>
+				</svg>
+				<span>{$_("dashboard-title")}</span>
+			</a>
+			{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
+				<a
+					class:activenav={$router.path === "/runners/"}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/runners/"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						width="24"
+						height="24"
+						><path fill="none" d="M0 0h24v24H0z" />
+						<path
+							d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+						/></svg
+					>
+					<span>{$_("runners")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
+				<a
+					class:activenav={$router.path === "/teams/"}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/teams/"
+				>
+					<svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						width="24"
+						height="24"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 640 512"
+						><path
+							fill="currentColor"
+							d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+						/></svg
+					>
+					<span>{$_("teams")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
+				<a
+					class:activenav={$router.path.includes("/orgs/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/orgs/"
+				>
+					<svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						width="24"
+						height="24"
+						><path fill="none" d="M0 0h24v24H0z" />
+						<path
+							d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z"
+						/></svg
+					>
+					<span>{$_("orgs")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
+				<a
+					class:activenav={$router.path.includes("/donors/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/donors/"
+				>
+					<svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						width="24"
+						height="24"
+						><path fill="none" d="M0 0h24v24H0z" />
+						<path
+							d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
+						/></svg
+					>
+					<span>{$_("donors")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
+				<a
+					class:activenav={$router.path.includes("/donations/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/donations/"
+				>
+					<svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						width="24"
+						height="24"
+						><path fill="none" d="M0 0h24v24H0z" />
+						<path
+							d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+						/></svg
+					>
+					<span>{$_("donations")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
+				<a
+					class:activenav={$router.path === "/tracks/"}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/tracks/"
+				>
+					<svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						width="24"
+						height="24"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 640 512"
+						><path
+							fill="currentColor"
+							d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z"
+						/></svg
+					>
+					<span>{$_("tracks")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
+				<a
+					class:activenav={$router.path === "/cards/"}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/cards/"
+				>
+					<svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						width="24"
+						height="24"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+					>
+						<path fill="none" d="M0 0h24v24H0z" />
+						<path
+							fill="currentColor"
+							d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
+						/></svg
+					>
+					<span>{$_("cards")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
+				<a
+					class:activenav={$router.path.includes("/scans/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/scans/"
+				>
+					<svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						width="24"
+						height="24"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						><path fill="none" d="M0 0h24v24H0z" />
+						<path
+							fill="currentColor"
+							d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+						/></svg
+					>
+					<span>Scans</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
+				<a
+					class:activenav={$router.path.includes("/contacts/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/contacts/"
+				>
+					<svg
+						fill="currentColor"
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						width="24"
+						height="24"
+						><path fill="none" d="M0 0h24v24H0z" />
+						<path
+							d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
+						/></svg
+					>
+					<span>{$_("contacts")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
+				<a
+					class:activenav={$router.path.includes("/scanstations/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/scanstations/"
+				>
+					<svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path fill="none" d="M0 0h24v24H0z" />
+						<path
+							fill="currentColor"
+							d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
+						/></svg
+					>
+					<span>{$_("scanstations")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
+				<a
+					class:activenav={$router.path.includes("/statsclients/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/statsclients/"
+				>
+					<svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path fill="none" d="M0 0h24v24H0z" />
+						<path
+							fill="currentColor"
+							d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
+						/></svg
+					>
+					<span>{$_("statsclients")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
+				<a
+					class:activenav={$router.path.includes("/users/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/users/"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						viewBox="0 0 24 24"
+						><path fill="none" d="M0 0h24v24H0z" />
+						<path
+							d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z"
+						/></svg
+					>
+					<span>{$_("users")}</span>
+				</a>
+			{/if}
+			{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
+				<a
+					class:activenav={$router.path.includes("/groups/")}
+					class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+					href="/groups/"
+				>
+					<svg
+						class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+						fill="currentColor"
+						width="24"
+						height="24"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 640 512"
+						><path
+							fill="currentColor"
+							d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+						/></svg
+					>
+					<span>{$_("user-groups")}</span>
+				</a>
+			{/if}
+			<a
+				class:activenav={$router.path === "/settings/"}
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+				href="/settings/"
+			>
+				<svg
+					class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+				<span>{$_("settings")}</span>
+			</a>
+			<a
+				class:activenav={$router.path === "/about/"}
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+				href="/about/"
+			>
+				<svg
+					class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					viewBox="0 0 24 24"
+					><circle cx="12" cy="12" r="10" />
+					<path d="M12 16v-4M12 8h.01" /></svg
+				>
+				<span>{$_("about")}</span>
+			</a>
+			<button
+				tabindex="0"
+				class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+				on:click={() => {
+					AuthService.authControllerLogout();
+					logout();
+				}}
+			>
+				<svg
+					class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+					fill="currentColor"
+					width="24"
+					height="24"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					><path fill="none" d="M0 0h24v24H0z" />
+					<path
+						d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z"
+					/></svg
+				>
+				<span>{$_("logout")}</span>
+			</button>
+		</nav>
+	</div>
+	<div class="ml-0 transition md:ml-60">
+		<header
+			class="flex items-center w-full px-4 bg-white border-b h-14 md:hidden"
+		>
+			<button
+				on:click={() => {
+					navOpen = true;
+				}}
+				class="block btn btn-light md:hidden"
+			>
+				<span class="sr-only">Menu</span><svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="size-6"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+					/>
+				</svg>
+			</button>
+			<span class="inline-block">
+				<img src="/lfk-logo.png" alt="Logo" class="h-8 inline-block" />
+				<span class="text-lg font-bold">LfK!Admin</span>
+			</span>
+		</header>
+		<Toaster position="top-right" />
+		<slot>
+			<NoComponentLoaded />
+		</slot>
+	</div>
+	{#if navOpen === true}
+		<button
+			on:click={() => {
+				navOpen = false;
+			}}
+			class:hidden={!navOpen}
+			class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden"
+		/>
+	{/if}
 </section>
 
 <style>
-  .collapsed_navigation {
-    transform: translateX(-100%);
-  }
-  @media (min-width: 768px) {
-    .collapsed_navigation {
-      transform: translateX(0px);
-    }
-  }
+	.collapsed_navigation {
+		transform: translateX(-100%);
+	}
+	@media (min-width: 768px) {
+		.collapsed_navigation {
+			transform: translateX(0px);
+		}
+	}
 </style>

src/components/dashboard/MainDashContent.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div class="p-2 md:p-5 overflow-x-hidden">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("dashboard-greeting")} <span class="text-blue-500"
       >{store.state.jwtinfo.userdetails.firstname}
       {store.state.jwtinfo.userdetails.lastname}</span

src/components/donations/AddDonationModal.svelte

@@ -192,7 +192,7 @@
                     >{$_("donor")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterDonors(label, filterText, option)}
                     items={donors}
@@ -212,7 +212,7 @@
                       >{$_("runner")}</label
                     >
                     <Select
-                      containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                       itemFilter={(label, filterText, option) =>
                         filterDonors(label, filterText, option)}
                       items={runners}
@@ -244,7 +244,7 @@
                       type="number"
                       step="0.01"
                       name="donation_amount_eur"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder="2.00"
                     />
                     <span

src/components/donations/DonationDetail.svelte

@@ -1,365 +1,352 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import {
-    DonationService,
-    DonorService,
-    RunnerService,
-  } from "@odit/lfk-client-js";
-  import toast from 'svelte-french-toast'
+	import { _ } from "svelte-i18n";
+	import store from "../../store";
+	import {
+		DonationService,
+		DonorService,
+		RunnerService,
+	} from "@odit/lfk-client-js";
+	import toast from "svelte-french-toast";
 
-  import PromiseError from "../base/PromiseError.svelte";
-  import Select from "svelte-select";
-  let data_loaded = false;
-  export let params;
-  $: delete_triggered = false;
-  $: original_data = {};
-  $: editable = {};
-  $: donor = {};
-  $: runner = {};
-  $: current_donors = [];
-  $: current_runners = [];
-  $: amount_input = 0;
-  $: is_amount_valid = amount_input > 0;
-  $: paid_amount_input = 0;
-  $: is_paid_amount_valid = paid_amount_input > 0;
-  $: is_everything_set =
-    editable.donor != null &&
-    ((original_data.responseType == "DISTANCEDONATION" &&
-      editable?.runner != null) ||
-      original_data.responseType !== "DISTANCEDONATION");
-  $: changes_performed =
-    !(JSON.stringify(original_data) === JSON.stringify(editable)) ||
-    (original_data.responseType == "DISTANCEDONATION" &&
-      !(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
-    (original_data.responseType !== "DISTANCEDONATION" &&
-      !(Math.floor(amount_input * 100) === original_data.amount)) ||
-    !(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
-  $: save_enabled = changes_performed && is_amount_valid && is_everything_set;
+	import PromiseError from "../base/PromiseError.svelte";
+	import Select from "svelte-select";
+	let data_loaded = false;
+	export let params;
+	$: delete_triggered = false;
+	$: original_data = {};
+	$: editable = {};
+	$: donor = {};
+	$: runner = {};
+	$: current_donors = [];
+	$: current_runners = [];
+	$: amount_input = 0;
+	$: is_amount_valid = amount_input > 0;
+	$: paid_amount_input = 0;
+	$: is_paid_amount_valid = paid_amount_input > 0;
+	$: is_everything_set =
+		editable.donor != null &&
+		((original_data.responseType == "DISTANCEDONATION" &&
+			editable?.runner != null) ||
+			original_data.responseType !== "DISTANCEDONATION");
+	$: changes_performed =
+		!(JSON.stringify(original_data) === JSON.stringify(editable)) ||
+		(original_data.responseType == "DISTANCEDONATION" &&
+			!(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
+		(original_data.responseType !== "DISTANCEDONATION" &&
+			!(Math.floor(amount_input * 100) === original_data.amount)) ||
+		!(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
+	$: save_enabled = changes_performed && is_amount_valid && is_everything_set;
 
-  const promise = DonationService.donationControllerGetOne(
-    params.donationid
-  ).then((data) => {
-    data_loaded = true;
-    original_data = Object.assign({}, data);
-    editable = Object.assign({}, original_data);
-    paid_amount_input = data.paidAmount / 100;
-    if (data.responseType == "DISTANCEDONATION") {
-      amount_input = data.amountPerDistance / 100;
-      RunnerService.runnerControllerGetAll().then((val) => {
-        current_runners = val.map((r) => {
-          return { label: getDonorLabel(r), value: r };
-        });
-        runner = current_runners.find((g) => g.value.id == editable.runner.id);
-      });
-    } else {
-      amount_input = data.amount / 100;
-    }
-    DonorService.donorControllerGetAll().then((val) => {
-      current_donors = val.map((r) => {
-        return { label: getDonorLabel(r), value: r };
-      });
-      donor = current_donors.find((g) => g.value.id == editable.donor.id);
-    });
-  });
-  const getDonorLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const filterDonors = (label, filterText, option) =>
-    label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.value.id.toString().startsWith(filterText.toLowerCase());
+	const promise = DonationService.donationControllerGetOne(
+		params.donationid
+	).then((data) => {
+		data_loaded = true;
+		original_data = Object.assign({}, data);
+		editable = Object.assign({}, original_data);
+		paid_amount_input = data.paidAmount / 100;
+		if (data.responseType == "DISTANCEDONATION") {
+			amount_input = data.amountPerDistance / 100;
+			RunnerService.runnerControllerGetAll().then((val) => {
+				current_runners = val.map((r) => {
+					return { label: getDonorLabel(r), value: r };
+				});
+				runner = current_runners.find((g) => g.value.id == editable.runner.id);
+			});
+		} else {
+			amount_input = data.amount / 100;
+		}
+		DonorService.donorControllerGetAll().then((val) => {
+			current_donors = val.map((r) => {
+				return { label: getDonorLabel(r), value: r };
+			});
+			donor = current_donors.find((g) => g.value.id == editable.donor.id);
+		});
+	});
+	const getDonorLabel = (option) =>
+		option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+	const filterDonors = (label, filterText, option) =>
+		label.toLowerCase().includes(filterText.toLowerCase()) ||
+		option.value.id.toString().startsWith(filterText.toLowerCase());
 
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast($_("updating-donation"));
-      let postdata = {};
-      editable.paidAmount = paid_amount_input * 100;
-      if (original_data.responseType === "DISTANCEDONATION") {
-        editable.amountPerDistance = Math.floor(amount_input * 100);
-        postdata = Object.assign(postdata, editable);
-        postdata.runner = postdata.runner.id;
-        postdata.donor = postdata.donor.id;
-        DonationService.donationControllerPutDistance(
-          original_data.id,
-          postdata
-        )
-          .then((resp) => {
-            Object.assign(original_data, editable);
-            original_data = original_data;
-            toast.success($_("donation-updated"));
-          })
-          .catch((err) => {});
-      } else {
-        editable.amount = Math.floor(amount_input * 100);
-        postdata = Object.assign(postdata, editable);
-        postdata.donor = postdata.donor.id;
-        DonationService.donationControllerPutFixed(original_data.id, postdata)
-          .then((resp) => {
-            Object.assign(original_data, editable);
-            original_data = original_data;
-            toast.success($_("donation-updated"));
-          })
-          .catch((err) => {});
-      }
-    } else {
-    }
-  }
-  function deleteDonation() {
-    DonationService.donationControllerRemove(original_data.id, false)
-      .then((resp) => {
-        toast($_("donation-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_donor = original_data;
-      });
-  }
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast($_("updating-donation"));
+			let postdata = {};
+			editable.paidAmount = paid_amount_input * 100;
+			if (original_data.responseType === "DISTANCEDONATION") {
+				editable.amountPerDistance = Math.floor(amount_input * 100);
+				postdata = Object.assign(postdata, editable);
+				postdata.runner = postdata.runner.id;
+				postdata.donor = postdata.donor.id;
+				DonationService.donationControllerPutDistance(
+					original_data.id,
+					postdata
+				)
+					.then((resp) => {
+						Object.assign(original_data, editable);
+						original_data = original_data;
+						toast.success($_("donation-updated"));
+					})
+					.catch((err) => {});
+			} else {
+				editable.amount = Math.floor(amount_input * 100);
+				postdata = Object.assign(postdata, editable);
+				postdata.donor = postdata.donor.id;
+				DonationService.donationControllerPutFixed(original_data.id, postdata)
+					.then((resp) => {
+						Object.assign(original_data, editable);
+						original_data = original_data;
+						toast.success($_("donation-updated"));
+					})
+					.catch((err) => {});
+			}
+		} else {
+		}
+	}
+	function deleteDonation() {
+		DonationService.donationControllerRemove(original_data.id, false)
+			.then((resp) => {
+				toast($_("donation-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {
+				modal_open = true;
+				delete_donor = original_data;
+			});
+	}
 </script>
 
 {#await promise}
-  {$_("loading-donation-details")}
+	{$_("loading-donation-details")}
 {:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_("donations")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">{original_data.id}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_data.donor.firstname}
-      {original_data.donor.middlename || ""}
-      {original_data.donor.lastname}
-      &gt;
-      {#if original_data.responseType == "DISTANCEDONATION"}
-        {original_data.runner.firstname}
-        {original_data.runner.middlename || ""}
-        {original_data.runner.lastname}
-      {:else}
-        {$_("fixed-donation")}:
-        {amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
-      {/if}
-      <span data-id="donation_actions_${original_data.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteDonation}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
-              >{$_("confirm-deletion")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
-              >{$_("delete-donation")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div>
-      <span class="font-medium text-gray-700"
-        >{$_("total-donation-amount")}:</span
-      >
-      <span
-        >{(editable.amount / 100)
-          .toFixed(2)
-          .toLocaleString("de-DE", { valute: "EUR" })}€</span
-      >
-      |
-      <span class="font-medium text-gray-700">{$_("paid-amount")}:</span>
-      <span
-        >{(editable.paidAmount / 100)
-          .toFixed(2)
-          .toLocaleString("de-DE", { valute: "EUR" })}€</span
-      >
-      |
-      <span class="font-medium text-gray-700">{$_("status")}:</span>
-      {#if editable.status == "PAID"}
-        <span
-          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
-          >{$_("paid")}</span
-        >
-      {:else}
-        <span
-          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
-          >{$_("open")}</span
-        >
-      {/if}
-    </div>
-    <br />
-    <div class=" w-full">
-      <label for="donor" class="block font-medium text-gray-700"
-        >{$_("donor")}</label
-      >
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
-          filterDonors(label, filterText, option)}
-        items={current_donors}
-        showChevron={true}
-        placeholder={$_("search-for-donor-name-or-id")}
-        noOptionsMessage={$_("no-donors-found")}
-        bind:selectedValue={donor}
-        on:select={(selectedValue) => {
-          editable.donor = selectedValue.detail.value;
-          editable.donor.donationAmount = original_data.donor.donationAmount;
-          editable.donor.paidDonationAmount =
-            original_data.donor.paidDonationAmount;
-        }}
-        on:clear={() => (editable.donor = null)}
-      />
-    </div>
-    {#if original_data.responseType == "DISTANCEDONATION"}
-      <div class=" w-full">
-        <label for="donor" class="block font-medium text-gray-700"
-          >{$_("runner")}</label
-        >
-        <Select
-          containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-          itemFilter={(label, filterText, option) =>
-            filterDonors(label, filterText, option)}
-          items={current_runners}
-          showChevron={true}
-          placeholder={$_("search-for-runner-by-name-or-id")}
-          noOptionsMessage={$_("no-runners-found")}
-          bind:selectedValue={runner}
-          on:select={(selectedValue) =>
-            (editable.runner = selectedValue.detail.value)}
-          on:clear={() => (editable.runner = null)}
-        />
-      </div>
-    {/if}
-    <div class=" w-full">
-      <label for="lastname" class="font-medium text-gray-700">
-        {#if original_data.responseType == "DISTANCEDONATION"}
-          {$_("amount-per-kilometer")}
-        {:else}{$_("donation-amount")}{/if}
-      </label>
-      <div class="mt-1 flex rounded-md shadow-sm">
-        <input
-          autocomplete="off"
-          class:border-red-500={!is_amount_valid}
-          class:focus:border-red-500={!is_amount_valid}
-          class:focus:ring-red-500={!is_amount_valid}
-          bind:value={amount_input}
-          type="number"
-          step="0.01"
-          name="donation_amount_eur"
-          class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 p-2"
-          placeholder="2.00"
-        />
-        <span
-          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500"
-          >€</span
-        >
-      </div>
-      {#if !is_amount_valid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("donation-amount-must-be-greater-that-0-00eur")}
-        </span>
-      {/if}
-    </div>
-    <div class="w-full">
-      <label for="token" class="block text-sm font-medium text-gray-700"
-        >{$_("paid-amount")}</label
-      >
-      <div
-        class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full"
-      >
-        <input
-          autocomplete="off"
-          class:border-red-500={!is_amount_valid}
-          class:focus:border-red-500={!is_amount_valid}
-          class:focus:ring-red-500={!is_amount_valid}
-          bind:value={paid_amount_input}
-          type="number"
-          step="0.01"
-          name="donation_amount_eur"
-          class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2"
-          placeholder="2.00"
-        />
-        <button
-          on:click={() => {
-            paid_amount_input = paid_amount_input = (
-              original_data.amount / 100
-            ).toFixed(2);
-          }}
-          class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm"
-          >MAX</button
-        >
-        <span
-          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
-          >€</span
-        >
-      </div>
-      {#if !is_paid_amount_valid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("payment-amount-must-be-greater-than-0-00eur")}
-        </span>
-      {/if}
-    </div>
-  </section>
+	<section class="container p-5 select-none">
+		<div class="flex flex-row mb-4">
+			<div class="mt-2 w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("donations")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{original_data.donor.firstname}
+			{original_data.donor.middlename || ""}
+			{original_data.donor.lastname}
+			&gt;
+			{#if original_data.responseType == "DISTANCEDONATION"}
+				{original_data.runner.firstname}
+				{original_data.runner.middlename || ""}
+				{original_data.runner.lastname}
+			{:else}
+				{$_("fixed-donation")}:
+				{amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
+			{/if}
+			[#{original_data.id}]
+			<div data-id="donation_actions_${original_data.id}">
+				{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteDonation}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-deletion")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-donation")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						on:click={submit}
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</div>
+		</div>
+		<!--  -->
+		<div>
+			<span class="font-semibold text-gray-700"
+				>{$_("total-donation-amount")}:</span
+			>
+			<span
+				>{(editable.amount / 100)
+					.toFixed(2)
+					.toLocaleString("de-DE", { valute: "EUR" })}€</span
+			>
+			|
+			<span class="font-semibold text-gray-700">{$_("paid-amount")}:</span>
+			<span
+				>{(editable.paidAmount / 100)
+					.toFixed(2)
+					.toLocaleString("de-DE", { valute: "EUR" })}€</span
+			>
+			|
+			<span class="font-semibold text-gray-700">{$_("status")}:</span>
+			{#if editable.status == "PAID"}
+				<span
+					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
+					>{$_("paid")}</span
+				>
+			{:else}
+				<span
+					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
+					>{$_("open")}</span
+				>
+			{/if}
+		</div>
+		<br />
+		<div class=" mt-2 w-full">
+			<label for="donor" class="block font-semibold text-gray-700"
+				>{$_("donor")}</label
+			>
+			<Select
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				itemFilter={(label, filterText, option) =>
+					filterDonors(label, filterText, option)}
+				items={current_donors}
+				showChevron={true}
+				placeholder={$_("search-for-donor-name-or-id")}
+				noOptionsMessage={$_("no-donors-found")}
+				bind:selectedValue={donor}
+				on:select={(selectedValue) => {
+					editable.donor = selectedValue.detail.value;
+					editable.donor.donationAmount = original_data.donor.donationAmount;
+					editable.donor.paidDonationAmount =
+						original_data.donor.paidDonationAmount;
+				}}
+				on:clear={() => (editable.donor = null)}
+			/>
+		</div>
+		{#if original_data.responseType == "DISTANCEDONATION"}
+			<div class=" mt-2 w-full">
+				<label for="donor" class="block font-semibold text-gray-700"
+					>{$_("runner")}</label
+				>
+				<Select
+					containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+					itemFilter={(label, filterText, option) =>
+						filterDonors(label, filterText, option)}
+					items={current_runners}
+					showChevron={true}
+					placeholder={$_("search-for-runner-by-name-or-id")}
+					noOptionsMessage={$_("no-runners-found")}
+					bind:selectedValue={runner}
+					on:select={(selectedValue) =>
+						(editable.runner = selectedValue.detail.value)}
+					on:clear={() => (editable.runner = null)}
+				/>
+			</div>
+		{/if}
+		<div class=" mt-2 w-full">
+			<label for="lastname" class="font-semibold text-gray-700">
+				{#if original_data.responseType == "DISTANCEDONATION"}
+					{$_("amount-per-kilometer")}
+				{:else}{$_("donation-amount")}{/if}
+			</label>
+			<div class="mt-1 flex rounded-md shadow-sm">
+				<input
+					autocomplete="off"
+					class:border-red-500={!is_amount_valid}
+					class:focus:border-red-500={!is_amount_valid}
+					class:focus:ring-red-500={!is_amount_valid}
+					bind:value={amount_input}
+					type="number"
+					step="0.01"
+					name="donation_amount_eur"
+					class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 p-2"
+					placeholder="2.00"
+				/>
+				<span
+					class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500"
+					>€</span
+				>
+			</div>
+			{#if !is_amount_valid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("donation-amount-must-be-greater-that-0-00eur")}
+				</span>
+			{/if}
+		</div>
+		<div class="mt-2 w-full">
+			<label for="token" class="block font-semibold text-gray-700"
+				>{$_("paid-amount")}</label
+			>
+			<div
+				class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full"
+			>
+				<input
+					autocomplete="off"
+					class:border-red-500={!is_amount_valid}
+					class:focus:border-red-500={!is_amount_valid}
+					class:focus:ring-red-500={!is_amount_valid}
+					bind:value={paid_amount_input}
+					type="number"
+					step="0.01"
+					name="donation_amount_eur"
+					class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2"
+					placeholder="2.00"
+				/>
+				<button
+					on:click={() => {
+						paid_amount_input = paid_amount_input = (
+							original_data.amount / 100
+						).toFixed(2);
+					}}
+					class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm"
+					>MAX</button
+				>
+				<span
+					class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+					>€</span
+				>
+			</div>
+			{#if !is_paid_amount_valid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("payment-amount-must-be-greater-than-0-00eur")}
+				</span>
+			{/if}
+		</div>
+	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}

src/components/donations/DonationDonor.svelte

@@ -9,7 +9,7 @@
   <div class="flex items-center">
     <a
       href="../donors/{donor.id}"
-      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
       >{donor.firstname}
       {#if donor.middlename}{donor.middlename}{/if}
       {donor.lastname}</a

src/components/donations/DonationRunner.svelte

@@ -9,7 +9,7 @@
   <div class="text-sm font-medium text-gray-900">
     <a
       href="../runners/{runner.id}"
-      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
       >{runner.firstname}
       {#if runner.middlename}{runner.middlename}{/if}
       {runner.lastname}</a

src/components/donations/DonationStatus.svelte

@@ -5,12 +5,12 @@
 
 {#if status == "PAID"}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
     >{$_("paid")}</span
   >
 {:else}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
     >{$_("open")}</span
   >
 {/if}

src/components/donations/Donations.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("donations")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}

src/components/donors/AddDonorModal.svelte

@@ -196,7 +196,7 @@
                     bind:this={firstname_input}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -219,7 +219,7 @@
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -238,7 +238,7 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -264,7 +264,7 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isPhoneValidOrEmpty}
                     <span
@@ -292,7 +292,7 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span
@@ -313,7 +313,7 @@
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700"
+                    <label for="comments" class="font-semibold text-gray-700"
                       >{$_("receipt-needed")}</label
                     >
                   </div>
@@ -335,7 +335,7 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !isAddress1Valid}
                       <span
@@ -358,7 +358,7 @@
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                   </div>
                   <div class="col-span-6">
@@ -377,7 +377,7 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iszipcodevalid}
                       <span
@@ -403,7 +403,7 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span

src/components/donors/DonorDetail.svelte

@@ -1,434 +1,413 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import { DonorService, DonationService } from "@odit/lfk-client-js";
-
-  import PromiseError from "../base/PromiseError.svelte";
-  import isEmail from "validator/es/lib/isEmail";
-  import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
-  import toast from "svelte-french-toast";
-  let data_loaded = false;
-  export let params;
-  $: delete_triggered = false;
-  $: original_data = {};
-  $: editable = {};
-  $: changes_performed = !(
-    JSON.stringify(original_data) === JSON.stringify(editable)
-  );
-  $: isEmailValid =
-    (editable.email || "") === "" ||
-    (editable.email && isEmail(editable.email || ""));
-  $: isFirstnameValid = editable.firstname !== "";
-  $: isLastnameValid = editable.lastname !== "";
-  $: save_enabled =
-    changes_performed &&
-    isFirstnameValid &&
-    isLastnameValid &&
-    isEmailValid &&
-    isPhoneValidOrEmpty &&
-    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
-      editable.address_checked === false);
-  const promise = DonorService.donorControllerGetOne(params.donorid).then(
-    (data) => {
-      data_loaded = true;
-      original_data = Object.assign(original_data, data);
-      editable = Object.assign(editable, original_data);
-      editable.address_checked = editable.address.address1 !== null;
-      original_data.address_checked = editable.address.address1 !== null;
-      if (editable.address_checked === false) {
-        editable.address = {
-          address1: "",
-          address2: "",
-          city: "",
-          postalcode: "",
-          country: "",
-        };
-      }
-    }
-  );
-  $: isPhoneValidOrEmpty =
-    editable.phone?.includes("+") ||
-    editable.phone === "" ||
-    editable.phone === null;
-  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-  $: iscityvalid = editable.address?.city?.trim().length !== 0;
-  let modal_open = false;
-  let delete_donor = {};
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast($_("donor-is-being-updated"));
-      editable.address.country = "DE";
-      if (editable.address_checked === false) {
-        editable.address = null;
-      }
-      if (editable.email) editable.email = editable.email;
-      else editable.email = null;
-      if (editable.phone) editable.phone = editable.phone;
-      else editable.phone = null;
-      if (editable.middlename) editable.middlename = editable.middlename;
-      editable.receiptNeeded = editable.address_checked;
-      DonorService.donorControllerPut(original_data.id, editable)
-        .then((resp) => {
-          Object.assign(original_data, editable);
-          original_data = original_data;
-          toast.success($_("updated-donor"));
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  function deleteDonor() {
-    DonorService.donorControllerRemove(original_data.id, false)
-      .then((resp) => {
-        toast($_("donor-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_donor = original_data;
-      });
-  }
+	import { DonorService } from "@odit/lfk-client-js";
+	import { _ } from "svelte-i18n";
+	import store from "../../store";
+	import toast from "svelte-french-toast";
+	import isEmail from "validator/es/lib/isEmail";
+	import PromiseError from "../base/PromiseError.svelte";
+	let data_loaded = false;
+	export let params;
+	$: delete_triggered = false;
+	$: original_data = {};
+	$: editable = {};
+	$: changes_performed = !(
+		JSON.stringify(original_data) === JSON.stringify(editable)
+	);
+	$: isEmailValid =
+		(editable.email || "") === "" ||
+		(editable.email && isEmail(editable.email || ""));
+	$: isFirstnameValid = editable.firstname !== "";
+	$: isLastnameValid = editable.lastname !== "";
+	$: save_enabled =
+		changes_performed &&
+		isFirstnameValid &&
+		isLastnameValid &&
+		isEmailValid &&
+		isPhoneValidOrEmpty &&
+		((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+			editable.address_checked === false);
+	const promise = DonorService.donorControllerGetOne(params.donorid).then(
+		(data) => {
+			data_loaded = true;
+			original_data = Object.assign(original_data, data);
+			editable = Object.assign(editable, original_data);
+			editable.address_checked = editable.address.address1 !== null;
+			original_data.address_checked = editable.address.address1 !== null;
+			if (editable.address_checked === false) {
+				editable.address = {
+					address1: "",
+					address2: "",
+					city: "",
+					postalcode: "",
+					country: "",
+				};
+			}
+		}
+	);
+	$: isPhoneValidOrEmpty =
+		editable.phone?.includes("+") ||
+		editable.phone === "" ||
+		editable.phone === null;
+	$: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+	$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+	$: iscityvalid = editable.address?.city?.trim().length !== 0;
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast($_("donor-is-being-updated"));
+			editable.address.country = "DE";
+			if (editable.address_checked === false) {
+				editable.address = null;
+			}
+			if (editable.email) editable.email = editable.email;
+			else editable.email = null;
+			if (editable.phone) editable.phone = editable.phone;
+			else editable.phone = null;
+			if (editable.middlename) editable.middlename = editable.middlename;
+			editable.receiptNeeded = editable.address_checked;
+			DonorService.donorControllerPut(original_data.id, editable)
+				.then((resp) => {
+					Object.assign(original_data, editable);
+					original_data = original_data;
+					toast.success($_("updated-donor"));
+				})
+				.catch((err) => {});
+		} else {
+		}
+	}
+	function deleteDonor() {
+		DonorService.donorControllerRemove(original_data.id, true)
+			.then((resp) => {
+				toast($_("donor-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {
+				console.log(err);
+			});
+	}
 </script>
 
-<ConfirmDonorDeletion bind:modal_open bind:delete_donor />
 {#await promise}
-  {$_("loading-donor-details")}
+	{$_("loading-donor-details")}
 {:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_("donors")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2"
-                >{original_data.firstname}
-                {original_data.middlename || ""}
-                {original_data.lastname}</span
-              >
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_data.firstname}
-      {original_data.middlename || ""}
-      {original_data.lastname}
-      <span data-id="donor_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteDonor}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
-              >{$_("confirm-deletion")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
-              >{$_("delete-donor")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div>
-      <span class="font-medium text-gray-700"
-        >{$_("total-donation-amount")}:</span
-      >
-      <span
-        >{(editable.donationAmount / 100)
-          .toFixed(2)
-          .toLocaleString("de-DE", { valute: "EUR" })}€</span
-      >
-      |
-      <span class="font-medium text-gray-700">{$_("total-paid-amount")}:</span>
-      <span
-        >{(editable.paidDonationAmount / 100)
-          .toFixed(2)
-          .toLocaleString("de-DE", { valute: "EUR" })}€</span
-      >
-      <br />
-      <span class="font-medium text-gray-700">{$_("donations")}:</span>
-      {#if original_data.donations.length > 0}
-        {#each original_data.donations as d}
-          {#if d.responseType === "DISTANCEDONATION"}
-            <a
-              href="../donations/{d.id}"
-              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1"
-              >{d.runner.firstname}
-              {d.runner.middlename || ""}
-              {d.runner.lastname}</a
-            >
-          {:else}
-            <a
-              href="../donations/{d.id}"
-              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1"
-              >{$_("fixed-donation")}:
-              {(d.amount / 100)
-                .toFixed(2)
-                .toLocaleString("de-DE", { valute: "EUR" })}€</a
-            >
-          {/if}
-        {/each}
-      {:else}{$_("donor-has-no-associated-donations")}{/if}
-    </div>
-    <div class=" w-full">
-      <label for="firstname" class="font-medium text-gray-700"
-        >{$_("first-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("first-name")}
-        type="text"
-        class:border-red-500={!isFirstnameValid}
-        class:focus:border-red-500={!isFirstnameValid}
-        class:focus:ring-red-500={!isFirstnameValid}
-        bind:value={editable.firstname}
-        name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isFirstnameValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("first-name-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class=" w-full">
-      <label for="middlename" class="font-medium text-gray-700"
-        >{$_("middle-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("middle-name")}
-        type="text"
-        bind:value={editable.middlename}
-        name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <div class=" w-full">
-      <label for="lastname" class="font-medium text-gray-700"
-        >{$_("last-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("last-name")}
-        type="text"
-        bind:value={editable.lastname}
-        class:border-red-500={!isLastnameValid}
-        class:focus:border-red-500={!isLastnameValid}
-        class:focus:ring-red-500={!isLastnameValid}
-        name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isLastnameValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("last-name-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class=" w-full">
-      <label for="email" class="font-medium text-gray-700"
-        >{$_("e-mail-adress")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("e-mail-adress")}
-        type="email"
-        bind:value={editable.email}
-        class:border-red-500={!isEmailValid}
-        class:focus:border-red-500={!isEmailValid}
-        class:focus:ring-red-500={!isEmailValid}
-        name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isEmailValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("valid-email-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class=" w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_("phone")}
-        type="tel"
-        class:border-red-500={!isPhoneValidOrEmpty}
-        class:focus:border-red-500={!isPhoneValidOrEmpty}
-        class:focus:ring-red-500={!isPhoneValidOrEmpty}
-        bind:value={editable.phone}
-        name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isPhoneValidOrEmpty}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("valid-international-phone-number-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class="flex items-start mt-2">
-      <div class="flex items-center h-5">
-        <input
-          bind:checked={editable.address_checked}
-          id="comments"
-          name="comments"
-          type="checkbox"
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-        />
-      </div>
-      <div class="ml-3">
-        <label for="comments" class="font-medium text-gray-700"
-          >{$_("receipt-needed")}</label
-        >
-      </div>
-    </div>
-    {#if editable.address_checked === true}
-      <div class="col-span-6">
-        <label for="address1" class="block font-medium text-gray-700"
-          >{$_("address")}</label
-        >
-        <input
-          autocomplete="off"
-          placeholder="Address"
-          class:border-red-500={!isAddress1Valid}
-          class:focus:border-red-500={!isAddress1Valid}
-          class:focus:ring-red-500={!isAddress1Valid}
-          bind:value={editable.address.address1}
-          type="text"
-          name="address1"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        />
-        {#if !isAddress1Valid}
-          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          >
-            {$_("address-is-required")}
-          </span>
-        {/if}
-      </div>
-      <div class="col-span-6">
-        <label for="address2" class="block font-medium text-gray-700"
-          >{$_("apartment-suite-etc")}</label
-        >
-        <input
-          autocomplete="off"
-          placeholder={$_("apartment-suite-etc")}
-          bind:value={editable.address.address2}
-          type="text"
-          name="address2"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        />
-      </div>
-      <div class="col-span-6">
-        <label for="zipcode" class="block font-medium text-gray-700"
-          >{$_("zip-postal-code")}</label
-        >
-        <input
-          autocomplete="off"
-          placeholder={$_("zip-postal-code")}
-          class:border-red-500={!iszipcodevalid}
-          class:focus:border-red-500={!iszipcodevalid}
-          class:focus:ring-red-500={!iszipcodevalid}
-          bind:value={editable.address.postalcode}
-          type="text"
-          name="zipcode"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        />
-        {#if !iszipcodevalid}
-          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          >
-            {$_("valid-zipcode-postal-code-is-required")}
-          </span>
-        {/if}
-      </div>
-      <div class="col-span-6">
-        <label for="city" class="block font-medium text-gray-700"
-          >{$_("city")}</label
-        >
-        <input
-          autocomplete="off"
-          placeholder={$_("city")}
-          class:border-red-500={!iscityvalid}
-          class:focus:border-red-500={!iscityvalid}
-          class:focus:ring-red-500={!iscityvalid}
-          bind:value={editable.address.city}
-          type="text"
-          name="city"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        />
-        {#if !iscityvalid}
-          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          >
-            {$_("valid-city-is-required")}
-          </span>
-        {/if}
-      </div>
-    {/if}
-  </section>
+	<section class="container p-5 select-none">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("donors")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{original_data.firstname}
+			{original_data.middlename || ""}
+			{original_data.lastname}
+			<div data-id="donor_actions_${editable.id}">
+				{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteDonor}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-deletion")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-donor")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						on:click={submit}
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</div>
+		</div>
+		<!--  -->
+		<div>
+			<span class="font-semibold text-gray-700"
+				>{$_("total-donation-amount")}:</span
+			>
+			<span
+				>{(editable.donationAmount / 100)
+					.toFixed(2)
+					.toLocaleString("de-DE", { valute: "EUR" })}€</span
+			>
+			|
+			<span class="font-semibold text-gray-700">{$_("total-paid-amount")}:</span
+			>
+			<span
+				>{(editable.paidDonationAmount / 100)
+					.toFixed(2)
+					.toLocaleString("de-DE", { valute: "EUR" })}€</span
+			>
+			<br />
+			<span class="font-semibold text-gray-700">{$_("donations")}:</span>
+			{#if original_data.donations.length > 0}
+				{#each original_data.donations as d}
+					{#if d.responseType === "DISTANCEDONATION"}
+						<a
+							href="../donations/{d.id}"
+							class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1"
+							>{d.runner.firstname}
+							{d.runner.middlename || ""}
+							{d.runner.lastname}</a
+						>
+					{:else}
+						<a
+							href="../donations/{d.id}"
+							class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-700 text-white mr-1"
+							>{$_("fixed-donation")}:
+							{(d.amount / 100)
+								.toFixed(2)
+								.toLocaleString("de-DE", { valute: "EUR" })}€</a
+						>
+					{/if}
+				{/each}
+			{:else}{$_("donor-has-no-associated-donations")}{/if}
+		</div>
+		<div class="mt-2 w-full">
+			<label for="firstname" class="font-semibold text-gray-700"
+				>{$_("first-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("first-name")}
+				type="text"
+				class:border-red-500={!isFirstnameValid}
+				class:focus:border-red-500={!isFirstnameValid}
+				class:focus:ring-red-500={!isFirstnameValid}
+				bind:value={editable.firstname}
+				name="firstname"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isFirstnameValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("first-name-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="mt-2 w-full">
+			<label for="middlename" class="font-semibold text-gray-700"
+				>{$_("middle-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("middle-name")}
+				type="text"
+				bind:value={editable.middlename}
+				name="middlename"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="mt-2 w-full">
+			<label for="lastname" class="font-semibold text-gray-700"
+				>{$_("last-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("last-name")}
+				type="text"
+				bind:value={editable.lastname}
+				class:border-red-500={!isLastnameValid}
+				class:focus:border-red-500={!isLastnameValid}
+				class:focus:ring-red-500={!isLastnameValid}
+				name="lastname"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isLastnameValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("last-name-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="mt-2 w-full">
+			<label for="email" class="font-semibold text-gray-700"
+				>{$_("e-mail-adress")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("e-mail-adress")}
+				type="email"
+				bind:value={editable.email}
+				class:border-red-500={!isEmailValid}
+				class:focus:border-red-500={!isEmailValid}
+				class:focus:ring-red-500={!isEmailValid}
+				name="email"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isEmailValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("valid-email-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="mt-2 w-full">
+			<label for="phone" class="font-semibold text-gray-700"
+				>{$_("phone")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("phone")}
+				type="tel"
+				class:border-red-500={!isPhoneValidOrEmpty}
+				class:focus:border-red-500={!isPhoneValidOrEmpty}
+				class:focus:ring-red-500={!isPhoneValidOrEmpty}
+				bind:value={editable.phone}
+				name="phone"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isPhoneValidOrEmpty}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("valid-international-phone-number-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="flex items-start mt-2">
+			<div class="flex items-center h-5">
+				<input
+					bind:checked={editable.address_checked}
+					id="comments"
+					name="comments"
+					type="checkbox"
+					class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+				/>
+			</div>
+			<div class="ml-3">
+				<label for="comments" class="font-semibold text-gray-700"
+					>{$_("receipt-needed")}</label
+				>
+			</div>
+		</div>
+		{#if editable.address_checked === true}
+			<div class="col-span-6">
+				<label for="address1" class="block font-medium text-gray-700"
+					>{$_("address")}</label
+				>
+				<input
+					autocomplete="off"
+					placeholder="Address"
+					class:border-red-500={!isAddress1Valid}
+					class:focus:border-red-500={!isAddress1Valid}
+					class:focus:ring-red-500={!isAddress1Valid}
+					bind:value={editable.address.address1}
+					type="text"
+					name="address1"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+				{#if !isAddress1Valid}
+					<span
+						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+					>
+						{$_("address-is-required")}
+					</span>
+				{/if}
+			</div>
+			<div class="col-span-6">
+				<label for="address2" class="block font-medium text-gray-700"
+					>{$_("apartment-suite-etc")}</label
+				>
+				<input
+					autocomplete="off"
+					placeholder={$_("apartment-suite-etc")}
+					bind:value={editable.address.address2}
+					type="text"
+					name="address2"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+			</div>
+			<div class="col-span-6">
+				<label for="zipcode" class="block font-medium text-gray-700"
+					>{$_("zip-postal-code")}</label
+				>
+				<input
+					autocomplete="off"
+					placeholder={$_("zip-postal-code")}
+					class:border-red-500={!iszipcodevalid}
+					class:focus:border-red-500={!iszipcodevalid}
+					class:focus:ring-red-500={!iszipcodevalid}
+					bind:value={editable.address.postalcode}
+					type="text"
+					name="zipcode"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+				{#if !iszipcodevalid}
+					<span
+						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+					>
+						{$_("valid-zipcode-postal-code-is-required")}
+					</span>
+				{/if}
+			</div>
+			<div class="col-span-6">
+				<label for="city" class="block font-medium text-gray-700"
+					>{$_("city")}</label
+				>
+				<input
+					autocomplete="off"
+					placeholder={$_("city")}
+					class:border-red-500={!iscityvalid}
+					class:focus:border-red-500={!iscityvalid}
+					class:focus:ring-red-500={!iscityvalid}
+					bind:value={editable.address.city}
+					type="text"
+					name="city"
+					class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+				{#if !iscityvalid}
+					<span
+						class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+					>
+						{$_("valid-city-is-required")}
+					</span>
+				{/if}
+			</div>
+		{/if}
+	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}

src/components/donors/DonorDonations.svelte

@@ -18,7 +18,7 @@
     {:else}
       <a
         href="../donations/{donation.id}"
-        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1"
+        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-700 text-white mr-1"
         >{$_("fixed-donation")}:
         {(donation.amount / 100)
           .toFixed(2)

src/components/donors/Donors.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("donors")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}

src/components/general/About.svelte

@@ -97,7 +97,7 @@
 {/if}
 <!-- /// -->
 <section class="container p-5">
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("about")}
 	</h4>
 	<p class="mt-2 mb-2">
@@ -109,7 +109,7 @@
 		<br />
 		<span>{$_("lfk-is-os")}</span>
 	</p>
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("credits")}
 	</h4>
 	<p class="text-left">{$_("oss_credit_description")}</p>

src/components/groups/AddGroupModal.svelte

@@ -130,7 +130,7 @@
                     bind:value={name_input_value}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isNameValid}
                     <span
@@ -152,7 +152,7 @@
                     bind:value={description_input_value}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
               </div>

src/components/groups/GroupDetail.svelte

@@ -1,238 +1,227 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import { UserGroupService } from "@odit/lfk-client-js";
-  import toast from 'svelte-french-toast'
+	import { _ } from "svelte-i18n";
+	import store from "../../store";
+	import { UserGroupService } from "@odit/lfk-client-js";
+	import toast from "svelte-french-toast";
 
-  import PromiseError from "../base/PromiseError.svelte";
-  let data_loaded = false;
-  export let params;
-  const promise = UserGroupService.userGroupControllerGetOne(params.groupid);
-  const colors = [
-    "#f3558e",
-    "#17b978",
-    "#3498db",
-    "#3f3b3b",
-    "#775ada",
-    "#7ed6df_#000000",
-    "#000000",
-    "#21e6c1_#000000",
-    "#c0392b",
-    "#d35400",
-    "#7f8c8d",
-    "#6ab04c",
-    "#4834d4",
-    "#ff1f5a",
-    "#eac100",
-  ];
-  let matched_colors = [];
-  $: delete_triggered = false;
-  $: search_permission = "";
-  $: original_data = {};
-  $: editable = {};
-  $: changes_performed = !(
-    JSON.stringify(original_data) == JSON.stringify(editable)
-  );
-  $: isGroupnameValid = editable.name !== "";
-  $: save_enabled = changes_performed && isGroupnameValid;
-  promise.then((data) => {
-    let current_target = "";
-    let colorindex = -1;
-    data.permissions = data.permissions.sort();
-    data.permissions.forEach((p) => {
-      const target = p.split(":")[0];
-      if (current_target !== p.split(":")[0]) {
-        colorindex++;
-        current_target = p.split(":")[0];
-      }
-      let background = colors[colorindex];
-      let foreground = "#fff";
-      if (background.includes("_")) {
-        foreground = background.split("_")[1];
-        background = background.split("_")[0];
-      }
-      matched_colors[target] = [background, foreground];
-    });
-    data_loaded = true;
-    original_data = Object.assign(original_data, data);
-    editable = Object.assign(editable, original_data);
-  });
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast($_("updating-group"));
-      UserGroupService.userGroupControllerPut(original_data.id, editable)
-        .then((resp) => {
-          Object.assign(original_data, editable);
-          original_data = editable;
-          Object.assign(original_data, editable);
-          toast.success($_("group-updated"));
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  function deleteGroup() {
-    UserGroupService.userGroupControllerRemove(original_data.id, true)
-      .then((resp) => {
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
+	import PromiseError from "../base/PromiseError.svelte";
+	let data_loaded = false;
+	export let params;
+	const promise = UserGroupService.userGroupControllerGetOne(params.groupid);
+	const colors = [
+		"#f3558e",
+		"#17b978",
+		"#3498db",
+		"#3f3b3b",
+		"#775ada",
+		"#7ed6df_#000000",
+		"#000000",
+		"#21e6c1_#000000",
+		"#c0392b",
+		"#d35400",
+		"#7f8c8d",
+		"#6ab04c",
+		"#4834d4",
+		"#ff1f5a",
+		"#eac100",
+	];
+	let matched_colors = [];
+	$: delete_triggered = false;
+	$: search_permission = "";
+	$: original_data = {};
+	$: editable = {};
+	$: changes_performed = !(
+		JSON.stringify(original_data) == JSON.stringify(editable)
+	);
+	$: isGroupnameValid = editable.name !== "";
+	$: save_enabled = changes_performed && isGroupnameValid;
+	promise.then((data) => {
+		let current_target = "";
+		let colorindex = -1;
+		data.permissions = data.permissions.sort();
+		data.permissions.forEach((p) => {
+			const target = p.split(":")[0];
+			if (current_target !== p.split(":")[0]) {
+				colorindex++;
+				current_target = p.split(":")[0];
+			}
+			let background = colors[colorindex];
+			let foreground = "#fff";
+			if (background.includes("_")) {
+				foreground = background.split("_")[1];
+				background = background.split("_")[0];
+			}
+			matched_colors[target] = [background, foreground];
+		});
+		data_loaded = true;
+		original_data = Object.assign(original_data, data);
+		editable = Object.assign(editable, original_data);
+	});
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast($_("updating-group"));
+			UserGroupService.userGroupControllerPut(original_data.id, editable)
+				.then((resp) => {
+					Object.assign(original_data, editable);
+					original_data = editable;
+					Object.assign(original_data, editable);
+					toast.success($_("group-updated"));
+				})
+				.catch((err) => {});
+		} else {
+		}
+	}
+	function deleteGroup() {
+		UserGroupService.userGroupControllerRemove(original_data.id, true)
+			.then((resp) => {
+				location.replace("./");
+			})
+			.catch((err) => {});
+	}
 </script>
 
 {#await promise}
-  {$_("loading-group-detail")}
+	{$_("loading-group-detail")}
 {:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                class="flex-shrink-0 w-5 h-5 mr-2"
-                fill="currentColor"
-                width="24"
-                height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-                ><path
-                  fill="currentColor"
-                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="../">{$_("groups")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">{editable.name}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_data.name}
-      <span data-id="group_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteGroup}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("confirm-deletion")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("delete-group")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div class="text-sm w-full">
-      <label for="title" class="font-medium text-gray-700">{$_("name")}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_("name")}
-        type="text"
-        bind:value={editable.name}
-        class:border-red-500={!isGroupnameValid}
-        class:focus:border-red-500={!isGroupnameValid}
-        class:focus:ring-red-500={!isGroupnameValid}
-        name="title"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isGroupnameValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("group-name-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label for="firstname" class="font-medium text-gray-700"
-        >{$_("description")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("description")}
-        type="text"
-        bind:value={editable.description}
-        name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full mt-8">
-      <p class="font-medium mb-4">
-        {$_("permissions")}
-        <a
-          class="px-4 py-2 bg-gray-500 rounded-md text-white"
-          href="/groups/{params.groupid}/permissions/"
-          >{$_("edit-permissions")}</a
-        >
-      </p>
-      <div class="w-full sm:my-px sm:px-px sm:w-1/2">
-        <input
-          autocomplete="off"
-          placeholder={$_("search-for-permission")}
-          type="text"
-          bind:value={search_permission}
-          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        />
-      </div>
-      {#each original_data.permissions as p}
-        {#if p.toLowerCase().includes(search_permission.toLowerCase())}
-          <span
-            style="background:{matched_colors[
-              p.split(':')[0]
-            ][0]};color:{matched_colors[p.split(':')[0]][1]};"
-            class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded"
-            >{p}</span
-          >
-          <!--  -->
-        {/if}
-      {/each}
-    </div>
-  </section>
+	<section class="container p-5 select-none">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center"></li>
+						<li class="flex items-center">
+							<a class="mr-2" href="../"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("groups")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{editable.name}
+			<div data-id="group_actions_${editable.id}">
+				{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteGroup}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-deletion")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-group")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						on:click={submit}
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</div>
+		</div>
+		<!--  -->
+		<div class="text-sm w-full mt-2">
+			<label for="title" class="font-semibold text-gray-700">{$_("name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("name")}
+				type="text"
+				bind:value={editable.name}
+				class:border-red-500={!isGroupnameValid}
+				class:focus:border-red-500={!isGroupnameValid}
+				class:focus:ring-red-500={!isGroupnameValid}
+				name="title"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isGroupnameValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("group-name-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="groupdescription" class="font-semibold text-gray-700"
+				>{$_("description")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("description")}
+				type="text"
+				bind:value={editable.description}
+				name="groupdescription"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<p class="font-semibold mb-4">
+				{$_("permissions")}
+			</p>
+			<div>
+				<a
+					class="px-4 py-2 bg-gray-500 rounded-md text-white"
+					href="/groups/{params.groupid}/permissions/"
+					>{$_("edit-permissions")}</a
+				>
+			</div>
+			<div class="w-full sm:my-px sm:px-px sm:w-1/2">
+				<input
+					autocomplete="off"
+					placeholder={$_("search-for-permission")}
+					type="text"
+					bind:value={search_permission}
+					class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+			</div>
+			{#each original_data.permissions as p}
+				{#if p.toLowerCase().includes(search_permission.toLowerCase())}
+					<span
+						style="background:{matched_colors[
+							p.split(':')[0]
+						][0]};color:{matched_colors[p.split(':')[0]][1]};"
+						class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded"
+						>{p}</span
+					>
+					<!--  -->
+				{/if}
+			{/each}
+		</div>
+	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}

src/components/groups/GroupPermissions.svelte

@@ -133,10 +133,8 @@
         </nav>
       </div>
     </div>
-    <div class="mb-8 text-3xl font-extrabold">
-      {$_("permissions")}:
-      {original_data.name}
-      <span>
+    <div class="mb-4 text-3xl font-extrabold">
+      <div>
         {#if promises.length === 0}
           <button
             disabled={save_enabled}
@@ -153,7 +151,7 @@
             >{$_("applying-changes")}</button
           >
         {/if}
-      </span>
+      </div>
     </div>
     <!--  -->
     <div class="flex flex-wrap -mx-1 overflow-hidden">

src/components/groups/Groups.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("user-groups")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}

src/components/orgs/AddOrgModal.svelte

@@ -153,7 +153,7 @@
                     bind:this={name_input_dom}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isOrgnameValid}
                     <span
@@ -174,7 +174,7 @@
                     />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700"
+                    <label for="comments" class="font-semibold text-gray-700"
                       >{$_("address")}</label
                     >
                   </div>
@@ -196,7 +196,7 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !isAddress1Valid}
                       <span
@@ -219,7 +219,7 @@
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                   </div>
                   <div class="col-span-6">
@@ -238,7 +238,7 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iszipcodevalid}
                       <span
@@ -264,7 +264,7 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     />
                     {#if !iscityvalid}
                       <span

src/components/orgs/OrgDetail.svelte

@@ -1,488 +1,442 @@
 <script>
-  import {
-    GroupContactService,
-    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import toast from 'svelte-french-toast'
-
-  import store from "../../store";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-  import PromiseError from "../base/PromiseError.svelte";
-  import Select from "svelte-select";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import { tick } from "svelte";
-  $: delete_triggered = false;
-  $: address_valid_or_none =
-    (isAddress1Valid && iszipcodevalid && iscityvalid) ||
-    editable.address_checked === false;
-  $: save_enabled = data_changed && address_valid_or_none;
-  let original = "";
-  let original_object = {};
-  let contacts = [];
-  let valueCopy = null;
-  let areaDom;
-  let copied = false;
-  export let params;
-  $: editable = {};
-  $: contact = {};
-  $: data_loaded = false;
-  $: data_changed = !(JSON.stringify(editable) === original);
-  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-  $: iscityvalid = editable.address?.city?.trim().length !== 0;
-  $: sponsoring_contracts_show = true;
-  $: cards_show = true;
-  $: certificates_show = true;
-  $: generate_orgs = [original_object];
-  $: registrationLink = `${config.baseurl_selfservice}/register/${editable.registrationKey}`;
-  const getContactLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
-    params.orgid
-  ).then((value) => {
-    data_loaded = true;
-    value.address_checked = value.address.address1 !== null;
-    if (value.address_checked === false) {
-      value.address = {
-        address1: "",
-        address2: "",
-        city: "",
-        postalcode: "",
-        country: "",
-      };
-    }
-    editable = Object.assign(editable, value);
-    editable = editable;
-    original_object = Object.assign(editable, value);
-    original = JSON.stringify(value);
-    GroupContactService.groupContactControllerGetAll().then((val) => {
-      contacts = val.map((r) => {
-        return { label: getContactLabel(r), value: r };
-      });
-      if (editable.contact) {
-        contact = contacts.find((g) => g.value.id == editable.contact.id);
-      } else {
-        contact = null;
-      }
-    });
-  });
-  let modal_open = false;
-  let delete_org = {};
-  function deleteOrganization() {
-    RunnerOrganizationService.runnerOrganizationControllerRemove(
-      original_object.id,
-      false
-    )
-      .then((resp) => {
-        toast($_("organization-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_org = original_object;
-      });
-  }
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast($_("updating-organization"));
-      let postdata = Object.assign({}, editable);
-      if (postdata.address_checked === false) {
-        postdata.address = null;
-      }
-      postdata.contact = postdata.contact?.id;
-      RunnerOrganizationService.runnerOrganizationControllerPut(
-        original_object.id,
-        postdata
-      )
-        .then((resp) => {
-          editable.registrationKey = resp.registrationKey;
-          original_object = Object.assign({}, editable);
-          original = JSON.stringify(original_object);
-          toast.success($_("updated-organization"));
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  async function copy() {
-    if (!editable.registrationKey) {
-      toast.error($_("you-have-to-save-your-changes-to-generate-a-link"));
-      return;
-    }
-    valueCopy = registrationLink;
-    await tick();
-    areaDom.focus();
-    areaDom.select();
-    try {
-      const successful = document.execCommand("copy");
-      if (!successful) {
-        throw new Error();
-      }
-      toast($_("copied-link-to-clipboard"));
-      copied = true;
-    } catch (err) {
-      toast.error($_("error-whyile-copying-to-clipboard"));
-    }
-    // we can notifi by event or storage about copy status
-    valueCopy = null;
-  }
-  export let import_modal_open = false;
+	import {
+		GroupContactService,
+		RunnerOrganizationService,
+	} from "@odit/lfk-client-js";
+	import toast from "svelte-french-toast";
+	import { _ } from "svelte-i18n";
+	import { tick } from "svelte";
+	import Select from "svelte-select";
+	import store from "../../store";
+	import PromiseError from "../base/PromiseError.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+	$: delete_triggered = false;
+	$: address_valid_or_none =
+		(isAddress1Valid && iszipcodevalid && iscityvalid) ||
+		editable.address_checked === false;
+	$: save_enabled = data_changed && address_valid_or_none;
+	let original = "";
+	let original_object = {};
+	let contacts = [];
+	let valueCopy = null;
+	let areaDom;
+	export let params;
+	$: editable = {};
+	$: contact = {};
+	$: data_loaded = false;
+	$: data_changed = !(JSON.stringify(editable) === original);
+	$: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+	$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+	$: iscityvalid = editable.address?.city?.trim().length !== 0;
+	$: sponsoring_contracts_show = true;
+	$: cards_show = true;
+	$: certificates_show = true;
+	$: generate_orgs = [original_object];
+	$: registrationLink = `${config.baseurl_selfservice}/register/${editable.registrationKey}`;
+	const getContactLabel = (option) =>
+		option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+	const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
+		params.orgid
+	).then((value) => {
+		data_loaded = true;
+		value.address_checked = value.address.address1 !== null;
+		if (value.address_checked === false) {
+			value.address = {
+				address1: "",
+				address2: "",
+				city: "",
+				postalcode: "",
+				country: "",
+			};
+		}
+		editable = Object.assign(editable, value);
+		editable = editable;
+		original_object = Object.assign(editable, value);
+		original = JSON.stringify(value);
+		GroupContactService.groupContactControllerGetAll().then((val) => {
+			contacts = val.map((r) => {
+				return { label: getContactLabel(r), value: r };
+			});
+			if (editable.contact) {
+				contact = contacts.find((g) => g.value.id == editable.contact.id);
+			} else {
+				contact = null;
+			}
+		});
+	});
+	let modal_open = false;
+	let delete_org = {};
+	function deleteOrganization() {
+		RunnerOrganizationService.runnerOrganizationControllerRemove(
+			original_object.id,
+			false
+		)
+			.then((resp) => {
+				toast($_("organization-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {
+				modal_open = true;
+				delete_org = original_object;
+			});
+	}
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast($_("updating-organization"));
+			let postdata = Object.assign({}, editable);
+			if (postdata.address_checked === false) {
+				postdata.address = null;
+			}
+			postdata.contact = postdata.contact?.id;
+			RunnerOrganizationService.runnerOrganizationControllerPut(
+				original_object.id,
+				postdata
+			)
+				.then((resp) => {
+					editable.registrationKey = resp.registrationKey;
+					original_object = Object.assign({}, editable);
+					original = JSON.stringify(original_object);
+					toast.success($_("updated-organization"));
+				})
+				.catch((err) => {});
+		} else {
+		}
+	}
+	async function copy() {
+		if (!editable.registrationKey) {
+			toast.error($_("you-have-to-save-your-changes-to-generate-a-link"));
+			return;
+		}
+		valueCopy = registrationLink;
+		await tick();
+		areaDom.focus();
+		areaDom.select();
+		try {
+			const successful = document.execCommand("copy");
+			if (!successful) {
+				throw new Error();
+			}
+			toast($_("copied-link-to-clipboard"));
+		} catch (err) {
+			toast.error($_("error-whyile-copying-to-clipboard"));
+		}
+		// we can notifi by event or storage about copy status
+		valueCopy = null;
+	}
+	export let import_modal_open = false;
 </script>
 
 {#if valueCopy != null}<textarea bind:this={areaDom}>{valueCopy}</textarea>{/if}
 <ImportRunnerModal
-  on:cancelDelete={(event) => {
-    import_modal_open = false;
-  }}
-  current_runners={[]}
-  passed_team={{}}
-  passed_orgs={[]}
-  passed_org={editable}
-  opened_from="OrgDetail"
-  bind:import_modal_open
+	on:cancelDelete={(event) => {
+		import_modal_open = false;
+	}}
+	current_runners={[]}
+	passed_team={{}}
+	passed_orgs={[]}
+	passed_org={editable}
+	opened_from="OrgDetail"
+	bind:import_modal_open
 />
 <ConfirmOrgDeletion bind:modal_open bind:delete_org />
 {#if data_loaded}
-  <section class="container p-5">
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_object.name}
-      <span data-id="org_actions_${editable.id}">
-        <GenerateSponsoringContracts
-          bind:sponsoring_contracts_show
-          bind:generate_orgs
-        />
-        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
-        <GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
-          <button
-            on:click={() => {
-              import_modal_open = true;
-            }}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-          >
-            {$_("import-runners")}
-          </button>
-        {/if}
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteOrganization}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("confirm-delete")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("delete-organization")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            on:click={submit}
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="mr-2 flex items-center">
-              <svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                <polyline points="9 22 9 12 15 12 15 22" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="/">{$_("home")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="mr-2 flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">{$_("organizations")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">Org-Details #{params.orgid}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="text-sm w-full">
-      <label for="name" class="font-medium text-gray-700">{$_("name")}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_("name")}
-        type="text"
-        bind:value={editable.name}
-        name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="contact" class="font-medium text-gray-700"
-        >{$_("contact")}</label
-      >
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
-          option.value.id.toString().startsWith(filterText.toLowerCase())}
-        items={contacts}
-        showChevron={true}
-        placeholder={$_("no-contact-selected")}
-        noOptionsMessage={$_("no-contact-found")}
-        bind:selectedValue={contact}
-        on:select={(selectedValue) =>
-          (editable.contact = selectedValue.detail.value)}
-        on:clear={() => (editable.contact = null)}
-      />
-    </div>
-    <div>
-      <div class="flex items-start mt-2">
-        <div class="flex items-center h-5">
-          <input
-            bind:checked={editable.registrationEnabled}
-            id="toggle_selfservice_feature"
-            name="toggle_selfservice_feature"
-            type="checkbox"
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-          />
-        </div>
-        <div class="ml-3 text-sm">
-          <label
-            for="toggle_selfservice_feature"
-            class="font-medium text-gray-700"
-            >{$_("selfservice-registration")}</label
-          >
-        </div>
-      </div>
-      <div>
-        {#if editable.registrationEnabled}
-          <div class="text-sm w-full">
-            <button on:click={copy} class="inline-flex w-full">
-              <p
-                name="token"
-                class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
-              >
-                {#if editable.registrationKey}
-                  {registrationLink}
-                {:else}
-                  {$_("you-have-to-save-your-changes-to-generate-a-link")}
-                {/if}
-              </p>
-              <div
-                class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  height="24"
-                  ><path fill="none" d="M0 0h24v24H0z" />
-                  <path
-                    fill="currentColor"
-                    d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"
-                  /></svg
-                >
-              </div>
-            </button>
-            {#if editable.registrationKey}
-              <p class="text-gray-500 text-xs">
-                {$_("click-to-copy-the-link-into-your-clipboard")}
-              </p>
-            {/if}
-          </div>
-        {/if}
-        <!--  -->
-        <div>
-          <div class="flex items-start mt-2">
-            <div class="flex items-center h-5">
-              <input
-                bind:checked={editable.address_checked}
-                id="toggle_address_checkbox"
-                name="toggle_address_checkbox"
-                type="checkbox"
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-              />
-            </div>
-            <div class="ml-3 text-sm">
-              <label
-                for="toggle_address_checkbox"
-                class="font-medium text-gray-700">{$_("address")}</label
-              >
-            </div>
-          </div>
-        </div>
-        {#if editable.address_checked === true}
-          <div class="col-span-6">
-            <label
-              for="address1"
-              class="block text-sm font-medium text-gray-700"
-              >{$_("address")}</label
-            >
-            <input
-              autocomplete="off"
-              placeholder="Address"
-              class:border-red-500={!isAddress1Valid}
-              class:focus:border-red-500={!isAddress1Valid}
-              class:focus:ring-red-500={!isAddress1Valid}
-              bind:value={editable.address.address1}
-              type="text"
-              name="address1"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-            />
-            {#if !isAddress1Valid}
-              <span
-                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-              >
-                {$_("address-is-required")}
-              </span>
-            {/if}
-          </div>
-          <div class="col-span-6">
-            <label
-              for="address2"
-              class="block text-sm font-medium text-gray-700"
-              >{$_("apartment-suite-etc")}</label
-            >
-            <input
-              autocomplete="off"
-              placeholder={$_("apartment-suite-etc")}
-              bind:value={editable.address.address2}
-              type="text"
-              name="address2"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-            />
-          </div>
-          <div class="col-span-6">
-            <label for="zipcode" class="block text-sm font-medium text-gray-700"
-              >{$_("zip-postal-code")}</label
-            >
-            <input
-              autocomplete="off"
-              placeholder={$_("zip-postal-code")}
-              class:border-red-500={!iszipcodevalid}
-              class:focus:border-red-500={!iszipcodevalid}
-              class:focus:ring-red-500={!iszipcodevalid}
-              bind:value={editable.address.postalcode}
-              type="text"
-              name="zipcode"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-            />
-            {#if !iszipcodevalid}
-              <span
-                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-              >
-                {$_("valid-zipcode-postal-code-is-required")}
-              </span>
-            {/if}
-          </div>
-          <div class="col-span-6">
-            <label for="city" class="block text-sm font-medium text-gray-700"
-              >{$_("city")}</label
-            >
-            <input
-              autocomplete="off"
-              placeholder={$_("city")}
-              class:border-red-500={!iscityvalid}
-              class:focus:border-red-500={!iscityvalid}
-              class:focus:ring-red-500={!iscityvalid}
-              bind:value={editable.address.city}
-              type="text"
-              name="city"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-            />
-            {#if !iscityvalid}
-              <span
-                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-              >
-                {$_("valid-city-is-required")}
-              </span>
-            {/if}
-          </div>
-        {/if}
-        <div class="text-sm w-full">
-          <span class="font-medium text-gray-700">{$_("distance")}</span>
-          <br />
-          <span class="text-gray-700">{(original_object.total_distance / 1000).toFixed(2)} km</span>
-        </div>
-      </div>
-    </div>
-  </section>
+	<section class="container p-5">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("organizations")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{original_object.name} [#{params.orgid}]
+			<span data-id="org_actions_${editable.id}">
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_orgs
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
+				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
+				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
+					<button
+						on:click={() => {
+							import_modal_open = true;
+						}}
+						type="button"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+					>
+						{$_("import-runners")}
+					</button>
+				{/if}
+				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteOrganization}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-delete")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-organization")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						on:click={submit}
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</span>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="name" class="font-semibold text-gray-700">{$_("name")}</label>
+			<input
+				autocomplete="off"
+				placeholder={$_("name")}
+				type="text"
+				bind:value={editable.name}
+				name="name"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="contact" class="font-semibold text-gray-700"
+				>{$_("contact")}</label
+			>
+			<Select
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				itemFilter={(label, filterText, option) =>
+					label.toLowerCase().includes(filterText.toLowerCase()) ||
+					option.value.id.toString().startsWith(filterText.toLowerCase())}
+				items={contacts}
+				showChevron={true}
+				placeholder={$_("no-contact-selected")}
+				noOptionsMessage={$_("no-contact-found")}
+				bind:selectedValue={contact}
+				on:select={(selectedValue) =>
+					(editable.contact = selectedValue.detail.value)}
+				on:clear={() => (editable.contact = null)}
+			/>
+		</div>
+		<div>
+			<div class="flex items-start mt-2">
+				<div class="flex items-center h-5">
+					<input
+						bind:checked={editable.registrationEnabled}
+						id="toggle_selfservice_feature"
+						name="toggle_selfservice_feature"
+						type="checkbox"
+						class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+					/>
+				</div>
+				<div class="ml-3 text-sm">
+					<label
+						for="toggle_selfservice_feature"
+						class="font-semibold text-gray-700"
+						>{$_("selfservice-registration")}</label
+					>
+				</div>
+			</div>
+			<div>
+				{#if editable.registrationEnabled}
+					<div class="text-sm w-full mt-2">
+						<button on:click={copy} class="inline-flex w-full">
+							<p
+								name="token"
+								class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
+							>
+								{#if editable.registrationKey}
+									{registrationLink}
+								{:else}
+									{$_("you-have-to-save-your-changes-to-generate-a-link")}
+								{/if}
+							</p>
+							<div
+								class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 24 24"
+									width="24"
+									height="24"
+									><path fill="none" d="M0 0h24v24H0z" />
+									<path
+										fill="currentColor"
+										d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"
+									/></svg
+								>
+							</div>
+						</button>
+						{#if editable.registrationKey}
+							<p class="text-gray-500 text-xs">
+								{$_("click-to-copy-the-link-into-your-clipboard")}
+							</p>
+						{/if}
+					</div>
+				{/if}
+				<!--  -->
+				<div>
+					<div class="flex items-start mt-2">
+						<div class="flex items-center h-5">
+							<input
+								bind:checked={editable.address_checked}
+								id="toggle_address_checkbox"
+								name="toggle_address_checkbox"
+								type="checkbox"
+								class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+							/>
+						</div>
+						<div class="ml-3 text-sm">
+							<label
+								for="toggle_address_checkbox"
+								class="font-semibold text-gray-700">{$_("address")}</label
+							>
+						</div>
+					</div>
+				</div>
+				{#if editable.address_checked === true}
+					<div class="col-span-6">
+						<label
+							for="address1"
+							class="block text-sm font-medium text-gray-700"
+							>{$_("address")}</label
+						>
+						<input
+							autocomplete="off"
+							placeholder="Address"
+							class:border-red-500={!isAddress1Valid}
+							class:focus:border-red-500={!isAddress1Valid}
+							class:focus:ring-red-500={!isAddress1Valid}
+							bind:value={editable.address.address1}
+							type="text"
+							name="address1"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+						/>
+						{#if !isAddress1Valid}
+							<span
+								class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+							>
+								{$_("address-is-required")}
+							</span>
+						{/if}
+					</div>
+					<div class="col-span-6">
+						<label
+							for="address2"
+							class="block text-sm font-medium text-gray-700"
+							>{$_("apartment-suite-etc")}</label
+						>
+						<input
+							autocomplete="off"
+							placeholder={$_("apartment-suite-etc")}
+							bind:value={editable.address.address2}
+							type="text"
+							name="address2"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+						/>
+					</div>
+					<div class="col-span-6">
+						<label for="zipcode" class="block text-sm font-medium text-gray-700"
+							>{$_("zip-postal-code")}</label
+						>
+						<input
+							autocomplete="off"
+							placeholder={$_("zip-postal-code")}
+							class:border-red-500={!iszipcodevalid}
+							class:focus:border-red-500={!iszipcodevalid}
+							class:focus:ring-red-500={!iszipcodevalid}
+							bind:value={editable.address.postalcode}
+							type="text"
+							name="zipcode"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+						/>
+						{#if !iszipcodevalid}
+							<span
+								class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+							>
+								{$_("valid-zipcode-postal-code-is-required")}
+							</span>
+						{/if}
+					</div>
+					<div class="col-span-6">
+						<label for="city" class="block text-sm font-medium text-gray-700"
+							>{$_("city")}</label
+						>
+						<input
+							autocomplete="off"
+							placeholder={$_("city")}
+							class:border-red-500={!iscityvalid}
+							class:focus:border-red-500={!iscityvalid}
+							class:focus:ring-red-500={!iscityvalid}
+							bind:value={editable.address.city}
+							type="text"
+							name="city"
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+						/>
+						{#if !iscityvalid}
+							<span
+								class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+							>
+								{$_("valid-city-is-required")}
+							</span>
+						{/if}
+					</div>
+				{/if}
+				<div class="text-sm w-full mt-2">
+					<span class="font-semibold text-gray-700">{$_("distance")}</span>
+					<br />
+					<span class="text-gray-700"
+						>{(original_object.total_distance / 1000).toFixed(2)} km</span
+					>
+				</div>
+			</div>
+		</div>
+	</section>
 {:else}
-  {#await promise}
-    {$_("organization-detail-is-being-loaded")}
-  {:catch error}
-    <PromiseError />
-  {/await}
+	{#await promise}
+		{$_("organization-detail-is-being-loaded")}
+	{:catch error}
+		<PromiseError />
+	{/await}
 {/if}

src/components/orgs/OrgOverview.svelte

@@ -1,250 +1,244 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  let modal_open = false;
-  let delete_org = {};
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import store from "../../store";
-  import OrgsEmptyState from "./OrgsEmptyState.svelte";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import toast from "svelte-french-toast";
-  $: searchvalue = "";
-  $: active_deletes = [];
-  $: sponsoring_contracts_show = current_organizations.some(
-    (r) => r.is_selected === true
-  );
-  $: cards_show = current_organizations.some((r) => r.is_selected === true);
-  $: generate_orgs = current_organizations.filter(
-    (r) => r.is_selected === true
-  );
-  $: certificates_show = current_organizations.some(
-    (r) => r.is_selected === true
-  );
-  export let current_organizations = [];
+	import { _ } from "svelte-i18n";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	let modal_open = false;
+	let delete_org = {};
+	import { RunnerOrganizationService } from "@odit/lfk-client-js";
+	import store from "../../store";
+	import OrgsEmptyState from "./OrgsEmptyState.svelte";
+	import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import toast from "svelte-french-toast";
+	$: searchvalue = "";
+	$: active_deletes = [];
+	$: sponsoring_contracts_show = current_organizations.some(
+		(r) => r.is_selected === true
+	);
+	$: cards_show = current_organizations.some((r) => r.is_selected === true);
+	$: generate_orgs = current_organizations.filter(
+		(r) => r.is_selected === true
+	);
+	$: certificates_show = current_organizations.some(
+		(r) => r.is_selected === true
+	);
+	export let current_organizations = [];
 
-  const promise =
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      (val) => {
-        current_organizations = val;
-      }
-    );
+	const promise =
+		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+			(val) => {
+				current_organizations = val;
+			}
+		);
 </script>
 
 <ConfirmOrgDeletion
-  on:cancelDelete={(event) => {
-    modal_open = false;
-    active_deletes[event.detail.id] = false;
-  }}
-  bind:modal_open
-  bind:delete_org
+	on:cancelDelete={(event) => {
+		modal_open = false;
+		active_deletes[event.detail.id] = false;
+	}}
+	bind:modal_open
+	bind:delete_org
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
-  {#await promise}
-    <div
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert"
-    >
-      <p class="font-bold">{$_("organizations-are-being-loaded")}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    </div>
-  {:then}
-    {#if current_organizations.length === 0}
-      <OrgsEmptyState />
-    {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_("datatable.search")}
-        aria-label={$_("datatable.search")}
-        class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
-      />
-      <div class="h-12">
-        <GenerateSponsoringContracts
-          bind:sponsoring_contracts_show
-          bind:generate_orgs
-        />
-        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
-        <GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
-      </div>
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-      >
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
-            <tr class="odd:bg-white even:bg-gray-100">
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                <button
-                  on:click={() => {
-                    const newstate = !current_organizations.some(
-                      (r) => r.is_selected === true
-                    );
-                    current_organizations = current_organizations.map((r) => {
-                      r.is_selected = newstate;
-                      return r;
-                    });
-                  }}
-                  class="underline cursor-pointer select-none"
-                  >{#if current_organizations.some((r) => r.is_selected === true)}
-                    {$_("deselect-all")}
-                  {:else}{$_("select-all")}{/if}
-                </button>
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("name")}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("address")}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("contact")}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_("action")}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each current_organizations as o}
-              {#if Object.values(o)
-                .toString()
-                .toLowerCase()
-                .includes(searchvalue)}
-                <tr
-                  class="odd:bg-white even:bg-gray-100"
-                  data-rowid="org_{o.id}"
-                >
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <input
-                      bind:checked={o.is_selected}
-                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                    />
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {o.name}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {#if o.address.address1 !== null}
-                            {o.address.address1}<br />
-                            <!-- {o.address.address2 || ''}<br /> -->
-                            {o.address.postalcode}
-                            {o.address.city}
-                            {o.address.country}
-                          {/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {#if o.contact}
-                            <a
-                              href="../contacts/{o.contact.id}"
-                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                              >{o.contact.firstname}
-                              {o.contact.middlename || ""}
-                              {o.contact.lastname}</a
-                            >
-                          {:else}{$_("no-contact-specified")}{/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  {#if active_deletes[o.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                    >
-                      <button
-                        on:click={() => {
-                          active_deletes[o.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                        >{$_("cancel-delete")}</button
-                      >
-                      <button
-                        on:click={() => {
-                          toast.loading($_("deleting-organization"));
-                          RunnerOrganizationService.runnerOrganizationControllerRemove(
-                            o.id,
-                            false
-                          )
-                            .then((resp) => {
-                              current_organizations =
-                                current_organizations.filter(
-                                  (obj) => obj.id !== o.id
-                                );
-                              toast($_("organization-deleted"));
-                            })
-                            .catch((err) => {
-                              modal_open = true;
-                              delete_org = o;
-                            });
-                        }}
-                        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="./{o.id}"
-                        class="text-indigo-600 hover:text-indigo-900"
-                        >{$_("details")}</a
-                      >
-                      {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
-                        <button
-                          on:click={() => {
-                            active_deletes[o.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                          >{$_("delete")}</button
-                        >
-                      {/if}
-                    </td>
-                  {/if}
-                </tr>
-              {/if}
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  {:catch error}
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-      <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_("general_promise_error")}</b>
-        {error}
-      </span>
-    </div>
-  {/await}
+	{#await promise}
+		<div
+			class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+			role="alert"
+		>
+			<p class="font-bold">{$_("organizations-are-being-loaded")}</p>
+			<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+		</div>
+	{:then}
+		{#if current_organizations.length === 0}
+			<OrgsEmptyState />
+		{:else}
+			<input
+				type="search"
+				bind:value={searchvalue}
+				placeholder={$_("datatable.search")}
+				aria-label={$_("datatable.search")}
+				class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
+			/>
+			<div class="h-12">
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_orgs
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
+				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
+			</div>
+			<div
+				class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+			>
+				<table class="divide-y divide-gray-200 w-full">
+					<thead class="bg-gray-50">
+						<tr class="odd:bg-white even:bg-gray-100">
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								<button
+									on:click={() => {
+										const newstate = !current_organizations.some(
+											(r) => r.is_selected === true
+										);
+										current_organizations = current_organizations.map((r) => {
+											r.is_selected = newstate;
+											return r;
+										});
+									}}
+									class="underline cursor-pointer select-none"
+									>{#if current_organizations.some((r) => r.is_selected === true)}
+										{$_("deselect-all")}
+									{:else}{$_("select-all")}{/if}
+								</button>
+							</th>
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								{$_("name")}
+							</th>
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								{$_("address")}
+							</th>
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								{$_("contact")}
+							</th>
+							<th scope="col" class="relative px-6 py-3">
+								<span class="sr-only">{$_("action")}</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-gray-200">
+						{#each current_organizations as o}
+							{#if Object.values(o)
+								.toString()
+								.toLowerCase()
+								.includes(searchvalue)}
+								<tr
+									class="odd:bg-white even:bg-gray-100"
+									data-rowid="org_{o.id}"
+								>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<input
+											bind:checked={o.is_selected}
+											type="checkbox"
+											class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+										/>
+									</td>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="flex items-center">
+											<div class="text-sm font-medium text-gray-900">
+												{o.name}
+											</div>
+										</div>
+									</td>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="flex items-center">
+											<div class="text-sm font-medium text-gray-900">
+												{#if o.address.address1 !== null}
+													{o.address.address1}<br />
+													<!-- {o.address.address2 || ''}<br /> -->
+													{o.address.postalcode}
+													{o.address.city}
+													{o.address.country}
+												{/if}
+											</div>
+										</div>
+									</td>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="flex items-center">
+											<div class="text-sm font-medium text-gray-900">
+												{#if o.contact}
+													<a
+														href="../contacts/{o.contact.id}"
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+														>{o.contact.firstname}
+														{o.contact.middlename || ""}
+														{o.contact.lastname}</a
+													>
+												{:else}{$_("no-contact-specified")}{/if}
+											</div>
+										</div>
+									</td>
+									{#if active_deletes[o.id] === true}
+										<td
+											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+										>
+											<button
+												on:click={() => {
+													active_deletes[o.id] = false;
+												}}
+												tabindex="0"
+												class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+												>{$_("cancel-delete")}</button
+											>
+											<button
+												on:click={() => {
+													toast.loading($_("deleting-organization"));
+													RunnerOrganizationService.runnerOrganizationControllerRemove(
+														o.id,
+														false
+													)
+														.then((resp) => {
+															current_organizations =
+																current_organizations.filter(
+																	(obj) => obj.id !== o.id
+																);
+															toast($_("organization-deleted"));
+														})
+														.catch((err) => {
+															modal_open = true;
+															delete_org = o;
+														});
+												}}
+												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="./{o.id}"
+												class="text-indigo-600 hover:text-indigo-900"
+												>{$_("details")}</a
+											>
+											{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
+												<button
+													on:click={() => {
+														active_deletes[o.id] = true;
+													}}
+													tabindex="0"
+													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+													>{$_("delete")}</button
+												>
+											{/if}
+										</td>
+									{/if}
+								</tr>
+							{/if}
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	{:catch error}
+		<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+			<span class="inline-block align-middle mr-8">
+				<b class="capitalize">{$_("general_promise_error")}</b>
+				{error}
+			</span>
+		</div>
+	{/await}
 {/if}

src/components/orgs/Orgs.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("organizations")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}

src/components/pdf_generation/DocumentServer.ts

@@ -1,142 +1,150 @@
 class DocumentServer {
-    baseUrl: string;
-    apiKey: string;
+  baseUrl: string;
+  apiKey: string;
 
-    constructor(baseUrl: string, apiKey: string){
-        this.baseUrl = baseUrl;
-        this.apiKey = apiKey;
-    }
+  constructor(baseUrl: string, apiKey: string) {
+    this.baseUrl = baseUrl;
+    this.apiKey = apiKey;
+  }
 
-    async generateCards(cards: any[], locale: string) {
-        const generateCards = new Array<any>();
+  async generateCards(cards: any[], locale: string) {
+    const generateCards = new Array<any>();
 
-        for (let i = 0; i < cards.length; i++) {
-            const card = {
-                id: cards[i].id,
-                enabled: cards[i].enabled,
-                code: cards[i].code,
-                runner: {
-                    id: cards[i]?.runner?.id,
-                    first_name: cards[i]?.runner?.firstname,
-                    middle_name: cards[i]?.runner?.middlename,
-                    last_name: cards[i]?.runner?.lastname,
-                    group: {
-                        id: cards[i]?.runner?.group.id,
-                        name: cards[i]?.runner?.group.name,
-                        parent_group: {
-                            id: cards[i]?.runner?.group?.parentGroup?.id,
-                            name: cards[i]?.runner?.group?.parentGroup?.name,
-                        }
-                    }
-                }
-            }
-            generateCards.push(card)
-            
-        }
-
-        const response = await fetch(`${this.baseUrl}/v1/pdfs/cards?key=${this.apiKey}`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
+    for (let i = 0; i < cards.length; i++) {
+      const card = {
+        id: cards[i].id,
+        enabled: cards[i].enabled,
+        code: cards[i].code,
+        runner: {
+          id: cards[i]?.runner?.id,
+          first_name: cards[i]?.runner?.firstname,
+          middle_name: cards[i]?.runner?.middlename,
+          last_name: cards[i]?.runner?.lastname,
+          group: {
+            id: cards[i]?.runner?.group.id,
+            name: cards[i]?.runner?.group.name,
+            parent_group: {
+              id: cards[i]?.runner?.group?.parentGroup?.id,
+              name: cards[i]?.runner?.group?.parentGroup?.name,
             },
-            body: JSON.stringify({
-                locale,
-                cards: generateCards,
-            }),
-        });
-
-        const blob = await response.blob();
-        return blob;
+          },
+        },
+      };
+      generateCards.push(card);
     }
 
-    async generateContracts(runners: any[], locale: string) {
-        const generateRunners = new Array<any>();
+    const response = await fetch(
+      `${this.baseUrl}/v1/pdfs/cards?key=${this.apiKey}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          locale,
+          cards: generateCards,
+        }),
+      },
+    );
 
-        for (let i = 0; i < runners.length; i++) {
-            console.log(runners[i])
-            const card = {
-                id: runners[i].id,
-                first_name: runners[i].firstname,
-                middle_name: runners[i].middlename,
-                last_name: runners[i].lastname,
-                group: {
-                    id: runners[i].group.id,
-                    name: runners[i].group.name,
-                    parent_group: {
-                        id: runners[i]?.group?.parentGroup?.id,
-                        name: runners[i]?.group?.parentGroup?.name,
-                    }
-                }
-            }
-            generateRunners.push(card)
+    const blob = await response.blob();
+    return blob;
+  }
 
-        }
+  async generateContracts(runners: any[], locale: string) {
+    const generateRunners = new Array<any>();
 
-        const response = await fetch(`${this.baseUrl}/v1/pdfs/contracts?key=${this.apiKey}`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                locale,
-                runners: generateRunners,
-            }),
-        });
-
-        const blob = await response.blob();
-        return blob;
+    for (let i = 0; i < runners.length; i++) {
+      console.log(runners[i]);
+      const card = {
+        id: runners[i].id,
+        first_name: runners[i].firstname,
+        middle_name: runners[i].middlename,
+        last_name: runners[i].lastname,
+        group: {
+          id: runners[i].group.id,
+          name: runners[i].group.name,
+          parent_group: {
+            id: runners[i]?.group?.parentGroup?.id,
+            name: runners[i]?.group?.parentGroup?.name,
+          },
+        },
+      };
+      generateRunners.push(card);
     }
 
-    async generateCertificates(runners: any[], locale: string) {
-        const generateRunners = new Array<any>();
+    const response = await fetch(
+      `${this.baseUrl}/v1/pdfs/contracts?key=${this.apiKey}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          locale,
+          runners: generateRunners,
+        }),
+      },
+    );
 
-        for (let i = 0; i < runners.length; i++) {
-            const certificate = {
-                id: runners[i].id,
-                first_name: runners[i].firstname,
-                middle_name: runners[i].middlename,
-                last_name: runners[i].lastname,
-                group: {
-                    id: runners[i].group.id,
-                    name: runners[i].group.name,
-                    parent_group: {
-                        id: runners[i]?.group?.parentGroup?.id,
-                        name: runners[i]?.group?.parentGroup?.name,
-                    }
-                },
-                distance: runners[i].distance,
-                distance_donations: runners[i].distanceDonations.map((distanceDonation: any) =>{
-                    return {
-                            id: distanceDonation.id,
-                            amount: distanceDonation.amount,
-                            amount_per_distance: distanceDonation.amountPerDistance,
-                            donor: {
-                                id: distanceDonation.donor.id,
-                                first_name: distanceDonation.donor.firstname,
-                                middle_name: distanceDonation.donor.middlename,
-                                last_name: distanceDonation.donor.lastname,
-                            }
-                        }
-                }),
-            }
-            generateRunners.push(certificate)
+    const blob = await response.blob();
+    return blob;
+  }
 
-        }
+  async generateCertificates(runners: any[], locale: string) {
+    const generateRunners = new Array<any>();
 
-        const response = await fetch(`${this.baseUrl}/v1/pdfs/certificates?key=${this.apiKey}`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                locale,
-                runners: generateRunners,
-            }),
-        });
-
-        const blob = await response.blob();
-        return blob;
+    for (let i = 0; i < runners.length; i++) {
+      const certificate = {
+        id: runners[i].id,
+        first_name: runners[i].firstname,
+        middle_name: runners[i].middlename,
+        last_name: runners[i].lastname,
+        group: {
+          id: runners[i].group.id,
+          name: runners[i].group.name,
+          parent_group: {
+            id: runners[i]?.group?.parentGroup?.id,
+            name: runners[i]?.group?.parentGroup?.name,
+          },
+        },
+        distance: runners[i].distance,
+        distance_donations: runners[i].distanceDonations.map(
+          (distanceDonation: any) => {
+            return {
+              id: distanceDonation.id,
+              amount: distanceDonation.amount,
+              amount_per_distance: distanceDonation.amountPerDistance,
+              donor: {
+                id: distanceDonation.donor.id,
+                first_name: distanceDonation.donor.firstname,
+                middle_name: distanceDonation.donor.middlename,
+                last_name: distanceDonation.donor.lastname,
+              },
+            };
+          },
+        ),
+      };
+      generateRunners.push(certificate);
     }
+
+    const response = await fetch(
+      `${this.baseUrl}/v1/pdfs/certificates?key=${this.apiKey}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          locale,
+          runners: generateRunners,
+        }),
+      },
+    );
+
+    const blob = await response.blob();
+    return blob;
+  }
 }
 
 export default DocumentServer;

src/components/pdf_generation/GenerateRunnerCards.svelte

@@ -1,244 +1,202 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import {
-    RunnerCardService,
-    RunnerOrganizationService,
-    RunnerTeamService,
-  } from "@odit/lfk-client-js";
-  import toast from 'svelte-french-toast'
-  import DocumentServer from "./DocumentServer.ts"
+	import { _ } from "svelte-i18n";
+	import {
+		RunnerCardService,
+		RunnerOrganizationService,
+		RunnerTeamService,
+	} from "@odit/lfk-client-js";
+	import toast from "svelte-french-toast";
+	import DocumentServer from "./DocumentServer.ts";
 
-  import { init } from "@paralleldrive/cuid2";
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
+	import { init } from "@paralleldrive/cuid2";
+	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+	const documentServer = new DocumentServer(
+		config.baseurl_documentserver,
+		config.documentserver_key
+	);
 
-  export let cards_show = false;
-  export let generate_cards = [];
-  export let generate_runners = [];
-  export let generate_orgs = [];
-  export let generate_teams = [];
-  $: cards_dropdown_open = false;
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
-    ) {
-      cards_dropdown_open = false;
-    }
-  });
+	export let cards_show = false;
+	export let generate_cards = [];
+	export let generate_runners = [];
+	export let generate_orgs = [];
+	export let generate_teams = [];
 
-  function download (blob, fileName){
-    const url = window.URL.createObjectURL(blob);
-    let a = document.createElement("a");
-    a.href = url;
-    a.download = fileName;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    toast.dismiss();
-    toast($_("pdf-successfully-generated"));
-  }
+	function download(blob, fileName) {
+		const url = window.URL.createObjectURL(blob);
+		let a = document.createElement("a");
+		a.href = url;
+		a.download = fileName;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+		toast.dismiss();
+		toast($_("pdf-successfully-generated"));
+	}
 
-  function generateRunnerCards(locale) {
-    cards_dropdown_open = false;
+	function generateRunnerCards(locale) {
+		if (generate_orgs.length > 0) {
+			generateOrgCards(locale);
+		} else if (generate_teams.length > 0) {
+			generateTeamCards(locale);
+		} else if (generate_runners.length > 0) {
+			generateRunnersCards(locale);
+		} else {
+			generateCards(locale);
+		}
+	}
 
-    if (generate_orgs.length > 0) {
-      generateOrgCards(locale);
-    } else if (generate_teams.length > 0) {
-      generateTeamCards(locale);
-    } else if (generate_runners.length > 0) {
-      generateRunnersCards(locale);
-    } else {
-      generateCards(locale);
-    }
-  }
+	function generateCards(locale) {
+		toast.loading($_("generating-pdf"));
+		documentServer
+			.generateCards(generate_cards, locale)
+			.then((blob) => {
+				download(blob, `${$_("runnercards")}-${locale}-${createId()}.pdf`);
+			})
+			.catch((err) => {
+				console.error(err);
+			});
+	}
 
-  function generateCards(locale) {
-    toast.loading($_("generating-pdf"));
-    documentServer.generateCards(generate_cards, locale)
-      .then((blob) => {
-        download(blob, `${$_("runnercards")}-${locale}-${createId()}.pdf`);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }
+	async function generateRunnersCards(locale) {
+		toast.loading($_("generating-pdf"));
+		const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+		let cards = [];
+		for (let runner of generate_runners) {
+			let card = current_cards.find((c) => c.runner?.id == runner.id);
+			if (!card) {
+				card = await RunnerCardService.runnerCardControllerPost({
+					runner: runner.id,
+				});
+			}
+			cards.push(card);
+		}
+		documentServer
+			.generateCards(cards, locale)
+			.then((blob) => {
+				let fileName = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
+				if (generate_runners.length == 1) {
+					fileName = `${$_("runnercards")}_${generate_runners[0].firstname}_${
+						generate_runners[0].lastname
+					}-${locale}-${createId()}.pdf`;
+				}
+				download(blob, fileName);
+			})
+			.catch((err) => {});
+	}
 
-  async function generateRunnersCards(locale) {
-    toast.loading($_("generating-pdf"));
-    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
-    let cards = [];
-    for (let runner of generate_runners) {
-      let card = current_cards.find((c) => c.runner?.id == runner.id);
-      if (!card) {
-        card = await RunnerCardService.runnerCardControllerPost({
-          runner: runner.id,
-        });
-      }
-      cards.push(card);
-    }
-    documentServer.generateCards(cards, locale)
-      .then((blob) => {
-        let fileName = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
-        if (generate_runners.length == 1) {
-          fileName = `${$_("runnercards")}_${generate_runners[0].firstname}_${
-            generate_runners[0].lastname
-          }-${locale}-${createId()}.pdf`;
-        }
-        download(blob, fileName);
-      })
-      .catch((err) => {});
-  }
+	async function generateTeamCards(locale) {
+		toast.loading($_("generating-pdfs"));
+		let count = 0;
+		const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+		for (const t of generate_teams) {
+			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+				t.id
+			);
+			let cards = [];
+			for (let runner of runners) {
+				let card = current_cards.find((c) => c.runner?.id == runner.id);
+				if (!card) {
+					card = await RunnerCardService.runnerCardControllerPost({
+						runner: runner.id,
+					});
+				}
+				cards.push(card);
+			}
+			documentServer
+				.generateCards(cards, locale)
+				.then((blob) => {
+					download(
+						blob,
+						`${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+		}
+	}
 
-  async function generateTeamCards(locale) {
-    toast.loading($_("generating-pdfs"));
-    let count = 0;
-    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
-    for (const t of generate_teams) {
-      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-        t.id
-      );
-      let cards = [];
-      for (let runner of runners) {
-        let card = current_cards.find((c) => c.runner?.id == runner.id);
-        if (!card) {
-          card = await RunnerCardService.runnerCardControllerPost({
-            runner: runner.id,
-          });
-        }
-        cards.push(card);
-      }
-      documentServer.generateCards(cards, locale)
-        .then((blob) => {
-          download(blob, `${$_("runnercards")}_${
-            t.name
-          }-${locale}-${createId()}.pdf`)
-        })
-        .catch((err) => {});
-    }
-  }
-
-  async function generateOrgCards(locale) {
-    toast.loading($_("generating-pdfs"));
-    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
-    let count = 0;
-    let count_orgs = 0;
-    for (const o of generate_orgs) {
-      count_orgs++;
-      let count = 0;
-      let runners =
-        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-          o.id,
-          true
-        );
-      let cards = [];
-      for (let runner of runners) {
-        let card = current_cards.find((c) => c.runner?.id == runner.id);
-        if (!card) {
-          card = await RunnerCardService.runnerCardControllerPost({
-            runner: runner.id,
-          });
-        }
-        cards.push(card);
-      }
-      await documentServer.generateCards(cards, locale)
-        .then((blob) => {
-          download(blob, `${$_("runnercards")}_${
-            o.name
-          }_direct-${locale}-${createId()}.pdf`)
-        })
-        .catch((err) => {});
-      for (const t of o.teams) {
-        count++;
-        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-          t.id
-        );
-        let cards = [];
-        for (let runner of runners) {
-          let card = current_cards.find((c) => c.runner?.id == runner.id);
-          if (!card) {
-            card = await RunnerCardService.runnerCardControllerPost({
-              runner: runner.id,
-            });
-          }
-          cards.push(card);
-        }
-        await documentServer.generateCards(cards, locale)
-          .then((blob) => {
-            download(blob, `${$_("runnercards")}_${o.name}_${
-              t.name
-            }-${locale}-${createId()}.pdf`)
-          })
-          .catch((err) => {});
-      }
-    }
-  }
+	async function generateOrgCards(locale) {
+		toast.loading($_("generating-pdfs"));
+		const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+		let count = 0;
+		let count_orgs = 0;
+		for (const o of generate_orgs) {
+			count_orgs++;
+			let count = 0;
+			let runners =
+				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+					o.id,
+					false
+				);
+			let cards = [];
+			for (let runner of runners) {
+				let card = current_cards.find((c) => c.runner?.id == runner.id);
+				if (!card) {
+					card = await RunnerCardService.runnerCardControllerPost({
+						runner: runner.id,
+					});
+				}
+				cards.push(card);
+			}
+			await documentServer
+				.generateCards(cards, locale)
+				.then((blob) => {
+					download(
+						blob,
+						`${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+			for (const t of o.teams) {
+				count++;
+				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+					t.id
+				);
+				let cards = [];
+				for (let runner of runners) {
+					let card = current_cards.find((c) => c.runner?.id == runner.id);
+					if (!card) {
+						card = await RunnerCardService.runnerCardControllerPost({
+							runner: runner.id,
+						});
+					}
+					cards.push(card);
+				}
+				await documentServer
+					.generateCards(cards, locale)
+					.then((blob) => {
+						download(
+							blob,
+							`${$_("runnercards")}_${o.name}_${
+								t.name
+							}-${locale}-${createId()}.pdf`
+						);
+					})
+					.catch((err) => {});
+			}
+		}
+	}
 </script>
 
 {#if cards_show}
-  <div id="cards:dropdown" class="relative inline-block">
-    <div>
-      <button
-        on:click={() => {
-          cards_dropdown_open = !cards_dropdown_open;
-        }}
-        type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
-        aria-haspopup="true"
-        aria-expanded="true"
-      >
-        {$_("generate-runnercards")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="-mr-1 ml-2 h-5 w-5"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
-          /></svg
-        >
-      </button>
-    </div>
-    {#if cards_dropdown_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="cards:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
-          <button
-            on:click={() => {
-              generateRunnerCards("de");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("german")}
-          </button>
-          <button
-            on:click={() => {
-              generateRunnerCards("en");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("english")}
-          </button>
-        </div>
-      </div>
-    {/if}
-  </div>
+	<div>
+		<p class="text-base">{$_("generate-runnercards")}</p>
+		<div class="inline-flex rounded-lg shadow-2xs">
+			<button
+				on:click={() => {
+					generateRunnerCards("de");
+				}}
+				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+			>
+				DE
+			</button>
+			<button
+				on:click={() => {
+					generateRunnerCards("en");
+				}}
+				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+			>
+				EN
+			</button>
+		</div>
+	</div>
 {/if}

src/components/pdf_generation/GenerateRunnerCertificates.svelte

@@ -1,224 +1,180 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import {
-    DonationService,
-    RunnerTeamService,
-    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
-  import { init } from "@paralleldrive/cuid2";
-  import toast from "svelte-french-toast";
-  import DocumentServer from "./DocumentServer";
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
+	import { _ } from "svelte-i18n";
+	import {
+		DonationService,
+		RunnerTeamService,
+		RunnerOrganizationService,
+	} from "@odit/lfk-client-js";
+	import { init } from "@paralleldrive/cuid2";
+	import toast from "svelte-french-toast";
+	import DocumentServer from "./DocumentServer";
+	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+	const documentServer = new DocumentServer(
+		config.baseurl_documentserver,
+		config.documentserver_key
+	);
 
+	export let certificates_show = false;
+	export let generate_runners = [];
+	export let generate_orgs = [];
+	export let generate_teams = [];
 
-  export let certificates_show = false;
-  export let generate_runners = [];
-  export let generate_orgs = [];
-  export let generate_teams = [];
-  $: certificates_dropdown_open = false;
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
-    ) {
-      certificates_dropdown_open = false;
-    }
-  });
+	function generateCertificates(locale) {
+		if (generate_orgs.length > 0) {
+			generateOrgCertificates(locale);
+		} else if (generate_teams.length > 0) {
+			generateTeamCertificates(locale);
+		} else {
+			generateRunnerCertificates(locale);
+		}
+	}
+	function download(blob, fileName) {
+		const url = window.URL.createObjectURL(blob);
+		let a = document.createElement("a");
+		a.href = url;
+		a.download = fileName;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+		toast.dismiss();
+		toast($_("pdf-successfully-generated"));
+	}
 
-  function generateCertificates(locale) {
-    certificates_dropdown_open = false;
+	async function generateRunnerCertificates(locale) {
+		toast.loading($_("generating-pdf"));
+		const current_donations =
+			(await DonationService.donationControllerGetAll()) || [];
+		let certificateRunners = [];
+		for (let runner of generate_runners) {
+			runner.distanceDonations =
+				current_donations.filter((d) => d.runner?.id == runner.id) || [];
+			certificateRunners.push(runner);
+		}
+		documentServer
+			.generateCertificates(certificateRunners, locale)
+			.then((blob) => {
+				let fileName = `${$_("certificates")}-${locale}.pdf`;
+				if (generate_runners.length == 1) {
+					fileName = `${$_("certificates")}_${
+						generate_runners[0].firstname
+					}_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
+				}
+				download(blob, fileName);
+			})
+			.catch((err) => {});
+	}
 
-    if (generate_orgs.length > 0) {
-      generateOrgCertificates(locale);
-    } else if (generate_teams.length > 0) {
-      generateTeamCertificates(locale);
-    } else {
-      generateRunnerCertificates(locale);
-    }
-  }
-  function download (blob, fileName){
-    const url = window.URL.createObjectURL(blob);
-    let a = document.createElement("a");
-    a.href = url;
-    a.download = fileName;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    toast.dismiss();
-    toast($_("pdf-successfully-generated"));
-  }
+	async function generateTeamCertificates(locale) {
+		toast.loading($_("generating-pdfs"));
+		let count = 0;
+		const current_donations =
+			(await DonationService.donationControllerGetAll()) || [];
+		for (const t of generate_teams) {
+			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+				t.id
+			);
+			let certificateRunners = [];
+			for (let runner of runners) {
+				runner.distanceDonations =
+					current_donations.filter((d) => d.runner?.id == runner.id) || [];
+				certificateRunners.push(runner);
+			}
+			documentServer
+				.generateCertificates(certificateRunners, locale)
+				.then((blob) => {
+					count++;
+					download(
+						blob,
+						`${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+		}
+	}
 
-  async function generateRunnerCertificates(locale) {
-    toast.loading($_("generating-pdf"));
-    const current_donations =
-      (await DonationService.donationControllerGetAll()) || [];
-    let certificateRunners = [];
-    for (let runner of generate_runners) {
-      runner.distanceDonations =
-        current_donations.filter((d) => d.runner?.id == runner.id) || [];
-      certificateRunners.push(runner);
-    }
-    documentServer.generateCertificates(certificateRunners, locale)
-      .then((blob) => {
-        let fileName = `${$_("certificates")}-${locale}.pdf`
-        if (generate_runners.length == 1) {
-          fileName = `${$_("certificates")}_${
-            generate_runners[0].firstname
-          }_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
-        }
-        download(blob, fileName);
-      })
-      .catch((err) => {});
-  }
-
-  async function generateTeamCertificates(locale) {
-    toast.loading($_("generating-pdfs"));
-    let count = 0;
-    const current_donations =
-      (await DonationService.donationControllerGetAll()) || [];
-    for (const t of generate_teams) {
-      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-        t.id
-      );
-      let certificateRunners = [];
-      for (let runner of runners) {
-        runner.distanceDonations =
-          current_donations.filter((d) => d.runner?.id == runner.id) || [];
-        certificateRunners.push(runner);
-      }
-      documentServer.generateCertificates(certificateRunners, locale)
-        .then((blob) => {
-          count++;
-          download(blob, `${$_("certificates")}_${
-            t.name
-          }-${locale}-${createId()}.pdf`)
-        })
-        .catch((err) => {});
-    }
-  }
-
-  async function generateOrgCertificates(locale) {
-    toast.loading($_("generating-pdfs"));
-    const current_donations =
-      (await DonationService.donationControllerGetAll()) || [];
-    let count = 0;
-    let count_orgs = 0;
-    for (const o of generate_orgs) {
-      count_orgs++;
-      let count = 0;
-      let runners =
-        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-          o.id,
-          true
-        );
-      let certificateRunners = [];
-      for (let runner of runners) {
-        runner.distanceDonations =
-          current_donations.filter((d) => d.runner?.id == runner.id) || [];
-        certificateRunners.push(runner);
-      }
-      await documentServer.generateCertificates(certificateRunners, locale)
-        .then((blob) => {
-          download(blob, `${$_("certificates")}_${
-            o.name
-          }-${locale}-${createId()}.pdf`)
-        })
-        .catch((err) => {});
-      for (const t of o.teams) {
-        count++;
-        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-          t.id
-        );
-        let certificateRunners = [];
-        for (let runner of runners) {
-          runner.distanceDonations =
-            current_donations.filter((d) => d.runner?.id == runner.id) || [];
-          certificateRunners.push(runner);
-        }
-        await documentServer.generateCertificates(certificateRunners, locale)
-          .then((blob) => {
-            download(blob, `${$_("certificates")}_${o.name}_${
-              t.name
-            }-${locale}-${createId()}.pdf`)
-            if (
-              count === o.teams.length &&
-              count_orgs === generate_orgs.length
-            ) {
-              toast.dismiss();
-              toast($_("pdfs-successfully-generated"));
-            }
-          })
-          .catch((err) => {});
-      }
-    }
-  }
+	async function generateOrgCertificates(locale) {
+		toast.loading($_("generating-pdfs"));
+		const current_donations =
+			(await DonationService.donationControllerGetAll()) || [];
+		let count = 0;
+		let count_orgs = 0;
+		for (const o of generate_orgs) {
+			count_orgs++;
+			let count = 0;
+			let runners =
+				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+					o.id,
+					false
+				);
+			let certificateRunners = [];
+			for (let runner of runners) {
+				runner.distanceDonations =
+					current_donations.filter((d) => d.runner?.id == runner.id) || [];
+				certificateRunners.push(runner);
+			}
+			await documentServer
+				.generateCertificates(certificateRunners, locale)
+				.then((blob) => {
+					download(
+						blob,
+						`${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+			for (const t of o.teams) {
+				count++;
+				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+					t.id
+				);
+				let certificateRunners = [];
+				for (let runner of runners) {
+					runner.distanceDonations =
+						current_donations.filter((d) => d.runner?.id == runner.id) || [];
+					certificateRunners.push(runner);
+				}
+				await documentServer
+					.generateCertificates(certificateRunners, locale)
+					.then((blob) => {
+						download(
+							blob,
+							`${$_("certificates")}_${o.name}_${
+								t.name
+							}-${locale}-${createId()}.pdf`
+						);
+						if (
+							count === o.teams.length &&
+							count_orgs === generate_orgs.length
+						) {
+							toast.dismiss();
+							toast($_("pdfs-successfully-generated"));
+						}
+					})
+					.catch((err) => {});
+			}
+		}
+	}
 </script>
 
 {#if certificates_show}
-  <div id="certificates:dropdown" class="relative inline-block">
-    <div>
-      <button
-        on:click={() => {
-          certificates_dropdown_open = !certificates_dropdown_open;
-        }}
-        type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
-        aria-haspopup="true"
-        aria-expanded="true"
-      >
-        {$_("generate-runner-certificates")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="-mr-1 ml-2 h-5 w-5"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
-          /></svg
-        >
-      </button>
-    </div>
-    {#if certificates_dropdown_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="certificates:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
-          <button
-            on:click={() => {
-              generateCertificates("de");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("german")}
-          </button>
-          <button
-            on:click={() => {
-              generateCertificates("en");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("english")}
-          </button>
-        </div>
-      </div>
-    {/if}
-  </div>
+	<div>
+		<p class="text-base">{$_("generate-runner-certificates")}</p>
+		<div class="inline-flex rounded-lg shadow-2xs">
+			<button
+				on:click={() => {
+					generateCertificates("de");
+				}}
+				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+			>
+				DE
+			</button>
+			<button
+				on:click={() => {
+					generateCertificates("en");
+				}}
+				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+			>
+				EN
+			</button>
+		</div>
+	</div>
 {/if}

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -1,188 +1,143 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import {
-    RunnerOrganizationService,
-    RunnerTeamService,
-  } from "@odit/lfk-client-js";
-  import DocumentServer from "./DocumentServer";
-  import { init } from "@paralleldrive/cuid2";
-  import toast from "svelte-french-toast";
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
+	import { _ } from "svelte-i18n";
+	import {
+		RunnerOrganizationService,
+		RunnerTeamService,
+	} from "@odit/lfk-client-js";
+	import DocumentServer from "./DocumentServer";
+	import { init } from "@paralleldrive/cuid2";
+	import toast from "svelte-french-toast";
+	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+	const documentServer = new DocumentServer(
+		config.baseurl_documentserver,
+		config.documentserver_key
+	);
 
+	export let sponsoring_contracts_show = false;
+	export let generate_runners = [];
+	export let generate_orgs = [];
+	export let generate_teams = [];
 
-  export let sponsoring_contracts_show = false;
-  export let generate_runners = [];
-  export let generate_orgs = [];
-  export let generate_teams = [];
-  $: sponsoring_contracts_download_open = false;
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    ) {
-      sponsoring_contracts_download_open = false;
-    }
-  });
+	function generateSponsoringContract(locale) {
+		if (generate_orgs.length > 0) {
+			generateOrgContracts(locale);
+		} else if (generate_teams.length > 0) {
+			generateTeamContracts(locale);
+		} else {
+			generateRunnerContracts(locale);
+		}
+	}
+	function download(blob, fileName) {
+		const url = window.URL.createObjectURL(blob);
+		let a = document.createElement("a");
+		a.href = url;
+		a.download = fileName;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+		toast.dismiss();
+		toast($_("pdf-successfully-generated"));
+	}
 
-  function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
+	async function generateTeamContracts(locale) {
+		toast.loading($_("generating-pdfs"));
+		let count = 0;
+		for (const t of generate_teams) {
+			count++;
+			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+				t.id
+			);
+			documentServer
+				.generateContracts(runners, locale)
+				.then((blob) => {
+					download(
+						blob,
+						`${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+		}
+	}
 
-    if (generate_orgs.length > 0) {
-      generateOrgContracts(locale);
-    } else if (generate_teams.length > 0) {
-      generateTeamContracts(locale);
-    } else {
-      generateRunnerContracts(locale);
-    }
-  }
-  function download (blob, fileName){
-    const url = window.URL.createObjectURL(blob);
-    let a = document.createElement("a");
-    a.href = url;
-    a.download = fileName;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    toast.dismiss();
-    toast($_("pdf-successfully-generated"));
-  }
+	async function generateOrgContracts(locale) {
+		toast.loading($_("generating-pdf"));
+		let count_orgs = 0;
+		for (const o of generate_orgs) {
+			count_orgs++;
+			let count = 0;
+			let runners =
+				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+					o.id,
+					false
+				);
+			await documentServer
+				.generateContracts(runners, locale)
+				.then((blob) => {
+					download(
+						blob,
+						`${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+			for (const t of o.teams) {
+				count++;
+				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+					t.id
+				);
+				await documentServer
+					.generateContracts(runners, locale)
+					.then((blob) => {
+						download(
+							blob,
+							`${$_("sponsorings")}_${o.name}_${
+								t.name
+							}-${locale}-${createId()}.pdf`
+						);
+					})
+					.catch((err) => {});
+			}
+		}
+	}
 
-  async function generateTeamContracts(locale) {
-    toast.loading($_("generating-pdfs"));
-    let count = 0;
-    for (const t of generate_teams) {
-      count++;
-      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-        t.id
-      );
-      documentServer.generateContracts(runners, locale)
-        .then((blob) => {
-          download(blob, `${$_("sponsorings")}_${
-            t.name
-          }-${locale}-${createId()}.pdf`)
-        })
-        .catch((err) => {});
-    }
-  }
-
-  async function generateOrgContracts(locale) {
-    toast.loading($_("generating-pdf"));
-    let count_orgs = 0;
-    for (const o of generate_orgs) {
-      count_orgs++;
-      let count = 0;
-      let runners =
-        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-          o.id,
-          true
-        );
-      await documentServer.generateContracts(runners, locale)
-        .then((blob) => {
-          download(blob, `${$_("sponsorings")}_${
-            o.name
-          }_direct-${locale}-${createId()}.pdf`)
-        })
-        .catch((err) => {});
-      for (const t of o.teams) {
-        count++;
-        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-          t.id
-        );
-        await documentServer.generateContracts(runners, locale)
-          .then((blob) => {
-            download(blob, `${$_("sponsorings")}_${o.name}_${
-              t.name
-            }-${locale}-${createId()}.pdf`)
-          })
-          .catch((err) => {});
-      }
-    }
-  }
-
-  function generateRunnerContracts(locale) {
-    toast.loading($_("generating-pdf"));
-    documentServer.generateContracts(generate_runners, locale)
-      .then((blob) => {
-        let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf`
-        if (generate_runners.length == 1) {
-          fileName= `${$_("sponsorings")}_${generate_runners[0].firstname}_${
-            generate_runners[0].lastname
-          }-${locale}-${createId()}.pdf`;
-        }
-        download(blob, fileName);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }
+	function generateRunnerContracts(locale) {
+		toast.loading($_("generating-pdf"));
+		documentServer
+			.generateContracts(generate_runners, locale)
+			.then((blob) => {
+				let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
+				if (generate_runners.length == 1) {
+					fileName = `${$_("sponsorings")}_${generate_runners[0].firstname}_${
+						generate_runners[0].lastname
+					}-${locale}-${createId()}.pdf`;
+				}
+				download(blob, fileName);
+			})
+			.catch((err) => {
+				console.error(err);
+			});
+	}
 </script>
 
 {#if sponsoring_contracts_show}
-  <div id="sponsoring:dropdown" class="relative inline-block">
-    <div>
-      <button
-        on:click={() => {
-          sponsoring_contracts_download_open =
-            !sponsoring_contracts_download_open;
-        }}
-        type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
-        aria-haspopup="true"
-        aria-expanded="true"
-      >
-        {$_("generate-sponsoring-contracts")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="-mr-1 ml-2 h-5 w-5"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
-          /></svg
-        >
-      </button>
-    </div>
-    {#if sponsoring_contracts_download_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="sponsoring:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
-          <button
-            on:click={() => {
-              generateSponsoringContract("de");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("german")}
-          </button>
-          <button
-            on:click={() => {
-              generateSponsoringContract("en");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("english")}
-          </button>
-        </div>
-      </div>
-    {/if}
-  </div>
+	<div>
+		<p class="text-base">{$_("generate-sponsoring-contracts")}</p>
+		<div class="inline-flex rounded-lg shadow-2xs">
+			<button
+				on:click={() => {
+					generateSponsoringContract("de");
+				}}
+				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+			>
+				DE
+			</button>
+			<button
+				on:click={() => {
+					generateSponsoringContract("en");
+				}}
+				class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-blue-600 text-white shadow-2xs hover:bg-blue-800 focus:outline-hidden focus:bg-blue-800 disabled:opacity-50 disabled:pointer-events-none"
+			>
+				EN
+			</button>
+		</div>
+	</div>
 {/if}

src/components/presets/Table.svelte

@@ -66,7 +66,7 @@
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
                 <span
-                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
                 >
                   Active
                 </span>

src/components/runners/AddRunnerModal.svelte

@@ -189,7 +189,7 @@
                     bind:this={firstname_input}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -212,7 +212,7 @@
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -231,7 +231,7 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -248,7 +248,7 @@
                     >{$_("team")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id
@@ -281,7 +281,7 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isPhoneValidOrEmpty}
                     <span
@@ -309,7 +309,7 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValidOrEmpty}
                     <span

src/components/runners/ImportRunnerModal.svelte

@@ -268,7 +268,7 @@
                 <select
                   name="team"
                   bind:value={selected_org}
-                  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                 >
                   {#each passed_orgs as o}
                     <option value={o.id}>{o.name}</option>
@@ -279,7 +279,7 @@
               {#if opened_from === "RunnerOverview"}
                 <p>{$_("group")}</p>
                 <Select
-                  containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   itemFilter={(label, filterText, option) =>
                     label.toLowerCase().includes(filterText.toLowerCase()) ||
                     option.id.value

src/components/runners/RunnerDetail.svelte

@@ -1,315 +1,298 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import store from "../../store";
-  import {
-    RunnerService,
-    RunnerTeamService,
-    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
-  import PromiseError from "../base/PromiseError.svelte";
-  import isEmail from "validator/es/lib/isEmail";
-  import Select from "svelte-select";
-  import toast from "svelte-french-toast";
-  let data_loaded = false;
-  export let params;
-  const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
-  $: delete_triggered = false;
-  $: original_data_pdf = {};
-  $: original_data = {};
-  $: editable = {};
-  $: group = {};
-  $: changes_performed = !(
-    JSON.stringify(original_data) == JSON.stringify(editable)
-  );
-  $: isEmailValid =
-    (editable.email || "") === "" ||
-    (editable.email && isEmail(editable.email || ""));
-  $: isFirstnameValid = editable.firstname !== "";
-  $: isLastnameValid = editable.lastname !== "";
-  $: save_enabled =
-    changes_performed &&
-    isFirstnameValid &&
-    isLastnameValid &&
-    isEmailValid &&
-    editable.group != null;
-  $: sponsoring_contracts_show = true;
-  $: cards_show = true;
-  $: certificates_show = true;
-  $: generate_runners = [original_data_pdf];
-  runner_promise.then((data) => {
-    data_loaded = true;
-    original_data_pdf = Object.assign(original_data_pdf, data);
-    data.group = data.group.id;
-    original_data = Object.assign(original_data, data);
-    editable = Object.assign(editable, original_data);
+	import { _ } from "svelte-i18n";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import store from "../../store";
+	import {
+		RunnerService,
+		RunnerTeamService,
+		RunnerOrganizationService,
+	} from "@odit/lfk-client-js";
+	import PromiseError from "../base/PromiseError.svelte";
+	import isEmail from "validator/es/lib/isEmail";
+	import Select from "svelte-select";
+	import toast from "svelte-french-toast";
+	let data_loaded = false;
+	export let params;
+	const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
+	$: delete_triggered = false;
+	$: original_data_pdf = {};
+	$: original_data = {};
+	$: editable = {};
+	$: group = {};
+	$: changes_performed = !(
+		JSON.stringify(original_data) == JSON.stringify(editable)
+	);
+	$: isEmailValid =
+		(editable.email || "") === "" ||
+		(editable.email && isEmail(editable.email || ""));
+	$: isFirstnameValid = editable.firstname !== "";
+	$: isLastnameValid = editable.lastname !== "";
+	$: save_enabled =
+		changes_performed &&
+		isFirstnameValid &&
+		isLastnameValid &&
+		isEmailValid &&
+		editable.group != null;
+	$: sponsoring_contracts_show = true;
+	$: cards_show = true;
+	$: certificates_show = true;
+	$: generate_runners = [original_data_pdf];
+	runner_promise.then((data) => {
+		data_loaded = true;
+		original_data_pdf = Object.assign(original_data_pdf, data);
+		data.group = data.group.id;
+		original_data = Object.assign(original_data, data);
+		editable = Object.assign(editable, original_data);
 
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      (val) => {
-        const orgs = val.map((r) => {
-          return { label: r.name, value: r };
-        });
-        groups = groups.concat(orgs);
-        RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-          const teams = val.map((r) => {
-            return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
-          });
-          groups = groups.concat(teams);
-          group = groups.find((g) => g.value.id == editable.group);
-        });
-      }
-    );
-  });
-  let groups = [];
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast.loading($_("updating-runner"));
-      let postdata = {};
-      postdata = Object.assign(postdata, editable);
-      if (postdata.phone === "") {
-        postdata.phone = null;
-      }
-      RunnerService.runnerControllerPut(original_data.id, postdata)
-        .then((resp) => {
-          Object.assign(original_data, editable);
-          original_data = original_data;
-          toast.dismiss();
-          toast.success($_("runner-updated"));
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  function deleteRunner() {
-    RunnerService.runnerControllerRemove(original_data.id, true)
-      .then((resp) => {
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
+		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+			(val) => {
+				const orgs = val.map((r) => {
+					return { label: r.name, value: r };
+				});
+				groups = groups.concat(orgs);
+				RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+					const teams = val.map((r) => {
+						return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
+					});
+					groups = groups.concat(teams);
+					group = groups.find((g) => g.value.id == editable.group);
+				});
+			}
+		);
+	});
+	let groups = [];
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast.loading($_("updating-runner"));
+			let postdata = {};
+			postdata = Object.assign(postdata, editable);
+			if (postdata.phone === "") {
+				postdata.phone = null;
+			}
+			RunnerService.runnerControllerPut(original_data.id, postdata)
+				.then((resp) => {
+					Object.assign(original_data, editable);
+					original_data = original_data;
+					toast.dismiss();
+					toast.success($_("runner-updated"));
+				})
+				.catch((err) => {});
+		} else {
+		}
+	}
+	function deleteRunner() {
+		RunnerService.runnerControllerRemove(original_data.id, true)
+			.then((resp) => {
+				location.replace("./");
+			})
+			.catch((err) => {});
+	}
 </script>
 
 {#await runner_promise}
-  {$_("loading-runners")}
+	{$_("loading-runners")}
 {:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="flex-shrink-0 w-5 h-5 mr-2"
-                fill="currentColor"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">{$_("runners")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2"
-                >{original_data.firstname}
-                {original_data.middlename || ""}
-                {original_data.lastname}</span
-              >
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_data.firstname}
-      {original_data.middlename || ""}
-      {original_data.lastname}
-      <span data-id="runner_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteRunner}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("confirm-deletion")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          <GenerateSponsoringContracts
-            bind:sponsoring_contracts_show
-            bind:generate_runners
-          />
-          <GenerateRunnerCards bind:cards_show bind:generate_runners />
-          <GenerateRunnerCertificates
-            bind:certificates_show
-            bind:generate_runners
-          />
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("delete-runner")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div class="text-sm w-full">
-      <label for="firstname" class="font-medium text-gray-700"
-        >{$_("first-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("first-name")}
-        type="text"
-        class:border-red-500={!isFirstnameValid}
-        class:focus:border-red-500={!isFirstnameValid}
-        class:focus:ring-red-500={!isFirstnameValid}
-        bind:value={editable.firstname}
-        name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isFirstnameValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("first-name-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label for="middlename" class="font-medium text-gray-700"
-        >{$_("middle-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("middle-name")}
-        type="text"
-        bind:value={editable.middlename}
-        name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="lastname" class="font-medium text-gray-700"
-        >{$_("last-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("last-name")}
-        type="text"
-        bind:value={editable.lastname}
-        class:border-red-500={!isLastnameValid}
-        class:focus:border-red-500={!isLastnameValid}
-        class:focus:ring-red-500={!isLastnameValid}
-        name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isLastnameValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("last-name-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label for="email" class="font-medium text-gray-700"
-        >{$_("e-mail-adress")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("e-mail-adress")}
-        type="email"
-        bind:value={editable.email}
-        class:border-red-500={!isEmailValid}
-        class:focus:border-red-500={!isEmailValid}
-        class:focus:ring-red-500={!isEmailValid}
-        name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-      {#if !isEmailValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("valid-email-is-required")}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_("phone")}
-        type="tel"
-        bind:value={editable.phone}
-        name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_("group")}</span>
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
-          option.id.value.toString().startsWith(filterText.toLowerCase())}
-        items={groups}
-        showChevron={true}
-        placeholder={$_("search-for-an-organization-or-team-by-name-or-id")}
-        noOptionsMessage={$_("no-organization-or-team-found")}
-        bind:selectedValue={group}
-        on:select={(selectedValue) => {
-          editable.group = selectedValue.detail.value.id;
-        }}
-        on:clear={() => (editable.group = null)}
-      />
-    </div>
-    <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_("distance")}</span>
-      <br />
-      <span class="text-gray-700">{original_data.distance / 1000} km</span>
-    </div>
-  </section>
+	<section class="container p-5 select-none">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("runners")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{original_data.firstname}
+			{original_data.middlename || ""}
+			{original_data.lastname} [#{params.runnerid}]
+			<span
+				class="grid md:grid-cols-3 gap-1 md:gap-2"
+				data-id="runner_actions_${editable.id}"
+			>
+				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
+					<GenerateSponsoringContracts
+						bind:sponsoring_contracts_show
+						bind:generate_runners
+					/>
+					<GenerateRunnerCards bind:cards_show bind:generate_runners />
+					<GenerateRunnerCertificates
+						bind:certificates_show
+						bind:generate_runners
+					/>
+					<div>
+						{#if delete_triggered}
+							<button
+								on:click={deleteRunner}
+								class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+								>{$_("confirm-deletion")}</button
+							>
+							<button
+								on:click={() => {
+									delete_triggered = !delete_triggered;
+								}}
+								class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+								>{$_("cancel")}</button
+							>
+						{:else}
+							<button
+								on:click={() => {
+									delete_triggered = true;
+								}}
+								type="button"
+								class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+								>{$_("delete-runner")}</button
+							>
+							<button
+								disabled={!save_enabled}
+								class:opacity-50={!save_enabled}
+								type="button"
+								on:click={submit}
+								class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+								>{$_("save-changes")}</button
+							>
+						{/if}
+					</div>
+				{/if}
+			</span>
+		</div>
+		<!--  -->
+		<div class="text-sm w-full mt-2">
+			<label for="firstname" class="font-semibold text-gray-700"
+				>{$_("first-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("first-name")}
+				type="text"
+				class:border-red-500={!isFirstnameValid}
+				class:focus:border-red-500={!isFirstnameValid}
+				class:focus:ring-red-500={!isFirstnameValid}
+				bind:value={editable.firstname}
+				name="firstname"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isFirstnameValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("first-name-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="middlename" class="font-semibold text-gray-700"
+				>{$_("middle-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("middle-name")}
+				type="text"
+				bind:value={editable.middlename}
+				name="middlename"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="lastname" class="font-semibold text-gray-700"
+				>{$_("last-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("last-name")}
+				type="text"
+				bind:value={editable.lastname}
+				class:border-red-500={!isLastnameValid}
+				class:focus:border-red-500={!isLastnameValid}
+				class:focus:ring-red-500={!isLastnameValid}
+				name="lastname"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isLastnameValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("last-name-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="email" class="font-semibold text-gray-700"
+				>{$_("e-mail-adress")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("e-mail-adress")}
+				type="email"
+				bind:value={editable.email}
+				class:border-red-500={!isEmailValid}
+				class:focus:border-red-500={!isEmailValid}
+				class:focus:ring-red-500={!isEmailValid}
+				name="email"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isEmailValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("valid-email-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="phone" class="font-semibold text-gray-700">{$_("phone")}</label>
+			<input
+				autocomplete="off"
+				placeholder={$_("phone")}
+				type="tel"
+				bind:value={editable.phone}
+				name="phone"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_("group")}</span>
+			<Select
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				itemFilter={(label, filterText, option) =>
+					label.toLowerCase().includes(filterText.toLowerCase()) ||
+					option.id.value.toString().startsWith(filterText.toLowerCase())}
+				items={groups}
+				showChevron={true}
+				placeholder={$_("search-for-an-organization-or-team-by-name-or-id")}
+				noOptionsMessage={$_("no-organization-or-team-found")}
+				bind:selectedValue={group}
+				on:select={(selectedValue) => {
+					editable.group = selectedValue.detail.value.id;
+				}}
+				on:clear={() => (editable.group = null)}
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_("distance")}</span>
+			<br />
+			<span class="text-gray-700">{original_data.distance / 1000} km</span>
+		</div>
+	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}

src/components/runners/Runners.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("runners")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:CREATE")}

src/components/scans/AddScanModal.svelte

@@ -131,7 +131,7 @@
                     >{$_("runner")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       filterRunners(label, filterText, option)}
                     items={runners}
@@ -160,7 +160,7 @@
                       type="number"
                       step="1"
                       name="donation_amount_eur"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder="400"
                     />
                     <span

src/components/scans/ScanDetail.svelte

@@ -1,288 +1,273 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import { RunnerService, ScanService } from "@odit/lfk-client-js";
+	import { _ } from "svelte-i18n";
+	import store from "../../store";
+	import { RunnerService, ScanService } from "@odit/lfk-client-js";
 
-  import PromiseError from "../base/PromiseError.svelte";
-  import Select from "svelte-select";
-  let data_loaded = false;
-  export let params;
-  $: delete_triggered = false;
-  $: original_data = {};
-  $: editable = {};
-  $: current_runners = [];
-  $: is_distance_valid = editable.distance > 0;
-  $: is_everything_set =
-    editable.runner != null &&
-    ((original_data.responseType === "TRACKSCAN" && editable.track != null) ||
-      original_data.responseType !== "TRACKSCAN");
-  $: runner = {};
-  $: changes_performed = !(
-    JSON.stringify(original_data) === JSON.stringify(editable)
-  );
-  $: save_enabled = changes_performed && is_everything_set && is_distance_valid;
+	import PromiseError from "../base/PromiseError.svelte";
+	import Select from "svelte-select";
+	let data_loaded = false;
+	export let params;
+	$: delete_triggered = false;
+	$: original_data = {};
+	$: editable = {};
+	$: current_runners = [];
+	$: is_distance_valid = editable.distance > 0;
+	$: is_everything_set =
+		editable.runner != null &&
+		((original_data.responseType === "TRACKSCAN" && editable.track != null) ||
+			original_data.responseType !== "TRACKSCAN");
+	$: runner = {};
+	$: changes_performed = !(
+		JSON.stringify(original_data) === JSON.stringify(editable)
+	);
+	$: save_enabled = changes_performed && is_everything_set && is_distance_valid;
 
-  const promise = ScanService.scanControllerGetOne(params.scanid).then(
-    (data) => {
-      data_loaded = true;
-      original_data = Object.assign(original_data, data);
-      original_data.runner = original_data.runner.id;
-      editable = Object.assign(editable, original_data);
-      RunnerService.runnerControllerGetAll().then((val) => {
-        current_runners = val.map((r) => {
-          return { label: getRunnerLabel(r), value: r };
-        });
-        runner = current_runners.find((r) => r.value.id == editable.runner);
-      });
-    }
-  );
-  const getRunnerLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const filterRunners = (label, filterText, option) =>
-    label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.value.id.toString().startsWith(filterText.toLowerCase());
+	const promise = ScanService.scanControllerGetOne(params.scanid).then(
+		(data) => {
+			data_loaded = true;
+			original_data = Object.assign(original_data, data);
+			original_data.runner = original_data.runner.id;
+			editable = Object.assign(editable, original_data);
+			RunnerService.runnerControllerGetAll().then((val) => {
+				current_runners = val.map((r) => {
+					return { label: getRunnerLabel(r), value: r };
+				});
+				runner = current_runners.find((r) => r.value.id == editable.runner);
+			});
+		}
+	);
+	const getRunnerLabel = (option) =>
+		option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+	const filterRunners = (label, filterText, option) =>
+		label.toLowerCase().includes(filterText.toLowerCase()) ||
+		option.value.id.toString().startsWith(filterText.toLowerCase());
 
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast($_("scan-is-being-updated"));
-      let postdata = {};
-      if (original_data.responseType === "TRACKSCAN") {
-        postdata = Object.assign(postdata, editable);
-        postdata.track = postdata.track.id;
-        ScanService.scanControllerPutTrackScan(original_data.id, postdata)
-          .then((resp) => {
-            Object.assign(original_data, editable);
-            original_data = original_data;
-            toast.success($_("updated-scan"));
-          })
-          .catch((err) => {});
-      } else {
-        postdata = Object.assign(postdata, editable);
-        ScanService.scanControllerPut(original_data.id, postdata)
-          .then((resp) => {
-            Object.assign(original_data, editable);
-            original_data = original_data;
-            toast.success($_("updated-scan"));
-          })
-          .catch((err) => {});
-      }
-    } else {
-    }
-  }
-  function deleteScan() {
-    ScanService.scanControllerRemove(original_data.id, false)
-      .then((resp) => {
-        toast($_("deleted-scan"));
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_scan = original_data;
-      });
-  }
-  function format_laptime(laptime) {
-    if (laptime == 0 || laptime == null) {
-      return $_("first-scan-of-the-day");
-    }
-    if (laptime < 60) {
-      return `${laptime}s`;
-    }
-    if (laptime < 3600) {
-      return `${Math.floor(laptime / 60)}min ${
-        laptime - Math.floor(laptime / 60) * 60
-      }s`;
-    }
-    return `${Math.floor(laptime / 3600)}h ${
-      laptime - Math.floor(laptime / 3600) * 3600
-    }min ${
-      laptime -
-      Math.floor(laptime / 3600) * 3600 -
-      Math.floor(laptime / 60) * 60
-    }`;
-  }
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast($_("scan-is-being-updated"));
+			let postdata = {};
+			if (original_data.responseType === "TRACKSCAN") {
+				postdata = Object.assign(postdata, editable);
+				postdata.track = postdata.track.id;
+				ScanService.scanControllerPutTrackScan(original_data.id, postdata)
+					.then((resp) => {
+						Object.assign(original_data, editable);
+						original_data = original_data;
+						toast.success($_("updated-scan"));
+					})
+					.catch((err) => {});
+			} else {
+				postdata = Object.assign(postdata, editable);
+				ScanService.scanControllerPut(original_data.id, postdata)
+					.then((resp) => {
+						Object.assign(original_data, editable);
+						original_data = original_data;
+						toast.success($_("updated-scan"));
+					})
+					.catch((err) => {});
+			}
+		} else {
+		}
+	}
+	function deleteScan() {
+		ScanService.scanControllerRemove(original_data.id, false)
+			.then((resp) => {
+				toast($_("deleted-scan"));
+				location.replace("./");
+			})
+			.catch((err) => {
+				modal_open = true;
+				delete_scan = original_data;
+			});
+	}
+	function format_laptime(laptime) {
+		if (laptime == 0 || laptime == null) {
+			return $_("first-scan-of-the-day");
+		}
+		if (laptime < 60) {
+			return `${laptime}s`;
+		}
+		if (laptime < 3600) {
+			return `${Math.floor(laptime / 60)}min ${
+				laptime - Math.floor(laptime / 60) * 60
+			}s`;
+		}
+		return `${Math.floor(laptime / 3600)}h ${
+			laptime - Math.floor(laptime / 3600) * 3600
+		}min ${
+			laptime -
+			Math.floor(laptime / 3600) * 3600 -
+			Math.floor(laptime / 60) * 60
+		}`;
+	}
 </script>
 
 {#await promise}
-  Loading scan details
+	Loading scan details
 {:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path
-                  fill="currentColor"
-                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">Scans</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">{original_data.id}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {runner.value?.firstname}
-      {runner.value?.middlename || ""}
-      {runner.value?.lastname}
-      #{original_data.id}
-      <span data-id="donation_actions_${original_data.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteScan}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
-              >{$_("confirm-deletion")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
-              >{$_("delete-scan")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div class="w-full inline-flex">
-      <label for="valid" class="block font-medium text-gray-700"
-        >{$_("status")}:
-      </label>
-      &nbsp;
-      <input
-        id="valid"
-        on:change={() => {
-          editable.valid = !editable.valid;
-        }}
-        name="valid"
-        type="checkbox"
-        checked={editable.valid}
-        class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded"
-      />
-      &nbsp;
-      <p class="font-medium">
-        {#if editable.valid}{$_("valid")}{:else}{$_("invalid")}{/if}
-      </p>
-    </div>
-    {#if editable.responseType === "TRACKSCAN"}
-      <div class="w-full inline-flex">
-        <label for="valid" class="block font-semibold text-gray-700"
-          >{$_("track")}:
-        </label>
-        <a
-          href="../tracks"
-          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-          >{editable.track.name}
-        </a>
-      </div>
-      <div class="w-full inline-flex pb-3">
-        <label for="valid" class="block font-semibold text-gray-700"
-          >{$_("laptime")}: {format_laptime(editable.laptime)}
-        </label>
-      </div>
-    {/if}
-    <div class=" w-full">
-      <label for="runner" class="block font-medium text-gray-700"
-        >{$_("runner")}</label
-      >
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
-          filterRunners(label, filterText, option)}
-        items={current_runners}
-        showChevron={true}
-        isDisabled={editable.responseType === "TRACKSCAN"}
-        placeholder={$_("search-for-runner-by-name-or-id")}
-        noOptionsMessage={$_("no-runners-found")}
-        bind:selectedValue={runner}
-        on:select={(selectedValue) => {
-          editable.runner = selectedValue.detail.value.id;
-        }}
-        on:clear={() => (editable.runner = null)}
-      />
-    </div>
-    <div class=" w-full">
-      <label
-        for="scan_distance"
-        class="block text-sm font-medium text-gray-700"
-      >
-        {$_("distance")}</label
-      >
-      <div class="mt-1 flex rounded-md shadow-sm">
-        <input
-          autocomplete="off"
-          class:border-red-500={!is_distance_valid}
-          class:focus:border-red-500={!is_distance_valid}
-          class:focus:ring-red-500={!is_distance_valid}
-          bind:value={editable.distance}
-          disabled={editable.responseType === "TRACKSCAN"}
-          type="number"
-          step="1"
-          name="scan_distance"
-          class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
-          placeholder="400"
-        />
-        <span
-          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
-          >m</span
-        >
-      </div>
-      {#if !is_distance_valid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >
-          {$_("the-scans-distance-must-be-greater-than-0m")}
-        </span>
-      {/if}
-    </div>
-  </section>
+	<section class="container p-5 select-none">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								> Scans</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{runner.value?.firstname}
+			{runner.value?.middlename || ""}
+			{runner.value?.lastname}
+			- Scan #{original_data.id}
+			<div data-id="donation_actions_${original_data.id}">
+				{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteScan}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-deletion")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-scan")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						on:click={submit}
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</div>
+		</div>
+		<!--  -->
+		<div class="w-full inline-flex">
+			<label for="valid" class="block font-medium text-gray-700"
+				>{$_("status")}:
+			</label>
+			&nbsp;
+			<input
+				id="valid"
+				on:change={() => {
+					editable.valid = !editable.valid;
+				}}
+				name="valid"
+				type="checkbox"
+				checked={editable.valid}
+				class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded"
+			/>
+			&nbsp;
+			<p class="font-medium">
+				{#if editable.valid}{$_("valid")}{:else}{$_("invalid")}{/if}
+			</p>
+		</div>
+		{#if editable.responseType === "TRACKSCAN"}
+			<div class="w-full inline-flex">
+				<label for="valid" class="block font-semibold text-gray-700"
+					>{$_("track")}:
+				</label>
+				<a
+					href="../tracks"
+					class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+					>{editable.track.name}
+				</a>
+			</div>
+			<div class="w-full inline-flex pb-3">
+				<label for="valid" class="block font-semibold text-gray-700"
+					>{$_("laptime")}: {format_laptime(editable.laptime)}
+				</label>
+			</div>
+		{/if}
+		<div class=" w-full">
+			<label for="runner" class="block font-medium text-gray-700"
+				>{$_("runner")}</label
+			>
+			<Select
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				itemFilter={(label, filterText, option) =>
+					filterRunners(label, filterText, option)}
+				items={current_runners}
+				showChevron={true}
+				isDisabled={editable.responseType === "TRACKSCAN"}
+				placeholder={$_("search-for-runner-by-name-or-id")}
+				noOptionsMessage={$_("no-runners-found")}
+				bind:selectedValue={runner}
+				on:select={(selectedValue) => {
+					editable.runner = selectedValue.detail.value.id;
+				}}
+				on:clear={() => (editable.runner = null)}
+			/>
+		</div>
+		<div class=" w-full">
+			<label
+				for="scan_distance"
+				class="block text-sm font-medium text-gray-700"
+			>
+				{$_("distance")}</label
+			>
+			<div class="mt-1 flex rounded-md shadow-sm">
+				<input
+					autocomplete="off"
+					class:border-red-500={!is_distance_valid}
+					class:focus:border-red-500={!is_distance_valid}
+					class:focus:ring-red-500={!is_distance_valid}
+					bind:value={editable.distance}
+					disabled={editable.responseType === "TRACKSCAN"}
+					type="number"
+					step="1"
+					name="scan_distance"
+					class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
+					placeholder="400"
+				/>
+				<span
+					class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+					>m</span
+				>
+			</div>
+			{#if !is_distance_valid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("the-scans-distance-must-be-greater-than-0m")}
+				</span>
+			{/if}
+		</div>
+	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}

src/components/scans/ScanValid.svelte

@@ -5,12 +5,12 @@
 
 {#if valid}
   <span
-    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current 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"
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
     >{$_("invalid")}</span
   >
 {/if}

src/components/scans/Scans.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("scans")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}

src/components/scanstations/AddScanStationModal.svelte

@@ -133,7 +133,7 @@
                     class="block text-sm font-medium text-gray-700">Track</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id
@@ -161,11 +161,11 @@
                     bind:value={description}
                     type="text"
                     name="description"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
-                  <label for="enabled" class="font-medium text-gray-700"
+                  <label for="enabled" class="font-semibold text-gray-700"
                     >{$_("enabled_large")}</label
                   >
                   <br />

src/components/scanstations/CopyScanStationTokenModal.svelte

@@ -119,7 +119,7 @@
 									<p
 										name="token"
 										class:bg-green-200={copied}
-										class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+										class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
 									>
 										{new_station.key}
 									</p>

src/components/scanstations/ScanStationDetail.svelte

@@ -1,204 +1,190 @@
 <script>
-  import { t, _ } from "svelte-i18n";
-  import store from "../../store";
-  import { ScanStationService, TrackService } from "@odit/lfk-client-js";
+	import { t, _ } from "svelte-i18n";
+	import store from "../../store";
+	import { ScanStationService, TrackService } from "@odit/lfk-client-js";
 
-  import PromiseError from "../base/PromiseError.svelte";
-  import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
-  import Select from "svelte-select";
-  let data_loaded = false;
-  let modal_open;
-  let delete_station;
-  export let params;
-  $: delete_triggered = false;
-  $: original_data = {};
-  $: editable = {};
-  $: tracks = [];
-  $: track = {};
-  $: changes_performed = !(
-    JSON.stringify(original_data) === JSON.stringify(editable)
-  );
-  $: save_enabled = changes_performed;
-  const promise = ScanStationService.scanStationControllerGetOne(
-    params.stationid
-  ).then((data) => {
-    data_loaded = true;
-    data.track = data.track.id;
-    original_data = Object.assign(original_data, data);
-    editable = Object.assign(editable, original_data);
-    TrackService.trackControllerGetAll().then((val) => {
-      tracks = val.map((t) => {
-        return { label: t.name || `#{t.id}`, value: t };
-      });
-      track = tracks.find((t) => t.value.id == editable.track);
-    });
-  });
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast($_("station-is-being-updated"));
-      ScanStationService.scanStationControllerPut(original_data.id, editable)
-        .then((resp) => {
-          Object.assign(original_data, editable);
-          original_data = original_data;
-          toast.success($_("updated-station"));
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  function deleteStation() {
-    ScanStationService.scanStationControllerRemove(original_data.id, false)
-      .then((resp) => {
-        toast($_("station-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_station = original_data;
-      });
-  }
+	import PromiseError from "../base/PromiseError.svelte";
+	import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
+	import Select from "svelte-select";
+	let data_loaded = false;
+	let modal_open;
+	let delete_station;
+	export let params;
+	$: delete_triggered = false;
+	$: original_data = {};
+	$: editable = {};
+	$: tracks = [];
+	$: track = {};
+	$: changes_performed = !(
+		JSON.stringify(original_data) === JSON.stringify(editable)
+	);
+	$: save_enabled = changes_performed;
+	const promise = ScanStationService.scanStationControllerGetOne(
+		params.stationid
+	).then((data) => {
+		data_loaded = true;
+		data.track = data.track.id;
+		original_data = Object.assign(original_data, data);
+		editable = Object.assign(editable, original_data);
+		TrackService.trackControllerGetAll().then((val) => {
+			tracks = val.map((t) => {
+				return { label: t.name || `#{t.id}`, value: t };
+			});
+			track = tracks.find((t) => t.value.id == editable.track);
+		});
+	});
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast($_("station-is-being-updated"));
+			ScanStationService.scanStationControllerPut(original_data.id, editable)
+				.then((resp) => {
+					Object.assign(original_data, editable);
+					original_data = original_data;
+					toast.success($_("updated-station"));
+				})
+				.catch((err) => {});
+		} else {
+		}
+	}
+	function deleteStation() {
+		ScanStationService.scanStationControllerRemove(original_data.id, false)
+			.then((resp) => {
+				toast($_("station-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {
+				modal_open = true;
+				delete_station = original_data;
+			});
+	}
 </script>
 
 <ConfirmScanStationDeletion bind:modal_open bind:delete_station />
 {#await promise}
-  {$_("loading-station-details")}
+	{$_("loading-station-details")}
 {:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_("scanstation")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">#{original_data.id}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      #{original_data.id}
-      <span data-id="stations_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteStation}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("confirm-deletion")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("delete-station")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div class="text-sm w-full">
-      <label for="track" class="block text-sm font-medium text-gray-700"
-        >Track</label
-      >
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
-          option.value.id.toString().startsWith(filterText.toLowerCase())}
-        items={tracks}
-        showChevron={true}
-        placeholder="Search for a track (by name or id)."
-        noOptionsMessage="No track found"
-        bind:selectedValue={track}
-        on:select={(selectedValue) =>
-          (editable.track = selectedValue.detail.value.id)}
-        on:clear={() => (track = null)}
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="description" class="font-medium text-gray-700"
-        >{$_("description")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("description")}
-        type="text"
-        bind:value={editable.description}
-        name="description"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="enabled" class="ml-1 font-medium text-gray-700"
-        >{$_("enabled")}</label
-      >
-      <br />
-      <p class="text-gray-500">
-        <input
-          id="enabled"
-          on:change={() => {
-            editable.enabled = !editable.enabled;
-          }}
-          name="enabled"
-          type="checkbox"
-          checked={editable.enabled}
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-        />
-        {$_("this-scanstation-is")}
-        {#if editable.enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
-      </p>
-    </div>
-  </section>
+	<section class="container p-5 select-none">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("scanstations")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{$_("scanstation")} #{original_data.id}<br>"{original_data.description}"
+			<div data-id="stations_actions_${editable.id}">
+				{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteStation}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-deletion")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-station")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						on:click={submit}
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</div>
+		</div>
+		<!--  -->
+		<div class="mt-2 text-sm w-full">
+			<label for="track" class="block text-sm font-semibold text-gray-700"
+				>Track</label
+			>
+			<Select
+				containerClasses="rounded-l-md focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				itemFilter={(label, filterText, option) =>
+					label.toLowerCase().includes(filterText.toLowerCase()) ||
+					option.value.id.toString().startsWith(filterText.toLowerCase())}
+				items={tracks}
+				showChevron={true}
+				placeholder="Search for a track (by name or id)."
+				noOptionsMessage="No track found"
+				bind:selectedValue={track}
+				on:select={(selectedValue) =>
+					(editable.track = selectedValue.detail.value.id)}
+				on:clear={() => (track = null)}
+			/>
+		</div>
+		<div class="mt-2 text-sm w-full">
+			<label for="description" class="font-semibold text-gray-700"
+				>{$_("description")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("description")}
+				type="text"
+				bind:value={editable.description}
+				name="description"
+				class="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="mt-2 text-sm w-full">
+			<label for="enabled" class="font-semibold text-gray-700"
+				>{$_("enabled")}</label
+			>
+			<br />
+			<p class="text-gray-500">
+				<input
+					id="enabled"
+					on:change={() => {
+						editable.enabled = !editable.enabled;
+					}}
+					name="enabled"
+					type="checkbox"
+					checked={editable.enabled}
+					class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+				/>
+				{$_("this-scanstation-is")}
+				{#if editable.enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
+			</p>
+		</div>
+	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}

src/components/scanstations/ScanStations.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <section class="container p-5">
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("scanstations")}
 	</h4>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:CREATE")}
@@ -111,7 +111,7 @@
 													<div class="text-sm font-medium text-gray-900">
 														<a
 															href="../tracks"
-															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
 														>
 															{s.track.name || s.track.distance + "m"}</a
 														>
@@ -132,12 +132,12 @@
 											<div class="flex items-center">
 												{#if s.enabled}
 													<span
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-green-100 text-green-800"
 														>{$_("active")}</span
 													>
 												{:else}
 													<span
-														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border border-current bg-red-100 text-red-800"
 														>{$_("inactive")}</span
 													>
 												{/if}

src/components/settings/Settings.svelte

@@ -62,21 +62,13 @@
 </script>
 
 <ConfirmProfileDeletion bind:modal_open bind:delete_triggered />
-<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
-  <div class="text-center mb-8">
-    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-    >
-      🔨<br />{$_("settings")}
-    </h1>
-  </div>
-</div>
 <div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    <span class="text-3xl font-bold">{$_("settings")}</span>
     <div>
       <div class="md:grid md:grid-cols-3 md:gap-6">
         <div class="md:col-span-1">
-          <div class="px-4 sm:px-0">
+          <div class="sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
               {$_("profile")}
             </h3>
@@ -91,8 +83,8 @@
           <div class="mt-5 md:mt-0 md:col-span-2">
             <div class="shadow sm:rounded-md sm:overflow-hidden">
               <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
-                <div class="text-sm w-full">
-                  <label for="username" class="font-medium text-gray-700"
+                <div class="text-sm w-full mt-2">
+                  <label for="username" class="font-semibold text-gray-700"
                     >{$_("username")}</label
                   >
                   <input
@@ -101,11 +93,11 @@
                     type="text"
                     bind:value={editable.username}
                     name="username"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
-                <div class="text-sm w-full">
-                  <label for="email" class="font-medium text-gray-700"
+                <div class="text-sm w-full mt-2">
+                  <label for="email" class="font-semibold text-gray-700"
                     >{$_("e-mail-adress")}</label
                   >
                   <input
@@ -114,7 +106,7 @@
                     type="email"
                     bind:value={editable.email}
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 {#if !isEmail(editable.email)}
@@ -123,8 +115,8 @@
                     >{$_("valid-email-is-required")}</span
                   >
                 {/if}
-                <div class="text-sm w-full">
-                  <label for="firstname" class="font-medium text-gray-700"
+                <div class="text-sm w-full mt-2">
+                  <label for="firstname" class="font-semibold text-gray-700"
                     >{$_("first-name")}</label
                   >
                   <input
@@ -133,11 +125,11 @@
                     type="text"
                     bind:value={editable.firstname}
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
-                <!-- <div class="text-sm w-full">
-                  <label for="middlename" class="font-medium text-gray-700"
+                <!-- <div class="text-sm w-full mt-2">
+                  <label for="middlename" class="font-semibold text-gray-700"
                     >{$_("middle-name")}</label
                   >
                   <input
@@ -146,11 +138,11 @@
                     type="text"
                     bind:value={editable.middlename}
                     name="middlename"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div> -->
-                <div class="text-sm w-full">
-                  <label for="lastname" class="font-medium text-gray-700"
+                <div class="text-sm w-full mt-2">
+                  <label for="lastname" class="font-semibold text-gray-700"
                     >{$_("last-name")}</label
                   >
                   <input
@@ -159,7 +151,7 @@
                     type="text"
                     bind:value={editable.lastname}
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
               </div>
@@ -184,7 +176,7 @@
     <div>
       <div class="md:grid md:grid-cols-3 md:gap-6">
         <div class="md:col-span-1">
-          <div class="px-4 sm:px-0">
+          <div class="sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
               {$_("password")}
             </h3>
@@ -199,7 +191,7 @@
           <div class="mt-5 md:mt-0 md:col-span-2">
             <div class="shadow sm:rounded-md sm:overflow-hidden">
               <div class="px-4 py-3 bg-gray-50 text-left sm:px-6">
-                <label for="new_password" class="font-medium text-gray-700"
+                <label for="new_password" class="font-semibold text-gray-700"
                   >{$_("new-password")}</label
                 >
                 <div class="-mt-px relative">
@@ -212,7 +204,7 @@
                     placeholder={$_("password")}
                   />
                 </div>
-                <label for="new_password" class="font-medium text-gray-700"
+                <label for="new_password" class="font-semibold text-gray-700"
                   >{$_("confirm-the-new-password")}</label
                 >
                 <div class="-mt-px relative">
@@ -255,7 +247,7 @@
     <div>
       <div class="md:grid md:grid-cols-3 md:gap-6">
         <div class="md:col-span-1">
-          <div class="px-4 sm:px-0">
+          <div class="sm:px-0">
             <h3 class="text-lg font-medium leading-6 text-gray-900">
               {$_("danger-zone")}
             </h3>

src/components/statsclients/AddStatsClientModal.svelte

@@ -126,7 +126,7 @@
                     bind:value={description}
                     type="text"
                     name="description"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
               </div>

src/components/statsclients/CopyStatsClientTokenModal.svelte

@@ -96,7 +96,7 @@
                   <p
                     name="token"
                     class:bg-green-200={copied}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                   >
                     {new_client.key}
                   </p>

src/components/statsclients/StatsClientDetail.svelte

@@ -1,124 +1,110 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import PromiseError from "../base/PromiseError.svelte";
-  import ConfirmStatsClientDeletion from "./ConfirmStatsClientDeletion.svelte";
-  import { StatsClientService } from "@odit/lfk-client-js";
-  import toast from "svelte-french-toast";
-  let data_loaded = false;
-  let modal_open;
-  let delete_client;
-  export let params;
-  $: delete_triggered = false;
-  $: original_data = {};
-  const promise = StatsClientService.statsClientControllerGetOne(
-    params.clientid
-  ).then((data) => {
-    data_loaded = true;
-    original_data = Object.assign(original_data, data);
-  });
-  function deleteClient() {
-    StatsClientService.statsClientControllerRemove(original_data.id, false)
-      .then((resp) => {
-        toast($_("statsclient-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_client = original_data;
-      });
-  }
+	import { _ } from "svelte-i18n";
+	import store from "../../store";
+	import PromiseError from "../base/PromiseError.svelte";
+	import ConfirmStatsClientDeletion from "./ConfirmStatsClientDeletion.svelte";
+	import { StatsClientService } from "@odit/lfk-client-js";
+	import toast from "svelte-french-toast";
+	let data_loaded = false;
+	let modal_open;
+	let delete_client;
+	export let params;
+	$: delete_triggered = false;
+	$: original_data = {};
+	const promise = StatsClientService.statsClientControllerGetOne(
+		params.clientid
+	).then((data) => {
+		data_loaded = true;
+		original_data = Object.assign(original_data, data);
+	});
+	function deleteClient() {
+		StatsClientService.statsClientControllerRemove(original_data.id, false)
+			.then((resp) => {
+				toast($_("statsclient-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {
+				modal_open = true;
+				delete_client = original_data;
+			});
+	}
 </script>
 
 <ConfirmStatsClientDeletion bind:modal_open bind:delete_client />
 {#await promise}
-  {$_("loading-statsclient-details")}
+	{$_("loading-statsclient-details")}
 {:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"
-                ><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_("statsclient")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">#{original_data.id}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      #{original_data.id}
-      <span data-id="stations_actions_${original_data.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteClient}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("confirm-deletion")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("delete-statsclient")}</button
-            >
-          {/if}
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div class="text-sm w-full">
-      <label for="description" class="font-medium text-gray-700"
-        >{$_("description")}</label
-      >
-      <p
-        name="description"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      >
-        {original_data.description}
-      </p>
-    </div>
-  </section>
+	<section class="container p-5 select-none">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("statsclients")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{$_("statsclient")} #{original_data.id}
+			<div data-id="stations_actions_${original_data.id}">
+				{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteClient}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-deletion")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-statsclient")}</button
+						>
+					{/if}
+				{/if}
+			</div>
+		</div>
+		<!--  -->
+		<div class="text-sm w-full mt-2">
+			<label for="description" class="font-semibold text-gray-700"
+				>{$_("description")}</label
+			>
+			<p
+				name="description"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			>
+				{original_data.description}
+			</p>
+		</div>
+	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}

src/components/statsclients/StatsClients.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <section class="container p-5">
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("statsclients")}
 	</h4>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:CREATE")}

src/components/teams/AddTeamModal.svelte

@@ -141,7 +141,7 @@
                     bind:this={teamname_input_dom}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isTeamNameValid}
                     <span
@@ -158,7 +158,7 @@
                     >{$_("organization")}</label
                   >
                   <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                     itemFilter={(label, filterText, option) =>
                       label.toLowerCase().includes(filterText.toLowerCase()) ||
                       option.value.id

src/components/teams/TeamDetail.svelte

@@ -1,308 +1,264 @@
 <script>
-  import {
-    GroupContactService,
-    RunnerOrganizationService,
-    RunnerTeamService,
-  } from "@odit/lfk-client-js";
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import toast from 'svelte-french-toast'
+	import {
+		GroupContactService,
+		RunnerOrganizationService,
+		RunnerTeamService,
+	} from "@odit/lfk-client-js";
+	import { getLocaleFromNavigator, _ } from "svelte-i18n";
+	import toast from "svelte-french-toast";
 
-  import store from "../../store";
-  import Select from "svelte-select";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-  import PromiseError from "../base/PromiseError.svelte";
-  import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
-  import Teams from "./Teams.svelte";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
-    {},
-    {},
-    {},
-    [],
-    [],
-    false,
-  ];
-  export let params;
-  export let import_modal_open = false;
-  $: delete_triggered = false;
-  $: save_enabled = data_changed && teamdata.parentGroup != null;
-  $: data_loaded = false;
-  $: data_changed = !(JSON.stringify(teamdata) === JSON.stringify(original));
-  $: sponsoring_contracts_show = true;
-  $: cards_show = true;
-  $: certificates_show = true;
-  $: generate_teams = [original];
-  $: group = {};
-  $: contact = {};
-  //
-  const getContactLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const promise = RunnerTeamService.runnerTeamControllerGetOne(
-    params.teamid
-  ).then((value) => {
-    data_loaded = true;
-    teamdata = Object.assign(teamdata, value);
-    original = Object.assign(original, value);
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      (val) => {
-        orgs = val.map((r) => {
-          delete r.contact;
-          r.teams = [];
-          return { label: r.name, value: r };
-        });
-        group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
-      }
-    );
-    GroupContactService.groupContactControllerGetAll().then((val) => {
-      contacts = val.map((r) => {
-        return { label: getContactLabel(r), value: r };
-      });
-      if (teamdata.contact) {
-        contact = contacts.find((g) => g.value.id == teamdata.contact.id);
-      } else {
-        contact = null;
-      }
-    });
-  });
-  function deleteTeam() {
-    RunnerTeamService.runnerTeamControllerRemove(original.id, false)
-      .then((resp) => {
-        toast($_("team-deleted"));
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_team = original;
-      });
-  }
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      toast($_("updating-team"));
-      let postdata = teamdata;
-      postdata.parentGroup = teamdata.parentGroup.id;
-      postdata.contact = teamdata.contact?.id;
-      RunnerTeamService.runnerTeamControllerPut(original.id, postdata)
-        .then((resp) => {
-          Object.assign(original, teamdata);
-          original = original;
-          toast.success($_("updated-team"));
-        })
-        .catch((err) => {});
-    }
-  }
+	import store from "../../store";
+	import Select from "svelte-select";
+	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	import PromiseError from "../base/PromiseError.svelte";
+	import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+	import Teams from "./Teams.svelte";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
+		{},
+		{},
+		{},
+		[],
+		[],
+		false,
+	];
+	export let params;
+	export let import_modal_open = false;
+	$: delete_triggered = false;
+	$: save_enabled = data_changed && teamdata.parentGroup != null;
+	$: data_loaded = false;
+	$: data_changed = !(JSON.stringify(teamdata) === JSON.stringify(original));
+	$: sponsoring_contracts_show = true;
+	$: cards_show = true;
+	$: certificates_show = true;
+	$: generate_teams = [original];
+	$: group = {};
+	$: contact = {};
+	//
+	const getContactLabel = (option) =>
+		option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+	const promise = RunnerTeamService.runnerTeamControllerGetOne(
+		params.teamid
+	).then((value) => {
+		data_loaded = true;
+		teamdata = Object.assign(teamdata, value);
+		original = Object.assign(original, value);
+		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+			(val) => {
+				orgs = val.map((r) => {
+					delete r.contact;
+					r.teams = [];
+					return { label: r.name, value: r };
+				});
+				group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
+			}
+		);
+		GroupContactService.groupContactControllerGetAll().then((val) => {
+			contacts = val.map((r) => {
+				return { label: getContactLabel(r), value: r };
+			});
+			if (teamdata.contact) {
+				contact = contacts.find((g) => g.value.id == teamdata.contact.id);
+			} else {
+				contact = null;
+			}
+		});
+	});
+	function deleteTeam() {
+		RunnerTeamService.runnerTeamControllerRemove(original.id, false)
+			.then((resp) => {
+				toast($_("team-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {
+				modal_open = true;
+				delete_team = original;
+			});
+	}
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			toast($_("updating-team"));
+			let postdata = teamdata;
+			postdata.parentGroup = teamdata.parentGroup.id;
+			postdata.contact = teamdata.contact?.id;
+			RunnerTeamService.runnerTeamControllerPut(original.id, postdata)
+				.then((resp) => {
+					Object.assign(original, teamdata);
+					original = original;
+					toast.success($_("updated-team"));
+				})
+				.catch((err) => {});
+		}
+	}
 </script>
 
 <ImportRunnerModal
-  current_runners={[]}
-  on:cancelDelete={(event) => {
-    import_modal_open = false;
-  }}
-  passed_team={teamdata}
-  passed_orgs={[]}
-  passed_org={{}}
-  opened_from="TeamDetail"
-  bind:import_modal_open
+	current_runners={[]}
+	on:cancelDelete={(event) => {
+		import_modal_open = false;
+	}}
+	passed_team={teamdata}
+	passed_orgs={[]}
+	passed_org={{}}
+	opened_from="TeamDetail"
+	bind:import_modal_open
 />
 <ConfirmTeamDeletion bind:modal_open bind:delete_team />
 {#if data_loaded}
-  <section class="container p-5">
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original.name}
-      <span data-id="org_actions_${teamdata.id}">
-        <GenerateSponsoringContracts
-          bind:sponsoring_contracts_show
-          bind:generate_teams
-        />
-        <GenerateRunnerCards bind:cards_show bind:generate_teams />
-        <GenerateRunnerCertificates
-          bind:certificates_show
-          bind:generate_teams
-        />
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
-          <button
-            on:click={() => {
-              import_modal_open = true;
-            }}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-          >
-            {$_("import-runners")}
-          </button>
-        {/if}
-        {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteTeam}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("confirm-delete")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("delete-team")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            on:click={submit}
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="mr-2 flex items-center">
-              <svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                <polyline points="9 22 9 12 15 12 15 22" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="/">Home</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="mr-2 flex items-center">
-              <svg
-                class="flex-shrink-0 w-5 h-5 mr-2"
-                fill="currentColor"
-                width="24"
-                height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-                ><path
-                  fill="currentColor"
-                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">Teams</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">Team-Details #{params.teamid}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="text-sm w-full">
-      <label for="name" class="font-medium text-gray-700">Name</label>
-      <input
-        autocomplete="off"
-        placeholder="Name"
-        type="text"
-        bind:value={teamdata.name}
-        name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="contact" class="font-medium text-gray-700"
-        >{$_("contact")}</label
-      >
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
-          option.value.id.toString().startsWith(filterText.toLowerCase())}
-        items={contacts}
-        showChevron={true}
-        placeholder={$_("no-contact-selected")}
-        noOptionsMessage={$_("no-contact-found")}
-        bind:selectedValue={contact}
-        on:select={(selectedValue) =>
-          (teamdata.contact = selectedValue.detail.value)}
-        on:clear={() => (teamdata.contact = null)}
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="org" class="font-medium text-gray-700"
-        >{$_("organization")}</label
-      >
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) =>
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
-          option.id.value.toString().startsWith(filterText.toLowerCase())}
-        items={orgs}
-        showChevron={true}
-        placeholder={$_("search-for-an-organization-by-name-or-id")}
-        noOptionsMessage={$_("no-organizations-found")}
-        bind:selectedValue={group}
-        on:select={(selectedValue) =>
-          (teamdata.parentGroup = selectedValue.detail.value)}
-        on:clear={() => (teamdata.parentGroup = null)}
-      />
-    </div>
-    <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_("distance")}</span>
-      <br />
-      <span class="text-gray-700"
-        >{(original.total_distance / 1000).toFixed(2)} km</span
-      >
-    </div>
-  </section>
+	<section class="container p-5">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("teams")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{#if group}
+				{group.label}{" > "}
+			{/if}
+			{original.name} [#{params.teamid}]
+			<span data-id="org_actions_${teamdata.id}">
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_teams
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_teams />
+				<GenerateRunnerCertificates
+					bind:certificates_show
+					bind:generate_teams
+				/>
+				{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
+					<button
+						on:click={() => {
+							import_modal_open = true;
+						}}
+						type="button"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+					>
+						{$_("import-runners")}
+					</button>
+				{/if}
+				{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteTeam}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-delete")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-team")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						on:click={submit}
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</span>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="name" class="font-semibold text-gray-700">Name</label>
+			<input
+				autocomplete="off"
+				placeholder="Name"
+				type="text"
+				bind:value={teamdata.name}
+				name="name"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="contact" class="font-semibold text-gray-700"
+				>{$_("contact")}</label
+			>
+			<Select
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				itemFilter={(label, filterText, option) =>
+					label.toLowerCase().includes(filterText.toLowerCase()) ||
+					option.value.id.toString().startsWith(filterText.toLowerCase())}
+				items={contacts}
+				showChevron={true}
+				placeholder={$_("no-contact-selected")}
+				noOptionsMessage={$_("no-contact-found")}
+				bind:selectedValue={contact}
+				on:select={(selectedValue) =>
+					(teamdata.contact = selectedValue.detail.value)}
+				on:clear={() => (teamdata.contact = null)}
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="org" class="font-semibold text-gray-700"
+				>{$_("organization")}</label
+			>
+			<Select
+				containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				itemFilter={(label, filterText, option) =>
+					label.toLowerCase().includes(filterText.toLowerCase()) ||
+					option.id.value.toString().startsWith(filterText.toLowerCase())}
+				items={orgs}
+				showChevron={true}
+				placeholder={$_("search-for-an-organization-by-name-or-id")}
+				noOptionsMessage={$_("no-organizations-found")}
+				bind:selectedValue={group}
+				on:select={(selectedValue) =>
+					(teamdata.parentGroup = selectedValue.detail.value)}
+				on:clear={() => (teamdata.parentGroup = null)}
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold text-gray-700">{$_("distance")}</span>
+			<br />
+			<span class="text-gray-700"
+				>{(original.total_distance / 1000).toFixed(2)} km</span
+			>
+		</div>
+	</section>
 {:else}
-  {#await promise}
-    {$_("team-detail-is-being-loaded")}
-  {:catch error}
-    <PromiseError />
-  {/await}
+	{#await promise}
+		{$_("team-detail-is-being-loaded")}
+	{:catch error}
+		<PromiseError />
+	{/await}
 {/if}

src/components/teams/Teams.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("teams")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:CREATE")}

src/components/teams/TeamsOverview.svelte

@@ -1,247 +1,241 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import { RunnerTeamService } from "@odit/lfk-client-js";
-  const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
-  import store, { users as usersstore } from "../../store.js";
-  import TeamsEmptyState from "./TeamsEmptyState.svelte";
-  import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import toast from "svelte-french-toast";
-  $: searchvalue = "";
-  $: active_deletes = [];
-  $: sponsoring_contracts_show = current_teams.some(
-    (r) => r.is_selected === true
-  );
-  $: cards_show = current_teams.some((r) => r.is_selected === true);
-  $: certificates_show = current_teams.some((r) => r.is_selected === true);
-  $: generate_teams = current_teams.filter((r) => r.is_selected === true);
-  export let current_teams = [];
-  let modal_open = false;
-  let delete_team = {};
-  usersstore.subscribe((val) => {
-    current_teams = val;
-  });
-  teams_promise.then((data) => {
-    usersstore.set(data);
-  });
+	import { _ } from "svelte-i18n";
+	import { RunnerTeamService } from "@odit/lfk-client-js";
+	const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
+	import store, { users as usersstore } from "../../store.js";
+	import TeamsEmptyState from "./TeamsEmptyState.svelte";
+	import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+	import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+	import toast from "svelte-french-toast";
+	$: searchvalue = "";
+	$: active_deletes = [];
+	$: sponsoring_contracts_show = current_teams.some(
+		(r) => r.is_selected === true
+	);
+	$: cards_show = current_teams.some((r) => r.is_selected === true);
+	$: certificates_show = current_teams.some((r) => r.is_selected === true);
+	$: generate_teams = current_teams.filter((r) => r.is_selected === true);
+	export let current_teams = [];
+	let modal_open = false;
+	let delete_team = {};
+	usersstore.subscribe((val) => {
+		current_teams = val;
+	});
+	teams_promise.then((data) => {
+		usersstore.set(data);
+	});
 </script>
 
 <ConfirmTeamDeletion
-  on:cancelDelete={(event) => {
-    modal_open = false;
-    active_deletes[event.detail.id] = false;
-  }}
-  bind:modal_open
-  bind:delete_team
+	on:cancelDelete={(event) => {
+		modal_open = false;
+		active_deletes[event.detail.id] = false;
+	}}
+	bind:modal_open
+	bind:delete_team
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
-  {#await teams_promise}
-    <div
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert"
-    >
-      <p class="font-bold">{$_("teams-are-being-loaded")}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    </div>
-  {:then}
-    {#if current_teams.length === 0}
-      <TeamsEmptyState />
-    {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_("datatable.search")}
-        aria-label={$_("datatable.search")}
-        class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
-      />
-      <div class="h-12">
-        <GenerateSponsoringContracts
-          bind:sponsoring_contracts_show
-          bind:generate_teams
-        />
-        <GenerateRunnerCards bind:cards_show bind:generate_teams />
-        <GenerateRunnerCertificates
-          bind:certificates_show
-          bind:generate_teams
-        />
-      </div>
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-      >
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
-            <tr class="odd:bg-white even:bg-gray-100">
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                <button
-                  on:click={() => {
-                    const newstate = !current_teams.some(
-                      (r) => r.is_selected === true
-                    );
-                    current_teams = current_teams.map((r) => {
-                      r.is_selected = newstate;
-                      return r;
-                    });
-                  }}
-                  class="underline cursor-pointer select-none"
-                  >{#if current_teams.some((r) => r.is_selected === true)}
-                    {$_("deselect-all")}
-                  {:else}{$_("select-all")}{/if}
-                </button>
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("name")}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("organization")}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                {$_("contact")}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_("action")}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each current_teams as t}
-              {#if Object.values(t)
-                .toString()
-                .toLowerCase()
-                .includes(searchvalue)}
-                <tr
-                  class="odd:bg-white even:bg-gray-100"
-                  data-rowid="team_{t.id}"
-                >
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <input
-                      bind:checked={t.is_selected}
-                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                    />
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {t.name}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {#if t.parentGroup}
-                            <a
-                              href="../orgs/{t.parentGroup.id}"
-                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                              >{t.parentGroup.name}</a
-                            >
-                          {:else}{$_("no-organization-specified")}{/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {#if t.contact}
-                            <a
-                              href="../contacts/{t.contact.id}"
-                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                              >{t.contact.firstname}
-                              {t.contact.middlename || ""}
-                              {t.contact.lastname}</a
-                            >
-                          {:else}{$_("no-contact-specified")}{/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  {#if active_deletes[t.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                    >
-                      <button
-                        on:click={() => {
-                          active_deletes[t.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                        >{$_("cancel-delete")}</button
-                      >
-                      <button
-                        on:click={() => {
-                          RunnerTeamService.runnerTeamControllerRemove(
-                            t.id,
-                            false
-                          )
-                            .then((resp) => {
-                              current_teams = current_teams.filter(
-                                (obj) => obj.id !== t.id
-                              );
-                              toast($_("team-deleted"));
-                            })
-                            .catch((err) => {
-                              modal_open = true;
-                              delete_team = t;
-                            });
-                        }}
-                        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="./{t.id}"
-                        class="text-indigo-600 hover:text-indigo-900"
-                        >{$_("details")}</a
-                      >
-                      {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
-                        <button
-                          on:click={() => {
-                            active_deletes[t.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                          >{$_("delete")}</button
-                        >
-                      {/if}
-                    </td>
-                  {/if}
-                </tr>
-              {/if}
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  {:catch error}
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-      <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_("general_promise_error")}</b>
-        {error}
-      </span>
-    </div>
-  {/await}
+	{#await teams_promise}
+		<div
+			class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+			role="alert"
+		>
+			<p class="font-bold">{$_("teams-are-being-loaded")}</p>
+			<p class="text-sm">{$_("this-might-take-a-moment")}</p>
+		</div>
+	{:then}
+		{#if current_teams.length === 0}
+			<TeamsEmptyState />
+		{:else}
+			<input
+				type="search"
+				bind:value={searchvalue}
+				placeholder={$_("datatable.search")}
+				aria-label={$_("datatable.search")}
+				class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
+			/>
+			<div class="h-12">
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_teams
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_teams />
+				<GenerateRunnerCertificates
+					bind:certificates_show
+					bind:generate_teams
+				/>
+			</div>
+			<div
+				class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+			>
+				<table class="divide-y divide-gray-200 w-full">
+					<thead class="bg-gray-50">
+						<tr class="odd:bg-white even:bg-gray-100">
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								<button
+									on:click={() => {
+										const newstate = !current_teams.some(
+											(r) => r.is_selected === true
+										);
+										current_teams = current_teams.map((r) => {
+											r.is_selected = newstate;
+											return r;
+										});
+									}}
+									class="underline cursor-pointer select-none"
+									>{#if current_teams.some((r) => r.is_selected === true)}
+										{$_("deselect-all")}
+									{:else}{$_("select-all")}{/if}
+								</button>
+							</th>
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								{$_("name")}
+							</th>
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								{$_("organization")}
+							</th>
+							<th
+								scope="col"
+								class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+							>
+								{$_("contact")}
+							</th>
+							<th scope="col" class="relative px-6 py-3">
+								<span class="sr-only">{$_("action")}</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-gray-200">
+						{#each current_teams as t}
+							{#if Object.values(t)
+								.toString()
+								.toLowerCase()
+								.includes(searchvalue)}
+								<tr
+									class="odd:bg-white even:bg-gray-100"
+									data-rowid="team_{t.id}"
+								>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<input
+											bind:checked={t.is_selected}
+											type="checkbox"
+											class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+										/>
+									</td>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="flex items-center">
+											<div class="text-sm font-medium text-gray-900">
+												{t.name}
+											</div>
+										</div>
+									</td>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="flex items-center">
+											<div class="text-sm font-medium text-gray-900">
+												{#if t.parentGroup}
+													<a
+														href="../orgs/{t.parentGroup.id}"
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+														>{t.parentGroup.name}</a
+													>
+												{:else}{$_("no-organization-specified")}{/if}
+											</div>
+										</div>
+									</td>
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="flex items-center">
+											<div class="text-sm font-medium text-gray-900">
+												{#if t.contact}
+													<a
+														href="../contacts/{t.contact.id}"
+														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+														>{t.contact.firstname}
+														{t.contact.middlename || ""}
+														{t.contact.lastname}</a
+													>
+												{:else}{$_("no-contact-specified")}{/if}
+											</div>
+										</div>
+									</td>
+									{#if active_deletes[t.id] === true}
+										<td
+											class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+										>
+											<button
+												on:click={() => {
+													active_deletes[t.id] = false;
+												}}
+												tabindex="0"
+												class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+												>{$_("cancel-delete")}</button
+											>
+											<button
+												on:click={() => {
+													RunnerTeamService.runnerTeamControllerRemove(
+														t.id,
+														false
+													)
+														.then((resp) => {
+															current_teams = current_teams.filter(
+																(obj) => obj.id !== t.id
+															);
+															toast($_("team-deleted"));
+														})
+														.catch((err) => {
+															modal_open = true;
+															delete_team = t;
+														});
+												}}
+												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="./{t.id}"
+												class="text-indigo-600 hover:text-indigo-900"
+												>{$_("details")}</a
+											>
+											{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
+												<button
+													on:click={() => {
+														active_deletes[t.id] = true;
+													}}
+													tabindex="0"
+													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+													>{$_("delete")}</button
+												>
+											{/if}
+										</td>
+									{/if}
+								</tr>
+							{/if}
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	{:catch error}
+		<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+			<span class="inline-block align-middle mr-8">
+				<b class="capitalize">{$_("general_promise_error")}</b>
+				{error}
+			</span>
+		</div>
+	{/await}
 {/if}

src/components/tracks/AddTrackModal.svelte

@@ -139,7 +139,7 @@
                     bind:this={trackname_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if isTracknameValid}
                     <span
@@ -164,7 +164,7 @@
                       bind:value={tracklength}
                       type="number"
                       name="track_length_m"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder="1000"
                     />
                     <span
@@ -195,7 +195,7 @@
                       bind:value={track_min_duration}
                       type="number"
                       name="track_min_duration"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
                       placeholder={smart_track_min_duration_placeholder}
                     />
                     <span

src/components/tracks/TracksOverview.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("tracks")}
   </h4>
   <button
@@ -101,7 +101,7 @@
                     <div class="ml-4">
                       {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
                         <input
-                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5"
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-0.5"
                           type="text"
                           value={t.name}
                           on:input={(e) => {
@@ -124,7 +124,7 @@
                     <div class="ml-4">
                       {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
                       <input
-                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5"
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-0.5"
                           type="number"
                           value={t.distance}
                           on:input={(e) => {
@@ -147,7 +147,7 @@
                     <div class="ml-4">
                       {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
                       <input
-                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5"
+                          class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-0.5"
                           type="number"
                           value={t.minimumLapTime}
                           on:input={(e) => {

src/components/users/AddUserModal.svelte

@@ -156,7 +156,7 @@
                     bind:this={firstname_input}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isFirstnameValid}
                     <span
@@ -179,7 +179,7 @@
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div> -->
                 <div class="col-span-6">
@@ -198,7 +198,7 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isLastnameValid}
                     <span
@@ -224,7 +224,7 @@
                     bind:this={password_input}
                     type="password"
                     name="password"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   <PasswordStrength
                     bind:password_change={password_input_value}
@@ -243,7 +243,7 @@
                     bind:this={username_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                 </div>
                 <div class="col-span-6">
@@ -259,7 +259,7 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
                   />
                   {#if !isEmailValid}
                     <span

src/components/users/UserDetail.svelte

@@ -1,235 +1,217 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import isEmail from "validator/es/lib/isEmail";
-  import { UserService, UserGroupService } from "@odit/lfk-client-js";
-  import PromiseError from "../base/PromiseError.svelte";
-  import toast from "svelte-french-toast";
-  export let params;
-  const user_promise = UserService.userControllerGetOne(params.userid);
-  let data_loaded = false;
-  let usergroups_array_original = [];
-  const colors = [
-    "#f3558e",
-    "#17b978",
-    "#3498db",
-    "#3f3b3b",
-    "#775ada",
-    "#7ed6df_#000000",
-    "#000000",
-    "#21e6c1_#000000",
-    "#c0392b",
-    "#d35400",
-    "#7f8c8d",
-    "#6ab04c",
-    "#4834d4",
-    "#ff1f5a",
-    "#eac100",
-  ];
-  let matched_colors = [];
-  $: delete_triggered = false;
-  $: original_data = {};
-  $: editable_userdata = {};
-  $: allgroups = [];
-  $: allgroups_ids = [];
-  $: usergroups_array = [];
-  $: search_permission = "";
-  user_promise.then((data) => {
-    let current_target = "";
-    let colorindex = -1;
-    // alphabetically sort permissions for color compatibility for target
-    data.permissions = data.permissions.sort();
-    data.permissions.forEach((p) => {
-      const target = p.split(":")[0];
-      if (current_target !== p.split(":")[0]) {
-        colorindex++;
-        current_target = p.split(":")[0];
-      }
-      let background = colors[colorindex];
-      let foreground = "#fff";
-      if (background.includes("_")) {
-        foreground = background.split("_")[1];
-        background = background.split("_")[0];
-      }
-      matched_colors[target] = [background, foreground];
-    });
-    //
-    data_loaded = true;
-    original_data = Object.assign(original_data, data);
-    editable_userdata = data;
-    data.groups.forEach((g) => {
-      usergroups_array = usergroups_array.concat([g.id]);
-    });
-    usergroups_array_original = usergroups_array;
-    allgroups.forEach((g) => {
-      allgroups_ids.push(g.id);
-    });
-  });
-  UserGroupService.userGroupControllerGetAll().then((data) => {
-    allgroups = data;
-  });
-  $: changes_performed = !(
-    JSON.stringify(original_data) == JSON.stringify(editable_userdata)
-  );
-  $: groups_changed =
-    JSON.stringify(usergroups_array) ===
-    JSON.stringify(usergroups_array_original);
-  $: save_enabled =
-    (changes_performed || !groups_changed) && isEmail(editable_userdata.email);
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      editable_userdata.groups = usergroups_array;
-      toast.loading($_("updating-user"));
-      UserService.userControllerPut(original_data.id, editable_userdata)
-        .then((resp) => {
-          Object.assign(original_data, resp);
-          Object.assign(editable_userdata, resp);
-          original_data.permissions = resp.permissions;
-          usergroups_array = [];
-          resp.groups.forEach((g) => {
-            usergroups_array = usergroups_array.concat([g.id]);
-          });
-          usergroups_array_original = usergroups_array;
-          //
-          toast.dismiss();
-          toast($_("user-updated"));
-        })
-        .catch((err) => {});
-    }
-  }
-  function deleteUser() {
-    UserService.userControllerRemove(original_data.id, true)
-      .then((resp) => {
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
+	import { _ } from "svelte-i18n";
+	import store from "../../store";
+	import isEmail from "validator/es/lib/isEmail";
+	import { UserService, UserGroupService } from "@odit/lfk-client-js";
+	import PromiseError from "../base/PromiseError.svelte";
+	import toast from "svelte-french-toast";
+	export let params;
+	const user_promise = UserService.userControllerGetOne(params.userid);
+	let data_loaded = false;
+	let usergroups_array_original = [];
+	const colors = [
+		"#f3558e",
+		"#17b978",
+		"#3498db",
+		"#3f3b3b",
+		"#775ada",
+		"#7ed6df_#000000",
+		"#000000",
+		"#21e6c1_#000000",
+		"#c0392b",
+		"#d35400",
+		"#7f8c8d",
+		"#6ab04c",
+		"#4834d4",
+		"#ff1f5a",
+		"#eac100",
+	];
+	let matched_colors = [];
+	$: delete_triggered = false;
+	$: original_data = {};
+	$: editable_userdata = {};
+	$: allgroups = [];
+	$: allgroups_ids = [];
+	$: usergroups_array = [];
+	$: search_permission = "";
+	user_promise.then((data) => {
+		let current_target = "";
+		let colorindex = -1;
+		// alphabetically sort permissions for color compatibility for target
+		data.permissions = data.permissions.sort();
+		data.permissions.forEach((p) => {
+			const target = p.split(":")[0];
+			if (current_target !== p.split(":")[0]) {
+				colorindex++;
+				current_target = p.split(":")[0];
+			}
+			let background = colors[colorindex];
+			let foreground = "#fff";
+			if (background.includes("_")) {
+				foreground = background.split("_")[1];
+				background = background.split("_")[0];
+			}
+			matched_colors[target] = [background, foreground];
+		});
+		//
+		data_loaded = true;
+		original_data = Object.assign(original_data, data);
+		editable_userdata = data;
+		data.groups.forEach((g) => {
+			usergroups_array = usergroups_array.concat([g.id]);
+		});
+		usergroups_array_original = usergroups_array;
+		allgroups.forEach((g) => {
+			allgroups_ids.push(g.id);
+		});
+	});
+	UserGroupService.userGroupControllerGetAll().then((data) => {
+		allgroups = data;
+	});
+	$: changes_performed = !(
+		JSON.stringify(original_data) == JSON.stringify(editable_userdata)
+	);
+	$: groups_changed =
+		JSON.stringify(usergroups_array) ===
+		JSON.stringify(usergroups_array_original);
+	$: save_enabled =
+		(changes_performed || !groups_changed) && isEmail(editable_userdata.email);
+	function submit() {
+		if (data_loaded === true && save_enabled) {
+			editable_userdata.groups = usergroups_array;
+			toast.loading($_("updating-user"));
+			UserService.userControllerPut(original_data.id, editable_userdata)
+				.then((resp) => {
+					Object.assign(original_data, resp);
+					Object.assign(editable_userdata, resp);
+					original_data.permissions = resp.permissions;
+					usergroups_array = [];
+					resp.groups.forEach((g) => {
+						usergroups_array = usergroups_array.concat([g.id]);
+					});
+					usergroups_array_original = usergroups_array;
+					//
+					toast.dismiss();
+					toast($_("user-updated"));
+				})
+				.catch((err) => {});
+		}
+	}
+	function deleteUser() {
+		UserService.userControllerRemove(original_data.id, true)
+			.then((resp) => {
+				location.replace("./");
+			})
+			.catch((err) => {});
+	}
 </script>
 
 {#await user_promise}
-  <!--  -->
+	<!--  -->
 {:then user}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                class="flex-shrink-0 w-5 h-5 mr-2"
-                fill="currentColor"
-                width="24"
-                height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                ><path
-                  fill="currentColor"
-                  d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z"
-                /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">{$_("users")}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                ><line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg
-              >
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2"
-                >{original_data.firstname}
-                {original_data.lastname}</span
-              >
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold">
-      {original_data.firstname}
-      {original_data.lastname}
-      <span data-id="user_actions_${editable_userdata.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("USER:DELETE")}
-          {#if delete_triggered}
-            <button
-              on:click={deleteUser}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("confirm-delete")}</button
-            >
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-              >{$_("cancel")}</button
-            >
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
-              >{$_("delete-user")}</button
-            >
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
-            >{$_("save-changes")}</button
-          >
-        {/if}
-      </span>
-    </div>
-    <div class="mt-3 text-sm w-full">
-      <label for="enabled" class="ml-1 font-medium text-gray-700"
-        >{$_("active")}?</label
-      >
-      <br />
-      <p class="text-gray-500">
-        <input
-          id="enabled"
-          on:change={() => {
-            editable_userdata.enabled = !editable_userdata.enabled;
-          }}
-          name="enabled"
-          type="checkbox"
-          checked={editable_userdata.enabled}
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-        />
-        {$_("set-the-user-active-inactive")}
-      </p>
-    </div>
-    <div class="text-sm w-full">
-      <label for="firstname" class="font-medium text-gray-700"
-        >{$_("first-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("first-name")}
-        type="text"
-        bind:value={editable_userdata.firstname}
-        name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <!-- <div class="text-sm w-full">
-      <label for="middlename" class="font-medium text-gray-700"
+	<section class="container p-5 select-none">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center">
+							<a class="mr-2" href="./"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("users")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold">
+			{original_data.firstname}
+			{original_data.lastname}
+			<span data-id="user_actions_${editable_userdata.id}">
+				{#if store.state.jwtinfo.userdetails.permissions.includes("USER:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteUser}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-delete")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-user")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						on:click={submit}
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</span>
+		</div>
+		<div class="mt-3 text-sm w-full">
+			<label for="enabled" class="font-semibold text-gray-700"
+				>{$_("active")}?</label
+			>
+			<br />
+			<p class="text-gray-500">
+				<input
+					id="enabled"
+					on:change={() => {
+						editable_userdata.enabled = !editable_userdata.enabled;
+					}}
+					name="enabled"
+					type="checkbox"
+					checked={editable_userdata.enabled}
+					class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+				/>
+				{$_("set-the-user-active-inactive")}
+			</p>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="firstname" class="font-semibold text-gray-700"
+				>{$_("first-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("first-name")}
+				type="text"
+				bind:value={editable_userdata.firstname}
+				name="firstname"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<!-- <div class="text-sm w-full mt-2">
+      <label for="middlename" class="font-semibold text-gray-700"
         >{$_("middle-name")}</label
       >
       <input
@@ -238,102 +220,102 @@
         type="text"
         bind:value={editable_userdata.middlename}
         name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
       />
     </div> -->
-    <div class="text-sm w-full">
-      <label for="lastname" class="font-medium text-gray-700"
-        >{$_("last-name")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("last-name")}
-        type="text"
-        bind:value={editable_userdata.lastname}
-        name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full">
-      <label for="email" class="font-medium text-gray-700"
-        >{$_("e-mail-adress")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("e-mail-adress")}
-        type="email"
-        bind:value={editable_userdata.email}
-        name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    {#if !isEmail(editable_userdata.email)}
-      <span
-        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-        >{$_("valid-email-is-required")}</span
-      >
-    {/if}
-    <div class="text-sm w-full">
-      <label for="username" class="font-medium text-gray-700"
-        >{$_("username")}</label
-      >
-      <input
-        autocomplete="off"
-        placeholder={$_("username")}
-        type="text"
-        bind:value={editable_userdata.username}
-        name="username"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-      />
-    </div>
-    <div class="text-sm w-full">
-      <span class="font-medium">{$_("groups")}</span>
-      <!-- svelte-ignore a11y-no-onchange -->
-      <select
-        bind:value={usergroups_array}
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        multiple
-      >
-        {#each allgroups as g}
-          {#if usergroups_array.includes(g.id)}
-            <option selected value={g.id}>{g.name}</option>
-          {:else}
-            <option value={g.id}>{g.name}</option>
-          {/if}
-        {/each}
-      </select>
-    </div>
-    <div class="text-sm w-full mt-8">
-      <p class="font-medium mb-4">
-        {$_("permissions")}
-        <a
-          class="px-4 py-2 bg-gray-500 rounded-md text-white"
-          href="/users/{params.userid}/permissions/">{$_("edit-permissions")}</a
-        >
-      </p>
-      <div class="w-full sm:my-px sm:px-px sm:w-1/2">
-        <input
-          autocomplete="off"
-          placeholder={$_("search-for-permission")}
-          type="text"
-          bind:value={search_permission}
-          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        />
-      </div>
-      {#each original_data.permissions as p}
-        {#if p.toLowerCase().includes(search_permission.toLowerCase())}
-          <span
-            style="background:{matched_colors[
-              p.split(':')[0]
-            ][0]};color:{matched_colors[p.split(':')[0]][1]};"
-            class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded"
-            >{p}</span
-          >
-          <!--  -->
-        {/if}
-      {/each}
-    </div>
-  </section>
+		<div class="text-sm w-full mt-2">
+			<label for="lastname" class="font-semibold text-gray-700"
+				>{$_("last-name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("last-name")}
+				type="text"
+				bind:value={editable_userdata.lastname}
+				name="lastname"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="email" class="font-semibold text-gray-700"
+				>{$_("e-mail-adress")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("e-mail-adress")}
+				type="email"
+				bind:value={editable_userdata.email}
+				name="email"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		{#if !isEmail(editable_userdata.email)}
+			<span
+				class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>{$_("valid-email-is-required")}</span
+			>
+		{/if}
+		<div class="text-sm w-full mt-2">
+			<label for="username" class="font-semibold text-gray-700"
+				>{$_("username")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("username")}
+				type="text"
+				bind:value={editable_userdata.username}
+				name="username"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<span class="font-semibold">{$_("groups")}</span>
+			<!-- svelte-ignore a11y-no-onchange -->
+			<select
+				bind:value={usergroups_array}
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				multiple
+			>
+				{#each allgroups as g}
+					{#if usergroups_array.includes(g.id)}
+						<option selected value={g.id}>{g.name}</option>
+					{:else}
+						<option value={g.id}>{g.name}</option>
+					{/if}
+				{/each}
+			</select>
+		</div>
+		<div class="text-sm w-full mt-8">
+			<p class="font-medium mb-4">
+				{$_("permissions")}
+				<a
+					class="px-4 py-2 bg-gray-500 rounded-md text-white"
+					href="/users/{params.userid}/permissions/">{$_("edit-permissions")}</a
+				>
+			</p>
+			<div class="w-full sm:my-px sm:px-px sm:w-1/2">
+				<input
+					autocomplete="off"
+					placeholder={$_("search-for-permission")}
+					type="text"
+					bind:value={search_permission}
+					class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+			</div>
+			{#each original_data.permissions as p}
+				{#if p.toLowerCase().includes(search_permission.toLowerCase())}
+					<span
+						style="background:{matched_colors[
+							p.split(':')[0]
+						][0]};color:{matched_colors[p.split(':')[0]][1]};"
+						class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded"
+						>{p}</span
+					>
+					<!--  -->
+				{/if}
+			{/each}
+		</div>
+	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}

src/components/users/UserPermissions.svelte

@@ -138,7 +138,7 @@
         </nav>
       </div>
     </div>
-    <div class="mb-8 text-3xl font-extrabold">
+    <div class="mb-4 text-3xl font-extrabold">
       {$_("permissions")}:
       {original_data.firstname}
       {original_data.middlename || ""}

src/components/users/Users.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("users")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("USER:CREATE")}

src/components/users/UsersOverview.svelte

@@ -115,11 +115,11 @@
                       >
                     {/if}
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 gap-0.5 flex flex-wrap">
                     {#each u.groups as g}
                       <a
                         href="../groups/{g.id}"
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border bg-gray-100 text-gray-800"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full border bg-gray-100 text-gray-800 border-current"
                         >{g.name}</a
                       >
                     {/each}

src/main.js

@@ -1,5 +1,11 @@
 import "./style.css";
 import App from "./App.svelte";
+import "@fontsource/athiti/200.css";
+import "@fontsource/athiti/300.css";
+import "@fontsource/athiti/400.css";
+import "@fontsource/athiti/500.css";
+import "@fontsource/athiti/600.css";
+import "@fontsource/athiti/700.css";
 
 const app = new App({
   target: document.body,

src/style.css

@@ -1,7 +1,10 @@
 @tailwind base;
 @tailwind components;
 .activenav {
-    @apply bg-gray-300;
-    @apply text-black;
+  @apply bg-gray-300;
+  @apply text-black;
+}
+* {
+  font-family: Athiti;
 }
 @tailwind utilities;

versionbuilder.js

@@ -1,10 +1,10 @@
 import fs from "fs";
 const packagejson = JSON.parse(
-  fs.readFileSync(`./package.json`, { encoding: "utf-8" })
+  fs.readFileSync(`./package.json`, { encoding: "utf-8" }),
 );
 const original = fs.readFileSync(`./index.html`, { encoding: "utf-8" });
 let out = original.replace(
   /RELEASE_INFO-(\S)+-RELEASE_INFO/gi,
-  "RELEASE_INFO-" + packagejson.version + "-RELEASE_INFO"
+  "RELEASE_INFO-" + packagejson.version + "-RELEASE_INFO",
 );
 fs.writeFileSync(`./index.html`, out);