Docker shit

rename shit
Update backend/migrations/20260422094717_user_table.sql
2026-07-14 19:23:14 +02:00 · 2026-07-14 17:06:47 +02:00 · 2026-06-20 13:34:46 +02:00 · 2026-06-19 22:35:11 +02:00 · 2026-06-19 20:26:57 +02:00 · 2026-06-19 20:21:47 +02:00
52 changed files with 1512 additions and 1741 deletions
@@ -0,0 +1,13 @@
 target/
 backend/target/
 frontend/target/
 frontend/dist/
 frontend/node_modules/
 dist/
 .git/
 .idea/
 .env
 .antigravitycli/
 *.pdb
 **/*.rs.bk
 info ding video.mp4
@@ -21,9 +21,9 @@ frontend/node_modules/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 .idea/
 .antigravitycli/
 # Added by cargo
 /target
 .antigravitycli/
@@ -23,6 +23,12 @@ version = "1.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
 [[package]]
 name = "anymap2"
 version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c"
 [[package]]
 name = "argon2"
 version = "0.5.3"
@@ -208,6 +214,12 @@ dependencies = [
 "generic-array",
 ]
 [[package]]
 name = "boolinator"
 version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cfa8873f51c92e232f9bac4065cddef41b714152812bfc5f7672ba16d6ef8cd9"
 [[package]]
 name = "bumpalo"
 version = "3.20.2"
@@ -653,10 +665,11 @@ dependencies = [
 "gloo-storage 0.4.0",
 "serde",
 "serde_json",
 "theme",
 "wasm-bindgen",
 "wasm-bindgen-futures",
 "web-sys",
- "yew",
+ "yew 0.23.0",
 "yew-router",
 ]
@@ -795,6 +808,44 @@ dependencies = [
 "wasip3",
 ]
 [[package]]
 name = "gloo"
 version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "28999cda5ef6916ffd33fb4a7b87e1de633c47c0dc6d97905fee1cdaa142b94d"
 dependencies = [
 "gloo-console 0.2.3",
 "gloo-dialogs 0.1.1",
 "gloo-events 0.1.2",
 "gloo-file 0.2.3",
 "gloo-history 0.1.5",
 "gloo-net 0.3.1",
 "gloo-render 0.1.1",
 "gloo-storage 0.2.2",
 "gloo-timers 0.2.6",
 "gloo-utils 0.1.7",
 "gloo-worker 0.2.1",
 ]
 [[package]]
 name = "gloo"
 version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cd35526c28cc55c1db77aed6296de58677dbab863b118483a27845631d870249"
 dependencies = [
 "gloo-console 0.3.0",
 "gloo-dialogs 0.2.0",
 "gloo-events 0.2.0",
 "gloo-file 0.3.0",
 "gloo-history 0.2.2",
 "gloo-net 0.4.0",
 "gloo-render 0.2.0",
 "gloo-storage 0.3.0",
 "gloo-timers 0.3.0",
 "gloo-utils 0.2.0",
 "gloo-worker 0.4.0",
 ]
 [[package]]
 name = "gloo"
 version = "0.11.0"
@@ -833,6 +884,19 @@ dependencies = [
 "gloo-worker 0.6.0",
 ]
 [[package]]
 name = "gloo-console"
 version = "0.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "82b7ce3c05debe147233596904981848862b068862e9ec3e34be446077190d3f"
 dependencies = [
 "gloo-utils 0.1.7",
 "js-sys",
 "serde",
 "wasm-bindgen",
 "web-sys",
 ]
 [[package]]
 name = "gloo-console"
 version = "0.3.0"
@@ -859,6 +923,16 @@ dependencies = [
 "web-sys",
 ]
 [[package]]
 name = "gloo-dialogs"
 version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "67062364ac72d27f08445a46cab428188e2e224ec9e37efdba48ae8c289002e6"
 dependencies = [
 "wasm-bindgen",
 "web-sys",
 ]
 [[package]]
 name = "gloo-dialogs"
 version = "0.2.0"
@@ -879,6 +953,16 @@ dependencies = [
 "web-sys",
 ]
 [[package]]
 name = "gloo-events"
 version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "68b107f8abed8105e4182de63845afcc7b69c098b7852a813ea7462a320992fc"
 dependencies = [
 "wasm-bindgen",
 "web-sys",
 ]
 [[package]]
 name = "gloo-events"
 version = "0.2.0"
@@ -899,6 +983,18 @@ dependencies = [
 "web-sys",
 ]
 [[package]]
 name = "gloo-file"
 version = "0.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a8d5564e570a38b43d78bdc063374a0c3098c4f0d64005b12f9bbe87e869b6d7"
 dependencies = [
 "gloo-events 0.1.2",
 "js-sys",
 "wasm-bindgen",
 "web-sys",
 ]
 [[package]]
 name = "gloo-file"
 version = "0.3.0"
@@ -924,6 +1020,22 @@ dependencies = [
 "web-sys",
 ]
 [[package]]
 name = "gloo-history"
 version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "85725d90bf0ed47063b3930ef28e863658a7905989e9929a8708aab74a1d5e7f"
 dependencies = [
 "gloo-events 0.1.2",
 "gloo-utils 0.1.7",
 "serde",
 "serde-wasm-bindgen 0.5.0",
 "serde_urlencoded",
 "thiserror 1.0.69",
 "wasm-bindgen",
 "web-sys",
 ]
 [[package]]
 name = "gloo-history"
 version = "0.2.2"
@@ -934,7 +1046,7 @@ dependencies = [
 "gloo-events 0.2.0",
 "gloo-utils 0.2.0",
 "serde",
- "serde-wasm-bindgen",
+ "serde-wasm-bindgen 0.6.5",
 "serde_urlencoded",
 "thiserror 1.0.69",
 "wasm-bindgen",
@@ -951,13 +1063,55 @@ dependencies = [
 "gloo-events 0.3.0",
 "gloo-utils 0.3.0",
 "serde",
- "serde-wasm-bindgen",
+ "serde-wasm-bindgen 0.6.5",
 "serde_urlencoded",
 "thiserror 2.0.18",
 "wasm-bindgen",
 "web-sys",
 ]
 [[package]]
 name = "gloo-net"
 version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a66b4e3c7d9ed8d315fd6b97c8b1f74a7c6ecbbc2320e65ae7ed38b7068cc620"
 dependencies = [
 "futures-channel",
 "futures-core",
 "futures-sink",
 "gloo-utils 0.1.7",
 "http 0.2.12",
 "js-sys",
 "pin-project",
 "serde",
 "serde_json",
 "thiserror 1.0.69",
 "wasm-bindgen",
 "wasm-bindgen-futures",
 "web-sys",
 ]
 [[package]]
 name = "gloo-net"
 version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8ac9e8288ae2c632fa9f8657ac70bfe38a1530f345282d7ba66a1f70b72b7dc4"
 dependencies = [
 "futures-channel",
 "futures-core",
 "futures-sink",
 "gloo-utils 0.2.0",
 "http 0.2.12",
 "js-sys",
 "pin-project",
 "serde",
 "serde_json",
 "thiserror 1.0.69",
 "wasm-bindgen",
 "wasm-bindgen-futures",
 "web-sys",
 ]
 [[package]]
 name = "gloo-net"
 version = "0.5.0"
@@ -1000,6 +1154,16 @@ dependencies = [
 "web-sys",
 ]
 [[package]]
 name = "gloo-render"
 version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2fd9306aef67cfd4449823aadcd14e3958e0800aa2183955a309112a84ec7764"
 dependencies = [
 "wasm-bindgen",
 "web-sys",
 ]
 [[package]]
 name = "gloo-render"
 version = "0.2.0"
@@ -1020,6 +1184,21 @@ dependencies = [
 "web-sys",
 ]
 [[package]]
 name = "gloo-storage"
 version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5d6ab60bf5dbfd6f0ed1f7843da31b41010515c745735c970e821945ca91e480"
 dependencies = [
 "gloo-utils 0.1.7",
 "js-sys",
 "serde",
 "serde_json",
 "thiserror 1.0.69",
 "wasm-bindgen",
 "web-sys",
 ]
 [[package]]
 name = "gloo-storage"
 version = "0.3.0"
@@ -1050,6 +1229,16 @@ dependencies = [
 "web-sys",
 ]
 [[package]]
 name = "gloo-timers"
 version = "0.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9b995a66bb87bebce9a0f4a95aed01daca4872c050bfcb21653361c03bc35e5c"
 dependencies = [
 "js-sys",
 "wasm-bindgen",
 ]
 [[package]]
 name = "gloo-timers"
 version = "0.3.0"
@@ -1072,6 +1261,19 @@ dependencies = [
 "wasm-bindgen",
 ]
 [[package]]
 name = "gloo-utils"
 version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "037fcb07216cb3a30f7292bd0176b050b7b9a052ba830ef7d5d65f6dc64ba58e"
 dependencies = [
 "js-sys",
 "serde",
 "serde_json",
 "wasm-bindgen",
 "web-sys",
 ]
 [[package]]
 name = "gloo-utils"
 version = "0.2.0"
@@ -1098,6 +1300,42 @@ dependencies = [
 "web-sys",
 ]
 [[package]]
 name = "gloo-worker"
 version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13471584da78061a28306d1359dd0178d8d6fc1c7c80e5e35d27260346e0516a"
 dependencies = [
 "anymap2",
 "bincode",
 "gloo-console 0.2.3",
 "gloo-utils 0.1.7",
 "js-sys",
 "serde",
 "wasm-bindgen",
 "wasm-bindgen-futures",
 "web-sys",
 ]
 [[package]]
 name = "gloo-worker"
 version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "76495d3dd87de51da268fa3a593da118ab43eb7f8809e17eb38d3319b424e400"
 dependencies = [
 "bincode",
 "futures",
 "gloo-utils 0.2.0",
 "gloo-worker-macros 0.1.0",
 "js-sys",
 "pinned",
 "serde",
 "thiserror 1.0.69",
 "wasm-bindgen",
 "wasm-bindgen-futures",
 "web-sys",
 ]
 [[package]]
 name = "gloo-worker"
 version = "0.5.0"
@@ -1490,6 +1728,16 @@ dependencies = [
 "icu_properties",
 ]
 [[package]]
 name = "implicit-clone"
 version = "0.4.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f8a9aa791c7b5a71b636b7a68207fdebf171ddfc593d9c8506ec4cbc527b6a84"
 dependencies = [
 "implicit-clone-derive",
 "indexmap",
 ]
 [[package]]
 name = "implicit-clone"
 version = "0.6.0"
@@ -2089,6 +2337,23 @@ dependencies = [
 "unicode-ident",
 ]
 [[package]]
 name = "prokio"
 version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "03b55e106e5791fa5a13abd13c85d6127312e8e09098059ca2bc9b03ca4cf488"
 dependencies = [
 "futures",
 "gloo 0.8.1",
 "num_cpus",
 "once_cell",
 "pin-project",
 "pinned",
 "tokio",
 "tokio-stream",
 "wasm-bindgen-futures",
 ]
 [[package]]
 name = "quote"
 version = "1.0.45"
@@ -2290,6 +2555,17 @@ dependencies = [
 "serde_derive",
 ]
 [[package]]
 name = "serde-wasm-bindgen"
 version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f3b143e2833c57ab9ad3ea280d21fd34e285a42837aeb0ee301f4f41890fa00e"
 dependencies = [
 "js-sys",
 "serde",
 "wasm-bindgen",
 ]
 [[package]]
 name = "serde-wasm-bindgen"
 version = "0.6.5"
@@ -2737,6 +3013,17 @@ dependencies = [
 "windows-sys 0.61.2",
 ]
 [[package]]
 name = "theme"
 version = "0.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d5379f4c4eb851af44d4d818ba43fac8cff83e9b8e624aedc8a3346ca45065fe"
 dependencies = [
 "serde",
 "web-sys",
 "yew 0.21.0",
 ]
 [[package]]
 name = "thiserror"
 version = "1.0.69"
@@ -3459,6 +3746,31 @@ version = "0.6.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1ffae5123b2d3fc086436f8834ae3ab053a283cfac8fe0a0b8eaae044768a4c4"
 [[package]]
 name = "yew"
 version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5f1a03f255c70c7aa3e9c62e15292f142ede0564123543c1cc0c7a4f31660cac"
 dependencies = [
 "console_error_panic_hook",
 "futures",
 "gloo 0.10.0",
 "implicit-clone 0.4.9",
 "indexmap",
 "js-sys",
 "prokio",
 "rustversion",
 "serde",
 "slab",
 "thiserror 1.0.69",
 "tokio",
 "tracing",
 "wasm-bindgen",
 "wasm-bindgen-futures",
 "web-sys",
 "yew-macro 0.21.0",
 ]
 [[package]]
 name = "yew"
 version = "0.23.0"
@@ -3468,7 +3780,7 @@ dependencies = [
 "console_error_panic_hook",
 "futures",
 "gloo 0.11.0",
- "implicit-clone",
+ "implicit-clone 0.6.0",
 "indexmap",
 "js-sys",
 "rustversion",
@@ -3481,7 +3793,22 @@ dependencies = [
 "wasm-bindgen",
 "wasm-bindgen-futures",
 "web-sys",
- "yew-macro",
+ "yew-macro 0.23.0",
 ]
 [[package]]
 name = "yew-macro"
 version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "02fd8ca5166d69e59f796500a2ce432ff751edecbbb308ca59fd3fe4d0343de2"
 dependencies = [
 "boolinator",
 "once_cell",
 "prettyplease",
 "proc-macro-error",
 "proc-macro2",
 "quote",
 "syn 2.0.117",
 ]
 [[package]]
@@ -3513,7 +3840,7 @@ dependencies = [
 "urlencoding",
 "wasm-bindgen",
 "web-sys",
- "yew",
+ "yew 0.23.0",
 "yew-router-macro",
 ]
@@ -0,0 +1,21 @@
 MIT License
 Copyright (c) 2026 Silas Raffauf
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
@@ -30,8 +30,12 @@ Keys:
 The backend can either be run via `cargo run --release` or `cargo build --release` using the correct target architecture, e.g. 'x86_64-unknown-linux-gnu', 
 the executable will be placed in the `target/release` directory and can then be run via any method
 Alternatively download the executable from the 'Releases' Page for your device
 ### Frontend
-The HTML code for the frontend can be generated by using `trunk build`. The resulting files will end up in the `frontend/dist` directory and can be served over any webserver supporting wasm
+The HTML code for the frontend can be generated by using `trunk build`. The resulting files will end up in the `frontend/dist` directory and can be served over any webserver supporting WASM
 Alternatively download the fontend files from the 'Releases' Page and serve them via any webserver supporting WASM
 > [!NOTE]
 > To install trunk run `cargo install trunk`
@@ -44,6 +48,9 @@ The HTML code for the frontend can be generated by using `trunk build`. The resu
 > }
 > ```
 ### Example
 [![Watch the video]()](https://git.raffauf-clan.de/schn33fuchs/ticketsystem/raw/branch/main/info%20ding%20video.mp4)
 ## Diagrams
 ### Class Diagramm
 #### Backend
@@ -8,7 +8,7 @@ axum = "0.8.9"
 axum-extra = { version = "0.12.6", features = ["cookie", "typed-header", "form"] }
 serde = { workspace = true }
 serde_json = { workspace = true }
-sqlx = { version = "0.8.6", features = ["postgres", "runtime-tokio", "tls-native-tls", "chrono"] }
+sqlx = { version = "0.8.6", features = ["postgres", "runtime-tokio", "tls-native-tls", "chrono", "migrate"] }
 tokio = { version = "1.52.1", features = ["rt-multi-thread", "macros"] }
 dotenv = "0.15.0"
 chrono = { workspace = true }
@@ -6,9 +6,3 @@ CREATE TABLE users (
    pwd TEXT,
    is_admin BOOLEAN NOT NULL DEFAULT false
 );
 INSERT INTO users(last_name, first_name, username, pwd, is_admin) VALUES ('Raffauf', 'Silas', 'raffaufsil', 
    '$argon2id$v=19$m=19456,t=2,p=1$urV91vY49mehWQoShkm6pw$1AGLuMDuFnY1CKuQU9ed89s1u9kvuszQjX+eIXmCBKI', true);
 INSERT INTO users(last_name, first_name, username, pwd, is_admin) VALUES ('Misun', 'Sam', 'misunsam',
    '$argon2id$v=19$m=19456,t=2,p=1$AMmy1zMOQG8Wg1jE5BXhDg$xhYIZPAPPOEoKQMtzWll/uhG8YJQvcpHKQU2++L23o4', true);
@@ -43,7 +43,7 @@ pub fn encode_token(header: &Header, id: String, key: &EncodingKey) -> String {
        expires: expires as usize,
    };
    let token = encode(header, &claims, key);
-    token.expect("token return failed")
+    return token.expect("token return failed");
 }
 /// Decodes and validates a JSON Web Token (JWT).
@@ -77,5 +77,5 @@ pub fn decode_token(token: String, key: &DecodingKey) -> Result<Claims, (StatusC
            (StatusCode::UNAUTHORIZED, Json(error))
        })?
        .claims;
-    Ok(claims)
+    return Ok(claims);
 }
@@ -48,7 +48,13 @@ pub async fn validate_token(
                .headers()
                .get(header::AUTHORIZATION)
                .and_then(|header| header.to_str().ok())
-                .and_then(|value| value.strip_prefix("Bearer ").map(|s| s.to_owned()))
+                .and_then(|value| {
                    if value.starts_with("Bearer ") {
                        Some(value[7..].to_owned())
                    } else {
                        None
                    }
                })
        });
    let token = token.ok_or_else(|| {
@@ -71,7 +77,7 @@ pub async fn validate_token(
        (status, Json(error))
    })?;
-    let uuid = claims.sub.parse::<i16>().map_err(|_| {
+    let uuid = (&claims.sub).parse::<i16>().map_err(|_| {
        let error = json!({
            "status": "error",
            "message": "Invalid user id"
@@ -137,7 +143,13 @@ pub async fn validate_admin(
                .headers()
                .get(header::AUTHORIZATION)
                .and_then(|header| header.to_str().ok())
-                .and_then(|value| value.strip_prefix("Bearer ").map(|s| s.to_owned()))
+                .and_then(|value| {
                    if value.starts_with("Bearer ") {
                        Some(value[7..].to_owned())
                    } else {
                        None
                    }
                })
        });
    let token = token.ok_or_else(|| {
@@ -160,7 +172,7 @@ pub async fn validate_admin(
        (status, Json(error))
    })?;
-    let uuid = claims.sub.parse::<i16>().map_err(|_| {
+    let uuid = (&claims.sub).parse::<i16>().map_err(|_| {
        let error = json!({
            "status": "error",
            "message": "Invalid user id"
@@ -21,8 +21,6 @@ pub struct Env {
    pub token_secret: String,
    /// Frontend origin URL for CORS policy
    pub origin: String,
    /// Backend port number
    pub backend_port: String,
 }
 impl Env {
@@ -47,12 +45,10 @@ impl Env {
        let db_url = std::env::var("DATABASE_URL").expect("DATABASE_URL must be set");
        let token_secret = std::env::var("TOKEN_SECRET").expect("TOKEN_SECRET must be set");
        let origin = std::env::var("ORIGIN").expect("ORIGIN must be set");
        let backend_port = std::env::var("BACKEND_PORT").expect("BACKEND_PORT must be set");
        Env {
            db_url,
            token_secret,
            origin,
            backend_port,
        }
    }
 }
@@ -60,7 +60,7 @@ pub async fn create_user(
        )
    })?;
-    if exist_check.is_some() {
+    if let Some(_) = exist_check {
        return Err((
            StatusCode::BAD_REQUEST,
            Json(json!({"status": "error", "message": "user already exists"})),
@@ -90,10 +90,10 @@ pub async fn create_user(
        })?;
    if user.rows_affected() < 1 {
-        Err((
+        return Err((
            StatusCode::INTERNAL_SERVER_ERROR,
            Json(json!({"status": "error", "message": "Error creating user"})),
-        ))
+        ));
    } else {
        Ok(Json(json!({"status": "success", "result": "User created"})))
    }
@@ -145,19 +145,19 @@ pub async fn login(
        .ok_or_else(|| {
            (
                StatusCode::BAD_REQUEST,
-                Json(json!({"status": "error", "message": "Ungültiger Benutzername"})),
+                Json(json!({"status": "error", "message": "Invalid username"})),
            )
        })?;
    let pwd_hash = PasswordHash::new(&user.pwd);
    let valid_pwd = Argon2::default()
-        .verify_password(request.pwd.as_bytes(), &pwd_hash.unwrap())
+        .verify_password(&request.pwd.as_bytes(), &pwd_hash.unwrap())
        .is_ok();
    if !valid_pwd {
        let error_response = serde_json::json!({
            "status": "error",
-            "message": "Ungültiges passwort"
+            "message": "Invalid password"
        });
        return Err((StatusCode::BAD_REQUEST, Json(error_response)));
    }
@@ -338,7 +338,10 @@ pub async fn get_users(
            (StatusCode::INTERNAL_SERVER_ERROR, Json(error))
        })?;
-    let response = users.iter().map(filter_user).collect::<Vec<FilteredUser>>();
+    let response = users
        .iter()
        .map(|user| filter_user(&user))
        .collect::<Vec<FilteredUser>>();
    let json_respnse = json!(response);
    Ok(Json(json_respnse))
 }
@@ -369,20 +372,22 @@ pub async fn get_user_by_id(
    match query {
        Ok(user) => {
            let response = serde_json::json!(filter_user(&user));
-            Ok(Json(response))
+            return Ok(Json(response));
        }
        Err(sqlx::Error::RowNotFound) => {
            let error_response = serde_json::json!({
                "status": "fail",
                "message": format!("User with ID {} not found", id)
            });
-            Err((StatusCode::NOT_FOUND, Json(error_response)))
+            return Err((StatusCode::NOT_FOUND, Json(error_response)));
        }
-        Err(e) => Err((
+        Err(e) => {
            return Err((
                StatusCode::INTERNAL_SERVER_ERROR,
                Json(json!({"status": "error", "message": format!("{:?}", e)})),
-        )),
+            ));
        }
    };
 }
 /// Updates an existing user's information.
@@ -410,6 +415,7 @@ pub async fn update_user(
    State(data): State<Arc<AppState>>,
    Json(body): Json<UserUpdateScheme>,
 ) -> Result<impl IntoResponse, (StatusCode, Json<serde_json::Value>)> {
    let update_result = if !body.new_pwd.is_empty() {
        let argon = Argon2::default();
        let salt = SaltString::generate(&mut OsRng);
        let hashed_pwd = match argon.hash_password(body.new_pwd.clone().as_bytes(), &salt) {
@@ -417,15 +423,25 @@ pub async fn update_user(
            Err(e) => panic!("Error hashing {:}", e),
        };
-    let update_result = sqlx::query(r#"UPDATE users SET first_name = $1, last_name = $2, username = $3, pwd = $4, is_admin = $5 WHERE id = $6"#)
+        sqlx::query(r#"UPDATE users SET first_name = $1, last_name = $2, username = $3, pwd = $4, is_admin = $5 WHERE id = $6"#)
            .bind(body.first_name.to_owned())
            .bind(body.last_name.to_owned())
            .bind(body.username.to_owned())
-        .bind(&hashed_pwd)
+            .bind(hashed_pwd)
            .bind(body.make_admin.to_owned())
            .bind(id)
            .execute(&data.db)
            .await
    } else {
        sqlx::query(r#"UPDATE users SET first_name = $1, last_name = $2, username = $3, is_admin = $4 WHERE id = $5"#)
            .bind(body.first_name.to_owned())
            .bind(body.last_name.to_owned())
            .bind(body.username.to_owned())
            .bind(body.make_admin.to_owned())
            .bind(id)
            .execute(&data.db)
            .await
    }
    .map_err(|e| {
        (
            StatusCode::INTERNAL_SERVER_ERROR,
@@ -567,10 +583,10 @@ pub async fn setup_initial_admin(
        })?;
    if user.rows_affected() < 1 {
-        Err((
+        return Err((
            StatusCode::INTERNAL_SERVER_ERROR,
            Json(json!({"status": "error", "message": "Error creating admin user"})),
-        ))
+        ));
    } else {
        Ok(Json(
            json!({"status": "success", "result": "Admin user created"}),
@@ -611,6 +627,6 @@ pub fn filter_user(user: &User) -> FilteredUser {
        first_name: user.first_name.clone(),
        last_name: user.last_name.clone(),
        username: user.username.clone(),
-        is_admin: user.is_admin,
+        is_admin: user.is_admin.clone(),
    }
 }
@@ -230,22 +230,22 @@ pub async fn get_ticket_by_id(
                user_last_name: row.get("last_name"),
            };
            let response = serde_json::json!(ticket_response);
-            Ok(Json(response))
+            return Ok(Json(response));
        }
        Err(sqlx::Error::RowNotFound) => {
            let error_response = serde_json::json!({
                "status": "fail",
                "message": format!("Ticket with ID {} not found", id)
            });
-            Err((StatusCode::NOT_FOUND, Json(error_response)))
+            return Err((StatusCode::NOT_FOUND, Json(error_response)));
        }
        Err(e) => {
-            Err((
+            return Err((
                StatusCode::INTERNAL_SERVER_ERROR,
                Json(json!({"status": "error", "message": format!("{:?}", e)})),
-            ))
+            ));
        }
        }
    };
 }
 /// Updates a ticket's status.
@@ -32,8 +32,10 @@ use crate::env::Env;
 /// - `db`: PostgreSQL connection pool for database access (via `sqlx::PgPool`)
 /// - `env`: [`Env`] configuration loaded from environment variables
 pub struct AppState {
-    db: PgPool,
+    /// PostgreSQL connection pool for all database operations
-    env: Env,
+    pub db: PgPool,
    /// Environment configuration with secrets and settings
    pub env: Env,
 }
 /// Main application entry point.
@@ -64,7 +66,7 @@ async fn main() {
    let database_url = &env.db_url;
    // Establish connection pool to PostgreSQL
-    let pool = match PgPoolOptions::new().connect(database_url).await {
+    let pool = match PgPoolOptions::new().connect(&database_url).await {
        Ok(pool) => {
            println!("Database connection successful");
            pool
@@ -75,6 +77,14 @@ async fn main() {
        }
    };
    // Run database migrations on container/application startup
    println!("Running database migrations...");
    if let Err(err) = sqlx::migrate!("./migrations").run(&pool).await {
        println!("Failed to run database migrations: {:?}", err);
        std::process::exit(1);
    }
    println!("Database migrations completed successfully");
    // Configure CORS to allow requests from frontend
    let cors = CorsLayer::new()
        .allow_origin(env.origin.parse::<HeaderValue>().unwrap())
@@ -90,7 +100,6 @@ async fn main() {
    .layer(cors);
    // Start listening for incoming connections
-    let uri = format!("0.0.0.0:{}", env.backend_port);
+    let listener = tokio::net::TcpListener::bind("0.0.0.0:8001").await.unwrap();
    let listener = tokio::net::TcpListener::bind(&uri).await.unwrap();
    let _ = axum::serve(listener, app).await;
 }
@@ -33,15 +33,25 @@ use serde::{Deserialize, Serialize};
 /// ```
 #[derive(Deserialize, Serialize, Debug, PartialEq)]
 pub struct TicketResponse {
    /// Unique ticket identifier
    pub id: i32,
    /// Ticket category/type (e.g., "maintenance", "support")
    pub category: String,
    /// Ticket subject line
    pub betreff: String,
    /// Detailed ticket description
    pub description: String,
    /// Room number associated with the issue
    pub room: i16,
    /// Current ticket status (e.g., "open", "in_progress", "resolved", "archived")
    pub status: String,
    /// When the ticket was created (UTC timestamp)
    pub date: chrono::DateTime<chrono::Utc>,
    /// ID of the user who created the ticket
    pub user_id: i16,
    /// First name of the ticket creator (denormalized from `User`)
    pub user_first_name: String,
    /// Last name of the ticket creator (denormalized from `User`)
    pub user_last_name: String,
 }
@@ -62,11 +72,17 @@ pub struct TicketResponse {
 /// Use [`filter_user()`](`crate::handlers::auth::filter_user`) to convert to [`FilteredUser`] for responses.
 #[derive(Deserialize, Serialize, PartialEq, Debug, Clone, sqlx::FromRow)]
 pub struct User {
    /// Unique user identifier
    pub id: i16,
    /// User's last name
    pub last_name: String,
    /// User's first name
    pub first_name: String,
    /// Unique login username (must be unique in the database)
    pub username: String,
    /// Whether this user has administrator privileges
    pub is_admin: bool,
    /// Argon2 password hash (NEVER expose to clients)
    pub pwd: String,
 }
@@ -82,9 +98,13 @@ pub struct User {
 /// - `room`: Room number where the issue is located
 #[derive(Deserialize, Serialize, Debug)]
 pub struct TicketCreateScheme {
    /// Ticket category/type
    pub category: String,
    /// Subject line for the ticket
    pub betreff: String,
    /// Detailed problem description
    pub description: String,
    /// Room number where the issue is located
    pub room: i16,
 }
@@ -97,6 +117,7 @@ pub struct TicketCreateScheme {
 /// - `status`: New ticket status (e.g., "open", "in_progress", "resolved")
 #[derive(Deserialize, Serialize, Debug)]
 pub struct TicketUpdateScheme {
    /// New ticket status (e.g., "open", "in_progress", "resolved", "archived")
    pub status: String,
 }
@@ -113,11 +134,17 @@ pub struct TicketUpdateScheme {
 /// - `new_pwd`: New password (empty string = keep existing password)
 #[derive(Deserialize, Serialize, Debug)]
 pub struct UserUpdateScheme {
    /// User ID to update
    pub id: i16,
    /// Updated user first name
    pub first_name: String,
    /// Updated user last name
    pub last_name: String,
    /// Updated login username
    pub username: String,
    /// New admin privilege status
    pub make_admin: bool,
    /// New password (empty string = keep existing password)
    pub new_pwd: String,
 }
@@ -134,10 +161,15 @@ pub struct UserUpdateScheme {
 /// - `pwd`: Plain text password (hashed on server)
 #[derive(Deserialize, Serialize, Debug, sqlx::FromRow)]
 pub struct UserCreateScheme {
    /// User's first name
    pub first_name: String,
    /// User's last name
    pub last_name: String,
    /// Unique username for login
    pub username: String,
    /// Whether to grant admin privileges
    pub is_admin: bool,
    /// Plain text password (hashed on server before storage)
    pub pwd: String,
 }
@@ -150,7 +182,9 @@ pub struct UserCreateScheme {
 /// The password is never stored in plain text - only the Argon2 hash is persisted.
 #[derive(Deserialize, Serialize, Debug)]
 pub struct LoginScheme {
    /// Username for login
    pub username: String,
    /// Plain text password (verified against stored Argon2 hash)
    pub pwd: String,
 }
@@ -161,10 +195,15 @@ pub struct LoginScheme {
 /// to prevent leaking sensitive data.
 #[derive(Debug, Clone, Serialize)]
 pub struct FilteredUser {
    /// Unique user identifier
    pub id: i16,
    /// User's first name
    pub first_name: String,
    /// User's last name
    pub last_name: String,
    /// Login username
    pub username: String,
    /// Whether user has admin privileges
    pub is_admin: bool,
 }
@@ -1,14 +0,0 @@
 services:
  postgres:
    image: postgres:latest
    container_name: postgres_ticket
    restart: unless-stopped
    ports:
      - 5432:5432
    environment:
      - POSTGRES_PASSWORD=tickets
    volumes:
      - pg_data:/var/lib/postgresql/pg_data
 volumes:
  pg_data:
@@ -0,0 +1,127 @@
 # ============================================================
 # Dockerfile — Full application (frontend + backend)
 # ============================================================
 # Multi-stage build:
 #   1. chef     – install cargo-chef for dependency caching
 #   2. planner  – generate recipe.json from the workspace
 #   3. backend  – build the backend binary (release)
 #   4. frontend – build the frontend WASM bundle with Trunk
 #   5. runtime  – minimal image: backend binary + static frontend + nginx
 # ============================================================
 # --------------- Stage 1: Chef base ---------------
 FROM rust:1-bookworm AS chef
 RUN cargo install cargo-chef
 WORKDIR /app
 # --------------- Stage 2: Planner ---------------
 FROM chef AS planner
 COPY Cargo.toml Cargo.lock ./
 COPY src/ src/
 COPY backend/ backend/
 COPY frontend/ frontend/
 RUN cargo chef prepare --recipe-path recipe.json
 # --------------- Stage 3: Backend builder ---------------
 FROM chef AS backend-builder
 COPY --from=planner /app/recipe.json recipe.json
 RUN cargo chef cook --release --recipe-path recipe.json -p backend
 COPY Cargo.toml Cargo.lock ./
 COPY src/ src/
 COPY backend/ backend/
 COPY frontend/ frontend/
 RUN cargo build --release -p backend
 # --------------- Stage 4: Frontend builder ---------------
 FROM chef AS frontend-builder
 # Add the WASM target
 RUN rustup target add wasm32-unknown-unknown
 # Install Trunk (the WASM bundler used by the frontend) and sass (for SCSS)
 RUN cargo install trunk
 # Cache frontend dependencies
 COPY --from=planner /app/recipe.json recipe.json
 RUN cargo chef cook --release --target wasm32-unknown-unknown --recipe-path recipe.json -p frontend
 # Copy full workspace source for the build
 COPY Cargo.toml Cargo.lock ./
 COPY src/ src/
 COPY backend/ backend/
 COPY frontend/ frontend/
 # Build the frontend WASM bundle
 # Trunk outputs to frontend/dist by default
 WORKDIR /app/frontend
 RUN trunk build --release
 # --------------- Stage 5: Runtime ---------------
 FROM debian:bookworm-slim AS runtime
 # Install runtime dependencies:
 #   - ca-certificates & libssl3: TLS for PostgreSQL connections
 #   - nginx: serves the frontend static files and reverse-proxies /api to the backend
 RUN apt-get update && \
    apt-get install -y --no-install-recommends ca-certificates libssl3 nginx && \
    rm -rf /var/lib/apt/lists/*
 WORKDIR /app
 # Copy the compiled backend binary
 COPY --from=backend-builder /app/target/release/backend /app/backend
 # Copy migrations
 COPY backend/migrations/ /app/migrations/
 # Copy the frontend static build output
 COPY --from=frontend-builder /app/frontend/dist /var/www/html
 # Nginx configuration: serve frontend + reverse-proxy /api to the backend
 RUN cat > /etc/nginx/sites-available/default <<'EOF'
 server {
    listen 80;
    server_name _;
    root /var/www/html;
    index index.html;
    # Serve static frontend files, fall back to index.html for client-side routing
    location / {
        try_files $uri $uri/ /index.html;
    }
    # Reverse-proxy API requests to the Axum backend
    location /api/ {
        proxy_pass http://127.0.0.1:8001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
 }
 EOF
 # Startup script: launch backend in the background, then nginx in the foreground
 RUN cat > /app/start.sh <<'SCRIPT'
 #!/bin/bash
 set -e
 # Start the backend API server in the background
 /app/backend &
 # Start nginx in the foreground (keeps the container alive)
 nginx -g 'daemon off;'
 SCRIPT
 RUN chmod +x /app/start.sh
 EXPOSE 80
 # Environment variables should be provided at runtime:
 #   DATABASE_URL    – PostgreSQL connection string
 #   TOKEN_SECRET    – JWT signing key
 #   ORIGIN          – Allowed CORS origin (should be the public URL of this container)
 CMD ["/app/start.sh"]
@@ -0,0 +1,66 @@
 # ============================================================
 # Dockerfile.backend — Backend only
 # ============================================================
 # Multi-stage build:
 #   1. chef    – install cargo-chef for dependency caching
 #   2. planner – generate a recipe.json from the workspace
 #   3. builder – build dependencies first (cached), then the backend binary
 #   4. runtime – minimal image with just the compiled binary
 # ============================================================
 # --------------- Stage 1: Chef base ---------------
 FROM rust:1-bookworm AS chef
 RUN cargo install cargo-chef
 WORKDIR /app
 # --------------- Stage 2: Planner ---------------
 FROM chef AS planner
 # Copy the full workspace so cargo-chef can resolve all dependencies
 COPY Cargo.toml Cargo.lock ./
 COPY src/ src/
 COPY backend/ backend/
 COPY frontend/ frontend/
 RUN cargo chef prepare --recipe-path recipe.json
 # --------------- Stage 3: Builder ---------------
 FROM chef AS builder
 # Cache dependency compilation in its own layer
 COPY --from=planner /app/recipe.json recipe.json
 RUN cargo chef cook --release --recipe-path recipe.json -p backend
 # Now copy the real source and build
 COPY Cargo.toml Cargo.lock ./
 COPY src/ src/
 COPY backend/ backend/
 COPY frontend/ frontend/
 RUN cargo build --release -p backend
 # --------------- Stage 4: Runtime ---------------
 FROM debian:bookworm-slim AS runtime
 # Install TLS root certificates and PostgreSQL client libs (needed by sqlx
 # at runtime for TLS connections via native-tls)
 RUN apt-get update && \
    apt-get install -y --no-install-recommends ca-certificates libssl3 && \
    rm -rf /var/lib/apt/lists/*
 WORKDIR /app
 # Copy the compiled binary
 COPY --from=builder /app/target/release/backend /app/backend
 # Copy migrations so they can be run at startup if needed
 COPY backend/migrations/ /app/migrations/
 EXPOSE 8001
 # Environment variables should be provided at runtime via docker run --env
 # or docker compose environment/env_file.
 #
 # Required:
 #   DATABASE_URL    – PostgreSQL connection string
 #   TOKEN_SECRET    – JWT signing key
 #   ORIGIN          – Allowed CORS origin (frontend URL)
 CMD ["/app/backend"]
@@ -0,0 +1,58 @@
 services:
  postgres:
    image: postgres:latest
    container_name: postgres_ticket
    restart: unless-stopped
    ports:
      - 5432:5432
    environment:
      POSTGRES_PASSWORD: tickets
      POSTGRES_DB: system_data
    volumes:
      - pg_data:/var/lib/postgresql
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U postgres"]
      interval: 5s
      timeout: 3s
      retries: 5
  # Full application (frontend + backend + nginx)
  # Usage: docker compose --profile full up --build
  app:
    profiles: ["full"]
    build:
      context: ..
      dockerfile: docker/Dockerfile
    container_name: ticketsystem
    restart: unless-stopped
    ports:
      - 8080:80
    environment:
      DATABASE_URL: postgres://postgres:tickets@postgres:5432/system_data
      TOKEN_SECRET: 160257c8c5ff2298363529e963a5901d2efa6d6ae67d634487c4d2bbc41c533f
      ORIGIN: http://localhost:8080
    depends_on:
      postgres:
        condition: service_healthy
  # Backend only (API server)
  # Usage: docker compose --profile backend up --build
  backend:
    profiles: ["backend"]
    build:
      context: ..
      dockerfile: docker/Dockerfile.backend
    container_name: ticketsystem-backend
    restart: unless-stopped
    ports:
      - 8001:8001
    environment:
      DATABASE_URL: postgres://postgres:tickets@postgres:5432/system_data
      TOKEN_SECRET: 160257c8c5ff2298363529e963a5901d2efa6d6ae67d634487c4d2bbc41c533f
      ORIGIN: http://localhost:8000
    depends_on:
      postgres:
        condition: service_healthy
 volumes:
  pg_data:
@@ -16,8 +16,7 @@ serde = { workspace = true }
 wasm-bindgen-futures = "0.4.70"
 web-sys = { version = "0.3.95", features = [
  "Window","Document","Request","Response","Headers", "HtmlSelectElement", "RequestCredentials",
-  "SubmitEvent","InputEvent","HtmlInputElement","Event", "HtmlFormElement", "MouseEvent",
+  "SubmitEvent","InputEvent","HtmlInputElement","Event", "HtmlFormElement", "MouseEvent"
  "Element", "MediaQueryList", "DomTokenList"
 ] }
 gloo-net = "0.7.0"
 gloo-storage = "0.4.0"
@@ -27,3 +26,4 @@ gloo = "0.12.0"
 chrono = { workspace = true }
 chrono-tz = "0.10.4"
 wasm-bindgen = "0.2.120"
 theme = { version = "0.0.3", features = ["yew"] }
@@ -1,6 +1,6 @@
 [serve]
 # The address to serve on LAN.
-addresses = ["127.0.0.1"] #,"10.150.9.116"]
+addresses = ["127.0.0.1","192.168.2.157"] #,"10.150.9.7"]
 # The address to serve on WAN.
 # address = "0.0.0.0"
 # The port to serve on.
@@ -5,8 +5,9 @@
    <link data-trunk rel="rust" data-bin="bin" />
    <link data-trunk rel="scss" href="src/styles/main.scss" />
    <link data-trunk rel="icon" href="src/assets/favicon.ico" type="image/x-icon" />
    <link data-trunk rel="copy-dir" href="src/assets" />
    <meta charset="utf-8" />
-    <title>Ticket System CSG</title>
+    <title>Yew App</title>
 </head>
 <body></body>
@@ -109,7 +109,7 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
        AuthState {
            is_authenticated: None,
            ..
-        } => html! { <div>{ "Lade..." } </div> },
+        } => html! { <div>{ "Wird geladen..." } </div> },
        AuthState {
            is_authenticated: Some(false),
            ..
@@ -126,7 +126,7 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
                    Some(false) => {
                        html! { <Redirect<crate::Route> to={crate::Route::PermissionDenied}/> }
                    }
-                    None => html! { <div>{ "Berechtigungen werden geprüft..." }</div> },
+                    None => html! { <div>{ "Überprüfe Berechtigungen..." }</div> },
                }
            } else {
                props.children.clone().into()
@@ -1,74 +0,0 @@
 use gloo_storage::{LocalStorage, Storage};
 use web_sys::window;
 use yew::prelude::*;
 /// A persistent, floating toggle button to switch the user interface theme between Dark Mode and Light Mode.
 ///
 /// # Functionality
 /// 1. **System Preference Check**: If the user hasn't explicitly set a preference, detects the operating system theme 
 ///    preference using browser `match_media("(prefers-color-scheme: dark)")` query.
 /// 2. **Session Persistence**: Caches the selected theme choice under the `"dark-mode"` key in the browser's `LocalStorage` 
 ///    so that user preferences persist across page reloads.
 /// 3. **Dynamic Style Swapping**: Injects or removes the `.theme-dark` / `.theme-light` classes directly on the document 
 ///    `body` element, triggering the theme change via globally defined CSS variables.
 #[function_component(DarkModeToggle)]
 pub fn dark_mode_toggle() -> Html {
    // 1. Initialize state from LocalStorage or system preference
    let is_dark = use_state(|| {
        LocalStorage::get::<bool>("dark-mode").unwrap_or_else(|_| {
            // Fallback to system preference if not set
            window()
                .and_then(|w| w.match_media("(prefers-color-scheme: dark)").ok().flatten())
                .map(|m| m.matches())
                .unwrap_or(false)
        })
    });
    // 2. Synchronize the class on the body when the state changes
    {
        let is_dark = is_dark.clone();
        use_effect_with(is_dark, |is_dark| {
            if let Some(win) = window() {
                if let Some(doc) = win.document() {
                    if let Some(body) = doc.body() {
                        if **is_dark {
                            let _ = body.class_list().add_1("theme-dark");
                            let _ = body.class_list().remove_1("theme-light");
                            let _ = LocalStorage::set("dark-mode", true);
                        } else {
                            let _ = body.class_list().add_1("theme-light");
                            let _ = body.class_list().remove_1("theme-dark");
                            let _ = LocalStorage::set("dark-mode", false);
                        }
                    }
                }
            }
            || ()
        });
    }
    // 3. Toggle action
    let onclick = {
        let is_dark = is_dark.clone();
        Callback::from(move |_| {
            is_dark.set(!*is_dark);
        })
    };
    html! {
        <button class="dark-mode-toggle" {onclick}>
            if *is_dark {
                // Sun Icon for switching to light mode
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="4"/>
                    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
                </svg>
            } else {
                // Moon Icon for switching to dark mode
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
                </svg>
            }
        </button>
    }
 }
@@ -0,0 +1,78 @@
 use yew::prelude::*;
 /// A button component that toggles between light and dark theme modes.
 ///
 /// Clicking this button switches the application's theme by modifying the `data-theme` attribute
 /// on the document element. The theme preference is applied via CSS variables for consistent styling.
 ///
 /// # Behavior
 /// - Reads the current `data-theme` attribute value from the HTML element
 /// - Sets `data-theme="dark"` if currently in light mode
 /// - Clears the attribute (light mode) if currently in dark mode
 /// - Re-renders to reflect the visual changes (typically toggled via CSS)
 ///
 /// # Example Usage
 /// ```ignore
 /// html! {
 ///     <ThemeToggle />
 /// }
 /// ```
 #[function_component]
 pub fn ThemeToggle() -> Html {
    let is_dark = use_state(|| {
        if let Some(window) = web_sys::window() {
            if let Some(document) = window.document() {
                if let Some(html) = document.document_element() {
                    return html.get_attribute("data-theme").unwrap_or_default() == "dark";
                }
            }
        }
        false
    });
    let onclick = {
        let is_dark = is_dark.clone();
        Callback::from(move |_| {
            if let Some(window) = web_sys::window() {
                if let Some(document) = window.document() {
                    if let Some(html) = document.document_element() {
                        let current = html.get_attribute("data-theme").unwrap_or_default();
                        let new_theme = if current == "dark" { "" } else { "dark" };
                        let _ = html.set_attribute("data-theme", new_theme);
                        is_dark.set(new_theme == "dark");
                    }
                }
            }
        })
    };
    let icon_html = if *is_dark {
        // Sun SVG for dark mode
        html! {
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon">
                <circle cx="12" cy="12" r="4" />
                <path d="M12 2v2" />
                <path d="M12 20v2" />
                <path d="m4.93 4.93 1.41 1.41" />
                <path d="m17.66 17.66 1.41 1.41" />
                <path d="M2 12h2" />
                <path d="M20 12h2" />
                <path d="m6.34 17.66-1.41 1.41" />
                <path d="m19.07 4.93-1.41 1.41" />
            </svg>
        }
    } else {
        // Moon SVG for light mode
        html! {
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon">
                <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
            </svg>
        }
    };
    html! {
        <button {onclick} class="sidebar-button theme-toggle-btn">
            {icon_html}
        </button>
    }
 }
@@ -1,6 +1,6 @@
 mod auth;
 mod darkmode;
 mod pages;
 mod dark_mode;
 use crate::auth::ProtectedRoute;
 use crate::pages::*;
 use gloo_net::http::Request;
@@ -138,6 +138,7 @@ fn sidebar_shell(props: &SidebarShellProps) -> Html {
    }
 }
 /// Props for the AdminCheckWrapper component.
 #[derive(Properties, PartialEq)]
 pub struct AdminCheckWrapperProps {
@@ -192,10 +193,10 @@ fn admin_check_wrapper(props: &AdminCheckWrapperProps) -> Html {
    }
    match *admin_exists {
-        None => html! { <div>{ "Lade..." }</div> },
+        None => html! { <div>{ "Wird geladen..." }</div> },
        Some(false) => {
            navigator.push(&Route::Setup);
-            html! { <div>{ "Leite weiter zur Einrichtung..." }</div> }
+            html! { <div>{ "Wird weitergeleitet zur Einrichtung..." }</div> }
        }
        Some(true) => props.children.clone().into(),
    }
@@ -316,7 +317,7 @@ fn switch(route: Route) -> Html {
 pub fn app() -> Html {
    html! {
        <BrowserRouter>
-            <dark_mode::DarkModeToggle />
+            <basic_pages::Icon/>
            <Switch<Route> render={switch} />
        </BrowserRouter>
    }
@@ -1,5 +1,9 @@
 use frontend::App;
 /// Main entry point for the Yew frontend application.
 ///
 /// Initializes the Yew framework and renders the root [`App`] component into the DOM.
 /// This function is typically called automatically by the WebAssembly runtime.
 fn main() {
    yew::Renderer::<App>::new().render();
 }
@@ -3,7 +3,6 @@ use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
 use yew_router::prelude::*;
 #[macro_export]
 /// Removes surrounding double quotes from a string.
 ///
 /// This macro takes an expression that evaluates to a string and returns a new `String`
@@ -72,7 +71,7 @@ pub fn home_component() -> Html {
                        );
                        name.set(name_value);
                    }
-                    _ => name.set("Unbekannt".to_string()),
+                    _ => name.set("Unknown".to_string()),
                }
            });
            || ()
@@ -80,15 +79,11 @@ pub fn home_component() -> Html {
    }
    html! {
-        <div class="form-container home">
+        <div class="rundbg home">
            <div class="page-header">
                <h1>{ "Willkommen" }</h1>
            </div>
            <crate::utilities::TicketCount/>
-            <div>
+
-                <p>{ "Sie sind angemeldet als: " }</p>
+            <p class="login-status">{ "Sie sind angemeldet als: " }</p>
-                <p class="text-muted">{ &*name }</p>
+            <p class="name">{ &*name }</p>
            </div>
        </div>
    }
 }
@@ -108,12 +103,9 @@ pub fn home_component() -> Html {
 pub fn not_found_component() -> Html {
    let message = "404 Nicht gefunden";
    html! {
-        <div class="form-container">
+        <div>
            <div class="empty-state">
            <h1>{&message}</h1>
-                <p>{ "Die von Ihnen gesuchte Seite existiert nicht." }</p>
+            <Link<crate::Route> to={crate::Route::Home}>{ "Zurück zum Start" }</Link<crate::Route>>
                <Link<crate::Route> to={crate::Route::Home}>{ "Zurück zur Startseite" }</Link<crate::Route>>
            </div>
        </div>
    }
 }
@@ -133,13 +125,17 @@ pub fn not_found_component() -> Html {
 #[component(PermissionDenied)]
 pub fn denied_component() -> Html {
    html! {
-        <div class="form-container">
+        <div>
-            <div class="empty-state">
+            <h1>{ "Sie haben nicht die benötigten Rechte um diese Seite aufzurufen" }</h1>
-                <h1>{ "Zugriff verweigert" }</h1>
+            <h3>{ "Wenn sie denken, dass dies ein Fehler ist kontaktieren sie Herrn Winter" }</h3>
-                <p>{ "Sie haben nicht die benötigten Rechte um diese Seite aufzurufen" }</p>
+            <Link<crate::Route> to={crate::Route::Home}>{ "Zurück zum Start" }</Link<crate::Route>>
                <p class="text-muted">{ "Wenn sie denken, dass dies ein Fehler ist kontaktieren sie Herrn Winter" }</p>
                <Link<crate::Route> to={crate::Route::Home}>{ "Zurück zur Startseite" }</Link<crate::Route>>
            </div>
        </div>
    }
 }
 #[component(Icon)]
 pub fn icon_component() -> Html {
    html! {
        <img src="assets/csg.png" class="csg-icon" />
    }
 }
@@ -20,6 +20,7 @@ pub struct AdminSetupScheme {
    pub first_name: String,
    pub last_name: String,
    pub username: String,
    pub is_admin: bool,
    pub pwd: String,
 }
@@ -67,7 +68,7 @@ pub fn initial_admin_setup() -> Html {
    let username = use_state(|| "".to_string());
    let pwd = use_state(|| "".to_string());
    let pwd_confirm = use_state(|| "".to_string());
-    let error = use_state(String::new);
+    let error = use_state(|| String::new());
    let success = use_state(|| false);
    let loading = use_state(|| false);
    let admin_check_done = use_state(|| false);
@@ -154,6 +155,7 @@ pub fn initial_admin_setup() -> Html {
                    first_name: first_name_val,
                    last_name: last_name_val,
                    username: username_val,
                    is_admin: true,
                    pwd: pwd_val,
                };
@@ -172,8 +174,8 @@ pub fn initial_admin_setup() -> Html {
                        navigator.push(&crate::Route::Login);
                    }
                    Ok(r) => {
-                        let text = r.text().await.unwrap_or_else(|_| "unknown".into());
+                        let text = r.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                        error.set(format!("HTTP {}: {}", r.status(), text));
+                        error.set(text);
                    }
                    Err(err) => error.set(format!("Netzwerkfehler: {}", err)),
                }
@@ -182,10 +184,10 @@ pub fn initial_admin_setup() -> Html {
    };
    html! {
-        <div class="setup-container">
+        <div class="setup-container rundbg">
            <div class="setup-box">
-                <h1>{ "Erstmalige Admin-Einrichtung" }</h1>
+                <h1>{ "Admin-Einrichtung" }</h1>
-                <p>{ "Erstellen Sie Ihr erstes Administrator-Konto" }</p>
+                <p>{ "Erstellen Sie Ihr erstes Administratorkonto" }</p>
                <form {onsubmit} class="setup-form">
                    <div class="form-group">
@@ -264,7 +266,7 @@ pub fn initial_admin_setup() -> Html {
                    </div>
                    <button type="submit" disabled={*loading} class="submit-btn">
-                        { if *loading { "Wird erstellt..." } else { "Admin-Konto erstellen" } }
+                        { if *loading { "Wird erstellt..." } else { "Administratorkonto erstellen" } }
                    </button>
                    if !error.is_empty() {
@@ -272,7 +274,7 @@ pub fn initial_admin_setup() -> Html {
                    }
                    if *success {
-                        <p class="success-message" style="color:green">{ "Admin-Konto erfolgreich erstellt! Weiterleitung zum Login..." }</p>
+                        <p class="success-message" style="color:green">{ "Administratorkonto erfolgreich erstellt! Wird weitergeleitet zum Login..." }</p>
                    }
                </form>
            </div>
@@ -234,7 +234,7 @@ pub fn ticket_menu() -> Html {
                    html! {
                        <ul class="submenu" role="menu">
                            <li role="none">
-                                <Link<crate::Route> to={crate::Route::Ticket}><span role="menuitem">{ "Ticket erstellen" }</span></Link<crate::Route>>
+                                <Link<crate::Route> to={crate::Route::Ticket}><span role="menuitem">{ "Ticket einreichen" }</span></Link<crate::Route>>
                            </li>
                            <li role="none">
                                <Link<crate::Route> to={crate::Route::AllTickets}><span role="menuitem">{ "Tickets anzeigen" }</span></Link<crate::Route>>
@@ -398,7 +398,7 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
    };
    match *is_admin {
-        None => html! { <div class="sidebar-loading">{ "Lade..." }</div> },
+        None => html! { <div class="sidebar-loading">{ "Wird geladen..." }</div> },
        // Non-admin: render a condensed user sidebar (no diagnostics, limited links)
        Some(false) => {
@@ -423,8 +423,9 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
                            </li>
                            <TicketMenu/>
                            <li class="logout-item">
                                <crate::darkmode::ThemeToggle/>
                                <button
-                                    class="logout-button"
+                                    class="sidebar-button"
                                    onclick={on_logout.clone()}
                                >
                                    { "Abmelden" }
@@ -434,7 +435,7 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
                    </nav>
                </SidebarStateProvider>
            }
-        },
+        }
        // Admin: full sidebar wrapped in provider so submenu state persists
        Some(true) => {
@@ -462,8 +463,9 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
                            <Link<crate::Route> to={crate::Route::Diagnostics}>{ "Statistiken" }</Link<crate::Route>>
                            <Link<crate::Route> to={crate::Route::ArchivedTickets}>{ "Archiv" }</Link<crate::Route>>
                            <li class="logout-item">
                                <crate::darkmode::ThemeToggle/>
                                <button
-                                    class="logout-button"
+                                    class="sidebar-button"
                                    onclick={on_logout.clone()}
                                >
                                    { "Abmelden" }
@@ -473,6 +475,7 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
                    </nav>
                </SidebarStateProvider>
            }
        },
        }
    }
 }
@@ -208,10 +208,11 @@ pub fn submit_ticket_component() -> Html {
                    .expect("Failed to build request");
                match request.send().await {
-                    Ok(response) if response.status() == 200 => {
+                    Ok(response) if response.status() == 200 => status.set(Some("Erfolg".into())),
-                        status.set(Some("Erfolgreich".into()))
+                    Ok(response) => {
-                    }
+                        let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                    Ok(response) => status.set(Some(format!("Fehler: {}", response.status()))),
+                        status.set(Some(text));
                    },
                    Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
                }
            });
@@ -267,7 +268,10 @@ pub fn submit_ticket_component() -> Html {
                        Err(_) => None,
                    }
                } else {
-                    raw_trim.parse::<i16>().ok()
+                    match raw_trim.parse::<i16>() {
                        Ok(n) => Some(n),
                        Err(_) => None,
                    }
                }
            };
@@ -286,53 +290,52 @@ pub fn submit_ticket_component() -> Html {
    let room_valid = (*room).is_some();
    html! {
-        <div class="form-container">
+        <form class="rundbg" {onsubmit}>
            <div class="page-header">
                <h1>{ "Ticket erstellen" }</h1>
            </div>
            <form {onsubmit}>
            <label>{ "Betreff:" }
                <input type="text" value={(*betreff).clone()} oninput={betreff_change}/>
            </label>
            <br/>
            <label>{ "Beschreibung:" }
-                    <textarea value={(*description).clone()} oninput={description_change}/>
+                <input type="text" value={(*description).clone()} oninput={description_change}/>
            </label>
            <br/>
            <label>{ "Kategorie:" }
                <select value={(*category).clone()} onchange={category_change}>
                    <option value="Whiteboard Beamer">{ "Whiteboard Beamer" }</option>
                    <option value="Internet">{ "Internet" }</option>
                    <option value="iPad Koffer">{ "iPad Koffer" }</option>
-                        <option value="Apple TV" selected=true>{ "Apple TV" }</option>
+                    <option value="Apple TV">{ "Apple TV" }</option>
                    <option value="Docu Cam">{ "Dokumenten Kamera" }</option>
                    <option value="Sonstiges">{ "Sonstiges" }</option>
                </select>
            </label>
            <br/>
            <label>{ "Raum:" }
                <input type="text" value={(*room_input).clone()} oninput={room_change}/>
            </label>
            {
                if !room_valid {
                    html! {
-                            <p class="alert error">{ "Ungültiger oder nicht erlaubter Raum (z. B. 101, K8, D1)" }</p>
+                        <p class="warning" >{ "Ungültiger/nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
                    }
                } else {
                    html! {}
                }
            }
            <br/>
            <button type="submit">{ "Absenden" }</button>
-                <Link<crate::Route> to={crate::Route::AllTickets}>{ "Alle Tickets anzeigen" }</Link<crate::Route>>
+            <Link<crate::Route> to={crate::Route::AllTickets}>{ "Tickets ansehen" }</Link<crate::Route>>
            {
                if let Some(s) = &*status {
-                        html!{ <p class="alert success">{ s }</p> }
+                    html!{ <p>{ s }</p> }
                } else {
                    html!{}
                }
            }
        </form>
        </div>
    }
 }
@@ -396,7 +399,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
                        if status == 200 {
                            match response.json::<Ticket>().await {
                                Ok(t) => ticket.set(Some(t)),
-                                Err(err) => error.set(Some(format!("Parser-Fehler: {}", err))),
+                                Err(err) => error.set(Some(format!("Parse error: {}", err))),
                            }
                        } else {
                            match response.json::<ApiError>().await {
@@ -405,13 +408,13 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
                                    if let Ok(text) = response.text().await {
                                        error.set(Some(text));
                                    } else {
-                                        error.set(Some(format!("Server-Fehler: {}", status)));
+                                        error.set(Some(format!("Server error: {}", status)));
                                    }
                                }
                            }
                        }
                    }
-                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
+                    Err(err) => error.set(Some(format!("Network error: {}", err))),
                }
                loading.set(false);
            });
@@ -420,6 +423,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
    }
    let onsubmit = {
        let status = status.clone();
        let id = id.clone();
        let error = error.clone();
        Callback::from(move |e: SubmitEvent| {
@@ -435,6 +439,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
                .unwrap_or_else(|| (*status).clone());
            status.set(new_status.clone());
            let id = id.clone();
            let error = error.clone();
            spawn_local(async move {
@@ -446,10 +451,11 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
                    .expect("Failed to construct request");
                match request.send().await {
-                    Ok(response) if response.status() == 200 => {
+                    Ok(response) if response.status() == 200 => error.set(Some("Erfolg".into())),
-                        error.set(Some("Erfolgreich".into()))
+                    Ok(response) => {
-                    }
+                        let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                    Ok(response) => error.set(Some(format!("Fehler: {}", response.status()))),
+                        error.set(Some(text));
                    },
                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                }
            });
@@ -463,6 +469,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
        let deleting = deleting.clone();
        let delete_error = delete_error.clone();
        let ticket_state = ticket.clone();
        let id = id;
        Callback::from(move |e: MouseEvent| {
            e.prevent_default();
@@ -487,12 +494,11 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
                match request.send().await {
                    Ok(resp) if resp.status() == 200 || resp.status() == 204 => {
-                        // remove local state or navigate away
+                        ticket_state.set(None);
                        ticket_state.set(None); // clears the shown item
                    }
                    Ok(resp) => {
-                        let txt = resp.text().await.unwrap_or_else(|_| "unbekannt".into());
+                        let txt = resp.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                        delete_error.set(Some(format!("HTTP {}: {}", resp.status(), txt)));
+                        delete_error.set(Some(txt));
                    }
                    Err(err) => delete_error.set(Some(format!("Netzwerkfehler: {}", err))),
                }
@@ -502,12 +508,12 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
    };
    if *loading {
-        html! {<p>{ "Lade..." }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
    } else if let Some(e) = &*error {
-        html! { <p class="alert error">{ format!("Fehler: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
    } else if let Some(t) = &*ticket {
        html! {
-            <div>
+            <div class="rundbg">
                <h1>{ format!("Ticket #{}", t.id) }</h1>
                <p><strong>{ "Kategorie: " }</strong>{ &t.category }</p>
                <p><strong>{ "Betreff: " }</strong>{ &t.betreff }</p>
@@ -537,13 +543,13 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
                    <button type="submit">{ "Aktualisieren" }</button>
                </form>
-                <button onclick={ondelete} disabled={*deleting} class="delete">
+                <button onclick={ondelete} disabled={*deleting}>
                    {if *deleting {"Löschen..."} else {"Löschen"}}
                </button>
-                <Link<crate::Route> to={crate::Route::AllTickets} classes="return-to">{ "Zurück zur Ticketübersicht" }</Link<crate::Route>>
+                <Link<crate::Route> to={crate::Route::AllTickets}>{ "Zurück zur Ticketübersicht" }</Link<crate::Route>>
                if let Some(err) = &*delete_error {
-                    <p class="alert error">{ err.clone() }</p>
+                    <p style="color:red">{ err.clone() }</p>
                }
            </div>
        }
@@ -587,7 +593,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
 /// ```
 #[component(AllTickets)]
 pub fn all_tickets_component() -> Html {
-    let tickets = use_state(Vec::<Ticket>::new);
+    let tickets = use_state(|| Vec::<Ticket>::new());
    let error = use_state(|| None::<String>);
    let loading = use_state(|| false);
    let user = use_state(|| ActiveUser {
@@ -603,22 +609,22 @@ pub fn all_tickets_component() -> Html {
        use_effect_with((), move |_| {
            loading.set(true);
            spawn_local(async move {
-                let url = "/api/tickets".to_string();
+                let url = format!("/api/tickets");
                match Request::get(&url).send().await {
                    Ok(response) if response.status() == 200 => {
                        match response.json::<Vec<Ticket>>().await {
                            Ok(t) => tickets.set(t),
-                            Err(e) => error.set(Some(format!("Parser-Fehler: {}", e))),
+                            Err(e) => error.set(Some(format!("parse error: {}", e))),
                        }
                    }
                    Ok(response) => {
                        if let Ok(text) = response.text().await {
                            error.set(Some(text));
                        } else {
-                            error.set(Some(format!("Status {}", response.status())));
+                            error.set(Some(format!("status {}", response.status())));
                        }
                    }
-                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
+                    Err(err) => error.set(Some(format!("Network error: {}", err))),
                }
                loading.set(false);
            });
@@ -635,9 +641,9 @@ pub fn all_tickets_component() -> Html {
                    .credentials(web_sys::RequestCredentials::Include)
                    .send()
                    .await
                    && response.status() == 200
                    && let Ok(json) = response.json::<serde_json::Value>().await
                {
                    if response.status() == 200 {
                        if let Ok(json) = response.json::<serde_json::Value>().await {
                            let id = json
                                .get("data")
                                .and_then(|d| d.get("id"))
@@ -650,22 +656,20 @@ pub fn all_tickets_component() -> Html {
                                .unwrap_or(false);
                            user.set(ActiveUser { id, is_admin });
                        }
                    }
                }
            });
            || ()
        });
    }
    if *loading {
-        html! {<p>{ "Lade..." }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
    } else if let Some(e) = &*error {
-        html! { <p class="alert error">{ format!("Fehler: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
    } else {
        html! {
-            <div>
+            <ul class= "postits">
                <div class="page-header">
                    <h1>{ "Alle Tickets" }</h1>
                </div>
                <ul class="ticket-list">
            { for tickets.iter().filter(|t| t.status != "Archived" && (if user.is_admin { true } else if let Some(uid) = user.id { t.user_id == uid } else { false })).map(|t| {
                let status_class = match t.status.as_str() {
                    "ToDo" => "To-Do",
@@ -675,17 +679,14 @@ pub fn all_tickets_component() -> Html {
                    _ => "To-Do"
                };
                html! {
-                            <li key={t.id.to_string()} class={status_class}>
+                    <div class={classes!{status_class, "listbox"}}>
-                                <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{}", t.betreff) }</h3></Link<crate::Route>>
+                        <li key={t.id.to_string()}>
-                                <p>{ &t.description }</p>
+                            <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{}", t.betreff,) }</h3></Link<crate::Route>>
                        </li>
-                        }
+
-                    })}
+                    </div>
                }})}
            </ul>
                <div class="ticket-list-actions">
                    <Link<crate::Route> to={crate::Route::Ticket}>{ "Zurück zur Startseite" }</Link<crate::Route>>
                </div>
            </div>
        }
    }
 }
@@ -725,7 +726,7 @@ pub fn all_tickets_component() -> Html {
 /// ```
 #[component(ArchivedTickets)]
 pub fn archived_tickets_component() -> Html {
-    let tickets = use_state(Vec::<Ticket>::new);
+    let tickets = use_state(|| Vec::<Ticket>::new());
    let error = use_state(|| None::<String>);
    let loading = use_state(|| false);
    let user = use_state(|| ActiveUser {
@@ -741,12 +742,12 @@ pub fn archived_tickets_component() -> Html {
        use_effect_with((), move |_| {
            loading.set(true);
            spawn_local(async move {
-                let url = "/api/tickets".to_string();
+                let url = format!("/api/tickets");
                match Request::get(&url).send().await {
                    Ok(response) if response.status() == 200 => {
                        match response.json::<Vec<Ticket>>().await {
                            Ok(t) => tickets.set(t),
-                            Err(e) => error.set(Some(format!("Parser-Fehler: {}", e))),
+                            Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
                        }
                    }
                    Ok(response) => {
@@ -773,9 +774,9 @@ pub fn archived_tickets_component() -> Html {
                    .credentials(web_sys::RequestCredentials::Include)
                    .send()
                    .await
                    && response.status() == 200
                    && let Ok(json) = response.json::<serde_json::Value>().await
                {
                    if response.status() == 200 {
                        if let Ok(json) = response.json::<serde_json::Value>().await {
                            let id = json
                                .get("data")
                                .and_then(|d| d.get("id"))
@@ -788,34 +789,37 @@ pub fn archived_tickets_component() -> Html {
                                .unwrap_or(false);
                            user.set(ActiveUser { id, is_admin });
                        }
                    }
                }
            });
            || ()
        });
    }
    if *loading {
-        html! {<p>{ "Lade..." }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
    } else if let Some(e) = &*error {
-        html! { <p class="alert error">{ format!("Fehler: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
    } else {
        html! {
-            <div>
+            <ul class="postits">
                <div class="page-header">
                                <h1>{ "Archivierte Tickets" }</h1>
                            </div>
                <ul class="ticket-list">
            { for tickets.iter().filter(|t| t.status == "Archived" && (user.is_admin || if let Some(uid) = user.id { t.user_id == uid } else { false })).map(|t| html! {
-                        <div>
+                    <div class="listbox">
                        <li key={t.id.to_string()}>
-                                <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{}", t.betreff) }</h3></Link<crate::Route>>
+                            <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{} - #{}", t.betreff, t.id) }</h3></Link<crate::Route>>
                            <p>{ &t.description }</p>
                            <p>{ match t.status.as_str() {
                                "ToDo" => "Zu tun",
                                "InProgress" => "In Bearbeitung",
                                "Completed" => "Erledigt",
                                "Archived" => "Archiviert",
                                _ => "Ungültiger Status"
                            }}</p>
                        </li>
                    </div>
                })}
            </ul>
            </div>
        }
    }
 }
@@ -1,4 +1,3 @@
 use crate::dequote;
 use gloo_net::http::Request;
 use serde::{Deserialize, Serialize};
 use wasm_bindgen_futures::spawn_local;
@@ -182,10 +181,11 @@ pub fn register_component() -> Html {
                    .expect("Error building request");
                match request.send().await {
-                    Ok(response) if response.status() == 200 => {
+                    Ok(response) if response.status() == 200 => status.set(Some("Erfolg".into())),
-                        status.set(Some("Erfolgreich".into()))
+                    Ok(response) => {
-                    }
+                        let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                    Ok(response) => status.set(Some(format!("Fehler: {}", response.status()))),
+                        status.set(Some(text));
                    },
                    Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
                }
            });
@@ -233,11 +233,7 @@ pub fn register_component() -> Html {
    };
    html! {
-        <div class="form-container">
+        <form {onsubmit} class="rundbg">
            <div class="page-header">
                <h1>{ "Benutzer registrieren" }</h1>
            </div>
            <form {onsubmit}>
            <label>{ "Vorname:" }
                <input type="text" value={(*first_name).clone()} oninput={fn_change}/>
            </label>
@@ -250,12 +246,11 @@ pub fn register_component() -> Html {
            <label>{ "Admin:" }
                <input type="checkbox" checked={*is_admin} onchange={admin_change}/>
            </label>
-                <label>{ "Passwort:" }
+            <label>{ "Password:" }
                <input type="password" value={(*pwd).clone()} oninput={pwd_change}/>
            </label>
            <button type="submit">{ "Bestätigen" }</button>
        </form>
        </div>
    }
 }
@@ -290,7 +285,7 @@ pub fn login_component() -> Html {
    let username = use_state(|| "".to_string());
    let pwd = use_state(|| "".to_string());
    let loading = use_state(|| false);
-    let error = use_state(String::new);
+    let error = use_state(|| String::new());
    let success = use_state(|| false);
    let navigator = use_navigator().unwrap();
@@ -334,9 +329,8 @@ pub fn login_component() -> Html {
                        navigator.push(&crate::Route::Home);
                    }
                    Ok(r) => {
-                        let text: serde_json::Value =
+                        let text = r.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                            r.json().await.unwrap_or_else(|_| "unbekannt".into());
+                        error.set(text);
                        error.set(dequote!(format!("{}", text["message"].to_string())));
                    }
                    Err(err) => error.set(format!("Netzwerkfehler: {}", err)),
                }
@@ -345,12 +339,9 @@ pub fn login_component() -> Html {
    };
    html! {
-        <main class="content login">
+        <div>
-            <div class="form-container">
+        <h1 class="headline">{ "Anmeldung" }</h1>
-                <div class="page-header">
+        <form {onsubmit} class="rundbg login">
                    <h1>{ "Anmelden" }</h1>
                </div>
                <form {onsubmit}>
            <input
                placeholder="Benutzername"
                value={(*username).clone()}
@@ -368,11 +359,10 @@ pub fn login_component() -> Html {
                    pwd.set(input.value());
                })}
            />
-                    <button type="submit" disabled={*loading}>{ if *loading { "Wird angemeldet..." } else { "Anmelden" } }</button>
+            <button type="submit" disabled={*loading}>{ if *loading { "Anmeldung läuft..." } else { "Anmelden" } }</button>
-                    if !error.is_empty() { <p class="alert error">{(*error).clone()}</p> }
+            if !error.is_empty() { <p style="color:red">{(*error).clone()}</p> }
        </form>
        </div>
        </main>
    }
 }
@@ -405,7 +395,7 @@ pub fn login_component() -> Html {
 /// ```
 #[component(AllUsers)]
 pub fn all_users_component() -> Html {
-    let users = use_state(Vec::<FilteredUser>::new);
+    let users = use_state(|| Vec::<FilteredUser>::new());
    let error = use_state(|| None::<String>);
    let loading = use_state(|| false);
@@ -417,22 +407,22 @@ pub fn all_users_component() -> Html {
        use_effect_with((), move |_| {
            loading.set(true);
            spawn_local(async move {
-                let url = "/api/users".to_string();
+                let url = format!("/api/users");
                match Request::get(&url).send().await {
                    Ok(response) if response.status() == 200 => {
                        match response.json::<Vec<FilteredUser>>().await {
                            Ok(u) => users.set(u),
-                            Err(err) => error.set(Some(format!("Parser-Fehler: {}", err))),
+                            Err(err) => error.set(Some(format!("Parse error: {}", err))),
                        }
                    }
                    Ok(response) => {
                        if let Ok(text) = response.text().await {
                            error.set(Some(text));
                        } else {
-                            error.set(Some(format!("Status {}", response.status())));
+                            error.set(Some(format!("status {}", response.status())));
                        }
                    }
-                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
+                    Err(err) => error.set(Some(format!("Network error: {}", err))),
                }
                loading.set(false);
            });
@@ -441,37 +431,18 @@ pub fn all_users_component() -> Html {
    }
    if *loading {
-        html! {
+        html! {<p>{ "Wird geladen" }</p>}
            <div class="form-container">
                <div class="page-header">
                    <h1>{ "Alle Benutzer" }</h1>
                </div>
                <p>{ "Lade..." }</p>
            </div>
        }
    } else if let Some(e) = &*error {
-        html! {
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
            <div class="form-container">
                <div class="page-header">
                    <h1>{ "Alle Benutzer" }</h1>
                </div>
                <p class="alert error">{ format!("Fehler: {}", e) }</p>
            </div>
        }
    } else {
        html! {
-            <div class="form-container">
+            <ul class="postits">
                <div class="page-header">
                    <h1>{ "Alle Benutzer" }</h1>
                </div>
                <ul class="user-list">
            { for users.iter().map(|t| html! {
-                        <li key={t.id.to_string()}>
+                    <li key={t.id.to_string()} class="listbox">
                        <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}", t.first_name, t.last_name) }</h3></Link<crate::Route>>
                    </li>
                })}
            </ul>
            </div>
        }
    }
 }
@@ -539,7 +510,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
                        if status == 200 {
                            match response.json::<FilteredUser>().await {
                                Ok(u) => user.set(Some(u)),
-                                Err(err) => error.set(Some(format!("Parser-Fehler: {}", err))),
+                                Err(err) => error.set(Some(format!("Parse error: {}", err))),
                            }
                        } else {
                            match response.json::<ApiError>().await {
@@ -548,13 +519,13 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
                                    if let Ok(text) = response.text().await {
                                        error.set(Some(text));
                                    } else {
-                                        error.set(Some(format!("Server-Fehler: {}", status)));
+                                        error.set(Some(format!("Server error: {}", status)));
                                    }
                                }
                            }
                        }
                    }
-                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
+                    Err(err) => error.set(Some(format!("Network error: {}", err))),
                }
                loading.set(false);
            });
@@ -566,7 +537,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
    let last_name = use_state(|| "".to_string());
    let username = use_state(|| "".to_string());
    let make_admin = use_state(|| false);
-    let new_pwd = use_state(String::new);
+    let new_pwd = use_state(|| String::new());
    let saving = use_state(|| false);
    let save_error = use_state(|| None::<String>);
    let save_success = use_state(|| false);
@@ -606,6 +577,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
            let last_name = (*last_name).clone();
            let username = (*username).clone();
            let make_admin = *make_admin;
            let new_pwd_state = new_pwd.clone();
            let new_pwd = (*new_pwd).clone();
            saving.set(true);
@@ -616,10 +588,11 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
            let save_error = save_error.clone();
            let save_success = save_success.clone();
            let user_state = user_state.clone();
            let id = id;
            spawn_local(async move {
                let payload = UserUpdateScheme {
-                    id,
+                    id: id,
                    first_name,
                    last_name,
                    username,
@@ -639,13 +612,14 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
                        if let Ok(updated) = resp.json::<FilteredUser>().await {
                            user_state.set(Some(updated));
                        }
                        new_pwd_state.set(String::new());
                        save_success.set(true);
                    }
                    Ok(resp) => {
-                        let txt = resp.text().await.unwrap_or_else(|_| "unbekannt".into());
+                        let txt = resp.text().await.unwrap_or_else(|_| "Unknown".into());
                        save_error.set(Some(format!("HTTP {}: {}", resp.status(), txt)));
                    }
-                    Err(err) => save_error.set(Some(format!("Netzwerkfehler: {}", err))),
+                    Err(err) => save_error.set(Some(format!("Network error: {}", err))),
                }
                saving.set(false);
            });
@@ -659,15 +633,14 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
        let deleting = deleting.clone();
        let delete_error = delete_error.clone();
        let user_state = user.clone(); // or ticket
        let id = id;
        Callback::from(move |e: MouseEvent| {
            e.prevent_default();
            // confirm
            if !web_sys::window()
                .and_then(|w| {
-                    w.confirm_with_message(
+                    w.confirm_with_message("Möchten Sie diesen Eintrag wirklich löschen?")
                        "Sind Sie sicher, dass Sie dieses Element löschen möchten?",
                    )
                        .ok()
                })
                .unwrap_or(false)
@@ -683,17 +656,16 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
            let user_state = user_state.clone();
            spawn_local(async move {
-                let url = format!("/api/users/{}", id); // or /api/tickets/{}
+                let url = format!("/api/users/{}", id);
                let req = Request::delete(&url).credentials(web_sys::RequestCredentials::Include);
                match req.send().await {
                    Ok(resp) if resp.status() == 200 || resp.status() == 204 => {
-                        // remove local state or navigate away
+                        user_state.set(None);
                        user_state.set(None); // clears the shown item
                    }
                    Ok(resp) => {
-                        let txt = resp.text().await.unwrap_or_else(|_| "unbekannt".into());
+                        let txt = resp.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                        delete_error.set(Some(format!("HTTP {}: {}", resp.status(), txt)));
+                        delete_error.set(Some(txt));
                    }
                    Err(err) => delete_error.set(Some(format!("Netzwerkfehler: {}", err))),
                }
@@ -703,12 +675,12 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
    };
    if *loading {
-        html! {<p>{ "Lade..." }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
    } else if let Some(e) = &*error {
-        html! { <p class="alert error">{ format!("Fehler: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
    } else if let Some(u) = &*user {
        html! {
-            <div>
+            <div class="rundbg">
                <div>
                    <p><strong>{ "Vorname: " }</strong>{ &u.first_name }</p>
                    <p><strong>{ "Nachname: " }</strong>{ &u.last_name }</p>
@@ -716,7 +688,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
                    <p><strong>{ "Ist Admin: " }</strong>{ u.is_admin }</p>
                </div>
-                <h1>{ format!("Benutzer #{}", u.id) }</h1>
+                <h1>{ format!("User #{}", u.id) }</h1>
                <form onsubmit={onsubmit}>
                    <div>
                        <label>{ "Vorname" }
@@ -760,7 +732,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
                        </label>
                    </div>
                    <div>
-                        <label>{ "Neues Passwort (leer = unverändert)" }
+                        <label>{ "Neues Passwort (leer = unchanged)" }
                            <input name="new_pwd" type="password"
                                value={(*new_pwd).clone()}
                                oninput={Callback::from(move |e: InputEvent| {
@@ -773,20 +745,20 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
                    <button type="submit" disabled={*saving}>{ if *saving { "Speichern..." } else { "Speichern" } }</button>
                    if *save_success {
-                        <p class="alert success">{ "Erfolgreich aktualisiert" }</p>
+                        <p style="color:green">{ "Erfolgreich aktualisiert" }</p>
                    }
                    if let Some(err) = &*save_error {
-                        <p class="alert error">{ err.clone() }</p>
+                        <p style="color:red">{ err.clone() }</p>
                    }
                </form>
-                <button onclick={ondelete} disabled={*deleting} class="delete">
+                <button onclick={ondelete} disabled={*deleting}>
                    {if *deleting {"Löschen..."} else {"Löschen"}}
                </button>
-                <Link<crate::Route> to={crate::Route::AllUsers} classes="return-to">{ "Zurück zur Benutzerübersicht" }</Link<crate::Route>>
+                <Link<crate::Route> to={crate::Route::AllUsers}>{ "Zurück zur Benutzerübersicht" }</Link<crate::Route>>
                if let Some(err) = &*delete_error {
-                    <p class="alert error">{ err.clone() }</p>
+                    <p style="color:red">{ err.clone() }</p>
                }
            </div>
        }
@@ -6,7 +6,6 @@ use serde::Deserialize;
 use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
 use crate::dequote;
 use crate::pages::ticket::{ActiveUser, Ticket};
 /// A partial representation of a ticket, containing only the fields necessary for statistical analysis.
@@ -21,23 +20,6 @@ use crate::pages::ticket::{ActiveUser, Ticket};
 struct TicketPartial {
    date: DateTime<Utc>,
    room: i16,
    user_id: i16,
 }
 /// A partial representation of a user, containing only the fields necessary for statistical analysis.
 ///
 /// This struct is used to efficiently retrieve and process user data for diagnostics
 /// without fetching the full user details.
 ///
 /// # Fields
 /// - `id`: The unique identifier of the user.
 /// - `first_name`: The first name of the user.
 /// - `last_name`: The last name of the user.
 #[derive(Debug, Deserialize, Clone, PartialEq)]
 struct UserPartial {
    id: i16,
    first_name: String,
    last_name: String,
 }
 /// Properties for components that display room-wise ticket totals.
@@ -52,20 +34,6 @@ struct RoomTotalsProps {
    tickets: Vec<TicketPartial>,
 }
 /// Properties for components that display user-wise ticket totals.
 ///
 /// This struct passes a list of partial user data and partial ticket data to a component
 /// responsible for calculating and visualizing ticket distribution per user.
 ///
 /// # Fields
 /// - `users`: A vector of [`UserPartial`] containing user data relevant for user totals.
 /// - `tickets`: A vector of [`TicketPartial`] containing ticket data relevant for user totals.
 #[derive(Properties, PartialEq)]
 struct UserTotalProps {
    users: Vec<UserPartial>,
    tickets: Vec<TicketPartial>,
 }
 /// Converts a `chrono::DateTime<Utc>` object's weekday to a 0-indexed integer.
 ///
 /// This function maps `chrono::Weekday` values (where Monday is 1, Sunday is 7)
@@ -156,7 +124,7 @@ fn day_counts(partials: &[TicketPartial]) -> [usize; 7] {
            chrono::Weekday::Sun => 6,
        };
        occ[idx] += 1;
-        current += chrono::Duration::days(1);
+        current = current + chrono::Duration::days(1);
    }
    occ
@@ -202,7 +170,7 @@ fn parse_room(r: i16) -> String {
 #[component(Diagnostics)]
 pub fn diagnostics_component() -> Html {
    html! {
-        <div>
+        <div class="rundbg">
            <TicketCount/>
            <SubmitStats/>
        </div>
@@ -236,7 +204,7 @@ pub fn diagnostics_component() -> Html {
 /// ```
 #[component(TicketCount)]
 pub fn ticket_count_component() -> Html {
-    let tickets = use_state(Vec::<Ticket>::new);
+    let tickets = use_state(|| Vec::<Ticket>::new());
    let error = use_state(|| None::<String>);
    let loading = use_state(|| false);
    let user = use_state(|| ActiveUser {
@@ -252,22 +220,22 @@ pub fn ticket_count_component() -> Html {
        use_effect_with((), move |_| {
            loading.set(true);
            spawn_local(async move {
-                let url = "/api/tickets".to_string();
+                let url = format!("/api/tickets");
                match Request::get(&url).send().await {
                    Ok(response) if response.status() == 200 => {
                        match response.json::<Vec<Ticket>>().await {
                            Ok(t) => tickets.set(t),
-                            Err(e) => error.set(Some(format!("parse error: {}", e))),
+                            Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
                        }
                    }
                    Ok(response) => {
                        if let Ok(text) = response.text().await {
                            error.set(Some(text));
                        } else {
-                            error.set(Some(format!("status {}", response.status())));
+                            error.set(Some(format!("Status {}", response.status())));
                        }
                    }
-                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                }
                loading.set(false);
            });
@@ -284,9 +252,9 @@ pub fn ticket_count_component() -> Html {
                    .credentials(web_sys::RequestCredentials::Include)
                    .send()
                    .await
                    && response.status() == 200
                    && let Ok(json) = response.json::<serde_json::Value>().await
                {
                    if response.status() == 200 {
                        if let Ok(json) = response.json::<serde_json::Value>().await {
                            let id = json
                                .get("data")
                                .and_then(|d| d.get("id"))
@@ -299,25 +267,30 @@ pub fn ticket_count_component() -> Html {
                                .unwrap_or(false);
                            user.set(ActiveUser { id, is_admin });
                        }
                    }
                }
            });
            || ()
        });
    }
    if *loading {
-        html! {<p>{ "Lade..." }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
    } else if let Some(e) = &*error {
        html! { <p>{ format!("Fehler: {}", e) }</p> }
    } else {
        let status_conditions = |t: &Ticket| t.status == "ToDo" || t.status == "InProgress";
        let count = tickets
            .iter()
-            .filter(|t| status_conditions(t) && (user.is_admin || (user.id == Some(t.user_id))))
+            .filter(|t| {
                status_conditions(t)
                    && (user.is_admin || user.id.map_or(false, |uid| t.user_id == uid))
            })
            .count();
        html! {
-            <div class="open-tickets">
+            <div class="ticket-count">
-                <h2 class="left">{ "Offene Tickets" }</h2>
+                <h2>{ "Offene Tickets" }</h2>
-                <h4 class="ticket_count center">{ count }</h4>
+                <h4>{ count }</h4>
            </div>
        }
    }
@@ -352,14 +325,12 @@ pub fn ticket_count_component() -> Html {
 /// ```
 #[component(SubmitStats)]
 pub fn submit_stats_component() -> Html {
-    let tickets = use_state(Vec::<TicketPartial>::new);
+    let tickets = use_state(|| Vec::<TicketPartial>::new());
    let users = use_state(Vec::<UserPartial>::new);
    let error = use_state(|| None::<String>);
    let loading = use_state(|| false);
    {
        let tickets = tickets.clone();
        let users = users.clone();
        let error = error.clone();
        let loading = loading.clone();
@@ -371,36 +342,18 @@ pub fn submit_stats_component() -> Html {
                    Ok(response) if response.status() == 200 => {
                        match response.json::<Vec<TicketPartial>>().await {
                            Ok(t) => tickets.set(t),
-                            Err(e) => error.set(Some(format!("parse error: {}", e))),
+                            Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
                        }
                    }
                    Ok(response) => {
                        if let Ok(text) = response.text().await {
                            error.set(Some(text));
                        } else {
-                            error.set(Some(format!("status {}", response.status())));
+                            error.set(Some(format!("Status {}", response.status())));
                        }
                    }
-                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                }
                match Request::get("/api/users").send().await {
                    Ok(response) if response.status() == 200 => {
                        match response.json::<Vec<UserPartial>>().await {
                            Ok(u) => users.set(u),
                            Err(e) => error.set(Some(format!("users parse error: {}", e))),
                        }
                    }
                    Ok(response) => {
                        if let Ok(text) = response.text().await {
                            error.set(Some(text));
                        } else {
                            error.set(Some(format!("users status {}", response.status())));
                        }
                    }
                    Err(err) => error.set(Some(format!("users network error: {}", err))),
                }
                loading.set(false);
            });
            || ()
@@ -430,10 +383,10 @@ pub fn submit_stats_component() -> Html {
    html! {
        <div class="diagnostics-section">
            if *loading {
-                <p>{ "Lade..." }</p>
+                <p>{ "Wird geladen..." }</p>
            }
            if let Some(e) = &*error {
-                <p class="alert error">{ e.clone() }</p>
+                <p style="color: red;">{ e.clone() }</p>
            }
            <h3>{ "Tickets pro Wochentag" }</h3>
            <div class="weekday-chart">
@@ -462,17 +415,8 @@ pub fn submit_stats_component() -> Html {
                    })}
                </div>
            </div>
            <div class="diagnostics-row">
                <div class="diagnostics-column">
                    <h3>{ "Tickets pro Raum" }</h3>
            <RoomTotalTickets tickets={(*tickets).clone()}/>
        </div>
                <div class="diagnostics-column">
                    <h3>{ "Tickets pro Benutzer" }</h3>
                    <UserTotal users={(*users).clone()} tickets={(*tickets).clone()}/>
                </div>
            </div>
        </div>
    }
 }
@@ -513,96 +457,19 @@ fn room_total_component(props: &RoomTotalsProps) -> Html {
    html! {
        <div class="diagnostics-section">
-            <div class="chart">
+            <h3>{ "Tickets pro Raum" }</h3>
            <div class="room-chart">
                { for totals_vec.into_iter().map(|(room, count)| {
                    let label = parse_room(room);
                    let bar_width_percent = (count as f64 / max_count as f64) * 100.0;
                    html! {
-                        <div class="bar-item">
+                        <div class="room-bar-item">
-                            <div class="diagnostics-header">
+                            <div class="room-header">
-                                <span class="diagnostics-label">{ label }</span>
+                                <span class="room-label">{ label }</span>
-                                <span class="diagnostics-count">{ count }</span>
+                                <span class="room-count">{ count }</span>
                            </div>
-                            <div class="bar-container">
+                            <div class="room-bar-container">
-                                <div class="bar" style={format!("width: {}%;", bar_width_percent)}>
+                                <div class="room-bar" style={format!("width: {}%;", bar_width_percent)}>
                                </div>
                            </div>
                        </div>
                    }
                }) }
            </div>
        </div>
    }
 }
 /// A component that displays the total number of tickets per user.
 ///
 /// This component takes lists of [`UserPartial`] and [`TicketPartial`] items to calculate
 /// and display the total number of tickets submitted by each user.
 /// The results are presented in a sorted list with a bar chart visualization.
 ///
 /// # Props
 /// - `users`: A `Vec<UserPartial>` containing partial user data.
 /// - `tickets`: A `Vec<TicketPartial>` containing partial ticket data for analysis.
 ///
 /// # Functionality
 /// - **Maps User Names**: Creates a map from user IDs to their first and last names for display.
 /// - **Calculates Totals**: Aggregates ticket counts for each user.
 /// - **Sorts Results**: Displays users sorted by their ticket count in descending order.
 /// - **Visualizes Data**: Renders a bar chart where the width of each bar is proportional
 ///   to the ticket count for that user, relative to the user with the maximum tickets.
 /// - **Name Formatting**: Uses the [`dequote!`] macro to clean up user names before display.
 ///
 /// # Example
 /// ```rust
 /// html! {
 ///     <UserTotal users={my_user_partials} tickets={my_ticket_partials} />
 /// }
 /// ```
 #[component(UserTotal)]
 fn user_total_component(props: &UserTotalProps) -> Html {
    let name_map: HashMap<i16, (String, String)> = props
        .users
        .iter()
        .map(|u| (u.id, (u.first_name.clone(), u.last_name.clone())))
        .collect();
    let mut counts: HashMap<i16, usize> = HashMap::new();
    for t in &props.tickets {
        *counts.entry(t.user_id).or_insert(0) += 1;
    }
    let mut totals_vec: Vec<(i16, String, String, usize)> = name_map
        .into_iter()
        .map(|(id, (fname, lname))| {
            let c = counts.get(&id).cloned().unwrap_or(0);
            (id, fname, lname, c)
        })
        .collect();
    totals_vec.sort_by(|a, b| b.3.cmp(&a.3));
    let max_count = totals_vec
        .iter()
        .map(|(_, _, _, c)| *c)
        .max()
        .unwrap_or(1)
        .max(1);
    html! {
        <div class="diagnostics-section">
            <div class="chart">
                { for totals_vec.into_iter().map(|(_id, fname, lname, count)| {
                    let label = format!("{} {}", dequote!(fname), dequote!(lname));
                    let bar_width_percent = (count as f64 / max_count as f64) * 100.0;
                    html! {
                        <div class="bar-item">
                            <div class="diagnostics-header">
                                <span class="diagnostics-label">{ label }</span>
                                <span class="diagnostics-count">{ count }</span>
                            </div>
                            <div class="bar-container">
                                <div class="bar" style={format!("width: {}%;", bar_width_percent)}>
                                </div>
                            </div>
                        </div>
@@ -1,12 +1,8 @@
@use "variables" as *;
@mixin card {
-  background: $color-container;
+  backgroud: #fff;
-  border-radius: $border-radius;
+  border-radius: &border-radius;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
-  padding: $spacing-md;
+  padding: var(--spacing-md);
  @media (prefers-color-scheme: dark) {
    background: $color-container-dark;
  }
 }
@@ -1,5 +1,6 @@
@use "variables" as *;
 .u-hidden { display: none !important; }
-.u-gap-sm { gap: $spacing-sm; }
+.u-gap-sm { gap: var(--spacing-sm); }
-.text-muted { color: $color-muted; }
+.text-muted { color: var(--color-muted); }
@@ -1,34 +1,34 @@
-// Color Palette (Reference Style)
+:root {
-$color-bg: var(--color-bg);
+  --color-bg: #ffffff;
-$color-bg-dark: var(--color-bg-dark);
+  --color-sidebar: #570000;
-$color-container: var(--color-container);
+  --color-accent: #2563eb;
-$color-container-dark: var(--color-container-dark);
+  --color-muted: #6b7280;
-$color-sidebar: #0f172a;
+  --spacing-sm: 8px;
-$color-primary: #2b79c2;
+  --spacing-md: 16px;
-$color-primary-hover: #1d5fa0;
+  --border-radius: 6px;
-$color-accent: #2b79c2;
+  --rundbgbackgroundcolor: #a0a0a0;
-$color-muted: #6b7280;
+  --sidebar-font: #fffefe;
-$color-text: var(--color-text);
+  --color: #000000;
-$color-text-dark: var(--color-text-dark);
+  --color-container: #f0f0f0;
  --color-text: #000000;
  --color-placeholder: #757575;
  --color-input: #1a1a1a;
 }
-// Status Colors
+[data-theme='dark'] {
-$color-status-todo: #ffcccc;
+  --color-bg: #000000;
-$color-status-todo-text: #a00;
+  --color-sidebar: #b7d300;
-$color-status-inprogress: #fff3cd;
+  --color-accent: #eb2525;
-$color-status-inprogress-text: #856404;
+  --color-muted: #999999;
-$color-status-done: #d4edda;
+  --spacing-sm: 8px;
-$color-status-done-text: #155724;
+  --spacing-md: 16px;
-$color-status-archived: #e0e0e0;
+  --border-radius: 6px;
-$color-status-archived-text: #666666;
+  --rundbgbackgroundcolor: #505050;
-
+  --sidebar-font: #000000;
-// Action Colors
+  --color: #000000;
-$color-logout: #ff4d4d;
+  --color-container: #1a1a1a;
-$color-logout-hover: #e60000;
+  --color-text: #000000;
-
+  --color-placeholder: #a0a0a0;
-// Spacing
+  --color-input: #f0f0f0;
-$spacing-sm: 8px;
+}
 $spacing-md: 16px;
 $spacing-lg: 2rem;
 $border-radius: 0.5rem;
 $border-radius-lg: 10px;
@@ -1,82 +0,0 @@
@use "../variables" as *;
 .ticket-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: $spacing-lg;
  li {
    border-left: 4px solid;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: $border-radius-lg;
    background: $color-container;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    @media (prefers-color-scheme: dark) {
      background: $color-container-dark;
    }
    h3 {
      margin-top: 0;
      margin-bottom: $spacing-md;
      color: $color-primary;
      a {
        color: $color-primary;
        text-decoration: none;
        transition: color 0.2s ease-in-out;
        &:hover {
          color: $color-primary-hover;
          text-decoration: underline;
        }
      }
    }
    p {
      margin: 0.3rem 0;
    }
    &.To-Do {
      border-left-color: $color-status-todo-text;
    }
    &.InProgress {
      border-left-color: $color-status-inprogress-text;
    }
    &.Completed {
      border-left-color: $color-status-done-text;
    }
    &.Archived {
      border-left-color: $color-status-archived-text;
    }
  }
 }
 .ticket-list-actions {
  display: flex;
  gap: $spacing-md;
  flex-wrap: wrap;
  margin-top: $spacing-lg;
  a {
    display: inline-block;
    padding: $spacing-md $spacing-lg;
    background: $color-primary;
    color: white;
    text-decoration: none;
    border-radius: $border-radius;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    &:hover {
      background-color: $color-primary-hover;
    }
  }
 }
@@ -1,13 +0,0 @@
@use "../variables" as *;
 .user-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  li {
    h3 {
      margin-top: 0;
    }
  }
 }
@@ -1,75 +0,0 @@
 :root {
  --color-bg: #f0f2f5;
  --color-bg-dark: #121212;
  --color-container: #ffffff;
  --color-container-dark: #333333;
  --color-text: #111827;
  --color-text-dark: #e2e2e2;
 }
 // Automatically respect standard media query if no override is set
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-container: #333333;
    --color-text: #e2e2e2;
  }
 }
 // Force Light Mode overrides
 body.theme-light {
  --color-bg: #f0f2f5;
  --color-bg-dark: #f0f2f5;
  --color-container: #ffffff;
  --color-container-dark: #ffffff;
  --color-text: #111827;
  --color-text-dark: #111827;
 }
 // Force Dark Mode overrides
 body.theme-dark {
  --color-bg: #121212;
  --color-bg-dark: #121212;
  --color-container: #333333;
  --color-container-dark: #333333;
  --color-text: #e2e2e2;
  --color-text-dark: #e2e2e2;
 }
 // Fixed positioning ensures NO other component's layout is ever altered
 .dark-mode-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.2);
  background-color: var(--color-container);
  color: var(--color-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  svg {
    width: 36px;
    height: 36px;
    stroke: var(--color-text);
    transition: stroke 0.2s ease-in-out;
  }
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    background-color: var(--color-bg);
  }
  &:active {
    transform: translateY(0);
  }
 }
@@ -0,0 +1,27 @@
 body {
 	/* Formular Styles */
 	input, textarea, select, button {
 	  width: 100%;
 	  margin-top: 1rem;
 	  padding: 0.75rem;
 	  font-size: 1rem;
 	  border-radius: 0.5rem;
 	  color: var(--color-input);
 	  border: none;
 	  cursor: pointer;
 	  margin-bottom: 15px;
 	}
 	input::placeholder,
 	textarea::placeholder {
 	  color: var(--color-placeholder);
 	  opacity: 1;
 	}
 	button:hover  {
 	  cursor: pointer;
 	  border: none;
 	  transition: all 0.2s ease-in-out;
 	  margin-bottom: 15px;
 	}
 }
@@ -4,22 +4,18 @@
 .diagnostics-container {
  display: flex;
  flex-direction: column;
-  gap: $spacing-md;
+  gap: var(--spacing-md);
 }
 .diagnostics-section {
-  background-color: $color-container;
+  background-color: #ffffff;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
-  padding: $spacing-md;
+  padding: var(--spacing-md);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  @media (prefers-color-scheme: dark) {
    background-color: $color-container-dark;
  }
  h3 {
-    margin: 0;
+    margin: 0 0 var(--spacing-md) 0;
-    color: $color-primary;
+    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 600;
  }
@@ -30,14 +26,8 @@
  flex-direction: column;
  gap: 12px;
  border: 1px solid #e5e7eb;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
-  background-color: $color-container;
+  background-color: #f9fafb;
  margin: 16px 0px;
  @media (prefers-color-scheme: dark) {
    background-color: $color-container-dark;
    border-color: #555;
  }
 }
 .weekday-bars {
@@ -45,7 +35,7 @@
  gap: 12px;
  align-items: flex-end;
  height: 205px;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
  overflow-x: auto;
  padding-bottom: 0px;
 }
@@ -53,15 +43,15 @@
 .weekday-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  min-width: 60px;
  height: 100%;
  justify-content: end;
  .bar {
    width: 100%;
-    background-color: $color-primary;
+    background-color: var(--color-accent);
    border-radius: 4px 4px 0 0;
    transition: background-color 0.2s ease;
@@ -74,7 +64,7 @@
 .weekday-labels {
  display: flex;
  gap: 12px;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
  padding-top: 0;
  overflow-x: auto;
@@ -87,131 +77,62 @@
    .day {
      font-weight: 600;
      font-size: 12px;
-      color: $color-text;
+      color: #1f2937;
      margin-bottom: 2px;
      @media (prefers-color-scheme: dark) {
        color: $color-text-dark;
      }
    }
    .value {
      font-size: 11px;
-      color: $color-muted;
+      color: var(--color-muted);
    }
  }
 }
-.chart {
+.room-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
  border: 1px solid #e5e7eb;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
-  background-color: $color-container;
+  background-color: #f9fafb;
  width: 100%;
  @media (prefers-color-scheme: dark) {
    background-color: $color-container-dark;
    border-color: #555;
  }
 }
-.bar-item {
+.room-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
-  .diagnostics-header {
+  .room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    .diagnostics-label {
+    .room-label {
      font-weight: 600;
      font-size: 14px;
-      color: $color-text;
+      color: #1f2937;
      min-width: 50px;
      @media (prefers-color-scheme: dark) {
        color: $color-text-dark;
      }
    }
-    .diagnostics-count {
+    .room-count {
      font-size: 12px;
-      color: $color-muted;
+      color: var(--color-muted);
      font-weight: 500;
    }
  }
-  .bar-container {
+  .room-bar-container {
    width: 100%;
    height: 24px;
    background-color: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
-    @media (prefers-color-scheme: dark) {
+    .room-bar {
      background-color: #555;
    }
    .bar {
      height: 100%;
-      background-color: $color-primary;
+      background-color: #570000;
      transition: width 0.3s ease;
    }
  }
 }
 .diagnostics-row {
  display: flex;
  gap: 24px;              
  align-items: flex-start;
  flex-wrap: wrap;        
 }
 .diagnostics-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 48%;             
  min-width: 280px;       
 }
 .open-tickets{
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
  min-height: 60px;
  .left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 30%;
    h2 {
      margin: 0;
      white-space: nowrap;
    }
  }
  .center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
 }
 .home {
  .ticket_count {
    font-size: xxx-large;
    height: 115px;
  }
 }
@@ -1,97 +0,0 @@
@use "../variables" as *;
 .form-container {
  display: flex;
  flex-direction: column;
  gap: $spacing-lg;
  margin-bottom: $spacing-lg;
  form {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    label {
      display: flex;
      flex-direction: column;
      gap: $spacing-sm;
      font-weight: 500;
      color: $color-text;
      @media (prefers-color-scheme: dark) {
        color: $color-text-dark;
      }
    }
    input, textarea, select {
      padding: $spacing-md;
      border: 1px solid #ccc;
      border-radius: $border-radius;
      font-family: Arial, sans-serif;
      font-size: 1rem;
      @media (prefers-color-scheme: dark) {
        background-color: #6b6b6b;
        color: $color-text-dark;
        border-color: #555;
      }
      &:focus {
        outline: none;
        border-color: $color-primary;
        box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
      }
    }
    textarea {
      min-height: 120px;
      resize: vertical;
    }
    button {
      align-self: flex-start;
      padding: $spacing-md $spacing-lg;
      background-color: $color-primary;
      color: white;
      border: none;
      border-radius: $border-radius;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.2s ease-in-out;
      &:hover {
        background-color: $color-primary-hover;
      }
      &:active {
        transform: scale(0.98);
      }
    }
    a {
      display: inline-block;
      padding: $spacing-md $spacing-lg;
      background: $color-primary;
      color: white;
      text-decoration: none;
      border-radius: $border-radius;
      text-align: center;
      transition: background-color 0.2s ease-in-out;
      align-self: flex-start;
      &:hover {
        background-color: $color-primary-hover;
      }
    }
  }
  ul {
    list-style: none;
    padding-left: 0;
    li h3 {
      margin-top: 0;
    }
  }
 }
@@ -0,0 +1,7 @@
 .headline {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    color: #570000;
    margin-top: 150px;
 }   
@@ -0,0 +1,9 @@
 .login-status {
  font-weight: bold;
  margin: 4px 8px;
 }
 .name {
  font-size: 24px;
  margin: 4px 8px;
 }
@@ -0,0 +1,27 @@
 .csg-icon {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  @media (max-width: 768px) {
    max-width: 60px;
    img {
      width: 100%;
      height: auto;
    }
  }
  img {
    width: auto;
    height: auto;
  }
 }
@@ -1,43 +0,0 @@
@use "../variables" as *;
 .login-btn {
  display: inline-block;
  padding: 12px 400px;
  background: $color-primary;
  color: white;
  border-radius: $border-radius-lg;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease-in-out;
  margin-bottom: 15px;
  &:hover {
    background: $color-primary-hover;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
 }
 .logout-btn {
  display: inline-block;
  padding: 10px 20px;
  background: $color-logout;
  color: white;
  border-radius: $border-radius-lg;
  text-decoration: none;
  font-weight: bold;
  transition: 0.2s ease-in-out;
  margin-bottom: 20px;
  &:hover {
    background: $color-logout-hover;
    transform: scale(1.05);
  }
 }
 .content.login {
  margin: 0;
 }
@@ -1,294 +0,0 @@
@use "../variables" as *;
 .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-lg;
  padding-bottom: $spacing-md;
  border-bottom: 2px solid #e5e7eb;
  @media (prefers-color-scheme: dark) {
    border-bottom-color: #555;
  }
  h1 {
    margin: 0;
    color: $color-primary;
    font-size: 1.75rem;
  }
 }
 .page-actions {
  display: flex;
  gap: $spacing-md;
  flex-wrap: wrap;
  a, button {
    display: inline-block;
    padding: $spacing-md;
    background: $color-primary;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: $border-radius;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    &:hover {
      background-color: $color-primary-hover;
    }
  }
 }
 input[type="checkbox"] {
  width: fit-content;
 }
 .grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: $spacing-lg;
  margin-top: $spacing-lg;
  .grid-item {
    background: $color-container;
    border: 1px solid #e5e7eb;
    border-radius: $border-radius;
    padding: $spacing-md;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    @media (prefers-color-scheme: dark) {
      background: $color-container-dark;
      border-color: #555;
    }
    &:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
      transform: translateY(-2px);
    }
    h3 {
      color: $color-primary;
      margin-top: 0;
      margin-bottom: $spacing-md;
    }
    p {
      margin: $spacing-sm 0;
      color: $color-muted;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .item-actions {
      display: flex;
      gap: $spacing-md;
      margin-top: $spacing-md;
      flex-wrap: wrap;
      a, button {
        flex: 1;
        min-width: 100px;
        padding: $spacing-md;
        border: none;
        border-radius: $border-radius;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        transition: background-color 0.2s ease-in-out;
      }
      a.view, button.view {
        background: $color-primary;
        color: white;
        &:hover {
          background-color: $color-primary-hover;
        }
      }
      a.edit, button.edit {
        background: #f59e0b;
        color: white;
        &:hover {
          background-color: #d97706;
        }
      }
      a.delete, button.delete {
        background: $color-logout;
        color: white;
        &:hover {
          background-color: $color-logout-hover;
        }
      }
    }
  }
 }
 .table-container {
  overflow-x: auto;
  margin-top: $spacing-lg;
  border-radius: $border-radius;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  @media (prefers-color-scheme: dark) {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  table {
    width: 100%;
    border-collapse: collapse;
    background: $color-container;
    @media (prefers-color-scheme: dark) {
      background: $color-container-dark;
    }
    thead {
      background: $color-primary;
      color: white;
      th {
        padding: $spacing-md;
        text-align: left;
        font-weight: 600;
        border-bottom: 2px solid darken($color-primary, 10%);
      }
    }
    tbody {
      tr {
        border-bottom: 1px solid #e5e7eb;
        transition: background-color 0.2s ease;
        @media (prefers-color-scheme: dark) {
          border-bottom-color: #555;
        }
        &:hover {
          background-color: #f9fafb;
          @media (prefers-color-scheme: dark) {
            background-color: #444;
          }
        }
        td {
          padding: $spacing-md;
          color: $color-text;
          @media (prefers-color-scheme: dark) {
            color: $color-text-dark;
          }
        }
      }
    }
  }
 }
 .alert {
  padding: $spacing-md;
  border-radius: $border-radius;
  margin-bottom: $spacing-lg;
  border-left: 4px solid;
  &.success {
    background: $color-status-done;
    color: $color-status-done-text;
    border-left-color: $color-status-done-text;
  }
  &.error {
    background: $color-status-todo;
    color: $color-status-todo-text;
    border-left-color: $color-status-todo-text;
  }
  &.warning {
    background: $color-status-inprogress;
    color: $color-status-inprogress-text;
    border-left-color: $color-status-inprogress-text;
  }
  &.info {
    background: #dbeafe;
    color: #1e40af;
    border-left-color: #1e40af;
    @media (prefers-color-scheme: dark) {
      background: #1e3a8a;
      color: #93c5fd;
      border-left-color: #93c5fd;
    }
  }
 }
 .loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #e5e7eb;
  border-top-color: $color-primary;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
 }
 .empty-state {
  text-align: center;
  padding: $spacing-lg;
  color: $color-muted;
  p {
    font-size: 1.1rem;
    margin-bottom: $spacing-md;
  }
  a {
    display: inline-block;
    padding: $spacing-md $spacing-lg;
    background: $color-primary;
    color: white;
    text-decoration: none;
    border-radius: $border-radius;
    transition: background-color 0.2s ease-in-out;
    &:hover {
      background-color: $color-primary-hover;
    }
  }
 }
 .return-to {
  display: block;
  padding: 16px 2rem;
  background: #2b79c2;
    background-color: rgb(43, 121, 194);
  color: white;
  text-decoration: none;
  text-align: center;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease-in-out;
  &:hover {
    background-color: #1d5fa0;
  }
 }
 .delete {
  display: block;
  width: 100%;
  text-align: center;
 }
@@ -1,120 +0,0 @@
@use "../variables" as *;
 .setup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: $color-bg;
  padding: $spacing-lg;
  @media (prefers-color-scheme: dark) {
    background: $color-bg-dark;
  }
 }
 .setup-box {
  width: 100%;
  max-width: 400px;
  background: $color-container;
  padding: $spacing-lg;
  border-radius: 1rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  @media (prefers-color-scheme: dark) {
    background: $color-container-dark;
  }
  h1 {
    color: $color-primary;
    text-align: center;
    margin-top: 0;
    margin-bottom: $spacing-md;
  }
  p {
    text-align: center;
    color: $color-muted;
    margin-bottom: $spacing-lg;
  }
 }
 .setup-form {
  display: flex;
  flex-direction: column;
  gap: $spacing-md;
  .form-group {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
    label {
      font-weight: 500;
      color: $color-text;
      @media (prefers-color-scheme: dark) {
        color: $color-text-dark;
      }
    }
  }
  input {
    padding: $spacing-md;
    border: 1px solid #ccc;
    border-radius: $border-radius;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    @media (prefers-color-scheme: dark) {
      background-color: #6b6b6b;
      color: $color-text-dark;
      border-color: #555;
    }
    &:focus {
      outline: none;
      border-color: $color-primary;
      box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
    }
  }
  button {
    padding: $spacing-md;
    background-color: $color-primary;
    color: white;
    border: none;
    border-radius: $border-radius;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin-top: $spacing-md;
    &:hover {
      background-color: $color-primary-hover;
    }
    &:active {
      transform: scale(0.98);
    }
  }
 }
 .success-message {
  background: $color-status-done;
  color: $color-status-done-text;
  padding: $spacing-md;
  border-radius: $border-radius;
  margin-bottom: $spacing-md;
  border-left: 4px solid $color-status-done-text;
 }
 .error-message {
  background: $color-status-todo;
  color: $color-status-todo-text;
  padding: $spacing-md;
  border-radius: $border-radius;
  margin-bottom: $spacing-md;
  border-left: 4px solid $color-status-todo-text;
 }
@@ -1,23 +1,30 @@
@use "../variables" as *;
@use "../mixins" as *;
 :root {
  color-scheme: dark light;
 }
 .sidebar {
  width: 260px;
-  background: $color-sidebar;
+  background: var(--color-sidebar);
-  color: #fff;
+  color: var(--sidebar-font);
  min-height: 100%;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
-  ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $spacing-sm; flex: 1; }
+ 
  ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; }
  a, .menu-toggle {
-    color: #fff;
+    color: var(--sidebar-font);
    text-decoration: none;
    display: block;
    padding: 8px 12px;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
    transition: background 0.2s ease-in-out;
    &:hover { background: rgba(255,255,255,0.1); }
  }
@@ -27,7 +34,7 @@
  .submenu {
    margin-left: 8px;
    background: rgba(255,255,255,0.05);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
    padding: 6px;
    li { padding: 4px 0; }
  }
@@ -35,18 +42,25 @@
  .logout-item {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.1);
-    padding-top: $spacing-sm;
+    padding-top: var(--spacing-sm);
  }
-  .logout-button {
+  .sidebar-button {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 93, 43, 0.527);
-    color: #fff;
+    color: var(--sidebar-font);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.801);
    padding: 8px 12px;
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
    text-align: left;
    margin-top: var(--spacing-sm);
    &.theme-toggle-btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .sidebar-header {
@@ -54,7 +68,7 @@
    align-items: center;
    justify-content: space-between;
    width: 100%;
-    margin-bottom: $spacing-md;
+    margin-bottom: var(--spacing-md);
    .home {
      flex-grow: 1;
@@ -70,7 +84,7 @@
      display: none;
      background: transparent;
      border: none;
-      color: #fff;
+      color: var(--sidebar-font);
      cursor: pointer;
      padding: 8px;
      border-radius: 50%;
@@ -86,7 +100,7 @@
      svg {
        width: 20px;
        height: 20px;
-        stroke: #fff;
+        stroke: var(--sidebar-font);
      }
      @media (max-width: 768px) {
@@ -102,7 +116,7 @@
    margin-right: 8px;
  }
-  &.user { width: 220px; background: darken($color-sidebar, 6%); }
+  &.user { width: 220px; background: darken(#570000, 6%); }
 }
 // Floating mobile menu toggle button
@@ -114,7 +128,7 @@
    position: fixed;
    top: 1rem;
    left: 1rem;
-    z-index: 998;
+    z-index: 999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
@@ -139,6 +153,11 @@
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
      background-color: var(--color-bg);
      color: var(--color-container);
      svg {
        stroke: var(--color-container);
      }
    }
    &:active {
@@ -170,5 +189,6 @@
      pointer-events: auto;
    }
  }
 }
@@ -1,80 +1,79 @@
@use "../mixins" as *;
@use "../variables" as *;
 .ticket {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: $border-radius-lg;
  background: $color-container;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  @media (prefers-color-scheme: dark) {
    background: $color-container-dark;
  }
  h3 {
    margin-top: 0;
    color: $color-primary;
  }
  p {
    margin: 0.3rem 0;
  }
 }
 .ticket-card {
  @include card();
-  border-left: 4px solid $color-primary;
+  border-left: 4px solid var(--color-accent);
  display: flex;
  flex-direction: column;
-  gap: $spacing-sm;
+  gap: var(--spacing-sm);
-  .meta { color: $color-muted; font-size: 0.9rem; }
+
  .meta { color: var(--color-muted); font-size: 0.9rem; }
  .title { font-weight: 600; }
 }
-.status {
+.listbox {
-  display: inline-block;
+  max-width: auto;
-  padding: 4px 10px;
+  margin:0 0;
-  border-radius: 8px;
+  background-color: #90ff82;
-  font-size: 0.8rem;
+  background-color: var(--rundbgbackgroundcolor);
-  font-weight: bold;
+  padding-bottom: 8px;
-  margin-top: 8px;
+  color: white;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  border-radius: 20px;
  border-color: #000000;
  border-style: double;
  box-shadow: 10px 10px 10px rgba(43, 43, 43, 0.8);
  font-size: 26px;
  list-style-type: none;
  text-align: center;
  &.To-Do {
-    background: $color-status-todo; 
+    background-color: #b1003b;
    color: $color-status-todo-text; 
  }
  &.InProgress {
-    background: $color-status-inprogress; 
+    background-color: #fff385;
    color: $color-status-inprogress-text; 
  }
  &.Done { 
    background: $color-status-done; 
    color: $color-status-done-text; 
  }
  &.Completed {
-    background: $color-status-done; 
+    background-color: #90ff82;
    color: $color-status-done-text; 
  }
  &.Archived {
-    background: $color-status-archived; 
+    background-color: #af69ee;
-    color: $color-status-archived-text; 
+  }
  a {
    text-decoration: none;
    color: white;
  }
 }
-.ticket_count {
+.postits {
  display: grid;
  gap: 8px;
  margin-top: 96px; 
 }
 .warning {
  color: #570000;
 }
 .ticket-count {
  border-radius: 10px;
  border: 2px solid black;
  width: fit-content;
  padding: 8px;
  margin: 0 auto;
  margin-bottom: 32px;
  h4 {
    text-align: center;
-  align-content: center;
+    font-size: 32px;
-  color: #005f00;
+    margin: 8px;
-  border: 2px solid #848484;
+  }
  border-radius: 10px;
  height: 50px;
  width: 250px;
  margin: 0;
  font-size: xx-large;
 }
@@ -3,126 +3,25 @@
@use "utilities";
@use "components/sidebar";
@use "components/tickets";
@use "components/alltickets";
@use "components/allusers";
@use "components/forms";
@use "components/login";
@use "components/diagnostics";
-@use "components/pages";
+@use "components/frontpage";
-@use "components/setup";
+@use "components/home";
-@use "components/dark_mode";
+@use "components/icon";
 * {
  box-sizing: border-box;
 }
 body {
-  background: variables.$color-bg;
+  background: var(--color-bg);
-  font-family: Arial, sans-serif;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
-  color: variables.$color-text;
+  color: #111827;
  margin: 0;
  padding: 0;
  @media (prefers-color-scheme: dark) {
    background: variables.$color-bg-dark;
    color: variables.$color-text-dark;
  }
 }
 input, textarea, select {
  width: 100%;
  padding: variables.$spacing-md;
  font-size: 1rem;
  border-radius: variables.$border-radius;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 15px;
  font-family: Arial, sans-serif;
  @media (prefers-color-scheme: dark) {
    background-color: #6b6b6b;
    color: variables.$color-text-dark;
    border-color: #555;
  }
 }
 button {
  padding: variables.$spacing-md;
  font-size: 1rem;
  border-radius: variables.$border-radius;
  background-color: variables.$color-primary;
  color: white;
  border: none;
  cursor: pointer;
  margin-bottom: 15px;
  transition: background-color 0.2s ease-in-out;
  font-family: Arial, sans-serif;
  font-weight: bold;
  &:hover {
    background-color: variables.$color-primary-hover;
  }
 }
 form {
  display: flex;
  flex-direction: column;
  gap: variables.$spacing-md;
  label {
    display: flex;
    flex-direction: column;
    gap: variables.$spacing-sm;
    font-weight: 500;
  }
  a {
    display: inline-block;
    padding: variables.$spacing-md;
    background: variables.$color-primary;
    color: white;
    text-decoration: none;
    border-radius: variables.$border-radius;
    text-align: center;
    transition: background-color 0.2s ease-in-out;
    &:hover {
      background-color: variables.$color-primary-hover;
    }
  }
 }
 .container {
  max-width: 900px;
  margin: auto;
  background: variables.$color-container;
  padding: variables.$spacing-lg;
  border-radius: 1rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  @media (prefers-color-scheme: dark) {
    background: variables.$color-container-dark;
  }
 }
 .header-with-image {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
 }
 .header-with-image img {
  height: 60px;
 }
 .admin { display: flex; }
 .layout {
  display: flex;
-  min-height: 100vh;
+  height: 100vh;
-  margin: 0;
+  overflow: hidden;
-  padding: 0;
+  box-sizing: border-box;
 }
 .sidebar {
@@ -133,44 +32,108 @@ form {
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
 }
 .content {
  flex: 1;
  min-width: 0;
  margin-left: 260px;
-  padding: variables.$spacing-lg;
+  height: 100%;
-  
+  overflow-y: auto;
-  > :first-child {
+  padding: var(--spacing-md);
-    max-width: 900px;
+  box-sizing: border-box;
    margin: 0 auto;
    background: variables.$color-container;
    padding: variables.$spacing-lg;
    border-radius: 1rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    @media (prefers-color-scheme: dark) {
      background: variables.$color-container-dark;
    }
  }
  h1, h2, h3 {
    color: variables.$color-primary;
    margin-top: 0;
  }
 }
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -260px;
    transition: left .3s ease-in-out;
    z-index: 1000;
    height: 100%;
    box-sizing: border-box;
  }
-  .sidebar.open { 
+  .sidebar.open { left: 0; }
-    left: 0; 
+  .content { margin-left: 0; padding: var(--spacing-md); box-sizing: border-box; }
 }
-  .content { 
+
-    margin-left: 0;
+.rundbg {
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-width: 60%;
  margin: 0 auto;
  background-color: var(--rundbgbackgroundcolor);
  padding-bottom: 96px;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 96px;
  border-radius: 20px;
  gap: 8px;
  border-color: #000000;
  border-style: double;
  box-shadow: 20px 20px 10px rgb(43, 43, 43);
  font-size: 26px;
  label {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  input, select, button, a {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    font-size: 1.8rem;
    background-color: #f0f0f0;
    color: var(--color-input);
    box-shadow: #6d6d6d;
    box-shadow: 6px 6px 8px;
  }
  input[type="checkbox"] {
    width: auto;
  }
  button {
    margin: 16px 0;
  }
  a {
    color: var (--color);
    text-align: center;
    border-style: dashed;
  }
  &.login {
    margin-top: 96px;
    max-width: 40%;
  }
  &.home {
    padding-top: 16px;
  }
 }
 .setup-form input {
  width: 100%;
  box-sizing: border-box;
 }
 input, select, textarea {
  color: var(--color-input);
 }
 input::placeholder,
 textarea::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
 }
Author	SHA1	Message	Date
schn33fuchs	b62bba0173	Docker shit	2026-07-14 19:23:14 +02:00
schn33fuchs	5585917eb1	rename shit	2026-07-14 17:06:47 +02:00
schn33fuchs	b1b29d9f39	Update backend/migrations/20260422094717_user_table.sql	2026-06-20 13:34:46 +02:00
schn33fuchs	042637d248	Add LICENSE.md	2026-06-19 22:35:11 +02:00
schn33fuchs	07003bd305	Update README.md	2026-06-19 20:26:57 +02:00
schn33fuchs	83eadc532c	Video	2026-06-19 20:21:47 +02:00
schn33fuchs	2bb0f01e06	Delete frontend/frontend.tar.xz	2026-06-19 20:13:37 +02:00
TheDiluTek	9686441f71	schwarz	2026-06-18 20:16:52 +02:00
TheDiluTek	a496338042	schwarze schrift sonst sieht man nix	2026-06-18 20:16:01 +02:00
TheDiluTek	3915f997da	Merge branch 'main' of https://git.raffauf-clan.de/schn33fuchs/ticketsystem	2026-06-18 19:58:46 +02:00
TheDiluTek	9704d5792a	njix	2026-06-18 19:58:41 +02:00
schn33fuchs	c11309a3a5	Docs	2026-06-17 16:35:26 +02:00
schn33fuchs	a1d95f1ba2	Styling improvements	2026-06-17 15:47:42 +02:00
schn33fuchs	45e5c657c7	Translation to German	2026-06-17 15:47:34 +02:00
schn33fuchs	584a75009f	README update	2026-06-17 13:35:29 +02:00
schn33fuchs	85d73919b5	Small Fix	2026-06-17 13:33:20 +02:00
schn33fuchs	4ba95e6537	Merge branch 'Silas'	2026-06-17 13:32:56 +02:00
schn33fuchs	22bbb7900a	Darkmode styling	2026-06-17 12:51:30 +02:00
schn33fuchs	4a58f49253	Variable fixes	2026-06-17 12:31:01 +02:00
schn33fuchs	38a9e00434	Darkmode	2026-06-17 12:30:51 +02:00
schn33fuchs	926a4fcc42	Styling and improvements	2026-06-10 12:47:29 +02:00
schn33fuchs	5101c0ff4d	Sam did styling	2026-06-08 12:52:54 +02:00
schn33fuchs	2a53c7372d	Archive style	2026-06-07 20:43:12 +02:00
schn33fuchs	75f3ef392e	Mobile fix The CSG logo shrinks when on mobile screens	2026-06-07 12:11:49 +02:00
schn33fuchs	159202a7af	Sidebar improvement It now works on mobile	2026-06-07 12:11:32 +02:00
schn33fuchs	8fd35f3e82	Documentation	2026-06-07 11:56:16 +02:00
schn33fuchs	177e959bbd	Center	2026-06-06 18:53:44 +02:00
schn33fuchs	3d68064b33	Resize	2026-06-06 18:50:56 +02:00
schn33fuchs	52ca6ec96f	Home button now has an svg	2026-06-06 18:48:14 +02:00
schn33fuchs	7f3913dcfb	Post merge fix	2026-06-06 18:44:40 +02:00
schn33fuchs	31e98c0936	Merge branch 'ticket_background'	2026-06-06 18:36:31 +02:00
schn33fuchs	b404ff5bc9	Path Fixed layout issues and joke message	2026-06-06 18:31:05 +02:00
schn33fuchs	c3b7321005	Styling The ticket backgrounds have color depending on background and some improvements	2026-06-06 18:18:22 +02:00
TheDiluTek	2a15f77f4f	so ein bisschen buttons und links und non admin user tests	2026-06-06 18:13:40 +02:00
TheDiluTek	dfb031949b	view tickets	2026-06-06 17:25:12 +02:00
TheDiluTek	b030e133a2	Merge branch 'main' of https://git.raffauf-clan.de/schn33fuchs/ticketsystem	2026-06-06 17:01:58 +02:00
schn33fuchs	810d554cb9	Fixed bug You could set the password to be an empty string	2026-06-05 21:35:54 +02:00
TheDiluTek	2e6bd2a781	bisschen sidebar schön. problem gefunden: es reicht wenn man benutzernamen eingibt. man logt sich auch ohne passwort ein	2026-06-04 21:48:47 +02:00
schn33fuchs	390630886e	Merge pull request 'Icon' (#42 ) from Icon into main Reviewed-on: #42	2026-06-03 16:57:13 +02:00
schn33fuchs	0ee20e2833	Icon in the corner	2026-06-03 16:10:37 +02:00
schn33fuchs	b7f8df624c	Favion Its there now	2026-06-03 15:53:57 +02:00
schn33fuchs	8a9c9efbcc	Icons	2026-06-03 15:52:10 +02:00
schn33fuchs	c31375573f	.gitignore update	2026-06-03 15:48:52 +02:00
TheDiluTek	b2daed8e99	bug fixes	2026-06-03 15:13:09 +02:00
TheDiluTek	076bd6c545	mehr von login seite gemacht, sah voll gut aus aber hab irgendwas kaputt gemacht und finds nicht	2026-05-30 23:45:39 +02:00
TheDiluTek	a42897de9f	anmeldung überarbeitet, login braucht noch mehr gap als die anderen inputs haben (command?)	2026-05-30 14:03:25 +02:00
TheDiluTek	3154e3de44	login schön gemacht	2026-05-30 13:29:41 +02:00
schn33fuchs	bf0197adae	.gitignore	2026-05-13 16:58:44 +02:00
schn33fuchs	c6a4a24fb6	Sam did something	2026-05-13 13:31:56 +02:00
schn33fuchs	52387f7333	Fun times	2026-05-13 12:18:55 +02:00