cclohmar
ca970104ee
- Passwordless email OTP authentication - Event-based expense tracking with HTMX UI - AI receipt extraction via DeepSeek Vision API - CSV/PDF report generation with email filing - PWA with service worker and manifest - Mobile-first responsive design - SQLite database with auto-migration
89 lines
4.8 KiB
HTML
89 lines
4.8 KiB
HTML
<div id="receipt-form">
|
|
{{if .AIError}}
|
|
<div class="error-message" style="background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 1rem;">
|
|
{{.AIError}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="card" style="padding: 1rem;">
|
|
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
|
<polyline points="14 2 14 8 20 8"/>
|
|
</svg>
|
|
<span style="font-weight: 600;">Receipt Details</span>
|
|
<span class="badge badge-open" style="margin-left: auto;">AI Extracted</span>
|
|
</div>
|
|
|
|
<form hx-post="/expenses" hx-target="#receipt-form" hx-swap="outerHTML"
|
|
hx-indicator="#save-indicator">
|
|
<input type="hidden" name="image_path" value="{{.ImagePath}}">
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="amount">Amount *</label>
|
|
<input type="number" id="amount" name="amount" step="0.01" min="0" placeholder="0.00"
|
|
value="{{.Amount}}" required inputmode="decimal">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="currency">Currency *</label>
|
|
<select id="currency" name="currency" required>
|
|
<option value="">Select</option>
|
|
<option value="USD" {{if eq .Currency "USD"}}selected{{end}}>USD</option>
|
|
<option value="EUR" {{if eq .Currency "EUR"}}selected{{end}}>EUR</option>
|
|
<option value="GBP" {{if eq .Currency "GBP"}}selected{{end}}>GBP</option>
|
|
<option value="JPY" {{if eq .Currency "JPY"}}selected{{end}}>JPY</option>
|
|
<option value="CHF" {{if eq .Currency "CHF"}}selected{{end}}>CHF</option>
|
|
<option value="SEK" {{if eq .Currency "SEK"}}selected{{end}}>SEK</option>
|
|
<option value="NOK" {{if eq .Currency "NOK"}}selected{{end}}>NOK</option>
|
|
<option value="DKK" {{if eq .Currency "DKK"}}selected{{end}}>DKK</option>
|
|
<option value="PLN" {{if eq .Currency "PLN"}}selected{{end}}>PLN</option>
|
|
<option value="CZK" {{if eq .Currency "CZK"}}selected{{end}}>CZK</option>
|
|
<option value="HUF" {{if eq .Currency "HUF"}}selected{{end}}>HUF</option>
|
|
<option value="RON" {{if eq .Currency "RON"}}selected{{end}}>RON</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="merchant">Merchant *</label>
|
|
<input type="text" id="merchant" name="merchant" placeholder="Store or business name"
|
|
value="{{.Merchant}}" required>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="category">Category *</label>
|
|
<select id="category" name="category" required>
|
|
<option value="">Select</option>
|
|
<option value="Food" {{if eq .Category "Food"}}selected{{end}}>Food</option>
|
|
<option value="Travel" {{if eq .Category "Travel"}}selected{{end}}>Travel</option>
|
|
<option value="Lodging" {{if eq .Category "Lodging"}}selected{{end}}>Lodging</option>
|
|
<option value="Software" {{if eq .Category "Software"}}selected{{end}}>Software</option>
|
|
<option value="Other" {{if eq .Category "Other"}}selected{{end}}>Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="date">Date *</label>
|
|
<input type="date" id="date" name="date" value="{{.Date}}" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="description">Description</label>
|
|
<textarea id="description" name="description" placeholder="Optional notes...">{{.Description}}</textarea>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<button type="submit" class="btn btn-primary" id="save-indicator">
|
|
<span class="spinner htmx-indicator"></span>
|
|
Save Expense
|
|
</button>
|
|
<button type="button" class="btn btn-secondary"
|
|
onclick="document.getElementById('receipt-form').innerHTML = ''">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|