sdf
This commit is contained in:
@@ -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>`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user