changes to the physical scanner processing

- 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

README.md

@@ -1,6 +1,6 @@
 # Inventarsystem
 
-[![https://github.com/AIIrondev/legendary-octo-garbanzo](https://github.com/AIIrondev/legendary-octo-garbanzo/actions/workflows/release-docker.yml/badge.svg)](https://github.com/AIIrondev/legendary-octo-garbanzo/actions/workflows/release-docker.yml)
+[![https://git.invario-software.eu/Invario/Inventarsystem](https://git.invario-software.eu/Invario/Inventarsystem/actions/workflows/release-docker.yml/badge.svg)](https://git.invario-software.eu/Invario/Inventarsystem/actions/workflows/release-docker.yml)
 
 [![wakatime](https://wakatime.com/badge/user/30b8509f-5e17-4d16-b6b8-3ca0f3f936d3/project/8a380b7f-389f-4a7e-8877-0fe9e1a4c243.svg)](https://wakatime.com/badge/user/30b8509f-5e17-4d16-b6b8-3ca0f3f936d3/project/8a380b7f-389f-4a7e-8877-0fe9e1a4c243)
 

Web/modules/database/ausleihung.py

@@ -33,6 +33,8 @@ import json
 import Web.modules.database.settings as cfg
 from Web.modules.database.settings import MongoClient
 import Web.modules.inventarsystem.data_protection as dp
+import Web.modules.database.user as us
+from zoneinfo import ZoneInfo
 
 
 def _get_client():
@@ -79,7 +81,7 @@ def get_current_status(ausleihung, log_changes=False, user=None):
     if original_status == 'completed':
         return 'completed'
     
-    current_time = datetime.datetime.now()
+    current_time = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
     start_time = ausleihung.get('Start')
     end_time = ausleihung.get('End')
     
@@ -137,7 +139,7 @@ def create_backup_database():
             os.makedirs(backup_dir)
         
         # Aktuelles Datum für den Dateinamen
-        current_date = datetime.datetime.now().strftime('%Y-%m-%d_%H-%M-%S')
+        current_date = datetime.datetime.now(ZoneInfo("Europe/Berlin")).strftime('%Y-%m-%d_%H-%M-%S')
         backup_file = os.path.join(backup_dir, f'ausleihungen_backup_{current_date}.json')
         
         # Ausleihungen abrufen und als JSON speichern
@@ -175,7 +177,7 @@ def create_backup_database():
         
         log_file = os.path.join(log_dir, 'ausleihungen_error.log')
         with open(log_file, 'a', encoding='utf-8') as f:
-            f.write(f"{datetime.datetime.now().strftime('%Y-%m-%d_%H-%M-%S')}: Backup-Fehler: {str(e)}\n")
+            f.write(f"{datetime.datetime.now(ZoneInfo("Europe/Berlin")).strftime('%Y-%m-%d_%H-%M-%S')}: Backup-Fehler: {str(e)}\n")
         
         print(f"Fehler beim Erstellen des Backups: {e}")
         return False
@@ -183,7 +185,7 @@ def create_backup_database():
 
 # === AUSLEIHUNG MANAGEMENT ===
 
-def add_ausleihung(item_id, user, start_date, end_date=None, notes="", status="active", period=None, exemplar_data=None):
+def add_ausleihung(item_id, user, start_date, end_date=None, notes="", status="active", period=None, exemplar_data=None, due_date=None):
     """
     Add a new borrowing record for an item.
     
@@ -204,7 +206,7 @@ def add_ausleihung(item_id, user, start_date, end_date=None, notes="", status="a
         client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
         db = client[cfg.MONGODB_DB]
         ausleihungen = db['ausleihungen']
-        
+
         ausleihung = {
             'Item': item_id,
             'User': dp.encrypt_text(user),
@@ -223,6 +225,9 @@ def add_ausleihung(item_id, user, start_date, end_date=None, notes="", status="a
             
         if exemplar_data:
             ausleihung['ExemplarData'] = exemplar_data
+
+        if due_date:
+            ausleihung['DueDate'] = due_date
         
         result = ausleihungen.insert_one(ausleihung)
         ausleihung_id = result.inserted_id
@@ -270,7 +275,7 @@ def update_ausleihung(id, item_id=None, user_id=None, start=None, end=None, note
             return True
 
         # UTC Zeitstempel nutzen
-        update_data['LastUpdated'] = datetime.datetime.now(datetime.timezone.utc)
+        update_data['LastUpdated'] = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
 
         result = ausleihungen.update_one(
             {'_id': doc_id},
@@ -300,7 +305,7 @@ def complete_ausleihung(id, end_time=None):
     """
     try:
         if end_time is None:
-            end_time = datetime.datetime.now()
+            end_time = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         
         client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
         db = client[cfg.MONGODB_DB]
@@ -312,7 +317,7 @@ def complete_ausleihung(id, end_time=None):
             {'$set': {
                 'End': end_time,
                 'Status': 'completed',
-                'LastUpdated': datetime.datetime.now()
+                'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
             }}
         )
         
@@ -320,7 +325,7 @@ def complete_ausleihung(id, end_time=None):
             {'_id': ObjectId(id)},
             {'$set': {
                 'Verfuegbar': True,
-                'LastUpdated': datetime.datetime.now()
+                'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
             }}
         )
 
@@ -351,7 +356,7 @@ def cancel_ausleihung(id):
             {'_id': ObjectId(id)},
             {'$set': {
                 'Status': 'cancelled',
-                'LastUpdated': datetime.datetime.now()
+                'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
             }}
         )
 
@@ -376,7 +381,7 @@ def remove_ausleihung(id):
         client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
         db = client[cfg.MONGODB_DB]
         ausleihungen = db['ausleihungen']
-        now = datetime.datetime.now()
+        now = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         result = ausleihungen.update_one(
             {'_id': ObjectId(id), 'Status': {'$ne': 'deleted'}},
             {'$set': {
@@ -770,7 +775,7 @@ def activate_ausleihung(id):
                 {'_id': doc_id, 'Status': 'planned'},
                 {'$set': {
                     'Status': 'active',
-                    'LastUpdated': datetime.datetime.now(datetime.timezone.utc)
+                    'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
                 }}
             )
             return result.modified_count > 0
@@ -794,7 +799,7 @@ def reset_item_completely(item_id):
                 return {'success': False, 'message': 'Item nicht gefunden'}
 
             item_name = item.get('Name', 'Unbekannt')
-            now_utc = datetime.datetime.now(datetime.timezone.utc)
+            now_utc = datetime.datetime.now(ZoneInfo("Europe/Berlin"))
 
             # 1. Bulk update active borrowings
             update_res = ausleihungen_collection.update_many(
@@ -862,7 +867,7 @@ def mark_booking_active(booking_id, ausleihung_id=None):
         doc_id = ObjectId(booking_id) if isinstance(booking_id, str) else booking_id
         update_data = {
             'Status': 'active',
-            'LastUpdated': datetime.datetime.now(datetime.timezone.utc)
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
         if ausleihung_id:
             update_data['AusleihungId'] = ausleihung_id

Web/modules/database/items.py

@@ -25,6 +25,8 @@ import datetime
 import Web.modules.database.settings as cfg
 from Web.modules.database.settings import MongoClient
 import Web.modules.inventarsystem.data_protection as dp
+import logging
+from zoneinfo import ZoneInfo
 
 
 def is_library_item(item):
@@ -176,8 +178,8 @@ def add_item(name, ort, beschreibung, images=None, filter=None, filter2=None, fi
             'SeriesPosition': series_position,
             'IsGroupedSubItem': is_grouped_sub_item,
             'ParentItemId': parent_item_id,
-            'Created': datetime.datetime.now(),
-            'LastUpdated': datetime.datetime.now()
+            'Created': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
         result = items.insert_one(item)
         item_id = result.inserted_id
@@ -207,8 +209,8 @@ def remove_item(id):
             {'_id': ObjectId(id), 'Deleted': {'$ne': True}},
             {'$set': {
                 'Deleted': True,
-                'DeletedAt': datetime.datetime.now(),
-                'LastUpdated': datetime.datetime.now(),
+                'DeletedAt': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
+                'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
                 'Verfuegbar': False,
             }}
         )
@@ -303,7 +305,7 @@ def update_item(id, name, ort, beschreibung, images, verfuegbar, filter1, filter
             'is_library': is_lib,
             'library_category': library_category,
             'Verfuegbar': bool(verfuegbar),
-            'LastUpdated': datetime.datetime.now()
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
 
         specific_update = shared_update.copy()
@@ -345,7 +347,7 @@ def update_item_status(id, verfuegbar, user=None):
 
         update_data = {
             'Verfuegbar': verfuegbar,
-            'LastUpdated': datetime.datetime.now()
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
 
         update_query = {'$set': update_data}
@@ -386,7 +388,7 @@ def update_item_exemplare_status(id, exemplare_status):
 
         update_data = {
             'ExemplareStatus': exemplare_status,
-            'LastUpdated': datetime.datetime.now()
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
 
         result = items.update_one(
@@ -733,7 +735,7 @@ def unstuck_item(id):
             {'$set': {
                 'Status': 'cancelled',
                 'CancelledReason': 'unstuck_reset',
-                'LastUpdated': datetime.datetime.now()
+                'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
             }}
         )
 
@@ -744,7 +746,7 @@ def unstuck_item(id):
             {
                 '$set': {
                     'Verfuegbar': True,
-                    'LastUpdated': datetime.datetime.now()
+                    'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
                 },
                 '$unset': {'User': ""}
             }
@@ -909,9 +911,9 @@ def get_filter_names():
     if names_doc and 'names' in names_doc:
         return names_doc['names']
     return {
-        '1': 'Fach/Kategorie',
-        '2': 'System/Bereich',
-        '3': 'Typ/Art'
+        '1': 'Jahrgangsstufe',
+        '2': 'Fachgebiet',
+        '3': 'Schlagwort'
     }
 
 def set_filter_name(filter_num, name):
@@ -1074,7 +1076,7 @@ def update_item_next_appointment(item_id, appointment_data):
         if appointment_data is None:
             update_query = {
                 '$unset': {'NextAppointment': ""},
-                '$set': {'LastUpdated': datetime.datetime.now()}
+                '$set': {'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))}
             }
         else:
             # Create a copy so we don't mutate the original dictionary passed in
@@ -1087,7 +1089,7 @@ def update_item_next_appointment(item_id, appointment_data):
             update_query = {
                 '$set': {
                     'NextAppointment': data_to_save,
-                    'LastUpdated': datetime.datetime.now()
+                    'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
                 }
             }
 
@@ -1120,7 +1122,7 @@ def clear_item_next_appointment(item_id):
 
         result = items.update_one(
             {'_id': ObjectId(item_id)},
-            {'$unset': {'NextAppointment': ""}, '$set': {'LastUpdated': datetime.datetime.now()}}
+            {'$unset': {'NextAppointment': ""}, '$set': {'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))}}
         )
 
         client.close()
@@ -1292,4 +1294,137 @@ def sync_group_codes(primary_obj_id, base_code, individual_codes_list):
         return True
     except Exception as e:
         print(f"Error syncing group codes: {e}")
-        return False
+        return False
+
+
+logging.basicConfig(level=logging.INFO, format='%(levelname)s: %(message)s')
+
+
+def cleanup_orphaned_images(fs, dry_run=True):
+    """
+    Finds images in GridFS that are no longer referenced by any item
+    and optionally deletes them.
+
+    Supported item fields:
+        - book_cover_image
+        - image
+        - images
+
+    The fields are expected to contain GridFS file ObjectIds.
+
+    :param fs: GridFS instance, e.g. gridfs.GridFS(db)
+    :param dry_run: If True, only reports what would be deleted.
+                    If False, actually deletes the files.
+    """
+
+    logging.info("Starte Cleanup-Skript...")
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+
+    try:
+        db = client[cfg.MONGODB_DB]
+        items_collection = db["items"]
+
+        referenced_files = set()
+
+        for item in items_collection.find(
+            {},
+            {
+                "Images": 1
+            }
+        ):
+            images = item.get("Images")
+
+            if isinstance(images, list):
+                for img in images:
+                    if img:
+                        referenced_files.add(img)
+
+        referenced_files.discard(None)
+
+        logging.info(
+            f"{len(referenced_files)} referenzierte GridFS-Dateien gefunden."
+        )
+
+        orphaned_files = []
+
+        for grid_file in fs.find():
+            file_id = grid_file._id
+            filename = grid_file.filename or ""
+
+            if not filename.lower().endswith(
+                (".jpg", ".jpeg", ".png", ".gif", ".webp")
+            ):
+                continue
+
+            if file_id not in referenced_files:
+                orphaned_files.append(
+                    {
+                        "_id": file_id,
+                        "filename": filename,
+                        "upload_date": grid_file.upload_date,
+                    }
+                )
+
+        logging.info(
+            f"Gefundene verwaiste Bilder: {len(orphaned_files)}"
+        )
+
+        if dry_run:
+            logging.info(
+                "--- DRY RUN AKTIV - Es wird nichts gelöscht ---"
+            )
+
+            for file in orphaned_files:
+                logging.info(
+                    f"Würde löschen: "
+                    f"{file['filename']} "
+                    f"(ID: {file['_id']}, "
+                    f"Hochgeladen: {file['upload_date']})"
+                )
+
+            logging.info(
+                "--- Setze dry_run=False, um physisch zu löschen ---"
+            )
+
+        else:
+            logging.warning("--- LÖSCHVORGANG AKTIV ---")
+
+            deleted_count = 0
+            failed_count = 0
+
+            for file in orphaned_files:
+                try:
+                    fs.delete(file["_id"])
+
+                    deleted_count += 1
+
+                    logging.info(
+                        f"Gelöscht: {file['filename']} "
+                        f"(ID: {file['_id']})"
+                    )
+
+                except Exception as e:
+                    failed_count += 1
+
+                    logging.error(
+                        f"Fehler beim Löschen von "
+                        f"{file['filename']} "
+                        f"(ID: {file['_id']}): {e}"
+                    )
+
+            logging.info(
+                f"Cleanup beendet. "
+                f"{deleted_count} Bilder gelöscht, "
+                f"{failed_count} Fehler."
+            )
+
+        return {
+            "status": "success",
+            "referenced_count": len(referenced_files),
+            "orphaned_count": len(orphaned_files),
+            "dry_run": dry_run,
+        }
+
+    finally:
+        client.close()

Web/modules/database/termine.py

@@ -23,6 +23,7 @@ from Web.modules.database.settings import MongoClient
 from bson.objectid import ObjectId
 import datetime 
 import ast
+from zoneinfo import ZoneInfo
 
 
 def _get_tenant_db(client):
@@ -99,8 +100,8 @@ def add(date_start: str, date_end: str, time_span: list, slots: int, slot_lenght
             'calendar_enabled': bool(calendar_enabled),
             'clients_per_slot': clients_p_slot,
             'slots_booked': [],  # -> [(start_time, (names),(custom1, custom2,...)), ...]the list gets there indexes as the slot 1-defined so is can be counted without an extra variable
-            'Created': datetime.datetime.now(),
-            'LastUpdated': datetime.datetime.now()
+            'Created': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
         result = items.insert_one(item)
         return result.inserted_id
@@ -138,7 +139,7 @@ def update(id, slots_used: list):
 
         update_data = {
             'slots_booked': dp.encrypt_text(str(slots_used)),
-            'LastUpdated': datetime.datetime.now()
+            'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
         }
 
         result = items.update_one(
@@ -200,7 +201,7 @@ def remove_slot(id, date_start_time, name):
             {
                 '$set': {
                     'slots_booked': dp.encrypt_text(str(updated_slots)),
-                    'LastUpdated': datetime.datetime.now()
+                    'LastUpdated': datetime.datetime.now(ZoneInfo("Europe/Berlin"))
                 }
             }
         )

Web/modules/database/user.py

@@ -704,6 +704,122 @@ def get_user_by_student_card(student_card_id):
     # Do not call dp.decrypt_text() here because found_user is a MongoDB dictionary.
     return found_user
 
+def get_user_by_student_ident(student_ident):
+    """Return user dict by student ident by decrypting all cards and matching."""
+    if not student_ident:
+        return None
+
+    # Normalisiere den Suchbegriff, den wir finden wollen
+    normalized_target = str(student_ident).strip()
+    if not normalized_target:
+        return None
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+    try:
+        db = _get_tenant_db(client)
+        all_student_cards = db['student_cards'].find()
+
+        for user_doc in all_student_cards:
+            encrypted_ident = user_doc.get('AusweisIdent')
+
+            if encrypted_ident:
+                try:
+                    decrypted_ident = dp.decrypt_text(encrypted_ident)
+                    
+                    if decrypted_ident and str(decrypted_ident).strip() == normalized_target:
+                        return user_doc 
+                        
+                except Exception as e:
+                    logger.error(f"Entschlüsselungsfehler bei ID {user_doc.get('_id')}: {e}")
+                    continue
+                    
+    except Exception as exc:
+        logger.error(f"Datenbankfehler in get_user_by_student_ident: {exc}")
+    finally:
+        client.close()
+
+    return None
+
+
+def get_user_by_student_name(student_name):
+    """Return user dict by student name by decrypting all cards and matching."""
+    if not student_name:
+        return None
+
+    # Normalisiere den Suchbegriff, den wir finden wollen
+    normalized_target = str(student_name).strip()
+    if not normalized_target:
+        return None
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+    try:
+        db = _get_tenant_db(client)
+        all_student_cards = db['student_cards'].find()
+
+        for user_doc in all_student_cards:
+            encrypted_student_name = user_doc.get('SchülerName')
+
+            if encrypted_student_name:
+                try:
+                    decrypted_ident = dp.decrypt_text(encrypted_student_name)
+
+                    if decrypted_ident and str(decrypted_ident).strip() == normalized_target:
+                        return user_doc
+
+                except Exception as e:
+                    logger.error(f"Entschlüsselungsfehler bei ID {user_doc.get('_id')}: {e}")
+                    continue
+
+    except Exception as exc:
+        logger.error(f"Datenbankfehler in get_user_by_student_name: {exc}")
+    finally:
+        client.close()
+
+    return None
+
+def student_is_blocked(student_id):
+    """
+    Überprüft, ob ein Schüler (Nutzer) im System gesperrt ist (z. B. aufgrund von überfälligen Ausleihen).
+    Akzeptiert entweder den Benutzernamen oder die Schülerausweis-ID.
+
+    Rückgabewert:
+        True, wenn der Nutzer gesperrt ist.
+        False, wenn der Nutzer nicht gesperrt ist oder nicht gefunden wurde.
+    """
+    if not student_id:
+        return False
+
+    normalized_card_id = normalize_student_card_id(student_id)
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+    try:
+        db = _get_tenant_db(client)
+        users = db['users']
+
+        # Suche nach dem Benutzer anhand des Benutzernamens (groß/klein) oder der StudentCardId
+        query = {
+            '$or': [
+                {'Username': student_id},
+                {'username': student_id},
+                {'StudentCardId': normalized_card_id}
+            ]
+        }
+
+        user_doc = users.find_one(query)
+
+        if user_doc:
+            # Lese das Feld 'is_blocked' aus, standardmäßig False, falls es nicht existiert
+            return bool(user_doc.get('is_blocked', False))
+
+        # Wenn kein Nutzer gefunden wurde, gehen wir sicherheitshalber davon aus, dass keine Sperre vorliegt
+        return False
+
+    except Exception as e:
+        logger.error(f"Datenbankfehler in student_is_blocked: {e}")
+        # Im Fehlerfall False zurückgeben, um Systemblockaden durch Datenbankfehler zu vermeiden
+        return False
+    finally:
+        client.close()
 
 def make_admin(username):
     """Grant administrator privileges to a user."""

Web/modules/emailservice/email.py

@@ -17,7 +17,7 @@ def _build_smtp_client():
         smtp.starttls()
         smtp.ehlo()
     if cfg.EMAIL_USERNAME:
-        smtp.login(cfg.EMAIL_USERNAME, cfg.EMAIL_PASSWORD or "")
+        smtp.login("no-reply@invario-software.de", "#,EATwIn,68" or "")
     return smtp
 
 
@@ -68,14 +68,20 @@ def send(email: list | str, subject: str, note: str, sender: str) -> bool:
 
             msg = MIMEMultipart("alternative")
             msg["Subject"] = str(subject)
-            msg["From"] = f"{sender} <{cfg.EMAIL_USERNAME}>"
+            msg["From"] = f"{sender} <no-reply@invario-software.de>"
             msg["To"] = str(recipient)
 
             msg.attach(MIMEText(text_content, "plain"))
             msg.attach(MIMEText(html_content, "html"))
 
+            #smtp.sendmail(
+            #    from_addr=cfg.EMAIL_USERNAME,
+            #    to_addrs=[recipient],
+            #    msg=msg.as_string()
+            #)
+
             smtp.sendmail(
-                from_addr=cfg.EMAIL_USERNAME,
+                from_addr="no-reply@invario-software.de",
                 to_addrs=[recipient],
                 msg=msg.as_string()
             )

Web/push_notifications.py

@@ -10,6 +10,7 @@ from bson import ObjectId
 import requests
 import hashlib
 import logging
+from zoneinfo import ZoneInfo
 
 import Web.modules.database.settings as cfg
 from Web.modules.database.settings import MongoClient
@@ -153,7 +154,7 @@ def save_push_subscription(username, subscription_obj):
             subs_col.update_one(
                 {'_id': existing['_id']},
                 {'$set': {
-                    'LastUsed': datetime.datetime.now(),
+                    'LastUsed': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
                     'IsActive': True
                 }}
             )
@@ -172,8 +173,8 @@ def save_push_subscription(username, subscription_obj):
             'Keys': encrypt_text(keys_str),
             'SubscriptionHash': sub_hash,
             'IsActive': True,
-            'CreatedAt': datetime.datetime.now(),
-            'LastUsed': datetime.datetime.now(),
+            'CreatedAt': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
+            'LastUsed': datetime.datetime.now(ZoneInfo("Europe/Berlin")),
             'UserAgent': subscription_obj.get('userAgent', ''),
         }
 
@@ -399,7 +400,7 @@ def cleanup_inactive_subscriptions():
         db = client[cfg.MONGODB_DB]
         subs_col = get_push_subscriptions_collection(db)
         
-        cutoff_date = datetime.datetime.now() - datetime.timedelta(days=30)
+        cutoff_date = datetime.datetime.now(ZoneInfo("Europe/Berlin")) - datetime.timedelta(days=30)
         
         result = subs_col.delete_many({
             'IsActive': False,

Web/templates/admin_school_settings.html

@@ -78,15 +78,15 @@
                     <div class="form-row">
                         <div class="form-group">
                             <label for="filter_name_1">Name Filter 1</label>
-                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Fach/Kategorie') }}" placeholder="z. B. Fach/Kategorie">
+                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Klassenstufe') }}" placeholder="z. B. Klassenstufe">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_2">Name Filter 2</label>
-                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'System/Bereich') }}" placeholder="z. B. System/Bereich">
+                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'Fach') }}" placeholder="z. B. Fach">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_3">Name Filter 3</label>
-                            <input type="text" id="filter_name_3" name="filter_name_3" value="{{ filter_names.get('3', 'Typ/Art') }}" placeholder="z. B. Typ/Art">
+                            <input type="text" id="filter_name_3" name="filter_name_3" value="{{ filter_names.get('3', 'Schlagwort') }}" placeholder="z. B. Schlagwort">
                         </div>
                     </div>
 
@@ -120,9 +120,64 @@
                 <p>Diese Angaben erscheinen künftig im amtlichen Audit-PDF und in anderen Behördenberichten.</p>
             </div>
         </div>
+
+        <!-- Danger Zone: Schuljahreswechsel -->
+        <div class="card danger-zone" style="grid-column: 1 / -1; border-color: #fca5a5;">
+            <div class="card-header" style="background: #fef2f2; border-bottom: 1px solid #fca5a5;">
+                <h2 style="color: #991b1b;">Erweiterte Aktionen</h2>
+            </div>
+            <div class="card-body" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
+                <div>
+                    <strong style="color: #7f1d1d; display: block; font-size: 1.05rem; margin-bottom: 4px;">Schuljahreswechsel durchführen</strong>
+                    <span style="color: #991b1b; font-size: 0.9rem;">Diese Aktion bereitet das System auf das neue Schuljahr vor (z. B. Hochstufen von Klassen).</span>
+                </div>
+                <button type="button"
+                        id="btn-rollover"
+                        class="btn btn-danger"
+                        onclick="triggerSchoolYearRollover()">
+                    Schuljahreswechsel auslösen
+                </button>
+            </div>
+        </div>
     </div>
 </div>
 
+<script>
+async function triggerSchoolYearRollover() {
+    if (!confirm('Möchtest du den Schuljahreswechsel wirklich durchführen? Dies kann nicht rückgängig gemacht werden!')) {
+        return;
+    }
+
+    const btn = document.getElementById('btn-rollover');
+    btn.disabled = true;
+    btn.textContent = 'Wird ausgeführt...';
+
+    try {
+        const response = await fetch('/admin/trigger_school_year_rollover', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+
+        const data = await response.json();
+
+        if (response.ok && data.ok) {
+            alert('Schuljahreswechsel erfolgreich durchgeführt!\n\nZusammenfassung:\n' + JSON.stringify(data.summary, null, 2));
+            location.reload();
+        } else {
+            alert('Fehler: ' + (data.message || 'Schuljahreswechsel konnte nicht durchgeführt werden.'));
+        }
+    } catch (error) {
+        console.error('Rollover error:', error);
+        alert('Netzwerk- oder Serverfehler beim Ausführen des Schuljahreswechsels.');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Schuljahreswechsel auslösen';
+    }
+}
+</script>
+
 <style>
     .container {
         max-width: 1100px;
@@ -245,12 +300,17 @@
         cursor: pointer;
     }
 
+    .btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
     .btn-primary {
         background: #2563eb;
         color: #fff;
     }
 
-    .btn-primary:hover {
+    .btn-primary:hover:not(:disabled) {
         background: #1d4ed8;
         color: #fff;
     }
@@ -261,11 +321,21 @@
         border-color: #d1d5db;
     }
 
-    .btn-secondary:hover {
+    .btn-secondary:hover:not(:disabled) {
         background: #e5e7eb;
         color: #111827;
     }
 
+    .btn-danger {
+        background: #ef4444;
+        color: #fff;
+    }
+
+    .btn-danger:hover:not(:disabled) {
+        background: #dc2626;
+        color: #fff;
+    }
+
     .preview-card p {
         margin: 0 0 10px;
         line-height: 1.45;
@@ -283,5 +353,15 @@
             grid-template-columns: 1fr;
         }
     }
+
+    @media (max-width: 600px) {
+        .danger-zone .card-body {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        .danger-zone .btn {
+            width: 100%;
+        }
+    }
 </style>
-{% endblock %}
+{% endblock %}

Web/templates/base.html

@@ -1261,10 +1261,10 @@
                                 <li><a class="dropdown-item" href="{{ url_for('admin_school_settings') }}">Schulstammdaten</a></li>
                                 {% endif %}
                                 {% if current_permissions.pages.get('admin_borrowings', False) %}
-                                <li><a class="dropdown-item" href="{{ url_for('admin_borrowings') }}">Ausleihen</a></li>
+                                <li><a class="dropdown-item" href="{{ url_for('admin_borrowings') }}">Alle Ausleihen</a></li>
                                 {% endif %}
                                 {% if current_permissions.pages.get('admin_damaged_items', False) %}
-                                <li><a class="dropdown-item" href="{{ url_for('admin_damaged_items') }}">Defekte Items</a></li>
+                                <li><a class="dropdown-item" href="{{ url_for('admin_damaged_items') }}">Alle defekten Items</a></li>
                                 {% endif %}
                                 {% if current_permissions.actions.get('can_view_logs', False) and current_permissions.pages.get('admin_audit_dashboard', False) %}
                                 <li><a class="dropdown-item" href="{{ url_for('admin_audit_dashboard') }}">Audit Dashboard</a></li>
@@ -1342,7 +1342,7 @@
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="libraryNavList">
                         {% if current_permissions.pages.get('library_view', False) %}
                         <li class="nav-item" data-nav-fixed="true">
-                            <a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}" data-tutorial-tip="Die Bibliothek zeigt Ihnen alle Medien und verfügbaren Bücher.">Medien</a>
+                            <a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}" data-tutorial-tip="Die Bibliothek zeigt Ihnen alle Medien und verfügbaren Bücher.">Medien/Ausleihe</a>
                         </li>
                         {% endif %}
                         {% if 'username' in session %}
@@ -1372,7 +1372,8 @@
                                 {% if 'username' in session and current_permissions.actions.get('can_manage_settings', False) %}
                                 <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') }}">Ausleihen / Defekte Items</a></li>
+                                <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/edit_library.html

@@ -274,7 +274,7 @@
             {% if not show_library_features %}
             <!-- ================= SYSTEM FILTERS 1-3 (INVENTORY / OTHER ITEMS ONLY) ================= -->
             <div class="filter-inputs">
-                <h3>Unterrichtsfach (Filter 1):</h3>
+                <h3>{{ filter_names.get('1', 'Jahrgangsstufe') }}</h3>
                 <div class="multi-filter">
                     {% for idx in range(4) %}
                     <div class="form-group">
@@ -286,7 +286,7 @@
                     {% endfor %}
                 </div>
 
-                <h3>Jahrgangsstufe (Filter 2):</h3>
+                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
                 <div class="multi-filter">
                     {% for idx in range(4) %}
                     <div class="form-group">
@@ -298,7 +298,7 @@
                     {% endfor %}
                 </div>
 
-                <h3>Schlagwort (Filter 3):</h3>
+                <h3>{{ filter_names.get('3', 'Schlagwort') }}</h3>
                 <div class="multi-filter">
                     {% for idx in range(4) %}
                     <div class="form-group">

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;
   }
 
   .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; }
 
   .row-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
+    align-items: center;
   }
 
   .row-actions form {
@@ -164,6 +168,32 @@
     white-space: nowrap;
   }
 
+  .row-actions .btn-outline-danger {
+    color: #dc2626;
+    background-color: #fef2f2; /* Light red tint so it doesn't blend into the white table */
+    border: 2px solid #dc2626; /* Thicker, clear border */
+    padding: 6px 14px;
+    border-radius: 6px;
+    font-weight: bold;
+    font-size: 0.85rem;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1); /* Subtle shadow for depth */
+    transition: all 0.2s ease;
+  }
+
+  .row-actions .btn-outline-danger:hover {
+    background-color: #dc2626;
+    color: #ffffff;
+    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.25);
+    transform: translateY(-1px); /* Slight lift effect on hover */
+  }
+
+  .row-actions .btn-outline-danger:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.15); /* Pressed state */
+  }
+  /* ------------------------------------------------------ */
+
   .muted {
     color: #6b7280;
     font-size: 0.92rem;
@@ -196,7 +226,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 +245,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 +286,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 +325,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 +377,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 +420,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 +453,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,14 +467,15 @@
   </div>
 </div>
 
-<div id="damage-invoice-modal" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.72); z-index:9999; padding:20px; overflow:auto;">
+<!-- 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;">
       <div>
-        <h2 style="margin:0;">Rechnung erstellen</h2>
+        <h2 id="modal-title" style="margin:0;">Rechnung erstellen</h2>
         <p style="margin:6px 0 0; color:#666;">Die Rechnung nutzt das bestehende Rechnungssystem und kann direkt nach der Schadensmeldung erstellt werden.</p>
       </div>
-      <button type="button" class="btn btn-secondary" onclick="closeDamageInvoiceModal()">Schließen</button>
+      <button type="button" class="btn btn-secondary" onclick="closeDamageInvoiceModal()" aria-label="Modal schließen">Schließen</button>
     </div>
 
     <form id="damage-invoice-form" method="post" action="">
@@ -432,7 +493,10 @@
           <input id="damage-invoice-code" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background: var(--ui-surface-soft);">
         </div>
         <div>
-          <label for="damage-invoice-amount" style="display:block; font-weight:700; margin-bottom:6px;">Preis</label>
+          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
+            <label for="damage-invoice-amount" style="font-weight:700; margin:0;">Preis</label>
+            <button type="button" id="damage-invoice-replace-btn" class="btn btn-outline-secondary btn-sm" style="padding: 2px 8px; font-size: 0.75rem;">Komplett ersetzen</button>
+          </div>
           <input id="damage-invoice-amount" name="invoice_amount" type="text" required style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;" placeholder="z.B. 12,50">
         </div>
       </div>
@@ -461,15 +525,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');
@@ -477,61 +570,138 @@
   const damageInvoiceCode = document.getElementById('damage-invoice-code');
   const damageInvoiceAmount = document.getElementById('damage-invoice-amount');
   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';
+    const originalText = button.textContent;
+    button.disabled = true;
+    button.textContent = 'Speichere...';
 
     fetch(`/report_damage/${itemId}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ description })
     })
-      .then(response => response.json().then(data => ({ ok: response.ok, data })))
-      .then(({ ok, data }) => {
-        if (!ok || !data.success) {
+      .then(async response => {
+        const data = await response.json().catch(() => ({}));
+        if (!response.ok || !data.success) {
           throw new Error(data.message || 'Fehler beim Speichern der Schadensmeldung.');
         }
-
+        return data;
+      })
+      .then(data => {
         if (confirm('Schaden gespeichert. Soll direkt eine Rechnung erstellt werden?')) {
           openDamageInvoiceModal(row, description);
+          button.disabled = false;
+          button.textContent = originalText;
           return;
         }
-
         window.location.reload();
       })
       .catch(error => {
-        alert(error.message || 'Fehler beim Speichern der Schadensmeldung.');
+        alert(error.message || 'Ein unbekannter Fehler ist aufgetreten.');
+        button.disabled = false;
+        button.textContent = originalText;
       });
   }
 
   window.openDamageReportPrompt = openDamageReportPrompt;
 
   function openDamageInvoiceModal(row, description) {
-    const modal = document.getElementById('damage-invoice-modal');
-    const form = document.getElementById('damage-invoice-form');
-    const inputItem = document.getElementById('damage-invoice-item');
-    const inputBorrower = document.getElementById('damage-invoice-borrower');
-    const inputCode = document.getElementById('damage-invoice-code');
-    const inputAmount = document.getElementById('damage-invoice-amount');
-    const inputReason = document.getElementById('damage-invoice-reason');
-
-    if (!modal || !form) {
-      console.error("Modal oder Formular nicht gefunden.");
-      return;
-    }
+    if (!damageInvoiceModal || !damageInvoiceForm) return;
 
     const borrowId = row.dataset.borrowId || '';
     const itemName = row.dataset.itemName || '';
@@ -539,27 +709,36 @@
     const itemCode = row.dataset.itemCode || '';
     const itemCost = row.dataset.itemCost || '';
 
-    form.action = "{{ url_for('admin_create_invoice', borrow_id='__BORROW_ID__') }}".replace('__BORROW_ID__', borrowId);
+    damageInvoiceForm.action = "{{ url_for('admin_create_invoice', borrow_id='__BORROW_ID__') }}".replace('__BORROW_ID__', borrowId);
 
-    inputItem.value = itemName;
-    inputBorrower.value = borrower;
-    inputCode.value = itemCode;
+    damageInvoiceItem.value = itemName;
+    damageInvoiceBorrower.value = borrower;
+    damageInvoiceCode.value = itemCode;
+    damageInvoiceAmount.value = '';
 
-    inputAmount.value = String(itemCost).replace(' EUR', '').trim();
+    if (damageInvoiceReplaceBtn) {
+      damageInvoiceReplaceBtn.dataset.acquisition_costs = String(itemCost).replace(' EUR', '').trim();
+    }
 
-    inputReason.value = description || `Schaden gemeldet für ${itemName}`;
-
-    modal.style.display = 'block';
-    inputAmount.focus();
+    damageInvoiceReason.value = description || `Schaden gemeldet für ${itemName}`;
+    damageInvoiceModal.style.display = 'block';
+    damageInvoiceAmount.focus();
   }
 
   function closeDamageInvoiceModal() {
-    const modal = document.getElementById('damage-invoice-modal');
-    if (modal) {
-      modal.style.display = 'none';
+    if (damageInvoiceModal) {
+      damageInvoiceModal.style.display = 'none';
     }
   }
 
+  if (damageInvoiceReplaceBtn) {
+    damageInvoiceReplaceBtn.addEventListener('click', function() {
+      if (this.dataset.acquisition_costs) {
+        damageInvoiceAmount.value = this.dataset.acquisition_costs;
+      }
+    });
+  }
+
   window.openDamageInvoiceModal = openDamageInvoiceModal;
   window.closeDamageInvoiceModal = closeDamageInvoiceModal;
 
@@ -571,22 +750,26 @@
     });
   }
 
-  window.closeDamageInvoiceModal = closeDamageInvoiceModal;
-
+  // 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++;
     });
@@ -597,10 +780,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++;
     });
@@ -608,9 +798,10 @@
   }
 
   searchInput.addEventListener('input', applyFilters);
+  classFilter.addEventListener('change', applyFilters); // NEU
   statusFilter.addEventListener('change', applyFilters);
   damageFilter.addEventListener('change', applyFilters);
   applyFilters();
 })();
 </script>
-{% endblock %}
+{% endblock %}

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/library_table.html

@@ -135,21 +135,6 @@
     .library-scan-status.warn { color: #9a6700; }
     .library-scan-status.error { color: #b42318; }
 
-    .library-scan-reader-wrap {
-        display: none;
-        margin-top: 12px;
-        max-width: 460px;
-        background: var(--ui-surface);
-        border: 1px solid #d9dde4;
-        border-radius: 8px;
-        overflow: hidden;
-    }
-
-    .library-scan-reader {
-        width: 100%;
-        min-height: 280px;
-    }
-
     /* Filters */
     .library-filter-toggle-btn {
         padding: 10px 16px;
@@ -431,6 +416,71 @@
 
         .library-scan-reader-wrap { max-width: 100%; }
     }
+    .library-scan-reader-wrap {
+        display: none;
+        margin-top: 15px;
+        max-width: 640px;
+        margin-left: auto;
+        margin-right: auto;
+        background: #000;
+        border: 1px solid #d9dde4;
+        border-radius: 8px;
+        overflow: hidden;
+        grid-column: 1 / -1;
+    }
+
+    .library-scan-reader {
+        width: 100%;
+        min-height: 280px;
+        position: relative;
+    }
+
+    .library-scan-reader video {
+        width: 100%;
+        height: auto;
+        display: block;
+        object-fit: cover;
+    }
+
+    .library-scan-reader canvas.drawing,
+    .library-scan-reader canvas.drawingBuffer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+
+    .detail-gallery-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+        margin: 15px 0 20px 0;
+        width: 100%;
+        align-items: center;
+    }
+
+    .item-image-wrapper {
+        background-color: #f8fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        padding: 6px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+    }
+
+    .item-image {
+        max-width: 160px;
+        max-height: 200px;
+        width: auto;
+        height: auto;
+        display: block;
+        object-fit: contain;
+        border-radius: 4px;
+    }
 </style>
 
 <div class="library-table-container" id="libraryTableContainer" data-can-edit="{{ 1 if current_permissions.actions.get('can_edit', False) else 0 }}">
@@ -457,7 +507,6 @@
             🔍 Filter
         </button>
     </div>
-
     <div class="library-scan-controls">
         <select id="scanModeSelect" aria-label="Scan-Modus">
             <option value="card_only">Nur Ausweis erfassen</option>
@@ -467,7 +516,7 @@
         </select>
         <input type="text" id="activeStudentCard" placeholder="Aktiver Ausweis (gescannt)">
         <input type="text" id="manualItemCode" placeholder="Manueller Mediencode (optional)" style="min-width:180px;">
-        <button id="resetCardBtn" class="button" type="button">Ausweis löschen</button>
+        <button id="resetCardBtn" class="button" type="button">Feld zurücksetzen</button>
         <button id="toggleScannerBtn" class="button" type="button">Scanner starten</button>
         <label style="display:flex; align-items:center; gap:8px; margin-left:6px;">
             <input type="checkbox" id="keyboardScannerToggle">
@@ -475,6 +524,10 @@
         </label>
         <button id="manualActionBtn" class="button" type="button" style="margin-left:6px; background:#4f46e5; color:white;">Code verarbeiten</button>
     </div>
+    <div class="library-scan-reader-wrap" id="scanReaderWrap" style="display: none; margin-top: 15px;">
+        <div class="library-scan-reader" style="width: 100%; max-width: 640px; margin: 0 auto; overflow: hidden; border-radius: 8px; border: 2px solid #ccc;">
+        </div>
+    </div>
     <div id="filterPanel" class="library-filter-panel">
         <div class="filter-row">
             <div class="filter-item">
@@ -561,6 +614,199 @@
 </div>
 <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
 <script>
+
+    // =========================================================================
+    // CUSTOM MODAL HELPERS (Replaces native browser alert, confirm & prompt)
+    // =========================================================================
+    function createModalOverlay() {
+        const overlay = document.createElement('div');
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100vw';
+        overlay.style.height = '100vh';
+        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
+        overlay.style.display = 'flex';
+        overlay.style.alignItems = 'center';
+        overlay.style.justifyContent = 'center';
+        overlay.style.zIndex = '999999';
+        return overlay;
+    }
+
+    function createModalBox() {
+        const box = document.createElement('div');
+        box.style.backgroundColor = '#fff';
+        box.style.padding = '24px';
+        box.style.borderRadius = '8px';
+        box.style.boxShadow = '0 10px 25px rgba(0,0,0,0.2)';
+        box.style.fontFamily = 'sans-serif';
+        box.style.minWidth = '320px';
+        box.style.maxWidth = '90%';
+        box.style.textAlign = 'left';
+        box.style.color = '#333';
+        return box;
+    }
+
+    function customAlert(message) {
+        return new Promise((resolve) => {
+            const overlay = createModalOverlay();
+            const box = createModalBox();
+
+            const text = document.createElement('p');
+            text.textContent = message;
+            text.style.marginBottom = '20px';
+            text.style.lineHeight = '1.5';
+            text.style.whiteSpace = 'pre-wrap';
+
+            const btnContainer = document.createElement('div');
+            btnContainer.style.display = 'flex';
+            btnContainer.style.justifyContent = 'flex-end';
+
+            const btn = document.createElement('button');
+            btn.textContent = 'OK';
+            btn.style.padding = '8px 16px';
+            btn.style.cursor = 'pointer';
+            btn.style.border = 'none';
+            btn.style.backgroundColor = '#007bff';
+            btn.style.color = '#fff';
+            btn.style.borderRadius = '4px';
+
+            btn.onclick = () => {
+                document.body.removeChild(overlay);
+                resolve();
+            };
+
+            btnContainer.appendChild(btn);
+            box.appendChild(text);
+            box.appendChild(btnContainer);
+            overlay.appendChild(box);
+            document.body.appendChild(overlay);
+            btn.focus();
+        });
+    }
+
+    function customConfirm(message) {
+        return new Promise((resolve) => {
+            const overlay = createModalOverlay();
+            const box = createModalBox();
+
+            const text = document.createElement('p');
+            text.textContent = message;
+            text.style.marginBottom = '20px';
+            text.style.lineHeight = '1.5';
+            text.style.whiteSpace = 'pre-wrap';
+
+            const btnContainer = document.createElement('div');
+            btnContainer.style.display = 'flex';
+            btnContainer.style.justifyContent = 'flex-end';
+            btnContainer.style.gap = '10px';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.textContent = 'Abbrechen';
+            cancelBtn.style.padding = '8px 16px';
+            cancelBtn.style.cursor = 'pointer';
+            cancelBtn.style.border = '1px solid #ccc';
+            cancelBtn.style.backgroundColor = '#f8f9fa';
+            cancelBtn.style.color = '#333';
+            cancelBtn.style.borderRadius = '4px';
+
+            const okBtn = document.createElement('button');
+            okBtn.textContent = 'OK';
+            okBtn.style.padding = '8px 16px';
+            okBtn.style.cursor = 'pointer';
+            okBtn.style.border = 'none';
+            okBtn.style.backgroundColor = '#007bff';
+            okBtn.style.color = '#fff';
+            okBtn.style.borderRadius = '4px';
+
+            const closeAndResolve = (val) => {
+                document.body.removeChild(overlay);
+                resolve(val);
+            };
+
+            cancelBtn.onclick = () => closeAndResolve(false);
+            okBtn.onclick = () => closeAndResolve(true);
+
+            btnContainer.appendChild(cancelBtn);
+            btnContainer.appendChild(okBtn);
+            box.appendChild(text);
+            box.appendChild(btnContainer);
+            overlay.appendChild(box);
+            document.body.appendChild(overlay);
+            okBtn.focus();
+        });
+    }
+
+    function customPrompt(message, defaultValue = '') {
+        return new Promise((resolve) => {
+            const overlay = createModalOverlay();
+            const box = createModalBox();
+
+            const text = document.createElement('p');
+            text.textContent = message;
+            text.style.marginBottom = '15px';
+            text.style.lineHeight = '1.5';
+            text.style.whiteSpace = 'pre-wrap';
+
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.value = defaultValue;
+            input.style.width = '100%';
+            input.style.marginBottom = '20px';
+            input.style.padding = '10px';
+            input.style.boxSizing = 'border-box';
+            input.style.border = '1px solid #ccc';
+            input.style.borderRadius = '4px';
+
+            const btnContainer = document.createElement('div');
+            btnContainer.style.display = 'flex';
+            btnContainer.style.justifyContent = 'flex-end';
+            btnContainer.style.gap = '10px';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.textContent = 'Abbrechen';
+            cancelBtn.style.padding = '8px 16px';
+            cancelBtn.style.cursor = 'pointer';
+            cancelBtn.style.border = '1px solid #ccc';
+            cancelBtn.style.backgroundColor = '#f8f9fa';
+            cancelBtn.style.color = '#333';
+            cancelBtn.style.borderRadius = '4px';
+
+            const okBtn = document.createElement('button');
+            okBtn.textContent = 'OK';
+            okBtn.style.padding = '8px 16px';
+            okBtn.style.cursor = 'pointer';
+            okBtn.style.border = 'none';
+            okBtn.style.backgroundColor = '#007bff';
+            okBtn.style.color = '#fff';
+            okBtn.style.borderRadius = '4px';
+
+            const closeAndResolve = (val) => {
+                document.body.removeChild(overlay);
+                resolve(val);
+            };
+
+            cancelBtn.onclick = () => closeAndResolve(null);
+            okBtn.onclick = () => closeAndResolve(input.value);
+
+            input.onkeydown = (e) => {
+                if (e.key === 'Enter') closeAndResolve(input.value);
+                if (e.key === 'Escape') closeAndResolve(null);
+            };
+
+            btnContainer.appendChild(cancelBtn);
+            btnContainer.appendChild(okBtn);
+
+            box.appendChild(text);
+            box.appendChild(input);
+            box.appendChild(btnContainer);
+            overlay.appendChild(box);
+            document.body.appendChild(overlay);
+
+            input.focus();
+            input.select();
+        });
+    }
     // =========================================================================
     // 1. GLOBAL STATE DEFINITIONS
     // =========================================================================
@@ -597,6 +843,8 @@
     let keyboardScanBuffer = '';
     let keyboardLastKeyAt = 0;
     const KEYBOARD_SCAN_INTERCHAR_MS = 100; // max time between keystrokes to consider them one scan
+    const physicalScanQueue = [];
+    let keyboardScanProcessing = false;
     let editLibraryState = {
         itemId: '',
         seriesGroupId: '',
@@ -805,71 +1053,92 @@
         deleteLibraryItem(itemId);
     }
 
-    // =========================================================================
-    // 3. CORE SCANNER ROUTING ENGINE (QUAGGA2)
-    // =========================================================================
-    function startScanner(targetCallback) {
-        const readerWrap = document.getElementById('scanReaderWrap');
+    async function startScanner(callback = null) {
+        if (scannerRunning) {
+            console.warn("Scanner is already running. Stopping it first...");
+            await stopScanner();
+        }
+
+        activeScannerCallback = callback;
+
+        const scannerWrap = document.querySelector('.library-scan-reader-wrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
 
-        activeScannerCallback = targetCallback;
+        // 1. CRITICAL FIX: Make the container visible BEFORE Quagga initializes
+        // Quagga cannot calculate video dimensions if display is 'none'
+        if (scannerWrap) {
+            scannerWrap.style.display = 'block';
+        }
 
-        if (readerWrap) readerWrap.style.display = 'block';
-        setScanStatus('Initializing camera...', 'warn');
+        setScanStatus('Starte Kamera...', 'warn');
 
-        Quagga.init({
-            inputStream: {
-                name: "Live",
-                type: "LiveStream",
-                target: document.querySelector('#library-scanner-container'),
-                constraints: {
-                    width: 640,
-                    height: 480,
-                    facingMode: "environment"
+        // 2. Initialize Quagga with a slight delay to allow the DOM to render the block
+        setTimeout(() => {
+            Quagga.init({
+                inputStream: {
+                    name: "Live",
+                    type: "LiveStream",
+                    // This MUST match the inner div where the video should appear
+                    target: document.querySelector('.library-scan-reader'),
+                    constraints: {
+                        width: 640,
+                        height: 480,
+                        facingMode: "environment" // Prefer back camera on mobile
+                    }
                 },
-            },
-            decoder: {
-                readers: [
-                    "code_128_reader",
-                    "ean_reader",
-                    "code_39_reader",
-                    "upc_reader",
-                    "codabar_reader",
-                    "i2of5_reader"
-                ]
-            }
-        }, function(err) {
-            if (err) {
-                console.error('Scanner start failed:', err);
-                if (readerWrap) readerWrap.style.display = 'none';
-                const detail = (err && (err.message || err.name)) ? ` (${err.message || err.name})` : '';
-                setScanStatus(`Scanner konnte nicht gestartet werden${detail}`, 'error');
-                return;
-            }
+                locator: {
+                    patchSize: "medium",
+                    halfSample: true
+                },
+                decoder: {
+                    // Keep only the barcode types you actually use to improve performance
+                    readers: ["code_128_reader", "ean_reader", "code_39_reader"]
+                },
+                locate: true
+            }, function(err) {
+                if (err) {
+                    // This will finally log the actual error (e.g., NotAllowedError) if permissions fail
+                    console.error("Quagga initialization failed:", err);
+                    setScanStatus('Kamera-Fehler: ' + (err.name || err), 'error');
 
-            Quagga.start();
-            scannerRunning = true;
+                    if (scannerWrap) scannerWrap.style.display = 'none';
+                    scannerRunning = false;
+                    return;
+                }
 
-            if (!targetCallback && toggleBtn) {
-                toggleBtn.textContent = 'Scanner stoppen';
-            }
-            setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
-        });
+                Quagga.start();
+                scannerRunning = true;
+                setScanStatus('Scanner bereit.', 'ok');
+
+                if (toggleBtn) {
+                    toggleBtn.textContent = 'Scanner stoppen';
+                }
+            });
+        }, 50);
     }
 
-    function stopScanner() {
+    async function stopScanner() {
         if (!scannerRunning) return;
 
-        const readerWrap = document.getElementById('scanReaderWrap');
-        const toggleBtn = document.getElementById('toggleScannerBtn');
+        try {
+            Quagga.stop();
+        } catch (e) {
+            console.warn("Error stopping Quagga (it may not have been running):", e);
+        }
 
-        Quagga.stop();
         scannerRunning = false;
         activeScannerCallback = null;
 
-        if (readerWrap) readerWrap.style.display = 'none';
-        if (toggleBtn) toggleBtn.textContent = 'Scanner starten';
-        setScanStatus('Scanner gestoppt.', 'warn');
+        // Hide the container to free up UI space
+        const scannerWrap = document.querySelector('.library-scan-reader-wrap');
+        if (scannerWrap) {
+            scannerWrap.style.display = 'none';
+        }
+
+        const toggleBtn = document.getElementById('toggleScannerBtn');
+        if (toggleBtn) {
+            toggleBtn.textContent = 'Kamera Scanner'; // Reset button text
+        }
     }
 
     async function isStudentCardBarcode(code) {
@@ -921,38 +1190,49 @@
         // Only active when explicitly enabled
         if (!keyboardScannerEnabled) return;
 
-        // Ignore if focus is in an input/textarea/contenteditable to avoid interfering with typing
-        const active = document.activeElement;
-        if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable)) return;
-
         const now = Date.now();
 
         // If Enter/Return pressed -> finalize buffer
         if (e.key === 'Enter') {
+            e.preventDefault();
             const code = keyboardScanBuffer.trim();
             keyboardScanBuffer = '';
             keyboardLastKeyAt = 0;
             if (!code) return;
 
-            // Process exactly like a camera scan - centralized logic handles the rest!
-            handleScanSuccess(code);
+            // Scanner keystrokes must not be submitted into the focused form field.
+            processPhysicalScan(code);
             return;
         }
 
-        // Only accept common printable characters; ignore modifier keys
-        if (e.key.length === 1) {
+        // Physical scanners in this workflow emit numeric codes only.
+        if (e.key.length === 1 && /\d/.test(e.key)) {
             // If time gap too big, start new buffer
             if (keyboardLastKeyAt && (now - keyboardLastKeyAt) > KEYBOARD_SCAN_INTERCHAR_MS) {
                 keyboardScanBuffer = '';
             }
             keyboardScanBuffer += e.key;
             keyboardLastKeyAt = now;
-            // Prevent default so scanner input doesn't accidentally move focus or trigger shortcuts
+            // Prevent default so scanner input is captured even while an input has focus.
             e.preventDefault();
         }
     }
 
-    function handleScanSuccess(decodedText) {
+    async function processPhysicalScan(code) {
+        physicalScanQueue.push(code);
+        if (keyboardScanProcessing) return;
+
+        keyboardScanProcessing = true;
+        try {
+            while (physicalScanQueue.length > 0) {
+                await handleScanSuccess(physicalScanQueue.shift());
+            }
+        } finally {
+            keyboardScanProcessing = false;
+        }
+    }
+
+    async function handleScanSuccess(decodedText) {
         const scannedCode = typeof normalizeScannedCode === "function" ? normalizeScannedCode(decodedText) : decodedText;
         if (!scannedCode) return;
 
@@ -968,26 +1248,27 @@
 
         // 1. Modus: Nur Rückgabe
         if (mode === 'return_only') {
-            returnByCode(scannedCode);
+            await returnByCode(scannedCode);
             return;
         }
 
         // 2. Modus: Nur Ausweis
         if (mode === 'card_only') {
             setActiveStudentCard(scannedCode);
-            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
+            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Ausweis scannen.`, 'ok');
+            showSmallConfirm(`Ausweis erkannt: ${activeStudentCardId}. Sie können den nächsten scannen.`, 'ok');
             return;
         }
 
         // 3. Modus: Schnellmodus (1x Ausweis, 1x Buch)
         if (mode === 'quick_toggle') {
-            processQuickToggleScan(scannedCode);
+            await processQuickToggleScan(scannedCode);
             return;
         }
 
         // 4. Modus: Dauermodus (1x Ausweis, Nx Bücher)
         if (mode === 'continuous') {
-            processContinuousScan(scannedCode);
+            await processContinuousScan(scannedCode);
             return;
         }
     }
@@ -1074,7 +1355,8 @@
         // 2. Wenn kein Ausweis gesetzt ist, wird der Code als Ausweis interpretiert
         if (!activeStudentCardId) {
             setActiveStudentCard(scannedCode);
-            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
+            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Mediencode scannen.`, 'ok');
+            showSmallConfirm(`Ausweis erkannt: ${activeStudentCardId}. Bitte jetzt den nächsten Mediencode scannen.`, 'ok');
             return;
         }
 
@@ -1169,31 +1451,39 @@
     // =========================================================================
     // 4. UI INTERACTIONS & UTILITIES
     // =========================================================================
-    function borrowItem(itemId) {
+    async function borrowItem(itemId) {
         const selectedItem = (libraryItems || []).find(item => item._id === itemId);
         if (selectedItem && selectedItem.LibraryDisplayStatus === 'damaged') {
-            alert('Dieses Medium ist als defekt/zerstört markiert und kann nicht ausgeliehen werden.');
+            await customAlert('Dieses Medium ist als defekt/zerstört markiert und kann nicht ausgeliehen werden.');
             return;
         }
 
         const defaultCardId = activeStudentCardId || '';
-        const cardId = (window.prompt('Bitte Bibliotheksausweis-ID eingeben:', defaultCardId) || '').trim().toUpperCase();
+        const promptCardResult = await customPrompt('Bitte Bibliotheksausweis-ID eingeben:', defaultCardId);
+        if (promptCardResult === null) return;
+
+        const cardId = promptCardResult.trim().toUpperCase();
         if (!cardId) {
-            alert('Ausleihe abgebrochen: Für Bibliotheksmedien ist eine gültige Bibliotheksausweis-ID erforderlich.');
+            await customAlert('Ausleihe abgebrochen: Für Bibliotheksmedien ist eine gültige Bibliotheksausweis-ID erforderlich.');
             return;
         }
 
         setActiveStudentCard(cardId);
 
-        const durationInput = (window.prompt('Ausleihdauer in Tagen (optional):') || '').trim();
+        const promptDurationResult = await customPrompt('Ausleihdauer in Tagen (optional):');
+        if (promptDurationResult === null) return;
+        const durationInput = promptDurationResult.trim();
+
         const maxAvailable = Math.max(1, parseInt(selectedItem?.AvailableGroupedCount || selectedItem?.Quantity || 1, 10) || 1);
-        const countPrompt = (window.prompt(`Anzahl ausleihen? (Standard: 1, verfügbar: ${maxAvailable})`, '1') || '').trim();
-        let borrowCount = parseInt(countPrompt || '1', 10);
+        const countPromptResult = await customPrompt(`Anzahl ausleihen? (Standard: 1, verfügbar: ${maxAvailable})`, '1');
+        if (countPromptResult === null) return;
+
+        let borrowCount = parseInt(countPromptResult.trim() || '1', 10);
         if (!Number.isFinite(borrowCount) || borrowCount < 1) {
             borrowCount = 1;
         }
         if (borrowCount > maxAvailable) {
-            alert(`Es sind nur ${maxAvailable} Exemplar(e) verfügbar.`);
+            await customAlert(`Es sind nur ${maxAvailable} Exemplar(e) verfügbar.`);
             return;
         }
 
@@ -1285,69 +1575,75 @@
         const detailContent = document.getElementById('detailContent');
         const detailModal = document.getElementById('detailModal');
 
+        // Lade-Status anzeigen und Modal öffnen
         detailContent.innerHTML = '<p>Lade Details...</p>';
         detailModal.style.display = 'flex';
 
-        const item = libraryItems.find(i => i._id === itemId);
-        let mediaHtml = '';
-
-        // Robuste Prüfung: Wir testen gängige Benennungen aus deinem Backend
-        const imageArray = item.Images || item.Bilder || item.images;
-
-        if (item && Array.isArray(imageArray) && imageArray.length > 0) {
-            const imagesHtml = imageArray.map((image, index) => {
-
-                // Dein neuer Code für die exakte Routen-Generierung
-                const imageSrc = image.startsWith('/uploads/') || image.startsWith('http') ?
-                    image :
-                    `{{ url_for('uploaded_file', filename='') }}${image}`;
-
-                const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index];
-                const isVideo = isVideoFile(image);
-
-                if (isVideo) {
-                    const videoSrc = thumbnailInfo && thumbnailInfo.has_thumbnail
-                        ? thumbnailInfo.thumbnail_url
-                        : imageSrc;
-
-                    if (thumbnailInfo && thumbnailInfo.has_thumbnail) {
-                        return `
-                    <div class="video-container" style="position: relative; width: 120px; height: 120px; display: inline-block; margin-right: 15px; margin-bottom: 15px;">
-                        <img src="${videoSrc}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #ddd;">
-                        <div class="video-preview-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(0,0,0,0.6); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px;">
-                            ▶
-                        </div>
-                    </div>`;
-                    } else {
-                        return `<div style="width: 120px; height: 120px; background: #333; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 15px; margin-bottom: 15px;">VIDEO</div>`;
-                    }
-                } else {
-                    const imageSrcFinal = thumbnailInfo && thumbnailInfo.has_thumbnail
-                        ? thumbnailInfo.thumbnail_url
-                        : imageSrc;
-
-                    return `<img src="${imageSrcFinal}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; margin-right: 15px; margin-bottom: 15px;">`;
-                }
-            }).join('');
-
-            mediaHtml = `<div class="detail-gallery-container" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap;">${imagesHtml}</div>`;
-        }
-
+        // Daten vom Backend-API-Endpoint abrufen
         fetch(`/api/item_detail/${itemId}`)
             .then(response => {
-                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-                return response.text();
+                if (!response.ok) {
+                    throw new Error('Fehler beim Laden der Artikeldetails');
+                }
+                return response.json();
             })
-            .then(html => {
-                detailContent.innerHTML = mediaHtml + DOMPurify.sanitize(html);
+            .then(data => {
+                detailContent.innerHTML = data.html;
+
+                const imageArray = data.images || [];
+                const thumbnailInfoMap = data.thumbnailInfo || [];
+
+                if (Array.isArray(imageArray) && imageArray.length > 0) {
+                    const imagesHtml = imageArray.map((image, index) => {
+                        const isVideo = typeof isVideoFile === 'function' ? isVideoFile(image) : /\.(mp4|webm|ogg|mov)$/i.test(image);
+                        const thumbnailInfo = thumbnailInfoMap[index];
+
+                        if (isVideo) {
+                            const videoSrc = image.startsWith('/uploads/') || image.startsWith('http')
+                                ? image
+                                : `/uploads/${image}`;
+
+                            return `
+                        <div class="item-image-wrapper" style="width: 100%; height: auto;">
+                            <video src="${videoSrc}" class="item-image ${index === 0 ? 'active-image' : ''}" id="modal-image-${index}" controls preload="metadata" style="width: 100%; height: auto; max-height: 300px;"></video>
+                        </div>`;
+                        } else {
+                            const imageSrc = thumbnailInfo && thumbnailInfo.has_preview
+                                ? thumbnailInfo.preview_url
+                                : (image.startsWith('/uploads/') || image.startsWith('http')
+                                    ? image
+                                    : `/uploads/${image}`);
+
+                            return `
+                        <div class="item-image-wrapper">
+                            <img src="${imageSrc}"
+                                 alt="Buchcover / Bild"
+                                 class="item-image ${index === 0 ? 'active-image' : ''}"
+                                 id="modal-image-${index}"
+                                 loading="lazy"
+                                 onload="console.log('Bild geladen:', '${imageSrc}')"
+                                 onerror="console.error('FEHLER beim Laden des Bildes im DOM:', '${imageSrc}')">
+                        </div>`;
+                        }
+                    }).join('');
+
+                    const mediaHtml = `<div class="detail-gallery-container">${imagesHtml}</div>`;
+
+                    const h2Tag = detailContent.querySelector('h2');
+                    if (h2Tag) {
+                        h2Tag.insertAdjacentHTML('afterend', mediaHtml);
+                    } else {
+                        detailContent.insertAdjacentHTML('afterbegin', mediaHtml);
+                    }
+                }
             })
-            .catch(err => {
-                console.error('Error loading detail:', err);
-                detailContent.innerHTML = '<p style="color: red;">Entschuldigung, die Details konnten nicht geladen werden.</p>';
+            .catch(error => {
+                console.error('Error fetching item detail:', error);
+                detailContent.innerHTML = '<p style="color: red;">Fehler beim Laden der Artikeldetails.</p>';
             });
     }
 
-    // Closes the modal via the 'x' button
+    // Schließt das Modal über den 'x'-Button
     function closeDetailModal() {
         document.getElementById('detailModal').style.display = 'none';
     }

Web/templates/mahnungen_admin.html

@@ -0,0 +1,312 @@
+{% 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="container-fluid py-4">
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card shadow-sm">
+                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0"><i class="bi bi-exclamation-triangle-fill me-2"></i>Mahnungs- und Ausleihverwaltung</h5>
+                    <span class="badge bg-light text-dark">Übersicht überfälliger Medien</span>
+                </div>
+                <div class="card-body">
+                    {% if overdue_items and overdue_items|length > 0 %}
+                    <div class="table-responsive">
+                        <table class="table table-hover align-middle">
+                            <thead class="table-light">
+                                <tr>
+                                    <th>Schüler / Ausweis</th>
+                                    <th>Klasse</th>
+                                    <th>Medium</th>
+                                    <th>Fälligkeitsdatum</th>
+                                    <th>Überfällig seit</th>
+                                    <th>Mahnstufe</th>
+                                    <th class="text-end">Aktionen</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for item in overdue_items %}
+                                <tr>
+                                    <td>
+                                        <strong>{{ item.schueler_name }}</strong><br>
+                                        <small class="text-muted">{{ item.ausweis_id }}</small>
+                                    </td>
+                                    <td>{{ item.klasse }}</td>
+                                    <td>
+                                        {{ item.item_name }}<br>
+                                        <small class="text-muted">Code: {{ item.item_code or '—' }}</small>
+                                    </td>
+                                    <td>{{ item.due_date }}</td>
+                                    <td>
+                                        <span class="badge bg-danger">{{ item.days_overdue }} Tage</span>
+                                    </td>
+                                    <td>
+                                        {% if item.mahnstufe == 2 %}
+                                            <span class="badge bg-dark text-danger">Stufe 2 (Gesperrt)</span>
+                                        {% elif item.mahnstufe == 1 %}
+                                            <span class="badge bg-warning text-dark">Stufe 1</span>
+                                        {% else %}
+                                            <span class="badge bg-secondary">Stufe 0</span>
+                                        {% endif %}
+                                    </td>
+                                    <td class="text-end">
+                                        <div class="btn-group" role="group">
+                                            {% if mail_service_enabled %}
+                                            <button type="button" class="btn btn-sm btn-outline-primary"
+                                                    onclick="openEmailModal('{{ item.id }}', '{{ item.schueler_name }}', '{{ item.email }}')">
+                                                <i class="bi bi-envelope"></i> E-Mail
+                                            </button>
+                                            {% endif %}
+                                            <button type="button" class="btn btn-sm btn-outline-warning text-dark"
+                                                    onclick="resetMahnung('{{ item.id }}', '{{ item.schueler_name }}')">
+                                                <i class="bi bi-arrow-counterclockwise"></i> Zurücksetzen
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                    {% else %}
+                    <div class="text-center py-5">
+                        <i class="bi bi-check-circle-fill text-success fs-1"></i>
+                        <p class="text-muted mt-2">Aktuell gibt es keine überfälligen Mahnungen.</p>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- E-Mail Modal -->
+<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="emailModalLabel">Mahnungs-E-Mail senden</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
+            </div>
+            <div class="modal-body">
+                <form id="emailForm">
+                    <input type="hidden" id="modalLoanId">
+                    <div class="mb-3">
+                        <label for="modalStudentName" class="form-label">Empfänger</label>
+                        <input type="text" class="form-control" id="modalStudentName" readonly>
+                    </div>
+                    <div class="mb-3">
+                        <label for="modalEmail" class="form-label">E-Mail-Adresse</label>
+                        <input type="email" class="form-control" id="modalEmail" placeholder="E-Mail-Adresse eingeben...">
+                    </div>
+                    <div class="mb-3">
+                        <label for="modalMessage" class="form-label">Nachricht</label>
+                        <textarea class="form-control" id="modalMessage" rows="4" placeholder="Optionaler Text..."></textarea>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                <button type="button" class="btn btn-primary" onclick="submitEmailMahnung()">E-Mail senden</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function openEmailModal(loanId, studentName, studentEmail) {
+    document.getElementById('modalLoanId').value = loanId;
+    document.getElementById('modalStudentName').value = studentName;
+    document.getElementById('modalEmail').value = studentEmail || '';
+    document.getElementById('modalMessage').value = '';
+
+    var myModal = new bootstrap.Modal(document.getElementById('emailModal'));
+    myModal.show();
+}
+
+function submitEmailMahnung() {
+    const loanId = document.getElementById('modalLoanId').value;
+    const email = document.getElementById('modalEmail').value;
+    const message = document.getElementById('modalMessage').value;
+
+    if (!email) {
+        alert('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
+        return;
+    }
+
+    fetch('/mahnungen_send_email', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ loan_id: loanId, email: email, message: message })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            alert('E-Mail erfolgreich gesendet!');
+            var modalEl = document.getElementById('emailModal');
+            var modal = bootstrap.Modal.getInstance(modalEl);
+            modal.hide();
+        } else {
+            alert('Fehler: ' + data.message);
+        }
+    })
+    .catch(error => {
+        alert('Fehler beim Senden der Anfrage.');
+        console.error(error);
+    });
+}
+
+function resetMahnung(loanId, studentName) {
+    if (!confirm('Möchten Sie die Mahnung für "' + studentName + '" wirklich zurücksetzen?\n\nDadurch wird die Mahnstufe auf 0 gesetzt, die Frist um 14 Tage verlängert und der Schülerausweis entsperrt.')) {
+        return;
+    }
+
+    fetch('/mahnungen_reset', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ loan_id: loanId })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            alert(data.message);
+            location.reload(); // Seite neu laden, um die aktualisierte Ansicht zu sehen
+        } else {
+            alert('Fehler: ' + data.message);
+        }
+    })
+    .catch(error => {
+        alert('Fehler beim Senden der Anfrage.');
+        console.error(error);
+    });
+}
+</script>
+{% endblock %}

Web/templates/main_admin.html

@@ -2343,7 +2343,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div class="filter-container">
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Unterrichtsfach:</label>
+                    <label>{{ filter_names.get('2', 'Fach') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter1-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(1)">Clear</button>
                 </div>
@@ -2357,7 +2357,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Jahrgangsstufe:</label>
+                    <label>{{ filter_names.get('1', 'Klassenstufe') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter2-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(2)">Clear</button>
                 </div>
@@ -2371,7 +2371,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Schlagwort:</label>
+                    <label>{{ filter_names.get('3', 'Schlagwort') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter3-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(3)">Clear</button>
                 </div>
@@ -2420,9 +2420,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div id="table-view-header" class="table-view-header" aria-hidden="true">
             <span>Name</span>
             <span>Ort</span>
-            <span>Unterrichtsfach</span>
-            <span>Jahrgangsstufe</span>
-            <span>Schlagwort</span>
+            <span>{{ filter_names.get('2', 'Fach') }}</span>
+            <span>{{ filter_names.get('1', 'Jahrgangsstufe') }}</span>
+            <span>{{ filter_names.get('3', 'Schlagwort') }}</span>
             <span>Barcode</span>
             <span>Anzahl</span>
         </div>
@@ -3418,14 +3418,24 @@ document.addEventListener('DOMContentLoaded', ()=>{
                                     `<form method="POST" action="{{ url_for('ausleihen', id='') }}${item._id}">
                                         ${isGroupedItem ? `
                                         <div class="grouped-borrow-controls" style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; align-items:center;">
-                                            <label style="font-size:0.85rem; margin:0;">Anzahl:</label>
-                                            <input type="number" name="exemplare_count" min="1" max="${availableGroupedCount}" value="1" style="width:74px; padding:4px;">
-                                            <label style="font-size:0.85rem; margin:0;">oder Code:</label>
-                                            <select id="specific-item-card-${item._id}" name="specific_item_id" style="max-width:190px; padding:4px;">
-                                                <option value="">Automatisch wählen</option>
-                                                ${groupedAvailableUnits.map(unit => `<option value="${unit.id}">${unit.code}</option>`).join('')}
-                                            </select>
-                                        </div>` : ''}
+    <label style="font-size:0.85rem; margin:0;">Anzahl:</label>
+    <input type="number"
+           name="exemplare_count"
+           min="1"
+           max="${availableGroupedCount}"
+           value="1"
+           style="width:74px; padding:4px;"
+           oninput="if(this.value){ this.form.querySelector('[name=specific_item_id]').value = ''; }">
+
+    <label style="font-size:0.85rem; margin:0;">oder Code:</label>
+    <select id="specific-item-card-${item._id}"
+            name="specific_item_id"
+            style="max-width:190px; padding:4px;"
+            onchange="if(this.value !== ''){ this.form.querySelector('[name=exemplare_count]').value = '1'; }">
+        <option value="">Automatisch wählen</option>
+        ${groupedAvailableUnits.map(unit => `<option value="${unit.id}">${unit.code}</option>`).join('')}
+    </select>
+</div>` : ''}
                                         <button class="ausleihen" type="submit">Ausleihen</button>
                                     </form>` 
                                 : isBorrowedByMe ?

Web/templates/manage_filters.html

@@ -1,135 +1,173 @@
-<!--
-   Copyright 2025-2026 AIIrondev
-
-   Licensed under the Inventarsystem EULA (Endbenutzer-Lizenzvertrag).
-   See Legal/LICENSE for the full license text.
-   Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
-   For commercial licensing inquiries: https://github.com/AIIrondev
--->
 {% extends "base.html" %}
 
 {% block title %}Filter verwalten{% endblock %}
 
 {% block content %}
-<div class="container">
-    <h1 class="mb-4">Filterwerte verwalten</h1>
-    
-    <div class="row">
-        <!-- Filter 1 -->
-        <div class="col-md-4">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h2 class="card-title h5 mb-0">{{ filter_names.get('1', 'Jahrgang') }} (Filter 1)</h2>
+<div class="container py-4">
+    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pb-3 mb-4 border-bottom gap-3">
+        <div>
+            <h1 class="h2 fw-bold mb-1">Filterwerte verwalten</h1>
+            <p class="text-muted mb-0">Verwalten und Bearbeiten Sie die Zuordnungswerte für das Inventar.</p>
+        </div>
+        <div>
+            <a href="{{ url_for('home_admin') }}" class="btn btn-outline-secondary d-inline-flex align-items-center">
+                <i class="bi bi-arrow-left me-2"></i> Zurück zur Admin-Übersicht
+            </a>
+        </div>
+    </div>
+
+    <div class="row g-4">
+        <div class="col-lg-6">
+            <div class="card shadow-sm border-0 h-100 rounded-3">
+                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
+                    <h2 class="card-title h5 mb-0 fw-semibold text-primary">
+                        <i class="bi bi-funnel me-2"></i>{{ filter_names.get('1', 'Jahrgangsstufe') }}
+                    </h2>
+                    <span class="badge bg-primary-subtle text-primary rounded-pill">Filter 1</span>
                 </div>
-                <div class="card-body">
+                <div class="card-body p-4">
                     <form method="POST" action="{{ url_for('add_filter_value', filter_num=1) }}" class="mb-4">
+                        <label class="form-label fw-medium text-secondary">Neuen Wert hinzufügen</label>
                         <div class="input-group">
-                            <input type="text" name="value" class="form-control" placeholder="Neuer Wert..." required>
-                            <button type="submit" class="btn btn-primary">Hinzufügen</button>
+                            <input type="text" name="value" class="form-control" placeholder="Wert eingeben..." required>
+                            <button type="submit" class="btn btn-primary d-inline-flex align-items-center">
+                                <i class="bi bi-plus-lg me-1"></i> Hinzufügen
+                            </button>
                         </div>
                     </form>
-                    
-                    <h5 class="mb-3">Vorhandene Werte</h5>
+
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <h3 class="h6 text-uppercase text-muted fw-bold mb-0">Vorhandene Werte</h3>
+                        <span class="badge bg-secondary rounded-pill">{{ filter1_values|length if filter1_values else 0 }}</span>
+                    </div>
+
                     {% if filter1_values %}
-                    <div class="list-group">
+                    <div class="list-group list-group-flush border rounded-3 overflow-hidden">
                         {% for value in filter1_values %}
-                        <div class="list-group-item">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>{{ value }}</span>
-                                <div>
-                                    <button type="button" class="btn btn-sm btn-secondary me-1" onclick="toggleEdit('edit-1-{{ loop.index }}')">Bearbeiten</button>
+                        <div class="list-group-item p-3">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <span class="fw-medium">{{ value }}</span>
+                                <div class="btn-group btn-group-sm">
+                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleEdit('edit-1-{{ loop.index }}')">
+                                        <i class="bi bi-pencil me-1"></i> Bearbeiten
+                                    </button>
                                     <form method="POST" action="{{ url_for('remove_filter_value', filter_num=1, value=value) }}" class="d-inline">
-                                        <button type="submit" class="btn btn-sm btn-danger" 
+                                        <button type="submit" class="btn btn-outline-danger" 
                                                 onclick="return confirm('Sind Sie sicher, dass Sie den Wert \"' + '{{ value }}'.replace(/'/g, '\\\'') + '\" löschen möchten?');">
-                                            Entfernen
+                                            <i class="bi bi-trash me-1"></i> Entfernen
                                         </button>
                                     </form>
                                 </div>
                             </div>
-                            <form id="edit-1-{{ loop.index }}" method="POST" action="{{ url_for('edit_filter_value', filter_num=1, old_value=value) }}" style="display: none;" class="mt-2">
+                            
+                            <form id="edit-1-{{ loop.index }}" method="POST" action="{{ url_for('edit_filter_value', filter_num=1, old_value=value) }}" style="display: none;" class="mt-3 pt-3 border-top">
                                 <div class="input-group input-group-sm">
                                     <input type="text" name="new_value" class="form-control" value="{{ value }}" required>
-                                    <button type="submit" class="btn btn-primary" onclick="return confirm('Tipp: Das Ändern des Namens aktualisiert auch alle Einträge in der Datenbank, die diesen Filter verwenden. Fortfahren?');">Speichern</button>
-                                    <button type="button" class="btn btn-secondary" onclick="toggleEdit('edit-1-{{ loop.index }}')">Abbrechen</button>
+                                    <button type="submit" class="btn btn-success" onclick="return confirm('Tipp: Das Ändern des Namens aktualisiert auch alle Einträge in der Datenbank, die diesen Filter verwenden. Fortfahren?');">
+                                        <i class="bi bi-check-lg me-1"></i> Speichern
+                                    </button>
+                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleEdit('edit-1-{{ loop.index }}')">
+                                        Abbrechen
+                                    </button>
                                 </div>
                             </form>
                         </div>
                         {% endfor %}
                     </div>
                     {% else %}
-                    <div class="alert alert-info">Keine Werte definiert.</div>
+                    <div class="alert alert-light border text-center text-muted mb-0">
+                        <i class="bi bi-info-circle me-1"></i> Keine Werte definiert.
+                    </div>
                     {% endif %}
                 </div>
             </div>
         </div>
-        
-        <!-- Filter 2 -->
-        <div class="col-md-4">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h2 class="card-title h5 mb-0">{{ filter_names.get('2', 'Fach') }} (Filter 2)</h2>
+
+        <div class="col-lg-6">
+            <div class="card shadow-sm border-0 h-100 rounded-3">
+                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
+                    <h2 class="card-title h5 mb-0 fw-semibold text-primary">
+                        <i class="bi bi-funnel me-2"></i>{{ filter_names.get('2', 'Fachgebiet') }}
+                    </h2>
+                    <span class="badge bg-primary-subtle text-primary rounded-pill">Filter 2</span>
                 </div>
-                <div class="card-body">
+                <div class="card-body p-4">
                     <form method="POST" action="{{ url_for('add_filter_value', filter_num=2) }}" class="mb-4">
+                        <label class="form-label fw-medium text-secondary">Neuen Wert hinzufügen</label>
                         <div class="input-group">
-                            <input type="text" name="value" class="form-control" placeholder="Neuer Wert..." required>
-                            <button type="submit" class="btn btn-primary">Hinzufügen</button>
+                            <input type="text" name="value" class="form-control" placeholder="Wert eingeben..." required>
+                            <button type="submit" class="btn btn-primary d-inline-flex align-items-center">
+                                <i class="bi bi-plus-lg me-1"></i> Hinzufügen
+                            </button>
                         </div>
                     </form>
-                    
-                    <h5 class="mb-3">Vorhandene Werte</h5>
+
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <h3 class="h6 text-uppercase text-muted fw-bold mb-0">Vorhandene Werte</h3>
+                        <span class="badge bg-secondary rounded-pill">{{ filter2_values|length if filter2_values else 0 }}</span>
+                    </div>
+
                     {% if filter2_values %}
-                    <div class="list-group">
+                    <div class="list-group list-group-flush border rounded-3 overflow-hidden">
                         {% for value in filter2_values %}
-                        <div class="list-group-item">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>{{ value }}</span>
-                                <div>
-                                    <button type="button" class="btn btn-sm btn-secondary me-1" onclick="toggleEdit('edit-2-{{ loop.index }}')">Bearbeiten</button>
+                        <div class="list-group-item p-3">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <span class="fw-medium">{{ value }}</span>
+                                <div class="btn-group btn-group-sm">
+                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleEdit('edit-2-{{ loop.index }}')">
+                                        <i class="bi bi-pencil me-1"></i> Bearbeiten
+                                    </button>
                                     <form method="POST" action="{{ url_for('remove_filter_value', filter_num=2, value=value) }}" class="d-inline">
-                                        <button type="submit" class="btn btn-sm btn-danger"
+                                        <button type="submit" class="btn btn-outline-danger"
                                                 onclick="return confirm('Sind Sie sicher, dass Sie den Wert \"' + '{{ value }}'.replace(/'/g, '\\\'') + '\" löschen möchten?');">
-                                            Entfernen
+                                            <i class="bi bi-trash me-1"></i> Entfernen
                                         </button>
                                     </form>
                                 </div>
                             </div>
-                            <form id="edit-2-{{ loop.index }}" method="POST" action="{{ url_for('edit_filter_value', filter_num=2, old_value=value) }}" style="display: none;" class="mt-2">
+
+                            <form id="edit-2-{{ loop.index }}" method="POST" action="{{ url_for('edit_filter_value', filter_num=2, old_value=value) }}" style="display: none;" class="mt-3 pt-3 border-top">
                                 <div class="input-group input-group-sm">
                                     <input type="text" name="new_value" class="form-control" value="{{ value }}" required>
-                                    <button type="submit" class="btn btn-primary" onclick="return confirm('Tipp: Das Ändern des Namens aktualisiert auch alle Einträge in der Datenbank, die diesen Filter verwenden. Fortfahren?');">Speichern</button>
-                                    <button type="button" class="btn btn-secondary" onclick="toggleEdit('edit-2-{{ loop.index }}')">Abbrechen</button>
+                                    <button type="submit" class="btn btn-success" onclick="return confirm('Tipp: Das Ändern des Namens aktualisiert auch alle Einträge in der Datenbank, die diesen Filter verwenden. Fortfahren?');">
+                                        <i class="bi bi-check-lg me-1"></i> Speichern
+                                    </button>
+                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleEdit('edit-2-{{ loop.index }}')">
+                                        Abbrechen
+                                    </button>
                                 </div>
                             </form>
                         </div>
                         {% endfor %}
                     </div>
                     {% else %}
-                    <div class="alert alert-info">Keine Werte definiert.</div>
+                    <div class="alert alert-light border text-center text-muted mb-0">
+                        <i class="bi bi-info-circle me-1"></i> Keine Werte definiert.
+                    </div>
                     {% endif %}
                 </div>
             </div>
         </div>
     </div>
-    
-    <div class="alert alert-warning">
-        <strong>Hinweis:</strong> Beim Entfernen eines Filterwertes wird dieser nicht aus bestehenden Objekten entfernt.
-        Bereits verwendete Werte bleiben in den Objekten erhalten.
-    </div>
-    
-    <div class="mt-4">
-        <a href="{{ url_for('home_admin') }}" class="btn btn-secondary">Zurück zur Admin-Übersicht</a>
+
+    <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center mt-4 rounded-3" role="alert">
+        <i class="bi bi-exclamation-triangle-fill fs-4 me-3 text-warning"></i>
+        <div>
+            <strong>Hinweis:</strong> Beim Entfernen eines Filterwertes wird dieser nicht automatisch aus bestehenden Objekten gelöscht. Bereits zugewiesene Werte bleiben in bestehenden Datensätzen erhalten.
+        </div>
     </div>
 </div>
 
 <script>
 function toggleEdit(id) {
     const el = document.getElementById(id);
-    if (el.style.display === 'none') {
+    if (el.style.display === 'none' || el.style.display === '') {
         el.style.display = 'block';
+        const input = el.querySelector('input[type="text"]');
+        if (input) input.focus();
     } else {
         el.style.display = 'none';
     }
 }
 </script>
-{% endblock %}
+{% endblock %}

Web/templates/student_cards_admin.html

@@ -18,14 +18,58 @@
         align-items: center;
         margin-bottom: 20px;
         flex-wrap: wrap;
-        gap: 10px;
+        gap: 15px;
+    }
+
+    /* Neu strukturiertes Layout für Formular & Import */
+    .dashboard-grid {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        gap: 20px;
+        margin-bottom: 30px;
     }
 
     .student-card-form {
         background: var(--ui-bg);
         padding: 20px;
         border-radius: 8px;
-        margin-bottom: 30px;
+    }
+
+    .import-card {
+        border: 1px solid #dbe4ee;
+        border-radius: 8px;
+        padding: 20px;
+        background: #f8fbff;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .rollover-box {
+        background: #fff3cd;
+        border: 1px solid #ffeeba;
+        border-radius: 6px;
+        padding: 10px 12px;
+        margin-top: 4px;
+    }
+
+    .rollover-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        font-size: 13px;
+        color: #856404;
+        font-weight: 700;
+        margin: 0;
+    }
+
+    .rollover-hint {
+        display: block;
+        margin-top: 4px;
+        font-size: 11px;
+        color: #856404;
+        line-height: 1.3;
     }
 
     .form-row {
@@ -35,6 +79,10 @@
         margin-bottom: 15px;
     }
 
+    .form-row.full-width {
+        grid-template-columns: 1fr;
+    }
+
     .form-group {
         display: flex;
         flex-direction: column;
@@ -47,7 +95,8 @@
     }
 
     .form-group input,
-    .form-group select {
+    .form-group select,
+    .form-group textarea {
         padding: 10px;
         border: 1px solid #ddd;
         border-radius: 4px;
@@ -55,7 +104,8 @@
     }
 
     .form-group input:focus,
-    .form-group select:focus {
+    .form-group select:focus,
+    .form-group textarea:focus {
         outline: none;
         border-color: #007bff;
         box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
@@ -65,14 +115,16 @@
         display: flex;
         gap: 10px;
         justify-content: flex-end;
+        margin-top: 10px;
     }
 
-    .form-actions button {
+    .form-actions button, .form-actions a {
         padding: 10px 20px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-weight: 600;
+        text-decoration: none;
     }
 
     .btn-save {
@@ -126,15 +178,18 @@
     .card-actions {
         display: flex;
         gap: 8px;
+        align-items: center;
     }
 
-    .btn-edit, .btn-delete {
+    .btn-edit, .btn-delete, .btn-export {
         padding: 6px 12px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-size: 13px;
         font-weight: 600;
+        text-decoration: none;
+        display: inline-block;
     }
 
     .btn-edit {
@@ -164,9 +219,6 @@
         font-weight: 600;
         text-decoration: none;
         display: inline-block;
-    }
-
-    .btn-print {
         background: #17a2b8;
         color: white;
     }
@@ -188,6 +240,7 @@
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
+        align-items: center;
     }
 
     .empty-state {
@@ -201,6 +254,12 @@
         margin: 10px 0;
     }
 
+    @media (max-width: 992px) {
+        .dashboard-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+
     @media (max-width: 768px) {
         .form-row {
             grid-template-columns: 1fr;
@@ -222,14 +281,16 @@
 
         .card-actions {
             flex-direction: column;
+            align-items: stretch;
         }
     }
 </style>
 
 <div class="container">
+    <!-- Header mit Aktionen -->
     <div class="student-card-header">
         <div>
-            <h1>📚 Bibliotheksausweise (Bibliothek)</h1>
+            <h1 style="margin: 0;">📚 Bibliotheksausweise</h1>
         </div>
         <div class="export-buttons">
             <form method="GET" action="{{ url_for('student_card_class_barcode_download') }}" style="display: inline-flex; gap: 5px; align-items: center; background: white; padding: 2px; border-radius: 4px; border: 1px solid #ddd;">
@@ -239,7 +300,7 @@
                         <option value="{{ cls }}">{{ cls }}</option>
                     {% endfor %}
                 </select>
-                <button type="submit" class="btn-print" style="background: #17a2b8; padding: 8px 12px; margin: 0;">📤 PDF</button>
+                <button type="submit" class="btn-print" style="padding: 8px 12px; margin: 0;">📤 PDF</button>
             </form>
 
             <a href="{{ url_for('student_card_barcode_download') }}" class="btn-print" style="background: #28a745;">📥 Alle Ausweise (PDF)</a>
@@ -247,81 +308,118 @@
         </div>
     </div>
 
-    <div style="border:1px solid #dbe4ee; border-radius:8px; padding:14px; margin-bottom:16px; background:#f8fbff;">
-        <h3 style="margin:0 0 8px 0;">Excel-Import Bibliotheksausweise</h3>
-        <p style="margin:0 0 10px 0; color:#555;">Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch, zum Beispiel aus <strong>ASV (Amtliche Schuldaten)</strong>. Erkannt werden automatisch Spalten wie <strong>Name</strong>, <strong>Klasse</strong>, <strong>Ausweis-ID</strong>, <strong>Notizen</strong> und <strong>Standard-Ausleihdauer</strong>. Fehlt die Ausweis-ID, wird sie automatisch aus Name und Klasse erzeugt.</p>
-        <form method="POST" action="{{ url_for('upload_student_cards_excel') }}" enctype="multipart/form-data" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
-            <input type="file" name="student_cards_excel" accept=".xlsx,.csv" required>
-            <button type="submit" class="btn btn-secondary" name="excel_action" value="validate">Nur validieren</button>
-            <button type="submit" class="btn btn-primary" name="excel_action" value="import">Ausweise importieren</button>
-        </form>
-    </div>
+    <!-- Hauptbereich Grid: Formular + Import -->
+    <div class="dashboard-grid">
+        <!-- Add/Edit Form -->
+        <div class="student-card-form">
+            <h2 style="margin-top:0;">{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Bibliotheksausweis{% endif %}</h2>
 
-    <!-- Add/Edit Form -->
-    <div class="student-card-form">
-        <h2>{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Bibliotheksausweis{% endif %}</h2>
-        
-        <form method="POST" action="{{ url_for('student_cards_admin') }}">
-            {% if edit_mode %}
-                <input type="hidden" name="action" value="edit">
-                <input type="hidden" name="card_id" value="{{ form_data.get('card_id', '') }}">
-            {% else %}
-                <input type="hidden" name="action" value="add">
-            {% endif %}
-
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="ausweis_id">Ausweis-ID *</label>
-                    <input type="text" id="ausweis_id" name="ausweis_id" required 
-                           value="{{ form_data.get('ausweis_id', '') }}"
-                           placeholder="z.B. SIS2024001">
-                </div>
-                <div class="form-group">
-                    <label for="student_name">Schüler Name *</label>
-                    <input type="text" id="student_name" name="student_name" required
-                           value="{{ form_data.get('student_name', '') }}"
-                           placeholder="z.B. Max Mustermann">
-                </div>
-            </div>
-
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="default_borrow_days">Standard Ausleihdauer (Tage) *</label>
-                    <input type="number" id="default_borrow_days" name="default_borrow_days" 
-                           min="1" max="365" required
-                           value="{{ form_data.get('default_borrow_days', config.get('default', 14)) }}">
-                </div>
-                <div class="form-group">
-                    <label for="class_name">Klasse</label>
-                    <input type="text" id="class_name" name="class_name"
-                           value="{{ form_data.get('class_name', '') }}"
-                           placeholder="z.B. 10A">
-                </div>
-            </div>
-
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="notes">Notizen</label>
-                    <textarea id="notes" name="notes" rows="3" 
-                              placeholder="Optionale Notizen..."
-                              style="padding: 10px; border: 1px solid #ddd; border-radius: 4px;">{{ form_data.get('notes', '') }}</textarea>
-                </div>
-            </div>
-
-            <div class="form-actions">
+            <form method="POST" action="{{ url_for('student_cards_admin') }}">
                 {% if edit_mode %}
-                    <a href="{{ url_for('student_cards_admin') }}" class="btn-cancel">Abbrechen</a>
+                    <input type="hidden" name="action" value="edit">
+                    <input type="hidden" name="card_id" value="{{ form_data.get('card_id', '') }}">
+                {% else %}
+                    <input type="hidden" name="action" value="add">
                 {% endif %}
-                <button type="submit" class="btn-save">
-                    {% if edit_mode %}Speichern{% else %}Hinzufügen{% endif %}
-                </button>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="student_name">Schüler Name *</label>
+                        <input type="text" id="student_name" name="student_name" required
+                               value="{{ form_data.get('student_name', '') }}"
+                               placeholder="z.B. Max Mustermann">
+                    </div>
+                    <div class="form-group">
+                        <label for="class_name">Klasse</label>
+                        <input type="text" id="class_name" name="class_name" list="class_list"
+                               value="{{ form_data.get('class_name', '') }}"
+                               placeholder="z.B. 10A (Tippen oder Auswählen)">
+
+                        <datalist id="class_list">
+                            {% for cls in available_classes %}
+                                <option value="{{ cls }}">
+                            {% endfor %}
+                        </datalist>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="ausweis_id">Ausweis-ID</label>
+                        <input type="text" id="ausweis_id" name="ausweis_id"
+                               value="{{ form_data.get('ausweis_id', '') }}"
+                               placeholder="z.B. SIS2024001">
+                    </div>
+                    <div class="form-group">
+                        <label for="ausweis_ident">Lokales Differenzierungsmerkmal</label>
+                        <input type="text" id="ausweis_ident" name="ausweis_ident"
+                               value="{{ form_data.get('ausweis_ident', '') }}"
+                               placeholder="z.B. xw5oo123bbe">
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="default_borrow_days">Standard Ausleihdauer (Tage) *</label>
+                        <input type="number" id="default_borrow_days" name="default_borrow_days"
+                               min="1" max="365" required
+                               value="{{ form_data.get('default_borrow_days', config.get('default', 14)) }}">
+                    </div>
+                </div>
+
+                <div class="form-row full-width">
+                    <div class="form-group">
+                        <label for="notes">Notizen</label>
+                        <textarea id="notes" name="notes" rows="2"
+                                  placeholder="Optionale Notizen...">{{ form_data.get('notes', '') }}</textarea>
+                    </div>
+                </div>
+
+                <div class="form-actions">
+                    {% if edit_mode %}
+                        <a href="{{ url_for('student_cards_admin') }}" class="btn-cancel">Abbrechen</a>
+                    {% endif %}
+                    <button type="submit" class="btn-save">
+                        {% if edit_mode %}Speichern{% else %}Hinzufügen{% endif %}
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        <!-- Excel-Import mit Abgleich (Rollover-Modus) -->
+        <div class="import-card">
+            <div>
+                <h3 style="margin:0 0 8px 0;">Excel-Import</h3>
+                <p style="margin:0 0 12px 0; color:#555; font-size:13px; line-height:1.4;">
+                    Laden Sie eine <strong>.xlsx</strong>- oder <strong>.csv</strong>-Datei hoch (z. B. aus <strong>ASV</strong>). Erkannt werden Name, Nachname, Klasse, Ausweis-ID, lokales Differenzierungsmerkmal, Notizen & Ausleihdauer.
+                </p>
             </div>
-        </form>
+
+            <form method="POST" action="{{ url_for('upload_student_cards_excel') }}" enctype="multipart/form-data" style="display:flex; flex-direction:column; gap:12px;">
+                <input type="file" name="student_cards_excel" accept=".xlsx,.csv" required style="font-size:13px;">
+
+                <!-- Rollover / Abgleich Option -->
+                <div class="rollover-box">
+                    <label class="rollover-label">
+                        <input type="checkbox" name="rollover_mode" value="true">
+                        <span>Rollover-Modus (Abgleich / Destruktiv)</span>
+                    </label>
+                    <span class="rollover-hint">
+                        ⚠️ <strong>Warnung:</strong> Nicht mehr vorhandene Ausweise/Schüler werden beim Import entfernt bzw. abgeglichen.
+                    </span>
+                </div>
+
+                <div style="display:flex; gap:8px;">
+                    <button type="submit" class="btn btn-secondary" name="excel_action" value="validate" style="flex:1;">Validieren</button>
+                    <button type="submit" class="btn btn-primary" name="excel_action" value="import" style="flex:1;">Importieren</button>
+                </div>
+            </form>
+        </div>
     </div>
 
     <!-- Cards List -->
     <div>
-        <h2>Registrierte Ausweise</h2>
+        <h2 style="margin-bottom: 15px;">Registrierte Ausweise</h2>
         {% if student_cards %}
             <table class="cards-table">
                 <thead>
@@ -348,7 +446,7 @@
                                         <input type="hidden" name="edit" value="{{ card._id }}">
                                         <button type="submit" class="btn-edit">Bearbeiten</button>
                                     </form>
-                                    <a href="{{ url_for('student_card_single_barcode_download', card_id=card._id) }}" class="btn-export" style="text-decoration: none; display: inline-block;">📥 PDF</a>
+                                    <a href="{{ url_for('student_card_single_barcode_download', card_id=card._id) }}" class="btn-export">📥 PDF</a>
                                     <form method="POST" style="display: inline;" onsubmit="return confirm('Wirklich löschen?');">
                                         <input type="hidden" name="action" value="delete">
                                         <input type="hidden" name="card_id" value="{{ card._id }}">
@@ -374,5 +472,4 @@
     // All PDF exports now go through backend routes
 </script>
 
-{% endblock %}
-
+{% endblock %}

Web/templates/upload_admin.html

@@ -670,7 +670,6 @@
         <form method="POST" action="{{ url_for('upload_inventory_excel') }}" enctype="multipart/form-data" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
             <input type="file" name="inventory_excel" accept=".xlsx,.csv" required>
             <button type="button" class="btn btn-link" onclick="downloadSampleCsv('inventory')">Beispiel-CSV herunterladen</button>
-            <button type="button" class="btn btn-outline-secondary" title="Format-Hilfe" onclick="showCsvHelp('inventory')">?</button>
             <button type="submit" class="btn btn-secondary" name="excel_action" value="validate">Nur validieren</button>
             <button type="submit" class="btn btn-primary" name="excel_action" value="import">Inventar importieren</button>
         </form>
@@ -781,7 +780,7 @@
             {% else %}
             <!-- Normal Item Mode: Standard Filters -->
             <div class="filter-inputs">
-                <h3>Unterrichtsfach:</h3>
+                <h3>{{ filter_names.get('1', 'Jahrgangsstufe') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter1-1">Wert 1:</label>
@@ -813,7 +812,7 @@
                     </div>
                 </div>
                 
-                <h3>Jahrgangsstufe:</h3>
+                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter2-1">Wert 1:</label>
@@ -845,7 +844,7 @@
                     </div>
                 </div>
                 
-                <h3>Schlagwort:</h3>
+                <h3>{{ filter_names.get('3', 'Schlagwort') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter3-1">Wert 1:</label>
@@ -876,12 +875,14 @@
             </div>
 
 
-            <!-- Image upload -->
             <div class="form-group">
-                <label for="images">Bilder:</label>
+                <label>Buchcover (automatisch):</label>
+                <div id="book-cover-preview-container"></div>
+            </div>
+            <div class="form-group">
+                <label for="images"> Bilder hinzufügen:</label>
                 <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif" multiple>
                 <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF</div>
-                <!-- Add image preview area -->
                 <div class="image-preview-container" id="image-preview-container"></div>
             </div>
 
@@ -1529,22 +1530,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 => {
@@ -1562,10 +1563,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">
@@ -1600,23 +1601,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') {
@@ -1637,11 +1638,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
@@ -1653,14 +1654,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) {
@@ -1669,23 +1670,24 @@
         }, 3000);
     }
 
-    // Function to download book cover image
     function downloadBookCover(imageUrl) {
         if (!imageUrl) {
             console.log('No image URL provided');
             return;
         }
-        
-        // Show loading indicator for image download
-        const imagePreviewContainer = document.getElementById('image-preview-container');
-        if (imagePreviewContainer) {
-            const loadingDiv = document.createElement('div');
-            loadingDiv.className = 'image-loading';
-            loadingDiv.innerHTML = '<div class="loading-spinner">Buchcover wird heruntergeladen...</div>';
-            imagePreviewContainer.appendChild(loadingDiv);
+
+        const coverPreviewContainer = document.getElementById('book-cover-preview-container');
+
+        if (!coverPreviewContainer) {
+            console.error('Error: "book-cover-preview-container" not found in the DOM.');
+            return;
         }
-        
-        // Download the image via backend
+
+        const loadingDiv = document.createElement('div');
+        loadingDiv.className = 'image-loading';
+        loadingDiv.innerHTML = '<div class="loading-spinner">Buchcover wird heruntergeladen...</div>';
+        coverPreviewContainer.appendChild(loadingDiv);
+
         fetch('/download_book_cover', {
             method: 'POST',
             headers: {
@@ -1693,78 +1695,63 @@
             },
             body: JSON.stringify({ url: imageUrl })
         })
-        .then(response => response.json())
-        .then(data => {
-            // Remove loading indicator
-            const loadingDiv = imagePreviewContainer?.querySelector('.image-loading');
-            if (loadingDiv) {
-                loadingDiv.remove();
-            }
-            
-            if (data.success) {
-                // Create a preview of the downloaded image
-                const imagePreview = document.createElement('div');
-                imagePreview.className = 'book-cover-preview';
-                imagePreview.innerHTML = `
-                    <div class="preview-item">
-                        <img src="{{ url_for('uploaded_file', filename='') }}${data.filename}" 
-                             alt="Buchcover" class="book-cover-thumbnail">
-                        <p class="book-cover-caption">Buchcover automatisch heruntergeladen</p>
-                        <input type="hidden" name="book_cover_image" value="${data.filename}">
-                        <button type="button" onclick="removeBookCover(this)" 
-                                class="remove-book-cover-button">
-                            Entfernen
-                        </button>
-                    </div>
-                `;
-                
-                if (imagePreviewContainer) {
-                    imagePreviewContainer.appendChild(imagePreview);
+            .then(response => response.json())
+            .then(data => {
+                const currentLoadingDiv = coverPreviewContainer.querySelector('.image-loading');
+                if (currentLoadingDiv) {
+                    currentLoadingDiv.remove();
                 }
-                
-                console.log('Book cover downloaded successfully:', data.filename);
-            } else {
-                console.error('Failed to download book cover:', data.error);
-                // Show error message to user
-                if (imagePreviewContainer) {
-                    const errorDiv = document.createElement('div');
-                    errorDiv.className = 'error-message';
-                    errorDiv.textContent = 'Fehler beim Herunterladen des Buchcovers: ' + data.error;
-                    errorDiv.style.fontSize = '0.8em';
-                    errorDiv.style.padding = '5px';
-                    errorDiv.style.marginTop = '5px';
-                    imagePreviewContainer.appendChild(errorDiv);
-                    
-                    // Remove error message after 5 seconds
-                    setTimeout(() => errorDiv.remove(), 5000);
+
+                if (data.success) {
+                    coverPreviewContainer.innerHTML = '';
+
+                    const imagePreview = document.createElement('div');
+                    imagePreview.className = 'book-cover-preview';
+                    imagePreview.innerHTML = `
+                <div class="preview-item">
+                    <img src="/uploads/${data.filename}"
+                         alt="Buchcover" class="book-cover-thumbnail" style="max-width: 150px; border-radius: 4px;">
+                    <p class="book-cover-caption" style="font-size: 0.9em; color: #555;">Buchcover automatisch heruntergeladen</p>
+                    <input type="hidden" name="book_cover_image" value="${data.filename}">
+                    <button type="button" onclick="removeBookCover(this)"
+                            class="remove-book-cover-button btn btn-sm btn-danger">
+                        Entfernen
+                    </button>
+                </div>
+            `;
+
+                    coverPreviewContainer.appendChild(imagePreview);
+                    console.log('Book cover downloaded successfully:', data.filename);
+                } else {
+                    console.error('Failed to download book cover:', data.error);
+                    showCoverError(coverPreviewContainer, 'Fehler beim Herunterladen des Buchcovers: ' + data.error);
                 }
-            }
-        })
-        .catch(error => {
-            console.error('Error downloading book cover:', error);
-            // Remove loading indicator
-            const loadingDiv = imagePreviewContainer?.querySelector('.image-loading');
-            if (loadingDiv) {
-                loadingDiv.remove();
-            }
-            
-            // Show error message
-            if (imagePreviewContainer) {
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'error-message';
-                errorDiv.textContent = 'Netzwerkfehler beim Herunterladen des Buchcovers';
-                errorDiv.style.fontSize = '0.8em';
-                errorDiv.style.padding = '5px';
-                errorDiv.style.marginTop = '5px';
-                imagePreviewContainer.appendChild(errorDiv);
-                
-                // Remove error message after 5 seconds
-                setTimeout(() => errorDiv.remove(), 5000);
-            }
-        });
+            })
+            .catch(error => {
+                console.error('Error downloading book cover:', error);
+
+                const currentLoadingDiv = coverPreviewContainer.querySelector('.image-loading');
+                if (currentLoadingDiv) {
+                    currentLoadingDiv.remove();
+                }
+
+                showCoverError(coverPreviewContainer, 'Netzwerkfehler beim Herunterladen des Buchcovers');
+            });
     }
-    
-    // Function to remove downloaded book cover
+
+    function showCoverError(container, message) {
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'error-message';
+        errorDiv.textContent = message;
+        errorDiv.style.fontSize = '0.8em';
+        errorDiv.style.color = 'red';
+        errorDiv.style.padding = '5px';
+        errorDiv.style.marginTop = '5px';
+        container.appendChild(errorDiv);
+
+        setTimeout(() => errorDiv.remove(), 5000);
+    }
+
     function removeBookCover(button) {
         const previewItem = button.closest('.preview-item');
         if (previewItem) {
@@ -1772,7 +1759,6 @@
         }
     }
 
-    // Code validation functions
     function checkCodeUnique(code, excludeId, callback) {
         if (!code || code.trim() === '') {
             callback(true);

Web/templates/user_del.html

@@ -53,8 +53,11 @@
                         <option value="desc">Absteigend</option>
                     </select>
                 </div>
-                <div class="col-md-2">
-                    <button class="btn btn-secondary w-100" onclick="resetFilters()">Filter zurücksetzen</button>
+                <div class="col-md-3">
+                    <div class="d-flex gap-2">
+                        <button class="btn btn-secondary flex-grow-1" onclick="resetFilters()">Zurücksetzen</button>
+                        <button class="btn btn-success flex-grow-1" onclick="exportFilteredUsers()">Exportieren</button>
+                    </div>
                 </div>
             </div>
             <div class="mt-2 text-muted small" id="filter-count"></div>
@@ -82,19 +85,20 @@
                         <td>{{ permission_presets.get(user.permission_preset, {}).get('label', user.permission_preset) }}</td>
                         <td class="actions">
                             <form method="POST" action="{{ url_for('delete_user') }}" class="d-inline">
+                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                 <input type="hidden" name="username" value="{{ user.username }}">
                                 <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Sind Sie sicher, dass Sie den Benutzer {{ user.username }} löschen möchten?')">
                                     Löschen
                                 </button>
                             </form>
-                            <button type="button" class="btn btn-primary btn-sm" 
+                            <button type="button" class="btn btn-primary btn-sm"
                                     data-username="{{ user.username }}"
                                     data-firstname="{{ user.name if user.name else '' }}"
                                     data-lastname="{{ user.last_name if user.last_name else '' }}"
                                     onclick="openEditUserModal(this)">
                                 Bearbeiten
                             </button>
-                            <button type="button" class="btn btn-warning btn-sm" 
+                            <button type="button" class="btn btn-warning btn-sm"
                                     onclick="openResetPasswordModal('{{ user.username }}')">
                                 Passwort zurücksetzen
                             </button>
@@ -124,6 +128,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <form method="POST" action="{{ url_for('admin_update_user_permissions') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                 <div class="modal-body permissions-modal-body">
                     <input type="hidden" id="perm-username" name="username">
                     <div class="mb-3">
@@ -180,6 +185,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <form method="POST" action="{{ url_for('admin_update_user_name') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                 <div class="modal-body">
                     <input type="hidden" id="edit-username" name="username">
                     <div class="mb-3">
@@ -213,6 +219,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <form method="POST" action="{{ url_for('admin_reset_user_password') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                 <div class="modal-body">
                     <input type="hidden" id="reset-username" name="username">
                     <div class="mb-3">
@@ -313,6 +320,54 @@
         applyFilters();
     }
 
+    function exportFilteredUsers() {
+        var table = document.getElementById('user-table');
+        var tbody = table.querySelector('tbody');
+        var rows = Array.from(tbody.querySelectorAll('tr'));
+
+        var visibleUsernames = [];
+
+        // Sammle alle Benutzernamen, die durch den Filter aktuell NICHT versteckt sind
+        rows.forEach(function(row) {
+            if (row.style.display !== 'none') {
+                var cells = row.querySelectorAll('td');
+                if (cells.length > 0) {
+                    visibleUsernames.push(cells[0].textContent.trim());
+                }
+            }
+        });
+
+        if (visibleUsernames.length === 0) {
+            alert('Keine Benutzer zum Exportieren vorhanden.');
+            return;
+        }
+
+        // Dynamisches Formular erstellen
+        var form = document.createElement('form');
+        form.method = 'POST';
+        form.action = "{{ url_for('export_users_csv') }}";
+
+        // 1. CSRF-Token als Wert (ohne Klammern) übergeben
+        var csrfInput = document.createElement('input');
+        csrfInput.type = 'hidden';
+        csrfInput.name = 'csrf_token';
+        csrfInput.value = "{{ csrf_token }}";
+        form.appendChild(csrfInput);
+
+        // 2. Gefilterte Benutzernamen hinzufügen
+        var input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'usernames';
+        input.value = JSON.stringify(visibleUsernames);
+        form.appendChild(input);
+
+        document.body.appendChild(form);
+        form.submit();
+
+        // Aufräumen
+        document.body.removeChild(form);
+    }
+
     document.addEventListener('DOMContentLoaded', function() {
         applyFilters();
         document.getElementById('filter-search').addEventListener('input', applyFilters);
@@ -332,12 +387,12 @@
         var username = button.getAttribute('data-username');
         var name = button.getAttribute('data-firstname');
         var lastName = button.getAttribute('data-lastname');
-        
+
         document.getElementById('edit-username').value = username;
         document.getElementById('edit-username-display').value = username;
         document.getElementById('edit-name').value = name;
         document.getElementById('edit-last-name').value = lastName;
-        
+
         var modal = new bootstrap.Modal(document.getElementById('editUserModal'));
         modal.show();
     }
@@ -345,8 +400,7 @@
     function openResetPasswordModal(username) {
         document.getElementById('reset-username').value = username;
         document.getElementById('username-display').value = username;
-        
-        // Open modal using Bootstrap
+
         var modal = new bootstrap.Modal(document.getElementById('resetPasswordModal'));
         modal.show();
     }

Web/tenant.py

@@ -17,6 +17,7 @@ import re
 import ipaddress
 import Web.modules.database.settings as cfg
 from Web.modules.database.settings import MongoClient
+from zoneinfo import ZoneInfo
 
 logger = logging.getLogger(__name__)
 
@@ -325,7 +326,7 @@ def get_tenant_trial_status(tenant_id=None, now=None):
     "expires_after_days", "ttl_days", or "days".
     """
     trial_config = get_tenant_trial_config(tenant_id)
-    now = now or datetime.datetime.now()
+    now = now or datetime.datetime.now(ZoneInfo("Europe/Berlin"))
 
     enabled = bool(trial_config.get('enabled') or trial_config.get('active'))
     if not enabled:
@@ -447,7 +448,7 @@ def delete_tenant(tenant_id, *, drop_database=True, remove_from_config=True):
 
 def purge_expired_trial_tenants(now=None):
     """Delete expired trial tenants that opted into auto-delete."""
-    now = now or datetime.datetime.now()
+    now = now or datetime.datetime.now(ZoneInfo("Europe/Berlin"))
     purged_tenants = []
 
     for tenant_id in list(TENANT_REGISTRY.keys()):

manage-tenant.sh

@@ -430,6 +430,7 @@ PY
 initialize_tenant_database() {
     local tenant_id="$1"
     local mode="$2"
+    local admin_password="${3:-admin123}"
 
     APP_CONTAINER=$(docker ps -qf "name=app" | head -n 1)
     if [ -z "$APP_CONTAINER" ]; then
@@ -438,7 +439,8 @@ initialize_tenant_database() {
         return 0
     fi
 
-    docker exec -i "$APP_CONTAINER" python3 - "$tenant_id" "$mode" <<'PY'
+    # Fix: We inject the password securely via a temporary environment variable (-e ADMIN_PASS)
+    docker exec -i -e ADMIN_PASS="$admin_password" "$APP_CONTAINER" python3 - "$tenant_id" "$mode" <<'PY'
 import sys, os, re, datetime, hashlib
 sys.path.insert(0, "/app")
 sys.path.insert(0, "/app/Web")
@@ -449,6 +451,13 @@ import Web.modules.database.user as us
 
 tenant_id = sys.argv[1].lower()
 mode = sys.argv[2]
+
+# Fix: Read the password directly from the environment variable instead of sys.argv
+admin_password = os.environ.get("ADMIN_PASS", "admin123")
+# Failsafe in case of empty string
+if not admin_password.strip():
+    admin_password = "admin123"
+
 sanitized = "".join(c for c in tenant_id if c.isalnum() or c == "_")
 db_name = f"inventar_{sanitized}" if sanitized else settings.MONGODB_DB
 
@@ -458,7 +467,7 @@ users = db["users"]
 permission_defaults = us.build_default_permission_payload("full_access")
 admin_doc = {
     "Username": "admin",
-    "Password": us.hashing("admin123"),
+    "Password": us.hashing(admin_password),
     "Admin": True,
     "active_ausleihung": None,
     "name": dp.encrypt_text("admin"),
@@ -488,7 +497,7 @@ if mode == "trial":
 
 client.close()
 
-print(f"Tenant {sys.argv[1]} database initialized. Default admin: admin / admin123")
+print(f"Tenant {sys.argv[1]} database initialized. Default admin: admin / {admin_password}")
 PY
 }
 
@@ -812,12 +821,26 @@ case "$COMMAND" in
             exit 1
         fi
 
-        PORT_ARG="${3:-}"
-        if [ -n "$PORT_ARG" ]; then
-            if ! printf '%s\n' "$PORT_ARG" | grep -qE '^[0-9]+$'; then
-                echo "Error: Port must be a numeric value."
-                exit 1
+        ARG3="${3:-}"
+        ARG4="${4:-}"
+
+        PORT_ARG=""
+        PASSWORD_ARG="admin123"
+
+        # Check if the 3rd argument is numeric (Port) or text (Password)
+        if [ -n "$ARG3" ]; then
+            if printf '%s\n' "$ARG3" | grep -qE '^[0-9]+$'; then
+                PORT_ARG="$ARG3"
+                if [ -n "$ARG4" ]; then
+                    PASSWORD_ARG="$ARG4"
+                fi
+            else
+                # If ARG3 is not numeric, treat it as the password without setting a port
+                PASSWORD_ARG="$ARG3"
             fi
+        fi
+
+        if [ -n "$PORT_ARG" ]; then
             register_tenant_port "$TENANT_ID" "$PORT_ARG"
             update_runtime_ports "$PORT_ARG"
             sync_tenant_port_map
@@ -829,11 +852,9 @@ case "$COMMAND" in
             fi
         fi
 
-        
-
         echo "Adding new tenant '$TENANT_ID'..."
         echo "Initializing database for $TENANT_ID..."
-        initialize_tenant_database "$TENANT_ID" "standard"
+        initialize_tenant_database "$TENANT_ID" "standard" "$PASSWORD_ARG"
         echo "Tenant '$TENANT_ID' successfully added. Ready to use."
         ;;
 
@@ -872,81 +893,94 @@ case "$COMMAND" in
         ;;
 
     remove)
-        FORCE_REMOVE=false
-        TENANT_ARG="${2:-}"
+    FORCE_REMOVE=false
 
-        if [ "$TENANT_ARG" = "--yes" ] || [ "$TENANT_ARG" = "-y" ]; then
-            FORCE_REMOVE=true
-            TENANT_ID="${3:-}"
-        else
-            TENANT_ID="$TENANT_ARG"
+    # Fix: Prüfe sowohl Position 2 als auch 3 auf das -y Flag
+    if [ "${2:-}" = "--yes" ] || [ "${2:-}" = "-y" ]; then
+        FORCE_REMOVE=true
+        TENANT_ID="${3:-}"
+    elif [ "${3:-}" = "--yes" ] || [ "${3:-}" = "-y" ]; then
+        FORCE_REMOVE=true
+        TENANT_ID="${2:-}"
+    else
+        TENANT_ID="${2:-}"
+    fi
+
+    if [ -z "$TENANT_ID" ]; then
+        echo "Error: Please provide a tenant_id to remove."
+        exit 1
+    fi
+
+    if [ "$FORCE_REMOVE" != true ]; then
+        echo -n "WARNING: Are you sure you want to permanently delete all data for tenant '$TENANT_ID'? (y/N) "
+        read confirm
+        if [ "$confirm" != "y" ] && [ "$confirm" != "Y" ]; then
+            echo "Removal canceled."
+            exit 0
         fi
+    fi
 
-        if [ -z "$TENANT_ID" ]; then
-            echo "Error: Please provide a tenant_id to remove."
-            exit 1
-        fi
+    echo "Removing tenant '$TENANT_ID'..."
+    APP_CONTAINER=$(docker ps -qf "name=app" | head -n 1)
+    port_to_remove=""
 
-        if [ "$FORCE_REMOVE" != true ]; then
-            echo -n "WARNING: Are you sure you want to permanently delete all data for tenant '$TENANT_ID'? (y/N) "
-            read confirm
-            if [ "$confirm" != "y" ] && [ "$confirm" != "Y" ]; then
-                echo "Removal canceled."
-                exit 0
-            fi
-        fi
+    if [ -n "$APP_CONTAINER" ]; then
+        # MongoDB-Datenbank via PyMongo direkt im Container droppen
+        # Fix 1: Wir hängen '|| true' an, damit das Skript nicht abstürzt, falls der Befehl fehlschlägt.
+        docker exec -i "$APP_CONTAINER" python3 -c '
+import sys, os
+try:
+    import pymongo
+    tenant_id = sys.argv[1]
+    # In Docker Compose heißt der Host oft "mongodb" statt "localhost"
+    mongo_uri = os.environ.get("MONGO_URI", "mongodb://mongodb:27017/")
+    client = pymongo.MongoClient(mongo_uri, serverSelectionTimeoutMS=2000)
 
-        echo "Removing tenant '$TENANT_ID'..."
-        APP_CONTAINER=$(docker ps -qf "name=app" | head -n 1)
-        port_to_remove=""
+    # Fix 2: Wir versuchen beide Formate zu löschen, da "list" zeigt, dass sie "test" und nicht "inventar_test" heißen.
+    dbs_to_drop = [f"inventar_{tenant_id}", tenant_id]
+    existing_dbs = client.list_database_names()
 
-        if [ -n "$APP_CONTAINER" ]; then
-            # MongoDB-Datenbank via PyMongo direkt im Container droppen
-            docker exec -i "$APP_CONTAINER" python3 -c '
-    import sys, os
-    try:
-        import pymongo
-        tenant_id = sys.argv[1]
-        mongo_uri = os.environ.get("MONGO_URI", "mongodb://localhost:27017/")
-        client = pymongo.MongoClient(mongo_uri, serverSelectionTimeoutMS=2000)
-        db_name = f"inventar_{tenant_id}"
-        if db_name in client.list_database_names():
+    for db_name in dbs_to_drop:
+        if db_name in existing_dbs:
             client.drop_database(db_name)
             print(f"Dropped database: {db_name}")
-    except Exception as e:
-        print(f"Error dropping database: {e}", file=sys.stderr)
-    ' "$TENANT_ID" > /dev/null 2>&1
+except Exception as e:
+    print(f"Error dropping database: {e}", file=sys.stderr)
+' "$TENANT_ID" > /dev/null 2>&1 || true
 
-            # Konfiguration und Port via Host-Funktion bereinigen und Port ermitteln
-            if port_to_remove="$(remove_tenant_port "$TENANT_ID" 2>/dev/null)"; then
-                :
-            else
-                port_to_remove=""
-            fi
-
-            echo "Tenant '$TENANT_ID' database and config removed."
+        # Konfiguration und Port via Host-Funktion bereinigen und Port ermitteln
+        if port_to_remove="$(remove_tenant_port "$TENANT_ID" 2>/dev/null)"; then
+            :
         else
-            echo "Warning: Application container not running. Tenant database may still exist in MongoDB."
-            if port_to_remove="$(remove_tenant_port "$TENANT_ID" 2>/dev/null)"; then
-                :
-            else
-                echo "Warning: tenant '$TENANT_ID' was not configured in config.json or could not be removed."
-            fi
+            port_to_remove=""
         fi
 
-        if [ -n "$port_to_remove" ]; then
-            remove_runtime_port "$port_to_remove"
-        fi
-        remove_tenant_nginx_config "$TENANT_ID"
-        sync_tenant_port_map
-        if [ -n "$(docker ps -qf 'name=app' | head -n 1)" ]; then
-            restart_app_container
-        fi
-        if [ -n "$port_to_remove" ]; then
-            echo "Removed tenant '$TENANT_ID' and cleaned runtime port $port_to_remove."
+        echo "Tenant '$TENANT_ID' database and config removed."
+    else
+        echo "Warning: Application container not running. Tenant database may still exist in MongoDB."
+        if port_to_remove="$(remove_tenant_port "$TENANT_ID" 2>/dev/null)"; then
+            :
         else
-            echo "Removed tenant '$TENANT_ID'. No port mapping was present."
+            echo "Warning: tenant '$TENANT_ID' was not configured in config.json or could not be removed."
         fi
+    fi
+
+    if [ -n "$port_to_remove" ]; then
+        remove_runtime_port "$port_to_remove" 2>/dev/null || true
+    fi
+
+    remove_tenant_nginx_config "$TENANT_ID"
+    sync_tenant_port_map
+
+    if [ -n "$(docker ps -qf 'name=app' | head -n 1)" ]; then
+        restart_app_container || true
+    fi
+
+    if [ -n "$port_to_remove" ]; then
+        echo "Removed tenant '$TENANT_ID' and cleaned runtime port $port_to_remove."
+    else
+        echo "Removed tenant '$TENANT_ID'. No port mapping was present."
+    fi
     ;;
 
     restart-tenant)