Slight changes to the Design

- Add class filter dropdown and class column to borrowings table
- Implement interactive client-side column sorting for tables
- Update backend route to resolve and map user class information

Web/modules/database/user.py

@@ -730,11 +730,11 @@ def get_user_by_student_ident(student_ident):
                         return user_doc 
                         
                 except Exception as e:
-                    app.logger.error(f"Entschlüsselungsfehler bei ID {user_doc.get('_id')}: {e}")
+                    logger.error(f"Entschlüsselungsfehler bei ID {user_doc.get('_id')}: {e}")
                     continue
                     
     except Exception as exc:
-        app.logger.error(f"Datenbankfehler in get_user_by_student_ident: {exc}")
+        logger.error(f"Datenbankfehler in get_user_by_student_ident: {exc}")
     finally:
         client.close()
 

Web/templates/base.html

@@ -1373,6 +1373,7 @@
                                 <li><h6 class="dropdown-header">Bibliotheks-Verwaltung</h6></li>
                                 {% if current_permissions.pages.get('library_loans_admin', False) %}
                                 <li><a class="dropdown-item" href="{{ url_for('library_loans_admin') }}">Alle Ausleihen/Alle Defekten Items</a></li>
+                                <li><a class="dropdown-item" href="{{ url_for('mahnungen_admin') }}">Mahnungen</a></li>
                                 {% endif %}
                                 {% if student_cards_module_enabled %}
                                 {% if current_permissions.actions.get('can_manage_users', False) %}

Web/templates/library_borrowings_admin.html

@@ -72,9 +72,10 @@
     color: #1f2937;
   }
 
+  /* Angepasst für 4 Filter-Felder statt 3 */
   .filter-bar {
     display: grid;
-    grid-template-columns: 1fr 220px 220px;
+    grid-template-columns: 1fr 140px 180px 180px;
     gap: 10px;
     margin-bottom: 16px;
   }
@@ -121,6 +122,7 @@
     letter-spacing: 0.04em;
     color: #64748b;
     background: var(--ui-surface-soft);
+    user-select: none; /* Verhindert Textmarkierung beim Klicken */
   }
 
   .library-table tr:hover td {
@@ -149,11 +151,13 @@
   .badge-open { background: #fee2e2; color: #991b1b; }
   .badge-paid { background: #dcfce7; color: #166534; }
   .badge-damaged { background: #fee2e2; color: #991b1b; }
+  .badge-class { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; } /* Neues Badge für Klasse */
 
   .row-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
+    align-items: center;
   }
 
   .row-actions form {
@@ -196,7 +200,7 @@
   <div class="library-admin-hero">
     <div>
       <h1>Bibliotheks-Ausleihen</h1>
-      <p>Nur Bibliotheksmedien. Hier kannst du offene Ausleihen abschließen, Rechnungen bezahlen und defekte Medien direkt zurücksetzen.</p>
+      <p>Nur Bibliotheksmedien. Hier kannst du offene Ausleihen abschließen, Rechnungen bezahlen und defekte Medien verwalten.</p>
     </div>
     <div class="hero-actions">
       <a class="btn btn-secondary" href="{{ url_for('library_view') }}">Bibliothek öffnen</a>
@@ -215,21 +219,36 @@
       <div class="value">{{ damaged_items|length }}</div>
     </div>
     <div class="summary-card">
-      <span class="label">Direkt reparierbar</span>
+      <span class="label">Direkt bearbeitbar</span>
       <div class="value">{{ damaged_items|length }}</div>
     </div>
   </div>
 
   <div class="filter-bar">
-    <input id="library-search" type="text" placeholder="Nach Element, Benutzer, Ausweis oder Rechnung suchen...">
+    <input id="library-search" type="text" placeholder="Nach Element, Benutzer, Klasse, Ausweis oder Rechnung suchen...">
+
+    <!-- NEU: Klassen-Filter -->
+    <select id="class-filter">
+      <option value="all">Alle Klassen</option>
+      {% set classes = [] %}
+      {% for e in loan_entries %}
+        {% if e.klasse and e.klasse not in classes %}
+          {% set _ = classes.append(e.klasse) %}
+        {% endif %}
+      {% endfor %}
+      {% for c in classes|sort %}
+        <option value="{{ c|lower }}">{{ c }}</option>
+      {% endfor %}
+    </select>
+
     <select id="loan-status-filter">
-      <option value="">Alle Ausleihen</option>
+      <option value="">Alle Status</option>
       <option value="active">Aktiv</option>
       <option value="planned">Geplant</option>
       <option value="completed">Abgeschlossen</option>
     </select>
     <select id="damage-filter">
-      <option value="all">Alle Einträge</option>
+      <option value="all">Alle Zustände</option>
       <option value="damage">Nur defekt</option>
       <option value="clean">Nur ohne Schaden</option>
     </select>
@@ -241,18 +260,31 @@
     <table class="library-table" id="loans-table">
       <thead>
         <tr>
-          <th>Status</th>
-          <th>Element</th>
-          <th>Benutzer</th>
-          <th>Zeit</th>
-          <th>Rechnung</th>
-          <th>Schaden</th>
+          <!-- NEU: onClick Handler zum Sortieren hinzugefügt -->
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 0)">Status ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 1)">Element ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 2)">Benutzer ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 3)">Klasse ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 4)">Zeit ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 5)">Rechnung ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 6)">Schaden ↕</th>
           <th>Aktionen</th>
         </tr>
       </thead>
       <tbody>
+        <!-- NEU: data-klasse hinzugefügt -->
         {% for e in loan_entries %}
-        <tr class="loan-row" data-borrow-id="{{ e.id }}" data-item-id="{{ e.item_id }}" data-item-name="{{ e.item_name }}" data-item-code="{{ e.item_code }}" data-item-cost="{{ e.item_cost_raw }}" data-user-name="{{ e.user }}" data-search="{{ (e.item_name ~ ' ' ~ e.item_code ~ ' ' ~ e.user ~ ' ' ~ e.invoice_number ~ ' ' ~ e.item_author ~ ' ' ~ e.item_isbn)|lower }}" data-status="{{ e.status }}" data-has-damage="{{ '1' if e.has_damage else '0' }}">
+        <tr class="loan-row"
+            data-borrow-id="{{ e.id }}"
+            data-item-id="{{ e.item_id }}"
+            data-item-name="{{ e.item_name }}"
+            data-item-code="{{ e.item_code }}"
+            data-item-cost="{{ e.item_cost_raw }}"
+            data-user-name="{{ e.user }}"
+            data-klasse="{{ (e.klasse|default(''))|lower }}"
+            data-search="{{ (e.item_name ~ ' ' ~ e.item_code ~ ' ' ~ e.user ~ ' ' ~ (e.klasse|default('')) ~ ' ' ~ e.invoice_number ~ ' ' ~ e.item_author ~ ' ' ~ e.item_isbn)|lower }}"
+            data-status="{{ e.status }}"
+            data-has-damage="{{ '1' if e.has_damage else '0' }}">
           <td>
             {% if e.status == 'active' %}
               <span class="badge-pill badge-active">Aktiv</span>
@@ -267,24 +299,32 @@
             <div class="muted">{{ e.item_author or '—' }}</div>
             <div class="mono">{{ e.item_code or '—' }}</div>
             <div style="margin-top:6px;">
-              <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_item_invoices', item_id=e.item_id) }}">Rechnungen</a>
+              <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_item_invoices', item_id=e.item_id) }}">Rechnungen / Historie</a>
             </div>
           </td>
           <td>
-            <div>{{ e.user }}</div>
-            <div class="muted">{{ e.start }}{% if e.end %} bis {{ e.end }}{% endif %}</div>
+            <div><strong>{{ e.user }}</strong></div>
+          </td>
+          <!-- NEU: Klasse Spalte -->
+          <td>
+            {% if e.klasse %}
+              <span class="badge-pill badge-class">{{ e.klasse }}</span>
+            {% else %}
+              <span class="muted">—</span>
+            {% endif %}
           </td>
           <td>
             <div>{{ e.period or '—' }}</div>
+            <div class="muted">{{ e.start }}{% if e.end %} bis {{ e.end }}{% endif %}</div>
             {% if e.notes %}<div class="muted">{{ e.notes }}</div>{% endif %}
           </td>
           <td>
             {% if e.invoice_number %}
               <div class="mono">{{ e.invoice_number }}</div>
               <div class="muted">{{ e.invoice_amount }}</div>
-              {% if e.invoice_corrections_count %}
+              <!--{% if e.invoice_corrections_count %}
                 <div class="muted" style="color:#7c2d12;">{{ e.invoice_corrections_count }} Korrektur(en)</div>
-              {% endif %}
+              {% endif %} -->
               <div style="margin-top:6px;">
                 <a class="btn btn-outline-primary btn-sm" href="{{ url_for('admin_view_invoice_pdf', borrow_id=e.id) }}" target="_blank" rel="noopener">PDF öffnen</a>
               </div>
@@ -311,35 +351,29 @@
               {% if e.status == 'active' %}
               <button type="button" class="btn btn-outline-danger btn-sm" onclick="openDamageReportPrompt(this)">Schaden melden</button>
               {% endif %}
-              {% if e.invoice_number and ((not e.invoice_paid) or e.has_damage) %}
-              <form method="post" action="{{ url_for('admin_finalize_invoice_and_repair', borrow_id=e.id) }}" onsubmit="return confirm('Rechnung als bezahlt und Element als repariert markieren?');">
-                <button type="submit" class="btn btn-success btn-sm">
-                  {% if not e.invoice_paid and e.has_damage %}
-                    Bezahlt + repariert
-                  {% elif not e.invoice_paid %}
-                    Als bezahlt markieren
-                  {% else %}
-                    Als repariert markieren
-                  {% endif %}
-                </button>
-              </form>
-              {% elif e.has_damage %}
-              <form method="post" action="{{ url_for('mark_damage_repaired', id=e.item_id) }}" onsubmit="return confirm('Medium als repariert markieren?');">
-                <button type="submit" class="btn btn-success btn-sm">Als repariert markieren</button>
+
+              {% if e.invoice_number and not e.invoice_paid %}
+              <form method="post" action="{{ url_for('admin_mark_invoice_paid', borrow_id=e.id) }}" onsubmit="return confirm('Rechnung als bezahlt markieren?');">
+                <button type="submit" class="btn btn-success btn-sm">Als bezahlt markieren</button>
               </form>
               {% endif %}
 
-              {% if e.invoice_number %}
-              <form method="post" action="{{ url_for('admin_add_invoice_correction', borrow_id=e.id) }}" onsubmit="return confirm('Korrekturbuchung hinzufügen?');">
-                <input type="text" name="correction_reason" placeholder="Korrekturgrund" required style="padding:6px; border:1px solid #ddd; border-radius:6px; min-width:140px;">
-                <input type="text" name="amount_delta" placeholder="Delta optional" style="padding:6px; border:1px solid #ddd; border-radius:6px; width:120px;">
+              {% if e.has_damage %}
+              <!-- Aufruf des Reparatur-Auswahl-Modals -->
+              <button type="button" class="btn btn-warning btn-sm" onclick="openRepairModal('{{ e.item_id }}', '{{ e.item_code }}')">Reparieren / Ersetzen</button>
+              {% endif %}
+
+              <!--{% if e.invoice_number %}
+              <form method="post" action="{{ url_for('admin_add_invoice_correction', borrow_id=e.id) }}" onsubmit="return confirm('Korrekturbuchung hinzufügen?');" style="display: flex; gap: 6px; align-items: center; flex-wrap: wrap;">
+                <input type="text" name="correction_reason" value="Korrektur zu {{ e.invoice_number }}" placeholder="Korrekturgrund" required style="padding:6px; border:1px solid #ddd; border-radius:6px; min-width:160px; max-width:180px;">
+                <input type="text" name="amount_delta" placeholder="z.B. -{{ e.invoice_amount }}" style="padding:6px; border:1px solid #ddd; border-radius:6px; width:120px;">
                 <button type="submit" class="btn btn-outline-danger btn-sm">Korrektur</button>
               </form>
-              {% endif %}
+              {% endif %}-->
 
               {% if e.status in ['active', 'planned'] %}
               <form method="post" action="{{ url_for('admin_reset_borrowing', borrow_id=e.id) }}" onsubmit="return confirm('Ausleihe zurücksetzen?');">
-                <button type="submit" class="btn btn-warning btn-sm">Zurücksetzen</button>
+                <button type="submit" class="btn btn-secondary btn-sm">Zurücksetzen</button>
               </form>
               {% endif %}
             </div>
@@ -360,10 +394,11 @@
     <table class="library-table" id="damaged-table">
       <thead>
         <tr>
-          <th>Element</th>
-          <th>Code</th>
-          <th>Schaden</th>
-          <th>Status</th>
+          <!-- NEU: onClick Handler zum Sortieren hinzugefügt -->
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 0)">Element ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 1)">Code ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 2)">Schaden ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 3)">Status ↕</th>
           <th>Aktion</th>
         </tr>
       </thead>
@@ -392,9 +427,8 @@
             <div class="row-actions" style="margin-bottom:8px;">
               <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_item_invoices', item_id=item.id) }}">Rechnungen</a>
             </div>
-            <form method="post" action="{{ url_for('mark_damage_repaired', id=item.id) }}" onsubmit="return confirm('Dieses Medium als repariert und wieder verfügbar markieren?');">
-              <button type="submit" class="btn btn-success btn-sm">Als repariert markieren</button>
-            </form>
+            <!-- Aufruf des Reparatur-Auswahl-Modals -->
+            <button type="button" class="btn btn-warning btn-sm" onclick="openRepairModal('{{ item.id }}', '{{ item.code }}')">Reparieren / Ersetzen</button>
           </td>
         </tr>
         {% endfor %}
@@ -407,6 +441,7 @@
   </div>
 </div>
 
+<!-- Modal: Rechnung für Schaden erstellen -->
 <div id="damage-invoice-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.72); z-index:9999; padding:20px; overflow:auto;">
   <div style="max-width:760px; margin:40px auto; background: var(--ui-surface); border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
     <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px;">
@@ -464,15 +499,44 @@
   </div>
 </div>
 
+<!-- Neues Modal: Reparatur-Optionen (Reparieren, Ersetzen mit neuem Code_4, Löschen) -->
+<div id="repair-action-modal" role="dialog" aria-modal="true" aria-labelledby="repair-modal-title" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.72); z-index:9999; padding:20px; overflow:auto;">
+  <div style="max-width:540px; margin:60px auto; background: var(--ui-surface); border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
+    <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px;">
+      <h2 id="repair-modal-title" style="margin:0; font-size: 1.3rem;">Medium-Bearbeitung nach Reparatur</h2>
+      <button type="button" class="btn btn-secondary btn-sm" onclick="closeRepairModal()">Schließen</button>
+    </div>
+    <p style="color: #666; margin-bottom: 18px; font-size: 0.95rem;">Wähle aus, wie mit diesem beschädigten Medium weiter verfahren werden soll:</p>
+
+    <form id="repair-action-form" method="post" action="">
+      <input type="hidden" name="action" id="repair-action-input" value="repair">
+
+      <div style="margin-bottom: 16px; display: none;" id="new-code-container">
+        <label for="modal-new-code-4" style="display:block; font-weight:700; margin-bottom:6px;">Neuer Code 4 (Inventarnummer / Barcode)</label>
+        <input type="text" id="modal-new-code-4" name="new_code_4" placeholder="Neuen Code 4 eingeben..." style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;">
+      </div>
+
+      <div style="display: flex; flex-direction: column; gap: 10px;">
+        <button type="button" class="btn btn-success" onclick="submitRepairAction('repair')">Nur Reparieren (Wieder verfügbar machen)</button>
+        <button type="button" class="btn btn-primary" onclick="toggleReplaceMode()">Ersetzen (Neuen Code 4 zuweisen)</button>
+        <button type="submit" id="submit-replace-btn" class="btn btn-primary" style="display:none;" onclick="document.getElementById('repair-action-input').value='replace'; return confirm('Medium wirklich mit neuem Code aktualisieren?');">Änderung speichern</button>
+        <button type="submit" class="btn btn-danger" onclick="document.getElementById('repair-action-input').value='delete'; return confirm('Achtung: Soll dieses Medium wirklich gelöscht und der Bestand aktualisiert werden?');">Löschen & Bestand anpassen</button>
+      </div>
+    </form>
+  </div>
+</div>
+
 <script>
 (function() {
   const searchInput = document.getElementById('library-search');
+  const classFilter = document.getElementById('class-filter'); // NEU: Klassenfilter hinzugefügt
   const statusFilter = document.getElementById('loan-status-filter');
   const damageFilter = document.getElementById('damage-filter');
   const loanRows = Array.from(document.querySelectorAll('.loan-row'));
   const damagedRows = Array.from(document.querySelectorAll('.damaged-row'));
   const loansEmpty = document.getElementById('loans-empty');
   const damagedEmpty = document.getElementById('damaged-empty');
+
   const damageInvoiceModal = document.getElementById('damage-invoice-modal');
   const damageInvoiceForm = document.getElementById('damage-invoice-form');
   const damageInvoiceItem = document.getElementById('damage-invoice-item');
@@ -482,23 +546,100 @@
   const damageInvoiceReason = document.getElementById('damage-invoice-reason');
   const damageInvoiceReplaceBtn = document.getElementById('damage-invoice-replace-btn');
 
+  // NEU: Globale Sortier-Richtungsobjekte
+  let sortDirections = {};
+
+  // NEU: Sortier-Funktion
+  window.sortTable = function(tableId, columnIndex) {
+    const table = document.getElementById(tableId);
+    const tbody = table.tBodies[0];
+    const rows = Array.from(tbody.querySelectorAll("tr"));
+
+    if (rows.length === 0) return;
+
+    const sortKey = tableId + "-" + columnIndex;
+    if (!(sortKey in sortDirections)) {
+      sortDirections[sortKey] = true;
+    } else {
+      sortDirections[sortKey] = !sortDirections[sortKey];
+    }
+
+    const isAscending = sortDirections[sortKey];
+    const multiplier = isAscending ? 1 : -1;
+
+    // Pfeil im Header aktualisieren
+    const headers = table.querySelectorAll("th");
+    headers.forEach(th => {
+      if(th.innerHTML.includes('↕') || th.innerHTML.includes('▲') || th.innerHTML.includes('▼')) {
+        th.innerHTML = th.innerHTML.replace(/[↕▲▼]/g, '↕');
+      }
+    });
+    const currentTh = headers[columnIndex];
+    if (currentTh) {
+      currentTh.innerHTML = currentTh.innerHTML.replace('↕', isAscending ? '▲' : '▼');
+    }
+
+    // Zeilen sortieren
+    rows.sort((a, b) => {
+      const cellA = a.cells[columnIndex].textContent.trim();
+      const cellB = b.cells[columnIndex].textContent.trim();
+      return cellA.localeCompare(cellB, 'de', { numeric: true, sensitivity: 'base' }) * multiplier;
+    });
+
+    // Neu einfügen
+    rows.forEach(row => tbody.appendChild(row));
+  };
+
+
+  // Funktionen für das Reparatur-Modal
+  window.openRepairModal = function(itemId, currentCode) {
+    const modal = document.getElementById('repair-action-modal');
+    const form = document.getElementById('repair-action-form');
+    const codeContainer = document.getElementById('new-code-container');
+    const replaceBtn = document.getElementById('submit-replace-btn');
+
+    form.action = `/admin/items/${itemId}/resolve_repair`;
+
+    document.getElementById('repair-action-input').value = 'repair';
+    document.getElementById('modal-new-code-4').value = currentCode || '';
+    codeContainer.style.display = 'none';
+    replaceBtn.style.display = 'none';
+
+    modal.style.display = 'block';
+  };
+
+  window.closeRepairModal = function() {
+    document.getElementById('repair-action-modal').style.display = 'none';
+  };
+
+  window.toggleReplaceMode = function() {
+    const codeContainer = document.getElementById('new-code-container');
+    const replaceBtn = document.getElementById('submit-replace-btn');
+    document.getElementById('repair-action-input').value = 'replace';
+
+    codeContainer.style.display = 'block';
+    replaceBtn.style.display = 'block';
+    document.getElementById('modal-new-code-4').focus();
+  };
+
+  window.submitRepairAction = function(actionType) {
+    const form = document.getElementById('repair-action-form');
+    document.getElementById('repair-action-input').value = actionType;
+    if (confirm('Medium als regulär repariert markieren?')) {
+      form.submit();
+    }
+  };
+
   function openDamageReportPrompt(button) {
     const row = button.closest('.loan-row');
-    if (!row) {
-      return;
-    }
+    if (!row) return;
 
     const itemId = row.dataset.itemId || '';
-    const itemName = row.dataset.itemName || 'Bibliotheksmedium';
     const noteInput = prompt('Schadensmeldung für dieses Bibliotheksmedium:\nNotiz zum Schaden (optional):', '');
 
-    if (noteInput === null) {
-      return;
-    }
+    if (noteInput === null) return;
 
     const description = noteInput.trim() || 'Schaden erneut gemeldet';
-
-    // Visuelles Feedback: Button deaktivieren und Text ändern
     const originalText = button.textContent;
     button.disabled = true;
     button.textContent = 'Speichere...';
@@ -509,7 +650,6 @@
       body: JSON.stringify({ description })
     })
       .then(async response => {
-        // Robustes JSON-Parsing (verhindert Absturz, falls der Server kein JSON zurückgibt)
         const data = await response.json().catch(() => ({}));
         if (!response.ok || !data.success) {
           throw new Error(data.message || 'Fehler beim Speichern der Schadensmeldung.');
@@ -519,18 +659,14 @@
       .then(data => {
         if (confirm('Schaden gespeichert. Soll direkt eine Rechnung erstellt werden?')) {
           openDamageInvoiceModal(row, description);
-          // Button wieder zurücksetzen, da die Seite nicht neu geladen wird
           button.disabled = false;
           button.textContent = originalText;
           return;
         }
-
-        // Bei "Abbrechen" im Confirm -> Neuladen der Tabelle
         window.location.reload();
       })
       .catch(error => {
         alert(error.message || 'Ein unbekannter Fehler ist aufgetreten.');
-        // Fehlerbehandlung: Button wieder aktiv schalten
         button.disabled = false;
         button.textContent = originalText;
       });
@@ -539,17 +675,12 @@
   window.openDamageReportPrompt = openDamageReportPrompt;
 
   function openDamageInvoiceModal(row, description) {
-    if (!damageInvoiceModal || !damageInvoiceForm) {
-      console.error("Modal oder Formular nicht gefunden.");
-      return;
-    }
+    if (!damageInvoiceModal || !damageInvoiceForm) return;
 
     const borrowId = row.dataset.borrowId || '';
     const itemName = row.dataset.itemName || '';
     const borrower = row.dataset.userName || '';
     const itemCode = row.dataset.itemCode || '';
-
-    // KORREKTUR: Jetzt greifen wir auf das richtige dataset-Attribut zu
     const itemCost = row.dataset.itemCost || '';
 
     damageInvoiceForm.action = "{{ url_for('admin_create_invoice', borrow_id='__BORROW_ID__') }}".replace('__BORROW_ID__', borrowId);
@@ -557,20 +688,14 @@
     damageInvoiceItem.value = itemName;
     damageInvoiceBorrower.value = borrower;
     damageInvoiceCode.value = itemCode;
-
-    // Feld zunächst leeren, damit der Ersetzen-Button genutzt werden kann
     damageInvoiceAmount.value = '';
 
-    // Original-Preis im Button als data-Attribut hinterlegen
     if (damageInvoiceReplaceBtn) {
       damageInvoiceReplaceBtn.dataset.acquisition_costs = String(itemCost).replace(' EUR', '').trim();
     }
 
     damageInvoiceReason.value = description || `Schaden gemeldet für ${itemName}`;
-
     damageInvoiceModal.style.display = 'block';
-
-    // Accessibility: Fokus ins erste aktivierbare Feld setzen
     damageInvoiceAmount.focus();
   }
 
@@ -580,7 +705,6 @@
     }
   }
 
-  // Event-Listener für den Ersetzen-Button
   if (damageInvoiceReplaceBtn) {
     damageInvoiceReplaceBtn.addEventListener('click', function() {
       if (this.dataset.acquisition_costs) {
@@ -600,20 +724,26 @@
     });
   }
 
+  // NEU: Kombinierte Filter-Funktion (Suche + Status + Schaden + Klasse)
   function applyFilters() {
     const search = (searchInput.value || '').trim().toLowerCase();
     const status = statusFilter.value;
     const damage = damageFilter.value;
+    const klasse = classFilter.value; // NEU
 
     let visibleLoans = 0;
     loanRows.forEach(row => {
       const haystack = row.dataset.search || '';
       const rowStatus = row.dataset.status || '';
+      const rowKlasse = row.dataset.klasse || ''; // NEU
       const hasDamage = row.dataset.hasDamage === '1';
+
       const searchMatch = !search || haystack.includes(search);
       const statusMatch = !status || rowStatus === status;
+      const classMatch = klasse === 'all' || rowKlasse === klasse; // NEU
       const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
-      const show = searchMatch && statusMatch && damageMatch;
+
+      const show = searchMatch && statusMatch && classMatch && damageMatch; // NEU
       row.style.display = show ? '' : 'none';
       if (show) visibleLoans++;
     });
@@ -624,10 +754,17 @@
       const haystack = row.dataset.search || '';
       const rowStatus = row.dataset.status || '';
       const hasDamage = row.dataset.hasDamage === '1';
+
       const searchMatch = !search || haystack.includes(search);
       const statusMatch = !status || rowStatus === status || status === '';
       const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
-      const show = searchMatch && statusMatch && damageMatch;
+
+      // Defekte-Medien-Tabelle hat keine verknüpfte "Klasse", deshalb blenden wir sie nur bei Klassen-Filter "all" ein,
+      // oder wenn gar nicht nach Klasse gefiltert wird, damit sie nicht verschwindet.
+      // Falls sie bei aktiver Klassensuche komplett verschwinden soll, passe die Bedingung an:
+      const classMatch = klasse === 'all';
+
+      const show = searchMatch && statusMatch && damageMatch && classMatch;
       row.style.display = show ? '' : 'none';
       if (show) visibleDamaged++;
     });
@@ -635,6 +772,7 @@
   }
 
   searchInput.addEventListener('input', applyFilters);
+  classFilter.addEventListener('change', applyFilters); // NEU
   statusFilter.addEventListener('change', applyFilters);
   damageFilter.addEventListener('change', applyFilters);
   applyFilters();

Web/templates/library_item_invoices.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Rechnungen Element - {{ APP_VERSION }}{% endblock %}
+{% block title %}Rechnungs- & Schadenshistorie - {{ APP_VERSION }}{% endblock %}
 
 {% block content %}
 <style>
@@ -39,6 +39,14 @@
     flex-wrap: wrap;
   }
 
+  .section-header {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin: 36px 0 16px 0;
+    padding-left: 4px;
+  }
+
   .invoice-card {
     background: var(--ui-surface);
     border: 1px solid #e2e8f0;
@@ -115,7 +123,7 @@
 
 <div class="invoice-history-shell">
   <div class="invoice-history-head">
-    <h1>Rechnungshistorie pro Element</h1>
+    <h1>Rechnungs- & Schadenshistorie pro Element</h1>
     <div class="head-meta">
       <span><strong>Element:</strong> {{ item.name or '—' }}</span>
       <span><strong>Code:</strong> {{ item.code or '—' }}</span>
@@ -124,10 +132,12 @@
     </div>
     <div class="head-actions">
       <a class="btn btn-outline-secondary" href="{{ url_for('library_loans_admin') }}">Zur Bibliotheks-Ausleihenverwaltung</a>
-      <a class="btn btn-secondary" href="{{ url_for('library_admin') }}">Bibliothek öffnen</a>
+      <a class="btn btn-secondary" href="{{ url_for('library_view') }}">Bibliothek öffnen</a>
     </div>
   </div>
 
+  <!-- BEREICH: RECHNUNGEN -->
+  <h2 class="section-header">Ausgestellte Rechnungen</h2>
   <div class="invoice-card">
     {% if invoices %}
     <table class="invoice-table">
@@ -137,7 +147,7 @@
           <th>Betrag</th>
           <th>Ausleihe</th>
           <th>Status</th>
-          <th>Schaden</th>
+          <th>Schaden / Grund</th>
           <th>Aktion</th>
         </tr>
       </thead>
@@ -184,5 +194,50 @@
       <div class="empty-state">Für dieses Element wurden noch keine Rechnungen gespeichert.</div>
     {% endif %}
   </div>
+
+  <!-- BEREICH: SCHÄDEN -->
+  <h2 class="section-header">Gemeldete Schäden</h2>
+  <div class="invoice-card">
+    {% if damages %}
+    <table class="invoice-table">
+      <thead>
+        <tr>
+          <th>Datum</th>
+          <th>Quelle</th>
+          <th>Nutzer / Verursacher</th>
+          <th>Beschreibung</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in damages %}
+        <tr>
+          <td>
+            <div class="muted">{{ row.date }}</div>
+          </td>
+          <td>
+            <div class="mono">{{ row.source }}</div>
+            {% if row.borrow_id %}
+              <div class="muted" style="font-size: 0.8rem;">ID: <span title="{{ row.borrow_id }}">{{ row.borrow_id[:6] }}...</span></div>
+            {% endif %}
+          </td>
+          <td>{{ row.user }}</td>
+          <td>{{ row.description }}</td>
+          <td>
+            <!-- Einfache Logik, um bei reparierten Objekten einen grünen Badge zu zeigen -->
+            {% if row.status|lower in ['repariert', 'erledigt', 'geschlossen', 'bezahlt'] %}
+              <span class="badge-pill badge-completed">{{ row.status }}</span>
+            {% else %}
+              <span class="badge-pill badge-open">{{ row.status }}</span>
+            {% endif %}
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    {% else %}
+      <div class="empty-state">Für dieses Element wurden bislang keine Schäden erfasst.</div>
+    {% endif %}
+  </div>
 </div>
-{% endblock %}
+{% endblock %}

Web/templates/mahnungen_admin.html

@@ -0,0 +1,225 @@
+{% extends "base.html" %}
+
+{% block title %}Mahnungsübersicht{% endblock %}
+
+{% block content %}
+<style>
+  .mahnungen-shell {
+    max-width: 1180px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .mahnungen-head {
+    background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
+    border: 1px solid #dbe4ee;
+    border-radius: 16px;
+    padding: 18px 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+
+  .mahnungen-head h1 {
+    margin: 0;
+    font-size: 1.55rem;
+    color: #1e293b;
+  }
+
+  .head-actions {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .search-box-wrapper {
+    margin-bottom: 16px;
+  }
+
+  .search-box {
+    width: 100%;
+    max-width: 360px;
+    padding: 10px 14px;
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  .search-box:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  }
+
+  .mahnungen-card {
+    background: var(--ui-surface, #ffffff);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    padding: 18px;
+    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
+  }
+
+  .mahnungen-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .mahnungen-table th,
+  .mahnungen-table td {
+    padding: 12px 10px;
+    border-bottom: 1px solid #edf2f7;
+    vertical-align: middle;
+    text-align: left;
+  }
+
+  .mahnungen-table th {
+    font-size: 0.83rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #64748b;
+    background: var(--ui-surface-soft, #f8fafc);
+  }
+
+  .mahnungen-table tr:hover td {
+    background: #fbfdff;
+  }
+
+  .badge-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .badge-open { background: #fee2e2; color: #991b1b; }
+  .badge-warning { background: #fef3c7; color: #b45309; }
+  .badge-info { background: #e0f2fe; color: #0369a1; }
+  .badge-paid { background: #dcfce7; color: #166534; }
+
+  .mono {
+    font-family: monospace;
+    font-size: 0.92rem;
+  }
+
+  .text-danger {
+    color: #dc2626;
+    font-weight: 700;
+  }
+
+  .empty-state {
+    text-align: center;
+    color: #6b7280;
+    padding: 36px 20px;
+  }
+
+  @media (max-width: 900px) {
+    .mahnungen-table {
+      display: block;
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+  }
+</style>
+
+<div class="mahnungen-shell">
+  <div class="mahnungen-head">
+    <h1>Mahnungsübersicht</h1>
+    <div class="head-actions">
+      <a class="btn btn-outline-secondary" href="{{ url_for('library_loans_admin') }}">Zur Ausleihenverwaltung</a>
+      <a class="btn btn-secondary" href="{{ url_for('library_view') }}">Bibliothek öffnen</a>
+    </div>
+  </div>
+
+  <div class="mahnungen-card">
+    {% if overdue_list %}
+      <div class="search-box-wrapper">
+        <input type="text" id="searchInput" class="search-box" placeholder="🔍 Suche nach Nutzer, Klasse oder Gegenstand..." onkeyup="filterTable()">
+      </div>
+
+      <table class="mahnungen-table" id="mahnungTable">
+        <thead>
+          <tr>
+            <th>Nutzer</th>
+            <th>Klasse</th>
+            <th>Gegenstand</th>
+            <th>Fällig am</th>
+            <th>Tage drüber</th>
+            <th>Mahnstufe</th>
+            <th>Konto-Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for item in overdue_list %}
+          <tr>
+            <td><strong>{{ item.user or '—' }}</strong></td>
+            <td>{{ item.klasse or '—' }}</td>
+            <td>{{ item.item_name or '—' }}</td>
+            <td><span class="mono">{{ item.due_date or '—' }}</span></td>
+            <td class="text-danger">{{ item.days_overdue }} Tage</td>
+            <td>
+              {% if item.mahnstufe == 2 %}
+                <span class="badge-pill badge-open">Stufe 2 (Gesperrt)</span>
+              {% elif item.mahnstufe == 1 %}
+                <span class="badge-pill badge-warning">Stufe 1 (Gewarnt)</span>
+              {% else %}
+                <span class="badge-pill badge-info">Stufe 0 (Neu)</span>
+              {% endif %}
+            </td>
+            <td>
+              {% if item.is_blocked %}
+                <span class="badge-pill badge-open">Gesperrt</span>
+              {% else %}
+                <span class="badge-pill badge-paid">Aktiv</span>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    {% else %}
+      <div class="empty-state">
+        <strong>Hervorragend!</strong> Aktuell gibt es keine überfälligen Ausleihen im System.
+      </div>
+    {% endif %}
+  </div>
+</div>
+
+<script>
+  function filterTable() {
+    const input = document.getElementById("searchInput");
+    const filter = input.value.toLowerCase();
+    const table = document.getElementById("mahnungTable");
+    const tr = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
+
+    for (let i = 0; i < tr.length; i++) {
+      const tdUser = tr[i].getElementsByTagName("td")[0];
+      const tdClass = tr[i].getElementsByTagName("td")[1];
+      const tdItem = tr[i].getElementsByTagName("td")[2];
+
+      if (tdUser || tdClass || tdItem) {
+        const textUser = tdUser.textContent || tdUser.innerText;
+        const textClass = tdClass.textContent || tdClass.innerText;
+        const textItem = tdItem.textContent || tdItem.innerText;
+
+        if (
+          textUser.toLowerCase().indexOf(filter) > -1 ||
+          textClass.toLowerCase().indexOf(filter) > -1 ||
+          textItem.toLowerCase().indexOf(filter) > -1
+        ) {
+          tr[i].style.display = "";
+        } else {
+          tr[i].style.display = "none";
+        }
+      }
+    }
+  }
+</script>
+{% endblock %}

Web/templates/upload_admin.html

@@ -1531,22 +1531,22 @@
         }
         const isbnField = document.getElementById('isbn');
         const infoContainer = document.getElementById('book-info-container');
-        
+
         if (!isbnField || !infoContainer) {
             alert('Fehler: Erforderliche Formularelemente nicht gefunden.');
             return;
         }
-        
+
         const isbn = normalizeIsbnClient(isbnField.value);
-        
+
         if (!isbn) {
             infoContainer.innerHTML = '<div class="error-message">Bitte geben Sie eine ISBN oder einen Barcode ein.</div>';
             return;
         }
-        
+
         // Show loading indicator
         infoContainer.innerHTML = '<div class="loading-spinner">Informationen werden abgerufen...</div>';
-        
+
         // Make API request to fetch book data
         fetch(`/fetch_book_info/${isbn}`)
             .then(response => {
@@ -1564,10 +1564,10 @@
                     infoContainer.innerHTML = `<div class="error-message">${data.error}</div>`;
                     return;
                 }
-                
+
                 // Store book data globally for import functionality
                 currentBookData = data;
-                
+
                 // Display book information with import button
                 infoContainer.innerHTML = `
                     <div class="book-info">
@@ -1602,23 +1602,23 @@
             alert('Keine Buchdaten verfügbar zum Import.');
             return;
         }
-        
+
         // Get form fields
         const nameField = document.getElementById('name');
         const descriptionField = document.getElementById('beschreibung');
         const priceField = document.getElementById('anschaffungskosten'); // <-- NEU
-        
+
         if (!nameField || !descriptionField) {
             alert('Fehler: Formularfelder nicht gefunden.');
             return;
         }
-        
+
         // Generate book title
         let bookTitle = currentBookData.title || '';
         if (currentBookData.authors && currentBookData.authors !== 'Unknown Author') {
             bookTitle += ` - ${currentBookData.authors}`;
         }
-        
+
         // Generate description
         let description = '';
         if (currentBookData.description && currentBookData.description !== 'No description available') {
@@ -1639,11 +1639,11 @@
                 description += `\nSeiten: ${currentBookData.pageCount}`;
             }
         }
-        
+
         // Import the data into form fields
         nameField.value = bookTitle;
         descriptionField.value = description;
-        
+
         // Preis in das Formularfeld eintragen
         if (priceField && currentBookData.price !== null && currentBookData.price !== undefined) {
             // Wandelt den Float (z.B. 12.25) in einen String mit Komma (12,25) um
@@ -1655,14 +1655,14 @@
         if (currentBookData.thumbnail) {
             downloadBookCover(currentBookData.thumbnail);
         }
-        
+
         // Show success message
         const infoContainer = document.getElementById('book-info-container');
         const successMessage = document.createElement('div');
         successMessage.className = 'import-success-message';
         successMessage.textContent = 'Buchdaten erfolgreich in das Formular übernommen!';
         infoContainer.appendChild(successMessage);
-        
+
         // Remove success message after 3 seconds
         setTimeout(() => {
             if (successMessage.parentNode) {