feat: Add /sync-bank endpoint to trigger bank sync and inference from web UI

Adds a new GET /sync-bank route that runs sync_to_sheets (2026) + infer_payments + flush_cache, capturing all output and displaying it on a styled results page. Adds "Tools: [Sync Bank Data]" nav link to all templates. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-24 17:24:41 +01:00
parent 883bc4489e
commit b2aaca5df9
9 changed files with 294 additions and 43 deletions
--- a/templates/adults.html
+++ b/templates/adults.html
@@ -464,6 +464,10 @@
            <a href="/reconcile-juniors">[Junior Payment Reconciliation]</a>
            <a href="/payments">[Payments Ledger]</a>
        </div>
+        <div class="nav-archived">
+            <span style="color: #666; margin-right: 5px;">Tools:</span>
+            <a href="/sync-bank">[Sync Bank Data]</a>
+        </div>
    </div>

    <h1>Adults Dashboard</h1>
@@ -503,7 +507,7 @@
                        {{ cell.text }}
                        {% if cell.status == 'unpaid' or cell.status == 'partial' %}
                        <button class="pay-btn"
-                            onclick="showPayQR('{{ row.name|e }}', {{ cell.amount }}, '{{ cell.month|e }}')">Pay</button>
+                            onclick="showPayQR('{{ row.name|e }}', {{ cell.amount }}, '{{ cell.month|e }}', '{{ cell.raw_month }}')">Pay</button>
                        {% endif %}
                    </td>
                    {% endfor %}
@@ -511,7 +515,7 @@
                        {{ "%+d"|format(row.balance) if row.balance != 0 else "0" }}
                        {% if row.balance < 0 %}
                        <button class="pay-btn"
-                            onclick="showPayQR('{{ row.name|e }}', {{ -row.balance }}, '{{ row.unpaid_periods|e }}')">Pay All</button>
+                            onclick="showPayQR('{{ row.name|e }}', {{ -row.balance }}, '{{ row.unpaid_periods|e }}', '{{ row.raw_unpaid_periods|e }}')">Pay All</button>
                        {% endif %}
                    </td>
                </tr>
@@ -857,9 +861,13 @@
                showMemberDetails(nextName);
            }
        }
-        function showPayQR(name, amount, month) {
+        function showPayQR(name, amount, month, rawMonth) {
            const account = "{{ bank_account }}";
-            const message = `${name} / ${month}`;
+            // Convert YYYY-MM to MM/YYYY for infer_payments.py compatibility
+            const numericMonth = rawMonth.includes('+')
+                ? rawMonth.split('+').map(p => p.replace(/(\d{4})-(\d{2})/, '$2/$1')).join('+')
+                : rawMonth.replace(/(\d{4})-(\d{2})/, '$2/$1');
+            const message = `${name} / ${numericMonth}`;
            const qrTitle = document.getElementById('qrTitle');
            const qrImg = document.getElementById('qrImg');
            const qrAccount = document.getElementById('qrAccount');
--- a/templates/fees-juniors.html
+++ b/templates/fees-juniors.html
@@ -192,6 +192,10 @@
            <a href="/reconcile-juniors">[Junior Payment Reconciliation]</a>
            <a href="/payments">[Payments Ledger]</a>
        </div>
+        <div class="nav-archived">
+            <span style="color: #666; margin-right: 5px;">Tools:</span>
+            <a href="/sync-bank">[Sync Bank Data]</a>
+        </div>
    </div>

    <h1>FUJ Junior Fees Dashboard</h1>
--- a/templates/fees.html
+++ b/templates/fees.html
@@ -207,6 +207,10 @@
            <a href="/reconcile-juniors">[Junior Payment Reconciliation]</a>
            <a href="/payments">[Payments Ledger]</a>
        </div>
+        <div class="nav-archived">
+            <span style="color: #666; margin-right: 5px;">Tools:</span>
+            <a href="/sync-bank">[Sync Bank Data]</a>
+        </div>
    </div>

    <h1>FUJ Fees Dashboard</h1>
--- a/templates/juniors.html
+++ b/templates/juniors.html
@@ -464,6 +464,10 @@
            <a href="/reconcile-juniors">[Junior Payment Reconciliation]</a>
            <a href="/payments">[Payments Ledger]</a>
        </div>
+        <div class="nav-archived">
+            <span style="color: #666; margin-right: 5px;">Tools:</span>
+            <a href="/sync-bank">[Sync Bank Data]</a>
+        </div>
    </div>

    <h1>Juniors Dashboard</h1>
@@ -503,7 +507,7 @@
                        {{ cell.text }}
                        {% if cell.status == 'unpaid' or cell.status == 'partial' %}
                        <button class="pay-btn"
-                            onclick="showPayQR('{{ row.name|e }}', {{ cell.amount }}, '{{ cell.month|e }}')">Pay</button>
+                            onclick="showPayQR('{{ row.name|e }}', {{ cell.amount }}, '{{ cell.month|e }}', '{{ cell.raw_month }}')">Pay</button>
                        {% endif %}
                    </td>
                    {% endfor %}
@@ -511,7 +515,7 @@
                        {{ "%+d"|format(row.balance) if row.balance != 0 else "0" }}
                        {% if row.balance < 0 %}
                        <button class="pay-btn"
-                            onclick="showPayQR('{{ row.name|e }}', {{ -row.balance }}, '{{ row.unpaid_periods|e }}')">Pay All</button>
+                            onclick="showPayQR('{{ row.name|e }}', {{ -row.balance }}, '{{ row.unpaid_periods|e }}', '{{ row.raw_unpaid_periods|e }}')">Pay All</button>
                        {% endif %}
                    </td>
                </tr>
@@ -838,9 +842,13 @@
                showMemberDetails(nextName);
            }
        }
-        function showPayQR(name, amount, month) {
+        function showPayQR(name, amount, month, rawMonth) {
            const account = "{{ bank_account }}";
-            const message = `${name} / ${month}`;
+            // Convert YYYY-MM to MM/YYYY for infer_payments.py compatibility
+            const numericMonth = rawMonth.includes('+')
+                ? rawMonth.split('+').map(p => p.replace(/(\d{4})-(\d{2})/, '$2/$1')).join('+')
+                : rawMonth.replace(/(\d{4})-(\d{2})/, '$2/$1');
+            const message = `${name} / ${numericMonth}`;
            const qrTitle = document.getElementById('qrTitle');
            const qrImg = document.getElementById('qrImg');
            const qrAccount = document.getElementById('qrAccount');
--- a/templates/payments.html
+++ b/templates/payments.html
@@ -196,6 +196,10 @@
            <a href="/reconcile-juniors">[Junior Payment Reconciliation]</a>
            <a href="/payments" class="active">[Payments Ledger]</a>
        </div>
+        <div class="nav-archived">
+            <span style="color: #666; margin-right: 5px;">Tools:</span>
+            <a href="/sync-bank">[Sync Bank Data]</a>
+        </div>
    </div>

    <h1>Payments Ledger</h1>
--- a/templates/reconcile-juniors.html
+++ b/templates/reconcile-juniors.html
@@ -460,6 +460,10 @@
            <a href="/reconcile-juniors" class="active">[Junior Payment Reconciliation]</a>
            <a href="/payments">[Payments Ledger]</a>
        </div>
+        <div class="nav-archived">
+            <span style="color: #666; margin-right: 5px;">Tools:</span>
+            <a href="/sync-bank">[Sync Bank Data]</a>
+        </div>
    </div>

    <h1>Junior Payment Reconciliation</h1>
@@ -499,7 +503,7 @@
                        {{ cell.text }}
                        {% if cell.status == 'unpaid' or cell.status == 'partial' %}
                        <button class="pay-btn"
-                            onclick="showPayQR('{{ row.name|e }}', {{ cell.amount }}, '{{ cell.month|e }}')">Pay</button>
+                            onclick="showPayQR('{{ row.name|e }}', {{ cell.amount }}, '{{ cell.month|e }}', '{{ cell.raw_month }}')">Pay</button>
                        {% endif %}
                    </td>
                    {% endfor %}
@@ -507,7 +511,7 @@
                        {{ "%+d"|format(row.balance) if row.balance != 0 else "0" }}
                        {% if row.balance < 0 %}
                        <button class="pay-btn"
-                            onclick="showPayQR('{{ row.name|e }}', {{ -row.balance }}, '{{ row.unpaid_periods|e }}')">Pay All</button>
+                            onclick="showPayQR('{{ row.name|e }}', {{ -row.balance }}, '{{ row.unpaid_periods|e }}', '{{ row.raw_unpaid_periods|e }}')">Pay All</button>
                        {% endif %}
                    </td>
                </tr>
@@ -841,9 +845,13 @@
                showMemberDetails(nextName);
            }
        }
-        function showPayQR(name, amount, month) {
+        function showPayQR(name, amount, month, rawMonth) {
            const account = "{{ bank_account }}";
-            const message = `${name} / ${month}`;
+            // Convert YYYY-MM to MM/YYYY for infer_payments.py compatibility
+            const numericMonth = rawMonth.includes('+')
+                ? rawMonth.split('+').map(p => p.replace(/(\d{4})-(\d{2})/, '$2/$1')).join('+')
+                : rawMonth.replace(/(\d{4})-(\d{2})/, '$2/$1');
+            const message = `${name} / ${numericMonth}`;
            const qrTitle = document.getElementById('qrTitle');
            const qrImg = document.getElementById('qrImg');
            const qrAccount = document.getElementById('qrAccount');
--- a/templates/reconcile.html
+++ b/templates/reconcile.html
@@ -460,6 +460,10 @@
            <a href="/reconcile-juniors">[Junior Payment Reconciliation]</a>
            <a href="/payments">[Payments Ledger]</a>
        </div>
+        <div class="nav-archived">
+            <span style="color: #666; margin-right: 5px;">Tools:</span>
+            <a href="/sync-bank">[Sync Bank Data]</a>
+        </div>
    </div>

    <h1>Payment Reconciliation</h1>
@@ -499,7 +503,7 @@
                        {{ cell.text }}
                        {% if cell.status == 'unpaid' or cell.status == 'partial' %}
                        <button class="pay-btn"
-                            onclick="showPayQR('{{ row.name|e }}', {{ cell.amount }}, '{{ cell.month|e }}')">Pay</button>
+                            onclick="showPayQR('{{ row.name|e }}', {{ cell.amount }}, '{{ cell.month|e }}', '{{ cell.raw_month }}')">Pay</button>
                        {% endif %}
                    </td>
                    {% endfor %}
@@ -507,7 +511,7 @@
                        {{ "%+d"|format(row.balance) if row.balance != 0 else "0" }}
                        {% if row.balance < 0 %}
                        <button class="pay-btn"
-                            onclick="showPayQR('{{ row.name|e }}', {{ -row.balance }}, '{{ row.unpaid_periods|e }}')">Pay All</button>
+                            onclick="showPayQR('{{ row.name|e }}', {{ -row.balance }}, '{{ row.unpaid_periods|e }}', '{{ row.raw_unpaid_periods|e }}')">Pay All</button>
                        {% endif %}
                    </td>
                </tr>
@@ -841,9 +845,13 @@
                showMemberDetails(nextName);
            }
        }
-        function showPayQR(name, amount, month) {
+        function showPayQR(name, amount, month, rawMonth) {
            const account = "{{ bank_account }}";
-            const message = `${name} / ${month}`;
+            // Convert YYYY-MM to MM/YYYY for infer_payments.py compatibility
+            const numericMonth = rawMonth.includes('+')
+                ? rawMonth.split('+').map(p => p.replace(/(\d{4})-(\d{2})/, '$2/$1')).join('+')
+                : rawMonth.replace(/(\d{4})-(\d{2})/, '$2/$1');
+            const message = `${name} / ${numericMonth}`;
            const qrTitle = document.getElementById('qrTitle');
            const qrImg = document.getElementById('qrImg');
            const qrAccount = document.getElementById('qrAccount');
--- a/templates/sync.html
+++ b/templates/sync.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FUJ - Sync Bank Data</title>
+    <style>
+        body {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            background-color: #0c0c0c;
+            color: #cccccc;
+            padding: 10px;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: 11px;
+            line-height: 1.2;
+        }
+
+        h1 {
+            color: #00ff00;
+            font-family: inherit;
+            margin-top: 10px;
+            margin-bottom: 20px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-size: 14px;
+        }
+
+        .nav {
+            margin-bottom: 20px;
+            font-size: 12px;
+            color: #555;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            align-items: center;
+        }
+
+        .nav > div {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+        }
+
+        .nav a {
+            color: #00ff00;
+            text-decoration: none;
+            padding: 2px 8px;
+            border: 1px solid #333;
+        }
+
+        .nav a.active {
+            color: #000;
+            background-color: #00ff00;
+            border-color: #00ff00;
+        }
+
+        .nav a:hover {
+            color: #fff;
+            border-color: #555;
+        }
+
+        .nav-archived a {
+            font-size: 10px;
+            color: #666;
+            border-color: #222;
+        }
+
+        .nav-archived a.active {
+            color: #ccc;
+            background-color: #333;
+            border-color: #555;
+        }
+
+        .nav-archived a:hover {
+            color: #999;
+            border-color: #444;
+        }
+
+        .output-container {
+            background-color: #111;
+            border: 1px solid #333;
+            padding: 15px;
+            width: 100%;
+            max-width: 1200px;
+            margin-bottom: 30px;
+            overflow-x: auto;
+        }
+
+        .output-container pre {
+            margin: 0;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            color: {% if success %}#cccccc{% else %}#ff6666{% endif %};
+        }
+
+        .status {
+            margin-bottom: 15px;
+            font-size: 12px;
+        }
+
+        .status-ok { color: #00ff00; }
+        .status-error { color: #ff6666; }
+
+        .footer {
+            text-align: center;
+            color: #333;
+            margin-top: 20px;
+            font-size: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="nav">
+        <div>
+            <a href="/adults">[Adults]</a>
+            <a href="/juniors">[Juniors]</a>
+        </div>
+        <div class="nav-archived">
+            <span style="color: #666; margin-right: 5px;">Archived:</span>
+            <a href="/fees">[Adult - Attendance/Fees]</a>
+            <a href="/fees-juniors">[Junior Attendance/Fees]</a>
+            <a href="/reconcile">[Adult Payment Reconciliation]</a>
+            <a href="/reconcile-juniors">[Junior Payment Reconciliation]</a>
+            <a href="/payments">[Payments Ledger]</a>
+        </div>
+        <div class="nav-archived">
+            <span style="color: #666; margin-right: 5px;">Tools:</span>
+            <a href="/sync-bank" class="active">[Sync Bank Data]</a>
+        </div>
+    </div>
+
+    <h1>Sync Bank Data</h1>
+
+    <div class="status">
+        {% if success %}
+        <span class="status-ok">Sync completed successfully.</span>
+        {% else %}
+        <span class="status-error">Sync failed - see output below.</span>
+        {% endif %}
+    </div>
+
+    <div class="output-container">
+        <pre>{{ output }}</pre>
+    </div>
+
+    <div class="footer">
+        {{ build_meta.tag }} | {{ build_meta.commit }} | {{ build_meta.build_date }}
+    </div>
+</body>
+
+</html>