From b578bfe755632709bf7de538699b934ba3c8264c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 1 Mar 2026 09:31:59 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Unified=20List=20Sear?=
 =?UTF-8?q?ch=20and=20Filter=20UX=20Enhancement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This change enhances the list view experience across the application by:
1.  Upgrading the search bar to use the DaisyUI `join` component.
2.  Adding a "Clear search" button for easier interaction.
3.  Implementing a "No results found" empty state row in tables.
4.  Unifying the filtering and search logic in `list_base.html` to automatically handle any dropdown filters ending in "Filter" using `data-` attributes.
5.  Fixing a potential sorting regression by ensuring sorting logic only targets `.data-row` elements.
6.  Cleaning up redundant filtering logic in child templates (Tools, Workers).

These changes improve both the accessibility and usability of all primary inventory and worker lists.

Co-authored-by: Woschj <81321922+Woschj@users.noreply.github.com>
---
 .Jules/palette.md                   |   4 +
 app/templates/shared/list_base.html | 758 ++++++++++++++--------------
 app/templates/workers/index.html    | 235 ++++-----
 3 files changed, 490 insertions(+), 507 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 3ce56a2..c75af4a 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -7,3 +7,7 @@
 ## 2026-02-15 - [Semantic Form Labels]
 **Learning:** Even with clear visual labels, missing `for` attributes on `<label>` elements prevents proper association with inputs for assistive technologies.
 **Action:** Explicitly link labels and inputs using `for` and `id` attributes in all form components.
+
+## 2026-03-01 - [Table Row Selection for Client-side Sorting]
+**Learning:** Generic `tr` selectors in client-side sorting and filtering scripts can cause functional regressions when feedback rows (like "No results found") are added to the table body. These rows are incorrectly included in sorts, appearing in random positions.
+**Action:** Always use specific selectors like `.data-row` for data-related iterations to isolate metadata or feedback rows.
diff --git a/app/templates/shared/list_base.html b/app/templates/shared/list_base.html
index c89a7b4..1657781 100755
--- a/app/templates/shared/list_base.html
+++ b/app/templates/shared/list_base.html
@@ -1,382 +1,384 @@
-{% extends "base.html" %}
-
-{% block content %}
-<div class="space-y-4">
-    <!-- Suchleiste und Filter -->
-    <div class="card bg-base-100 shadow-lg card-compact">
-        <div class="card-body">
-            <!-- Suchleiste und Aktionen -->
-            <div class="flex flex-col md:flex-row gap-4 items-center">
-                <div class="form-control flex-1">
+{% extends "base.html" %}
+
+{% block content %}
+<div class="space-y-4">
+    <!-- Suchleiste und Filter -->
+    <div class="card bg-base-100 shadow-lg card-compact">
+        <div class="card-body">
+            <!-- Suchleiste und Aktionen -->
+            <div class="flex flex-col md:flex-row gap-4 items-center">
+                <div class="form-control flex-1">
                     <label for="searchInput" class="sr-only">Suchen</label>
-                    <div class="input-group">
-                        <input type="text" 
-                               placeholder="Suchen..." 
-                               class="input input-bordered w-full" 
+                    <div class="join w-full">
+                        <input type="text"
+                               placeholder="Suchen..."
+                               class="input input-bordered join-item w-full"
                                id="searchInput"
                                aria-label="Suchen">
-                        <button type="button" class="btn btn-square" aria-label="Suche ausführen">
-                            <i class="fas fa-search"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Aktionen -->
-                {% block actions %}{% endblock %}
-            </div>
-
-            <!-- Filter -->
-            <div class="flex flex-wrap gap-3 mt-4">
-                {% block filters %}{% endblock %}
-            </div>
-        </div>
-    </div>
-
-    <!-- Datentabelle -->
-    <div class="card bg-base-100 shadow-lg">
-        <div class="card-body p-0">
-            <div class="table-container">
-                <table class="table table-zebra w-full">
-                    <thead>
-                        <tr>
-                            {% block table_headers %}{% endblock %}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% block table_rows %}{% endblock %}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-
-    <!-- Kontext-Hilfe (optional) -->
-    {% if help_title or help_items %}
-    <div class="card bg-base-100 shadow-lg">
-        <div class="card-body">
-            <h3 class="card-title text-lg">
-                <i class="fas fa-question-circle text-primary mr-2"></i>
-                {{ help_title or 'Hilfe' }}
-            </h3>
-            {% if help_text %}
-            <p class="text-sm opacity-75 mb-2">{{ help_text }}</p>
-            {% endif %}
-            {% if help_items %}
-            <ul class="list-disc list-inside text-sm space-y-1">
-                {% for item in help_items %}
-                <li>{{ item }}</li>
-                {% endfor %}
-            </ul>
-            {% endif %}
-        </div>
-    </div>
-    {% endif %}
-</div>
-
-<!-- Scripts -->
-<script nonce="{{ csp_nonce }}">
-// Basis-Suchfunktion
-document.addEventListener('DOMContentLoaded', function() {
-    const searchInput = document.getElementById('searchInput');
-    if (searchInput) {
-        searchInput.addEventListener('input', function(e) {
-            const searchTerm = e.target.value.toLowerCase();
-            document.querySelectorAll('.data-row').forEach(row => {
-                const searchableContent = row.textContent.toLowerCase();
-                row.style.display = searchableContent.includes(searchTerm) ? '' : 'none';
-            });
-        });
-    }
-
-    // Sortier-Funktionalität
-    let currentSort = { column: null, direction: 'asc' };
-
-    // Füge Sortier-Icons zu den Tabellen-Headers hinzu
-    document.querySelectorAll('th').forEach(th => {
-        if (!th.classList.contains('no-sort')) {
-            const wrapper = document.createElement('div');
-            wrapper.className = 'flex items-center gap-2 cursor-pointer select-none';
-            wrapper.innerHTML = `
-                ${th.innerHTML}
-                <span class="sort-icons opacity-50">
-                    <i class="fas fa-sort"></i>
-                </span>
-            `;
-            th.innerHTML = '';
-            th.appendChild(wrapper);
-
-            wrapper.addEventListener('click', () => {
-                const column = Array.from(th.parentElement.children).indexOf(th);
-                sortTable(column, th);
-            });
-        }
-    });
-
-    function sortTable(column, th) {
-        const table = th.closest('table');
-        const tbody = table.querySelector('tbody');
-        const rows = Array.from(tbody.querySelectorAll('tr'));
-        
-        // Update Sort-Direction
-        if (currentSort.column === column) {
-            currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
-        } else {
-            currentSort.column = column;
-            currentSort.direction = 'asc';
-        }
-
-        // Update Sort-Icons
-        table.querySelectorAll('.sort-icons').forEach(icon => {
-            icon.innerHTML = '<i class="fas fa-sort"></i>';
-        });
-        
-        const currentIcon = th.querySelector('.sort-icons');
-        if (currentSort.direction === 'asc') {
-            currentIcon.innerHTML = '<i class="fas fa-sort-up"></i>';
-        } else {
-            currentIcon.innerHTML = '<i class="fas fa-sort-down"></i>';
-        }
-
-        // Sortiere die Zeilen
-        rows.sort((a, b) => {
-            const aValue = a.children[column]?.textContent || '';
-            const bValue = b.children[column]?.textContent || '';
-            
-            if (currentSort.direction === 'asc') {
-                return aValue.localeCompare(bValue);
-            } else {
-                return bValue.localeCompare(aValue);
-            }
-        });
-
-        // Entferne und füge sortierte Zeilen wieder hinzu
-        rows.forEach(row => tbody.appendChild(row));
-    }
-
-    // Tool-spezifische Funktionen
-    {% if request.endpoint == 'tools.index' %}
-    console.log('=== TOOLS PAGE SCRIPT LOADED ===');
-
-    // Filter-Funktionalität
-    function initializeFilters() {
-        console.log('Initializing filters...');
-        const categoryFilter = document.getElementById('categoryFilter');
-        const locationFilter = document.getElementById('locationFilter');
-        const statusFilter = document.getElementById('statusFilter');
-
-        function applyFilters() {
-            const category = categoryFilter.value;
-            const location = locationFilter.value;
-            const status = statusFilter.value;
-
-            document.querySelectorAll('.data-row').forEach(row => {
-                const matchesCategory = !category || row.dataset.category === category;
-                const matchesLocation = !location || row.dataset.location === location;
-                const matchesStatus = !status || row.dataset.status === status;
-
-                row.style.display = matchesCategory && matchesLocation && matchesStatus ? '' : 'none';
-            });
-        }
-
-        categoryFilter.addEventListener('change', applyFilters);
-        locationFilter.addEventListener('change', applyFilters);
-        statusFilter.addEventListener('change', applyFilters);
-        console.log('Filters initialized');
-    }
-
-    // Medien-Vorschau für Werkzeuge laden
-    function loadToolPreviews() {
-        console.log('=== LOADING TOOL PREVIEWS ===');
-        
-        const toolPreviews = document.querySelectorAll('.tool-media-preview');
-        console.log(`Found ${toolPreviews.length} tool previews`);
-        
-        toolPreviews.forEach((preview, index) => {
-            const barcode = preview.dataset.barcode;
-            const savedPreviewImage = preview.dataset.previewImage;
-            
-            console.log(`[${index}] Loading preview for tool ${barcode}, saved preview: ${savedPreviewImage}`);
-            
-            if (barcode) {
-                const url = `/media/tools/${barcode}/list`;
-                console.log(`[${index}] Fetching from: ${url}`);
-                
-                fetch(url)
-                    .then(response => {
-                        console.log(`[${index}] Response status:`, response.status);
-                        return response.json();
-                    })
-                    .then(data => {
-                        console.log(`[${index}] Media data:`, data);
-                        
-                        if (data.success && data.media_list && data.media_list.length > 0) {
-                            // Suche nach dem gespeicherten Preview-Bild oder verwende das erste
-                            let previewImage = data.media_list[0];
-                            
-                            // Wenn ein gespeichertes Preview-Bild existiert, verwende es
-                            if (savedPreviewImage && savedPreviewImage !== '') {
-                                const savedImage = data.media_list.find(img => img.filename === savedPreviewImage);
-                                if (savedImage) {
-                                    console.log(`[${index}] Found saved preview image:`, savedImage);
-                                    previewImage = savedImage;
-                                } else {
-                                    console.log(`[${index}] Saved preview image not found in media list`);
-                                }
-                            }
-                            
-                            console.log(`[${index}] Using preview image:`, previewImage);
-                            console.log(`[${index}] Image URL:`, previewImage.url);
-                            
-                            // Test: Zeige das Bild direkt an
-                            const imgHtml = `<img src="${previewImage.url}" alt="Werkzeug Vorschau" class="w-12 h-12 object-cover rounded-lg">`;
-                            console.log(`[${index}] Setting HTML:`, imgHtml);
-                            
-                            preview.innerHTML = imgHtml;
-                            
-                            // Zusätzlicher Test: Prüfe ob das Bild geladen wurde
-                            setTimeout(() => {
-                                const img = preview.querySelector('img');
-                                if (img) {
-                                    console.log(`[${index}] Image element found, src:`, img.src);
-                                    img.onload = () => console.log(`[${index}] Image loaded successfully`);
-                                    img.onerror = () => console.log(`[${index}] Image failed to load`);
-                                } else {
-                                    console.log(`[${index}] No image element found after setting HTML`);
-                                }
-                            }, 100);
-                            
-                        } else {
-                            console.log(`[${index}] No media found for tool ${barcode}`);
-                        }
-                    })
-                    .catch(error => {
-                        console.error(`[${index}] Fehler beim Laden der Medien-Vorschau:`, error);
-                    });
-            } else {
-                console.log(`[${index}] No barcode found`);
-            }
-        });
-    }
-
-    // Sofortige Ausführung für Tools
-    console.log('Running tools page script immediately');
-    initializeFilters();
-    loadToolPreviews();
-    {% endif %}
-
-    // Verbrauchsgüter-spezifische Funktionen
-    {% if request.endpoint == 'consumables.index' %}
-    console.log('=== CONSUMABLES PAGE SCRIPT LOADED ===');
-
-    // Filter-Funktionalität
-    function initializeFilters() {
-        console.log('Initializing filters...');
-        const categoryFilter = document.getElementById('categoryFilter');
-        const locationFilter = document.getElementById('locationFilter');
-        const stockFilter = document.getElementById('stockFilter');
-
-        function applyFilters() {
-            const category = categoryFilter.value;
-            const location = locationFilter.value;
-            const stock = stockFilter.value;
-
-            document.querySelectorAll('.data-row').forEach(row => {
-                const matchesCategory = !category || row.dataset.category === category;
-                const matchesLocation = !location || row.dataset.location === location;
-                const matchesStock = !stock || row.dataset.stock === stock;
-
-                row.style.display = matchesCategory && matchesLocation && matchesStock ? '' : 'none';
-            });
-        }
-
-        categoryFilter.addEventListener('change', applyFilters);
-        locationFilter.addEventListener('change', applyFilters);
-        stockFilter.addEventListener('change', applyFilters);
-        console.log('Filters initialized');
-    }
-
-    // Medien-Vorschau für Verbrauchsgüter laden
-    function loadConsumablePreviews() {
-        console.log('=== LOADING CONSUMABLE PREVIEWS ===');
-        
-        const consumablePreviews = document.querySelectorAll('.consumable-media-preview');
-        console.log(`Found ${consumablePreviews.length} consumable previews`);
-        
-        consumablePreviews.forEach((preview, index) => {
-            const barcode = preview.dataset.barcode;
-            const savedPreviewImage = preview.dataset.previewImage;
-            
-            console.log(`[${index}] Loading preview for consumable ${barcode}, saved preview: ${savedPreviewImage}`);
-            
-            if (barcode) {
-                const url = `/media/consumables/${barcode}/list`;
-                console.log(`[${index}] Fetching from: ${url}`);
-                
-                fetch(url)
-                    .then(response => {
-                        console.log(`[${index}] Response status:`, response.status);
-                        return response.json();
-                    })
-                    .then(data => {
-                        console.log(`[${index}] Media data:`, data);
-                        
-                        if (data.success && data.media_list && data.media_list.length > 0) {
-                            // Suche nach dem gespeicherten Preview-Bild oder verwende das erste
-                            let previewImage = data.media_list[0];
-                            
-                            // Wenn ein gespeichertes Preview-Bild existiert, verwende es
-                            if (savedPreviewImage && savedPreviewImage !== '') {
-                                const savedImage = data.media_list.find(img => img.filename === savedPreviewImage);
-                                if (savedImage) {
-                                    console.log(`[${index}] Found saved preview image:`, savedImage);
-                                    previewImage = savedImage;
-                                } else {
-                                    console.log(`[${index}] Saved preview image not found in media list`);
-                                }
-                            }
-                            
-                            console.log(`[${index}] Using preview image:`, previewImage);
-                            console.log(`[${index}] Image URL:`, previewImage.url);
-                            
-                            // Test: Zeige das Bild direkt an
-                            const imgHtml = `<img src="${previewImage.url}" alt="Verbrauchsgut Vorschau" class="w-12 h-12 object-cover rounded-lg">`;
-                            console.log(`[${index}] Setting HTML:`, imgHtml);
-                            
-                            preview.innerHTML = imgHtml;
-                            
-                            // Zusätzlicher Test: Prüfe ob das Bild geladen wurde
-                            setTimeout(() => {
-                                const img = preview.querySelector('img');
-                                if (img) {
-                                    console.log(`[${index}] Image element found, src:`, img.src);
-                                    img.onload = () => console.log(`[${index}] Image loaded successfully`);
-                                    img.onerror = () => console.log(`[${index}] Image failed to load`);
-                                } else {
-                                    console.log(`[${index}] No image element found after setting HTML`);
-                                }
-                            }, 100);
-                            
-                        } else {
-                            console.log(`[${index}] No media found for consumable ${barcode}`);
-                        }
-                    })
-                    .catch(error => {
-                        console.error(`[${index}] Fehler beim Laden der Medien-Vorschau:`, error);
-                    });
-            } else {
-                console.log(`[${index}] No barcode found`);
-            }
-        });
-    }
-
-    // Sofortige Ausführung für Verbrauchsgüter
-    console.log('Running consumables page script immediately');
-    initializeFilters();
-    loadConsumablePreviews();
-    {% endif %}
-});
-</script>
-
-<!-- Delete Script -->
-<script src="{{ url_for('static', filename='js/delete.js') }}"></script>
+                        <button type="button" id="clearSearch" class="btn btn-ghost join-item px-2" aria-label="Suche löschen" style="display: none;">
+                            <i class="fas fa-times-circle"></i>
+                        </button>
+                        <button type="button" class="btn btn-square join-item" aria-label="Suche ausführen">
+                            <i class="fas fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Aktionen -->
+                {% block actions %}{% endblock %}
+            </div>
+
+            <!-- Filter -->
+            <div class="flex flex-wrap gap-3 mt-4">
+                {% block filters %}{% endblock %}
+            </div>
+        </div>
+    </div>
+
+    <!-- Datentabelle -->
+    <div class="card bg-base-100 shadow-lg">
+        <div class="card-body p-0">
+            <div class="table-container">
+                <table class="table table-zebra w-full">
+                    <thead>
+                        <tr>
+                            {% block table_headers %}{% endblock %}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% block table_rows %}{% endblock %}
+                        <!-- No Results Row -->
+                        <tr id="noResultsRow" style="display: none;">
+                            <td colspan="100" class="text-center py-8 text-base-content/50">
+                                <div class="flex flex-col items-center gap-2">
+                                    <i class="fas fa-search text-3xl opacity-20"></i>
+                                    <p>Keine Ergebnisse für Ihre Suche gefunden.</p>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <!-- Kontext-Hilfe (optional) -->
+    {% if help_title or help_items %}
+    <div class="card bg-base-100 shadow-lg">
+        <div class="card-body">
+            <h3 class="card-title text-lg">
+                <i class="fas fa-question-circle text-primary mr-2"></i>
+                {{ help_title or 'Hilfe' }}
+            </h3>
+            {% if help_text %}
+            <p class="text-sm opacity-75 mb-2">{{ help_text }}</p>
+            {% endif %}
+            {% if help_items %}
+            <ul class="list-disc list-inside text-sm space-y-1">
+                {% for item in help_items %}
+                <li>{{ item }}</li>
+                {% endfor %}
+            </ul>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+</div>
+
+<!-- Scripts -->
+<script nonce="{{ csp_nonce }}">
+// Basis-Suchfunktion
+document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('searchInput');
+    const clearSearchBtn = document.getElementById('clearSearch');
+    const noResultsRow = document.getElementById('noResultsRow');
+
+    function filterTable() {
+        const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
+        const rows = document.querySelectorAll('.data-row');
+
+        // Update Clear-Button visibility
+        if (clearSearchBtn) {
+            clearSearchBtn.style.display = searchTerm ? '' : 'none';
+        }
+
+        // Get all active filters (selects with IDs ending in 'Filter')
+        const filters = Array.from(document.querySelectorAll('select[id$="Filter"]')).map(select => ({
+            id: select.id.replace('Filter', ''),
+            value: select.value
+        }));
+
+        let visibleCount = 0;
+
+        rows.forEach(row => {
+            const matchesSearch = !searchTerm || row.textContent.toLowerCase().includes(searchTerm);
+            const matchesFilters = filters.every(filter => {
+                return !filter.value || row.dataset[filter.id] === filter.value;
+            });
+
+            const isVisible = matchesSearch && matchesFilters;
+            row.style.display = isVisible ? '' : 'none';
+            if (isVisible) visibleCount++;
+        });
+
+        if (noResultsRow) {
+            noResultsRow.style.display = (visibleCount === 0 && (rows.length > 0)) ? 'table-row' : 'none';
+        }
+    }
+
+    if (searchInput) {
+        searchInput.addEventListener('input', filterTable);
+    }
+
+    if (clearSearchBtn) {
+        clearSearchBtn.addEventListener('click', () => {
+            searchInput.value = '';
+            filterTable();
+            searchInput.focus();
+        });
+    }
+
+    // Initialize all filters
+    document.querySelectorAll('select[id$="Filter"]').forEach(select => {
+        select.addEventListener('change', filterTable);
+    });
+
+    // Run initial filter in case of browser-cached input
+    filterTable();
+
+    // Sortier-Funktionalität
+    let currentSort = { column: null, direction: 'asc' };
+
+    // Füge Sortier-Icons zu den Tabellen-Headers hinzu
+    document.querySelectorAll('th').forEach(th => {
+        if (!th.classList.contains('no-sort')) {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'flex items-center gap-2 cursor-pointer select-none';
+            wrapper.innerHTML = `
+                ${th.innerHTML}
+                <span class="sort-icons opacity-50">
+                    <i class="fas fa-sort"></i>
+                </span>
+            `;
+            th.innerHTML = '';
+            th.appendChild(wrapper);
+
+            wrapper.addEventListener('click', () => {
+                const column = Array.from(th.parentElement.children).indexOf(th);
+                sortTable(column, th);
+            });
+        }
+    });
+
+    function sortTable(column, th) {
+        const table = th.closest('table');
+        const tbody = table.querySelector('tbody');
+        const rows = Array.from(tbody.querySelectorAll('.data-row'));
+
+        // Update Sort-Direction
+        if (currentSort.column === column) {
+            currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+        } else {
+            currentSort.column = column;
+            currentSort.direction = 'asc';
+        }
+
+        // Update Sort-Icons
+        table.querySelectorAll('.sort-icons').forEach(icon => {
+            icon.innerHTML = '<i class="fas fa-sort"></i>';
+        });
+
+        const currentIcon = th.querySelector('.sort-icons');
+        if (currentSort.direction === 'asc') {
+            currentIcon.innerHTML = '<i class="fas fa-sort-up"></i>';
+        } else {
+            currentIcon.innerHTML = '<i class="fas fa-sort-down"></i>';
+        }
+
+        // Sortiere die Zeilen
+        rows.sort((a, b) => {
+            const aValue = a.children[column]?.textContent || '';
+            const bValue = b.children[column]?.textContent || '';
+
+            if (currentSort.direction === 'asc') {
+                return aValue.localeCompare(bValue);
+            } else {
+                return bValue.localeCompare(aValue);
+            }
+        });
+
+        // Entferne und füge sortierte Zeilen wieder hinzu
+        rows.forEach(row => tbody.appendChild(row));
+    }
+
+    // Tool-spezifische Funktionen
+    {% if request.endpoint == 'tools.index' %}
+    console.log('=== TOOLS PAGE SCRIPT LOADED ===');
+
+    // Medien-Vorschau für Werkzeuge laden
+    function loadToolPreviews() {
+        console.log('=== LOADING TOOL PREVIEWS ===');
+
+        const toolPreviews = document.querySelectorAll('.tool-media-preview');
+        console.log(`Found ${toolPreviews.length} tool previews`);
+
+        toolPreviews.forEach((preview, index) => {
+            const barcode = preview.dataset.barcode;
+            const savedPreviewImage = preview.dataset.previewImage;
+
+            console.log(`[${index}] Loading preview for tool ${barcode}, saved preview: ${savedPreviewImage}`);
+
+            if (barcode) {
+                const url = `/media/tools/${barcode}/list`;
+                console.log(`[${index}] Fetching from: ${url}`);
+
+                fetch(url)
+                    .then(response => {
+                        console.log(`[${index}] Response status:`, response.status);
+                        return response.json();
+                    })
+                    .then(data => {
+                        console.log(`[${index}] Media data:`, data);
+
+                        if (data.success && data.media_list && data.media_list.length > 0) {
+                            // Suche nach dem gespeicherten Preview-Bild oder verwende das erste
+                            let previewImage = data.media_list[0];
+
+                            // Wenn ein gespeichertes Preview-Bild existiert, verwende es
+                            if (savedPreviewImage && savedPreviewImage !== '') {
+                                const savedImage = data.media_list.find(img => img.filename === savedPreviewImage);
+                                if (savedImage) {
+                                    console.log(`[${index}] Found saved preview image:`, savedImage);
+                                    previewImage = savedImage;
+                                } else {
+                                    console.log(`[${index}] Saved preview image not found in media list`);
+                                }
+                            }
+
+                            console.log(`[${index}] Using preview image:`, previewImage);
+                            console.log(`[${index}] Image URL:`, previewImage.url);
+
+                            // Test: Zeige das Bild direkt an
+                            const imgHtml = `<img src="${previewImage.url}" alt="Werkzeug Vorschau" class="w-12 h-12 object-cover rounded-lg">`;
+                            console.log(`[${index}] Setting HTML:`, imgHtml);
+
+                            preview.innerHTML = imgHtml;
+
+                            // Zusätzlicher Test: Prüfe ob das Bild geladen wurde
+                            setTimeout(() => {
+                                const img = preview.querySelector('img');
+                                if (img) {
+                                    console.log(`[${index}] Image element found, src:`, img.src);
+                                    img.onload = () => console.log(`[${index}] Image loaded successfully`);
+                                    img.onerror = () => console.log(`[${index}] Image failed to load`);
+                                } else {
+                                    console.log(`[${index}] No image element found after setting HTML`);
+                                }
+                            }, 100);
+
+                        } else {
+                            console.log(`[${index}] No media found for tool ${barcode}`);
+                        }
+                    })
+                    .catch(error => {
+                        console.error(`[${index}] Fehler beim Laden der Medien-Vorschau:`, error);
+                    });
+            } else {
+                console.log(`[${index}] No barcode found`);
+            }
+        });
+    }
+
+    // Sofortige Ausführung für Tools
+    console.log('Running tools page script immediately');
+    loadToolPreviews();
+    {% endif %}
+
+    // Verbrauchsgüter-spezifische Funktionen
+    {% if request.endpoint == 'consumables.index' %}
+    console.log('=== CONSUMABLES PAGE SCRIPT LOADED ===');
+
+    // Medien-Vorschau für Verbrauchsgüter laden
+    function loadConsumablePreviews() {
+        console.log('=== LOADING CONSUMABLE PREVIEWS ===');
+
+        const consumablePreviews = document.querySelectorAll('.consumable-media-preview');
+        console.log(`Found ${consumablePreviews.length} consumable previews`);
+
+        consumablePreviews.forEach((preview, index) => {
+            const barcode = preview.dataset.barcode;
+            const savedPreviewImage = preview.dataset.previewImage;
+
+            console.log(`[${index}] Loading preview for consumable ${barcode}, saved preview: ${savedPreviewImage}`);
+
+            if (barcode) {
+                const url = `/media/consumables/${barcode}/list`;
+                console.log(`[${index}] Fetching from: ${url}`);
+
+                fetch(url)
+                    .then(response => {
+                        console.log(`[${index}] Response status:`, response.status);
+                        return response.json();
+                    })
+                    .then(data => {
+                        console.log(`[${index}] Media data:`, data);
+
+                        if (data.success && data.media_list && data.media_list.length > 0) {
+                            // Suche nach dem gespeicherten Preview-Bild oder verwende das erste
+                            let previewImage = data.media_list[0];
+
+                            // Wenn ein gespeichertes Preview-Bild existiert, verwende es
+                            if (savedPreviewImage && savedPreviewImage !== '') {
+                                const savedImage = data.media_list.find(img => img.filename === savedPreviewImage);
+                                if (savedImage) {
+                                    console.log(`[${index}] Found saved preview image:`, savedImage);
+                                    previewImage = savedImage;
+                                } else {
+                                    console.log(`[${index}] Saved preview image not found in media list`);
+                                }
+                            }
+
+                            console.log(`[${index}] Using preview image:`, previewImage);
+                            console.log(`[${index}] Image URL:`, previewImage.url);
+
+                            // Test: Zeige das Bild direkt an
+                            const imgHtml = `<img src="${previewImage.url}" alt="Verbrauchsgut Vorschau" class="w-12 h-12 object-cover rounded-lg">`;
+                            console.log(`[${index}] Setting HTML:`, imgHtml);
+
+                            preview.innerHTML = imgHtml;
+
+                            // Zusätzlicher Test: Prüfe ob das Bild geladen wurde
+                            setTimeout(() => {
+                                const img = preview.querySelector('img');
+                                if (img) {
+                                    console.log(`[${index}] Image element found, src:`, img.src);
+                                    img.onload = () => console.log(`[${index}] Image loaded successfully`);
+                                    img.onerror = () => console.log(`[${index}] Image failed to load`);
+                                } else {
+                                    console.log(`[${index}] No image element found after setting HTML`);
+                                }
+                            }, 100);
+
+                        } else {
+                            console.log(`[${index}] No media found for consumable ${barcode}`);
+                        }
+                    })
+                    .catch(error => {
+                        console.error(`[${index}] Fehler beim Laden der Medien-Vorschau:`, error);
+                    });
+            } else {
+                console.log(`[${index}] No barcode found`);
+            }
+        });
+    }
+
+    // Sofortige Ausführung für Verbrauchsgüter
+    console.log('Running consumables page script immediately');
+    loadConsumablePreviews();
+    {% endif %}
+});
+</script>
+
+<!-- Delete Script -->
+<script src="{{ url_for('static', filename='js/delete.js') }}"></script>
 {% endblock %} 
\ No newline at end of file
diff --git a/app/templates/workers/index.html b/app/templates/workers/index.html
index 3823603..fbbe91b 100755
--- a/app/templates/workers/index.html
+++ b/app/templates/workers/index.html
@@ -1,129 +1,106 @@
-{% extends "shared/list_base.html" %}
-{% set help_title = 'Mitarbeiter – Hilfe' %}
-{% set help_text = 'Mitarbeiterdaten und Ausleihen überblicken.' %}
-{% set help_items = [
-    'Mit dem Abteilungsfilter die Anzeige einschränken.',
-    'Klick auf den Namen öffnet Details mit aktiven Ausleihen und Historie.',
-    'Rückgaben sind direkt in den Mitarbeiter-Details möglich.'
-] %}
-
-{% block actions %}
-<div class="flex gap-2">
-    <a href="{{ url_for('workers.add') }}" class="btn btn-primary hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">
-        <i class="fas fa-plus me-2"></i> Neuer Mitarbeiter
-    </a>
-</div>
-{% endblock %}
-
-{% block filters %}
-<select class="select select-bordered w-full max-w-xs focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200" id="departmentFilter" aria-label="Abteilung filtern">
-    <option value="">Alle Abteilungen</option>
-    {% for department in departments %}
-    <option value="{{ department }}">{{ department }}</option>
-    {% endfor %}
-</select>
-{% endblock %}
-
-{% block table_headers %}
-<th>Name</th>
-<th>Barcode</th>
-<th>Abteilung</th>
-<th>E-Mail</th>
-<th>Benutzer</th>
-<th>Status</th>
-<th class="text-right">Aktionen</th>
-{% endblock %}
-
-{% block table_rows %}
-{% for worker in workers %}
-<tr class="hover data-row" data-department="{{ worker.department or '' }}">
-    <td>
-        <div class="flex items-center space-x-3">
-            <div>
-                <a href="{{ url_for('workers.details', original_barcode=worker.barcode) }}" class="link link-hover font-medium">
-                    {{ worker.firstname }} {{ worker.lastname }}
-                </a>
-            </div>
-        </div>
-    </td>
-    <td>
-        <div class="badge badge-outline">{{ worker.barcode }}</div>
-    </td>
-    <td>
-        {% if worker.department %}
-            <div class="badge badge-primary badge-outline">{{ worker.department }}</div>
-        {% else %}
-            <div class="badge badge-ghost">Keine Abteilung</div>
-        {% endif %}
-    </td>
-    <td>
-        {% if worker.email %}
-            <a href="mailto:{{ worker.email }}" class="link link-hover text-primary">
-                {{ worker.email }}
-            </a>
-        {% else %}
-            <span class="text-gray-400">-</span>
-        {% endif %}
-    </td>
-    <td>
-        {% if worker.username %}
-            <div class="badge badge-info gap-1">
-                <i class="fas fa-user"></i>
-                {{ worker.username }}
-            </div>
-            {% if worker.role %}
-                <div class="badge badge-outline text-xs mt-1">{{ worker.role }}</div>
-            {% endif %}
-        {% else %}
-            <span class="text-gray-400">-</span>
-        {% endif %}
-    </td>
-    <td>
-        {% if worker.active_lendings %}
-            <div class="badge badge-warning gap-1">
-                <i class="fas fa-tools"></i>
-                {{ worker.active_lendings }} Ausleihen aktiv
-            </div>
-        {% else %}
-            <div class="badge badge-success gap-1">
-                <i class="fas fa-check"></i>
-                Keine Ausleihen
-            </div>
-        {% endif %}
-    </td>
-    <td class="text-right">
-        <div class="btn-group">
-            <a href="{{ url_for('workers.details', original_barcode=worker.barcode) }}" class="btn btn-sm btn-ghost">
-                <i class="fas fa-edit"></i>
-            </a>
-            <button class="btn btn-sm btn-ghost btn-error" onclick="deleteItem('worker', '{{ worker.barcode }}')">
-                <i class="fas fa-trash"></i>
-            </button>
-        </div>
-    </td>
-</tr>
-{% endfor %}
-{% endblock %}
-
-{% block scripts %}
-{{ super() }}
-<script nonce="{{ csp_nonce }}">
-document.addEventListener('DOMContentLoaded', function() {
-    // Filter-Funktionalität
-    function applyFilters() {
-        const department = document.getElementById('departmentFilter').value;
-        
-        document.querySelectorAll('.data-row').forEach(row => {
-            const matchesDepartment = !department || row.dataset.department === department;
-            row.style.display = matchesDepartment ? '' : 'none';
-        });
-    }
-
-    // Filter-Event-Listener
-    const departmentFilter = document.getElementById('departmentFilter');
-    if (departmentFilter) {
-        departmentFilter.addEventListener('change', applyFilters);
-    }
-});
-</script>
-{% endblock %} 
\ No newline at end of file
+{% extends "shared/list_base.html" %}
+{% set help_title = 'Mitarbeiter – Hilfe' %}
+{% set help_text = 'Mitarbeiterdaten und Ausleihen überblicken.' %}
+{% set help_items = [
+    'Mit dem Abteilungsfilter die Anzeige einschränken.',
+    'Klick auf den Namen öffnet Details mit aktiven Ausleihen und Historie.',
+    'Rückgaben sind direkt in den Mitarbeiter-Details möglich.'
+] %}
+
+{% block actions %}
+<div class="flex gap-2">
+    <a href="{{ url_for('workers.add') }}" class="btn btn-primary hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">
+        <i class="fas fa-plus me-2"></i> Neuer Mitarbeiter
+    </a>
+</div>
+{% endblock %}
+
+{% block filters %}
+<select class="select select-bordered w-full max-w-xs focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200" id="departmentFilter" aria-label="Abteilung filtern">
+    <option value="">Alle Abteilungen</option>
+    {% for department in departments %}
+    <option value="{{ department }}">{{ department }}</option>
+    {% endfor %}
+</select>
+{% endblock %}
+
+{% block table_headers %}
+<th>Name</th>
+<th>Barcode</th>
+<th>Abteilung</th>
+<th>E-Mail</th>
+<th>Benutzer</th>
+<th>Status</th>
+<th class="text-right">Aktionen</th>
+{% endblock %}
+
+{% block table_rows %}
+{% for worker in workers %}
+<tr class="hover data-row" data-department="{{ worker.department or '' }}">
+    <td>
+        <div class="flex items-center space-x-3">
+            <div>
+                <a href="{{ url_for('workers.details', original_barcode=worker.barcode) }}" class="link link-hover font-medium">
+                    {{ worker.firstname }} {{ worker.lastname }}
+                </a>
+            </div>
+        </div>
+    </td>
+    <td>
+        <div class="badge badge-outline">{{ worker.barcode }}</div>
+    </td>
+    <td>
+        {% if worker.department %}
+            <div class="badge badge-primary badge-outline">{{ worker.department }}</div>
+        {% else %}
+            <div class="badge badge-ghost">Keine Abteilung</div>
+        {% endif %}
+    </td>
+    <td>
+        {% if worker.email %}
+            <a href="mailto:{{ worker.email }}" class="link link-hover text-primary">
+                {{ worker.email }}
+            </a>
+        {% else %}
+            <span class="text-gray-400">-</span>
+        {% endif %}
+    </td>
+    <td>
+        {% if worker.username %}
+            <div class="badge badge-info gap-1">
+                <i class="fas fa-user"></i>
+                {{ worker.username }}
+            </div>
+            {% if worker.role %}
+                <div class="badge badge-outline text-xs mt-1">{{ worker.role }}</div>
+            {% endif %}
+        {% else %}
+            <span class="text-gray-400">-</span>
+        {% endif %}
+    </td>
+    <td>
+        {% if worker.active_lendings %}
+            <div class="badge badge-warning gap-1">
+                <i class="fas fa-tools"></i>
+                {{ worker.active_lendings }} Ausleihen aktiv
+            </div>
+        {% else %}
+            <div class="badge badge-success gap-1">
+                <i class="fas fa-check"></i>
+                Keine Ausleihen
+            </div>
+        {% endif %}
+    </td>
+    <td class="text-right">
+        <div class="btn-group">
+            <a href="{{ url_for('workers.details', original_barcode=worker.barcode) }}" class="btn btn-sm btn-ghost">
+                <i class="fas fa-edit"></i>
+            </a>
+            <button class="btn btn-sm btn-ghost btn-error" onclick="deleteItem('worker', '{{ worker.barcode }}')">
+                <i class="fas fa-trash"></i>
+            </button>
+        </div>
+    </td>
+</tr>
+{% endfor %}
+{% endblock %}