fuj-management/go/internal/web/templates/juniors.tmpl

{{define "title"}}Juniors{{end}}
{{define "content"}}
<h1>Juniors Dashboard</h1>

{{if .Error}}
<div class="description">Error loading data: {{.Error}}</div>
{{else}}

<div class="description">
  Balances calculated by matching Google Sheet payments against attendance fees.<br>
  Source: <a href="{{.Data.AttendanceURL}}" target="_blank" rel="noopener">Attendance Sheet</a> |
  <a href="{{.Data.PaymentsURL}}" target="_blank" rel="noopener">Payments Ledger</a>
</div>

<div class="filter-container" id="filterContainer" data-current-month="{{.Data.CurrentMonth}}">
  <div class="filter-item">
    <label class="filter-label" for="nameFilter">Member</label>
    <input id="nameFilter" class="filter-input" type="text" placeholder="Filter by name…">
  </div>
  <div class="filter-item">
    <label class="filter-label" for="fromMonth">From</label>
    <select id="fromMonth" class="filter-select">
      <option value="">All</option>
      {{range $i, $m := .Data.Months}}
      <option value="{{$i}}">{{$m}}</option>
      {{end}}
    </select>
  </div>
  <div class="filter-item">
    <label class="filter-label" for="toMonth">To</label>
    <select id="toMonth" class="filter-select">
      <option value="">All</option>
      {{range $i, $m := .Data.Months}}
      <option value="{{$i}}">{{$m}}</option>
      {{end}}
    </select>
  </div>
  <div class="filter-item">
    <button id="applyFilter" class="filter-select" type="button" style="cursor: pointer;">Apply</button>
    <button id="clearFilter" class="filter-select" type="button" style="cursor: pointer;">All</button>
  </div>
</div>

{{if .Data.Results}}
<div class="table-container">
<table>
  <thead>
    <tr>
      <th>Member</th>
      {{range $i, $m := .Data.Months}}
      <th data-month-idx="{{$i}}" data-raw-month="{{index $.Data.RawMonths $i}}">{{$m}}</th>
      {{end}}
      <th>Balance</th>
    </tr>
  </thead>
  <tbody>
    {{range $row := .Data.Results}}
    <tr class="member-row" data-name="{{$row.Name}}">
      <td class="member-name">{{$row.Name}}</td>
      {{range $i, $cell := $row.Months}}
      <td data-month-idx="{{$i}}" title="{{$cell.Tooltip}}"
          class="{{if eq $cell.Status "empty"}}cell-empty{{else if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (ge $cell.RawMonth $.Data.CurrentMonth)}}cell-unpaid-current{{else if or (eq $cell.Status "unpaid") (eq $cell.Status "partial")}}cell-unpaid{{else if eq $cell.Status "ok"}}cell-ok{{end}}{{if $cell.Overridden}} cell-overridden{{end}}">
        {{$cell.Text}}
        {{if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (lt $cell.RawMonth $.Data.CurrentMonth)}}
        <a class="pay-btn" href="{{qrHref $.Data.BankAccount $cell.Amount $row.Name $cell.RawMonth}}">Pay</a>
        {{end}}
      </td>
      {{end}}
      <td class="{{if lt $row.Balance 0}}balance-neg{{else if gt $row.Balance 0}}balance-pos{{end}}" style="position: relative;">
        {{$row.Balance}}
        {{if gt $row.PayableAmount 0}}
        <a class="pay-btn" href="{{qrHrefAll $.Data.BankAccount $row.PayableAmount $row.Name $row.RawUnpaidPeriods}}">Pay All</a>
        {{end}}
      </td>
    </tr>
    {{end}}
    <tr class="totals-row" style="font-weight: bold; background-color: #111; border-top: 2px solid #333;">
      <td style="text-align: left; padding: 6px 8px;">TOTAL</td>
      {{range $i, $t := .Data.Totals}}
      <td data-month-idx="{{$i}}" data-raw-month="{{index $.Data.RawMonths $i}}" class="{{if eq $t.Status "ok"}}cell-ok{{else if eq $t.Status "unpaid"}}cell-unpaid{{else if eq $t.Status "surplus"}}cell-overridden{{end}}" style="padding-top: 4px; padding-bottom: 4px;">
        <span style="font-size: 0.6em; font-weight: normal; color: #666; text-transform: lowercase; display: block; margin-bottom: 2px;">received / expected</span>
        {{$t.Text}}
      </td>
      {{end}}
      <td></td>
    </tr>
  </tbody>
</table>
</div>
{{else}}
<div class="description">No members found.</div>
{{end}}

{{if .Data.Credits}}
<h2>Credits (Advance Payments / Surplus)</h2>
<div class="list-container">
  {{range .Data.Credits}}
  <div class="list-item">
    <span class="list-item-name">{{.Name}}</span>
    <span class="list-item-val">{{.Amount}} CZK</span>
  </div>
  {{end}}
</div>
{{end}}

{{if .Data.Debts}}
<h2>Debts (Missing Payments)</h2>
<div class="list-container">
  {{range .Data.Debts}}
  <div class="list-item">
    <span class="list-item-name">{{.Name}}</span>
    <span class="list-item-val" style="color: #ff3333;">{{.Amount}} CZK</span>
  </div>
  {{end}}
</div>
{{end}}

{{end}}

<script src="/static/js/filters.js" defer></script>
{{end}}