From b89a3c744f353742cac6e529d7728bc183582526 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <arbeit@torsten-hettstedt.de>
Date: Wed, 4 Jun 2025 18:07:10 +0200
Subject: [PATCH] =?UTF-8?q?Nutze=20neueste=20Version=20f=C3=BCr=20Svelte5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ignoriere die Pagination der Tabellen und das Bearbeiten der Einträge.
---
 .gitignore                                    |   3 +
 ui/{public => }/less/global.less              |   0
 ui/{public => }/less/lesslib/basics.less      |   0
 ui/{public => }/less/lesslib/colors.less      |   0
 ui/{public => }/less/lesslib/fonts.less       |   0
 ui/{public => }/less/lesslib/layout.less      | 146 ++++++++++------
 .../less/lesslib/media_queries.less           |  12 +-
 .../less/lesslib/mixins.framework.less        |   0
 ui/{public => }/less/lesslib/mixins.less      |   0
 .../less/lesslib/print/basics.less            |   2 +-
 .../less/lesslib/print/colors.less            |   0
 .../less/lesslib/print/layout.less            |   4 +-
 ui/{public => }/less/print.less               |   0
 ui/package.json                               |  63 ++++---
 ui/public/index.html                          |  22 ---
 ui/rollup.config.js                           |  51 ------
 ui/src/app.html                               |  23 +++
 ui/src/components/App.svelte                  |  57 ------
 ui/src/components/Nav.svelte                  |  15 --
 ui/src/components/Repositories.svelte         | 110 ------------
 ui/src/index.js                               |   5 -
 ui/src/lib/Models.svelte.js                   |  17 ++
 ui/src/lib/Repositories.svelte                | 165 ++++++++++++++++++
 ui/src/lib/Views.svelte                       |  63 +++++++
 ui/src/routes/+layout.svelte                  |  19 ++
 ui/src/routes/+page.server.js                 |   9 +
 ui/src/routes/+page.svelte                    |   7 +
 ui/src/routes/Home.svelte                     |   6 -
 ui/src/routes/MonthlyViews.svelte             |  11 --
 ui/src/routes/Views.svelte                    |  81 ---------
 ui/src/routes/WeeklyViews.svelte              |  11 --
 ui/src/routes/WorkingHours.svelte             |  33 ----
 ui/src/routes/YearlyViews.svelte              |  11 --
 ui/src/routes/views/monthly/+page.server.js   |   9 +
 ui/src/routes/views/monthly/+page.svelte      |   7 +
 ui/src/routes/views/weekly/+page.server.js    |   9 +
 ui/src/routes/views/weekly/+page.svelte       |   7 +
 ui/src/routes/views/yearly/+page.server.js    |   9 +
 ui/src/routes/views/yearly/+page.svelte       |   7 +
 ui/{public => static}/favicon.png             | Bin
 ui/{public => static}/fonts/Lobster_1.3.otf   | Bin
 ui/{public => static}/fonts/opensans-bold.eot | Bin
 ui/{public => static}/fonts/opensans-bold.svg |   0
 ui/{public => static}/fonts/opensans-bold.ttf | Bin
 .../fonts/opensans-bold.woff                  | Bin
 .../fonts/opensans-bolditalic.eot             | Bin
 .../fonts/opensans-bolditalic.svg             |   0
 .../fonts/opensans-bolditalic.ttf             | Bin
 .../fonts/opensans-bolditalic.woff            | Bin
 .../fonts/opensans-italic.eot                 | Bin
 .../fonts/opensans-italic.svg                 |   0
 .../fonts/opensans-italic.ttf                 | Bin
 .../fonts/opensans-italic.woff                | Bin
 .../fonts/opensans-regular.eot                | Bin
 .../fonts/opensans-regular.svg                |   0
 .../fonts/opensans-regular.ttf                | Bin
 .../fonts/opensans-regular.woff               | Bin
 ui/{public => static}/meyer_resets.css        |   0
 ui/svelte.config.js                           |   6 +
 ui/tsconfig.json                              |  19 ++
 ui/vite.config.js                             |   6 +
 61 files changed, 524 insertions(+), 501 deletions(-)
 rename ui/{public => }/less/global.less (100%)
 rename ui/{public => }/less/lesslib/basics.less (100%)
 rename ui/{public => }/less/lesslib/colors.less (100%)
 rename ui/{public => }/less/lesslib/fonts.less (100%)
 rename ui/{public => }/less/lesslib/layout.less (63%)
 rename ui/{public => }/less/lesslib/media_queries.less (98%)
 rename ui/{public => }/less/lesslib/mixins.framework.less (100%)
 rename ui/{public => }/less/lesslib/mixins.less (100%)
 rename ui/{public => }/less/lesslib/print/basics.less (99%)
 rename ui/{public => }/less/lesslib/print/colors.less (100%)
 rename ui/{public => }/less/lesslib/print/layout.less (98%)
 rename ui/{public => }/less/print.less (100%)
 delete mode 100644 ui/public/index.html
 delete mode 100644 ui/rollup.config.js
 create mode 100644 ui/src/app.html
 delete mode 100644 ui/src/components/App.svelte
 delete mode 100644 ui/src/components/Nav.svelte
 delete mode 100644 ui/src/components/Repositories.svelte
 delete mode 100644 ui/src/index.js
 create mode 100644 ui/src/lib/Models.svelte.js
 create mode 100644 ui/src/lib/Repositories.svelte
 create mode 100644 ui/src/lib/Views.svelte
 create mode 100644 ui/src/routes/+layout.svelte
 create mode 100644 ui/src/routes/+page.server.js
 create mode 100644 ui/src/routes/+page.svelte
 delete mode 100644 ui/src/routes/Home.svelte
 delete mode 100644 ui/src/routes/MonthlyViews.svelte
 delete mode 100644 ui/src/routes/Views.svelte
 delete mode 100644 ui/src/routes/WeeklyViews.svelte
 delete mode 100644 ui/src/routes/WorkingHours.svelte
 delete mode 100644 ui/src/routes/YearlyViews.svelte
 create mode 100644 ui/src/routes/views/monthly/+page.server.js
 create mode 100644 ui/src/routes/views/monthly/+page.svelte
 create mode 100644 ui/src/routes/views/weekly/+page.server.js
 create mode 100644 ui/src/routes/views/weekly/+page.svelte
 create mode 100644 ui/src/routes/views/yearly/+page.server.js
 create mode 100644 ui/src/routes/views/yearly/+page.svelte
 rename ui/{public => static}/favicon.png (100%)
 rename ui/{public => static}/fonts/Lobster_1.3.otf (100%)
 rename ui/{public => static}/fonts/opensans-bold.eot (100%)
 rename ui/{public => static}/fonts/opensans-bold.svg (100%)
 rename ui/{public => static}/fonts/opensans-bold.ttf (100%)
 rename ui/{public => static}/fonts/opensans-bold.woff (100%)
 rename ui/{public => static}/fonts/opensans-bolditalic.eot (100%)
 rename ui/{public => static}/fonts/opensans-bolditalic.svg (100%)
 rename ui/{public => static}/fonts/opensans-bolditalic.ttf (100%)
 rename ui/{public => static}/fonts/opensans-bolditalic.woff (100%)
 rename ui/{public => static}/fonts/opensans-italic.eot (100%)
 rename ui/{public => static}/fonts/opensans-italic.svg (100%)
 rename ui/{public => static}/fonts/opensans-italic.ttf (100%)
 rename ui/{public => static}/fonts/opensans-italic.woff (100%)
 rename ui/{public => static}/fonts/opensans-regular.eot (100%)
 rename ui/{public => static}/fonts/opensans-regular.svg (100%)
 rename ui/{public => static}/fonts/opensans-regular.ttf (100%)
 rename ui/{public => static}/fonts/opensans-regular.woff (100%)
 rename ui/{public => static}/meyer_resets.css (100%)
 create mode 100644 ui/svelte.config.js
 create mode 100644 ui/tsconfig.json
 create mode 100644 ui/vite.config.js

diff --git a/.gitignore b/.gitignore
index 9ffe02b..a07b7ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -109,3 +109,6 @@ Temporary Items
 /api/tests/_*
 /api/tests/*.suite.yml
 /api/.env
+/ui/static/print.css*
+/ui/static/global.css*
+/ui/static/bundle.css*
diff --git a/ui/public/less/global.less b/ui/less/global.less
similarity index 100%
rename from ui/public/less/global.less
rename to ui/less/global.less
diff --git a/ui/public/less/lesslib/basics.less b/ui/less/lesslib/basics.less
similarity index 100%
rename from ui/public/less/lesslib/basics.less
rename to ui/less/lesslib/basics.less
diff --git a/ui/public/less/lesslib/colors.less b/ui/less/lesslib/colors.less
similarity index 100%
rename from ui/public/less/lesslib/colors.less
rename to ui/less/lesslib/colors.less
diff --git a/ui/public/less/lesslib/fonts.less b/ui/less/lesslib/fonts.less
similarity index 100%
rename from ui/public/less/lesslib/fonts.less
rename to ui/less/lesslib/fonts.less
diff --git a/ui/public/less/lesslib/layout.less b/ui/less/lesslib/layout.less
similarity index 63%
rename from ui/public/less/lesslib/layout.less
rename to ui/less/lesslib/layout.less
index d0bd78a..0c280e1 100644
--- a/ui/public/less/lesslib/layout.less
+++ b/ui/less/lesslib/layout.less
@@ -5,50 +5,66 @@
 html {
     body {
         background: @mainColorLight;
-        > header, > footer {
-            color: @mainColorDark;
-            background: @mainColor;
-            font-family: serif;
-            h1 {
-                font-size: 3rem;
-                text-align: center;
-            }
-            p {
-                text-indent: inherit;
-                &:first-letter {
-                    font-size: inherit;
+        div {
+            > header, > footer {
+                color: @mainColorDark;
+                background: @mainColor;
+                font-family: serif;
+
+                h1 {
+                    font-size: 3rem;
+                    text-align: center;
+                }
+
+                p {
+                    text-indent: inherit;
+
+                    &:first-letter {
+                        font-size: inherit;
+                    }
+
+                    font-style: italic;
                 }
-                font-style: italic;
             }
-        }
-        > header h1 {
-            margin: 1rem auto;
-        }
-        > footer {
-            color: contrast(@mainColorDark);
-        }
-        & > nav {
-            ul {
-                background: darken(@mainColorLight,33%,relativ);
-                li {
-                    font-weight: bold;
-                    &:not(:first-child) {
-                        border-left: @mainColorDark solid thin;
-                    }
-                    a {
-                        text-decoration: none;
-                        color: @mainColorDark;
-                    }
-                    &:hover {
-                        background: lighten(@mainColor,20%,relativ);
-                        a {
-                            color: lighten(@mainColor,66%,relativ);
+
+            > header h1 {
+                margin: 1rem auto;
+            }
+
+            > footer {
+                color: contrast(@mainColorDark);
+            }
+
+            & > nav {
+                ul {
+                    background: darken(@mainColorLight, 33%, relativ);
+
+                    li {
+                        font-weight: bold;
+
+                        &:not(:first-child) {
+                            border-left: @mainColorDark solid thin;
                         }
-                    }
-                    &.selected, &.selected:hover {
-                        background: lighten(@mainColor,10%,relativ);
+
                         a {
-                            color: lighten(@mainColor,66%,relativ);
+                            text-decoration: none;
+                            color: @mainColorDark;
+                        }
+
+                        &:hover {
+                            background: lighten(@mainColor, 20%, relativ);
+
+                            a {
+                                color: lighten(@mainColor, 66%, relativ);
+                            }
+                        }
+
+                        &.selected, &.selected:hover {
+                            background: lighten(@mainColor, 10%, relativ);
+
+                            a {
+                                color: lighten(@mainColor, 66%, relativ);
+                            }
                         }
                     }
                 }
@@ -63,15 +79,19 @@ main {
         border-color: @mainColorDark;
         border-width: medium;
     }
+
     section {
         @sectionMargin: 1rem;
+
         h1, h2 {
             margin: @sectionMargin;
         }
+
         p, ul, ol, dl {
             margin: @sectionMargin;
             text-indent: @sectionMargin * 2;
         }
+
         table {
             thead {
                 tr:last-child {
@@ -79,7 +99,9 @@ main {
                         border-bottom: @mainColor solid thin;
                     }
                 }
-            };
+            }
+        ;
+
             tbody {
                 td.absence-time {
                     color: @redColor;
@@ -87,15 +109,23 @@ main {
                     text-decoration-style: dashed;
                 }
             }
+            tfoot {
+                * {
+                    border: initial;
+                }
+            }
         }
+
         form {
             @formLabelWidth: 10rem;
             @formItemWidth: 40rem;
+
             nav.menu {
                 width: @formItemWidth + @formLabelWidth + 4rem;
                 border-color: @mainColor;
                 border-bottom-style: solid;
                 margin: 1rem auto;
+
                 span {
                     border-color: @mainColor;
                     border-style: solid solid none;
@@ -103,73 +133,89 @@ main {
                     display: inline-block;
                     font-weight: bolder;
                     margin-right: 1rem;
+
                     &:first-child {
                         margin-left: 1.5rem;
                     }
+
                     &:hover {
-                        background-color: darken(@mainColorLight,10%,relativ);
+                        background-color: darken(@mainColorLight, 10%, relativ);
                     }
+
                     &.active {
-                        background-color: darken(@mainColorLight,20%,relativ);
+                        background-color: darken(@mainColorLight, 20%, relativ);
                     }
                 }
             }
+
             fieldset {
                 width: @formItemWidth + @formLabelWidth + 2rem;
                 margin: 1rem auto;
-                border-style: solid ;
+                border-style: solid;
                 border-color: @mainColor;
                 padding: @sectionMargin;
+
                 &.tasten {
                     border: none;
                     background-color: @mainColorLight;
                 }
+
                 legend {
                     margin: @sectionMargin;
                     margin-left: @sectionMargin * 2;
                 }
+
                 div {
-                    &  > label {
+                    & > label {
                         width: @formLabelWidth;
                         display: inline-block;
                         margin: 0.5rem;
                     }
+
                     input {
                         display: inline-block;
                         width: @formItemWidth;
                         padding: 0.25rem;
                         margin-bottom: 1.0rem;
-                        border-style:  solid;
+                        border-style: solid;
                         border-width: thin;
                     }
                 }
             }
         }
+
         button {
-            .button(@mainColor, spin(lighten(@mainColor,66%,relativ),@subColor));
+            .button(@mainColor, spin(lighten(@mainColor, 66%, relativ), @subColor));
+
             &.sub-button {
-                .button(lighten(@mainColor,20%,relativ), spin(@mainColor,@subColor));
+                .button(lighten(@mainColor, 20%, relativ), spin(@mainColor, @subColor));
             }
         }
+
         footer {
             text-align: right;
             padding: 0;
+
             p {
                 padding: 0.5rem;
                 display: inline-block;
                 margin: inherit;
                 text-indent: inherit;
+
                 &:first-letter {
                     font-size: inherit;
                 }
-                background: @mainColorLight ;
-                color: @mainColor ;
+
+                background: @mainColorLight;
+                color: @mainColor;
                 font-style: italic;
                 font-size: 85%;
             }
+
             nav li {
                 padding: 0.5rem;
             }
+
             border-bottom-style: solid;
         }
     }
diff --git a/ui/public/less/lesslib/media_queries.less b/ui/less/lesslib/media_queries.less
similarity index 98%
rename from ui/public/less/lesslib/media_queries.less
rename to ui/less/lesslib/media_queries.less
index 0b57d01..78d7375 100644
--- a/ui/public/less/lesslib/media_queries.less
+++ b/ui/less/lesslib/media_queries.less
@@ -5,7 +5,7 @@
         font-size: 10pt;
     }
     header, footer, main, nav, aside {
-        body > & {
+        body div > & {
             width: 19cm;
             margin: auto;
             .border-box();
@@ -15,7 +15,7 @@
         padding: 0.5rem;
         ;
     }
-    body {
+    body div {
         & > header {
             font-size: 200%;
             font-weight: bolder;
@@ -71,7 +71,7 @@
 
 @media screen and (min-width: 831px) {
     header, footer, main, nav, aside {
-        body > & {
+        body div > & {
             width: @breiteMainBereich;
             margin: auto;
             .border-box();
@@ -80,7 +80,7 @@
     header, footer{
         padding: 0.5rem;
     }
-    body {
+    body div {
         & > header {
             font-size: 200%;
             font-weight: bolder;
@@ -139,7 +139,7 @@
 }
 
 @media screen and (max-width: 830px) {
-    html body {
+    html body div {
         @boxHeight: 5rem;
         & > header {
             height: @boxHeight;
@@ -267,7 +267,7 @@
     }
 }
 @media screen and (max-width: 720px) {
-    html body {
+    html body div {
         @boxHeight: 2.5rem;
         & > header {
             height: @boxHeight;
diff --git a/ui/public/less/lesslib/mixins.framework.less b/ui/less/lesslib/mixins.framework.less
similarity index 100%
rename from ui/public/less/lesslib/mixins.framework.less
rename to ui/less/lesslib/mixins.framework.less
diff --git a/ui/public/less/lesslib/mixins.less b/ui/less/lesslib/mixins.less
similarity index 100%
rename from ui/public/less/lesslib/mixins.less
rename to ui/less/lesslib/mixins.less
diff --git a/ui/public/less/lesslib/print/basics.less b/ui/less/lesslib/print/basics.less
similarity index 99%
rename from ui/public/less/lesslib/print/basics.less
rename to ui/less/lesslib/print/basics.less
index 63acfce..f464f04 100644
--- a/ui/public/less/lesslib/print/basics.less
+++ b/ui/less/lesslib/print/basics.less
@@ -2,7 +2,7 @@ html {
     font-size: 100%;
 }
 
-body {
+body div {
     color: #000;
     font-size: 1em;
     font-family: OpenSans, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
diff --git a/ui/public/less/lesslib/print/colors.less b/ui/less/lesslib/print/colors.less
similarity index 100%
rename from ui/public/less/lesslib/print/colors.less
rename to ui/less/lesslib/print/colors.less
diff --git a/ui/public/less/lesslib/print/layout.less b/ui/less/lesslib/print/layout.less
similarity index 98%
rename from ui/public/less/lesslib/print/layout.less
rename to ui/less/lesslib/print/layout.less
index 0864ddf..864ebe6 100644
--- a/ui/public/less/lesslib/print/layout.less
+++ b/ui/less/lesslib/print/layout.less
@@ -1,5 +1,5 @@
 html {
-    body {
+    body div {
         > header, > footer {
             background: none;
             font-family: serif;
@@ -59,7 +59,7 @@ main {
                     }
                 }
             }
-            tbody {
+            tbody div {
                 th {
                     font-weight: bold;
                     text-align: center;
diff --git a/ui/public/less/print.less b/ui/less/print.less
similarity index 100%
rename from ui/public/less/print.less
rename to ui/less/print.less
diff --git a/ui/package.json b/ui/package.json
index 567b320..72fecdd 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,31 +1,36 @@
 {
-  "private": true,
-  "name": "svelte-demo",
-  "scripts": {
-    "build": "rollup -c",
-    "autobuild": "rollup -c -w",
-    "dev": "run-p start:dev autobuild",
-    "start": "sirv public --single",
-    "start:dev": "sirv public --dev --single"
-  },
-  "dependencies": {
-    "ganalytics": "^3.1.2",
-    "navaid": "^1.0.2",
-    "open-iconic": "^1.1.1"
-  },
-  "devDependencies": {
-    "@iconify-icons/oi": "^1.1.0",
-    "@iconify/svelte": "^1.0.4",
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.3.0",
-    "dotenv": "^8.2.0",
-    "npm-run-all": "^4.1.3",
-    "rollup": "^2.30.0",
-    "rollup-plugin-svelte": "^6.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "sirv-cli": "^1.0.8",
-    "svelte": "^3.4.4",
-    "svelte-paginate": "^0.1.0"
-  }
+    "private": true,
+    "name": "svelte-demo",
+    "type": "module",
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "prepare": "svelte-kit sync || echo ''",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+    },
+    "dependencies": {
+        "ganalytics": "^3.1.2",
+        "navaid": "^1.0.2",
+        "open-iconic": "^1.1.1"
+    },
+    "devDependencies": {
+        "@sveltejs/adapter-auto": "^6.0.0",
+        "@sveltejs/kit": "^2.16.0",
+        "@sveltejs/vite-plugin-svelte": "^5.0.0",
+        "svelte": "^5.0.0",
+        "svelte-check": "^4.0.0",
+        "typescript": "^5.0.0",
+        "vite": "^6.2.6",
+        "dotenv": "^8.2.0",
+        "wx-svelte-grid": "^2.1.5",
+        "@iconify-icons/oi": "^1.1.0",
+        "@iconify/svelte": "^5.0.0"
+    },
+    "exports": {
+        ".": {
+            "svelte": "./puplic/index.js"
+        }
+    }
 }
diff --git a/ui/public/index.html b/ui/public/index.html
deleted file mode 100644
index a48646e..0000000
--- a/ui/public/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!doctype html>
-<!--suppress HtmlUnknownTarget -->
-<!--suppress JSUnresolvedLibraryURL -->
-<html lang="de">
-<head>
-	<base href="/" />
-	<meta charset="utf8">
-	<meta name="viewport" content="width=device-width">
-
-	<title>Svelte app</title>
-
-    <link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel="stylesheet" href="/global.css" media="screen">
-	<link rel="stylesheet" href="/print.css" media="print">
-	<link rel="stylesheet" href="/bundle.css">
-    <script type="module" src="https://unpkg.com/dimport?module" data-main="/index.js"></script>
-    <script nomodule src="https://unpkg.com/dimport/nomodule" data-main="/index.js"></script>
-</head>
-
-<body>
-</body>
-</html>
diff --git a/ui/rollup.config.js b/ui/rollup.config.js
deleted file mode 100644
index 7b165f5..0000000
--- a/ui/rollup.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import replace from '@rollup/plugin-replace';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import { terser } from 'rollup-plugin-terser';
-import {config} from 'dotenv';
-
-const production = !process.env.ROLLUP_WATCH;
-
-export default {
-	input: 'src/index.js',
-	output: {
-		name: 'app',
-		format: 'esm',
-		sourcemap: true,
-		dir: 'public',
-	},
-	preserveEntrySignatures: false,
-	plugins: [
-		svelte({
-			// enable run-time checks when not in production
-			dev: !production,
-			// we'll extract any component CSS out into
-			// a separate file — better for performance
-			css: css => {
-				css.write('bundle.css');
-			}
-		}),
-
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration —
-		// consult the documentation for details:
-		// https://github.com/rollup/rollup-plugin-commonjs
-		resolve(),
-		commonjs(),
-
-		replace({
-			'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'),
-            'env': JSON.stringify({...config().parsed /* attached the .env config*/})
-		}),
-
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-
-	watch: {
-		clearScreen: false
-	}
-};
diff --git a/ui/src/app.html b/ui/src/app.html
new file mode 100644
index 0000000..025cb9c
--- /dev/null
+++ b/ui/src/app.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="de">
+    <head>
+        <base href="/"/>
+        <meta charset="utf8">
+        <meta name="viewport" content="width=device-width">
+
+        <title>Svelte app</title>
+
+        <link rel='icon' type='image/png' href='%sveltekit.assets%/favicon.png'>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <meta name="color-scheme" content="dark light"/>
+        %sveltekit.head%
+        <link rel="stylesheet" href="%sveltekit.assets%/global.css" media="screen">
+        <link rel="stylesheet" href="%sveltekit.assets%/print.css" media="print">
+    </head>
+
+    <body>
+        <div style="display: contents">
+            %sveltekit.body%
+        </div>
+    </body>
+</html>
diff --git a/ui/src/components/App.svelte b/ui/src/components/App.svelte
deleted file mode 100644
index 0577043..0000000
--- a/ui/src/components/App.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<header>
-    Arbeitszeiten
-</header>
-<Nav {active} />
-<main>
-    <svelte:component this={Route} {params} />
-</main>
-<footer><p>© Torsten Lücke 2021</p></footer>
-
-<script>
-	import Navaid from 'navaid';
-	import { onDestroy } from 'svelte';
-	import Nav from './Nav.svelte';
-
-	let Route, params={}, active;
-	let uri = location.pathname;
-	$: active = uri.split('/').pop() || 'home';
-
-	function run(thunk, obj) {
-		const target = uri;
-
-		thunk.then(m => {
-			if (target !== uri) return;
-
-			params = obj || {};
-
-			if (m.preload) {
-				m.preload({ params }).then(() => {
-					if (target !== uri) return;
-					Route = m.default;
-					window.scrollTo(0, 0);
-				});
-			} else {
-				Route = m.default;
-				window.scrollTo(0, 0);
-			}
-		});
-	}
-
-	function track(obj) {
-		uri = obj.state || obj.uri || location.pathname;
-	}
-
-	addEventListener('replacestate', track);
-	addEventListener('pushstate', track);
-	addEventListener('popstate', track);
-
-	const router = Navaid('/')
-		.on('/', () => run(import('../routes/Home.svelte')))
-		.on('/views/weekly', () => run(import('../routes/WeeklyViews.svelte')))
-		.on('/views/monthly', () => run(import('../routes/MonthlyViews.svelte')))
-		.on('/views/yearly', () => run(import('../routes/YearlyViews.svelte')))
-		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte')))
-		.listen();
-
-	onDestroy(router.unlisten);
-</script>
\ No newline at end of file
diff --git a/ui/src/components/Nav.svelte b/ui/src/components/Nav.svelte
deleted file mode 100644
index a8fad56..0000000
--- a/ui/src/components/Nav.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--suppress HtmlUnknownTarget -->
-<nav>
-	<ul>
-		<li class="{ isActive('home') }"><a href="/">Home</a></li>
-		<li class="{ isActive('weekly') }"><a href="/views/weekly">Wochenansicht</a></li>
-		<li class="{ isActive('monthly') }"><a href="/views/monthly">Monatsansicht</a></li>
-		<li class="{ isActive('yearly') }"><a href="/views/yearly">Jahresansicht</a></li>
-		<li class="{ isActive('working-hours') }"><a href="/working-hours">Einträge</a></li>
-	</ul>
-</nav>
-
-<script>
-	export let active;
-	$: isActive = str => active === str ? 'selected' : '';
-</script>
diff --git a/ui/src/components/Repositories.svelte b/ui/src/components/Repositories.svelte
deleted file mode 100644
index 15361bd..0000000
--- a/ui/src/components/Repositories.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script context="module">
-    const MyFetch = {
-        'post': async (rest_url, request_body) => {
-            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(request_body), {})
-        },
-        'put': async (rest_url, http_body) => {
-            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(http_body, true), {})
-        },
-        'get': async (rest_url, query_parameters) => {
-            if (query_parameters !== null) {
-                let filter = []
-                for (let parameter in query_parameters) {
-                    filter.push(parameter + '=' + query_parameters[parameter])
-                }
-                if (filter.length > 0) {
-                    rest_url += '?' + filter.join('&')
-                }
-            }
-            return MyFetch._fetch(rest_url, {})
-        },
-        '_fetch': async (rest_url, request_options) => {
-            // noinspection JSUnresolvedVariable
-            let response = await MyFetch._pureFetch(rest_url, request_options).catch(err => {
-                console.error(err)
-                return null
-            })
-            if (!response.ok) {
-                throw new Error('Fail!')
-            }
-            return response.json()
-        },
-        '_buildRequestOptions': (request_body, needPut) => {
-            return {
-                method: (needPut === true) ? 'PUT' : 'POST',
-                mode: 'cors',
-                cache: 'no-cache',
-                credentials: 'omit',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: request_body,
-            }
-        },
-        '_pureFetch': async (rest_url, request_options) => {
-            // noinspection JSUnresolvedVariable
-            return await fetch(env.API_URL + rest_url, request_options)
-        }
-    }
-
-    export const WorkingHoursRepository = {
-        'browse': (startDate = '', endDate = '') => {
-            let filter = {}
-            if (startDate !== '') {
-                filter['start-date'] = startDate
-            }
-            if (endDate !== '') {
-                filter['end-date'] = endDate
-            }
-            return MyFetch.get('/working-hours', filter)
-        },
-
-        'read': date => {
-            return MyFetch.get('/working-hours/' + date)
-        },
-
-        'readOrNew': async date => {
-            let response = await MyFetch._pureFetch('/working-hours/' + date)
-            if (response.status === 404) {
-                return {workingTime: '00:00:00', workingDay: date}
-            } else if (!response.ok) {
-                throw new Error('Fail!')
-            }
-            return response.json()
-        },
-
-        'add': async (record) => {
-            console.debug(record);
-            return MyFetch.post('/working-hours', JSON.stringify(record))
-        },
-
-        'update': async (date, record) => {
-            console.debug(record);
-            return MyFetch.put('/working-hours/' + date, JSON.stringify(record))
-        },
-
-        'addOrUpdate': async (date, record) => {
-            console.debug(record);
-            let request_options = MyFetch._buildRequestOptions(JSON.stringify(record))
-            let response = await MyFetch._pureFetch('/working-hours', request_options)
-            if (response.status === 409) {
-                return WorkingHoursRepository.update(date, record)
-            } else if (!response.ok) {
-                throw new Error('Fail!')
-            }
-            return response.json()
-        }
-    }
-
-    export const WorkingHoursViewsRepository = {
-        'weekly': async () => {
-            return MyFetch.get('/views/working-hours/weekly')
-        },
-        'monthly': async () => {
-            return MyFetch.get('/views/working-hours/monthly')
-        },
-        'yearly': async () => {
-            return MyFetch.get('/views/working-hours/yearly')
-        },
-    }
-</script>
\ No newline at end of file
diff --git a/ui/src/index.js b/ui/src/index.js
deleted file mode 100644
index 8d5bff5..0000000
--- a/ui/src/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import App from './components/App.svelte';
-
-new App({
-	target: document.body
-});
diff --git a/ui/src/lib/Models.svelte.js b/ui/src/lib/Models.svelte.js
new file mode 100644
index 0000000..099129a
--- /dev/null
+++ b/ui/src/lib/Models.svelte.js
@@ -0,0 +1,17 @@
+export class PeriodRecord {
+    /**
+     * @param {{ workingDays: Number; totalHours: any; overtime: string; period: string; }} record
+     */
+    constructor(record) {
+        this.workingDays = Number(record.workingDays)
+        this.totalHours = String(record.totalHours)
+        this.period = String(record.period)
+        this.overtime = String('##:##:##')
+        this.isMinus = false
+        const interval = record.overtime.match(/^(-?)(\d\d:\d\d:\d\d)$/)
+        if (interval) {
+            this.overtime = String(interval[2])
+            this.isMinus = String(interval[1]) === '-'
+        }
+    }
+}
diff --git a/ui/src/lib/Repositories.svelte b/ui/src/lib/Repositories.svelte
new file mode 100644
index 0000000..f60d4e7
--- /dev/null
+++ b/ui/src/lib/Repositories.svelte
@@ -0,0 +1,165 @@
+<script module>
+
+    const MyFetch = {
+        /**
+         * @param {String} rest_url
+         * @param {String} request_body
+         */
+        'post': async (rest_url, request_body) => {
+            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(request_body, false))
+        },
+        /**
+         * @param {String} rest_url
+         * @param {String} http_body
+         */
+        'put': async (rest_url, http_body) => {
+            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(http_body, true))
+        },
+        /**
+         * @param {String} rest_url
+         * @param {Object|null} query_parameters
+         */
+        'get': async (rest_url, query_parameters = null) => {
+            if (query_parameters !== null) {
+                let filter = []
+                for (let parameter in query_parameters) {
+                    filter.push(parameter + '=' + query_parameters[parameter])
+                }
+                if (filter.length > 0) {
+                    rest_url += '?' + filter.join('&')
+                }
+            }
+            return MyFetch._fetch(rest_url, {})
+        },
+        /**
+         * @param {String} rest_url
+         * @param {Object} request_options
+         */
+        '_fetch': async (rest_url, request_options) => {
+            // noinspection JSUnresolvedVariable
+            let response = await MyFetch._pureFetch(rest_url, request_options).catch(err => {
+                console.error(err)
+                return null
+            })
+            if (response === null || !response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        },
+        /**
+         *  @param {String} request_body
+         * @param {Boolean} needPut
+         */
+        '_buildRequestOptions': (request_body, needPut) => {
+            return {
+                method: (needPut === true) ? 'PUT' : 'POST',
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'omit',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: request_body,
+            }
+        },
+        /**
+         * @param {String} rest_url
+         * @param {Object} request_options
+         */
+        '_pureFetch': async (rest_url, request_options = {}) => {
+            // noinspection JSUnresolvedVariable
+            return await fetch(rest_url, request_options)
+        }
+    }
+
+    export const WorkingHoursRepository = {
+        /**
+         * @param {String} api_url
+         * @param {String} startDate
+         * @param {String} endDate
+         */
+        'browse': (api_url, startDate = '', endDate = '') => {
+            let filter = {}
+            if (startDate !== '') {
+                filter['start-date'] = startDate
+            }
+            if (endDate !== '') {
+                filter['end-date'] = endDate
+            }
+            return MyFetch.get(api_url + '/working-hours', filter)
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         */
+        'read': (api_url, date) => {
+            return MyFetch.get(api_url + '/working-hours/' + date)
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         */
+        'readOrNew': async (api_url, date) => {
+            let response = await MyFetch._pureFetch(api_url + '/working-hours/' + date)
+            if (response.status === 404) {
+                return {workingTime: '00:00:00', workingDay: date}
+            } else if (!response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        },
+        /**
+         * @param {String} api_url
+         * @param {Object} record
+         */
+        'add': async (api_url, record) => {
+            return MyFetch.post(api_url + '/working-hours', JSON.stringify(record))
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         * @param {Object} record
+         */
+        'update': async (api_url, date, record) => {
+            console.debug(record);
+            return MyFetch.put(api_url + '/working-hours/' + date, JSON.stringify(record))
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         * @param {Object} record
+         */
+        'addOrUpdate': async (api_url, date, record) => {
+            console.debug(record);
+            let request_options = MyFetch._buildRequestOptions(JSON.stringify(record), false)
+            let response = await MyFetch._pureFetch(api_url + '/working-hours', request_options)
+            if (response.status === 409) {
+                return WorkingHoursRepository.update(api_url, date, record)
+            } else if (!response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        }
+    }
+
+    export const WorkingHoursViewsRepository = {
+        /**
+         * @param {String} api_url
+         */
+        'weekly': async api_url => {
+            return MyFetch.get(api_url + '/views/working-hours/weekly', {})
+        },
+        /**
+         * @param {String} api_url
+         */
+        'monthly': async api_url => {
+            return MyFetch.get(api_url + '/views/working-hours/monthly', {})
+        },
+        /**
+         * @param {String} api_url
+         */
+        'yearly': async api_url => {
+            return MyFetch.get(api_url + '/views/working-hours/yearly', {})
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/ui/src/lib/Views.svelte b/ui/src/lib/Views.svelte
new file mode 100644
index 0000000..6b4556a
--- /dev/null
+++ b/ui/src/lib/Views.svelte
@@ -0,0 +1,63 @@
+<script>
+    import {PeriodRecord} from './Models.svelte.js'
+
+    /**
+     * @type {{ promise: Promise<object>; title: string;}}
+     */
+    let {params} = $props();
+    /** @type PeriodRecord[] **/
+    let records = $state([])
+    let isLoading = $state(true)
+    const init = async () => await params.promise.then(
+        /**
+         * @param {Array<object>} data
+         */
+        data => {
+            records = data.map(row => new PeriodRecord(row))
+            isLoading = false
+        }
+    )
+    init()
+</script>
+
+<svelte:head>
+    <title>{params.title}</title>
+</svelte:head>
+
+<section id="list-records">
+    <header>
+        <h1>{params.title}</h1>
+    </header>
+    <article>
+        {#if isLoading === true}
+            <p>Loading...</p>
+        {:else}
+            <table>
+                <colgroup>
+                    <col/>
+                    <col/>
+                    <col/>
+                    <col/>
+                </colgroup>
+                <thead>
+                <tr>
+                    <th>Zeitraum</th>
+                    <th>Arbeitstage</th>
+                    <th>Arbeitsstunden</th>
+                    <th>Über- / Unterstunden</th>
+                </tr>
+                </thead>
+                <tbody>
+                {#each records as record}
+                    <tr>
+                        <td>{record.period}</td>
+                        <td>{record.workingDays}</td>
+                        <td>{record.totalHours}</td>
+                        <td class="{record.isMinus ? 'absence-time' : ''}">{record.overtime}</td>
+                    </tr>
+                {/each}
+                </tbody>
+            </table>
+        {/if}
+    </article>
+</section>
\ No newline at end of file
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
new file mode 100644
index 0000000..8e70e58
--- /dev/null
+++ b/ui/src/routes/+layout.svelte
@@ -0,0 +1,19 @@
+<script>
+    let { children } = $props();
+</script>
+
+<nav>
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/views/weekly">Wochenansicht</a></li>
+        <li><a href="/views/monthly">Monatsansicht</a></li>
+        <li><a href="/views/yearly">Jahresansicht</a></li>
+<!--        <li><a href="/working-hours">Einträge</a></li>-->
+    </ul>
+</nav>
+
+<main>
+{@render children()}
+</main>
+
+<footer><p>© Torsten Lücke 2021</p></footer>
\ No newline at end of file
diff --git a/ui/src/routes/+page.server.js b/ui/src/routes/+page.server.js
new file mode 100644
index 0000000..5327b34
--- /dev/null
+++ b/ui/src/routes/+page.server.js
@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "../lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Wochenansicht',
+        promise: WorkingHoursViewsRepository.weekly(env.API_URL)
+    };
+}
\ No newline at end of file
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
new file mode 100644
index 0000000..f542f37
--- /dev/null
+++ b/ui/src/routes/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+
diff --git a/ui/src/routes/Home.svelte b/ui/src/routes/Home.svelte
deleted file mode 100644
index 1d66b11..0000000
--- a/ui/src/routes/Home.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<WeeklyViews />
-
-<script>
-    import WeeklyViews from "./WeeklyViews.svelte";
-    export const params = {};
-</script>
\ No newline at end of file
diff --git a/ui/src/routes/MonthlyViews.svelte b/ui/src/routes/MonthlyViews.svelte
deleted file mode 100644
index b2ac1f2..0000000
--- a/ui/src/routes/MonthlyViews.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-    import Views from "./Views.svelte";
-    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params
-    params = {
-        title: 'Monatsansicht',
-        promise: WorkingHoursViewsRepository.monthly()
-    }
-</script>
-
-<Views {params} />
\ No newline at end of file
diff --git a/ui/src/routes/Views.svelte b/ui/src/routes/Views.svelte
deleted file mode 100644
index 3c6f255..0000000
--- a/ui/src/routes/Views.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script>
-    import { paginate, PaginationNav } from 'svelte-paginate'
-
-    export let params = {}
-    let records = []
-    let isLoading = true
-    console.log(params)
-    let currentPage = 1
-    let pageSize = 15
-    $: paginatedItems = paginate({ items: records, pageSize, currentPage })
-    if (!String.prototype.startsWith) {
-        String.prototype.startsWith = function (searchString, position) {
-            position = position || 0
-            return this.indexOf(searchString, position) === position
-        }
-    }
-    $: isNegative = time => time.startsWith('-') ? 'absence-time' : ''
-    $: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time
-
-    const init = async () => await params.promise.then(data => {
-        records = data
-        isLoading = false
-    })
-    init()
-</script>
-
-<svelte:head>
-    <title>{params.title}</title>
-</svelte:head>
-
-<section id="list-records">
-    <header>
-        <h1>{params.title}</h1>
-    </header>
-    <article>
-        {#if isLoading === true}
-            <p>Loading...</p>
-        {:else}
-            <table>
-                <colgroup>
-                    <col/>
-                    <col/>
-                    <col/>
-                    <col/>
-                </colgroup>
-                <thead>
-                <tr>
-                    <th>Zeitraum</th>
-                    <th>Arbeitstage</th>
-                    <th>Arbeitsstunden</th>
-                    <th>Über- / Unterstunden</th>
-                </tr>
-                </thead>
-                <tbody>
-                {#each paginatedItems as record}
-                    <tr>
-                        <td>{record.period}</td>
-                        <td>{record.workingDays}</td>
-                        <td>{record.totalHours}</td>
-                        <td class="{ isNegative(record.overtime) }">{cutMinusChar(record.overtime)}</td>
-                    </tr>
-                {/each}
-                </tbody>
-                <tfoot>
-                <tr>
-                    <td colspan="4">
-                        <PaginationNav
-                            totalItems="{records.length}"
-                            pageSize="{pageSize}"
-                            currentPage="{currentPage}"
-                            limit="{1}"
-                            showStepOptions="{true}"
-                            on:setPage="{(e) => currentPage = e.detail.page}"
-                        />
-                    </td>
-                </tr>
-                </tfoot>
-            </table>
-        {/if}
-    </article>
-</section>
\ No newline at end of file
diff --git a/ui/src/routes/WeeklyViews.svelte b/ui/src/routes/WeeklyViews.svelte
deleted file mode 100644
index 6700321..0000000
--- a/ui/src/routes/WeeklyViews.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-    import Views from "./Views.svelte";
-    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params
-    params = {
-        title: 'Wochenansicht',
-        promise: WorkingHoursViewsRepository.weekly()
-    }
-</script>
-
-<Views {params} />
\ No newline at end of file
diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte
deleted file mode 100644
index e332845..0000000
--- a/ui/src/routes/WorkingHours.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-    import List from "./WorkingHours/List.svelte";
-    import Formular from "./WorkingHours/Formular.svelte";
-    export const params = {};
-
-    let TITLE = "Bearbeitung Einträge"
-    let activeRecord = null;
-    let currentPage = 1
-</script>
-
-<svelte:head>
-    <title>{TITLE}</title>
-</svelte:head>
-
-{#if activeRecord === null}
-    <section id="list-records">
-        <header>
-            <h1>{TITLE}</h1>
-        </header>
-        <article>
-            <List bind:activeRecord={activeRecord} bind:currentPage/>
-        </article>
-    </section>
-{:else}
-    <section id="edit-record">
-        <header>
-            <h1>{TITLE}</h1>
-        </header>
-        <article>
-            <Formular bind:activeRecord={activeRecord}/>
-        </article>
-    </section>
-{/if}
diff --git a/ui/src/routes/YearlyViews.svelte b/ui/src/routes/YearlyViews.svelte
deleted file mode 100644
index f3ea452..0000000
--- a/ui/src/routes/YearlyViews.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-    import Views from "./Views.svelte";
-    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params
-    params = {
-        title: 'Jahresansicht',
-        promise: WorkingHoursViewsRepository.yearly()
-    }
-</script>
-
-<Views {params} />
\ No newline at end of file
diff --git a/ui/src/routes/views/monthly/+page.server.js b/ui/src/routes/views/monthly/+page.server.js
new file mode 100644
index 0000000..86574cb
--- /dev/null
+++ b/ui/src/routes/views/monthly/+page.server.js
@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Monatsansicht',
+        promise: WorkingHoursViewsRepository.monthly(env.API_URL)
+    };
+}
\ No newline at end of file
diff --git a/ui/src/routes/views/monthly/+page.svelte b/ui/src/routes/views/monthly/+page.svelte
new file mode 100644
index 0000000..f542f37
--- /dev/null
+++ b/ui/src/routes/views/monthly/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+
diff --git a/ui/src/routes/views/weekly/+page.server.js b/ui/src/routes/views/weekly/+page.server.js
new file mode 100644
index 0000000..2c2d14f
--- /dev/null
+++ b/ui/src/routes/views/weekly/+page.server.js
@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Wochenansicht',
+        promise: WorkingHoursViewsRepository.weekly(env.API_URL)
+    };
+}
\ No newline at end of file
diff --git a/ui/src/routes/views/weekly/+page.svelte b/ui/src/routes/views/weekly/+page.svelte
new file mode 100644
index 0000000..f542f37
--- /dev/null
+++ b/ui/src/routes/views/weekly/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+
diff --git a/ui/src/routes/views/yearly/+page.server.js b/ui/src/routes/views/yearly/+page.server.js
new file mode 100644
index 0000000..80c2835
--- /dev/null
+++ b/ui/src/routes/views/yearly/+page.server.js
@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Jahresansicht',
+        promise: WorkingHoursViewsRepository.yearly(env.API_URL)
+    };
+}
\ No newline at end of file
diff --git a/ui/src/routes/views/yearly/+page.svelte b/ui/src/routes/views/yearly/+page.svelte
new file mode 100644
index 0000000..f542f37
--- /dev/null
+++ b/ui/src/routes/views/yearly/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+
diff --git a/ui/public/favicon.png b/ui/static/favicon.png
similarity index 100%
rename from ui/public/favicon.png
rename to ui/static/favicon.png
diff --git a/ui/public/fonts/Lobster_1.3.otf b/ui/static/fonts/Lobster_1.3.otf
similarity index 100%
rename from ui/public/fonts/Lobster_1.3.otf
rename to ui/static/fonts/Lobster_1.3.otf
diff --git a/ui/public/fonts/opensans-bold.eot b/ui/static/fonts/opensans-bold.eot
similarity index 100%
rename from ui/public/fonts/opensans-bold.eot
rename to ui/static/fonts/opensans-bold.eot
diff --git a/ui/public/fonts/opensans-bold.svg b/ui/static/fonts/opensans-bold.svg
similarity index 100%
rename from ui/public/fonts/opensans-bold.svg
rename to ui/static/fonts/opensans-bold.svg
diff --git a/ui/public/fonts/opensans-bold.ttf b/ui/static/fonts/opensans-bold.ttf
similarity index 100%
rename from ui/public/fonts/opensans-bold.ttf
rename to ui/static/fonts/opensans-bold.ttf
diff --git a/ui/public/fonts/opensans-bold.woff b/ui/static/fonts/opensans-bold.woff
similarity index 100%
rename from ui/public/fonts/opensans-bold.woff
rename to ui/static/fonts/opensans-bold.woff
diff --git a/ui/public/fonts/opensans-bolditalic.eot b/ui/static/fonts/opensans-bolditalic.eot
similarity index 100%
rename from ui/public/fonts/opensans-bolditalic.eot
rename to ui/static/fonts/opensans-bolditalic.eot
diff --git a/ui/public/fonts/opensans-bolditalic.svg b/ui/static/fonts/opensans-bolditalic.svg
similarity index 100%
rename from ui/public/fonts/opensans-bolditalic.svg
rename to ui/static/fonts/opensans-bolditalic.svg
diff --git a/ui/public/fonts/opensans-bolditalic.ttf b/ui/static/fonts/opensans-bolditalic.ttf
similarity index 100%
rename from ui/public/fonts/opensans-bolditalic.ttf
rename to ui/static/fonts/opensans-bolditalic.ttf
diff --git a/ui/public/fonts/opensans-bolditalic.woff b/ui/static/fonts/opensans-bolditalic.woff
similarity index 100%
rename from ui/public/fonts/opensans-bolditalic.woff
rename to ui/static/fonts/opensans-bolditalic.woff
diff --git a/ui/public/fonts/opensans-italic.eot b/ui/static/fonts/opensans-italic.eot
similarity index 100%
rename from ui/public/fonts/opensans-italic.eot
rename to ui/static/fonts/opensans-italic.eot
diff --git a/ui/public/fonts/opensans-italic.svg b/ui/static/fonts/opensans-italic.svg
similarity index 100%
rename from ui/public/fonts/opensans-italic.svg
rename to ui/static/fonts/opensans-italic.svg
diff --git a/ui/public/fonts/opensans-italic.ttf b/ui/static/fonts/opensans-italic.ttf
similarity index 100%
rename from ui/public/fonts/opensans-italic.ttf
rename to ui/static/fonts/opensans-italic.ttf
diff --git a/ui/public/fonts/opensans-italic.woff b/ui/static/fonts/opensans-italic.woff
similarity index 100%
rename from ui/public/fonts/opensans-italic.woff
rename to ui/static/fonts/opensans-italic.woff
diff --git a/ui/public/fonts/opensans-regular.eot b/ui/static/fonts/opensans-regular.eot
similarity index 100%
rename from ui/public/fonts/opensans-regular.eot
rename to ui/static/fonts/opensans-regular.eot
diff --git a/ui/public/fonts/opensans-regular.svg b/ui/static/fonts/opensans-regular.svg
similarity index 100%
rename from ui/public/fonts/opensans-regular.svg
rename to ui/static/fonts/opensans-regular.svg
diff --git a/ui/public/fonts/opensans-regular.ttf b/ui/static/fonts/opensans-regular.ttf
similarity index 100%
rename from ui/public/fonts/opensans-regular.ttf
rename to ui/static/fonts/opensans-regular.ttf
diff --git a/ui/public/fonts/opensans-regular.woff b/ui/static/fonts/opensans-regular.woff
similarity index 100%
rename from ui/public/fonts/opensans-regular.woff
rename to ui/static/fonts/opensans-regular.woff
diff --git a/ui/public/meyer_resets.css b/ui/static/meyer_resets.css
similarity index 100%
rename from ui/public/meyer_resets.css
rename to ui/static/meyer_resets.css
diff --git a/ui/svelte.config.js b/ui/svelte.config.js
new file mode 100644
index 0000000..2dc206d
--- /dev/null
+++ b/ui/svelte.config.js
@@ -0,0 +1,6 @@
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+    kit: {}
+};
+
+export default config;
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
new file mode 100644
index 0000000..0b2d886
--- /dev/null
+++ b/ui/tsconfig.json
@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/ui/vite.config.js b/ui/vite.config.js
new file mode 100644
index 0000000..a3eb481
--- /dev/null
+++ b/ui/vite.config.js
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    plugins: [sveltekit()]
+});