124 lines
2.9 KiB
HTML
124 lines
2.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<!-- Year Filter -->
|
|
<div class="year-filter">
|
|
<label for="year-select">Year:</label>
|
|
<select id="year-select" onchange="window.location.href='?year='+this.value">
|
|
{% for year in available_years %}
|
|
<option value="{{ year }}" {% if year == current_year %}selected{% endif %}>
|
|
{{ year }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Annual Summary Table -->
|
|
<table class="summary-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Client</th>
|
|
{% for month in months %}
|
|
<th>{{ month }}</th>
|
|
{% endfor %}
|
|
<th>Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for data in monthly_data %}
|
|
<tr>
|
|
<td>{{ data.client.name }}</td>
|
|
{% for total in data.monthly_totals %}
|
|
<td>{{ total|floatformat:2 }}</td>
|
|
{% endfor %}
|
|
<td class="total">{{ data.year_total|floatformat:2 }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Navigation Buttons -->
|
|
<div class="navigation-buttons">
|
|
<a href="{% url 'table_one' %}" class="nav-button">
|
|
Go to Helium Input
|
|
</a>
|
|
<a href="{% url 'table_two' %}" class="nav-button">
|
|
Go to Helium Output
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.year-filter {
|
|
margin: 20px 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.year-filter label {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.year-filter select {
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.summary-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.summary-table th, .summary-table td {
|
|
padding: 10px;
|
|
text-align: center;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.summary-table th {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.summary-table tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.summary-table tr:hover {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.total {
|
|
font-weight: bold;
|
|
background-color: #e6f2ff;
|
|
}
|
|
|
|
.navigation-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.nav-button {
|
|
padding: 12px 24px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.nav-button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
</style>
|
|
{% endblock %} |