From 8d394c4dfacc89b17ffbfe78f096f847882d6ed6 Mon Sep 17 00:00:00 2001
From: dlawler489 <104159223@student.swin.edu.au>
Date: Sun, 13 Sep 2026 15:38:01 +1000
Subject: [PATCH] Polish dashboard visuals and add a today's-net-position hero

- Chart colors now resolve from the app's own CSS tokens instead of
  hardcoded hex, so they stay in sync with the rest of the theme.
- Unified all three range pickers (TOU, battery, generation chart) on the
  same <select> pattern, replacing the one-off pill-toggle buttons.
- Added shared .card-header/.card-title/.stat-row/.stat-label/.stat-value
  utility classes so cards share consistent typography instead of
  scattered inline styles.
- Added a hero strip showing today's net cost/revenue up front, with a
  dollar-delta comparison against the recent 7-day daily average, so the
  one number that matters most isn't buried mid-page.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/static/css/style.css         |  76 ++++++++++++++---
 app/web/templates/dashboard.html | 135 +++++++++++++++++++++----------
 2 files changed, 156 insertions(+), 55 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index 4fde4c3..f223d67 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -65,11 +65,69 @@ body {
 .card {
   background: var(--card-bg);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 10px;
   padding: 1.25rem;
   margin-bottom: 1.25rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+
+.hero-card {
+  background: linear-gradient(135deg, var(--card-bg), var(--bg));
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.5rem;
+  margin-bottom: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.hero-label {
+  color: var(--muted);
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.hero-value {
+  font-size: 2.4rem;
+  font-weight: 700;
+  line-height: 1.1;
+  margin-top: 0.15rem;
+}
+
+.hero-trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+  padding: 0.25rem 0.6rem;
+  border-radius: 999px;
+  background: var(--border);
+  color: var(--muted);
+}
+
+.hero-trend.good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
+.hero-trend.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
+
 table {
   width: 100%;
   border-collapse: collapse;
@@ -91,6 +149,10 @@ th {
 .savings-positive { color: var(--good); font-weight: 600; }
 .savings-negative { color: var(--bad); }
 
+.stat-row { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 0.75rem; }
+.stat-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
+.stat-value { font-size: 1.3rem; font-weight: 700; margin-top: 0.2rem; }
+
 .badge {
   display: inline-block;
   padding: 0.1rem 0.5rem;
@@ -216,18 +278,6 @@ select, input[type="date"] {
   font-size: 0.9rem;
 }
 
-.pill-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
-.pill-toggle button {
-  margin: 0;
-  padding: 0.35rem 0.85rem;
-  font-size: 0.85rem;
-  background: var(--card-bg);
-  color: var(--fg);
-  border: none;
-  border-radius: 0;
-}
-.pill-toggle button.active { background: var(--accent); color: white; }
-
 .flow-line {
   animation: flow-dash 1s linear infinite;
 }
diff --git a/app/web/templates/dashboard.html b/app/web/templates/dashboard.html
index f078354..5195894 100644
--- a/app/web/templates/dashboard.html
+++ b/app/web/templates/dashboard.html
@@ -2,9 +2,17 @@
 {% block content %}
 <h1>Usage Dashboard</h1>
 
+<div class="hero-card" id="hero-card" style="display:none;">
+  <div>
+    <div class="hero-label">Today's net position</div>
+    <div class="hero-value" id="hero-value">&mdash;</div>
+  </div>
+  <div class="hero-trend" id="hero-trend"></div>
+</div>
+
 <div class="card">
-  <div style="display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:0.5rem;">
-    <h3 style="margin:0;">Live system status</h3>
+  <div class="card-header">
+    <h3 class="card-title">Live system status</h3>
     <span class="freshness-badge" id="live-updated"><span class="freshness-dot"></span><span id="live-updated-text">Loading&hellip;</span></span>
   </div>
   <div id="live-flow-wrap" style="margin-top:0.5rem;">
@@ -84,12 +92,12 @@
 </div>
 
 <div class="card">
-  <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem;">
-    <h3 style="margin:0;">Cost by time-of-use period</h3>
-    <div class="pill-toggle" id="tou-range-toggle">
-      <button data-days="1" class="active">Today</button>
-      <button data-days="7">This week</button>
-    </div>
+  <div class="card-header">
+    <h3 class="card-title">Cost by time-of-use period</h3>
+    <select id="tou-range-select">
+      <option value="1" selected>Today</option>
+      <option value="7">This week</option>
+    </select>
   </div>
   <div id="tou-breakdown-body" style="margin-top:0.75rem;">
     <div class="muted">Loading&hellip;</div>
@@ -97,8 +105,8 @@
 </div>
 
 <div class="card" id="battery-card" style="display:none;">
-  <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem;">
-    <h3 style="margin:0;">Battery</h3>
+  <div class="card-header">
+    <h3 class="card-title">Battery</h3>
     <div style="display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap;">
       <select id="battery-range-select">
         <option value="1" selected>Today</option>
@@ -127,8 +135,8 @@
 </div>
 
 <div class="card">
-  <div style="display:flex; justify-content:space-between; align-items:center;">
-    <h3 style="margin:0;">Generation / load / import / export</h3>
+  <div class="card-header">
+    <h3 class="card-title">Generation / load / import / export</h3>
     <select id="range-select">
       <option value="7">Last 7 days</option>
       <option value="30" selected>Last 30 days</option>
@@ -150,6 +158,10 @@ function fmtKw(kw) {
   return `${kw.toFixed(1)} kW`;
 }
 
+function cssVar(name) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+
 function fmtAgo(isoTs) {
   const seconds = Math.max(0, Math.round((Date.now() - new Date(isoTs).getTime()) / 1000));
   if (seconds < 90) return 'updated just now';
@@ -240,23 +252,24 @@ async function loadDashboard(days) {
 
   const summaryEl = document.getElementById('summary-card');
   if (!summary.days_with_data) {
-    summaryEl.innerHTML = '<div class="muted">No usage data yet. If you\'re running on mock data, it should appear within a few minutes of startup.</div>';
+    summaryEl.innerHTML = '<h3 class="card-title">Period summary</h3><div class="muted" style="margin-top:0.5rem;">No usage data yet. If you\'re running on mock data, it should appear within a few minutes of startup.</div>';
   } else {
     const revenue = summary.net_revenue_dollars;
     const revenueHtml = revenue === null || revenue === undefined
       ? ''
-      : `<div><div class="muted">Net revenue</div><strong class="${revenue >= 0 ? 'savings-positive' : 'savings-negative'}">${revenue >= 0 ? '+$' : '-$'}${Math.abs(revenue).toFixed(2)}</strong></div>`;
+      : `<div><div class="stat-label">Net revenue</div><div class="stat-value ${revenue >= 0 ? 'savings-positive' : 'savings-negative'}">${revenue >= 0 ? '+$' : '-$'}${Math.abs(revenue).toFixed(2)}</div></div>`;
     const selfConsumptionHtml = summary.self_consumption_pct === null || summary.self_consumption_pct === undefined
-      ? '' : `<div title="Share of solar generation that wasn't exported"><div class="muted">Self-consumption</div><strong>${summary.self_consumption_pct}%</strong></div>`;
+      ? '' : `<div title="Share of solar generation that wasn't exported"><div class="stat-label">Self-consumption</div><div class="stat-value">${summary.self_consumption_pct}%</div></div>`;
     const solarCoverageHtml = summary.solar_coverage_pct === null || summary.solar_coverage_pct === undefined
-      ? '' : `<div title="Share of household load met by solar rather than the grid"><div class="muted">Solar coverage</div><strong>${summary.solar_coverage_pct}%</strong></div>`;
+      ? '' : `<div title="Share of household load met by solar rather than the grid"><div class="stat-label">Solar coverage</div><div class="stat-value">${summary.solar_coverage_pct}%</div></div>`;
     summaryEl.innerHTML = `
-      <div class="muted">${summary.first_day} &rarr; ${summary.last_day} (${summary.days_with_data} days with data)</div>
-      <div style="display:flex; gap:2rem; margin-top:0.75rem; flex-wrap:wrap;">
-        <div><div class="muted">Generated</div><strong>${summary.generation_kwh} kWh</strong></div>
-        <div><div class="muted">Consumed</div><strong>${summary.load_kwh} kWh</strong></div>
-        <div><div class="muted">Imported</div><strong>${summary.import_kwh} kWh</strong></div>
-        <div><div class="muted">Exported</div><strong>${summary.export_kwh} kWh</strong></div>
+      <h3 class="card-title">Period summary</h3>
+      <div class="muted" style="margin-top:0.35rem;">${summary.first_day} &rarr; ${summary.last_day} (${summary.days_with_data} days with data)</div>
+      <div class="stat-row">
+        <div><div class="stat-label">Generated</div><div class="stat-value">${summary.generation_kwh} kWh</div></div>
+        <div><div class="stat-label">Consumed</div><div class="stat-value">${summary.load_kwh} kWh</div></div>
+        <div><div class="stat-label">Imported</div><div class="stat-value">${summary.import_kwh} kWh</div></div>
+        <div><div class="stat-label">Exported</div><div class="stat-value">${summary.export_kwh} kWh</div></div>
         ${selfConsumptionHtml}
         ${solarCoverageHtml}
         ${revenueHtml}
@@ -277,10 +290,10 @@ async function loadDashboard(days) {
     data: {
       labels: daily.map(d => d.date),
       datasets: [
-        { label: 'Generation', data: daily.map(d => d.generation_kwh), backgroundColor: '#facc15' },
-        { label: 'Load', data: daily.map(d => d.load_kwh), backgroundColor: '#60a5fa' },
-        { label: 'Import', data: daily.map(d => d.import_kwh), backgroundColor: '#f87171' },
-        { label: 'Export', data: daily.map(d => d.export_kwh), backgroundColor: '#4ade80' },
+        { label: 'Generation', data: daily.map(d => d.generation_kwh), backgroundColor: cssVar('--battery') },
+        { label: 'Load', data: daily.map(d => d.load_kwh), backgroundColor: cssVar('--accent') },
+        { label: 'Import', data: daily.map(d => d.import_kwh), backgroundColor: cssVar('--bad') },
+        { label: 'Export', data: daily.map(d => d.export_kwh), backgroundColor: cssVar('--good') },
       ],
     },
     options: {
@@ -331,14 +344,8 @@ async function loadTouBreakdown(days) {
     </div>`;
 }
 
-const touToggle = document.getElementById('tou-range-toggle');
-touToggle.addEventListener('click', (e) => {
-  const btn = e.target.closest('button');
-  if (!btn) return;
-  touToggle.querySelectorAll('button').forEach(b => b.classList.remove('active'));
-  btn.classList.add('active');
-  loadTouBreakdown(btn.dataset.days);
-});
+const touRangeSelect = document.getElementById('tou-range-select');
+touRangeSelect.addEventListener('change', () => loadTouBreakdown(touRangeSelect.value));
 
 function batteryQueryString(range) {
   return range.startDate
@@ -402,8 +409,8 @@ async function loadBatterySection(range) {
       datasets: [{
         label: 'Battery SOC %',
         data: history.points.map(p => p.soc_percent),
-        borderColor: '#fbbf24',
-        backgroundColor: 'rgba(251, 191, 36, 0.15)',
+        borderColor: cssVar('--battery'),
+        backgroundColor: cssVar('--battery') + '26',
         fill: true,
         pointRadius: 0,
         borderWidth: 2,
@@ -431,12 +438,12 @@ async function loadBatterySection(range) {
     ? '<div class="muted" style="margin-top:0.5rem;">Export credit side is approximated: your plan\'s feed-in tariff depends on daily export volume, not time of day.</div>'
     : '';
   valueBody.innerHTML = `
-    <div style="display:flex; gap:2rem; flex-wrap:wrap;">
-      <div><div class="muted">Charged</div><strong>${value.charged_kwh.toFixed(1)} kWh</strong></div>
-      <div><div class="muted">Discharged</div><strong>${value.discharged_kwh.toFixed(1)} kWh</strong></div>
-      <div title="What the discharged energy would have cost to import instead"><div class="muted">Avoided import cost</div><strong class="savings-positive">+$${value.avoided_import_dollars.toFixed(2)}</strong></div>
-      <div title="What the charged energy would have earned as feed-in credit had it been exported instead"><div class="muted">Foregone export credit</div><strong class="savings-negative">-$${value.foregone_export_dollars.toFixed(2)}</strong></div>
-      <div><div class="muted">Estimated battery value</div><strong class="${net >= 0 ? 'savings-positive' : 'savings-negative'}">${net >= 0 ? '+' : '-'}$${Math.abs(net).toFixed(2)}</strong></div>
+    <div class="stat-row">
+      <div><div class="stat-label">Charged</div><div class="stat-value">${value.charged_kwh.toFixed(1)} kWh</div></div>
+      <div><div class="stat-label">Discharged</div><div class="stat-value">${value.discharged_kwh.toFixed(1)} kWh</div></div>
+      <div title="What the discharged energy would have cost to import instead"><div class="stat-label">Avoided import cost</div><div class="stat-value savings-positive">+$${value.avoided_import_dollars.toFixed(2)}</div></div>
+      <div title="What the charged energy would have earned as feed-in credit had it been exported instead"><div class="stat-label">Foregone export credit</div><div class="stat-value savings-negative">-$${value.foregone_export_dollars.toFixed(2)}</div></div>
+      <div><div class="stat-label">Estimated battery value</div><div class="stat-value ${net >= 0 ? 'savings-positive' : 'savings-negative'}">${net >= 0 ? '+' : '-'}$${Math.abs(net).toFixed(2)}</div></div>
     </div>
     ${approxNote}
   `;
@@ -470,10 +477,54 @@ batteryApplyRange.addEventListener('click', () => {
   loadBatterySection({ startDate: batteryStartDate.value, endDate: batteryEndDate.value });
 });
 
+async function loadHero() {
+  const [today, week] = await Promise.all([
+    fetch('/api/usage/summary?days=1').then(r => r.json()),
+    fetch('/api/usage/summary?days=8').then(r => r.json()),
+  ]);
+
+  const heroCard = document.getElementById('hero-card');
+  const todayNet = today.net_revenue_dollars;
+  if (!today.days_with_data || todayNet === null || todayNet === undefined) {
+    heroCard.style.display = 'none';
+    return;
+  }
+  heroCard.style.display = '';
+
+  const valueEl = document.getElementById('hero-value');
+  valueEl.textContent = `${todayNet >= 0 ? '+$' : '-$'}${Math.abs(todayNet).toFixed(2)}`;
+  valueEl.className = `hero-value ${todayNet >= 0 ? 'savings-positive' : 'savings-negative'}`;
+
+  const trendEl = document.getElementById('hero-trend');
+  const weekNet = week.net_revenue_dollars;
+  // Costed in dollars, not swapped-sign "net revenue", so the comparison
+  // reads naturally: a lower cost today than the recent daily average is
+  // the good outcome, regardless of which household is running a surplus
+  // or a deficit overall.
+  if (!week.days_with_data || weekNet === null || weekNet === undefined) {
+    trendEl.textContent = '';
+    return;
+  }
+  const avgDailyCost = -weekNet / week.days_with_data;
+  const todayCost = -todayNet;
+  const delta = todayCost - avgDailyCost;
+  if (Math.abs(delta) < 0.01) {
+    trendEl.textContent = 'About the same as your recent daily average';
+    trendEl.className = 'hero-trend';
+  } else if (delta < 0) {
+    trendEl.textContent = `▼ $${Math.abs(delta).toFixed(2)} cheaper than your recent daily average`;
+    trendEl.className = 'hero-trend good';
+  } else {
+    trendEl.textContent = `▲ $${delta.toFixed(2)} more than your recent daily average`;
+    trendEl.className = 'hero-trend bad';
+  }
+}
+
 const rangeSelect = document.getElementById('range-select');
 rangeSelect.addEventListener('change', () => loadDashboard(rangeSelect.value));
 loadDashboard(rangeSelect.value);
 
+loadHero();
 loadTouBreakdown(1);
 loadBatterySection({ days: '1' });
 loadLiveFlow();