new filter struktur

public/js/views/invoice-view.js

@@ -589,7 +589,7 @@ export function injectToolbar() {
             <div class="flex items-center gap-2">
                 <label class="text-sm font-medium text-gray-700">Customer:</label>
                 <input type="text" id="invoice-filter-customer" placeholder="Filter by name..." value="${filterCustomer}"
-                       class="px-3 py-1.5 border border-gray-300 rounded-md text-sm w-48 focus:ring-blue-500 focus:border-blue-500">
+                       class="px-3 py-1.5 border border-gray-300 rounded-md text-sm flex-1 min-w-[140px] max-w-[320px] focus:ring-blue-500 focus:border-blue-500">
             </div>
             <div class="w-px h-8 bg-gray-300"></div>
             <div class="flex items-center gap-2">
@@ -621,10 +621,18 @@ export function injectToolbar() {
             <div class="flex items-center gap-2">
                 <label class="text-sm font-medium text-gray-700">Item:</label>
                 <input type="text" id="invoice-filter-item-search" placeholder="Search descriptions..." value="${filterItemSearch}"
-                       class="px-3 py-1.5 border border-gray-300 rounded-md text-sm w-48 focus:ring-blue-500 focus:border-blue-500">
+                       class="px-3 py-1.5 border border-gray-300 rounded-md text-sm flex-1 min-w-[140px] max-w-[320px] focus:ring-blue-500 focus:border-blue-500">
             </div>
             <div class="w-px h-8 bg-gray-300"></div>
             <div class="ml-auto flex items-center gap-4">
+                <button onclick="window.invoiceView.resetFilters()" title="Reset all filters"
+                        class="flex items-center gap-1 px-2 py-1.5 text-xs text-gray-500 hover:text-red-600 hover:bg-red-50 rounded border border-gray-200 hover:border-red-200 transition-colors">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
+                        <line x1="1" y1="1" x2="23" y2="23" stroke-width="2"/>
+                    </svg>
+                    Reset
+                </button>
                 <span id="last-sync-time" class="text-xs text-gray-400">...</span>
                 <span class="text-sm text-gray-500">
                     <span id="invoice-count" class="font-semibold text-gray-700">0</span> invoices
@@ -657,6 +665,24 @@ export function injectToolbar() {
 // ============================================================
 
 export function setStatus(s) { filterStatus = s; saveSettings(); renderInvoiceView(); }
+export function resetFilters() {
+    filterStatus = 'all';
+    filterCustomer = '';
+    filterWorker = '';
+    filterCategory = '';
+    filterItemSearch = '';
+    saveSettings();
+    // Update DOM to reflect cleared values before reloading
+    const custEl = document.getElementById('invoice-filter-customer');
+    const workerEl = document.getElementById('invoice-filter-worker');
+    const catEl = document.getElementById('invoice-filter-category');
+    const searchEl = document.getElementById('invoice-filter-item-search');
+    if (custEl) custEl.value = '';
+    if (workerEl) workerEl.value = '';
+    if (catEl) catEl.value = '';
+    if (searchEl) searchEl.value = '';
+    loadInvoices();
+}
 export function viewPDF(id) { window.open(`/api/invoices/${id}/pdf`, '_blank'); }
 export function viewHTML(id) { window.open(`/api/invoices/${id}/html`, '_blank'); }
 
@@ -897,5 +923,5 @@ async function populateWorkerFilter() {
 
 window.invoiceView = {
     viewPDF, viewHTML, syncFromQBO, resetQbo, markPaid, setEmailStatus, edit, remove,
-    loadInvoices, renderInvoiceView, setStatus, checkStripePayment, editSentDates ,_addSentDateRow, _saveSentDates
+    loadInvoices, renderInvoiceView, setStatus, resetFilters, checkStripePayment, editSentDates ,_addSentDateRow, _saveSentDates
 };