87 lines
3.4 KiB
HTML
87 lines
3.4 KiB
HTML
{% extends "layout.html" %}
|
|
{% block content %}
|
|
|
|
<style>
|
|
/* Tighter top margin to shift content higher on page */
|
|
@page { size: A4 portrait; margin: 0.35in 0.5in 0.5in 0.5in; }
|
|
html, body { background: #fff; }
|
|
|
|
/* Hide base layout chrome during print */
|
|
@media print {
|
|
body * { visibility: hidden !important; }
|
|
.print-root, .print-root * { visibility: visible !important; }
|
|
.print-root { position: static !important; width: auto !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; }
|
|
}
|
|
|
|
.print-root { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
|
|
|
|
.title { font-weight: 700; font-size: 18px; text-align: center; margin: 0 0 6px 0; }
|
|
|
|
.topline { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
|
|
.topline .lbl { font-weight: 700; }
|
|
|
|
.summary { display: flex; gap: 16px; margin: 4px 0 10px 0; flex-wrap: wrap; }
|
|
.summary strong { font-weight: 700; }
|
|
|
|
.table-wrap { width: 100% !important; }
|
|
table.print-table { width: 100%; border-collapse: collapse; font-size: 12px; }
|
|
table.print-table thead th { text-align: left; border-bottom: 2px solid #333; padding: 6px 8px; }
|
|
table.print-table tbody td { padding: 6px 8px; border-bottom: 1px solid #ddd; }
|
|
table.print-table tbody tr:nth-child(even) td { background: #fafafa; }
|
|
.num { text-align: right; }
|
|
.center { text-align: center; }
|
|
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
|
|
|
.footer { margin-top: 8px; font-size: 11px; color: #555; }
|
|
|
|
.panel, .panel-title { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
|
|
</style>
|
|
|
|
<div class="print-root">
|
|
<div class="title">PTO Ledger</div>
|
|
|
|
<div class="topline">
|
|
<div><span class="lbl">Employee:</span> {{ employee.name }}</div>
|
|
<div><span class="lbl">Year:</span> {{ selected_year }}</div>
|
|
</div>
|
|
|
|
<div class="summary">
|
|
<div><strong>Starting balance:</strong> {{ starting_balance|fmt2 }}</div>
|
|
<div><strong>Remaining:</strong> {{ remaining_balance|fmt2 }}</div>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table class="print-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="center" style="width:130px;">Date</th>
|
|
<th>Description</th>
|
|
<th class="num" style="width:120px;">Hours (±)</th>
|
|
<th class="num" style="width:140px;">Running Balance</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in ledger %}
|
|
<tr>
|
|
<td class="mono center">{% if row.date %}{{ row.date.strftime("%b %d, %Y") }}{% endif %}</td>
|
|
<td>{% if row.kind == 'start' %}<em>{{ row.desc }}</em>{% else %}{{ row.desc }}{% endif %}</td>
|
|
<td class="num mono">{% if row.delta != '' %}{{ row.delta|fmt2 }}{% endif %}</td>
|
|
<td class="num mono">{{ row.balance|fmt2 }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
Generated on {{ (request.state.now or None) and request.state.now.strftime("%b %d, %Y %I:%M %p") or "" }}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.addEventListener('load', function () {
|
|
setTimeout(function () { window.print(); }, 150);
|
|
});
|
|
window.addEventListener('afterprint', function () { window.close(); });
|
|
</script>
|
|
{% endblock %} |