0b5aa51985
- Add Jinja2 templates and static files for web UI - Create frontend routes for invoice management - Implement home page with recent invoices list - Add invoice creation form with dynamic items - Create invoice search functionality - Implement invoice details view with status update - Add JavaScript for form validation and dynamic UI - Update main.py to serve static files - Update documentation
127 lines
4.2 KiB
HTML
127 lines
4.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Create Invoice - Invoice Generation Service{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="card">
|
|
<h2>Create New Invoice</h2>
|
|
|
|
{% if error %}
|
|
<div class="alert alert-error">
|
|
{{ error }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form id="invoice-form" method="POST" action="{{ url_for('create_invoice') }}">
|
|
<div class="form-section">
|
|
<h3>Customer Information</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="customer_name">Customer Name *</label>
|
|
<input type="text" id="customer_name" name="customer_name" required value="{{ customer_name or '' }}">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="customer_email">Customer Email</label>
|
|
<input type="email" id="customer_email" name="customer_email" value="{{ customer_email or '' }}">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="customer_address">Customer Address</label>
|
|
<textarea id="customer_address" name="customer_address" rows="3">{{ customer_address or '' }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Invoice Details</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="due_date">Due Date *</label>
|
|
<input type="date" id="due_date" name="due_date" required value="{{ due_date }}">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="notes">Notes</label>
|
|
<textarea id="notes" name="notes" rows="3">{{ notes or '' }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Invoice Items</h3>
|
|
<p>Add at least one item to your invoice.</p>
|
|
|
|
<div class="invoice-items">
|
|
<div class="invoice-item">
|
|
<div class="form-group">
|
|
<label for="item-description-0">Description *</label>
|
|
<input type="text" id="item-description-0" name="items[0][description]" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="item-quantity-0">Quantity *</label>
|
|
<input type="number" id="item-quantity-0" name="items[0][quantity]" min="0.01" step="0.01" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="item-unit-price-0">Unit Price ($) *</label>
|
|
<input type="number" id="item-unit-price-0" name="items[0][unit_price]" min="0.01" step="0.01" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Amount ($)</label>
|
|
<div class="amount-display">0.00</div>
|
|
</div>
|
|
|
|
<button type="button" class="btn remove-item-btn">Remove</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-buttons">
|
|
<button type="button" id="add-item-btn" class="btn add-item-btn">Add Item</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn">Generate Invoice</button>
|
|
<a href="{{ url_for('home') }}" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.form-section {
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.form-section h3 {
|
|
margin-bottom: 1rem;
|
|
color: #3498db;
|
|
}
|
|
|
|
.invoice-items {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.item-buttons {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-actions {
|
|
margin-top: 2rem;
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.amount-display {
|
|
padding: 0.75rem;
|
|
background-color: #f5f7fa;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
{% endblock %} |