feat(webapp): add admin settings

2023-06-25 15:34:09 +02:00 · 2023-06-25 15:34:09 +02:00 · 23aad9b667
commit 23aad9b667
parent c2207e337a
28 changed files with 606 additions and 320 deletions
--- a/server/pb_schema.json
+++ b/server/pb_schema.json
@ -251,7 +251,7 @@
    "system": false,
    "schema": [
      {
-        "id": "gw7zo5sb",
+        "id": "cuolaytr",
        "name": "accountNumber",
        "type": "text",
        "system": false,
@ -263,7 +263,7 @@
        }
      },
      {
-        "id": "44jwqwg4",
+        "id": "4ogve0z2",
        "name": "name",
        "type": "json",
        "system": false,
@ -271,7 +271,7 @@
        "options": {}
      },
      {
-        "id": "dwqo9wuf",
+        "id": "qzg3mjed",
        "name": "lastCheckIn",
        "type": "date",
        "system": false,
@ -282,7 +282,7 @@
        }
      },
      {
-        "id": "etoowqoa",
+        "id": "10gtuloy",
        "name": "balance",
        "type": "json",
        "system": false,
@ -299,5 +299,53 @@
    "options": {
      "query": "SELECT\n  a.id AS id,\n  a.accountNumber AS accountNumber,\n  (a.firstName || ' ' || a.lastName) AS name,\n  a.lastCheckIn AS lastCheckIn,\n  SUM(t.amount) AS balance\nFROM\n  accounts AS a\nLEFT JOIN\n  transactions AS t\nON\n  a.id = t.account\nGROUP BY\n  a.id"
    }
+  },
+  {
+    "id": "t4gewf713jqhz3i",
+    "name": "settings",
+    "type": "base",
+    "system": false,
+    "schema": [
+      {
+        "id": "z7pmr7wm",
+        "name": "minWage",
+        "type": "number",
+        "system": false,
+        "required": true,
+        "options": {
+          "min": 0,
+          "max": null
+        }
+      },
+      {
+        "id": "7wzv9qum",
+        "name": "incomeTax",
+        "type": "number",
+        "system": false,
+        "required": true,
+        "options": {
+          "min": 0,
+          "max": null
+        }
+      },
+      {
+        "id": "dawtvakx",
+        "name": "maxWageFactor",
+        "type": "number",
+        "system": false,
+        "required": true,
+        "options": {
+          "min": 0,
+          "max": null
+        }
+      }
+    ],
+    "indexes": [],
+    "listRule": null,
+    "viewRule": null,
+    "createRule": null,
+    "updateRule": null,
+    "deleteRule": null,
+    "options": {}
  }
 ]
--- a/webapp/.eslintrc.js
+++ b/webapp/.eslintrc.js
@ -53,7 +53,7 @@ module.exports = {
      'asyncArrow': 'always',
    }],
    'space-in-parens': ['error', 'never'],
-    'spaced-comment': ['error', 'always'],
+    'spaced-comment': ['error', 'always', { 'markers': ['/'] }],
  },
  overrides: [
    {
--- a/webapp/package.json
+++ b/webapp/package.json
@ -13,32 +13,32 @@
  },
  "dependencies": {
    "@heroicons/vue": "^2.0.18",
-    "@vueuse/core": "^10.1.2",
+    "@vueuse/core": "^10.2.0",
    "canvas-confetti": "^1.6.0",
-    "daisyui": "^3.0.3",
-    "pocketbase": "^0.15.1",
+    "daisyui": "^3.1.6",
+    "pocketbase": "^0.15.2",
    "vue": "^3.3.4",
    "vue-router": "4.2.2"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.9",
    "@types/canvas-confetti": "^1.6.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.14",
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
    "eslint-plugin-tailwindcss": "^3.12.1",
-    "eslint-plugin-vue": "^9.14.1",
+    "eslint-plugin-vue": "^9.15.1",
    "eslint-plugin-vue-scoped-css": "^2.4.0",
-    "pocketbase-typegen": "^1.1.9",
+    "pocketbase-typegen": "^1.1.10",
    "postcss": "^8.4.24",
-    "sass": "^1.62.1",
+    "sass": "^1.63.6",
    "svgo": "^3.0.2",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.3",
    "vite": "^4.3.9",
-    "vue-eslint-parser": "^9.3.0",
-    "vue-tsc": "^1.6.5"
+    "vue-eslint-parser": "^9.3.1",
+    "vue-tsc": "^1.8.1"
  }
 }
--- a/webapp/pnpm-lock.yaml
+++ b/webapp/pnpm-lock.yaml
@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'

 settings:
  autoInstallPeers: true
@ -9,17 +9,17 @@ dependencies:
    specifier: ^2.0.18
    version: 2.0.18(vue@3.3.4)
  '@vueuse/core':
-    specifier: ^10.1.2
-    version: 10.1.2(vue@3.3.4)
+    specifier: ^10.2.0
+    version: 10.2.0(vue@3.3.4)
  canvas-confetti:
    specifier: ^1.6.0
    version: 1.6.0
  daisyui:
-    specifier: ^3.0.3
-    version: 3.0.3(postcss@8.4.24)
+    specifier: ^3.1.6
+    version: 3.1.6(postcss@8.4.24)
  pocketbase:
-    specifier: ^0.15.1
-    version: 0.15.1
+    specifier: ^0.15.2
+    version: 0.15.2
  vue:
    specifier: ^3.3.4
    version: 3.3.4
@ -35,11 +35,11 @@ devDependencies:
    specifier: ^1.6.0
    version: 1.6.0
  '@typescript-eslint/eslint-plugin':
-    specifier: ^5.59.8
-    version: 5.59.8(@typescript-eslint/parser@5.59.8)(eslint@8.42.0)(typescript@5.1.3)
+    specifier: ^5.60.0
+    version: 5.60.0(@typescript-eslint/parser@5.60.0)(eslint@8.43.0)(typescript@5.1.3)
  '@typescript-eslint/parser':
-    specifier: ^5.59.8
-    version: 5.59.8(eslint@8.42.0)(typescript@5.1.3)
+    specifier: ^5.60.0
+    version: 5.60.0(eslint@8.43.0)(typescript@5.1.3)
  '@vitejs/plugin-vue':
    specifier: ^4.2.3
    version: 4.2.3(vite@4.3.9)(vue@3.3.4)
@ -47,26 +47,26 @@ devDependencies:
    specifier: ^10.4.14
    version: 10.4.14(postcss@8.4.24)
  eslint:
-    specifier: ^8.42.0
-    version: 8.42.0
+    specifier: ^8.43.0
+    version: 8.43.0
  eslint-plugin-tailwindcss:
    specifier: ^3.12.1
    version: 3.12.1(tailwindcss@3.3.2)
  eslint-plugin-vue:
-    specifier: ^9.14.1
-    version: 9.14.1(eslint@8.42.0)
+    specifier: ^9.15.1
+    version: 9.15.1(eslint@8.43.0)
  eslint-plugin-vue-scoped-css:
    specifier: ^2.4.0
-    version: 2.4.0(eslint@8.42.0)(vue-eslint-parser@9.3.0)
+    version: 2.4.0(eslint@8.43.0)(vue-eslint-parser@9.3.1)
  pocketbase-typegen:
-    specifier: ^1.1.9
-    version: 1.1.9
+    specifier: ^1.1.10
+    version: 1.1.10
  postcss:
    specifier: ^8.4.24
    version: 8.4.24
  sass:
-    specifier: ^1.62.1
-    version: 1.62.1
+    specifier: ^1.63.6
+    version: 1.63.6
  svgo:
    specifier: ^3.0.2
    version: 3.0.2
@ -78,13 +78,13 @@ devDependencies:
    version: 5.1.3
  vite:
    specifier: ^4.3.9
-    version: 4.3.9(sass@1.62.1)
+    version: 4.3.9(sass@1.63.6)
  vue-eslint-parser:
-    specifier: ^9.3.0
-    version: 9.3.0(eslint@8.42.0)
+    specifier: ^9.3.1
+    version: 9.3.1(eslint@8.43.0)
  vue-tsc:
-    specifier: ^1.6.5
-    version: 1.7.0(typescript@5.1.3)
+    specifier: ^1.8.1
+    version: 1.8.1(typescript@5.1.3)

 packages:

@ -308,13 +308,13 @@ packages:
    dev: true
    optional: true

-  /@eslint-community/eslint-utils@4.4.0(eslint@8.42.0):
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.43.0):
    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
    dependencies:
-      eslint: 8.42.0
+      eslint: 8.43.0
      eslint-visitor-keys: 3.4.1
    dev: true

@ -340,8 +340,8 @@ packages:
      - supports-color
    dev: true

-  /@eslint/js@8.42.0:
-    resolution: {integrity: sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==}
+  /@eslint/js@8.43.0:
+    resolution: {integrity: sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

@ -499,8 +499,8 @@ packages:
    resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
    dev: false

-  /@typescript-eslint/eslint-plugin@5.59.8(@typescript-eslint/parser@5.59.8)(eslint@8.42.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-JDMOmhXteJ4WVKOiHXGCoB96ADWg9q7efPWHRViT/f09bA8XOMLAVHHju3l0MkZnG1izaWXYmgvQcUjTRcpShQ==}
+  /@typescript-eslint/eslint-plugin@5.60.0(@typescript-eslint/parser@5.60.0)(eslint@8.43.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      '@typescript-eslint/parser': ^5.0.0
@ -511,12 +511,12 @@ packages:
        optional: true
    dependencies:
      '@eslint-community/regexpp': 4.5.1
-      '@typescript-eslint/parser': 5.59.8(eslint@8.42.0)(typescript@5.1.3)
-      '@typescript-eslint/scope-manager': 5.59.8
-      '@typescript-eslint/type-utils': 5.59.8(eslint@8.42.0)(typescript@5.1.3)
-      '@typescript-eslint/utils': 5.59.8(eslint@8.42.0)(typescript@5.1.3)
+      '@typescript-eslint/parser': 5.60.0(eslint@8.43.0)(typescript@5.1.3)
+      '@typescript-eslint/scope-manager': 5.60.0
+      '@typescript-eslint/type-utils': 5.60.0(eslint@8.43.0)(typescript@5.1.3)
+      '@typescript-eslint/utils': 5.60.0(eslint@8.43.0)(typescript@5.1.3)
      debug: 4.3.4
-      eslint: 8.42.0
+      eslint: 8.43.0
      grapheme-splitter: 1.0.4
      ignore: 5.2.0
      natural-compare-lite: 1.4.0
@ -527,8 +527,8 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/parser@5.59.8(eslint@8.42.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-AnR19RjJcpjoeGojmwZtCwBX/RidqDZtzcbG3xHrmz0aHHoOcbWnpDllenRDmDvsV0RQ6+tbb09/kyc+UT9Orw==}
+  /@typescript-eslint/parser@5.60.0(eslint@8.43.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-jBONcBsDJ9UoTWrARkRRCgDz6wUggmH5RpQVlt7BimSwaTkTjwypGzKORXbR4/2Hqjk9hgwlon2rVQAjWNpkyQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@ -537,26 +537,26 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/scope-manager': 5.59.8
-      '@typescript-eslint/types': 5.59.8
-      '@typescript-eslint/typescript-estree': 5.59.8(typescript@5.1.3)
+      '@typescript-eslint/scope-manager': 5.60.0
+      '@typescript-eslint/types': 5.60.0
+      '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.1.3)
      debug: 4.3.4
-      eslint: 8.42.0
+      eslint: 8.43.0
      typescript: 5.1.3
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /@typescript-eslint/scope-manager@5.59.8:
-    resolution: {integrity: sha512-/w08ndCYI8gxGf+9zKf1vtx/16y8MHrZs5/tnjHhMLNSixuNcJavSX4wAiPf4aS5x41Es9YPCn44MIe4cxIlig==}
+  /@typescript-eslint/scope-manager@5.60.0:
+    resolution: {integrity: sha512-hakuzcxPwXi2ihf9WQu1BbRj1e/Pd8ZZwVTG9kfbxAMZstKz8/9OoexIwnmLzShtsdap5U/CoQGRCWlSuPbYxQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': 5.59.8
-      '@typescript-eslint/visitor-keys': 5.59.8
+      '@typescript-eslint/types': 5.60.0
+      '@typescript-eslint/visitor-keys': 5.60.0
    dev: true

-  /@typescript-eslint/type-utils@5.59.8(eslint@8.42.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-+5M518uEIHFBy3FnyqZUF3BMP+AXnYn4oyH8RF012+e7/msMY98FhGL5SrN29NQ9xDgvqCgYnsOiKp1VjZ/fpA==}
+  /@typescript-eslint/type-utils@5.60.0(eslint@8.43.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-X7NsRQddORMYRFH7FWo6sA9Y/zbJ8s1x1RIAtnlj6YprbToTiQnM6vxcMu7iYhdunmoC0rUWlca13D5DVHkK2g==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: '*'
@ -565,23 +565,23 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/typescript-estree': 5.59.8(typescript@5.1.3)
-      '@typescript-eslint/utils': 5.59.8(eslint@8.42.0)(typescript@5.1.3)
+      '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.1.3)
+      '@typescript-eslint/utils': 5.60.0(eslint@8.43.0)(typescript@5.1.3)
      debug: 4.3.4
-      eslint: 8.42.0
+      eslint: 8.43.0
      tsutils: 3.21.0(typescript@5.1.3)
      typescript: 5.1.3
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /@typescript-eslint/types@5.59.8:
-    resolution: {integrity: sha512-+uWuOhBTj/L6awoWIg0BlWy0u9TyFpCHrAuQ5bNfxDaZ1Ppb3mx6tUigc74LHcbHpOHuOTOJrBoAnhdHdaea1w==}
+  /@typescript-eslint/types@5.60.0:
+    resolution: {integrity: sha512-ascOuoCpNZBccFVNJRSC6rPq4EmJ2NkuoKnd6LDNyAQmdDnziAtxbCGWCbefG1CNzmDvd05zO36AmB7H8RzKPA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  /@typescript-eslint/typescript-estree@5.59.8(typescript@5.1.3):
-    resolution: {integrity: sha512-Jy/lPSDJGNow14vYu6IrW790p7HIf/SOV1Bb6lZ7NUkLc2iB2Z9elESmsaUtLw8kVqogSbtLH9tut5GCX1RLDg==}
+  /@typescript-eslint/typescript-estree@5.60.0(typescript@5.1.3):
+    resolution: {integrity: sha512-R43thAuwarC99SnvrBmh26tc7F6sPa2B3evkXp/8q954kYL6Ro56AwASYWtEEi+4j09GbiNAHqYwNNZuNlARGQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      typescript: '*'
@ -589,8 +589,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/types': 5.59.8
-      '@typescript-eslint/visitor-keys': 5.59.8
+      '@typescript-eslint/types': 5.60.0
+      '@typescript-eslint/visitor-keys': 5.60.0
      debug: 4.3.4
      globby: 11.1.0
      is-glob: 4.0.3
@ -601,19 +601,19 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/utils@5.59.8(eslint@8.42.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-Tr65630KysnNn9f9G7ROF3w1b5/7f6QVCJ+WK9nhIocWmx9F+TmCAcglF26Vm7z8KCTwoKcNEBZrhlklla3CKg==}
+  /@typescript-eslint/utils@5.60.0(eslint@8.43.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.42.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
      '@types/json-schema': 7.0.11
      '@types/semver': 7.5.0
-      '@typescript-eslint/scope-manager': 5.59.8
-      '@typescript-eslint/types': 5.59.8
-      '@typescript-eslint/typescript-estree': 5.59.8(typescript@5.1.3)
-      eslint: 8.42.0
+      '@typescript-eslint/scope-manager': 5.60.0
+      '@typescript-eslint/types': 5.60.0
+      '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.1.3)
+      eslint: 8.43.0
      eslint-scope: 5.1.1
      semver: 7.5.1
    transitivePeerDependencies:
@ -621,11 +621,11 @@ packages:
      - typescript
    dev: true

-  /@typescript-eslint/visitor-keys@5.59.8:
-    resolution: {integrity: sha512-pJhi2ms0x0xgloT7xYabil3SGGlojNNKjK/q6dB3Ey0uJLMjK2UDGJvHieiyJVW/7C3KI+Z4Q3pEHkm4ejA+xQ==}
+  /@typescript-eslint/visitor-keys@5.60.0:
+    resolution: {integrity: sha512-wm9Uz71SbCyhUKgcaPRauBdTegUyY/ZWl8gLwD/i/ybJqscrrdVSFImpvUz16BLPChIeKBK5Fa9s6KDQjsjyWw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': 5.59.8
+      '@typescript-eslint/types': 5.60.0
      eslint-visitor-keys: 3.4.1
    dev: true

@ -636,29 +636,26 @@ packages:
      vite: ^4.0.0
      vue: ^3.2.25
    dependencies:
-      vite: 4.3.9(sass@1.62.1)
+      vite: 4.3.9(sass@1.63.6)
      vue: 3.3.4
    dev: true

-  /@volar/language-core@1.5.4:
-    resolution: {integrity: sha512-l0pmKb/DPPjcD2IUwK3myYuTQW7qLLfXYBHKSGVZ7cnC168V55ecpddTA5a9AYsbCFSWx8neRj5r4JWq93QpZQ==}
+  /@volar/language-core@1.7.8:
+    resolution: {integrity: sha512-TPklg4c2e/f1xB/MGZEiQc3AWG+dH64ZfBlYjFB8nNaWJt4Z4k+IHBhmaP52APG+5PHFerwiWI9oF002RrRTPA==}
    dependencies:
-      '@volar/source-map': 1.5.4
+      '@volar/source-map': 1.7.8
    dev: true

-  /@volar/source-map@1.5.4:
-    resolution: {integrity: sha512-BkvouUYFFLPxof2q6kKAZtyUKRqlS2O/WZKmzTVfPIo5uqqmZTR0+SwN1Xa1qpuezMVUOg61wkqmWP7cY2ezJg==}
+  /@volar/source-map@1.7.8:
+    resolution: {integrity: sha512-g2dtC2kOghvfzMDWeODIo4HO1Ml4hxzPTZyAFDz+YhRF9HjZYJSCaWaVuPZ+z0kY+T2daOHYA10GdrWQ5q0teA==}
    dependencies:
-      muggle-string: 0.2.2
+      muggle-string: 0.3.1
    dev: true

-  /@volar/typescript@1.5.4(typescript@5.1.3):
-    resolution: {integrity: sha512-mVJJ7ZGY2RBDj6PAircUvLBLbFJJRNmqN5IYNpIUyFwnxdKxn1t3NhxaLYSPi/A0gdMDbCBtq0a4Azc0IuIOfQ==}
-    peerDependencies:
-      typescript: '*'
+  /@volar/typescript@1.7.8:
+    resolution: {integrity: sha512-NDcI5ZQcdr8kgxzMQrhSSWIM8Tl0MbMFrkvJPTjfm2rdAQZPFT8zv3LrEW9Fqh0e9z2YbCry7jr4a/GShBqeDA==}
    dependencies:
-      '@volar/language-core': 1.5.4
-      typescript: 5.1.3
+      '@volar/language-core': 1.7.8
    dev: true

  /@vue/compiler-core@3.3.4:
@ -699,17 +696,22 @@ packages:
    resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
    dev: false

-  /@vue/language-core@1.7.0:
-    resolution: {integrity: sha512-gaf2ZzA7TbbNCpmCUyM3k6ApPUf1xVINH31g5SC0t2VBriBF6+io2e4tNAd0q4kIm0NLM/yhIezFs2281juBng==}
+  /@vue/language-core@1.8.1(typescript@5.1.3):
+    resolution: {integrity: sha512-pumv3k4J7P58hVh4YGRM9Qz3HaAr4TlFWM9bnVOkZ/2K9o2CK1lAP2y9Jw+Z0+mNL4F2uWQqnAPzj3seLyfpDA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
    dependencies:
-      '@volar/language-core': 1.5.4
-      '@volar/source-map': 1.5.4
+      '@volar/language-core': 1.7.8
+      '@volar/source-map': 1.7.8
      '@vue/compiler-dom': 3.3.4
-      '@vue/compiler-sfc': 3.3.4
      '@vue/reactivity': 3.3.4
      '@vue/shared': 3.3.4
      minimatch: 9.0.1
-      muggle-string: 0.2.2
+      muggle-string: 0.3.1
+      typescript: 5.1.3
      vue-template-compiler: 2.7.14
    dev: true

@ -752,34 +754,33 @@ packages:
  /@vue/shared@3.3.4:
    resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}

-  /@vue/typescript@1.7.0(typescript@5.1.3):
-    resolution: {integrity: sha512-/EcwHTezjY8DknfO/+9S04s9lXQWl7dLDJMTNjgEAWUrgJILN9cbooQ0UfTqC5Z1PPXBHHtdFyqKajrhTlSJ4A==}
-    peerDependencies:
-      typescript: '*'
+  /@vue/typescript@1.8.1(typescript@5.1.3):
+    resolution: {integrity: sha512-nQpo55j/roie8heCfqyXHnyayqD5+p4/0fzfxH4ZuHf7NSBQS791PNv7ztp2CCOjnGAiaiCMdtC9rc6oriyPUg==}
    dependencies:
-      '@volar/typescript': 1.5.4(typescript@5.1.3)
-      '@vue/language-core': 1.7.0
-      typescript: 5.1.3
+      '@volar/typescript': 1.7.8
+      '@vue/language-core': 1.8.1(typescript@5.1.3)
+    transitivePeerDependencies:
+      - typescript
    dev: true

-  /@vueuse/core@10.1.2(vue@3.3.4):
-    resolution: {integrity: sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==}
+  /@vueuse/core@10.2.0(vue@3.3.4):
+    resolution: {integrity: sha512-aHBnoCteIS3hFu7ZZkVB93SanVDY6t4TIb7XDLxJT/HQdAZz+2RdIEJ8rj5LUoEJr7Damb5+sJmtpCwGez5ozQ==}
    dependencies:
      '@types/web-bluetooth': 0.0.17
-      '@vueuse/metadata': 10.1.2
-      '@vueuse/shared': 10.1.2(vue@3.3.4)
+      '@vueuse/metadata': 10.2.0
+      '@vueuse/shared': 10.2.0(vue@3.3.4)
      vue-demi: 0.14.5(vue@3.3.4)
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
    dev: false

-  /@vueuse/metadata@10.1.2:
-    resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==}
+  /@vueuse/metadata@10.2.0:
+    resolution: {integrity: sha512-IR7Mkq6QSgZ38q/2ZzOt+Zz1OpcEsnwE64WBumDQ+RGKrosFCtUA2zgRrOqDEzPBXrVB+4HhFkwDjQMu0fDBKw==}
    dev: false

-  /@vueuse/shared@10.1.2(vue@3.3.4):
-    resolution: {integrity: sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==}
+  /@vueuse/shared@10.2.0(vue@3.3.4):
+    resolution: {integrity: sha512-dIeA8+g9Av3H5iF4NXR/sft4V6vys76CpZ6hxwj8eMXybXk2WRl3scSsOVi+kQ9SX38COR7AH7WwY83UcuxbSg==}
    dependencies:
      vue-demi: 0.14.5(vue@3.3.4)
    transitivePeerDependencies:
@ -791,14 +792,6 @@ packages:
    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
    dev: true

-  /acorn-jsx@5.3.2(acorn@8.7.1):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.7.1
-    dev: true
-
  /acorn-jsx@5.3.2(acorn@8.8.2):
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@ -807,12 +800,6 @@ packages:
      acorn: 8.8.2
    dev: true

-  /acorn@8.7.1:
-    resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: true
-
  /acorn@8.8.2:
    resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
    engines: {node: '>=0.4.0'}
@ -1182,8 +1169,9 @@ packages:
  /csstype@3.1.2:
    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}

-  /daisyui@3.0.3(postcss@8.4.24):
-    resolution: {integrity: sha512-RSbXsEBj2LonvjOKEI0I64F5xFJrFrthPgxRNeAZKmACQ3NoIoP45lO6UXLW3bm8PVOUGpKf1Br2SWwc1NqnHQ==}
+  /daisyui@3.1.6(postcss@8.4.24):
+    resolution: {integrity: sha512-P/2WUn4ZImEc2IfPSYw3qPCUnnJNju0P6ii0fUqtTURUj0oda6L0tm4EzrUmB2EbqB6grZ9nKHPTSniKaPYp1w==}
+    engines: {node: '>=16.9.0'}
    peerDependencies:
      postcss: ^8
    dependencies:
@ -1371,39 +1359,39 @@ packages:
      tailwindcss: 3.3.2
    dev: true

-  /eslint-plugin-vue-scoped-css@2.4.0(eslint@8.42.0)(vue-eslint-parser@9.3.0):
+  /eslint-plugin-vue-scoped-css@2.4.0(eslint@8.43.0)(vue-eslint-parser@9.3.1):
    resolution: {integrity: sha512-H2GdGyaNuz58gMwJYrPAyok2ZZFklb1wnI4jqLyQZf17gvZeTOpYzCxqhhcT5hBeaCUHhjxU5akCI7A4AtBHew==}
    engines: {node: ^12.22 || ^14.17 || >=16}
    peerDependencies:
      eslint: '>=5.0.0'
      vue-eslint-parser: '>=7.1.0'
    dependencies:
-      eslint: 8.42.0
-      eslint-utils: 3.0.0(eslint@8.42.0)
+      eslint: 8.43.0
+      eslint-utils: 3.0.0(eslint@8.43.0)
      lodash: 4.17.21
      postcss: 8.4.24
      postcss-safe-parser: 6.0.0(postcss@8.4.24)
      postcss-scss: 4.0.4(postcss@8.4.24)
      postcss-selector-parser: 6.0.10
      postcss-styl: 0.12.3
-      vue-eslint-parser: 9.3.0(eslint@8.42.0)
+      vue-eslint-parser: 9.3.1(eslint@8.43.0)
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /eslint-plugin-vue@9.14.1(eslint@8.42.0):
-    resolution: {integrity: sha512-LQazDB1qkNEKejLe/b5a9VfEbtbczcOaui5lQ4Qw0tbRBbQYREyxxOV5BQgNDTqGPs9pxqiEpbMi9ywuIaF7vw==}
+  /eslint-plugin-vue@9.15.1(eslint@8.43.0):
+    resolution: {integrity: sha512-CJE/oZOslvmAR9hf8SClTdQ9JLweghT6JCBQNrT2Iel1uVw0W0OLJxzvPd6CxmABKCvLrtyDnqGV37O7KQv6+A==}
    engines: {node: ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.42.0)
-      eslint: 8.42.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
+      eslint: 8.43.0
      natural-compare: 1.4.0
      nth-check: 2.1.1
-      postcss-selector-parser: 6.0.10
-      semver: 7.3.7
-      vue-eslint-parser: 9.3.0(eslint@8.42.0)
+      postcss-selector-parser: 6.0.13
+      semver: 7.5.1
+      vue-eslint-parser: 9.3.1(eslint@8.43.0)
      xml-name-validator: 4.0.0
    transitivePeerDependencies:
      - supports-color
@ -1417,14 +1405,6 @@ packages:
      estraverse: 4.3.0
    dev: true

-  /eslint-scope@7.1.1:
-    resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: true
-
  /eslint-scope@7.2.0:
    resolution: {integrity: sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -1433,13 +1413,13 @@ packages:
      estraverse: 5.3.0
    dev: true

-  /eslint-utils@3.0.0(eslint@8.42.0):
+  /eslint-utils@3.0.0(eslint@8.43.0):
    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
    peerDependencies:
      eslint: '>=5'
    dependencies:
-      eslint: 8.42.0
+      eslint: 8.43.0
      eslint-visitor-keys: 2.1.0
    dev: true

@ -1448,25 +1428,20 @@ packages:
    engines: {node: '>=10'}
    dev: true

-  /eslint-visitor-keys@3.3.0:
-    resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
  /eslint-visitor-keys@3.4.1:
    resolution: {integrity: sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  /eslint@8.42.0:
-    resolution: {integrity: sha512-ulg9Ms6E1WPf67PHaEY4/6E2tEn5/f7FXGzr3t9cBMugOmf1INYvuUwwh1aXQN4MfJ6a5K2iNwP3w4AColvI9A==}
+  /eslint@8.43.0:
+    resolution: {integrity: sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    hasBin: true
    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.42.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
      '@eslint-community/regexpp': 4.5.1
      '@eslint/eslintrc': 2.0.3
-      '@eslint/js': 8.42.0
+      '@eslint/js': 8.43.0
      '@humanwhocodes/config-array': 0.11.10
      '@humanwhocodes/module-importer': 1.0.1
      '@nodelib/fs.walk': 1.2.8
@ -1506,15 +1481,6 @@ packages:
      - supports-color
    dev: true

-  /espree@9.3.2:
-    resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.7.1
-      acorn-jsx: 5.3.2(acorn@8.7.1)
-      eslint-visitor-keys: 3.4.1
-    dev: true
-
  /espree@9.5.2:
    resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -1524,13 +1490,6 @@ packages:
      eslint-visitor-keys: 3.4.1
    dev: true

-  /esquery@1.4.0:
-    resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==}
-    engines: {node: '>=0.10'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: true
-
  /esquery@1.5.0:
    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
    engines: {node: '>=0.10'}
@ -2136,8 +2095,8 @@ packages:
    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
    dev: true

-  /muggle-string@0.2.2:
-    resolution: {integrity: sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==}
+  /muggle-string@0.3.1:
+    resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
    dev: true

  /mz@2.7.0:
@ -2342,8 +2301,8 @@ packages:
    resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==}
    engines: {node: '>= 6'}

-  /pocketbase-typegen@1.1.9:
-    resolution: {integrity: sha512-eUf9O07zXRW3qMAWSLSonJFum0EKk5X5HlzPC0VyppBnehxc0EgthlX36dJzoTfRNE23gJEXCWrjScT0EfI84g==}
+  /pocketbase-typegen@1.1.10:
+    resolution: {integrity: sha512-aHU43IIJ/ekRpGaKmwKhNgZepKhSaneSgTERfQOtYpotU4YQxstHmpzDKIttnMGD6NUKyegrGipLIjs0GPhqzQ==}
    hasBin: true
    dependencies:
      commander: 9.5.0
@ -2357,8 +2316,8 @@ packages:
      - supports-color
    dev: true

-  /pocketbase@0.15.1:
-    resolution: {integrity: sha512-iOj9bCP7m/kQDhkJZiLXWYNYXwZg+MeCFwJeivM46Uj4QwqzzQPeZH195TPicnj2VwxiSkziVnDNke1Mc9VEaA==}
+  /pocketbase@0.15.2:
+    resolution: {integrity: sha512-dGSwO2j3XqtFMANNNEVh/moRw0ItOraKC1p3J+I0y/tPEfgleCAUptMWhqHrFNS+jM5r21eSS1U48N9/OmHFzA==}
    dev: false

  /postcss-import@15.1.0(postcss@8.4.24):
@ -2566,8 +2525,8 @@ packages:
    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
    dev: true

-  /sass@1.62.1:
-    resolution: {integrity: sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==}
+  /sass@1.63.6:
+    resolution: {integrity: sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==}
    engines: {node: '>=14.0.0'}
    hasBin: true
    dependencies:
@ -2585,14 +2544,6 @@ packages:
    hasBin: true
    dev: true

-  /semver@7.3.7:
-    resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
-    dev: true
-
  /semver@7.5.1:
    resolution: {integrity: sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==}
    engines: {node: '>=10'}
@ -2924,7 +2875,7 @@ packages:
  /util-deprecate@1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}

-  /vite@4.3.9(sass@1.62.1):
+  /vite@4.3.9(sass@1.63.6):
    resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
    engines: {node: ^14.18.0 || >=16.0.0}
    hasBin: true
@ -2952,7 +2903,7 @@ packages:
      esbuild: 0.17.19
      postcss: 8.4.24
      rollup: 3.23.0
-      sass: 1.62.1
+      sass: 1.63.6
    optionalDependencies:
      fsevents: 2.3.2
    dev: true
@ -2972,20 +2923,20 @@ packages:
      vue: 3.3.4
    dev: false

-  /vue-eslint-parser@9.3.0(eslint@8.42.0):
-    resolution: {integrity: sha512-48IxT9d0+wArT1+3wNIy0tascRoywqSUe2E1YalIC1L8jsUGe5aJQItWfRok7DVFGz3UYvzEI7n5wiTXsCMAcQ==}
+  /vue-eslint-parser@9.3.1(eslint@8.43.0):
+    resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
    engines: {node: ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: '>=6.0.0'
    dependencies:
      debug: 4.3.4
-      eslint: 8.42.0
-      eslint-scope: 7.1.1
-      eslint-visitor-keys: 3.3.0
-      espree: 9.3.2
-      esquery: 1.4.0
+      eslint: 8.43.0
+      eslint-scope: 7.2.0
+      eslint-visitor-keys: 3.4.1
+      espree: 9.5.2
+      esquery: 1.5.0
      lodash: 4.17.21
-      semver: 7.3.7
+      semver: 7.5.1
    transitivePeerDependencies:
      - supports-color
    dev: true
@ -3006,14 +2957,14 @@ packages:
      he: 1.2.0
    dev: true

-  /vue-tsc@1.7.0(typescript@5.1.3):
-    resolution: {integrity: sha512-WXRQ6StfLrXHq1uIe29o9OOKh6aXR2LdxT7z951ZZzEJj3y+dCoaqCOT9NVtvCK5C2m6PbFKRx5sG7t/jbtmjg==}
+  /vue-tsc@1.8.1(typescript@5.1.3):
+    resolution: {integrity: sha512-GxBQrcb0Qvyrj1uZqnTXQyWbXdNDRY2MTa+r7ESgjhf+WzBSdxZfkS3KD/C3WhKYG+aN8hf44Hp5Gqzb6PehAA==}
    hasBin: true
    peerDependencies:
      typescript: '*'
    dependencies:
-      '@vue/language-core': 1.7.0
-      '@vue/typescript': 1.7.0(typescript@5.1.3)
+      '@vue/language-core': 1.8.1(typescript@5.1.3)
+      '@vue/typescript': 1.8.1(typescript@5.1.3)
      semver: 7.5.1
      typescript: 5.1.3
    dev: true
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@ -12,22 +12,26 @@ import { INavigationEntry } from './interfaces/navigation-entry.interface';
 import {
  IdentificationIcon,
  BuildingLibraryIcon,
-  ArrowRightOnRectangleIcon,
  MusicalNoteIcon,
-  ArrowTrendingUpIcon,
-  UserIcon,
+  AdjustmentsHorizontalIcon,
+  BriefcaseIcon,
 } from '@heroicons/vue/24/outline';
 import MoleculeNavigationDrawer from './components/molecules/MoleculeNavigationDrawer.vue';

 const drawerId = 'default-drawer';
 const navigationEntries: INavigationEntry[] = [
  {
-    name: 'Stammdaten',
-    icon: UserIcon,
-    to: '/data',
+    name: 'Staatsportal',
+    icon: AdjustmentsHorizontalIcon,
+    to: '/settings',
  },
  {
-    name: 'Einstempeln',
+    name: 'Arbeitgeberportal',
+    icon: BriefcaseIcon,
+    to: '/employer',
+  },
+  {
+    name: 'Zoll',
    icon: IdentificationIcon,
    to: '/checkin',
  },
@ -36,26 +40,12 @@ const navigationEntries: INavigationEntry[] = [
    icon: BuildingLibraryIcon,
    to: '/bank',
  },
-  {
-    name: 'Börse',
-    icon: ArrowTrendingUpIcon,
-    to: '/stocks',
-    disabled: true,
-  },
  {
    name: 'Radio',
    icon: MusicalNoteIcon,
    to: '/radio',
    disabled: true,
  },
-  // {
-  //   name: 'divider',
-  // },
-  // {
-  //   name: 'Abmelden',
-  //   icon: ArrowRightOnRectangleIcon,
-  //   to: '/logout',
-  // },
 ];
 </script>

--- a/webapp/src/assets/svg/logo.svg
+++ b/webapp/src/assets/svg/logo.svg
--- a/webapp/src/components/atoms/AtomCard.vue
+++ b/webapp/src/components/atoms/AtomCard.vue
@ -0,0 +1,18 @@
+<template>
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+      <h2 class="card-title"><slot name="title" /></h2>
+      <p>
+        <slot />
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/webapp/src/components/atoms/AtomCurrencyInput.vue
+++ b/webapp/src/components/atoms/AtomCurrencyInput.vue
@ -1,19 +1,21 @@
 <template>
-  <div>
+  <div class="relative">
    <AtomInput
-      ref="input"
+      v-model="modelValue"
      type="number"
-      class="pr-16 text-right"
+      class="pr-[5.5rem] text-right"
      step="1"
      min="1"
-      max="100"
    />
-    <span class="pointer-events-none absolute top-2/4 -ml-16 -mt-8 text-sm opacity-50">,00 Öro</span>
+    <span class="pointer-events-none absolute top-2/4 -mt-3 ml-[-5.5rem] opacity-50">,00 Batzen</span>
  </div>
 </template>

 <script lang="ts" setup>
 import AtomInput from './AtomInput.vue';
+
+/* global defineModel */
+const modelValue = defineModel();
 </script>

 <style lang="scss" scoped>
--- a/webapp/src/components/atoms/AtomFactorInput.vue
+++ b/webapp/src/components/atoms/AtomFactorInput.vue
@ -0,0 +1,23 @@
+<template>
+  <div class="relative">
+    <AtomInput
+      v-model="modelValue"
+      type="number"
+      class="pr-7 text-right"
+      step="1"
+      min="1"
+    />
+    <span class="pointer-events-none absolute top-2/4 -ml-6 -mt-3 opacity-50">x</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AtomInput from './AtomInput.vue';
+
+/* global defineModel */
+const modelValue = defineModel();
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/webapp/src/components/atoms/AtomInput.vue
+++ b/webapp/src/components/atoms/AtomInput.vue
@ -1,12 +1,10 @@
 <template>
  <input
-    ref="input"
+    v-model="modelValue"
    :type="type"
    :required="required"
    :placeholder="placeholder"
-    :value="modelValue"
    class="input-bordered input w-full"
-    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
  />
 </template>

@ -24,13 +22,10 @@ defineProps({
    type: String,
    default: '',
  },
-  modelValue: {
-    type: String,
-    default: '',
-  },
 });

-defineEmits(['update:modelValue']);
+/* global defineModel */
+const modelValue = defineModel();
 </script>

 <style lang="scss" scoped>
--- a/webapp/src/components/atoms/AtomLogo.vue
+++ b/webapp/src/components/atoms/AtomLogo.vue
@ -1,7 +1,6 @@
 <template>
  <img
-    src="../../assets/logo.png"
-    class="m-4 w-48"
+    src="../../assets/svg/logo.svg"
  />
 </template>

--- a/webapp/src/components/atoms/AtomPercentInput.vue
+++ b/webapp/src/components/atoms/AtomPercentInput.vue
@ -0,0 +1,23 @@
+<template>
+  <div class="relative">
+    <AtomInput
+      v-model="modelValue"
+      type="number"
+      class="pr-14 text-right"
+      step="1"
+      min="1"
+    />
+    <span class="pointer-events-none absolute top-2/4 -ml-14 -mt-3 opacity-50">,00 %</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AtomInput from './AtomInput.vue';
+
+/* global defineModel */
+const modelValue = defineModel();
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/webapp/src/components/molecules/MoleculeDataTable.vue
+++ b/webapp/src/components/molecules/MoleculeDataTable.vue
@ -65,7 +65,8 @@ defineProps({
  },
  contactModalId: {
    type: String,
-    required: true,
+    required: false,
+    default: '',
  },
 });

--- a/webapp/src/components/molecules/MoleculeNavigationDrawer.vue
+++ b/webapp/src/components/molecules/MoleculeNavigationDrawer.vue
@ -21,7 +21,7 @@
            tabindex="0"
            class="btn-ghost avatar btn"
          >
-            <AtomLogo class="w-12" />
+            <AtomLogo />
          </label>
        </div>
      </div>
@ -34,7 +34,7 @@
      />
      <ul class="menu h-full w-64 overflow-y-auto bg-base-100 p-4">
        <li class="pointer-events-none">
-          <AtomLogo class="w-28" />
+          <AtomLogo class="w-full" />
        </li>
        <template v-if="isAuthenticated">
          <li class="pointer-events-none rounded-md bg-warning uppercase text-warning-content">
--- a/webapp/src/components/organisms/OrganismAuthWrapper.vue
+++ b/webapp/src/components/organisms/OrganismAuthWrapper.vue
@ -0,0 +1,37 @@
+<template>
+  <MoleculeAuthDialog v-if="!isAuthenticated" />
+  <div v-else>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { useEventBus } from '@vueuse/core';
+import { AuthService } from '../../services/auth.service';
+import MoleculeAuthDialog from '../molecules/MoleculeAuthDialog.vue';
+
+const isAuthenticated = ref(false);
+
+useEventBus<boolean>('isAuthenticated').on((state: boolean) => {
+  isAuthenticated.value = state;
+  if(isAuthenticated.value) {
+    emit('authChange', true);
+  } else {
+    emit('authChange', false);
+  }
+});
+
+onMounted(() => {
+  isAuthenticated.value = AuthService.isAuthenticated();
+  if(isAuthenticated.value) {
+    emit('authChange', true);
+  }
+});
+
+const emit = defineEmits(['authChange']);
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/webapp/src/components/views/RadioView.vue
+++ b/webapp/src/components/views/RadioView.vue
@ -1,11 +0,0 @@
-<template>
-  #Radio
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>
--- a/webapp/src/components/views/StocksView.vue
+++ b/webapp/src/components/views/StocksView.vue
@ -1,11 +0,0 @@
-<template>
-  #Stocks
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>
--- a/webapp/src/components/views/ViewBank.vue
+++ b/webapp/src/components/views/ViewBank.vue
@ -21,7 +21,7 @@
      :id="depositModalId"
      title="Einzahlung"
      action-label="Einzahlen"
-      input-label="Einzuzahlender Betrag:"
+      input-label="Einzuzahlender Betrag"
      @submit="handleDeposit"
      @open="depositModalOpen = $event.open"
    />
@ -33,27 +33,11 @@
      <ChevronUpIcon class="h-6 w-6 text-success" />
      Einzahlen
    </label>
-    <MoleculeInputModal
-      :id="salaryModalId"
-      title="Gehalt"
-      action-label="Gehalt hinzufügen"
-      input-label="Gehalt Betrag:"
-      @submit="handleSalary"
-      @open="salaryModalOpen = $event.open"
-    />
-    <label
-      ref="salaryModalLabel"
-      class="btn gap-2"
-      :for="salaryModalId"
-    >
-      <CurrencyDollarIcon class="h-6 w-6 text-warning" />
-      Gehalt
-    </label>
    <MoleculeInputModal
      :id="withdrawModalId"
      title="Auszahlung"
      action-label="Auszahlen"
-      input-label="Auszuzahlender Betrag:"
+      input-label="Auszuzahlender Betrag"
      @submit="handleWithdraw"
      @open="withdrawModalOpen = $event.open"
    />
@ -87,7 +71,7 @@ import { AccountsResponse, TransactionsResponse } from '../../types/pocketbase.t
 import { AccountService } from '../../services/account.service';
 import { BankService, TransactionType } from '../../services/bank.service';
 import { CurrencyService } from '../../services/currency.service';
-import { CurrencyDollarIcon, ChevronDownIcon, ChevronUpIcon, XCircleIcon } from '@heroicons/vue/24/outline';
+import { ChevronDownIcon, ChevronUpIcon, XCircleIcon } from '@heroicons/vue/24/outline';
 import AtomHeroText from '../atoms/AtomHeroText.vue';
 import MoleculeInputModal from '../molecules/MoleculeInputModal.vue';
 import MoleculeTransactionTable from '../molecules/MoleculeTransactionTable.vue';
@ -108,7 +92,6 @@ const withdrawModalOpen = ref<boolean>(false);
 const error = ref('');

 const depositModalId = 'deposit-modal';
-const salaryModalId = 'salary-modal';
 const withdrawModalId = 'withdraw-modal';

 if(router.currentRoute.value.query.accountNumber) {
@ -181,17 +164,13 @@ async function handleDeposit(amount: string) {
  }
 }

-async function handleSalary(amount: string) {
-  const amountNumber = parseInt(amount);
-  if(!isNaN(amountNumber) && account.value) {
-    await BankService.addTransaction(account.value.id, amountNumber, TransactionType.SALARY);
-  }
-}
-
 async function handleWithdraw(amount: string) {
  const amountNumber = parseInt(amount);
  if(!isNaN(amountNumber) && account.value) {
-    await BankService.addTransaction(account.value.id, -amountNumber, TransactionType.WITHDRAW);
+    if(parseInt(amount) <= getBalance()) {
+      // TODO: add max amount to input field and display custom error message
+      await BankService.addTransaction(account.value.id, -amountNumber, TransactionType.WITHDRAW);
+    }
  }
 }

--- a/webapp/src/components/views/ViewCheckIn.vue
+++ b/webapp/src/components/views/ViewCheckIn.vue
--- a/webapp/src/components/views/ViewData.vue
+++ b/webapp/src/components/views/ViewData.vue
--- a/webapp/src/components/views/ViewEmployer.vue
+++ b/webapp/src/components/views/ViewEmployer.vue
@ -0,0 +1,85 @@
+<template>
+  <MoleculeAuthDialog v-if="!isAuthenticated" />
+  <div
+    v-else
+    class="flex h-full flex-col p-6"
+  >
+    <h1 class="mb-4 text-4xl">Musterfirma</h1>
+    <h2 class="mb-4 text-3xl">Kontostand: 500 Batzen</h2>
+    <MoleculeDataTable
+      v-if="accounts"
+      :table-headers="tableHeaders"
+      :data="accounts"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+import { useEventBus } from '@vueuse/core';
+import { AccountsListResponse } from '../../types/pocketbase.types';
+import { AccountService } from '../../services/account.service';
+import { AuthService } from '../../services/auth.service';
+import MoleculeDataTable, { TableHeaderType } from '../molecules/MoleculeDataTable.vue';
+import MoleculeAuthDialog from '../molecules/MoleculeAuthDialog.vue';
+
+const isAuthenticated = ref(false);
+
+const accounts = ref<AccountsListResponse<number, string>[]>([]);
+const initAccounts = ref<AccountsListResponse<number, string>[]>([]);
+const searchQuery = ref('');
+const tableHeaders = [
+  {
+    title: 'Name',
+    key: 'name',
+    type: TableHeaderType.STRING,
+  },
+  {
+    title: 'Schicht',
+    key: 'lastCheckIn',
+    type: TableHeaderType.DATETIME,
+  },
+  {
+    title: 'Lohn',
+    key: 'balance',
+    type: TableHeaderType.CURRENCY,
+  },
+];
+
+useEventBus<boolean>('isAuthenticated').on(state => {
+  isAuthenticated.value = state;
+  if(isAuthenticated.value) {
+    getData();
+  }
+});
+
+async function getData() {
+  initAccounts.value = await AccountService.getAccounts();
+  accounts.value = initAccounts.value;
+}
+
+watch(
+  searchQuery,
+  (value) => {
+    search(value);
+  },
+);
+
+function search(value: string) {
+  if(initAccounts.value) {
+    accounts.value = initAccounts.value.filter((account) =>
+      account.name?.toLocaleLowerCase().includes(value.toLocaleLowerCase()),
+    );
+  }
+}
+
+onMounted(async () => {
+  isAuthenticated.value = AuthService.isAuthenticated();
+  if(isAuthenticated.value) {
+    getData();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/webapp/src/components/views/ViewStatePortal.vue
+++ b/webapp/src/components/views/ViewStatePortal.vue
@ -0,0 +1,124 @@
+<template>
+  <OrganismAuthWrapper class="flex h-full flex-wrap gap-4 p-6">
+    <AtomCard class="w-96">
+      <template #title>
+        <WrenchScrewdriverIcon class="h-6 w-6" />Einstellungen
+      </template>
+      <div class="mt-4 flex h-full flex-col gap-4">
+        <div class="flex place-items-center justify-between">
+          <span>Mindestlohn</span>
+          <AtomCurrencyInput
+            v-model="minWage"
+            class="w-2/4"
+          />
+        </div>
+        <div class="flex place-items-center justify-between">
+          <span>Lohnsteuer</span>
+          <AtomPercentInput
+            v-model="incomeTax"
+            class="w-2/4"
+          />
+        </div>
+        <div class="flex place-items-center justify-between">
+          <span>Höchstlohn-Faktor</span>
+          <AtomFactorInput
+            v-model="maxWageFactor"
+            class="w-2/4"
+          />
+        </div>
+        <button
+          class="btn-primary btn mt-auto w-1/2 self-end"
+          @click="saveSettings()"
+        >
+          Speichern
+        </button>
+      </div>
+      <div
+        v-if="settingsSaveSuccess"
+        class="toast z-10"
+      >
+        <div class="alert alert-info">
+          <span>Änderungen erfolgreich gespeichert.</span>
+        </div>
+      </div>
+    </AtomCard>
+    <AtomCard class="w-96">
+      <template #title>
+        <UsersIcon class="h-6 w-6" />Verwaltung
+      </template>
+      <div class="mt-4 flex h-full flex-col gap-4">
+        <button class="btn">
+          <ArrowDownTrayIcon class="h-5 w-5" />
+          Fehlende Schüler
+        </button>
+        <RouterLink
+          class="btn"
+          :to="{ name: 'data' }"
+        >
+          <ChevronRightIcon class="h-5 w-5" />
+          Stammdaten-Übersicht
+        </RouterLink>
+      </div>
+    </AtomCard>
+    <AtomCard class="w-96 border-2 border-error">
+      <template #title>
+        <ExclamationTriangleIcon class="h-6 w-6" />Setup <span class="uppercase text-error">(Danger Zone)</span>
+      </template>
+      <div class="mt-4 flex h-full flex-col gap-4">
+        <button class="btn">
+          <TableCellsIcon class="h-5 w-5" />
+          Stammdaten importieren
+        </button>
+      </div>
+    </AtomCard>
+  </OrganismAuthWrapper>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { SettingsResponse } from '../../types/pocketbase.types';
+import { SettingsService } from '../../services/settings.service';
+import {
+  ArrowDownTrayIcon,
+  ChevronRightIcon,
+  ExclamationTriangleIcon,
+  TableCellsIcon,
+  UsersIcon,
+  WrenchScrewdriverIcon,
+} from '@heroicons/vue/24/outline';
+import AtomCard from '../atoms/AtomCard.vue';
+import AtomCurrencyInput from '../atoms/AtomCurrencyInput.vue';
+import AtomPercentInput from '../atoms/AtomPercentInput.vue';
+import AtomFactorInput from '../atoms/AtomFactorInput.vue';
+import OrganismAuthWrapper from '../organisms/OrganismAuthWrapper.vue';
+
+const minWage = ref<number>();
+const incomeTax = ref<number>();
+const maxWageFactor = ref<number>();
+const settings = ref<SettingsResponse>();
+const settingsSaveSuccess = ref<boolean>(false);
+
+onMounted(async () => {
+  settings.value = await SettingsService.getSettings();
+  minWage.value = settings.value.minWage;
+  incomeTax.value = settings.value.incomeTax;
+  maxWageFactor.value = settings.value.maxWageFactor;
+});
+
+async function saveSettings() {
+  if(minWage.value && incomeTax.value && maxWageFactor.value) {
+    settings.value = await SettingsService.setSettings({
+      minWage: minWage.value,
+      incomeTax: incomeTax.value,
+      maxWageFactor: maxWageFactor.value,
+    });
+    settingsSaveSuccess.value = true;
+    const timeout = setTimeout(() => {
+      settingsSaveSuccess.value = false;
+      clearTimeout(timeout);
+    }, 5000);
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
--- a/webapp/src/env.d.ts
+++ b/webapp/src/env.d.ts
@ -1,4 +1,4 @@
-// / <reference types="vite/client" />
+/// <reference types="vite/client" />

 declare module '*.vue' {
  import type { DefineComponent } from 'vue';
--- a/webapp/src/router/router.ts
+++ b/webapp/src/router/router.ts
@ -1,30 +1,35 @@
 import * as VueRouter from 'vue-router';
-import DataView from '../components/views/DataView.vue';
-import CheckInView from '../components/views/CheckInView.vue';
-import BankView from '../components/views/BankView.vue';
-import StocksView from '../components/views/StocksView.vue';
-import RadioView from '../components/views/RadioView.vue';
+import ViewData from '../components/views/ViewData.vue';
+import ViewCheckIn from '../components/views/ViewCheckIn.vue';
+import ViewBank from '../components/views/ViewBank.vue';
+import ViewEmployer from '../components/views/ViewEmployer.vue';
+import ViewStatePortal from '../components/views/ViewStatePortal.vue';

 const routes = [
  {
    path: '/data',
-    component: DataView,
+    name: 'data',
+    component: ViewData,
+  },
+  {
+    path: '/settings',
+    name: 'settings',
+    component: ViewStatePortal,
+  },
+  {
+    path: '/employer',
+    name: 'employer',
+    component: ViewEmployer,
  },
  {
    path: '/checkin',
-    component: CheckInView,
+    name: 'checkin',
+    component: ViewCheckIn,
  },
  {
    path: '/bank',
-    component: BankView,
-  },
-  {
-    path: '/stocks',
-    component: StocksView,
-  },
-  {
-    path: '/radio',
-    component: RadioView,
+    name: 'bank',
+    component: ViewBank,
  },
 ];

--- a/webapp/src/services/settings.service.ts
+++ b/webapp/src/services/settings.service.ts
@ -0,0 +1,13 @@
+import { Collections, SettingsRecord, SettingsResponse } from '../types/pocketbase.types';
+import { PocketbaseService } from './pocketbase.service';
+
+const COLLECTION = PocketbaseService.getApi().collection(Collections.Settings);
+
+export class SettingsService {
+  public static async getSettings(): Promise<SettingsResponse> {
+    return COLLECTION.getFirstListItem('', { sort: '-created' });
+  }
+  public static async setSettings(settings: SettingsRecord): Promise<SettingsResponse> {
+    return COLLECTION.create(settings);
+  }
+}
--- a/webapp/src/types/pocketbase.types.ts
+++ b/webapp/src/types/pocketbase.types.ts
@ -6,6 +6,7 @@ export enum Collections {
 	Accounts = "accounts",
 	AccountsData = "accountsData",
 	AccountsList = "accountsList",
+	Settings = "settings",
 	Transactions = "transactions",
 }

@ -38,7 +39,7 @@ export type AccountsRecord = {
 	firstName: string
 	lastName: string
 	lastCheckIn?: IsoDateString
-	personalData: RecordIdString
+	personalData?: RecordIdString
 }

 export type AccountsDataRecord = {
@ -59,6 +60,12 @@ export type AccountsListRecord<Tbalance = unknown, Tname = unknown> = {
 	balance?: null | Tbalance
 }

+export type SettingsRecord = {
+	minWage: number
+	incomeTax: number
+	maxWageFactor: number
+}
+
 export type TransactionsRecord = {
 	account: RecordIdString
 	label: string
@ -67,8 +74,9 @@ export type TransactionsRecord = {

 // Response types include system fields and match responses from the PocketBase API
 export type AccountsResponse<Texpand = unknown> = Required<AccountsRecord> & BaseSystemFields<Texpand>
-export type AccountsDataResponse = Required<AccountsDataRecord> & BaseSystemFields
-export type AccountsListResponse<Tbalance = unknown, Tname = unknown> = Required<AccountsListRecord<Tbalance, Tname>> & BaseSystemFields
+export type AccountsDataResponse<Texpand = unknown> = Required<AccountsDataRecord> & BaseSystemFields<Texpand>
+export type AccountsListResponse<Tbalance = unknown, Tname = unknown, Texpand = unknown> = Required<AccountsListRecord<Tbalance, Tname>> & BaseSystemFields<Texpand>
+export type SettingsResponse<Texpand = unknown> = Required<SettingsRecord> & BaseSystemFields<Texpand>
 export type TransactionsResponse<Texpand = unknown> = Required<TransactionsRecord> & BaseSystemFields<Texpand>

 // Types containing all Records and Responses, useful for creating typing helper functions
@ -77,6 +85,7 @@ export type CollectionRecords = {
 	accounts: AccountsRecord
 	accountsData: AccountsDataRecord
 	accountsList: AccountsListRecord
+	settings: SettingsRecord
 	transactions: TransactionsRecord
 }

@ -84,5 +93,6 @@ export type CollectionResponses = {
 	accounts: AccountsResponse
 	accountsData: AccountsDataResponse
 	accountsList: AccountsListResponse
+	settings: SettingsResponse
 	transactions: TransactionsResponse
 }
--- a/webapp/tailwind.config.js
+++ b/webapp/tailwind.config.js
@ -8,6 +8,7 @@ module.exports = {
  },
  plugins: [require('@tailwindcss/typography'), require('daisyui')],
  daisyui: {
+    logs: false,
    themes: [
      'light',
      'dark',
--- a/webapp/vite.config.ts
+++ b/webapp/vite.config.ts
@ -1,7 +1,10 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'

-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue({
+    script: {
+      defineModel: true,
+    }
+  })]
 })