151 lines
4.1 KiB
HTML
151 lines
4.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ report.title }} - {{ app_name }}{% endblock %}
|
|
{% block page_title %}{{ report.title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="report-view">
|
|
<!-- Report Header -->
|
|
<div class="report-header-bar">
|
|
<div class="report-meta">
|
|
<span class="badge badge-{{ report.type }}">{{ report.type.upper() }}</span>
|
|
<span class="timestamp"><i class="fas fa-clock"></i> Generated: {{ report.generated_at }}</span>
|
|
<span class="period"><i class="fas fa-calendar"></i> {{ report.period_start[:10] }} to {{ report.period_end[:10] }}</span>
|
|
</div>
|
|
<div class="report-actions">
|
|
<button class="btn btn-secondary" onclick="window.print()">
|
|
<i class="fas fa-print"></i> Print
|
|
</button>
|
|
<a href="/export/json" class="btn btn-secondary">
|
|
<i class="fas fa-download"></i> Export
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary -->
|
|
<div class="panel highlight">
|
|
<h3><i class="fas fa-file-alt"></i> Executive Summary</h3>
|
|
<p class="summary-text">{{ report.summary }}</p>
|
|
</div>
|
|
|
|
<!-- Metrics -->
|
|
{% if report.metrics %}
|
|
<div class="panel">
|
|
<h3><i class="fas fa-chart-pie"></i> Key Metrics</h3>
|
|
<div class="metrics-list">
|
|
{% for key, value in report.metrics.items() %}
|
|
{% if value is not mapping and value is not sequence %}
|
|
<div class="metric-item">
|
|
<span class="metric-key">{{ key.replace('_', ' ').title() }}</span>
|
|
<span class="metric-val">{{ value }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Sections -->
|
|
{% for section in report.sections %}
|
|
<div class="panel">
|
|
<h3><i class="fas fa-section"></i> {{ section.title }}</h3>
|
|
<div class="section-content">
|
|
{% if section.content.startswith('{') or section.content.startswith('[') %}
|
|
<pre class="json-content"><code>{{ section.content }}</code></pre>
|
|
{% else %}
|
|
<p>{{ section.content | nl2br }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<!-- Recommendations -->
|
|
{% if report.recommendations %}
|
|
<div class="panel recommendations-panel">
|
|
<h3><i class="fas fa-lightbulb"></i> Recommendations</h3>
|
|
<ul class="recommendations-list">
|
|
{% for rec in report.recommendations %}
|
|
<li><i class="fas fa-check-circle"></i> {{ rec }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.report-view {
|
|
max-width: 1000px;
|
|
}
|
|
.report-header-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.report-meta {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
.report-meta span {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
.summary-text {
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
color: var(--text-primary);
|
|
}
|
|
.metrics-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
.metric-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.75rem;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 6px;
|
|
}
|
|
.metric-key {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
}
|
|
.metric-val {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
.section-content pre {
|
|
background: var(--bg-tertiary);
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
}
|
|
.recommendations-panel {
|
|
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
|
|
}
|
|
.recommendations-list li {
|
|
padding: 0.5rem 0;
|
|
color: var(--text-primary);
|
|
}
|
|
.recommendations-list li i {
|
|
color: var(--success);
|
|
margin-right: 0.5rem;
|
|
}
|
|
@media print {
|
|
.sidebar, .top-bar, .report-actions {
|
|
display: none;
|
|
}
|
|
.main-content {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|