From d27ff7b04197489b6e26d5c1f8fb7e207be0f9d8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 22 Feb 2026 20:58:12 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20table=20sor?=
 =?UTF-8?q?ting=20accessibility=20and=20fix=20base=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implemented accessible table sorting in `list_base.html`:
  - Added `role="button"` and `tabindex="0"` to header wrappers.
  - Added `aria-label` for descriptive sorting actions.
  - Added keyboard support (Enter/Space) for sorting.
  - Added `aria-sort` attribute to reflect current sort state.
  - Added focus ring styles for better keyboard navigation visibility.
- Fixed HTML syntax error in `base.html`:
  - Replaced mismatched `</button>` with `</div>` for `quickScanTrigger`.
- Updated `.Jules/palette.md` with learnings about accessible table sorting.

Co-authored-by: Woschj <81321922+Woschj@users.noreply.github.com>
---
 .Jules/palette.md                   |   4 +
 app/templates/base.html             |   2 +-
 app/templates/shared/list_base.html | 776 ++++++++++++++--------------
 3 files changed, 404 insertions(+), 378 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 3ce56a2..ee9371c 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-02-15 - [Accessible Table Sorting]
+**Learning:** Interactive table headers that only use `cursor-pointer` are inaccessible to keyboard and screen reader users. Adding `role="button"`, `tabindex="0"`, and `aria-sort` attributes provides the necessary semantics and focusability.
+**Action:** Always enhance JavaScript-driven table sorting with proper ARIA roles and keyboard listeners.
diff --git a/app/templates/base.html b/app/templates/base.html
index d35052c..9d24adb 100755
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -243,7 +243,7 @@
                     <!-- Scanner Animation -->
                     <div class="absolute w-full h-0.5 bg-primary/50 -top-1 left-0 animate-scanner after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-primary/30"></div>
                 </div>
-            </button>
+            </div>
             
             <!-- Trennlinie -->
             <div class="sidebar-divider"></div>
diff --git a/app/templates/shared/list_base.html b/app/templates/shared/list_base.html
index c89a7b4..b125e35 100755
--- a/app/templates/shared/list_base.html
+++ b/app/templates/shared/list_base.html
@@ -1,382 +1,404 @@
-{% 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="input-group">
+                        <input type="text"
+                               placeholder="Suchen..."
+                               class="input input-bordered 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>
+                            <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 focus:outline-none focus:ring-2 focus:ring-primary/50 rounded-lg px-2 -mx-2 transition-all';
+            wrapper.setAttribute('role', 'button');
+            wrapper.setAttribute('tabindex', '0');
+            const columnName = th.textContent.trim();
+            wrapper.setAttribute('aria-label', `Sortieren nach ${columnName}`);
+
+            wrapper.innerHTML = `
+                ${th.innerHTML}
+                <span class="sort-icons opacity-50">
+                    <i class="fas fa-sort"></i>
+                </span>
+            `;
+            th.innerHTML = '';
+            th.appendChild(wrapper);
+
+            const sortHandler = () => {
+                const column = Array.from(th.parentElement.children).indexOf(th);
+                sortTable(column, th);
+            };
+
+            wrapper.addEventListener('click', sortHandler);
+            wrapper.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    sortHandler();
+                }
+            });
+        }
+    });
+
+    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>';
+            th.setAttribute('aria-sort', 'ascending');
+        } else {
+            currentIcon.innerHTML = '<i class="fas fa-sort-down"></i>';
+            th.setAttribute('aria-sort', 'descending');
+        }
+
+        // Reset aria-sort on other columns
+        th.parentElement.querySelectorAll('th').forEach(otherTh => {
+            if (otherTh !== th) {
+                otherTh.removeAttribute('aria-sort');
+            }
+        });
+
+        // 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>
 {% endblock %} 
\ No newline at end of file