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

last state

Browse Source
This commit is contained in:
Andreas Knuth
2026-02-02 16:15:53 -06:00
parent 5e46fa06f1
commit eef316402c
5 changed files with 592 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
public/index.html
View File

@@ -7,6 +7,7 @@
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
.modal {
display: none;
@@ -231,12 +232,41 @@
<form id="quote-form" class="space-y-6">
<div class="grid grid-cols-3 gap-4">
<div>
<div x-data="customerSearch('quote')" class="relative">
<label class="block text-sm font-medium text-gray-700 mb-1">Customer</label>
<select id="quote-customer" required
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option value="">Select Customer...</option>
</select>
<div class="relative">
<input
type="text"
x-model="search"
@click="open = true"
@focus="open = true"
@keydown.escape="open = false"
@keydown.arrow-down.prevent="highlightNext()"
@keydown.arrow-up.prevent="highlightPrev()"
@keydown.enter.prevent="selectHighlighted()"
placeholder="Search customer..."
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
/>
<input type="hidden" id="quote-customer" :value="selectedId" required>
<div
x-show="open && filteredCustomers.length > 0"
@click.away="open = false"
x-transition
class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto"
>
<template x-for="(customer, index) in filteredCustomers" :key="customer.id">
<div
@click="selectCustomer(customer)"
:class="{'bg-blue-100': index === highlighted, 'hover:bg-gray-100': index !== highlighted}"
class="px-4 py-2 cursor-pointer text-sm"
>
<div class="font-medium" x-text="customer.name"></div>
<div class="text-xs text-gray-500" x-text="customer.city + ', ' + customer.state"></div>
</div>
</template>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Date</label>
@@ -306,12 +336,41 @@
<form id="invoice-form" class="space-y-6">
<div class="grid grid-cols-4 gap-4">
<div>
<div x-data="customerSearch('invoice')" class="relative">
<label class="block text-sm font-medium text-gray-700 mb-1">Customer</label>
<select id="invoice-customer" required
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option value="">Select Customer...</option>
</select>
<div class="relative">
<input
type="text"
x-model="search"
@click="open = true"
@focus="open = true"
@keydown.escape="open = false"
@keydown.arrow-down.prevent="highlightNext()"
@keydown.arrow-up.prevent="highlightPrev()"
@keydown.enter.prevent="selectHighlighted()"
placeholder="Search customer..."
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
/>
<input type="hidden" id="invoice-customer" :value="selectedId" required>
<div
x-show="open && filteredCustomers.length > 0"
@click.away="open = false"
x-transition
class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto"
>
<template x-for="(customer, index) in filteredCustomers" :key="customer.id">
<div
@click="selectCustomer(customer)"
:class="{'bg-blue-100': index === highlighted, 'hover:bg-gray-100': index !== highlighted}"
class="px-4 py-2 cursor-pointer text-sm"
>
<div class="font-medium" x-text="customer.name"></div>
<div class="text-xs text-gray-500" x-text="customer.city + ', ' + customer.state"></div>
</div>
</template>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Date</label>
@@ -381,4 +440,4 @@
<script src="app.js"></script>
</body>
</html>
</html>