guarddog-nexus/guarddog_nexus/web/templates/dashboard_stats.html

<div class="stats-grid">
    <article class="stat-card">
        <h3>{{ total_scans }}</h3>
        <small>Total Scans</small>
    </article>
    <article class="stat-card">
        <h3 class="flagged">{{ flagged_scans }}</h3>
        <small>⚠ Flagged</small>
    </article>
    <article class="stat-card">
        <h3>{{ recent_flagged }}</h3>
        <small>Flagged (7 days)</small>
    </article>
    <article class="stat-card">
        <h3>{{ total_findings }}</h3>
        <small>Total Findings</small>
    </article>
    <article class="stat-card">
        <h3 class="severity-ERROR">{{ errors_count }}</h3>
        <small>Errors</small>
    </article>
    <article class="stat-card">
        <h3 class="severity-WARNING">{{ warnings_count }}</h3>
        <small>Warnings</small>
    </article>
</div>

{% if total_findings > 0 %}
<div>
    <small>Severity ratio</small>
    <div class="severity-bar">
        {% set err_pct = (errors_count / total_findings * 100) | int %}
        {% set warn_pct = 100 - err_pct %}
        <div class="bar-error" style="width: {{ err_pct }}%;" title="ERROR: {{ errors_count }}"></div>
        <div class="bar-warning" style="width: {{ warn_pct }}%;" title="WARNING: {{ warnings_count }}"></div>
    </div>
    <div class="severity-bar-labels">
        <span class="severity-ERROR">ERROR {{ errors_count }}</span>
        <span class="severity-WARNING">WARNING {{ warnings_count }}</span>
    </div>
</div>
{% else %}
<div class="empty-state" style="padding: 1rem;">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    <h3>No findings yet</h3>
    <small>Scan results will appear here once packages are processed.</small>
</div>
{% endif %}

{% if days %}
<div>
    <small>Scan activity (14 days)</small>
    <div class="heatmap">
        {% set max_cnt = days | map(attribute=1) | max %}
        {% for day, cnt, fl in days %}
        <div class="heatmap-day" title="{{ day }}: {{ cnt }} scans, {{ fl }} flagged">
            {% set h = (cnt / max_cnt * 38) | int if max_cnt > 0 else 0 %}
            <div class="bar" style="height: {{ h }}px; background: {% if fl > 0 %}var(--pico-color-red-500){% else %}var(--pico-color-zinc-500){% endif %};"></div>
            <div class="tooltip">{{ day }}: {{ cnt }} scans, {{ fl }} flagged</div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% if most_flagged %}
<div>
    <h3>⚠ Most Flagged Packages</h3>
    <table>
        <thead>
            <tr><th>Package</th><th>Version</th><th>Findings</th></tr>
        </thead>
        <tbody>
        {% for p in most_flagged %}
            <tr>
                <td><a href="/packages/{{ p.package_name }}/{{ p.package_version }}"><strong>{{ p.package_name }}</strong></a></td>
                <td>{{ p.package_version }}</td>
                <td>
                    <span class="flagged">{{ p.total }}</span>
                    <progress value="{{ p.total }}" max="{{ max_findings }}" style="width: 80px; height: 6px; vertical-align: middle; margin-left: 6px;"></progress>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% if latest_flagged %}
<div>
    <h3>🔴 Latest Flagged</h3>
    <table>
        <thead>
            <tr><th>Package</th><th>Version</th><th>Findings</th><th>Time</th></tr>
        </thead>
        <tbody>
        {% for s in latest_flagged %}
            <tr>
                <td><a href="/scans/{{ s.id }}"><strong class="flagged">{{ s.package_name }}</strong></a></td>
                <td>{{ s.package_version }}</td>
                <td><span class="flagged">{{ s.total_findings }}</span></td>
                <td>{{ s.started_at.strftime('%m-%d %H:%M') if s.started_at }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<h3>Latest Scans</h3>
<table>
    <thead>
        <tr>
            <th>Package</th>
            <th>Version</th>
            <th>Repo</th>
            <th>Status</th>
            <th></th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody>
    {% for s in latest_scans %}
        <tr>
            <td><a href="/packages/{{ s.package_name }}/{{ s.package_version }}">{{ s.package_name }}</a></td>
            <td>{{ s.package_version }}</td>
            <td><small>{{ s.repository }}</small></td>
            <td>
                {% if s.status == 'scanning' %}<span class="status-scanning"><span class="spinner"></span>scanning</span>{% else %}<span class="status-{{ s.status }}">{{ s.status }}</span>{% endif %}
            </td>
            <td>{% if s.flagged %}<span class="flagged">⚠ {{ s.total_findings }}</span>{% elif s.status == 'completed' %}<span class="clean">✓</span>{% else %}<span>-</span>{% endif %}</td>
            <td>{{ s.started_at.strftime('%m-%d %H:%M') if s.started_at }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
<small><a href="/scans">View all scans →</a></small>

{% if top_rules %}
<div class="top-rules-chart">
    <h3>Top Rules Triggered</h3>
    {% for rule, cnt in top_rules %}
    <div class="rule-bar-row">
        <span class="rule-name" title="{{ rule }}"><code>{{ rule }}</code></span>
        <div class="rule-bar-container">
            <div class="rule-bar" style="width: {{ (cnt / top_rules[0][1] * 100) | int if top_rules[0][1] > 0 else 0 }}%;"></div>
        </div>
        <span class="rule-count">{{ cnt }}</span>
    </div>
    {% endfor %}
</div>
{% endif %}

<small style="opacity: 0.5;">Last refresh: {{ now.strftime('%H:%M:%S') }} (auto every 30s)</small>