🚀RELEASE v1.5.1

fix(dockerfile): AS casing
chore(deps): bump some
2024-11-21 09:46:27 +01:00 · 2024-11-21 09:45:51 +01:00 · 2024-11-21 09:45:39 +01:00 · 2024-11-21 09:40:32 +01:00 · 2024-11-21 09:33:22 +01:00 · 2024-11-21 09:32:58 +01:00
156 changed files with 14635 additions and 12870 deletions
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -1,6 +1,5 @@
 FROM mcr.microsoft.com/vscode/devcontainers/base:alpine-3.12
 RUN apk update
 RUN apk add --upgrade nodejs-current npm
-RUN npm i -g yarn rimraf
-RUN rimraf node_modules
-RUN yarn set version berry
+RUN npm i -g pnpm rimraf
+RUN rimraf node_modules
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,20 +1,20 @@
 {
-	"name": "Node.js",
-	"build": {
-		"dockerfile": "Dockerfile"
-	},
-	"settings": {
-		"terminal.integrated.shell.linux": "/bin/sh"
-	},
-	"extensions": [
-		"dbaeumer.vscode-eslint",
-		"2gua.rainbow-brackets",
-		"christian-kohler.npm-intellisense",
-		"remimarsal.prettier-now",
-		"svelte.svelte-vscode",
-		"lokalise.i18n-ally",
-		"fivethree.vscode-svelte-snippets",
-		"voorjaar.windicss-intellisense"
-	],
-	"postCreateCommand": "yarn && yarn dev --open"
-}
+  "name": "Node.js",
+  "build": {
+    "dockerfile": "Dockerfile"
+  },
+  "settings": {
+    "terminal.integrated.shell.linux": "/bin/sh"
+  },
+  "extensions": [
+    "dbaeumer.vscode-eslint",
+    "2gua.rainbow-brackets",
+    "christian-kohler.npm-intellisense",
+    "remimarsal.prettier-now",
+    "svelte.svelte-vscode",
+    "lokalise.i18n-ally",
+    "fivethree.vscode-svelte-snippets",
+    "voorjaar.windicss-intellisense"
+  ],
+  "postCreateCommand": "yarn && yarn dev --open"
+}
--- a/.drone.yml
+++ b/.drone.yml
@@ -1,101 +0,0 @@
---
-kind: secret
-name: docker_username
-get:
-  path: odit-registry-builder
-  name: username
-
---
-kind: secret
-name: docker_password
-get:
-  path: odit-registry-builder
-  name: password
-
---
-kind: secret
-name: git_ssh
-get:
-  path: odit-git-bot
-  name: sshkey
-
---
-kind: secret
-name: npm_url
-get:
-  path: odit-npm-cache
-  name: url
-
---
-kind: pipeline
-type: kubernetes
-name: build:dev
-
-steps:
-  - name: run full license export
-    depends_on: ["clone"]
-    image: registry.odit.services/hub/library/node:19.7.0-alpine3.16
-    commands:
-      - npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8
-      - pnpm i
-      - 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
-    settings:
-      branch: dev
-      commit: true
-      commit_message: new license file version [CI SKIP]
-      author_email: bot@odit.services
-      remote: git@git.odit.services:lfk/frontend.git
-      ssh_key:
-        from_secret: git_ssh
-  - name: build dev
-    depends_on: ["clone"]
-    image: registry.odit.services/library/drone-kaniko
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      build_args:
-        - NPM_REGISTRY_URL:
-          from_secret: npm_url
-      repo: lfk/frontend
-      tags:
-        - dev
-      cache: true
-      registry: registry.odit.services
-trigger:
-  branch:
-    - dev
-  event:
-    - push
-
---
-kind: pipeline
-type: kubernetes
-name: build:tags
-steps:
-  - name: build $DRONE_TAG
-    depends_on: ["clone"]
-    image: registry.odit.services/library/drone-kaniko
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      build_args:
-        - NPM_REGISTRY_URL:
-          from_secret: npm_url
-      repo: lfk/frontend
-      tags:
-        - "${DRONE_TAG}"
-      cache: true
-      registry: registry.odit.services
-trigger:
-  event:
-  - tag
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,14 +1,12 @@
 {
-    "recommendations": [
-        "2gua.rainbow-brackets",
-        "christian-kohler.npm-intellisense",
-        "remimarsal.prettier-now",
-        "svelte.svelte-vscode",
-        "lokalise.i18n-ally",
-        "fivethree.vscode-svelte-snippets",
-        "voorjaar.windicss-intellisense"
-    ],
-    "unwantedRecommendations": [
-        "antfu.i18n-ally"
-    ]
-}
+  "recommendations": [
+    "2gua.rainbow-brackets",
+    "christian-kohler.npm-intellisense",
+    "remimarsal.prettier-now",
+    "svelte.svelte-vscode",
+    "lokalise.i18n-ally",
+    "fivethree.vscode-svelte-snippets",
+    "voorjaar.windicss-intellisense"
+  ],
+  "unwantedRecommendations": ["antfu.i18n-ally"]
+}
--- a/.vscode/i18n-ally-custom-framework.yml
+++ b/.vscode/i18n-ally-custom-framework.yml
@@ -1,7 +1,7 @@
 languageIds:
-    - javascript
-    - svelte
-    - html
+  - javascript
+  - svelte
+  - html
 monopoly: false
 refactorTemplates:
-    - "{$_('$1')}"
+  - "{$_('$1')}"
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-    "i18n-ally.localesPaths": "src/locales",
-    "i18n-ally.keystyle": "nested",
-    "windicss.enableCodeFolding": false,
-}
+  "i18n-ally.localesPaths": "src/locales",
+  "i18n-ally.keystyle": "nested",
+  "windicss.enableCodeFolding": false
+}
--- a/.woodpecker/build.yml
+++ b/.woodpecker/build.yml
@@ -0,0 +1,42 @@
+steps:
+  - name: run full license export
+    image: registry.odit.services/hub/library/node:19.7.0-alpine3.16
+    commands:
+      - npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8
+      - pnpm i
+      - pnpm licenses:export
+    secrets:
+      - source: odit-npm-cache-url
+        target: NPM_REGISTRY_URL
+  - name: push new licenses file to repo
+    image: appleboy/drone-git-push
+    settings:
+      branch: dev
+      commit: true
+      commit_message: new license file version [CI SKIP]
+      author_email: bot@odit.services
+      remote: git@git.odit.services:lfk/frontend.git
+      ssh_key:
+        from_secret: odit-git-bot-sshkey
+  - name: build edge
+    image: woodpeckerci/plugin-docker-buildx
+    settings:
+      repo: registry.odit.services/odit/website
+      tags:
+        - edge
+      registry: registry.odit.services
+      platforms: linux/amd64,linux/arm64
+      cache_from: registry.odit.services/odit/website:edge
+      username:
+        from_secret: odit-registry-builder-username
+      password:
+        from_secret: odit-registry-builder-password
+    secrets:
+      - source: odit-npm-cache-url
+        target: NPM_REGISTRY_URL
+
+when:
+  event:
+    - push
+  branch:
+    - dev
--- a/.woodpecker/release.yml
+++ b/.woodpecker/release.yml
@@ -0,0 +1,20 @@
+steps:
+  - name: build tag
+    image: woodpeckerci/plugin-docker-buildx
+    settings:
+      repo: registry.odit.services/lfk/frontend
+      tags:
+        - "${CI_COMMIT_TAG}"
+      registry: registry.odit.services
+      platforms: linux/amd64,linux/arm64
+      cache_from: registry.odit.services/lfk/frontend:latest
+      username:
+        from_secret: odit-registry-builder-username
+      password:
+        from_secret: odit-registry-builder-password
+    secrets:
+      - source: odit-npm-cache-url
+        target: NPM_REGISTRY_URL
+when:
+  event:
+    - tag
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,309 @@

 All notable changes to this project will be documented in this file. Dates are displayed in UTC.

+#### [1.5.1](https://git.odit.services/lfk/frontend/compare/1.5.0...1.5.1)
+
+- chore(deps): pnpm@9 [`35bec9f`](https://git.odit.services/lfk/frontend/commit/35bec9fe584b93cd52e8bab4e469713468a67f70)
+- chore(deps): bump some [`8fae1fb`](https://git.odit.services/lfk/frontend/commit/8fae1fb6b3e033f789d2568cbd2640c0d163dc53)
+- fix(scanstations): CopyScanStationTokenModal open after create [`372fa11`](https://git.odit.services/lfk/frontend/commit/372fa110ec402dae166a302f2209c79353983148)
+- fix(config): add explicit window.config [`91d2f46`](https://git.odit.services/lfk/frontend/commit/91d2f46b934bcba1429bd1d96e772c25c42a3e28)
+- fix(dockerfile): AS casing [`50e81a6`](https://git.odit.services/lfk/frontend/commit/50e81a6cb5773381e153cbec3bed7db820ced84a)
+- refactor(scanstations/CopyScanStationTokenModal): drop dispatch [`a5e72a1`](https://git.odit.services/lfk/frontend/commit/a5e72a18e368b5a7ee7b4e1894de613ecb767f28)
+- chore(deps): node:23.2.0 [`93d67bd`](https://git.odit.services/lfk/frontend/commit/93d67bdba90a67b45d8895d9facaf66e908d53d6)
+- fix(tracks/AddTrackModal): i18n [`c60bae4`](https://git.odit.services/lfk/frontend/commit/c60bae45334c2aa90d8931da07691c196469da46)
+- fix: tailwind config [`43ac878`](https://git.odit.services/lfk/frontend/commit/43ac878d44b556c6d7811610f6fe0c9a5eff305f)
+
+#### [1.5.0](https://git.odit.services/lfk/frontend/compare/1.4.13...1.5.0)
+
+> 20 November 2024
+
+- feat(ci)!: Switch to woodpecker [`fb8206f`](https://git.odit.services/lfk/frontend/commit/fb8206ff130f4f65dcf619a2a786e7d5895b77a1)
+- 🚀RELEASE v1.5.0 [`ceabd06`](https://git.odit.services/lfk/frontend/commit/ceabd06a4319c3c9ffab680f909730d5bd789540)
+- fix(components): Add missing toast imports [`9bfc0c5`](https://git.odit.services/lfk/frontend/commit/9bfc0c5338933e832d5df50457c7978c026d8df6)
+
+#### [1.4.13](https://git.odit.services/lfk/frontend/compare/1.4.12...1.4.13)
+
+> 31 July 2023
+
+- 🚀RELEASE v1.4.13 [`dceb0ef`](https://git.odit.services/lfk/frontend/commit/dceb0ef46197dc56e29c5f52a5bd8f9fe9b70b27)
+- Show donations as euro in export [`88bc198`](https://git.odit.services/lfk/frontend/commit/88bc1982cab4481e2e9245f81eff27e095b66a0f)
+- new license file version [CI SKIP] [`6193eff`](https://git.odit.services/lfk/frontend/commit/6193eff38e1a9d5726bc7d572ab36b921de843d0)
+
+#### [1.4.12](https://git.odit.services/lfk/frontend/compare/1.4.11...1.4.12)
+
+> 18 May 2023
+
+- 🚀RELEASE v1.4.12 [`65f1d22`](https://git.odit.services/lfk/frontend/commit/65f1d222050b0dec81fc847c1921b6135a55ce50)
+- fix(donation/payment): Funny javascript number to float conversion where integers were needed [`d867c08`](https://git.odit.services/lfk/frontend/commit/d867c08aba234d3a7fe9e2311d37dc5e96fc2afc)
+- new license file version [CI SKIP] [`08642d7`](https://git.odit.services/lfk/frontend/commit/08642d7618faeae31f0acfe776642c9fa156e5ff)
+
+#### [1.4.11](https://git.odit.services/lfk/frontend/compare/1.4.10...1.4.11)
+
+> 10 May 2023
+
+- chore(deps): Lockfile [`f77460b`](https://git.odit.services/lfk/frontend/commit/f77460bb0c8ce6d0f3d83a077017d5fc7bf55af7)
+- 🚀RELEASE v1.4.11 [`373484c`](https://git.odit.services/lfk/frontend/commit/373484c2424bea7ae0d70d342e0ae2076aab1b6a)
+- feat(orgs): Show total distance [`574e0dc`](https://git.odit.services/lfk/frontend/commit/574e0dcb051305bde2fc76d8456a35baec0cf309)
+- chore(deps): More bumps [`7b19a0a`](https://git.odit.services/lfk/frontend/commit/7b19a0aa08bb6c89c51d27c0d05777e8fcfdad17)
+
+#### [1.4.10](https://git.odit.services/lfk/frontend/compare/1.4.9...1.4.10)
+
+> 10 May 2023
+
+- chore(deps): Bumped svelte-table [`29a2854`](https://git.odit.services/lfk/frontend/commit/29a2854671b3af5b85ea96d050a9076f47b6575d)
+- 🚀RELEASE v1.4.10 [`c3e9c27`](https://git.odit.services/lfk/frontend/commit/c3e9c27cd3d4b916f1661d4958cabab038918587)
+- chore(deps): Pin and bump [`8e6786e`](https://git.odit.services/lfk/frontend/commit/8e6786e72227b3f07cc805f0957d5b7fd123ec13)
+- chore(deps): Bumped scanclientjs [`6ad4056`](https://git.odit.services/lfk/frontend/commit/6ad40564e3e342046f6ee19fab9e455ec3bbff9b)
+
+#### [1.4.9](https://git.odit.services/lfk/frontend/compare/1.4.8...1.4.9)
+
+> 9 May 2023
+
+- 🚀RELEASE v1.4.9 [`776973b`](https://git.odit.services/lfk/frontend/commit/776973bfe9b34c26a1c80d5e458cc2644dd9036b)
+- Changed the in table replacement method [`d9a47f8`](https://git.odit.services/lfk/frontend/commit/d9a47f882c1c6bcf98ef85d50d70c010d54b326e)
+- Fixed empty return [`6025e43`](https://git.odit.services/lfk/frontend/commit/6025e43baa8516657a60a1de9a82c2189221c6ac)
+
+#### [1.4.8](https://git.odit.services/lfk/frontend/compare/1.4.7...1.4.8)
+
+> 9 May 2023
+
+- Switched donor loading to non-paginated [`59fe2df`](https://git.odit.services/lfk/frontend/commit/59fe2dfabb224863876c4db31a965c34a51a9369)
+- 🚀RELEASE v1.4.8 [`4235758`](https://git.odit.services/lfk/frontend/commit/4235758a6d1499715287d6ab193cc87c68d5742e)
+
+#### [1.4.7](https://git.odit.services/lfk/frontend/compare/1.4.6...1.4.7)
+
+> 4 May 2023
+
+- Paginated modal data loading [`a8a7711`](https://git.odit.services/lfk/frontend/commit/a8a771114df6eb57d5b1d5497a5be49e619d4102)
+- Moved loading to onmount [`4e0a2c8`](https://git.odit.services/lfk/frontend/commit/4e0a2c83015bde5e360c5fb2c0babbeaa03dc2b5)
+- 🚀RELEASE v1.4.7 [`6364536`](https://git.odit.services/lfk/frontend/commit/6364536dcd840c71f7cb6afb31bbc4f160ac4f73)
+
+#### [1.4.6](https://git.odit.services/lfk/frontend/compare/1.4.5...1.4.6)
+
+> 4 May 2023
+
+- 🚀RELEASE v1.4.6 [`b6fed92`](https://git.odit.services/lfk/frontend/commit/b6fed92a176af1c975484d9146ee5634e0031401)
+- fix(donor/details): don't load donations [`a2ff5b8`](https://git.odit.services/lfk/frontend/commit/a2ff5b8a142ce4e6b8876f64935f9787ec44a51e)
+- fix(donor/detail): Set email to null to avoid vaidation errors [`97b57ae`](https://git.odit.services/lfk/frontend/commit/97b57aeb0cc9058542a36dea9c8b2852169c250f)
+- fix(donor/detail): Set phone to null to avoid vaidation errors [`e25ed1f`](https://git.odit.services/lfk/frontend/commit/e25ed1fff9b200605d5d2b78238b774ec7289aaa)
+
+#### [1.4.5](https://git.odit.services/lfk/frontend/compare/1.4.4...1.4.5)
+
+> 4 May 2023
+
+- Revert "revert: buggy pagination" [`dacb2f8`](https://git.odit.services/lfk/frontend/commit/dacb2f8ace373f6594fc64af133971af053f00c0)
+- fix: Removed dynamic pagesize adjustments [`803d64c`](https://git.odit.services/lfk/frontend/commit/803d64c78caa570d31d6055e70e2d2af6834f04b)
+- 🚀RELEASE v1.4.5 [`0284f18`](https://git.odit.services/lfk/frontend/commit/0284f18beb8b24d4d4d071eca13bc5868666232c)
+
+#### [1.4.4](https://git.odit.services/lfk/frontend/compare/1.4.3...1.4.4)
+
+> 4 May 2023
+
+- 🚀RELEASE v1.4.4 [`b7a5396`](https://git.odit.services/lfk/frontend/commit/b7a53960e5f37ae089d77bc11668d917145e2abb)
+- fix(AddDonationModal): missing toast dismiss on success distance donation [`66f1e6b`](https://git.odit.services/lfk/frontend/commit/66f1e6b4fe1350ee79673a0aff97e36f44179c92)
+
+#### [1.4.3](https://git.odit.services/lfk/frontend/compare/1.4.2...1.4.3)
+
+> 4 May 2023
+
+- revert: buggy pagination [`b264864`](https://git.odit.services/lfk/frontend/commit/b2648645e8fc05f8742ecfc592557f954261671b)
+- 🚀RELEASE v1.4.3 [`33166bf`](https://git.odit.services/lfk/frontend/commit/33166bfafcffb9d86dfc7dfcd2cb8ba5c85da7e7)
+
+#### [1.4.2](https://git.odit.services/lfk/frontend/compare/1.4.1...1.4.2)
+
+> 4 May 2023
+
+- 🚀RELEASE v1.4.2 [`53e3ddb`](https://git.odit.services/lfk/frontend/commit/53e3ddb751c1150a4640ae6302e4df5b88cedc51)
+- fix(GenerateRunnerCertificates): missing toast import [`d49f545`](https://git.odit.services/lfk/frontend/commit/d49f545d94acabc0c96860f212466b7a4cbe7dab)
+- fix(DonorDetail): missing toast import [`edc2dca`](https://git.odit.services/lfk/frontend/commit/edc2dcab92c3cace05335a283a849c3c978ec8ec)
+
+#### [1.4.1](https://git.odit.services/lfk/frontend/compare/1.4.0...1.4.1)
+
+> 1 May 2023
+
+- 🚀RELEASE v1.4.1 [`3b98c99`](https://git.odit.services/lfk/frontend/commit/3b98c99b72f24b8552e2b2334f13622bdf6ef90d)
+- Fixed translation [`1da775a`](https://git.odit.services/lfk/frontend/commit/1da775a09b8be90a49e06aed16df917d221ee989)
+
+#### [1.4.0](https://git.odit.services/lfk/frontend/compare/1.3.4...1.4.0)
+
+> 1 May 2023
+
+- formatting, full migration to svelte-french-toast [`46d076a`](https://git.odit.services/lfk/frontend/commit/46d076af9d65ebb11504a7e6879753780b69db2c)
+- drop gridjs (TracksOverview Actions will need to be re-implemented) [`8b92230`](https://git.odit.services/lfk/frontend/commit/8b922309b990c42fcfd57b939abacf4d8c99e638)
+- 🚀RELEASE v1.4.0 [`f0475bd`](https://git.odit.services/lfk/frontend/commit/f0475bd9a08d99f58b4d3dce584cd6a3a8630e56)
+- Added track update toasts [`103ad57`](https://git.odit.services/lfk/frontend/commit/103ad57ddc8a35ff971bef44053a9e32a7b68233)
+- drop legacy ThFilter components [`bc4ac0f`](https://git.odit.services/lfk/frontend/commit/bc4ac0f3160571cd412361de82ef4555ee068677)
+- text cleanups, StatCard improvements [`a2f9dbb`](https://git.odit.services/lfk/frontend/commit/a2f9dbbe014b5ae9705e8e7b6944f7f7c576d22e)
+- Updated the track editing switch logic [`a953349`](https://git.odit.services/lfk/frontend/commit/a953349c1478b912e08f88c1fb70c74af0bc9bbb)
+- chore(deps): bump all [`6154ca7`](https://git.odit.services/lfk/frontend/commit/6154ca7ddfb8b6ad0e1644b8c6756d51f2fbb858)
+- svelte-french-toast + translations [`8fb1e0c`](https://git.odit.services/lfk/frontend/commit/8fb1e0ca0f51c90270fb5e1a05be5e8273238a2c)
+- Implemented delete for new track table [`081a141`](https://git.odit.services/lfk/frontend/commit/081a141218ab7de2620f7b06083697368d44bf6c)
+- striped tabled [`5e82638`](https://git.odit.services/lfk/frontend/commit/5e82638f3594298d0542cd03d5d6aa80aa383b9d)
+- add svelte-french-toast [`56c3365`](https://git.odit.services/lfk/frontend/commit/56c33656562079bb773491c8aecedea3f6acdb74)
+- Editing update logic [`2856c5c`](https://git.odit.services/lfk/frontend/commit/2856c5c1b786f732b0db80324ea74513e8be186d)
+- monospace fonts for IDs in overviews [`811f5d5`](https://git.odit.services/lfk/frontend/commit/811f5d575496be43e5e48197813112d35e79a81f)
+- Full track table editing [`e9cf2bc`](https://git.odit.services/lfk/frontend/commit/e9cf2bc8498fc02332059880d7a6994348165b76)
+- drop propfilepic [`6952b87`](https://git.odit.services/lfk/frontend/commit/6952b8727f06c520cb60a00acfde1dff52d4f345)
+- fix: scan laptime formatting [`01b415d`](https://git.odit.services/lfk/frontend/commit/01b415d4cb147879e959e86d053dc02cae8cfdc9)
+- Dynamicly adjust page size for large datasets [`064197d`](https://git.odit.services/lfk/frontend/commit/064197d2226da772907099ecf96c3ab984c9af59)
+- ScansOverview full month formatting [`69ec7fc`](https://git.odit.services/lfk/frontend/commit/69ec7fc1fecc67751643ce35f22925f3132b8792)
+- translations [`8be40e2`](https://git.odit.services/lfk/frontend/commit/8be40e2d80336f72989deb3e5e20a7cd8f7fb6f1)
+- drop middlename for admin users [`daeea24`](https://git.odit.services/lfk/frontend/commit/daeea24e0e99b8a95665167d62d0ee830bdea3de)
+- add missing striped tables [`8eaad82`](https://git.odit.services/lfk/frontend/commit/8eaad8219a109fa8b4bd1f719d7079bff8b7c041)
+- translation cleanups [`663cb29`](https://git.odit.services/lfk/frontend/commit/663cb29ccde4fa15317f764147187c5b82e748d5)
+- Added edit button for trackscans [`175d867`](https://git.odit.services/lfk/frontend/commit/175d86745fb9bfce03fe5f5c638b52467b688938)
+- a11y cleanup [`6bc92f4`](https://git.odit.services/lfk/frontend/commit/6bc92f4a080f0c506793866d99c97ccb87ba15b8)
+- a11y fix OrgOverview [`0fca035`](https://git.odit.services/lfk/frontend/commit/0fca0352c59cdccb99716355591f88ff573ac949)
+- README update [`d32eb82`](https://git.odit.services/lfk/frontend/commit/d32eb8266b0e9daec4b9ba52832d5e5118abec45)
+- a11y improvements [`4c81e3c`](https://git.odit.services/lfk/frontend/commit/4c81e3c43218be4b23d137b386520c71d19f5844)
+- cleanup legacy TeamsOverview text [`6c1a707`](https://git.odit.services/lfk/frontend/commit/6c1a70716665d57f1326c4475030ae15a7c459e0)
+- fix: a11y in About page [`e904ab0`](https://git.odit.services/lfk/frontend/commit/e904ab0b8494ff57579c8954a8eb713fc223a88f)
+- improved login [`dbaf857`](https://git.odit.services/lfk/frontend/commit/dbaf85799ac9e56d8760450cfe357df016f10da7)
+- chore(deps): node:20.0.0 [`81d4da6`](https://git.odit.services/lfk/frontend/commit/81d4da655099100c631d450caafbf7039fa20592)
+- cleanup MainDashContent [`763a01a`](https://git.odit.services/lfk/frontend/commit/763a01af09b36004ceccfa6b182b7dc5ea070128)
+- Updated store directory for dockerfil [`bbf8170`](https://git.odit.services/lfk/frontend/commit/bbf8170cb98410bbcd8dc51bb122beee615312ee)
+- Bump dockerfile node [`15d8afe`](https://git.odit.services/lfk/frontend/commit/15d8afefbb6b697a6cbdb2d803a7d8edcea4e650)
+- Pinned config files used [`f3bcc01`](https://git.odit.services/lfk/frontend/commit/f3bcc01685f3ea3ef6786a8e7d9a5b1a4f829d53)
+- Switched build image node version [`9523860`](https://git.odit.services/lfk/frontend/commit/95238606d52ca58985b91ea03f7e9f490fdf2310)
+- Merge pull request 'next' (#180) from next into dev [`8c628f2`](https://git.odit.services/lfk/frontend/commit/8c628f23dcfb1f6f120d19bb3ecdb422ca5093cd)
+- improved StatCard readability [`7d82536`](https://git.odit.services/lfk/frontend/commit/7d8253618b18719549824ed19e024b8828c9df06)
+- new license file version [CI SKIP] [`38a6650`](https://git.odit.services/lfk/frontend/commit/38a665024eb1df3eba66c61d8cb3199000b629e5)
+
+#### [1.3.4](https://git.odit.services/lfk/frontend/compare/1.3.3...1.3.4)
+
+> 19 April 2023
+
+- 🚀RELEASE v1.3.4 [`e7b2c64`](https://git.odit.services/lfk/frontend/commit/e7b2c647981111650b3e2e471f4b5195fa6b65b6)
+- 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)
--- a/9
+++ b/9
@@ -1,15 +1,16 @@
-FROM registry.odit.services/hub/library/node:19.7.0-alpine3.16 as build
+FROM registry.odit.services/hub/library/node:23.2.0-alpine3.20 AS build
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app

-COPY package.json pnpm-lock.yaml *.config.js *.config.cjs index.html ./
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8 && pnpm i
+COPY package.json pnpm-lock.yaml vite.config.js tailwind.config.cjs postcss.config.cjs index.html ./
+RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@9
+RUN mkdir /pnpm && pnpm config set store-dir /pnpm && pnpm i

 COPY src ./src
 COPY public ./public
 RUN pnpm build

 # final image
-FROM registry.odit.services/library/nginx-brotli:3.15 as final
+FROM registry.odit.services/library/nginx-brotli:3.15 AS final
 COPY --from=build /app/dist /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/nginx.conf
--- a/README.md
+++ b/README.md
@@ -1,22 +1,27 @@
 # @odit/lfk-frontend

 ## ✒️ Overview
+
 This is an API client for [https://git.odit.services/lfk/backend](@lfk/backend)
- WebApp built with [Svelte](https://svelte.dev), [WindiCSS](https://windicss.org/) (to compile [TailwindCSS](https://tailwindcss.com/)) and [Vite](https://vitejs.dev).

 This application is intended for use by admin users/ members only.

 ## 🚀 Getting Started
+
 ```
-yarn
+pnpm i
 ```
+
 ## Development
+
 ```
-yarn dev
+pnpm dev
 /
-yarn dev --open
+pnpm dev --open
 ```
+
 ## Build
+
+```
+pnpm build
 ```
-yarn build
-```
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,8 +1,8 @@
 version: "3"
 services:
-    httpd:
-        build: .
-        volumes:
-            - ./public/env.sample.js:/usr/share/nginx/html/env.js
-        ports:
-            - 4050:80
+  httpd:
+    build: .
+    volumes:
+      - ./public/env.sample.js:/usr/share/nginx/html/env.js
+    ports:
+      - 4050:80
--- a/index.html
+++ b/index.html
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="/favicon.png" />
-  <link rel="manifest" href="/manifest.webmanifest">
-  <link rel="apple-touch-icon" href="/lfk-logo.png">
-  <meta name="theme-color" content="#FFFFFF">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="Lauf Für Kaya! - Admin" />
-  <title>Lauf für Kaya! - Admin</title>
-</head>
-
-<body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.18.0-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>
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.png" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/lfk-logo.png" />
+    <meta name="theme-color" content="#FFFFFF" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Lauf Für Kaya! - Admin" />
+    <title>Lauf für Kaya! - Admin</title>
+  </head>
+
+  <body>
+    <span style="display: none; visibility: hidden" id="buildinfo"
+      >RELEASE_INFO-1.5.1-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>
+  </body>
+</html>
--- a/order.js
+++ b/order.js
@@ -1,16 +1,18 @@
-import fs from 'fs'
+import fs from "fs";
 // get all language files
-const files = fs.readdirSync('./src/locales/');
+const files = fs.readdirSync("./src/locales/");
 files.forEach((f) => {
-	// read file as object
-	const unordered = JSON.parse(fs.readFileSync(`src/locales/${f}`));
-	// order object by keys alpabetically A-Z
-	const ordered = Object.keys(unordered).sort().reduce((obj, key) => {
-		obj[key] = unordered[key];
-		return obj;
-	}, {});
-	// format output as json for commit diff compatibility
-	const out = JSON.stringify(ordered, 0, 4);
-	// write output file
-	fs.writeFileSync(`src/locales/${f}`, out);
+  // read file as object
+  const unordered = JSON.parse(fs.readFileSync(`src/locales/${f}`));
+  // order object by keys alpabetically A-Z
+  const ordered = Object.keys(unordered)
+    .sort()
+    .reduce((obj, key) => {
+      obj[key] = unordered[key];
+      return obj;
+    }, {});
+  // format output as json for commit diff compatibility
+  const out = JSON.stringify(ordered, 0, 4);
+  // write output file
+  fs.writeFileSync(`src/locales/${f}`, out);
 });
--- a/package.json
+++ b/package.json
@@ -1,60 +1,63 @@
 {
-	"name": "@odit/lfk-frontend",
-	"version": "0.18.0",
-	"type": "module",
-	"scripts": {
-		"i18n-order": "node order.js",
-		"dev": "vite",
-		"build": "vite build",
-		"release": "release-it",
-		"licenses:export": "license-exporter --json -o public"
-	},
-	"license": "CC-BY-NC-SA-4.0",
-	"devDependencies": {
-		"@odit/license-exporter": "0.0.12",
-		"@sveltejs/vite-plugin-svelte": "2.0.4",
-		"auto-changelog": "2.4.0",
-		"autoprefixer": "10.4.14",
-		"postcss": "8.4.21",
-		"release-it": "15.10.1",
-		"svelte-select": "3.17.0",
-		"tailwindcss": "3.3.1",
-		"vite": "4.2.1"
-	},
-	"release-it": {
-		"git": {
-			"commit": true,
-			"requireCleanWorkingDir": false,
-			"commitMessage": "🚀RELEASE v${version}",
-			"push": false,
-			"tag": true,
-			"tagName": null,
-			"tagAnnotation": "v${version}"
-		},
-		"npm": {
-			"publish": false
-		},
-		"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": "0.14.3",
-		"@paralleldrive/cuid2": "^2.2.0",
-		"@tanstack/svelte-table": "^8.8.5",
-		"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"
-	}
+  "name": "@odit/lfk-frontend",
+  "version": "1.5.1",
+  "type": "module",
+  "scripts": {
+    "i18n-order": "node order.js",
+    "dev": "vite",
+    "format": "prettier --write --plugin-search-dir=. .",
+    "build": "vite build",
+    "release": "release-it",
+    "licenses:export": "license-exporter --json -o public"
+  },
+  "license": "CC-BY-NC-SA-4.0",
+  "devDependencies": {
+    "@odit/license-exporter": "0.2.0",
+    "@sveltejs/vite-plugin-svelte": "2.1.1",
+    "auto-changelog": "2.5.0",
+    "autoprefixer": "10.4.20",
+    "postcss": "8.4.49",
+    "prettier": "3.3.3",
+    "prettier-plugin-svelte": "3.2.8",
+    "release-it": "17.10.0",
+    "svelte-select": "3.17.0",
+    "tailwindcss": "3.4.15",
+    "vite": "4.3.3"
+  },
+  "release-it": {
+    "git": {
+      "commit": true,
+      "requireCleanWorkingDir": false,
+      "commitMessage": "🚀RELEASE v${version}",
+      "push": true,
+      "tag": true,
+      "tagName": null,
+      "tagAnnotation": "v${version}"
+    },
+    "npm": {
+      "publish": false
+    },
+    "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.3",
+    "@paralleldrive/cuid2": "2.2.2",
+    "@tanstack/svelte-table": "8.9.1",
+    "bwip-js": "3.4.0",
+    "check-password-strength": "2.0.10",
+    "csvtojson": "2.0.10",
+    "localforage": "1.10.0",
+    "marked": "4.3.0",
+    "svelte": "3.58.0",
+    "svelte-french-toast": "1.0.4-beta.0",
+    "svelte-i18n": "3.6.0",
+    "tinro": "0.6.12",
+    "validator": "13.9.0",
+    "xlsx": "0.18.5"
+  },
+  "volta": {
+    "node": "20.0.0"
+  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
--- a/public/env.sample.js
+++ b/public/env.sample.js
@@ -1,9 +1,11 @@
 const config = {
-	baseurl: 'http://localhost:4010',
-	baseurl_documentserver: 'http://localhost:4010/documents',
-	documentserver_key: 'NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe',
+	baseurl: "http://localhost:4010",
+	baseurl_documentserver: "http://localhost:4010/documents",
+	documentserver_key:
+		"NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe",
 	// optional
-	default_username: 'demo',
-	default_password: 'demo',
-	prefersHashRouting: true
+	default_username: "demo",
+	default_password: "demo",
+	prefersHashRouting: true,
 };
+window.config = config;
--- a/public/licenses.json
+++ b/public/licenses.json
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -1,34 +1,39 @@
 {
-	"name": "Lauf für Kaya! - Admin",
-	"short_name": "LfK!Admin",
-	"start_url": "/?utm_source=pwa",
-	"orientation": "portrait-primary",
-	"display": "standalone",
-	"background_color": "#fff",
-	"theme_color": "#fff",
-	"description": "Lauf für Kaya! - Admin",
-	"shortcuts": [
-		{
-			"name": "Users",
-			"url": "/users/?utm_source=pwa"
-		}
-	],
-	"icons": [
-		{
-			"src": "/favicon.png",
-			"sizes": "48x48",
-			"type": "image/png"
-		},
-		{
-			"src": "/favicon.png",
-			"sizes": "144x144",
-			"type": "image/png"
-		},
-		{
-			"src": "/lfk-logo.png",
-			"sizes": "1540x144",
-			"type": "image/png"
-		},
-		{ "src": "/maskable_icon_x1.png", "sizes": "750x750", "type": "image/png", "purpose": "any maskable" }
-	]
+  "name": "Lauf für Kaya! - Admin",
+  "short_name": "LfK!Admin",
+  "start_url": "/?utm_source=pwa",
+  "orientation": "portrait-primary",
+  "display": "standalone",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "description": "Lauf für Kaya! - Admin",
+  "shortcuts": [
+    {
+      "name": "Users",
+      "url": "/users/?utm_source=pwa"
+    }
+  ],
+  "icons": [
+    {
+      "src": "/favicon.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/lfk-logo.png",
+      "sizes": "1540x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/maskable_icon_x1.png",
+      "sizes": "750x750",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
 }
--- a/public/privacy_en.md
+++ b/public/privacy_en.md
@@ -1 +1 @@
-Nostrud tempor dolor aute ea excepteur aute mollit elit eiusmod exercitation. Magna laborum pariatur adipisicing pariatur cupidatat exercitation duis aliquip pariatur sint exercitation deserunt labore. Consectetur id laboris dolore nostrud do velit ipsum. Eu laboris velit do commodo ad ea sint ex cillum. Cillum ipsum qui eiusmod laborum mollit sunt dolore incididunt. Cillum sunt culpa veniam voluptate et qui ut magna anim occaecat ut mollit dolor. Duis irure proident eu incididunt dolore sunt nisi aute dolore amet eu fugiat laboris quis.
+Nostrud tempor dolor aute ea excepteur aute mollit elit eiusmod exercitation. Magna laborum pariatur adipisicing pariatur cupidatat exercitation duis aliquip pariatur sint exercitation deserunt labore. Consectetur id laboris dolore nostrud do velit ipsum. Eu laboris velit do commodo ad ea sint ex cillum. Cillum ipsum qui eiusmod laborum mollit sunt dolore incididunt. Cillum sunt culpa veniam voluptate et qui ut magna anim occaecat ut mollit dolor. Duis irure proident eu incididunt dolore sunt nisi aute dolore amet eu fugiat laboris quis.
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,4 @@
 <script>
-  import "toastify-js/src/toastify.css";
-  import "gridjs/dist/theme/mermaid.css";
  import { Route, router } from "tinro";
  router.subscribe((routeInfo) => {
    window.scrollTo(0, 0);
@@ -24,11 +22,10 @@
    name: "lfk_admin",
    version: 1.0,
    storeName: "lfk_admin",
-    description: "LfK! admin dashbaord",
+    description: "LfK! admin dashboard",
  });
  window.onunhandledrejection = (event) => {
    if (event.reason.toString() == "Error: Unauthorized") {
-      console.log("Found 1");
      localForage.clear();
      location.replace("/");
    }
@@ -72,29 +69,29 @@
  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";
+  import StatsClients from "./components/statsclients/StatsClients.svelte";
+  import StatsClientDetail from "./components/statsclients/StatsClientDetail.svelte";
  store.init();
 </script>

 <Route>
-  {#if $router.path === '/forgot_password'}
+  {#if $router.path === "/forgot_password"}
    <Route path="/forgot_password">
      <ForgotPassword />
    </Route>
-  {:else if $router.path.includes('/reset')}
+  {:else if $router.path.includes("/reset")}
    <Route path="/reset/:resetkey" let:params>
      <ResetPassword {params} />
    </Route>
-  {:else if $router.path === '/about'}
+  {:else if $router.path === "/about"}
    <Route path="/about">
      <About />
    </Route>
-  {:else if $router.path === '/imprint'}
+  {:else if $router.path === "/imprint"}
    <Route path="/imprint">
      <Imprint />
    </Route>
-  {:else if $router.path === '/privacy'}
+  {:else if $router.path === "/privacy"}
    <Route path="/privacy">
      <Privacy />
    </Route>
--- a/src/components/auth/ForgotPassword.svelte
+++ b/src/components/auth/ForgotPassword.svelte
@@ -1,28 +1,22 @@
 <script>
-  import { ApiError, AuthService } from "@odit/lfk-client-js";
+  import { AuthService } from "@odit/lfk-client-js";
+  import toast from "svelte-french-toast";
  import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
-  import "toastify-js/src/toastify.css";
  import isEmail from "validator/es/lib/isEmail";

  let reset_mail_sent = false;
  let usersEmail = "";
  function reset() {
    if (isEmail(usersEmail)) {
+      toast.loading($_("mail-validation-in-progress"));
      AuthService.authControllerGetResetToken("de", { email: usersEmail })
        .then((resp) => {
-          Toastify({
-            text: $_("mail-validation-in-progress"),
-            duration: 3500,
-          }).showToast();
+          toast.dismiss();
          reset_mail_sent = true;
        })
        .catch((err) => {});
    } else {
-      Toastify({
-        text: $_("invalid-mail-reset"),
-        duration: 3500,
-      }).showToast();
+      toast($_("invalid-mail-reset"));
    }
  }
 </script>
@@ -32,17 +26,18 @@
    <div class="max-w-md w-full py-12 px-6">
      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('password-reset-mail-sent', { values: { usersEmail: usersEmail } })}
+        {$_("password-reset-mail-sent", { values: { usersEmail: usersEmail } })}
      </p>
      <div class="mt-6">
        <div class="mt-6">
          <a
            href="/"
-            class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
-            {$_('goback')}
+            class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
+          >
+            {$_("goback")}
          </a>
        </div>
      </div>
@@ -53,25 +48,26 @@
    <div class="max-w-md w-full py-12 px-6">
      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
      </p>
      <p class="mt-6 text-sm text-center text-gray-900">
-        {$_('forgot_password')}
+        {$_("forgot_password")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('dont-panic-were-resetting-it')}
+        {$_("dont-panic-were-resetting-it")}
      </p>
      <div>
        <div class="rounded-md shadow-sm">
          <div>
            <input
-              aria-label={$_('e-mail-adress')}
+              aria-label={$_("e-mail-adress")}
              name="email"
              type="email"
              required=""
              class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
-              placeholder={$_('e-mail-adress')}
-              bind:value={usersEmail} />
+              placeholder={$_("e-mail-adress")}
+              bind:value={usersEmail}
+            />
          </div>
        </div>

@@ -79,19 +75,22 @@
          <button
            on:click={reset}
            type="submit"
-            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
+          >
            <span class="absolute left-0 inset-y pl-3">
              <svg
                class="h-5 w-5 text-gray-500"
                fill="currentColor"
-                viewBox="0 0 20 20">
+                viewBox="0 0 20 20"
+              >
                <path
                  fill-rule="evenodd"
                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                  clip-rule="evenodd" />
+                  clip-rule="evenodd"
+                />
              </svg>
            </span>
-            {$_('reset-my-password')}
+            {$_("reset-my-password")}
          </button>
        </div>
        <div class="mt-6">
@@ -100,24 +99,30 @@
              <div class="w-full border-t border-gray-300" />
            </div>
            <div class="relative flex justify-center text-sm">
-              <span
-                class="px-2 bg-gray-100 text-gray-500">{$_('dont-have-your-email-connected')}</span>
+              <span class="px-2 bg-gray-100 text-gray-500"
+                >{$_("dont-have-your-email-connected")}</span
+              >
            </div>
          </div>
          <span
-            class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex">{$_('cannot-reset-your-password-directly')}</span>
+            class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex"
+            >{$_("cannot-reset-your-password-directly")}</span
+          >

          <div class="mt-6">
            <a
              href="mailto:lfk@odit.services"
-              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
-              {$_('send-a-mail-to-lfk-odit-services')}
+              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
+            >
+              {$_("send-a-mail-to-lfk-odit-services")}
            </a>
          </div>
          <div class="mt-6">
            <a
              href="/"
-              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">{$_('goback')}</a>
+              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
+              >{$_("goback")}</a
+            >
          </div>
        </div>
      </div>
--- a/src/components/auth/Login.svelte
+++ b/src/components/auth/Login.svelte
@@ -6,7 +6,7 @@
  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
  import Footer from "../general/Footer.svelte";
  import isEmail from "validator/es/lib/isEmail";
-  import Toastify from "toastify-js";
+  import toast from "svelte-french-toast";
  // ------
  let username = config.default_username || "";
  let password = config.default_password || "";
@@ -20,11 +20,7 @@
        OpenAPI.TOKEN = value.access_token;
        const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
        store.login(value, jwtinfo);
-        Toastify({
-          text: $_("welcome_wavinghand"),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
+        toast($_("welcome_wavinghand"));
      }
    }
  });
@@ -33,10 +29,7 @@
    // prevent login button spamming
    if (last_loginclick_processed && is_blocked_by_autologin === false) {
      last_loginclick_processed = false;
-      Toastify({
-        text: $_("login_is_checked"),
-        duration: 500,
-      }).showToast();
+      toast.loading($_("login_is_checked"));
      let postdata = {};
      if (isEmail(username)) {
        postdata = {
@@ -56,31 +49,19 @@
          const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
          store.login(result.access_token, jwtinfo);
          location.replace("/");
-          Toastify({
-            text: $_("welcome_wavinghand"),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
+          toast.dismiss();
+          toast($_("welcome_wavinghand"));
        })
        .catch((err) => {
-          Toastify({
-            text: $_("error_on_login"),
-            duration: 500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
+          toast.dismiss();
+          toast.error($_("error_on_login"));
        })
        .finally(() => {
          last_loginclick_processed = true;
        });
      // last login was not processed yet
    } else {
-      Toastify({
-        text: $_('please-wait-a-moment-your-login-is-still-being-processed'),
-        duration: 1500,
-        backgroundColor:
-          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-      }).showToast();
+      toast($_("please-wait-a-moment-your-login-is-still-being-processed"));
    }
  };
  function handleKeydown(e) {
@@ -91,34 +72,37 @@
 </script>

 <div
-  class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900">
+  class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900"
+>
  <div class="max-w-md w-full py-12 px-6" role="main">
    <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
-    <p class="mt-6 text-lg text-center font-bold">{$_('application_name')}</p>
-    <p class="mt-6 text-sm text-center">{$_('log_in_to_your_account')}</p>
+    <p class="mt-6 text-xl text-center font-bold">{$_("application_name")}</p>
+    <p class="mt-2 mb-6 text-sm text-center">{$_("log_in_to_your_account")}</p>
    <div>
      <div class="rounded-md shadow-sm">
        <div>
          <!-- svelte-ignore a11y-autofocus -->
          <input
            autofocus
-            aria-label={$_('email_address_or_username')}
+            aria-label={$_("email_address_or_username")}
            type="text"
            required=""
            class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
            on:keydown={handleKeydown}
-            placeholder={$_('email_address_or_username')}
-            bind:value={username} />
+            placeholder={$_("email_address_or_username")}
+            bind:value={username}
+          />
        </div>
        <div class="-mt-px relative">
          <input
-            aria-label={$_('password')}
+            aria-label={$_("password")}
            type="password"
            required=""
            bind:value={password}
            class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
            on:keydown={handleKeydown}
-            placeholder={$_('password')} />
+            placeholder={$_("password")}
+          />
        </div>
      </div>

@@ -126,29 +110,33 @@
        <button
          on:click={login}
          type="submit"
-          class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+          class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
+        >
          <span class="absolute left-0 inset-y pl-3">
            <svg
              class="h-5 w-5 text-gray-500"
              fill="currentColor"
-              viewBox="0 0 20 20">
+              viewBox="0 0 20 20"
+            >
              <path
                fill-rule="evenodd"
                d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                clip-rule="evenodd" />
+                clip-rule="evenodd"
+              />
            </svg>
          </span>
-          {$_('log_in')}
+          {$_("log_in")}
        </button>
      </div>
    </div>
-    <div class="mt-2">
+    <!-- <div class="mt-2">
      <a
        href="/forgot_password"
-        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
-        {$_('forgot_password')}
+        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
+      >
+        {$_("forgot_password")}
      </a>
-    </div>
+    </div> -->
  </div>
 </div>
 <Footer />
--- a/src/components/auth/PasswordStrength.svelte
+++ b/src/components/auth/PasswordStrength.svelte
@@ -1,52 +1,52 @@
 <script context="module">
-    import { passwordStrength } from "check-password-strength";
-    export function password_strong_enough(password_change) {
-        let strength = passwordStrength(password_change);
-        return (
-            strength?.contains.includes("lowercase") &&
-            strength?.contains.includes("uppercase") &&
-            strength?.contains.includes("number") &&
-            strength?.length > 9
-        );
-    }
-    export function password_strong_enough_and_equal(
-        password_change,
-        password_confirm
-    ) {
-        return (
-            password_strong_enough(password_change) &&
-            password_change === password_confirm
-        );
-    }
+  import { passwordStrength } from "check-password-strength";
+  export function password_strong_enough(password_change) {
+    let strength = passwordStrength(password_change);
+    return (
+      strength?.contains.includes("lowercase") &&
+      strength?.contains.includes("uppercase") &&
+      strength?.contains.includes("number") &&
+      strength?.length > 9
+    );
+  }
+  export function password_strong_enough_and_equal(
+    password_change,
+    password_confirm
+  ) {
+    return (
+      password_strong_enough(password_change) &&
+      password_change === password_confirm
+    );
+  }
 </script>

 <script>
-    import { getLocaleFromNavigator, _ } from "svelte-i18n";
-    import { passwordStrength as Strength } from "check-password-strength";
-    export let password_change;
-    export let password_confirm;
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import { passwordStrength as Strength } from "check-password-strength";
+  export let password_change;
+  export let password_confirm;

-    $: strength = Strength(password_change);
-    $: passwords_match =
-        !password_confirm || password_confirm === password_change;
+  $: strength = Strength(password_change);
+  $: passwords_match =
+    !password_confirm || password_confirm === password_change;
 </script>

 <div class="ml-4">
-    <ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
-        {#if !strength.contains.includes('lowercase')}
-            <li>{$_('must-contain-a-lowercase-letter')}</li>
-        {/if}
-        {#if !strength.contains.includes('uppercase')}
-            <li>{$_('must-contain-a-uppercase-letter')}</li>
-        {/if}
-        {#if !strength.contains.includes('number')}
-            <li>{$_('must-contain-a-number')}</li>
-        {/if}
-        {#if !(strength.length > 9)}
-            <li>{$_('must-be-at-least-10-characters-long')}</li>
-        {/if}
-        {#if !(passwords_match == true)}
-            <li>{$_('passwords-dont-match')}</li>
-        {/if}
-    </ul>
+  <ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
+    {#if !strength.contains.includes("lowercase")}
+      <li>{$_("must-contain-a-lowercase-letter")}</li>
+    {/if}
+    {#if !strength.contains.includes("uppercase")}
+      <li>{$_("must-contain-a-uppercase-letter")}</li>
+    {/if}
+    {#if !strength.contains.includes("number")}
+      <li>{$_("must-contain-a-number")}</li>
+    {/if}
+    {#if !(strength.length > 9)}
+      <li>{$_("must-be-at-least-10-characters-long")}</li>
+    {/if}
+    {#if !(passwords_match == true)}
+      <li>{$_("passwords-dont-match")}</li>
+    {/if}
+  </ul>
 </div>
--- a/src/components/auth/ResetPassword.svelte
+++ b/src/components/auth/ResetPassword.svelte
@@ -1,8 +1,7 @@
 <script>
  import { AuthService } from "@odit/lfk-client-js";
  import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
-  import "toastify-js/src/toastify.css";
+  import toast from "svelte-french-toast";
  import PasswordStrength, {
    password_strong_enough,
  } from "../auth/PasswordStrength.svelte";
@@ -11,101 +10,97 @@
  export let params;
  function set_new_password() {
    if (password.trim() !== "") {
-      Toastify({
-        text: $_("password-reset-in-progress"),
-        duration: 3500,
-      }).showToast();
+      toast.loading($_("password-reset-in-progress"));
      AuthService.authControllerResetPassword(atob(params.resetkey), {
        password,
      })
        .then((resp) => {
-          Toastify({
-            text: $_("password-reset-successful"),
-            duration: 3500,
-          }).showToast();
+          toast.dismiss();
+          toast($_("password-reset-successful"));
          state = "reset_success";
        })
        .catch((err) => {
          state = "reset_error";
        });
    } else {
-      Toastify({
-        text: $_("please-provide-a-password"),
-        duration: 3500,
-      }).showToast();
+      toast.dismiss();
+      toast.error($_("please-provide-a-password"));
    }
  }
 </script>

-{#if state === 'reset_success'}
+{#if state === "reset_success"}
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="max-w-md w-full py-12 px-6">
      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
-        {$_('successful-password-reset')}
+        {$_("successful-password-reset")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('you-can-now-use-your-new-password-to-log-in-to-your-account')}
+        {$_("you-can-now-use-your-new-password-to-log-in-to-your-account")}
      </p>
      <div class="mt-6">
        <div class="mt-6">
          <a
            href="/login/"
-            class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
-            {$_('go-to-login')}
+            class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
+          >
+            {$_("go-to-login")}
          </a>
        </div>
      </div>
    </div>
  </div>
-{:else if state === 'reset_error'}
+{:else if state === "reset_error"}
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="max-w-md w-full py-12 px-6">
      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
-        {$_('password-reset-failed')}
+        {$_("password-reset-failed")}
      </p>
      <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('please-request-a-new-reset-mail')}
+        {$_("please-request-a-new-reset-mail")}
      </p>
      <div class="mt-6">
        <div class="mt-6">
          <a
            href="/forgot_password/"
-            class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
-            {$_('request-a-new-reset-mail')}
+            class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
+          >
+            {$_("request-a-new-reset-mail")}
          </a>
        </div>
      </div>
    </div>
  </div>
-{:else if state === 'reset_in_progress'}
+{:else if state === "reset_in_progress"}
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="max-w-md w-full py-12 px-6">
      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
      </p>
      <p class="mt-2 mb-4 text-md text-center text-gray-900">
-        {$_('reset-password')}
+        {$_("reset-password")}
      </p>
      <div>
        <div class="rounded-md shadow-sm">
          <div>
            <input
-              aria-label={$_('new-password')}
+              aria-label={$_("new-password")}
              name="password"
              type="password"
              required=""
              class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
-              placeholder={$_('new-password')}
-              bind:value={password} />
+              placeholder={$_("new-password")}
+              bind:value={password}
+            />
          </div>
          <PasswordStrength bind:password_change={password} />
        </div>
@@ -116,19 +111,22 @@
            disabled={!password_strong_enough(password)}
            class:opacity-50={!password_strong_enough(password)}
            type="submit"
-            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+            class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
+          >
            <span class="absolute left-0 inset-y pl-3">
              <svg
                class="h-5 w-5 text-gray-500"
                fill="currentColor"
-                viewBox="0 0 20 20">
+                viewBox="0 0 20 20"
+              >
                <path
                  fill-rule="evenodd"
                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                  clip-rule="evenodd" />
+                  clip-rule="evenodd"
+                />
              </svg>
            </span>
-            {$_('reset-my-password')}
+            {$_("reset-my-password")}
          </button>
        </div>
      </div>
--- a/src/components/base/FormLayout.svelte
+++ b/src/components/base/FormLayout.svelte
@@ -1,274 +0,0 @@
-<!--
-  This example requires Tailwind CSS v2.0+ 
-  
-  This example requires some changes to your config:
-  
-  ```
-  // tailwind.config.js
-  module.exports = {
-    // ...
-    plugins: [
-      // ...
-      require('@tailwindcss/forms'),
-    ]
-  }
-  ```
-->
-<div>
-  <div class="md:grid md:grid-cols-3 md:gap-6">
-    <div class="md:col-span-1">
-      <div class="px-4 sm:px-0">
-        <h3 class="text-lg font-medium leading-6 text-gray-900">Profile</h3>
-        <p class="mt-1 text-sm text-gray-600">
-          This information will be displayed publicly so be careful what you share.
-        </p>
-      </div>
-    </div>
-    <div class="mt-5 md:mt-0 md:col-span-2">
-      <form action="#" method="POST">
-        <div class="shadow sm:rounded-md sm:overflow-hidden">
-          <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
-            <div class="grid grid-cols-3 gap-6">
-              <div class="col-span-3 sm:col-span-2">
-                <label for="company_website" class="block text-sm font-medium text-gray-700">
-                  Website
-                </label>
-                <div class="mt-1 flex rounded-md shadow-sm">
-                  <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
-                    http://
-                  </span>
-                  <input type="text" name="company_website" id="company_website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
-                </div>
-              </div>
-            </div>
-
-            <div>
-              <label for="about" class="block text-sm font-medium text-gray-700">
-                About
-              </label>
-              <div class="mt-1">
-                <textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
-              </div>
-              <p class="mt-2 text-sm text-gray-500">
-                Brief description for your profile. URLs are hyperlinked.
-              </p>
-            </div>
-
-            <div>
-              <!-- svelte-ignore a11y-label-has-associated-control -->
-              <label class="block text-sm font-medium text-gray-700">
-                Photo
-              </label>
-              <div class="mt-2 flex items-center">
-                <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
-                  <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
-                  </svg>
-                </span>
-                <button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                  Change
-                </button>
-              </div>
-            </div>
-
-            <div>
-              <!-- svelte-ignore a11y-label-has-associated-control -->
-              <label class="block text-sm font-medium text-gray-700">
-                Cover photo
-              </label>
-              <div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
-                <div class="space-y-1 text-center">
-                  <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
-                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                  </svg>
-                  <div class="flex text-sm text-gray-600">
-                    <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
-                      <span>Upload a file</span>
-                      <input id="file-upload" name="file-upload" type="file" class="sr-only">
-                    </label>
-                    <p class="pl-1">or drag and drop</p>
-                  </div>
-                  <p class="text-xs text-gray-500">
-                    PNG, JPG, GIF up to 10MB
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-              Save
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-
-<div class="hidden sm:block" aria-hidden="true">
-  <div class="py-5">
-    <div class="border-t border-gray-200"></div>
-  </div>
-</div>
-
-<div class="mt-10 sm:mt-0">
-  <div class="md:grid md:grid-cols-3 md:gap-6">
-    <div class="md:col-span-1">
-      <div class="px-4 sm:px-0">
-        <h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3>
-        <p class="mt-1 text-sm text-gray-600">
-          Use a permanent address where you can receive mail.
-        </p>
-      </div>
-    </div>
-    <div class="mt-5 md:mt-0 md:col-span-2">
-      <form action="#" method="POST">
-        <div class="shadow overflow-hidden sm:rounded-md">
-          <div class="px-4 py-5 bg-white sm:p-6">
-            <div class="grid grid-cols-6 gap-6">
-              <div class="col-span-6 sm:col-span-3">
-                <label for="first_name" class="block text-sm font-medium text-gray-700">First name</label>
-                <input type="text" name="first_name" id="first_name" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-3">
-                <label for="last_name" class="block text-sm font-medium text-gray-700">Last name</label>
-                <input type="text" name="last_name" id="last_name" autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-4">
-                <label for="email_address" class="block text-sm font-medium text-gray-700">Email address</label>
-                <input type="text" name="email_address" id="email_address" autocomplete="email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-3">
-                <label for="country" class="block text-sm font-medium text-gray-700">Country / Region</label>
-                <select id="country" name="country" autocomplete="country" class="mt-1 block w-full 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">
-                  <option>United States</option>
-                  <option>Canada</option>
-                  <option>Mexico</option>
-                </select>
-              </div>
-
-              <div class="col-span-6">
-                <label for="street_address" class="block text-sm font-medium text-gray-700">Street address</label>
-                <input type="text" name="street_address" id="street_address" autocomplete="street-address" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-6 lg:col-span-2">
-                <label for="city" class="block text-sm font-medium text-gray-700">City</label>
-                <input type="text" name="city" id="city" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-3 lg:col-span-2">
-                <label for="state" class="block text-sm font-medium text-gray-700">State / Province</label>
-                <input type="text" name="state" id="state" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-3 lg:col-span-2">
-                <label for="postal_code" class="block text-sm font-medium text-gray-700">ZIP / Postal</label>
-                <input type="text" name="postal_code" id="postal_code" autocomplete="postal-code" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-            </div>
-          </div>
-          <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-              Save
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-
-<div class="hidden sm:block" aria-hidden="true">
-  <div class="py-5">
-    <div class="border-t border-gray-200"></div>
-  </div>
-</div>
-
-<div class="mt-10 sm:mt-0">
-  <div class="md:grid md:grid-cols-3 md:gap-6">
-    <div class="md:col-span-1">
-      <div class="px-4 sm:px-0">
-        <h3 class="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
-        <p class="mt-1 text-sm text-gray-600">
-          Decide which communications you'd like to receive and how.
-        </p>
-      </div>
-    </div>
-    <div class="mt-5 md:mt-0 md:col-span-2">
-      <form action="#" method="POST">
-        <div class="shadow overflow-hidden sm:rounded-md">
-          <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
-            <fieldset>
-              <legend class="text-base font-medium text-gray-900">By Email</legend>
-              <div class="mt-4 space-y-4">
-                <div class="flex items-start">
-                  <div class="flex items-center h-5">
-                    <input id="comments" name="comments" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
-                  </div>
-                  <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700">Comments</label>
-                    <p class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
-                  </div>
-                </div>
-                <div class="flex items-start">
-                  <div class="flex items-center h-5">
-                    <input id="candidates" name="candidates" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
-                  </div>
-                  <div class="ml-3 text-sm">
-                    <label for="candidates" class="font-medium text-gray-700">Candidates</label>
-                    <p class="text-gray-500">Get notified when a candidate applies for a job.</p>
-                  </div>
-                </div>
-                <div class="flex items-start">
-                  <div class="flex items-center h-5">
-                    <input id="offers" name="offers" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
-                  </div>
-                  <div class="ml-3 text-sm">
-                    <label for="offers" class="font-medium text-gray-700">Offers</label>
-                    <p class="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-            <fieldset>
-              <div>
-                <legend class="text-base font-medium text-gray-900">Push Notifications</legend>
-                <p class="text-sm text-gray-500">These are delivered via SMS to your mobile phone.</p>
-              </div>
-              <div class="mt-4 space-y-4">
-                <div class="flex items-center">
-                  <input id="push_everything" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
-                  <label for="push_everything" class="ml-3 block text-sm font-medium text-gray-700">
-                    Everything
-                  </label>
-                </div>
-                <div class="flex items-center">
-                  <input id="push_email" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
-                  <label for="push_email" class="ml-3 block text-sm font-medium text-gray-700">
-                    Same as email
-                  </label>
-                </div>
-                <div class="flex items-center">
-                  <input id="push_nothing" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
-                  <label for="push_nothing" class="ml-3 block text-sm font-medium text-gray-700">
-                    No push notifications
-                  </label>
-                </div>
-              </div>
-            </fieldset>
-          </div>
-          <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-              Save
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
--- a/src/components/base/NoComponentLoaded.svelte
+++ b/src/components/base/NoComponentLoaded.svelte
@@ -4,19 +4,22 @@

 <body class="antialiased font-sans">
  <div class="flex min-h-screen">
-    <div class="w-full bg-white flex items-center justify-center ">
+    <div class="w-full bg-white flex items-center justify-center">
      <div class="max-w-sm m-8">
        <div class="text-black text-5xl md:text-15xl font-black">
-          {$_('internal-error')}
+          {$_("internal-error")}
        </div>
        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
        <p
-          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
-          {$_('generic-ui-logic-error')}
+          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"
+        >
+          {$_("generic-ui-logic-error")}
        </p>
        <a
          href="/"
-          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg"
+          >{$_("goback")}</a
+        >
      </div>
    </div>
  </div>
--- a/src/components/base/PromiseError.svelte
+++ b/src/components/base/PromiseError.svelte
@@ -5,7 +5,7 @@

 <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>
+    <b class="capitalize">{$_("general_promise_error")}</b>
    {error}
  </span>
 </div>
--- a/src/components/base/datatable_i18n.js
+++ b/src/components/base/datatable_i18n.js
@@ -1,24 +1,25 @@
 export function getlang(langkeys) {
-	return {
-		search: {
-			placeholder: langkeys.search
-		},
-		sort: {
-			sortAsc: langkeys.sort_column_ascending,
-			sortDesc: langkeys.sort_column_descending
-		},
-		pagination: {
-			previous: langkeys.previous,
-			next: langkeys.next,
-			navigate: (page, pages) => `${langkeys.page} ${page} ${langkeys.of} ${pages}`,
-			page: (page) => `${langkeys.page} ${page}`,
-			showing: langkeys.showing,
-			of: langkeys.of,
-			to: langkeys.to,
-			results: langkeys.records
-		},
-		loading: langkeys.loading,
-		noRecordsFound: langkeys.no_matching_records_found,
-		error: langkeys.an_error_happened_while_fetching_the_data
-	};
+  return {
+    search: {
+      placeholder: langkeys.search,
+    },
+    sort: {
+      sortAsc: langkeys.sort_column_ascending,
+      sortDesc: langkeys.sort_column_descending,
+    },
+    pagination: {
+      previous: langkeys.previous,
+      next: langkeys.next,
+      navigate: (page, pages) =>
+        `${langkeys.page} ${page} ${langkeys.of} ${pages}`,
+      page: (page) => `${langkeys.page} ${page}`,
+      showing: langkeys.showing,
+      of: langkeys.of,
+      to: langkeys.to,
+      results: langkeys.records,
+    },
+    loading: langkeys.loading,
+    noRecordsFound: langkeys.no_matching_records_found,
+    error: langkeys.an_error_happened_while_fetching_the_data,
+  };
 }
--- a/src/components/base/importfixes.svelte
+++ b/src/components/base/importfixes.svelte
@@ -3,4 +3,4 @@
    Or as others may call it: Real big bullshit time.
    Issue: https://git.odit.services/lfk/frontend/issues/136
 -->
-<div class="opacity-50"></div>
+<div class="opacity-50" />
--- a/src/components/base/outsideclick.js
+++ b/src/components/base/outsideclick.js
@@ -1,10 +1,10 @@
 /** Dispatch event on click outside of node */
 export function clickOutside(node) {
-	const handleClick = (event) => {
-		if (event.target.getAttribute('data-id') === 'modal_backdrop') {
-			node.dispatchEvent(new CustomEvent('click_outside', node));
-		}
-	};
-	document.removeEventListener('click', handleClick, true);
-	document.addEventListener('click', handleClick, true);
+  const handleClick = (event) => {
+    if (event.target.getAttribute("data-id") === "modal_backdrop") {
+      node.dispatchEvent(new CustomEvent("click_outside", node));
+    }
+  };
+  document.removeEventListener("click", handleClick, true);
+  document.addEventListener("click", handleClick, true);
 }
--- a/src/components/base/simple.css
+++ b/src/components/base/simple.css
--- a/src/components/cards/AddCardBulkModal.svelte
+++ b/src/components/cards/AddCardBulkModal.svelte
@@ -1,243 +1,232 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-  
-  import { RunnerCardService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  import { createEventDispatcher } from "svelte";
-  export let bulk_modal_open;
-  function focus(el) {
-    el.focus();
-  }
-  const dispatch = createEventDispatcher();
-
-  $: card_count = 0;
-  $: is_card_count_valid = card_count > 0;
-  $: processed_last_submit = true;
-  $: createbtnenabled = is_card_count_valid;
-  (() => {
-    document.onkeydown = (e) => {
-      e = e || window.event;
-      if (e.key === "Escape") {
-        bulk_modal_open = false;
-      }
-      if (e.keyCode === 13) {
-        if (createbtnenabled === true) {
-          createbtnenabled = false;
-          submit_with_print();
-        }
-      }
-    };
-  })();
-  function submit_without_print() {
-    if (processed_last_submit === true) {
-      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_("creating-blanco-cards"),
-        duration: -1,
-      }).showToast();
-      RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
-        .then((result) => {
-          bulk_modal_open = false;
-          //
-          Toastify({
-            text: $_("created-blanco-cards"),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          dispatch("created", {cards: result})
-        })
-        .catch((err) => {
-          //
-        })
-        .finally(() => {
-          processed_last_submit = true;
-          //
-          toast.hideToast();
-        });
-    }
-  }
-
-  function submit_with_print() {
-    if (processed_last_submit === true) {
-      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_("creating-blanco-cards"),
-        duration: -1,
-      }).showToast();
-      RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
-        .then((result) => {
-          bulk_modal_open = false;
-          //
-          Toastify({
-            text: $_("created-blanco-cards"),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          const toast = Toastify({
-            text: $_("generating-pdf"),
-            duration: -1,
-          }).showToast();
-          dispatch("created", {cards: result})
-          fetch(
-            `${config.baseurl_documentserver}/cards?&download=true&key=${config.documentserver_key}`,
-            {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify(result),
-            }
-          )
-            .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 = "Bulkcards.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);
-            });
-        })
-        .catch((err) => {
-          //
-        })
-        .finally(() => {
-          processed_last_submit = true;
-          //
-          toast.hideToast();
-        });
-    }
-  }
-</script>
-
-{#if bulk_modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    
-    use:clickOutside
-    on:click_outside={() => {
-      bulk_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-2xl 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- 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">
-                {$_('create-bulk-blanco-cards')}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_('just-enter-how-many-you-want-and-the-system-will-create-them')}
-                </p>
-              </div>
-              <div class="grid grid-cols-6 gap-6">
-                <div class="col-span-6">
-                  <label
-                    for="amount"
-                    class="block text-sm font-medium text-gray-700">{$_('amount')}</label>
-                  <div class="mt-1 flex rounded-md shadow-sm">
-                    <input
-                      autocomplete="off"
-                      class:border-red-500={!is_card_count_valid}
-                      class:focus:border-red-500={!is_card_count_valid}
-                      class:focus:ring-red-500={!is_card_count_valid}
-                      bind:value={card_count}
-                      type="number"
-                      step="1"
-                      name="amount"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
-                      placeholder="400" />
-                    <span
-                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">{$_('cards')}</span>
-                  </div>
-                  {#if !is_card_count_valid}
-                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('you-must-create-at-least-one-card-or-cancel')}
-                    </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_with_print}
-            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-and-generate-pdf')}
-          </button>
-          <button
-            disabled={!createbtnenabled}
-            class:opacity-50={!createbtnenabled}
-            on:click={submit_without_print}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('create-without-pdf')}
-          </button>
-          <button
-            on:click={() => {
-              bulk_modal_open = false;
-            }}
-            type="button"
-            class="mr-auto 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}
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+
+  import { RunnerCardService } from "@odit/lfk-client-js";
+  import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
+  export let bulk_modal_open;
+  const dispatch = createEventDispatcher();
+
+  $: card_count = 0;
+  $: is_card_count_valid = card_count > 0;
+  $: processed_last_submit = true;
+  $: createbtnenabled = is_card_count_valid;
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        bulk_modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit_with_print();
+        }
+      }
+    };
+  })();
+  function submit_without_print() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      toast.loading($_("creating-blanco-cards"));
+      RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
+        .then((result) => {
+          bulk_modal_open = false;
+          //
+          toast.dismiss();
+          toast.success($_("created-blanco-cards"));
+          dispatch("created", { cards: result });
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+        });
+    }
+  }
+
+  function submit_with_print() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      toast.dismiss();
+      toast.loading($_("creating-blanco-cards"));
+      RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
+        .then((result) => {
+          bulk_modal_open = false;
+          //
+          toast.dismiss();
+          toast.success($_("created-blanco-cards"));
+          toast.loading($_("generating-pdf"));
+          dispatch("created", { cards: result });
+          fetch(
+            `${config.baseurl_documentserver}/cards?&download=true&key=${config.documentserver_key}`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(result),
+            }
+          )
+            .then((response) => {
+              if (response.status != "200") {
+                toast.dismiss();
+                toast.error($_("pdf-generation-failed"));
+              } else {
+                return response.blob();
+              }
+            })
+            .then((blob) => {
+              const url = window.URL.createObjectURL(blob);
+              let a = document.createElement("a");
+              a.href = url;
+              a.download = "Bulkcards.pdf";
+              document.body.appendChild(a);
+              a.click();
+              a.remove();
+              toast.dismiss();
+              toast.success($_("pdf-successfully-generated"));
+            })
+            .catch((err) => {
+              console.error(err);
+            });
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+        });
+    }
+  }
+</script>
+
+{#if bulk_modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:clickOutside
+    on:click_outside={() => {
+      bulk_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-2xl 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- 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">
+                {$_("create-bulk-blanco-cards")}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_(
+                    "just-enter-how-many-you-want-and-the-system-will-create-them"
+                  )}
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="amount"
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("amount")}</label
+                  >
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={!is_card_count_valid}
+                      class:focus:border-red-500={!is_card_count_valid}
+                      class:focus:ring-red-500={!is_card_count_valid}
+                      bind:value={card_count}
+                      type="number"
+                      step="1"
+                      name="amount"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      placeholder="400"
+                    />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+                      >{$_("cards")}</span
+                    >
+                  </div>
+                  {#if !is_card_count_valid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("you-must-create-at-least-one-card-or-cancel")}
+                    </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_with_print}
+            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-and-generate-pdf")}
+          </button>
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit_without_print}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+          >
+            {$_("create-without-pdf")}
+          </button>
+          <button
+            on:click={() => {
+              bulk_modal_open = false;
+            }}
+            type="button"
+            class="mr-auto 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/AddCardModal.svelte
+++ b/src/components/cards/AddCardModal.svelte
@@ -1,203 +1,191 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-
-  import {
-    RunnerCardService,
-    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;
-
-  const dispatch = createEventDispatcher();
-  const getRunnerLabel = (option) => {
-    if (option.middlename) {
-      return option.firstname + " " + option.middlename + " " + option.lastname;
-    }
-    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;
-  $: 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;
-  (() => {
-    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: $_("adding-card"),
-        duration: -1,
-      }).showToast();
-      let postdata = {
-        runner,
-        enabled,
-      };
-      RunnerCardService.runnerCardControllerPost(postdata)
-        .then((result) => {
-          runner = 0;
-          modal_open = false;
-          //
-          Toastify({
-            text: $_("card-added"),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          dispatch("created", { cards: [result] });
-        })
-        .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
-                  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">
-                {$_("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")}
-                  {$_(
-                    "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"
-                    >{$_("runner")}</label
-                  >
-                  <Select
-                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-                    itemFilter={(label, filterText, option) =>
-                      filterRunners(label, filterText, option)}
-                    items={runners}
-                    bind:loading
-                    showChevron={!loading}
-                    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>
-              </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}
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+
+  import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
+  import Select from "svelte-select";
+  import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
+  export let modal_open;
+
+  const dispatch = createEventDispatcher();
+  const getRunnerLabel = (option) => {
+    if (option.middlename) {
+      return option.firstname + " " + option.middlename + " " + option.lastname;
+    }
+    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;
+  $: 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;
+  (() => {
+    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;
+      toast.loading($_("adding-card"));
+      let postdata = {
+        runner,
+        enabled,
+      };
+      RunnerCardService.runnerCardControllerPost(postdata)
+        .then((result) => {
+          runner = 0;
+          modal_open = false;
+          //
+          toast.dismiss();
+          toast.success($_("card-added"));
+          dispatch("created", { cards: [result] });
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+        });
+    }
+  }
+</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">
+                {$_("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")}
+                  {$_(
+                    "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"
+                    >{$_("runner")}</label
+                  >
+                  <Select
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    itemFilter={(label, filterText, option) =>
+                      filterRunners(label, filterText, option)}
+                    items={runners}
+                    bind:loading
+                    showChevron={!loading}
+                    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>
+              </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/cards/CardDetailModal.svelte
+++ b/src/components/cards/CardDetailModal.svelte
@@ -1,193 +1,200 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-  
-  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 runner = {};
-  export let editable = {};
-  export let original_data = {};
-  const getRunnerLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + 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();
-  }
-  $: runners = [];
-  $: enabled = true;
-  $: processed_last_submit = true;
-  const dispatch = createEventDispatcher();
-  RunnerService.runnerControllerGetAll().then((val) => {
-    runners = val.map((r) => {
-      return { label: getRunnerLabel(r), value: r };
-    });
-  });
-  $: createbtnenabled = !(
-    JSON.stringify(editable) === JSON.stringify(original_data)
-  );
-  (() => {
-    document.onkeydown = (e) => {
-      e = e || window.event;
-      if (e.key === "Escape") {
-        edit_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-card"),
-        duration: -1,
-      }).showToast();
-      RunnerCardService.runnerCardControllerPut(original_data.id, editable)
-        .then((result) => {
-          let id = original_data.id;
-          runner = {};
-          editable = {};
-          original_data = {};
-          edit_modal_open = false;
-          //
-          Toastify({
-            text: $_("card-updated"),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          dispatch('dataUpdated', {card: result});
-        })
-        .catch((err) => {
-          //
-        })
-        .finally(() => {
-          processed_last_submit = true;
-          //
-          toast.hideToast();
-        });
-    }
-  }
-</script>
-
-{#if edit_modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    
-    use:clickOutside
-    on:click_outside={() => {
-      edit_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">
-                {$_('edit-a-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')}
-                </p>
-              </div>
-              <div class="grid grid-cols-6 gap-6">
-                <div class="col-span-6">
-                  <label
-                    for="runner"
-                    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) => filterRunners(label, filterText, option)}
-                    items={runners}
-                    showChevron={true}
-                    placeholder={$_('search-for-runner-by-name-or-id')}
-                    noOptionsMessage={$_('no-runners-found')}
-                    bind:selectedValue={runner}
-                    on:select={(selectedValue) => (editable.runner = selectedValue.detail.value.id)}
-                    on:clear={() => (editable.runner = null)} />
-                </div>
-                <div class="col-span-6">
-                  <p class="text-gray-500">
-                    <input
-                      id="enabled"
-                      on:change={() => {
-                        editable.enabled = !editable.enabled;
-                      }}
-                      name="enabled"
-                      type="checkbox"
-                      checked={editable.enabled}
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                    {$_('this-card-is')}
-                    {#if editable.enabled}
-                      {$_('enabled')}
-                    {:else}{$_('disabled')}{/if}
-                  </p>
-                </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={() => {
-              edit_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}
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+
+  import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
+  import Select from "svelte-select";
+  import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
+  export let edit_modal_open;
+  export let runner = {};
+  export let editable = {};
+  export let original_data = {};
+  const getRunnerLabel = (option) =>
+    option.firstname + " " + (option.middlename || "") + " " + 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();
+  }
+  $: runners = [];
+  $: enabled = true;
+  $: processed_last_submit = true;
+  const dispatch = createEventDispatcher();
+  RunnerService.runnerControllerGetAll().then((val) => {
+    runners = val.map((r) => {
+      return { label: getRunnerLabel(r), value: r };
+    });
+  });
+  $: createbtnenabled = !(
+    JSON.stringify(editable) === JSON.stringify(original_data)
+  );
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        edit_modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      toast.loading($_("updating-card"));
+      RunnerCardService.runnerCardControllerPut(original_data.id, editable)
+        .then((result) => {
+          runner = {};
+          editable = {};
+          original_data = {};
+          edit_modal_open = false;
+          //
+          toast.dismiss();
+          toast.success($_("card-updated"));
+          dispatch("dataUpdated", { card: result });
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+        });
+    }
+  }
+</script>
+
+{#if edit_modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:clickOutside
+    on:click_outside={() => {
+      edit_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">
+                {$_("edit-a-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")}
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="runner"
+                    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) =>
+                      filterRunners(label, filterText, option)}
+                    items={runners}
+                    showChevron={true}
+                    placeholder={$_("search-for-runner-by-name-or-id")}
+                    noOptionsMessage={$_("no-runners-found")}
+                    bind:selectedValue={runner}
+                    on:select={(selectedValue) =>
+                      (editable.runner = selectedValue.detail.value.id)}
+                    on:clear={() => (editable.runner = null)}
+                  />
+                </div>
+                <div class="col-span-6">
+                  <p class="text-gray-500">
+                    <input
+                      id="enabled"
+                      on:change={() => {
+                        editable.enabled = !editable.enabled;
+                      }}
+                      name="enabled"
+                      type="checkbox"
+                      checked={editable.enabled}
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                    />
+                    {$_("this-card-is")}
+                    {#if editable.enabled}
+                      {$_("enabled")}
+                    {:else}{$_("disabled")}{/if}
+                  </p>
+                </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={() => {
+              edit_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/Cards.svelte
+++ b/src/components/cards/Cards.svelte
@@ -1,54 +1,53 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import AddCardBulkModal from "./AddCardBulkModal.svelte";
-  import AddCardModal from "./AddCardModal.svelte";
-  import CardsOverview from "./CardsOverview.svelte";
-  $: 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")}
-    {#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"
-      >
-        {$_("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"
-      >
-        {$_("create-bulk-cards")}
-      </button>
-    {/if}
-  </span>
-  <CardsOverview bind:current_cards bind:addCards />
-</section>
-
-{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
-  <AddCardModal
-    bind: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}
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../../store";
+  import AddCardBulkModal from "./AddCardBulkModal.svelte";
+  import AddCardModal from "./AddCardModal.svelte";
+  import CardsOverview from "./CardsOverview.svelte";
+  $: 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")}
+    {#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"
+      >
+        {$_("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"
+      >
+        {$_("create-bulk-cards")}
+      </button>
+    {/if}
+  </span>
+  <CardsOverview bind:current_cards bind:addCards />
+</section>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}
+  <AddCardModal
+    bind:modal_open
+    on:created={(event) => {
+      addCards(event.detail.cards);
+    }}
+  />
+  <AddCardBulkModal
+    bind:bulk_modal_open
+    on:created={(event) => {
+      addCards(event.detail.cards);
+    }}
+  />
+{/if}
--- a/src/components/cards/CardsEmptyState.svelte
+++ b/src/components/cards/CardsEmptyState.svelte
@@ -1,12 +1,12 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import cards_empty from "./cards.svg";
-</script>
-
-<div class="text-center items-center justify-center">
-  <p class="mb-16 text-lg text-gray-500">
-    <img class="m-auto" style="height:15rem" src={cards_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-cards-yet')}</span><br />
-    <span>{$_('add-your-first-card')}</span>
-  </p>
-</div>
+<script>
+  import { _ } from "svelte-i18n";
+  import cards_empty from "./cards.svg";
+</script>
+
+<div class="text-center items-center justify-center">
+  <p class="mb-16 text-lg text-gray-500">
+    <img class="m-auto" style="height:15rem" src={cards_empty} alt="" />
+    <span class="font-bold">{$_("there-are-no-cards-yet")}</span><br />
+    <span>{$_("add-your-first-card")}</span>
+  </p>
+</div>
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -1,300 +1,319 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { RunnerCardService } from "@odit/lfk-client-js";
-  import store from "../../store";
-  import Toastify from "toastify-js";
-  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) => {
-    console.log(cards)
-    current_cards = current_cards.concat(...cards);
-    options.update((options) => ({
-      ...options,
-      data: current_cards,
-    }));
-  };
-
-  $: 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(),
-  });
-
-  const table = createSvelteTable(options);
-
-  function open_edit_modal(card) {
-    const getRunnerLabel = (option) =>
-      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;
-      runner = null;
-    }
-    editable = Object.assign(editable, card);
-    original_data = Object.assign(original_data, card);
-    edit_modal_open = true;
-  }
-
-  async function deleteCard(delete_card_id) {
-    await RunnerCardService.runnerCardControllerRemove(delete_card_id, true);
-    current_cards = current_cards.filter((r) => r.id !== delete_card_id);
-    options.update((options) => ({
-      ...options,
-      data: current_cards,
-    }));
-    Toastify({
-      text: $_("card-deleted"),
-      duration: 3500,
-      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    }).showToast();
-  }
-
-  onMount(() => {
-    RunnerCardService.runnerCardControllerGetAll().then((val) => {
-      current_cards = val;
-      options.update((options) => ({
-        ...options,
-        data: current_cards,
-      }));
-      dataLoaded = true;
-    });
-  });
-</script>
-
-{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:UPDATE")}
-  <CardDetailModal
-    bind:edit_modal_open
-    bind:runner
-    bind:editable
-    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")}
-  <DeleteCardModal
-    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"
-    >
-      <p class="font-bold">{$_("loading-cards")}</p>
-      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
-    </div>
-  {:else if current_cards.length === 0}
-    <CardsEmptyState />
-  {:else}
-    <div class="h-12 mt-1">
-      {#if selected.length > 0}
-        <button
-          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 inline-flex"
-          id="options-menu"
-          on:click={async () => {
-            const prom = [];
-            for (const card of selectedCards) {
-              prom.push(
-                await RunnerCardService.runnerCardControllerRemove(
-                  card.id,
-                  true
-                )
-              );
-            }
-            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">
-                <InputElement
-                  type="checkbox"
-                  checked={row.getIsSelected()}
-                  on:change={() => row.toggleSelected()}
-                />
-              </td>
-              {#each row.getVisibleCells() as cell}
-                <td>
-                  <svelte:component
-                    this={flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
-                  />
-                </td>
-              {/each}
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-    <TableBottom {table} {selected} />
-  {/if}
-{/if}
+<script>
+  import { _ } from "svelte-i18n";
+  import { RunnerCardService } from "@odit/lfk-client-js";
+  import store from "../../store";
+  import toast from "svelte-french-toast";
+  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) => {
+    current_cards = current_cards.concat(...cards);
+    options.update((options) => ({
+      ...options,
+      data: current_cards,
+    }));
+  };
+
+  $: 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(),
+  });
+
+  const table = createSvelteTable(options);
+
+  function open_edit_modal(card) {
+    const getRunnerLabel = (option) =>
+      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;
+      runner = null;
+    }
+    editable = Object.assign(editable, card);
+    original_data = Object.assign(original_data, card);
+    edit_modal_open = true;
+  }
+
+  async function deleteCard(delete_card_id) {
+    await RunnerCardService.runnerCardControllerRemove(delete_card_id, true);
+    current_cards = current_cards.filter((r) => r.id !== delete_card_id);
+    options.update((options) => ({
+      ...options,
+      data: current_cards,
+    }));
+    toast.success($_("card-deleted"));
+  }
+
+  onMount(async () => {
+    toast.loading($_("loading-cards"));
+    let page = 0;
+    let pagesize = 500;
+    while (page >= 0) {
+      const cards = await RunnerCardService.runnerCardControllerGetAll(
+        page,
+        pagesize
+      );
+      if (cards.length == 0) {
+        page = -2;
+      }
+
+      current_cards = current_cards.concat(...cards);
+      options.update((options) => ({
+        ...options,
+        data: current_cards,
+      }));
+
+      dataLoaded = true;
+      page++;
+    }
+    toast.dismiss();
+    toast.success($_("all-cards-loaded"));
+  });
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:UPDATE")}
+  <CardDetailModal
+    bind:edit_modal_open
+    bind:runner
+    bind:editable
+    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")}
+  <DeleteCardModal
+    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"
+    >
+      <p class="font-bold">{$_("loading-cards")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
+    </div>
+  {:else if current_cards.length === 0}
+    <CardsEmptyState />
+  {:else}
+    <div class="h-12 mt-1">
+      {#if selected.length > 0}
+        <button
+          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 inline-flex"
+          id="options-menu"
+          on:click={async () => {
+            const prom = [];
+            for (const card of selectedCards) {
+              prom.push(
+                await RunnerCardService.runnerCardControllerRemove(
+                  card.id,
+                  true
+                )
+              );
+            }
+            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 class="border-b border-gray-400">
+          {#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 class="odd:bg-white even:bg-gray-100">
+              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+                <InputElement
+                  type="checkbox"
+                  checked={row.getIsSelected()}
+                  on:change={() => row.toggleSelected()}
+                />
+              </td>
+              {#each row.getVisibleCells() as cell}
+                <td>
+                  <svelte:component
+                    this={flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    )}
+                  />
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+    <TableBottom {table} {selected} />
+  {/if}
+{/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>
--- 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 {
    GroupContactService,
    RunnerTeamService,
@@ -9,7 +9,7 @@
  } 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 toast from "svelte-french-toast";
  export let modal_open;
  export let current_contacts;
  $: selected_team = [];
@@ -85,10 +85,7 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_('contact-is-being-added'),
-        duration: -1,
-      }).showToast();
+      toast.loading($_("contact-is-being-added"));
      let address = {};
      if (address_checked === true) {
        address = {
@@ -122,11 +119,8 @@
          email_input_value = "";
          modal_open = false;
          //
-          Toastify({
-            text: $_('contact-added'),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
+          toast.dismiss();
+          toast.success($_("contact-added"));
          current_contacts.push(result);
          current_contacts = current_contacts;
        })
@@ -135,8 +129,6 @@
        })
        .finally(() => {
          processed_last_submit = true;
-          //
-          toast.hideToast();
        });
    }
  }
@@ -145,58 +137,70 @@
 {#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">
+      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"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                <path
-                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
+                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
+                /></svg
+              >
            </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-contact')}
+                {$_("create-a-new-contact")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-add-a-new-contact')}
+                  {$_(
+                    "please-provide-the-required-information-to-add-a-new-contact"
+                  )}
                </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">{$_('first-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -204,34 +208,41 @@
                    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">
-                      {$_('first-name-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("first-name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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">{$_('last-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -239,23 +250,28 @@
                    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">
-                      {$_('last-name-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("last-name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="team"
-                    class="block text-sm font-medium text-gray-700">{$_('teams')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("teams")}</label
+                  >
                  <select
                    name="team"
                    multiple
                    bind:value={selected_team}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  >
                    {#each teams as team}
                      <option value={team.id}>
                        {team.parentGroup.name}
@@ -271,10 +287,12 @@
                <div class="col-span-6">
                  <label
                    for="phone"
-                    class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -282,21 +300,27 @@
                    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">
-                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
+                      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"
+                      )}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="email"
-                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -304,11 +328,13 @@
                    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">
-                      {$_('valid-email-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("valid-email-is-required")}
                    </span>
                  {/if}
                </div>
@@ -319,22 +345,25 @@
                      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">{$_('address')}</label>
+                    <label for="comments" class="font-medium text-gray-700"
+                      >{$_("address")}</label
+                    >
                  </div>
                </div>
                {#if address_checked === true}
                  <div class="col-span-6">
                    <label
                      for="address1"
-                      class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("address")}</label
+                    >
                    <input
                      autocomplete="off"
-                      placeholder="{$_('address')}"
+                      placeholder={$_("address")}
                      class:border-red-500={!isAddress1Valid}
                      class:focus:border-red-500={!isAddress1Valid}
                      class:focus:ring-red-500={!isAddress1Valid}
@@ -342,34 +371,41 @@
                      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">
-                        {$_('address-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("address-is-required")}
                      </span>
                    {/if}
                  </div>
                  <div class="col-span-6">
                    <label
                      for="address2"
-                      class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("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">{$_('zip-postal-code')}</label>
+                      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}
@@ -377,21 +413,25 @@
                      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">
-                        {$_('valid-zipcode-postal-code-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("valid-zipcode-postal-code-is-required")}
                      </span>
                    {/if}
                  </div>
                  <div class="col-span-6">
                    <label
                      for="city"
-                      class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+                      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}
@@ -399,11 +439,13 @@
                      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">
-                        {$_('valid-city-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("valid-city-is-required")}
                      </span>
                    {/if}
                  </div>
@@ -418,16 +460,18 @@
            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')}
+            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')}
+            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>
--- a/src/components/contacts/ContactDetail.svelte
+++ b/src/components/contacts/ContactDetail.svelte
@@ -6,9 +6,9 @@
    RunnerTeamService,
    RunnerOrganizationService,
  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
  import PromiseError from "../base/PromiseError.svelte";
  import isEmail from "validator/es/lib/isEmail";
+  import toast from "svelte-french-toast";
  let data_loaded = false;
  let orgs = [];
  let teams = [];
@@ -31,7 +31,7 @@
    isEmailValid &&
    isPhoneValidOrEmpty &&
    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
-    editable.address_checked === false);
+      editable.address_checked === false);
  const promise = GroupContactService.groupContactControllerGetOne(
    params.contact
  ).then((data) => {
@@ -42,14 +42,14 @@
    original_data.groups = original_data.groups.map((g) => g.id);
    editable.address_checked = editable.address.address1 !== null;
    original_data.address_checked = editable.address.address1 !== null;
-    if(editable.address_checked===false){
+    if (editable.address_checked === false) {
      editable.address = {
        address1: "",
        address2: "",
        city: "",
        postalcode: "",
-        country: ""
-      }
+        country: "",
+      };
    }
  });
  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
@@ -67,10 +67,7 @@
  $: iscityvalid = editable.address?.city?.trim().length !== 0;
  function submit() {
    if (data_loaded === true && save_enabled) {
-      Toastify({
-        text: $_("contact-is-being-updated"),
-        duration: 2500,
-      }).showToast();
+      toast.loading($_("contact-is-being-updated"));
      editable.address.country = "DE";
      if (editable.address_checked === false) {
        editable.address = null;
@@ -81,12 +78,9 @@
      GroupContactService.groupContactControllerPut(original_data.id, editable)
        .then((resp) => {
          Object.assign(original_data, editable);
-          original_data=original_data;
-          Toastify({
-            text: $_("updated-contact"),
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
+          original_data = original_data;
+          toast.dismiss();
+          toast.success($_("updated-contact"));
        })
        .catch((err) => {});
    } else {
@@ -102,7 +96,7 @@
 </script>

 {#await promise}
-  {$_('loading-contact-details')}
+  {$_("loading-contact-details")}
 {:then}
  <section class="container p-5 select-none">
    <div class="flex flex-row mb-4">
@@ -115,12 +109,15 @@
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                <path
-                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
+                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
+                /></svg
+              >
            </li>
            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_('contacts')}</a><svg
+              <a class="mr-2" href="./">{$_("contacts")}</a><svg
                stroke="currentColor"
                fill="none"
                stroke-width="2"
@@ -130,17 +127,17 @@
                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>
+                xmlns="http://www.w3.org/2000/svg"
+                ><line x1="5" y1="12" x2="19" y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg
+              >
            </li>
            <li class="flex items-center">
-              <span class="mr-2">{original_data.firstname}
-                {original_data.middlename || ''}
-                {original_data.lastname}</span>
+              <span class="mr-2"
+                >{original_data.firstname}
+                {original_data.middlename || ""}
+                {original_data.lastname}</span
+              >
            </li>
          </ol>
        </nav>
@@ -148,19 +145,23 @@
    </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="contact_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")}
          {#if delete_triggered}
            <button
              on:click={deleteContact}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</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"
+              >{$_("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>
+              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
@@ -168,7 +169,9 @@
                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-contact')}</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-contact")}</button
+            >
          {/if}
        {/if}
        {#if !delete_triggered}
@@ -177,112 +180,124 @@
            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">{$_('save-changes')}</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"
+            >{$_("save-changes")}</button
+          >
        {/if}
      </span>
    </div>
    <!--  -->
    <div class="text-sm w-full">
-      <label
-        for="firstname"
-        class="font-medium text-gray-700">{$_('first-name')}</label>
+      <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">
-          {$_('first-name-is-required')}
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("first-name-is-required")}
        </span>
      {/if}
    </div>
    <div class="text-sm w-full">
-      <label
-        for="middlename"
-        class="font-medium text-gray-700">{$_('middle-name')}</label>
+      <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">{$_('last-name')}</label>
+      <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">
-          {$_('last-name-is-required')}
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("last-name-is-required")}
        </span>
      {/if}
    </div>
    <div class="text-sm w-full">
-      <label
-        for="email"
-        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
+      <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">
-          {$_('valid-email-is-required')}
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("valid-email-is-required")}
        </span>
      {/if}
    </div>
    <div class="text-sm w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
+      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
      <input
        autocomplete="off"
-        placeholder={$_('phone')}
+        placeholder={$_("phone")}
        type="tel"
        class:border-red-500={!isPhoneValidOrEmpty}
        class:focus:border-red-500={!isPhoneValidOrEmpty}
        class:focus:ring-red-500={!isPhoneValidOrEmpty}
        bind:value={editable.phone}
        name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
      {#if !isPhoneValidOrEmpty}
        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('valid-international-phone-number-is-required')}
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("valid-international-phone-number-is-required")}
        </span>
      {/if}
    </div>
    <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_('groups')}</span>
+      <span class="font-medium text-gray-700">{$_("groups")}</span>
      <select
        bind:value={editable.groups}
        name="team"
        multiple
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      >
        {#each teams as team}
          <option value={team.id}>
            {team.parentGroup.name}
@@ -303,19 +318,20 @@
          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">{$_('address')}</label>
+        <label for="comments" class="font-medium text-gray-700"
+          >{$_("address")}</label
+        >
      </div>
    </div>
    {#if editable.address_checked === true}
      <div class="col-span-6">
-        <label
-          for="address1"
-          class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+        <label for="address1" class="block text-sm font-medium text-gray-700"
+          >{$_("address")}</label
+        >
        <input
          autocomplete="off"
          placeholder="Address"
@@ -325,65 +341,72 @@
          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">
-            {$_('address-is-required')}
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+          >
+            {$_("address-is-required")}
          </span>
        {/if}
      </div>
      <div class="col-span-6">
-        <label
-          for="address2"
-          class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+        <label for="address2" class="block text-sm font-medium text-gray-700"
+          >{$_("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">{$_('zip-postal-code')}</label>
+        <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">
-            {$_('valid-zipcode-postal-code-is-required')}
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+          >
+            {$_("valid-zipcode-postal-code-is-required")}
          </span>
        {/if}
      </div>
      <div class="col-span-6">
-        <label
-          for="city"
-          class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+        <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">
-            {$_('valid-city-is-required')}
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+          >
+            {$_("valid-city-is-required")}
          </span>
        {/if}
      </div>
--- a/src/components/contacts/Contacts.svelte
+++ b/src/components/contacts/Contacts.svelte
@@ -9,21 +9,22 @@

 <section class="container p-5">
  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('contacts')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
+    {$_("contacts")}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT: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-contact')}
+        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-contact")}
      </button>
    {/if}
  </span>
  <ContactsOverview bind:current_contacts />
 </section>

-{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}
  <AddContactModal bind:current_contacts bind:modal_open />
 {/if}
--- a/src/components/contacts/ContactsEmptyState.svelte
+++ b/src/components/contacts/ContactsEmptyState.svelte
@@ -9,8 +9,8 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
    <img class="w-full h-44" src={team_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-contacts-added-yet')}</span><br />
-    <span>{$_('add-your-first-contact')}</span>
+    <span class="font-bold">{$_("there-are-no-contacts-added-yet")}</span><br />
+    <span>{$_("add-your-first-contact")}</span>
  </p>
 </div>

--- a/src/components/contacts/ContactsOverview.svelte
+++ b/src/components/contacts/ContactsOverview.svelte
@@ -1,6 +1,5 @@
 <script>
  import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
  import { GroupContactService } from "@odit/lfk-client-js";
  const promise = GroupContactService.groupContactControllerGetAll().then(
    (result) => {
@@ -9,18 +8,20 @@
  );
  import store from "../../store";
  import ContactsEmptyState from "./ContactsEmptyState.svelte";
+  import toast from "svelte-french-toast";
  $: searchvalue = "";
  $: active_deletes = [];
  export let current_contacts = [];
 </script>

-{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
  {#await promise}
    <div
      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert">
-      <p class="font-bold">{$_('contacts-are-being-loaded')}</p>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      role="alert"
+    >
+      <p class="font-bold">{$_("contacts-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
  {:then}
    {#if current_contacts.length === 0}
@@ -29,31 +30,36 @@
      <input
        type="search"
        bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
-        aria-label={$_('datatable.search')}
-        class="mb-4" />
+        placeholder={$_("datatable.search")}
+        aria-label={$_("datatable.search")}
+        class="mb-4"
+      />
      <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">
          <thead class="bg-gray-50">
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
              <th
                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('name')}
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("name")}
              </th>
              <th
                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('groups')}
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("groups")}
              </th>
              <th
                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('address')}
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("address")}
              </th>
              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
+                <span class="sr-only">{$_("action")}</span>
              </th>
            </tr>
          </thead>
@@ -63,13 +69,16 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr data-rowid="team_{t.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="team_{t.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">
                          {t.firstname}
-                          {t.middlename || ''}
+                          {t.middlename || ""}
                          {t.lastname}
                        </div>
                      </div>
@@ -81,20 +90,24 @@
                        <div class="text-sm font-medium text-gray-900">
                          {#if t.groups.length > 0}
                            {#each t.groups as g}
-                              {#if g.responseType === 'RUNNERORGANIZATION'}
+                              {#if g.responseType === "RUNNERORGANIZATION"}
                                <a
                                  href="../orgs/{g.id}"
-                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
+                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                                  >{g.name}</a
+                                >
                              {:else}
                                <a
                                  href="../teams/{g.id}"
-                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.parentGroup.name}
+                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                                  >{g.parentGroup.name}
                                  &gt;
-                                  {g.name}</a>
+                                  {g.name}</a
+                                >
                              {/if}
                            {/each}
                          {:else}
-                            {$_('contact-is-not-a-member-in-any-group')}
+                            {$_("contact-is-not-a-member-in-any-group")}
                          {/if}
                        </div>
                      </div>
@@ -106,7 +119,7 @@
                        <div class="text-sm font-medium text-gray-900">
                          {#if t.address.address1 !== null}
                            {t.address.address1}<br />
-                            {t.address.address2 || ''}<br />
+                            {t.address.address2 || ""}<br />
                            {t.address.postalcode}
                            {t.address.city}
                            {t.address.country}
@@ -117,45 +130,53 @@
                  </td>
                  {#if active_deletes[t.id] === true}
                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
                      <button
                        on:click={() => {
                          active_deletes[t.id] = false;
                        }}
                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        >{$_("cancel-delete")}</button
+                      >
                      <button
                        on:click={() => {
-                          GroupContactService.groupContactControllerRemove(t.id, false).then(
-                            (resp) => {
-                              current_contacts = current_contacts.filter(
-                                (obj) => obj.id !== t.id
-                              );
-                              Toastify({
-                                text: $_('contact-deleted'),
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            }
-                          );
+                          toast.loading($_("deleting-contact"));
+                          GroupContactService.groupContactControllerRemove(
+                            t.id,
+                            false
+                          ).then((resp) => {
+                            current_contacts = current_contacts.filter(
+                              (obj) => obj.id !== t.id
+                            );
+                            toast.dismiss();
+                            toast($_("contact-deleted"));
+                          });
                        }}
                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                        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">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
                      <a
                        href="./{t.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
+                        class="text-indigo-600 hover:text-indigo-900"
+                        >{$_("details")}</a
+                      >
+                      {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
                        <button
                          on:click={() => {
                            active_deletes[t.id] = true;
                          }}
                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                          >{$_("delete")}</button
+                        >
                      {/if}
                    </td>
                  {/if}
@@ -169,7 +190,7 @@
  {: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>
+        <b class="capitalize">{$_("general_promise_error")}</b>
        {error}
      </span>
    </div>
--- a/src/components/dashboard/Dashboard.svelte
+++ b/src/components/dashboard/Dashboard.svelte
@@ -1,361 +1,431 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import localForage from "localforage";
-  import store from "../../store";
-  import { router } from "tinro";
-  import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
-  import { AuthService } from "@odit/lfk-client-js";
-  $: navOpen = false;
-  function logout() {
-    localForage.clear();
-    location.replace("/");
-  }
-</script>
-
-<style>
-  .collapsed_navigation {
-    transform: translateX(-100%);
-  }
-  @media (min-width: 768px) {
-    .collapsed_navigation {
-      transform: translateX(0px);
-    }
-  }
-</style>
-
-<section class="min-h-screen bg-gray-50">
-  <div
-    class:collapsed_navigation={!navOpen}
-    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50">
-    <a href="/" class="flex items-center px-4 py-5">
-      <img src="/lfk-logo.png" alt="Logo" class="h-10" />
-      <h3 class="text-lg">Lauf für Kaya! Admin</h3>
-    </a>
-    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
-      <a
-        class:bg-gray-100={$router.path === '/'}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/">
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
-          <path
-            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-        </svg>
-        <span>{$_('dashboard-title')}</span>
-      </a>
-      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
-        <a
-          class:bg-gray-100={$router.path.includes('/orgs/')}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/orgs/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
-          <span>{$_('orgs')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/users/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/users/">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z" /></svg>
-          <span>{$_('users')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/groups/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/groups/">
-          <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"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"><path
-              fill="currentColor"
-              d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
-          <span>{$_('user-groups')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/runners/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/runners/">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
-          <span>{$_('runners')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/teams/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/teams/">
-          <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"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"><path
-              fill="currentColor"
-              d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
-          <span>{$_('teams')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
-        <a
-          class:bg-gray-100={$router.path.includes('/donors/')}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/donors/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" /></svg>
-          <span>{$_('donors')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
-        <a
-          class:bg-gray-100={$router.path.includes('/donations/')}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/donations/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" /></svg>
-          <span>{$_('donations')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('TRACK:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/tracks/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/tracks/">
-          <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"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"><path
-              fill="currentColor"
-              d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
-          <span>{$_('tracks')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/cards/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/cards/">
-          <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"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24">
-            <path fill="none" d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
-          <span>{$_('cards')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/scans/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/scans/">
-          <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"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
-          <span>Scans</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/contacts/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/contacts/">
-          <svg
-            fill="currentColor"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
-          <span>{$_('contacts')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('STATION:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/scanstations/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/scanstations/">
-          <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>{$_('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"
-        href="/settings/">
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
-          <path
-            fill-rule="evenodd"
-            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
-            clip-rule="evenodd" />
-        </svg>
-        <span>{$_('settings')}</span>
-      </a>
-      <a
-        class:bg-gray-100={$router.path === '/about/'}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/about/">
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" />
-          <path d="M12 16v-4M12 8h.01" /></svg>
-        <span>{$_('about')}</span>
-      </a>
-      <span
-        tabindex="0"
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        on:click={() => {
-          AuthService.authControllerLogout();
-          logout();
-        }}>
-        <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"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z" /></svg>
-        <span>{$_('logout')}</span>
-      </span>
-    </nav>
-  </div>
-  <div class="ml-0 transition md:ml-60">
-    <header
-      class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden">
-      <button
-        on:click={() => {
-          navOpen = true;
-        }}
-        class="block btn btn-light md:hidden">
-        <span class="sr-only">Menu</span><svg
-          class="w-4 h-4"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentcolor"><path
-            fill-rule="evenodd"
-            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4A1 1 0 013 5zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-            clip-rule="evenodd" /></svg></button>
-    </header>
-    <slot>
-      <NoComponentLoaded />
-    </slot>
-  </div>
-  {#if navOpen === true}
-    <div
-      on:click={() => {
-        navOpen = false;
-        console.log({ navOpen });
-      }}
-      class:hidden={!navOpen}
-      class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
-  {/if}
-</section>
+<script>
+  import { _ } from "svelte-i18n";
+  import localForage from "localforage";
+  import store from "../../store";
+  import { router } from "tinro";
+  import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
+  import { AuthService } from "@odit/lfk-client-js";
+  import { Toaster } from "svelte-french-toast";
+  $: navOpen = false;
+  function logout() {
+    localForage.clear();
+    location.replace("/");
+  }
+</script>
+
+<section class="min-h-screen bg-gray-50">
+  <div
+    class:collapsed_navigation={!navOpen}
+    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50"
+  >
+    <a href="/" class="flex items-center px-4 py-5">
+      <img src="/lfk-logo.png" alt="Logo" class="h-10" />
+      <h3 class="text-lg font-bold">LfK!Admin</h3>
+    </a>
+    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
+      <a
+        class:bg-gray-100={$router.path === "/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/"
+      >
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+          />
+        </svg>
+        <span>{$_("dashboard-title")}</span>
+      </a>
+      {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
+        <a
+          class:bg-gray-100={$router.path.includes("/orgs/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/orgs/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z"
+            /></svg
+          >
+          <span>{$_("orgs")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/users/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/users/"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z"
+            /></svg
+          >
+          <span>{$_("users")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/groups/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/groups/"
+        >
+          <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"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+            ><path
+              fill="currentColor"
+              d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+            /></svg
+          >
+          <span>{$_("user-groups")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/runners/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/runners/"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+            /></svg
+          >
+          <span>{$_("runners")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/teams/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/teams/"
+        >
+          <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"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+            ><path
+              fill="currentColor"
+              d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+            /></svg
+          >
+          <span>{$_("teams")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
+        <a
+          class:bg-gray-100={$router.path.includes("/donors/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/donors/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
+            /></svg
+          >
+          <span>{$_("donors")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
+        <a
+          class:bg-gray-100={$router.path.includes("/donations/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/donations/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+            /></svg
+          >
+          <span>{$_("donations")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/tracks/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/tracks/"
+        >
+          <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"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+            ><path
+              fill="currentColor"
+              d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z"
+            /></svg
+          >
+          <span>{$_("tracks")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/cards/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/cards/"
+        >
+          <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"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
+            /></svg
+          >
+          <span>{$_("cards")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/scans/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/scans/"
+        >
+          <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"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+            /></svg
+          >
+          <span>Scans</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/contacts/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/contacts/"
+        >
+          <svg
+            fill="currentColor"
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
+            /></svg
+          >
+          <span>{$_("contacts")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/scanstations/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/scanstations/"
+        >
+          <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>{$_("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"
+        href="/settings/"
+      >
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        <span>{$_("settings")}</span>
+      </a>
+      <a
+        class:bg-gray-100={$router.path === "/about/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/about/"
+      >
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"
+          ><circle cx="12" cy="12" r="10" />
+          <path d="M12 16v-4M12 8h.01" /></svg
+        >
+        <span>{$_("about")}</span>
+      </a>
+      <button
+        tabindex="0"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        on:click={() => {
+          AuthService.authControllerLogout();
+          logout();
+        }}
+      >
+        <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"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z"
+          /></svg
+        >
+        <span>{$_("logout")}</span>
+      </button>
+    </nav>
+  </div>
+  <div class="ml-0 transition md:ml-60">
+    <header
+      class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden"
+    >
+      <button
+        on:click={() => {
+          navOpen = true;
+        }}
+        class="block btn btn-light md:hidden"
+      >
+        <span class="sr-only">Menu</span><svg
+          class="w-4 h-4"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentcolor"
+          ><path
+            fill-rule="evenodd"
+            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4A1 1 0 013 5zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            clip-rule="evenodd"
+          /></svg
+        ></button
+      >
+    </header>
+    <Toaster position="top-right" />
+    <slot>
+      <NoComponentLoaded />
+    </slot>
+  </div>
+  {#if navOpen === true}
+    <button
+      on:click={() => {
+        navOpen = false;
+      }}
+      class:hidden={!navOpen}
+      class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden"
+    />
+  {/if}
+</section>
+
+<style>
+  .collapsed_navigation {
+    transform: translateX(-100%);
+  }
+  @media (min-width: 768px) {
+    .collapsed_navigation {
+      transform: translateX(0px);
+    }
+  }
+</style>
--- a/src/components/dashboard/MainDashContent.svelte
+++ b/src/components/dashboard/MainDashContent.svelte
@@ -1,31 +1,20 @@
 <script>
  import { _ } from "svelte-i18n";
  import { StatsService } from "@odit/lfk-client-js";
-  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>
-      -
-      {$_("dashboard-greeting")},
-      <span class="text-blue-500"
-        >{store.state.jwtinfo.userdetails.firstname}
-        {store.state.jwtinfo.userdetails.lastname}</span
-      ></span
+<div class="p-2 md:p-5 overflow-x-hidden">
+  <h1 class="text-3xl leading-tight mb-4">
+    {$_("dashboard-greeting")},
+    <span class="text-blue-500"
+      >{store.state.jwtinfo.userdetails.firstname}
+      {store.state.jwtinfo.userdetails.lastname}</span
    >
  </h1>
-  <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"
@@ -35,7 +24,9 @@
      <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">
+    <div
+      class="grid gap-2 grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 sm:gap-4"
+    >
      <StatCard
        title={$_("runners")}
        value={stats.total_runners}
@@ -59,23 +50,83 @@
        href="/scans/"
      >
        <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"
+          height="24"
          xmlns="http://www.w3.org/2000/svg"
-          ><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" /></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={`${parseFloat(stats.average_donation / 100).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 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-donations")}
-        value={`${(stats.total_donation / 100).toFixed(2)} €`}
+        value={`${parseFloat(stats.total_donation / 100).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}`}
        href="/donations/"
      >
        <svg
@@ -91,8 +142,30 @@
      </StatCard>
      <StatCard
        title={$_("total-distance")}
-        value={`${stats.total_distance / 1000} km`}
-        href="#"
+        value={`${stats.total_distance / 1000}km`}
+        href="/scans/"
+      >
+        <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={`${parseFloat(stats.average_distance / 1000).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}km`}
+        href="/scans/"
      >
        <svg
          fill="currentColor"
--- a/src/components/dashboard/StatCard.svelte
+++ b/src/components/dashboard/StatCard.svelte
@@ -1,22 +1,21 @@
 <script>
  import { _ } from "svelte-i18n";

-  export let href = "#"
+  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">
+<a {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">
+        <div class="text-xs uppercase font-normal text-grey-500">
          {title}
        </div>
-        <div class="text-xl font-bold">{value}</div>
+        <div class="text-xl font-bold font-mono">{value}</div>
      </div>
-      <slot></slot>
+      <slot />
    </div>
  </div>
 </a>
--- a/src/components/donations/AddDonationModal.svelte
+++ b/src/components/donations/AddDonationModal.svelte
@@ -1,41 +1,28 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+
  import {
    DonationService,
    DonorService,
    RunnerService,
  } from "@odit/lfk-client-js";
  import Select from "svelte-select";
-  import Toastify from "toastify-js";
-import { is_promise } from "svelte/internal";
+  import { createEventDispatcher, onMount } from "svelte";
+  import toast from "svelte-french-toast";
  export let modal_open;
-  export let current_donations;
+  const dispatch = createEventDispatcher();
  const getDonorLabel = (option) =>
    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
  const filterDonors = (label, filterText, option) =>
    label.toLowerCase().includes(filterText.toLowerCase()) ||
    option.value.id.toString().startsWith(filterText.toLowerCase());
-  function focus(el) {
-    el.focus();
-  }
  $: donor = 0;
  $: runner = 0;
  $: donors = [];
  $: runners = [];
  $: is_fixed = false;
  $: is_paid = false;
-  DonorService.donorControllerGetAll().then((val) => {
-    donors = val.map((r) => {
-      return { label: getDonorLabel(r), value: r };
-    });
-  });
-  RunnerService.runnerControllerGetAll().then((val) => {
-    runners = val.map((r) => {
-      return { label: getDonorLabel(r), value: r };
-    });
-  });
  $: amount_input = 0;
  $: processed_last_submit = true;
  $: is_amount_valid = amount_input > 0;
@@ -58,17 +45,14 @@ import { is_promise } from "svelte/internal";
    if (processed_last_submit === true) {
      let amount_cent = Math.floor(amount_input * 100);
      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_('adding-donation'),
-        duration: -1,
-      }).showToast();
+      toast.loading($_("adding-donation"));
      if (is_fixed) {
        let postdata = {
          donor,
          amount: amount_cent,
-          paidAmount: 0
+          paidAmount: 0,
        };
-        if(is_paid){
+        if (is_paid) {
          postdata.paidAmount = amount_cent;
        }
        DonationService.donationControllerPostFixed(postdata)
@@ -78,21 +62,15 @@ import { is_promise } from "svelte/internal";
            amount_input = 0;
            modal_open = false;
            //
-            Toastify({
-              text: $_('donation_added'),
-              duration: 500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-            current_donations.push(result);
-            current_donations = current_donations;
+            toast.dismiss();
+            toast.success($_("donation_added"));
+            dispatch("created", { donations: [result] });
          })
          .catch((err) => {
            //
          })
          .finally(() => {
            processed_last_submit = true;
-            //
-            toast.hideToast();
          });
      } else {
        let postdata = {
@@ -107,27 +85,238 @@ import { is_promise } from "svelte/internal";
            amount_input = 0;
            modal_open = false;
            //
-            Toastify({
-              text: $_('donation_added'),
-              duration: 500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-            current_donations.push(result);
-            current_donations = current_donations;
+            toast.dismiss();
+            toast.success($_("donation_added"));
+            dispatch("created", { donations: [result] });
          })
          .catch((err) => {
            //
          })
          .finally(() => {
            processed_last_submit = true;
-            //
-            toast.hideToast();
          });
      }
    }
  }
+
+  onMount(async () => {
+    toast.loading($_("loading-donors"));
+    donors = (await DonorService.donorControllerGetAll()).map(
+      (r) => {
+        return { label: getDonorLabel(r), value: r };
+      }
+    );
+    runners = (await RunnerService.runnerControllerGetAll()).map(
+      (r) => {
+        return { label: getDonorLabel(r), value: r };
+      }
+    );
+    toast.dismiss();
+    toast.success($_("all-donors-loaded"));
+  });
 </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 {
    content: "";
@@ -152,173 +341,3 @@ import { is_promise } from "svelte/internal";
    left: 1.25rem;
  }
 </style>
-
-{#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}
--- a/src/components/donations/AddDonationPaymentModal.svelte
+++ b/src/components/donations/AddDonationPaymentModal.svelte
@@ -1,19 +1,17 @@
 <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";
+  import toast from "svelte-french-toast";
  export let payment_modal_open = false;
-  export let current_donations = [];
-  export let editable = {};
  export let original_data = {};
  export let paid_amount_input = 0;
-  $:processed_last_submit=true;
-  function focus(el) {
-    el.focus();
-  }
-  $: createbtnenabled = is_paid_amount_valid && !(paid_amount_input*100 == original_data.paidAmount)
+  const dispatch = createEventDispatcher();
+  $: processed_last_submit = true;
+  $: createbtnenabled =
+    is_paid_amount_valid &&
+    !(paid_amount_input * 100 == original_data.paidAmount);
  $: is_paid_amount_valid = paid_amount_input > 0;
  (() => {
    document.onkeydown = (e) => {
@@ -32,62 +30,45 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_('updating-donation'),
-        duration: -1,
-      }).showToast();
+      toast.loading($_("updating-donation"));
+      const editable = Object.assign({}, original_data);
      editable.donor = editable.donor.id;
-      editable.paidAmount = paid_amount_input*100;
-      if(editable.responseType == "DISTANCEDONATION" || editable.runner){
+      editable.paidAmount = Math.round(paid_amount_input * 100);
+      if (editable.responseType == "DISTANCEDONATION" || editable.runner) {
        editable.runner = editable.runner.id;
-        DonationService.donationControllerPutDistance(original_data.id, editable)
-        .then((result) => {
-          let id = original_data.id;
-          editable = {};
-          original_data = {};
-          payment_modal_open = false;
-          //
-          Toastify({
-            text: $_('donation-updated'),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          current_donations[current_donations.findIndex((c) => c.id === id)] = result;
-          current_donations = current_donations;
-        })
-        .catch((err) => {
-          //
-        })
-        .finally(() => {
-          processed_last_submit = true;
-          //
-          toast.hideToast();
-        });
-      }
-      else{
-          DonationService.donationControllerPutFixed(original_data.id, editable)
-        .then((result) => {
-          let id = original_data.id;
-          editable = {};
-          original_data = {};
-          payment_modal_open = false;
-          //
-          Toastify({
-            text: $_('donation-updated'),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          current_donations[current_donations.findIndex((c) => c.id === id)] = result;
-          current_donations = current_donations;
-        })
-        .catch((err) => {
-          //
-        })
-        .finally(() => {
-          processed_last_submit = true;
-          //
-          toast.hideToast();
-        });
+        DonationService.donationControllerPutDistance(
+          original_data.id,
+          editable
+        )
+          .then((result) => {
+            payment_modal_open = false;
+            //
+            toast.dismiss();
+
+            toast.success($_("donation-updated"));
+            dispatch("created", { donation: result });
+          })
+          .catch((err) => {
+            //
+          })
+          .finally(() => {
+            processed_last_submit = true;
+          });
+      } else {
+        DonationService.donationControllerPutFixed(original_data.id, editable)
+          .then((result) => {
+            payment_modal_open = false;
+            //
+            toast.dismiss();
+            toast.success($_("donation-updated"));
+            dispatch("created", { donation: result });
+          })
+          .catch((err) => {
+            //
+          })
+          .finally(() => {
+            processed_last_submit = true;
+          });
      }
    }
  }
@@ -96,57 +77,71 @@
 {#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">
+      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"><path fill="none" d="M0 0h24v24H0z" />
+                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>
+                  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')}
+                {$_("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')}
+                  {$_(
+                    "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
+                    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}
@@ -156,47 +151,55 @@
                      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" />
+                      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>
+                      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>
+                      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')}
+                      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 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
@@ -0,0 +1,122 @@
+<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
@@ -6,7 +6,8 @@
    DonorService,
    RunnerService,
  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+  import toast from 'svelte-french-toast'
+
  import PromiseError from "../base/PromiseError.svelte";
  import Select from "svelte-select";
  let data_loaded = false;
@@ -33,7 +34,7 @@
      !(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
    (original_data.responseType !== "DISTANCEDONATION" &&
      !(Math.floor(amount_input * 100) === original_data.amount)) ||
-      !(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
+    !(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
  $: save_enabled = changes_performed && is_amount_valid && is_everything_set;

  const promise = DonationService.donationControllerGetOne(
@@ -69,12 +70,9 @@

  function submit() {
    if (data_loaded === true && save_enabled) {
-      Toastify({
-        text: $_('updating-donation'),
-        duration: 2500,
-      }).showToast();
+      toast($_("updating-donation"));
      let postdata = {};
-      editable.paidAmount = paid_amount_input*100;
+      editable.paidAmount = paid_amount_input * 100;
      if (original_data.responseType === "DISTANCEDONATION") {
        editable.amountPerDistance = Math.floor(amount_input * 100);
        postdata = Object.assign(postdata, editable);
@@ -87,11 +85,7 @@
          .then((resp) => {
            Object.assign(original_data, editable);
            original_data = original_data;
-            Toastify({
-              text: $_('donation-updated'),
-              duration: 2500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
+            toast.success($_("donation-updated"));
          })
          .catch((err) => {});
      } else {
@@ -102,11 +96,7 @@
          .then((resp) => {
            Object.assign(original_data, editable);
            original_data = original_data;
-            Toastify({
-              text: $_('donation-updated'),
-              duration: 2500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
+            toast.success($_("donation-updated"));
          })
          .catch((err) => {});
      }
@@ -116,11 +106,7 @@
  function deleteDonation() {
    DonationService.donationControllerRemove(original_data.id, false)
      .then((resp) => {
-        Toastify({
-          text: $_('donation-deleted'),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
+        toast($_("donation-deleted"));
        location.replace("./");
      })
      .catch((err) => {
@@ -131,7 +117,7 @@
 </script>

 {#await promise}
-  {$_('loading-donation-details')}
+  {$_("loading-donation-details")}
 {:then}
  <section class="container p-5 select-none">
    <div class="flex flex-row mb-4">
@@ -144,12 +130,15 @@
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                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>
+                  d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+                /></svg
+              >
            </li>
            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_('donations')}</a><svg
+              <a class="mr-2" href="./">{$_("donations")}</a><svg
                stroke="currentColor"
                fill="none"
                stroke-width="2"
@@ -159,12 +148,10 @@
                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>
+                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>
@@ -175,28 +162,32 @@
    </div>
    <div class="mb-8 text-3xl font-extrabold leading-tight">
      {original_data.donor.firstname}
-      {original_data.donor.middlename || ''}
+      {original_data.donor.middlename || ""}
      {original_data.donor.lastname}
      &gt;
-      {#if original_data.responseType == 'DISTANCEDONATION'}
+      {#if original_data.responseType == "DISTANCEDONATION"}
        {original_data.runner.firstname}
-        {original_data.runner.middlename || ''}
+        {original_data.runner.middlename || ""}
        {original_data.runner.lastname}
      {:else}
-        {$_('fixed-donation')}:
-        {amount_input.toFixed(2).toLocaleString('de-DE', { valute: 'EUR' })}€
+        {$_("fixed-donation")}:
+        {amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
      {/if}
      <span data-id="donation_actions_${original_data.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
          {#if delete_triggered}
            <button
              on:click={deleteDonation}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              >{$_("confirm-deletion")}</button
+            >
            <button
              on:click={() => {
                delete_triggered = !delete_triggered;
              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
+              >{$_("cancel")}</button
+            >
          {/if}
          {#if !delete_triggered}
            <button
@@ -204,7 +195,9 @@
                delete_triggered = true;
              }}
              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-donation')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              >{$_("delete-donation")}</button
+            >
          {/if}
        {/if}
        {#if !delete_triggered}
@@ -213,72 +206,91 @@
            class:opacity-50={!save_enabled}
            type="button"
            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:">{$_('save-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
+            >{$_("save-changes")}</button
+          >
        {/if}
      </span>
    </div>
    <!--  -->
    <div>
+      <span class="font-medium text-gray-700"
+        >{$_("total-donation-amount")}:</span
+      >
      <span
-        class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
-      <span>{(editable.amount / 100)
+        >{(editable.amount / 100)
          .toFixed(2)
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+          .toLocaleString("de-DE", { valute: "EUR" })}€</span
+      >
      |
+      <span class="font-medium text-gray-700">{$_("paid-amount")}:</span>
      <span
-        class="font-medium text-gray-700">{$_('paid-amount')}:</span>
-      <span>{(editable.paidAmount / 100)
+        >{(editable.paidAmount / 100)
          .toFixed(2)
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+          .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}
+      <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>
+    <br />
    <div class=" w-full">
-      <label
-        for="donor"
-        class="block  font-medium text-gray-700">{$_('donor')}</label>
+      <label for="donor" class="block font-medium text-gray-700"
+        >{$_("donor")}</label
+      >
      <Select
        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
+        itemFilter={(label, filterText, option) =>
+          filterDonors(label, filterText, option)}
        items={current_donors}
        showChevron={true}
-        placeholder={$_('search-for-donor-name-or-id')}
-        noOptionsMessage={$_('no-donors-found')}
+        placeholder={$_("search-for-donor-name-or-id")}
+        noOptionsMessage={$_("no-donors-found")}
        bind:selectedValue={donor}
-        on:select={(selectedValue) => {editable.donor = selectedValue.detail.value; editable.donor.donationAmount=original_data.donor.donationAmount; editable.donor.paidDonationAmount =original_data.donor.paidDonationAmount}}
-        on:clear={() => (editable.donor = null)} />
+        on:select={(selectedValue) => {
+          editable.donor = selectedValue.detail.value;
+          editable.donor.donationAmount = original_data.donor.donationAmount;
+          editable.donor.paidDonationAmount =
+            original_data.donor.paidDonationAmount;
+        }}
+        on:clear={() => (editable.donor = null)}
+      />
    </div>
-    {#if original_data.responseType == 'DISTANCEDONATION'}
+    {#if original_data.responseType == "DISTANCEDONATION"}
      <div class=" w-full">
-        <label
-          for="donor"
-          class="block  font-medium text-gray-700">{$_('runner')}</label>
+        <label for="donor" class="block font-medium text-gray-700"
+          >{$_("runner")}</label
+        >
        <Select
          containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-          itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
+          itemFilter={(label, filterText, option) =>
+            filterDonors(label, filterText, option)}
          items={current_runners}
          showChevron={true}
-          placeholder={$_('search-for-runner-by-name-or-id')}
-          noOptionsMessage={$_('no-runners-found')}
+          placeholder={$_("search-for-runner-by-name-or-id")}
+          noOptionsMessage={$_("no-runners-found")}
          bind:selectedValue={runner}
-          on:select={(selectedValue) => (editable.runner = selectedValue.detail.value)}
-          on:clear={() => (editable.runner = null)} />
+          on:select={(selectedValue) =>
+            (editable.runner = selectedValue.detail.value)}
+          on:clear={() => (editable.runner = null)}
+        />
      </div>
    {/if}
    <div class=" w-full">
      <label for="lastname" class="font-medium text-gray-700">
-        {#if original_data.responseType == 'DISTANCEDONATION'}
-          {$_('amount-per-kilometer')}
-        {:else}{$_('donation-amount')}{/if}
+        {#if original_data.responseType == "DISTANCEDONATION"}
+          {$_("amount-per-kilometer")}
+        {:else}{$_("donation-amount")}{/if}
      </label>
      <div class="mt-1 flex rounded-md shadow-sm">
        <input
@@ -291,49 +303,61 @@
          step="0.01"
          name="donation_amount_eur"
          class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 p-2"
-          placeholder="2.00" />
+          placeholder="2.00"
+        />
        <span
-          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 ">€</span>
+          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500"
+          >€</span
+        >
      </div>
      {#if !is_amount_valid}
        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('donation-amount-must-be-greater-that-0-00eur')}
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("donation-amount-must-be-greater-that-0-00eur")}
        </span>
      {/if}
    </div>
    <div class="w-full">
-      <label
-        for="token"
-        class="block text-sm font-medium text-gray-700">{$_('paid-amount')}</label>
-      <div class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full">
+      <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}
+          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}
--- a/src/components/donations/DonationDonor.svelte
+++ b/src/components/donations/DonationDonor.svelte
@@ -0,0 +1,18 @@
+<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
@@ -0,0 +1,18 @@
+<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
@@ -0,0 +1,16 @@
+<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
@@ -0,0 +1,21 @@
+<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,25 +5,32 @@
  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')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:CREATE')}
+    {$_("donations")}
+    {#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">
-        {$_('add-donation')}
+        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")}
      </button>
    {/if}
  </span>
-  <DonationsOverview bind:current_donations />
+  <DonationsOverview bind:current_donations bind:addDonations />
 </section>

-{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:CREATE')}
-  <AddDonationModal bind:current_donations bind:modal_open />
+{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
+  <AddDonationModal
+    on:created={(event) => {
+      addDonations(event.detail.donations);
+    }}
+    bind:modal_open
+  />
 {/if}
--- a/src/components/donations/DonationsEmptyState.svelte
+++ b/src/components/donations/DonationsEmptyState.svelte
@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
    <img class="m-auto" style="height:15rem" src={donations_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-donations-yet')}</span><br />
-    <span>{$_('add-your-fist-donation')}</span>
+    <span class="font-bold">{$_("there-are-no-donations-yet")}</span><br />
+    <span>{$_("add-your-fist-donation")}</span>
  </p>
 </div>
--- a/src/components/donations/DonationsOverview.svelte
+++ b/src/components/donations/DonationsOverview.svelte
@@ -1,235 +1,291 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import { DonationService, DonorService } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import { DonationService } 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";
+  import toast from "svelte-french-toast";
  $: searchvalue = "";
  $: active_deletes = [];
+  $: active_edits = [];
+  $: selected =
+    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
+  $: dataLoaded = false;
+
  export let current_donations = [];
-  export let payment_modal_open = false;
-  export let editable = {};
-  export let original_data = {};
-  export let paid_amount_input = 0;
-  const donations_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;
-  }
-  function open_payment_modal(donation) {
-    editable = Object.assign({}, donation);
-    original_data = Object.assign({}, donation);
-    paid_amount_input = (donation.paidAmount/100).toFixed(2);
-    payment_modal_open = true;
+  export const addDonations = (donations) => {
+    current_donations = current_donations.concat(...donations);
+    options.update((options) => ({
+      ...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,
+    }));
+    toast($_("donation-deleted"));
  }
+
+  onMount(async () => {
+    let page = 0;
+    let pagesize = 300;
+    while (page >= 0) {
+      const donations = await DonationService.donationControllerGetAll(
+        page,
+        pagesize
+      );
+      if (donations.length == 0) {
+        page = -2;
+      }
+
+      current_donations = current_donations.concat(...donations);
+      options.update((options) => ({
+        ...options,
+        data: current_donations,
+      }));
+
+      dataLoaded = true;
+      page++;
+    }
+  });
 </script>

-<AddDonationPaymentModal bind:current_donations bind:original_data bind:editable bind:paid_amount_input bind:payment_modal_open />
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
-  {#await donations_promise}
+<AddDonationPaymentModal
+  original_data={active_edits[0]}
+  payment_modal_open={active_edits.length > 0}
+  paid_amount_input={(active_edits[0]?.paidAmount || 0) / 100}
+  on:created={(event) => {
+    current_donations = current_donations.map((d)=>{
+      if(d.id === event.detail.donation.id){
+        d.paidAmount = event.detail.donation.paidAmount;
+      }
+      return d;
+    })
+    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">
-      <p class="font-bold">donations are being loaded</p>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      role="alert"
+    >
+      <p class="font-bold">{$_("donations-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
-  {:then}
-    {#if current_donations.length === 0}
-      <DonationsEmptyState />
-    {: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">
-                {$_('donor')}
-              </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">
-                {$_('amount-per-kilometer')}
-              </th>
-              <th
-                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="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('paid-amount')}
-              </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>
+  {:else if current_donations.length === 0}
+    <DonationsEmptyState />
+  {: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="w-full">
+        <thead class="border-b border-gray-400">
+          {#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>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#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>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="text-sm font-medium text-gray-900">
-                      {(donation.paidAmount / 100)
-                        .toFixed(2)
-                        .toLocaleString('de-DE', { valute: 'EUR' })}€
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if donation.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}
-                  </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">
-                      <button
-                        on:click={() => {open_payment_modal(donation);}}
-                        class="text-[#025a21] hover:text-green-900 mr-4">{$_('enter-payment')}</button>
-                      <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>
+          {/each}
+        </thead>
+        <tbody>
+          {#each $table.getRowModel().rows as row}
+            <tr class="odd:bg-white even:bg-gray-100">
+              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+                <InputElement
+                  type="checkbox"
+                  checked={row.getIsSelected()}
+                  on:change={() => row.toggleSelected()}
+                />
+              </td>
+              {#each row.getVisibleCells() as cell}
+                <td>
+                  <svelte:component
+                    this={flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    )}
+                  />
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
    </div>
-  {/await}
+    <div class="h-2" />
+    <TableBottom {table} {selected} />
+  {/if}
 {/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>
--- a/src/components/donors/AddDonorModal.svelte
+++ b/src/components/donors/AddDonorModal.svelte
@@ -1,15 +1,14 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
-  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";
+  import toast from "svelte-french-toast";
  export let modal_open;
-  export let current_donors;
  let firstname_input;
  let lastname_input;
  let middlename_input;
@@ -19,6 +18,7 @@
  let address_input2;
  let address_zipcode;
  let address_city;
+  const dispatch = createEventDispatcher();
  function focus(el) {
    el.focus();
  }
@@ -74,10 +74,7 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_('donor-is-being-added'),
-        duration: -1,
-      }).showToast();
+      toast.loading($_("donor-is-being-added"));
      let address = {};
      if (address_checked === true) {
        address = {
@@ -92,7 +89,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,21 +108,15 @@
          email_input_value = "";
          modal_open = false;
          //
-          Toastify({
-            text: $_('donor-added'),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          current_donors.push(result);
-          current_donors = current_donors;
+          toast.dismiss();
+          toast.success($_("donor-added"));
+          dispatch("created", { donors: [result] });
        })
        .catch((err) => {
          //
        })
        .finally(() => {
          processed_last_submit = true;
-          //
-          toast.hideToast();
        });
    }
  }
@@ -134,58 +125,70 @@
 {#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">
+      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"><path fill="none" d="M0 0h24v24H0z" />
+                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>
+                  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
+              >
            </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">{$_('first-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -193,34 +196,41 @@
                    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">
-                      {$_('first-name-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("first-name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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">{$_('last-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -228,21 +238,25 @@
                    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">
-                      {$_('last-name-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("last-name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="phone"
-                    class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -250,21 +264,27 @@
                    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">
-                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
+                      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"
+                      )}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="email"
-                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -272,11 +292,13 @@
                    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">
-                      {$_('valid-email-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("valid-email-is-required")}
                    </span>
                  {/if}
                </div>
@@ -287,19 +309,22 @@
                      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">{$_('receipt-needed')}</label>
+                    <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">{$_('address')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("address")}</label
+                    >
                    <input
                      autocomplete="off"
                      placeholder="Address"
@@ -310,34 +335,41 @@
                      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">
-                        {$_('address-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("address-is-required")}
                      </span>
                    {/if}
                  </div>
                  <div class="col-span-6">
                    <label
                      for="address2"
-                      class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("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">{$_('zip-postal-code')}</label>
+                      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}
@@ -345,18 +377,22 @@
                      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">
-                        {$_('valid-zipcode-postal-code-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("valid-zipcode-postal-code-is-required")}
                      </span>
                    {/if}
                  </div>
                  <div class="col-span-6">
                    <label
                      for="city"
-                      class="block text-sm font-medium text-gray-700">City</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >City</label
+                    >
                    <input
                      autocomplete="off"
                      placeholder="City"
@@ -367,11 +403,13 @@
                      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">
-                        {$_('valid-city-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("valid-city-is-required")}
                      </span>
                    {/if}
                  </div>
@@ -386,16 +424,18 @@
            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')}
+            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')}
+            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>
--- a/src/components/donors/ConfirmDonorDeletion.svelte
+++ b/src/components/donors/ConfirmDonorDeletion.svelte
@@ -1,9 +1,9 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+
  import { DonorService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
  import { createEventDispatcher } from "svelte";
  export let modal_open;
  export let delete_donor;
@@ -13,60 +13,61 @@
    dispatch("cancelDelete", { id: delete_donor.id });
  }
  function deleteDonor() {
-    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) => {});
+    dispatch("delete", { id: delete_donor.id });
  }
 </script>

 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
    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">
-              <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>
+              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
+              >
            </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')}
+                  <br />
+                  {$_("all-associated-donations-will-get-deleted-as-well")}
                </p>
              </div>
            </div>
@@ -76,14 +77,16 @@
          <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">
-            {$_('confirm-delete-donor-with-all-donations')}
+            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")}
          </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-donor')}
+            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")}
          </button>
        </div>
      </div>
--- a/src/components/donors/DonorAddress.svelte
+++ b/src/components/donors/DonorAddress.svelte
@@ -0,0 +1,14 @@
+<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
@@ -2,16 +2,16 @@
  import { _ } from "svelte-i18n";
  import store from "../../store";
  import { DonorService, DonationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
  import PromiseError from "../base/PromiseError.svelte";
  import isEmail from "validator/es/lib/isEmail";
  import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
+  import toast from "svelte-french-toast";
  let data_loaded = false;
  export let params;
  $: delete_triggered = false;
  $: original_data = {};
  $: editable = {};
-  $: current_donations = [];
  $: changes_performed = !(
    JSON.stringify(original_data) === JSON.stringify(editable)
  );
@@ -28,11 +28,6 @@
    isPhoneValidOrEmpty &&
    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
      editable.address_checked === false);
-  const donation_promise = DonationService.donationControllerGetAll().then(
-    (val) => {
-      current_donations = val;
-    }
-  );
  const promise = DonorService.donorControllerGetOne(params.donorid).then(
    (data) => {
      data_loaded = true;
@@ -62,27 +57,22 @@
  let delete_donor = {};
  function submit() {
    if (data_loaded === true && save_enabled) {
-      Toastify({
-        text: $_("donor-is-being-updated"),
-        duration: 2500,
-      }).showToast();
+      toast($_("donor-is-being-updated"));
      editable.address.country = "DE";
      if (editable.address_checked === false) {
        editable.address = null;
      }
      if (editable.email) editable.email = editable.email;
+      else editable.email = null;
      if (editable.phone) editable.phone = editable.phone;
+      else editable.phone = null;
      if (editable.middlename) editable.middlename = editable.middlename;
      editable.receiptNeeded = editable.address_checked;
      DonorService.donorControllerPut(original_data.id, editable)
        .then((resp) => {
          Object.assign(original_data, editable);
          original_data = original_data;
-          Toastify({
-            text: $_("updated-donor"),
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
+          toast.success($_("updated-donor"));
        })
        .catch((err) => {});
    } else {
@@ -91,11 +81,7 @@
  function deleteDonor() {
    DonorService.donorControllerRemove(original_data.id, false)
      .then((resp) => {
-        Toastify({
-          text: $_("donor-deleted"),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
+        toast($_("donor-deleted"));
        location.replace("./");
      })
      .catch((err) => {
@@ -106,8 +92,8 @@
 </script>

 <ConfirmDonorDeletion bind:modal_open bind:delete_donor />
-{#await promise && donation_promise}
-  {$_('loading-donor-details')}
+{#await promise}
+  {$_("loading-donor-details")}
 {:then}
  <section class="container p-5 select-none">
    <div class="flex flex-row mb-4">
@@ -120,12 +106,15 @@
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                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>
+                  d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
+                /></svg
+              >
            </li>
            <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_('donors')}</a><svg
+              <a class="mr-2" href="./">{$_("donors")}</a><svg
                stroke="currentColor"
                fill="none"
                stroke-width="2"
@@ -135,17 +124,17 @@
                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>
+                xmlns="http://www.w3.org/2000/svg"
+                ><line x1="5" y1="12" x2="19" y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg
+              >
            </li>
            <li class="flex items-center">
-              <span class="mr-2">{original_data.firstname}
-                {original_data.middlename || ''}
-                {original_data.lastname}</span>
+              <span class="mr-2"
+                >{original_data.firstname}
+                {original_data.middlename || ""}
+                {original_data.lastname}</span
+              >
            </li>
          </ol>
        </nav>
@@ -153,19 +142,23 @@
    </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="donor_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:DELETE")}
          {#if delete_triggered}
            <button
              on:click={deleteDonor}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              >{$_("confirm-deletion")}</button
+            >
            <button
              on:click={() => {
                delete_triggered = !delete_triggered;
              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
+              >{$_("cancel")}</button
+            >
          {/if}
          {#if !delete_triggered}
            <button
@@ -173,7 +166,9 @@
                delete_triggered = true;
              }}
              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-donor')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              >{$_("delete-donor")}</button
+            >
          {/if}
        {/if}
        {#if !delete_triggered}
@@ -182,135 +177,154 @@
            class:opacity-50={!save_enabled}
            type="button"
            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:">{$_('save-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
+            >{$_("save-changes")}</button
+          >
        {/if}
      </span>
    </div>
    <!--  -->
    <div>
+      <span class="font-medium text-gray-700"
+        >{$_("total-donation-amount")}:</span
+      >
      <span
-        class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
-      <span>{(editable.donationAmount / 100)
+        >{(editable.donationAmount / 100)
          .toFixed(2)
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+          .toLocaleString("de-DE", { valute: "EUR" })}€</span
+      >
      |
+      <span class="font-medium text-gray-700">{$_("total-paid-amount")}:</span>
      <span
-        class="font-medium text-gray-700">{$_('total-paid-amount')}:</span>
-      <span>{(editable.paidDonationAmount / 100)
+        >{(editable.paidDonationAmount / 100)
          .toFixed(2)
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+          .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}
-        {#each current_donations.filter((o) => o.donor.id == editable.id) as d}
-          {#if d.responseType === 'DISTANCEDONATION'}
+      <span class="font-medium text-gray-700">{$_("donations")}:</span>
+      {#if original_data.donations.length > 0}
+        {#each original_data.donations as d}
+          {#if d.responseType === "DISTANCEDONATION"}
            <a
              href="../donations/{d.id}"
-              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1">{d.runner.firstname}
+              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>
+              {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')}:
+              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>
+                .toLocaleString("de-DE", { valute: "EUR" })}€</a
+            >
          {/if}
        {/each}
-      {:else}{$_('donor-has-no-associated-donations')}{/if}
+      {:else}{$_("donor-has-no-associated-donations")}{/if}
    </div>
    <div class=" w-full">
-      <label
-        for="firstname"
-        class="font-medium text-gray-700">{$_('first-name')}</label>
+      <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: 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: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
      {#if !isFirstnameValid}
        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('first-name-is-required')}
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("first-name-is-required")}
        </span>
      {/if}
    </div>
    <div class=" w-full">
-      <label
-        for="middlename"
-        class="font-medium text-gray-700">{$_('middle-name')}</label>
+      <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: 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: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
    </div>
    <div class=" w-full">
-      <label
-        for="lastname"
-        class="font-medium text-gray-700">{$_('last-name')}</label>
+      <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: 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: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
      {#if !isLastnameValid}
        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('last-name-is-required')}
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("last-name-is-required")}
        </span>
      {/if}
    </div>
    <div class=" w-full">
-      <label
-        for="email"
-        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
+      <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: 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: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
      {#if !isEmailValid}
        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('valid-email-is-required')}
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("valid-email-is-required")}
        </span>
      {/if}
    </div>
    <div class=" w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
+      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
      <input
        autocomplete="off"
-        placeholder={$_('phone')}
+        placeholder={$_("phone")}
        type="tel"
        class:border-red-500={!isPhoneValidOrEmpty}
        class:focus:border-red-500={!isPhoneValidOrEmpty}
        class:focus:ring-red-500={!isPhoneValidOrEmpty}
        bind:value={editable.phone}
        name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
      {#if !isPhoneValidOrEmpty}
        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('valid-international-phone-number-is-required')}
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("valid-international-phone-number-is-required")}
        </span>
      {/if}
    </div>
@@ -321,19 +335,20 @@
          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 ">
-        <label
-          for="comments"
-          class="font-medium text-gray-700">{$_('receipt-needed')}</label>
+      <div class="ml-3">
+        <label for="comments" class="font-medium text-gray-700"
+          >{$_("receipt-needed")}</label
+        >
      </div>
    </div>
    {#if editable.address_checked === true}
      <div class="col-span-6">
-        <label
-          for="address1"
-          class="block  font-medium text-gray-700">{$_('address')}</label>
+        <label for="address1" class="block font-medium text-gray-700"
+          >{$_("address")}</label
+        >
        <input
          autocomplete="off"
          placeholder="Address"
@@ -343,65 +358,72 @@
          bind:value={editable.address.address1}
          type="text"
          name="address1"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
        {#if !isAddress1Valid}
          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-            {$_('address-is-required')}
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+          >
+            {$_("address-is-required")}
          </span>
        {/if}
      </div>
      <div class="col-span-6">
-        <label
-          for="address2"
-          class="block  font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+        <label for="address2" class="block font-medium text-gray-700"
+          >{$_("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: 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: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
      </div>
      <div class="col-span-6">
-        <label
-          for="zipcode"
-          class="block  font-medium text-gray-700">{$_('zip-postal-code')}</label>
+        <label for="zipcode" class="block 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: 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: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
        {#if !iszipcodevalid}
          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-            {$_('valid-zipcode-postal-code-is-required')}
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+          >
+            {$_("valid-zipcode-postal-code-is-required")}
          </span>
        {/if}
      </div>
      <div class="col-span-6">
-        <label
-          for="city"
-          class="block  font-medium text-gray-700">{$_('city')}</label>
+        <label for="city" class="block 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: 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: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
        {#if !iscityvalid}
          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-            {$_('valid-city-is-required')}
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+          >
+            {$_("valid-city-is-required")}
          </span>
        {/if}
      </div>
--- a/src/components/donors/DonorDonations.svelte
+++ b/src/components/donors/DonorDonations.svelte
@@ -0,0 +1,29 @@
+<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,50 +5,73 @@
  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')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
+    {$_("donors")}
+    {#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">
-        {$_('add-donor')}
+        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")}
      </button>
    {/if}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
+    {#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(';');
+          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/100).toFixed(2),
+                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();
+          });
+          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')}
+        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 />
+  <DonorsOverview bind:current_donors bind:addDonors />
 </section>

-{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
-  <AddDonorModal bind:current_donors bind:modal_open />
+{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
+  <AddDonorModal
+    on:created={(event) => {
+      addDonors(event.detail.donors);
+    }}
+    bind:modal_open
+  />
 {/if}
--- a/src/components/donors/DonorsEmptyState.svelte
+++ b/src/components/donors/DonorsEmptyState.svelte
@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
    <img class="w-full" style="height:15rem" src={donors_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-donors-yet')}</span><br />
-    <span>{$_('add-your-first-donor')}</span>
+    <span class="font-bold">{$_("there-are-no-donors-yet")}</span><br />
+    <span>{$_("add-your-first-donor")}</span>
  </p>
 </div>
--- a/src/components/donors/DonorsOverview.svelte
+++ b/src/components/donors/DonorsOverview.svelte
@@ -1,218 +1,262 @@
 <script>
  import { _ } from "svelte-i18n";
-  import { DonationService, DonorService } from "@odit/lfk-client-js";
+  import { 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";
+  import toast from "svelte-french-toast";
  $: searchvalue = "";
  $: active_deletes = [];
-  $: current_donations = [];
-  let modal_open = false;
-  let delete_donor = {};
+  $: selectedDonors =
+    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
+  $: selected =
+    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
+
+  $: dataLoaded = false;
+
  export let current_donors = [];
-  const donors_promise = DonorService.donorControllerGetAll().then((val) => {
-    current_donors = val;
+  export const addDonors = (donors) => {
+    current_donors = current_donors.concat(...donors);
+    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 donation_promise = DonationService.donationControllerGetAll().then(
-    (val) => {
-      current_donations = val;
-    }
-  );
+  const table = createSvelteTable(options);
+
  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;
+    let pagesize = 300;
+    while (page >= 0) {
+      const donors = await DonorService.donorControllerGetAll(page, pagesize);
+      if (donors.length == 0) {
+        page = -2;
+      }
+
+      current_donors = current_donors.concat(...donors);
+      options.update((options) => ({
+        ...options,
+        data: current_donors,
+      }));
+
+      dataLoaded = true;
+      page++;
+    }
+  });
 </script>

 <ConfirmDonorDeletion
  on:cancelDelete={(event) => {
-    modal_open = false;
-    active_deletes[event.detail.id] = false;
+    active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
  }}
-  bind:modal_open
-  bind:delete_donor />
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
-  {#await donors_promise && donation_promise}
+  on:delete={async (event) => {
+    toast.loading($_("deleting-donor"));
+    await DonorService.donorControllerRemove(event.detail.id, true);
+    toast.dismiss();
+    toast($_("donor-deleted"));
+    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">
-      <p class="font-bold">{$_('donors-are-being-loaded')}</p>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      role="alert"
+    >
+      <p class="font-bold">{$_("donors-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
-  {:then}
-    {#if current_donors.length === 0}
-      <DonorsEmptyState />
-    {: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">
-                {$_('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">
-                {$_('donations')}
-              </th>
-              <th
-                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="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('total-paid-amount')}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
+  {:else if current_donors.length === 0}
+    <DonorsEmptyState />
+  {: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="w-full">
+        <thead class="border-b border-gray-400">
+          {#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>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#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>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {(donor.paidDonationAmount / 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>
+          {/each}
+        </thead>
+        <tbody>
+          {#each $table.getRowModel().rows as row}
+            <tr class="odd:bg-white even:bg-gray-100">
+              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+                <InputElement
+                  type="checkbox"
+                  checked={row.getIsSelected()}
+                  on:change={() => row.toggleSelected()}
+                />
+              </td>
+              {#each row.getVisibleCells() as cell}
+                <td>
+                  <svelte:component
+                    this={flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    )}
+                  />
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
    </div>
-  {/await}
+    <div class="h-2" />
+    <TableBottom {table} {selected} />
+  {/if}
 {/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>
--- 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";
-  
+
  export let modal_open;
  (function () {
    document.onkeydown = function (e) {
@@ -25,43 +25,51 @@
 {#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">
+      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
                fill="currentColor"
                class="h-6 w-6 text-blue-600"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                <path
-                  d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z" /></svg>
+                  d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z"
+                /></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">
-                {$_('read-license')}
+                {$_("read-license")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">{currentlicense}</p>
@@ -78,8 +86,9 @@
              modal_open = false;
            }}
            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">
-            {$_('close')}
+            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"
+          >
+            {$_("close")}
          </button>
        </div>
      </div>
@@ -90,19 +99,21 @@
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
  <div class="text-center mb-8">
    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
-      {$_('about')}
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
+    >
+      {$_("about")}
      🧾
    </h1>
    <p
-      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
+      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300"
+    >
      Lauf für Kaya!
      <strong class="text-white font-medium">
-        {$_('by')}
+        {$_("by")}
        <a href="https://odit.services" class="underline">ODIT.Services</a>
      </strong>
      <br />
-      <span class="text-lg">{$_('lfk-is-os')}</span>
+      <span class="text-lg">{$_("lfk-is-os")}</span>
    </p>
  </div>
 </div>
@@ -110,82 +121,88 @@
 <div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-display font-semibold md:text-5xl">
-      {$_('credits')}
+      {$_("credits")}
    </h2>
    <div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
-      <p class="text-center">{$_('oss_credit_description')}</p>
+      <p class="text-center">{$_("oss_credit_description")}</p>
    </div>
    <div class="w-screen leading-8 pl-5 mt-5">
      {#await license_promise}
-        <p class="text-center w-full">{$_('licenses-are-being-loaded')}</p>
+        <p class="text-center w-full">{$_("licenses-are-being-loaded")}</p>
      {:then}
        <table>
-          <thead>
-            <tr>
-              <th>{$_('dependency_name')}</th>
-              <th>{$_('license')}</th>
-              <th>{$_('repo_link')}</th>
-              <th>{$_('installed-version')}</th>
-              <th>{$_('author')}</th>
+          <thead class="border-b border-gray-400">
+            <tr class="odd:bg-white even:bg-gray-100">
+              <th>{$_("dependency_name")}</th>
+              <th>{$_("license")}</th>
+              <th>{$_("repo_link")}</th>
+              <th>{$_("installed-version")}</th>
+              <th>{$_("author")}</th>
            </tr>
          </thead>
          <tbody>
            {#each licenses as l}
-              <tr>
+              <tr class="odd:bg-white even:bg-gray-100">
                <td>{l.name}</td>
                <td>
-                  {l.license || '?'}<br /><span
+                  {l.license || "?"}<br /><button
                    class="underline cursor-pointer"
                    on:click={() => {
                      modal_open = true;
-                      currentlicense = l.name + '@' + l.version;
-                      licensetext = l.licensetext || $_('no-license-text-could-be-found');
-                    }}>{$_('read-license')}</span>
+                      currentlicense = l.name + "@" + l.version;
+                      licensetext =
+                        l.licensetext || $_("no-license-text-could-be-found");
+                    }}>{$_("read-license")}</button
+                  >
                </td>
                <td>
                  {(l.repo?.url || l.repo)
-                    .replace('git+', '')
-                    .replace('git://', '')}
+                    .replace("git+", "")
+                    .replace("git://", "")}
                </td>
-                <td>{l.version || '?'}</td>
-                <td>{l.author?.name || l.author || '?'}</td>
+                <td>{l.version || "?"}</td>
+                <td>{l.author?.name || l.author || "?"}</td>
              </tr>
            {/each}
          </tbody>
        </table>
      {:catch error}
        <div
-          class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+          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>
+            <b class="capitalize">{$_("general_promise_error")}</b>
            {error}
          </span>
        </div>
      {/await}
    </div>
    <div class="w-full leading-8 mt-8">
-      <p class="text-xl font-medium">{$_('icon-image-credits')}</p>
+      <p class="text-xl font-medium">{$_("icon-image-credits")}</p>
      <ul class="list-disc">
        <li>
          <a
            class="underline"
            target="_blank"
            rel="noopener noreferrer"
-            href="https://storyset.com">https://storyset.com</a>
+            href="https://storyset.com">https://storyset.com</a
+          >
        </li>
        <li>
          <a
            class="underline"
            target="_blank"
            rel="noopener noreferrer"
-            href="https://undraw.co">https://undraw.co</a>
+            href="https://undraw.co">https://undraw.co</a
+          >
        </li>
        <li>
          <a
            class="underline"
            target="_blank"
            rel="noopener noreferrer"
-            href="https://remixicon.com">https://remixicon.com</a>
+            href="https://remixicon.com">https://remixicon.com</a
+          >
        </li>
      </ul>
    </div>
--- a/src/components/general/Footer.svelte
+++ b/src/components/general/Footer.svelte
@@ -20,27 +20,32 @@
      class="underline"
      href="https://odit.services"
      rel="noopener,noreferrer"
-      target="_blank">ODIT.Services</a>
+      target="_blank">ODIT.Services</a
+    >
  </p>
  <p class="text-sm text-gray-500 mt-4">
    <a
      class="underline"
      target="_blank"
      rel="noopener, noreferrer"
-      href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a>@<a
+      href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a
+    >@<a
      class="underline"
      target="_blank"
      rel="noopener, noreferrer"
-      href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
+      href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}"
+      >{releaseinfo}</a
+    >
    -
    <a
      rel="noopener, noreferrer"
      class="underline"
      href="https://docs.lauf-fuer-kaya.de"
-      target="_blank">{$_('documentation')}</a>
+      target="_blank">{$_("documentation")}</a
+    >
    -
-    <a class="underline" href="/privacy">{$_('privacy')}</a>
+    <a class="underline" href="/privacy">{$_("privacy")}</a>
    -
-    <a class="underline" href="/imprint">{$_('imprint')}</a>
+    <a class="underline" href="/imprint">{$_("imprint")}</a>
  </p>
 </footer>
--- a/src/components/general/Imprint.svelte
+++ b/src/components/general/Imprint.svelte
@@ -1,20 +1,20 @@
 <script>
  import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import marked from "marked";
+  import { parse } from "marked";
  import Footer from "./Footer.svelte";
-  import * as css from "../base/simple.css";
+  // import * as css from "../base/simple.css";
  let html = "";
  async function load() {
    let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
    let text = (await md.text()).toString();
-    if(text.includes("<meta")){
-      md.ok=false
+    if (text.includes("<meta")) {
+      md.ok = false;
    }
    if (!md.ok) {
      md = await fetch("/imprint_en.md");
      text = await md.text();
    }
-    html = marked(text);
+    html = parse(text);
  }
  const promise = load();
 </script>
@@ -22,8 +22,9 @@
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
  <div class="text-center mb-8">
    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
-      {$_('imprint')}
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
+    >
+      {$_("imprint")}
    </h1>
  </div>
 </div>
@@ -31,16 +32,17 @@
 <div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    {#await promise}
-      <p class="text-center w-full">{$_('imprint-loading')}</p>
+      <p class="text-center w-full">{$_("imprint-loading")}</p>
    {:then}
      <div class="simplecontent">
        {@html html}
      </div>
    {:catch error}
      <div
-        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+        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>
+          <b class="capitalize">{$_("general_promise_error")}</b>
          {error}
        </span>
      </div>
--- a/src/components/general/NotFound.svelte
+++ b/src/components/general/NotFound.svelte
@@ -4,19 +4,22 @@

 <body class="antialiased font-sans">
  <div class="flex min-h-screen">
-    <div class="w-full bg-white flex items-center justify-center ">
+    <div class="w-full bg-white flex items-center justify-center">
      <div class="max-w-sm m-8">
        <div class="text-black text-5xl md:text-15xl font-black">
-          {$_('404title')}
+          {$_("404title")}
        </div>
        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
        <p
-          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
-          {$_('404message')}
+          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"
+        >
+          {$_("404message")}
        </p>
        <a
          href="/"
-          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg"
+          >{$_("goback")}</a
+        >
      </div>
    </div>
  </div>
--- a/src/components/general/Privacy.svelte
+++ b/src/components/general/Privacy.svelte
@@ -1,20 +1,20 @@
 <script>
  import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import marked from "marked";
+  import { parse } from "marked";
  import Footer from "./Footer.svelte";
  // import * as css from "../base/simple.css?inline";
  let html = "";
  async function load() {
    let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
    let text = (await md.text()).toString();
-    if(text.includes("<meta")){
-      md.ok=false
+    if (text.includes("<meta")) {
+      md.ok = false;
    }
    if (!md.ok) {
      md = await fetch("/privacy_en.md");
      text = await md.text();
    }
-    html = marked(text);
+    html = parse(text);
  }
  const promise = load();
 </script>
@@ -22,8 +22,9 @@
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
  <div class="text-center mb-8">
    <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
-      {$_('privacy')}
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
+    >
+      {$_("privacy")}
    </h1>
  </div>
 </div>
@@ -31,16 +32,17 @@
 <div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    {#await promise}
-      <p class="text-center w-full">{$_('privacy-loading')}</p>
+      <p class="text-center w-full">{$_("privacy-loading")}</p>
    {:then}
      <div class="simplecontent">
        {@html html}
      </div>
    {:catch error}
      <div
-        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+        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>
+          <b class="capitalize">{$_("general_promise_error")}</b>
          {error}
        </span>
      </div>
--- a/src/components/general/Sidebar.svelte
+++ b/src/components/general/Sidebar.svelte
@@ -4,26 +4,33 @@

 <div class="md:flex flex-col md:flex-row h-screen w-full">
  <div
-    class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0">
+    class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0"
+  >
    <div
-      class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between">
+      class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between"
+    >
      <a
        href="/#/test"
-        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Sidebar</a>
+        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline"
+        >Sidebar</a
+      >
      <button
-        class="rounded-lg md:hidden focus:outline-none focus:shadow-outline">
+        class="rounded-lg md:hidden focus:outline-none focus:shadow-outline"
+      >
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          {#if open}
            <path
              fill-rule="evenodd"
              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
+            />
          {/if}
          {#if !open}
            <path
              fill-rule="evenodd"
              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
+            />
          {/if}
        </svg>
      </button>
@@ -31,49 +38,63 @@
    <nav
      :class:block={open}
      :class:hidden={!open}
-      class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto">
+      class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto"
+    >
      <a
        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-gray-200 rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Blog</a>
+        href="#">Blog</a
+      >
      <a
        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Portfolio</a>
+        href="#">Portfolio</a
+      >
      <a
        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">About</a>
+        href="#">About</a
+      >
      <a
        class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Contact</a>
+        href="#">Contact</a
+      >
      <div class="relative">
        <button
          on:click={() => {
            open = !open;
          }}
-          class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+          class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        >
          <span>Dropdown</span>
          <svg
            fill="currentColor"
            viewBox="0 0 20 20"
-            class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path
+            class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+            ><path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clip-rule="evenodd" /></svg>
+              clip-rule="evenodd"
+            /></svg
+          >
        </button>
        <div
          class:block={open}
          class:hidden={!open}
-          class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg">
+          class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg"
+        >
          <div
-            class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800">
+            class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800"
+          >
            <a
              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #1</a>
+              href="#">Link #1</a
+            >
            <a
              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #2</a>
+              href="#">Link #2</a
+            >
            <a
              class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #3</a>
+              href="#">Link #3</a
+            >
          </div>
        </div>
      </div>
--- a/src/components/groups/AddGroupModal.svelte
+++ b/src/components/groups/AddGroupModal.svelte
@@ -1,9 +1,8 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
-  import Toastify from "toastify-js";
  import { UserGroupService } from "@odit/lfk-client-js";
+  import toast from "svelte-french-toast";
  export let modal_open;
  export let current_groups;
  let description_input_value;
@@ -32,10 +31,7 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_('group-is-being-added'),
-        duration: -1,
-      }).showToast();
+      toast.loading($_("group-is-being-added"));
      let postdata = {
        name: name_input_value,
        description: description_input_value,
@@ -46,11 +42,8 @@
          description_input_value = "";
          modal_open = false;
          //
-          Toastify({
-            text: $_('group-added'),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
+          toast.dismiss();
+          toast.success($_("group-added"));
          current_groups.push(result);
          current_groups = current_groups;
        })
@@ -59,8 +52,6 @@
        })
        .finally(() => {
          processed_last_submit = true;
-          //
-          toast.hideToast();
        });
    }
  }
@@ -69,83 +60,100 @@
 {#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">
+      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
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 640 512"
                class="h-6 w-6 text-blue-600"
                fill="currentColor"
                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                <path
-                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+                /></svg
+              >
            </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-user-group')}
+                {$_("create-a-new-user-group")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-for-creating-a-new-user-group')}
+                  {$_(
+                    "please-provide-the-required-information-for-creating-a-new-user-group"
+                  )}
                </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">{$_('name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("name")}</label
+                  >
                  <input
                    use:focus
                    autocomplete="off"
-                    placeholder="{$_('name')}"
+                    placeholder={$_("name")}
                    class:border-red-500={!isNameValid}
                    class:focus:border-red-500={!isNameValid}
                    class:focus:ring-red-500={!isNameValid}
                    bind:value={name_input_value}
                    type="text"
                    name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                  {#if !isNameValid}
                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('name-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('description-optional')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("description-optional")}</label
+                  >
                  <input
                    autocomplete="off"
-                    placeholder="{$_('something-about-the-group')}"
+                    placeholder={$_("something-about-the-group")}
                    bind:value={description_input_value}
                    type="text"
                    name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                </div>
              </div>
            </div>
@@ -157,16 +165,18 @@
            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')}
+            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')}
+            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>
--- a/src/components/groups/GroupDetail.svelte
+++ b/src/components/groups/GroupDetail.svelte
@@ -1,220 +1,238 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import {
-    UserGroupService
-  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  import PromiseError from "../base/PromiseError.svelte";
-  let data_loaded = false;
-  export let params;
-  const promise = UserGroupService.userGroupControllerGetOne(params.groupid);
-  const colors = [
-    "#f3558e",
-    "#17b978",
-    "#3498db",
-    "#3f3b3b",
-    "#775ada",
-    "#7ed6df_#000000",
-    "#000000",
-    "#21e6c1_#000000",
-    "#c0392b",
-    "#d35400",
-    "#7f8c8d",
-    "#6ab04c",
-    "#4834d4",
-    "#ff1f5a",
-    "#eac100",
-  ];
-  let matched_colors = [];
-  $: delete_triggered = false;
-  $: search_permission = "";
-  $: original_data = {};
-  $: editable = {};
-  $: changes_performed = !(JSON.stringify(original_data) == JSON.stringify(editable));
-  $: isGroupnameValid = editable.name !== "";
-  $: save_enabled =
-    changes_performed && isGroupnameValid 
-  promise.then((data) => {
-    let current_target = "";
-    let colorindex = -1;
-    data.permissions = data.permissions.sort();
-    data.permissions.forEach((p) => {
-      const target = p.split(":")[0];
-      if (current_target !== p.split(":")[0]) {
-        colorindex++;
-        current_target = p.split(":")[0];
-      }
-      let background = colors[colorindex];
-      let foreground = "#fff";
-      if (background.includes("_")) {
-        foreground = background.split("_")[1];
-        background = background.split("_")[0];
-      }
-      matched_colors[target] = [background, foreground];
-    });
-    data_loaded = true;
-    original_data = Object.assign(original_data, data);
-    editable = Object.assign(editable, original_data);
-  });
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      Toastify({
-        text: $_('updateing-group'),
-        duration: 2500,
-      }).showToast();
-      UserGroupService.userGroupControllerPut(original_data.id, editable)
-        .then((resp) => {
-          Object.assign(original_data, editable);
-          original_data = editable;
-          Object.assign(original_data, editable);
-          Toastify({
-            text: $_('group-updated'),
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  function deleteGroup() {
-    UserGroupService.userGroupControllerRemove(original_data.id, true)
-      .then((resp) => {
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
-</script>
-
-{#await promise}
-  {$_('loading-group-detail')}
-{:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg class="flex-shrink-0 w-5 h-5 mr-2" fill="currentColor" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg>
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="../">{$_('groups')}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
-                  x1="5"
-                  y1="12"
-                  x2="19"
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">{editable.name}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_data.name}
-      <span data-id="group_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
-          {#if delete_triggered}
-            <button
-              on:click={deleteGroup}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm: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-group')}</button>
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div class="text-sm w-full">
-      <label
-        for="title"
-        class="font-medium text-gray-700">{$_('name')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('name')}
-        type="text"
-        bind:value={editable.name}
-        class:border-red-500={!isGroupnameValid}
-        class:focus:border-red-500={!isGroupnameValid}
-        class:focus:ring-red-500={!isGroupnameValid}
-        name="title"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-      {#if !isGroupnameValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('group-name-is-required')}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label
-        for="firstname"
-        class="font-medium text-gray-700">{$_('description')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('description')}
-        type="text"
-        bind:value={editable.description}
-        name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-    </div>
-    <div class="text-sm w-full mt-8">
-      <p class="font-medium mb-4">
-        {$_('permissions')}
-        <a
-          class="px-4 py-2 bg-gray-500 rounded-md text-white"
-          href="/groups/{params.groupid}/permissions/">{$_('edit-permissions')}</a>
-      </p>
-      <div class="w-full sm:my-px sm:px-px sm:w-1/2">
-        <input
-          autocomplete="off"
-          placeholder="{$_('search-for-permission')}"
-          type="text"
-          bind:value={search_permission}
-          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
-      </div>
-      {#each original_data.permissions as p}
-        {#if p.toLowerCase().includes(search_permission.toLowerCase())}
-          <span
-            style="background:{matched_colors[p.split(':')[0]][0]};color:{matched_colors[p.split(':')[0]][1]};"
-            class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded">{p}</span>
-          <!--  -->
-        {/if}
-      {/each}
-    </div>
-  </section>
-{:catch error}
-  <PromiseError {error} />
-{/await}
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../../store";
+  import { UserGroupService } from "@odit/lfk-client-js";
+  import toast from 'svelte-french-toast'
+
+  import PromiseError from "../base/PromiseError.svelte";
+  let data_loaded = false;
+  export let params;
+  const promise = UserGroupService.userGroupControllerGetOne(params.groupid);
+  const colors = [
+    "#f3558e",
+    "#17b978",
+    "#3498db",
+    "#3f3b3b",
+    "#775ada",
+    "#7ed6df_#000000",
+    "#000000",
+    "#21e6c1_#000000",
+    "#c0392b",
+    "#d35400",
+    "#7f8c8d",
+    "#6ab04c",
+    "#4834d4",
+    "#ff1f5a",
+    "#eac100",
+  ];
+  let matched_colors = [];
+  $: delete_triggered = false;
+  $: search_permission = "";
+  $: original_data = {};
+  $: editable = {};
+  $: changes_performed = !(
+    JSON.stringify(original_data) == JSON.stringify(editable)
+  );
+  $: isGroupnameValid = editable.name !== "";
+  $: save_enabled = changes_performed && isGroupnameValid;
+  promise.then((data) => {
+    let current_target = "";
+    let colorindex = -1;
+    data.permissions = data.permissions.sort();
+    data.permissions.forEach((p) => {
+      const target = p.split(":")[0];
+      if (current_target !== p.split(":")[0]) {
+        colorindex++;
+        current_target = p.split(":")[0];
+      }
+      let background = colors[colorindex];
+      let foreground = "#fff";
+      if (background.includes("_")) {
+        foreground = background.split("_")[1];
+        background = background.split("_")[0];
+      }
+      matched_colors[target] = [background, foreground];
+    });
+    data_loaded = true;
+    original_data = Object.assign(original_data, data);
+    editable = Object.assign(editable, original_data);
+  });
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      toast($_("updating-group"));
+      UserGroupService.userGroupControllerPut(original_data.id, editable)
+        .then((resp) => {
+          Object.assign(original_data, editable);
+          original_data = editable;
+          Object.assign(original_data, editable);
+          toast.success($_("group-updated"));
+        })
+        .catch((err) => {});
+    } else {
+    }
+  }
+  function deleteGroup() {
+    UserGroupService.userGroupControllerRemove(original_data.id, true)
+      .then((resp) => {
+        location.replace("./");
+      })
+      .catch((err) => {});
+  }
+</script>
+
+{#await promise}
+  {$_("loading-group-detail")}
+{:then}
+  <section class="container p-5 select-none">
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="flex items-center">
+              <svg
+                class="flex-shrink-0 w-5 h-5 mr-2"
+                fill="currentColor"
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"
+                ><path
+                  fill="currentColor"
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+                /></svg
+              >
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="../">{$_("groups")}</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                ><line x1="5" y1="12" x2="19" y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg
+              >
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">{editable.name}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original_data.name}
+      <span data-id="group_actions_${editable.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
+          {#if delete_triggered}
+            <button
+              on:click={deleteGroup}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm: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-group")}</button
+            >
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
+            type="button"
+            on:click={submit}
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            >{$_("save-changes")}</button
+          >
+        {/if}
+      </span>
+    </div>
+    <!--  -->
+    <div class="text-sm w-full">
+      <label for="title" class="font-medium text-gray-700">{$_("name")}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_("name")}
+        type="text"
+        bind:value={editable.name}
+        class:border-red-500={!isGroupnameValid}
+        class:focus:border-red-500={!isGroupnameValid}
+        class:focus:ring-red-500={!isGroupnameValid}
+        name="title"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
+      {#if !isGroupnameValid}
+        <span
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("group-name-is-required")}
+        </span>
+      {/if}
+    </div>
+    <div class="text-sm w-full">
+      <label for="firstname" class="font-medium text-gray-700"
+        >{$_("description")}</label
+      >
+      <input
+        autocomplete="off"
+        placeholder={$_("description")}
+        type="text"
+        bind:value={editable.description}
+        name="firstname"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
+    </div>
+    <div class="text-sm w-full mt-8">
+      <p class="font-medium mb-4">
+        {$_("permissions")}
+        <a
+          class="px-4 py-2 bg-gray-500 rounded-md text-white"
+          href="/groups/{params.groupid}/permissions/"
+          >{$_("edit-permissions")}</a
+        >
+      </p>
+      <div class="w-full sm:my-px sm:px-px sm:w-1/2">
+        <input
+          autocomplete="off"
+          placeholder={$_("search-for-permission")}
+          type="text"
+          bind:value={search_permission}
+          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
+      </div>
+      {#each original_data.permissions as p}
+        {#if p.toLowerCase().includes(search_permission.toLowerCase())}
+          <span
+            style="background:{matched_colors[
+              p.split(':')[0]
+            ][0]};color:{matched_colors[p.split(':')[0]][1]};"
+            class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded"
+            >{p}</span
+          >
+          <!--  -->
+        {/if}
+      {/each}
+    </div>
+  </section>
+{:catch error}
+  <PromiseError {error} />
+{/await}
--- a/src/components/groups/GroupPermissions.svelte
+++ b/src/components/groups/GroupPermissions.svelte
@@ -3,9 +3,10 @@
  import {
    PermissionService,
    CreatePermission,
-UserGroupService,
+    UserGroupService,
  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+  import toast from 'svelte-french-toast'
+
  import PromiseError from "../base/PromiseError.svelte";
  export let params;
  let [
@@ -20,15 +21,14 @@ UserGroupService,
  $: save_enabled =
    JSON.stringify(grantedPermissions) ===
    JSON.stringify(grantedPermissions_initial);
-  const group_promise = UserGroupService.userGroupControllerGetOne(params.groupid);
+  const group_promise = UserGroupService.userGroupControllerGetOne(
+    params.groupid
+  );
  group_promise.then((data) => {
    original_data = Object.assign(original_data, data);
  });
  function submit() {
-    Toastify({
-      text: $_('updating-permissions'),
-      duration: 2500,
-    }).showToast();
+    toast.loading($_("updating-permissions"));
    to_delete.forEach((d) => {
      promises = promises.concat([
        PermissionService.permissionControllerRemove(d, true),
@@ -50,11 +50,7 @@ UserGroupService,
        );
      });
      grantedPermissions_initial = grantedPermissions;
-      Toastify({
-        text: $_("permissions-updated"),
-        duration: 2500,
-        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-      }).showToast();
+      toast($_("permissions-updated"));
    });
  }
  Object.values(CreatePermission.target).forEach((t) => {
@@ -62,13 +58,15 @@ UserGroupService,
      allpermissions = allpermissions.concat([{ target: t, action: a }]);
    });
  });
-  UserGroupService.userGroupControllerGetPermissions(params.groupid).then((val) => {
-    val.directlyGranted.forEach((p) => {
-      delete p.responseType;
-      grantedPermissions = grantedPermissions.concat([p]);
-    });
-    grantedPermissions_initial = grantedPermissions;
-  });
+  UserGroupService.userGroupControllerGetPermissions(params.groupid).then(
+    (val) => {
+      val.directlyGranted.forEach((p) => {
+        delete p.responseType;
+        grantedPermissions = grantedPermissions.concat([p]);
+      });
+      grantedPermissions_initial = grantedPermissions;
+    }
+  );
 </script>

 {#await group_promise}
@@ -86,12 +84,15 @@ UserGroupService,
                width="24"
                height="24"
                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"><path
+                viewBox="0 0 640 512"
+                ><path
                  fill="currentColor"
-                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+                /></svg
+              >
            </li>
            <li class="flex items-center">
-              <a class="mr-2" href="../../">{$_('user-groups')}</a><svg
+              <a class="mr-2" href="../../">{$_("user-groups")}</a><svg
                stroke="currentColor"
                fill="none"
                stroke-width="2"
@@ -101,12 +102,10 @@ UserGroupService,
                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>
+                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"><a href="../">{original_data.name}</a></span>
@@ -122,22 +121,20 @@ UserGroupService,
                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>
+                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">{$_('permissions')}</span>
+              <span class="mr-2">{$_("permissions")}</span>
            </li>
          </ol>
        </nav>
      </div>
    </div>
    <div class="mb-8 text-3xl font-extrabold">
-      {$_('permissions')}:
+      {$_("permissions")}:
      {original_data.name}
      <span>
        {#if promises.length === 0}
@@ -146,21 +143,25 @@ UserGroupService,
            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">{$_('save-changes')}</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"
+            >{$_("save-changes")}</button
+          >
        {:else}
          <button
            type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('applying-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm"
+            >{$_("applying-changes")}</button
+          >
        {/if}
      </span>
    </div>
    <!--  -->
    <div class="flex flex-wrap -mx-1 overflow-hidden">
      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-        {$_('verfuegbare')}
+        {$_("available-permissions")}
      </div>
      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-        {$_('granted')}
+        {$_("granted")}
      </div>
    </div>
    <!--  -->
@@ -168,12 +169,14 @@ UserGroupService,
      {#if allpermissions.length > 0}
        <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
          <div
-            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"
+          >
            {#each allpermissions as p}
-              {#if !(grantedPermissions.filter((o)=>p.target == o.target && p.action == o.action).length > 0)}
+              {#if !(grantedPermissions.filter((o) => p.target == o.target && p.action == o.action).length > 0)}
                <p
-                  class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
-                  {p.target + ':' + p.action}
+                  class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
+                >
+                  {p.target + ":" + p.action}
                  <button
                    on:click={() => {
                      grantedPermissions = grantedPermissions.concat([p]);
@@ -190,7 +193,9 @@ UserGroupService,
                      }
                    }}
                    type="button"
-                    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
+                    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm"
+                    >+</button
+                  >
                </p>
              {/if}
            {/each}
@@ -198,22 +203,39 @@ UserGroupService,
        </div>
        <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
          <div
-            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"
+          >
            {#each grantedPermissions as p}
              <p
-                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
-                {p.target + ':' + p.action}
+                class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
+              >
+                {p.target + ":" + p.action}
                <button
                  on:click={() => {
-                    grantedPermissions = grantedPermissions.filter((o) => o.target + ':' + o.action !== p.target + ':' + p.action);
-                    if (to_add.some((o) => o.target + ':' + o.action === p.target + ':' + p.action)) {
-                      to_add = to_add.filter((o) => o.target + ':' + o.action !== p.target + ':' + p.action);
+                    grantedPermissions = grantedPermissions.filter(
+                      (o) =>
+                        o.target + ":" + o.action !== p.target + ":" + p.action
+                    );
+                    if (
+                      to_add.some(
+                        (o) =>
+                          o.target + ":" + o.action ===
+                          p.target + ":" + p.action
+                      )
+                    ) {
+                      to_add = to_add.filter(
+                        (o) =>
+                          o.target + ":" + o.action !==
+                          p.target + ":" + p.action
+                      );
                    } else {
                      to_delete = to_delete.concat([p.id]);
                    }
                  }}
                  type="button"
-                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
+                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm"
+                  >-</button
+                >
              </p>
            {/each}
          </div>
--- a/src/components/groups/Groups.svelte
+++ b/src/components/groups/Groups.svelte
@@ -9,21 +9,22 @@

 <section class="container p-5">
  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('user-groups')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
+    {$_("user-groups")}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP: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">
-        {$_('add-user-group')}
+        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-user-group")}
      </button>
    {/if}
  </span>
  <UserGroupsOverview bind:current_groups />
 </section>

-{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}
  <AddGroupModal bind:current_groups bind:modal_open />
 {/if}
--- a/src/components/groups/UserGroupsEmptyState.svelte
+++ b/src/components/groups/UserGroupsEmptyState.svelte
@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
    <img class="w-full h-44" src={groups_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-groups-yet')}.</span><br />
-    <span>{$_('add-your-first-group')}</span>
+    <span class="font-bold">{$_("there-are-no-groups-yet")}.</span><br />
+    <span>{$_("add-your-first-group")}</span>
  </p>
-</div>
+</div>
--- a/src/components/groups/UserGroupsOverview.svelte
+++ b/src/components/groups/UserGroupsOverview.svelte
@@ -13,13 +13,14 @@
  );
 </script>

-{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
  {#await groups_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">{$_('groups-are-being-loaded')}</p>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      role="alert"
+    >
+      <p class="font-bold">{$_("groups-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
  {:then}
    {#if current_groups.length === 0}
@@ -28,26 +29,30 @@
      <input
        type="search"
        bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
-        aria-label={$_('datatable.search')}
-        class="mb-4" />
+        placeholder={$_("datatable.search")}
+        aria-label={$_("datatable.search")}
+        class="mb-4"
+      />
      <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">
          <thead class="bg-gray-50">
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
              <th
                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('name')}
+                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">
-                {$_('description')}
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("description")}
              </th>
              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
+                <span class="sr-only">{$_("action")}</span>
              </th>
            </tr>
          </thead>
@@ -57,7 +62,10 @@
                .toString()
                .toLowerCase()
                .includes(searchvalue)}
-                <tr data-rowid="user_{group.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="user_{group.id}"
+                >
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
@@ -72,39 +80,53 @@
                  </td>
                  {#if active_deletes[group.id] === true}
                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
                      <button
                        on:click={() => {
                          active_deletes[group.id] = false;
                        }}
                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        >{$_("cancel-delete")}</button
+                      >
                      <button
                        on:click={() => {
-                          UserGroupService.userGroupControllerRemove(group.id, true)
+                          UserGroupService.userGroupControllerRemove(
+                            group.id,
+                            true
+                          )
                            .then((resp) => {
-                              current_groups = current_groups.filter((obj) => obj.id !== group.id);
+                              current_groups = current_groups.filter(
+                                (obj) => obj.id !== group.id
+                              );
                            })
                            .catch((err) => {
                              // error deleting user
                            });
                        }}
                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                        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">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
                      <a
                        href="./{group.id}"
-                        class="text-indigo-600 hover:text-indigo-900">Details</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
+                        class="text-indigo-600 hover:text-indigo-900">Details</a
+                      >
+                      {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
                        <button
                          on:click={() => {
                            active_deletes[group.id] = true;
                          }}
                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                          >{$_("delete")}</button
+                        >
                      {/if}
                    </td>
                  {/if}
@@ -118,7 +140,7 @@
  {: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>
+        <b class="capitalize">{$_("general_promise_error")}</b>
        {error}
      </span>
    </div>
--- a/src/components/orgs/AddOrgModal.svelte
+++ b/src/components/orgs/AddOrgModal.svelte
@@ -1,9 +1,10 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+
  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
+  import toast from "svelte-french-toast";
  export let modal_open;
  export let current_organizations;
  let name_input_dom;
@@ -48,10 +49,7 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_("organization-is-being-added"),
-        duration: -1,
-      }).showToast();
+      toast.loading($_("organization-is-being-added"));
      let address = {};
      if (address_checked === true) {
        address = {
@@ -70,17 +68,13 @@
        .then((result) => {
          name = "";
          modal_open = false;
-          Toastify({
-            text: $_("organization-added"),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
+          toast.dismiss();
+          toast.success($_("organization-added"));
          current_organizations = current_organizations.concat([result]);
        })
        .catch((err) => {})
        .finally(() => {
          processed_last_submit = true;
-          toast.hideToast();
        });
    }
  }
@@ -89,57 +83,69 @@
 {#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">
+      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"><path
-                  d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
+                height="24"
+                ><path
+                  d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z"
+                /></svg
+              >
            </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-organization')}
+                {$_("create-a-new-organization")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-add-a-new-organization')}
+                  {$_(
+                    "please-provide-the-required-information-to-add-a-new-organization"
+                  )}
                </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">{$_('name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("name")}</label
+                  >
                  <input
                    use:focus
                    autocomplete="off"
-                    placeholder={$_('name')}
+                    placeholder={$_("name")}
                    class:border-red-500={!isOrgnameValid}
                    class:focus:border-red-500={!isOrgnameValid}
                    class:focus:ring-red-500={!isOrgnameValid}
@@ -147,11 +153,13 @@
                    bind:this={name_input_dom}
                    type="text"
                    name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                  {#if !isOrgnameValid}
                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('organization-name-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("organization-name-is-required")}
                    </span>
                  {/if}
                </div>
@@ -162,96 +170,112 @@
                      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">{$_('address')}</label>
+                    <label for="comments" class="font-medium text-gray-700"
+                      >{$_("address")}</label
+                    >
                  </div>
                </div>
-              {#if address_checked === true}
-                <div class="col-span-6">
-                  <label
-                    for="address1"
-                    class="block text-sm font-medium text-gray-700">{$_('address')}</label>
-                  <input
-                    autocomplete="off"
-                    placeholder="{$_('address')}"
-                    class:border-red-500={!isAddress1Valid}
-                    class:focus:border-red-500={!isAddress1Valid}
-                    class:focus:ring-red-500={!isAddress1Valid}
-                    bind:value={address_input1_value}
-                    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" />
-                  {#if !isAddress1Valid}
-                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('address-is-required')}
-                    </span>
-                  {/if}
-                </div>
-                <div class="col-span-6">
-                  <label
-                    for="address2"
-                    class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
-                  <input
-                    autocomplete="off"
-                    placeholder="{$_('apartment-suite-etc')}"
-                    bind:value={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" />
-                </div>
-                <div class="col-span-6">
-                  <label
-                    for="zipcode"
-                    class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
-                  <input
-                    autocomplete="off"
-                    placeholder="{$_('zip-postal-code')}"
-                    class:border-red-500={!iszipcodevalid}
-                    class:focus:border-red-500={!iszipcodevalid}
-                    class:focus:ring-red-500={!iszipcodevalid}
-                    bind:value={address_zipcode_value}
-                    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" />
-                  {#if !iszipcodevalid}
-                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('valid-zipcode-postal-code-is-required')}
-                    </span>
-                  {/if}
-                </div>
-                <div class="col-span-6">
-                  <label
-                    for="city"
-                    class="block text-sm font-medium text-gray-700">{$_('city')}</label>
-                  <input
-                    autocomplete="off"
-                    placeholder="{$_('city')}"
-                    class:border-red-500={!iscityvalid}
-                    class:focus:border-red-500={!iscityvalid}
-                    class:focus:ring-red-500={!iscityvalid}
-                    bind:value={address_city_value}
-                    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" />
-                  {#if !iscityvalid}
-                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('valid-city-is-required')}
-                    </span>
-                  {/if}
-                </div>
-              {/if}
-            </div>
+                {#if address_checked === true}
+                  <div class="col-span-6">
+                    <label
+                      for="address1"
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("address")}</label
+                    >
+                    <input
+                      autocomplete="off"
+                      placeholder={$_("address")}
+                      class:border-red-500={!isAddress1Valid}
+                      class:focus:border-red-500={!isAddress1Valid}
+                      class:focus:ring-red-500={!isAddress1Valid}
+                      bind:value={address_input1_value}
+                      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"
+                    />
+                    {#if !isAddress1Valid}
+                      <span
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("address-is-required")}
+                      </span>
+                    {/if}
+                  </div>
+                  <div class="col-span-6">
+                    <label
+                      for="address2"
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("apartment-suite-etc")}</label
+                    >
+                    <input
+                      autocomplete="off"
+                      placeholder={$_("apartment-suite-etc")}
+                      bind:value={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"
+                    />
+                  </div>
+                  <div class="col-span-6">
+                    <label
+                      for="zipcode"
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("zip-postal-code")}</label
+                    >
+                    <input
+                      autocomplete="off"
+                      placeholder={$_("zip-postal-code")}
+                      class:border-red-500={!iszipcodevalid}
+                      class:focus:border-red-500={!iszipcodevalid}
+                      class:focus:ring-red-500={!iszipcodevalid}
+                      bind:value={address_zipcode_value}
+                      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"
+                    />
+                    {#if !iszipcodevalid}
+                      <span
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("valid-zipcode-postal-code-is-required")}
+                      </span>
+                    {/if}
+                  </div>
+                  <div class="col-span-6">
+                    <label
+                      for="city"
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("city")}</label
+                    >
+                    <input
+                      autocomplete="off"
+                      placeholder={$_("city")}
+                      class:border-red-500={!iscityvalid}
+                      class:focus:border-red-500={!iscityvalid}
+                      class:focus:ring-red-500={!iscityvalid}
+                      bind:value={address_city_value}
+                      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"
+                    />
+                    {#if !iscityvalid}
+                      <span
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("valid-city-is-required")}
+                      </span>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
            </div>
          </div>
        </div>
@@ -261,16 +285,18 @@
            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')}
+            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')}
+            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>
--- a/src/components/orgs/ConfirmOrgDeletion.svelte
+++ b/src/components/orgs/ConfirmOrgDeletion.svelte
@@ -1,9 +1,9 @@
 <script>
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
-  
+
  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
  import { createEventDispatcher } from "svelte";
  export let modal_open;
  export let delete_org;
@@ -18,11 +18,7 @@
      true
    )
      .then((resp) => {
-        Toastify({
-          text: $_('organization-deleted'),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
+        toast($_("organization-deleted"));
        location.replace("./");
      })
      .catch((err) => {});
@@ -32,51 +28,59 @@
 {#if modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
-    
    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"
                width="24"
                height="24"
                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"><path
+                viewBox="0 0 640 512"
+                ><path
                  fill="currentColor"
-                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+                /></svg
+              >
            </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-the-organization-delete_org-name',
+                    "do-you-want-to-delete-the-organization-delete_org-name",
                    {
                      values: { orgname: delete_org.name },
                    }
                  )}<br />
-                  {$_('all-associated-teams-and-runners-will-be-deleted-too')}
+                  {$_("all-associated-teams-and-runners-will-be-deleted-too")}
                </p>
              </div>
            </div>
@@ -86,14 +90,16 @@
          <button
            on:click={deleteOrg}
            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-organization-and-associated-teams-runners')}
+            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-organization-and-associated-teams-runners")}
          </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-organization')}
+            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-organization")}
          </button>
        </div>
      </div>
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -1,476 +1,488 @@
-<script>
-  import {
-    GroupContactService,
-    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
-  import store from "../../store";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-  import PromiseError from "../base/PromiseError.svelte";
-  import Select from "svelte-select";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  import { tick } from "svelte";
-  $: delete_triggered = false;
-  $: address_valid_or_none =
-    (isAddress1Valid && iszipcodevalid && iscityvalid) ||
-    editable.address_checked === false;
-  $: save_enabled = data_changed && address_valid_or_none;
-  let original = "";
-  let original_object = {};
-  let contacts = [];
-  let valueCopy = null;
-  let areaDom;
-  let copied = false;
-  export let params;
-  $: editable = {};
-  $: contact = {};
-  $: data_loaded = false;
-  $: data_changed = !(JSON.stringify(editable) === original);
-  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
-  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
-  $: iscityvalid = editable.address?.city?.trim().length !== 0;
-  $: sponsoring_contracts_show = true;
-  $: cards_show = true;
-  $: certificates_show = true;
-  $: generate_orgs = [original_object];
-  $: registrationLink = `${config.baseurl}/selfservice/register/${editable.registrationKey}`;
-  const getContactLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
-    params.orgid
-  ).then((value) => {
-    data_loaded = true;
-    value.address_checked = value.address.address1 !== null;
-    if (value.address_checked === false) {
-      value.address = {
-        address1: "",
-        address2: "",
-        city: "",
-        postalcode: "",
-        country: "",
-      };
-    }
-    editable = Object.assign(editable, value);
-    editable = editable;
-    original_object = Object.assign(editable, value);
-    original = JSON.stringify(value);
-    GroupContactService.groupContactControllerGetAll().then((val) => {
-      contacts = val.map((r) => {
-        return { label: getContactLabel(r), value: r };
-      });
-      if (editable.contact) {
-        contact = contacts.find((g) => g.value.id == editable.contact.id);
-      } else {
-        contact = null;
-      }
-    });
-  });
-  let modal_open = false;
-  let delete_org = {};
-  function deleteOrganization() {
-    RunnerOrganizationService.runnerOrganizationControllerRemove(
-      original_object.id,
-      false
-    )
-      .then((resp) => {
-        Toastify({
-          text: $_("organization-deleted"),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-        location.replace("./");
-      })
-      .catch((err) => {
-        modal_open = true;
-        delete_org = original_object;
-      });
-  }
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      Toastify({
-        text: $_("updating-organization"),
-        duration: 2500,
-      }).showToast();
-      let postdata = Object.assign({}, editable);
-      if (postdata.address_checked === false) {
-        postdata.address = null;
-      }
-      postdata.contact = postdata.contact?.id;
-      RunnerOrganizationService.runnerOrganizationControllerPut(
-        original_object.id,
-        postdata
-      )
-        .then((resp) => {
-          editable.registrationKey = resp.registrationKey;
-          original_object = Object.assign({}, editable);
-          original = JSON.stringify(original_object);
-          Toastify({
-            text: $_("updated-organization"),
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  async function copy() {
-    if(!editable.registrationKey){
-      Toastify({
-        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%)",
-      }).showToast();
-      return;
-    }
-    valueCopy = registrationLink;
-    await tick();
-    areaDom.focus();
-    areaDom.select();
-    try {
-      const successful = document.execCommand("copy");
-      if (!successful) {
-        throw new Error();
-      }
-      Toastify({
-        text: $_("copied-link-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;
-  }
-  export let import_modal_open = false;
-</script>
-
-{#if valueCopy != null}<textarea bind:this={areaDom}>{valueCopy}</textarea>{/if}
-<ImportRunnerModal
-  on:cancelDelete={(event) => {
-    import_modal_open = false;
-  }}
-  current_runners={[]}
-  passed_team={{}}
-  passed_orgs={[]}
-  passed_org={editable}
-  opened_from="OrgDetail"
-  bind:import_modal_open />
-<ConfirmOrgDeletion bind:modal_open bind:delete_org />
-{#if data_loaded}
-  <section class="container p-5">
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_object.name}
-      <span data-id="org_actions_${editable.id}">
-        <GenerateSponsoringContracts
-          bind:sponsoring_contracts_show
-          bind:generate_orgs />
-        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
-        <GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
-        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
-          <button
-            on:click={() => {
-              import_modal_open = true;
-            }}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('import-runners')}
-          </button>
-        {/if}
-        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
-          {#if delete_triggered}
-            <button
-              on:click={deleteOrganization}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-organization')}</button>
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            on:click={submit}
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
-        {/if}
-      </span>
-    </div>
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="mr-2 flex items-center">
-              <svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><path
-                  d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                <polyline points="9 22 9 12 15 12 15 22" /></svg>
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="/">{$_('home')}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
-                  x1="5"
-                  y1="12"
-                  x2="19"
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
-            </li>
-            <li class="mr-2 flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">{$_('organizations')}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
-                  x1="5"
-                  y1="12"
-                  x2="19"
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">Org-Details #{params.orgid}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="text-sm w-full">
-      <label for="name" class="font-medium text-gray-700">{$_('name')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('name')}
-        type="text"
-        bind:value={editable.name}
-        name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-    </div>
-    <div class="text-sm w-full">
-      <label
-        for="contact"
-        class="font-medium text-gray-700">{$_('contact')}</label>
-      <Select
-        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) => label
-            .toLowerCase()
-            .includes(
-              filterText.toLowerCase()
-            ) || option.value.id
-            .toString()
-            .startsWith(filterText.toLowerCase())}
-        items={contacts}
-        showChevron={true}
-        placeholder={$_('no-contact-selected')}
-        noOptionsMessage={$_('no-contact-found')}
-        bind:selectedValue={contact}
-        on:select={(selectedValue) => (editable.contact = selectedValue.detail.value)}
-        on:clear={() => (editable.contact = null)} />
-    </div>
-    <div>
-      <div class="flex items-start mt-2">
-        <div class="flex items-center h-5">
-          <input
-            bind:checked={editable.registrationEnabled}
-            id="toggle_selfservice_feature"
-            name="toggle_selfservice_feature"
-            type="checkbox"
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-        </div>
-        <div class="ml-3 text-sm">
-          <label
-            for="toggle_selfservice_feature"
-            class="font-medium text-gray-700">{$_('selfservice-registration')}</label>
-        </div>
-      </div>
-      <div>
-        {#if editable.registrationEnabled}
-          <div class="text-sm w-full">
-            <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">
-                {#if editable.registrationKey}
-                {registrationLink}
-                {:else}
-                {$_('you-have-to-save-your-changes-to-generate-a-link')}
-                {/if}
-              </p>
-              <div
-                class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  height="24"><path fill="none" d="M0 0h24v24H0z" />
-                  <path
-                    fill="currentColor"
-                    d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" /></svg>
-              </div>
-            </div>
-            {#if editable.registrationKey}
-            <p class="text-gray-500 text-xs">
-              {$_('click-to-copy-the-link-into-your-clipboard')}
-            </p>
-            {/if}
-          </div>
-        {/if}
-        <!--  -->
-        <div>
-          <div class="flex items-start mt-2">
-            <div class="flex items-center h-5">
-              <input
-                bind:checked={editable.address_checked}
-                id="toggle_address_checkbox"
-                name="toggle_address_checkbox"
-                type="checkbox"
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-            </div>
-            <div class="ml-3 text-sm">
-              <label
-                for="toggle_address_checkbox"
-                class="font-medium text-gray-700">{$_('address')}</label>
-            </div>
-          </div>
-        </div>
-        {#if editable.address_checked === true}
-          <div class="col-span-6">
-            <label
-              for="address1"
-              class="block text-sm font-medium text-gray-700">{$_('address')}</label>
-            <input
-              autocomplete="off"
-              placeholder="Address"
-              class:border-red-500={!isAddress1Valid}
-              class:focus:border-red-500={!isAddress1Valid}
-              class:focus:ring-red-500={!isAddress1Valid}
-              bind:value={editable.address.address1}
-              type="text"
-              name="address1"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-            {#if !isAddress1Valid}
-              <span
-                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                {$_('address-is-required')}
-              </span>
-            {/if}
-          </div>
-          <div class="col-span-6">
-            <label
-              for="address2"
-              class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
-            <input
-              autocomplete="off"
-              placeholder={$_('apartment-suite-etc')}
-              bind:value={editable.address.address2}
-              type="text"
-              name="address2"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-          </div>
-          <div class="col-span-6">
-            <label
-              for="zipcode"
-              class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
-            <input
-              autocomplete="off"
-              placeholder={$_('zip-postal-code')}
-              class:border-red-500={!iszipcodevalid}
-              class:focus:border-red-500={!iszipcodevalid}
-              class:focus:ring-red-500={!iszipcodevalid}
-              bind:value={editable.address.postalcode}
-              type="text"
-              name="zipcode"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-            {#if !iszipcodevalid}
-              <span
-                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                {$_('valid-zipcode-postal-code-is-required')}
-              </span>
-            {/if}
-          </div>
-          <div class="col-span-6">
-            <label
-              for="city"
-              class="block text-sm font-medium text-gray-700">{$_('city')}</label>
-            <input
-              autocomplete="off"
-              placeholder={$_('city')}
-              class:border-red-500={!iscityvalid}
-              class:focus:border-red-500={!iscityvalid}
-              class:focus:ring-red-500={!iscityvalid}
-              bind:value={editable.address.city}
-              type="text"
-              name="city"
-              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-            {#if !iscityvalid}
-              <span
-                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                {$_('valid-city-is-required')}
-              </span>
-            {/if}
-          </div>
-        {/if}
-      </div>
-    </div>
-  </section>
-{:else}
-  {#await promise}
-    {$_('organization-detail-is-being-loaded')}
-  {:catch error}
-    <PromiseError />
-  {/await}
-{/if}
+<script>
+  import {
+    GroupContactService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import toast from 'svelte-french-toast'
+
+  import store from "../../store";
+  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+  import PromiseError from "../base/PromiseError.svelte";
+  import Select from "svelte-select";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+  import { tick } from "svelte";
+  $: delete_triggered = false;
+  $: address_valid_or_none =
+    (isAddress1Valid && iszipcodevalid && iscityvalid) ||
+    editable.address_checked === false;
+  $: save_enabled = data_changed && address_valid_or_none;
+  let original = "";
+  let original_object = {};
+  let contacts = [];
+  let valueCopy = null;
+  let areaDom;
+  let copied = false;
+  export let params;
+  $: editable = {};
+  $: contact = {};
+  $: data_loaded = false;
+  $: data_changed = !(JSON.stringify(editable) === original);
+  $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
+  $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
+  $: iscityvalid = editable.address?.city?.trim().length !== 0;
+  $: sponsoring_contracts_show = true;
+  $: cards_show = true;
+  $: certificates_show = true;
+  $: generate_orgs = [original_object];
+  $: registrationLink = `${config.baseurl}/selfservice/register/${editable.registrationKey}`;
+  const getContactLabel = (option) =>
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
+    params.orgid
+  ).then((value) => {
+    data_loaded = true;
+    value.address_checked = value.address.address1 !== null;
+    if (value.address_checked === false) {
+      value.address = {
+        address1: "",
+        address2: "",
+        city: "",
+        postalcode: "",
+        country: "",
+      };
+    }
+    editable = Object.assign(editable, value);
+    editable = editable;
+    original_object = Object.assign(editable, value);
+    original = JSON.stringify(value);
+    GroupContactService.groupContactControllerGetAll().then((val) => {
+      contacts = val.map((r) => {
+        return { label: getContactLabel(r), value: r };
+      });
+      if (editable.contact) {
+        contact = contacts.find((g) => g.value.id == editable.contact.id);
+      } else {
+        contact = null;
+      }
+    });
+  });
+  let modal_open = false;
+  let delete_org = {};
+  function deleteOrganization() {
+    RunnerOrganizationService.runnerOrganizationControllerRemove(
+      original_object.id,
+      false
+    )
+      .then((resp) => {
+        toast($_("organization-deleted"));
+        location.replace("./");
+      })
+      .catch((err) => {
+        modal_open = true;
+        delete_org = original_object;
+      });
+  }
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      toast($_("updating-organization"));
+      let postdata = Object.assign({}, editable);
+      if (postdata.address_checked === false) {
+        postdata.address = null;
+      }
+      postdata.contact = postdata.contact?.id;
+      RunnerOrganizationService.runnerOrganizationControllerPut(
+        original_object.id,
+        postdata
+      )
+        .then((resp) => {
+          editable.registrationKey = resp.registrationKey;
+          original_object = Object.assign({}, editable);
+          original = JSON.stringify(original_object);
+          toast.success($_("updated-organization"));
+        })
+        .catch((err) => {});
+    } else {
+    }
+  }
+  async function copy() {
+    if (!editable.registrationKey) {
+      toast.error($_("you-have-to-save-your-changes-to-generate-a-link"));
+      return;
+    }
+    valueCopy = registrationLink;
+    await tick();
+    areaDom.focus();
+    areaDom.select();
+    try {
+      const successful = document.execCommand("copy");
+      if (!successful) {
+        throw new Error();
+      }
+      toast($_("copied-link-to-clipboard"));
+      copied = true;
+    } catch (err) {
+      toast.error($_("error-whyile-copying-to-clipboard"));
+    }
+    // we can notifi by event or storage about copy status
+    valueCopy = null;
+  }
+  export let import_modal_open = false;
+</script>
+
+{#if valueCopy != null}<textarea bind:this={areaDom}>{valueCopy}</textarea>{/if}
+<ImportRunnerModal
+  on:cancelDelete={(event) => {
+    import_modal_open = false;
+  }}
+  current_runners={[]}
+  passed_team={{}}
+  passed_orgs={[]}
+  passed_org={editable}
+  opened_from="OrgDetail"
+  bind:import_modal_open
+/>
+<ConfirmOrgDeletion bind:modal_open bind:delete_org />
+{#if data_loaded}
+  <section class="container p-5">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original_object.name}
+      <span data-id="org_actions_${editable.id}">
+        <GenerateSponsoringContracts
+          bind:sponsoring_contracts_show
+          bind:generate_orgs
+        />
+        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
+        <GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
+        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
+          <button
+            on:click={() => {
+              import_modal_open = true;
+            }}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+          >
+            {$_("import-runners")}
+          </button>
+        {/if}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
+          {#if delete_triggered}
+            <button
+              on:click={deleteOrganization}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+              >{$_("confirm-delete")}</button
+            >
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+              >{$_("cancel")}</button
+            >
+          {/if}
+          {#if !delete_triggered}
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+              >{$_("delete-organization")}</button
+            >
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            on:click={submit}
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
+            type="button"
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            >{$_("save-changes")}</button
+          >
+        {/if}
+      </span>
+    </div>
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="mr-2 flex items-center">
+              <svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                <polyline points="9 22 9 12 15 12 15 22" /></svg
+              >
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="/">{$_("home")}</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                ><line x1="5" y1="12" x2="19" y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg
+              >
+            </li>
+            <li class="mr-2 flex items-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z"
+                /></svg
+              >
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="./">{$_("organizations")}</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                ><line x1="5" y1="12" x2="19" y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg
+              >
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">Org-Details #{params.orgid}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="text-sm w-full">
+      <label for="name" class="font-medium text-gray-700">{$_("name")}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_("name")}
+        type="text"
+        bind:value={editable.name}
+        name="name"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
+    </div>
+    <div class="text-sm w-full">
+      <label for="contact" class="font-medium text-gray-700"
+        >{$_("contact")}</label
+      >
+      <Select
+        containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        itemFilter={(label, filterText, option) =>
+          label.toLowerCase().includes(filterText.toLowerCase()) ||
+          option.value.id.toString().startsWith(filterText.toLowerCase())}
+        items={contacts}
+        showChevron={true}
+        placeholder={$_("no-contact-selected")}
+        noOptionsMessage={$_("no-contact-found")}
+        bind:selectedValue={contact}
+        on:select={(selectedValue) =>
+          (editable.contact = selectedValue.detail.value)}
+        on:clear={() => (editable.contact = null)}
+      />
+    </div>
+    <div>
+      <div class="flex items-start mt-2">
+        <div class="flex items-center h-5">
+          <input
+            bind:checked={editable.registrationEnabled}
+            id="toggle_selfservice_feature"
+            name="toggle_selfservice_feature"
+            type="checkbox"
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+          />
+        </div>
+        <div class="ml-3 text-sm">
+          <label
+            for="toggle_selfservice_feature"
+            class="font-medium text-gray-700"
+            >{$_("selfservice-registration")}</label
+          >
+        </div>
+      </div>
+      <div>
+        {#if editable.registrationEnabled}
+          <div class="text-sm w-full">
+            <button on:click={copy} class="inline-flex w-full">
+              <p
+                name="token"
+                class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+              >
+                {#if editable.registrationKey}
+                  {registrationLink}
+                {:else}
+                  {$_("you-have-to-save-your-changes-to-generate-a-link")}
+                {/if}
+              </p>
+              <div
+                class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  height="24"
+                  ><path fill="none" d="M0 0h24v24H0z" />
+                  <path
+                    fill="currentColor"
+                    d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"
+                  /></svg
+                >
+              </div>
+            </button>
+            {#if editable.registrationKey}
+              <p class="text-gray-500 text-xs">
+                {$_("click-to-copy-the-link-into-your-clipboard")}
+              </p>
+            {/if}
+          </div>
+        {/if}
+        <!--  -->
+        <div>
+          <div class="flex items-start mt-2">
+            <div class="flex items-center h-5">
+              <input
+                bind:checked={editable.address_checked}
+                id="toggle_address_checkbox"
+                name="toggle_address_checkbox"
+                type="checkbox"
+                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              />
+            </div>
+            <div class="ml-3 text-sm">
+              <label
+                for="toggle_address_checkbox"
+                class="font-medium text-gray-700">{$_("address")}</label
+              >
+            </div>
+          </div>
+        </div>
+        {#if editable.address_checked === true}
+          <div class="col-span-6">
+            <label
+              for="address1"
+              class="block text-sm font-medium text-gray-700"
+              >{$_("address")}</label
+            >
+            <input
+              autocomplete="off"
+              placeholder="Address"
+              class:border-red-500={!isAddress1Valid}
+              class:focus:border-red-500={!isAddress1Valid}
+              class:focus:ring-red-500={!isAddress1Valid}
+              bind:value={editable.address.address1}
+              type="text"
+              name="address1"
+              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+            />
+            {#if !isAddress1Valid}
+              <span
+                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+              >
+                {$_("address-is-required")}
+              </span>
+            {/if}
+          </div>
+          <div class="col-span-6">
+            <label
+              for="address2"
+              class="block text-sm font-medium text-gray-700"
+              >{$_("apartment-suite-etc")}</label
+            >
+            <input
+              autocomplete="off"
+              placeholder={$_("apartment-suite-etc")}
+              bind:value={editable.address.address2}
+              type="text"
+              name="address2"
+              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+            />
+          </div>
+          <div class="col-span-6">
+            <label for="zipcode" class="block text-sm font-medium text-gray-700"
+              >{$_("zip-postal-code")}</label
+            >
+            <input
+              autocomplete="off"
+              placeholder={$_("zip-postal-code")}
+              class:border-red-500={!iszipcodevalid}
+              class:focus:border-red-500={!iszipcodevalid}
+              class:focus:ring-red-500={!iszipcodevalid}
+              bind:value={editable.address.postalcode}
+              type="text"
+              name="zipcode"
+              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+            />
+            {#if !iszipcodevalid}
+              <span
+                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+              >
+                {$_("valid-zipcode-postal-code-is-required")}
+              </span>
+            {/if}
+          </div>
+          <div class="col-span-6">
+            <label for="city" class="block text-sm font-medium text-gray-700"
+              >{$_("city")}</label
+            >
+            <input
+              autocomplete="off"
+              placeholder={$_("city")}
+              class:border-red-500={!iscityvalid}
+              class:focus:border-red-500={!iscityvalid}
+              class:focus:ring-red-500={!iscityvalid}
+              bind:value={editable.address.city}
+              type="text"
+              name="city"
+              class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+            />
+            {#if !iscityvalid}
+              <span
+                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+              >
+                {$_("valid-city-is-required")}
+              </span>
+            {/if}
+          </div>
+        {/if}
+        <div class="text-sm w-full">
+          <span class="font-medium text-gray-700">{$_("distance")}</span>
+          <br />
+          <span class="text-gray-700">{(original_object.total_distance / 1000).toFixed(2)} km</span>
+        </div>
+      </div>
+    </div>
+  </section>
+{:else}
+  {#await promise}
+    {$_("organization-detail-is-being-loaded")}
+  {:catch error}
+    <PromiseError />
+  {/await}
+{/if}
--- a/src/components/orgs/OrgOverview.svelte
+++ b/src/components/orgs/OrgOverview.svelte
@@ -1,219 +1,250 @@
-<script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
-  let modal_open = false;
-  let delete_org = {};
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import store from "../../store";
-  import OrgsEmptyState from "./OrgsEmptyState.svelte";
-  import Toastify from "toastify-js";
-  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  $: searchvalue = "";
-  $: active_deletes = [];
-  $: sponsoring_contracts_show = current_organizations.some((r) => r.is_selected === true);
-  $: cards_show = current_organizations.some((r) => r.is_selected === true);
-  $: generate_orgs = current_organizations.filter((r) => r.is_selected === true);
-  $: certificates_show = current_organizations.some(
-    (r) => r.is_selected === true
-  );
-  export let current_organizations = [];
-
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-    (val) => {
-      current_organizations = val;
-    }
-  );
-</script>
-
-<ConfirmOrgDeletion
-  on:cancelDelete={(event) => {
-    modal_open = false;
-    active_deletes[event.detail.id] = false;
-  }}
-  bind:modal_open
-  bind:delete_org />
-{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
-  {#await promise}
-    <div
-      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert">
-      <p class="font-bold">{$_('organizations-are-being-loaded')}</p>
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
-    </div>
-  {:then}
-    {#if current_organizations.length === 0}
-      <OrgsEmptyState />
-    {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
-        aria-label={$_('datatable.search')}
-        class="mb-4" />
-      <div class="h-12">
-        <GenerateSponsoringContracts
-            bind:sponsoring_contracts_show
-            bind:generate_orgs />
-        <GenerateRunnerCards
-            bind:cards_show
-            bind:generate_orgs />
-        <GenerateRunnerCertificates
-            bind:certificates_show
-            bind:generate_orgs />
-      </div>
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                <span
-                  on:click={() => {
-                    const newstate = !current_organizations.some((r) => r.is_selected === true);
-                    current_organizations = current_organizations.map((r) => {
-                      r.is_selected = newstate;
-                      return r;
-                    });
-                  }}
-                  class="underline cursor-pointer select-none">{#if current_organizations.some((r) => r.is_selected === true)}
-                    {$_('deselect-all')}
-                  {:else}{$_('select-all')}{/if}
-                </span>
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('name')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('address')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('contact')}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each current_organizations as o}
-              {#if Object.values(o)
-                .toString()
-                .toLowerCase()
-                .includes(searchvalue)}
-                <tr data-rowid="org_{o.id}">
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <input
-                      bind:checked={o.is_selected}
-                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {o.name}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {#if o.address.address1 !== null}
-                            {o.address.address1}<br />
-                            {o.address.address2 || ''}<br />
-                            {o.address.postalcode}
-                            {o.address.city}
-                            {o.address.country}
-                          {/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
-                          {#if o.contact}
-                            <a
-                              href="../contacts/{o.contact.id}"
-                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{o.contact.firstname}
-                              {o.contact.middlename || ''}
-                              {o.contact.lastname}</a>
-                          {:else}{$_('no-contact-specified')}{/if}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  {#if active_deletes[o.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          active_deletes[o.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                      <button
-                        on:click={() => {
-                          RunnerOrganizationService.runnerOrganizationControllerRemove(o.id, false)
-                            .then((resp) => {
-                              current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
-                              Toastify({
-                                text: 'Organization deleted',
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            })
-                            .catch((err) => {
-                              modal_open = true;
-                              delete_org = o;
-                            });
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-                    </td>
-                  {:else}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <a
-                        href="./{o.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
-                        <button
-                          on:click={() => {
-                            active_deletes[o.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-                      {/if}
-                    </td>
-                  {/if}
-                </tr>
-              {/if}
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  {:catch error}
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-      <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_('general_promise_error')}</b>
-        {error}
-      </span>
-    </div>
-  {/await}
-{/if}
+<script>
+  import { _ } from "svelte-i18n";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  let modal_open = false;
+  let delete_org = {};
+  import { RunnerOrganizationService } from "@odit/lfk-client-js";
+  import store from "../../store";
+  import OrgsEmptyState from "./OrgsEmptyState.svelte";
+  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+  import toast from "svelte-french-toast";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  $: sponsoring_contracts_show = current_organizations.some(
+    (r) => r.is_selected === true
+  );
+  $: cards_show = current_organizations.some((r) => r.is_selected === true);
+  $: generate_orgs = current_organizations.filter(
+    (r) => r.is_selected === true
+  );
+  $: certificates_show = current_organizations.some(
+    (r) => r.is_selected === true
+  );
+  export let current_organizations = [];
+
+  const promise =
+    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+      (val) => {
+        current_organizations = val;
+      }
+    );
+</script>
+
+<ConfirmOrgDeletion
+  on:cancelDelete={(event) => {
+    modal_open = false;
+    active_deletes[event.detail.id] = false;
+  }}
+  bind:modal_open
+  bind:delete_org
+/>
+{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
+  {#await promise}
+    <div
+      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+      role="alert"
+    >
+      <p class="font-bold">{$_("organizations-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
+    </div>
+  {:then}
+    {#if current_organizations.length === 0}
+      <OrgsEmptyState />
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_("datatable.search")}
+        aria-label={$_("datatable.search")}
+        class="mb-4"
+      />
+      <div class="h-12">
+        <GenerateSponsoringContracts
+          bind:sponsoring_contracts_show
+          bind:generate_orgs
+        />
+        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
+        <GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
+      </div>
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+      >
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr class="odd:bg-white even:bg-gray-100">
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                <button
+                  on:click={() => {
+                    const newstate = !current_organizations.some(
+                      (r) => r.is_selected === true
+                    );
+                    current_organizations = current_organizations.map((r) => {
+                      r.is_selected = newstate;
+                      return r;
+                    });
+                  }}
+                  class="underline cursor-pointer select-none"
+                  >{#if current_organizations.some((r) => r.is_selected === true)}
+                    {$_("deselect-all")}
+                  {:else}{$_("select-all")}{/if}
+                </button>
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("name")}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("address")}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("contact")}
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">{$_("action")}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each current_organizations as o}
+              {#if Object.values(o)
+                .toString()
+                .toLowerCase()
+                .includes(searchvalue)}
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="org_{o.id}"
+                >
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <input
+                      bind:checked={o.is_selected}
+                      type="checkbox"
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                    />
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">
+                          {o.name}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">
+                          {#if o.address.address1 !== null}
+                            {o.address.address1}<br />
+                            <!-- {o.address.address2 || ''}<br /> -->
+                            {o.address.postalcode}
+                            {o.address.city}
+                            {o.address.country}
+                          {/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">
+                          {#if o.contact}
+                            <a
+                              href="../contacts/{o.contact.id}"
+                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                              >{o.contact.firstname}
+                              {o.contact.middlename || ""}
+                              {o.contact.lastname}</a
+                            >
+                          {:else}{$_("no-contact-specified")}{/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  {#if active_deletes[o.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
+                      <button
+                        on:click={() => {
+                          active_deletes[o.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        >{$_("cancel-delete")}</button
+                      >
+                      <button
+                        on:click={() => {
+                          toast.loading($_("deleting-organization"));
+                          RunnerOrganizationService.runnerOrganizationControllerRemove(
+                            o.id,
+                            false
+                          )
+                            .then((resp) => {
+                              current_organizations =
+                                current_organizations.filter(
+                                  (obj) => obj.id !== o.id
+                                );
+                              toast($_("organization-deleted"));
+                            })
+                            .catch((err) => {
+                              modal_open = true;
+                              delete_org = o;
+                            });
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("confirm-delete")}</button
+                      >
+                    </td>
+                  {:else}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
+                      <a
+                        href="./{o.id}"
+                        class="text-indigo-600 hover:text-indigo-900"
+                        >{$_("details")}</a
+                      >
+                      {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
+                        <button
+                          on:click={() => {
+                            active_deletes[o.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                          >{$_("delete")}</button
+                        >
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+      <span class="inline-block align-middle mr-8">
+        <b class="capitalize">{$_("general_promise_error")}</b>
+        {error}
+      </span>
+    </div>
+  {/await}
+{/if}
--- a/src/components/orgs/Orgs.svelte
+++ b/src/components/orgs/Orgs.svelte
@@ -11,32 +11,34 @@

 <section class="container p-5">
  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('organizations')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
+    {$_("organizations")}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION: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-organization')}
+        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-organization")}
      </button>
    {/if}
-    {#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">
-        {$_('import-runners')}
+        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")}
      </button>
    {/if}
  </span>
  <OrgOverview bind:current_organizations />
 </section>

-{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
  <AddOrgModal bind:current_organizations bind:modal_open />
  <ImportRunnerModal
    on:cancelDelete={(event) => {
@@ -47,5 +49,6 @@
    passed_orgs={current_organizations}
    opened_from="OrgOverview"
    current_runners={[]}
-    bind:import_modal_open />
+    bind:import_modal_open
+  />
 {/if}
--- a/src/components/orgs/OrgsEmptyState.svelte
+++ b/src/components/orgs/OrgsEmptyState.svelte
@@ -9,9 +9,9 @@
 <div class="text-center items-center justify-center">
  <p class="mb-16 text-lg text-gray-500">
    <img class="w-full h-44" src={org_empty} alt="" />
-    <span
-      class="font-bold">{$_('there-are-no-organizations-added-yet')}</span><br />
-    <span>{$_('add-your-first-organization')}</span>
+    <span class="font-bold">{$_("there-are-no-organizations-added-yet")}</span
+    ><br />
+    <span>{$_("add-your-first-organization")}</span>
  </p>
 </div>

--- a/src/components/pdf_generation/GenerateRunnerCards.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCards.svelte
@@ -1,418 +1,365 @@
-<script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import {
-    RunnerCardService,
-    RunnerOrganizationService,
-    RunnerTeamService,
-  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  import { init } from "@paralleldrive/cuid2";
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-
-  export let cards_show = false;
-  export let generate_cards = [];
-  export let generate_runners = [];
-  export let generate_orgs = [];
-  export let generate_teams = [];
-  $: cards_dropdown_open = false;
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
-    ) {
-      cards_dropdown_open = false;
-    }
-  });
-
-  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);
-        let a = document.createElement("a");
-        a.href = url;
-        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) => {
-        console.error(err);
-      });
-  }
-
-  async function generateRunnersCards(locale) {
-    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_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) => {
-            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}_${
-              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) => {});
-      }
-    }
-  }
-</script>
-
-{#if cards_show}
-  <div id="cards:dropdown" class="relative inline-block">
-    <div>
-      <button
-        on:click={() => {
-          cards_dropdown_open = !cards_dropdown_open;
-        }}
-        type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
-        aria-haspopup="true"
-        aria-expanded="true"
-      >
-        {$_("generate-runnercards")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="-mr-1 ml-2 h-5 w-5"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
-          /></svg
-        >
-      </button>
-    </div>
-    {#if cards_dropdown_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="cards:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
-          <button
-            on:click={() => {
-              generateRunnerCards("de");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("german")}
-          </button>
-          <button
-            on:click={() => {
-              generateRunnerCards("en");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("english")}
-          </button>
-        </div>
-      </div>
-    {/if}
-  </div>
-{/if}
+<script>
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import {
+    RunnerCardService,
+    RunnerOrganizationService,
+    RunnerTeamService,
+  } from "@odit/lfk-client-js";
+  import toast from 'svelte-french-toast'
+
+  import { init } from "@paralleldrive/cuid2";
+  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+
+  export let cards_show = false;
+  export let generate_cards = [];
+  export let generate_runners = [];
+  export let generate_orgs = [];
+  export let generate_teams = [];
+  $: cards_dropdown_open = false;
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
+      e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
+    ) {
+      cards_dropdown_open = false;
+    }
+  });
+
+  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) {
+    toast.loading($_("generating-pdf"));
+    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.dismiss();
+          toast.error($_("pdf-generation-failed"));
+        } else {
+          return response.blob();
+        }
+      })
+      .then((blob) => {
+        const url = window.URL.createObjectURL(blob);
+        let a = document.createElement("a");
+        a.href = url;
+        a.download = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        toast.dismiss();
+        toast($_("pdf-successfully-generated"));
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+
+  async function generateRunnersCards(locale) {
+    toast.loading($_("generating-pdf"));
+    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+    let cards = [];
+    for (let runner of generate_runners) {
+      let card = current_cards.find((c) => c.runner?.id == runner.id);
+      if (!card) {
+        card = await RunnerCardService.runnerCardControllerPost({
+          runner: runner.id,
+        });
+      }
+      cards.push(card);
+    }
+    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.dismiss();
+          toast.error($_("pdf-generation-failed"));
+        } 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.dismiss();
+        toast($_("pdf-successfully-generated"));
+      })
+      .catch((err) => {});
+  }
+
+  async function generateTeamCards(locale) {
+    toast.loading($_("generating-pdfs"));
+    let count = 0;
+    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+    for (const t of generate_teams) {
+      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+        t.id
+      );
+      let cards = [];
+      for (let runner of runners) {
+        let card = current_cards.find((c) => c.runner?.id == runner.id);
+        if (!card) {
+          card = await RunnerCardService.runnerCardControllerPost({
+            runner: runner.id,
+          });
+        }
+        cards.push(card);
+      }
+      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.dismiss();
+            toast.error($_("pdf-generation-failed"));
+          } 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.dismiss();
+            toast.success($_("pdfs-successfully-generated"));
+          }
+        })
+        .catch((err) => {});
+    }
+  }
+
+  async function generateOrgCards(locale) {
+    toast.loading($_("generating-pdfs"));
+    const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+    let count = 0;
+    let count_orgs = 0;
+    for (const o of generate_orgs) {
+      count_orgs++;
+      let count = 0;
+      let runners =
+        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+          o.id,
+          true
+        );
+      let cards = [];
+      for (let runner of runners) {
+        let card = current_cards.find((c) => c.runner?.id == runner.id);
+        if (!card) {
+          card = await RunnerCardService.runnerCardControllerPost({
+            runner: runner.id,
+          });
+        }
+        cards.push(card);
+      }
+      await 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.dismiss();
+            toast.error($_("pdf-generation-failed"));
+          } 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.dismiss();
+            toast.success($_("pdfs-successfully-generated"));
+          }
+        })
+        .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) => {
+            if (response.status != "200") {
+              toast.dismiss();
+              toast.error($_("pdf-generation-failed"));
+            } 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}_${
+              t.name
+            }-${locale}-${createId()}.pdf`;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            if (
+              count === o.teams.length &&
+              count_orgs === generate_orgs.length
+            ) {
+              toast.dismiss();
+              toast($_("pdfs-successfully-generated"));
+            }
+          })
+          .catch((err) => {});
+      }
+    }
+  }
+</script>
+
+{#if cards_show}
+  <div id="cards:dropdown" class="relative inline-block">
+    <div>
+      <button
+        on:click={() => {
+          cards_dropdown_open = !cards_dropdown_open;
+        }}
+        type="button"
+        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+        id="options-menu"
+        aria-haspopup="true"
+        aria-expanded="true"
+      >
+        {$_("generate-runnercards")}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="-mr-1 ml-2 h-5 w-5"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            fill="currentColor"
+            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
+          /></svg
+        >
+      </button>
+    </div>
+    {#if cards_dropdown_open}
+      <div
+        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
+        id="cards:dropdown:menu"
+      >
+        <div
+          class="py-1"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu"
+        >
+          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
+            >{$_("select-language")}</span
+          >
+          <button
+            on:click={() => {
+              generateRunnerCards("de");
+            }}
+            type="submit"
+            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+            role="menuitem"
+          >
+            {$_("german")}
+          </button>
+          <button
+            on:click={() => {
+              generateRunnerCards("en");
+            }}
+            type="submit"
+            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+            role="menuitem"
+          >
+            {$_("english")}
+          </button>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
--- a/src/components/pdf_generation/GenerateRunnerCertificates.svelte
+++ b/src/components/pdf_generation/GenerateRunnerCertificates.svelte
@@ -1,355 +1,312 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import {
-    DonationService,
-    RunnerTeamService,
-    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  import { init } from "@paralleldrive/cuid2";
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-
-  export let certificates_show = false;
-  export let generate_runners = [];
-  export let generate_orgs = [];
-  export let generate_teams = [];
-  $: certificates_dropdown_open = false;
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
-    ) {
-      certificates_dropdown_open = false;
-    }
-  });
-
-  function generateCertificates(locale) {
-    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);
-        let a = document.createElement("a");
-        a.href = url;
-        if (generate_runners.length == 1) {
-          a.download = `${$_("certificates")}_${
-            generate_runners[0].firstname
-          }_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
-        } else {
-          a.download = `${$_("certificates")}-${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 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) {
-          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}_${
-              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) => {});
-      }
-    }
-  }
-</script>
-
-{#if certificates_show}
-  <div id="certificates:dropdown" class="relative inline-block">
-    <div>
-      <button
-        on:click={() => {
-          certificates_dropdown_open = !certificates_dropdown_open;
-        }}
-        type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
-        aria-haspopup="true"
-        aria-expanded="true"
-      >
-        {$_("generate-runner-certificates")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="-mr-1 ml-2 h-5 w-5"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
-          /></svg
-        >
-      </button>
-    </div>
-    {#if certificates_dropdown_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="certificates:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
-          <button
-            on:click={() => {
-              generateCertificates("de");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("german")}
-          </button>
-          <button
-            on:click={() => {
-              generateCertificates("en");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("english")}
-          </button>
-        </div>
-      </div>
-    {/if}
-  </div>
-{/if}
+<script>
+  import { _ } from "svelte-i18n";
+  import {
+    DonationService,
+    RunnerTeamService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
+  import { init } from "@paralleldrive/cuid2";
+  import toast from "svelte-french-toast";
+  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+
+  export let certificates_show = false;
+  export let generate_runners = [];
+  export let generate_orgs = [];
+  export let generate_teams = [];
+  $: certificates_dropdown_open = false;
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
+      e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
+    ) {
+      certificates_dropdown_open = false;
+    }
+  });
+
+  function generateCertificates(locale) {
+    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) {
+    toast.loading($_("generating-pdf"));
+    const current_donations =
+      (await DonationService.donationControllerGetAll()) || [];
+    let certificateRunners = [];
+    for (let runner of generate_runners) {
+      runner.distanceDonations =
+        current_donations.filter((d) => d.runner?.id == runner.id) || [];
+      certificateRunners.push(runner);
+    }
+    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.dismiss();
+          toast.error($_("pdf-generation-failed"));
+        } 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 = `${$_("certificates")}_${
+            generate_runners[0].firstname
+          }_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
+        } else {
+          a.download = `${$_("certificates")}-${locale}.pdf`;
+        }
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        toast.dismiss();
+        toast($_("pdf-successfully-generated"));
+      })
+      .catch((err) => {});
+  }
+
+  async function generateTeamCertificates(locale) {
+    toast.loading($_("generating-pdfs"));
+    let count = 0;
+    const current_donations =
+      (await DonationService.donationControllerGetAll()) || [];
+    for (const t of generate_teams) {
+      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+        t.id
+      );
+      let certificateRunners = [];
+      for (let runner of runners) {
+        runner.distanceDonations =
+          current_donations.filter((d) => d.runner?.id == runner.id) || [];
+        certificateRunners.push(runner);
+      }
+      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.dismiss();
+            toast.error($_("pdf-generation-failed"));
+          } 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.dismiss();
+            toast.success($_("pdfs-successfully-generated"));
+          }
+        })
+        .catch((err) => {});
+    }
+  }
+
+  async function generateOrgCertificates(locale) {
+    toast.loading($_("generating-pdfs"));
+    const current_donations =
+      (await DonationService.donationControllerGetAll()) || [];
+    let count = 0;
+    let count_orgs = 0;
+    for (const o of generate_orgs) {
+      count_orgs++;
+      let count = 0;
+      let runners =
+        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+          o.id,
+          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.dismiss();
+            toast.error($_("pdf-generation-failed"));
+          } 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.dismiss();
+            toast.success($_("pdfs-successfully-generated"));
+          }
+        })
+        .catch((err) => {});
+      for (const t of o.teams) {
+        count++;
+        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+          t.id
+        );
+        let certificateRunners = [];
+        for (let runner of runners) {
+          runner.distanceDonations =
+            current_donations.filter((d) => d.runner?.id == runner.id) || [];
+          certificateRunners.push(runner);
+        }
+        await 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.dismiss();
+              toast.error($_("pdf-generation-failed"));
+            } 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}_${
+              t.name
+            }-${locale}-${createId()}.pdf`;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            if (
+              count === o.teams.length &&
+              count_orgs === generate_orgs.length
+            ) {
+              toast.dismiss();
+              toast($_("pdfs-successfully-generated"));
+            }
+          })
+          .catch((err) => {});
+      }
+    }
+  }
+</script>
+
+{#if certificates_show}
+  <div id="certificates:dropdown" class="relative inline-block">
+    <div>
+      <button
+        on:click={() => {
+          certificates_dropdown_open = !certificates_dropdown_open;
+        }}
+        type="button"
+        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+        id="options-menu"
+        aria-haspopup="true"
+        aria-expanded="true"
+      >
+        {$_("generate-runner-certificates")}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="-mr-1 ml-2 h-5 w-5"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            fill="currentColor"
+            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
+          /></svg
+        >
+      </button>
+    </div>
+    {#if certificates_dropdown_open}
+      <div
+        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
+        id="certificates:dropdown:menu"
+      >
+        <div
+          class="py-1"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu"
+        >
+          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
+            >{$_("select-language")}</span
+          >
+          <button
+            on:click={() => {
+              generateCertificates("de");
+            }}
+            type="submit"
+            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+            role="menuitem"
+          >
+            {$_("german")}
+          </button>
+          <button
+            on:click={() => {
+              generateCertificates("en");
+            }}
+            type="submit"
+            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+            role="menuitem"
+          >
+            {$_("english")}
+          </button>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
--- a/src/components/pdf_generation/GenerateSponsoringContracts.svelte
+++ b/src/components/pdf_generation/GenerateSponsoringContracts.svelte
@@ -1,324 +1,283 @@
-<script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import {
-    RunnerOrganizationService,
-    RunnerTeamService,
-  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  import { init } from "@paralleldrive/cuid2";
-  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
-
-  export let sponsoring_contracts_show = false;
-  export let generate_runners = [];
-  export let generate_orgs = [];
-  export let generate_teams = [];
-  $: sponsoring_contracts_download_open = false;
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    ) {
-      sponsoring_contracts_download_open = false;
-    }
-  });
-
-  function generateSponsoringContract(locale) {
-    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) {
-    const toast = Toastify({
-      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) {
-    const toast = Toastify({
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).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();
-        }
-      })
-      .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}-${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();
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }
-</script>
-
-{#if sponsoring_contracts_show}
-  <div id="sponsoring:dropdown" class="relative inline-block">
-    <div>
-      <button
-        on:click={() => {
-          sponsoring_contracts_download_open =
-            !sponsoring_contracts_download_open;
-        }}
-        type="button"
-        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-        id="options-menu"
-        aria-haspopup="true"
-        aria-expanded="true"
-      >
-        {$_("generate-sponsoring-contracts")}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="-mr-1 ml-2 h-5 w-5"
-          ><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            fill="currentColor"
-            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
-          /></svg
-        >
-      </button>
-    </div>
-    {#if sponsoring_contracts_download_open}
-      <div
-        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
-        id="sponsoring:dropdown:menu"
-      >
-        <div
-          class="py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
-            >{$_("select-language")}</span
-          >
-          <button
-            on:click={() => {
-              generateSponsoringContract("de");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("german")}
-          </button>
-          <button
-            on:click={() => {
-              generateSponsoringContract("en");
-            }}
-            type="submit"
-            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            {$_("english")}
-          </button>
-        </div>
-      </div>
-    {/if}
-  </div>
-{/if}
+<script>
+  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import {
+    RunnerOrganizationService,
+    RunnerTeamService,
+  } from "@odit/lfk-client-js";
+
+  import { init } from "@paralleldrive/cuid2";
+  import toast from "svelte-french-toast";
+  const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+
+  export let sponsoring_contracts_show = false;
+  export let generate_runners = [];
+  export let generate_orgs = [];
+  export let generate_teams = [];
+  $: sponsoring_contracts_download_open = false;
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
+
+  function generateSponsoringContract(locale) {
+    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) {
+    toast.loading($_("generating-pdfs"));
+    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.dismiss();
+            toast.error($_("pdf-generation-failed"));
+          } 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.dismiss();
+            toast.success($_("pdfs-successfully-generated"));
+          }
+        })
+        .catch((err) => {});
+    }
+  }
+
+  async function generateOrgContracts(locale) {
+    toast.loading($_("generating-pdf"));
+    let count_orgs = 0;
+    for (const o of generate_orgs) {
+      count_orgs++;
+      let count = 0;
+      let runners =
+        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+          o.id,
+          true
+        );
+      await 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.dismiss();
+            toast.error($_("pdf-generation-failed"));
+          } 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.dismiss();
+            toast.success($_("pdfs-successfully-generated"));
+          }
+        })
+        .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.dismiss();
+              toast.error($_("pdf-generation-failed"));
+            } 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.dismiss();
+              toast($_("pdfs-successfully-generated"));
+            }
+          })
+          .catch((err) => {});
+      }
+    }
+  }
+
+  function generateRunnerContracts(locale) {
+    toast.loading($_("generating-pdf"));
+    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.dismiss();
+          toast.error($_("pdf-generation-failed"));
+        } 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}-${createId()}.pdf`;
+        }
+        a.download = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        toast.dismiss();
+        toast($_("pdf-successfully-generated"));
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+</script>
+
+{#if sponsoring_contracts_show}
+  <div id="sponsoring:dropdown" class="relative inline-block">
+    <div>
+      <button
+        on:click={() => {
+          sponsoring_contracts_download_open =
+            !sponsoring_contracts_download_open;
+        }}
+        type="button"
+        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+        id="options-menu"
+        aria-haspopup="true"
+        aria-expanded="true"
+      >
+        {$_("generate-sponsoring-contracts")}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="-mr-1 ml-2 h-5 w-5"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            fill="currentColor"
+            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
+          /></svg
+        >
+      </button>
+    </div>
+    {#if sponsoring_contracts_download_open}
+      <div
+        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
+        id="sponsoring:dropdown:menu"
+      >
+        <div
+          class="py-1"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu"
+        >
+          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
+            >{$_("select-language")}</span
+          >
+          <button
+            on:click={() => {
+              generateSponsoringContract("de");
+            }}
+            type="submit"
+            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+            role="menuitem"
+          >
+            {$_("german")}
+          </button>
+          <button
+            on:click={() => {
+              generateSponsoringContract("en");
+            }}
+            type="submit"
+            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+            role="menuitem"
+          >
+            {$_("english")}
+          </button>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
--- a/src/components/presets/Avatars.svelte
+++ b/src/components/presets/Avatars.svelte
@@ -3,78 +3,90 @@
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <div class="relative rounded-full w-8 h-8">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <div class="relative rounded-full w-12 h-12">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <div class="relative rounded-full w-16 h-16">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <div class="relative rounded-full w-20 h-20">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <div class="relative rounded-full w-24 h-24">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <h3 class="text-lg">Status Avatars</h3>
 <div class="relative rounded-full w-4 h-4">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
  <div class="absolute rounded-full right-0 bottom-0 w-1 h-1 bg-gray-200" />
 </div>
 <div class="relative rounded-full w-8 h-8">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
  <div class="absolute rounded-full right-0 bottom-0 w-2 h-2 bg-green-400" />
 </div>
 <div class="relative rounded-full w-12 h-12">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
  <div class="absolute rounded-full right-0 bottom-0 w-4 h-4 bg-red-600" />
 </div>
 <div class="relative rounded-full w-16 h-16">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
  <div class="absolute rounded-full right-0 bottom-0 w-5 h-5 bg-gray-200" />
 </div>
 <div class="relative rounded-full w-20 h-20">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-green-400" />
 </div>
 <div class="relative rounded-full w-24 h-24">
  <img
    alt=""
    src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-red-600" />
 </div>
--- a/src/components/presets/Badges.svelte
+++ b/src/components/presets/Badges.svelte
@@ -1,24 +1,36 @@
 <h3 class="text-lg">badges</h3>
 <span
-  class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle">Paid</span>
+  class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle"
+  >Paid</span
+>
 <span
-  class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle">Overdue</span>
-<span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">Primary</span>
-<span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">Secondary</span>
-<span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">Success</span>
-<span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">Danger</span>
-<span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">Warning</span>
-<span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">Info</span>
-<span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">Light</span>
-<span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">Dark</span>
+  class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle"
+  >Overdue</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600"
+  >Primary</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600"
+  >Secondary</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600"
+  >Success</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600"
+  >Danger</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400"
+  >Warning</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300"
+  >Info</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200"
+  >Light</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900"
+  >Dark</span
+>
 <h3 class="text-lg">closable badges</h3>
 <span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
  Primary
--- a/src/components/presets/BreadcrumbNav.svelte
+++ b/src/components/presets/BreadcrumbNav.svelte
@@ -13,9 +13,10 @@
            class="h-3 w-3 stroke-current"
            height="1em"
            width="1em"
-            xmlns="http://www.w3.org/2000/svg"><path
-              d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-            <polyline points="9 22 9 12 15 12 15 22" /></svg>
+            xmlns="http://www.w3.org/2000/svg"
+            ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+            <polyline points="9 22 9 12 15 12 15 22" /></svg
+          >
        </li>
        <li class="flex items-center">
          <a class="mr-2" href="/">Home</a><svg
@@ -28,12 +29,10 @@
            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>
+            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">
          <a class="mr-2" href="/">Second level</a><svg
@@ -46,12 +45,10 @@
            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>
+            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">
          <a class="mr-2" href="/">Third level</a>
--- a/src/components/presets/ComponentDump.svelte
+++ b/src/components/presets/ComponentDump.svelte
@@ -29,8 +29,7 @@
 <div class="mb-8">
  <Table />
 </div>
-<div
-  class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
+<div class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
  <div class="flex flex-row items-center justify-between mb-6">
    <div class="flex flex-col">
      <div class="text-sm font-light text-grey-500">Regular</div>
@@ -39,32 +38,38 @@
  </div>
  <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
    <div class="w-full lg:w-1/4">
-      <div class="form-element ">
-        <div class="form-label">Label</div><input
+      <div class="form-element">
+        <div class="form-label">Label</div>
+        <input
          name="name"
          type="text"
          class="form-input"
-          placeholder="Enter something..." />
+          placeholder="Enter something..."
+        />
        <div class="form-hint">This is a hint</div>
      </div>
    </div>
    <div class="w-full lg:w-1/4">
-      <div class="form-element ">
-        <div class="form-label">First name</div><input
+      <div class="form-element">
+        <div class="form-label">First name</div>
+        <input
          name="name"
          type="text"
          class="form-input form-input-invalid"
-          placeholder="john@example.com" />
+          placeholder="john@example.com"
+        />
        <div class="form-error">First name is required</div>
      </div>
    </div>
    <div class="w-full lg:w-1/4">
-      <div class="form-element ">
-        <div class="form-label">First name</div><input
+      <div class="form-element">
+        <div class="form-label">First name</div>
+        <input
          name="name"
          type="text"
          class="form-input form-input-valid"
-          placeholder="john@example.com" />
+          placeholder="john@example.com"
+        />
        <div class="form-success">First name is valid</div>
      </div>
    </div>
--- a/src/components/presets/ConversionsChart.svelte
+++ b/src/components/presets/ConversionsChart.svelte
@@ -4,31 +4,55 @@
      <div class="text-sm font-light text-grey-500">Conversions</div>
      <div class="text-sm font-bold"><span>This year</span></div>
    </div>
-    <div class="relative"><button
-        class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
-          stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
-          stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
-          xmlns="http://www.w3.org/2000/svg">
-          <circle cx="12" cy="12" r="1"></circle>
-          <circle cx="12" cy="5" r="1"></circle>
-          <circle cx="12" cy="19" r="1"></circle>
-        </svg></button>
-      <div class="dropdown absolute top-0 right-0 mt-8 ">
+    <div class="relative">
+      <button
+        class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"
+        ><svg
+          stroke="currentColor"
+          fill="none"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="stroke-current stroke-1"
+          size="18"
+          height="18"
+          width="18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="1" />
+          <circle cx="12" cy="5" r="1" />
+          <circle cx="12" cy="19" r="1" />
+        </svg></button
+      >
+      <div class="dropdown absolute top-0 right-0 mt-8">
        <div class="dropdown-content w-48 bottom-start">
          <div class="flex flex-col w-full">
            <ul class="list-none">
-              <li><a
+              <li>
+                <a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">Today</a></li>
-              <li><a
+                  href="/">Today</a
+                >
+              </li>
+              <li>
+                <a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This week</a></li>
-              <li><a
+                  href="/">This week</a
+                >
+              </li>
+              <li>
+                <a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This month</a></li>
-              <li><a
+                  href="/">This month</a
+                >
+              </li>
+              <li>
+                <a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This year</a></li>
+                  href="/">This year</a
+                >
+              </li>
            </ul>
          </div>
        </div>
@@ -38,167 +62,418 @@
  <div class="flex flex-row w-full">
    <div style="width:100%;height:240px">
      <div class="recharts-responsive-container" style="width:100%;height:100%">
-        <div class="recharts-wrapper"
-          style="position: relative; cursor: default; width: 704px; height: 240px;"><svg
-            class="recharts-surface" width="704" height="240" viewBox="0 0 704 240" version="1.1">
+        <div
+          class="recharts-wrapper"
+          style="position: relative; cursor: default; width: 704px; height: 240px;"
+        >
+          <svg
+            class="recharts-surface"
+            width="704"
+            height="240"
+            viewBox="0 0 704 240"
+            version="1.1"
+          >
            <defs>
              <clipPath id="recharts3-clip">
-                <rect x="40" y="10" height="190" width="654"></rect>
+                <rect x="40" y="10" height="190" width="654" />
              </clipPath>
            </defs>
-            <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
+            <g
+              class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis"
+            >
              <g class="recharts-cartesian-axis-ticks">
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30" x="67.25"
-                    y="208" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="middle">
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="67.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="67.25" dy="0.71em">Jan</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="121.75" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="121.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="121.75" dy="0.71em">Feb</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="176.25" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="176.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="176.25" dy="0.71em">Mar</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="230.75" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="230.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="230.75" dy="0.71em">Apr</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="285.25" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="285.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="285.25" dy="0.71em">May</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="339.75" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="339.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="339.75" dy="0.71em">Jun</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="394.25" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="394.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="394.25" dy="0.71em">Jul</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="448.75" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="448.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="448.75" dy="0.71em">Aug</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="503.25" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="503.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="503.25" dy="0.71em">Sep</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="557.75" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="557.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="557.75" dy="0.71em">Oct</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="612.25" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="612.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="612.25" dy="0.71em">Nov</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
-                    x="666.75" y="208" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="654"
+                    height="30"
+                    x="666.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                    <tspan x="666.75" dy="0.71em">Dec</tspan>
-                  </text></g>
+                  </text></g
+                >
              </g>
            </g>
-            <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
+            <g
+              class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis"
+            >
              <g class="recharts-cartesian-axis-ticks">
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
-                    y="200" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end">
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="30"
+                    height="190"
+                    x="32"
+                    y="200"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="end"
+                  >
                    <tspan x="32" dy="0.355em">0</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
-                    y="152.5" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="30"
+                    height="190"
+                    x="32"
+                    y="152.5"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="end"
+                  >
                    <tspan x="32" dy="0.355em">65</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
-                    y="105" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="30"
+                    height="190"
+                    x="32"
+                    y="105"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="end"
+                  >
                    <tspan x="32" dy="0.355em">130</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
-                    y="57.5" stroke="none" fill="#666"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="30"
+                    height="190"
+                    x="32"
+                    y="57.5"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="end"
+                  >
                    <tspan x="32" dy="0.355em">195</tspan>
-                  </text></g>
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
-                    y="10" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
-                    text-anchor="end">
+                  </text></g
+                >
+                <g class="recharts-layer recharts-cartesian-axis-tick"
+                  ><text
+                    width="30"
+                    height="190"
+                    x="32"
+                    y="10"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="end"
+                  >
                    <tspan x="32" dy="0.355em">260</tspan>
-                  </text></g>
+                  </text></g
+                >
              </g>
            </g>
            <g class="recharts-layer recharts-bar">
              <g class="recharts-layer recharts-bar-rectangles">
                <g class="recharts-layer">
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="119.11538461538461" x="55" y="80.88461538461539"
-                      radius="0" class="recharts-rectangle"
-                      d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="119.11538461538461"
+                      x="55"
+                      y="80.88461538461539"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="95" x="109.5" y="105" radius="0"
-                      class="recharts-rectangle" d="M 109.5,105 h 10 v 95 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="95"
+                      x="109.5"
+                      y="105"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 109.5,105 h 10 v 95 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="122.03846153846155" x="164" y="77.96153846153845"
-                      radius="0" class="recharts-rectangle"
-                      d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="122.03846153846155"
+                      x="164"
+                      y="77.96153846153845"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="81.11538461538461" x="218.5"
-                      y="118.88461538461539" radius="0" class="recharts-rectangle"
-                      d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="81.11538461538461"
+                      x="218.5"
+                      y="118.88461538461539"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="114" x="273" y="86" radius="0"
-                      class="recharts-rectangle" d="M 273,86 h 10 v 114 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="114"
+                      x="273"
+                      y="86"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 273,86 h 10 v 114 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="117.65384615384616" x="327.5"
-                      y="82.34615384615384" radius="0" class="recharts-rectangle"
-                      d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="117.65384615384616"
+                      x="327.5"
+                      y="82.34615384615384"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="103.76923076923076" x="382" y="96.23076923076924"
-                      radius="0" class="recharts-rectangle"
-                      d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="103.76923076923076"
+                      x="382"
+                      y="96.23076923076924"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="92.80769230769232" x="436.5"
-                      y="107.19230769230768" radius="0" class="recharts-rectangle"
-                      d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="92.80769230769232"
+                      x="436.5"
+                      y="107.19230769230768"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="92.80769230769232" x="491" y="107.19230769230768"
-                      radius="0" class="recharts-rectangle"
-                      d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="92.80769230769232"
+                      x="491"
+                      y="107.19230769230768"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="127.8846153846154" x="545.5" y="72.1153846153846"
-                      radius="0" class="recharts-rectangle"
-                      d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="127.8846153846154"
+                      x="545.5"
+                      y="72.1153846153846"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="105.23076923076924" x="600" y="94.76923076923076"
-                      radius="0" class="recharts-rectangle"
-                      d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="105.23076923076924"
+                      x="600"
+                      y="94.76923076923076"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="115.46153846153845" x="654.5"
-                      y="84.53846153846155" radius="0" class="recharts-rectangle"
-                      d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"></path>
+                    <path
+                      fill="#90caf9"
+                      width="10"
+                      height="115.46153846153845"
+                      x="654.5"
+                      y="84.53846153846155"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"
+                    />
                  </g>
                </g>
              </g>
@@ -207,75 +482,162 @@
              <g class="recharts-layer recharts-bar-rectangles">
                <g class="recharts-layer">
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="112.53846153846155" x="69" y="87.46153846153845"
-                      radius="0" class="recharts-rectangle"
-                      d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="112.53846153846155"
+                      x="69"
+                      y="87.46153846153845"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="151.26923076923077" x="123.5"
-                      y="48.730769230769226" radius="0" class="recharts-rectangle"
-                      d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="151.26923076923077"
+                      x="123.5"
+                      y="48.730769230769226"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="181.23076923076923" x="178" y="18.769230769230774"
-                      radius="0" class="recharts-rectangle"
-                      d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="181.23076923076923"
+                      x="178"
+                      y="18.769230769230774"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="165.8846153846154" x="232.5" y="34.11538461538461"
-                      radius="0" class="recharts-rectangle"
-                      d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="165.8846153846154"
+                      x="232.5"
+                      y="34.11538461538461"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="156.38461538461536" x="287" y="43.61538461538464"
-                      radius="0" class="recharts-rectangle"
-                      d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="156.38461538461536"
+                      x="287"
+                      y="43.61538461538464"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="118.38461538461539" x="341.5"
-                      y="81.61538461538461" radius="0" class="recharts-rectangle"
-                      d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="118.38461538461539"
+                      x="341.5"
+                      y="81.61538461538461"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="138.84615384615384" x="396" y="61.15384615384616"
-                      radius="0" class="recharts-rectangle"
-                      d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="138.84615384615384"
+                      x="396"
+                      y="61.15384615384616"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="175.3846153846154" x="450.5"
-                      y="24.615384615384613" radius="0" class="recharts-rectangle"
-                      d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="175.3846153846154"
+                      x="450.5"
+                      y="24.615384615384613"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="155.65384615384613" x="505" y="44.34615384615387"
-                      radius="0" class="recharts-rectangle"
-                      d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="155.65384615384613"
+                      x="505"
+                      y="44.34615384615387"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="179.76923076923077" x="559.5"
-                      y="20.230769230769226" radius="0" class="recharts-rectangle"
-                      d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="179.76923076923077"
+                      x="559.5"
+                      y="20.230769230769226"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="173.19230769230768" x="614" y="26.80769230769232"
-                      radius="0" class="recharts-rectangle"
-                      d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="173.19230769230768"
+                      x="614"
+                      y="26.80769230769232"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"
+                    />
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="146.15384615384616" x="668.5"
-                      y="53.84615384615384" radius="0" class="recharts-rectangle"
-                      d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"></path>
+                    <path
+                      fill="#1e88e5"
+                      width="10"
+                      height="146.15384615384616"
+                      x="668.5"
+                      y="53.84615384615384"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"
+                    />
                  </g>
                </g>
              </g>
            </g>
          </svg>
-          <div class="recharts-tooltip-wrapper"
-            style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);">
-          </div>
+          <div
+            class="recharts-tooltip-wrapper"
+            style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);"
+          />
        </div>
-        <div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
+        <div
+          style="position:absolute;width:0;height:0;visibility:hidden;display:none"
+        />
      </div>
    </div>
  </div>
-</div>
+</div>
--- a/src/components/presets/Pagination.svelte
+++ b/src/components/presets/Pagination.svelte
@@ -1,15 +1,18 @@
 <!-- This example requires Tailwind CSS v2.0+ -->
 <div
-  class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+  class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
+>
  <div class="flex-1 flex justify-between sm:hidden">
    <a
      href="#"
-      class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
+      class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
+    >
      Previous
    </a>
    <a
      href="#"
-      class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
+      class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
+    >
      Next
    </a>
  </div>
@@ -28,10 +31,12 @@
    <div>
      <nav
        class="relative z-0 inline-flex shadow-sm -space-x-px"
-        aria-label="Pagination">
+        aria-label="Pagination"
+      >
        <a
          href="#"
-          class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+          class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+        >
          <span class="sr-only">Previous</span>
          <!-- Heroicon name: chevron-left -->
          <svg
@@ -39,50 +44,60 @@
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
-            aria-hidden="true">
+            aria-hidden="true"
+          >
            <path
              fill-rule="evenodd"
              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
+            />
          </svg>
        </a>
        <a
          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
          1
        </a>
        <a
          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
          2
        </a>
        <a
          href="#"
-          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
          3
        </a>
        <span
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
+          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+        >
          ...
        </span>
        <a
          href="#"
-          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
          8
        </a>
        <a
          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
          9
        </a>
        <a
          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
          10
        </a>
        <a
          href="#"
-          class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+          class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+        >
          <span class="sr-only">Next</span>
          <!-- Heroicon name: chevron-right -->
          <svg
@@ -90,11 +105,13 @@
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
-            aria-hidden="true">
+            aria-hidden="true"
+          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
+            />
          </svg>
        </a>
      </nav>
--- a/src/components/presets/Profile.svelte
+++ b/src/components/presets/Profile.svelte
@@ -7,14 +7,14 @@
      </div>
    </div>
  </div>
-  <div
-    class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
+  <div class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
    <div class="flex flex-row items-center justify-start p-4">
      <div class="flex-shrink-0 w-24">
        <img
          src="/images/faces/m1.png"
          alt="media"
-          class="shadow rounded-full h-20 w-20 shadow-outline mb-2" />
+          class="shadow rounded-full h-20 w-20 shadow-outline mb-2"
+        />
      </div>
      <div class="py-2 px-2">
        <p class="text-base font-bold whitespace-no-wrap">Lucas Smith</p>
@@ -22,7 +22,8 @@
          Vital Database Dude
        </p>
        <div
-          class="flex flex-row items-center justify-start w-full py-1 space-x-2">
+          class="flex flex-row items-center justify-start w-full py-1 space-x-2"
+        >
          <svg
            stroke="currentColor"
            fill="none"
@@ -33,8 +34,11 @@
            class="stroke-current text-xl text-twitter"
            height="1em"
            width="1em"
-            xmlns="http://www.w3.org/2000/svg"><path
-              d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" /></svg><svg
+            xmlns="http://www.w3.org/2000/svg"
+            ><path
+              d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
+            /></svg
+          ><svg
            stroke="currentColor"
            fill="none"
            stroke-width="2"
@@ -44,8 +48,11 @@
            class="stroke-current text-xl text-facebook"
            height="1em"
            width="1em"
-            xmlns="http://www.w3.org/2000/svg"><path
-              d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg><svg
+            xmlns="http://www.w3.org/2000/svg"
+            ><path
+              d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
+            /></svg
+          ><svg
            stroke="currentColor"
            fill="none"
            stroke-width="2"
@@ -55,21 +62,21 @@
            class="stroke-current text-xl text-instagram"
            height="1em"
            width="1em"
-            xmlns="http://www.w3.org/2000/svg"><rect
-              x="2"
-              y="2"
-              width="20"
-              height="20"
-              rx="5"
-              ry="5" />
+            xmlns="http://www.w3.org/2000/svg"
+            ><rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-            <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg>
+            <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg
+          >
        </div>
      </div>
      <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
        <button
-          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Subscribe</button><button
-          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Follow</button>
+          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
+          >Subscribe</button
+        ><button
+          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
+          >Follow</button
+        >
      </div>
    </div>
    <div class="flex flex-wrap">
@@ -77,14 +84,19 @@
        <div class="flex flex-wrap flex-col w-full tabs">
          <div class="flex lg:flex-wrap flex-row lg:space-x-2">
            <div class="flex-none">
-              <button class="tab tab-underline tab-active" type="button">Account
-                settings</button>
+              <button class="tab tab-underline tab-active" type="button"
+                >Account settings</button
+              >
            </div>
            <div class="flex-none">
-              <button class="tab tab-underline" type="button">Email preferences</button>
+              <button class="tab tab-underline" type="button"
+                >Email preferences</button
+              >
            </div>
            <div class="flex-none">
-              <button class="tab tab-underline" type="button">Security settings</button>
+              <button class="tab tab-underline" type="button"
+                >Security settings</button
+              >
            </div>
          </div>
          <div class="tab-content block">
@@ -93,51 +105,64 @@
                <form class="form flex flex-wrap w-full">
                  <div class="w-full">
                    <div class="form-element">
-                      <div class="form-label">First name</div><input
+                      <div class="form-label">First name</div>
+                      <input
                        name="first-name"
                        type="text"
-                        class="form-input "
-                        placeholder="Enter you first name" />
+                        class="form-input"
+                        placeholder="Enter you first name"
+                      />
                    </div>
                    <div class="form-element">
-                      <div class="form-label">Last name</div><input
+                      <div class="form-label">Last name</div>
+                      <input
                        name="last-name"
                        type="text"
-                        class="form-input "
-                        placeholder="Enter you last name" />
+                        class="form-input"
+                        placeholder="Enter you last name"
+                      />
                    </div>
                    <div class="form-element">
-                      <div class="form-label">Email address</div><input
+                      <div class="form-label">Email address</div>
+                      <input
                        name="email"
                        type="email"
-                        class="form-input "
-                        placeholder="Enter you email address" />
+                        class="form-input"
+                        placeholder="Enter you email address"
+                      />
                    </div>
                    <div class="form-element">
-                      <div class="form-label">Company</div><input
+                      <div class="form-label">Company</div>
+                      <input
                        name="company"
                        type="text"
-                        class="form-input "
-                        placeholder="Enter you company" />
+                        class="form-input"
+                        placeholder="Enter you company"
+                      />
                    </div>
                    <div class="form-element">
-                      <div class="form-label">Position</div><input
+                      <div class="form-label">Position</div>
+                      <input
                        name="position"
                        type="text"
-                        class="form-input "
-                        placeholder="Enter you position" />
+                        class="form-input"
+                        placeholder="Enter you position"
+                      />
                    </div>
                    <div class="form-element">
-                      <div class="form-label">Language</div><select
-                        name="language"
-                        class="form-select "><option>Select language</option>
+                      <div class="form-label">Language</div>
+                      <select name="language" class="form-select"
+                        ><option>Select language</option>
                        <option value="english">English</option>
                        <option value="spanish">Spanish</option>
-                        <option value="portuguese">Portuguese</option></select>
+                        <option value="portuguese">Portuguese</option></select
+                      >
                    </div>
-                  </div><input
+                  </div>
+                  <input
                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
+                  />
                </form>
              </div>
            </div>
@@ -148,56 +173,70 @@
                <form class="form flex flex-wrap w-full">
                  <div class="w-full">
                    <div class="form-element">
-                      <div class="form-label">Current email</div><input
+                      <div class="form-label">Current email</div>
+                      <input
                        name="email"
                        type="email"
-                        class="form-input "
-                        placeholder="Enter you current email address" />
+                        class="form-input"
+                        placeholder="Enter you current email address"
+                      />
                    </div>
                    <div class="form-element">
-                      <div class="form-label">New email</div><input
+                      <div class="form-label">New email</div>
+                      <input
                        name="email"
                        type="email"
-                        class="form-input "
-                        placeholder="Enter you new email address" />
+                        class="form-input"
+                        placeholder="Enter you new email address"
+                      />
                    </div>
                    <div class="form-element">
                      <div class="form-label">Daily updates</div>
                      <div class="flex items-center justify-start space-x-2">
-                        <label
-                          class="flex items-center justify-start space-x-2"><input
+                        <label class="flex items-center justify-start space-x-2"
+                          ><input
                            type="radio"
                            name="daily-updates"
-                            class="form-radio h-4 w-4 "
-                            value="yes" /><span
-                            class="">Yes</span></label><label
-                          class="flex items-center justify-start space-x-2"><input
+                            class="form-radio h-4 w-4"
+                            value="yes"
+                          /><span class="">Yes</span></label
+                        ><label
+                          class="flex items-center justify-start space-x-2"
+                          ><input
                            type="radio"
                            name="daily-updates"
-                            class="form-radio h-4 w-4 "
-                            value="no" /><span class="">No</span></label>
+                            class="form-radio h-4 w-4"
+                            value="no"
+                          /><span class="">No</span></label
+                        >
                      </div>
                    </div>
                    <div class="form-element">
                      <div class="form-label">Weekly updates</div>
                      <div class="flex items-center justify-start space-x-2">
-                        <label
-                          class="flex items-center justify-start space-x-2"><input
+                        <label class="flex items-center justify-start space-x-2"
+                          ><input
                            type="radio"
                            name="weekle-updates"
-                            class="form-radio h-4 w-4 "
-                            value="yes" /><span
-                            class="">Yes</span></label><label
-                          class="flex items-center justify-start space-x-2"><input
+                            class="form-radio h-4 w-4"
+                            value="yes"
+                          /><span class="">Yes</span></label
+                        ><label
+                          class="flex items-center justify-start space-x-2"
+                          ><input
                            type="radio"
                            name="weekle-updates"
-                            class="form-radio h-4 w-4 "
-                            value="no" /><span class="">No</span></label>
+                            class="form-radio h-4 w-4"
+                            value="no"
+                          /><span class="">No</span></label
+                        >
                      </div>
                    </div>
-                  </div><input
+                  </div>
+                  <input
                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
+                  />
                </form>
              </div>
            </div>
@@ -208,29 +247,37 @@
                <form class="form flex flex-wrap w-full">
                  <div class="w-full">
                    <div class="form-element">
-                      <div class="form-label">Current password</div><input
+                      <div class="form-label">Current password</div>
+                      <input
                        name="current-password"
                        type="password"
-                        class="form-input "
-                        placeholder="Enter your current password" />
+                        class="form-input"
+                        placeholder="Enter your current password"
+                      />
                    </div>
                    <div class="form-element">
-                      <div class="form-label">New password</div><input
+                      <div class="form-label">New password</div>
+                      <input
                        name="new-password"
                        type="password"
-                        class="form-input "
-                        placeholder="Enter your new password" />
+                        class="form-input"
+                        placeholder="Enter your new password"
+                      />
                    </div>
                    <div class="form-element">
-                      <div class="form-label">Confirm new password</div><input
+                      <div class="form-label">Confirm new password</div>
+                      <input
                        name="confirm-new-password"
                        type="password"
-                        class="form-input "
-                        placeholder="Enter your new password confirmation" />
+                        class="form-input"
+                        placeholder="Enter your new password confirmation"
+                      />
                    </div>
-                  </div><input
+                  </div>
+                  <input
                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
+                  />
                </form>
              </div>
            </div>
--- a/src/components/presets/Table.svelte
+++ b/src/components/presets/Table.svelte
@@ -3,44 +3,50 @@
  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
      <div
-        class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+        class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
+      >
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
              <th
                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                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">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
                Title
              </th>
              <th
                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
                Status
              </th>
              <th
                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
                Role
              </th>
              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('edit')}</span>
+                <span class="sr-only">{$_("edit")}</span>
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200">
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10">
                    <img
                      class="h-10 w-10 rounded-full"
                      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60"
-                      alt="" />
+                      alt=""
+                    />
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-gray-900">
@@ -60,7 +66,8 @@
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
-                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+                >
                  Active
                </span>
              </td>
@@ -68,10 +75,11 @@
                Admin
              </td>
              <td
-                class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                <a
-                  href="#"
-                  class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
+                class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+              >
+                <a href="#" class="text-indigo-600 hover:text-indigo-900"
+                  >{$_("edit")}</a
+                >
              </td>
            </tr>

--- a/src/components/presets/Tabs.svelte
+++ b/src/components/presets/Tabs.svelte
@@ -1,18 +1,23 @@
 <h3 class="text-lg">Tabs</h3>
 <div
-  class="w-full flex sm:border-b sm:border-gray-300 relative flex-col sm:flex-row">
+  class="w-full flex sm:border-b sm:border-gray-300 relative flex-col sm:flex-row"
+>
  <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
+    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
+  >
    1
  </div>
  <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
+    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
+  >
    2
  </div>
  <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
+    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
+  >
    3
  </div>
  <div
-    class="hidden sm:block absolute bottom-0 left-0 h-1 bg-blue-400 transition-transform duration-300 ease-out w-1/4 transform translate-x-double" />
+    class="hidden sm:block absolute bottom-0 left-0 h-1 bg-blue-400 transition-transform duration-300 ease-out w-1/4 transform translate-x-double"
+  />
 </div>
--- a/src/components/presets/Tags.svelte
+++ b/src/components/presets/Tags.svelte
@@ -1,6 +1,7 @@
 <div>
  <div
-    class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-blue-200 text-blue-700 rounded-full">
+    class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-blue-200 text-blue-700 rounded-full"
+  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
@@ -11,7 +12,8 @@
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
-      class="feather feather-bell-off mr-2">
+      class="feather feather-bell-off mr-2"
+    >
      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
      <path d="M18.63 13A17.89 17.89 0 0 1 18 8" />
      <path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" />
@@ -22,7 +24,8 @@
  </div>

  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full">
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full"
+  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
@@ -33,7 +36,8 @@
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
-      class="feather feather-arrow-right mr-2">
+      class="feather feather-arrow-right mr-2"
+    >
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12 5 19 12 12 19" />
    </svg>
@@ -41,7 +45,8 @@
  </div>

  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-orange-200 text-orange-700 rounded-full">
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-orange-200 text-orange-700 rounded-full"
+  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
@@ -52,14 +57,16 @@
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
-      class="feather feather-activity mr-2">
+      class="feather feather-activity mr-2"
+    >
      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
    </svg>
    Tag
  </div>

  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-red-200 text-red-700 rounded-full">
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-red-200 text-red-700 rounded-full"
+  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
@@ -70,7 +77,8 @@
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
-      class="feather feather-archive mr-2">
+      class="feather feather-archive mr-2"
+    >
      <polyline points="21 8 21 21 3 21 3 8" />
      <rect x="1" y="3" width="22" height="5" />
      <line x1="10" y1="12" x2="14" y2="12" />
@@ -79,7 +87,8 @@
  </div>

  <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border">
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border"
+  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
@@ -90,10 +99,12 @@
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
-      class="feather feather-hard-drive mr-2">
+      class="feather feather-hard-drive mr-2"
+    >
      <line x1="22" y1="12" x2="2" y2="12" />
      <path
-        d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+        d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
+      />
      <line x1="6" y1="16" x2="6.01" y2="16" />
      <line x1="10" y1="16" x2="10.01" y2="16" />
    </svg>
--- 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 {
    RunnerService,
    RunnerTeamService,
@@ -9,10 +9,10 @@
  } 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 Select from "svelte-select";
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
+  import toast from 'svelte-french-toast'

  export let modal_open;
  $: selected_team = undefined;
@@ -78,10 +78,6 @@
  function submit() {
    if (processed_last_submit === true) {
      processed_last_submit = false;
-      const toast = Toastify({
-        text: $_("runner-is-being-added"),
-        duration: -1,
-      }).showToast();
      let postdata = {
        group: selected_team,
        firstname: firstname_input_value,
@@ -96,6 +92,7 @@
      if (email_input_value) {
        postdata.email = email_input_value;
      }
+      toast.loading($_("runner-is-being-added"));
      RunnerService.runnerControllerPost(postdata)
        .then((result) => {
          firstname_input_value = "";
@@ -104,11 +101,8 @@
          email_input_value = "";
          modal_open = false;
          //
-          Toastify({
-            text: $_("runner-added"),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
+          toast.dismiss();
+          toast.success($_("runner-added"));
          dispatch("created", { runners: [result] });
        })
        .catch((err) => {
@@ -116,8 +110,6 @@
        })
        .finally(() => {
          processed_last_submit = true;
-          //
-          toast.hideToast();
        });
    }
  }
@@ -126,58 +118,70 @@
 {#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">
+      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
                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" />
+                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>
+                  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">
-                {$_('create-a-new-runner')}
+                {$_("create-a-new-runner")}
              </h3>
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-add-a-new-runner')}
+                  {$_(
+                    "please-provide-the-required-information-to-add-a-new-runner"
+                  )}
                </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">{$_('first-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -185,34 +189,41 @@
                    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">
-                      {$_('first-name-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("first-name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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">{$_('last-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -220,41 +231,49 @@
                    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">
-                      {$_('last-name-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("last-name-is-required")}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="team"
-                    class="block text-sm font-medium text-gray-700">{$_('team')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("team")}</label
+                  >
                  <Select
                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-                    itemFilter={(label, filterText, option) => label
-                        .toLowerCase()
-                        .includes(
-                          filterText.toLowerCase()
-                        ) || option.value.id
+                    itemFilter={(label, filterText, option) =>
+                      label.toLowerCase().includes(filterText.toLowerCase()) ||
+                      option.value.id
                        .toString()
                        .startsWith(filterText.toLowerCase())}
                    items={orgs.concat(teams)}
                    showChevron={true}
-                    placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
-                    noOptionsMessage={$_('no-organization-or-team-found')}
-                    on:select={(selectedValue) => (selected_team = selectedValue.detail.value.id)}
-                    on:clear={() => (selected_team = null)} />
+                    placeholder={$_(
+                      "search-for-an-organization-or-team-by-name-or-id"
+                    )}
+                    noOptionsMessage={$_("no-organization-or-team-found")}
+                    on:select={(selectedValue) =>
+                      (selected_team = selectedValue.detail.value.id)}
+                    on:clear={() => (selected_team = null)}
+                  />
                </div>
                <div class="col-span-6">
                  <label
                    for="phone"
-                    class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -262,21 +281,27 @@
                    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">
-                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
+                      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"
+                      )}
                    </span>
                  {/if}
                </div>
                <div class="col-span-6">
                  <label
                    for="email"
-                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("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}
@@ -284,11 +309,13 @@
                    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">
-                      {$_('valid-email-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("valid-email-is-required")}
                    </span>
                  {/if}
                </div>
@@ -302,16 +329,18 @@
            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')}
+            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')}
+            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>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipp Dormann	9abf74d6d2	🚀RELEASE v1.5.1	2024-11-21 09:46:27 +01:00
Philipp Dormann	50e81a6cb5	fix(dockerfile): AS casing	2024-11-21 09:45:51 +01:00
Philipp Dormann	8fae1fb6b3	chore(deps): bump some	2024-11-21 09:45:39 +01:00
Philipp Dormann	372fa110ec	fix(scanstations): CopyScanStationTokenModal open after create	2024-11-21 09:40:32 +01:00
Philipp Dormann	35bec9fe58	chore(deps): pnpm@9	2024-11-21 09:33:22 +01:00
Philipp Dormann	93d67bdba9	chore(deps): node:23.2.0	2024-11-21 09:32:58 +01:00
Philipp Dormann	a5e72a18e3	refactor(scanstations/CopyScanStationTokenModal): drop dispatch	2024-11-21 09:31:45 +01:00
Philipp Dormann	91d2f46b93	fix(config): add explicit window.config	2024-11-21 09:31:09 +01:00
Philipp Dormann	c60bae4533	fix(tracks/AddTrackModal): i18n	2024-11-21 09:30:52 +01:00
Philipp Dormann	43ac878d44	fix: tailwind config	2024-11-21 09:30:24 +01:00
Nicolai Ort	ceabd06a43	🚀RELEASE v1.5.0	2024-11-20 19:29:18 +01:00
Nicolai Ort	9bfc0c5338	fix(components): Add missing toast imports	2024-11-20 19:28:07 +01:00
Nicolai Ort	fb8206ff13	feat(ci)!: Switch to woodpecker All checks were successful ci/woodpecker/push/build Pipeline was successful Details	2023-11-06 19:51:01 +01:00
Nicolai Ort	dceb0ef461	🚀RELEASE v1.4.13 Some checks reported errors continuous-integration/drone/push Build encountered an error Details	2023-07-31 18:55:53 +02:00
Nicolai Ort	88bc1982ca	Show donations as euro in export	2023-07-31 18:55:09 +02:00
Nicolai Ort	e741a9d7e7	Merge branch 'dev' of git.odit.services:lfk/frontend into dev All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-18 21:35:28 +02:00
Nicolai Ort	65f1d22205	🚀RELEASE v1.4.12	2023-05-18 21:35:16 +02:00
Nicolai Ort	d867c08aba	fix(donation/payment): Funny javascript number to float conversion where integers were needed	2023-05-18 21:34:41 +02:00
Nicolai Ort	6193eff38e	new license file version [CI SKIP]	2023-05-10 11:29:03 +00:00
Nicolai Ort	f1929e7cf9	Merge branch 'dev' of git.odit.services:lfk/frontend into dev All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-10 13:28:43 +02:00
Nicolai Ort	373484c242	🚀RELEASE v1.4.11	2023-05-10 13:28:34 +02:00
Nicolai Ort	f77460bb0c	chore(deps): Lockfile	2023-05-10 13:28:21 +02:00
Nicolai Ort	574e0dcb05	feat(orgs): Show total distance	2023-05-10 13:27:47 +02:00
Nicolai Ort	7b19a0aa08	chore(deps): More bumps	2023-05-10 13:22:11 +02:00
Nicolai Ort	08642d7618	new license file version [CI SKIP]	2023-05-10 11:21:43 +00:00
Nicolai Ort	c3e9c27cd3	🚀RELEASE v1.4.10 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-10 13:21:10 +02:00
Nicolai Ort	29a2854671	chore(deps): Bumped svelte-table	2023-05-10 13:20:44 +02:00
Nicolai Ort	8e6786e722	chore(deps): Pin and bump	2023-05-10 13:19:25 +02:00
Nicolai Ort	6ad40564e3	chore(deps): Bumped scanclientjs	2023-05-10 13:18:44 +02:00
Nicolai Ort	776973bfe9	🚀RELEASE v1.4.9 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-09 16:32:00 +02:00
Nicolai Ort	6025e43baa	Fixed empty return	2023-05-09 16:29:41 +02:00
Nicolai Ort	d9a47f882c	Changed the in table replacement method	2023-05-09 16:29:25 +02:00
Nicolai Ort	4235758a6d	🚀RELEASE v1.4.8 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-09 10:44:04 +02:00
Nicolai Ort	59fe2dfabb	Switched donor loading to non-paginated	2023-05-09 10:43:33 +02:00
Nicolai Ort	6364536dcd	🚀RELEASE v1.4.7 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 20:30:20 +02:00
Nicolai Ort	a8a771114d	Paginated modal data loading	2023-05-04 20:28:21 +02:00
Nicolai Ort	4e0a2c8301	Moved loading to onmount	2023-05-04 20:17:29 +02:00
Nicolai Ort	b6fed92a17	🚀RELEASE v1.4.6 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 20:10:57 +02:00
Nicolai Ort	97b57aeb0c	fix(donor/detail): Set email to null to avoid vaidation errors	2023-05-04 20:10:21 +02:00
Nicolai Ort	e25ed1fff9	fix(donor/detail): Set phone to null to avoid vaidation errors	2023-05-04 20:09:43 +02:00
Nicolai Ort	a2ff5b8a14	fix(donor/details): don't load donations	2023-05-04 20:07:54 +02:00
Nicolai Ort	0284f18beb	🚀RELEASE v1.4.5 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 20:04:02 +02:00
Nicolai Ort	803d64c78c	fix: Removed dynamic pagesize adjustments All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 20:03:23 +02:00
Nicolai Ort	dacb2f8ace	Revert "revert: buggy pagination" This reverts commit `b2648645e8`.	2023-05-04 19:57:46 +02:00
Philipp Dormann	b7a53960e5	🚀RELEASE v1.4.4 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 14:44:31 +02:00
Philipp Dormann	66f1e6b4fe	fix(AddDonationModal): missing toast dismiss on success distance donation Some checks failed continuous-integration/drone/push Build is failing Details	2023-05-04 14:44:17 +02:00
Philipp Dormann	33166bfafc	🚀RELEASE v1.4.3 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 14:32:56 +02:00
Philipp Dormann	b2648645e8	revert: buggy pagination Some checks failed continuous-integration/drone/push Build is failing Details	2023-05-04 14:32:37 +02:00
Philipp Dormann	53e3ddb751	🚀RELEASE v1.4.2 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 13:55:14 +02:00
Philipp Dormann	edc2dcab92	fix(DonorDetail): missing toast import All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-04 13:53:59 +02:00
Philipp Dormann	d49f545d94	fix(GenerateRunnerCertificates): missing toast import Some checks failed continuous-integration/drone/push Build is failing Details	2023-05-04 13:53:42 +02:00
Nicolai Ort	3b98c99b72	🚀RELEASE v1.4.1 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-01 15:10:55 +02:00
Nicolai Ort	1da775a09b	Fixed translation	2023-05-01 15:10:18 +02:00
Nicolai Ort	f0475bd9a0	🚀RELEASE v1.4.0 All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-01 15:08:03 +02:00
Nicolai Ort	15d8afefbb	Bump dockerfile node All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-01 15:06:15 +02:00
Nicolai Ort	f3bcc01685	Pinned config files used All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-01 15:04:58 +02:00
Nicolai Ort	95238606d5	Switched build image node version Some checks failed continuous-integration/drone/push Build is failing Details	2023-05-01 15:01:49 +02:00
Nicolai Ort	bbf8170cb9	Updated store directory for dockerfil Some checks failed continuous-integration/drone/push Build is failing Details	2023-05-01 14:59:36 +02:00
Nicolai Ort	8c628f23dc	Merge pull request 'next' (#180 ) from next into dev Some checks failed continuous-integration/drone/push Build is failing Details Reviewed-on: #180	2023-05-01 12:55:19 +00:00
Philipp Dormann	811f5d5754	monospace fonts for IDs in overviews	2023-05-01 14:53:34 +02:00
Philipp Dormann	69ec7fc1fe	ScansOverview full month formatting	2023-05-01 14:42:56 +02:00
Nicolai Ort	064197d222	Dynamicly adjust page size for large datasets	2023-05-01 14:35:46 +02:00
Nicolai Ort	e9cf2bc849	Full track table editing	2023-05-01 14:27:56 +02:00
Nicolai Ort	103ad57ddc	Added track update toasts	2023-05-01 14:25:22 +02:00
Nicolai Ort	2856c5c1b7	Editing update logic	2023-05-01 14:23:25 +02:00
Nicolai Ort	a953349c14	Updated the track editing switch logic	2023-05-01 14:13:40 +02:00
Nicolai Ort	175d86745f	Added edit button for trackscans	2023-05-01 14:05:44 +02:00
Nicolai Ort	081a141218	Implemented delete for new track table	2023-05-01 14:03:46 +02:00
Philipp Dormann	e904ab0b84	fix: a11y in About page	2023-04-27 08:30:12 +02:00
Philipp Dormann	a2f9dbbe01	text cleanups, StatCard improvements	2023-04-27 08:29:07 +02:00
Philipp Dormann	8b922309b9	drop gridjs (TracksOverview Actions will need to be re-implemented)	2023-04-26 23:26:07 +02:00
Philipp Dormann	4c81e3c432	a11y improvements	2023-04-26 23:14:15 +02:00
Philipp Dormann	6c1a707166	cleanup legacy TeamsOverview text	2023-04-26 23:12:03 +02:00
Philipp Dormann	7d8253618b	improved StatCard readability	2023-04-26 23:11:01 +02:00
Philipp Dormann	dbaf85799a	improved login	2023-04-26 23:09:47 +02:00
Philipp Dormann	daeea24e0e	drop middlename for admin users	2023-04-26 23:08:25 +02:00
Philipp Dormann	0fca0352c5	a11y fix OrgOverview	2023-04-26 23:03:53 +02:00
Philipp Dormann	8eaad8219a	add missing striped tables	2023-04-26 23:02:13 +02:00
Philipp Dormann	6bc92f4a08	a11y cleanup	2023-04-26 23:02:06 +02:00
Philipp Dormann	8be40e2d80	translations	2023-04-26 22:58:17 +02:00
Philipp Dormann	01b415d4cb	fix: scan laptime formatting	2023-04-26 22:56:38 +02:00
Philipp Dormann	5e82638f35	striped tabled	2023-04-26 22:51:57 +02:00
Philipp Dormann	46d076af9d	formatting, full migration to svelte-french-toast	2023-04-26 22:47:42 +02:00
Philipp Dormann	38a665024e	new license file version [CI SKIP]	2023-04-22 09:47:15 +00:00
Philipp Dormann	d32eb8266b	README update All checks were successful continuous-integration/drone/push Build is passing Details	2023-04-22 11:45:47 +02:00
Philipp Dormann	bc4ac0f316	drop legacy ThFilter components	2023-04-22 11:45:40 +02:00
Philipp Dormann	6952b8727f	drop propfilepic	2023-04-22 11:41:51 +02:00
Philipp Dormann	81d4da6550	chore(deps): node:20.0.0	2023-04-22 11:39:32 +02:00
Philipp Dormann	6154ca7ddf	chore(deps): bump all	2023-04-22 11:39:14 +02:00
Philipp Dormann	8fb1e0ca0f	svelte-french-toast + translations Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-22 11:22:38 +02:00
Philipp Dormann	763a01af09	cleanup MainDashContent	2023-04-22 11:16:57 +02:00
Philipp Dormann	663cb29ccd	translation cleanups	2023-04-22 11:16:50 +02:00
Philipp Dormann	56c3365656	add svelte-french-toast Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-22 11:11:50 +02:00
Nicolai Ort	e7b2c64798	🚀RELEASE v1.3.4 Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-19 18:23:17 +02:00
Nicolai Ort	7cb6b63eb9	Smaller sponsoring page size	2023-04-19 18:23:07 +02:00
Nicolai Ort	d6d88f5f60	🚀RELEASE v1.3.3 Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-19 18:18:44 +02:00
Nicolai Ort	2c208c4381	bumped lfk-client-js	2023-04-19 18:18:26 +02:00
Nicolai Ort	39bc6c4945	🚀RELEASE v1.3.2 Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-19 18:17:18 +02:00
Nicolai Ort	b94e3b745f	fix(donors): Shortened texts	2023-04-19 18:16:50 +02:00
Nicolai Ort	6f337aeee1	feat(donations): Resolve donations via donor	2023-04-19 18:15:15 +02:00
Nicolai Ort	5d48060834	fix(donors): Removed debug infos	2023-04-19 18:12:24 +02:00
Nicolai Ort	c842c203e2	🚀RELEASE v1.3.1 All checks were successful continuous-integration/drone/push Build is passing Details	2023-04-19 18:00:58 +02:00
Nicolai Ort	5bcfc8db75	More filtering	2023-04-19 18:00:41 +02:00
Nicolai Ort	27b4dde755	feat(donors): Added name and address filtering	2023-04-19 18:00:16 +02:00
Nicolai Ort	91ab199769	feat(donations): Donation table filtering	2023-04-19 17:53:24 +02:00
Nicolai Ort	e75be49be4	🚀RELEASE v1.3.0 All checks were successful continuous-integration/drone/push Build is passing Details	2023-04-19 17:41:40 +02:00
Nicolai Ort	505fb8cb08	feat(donations): Implemented donation deletion via confirm modal	2023-04-19 17:41:21 +02:00
Nicolai Ort	e5c9265588	feat(donations): Implemented add donation payment via datatable refresh	2023-04-19 17:34:34 +02:00
Nicolai Ort	02003ec80e	feat(donations): Donations reactive create and load into datatable	2023-04-19 17:21:24 +02:00
Nicolai Ort	133470b6f2	feat(donationsoverview): Switched donations overview to datatable	2023-04-19 17:12:04 +02:00
Nicolai Ort	4a6230c439	Merge branch 'dev' of git.odit.services:lfk/frontend into dev Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-19 16:56:23 +02:00
Nicolai Ort	fdc7d80bbf	🚀RELEASE v1.2.0	2023-04-19 16:56:09 +02:00
Nicolai Ort	352551e168	feat(donorsoverview): Dynamicly add newly generated donors	2023-04-19 16:55:14 +02:00
Nicolai Ort	7aec050419	feat(donorsoverview): Implemented delete confirmation with datatable	2023-04-19 16:49:54 +02:00
Philipp Dormann	4289034436	new license file version [CI SKIP]	2023-04-19 14:45:02 +00:00
Philipp Dormann	8f8858f100	feat(DonationsOverview): i18n loading text All checks were successful continuous-integration/drone/push Build is passing Details	2023-04-19 16:44:39 +02:00
Nicolai Ort	d98fb0d5b2	feat(donoroverview): Added datatable formatters	2023-04-19 16:39:30 +02:00
Nicolai Ort	5014bf5bc5	feat(donors): Load donors paginated	2023-04-19 16:23:00 +02:00
Nicolai Ort	0708cabc75	🚀RELEASE v1.1.0 Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-19 16:05:21 +02:00
Nicolai Ort	4fcb26cf93	feat(dashboard): Updated stats icons	2023-04-19 16:04:02 +02:00
Nicolai Ort	269def20d1	feat(dashboard): Added average sponsoring Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-19 15:59:45 +02:00
Nicolai Ort	b8de9e0e42	feat(dashboard): Added average distance	2023-04-19 15:57:46 +02:00
Nicolai Ort	7b2b598588	feat(dashboard): Added total donations	2023-04-19 15:56:21 +02:00
Nicolai Ort	e0b61486b0	feat(dashboar): Added total donors to overview	2023-04-19 15:54:39 +02:00
Nicolai Ort	3f86f7412f	Lockfile	2023-04-19 15:53:33 +02:00
Nicolai Ort	6454d960de	Bumped client	2023-04-19 15:53:28 +02:00
Nicolai Ort	37154c188b	Merge branch 'dev' of git.odit.services:lfk/frontend into dev Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-19 15:38:15 +02:00
Nicolai Ort	8da7578a0a	🚀RELEASE v1.0.0	2023-04-19 15:37:56 +02:00
Nicolai Ort	2a64094006	new license file version [CI SKIP]	2023-04-19 13:37:32 +00:00
Nicolai Ort	e9ce9644ff	Merge pull request 'feature/175-request_pagination' (#176 ) from feature/175-request_pagination into dev All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #176	2023-04-19 13:37:16 +00:00
Nicolai Ort	52439aa5bc	Allways set loaded to true ref #175	2023-04-18 20:47:42 +02:00
Nicolai Ort	ccf865687b	Donation paginated loading ref #175	2023-04-18 20:46:18 +02:00
Nicolai Ort	cac34db1fd	Paginated scan loading ref #175	2023-04-18 20:43:04 +02:00
Nicolai Ort	faf3893180	Paginated runner loading (1000 per page) ref #175	2023-04-18 20:40:28 +02:00
Nicolai Ort	c33dfcfddd	Implemented Async loading of cards via pagination (500 cards per request) ref #175	2023-04-18 20:38:01 +02:00
Nicolai Ort	019e14ab1f	Bumped lfk client Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-18 20:18:46 +02:00
Nicolai Ort	b5790196c6	Merge branch 'dev' of git.odit.services:lfk/frontend into dev Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-17 17:56:42 +02:00
Nicolai Ort	94a64ca690	🚀RELEASE v0.19.0	2023-04-17 17:56:34 +02:00
Nicolai Ort	a6ce04c903	new license file version [CI SKIP]	2023-04-17 15:56:08 +00:00
Nicolai Ort	165c154233	Merge pull request 'feature/173-scanstation_configcodes' (#174 ) from feature/173-scanstation_configcodes into dev All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #174	2023-04-17 15:55:53 +00:00
Nicolai Ort	318547db46	Adjusted size on smaller devices ref #173	2023-04-17 17:55:33 +02:00
Nicolai Ort	e60c09e19c	I18n ref #173	2023-04-17 17:52:05 +02:00
Nicolai Ort	4834d1484c	Styling ref #173	2023-04-17 17:51:46 +02:00
Nicolai Ort	4b6342727e	Implemented config code generation ref #173	2023-04-17 17:47:57 +02:00
Nicolai Ort	cb5fa52cd9	Barcode placeholder ref #173	2023-04-17 17:32:42 +02:00
Nicolai Ort	947d01cf7f	Lockfile	2023-04-17 17:32:31 +02:00
Nicolai Ort	3563394fb3	Added bwip-js for barcode generation ref #173	2023-04-17 17:32:16 +02:00
Nicolai Ort	269d7a7def	🚀RELEASE v0.18.4 Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-15 23:32:08 +02:00
Nicolai Ort	e95f2333b0	Hide address2 in orgs by default	2023-04-15 23:30:46 +02:00
Nicolai Ort	950217e0a3	🚀RELEASE v0.18.3 Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-15 23:27:36 +02:00
Nicolai Ort	5e65fb3301	Dont show adress 2 in runner overview	2023-04-15 23:27:19 +02:00
Nicolai Ort	2a294cde04	🚀RELEASE v0.18.2 All checks were successful continuous-integration/drone/push Build is passing Details	2023-04-15 19:58:14 +02:00
Nicolai Ort	e95420d79c	Push in releaseit	2023-04-15 19:57:59 +02:00
Nicolai Ort	cffbd17dc7	Added timestamps to scanoverview	2023-04-15 19:56:55 +02:00
Nicolai Ort	00de8c3d75	🚀RELEASE v0.18.1 Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-15 19:44:17 +02:00
Nicolai Ort	1f4711d07a	Merge branch 'dev' of git.odit.services:lfk/frontend into dev Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-15 19:43:12 +02:00
Nicolai Ort	30e3396897	Missing scanstation translations	2023-04-15 19:43:06 +02:00
Philipp Dormann	5291e049a1	fix(ConfirmStatsClientDeletion): ScanStationService -> StatsClientService Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-15 19:42:19 +02:00
Philipp Dormann	08fbb504c9	fix(ConfirmScanStationDeletion): donorControllerRemove -> scanStationControllerRemove	2023-04-15 19:41:42 +02:00
Nicolai Ort	e9ca1d3e5d	Merge branch 'dev' of git.odit.services:lfk/frontend into dev All checks were successful continuous-integration/drone/push Build is passing Details	2023-04-12 21:36:33 +02:00
Philipp Dormann	9fe53b0b9c	fix: button onclick a11y Some checks failed continuous-integration/drone/push Build is failing Details	2023-04-12 21:36:16 +02:00