Merge pull request 'sync - 0.12.3' (#127 ) from dev into main

Reviewed-on: #127 Reviewed-by: Nicolai Ort <info@nicolai-ort.com>
Merge pull request 'Merge Minor into main' (#113 ) from dev into main
2021-04-08 17:28:29 +00:00 · 2021-03-26 16:34:53 +00:00
110 changed files with 2811 additions and 10434 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,2 +1 @@
 public/env.sample.js
 .pnpm-store
--- a/.drone.yml
+++ b/.drone.yml
@@ -19,13 +19,6 @@ get:
  path: odit-git-bot
  name: sshkey
 ---
 kind: secret
 name: npm_url
 get:
  path: odit-npm-cache
  name: url
 ---
 kind: pipeline
 type: kubernetes
@@ -34,14 +27,10 @@ name: build:dev
 steps:
  - name: run full license export
    depends_on: ["clone"]
-    image: registry.odit.services/hub/library/node:19.7.0-alpine3.16
+    image: node:alpine
    commands:
-      - npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8
+      - yarn
-      - pnpm i
+      - yarn licenses:export
      - pnpm licenses:export
    environment:
      NPM_REGISTRY_URL:
        from_secret: npm_url
  - name: push new licenses file to repo
    depends_on: ["run full license export"]
    image: appleboy/drone-git-push
@@ -54,21 +43,18 @@ steps:
      ssh_key:
        from_secret: git_ssh
  - name: build dev
-    depends_on: ["clone"]
+    image: plugins/docker
-    image: registry.odit.services/library/drone-kaniko
+    depends_on: [clone]
    settings:
      username:
        from_secret: docker_username
      password:
        from_secret: docker_password
-      build_args:
+      repo: registry.odit.services/lfk/frontend
        - NPM_REGISTRY_URL:
          from_secret: npm_url
      repo: lfk/frontend
      tags:
        - dev
      cache: true
      registry: registry.odit.services
      mtu: 1000
 trigger:
  branch:
    - dev
@@ -81,21 +67,18 @@ type: kubernetes
 name: build:tags
 steps:
  - name: build $DRONE_TAG
-    depends_on: ["clone"]
+    image: plugins/docker
-    image: registry.odit.services/library/drone-kaniko
+    depends_on: [clone]
    settings:
      username:
        from_secret: docker_username
      password:
        from_secret: docker_password
-      build_args:
+      repo: registry.odit.services/lfk/frontend
        - NPM_REGISTRY_URL:
          from_secret: npm_url
      repo: lfk/frontend
      tags:
-        - "${DRONE_TAG}"
+        - '${DRONE_TAG}'
      cache: true
      registry: registry.odit.services
      mtu: 1000
 trigger:
  event:
  - tag
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,10 @@
 node_modules
 package-lock.json
 yarn.lock
 *.map
 public/env.js
 public/index.html
 /dist
-.pnpm-store
+.yarn
 .pnp.js
 .yarnrc.yml
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,519 +2,8 @@
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 #### [1.3.4](https://git.odit.services/lfk/frontend/compare/1.3.3...1.3.4)
 - Smaller sponsoring page size [`7cb6b63`](https://git.odit.services/lfk/frontend/commit/7cb6b63eb9596da4ee84369b220c3e680c607032)
 #### [1.3.3](https://git.odit.services/lfk/frontend/compare/1.3.2...1.3.3)
 > 19 April 2023
 - 🚀RELEASE v1.3.3 [`d6d88f5`](https://git.odit.services/lfk/frontend/commit/d6d88f5f60716ca496a17f09b835b23223ec495d)
 - bumped lfk-client-js [`2c208c4`](https://git.odit.services/lfk/frontend/commit/2c208c438185892270a0ebd37deb6a7c9ac08fc0)
 #### [1.3.2](https://git.odit.services/lfk/frontend/compare/1.3.1...1.3.2)
 > 19 April 2023
 - 🚀RELEASE v1.3.2 [`39bc6c4`](https://git.odit.services/lfk/frontend/commit/39bc6c49450964510f996369d014f92c569188ae)
 - fix(donors): Shortened texts [`b94e3b7`](https://git.odit.services/lfk/frontend/commit/b94e3b745f2febbe91e16a7a26f96b47d347ab92)
 - feat(donations): Resolve donations via donor [`6f337ae`](https://git.odit.services/lfk/frontend/commit/6f337aeee16267d1e67e3d3855b63b6f2e57979f)
 - fix(donors): Removed debug infos [`5d48060`](https://git.odit.services/lfk/frontend/commit/5d48060834717b2244172a0914e2690f8fe634d9)
 #### [1.3.1](https://git.odit.services/lfk/frontend/compare/1.3.0...1.3.1)
 > 19 April 2023
 - feat(donations): Donation table filtering [`91ab199`](https://git.odit.services/lfk/frontend/commit/91ab199769c9f4f8051c74ad43a701db321f3995)
 - feat(donors): Added name and address filtering [`27b4dde`](https://git.odit.services/lfk/frontend/commit/27b4dde7551995c9d7e8ca33a9bd97d429a35801)
 - 🚀RELEASE v1.3.1 [`c842c20`](https://git.odit.services/lfk/frontend/commit/c842c203e2fbf0a201297d475db9047c0691bd52)
 - More filtering [`5bcfc8d`](https://git.odit.services/lfk/frontend/commit/5bcfc8db752fce96e9f523d14cefff1a4f675661)
 #### [1.3.0](https://git.odit.services/lfk/frontend/compare/1.2.0...1.3.0)
 > 19 April 2023
 - feat(donations): Implemented donation deletion via confirm modal [`505fb8c`](https://git.odit.services/lfk/frontend/commit/505fb8cb08b81a7dcb08561bdda0f6464f140d3e)
 - 🚀RELEASE v1.3.0 [`e75be49`](https://git.odit.services/lfk/frontend/commit/e75be49be42c3d5581e2204bfa064bfa3778c1b6)
 - feat(donationsoverview): Switched donations overview to datatable [`133470b`](https://git.odit.services/lfk/frontend/commit/133470b6f2a63ec087f27c98ef260648a8672e5f)
 - feat(donations): Implemented add donation payment via datatable refresh [`e5c9265`](https://git.odit.services/lfk/frontend/commit/e5c92655886ad9a6fcd7565fadd7955c477c3595)
 - feat(donations): Donations reactive create and load into datatable [`02003ec`](https://git.odit.services/lfk/frontend/commit/02003ec80efc16aabd126710a6eeac18df43f841)
 - feat(DonationsOverview): i18n loading text [`8f8858f`](https://git.odit.services/lfk/frontend/commit/8f8858f10071ddf9988d0ec0e3c4a891db24a102)
 - new license file version [CI SKIP] [`4289034`](https://git.odit.services/lfk/frontend/commit/4289034436869750205a946247e7ab5f9892fe98)
 #### [1.2.0](https://git.odit.services/lfk/frontend/compare/1.1.0...1.2.0)
 > 19 April 2023
 - feat(donoroverview): Added datatable formatters [`d98fb0d`](https://git.odit.services/lfk/frontend/commit/d98fb0d5b288c987a45ccbf2bb026ccaab539a71)
 - 🚀RELEASE v1.2.0 [`fdc7d80`](https://git.odit.services/lfk/frontend/commit/fdc7d80bbf9bd698128e9ec4f91fa813499777a9)
 - feat(donors): Load donors paginated [`5014bf5`](https://git.odit.services/lfk/frontend/commit/5014bf5bc5873cfe4ae04d71b4aff12b257dd2e3)
 - feat(donorsoverview): Dynamicly add newly generated donors [`352551e`](https://git.odit.services/lfk/frontend/commit/352551e168b5dced5e7353e82655908d82d28af0)
 - feat(donorsoverview): Implemented delete confirmation with datatable [`7aec050`](https://git.odit.services/lfk/frontend/commit/7aec050419f6f1bf853c3e1bc655b01725ed3b65)
 #### [1.1.0](https://git.odit.services/lfk/frontend/compare/1.0.0...1.1.0)
 > 19 April 2023
 - 🚀RELEASE v1.1.0 [`0708cab`](https://git.odit.services/lfk/frontend/commit/0708cabc75e63a876e54a0b343318f8d934ae319)
 - feat(dashboar): Added total donors to overview [`e0b6148`](https://git.odit.services/lfk/frontend/commit/e0b61486b089aa1e611ef3569b1521fc331ec0e4)
 - feat(dashboard): Updated stats icons [`4fcb26c`](https://git.odit.services/lfk/frontend/commit/4fcb26cf9371e27e5d7e474b3558ef354e9114c0)
 - feat(dashboard): Added average sponsoring [`269def2`](https://git.odit.services/lfk/frontend/commit/269def20d114ededaba3153bbd50ec2ddd70e1c6)
 - feat(dashboard): Added total donations [`7b2b598`](https://git.odit.services/lfk/frontend/commit/7b2b59858839b98370af6fb1e6028ba0a1639186)
 - feat(dashboard): Added average distance [`b8de9e0`](https://git.odit.services/lfk/frontend/commit/b8de9e0e427b3a8b56e6354ad7168ae12c7cce85)
 - Lockfile [`3f86f74`](https://git.odit.services/lfk/frontend/commit/3f86f7412ffc4bc27328ad1f7d3c3118546e7e29)
 - Bumped client [`6454d96`](https://git.odit.services/lfk/frontend/commit/6454d960de3f9f5ea86679f157b3b7e7cffde74d)
 - new license file version [CI SKIP] [`2a64094`](https://git.odit.services/lfk/frontend/commit/2a640940062765a470387103a72ed14a2411d97b)
 ### [1.0.0](https://git.odit.services/lfk/frontend/compare/0.19.0...1.0.0)
 > 19 April 2023
 - 🚀RELEASE v1.0.0 [`8da7578`](https://git.odit.services/lfk/frontend/commit/8da7578a0a46a3e97d8c870e29399f6e8821c9fa)
 - Merge pull request 'feature/175-request_pagination' (#176) from feature/175-request_pagination into dev [`e9ce964`](https://git.odit.services/lfk/frontend/commit/e9ce9644ff03f981cec6e9ad56aa5fdf0ff71ef4)
 - Donation paginated loading [`ccf8656`](https://git.odit.services/lfk/frontend/commit/ccf865687b34016931a702c0a9b98a0a18e2b03a)
 - Paginated scan loading [`cac34db`](https://git.odit.services/lfk/frontend/commit/cac34db1fd3bf5dc7c7be64b3a76ca4c8c77938d)
 - Implemented Async loading of cards via pagination (500 cards per request) [`c33dfcf`](https://git.odit.services/lfk/frontend/commit/c33dfcfddddfed0902f3fa9b1d8a1d3e1560262f)
 - Paginated runner loading (1000 per page) [`faf3893`](https://git.odit.services/lfk/frontend/commit/faf3893180bb735bea6f1ea58c896686b89949fe)
 - Allways set loaded to true [`52439aa`](https://git.odit.services/lfk/frontend/commit/52439aa5bc8cfb1d78d5dfce55b1a0df640ad8f5)
 - Bumped lfk client [`019e14a`](https://git.odit.services/lfk/frontend/commit/019e14ab1f99906f13d36c7148d0f4b7894072f2)
 - new license file version [CI SKIP] [`a6ce04c`](https://git.odit.services/lfk/frontend/commit/a6ce04c90386f16abf235cc7b2f95aeea5011c7d)
 #### [0.19.0](https://git.odit.services/lfk/frontend/compare/0.18.4...0.19.0)
 > 17 April 2023
 - 🚀RELEASE v0.19.0 [`94a64ca`](https://git.odit.services/lfk/frontend/commit/94a64ca69078c7fe2935eeb5f955fab95a79cb85)
 - Merge pull request 'feature/173-scanstation_configcodes' (#174) from feature/173-scanstation_configcodes into dev [`165c154`](https://git.odit.services/lfk/frontend/commit/165c1542338c58f2abf42fef2e7b84b40d1e2d9c)
 - I18n [`e60c09e`](https://git.odit.services/lfk/frontend/commit/e60c09e19c9cc20338906e84f4db4e009d926360)
 - Implemented config code generation [`4b63427`](https://git.odit.services/lfk/frontend/commit/4b6342727ee0ea38597750d8c99edc301f1ccc2d)
 - Styling [`4834d14`](https://git.odit.services/lfk/frontend/commit/4834d1484c3fb6ecd4a1b56aa9fbb8125c641a62)
 - Adjusted size on smaller devices [`318547d`](https://git.odit.services/lfk/frontend/commit/318547db46045e41de64d5688368e85cd6fb8035)
 - Lockfile [`947d01c`](https://git.odit.services/lfk/frontend/commit/947d01cf7fc7fe2ee88c56e017b0d663f1f3b4f9)
 - Barcode placeholder [`cb5fa52`](https://git.odit.services/lfk/frontend/commit/cb5fa52cd9a97490b50fb0c02c26615b49650c08)
 - Added bwip-js for barcode generation [`3563394`](https://git.odit.services/lfk/frontend/commit/3563394fb33d661890327e2ae08c400830b37844)
 #### [0.18.4](https://git.odit.services/lfk/frontend/compare/0.18.3...0.18.4)
 > 15 April 2023
 - 🚀RELEASE v0.18.4 [`269d7a7`](https://git.odit.services/lfk/frontend/commit/269d7a7defdde059ef2bb5103262cf734e9babe9)
 - Hide address2 in orgs by default [`e95f233`](https://git.odit.services/lfk/frontend/commit/e95f2333b0b958ed00c0e097b43aac2e70ad0d38)
 #### [0.18.3](https://git.odit.services/lfk/frontend/compare/0.18.2...0.18.3)
 > 15 April 2023
 - 🚀RELEASE v0.18.3 [`950217e`](https://git.odit.services/lfk/frontend/commit/950217e0a350f9999b879475edf41f2f11c48179)
 - Dont show adress 2 in runner overview [`5e65fb3`](https://git.odit.services/lfk/frontend/commit/5e65fb33013c3dad38e7ad6740b017ae206f278f)
 #### [0.18.2](https://git.odit.services/lfk/frontend/compare/0.18.1...0.18.2)
 > 15 April 2023
 - 🚀RELEASE v0.18.2 [`2a294cd`](https://git.odit.services/lfk/frontend/commit/2a294cde040044bbebfb9c8b34b6c91b27772741)
 - Added timestamps to scanoverview [`cffbd17`](https://git.odit.services/lfk/frontend/commit/cffbd17dc77054048cc9b14891f960f9a3fd18cb)
 - Push in releaseit [`e95420d`](https://git.odit.services/lfk/frontend/commit/e95420d79c3227c0ca0cf0c0b599970c2b7d690e)
 #### [0.18.1](https://git.odit.services/lfk/frontend/compare/0.18.0...0.18.1)
 > 15 April 2023
 - 🚀RELEASE v0.18.1 [`00de8c3`](https://git.odit.services/lfk/frontend/commit/00de8c3d75e90cd4614f42111f5f45bedde64130)
 - Missing scanstation translations [`30e3396`](https://git.odit.services/lfk/frontend/commit/30e33968978bf33cedb31bcbf63fac273e1664f5)
 - fix: button onclick a11y [`9fe53b0`](https://git.odit.services/lfk/frontend/commit/9fe53b0b9c71e8a6b4aa3f317327ffe729df0834)
 - fix(ConfirmStatsClientDeletion): ScanStationService -&gt; StatsClientService [`5291e04`](https://git.odit.services/lfk/frontend/commit/5291e049a1d2e880fbe277095da91b70d4812c3f)
 - fix(ConfirmScanStationDeletion): donorControllerRemove -&gt; scanStationControllerRemove [`08fbb50`](https://git.odit.services/lfk/frontend/commit/08fbb504c958415ce75e1e426296f870f0f1358d)
 #### [0.18.0](https://git.odit.services/lfk/frontend/compare/0.17.3...0.18.0)
 > 12 April 2023
 - Moved filter function to typed version [`#171`](https://git.odit.services/lfk/frontend/issues/171)
 - ScansOverview: migrate to datatable [`#168`](https://git.odit.services/lfk/frontend/issues/168)
 - 🚀RELEASE v0.18.0 [`eb80406`](https://git.odit.services/lfk/frontend/commit/eb80406fdb8abf3f76bca742095e8f1f03480a56)
 - wip: ScansOverview -&gt; new datatable [`c87561f`](https://git.odit.services/lfk/frontend/commit/c87561f63b90ab951daf91d9b8b54ba96a94cc7f)
 - Basic card table replace [`5662c3b`](https://git.odit.services/lfk/frontend/commit/5662c3b6da67c00c94254bf39f8820e531fc93ef)
 - RunnersOverview: table responsiveness [`bf1e715`](https://git.odit.services/lfk/frontend/commit/bf1e715261c0076fd8543dd1187c516209a73b16)
 - Basic card delete modal [`8ffe8ef`](https://git.odit.services/lfk/frontend/commit/8ffe8eff0623767809cdc49ea15cf2d30b609285)
 - wip: delete scans [`f105cc0`](https://git.odit.services/lfk/frontend/commit/f105cc0a41972261610d03015ecd5ee492dab8e2)
 - Added delete runner modal [`fd5db7d`](https://git.odit.services/lfk/frontend/commit/fd5db7d68ab4b32f7bb14bd0275a447b749e1fd8)
 - Extracted table bottom [`8f50555`](https://git.odit.services/lfk/frontend/commit/8f50555a06a35d0b11ac1d9201851d00d915c4b8)
 - fix: formatting [`9def0b2`](https://git.odit.services/lfk/frontend/commit/9def0b27c9958c5c75466f56c17b6dc4d44d2b50)
 - fix(CardsOverview): table scroll + checkbox posititioning [`9c13b2f`](https://git.odit.services/lfk/frontend/commit/9c13b2f9e938ad36cb74c66a8f91a5b872c8c2d1)
 - Extracted table header [`c241961`](https://git.odit.services/lfk/frontend/commit/c241961d0ab0d6b8c3bf0453c1a21d84027ed62f)
 - drop legacy dependencies [`c98eb49`](https://git.odit.services/lfk/frontend/commit/c98eb49ae31d1d28de79c7a9c945ade50828f07f)
 - scan delete working [`c7dcf7c`](https://git.odit.services/lfk/frontend/commit/c7dcf7c66d7141117e08462ad05f6f441565d012)
 - Add Card appends current cards [`195d182`](https://git.odit.services/lfk/frontend/commit/195d182cc977b4ac9f342f09a9ea69d461892a95)
 - Moved data loading to onmount [`a35af6f`](https://git.odit.services/lfk/frontend/commit/a35af6f02055115d60d040baaf22dabbeda38498)
 - Add runners reactivity [`06411dc`](https://git.odit.services/lfk/frontend/commit/06411dc14747fc9803da009a29688789c31dfc42)
 - quick cleanup [`ebdd1c2`](https://git.odit.services/lfk/frontend/commit/ebdd1c2c0c2191c60dfacd0c4be989748628ca63)
 - Extracted deletion into function of overview [`a0727a0`](https://git.odit.services/lfk/frontend/commit/a0727a02913708de06be8bf1b9f8cbae5489f080)
 - Moved update card logic to overview [`53b945c`](https://git.odit.services/lfk/frontend/commit/53b945c72fa5b30f03eff8bb83f8f25d85d79b07)
 - wip:ScanValid badge [`bd4952e`](https://git.odit.services/lfk/frontend/commit/bd4952ee575b4cd8caea3608b14d8c51b37a55eb)
 - yeeted extra table styling [`52a02c8`](https://git.odit.services/lfk/frontend/commit/52a02c82d2bdabdf3e632910aa415c1ffb97fd7f)
 - Added custom runner filter [`7c6d39b`](https://git.odit.services/lfk/frontend/commit/7c6d39b5fa60d1b834c9fb74dd26dfc2225161d6)
 - Scan reactive add [`f5d14f2`](https://git.odit.services/lfk/frontend/commit/f5d14f2e1810462cba99b2482320746f0750d4a1)
 - Moved code around [`239f79f`](https://git.odit.services/lfk/frontend/commit/239f79fecba732c807f4296cf524be15c1ccff1e)
 - Scan deletion [`7d8c68a`](https://git.odit.services/lfk/frontend/commit/7d8c68a4550407e8c871545e7a0c5f622a1e3b9c)
 - Added status filter function [`f6c1fea`](https://git.odit.services/lfk/frontend/commit/f6c1fea17ce64d890ac810d9dff058dd589c2989)
 - Added delete toast [`e2ddb5a`](https://git.odit.services/lfk/frontend/commit/e2ddb5a14cc8b450c00129709bf5b933a47866dd)
 - Fixed killing of the dom [`2f62c7a`](https://git.odit.services/lfk/frontend/commit/2f62c7ae89b7dda3bc0efd4d56e677898a3f197f)
 - Cards details modal [`f6985da`](https://git.odit.services/lfk/frontend/commit/f6985daec71e4d922acd8a9b2673fd41317b075f)
 - Reload table data on delete [`3e8dac3`](https://git.odit.services/lfk/frontend/commit/3e8dac3203f56723a3dad4a35887d60fc03d4ae3)
 - Added middle-name [`d811058`](https://git.odit.services/lfk/frontend/commit/d8110580e9a33cfb0c6e9cbdce630262d5b5d4c1)
 - Fixed id sorting [`7cec2a0`](https://git.odit.services/lfk/frontend/commit/7cec2a00c513678cae8643ef3905d566a538bde0)
 - Import add to datatable [`2a91562`](https://git.odit.services/lfk/frontend/commit/2a915620c9adcb481be53e3c919bd5f14a5108ee)
 - Scans deletion [`6d9d8a4`](https://git.odit.services/lfk/frontend/commit/6d9d8a4724135df98ed1bec74b0cc20a8bdbda53)
 - fix(DeleteRunnerModal): ESC key [`1df505e`](https://git.odit.services/lfk/frontend/commit/1df505ea00968f65e7aff85baa80f8935fd2eb7b)
 - Versionbuilder [`1613ae7`](https://git.odit.services/lfk/frontend/commit/1613ae7de6e84aa5f9df6774a8e820fcf515b14a)
 - Fixed edit dispatch [`c681570`](https://git.odit.services/lfk/frontend/commit/c68157013431eeb1150e37fea87da02d5f7b032e)
 - ScansOverview: use CardRunner link [`4b171fd`](https://git.odit.services/lfk/frontend/commit/4b171fd04f4fc895f9919294858e546686504c65)
 - Added custom filter to scan overview [`2c198cf`](https://git.odit.services/lfk/frontend/commit/2c198cfde89363142c1c958e6961b7823196e04e)
 - Disable sort for actions [`fc2c290`](https://git.odit.services/lfk/frontend/commit/fc2c2907c43e5b1fa192b571cf93b2f2e492158f)
 - Delete modal logic [`da33005`](https://git.odit.services/lfk/frontend/commit/da3300562a25cf39945a94f873ec27f0d5fb9dc0)
 - Module [`9ae5e62`](https://git.odit.services/lfk/frontend/commit/9ae5e62e5d84097082bc29fe20b329f6e614f6ed)
 - new license file version [CI SKIP] [`ed1caa7`](https://git.odit.services/lfk/frontend/commit/ed1caa7be7673ef08f9c0074101f3cfb52963ab7)
 - Merge pull request 'experiment/tanstack' (#172) from experiment/tanstack into dev [`d88f3a5`](https://git.odit.services/lfk/frontend/commit/d88f3a5a2737921536c5eb109734abafd7609e51)
 - Removed pnpm store [`eb13f03`](https://git.odit.services/lfk/frontend/commit/eb13f038a1990ed2966552ab1d36df4a76e5a99a)
 - dependency update, drop focusTrap, first tanstack experiment in RunnersOverview [`9bec95e`](https://git.odit.services/lfk/frontend/commit/9bec95ede80908e45ad0f18a66dbb45784f7e33e)
 - Added translations [`dcabed4`](https://git.odit.services/lfk/frontend/commit/dcabed4e93134a1f04305c47536f1cc93b0cfb31)
 - new license file version [CI SKIP] [`d0fe6a2`](https://git.odit.services/lfk/frontend/commit/d0fe6a2e8513638c4d8e2b3dafd48b91490eab3b)
 - Bumped pnpm to 8 [`ee91748`](https://git.odit.services/lfk/frontend/commit/ee91748b3c7c2fb4f196d76121713ac42465b9dd)
 - drop old datatables [`cb5f2b7`](https://git.odit.services/lfk/frontend/commit/cb5f2b73d0a5f71875f48d381382919f9bee364e)
 - wip: pagination [`a59dbbe`](https://git.odit.services/lfk/frontend/commit/a59dbbe50ede47e0dada906d10887cc6b1ae3264)
 - Added sort [`842248e`](https://git.odit.services/lfk/frontend/commit/842248e4c43bb94a0e73981d2d848e0723687932)
 - cleanup headers [`5ecf838`](https://git.odit.services/lfk/frontend/commit/5ecf838dd231269c3c4f0d1e3376ff157457b04a)
 - Moved filter function to shared [`2304b12`](https://git.odit.services/lfk/frontend/commit/2304b12c1cca6a64573223906ab0561ba9050ec5)
 - Group filters [`0283df2`](https://git.odit.services/lfk/frontend/commit/0283df22c84740dd978e09120985215b65d7a12a)
 - feat(RunnersOverview): row selection [`6993511`](https://git.odit.services/lfk/frontend/commit/6993511c67cc81303a1eece7fc2a4218dc818afc)
 - Basic details and delete buttons [`9363773`](https://git.odit.services/lfk/frontend/commit/9363773fa1910975d48746572fe166363986c6ab)
 - Added delete cards button [`70307a9`](https://git.odit.services/lfk/frontend/commit/70307a9e8272f22801c6765c947f8576cc1d1102)
 - ScansOverview: add ThFilterTrack [`008835c`](https://git.odit.services/lfk/frontend/commit/008835c24f833aebbecc53921b0901a76f25bf06)
 - Yeeted old datatable references [`8925261`](https://git.odit.services/lfk/frontend/commit/89252619b1f6d478c287178bfffc573cf574a8fa)
 - Added filter [`a9cdac4`](https://git.odit.services/lfk/frontend/commit/a9cdac4f74a80afe3d0ce677ed5256201b75b29b)
 - Moved sort onclick to header only [`3de7b63`](https://git.odit.services/lfk/frontend/commit/3de7b632e058e9ca9ab951de9e86cc2a40eceb68)
 - Switched drone to pnpm cache [`d79608e`](https://git.odit.services/lfk/frontend/commit/d79608edbb7ca68b0a26f6c021a141373308081f)
 - pagination size [`45a7a90`](https://git.odit.services/lfk/frontend/commit/45a7a90cb8ee933d064c5891b3532cb1ece38d38)
 - RunnersOverview: add filter keyboard support [`9415584`](https://git.odit.services/lfk/frontend/commit/94155845f020679e8765d198b5ab4735e1d1142c)
 - RunnersOverview: pass selectedRunners to actions [`d4ab76e`](https://git.odit.services/lfk/frontend/commit/d4ab76ea1be1789aaa53ca57d33b2356c6804ffd)
 - fix pagination next prev [`cac851f`](https://git.odit.services/lfk/frontend/commit/cac851f2b19dafa01b08d1da612e34cbe3eb4133)
 - Moved docker to pnpm with cache [`4cbd265`](https://git.odit.services/lfk/frontend/commit/4cbd26580e51b854fdfd369056f24a30b04100a1)
 - fix: TracksOverview [`c799088`](https://git.odit.services/lfk/frontend/commit/c7990882cfa4ac6c3a2ffa696dcbf3b62790c1fe)
 - Table header i18n [`070a20a`](https://git.odit.services/lfk/frontend/commit/070a20a2e599e9f00b1bd0e944f9d68d08dc1cba)
 - default to 50 rows pagination [`dc866dd`](https://git.odit.services/lfk/frontend/commit/dc866dd5403ae681193c5e325b1f6d4068f80b61)
 - improved tablefilters/groupFilter [`3abf608`](https://git.odit.services/lfk/frontend/commit/3abf608b15fcfc2cf65b705d28d394917e7ac333)
 - Updated group name conversion [`9111ad1`](https://git.odit.services/lfk/frontend/commit/9111ad147c7537036de834f80db6e557d8d6f0d9)
 - show certificate, runnercard, sponsoring contract section [`49c2cd5`](https://git.odit.services/lfk/frontend/commit/49c2cd5c4b32e1b75fe0dae48c1b470608936704)
 - add basic table styling [`c5e8409`](https://git.odit.services/lfk/frontend/commit/c5e84090795636c7a80d6cabe46168e436d40f50)
 - Cards deleted migrations [`ef077b4`](https://git.odit.services/lfk/frontend/commit/ef077b4e6ad722e6d1c9efd5060165f649fd94c9)
 - ignore pnpm store from now on [`fe62ad5`](https://git.odit.services/lfk/frontend/commit/fe62ad5539bc94b242c30c2952bf4c115cc9abfd)
 - ammendme [`d31fe23`](https://git.odit.services/lfk/frontend/commit/d31fe2363b0f167b937f7d67908e75c709b324d8)
 - updated default table row count [`245db06`](https://git.odit.services/lfk/frontend/commit/245db0617306bab23993caf00dc5ba0405e95625)
 - fix: checkbox styling [`64db553`](https://git.odit.services/lfk/frontend/commit/64db5531858b2275d27c53a347da6c0416a278e8)
 - Added distance conversion [`333214a`](https://git.odit.services/lfk/frontend/commit/333214aa8f945975ee2dcbd1cfa285e5e75c9d02)
 - Added filterfunctions [`a9a965d`](https://git.odit.services/lfk/frontend/commit/a9a965d6981b07b02e3f752e65e1e5c4e9df7147)
 - card/ThFilterRunner: text align left [`7083b3d`](https://git.odit.services/lfk/frontend/commit/7083b3d8d2c81fa4ab14f21d379befbb2dab5b6c)
 - import [`0240e1d`](https://git.odit.services/lfk/frontend/commit/0240e1dca2e162b8c79f294f5c651b4a38455235)
 - fix: table sort button + search style [`57dce34`](https://git.odit.services/lfk/frontend/commit/57dce34fc5b04c297c5341db24ec47c2f1d39595)
 - No longer switching pnpm store path [`e5241d6`](https://git.odit.services/lfk/frontend/commit/e5241d619beda90d271485b6c09142b1e7b9b5f1)
 - Reactivated generate cards modal [`8f33640`](https://git.odit.services/lfk/frontend/commit/8f33640bec8f79987b1319fb0765535fe493d496)
 - Always load bulk created cards [`f89023e`](https://git.odit.services/lfk/frontend/commit/f89023e24ab30c90a8cacf2e9590d1dfa1a743d5)
 - ScansOverview: fallback for manual scans [`1ec9556`](https://git.odit.services/lfk/frontend/commit/1ec9556aa64b996d0bdd9cd3ee50a767a154f5f6)
 - fix min-w th [`b35375c`](https://git.odit.services/lfk/frontend/commit/b35375c929ad8d525b2761c321ecef0399917828)
 - Close modal on delete and import toastify [`03b7ada`](https://git.odit.services/lfk/frontend/commit/03b7ada5ef3cbf64f178d3d0d88c448d76a42885)
 - Fixed styling [`13254b2`](https://git.odit.services/lfk/frontend/commit/13254b24dd75ca3eb47fd53d5368f047545e8420)
 - Implemented table buttons [`11a56f8`](https://git.odit.services/lfk/frontend/commit/11a56f87e89866bd9b2f7029ef683fd139d60aa4)
 - RunnersOverview: disable debug log [`2c992a0`](https://git.odit.services/lfk/frontend/commit/2c992a0e63fa72055d28785fe7f5c21fd26f1fea)
 - RunnersOverview: TopActionSection: add margin top [`88f96ac`](https://git.odit.services/lfk/frontend/commit/88f96acc3c31c748d3da29b4564dd681a89208b9)
 - Unused filter function value [`38d3e19`](https://git.odit.services/lfk/frontend/commit/38d3e1912cd6d5362db236c34e0c602b52060b73)
 - Make the linter happy [`fbc14fd`](https://git.odit.services/lfk/frontend/commit/fbc14fd7b47009bf64a8824e7b60373eea031e3f)
 - Dsable column filter for distance [`67eff0e`](https://git.odit.services/lfk/frontend/commit/67eff0eda9b7d49d1abe784247afdbfbd7a76b00)
 - getPaginationRowModel [`238082b`](https://git.odit.services/lfk/frontend/commit/238082b657998f513111e832556926decbe84e21)
 - -&gt; onkeyup [`aecbabe`](https://git.odit.services/lfk/frontend/commit/aecbabe52221c0ab8d94a42dc8ac42f4f397fde8)
 - removed unused import [`9811ede`](https://git.odit.services/lfk/frontend/commit/9811ede3b23a488a49962a43dae5abad60f93341)
 - drop redundant button role [`e7eddb4`](https://git.odit.services/lfk/frontend/commit/e7eddb4f08632cc803b8752e3561319fab538843)
 - Filter id as equals [`2699b06`](https://git.odit.services/lfk/frontend/commit/2699b06d7c42608b1b3ce2037908a78143038441)
 - debug table [`fd0d45f`](https://git.odit.services/lfk/frontend/commit/fd0d45f721396787ad35fca2a7fd0f26d98b23e9)
 - add TODO for ScansOverview status filter [`9505c2b`](https://git.odit.services/lfk/frontend/commit/9505c2b03005f4e667082cb4527fea863dbbf7fc)
 #### [0.17.3](https://git.odit.services/lfk/frontend/compare/0.17.2...0.17.3)
 > 15 March 2023
 - dependency fixes [`3ea7a01`](https://git.odit.services/lfk/frontend/commit/3ea7a015a9beba3c2e4d3eb966f24ff6d4ac786e)
 - 🚀RELEASE v0.17.3 [`85705b6`](https://git.odit.services/lfk/frontend/commit/85705b6e684d0c41d3dc770cef7bffb199101576)
 - set pnpm to @7 [`4432941`](https://git.odit.services/lfk/frontend/commit/44329413ed2ca23f74e86db041b2c25b2b1c2a2b)
 #### [0.17.2](https://git.odit.services/lfk/frontend/compare/0.17.1...0.17.2)
 > 15 March 2023
 - new license file version [CI SKIP] [`00359d2`](https://git.odit.services/lfk/frontend/commit/00359d25c1bd3efdd6365bf284b3c07634049399)
 - 🚀RELEASE v0.17.2 [`46db68a`](https://git.odit.services/lfk/frontend/commit/46db68ab229dc740dfff8835ef916f2c2e629b27)
 - improved ThFilterGroup style [`f917018`](https://git.odit.services/lfk/frontend/commit/f917018fd92a8a5b034f735ac8b6e41995044317)
 #### [0.17.1](https://git.odit.services/lfk/frontend/compare/0.17.0...0.17.1)
 > 15 March 2023
 - Revert "package dependency fixes, bumps, lockfile update" [`d8a3063`](https://git.odit.services/lfk/frontend/commit/d8a30637351e164599e07a6473d9a1d2b08d245d)
 - 🚀RELEASE v0.17.1 [`7b420c4`](https://git.odit.services/lfk/frontend/commit/7b420c430d27bf0fc85a4297780164a593fc1be3)
 #### [0.17.0](https://git.odit.services/lfk/frontend/compare/0.16.5...0.17.0)
 > 15 March 2023
 - new license file version [CI SKIP] [`61328d2`](https://git.odit.services/lfk/frontend/commit/61328d20ed2cfd1df7d3c32767f9c64154879d6d)
 - wip: pnpm + node version [`732b2f0`](https://git.odit.services/lfk/frontend/commit/732b2f061e465bd08cf34c58d8cd6b021ba25dce)
 - package dependency fixes, bumps, lockfile update [`2c73b98`](https://git.odit.services/lfk/frontend/commit/2c73b9862d401dac15021eed3f7847d46132a8ed)
 - Fixed runners not showing up [`75bc89c`](https://git.odit.services/lfk/frontend/commit/75bc89ca3020c48f490c7602374616bd9461e78f)
 - add ThFilterRunner [`3a3e2f7`](https://git.odit.services/lfk/frontend/commit/3a3e2f71575d3a0e39a5e13b05cff932b8683ac9)
 - fix styling for table filters th border [`bea57aa`](https://git.odit.services/lfk/frontend/commit/bea57aa03acaaaa4b1860b30228dd5d1298317f8)
 - You can now create cards from runners by searching via #runnerid [`e8a0ad6`](https://git.odit.services/lfk/frontend/commit/e8a0ad6647ab39252865f62b755f27c34ac2d243)
 - remodelled for early return [`b869b5f`](https://git.odit.services/lfk/frontend/commit/b869b5fd2a01955fb21f936fa38eb5a9648e7de3)
 - 🚀RELEASE v0.17.0 [`6491af1`](https://git.odit.services/lfk/frontend/commit/6491af19e375cbeba7ddd94e463b4dfe308a70a8)
 - Wow this api is fun [`32a9074`](https://git.odit.services/lfk/frontend/commit/32a9074963cce3328f14b1f981ddd5ee49df0008)
 - Fixed double space in label [`92b89cc`](https://git.odit.services/lfk/frontend/commit/92b89cc4d88c9d5625c2ddf7c81c98494f7f5271)
 - UsersOverview: drop pfp [`30991d5`](https://git.odit.services/lfk/frontend/commit/30991d5364a09d517b2115a7e9ea3fbf1fe2e57d)
 - Switched license generation to cache registry and pnpm [`0a6d92a`](https://git.odit.services/lfk/frontend/commit/0a6d92a1f3c5562f11562c433b3a04e3eaae3da4)
 - Pinned pnpm in dockerfile, thx @philipp [`3a576d1`](https://git.odit.services/lfk/frontend/commit/3a576d1073ee503b68100e01054a1756bab62805)
 - Pinned ci node version [`b30b98b`](https://git.odit.services/lfk/frontend/commit/b30b98b521eda2bc7fc055097546f716e90d92ef)
 - Fixed pnpm being called without being installed [`43d82a2`](https://git.odit.services/lfk/frontend/commit/43d82a2af04af49c2169f78a0d0f27ef7e4d7558)
 - Merge pull request 'bugfix/162-create_card_modal' (#163) from bugfix/162-create_card_modal into dev [`6a4495b`](https://git.odit.services/lfk/frontend/commit/6a4495b8131a31cd48a608c2275e80494d0a0fb4)
 - Removed unused log [`268b1b1`](https://git.odit.services/lfk/frontend/commit/268b1b1d9830de196d1d95345d7a2467bbf19eb6)
 - Merge pull request 'filter by runner full names + "#&lt;ID&gt;"' (#160) from feature/159-cardsoverview-filter-for-runner-full-names-and-id into dev [`0625937`](https://git.odit.services/lfk/frontend/commit/0625937068f0786078ffd29b9c8bb54949350b6c)
 - UsersOverview: change profilepic scaling [`5cc8b08`](https://git.odit.services/lfk/frontend/commit/5cc8b0811cf290f97a4399b23c5ea4d961a5a91c)
 #### [0.16.5](https://git.odit.services/lfk/frontend/compare/0.16.4...0.16.5)
 > 14 March 2023
 - 🚀RELEASE v0.16.5 [`3680533`](https://git.odit.services/lfk/frontend/commit/3680533eefef042fc77246dd3d374aafe10c428f)
 - new license file version [CI SKIP] [`405dfa0`](https://git.odit.services/lfk/frontend/commit/405dfa0c34ba87fc450c22e0e9974f92c4cdeffe)
 #### [0.16.4](https://git.odit.services/lfk/frontend/compare/0.16.3...0.16.4)
 > 14 March 2023
 - fix: OrgDetail: clicking on address will toggle selfservice [`#158`](https://git.odit.services/lfk/frontend/issues/158)
 - 🚀RELEASE v0.16.4 [`5c2d154`](https://git.odit.services/lfk/frontend/commit/5c2d154ad180ce7916605871c63e2f5ac4428250)
 #### [0.16.3](https://git.odit.services/lfk/frontend/compare/0.16.2...0.16.3)
 > 23 February 2023
 - 🚀RELEASE v0.16.3 [`f9cfd6b`](https://git.odit.services/lfk/frontend/commit/f9cfd6bd063b01a584774854d8fb5eab96f99528)
 - Bumped vite build targets [`5fe4763`](https://git.odit.services/lfk/frontend/commit/5fe47634e8980e77b65c05f213c475cf49273609)
 - new license file version [CI SKIP] [`a659091`](https://git.odit.services/lfk/frontend/commit/a6590910cfdc5e91fba91c1bc9237e407ef15fd2)
 - Merge pull request 'feature/156-pdf_names' (#157) from feature/156-pdf_names into dev [`ad454c3`](https://git.odit.services/lfk/frontend/commit/ad454c386cbf11abc59d41d269d1a0ef7442c9ed)
 - Added ids for generated pdfs [`0b2c296`](https://git.odit.services/lfk/frontend/commit/0b2c296de069a4ef302c5535de01bc18236675bc)
 #### [0.16.2](https://git.odit.services/lfk/frontend/compare/0.16.1...0.16.2)
 > 23 February 2023
 - Fixed scanmodal [`#154`](https://git.odit.services/lfk/frontend/issues/154)
 - 🚀RELEASE v0.16.2 [`0e85940`](https://git.odit.services/lfk/frontend/commit/0e85940cba292cbccd1ec038aa24f4a719382c19)
 - Merge pull request 'feature/147-cardoverview_performance' (#153) from feature/147-cardoverview_performance into dev [`8d479c3`](https://git.odit.services/lfk/frontend/commit/8d479c32f82938904aee6a10deb80fea85487e4b)
 - Merge pull request 'Fixed scanmodal' (#155) from bugfix/154-scan_select_runner_by_id into dev [`549785c`](https://git.odit.services/lfk/frontend/commit/549785cf7d1c9edc1be37dc745b97096232a08ca)
 - i18n [`ca6da15`](https://git.odit.services/lfk/frontend/commit/ca6da15ef761184a55b18d56f749f660a32cbb83)
 - Bsic datatable conversion [`757655e`](https://git.odit.services/lfk/frontend/commit/757655ea63b3667bc4612ae1595eb52910b61137)
 - 1st datatable try with @vincjo/datatables [`81b8fbf`](https://git.odit.services/lfk/frontend/commit/81b8fbf4e341e6f2998a6e9e2053972c5c225021)
 - Dasboard Cards redesign [`eb1c17e`](https://git.odit.services/lfk/frontend/commit/eb1c17e3ac7e8f5e7310a90421fc9db3ed15c497)
 - set .phone to null if empty [`da6dd55`](https://git.odit.services/lfk/frontend/commit/da6dd55d139a672fa50204eabdca67d9740614a0)
 - add group filtering to table [`14d64b6`](https://git.odit.services/lfk/frontend/commit/14d64b6070d98e6368da5709e9ff8221e8a621c7)
 - formatting [`24d0747`](https://git.odit.services/lfk/frontend/commit/24d074752f1c5dc1a14b075ac14b448d7e129376)
 - RunnersOverview loading fix [`2e075ea`](https://git.odit.services/lfk/frontend/commit/2e075eafab5c4d78fd9aa9d66834b477b2685bfc)
 - Added old formatting for runner and status [`df63c23`](https://git.odit.services/lfk/frontend/commit/df63c2388da359dec9ed9968bc9f970be7092a45)
 - Added custom status filter [`f0a2b28`](https://git.odit.services/lfk/frontend/commit/f0a2b2859fa18426a454b7d9d6dd22dfdfe7ce27)
 - Basic checkbox fix [`1337676`](https://git.odit.services/lfk/frontend/commit/1337676e0894c46da0b6dcb7553e5ea8f88d0c14)
 - Fixed all filter [`8dfa19f`](https://git.odit.services/lfk/frontend/commit/8dfa19fa0f9897c61342ece956df88731c7aa861)
 - improved runner search [`1b0cd5b`](https://git.odit.services/lfk/frontend/commit/1b0cd5b90bcceb92627c6b7cdcdd7792ed81b50f)
 - set table-layout:fixed + display when loaded [`65e8998`](https://git.odit.services/lfk/frontend/commit/65e89988943807c1606a8b6aea49564b13d52537)
 - Trigger edit modal [`32ddb66`](https://git.odit.services/lfk/frontend/commit/32ddb66fc8d8cd689f1104759812f4cee4b7a613)
 - cleaned up table search [`08047a9`](https://git.odit.services/lfk/frontend/commit/08047a93073c32f5dd7a8e958400ae8a5b7f4035)
 - Fixed edit update bug [`0feee0a`](https://git.odit.services/lfk/frontend/commit/0feee0ae2fb6d8dba0b6fd72cedc0712dc749511)
 - fix: z-index on action buttons [`224034d`](https://git.odit.services/lfk/frontend/commit/224034dcc6263d3b0a8ea20045e435142d8ed2af)
 - rename: ThFilterGroup -&gt; ThFilterStatus [`2a6a399`](https://git.odit.services/lfk/frontend/commit/2a6a39916a03c0466e63354e9f5ad7924cb59b6b)
 - new license file version [CI SKIP] [`0e5490f`](https://git.odit.services/lfk/frontend/commit/0e5490f1c84217a5a6d5c8745c4667b32ca65e1a)
 - new license file version [CI SKIP] [`026d3d4`](https://git.odit.services/lfk/frontend/commit/026d3d41c1b976a4dc7c733576a6a9e8d4b13b78)
 - Updated breakpoints [`452d010`](https://git.odit.services/lfk/frontend/commit/452d0101838d72bff7d588a953faae028e2ff819)
 - Tailwind bump [`a101873`](https://git.odit.services/lfk/frontend/commit/a101873eb0946b284a11a5081642711f5087da14)
 - Fixed checkbox show [`0900c26`](https://git.odit.services/lfk/frontend/commit/0900c2691e4cfe5046e8ae186c8ac8884c90abd6)
 - Removed unused console log [`aafc4c8`](https://git.odit.services/lfk/frontend/commit/aafc4c8d62a7a0a493c8bd60149f90c842534bdd)
 - i18n import [`6fe134a`](https://git.odit.services/lfk/frontend/commit/6fe134afc8bfef4e7470b7e53b9312b172a7322b)
 - Merge pull request 'fix: RunnerDetail: set .phone to null if empty' (#152) from bugfix/151-runnerdetail--cannot-unset-phone-number into dev [`329c1cc`](https://git.odit.services/lfk/frontend/commit/329c1cc037a43c818ba3b6c72581d29586d76232)
 - Merge pull request 'feature/146-runner-table-performance-data-table' (#150) from feature/146-runner-table-performance-data-table into dev [`b82d638`](https://git.odit.services/lfk/frontend/commit/b82d638de1aa1f72aada212cf3e4147d808b4fcf)
 - Merge pull request 'feature/148-dashboard_statscards' (#149) from feature/148-dashboard_statscards into dev [`fd1a06b`](https://git.odit.services/lfk/frontend/commit/fd1a06b3595b3713ad474e623c74105125602d46)
 - Fixed top checkbox state [`3d2acb6`](https://git.odit.services/lfk/frontend/commit/3d2acb692a28c116790248679e238fb562b24ac5)
 #### [0.16.1](https://git.odit.services/lfk/frontend/compare/0.16.0...0.16.1)
 > 15 February 2023
 - fix: donor detail: sponsorings: unset middlename will show as "null" [`#145`](https://git.odit.services/lfk/frontend/issues/145)
 - 🚀RELEASE v0.16.1 [`4499480`](https://git.odit.services/lfk/frontend/commit/449948050b8673d43a8dfbb225c3198e4bbb3c7b)
 #### [0.16.0](https://git.odit.services/lfk/frontend/compare/0.15.6...0.16.0)
 > 3 February 2023
 - First page for statsclients [`f299617`](https://git.odit.services/lfk/frontend/commit/f299617c600d2bba7b4405c7c3acae9fd93aefa8)
 - 🚀RELEASE v0.16.0 [`75684ef`](https://git.odit.services/lfk/frontend/commit/75684efa1ae0edb4b4d414757c5acf2a77c572e5)
 - Basic statsclient detail [`0215860`](https://git.odit.services/lfk/frontend/commit/02158605be824e5ac21a6284731138190988c794)
 - Updated Add modal [`f679330`](https://git.odit.services/lfk/frontend/commit/f679330466205e6480cd7f2b7c2b4fdc41c51525)
 - Switched drone to kaniko [`1c98005`](https://git.odit.services/lfk/frontend/commit/1c980059cff5c87c452428b53513507c2339451f)
 - Re-added copy modal [`fecb07e`](https://git.odit.services/lfk/frontend/commit/fecb07ee373dcaaeaea69fdf8d4c6ee2c257c89c)
 - Added Statsclients to sidebar [`068076d`](https://git.odit.services/lfk/frontend/commit/068076dd47373c673a25e730cb8a57c686682810)
 - Fixed imports and naming [`f3cc07c`](https://git.odit.services/lfk/frontend/commit/f3cc07c009ed0a34e61f1aad47a1a31778145439)
 - new license file version [CI SKIP] [`2c4f27a`](https://git.odit.services/lfk/frontend/commit/2c4f27a943bb35be6728bb49bd5c2263cba78165)
 - Merge pull request 'feature/143-beamershow_clients' (#144) from feature/143-beamershow_clients into dev [`53b7dec`](https://git.odit.services/lfk/frontend/commit/53b7dec7cd516c908d45591b855f4be09371f9b1)
 - Updated deletion modal [`93fc7c2`](https://git.odit.services/lfk/frontend/commit/93fc7c2e83f78dd88f15d9246127bb9e69f1a8ee)
 - Updated mounted variables [`674e6a9`](https://git.odit.services/lfk/frontend/commit/674e6a90ec23dde9377bea64c14a50e41ffa450d)
 - Removed Key after creation [`e10c648`](https://git.odit.services/lfk/frontend/commit/e10c6480a504338b21e30fdf2577e5b6c3b635db)
 - Updated docker base images [`9767553`](https://git.odit.services/lfk/frontend/commit/976755338b8621064f9a73147aa600af1f77cd51)
 - Added translation [`96c55db`](https://git.odit.services/lfk/frontend/commit/96c55db63dbfed92b78ff0e7bdab7a8cce4d76e9)
 - Pinned versions [`cff112d`](https://git.odit.services/lfk/frontend/commit/cff112d705a74a135286943298f3f344341325ac)
 - Tailwind bump [`e0cbfb0`](https://git.odit.services/lfk/frontend/commit/e0cbfb000bee59a71e06bd58a9c7ef6a0fc7091d)
 - Added missing translation [`19a333d`](https://git.odit.services/lfk/frontend/commit/19a333d7bda525fbcb3c68f3cbf85a4f925a9707)
 - Bumped apiclient [`c28f1ee`](https://git.odit.services/lfk/frontend/commit/c28f1ee0bc4456595c21858f38e52ed6f16871c5)
 - new license file version [CI SKIP] [`3a66f4c`](https://git.odit.services/lfk/frontend/commit/3a66f4c862db9f35c223cc7007b0560fef4e1d63)
 - Bumped apiclient [`28cbc5b`](https://git.odit.services/lfk/frontend/commit/28cbc5b98ca09657100e1740b83aa2617243b26b)
 - Ignore pnpm lock [`2d8c4c1`](https://git.odit.services/lfk/frontend/commit/2d8c4c1698a1675f618e85e678012f310f87c6ee)
 #### [0.15.6](https://git.odit.services/lfk/frontend/compare/0.15.5...0.15.6)
 > 19 July 2021
 - 🚀RELEASE v0.15.6 [`9fc4ad6`](https://git.odit.services/lfk/frontend/commit/9fc4ad63c4f77b46d645e83c94b51747b91247b8)
 - Fixed donations getting reduced to the first one on certificates [`2391668`](https://git.odit.services/lfk/frontend/commit/2391668a25a1e11a1409df572d77ad1635070fbc)
 - new license file version [CI SKIP] [`97054a7`](https://git.odit.services/lfk/frontend/commit/97054a71c1ab8a045762a55148124965c6994373)
 #### [0.15.5](https://git.odit.services/lfk/frontend/compare/0.15.4...0.15.5)
 > 5 July 2021
 - 🚀RELEASE v0.15.5 [`717d335`](https://git.odit.services/lfk/frontend/commit/717d33547c3378424dd720005da9952f8a753f1a)
 - Merge pull request 'Fixed kilometer conversion' (#142) from bugfix/141-runner_kilometers into dev [`997be32`](https://git.odit.services/lfk/frontend/commit/997be32679dc38c9fb0e92b6ce011057b854d99d)
 - Fixed kilometer conversion [`134f00c`](https://git.odit.services/lfk/frontend/commit/134f00c40e0c8252e7604a73151e8d6685b2c61d)
 - new license file version [CI SKIP] [`e752ee1`](https://git.odit.services/lfk/frontend/commit/e752ee12d17a4423f4364f7766eafbe7d4cef2d1)
 #### [0.15.4](https://git.odit.services/lfk/frontend/compare/0.15.3...0.15.4)
 > 5 July 2021
 - Merge pull request 'fix total donation sum in dashboard' (#140) from bugfix/139-total-donation-sum-is-wrong into dev [`#139`](https://git.odit.services/lfk/frontend/issues/139)
 - 🚀RELEASE v0.15.4 [`cc4515f`](https://git.odit.services/lfk/frontend/commit/cc4515ff66b1c1de3747d0ee6cc465574accedb7)
 - divide by 100 + toFixes(2) [`b246f2b`](https://git.odit.services/lfk/frontend/commit/b246f2b349b06d1adea318dfad58f97fb1a249bb)
 #### [0.15.3](https://git.odit.services/lfk/frontend/compare/0.15.2...0.15.3)
 > 16 April 2021
 - 🚀RELEASE v0.15.3 [`76b69d8`](https://git.odit.services/lfk/frontend/commit/76b69d851aa590ecf8caac135b72962a72e83635)
 - Small bugfix (null got displayed) 🛠 [`224f586`](https://git.odit.services/lfk/frontend/commit/224f5863683ae2543a4a435510ed2c558dc5d307)
 #### [0.15.2](https://git.odit.services/lfk/frontend/compare/0.15.1...0.15.2)
 > 16 April 2021
 - 🚀RELEASE v0.15.2 [`9add6c8`](https://git.odit.services/lfk/frontend/commit/9add6c8ff1fbeed91fe97a7cf262921b716f4e3c)
 - Footer - noopener link [`cee04c1`](https://git.odit.services/lfk/frontend/commit/cee04c1d6fb6005cefe77fb95855ab6fe2cc448f)
 - Hotfix: Team change recognition 🐞 [`cbec785`](https://git.odit.services/lfk/frontend/commit/cbec78589d2fa21f12ce87e71bff2b49c3a7d345)
 - NGINX cache assets [`e54a480`](https://git.odit.services/lfk/frontend/commit/e54a4807f70bc333396885f81d3dcc7ae6c115d9)
 #### [0.15.1](https://git.odit.services/lfk/frontend/compare/0.15.0...0.15.1)
 > 16 April 2021
 - 🚀RELEASE v0.15.1 [`a85db7c`](https://git.odit.services/lfk/frontend/commit/a85db7cb3f89881794e37a66ecd822f8ad5873f1)
 - Merge pull request '🐞🐳 fix Dockerfile' (#138) from bugfix/136-opacity_reactivity into dev [`2bd3779`](https://git.odit.services/lfk/frontend/commit/2bd3779839de16a89b91a3da93033e2a2b742ab7)
 - 🚚 move to tailwind [`07ac041`](https://git.odit.services/lfk/frontend/commit/07ac041d69b3b1810e5db538b53fe62084490f7a)
 - 🐞🐳 fix Dockerfile [`303e33c`](https://git.odit.services/lfk/frontend/commit/303e33cafb4a1be01e4c4b43f46ff0c651cb4620)
 - Dockerfile now uses selfhosted registry [`b4e689d`](https://git.odit.services/lfk/frontend/commit/b4e689dddf0b93a2794aa30ea83e8c6505d6bbfd)
 - new license file version [CI SKIP] [`98a0b03`](https://git.odit.services/lfk/frontend/commit/98a0b036c5490b4bc4992e83f3bca02be39927fa)
 - Merge pull request 'Opacity import fix bugfix/136-opacity_reactivity' (#137) from bugfix/136-opacity_reactivity into dev [`fb3f30f`](https://git.odit.services/lfk/frontend/commit/fb3f30fb1024de61ce1c541dae90374454f6ef96)
 - Added bs import fix [`6213952`](https://git.odit.services/lfk/frontend/commit/621395200751c2d42b9ad44c77e84bda03b62e83)
 #### [0.15.0](https://git.odit.services/lfk/frontend/compare/0.14.0...0.15.0)
 > 15 April 2021
 - 🚀RELEASE v0.15.0 [`5c02028`](https://git.odit.services/lfk/frontend/commit/5c02028841c68d9a284bf6971eec2b6bc2fdf1f3)
 - Merge pull request 'Mark donations as payed feature/133-donation_payments' (#135) from feature/133-donation_payments into dev [`c561b53`](https://git.odit.services/lfk/frontend/commit/c561b536705a68215d9c0a6b320587d1647bf57f)
 - Sorted translations [`c7a858e`](https://git.odit.services/lfk/frontend/commit/c7a858eed7962294bc9df3c92ce2e46b0a354796)
 - Added total donation amount to donor overview [`e42ea94`](https://git.odit.services/lfk/frontend/commit/e42ea943b7821d433fe21599edbd9f76c3128ef2)
 - Added Add Payment button to donor overview [`6e6e8b2`](https://git.odit.services/lfk/frontend/commit/6e6e8b26171f16542c101520800b4b6ea7c023d3)
 - You can now open a modal to add a payment to a donation from the donation overview [`a943aaf`](https://git.odit.services/lfk/frontend/commit/a943aaf5fce8f113dd967d3842e2b0d7d50604e9)
 - You can now add payments from the donation overview [`1dbab03`](https://git.odit.services/lfk/frontend/commit/1dbab03fe73b5e0fc011f9b0af7199bd71bc79c5)
 - Added payment updating via detail [`bdcf5d3`](https://git.odit.services/lfk/frontend/commit/bdcf5d3fc08d250377226a253642d79b2e82d624)
 - Added **all** missing toast translations [`de5aa92`](https://git.odit.services/lfk/frontend/commit/de5aa9237d261b5d47a8def35afa7f8e0089aea6)
 - You can now mark fixed donations as already paid on creation [`3d3a10a`](https://git.odit.services/lfk/frontend/commit/3d3a10aafb16d371be9471eb5172f9251fb2583f)
 - Added translations 🌎 [`d015f97`](https://git.odit.services/lfk/frontend/commit/d015f9739570c44a7a2fe6ba248c9a45c3047c62)
 - Changed top info style for donation overview [`4c2c24a`](https://git.odit.services/lfk/frontend/commit/4c2c24af2ca5c2874a583b0fd93bee147a17f449)
 - Added paid donation amount and status to donation detail [`5645eea`](https://git.odit.services/lfk/frontend/commit/5645eeaafaa4254edf1a81bc597ce0c7a9b03ff0)
 - Added total donation amount to donation overview [`961477d`](https://git.odit.services/lfk/frontend/commit/961477d5224bc44b552d2fc2851d8514116f4e20)
 - Fixed chante recognition bug for fixed donation [`0f0aae7`](https://git.odit.services/lfk/frontend/commit/0f0aae7ba4cf5dfab15d56ce48edbdbc7cb7e403)
 - Added total donation amount to donor detail [`a5f7101`](https://git.odit.services/lfk/frontend/commit/a5f71015a6557d664e9d3f505613352792fc38cb)
 - Added msiisng runner id conversion [`5761815`](https://git.odit.services/lfk/frontend/commit/57618156b49b2b0f0274f2126fef36a017d90022)
 - AddDonationModal - vertical alignment for paid status [`18acac8`](https://git.odit.services/lfk/frontend/commit/18acac83bc6532e14d36b3399d867e026d0c88ac)
 - Added missing updated comparison [`04a3038`](https://git.odit.services/lfk/frontend/commit/04a3038369f2717c43459318b7b5754ebbaa9e45)
 - DonationsOverview contrast on action [`d7d4447`](https://git.odit.services/lfk/frontend/commit/d7d44470bb08ac06594bc400608c17eeacb0434b)
 - Fixed typo [`4c0886a`](https://git.odit.services/lfk/frontend/commit/4c0886a5d9b91439967bc8f66b09a57177f967d0)
 - Fixed styling [`865254d`](https://git.odit.services/lfk/frontend/commit/865254d646b5f7de15720551c67ae649601cbcd2)
 - Changed top info style for donation detail [`000fc97`](https://git.odit.services/lfk/frontend/commit/000fc97beb14427f69d421ff2c96975dbbdc7a3a)
 #### [0.14.0](https://git.odit.services/lfk/frontend/compare/0.13.1...0.14.0)
 > 14 April 2021
 - Merge pull request 'added donor receipt list download to DonorsOverview' (#134) from feature/132-export-donors-receipt-list into dev [`#132`](https://git.odit.services/lfk/frontend/issues/132)
 - Sorted translations 🌎 [`c6c9751`](https://git.odit.services/lfk/frontend/commit/c6c97516b3981ef580d620c0c8a6fcc42f26facd)
 - Fixed typos in translations [`03676b2`](https://git.odit.services/lfk/frontend/commit/03676b2894892c3559118b93e969c063b53b081e)
 - added donor receipt list download to DonorsOverview [`d241ca5`](https://git.odit.services/lfk/frontend/commit/d241ca569838abbe9581fbd319f7f3b563cb7dcc)
 - 🚀RELEASE v0.14.0 [`9c5fc6b`](https://git.odit.services/lfk/frontend/commit/9c5fc6b61c0bb2a6d831d4a23ef8679c6e68c6a1)
 - ⏫ general version bump [`18f151c`](https://git.odit.services/lfk/frontend/commit/18f151c1fb878a74c3d1a2c2a2debf7913739417)
 - new license file version [CI SKIP] [`302caf0`](https://git.odit.services/lfk/frontend/commit/302caf015f88f77e2b2ae2b67680e79f987ad81e)
 - Switched to selfhosted images [`112eb29`](https://git.odit.services/lfk/frontend/commit/112eb29f932cd936f1d6c2308dcaeaf8cb642490)
 - ⏫ bump @odit/lfk-client-js@0.11.0 [`9ca57fa`](https://git.odit.services/lfk/frontend/commit/9ca57fac2eeabbf25142a507fb9c0fa3c90b4e74)
 - replace donationAmount with paidDonationAmount [`e90e56d`](https://git.odit.services/lfk/frontend/commit/e90e56d8b26aef23aba2bbb0c3942ba4d7feb224)
 #### [0.13.1](https://git.odit.services/lfk/frontend/compare/0.13.0...0.13.1)
 > 11 April 2021
 - 🚀RELEASE v0.13.1 [`b512cf8`](https://git.odit.services/lfk/frontend/commit/b512cf86674f1c60b5ac790985ededdfd6554185)
 - For await fix [`a24d292`](https://git.odit.services/lfk/frontend/commit/a24d2923c6e6da90d610c05183d29d47eaf2ed30)
 #### [0.13.0](https://git.odit.services/lfk/frontend/compare/0.12.5...0.13.0)
 > 11 April 2021
 - 🚀RELEASE v0.13.0 [`467808a`](https://git.odit.services/lfk/frontend/commit/467808abefe127dac66a2837fcce3197dddb140f)
 - Merge pull request 'Better org pdf generation feature/130-org_doc_splitting' (#131) from feature/130-org_doc_splitting into dev [`861f1f2`](https://git.odit.services/lfk/frontend/commit/861f1f221653283e7586aa2c67b205337fd44398)
 - Org card generation now runs in sequence [`fef14b6`](https://git.odit.services/lfk/frontend/commit/fef14b6e4fb47ad92da61de91fedce96aea26b2c)
 - Org certificate generation now runs in sequence [`509b22b`](https://git.odit.services/lfk/frontend/commit/509b22bea0dd3e4446e6ecc37d27644e9bf2ad50)
 - Org contract generation now runs in sequence [`01d2a7e`](https://git.odit.services/lfk/frontend/commit/01d2a7e6aa709b3f2d71575f705fc962e97e2742)
 - Emergency document server url change [`5476808`](https://git.odit.services/lfk/frontend/commit/5476808683a919bc34dbaea1f1ed276d49750096)
 - Fixed const -&gt; let [`7447b2f`](https://git.odit.services/lfk/frontend/commit/7447b2f4c134a585905db6733093eab13e6f7c47)
 - Hotfix: Org * generation🐞 [`ac586fe`](https://git.odit.services/lfk/frontend/commit/ac586fec5abd324d590ba99cdfe8ddddefbf95e6)
 #### [0.12.5](https://git.odit.services/lfk/frontend/compare/0.12.4...0.12.5)
 > 8 April 2021
 - 🚀RELEASE v0.12.5 [`331d737`](https://git.odit.services/lfk/frontend/commit/331d737796c82454b1c19fa1840ccc20e36d2626)
 - Merge pull request 'Added runner team's parentorg name to runenr overciew' (#129) from feature/128-runner_orgs into dev [`ef81b8a`](https://git.odit.services/lfk/frontend/commit/ef81b8adf9bef685a55936d7544bf645c0d6ecbe)
 - Switched to html entity [`8a7d635`](https://git.odit.services/lfk/frontend/commit/8a7d635cef2d465e70c84e1f7a7b90b98a8dbab1)
 - Added runner team's parentorg name to runenr overciew [`4c259c1`](https://git.odit.services/lfk/frontend/commit/4c259c1eef2b0166ce6a8493d0c9e9d5ede11146)
 #### [0.12.4](https://git.odit.services/lfk/frontend/compare/0.12.3...0.12.4)
 > 8 April 2021
 - 🚀RELEASE v0.12.4 [`5b4ede5`](https://git.odit.services/lfk/frontend/commit/5b4ede5e2f6a26b475a7a4b430a4146d21fb9671)
 - 🚑 [HOTFIX] - drop "svelte-infinite-loading" [`d0ab3dd`](https://git.odit.services/lfk/frontend/commit/d0ab3dda78bbad2cea18a2491056530897d56607)
 #### [0.12.3](https://git.odit.services/lfk/frontend/compare/0.12.2...0.12.3)
@@ -1569,7 +1058,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - init [`32357ec`](https://git.odit.services/lfk/frontend/commit/32357ece0a7195ea1135c9c3e4c6c84323f95b4d)
 - tmp [`1b7173c`](https://git.odit.services/lfk/frontend/commit/1b7173cda9134ee8058a00bdc030defa80d46bfc)
 - Login - move to env.js import [`8ef0b21`](https://git.odit.services/lfk/frontend/commit/8ef0b21819309752c573d0485f6514152fb684e6)
- initial commit [`4bb3bae`](https://git.odit.services/lfk/frontend/commit/4bb3bae4e6fc89c35a8a2b36b7cd6e6d47958eae)
+-  initial commit [`4bb3bae`](https://git.odit.services/lfk/frontend/commit/4bb3bae4e6fc89c35a8a2b36b7cd6e6d47958eae)
 - Initial license export [`4c96b9a`](https://git.odit.services/lfk/frontend/commit/4c96b9a3e04dbb7c021c71aa8828a29248509fbe)
 - 🚚 move to tinro svelte router [`a50ea15`](https://git.odit.services/lfk/frontend/commit/a50ea15b38023b867a9f7757e973184cbcdd2457)
 - new Dashboard [`7270ce9`](https://git.odit.services/lfk/frontend/commit/7270ce9d32869abd4f6ac65ab7c2c87363633cbe)
--- a/19
+++ b/19
@@ -1,15 +1,14 @@
-FROM registry.odit.services/hub/library/node:19.7.0-alpine3.16 as build
+FROM node:15.5.1-alpine3.12
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
-
+COPY package.json ./
-COPY package.json pnpm-lock.yaml *.config.js *.config.cjs index.html ./
+RUN yarn
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8 && pnpm i
+COPY package.json *.config.js index.html ./
 COPY src ./src
 COPY public ./public
-RUN pnpm build
+RUN yarn build
 # final image
-FROM registry.odit.services/library/nginx-brotli:3.15 as final
+FROM alpine
-COPY --from=build /app/dist /usr/share/nginx/html
+COPY --from=0 /app/dist /app
 FROM fholzer/nginx-brotli:v1.19.1
 COPY --from=1 /app /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/nginx.conf
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
 </head>
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-1.3.4-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.12.4-RELEASE_INFO</span>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <script src="/env.js"></script>
  <script type="module" src="/src/main.js"></script>
--- a/nginx.conf
+++ b/nginx.conf
@@ -6,11 +6,6 @@ http {
    server {
        error_page 404 /index.html;
        root /usr/share/nginx/html;
        location /assets {
            expires 1y;
            log_not_found off;
            access_log off;
        }
        location = /index.html {
            add_header Cache-Control 'no-store';
        }
--- a/order.js
+++ b/order.js
@@ -1,4 +1,4 @@
-import fs from 'fs'
+const fs = require('fs');
 // get all language files
 const files = fs.readdirSync('./src/locales/');
 files.forEach((f) => {
--- a/package.json
+++ b/package.json
@@ -1,7 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "1.3.4",
+	"version": "0.12.4",
 	"type": "module",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "vite",
@@ -11,22 +10,38 @@
 	},
 	"license": "CC-BY-NC-SA-4.0",
 	"devDependencies": {
-		"@odit/license-exporter": "0.0.12",
+		"check-password-strength": "2.0.2",
-		"@sveltejs/vite-plugin-svelte": "2.0.4",
+		"@odit/lfk-client-js": "0.10.1",
-		"auto-changelog": "2.4.0",
+		"@odit/license-exporter": "0.0.11",
-		"autoprefixer": "10.4.14",
+		"@sveltejs/vite-plugin-svelte": "1.0.0-next.6",
-		"postcss": "8.4.21",
+		"@types/html-minifier": "4.0.0",
-		"release-it": "15.10.1",
+		"auto-changelog": "2.2.1",
 		"autoprefixer": "10.2.5",
 		"csvtojson": "2.0.10",
 		"gridjs": "3.4.0",
 		"html-minifier": "4.0.0",
 		"localforage": "1.9.0",
 		"marked": "2.0.1",
 		"release-it": "14.5.1",
 		"svelte": "3.37.0",
 		"svelte-focus-trap": "1.2.0",
 		"svelte-i18n": "3.3.9",
 		"svelte-preprocess": "4.7.0",
 		"svelte-select": "3.17.0",
-		"tailwindcss": "3.3.1",
+		"tailwindcss": "2.1.1",
-		"vite": "4.2.1"
+		"tinro": "0.6.1",
 		"toastify-js": "1.10.0",
 		"validator": "13.5.2",
 		"vite": "2.1.5",
 		"vite-plugin-windicss": "0.12.5",
 		"xlsx": "0.16.9"
 	},
 	"release-it": {
 		"git": {
 			"commit": true,
 			"requireCleanWorkingDir": false,
 			"commitMessage": "🚀RELEASE v${version}",
-			"push": true,
+			"push": false,
 			"tag": true,
 			"tagName": null,
 			"tagAnnotation": "v${version}"
@@ -37,25 +52,5 @@
 		"hooks": {
 			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add index.html && node order.js  && git add src/locales"
 		}
 	},
 	"dependencies": {
 		"@odit/lfk-client-js": "1.1.1",
 		"@paralleldrive/cuid2": "^2.2.0",
 		"@tanstack/svelte-table": "^8.8.5",
 		"bwip-js": "^3.4.0",
 		"check-password-strength": "2.0.7",
 		"csvtojson": "2.0.10",
 		"gridjs": "3.4.0",
 		"localforage": "1.10.0",
 		"marked": "2.0.3",
 		"svelte": "3.58.0",
 		"svelte-i18n": "3.6.0",
 		"tinro": "0.6.12",
 		"toastify-js": "1.12.0",
 		"validator": "13.9.0",
 		"xlsx": "0.18.5"
 	},
 	"volta": {
 		"node": "19.7.0"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,6 +0,0 @@
 module.exports = {
 	plugins: {
 		tailwindcss: {},
 		autoprefixer: {}
 	}
 };
--- a/public/env.sample.js
+++ b/public/env.sample.js
@@ -1,6 +1,5 @@
 const config = {
 	baseurl: 'http://localhost:4010',
 	baseurl_documentserver: 'http://localhost:4010/documents',
 	documentserver_key: 'NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe',
 	// optional
 	default_username: 'demo',
--- a/public/licenses.json
+++ b/public/licenses.json
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -72,8 +72,6 @@
  import Scans from "./components/scans/Scans.svelte";
  import ScanDetail from "./components/scans/ScanDetail.svelte";
  import Cards from "./components/cards/Cards.svelte";
 	import StatsClients from "./components/statsclients/StatsClients.svelte";
 	import StatsClientDetail from "./components/statsclients/StatsClientDetail.svelte";
  store.init();
 </script>
@@ -208,14 +206,6 @@
            <ScanStationDetail {params} />
          </Route>
        </Route>
        <Route path="/statsclients/*">
          <Route path="/">
            <StatsClients />
          </Route>
          <Route path="/:clientid" let:params>
            <StatsClientDetail {params} />
          </Route>
        </Route>
        <Route path="/about">
          <About />
        </Route>
--- a/src/components/auth/Login.svelte
+++ b/src/components/auth/Login.svelte
@@ -76,7 +76,7 @@
      // last login was not processed yet
    } else {
      Toastify({
-        text: $_('please-wait-a-moment-your-login-is-still-being-processed'),
+        text: "chill...",
        duration: 1500,
        backgroundColor:
          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
--- a/src/components/base/importfixes.svelte
+++ b/src/components/base/importfixes.svelte
@@ -1,6 +0,0 @@
 <!--
    Temporary tailwind import fixes for classes that wouldn't be directly used otherwise. 
    Or as others may call it: Real big bullshit time.
    Issue: https://git.odit.services/lfk/frontend/issues/136
 -->
 <div class="opacity-50"></div>
--- a/src/components/cards/AddCardBulkModal.svelte
+++ b/src/components/cards/AddCardBulkModal.svelte
@@ -1,16 +1,14 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import { RunnerCardService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  export let bulk_modal_open;
  export let current_cards;
  function focus(el) {
    el.focus();
  }
  const dispatch = createEventDispatcher();
  $: card_count = 0;
  $: is_card_count_valid = card_count > 0;
  $: processed_last_submit = true;
@@ -36,7 +34,7 @@
        text: $_("creating-blanco-cards"),
        duration: -1,
      }).showToast();
-      RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
+      RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, false)
        .then((result) => {
          bulk_modal_open = false;
          //
@@ -45,7 +43,6 @@
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          dispatch("created", {cards: result})
        })
        .catch((err) => {
          //
@@ -74,13 +71,13 @@
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          current_cards = current_cards.concat(result);
          const toast = Toastify({
            text: $_("generating-pdf"),
            duration: -1,
          }).showToast();
          dispatch("created", {cards: result})
          fetch(
-            `${config.baseurl_documentserver}/cards?&download=true&key=${config.documentserver_key}`,
+            `${config.baseurl}/documents/cards?&download=true&key=${config.documentserver_key}`,
            {
              method: "POST",
              headers: {
@@ -136,7 +133,7 @@
 {#if bulk_modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      bulk_modal_open = false;
--- a/src/components/cards/AddCardModal.svelte
+++ b/src/components/cards/AddCardModal.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-
+  import { focusTrap } from "svelte-focus-trap";
  import {
    RunnerCardService,
    RunnerService,
@@ -9,40 +9,24 @@
  } from "@odit/lfk-client-js";
  import Select from "svelte-select";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  export let modal_open;
-
+  export let current_cards;
-  const dispatch = createEventDispatcher();
+  const getRunnerLabel = (option) =>
-  const getRunnerLabel = (option) => {
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-    if (option.middlename) {
+  const filterRunners = (label, filterText, option) =>
-      return option.firstname + " " + option.middlename + " " + option.lastname;
+    label.toLowerCase().includes(filterText.toLowerCase()) ||
-    }
+    option.value.toString().startsWith(filterText.toLowerCase());
    return option.firstname + " " + option.lastname;
  };
  const filterRunners = (label, filterText, option) => {
    if (filterText.startsWith("#")) {
      return option.value.id == parseInt(filterText.replace("#", ""));
    }
    return (
      label.toLowerCase().includes(filterText.toLowerCase()) ||
      option.value.toString().startsWith(filterText.toLowerCase())
    );
  };
  function focus(el) {
    el.focus();
  }
  $: runner = 0;
  $: runners = [];
  $: enabled = true;
  $: processed_last_submit = true;
  let loading = true;
  let runners = [];
  RunnerService.runnerControllerGetAll().then((val) => {
    runners = val.map((r) => {
      return { label: getRunnerLabel(r), value: r };
    });
    loading = false;
  });
  $: createbtnenabled = true;
  (() => {
@@ -80,7 +64,8 @@
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
-          dispatch("created", { cards: [result] });
+          current_cards.push(result);
          current_cards = current_cards;
        })
        .catch((err) => {
          //
@@ -97,81 +82,65 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
-    }}
+    }}>
  >
    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
+          data-id="modal_backdrop" />
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
+        aria-hidden="true">&#8203;</span>
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
-        aria-labelledby="modal-headline"
+        aria-labelledby="modal-headline">
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
            >
              <svg
                class="h-6 w-6 text-blue-600"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                width="24"
-                height="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
                ><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"
+                  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>
                /></svg
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("create-a-new-card")}
+                {$_('create-a-new-card')}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
-                  {$_("you-can-provide-a-runner-but-you-dont-have-to")}
+                  {$_('you-can-provide-a-runner-but-you-dont-have-to')}
-                  {$_(
+                  {$_('if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button')}
                    "if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button"
                  )}
                </p>
              </div>
              <div class="grid grid-cols-6 gap-6">
                <div class="col-span-6">
                  <label
                    for="donor"
-                    class="block text-sm font-medium text-gray-700"
+                    class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
                    >{$_("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) =>
+                    itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
                      filterRunners(label, filterText, option)}
                    items={runners}
-                    bind:loading
+                    showChevron={true}
-                    showChevron={!loading}
+                    placeholder={$_('search-for-runner-by-name-or-id')}
-                    placeholder={$_("search-for-runner-by-name-or-id")}
+                    noOptionsMessage={$_('no-runners-found')}
-                    noOptionsMessage={$_("no-runners-found")}
+                    on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
-                    on:select={(selectedValue) =>
+                    on:clear={() => (runner = null)} />
                      (runner = selectedValue.detail.value.id)}
                    on:clear={() => (runner = null)}
                  />
                </div>
              </div>
            </div>
@@ -183,18 +152,16 @@
            class:opacity-50={!createbtnenabled}
            on:click={submit}
            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:ml-3 sm:w-auto sm:text-sm"
+            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:ml-3 sm:w-auto sm:text-sm">
-          >
+            {$_('create')}
            {$_("create")}
          </button>
          <button
            on:click={() => {
              modal_open = false;
            }}
            type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-          >
+            {$_('cancel')}
            {$_("cancel")}
          </button>
        </div>
      </div>
--- a/src/components/cards/CardDetailModal.svelte
+++ b/src/components/cards/CardDetailModal.svelte
@@ -1,34 +1,26 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
  import Select from "svelte-select";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  export let edit_modal_open;
  export let current_cards;
  export let runner = {};
  export let editable = {};
  export let original_data = {};
  const getRunnerLabel = (option) =>
    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-    const filterRunners = (label, filterText, option) => {
+  const filterRunners = (label, filterText, option) =>
-    if (filterText.startsWith("#")) {
+    label.toLowerCase().includes(filterText.toLowerCase()) ||
-      return option.value.id == parseInt(filterText.replace("#",""))
+    option.value.toString().startsWith(filterText.toLowerCase());
    }
    return (
      label.toLowerCase().includes(filterText.toLowerCase()) ||
      option.value.toString().startsWith(filterText.toLowerCase())
    );
  };
  function focus(el) {
    el.focus();
  }
  $: runners = [];
  $: enabled = true;
  $: processed_last_submit = true;
  const dispatch = createEventDispatcher();
  RunnerService.runnerControllerGetAll().then((val) => {
    runners = val.map((r) => {
      return { label: getRunnerLabel(r), value: r };
@@ -71,7 +63,8 @@
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
-          dispatch('dataUpdated', {card: result});
+          current_cards[current_cards.findIndex((c) => c.id === id)] = result;
          current_cards = current_cards;
        })
        .catch((err) => {
          //
@@ -88,7 +81,7 @@
 {#if edit_modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      edit_modal_open = false;
--- a/src/components/cards/CardRunner.svelte
+++ b/src/components/cards/CardRunner.svelte
@@ -1,16 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let runner;
 </script>
 {#if !runner}
  {$_("non-blanko")}
 {:else}
  <a href={`/runners/${runner.id}`}>
    {#if runner.middlename}
      {runner.firstname} {runner.middlename} {runner.lastname}
    {:else}
      {runner.firstname} {runner.lastname}
    {/if}
  </a>
 {/if}
--- a/src/components/cards/CardStatus.svelte
+++ b/src/components/cards/CardStatus.svelte
@@ -1,16 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let enabled = false;
 </script>
 {#if enabled}
  <span
    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
    >{$_("enabled")}</span
  >
 {:else}
  <span
    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
    >{$_("disabled")}</span
  >
 {/if}
--- a/src/components/cards/Cards.svelte
+++ b/src/components/cards/Cards.svelte
@@ -7,48 +7,34 @@
  $: current_cards = [];
  export let modal_open = false;
  export let bulk_modal_open = false;
  let addCards;
 </script>
 <section class="container p-5">
  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("cards")}
+    {$_('cards')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:CREATE')}
      <button
        on:click={() => {
          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:ml-3 sm:w-auto sm:text-sm"
+        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:ml-3 sm:w-auto sm:text-sm">
-      >
+        {$_('add-card')}
        {$_("add-card")}
      </button>
      <button
        on:click={() => {
          bulk_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:ml-3 sm:w-auto sm:text-sm"
+        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:ml-3 sm:w-auto sm:text-sm">
-      >
+        {$_('create-bulk-cards')}
        {$_("create-bulk-cards")}
      </button>
    {/if}
  </span>
-  <CardsOverview bind:current_cards bind:addCards />
+  <CardsOverview bind:current_cards />
 </section>
-{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
+{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:CREATE')}
-  <AddCardModal
+  <AddCardModal bind:current_cards bind:modal_open />
-    bind:modal_open
+  <AddCardBulkModal bind:current_cards bind:bulk_modal_open />
    on:created={(event) => {
      console.log(event)
      addCards(event.detail.cards);
    }}
  />
  <AddCardBulkModal
    bind:bulk_modal_open
    on:created={(event) => {
      addCards(event.detail.cards);
    }}
  />
 {/if}
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -6,310 +6,276 @@
  import CardsEmptyState from "./CardsEmptyState.svelte";
  import CardDetailModal from "./CardDetailModal.svelte";
  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
  import InputElement from "../shared/InputElement.svelte";
  import {
    createSvelteTable,
    flexRender,
    getCoreRowModel,
    getFilteredRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    renderComponent,
  } from "@tanstack/svelte-table";
  import { writable } from "svelte/store";
  import TableBottom from "../shared/TableBottom.svelte";
  import TableActions from "../shared/TableActions.svelte";
  import TableHeader from "../shared/TableHeader.svelte";
  import CardStatus from "./CardStatus.svelte";
  import CardRunner from "./CardRunner.svelte";
  import { onMount } from "svelte";
  import { runnerFilter, statusFilter } from "../shared/tablefilters";
  import DeleteCardModal from "./DeleteCardModal.svelte";
  export let edit_modal_open = false;
  export let runner = {};
  export let editable = {};
  export let original_data = {};
  export let current_cards = [];
-  export const addCards = (cards) => {
+  $: filtered_cards = current_cards.filter(function (c) {
-    console.log(cards);
+    if (
-    current_cards = current_cards.concat(...cards);
+      c.code.toLowerCase().includes(searchvalue_lowercase) ||
-    options.update((options) => ({
+      c.runner?.firstname.toLowerCase().includes(searchvalue_lowercase) ||
-      ...options,
+      c.runner?.middlename.toLowerCase().includes(searchvalue_lowercase) ||
-      data: current_cards,
+      c.runner?.lastname.toLowerCase().includes(searchvalue_lowercase) ||
-    }));
+      should_display_based_on_id(c.id)
-  };
+    ) {
-
+      return true;
-  $: dataLoaded = false;
+    }
  $: selected =
    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
  $: selectedCards =
    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
  $: active_delete = undefined;
  $: cards_show = generate_cards.length > 0;
  $: generate_cards = [];
  const columns = [
    {
      accessorKey: "code",
      header: () => $_("code"),
      filterFn: `includesString`,
    },
    {
      accessorKey: "runner",
      header: () => $_("runner"),
      cell: (info) => {
        return renderComponent(CardRunner, { runner: info.getValue() });
      },
      filterFn: `runner`,
    },
    {
      accessorKey: "enabled",
      cell: (info) => {
        return renderComponent(CardStatus, { enabled: info.getValue() });
      },
      header: () => $_("status"),
      filterFn: `status`,
    },
    {
      accessorKey: "actions",
      header: () => $_("action"),
      cell: (info) => {
        return renderComponent(TableActions, {
          detailsAction: () => {
            open_edit_modal(
              current_cards[
                current_cards.findIndex((r) => r.id == info.row.original.id)
              ]
            );
          },
          deleteAction: () => {
            active_delete =
              current_cards[
                current_cards.findIndex((r) => r.id == info.row.original.id)
              ];
          },
          deleteEnabled:
            store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE"),
        });
      },
      enableColumnFilter: false,
      enableSorting: false,
    },
  ];
  const options = writable({
    data: [],
    columns: columns,
    initialState: {
      pagination: {
        pageSize: 50,
      },
    },
    filterFns: {
      runner: runnerFilter,
      status: statusFilter,
    },
    enableRowSelection: true,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });
-
+  $: searchvalue = "";
-  const table = createSvelteTable(options);
+  $: searchvalue_lowercase = searchvalue.toLowerCase();
-
+  $: active_deletes = [];
  $: cards_show = current_cards.some((r) => r.is_selected === true);
  $: generate_cards = current_cards.filter((r) => r.is_selected === true);
  const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
    (val) => {
      current_cards = val;
    }
  );
  function should_display_based_on_id(id) {
    if (searchvalue.toString().slice(-1) === "*") {
      return id.toString().startsWith(searchvalue.replace("*", ""));
    }
    return id.toString() === searchvalue;
  }
  const getRunnerLabel = (option) =>
    option?.firstname + " " + (option?.middlename || "") + " " + (option?.lastname || "{$_('non-blanko')}");
  function open_edit_modal(card) {
-    const getRunnerLabel = (option) =>
+    if(card.runner?.id){
      option.firstname +
      " " +
      (option.middlename || "") +
      " " +
      option.lastname;
    if (card.runner?.id) {
      runner = Object.assign(
        { runner },
        { label: getRunnerLabel(card.runner), value: card.runner }
      );
      card.runner = card.runner.id;
-    } else {
+    }
-      card.runner = null;
+    else{
-      runner = null;
+      card.runner=null;
      runner = null
    }
    editable = Object.assign(editable, card);
    original_data = Object.assign(original_data, card);
    edit_modal_open = true;
  }
-
+// -----------------
-  async function deleteCard(delete_card_id) {
+  let scrollTop = 0;
-    await RunnerCardService.runnerCardControllerRemove(delete_card_id, true);
+  $: rendered = filtered_cards;
-    current_cards = current_cards.filter((r) => r.id !== delete_card_id);
+  let innerHeight = 0;
-    options.update((options) => ({
+  let ele;
-      ...options,
+  $: updateSlice(scrollTop);
-      data: current_cards,
+  $: innerHeight = `${filtered_cards.length * 25}px`;
-    }));
+  $: if (ele) updateSlice();
-    Toastify({
+  function updateSlice() {
-      text: $_("card-deleted"),
+    const height = ele ? parseInt(ele.clientHeight) : 100;
-      duration: 3500,
+    const init = scrollTop / 25;
-      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    const end = Math.ceil((scrollTop + height) / 25);
-    }).showToast();
+    rendered = filtered_cards.slice(init, end + 15);
  }
  function updateScroll($event) {
    scrollTop = $event.target.scrollTop;
  }
  onMount(async () => {
    let page = 0;
    while (page >= 0) {
      const cards = await RunnerCardService.runnerCardControllerGetAll(
        page,
        500
      );
      if (cards.length == 0) {
        page = -2;
      }
      current_cards = current_cards.concat(...cards);
      options.update((options) => ({
        ...options,
        data: current_cards,
      }));
      dataLoaded = true;
      page++;
    }
    console.log("All cards loaded");
  });
 </script>
-{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:UPDATE")}
+<style>
  table tbody {
  display: block;
  overflow-y: scroll;
 }
 table thead, table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
 }
 </style>
 {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
  <CardDetailModal
    bind:current_cards
    bind:edit_modal_open
    bind:runner
    bind:editable
-    bind:original_data
+    bind:original_data />
    on:dataUpdated={(event) => {
      current_cards[
        current_cards.findIndex((c) => c.id === event.detail.card.id)
      ] = event.detail.card;
      current_cards = current_cards;
      options.update((options) => ({
        ...options,
        data: current_cards,
      }));
    }}
  />
 {/if}
-{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
+{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
-  <DeleteCardModal
+  {#await cards_promise}
    delete_card={active_delete}
    modal_open={active_delete != undefined}
    on:delete={(event) => {
      deleteCard(event.detail.id);
    }}
  />
  {#if !dataLoaded}
    <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"
+      role="alert">
-    >
+      <p class="font-bold">{$_('loading-cards')}</p>
-      <p class="font-bold">{$_("loading-cards")}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
-  {:else if current_cards.length === 0}
+  {:then}
-    <CardsEmptyState />
+    {#if current_cards.length === 0}
-  {:else}
+      <CardsEmptyState />
-    <div class="h-12 mt-1">
+    {:else}
-      {#if selected.length > 0}
+      <input
-        <button
+        type="search"
-          type="button"
+        bind:value={searchvalue}
-          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:text-sm inline-flex"
+        placeholder={$_('datatable.search')}
-          id="options-menu"
+        aria-label={$_('datatable.search')}
-          on:click={async () => {
+        class="gridjs-input gridjs-search-input mb-4" />
-            const prom = [];
+        <div class="h-12">
-            for (const card of selectedCards) {
+          <GenerateRunnerCards
-              prom.push(
+            bind:cards_show
-                await RunnerCardService.runnerCardControllerRemove(
+            bind:generate_cards />
-                  card.id,
+        </div>
-                  true
+      <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">
            await Promise.all(prom);
            for (const card of selectedCards) {
              current_cards = current_cards.filter((r) => r.id !== card.id);
            }
            options.update((options) => ({
              ...options,
              data: current_cards,
            }));
            $table.resetRowSelection();
          }}
        >
          {$_("delete-cards")}
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-5 h-5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
            />
          </svg>
        </button>
      {/if}
      <GenerateRunnerCards
        cards_show={selected.length > 0}
        bind:generate_cards={selectedCards}
      />
    </div>
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead>
          {#each $table.getHeaderGroups() as headerGroup}
            <tr class="select-none">
              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
                <InputElement
                  type="checkbox"
                  checked={$table.getIsAllRowsSelected()}
                  indeterminate={$table.getIsSomeRowsSelected()}
                  on:change={() => $table.toggleAllRowsSelected()}
                />
              </th>
              {#each headerGroup.headers as header}
                <TableHeader {header} />
              {/each}
            </tr>
          {/each}
        </thead>
        <tbody>
          {#each $table.getRowModel().rows as row}
            <tr>
-              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+              <th
-                <InputElement
+                scope="col"
-                  type="checkbox"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  checked={row.getIsSelected()}
+                <span
-                  on:change={() => row.toggleSelected()}
+                  on:click={() => {
-                />
+                    const newstate = !current_cards.some((r) => r.is_selected === true);
-              </td>
+                    current_cards = current_cards.map((r) => {
-              {#each row.getVisibleCells() as cell}
+                      r.is_selected = newstate;
-                <td>
+                      return r;
-                  <svelte:component
+                    });
-                    this={flexRender(
+                  }}
-                      cell.column.columnDef.cell,
+                  class="underline cursor-pointer select-none">{#if current_cards.some((r) => r.is_selected === true)}
-                      cell.getContext()
+                    {$_('deselect-all')}
-                    )}
+                  {:else}{$_('select-all')}{/if}
-                  />
+                </span>
-                </td>
+              </th>
-              {/each}
+              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {$_('code')}
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {$_('runner')}
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {$_('status')}
              </th>
              <th scope="col" class="relative px-6 py-3">
                <span class="sr-only">{$_('action')}</span>
              </th>
            </tr>
-          {/each}
+          </thead>
-        </tbody>
+          <tbody class="divide-y divide-gray-200 virtual-wrapper"
-      </table>
+  on:scroll={updateScroll}
  style="height: 70vh; width:100%"
  bind:this={ele}
          >
    {#each filtered_cards as card, index}
    {#if card.code
      .toLowerCase()
      .includes(
        searchvalue.toLowerCase()
      ) || card.runner?.firstname
        .toLowerCase()
        .includes(
          searchvalue.toLowerCase()
        ) || card.runner?.middlename
        .toLowerCase()
        .includes(
          searchvalue.toLowerCase()
        ) || card.runner?.lastname
        .toLowerCase()
        .includes(
          searchvalue.toLowerCase()
        ) || should_display_based_on_id(card.id)}
      <tr data-rowid="card_{card.id}">
        <td class="px-6 py-4 whitespace-nowrap">
          <input
            bind:checked={card.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">{card.code}</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="flex items-center">
            {#if card.runner}
              <a
                href="../runners/{card.runner.id}"
                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
                {card.runner.middlename || ''}
                {card.runner.lastname}</a>
            {:else}{$_('non-blanko')}{/if}
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="flex items-center">
            {#if card.enabled}
              <span
                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
            {:else}
              <span
                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
            {/if}
          </div>
        </td>
        {#if active_deletes[card.id] === true}
          <td
            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <button
              on:click={() => {
                active_deletes[card.id] = false;
              }}
              tabindex="0"
              class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
            <button
              on:click={() => {
                RunnerCardService.runnerCardControllerRemove(card.id, false).then(
                  (resp) => {
                    current_cards = current_cards.filter(
                      (obj) => obj.id !== card.id
                    );
                    Toastify({
                      text: $_('card-deleted'),
                      duration: 500,
                      backgroundColor:
                        'linear-gradient(to right, #00b09b, #96c93d)',
                    }).showToast();
                  }
                );
              }}
              tabindex="0"
              class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
          </td>
        {:else}
          <td
            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <button
              on:click={() => {
                open_edit_modal(card);
              }}
              class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
            {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
              <button
                on:click={() => {
                  active_deletes[card.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>
-    <TableBottom {table} {selected} />
+  {/await}
  {/if}
 {/if}
--- a/src/components/cards/DeleteCardModal.svelte
+++ b/src/components/cards/DeleteCardModal.svelte
@@ -1,128 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import { createEventDispatcher, onMount } from "svelte";
  export let modal_open;
  export let delete_card = {
    id: 0,
    code: "",
    runner: {
      firstname: "",
      lastname: "",
    },
  };
  const dispatch = createEventDispatcher();
  onMount(() => {
    document.onkeydown = (e) => {
      e = e || window.event;
      if (e.key === "Escape") {
        modal_open = false;
      }
      if (e.keyCode === 13) {
        if (createbtnenabled === true) {
          createbtnenabled = false;
          submit();
        }
      }
    };
  });
  async function submit() {
    dispatch("delete", { id: delete_card.id });
    modal_open = false;
  }
 </script>
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
    }}
  >
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline"
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-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
                  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
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_("confirm-delete")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_("please-confirm-the-deletion-of-card")}
                </p>
              </div>
              <div class="w-full">
                {$_("card")} #{delete_card.code}<br />
                <span class="inline-block">
                  {$_("runner")}:
                  {#if delete_card.runner}
                    <span class="inline-block"
                      >{delete_card.runner.firstname}
                      {delete_card.runner.lastname}</span
                    >
                  {:else}
                    {$_("non-blanko")}
                  {/if}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            on:click={submit}
            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:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("delete")}
          </button>
          <button
            on:click={() => {
              modal_open = false;
            }}
            type="button"
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("cancel")}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
--- a/src/components/cards/ThFilterRunner.svelte
+++ b/src/components/cards/ThFilterRunner.svelte
@@ -1,57 +0,0 @@
 <script>
  export let handler;
  let filterValue = "";
 </script>
 <th>
  <input
    on:input={() => {
      setTimeout(() => {
        const v = filterValue.toLowerCase();
        handler.filter(v, (c) => {
          // if (v === "") {
          //   return c;
          // }
          if (!c.runner && v === "blanko") {
            return "blanko";
          }
          if (v.startsWith("#")) {
            return `#${c.runner?.id}`;
          }
          if (c.runner) {
            let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
            if (c.runner.middlename) {
              runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
            }
            runnerName = runnerName.toLowerCase();
            return runnerName;
          }
          return "";
        });
      }, 150);
    }}
    bind:value={filterValue}
    type="text"
    name="runnerfilter"
    id="runnerfilter"
  />
 </th>
 <style>
  th {
    border-bottom: 1px solid #e0e0e0;
  }
  input {
    margin: -1px 0 0 0;
    padding: 0;
    width: 100%;
    height: 24px;
    border: none;
    text-align: left;
    background: inherit;
    outline: 0;
    font-size: 14px;
  }
 </style>
--- a/src/components/cards/ThFilterStatus.svelte
+++ b/src/components/cards/ThFilterStatus.svelte
@@ -1,45 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let handler;
  let selected = "all";
 </script>
 <th>
  <select
    on:input={() => {
      setTimeout(() => {
        if (`${selected}`.trim()) {
          if (selected === "all") {
            handler.filter("", "enabled");
          } else {
            handler.filter(selected, "enabled");
          }
        }
      }, 50);
    }}
    bind:value={selected}
    name="statusfilter"
    id="statusfilter"
  >
    <option value="all">{$_("all")}</option>
    <option value="true">{$_("enabled")}</option>
    <option value="false">{$_("disabled")}</option>
  </select>
 </th>
 <style>
  th {
    border-bottom: 1px solid #e0e0e0;
  }
  select {
    margin: -1px 0 0 0;
    padding: 0;
    width: 100%;
    height: 24px;
    border: none;
    text-align: left;
    background: inherit;
    outline: 0;
    font-size: 14px;
  }
 </style>
--- a/src/components/contacts/AddContactModal.svelte
+++ b/src/components/contacts/AddContactModal.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import {
    GroupContactService,
    RunnerTeamService,
@@ -86,7 +86,7 @@
    if (processed_last_submit === true) {
      processed_last_submit = false;
      const toast = Toastify({
-        text: $_('contact-is-being-added'),
+        text: "Contact is being added...",
        duration: -1,
      }).showToast();
      let address = {};
@@ -123,7 +123,7 @@
          modal_open = false;
          //
          Toastify({
-            text: $_('contact-added'),
+            text: "Contact added",
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
@@ -145,7 +145,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
--- a/src/components/contacts/ContactsOverview.svelte
+++ b/src/components/contacts/ContactsOverview.svelte
@@ -31,7 +31,7 @@
        bind:value={searchvalue}
        placeholder={$_('datatable.search')}
        aria-label={$_('datatable.search')}
-        class="mb-4" />
+        class="gridjs-input gridjs-search-input mb-4" />
      <div
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
        <table class="divide-y divide-gray-200 w-full">
--- a/src/components/dashboard/Dashboard.svelte
+++ b/src/components/dashboard/Dashboard.svelte
@@ -256,26 +256,6 @@
          <span>{$_('scanstations')}</span>
        </a>
      {/if}
      {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:GET')}
        <a
          class:bg-gray-100={$router.path === '/statsclients/'}
          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
          href="/statsclients/">
          <svg
            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 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}
      <a
        class:bg-gray-100={$router.path === '/settings/'}
        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
--- a/src/components/dashboard/MainDashContent.svelte
+++ b/src/components/dashboard/MainDashContent.svelte
@@ -1,224 +1,22 @@
 <script>
  import { _ } from "svelte-i18n";
-  import { StatsService } from "@odit/lfk-client-js";
+  import StatCards from "./StatCards.svelte";
  import StatCards from "./StatCard.svelte";
  import store from "../../store";
  import StatCard from "./StatCard.svelte";
  let navOpen = false;
  const stats_promise = StatsService.statsControllerGet();
 </script>
 <div
  class="p-5 overflow-x-hidden"
  on:click={() => {
    navOpen = false;
-  }}
+  }}>
 >
  <h1 class="text-3xl leading-tight">
-    <span class="font-extrabold">{$_("dashboard-title")}</span>
+    <span class="font-extrabold">{$_('dashboard-title')}</span>
    <span>
      -
-      {$_("dashboard-greeting")},
+      {$_('dashboard-greeting')},
-      <span class="text-blue-500"
+      <span
-        >{store.state.jwtinfo.userdetails.firstname}
+        class="text-blue-500">{store.state.jwtinfo.userdetails.firstname} {store.state.jwtinfo.userdetails.lastname}</span></span>
        {store.state.jwtinfo.userdetails.lastname}</span
      ></span
    >
  </h1>
-  <h1>{$_("general-stats")}</h1>
+  <StatCards />
  {#await stats_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">{$_("stats-are-being-loaded")}</p>
      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
  {:then stats}
    <div
      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
    >
      <StatCard
        title={$_("runners")}
        value={stats.total_runners}
        href="/runners/"
      >
        <svg
          height="24"
          width="24"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          ><path d="M0 0h24v24H0z" fill="none" />
          <path
            d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("total-scans")}
        value={stats.total_scans}
        href="/scans/"
      >
        <svg
          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
        >
      </StatCard>
      <StatCard
        title={$_("total-donors")}
        value={stats.total_donors}
        href="/donors/"
      >
        <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
        >
      </StatCard>
      <StatCard
        title={$_("total-donation-count")}
        value={stats.total_donations}
        href="/donations/"
      >
        <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
        >
      </StatCard>
      <StatCard
        title={$_("average-donation")}
        value={`${(stats.average_donation / 100).toFixed(2)} €`}
        href="/donations/"
      >
        <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
        >
      </StatCard>
      <StatCard
        title={$_("total-donations")}
        value={`${(stats.total_donation / 100).toFixed(2)} €`}
        href="/donations/"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          height="24"
          fill="currentColor"
          width="24"
          ><path d="M0 0h24v24H0z" fill="none" />
          <path
            d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("total-distance")}
        value={`${stats.total_distance / 1000} km`}
        href="#"
      >
        <svg
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          height="24"
          width="24"
          ><path d="M0 0h24v24H0z" fill="none" />
          <path
            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("average-distance")}
        value={`${(stats.average_distance / 1000).toFixed(2)} km`}
        href="#"
      >
        <svg
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          height="24"
          width="24"
          ><path d="M0 0h24v24H0z" fill="none" />
          <path
            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("count_teams")}
        value={stats.total_teams}
        href="/teams/"
      >
        <svg
          stroke="currentColor"
          fill="none"
          stroke-width="2"
          viewBox="0 0 24 24"
          stroke-linecap="round"
          stroke-linejoin="round"
          size="24"
          class="stroke-current text-grey-500"
          height="24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          ><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
          <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
        >
      </StatCard>
      <StatCard
        title={$_("count_organizations")}
        value={stats.total_orgs}
        href="/orgs/"
      >
        <svg
          height="24"
          fill="currentColor"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          ><path fill="none" d="M0 0h24v24H0z" />
          <path
            d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z"
          /></svg
        >
      </StatCard>
    </div>
  {: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}
 </div>
--- a/src/components/dashboard/StatCard.svelte
+++ b/src/components/dashboard/StatCard.svelte
@@ -1,22 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let href = "#"
  export let title = "";
  export let value = "";
 </script>
 <a href={href}>
  <div
    class="p-4 rounded-lg bg-white border border-grey-100">
    <div class="flex flex-row items-center justify-between">
      <div class="flex flex-col">
        <div class="text-xs uppercase font-light text-grey-500">
          {title}
        </div>
        <div class="text-xl font-bold">{value}</div>
      </div>
      <slot></slot>
    </div>
  </div>
 </a>
--- a/src/components/dashboard/StatCards.svelte
+++ b/src/components/dashboard/StatCards.svelte
@@ -0,0 +1,165 @@
 <script>
  import { StatsService } from "@odit/lfk-client-js";
  import { _ } from "svelte-i18n";
  const stats_promise = StatsService.statsControllerGet();
 </script>
 <!--  -->
 <h1>{$_('general-stats')}</h1>
 {#await stats_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">{$_('stats-are-being-loaded')}</p>
    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
  </div>
 {:then stats}
  <div
    class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
    <a href="/runners/" class="w-full lg:w-1/4">
      <div
        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <div class="flex flex-row items-center justify-between">
          <div class="flex flex-col">
            <div class="text-xs uppercase font-light text-grey-500">
              {$_('runners')}
            </div>
            <div class="text-xl font-bold">{stats.total_runners}</div>
          </div>
          <svg
            height="24"
            width="24"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none" />
            <path
              d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z" /></svg>
        </div>
      </div>
    </a>
    <div class="w-full lg:w-1/4">
      <div
        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <div class="flex flex-row items-center justify-between">
          <div class="flex flex-col">
            <div class="text-xs uppercase font-light text-grey-500">
              {$_('total-scans')}
            </div>
            <div class="text-xl font-bold">{stats.total_scans}</div>
          </div><svg
            stroke="currentColor"
            fill="currentColor"
            stroke-width="2"
            viewBox="0 0 24 24"
            stroke-linecap="round"
            stroke-linejoin="round"
            size="24"
            class="stroke-current text-grey-500"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"><polyline
              points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-1/4">
      <div
        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <div class="flex flex-row items-center justify-between">
          <div class="flex flex-col">
            <div class="text-xs uppercase font-light text-grey-500">
              {$_('total-donations')}
            </div>
            <div class="text-xl font-bold">{stats.total_donation} €</div>
          </div><svg
            xmlns="http://www.w3.org/2000/svg"
            height="24"
            fill="currentColor"
            width="24"><path d="M0 0h24v24H0z" fill="none" />
            <path
              d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z" /></svg>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-1/4">
      <div
        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <div class="flex flex-row items-center justify-between">
          <div class="flex flex-col">
            <div class="text-xs uppercase font-light text-grey-500">
              {$_('total-distance')}
            </div>
            <div class="text-xl font-bold">
              {stats.total_distance / 1000}
              km
            </div>
          </div>
          <svg
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
            height="24"
            width="24"><path d="M0 0h24v24H0z" fill="none" />
            <path
              d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z" /></svg>
        </div>
      </div>
    </div>
    <a href="/teams/" class="w-full lg:w-1/4">
      <div
        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <div class="flex flex-row items-center justify-between">
          <div class="flex flex-col">
            <div class="text-xs uppercase font-light text-grey-500">
              {$_('count_teams')}
            </div>
            <div class="text-xl font-bold">{stats.total_teams}</div>
          </div>
          <svg
            stroke="currentColor"
            fill="none"
            stroke-width="2"
            viewBox="0 0 24 24"
            stroke-linecap="round"
            stroke-linejoin="round"
            size="24"
            class="stroke-current text-grey-500"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"><path
              d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
            <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
        </div>
      </div>
    </a>
    <a href="/orgs/" class="w-full lg:w-1/4">
      <div
        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <div class="flex flex-row items-center justify-between">
          <div class="flex flex-col">
            <div class="text-xs uppercase font-light text-grey-500">
              {$_('count_organizations')}
            </div>
            <div class="text-xl font-bold">{stats.total_orgs}</div>
          </div>
          <svg
            height="24"
            fill="currentColor"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
            <path
              d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z" /></svg>
        </div>
      </div>
    </a>
  </div>
 {: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}
--- a/src/components/donations/AddDonationModal.svelte
+++ b/src/components/donations/AddDonationModal.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-
+  import { focusTrap } from "svelte-focus-trap";
  import {
    DonationService,
    DonorService,
@@ -9,10 +9,8 @@
  } from "@odit/lfk-client-js";
  import Select from "svelte-select";
  import Toastify from "toastify-js";
  import { is_promise } from "svelte/internal";
  import { createEventDispatcher } from "svelte";
  export let modal_open;
-  const dispatch = createEventDispatcher();
+  export let current_donations;
  const getDonorLabel = (option) =>
    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
  const filterDonors = (label, filterText, option) =>
@@ -26,7 +24,6 @@
  $: donors = [];
  $: runners = [];
  $: is_fixed = false;
  $: is_paid = false;
  DonorService.donorControllerGetAll().then((val) => {
    donors = val.map((r) => {
      return { label: getDonorLabel(r), value: r };
@@ -60,18 +57,14 @@
      let amount_cent = Math.floor(amount_input * 100);
      processed_last_submit = false;
      const toast = Toastify({
-        text: $_("adding-donation"),
+        text: "adding donation",
        duration: -1,
      }).showToast();
      if (is_fixed) {
        let postdata = {
          donor,
          amount: amount_cent,
          paidAmount: 0,
        };
        if (is_paid) {
          postdata.paidAmount = amount_cent;
        }
        DonationService.donationControllerPostFixed(postdata)
          .then((result) => {
            donor = donors[0].id || 0;
@@ -80,11 +73,12 @@
            modal_open = false;
            //
            Toastify({
-              text: $_("donation_added"),
+              text: "donation_added",
              duration: 500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
-            dispatch("created", { donations: [result] });
+            current_donations.push(result);
            current_donations = current_donations;
          })
          .catch((err) => {
            //
@@ -108,11 +102,12 @@
            modal_open = false;
            //
            Toastify({
-              text: $_("donation_added"),
+              text: "donation_added",
              duration: 500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
-            dispatch("created", { donations: [result] });
+            current_donations.push(result);
            current_donations = current_donations;
          })
          .catch((err) => {
            //
@@ -127,209 +122,8 @@
  }
 </script>
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
    }}
  >
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline"
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-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
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {#if is_fixed}
                  {$_("create-a-new-fixed-donation")}
                {:else}{$_("create-a-new-distance-donation")}{/if}
              </h3>
              <label class="content-center align-middle object-center">
                <span class="ml-2 text-base" class:text-gray-300={is_fixed}
                  >{$_("distance-donation")}</span
                >
                <input
                  class="toggle relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none align-middle"
                  type="checkbox"
                  bind:checked={is_fixed}
                />
                <span class="ml-2 text-base" class:text-gray-300={!is_fixed}
                  >{$_("fixed-donation")}</span
                >
              </label>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_(
                    "please-provide-the-nessecary-information-to-create-a-new-donation"
                  )}
                </p>
              </div>
              <div class="grid grid-cols-6 gap-6">
                <div class="col-span-6">
                  <label
                    for="donor"
                    class="block text-sm 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={donors}
                    showChevron={true}
                    placeholder={$_("search-for-donor-name-or-id")}
                    noOptionsMessage={$_("no-donors-found")}
                    on:select={(selectedValue) =>
                      (donor = selectedValue.detail.value.id)}
                    on:clear={() => (donors = null)}
                  />
                </div>
                {#if !is_fixed}
                  <div class="col-span-6">
                    <label
                      for="donor"
                      class="block text-sm 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={runners}
                      showChevron={true}
                      placeholder={$_("search-for-runner-by-name-or-id")}
                      noOptionsMessage={$_("no-runners-found")}
                      on:select={(selectedValue) =>
                        (runner = selectedValue.detail.value.id)}
                      on:clear={() => (runner = null)}
                    />
                  </div>
                {/if}
                <div class="col-span-6">
                  <label
                    for="donation_amount_eur"
                    class="block text-sm font-medium text-gray-700"
                  >
                    {#if !is_fixed}
                      {$_("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:text-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 text-sm"
                      >€</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>
                {#if is_fixed}
                  <div class="col-span-6">
                    <label
                      for="paid"
                      class="block text-sm font-medium text-gray-700"
                      >{$_("already-paid")}</label
                    >
                    <p class="text-gray-500">
                      <input
                        id="paid"
                        bind:checked={is_paid}
                        name="paid"
                        type="checkbox"
                        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
                      />
                      <span class="align-text-bottom">
                        {#if is_paid}
                          {$_("paid")}
                        {:else}
                          {$_("open")}
                        {/if}
                      </span>
                    </p>
                  </div>
                {/if}
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            disabled={!createbtnenabled}
            class:opacity-50={!createbtnenabled}
            on:click={submit}
            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:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("create")}
          </button>
          <button
            on:click={() => {
              modal_open = false;
            }}
            type="button"
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("cancel")}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
 <style>
-  .toggle:before {
+  input:before {
    content: "";
    position: absolute;
    width: 1.25rem;
@@ -343,12 +137,159 @@
    transition: 0.2s ease-in-out;
  }
-  .toggle:checked {
+  input:checked {
    /* @apply: bg-indigo-400; */
    background-color: #7f9cf5;
  }
-  .toggle:checked:before {
+  input:checked:before {
    left: 1.25rem;
  }
 </style>
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
    }}>
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop" />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span>
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline">
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
              <svg
                class="h-6 w-6 text-blue-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>
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {#if is_fixed}
                  {$_('create-a-new-fixed-donation')}
                {:else}{$_('create-a-new-distance-donation')}{/if}
              </h3>
              <label class="content-center align-middle object-center">
                <span
                  class="ml-2 text-base"
                  class:text-gray-300={is_fixed}>{$_('distance-donation')}</span>
                <input
                  class="relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none align-middle"
                  type="checkbox"
                  bind:checked={is_fixed} />
                <span
                  class="ml-2 text-base	"
                  class:text-gray-300={!is_fixed}>{$_('fixed-donation')}</span>
              </label>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_('please-provide-the-nessecary-information-to-create-a-new-donation')}
                </p>
              </div>
              <div class="grid grid-cols-6 gap-6">
                <div class="col-span-6">
                  <label
                    for="donor"
                    class="block text-sm 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={donors}
                    showChevron={true}
                    placeholder={$_('search-for-donor-name-or-id')}
                    noOptionsMessage={$_('no-donors-found')}
                    on:select={(selectedValue) => (donor = selectedValue.detail.value.id)}
                    on:clear={() => (donors = null)} />
                </div>
                {#if !is_fixed}
                  <div class="col-span-6">
                    <label
                      for="donor"
                      class="block text-sm 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={runners}
                      showChevron={true}
                      placeholder={$_('search-for-runner-by-name-or-id')}
                      noOptionsMessage={$_('no-runners-found')}
                      on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
                      on:clear={() => (runner = null)} />
                  </div>
                {/if}
                <div class="col-span-6">
                  <label
                    for="donation_amount_eur"
                    class="block text-sm font-medium text-gray-700">
                    {#if !is_fixed}
                      {$_('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:text-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 text-sm">€</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>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            disabled={!createbtnenabled}
            class:opacity-50={!createbtnenabled}
            on:click={submit}
            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:ml-3 sm:w-auto sm:text-sm">
            {$_('create')}
          </button>
          <button
            on:click={() => {
              modal_open = false;
            }}
            type="button"
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
            {$_('cancel')}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
--- a/src/components/donations/AddDonationPaymentModal.svelte
+++ b/src/components/donations/AddDonationPaymentModal.svelte
@@ -1,221 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import { DonationService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  export let payment_modal_open = false;
  export let original_data = {};
  export let paid_amount_input = 0;
  const dispatch = createEventDispatcher();
  $: processed_last_submit = true;
  function focus(el) {
    el.focus();
  }
  $: createbtnenabled =
    is_paid_amount_valid &&
    !(paid_amount_input * 100 == original_data.paidAmount);
  $: is_paid_amount_valid = paid_amount_input > 0;
  (() => {
    document.onkeydown = (e) => {
      e = e || window.event;
      if (e.key === "Escape") {
        payment_modal_open = false;
      }
      if (e.keyCode === 13) {
        if (createbtnenabled === true) {
          createbtnenabled = false;
          submit();
        }
      }
    };
  })();
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
      const toast = Toastify({
        text: $_("updating-donation"),
        duration: -1,
      }).showToast();
      const editable = Object.assign({}, original_data);
      editable.donor = editable.donor.id;
      editable.paidAmount = paid_amount_input * 100;
      if (editable.responseType == "DISTANCEDONATION" || editable.runner) {
        editable.runner = editable.runner.id;
        DonationService.donationControllerPutDistance(
          original_data.id,
          editable
        )
          .then((result) => {
            payment_modal_open = false;
            //
            Toastify({
              text: $_("donation-updated"),
              duration: 500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
            dispatch("created", { donation: response });
          })
          .catch((err) => {
            //
          })
          .finally(() => {
            processed_last_submit = true;
            //
            toast.hideToast();
          });
      } else {
        DonationService.donationControllerPutFixed(original_data.id, editable)
          .then((result) => {
            payment_modal_open = false;
            //
            Toastify({
              text: $_("donation-updated"),
              duration: 500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
            dispatch("created", { donation: response });
          })
          .catch((err) => {
            //
          })
          .finally(() => {
            processed_last_submit = true;
            //
            toast.hideToast();
          });
      }
    }
  }
 </script>
 {#if payment_modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:clickOutside
    on:click_outside={() => {
      payment_modal_open = false;
    }}
  >
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline"
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-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
                  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
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_("enter-payment")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_(
                    "you-can-enter-the-donations-paid-amount-manually-or-use-the-max-button-to-use-the-donations-exact-amount"
                  )}
                </p>
              </div>
              <div class="grid grid-cols gap-6">
                <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_paid_amount_valid}
                      class:focus:border-red-500={!is_paid_amount_valid}
                      class:focus:ring-red-500={!is_paid_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>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            disabled={!createbtnenabled}
            class:opacity-50={!createbtnenabled}
            on:click={submit}
            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:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("save-changes")}
          </button>
          <button
            on:click={() => {
              payment_modal_open = false;
            }}
            type="button"
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("cancel")}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
--- a/src/components/donations/DeleteDonationModal.svelte
+++ b/src/components/donations/DeleteDonationModal.svelte
@@ -1,122 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import { createEventDispatcher, onMount } from "svelte";
  export let modal_open;
  export let delete_donation = {
    id: 0,
    runner: {
      firstname: "",
      lastname: "",
    },
    donor: {
      firstname: "",
      lastname: "",
    },
  };
  const dispatch = createEventDispatcher();
  onMount(() => {
    document.onkeydown = (e) => {
      e = e || window.event;
      if (e.key === "Escape") {
        modal_open = false;
      }
      if (e.keyCode === 13) {
        if (createbtnenabled === true) {
          createbtnenabled = false;
          submit();
        }
      }
    };
  });
  async function submit() {
    dispatch("delete", { id: delete_donation.id });
    modal_open = false;
  }
 </script>
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
    }}
  >
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline"
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-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
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_("confirm-delete")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_("please-confirm-the-deletion-of-donation")}
                </p>
              </div>
              <div class="w-full">
                <span class="inline-block"
                  ><b>{$_("donor")}</b>: {delete_donation.donor.firstname}
                  {delete_donation.donor.lastname}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            on:click={submit}
            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:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("delete")}
          </button>
          <button
            on:click={() => {
              modal_open = false;
            }}
            type="button"
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("cancel")}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
--- a/src/components/donations/DonationDetail.svelte
+++ b/src/components/donations/DonationDetail.svelte
@@ -20,8 +20,6 @@
  $: 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" &&
@@ -32,17 +30,15 @@
    (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(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);
+    original_data = Object.assign(original_data, data);
-    editable = Object.assign({}, original_data);
+    editable = Object.assign(editable, original_data);
    paid_amount_input = data.paidAmount / 100;
    if (data.responseType == "DISTANCEDONATION") {
      amount_input = data.amountPerDistance / 100;
      RunnerService.runnerControllerGetAll().then((val) => {
@@ -70,11 +66,10 @@
  function submit() {
    if (data_loaded === true && save_enabled) {
      Toastify({
-        text: $_('updating-donation'),
+        text: "Donation is being updated",
        duration: 2500,
      }).showToast();
      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);
@@ -88,7 +83,7 @@
            Object.assign(original_data, editable);
            original_data = original_data;
            Toastify({
-              text: $_('donation-updated'),
+              text: "updated donation",
              duration: 2500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
@@ -103,7 +98,7 @@
            Object.assign(original_data, editable);
            original_data = original_data;
            Toastify({
-              text: $_('donation-updated'),
+              text: "updated donation",
              duration: 2500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
@@ -117,7 +112,7 @@
    DonationService.donationControllerRemove(original_data.id, false)
      .then((resp) => {
        Toastify({
-          text: $_('donation-deleted'),
+          text: "Donation delete",
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
@@ -224,24 +219,7 @@
      <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"
@@ -254,7 +232,7 @@
        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:select={(selectedValue) => (editable.donor = selectedValue.detail.value)}
        on:clear={() => (editable.donor = null)} />
    </div>
    {#if original_data.responseType == 'DISTANCEDONATION'}
@@ -302,39 +280,6 @@
        </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>
 {:catch error}
  <PromiseError {error} />
--- a/src/components/donations/DonationDonor.svelte
+++ b/src/components/donations/DonationDonor.svelte
@@ -1,18 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let donor;
 </script>
 {#if !donor || donor.firstname == 0}
  {$_("donor-has-no-associated-donations")}
 {:else}
  <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"
      >{donor.firstname}
      {#if donor.middlename}{donor.middlename}{/if}
      {donor.lastname}</a
    >
  </div>
 {/if}
--- a/src/components/donations/DonationRunner.svelte
+++ b/src/components/donations/DonationRunner.svelte
@@ -1,18 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let runner;
 </script>
 {#if !runner || runner.firstname == 0}
  {$_("fixed-donation")}
 {:else}
  <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"
      >{runner.firstname}
      {#if runner.middlename}{runner.middlename}{/if}
      {runner.lastname}</a
    >
  </div>
 {/if}
--- a/src/components/donations/DonationStatus.svelte
+++ b/src/components/donations/DonationStatus.svelte
@@ -1,16 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let status;
 </script>
 {#if 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}
--- a/src/components/donations/DonationTableAction.svelte
+++ b/src/components/donations/DonationTableAction.svelte
@@ -1,21 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import TableActions from "../shared/TableActions.svelte";
  export let detailsLink;
  export let detailsAction;
  export let deleteEnabled;
  export let deleteAction;
  export let paymentAction;
 </script>
 <button
  on:click={paymentAction}
  class="text-[#025a21] hover:text-green-900 mr-4">{$_("enter-payment")}</button
 >
 <TableActions
  bind:detailsAction
  bind:detailsLink
  bind:deleteAction
  bind:deleteEnabled
 />
--- a/src/components/donations/Donations.svelte
+++ b/src/components/donations/Donations.svelte
@@ -5,33 +5,25 @@
  import DonationsOverview from "./DonationsOverview.svelte";
  $: current_donations = [];
  export let modal_open = false;
  let addDonations;
 </script>
 <section class="container p-5">
  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("donations")}
+    {$_('donations')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:CREATE')}
      <button
        on:click={() => {
          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:ml-3 sm:w-auto sm:text-sm"
+        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:ml-3 sm:w-auto sm:text-sm">
-      >
+        {$_('add-donation')}
        {$_("add-donation")}
      </button>
    {/if}
  </span>
-  <DonationsOverview bind:current_donations bind:addDonations />
+  <DonationsOverview bind:current_donations />
 </section>
-{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
+{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:CREATE')}
-  <AddDonationModal
+  <AddDonationModal bind:current_donations bind:modal_open />
    on:created={(event) => {
      console.log(event)
      addDonations(event.detail.donations);
    }}
    bind:modal_open
  />
 {/if}
--- a/src/components/donations/DonationsOverview.svelte
+++ b/src/components/donations/DonationsOverview.svelte
@@ -1,287 +1,194 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import { DonationService } from "@odit/lfk-client-js";
+  import { DonationService, DonorService } from "@odit/lfk-client-js";
  import store from "../../store";
  import Toastify from "toastify-js";
  import DonationsEmptyState from "./DonationsEmptyState.svelte";
  import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte";
  import { onMount } from "svelte";
  import {
    createSvelteTable,
    flexRender,
    getCoreRowModel,
    getFilteredRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    renderComponent,
  } from "@tanstack/svelte-table";
  import { writable } from "svelte/store";
  import TableBottom from "../shared/TableBottom.svelte";
  import InputElement from "../shared/InputElement.svelte";
  import TableHeader from "../shared/TableHeader.svelte";
  import DonationDonor from "./DonationDonor.svelte";
  import DonationRunner from "./DonationRunner.svelte";
  import DonationStatus from "./DonationStatus.svelte";
  import DonationTableAction from "./DonationTableAction.svelte";
  import DeleteDonationModal from "./DeleteDonationModal.svelte";
  import {
    donationDonorFilter,
    donationRunnerFilter,
  } from "../shared/tablefilters";
  $: searchvalue = "";
  $: active_deletes = [];
  $: active_edits = [];
  $: selectedDonations =
    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
  $: selected =
    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
  $: dataLoaded = false;
  export let current_donations = [];
-  export const addDonations = (donations) => {
+  const donations_promise = DonationService.donationControllerGetAll().then(
-    current_donations = current_donations.concat(...donations);
+    (val) => {
-    options.update((options) => ({
+      current_donations = val;
      ...options,
      data: current_donations,
    }));
  };
  //Section table
  const columns = [
    {
      accessorKey: "id",
      header: () => "id",
      filterFn: `equalsString`,
    },
    {
      accessorKey: "donor",
      header: () => $_("donor"),
      cell: (info) => {
        return renderComponent(DonationDonor, { donor: info.getValue() });
      },
      filterFn: `donor`,
    },
    {
      accessorKey: "runner",
      header: () => $_("runner"),
      cell: (info) => {
        return renderComponent(DonationRunner, { runner: info.getValue() });
      },
      filterFn: `runner`,
    },
    {
      accessorKey: "amountPerDistance",
      header: () => $_("amount-per-kilometer"),
      cell: (info) => {
        if (!info.getValue()) {
          return $_("fixed-donation");
        }
        return `${(info.getValue() / 100)
          .toFixed(2)
          .toLocaleString("de-DE", { valute: "EUR" })} €`;
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "amount",
      header: () => $_("donation-amount"),
      cell: (info) => {
        return `${(info.getValue() / 100)
          .toFixed(2)
          .toLocaleString("de-DE", { valute: "EUR" })} €`;
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "paidAmount",
      header: () => $_("total-paid-amount"),
      cell: (info) => {
        return `${(info.getValue() / 100)
          .toFixed(2)
          .toLocaleString("de-DE", { valute: "EUR" })} €`;
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "status",
      header: () => $_("status"),
      cell: (info) => {
        return renderComponent(DonationStatus, { status: info.getValue() });
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "actions",
      header: () => $_("action"),
      cell: (info) => {
        return renderComponent(DonationTableAction, {
          detailsLink: `./${info.row.original.id}`,
          deleteAction: () => {
            active_deletes = current_donations.filter(
              (r) => r.id == info.row.original.id
            );
          },
          paymentAction: () => {
            active_edits = current_donations.filter(
              (r) => r.id == info.row.original.id
            );
          },
          deleteEnabled:
            store.state.jwtinfo.userdetails.permissions.includes(
              "DONATION:DELETE"
            ),
        });
      },
      enableColumnFilter: false,
      enableSorting: false,
    },
  ];
  const options = writable({
    data: [],
    columns: columns,
    initialState: {
      pagination: {
        pageSize: 50,
      },
    },
    filterFns: {
      donor: donationDonorFilter,
      runner: donationRunnerFilter,
    },
    enableRowSelection: true,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });
  const table = createSvelteTable(options);
  async function deleteDonation(delete_donation_id) {
    await DonationService.donationControllerRemove(delete_donation_id, true);
    current_donations = current_donations.filter(
      (r) => r.id !== delete_donation_id
    );
    options.update((options) => ({
      ...options,
      data: current_donations,
    }));
    Toastify({
      text: $_("donation-deleted"),
      duration: 3500,
      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    }).showToast();
  }
  onMount(async () => {
    let page = 0;
    while (page >= 0) {
      const donations = await DonationService.donationControllerGetAll(
        page,
        100
      );
      if (donations.length == 0) {
        page = -2;
      }
      current_donations = current_donations.concat(...donations);
      options.update((options) => ({
        ...options,
        data: current_donations,
      }));
      dataLoaded = true;
      page++;
    }
-    console.log("All donations loaded");
+  );
-  });
+  function should_display_based_on_id(id) {
    if (searchvalue.toString().slice(-1) === "*") {
      return id.toString().startsWith(searchvalue.replace("*", ""));
    }
    return id.toString() === searchvalue;
  }
 </script>
-<AddDonationPaymentModal
+{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
-  original_data={active_edits[0]}
+  {#await donations_promise}
  payment_modal_open={active_edits.length > 0}
  paid_amount_input={(active_edits[0]?.paidAmount || 0) / 100}
  on:created={(event) => {
    current_donations[
      current_donations.findIndex((d) => d.id === event.detail.donation.id)
    ].paidAmount = event.detail.donation.paidAmount;
    options.update((options) => ({
      ...options,
      data: current_donations,
    }));
  }}
 />
 <DeleteDonationModal
  delete_donation={active_deletes[0]}
  modal_open={active_deletes.length > 0}
  on:delete={(event) => {
    deleteDonation(event.detail.id);
  }}
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
  {#if !dataLoaded}
    <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"
+      role="alert">
-    >
+      <p class="font-bold">donations are being loaded</p>
-      <p class="font-bold">{$_("donations-are-being-loaded")}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
-  {:else if current_donations.length === 0}
+  {:then}
-    <DonationsEmptyState />
+    {#if current_donations.length === 0}
-  {:else}
+      <DonationsEmptyState />
-    <input
+    {:else}
-      type="search"
+      <input
-      bind:value={searchvalue}
+        type="search"
-      placeholder={$_("datatable.search")}
+        bind:value={searchvalue}
-      aria-label={$_("datatable.search")}
+        placeholder={$_('datatable.search')}
-      class="mb-4"
+        aria-label={$_('datatable.search')}
-    />
+        class="gridjs-input gridjs-search-input mb-4" />
-    <div
+      <div
-      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-    >
+        <table class="divide-y divide-gray-200 w-full">
-      <table class="w-full">
+          <thead class="bg-gray-50">
        <thead>
          {#each $table.getHeaderGroups() as headerGroup}
            <tr class="select-none">
              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
                <InputElement
                  type="checkbox"
                  checked={$table.getIsAllRowsSelected()}
                  indeterminate={$table.getIsSomeRowsSelected()}
                  on:change={() => $table.toggleAllRowsSelected()}
                />
              </th>
              {#each headerGroup.headers as header}
                <TableHeader {header} />
              {/each}
            </tr>
          {/each}
        </thead>
        <tbody>
          {#each $table.getRowModel().rows as row}
            <tr>
-              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+              <th
-                <InputElement
+                scope="col"
-                  type="checkbox"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  checked={row.getIsSelected()}
+                {$_('donor')}
-                  on:change={() => row.toggleSelected()}
+              </th>
-                />
+              <th
-              </td>
+                scope="col"
-              {#each row.getVisibleCells() as cell}
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                <td>
+                {$_('runner')}
-                  <svelte:component
+              </th>
-                    this={flexRender(
+              <th
-                      cell.column.columnDef.cell,
+                scope="col"
-                      cell.getContext()
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    )}
+                {$_('amount-per-kilometer')}
-                  />
+              </th>
-                </td>
+              <th
-              {/each}
+                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {$_('donation-amount')}
              </th>
              <th scope="col" class="relative px-6 py-3">
                <span class="sr-only">{$_('action')}</span>
              </th>
            </tr>
-          {/each}
+          </thead>
-        </tbody>
+          <tbody class="divide-y divide-gray-200">
-      </table>
+            {#each current_donations as donation}
              {#if donation.donor.firstname
                .toLowerCase()
                .includes(
                  searchvalue.toLowerCase()
                ) ||  donation.donor.lastname
                  .toLowerCase()
                  .includes(
                    searchvalue.toLowerCase()
                  ) || donation.runner?.firstname
                  .toLowerCase()
                  .includes(
                    searchvalue.toLowerCase()
                  ) || donation.runner?.lastname
                  .toLowerCase()
                  .includes(
                    searchvalue.toLowerCase()
                  ) || should_display_based_on_id(donation.id)}
                <tr data-rowid="donation_{donation.id}">
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <a
                        href="../donors/{donation.donor.id}"
                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.donor.firstname}
                        {donation.donor.middlename || ''}
                        {donation.donor.lastname}</a>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    {#if donation.runner}
                      <div class="text-sm font-medium text-gray-900">
                        <a
                          href="../runners/{donation.runner.id}"
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.runner.firstname}
                          {donation.runner.middlename || ''}
                          {donation.runner.lastname}</a>
                      </div>
                    {:else}
                      <div class="text-sm font-medium text-gray-900">
                        {$_('fixed-donation')}
                      </div>
                    {/if}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    {#if donation.amountPerDistance}
                      <div class="text-sm font-medium text-gray-900">
                        {(donation.amountPerDistance / 100)
                          .toFixed(2)
                          .toLocaleString('de-DE', { valute: 'EUR' })}€
                      </div>
                    {:else}
                      <div class="text-sm font-medium text-gray-900">
                        {$_('fixed-donation')}
                      </div>
                    {/if}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm font-medium text-gray-900">
                      {(donation.amount / 100)
                        .toFixed(2)
                        .toLocaleString('de-DE', { valute: 'EUR' })}€
                    </div>
                  </td>
                  {#if active_deletes[donation.id] === true}
                    <td
                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button
                        on:click={() => {
                          active_deletes[donation.id] = false;
                        }}
                        tabindex="0"
                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                      <button
                        on:click={() => {
                          DonationService.donationControllerRemove(donation.id, false).then(
                            (resp) => {
                              current_donations = current_donations.filter(
                                (obj) => obj.id !== donation.id
                              );
                              Toastify({
                                text: 'Donation deleted',
                                duration: 500,
                                backgroundColor:
                                  'linear-gradient(to right, #00b09b, #96c93d)',
                              }).showToast();
                            }
                          );
                        }}
                        tabindex="0"
                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
                    </td>
                  {:else}
                    <td
                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <a
                        href="./{donation.id}"
                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
                      {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
                        <button
                          on:click={() => {
                            active_deletes[donation.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>
-    <div class="h-2" />
+  {/await}
    <TableBottom {table} {selected} />
  {/if}
 {/if}
--- a/src/components/donors/AddDonorModal.svelte
+++ b/src/components/donors/AddDonorModal.svelte
@@ -1,13 +1,15 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-
+  import { focusTrap } from "svelte-focus-trap";
-  import { DonorService } from "@odit/lfk-client-js";
+  import {
    DonorService
  } from "@odit/lfk-client-js";
  import isEmail from "validator/es/lib/isEmail";
  import isMobilePhone from "validator/es/lib/isMobilePhone";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  export let modal_open;
  export let current_donors;
  let firstname_input;
  let lastname_input;
  let middlename_input;
@@ -17,7 +19,6 @@
  let address_input2;
  let address_zipcode;
  let address_city;
  const dispatch = createEventDispatcher();
  function focus(el) {
    el.focus();
  }
@@ -74,7 +75,7 @@
    if (processed_last_submit === true) {
      processed_last_submit = false;
      const toast = Toastify({
-        text: $_("donor-is-being-added"),
+        text: $_('donor-is-being-added'),
        duration: -1,
      }).showToast();
      let address = {};
@@ -91,7 +92,7 @@
        firstname: firstname_input_value,
        lastname: lastname_input_value,
        address,
-        receiptNeeded: address_checked,
+        receiptNeeded: address_checked
      };
      if (middlename_input_value) {
        postdata.middlename = middlename_input_value;
@@ -111,11 +112,12 @@
          modal_open = false;
          //
          Toastify({
-            text: $_("donor-added"),
+            text: $_('donor-added'),
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
-          dispatch("created", { donors: [result] });
+          current_donors.push(result);
          current_donors = current_donors;
        })
        .catch((err) => {
          //
@@ -132,70 +134,58 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
-    }}
+    }}>
  >
    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
+          data-id="modal_backdrop" />
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
+        aria-hidden="true">&#8203;</span>
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
-        aria-labelledby="modal-headline"
+        aria-labelledby="modal-headline">
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
            >
              <svg
                class="h-6 w-6 text-blue-600"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                width="24"
-                height="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
                ><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"
+        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>
                /></svg
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("create-a-new-donor")}
+                {$_('create-a-new-donor')}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
-                  {$_(
+                  {$_('please-provide-the-nessecary-information-to-add-a-new-donor')}
                    "please-provide-the-nessecary-information-to-add-a-new-donor"
                  )}
                </p>
              </div>
              <div class="grid grid-cols-6 gap-6">
                <div class="col-span-6">
                  <label
                    for="firstname"
-                    class="block text-sm font-medium text-gray-700"
+                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
                    >{$_("first-name")}</label
                  >
                  <input
                    use:focus
                    autocomplete="off"
-                    placeholder={$_("first-name")}
+                    placeholder={$_('first-name')}
                    class:border-red-500={!isFirstnameValid}
                    class:focus:border-red-500={!isFirstnameValid}
                    class:focus:ring-red-500={!isFirstnameValid}
@@ -203,41 +193,34 @@
                    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-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"
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                    >
+                      {$_('first-name-is-required')}
                      {$_("first-name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="trackname"
-                    class="block text-sm font-medium text-gray-700"
+                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
                    >{$_("middle-name")}</label
                  >
                  <input
                    autocomplete="off"
-                    placeholder={$_("middle-name")}
+                    placeholder={$_('middle-name')}
                    bind:value={middlename_input_value}
                    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-gray-500 rounded-md p-2" />
                  />
                </div>
                <div class="col-span-6">
                  <label
                    for="lastname"
-                    class="block text-sm font-medium text-gray-700"
+                    class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
                    >{$_("last-name")}</label
                  >
                  <input
                    autocomplete="off"
-                    placeholder={$_("last-name")}
+                    placeholder="{$_('last-name')}"
                    class:border-red-500={!isLastnameValid}
                    class:focus:border-red-500={!isLastnameValid}
                    class:focus:ring-red-500={!isLastnameValid}
@@ -245,25 +228,21 @@
                    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-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"
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                    >
+                      {$_('last-name-is-required')}
                      {$_("last-name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="phone"
-                    class="block text-sm font-medium text-gray-700"
+                    class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
                    >{$_("phone")}</label
                  >
                  <input
                    autocomplete="off"
-                    placeholder={$_("phone")}
+                    placeholder={$_('phone')}
                    class:border-red-500={!isPhoneValidOrEmpty}
                    class:focus:border-red-500={!isPhoneValidOrEmpty}
                    class:focus:ring-red-500={!isPhoneValidOrEmpty}
@@ -271,27 +250,21 @@
                    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-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"
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                    >
+                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
                      {@html $_(
                        "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number"
                      )}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="email"
-                    class="block text-sm font-medium text-gray-700"
+                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
                    >{$_("e-mail-adress")}</label
                  >
                  <input
                    autocomplete="off"
-                    placeholder={$_("e-mail-adress")}
+                    placeholder={$_('e-mail-adress')}
                    class:border-red-500={!isEmailValidOrEmpty}
                    class:focus:border-red-500={!isEmailValidOrEmpty}
                    class:focus:ring-red-500={!isEmailValidOrEmpty}
@@ -299,13 +272,11 @@
                    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-gray-500 rounded-md p-2" />
                  />
                  {#if !isEmailValidOrEmpty}
                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                    >
+                      {$_('valid-email-is-required')}
                      {$_("valid-email-is-required")}
                    </span>
                  {/if}
                </div>
@@ -316,22 +287,19 @@
                      id="comments"
                      name="comments"
                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      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"
+                    <label
-                      >{$_("receipt-needed")}</label
+                      for="comments"
-                    >
+                      class="font-medium text-gray-700">{$_('receipt-needed')}</label>
                  </div>
                </div>
                {#if address_checked === true}
                  <div class="col-span-6">
                    <label
                      for="address1"
-                      class="block text-sm font-medium text-gray-700"
+                      class="block text-sm font-medium text-gray-700">{$_('address')}</label>
                      >{$_("address")}</label
                    >
                    <input
                      autocomplete="off"
                      placeholder="Address"
@@ -342,41 +310,34 @@
                      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-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"
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      >
+                        {$_('address-is-required')}
                        {$_("address-is-required")}
                      </span>
                    {/if}
                  </div>
                  <div class="col-span-6">
                    <label
                      for="address2"
-                      class="block text-sm font-medium text-gray-700"
+                      class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
                      >{$_("apartment-suite-etc")}</label
                    >
                    <input
                      autocomplete="off"
-                      placeholder={$_("apartment-suite-etc")}
+                      placeholder={$_('apartment-suite-etc')}
                      bind:value={address_input2_value}
                      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-gray-500 rounded-md p-2" />
                    />
                  </div>
                  <div class="col-span-6">
                    <label
                      for="zipcode"
-                      class="block text-sm font-medium text-gray-700"
+                      class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
                      >{$_("zip-postal-code")}</label
                    >
                    <input
                      autocomplete="off"
-                      placeholder={$_("zip-postal-code")}
+                      placeholder={$_('zip-postal-code')}
                      class:border-red-500={!iszipcodevalid}
                      class:focus:border-red-500={!iszipcodevalid}
                      class:focus:ring-red-500={!iszipcodevalid}
@@ -384,22 +345,18 @@
                      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-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"
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      >
+                        {$_('valid-zipcode-postal-code-is-required')}
                        {$_("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"
+                      class="block text-sm font-medium text-gray-700">City</label>
                      >City</label
                    >
                    <input
                      autocomplete="off"
                      placeholder="City"
@@ -410,13 +367,11 @@
                      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-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"
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      >
+                        {$_('valid-city-is-required')}
                        {$_("valid-city-is-required")}
                      </span>
                    {/if}
                  </div>
@@ -431,18 +386,16 @@
            class:opacity-50={!createbtnenabled}
            on:click={submit}
            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:ml-3 sm:w-auto sm:text-sm"
+            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:ml-3 sm:w-auto sm:text-sm">
-          >
+            {$_('create')}
            {$_("create")}
          </button>
          <button
            on:click={() => {
              modal_open = false;
            }}
            type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-          >
+            {$_('cancel')}
            {$_("cancel")}
          </button>
        </div>
      </div>
--- a/src/components/donors/ConfirmDonorDeletion.svelte
+++ b/src/components/donors/ConfirmDonorDeletion.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-
+  import { focusTrap } from "svelte-focus-trap";
  import { DonorService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
@@ -13,61 +13,60 @@
    dispatch("cancelDelete", { id: delete_donor.id });
  }
  function deleteDonor() {
-    dispatch("delete", { id: delete_donor.id });
+    DonorService.donorControllerRemove(
      delete_donor.id,
      true
    )
      .then((resp) => {
        Toastify({
          text: "Donor deleted",
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
        location.replace("./");
      })
      .catch((err) => {});
  }
 </script>
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:focusTrap
    use:clickOutside
-    on:click_outside={cancelDelete}
+    on:click_outside={cancelDelete}>
  >
    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
+          data-id="modal_backdrop" />
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
+        aria-hidden="true">&#8203;</span>
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
-        aria-labelledby="modal-headline"
+        aria-labelledby="modal-headline">
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-            >
+              <svg class="h-6 w-6 text-blue-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"/></svg>
              <svg
                class="h-6 w-6 text-blue-600"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                ><path fill="none" d="M0 0h24v24H0z" /><path
                  d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"
                /></svg
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("attention")}
+                {$_('attention')}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_(
-                    "do-you-want-to-delete-this-donor-with-all-related-donations"
+                    'do-you-want-to-delete-this-donor-with-all-related-donations'
                  )}
                  <br /> 
-                  {$_("all-associated-donations-will-get-deleted-as-well")}
+                  {$_('all-associated-donations-will-get-deleted-as-well')}
                </p>
              </div>
            </div>
@@ -77,16 +76,14 @@
          <button
            on:click={deleteDonor}
            type="button"
-            class="w-full inline-flex 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:text-sm"
+            class="w-full inline-flex 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:text-sm">
-          >
+            {$_('confirm-delete-donor-with-all-donations')}
            {$_("confirm-delete-donor-with-all-donations")}
          </button>
          <button
            on:click={cancelDelete}
            type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-          >
+            {$_('cancel-keep-donor')}
            {$_("cancel-keep-donor")}
          </button>
        </div>
      </div>
--- a/src/components/donors/DonorAddress.svelte
+++ b/src/components/donors/DonorAddress.svelte
@@ -1,14 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let address;
 </script>
 {#if !address || !address.address1}
  {$_("no-address")}
 {:else}
  {address.address1}<br />
  <!-- {address.address2 || ''}<br /> -->
  {address.postalcode}
  {address.city}
  {address.country}
 {/if}
--- a/src/components/donors/DonorDetail.svelte
+++ b/src/components/donors/DonorDetail.svelte
@@ -193,12 +193,6 @@
      <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 current_donations.filter((d) => d.donor.id == editable.id).length > 0}
@@ -207,7 +201,7 @@
            <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.middlename}
              {d.runner.lastname}</a>
          {:else}
            <a
--- a/src/components/donors/DonorDonations.svelte
+++ b/src/components/donors/DonorDonations.svelte
@@ -1,29 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let donations;
 </script>
 {#if !donations || donations.length == 0}
  {$_('donor-has-no-associated-donations')}
 {:else}
  {#each donations as donation}
    {#if donation.responseType === "DISTANCEDONATION"}
      <a
        href="../donations/{donation.id}"
        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1"
        >{donation.runner.firstname}
        {donation.runner.middlename || ""}
        {donation.runner.lastname}</a
      >
    {: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"
        >{$_("fixed-donation")}:
        {(donation.amount / 100)
          .toFixed(2)
          .toLocaleString("de-DE", { valute: "EUR" })}€</a
      >
    {/if}
  {/each}
 {/if}
--- a/src/components/donors/Donors.svelte
+++ b/src/components/donors/Donors.svelte
@@ -5,73 +5,25 @@
  import DonorsOverview from "./DonorsOverview.svelte";
  $: current_donors = [];
  export let modal_open = false;
  let addDonors;
 </script>
 <section class="container p-5">
  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("donors")}
+    {$_('donors')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
      <button
        on:click={() => {
          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:ml-3 sm:w-auto sm:text-sm"
+        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:ml-3 sm:w-auto sm:text-sm">
-      >
+        {$_('add-donor')}
        {$_("add-donor")}
      </button>
    {/if}
    {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
      <button
        on:click={() => {
          const data = current_donors
            .filter((d) => d.receiptNeeded === true)
            .map(function (d) {
              d.address.address2 =
                d.address.address2 === "" ? "" : " " + d.address.address2;
              const address = `${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
              return [
                d.firstname,
                d.middlename,
                d.lastname,
                d.paidDonationAmount,
                address,
              ];
            });
          let csv = `${$_("csv_import__firstname")};${$_(
            "csv_import__middlename"
          )};${$_("csv_import__lastname")};${$_(
            "total_donation_amount_in_eur"
          )};${$_("address")}\n`;
          data.forEach(function (row) {
            csv += row.join(";");
            csv += "\n";
          });
          let hiddenElement = document.createElement("a");
          hiddenElement.href = "data:text/csv;charset=utf-8," + encodeURI(csv);
          hiddenElement.target = "_blank";
          hiddenElement.download = `${$_(
            "filename_sponsoringquittungsliste"
          )}.csv`;
          hiddenElement.click();
          hiddenElement.remove();
        }}
        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:ml-3 sm:w-auto sm:text-sm"
      >
        {$_("sponsoring-quittungs-liste_herunterladen")}
      </button>
    {/if}
  </span>
-  <DonorsOverview bind:current_donors bind:addDonors />
+  <DonorsOverview bind:current_donors />
 </section>
-{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
+{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
-  <AddDonorModal
+  <AddDonorModal bind:current_donors bind:modal_open />
    on:created={(event) => {
      addDonors(event.detail.donors);
    }}
    bind:modal_open
  />
 {/if}
--- a/src/components/donors/DonorsOverview.svelte
+++ b/src/components/donors/DonorsOverview.svelte
@@ -1,259 +1,208 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
  import { DonationService, DonorService } from "@odit/lfk-client-js";
  import store from "../../store";
  import DonorsEmptyState from "./DonorsEmptyState.svelte";
  import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
  import Toastify from "toastify-js";
  import TableBottom from "../shared/TableBottom.svelte";
  import {
    createSvelteTable,
    flexRender,
    getCoreRowModel,
    getFilteredRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    renderComponent,
  } from "@tanstack/svelte-table";
  import { writable } from "svelte/store";
  import { onMount } from "svelte";
  import InputElement from "../shared/InputElement.svelte";
  import TableHeader from "../shared/TableHeader.svelte";
  import TableActions from "../shared/TableActions.svelte";
  import DonorAddress from "./DonorAddress.svelte";
  import DonorDonations from "./DonorDonations.svelte";
  import { filterAddress, filterName } from "../shared/tablefilters";
  $: searchvalue = "";
  $: active_deletes = [];
-  $: selectedDonors =
+  $: current_donations = [];
-    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
+  let modal_open = false;
-  $: selected =
+  let delete_donor = {};
    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
  $: dataLoaded = false;
  export let current_donors = [];
-  export const addDonors = (donors) => {
+  const donors_promise = DonorService.donorControllerGetAll().then((val) => {
-    current_donors = current_donors.concat(...donors);
+    current_donors = val;
    options.update((options) => ({
      ...options,
      data: current_donors,
    }));
  };
  //Section table
  const columns = [
    {
      accessorKey: "id",
      header: () => "id",
      filterFn: `equalsString`,
    },
    {
      accessorKey: "name",
      header: () => $_("name"),
      cell: (info) => {
        const d = info.row.original;
        if (d.middlename) {
          return `${d.firstname} ${d.middlename} ${d.lastname}`;
        } else {
          return `${d.firstname} ${d.lastname}`;
        }
      },
      filterFn: `name`,
    },
    {
      accessorKey: "address",
      header: () => $_("contact-information"),
      cell: (info) => {
        return renderComponent(DonorAddress, { address: info.getValue() });
      },
      filterFn: `address`,
    },
    {
      accessorKey: "donations",
      header: () => $_("sponsorings"),
      cell: (info) => {
        return renderComponent(DonorDonations, { donations: info.getValue() });
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "donationAmount",
      header: () => $_("total-donation-amount"),
      cell: (info) => {
        return `${(info.getValue() / 100)
          .toFixed(2)
          .toLocaleString("de-DE", { valute: "EUR" })}€`;
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "paidDonationAmount",
      header: () => $_("total-paid-amount"),
      cell: (info) => {
        return `${(info.getValue() / 100)
          .toFixed(2)
          .toLocaleString("de-DE", { valute: "EUR" })}€`;
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "actions",
      header: () => $_("action"),
      cell: (info) => {
        return renderComponent(TableActions, {
          detailsLink: `./${info.row.original.id}`,
          deleteAction: () => {
            active_deletes = current_donors.filter(
              (r) => r.id == info.row.original.id
            );
          },
          deleteEnabled:
            store.state.jwtinfo.userdetails.permissions.includes(
              "DONOR:DELETE"
            ),
        });
      },
      enableColumnFilter: false,
      enableSorting: false,
    },
  ];
  const options = writable({
    data: [],
    columns: columns,
    initialState: {
      pagination: {
        pageSize: 50,
      },
    },
    filterFns: {
      name: filterName,
      address: filterAddress,
    },
    enableRowSelection: true,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });
-  const table = createSvelteTable(options);
+  const donation_promise = DonationService.donationControllerGetAll().then(
-
+    (val) => {
      current_donations = val;
    }
  );
  function should_display_based_on_id(id) {
    if (searchvalue.toString().slice(-1) === "*") {
      return id.toString().startsWith(searchvalue.replace("*", ""));
    }
    return id.toString() === searchvalue;
  }
  onMount(async () => {
    let page = 0;
    while (page >= 0) {
      const donors = await DonorService.donorControllerGetAll(page, 500);
      if (donors.length == 0) {
        page = -2;
      }
      current_donors = current_donors.concat(...donors);
      options.update((options) => ({
        ...options,
        data: current_donors,
      }));
      dataLoaded = true;
      page++;
    }
    console.log("All donors loaded");
  });
 </script>
 <ConfirmDonorDeletion
  on:cancelDelete={(event) => {
-    active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
+    modal_open = false;
    active_deletes[event.detail.id] = false;
  }}
-  on:delete={async (event) => {
+  bind:modal_open
-    await DonorService.donorControllerRemove(event.detail.id, true);
+  bind:delete_donor />
-    Toastify({
+{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
-      text: $_("donor-deleted"),
+  {#await donors_promise && donation_promise}
      duration: 500,
      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    }).showToast();
    current_donors = current_donors.filter((d) => d.id !== event.detail.id);
    active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
    options.update((options) => ({
      ...options,
      data: current_donors,
    }));
  }}
  modal_open={active_deletes.length > 0}
  delete_donor={active_deletes[0]}
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
  {#if !dataLoaded}
    <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"
+      role="alert">
-    >
+      <p class="font-bold">{$_('donors-are-being-loaded')}</p>
-      <p class="font-bold">{$_("donors-are-being-loaded")}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
-  {:else if current_donors.length === 0}
+  {:then}
-    <DonorsEmptyState />
+    {#if current_donors.length === 0}
-  {:else}
+      <DonorsEmptyState />
-    <input
+    {:else}
-      type="search"
+      <input
-      bind:value={searchvalue}
+        type="search"
-      placeholder={$_("datatable.search")}
+        bind:value={searchvalue}
-      aria-label={$_("datatable.search")}
+        placeholder={$_('datatable.search')}
-      class="mb-4"
+        aria-label={$_('datatable.search')}
-    />
+        class="gridjs-input gridjs-search-input mb-4" />
-    <div
+      <div
-      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-    >
+        <table class="divide-y divide-gray-200 w-full">
-      <table class="w-full">
+          <thead class="bg-gray-50">
        <thead>
          {#each $table.getHeaderGroups() as headerGroup}
            <tr class="select-none">
              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
                <InputElement
                  type="checkbox"
                  checked={$table.getIsAllRowsSelected()}
                  indeterminate={$table.getIsSomeRowsSelected()}
                  on:change={() => $table.toggleAllRowsSelected()}
                />
              </th>
              {#each headerGroup.headers as header}
                <TableHeader {header} />
              {/each}
            </tr>
          {/each}
        </thead>
        <tbody>
          {#each $table.getRowModel().rows as row}
            <tr>
-              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+              <th
-                <InputElement
+                scope="col"
-                  type="checkbox"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  checked={row.getIsSelected()}
+                {$_('name')}
-                  on:change={() => row.toggleSelected()}
+              </th>
-                />
+              <th
-              </td>
+                scope="col"
-              {#each row.getVisibleCells() as cell}
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                <td>
+                {$_('contact-information')}
-                  <svelte:component
+              </th>
-                    this={flexRender(
+              <th
-                      cell.column.columnDef.cell,
+                scope="col"
-                      cell.getContext()
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    )}
+                {$_('donations')}
-                  />
+              </th>
-                </td>
+              <th
-              {/each}
+                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {$_('total-donation-amount')}
              </th>
              <th scope="col" class="relative px-6 py-3">
                <span class="sr-only">{$_('action')}</span>
              </th>
            </tr>
-          {/each}
+          </thead>
-        </tbody>
+          <tbody class="divide-y divide-gray-200">
-      </table>
+            {#each current_donors as donor}
              {#if donor.firstname
                .toLowerCase()
                .includes(
                  searchvalue.toLowerCase()
                ) ||  donor.lastname
                  .toLowerCase()
                  .includes(
                    searchvalue.toLowerCase()
                  ) || should_display_based_on_id(donor.id)}
                <tr data-rowid="donor_{donor.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">
                          {donor.firstname}
                          {donor.middlename || ''}
                          {donor.lastname}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    {#if donor.email}
                      <div class="text-sm text-gray-500">{donor.email}</div>
                    {/if}
                    {#if donor.phone}
                      <div class="text-sm text-gray-500">{donor.phone}</div>
                    {/if}
                    {#if donor.address.address1 !== null}
                      {donor.address.address1}<br />
                      {donor.address.address2 || ''}<br />
                      {donor.address.postalcode}
                      {donor.address.city}
                      {donor.address.country}
                    {/if}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    {#if current_donations.filter((d) => d.donor.id == donor.id).length > 0}
                      {#each current_donations.filter((o) => o.donor.id == donor.id) 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}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    {(donor.donationAmount / 100)
                      .toFixed(2)
                      .toLocaleString('de-DE', { valute: 'EUR' })}€
                  </td>
                  {#if active_deletes[donor.id] === true}
                    <td
                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button
                        on:click={() => {
                          active_deletes[donor.id] = false;
                        }}
                        tabindex="0"
                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                      <button
                        on:click={() => {
                          DonorService.donorControllerRemove(donor.id, false)
                            .then((resp) => {
                              current_donors = current_donors.filter((obj) => obj.id !== donor.id);
                              Toastify({
                                text: 'Donor deleted',
                                duration: 500,
                                backgroundColor:
                                  'linear-gradient(to right, #00b09b, #96c93d)',
                              }).showToast();
                            })
                            .catch((err) => {
                              modal_open = true;
                              delete_donor = donor;
                            });
                        }}
                        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="./{donor.id}"
                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
                      {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:DELETE')}
                        <button
                          on:click={() => {
                            active_deletes[donor.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>
-    <div class="h-2" />
+  {/await}
    <TableBottom {table} {selected} />
  {/if}
 {/if}
--- a/src/components/general/About.svelte
+++ b/src/components/general/About.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  export let modal_open;
  (function () {
    document.onkeydown = function (e) {
@@ -25,7 +25,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
--- a/src/components/general/Footer.svelte
+++ b/src/components/general/Footer.svelte
@@ -32,12 +32,8 @@
      target="_blank"
      rel="noopener, noreferrer"
      href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
-    -
+      -
-    <a
+    <a class="underline" href="https://docs.lauf-fuer-kaya.de" target="_blank">{$_('documentation')}</a>
      rel="noopener, noreferrer"
      class="underline"
      href="https://docs.lauf-fuer-kaya.de"
      target="_blank">{$_('documentation')}</a>
    -
    <a class="underline" href="/privacy">{$_('privacy')}</a>
    -
--- a/src/components/general/Privacy.svelte
+++ b/src/components/general/Privacy.svelte
@@ -2,7 +2,7 @@
  import { _, getLocaleFromNavigator } from "svelte-i18n";
  import marked from "marked";
  import Footer from "./Footer.svelte";
-  // import * as css from "../base/simple.css?inline";
+  import * as css from "../base/simple.css";
  let html = "";
  async function load() {
    let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
--- a/src/components/groups/AddGroupModal.svelte
+++ b/src/components/groups/AddGroupModal.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import Toastify from "toastify-js";
  import { UserGroupService } from "@odit/lfk-client-js";
  export let modal_open;
@@ -69,7 +69,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
--- a/src/components/groups/UserGroupsOverview.svelte
+++ b/src/components/groups/UserGroupsOverview.svelte
@@ -30,7 +30,7 @@
        bind:value={searchvalue}
        placeholder={$_('datatable.search')}
        aria-label={$_('datatable.search')}
-        class="mb-4" />
+        class="gridjs-input gridjs-search-input mb-4" />
      <div
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
        <table class="divide-y divide-gray-200 w-full">
--- a/src/components/orgs/AddOrgModal.svelte
+++ b/src/components/orgs/AddOrgModal.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import { RunnerOrganizationService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  export let modal_open;
@@ -89,7 +89,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
--- a/src/components/orgs/ConfirmOrgDeletion.svelte
+++ b/src/components/orgs/ConfirmOrgDeletion.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import { RunnerOrganizationService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
@@ -19,7 +19,7 @@
    )
      .then((resp) => {
        Toastify({
-          text: $_('organization-deleted'),
+          text: "Organization deleted",
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
@@ -32,7 +32,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={cancelDelete}>
    <div
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -119,9 +119,9 @@
    }
  }
  async function copy() {
-    if (!editable.registrationKey) {
+    if(!editable.registrationKey){
      Toastify({
-        text: $_("you-have-to-save-your-changes-to-generate-a-link"),
+        text: $_('you-have-to-save-your-changes-to-generate-a-link'),
        duration: 500,
        backgroundColor:
          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
@@ -167,8 +167,7 @@
  passed_orgs={[]}
  passed_org={editable}
  opened_from="OrgDetail"
-  bind:import_modal_open
+  bind:import_modal_open />
 />
 <ConfirmOrgDeletion bind:modal_open bind:delete_org />
 {#if data_loaded}
  <section class="container p-5">
@@ -177,35 +176,29 @@
      <span data-id="org_actions_${editable.id}">
        <GenerateSponsoringContracts
          bind:sponsoring_contracts_show
-          bind:generate_orgs
+          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")}
+        {#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:ml-3 sm:w-auto sm:text-sm"
+            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:ml-3 sm:w-auto sm:text-sm">
-          >
+            {$_('import-runners')}
            {$_("import-runners")}
          </button>
        {/if}
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
+        {#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:ml-3 sm:w-auto sm:text-sm"
+              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:text-sm">{$_('confirm-delete')}</button>
              >{$_("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"
+              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>
              >{$_("cancel")}</button
            >
          {/if}
          {#if !delete_triggered}
            <button
@@ -213,9 +206,7 @@
                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:text-sm"
+              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:text-sm">{$_('delete-organization')}</button>
              >{$_("delete-organization")}</button
            >
          {/if}
        {/if}
        {#if !delete_triggered}
@@ -224,9 +215,7 @@
            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:ml-3 sm:w-auto sm:text-sm"
+            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:text-sm">{$_('save-changes')}</button>
            >{$_("save-changes")}</button
          >
        {/if}
      </span>
    </div>
@@ -245,13 +234,12 @@
                class="h-3 w-3 stroke-current"
                height="1em"
                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
+                xmlns="http://www.w3.org/2000/svg"><path
-                ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                  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
+                <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
+              <a class="mr-2" href="/">{$_('home')}</a><svg
                stroke="currentColor"
                fill="none"
                stroke-width="2"
@@ -261,25 +249,24 @@
                class="h-3 w-3 mr-2 stroke-current"
                height="1em"
                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
+                xmlns="http://www.w3.org/2000/svg"><line
-                ><line x1="5" y1="12" x2="19" y2="12" />
+                  x1="5"
-                <polyline points="12 5 19 12 12 19" /></svg
+                  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"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
                ><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"
+                  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>
                /></svg
              >
            </li>
            <li class="flex items-center">
-              <a class="mr-2" href="./">{$_("organizations")}</a><svg
+              <a class="mr-2" href="./">{$_('organizations')}</a><svg
                stroke="currentColor"
                fill="none"
                stroke-width="2"
@@ -289,10 +276,12 @@
                class="h-3 w-3 mr-2 stroke-current"
                height="1em"
                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
+                xmlns="http://www.w3.org/2000/svg"><line
-                ><line x1="5" y1="12" x2="19" y2="12" />
+                  x1="5"
-                <polyline points="12 5 19 12 12 19" /></svg
+                  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>
@@ -302,88 +291,81 @@
      </div>
    </div>
    <div class="text-sm w-full">
-      <label for="name" class="font-medium text-gray-700">{$_("name")}</label>
+      <label for="name" class="font-medium text-gray-700">{$_('name')}</label>
      <input
        autocomplete="off"
-        placeholder={$_("name")}
+        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"
+        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"
+      <label
-        >{$_("contact")}</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) =>
+        itemFilter={(label, filterText, option) => label
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
+            .toLowerCase()
-          option.value.id.toString().startsWith(filterText.toLowerCase())}
+            .includes(
              filterText.toLowerCase()
            ) || option.value.id
            .toString()
            .startsWith(filterText.toLowerCase())}
        items={contacts}
        showChevron={true}
-        placeholder={$_("no-contact-selected")}
+        placeholder={$_('no-contact-selected')}
-        noOptionsMessage={$_("no-contact-found")}
+        noOptionsMessage={$_('no-contact-found')}
        bind:selectedValue={contact}
-        on:select={(selectedValue) =>
+        on:select={(selectedValue) => (editable.contact = selectedValue.detail.value)}
-          (editable.contact = selectedValue.detail.value)}
+        on:clear={() => (editable.contact = null)} />
        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"
+            id="comments"
-            name="toggle_selfservice_feature"
+            name="comments"
            type="checkbox"
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+            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"
+            for="comments"
-            class="font-medium text-gray-700"
+            class="font-medium text-gray-700">{$_('selfservice-registration')}</label>
            >{$_("selfservice-registration")}</label
          >
        </div>
      </div>
      <div>
        {#if editable.registrationEnabled}
          <div class="text-sm w-full">
-            <button on:click={copy} class="inline-flex w-full">
+            <div 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"
+                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}
+                {registrationLink}
                {:else}
-                  {$_("you-have-to-save-your-changes-to-generate-a-link")}
+                {$_('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"
+                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"
+                  height="24"><path fill="none" d="M0 0h24v24H0z" />
                  ><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"
+                    d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" /></svg>
                  /></svg
                >
              </div>
-            </button>
+            </div>
            {#if editable.registrationKey}
-              <p class="text-gray-500 text-xs">
+            <p class="text-gray-500 text-xs">
-                {$_("click-to-copy-the-link-into-your-clipboard")}
+              {$_('click-to-copy-the-link-into-your-clipboard')}
-              </p>
+            </p>
            {/if}
          </div>
        {/if}
@@ -393,17 +375,15 @@
            <div class="flex items-center h-5">
              <input
                bind:checked={editable.address_checked}
-                id="toggle_address_checkbox"
+                id="comments"
-                name="toggle_address_checkbox"
+                name="comments"
                type="checkbox"
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                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"
+                for="comments"
-                class="font-medium text-gray-700">{$_("address")}</label
+                class="font-medium text-gray-700">{$_('address')}</label>
              >
            </div>
          </div>
        </div>
@@ -411,9 +391,7 @@
          <div class="col-span-6">
            <label
              for="address1"
-              class="block text-sm font-medium text-gray-700"
+              class="block text-sm font-medium text-gray-700">{$_('address')}</label>
              >{$_("address")}</label
            >
            <input
              autocomplete="off"
              placeholder="Address"
@@ -423,74 +401,65 @@
              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"
+              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"
+                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-              >
+                {$_('address-is-required')}
                {$_("address-is-required")}
              </span>
            {/if}
          </div>
          <div class="col-span-6">
            <label
              for="address2"
-              class="block text-sm font-medium text-gray-700"
+              class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
              >{$_("apartment-suite-etc")}</label
            >
            <input
              autocomplete="off"
-              placeholder={$_("apartment-suite-etc")}
+              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"
+              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"
+            <label
-              >{$_("zip-postal-code")}</label
+              for="zipcode"
-            >
+              class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
            <input
              autocomplete="off"
-              placeholder={$_("zip-postal-code")}
+              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"
+              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"
+                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-              >
+                {$_('valid-zipcode-postal-code-is-required')}
                {$_("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"
+            <label
-              >{$_("city")}</label
+              for="city"
-            >
+              class="block text-sm font-medium text-gray-700">{$_('city')}</label>
            <input
              autocomplete="off"
-              placeholder={$_("city")}
+              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"
+              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"
+                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-              >
+                {$_('valid-city-is-required')}
                {$_("valid-city-is-required")}
              </span>
            {/if}
          </div>
@@ -500,7 +469,7 @@
  </section>
 {:else}
  {#await promise}
-    {$_("organization-detail-is-being-loaded")}
+    {$_('organization-detail-is-being-loaded')}
  {:catch error}
    <PromiseError />
  {/await}
--- a/src/components/orgs/OrgOverview.svelte
+++ b/src/components/orgs/OrgOverview.svelte
@@ -14,7 +14,7 @@
  $: 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);
+  $: generate_orgs = current_organizations.some((r) => r.is_selected === true);
  $: certificates_show = current_organizations.some(
    (r) => r.is_selected === true
  );
@@ -51,7 +51,7 @@
        bind:value={searchvalue}
        placeholder={$_('datatable.search')}
        aria-label={$_('datatable.search')}
-        class="mb-4" />
+        class="gridjs-input gridjs-search-input mb-4" />
      <div class="h-12">
        <GenerateSponsoringContracts
            bind:sponsoring_contracts_show
@@ -132,7 +132,7 @@
                        <div class="text-sm font-medium text-gray-900">
                          {#if o.address.address1 !== null}
                            {o.address.address1}<br />
-                            <!-- {o.address.address2 || ''}<br /> -->
+                            {o.address.address2 || ''}<br />
                            {o.address.postalcode}
                            {o.address.city}
                            {o.address.country}
--- a/src/components/pdf_generation/GenerateRunnerCards.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCards.svelte
@@ -1,418 +1,344 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+    import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import {
+    import {
-    RunnerCardService,
+        RunnerCardService,
-    RunnerOrganizationService,
+        RunnerOrganizationService,
-    RunnerTeamService,
+        RunnerTeamService,
-  } from "@odit/lfk-client-js";
+    } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+    import Toastify from "toastify-js";
-  import { init } from "@paralleldrive/cuid2";
+    export let cards_show = false;
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+    export let generate_cards = [];
-
+    export let generate_runners = [];
-  export let cards_show = false;
+    export let generate_orgs = [];
-  export let generate_cards = [];
+    export let generate_teams = [];
-  export let generate_runners = [];
+    $: cards_dropdown_open = false;
-  export let generate_orgs = [];
+    document.addEventListener("click", function (e) {
-  export let generate_teams = [];
+        if (
-  $: cards_dropdown_open = false;
+            e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
-  document.addEventListener("click", function (e) {
+            e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
-    if (
+        ) {
-      e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
+            cards_dropdown_open = false;
      e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
    ) {
      cards_dropdown_open = false;
    }
  });
  function generateRunnerCards(locale) {
    cards_dropdown_open = false;
    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) {
    const toast = Toastify({
      text: $_("generating-pdf"),
      duration: -1,
    }).showToast();
    fetch(
      `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(generate_cards),
      }
    )
      .then((response) => {
        if (response.status != "200") {
          toast.hideToast();
          Toastify({
            text: $_("pdf-generation-failed"),
            duration: 3500,
            backgroundColor:
              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
          }).showToast();
        } else {
          return response.blob();
        }
-      })
+    });
-      .then((blob) => {
+
-        const url = window.URL.createObjectURL(blob);
+    function generateRunnerCards(locale) {
-        let a = document.createElement("a");
+        cards_dropdown_open = false;
-        a.href = url;
+
-        a.download = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
+        if (generate_orgs.length > 0) {
-        document.body.appendChild(a);
+            generateOrgCards(locale);
-        a.click();
+        } else if (generate_teams.length > 0) {
-        a.remove();
+            generateTeamCards(locale);
-        toast.hideToast();
+        } else if (generate_runners.length > 0) {
-        Toastify({
+            generateRunnersCards(locale);
-          text: $_("pdf-successfully-generated"),
+        } else {
-          duration: 3500,
+            generateCards(locale);
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }
    }
    function generateCards(locale) {
        const toast = Toastify({
            text: $_("generating-pdf"),
            duration: -1,
        }).showToast();
-      })
+        fetch(
-      .catch((err) => {
+            `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        console.error(err);
+            {
-      });
+                method: "POST",
-  }
+                headers: {
-
+                    "Content-Type": "application/json",
-  async function generateRunnersCards(locale) {
+                },
-    const toast = Toastify({
+                body: JSON.stringify(generate_cards),
-      text: $_("generating-pdf"),
+            }
      duration: -1,
    }).showToast();
    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);
    }
    fetch(
      `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(cards),
      }
    )
      .then((response) => {
        if (response.status != "200") {
          toast.hideToast();
          Toastify({
            text: $_("pdf-generation-failed"),
            duration: 3500,
            backgroundColor:
              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
          }).showToast();
        } else {
          return response.blob();
        }
      })
      .then((blob) => {
        const url = window.URL.createObjectURL(blob);
        let a = document.createElement("a");
        a.href = url;
        if (generate_runners.length == 1) {
          a.download = `${$_("runnercards")}_${generate_runners[0].firstname}_${
            generate_runners[0].lastname
          }-${locale}-${createId()}.pdf`;
        } else {
          a.download = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
        }
        document.body.appendChild(a);
        a.click();
        a.remove();
        toast.hideToast();
        Toastify({
          text: $_("pdf-successfully-generated"),
          duration: 3500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
      })
      .catch((err) => {});
  }
  async function generateTeamCards(locale) {
    const toast = Toastify({
      text: $_("generating-pdfs"),
      duration: -1,
    }).showToast();
    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);
      }
      fetch(
        `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(cards),
        }
      )
        .then((response) => {
          if (response.status != "200") {
            toast.hideToast();
            Toastify({
              text: $_("pdf-generation-failed"),
              duration: 3500,
              backgroundColor:
                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
            }).showToast();
          } else {
            return response.blob();
          }
        })
        .then((blob) => {
          count++;
          const url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = url;
          a.download = `${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === generate_teams.length) {
            toast.hideToast();
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
    }
  }
  async function generateOrgCards(locale) {
    const toast = Toastify({
      text: $_("generating-pdfs"),
      duration: -1,
    }).showToast();
    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 fetch(
        `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(cards),
        }
      )
        .then((response) => {
          if (response.status != "200") {
            toast.hideToast();
            Toastify({
              text: $_("pdf-generation-failed"),
              duration: 3500,
              backgroundColor:
                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
            }).showToast();
          } else {
            return response.blob();
          }
        })
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = url;
          a.download = `${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === o.teams.length && count_orgs === generate_orgs.length) {
            toast.hideToast();
            console.log("here");
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .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 fetch(
          `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(cards),
          }
        )
-          .then((response) => {
+            .then((response) => {
-            if (response.status != "200") {
+                if (response.status != "200") {
-              toast.hideToast();
+                    toast.hideToast();
-              Toastify({
+                    Toastify({
-                text: $_("pdf-generation-failed"),
+                        text: $_("pdf-generation-failed"),
-                duration: 3500,
+                        duration: 3500,
-                backgroundColor:
+                        backgroundColor:
-                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                            "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-              }).showToast();
+                    }).showToast();
-            } else {
+                } else {
-              return response.blob();
+                    return response.blob();
-            }
+                }
-          })
+            })
-          .then((blob) => {
+            .then((blob) => {
-            const url = window.URL.createObjectURL(blob);
+                const url = window.URL.createObjectURL(blob);
-            let a = document.createElement("a");
+                let a = document.createElement("a");
-            a.href = url;
+                a.href = url;
-            a.download = `${$_("runnercards")}_${o.name}_${
+                a.download = `${$_('runnercards')}-${locale}.pdf`;
-              t.name
+                document.body.appendChild(a);
-            }-${locale}-${createId()}.pdf`;
+                a.click();
-            document.body.appendChild(a);
+                a.remove();
-            a.click();
+                toast.hideToast();
-            a.remove();
+                Toastify({
-            if (
+                    text: $_("pdf-successfully-generated"),
-              count === o.teams.length &&
+                    duration: 3500,
-              count_orgs === generate_orgs.length
+                    backgroundColor:
-            ) {
+                        "linear-gradient(to right, #00b09b, #96c93d)",
-              toast.hideToast();
+                }).showToast();
-              Toastify({
+            })
-                text: $_("pdfs-successfully-generated"),
+            .catch((err) => {
-                duration: 3500,
+                console.error(err);
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            });
-              }).showToast();
+    }
-            }
+
-          })
+    async function generateRunnersCards(locale) {
-          .catch((err) => {});
+        const toast = Toastify({
-      }
+            text: $_("generating-pdf"),
            duration: -1,
        }).showToast();
        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);
        }
        fetch(
            `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
            {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(cards),
            }
        )
            .then((response) => {
                if (response.status != "200") {
                    toast.hideToast();
                    Toastify({
                        text: $_("pdf-generation-failed"),
                        duration: 3500,
                        backgroundColor:
                            "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
                    }).showToast();
                } else {
                    return response.blob();
                }
            })
            .then((blob) => {
                const url = window.URL.createObjectURL(blob);
                let a = document.createElement("a");
                a.href = url;
                if(generate_runners.length == 1){
                    a.download = `${$_('runnercards')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
                }
                else{
                    a.download = `Runnercards-${locale}.pdf`;
                }
                document.body.appendChild(a);
                a.click();
                a.remove();
                toast.hideToast();
                Toastify({
                    text: $_("pdf-successfully-generated"),
                    duration: 3500,
                    backgroundColor:
                        "linear-gradient(to right, #00b09b, #96c93d)",
                }).showToast();
            })
            .catch((err) => {});
    }
    async function generateTeamCards(locale) {
        const toast = Toastify({
            text: $_("generating-pdfs"),
            duration: -1,
        }).showToast();
        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);
            }
            fetch(
                `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(cards),
                }
            )
                .then((response) => {
                    if (response.status != "200") {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdf-generation-failed"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
                        }).showToast();
                    } else {
                        return response.blob();
                    }
                })
                .then((blob) => {
                    count++;
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = url;
                    a.download = `${$_('runnercards')}_${t.name}-${locale}.pdf`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    if (count === generate_teams.length) {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdfs-successfully-generated"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(to right, #00b09b, #96c93d)",
                        }).showToast();
                    }
                })
                .catch((err) => {});
        }
    }
    async function generateOrgCards(locale) {
        const toast = Toastify({
            text: $_("generating-pdf"),
            duration: -1,
        }).showToast();
        let count = 0;
        const current_cards = await RunnerCardService.runnerCardControllerGetAll();
        for (const o of generate_orgs) {
            const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
                o.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);
            }
            fetch(
                `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(cards),
                }
            )
                .then((response) => {
                    if (response.status != "200") {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdf-generation-failed"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
                        }).showToast();
                    } else {
                        return response.blob();
                    }
                })
                .then((blob) => {
                    count++;
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = url;
                    a.download = `${$_('runnercards')}_${o.name}-${locale}.pdf`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    if (count === generate_orgs.length) {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdfs-successfully-generated"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(to right, #00b09b, #96c93d)",
                        }).showToast();
                    }
                })
                .catch((err) => {});
        }
    }
  }
 </script>
 {#if cards_show}
-  <div id="cards:dropdown" class="relative inline-block">
+    <div id="cards:dropdown" class="relative inline-block">
-    <div>
+        <div>
-      <button
+            <button
-        on:click={() => {
+                on:click={() => {
-          cards_dropdown_open = !cards_dropdown_open;
+                    cards_dropdown_open = !cards_dropdown_open;
-        }}
+                }}
-        type="button"
+                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"
+                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"
+                id="options-menu"
-        aria-haspopup="true"
+                aria-haspopup="true"
-        aria-expanded="true"
+                aria-expanded="true">
-      >
+                {$_('generate-runnercards')}
-        {$_("generate-runnercards")}
+                <svg
-        <svg
+                    xmlns="http://www.w3.org/2000/svg"
-          xmlns="http://www.w3.org/2000/svg"
+                    width="24"
-          width="24"
+                    height="24"
-          height="24"
+                    viewBox="0 0 24 24"
-          viewBox="0 0 24 24"
+                    class="-mr-1 ml-2 h-5 w-5"><path
-          class="-mr-1 ml-2 h-5 w-5"
+                        fill="none"
-          ><path fill="none" d="M0 0h24v24H0z" />
+                        d="M0 0h24v24H0z" />
-          <path
+                    <path
-            fill="currentColor"
+                        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"
+                        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>
-          /></svg
+            </button>
        >
      </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 cards_dropdown_open}
-    {/if}
+            <div
-  </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"
                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>
 {/if}
--- a/src/components/pdf_generation/GenerateRunnerCertificates.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCertificates.svelte
@@ -1,355 +1,277 @@
 <script>
-  import { _ } from "svelte-i18n";
+    import { _ } from "svelte-i18n";
-  import {
+    import {
-    DonationService,
+        DonationService,
-    RunnerTeamService,
+        RunnerTeamService,
-    RunnerOrganizationService,
+        RunnerOrganizationService
-  } from "@odit/lfk-client-js";
+    } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+    import Toastify from "toastify-js";
-  import { init } from "@paralleldrive/cuid2";
+    export let certificates_show = false;
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+    export let generate_runners = [];
-
+    export let generate_orgs = [];
-  export let certificates_show = false;
+    export let generate_teams = [];
-  export let generate_runners = [];
+    $: certificates_dropdown_open = false;
-  export let generate_orgs = [];
+    document.addEventListener("click", function (e) {
-  export let generate_teams = [];
+        if (
-  $: certificates_dropdown_open = false;
+            e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
-  document.addEventListener("click", function (e) {
+            e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
-    if (
+        ) {
-      e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
+            certificates_dropdown_open = false;
      e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
    ) {
      certificates_dropdown_open = false;
    }
  });
  function generateCertificates(locale) {
    certificates_dropdown_open = false;
    if (generate_orgs.length > 0) {
      generateOrgCertificates(locale);
    } else if (generate_teams.length > 0) {
      generateTeamCertificates(locale);
    } else {
      generateRunnerCertificates(locale);
    }
  }
  async function generateRunnerCertificates(locale) {
    const toast = Toastify({
      text: $_("generating-pdf"),
      duration: -1,
    }).showToast();
    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) || [];
      console.log(runner.distanceDonations);
      certificateRunners.push(runner);
    }
    fetch(
      `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(certificateRunners),
      }
    )
      .then((response) => {
        if (response.status != "200") {
          toast.hideToast();
          Toastify({
            text: $_("pdf-generation-failed"),
            duration: 3500,
            backgroundColor:
              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
          }).showToast();
        } else {
          return response.blob();
        }
-      })
+    });
-      .then((blob) => {
+
-        const url = window.URL.createObjectURL(blob);
+    function generateCertificates(locale) {
-        let a = document.createElement("a");
+        certificates_dropdown_open = false;
-        a.href = url;
+
-        if (generate_runners.length == 1) {
+        if (generate_orgs.length > 0) {
-          a.download = `${$_("certificates")}_${
+            generateOrgCertificates(locale);
-            generate_runners[0].firstname
+        } else if (generate_teams.length > 0) {
-          }_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
+            generateTeamCertificates(locale);
        } else {
-          a.download = `${$_("certificates")}-${locale}.pdf`;
+            generateRunnerCertificates(locale);
        }
-        document.body.appendChild(a);
+    }
-        a.click();
+
-        a.remove();
+    async function generateRunnerCertificates(locale) {
-        toast.hideToast();
+        const toast = Toastify({
-        Toastify({
+            text: $_("generating-pdf"),
-          text: $_("pdf-successfully-generated"),
+            duration: -1,
          duration: 3500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
-      })
+        const current_donations = await DonationService.donationControllerGetAll();
      .catch((err) => {});
  }
  async function generateTeamCertificates(locale) {
    const toast = Toastify({
      text: $_("generating-pdfs"),
      duration: -1,
    }).showToast();
    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);
      }
      fetch(
        `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(certificateRunners),
        }
      )
        .then((response) => {
          if (response.status != "200") {
            toast.hideToast();
            Toastify({
              text: $_("pdf-generation-failed"),
              duration: 3500,
              backgroundColor:
                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
            }).showToast();
          } else {
            return response.blob();
          }
        })
        .then((blob) => {
          count++;
          const url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = url;
          a.download = `${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === generate_teams.length) {
            toast.hideToast();
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
    }
  }
  async function generateOrgCertificates(locale) {
    const toast = Toastify({
      text: $_("generating-pdfs"),
      duration: -1,
    }).showToast();
    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 fetch(
        `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(certificateRunners),
        }
      )
        .then((response) => {
          if (response.status != "200") {
            toast.hideToast();
            Toastify({
              text: $_("pdf-generation-failed"),
              duration: 3500,
              backgroundColor:
                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
            }).showToast();
          } else {
            return response.blob();
          }
        })
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = url;
          a.download = `${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === o.teams.length && count_orgs === generate_orgs.length) {
            toast.hideToast();
            console.log("here");
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
      for (const t of o.teams) {
        count++;
        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
          t.id
        );
        let certificateRunners = [];
-        for (let runner of runners) {
+        for (let runner of generate_runners) {
-          runner.distanceDonations =
+            runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
-            current_donations.filter((d) => d.runner?.id == runner.id) || [];
+            certificateRunners.push(runner);
          certificateRunners.push(runner);
        }
-        await fetch(
+        fetch(
-          `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
+            `${config.baseurl}/documents/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
-          {
+            {
-            method: "POST",
+                method: "POST",
-            headers: {
+                headers: {
-              "Content-Type": "application/json",
+                    "Content-Type": "application/json",
-            },
+                },
-            body: JSON.stringify(certificateRunners),
+                body: JSON.stringify(certificateRunners),
-          }
+            }
        )
-          .then((response) => {
+            .then((response) => {
-            if (response.status != "200") {
+                if (response.status != "200") {
-              toast.hideToast();
+                    toast.hideToast();
-              Toastify({
+                    Toastify({
-                text: $_("pdf-generation-failed"),
+                        text: $_("pdf-generation-failed"),
-                duration: 3500,
+                        duration: 3500,
-                backgroundColor:
+                        backgroundColor:
-                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+                            "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-              }).showToast();
+                    }).showToast();
-            } else {
+                } else {
-              return response.blob();
+                    return response.blob();
-            }
+                }
-          })
+            })
-          .then((blob) => {
+            .then((blob) => {
-            const url = window.URL.createObjectURL(blob);
+                const url = window.URL.createObjectURL(blob);
-            let a = document.createElement("a");
+                let a = document.createElement("a");
-            a.href = url;
+                a.href = url;
-            a.download = `${$_("certificates")}_${o.name}_${
+                if(generate_runners.length == 1){
-              t.name
+                    a.download = `${$_('certificates')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
-            }-${locale}-${createId()}.pdf`;
+                }
-            document.body.appendChild(a);
+                else{
-            a.click();
+                    a.download = `${$_('certificates')}-${locale}.pdf`;
-            a.remove();
+                }
-            if (
+                document.body.appendChild(a);
-              count === o.teams.length &&
+                a.click();
-              count_orgs === generate_orgs.length
+                a.remove();
-            ) {
+                toast.hideToast();
-              toast.hideToast();
+                Toastify({
-              Toastify({
+                    text: $_("pdf-successfully-generated"),
-                text: $_("pdfs-successfully-generated"),
+                    duration: 3500,
-                duration: 3500,
+                    backgroundColor:
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+                        "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
+                }).showToast();
-            }
+            })
-          })
+            .catch((err) => {});
-          .catch((err) => {});
+    }
-      }
+
    async function generateTeamCertificates(locale) {
        const toast = Toastify({
            text: $_("generating-pdfs"),
            duration: -1,
        }).showToast();
        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.find((d) => d.runner?.id == runner.id) || [];
                certificateRunners.push(runner);
            }
            fetch(
                `${config.baseurl}/documents/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(certificateRunners),
                }
            )
                .then((response) => {
                    if (response.status != "200") {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdf-generation-failed"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
                        }).showToast();
                    } else {
                        return response.blob();
                    }
                })
                .then((blob) => {
                    count++;
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = url;
                    a.download = `${$_('certificates')}_${t.name}-${locale}.pdf`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    if (count === generate_teams.length) {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdfs-successfully-generated"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(to right, #00b09b, #96c93d)",
                        }).showToast();
                    }
                })
                .catch((err) => {});
        }
    }
    async function generateOrgCertificates(locale) {
        const toast = Toastify({
            text: $_("generating-pdf"),
            duration: -1,
        }).showToast();
        let count = 0;
        const current_donations = await DonationService.donationControllerGetAll();
        for (const o of generate_orgs) {
            const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
                o.id
            );
            let certificateRunners = [];
            for (let runner of runners) {
                runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
                certificateRunners.push(runner);
            }
            fetch(
                `${config.baseurl}/documents/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(certificateRunners),
                }
            )
                .then((response) => {
                    if (response.status != "200") {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdf-generation-failed"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
                        }).showToast();
                    } else {
                        return response.blob();
                    }
                })
                .then((blob) => {
                    count++;
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = url;
                    a.download = `${$_('certificates')}_${o.name}-${locale}.pdf`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    if (count === generate_orgs.length) {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdfs-successfully-generated"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(to right, #00b09b, #96c93d)",
                        }).showToast();
                    }
                })
                .catch((err) => {});
        }
    }
  }
 </script>
 {#if certificates_show}
-  <div id="certificates:dropdown" class="relative inline-block">
+    <div id="certificates:dropdown" class="relative inline-block">
-    <div>
+        <div>
-      <button
+            <button
-        on:click={() => {
+                on:click={() => {
-          certificates_dropdown_open = !certificates_dropdown_open;
+                    certificates_dropdown_open = !certificates_dropdown_open;
-        }}
+                }}
-        type="button"
+                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"
+                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"
+                id="options-menu"
-        aria-haspopup="true"
+                aria-haspopup="true"
-        aria-expanded="true"
+                aria-expanded="true">
-      >
+                {$_('generate-runner-certificates')}
-        {$_("generate-runner-certificates")}
+                <svg
-        <svg
+                    xmlns="http://www.w3.org/2000/svg"
-          xmlns="http://www.w3.org/2000/svg"
+                    width="24"
-          width="24"
+                    height="24"
-          height="24"
+                    viewBox="0 0 24 24"
-          viewBox="0 0 24 24"
+                    class="-mr-1 ml-2 h-5 w-5"><path
-          class="-mr-1 ml-2 h-5 w-5"
+                        fill="none"
-          ><path fill="none" d="M0 0h24v24H0z" />
+                        d="M0 0h24v24H0z" />
-          <path
+                    <path
-            fill="currentColor"
+                        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"
+                        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>
-          /></svg
+            </button>
        >
      </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 certificates_dropdown_open}
-    {/if}
+            <div
-  </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"
                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>
 {/if}
--- a/src/components/pdf_generation/GenerateSponsoringContracts.svelte
+++ b/src/components/pdf_generation/GenerateSponsoringContracts.svelte
@@ -1,324 +1,257 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+    import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import {
+    import {
-    RunnerOrganizationService,
+        RunnerOrganizationService,
-    RunnerTeamService,
+        RunnerTeamService,
-  } from "@odit/lfk-client-js";
+    } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+    import Toastify from "toastify-js";
-  import { init } from "@paralleldrive/cuid2";
+    export let sponsoring_contracts_show = false;
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+    export let generate_runners = [];
-
+    export let generate_orgs = [];
-  export let sponsoring_contracts_show = false;
+    export let generate_teams = [];
-  export let generate_runners = [];
+    $: sponsoring_contracts_download_open = false;
-  export let generate_orgs = [];
+    document.addEventListener("click", function (e) {
-  export let generate_teams = [];
+        if (
-  $: sponsoring_contracts_download_open = false;
+            e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-  document.addEventListener("click", function (e) {
+            e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    if (
+        ) {
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
+            sponsoring_contracts_download_open = false;
      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
    ) {
      sponsoring_contracts_download_open = false;
    }
  });
  function generateSponsoringContract(locale) {
    sponsoring_contracts_download_open = false;
    if (generate_orgs.length > 0) {
      generateOrgContracts(locale);
    } else if (generate_teams.length > 0) {
      generateTeamContracts(locale);
    } else {
      generateRunnerContracts(locale);
    }
  }
  async function generateTeamContracts(locale) {
    const toast = Toastify({
      text: $_("generating-pdfs"),
      duration: -1,
    }).showToast();
    let count = 0;
    for (const t of generate_teams) {
      count++;
      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
        t.id
      );
      fetch(
        `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(runners),
        }
-      )
+    });
        .then((response) => {
          if (response.status != "200") {
            toast.hideToast();
            Toastify({
              text: $_("pdf-generation-failed"),
              duration: 3500,
              backgroundColor:
                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
            }).showToast();
          } else {
            return response.blob();
          }
        })
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = url;
          a.download = `${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === generate_teams.length) {
            toast.hideToast();
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
    }
  }
-  async function generateOrgContracts(locale) {
+    function generateSponsoringContract(locale) {
-    const toast = Toastify({
+        sponsoring_contracts_download_open = false;
      text: $_("generating-pdf"),
      duration: -1,
    }).showToast();
    let count_orgs = 0;
    for (const o of generate_orgs) {
      count_orgs++;
      let count = 0;
      let runners =
        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
          o.id,
          true
        );
      await fetch(
        `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(runners),
        }
      )
        .then((response) => {
          if (response.status != "200") {
            toast.hideToast();
            Toastify({
              text: $_("pdf-generation-failed"),
              duration: 3500,
              backgroundColor:
                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
            }).showToast();
          } else {
            return response.blob();
          }
        })
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = url;
          a.download = `${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === o.teams.length && count_orgs === generate_orgs.length) {
            toast.hideToast();
            console.log("here");
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
      for (const t of o.teams) {
        count++;
        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
          t.id
        );
        await fetch(
          `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(runners),
          }
        )
          .then((response) => {
            if (response.status != "200") {
              toast.hideToast();
              Toastify({
                text: $_("pdf-generation-failed"),
                duration: 3500,
                backgroundColor:
                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
              }).showToast();
            } else {
              return response.blob();
            }
          })
          .then((blob) => {
            const url = window.URL.createObjectURL(blob);
            let a = document.createElement("a");
            a.href = url;
            a.download = `${$_("sponsorings")}_${o.name}_${
              t.name
            }-${locale}-${createId()}.pdf`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            if (
              count === o.teams.length &&
              count_orgs === generate_orgs.length
            ) {
              toast.hideToast();
              Toastify({
                text: $_("pdfs-successfully-generated"),
                duration: 3500,
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
              }).showToast();
            }
          })
          .catch((err) => {});
      }
    }
  }
-  function generateRunnerContracts(locale) {
+        if (generate_orgs.length > 0) {
-    const toast = Toastify({
+            generateOrgContracts(locale);
-      text: $_("generating-pdf"),
+        } else if (generate_teams.length > 0) {
-      duration: -1,
+            generateTeamContracts(locale);
    }).showToast();
    fetch(
      `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(generate_runners),
      }
    )
      .then((response) => {
        if (response.status != "200") {
          toast.hideToast();
          Toastify({
            text: $_("pdf-generation-failed"),
            duration: 3500,
            backgroundColor:
              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
          }).showToast();
        } else {
-          return response.blob();
+            generateRunnerContracts(locale);
        }
-      })
+    }
-      .then((blob) => {
+
-        const url = window.URL.createObjectURL(blob);
+    async function generateTeamContracts(locale) {
-        let a = document.createElement("a");
+        const toast = Toastify({
-        a.href = url;
+            text: $_("generating-pdfs"),
-        if (generate_runners.length == 1) {
+            duration: -1,
          a.download = `${$_("sponsorings")}_${generate_runners[0].firstname}_${
            generate_runners[0].lastname
          }-${locale}-${createId()}.pdf`;
        }
        a.download = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
        document.body.appendChild(a);
        a.click();
        a.remove();
        toast.hideToast();
        Toastify({
          text: $_("pdf-successfully-generated"),
          duration: 3500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
-      })
+        let count = 0;
-      .catch((err) => {
+        for (const t of generate_teams) {
-        console.error(err);
+            count++;
-      });
+            const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-  }
+                t.id
            );
            fetch(
                `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(runners),
                }
            )
                .then((response) => {
                    if (response.status != "200") {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdf-generation-failed"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
                        }).showToast();
                    } else {
                        return response.blob();
                    }
                })
                .then((blob) => {
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = url;
                    a.download = `${$_('sponsorings')}_${t.name}-${locale}.pdf`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    if (count === generate_teams.length) {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdfs-successfully-generated"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(to right, #00b09b, #96c93d)",
                        }).showToast();
                    }
                })
                .catch((err) => {});
        }
    }
    async function generateOrgContracts(locale) {
        const toast = Toastify({
            text: $_("generating-pdf"),
            duration: -1,
        }).showToast();
        for (const o of generate_orgs) {
            const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
                o.id
            );
            fetch(
                `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(runners),
                }
            )
                .then((response) => {
                    if (response.status != "200") {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdf-generation-failed"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
                        }).showToast();
                    } else {
                        return response.blob();
                    }
                })
                .then((blob) => {
                    count++;
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = url;
                    a.download = `${$_('sponsorings')}_${o.name}-${locale}.pdf`;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    if (count === generate_orgs.length) {
                        toast.hideToast();
                        Toastify({
                            text: $_("pdfs-successfully-generated"),
                            duration: 3500,
                            backgroundColor:
                                "linear-gradient(to right, #00b09b, #96c93d)",
                        }).showToast();
                    }
                })
                .catch((err) => {});
        }
    }
    function generateRunnerContracts(locale) {
        const toast = Toastify({
            text: $_("generating-pdf"),
            duration: -1,
        }).showToast();
        fetch(
            `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
            {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(generate_runners),
            }
        )
            .then((response) => {
                if (response.status != "200") {
                    toast.hideToast();
                    Toastify({
                        text: $_("pdf-generation-failed"),
                        duration: 3500,
                        backgroundColor:
                            "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
                    }).showToast();
                } else {
                    return response.blob();
                }
            })
            .then((blob) => {
                const url = window.URL.createObjectURL(blob);
                let a = document.createElement("a");
                a.href = url;
                if(generate_runners.length == 1){
                    a.download = `${$_('sponsorings')}_${generate_runners[0].firstname}_${generate_runners[0].lastname}-${locale}.pdf`;
                }
                a.download = `${$_('sponsorings')}-${locale}.pdf`;
                document.body.appendChild(a);
                a.click();
                a.remove();
                toast.hideToast();
                Toastify({
                    text: $_("pdf-successfully-generated"),
                    duration: 3500,
                    backgroundColor:
                        "linear-gradient(to right, #00b09b, #96c93d)",
                }).showToast();
            })
            .catch((err) => {
                console.error(err);
            });
    }
 </script>
 {#if sponsoring_contracts_show}
-  <div id="sponsoring:dropdown" class="relative inline-block">
+    <div id="sponsoring:dropdown" class="relative inline-block">
-    <div>
+        <div>
-      <button
+            <button
-        on:click={() => {
+                on:click={() => {
-          sponsoring_contracts_download_open =
+                    sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-            !sponsoring_contracts_download_open;
+                }}
-        }}
+                type="button"
-        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"
-        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"
-        id="options-menu"
+                aria-haspopup="true"
-        aria-haspopup="true"
+                aria-expanded="true">
-        aria-expanded="true"
+                {$_('generate-sponsoring-contracts')}
-      >
+                <svg
-        {$_("generate-sponsoring-contracts")}
+                    xmlns="http://www.w3.org/2000/svg"
-        <svg
+                    width="24"
-          xmlns="http://www.w3.org/2000/svg"
+                    height="24"
-          width="24"
+                    viewBox="0 0 24 24"
-          height="24"
+                    class="-mr-1 ml-2 h-5 w-5"><path
-          viewBox="0 0 24 24"
+                        fill="none"
-          class="-mr-1 ml-2 h-5 w-5"
+                        d="M0 0h24v24H0z" />
-          ><path fill="none" d="M0 0h24v24H0z" />
+                    <path
-          <path
+                        fill="currentColor"
-            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>
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
+            </button>
          /></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 sponsoring_contracts_download_open}
-    {/if}
+            <div
-  </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"
                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>
 {/if}
--- a/src/components/presets/DataTable.svelte
+++ b/src/components/presets/DataTable.svelte
@@ -0,0 +1,30 @@
 <script>
  import { _, json } from "svelte-i18n";
  import { getlang } from "./datatable_i18n";
  import { Grid } from "gridjs";
  //
  let table;
  const datatable = new Grid({
    columns: ["Name", "Email", "Phone Number"],
    language: getlang($json("datatable")),
    sort: true,
    search: { enabled: true },
    data: [
      ["John", "john@example.com", "(353) 01 222 3333"],
      ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
      ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
      ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
      ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ],
    pagination: {
      enabled: true,
      limit: 2,
      summary: false,
    },
  });
  setTimeout(() => {
    datatable.render(table);
  }, 0);
 </script>
 <div bind:this={table} />
--- a/src/components/runners/AddRunnerModal.svelte
+++ b/src/components/runners/AddRunnerModal.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import {
    RunnerService,
    RunnerTeamService,
@@ -11,10 +11,8 @@
  import isMobilePhone from "validator/es/lib/isMobilePhone";
  import Toastify from "toastify-js";
  import Select from "svelte-select";
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
  export let modal_open;
  export let current_runners;
  $: selected_team = undefined;
  let firstname_input;
  let lastname_input;
@@ -109,7 +107,8 @@
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
-          dispatch("created", { runners: [result] });
+          current_runners.push(result);
          current_runners = current_runners;
        })
        .catch((err) => {
          //
@@ -126,7 +125,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
--- a/src/components/runners/DeleteRunnerModal.svelte
+++ b/src/components/runners/DeleteRunnerModal.svelte
@@ -1,115 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import { createEventDispatcher, onMount } from "svelte";
  export let modal_open;
  export let delete_runner = {
    id: 0,
    firstname: "",
    lastname: "",
  };
  const dispatch = createEventDispatcher();
  onMount(() => {
    document.onkeydown = (e) => {
      e = e || window.event;
      if (e.key === "Escape") {
        modal_open = false;
      }
      if (e.keyCode === 13) {
        if (createbtnenabled === true) {
          createbtnenabled = false;
          submit();
        }
      }
    };
  });
  async function submit() {
    dispatch("delete", { id: delete_runner.id });
    modal_open=false;
  }
 </script>
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
    }}
  >
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline"
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                class="h-6 w-6 text-blue-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
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_("confirm-delete")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_("please-confirm-the-deletion-of-runner")}
                </p>
              </div>
              <div class="w-full">
                <span class="inline-block"
                  >{delete_runner.firstname} {delete_runner.lastname}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            on:click={submit}
            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:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("delete")}
          </button>
          <button
            on:click={() => {
              modal_open = false;
            }}
            type="button"
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("cancel")}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
--- a/src/components/runners/ImportRunnerModal.svelte
+++ b/src/components/runners/ImportRunnerModal.svelte
@@ -3,7 +3,7 @@
  import { read as readXlsx, utils as xlsx_utils } from "xlsx";
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import Toastify from "toastify-js";
  import {
    ImportService,
@@ -16,6 +16,7 @@
  export let passed_org;
  export let passed_orgs;
  export let passed_team;
  export let current_runners;
  export let import_modal_open;
  $: searchvalue = "";
  $: importButtonEnabled =
@@ -168,7 +169,7 @@
            mapped
          )
            .then((resp) => {
-              dispatch("created", { runners: resp });
+              current_runners = current_runners.concat(resp);
              toast.hideToast();
              recent_processed = true;
              Toastify({
@@ -197,11 +198,11 @@
            mapped
          )
            .then((resp) => {
-              dispatch("created", { runners: resp });
+              current_runners = current_runners.concat(resp);
              toast.hideToast();
              recent_processed = true;
              Toastify({
-                text: $_('import-finished'),
+                text: "Import finished",
                duration: 500,
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
              }).showToast();
@@ -227,7 +228,7 @@
 {#if import_modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      cancelModal();
--- a/src/components/runners/RunnerDetail.svelte
+++ b/src/components/runners/RunnerDetail.svelte
@@ -71,9 +71,6 @@
      }).showToast();
      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);
@@ -98,7 +95,7 @@
 </script>
 {#await runner_promise}
-  {$_("loading-runners")}
+  {$_('loading-runners')}
 {:then}
  <section class="container p-5 select-none">
    <div class="flex flex-row mb-4">
@@ -112,15 +109,12 @@
                class="flex-shrink-0 w-5 h-5 mr-2"
                fill="currentColor"
                width="24"
-                height="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
                ><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"
+                  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>
                /></svg
              >
            </li>
            <li class="flex items-center">
-              <a class="mr-2" href="./">{$_("runners")}</a><svg
+              <a class="mr-2" href="./">{$_('runners')}</a><svg
                stroke="currentColor"
                fill="none"
                stroke-width="2"
@@ -130,17 +124,17 @@
                class="h-3 w-3 mr-2 stroke-current"
                height="1em"
                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
+                xmlns="http://www.w3.org/2000/svg"><line
-                ><line x1="5" y1="12" x2="19" y2="12" />
+                  x1="5"
-                <polyline points="12 5 19 12 12 19" /></svg
+                  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"
+              <span class="mr-2">{original_data.firstname}
-                >{original_data.firstname}
+                {original_data.middlename || ''}
-                {original_data.middlename || ""}
+                {original_data.lastname}</span>
                {original_data.lastname}</span
              >
            </li>
          </ol>
        </nav>
@@ -148,42 +142,36 @@
    </div>
    <div class="mb-8 text-3xl font-extrabold leading-tight">
      {original_data.firstname}
-      {original_data.middlename || ""}
+      {original_data.middlename || ''}
      {original_data.lastname}
      <span data-id="runner_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
+        {#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:ml-3 sm:w-auto sm:text-sm"
+              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:text-sm">{$_('confirm-deletion')}</button>
              >{$_("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"
+              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>
              >{$_("cancel")}</button
            >
          {/if}
          <GenerateSponsoringContracts
            bind:sponsoring_contracts_show
-            bind:generate_runners
+            bind:generate_runners />
-          />
+          <GenerateRunnerCards
-          <GenerateRunnerCards bind:cards_show bind:generate_runners />
+            bind:cards_show
            bind:generate_runners />
          <GenerateRunnerCertificates
            bind:certificates_show
-            bind:generate_runners
+            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:ml-3 sm:w-auto sm:text-sm"
+              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:text-sm">{$_('delete-runner')}</button>
              >{$_("delete-runner")}</button
            >
          {/if}
        {/if}
        {#if !delete_triggered}
@@ -192,128 +180,121 @@
            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:text-sm"
+            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:text-sm">{$_('save-changes')}</button>
            >{$_("save-changes")}</button
          >
        {/if}
      </span>
    </div>
    <!--  -->
    <div class="text-sm w-full">
-      <label for="firstname" class="font-medium text-gray-700"
+      <label
-        >{$_("first-name")}</label
+        for="firstname"
-      >
+        class="font-medium text-gray-700">{$_('first-name')}</label>
      <input
        autocomplete="off"
-        placeholder={$_("first-name")}
+        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"
+        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"
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-        >
+          {$_('first-name-is-required')}
          {$_("first-name-is-required")}
        </span>
      {/if}
    </div>
    <div class="text-sm w-full">
-      <label for="middlename" class="font-medium text-gray-700"
+      <label
-        >{$_("middle-name")}</label
+        for="middlename"
-      >
+        class="font-medium text-gray-700">{$_('middle-name')}</label>
      <input
        autocomplete="off"
-        placeholder={$_("middle-name")}
+        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"
+        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"
+      <label
-        >{$_("last-name")}</label
+        for="lastname"
-      >
+        class="font-medium text-gray-700">{$_('last-name')}</label>
      <input
        autocomplete="off"
-        placeholder={$_("last-name")}
+        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"
+        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"
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-        >
+          {$_('last-name-is-required')}
          {$_("last-name-is-required")}
        </span>
      {/if}
    </div>
    <div class="text-sm w-full">
-      <label for="email" class="font-medium text-gray-700"
+      <label
-        >{$_("e-mail-adress")}</label
+        for="email"
-      >
+        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
      <input
        autocomplete="off"
-        placeholder={$_("e-mail-adress")}
+        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"
+        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"
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-        >
+          {$_('valid-email-is-required')}
          {$_("valid-email-is-required")}
        </span>
      {/if}
    </div>
    <div class="text-sm w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
+      <label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
      <input
        autocomplete="off"
-        placeholder={$_("phone")}
+        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"
+        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>
+      <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) =>
+        itemFilter={(label, filterText, option) => label
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
+            .toLowerCase()
-          option.id.value.toString().startsWith(filterText.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")}
+        placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
-        noOptionsMessage={$_("no-organization-or-team-found")}
+        noOptionsMessage={$_('no-organization-or-team-found')}
        bind:selectedValue={group}
        on:select={(selectedValue) => {
          editable.group = selectedValue.detail.value.id;
        }}
-        on:clear={() => (editable.group = null)}
+        on:clear={() => (editable.group = null)} />
      />
    </div>
    <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_("distance")}</span>
+      <span class="font-medium text-gray-700">{$_('distance')}</span>
      <br />
-      <span class="text-gray-700">{original_data.distance / 1000} km</span>
+      <span class="text-gray-700">{original_data.distance} km</span>
    </div>
  </section>
 {:catch error}
--- a/src/components/runners/Runners.svelte
+++ b/src/components/runners/Runners.svelte
@@ -7,43 +7,35 @@
  $: current_runners = [];
  export let modal_open = false;
  export let import_modal_open = false;
  let addRunners;
 </script>
 <section class="container p-5">
  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_("runners")}
+    {$_('runners')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:CREATE")}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:CREATE')}
      <button
        on:click={() => {
          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:ml-3 sm:w-auto sm:text-sm"
+        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:ml-3 sm:w-auto sm:text-sm">
-      >
+        {$_('laeufer-hinzufuegen')}
        {$_("laeufer-hinzufuegen")}
      </button>
      <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:ml-3 sm:w-auto sm:text-sm"
+        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:ml-3 sm:w-auto sm:text-sm">
-      >
+        {$_('import-runners')}
        {$_("import-runners")}
      </button>
    {/if}
  </span>
-  <RunnersOverview bind:current_runners bind:addRunners />
+  <RunnersOverview bind:current_runners />
 </section>
-{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:CREATE")}
+{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:CREATE')}
-  <AddRunnerModal
+  <AddRunnerModal bind:current_runners bind:modal_open />
    bind:modal_open
    on:created={(event) => {
      addRunners(event.detail.runners);
    }}
  />
  <ImportRunnerModal
    on:cancelDelete={(event) => {
      import_modal_open = false;
@@ -51,10 +43,7 @@
    passed_team={{}}
    passed_orgs={[]}
    passed_org={{}}
    bind:current_runners
    opened_from="RunnerOverview"
-    bind:import_modal_open
+    bind:import_modal_open />
    on:created={(event) => {
      addRunners(event.detail.runners);
    }}
  />
 {/if}
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -1,267 +1,263 @@
 <script>
  import { getLocaleFromNavigator, _ } from "svelte-i18n";
  import {
    RunnerOrganizationService,
    RunnerService,
    RunnerTeamService,
    RunnerOrganizationService,
  } from "@odit/lfk-client-js";
  import {
    createSvelteTable,
    flexRender,
    getCoreRowModel,
    getFilteredRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    renderComponent,
  } from "@tanstack/svelte-table";
  import { onMount } from "svelte";
  import { _ } from "svelte-i18n";
  import { writable } from "svelte/store";
  import store from "../../store";
  import RunnersEmptyState from "./RunnersEmptyState.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 GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  $: searchvalue = "";
-  import InputElement from "../shared/InputElement.svelte";
+  $: active_deletes = [];
  import TableActions from "../shared/TableActions.svelte";
  import { groupFilter } from "../shared/tablefilters";
  import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
  import Toastify from "toastify-js";
  import TableBottom from "../shared/TableBottom.svelte";
  import TableHeader from "../shared/TableHeader.svelte";
  $: selectedRunners =
    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
  $: selected =
    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
  $: active_delete = undefined;
  let dataLoaded = false;
  export let current_runners = [];
-  $: sponsoring_contracts_show = selected.length > 0;
+  const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
-  $: cards_show = selected.length > 0;
+    current_runners = val;
-  $: certificates_show = selected.length > 0;
+  });
  $: selectedFilter_teams = null;
  $: selectedFilter = null;
  $: filter__teams = selectedFilter_teams || [];
  $: filter__orgs = selectedFilter || [];
  $: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
  $: sponsoring_contracts_show = current_runners.some(
    (r) => r.is_selected === true
  );
  $: cards_show = current_runners.some(
    (r) => r.is_selected === true
  );
  $: certificates_show = current_runners.some(
    (r) => r.is_selected === true
  );
  $: generate_runners = current_runners.filter((r) => r.is_selected === true);
  $: teams = [];
  $: orgs = [];
-
+  $: mappedteams = teams.map(function (g) {
-  export const addRunners = (runners) => {
+    return { value: g.id, label: g.parentGroup.name + " > " + g.name };
    current_runners = current_runners.concat(...runners);
    options.update((options) => ({
      ...options,
      data: current_runners,
    }));
  };
  //Section table
  const columns = [
    {
      accessorKey: "id",
      header: () => "id",
      filterFn: `equalsString`,
    },
    {
      accessorKey: "firstname",
      header: () => $_("first-name"),
      filterFn: `includesString`,
    },
    {
      accessorKey: "middlename",
      header: () => $_("middle-name"),
      cell: (info) => {
        if (!info || !info.getValue()) {
          return "";
        }
        return info.getValue();
      },
      filterFn: `includesString`,
    },
    {
      accessorKey: "lastname",
      header: () => $_("last-name"),
      filterFn: `includesString`,
    },
    {
      accessorKey: "group",
      header: () => $_("group"),
      cell: (info) => {
        const group = info.getValue();
        if (group.responseType === "RUNNERORGANIZATION") {
          return group.name;
        }
        return `${group.parentGroup.name} > ${group.name}`;
      },
      filterFn: `group`,
    },
    {
      accessorKey: "distance",
      header: () => $_("distance"),
      cell: (info) => {
        if (info.getValue() < 1000) {
          return `${info.getValue()} m`;
        }
        return `${(info.getValue() / 1000).toFixed(1)} km`;
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "actions",
      header: () => $_("action"),
      cell: (info) => {
        return renderComponent(TableActions, {
          detailsLink: `./${info.row.original.id}`,
          deleteAction: () => {
            active_delete =
              current_runners[
                current_runners.findIndex((r) => r.id == info.row.original.id)
              ];
          },
          deleteEnabled:
            store.state.jwtinfo.userdetails.permissions.includes(
              "RUNNER:DELETE"
            ),
        });
      },
      enableColumnFilter: false,
      enableSorting: false,
    },
  ];
  const options = writable({
    data: [],
    columns: columns,
    filterFns: {
      group: groupFilter,
    },
    initialState: {
      pagination: {
        pageSize: 50,
      },
    },
    enableRowSelection: true,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });
-  const table = createSvelteTable(options);
+  $: selectgroups = orgs
    .map(function (g) {
      return { value: g.id, label: g.name };
    })
    .concat(mappedteams);
-  async function deleteRunner(delete_runner_id) {
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    await RunnerService.runnerControllerRemove(delete_runner_id, true);
+    teams = val;
-    current_runners = current_runners.filter((r) => r.id !== delete_runner_id);
+  });
-    options.update((options) => ({
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-      ...options,
+    orgs = val;
-      data: current_runners,
+  });
-    }));
+  function should_display_based_on_id(id) {
-    Toastify({
+    if (searchvalue.toString().slice(-1) === "*") {
-      text: $_("runner-deleted"),
+      return id.toString().startsWith(searchvalue.replace("*", ""));
      duration: 3500,
      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    }).showToast();
  }
  onMount(async () => {
    RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
      teams = val;
    });
    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
      (val) => {
        orgs = val;
      }
    );
    let page = 0;
    while (page >= 0) {
      const runners = await RunnerService.runnerControllerGetAll(page, 1000);
      if (runners.length == 0) {
        page = -2;
      }
      current_runners = current_runners.concat(...runners);
      options.update((options) => ({
        ...options,
        data: current_runners,
      }));
      dataLoaded = true;
      page++;
    }
-    console.log("All runners loaded");
+    return id.toString() === searchvalue;
-  });
+  }
 </script>
-<DeleteRunnerModal
+{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
-  delete_runner={active_delete}
+  {#await runners_promise}
  modal_open={active_delete != undefined}
  on:delete={(event) => {
    deleteRunner(event.detail.id);
  }}
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
  {#if !dataLoaded}
    <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"
+      role="alert">
-    >
+      <p class="font-bold">{$_('runners-are-being-loaded')}</p>
-      <p class="font-bold">{$_("runners-are-being-loaded")}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
-  {:else}
+  {:then}
-    <div class="h-12 mt-2">
+    {#if current_runners.length === 0}
-      <GenerateSponsoringContracts
+      <RunnersEmptyState />
-        bind:sponsoring_contracts_show
+    {:else}
-        bind:generate_runners={selectedRunners}
+      <input
-      />
+        type="search"
-      <GenerateRunnerCards
+        bind:value={searchvalue}
-        bind:cards_show
+        placeholder={$_('datatable.search')}
-        bind:generate_runners={selectedRunners}
+        aria-label={$_('datatable.search')}
-      />
+        class="gridjs-input gridjs-search-input mb-4" />
-      <GenerateRunnerCertificates
+      <div class="block mb-6">
-        bind:certificates_show
+        <label
-        bind:generate_runners={selectedRunners}
+          for="country"
-      />
+          class="text-sm font-medium text-gray-700">{$_('filter-by-organization-team')}</label>
-    </div>
+        <Select
-    <div class="overflow-x-auto">
+          on:select={(event) => {
-      <table class="w-full">
+            selectedFilter = event.detail;
-        <thead>
+          }}
-          {#each $table.getHeaderGroups() as headerGroup}
+          selectedValue={selectedFilter}
-            <tr class="select-none">
+          placeholder={$_('filter-by-organization-team')}
-              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
+          containerClasses="mt-1 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-                <InputElement
+          items={selectgroups}
-                  type="checkbox"
+          isMulti={true} />
-                  checked={$table.getIsAllRowsSelected()}
+      </div>
-                  indeterminate={$table.getIsSomeRowsSelected()}
+      <div class="h-12">
-                  on:change={() => $table.toggleAllRowsSelected()}
+        <GenerateSponsoringContracts
-                />
+          bind:sponsoring_contracts_show
-              </th>
+          bind:generate_runners />
-              {#each headerGroup.headers as header}
+        <GenerateRunnerCards
-                <TableHeader {header} />
+          bind:cards_show
-              {/each}
+          bind:generate_runners />
-            </tr>
+        <GenerateRunnerCertificates
-          {/each}
+          bind:certificates_show
-        </thead>
+          bind:generate_runners />
-        <tbody>
+      </div>
-          {#each $table.getRowModel().rows as row}
+      <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>
-              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+              <th
-                <InputElement
+                scope="col"
-                  type="checkbox"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  checked={row.getIsSelected()}
+                <span
-                  on:change={() => row.toggleSelected()}
+                  on:click={() => {
-                />
+                    const newstate = !current_runners.some((r) => r.is_selected === true);
-              </td>
+                    current_runners = current_runners.map((r) => {
-              {#each row.getVisibleCells() as cell}
+                      r.is_selected = newstate;
-                <td>
+                      return r;
-                  <svelte:component
+                    });
-                    this={flexRender(
+                  }}
-                      cell.column.columnDef.cell,
+                  class="underline cursor-pointer select-none">{#if current_runners.some((r) => r.is_selected === true)}
-                      cell.getContext()
+                    {$_('deselect-all')}
-                    )}
+                  {:else}{$_('select-all')}{/if}
-                  />
+                </span>
-                </td>
+              </th>
-              {/each}
+              <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">
                {$_('contact-information')}
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {$_('group')}
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {$_('distance-in-km')}
              </th>
              <th scope="col" class="relative px-6 py-3">
                <span class="sr-only">{$_('action')}</span>
              </th>
            </tr>
-          {/each}
+          </thead>
-        </tbody>
+          <tbody class="divide-y divide-gray-200">
-      </table>
+            {#each current_runners as runner}
              {#if runner.firstname
                .toLowerCase()
                .includes(
                  searchvalue.toLowerCase()
                ) || runner.lastname
                  .toLowerCase()
                  .includes(
                    searchvalue.toLowerCase()
                  ) || should_display_based_on_id(runner.id)}
                {#if filterGroupIDs.includes(runner.group.id) || filterGroupIDs.includes(runner.group.parentGroup?.id) || filterGroupIDs.length === 0}
                  <tr
                    data-rowid="user_{runner.id}"
                    data-groupid={runner.group.id}>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input
                        bind:checked={runner.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">
                            {runner.firstname}
                            {runner.middlename || ''}
                            {runner.lastname}
                          </div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      {#if runner.email}
                        <div class="text-sm text-gray-500">{runner.email}</div>
                      {/if}
                      {#if runner.phone}
                        <div class="text-sm text-gray-500">{runner.phone}</div>
                      {/if}
                      {#if runner.address.address1 !== null}
                        {runner.address.address1}<br />
                        {runner.address.address2 || ''}<br />
                        {runner.address.postalcode}
                        {runner.address.city}
                        {runner.address.country}
                      {/if}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      {#if runner.group.responseType === 'RUNNERTEAM'}
                        <a
                          href="../teams/{runner.group.id}"
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
                      {/if}
                      {#if runner.group.responseType === 'RUNNERORGANIZATION'}
                        <a
                          href="../orgs/{runner.group.id}"
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
                      {/if}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      {runner.distance}
                    </td>
                    {#if active_deletes[runner.id] === true}
                      <td
                        class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <button
                          on:click={() => {
                            active_deletes[runner.id] = false;
                          }}
                          tabindex="0"
                          class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                        <button
                          on:click={() => {
                            RunnerService.runnerControllerRemove(runner.id, true)
                              .then((resp) => {
                                current_runners = current_runners.filter((obj) => obj.id !== runner.id);
                              })
                              .catch((err) => {});
                          }}
                          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="./{runner.id}"
                          class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
                        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
                          <button
                            on:click={() => {
                              active_deletes[runner.id] = true;
                            }}
                            tabindex="0"
                            class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
                        {/if}
                      </td>
                    {/if}
                  </tr>
                {/if}
              {/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>
-    <div class="h-2" />
+  {/await}
  {/if}
 {/if}
 <TableBottom {table} {selected} />
--- a/src/components/runners/ThFilterGroup.svelte
+++ b/src/components/runners/ThFilterGroup.svelte
@@ -1,35 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let groups;
  export let handler;
  let selected = "all";
 </script>
 <th style="border-bottom: 1px solid #ddd;">
  <select
    on:input={() => {
      setTimeout(() => {
        if (`${selected}`.trim()) {
          const value = selected;
          handler.filter(value, (runner) => {
            if (
              runner.group.id === value ||
              runner?.group?.parentGroup?.id === value ||
              value === "all"
            )
              return runner;
            return "";
          });
        }
      }, 50);
    }}
    bind:value={selected}
    name="groupfilter"
    id="groupfilter"
  >
    <option value="all">{$_('all')}</option>
    {#each groups as g}
      <option value={g.value}>{g.label}</option>
    {/each}
  </select>
 </th>
--- a/src/components/scans/AddScanModal.svelte
+++ b/src/components/scans/AddScanModal.svelte
@@ -1,24 +1,23 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import {
    RunnerService,
    ScanService,
  } from "@odit/lfk-client-js";
  import Select from "svelte-select";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  export let modal_open;
  export let current_scans;
  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());
+    option.value.toString().startsWith(filterText.toLowerCase());
  function focus(el) {
    el.focus();
  }
  const dispatch = createEventDispatcher();
  $: runner = 0;
  $: runners = [];
  RunnerService.runnerControllerGetAll().then((val) => {
@@ -64,7 +63,8 @@
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
-          dispatch("created", { scans: [result] });
+          current_scans.push(result);
          current_scans = current_scans;
        })
        .catch((err) => {
          //
@@ -81,7 +81,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
--- a/src/components/scans/DeleteScanModal.svelte
+++ b/src/components/scans/DeleteScanModal.svelte
@@ -1,110 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import { createEventDispatcher, onMount } from "svelte";
  export let modal_open;
  export let delete_scan = {
    id: 0,
    runner: {
      firstname: "",
      lastname: "",
    },
  };
  const dispatch = createEventDispatcher();
  onMount(() => {
    document.onkeydown = (e) => {
      e = e || window.event;
      if (e.key === "Escape") {
        modal_open = false;
      }
      if (e.keyCode === 13) {
        if (createbtnenabled === true) {
          createbtnenabled = false;
          submit();
        }
      }
    };
  });
  async function submit() {
    dispatch("delete", { id: delete_scan.id });
    modal_open = false;
  }
 </script>
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
    }}
  >
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline"
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                class="h-6 w-6 text-blue-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
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_("confirm-delete")}
              </h3>
              <div class="mt-2 mb-6">
                {$_("please-confirm-the-deletion-of-scan")} #{delete_scan.id}
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            on:click={submit}
            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:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("delete")}
          </button>
          <button
            on:click={() => {
              modal_open = false;
            }}
            type="button"
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("cancel")}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
--- a/src/components/scans/ScanValid.svelte
+++ b/src/components/scans/ScanValid.svelte
@@ -1,16 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let valid = false;
 </script>
 {#if valid}
  <span
    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
    >{$_("valid")}</span
  >
 {:else}
  <span
    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
    >{$_("invalid")}</span
  >
 {/if}
--- a/src/components/scans/Scans.svelte
+++ b/src/components/scans/Scans.svelte
@@ -5,7 +5,6 @@
  import ScansOverview from "./ScansOverview.svelte";
  $: current_scans = [];
  export let modal_open = false;
  let addScans;
 </script>
 <section class="container p-5">
@@ -22,11 +21,9 @@
      </button>
    {/if}
  </span>
-  <ScansOverview bind:current_scans bind:addScans />
+  <ScansOverview bind:current_scans />
 </section>
 {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
-  <AddScanModal bind:modal_open on:created={(event)=>{
+  <AddScanModal bind:current_scans bind:modal_open />
    addScans(event.detail.scans)
  }} />
 {/if}
--- a/src/components/scans/ScansOverview.svelte
+++ b/src/components/scans/ScansOverview.svelte
@@ -1,308 +1,197 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
  import { ScanService, TrackService } from "@odit/lfk-client-js";
  import store from "../../store";
  import {
-    createSvelteTable,
+    ScanService,
-    flexRender,
+  } from "@odit/lfk-client-js";
-    getCoreRowModel,
+  import store from "../../store";
    getFilteredRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    renderComponent,
  } from "@tanstack/svelte-table";
  import { onMount } from "svelte";
  import { writable } from "svelte/store";
  import Toastify from "toastify-js";
  import TableBottom from "../shared/TableBottom.svelte";
  import TableHeader from "../shared/TableHeader.svelte";
  import ScansEmptyState from "./ScansEmptyState.svelte";
-  import InputElement from "../shared/InputElement.svelte";
+  $: searchvalue = "";
-  import TableActions from "../shared/TableActions.svelte";
+  $: active_deletes = [];
  import { runnerFilter, statusFilter } from "../shared/tablefilters";
  import CardRunner from "../cards/CardRunner.svelte";
  import ScanValid from "./ScanValid.svelte";
  import DeleteScanModal from "./DeleteScanModal.svelte";
  $: selectedScans =
    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
  $: selected =
    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
  $: active_delete = undefined;
  $: dataLoaded = false;
  export let current_scans = [];
-  export const addScans = (scans) => {
+  const scans_promise = ScanService.scanControllerGetAll().then((val) => {
-    current_scans = current_scans.concat(...scans);
+    current_scans = val;
    options.update((options) => ({
      ...options,
      data: current_scans,
    }));
  };
  let allTracks = [];
  TrackService.trackControllerGetAll().then((val) => {
    allTracks = val;
  });
-  function format_laptime(laptime) {
+  function should_display_based_on_id(id) {
-    if (laptime == 0 || laptime == null) {
+    if (searchvalue.toString().slice(-1) === "*") {
-      return $_("first-scan-of-the-day");
+      return id.toString().startsWith(searchvalue.replace("*", ""));
    }
-    if (laptime < 60) {
+    return id.toString() === searchvalue;
      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 format_laptime(laptime){
-  const columns = [
+    if(laptime == 0 || laptime == null){return $_('first-scan-of-the-day')}
-    {
+    if(laptime < 60){return `${laptime}s`}
-      accessorKey: "id",
+    if(laptime < 3600){return `${Math.floor(laptime / 60)}min ${laptime - (Math.floor(laptime / 60)*60)}s`}
-      header: () => "id",
+    return `${Math.floor(laptime / 3600)}h ${laptime - (Math.floor(laptime / 3600)*3600)}min ${laptime - (Math.floor(laptime / 3600)*3600) - (Math.floor(laptime / 60)*60)}`
      filterFn: `equalsString`,
    },
    {
      accessorKey: "runner",
      header: () => $_("runner"),
      cell: (info) => {
        return renderComponent(CardRunner, { runner: info.getValue() });
      },
      filterFn: `runner`,
    },
    {
      accessorKey: "lapTime",
      header: () => $_("laptime"),
      cell: (info) => {
        return format_laptime(info.getValue());
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "timestamp",
      header: () => $_("timestamp"),
      cell: (info) => {
        return new Date(parseInt(info.getValue()) * 1000).toLocaleString();
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "distance",
      header: () => $_("distance"),
      cell: (info) => {
        if (info.getValue() < 1000) {
          return `${info.getValue()}m`;
        }
        return `${(info.getValue() / 1000).toFixed(1)}km`;
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "track",
      header: () => $_("track"),
      cell: (info) => {
        const track = info.getValue();
        return track?.name || "?";
      },
      enableColumnFilter: true,
    },
    {
      accessorKey: "valid",
      cell: (info) => {
        return renderComponent(ScanValid, { valid: info.getValue() });
      },
      header: () => $_("status"),
      filterFn: `status`,
    },
    {
      accessorKey: "actions",
      header: () => $_("action"),
      cell: (info) => {
        return renderComponent(TableActions, {
          detailsLink: `./${info.row.original.id}`,
          deleteAction: () => {
            active_delete =
              current_scans[
                current_scans.findIndex((r) => r.id == info.row.original.id)
              ];
          },
          deleteEnabled:
            store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE"),
        });
      },
      enableColumnFilter: false,
      enableSorting: false,
    },
  ];
  const options = writable({
    data: [],
    columns: columns,
    initialState: {
      pagination: {
        pageSize: 50,
      },
    },
    filterFns: {
      runner: runnerFilter,
      status: statusFilter,
    },
    enableRowSelection: true,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });
  const table = createSvelteTable(options);
  async function deleteScan(scan_id) {
    await ScanService.scanControllerRemove(scan_id, true);
    current_scans = current_scans.filter((r) => r.id !== scan_id);
    options.update((options) => ({
      ...options,
      data: current_scans,
    }));
    Toastify({
      text: $_("scan-deleted"),
      duration: 3500,
      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    }).showToast();
  }
  onMount(async () => {
    let page = 0;
    while (page >= 0) {
      const scans = await ScanService.scanControllerGetAll(page, 500);
      if (scans.length == 0) {
        page = -2;
      }
      current_scans = current_scans.concat(...scans);
      options.update((options) => ({
        ...options,
        data: current_scans,
      }));
      dataLoaded = true;
      page++;
    }
    console.log("All scans loaded");
  });
 </script>
-<DeleteScanModal
+{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
-  delete_scan={active_delete}
+  {#await scans_promise}
  modal_open={active_delete != undefined}
  on:delete={(event) => {
    deleteScan(event.detail.id);
  }}
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
  {#if !dataLoaded}
    <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"
+      role="alert">
-    >
+      <p class="font-bold">{$_('scans-are-being-loaded')}</p>
-      <p class="font-bold">{$_("scans-are-being-loaded")}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
-  {:else if current_scans.length === 0}
+  {:then}
-    <ScansEmptyState />
+    {#if current_scans.length === 0}
-  {:else}
+      <ScansEmptyState />
-    {#if selected.length > 0}
+    {:else}
-      <button
+      <input
-        type="button"
+        type="search"
-        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:text-sm inline-flex"
+        bind:value={searchvalue}
-        id="options-menu"
+        placeholder={$_('datatable.search')}
-        on:click={async () => {
+        aria-label={$_('datatable.search')}
-          const prom = [];
+        class="gridjs-input gridjs-search-input mb-4" />
-          for (const scan of selectedScans) {
+      <div
-            prom.push(ScanService.scanControllerRemove(scan.id, true));
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-          }
+        <table class="divide-y divide-gray-200 w-full">
-          await Promise.all(prom);
+          <thead class="bg-gray-50">
          for (const scan of selectedScans) {
            current_scans = current_scans.filter((r) => r.id !== scan.id);
          }
          options.update((options) => ({
            ...options,
            data: current_scans,
          }));
          $table.resetRowSelection();
          Toastify({
            text: $_("scan-deleted"),
            duration: 3500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
        }}
      >
        {$_("delete-scans")}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-5 h-5"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
          />
        </svg>
      </button>
    {/if}
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead>
          {#each $table.getHeaderGroups() as headerGroup}
            <tr class="select-none">
              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
                <InputElement
                  type="checkbox"
                  checked={$table.getIsAllRowsSelected()}
                  indeterminate={$table.getIsSomeRowsSelected()}
                  on:change={() => $table.toggleAllRowsSelected()}
                />
              </th>
              {#each headerGroup.headers as header}
                <TableHeader {header} />
              {/each}
            </tr>
          {/each}
        </thead>
        <tbody>
          {#each $table.getRowModel().rows as row}
            <tr>
-              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+              <th
-                <InputElement
+                scope="col"
-                  type="checkbox"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  checked={row.getIsSelected()}
+                {$_('runner')}
-                  on:change={() => row.toggleSelected()}
+              </th>
-                />
+              <th
-              </td>
+                scope="col"
-              {#each row.getVisibleCells() as cell}
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                <td>
+                {$_('distance-track')}
-                  <svelte:component
+              </th>
-                    this={flexRender(
+              <th
-                      cell.column.columnDef.cell,
+                scope="col"
-                      cell.getContext()
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    )}
+                {$_('laptime')}
-                  />
+              </th>
-                </td>
+              <th
-              {/each}
+                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {$_('status')}
              </th>
              <th scope="col" class="relative px-6 py-3">
                <span class="sr-only">{$_('action')}</span>
              </th>
            </tr>
-          {/each}
+          </thead>
-        </tbody>
+          <tbody class="divide-y divide-gray-200">
-      </table>
+            {#each current_scans as scan}
              {#if scan.track?.name
                .toLowerCase()
                .includes(
                  searchvalue.toLowerCase()
                ) || scan.runner?.firstname
                  .toLowerCase()
                  .includes(
                    searchvalue.toLowerCase()
                  ) || scan.runner?.lastname
                  .toLowerCase()
                  .includes(
                    searchvalue.toLowerCase()
                  ) || should_display_based_on_id(scan.id)}
                <tr data-rowid="scan_{scan.id}">
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <a
                        href="../runners/{scan.runner.id}"
                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{scan.runner.firstname}
                        {scan.runner.middlename || ''}
                        {scan.runner.lastname}</a>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm font-medium text-gray-900">
                      {#if scan.distance < 1000}
                        {scan.distance}m
                      {:else}{scan.distance / 1000}km{/if}
                      {#if scan.track}
                        <a
                          href="../tracks"
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{scan.track.name}
                        </a>
                      {/if}
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    {#if scan.responseType === "TRACKSCAN"}
                      <div class="text-sm font-medium text-gray-900">
                        {format_laptime(scan.lapTime)}
                      </div>
                    {:else}
                      <div class="text-sm font-medium text-gray-900">
                        {$_('scan-with-fixed-distance')}
                      </div>
                    {/if}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      {#if scan.valid}
                        <span
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('valid')}</span>
                      {:else}
                        <span
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('invalid')}</span>
                      {/if}
                    </div>
                  </td>
                  {#if active_deletes[scan.id] === true}
                    <td
                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button
                        on:click={() => {
                          active_deletes[scan.id] = false;
                        }}
                        tabindex="0"
                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                      <button
                        on:click={() => {
                          ScanService.scanControllerRemove(scan.id, false).then(
                            (resp) => {
                              current_scans = current_scans.filter(
                                (obj) => obj.id !== scan.id
                              );
                              Toastify({
                                text: 'Scan deleted',
                                duration: 500,
                                backgroundColor:
                                  'linear-gradient(to right, #00b09b, #96c93d)',
                              }).showToast();
                            }
                          );
                        }}
                        tabindex="0"
                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
                    </td>
                  {:else}
                    <td
                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <a
                        href="./{scan.id}"
                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
                      {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:DELETE')}
                        <button
                          on:click={() => {
                            active_deletes[scan.id] = true;
                          }}
                          tabindex="0"
                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
                      {/if}
                    </td>
                  {/if}
                </tr>
              {/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>
-    <TableBottom {table} {selected} />
+  {/await}
  {/if}
 {/if}
--- a/src/components/scans/ThFilterRunner.svelte
+++ b/src/components/scans/ThFilterRunner.svelte
@@ -1,50 +0,0 @@
 <script>
  export let handler;
  let filterValue = "";
 </script>
 <th>
  <input
    on:input={() => {
      setTimeout(() => {
        const v = filterValue.toLowerCase();
        handler.filter(v, (c) => {
          if (v.startsWith("#")) {
            return `#${c.runner?.id}`;
          }
          if (c.runner) {
            let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
            if (c.runner.middlename) {
              runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
            }
            runnerName = runnerName.toLowerCase();
            return runnerName;
          }
          return "";
        });
      }, 150);
    }}
    placeholder="Filter"
    bind:value={filterValue}
    type="text"
    name="runnerfilter"
    id="runnerfilter"
  />
 </th>
 <style>
  th {
    border-bottom: 1px solid #e0e0e0;
  }
  input {
    margin: -1px 0 0 0;
    padding: 0;
    width: 100%;
    height: 24px;
    border: none;
    text-align: left;
    background: inherit;
    outline: 0;
    font-size: 14px;
  }
 </style>
--- a/src/components/scans/ThFilterTrack.svelte
+++ b/src/components/scans/ThFilterTrack.svelte
@@ -1,31 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let tracks;
  export let handler;
  let selected = "all";
 </script>
 <th style="border-bottom: 1px solid #ddd;">
  <select
    on:input={() => {
      setTimeout(() => {
        if (`${selected}`.trim()) {
          const value = selected;
          handler.filter(value, (scan) => {
            // TODO: fix filter
            if (scan.track.id === value || value === "all") return scan.track.id;
            return "";
          });
        }
      }, 50);
    }}
    bind:value={selected}
    name="trackfilter"
    id="trackfilter"
  >
    <option value="all">{$_("all")}</option>
    {#each tracks as track}
      <option value={track.id}>{track.name}</option>
    {/each}
  </select>
 </th>
--- a/src/components/scanstations/AddScanStationModal.svelte
+++ b/src/components/scanstations/AddScanStationModal.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import { ScanStationService, TrackService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import Select from "svelte-select";
@@ -81,7 +81,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
--- a/src/components/scanstations/ConfirmScanStationDeletion.svelte
+++ b/src/components/scanstations/ConfirmScanStationDeletion.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import { ScanStationService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
@@ -13,7 +13,7 @@
    dispatch("cancelDelete", { id: delete_station.id });
  }
  function deleteStation() {
-    ScanStationService.scanStationControllerRemove(
+    ScanStationService.donorControllerRemove(
      delete_station.id,
      true
    )
@@ -32,7 +32,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={cancelDelete}>
    <div
--- a/src/components/scanstations/CopyScanStationTokenModal.svelte
+++ b/src/components/scanstations/CopyScanStationTokenModal.svelte
@@ -1,18 +1,14 @@
 <script>
  import { _ } from "svelte-i18n";
  import { focusTrap } from "svelte-focus-trap";
  import Toastify from "toastify-js";
  import { tick, createEventDispatcher } from "svelte";
  import bwipjs from "bwip-js";
  export let copy_modal_open;
  export let new_station;
  const dispatch = createEventDispatcher();
  let valueCopy = null;
  let areaDom;
  let copied = false;
  $: is_qrcode = false;
  $: barcode = textToBase64Barcode(new_station.key, is_qrcode);
  function close() {
    copy_modal_open = false;
  }
@@ -40,167 +36,91 @@
          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
      }).showToast();
    }
    // we can notifi by event or storage about copy status
    valueCopy = null;
  }
  function textToBase64Barcode(text, is_qrcode) {
    const canvas = document.createElement("canvas");
    let bcid = "code128";
    if (is_qrcode) {
      bcid = "qrcode";
    }
    let codeconfig = {
      bcid,
      text: `${text}`,
      scale: 4,
      includetext: true,
      textxalign: "center",
      backgroundcolor: "ffffff",
    };
    if (bcid == "code128") {
      codeconfig.height = 10;
    }
    bwipjs.toCanvas(canvas, codeconfig);
    return canvas.toDataURL("image/png");
  }
 </script>
 {#if copy_modal_open}
  {#if valueCopy != null}
    <textarea bind:this={areaDom}>{valueCopy}</textarea>
  {/if}
-  <div class="fixed z-10 inset-0 overflow-y-auto">
+  <div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop"
+          data-id="modal_backdrop" />
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span
+        aria-hidden="true">&#8203;</span>
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
-        aria-labelledby="modal-headline"
+        aria-labelledby="modal-headline">
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
            >
              <svg
                class="h-6 w-6 text-blue-600"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
+                viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
                ><path fill="none" d="M0 0h24v24H0z" />
                <path
-                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
+                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
                /></svg
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_("token")}
+                {$_('token')}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
-                  {$_(
+                  {$_('the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again')}
                    "the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again"
                  )}
                  <br />
-                  {$_("please-copy-the-token-and-store-it-somewhere-save")}
+                  {$_('please-copy-the-token-and-store-it-somewhere-save')}
                </p>
              </div>
              <div class="mt-2 mb-6">
                <label
                  for="token"
-                  class="block text-sm font-medium text-gray-700"
+                  class="block text-sm font-medium text-gray-700">{$_('token')}</label>
-                  >{$_("token")}</label
+                <div on:click={copy} class="inline-flex">
                >
                <button on:click={copy} class="inline-flex">
                  <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-gray-500 p-2">
                  >
                    {new_station.key}
                  </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"
+                    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"
+                      height="24"><path fill="none" d="M0 0h24v24H0z" />
                      ><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"
+                        d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" /></svg>
                      /></svg
                    >
                  </div>
-                </button>
+                </div>
                <p class="text-gray-500 text-xs">
-                  {$_("click-to-copy-token-to-clipboard")}
+                  {$_('click-to-copy-token-to-clipboard')}
                </p>
              </div>
            </div>
          </div>
          <div class="mx-auto text-center items-center">
            <h2 class="text-lg leading-6 font-medium text-gray-900">
              {$_("config-codes")}
            </h2>
            <span class="flex items-center text-center">
              <p class="text-md text-gray-900 mr-3">Format:</p>
              <label for="codeswitch" class="text-md text-gray-900 mr-3"
                >Code128</label
              >
              <input
                id="codeswitch"
                type="checkbox"
                bind:checked={is_qrcode}
                class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200"
              />
              <label for="codeswitch" class="text-md text-gray-900 ml-3"
                >QR-Code</label
              >
            </span>
            <h3 class="leading-6 font-medium text-gray-900">
              {$_("api-endpoint")}
            </h3>
            <img
              class:w-[50%]={is_qrcode}
              class:w-full={!is_qrcode}
              class="md:w-auto mb-2 mx-auto"
              alt="Registrierungscode"
              src={textToBase64Barcode(config.baseurl, is_qrcode)}
            />
            <h3 class="leading-6 font-medium text-gray-900">{$_("token")}</h3>
            <img
              class:w-[50%]={is_qrcode}
              class:w-full={!is_qrcode}
              class="md:w-auto mb-2 mx-auto"
              alt="Registrierungscode"
              src={barcode}
            />
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            on:click={close}
            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-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            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-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
-          >
+            {$_('yes-i-copied-the-token')}
            {$_("yes-i-copied-the-token")}
          </button>
        </div>
      </div>
--- a/src/components/scanstations/ScanStationsOverview.svelte
+++ b/src/components/scanstations/ScanStationsOverview.svelte
@@ -41,7 +41,7 @@
        bind:value={searchvalue}
        placeholder={$_('datatable.search')}
        aria-label={$_('datatable.search')}
-        class="mb-4" />
+        class="gridjs-input gridjs-search-input mb-4" />
      <div
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
        <table class="divide-y divide-gray-200 w-full">
--- a/src/components/settings/ConfirmProfileDeletion.svelte
+++ b/src/components/settings/ConfirmProfileDeletion.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import { MeService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
@@ -17,7 +17,7 @@
    MeService.meControllerRemove(true)
      .then((resp) => {
        Toastify({
-          text: $_('profile-deleted'),
+          text: "Profile deleted!",
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
@@ -30,7 +30,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={cancelDelete}>
    <div
--- a/src/components/shared/InputElement.svelte
+++ b/src/components/shared/InputElement.svelte
@@ -1,20 +0,0 @@
 <script>
  let className = "";
  export { className as class };
  export let type;
 </script>
 <input
  class={`border-1 border-stone-300 border rounded-md shadow ${className} ${
    type === "checkbox" && "w-5 h-5 text-orange-400"
  }`}
  {type}
  {...$$restProps}
  on:click
  on:change
  on:keydown
  on:keyup
  on:mouseenter
  on:mouseleave
 />
--- a/src/components/shared/TableActions.svelte
+++ b/src/components/shared/TableActions.svelte
@@ -1,26 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  export let detailsLink;
  export let detailsAction;
  export let deleteEnabled;
  export let deleteAction;
 </script>
 {#if detailsLink}
  <a href={detailsLink} class="text-indigo-600 hover:text-indigo-900"
    >{$_("details")}</a
  >
 {:else if detailsAction}
  <button on:click={detailsAction} class="text-indigo-600 hover:text-indigo-900"
    >{$_("details")}</button
  >
 {/if}
 {#if deleteEnabled}
  <button
    tabindex="0"
    on:click={deleteAction}
    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
    >{$_("delete")}</button
  >
 {/if}
--- a/src/components/shared/TableBottom.svelte
+++ b/src/components/shared/TableBottom.svelte
@@ -1,71 +0,0 @@
 <script>
  export let table;
  export let selected;
 </script>
 <div class="flex items-center gap-2">
  <button
    class="border rounded p-1"
    on:click={() => $table.setPageIndex(0)}
    disabled={!$table.getCanPreviousPage()}
  >
    {"<<"}
  </button>
  <button
    class="border rounded p-1"
    on:click={() => $table.previousPage()}
    disabled={!$table.getCanPreviousPage()}
  >
    {"<"}
  </button>
  <button
    class="border rounded p-1"
    on:click={() => $table.nextPage()}
    disabled={!$table.getCanNextPage()}
  >
    {">"}
  </button>
  <button
    class="border rounded p-1"
    on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
    disabled={!$table.getCanNextPage()}
  >
    {">>"}
  </button>
  <span class="flex items-center gap-1">
    <div>Page</div>
    <strong>
      {$table.getState().pagination.pageIndex + 1} of{" "}
      {$table.getPageCount()}
    </strong>
  </span>
  <span class="flex items-center gap-1">
    | Go to page:
    <input
      type="number"
      defaultValue={$table.getState().pagination.pageIndex + 1}
      on:change={(e) => {
        const page = e.target.value ? Number(e.target.value) - 1 : 0;
        $table.setPageIndex(page);
      }}
      class="border p-1 rounded w-16"
    />
  </span>
  <select
    value={$table.getState().pagination.pageSize}
    on:input={(e) => {
      const ps = Number(e.target.value);
      console.log({ ps });
      $table.setPageSize(Number(e.target.value));
    }}
  >
    {#each [25, 50, 100, 250, 500] as pageSize}
      <option value={pageSize}>{pageSize}</option>
    {/each}
  </select>
 </div>
 <!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
 <div>
  {Object.keys(selected).length} of{" "}
  {$table.getPreFilteredRowModel().rows.length} Total Rows Selected
 </div>
--- a/src/components/shared/TableHeader.svelte
+++ b/src/components/shared/TableHeader.svelte
@@ -1,57 +0,0 @@
 <script>
  import { flexRender } from "@tanstack/svelte-table";
  export let header;
 </script>
 <th class="cursor-pointer min-w-[5rem]">
  {#if !header.isPlaceholder}
    <button
      class="w-full"
      tabindex="0"
      on:click={header.column.getToggleSortingHandler()}
    >
      <svelte:component
        this={flexRender(header.column.columnDef.header, header.getContext())}
      />
      {#if header.column
        .getIsSorted()
        .toString() == "asc" && header.column.getCanSort()}
        🔼
      {:else if header.column
        .getIsSorted()
        .toString() == "desc" && header.column.getCanSort()}
        🔽
      {/if}
    </button>
  {/if}
  {#if header.column.getCanFilter()}
    <div class="relative max-w-xs">
      <input
        title="name-search"
        value={header.column.getFilterValue() || ""}
        on:keyup={(e) => {
          header.column.setFilterValue(e.target.value);
        }}
        type="text"
        class="block w-full rounded-md border-gray-200 py-2 pl-8 text-xs focus:border-blue-500 focus:ring-blue-500"
        placeholder=""
      />
      <div
        class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
      >
        <svg
          class="h-3.5 w-3.5 text-gray-400"
          xmlns="http://www.w3.org/2000/svg"
          width={16}
          height={16}
          fill="currentColor"
          viewBox="0 0 16 16"
        >
          <path
            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
          />
        </svg>
      </div>
    </div>
  {/if}
 </th>
--- a/src/components/shared/tablefilters.js
+++ b/src/components/shared/tablefilters.js
@@ -1,65 +0,0 @@
 export const groupFilter = (row, columnId, value) => {
    const group = row.getValue(columnId);
    if (group.responseType === "RUNNERORGANIZATION") {
        return group.name.toLowerCase().includes(value.toLowerCase());
    } else if (value.includes(">")) {
        return (
            `${group.parentGroup.name} > ${group.name}`.toLowerCase().includes(value.toLowerCase())
        );
    } else {
        return (
            group.name.toLowerCase().includes(value.toLowerCase()) ||
            group.parentGroup.name.toLowerCase().includes(value.toLowerCase())
        );
    }
 };
 export const runnerFilter = (row, columnId, value) => {
    const runner = row.getValue(columnId);
    return filterRunner(runner, value)
 };
 export const donationRunnerFilter = (row, columnId, value) => {
    const runner = row.getValue(columnId);
    if (!runner) { return false; }
    return filterRunner(runner, value)
 };
 export const donationDonorFilter = (row, columnId, value) => {
    const runner = row.getValue(columnId);
    return filterRunner(runner, value)
 };
 function filterRunner(runner, value) {
    if (!runner && value == "blanko") { return true }
    if (!runner) { return false }
    if (value.startsWith("#")) {
        return runner.id == value.replace("#", "")
    }
    if (runner.middlename) {
        return `${runner.firstname} ${runner.middlename} ${runner.lastname}`.toLowerCase().includes(value.toLowerCase())
    }
    return `${runner.firstname} ${runner.lastname}`.toLowerCase().includes(value.toLowerCase())
 }
 export const filterName = (row, columnId, value) => {
    const obj = row.original;
    if (obj.middlename) {
        return `${obj.firstname} ${obj.middlename} ${obj.lastname}`.toLowerCase().includes(value.toLowerCase())
    }
    return `${obj.firstname} ${obj.lastname}`.toLowerCase().includes(value.toLowerCase())
 };
 export const filterAddress = (row, columnId, value) => {
    const obj = row.original.address;
    if (obj.address2) {s
        return `${obj.address1} ${obj.address2} ${obj.postalcode} ${obj.city} ${obj.country}`.toLowerCase().includes(value.toLowerCase())
    }
    return `${obj.address1} ${obj.postalcode} ${obj.city} ${obj.country}`.toLowerCase().includes(value.toLowerCase())
 };
 export const statusFilter = (row, columnId, value) => {
    const status = row.getValue(columnId);
    return status.toString().includes(value);
 };
--- a/src/components/statsclients/AddStatsClientModal.svelte
+++ b/src/components/statsclients/AddStatsClientModal.svelte
@@ -1,151 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import { StatsClientService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  export let modal_open;
  export let new_client;
  export let current_clients;
  export let copy_modal_open;
  function focus(el) {
    el.focus();
  }
  $: description = "";
  $: createbtnenabled = description != "";
  $: processed_last_submit = true;
  (() => {
    document.onkeydown = (e) => {
      e = e || window.event;
      if (e.key === "Escape") {
        modal_open = false;
      }
      if (e.keyCode === 13) {
        if (createbtnenabled === true) {
          createbtnenabled = false;
          submit();
        }
      }
    };
  })();
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
      const toast = Toastify({
        text: $_("statsclient-is-being-added"),
        duration: -1,
      }).showToast();
      StatsClientService.statsClientControllerPost({description})
        .then((result) => {
          description = "";
          modal_open = false;
          //
          Toastify({
            text: $_("scanstation-added"),
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          current_clients.push(result);
          current_clients = current_clients;
          new_client = result;
          copy_modal_open = true;
        })
        .catch((err) => {
          //
        })
        .finally(() => {
          processed_last_submit = true;
          //
          toast.hideToast();
        });
    }
  }
 </script>
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
    }}>
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop" />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span>
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline">
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
              <svg
                class="h-6 w-6 text-blue-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="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_('create-a-new-statsclient')}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_('please-provide-the-required-information-to-create-a-new-statsclient')}
                </p>
              </div>
              <div class="grid grid-cols-6 gap-6">
                <div class="col-span-6">
                  <label
                    for="description"
                    class="block text-sm font-medium text-gray-700">{$_('description')}</label>
                  <input
                    use:focus
                    autocomplete="off"
                    placeholder={$_('description')}
                    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" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            disabled={!createbtnenabled}
            class:opacity-50={!createbtnenabled}
            on:click={submit}
            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:ml-3 sm:w-auto sm:text-sm">
            {$_('create')}
          </button>
          <button
            on:click={() => {
              modal_open = false;
            }}
            type="button"
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
            {$_('cancel')}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
--- a/src/components/statsclients/ConfirmStatsClientDeletion.svelte
+++ b/src/components/statsclients/ConfirmStatsClientDeletion.svelte
@@ -1,88 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import { StatsClientService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
  export let modal_open;
  export let delete_station;
  const dispatch = createEventDispatcher();
  function cancelDelete() {
    modal_open = false;
    dispatch("cancelDelete", { id: delete_station.id });
  }
  function deleteClient() {
    StatsClientService.statsClientControllerRemove(delete_station.id, true)
      .then((resp) => {
        Toastify({
          text: $_('statsclient-deleted'),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
        location.replace("./");
      })
      .catch((err) => {});
  }
 </script>
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:clickOutside
    on:click_outside={cancelDelete}>
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop" />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span>
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline">
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
              <svg class="h-6 w-6 text-blue-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"/></svg>
            </div>
            <!-- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_('attention')}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_(
                    'do-you-want-to-delete-this-donor-with-all-related-donations'
                  )}
                  <br /> 
                  {$_('all-associated-scans-will-get-deleted-as-well')}
                </p>
              </div>
            </div> -->
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            on:click={deleteClient}
            type="button"
            class="w-full inline-flex 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:text-sm">
            {$_('confirm-delete-statsclient')}
          </button>
          <button
            on:click={cancelDelete}
            type="button"
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
            {$_('cancel-keep-statsclient')}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
--- a/src/components/statsclients/CopyStatsClientTokenModal.svelte
+++ b/src/components/statsclients/CopyStatsClientTokenModal.svelte
@@ -1,147 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import Toastify from "toastify-js";
  import { tick, createEventDispatcher } from "svelte";
  export let copy_modal_open;
  export let new_client;
  const dispatch = createEventDispatcher();
  let valueCopy = null;
  let areaDom;
  let copied = false;
  function close() {
    copy_modal_open = false;
  }
  async function copy() {
    valueCopy = new_client.key;
    await tick();
    areaDom.focus();
    areaDom.select();
    try {
      const successful = document.execCommand("copy");
      if (!successful) {
        throw new Error();
      }
      Toastify({
        text: $_("copied-token-to-clipboard"),
        duration: 500,
        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
      }).showToast();
      copied = true;
    } catch (err) {
      Toastify({
        text: $_("error-whyile-copying-to-clipboard"),
        duration: 500,
        backgroundColor:
          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
      }).showToast();
    }
    // we can notifi by event or storage about copy status
    valueCopy = null;
  }
 </script>
 {#if copy_modal_open}
  {#if valueCopy != null}
    <textarea bind:this={areaDom}>{valueCopy}</textarea>
  {/if}
  <div class="fixed z-10 inset-0 overflow-y-auto">
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
    >
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop"
        />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline"
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-blue-600"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                ><path fill="none" d="M0 0h24v24H0z" />
                <path
                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
                /></svg
              >
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">
                {$_("token")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_(
                    "the-statsclient-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again"
                  )}
                  <br />
                  {$_("please-copy-the-token-and-store-it-somewhere-save")}
                </p>
              </div>
              <div class="mt-2 mb-6">
                <label
                  for="token"
                  class="block text-sm font-medium text-gray-700"
                  >{$_("token")}</label
                >
                <button on:click={copy} class="inline-flex">
                  <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"
                  >
                    {new_client.key}
                  </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>
                <p class="text-gray-500 text-xs">
                  {$_("click-to-copy-token-to-clipboard")}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            on:click={close}
            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-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
          >
            {$_("yes-i-copied-the-token")}
          </button>
        </div>
      </div>
    </div>
  </div>
 {/if}
--- a/src/components/statsclients/StatsClientDetail.svelte
+++ b/src/components/statsclients/StatsClientDetail.svelte
@@ -1,119 +0,0 @@
 <script>
  import { t, _ } from "svelte-i18n";
  import store from "../../store";
  import Toastify from "toastify-js";
  import PromiseError from "../base/PromiseError.svelte";
  import ConfirmStatsClientDeletion from "./ConfirmStatsClientDeletion.svelte";
 	import { StatsClientService } from "@odit/lfk-client-js";
  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) => {
        Toastify({
          text: $_("statsclient-deleted"),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
        location.replace("./");
      })
      .catch((err) => {
        modal_open = true;
        delete_client = original_data;
      });
  }
 </script>
 <ConfirmStatsClientDeletion bind:modal_open bind:delete_client />
 {#await promise}
  {$_('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:ml-3 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:ml-3 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>
 {:catch error}
  <PromiseError {error} />
 {/await}
--- a/src/components/statsclients/StatsClients.svelte
+++ b/src/components/statsclients/StatsClients.svelte
@@ -1,33 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import store from "../../store";
  import AddStatsClientModal from "./AddStatsClientModal.svelte";
 	import CopyStatsClientTokenModal from "./CopyStatsClientTokenModal.svelte";
  import StatsClientsOverview from "./StatsClientsOverview.svelte";
  export let modal_open = false;
  export let copy_modal_open = false;
  export let new_client = {};
  let current_clients = [];
 </script>
 <section class="container p-5">
  <span class="mb-1 text-3xl font-extrabold leading-tight">
    {$_('statsclients')}
    {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:CREATE')}
      <button
        on:click={() => {
          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:ml-3 sm:w-auto sm:text-sm">
        {$_('create-a-new-statsclient')}
      </button>
    {/if}
  </span>
  <StatsClientsOverview bind:current_clients bind:modal_open bind:new_client bind:copy_modal_open />
 </section>
 {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:CREATE')}
 <AddStatsClientModal bind:modal_open bind:current_clients bind:new_client bind:copy_modal_open/>
 <CopyStatsClientTokenModal bind:copy_modal_open bind:new_client />
 {/if}
--- a/src/components/statsclients/StatsClientsEmptyState.svelte
+++ b/src/components/statsclients/StatsClientsEmptyState.svelte
@@ -1,21 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
 import AddStatsClientModal from "./AddStatsClientModal.svelte";
 import CopyScanStationTokenModal from "./CopyStatsClientTokenModal.svelte";
  import scanstations_empty from "./statsclients_empty.svg";
  let modal_open = false;
  let copy_modal_open = false;
  let new_client = {};
  let current_clients = [];
 </script>
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
    <img class="w-full h-44" src={scanstations_empty} alt="" />
    <span class="font-bold">{$_('you-dont-have-any-scanclients-yet')}.</span><br />
    <span>{$_('add-the-first-statsclient')}</span>
  </p>
 </div>
 <AddStatsClientModal bind:modal_open bind:current_clients bind:new_client bind:copy_modal_open/>
 <CopyScanStationTokenModal bind:copy_modal_open bind:new_client />
--- a/src/components/statsclients/StatsClientsOverview.svelte
+++ b/src/components/statsclients/StatsClientsOverview.svelte
@@ -1,150 +0,0 @@
 <script>
  import { _ } from "svelte-i18n";
  import Toastify from "toastify-js";
  import { StatsClientService } from "@odit/lfk-client-js";
  const promise = StatsClientService.statsClientControllerGetAll().then(
    (result) => {
      current_clients = result;
    }
  );
  import store from "../../store";
  import StatsClientsEmptyState from "./StatsClientsEmptyState.svelte";
  import ConfirmStatsClientDeletion from "./ConfirmStatsClientDeletion.svelte";
  $: searchvalue = "";
  $: active_deletes = [];
  let delete_client = {};
  let modal_open = false;
  export let current_clients = [];
 </script>
 <ConfirmStatsClientDeletion
  on:cancelDelete={(event) => {
    modal_open = false;
    active_deletes[event.detail.id] = false;
  }}
  bind:modal_open
  bind:delete_client />
 {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT: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">{$_('statsclients-are-being-loaded')}</p>
      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
    </div>
  {:then}
    {#if current_clients.length === 0}
      <StatsClientsEmptyState />
    {:else}
      <input
        type="search"
        bind:value={searchvalue}
        placeholder={$_('datatable.search')}
        aria-label={$_('datatable.search')}
        class="mb-4" />
      <div
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
        <table class="divide-y divide-gray-200 w-full">
          <thead class="bg-gray-50">
            <tr>
              <th
              scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              {$_('description')}
            </th>
            <th
              scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              {$_('prefix')}
            </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_clients as c}
              {#if Object.values(c)
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
                <tr data-rowid="station_{c.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">
                            {c.description}
                        </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">
                          {c.prefix}
                        </div>
                      </div>
                    </div>
                  </td>
                  {#if active_deletes[c.id] === true}
                    <td
                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button
                        on:click={() => {
                          active_deletes[c.id] = false;
                        }}
                        tabindex="0"
                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                      <button
                        on:click={() => {
                          StatsClientService.statsClientControllerRemove(c.id, false)
                            .then((resp) => {
                              current_clients = current_clients.filter((obj) => obj.id !== c.id);
                              Toastify({
                                text: $_('statsclient-deleted'),
                                duration: 500,
                                backgroundColor:
                                  'linear-gradient(to right, #00b09b, #96c93d)',
                              }).showToast();
                            })
                            .catch((err) => {
                              modal_open = true;
                              delete_client = c;
                            });
                        }}
                        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="/statsclients/{c.id}"
                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
                      {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:DELETE')}
                        <button
                          on:click={() => {
                            active_deletes[c.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}
--- a/src/components/statsclients/statsclients_empty.svg
+++ b/src/components/statsclients/statsclients_empty.svg
--- a/src/components/teams/AddTeamModal.svelte
+++ b/src/components/teams/AddTeamModal.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import {
    RunnerOrganizationService,
    RunnerTeamService,
@@ -43,7 +43,7 @@
    if (processed_last_submit === true) {
      processed_last_submit = false;
      const toast = Toastify({
-        text: $_('team-is-being-added'),
+        text: "Team is being added...",
        duration: -1,
      }).showToast();
      RunnerTeamService.runnerTeamControllerPost({
@@ -55,7 +55,7 @@
          modal_open = false;
          //
          Toastify({
-            text: $_('team-added'),
+            text: "Team added",
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
@@ -77,7 +77,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
--- a/src/components/teams/ConfirmTeamDeletion.svelte
+++ b/src/components/teams/ConfirmTeamDeletion.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import { RunnerTeamService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { createEventDispatcher } from "svelte";
@@ -16,7 +16,7 @@
    RunnerTeamService.runnerTeamControllerRemove(delete_team.id, true)
      .then((resp) => {
        Toastify({
-          text: $_('team-deleted'),
+          text: "Team deleted",
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
@@ -29,7 +29,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={cancelDelete}>
    <div
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@@ -26,9 +26,9 @@
  export let params;
  export let import_modal_open = false;
  $: delete_triggered = false;
-  $: save_enabled = data_changed && teamdata.parentGroup != null;
+  $: save_enabled = !data_changed && teamdata.parentGroup != null;
  $: data_loaded = false;
-  $: data_changed = !(JSON.stringify(teamdata) === JSON.stringify(original));
+  $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
  $: sponsoring_contracts_show = true;
  $: cards_show = true;
  $: certificates_show = true;
@@ -47,8 +47,6 @@
    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);
@@ -69,7 +67,7 @@
    RunnerTeamService.runnerTeamControllerRemove(original.id, false)
      .then((resp) => {
        Toastify({
-          text: $_('team-deleted'),
+          text: "Organization deleted",
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
@@ -83,7 +81,7 @@
  function submit() {
    if (data_loaded === true && save_enabled) {
      Toastify({
-        text: $_('updating-team'),
+        text: "updating team",
        duration: 2500,
      }).showToast();
      let postdata = teamdata;
@@ -94,7 +92,7 @@
          Object.assign(original, teamdata);
          original = original;
          Toastify({
-            text: $_('updated-team'),
+            text: "updated team",
            duration: 2500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
--- a/src/components/teams/TeamsOverview.svelte
+++ b/src/components/teams/TeamsOverview.svelte
@@ -57,7 +57,7 @@
        bind:value={searchvalue}
        placeholder={$_('datatable.search')}
        aria-label={$_('datatable.search')}
-        class="mb-4" />
+        class="gridjs-input gridjs-search-input mb-4" />
      <div class="h-12">
        <GenerateSponsoringContracts
          bind:sponsoring_contracts_show
--- a/src/components/tracks/AddTrackModal.svelte
+++ b/src/components/tracks/AddTrackModal.svelte
@@ -1,7 +1,7 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+  import { focusTrap } from "svelte-focus-trap";
  import { tracks as tracksstore } from "../../store.js";
  import { TrackService } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
@@ -75,7 +75,7 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
+    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      modal_open = false;
--- a/src/components/tracks/Tracks.svelte
+++ b/src/components/tracks/Tracks.svelte
@@ -34,7 +34,7 @@
        `[data-id="triggered_table_actions_${trackid}"]`
      ).parentNode.parentNode.parentNode;
      Toastify({
-        text: $_('track-is-being-updated'),
+        text: "Track is being updated...",
        duration: 500,
      }).showToast();
      TrackService.trackControllerPut(trackid, {
@@ -45,7 +45,7 @@
      })
        .then((r) => {
          Toastify({
-            text: $_('track-was-updated'),
+            text: "Track was updated!",
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            duration: 1000,
          }).showToast();
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipp Dormann	06a4428835	Merge pull request 'sync - 0.12.3' (#127 ) from dev into main Reviewed-on: #127 Reviewed-by: Nicolai Ort <info@nicolai-ort.com>	2021-04-08 17:28:29 +00:00
Nicolai Ort	bbad338ced	Merge pull request 'Merge Minor into main' (#113 ) from dev into main Reviewed-on: #113 Reviewed-by: Philipp Dormann <philipp@philippdormann.de>	2021-03-26 16:34:53 +00:00
`@@ -1,2 +1 @@`
	`public/env.sample.js`	`public/env.sample.js`
	`.pnpm-store`