feat: Add job statistics overview to dashboard with styling enhancements

This commit is contained in:
JB
2025-11-30 15:28:37 -08:00
parent 7db1779ca5
commit c7dd8cf13a
2 changed files with 68 additions and 1 deletions
+11 -1
View File
@@ -7,7 +7,7 @@ from typing import Any, Dict, Optional, cast
from flask import Blueprint, redirect, render_template, request, url_for, jsonify, current_app from flask import Blueprint, redirect, render_template, request, url_for, jsonify, current_app
from werkzeug.utils import secure_filename from werkzeug.utils import secure_filename
from abogen.web.service import PendingJob from abogen.web.service import PendingJob, JobStatus
from abogen.web.routes.utils.service import get_service, remove_pending_job, submit_job from abogen.web.routes.utils.service import get_service, remove_pending_job, submit_job
from abogen.web.routes.utils.settings import load_settings from abogen.web.routes.utils.settings import load_settings
from abogen.web.routes.utils.voice import template_options from abogen.web.routes.utils.voice import template_options
@@ -48,11 +48,21 @@ def index():
step_name = steps[min(step_index, len(steps)-1)] step_name = steps[min(step_index, len(steps)-1)]
return redirect(url_for("main.wizard_step", step=step_name, pending_id=pending.id)) return redirect(url_for("main.wizard_step", step=step_name, pending_id=pending.id))
jobs = get_service().list_jobs()
stats = {
"total": len(jobs),
"completed": sum(1 for j in jobs if j.status == JobStatus.COMPLETED),
"running": sum(1 for j in jobs if j.status == JobStatus.RUNNING),
"pending": sum(1 for j in jobs if j.status == JobStatus.PENDING),
"failed": sum(1 for j in jobs if j.status == JobStatus.FAILED),
}
return render_template( return render_template(
"index.html", "index.html",
options=template_options(), options=template_options(),
settings=load_settings(), settings=load_settings(),
jobs_panel=render_jobs_panel(), jobs_panel=render_jobs_panel(),
stats=stats,
) )
@main_bp.route("/wizard") @main_bp.route("/wizard")
+57
View File
@@ -3,6 +3,63 @@
{% block title %}abogen · Dashboard{% endblock %} {% block title %}abogen · Dashboard{% endblock %}
{% block content %} {% block content %}
<style>
.stats-overview {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.stat-card {
background: var(--bg-surface, #fff);
border: 1px solid var(--border-subtle, #ddd);
border-radius: var(--radius-md, 8px);
padding: 1rem;
flex: 1;
min-width: 120px;
text-align: center;
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}
.stat-card__value {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--text-main, #333);
line-height: 1.2;
}
.stat-card__label {
display: block;
font-size: 0.75rem;
color: var(--text-muted, #666);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
</style>
<section class="stats-overview">
<div class="stat-card">
<span class="stat-card__value">{{ stats.total }}</span>
<span class="stat-card__label">Total Jobs</span>
</div>
<div class="stat-card">
<span class="stat-card__value">{{ stats.completed }}</span>
<span class="stat-card__label">Converted</span>
</div>
<div class="stat-card">
<span class="stat-card__value">{{ stats.running }}</span>
<span class="stat-card__label">Converting</span>
</div>
<div class="stat-card">
<span class="stat-card__value">{{ stats.pending }}</span>
<span class="stat-card__label">Pending</span>
</div>
<div class="stat-card">
<span class="stat-card__value">{{ stats.failed }}</span>
<span class="stat-card__label">Failed</span>
</div>
</section>
<section class="card card--workflow"> <section class="card card--workflow">
<h1 class="card__title">Create a New Audiobook</h1> <h1 class="card__title">Create a New Audiobook</h1>
<p class="card__subtitle">Kick off a fresh conversion with your manuscript or pasted text. You can fine-tune chapters and entities in the next steps.</p> <p class="card__subtitle">Kick off a fresh conversion with your manuscript or pasted text. You can fine-tune chapters and entities in the next steps.</p>