Detail-Seite überarbeitet

app/routes.py

@@ -115,7 +115,7 @@ forderung_filter_config = [
         "Invoice_Date",
         default_value="2027-01-01T00:00:00",
     ),
-    FilterConfig("Kunde", "Kunde", "select", "5", "Kunde", "Kunde"),
+    FilterConfig("Kunde", "Kunde", "text", "5", "Kunde", "Kunde"),
     FilterConfig(
         "WiedervorlageVon",
         "Wiedervorlage von",
@@ -175,6 +175,7 @@ def forderungen_liste(request: Request, db: Session = Depends(get_session), limi
         if f.key_column == "":
             continue
         filters[f.name] = {row[col_names.index(f.key_column)]: row[col_names.index(f.value_column)] for row in q}
+        f.options = filters[f.name]
 
     summary = {
         "offen": sum([r[col_names.index("offen")] for r in q]),
@@ -186,6 +187,7 @@ def forderungen_liste(request: Request, db: Session = Depends(get_session), limi
     defaults = {}
     for f in forderung_filter_config:
         defaults[f.name] = unquote(request.query_params.get(f.name, f.default_value))
+        f.current_value = defaults[f.name]
 
     if len(q_limit) == 0:
         return None
@@ -204,6 +206,7 @@ def forderungen_liste(request: Request, db: Session = Depends(get_session), limi
             "defaults": defaults,
             "summary": summary,
             "page": page,
+            "filter_config": forderung_filter_config,
         },
     )
 
@@ -242,7 +245,9 @@ def forderungen_details(
         "betrag": "120,00",
         "faelligkeit": "23.12.1983",
     }
-    template_context["files"] = list(Path(f"C:\\Projekte\\Reisacher-Fileserver\\{client_db}\\{document_no}").glob("*"))
+    fileserver = "C:\\Projekte\\Reisacher-Fileserver"
+    files = [f.relative_to(fileserver) for f in Path(f"{fileserver}\\{client_db}\\{document_no}").glob("*")]
+    template_context["files"] = files
 
     return templates.TemplateResponse(request, "forderungen/details.html", template_context)
 
@@ -386,3 +391,11 @@ def export_docx2(request: Request, client_db: str, document_no: str, db: Session
     doc.save(filename)
 
     return FileResponse(filename, media_type="application/octet-stream", filename=filename.name)
+
+
+@router.get("/files/")
+def get_files(request: Request):
+    name = request.query_params.get("name")
+    filename = Path(f"C:\\Projekte\\Reisacher-Fileserver\\{unquote(name)}")
+
+    return FileResponse(filename, media_type="application/octet-stream", filename=filename.name)

static/assets/css/main.css

@@ -1,15 +1,783 @@
-html {
-  position: relative;
-  min-height: 100%;
+:root {
+    --primary: #5468FF;
+    --primary-light: #8590FF;
+    --primary-dark: #3A4DB2;
+    --student: #E9EFFF;
+    --teacher: #EBFAEF;
+    --teacher-accent: #4CAF50;
+    --text-dark: #1A2138;
+    --text-light: #5F6A8A;
+    --background: #F9FAFC;
+    --panel: #FFFFFF;
+    --border: #E1E5EE;
+    --shadow: 0 4px 12px rgba(84, 104, 255, 0.10);
+    --hover-shadow: 0 6px 16px rgba(84, 104, 255, 0.18);
+    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
+
+/*
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
 body {
-  margin-bottom: 60px; /* Margin bottom by footer height */
+    background-color: var(--background);
+    color: var(--text-dark);
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+*/
+
+.chat-container {
+    width: 700px;
+    height: 700px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 16px;
+    background-color: var(--panel);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    position: relative;
+}
+
+.header {
+    padding: 16px 24px;
+    background-color: var(--panel);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    position: relative;
+    z-index: 10;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.course-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.course-title {
+    font-weight: 600;
+    font-size: 16px;
+    color: var(--text-dark);
+}
+
+.course-participants {
+    font-size: 12px;
+    color: var(--text-light);
+}
+
+.header-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.icon-button {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--background);
+    color: var(--text-light);
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.icon-button:hover {
+    background-color: var(--primary-light);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: var(--hover-shadow);
+}
+
+.icon-button svg {
+    width: 18px;
+    height: 18px;
+}
+
+.tabs {
+    display: flex;
+    padding: 0 20px;
+    background-color: var(--panel);
+    border-bottom: 1px solid var(--border);
+    position: relative;
+    z-index: 5;
+}
+
+.tab {
+    padding: 12px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-light);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: var(--transition);
+    position: relative;
+}
+
+.tab.active {
+    color: var(--primary);
+    border-bottom: 2px solid var(--primary);
+}
+
+.tab:hover:not(.active) {
+    color: var(--text-dark);
+}
+
+.badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-color: var(--primary);
+    color: white;
+    font-size: 10px;
+    font-weight: 500;
+    padding: 1px 6px;
+    border-radius: 10px;
+}
+
+.chat-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    scroll-behavior: smooth;
+}
+
+.chat-content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-content::-webkit-scrollbar-thumb {
+    background-color: var(--border);
+    border-radius: 6px;
+}
+
+.message {
+    display: flex;
+    flex-direction: column;
+    max-width: 80%;
+    animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.message.student {
+    align-self: flex-end;
+}
+
+.message.teacher {
+    align-self: flex-start;
+}
+
+.message-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+}
+
+.avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 12px;
+    color: white;
+    flex-shrink: 0;
+}
+
+.student .avatar {
+    background-color: var(--primary);
+}
+
+.teacher .avatar {
+    background-color: var(--teacher-accent);
+}
+
+.sender-name {
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.student .sender-name {
+    color: var(--primary-dark);
+}
+
+.teacher .sender-name {
+    color: var(--teacher-accent);
+}
+
+.timestamp {
+    font-size: 11px;
+    color: var(--text-light);
+    margin-left: auto;
+}
+
+.message-bubble {
+    padding: 12px 16px;
+    border-radius: 16px;
+    font-size: 14px;
+    line-height: 1.5;
+    position: relative;
+    transition: var(--transition);
+}
+
+.student .message-bubble {
+    background-color: var(--student);
+    border-top-right-radius: 4px;
+}
+
+.teacher .message-bubble {
+    background-color: var(--teacher);
+    border-top-left-radius: 4px;
+}
+
+.message-bubble:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+}
+
+.message-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 6px;
+    justify-content: flex-end;
+    opacity: 0;
+    transition: var(--transition);
+}
+
+.message:hover .message-actions {
+    opacity: 1;
+}
+
+.action-button {
+    background: none;
+    border: none;
+    font-size: 12px;
+    color: var(--text-light);
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 4px;
+    transition: var(--transition);
+}
+
+.action-button:hover {
+    background-color: rgba(84, 104, 255, 0.1);
+    color: var(--primary);
+}
+
+.embed-content {
+    margin-top: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    background-color: white;
+    transition: var(--transition);
+}
+
+.embed-content:hover {
+    box-shadow: var(--shadow);
+    transform: translateY(-2px);
+}
+
+.embed-header {
+    padding: 10px 12px;
+    background-color: rgba(84, 104, 255, 0.05);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border-bottom: 1px solid var(--border);
+}
+
+.embed-icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary);
+}
+
+.embed-title {
+    font-size: 12px;
+    font-weight: 500;
+    flex: 1;
+}
+
+.embed-body {
+    padding: 12px;
+}
+
+.embed-image {
+    width: 100%;
+    border-radius: 6px;
+    height: auto;
+    object-fit: cover;
+}
+
+.embed-text {
+    font-size: 13px;
+    color: var(--text-light);
+    margin-top: 8px;
+    line-height: 1.4;
+}
+
+.embed-footer {
+    padding: 8px 12px;
+    border-top: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.embed-button {
+    background-color: var(--primary-light);
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+    padding: 6px 12px;
+    border-radius: 6px;
+    border: none;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.embed-button:hover {
+    background-color: var(--primary);
+    transform: translateY(-1px);
+    box-shadow: 0 3px 8px rgba(84, 104, 255, 0.2);
+}
+
+.date-divider {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 16px 0;
+    opacity: 0.7;
+}
+
+.divider-line {
+    flex: 1;
+    height: 1px;
+    background-color: var(--border);
+}
+
+.divider-text {
+    font-size: 12px;
+    color: var(--text-light);
+    white-space: nowrap;
+}
+
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--text-light);
+    padding: 8px 12px;
+    margin-bottom: 8px;
+}
+
+.typing-dot {
+    width: 5px;
+    height: 5px;
+    background-color: var(--text-light);
+    border-radius: 50%;
+    animation: typingAnimation 1.4s infinite ease-in-out;
+}
+
+.typing-dot:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.typing-dot:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.typing-dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes typingAnimation {
+
+    0%,
+    100% {
+        transform: translateY(0);
+        opacity: 0.5;
+    }
+
+    50% {
+        transform: translateY(-4px);
+        opacity: 1;
+    }
+}
+
+.input-area {
+    padding: 16px 24px 24px;
+    background-color: var(--panel);
+    border-top: 1px solid var(--border);
+    z-index: 10;
+}
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+.tool-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-light);
+    transition: var(--transition);
+}
+
+.tool-button:hover {
+    background-color: rgba(84, 104, 255, 0.1);
+    color: var(--primary);
+}
+
+.tool-button svg {
+    width: 18px;
+    height: 18px;
+}
+
+.input-container {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.message-input {
+    flex: 1;
+    padding: 14px 16px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background-color: var(--background);
+    font-size: 14px;
+    resize: none;
+    transition: var(--transition);
+    height: 50px;
+    outline: none;
+}
+
+.message-input:focus {
+    border-color: var(--primary-light);
+    box-shadow: 0 0 0 2px rgba(84, 104, 255, 0.1);
+}
+
+.send-button {
+    background-color: var(--primary);
+    color: white;
+    border: none;
+    width: 50px;
+    height: 50px;
+    border-radius: 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition);
+}
+
+.send-button:hover {
+    background-color: var(--primary-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(84, 104, 255, 0.2);
+}
+
+.poll-container {
+    padding: 12px;
+    background-color: rgba(84, 104, 255, 0.05);
+    border-radius: 8px;
+    margin-top: 8px;
+}
+
+.poll-question {
+    font-weight: 500;
+    margin-bottom: 10px;
+    font-size: 13px;
+}
+
+.poll-options {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.poll-option {
+    background-color: white;
+    border: 1px solid var(--border);
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 13px;
+    position: relative;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    justify-content: space-between;
+}
+
+.poll-option:hover {
+    border-color: var(--primary-light);
+    background-color: rgba(84, 104, 255, 0.03);
+}
+
+.poll-option.selected {
+    border-color: var(--primary);
+    background-color: rgba(84, 104, 255, 0.1);
+}
+
+.poll-option.selected::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 3px;
+    background-color: var(--primary);
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+}
+
+.poll-percent {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--primary);
+}
+
+.poll-votes {
+    margin-top: 10px;
+    font-size: 12px;
+    color: var(--text-light);
+    text-align: right;
+}
+
+.resource-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px;
+    background-color: var(--background);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: var(--transition);
+    text-decoration: none;
+    color: var(--text-dark);
+    border: 1px solid var(--border);
+}
+
+.resource-link:hover {
+    background-color: rgba(84, 104, 255, 0.05);
+    border-color: var(--primary-light);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow);
+}
+
+.resource-icon {
+    width: 36px;
+    height: 36px;
+    background-color: rgba(84, 104, 255, 0.1);
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary);
+}
+
+.resource-info {
+    flex: 1;
+}
+
+.resource-title {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.resource-desc {
+    font-size: 11px;
+    color: var(--text-light);
+}
+
+/* Responsive Styles */
+@media (max-width: 700px) {
+    .chat-container {
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+    }
+
+    .message {
+        max-width: 90%;
+    }
+
+    .header-actions {
+        gap: 8px;
+    }
+
+    .icon-button {
+        width: 32px;
+        height: 32px;
+    }
+
+    .tabs {
+        padding: 0 10px;
+    }
+
+    .tab {
+        padding: 12px 10px;
+        font-size: 13px;
+    }
+}
+
+/* Animation for new messages */
+@keyframes popIn {
+    0% {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+
+    50% {
+        transform: scale(1.05);
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.pop-in {
+    animation: popIn 0.3s forwards;
+}
+
+/* Resource expansion animation */
+.resource-expanded {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+
+.resource-expanded.active {
+    max-height: 200px;
+}
+
+/* Tooltip Styles */
+.tooltip {
+    position: relative;
+}
+
+.tooltip::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 130%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 5px 10px;
+    border-radius: 4px;
+    background-color: rgba(26, 33, 56, 0.9);
+    color: white;
+    font-size: 11px;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+    pointer-events: none;
+    z-index: 100;
+}
+
+.tooltip::before {
+    content: '';
+    position: absolute;
+    bottom: 120%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 4px;
+    border-style: solid;
+    border-color: rgba(26, 33, 56, 0.9) transparent transparent transparent;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+    pointer-events: none;
+    z-index: 100;
+}
+
+.tooltip:hover::after,
+.tooltip:hover::before {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Reaction Styles */
+.reactions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 8px;
+}
+
+.reaction {
+    font-size: 12px;
+    padding: 2px 6px 2px 4px;
+    background-color: rgba(84, 104, 255, 0.06);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    cursor: pointer;
+    transition: var(--transition);
 }
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 60px; /* Set the fixed height of the footer here */
-  line-height: 60px; /* Vertically center the text there */
-  background-color: #f5f5f5;
+
+.reaction:hover {
+    background-color: rgba(84, 104, 255, 0.15);
 }
+
+.reaction.active {
+    background-color: rgba(84, 104, 255, 0.2);
+    font-weight: 500;
+}

templates/base/base.html

@@ -8,7 +8,7 @@
   <meta name="description" content="Global Cube">
   <meta name="author" content="Global Cube GmbH - Robert Burghard">
   <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
-  <title>Forderungen</title>
+  <title>Global Cube</title>
   <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
 
   <link href="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.6.1/dist/css/coreui.min.css" rel="stylesheet">
@@ -18,7 +18,7 @@
   <script src="https://cdn.jsdelivr.net/npm/@coreui/icons@3.0.1/dist/cjs/index.min.js"></script>
 
 
-  <!--<link href="/static/assets/css/mainasdf.css" rel="stylesheet">-->
+  <link href="/static/assets/css/main.css" rel="stylesheet">
 
   <!-- Favicon icon -->
   <link rel="icon" href="/static/assets/images/favicon.ico" type="image/x-icon">
@@ -138,7 +138,7 @@
     <main role="main" class="container">
       <div class="container-fluid px-6">
         <img src="/static/assets/images/Reisacher.png">
-        <h2>Forderungsmanagement</h2>
+        <!--<strong>Forderungsmanagement</strong>-->
       </div>
       <div class="container-fluid px-6">
         {% block content %}{% endblock %}

templates/base/chat.html

@@ -1,1172 +1,7 @@
-<html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chat Forderung</title>
-    <style>
-        :root {
-            --primary: #5468FF;
-            --primary-light: #8590FF;
-            --primary-dark: #3A4DB2;
-            --student: #E9EFFF;
-            --teacher: #EBFAEF;
-            --teacher-accent: #4CAF50;
-            --text-dark: #1A2138;
-            --text-light: #5F6A8A;
-            --background: #F9FAFC;
-            --panel: #FFFFFF;
-            --border: #E1E5EE;
-            --shadow: 0 4px 12px rgba(84, 104, 255, 0.10);
-            --hover-shadow: 0 6px 16px rgba(84, 104, 255, 0.18);
-            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-        }
+{% extends "base/base.html" %}
+{% block content %}
 
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-        }
+{%include 'base/chat_container.html' %}
 
-        body {
-            background-color: var(--background);
-            color: var(--text-dark);
-            width: 100%;
-            height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-        }
 
-        .chat-container {
-            width: 700px;
-            height: 700px;
-            display: flex;
-            flex-direction: column;
-            border-radius: 16px;
-            background-color: var(--panel);
-            box-shadow: var(--shadow);
-            overflow: hidden;
-            position: relative;
-        }
-
-        .header {
-            padding: 16px 24px;
-            background-color: var(--panel);
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-            position: relative;
-            z-index: 10;
-        }
-
-        .header-left {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .course-info {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .course-title {
-            font-weight: 600;
-            font-size: 16px;
-            color: var(--text-dark);
-        }
-
-        .course-participants {
-            font-size: 12px;
-            color: var(--text-light);
-        }
-
-        .header-actions {
-            display: flex;
-            gap: 12px;
-        }
-
-        .icon-button {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            border: none;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: var(--background);
-            color: var(--text-light);
-            cursor: pointer;
-            transition: var(--transition);
-        }
-
-        .icon-button:hover {
-            background-color: var(--primary-light);
-            color: white;
-            transform: translateY(-2px);
-            box-shadow: var(--hover-shadow);
-        }
-
-        .icon-button svg {
-            width: 18px;
-            height: 18px;
-        }
-
-        .tabs {
-            display: flex;
-            padding: 0 20px;
-            background-color: var(--panel);
-            border-bottom: 1px solid var(--border);
-            position: relative;
-            z-index: 5;
-        }
-
-        .tab {
-            padding: 12px 16px;
-            font-size: 14px;
-            font-weight: 500;
-            color: var(--text-light);
-            cursor: pointer;
-            border-bottom: 2px solid transparent;
-            transition: var(--transition);
-            position: relative;
-        }
-
-        .tab.active {
-            color: var(--primary);
-            border-bottom: 2px solid var(--primary);
-        }
-
-        .tab:hover:not(.active) {
-            color: var(--text-dark);
-        }
-
-        .badge {
-            position: absolute;
-            top: 8px;
-            right: 8px;
-            background-color: var(--primary);
-            color: white;
-            font-size: 10px;
-            font-weight: 500;
-            padding: 1px 6px;
-            border-radius: 10px;
-        }
-
-        .chat-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: 24px;
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            scroll-behavior: smooth;
-        }
-
-        .chat-content::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        .chat-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        .chat-content::-webkit-scrollbar-thumb {
-            background-color: var(--border);
-            border-radius: 6px;
-        }
-
-        .message {
-            display: flex;
-            flex-direction: column;
-            max-width: 80%;
-            animation: fadeIn 0.3s ease-out;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .message.student {
-            align-self: flex-end;
-        }
-
-        .message.teacher {
-            align-self: flex-start;
-        }
-
-        .message-header {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 4px;
-        }
-
-        .avatar {
-            width: 28px;
-            height: 28px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 600;
-            font-size: 12px;
-            color: white;
-            flex-shrink: 0;
-        }
-
-        .student .avatar {
-            background-color: var(--primary);
-        }
-
-        .teacher .avatar {
-            background-color: var(--teacher-accent);
-        }
-
-        .sender-name {
-            font-size: 13px;
-            font-weight: 600;
-        }
-
-        .student .sender-name {
-            color: var(--primary-dark);
-        }
-
-        .teacher .sender-name {
-            color: var(--teacher-accent);
-        }
-
-        .timestamp {
-            font-size: 11px;
-            color: var(--text-light);
-            margin-left: auto;
-        }
-
-        .message-bubble {
-            padding: 12px 16px;
-            border-radius: 16px;
-            font-size: 14px;
-            line-height: 1.5;
-            position: relative;
-            transition: var(--transition);
-        }
-
-        .student .message-bubble {
-            background-color: var(--student);
-            border-top-right-radius: 4px;
-        }
-
-        .teacher .message-bubble {
-            background-color: var(--teacher);
-            border-top-left-radius: 4px;
-        }
-
-        .message-bubble:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
-        }
-
-        .message-actions {
-            display: flex;
-            gap: 8px;
-            margin-top: 6px;
-            justify-content: flex-end;
-            opacity: 0;
-            transition: var(--transition);
-        }
-
-        .message:hover .message-actions {
-            opacity: 1;
-        }
-
-        .action-button {
-            background: none;
-            border: none;
-            font-size: 12px;
-            color: var(--text-light);
-            cursor: pointer;
-            padding: 2px 6px;
-            border-radius: 4px;
-            transition: var(--transition);
-        }
-
-        .action-button:hover {
-            background-color: rgba(84, 104, 255, 0.1);
-            color: var(--primary);
-        }
-
-        .embed-content {
-            margin-top: 10px;
-            border-radius: 8px;
-            overflow: hidden;
-            border: 1px solid var(--border);
-            background-color: white;
-            transition: var(--transition);
-        }
-
-        .embed-content:hover {
-            box-shadow: var(--shadow);
-            transform: translateY(-2px);
-        }
-
-        .embed-header {
-            padding: 10px 12px;
-            background-color: rgba(84, 104, 255, 0.05);
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            border-bottom: 1px solid var(--border);
-        }
-
-        .embed-icon {
-            width: 20px;
-            height: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--primary);
-        }
-
-        .embed-title {
-            font-size: 12px;
-            font-weight: 500;
-            flex: 1;
-        }
-
-        .embed-body {
-            padding: 12px;
-        }
-
-        .embed-image {
-            width: 100%;
-            border-radius: 6px;
-            height: auto;
-            object-fit: cover;
-        }
-
-        .embed-text {
-            font-size: 13px;
-            color: var(--text-light);
-            margin-top: 8px;
-            line-height: 1.4;
-        }
-
-        .embed-footer {
-            padding: 8px 12px;
-            border-top: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .embed-button {
-            background-color: var(--primary-light);
-            color: white;
-            font-size: 12px;
-            font-weight: 500;
-            padding: 6px 12px;
-            border-radius: 6px;
-            border: none;
-            cursor: pointer;
-            transition: var(--transition);
-        }
-
-        .embed-button:hover {
-            background-color: var(--primary);
-            transform: translateY(-1px);
-            box-shadow: 0 3px 8px rgba(84, 104, 255, 0.2);
-        }
-
-        .date-divider {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin: 16px 0;
-            opacity: 0.7;
-        }
-
-        .divider-line {
-            flex: 1;
-            height: 1px;
-            background-color: var(--border);
-        }
-
-        .divider-text {
-            font-size: 12px;
-            color: var(--text-light);
-            white-space: nowrap;
-        }
-
-        .typing-indicator {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-            font-size: 12px;
-            color: var(--text-light);
-            padding: 8px 12px;
-            margin-bottom: 8px;
-        }
-
-        .typing-dot {
-            width: 5px;
-            height: 5px;
-            background-color: var(--text-light);
-            border-radius: 50%;
-            animation: typingAnimation 1.4s infinite ease-in-out;
-        }
-
-        .typing-dot:nth-child(1) {
-            animation-delay: 0s;
-        }
-
-        .typing-dot:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-
-        .typing-dot:nth-child(3) {
-            animation-delay: 0.4s;
-        }
-
-        @keyframes typingAnimation {
-            0%, 100% {
-                transform: translateY(0);
-                opacity: 0.5;
-            }
-            50% {
-                transform: translateY(-4px);
-                opacity: 1;
-            }
-        }
-
-        .input-area {
-            padding: 16px 24px 24px;
-            background-color: var(--panel);
-            border-top: 1px solid var(--border);
-            z-index: 10;
-        }
-
-        .toolbar {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 12px;
-        }
-
-        .tool-button {
-            background: none;
-            border: none;
-            cursor: pointer;
-            width: 32px;
-            height: 32px;
-            border-radius: 4px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--text-light);
-            transition: var(--transition);
-        }
-
-        .tool-button:hover {
-            background-color: rgba(84, 104, 255, 0.1);
-            color: var(--primary);
-        }
-
-        .tool-button svg {
-            width: 18px;
-            height: 18px;
-        }
-
-        .input-container {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-        }
-
-        .message-input {
-            flex: 1;
-            padding: 14px 16px;
-            border-radius: 10px;
-            border: 1px solid var(--border);
-            background-color: var(--background);
-            font-size: 14px;
-            resize: none;
-            transition: var(--transition);
-            height: 50px;
-            outline: none;
-        }
-
-        .message-input:focus {
-            border-color: var(--primary-light);
-            box-shadow: 0 0 0 2px rgba(84, 104, 255, 0.1);
-        }
-
-        .send-button {
-            background-color: var(--primary);
-            color: white;
-            border: none;
-            width: 50px;
-            height: 50px;
-            border-radius: 12px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: var(--transition);
-        }
-
-        .send-button:hover {
-            background-color: var(--primary-dark);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(84, 104, 255, 0.2);
-        }
-
-        .poll-container {
-            padding: 12px;
-            background-color: rgba(84, 104, 255, 0.05);
-            border-radius: 8px;
-            margin-top: 8px;
-        }
-
-        .poll-question {
-            font-weight: 500;
-            margin-bottom: 10px;
-            font-size: 13px;
-        }
-
-        .poll-options {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .poll-option {
-            background-color: white;
-            border: 1px solid var(--border);
-            padding: 8px 12px;
-            border-radius: 6px;
-            font-size: 13px;
-            position: relative;
-            cursor: pointer;
-            transition: var(--transition);
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .poll-option:hover {
-            border-color: var(--primary-light);
-            background-color: rgba(84, 104, 255, 0.03);
-        }
-
-        .poll-option.selected {
-            border-color: var(--primary);
-            background-color: rgba(84, 104, 255, 0.1);
-        }
-
-        .poll-option.selected::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            height: 100%;
-            width: 3px;
-            background-color: var(--primary);
-            border-top-left-radius: 6px;
-            border-bottom-left-radius: 6px;
-        }
-
-        .poll-percent {
-            font-size: 12px;
-            font-weight: 500;
-            color: var(--primary);
-        }
-
-        .poll-votes {
-            margin-top: 10px;
-            font-size: 12px;
-            color: var(--text-light);
-            text-align: right;
-        }
-
-        .resource-link {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 10px;
-            background-color: var(--background);
-            border-radius: 6px;
-            cursor: pointer;
-            transition: var(--transition);
-            text-decoration: none;
-            color: var(--text-dark);
-            border: 1px solid var(--border);
-        }
-
-        .resource-link:hover {
-            background-color: rgba(84, 104, 255, 0.05);
-            border-color: var(--primary-light);
-            transform: translateY(-2px);
-            box-shadow: var(--shadow);
-        }
-
-        .resource-icon {
-            width: 36px;
-            height: 36px;
-            background-color: rgba(84, 104, 255, 0.1);
-            border-radius: 6px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--primary);
-        }
-
-        .resource-info {
-            flex: 1;
-        }
-
-        .resource-title {
-            font-size: 13px;
-            font-weight: 500;
-        }
-
-        .resource-desc {
-            font-size: 11px;
-            color: var(--text-light);
-        }
-
-        /* Responsive Styles */
-        @media (max-width: 700px) {
-            .chat-container {
-                width: 100%;
-                height: 100%;
-                border-radius: 0;
-            }
-            
-            .message {
-                max-width: 90%;
-            }
-            
-            .header-actions {
-                gap: 8px;
-            }
-            
-            .icon-button {
-                width: 32px;
-                height: 32px;
-            }
-            
-            .tabs {
-                padding: 0 10px;
-            }
-            
-            .tab {
-                padding: 12px 10px;
-                font-size: 13px;
-            }
-        }
-
-        /* Animation for new messages */
-        @keyframes popIn {
-            0% {
-                transform: scale(0.8);
-                opacity: 0;
-            }
-            50% {
-                transform: scale(1.05);
-            }
-            100% {
-                transform: scale(1);
-                opacity: 1;
-            }
-        }
-
-        .pop-in {
-            animation: popIn 0.3s forwards;
-        }
-
-        /* Resource expansion animation */
-        .resource-expanded {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.3s ease;
-        }
-
-        .resource-expanded.active {
-            max-height: 200px;
-        }
-
-        /* Tooltip Styles */
-        .tooltip {
-            position: relative;
-        }
-
-        .tooltip::after {
-            content: attr(data-tooltip);
-            position: absolute;
-            bottom: 130%;
-            left: 50%;
-            transform: translateX(-50%);
-            padding: 5px 10px;
-            border-radius: 4px;
-            background-color: rgba(26, 33, 56, 0.9);
-            color: white;
-            font-size: 11px;
-            white-space: nowrap;
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.2s ease;
-            pointer-events: none;
-            z-index: 100;
-        }
-
-        .tooltip::before {
-            content: '';
-            position: absolute;
-            bottom: 120%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 4px;
-            border-style: solid;
-            border-color: rgba(26, 33, 56, 0.9) transparent transparent transparent;
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.2s ease;
-            pointer-events: none;
-            z-index: 100;
-        }
-
-        .tooltip:hover::after,
-        .tooltip:hover::before {
-            opacity: 1;
-            visibility: visible;
-        }
-
-        /* Reaction Styles */
-        .reactions {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 4px;
-            margin-top: 8px;
-        }
-
-        .reaction {
-            font-size: 12px;
-            padding: 2px 6px 2px 4px;
-            background-color: rgba(84, 104, 255, 0.06);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            gap: 3px;
-            cursor: pointer;
-            transition: var(--transition);
-        }
-
-        .reaction:hover {
-            background-color: rgba(84, 104, 255, 0.15);
-        }
-
-        .reaction.active {
-            background-color: rgba(84, 104, 255, 0.2);
-            font-weight: 500;
-        }
-    </style>
-</head>
-<body>
-    <div class="chat-container">
-        <div class="header">
-            <div class="header-left">
-                <div class="avatar" style="background-color: #5468FF;">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
-                </div>
-                <div class="course-info">
-                    <div class="course-title">993413 - Elvis Selimovic / WRG25400108</div>
-                    <div class="course-participants">4 Mitarbeiter involviert</div>
-                </div>
-            </div>
-            <div class="header-actions">
-                <button class="icon-button tooltip" data-tooltip="Search">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                </button>
-                <button class="icon-button tooltip" data-tooltip="Resource Library">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
-                </button>
-                <button class="icon-button tooltip" data-tooltip="Settings">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                </button>
-            </div>
-        </div>
-        <div class="tabs">
-            <div class="tab active">Diese Rechnung</div>
-            <div class="tab">Alle offenen Rechnungen</div>
-            <div class="tab">Dieses Fahrzeug</div>
-            <div class="tab">Gesamte Historie</div>
-        </div>
-        <div class="chat-content" id="chatContent">
-            <div class="date-divider">
-                <div class="divider-line"></div>
-                <div class="divider-text">Q1/2025</div>
-                <div class="divider-line"></div>
-            </div>
-            
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">DKI</div>
-                    <div class="sender-name">Daniel Klingenstein</div>
-                    <div class="timestamp">04.01.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Korrigierte Werkstattrechnung
-                </div>
-                <div class="embed-content">
-                    <div class="embed-header">
-                        <div class="embed-icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
-                        </div>
-                        <div class="embed-title">Rechnung WRG25400108</div>
-                    </div>
-                    <div class="embed-body">
-                        <img src="img.jpg" alt="Rechnung WRG25400108" class="embed-image">
-                        <div class="embed-text">
-                            ...
-                        </div>
-                    </div>
-                    <div class="embed-footer">
-                        <button class="embed-button" id="openResourceBtn">Öffnen</button>
-                    </div>
-                </div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">22.01.2025</div>
-                </div>
-                <div class="message-bubble">
-                    AZ 3120/24 HP Schaden Rep RE kann nicht eingereicht werden. ESW Zusatzprodukte fehlen
-                </div>
-            </div>
-            
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">30.01.2025</div>
-                </div>
-                <div class="message-bubble">
-                    AZ 3120/24 HP Schaden Rep RE an RAW gesendet
-                </div>
-            </div>
-
-            <div class="message student">
-                <div class="message-header">
-                    <div class="avatar">CVE</div>
-                    <div class="sender-name">Carolin Vetter</div>
-                    <div class="timestamp">11.03.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Stand RA
-                </div>
-            </div>
-
-            <div class="date-divider">
-                <div class="divider-line"></div>
-                <div class="divider-text">Q2/2025</div>
-                <div class="divider-line"></div>
-            </div>
-
-            <div class="message student">
-                <div class="message-header">
-                    <div class="avatar">CVE</div>
-                    <div class="sender-name">Carolin Vetter</div>
-                    <div class="timestamp">01.04.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Akteneinsicht liegt nun vor, im Diktat
-                </div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">14.04.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Stand RA
-                </div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">22.04.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Nachgefordert
-                </div>
-                <div class="embed-content">
-                    <div class="embed-header">
-                        <div class="embed-icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
-                        </div>
-                        <div class="embed-title">Mahnung</div>
-                    </div>
-                    <div class="embed-body">
-                        <img src="img.jpg" alt="Mahnung 993413" class="embed-image">
-                        <div class="embed-text">
-                            ...
-                        </div>
-                    </div>
-                    <div class="embed-footer">
-                        <button class="embed-button" id="openResourceBtn">Öffnen</button>
-                    </div>
-                </div>
-            </div>
-            
-
-
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">09.05.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Stand RA
-                </div>
-            </div>
-
-            <div class="message student">
-                <div class="message-header">
-                    <div class="avatar">CVE</div>
-                    <div class="sender-name">Carolin Vetter</div>
-                    <div class="timestamp">03.06.2025</div>
-                </div>
-                <div class="message-bubble">
-                    RA schreibt KD an ob geklagt werden soll und RS besteht
-                </div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">23.06.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Stand RA
-                </div>
-            </div>
-
-            <div class="message student">
-                <div class="message-header">
-                    <div class="avatar">CVE</div>
-                    <div class="sender-name">Carolin Vetter</div>
-                    <div class="timestamp">23.06.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Akte im Diktat
-                </div>
-            </div>
-            <div class="date-divider">
-                <div class="divider-line"></div>
-                <div class="divider-text">Q3/2025</div>
-                <div class="divider-line"></div>
-            </div>
-
-            <div class="message student">
-                <div class="message-header">
-                    <div class="avatar">CVE</div>
-                    <div class="sender-name">Carolin Vetter</div>
-                    <div class="timestamp">01.07.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Warten auf RÜ Polizei
-                </div>
-            </div>
-
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">15.07.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Stand RA
-                </div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">22.07.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Warten auf Rückmeldung Mdt wg Rechtschutz
-                </div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">11.08.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Stand RA
-                </div>
-            </div>
-
-            <div class="message student">
-                <div class="message-header">
-                    <div class="avatar">CVE</div>
-                    <div class="sender-name">Carolin Vetter</div>
-                    <div class="timestamp">19.08.2025</div>
-                </div>
-                <div class="message-bubble">
-                    ST bez. Mit STN S+W wird nachgefordert 
-                </div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">08.09.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Stand RA
-                </div>
-            </div>
-
-            <div class="date-divider">
-                <div class="divider-line"></div>
-                <div class="divider-text">Q4/2025</div>
-                <div class="divider-line"></div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">14.10.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Klage in Vorbereitung WV 18.11.2025
-                </div>
-            </div>
-
-            <div class="message student">
-                <div class="message-header">
-                    <div class="avatar">CVE</div>
-                    <div class="sender-name">Carolin Vetter</div>
-                    <div class="timestamp">25.11.2025</div>
-                </div>
-                <div class="message-bubble">
-                    Stand RA
-                </div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">MDE</div>
-                    <div class="sender-name">Maria Dietrich</div>
-                    <div class="timestamp">30.11.2025</div>
-                </div>
-                <div class="message-bubble">
-                    EWB
-                </div>
-                <div class="embed-content">
-                    <div class="embed-header">
-                        <div class="embed-icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
-                        </div>
-                        <div class="embed-title">EWB 20% 11/2025</div>
-                    </div>
-                    <div class="embed-body">
-                        <img src="img.jpg" alt="Buchung" class="embed-image">
-                        <div class="embed-text">
-                            ...
-                        </div>
-                    </div>
-                    <div class="embed-footer">
-                        <button class="embed-button" id="openResourceBtn">Öffnen</button>
-                    </div>
-                </div>
-            </div>  
-
-            <div class="message student">
-                <div class="message-header">
-                    <div class="avatar">CVE</div>
-                    <div class="sender-name">Carolin Vetter</div>
-                    <div class="timestamp">04.12.2025</div>
-                </div>
-                <div class="message-bubble">
-                    gerichtliches Verfahren läuft WV 02/26
-                </div>
-            </div>
-
-            <div class="date-divider">
-                <div class="divider-line"></div>
-                <div class="divider-text">Q1/2026</div>
-                <div class="divider-line"></div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">19.02.2026</div>
-                </div>
-                <div class="message-bubble">
-                    Stand RA
-                </div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">09.03.2026</div>
-                </div>
-                <div class="message-bubble">
-                    Schreiben von RAW erhalten. Sehr verwirrend, nochmals nachgefragt
-                </div>
-            </div>
-
-            <div class="message teacher">
-                <div class="message-header">
-                    <div class="avatar">JAK</div>
-                    <div class="sender-name">Jennifer Walk</div>
-                    <div class="timestamp">10.03.2026</div>
-                </div>
-                <div class="message-bubble">
-                    Vergleich mit HP Versicherung nun KD angeschrieben ob bei seiner Kasko eingereicht wird oder nicht
-                </div>
-            </div>
-            
-        </div>
-        <div class="input-area">
-            <div class="toolbar">
-                <button class="tool-button tooltip" data-tooltip="Attach File">
-                </button>
-            </div>
-        </div>
-    </div>
-</body>
-</html>
+{% endblock %}

templates/base/chat_container.html

@@ -0,0 +1,420 @@
+<div class="chat-container">
+    <div class="header">
+        <div class="header-left">
+            <div class="avatar" style="background-color: #5468FF;">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path
+                        d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
+                    </path>
+                </svg>
+            </div>
+            <div class="course-info">
+                <div class="course-title">{{ forderung_kopf[0].Kunde }} / {{ forderung_kopf[0].Document_No }}</div>
+                <div class="course-participants">4 Mitarbeiter involviert</div>
+            </div>
+        </div>
+        <div class="header-actions">
+            <button class="icon-button tooltip" data-tooltip="Search">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+            </button>
+            <button class="icon-button tooltip" data-tooltip="Resource Library">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
+                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
+                </svg>
+            </button>
+            <button class="icon-button tooltip" data-tooltip="Settings">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="3"></circle>
+                    <path
+                        d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
+                    </path>
+                </svg>
+            </button>
+        </div>
+    </div>
+    <div class="tabs">
+        <div class="tab active">Diese Rechnung</div>
+        <div class="tab">Alle offenen Rechnungen</div>
+        <div class="tab">Dieses Fahrzeug</div>
+        <div class="tab">Gesamte Historie</div>
+    </div>
+    <div class="chat-content" id="chatContent">
+        <div class="date-divider">
+            <div class="divider-line"></div>
+            <div class="divider-text">Q1/2025</div>
+            <div class="divider-line"></div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">DKI</div>
+                <div class="sender-name">Daniel Klingenstein</div>
+                <div class="timestamp">04.01.2025</div>
+            </div>
+            <div class="message-bubble">
+                Korrigierte Werkstattrechnung
+            </div>
+            <div class="embed-content">
+                <div class="embed-header">
+                    <div class="embed-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
+                            <line x1="8" y1="2" x2="8" y2="18"></line>
+                            <line x1="16" y1="6" x2="16" y2="22"></line>
+                        </svg>
+                    </div>
+                    <div class="embed-title">Rechnung WRG25400108</div>
+                </div>
+                <div class="embed-body">
+                    <img src="/static/assets/images/vorschau.jpg" alt="Rechnung WRG25400108" class="embed-image"  style="height:30px;">
+                    <div class="embed-text">
+                        ...
+                    </div>
+                </div>
+                <div class="embed-footer">
+                    <button class="embed-button" id="openResourceBtn">Öffnen</button>
+                </div>
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">22.01.2025</div>
+            </div>
+            <div class="message-bubble">
+                AZ 3120/24 HP Schaden Rep RE kann nicht eingereicht werden. ESW Zusatzprodukte fehlen
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">30.01.2025</div>
+            </div>
+            <div class="message-bubble">
+                AZ 3120/24 HP Schaden Rep RE an RAW gesendet
+            </div>
+        </div>
+
+        <div class="message student">
+            <div class="message-header">
+                <div class="avatar">CVE</div>
+                <div class="sender-name">Carolin Vetter</div>
+                <div class="timestamp">11.03.2025</div>
+            </div>
+            <div class="message-bubble">
+                Stand RA
+            </div>
+        </div>
+
+        <div class="date-divider">
+            <div class="divider-line"></div>
+            <div class="divider-text">Q2/2025</div>
+            <div class="divider-line"></div>
+        </div>
+
+        <div class="message student">
+            <div class="message-header">
+                <div class="avatar">CVE</div>
+                <div class="sender-name">Carolin Vetter</div>
+                <div class="timestamp">01.04.2025</div>
+            </div>
+            <div class="message-bubble">
+                Akteneinsicht liegt nun vor, im Diktat
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">14.04.2025</div>
+            </div>
+            <div class="message-bubble">
+                Stand RA
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">22.04.2025</div>
+            </div>
+            <div class="message-bubble">
+                Nachgefordert
+            </div>
+            <div class="embed-content">
+                <div class="embed-header">
+                    <div class="embed-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
+                            <line x1="8" y1="2" x2="8" y2="18"></line>
+                            <line x1="16" y1="6" x2="16" y2="22"></line>
+                        </svg>
+                    </div>
+                    <div class="embed-title">Mahnung</div>
+                </div>
+                <div class="embed-body">
+                    <img src="/static/assets/images/vorschau.jpg" alt="Mahnung 993413" class="embed-image" style="height:30px;">
+                    <div class="embed-text">
+                        ...
+                    </div>
+                </div>
+                <div class="embed-footer">
+                    <button class="embed-button" id="openResourceBtn">Öffnen</button>
+                </div>
+            </div>
+        </div>
+
+
+
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">09.05.2025</div>
+            </div>
+            <div class="message-bubble">
+                Stand RA
+            </div>
+        </div>
+
+        <div class="message student">
+            <div class="message-header">
+                <div class="avatar">CVE</div>
+                <div class="sender-name">Carolin Vetter</div>
+                <div class="timestamp">03.06.2025</div>
+            </div>
+            <div class="message-bubble">
+                RA schreibt KD an ob geklagt werden soll und RS besteht
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">23.06.2025</div>
+            </div>
+            <div class="message-bubble">
+                Stand RA
+            </div>
+        </div>
+
+        <div class="message student">
+            <div class="message-header">
+                <div class="avatar">CVE</div>
+                <div class="sender-name">Carolin Vetter</div>
+                <div class="timestamp">23.06.2025</div>
+            </div>
+            <div class="message-bubble">
+                Akte im Diktat
+            </div>
+        </div>
+        <div class="date-divider">
+            <div class="divider-line"></div>
+            <div class="divider-text">Q3/2025</div>
+            <div class="divider-line"></div>
+        </div>
+
+        <div class="message student">
+            <div class="message-header">
+                <div class="avatar">CVE</div>
+                <div class="sender-name">Carolin Vetter</div>
+                <div class="timestamp">01.07.2025</div>
+            </div>
+            <div class="message-bubble">
+                Warten auf RÜ Polizei
+            </div>
+        </div>
+
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">15.07.2025</div>
+            </div>
+            <div class="message-bubble">
+                Stand RA
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">22.07.2025</div>
+            </div>
+            <div class="message-bubble">
+                Warten auf Rückmeldung Mdt wg Rechtschutz
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">11.08.2025</div>
+            </div>
+            <div class="message-bubble">
+                Stand RA
+            </div>
+        </div>
+
+        <div class="message student">
+            <div class="message-header">
+                <div class="avatar">CVE</div>
+                <div class="sender-name">Carolin Vetter</div>
+                <div class="timestamp">19.08.2025</div>
+            </div>
+            <div class="message-bubble">
+                ST bez. Mit STN S+W wird nachgefordert
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">08.09.2025</div>
+            </div>
+            <div class="message-bubble">
+                Stand RA
+            </div>
+        </div>
+
+        <div class="date-divider">
+            <div class="divider-line"></div>
+            <div class="divider-text">Q4/2025</div>
+            <div class="divider-line"></div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">14.10.2025</div>
+            </div>
+            <div class="message-bubble">
+                Klage in Vorbereitung WV 18.11.2025
+            </div>
+        </div>
+
+        <div class="message student">
+            <div class="message-header">
+                <div class="avatar">CVE</div>
+                <div class="sender-name">Carolin Vetter</div>
+                <div class="timestamp">25.11.2025</div>
+            </div>
+            <div class="message-bubble">
+                Stand RA
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">MDE</div>
+                <div class="sender-name">Maria Dietrich</div>
+                <div class="timestamp">30.11.2025</div>
+            </div>
+            <div class="message-bubble">
+                EWB
+            </div>
+            <div class="embed-content">
+                <div class="embed-header">
+                    <div class="embed-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
+                            <line x1="8" y1="2" x2="8" y2="18"></line>
+                            <line x1="16" y1="6" x2="16" y2="22"></line>
+                        </svg>
+                    </div>
+                    <div class="embed-title">EWB 20% 11/2025</div>
+                </div>
+                <div class="embed-body">
+                    <img src="/static/assets/images/vorschau.jpg" alt="Buchung" class="embed-image" style="height:30px;">
+                    <div class="embed-text">
+                        ...
+                    </div>
+                </div>
+                <div class="embed-footer">
+                    <button class="embed-button" id="openResourceBtn">Öffnen</button>
+                </div>
+            </div>
+        </div>
+
+        <div class="message student">
+            <div class="message-header">
+                <div class="avatar">CVE</div>
+                <div class="sender-name">Carolin Vetter</div>
+                <div class="timestamp">04.12.2025</div>
+            </div>
+            <div class="message-bubble">
+                gerichtliches Verfahren läuft WV 02/26
+            </div>
+        </div>
+
+        <div class="date-divider">
+            <div class="divider-line"></div>
+            <div class="divider-text">Q1/2026</div>
+            <div class="divider-line"></div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">19.02.2026</div>
+            </div>
+            <div class="message-bubble">
+                Stand RA
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">09.03.2026</div>
+            </div>
+            <div class="message-bubble">
+                Schreiben von RAW erhalten. Sehr verwirrend, nochmals nachgefragt
+            </div>
+        </div>
+
+        <div class="message teacher">
+            <div class="message-header">
+                <div class="avatar">JAK</div>
+                <div class="sender-name">Jennifer Walk</div>
+                <div class="timestamp">10.03.2026</div>
+            </div>
+            <div class="message-bubble">
+                Vergleich mit HP Versicherung nun KD angeschrieben ob bei seiner Kasko eingereicht wird oder nicht
+            </div>
+        </div>
+
+    </div>
+    <div class="input-area">
+        <div class="toolbar">
+            <button class="tool-button tooltip" data-tooltip="Attach File">
+            </button>
+        </div>
+    </div>
+</div>

templates/base/login.html

@@ -3,7 +3,7 @@
 
 <head>
 
-	<title>Reisacher Forderungsmanagement</title>
+	<title>Global Cube</title>
 	<!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
 	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 	<!--[if lt IE 11]>
@@ -41,7 +41,7 @@
 			<div class="row align-items-center">
 				<div class="col-md-6">
 					<div class="card-body">
-						<h2 class="mb-4">Reisacher <span class="text-c-blue">Forderungsmanagement</span></h2>
+						<h2 class="mb-4">Global Cube<br> <span class="text-c-blue">Datenverfeinerungsplattform</span></h2>
 						<p>Aus Freude am Zahlen.</p>
 						<div class="toggle-block">
 							<ol class="position-relative carousel-indicators justify-content-start">

templates/forderungen/details.html

@@ -1,17 +1,20 @@
 {% extends "base/base.html" %}
 {% block content %}
 
+
+<!--
+
 <h3>Kommentare</h3>
 
 <table class="table table-striped table-bordered">
   <thead>
     <tr>
-        <th>Timestamp</th>
-        <th>Name</th>
-        <th>Rolle</th>
-        <th>Begründung</th>
-        <th>Wiedervorlage</th>
-        <th>Kommentar</th>
+      <th>Timestamp</th>
+      <th>Name</th>
+      <th>Rolle</th>
+      <th>Begründung</th>
+      <th>Wiedervorlage</th>
+      <th>Kommentar</th>
     </tr>
   </thead>
   <tbody>
@@ -28,190 +31,466 @@
   </tbody>
 </table>
 
+-->
 
-<h3>Dateien</h3>
+<br>
+<br>
 
-<table class="table table-striped table-bordered">
-  <thead>
-    <tr>
-        <th>Datum</th>
-        <th>Dateiname</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for row in files %}
-    <tr>
-      <td></td>
-      <td>{{ row }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+{%include 'base/chat_container.html' %}
+
+<br>
+<br>
 
 <h3>Eingabemaske</h3>
+<br>
+<br>
 
 <form class="row g-3">
-  <div class="col-md-6">
-    <label for="inputEmail4" class="form-label">Email</label>
-    <input type="email" class="form-control" id="inputEmail4">
-  </div>
-  <div class="col-md-6">
-    <label for="inputPassword4" class="form-label">Password</label>
-    <input type="password" class="form-control" id="inputPassword4">
-  </div>
   <div class="col-12">
-    <label for="inputAddress" class="form-label">Address</label>
-    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+    <div class="form-check" data-coreui-toggle="collapse" data-coreui-target="#VersicherungCollapse"
+      aria-expanded="false" aria-controls="VersicherungCollapse">
+      <input class="form-check-input" type="checkbox" id="Versicherung">
+      <label class="form-check-label" for="Versicherung">
+        <strong>Versicherungsfall</strong>
+      </label>
+    </div>
+  </div>
+
+  <div class="collapse" id="VersicherungCollapse">
+    <div class="card card-body">
+      <div class="row mb-3">
+        <label for="Versicherung_Name" class="col-sm-2 col-form-label">Versicherung</label>
+        <div class="col-sm-3">
+          <select id="Versicherung_Name" name="Versicherung_Name" class="form-select">
+            <option value="" selected>-</option>
+<option>ADAC Autoversicherung AG</option>
+<option>ADLER Versicherung AG</option>
+<option>Allianz Versicherungs-Aktiengesellschaft</option>
+<option>AllSecur Deutschland AG</option>
+<option>ALTE LEIPZIGER Versicherung Aktiengesellschaft</option>
+<option>ARAG Allgemeine Versicherungs-AG</option>
+<option>AXA Versicherung AG</option>
+<option>Badische Allgemeine Versicherung AG</option>
+<option>Barmenia Allgemeine Versicherungs-AG</option>
+<option>Badischer Gemeinde-Versicherungs-Verband</option>
+<option>Basler Securitas Versicherungs-AG</option>
+<option>Basler Versicherungs-Gesellschaft, Basel, Direktion für Deutschland</option>
+<option>BAYERISCHE BEAMTEN VERSICHERUNG AKTIENGESELLSCHAFT</option>
+<option>Bayerischer VersicherungsverbandVersicherungsaktiengesellschaft</option>
+<option>BRUDERHILFE Sachversicherung Aktiengesellschaft im Raum der Kirchen</option>
+<option>Chartis Europe S.A.</option>
+<option>Concordia Versicherungs-Gesellschaft auf Gegenseitigkeit</option>
+<option>Condor Allgemeine Versicherungs-Aktiengesellschaft</option>
+<option>Continentale</option>
+<option>COSMOS Versicherung Aktiengesellschaft</option>
+<option>DA - Deutsche Allgemeine Versicherung Aktiengesellschaft</option>
+<option>DBV Deutsche Beamten-Versicherung Aktiengesellschaft</option>
+<option>Debeka Allgemeine Versicherung Aktiengesellschaft</option>
+<option>deutsche internet versicherung aktiengesellschaft</option>
+<option>DEVK Fast Lane</option>
+<option>Direct Line Versicherung AG</option>
+<option>ERGO Versicherung Aktiengesellschaft</option>
+<option>EUROPA Sachversicherung AG</option>
+<option>Fahrlehrerversicherung Verein auf Gegenseitigkeit</option>
+<option>Feuersozietät Berlin Brandenburg</option>
+<option>GARANTA Versicherungs-AG</option>
+<option>GEGENSEITIGKEIT Versicherung Oldenburg</option>
+<option>Generali Deutschland Versicherung AG</option>
+<option>Gothaer Allgemeine Versicherung AG</option>
+<option>GVV-Kommunalversicherung VVaG</option>
+<option>GVV-Privatversicherung AG</option>
+<option>Haftpflichtgemeinschaft Dt. Nahverkehrs- u. Versorgungsuntern. Allg. VVaG</option>
+<option>Hannoversche Direktversicherung AG</option>
+<option>HanseMerkur Allgemeine Versicherung AG</option>
+<option>HDI Global SE</option>
+<option>HDI Versicherung AG</option>
+<option>HDI-Gerling Firmen und Privat Versicherung AG</option>
+<option>HDI Haftpflichtverband der Deutschen Industrie VVaG</option>
+<option>Helvetia Schweizerische Versicherungsgesellschaft</option>
+<option>HUK 24 Aktiengesellschaft</option>
+<option>HUK-COBURG-Allgemeine Versicherungs AG</option>
+<option>HUK-COBURG Haftpflicht-Unterstützungs-Kasse kraftfahrender Beamter a.G.</option>
+<option>Itzehoer Versicherung/ Brandgilde von 1691 VVaG</option>
+<option>KRAVAG-ALLGEMEINE Versicherungs-Aktiengesellschaft</option>
+<option>KRAVAG-LOGISTIC Versicherungs-Aktiengesellschaft</option>
+<option>KRAVAG-SACH Versicherung des Deutschen Kraftverkehrs VaG</option>
+<option>Landesschadenhilfe Versicherung VaG</option>
+<option>Lippische Landesbrandversicherung AG</option>
+<option>LVM Landwirtschaftlicher Versicherungsverein Münster a.G.</option>
+<option>Mannheimer Versicherung Aktiengesellschaft</option>
+<option>Mecklenburgische Versicherungs-Gesellschaft a.G.</option>
+<option>MÜNCHENER VEREIN Allgemeine Versicherungs-AG</option>
+<option>NÜRNBERGER Allgemeine Versicherungs-AG</option>
+<option>NÜRNBERGER Beamten Allgemeine Versicherungs-AG</option>
+<option>Oldenburgische Landesbrandkasse</option>
+<option>Optima Versicherungs-Aktiengesellschaft</option>
+<option>OVAG - Ostdeutsche Versicherung Aktiengesellschaft</option>
+<option>Öffentliche Feuerversicherung Sachsen-Anhalt</option>
+<option>Öffentliche Versicherung Braunschweig</option>
+<option>Provinzial Nord Brandkasse Aktiengesellschaft</option>
+<option>Provinzial Rheinland Versicherung AG</option>
+<option>R+V Allgemeine Versicherung AG</option>
+<option>R+V Direktversicherung AG</option>
+<option>S direkt Versicherung AG</option>
+<option>SAARLAND Feuerversicherung AG</option>
+<option>SCHWARZMEER UND OSTSEE Versicherungs-AktiengesellschaftSOVAG</option>
+<option>Signal Iduna Allgemeine Versicherung AG</option>
+<option>SIGNAL Unfallversicherung a.G.</option>
+<option>SV Sparkassen-Versicherung Holding AG</option>
+<option>United Services Automobile Association Direktion für Deutschland</option>
+<option>UniVersa Allgemeine Versicherung AG</option>
+<option>Versicherungskammer Bayern Versicherungsanstalt des öffentlichen Rechts</option>
+<option>Verti Versicherung</option>
+<option>VGH Landschaftliche Brandkasse Hannover</option>
+<option>VHV Allgemeine Versicherung AG</option>
+<option>VHV Vereinigte Hannoversche Versicherung a.G.</option>
+<option>VOLKSWOHL-BUND Sachversicherung Aktiengesellschaft</option>
+<option>Westfälische Provinzial Versicherung Aktiengesellschaft</option>
+<option>WGV-Versicherung AG</option>
+<option>Württembergische Gemeinde-Versicherung a.G.</option>
+<option>Württembergische Versicherung AG</option>
+<option>WWK Allgemeine Versicherung AG</option>
+<option>Zurich Insurance plc</option>
+
+
+          </select>
+        </div>
+        <div class="col-sm-3">
+          <select id="Versicherung_Typ" name="Versicherung_Typ" class="form-select">
+            <option value="" selected>-</option>
+            <option>Haftpflicht</option>
+            <option>Teilkasko</option>
+            <option>Vollkasko</option>
+            <option>Ausländisch</option>
+            </select>
+            </div>  
+      </div>
+      <div class="row mb-3">
+        <label for="Selbstbeteiligung" class="col-sm-2 col-form-label">Selbstbeteiligung</label>
+        <div class="col-sm-2">
+          <select id="Selbstbeteiligung" name="Selbstbeteiligung" class="form-select">
+            <option value="" selected>-</option>
+            <option>Versicherung</option>
+            <option>Kunde</option>
+            <option>Autohaus</option>
+          </select>
+        </div>
+        <div class="col-sm-2">
+          <input type="text" class="form-control" id="Selbstbeteiligung_Betrag" placeholder="Betrag">
+        </div>
+      </div>
+      <div class="row mb-3">
+        <label for="MwSt" class="col-sm-2 col-form-label">MwSt</label>
+        <div class="col-sm-2">
+          <select id="MwSt" name="MwSt" class="form-select">
+            <option value="" selected>-</option>
+                        <option>Versicherung</option>
+            <option>Kunde</option>
+            <option>Autohaus</option>
+          </select>
+        </div>
+        <div class="col-sm-2">
+          <input type="text" class="form-control" id="MwSt_Betrag" placeholder="Betrag">
+        </div>
+        <div class="col-sm-2">
+          <span
+            onclick="document.getElementById('MwSt_Betrag').value='{{ forderung_kopf[0].MwSt_Betrag|number_format }}';">{{
+            forderung_kopf[0].MwSt_Betrag|number_format }}</span>
+        </div>
+      </div>
+      <div class="col-3">
+        <a class="btn btn-secondary" hx-disable="true"
+          href="/app/forderungen/export/{{forderung_kopf[0].Client_DB}}_{{forderung_kopf[0].Document_No}}">Mahnung
+          erstellen</a>
+      </div>
+
+    </div>
   </div>
+
   <div class="col-12">
-    <label for="inputAddress2" class="form-label">Address 2</label>
-    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+    <div class="form-check" data-coreui-toggle="collapse" data-coreui-target="#ReklamationCollapse"
+      aria-expanded="false" aria-controls="ReklamationCollapse">
+      <input class="form-check-input" type="checkbox" id="Reklamation">
+      <label class="form-check-label" for="Reklamation">
+        <strong>Reklamation</strong>
+      </label>
+    </div>
   </div>
-  <div class="col-md-6">
-    <label for="inputCity" class="form-label">City</label>
-    <input type="text" class="form-control" id="inputCity">
+
+  <div class="collapse" id="ReklamationCollapse">
+    <div class="card card-body">
+      <div class="row mb-3">
+        <label for="Reklamation_Begründung" class="col-sm-2 col-form-label">Begründung</label>
+        <div class="col-sm-3">
+          <input type="text" class="form-control" id="Reklamation_Begründung">
+        </div>
+      </div>
+    </div>
   </div>
-  <div class="col-md-4">
-    <label for="inputState" class="form-label">State</label>
-    <select id="inputState" class="form-select">
-      <option selected>Choose...</option>
-      <option>...</option>
-    </select>
+
+  <div class="col-12">
+    <div class="form-check" data-coreui-toggle="collapse" data-coreui-target="#RechtsanwaltCollapse"
+      aria-expanded="false" aria-controls="RechtsanwaltCollapse">
+      <input class="form-check-input" type="checkbox" id="Rechtsanwalt">
+      <label class="form-check-label" for="Rechtsanwalt">
+        <strong>Rechtsanwalt</strong>
+      </label>
+    </div>
   </div>
-  <div class="col-md-2">
-    <label for="inputZip" class="form-label">Zip</label>
-    <input type="text" class="form-control" id="inputZip">
+
+
+  
+  <div class="collapse" id="RechtsanwaltCollapse">
+    <div class="card card-body">
+      <div class="row mb-3">
+        <label for="Rechtsanwalt_Begründung" class="col-sm-2 col-form-label">Begründung</label>
+        <div class="col-sm-3">
+          <input type="text" class="form-control" id="Rechtsanwalt_Begründung">
+        </div>
+      </div>
+      <div class="row mb-3">
+        <label for="Rechtsanwalt_Aktenzeichen" class="col-sm-2 col-form-label">Aktenzeichen</label>
+        <div class="col-sm-3">
+          <input type="text" class="form-control" id="Rechtsanwalt_Aktenzeichen">
+        </div>
+      </div>
+      <div class="row mb-3">
+        <label for="Rechtsanwalt_Stand" class="col-sm-2 col-form-label">Aktueller Stand</label>
+        <div class="col-sm-3">
+          <input type="text" class="form-control" id="Rechtsanwalt_Stand">
+        </div>
+      </div>
+      <div class="col-3">
+        <a class="btn btn-secondary" hx-disable="true"
+          href="/app/forderungen/export/{{forderung_kopf[0].Client_DB}}_{{forderung_kopf[0].Document_No}}">Beitreibungsauftrag</a>
+      </div>
+    </div>
   </div>
+
+
   <div class="col-12">
-    <div class="form-check">
-      <input class="form-check-input" type="checkbox" id="gridCheck">
-      <label class="form-check-label" for="gridCheck">
-        Check me out
+    <div class="form-check" data-coreui-toggle="collapse" data-coreui-target="#MahnenCollapse"
+      aria-expanded="false" aria-controls="MahnenCollapse">
+      <input class="form-check-input" type="checkbox" id="Mahnen">
+      <label class="form-check-label" for="Mahnen">
+        <strong>Mahnlauf aussetzen</strong>
       </label>
     </div>
   </div>
+
+  <div class="collapse" id="MahnenCollapse">
+    <div class="card card-body">
+      <div class="row mb-3">
+        <label for="Mahnen_Begründung" class="col-sm-2 col-form-label">Begründung</label>
+        <div class="col-sm-3">
+          
+          <input type="text" class="form-control" id="Mahnen_Begründung">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-3">
+    <label for="Wiedervorlage" class="form-label">Wiedervorlage</label>
+    <input type="date" class="form-control" id="Wiedervorlage" name="Wiedervorlage" value="{{ forderung_kopf[0].Invoice_Date.strftime("%Y-%m-%d") }}">
+  </div>
+
   <div class="col-12">
-    <a class="btn btn-secondary" href="/app/forderungen/export/{{forderung_kopf[0].Client_DB}}_{{forderung_kopf[0].Document_No}}">Mahnung erstellen</a>
+    <a class="btn btn-primary" hx-disable="true"
+      href="#">Speichern
+    </a>
   </div>
-</form>
 
 
+</form>
 
+<br>
+<br>
 
+<div class="accordion accordion-flush" id="accordionFlushExample">
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+      <button class="accordion-button collapsed" type="button" data-coreui-toggle="collapse"
+        data-coreui-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+        <h3>Dateien</h3>
+      </button>
+    </h2>
+    <div id="flush-collapseOne" class="accordion-collapse collapse" data-coreui-parent="#accordionFlushExample">
+      <div class="accordion-body">
 
-<h3>Forderung Details</h3>
+        <table class="table table-striped table-bordered">
+          <thead>
+            <tr>
+              <th>Datum</th>
+              <th>Dateiname</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for row in files %}
+            <tr>
+              <td></td>
+              <td><a href="/files/?name={{ row }}" hx-disable="true">{{ row }}</a></td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
 
-<table class="table table-striped table-bordered">
-  <tbody>
-    {% for row in forderung_kopf %}
-    
-    {% for key, value in row._asdict().items() %}
-    <tr>
-      <th>{{ key }}</th>
-      <td>{{ value }}</td>
-    </tr>
-      {% endfor %}
-    {% endfor %}
-  </tbody>
-</table>
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+      <button class="accordion-button collapsed" type="button" data-coreui-toggle="collapse"
+        data-coreui-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
+        <h3>Forderung Details</h3>
+      </button>
+    </h2>
+    <div id="flush-collapseTwo" class="accordion-collapse collapse" data-coreui-parent="#accordionFlushExample">
+      <div class="accordion-body">
 
 
-<h3>Mahnungen</h3>
 
-<table class="table table-striped table-bordered">
-  <thead>
-    <tr>
-        <th>Kunde_Nr</th>
-        <th>Mahnung_Nr</th>
-        <th>Mahndatum</th>
-        <th>Mahnstufe</th>
-        <th>Rechnung_Nr</th>
-        <th>Rechnung_Datum</th>
-        <th>Betrag</th>
-        <th>Offen</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for row in forderung_mahnung %}
-    <tr>
-      <td>{{ row.Kunde_Nr }}</td>
-      <td>{{ row.Mahnung_Nr }}</td>
-      <td>{{ row.Mahndatum|date_format }}</td>
-      <td>{{ row.Rechnung_Nr }}</td>
-      <td>{{ row.Rechnung_Datum|date_format }}</td>
-      <td>{{ row.Betrag|number_format }}</td>
-      <td>{{ row.Offen|number_format }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+        <table class="table table-striped table-bordered">
+          <tbody>
+            {% for row in forderung_kopf %}
 
+            {% for key, value in row._asdict().items() %}
+            <tr>
+              <th>{{ key }}</th>
+              <td>{{ value }}</td>
+            </tr>
+            {% endfor %}
+            {% endfor %}
+          </tbody>
+        </table>
 
 
-<h3>Auftragspositionen</h3>
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+      <button class="accordion-button collapsed" type="button" data-coreui-toggle="collapse"
+        data-coreui-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
+        <h3>Mahnungen</h3>
+      </button>
+    </h2>
+    <div id="flush-collapseThree" class="accordion-collapse collapse" data-coreui-parent="#accordionFlushExample">
+      <div class="accordion-body">
 
-<table class="table table-striped table-bordered">
-  <thead>
-    <tr>
-        <th>Auftrag_Nr</th>
-        <th>Auftrag_Position</th>
-        <th>Betrag</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for row in auftrag_positionen %}
-    <tr>
-      <td>{{ row.Auftrag_Nr }}</td>
-      <td>{{ row.Auftrag_Position }}</td>
-      <td>{{ row.Betrag|number_format }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+        <table class="table table-striped table-bordered">
+          <thead>
+            <tr>
+              <th>Kunde_Nr</th>
+              <th>Mahnung_Nr</th>
+              <th>Mahndatum</th>
+              <th>Mahnstufe</th>
+              <th>Rechnung_Nr</th>
+              <th>Rechnung_Datum</th>
+              <th>Betrag</th>
+              <th>Offen</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for row in forderung_mahnung %}
+            <tr>
+              <td>{{ row.Kunde_Nr }}</td>
+              <td>{{ row.Mahnung_Nr }}</td>
+              <td>{{ row.Mahndatum|date_format }}</td>
+              <td>{{ row.Mahnstufe }}</td>
+              <td>{{ row.Rechnung_Nr }}</td>
+              <td>{{ row.Rechnung_Datum|date_format }}</td>
+              <td class="text-end">{{ row.Betrag|number_format }}</td>
+              <td class="text-end">{{ row.Offen|number_format }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
 
 
 
-<div class="card mb-3">
-  <div class="card-body">
-    <h5 class="card-title">Rechnung {{ forderung.rechnungsnummer }}</h5>
-    <p>Kunde: {{ forderung.kunde.name if forderung.kunde else '' }}</p>
-    <p>Betrag: {{ forderung.betrag }}</p>
-    <p>Fälligkeit: {{ forderung.faelligkeit }}</p>
-    <div class="mt-3">
-      <a class="btn btn-outline-secondary me-2" href="/detail/{{ forderung.id }}/export/docx">Export DOCX</a>
-      <a class="btn btn-outline-primary" href="mailto:?subject=Rechnung%20{{ forderung.rechnungsnummer }}&body=Sie%20finden%20Details%20unter%20{{ request.url }}">E-Mail (mailto)</a>
+
+      </div>
     </div>
   </div>
-</div>
 
-<div class="card">
-  <div class="card-body">
-    <h6>Neue Bemerkung</h6>
-    <form method="post" action="/detail/{{ forderung.id }}/bemerkung">
-      <div class="mb-2">
-        <textarea name="bemerkung" class="form-control" rows="3"></textarea>
+
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+      <button class="accordion-button collapsed" type="button" data-coreui-toggle="collapse"
+        data-coreui-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
+        <h3>Auftragspositionen</h3>
+      </button>
+    </h2>
+    <div id="flush-collapseFour" class="accordion-collapse collapse" data-coreui-parent="#accordionFlushExample">
+      <div class="accordion-body">
+
+        <table class="table table-bordered">
+          <thead>
+            <tr>
+              <th>Auftrag_Position</th>
+              <th>Betrag</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for row in auftrag_positionen %}
+            <tr>
+              <td>{{ row.Auftrag_Position }}</td>
+              <td class="text-end">{{ row.Betrag|number_format }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
       </div>
-      <div class="mb-2">
-        <label>Wiedervorlage</label>
-        <input type="date" name="wiedervorlage_datum" class="form-control" />
+    </div>
+  </div>
+
+
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+      <button class="accordion-button collapsed" type="button" data-coreui-toggle="collapse"
+        data-coreui-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
+        <h3>Buchungsbelege</h3>
+      </button>
+    </h2>
+    <div id="flush-collapseFive" class="accordion-collapse collapse" data-coreui-parent="#accordionFlushExample">
+      <div class="accordion-body">
+
+        <table class="table table-striped table-bordered">
+          <thead>
+            <tr>
+              <th>Fahrzeug</th>
+              <th>Rechnungsnr.</th>
+              <th>Rechnungsdatum</th>
+              <th>Beschreibung</th>
+              <th>Betrag</th>
+              <th>Offen</th>
+              <th>Benutzer</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for row in forderung_belege %}
+            <tr>
+              <td>{{ row.Fahrzeug_Nr }}</td>
+              <td>{{ row.Beleg_Nr }}</td>
+              <td>{{ row.Beleg_Datum|date_format }}</td>
+              <td>{{ row.Beleg_Beschreibung }}</td>
+              <td class="text-end">{{ row.Betrag|number_format }}</td>
+              <td>{{ row.Status }}</td>
+              <td>{{ row.Benutzer }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+
+
+
+
       </div>
-      <button class="btn btn-primary" type="submit">Speichern</button>
-      <a class="btn btn-secondary ms-2" href="/forderungen">Zurück</a>
-    </form>
+    </div>
   </div>
-</div>
 
-{% if forderung.bemerkungen %}
-<div class="mt-3">
-  <h5>Bemerkungen</h5>
-  <ul class="list-group">
-    {% for b in forderung.bemerkungen %}
-    <li class="list-group-item">{{ b.zeitstempel }} - {{ b.benutzer }}: {{ b.bemerkung }} {% if b.wiedervorlage_datum %} (WV: {{ b.wiedervorlage_datum }}){% endif %}</li>
-    {% endfor %}
-  </ul>
 </div>
-{% endif %}
-
 
 
-{% endblock %}
+{% endblock %}

templates/forderungen/liste_filter.html

@@ -6,143 +6,32 @@
       hx-swap="innerHTML" 
       hx-target="body">
 
+  {% for f in filter_config  %}
   
-    
-  <div class="col-md-2">
-    <label for="Hauptbetrieb" class="form-label">Hauptbetrieb</label>
-    <select id="Hauptbetrieb" name="Hauptbetrieb" class="form-select">
+  {% if f.filter_type != 'hidden' %}
+  <div class="col-md-{{ f.width }}">
+    <label for="{{ f.name }}" class="form-label">{{ f.text }}</label>
+    {% if f.filter_type == 'select' %}
+    <select id="{{ f.name }}" name="{{ f.name }}" class="form-select">
         <option value="">-</option>
-      {% for key, value in filter.Hauptbetrieb.items() %}
-        {% if key == defaults.Hauptbetrieb %}
-        <option value="{{ key }}" selected>{{ value }}</option>
-        {% else %}
-        <option value="{{ key }}">{{ value }}</option>
-        {% endif %}
-      {% endfor %}
-    </select>
-  </div>
-  <div class="col-md-3">
-    <label for="Standort" class="form-label">Standort</label>
-    <select id="Standort" name="Standort" class="form-select">
-        <option value="">-</option>
-      {% for key, value in filter.Standort.items() %}
-        {% if key == defaults.Standort %}
-        <option value="{{ key }}" selected>{{ value }}</option>
-        {% else %}
-        <option value="{{ key }}">{{ value }}</option>
-        {% endif %}
-      {% endfor %}
-    </select>
-  </div>
-  <div class="col-md-3">
-    <label for="Bereich" class="form-label">Bereich</label>
-    <select id="Bereich" name="Bereich" class="form-select">
-        <option value="">-</option>
-      {% for key, value in filter.Bereich.items() %}
-        {% if key == defaults.Bereich %}
-        <option value="{{ key }}" selected>{{ value }}</option>
-        {% else %}
-        <option value="{{ key }}">{{ value }}</option>
-        {% endif %}
-      {% endfor %}        
-    </select>
-  </div>
-  <div class="col-md-4">
-    <label for="Verursacher" class="form-label">Verursacher</label>
-    <select id="Verursacher" name="Verursacher" class="form-select">
-        <option value="">-</option>
-      {% for key, value in filter.Verursacher.items() %}
-        {% if key == defaults.Verursacher %}
+      {% for key, value in f.options.items() %}
+        {% if key == f.current_value %}
         <option value="{{ key }}" selected>{{ value }}</option>
         {% else %}
         <option value="{{ key }}">{{ value }}</option>
         {% endif %}
       {% endfor %}
     </select>
+    {% elif f.filter_type == 'date' %}
+    <input type="date" class="form-control" id="{{ f.name }}" name="{{ f.name }}">
+    {% else %}
+    <input type="text" class="form-control" id="{{ f.name }}" name="{{ f.name }}" value="{{ f.current_value }}">
+    {% endif %}
   </div>
+  {% endif %}
 
+  {% endfor %}
 
-  <div class="col-md-3">
-    <label for="Rechnungsnummer" class="form-label">Rechnungsnummer</label>
-    <input type="text" class="form-control" id="Rechnungsnummer" name="Rechnungsnummer" value="{{ defaults.Rechnungsnummer }}">
-  </div>
-  <div class="col-md-2">
-    <label for="RechnungsdatumVon" class="form-label">Rechnungsdatum von</label>
-    <input type="date" class="form-control" id="RechnungsdatumVon" name="RechnungsdatumVon">
-  </div>
-  <div class="col-md-2">
-    <label for="RechnungsdatumBis" class="form-label">Rechnungsdatum bis</label>
-    <input type="date" class="form-control" id="RechnungsdatumBis" name="RechnungsdatumBis">
-  </div>
-  <div class="col-md-5">
-    <label for="Kunde" class="form-label">Kunde</label>
-    <select id="Kunde" name="Kunde" class="form-select">
-        <option value="">-</option>
-      {% for key, value in filter.Kunde.items() %}
-        {% if key == defaults.Kunde %}
-        <option value="{{ key }}" selected>{{ value }}</option>
-        {% else %}
-        <option value="{{ key }}">{{ value }}</option>
-        {% endif %}
-      {% endfor %}
-    </select>
-  </div>
-
-
-  <div class="col-md-2">
-    <label for="WiedervorlageVon" class="form-label">Wiedervorlage von</label>
-    <input type="date" class="form-control" id="WiedervorlageVon" name="WiedervorlageVon">
-  </div>
-  <div class="col-md-2">
-    <label for="WiedervorlageBis" class="form-label">Wiedervorlage bis</label>
-    <input type="date" class="form-control" id="WiedervorlageBis" name="WiedervorlageBis">
-  </div>
+</form>
 
-  <div class="col-md-4">
-    <label for="Fahrzeug" class="form-label">Fahrzeug</label>
-    <select id="Fahrzeug" name="Fahrzeug" class="form-select">
-        <option value="">-</option>
-      {% for key, value in filter.Fahrzeug.items() %}
-        {% if key == defaults.Fahrzeug %}
-        <option value="{{ key }}" selected>{{ value }}</option>
-        {% else %}
-        <option value="{{ key }}">{{ value }}</option>
-        {% endif %}
-      {% endfor %}
-    </select>
-  </div>
-  <div class="col-md-2">
-    <label for="Staffel" class="form-label">Staffel</label>
-    <select id="Staffel" name="Staffel" class="form-select">
-        <option value="">-</option>
-      {% for key, value in filter.Staffel.items() %}
-        {% if key == defaults.Staffel %}
-        <option value="{{ key }}" selected>{{ value }}</option>
-        {% else %}
-        <option value="{{ key }}">{{ value }}</option>
-        {% endif %}
-      {% endfor %}
-    </select>
-  </div>
-  <div class="col-md-2">
-    <label for="Mahnstufe" class="form-label">Mahnstufe</label>
-    <select id="Mahnstufe" name="Mahnstufe" class="form-select">
-        <option value="">-</option>
-      {% for key, value in filter.Mahnstufe.items() %}
-        {% if key == defaults.Mahnstufe %}
-        <option value="{{ key }}" selected>{{ value }}</option>
-        {% else %}
-        <option value="{{ key }}">{{ value }}</option>
-        {% endif %}
-      {% endfor %}
-    </select>
-  </div>
-  <div class="col-12">
-    <div class="form-check">
-      <input class="form-check-input" type="checkbox" id="gridCheck">
-      <label class="form-check-label" for="gridCheck">
-        Guthaben anzeigen
-      </label>
-    </div>
-  </div>
-</form>
+<br>

templates/forderungen/queries/forderung_kopf.sql

@@ -1,4 +1,5 @@
 SELECT * 
+    , offen * 0.19 as MwSt_Betrag
 FROM dbo.Forderungen
 WHERE Client_DB = {{ appsmith.URL.queryParams.Client_DB }}
 AND Document_No = {{ appsmith.URL.queryParams.Document_No }}

templates/forderungen/queries/forderungen_liste.sql

@@ -42,7 +42,7 @@ AND T1.[Client_DB] LIKE '%' + {{ Hauptbetrieb.selectedOptionValue }}
 AND T1.[Standort_ID] LIKE '%' + {{ Standort.selectedOptionValue }}
 AND T1.[Bereich] LIKE '%' + {{ Bereich.selectedOptionValue }}
 AND T1.[Document_No] LIKE '%' + {{ Rechnungsnummer.text }} + '%'
-AND [Kunde] LIKE '%' + {{ Kunde.selectedOptionValue }}
+AND [Kunde] LIKE '%' + {{ Kunde.text }}
 AND [Verursacher] LIKE '%' + {{ Verursacher.selectedOptionValue }}
 AND [VIN] LIKE '%' + {{ Fahrzeug.selectedOptionValue }}
 AND [Staffel] LIKE '%' + {{ Staffel.selectedOptionValue }}