Automated Action 0b5aa51985 Add web frontend for invoice generation service
- 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
2025-05-18 21:43:44 +00:00

96 lines
2.7 KiB
HTML

{% extends "base.html" %}
{% block title %}Home - Invoice Generation Service{% endblock %}
{% block content %}
<div class="card">
<h2>Welcome to the Invoice Generation Service</h2>
<p>This application allows you to create, manage, and track invoices. Use the navigation menu above to access different features.</p>
<div class="features">
<div class="feature">
<h3>Create Invoices</h3>
<p>Generate new invoices with customer information, due dates, and line items.</p>
<a href="{{ url_for('create_invoice_page') }}" class="btn">Create Invoice</a>
</div>
<div class="feature">
<h3>Find Invoices</h3>
<p>Look up existing invoices by their unique invoice number.</p>
<a href="{{ url_for('search_invoice_page') }}" class="btn">Find Invoice</a>
</div>
</div>
</div>
{% if invoices %}
<div class="card">
<h2>Recent Invoices</h2>
<table>
<thead>
<tr>
<th>Invoice Number</th>
<th>Customer</th>
<th>Date Created</th>
<th>Due Date</th>
<th>Total Amount</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for invoice in invoices %}
<tr>
<td>{{ invoice.invoice_number }}</td>
<td>{{ invoice.customer_name }}</td>
<td>{{ invoice.date_created.strftime('%Y-%m-%d') }}</td>
<td>{{ invoice.due_date.strftime('%Y-%m-%d') }}</td>
<td>${{ "%.2f"|format(invoice.total_amount) }}</td>
<td>
<span class="invoice-status status-{{ invoice.status.lower() }}">
{{ invoice.status }}
</span>
</td>
<td>
<a href="{{ url_for('invoice_details', invoice_id=invoice.id) }}" class="btn">View</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% endblock %}
{% block extra_css %}
<style>
.features {
display: flex;
gap: 2rem;
margin-top: 2rem;
}
.feature {
flex: 1;
padding: 1.5rem;
background-color: #f9f9f9;
border-radius: 8px;
text-align: center;
}
.feature h3 {
margin-bottom: 0.5rem;
color: #2c3e50;
}
.feature p {
margin-bottom: 1.5rem;
color: #7f8c8d;
}
@media (max-width: 768px) {
.features {
flex-direction: column;
}
}
</style>
{% endblock %}