Clickable home page stat cards; clean up nav; add buttons on list pages; move export/import to home

templates/home.html

@@ -6,22 +6,30 @@
 
 <h2 style="font-size:1rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin:0 0 0.6rem;">Batteries</h2>
 <div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;">
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;">{{ total_batteries }}</div>
-    <div class="text-muted">Total</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ avail_count }}</div>
-    <div class="text-muted">Available</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ installed_count }}</div>
-    <div class="text-muted">Installed</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:var(--count-retired);">{{ retired_count }}</div>
-    <div class="text-muted">Retired</div>
-  </div>
+  <a class="stat-link" href="{{ url_for('battery_list') }}?status=">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;">{{ total_batteries }}</div>
+      <div class="text-muted">Total</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('battery_list') }}?status=available">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ avail_count }}</div>
+      <div class="text-muted">Available</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('battery_list') }}?status=installed">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ installed_count }}</div>
+      <div class="text-muted">Installed</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('battery_list') }}?status=retired">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;color:var(--count-retired);">{{ retired_count }}</div>
+      <div class="text-muted">Retired</div>
+    </div>
+  </a>
   {% if ha_enabled and needs_attention.low_pct %}
   <a href="#needs-attention"
      onclick="var d=document.getElementById('needs-attention');d.open=true;"
@@ -36,22 +44,30 @@
 
 <h2 style="font-size:1rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin:0 0 0.6rem;">Devices</h2>
 <div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;">
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;">{{ total_devices }}</div>
-    <div class="text-muted">Total</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ full_devices }}</div>
-    <div class="text-muted">Full</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ partial_devices }}</div>
-    <div class="text-muted">Partial</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;{% if empty_devices > 0 %}border:2px solid #f59e0b;{% endif %}">
-    <div style="font-size:1.8rem;font-weight:700;{% if empty_devices > 0 %}color:#f59e0b;{% else %}color:var(--count-retired);{% endif %}">{{ empty_devices }}</div>
-    <div class="text-muted">Empty</div>
-  </div>
+  <a class="stat-link" href="{{ url_for('device_list') }}">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;">{{ total_devices }}</div>
+      <div class="text-muted">Total</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('device_list') }}?fill=full">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ full_devices }}</div>
+      <div class="text-muted">Full</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('device_list') }}?fill=partial">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ partial_devices }}</div>
+      <div class="text-muted">Partial</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('device_list') }}?fill=empty">
+    <div class="card" style="text-align:center;{% if empty_devices > 0 %}border:2px solid #f59e0b;{% endif %}">
+      <div style="font-size:1.8rem;font-weight:700;{% if empty_devices > 0 %}color:#f59e0b;{% else %}color:var(--count-retired);{% endif %}">{{ empty_devices }}</div>
+      <div class="text-muted">Empty</div>
+    </div>
+  </a>
 </div>
 
 {% if total_charges %}
@@ -96,11 +112,13 @@
 </details>
 {% endif %}
 
-<div style="display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:0.5rem;">
-  <a class="btn btn-primary" href="{{ url_for('battery_add') }}">+ Add Battery</a>
-  <a class="btn btn-secondary" href="{{ url_for('battery_list') }}">View All Batteries</a>
-  <a class="btn btn-secondary" href="{{ url_for('device_list') }}">View All Devices</a>
-  <a class="btn btn-secondary" href="{{ url_for('device_add') }}">+ Add Device</a>
+<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:0.5rem;max-width:480px;">
+  <a class="btn btn-primary" style="text-align:center;" href="{{ url_for('battery_add') }}">+ Add Battery</a>
+  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('battery_list') }}">View All Batteries</a>
+  <a class="btn btn-primary" style="text-align:center;" href="{{ url_for('device_add') }}">+ Add Device</a>
+  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('device_list') }}">View All Devices</a>
+  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('export_page') }}">Export Data</a>
+  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('import_page') }}">Import Data</a>
 </div>
 
 {% endblock %}