🚀RELEASE v1.9.0

This reverts commit b2648645e8.

.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 npm i -g pnpm rimraf
 RUN rimraf node_modules
-RUN yarn set version berry

.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"
 }

.dockerignore

@@ -1 +1,4 @@
 public/env.sample.js
+.pnpm-store
+.yarn
+.pnp.*

.drone.yml

@@ -1,84 +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: pipeline
-type: kubernetes
-name: build:dev
-
-steps:
-  - name: run full license export
-    depends_on: ["clone"]
-    image: registry.odit.services/hub/library/node:alpine
-    commands:
-      - yarn
-      - yarn licenses:export
-  - 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
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      repo: registry.odit.services/lfk/frontend
-      tags:
-        - dev
-      registry: registry.odit.services
-      mtu: 1000
-trigger:
-  branch:
-    - dev
-  event:
-    - push
-
----
-kind: pipeline
-type: kubernetes
-name: build:tags
-steps:
-  - name: build $DRONE_TAG
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      repo: registry.odit.services/lfk/frontend
-      tags:
-        - '${DRONE_TAG}'
-      registry: registry.odit.services
-      mtu: 1000
-trigger:
-  event:
-  - tag

.gitea/workflows/dev.yaml

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

.gitea/workflows/release.yaml

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

.gitignore

@@ -1,10 +1,8 @@
 node_modules
-package-lock.json
-yarn.lock
 *.map
 public/env.js
 public/index.html
 /dist
+.pnpm-store
 .yarn
-.pnp.js
-.yarnrc.yml
+.pnp.*

.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"]
 }

.vscode/i18n-ally-custom-framework.yml

@@ -1,7 +1,7 @@
 languageIds:
-    - javascript
-    - svelte
-    - html
+  - javascript
+  - svelte
+  - html
 monopoly: false
 refactorTemplates:
-    - "{$_('$1')}"
+  - "{$_('$1')}"

.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
 }

CHANGELOG.md

@@ -2,8 +2,704 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.9.0](https://git.odit.services/lfk/frontend/compare/1.8.2...1.9.0)
+
+- feat: improved ConfirmOrgDeletionModal [`fecf3b5`](https://git.odit.services/lfk/frontend/commit/fecf3b59a320afafee52c95b361edec644c5cbff)
+- feat: modal improvements [`f5a46aa`](https://git.odit.services/lfk/frontend/commit/f5a46aa203ca2adf2e4e6fe4863629ca80f1becb)
+- feat: improve ConfirmTeamDeletionModal [`a2cd54f`](https://git.odit.services/lfk/frontend/commit/a2cd54fba4a987f7f7dbab22cc958f9aea2817ff)
+- feat: improve modals [`443371e`](https://git.odit.services/lfk/frontend/commit/443371e2fdc42506e6e87379bd65facbd8f22d7d)
+- feat: improve toasts [`481f6b6`](https://git.odit.services/lfk/frontend/commit/481f6b686e77ffa36ee08b62f653d626dd9124c9)
+- feat: improve modals [`e7a69eb`](https://git.odit.services/lfk/frontend/commit/e7a69ebdca668a5d78b52d092aa1bca6259aa19b)
+- feat: improve translations [`d7ab924`](https://git.odit.services/lfk/frontend/commit/d7ab9247cd2eab4f7269b23de5fada76a99ac8bc)
+- feat: improved translations [`18a4623`](https://git.odit.services/lfk/frontend/commit/18a4623e71dfd942f2268203ce713030acfb2d9d)
+- feat: improve translations [`9048f3d`](https://git.odit.services/lfk/frontend/commit/9048f3df774df233705a41b08012193447eab803)
+- feat: improved sidebar z-index [`968a7cc`](https://git.odit.services/lfk/frontend/commit/968a7ccc0e7917bf1a42ac8f85f358880951cc2a)
+- feat: improved track deletion ui feedback [`194c3c4`](https://git.odit.services/lfk/frontend/commit/194c3c4886e3f3206d76d8634be9d3dd2fa02d8d)
+
+#### [1.8.2](https://git.odit.services/lfk/frontend/compare/1.8.1...1.8.2)
+
+> 26 March 2025
+
+- feat: improvement of card,certificate,sponsoringcontract action buttons [`7633b7b`](https://git.odit.services/lfk/frontend/commit/7633b7b05671342bc30e0bbecbcd9450e06b5e4d)
+- 🚀RELEASE v1.8.2 [`6249502`](https://git.odit.services/lfk/frontend/commit/6249502a88ec5bfba6dfbc3ad5ede82d71d0d9e2)
+- feat(dashboard): active item for teams + runners [`8a78034`](https://git.odit.services/lfk/frontend/commit/8a780340792445fff1f78db994fb78acb5da8304)
+
+#### [1.8.1](https://git.odit.services/lfk/frontend/compare/1.8.0...1.8.1)
+
+> 26 March 2025
+
+- 🚀RELEASE v1.8.1 [`b8e6b24`](https://git.odit.services/lfk/frontend/commit/b8e6b24bf32379c3f4a1679d422e6fdcc45f7c99)
+- fix(pdf_generation): Only load direct runners for direct calls [`97b7ca9`](https://git.odit.services/lfk/frontend/commit/97b7ca931f607ee64509ad10c2269632fc691091)
+
+#### [1.8.0](https://git.odit.services/lfk/frontend/compare/1.7.0...1.8.0)
+
+> 26 March 2025
+
+- wip [`824ecfa`](https://git.odit.services/lfk/frontend/commit/824ecfab2e976cd7c6cd2851be8a9be5c6b686e1)
+- wip [`0a6cf61`](https://git.odit.services/lfk/frontend/commit/0a6cf619b09be837d5503f4695250c7edaeeaff5)
+- feat: improve fonts + button positions [`c37fb98`](https://git.odit.services/lfk/frontend/commit/c37fb98bed377744981e927ea8d22db9e20c55ca)
+- 🚀RELEASE v1.8.0 [`48dd9ac`](https://git.odit.services/lfk/frontend/commit/48dd9acde595b882630855d5e6af3cfa18fc9ecf)
+- wip [`1bc5314`](https://git.odit.services/lfk/frontend/commit/1bc53146b9f024f3cab613b227d29304d687c92b)
+- wip [`e82350d`](https://git.odit.services/lfk/frontend/commit/e82350df4af082d2bbb322658c6c022d83b819ae)
+- wip [`37cdbba`](https://git.odit.services/lfk/frontend/commit/37cdbba0a3563875e19bee560f2cd5c8fc2d7a6e)
+- feat: improve input readability [`79e6a42`](https://git.odit.services/lfk/frontend/commit/79e6a4212d06029766d0a853686ed97879ebd349)
+- wip [`5f5d827`](https://git.odit.services/lfk/frontend/commit/5f5d8277b98363ef15a92621fca0a209345aca95)
+- chore(deps): bump [`bb2319a`](https://git.odit.services/lfk/frontend/commit/bb2319a78d253a2d6239a0d3daedc90fd29abdd0)
+- feat: cleanup TeamDetail + OrgDetail [`f734d1e`](https://git.odit.services/lfk/frontend/commit/f734d1e3f643a500a6432a389c3103045cc51262)
+- refactor(ci): Switch to actions for dev [`847fa28`](https://git.odit.services/lfk/frontend/commit/847fa288f1b5bbc422cc2944bbe66e80c5a00407)
+- refactor(ci): Add Gitea workflow for building release images and remove Woodpecker configuration [`3ec18a6`](https://git.odit.services/lfk/frontend/commit/3ec18a696435ada26bf2de2220b190dc630a9759)
+- feat: athiti font [`391186d`](https://git.odit.services/lfk/frontend/commit/391186d01f3b96638a3569dc2843bf181dc3f02c)
+- fix(DonorDetail): donor deletion [`5147a20`](https://git.odit.services/lfk/frontend/commit/5147a20b3c4a46968482b1e3517047351c94f77e)
+- feat(dashboard): full width for sidebar items [`975f145`](https://git.odit.services/lfk/frontend/commit/975f145444e5a478524ea2cbbfb9059b93617185)
+- wip [`3d3ce29`](https://git.odit.services/lfk/frontend/commit/3d3ce2918bc20cf1080a2b5153ddd8aaf51374b4)
+- feat(RunnerOrganizationService.runnerOrganizationControllerGetRunners): load all runners in org [`7c10d95`](https://git.odit.services/lfk/frontend/commit/7c10d95c1c68f4842fd323698e004a5ebf2c96cf)
+- wip [`050a146`](https://git.odit.services/lfk/frontend/commit/050a146ae070d67d8308db4b9612fd6eacbb9923)
+- fix(ci): Correct tag pattern syntax in release workflow [`e567bb3`](https://git.odit.services/lfk/frontend/commit/e567bb35c3b3f6eb73a2f0bc72f601e70f881ac8)
+
+#### [1.7.0](https://git.odit.services/lfk/frontend/compare/1.6.0...1.7.0)
+
+> 17 December 2024
+
+- refactor(pdfgeneration): Switch cards over to new service [`e230984`](https://git.odit.services/lfk/frontend/commit/e23098410c7d0b326cdbbb3a4b63fed10611e252)
+- refactor(pdfgeneration): Switch to new document-server api [`878d971`](https://git.odit.services/lfk/frontend/commit/878d9714cbc0a60cfd96bd1faf8af6af46e6fb5e)
+- refactor(pdfgeneration): Switched contract generation over to new document-server [`f99b7f4`](https://git.odit.services/lfk/frontend/commit/f99b7f4bb8f166bb966022ddd10689c082d248f0)
+- refactor(cards): Switched over to new document-server api [`65ce02e`](https://git.odit.services/lfk/frontend/commit/65ce02e777e6e9b3cfed248de680e5f292b3a639)
+- 🚀RELEASE v1.7.0 [`ae056cd`](https://git.odit.services/lfk/frontend/commit/ae056cd88cb27f003845fa4534553cde841c7f99)
+- fix(pdfgeneration): Added parent_group [`7f989b2`](https://git.odit.services/lfk/frontend/commit/7f989b206b16e2687d01a38da8e3ea9be0a52ba5)
+
+#### [1.6.0](https://git.odit.services/lfk/frontend/compare/1.5.3...1.6.0)
+
+> 11 December 2024
+
+- refactor(orgs): Swtich to new selfservice baseurl [`e2d6fbb`](https://git.odit.services/lfk/frontend/commit/e2d6fbb513dc9fe7ce05855edb4b0b4b5daeb07a)
+- chore: bump [`04494d2`](https://git.odit.services/lfk/frontend/commit/04494d2a2a542f25f785f3bb23e49e5eb0691c0a)
+
+#### [1.5.3](https://git.odit.services/lfk/frontend/compare/1.5.2...1.5.3)
+
+> 26 November 2024
+
+- feat(dx): Yarn support [`fc15c68`](https://git.odit.services/lfk/frontend/commit/fc15c68cba0d1986563eaf63da3a68784a685a9e)
+- feat(about): cleanup ui [`84aa846`](https://git.odit.services/lfk/frontend/commit/84aa846b87186b52a2f8632724d4f2cb70af062b)
+- feat(dashboard): reorder menu items [`e967d8d`](https://git.odit.services/lfk/frontend/commit/e967d8d20c6972b64b0096594a09043553e9c7e5)
+- fix: unexpected/ missing props [`d803f3d`](https://git.odit.services/lfk/frontend/commit/d803f3d4905d6f792b77d17025467ac13c29068b)
+- chore(deps): bump some [`68b4309`](https://git.odit.services/lfk/frontend/commit/68b4309164eac40b6fda969b60a7e238985d49f8)
+- 🚀RELEASE v1.5.3 [`477c650`](https://git.odit.services/lfk/frontend/commit/477c650f3f6dd2eadf5f1cc404e8fc9b02a7841b)
+- fix(ci): Switch over to new woodpecker version [`7ba890d`](https://git.odit.services/lfk/frontend/commit/7ba890dfd7ba908ebef0338f6faa5e7d804cb5ef)
+- refactor(ci): Only build licences, don't export [`32b5f54`](https://git.odit.services/lfk/frontend/commit/32b5f5420bf9ff656b713d61b3a0113b9d6cb69f)
+- feat: cleanup random page toasts [`ad4db88`](https://git.odit.services/lfk/frontend/commit/ad4db882f0f4d00a80ae5e0072e09c071c07ffa2)
+- fix(ci): Update git pushb settings [`ee87f82`](https://git.odit.services/lfk/frontend/commit/ee87f82799ce559fd43d671ab412f2643eafeac6)
+- fix(ci): Update relase machanism [`7c08f52`](https://git.odit.services/lfk/frontend/commit/7c08f522aa4b2986544a4c0e5d3261c4c7296121)
+- fix(ci): Install pnpm [`e211554`](https://git.odit.services/lfk/frontend/commit/e211554579b1f27d13194eff4aad76f6f030141e)
+- fix(orgs): ImportRunnerModal props [`5468766`](https://git.odit.services/lfk/frontend/commit/5468766d875a6278f01ed1fd9573688374befdd5)
+
+#### [1.5.2](https://git.odit.services/lfk/frontend/compare/1.5.1...1.5.2)
+
+> 21 November 2024
+
+- feat: improved dashboard titles ui + a11y [`21453ef`](https://git.odit.services/lfk/frontend/commit/21453ef272665c0b7c7b04009b7b74e110fbd988)
+- feat: improved dashboard titles ui + a11y [`c883920`](https://git.odit.services/lfk/frontend/commit/c883920caaaaef30a8e54dd0e7eecd68943f3041)
+- feat(dashboard): improved a11y of active sidebar menu item [`a50447f`](https://git.odit.services/lfk/frontend/commit/a50447f457ecc045995efb7b952b07ea09c91373)
+- feat: improved mobile buttons + search ui [`38fb111`](https://git.odit.services/lfk/frontend/commit/38fb111f7a2b5a1a01b17b00e89ee081e4b91bd9)
+- feat(i18n/de): rename "Track" to "Laufstrecke" [`1018243`](https://git.odit.services/lfk/frontend/commit/10182433f825968ee55298399b231173698a795c)
+- 🚀RELEASE v1.5.2 [`3532968`](https://git.odit.services/lfk/frontend/commit/3532968b3399b985b1ed28ba6b89a13f35f9289b)
+- feat(dashboard): improved mobile ui hamburger button [`b338f33`](https://git.odit.services/lfk/frontend/commit/b338f33a63ad8e98ab44deff2f80dbd5fe2a0fc2)
+- feat(dashboard): match greeting style with rest of titles [`b1a2044`](https://git.odit.services/lfk/frontend/commit/b1a20446314d1b25e9f653bd2767b072fd629f97)
+- feat(dashboard): add lfk icon and app name to mobile nav bar [`6bb49db`](https://git.odit.services/lfk/frontend/commit/6bb49db4eee95486f5a947d708b80a7a94d36933)
+- feat(users/UsersOverview): improve ui by adding borders to badges [`cb82200`](https://git.odit.services/lfk/frontend/commit/cb82200481c629a0dd8b235821115ae4276948ca)
+
+#### [1.5.1](https://git.odit.services/lfk/frontend/compare/1.5.0...1.5.1)
+
+> 21 November 2024
+
+- 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)
+- 🚀RELEASE v1.5.1 [`9abf74d`](https://git.odit.services/lfk/frontend/commit/9abf74d6d217e7745c1055bdbfbe97de7b14572f)
+- 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 -> StatsClientService [`5291e04`](https://git.odit.services/lfk/frontend/commit/5291e049a1d2e880fbe277095da91b70d4812c3f)
+- fix(ConfirmScanStationDeletion): donorControllerRemove -> 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 -> new datatable [`c87561f`](https://git.odit.services/lfk/frontend/commit/c87561f63b90ab951daf91d9b8b54ba96a94cc7f)
+- Basic card table replace [`5662c3b`](https://git.odit.services/lfk/frontend/commit/5662c3b6da67c00c94254bf39f8820e531fc93ef)
+- RunnersOverview: table responsiveness [`bf1e715`](https://git.odit.services/lfk/frontend/commit/bf1e715261c0076fd8543dd1187c516209a73b16)
+- Basic card delete modal [`8ffe8ef`](https://git.odit.services/lfk/frontend/commit/8ffe8eff0623767809cdc49ea15cf2d30b609285)
+- wip: delete scans [`f105cc0`](https://git.odit.services/lfk/frontend/commit/f105cc0a41972261610d03015ecd5ee492dab8e2)
+- Added delete runner modal [`fd5db7d`](https://git.odit.services/lfk/frontend/commit/fd5db7d68ab4b32f7bb14bd0275a447b749e1fd8)
+- Extracted table bottom [`8f50555`](https://git.odit.services/lfk/frontend/commit/8f50555a06a35d0b11ac1d9201851d00d915c4b8)
+- fix: formatting [`9def0b2`](https://git.odit.services/lfk/frontend/commit/9def0b27c9958c5c75466f56c17b6dc4d44d2b50)
+- fix(CardsOverview): table scroll + checkbox posititioning [`9c13b2f`](https://git.odit.services/lfk/frontend/commit/9c13b2f9e938ad36cb74c66a8f91a5b872c8c2d1)
+- Extracted table header [`c241961`](https://git.odit.services/lfk/frontend/commit/c241961d0ab0d6b8c3bf0453c1a21d84027ed62f)
+- drop legacy dependencies [`c98eb49`](https://git.odit.services/lfk/frontend/commit/c98eb49ae31d1d28de79c7a9c945ade50828f07f)
+- scan delete working [`c7dcf7c`](https://git.odit.services/lfk/frontend/commit/c7dcf7c66d7141117e08462ad05f6f441565d012)
+- Add Card appends current cards [`195d182`](https://git.odit.services/lfk/frontend/commit/195d182cc977b4ac9f342f09a9ea69d461892a95)
+- Moved data loading to onmount [`a35af6f`](https://git.odit.services/lfk/frontend/commit/a35af6f02055115d60d040baaf22dabbeda38498)
+- Add runners reactivity [`06411dc`](https://git.odit.services/lfk/frontend/commit/06411dc14747fc9803da009a29688789c31dfc42)
+- quick cleanup [`ebdd1c2`](https://git.odit.services/lfk/frontend/commit/ebdd1c2c0c2191c60dfacd0c4be989748628ca63)
+- Extracted deletion into function of overview [`a0727a0`](https://git.odit.services/lfk/frontend/commit/a0727a02913708de06be8bf1b9f8cbae5489f080)
+- Moved update card logic to overview [`53b945c`](https://git.odit.services/lfk/frontend/commit/53b945c72fa5b30f03eff8bb83f8f25d85d79b07)
+- wip:ScanValid badge [`bd4952e`](https://git.odit.services/lfk/frontend/commit/bd4952ee575b4cd8caea3608b14d8c51b37a55eb)
+- yeeted extra table styling [`52a02c8`](https://git.odit.services/lfk/frontend/commit/52a02c82d2bdabdf3e632910aa415c1ffb97fd7f)
+- Added custom runner filter [`7c6d39b`](https://git.odit.services/lfk/frontend/commit/7c6d39b5fa60d1b834c9fb74dd26dfc2225161d6)
+- Scan reactive add [`f5d14f2`](https://git.odit.services/lfk/frontend/commit/f5d14f2e1810462cba99b2482320746f0750d4a1)
+- Moved code around [`239f79f`](https://git.odit.services/lfk/frontend/commit/239f79fecba732c807f4296cf524be15c1ccff1e)
+- Scan deletion [`7d8c68a`](https://git.odit.services/lfk/frontend/commit/7d8c68a4550407e8c871545e7a0c5f622a1e3b9c)
+- Added status filter function [`f6c1fea`](https://git.odit.services/lfk/frontend/commit/f6c1fea17ce64d890ac810d9dff058dd589c2989)
+- Added delete toast [`e2ddb5a`](https://git.odit.services/lfk/frontend/commit/e2ddb5a14cc8b450c00129709bf5b933a47866dd)
+- Fixed killing of the dom [`2f62c7a`](https://git.odit.services/lfk/frontend/commit/2f62c7ae89b7dda3bc0efd4d56e677898a3f197f)
+- Cards details modal [`f6985da`](https://git.odit.services/lfk/frontend/commit/f6985daec71e4d922acd8a9b2673fd41317b075f)
+- Reload table data on delete [`3e8dac3`](https://git.odit.services/lfk/frontend/commit/3e8dac3203f56723a3dad4a35887d60fc03d4ae3)
+- Added middle-name [`d811058`](https://git.odit.services/lfk/frontend/commit/d8110580e9a33cfb0c6e9cbdce630262d5b5d4c1)
+- Fixed id sorting [`7cec2a0`](https://git.odit.services/lfk/frontend/commit/7cec2a00c513678cae8643ef3905d566a538bde0)
+- Import add to datatable [`2a91562`](https://git.odit.services/lfk/frontend/commit/2a915620c9adcb481be53e3c919bd5f14a5108ee)
+- Scans deletion [`6d9d8a4`](https://git.odit.services/lfk/frontend/commit/6d9d8a4724135df98ed1bec74b0cc20a8bdbda53)
+- fix(DeleteRunnerModal): ESC key [`1df505e`](https://git.odit.services/lfk/frontend/commit/1df505ea00968f65e7aff85baa80f8935fd2eb7b)
+- Versionbuilder [`1613ae7`](https://git.odit.services/lfk/frontend/commit/1613ae7de6e84aa5f9df6774a8e820fcf515b14a)
+- Fixed edit dispatch [`c681570`](https://git.odit.services/lfk/frontend/commit/c68157013431eeb1150e37fea87da02d5f7b032e)
+- ScansOverview: use CardRunner link [`4b171fd`](https://git.odit.services/lfk/frontend/commit/4b171fd04f4fc895f9919294858e546686504c65)
+- Added custom filter to scan overview [`2c198cf`](https://git.odit.services/lfk/frontend/commit/2c198cfde89363142c1c958e6961b7823196e04e)
+- Disable sort for actions [`fc2c290`](https://git.odit.services/lfk/frontend/commit/fc2c2907c43e5b1fa192b571cf93b2f2e492158f)
+- Delete modal logic [`da33005`](https://git.odit.services/lfk/frontend/commit/da3300562a25cf39945a94f873ec27f0d5fb9dc0)
+- Module [`9ae5e62`](https://git.odit.services/lfk/frontend/commit/9ae5e62e5d84097082bc29fe20b329f6e614f6ed)
+- new license file version [CI SKIP] [`ed1caa7`](https://git.odit.services/lfk/frontend/commit/ed1caa7be7673ef08f9c0074101f3cfb52963ab7)
+- Merge pull request 'experiment/tanstack' (#172) from experiment/tanstack into dev [`d88f3a5`](https://git.odit.services/lfk/frontend/commit/d88f3a5a2737921536c5eb109734abafd7609e51)
+- Removed pnpm store [`eb13f03`](https://git.odit.services/lfk/frontend/commit/eb13f038a1990ed2966552ab1d36df4a76e5a99a)
+- dependency update, drop focusTrap, first tanstack experiment in RunnersOverview [`9bec95e`](https://git.odit.services/lfk/frontend/commit/9bec95ede80908e45ad0f18a66dbb45784f7e33e)
+- Added translations [`dcabed4`](https://git.odit.services/lfk/frontend/commit/dcabed4e93134a1f04305c47536f1cc93b0cfb31)
+- new license file version [CI SKIP] [`d0fe6a2`](https://git.odit.services/lfk/frontend/commit/d0fe6a2e8513638c4d8e2b3dafd48b91490eab3b)
+- Bumped pnpm to 8 [`ee91748`](https://git.odit.services/lfk/frontend/commit/ee91748b3c7c2fb4f196d76121713ac42465b9dd)
+- drop old datatables [`cb5f2b7`](https://git.odit.services/lfk/frontend/commit/cb5f2b73d0a5f71875f48d381382919f9bee364e)
+- wip: pagination [`a59dbbe`](https://git.odit.services/lfk/frontend/commit/a59dbbe50ede47e0dada906d10887cc6b1ae3264)
+- Added sort [`842248e`](https://git.odit.services/lfk/frontend/commit/842248e4c43bb94a0e73981d2d848e0723687932)
+- cleanup headers [`5ecf838`](https://git.odit.services/lfk/frontend/commit/5ecf838dd231269c3c4f0d1e3376ff157457b04a)
+- Moved filter function to shared [`2304b12`](https://git.odit.services/lfk/frontend/commit/2304b12c1cca6a64573223906ab0561ba9050ec5)
+- Group filters [`0283df2`](https://git.odit.services/lfk/frontend/commit/0283df22c84740dd978e09120985215b65d7a12a)
+- feat(RunnersOverview): row selection [`6993511`](https://git.odit.services/lfk/frontend/commit/6993511c67cc81303a1eece7fc2a4218dc818afc)
+- Basic details and delete buttons [`9363773`](https://git.odit.services/lfk/frontend/commit/9363773fa1910975d48746572fe166363986c6ab)
+- Added delete cards button [`70307a9`](https://git.odit.services/lfk/frontend/commit/70307a9e8272f22801c6765c947f8576cc1d1102)
+- ScansOverview: add ThFilterTrack [`008835c`](https://git.odit.services/lfk/frontend/commit/008835c24f833aebbecc53921b0901a76f25bf06)
+- Yeeted old datatable references [`8925261`](https://git.odit.services/lfk/frontend/commit/89252619b1f6d478c287178bfffc573cf574a8fa)
+- Added filter [`a9cdac4`](https://git.odit.services/lfk/frontend/commit/a9cdac4f74a80afe3d0ce677ed5256201b75b29b)
+- Moved sort onclick to header only [`3de7b63`](https://git.odit.services/lfk/frontend/commit/3de7b632e058e9ca9ab951de9e86cc2a40eceb68)
+- Switched drone to pnpm cache [`d79608e`](https://git.odit.services/lfk/frontend/commit/d79608edbb7ca68b0a26f6c021a141373308081f)
+- pagination size [`45a7a90`](https://git.odit.services/lfk/frontend/commit/45a7a90cb8ee933d064c5891b3532cb1ece38d38)
+- RunnersOverview: add filter keyboard support [`9415584`](https://git.odit.services/lfk/frontend/commit/94155845f020679e8765d198b5ab4735e1d1142c)
+- RunnersOverview: pass selectedRunners to actions [`d4ab76e`](https://git.odit.services/lfk/frontend/commit/d4ab76ea1be1789aaa53ca57d33b2356c6804ffd)
+- fix pagination next prev [`cac851f`](https://git.odit.services/lfk/frontend/commit/cac851f2b19dafa01b08d1da612e34cbe3eb4133)
+- Moved docker to pnpm with cache [`4cbd265`](https://git.odit.services/lfk/frontend/commit/4cbd26580e51b854fdfd369056f24a30b04100a1)
+- fix: TracksOverview [`c799088`](https://git.odit.services/lfk/frontend/commit/c7990882cfa4ac6c3a2ffa696dcbf3b62790c1fe)
+- Table header i18n [`070a20a`](https://git.odit.services/lfk/frontend/commit/070a20a2e599e9f00b1bd0e944f9d68d08dc1cba)
+- default to 50 rows pagination [`dc866dd`](https://git.odit.services/lfk/frontend/commit/dc866dd5403ae681193c5e325b1f6d4068f80b61)
+- improved tablefilters/groupFilter [`3abf608`](https://git.odit.services/lfk/frontend/commit/3abf608b15fcfc2cf65b705d28d394917e7ac333)
+- Updated group name conversion [`9111ad1`](https://git.odit.services/lfk/frontend/commit/9111ad147c7537036de834f80db6e557d8d6f0d9)
+- show certificate, runnercard, sponsoring contract section [`49c2cd5`](https://git.odit.services/lfk/frontend/commit/49c2cd5c4b32e1b75fe0dae48c1b470608936704)
+- add basic table styling [`c5e8409`](https://git.odit.services/lfk/frontend/commit/c5e84090795636c7a80d6cabe46168e436d40f50)
+- Cards deleted migrations [`ef077b4`](https://git.odit.services/lfk/frontend/commit/ef077b4e6ad722e6d1c9efd5060165f649fd94c9)
+- ignore pnpm store from now on [`fe62ad5`](https://git.odit.services/lfk/frontend/commit/fe62ad5539bc94b242c30c2952bf4c115cc9abfd)
+- ammendme [`d31fe23`](https://git.odit.services/lfk/frontend/commit/d31fe2363b0f167b937f7d67908e75c709b324d8)
+- updated default table row count [`245db06`](https://git.odit.services/lfk/frontend/commit/245db0617306bab23993caf00dc5ba0405e95625)
+- fix: checkbox styling [`64db553`](https://git.odit.services/lfk/frontend/commit/64db5531858b2275d27c53a347da6c0416a278e8)
+- Added distance conversion [`333214a`](https://git.odit.services/lfk/frontend/commit/333214aa8f945975ee2dcbd1cfa285e5e75c9d02)
+- Added filterfunctions [`a9a965d`](https://git.odit.services/lfk/frontend/commit/a9a965d6981b07b02e3f752e65e1e5c4e9df7147)
+- card/ThFilterRunner: text align left [`7083b3d`](https://git.odit.services/lfk/frontend/commit/7083b3d8d2c81fa4ab14f21d379befbb2dab5b6c)
+- import [`0240e1d`](https://git.odit.services/lfk/frontend/commit/0240e1dca2e162b8c79f294f5c651b4a38455235)
+- fix: table sort button + search style [`57dce34`](https://git.odit.services/lfk/frontend/commit/57dce34fc5b04c297c5341db24ec47c2f1d39595)
+- No longer switching pnpm store path [`e5241d6`](https://git.odit.services/lfk/frontend/commit/e5241d619beda90d271485b6c09142b1e7b9b5f1)
+- Reactivated generate cards modal [`8f33640`](https://git.odit.services/lfk/frontend/commit/8f33640bec8f79987b1319fb0765535fe493d496)
+- Always load bulk created cards [`f89023e`](https://git.odit.services/lfk/frontend/commit/f89023e24ab30c90a8cacf2e9590d1dfa1a743d5)
+- ScansOverview: fallback for manual scans [`1ec9556`](https://git.odit.services/lfk/frontend/commit/1ec9556aa64b996d0bdd9cd3ee50a767a154f5f6)
+- fix min-w th [`b35375c`](https://git.odit.services/lfk/frontend/commit/b35375c929ad8d525b2761c321ecef0399917828)
+- Close modal on delete and import toastify [`03b7ada`](https://git.odit.services/lfk/frontend/commit/03b7ada5ef3cbf64f178d3d0d88c448d76a42885)
+- Fixed styling [`13254b2`](https://git.odit.services/lfk/frontend/commit/13254b24dd75ca3eb47fd53d5368f047545e8420)
+- Implemented table buttons [`11a56f8`](https://git.odit.services/lfk/frontend/commit/11a56f87e89866bd9b2f7029ef683fd139d60aa4)
+- RunnersOverview: disable debug log [`2c992a0`](https://git.odit.services/lfk/frontend/commit/2c992a0e63fa72055d28785fe7f5c21fd26f1fea)
+- RunnersOverview: TopActionSection: add margin top [`88f96ac`](https://git.odit.services/lfk/frontend/commit/88f96acc3c31c748d3da29b4564dd681a89208b9)
+- Unused filter function value [`38d3e19`](https://git.odit.services/lfk/frontend/commit/38d3e1912cd6d5362db236c34e0c602b52060b73)
+- Make the linter happy [`fbc14fd`](https://git.odit.services/lfk/frontend/commit/fbc14fd7b47009bf64a8824e7b60373eea031e3f)
+- Dsable column filter for distance [`67eff0e`](https://git.odit.services/lfk/frontend/commit/67eff0eda9b7d49d1abe784247afdbfbd7a76b00)
+- getPaginationRowModel [`238082b`](https://git.odit.services/lfk/frontend/commit/238082b657998f513111e832556926decbe84e21)
+- -> onkeyup [`aecbabe`](https://git.odit.services/lfk/frontend/commit/aecbabe52221c0ab8d94a42dc8ac42f4f397fde8)
+- removed unused import [`9811ede`](https://git.odit.services/lfk/frontend/commit/9811ede3b23a488a49962a43dae5abad60f93341)
+- drop redundant button role [`e7eddb4`](https://git.odit.services/lfk/frontend/commit/e7eddb4f08632cc803b8752e3561319fab538843)
+- Filter id as equals [`2699b06`](https://git.odit.services/lfk/frontend/commit/2699b06d7c42608b1b3ce2037908a78143038441)
+- debug table [`fd0d45f`](https://git.odit.services/lfk/frontend/commit/fd0d45f721396787ad35fca2a7fd0f26d98b23e9)
+- add TODO for ScansOverview status filter [`9505c2b`](https://git.odit.services/lfk/frontend/commit/9505c2b03005f4e667082cb4527fea863dbbf7fc)
+
+#### [0.17.3](https://git.odit.services/lfk/frontend/compare/0.17.2...0.17.3)
+
+> 15 March 2023
+
+- dependency fixes [`3ea7a01`](https://git.odit.services/lfk/frontend/commit/3ea7a015a9beba3c2e4d3eb966f24ff6d4ac786e)
+- 🚀RELEASE v0.17.3 [`85705b6`](https://git.odit.services/lfk/frontend/commit/85705b6e684d0c41d3dc770cef7bffb199101576)
+- set pnpm to @7 [`4432941`](https://git.odit.services/lfk/frontend/commit/44329413ed2ca23f74e86db041b2c25b2b1c2a2b)
+
+#### [0.17.2](https://git.odit.services/lfk/frontend/compare/0.17.1...0.17.2)
+
+> 15 March 2023
+
+- new license file version [CI SKIP] [`00359d2`](https://git.odit.services/lfk/frontend/commit/00359d25c1bd3efdd6365bf284b3c07634049399)
+- 🚀RELEASE v0.17.2 [`46db68a`](https://git.odit.services/lfk/frontend/commit/46db68ab229dc740dfff8835ef916f2c2e629b27)
+- improved ThFilterGroup style [`f917018`](https://git.odit.services/lfk/frontend/commit/f917018fd92a8a5b034f735ac8b6e41995044317)
+
+#### [0.17.1](https://git.odit.services/lfk/frontend/compare/0.17.0...0.17.1)
+
+> 15 March 2023
+
+- Revert "package dependency fixes, bumps, lockfile update" [`d8a3063`](https://git.odit.services/lfk/frontend/commit/d8a30637351e164599e07a6473d9a1d2b08d245d)
+- 🚀RELEASE v0.17.1 [`7b420c4`](https://git.odit.services/lfk/frontend/commit/7b420c430d27bf0fc85a4297780164a593fc1be3)
+
+#### [0.17.0](https://git.odit.services/lfk/frontend/compare/0.16.5...0.17.0)
+
+> 15 March 2023
+
+- new license file version [CI SKIP] [`61328d2`](https://git.odit.services/lfk/frontend/commit/61328d20ed2cfd1df7d3c32767f9c64154879d6d)
+- wip: pnpm + node version [`732b2f0`](https://git.odit.services/lfk/frontend/commit/732b2f061e465bd08cf34c58d8cd6b021ba25dce)
+- package dependency fixes, bumps, lockfile update [`2c73b98`](https://git.odit.services/lfk/frontend/commit/2c73b9862d401dac15021eed3f7847d46132a8ed)
+- Fixed runners not showing up [`75bc89c`](https://git.odit.services/lfk/frontend/commit/75bc89ca3020c48f490c7602374616bd9461e78f)
+- add ThFilterRunner [`3a3e2f7`](https://git.odit.services/lfk/frontend/commit/3a3e2f71575d3a0e39a5e13b05cff932b8683ac9)
+- fix styling for table filters th border [`bea57aa`](https://git.odit.services/lfk/frontend/commit/bea57aa03acaaaa4b1860b30228dd5d1298317f8)
+- You can now create cards from runners by searching via #runnerid [`e8a0ad6`](https://git.odit.services/lfk/frontend/commit/e8a0ad6647ab39252865f62b755f27c34ac2d243)
+- remodelled for early return [`b869b5f`](https://git.odit.services/lfk/frontend/commit/b869b5fd2a01955fb21f936fa38eb5a9648e7de3)
+- 🚀RELEASE v0.17.0 [`6491af1`](https://git.odit.services/lfk/frontend/commit/6491af19e375cbeba7ddd94e463b4dfe308a70a8)
+- Wow this api is fun [`32a9074`](https://git.odit.services/lfk/frontend/commit/32a9074963cce3328f14b1f981ddd5ee49df0008)
+- Fixed double space in label [`92b89cc`](https://git.odit.services/lfk/frontend/commit/92b89cc4d88c9d5625c2ddf7c81c98494f7f5271)
+- UsersOverview: drop pfp [`30991d5`](https://git.odit.services/lfk/frontend/commit/30991d5364a09d517b2115a7e9ea3fbf1fe2e57d)
+- Switched license generation to cache registry and pnpm [`0a6d92a`](https://git.odit.services/lfk/frontend/commit/0a6d92a1f3c5562f11562c433b3a04e3eaae3da4)
+- Pinned pnpm in dockerfile, thx @philipp [`3a576d1`](https://git.odit.services/lfk/frontend/commit/3a576d1073ee503b68100e01054a1756bab62805)
+- Pinned ci node version [`b30b98b`](https://git.odit.services/lfk/frontend/commit/b30b98b521eda2bc7fc055097546f716e90d92ef)
+- Fixed pnpm being called without being installed [`43d82a2`](https://git.odit.services/lfk/frontend/commit/43d82a2af04af49c2169f78a0d0f27ef7e4d7558)
+- Merge pull request 'bugfix/162-create_card_modal' (#163) from bugfix/162-create_card_modal into dev [`6a4495b`](https://git.odit.services/lfk/frontend/commit/6a4495b8131a31cd48a608c2275e80494d0a0fb4)
+- Removed unused log [`268b1b1`](https://git.odit.services/lfk/frontend/commit/268b1b1d9830de196d1d95345d7a2467bbf19eb6)
+- Merge pull request 'filter by runner full names + "#<ID>"' (#160) from feature/159-cardsoverview-filter-for-runner-full-names-and-id into dev [`0625937`](https://git.odit.services/lfk/frontend/commit/0625937068f0786078ffd29b9c8bb54949350b6c)
+- UsersOverview: change profilepic scaling [`5cc8b08`](https://git.odit.services/lfk/frontend/commit/5cc8b0811cf290f97a4399b23c5ea4d961a5a91c)
+
+#### [0.16.5](https://git.odit.services/lfk/frontend/compare/0.16.4...0.16.5)
+
+> 14 March 2023
+
+- 🚀RELEASE v0.16.5 [`3680533`](https://git.odit.services/lfk/frontend/commit/3680533eefef042fc77246dd3d374aafe10c428f)
+- new license file version [CI SKIP] [`405dfa0`](https://git.odit.services/lfk/frontend/commit/405dfa0c34ba87fc450c22e0e9974f92c4cdeffe)
+
+#### [0.16.4](https://git.odit.services/lfk/frontend/compare/0.16.3...0.16.4)
+
+> 14 March 2023
+
+- fix: OrgDetail: clicking on address will toggle selfservice [`#158`](https://git.odit.services/lfk/frontend/issues/158)
+- 🚀RELEASE v0.16.4 [`5c2d154`](https://git.odit.services/lfk/frontend/commit/5c2d154ad180ce7916605871c63e2f5ac4428250)
+
+#### [0.16.3](https://git.odit.services/lfk/frontend/compare/0.16.2...0.16.3)
+
+> 23 February 2023
+
+- 🚀RELEASE v0.16.3 [`f9cfd6b`](https://git.odit.services/lfk/frontend/commit/f9cfd6bd063b01a584774854d8fb5eab96f99528)
+- Bumped vite build targets [`5fe4763`](https://git.odit.services/lfk/frontend/commit/5fe47634e8980e77b65c05f213c475cf49273609)
+- new license file version [CI SKIP] [`a659091`](https://git.odit.services/lfk/frontend/commit/a6590910cfdc5e91fba91c1bc9237e407ef15fd2)
+- Merge pull request 'feature/156-pdf_names' (#157) from feature/156-pdf_names into dev [`ad454c3`](https://git.odit.services/lfk/frontend/commit/ad454c386cbf11abc59d41d269d1a0ef7442c9ed)
+- Added ids for generated pdfs [`0b2c296`](https://git.odit.services/lfk/frontend/commit/0b2c296de069a4ef302c5535de01bc18236675bc)
+
+#### [0.16.2](https://git.odit.services/lfk/frontend/compare/0.16.1...0.16.2)
+
+> 23 February 2023
+
+- Fixed scanmodal [`#154`](https://git.odit.services/lfk/frontend/issues/154)
+- 🚀RELEASE v0.16.2 [`0e85940`](https://git.odit.services/lfk/frontend/commit/0e85940cba292cbccd1ec038aa24f4a719382c19)
+- Merge pull request 'feature/147-cardoverview_performance' (#153) from feature/147-cardoverview_performance into dev [`8d479c3`](https://git.odit.services/lfk/frontend/commit/8d479c32f82938904aee6a10deb80fea85487e4b)
+- Merge pull request 'Fixed scanmodal' (#155) from bugfix/154-scan_select_runner_by_id into dev [`549785c`](https://git.odit.services/lfk/frontend/commit/549785cf7d1c9edc1be37dc745b97096232a08ca)
+- i18n [`ca6da15`](https://git.odit.services/lfk/frontend/commit/ca6da15ef761184a55b18d56f749f660a32cbb83)
+- Bsic datatable conversion [`757655e`](https://git.odit.services/lfk/frontend/commit/757655ea63b3667bc4612ae1595eb52910b61137)
+- 1st datatable try with @vincjo/datatables [`81b8fbf`](https://git.odit.services/lfk/frontend/commit/81b8fbf4e341e6f2998a6e9e2053972c5c225021)
+- Dasboard Cards redesign [`eb1c17e`](https://git.odit.services/lfk/frontend/commit/eb1c17e3ac7e8f5e7310a90421fc9db3ed15c497)
+- set .phone to null if empty [`da6dd55`](https://git.odit.services/lfk/frontend/commit/da6dd55d139a672fa50204eabdca67d9740614a0)
+- add group filtering to table [`14d64b6`](https://git.odit.services/lfk/frontend/commit/14d64b6070d98e6368da5709e9ff8221e8a621c7)
+- formatting [`24d0747`](https://git.odit.services/lfk/frontend/commit/24d074752f1c5dc1a14b075ac14b448d7e129376)
+- RunnersOverview loading fix [`2e075ea`](https://git.odit.services/lfk/frontend/commit/2e075eafab5c4d78fd9aa9d66834b477b2685bfc)
+- Added old formatting for runner and status [`df63c23`](https://git.odit.services/lfk/frontend/commit/df63c2388da359dec9ed9968bc9f970be7092a45)
+- Added custom status filter [`f0a2b28`](https://git.odit.services/lfk/frontend/commit/f0a2b2859fa18426a454b7d9d6dd22dfdfe7ce27)
+- Basic checkbox fix [`1337676`](https://git.odit.services/lfk/frontend/commit/1337676e0894c46da0b6dcb7553e5ea8f88d0c14)
+- Fixed all filter [`8dfa19f`](https://git.odit.services/lfk/frontend/commit/8dfa19fa0f9897c61342ece956df88731c7aa861)
+- improved runner search [`1b0cd5b`](https://git.odit.services/lfk/frontend/commit/1b0cd5b90bcceb92627c6b7cdcdd7792ed81b50f)
+- set table-layout:fixed + display when loaded [`65e8998`](https://git.odit.services/lfk/frontend/commit/65e89988943807c1606a8b6aea49564b13d52537)
+- Trigger edit modal [`32ddb66`](https://git.odit.services/lfk/frontend/commit/32ddb66fc8d8cd689f1104759812f4cee4b7a613)
+- cleaned up table search [`08047a9`](https://git.odit.services/lfk/frontend/commit/08047a93073c32f5dd7a8e958400ae8a5b7f4035)
+- Fixed edit update bug [`0feee0a`](https://git.odit.services/lfk/frontend/commit/0feee0ae2fb6d8dba0b6fd72cedc0712dc749511)
+- fix: z-index on action buttons [`224034d`](https://git.odit.services/lfk/frontend/commit/224034dcc6263d3b0a8ea20045e435142d8ed2af)
+- rename: ThFilterGroup -> ThFilterStatus [`2a6a399`](https://git.odit.services/lfk/frontend/commit/2a6a39916a03c0466e63354e9f5ad7924cb59b6b)
+- new license file version [CI SKIP] [`0e5490f`](https://git.odit.services/lfk/frontend/commit/0e5490f1c84217a5a6d5c8745c4667b32ca65e1a)
+- new license file version [CI SKIP] [`026d3d4`](https://git.odit.services/lfk/frontend/commit/026d3d41c1b976a4dc7c733576a6a9e8d4b13b78)
+- Updated breakpoints [`452d010`](https://git.odit.services/lfk/frontend/commit/452d0101838d72bff7d588a953faae028e2ff819)
+- Tailwind bump [`a101873`](https://git.odit.services/lfk/frontend/commit/a101873eb0946b284a11a5081642711f5087da14)
+- Fixed checkbox show [`0900c26`](https://git.odit.services/lfk/frontend/commit/0900c2691e4cfe5046e8ae186c8ac8884c90abd6)
+- Removed unused console log [`aafc4c8`](https://git.odit.services/lfk/frontend/commit/aafc4c8d62a7a0a493c8bd60149f90c842534bdd)
+- i18n import [`6fe134a`](https://git.odit.services/lfk/frontend/commit/6fe134afc8bfef4e7470b7e53b9312b172a7322b)
+- Merge pull request 'fix: RunnerDetail: set .phone to null if empty' (#152) from bugfix/151-runnerdetail--cannot-unset-phone-number into dev [`329c1cc`](https://git.odit.services/lfk/frontend/commit/329c1cc037a43c818ba3b6c72581d29586d76232)
+- Merge pull request 'feature/146-runner-table-performance-data-table' (#150) from feature/146-runner-table-performance-data-table into dev [`b82d638`](https://git.odit.services/lfk/frontend/commit/b82d638de1aa1f72aada212cf3e4147d808b4fcf)
+- Merge pull request 'feature/148-dashboard_statscards' (#149) from feature/148-dashboard_statscards into dev [`fd1a06b`](https://git.odit.services/lfk/frontend/commit/fd1a06b3595b3713ad474e623c74105125602d46)
+- Fixed top checkbox state [`3d2acb6`](https://git.odit.services/lfk/frontend/commit/3d2acb692a28c116790248679e238fb562b24ac5)
+
+#### [0.16.1](https://git.odit.services/lfk/frontend/compare/0.16.0...0.16.1)
+
+> 15 February 2023
+
+- fix: donor detail: sponsorings: unset middlename will show as "null" [`#145`](https://git.odit.services/lfk/frontend/issues/145)
+- 🚀RELEASE v0.16.1 [`4499480`](https://git.odit.services/lfk/frontend/commit/449948050b8673d43a8dfbb225c3198e4bbb3c7b)
+
+#### [0.16.0](https://git.odit.services/lfk/frontend/compare/0.15.6...0.16.0)
+
+> 3 February 2023
+
+- First page for statsclients [`f299617`](https://git.odit.services/lfk/frontend/commit/f299617c600d2bba7b4405c7c3acae9fd93aefa8)
+- 🚀RELEASE v0.16.0 [`75684ef`](https://git.odit.services/lfk/frontend/commit/75684efa1ae0edb4b4d414757c5acf2a77c572e5)
+- Basic statsclient detail [`0215860`](https://git.odit.services/lfk/frontend/commit/02158605be824e5ac21a6284731138190988c794)
+- Updated Add modal [`f679330`](https://git.odit.services/lfk/frontend/commit/f679330466205e6480cd7f2b7c2b4fdc41c51525)
+- Switched drone to kaniko [`1c98005`](https://git.odit.services/lfk/frontend/commit/1c980059cff5c87c452428b53513507c2339451f)
+- Re-added copy modal [`fecb07e`](https://git.odit.services/lfk/frontend/commit/fecb07ee373dcaaeaea69fdf8d4c6ee2c257c89c)
+- Added Statsclients to sidebar [`068076d`](https://git.odit.services/lfk/frontend/commit/068076dd47373c673a25e730cb8a57c686682810)
+- Fixed imports and naming [`f3cc07c`](https://git.odit.services/lfk/frontend/commit/f3cc07c009ed0a34e61f1aad47a1a31778145439)
+- new license file version [CI SKIP] [`2c4f27a`](https://git.odit.services/lfk/frontend/commit/2c4f27a943bb35be6728bb49bd5c2263cba78165)
+- Merge pull request 'feature/143-beamershow_clients' (#144) from feature/143-beamershow_clients into dev [`53b7dec`](https://git.odit.services/lfk/frontend/commit/53b7dec7cd516c908d45591b855f4be09371f9b1)
+- Updated deletion modal [`93fc7c2`](https://git.odit.services/lfk/frontend/commit/93fc7c2e83f78dd88f15d9246127bb9e69f1a8ee)
+- Updated mounted variables [`674e6a9`](https://git.odit.services/lfk/frontend/commit/674e6a90ec23dde9377bea64c14a50e41ffa450d)
+- Removed Key after creation [`e10c648`](https://git.odit.services/lfk/frontend/commit/e10c6480a504338b21e30fdf2577e5b6c3b635db)
+- Updated docker base images [`9767553`](https://git.odit.services/lfk/frontend/commit/976755338b8621064f9a73147aa600af1f77cd51)
+- Added translation [`96c55db`](https://git.odit.services/lfk/frontend/commit/96c55db63dbfed92b78ff0e7bdab7a8cce4d76e9)
+- Pinned versions [`cff112d`](https://git.odit.services/lfk/frontend/commit/cff112d705a74a135286943298f3f344341325ac)
+- Tailwind bump [`e0cbfb0`](https://git.odit.services/lfk/frontend/commit/e0cbfb000bee59a71e06bd58a9c7ef6a0fc7091d)
+- Added missing translation [`19a333d`](https://git.odit.services/lfk/frontend/commit/19a333d7bda525fbcb3c68f3cbf85a4f925a9707)
+- Bumped apiclient [`c28f1ee`](https://git.odit.services/lfk/frontend/commit/c28f1ee0bc4456595c21858f38e52ed6f16871c5)
+- new license file version [CI SKIP] [`3a66f4c`](https://git.odit.services/lfk/frontend/commit/3a66f4c862db9f35c223cc7007b0560fef4e1d63)
+- Bumped apiclient [`28cbc5b`](https://git.odit.services/lfk/frontend/commit/28cbc5b98ca09657100e1740b83aa2617243b26b)
+- Ignore pnpm lock [`2d8c4c1`](https://git.odit.services/lfk/frontend/commit/2d8c4c1698a1675f618e85e678012f310f87c6ee)
+
+#### [0.15.6](https://git.odit.services/lfk/frontend/compare/0.15.5...0.15.6)
+
+> 19 July 2021
+
+- 🚀RELEASE v0.15.6 [`9fc4ad6`](https://git.odit.services/lfk/frontend/commit/9fc4ad63c4f77b46d645e83c94b51747b91247b8)
+- Fixed donations getting reduced to the first one on certificates [`2391668`](https://git.odit.services/lfk/frontend/commit/2391668a25a1e11a1409df572d77ad1635070fbc)
+- new license file version [CI SKIP] [`97054a7`](https://git.odit.services/lfk/frontend/commit/97054a71c1ab8a045762a55148124965c6994373)
+
+#### [0.15.5](https://git.odit.services/lfk/frontend/compare/0.15.4...0.15.5)
+
+> 5 July 2021
+
+- 🚀RELEASE v0.15.5 [`717d335`](https://git.odit.services/lfk/frontend/commit/717d33547c3378424dd720005da9952f8a753f1a)
+- Merge pull request 'Fixed kilometer conversion' (#142) from bugfix/141-runner_kilometers into dev [`997be32`](https://git.odit.services/lfk/frontend/commit/997be32679dc38c9fb0e92b6ce011057b854d99d)
+- Fixed kilometer conversion [`134f00c`](https://git.odit.services/lfk/frontend/commit/134f00c40e0c8252e7604a73151e8d6685b2c61d)
+- new license file version [CI SKIP] [`e752ee1`](https://git.odit.services/lfk/frontend/commit/e752ee12d17a4423f4364f7766eafbe7d4cef2d1)
+
+#### [0.15.4](https://git.odit.services/lfk/frontend/compare/0.15.3...0.15.4)
+
+> 5 July 2021
+
+- Merge pull request 'fix total donation sum in dashboard' (#140) from bugfix/139-total-donation-sum-is-wrong into dev [`#139`](https://git.odit.services/lfk/frontend/issues/139)
+- 🚀RELEASE v0.15.4 [`cc4515f`](https://git.odit.services/lfk/frontend/commit/cc4515ff66b1c1de3747d0ee6cc465574accedb7)
+- divide by 100 + toFixes(2) [`b246f2b`](https://git.odit.services/lfk/frontend/commit/b246f2b349b06d1adea318dfad58f97fb1a249bb)
+
+#### [0.15.3](https://git.odit.services/lfk/frontend/compare/0.15.2...0.15.3)
+
+> 16 April 2021
+
+- 🚀RELEASE v0.15.3 [`76b69d8`](https://git.odit.services/lfk/frontend/commit/76b69d851aa590ecf8caac135b72962a72e83635)
+- Small bugfix (null got displayed) 🛠 [`224f586`](https://git.odit.services/lfk/frontend/commit/224f5863683ae2543a4a435510ed2c558dc5d307)
+
 #### [0.15.2](https://git.odit.services/lfk/frontend/compare/0.15.1...0.15.2)
 
+> 16 April 2021
+
+- 🚀RELEASE v0.15.2 [`9add6c8`](https://git.odit.services/lfk/frontend/commit/9add6c8ff1fbeed91fe97a7cf262921b716f4e3c)
 - Footer - noopener link [`cee04c1`](https://git.odit.services/lfk/frontend/commit/cee04c1d6fb6005cefe77fb95855ab6fe2cc448f)
 - Hotfix: Team change recognition 🐞 [`cbec785`](https://git.odit.services/lfk/frontend/commit/cbec78589d2fa21f12ce87e71bff2b49c3a7d345)
 - NGINX cache assets [`e54a480`](https://git.odit.services/lfk/frontend/commit/e54a4807f70bc333396885f81d3dcc7ae6c115d9)
@@ -1152,7 +1848,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - init [`32357ec`](https://git.odit.services/lfk/frontend/commit/32357ece0a7195ea1135c9c3e4c6c84323f95b4d)
 - tmp [`1b7173c`](https://git.odit.services/lfk/frontend/commit/1b7173cda9134ee8058a00bdc030defa80d46bfc)
 - Login - move to env.js import [`8ef0b21`](https://git.odit.services/lfk/frontend/commit/8ef0b21819309752c573d0485f6514152fb684e6)
--  initial commit [`4bb3bae`](https://git.odit.services/lfk/frontend/commit/4bb3bae4e6fc89c35a8a2b36b7cd6e6d47958eae)
+- initial commit [`4bb3bae`](https://git.odit.services/lfk/frontend/commit/4bb3bae4e6fc89c35a8a2b36b7cd6e6d47958eae)
 - Initial license export [`4c96b9a`](https://git.odit.services/lfk/frontend/commit/4c96b9a3e04dbb7c021c71aa8828a29248509fbe)
 - 🚚 move to tinro svelte router [`a50ea15`](https://git.odit.services/lfk/frontend/commit/a50ea15b38023b867a9f7757e973184cbcdd2457)
 - new Dashboard [`7270ce9`](https://git.odit.services/lfk/frontend/commit/7270ce9d32869abd4f6ac65ab7c2c87363633cbe)

Dockerfile

@@ -1,12 +1,16 @@
-FROM registry.odit.services/hub/library/node:15.14.0-alpine3.13
+FROM registry.odit.services/hub/library/node:23.10.0-alpine3.21 AS build
+ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
-COPY package.json ./
-RUN yarn
-COPY package.json *.config.js postcss.config.cjs index.html ./
+
+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 yarn build
+RUN pnpm build
+
 # final image
-FROM registry.odit.services/hub/fholzer/nginx-brotli:v1.19.1
-COPY --from=0 /app/dist /usr/share/nginx/html
+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

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
+
 ```
-yarn build
+pnpm build
 ```

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

index.html

@@ -1,22 +1,22 @@
-<!DOCTYPE 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>
 
-<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.15.2-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>
-
+  <body>
+    <span style="display: none; visibility: hidden" id="buildinfo"
+      >RELEASE_INFO-1.9.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>

order.js

@@ -1,16 +1,18 @@
-const fs = require('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);
 });

package.json

@@ -1,56 +1,64 @@
 {
-	"name": "@odit/lfk-frontend",
-	"version": "0.15.2",
-	"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/lfk-client-js": "0.11.0",
-		"@odit/license-exporter": "0.0.11",
-		"@sveltejs/vite-plugin-svelte": "1.0.0-next.6",
-		"@types/html-minifier": "4.0.0",
-		"auto-changelog": "2.2.1",
-		"autoprefixer": "^10.2.5",
-		"check-password-strength": "2.0.2",
-		"csvtojson": "2.0.10",
-		"gridjs": "3.4.0",
-		"html-minifier": "4.0.0",
-		"localforage": "1.9.0",
-		"marked": "2.0.3",
-		"postcss": "^8.2.10",
-		"release-it": "14.6.1",
-		"svelte": "3.37.0",
-		"svelte-focus-trap": "1.2.0",
-		"svelte-i18n": "3.3.9",
-		"svelte-preprocess": "^4.7.0",
-		"svelte-select": "3.17.0",
-		"tailwindcss": "^2.1.1",
-		"tinro": "0.6.1",
-		"toastify-js": "1.10.0",
-		"validator": "13.5.2",
-		"vite": "2.1.5",
-		"xlsx": "0.16.9"
-	},
-	"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"
-		}
-	}
+  "name": "@odit/lfk-frontend",
+  "version": "1.9.0",
+  "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.21",
+    "postcss": "8.5.3",
+    "prettier": "3.5.3",
+    "prettier-plugin-svelte": "3.3.3",
+    "release-it": "17.10.0",
+    "svelte-select": "3.17.0",
+    "tailwindcss": "3.4.15",
+    "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": {
+    "@fontsource/athiti": "^5.2.5",
+    "@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.2.0",
+    "svelte-i18n": "3.6.0",
+    "tinro": "0.6.12",
+    "validator": "13.15.0",
+    "xlsx": "0.18.5"
+  },
+  "volta": {
+    "node": "20.0.0"
+  }
 }

postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };

public/env.sample.js

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

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"
+    }
+  ]
 }

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,27 +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";
   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>
@@ -206,6 +205,14 @@
             <ScanStationDetail {params} />
           </Route>
         </Route>
+        <Route path="/statsclients/*">
+          <Route path="/">
+            <StatsClients />
+          </Route>
+          <Route path="/:clientid" let:params>
+            <StatsClientDetail {params} />
+          </Route>
+        </Route>
         <Route path="/about">
           <About />
         </Route>

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>

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,6 @@
         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();
       }
     }
   });
@@ -33,10 +28,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 +48,18 @@
           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();
         })
         .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 +70,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 +108,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 />

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>

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>

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>

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>

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>

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,
+  };
 }

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" />

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);
 }

src/components/cards/AddCardBulkModal.svelte

@@ -1,14 +1,16 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
+
   import { RunnerCardService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+  import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
+  import DocumentServer from "../pdf_generation/DocumentServer";
   export let bulk_modal_open;
-  export let current_cards;
-  function focus(el) {
-    el.focus();
-  }
+  const dispatch = createEventDispatcher();
+  const documentServer = new DocumentServer(config.baseurl_documentserver,config.documentserver_key);
+
+
   $: card_count = 0;
   $: is_card_count_valid = card_count > 0;
   $: processed_last_submit = true;
@@ -30,27 +32,20 @@
   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, false)
+      toast.loading($_("creating-blanco-cards"));
+      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();
+          toast.dismiss();
+          toast.success($_("created-blanco-cards"));
+          dispatch("created", { cards: result });
         })
         .catch((err) => {
           //
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -58,47 +53,17 @@
   function submit_with_print() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
-        text: $_("creating-blanco-cards"),
-        duration: -1,
-      }).showToast();
+      toast.dismiss();
+      toast.loading($_("creating-blanco-cards"));
       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();
-          current_cards = current_cards.concat(result);
-          const toast = Toastify({
-            text: $_("generating-pdf"),
-            duration: -1,
-          }).showToast();
-          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();
-              }
-            })
+          toast.dismiss();
+          toast.success($_("created-blanco-cards"));
+          toast.loading($_("generating-pdf"));
+          dispatch("created", { cards: result });
+          documentServer.generateCards(result, "de")
             .then((blob) => {
               const url = window.URL.createObjectURL(blob);
               let a = document.createElement("a");
@@ -107,12 +72,8 @@
               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();
+              toast.dismiss();
+              toast.success($_("pdf-successfully-generated"));
             })
             .catch((err) => {
               console.error(err);
@@ -123,8 +84,6 @@
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -133,55 +92,67 @@
 {#if bulk_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       bulk_modal_open = false;
-    }}>
+    }}
+  >
     <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-4 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-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">
+        aria-labelledby="modal-headline"
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <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">
+              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" />
+                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">
-                {$_('create-bulk-blanco-cards')}
+                {$_("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')}
+                  {$_(
+                    "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>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("amount")}</label
+                  >
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
                       autocomplete="off"
@@ -192,15 +163,19 @@
                       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" />
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 p-2"
+                      placeholder="400"
+                    />
                     <span
-                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">{$_('cards')}</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')}
+                      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>
@@ -208,30 +183,33 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <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')}
+            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')}
+            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')}
+            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>

src/components/cards/AddCardModal.svelte

@@ -1,32 +1,44 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
-  import {
-    RunnerCardService,
-    RunnerService,
-    ScanService,
-  } from "@odit/lfk-client-js";
+
+  import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
   import Select from "svelte-select";
-  import Toastify from "toastify-js";
+  import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
   export let modal_open;
-  export let current_cards;
-  const getRunnerLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const filterRunners = (label, filterText, option) =>
-    label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.value.toString().startsWith(filterText.toLowerCase());
+
+  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;
-  $: runners = [];
   $: enabled = true;
   $: processed_last_submit = true;
+
+  let loading = true;
+  let runners = [];
   RunnerService.runnerControllerGetAll().then((val) => {
     runners = val.map((r) => {
       return { label: getRunnerLabel(r), value: r };
     });
+    loading = false;
   });
   $: createbtnenabled = true;
   (() => {
@@ -46,10 +58,7 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
-        text: $_("adding-card"),
-        duration: -1,
-      }).showToast();
+      toast.loading($_("adding-card"));
       let postdata = {
         runner,
         enabled,
@@ -59,21 +68,15 @@
           runner = 0;
           modal_open = false;
           //
-          Toastify({
-            text: $_("card-added"),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          current_cards.push(result);
-          current_cards = current_cards;
+          toast.dismiss();
+          toast.success($_("card-added"));
+          dispatch("created", { cards: [result] });
         })
         .catch((err) => {
           //
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -82,86 +85,104 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 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"
+        class="inline-block align-bottom bg-white rounded-md 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">
+        aria-labelledby="modal-headline"
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <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">
-                {$_('create-a-new-card')}
+                {$_("create-a-new-card")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('you-can-provide-a-runner-but-you-dont-have-to')}
-                  {$_('if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button')}
+                  {$_("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>
+                    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)}
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+                    itemFilter={(label, filterText, option) =>
+                      filterRunners(label, filterText, option)}
                     items={runners}
-                    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)} />
+                    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">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <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')}
+            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>

src/components/cards/CardDetailModal.svelte

@@ -1,26 +1,34 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
+
   import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
   import Select from "svelte-select";
-  import Toastify from "toastify-js";
+  import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
   export let edit_modal_open;
-  export let current_cards;
   export let runner = {};
   export let editable = {};
   export let original_data = {};
   const getRunnerLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const filterRunners = (label, filterText, option) =>
-    label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.value.toString().startsWith(filterText.toLowerCase());
+  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 };
@@ -46,33 +54,23 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
-        text: $_("updating-card"),
-        duration: -1,
-      }).showToast();
+      toast.loading($_("updating-card"));
       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();
-          current_cards[current_cards.findIndex((c) => c.id === id)] = result;
-          current_cards = current_cards;
+          toast.dismiss();
+          toast.success($_("card-updated"));
+          dispatch("dataUpdated", { card: result });
         })
         .catch((err) => {
           //
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -81,65 +79,78 @@
 {#if edit_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       edit_modal_open = false;
-    }}>
+    }}
+  >
     <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-4 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"
+        class="inline-block align-bottom bg-white rounded-md 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">
+        aria-labelledby="modal-headline"
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <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">
-                {$_('edit-a-card')}
+                {$_("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')}
+                  {$_("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>
+                    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)}
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+                    itemFilter={(label, filterText, option) =>
+                      filterRunners(label, filterText, option)}
                     items={runners}
                     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.id)}
-                    on:clear={() => (editable.runner = null)} />
+                    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">
@@ -151,33 +162,36 @@
                       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')}
+                      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}
+                      {$_("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">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <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')}
+            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')}
+            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>

src/components/cards/CardRunner.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let runner;
+</script>
+
+{#if !runner}
+  {$_("non-blanko")}
+{:else}
+  <a href={`/runners/${runner.id}`}>
+    {#if runner.middlename}
+      {runner.firstname} {runner.middlename} {runner.lastname}
+    {:else}
+      {runner.firstname} {runner.lastname}
+    {/if}
+  </a>
+{/if}

src/components/cards/CardStatus.svelte

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

src/components/cards/Cards.svelte

@@ -7,34 +7,47 @@
   $: 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 />
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_("cards")}
+  </h4>
+  {#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:w-auto sm:text-sm  mb-1 lg:mb-0"
+    >
+      {$_("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:w-auto sm:text-sm  mb-1 lg:mb-0"
+    >
+      {$_("create-bulk-cards")}
+    </button>
+  {/if}
+  <CardsOverview bind:current_cards bind:addCards />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:CREATE')}
-  <AddCardModal bind:current_cards bind:modal_open />
-  <AddCardBulkModal bind:current_cards bind:bulk_modal_open />
+{#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}

src/components/cards/CardsEmptyState.svelte

@@ -5,8 +5,8 @@
 
 <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>
+    <img class="m-auto mt-2" 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>

src/components/cards/CardsOverview.svelte

@@ -2,280 +2,315 @@
   import { _ } from "svelte-i18n";
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
-  import Toastify from "toastify-js";
+  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 = [];
-  $: filtered_cards = current_cards.filter(function (c) {
-    if (
-      c.code.toLowerCase().includes(searchvalue_lowercase) ||
-      c.runner?.firstname.toLowerCase().includes(searchvalue_lowercase) ||
-      c.runner?.middlename.toLowerCase().includes(searchvalue_lowercase) ||
-      c.runner?.lastname.toLowerCase().includes(searchvalue_lowercase) ||
-      should_display_based_on_id(c.id)
-    ) {
-      return true;
-    }
+  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(),
   });
-  $: searchvalue = "";
-  $: searchvalue_lowercase = searchvalue.toLowerCase();
-  $: active_deletes = [];
-  $: cards_show = current_cards.some((r) => r.is_selected === true);
-  $: generate_cards = current_cards.filter((r) => r.is_selected === true);
-  const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
-    (val) => {
-      current_cards = val;
-    }
-  );
-  function should_display_based_on_id(id) {
-    if (searchvalue.toString().slice(-1) === "*") {
-      return id.toString().startsWith(searchvalue.replace("*", ""));
-    }
-    return id.toString() === searchvalue;
-  }
-  const getRunnerLabel = (option) =>
-    option?.firstname + " " + (option?.middlename || "") + " " + (option?.lastname || "{$_('non-blanko')}");
+
+  const table = createSvelteTable(options);
+
   function open_edit_modal(card) {
-    if(card.runner?.id){
+    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
+    } else {
+      card.runner = null;
+      runner = null;
     }
     editable = Object.assign(editable, card);
     original_data = Object.assign(original_data, card);
     edit_modal_open = true;
   }
-// -----------------
-  let scrollTop = 0;
-  $: rendered = filtered_cards;
-  let innerHeight = 0;
-  let ele;
-  $: updateSlice(scrollTop);
-  $: innerHeight = `${filtered_cards.length * 25}px`;
-  $: if (ele) updateSlice();
-  function updateSlice() {
-    const height = ele ? parseInt(ele.clientHeight) : 100;
-    const init = scrollTop / 25;
-    const end = Math.ceil((scrollTop + height) / 25);
-    rendered = filtered_cards.slice(init, end + 15);
-  }
-  function updateScroll($event) {
-    scrollTop = $event.target.scrollTop;
+
+  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 () => {
+    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++;
+    }
+  });
 </script>
 
-<style>
-  table tbody {
-  display: block;
-  overflow-y: scroll;
-}
-
-table thead, table tbody tr {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-}
-</style>
-
-{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:UPDATE")}
   <CardDetailModal
-    bind:current_cards
     bind:edit_modal_open
     bind:runner
     bind:editable
-    bind:original_data />
+    bind:original_data
+    on:dataUpdated={(event) => {
+      current_cards[
+        current_cards.findIndex((c) => c.id === event.detail.card.id)
+      ] = event.detail.card;
+      current_cards = current_cards;
+      options.update((options) => ({
+        ...options,
+        data: current_cards,
+      }));
+    }}
+  />
 {/if}
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
-  {#await cards_promise}
+{#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>
+      role="alert"
+    >
+      <p class="font-bold">{$_("loading-cards")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:then}
-    {#if current_cards.length === 0}
-      <CardsEmptyState />
-    {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
-        aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
-        <div class="h-12">
-          <GenerateRunnerCards
-            bind:cards_show
-            bind:generate_cards />
-        </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_cards.some((r) => r.is_selected === true);
-                    current_cards = current_cards.map((r) => {
-                      r.is_selected = newstate;
-                      return r;
-                    });
-                  }}
-                  class="underline cursor-pointer select-none">{#if current_cards.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">
-                {$_('code')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('runner')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('status')}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200 virtual-wrapper"
-  on:scroll={updateScroll}
-  style="height: 70vh; width:100%"
-  bind:this={ele}
+  {: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: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"
           >
-    {#each filtered_cards as card, index}
-    {#if card.code
-      .toLowerCase()
-      .includes(
-        searchvalue.toLowerCase()
-      ) || card.runner?.firstname
-        .toLowerCase()
-        .includes(
-          searchvalue.toLowerCase()
-        ) || card.runner?.middlename
-        .toLowerCase()
-        .includes(
-          searchvalue.toLowerCase()
-        ) || card.runner?.lastname
-        .toLowerCase()
-        .includes(
-          searchvalue.toLowerCase()
-        ) || should_display_based_on_id(card.id)}
-      <tr data-rowid="card_{card.id}">
-        <td class="px-6 py-4 whitespace-nowrap">
-          <input
-            bind:checked={card.is_selected}
-            type="checkbox"
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-        </td>
-        <td class="px-6 py-4 whitespace-nowrap">
-          <div class="flex items-center">{card.code}</div>
-        </td>
-        <td class="px-6 py-4 whitespace-nowrap">
-          <div class="flex items-center">
-            {#if card.runner}
-              <a
-                href="../runners/{card.runner.id}"
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
-                {card.runner.middlename || ''}
-                {card.runner.lastname}</a>
-            {:else}{$_('non-blanko')}{/if}
-          </div>
-        </td>
-        <td class="px-6 py-4 whitespace-nowrap">
-          <div class="flex items-center">
-            {#if card.enabled}
-              <span
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
-            {:else}
-              <span
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
-            {/if}
-          </div>
-        </td>
-
-        {#if active_deletes[card.id] === true}
-          <td
-            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-            <button
-              on:click={() => {
-                active_deletes[card.id] = false;
-              }}
-              tabindex="0"
-              class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-            <button
-              on:click={() => {
-                RunnerCardService.runnerCardControllerRemove(card.id, false).then(
-                  (resp) => {
-                    current_cards = current_cards.filter(
-                      (obj) => obj.id !== card.id
-                    );
-                    Toastify({
-                      text: $_('card-deleted'),
-                      duration: 500,
-                      backgroundColor:
-                        'linear-gradient(to right, #00b09b, #96c93d)',
-                    }).showToast();
-                  }
-                );
-              }}
-              tabindex="0"
-              class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-          </td>
-        {:else}
-          <td
-            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-            <button
-              on:click={() => {
-                open_edit_modal(card);
-              }}
-              class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
-            {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
-              <button
-                on:click={() => {
-                  active_deletes[card.id] = true;
-                }}
-                tabindex="0"
-                class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-            {/if}
-          </td>
-        {/if}
-      </tr>
-    {/if}
-    {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  {:catch error}
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-      <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_('general_promise_error')}</b>
-        {error}
-      </span>
+            <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>
-  {/await}
+    <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>

src/components/cards/DeleteCardModal.svelte

@@ -0,0 +1,123 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { createEventDispatcher, onMount } from "svelte";
+  export let modal_open;
+  export let delete_card = {
+    id: 0,
+    code: "",
+    runner: {
+      firstname: "",
+      lastname: "",
+    },
+  };
+  const dispatch = createEventDispatcher();
+  onMount(() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  });
+  async function submit() {
+    dispatch("delete", { id: delete_card.id });
+    modal_open = false;
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}
+  >
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 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-md 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 rounded-t">
+          <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">
+                {$_("please-confirm-the-deletion-of-card")}
+              </h3>
+              <div class="w-full">
+                {$_("card")} #{delete_card.code}<br />
+                <span class="inline-block">
+                  {$_("runner")}:
+                  {#if delete_card.runner}
+                    <span class="inline-block"
+                      >{delete_card.runner.firstname}
+                      {delete_card.runner.lastname}</span
+                    >
+                  {:else}
+                    {$_("non-blanko")}
+                  {/if}</span
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
+          <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-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")}
+          </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}

src/components/contacts/AddContactModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
+
   import {
     GroupContactService,
     RunnerTeamService,
@@ -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:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 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">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        aria-labelledby="modal-headline"
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <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-neutral-800 rounded-md p-2"
+                  />
                   {#if !isFirstnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('first-name-is-required')}
+                      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-neutral-800 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-neutral-800 rounded-md p-2"
+                  />
                   {#if !isLastnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('last-name-is-required')}
+                      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-neutral-800 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-neutral-800 rounded-md p-2"
+                  />
                   {#if !isPhoneValidOrEmpty}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {@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-neutral-800 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-semibold 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-neutral-800 rounded-md p-2"
+                    />
                     {#if !isAddress1Valid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                        {$_('address-is-required')}
+                        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-neutral-800 rounded-md p-2"
+                    />
                   </div>
                   <div class="col-span-6">
                     <label
                       for="zipcode"
-                      class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+                      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-neutral-800 rounded-md p-2"
+                    />
                     {#if !iszipcodevalid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                        {$_('valid-zipcode-postal-code-is-required')}
+                        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-neutral-800 rounded-md p-2"
+                    />
                     {#if !iscityvalid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                        {$_('valid-city-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("valid-city-is-required")}
                       </span>
                     {/if}
                   </div>
@@ -412,22 +454,24 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <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')}
+            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>

src/components/contacts/ContactDetail.svelte

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

src/components/contacts/Contacts.svelte

@@ -8,22 +8,23 @@
 </script>
 
 <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')}
-      <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')}
-      </button>
-    {/if}
-  </span>
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_("contacts")}
+  </h4>
+  {#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:w-auto sm:text-sm"
+    >
+      {$_("create-a-new-contact")}
+    </button>
+  {/if}
   <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}

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>
 

src/components/contacts/ContactsOverview.svelte

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

src/components/dashboard/Dashboard.svelte

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

src/components/dashboard/MainDashContent.svelte

@@ -1,22 +1,228 @@
 <script>
   import { _ } from "svelte-i18n";
-  import StatCards from "./StatCards.svelte";
+  import { StatsService } from "@odit/lfk-client-js";
   import store from "../../store";
-  let navOpen = false;
+  import StatCard from "./StatCard.svelte";
+  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>
-  </h1>
-  <StatCards />
+<div class="p-2 md:p-5 overflow-x-hidden">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_("dashboard-greeting")} <span class="text-blue-500"
+      >{store.state.jwtinfo.userdetails.firstname}
+      {store.state.jwtinfo.userdetails.lastname}</span
+    >
+  </h4>
+  {#await stats_promise}
+    <div
+      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+      role="alert"
+    >
+      <p class="font-bold">{$_("stats-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
+    </div>
+  {:then stats}
+    <div
+      class="grid gap-1 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}
+        href="/runners/"
+      >
+        <svg
+          height="24"
+          width="24"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
+          /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("total-scans")}
+        value={stats.total_scans}
+        href="/scans/"
+      >
+        <svg
+          fill="currentColor"
+          width="24"
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            fill="currentColor"
+            d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+          /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("total-donors")}
+        value={stats.total_donors}
+        href="/donors/"
+      >
+        <svg
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
+          /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("total-donation-count")}
+        value={stats.total_donations}
+        href="/donations/"
+      >
+        <svg
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+          /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("average-donation")}
+        value={`${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={`${parseFloat(stats.total_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-distance")}
+        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"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          width="24"
+          ><path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
+          /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("count_teams")}
+        value={stats.total_teams}
+        href="/teams/"
+      >
+        <svg
+          stroke="currentColor"
+          fill="none"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          size="24"
+          class="stroke-current text-grey-500"
+          height="24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+          ><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+          <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("count_organizations")}
+        value={stats.total_orgs}
+        href="/orgs/"
+      >
+        <svg
+          height="24"
+          fill="currentColor"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z"
+          /></svg
+        >
+      </StatCard>
+    </div>
+  {:catch error}
+    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+      <span class="inline-block align-middle mr-8">
+        <b class="capitalize">{$_("general_promise_error")}</b>
+        {error}
+      </span>
+    </div>
+  {/await}
 </div>

src/components/dashboard/StatCard.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { _ } from "svelte-i18n";
+
+  export let href = "#";
+  export let title = "";
+  export let value = "";
+</script>
+
+<a {href}>
+  <div class="p-3 py-4 sm: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-md sm:text-xs uppercase font-normal text-grey-500">
+          {title}
+        </div>
+        <div class="text-2xl sm:text-xl font-bold font-mono">{value}</div>
+      </div>
+      <slot />
+    </div>
+  </div>
+</a>

src/components/dashboard/StatCards.svelte

@@ -1,165 +0,0 @@
-<script>
-  import { StatsService } from "@odit/lfk-client-js";
-  import { _ } from "svelte-i18n";
-  const stats_promise = StatsService.statsControllerGet();
-</script>
-
-<!--  -->
-<h1>{$_('general-stats')}</h1>
-{#await stats_promise}
-  <div
-    class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-    role="alert">
-    <p class="font-bold">{$_('stats-are-being-loaded')}</p>
-    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
-  </div>
-{:then stats}
-  <div
-    class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
-    <a href="/runners/" class="w-full lg:w-1/4">
-      <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
-        <div class="flex flex-row items-center justify-between">
-          <div class="flex flex-col">
-            <div class="text-xs uppercase font-light text-grey-500">
-              {$_('runners')}
-            </div>
-            <div class="text-xl font-bold">{stats.total_runners}</div>
-          </div>
-          <svg
-            height="24"
-            width="24"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none" />
-            <path
-              d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z" /></svg>
-        </div>
-      </div>
-    </a>
-    <div class="w-full lg:w-1/4">
-      <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
-        <div class="flex flex-row items-center justify-between">
-          <div class="flex flex-col">
-            <div class="text-xs uppercase font-light text-grey-500">
-              {$_('total-scans')}
-            </div>
-            <div class="text-xl font-bold">{stats.total_scans}</div>
-          </div><svg
-            stroke="currentColor"
-            fill="currentColor"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            size="24"
-            class="stroke-current text-grey-500"
-            height="24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"><polyline
-              points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>
-        </div>
-      </div>
-    </div>
-    <div class="w-full lg:w-1/4">
-      <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
-        <div class="flex flex-row items-center justify-between">
-          <div class="flex flex-col">
-            <div class="text-xs uppercase font-light text-grey-500">
-              {$_('total-donations')}
-            </div>
-            <div class="text-xl font-bold">{stats.total_donation} €</div>
-          </div><svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="24"
-            fill="currentColor"
-            width="24"><path d="M0 0h24v24H0z" fill="none" />
-            <path
-              d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z" /></svg>
-        </div>
-      </div>
-    </div>
-    <div class="w-full lg:w-1/4">
-      <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
-        <div class="flex flex-row items-center justify-between">
-          <div class="flex flex-col">
-            <div class="text-xs uppercase font-light text-grey-500">
-              {$_('total-distance')}
-            </div>
-            <div class="text-xl font-bold">
-              {stats.total_distance / 1000}
-              km
-            </div>
-          </div>
-          <svg
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24"
-            width="24"><path d="M0 0h24v24H0z" fill="none" />
-            <path
-              d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z" /></svg>
-        </div>
-      </div>
-    </div>
-    <a href="/teams/" class="w-full lg:w-1/4">
-      <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
-        <div class="flex flex-row items-center justify-between">
-          <div class="flex flex-col">
-            <div class="text-xs uppercase font-light text-grey-500">
-              {$_('count_teams')}
-            </div>
-            <div class="text-xl font-bold">{stats.total_teams}</div>
-          </div>
-          <svg
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            size="24"
-            class="stroke-current text-grey-500"
-            height="24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"><path
-              d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-            <circle cx="9" cy="7" r="4" />
-            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-            <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
-        </div>
-      </div>
-    </a>
-    <a href="/orgs/" class="w-full lg:w-1/4">
-      <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
-        <div class="flex flex-row items-center justify-between">
-          <div class="flex flex-col">
-            <div class="text-xs uppercase font-light text-grey-500">
-              {$_('count_organizations')}
-            </div>
-            <div class="text-xl font-bold">{stats.total_orgs}</div>
-          </div>
-          <svg
-            height="24"
-            fill="currentColor"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z" /></svg>
-        </div>
-      </div>
-    </a>
-  </div>
-{:catch error}
-  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-    <span class="inline-block align-middle mr-8">
-      <b class="capitalize">{$_('general_promise_error')}</b>
-      {error}
-    </span>
-  </div>
-{/await}

src/components/donations/AddDonationModal.svelte

@@ -1,41 +1,28 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
+
   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,235 @@ 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 () => {
+    donors = (await DonorService.donorControllerGetAll()).map(
+      (r) => {
+        return { label: getDonorLabel(r), value: r };
+      }
+    );
+    runners = (await RunnerService.runnerControllerGetAll()).map(
+      (r) => {
+        return { label: getDonorLabel(r), value: r };
+      }
+    );
+  });
 </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-4 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-md 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 rounded-t">
+          <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-neutral-800 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-neutral-800 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-neutral-800 p-2"
+                      placeholder="2.00"
+                    />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 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 grid gap-2 rounded-b">
+          <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 +338,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:focusTrap
-    use:clickOutside
-    on:click_outside={() => {
-      modal_open = false;
-    }}>
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" /></svg>
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {#if is_fixed}
-                  {$_('create-a-new-fixed-donation')}
-                {:else}{$_('create-a-new-distance-donation')}{/if}
-              </h3>
-              <label class="content-center align-middle object-center">
-                <span
-                  class="ml-2 text-base"
-                  class:text-gray-300={is_fixed}>{$_('distance-donation')}</span>
-                <input
-                  class="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}

src/components/donations/AddDonationPaymentModal.svelte

@@ -1,19 +1,17 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
   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:focusTrap
     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-4 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"
+        class="inline-block align-bottom bg-white rounded-md 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">
+        aria-labelledby="modal-headline"
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <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 grid gap-2 rounded-b">
+          <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}

src/components/donations/DeleteDonationModal.svelte

@@ -0,0 +1,117 @@
+<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-4 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-md 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 rounded-t">
+          <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">
+                {$_("please-confirm-the-deletion-of-donation")}
+              </h3>
+              <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 grid gap-2 rounded-b">
+          <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-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")}
+          </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}

src/components/donations/DonationDetail.svelte

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

src/components/donations/DonationDonor.svelte

@@ -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 border border-current"
+      >{donor.firstname}
+      {#if donor.middlename}{donor.middlename}{/if}
+      {donor.lastname}</a
+    >
+  </div>
+{/if}

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 border border-current"
+      >{runner.firstname}
+      {#if runner.middlename}{runner.middlename}{/if}
+      {runner.lastname}</a
+    >
+  </div>
+{/if}

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

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
+/>

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')}
-      <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')}
-      </button>
-    {/if}
-  </span>
-  <DonationsOverview bind:current_donations />
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_("donations")}
+  </h4>
+  {#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:w-auto sm:text-sm"
+    >
+      {$_("add-donation")}
+    </button>
+  {/if}
+  <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}

src/components/donations/DonationsEmptyState.svelte

@@ -5,8 +5,8 @@
 
 <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>
+    <img class="m-auto mt-2" style="height:15rem" src={donations_empty} alt="" />
+    <span class="font-bold">{$_("there-are-no-donations-yet")}</span><br />
+    <span>{$_("add-your-fist-donation")}</span>
   </p>
 </div>

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.success($_("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="gridjs-input gridjs-search-input mb-4" />
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-        <table class="divide-y divide-gray-200 w-full">
-          <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-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
+    />
+    <div
+      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+    >
+      <table class="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>

src/components/donors/AddDonorModal.svelte

@@ -1,15 +1,14 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
-  import {
-    DonorService
-  } from "@odit/lfk-client-js";
+
+  import { DonorService } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import isMobilePhone from "validator/es/lib/isMobilePhone";
-  import Toastify from "toastify-js";
+
+  import { createEventDispatcher } from "svelte";
+  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:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 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">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        aria-labelledby="modal-headline"
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <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-neutral-800 rounded-md p-2"
+                  />
                   {#if !isFirstnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('first-name-is-required')}
+                      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-neutral-800 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-neutral-800 rounded-md p-2"
+                  />
                   {#if !isLastnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('last-name-is-required')}
+                      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-neutral-800 rounded-md p-2"
+                  />
                   {#if !isPhoneValidOrEmpty}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {@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-neutral-800 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-semibold 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-neutral-800 rounded-md p-2"
+                    />
                     {#if !isAddress1Valid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                        {$_('address-is-required')}
+                        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-neutral-800 rounded-md p-2"
+                    />
                   </div>
                   <div class="col-span-6">
                     <label
                       for="zipcode"
-                      class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+                      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-neutral-800 rounded-md p-2"
+                    />
                     {#if !iszipcodevalid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                        {$_('valid-zipcode-postal-code-is-required')}
+                        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-neutral-800 rounded-md p-2"
+                    />
                     {#if !iscityvalid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                        {$_('valid-city-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("valid-city-is-required")}
                       </span>
                     {/if}
                   </div>
@@ -380,22 +418,24 @@
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <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')}
+            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>

src/components/donors/ConfirmDonorDeletion.svelte

@@ -1,92 +1,90 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
-  import { DonorService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  import { createEventDispatcher } from "svelte";
-  export let modal_open;
-  export let delete_donor;
-  const dispatch = createEventDispatcher();
-  function cancelDelete() {
-    modal_open = false;
-    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) => {});
-  }
+	import { _ } from "svelte-i18n";
+	import { clickOutside } from "../base/outsideclick";
+	import { createEventDispatcher } from "svelte";
+	export let modal_open;
+	export let delete_donor;
+	const dispatch = createEventDispatcher();
+	function cancelDelete() {
+		modal_open = false;
+		dispatch("cancelDelete", { id: delete_donor.id });
+	}
+	function deleteDonor() {
+		dispatch("delete", { id: delete_donor.id });
+	}
 </script>
 
 {#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    use:focusTrap
-    use:clickOutside
-    on:click_outside={cancelDelete}>
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg class="h-6 w-6 text-blue-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="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')}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_(
-                    'do-you-want-to-delete-this-donor-with-all-related-donations'
-                  )}
-                  <br /> 
-                  {$_('all-associated-donations-will-get-deleted-as-well')}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            on:click={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')}
-          </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')}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div
+		class="fixed z-10 inset-0 overflow-y-auto"
+		use:clickOutside
+		on:click_outside={cancelDelete}
+	>
+		<div
+			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
+		>
+			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
+				<div
+					class="absolute inset-0 bg-gray-500 opacity-75"
+					data-id="modal_backdrop"
+				/>
+			</div>
+			<span
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				aria-hidden="true">&#8203;</span
+			>
+			<div
+				class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="modal-headline"
+			>
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
+					<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
+							>
+						</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">
+								{$_(
+									"do-you-want-to-delete-this-donor-with-all-related-donations"
+								)}
+							</h3>
+							<div class="mt-2 mb-6">
+								<p class="text-sm text-gray-500">
+									{$_("all-associated-donations-will-get-deleted-as-well")}
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
+					<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")}
+					</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")}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
 {/if}

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}

src/components/donors/DonorDetail.svelte

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

src/components/donors/DonorDonations.svelte

@@ -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 border border-current bg-green-700 text-white mr-1"
+        >{$_("fixed-donation")}:
+        {(donation.amount / 100)
+          .toFixed(2)
+          .toLocaleString("de-DE", { valute: "EUR" })}€</a
+      >
+    {/if}
+  {/each}
+{/if}

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')}
-      <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')}
-      </button>
-    {/if}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
-      <button
-        on:click={() => {
-          const data = (current_donors.filter(d=>d.receiptNeeded===true)).map(function (d) {
-            d.address.address2=d.address.address2===""?"":" "+d.address.address2;
-            const address=`${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
-            return [d.firstname,d.middlename,d.lastname,d.paidDonationAmount,address];
-          })
-          let csv = `${$_('csv_import__firstname')};${$_('csv_import__middlename')};${$_('csv_import__lastname')};${$_('total_donation_amount_in_eur')};${$_('address')}\n`;
-    data.forEach(function(row) {
-            csv += row.join(';');
-            csv += "\n";
-    });
-    let hiddenElement = document.createElement('a');
-    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
-    hiddenElement.target = '_blank';
-    hiddenElement.download = `${$_('filename_sponsoringquittungsliste')}.csv`;
-    hiddenElement.click();
-    hiddenElement.remove();
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        {$_('sponsoring-quittungs-liste_herunterladen')}
-      </button>
-    {/if}
-  </span>
-  <DonorsOverview bind:current_donors />
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_("donors")}
+  </h4>
+  {#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:w-auto sm:text-sm  mb-1 lg:mb-0"
+    >
+      {$_("add-donor")}
+    </button>
+  {/if}
+  {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
+    <button
+      on:click={() => {
+        const data = current_donors
+          .filter((d) => d.receiptNeeded === true)
+          .map(function (d) {
+            d.address.address2 =
+              d.address.address2 === "" ? "" : " " + d.address.address2;
+            const address = `${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
+            return [
+              d.firstname,
+              d.middlename,
+              d.lastname,
+              (d.paidDonationAmount/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();
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm  mb-1 lg:mb-0"
+    >
+      {$_("sponsoring-quittungs-liste_herunterladen")}
+    </button>
+  {/if}
+  <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}

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>

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.success($_("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="gridjs-input gridjs-search-input mb-4" />
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-        <table class="divide-y divide-gray-200 w-full">
-          <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-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
+    />
+    <div
+      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+    >
+      <table class="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>

src/components/general/About.svelte

@@ -1,193 +1,196 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
-  export let modal_open;
-  (function () {
-    document.onkeydown = function (e) {
-      e = e || window.event;
-      if (e.key === "Escape") {
-        modal_open = false;
-      }
-    };
-  })();
-  const license_promise = fetch("/licenses.json");
-  let licenses = [];
-  $: currentlicense = "";
-  $: licensetext = "";
-  license_promise
-    .then((response) => response.json())
-    .then((json) => {
-      licenses = json;
-    });
+	import { _ } from "svelte-i18n";
+	import { clickOutside } from "../base/outsideclick";
+
+	let modal_open = false;
+	(function () {
+		document.onkeydown = function (e) {
+			e = e || window.event;
+			if (e.key === "Escape") {
+				modal_open = false;
+			}
+		};
+	})();
+	const license_promise = fetch("/licenses.json");
+	let licenses = [];
+	$: currentlicense = "";
+	$: licensetext = "";
+	license_promise
+		.then((response) => response.json())
+		.then((json) => {
+			licenses = json;
+		});
 </script>
 
 {#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    use:focusTrap
-    use:clickOutside
-    on:click_outside={() => {
-      modal_open = false;
-    }}>
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg
-                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" />
-                <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>
-            </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')}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">{currentlicense}</p>
-              </div>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">{licensetext}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            on:click={() => {
-              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')}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+	<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 sm:block sm:p-0"
+		>
+			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
+				<div
+					class="absolute inset-0 bg-gray-500 opacity-75"
+					data-id="modal_backdrop"
+				/>
+			</div>
+			<span
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				aria-hidden="true">&#8203;</span
+			>
+			<div
+				class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="modal-headline"
+			>
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
+					<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
+								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" />
+								<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
+							>
+						</div>
+						<div class="mt-3 sm:mt-0 sm:ml-4 sm:text-left">
+							<h3 class="text-lg leading-6 font-medium">
+								{$_("read-license")}
+							</h3>
+							<div class="mt-2 mb-6">
+								<p class="text-sm text-gray-500">{currentlicense}</p>
+							</div>
+							<div class="mt-2 mb-6">
+								<p class="text-sm text-gray-500">{licensetext}</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
+					<button
+						on:click={() => {
+							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:w-auto sm:text-sm"
+					>
+						{$_("close")}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
 {/if}
 <!-- /// -->
-<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')}
-      🧾
-    </h1>
-    <p
-      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')}
-        <a href="https://odit.services" class="underline">ODIT.Services</a>
-      </strong>
-      <br />
-      <span class="text-lg">{$_('lfk-is-os')}</span>
-    </p>
-  </div>
-</div>
-
-<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')}
-    </h2>
-    <div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
-      <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>
-      {:then}
-        <table>
-          <thead>
-            <tr>
-              <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>
-                <td>{l.name}</td>
-                <td>
-                  {l.license || '?'}<br /><span
-                    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>
-                </td>
-                <td>
-                  {(l.repo?.url || l.repo)
-                    .replace('git+', '')
-                    .replace('git://', '')}
-                </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">
-          <span class="inline-block align-middle mr-8">
-            <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>
-      <ul class="list-disc">
-        <li>
-          <a
-            class="underline"
-            target="_blank"
-            rel="noopener noreferrer"
-            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>
-        </li>
-        <li>
-          <a
-            class="underline"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://remixicon.com">https://remixicon.com</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
+<section class="container p-5">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
+		{$_("about")}
+	</h4>
+	<p class="mt-2 mb-2">
+		Lauf für Kaya!
+		<strong class="font-medium">
+			{$_("by")}
+			<a href="https://odit.services" class="underline">ODIT.Services</a>
+		</strong>
+		<br />
+		<span>{$_("lfk-is-os")}</span>
+	</p>
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
+		{$_("credits")}
+	</h4>
+	<p class="text-left">{$_("oss_credit_description")}</p>
+	<div class="mt-5 overflow-x-auto">
+		{#await license_promise}
+			<p>{$_("licenses-are-being-loaded")}</p>
+		{:then}
+			<table class="font-mono">
+				<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 class="odd:bg-white even:bg-gray-100 *:p-2">
+							<td>{l.name}</td>
+							<td>
+								<button
+									class="underline cursor-pointer"
+									on:click={() => {
+										modal_open = true;
+										currentlicense = l.name + "@" + l.version;
+										licensetext =
+											l.licensetext || $_("no-license-text-could-be-found");
+									}}>{l.license || "?"}</button
+								>
+							</td>
+							<td>
+								{(l.repo?.url || l.repo)
+									.replace("git+", "")
+									.replace("git://", "")}
+							</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"
+			>
+				<span class="inline-block align-middle mr-8">
+					<b class="capitalize">{$_("general_promise_error")}</b>
+					{error}
+				</span>
+			</div>
+		{/await}
+	</div>
+	<div class="w-full mt-8">
+		<p class="font-medium">{$_("icon-image-credits")}</p>
+		<ul class="list-disc ml-6">
+			<li>
+				<a
+					class="underline"
+					target="_blank"
+					rel="noopener noreferrer"
+					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
+				>
+			</li>
+			<li>
+				<a
+					class="underline"
+					target="_blank"
+					rel="noopener noreferrer"
+					href="https://remixicon.com">https://remixicon.com</a
+				>
+			</li>
+		</ul>
+	</div>
+</section>

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>

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>

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>

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";
+  // 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>

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>

src/components/groups/AddGroupModal.svelte

@@ -1,9 +1,8 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
-  import Toastify from "toastify-js";
   import { UserGroupService } from "@odit/lfk-client-js";
+  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,104 +60,123 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    use:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 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">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        aria-labelledby="modal-headline"
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <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-neutral-800 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-neutral-800 rounded-md p-2"
+                  />
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <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')}
+            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>

src/components/groups/GroupDetail.svelte

@@ -1,220 +1,227 @@
 <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) => {});
-  }
+	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')}
+	{$_("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>
+	<section class="container p-5 select-none">
+		<div class="flex flex-row mb-4">
+			<div class="w-full">
+				<nav class="w-full flex">
+					<ol class="list-none flex flex-row items-center justify-start">
+						<li class="flex items-center"></li>
+						<li class="flex items-center">
+							<a class="mr-2" href="../"
+								><svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline-block"
+									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+								>
+								{$_("groups")}</a
+							>
+						</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+		<div class="mb-4 text-3xl font-extrabold leading-tight">
+			{editable.name}
+			<div data-id="group_actions_${editable.id}">
+				{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
+					{#if delete_triggered}
+						<button
+							on:click={deleteGroup}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("confirm-deletion")}</button
+						>
+						<button
+							on:click={() => {
+								delete_triggered = !delete_triggered;
+							}}
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+							>{$_("cancel")}</button
+						>
+					{/if}
+					{#if !delete_triggered}
+						<button
+							on:click={() => {
+								delete_triggered = true;
+							}}
+							type="button"
+							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+							>{$_("delete-group")}</button
+						>
+					{/if}
+				{/if}
+				{#if !delete_triggered}
+					<button
+						disabled={!save_enabled}
+						class:opacity-50={!save_enabled}
+						type="button"
+						on:click={submit}
+						class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+						>{$_("save-changes")}</button
+					>
+				{/if}
+			</div>
+		</div>
+		<!--  -->
+		<div class="text-sm w-full mt-2">
+			<label for="title" class="font-semibold text-gray-700">{$_("name")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("name")}
+				type="text"
+				bind:value={editable.name}
+				class:border-red-500={!isGroupnameValid}
+				class:focus:border-red-500={!isGroupnameValid}
+				class:focus:ring-red-500={!isGroupnameValid}
+				name="title"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+			{#if !isGroupnameValid}
+				<span
+					class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+				>
+					{$_("group-name-is-required")}
+				</span>
+			{/if}
+		</div>
+		<div class="text-sm w-full mt-2">
+			<label for="groupdescription" class="font-semibold text-gray-700"
+				>{$_("description")}</label
+			>
+			<input
+				autocomplete="off"
+				placeholder={$_("description")}
+				type="text"
+				bind:value={editable.description}
+				name="groupdescription"
+				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+			/>
+		</div>
+		<div class="text-sm w-full mt-2">
+			<p class="font-semibold mb-4">
+				{$_("permissions")}
+			</p>
+			<div>
+				<a
+					class="px-4 py-2 bg-gray-500 rounded-md text-white"
+					href="/groups/{params.groupid}/permissions/"
+					>{$_("edit-permissions")}</a
+				>
+			</div>
+			<div class="w-full sm:my-px sm:px-px sm:w-1/2">
+				<input
+					autocomplete="off"
+					placeholder={$_("search-for-permission")}
+					type="text"
+					bind:value={search_permission}
+					class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+				/>
+			</div>
+			{#each original_data.permissions as p}
+				{#if p.toLowerCase().includes(search_permission.toLowerCase())}
+					<span
+						style="background:{matched_colors[
+							p.split(':')[0]
+						][0]};color:{matched_colors[p.split(':')[0]][1]};"
+						class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded"
+						>{p}</span
+					>
+					<!--  -->
+				{/if}
+			{/each}
+		</div>
+	</section>
 {:catch error}
-  <PromiseError {error} />
+	<PromiseError {error} />
 {/await}

src/components/groups/GroupPermissions.svelte

@@ -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.success($_("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,45 +121,45 @@ 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')}:
-      {original_data.name}
-      <span>
+    <div class="mb-4 text-3xl font-extrabold">
+      <div>
         {#if promises.length === 0}
           <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>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+            >{$_("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:w-auto sm:text-sm"
+            >{$_("applying-changes")}</button
+          >
         {/if}
-      </span>
+      </div>
     </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 +167,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 +191,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:w-auto sm:text-sm"
+                    >+</button
+                  >
                 </p>
               {/if}
             {/each}
@@ -198,22 +201,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:w-auto sm:text-sm"
+                  >-</button
+                >
               </p>
             {/each}
           </div>

src/components/groups/Groups.svelte

@@ -8,22 +8,23 @@
 </script>
 
 <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')}
-      <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')}
-      </button>
-    {/if}
-  </span>
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_("user-groups")}
+  </h4>
+  {#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:w-auto sm:text-sm"
+    >
+      {$_("add-user-group")}
+    </button>
+  {/if}
   <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}

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>

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="gridjs-input gridjs-search-input mb-4" />
+        placeholder={$_("datatable.search")}
+        aria-label={$_("datatable.search")}
+        class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
+      />
       <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        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>

src/components/orgs/AddOrgModal.svelte

@@ -1,9 +1,10 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
+
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
+  import 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:focusTrap
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 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">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        aria-labelledby="modal-headline"
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
           <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-neutral-800 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,115 +170,133 @@
                       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-semibold 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-neutral-800 rounded-md p-2"
+                    />
+                    {#if !isAddress1Valid}
+                      <span
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("address-is-required")}
+                      </span>
+                    {/if}
+                  </div>
+                  <div class="col-span-6">
+                    <label
+                      for="address2"
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("apartment-suite-etc")}</label
+                    >
+                    <input
+                      autocomplete="off"
+                      placeholder={$_("apartment-suite-etc")}
+                      bind:value={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-neutral-800 rounded-md p-2"
+                    />
+                  </div>
+                  <div class="col-span-6">
+                    <label
+                      for="zipcode"
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("zip-postal-code")}</label
+                    >
+                    <input
+                      autocomplete="off"
+                      placeholder={$_("zip-postal-code")}
+                      class:border-red-500={!iszipcodevalid}
+                      class:focus:border-red-500={!iszipcodevalid}
+                      class:focus:ring-red-500={!iszipcodevalid}
+                      bind:value={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-neutral-800 rounded-md p-2"
+                    />
+                    {#if !iszipcodevalid}
+                      <span
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("valid-zipcode-postal-code-is-required")}
+                      </span>
+                    {/if}
+                  </div>
+                  <div class="col-span-6">
+                    <label
+                      for="city"
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("city")}</label
+                    >
+                    <input
+                      autocomplete="off"
+                      placeholder={$_("city")}
+                      class:border-red-500={!iscityvalid}
+                      class:focus:border-red-500={!iscityvalid}
+                      class:focus:ring-red-500={!iscityvalid}
+                      bind:value={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-neutral-800 rounded-md p-2"
+                    />
+                    {#if !iscityvalid}
+                      <span
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("valid-city-is-required")}
+                      </span>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
           <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')}
+            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>

src/components/orgs/ConfirmOrgDeletion.svelte

@@ -1,102 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "../base/outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  import { createEventDispatcher } from "svelte";
-  export let modal_open;
-  export let delete_org;
-  const dispatch = createEventDispatcher();
-  function cancelDelete() {
-    modal_open = false;
-    dispatch("cancelDelete", { id: delete_org.id });
-  }
-  function deleteOrg() {
-    RunnerOrganizationService.runnerOrganizationControllerRemove(
-      delete_org.id,
-      true
-    )
-      .then((resp) => {
-        Toastify({
-          text: $_('organization-deleted'),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
-</script>
-
-{#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    use:focusTrap
-    use:clickOutside
-    on:click_outside={cancelDelete}>
-    <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                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>
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('attention')}
-              </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_(
-                    'do-you-want-to-delete-the-organization-delete_org-name',
-                    {
-                      values: { orgname: delete_org.name },
-                    }
-                  )}<br />
-                  {$_('all-associated-teams-and-runners-will-be-deleted-too')}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            on:click={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')}
-          </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')}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/orgs/ConfirmOrgDeletionModal.svelte

@@ -0,0 +1,104 @@
+<script>
+	import { _ } from "svelte-i18n";
+	import { clickOutside } from "../base/outsideclick";
+
+	import { RunnerOrganizationService } from "@odit/lfk-client-js";
+
+	import { createEventDispatcher } from "svelte";
+	export let modal_open;
+	export let delete_org;
+	const dispatch = createEventDispatcher();
+	function cancelDelete() {
+		modal_open = false;
+		dispatch("cancelDelete", { id: delete_org.id });
+	}
+	function deleteOrg() {
+		RunnerOrganizationService.runnerOrganizationControllerRemove(
+			delete_org.id,
+			true
+		)
+			.then((resp) => {
+				toast.success($_("organization-deleted"));
+				location.replace("./");
+			})
+			.catch((err) => {});
+	}
+</script>
+
+{#if modal_open}
+	<div
+		class="fixed z-10 inset-0 overflow-y-auto"
+		use:clickOutside
+		on:click_outside={cancelDelete}
+	>
+		<div
+			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-4 text-center sm:block sm:p-0"
+		>
+			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
+				<div
+					class="absolute inset-0 bg-gray-500 opacity-75"
+					data-id="modal_backdrop"
+				/>
+			</div>
+			<span
+				class="hidden sm:inline-block sm:align-middle sm:h-screen"
+				aria-hidden="true">&#8203;</span
+			>
+			<div
+				class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="modal-headline"
+			>
+				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t">
+					<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"
+								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
+							>
+						</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">
+								{$_("do-you-want-to-delete-the-organization-delete_org-name", {
+									values: { orgname: delete_org.name },
+								})}
+							</h3>
+							<div class="mt-2 mb-6">
+								<p class="text-sm text-gray-500">
+									{$_("all-associated-teams-and-runners-will-be-deleted-too")}
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-gray-50 px-4 py-3 sm:px-6 grid gap-2 rounded-b">
+					<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")}
+					</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")}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

src/components/orgs/OrgDetail.svelte

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

src/components/orgs/OrgOverview.svelte

@@ -1,219 +0,0 @@
-<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="gridjs-input gridjs-search-input 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}

src/components/orgs/Orgs.svelte

@@ -1,51 +1,253 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../../store";
-  import AddOrgModal from "./AddOrgModal.svelte";
-  export let modal_open = false;
-  import OrgOverview from "./OrgOverview.svelte";
-  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
-  let current_organizations = [];
-  export let import_modal_open = false;
+	import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+	let delete_org = {};
+	import { RunnerOrganizationService } from "@odit/lfk-client-js";
+	import store from "../../store";
+	import OrgsEmptyState from "./OrgsEmptyState.svelte";
+	import ConfirmOrgDeletionModal from "./ConfirmOrgDeletionModal.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
+	);
+	let current_organizations = [];
+
+	const promise =
+		RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+			(val) => {
+				current_organizations = val;
+			}
+		);
+	import { _ } from "svelte-i18n";
+	import AddOrgModal from "./AddOrgModal.svelte";
+	let delete_modal_open = false;
+	let modal_open = false;
+	import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+	let import_modal_open = false;
 </script>
 
 <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')}
-      <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')}
-      </button>
-    {/if}
-    {#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}
-  </span>
-  <OrgOverview bind:current_organizations />
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
+		{$_("organizations")}
+	</h4>
+	{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
+		<button
+			on:click={() => {
+				modal_open = true;
+			}}
+			type="button"
+			class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+		>
+			{$_("create-organization")}
+		</button>
+	{/if}
+	{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
+		<button
+			on:click={() => {
+				import_modal_open = true;
+			}}
+			type="button"
+			class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+		>
+			{$_("import-runners")}
+		</button>
+	{/if}
+	<ConfirmOrgDeletionModal
+		on:cancelDelete={(event) => {
+			delete_modal_open = false;
+			active_deletes[event.detail.id] = false;
+		}}
+		bind:modal_open={delete_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="w-full sm:w-auto sm:mt-0 p-2 rounded-md border mb-1 lg:mb-0"
+				/>
+				<GenerateSponsoringContracts
+					bind:sponsoring_contracts_show
+					bind:generate_orgs
+				/>
+				<GenerateRunnerCards bind:cards_show bind:generate_orgs />
+				<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
+				<div
+					class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+				>
+					<table class="divide-y divide-gray-200 w-full">
+						<thead class="bg-gray-50">
+							<tr class="odd:bg-white even:bg-gray-100">
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									<button
+										on:click={() => {
+											const newstate = !current_organizations.some(
+												(r) => r.is_selected === true
+											);
+											current_organizations = current_organizations.map((r) => {
+												r.is_selected = newstate;
+												return r;
+											});
+										}}
+										class="underline cursor-pointer select-none"
+										>{#if current_organizations.some((r) => r.is_selected === true)}
+											{$_("deselect-all")}
+										{:else}{$_("select-all")}{/if}
+									</button>
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("name")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("address")}
+								</th>
+								<th
+									scope="col"
+									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+								>
+									{$_("contact")}
+								</th>
+								<th scope="col" class="relative px-6 py-3">
+									<span class="sr-only">{$_("action")}</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody class="divide-y divide-gray-200">
+							{#each current_organizations as o}
+								{#if Object.values(o)
+									.toString()
+									.toLowerCase()
+									.includes(searchvalue)}
+									<tr
+										class="odd:bg-white even:bg-gray-100"
+										data-rowid="org_{o.id}"
+									>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<input
+												bind:checked={o.is_selected}
+												type="checkbox"
+												class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+											/>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{o.name}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if o.address.address1 !== null}
+														{o.address.address1}<br />
+														<!-- {o.address.address2 || ''}<br /> -->
+														{o.address.postalcode}
+														{o.address.city}
+														{o.address.country}
+													{/if}
+												</div>
+											</div>
+										</td>
+										<td class="px-6 py-4 whitespace-nowrap">
+											<div class="flex items-center">
+												<div class="text-sm font-medium text-gray-900">
+													{#if o.contact}
+														<a
+															href="../contacts/{o.contact.id}"
+															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 border border-current"
+															>{o.contact.firstname}
+															{o.contact.middlename || ""}
+															{o.contact.lastname}</a
+														>
+													{:else}{$_("no-contact-specified")}{/if}
+												</div>
+											</div>
+										</td>
+										<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;
+														delete_modal_open = true;
+														delete_org = o;
+													}}
+													tabindex="0"
+													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+													>{$_("delete")}</button
+												>
+											{/if}
+										</td>
+									</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}
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
-  <AddOrgModal bind:current_organizations bind:modal_open />
-  <ImportRunnerModal
-    on:cancelDelete={(event) => {
-      import_modal_open = false;
-    }}
-    passed_team={{}}
-    passed_org={{}}
-    passed_orgs={current_organizations}
-    opened_from="OrgOverview"
-    current_runners={[]}
-    bind:import_modal_open />
+{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
+	<AddOrgModal bind:current_organizations bind:modal_open />
+	<ImportRunnerModal
+		on:cancelDelete={(event) => {
+			import_modal_open = false;
+		}}
+		passed_team={{}}
+		passed_org={{}}
+		passed_orgs={current_organizations}
+		opened_from="OrgOverview"
+		bind:import_modal_open
+	/>
 {/if}

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>
 

src/components/pdf_generation/DocumentServer.ts

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

src/components/pdf_generation/GenerateRunnerCards.svelte

@@ -1,403 +1,197 @@
 <script>
-    import { getLocaleFromNavigator, _ } from "svelte-i18n";
-    import {
-        RunnerCardService,
-        RunnerOrganizationService,
-        RunnerTeamService,
-    } from "@odit/lfk-client-js";
-    import Toastify from "toastify-js";
-    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;
-        }
-    });
+	import { _ } from "svelte-i18n";
+	import {
+		RunnerCardService,
+		RunnerOrganizationService,
+		RunnerTeamService,
+	} from "@odit/lfk-client-js";
+	import toast from "svelte-french-toast";
+	import DocumentServer from "./DocumentServer.ts";
 
-    function generateRunnerCards(locale) {
-        cards_dropdown_open = false;
+	import { init } from "@paralleldrive/cuid2";
+	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+	const documentServer = new DocumentServer(
+		config.baseurl_documentserver,
+		config.documentserver_key
+	);
 
-        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);
-        }
-    }
+	export let cards_show = false;
+	export let generate_cards = [];
+	export let generate_runners = [];
+	export let generate_orgs = [];
+	export let generate_teams = [];
 
-    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}.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);
-            });
-    }
+	function download(blob, fileName) {
+		const url = window.URL.createObjectURL(blob);
+		let a = document.createElement("a");
+		a.href = url;
+		a.download = fileName;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+		toast.dismiss();
+		toast.success($_("pdf-successfully-generated"));
+	}
 
-    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}.pdf`;
-                }
-                else{
-                    a.download = `Runnercards-${locale}.pdf`;
-                }
-                document.body.appendChild(a);
-                a.click();
-                a.remove();
-                toast.hideToast();
-                Toastify({
-                    text: $_("pdf-successfully-generated"),
-                    duration: 3500,
-                    backgroundColor:
-                        "linear-gradient(to right, #00b09b, #96c93d)",
-                }).showToast();
-            })
-            .catch((err) => {});
-    }
+	function generateRunnerCards(locale) {
+		if (generate_orgs.length > 0) {
+			generateOrgCards(locale);
+		} else if (generate_teams.length > 0) {
+			generateTeamCards(locale);
+		} else if (generate_runners.length > 0) {
+			generateRunnersCards(locale);
+		} else {
+			generateCards(locale);
+		}
+	}
 
-    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}.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) => {});
-        }
-    }
+	function generateCards(locale) {
+		toast.loading($_("generating-pdf"));
+		documentServer
+			.generateCards(generate_cards, locale)
+			.then((blob) => {
+				download(blob, `${$_("runnercards")}-${locale}-${createId()}.pdf`);
+			})
+			.catch((err) => {
+				console.error(err);
+			});
+	}
 
-    async function 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}.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}.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) => {});
-            }
-        }
-    }
+	async function generateRunnersCards(locale) {
+		toast.loading($_("generating-pdf"));
+		const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+		let cards = [];
+		for (let runner of generate_runners) {
+			let card = current_cards.find((c) => c.runner?.id == runner.id);
+			if (!card) {
+				card = await RunnerCardService.runnerCardControllerPost({
+					runner: runner.id,
+				});
+			}
+			cards.push(card);
+		}
+		documentServer
+			.generateCards(cards, locale)
+			.then((blob) => {
+				let fileName = `${$_("runnercards")}-${locale}-${createId()}.pdf`;
+				if (generate_runners.length == 1) {
+					fileName = `${$_("runnercards")}_${generate_runners[0].firstname}_${
+						generate_runners[0].lastname
+					}-${locale}-${createId()}.pdf`;
+				}
+				download(blob, fileName);
+			})
+			.catch((err) => {});
+	}
+
+	async function generateTeamCards(locale) {
+		toast.loading($_("generating-pdfs"));
+		let count = 0;
+		const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+		for (const t of generate_teams) {
+			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+				t.id
+			);
+			let cards = [];
+			for (let runner of runners) {
+				let card = current_cards.find((c) => c.runner?.id == runner.id);
+				if (!card) {
+					card = await RunnerCardService.runnerCardControllerPost({
+						runner: runner.id,
+					});
+				}
+				cards.push(card);
+			}
+			documentServer
+				.generateCards(cards, locale)
+				.then((blob) => {
+					download(
+						blob,
+						`${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+		}
+	}
+
+	async function generateOrgCards(locale) {
+		toast.loading($_("generating-pdfs"));
+		const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+		let count = 0;
+		let count_orgs = 0;
+		for (const o of generate_orgs) {
+			count_orgs++;
+			let count = 0;
+			let runners =
+				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+					o.id,
+					true
+				);
+			let cards = [];
+			for (let runner of runners) {
+				let card = current_cards.find((c) => c.runner?.id == runner.id);
+				if (!card) {
+					card = await RunnerCardService.runnerCardControllerPost({
+						runner: runner.id,
+					});
+				}
+				cards.push(card);
+			}
+			await documentServer
+				.generateCards(cards, locale)
+				.then((blob) => {
+					download(
+						blob,
+						`${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+			for (const t of o.teams) {
+				count++;
+				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+					t.id
+				);
+				let cards = [];
+				for (let runner of runners) {
+					let card = current_cards.find((c) => c.runner?.id == runner.id);
+					if (!card) {
+						card = await RunnerCardService.runnerCardControllerPost({
+							runner: runner.id,
+						});
+					}
+					cards.push(card);
+				}
+				await documentServer
+					.generateCards(cards, locale)
+					.then((blob) => {
+						download(
+							blob,
+							`${$_("runnercards")}_${o.name}_${
+								t.name
+							}-${locale}-${createId()}.pdf`
+						);
+					})
+					.catch((err) => {});
+			}
+		}
+	}
 </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"
-                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>
+	<button
+		on:click={() => {
+			generateRunnerCards("de");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-runnercards")}: DE
+	</button>
+	<button
+		on:click={() => {
+			generateRunnerCards("en");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-runnercards")}: EN
+	</button>
 {/if}

src/components/pdf_generation/GenerateRunnerCertificates.svelte

@@ -1,331 +1,175 @@
 <script>
-    import { _ } from "svelte-i18n";
-    import {
-        DonationService,
-        RunnerTeamService,
-        RunnerOrganizationService
-    } from "@odit/lfk-client-js";
-    import Toastify from "toastify-js";
-    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;
-        }
-    });
+	import { _ } from "svelte-i18n";
+	import {
+		DonationService,
+		RunnerTeamService,
+		RunnerOrganizationService,
+	} from "@odit/lfk-client-js";
+	import { init } from "@paralleldrive/cuid2";
+	import toast from "svelte-french-toast";
+	import DocumentServer from "./DocumentServer";
+	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+	const documentServer = new DocumentServer(
+		config.baseurl_documentserver,
+		config.documentserver_key
+	);
 
-    function generateCertificates(locale) {
-        certificates_dropdown_open = false;
+	export let certificates_show = false;
+	export let generate_runners = [];
+	export let generate_orgs = [];
+	export let generate_teams = [];
 
-        if (generate_orgs.length > 0) {
-            generateOrgCertificates(locale);
-        } else if (generate_teams.length > 0) {
-            generateTeamCertificates(locale);
-        } else {
-            generateRunnerCertificates(locale);
-        }
-    }
+	function generateCertificates(locale) {
+		if (generate_orgs.length > 0) {
+			generateOrgCertificates(locale);
+		} else if (generate_teams.length > 0) {
+			generateTeamCertificates(locale);
+		} else {
+			generateRunnerCertificates(locale);
+		}
+	}
+	function download(blob, fileName) {
+		const url = window.URL.createObjectURL(blob);
+		let a = document.createElement("a");
+		a.href = url;
+		a.download = fileName;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+		toast.dismiss();
+		toast.success($_("pdf-successfully-generated"));
+	}
 
-    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.find((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) => {
-                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}.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 generateRunnerCertificates(locale) {
+		toast.loading($_("generating-pdf"));
+		const current_donations =
+			(await DonationService.donationControllerGetAll()) || [];
+		let certificateRunners = [];
+		for (let runner of generate_runners) {
+			runner.distanceDonations =
+				current_donations.filter((d) => d.runner?.id == runner.id) || [];
+			certificateRunners.push(runner);
+		}
+		documentServer
+			.generateCertificates(certificateRunners, locale)
+			.then((blob) => {
+				let fileName = `${$_("certificates")}-${locale}.pdf`;
+				if (generate_runners.length == 1) {
+					fileName = `${$_("certificates")}_${
+						generate_runners[0].firstname
+					}_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
+				}
+				download(blob, fileName);
+			})
+			.catch((err) => {});
+	}
 
-    async function generateTeamCertificates(locale) {
-        const toast = Toastify({
-            text: $_("generating-pdfs"),
-            duration: -1,
-        }).showToast();
-        let count = 0;
-        const current_donations = (await DonationService.donationControllerGetAll()) || [];
-        for (const t of generate_teams) {
-            const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-                t.id
-                );
-            let certificateRunners = [];
-            for (let runner of runners) {
-                runner.distanceDonations = current_donations.find((d) => d.runner?.id == runner.id) || [];
-                certificateRunners.push(runner);
-            }
-            fetch(
-                `${config.baseurl_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}.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 generateTeamCertificates(locale) {
+		toast.loading($_("generating-pdfs"));
+		let count = 0;
+		const current_donations =
+			(await DonationService.donationControllerGetAll()) || [];
+		for (const t of generate_teams) {
+			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+				t.id
+			);
+			let certificateRunners = [];
+			for (let runner of runners) {
+				runner.distanceDonations =
+					current_donations.filter((d) => d.runner?.id == runner.id) || [];
+				certificateRunners.push(runner);
+			}
+			documentServer
+				.generateCertificates(certificateRunners, locale)
+				.then((blob) => {
+					count++;
+					download(
+						blob,
+						`${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+		}
+	}
 
-    async function generateOrgCertificates(locale) {
-        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.find((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}_direct-${locale}.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.find((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}.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) => {});
-            }
-        }
-    }
+	async function generateOrgCertificates(locale) {
+		toast.loading($_("generating-pdfs"));
+		const current_donations =
+			(await DonationService.donationControllerGetAll()) || [];
+		let count = 0;
+		let count_orgs = 0;
+		for (const o of generate_orgs) {
+			count_orgs++;
+			let count = 0;
+			let runners =
+				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+					o.id,
+					true
+				);
+			let certificateRunners = [];
+			for (let runner of runners) {
+				runner.distanceDonations =
+					current_donations.filter((d) => d.runner?.id == runner.id) || [];
+				certificateRunners.push(runner);
+			}
+			await documentServer
+				.generateCertificates(certificateRunners, locale)
+				.then((blob) => {
+					download(
+						blob,
+						`${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+			for (const t of o.teams) {
+				count++;
+				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+					t.id
+				);
+				let certificateRunners = [];
+				for (let runner of runners) {
+					runner.distanceDonations =
+						current_donations.filter((d) => d.runner?.id == runner.id) || [];
+					certificateRunners.push(runner);
+				}
+				await documentServer
+					.generateCertificates(certificateRunners, locale)
+					.then((blob) => {
+						download(
+							blob,
+							`${$_("certificates")}_${o.name}_${
+								t.name
+							}-${locale}-${createId()}.pdf`
+						);
+						if (
+							count === o.teams.length &&
+							count_orgs === generate_orgs.length
+						) {
+							toast.dismiss();
+							toast.success($_("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"
-                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>
+	<button
+		on:click={() => {
+			generateCertificates("de");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-runner-certificates")}: DE
+	</button>
+	<button
+		on:click={() => {
+			generateCertificates("en");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-runner-certificates")}: EN
+	</button>
 {/if}

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -1,306 +1,138 @@
 <script>
-    import { getLocaleFromNavigator, _ } from "svelte-i18n";
-    import {
-        RunnerOrganizationService,
-        RunnerTeamService,
-    } from "@odit/lfk-client-js";
-    import Toastify from "toastify-js";
-    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;
-        }
-    });
+	import { _ } from "svelte-i18n";
+	import {
+		RunnerOrganizationService,
+		RunnerTeamService,
+	} from "@odit/lfk-client-js";
+	import DocumentServer from "./DocumentServer";
+	import { init } from "@paralleldrive/cuid2";
+	import toast from "svelte-french-toast";
+	const createId = init({ length: 10, fingerprint: "lfk-frontend" });
+	const documentServer = new DocumentServer(
+		config.baseurl_documentserver,
+		config.documentserver_key
+	);
 
-    function generateSponsoringContract(locale) {
-        sponsoring_contracts_download_open = false;
+	export let sponsoring_contracts_show = false;
+	export let generate_runners = [];
+	export let generate_orgs = [];
+	export let generate_teams = [];
 
-        if (generate_orgs.length > 0) {
-            generateOrgContracts(locale);
-        } else if (generate_teams.length > 0) {
-            generateTeamContracts(locale);
-        } else {
-            generateRunnerContracts(locale);
-        }
-    }
+	function generateSponsoringContract(locale) {
+		if (generate_orgs.length > 0) {
+			generateOrgContracts(locale);
+		} else if (generate_teams.length > 0) {
+			generateTeamContracts(locale);
+		} else {
+			generateRunnerContracts(locale);
+		}
+	}
+	function download(blob, fileName) {
+		const url = window.URL.createObjectURL(blob);
+		let a = document.createElement("a");
+		a.href = url;
+		a.download = fileName;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+		toast.dismiss();
+		toast.success($_("pdf-successfully-generated"));
+	}
 
-    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}.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 generateTeamContracts(locale) {
+		toast.loading($_("generating-pdfs"));
+		let count = 0;
+		for (const t of generate_teams) {
+			count++;
+			const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+				t.id
+			);
+			documentServer
+				.generateContracts(runners, locale)
+				.then((blob) => {
+					download(
+						blob,
+						`${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+		}
+	}
 
-    async function generateOrgContracts(locale) {
-        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}.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}.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) => {});
-            }
-        }
-    }
+	async function generateOrgContracts(locale) {
+		toast.loading($_("generating-pdf"));
+		let count_orgs = 0;
+		for (const o of generate_orgs) {
+			count_orgs++;
+			let count = 0;
+			let runners =
+				await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+					o.id,
+					true
+				);
+			await documentServer
+				.generateContracts(runners, locale)
+				.then((blob) => {
+					download(
+						blob,
+						`${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`
+					);
+				})
+				.catch((err) => {});
+			for (const t of o.teams) {
+				count++;
+				let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+					t.id
+				);
+				await documentServer
+					.generateContracts(runners, locale)
+					.then((blob) => {
+						download(
+							blob,
+							`${$_("sponsorings")}_${o.name}_${
+								t.name
+							}-${locale}-${createId()}.pdf`
+						);
+					})
+					.catch((err) => {});
+			}
+		}
+	}
 
-    function generateRunnerContracts(locale) {
-        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}.pdf`;
-                }
-                a.download = `${$_('sponsorings')}-${locale}.pdf`;
-                document.body.appendChild(a);
-                a.click();
-                a.remove();
-                toast.hideToast();
-                Toastify({
-                    text: $_("pdf-successfully-generated"),
-                    duration: 3500,
-                    backgroundColor:
-                        "linear-gradient(to right, #00b09b, #96c93d)",
-                }).showToast();
-            })
-            .catch((err) => {
-                console.error(err);
-            });
-    }
+	function generateRunnerContracts(locale) {
+		toast.loading($_("generating-pdf"));
+		documentServer
+			.generateContracts(generate_runners, locale)
+			.then((blob) => {
+				let fileName = `${$_("sponsorings")}-${locale}-${createId()}.pdf`;
+				if (generate_runners.length == 1) {
+					fileName = `${$_("sponsorings")}_${generate_runners[0].firstname}_${
+						generate_runners[0].lastname
+					}-${locale}-${createId()}.pdf`;
+				}
+				download(blob, fileName);
+			})
+			.catch((err) => {
+				console.error(err);
+			});
+	}
 </script>
 
 {#if sponsoring_contracts_show}
-    <div id="sponsoring:dropdown" class="relative inline-block">
-        <div>
-            <button
-                on:click={() => {
-                    sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-                }}
-                type="button"
-                class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-                id="options-menu"
-                aria-haspopup="true"
-                aria-expanded="true">
-                {$_('generate-sponsoring-contracts')}
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    class="-mr-1 ml-2 h-5 w-5"><path
-                        fill="none"
-                        d="M0 0h24v24H0z" />
-                    <path
-                        fill="currentColor"
-                        d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-            </button>
-        </div>
-        {#if sponsoring_contracts_download_open}
-            <div
-                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-                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>
+	<button
+		on:click={() => {
+			generateSponsoringContract("de");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-sponsoring-contracts")}: DE
+	</button>
+	<button
+		on:click={() => {
+			generateSponsoringContract("en");
+		}}
+		class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm mb-1 lg:mb-0"
+	>
+		{$_("generate-sponsoring-contracts")}: EN
+	</button>
 {/if}

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>

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

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>

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>

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,74 +482,161 @@
               <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>

src/components/presets/DataTable.svelte

@@ -1,30 +0,0 @@
-<script>
-  import { _, json } from "svelte-i18n";
-  import { getlang } from "./datatable_i18n";
-  import { Grid } from "gridjs";
-  //
-  let table;
-  const datatable = new Grid({
-    columns: ["Name", "Email", "Phone Number"],
-    language: getlang($json("datatable")),
-    sort: true,
-    search: { enabled: true },
-    data: [
-      ["John", "john@example.com", "(353) 01 222 3333"],
-      ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
-      ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
-      ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
-      ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
-    ],
-    pagination: {
-      enabled: true,
-      limit: 2,
-      summary: false,
-    },
-  });
-  setTimeout(() => {
-    datatable.render(table);
-  }, 0);
-</script>
-
-<div bind:this={table} />