From d00cee34321570356115d45fd841dddac2f359c1 Mon Sep 17 00:00:00 2001
From: Marker689 <marker689@gmail.com>
Date: Sun, 10 May 2026 03:07:07 +0300
Subject: [PATCH] =?UTF-8?q?ui:=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=B4=D0=B0=D1=88=D0=B1=D0=BE=D1=80=D0=B4=20?=
 =?UTF-8?q?=E2=80=94=20bar-=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B8,=20t?=
 =?UTF-8?q?ooltips,=20empty=20states,=20spinner=20=D0=B4=D0=BB=D1=8F=20sca?=
 =?UTF-8?q?nning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Заменить inline div-графики на styled bars с transition
- Добавить tooltips на heatmap
- Добавить empty state когда нет findings
- Добавить spinner для статуса scanning
- Добавить breadcrumbs на dashboard
- Добавить title block
---
 guarddog_nexus/web/templates/dashboard.html   |  8 +++
 .../web/templates/dashboard_stats.html        | 50 ++++++++++++-------
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/guarddog_nexus/web/templates/dashboard.html b/guarddog_nexus/web/templates/dashboard.html
index d55d475..cb23fad 100644
--- a/guarddog_nexus/web/templates/dashboard.html
+++ b/guarddog_nexus/web/templates/dashboard.html
@@ -1,4 +1,12 @@
 {% extends "base.html" %}
+{% block title %}Dashboard — GuardDog Nexus{% endblock %}
+{% block breadcrumbs %}
+<div class="breadcrumbs">
+    <a href="/">Home</a>
+    <span class="separator">/</span>
+    <span>Dashboard</span>
+</div>
+{% endblock %}
 {% block content %}
 <h1>Dashboard</h1>
 
diff --git a/guarddog_nexus/web/templates/dashboard_stats.html b/guarddog_nexus/web/templates/dashboard_stats.html
index 9aee305..99eaffa 100644
--- a/guarddog_nexus/web/templates/dashboard_stats.html
+++ b/guarddog_nexus/web/templates/dashboard_stats.html
@@ -26,30 +26,37 @@
 </div>
 
 {% if total_findings > 0 %}
-<div style="margin-bottom: 2rem;">
+<div>
     <small>Severity ratio</small>
-    <div style="display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 4px;">
+    <div class="severity-bar">
         {% set err_pct = (errors_count / total_findings * 100) | int %}
         {% set warn_pct = 100 - err_pct %}
-        <div style="width: {{ err_pct }}%; background: var(--pico-color-red-400);" title="ERROR: {{ errors_count }}"></div>
-        <div style="width: {{ warn_pct }}%; background: var(--pico-color-yellow-400);" title="WARNING: {{ warnings_count }}"></div>
+        <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 style="display: flex; justify-content: space-between; font-size: 0.75rem; margin-top: 2px;">
+    <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 style="margin-bottom: 2rem;">
+<div>
     <small>Scan activity (14 days)</small>
-    <div style="display: flex; align-items: flex-end; gap: 2px; height: 40px; margin-top: 4px;">
+    <div class="heatmap">
         {% set max_cnt = days | map(attribute=1) | max %}
         {% for day, cnt, fl in days %}
-        <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end;" title="{{ day }}: {{ cnt }} scans, {{ fl }} flagged">
+        <div class="heatmap-day" title="{{ day }}: {{ cnt }} scans, {{ fl }} flagged">
             {% set h = (cnt / max_cnt * 38) | int if max_cnt > 0 else 0 %}
-            <div style="height: {{ h }}px; background: {% if fl > 0 %}var(--pico-color-red-500){% else %}var(--pico-color-zinc-500){% endif %}; border-radius: 2px 2px 0 0; opacity: 0.8;"></div>
+            <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>
@@ -57,7 +64,7 @@
 {% endif %}
 
 {% if most_flagged %}
-<div style="margin-bottom: 2rem;">
+<div>
     <h3>⚠ Most Flagged Packages</h3>
     <table>
         <thead>
@@ -80,7 +87,7 @@
 {% endif %}
 
 {% if latest_flagged %}
-<div style="margin-bottom: 2rem;">
+<div>
     <h3>🔴 Latest Flagged</h3>
     <table>
         <thead>
@@ -118,7 +125,9 @@
             <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><span class="status-{{ s.status }}">{{ s.status }}</span></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>
@@ -128,15 +137,18 @@
 <small><a href="/scans">View all scans →</a></small>
 
 {% if top_rules %}
-<h3>Top Rules Triggered</h3>
-<table>
-    <thead><tr><th>Rule</th><th>Count</th></tr></thead>
-    <tbody>
+<div class="top-rules-chart">
+    <h3>Top Rules Triggered</h3>
     {% for rule, cnt in top_rules %}
-        <tr><td><code>{{ rule }}</code></td><td>{{ cnt }}</td></tr>
+    <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 %}
-    </tbody>
-</table>
+</div>
 {% endif %}
 
 <small style="opacity: 0.5;">Last refresh: {{ now.strftime('%H:%M:%S') }} (auto every 30s)</small>