feat: enhance project and scenario detail pages with metrics, improved layouts, and updated styles

This commit is contained in:
2025-11-09 19:15:48 +01:00
parent 7f5ed6a42d
commit 400f85c907
9 changed files with 419 additions and 213 deletions

View File

@@ -16,67 +16,98 @@
<h1>{{ project.name }}</h1>
<p class="text-muted">{{ project.operation_type.value.replace('_', ' ') | title }}</p>
</div>
<div class="actions">
<a class="btn btn-secondary" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit</a>
<a class="btn btn-primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
<div class="header-actions">
<a class="btn" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit Project</a>
<a class="btn primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
</div>
</header>
<section class="card">
<h2>Project Overview</h2>
<dl class="definition-list">
<div>
<dt>Location</dt>
<dd>{{ project.location or '—' }}</dd>
</div>
<div>
<dt>Description</dt>
<dd>{{ project.description or 'No description provided.' }}</dd>
</div>
<div>
<dt>Created</dt>
<dd>{{ project.created_at.strftime('%Y-%m-%d %H:%M') }}</dd>
</div>
<div>
<dt>Updated</dt>
<dd>{{ project.updated_at.strftime('%Y-%m-%d %H:%M') }}</dd>
</div>
</dl>
<section class="project-metrics">
<article class="metric-card">
<h2>Total Scenarios</h2>
<p class="metric-value">{{ scenario_stats.total }}</p>
<span class="metric-caption">Across this project</span>
</article>
<article class="metric-card">
<h2>Active</h2>
<p class="metric-value">{{ scenario_stats.active }}</p>
<span class="metric-caption">Currently live analyses</span>
</article>
<article class="metric-card">
<h2>Draft</h2>
<p class="metric-value">{{ scenario_stats.draft }}</p>
<span class="metric-caption">Awaiting validation</span>
</article>
<article class="metric-card">
<h2>Archived</h2>
<p class="metric-value">{{ scenario_stats.archived }}</p>
<span class="metric-caption">Historical references</span>
</article>
</section>
<section class="card">
<header class="card-header">
<h2>Scenarios</h2>
<a class="btn btn-link" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
</header>
{% if scenarios %}
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Currency</th>
<th>Primary Resource</th>
<th></th>
</tr>
</thead>
<tbody>
{% for scenario in scenarios %}
<tr>
<td>{{ scenario.name }}</td>
<td>{{ scenario.status.value.title() }}</td>
<td>{{ scenario.currency or '—' }}</td>
<td>{{ scenario.primary_resource.value.replace('_', ' ') | title if scenario.primary_resource else '—' }}</td>
<td class="text-right">
<a class="btn btn-link" href="{{ url_for('scenarios.view_scenario', scenario_id=scenario.id) }}">View</a>
<a class="btn btn-link" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>No scenarios yet.</p>
{% endif %}
</section>
<div class="project-layout">
<section class="card">
<h2>Project Overview</h2>
<dl class="definition-list">
<div>
<dt>Location</dt>
<dd>{{ project.location or '—' }}</dd>
</div>
<div>
<dt>Description</dt>
<dd>{{ project.description or 'No description provided.' }}</dd>
</div>
<div>
<dt>Created</dt>
<dd>{{ project.created_at.strftime('%Y-%m-%d %H:%M') }}</dd>
</div>
<div>
<dt>Updated</dt>
<dd>{{ project.updated_at.strftime('%Y-%m-%d %H:%M') }}</dd>
</div>
<div>
<dt>Latest Scenario Update</dt>
<dd>{{ scenario_stats.latest_update.strftime('%Y-%m-%d %H:%M') if scenario_stats.latest_update else '—' }}</dd>
</div>
</dl>
</section>
<section class="card">
<header class="card-header">
<h2>Scenarios</h2>
<a class="btn" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
</header>
{% if scenarios %}
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Currency</th>
<th>Primary Resource</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
{% for scenario in scenarios %}
<tr>
<td>{{ scenario.name }}</td>
<td>{{ scenario.status.value.title() }}</td>
<td>{{ scenario.currency or '—' }}</td>
<td>{{ scenario.primary_resource.value.replace('_', ' ') | title if scenario.primary_resource else '—' }}</td>
<td class="text-right">
<a class="table-link" href="{{ url_for('scenarios.view_scenario', scenario_id=scenario.id) }}">View</a>
<a class="table-link" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="empty-state">No scenarios yet. <a href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Create the first scenario.</a></p>
{% endif %}
</section>
</div>
{% endblock %}