From 29e724f3d6f19c82eb0c561762da118ea4698860 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Fri, 12 Jun 2026 11:00:58 -0500
Subject: [PATCH] sdf

---
 public/js/views/invoice-view.js | 150 ++++++++++++++++----------------
 1 file changed, 76 insertions(+), 74 deletions(-)

diff --git a/public/js/views/invoice-view.js b/public/js/views/invoice-view.js
index ea5a6b5..d19fde3 100644
--- a/public/js/views/invoice-view.js
+++ b/public/js/views/invoice-view.js
@@ -562,81 +562,83 @@ export function injectToolbar() {
     const c = document.getElementById('invoice-toolbar');
     if (!c) return;
     c.innerHTML = `
-        <div class="flex flex-wrap items-center gap-3 mb-4 p-4 bg-white rounded-lg shadow-sm border border-gray-200">
-            <div class="flex items-center gap-1 border border-gray-300 rounded-lg p-1 bg-gray-100">
-                <button data-status-filter="all" onclick="window.invoiceView.setStatus('all')"
-                    class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">All</button>
-                <button data-status-filter="unpaid" onclick="window.invoiceView.setStatus('unpaid')"
-                    class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Unpaid
-                    <span id="unpaid-badge" class="hidden absolute -top-1.5 -right-1.5 bg-gray-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
-                <button data-status-filter="open" onclick="window.invoiceView.setStatus('open')"
-                    class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Open
-                    <span id="open-badge" class="hidden absolute -top-1.5 -right-1.5 bg-orange-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
-                <button data-status-filter="sent" onclick="window.invoiceView.setStatus('sent')"
-                    class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Sent
-                    <span id="sent-badge" class="hidden absolute -top-1.5 -right-1.5 bg-cyan-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
-                <button data-status-filter="partial" onclick="window.invoiceView.setStatus('partial')"
-                    class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Partial
-                    <span id="partial-badge" class="hidden absolute -top-1.5 -right-1.5 bg-yellow-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
-                <button data-status-filter="paid" onclick="window.invoiceView.setStatus('paid')"
-                    class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Paid
-                    <span id="paid-badge" class="hidden absolute -top-1.5 -right-1.5 bg-green-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
-                <button data-status-filter="overdue" onclick="window.invoiceView.setStatus('overdue')"
-                    class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Overdue
-                    <span id="overdue-badge" class="hidden absolute -top-1.5 -right-1.5 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
+        <div class="space-y-2 mb-4 p-4 bg-white rounded-lg shadow-sm border border-gray-200">
+            <div class="flex flex-wrap items-center gap-3">
+                <div class="flex items-center gap-1 border border-gray-300 rounded-lg p-1 bg-gray-100">
+                    <button data-status-filter="all" onclick="window.invoiceView.setStatus('all')"
+                        class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">All</button>
+                    <button data-status-filter="unpaid" onclick="window.invoiceView.setStatus('unpaid')"
+                        class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Unpaid
+                        <span id="unpaid-badge" class="hidden absolute -top-1.5 -right-1.5 bg-gray-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
+                    <button data-status-filter="open" onclick="window.invoiceView.setStatus('open')"
+                        class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Open
+                        <span id="open-badge" class="hidden absolute -top-1.5 -right-1.5 bg-orange-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
+                    <button data-status-filter="sent" onclick="window.invoiceView.setStatus('sent')"
+                        class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Sent
+                        <span id="sent-badge" class="hidden absolute -top-1.5 -right-1.5 bg-cyan-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
+                    <button data-status-filter="partial" onclick="window.invoiceView.setStatus('partial')"
+                        class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Partial
+                        <span id="partial-badge" class="hidden absolute -top-1.5 -right-1.5 bg-yellow-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
+                    <button data-status-filter="paid" onclick="window.invoiceView.setStatus('paid')"
+                        class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Paid
+                        <span id="paid-badge" class="hidden absolute -top-1.5 -right-1.5 bg-green-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
+                    <button data-status-filter="overdue" onclick="window.invoiceView.setStatus('overdue')"
+                        class="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">Overdue
+                        <span id="overdue-badge" class="hidden absolute -top-1.5 -right-1.5 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span></button>
+                </div>
+                <div class="w-px h-8 bg-gray-300"></div>
+                <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 flex-1 min-w-[140px] max-w-[280px] 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">
+                    <label class="text-sm font-medium text-gray-700">Technician:</label>
+                    <select id="invoice-filter-worker" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm bg-white">
+                        <option value="">All</option>
+                    </select>
+                </div>
+                <div class="w-px h-8 bg-gray-300"></div>
+                <div class="flex items-center gap-2">
+                    <label class="text-sm font-medium text-gray-700">Category:</label>
+                    <select id="invoice-filter-category" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm bg-white">
+                        <option value="">All</option>
+                        <option value="9" ${filterCategory === '9' ? 'selected' : ''}>Parts</option>
+                        <option value="115" ${filterCategory === '115' ? 'selected' : ''}>Subscription</option>
+                        <option value="5" ${filterCategory === '5' ? 'selected' : ''}>Labor</option>
+                    </select>
+                </div>
+                <div class="w-px h-8 bg-gray-300"></div>
+                <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 flex-1 min-w-[140px] max-w-[280px] focus:ring-blue-500 focus:border-blue-500">
+                </div>
             </div>
-            <div class="w-px h-8 bg-gray-300"></div>
-            <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 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">
-                <label class="text-sm font-medium text-gray-700">Technician:</label>
-                <select id="invoice-filter-worker" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm bg-white">
-                    <option value="">All</option>
-                </select>
-            </div>            
-            <div class="w-px h-8 bg-gray-300"></div>
-            <div class="flex items-center gap-2">
-                <label class="text-sm font-medium text-gray-700">Group:</label>
-                <select id="invoice-group-by" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm bg-white">
-                    <option value="none" ${groupBy === 'none' ? 'selected' : ''}>None</option>
-                    <option value="week" ${groupBy === 'week' ? 'selected' : ''}>Week</option>
-                    <option value="month" ${groupBy === 'month' ? 'selected' : ''}>Month</option>
-                </select>
-            </div>
-            <div class="w-px h-8 bg-gray-300"></div>
-            <div class="flex items-center gap-2">
-                <label class="text-sm font-medium text-gray-700">Category:</label>
-                <select id="invoice-filter-category" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm bg-white">
-                    <option value="">All</option>
-                    <option value="9" ${filterCategory === '9' ? 'selected' : ''}>Parts</option>
-                    <option value="115" ${filterCategory === '115' ? 'selected' : ''}>Subscription</option>
-                    <option value="5" ${filterCategory === '5' ? 'selected' : ''}>Labor</option>
-                </select>
-            </div>
-            <div class="w-px h-8 bg-gray-300"></div>
-            <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 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
-                </span>
+            <div class="flex items-center gap-3">
+                <div class="flex items-center gap-2">
+                    <label class="text-sm font-medium text-gray-700">Group:</label>
+                    <select id="invoice-group-by" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm bg-white">
+                        <option value="none" ${groupBy === 'none' ? 'selected' : ''}>None</option>
+                        <option value="week" ${groupBy === 'week' ? 'selected' : ''}>Week</option>
+                        <option value="month" ${groupBy === 'month' ? 'selected' : ''}>Month</option>
+                    </select>
+                </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
+                    </span>
+                </div>
             </div>
         </div>`;