Update csv-viewer app

app.py

@@ -592,7 +592,7 @@ def api_session_diagnostic():
     treat_col = "signal_game.1.group.treatment"
 
     has_letter = df[df[letter_col].notna()].copy()
-    has_letter["_time"] = pd.to_datetime(has_letter[time_col])
+    has_letter["_time"] = pd.to_datetime(has_letter[time_col], utc=True).dt.tz_convert("America/New_York")
     has_letter["_bucket"] = has_letter["_time"].dt.floor("10min")
 
     canonical = {}

templates/index.html

@@ -201,6 +201,7 @@
     <a data-page="signal"><span class="icon">&#9830;</span> Signal Game</a>
     <a data-page="coop"><span class="icon">&#9876;</span> Prisoner + Stag</a>
     <a data-page="payments"><span class="icon">&#36;</span> Payments</a>
+    <a data-page="paystats"><span class="icon">&#9878;</span> Payment Stats</a>
     <a data-page="diagnostic"><span class="icon">&#9888;</span> Session Diagnostic</a>
   </nav>
   <div class="sidebar-footer">
@@ -322,6 +323,19 @@
     </div>
   </div>
 
+  <!-- PAGE 6: Payment Stats -->
+  <div class="page" id="page-paystats">
+    <div class="toolbar">
+      <h2>Payment Stats</h2>
+      <div class="sep"></div>
+      <button class="btn" id="payStatsRefreshBtn">Reload</button>
+      <span class="badge" id="payStatsRefreshTime">-</span>
+    </div>
+    <div class="stats-scroll" id="payStatsBody">
+      <div style="color:var(--dim);padding:40px;text-align:center">Loading...</div>
+    </div>
+  </div>
+
   <!-- PAGE 5: Session Diagnostic -->
   <div class="page" id="page-diagnostic">
     <div class="toolbar">
@@ -354,6 +368,7 @@ $$('.sidebar nav a').forEach(link => {
     if (link.dataset.page === 'stats' && !statsLoaded) loadStats();
     if (link.dataset.page === 'signal' && !signalLoaded) loadSignal();
     if (link.dataset.page === 'coop' && !coopLoaded) loadCoop();
+    if (link.dataset.page === 'paystats' && !payStatsLoaded) loadPayStats();
     if (link.dataset.page === 'diagnostic' && !diagLoaded) loadDiagnostic();
   });
 });
@@ -375,7 +390,7 @@ async function fetchFromOtree() {
     const data = await res.json();
     if (data.ok) {
       toast(`Fetched ${data.rows} rows, ${data.cols} cols`, true);
-      await Promise.all([loadData(), loadPayments(), loadStats(), loadSignal(), loadCoop(), loadDiagnostic()]);
+      await Promise.all([loadData(), loadPayments(), loadStats(), loadSignal(), loadCoop(), loadPayStats(), loadDiagnostic()]);
     } else toast(`Fetch failed: ${data.error}`, false);
   } catch (e) { toast(`Fetch error: ${e.message}`, false); }
   btn.disabled = false; btn.textContent = 'Fetch from oTree';
@@ -861,6 +876,149 @@ document.addEventListener('keydown', (e) => {
 
 loadPaidState();
 
+// ===================== PAGE 6: PAYMENT STATS =====================
+let payStatsLoaded = false;
+
+async function loadPayStats() {
+  const res = await fetch('/api/payments');
+  const P = await res.json();
+  payStatsLoaded = true;
+
+  const bonusIdx = P.columns.indexOf('total_bonus');
+  const sidIdx = P.columns.indexOf('participant_session_id');
+  const pcIdx = P.columns.indexOf('PC_id');
+
+  // Filter to rows that have a session id (completed)
+  const rows = P.rows.filter(r => String(r[sidIdx]) !== '');
+  const bonuses = rows.map(r => parseFloat(r[bonusIdx])).filter(v => !isNaN(v));
+  bonuses.sort((a, b) => a - b);
+
+  const n = bonuses.length;
+  const total = bonuses.reduce((s, v) => s + v, 0);
+  const mean = n ? total / n : 0;
+  const median = n ? (n % 2 === 1 ? bonuses[Math.floor(n / 2)] : (bonuses[n / 2 - 1] + bonuses[n / 2]) / 2) : 0;
+  const min = n ? bonuses[0] : 0;
+  const max = n ? bonuses[n - 1] : 0;
+  const std = n ? Math.sqrt(bonuses.reduce((s, v) => s + (v - mean) ** 2, 0) / n) : 0;
+
+  const fmt = v => `$${v.toFixed(2)}`;
+
+  let html = '';
+
+  // ---- KPI row ----
+  html += `<div class="kpi-row">
+    <div class="kpi accent"><div class="kpi-val">${n}</div><div class="kpi-label">Participants</div></div>
+    <div class="kpi green"><div class="kpi-val">${fmt(total)}</div><div class="kpi-label">Total payout</div></div>
+    <div class="kpi purple"><div class="kpi-val">${fmt(mean)}</div><div class="kpi-label">Mean bonus</div></div>
+    <div class="kpi"><div class="kpi-val">${fmt(median)}</div><div class="kpi-label">Median bonus</div></div>
+    <div class="kpi"><div class="kpi-val">${fmt(min)}</div><div class="kpi-label">Min bonus</div></div>
+    <div class="kpi"><div class="kpi-val">${fmt(max)}</div><div class="kpi-label">Max bonus</div></div>
+    <div class="kpi orange"><div class="kpi-val">${fmt(std)}</div><div class="kpi-label">Std dev</div></div>
+  </div>`;
+
+  // ---- Paid / Unpaid from localStorage ----
+  loadPaidState();
+  const paidCount = rows.filter(r => paidSet.has(`${r[sidIdx]}::${r[pcIdx]}`)).length;
+  const unpaidCount = n - paidCount;
+  const paidPct = n ? (paidCount / n * 100).toFixed(1) : 0;
+  html += `<div class="stats-section"><h3>Disbursement progress</h3>
+    <div class="kpi-row">
+      <div class="kpi green"><div class="kpi-val">${paidCount}</div><div class="kpi-label">Marked paid</div></div>
+      <div class="kpi red"><div class="kpi-val">${unpaidCount}</div><div class="kpi-label">Remaining</div></div>
+      <div class="kpi accent"><div class="kpi-val">${paidPct}%</div><div class="kpi-label">Disbursed</div></div>
+      <div class="kpi green"><div class="kpi-val">${fmt(rows.filter(r => paidSet.has(`${r[sidIdx]}::${r[pcIdx]}`)).reduce((s, r) => s + (parseFloat(r[bonusIdx]) || 0), 0))}</div><div class="kpi-label">Amount paid out</div></div>
+      <div class="kpi red"><div class="kpi-val">${fmt(rows.filter(r => !paidSet.has(`${r[sidIdx]}::${r[pcIdx]}`)).reduce((s, r) => s + (parseFloat(r[bonusIdx]) || 0), 0))}</div><div class="kpi-label">Amount remaining</div></div>
+    </div>
+  </div>`;
+
+  // ---- Per-session breakdown ----
+  const sessionMap = {};
+  for (const r of rows) {
+    const sid = String(r[sidIdx]);
+    if (!sessionMap[sid]) sessionMap[sid] = [];
+    const b = parseFloat(r[bonusIdx]);
+    if (!isNaN(b)) sessionMap[sid].push({ bonus: b, row: r });
+  }
+  const sessionIds = Object.keys(sessionMap).sort();
+  const maxSessionTotal = Math.max(...sessionIds.map(s => sessionMap[s].reduce((sum, x) => sum + x.bonus, 0)), 1);
+
+  html += `<div class="stats-section"><h3>Per-session breakdown</h3>
+    <table class="session-table">
+      <thead><tr><th>Session</th><th>Participants</th><th>Total payout</th><th>Mean bonus</th><th>Median</th><th>Min</th><th>Max</th><th>Paid</th></tr></thead><tbody>`;
+  for (const sid of sessionIds) {
+    const items = sessionMap[sid];
+    const vals = items.map(x => x.bonus).sort((a, b) => a - b);
+    const sn = vals.length;
+    const sTotal = vals.reduce((s, v) => s + v, 0);
+    const sMean = sn ? sTotal / sn : 0;
+    const sMedian = sn ? (sn % 2 === 1 ? vals[Math.floor(sn / 2)] : (vals[sn / 2 - 1] + vals[sn / 2]) / 2) : 0;
+    const sMin = sn ? vals[0] : 0;
+    const sMax = sn ? vals[sn - 1] : 0;
+    const sPaid = items.filter(x => paidSet.has(`${sid}::${x.row[pcIdx]}`)).length;
+    const barPct = (sTotal / maxSessionTotal * 100).toFixed(0);
+    html += `<tr>
+      <td><strong>${sid}</strong></td>
+      <td>${sn}</td>
+      <td><div class="dur-bar-wrap"><div class="dur-bar-bg"><div class="dur-bar" style="width:${barPct}%;background:var(--green)"></div></div>${fmt(sTotal)}</div></td>
+      <td>${fmt(sMean)}</td>
+      <td>${fmt(sMedian)}</td>
+      <td>${fmt(sMin)}</td>
+      <td>${fmt(sMax)}</td>
+      <td>${sPaid} / ${sn}</td>
+    </tr>`;
+  }
+  html += `</tbody></table></div>`;
+
+  // ---- Bonus distribution histogram ----
+  if (n > 0) {
+    const bucketSize = 1; // $1 buckets
+    const bucketMin = Math.floor(min);
+    const bucketMax = Math.ceil(max);
+    const buckets = {};
+    for (let b = bucketMin; b <= bucketMax; b += bucketSize) buckets[b] = 0;
+    for (const v of bonuses) {
+      const bk = Math.floor(v / bucketSize) * bucketSize;
+      buckets[bk] = (buckets[bk] || 0) + 1;
+    }
+    const maxBucket = Math.max(...Object.values(buckets), 1);
+    const bucketKeys = Object.keys(buckets).map(Number).sort((a, b) => a - b);
+
+    html += `<div class="stats-section"><h3>Bonus distribution</h3><div class="funnel">`;
+    for (const bk of bucketKeys) {
+      const count = buckets[bk];
+      if (count === 0) continue;
+      const pct = (count / maxBucket * 100).toFixed(1);
+      const label = `$${bk.toFixed(0)} – $${(bk + bucketSize).toFixed(0)}`;
+      html += `<div class="funnel-row">
+        <div class="funnel-label">${label}</div>
+        <div class="funnel-bar-bg"><div class="funnel-bar" style="width:${pct}%;background:var(--green)">${count}</div></div>
+        <div class="funnel-count">${(count / n * 100).toFixed(0)}%</div>
+      </div>`;
+    }
+    html += `</div></div>`;
+
+    // ---- Quartiles / Percentiles ----
+    const p25 = bonuses[Math.floor(n * 0.25)];
+    const p75 = bonuses[Math.floor(n * 0.75)];
+    const p90 = bonuses[Math.floor(n * 0.90)];
+    const iqr = p75 - p25;
+    html += `<div class="stats-section"><h3>Percentiles</h3>
+      <div class="kpi-row">
+        <div class="kpi"><div class="kpi-val">${fmt(p25)}</div><div class="kpi-label">25th percentile</div></div>
+        <div class="kpi purple"><div class="kpi-val">${fmt(median)}</div><div class="kpi-label">50th percentile</div></div>
+        <div class="kpi"><div class="kpi-val">${fmt(p75)}</div><div class="kpi-label">75th percentile</div></div>
+        <div class="kpi"><div class="kpi-val">${fmt(p90)}</div><div class="kpi-label">90th percentile</div></div>
+        <div class="kpi accent"><div class="kpi-val">${fmt(iqr)}</div><div class="kpi-label">IQR (P75 – P25)</div></div>
+      </div>
+    </div>`;
+  }
+
+  $('#payStatsBody').innerHTML = html;
+  $('#payStatsRefreshTime').textContent = new Date().toLocaleTimeString();
+}
+
+$('#payStatsRefreshBtn').addEventListener('click', loadPayStats);
+
 // ===================== PAGE 3: SIGNAL GAME =====================
 let signalLoaded = false;