aknuth/invoice-system
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

sdf

Browse Source
This commit is contained in:
Andreas Knuth
2026-06-12 11:00:58 -05:00
parent 6670bb7c82
commit 29e724f3d6
1 changed files with 76 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/js/views/invoice-view.js
View File

@@ -562,7 +562,8 @@ export function injectToolbar() {
const c = document.getElementById('invoice-toolbar'); const c = document.getElementById('invoice-toolbar');
if (!c) return; if (!c) return;
c.innerHTML = ` 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="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"> <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')" <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> class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors bg-white text-gray-600">All</button>
@@ -589,7 +590,7 @@ export function injectToolbar() {
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Customer:</label> <label class="text-sm font-medium text-gray-700">Customer:</label>
<input type="text" id="invoice-filter-customer" placeholder="Filter by name..." value="${filterCustomer}" <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"> 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="w-px h-8 bg-gray-300"></div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@@ -599,15 +600,6 @@ export function injectToolbar() {
</select> </select>
</div> </div>
<div class="w-px h-8 bg-gray-300"></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"> <div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Category:</label> <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"> <select id="invoice-filter-category" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm bg-white">
@@ -621,9 +613,18 @@ export function injectToolbar() {
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Item:</label> <label class="text-sm font-medium text-gray-700">Item:</label>
<input type="text" id="invoice-filter-item-search" placeholder="Search descriptions..." value="${filterItemSearch}" <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"> 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="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>
<div class="w-px h-8 bg-gray-300"></div>
<div class="ml-auto flex items-center gap-4"> <div class="ml-auto flex items-center gap-4">
<button onclick="window.invoiceView.resetFilters()" title="Reset all filters" <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"> 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">
@@ -638,6 +639,7 @@ export function injectToolbar() {
<span id="invoice-count" class="font-semibold text-gray-700">0</span> invoices <span id="invoice-count" class="font-semibold text-gray-700">0</span> invoices
</span> </span>
</div> </div>
</div>
</div>`; </div>`;
updateStatusButtons(); updateStatusButtons();