imrpoved session details page

templates/session_detail.html

@@ -20,16 +20,35 @@
     </div>
 </section>
 
+<section class="grid three-col">
+    <article class="panel stat-card">
+        <span>Total cash-out due</span>
+        <strong>{{ session.total_payout_due_cents | money }}</strong>
+    </article>
+
+    <article class="panel stat-card">
+        <span>Total paid</span>
+        <strong class="positive">{{ session.total_paid_cents | money }}</strong>
+    </article>
+
+    <article class="panel stat-card">
+        <span>Total remaining</span>
+        <strong class="{{ 'negative' if session.total_remaining_cents > 0 else 'positive' }}">
+            {{ session.total_remaining_cents | money }}
+        </strong>
+    </article>
+</section>
+
 <section class="grid two-col session-layout">
-    <div class="panel">
+    <div class="panel results-panel">
         <div class="panel-header">
             <div>
                 <p class="eyebrow">Results</p>
                 <h2>Player totals</h2>
             </div>
         </div>
-        <div class="table-wrap">
-            <table>
+        <div class="table-wrap table-scroll">
+            <table class="data-table session-results-table">
                 <thead>
                     <tr>
                         <th>Player</th>
@@ -49,7 +68,7 @@
                         <td>{{ entry.buy_in_cents | money }}</td>
                         <td>{{ entry.cash_out_cents | money }}</td>
                         <td>{{ entry.paid_cents | money }}</td>
-                        <td class="{{ 'positive' if entry.payout_remaining_cents == 0 else 'negative' if entry.payout_remaining_cents > 0 else '' }}">
+                        <td class="{{ 'negative' if entry.payout_remaining_cents > 0 else 'positive' }}">
                             {{ entry.payout_remaining_cents | money }}
                         </td>
                         <td>
@@ -78,30 +97,93 @@
         </div>
     </div>
 
-    <div class="panel">
+    <div class="panel chart-panel">
         <div class="panel-header">
             <div>
-                <p class="eyebrow">Audit trail</p>
-                <h2>Raw ledger events</h2>
+                <p class="eyebrow">Breakdown</p>
+                <h2>Net by player</h2>
             </div>
         </div>
-        <div class="event-feed">
-            {% for event in raw_events | reverse %}
-            <article class="event-card">
-                <div class="event-card-top">
-                    <strong>{{ event.player_name }}</strong>
-                    <span class="pill pill-{{ event.event_type }}">{{ event.event_type }}</span>
-                </div>
-                <p class="event-amount">{{ event.amount_cents | money }}</p>
-                {% if event.note %}
-                    <p class="muted-text small">{{ event.note }}</p>
-                {% endif %}
-                <p class="tiny-text">{{ event.created_at }} · by {{ event.actor }}</p>
-            </article>
-            {% else %}
-            <p class="muted-text">No raw events recorded.</p>
-            {% endfor %}
+        <div class="chart-frame">
+            <canvas id="sessionBreakdownChart"></canvas>
         </div>
     </div>
 </section>
+
+<section class="panel">
+    <div class="panel-header">
+        <div>
+            <p class="eyebrow">Audit trail</p>
+            <h2>Raw ledger events</h2>
+        </div>
+    </div>
+    <div class="event-feed">
+        {% for event in raw_events | reverse %}
+        <article class="event-card">
+            <div class="event-card-top">
+                <strong>{{ event.player_name or "Session" }}</strong>
+                <span class="pill pill-{{ event.event_type }}">{{ event.event_type }}</span>
+            </div>
+            <p class="event-amount">{{ event.amount_cents | money }}</p>
+            {% if event.note %}
+                <p class="muted-text small">{{ event.note }}</p>
+            {% endif %}
+            <p class="tiny-text">{{ event.created_at }} · by {{ event.actor }}</p>
+        </article>
+        {% else %}
+        <p class="muted-text">No raw events recorded.</p>
+        {% endfor %}
+    </div>
+</section>
+
+<script>
+    const sessionChartData = {{ chart_data | tojson }};
+    const rootStyles = getComputedStyle(document.documentElement);
+    const textMuted = rootStyles.getPropertyValue('--text-muted').trim();
+    const lineColor = rootStyles.getPropertyValue('--line').trim();
+
+    const sessionBreakdownCtx = document.getElementById('sessionBreakdownChart');
+    if (sessionBreakdownCtx) {
+        new Chart(sessionBreakdownCtx, {
+            type: 'bar',
+            data: {
+                labels: sessionChartData.labels,
+                datasets: [{
+                    label: 'Session Net',
+                    data: sessionChartData.net_values,
+                    backgroundColor: sessionChartData.net_colors,
+                    borderColor: sessionChartData.net_colors,
+                    borderRadius: 8,
+                    borderSkipped: false,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            color: textMuted,
+                            usePointStyle: true,
+                            boxWidth: 10,
+                            boxHeight: 10,
+                            padding: 18,
+                        },
+                    },
+                },
+                scales: {
+                    x: {
+                        ticks: { color: textMuted, maxRotation: 0 },
+                        grid: { color: lineColor },
+                    },
+                    y: {
+                        ticks: { color: textMuted },
+                        grid: { color: lineColor },
+                    },
+                },
+            },
+        });
+    }
+</script>
 {% endblock %}