boker/templates/session_detail.html

{% extends "base.html" %}
{% block title %}{{ session.session_date }} · Poker Portal{% endblock %}
{% block content %}
<section class="hero-card compact">
    <div style="display: flex; justify-content: space-between;">
        <div>
            <p class="eyebrow">Session detail</p>
            <h1>{{ session.session_date | pretty_date }}</h1>
            <p class="muted-text">Current totals are derived from the event log for this date.</p>
        </div>

        <div style="align-content: center;">
            {% if prev_session %}
                <a class="secondary-button" href="{{ url_for('session_detail', session_date=prev_session.session_date) }}">Previous Session</a>
            {% endif %}
            {% if next_session %}
                <a class="secondary-button" href="{{ url_for('session_detail', session_date=next_session.session_date) }}">Next Session</a>
            {% endif %}
        </div>
    </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 results-panel">
        <div class="panel-header">
            <div>
                <p class="eyebrow">Results</p>
                <h2>Player totals</h2>
            </div>
        </div>
        <div class="table-wrap table-scroll">
            <table class="data-table session-results-table">
                <thead>
                    <tr>
                        <th>Player</th>
                        <th>Buy-in</th>
                        <th>Cash-out</th>
                        <th>Paid</th>
                        <th>Remaining</th>
                        <th>Status</th>
                        <th>Net</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in session.entries %}
                    <tr>
                        <td><a href="{{ url_for('player_detail', player_name=entry.player_name) }}">{{ entry.player_name }}</a></td>
                        <td>{{ entry.buy_in_cents | money }}</td>
                        <td>{{ entry.cash_out_cents | money }}</td>
                        <td>{{ entry.paid_cents | money }}</td>
                        <td class="{{ 'negative' if entry.payout_remaining_cents > 0 else 'positive' }}">
                            {{ entry.payout_remaining_cents | money }}
                        </td>
                        <td>
                            <span class="status-badge status-{{ entry.payout_status }}">
                                {{ entry.payout_status }}
                            </span>
                        </td>
                        <td class="{{ 'positive' if entry.net_cents > 0 else 'negative' if entry.net_cents < 0 else '' }}">
                            {{ entry.net_cents | money }}
                        </td>
                        <td>
                            {% if entry.notes %}
                                <ul class="note-list">
                                    {% for note in entry.notes %}
                                        <li>{{ note }}</li>
                                    {% endfor %}
                                </ul>
                            {% else %}
                                —
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel chart-panel">
        <div class="panel-header">
            <div>
                <p class="eyebrow">Breakdown</p>
                <h2>Net by player</h2>
            </div>
        </div>
        <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 %}