Spaces:

plokmii
/

pradsa

Sleeping

App Files Files Community

plokmii commited on Jun 11

Commit

86b1581

verified ·

1 Parent(s): d62e3af

Force clean rebuild (recover from BUILD_ERROR)

Browse files

Files changed (15) hide show

templates//admin.html +219 -0
templates//analysis.html +608 -0
templates//batch.html +193 -0
templates//combined_analysis.html +418 -0
templates//dashboard.html +141 -0
templates//dsa_analysis.html +382 -0
templates//dsa_batch.html +179 -0
templates//dsa_history.html +110 -0
templates//dsa_index.html +620 -0
templates//dsa_patient.html +434 -0
templates//history.html +178 -0
templates//index.html +927 -0
templates//login.html +63 -0
templates//patient.html +486 -0
templates//register.html +50 -0

templates//admin.html ADDED Viewed

	@@ -0,0 +1,219 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>後台管理</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+<div class="container py-4" style="max-width: 1000px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <h2 class="mb-0">後台管理</h2>
+        <div>
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/logout" class="btn btn-outline-secondary btn-sm">登出</a>
+        </div>
+    </div>
+    <h5>使用者管理</h5>
+    <table class="table table-bordered bg-white" style="font-size:.9rem;">
+        <thead class="table-light">
+            <tr>
+                <th>ID</th>
+                <th>姓名</th>
+                <th>Email</th>
+                <th>帳號</th>
+                <th>密碼</th>
+                <th>權限</th>
+                <th>註冊時間</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+        {% for u in users %}
+        <tr id="user-{{ u.id }}">
+            <td>{{ u.id }}</td>
+            <td id="name-{{ u.id }}">{{ u.display_name or '' }}</td>
+            <td id="email-{{ u.id }}">{{ u.username }}</td>
+            <td>{{ u.username }}</td>
+            <td>{{ u.password_plain or '***' }}</td>
+            <td>
+                <select class="form-select form-select-sm" style="width:120px;" id="role-{{ u.id }}">
+                    <option value="user" {{ 'selected' if u.role == 'user' else '' }}>一般使用者</option>
+                    <option value="admin" {{ 'selected' if u.role == 'admin' else '' }}>管理員</option>
+                </select>
+            </td>
+            <td>{{ u.created_at or '-' }}</td>
+            <td class="text-nowrap">
+                <button class="btn btn-sm btn-outline-primary me-1" onclick="editUser({{ u.id }})">Edit</button>
+                {% if u.username != username %}
+                <button class="btn btn-sm btn-outline-danger" onclick="deleteUser({{ u.id }}, '{{ u.username }}')">Del</button>
+                {% endif %}
+            </td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+</div>
+    <!-- ============ Storage ============ -->
+    {% set pra_uploads = uploads | selectattr('source', 'equalto', 'PRA') | list %}
+    {% set dsa_uploads = uploads | selectattr('source', 'equalto', 'DSA') | list %}
+    {% set pra_size = (pra_uploads | sum(attribute='size_kb') / 1024) | round(2) %}
+    {% set dsa_size = (dsa_uploads | sum(attribute='size_kb') / 1024) | round(2) %}
+    <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
+        <h5 class="mb-0">檔案儲存空間
+            <small class="text-muted">總計 {{ storage.count }} 個檔案，{{ storage.size_mb }} MB</small>
+        </h5>
+        <div>
+            <a href="/admin/download_all_uploads" class="btn btn-sm btn-outline-success me-1">下載全部（PRA/DSA 分資料夾）</a>
+            <button class="btn btn-sm btn-outline-danger" onclick="cleanupUploads()">清理舊檔案</button>
+        </div>
+    </div>
+    <div class="row g-3 mb-4">
+    {% for grp in [
+        {'label': 'PRA', 'badge': 'bg-primary', 'list': pra_uploads, 'size': pra_size, 'idprefix': 'pra'},
+        {'label': 'DSA', 'badge': 'bg-danger',  'list': dsa_uploads, 'size': dsa_size, 'idprefix': 'dsa'}
+    ] %}
+        <div class="col-md-6">
+            <div class="card h-100">
+                <div class="card-header d-flex justify-content-between align-items-center py-2">
+                    <div>
+                        <span class="badge {{ grp.badge }} me-1">{{ grp.label }}</span>
+                        <strong>{{ grp.list | length }}</strong> 個檔案，共 <strong>{{ grp.size }} MB</strong>
+                    </div>
+                    {% if grp.list %}
+                    <a href="/admin/download_all_uploads?source={{ grp.label }}" class="btn btn-sm btn-outline-primary">下載 {{ grp.label }} 全部</a>
+                    {% endif %}
+                </div>
+                <div class="card-body p-2">
+                    {% if grp.list %}
+                    <div style="max-height: 360px; overflow-y: auto;">
+                    <table class="table table-sm table-bordered mb-0" style="font-size:.82rem;">
+                        <thead class="table-light" style="position:sticky; top:0;">
+                            <tr><th>檔名</th><th style="width:80px;">大小</th><th style="width:130px;">上傳時間</th><th style="width:120px;">操作</th></tr>
+                        </thead>
+                        <tbody>
+                        {% for u in grp.list %}
+                        <tr id="upload-row-{{ grp.idprefix }}-{{ loop.index }}">
+                            <td class="small">{{ u.name }}</td>
+                            <td class="text-end">{{ u.size_kb }} KB</td>
+                            <td class="small">{{ u.mtime }}</td>
+                            <td class="text-nowrap">
+                                <a href="/download_upload/{{ u.name }}" class="btn btn-sm btn-outline-primary py-0 px-2">下載</a>
+                                <button class="btn btn-sm btn-outline-danger py-0 px-2" onclick="deleteUpload('{{ u.name }}', '{{ grp.idprefix }}-{{ loop.index }}')">刪除</button>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                    </div>
+                    {% else %}
+                    <div class="text-muted small">無 {{ grp.label }} 上傳檔案</div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+    </div>
+    <script>
+    function deleteUpload(name, rowKey) {
+        if (!confirm('確定刪除 ' + name + '？')) return;
+        fetch('/admin/delete_upload', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ filename: name })
+        }).then(r => r.json()).then(d => {
+            if (d.ok) {
+                const row = document.getElementById('upload-row-' + rowKey);
+                if (row) row.remove();
+            } else {
+                alert('刪除失敗：' + (d.error || ''));
+            }
+        });
+    }
+    </script>
+<!-- Edit Modal -->
+<div class="modal fade" id="editModal" tabindex="-1">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h6 class="modal-title">編輯使用者</h6>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <input type="hidden" id="editId">
+        <div class="mb-2">
+            <label class="form-label small">姓名</label>
+            <input type="text" class="form-control form-control-sm" id="editName">
+        </div>
+        <div class="mb-2">
+            <label class="form-label small">Email / 帳號</label>
+            <input type="text" class="form-control form-control-sm" id="editEmail">
+        </div>
+        <div class="mb-2">
+            <label class="form-label small">新密碼（空白=不修改）</label>
+            <input type="text" class="form-control form-control-sm" id="editPassword" placeholder="不修改請留空">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">取消</button>
+        <button type="button" class="btn btn-sm btn-primary" onclick="saveUser()">儲存</button>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+function cleanupUploads() {
+    const months = prompt('清理幾個月前的檔案？', '6');
+    if (!months) return;
+    fetch('/admin/cleanup_uploads', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ months: parseInt(months) })
+    })
+    .then(r => r.json())
+    .then(d => {
+        if (d.ok) { alert('已刪除 ' + d.deleted + ' 個檔案'); location.reload(); }
+        else alert('失敗: ' + (d.error || ''));
+    });
+}
+function deleteUser(id, name) {
+    if (!confirm('確定刪除帳號 ' + name + ' ？')) return;
+    fetch('/admin/delete_user/' + id, { method: 'POST' })
+    .then(r => r.json())
+    .then(d => { if (d.ok) document.getElementById('user-' + id).remove(); else alert('刪除失敗'); });
+}
+function editUser(id) {
+    document.getElementById('editId').value = id;
+    document.getElementById('editName').value = document.getElementById('name-' + id).textContent.trim();
+    document.getElementById('editEmail').value = document.getElementById('email-' + id).textContent.trim();
+    document.getElementById('editPassword').value = '';
+    new bootstrap.Modal(document.getElementById('editModal')).show();
+}
+function saveUser() {
+    const id = document.getElementById('editId').value;
+    const role = document.getElementById('role-' + id)?.value || 'user';
+    fetch('/admin/update_user/' + id, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+            display_name: document.getElementById('editName').value.trim(),
+            username: document.getElementById('editEmail').value.trim(),
+            password: document.getElementById('editPassword').value,
+            role: role
+        })
+    })
+    .then(r => r.json())
+    .then(d => { if (d.ok) location.reload(); else alert('更新失敗: ' + (d.error || '')); });
+}
+</script>
+</body>
+</html>

templates//analysis.html ADDED Viewed

	@@ -0,0 +1,608 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>PRA 統計分析</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+<style>
+.chart-container { position: relative; height: 640px; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 1rem; margin-bottom: 1.5rem; }
+.ab-table { font-size: .82rem; }
+.mfi-up { color: #dc3545; }
+.mfi-down { color: #198754; }
+.mfi-new { color: #0d6efd; font-weight: bold; }
+.mfi-gone { color: #000; font-weight: bold; }
+</style>
+</head>
+<body>
+<div class="container py-4" style="max-width: 1200px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <h2 class="mb-0">PRA 統計分析</h2>
+        </div>
+        <div>
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/history" class="btn btn-outline-secondary btn-sm me-1">歷史紀錄</a>
+            {% if chart_no and patient %}
+            <a href="/history/{{ chart_no }}" class="btn btn-outline-info btn-sm me-1">此病患歷史</a>
+            {% endif %}
+            <a href="/new" class="btn btn-outline-primary btn-sm">新增資料</a>
+        </div>
+    </div>
+    <!-- Patient selector -->
+    <form class="row g-2 mb-4" method="get" action="/analysis">
+        <div class="col-sm-4">
+            <select class="form-select" id="patientSelect" onchange="selectPatient(this.value)">
+                <option value="">-- 選擇病人 --</option>
+                {% for p in patients %}
+                <option value="{{ p.chart_no }}" {{ 'selected' if p.chart_no == chart_no else '' }}>
+                    {{ p.patient_name }} ({{ p.chart_no }})
+                </option>
+                {% endfor %}
+            </select>
+        </div>
+        <div class="col-sm-5">
+            <input type="text" class="form-control" id="patientSearch" list="patientList" autocomplete="off"
+                   onchange="selectPatient(this.value)">
+            <datalist id="patientList">
+                {% for p in patients %}
+                <option value="{{ p.chart_no }}" label="{{ p.patient_name }} ({{ p.chart_no }})">
+                {% endfor %}
+            </datalist>
+            <input type="hidden" name="chart_no" id="chartNoInput" value="{{ chart_no }}">
+        </div>
+    </form>
+    <script>
+    function selectPatient(val) {
+        if (!val) return;
+        document.getElementById('chartNoInput').value = val;
+        document.getElementById('chartNoInput').form.submit();
+    }
+    {% if chart_no %}
+    document.getElementById('patientSearch').value = '{{ chart_no }}';
+    {% endif %}
+    </script>
+    {% if patient %}
+    <!-- Donor HLA Input -->
+    <div class="card mb-3">
+        <div class="card-header fw-bold">Donor HLA</div>
+        <div class="card-body" style="font-size:.85rem;">
+            <style>.donor-hla { width: 65px !important; padding: 2px 4px !important; text-align: center; }</style>
+            <div class="row">
+                <!-- Serology -->
+                <div class="col-md-5">
+                    <div class="fw-bold mb-1">Serology</div>
+                    <table class="table table-sm table-bordered mb-1">
+                        <tbody>
+                        <tr><td class="fw-bold">A</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-2" oninput="highlightDSA()"></td>
+                            <td class="fw-bold">DR</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-2" oninput="highlightDSA()"></td></tr>
+                        <tr><td class="fw-bold">B</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-2" oninput="highlightDSA()"></td>
+                            <td class="fw-bold">DQ</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-2" oninput="highlightDSA()"></td></tr>
+                        <tr><td class="fw-bold">Cw</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-2" oninput="highlightDSA()"></td>
+                            <td class="fw-bold">DP</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-2" oninput="highlightDSA()"></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <!-- DNA Typing -->
+                <div class="col-md-7">
+                    <div class="fw-bold mb-1">DNA Typing</div>
+                    <table class="table table-sm table-bordered mb-1">
+                        <tbody>
+                        <tr><td class="fw-bold">A*</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-2" oninput="highlightDSA()"></td>
+                            <td class="fw-bold">DRB1*</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-2" oninput="highlightDSA()"></td></tr>
+                        <tr><td class="fw-bold">B*</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-2" oninput="highlightDSA()"></td>
+                            <td class="fw-bold">DQB1*</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-2" oninput="highlightDSA()"></td></tr>
+                        <tr><td class="fw-bold">C*</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-2" oninput="highlightDSA()"></td>
+                            <td class="fw-bold">DQA1*</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-2" oninput="highlightDSA()"></td></tr>
+                        <tr><td></td><td></td><td></td>
+                            <td class="fw-bold">DPB1*</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-2" oninput="highlightDSA()"></td></tr>
+                        <tr><td></td><td></td><td></td>
+                            <td class="fw-bold">DPA1*</td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-1" oninput="highlightDSA()"></td>
+                            <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-2" oninput="highlightDSA()"></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="text-end">
+                <button class="btn btn-sm btn-outline-danger" onclick="dsaCheckAndSave()">存檔</button>
+            </div>
+        </div>
+    </div>
+    <div class="mb-3">
+        <h4>{{ patient.patient_name }} <span class="text-muted fs-6">({{ patient.chart_no }})</span></h4>
+    </div>
+    <!-- Reports summary -->
+    <table class="table table-bordered table-sm bg-white mb-4" style="font-size:.9rem;">
+        <thead class="table-light">
+            <tr><th style="width:32px;"><input type="checkbox" id="chk-all" checked onchange="toggleAllReports(this)"></th>
+                <th style="width:72px;">順序</th>
+                <th>報告日期</th><th>Class</th><th>PRA%</th><th>Overall</th><th>Specificity</th></tr>
+        </thead>
+        <tbody id="reports-tbody">
+        {% for r in reports %}
+        <tr data-chart="{{ 'chart1' if r.pra_class == 'PRA Class I' else 'chart2' }}">
+            <td><input type="checkbox" class="chk-report" checked
+                       data-chart="{{ 'chart1' if r.pra_class == 'PRA Class I' else 'chart2' }}"
+                       data-label="{{ r.chart_label }}" onchange="onReportChk()"></td>
+            <td class="text-nowrap">
+                <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1" onclick="moveRow(this, -1)" title="向上">↑</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1" onclick="moveRow(this, 1)" title="向下">↓</button>
+            </td>
+            <td>{{ r.chart_label }}</td>
+            <td>{{ r.pra_class }}</td>
+            <td class="fw-bold">{{ r.pra_percent }}%</td>
+            <td><span class="badge {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">{{ r.overall }}</span></td>
+            <td class="small spec-cell" style="max-width:300px;">{{ r.specificity or '(-)' }}</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+    <script>
+    function toggleAllReports(el) {
+        document.querySelectorAll('.chk-report').forEach(c => { c.checked = el.checked; });
+        onReportChk();
+    }
+    function onReportChk() {
+        ['chart1', 'chart2'].forEach(cid => {
+            const fn = window['rebuildChart_' + cid];
+            if (fn) fn();
+            rebuildCompTable(cid);
+        });
+        const all = document.querySelectorAll('.chk-report');
+        const chkd = document.querySelectorAll('.chk-report:checked');
+        const chkAll = document.getElementById('chk-all');
+        if (chkAll) chkAll.checked = all.length === chkd.length;
+    }
+    function rebuildCompTable(chartId) {
+        const tbl = document.querySelector('.comp-table[data-chart-id="' + chartId + '"]');
+        if (!tbl) return;
+        const orderedLabels = (typeof getSelectedLabels === 'function') ? getSelectedLabels(chartId) : [];
+        const selected = new Set(orderedLabels);
+        // 1. show/hide cells by selection
+        tbl.querySelectorAll('[data-date]').forEach(el => {
+            el.style.display = selected.has(el.dataset.date) ? '' : 'none';
+        });
+        // 2. 依 orderedLabels 實際重排每列的日期 cells
+        // 用 row.lastElementChild 當 anchor（最後一格是趨勢/空 th）
+        const allRows = [...tbl.querySelectorAll('thead tr'), ...tbl.querySelectorAll('tbody tr')];
+        allRows.forEach(row => {
+            const dateCells = Array.from(row.querySelectorAll('[data-date]'));
+            if (!dateCells.length) return;
+            const byDate = {};
+            dateCells.forEach(c => {
+                (byDate[c.dataset.date] = byDate[c.dataset.date] || []).push(c);
+            });
+            const anchor = row.lastElementChild;  // 趨勢欄
+            dateCells.forEach(c => c.remove());
+            const placed = new Set();
+            orderedLabels.forEach(d => {
+                (byDate[d] || []).forEach(c => { row.insertBefore(c, anchor); placed.add(c); });
+            });
+            // 未在 orderedLabels 的（被隱藏）放回尾端保留
+            dateCells.forEach(c => { if (!placed.has(c)) row.insertBefore(c, anchor); });
+        });
+        // 3. 以新 DOM 順序重算 trend
+        tbl.querySelectorAll('tbody tr').forEach(tr => {
+            const trendTd = tr.querySelector('.trend-cell');
+            if (!trendTd) return;
+            const visible = Array.from(tr.querySelectorAll('[data-kind="max"]'))
+                .filter(td => td.style.display !== 'none');
+            const parseMax = td => {
+                const v = td.dataset.max;
+                return (v === undefined || v === '') ? null : parseInt(v);
+            };
+            if (visible.length < 2) { trendTd.innerHTML = ''; return; }
+            const first = parseMax(visible[0]);
+            const last = parseMax(visible[visible.length - 1]);
+            if (first !== null && last !== null) {
+                const diff = last - first;
+                if (diff > 500) trendTd.innerHTML = '<span class="mfi-up">&#9650; +' + diff + '</span>';
+                else if (diff < -500) trendTd.innerHTML = '<span class="mfi-down">&#9660; ' + diff + '</span>';
+                else trendTd.innerHTML = '<span class="text-muted">&ndash;</span>';
+            } else if (last !== null && first === null) {
+                trendTd.innerHTML = '<span class="mfi-new">新增</span>';
+            } else if (first !== null && last === null) {
+                trendTd.innerHTML = '<span class="mfi-gone">\u2716 消失</span>';
+            } else {
+                trendTd.innerHTML = '';
+            }
+        });
+    }
+    function getSelectedLabels(chartId) {
+        // 依 tbody DOM 順序回傳，允許使用者重新排序
+        const rows = document.querySelectorAll('#reports-tbody tr[data-chart="' + chartId + '"]');
+        const labels = [];
+        rows.forEach(tr => {
+            const chk = tr.querySelector('.chk-report');
+            if (chk && chk.checked) labels.push(chk.dataset.label);
+        });
+        return labels;
+    }
+    function moveRow(btn, dir) {
+        const tr = btn.closest('tr');
+        if (!tr) return;
+        const sibling = dir < 0 ? tr.previousElementSibling : tr.nextElementSibling;
+        if (!sibling) return;
+        if (dir < 0) tr.parentNode.insertBefore(tr, sibling);
+        else tr.parentNode.insertBefore(sibling, tr);
+        onReportChk();
+    }
+    </script>
+    <!-- MFI Trend Charts -->
+    {% for comp_label, comp_id, comp_dates, comp_antigens, comp_pra in [
+        ('PRA Class I', 'chart1', comparison_class1.dates if comparison_class1 else [],
+         comparison_class1.antigens if comparison_class1 else [],
+         comparison_class1.pra_by_date if comparison_class1 else {}),
+        ('PRA Class II', 'chart2', comparison_class2.dates if comparison_class2 else [],
+         comparison_class2.antigens if comparison_class2 else [],
+         comparison_class2.pra_by_date if comparison_class2 else {})
+    ] %}
+    {% if comp_dates and comp_dates | length >= 1 %}
+    <h5>{{ comp_label }} — MFI 趨勢圖</h5>
+    <div class="mb-2">
+        <small class="text-muted me-2">點圖例可顯示/隱藏抗體</small>
+        <div class="btn-group btn-group-sm" id="filter-{{ comp_id }}">
+            <button type="button" class="btn btn-outline-secondary" onclick="setFilter('{{ comp_id }}',this,'all')">全部</button>
+            <button type="button" class="btn btn-outline-danger" onclick="setFilter('{{ comp_id }}',this,'dsa')">DSA</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setFilter('{{ comp_id }}',this,'10')">Top 10</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setFilter('{{ comp_id }}',this,'20')">Top 20</button>
+        </div>
+    </div>
+    <div class="chart-container">
+        <canvas id="{{ comp_id }}"></canvas>
+    </div>
+    <script>
+    (function() {
+        const dates = {{ comp_dates | tojson }};
+        const allData = [
+        {% for ag in comp_antigens %}
+            { antigen: '{{ ag.antigen }}', allele: '{{ ag.allele }}',
+              values: [{% for d in comp_dates %}{{ ag.mfi_by_date.get(d, {}).get('mean_mfi', 0) }}{% if not loop.last %},{% endif %}{% endfor %}] },
+        {% endfor %}
+        ];
+        function getColor(ag, i) {
+            const ca = ['#e53935','#d81b60','#8e24aa','#5e35b1','#3949ab','#1e88e5','#ef5350','#ec407a'];
+            const cb = ['#00897b','#43a047','#7cb342','#c0ca33','#26a69a','#66bb6a','#9ccc65','#d4e157','#2e7d32','#558b2f'];
+            const cc = ['#ff8f00','#ff6f00','#f57f17','#ffb300','#ffa000'];
+            if (ag.startsWith('A') || ag.startsWith('DR')) return ca[i % ca.length];
+            if (ag.startsWith('B') || ag.startsWith('DQ')) return cb[i % cb.length];
+            return cc[i % cc.length];
+        }
+        allData.sort((a, b) => Math.max(...b.values.filter(v=>v!==null)) - Math.max(...a.values.filter(v=>v!==null)));
+        let chartInst = null;
+        function getDonorSet() {
+            const s = new Set();
+            // Serology: each locus has -1 and -2 fields
+            ['A','B','Cw','DR','DQ','DP'].forEach(l => {
+                [1,2].forEach(n => {
+                    const el = document.getElementById('donor-' + l + '-' + n);
+                    if (!el || !el.value.trim()) return;
+                    s.add(l + el.value.trim());
+                });
+            });
+            // DNA Typing Class I: A*, B*, C*
+            ['A','B','C'].forEach(l => {
+                [1,2].forEach(n => {
+                    const el = document.getElementById('donor-dna-' + l + '-' + n);
+                    if (!el || !el.value.trim()) return;
+                    s.add(l + '*' + el.value.trim());
+                });
+            });
+            // DNA Typing Class II: DRB1*, DQA1*, DQB1*, DPA1*, DPB1*
+            ['DRB1','DQA1','DQB1','DPA1','DPB1'].forEach(l => {
+                [1,2].forEach(n => {
+                    const el = document.getElementById('donor-dna-' + l + '-' + n);
+                    if (!el || !el.value.trim()) return;
+                    s.add(l + '*' + el.value.trim());
+                });
+            });
+            return s;
+        }
+        function matchesDonor(ag, ds) {
+            // 資料已以 allele 為主展開，直接比對 antigen(sero) 或 allele
+            if (ag.antigen && ds.has(ag.antigen)) return true;
+            if (ag.allele && ds.has(ag.allele)) return true;
+            return false;
+        }
+        let currentFilter = 'all';
+        function build(limit) {
+            if (limit) currentFilter = limit;
+            let data;
+            if (currentFilter === 'dsa') {
+                const ds = getDonorSet();
+                data = allData.filter(ag => matchesDonor(ag, ds));
+            } else {
+                data = currentFilter === 'all' ? allData : allData.slice(0, parseInt(currentFilter));
+            }
+            // 套用「報告日期」checkbox 篩選，並依表格 DOM 順序排列 x 軸
+            const orderedLabels = (typeof getSelectedLabels === 'function')
+                ? getSelectedLabels('{{ comp_id }}') : dates.slice();
+            const keepIdx = [];
+            const visibleDates = [];
+            orderedLabels.forEach(lbl => {
+                const idx = dates.indexOf(lbl);
+                if (idx >= 0) { keepIdx.push(idx); visibleDates.push(lbl); }
+            });
+            const datasets = data.map((ag, i) => ({
+                label: ag.antigen + (ag.allele && ag.allele !== ag.antigen ? ' (' + ag.allele + ')' : ''),
+                antigen: ag.antigen,
+                allele: ag.allele,
+                data: keepIdx.map(j => ag.values[j]),
+                borderColor: getColor(ag.antigen, i),
+                backgroundColor: getColor(ag.antigen, i) + '33',
+                borderWidth: 2, pointRadius: 5, pointHoverRadius: 7, tension: 0.3, spanGaps: true,
+            }));
+            if (chartInst) chartInst.destroy();
+            chartInst = new Chart(document.getElementById('{{ comp_id }}'), {
+                type: 'line',
+                data: { labels: visibleDates, datasets },
+                options: {
+                    responsive: true, maintainAspectRatio: false,
+                    interaction: { mode: 'nearest', intersect: false },
+                    plugins: {
+                        legend: { position: 'right', maxWidth: 520, labels: { font: { size: 10 }, boxWidth: 10, padding: 3 } },
+                        tooltip: { callbacks: { label: c => c.dataset.label + ': ' + (c.parsed.y !== null ? c.parsed.y.toLocaleString() : '-') } }
+                    },
+                    scales: {
+                        y: { title: { display: true, text: 'Mean MFI' }, beginAtZero: true },
+                        x: { title: { display: true, text: '報告日期' } }
+                    }
+                }
+            });
+        }
+        window['updateChart_{{ comp_id }}'] = function(val) { build(val || 'all'); highlightDSA(); };
+        window['rebuildChart_{{ comp_id }}'] = function() { build(); };
+        // Default: DSA if donor HLA exists, otherwise all
+        var defaultFilter = 'all';
+        if (getDonorSet().size > 0) {
+            var _ds = getDonorSet();
+            var dsaData = allData.filter(ag => matchesDonor(ag, _ds));
+            if (dsaData.length > 0) defaultFilter = 'dsa';
+        }
+        build(defaultFilter);
+        // 注意：rebuildCompTable 的初始呼叫放到 DOMContentLoaded，
+        // 因為此 IIFE 執行時 .comp-table 還在後面還沒 parse 到 DOM
+        // Set active button
+        document.querySelectorAll('#filter-{{ comp_id }} .btn').forEach(b => {
+            b.classList.remove('active');
+            if ((defaultFilter === 'dsa' && b.textContent === 'DSA') ||
+                (defaultFilter === 'all' && b.textContent === '全部'))
+                b.classList.add('active');
+        });
+    })();
+    </script>
+    <!-- MFI Comparison Table -->
+    {% if comp_dates | length >= 2 %}
+    <h6 class="mt-3">MFI 比較表</h6>
+    <div class="small text-muted mb-1">
+        <span class="mfi-up">&#9650; 上升</span>
+        <span class="mfi-down ms-2">&#9660; 下降</span>
+        <span class="mfi-new ms-2">新增</span>
+        <span class="mfi-gone ms-2">&#10006; 消失</span>
+    </div>
+    <div style="overflow-x:auto;">
+    <table class="table table-bordered table-sm ab-table bg-white mb-4 comp-table" data-chart-id="{{ comp_id }}">
+        <thead class="table-light">
+            <tr>
+                <th>Antigen</th><th>Allele</th>
+                {% for d in comp_dates %}
+                <th class="text-center" colspan="2" data-date="{{ d }}">{{ d }}<br><small>PRA {{ comp_pra.get(d,'?') }}%</small></th>
+                {% endfor %}
+                <th class="text-center">趨勢</th>
+            </tr>
+            <tr><th></th><th></th>
+                {% for d in comp_dates %}<th class="text-end small" data-date="{{ d }}" data-kind="max">Max</th><th class="text-end small" data-date="{{ d }}" data-kind="mean">Mean</th>{% endfor %}
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+        {% for ag in comp_antigens %}
+        <tr>
+            <td class="fw-bold ag-cell" data-ag="{{ ag.antigen }}">{{ ag.antigen }}</td><td class="fw-bold allele-cell" data-allele="{{ ag.allele }}">{{ ag.allele }}</td>
+            {% for d in comp_dates %}
+            {% set val = ag.mfi_by_date.get(d) %}
+            {% if val %}
+            <td class="text-end" data-date="{{ d }}" data-kind="max" data-max="{{ val.max_mfi|int }}">{{ val.max_mfi|int }}</td>
+            <td class="text-end" data-date="{{ d }}" data-kind="mean">{{ val.mean_mfi|int }}</td>
+            {% else %}<td class="text-center text-muted" data-date="{{ d }}" data-kind="max">-</td><td class="text-center text-muted" data-date="{{ d }}" data-kind="mean">-</td>{% endif %}
+            {% endfor %}
+            <td class="text-center trend-cell">
+                {% set first_val = ag.mfi_by_date.get(comp_dates[0]) %}
+                {% set last_val = ag.mfi_by_date.get(comp_dates[-1]) %}
+                {% if first_val and last_val %}
+                    {% set diff = last_val.max_mfi - first_val.max_mfi %}
+                    {% if diff > 500 %}<span class="mfi-up">&#9650; +{{ diff|int }}</span>
+                    {% elif diff < -500 %}<span class="mfi-down">&#9660; {{ diff|int }}</span>
+                    {% else %}<span class="text-muted">&ndash;</span>{% endif %}
+                {% elif last_val and not first_val %}<span class="mfi-new">新增</span>
+                {% elif first_val and not last_val %}<span class="mfi-gone">&#10006; 消失</span>
+                {% endif %}
+            </td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+    </div>
+    {% endif %}
+    {% endif %}
+    {% endfor %}
+    {% elif chart_no %}
+    <div class="alert alert-warning">找不到病歷號 {{ chart_no }}</div>
+    {% else %}
+    <div class="text-center text-muted py-5">請選擇病人查看統計分析</div>
+    {% endif %}
+</div>
+<script>
+// Load saved donor HLA on page load
+window.addEventListener('DOMContentLoaded', function() {
+    // MFI 比較表：依 reports DOM 順序（= chart x 軸順序）重排欄位 + 重算趨勢
+    if (typeof rebuildCompTable === 'function') {
+        ['chart1', 'chart2'].forEach(cid => rebuildCompTable(cid));
+    }
+    const saved = {{ donor_hla | default("", true) | tojson }};
+    if (saved) {
+        try {
+            const obj = JSON.parse(saved);
+            Object.keys(obj).forEach(k => {
+                const el = document.getElementById(k);
+                if (el) el.value = obj[k];
+            });
+        } catch(e) { console.log('donor_hla parse error', e); }
+    }
+    // 一律跑（沒 donor 也要套藍/灰預設色）
+    setTimeout(highlightDSA, 1000);
+});
+function setFilter(chartId, btn, val) {
+    // Toggle active state
+    btn.parentElement.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    window['updateChart_' + chartId](val);
+}
+function dsaCheckAndSave() {
+    highlightDSA();
+    // Save to DB
+    const obj = {};
+    document.querySelectorAll('.donor-hla').forEach(el => {
+        if (el.value.trim()) obj[el.id] = el.value.trim();
+    });
+    fetch('/save_donor_hla', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ chart_no: '{{ chart_no }}', donor_hla: JSON.stringify(obj) })
+    }).then(r => r.json()).then(d => {
+        if (d.ok) {
+            const btn = document.querySelector('[onclick="dsaCheckAndSave()"]');
+            btn.textContent = '已存檔';
+        }
+    });
+}
+function colorizeSpecCells(donorSet) {
+    // Specificity tokens: sero 藍、allele 灰、DSA 紅。即使 donorSet 為空也跑藍/灰。
+    document.querySelectorAll('.spec-cell').forEach(td => {
+        const orig = td.dataset.orig || td.textContent;
+        td.dataset.orig = orig;
+        const tokens = orig.match(/\S+?\([^)]*\)|\S+/g) || [];
+        td.innerHTML = tokens.map(seg => {
+            const m = seg.match(/^([^(]+)(\([^)]*\))?$/);
+            if (!m) return seg;
+            const sero = m[1];
+            const paren = m[2] || '';
+            let isDSA = false;
+            for (const ag of donorSet) {
+                if (!ag) continue;
+                if (sero === ag || (paren && paren.indexOf(ag) >= 0)) { isDSA = true; break; }
+            }
+            if (isDSA) {
+                return '<span style="color:#dc3545;font-weight:bold;background:#fff0f0;padding:0 2px;border-radius:2px;">' + seg + '</span>';
+            }
+            const seroHtml = '<span style="color:#1E40AF;font-weight:bold;">' + sero + '</span>';
+            if (!paren) return seroHtml;
+            const inner = paren.slice(1, -1);
+            const alleleHtml = inner.split(/\s+/).map(a =>
+                a ? '<span style="color:#374151;">' + a + '</span>' : a
+            ).join(' ');
+            return seroHtml + '(' + alleleHtml + ')';
+        }).join(' ');
+    });
+}
+function highlightDSA() {
+    // Build donor HLA set from both sero and DNA inputs
+    const donorSet = new Set();
+    ['A','B','Cw','DR','DQ','DP'].forEach(locus => {
+        [1,2].forEach(n => {
+            const el = document.getElementById('donor-' + locus + '-' + n);
+            if (el && el.value.trim()) donorSet.add(locus + el.value.trim());
+        });
+    });
+    ['A','B','C','DRB1','DQB1','DQA1','DPB1','DPA1'].forEach(locus => {
+        [1,2].forEach(n => {
+            const el = document.getElementById('donor-dna-' + locus + '-' + n);
+            if (el && el.value.trim()) donorSet.add(locus + '*' + el.value.trim());
+        });
+    });
+    // 1. Spec-cell 藍/灰/紅（無條件跑，沒 donor 也要藍/灰）
+    colorizeSpecCells(donorSet);
+    if (donorSet.size === 0) return;
+    // 2. Highlight ag-cell + allele-cell (MFI comparison/antibody strength tables)
+    document.querySelectorAll('.ag-cell').forEach(td => {
+        const ag = td.dataset.ag;
+        const row = td.parentElement;
+        const alleleCell = row.querySelector('.allele-cell') || row.querySelector('td:nth-child(2)');
+        const alleleVal = alleleCell ? (alleleCell.dataset.allele || alleleCell.textContent) : '';
+        const alleles = alleleVal.split(',').map(a => a.trim()).filter(a => a);
+        const agMatch = donorSet.has(ag);
+        const alleleMatch = alleles.some(a => donorSet.has(a));
+        const isMatch = agMatch || alleleMatch;
+        td.style.color = isMatch ? '#dc3545' : '';
+        td.style.background = isMatch ? '#fff0f0' : '';
+        row.style.background = isMatch ? '#fff0f0' : '';
+        if (alleleCell) {
+            alleleCell.style.color = alleleMatch ? '#dc3545' : (isMatch ? '' : '');
+            alleleCell.style.background = isMatch ? '#fff0f0' : '';
+        }
+    });
+    // 3. Highlight chart legend labels
+    document.querySelectorAll('canvas').forEach(canvas => {
+        const chart = Chart.getChart(canvas);
+        if (!chart) return;
+        chart.data.datasets.forEach(ds => {
+            const cleanLabel = ds.label.replace(/ ★$/, '');
+            const labelMatch = (ds.antigen && donorSet.has(ds.antigen)) ||
+                               (ds.allele && donorSet.has(ds.allele));
+            ds.label = labelMatch ? cleanLabel + ' ★' : cleanLabel;
+        });
+        chart.update();
+    });
+}
+</script>
+</body>
+</html>

templates//batch.html ADDED Viewed

	@@ -0,0 +1,193 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>批次新增資料</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<style>
+body { background: #f5f7fa; }
+.drop-zone { border: 2px dashed #adb5bd; border-radius: 12px; padding: 2rem; text-align: center; cursor: pointer; background: #fff; }
+.drop-zone:hover, .drop-zone.dragover { border-color: #0d6efd; background: #e8f0fe; }
+table.preview td, table.preview th { font-size: .88rem; }
+.status-ok { color: #198754; font-weight: bold; }
+.status-err { color: #dc3545; font-weight: bold; }
+.status-dup { color: #fd7e14; font-weight: bold; }
+</style>
+</head>
+<body>
+<div class="container py-4" style="max-width: 1100px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <h2 class="mb-0">批次新增資料</h2>
+        <div>
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/history" class="btn btn-outline-secondary btn-sm me-1">歷史紀錄</a>
+            <a href="/new" class="btn btn-outline-primary btn-sm">單筆新增</a>
+        </div>
+    </div>
+    <div class="alert alert-info">
+        <strong>檔名格式</strong>：必須包含<strong>病歷號</strong>與<strong>姓名</strong>，用底線 <code>_</code> 或空格分隔。<br>
+        範例：<code>40091041_王小明_PRA2_20240605.xls</code>、<code>王小明_40091041 PRA1.xls</code>。<br>
+        系統會自動抓取（姓名在前或病歷號在前都可以），日期與 PRA1 / PRA2 之類描述會被忽略。
+    </div>
+    <div class="card mb-3">
+        <div class="card-body">
+            <div class="drop-zone" id="dropZone" onclick="document.getElementById('fileInput').click()">
+                <div style="font-size:2rem;">&#128193;</div>
+                <div class="fw-bold">點擊或拖曳選取多個 XLS 檔</div>
+                <input type="file" id="fileInput" multiple accept=".xls,.xlsx" style="display:none" onchange="onPick(this)">
+            </div>
+        </div>
+    </div>
+    <div id="previewWrap" style="display:none;">
+        <h5>預覽 <span class="text-muted small">（可手動修正病歷號 / 姓名）</span></h5>
+        <table class="table table-bordered table-sm bg-white preview">
+            <thead class="table-light">
+                <tr><th>檔名</th><th style="width:140px;">病歷號</th><th style="width:140px;">姓名</th><th style="width:100px;">狀態</th><th style="width:72px;"></th></tr>
+            </thead>
+            <tbody id="previewBody"></tbody>
+        </table>
+        <div class="mb-3">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="dupmode" id="mode-overwrite" value="overwrite">
+                <label class="form-check-label" for="mode-overwrite">覆寫</label>
+            </div>
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="dupmode" id="mode-new" value="new" checked>
+                <label class="form-check-label" for="mode-new">可多筆存在</label>
+            </div>
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="dupmode" id="mode-skip" value="skip">
+                <label class="form-check-label" for="mode-skip">跳過</label>
+            </div>
+        </div>
+        <button class="btn btn-primary" id="submitBtn" onclick="submitBatch()">全部上傳</button>
+        <div id="results" class="mt-3"></div>
+    </div>
+</div>
+<script>
+let selectedFiles = [];
+function parseFilename(fname) {
+    const stem = fname.replace(/\.(xls|xlsx)$/i, '');
+    // 切 token：底線、空格、連字號、點號
+    const tokens = stem.split(/[_\-. ]+/).filter(x => x);
+    // 8 位純數字且符合 YYYYMMDD（年 1900-2099、月 1-12、日 1-31）→ 視為日期略過
+    function isDate(t) {
+        if (!/^\d{8}$/.test(t)) return false;
+        const y = +t.slice(0,4), m = +t.slice(4,6), d = +t.slice(6,8);
+        return y >= 1900 && y <= 2099 && m >= 1 && m <= 12 && d >= 1 && d <= 31;
+    }
+    // PRA / PRA1 / PRA2 / PRA-II / Class1 / ClassII → 視為描述略過
+    function isDesc(t) {
+        return /^(PRA\d*|Class\d*|LS\w*|I|II|III)$/i.test(t);
+    }
+    // 7-8 位連續數字（且不是日期）→ 病歷號候選
+    function isChartNo(t) {
+        return /^\d{6,8}$/.test(t) && !isDate(t);
+    }
+    let chart = '', name = '';
+    for (const t of tokens) {
+        if (isDate(t) || isDesc(t)) continue;
+        if (isChartNo(t) && !chart) { chart = t; continue; }
+        // 非純數字且非描述，且還沒抓到姓名
+        if (!/^\d+$/.test(t) && !name) { name = t; }
+    }
+    return { name, chart };
+}
+function onPick(input) {
+    selectedFiles = Array.from(input.files);
+    if (!selectedFiles.length) return;
+    const tbody = document.getElementById('previewBody');
+    tbody.innerHTML = '';
+    selectedFiles.forEach((f, i) => {
+        const p = parseFilename(f.name);
+        const tr = document.createElement('tr');
+        tr.dataset.idx = i;
+        const missing = !p.chart || !p.name;
+        tr.innerHTML = `
+            <td class="small">${f.name}</td>
+            <td><input type="text" class="form-control form-control-sm" data-field="chart" value="${p.chart}"></td>
+            <td><input type="text" class="form-control form-control-sm" data-field="name" value="${p.name}"></td>
+            <td class="${missing ? 'status-err' : 'status-ok'}">${missing ? '缺欄位' : '待上傳'}</td>
+            <td><button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(this)">刪除</button></td>
+        `;
+        tbody.appendChild(tr);
+    });
+    document.getElementById('previewWrap').style.display = 'block';
+}
+function removeRow(btn) {
+    const tr = btn.closest('tr');
+    if (tr) tr.remove();
+    // 若表格已空，隱藏預覽區
+    if (!document.querySelectorAll('#previewBody tr').length) {
+        document.getElementById('previewWrap').style.display = 'none';
+    }
+}
+function submitBatch() {
+    const btn = document.getElementById('submitBtn');
+    const mode = document.querySelector('input[name="dupmode"]:checked').value;
+    const rows = document.querySelectorAll('#previewBody tr');
+    btn.disabled = true;
+    btn.textContent = '上傳中...';
+    const results = document.getElementById('results');
+    results.innerHTML = '<div class="text-muted small">處理中...</div>';
+    const fd = new FormData();
+    fd.append('mode', mode);
+    rows.forEach(tr => {
+        const idx = parseInt(tr.dataset.idx);
+        const chart = tr.querySelector('[data-field="chart"]').value.trim();
+        const name = tr.querySelector('[data-field="name"]').value.trim();
+        const f = selectedFiles[idx];
+        fd.append('file', f);
+        fd.append('chart', chart);
+        fd.append('name', name);
+    });
+    fetch('/batch_upload', { method: 'POST', body: fd })
+    .then(r => r.json())
+    .then(d => {
+        btn.disabled = false;
+        btn.textContent = '全部上傳';
+        let html = '<table class="table table-sm table-bordered"><thead><tr><th>檔名</th><th>結果</th></tr></thead><tbody>';
+        (d.results || []).forEach(r => {
+            let cls = 'status-ok', msg = '成功新增';
+            if (r.status === 'error') { cls = 'status-err'; msg = r.msg || '失敗'; }
+            else if (r.status === 'duplicate') { cls = 'status-dup'; msg = '重複，已複寫'; }
+            else if (r.status === 'skipped') { cls = 'status-dup'; msg = '重複，跳過不新增'; }
+            html += `<tr><td class="small">${r.file}</td><td class="${cls}">${msg}</td></tr>`;
+        });
+        html += '</tbody></table>';
+        html += `<div class="mt-2">成功 ${d.summary.ok}、重複 ${d.summary.dup || 0}、失敗 ${d.summary.err}（共 ${d.summary.total}）</div>`;
+        if (d.summary.ok > 0) html += '<a href="/history" class="btn btn-sm btn-outline-primary mt-2">查看歷史紀錄</a>';
+        results.innerHTML = html;
+    })
+    .catch(e => {
+        btn.disabled = false;
+        btn.textContent = '全部上傳';
+        results.innerHTML = '<div class="alert alert-danger">上傳失敗：' + e + '</div>';
+    });
+}
+// Drag & drop
+const dz = document.getElementById('dropZone');
+['dragenter', 'dragover'].forEach(ev => dz.addEventListener(ev, e => { e.preventDefault(); dz.classList.add('dragover'); }));
+['dragleave', 'drop'].forEach(ev => dz.addEventListener(ev, e => { e.preventDefault(); dz.classList.remove('dragover'); }));
+dz.addEventListener('drop', e => {
+    const dt = new DataTransfer();
+    Array.from(e.dataTransfer.files).forEach(f => dt.items.add(f));
+    document.getElementById('fileInput').files = dt.files;
+    onPick(document.getElementById('fileInput'));
+});
+</script>
+</body>
+</html>

templates//combined_analysis.html ADDED Viewed

	@@ -0,0 +1,418 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{% if patient %}{{ patient.patient_name }} — {% endif %}綜合分析 (PRA + DSA)</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+<style>
+.chart-container { position: relative; height: 540px; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 1rem; margin-bottom: 1.5rem; }
+.ab-table { font-size: .82rem; }
+.strength-strong { --bs-table-bg: #f8d7da; background-color: #f8d7da !important; font-weight: bold; }
+.strength-strong > td { background-color: #f8d7da !important; }
+.strength-weak { --bs-table-bg: #fff9c4; background-color: #fff9c4 !important; }
+.strength-weak > td { background-color: #fff9c4 !important; }
+.spec-strong-bg { background-color: #f8d7da; padding: 3px 6px; border-radius: 3px; margin-bottom: 2px; display: block; }
+.spec-weak-bg { background-color: #fff9c4; padding: 3px 6px; border-radius: 3px; display: block; }
+.badge-pra { background: #1E40AF; }
+.badge-dsa { background: #dc3545; }
+</style>
+</head>
+<body>
+<div class="container py-4" style="max-width: 1200px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div><h2 class="mb-0">綜合分析 <span class="text-muted fs-5">PRA + DSA</span></h2></div>
+        <div>
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/history" class="btn btn-outline-primary btn-sm me-1">PRA 歷史</a>
+            <a href="/dsa/history" class="btn btn-outline-danger btn-sm">DSA 歷史</a>
+        </div>
+    </div>
+    <form class="row g-2 mb-4" method="get" action="/combined">
+        <div class="col-sm-6">
+            <select class="form-select" id="patientSelect" onchange="selectPatient(this.value)">
+                <option value="">-- 選擇病人（同時有 PRA + DSA） --</option>
+                {% for p in patients %}
+                <option value="{{ p.chart_no }}" {{ 'selected' if p.chart_no == chart_no else '' }}>
+                    {{ p.patient_name }} ({{ p.chart_no }}) — PRA {{ p.pra_count }} 筆 / DSA {{ p.dsa_count }} 筆
+                </option>
+                {% endfor %}
+            </select>
+            <input type="hidden" name="chart_no" id="chartNoInput" value="{{ chart_no }}">
+        </div>
+    </form>
+    <script>
+    function selectPatient(val) {
+        if (!val) return;
+        document.getElementById('chartNoInput').value = val;
+        document.getElementById('chartNoInput').form.submit();
+    }
+    </script>
+    {% if not patients %}
+    <div class="alert alert-secondary">尚無同時測過 PRA 與 DSA 的病人。</div>
+    {% endif %}
+    {% if patient %}
+    <div class="card mb-3">
+        <div class="card-header fw-bold">{{ patient.patient_name }} ({{ patient.chart_no }}) — Donor HLA</div>
+        <div class="card-body" style="font-size:.85rem;">
+            <style>.donor-hla { width: 80px !important; padding: 2px 4px !important; text-align: center; }</style>
+            <div class="row">
+                <div class="col-md-5">
+                    <div class="fw-bold mb-1">Serology</div>
+                    <table class="table table-sm table-bordered mb-1"><tbody>
+                    <tr><td class="fw-bold">A</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DR</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">B</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQ</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">Cw</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DP</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-2" oninput="highlightDSA()"></td></tr>
+                    </tbody></table>
+                </div>
+                <div class="col-md-7">
+                    <div class="fw-bold mb-1">DNA Typing</div>
+                    <table class="table table-sm table-bordered mb-1"><tbody>
+                    <tr><td class="fw-bold">A*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DRB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">B*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">C*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQA1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td></td><td></td><td></td>
+                        <td class="fw-bold">DPB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td></td><td></td><td></td>
+                        <td class="fw-bold">DPA1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-2" oninput="highlightDSA()"></td></tr>
+                    </tbody></table>
+                </div>
+            </div>
+            <div class="text-end">
+                <button class="btn btn-sm btn-outline-danger" onclick="saveDonorHLA(this)">存檔</button>
+            </div>
+        </div>
+    </div>
+    <script>
+    function getDonorSet() {
+        const s = new Set();
+        ['A','B','Cw','DR','DQ','DP'].forEach(l => {
+            [1,2].forEach(n => {
+                const el = document.getElementById('donor-' + l + '-' + n);
+                if (el && el.value.trim()) s.add(l + el.value.trim());
+            });
+        });
+        ['A','B','C','DRB1','DQB1','DQA1','DPB1','DPA1'].forEach(l => {
+            [1,2].forEach(n => {
+                const el = document.getElementById('donor-dna-' + l + '-' + n);
+                if (el && el.value.trim()) s.add(l + '*' + el.value.trim());
+            });
+        });
+        return s;
+    }
+    function highlightTokensInCell(cell, donorSet) {
+        if (!cell) return;
+        const text = cell.dataset.orig || cell.textContent;
+        cell.dataset.orig = text;
+        const tokens = text.split(/,\s*/);
+        cell.innerHTML = tokens.map(tok => {
+            const t = tok.trim();
+            if (!t) return tok;
+            for (const ag of donorSet) {
+                if (t.includes(ag)) return '<span style="color:#dc3545;font-weight:bold;">' + tok + '</span>';
+            }
+            return tok;
+        }).join(', ');
+    }
+    function highlightSpecText(specEl, donorSet) {
+        if (!specEl) return;
+        const orig = specEl.dataset.orig || specEl.textContent;
+        specEl.dataset.orig = orig;
+        const tokens = orig.match(/\S+?\([^)]*\)|\S+/g) || [];
+        specEl.innerHTML = tokens.map(seg => {
+            const m = seg.match(/^([^(]+)(\([^)]*\))?$/);
+            if (!m) return seg;
+            const sero = m[1];
+            const paren = m[2] || '';
+            if (!/^[A-Za-z]/.test(sero)) return seg;
+            let isDSA = false;
+            for (const ag of donorSet) {
+                if (!ag) continue;
+                if (sero === ag || (paren && paren.indexOf(ag) >= 0)) { isDSA = true; break; }
+            }
+            if (isDSA) return '<span style="color:#dc3545;font-weight:bold;">' + seg + '</span>';
+            const seroHtml = '<span style="color:#1E40AF;font-weight:bold;">' + sero + '</span>';
+            if (!paren) return seroHtml;
+            const inner = paren.slice(1, -1);
+            const alleleHtml = inner.split(/\s+/).map(a =>
+                a ? '<span style="color:#374151;">' + a + '</span>' : a
+            ).join(' ');
+            return seroHtml + '(' + alleleHtml + ')';
+        }).join(' ');
+    }
+    function highlightDSA() {
+        const ds = getDonorSet();
+        document.querySelectorAll('.spec-cell').forEach(el => highlightSpecText(el, ds));
+        document.querySelectorAll('.ab-table tbody tr').forEach(tr => {
+            highlightTokensInCell(tr.cells[0], ds);
+            highlightTokensInCell(tr.cells[1], ds);
+        });
+        ['chart1', 'chart2'].forEach(cid => {
+            const fn = window['rebuildCombinedChart_' + cid];
+            if (typeof fn === 'function') fn();
+        });
+    }
+    function setCombinedFilter(chartId, btn, val) {
+        btn.parentElement.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        const fn = window['updateCombinedFilter_' + chartId];
+        if (typeof fn === 'function') fn(val);
+    }
+    function saveDonorHLA(btn) {
+        const obj = {};
+        document.querySelectorAll('.donor-hla').forEach(el => {
+            if (el.value.trim()) obj[el.id] = el.value.trim();
+        });
+        btn.disabled = true;
+        fetch('/save_donor_hla', {
+            method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ chart_no: '{{ patient.chart_no }}', donor_hla: JSON.stringify(obj) })
+        }).then(r => r.json()).then(d => {
+            btn.disabled = false;
+            if (d.ok) { btn.classList.remove('btn-outline-danger'); btn.classList.add('btn-danger'); btn.textContent = '已存檔'; }
+        });
+        highlightDSA();
+    }
+    window.addEventListener('DOMContentLoaded', function() {
+        const saved = {{ donor_hla | default('', true) | tojson }};
+        if (saved) {
+            try {
+                const obj = JSON.parse(saved);
+                Object.keys(obj).forEach(k => {
+                    const el = document.getElementById(k);
+                    if (el) el.value = obj[k];
+                });
+            } catch(e) {}
+        }
+        ['chart1', 'chart2'].forEach(cid => {
+            const fn = window['applyCombinedDefault_' + cid];
+            if (typeof fn === 'function') fn();
+        });
+        highlightDSA();
+    });
+    </script>
+    <h5>Reports Timeline</h5>
+    <table class="table table-bordered table-sm bg-white mb-4" style="font-size:.9rem;">
+        <thead class="table-light"><tr><th>Source</th><th>Date</th><th>Class</th><th>%</th><th>Overall</th><th>Specificity</th></tr></thead>
+        <tbody>
+        {% for r in reports %}
+        <tr>
+            <td><span class="badge {{ 'badge-pra' if r.source == 'PRA' else 'badge-dsa' }}">{{ r.source }}</span></td>
+            <td>{{ r.report_date }}</td>
+            <td>{{ r.class_label }}</td>
+            <td class="fw-bold">{{ r.pct }}%</td>
+            <td><span class="badge {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">{{ r.overall }}</span></td>
+            <td class="small" style="max-width:400px;">
+            {%- set spec_text = (r.specificity or '') | replace('&gt;', '>') -%}
+            {%- if 'Weak (MFI' in spec_text -%}
+              {%- set parts = spec_text.split('Weak (MFI', 1) -%}
+              <div class="spec-cell spec-strong-bg">{{ parts[0]|trim }}</div>
+              <div class="spec-cell spec-weak-bg">Weak (MFI{{ parts[1] }}</div>
+            {%- else -%}
+              <div class="spec-cell">{{ spec_text or '(-)' }}</div>
+            {%- endif -%}
+            </td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+    {% for comp_label, comp_id, comp_dates, comp_antigens in [
+        ('Class I', 'chart1', comparison_class1.dates if comparison_class1 else [], comparison_class1.antigens if comparison_class1 else []),
+        ('Class II', 'chart2', comparison_class2.dates if comparison_class2 else [], comparison_class2.antigens if comparison_class2 else [])
+    ] %}
+    {% if comp_dates and comp_dates | length >= 1 %}
+    <h5>{{ comp_label }} &mdash; Combined MFI Trend
+        <small class="text-muted ms-2">DSA 實線&#x25B2; / PRA 虛線&#x25CF;</small>
+    </h5>
+    <div class="mb-2">
+        <small class="text-muted me-2">點圖例可顯示/隱藏抗體</small>
+        <div class="btn-group btn-group-sm" id="filter-{{ comp_id }}">
+            <button type="button" class="btn btn-outline-secondary" onclick="setCombinedFilter('{{ comp_id }}',this,'all')">全部</button>
+            <button type="button" class="btn btn-outline-danger" onclick="setCombinedFilter('{{ comp_id }}',this,'dsa')">DSA</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setCombinedFilter('{{ comp_id }}',this,'10')">Top 10</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setCombinedFilter('{{ comp_id }}',this,'20')">Top 20</button>
+        </div>
+    </div>
+    <div class="chart-container"><canvas id="{{ comp_id }}"></canvas></div>
+    <script>
+    (function() {
+        const dates = {{ comp_dates | tojson }};
+        const allData = [
+        {% for ag in comp_antigens %}
+            { allele: '{{ ag.allele }}', antigen: '{{ ag.antigen }}',
+              pra: [{% for d in comp_dates %}{% set v = ag.pra_mfi.get(d) %}{{ v if v is not none else 'null' }}{% if not loop.last %},{% endif %}{% endfor %}],
+              dsa: [{% for d in comp_dates %}{% set v = ag.dsa_mfi.get(d) %}{{ v if v is not none else 'null' }}{% if not loop.last %},{% endif %}{% endfor %}] },
+        {% endfor %}
+        ];
+        function getColor(ag, i) {
+            const a = ['#e53935','#d81b60','#8e24aa','#5e35b1','#3949ab','#1e88e5','#ef5350','#ec407a'];
+            const b = ['#00897b','#43a047','#7cb342','#c0ca33','#26a69a','#66bb6a','#9ccc65','#d4e157'];
+            const c = ['#ff8f00','#ff6f00','#f57f17','#ffb300','#ffa000'];
+            if (ag.startsWith('A') || ag.startsWith('DR')) return a[i % a.length];
+            if (ag.startsWith('B') || ag.startsWith('DQ')) return b[i % b.length];
+            return c[i % c.length];
+        }
+        // Sort by combined max MFI desc
+        allData.forEach(ag => {
+            const all_vals = ag.pra.concat(ag.dsa).filter(v => v !== null);
+            ag._max = all_vals.length ? Math.max(...all_vals) : 0;
+        });
+        allData.sort((x, y) => y._max - x._max);
+        let chartInstance = null;
+        let currentFilter = '20';
+        function matchesDonor(ag, ds) {
+            if (ag.antigen && ds.has(ag.antigen)) return true;
+            if (ag.allele && ds.has(ag.allele)) return true;
+            return false;
+        }
+        function buildChart(limit) {
+            if (limit) currentFilter = limit;
+            let data;
+            if (currentFilter === 'dsa') {
+                const ds = (typeof getDonorSet === 'function') ? getDonorSet() : new Set();
+                data = allData.filter(ag => matchesDonor(ag, ds));
+            } else if (currentFilter === 'all') {
+                data = allData;
+            } else {
+                data = allData.slice(0, parseInt(currentFilter));
+            }
+            const datasets = [];
+            data.forEach((ag, i) => {
+                const col = getColor(ag.antigen || ag.allele, i);
+                const hasPra = ag.pra.some(v => v !== null);
+                const hasDsa = ag.dsa.some(v => v !== null);
+                const labelBase = ag.antigen + (ag.allele && ag.allele !== ag.antigen ? '(' + ag.allele + ')' : '');
+                if (hasPra) datasets.push({
+                    label: labelBase + ' PRA', data: ag.pra,
+                    borderColor: col, backgroundColor: col + '33',
+                    borderWidth: 2, borderDash: [6, 4], pointRadius: 4, pointHoverRadius: 6,
+                    pointStyle: 'circle', tension: 0.3, spanGaps: true,
+                });
+                if (hasDsa) datasets.push({
+                    label: labelBase + ' DSA', data: ag.dsa,
+                    borderColor: col, backgroundColor: col + '33',
+                    borderWidth: 2.5, pointRadius: 5, pointHoverRadius: 7,
+                    pointStyle: 'triangle', tension: 0.3, spanGaps: true,
+                });
+            });
+            if (chartInstance) chartInstance.destroy();
+            chartInstance = new Chart(document.getElementById('{{ comp_id }}'), {
+                type: 'line', data: { labels: dates, datasets: datasets },
+                options: { responsive: true, maintainAspectRatio: false,
+                    interaction: { mode: 'nearest', intersect: false },
+                    plugins: {
+                        legend: { position: 'right', labels: { font: { size: 11 }, boxWidth: 12, padding: 4, usePointStyle: true } },
+                        tooltip: { callbacks: { label: c => c.dataset.label + ': ' + (c.parsed.y !== null ? c.parsed.y.toLocaleString() : '-') } }
+                    },
+                    scales: { y: { title: { display: true, text: 'Max MFI' }, beginAtZero: true },
+                              x: { title: { display: true, text: 'Report Date' } } } }
+            });
+        }
+        window['rebuildCombinedChart_{{ comp_id }}'] = function() { buildChart(); };
+        window['updateCombinedFilter_{{ comp_id }}'] = function(val) { buildChart(val); };
+        function applyDefault() {
+            let defaultFilter = '20';
+            try {
+                const ds = (typeof getDonorSet === 'function') ? getDonorSet() : new Set();
+                if (ds.size > 0 && allData.some(ag => matchesDonor(ag, ds))) defaultFilter = 'dsa';
+            } catch (e) {}
+            buildChart(defaultFilter);
+            document.querySelectorAll('#filter-{{ comp_id }} .btn').forEach(b => {
+                b.classList.remove('active');
+                if ((defaultFilter === 'dsa' && b.textContent === 'DSA') ||
+                    (defaultFilter === '20' && b.textContent === 'Top 20'))
+                    b.classList.add('active');
+            });
+        }
+        window['applyCombinedDefault_{{ comp_id }}'] = applyDefault;
+        applyDefault();
+    })();
+    </script>
+    {% endif %}
+    {% endfor %}
+    <h5>Antibody Strength <small class="text-muted">(每筆報告獨立)</small></h5>
+    {% for r in reports %}
+    {% if r.antibodies %}
+    <div class="card mb-3">
+        <div class="card-header">
+            <span class="badge {{ 'badge-pra' if r.source == 'PRA' else 'badge-dsa' }} me-1">{{ r.source }}</span>
+            <strong>{{ r.class_label }}</strong> &mdash; {{ r.report_date }}
+            <span class="badge ms-1 {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">{{ r.overall }}</span>
+            <span class="fw-bold ms-1">{{ r.pct }}%</span>
+        </div>
+        <div class="card-body p-2">
+            <table class="table table-sm table-bordered ab-table mb-0">
+                <thead class="table-light"><tr>
+                    <th>Antigen</th><th>Allele</th>
+                    {% if r.source == 'DSA' %}<th>Strength</th>{% endif %}
+                    <th class="text-end">Max MFI</th>
+                    <th class="text-end">Mean MFI</th><th class="text-center">No of Beads</th><th>Bead IDs</th>
+                </tr></thead>
+                <tbody>
+                {% for a in r.antibodies %}
+                <tr class="{% if r.source == 'DSA' and a.strength == 'Strong' %}strength-strong{% elif r.source == 'DSA' and a.strength == 'Weak' %}strength-weak{% endif %}">
+                    <td style="color:#1E40AF;font-weight:bold;">{{ a.antigen }}</td>
+                    <td class="small" style="color:#374151;">{{ a.allele }}</td>
+                    {% if r.source == 'DSA' %}<td>{{ a.strength or '' }}</td>{% endif %}
+                    <td class="text-end">{{ a.max_mfi|int }}</td>
+                    <td class="text-end">{{ a.mean_mfi|int }}</td>
+                    <td class="text-center">{{ a.no_of_beads }}</td>
+                    <td class="small text-muted">{{ a.bead_ids }}</td>
+                </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% endif %}
+    {% endfor %}
+    {% else %}
+    {% if patients %}
+    <div class="alert alert-info">請先選擇病人。</div>
+    {% endif %}
+    {% endif %}
+</div>
+</body>
+</html>

templates//dashboard.html ADDED Viewed

	@@ -0,0 +1,141 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>腎臟免疫學分析</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<style>
+body { background: #f5f7fa; }
+.dash-card {
+    background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.08);
+    padding: 2rem 1rem; text-align: center; transition: all .2s; cursor: pointer;
+    text-decoration: none; color: inherit; display: block; height: 100%;
+}
+.dash-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.15); transform: translateY(-2px); }
+.dash-card.disabled { cursor: not-allowed; opacity: .55; }
+.dash-card.disabled:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); transform: none; }
+.dash-icon { font-size: 2.3rem; margin-bottom: .6rem; }
+.dash-label { font-size: 1.15rem; font-weight: 600; }
+.dash-desc { font-size: .82rem; color: #6c757d; margin-top: .3rem; }
+.section-title {
+    font-size: .9rem; font-weight: 600; color: #6c757d; text-transform: uppercase;
+    letter-spacing: .08em; margin: 1.8rem 0 .8rem; padding-bottom: .4rem;
+    border-bottom: 1px solid #dee2e6;
+}
+.section-title.pra { color: #1E40AF; border-bottom-color: #bfdbfe; }
+.section-title.dsa { color: #dc3545; border-bottom-color: #f5c2c7; }
+.section-title.combined { color: #6f42c1; border-bottom-color: #d6c2f2; }
+.section-title.admin { color: #198754; border-bottom-color: #badbcc; }
+</style>
+</head>
+<body>
+<div class="container py-5" style="max-width: 1100px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <h2 class="mb-0">腎臟免疫學分析</h2>
+            <p class="text-muted mb-0">LABScreen PRA Class I / II &amp; Donor-Specific Antibody</p>
+        </div>
+        <div>
+            <span class="text-muted me-2">{{ username }}</span>
+            {% if is_admin %}
+            <a href="/admin" class="btn btn-outline-danger btn-sm me-1">後台管理</a>
+            {% endif %}
+            <a href="/logout" class="btn btn-outline-secondary btn-sm">登出</a>
+        </div>
+    </div>
+    <!-- 第一排：PRA -->
+    <div class="section-title pra">PRA Analysis</div>
+    <div class="row g-3">
+        <div class="col-md-3 col-sm-6">
+            <a href="/new" class="dash-card">
+                <div class="dash-icon">&#128196;</div>
+                <div class="dash-label">新增資料</div>
+                <div class="dash-desc">上傳單筆XLS進行分析</div>
+            </a>
+        </div>
+        <div class="col-md-3 col-sm-6">
+            <a href="/batch_upload" class="dash-card">
+                <div class="dash-icon">&#128218;</div>
+                <div class="dash-label">批次新增資料</div>
+                <div class="dash-desc">上傳多筆XLS自動抓取</div>
+            </a>
+        </div>
+        <div class="col-md-3 col-sm-6">
+            <a href="/history" class="dash-card">
+                <div class="dash-icon">&#128269;</div>
+                <div class="dash-label">查詢紀錄</div>
+                <div class="dash-desc">搜尋病人歷史報告</div>
+            </a>
+        </div>
+        <div class="col-md-3 col-sm-6">
+            <a href="/analysis" class="dash-card">
+                <div class="dash-icon">&#128200;</div>
+                <div class="dash-label">統計分析</div>
+                <div class="dash-desc">MFI 趨勢圖與比較</div>
+            </a>
+        </div>
+    </div>
+    <!-- 第二排：DSA -->
+    <div class="section-title dsa">DSA Analysis</div>
+    <div class="row g-3">
+        <div class="col-md-3 col-sm-6">
+            <a href="/dsa/new" class="dash-card">
+                <div class="dash-icon">&#128196;</div>
+                <div class="dash-label">新增資料</div>
+                <div class="dash-desc">上傳單筆XLS進行分析</div>
+            </a>
+        </div>
+        <div class="col-md-3 col-sm-6">
+            <a href="/dsa/batch_upload" class="dash-card">
+                <div class="dash-icon">&#128218;</div>
+                <div class="dash-label">批次新增資料</div>
+                <div class="dash-desc">上傳多筆XLS自動抓取</div>
+            </a>
+        </div>
+        <div class="col-md-3 col-sm-6">
+            <a href="/dsa/history" class="dash-card">
+                <div class="dash-icon">&#128269;</div>
+                <div class="dash-label">查詢紀錄</div>
+                <div class="dash-desc">搜尋病人歷史報告</div>
+            </a>
+        </div>
+        <div class="col-md-3 col-sm-6">
+            <a href="/dsa/analysis" class="dash-card">
+                <div class="dash-icon">&#128200;</div>
+                <div class="dash-label">統計分析</div>
+                <div class="dash-desc">MFI 趨勢圖與比較</div>
+            </a>
+        </div>
+    </div>
+    <!-- 第三排：綜合分析（PRA + DSA 對照） -->
+    <div class="section-title combined">綜合分析</div>
+    <div class="row g-3">
+        <div class="col-md-3 col-sm-6">
+            <a href="/combined" class="dash-card" style="border: 2px solid #6f42c1;">
+                <div class="dash-icon">&#128202;</div>
+                <div class="dash-label">PRA + DSA 綜合分析</div>
+                <div class="dash-desc">同病人 PRA / DSA 同表對照</div>
+            </a>
+        </div>
+    </div>
+    <!-- 第四排：後台管理（僅 admin） -->
+    {% if is_admin %}
+    <div class="section-title admin">後台管理</div>
+    <div class="row g-3">
+        <div class="col-md-3 col-sm-6">
+            <a href="/admin" class="dash-card" style="border: 2px solid #dc3545;">
+                <div class="dash-icon">&#9881;</div>
+                <div class="dash-label">後台管理</div>
+                <div class="dash-desc">使用者帳號與權限管理</div>
+            </a>
+        </div>
+    </div>
+    {% endif %}
+</div>
+</body>
+</html>

templates//dsa_analysis.html ADDED Viewed

	@@ -0,0 +1,382 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>DSA 統計分析</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+<style>
+.chart-container { position: relative; height: 540px; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 1rem; margin-bottom: 1.5rem; }
+.ab-table { font-size: .82rem; }
+.strength-strong { --bs-table-bg: #f8d7da; background-color: #f8d7da !important; font-weight: bold; }
+.strength-strong > td { background-color: #f8d7da !important; }
+.strength-weak { --bs-table-bg: #fff9c4; background-color: #fff9c4 !important; }
+.strength-weak > td { background-color: #fff9c4 !important; }
+.spec-strong-bg { background-color: #f8d7da; padding: 3px 6px; border-radius: 3px; margin-bottom: 2px; display: block; }
+.spec-weak-bg { background-color: #fff9c4; padding: 3px 6px; border-radius: 3px; display: block; }
+</style>
+</head>
+<body>
+<div class="container py-4" style="max-width: 1200px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div><h2 class="mb-0">DSA 統計分析</h2></div>
+        <div>
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/dsa/history" class="btn btn-outline-secondary btn-sm me-1">歷史紀錄</a>
+            {% if chart_no and patient %}
+            <a href="/dsa/history/{{ chart_no }}" class="btn btn-outline-info btn-sm me-1">此病患歷史</a>
+            {% endif %}
+            <a href="/dsa/new" class="btn btn-outline-primary btn-sm">新增資料</a>
+        </div>
+    </div>
+    <form class="row g-2 mb-4" method="get" action="/dsa/analysis">
+        <div class="col-sm-6">
+            <select class="form-select" id="patientSelect" onchange="selectPatient(this.value)">
+                <option value="">-- 選擇病人 --</option>
+                {% for p in patients %}
+                <option value="{{ p.chart_no }}" {{ 'selected' if p.chart_no == chart_no else '' }}>
+                    {{ p.patient_name }} ({{ p.chart_no }})
+                </option>
+                {% endfor %}
+            </select>
+            <input type="hidden" name="chart_no" id="chartNoInput" value="{{ chart_no }}">
+        </div>
+    </form>
+    <script>
+    function selectPatient(val) {
+        if (!val) return;
+        document.getElementById('chartNoInput').value = val;
+        document.getElementById('chartNoInput').form.submit();
+    }
+    </script>
+    {% if patient %}
+    <div class="card mb-3">
+        <div class="card-header fw-bold">{{ patient.patient_name }} ({{ patient.chart_no }}) — Donor HLA</div>
+        <div class="card-body" style="font-size:.85rem;">
+            <style>.donor-hla { width: 80px !important; padding: 2px 4px !important; text-align: center; }</style>
+            <div class="row">
+                <div class="col-md-5">
+                    <div class="fw-bold mb-1">Serology</div>
+                    <table class="table table-sm table-bordered mb-1"><tbody>
+                    <tr><td class="fw-bold">A</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DR</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">B</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQ</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">Cw</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DP</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-2" oninput="highlightDSA()"></td></tr>
+                    </tbody></table>
+                </div>
+                <div class="col-md-7">
+                    <div class="fw-bold mb-1">DNA Typing</div>
+                    <table class="table table-sm table-bordered mb-1"><tbody>
+                    <tr><td class="fw-bold">A*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DRB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">B*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">C*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQA1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td></td><td></td><td></td>
+                        <td class="fw-bold">DPB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td></td><td></td><td></td>
+                        <td class="fw-bold">DPA1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-2" oninput="highlightDSA()"></td></tr>
+                    </tbody></table>
+                </div>
+            </div>
+            <div class="text-end">
+                <button class="btn btn-sm btn-outline-danger" onclick="saveDonorHLA(this)">存檔</button>
+            </div>
+        </div>
+    </div>
+    <script>
+    function getDonorSet() {
+        const s = new Set();
+        ['A','B','Cw','DR','DQ','DP'].forEach(l => {
+            [1,2].forEach(n => {
+                const el = document.getElementById('donor-' + l + '-' + n);
+                if (el && el.value.trim()) s.add(l + el.value.trim());
+            });
+        });
+        ['A','B','C','DRB1','DQB1','DQA1','DPB1','DPA1'].forEach(l => {
+            [1,2].forEach(n => {
+                const el = document.getElementById('donor-dna-' + l + '-' + n);
+                if (el && el.value.trim()) s.add(l + '*' + el.value.trim());
+            });
+        });
+        return s;
+    }
+    function highlightTokensInCell(cell, donorSet) {
+        if (!cell) return;
+        const text = cell.dataset.orig || cell.textContent;
+        cell.dataset.orig = text;
+        const tokens = text.split(/,\s*/);
+        cell.innerHTML = tokens.map(tok => {
+            const t = tok.trim();
+            if (!t) return tok;
+            for (const ag of donorSet) {
+                if (t.includes(ag)) return '<span style="color:#dc3545;font-weight:bold;">' + tok + '</span>';
+            }
+            return tok;
+        }).join(', ');
+    }
+    function highlightSpecText(specEl, donorSet) {
+        if (!specEl) return;
+        const orig = specEl.dataset.orig || specEl.textContent;
+        specEl.dataset.orig = orig;
+        const tokens = orig.match(/\S+?\([^)]*\)|\S+/g) || [];
+        specEl.innerHTML = tokens.map(seg => {
+            const m = seg.match(/^([^(]+)(\([^)]*\))?$/);
+            if (!m) return seg;
+            const sero = m[1];
+            const paren = m[2] || '';
+            if (!/^[A-Za-z]/.test(sero)) return seg;
+            let isDSA = false;
+            for (const ag of donorSet) {
+                if (!ag) continue;
+                if (sero === ag || (paren && paren.indexOf(ag) >= 0)) { isDSA = true; break; }
+            }
+            if (isDSA) return '<span style="color:#dc3545;font-weight:bold;">' + seg + '</span>';
+            const seroHtml = '<span style="color:#1E40AF;font-weight:bold;">' + sero + '</span>';
+            if (!paren) return seroHtml;
+            const inner = paren.slice(1, -1);
+            const alleleHtml = inner.split(/\s+/).map(a =>
+                a ? '<span style="color:#374151;">' + a + '</span>' : a
+            ).join(' ');
+            return seroHtml + '(' + alleleHtml + ')';
+        }).join(' ');
+    }
+    function highlightDSA() {
+        const ds = getDonorSet();
+        document.querySelectorAll('.spec-cell').forEach(el => highlightSpecText(el, ds));
+        document.querySelectorAll('.ab-table tbody tr').forEach(tr => {
+            highlightTokensInCell(tr.cells[0], ds);
+            highlightTokensInCell(tr.cells[1], ds);
+        });
+        ['chart1', 'chart2'].forEach(cid => {
+            const fn = window['rebuildDsaChart_' + cid];
+            if (typeof fn === 'function') fn();
+        });
+    }
+    function setDsaFilter(chartId, btn, val) {
+        btn.parentElement.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        const fn = window['updateDsaFilter_' + chartId];
+        if (typeof fn === 'function') fn(val);
+    }
+    function saveDonorHLA(btn) {
+        const obj = {};
+        document.querySelectorAll('.donor-hla').forEach(el => {
+            if (el.value.trim()) obj[el.id] = el.value.trim();
+        });
+        btn.disabled = true;
+        fetch('/save_donor_hla', {
+            method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ chart_no: '{{ patient.chart_no }}', donor_hla: JSON.stringify(obj) })
+        }).then(r => r.json()).then(d => {
+            btn.disabled = false;
+            if (d.ok) { btn.classList.remove('btn-outline-danger'); btn.classList.add('btn-danger'); btn.textContent = '已存檔'; }
+        });
+        highlightDSA();
+    }
+    window.addEventListener('DOMContentLoaded', function() {
+        const saved = {{ donor_hla | default('', true) | tojson }};
+        if (saved) {
+            try {
+                const obj = JSON.parse(saved);
+                Object.keys(obj).forEach(k => {
+                    const el = document.getElementById(k);
+                    if (el) el.value = obj[k];
+                });
+            } catch(e) {}
+        }
+        // After donor inputs are populated, re-apply default (may switch to DSA mode)
+        ['chart1', 'chart2'].forEach(cid => {
+            const fn = window['applyDsaDefault_' + cid];
+            if (typeof fn === 'function') fn();
+        });
+        highlightDSA();
+    });
+    </script>
+    <h5>Reports</h5>
+    <table class="table table-bordered table-sm bg-white mb-4" style="font-size:.9rem;">
+        <thead class="table-light"><tr><th>Date</th><th>Class</th><th>%SA</th><th>Overall</th><th>Specificity</th></tr></thead>
+        <tbody>
+        {% for r in reports %}
+        <tr>
+            <td>{{ r.report_date }}</td>
+            <td>{{ r.dsa_class }}</td>
+            <td class="fw-bold">{{ r.pct_sa }}%</td>
+            <td><span class="badge {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">{{ r.overall }}</span></td>
+            <td class="small" style="max-width:400px;">
+            {%- set spec_text = (r.specificity or '') | replace('&gt;', '>') -%}
+            {%- if 'Weak (MFI' in spec_text -%}
+              {%- set parts = spec_text.split('Weak (MFI', 1) -%}
+              <div class="spec-cell spec-strong-bg">{{ parts[0]|trim }}</div>
+              <div class="spec-cell spec-weak-bg">Weak (MFI{{ parts[1] }}</div>
+            {%- else -%}
+              <div class="spec-cell">{{ spec_text or '(-)' }}</div>
+            {%- endif -%}
+            </td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+    {% for comp_label, comp_id, comp_dates, comp_antigens in [
+        ('DSA Class I', 'chart1', comparison_class1.dates if comparison_class1 else [], comparison_class1.antigens if comparison_class1 else []),
+        ('DSA Class II', 'chart2', comparison_class2.dates if comparison_class2 else [], comparison_class2.antigens if comparison_class2 else [])
+    ] %}
+    {% if comp_dates and comp_dates | length >= 2 %}
+    <h5>{{ comp_label }} &mdash; MFI Trend</h5>
+    <div class="mb-2">
+        <small class="text-muted me-2">點圖例可顯示/隱藏抗體</small>
+        <div class="btn-group btn-group-sm" id="filter-{{ comp_id }}">
+            <button type="button" class="btn btn-outline-secondary" onclick="setDsaFilter('{{ comp_id }}',this,'all')">全部</button>
+            <button type="button" class="btn btn-outline-danger" onclick="setDsaFilter('{{ comp_id }}',this,'dsa')">DSA</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setDsaFilter('{{ comp_id }}',this,'10')">Top 10</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setDsaFilter('{{ comp_id }}',this,'20')">Top 20</button>
+        </div>
+    </div>
+    <div class="chart-container"><canvas id="{{ comp_id }}"></canvas></div>
+    <script>
+    (function() {
+        const dates = {{ comp_dates | tojson }};
+        const allData = [
+        {% for ag in comp_antigens %}
+            { antigen: '{{ ag.antigen }}', allele: '{{ ag.allele }}',
+              values: [{% for d in comp_dates %}{{ ag.mfi_by_date.get(d, {}).get('max_mfi', 'null') }}{% if not loop.last %},{% endif %}{% endfor %}] },
+        {% endfor %}
+        ];
+        function getColor(ag, i) {
+            const a = ['#e53935','#d81b60','#8e24aa','#5e35b1','#3949ab','#1e88e5','#ef5350','#ec407a'];
+            const b = ['#00897b','#43a047','#7cb342','#c0ca33','#26a69a','#66bb6a','#9ccc65','#d4e157'];
+            const c = ['#ff8f00','#ff6f00','#f57f17','#ffb300','#ffa000'];
+            if (ag.startsWith('A') || ag.startsWith('DR')) return a[i % a.length];
+            if (ag.startsWith('B') || ag.startsWith('DQ')) return b[i % b.length];
+            return c[i % c.length];
+        }
+        allData.sort((x, y) => Math.max(...y.values.filter(v=>v!==null)) - Math.max(...x.values.filter(v=>v!==null)));
+        let chartInstance = null;
+        let currentFilter = '20';
+        function matchesDonor(ag, ds) {
+            if (ag.antigen && ds.has(ag.antigen)) return true;
+            if (ag.allele && ds.has(ag.allele)) return true;
+            return false;
+        }
+        function buildChart(limit) {
+            if (limit) currentFilter = limit;
+            let data;
+            if (currentFilter === 'dsa') {
+                const ds = (typeof getDonorSet === 'function') ? getDonorSet() : new Set();
+                data = allData.filter(ag => matchesDonor(ag, ds));
+            } else if (currentFilter === 'all') {
+                data = allData;
+            } else {
+                data = allData.slice(0, parseInt(currentFilter));
+            }
+            const datasets = data.map((ag, i) => ({
+                label: ag.antigen + (ag.allele && ag.allele !== ag.antigen ? ' (' + ag.allele + ')' : ''),
+                data: ag.values, borderColor: getColor(ag.antigen, i),
+                backgroundColor: getColor(ag.antigen, i) + '33',
+                borderWidth: 2, pointRadius: 4, pointHoverRadius: 6, tension: 0.3, spanGaps: true,
+            }));
+            if (chartInstance) chartInstance.destroy();
+            chartInstance = new Chart(document.getElementById('{{ comp_id }}'), {
+                type: 'line', data: { labels: dates, datasets: datasets },
+                options: { responsive: true, maintainAspectRatio: false,
+                    interaction: { mode: 'nearest', intersect: false },
+                    plugins: { legend: { position: 'right', labels: { font: { size: 11 }, boxWidth: 12, padding: 6 } } },
+                    scales: { y: { title: { display: true, text: 'Max MFI' }, beginAtZero: true },
+                              x: { title: { display: true, text: 'Report Date' } } } }
+            });
+        }
+        window['rebuildDsaChart_{{ comp_id }}'] = function() { buildChart(); };
+        window['updateDsaFilter_{{ comp_id }}'] = function(val) { buildChart(val); };
+        function applyDefault() {
+            let defaultFilter = '20';
+            try {
+                const ds = (typeof getDonorSet === 'function') ? getDonorSet() : new Set();
+                if (ds.size > 0 && allData.some(ag => matchesDonor(ag, ds))) defaultFilter = 'dsa';
+            } catch (e) {}
+            buildChart(defaultFilter);
+            document.querySelectorAll('#filter-{{ comp_id }} .btn').forEach(b => {
+                b.classList.remove('active');
+                if ((defaultFilter === 'dsa' && b.textContent === 'DSA') ||
+                    (defaultFilter === '20' && b.textContent === 'Top 20'))
+                    b.classList.add('active');
+            });
+        }
+        window['applyDsaDefault_{{ comp_id }}'] = applyDefault;
+        applyDefault();
+    })();
+    </script>
+    {% endif %}
+    {% endfor %}
+    <h5>Antibody Strength</h5>
+    {% for r in reports %}
+    {% if r.antibodies %}
+    <div class="card mb-3">
+        <div class="card-header"><strong>{{ r.dsa_class }}</strong> &mdash; {{ r.report_date }}
+            <span class="fw-bold ms-1">%SA {{ r.pct_sa }}%</span></div>
+        <div class="card-body p-2">
+            <table class="table table-sm table-bordered ab-table mb-0">
+                <thead class="table-light"><tr>
+                    <th>Antigen</th><th>Allele</th><th>Strength</th><th class="text-end">Max MFI</th>
+                    <th class="text-end">Mean MFI</th><th class="text-center">No of Beads</th><th>Bead IDs</th>
+                </tr></thead>
+                <tbody>
+                {% for a in r.antibodies %}
+                <tr class="{% if a.strength == 'Strong' %}strength-strong{% elif a.strength == 'Weak' %}strength-weak{% endif %}">
+                    <td class="fw-bold">{{ a.antigen }}</td><td class="small">{{ a.allele }}</td>
+                    <td>{{ a.strength or '' }}</td>
+                    <td class="text-end">{{ a.max_mfi|int }}</td>
+                    <td class="text-end">{{ a.mean_mfi|int }}</td>
+                    <td class="text-center">{{ a.no_of_beads }}</td>
+                    <td class="small text-muted">{{ a.bead_ids }}</td>
+                </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% endif %}
+    {% endfor %}
+    {% else %}
+    <div class="alert alert-info">請先選擇病人。</div>
+    {% endif %}
+</div>
+</body>
+</html>

templates//dsa_batch.html ADDED Viewed

	@@ -0,0 +1,179 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>DSA 批次新增資料</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<style>
+body { background: #f5f7fa; }
+.drop-zone { border: 2px dashed #adb5bd; border-radius: 12px; padding: 2rem; text-align: center; cursor: pointer; background: #fff; }
+.drop-zone:hover, .drop-zone.dragover { border-color: #0d6efd; background: #e8f0fe; }
+table.preview td, table.preview th { font-size: .88rem; }
+.status-ok { color: #198754; font-weight: bold; }
+.status-err { color: #dc3545; font-weight: bold; }
+.status-dup { color: #fd7e14; font-weight: bold; }
+</style>
+</head>
+<body>
+<div class="container py-4" style="max-width: 1100px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <h2 class="mb-0">DSA 批次新增資料</h2>
+        <div>
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/dsa/history" class="btn btn-outline-secondary btn-sm me-1">歷史紀錄</a>
+            <a href="/dsa/new" class="btn btn-outline-primary btn-sm">單筆新增</a>
+        </div>
+    </div>
+    <div class="alert alert-info">
+        <strong>檔名格式</strong>：必須包含<strong>病歷號</strong>與<strong>姓名</strong>，用底線 <code>_</code> 或空格分隔。<br>
+        範例：<code>15713765 黃小明 LS1.xls</code>、<code>40091041_王小明_LS2_20240605.xls</code>。<br>
+        系統會自動抓取，日期與 LS1 / LS2 / SA 之類描述會被忽略。
+    </div>
+    <div class="card mb-3">
+        <div class="card-body">
+            <div class="drop-zone" id="dropZone" onclick="document.getElementById('fileInput').click()">
+                <div style="font-size:2rem;">&#128193;</div>
+                <div class="fw-bold">點擊或拖曳選取多個 XLS 檔</div>
+                <input type="file" id="fileInput" multiple accept=".xls,.xlsx" style="display:none" onchange="onPick(this)">
+            </div>
+        </div>
+    </div>
+    <div id="previewWrap" style="display:none;">
+        <h5>預覽 <span class="text-muted small">（可手動修正病歷號 / 姓名）</span></h5>
+        <table class="table table-bordered table-sm bg-white preview">
+            <thead class="table-light">
+                <tr><th>檔名</th><th style="width:140px;">病歷號</th><th style="width:140px;">姓名</th><th style="width:100px;">狀態</th><th style="width:72px;"></th></tr>
+            </thead>
+            <tbody id="previewBody"></tbody>
+        </table>
+        <div class="mb-3">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="dupmode" id="mode-overwrite" value="overwrite">
+                <label class="form-check-label" for="mode-overwrite">覆寫</label>
+            </div>
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="dupmode" id="mode-new" value="new" checked>
+                <label class="form-check-label" for="mode-new">可多筆存在</label>
+            </div>
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="dupmode" id="mode-skip" value="skip">
+                <label class="form-check-label" for="mode-skip">跳過</label>
+            </div>
+        </div>
+        <button class="btn btn-primary" id="submitBtn" onclick="submitBatch()">全部上傳</button>
+        <div id="results" class="mt-3"></div>
+    </div>
+</div>
+<script>
+let selectedFiles = [];
+function parseFilename(fname) {
+    const stem = fname.replace(/\.(xls|xlsx)$/i, '');
+    const tokens = stem.split(/[_\-. ]+/).filter(x => x);
+    function isDate(t) {
+        if (!/^\d{8}$/.test(t)) return false;
+        const y = +t.slice(0,4), m = +t.slice(4,6), d = +t.slice(6,8);
+        return y >= 1900 && y <= 2099 && m >= 1 && m <= 12 && d >= 1 && d <= 31;
+    }
+    function isDesc(t) {
+        return /^(PRA\d*|Class\d*|LS\w*|SA\d*|I|II|III)$/i.test(t);
+    }
+    function isChartNo(t) {
+        return /^\d{6,8}$/.test(t) && !isDate(t);
+    }
+    let chart = '', name = '';
+    for (const t of tokens) {
+        if (isDate(t) || isDesc(t)) continue;
+        if (isChartNo(t) && !chart) { chart = t; continue; }
+        if (!/^\d+$/.test(t) && !name) { name = t; }
+    }
+    return { name, chart };
+}
+function onPick(input) {
+    selectedFiles = Array.from(input.files);
+    if (!selectedFiles.length) return;
+    const tbody = document.getElementById('previewBody');
+    tbody.innerHTML = '';
+    selectedFiles.forEach((f, i) => {
+        const p = parseFilename(f.name);
+        const tr = document.createElement('tr');
+        tr.dataset.idx = i;
+        const missing = !p.chart || !p.name;
+        tr.innerHTML = `
+            <td class="small">${f.name}</td>
+            <td><input type="text" class="form-control form-control-sm" data-field="chart" value="${p.chart}"></td>
+            <td><input type="text" class="form-control form-control-sm" data-field="name" value="${p.name}"></td>
+            <td class="${missing ? 'status-err' : 'status-ok'}">${missing ? '缺欄位' : '待上傳'}</td>
+            <td><button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(this)">刪除</button></td>
+        `;
+        tbody.appendChild(tr);
+    });
+    document.getElementById('previewWrap').style.display = 'block';
+}
+function removeRow(btn) {
+    const tr = btn.closest('tr');
+    if (tr) tr.remove();
+    if (!document.querySelectorAll('#previewBody tr').length) {
+        document.getElementById('previewWrap').style.display = 'none';
+    }
+}
+function submitBatch() {
+    const btn = document.getElementById('submitBtn');
+    const mode = document.querySelector('input[name="dupmode"]:checked').value;
+    const rows = document.querySelectorAll('#previewBody tr');
+    btn.disabled = true; btn.textContent = '上傳中...';
+    const results = document.getElementById('results');
+    results.innerHTML = '<div class="text-muted small">處理中...</div>';
+    const fd = new FormData();
+    fd.append('mode', mode);
+    rows.forEach(tr => {
+        const idx = parseInt(tr.dataset.idx);
+        const chart = tr.querySelector('[data-field="chart"]').value.trim();
+        const name = tr.querySelector('[data-field="name"]').value.trim();
+        const f = selectedFiles[idx];
+        fd.append('file', f); fd.append('chart', chart); fd.append('name', name);
+    });
+    fetch('/dsa/batch_upload', { method: 'POST', body: fd })
+    .then(r => r.json())
+    .then(d => {
+        btn.disabled = false; btn.textContent = '全部上傳';
+        let html = '<table class="table table-sm table-bordered"><thead><tr><th>檔名</th><th>結果</th></tr></thead><tbody>';
+        (d.results || []).forEach(r => {
+            let cls = 'status-ok', msg = '成功新增';
+            if (r.status === 'error') { cls = 'status-err'; msg = r.msg || '失敗'; }
+            else if (r.status === 'duplicate') { cls = 'status-dup'; msg = '重複，已複寫'; }
+            else if (r.status === 'skipped') { cls = 'status-dup'; msg = '重複，跳過不新增'; }
+            html += `<tr><td class="small">${r.file}</td><td class="${cls}">${msg}</td></tr>`;
+        });
+        html += '</tbody></table>';
+        html += `<div class="mt-2">成功 ${d.summary.ok}、重複 ${d.summary.dup || 0}、失敗 ${d.summary.err}（共 ${d.summary.total}）</div>`;
+        if (d.summary.ok > 0) html += '<a href="/dsa/history" class="btn btn-sm btn-outline-primary mt-2">查看歷史紀錄</a>';
+        results.innerHTML = html;
+    })
+    .catch(e => {
+        btn.disabled = false; btn.textContent = '全部上傳';
+        results.innerHTML = '<div class="alert alert-danger">上傳失敗：' + e + '</div>';
+    });
+}
+const dz = document.getElementById('dropZone');
+['dragenter', 'dragover'].forEach(ev => dz.addEventListener(ev, e => { e.preventDefault(); dz.classList.add('dragover'); }));
+['dragleave', 'drop'].forEach(ev => dz.addEventListener(ev, e => { e.preventDefault(); dz.classList.remove('dragover'); }));
+dz.addEventListener('drop', e => {
+    const dt = new DataTransfer();
+    Array.from(e.dataTransfer.files).forEach(f => dt.items.add(f));
+    document.getElementById('fileInput').files = dt.files;
+    onPick(document.getElementById('fileInput'));
+});
+</script>
+</body>
+</html>

templates//dsa_history.html ADDED Viewed

	@@ -0,0 +1,110 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>DSA History</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+<div class="container py-4" style="max-width: 1200px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <h2 class="mb-0">DSA 歷史紀錄</h2>
+        <div>
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/dsa/new" class="btn btn-outline-primary btn-sm me-1">新增資料</a>
+            <a href="/dsa/analysis" class="btn btn-outline-secondary btn-sm">統計分析</a>
+        </div>
+    </div>
+    <div class="small text-muted mb-2">目前共 {{ db_stats.patients }} 位病患、{{ db_stats.reports }} 筆 DSA 報告</div>
+    {% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}
+    <form class="row g-2 mb-3" method="get" action="/dsa/history">
+        <div class="col">
+            <input type="text" class="form-control" name="q" placeholder="搜尋姓名或病歷號" value="{{ request.args.get('q','') }}">
+        </div>
+        <div class="col-auto d-flex align-items-center">
+            <span class="me-1 text-muted small">日期範圍</span>
+            <input type="date" class="form-control form-control-sm" name="from" value="{{ request.args.get('from','') }}" style="width:150px;">
+            <span class="mx-1">–</span>
+            <input type="date" class="form-control form-control-sm" name="to" value="{{ request.args.get('to','') }}" style="width:150px;">
+        </div>
+        <div class="col-auto"><button class="btn btn-secondary">搜尋</button></div>
+    </form>
+    <table class="table table-bordered table-hover bg-white" style="font-size:.9rem;">
+        <thead class="table-light">
+            <tr>
+                <th>病患姓名</th><th>病歷號</th><th>報告日期</th><th>Class</th>
+                <th>%SA</th><th>Overall</th><th>Antibodies</th><th>填表人</th><th></th>
+            </tr>
+        </thead>
+        <tbody>
+        {% set q = request.args.get('q','').lower() %}
+        {% set date_from = request.args.get('from','') %}
+        {% set date_to = request.args.get('to','') %}
+        {% for r in reports %}
+        {% set rd = r.report_date | replace('/','-') %}
+        {% if (not q or q in r.chart_no.lower() or q in r.patient_name.lower())
+           and (not date_from or rd >= date_from)
+           and (not date_to or rd <= date_to) %}
+        <tr>
+            <td>{{ r.patient_name }}</td>
+            <td>{{ r.chart_no }}</td>
+            <td>{{ r.report_date }}</td>
+            <td>{{ r.dsa_class }}</td>
+            <td class="fw-bold">{{ r.pct_sa }}%</td>
+            <td><span class="badge {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">{{ r.overall }}</span></td>
+            <td class="small spec-cell" style="max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"
+                title="{{ r.specificity or '' }}">
+                {{ r.specificity if r.specificity and r.specificity != '(-)' else '(-)' }}
+            </td>
+            <td class="small">{{ r.submitted_by or '' }}</td>
+            <td class="text-nowrap">
+                <a href="/dsa/history/{{ r.chart_no }}" class="btn btn-sm btn-outline-primary me-1">View</a>
+                <a href="/dsa/analysis?chart_no={{ r.chart_no }}" class="btn btn-sm btn-outline-success me-1">Analyze</a>
+                <button class="btn btn-sm btn-outline-danger" onclick="deleteDsaReport({{ r.id }}, this)">Del</button>
+            </td>
+        </tr>
+        {% endif %}
+        {% endfor %}
+        </tbody>
+    </table>
+    {% if not reports %}<div class="text-center text-muted py-5">尚無紀錄</div>{% endif %}
+</div>
+<script>
+window.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.spec-cell').forEach(td => {
+        const orig = td.textContent.trim();
+        if (!orig || orig === '(-)') return;
+        const tokens = orig.match(/\S+?\([^)]*\)|\S+/g) || [];
+        td.innerHTML = tokens.map(seg => {
+            const m = seg.match(/^([^(]+)(\([^)]*\))?$/);
+            if (!m) return seg;
+            const sero = m[1];
+            const paren = m[2] || '';
+            const seroHtml = '<span style="color:#1E40AF;font-weight:bold;">' + sero + '</span>';
+            if (!paren) return seroHtml;
+            const inner = paren.slice(1, -1);
+            const alleleHtml = inner.split(/\s+/).map(a =>
+                a ? '<span style="color:#374151;">' + a + '</span>' : a
+            ).join(' ');
+            return seroHtml + '(' + alleleHtml + ')';
+        }).join(' ');
+    });
+});
+function deleteDsaReport(id, btn) {
+    if (!confirm('確定刪除此筆 DSA 報告？')) return;
+    fetch('/dsa/delete_report/' + id, { method: 'POST' })
+    .then(r => r.json())
+    .then(d => {
+        if (d.ok) location.reload();
+        else alert('刪除失敗: ' + (d.error || ''));
+    });
+}
+</script>
+</body>
+</html>

templates//dsa_index.html ADDED Viewed

	@@ -0,0 +1,620 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>DSA Analysis</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<style>
+body { background: #f5f7fa; }
+.upload-zone {
+    border: 2px dashed #adb5bd; border-radius: 12px; padding: 2.5rem;
+    text-align: center; cursor: pointer; transition: all .2s; background: #fff;
+}
+.upload-zone:hover, .upload-zone.dragover { border-color: #0d6efd; background: #e8f0fe; }
+.pra-panel { min-height: 200px; }
+.report-card {
+    background: #fff; border: 1px solid #dee2e6; border-radius: 6px;
+    padding: 1.2rem 1.5rem; margin-bottom: 1rem;
+    font-family: 'Calibri','Segoe UI',sans-serif; font-size: .95rem; line-height: 1.7;
+}
+.report-card .report-title { font-weight: bold; font-size: 1.05rem; }
+.report-spec-edit {
+    border: 1px dashed #adb5bd; border-radius: 4px; padding: .3rem .5rem;
+    min-height: 1.8rem; outline: none; width: 100%; font-family: inherit; font-size: inherit;
+}
+.report-spec-edit:focus { border-color: #0d6efd; background: #f8f9ff; }
+.panel-title { font-size: 1.1rem; font-weight: bold; padding: .5rem; border-radius: 4px; text-align: center; margin-bottom: .8rem; }
+.panel-title-dsa1 { background: #dbeafe; color: #1e40af; }
+.panel-title-dsa2 { background: #fef3c7; color: #92400e; }
+.empty-panel { color: #adb5bd; text-align: center; padding: 3rem 1rem; font-style: italic; }
+table.mfi-table { font-size: .82rem; }
+table.mfi-table th { position: sticky; top: 0; background: #fff; z-index: 1; }
+.mfi-scroll { max-height: 350px; overflow-y: auto; }
+table.bead-table { font-size: .82rem; }
+.bead-scroll { max-height: 350px; overflow-y: auto; }
+.strength-strong { --bs-table-bg: #f8d7da; background-color: #f8d7da !important; font-weight: bold; }
+.strength-strong > td { background-color: #f8d7da !important; }
+.strength-weak { --bs-table-bg: #fff9c4; background-color: #fff9c4 !important; }
+.strength-weak > td { background-color: #fff9c4 !important; }
+.badge-pos { background: #dc3545; }
+.badge-neg { background: #198754; }
+@media print {
+    .no-print { display: none !important; }
+    .report-card { border: none; padding: .5rem 0; }
+    .report-spec-edit { border: none; padding: 0; }
+}
+#choice-modal-backdrop {
+    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
+    z-index: 1060; align-items: center; justify-content: center;
+}
+#choice-modal-backdrop.show { display: flex; }
+#choice-modal {
+    background: #fff; border-radius: 8px; padding: 1.25rem 1.5rem;
+    min-width: 320px; max-width: 480px; box-shadow: 0 10px 40px rgba(0,0,0,.2);
+}
+#choice-modal .cm-message { white-space: pre-wrap; margin-bottom: 1rem; font-size: .95rem; }
+#choice-modal .cm-input {
+    width: 100%; padding: .5rem; font-size: 1.2rem; text-align: center;
+    border: 1px solid #ced4da; border-radius: 4px;
+}
+#choice-modal .cm-input:focus { border-color: #0d6efd; outline: none; }
+#choice-modal .cm-btns { text-align: right; margin-top: 1rem; }
+#choice-modal .cm-btns button { margin-left: .5rem; }
+</style>
+</head>
+<body>
+<div id="choice-modal-backdrop">
+    <div id="choice-modal" role="dialog" aria-modal="true">
+        <div class="cm-message" id="cm-message"></div>
+        <input type="text" class="cm-input" id="cm-input"
+               inputmode="numeric" pattern="[1-3]" maxlength="1" autocomplete="off">
+        <div class="cm-btns">
+            <button type="button" class="btn btn-secondary btn-sm" id="cm-cancel">取消</button>
+            <button type="button" class="btn btn-primary btn-sm" id="cm-ok">確定</button>
+        </div>
+    </div>
+</div>
+<script>
+window.askChoice = function(message) {
+    return new Promise(resolve => {
+        const bd = document.getElementById('choice-modal-backdrop');
+        const input = document.getElementById('cm-input');
+        const ok = document.getElementById('cm-ok');
+        const cancel = document.getElementById('cm-cancel');
+        document.getElementById('cm-message').textContent = message;
+        input.value = '';
+        bd.classList.add('show');
+        setTimeout(() => input.focus(), 50);
+        const onInput = () => {
+            const v = input.value.replace(/[^1-3]/g, '').slice(0, 1);
+            if (input.value !== v) input.value = v;
+        };
+        const onKey = (e) => {
+            if (e.key === 'Enter') { e.preventDefault(); submit(); }
+            else if (e.key === 'Escape') { e.preventDefault(); cleanup(null); }
+        };
+        const submit = () => {
+            const v = input.value;
+            if (v === '1' || v === '2' || v === '3') cleanup(v);
+            else { input.focus(); input.style.borderColor = '#dc3545';
+                   setTimeout(() => input.style.borderColor = '', 800); }
+        };
+        const cleanup = (result) => {
+            bd.classList.remove('show');
+            input.removeEventListener('input', onInput);
+            input.removeEventListener('keydown', onKey);
+            ok.removeEventListener('click', submit);
+            cancel.removeEventListener('click', onCancel);
+            resolve(result);
+        };
+        const onCancel = () => cleanup(null);
+        input.addEventListener('input', onInput);
+        input.addEventListener('keydown', onKey);
+        ok.addEventListener('click', submit);
+        cancel.addEventListener('click', onCancel);
+    });
+};
+</script>
+<div class="container-fluid py-3" style="max-width: 1400px;">
+    <div class="d-flex justify-content-between align-items-center mb-1">
+        <h2 class="mb-0">DSA Analysis</h2>
+        <div class="no-print">
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/dsa/history" class="btn btn-outline-secondary btn-sm me-1">歷史紀錄</a>
+            <a href="/dsa/analysis" class="btn btn-outline-secondary btn-sm me-1">統計分析</a>
+            <a href="/dsa/batch_upload" class="btn btn-success btn-sm">批次新增資料</a>
+        </div>
+    </div>
+    <p class="text-muted mb-3">LABScreen Single Antigen Class I / II — Strong (MFI&gt;4000) / Weak (1000–3999)</p>
+    {% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}
+    {% if errors %}
+    <div class="alert alert-warning no-print">
+        {% for e in errors %}<div class="small">{{ e }}</div>{% endfor %}
+    </div>
+    {% endif %}
+    <form id="uploadForm" action="/dsa/analyze" method="post" enctype="multipart/form-data" class="mb-3 no-print">
+        <div class="row g-2 mb-2">
+            <div class="col-sm-5">
+                <input type="text" class="form-control" name="patient_name" id="patientName"
+                       placeholder="病患姓名（必填）" value="{{ patient_name or '' }}" required>
+            </div>
+            <div class="col-sm-4">
+                <input type="text" class="form-control" name="patient_id" id="patientId"
+                       placeholder="病歷號（必填）" value="{{ patient_id or '' }}" required>
+            </div>
+            <div class="col-sm-3">
+                <button type="button" class="btn btn-primary w-100" id="analyzeBtn" disabled
+                        onclick="submitWithDelay()">Analyze</button>
+            </div>
+        </div>
+        <div class="upload-zone" id="dropZone" onclick="document.getElementById('fileInput').click()">
+            <input type="file" name="file" id="fileInput" accept=".xls,.xlsx" multiple
+                   style="display:none" onchange="onFileSelected(this)">
+            <div id="dropIcon" style="font-size:1.8rem;">&#128196;</div>
+            <div class="mt-1 fw-bold">XLS</div>
+            <div class="text-muted small">可拖拉或選取 LABScreen Single Antigen LS1A* / LS2A* 檔案</div>
+            <div id="fileList" class="mt-2 small text-primary" style="display:none;"></div>
+            <div id="uploadingMsg" class="mt-2 text-muted" style="display:none;">
+                <div class="spinner-border spinner-border-sm me-1"></div> Analyzing...
+            </div>
+        </div>
+    </form>
+    {% if result_dsa1 or result_dsa2 %}
+    <div class="no-print mb-3">
+        <div class="card">
+            <div class="card-header fw-bold">Donor HLA</div>
+            <div class="card-body" style="font-size:.85rem;">
+                <style>.donor-hla { width: 65px !important; padding: 2px 4px !important; text-align: center; }</style>
+                <div class="row">
+                    <div class="col-md-5">
+                        <div class="fw-bold mb-1">Serology</div>
+                        <table class="table table-sm table-bordered mb-1">
+                            <tbody>
+                            <tr><td class="fw-bold">A</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-2"></td>
+                                <td class="fw-bold">DR</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-2"></td></tr>
+                            <tr><td class="fw-bold">B</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-2"></td>
+                                <td class="fw-bold">DQ</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-2"></td></tr>
+                            <tr><td class="fw-bold">Cw</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-2"></td>
+                                <td class="fw-bold">DP</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-2"></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="col-md-7">
+                        <div class="fw-bold mb-1">DNA Typing</div>
+                        <table class="table table-sm table-bordered mb-1">
+                            <tbody>
+                            <tr><td class="fw-bold">A*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-2"></td>
+                                <td class="fw-bold">DRB1*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-2"></td></tr>
+                            <tr><td class="fw-bold">B*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-2"></td>
+                                <td class="fw-bold">DQB1*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-2"></td></tr>
+                            <tr><td class="fw-bold">C*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-2"></td>
+                                <td class="fw-bold">DQA1*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-2"></td></tr>
+                            <tr><td></td><td></td><td></td>
+                                <td class="fw-bold">DPB1*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-2"></td></tr>
+                            <tr><td></td><td></td><td></td>
+                                <td class="fw-bold">DPA1*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-2"></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="text-end">
+                    <button class="btn btn-sm btn-outline-danger" onclick="dsaCheck()">存檔</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+    {% if result_dsa1 or result_dsa2 %}
+    {% if patient_name or patient_id %}
+    <div class="text-center mb-3">
+        <h4 class="mb-0">{{ patient_name }}{% if patient_id %} <span class="text-muted small">({{ patient_id }})</span>{% endif %}</h4>
+    </div>
+    {% endif %}
+    <div class="row">
+        {% for side in [('dsa1', result_dsa1, 'DSA Class I', 'p1_'), ('dsa2', result_dsa2, 'DSA Class II', 'p2_')] %}
+        <div class="col-md-6 pra-panel">
+            <div class="panel-title panel-title-{{ side[0] }}">{{ side[2] }}</div>
+            {% set result = side[1] %}
+            {% set prefix = side[3] %}
+            {% set class_label = side[2] %}
+            {% if result %}
+                {% for pt in result.patients %}
+                {% set pt_idx = prefix ~ loop.index %}
+                <div class="report-card">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div class="report-title" style="display:none;">{{ pt.name }}</div>
+                        <div class="no-print">
+                            <button class="btn btn-sm btn-outline-secondary me-1" onclick="copyReport('rc-{{ pt_idx }}')">Copy</button>
+                            <button class="btn btn-sm btn-outline-primary" onclick="toggleEditNew('{{ pt_idx }}', this)">Edit</button>
+                        </div>
+                    </div>
+                    <div id="rc-{{ pt_idx }}">
+<div>{{ class_label }}</div>
+<div>Overall: {{ pt.overall }}</div>
+<div>%SA (or %PRA): {{ pt.pra }}</div>
+<div>Specificity:</div>
+<div class="report-spec-edit" id="spec-{{ pt_idx }}" style="border:1px solid transparent;">{{ pt.specificity|safe }}</div>
+<div>COMMENT:</div>
+<div class="report-spec-edit" id="comment-{{ pt_idx }}" style="border:1px solid transparent; min-height:1.5rem; white-space:pre-line;">{{ pt.comment or '' }}</div>
+                    </div>
+                </div>
+                {% if pt.sero_mfi %}
+                <div class="mb-3 no-print">
+                    <div class="small fw-bold mb-1">Antibody Strength</div>
+                    <div class="mfi-scroll">
+                    <table class="table table-sm table-bordered mfi-table mb-0">
+                        <thead class="table-light"><tr>
+                            <th>Antigen</th><th>Allele</th><th>Strength</th><th class="text-end">Max MFI</th>
+                            <th class="text-end">Mean MFI</th><th class="text-center">No of Beads</th><th>Bead IDs</th>
+                        </tr></thead>
+                        <tbody>
+                        {% for m in pt.sero_mfi %}
+                        <tr class="{% if m.strength == 'Strong' %}strength-strong{% elif m.strength == 'Weak' %}strength-weak{% endif %}">
+                            <td style="color:#1E40AF;font-weight:bold;">{{ m.sero }}</td>
+                            <td class="small" style="color:#374151;">{{ m.alleles }}</td>
+                            <td>{{ m.strength }}</td>
+                            <td class="text-end">{{ m.max_mfi|int }}</td>
+                            <td class="text-end">{{ m.mean_mfi|int }}</td>
+                            <td class="text-center">{{ m.count }}</td><td class="small text-muted">{{ m.beads }}</td>
+                        </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                    </div>
+                </div>
+                {% endif %}
+                <div class="no-print">
+                <div class="fw-bold small mb-1">Bead Details ({{ pt.beads|length }})</div>
+                <div class="mb-3">
+                    {% if pt.qc %}
+                    <div class="mb-2 p-2 border rounded bg-light small">
+                        <strong>Quality Control</strong>
+                        <table class="table table-sm table-bordered mb-0 mt-1" style="width:auto; font-size:.82rem;">
+                            <thead class="table-secondary"><tr><th>Item</th><th>Value</th><th>Normal</th><th>Status</th></tr></thead>
+                            <tbody>
+                            <tr{% if pt.qc.nc_raw > 500 %} class="table-danger"{% endif %}>
+                                <td>NC Raw (Bead 001)</td><td>{{ pt.qc.nc_raw }}</td><td>≤500</td>
+                                <td>{% if pt.qc.nc_raw > 1500 %}<span class="text-danger fw-bold">Uninterpretable due to high background bindings, please repeat</span>{% elif pt.qc.nc_raw > 500 %}<span class="text-warning fw-bold">High background bindings</span>{% endif %}</td>
+                            </tr>
+                            <tr{% if pt.qc.pc_raw <= 500 %} class="table-danger"{% endif %}>
+                                <td>PC Raw (Bead 002)</td><td>{{ pt.qc.pc_raw }}</td><td>&gt;500</td>
+                                <td>{% if pt.qc.pc_raw <= 500 %}<span class="text-danger fw-bold">Low PC signal, please repeat</span>{% endif %}</td>
+                            </tr>
+                            <tr{% if pt.qc.pc_nc_ratio < 2 %} class="table-danger"{% endif %}>
+                                <td>PC/NC Ratio</td><td>{{ pt.qc.pc_nc_ratio }}</td><td>≥2</td>
+                                <td>{% if pt.qc.pc_nc_ratio < 2 %}<span class="text-danger fw-bold">Uninterpretable, please repeat</span>{% endif %}</td>
+                            </tr>
+                            <tr{% if pt.qc.low_beads %} class="table-warning"{% endif %}>
+                                <td>Bead Count</td>
+                                <td>{% if pt.qc.low_beads %}{{ pt.qc.low_beads|length }} beads &lt;80{% else %}All ≥80{% endif %}</td>
+                                <td>≥80</td>
+                                <td>{% if pt.qc.low_beads %}<span class="text-danger fw-bold">Low HLA Beads count, please repeat</span>{% endif %}</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    {% endif %}
+                    <div class="bead-scroll">
+                    <table class="table table-sm table-bordered bead-table mb-0">
+                        <thead><tr><th>Bead</th><th>Normal</th><th>Strength</th><th>Raw</th><th>Ratio</th><th>Count</th><th>Specificity</th><th>Molecular</th></tr></thead>
+                        <tbody>
+                        {% for b in pt.beads %}
+                        <tr class="{% if b.strength == 'Strong' %}strength-strong{% elif b.strength == 'Weak' %}strength-weak{% endif %}" data-sero="{{ b.sero }}" data-allele="{{ b.allele }}">
+                            <td>{{ b.bead }}</td><td>{{ b.normal }}</td><td>{{ b.strength }}</td>
+                            <td>{{ b.raw }}</td><td>{{ b.ratio }}</td><td>{{ b.count }}</td>
+                            <td class="small" style="color:#1E40AF;font-weight:bold;">{{ b.sero }}</td>
+                            <td class="small" style="color:#374151;">{{ b.allele }}</td>
+                        </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                    </div>
+                </div>
+                </div>
+                {% endfor %}
+            {% else %}
+                <div class="empty-panel">No {{ side[2] }} data</div>
+            {% endif %}
+        </div>
+        {% endfor %}
+    </div>
+    <div class="text-center my-3 no-print">
+        <button class="btn btn-outline-secondary me-2" onclick="saveToDb()" id="saveBtn">暫存</button>
+        <button class="btn btn-success" onclick="submitReport()" id="submitBtn">送出表單</button>
+        <div id="saveStatus" class="small text-muted mt-1"></div>
+    </div>
+    {% endif %}
+</div>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+function _loadDonorObj(obj) {
+    document.querySelectorAll('.donor-hla').forEach(el => el.value = '');
+    const firstKey = Object.keys(obj)[0] || '';
+    if (firstKey.startsWith('donor-')) {
+        Object.keys(obj).forEach(k => {
+            const el = document.getElementById(k);
+            if (el) el.value = obj[k];
+        });
+    } else {
+        const seroMap = {'A':['donor-A-1','donor-A-2'],'B':['donor-B-1','donor-B-2'],
+                         'Cw':['donor-Cw-1','donor-Cw-2'],'DR':['donor-DR-1','donor-DR-2'],
+                         'DQ':['donor-DQ-1','donor-DQ-2'],'DP':['donor-DP-1','donor-DP-2']};
+        const dnaMap = {'A*':['donor-dna-A-1','donor-dna-A-2'],'B*':['donor-dna-B-1','donor-dna-B-2'],
+                        'C*':['donor-dna-C-1','donor-dna-C-2'],'DRB1*':['donor-dna-DRB1-1','donor-dna-DRB1-2'],
+                        'DQB1*':['donor-dna-DQB1-1','donor-dna-DQB1-2'],'DQA1*':['donor-dna-DQA1-1','donor-dna-DQA1-2'],
+                        'DPB1*':['donor-dna-DPB1-1','donor-dna-DPB1-2'],'DPA1*':['donor-dna-DPA1-1','donor-dna-DPA1-2']};
+        Object.keys(obj).forEach(k => {
+            const vals = String(obj[k]).split(',').map(v => v.trim());
+            const ids = seroMap[k] || dnaMap[k];
+            if (ids) vals.forEach((v, i) => { if (ids[i] && v) document.getElementById(ids[i]).value = v; });
+        });
+    }
+}
+window.addEventListener('DOMContentLoaded', function() {
+    const saved = {{ donor_hla | default("", true) | tojson }};
+    if (saved) {
+        try { _loadDonorObj(JSON.parse(saved)); setTimeout(dsaCheck, 300); } catch(e) {}
+    }
+});
+let collectedFiles = [];
+function updateFileList() {
+    const fl = document.getElementById('fileList');
+    if (collectedFiles.length === 0) {
+        fl.style.display = 'none';
+        document.getElementById('dropIcon').style.display = '';
+        document.getElementById('analyzeBtn').disabled = true;
+        return;
+    }
+    fl.innerHTML = collectedFiles.map((f,i) =>
+        '<span>&#128196; ' + f.name +
+        ' <a href="#" style="color:#dc3545;text-decoration:none;" onclick="removeFile('+i+');return false;">&times;</a></span>'
+    ).join('<br>');
+    fl.style.display = 'block';
+    document.getElementById('dropIcon').style.display = 'none';
+    document.getElementById('analyzeBtn').disabled = false;
+}
+function addFiles(fileList) {
+    for (const f of fileList) {
+        if (!collectedFiles.some(x => x.name === f.name && x.size === f.size)) collectedFiles.push(f);
+    }
+    updateFileList();
+}
+function removeFile(idx) { collectedFiles.splice(idx, 1); updateFileList(); }
+function submitWithDelay() {
+    if (collectedFiles.length === 0) return;
+    const dt = new DataTransfer();
+    collectedFiles.forEach(f => dt.items.add(f));
+    document.getElementById('fileInput').files = dt.files;
+    document.getElementById('uploadingMsg').style.display = 'block';
+    document.getElementById('analyzeBtn').disabled = true;
+    setTimeout(() => document.getElementById('uploadForm').submit(), 100);
+}
+function onFileSelected(input) {
+    if (input.files.length > 0) addFiles(input.files);
+    input.value = '';
+}
+const dz = document.getElementById('dropZone');
+if (dz) {
+    ['dragenter','dragover'].forEach(e => dz.addEventListener(e, ev => { ev.preventDefault(); dz.classList.add('dragover'); }));
+    ['dragleave','drop'].forEach(e => dz.addEventListener(e, ev => { ev.preventDefault(); dz.classList.remove('dragover'); }));
+    dz.addEventListener('drop', ev => addFiles(ev.dataTransfer.files));
+}
+function dsaCheck() {
+    const chartNo = document.getElementById('patientId') ? document.getElementById('patientId').value.trim() : '';
+    if (chartNo) {
+        const obj = {};
+        document.querySelectorAll('.donor-hla').forEach(el => {
+            if (el.value.trim()) obj[el.id] = el.value.trim();
+        });
+        fetch('/save_donor_hla', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ chart_no: chartNo, donor_hla: JSON.stringify(obj) })
+        });
+    }
+    const donorSet = new Set();
+    ['A','B','Cw','DR','DQ','DP'].forEach(locus => {
+        [1,2].forEach(n => {
+            const el = document.getElementById('donor-' + locus + '-' + n);
+            if (el && el.value.trim()) donorSet.add(locus + el.value.trim());
+        });
+    });
+    ['A','B','C','DRB1','DQB1','DQA1','DPB1','DPA1'].forEach(locus => {
+        [1,2].forEach(n => {
+            const el = document.getElementById('donor-dna-' + locus + '-' + n);
+            if (el && el.value.trim()) donorSet.add(locus + '*' + el.value.trim());
+        });
+    });
+    if (donorSet.size === 0) return;
+    document.querySelectorAll('[id^="spec-"]').forEach(specEl => {
+        specEl.querySelectorAll('span').forEach(span => {
+            const txt = span.textContent;
+            for (const ag of donorSet) {
+                if (txt.includes(ag)) { span.style.color = '#dc3545'; span.style.fontWeight = 'bold'; break; }
+            }
+        });
+        specEl.childNodes.forEach(node => {
+            if (node.nodeType === 3) {
+                const txt = node.textContent;
+                for (const ag of donorSet) {
+                    if (txt.includes(ag)) {
+                        const span = document.createElement('span');
+                        span.style.color = '#dc3545';
+                        span.style.fontWeight = 'bold';
+                        span.textContent = txt;
+                        node.replaceWith(span);
+                        break;
+                    }
+                }
+            }
+        });
+    });
+    function highlightTokens(cell) {
+        if (!cell) return;
+        const text = cell.textContent;
+        const tokens = text.split(/,\s*/);
+        const parts = tokens.map(tok => {
+            const t = tok.trim();
+            if (!t) return tok;
+            for (const ag of donorSet) {
+                if (t.includes(ag)) return '<span style="color:#dc3545;font-weight:bold;">' + tok + '</span>';
+            }
+            return tok;
+        });
+        cell.innerHTML = parts.join(', ');
+    }
+    document.querySelectorAll('.mfi-table tbody tr').forEach(tr => highlightTokens(tr.cells[1]));
+    document.querySelectorAll('.bead-table tbody tr').forEach(tr => highlightTokens(tr.cells[8]));
+    const btn = document.querySelector('[onclick="dsaCheck()"]');
+    if (btn) { btn.classList.remove('btn-outline-danger'); btn.classList.add('btn-danger'); btn.textContent = '已存檔'; }
+}
+function toggleEditNew(idx, btn) {
+    const specEl = document.getElementById('spec-' + idx);
+    const commentEl = document.getElementById('comment-' + idx);
+    if (btn.textContent === 'Edit') {
+        specEl.contentEditable = 'true'; commentEl.contentEditable = 'true';
+        specEl.style.border = '1px dashed #0d6efd'; specEl.style.background = '#f8f9ff';
+        commentEl.style.border = '1px dashed #0d6efd'; commentEl.style.background = '#f8f9ff';
+        btn.textContent = 'Save'; btn.className = 'btn btn-sm btn-success'; specEl.focus();
+    } else {
+        specEl.contentEditable = 'false'; commentEl.contentEditable = 'false';
+        specEl.style.border = '1px solid transparent'; specEl.style.background = '';
+        commentEl.style.border = '1px solid transparent'; commentEl.style.background = '';
+        btn.textContent = 'Edit'; btn.className = 'btn btn-sm btn-outline-primary';
+    }
+}
+function copyReport(id) {
+    const el = document.getElementById(id);
+    const range = document.createRange(); range.selectNodeContents(el);
+    const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range);
+    document.execCommand('copy'); sel.removeAllRanges();
+    const btn = el.parentElement.querySelector('button');
+    const orig = btn.textContent; btn.textContent = 'Copied!';
+    btn.classList.replace('btn-outline-secondary','btn-success');
+    setTimeout(() => { btn.textContent = orig; btn.classList.replace('btn-success','btn-outline-secondary'); }, 1500);
+}
+function saveToDb(isSubmit) {
+    const name = document.getElementById('patientName').value.trim();
+    const chartNo = document.getElementById('patientId').value.trim();
+    if (!name) { alert('請輸入病患姓名'); return; }
+    if (!chartNo) { alert('請輸入病歷號'); return; }
+    const reports = [];
+    {% if result_dsa1 %}
+    {% for pt in result_dsa1.patients %}
+    reports.push({
+        report_date: '{{ result_dsa1.date }}',
+        dsa_class: 'DSA Class I',
+        pct_sa: {{ pt.pra }},
+        overall: '{{ pt.overall }}',
+        specificity: document.getElementById('spec-p1_{{ loop.index }}').innerText.trim(),
+        comment: document.getElementById('comment-p1_{{ loop.index }}').innerText.trim(),
+        sero_mfi: {{ pt.sero_mfi | tojson }},
+        upload_file: '{{ pt._upload_file | default("", true) }}'
+    });
+    {% endfor %}
+    {% endif %}
+    {% if result_dsa2 %}
+    {% for pt in result_dsa2.patients %}
+    reports.push({
+        report_date: '{{ result_dsa2.date }}',
+        dsa_class: 'DSA Class II',
+        pct_sa: {{ pt.pra }},
+        overall: '{{ pt.overall }}',
+        specificity: document.getElementById('spec-p2_{{ loop.index }}').innerText.trim(),
+        comment: document.getElementById('comment-p2_{{ loop.index }}').innerText.trim(),
+        sero_mfi: {{ pt.sero_mfi | tojson }},
+        upload_file: '{{ pt._upload_file | default("", true) }}'
+    });
+    {% endfor %}
+    {% endif %}
+    const btn = isSubmit ? document.getElementById('submitBtn') : document.getElementById('saveBtn');
+    btn.disabled = true;
+    document.getElementById('saveStatus').textContent = isSubmit ? 'Submitting...' : 'Saving...';
+    function postSave(mode) {
+        return fetch('/dsa/save', {
+            method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ patient_name: name, chart_no: chartNo, reports: reports, submitted: !!isSubmit, mode: mode })
+        }).then(r => r.json());
+    }
+    function handleResp(d) {
+        if (d.duplicate) {
+            const list = d.duplicate.map(x => `${x.dsa_class} (${x.report_date})`).join('、');
+            const msg = `此病患已有相同日期的紀錄：${list}\n請輸入選項：\n  1 = 覆寫（取代舊紀錄）\n  2 = 新增（另存一筆）\n  3 = 放棄`;
+            return askChoice(msg).then(choice => {
+                if (choice === '1') return postSave('overwrite').then(handleResp);
+                else if (choice === '2') return postSave('new').then(handleResp);
+                else { document.getElementById('saveStatus').textContent = '已取消'; btn.disabled = false; return; }
+            });
+        }
+        if (d.ok) {
+            const msg = isSubmit ? '已送出' : '已暫存';
+            document.getElementById('saveStatus').innerHTML = msg + ' <a href="/dsa/history/' + chartNo + '">查看紀錄</a>';
+            btn.textContent = msg;
+        } else {
+            document.getElementById('saveStatus').textContent = 'Error: ' + (d.error || 'unknown');
+            btn.disabled = false;
+        }
+    }
+    postSave('auto').then(handleResp).catch(e => {
+        document.getElementById('saveStatus').textContent = 'Error: ' + e;
+        btn.disabled = false;
+    });
+}
+function submitReport() {
+    if (!confirm('確定送出表單？')) return;
+    saveToDb(true);
+}
+</script>
+</body>
+</html>

templates//dsa_patient.html ADDED Viewed

	@@ -0,0 +1,434 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{ patient.patient_name }} - DSA History</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+<style>
+.chart-container { position: relative; height: 400px; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 1rem; margin-bottom: 1.5rem; }
+.ab-table { font-size: .82rem; }
+.strength-strong { --bs-table-bg: #f8d7da; background-color: #f8d7da !important; font-weight: bold; }
+.strength-strong > td { background-color: #f8d7da !important; }
+.strength-weak { --bs-table-bg: #fff9c4; background-color: #fff9c4 !important; }
+.strength-weak > td { background-color: #fff9c4 !important; }
+.spec-strong-bg { background-color: #f8d7da; padding: 3px 6px; border-radius: 3px; margin-bottom: 2px; display: block; }
+.spec-weak-bg { background-color: #fff9c4; padding: 3px 6px; border-radius: 3px; display: block; }
+[id^="spec-"] .spec-cell + .spec-cell { margin-top: 0.8em; }
+</style>
+</head>
+<body>
+<div class="container py-4" style="max-width: 1200px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <h2 class="mb-0">{{ patient.patient_name }}
+                <span class="text-muted fs-5">({{ patient.chart_no }})</span>
+            </h2>
+        </div>
+        <div>
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/dsa/history" class="btn btn-outline-secondary btn-sm me-1">歷史紀錄</a>
+            <a href="/dsa/analysis?chart_no={{ patient.chart_no }}" class="btn btn-outline-success btn-sm me-1">Analyze</a>
+            <a href="/dsa/new" class="btn btn-outline-primary btn-sm">新增資料</a>
+        </div>
+    </div>
+    <div class="card mb-3">
+        <div class="card-header fw-bold">Donor HLA</div>
+        <div class="card-body" style="font-size:.85rem;">
+            <style>.donor-hla { width: 80px !important; padding: 2px 4px !important; text-align: center; }</style>
+            <div class="row">
+                <div class="col-md-5">
+                    <div class="fw-bold mb-1">Serology</div>
+                    <table class="table table-sm table-bordered mb-1"><tbody>
+                    <tr><td class="fw-bold">A</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DR</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">B</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQ</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">Cw</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DP</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-2" oninput="highlightDSA()"></td></tr>
+                    </tbody></table>
+                </div>
+                <div class="col-md-7">
+                    <div class="fw-bold mb-1">DNA Typing</div>
+                    <table class="table table-sm table-bordered mb-1"><tbody>
+                    <tr><td class="fw-bold">A*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DRB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">B*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">C*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQA1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td></td><td></td><td></td>
+                        <td class="fw-bold">DPB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td></td><td></td><td></td>
+                        <td class="fw-bold">DPA1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-2" oninput="highlightDSA()"></td></tr>
+                    </tbody></table>
+                </div>
+            </div>
+            <div class="text-end">
+                <button class="btn btn-sm btn-outline-danger" onclick="saveDonorHLA(this)">存檔</button>
+            </div>
+        </div>
+    </div>
+    <script>
+    function getDonorSet() {
+        const s = new Set();
+        ['A','B','Cw','DR','DQ','DP'].forEach(l => {
+            [1,2].forEach(n => {
+                const el = document.getElementById('donor-' + l + '-' + n);
+                if (el && el.value.trim()) s.add(l + el.value.trim());
+            });
+        });
+        ['A','B','C','DRB1','DQB1','DQA1','DPB1','DPA1'].forEach(l => {
+            [1,2].forEach(n => {
+                const el = document.getElementById('donor-dna-' + l + '-' + n);
+                if (el && el.value.trim()) s.add(l + '*' + el.value.trim());
+            });
+        });
+        return s;
+    }
+    function highlightTokensInCell(cell, donorSet) {
+        if (!cell) return;
+        const text = cell.dataset.orig || cell.textContent;
+        cell.dataset.orig = text;
+        const tokens = text.split(/,\s*/);
+        cell.innerHTML = tokens.map(tok => {
+            const t = tok.trim();
+            if (!t) return tok;
+            for (const ag of donorSet) {
+                if (t.includes(ag)) {
+                    return '<span style="color:#dc3545;font-weight:bold;">' + tok + '</span>';
+                }
+            }
+            return tok;
+        }).join(', ');
+    }
+    function highlightSpecText(specEl, donorSet) {
+        if (!specEl) return;
+        const orig = specEl.dataset.orig || specEl.textContent;
+        specEl.dataset.orig = orig;
+        const inCardArea = specEl.closest('[id^="spec-"]') !== null;
+        const tokens = orig.match(/\S+?\([^)]*\)|\S+/g) || [];
+        specEl.innerHTML = tokens.map(seg => {
+            if (inCardArea) {
+                if (seg === 'Strong') return '<span style="color:#dc3545;font-weight:bold;">Strong</span>';
+                if (seg === 'Weak') return '<span style="color:#198754;font-weight:bold;">Weak</span>';
+            }
+            const m = seg.match(/^([^(]+)(\([^)]*\))?$/);
+            if (!m) return seg;
+            const sero = m[1];
+            const paren = m[2] || '';
+            if (!/^[A-Za-z]/.test(sero)) return seg;
+            let isDSA = false;
+            for (const ag of donorSet) {
+                if (!ag) continue;
+                if (sero === ag || (paren && paren.indexOf(ag) >= 0)) { isDSA = true; break; }
+            }
+            if (isDSA) return '<span style="color:#dc3545;font-weight:bold;">' + seg + '</span>';
+            const seroHtml = '<span style="color:#1E40AF;font-weight:bold;">' + sero + '</span>';
+            if (!paren) return seroHtml;
+            const inner = paren.slice(1, -1);
+            const alleleHtml = inner.split(/\s+/).map(a =>
+                a ? '<span style="color:#374151;">' + a + '</span>' : a
+            ).join(' ');
+            return seroHtml + '(' + alleleHtml + ')';
+        }).join(' ');
+    }
+    function highlightDSA() {
+        const ds = getDonorSet();
+        document.querySelectorAll('.spec-cell').forEach(el => highlightSpecText(el, ds));
+        document.querySelectorAll('.ab-table tbody tr').forEach(tr => {
+            highlightTokensInCell(tr.cells[0], ds);
+            highlightTokensInCell(tr.cells[1], ds);
+        });
+    }
+    function saveDonorHLA(btn) {
+        const obj = {};
+        document.querySelectorAll('.donor-hla').forEach(el => {
+            if (el.value.trim()) obj[el.id] = el.value.trim();
+        });
+        btn.disabled = true;
+        fetch('/save_donor_hla', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ chart_no: '{{ patient.chart_no }}', donor_hla: JSON.stringify(obj) })
+        }).then(r => r.json()).then(d => {
+            btn.disabled = false;
+            if (d.ok) {
+                btn.classList.remove('btn-outline-danger'); btn.classList.add('btn-danger');
+                btn.textContent = '已存檔';
+            }
+        });
+        highlightDSA();
+    }
+    window.addEventListener('DOMContentLoaded', function() {
+        const saved = {{ donor_hla | default('', true) | tojson }};
+        if (saved) {
+            try {
+                const obj = JSON.parse(saved);
+                Object.keys(obj).forEach(k => {
+                    const el = document.getElementById(k);
+                    if (el) el.value = obj[k];
+                });
+            } catch(e) {}
+        }
+        highlightDSA();
+    });
+    </script>
+    <h5>Reports</h5>
+    <table class="table table-bordered table-sm bg-white mb-4" style="font-size:.9rem;">
+        <thead class="table-light">
+            <tr><th>Date</th><th>Class</th><th>%SA</th><th>Overall</th><th>Specificity</th><th>Comment</th></tr>
+        </thead>
+        <tbody>
+        {% for r in reports %}
+        <tr>
+            <td>{{ r.report_date }}</td>
+            <td>{{ r.dsa_class }}</td>
+            <td class="fw-bold">{{ r.pct_sa }}%</td>
+            <td><span class="badge {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">{{ r.overall }}</span></td>
+            <td class="small" style="max-width:300px;">
+            {%- set spec_text = (r.specificity or '') | replace('&gt;', '>') -%}
+            {%- if 'Weak (MFI' in spec_text -%}
+              {%- set parts = spec_text.split('Weak (MFI', 1) -%}
+              <div class="spec-cell spec-strong-bg">{{ parts[0]|trim }}</div>
+              <div class="spec-cell spec-weak-bg">Weak (MFI{{ parts[1] }}</div>
+            {%- else -%}
+              <div class="spec-cell">{{ spec_text or '(-)' }}</div>
+            {%- endif -%}
+            </td>
+            <td class="small">
+            {%- set cmt_text = (r.comment or '') | replace('&gt;', '>') -%}
+            {%- if 'Weak (MFI' in cmt_text -%}
+              {%- set cparts = cmt_text.split('Weak (MFI', 1) -%}
+              <div class="spec-strong-bg">{{ cparts[0]|trim }}</div>
+              <div class="spec-weak-bg">Weak (MFI{{ cparts[1] }}</div>
+            {%- else -%}
+              {{ cmt_text }}
+            {%- endif -%}
+            </td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+    <div id="reportOutput" class="mb-4">
+        {% for r in reports %}
+        <div class="card mb-2">
+            <div class="card-body p-3">
+                <div class="d-flex justify-content-between align-items-center mb-2">
+                    <strong>{{ r.dsa_class }} — {{ r.report_date }}</strong>
+                    <div>
+                        <button class="btn btn-sm btn-outline-secondary me-1" onclick="copyReport('rpt-{{ loop.index }}')">Copy</button>
+                        <button class="btn btn-sm btn-outline-primary" id="editbtn-{{ loop.index }}" onclick="toggleEdit({{ r.id }}, {{ loop.index }}, this)">Edit</button>
+                    </div>
+                </div>
+                <div id="rpt-{{ loop.index }}" style="font-family:'Calibri','Segoe UI',sans-serif; line-height:1.8;">
+<div>{{ r.dsa_class }}</div>
+<div>Overall: {{ r.overall }}</div>
+<div>%SA (or %PRA): {{ r.pct_sa }}</div>
+<div>Specificity:</div>
+<div id="spec-{{ loop.index }}" style="border:1px solid transparent; border-radius:4px; padding:3px 6px; min-height:1.8rem;">
+{%- set spec_text = (r.specificity or '') | replace('&gt;', '>') -%}
+{%- if 'Weak (MFI' in spec_text -%}
+{%- set parts = spec_text.split('Weak (MFI', 1) -%}
+<div class="spec-cell">{{ parts[0]|trim }}</div>
+<div class="spec-cell">Weak (MFI{{ parts[1] }}</div>
+{%- else -%}
+<div class="spec-cell">{{ spec_text or '(-)' }}</div>
+{%- endif -%}
+</div>
+<div>COMMENT:</div>
+<div id="comment-{{ loop.index }}" style="border:1px solid transparent; border-radius:4px; padding:3px 6px; min-height:1.5rem;">{{ r.comment or '' }}</div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    <script>
+    function toggleEdit(reportId, idx, btn) {
+        const specEl = document.getElementById('spec-' + idx);
+        const commentEl = document.getElementById('comment-' + idx);
+        if (btn.textContent === 'Edit') {
+            specEl.contentEditable = 'true'; commentEl.contentEditable = 'true';
+            specEl.style.border = '1px dashed #0d6efd'; specEl.style.background = '#f8f9ff';
+            commentEl.style.border = '1px dashed #0d6efd'; commentEl.style.background = '#f8f9ff';
+            btn.textContent = 'Save'; btn.className = 'btn btn-sm btn-success'; specEl.focus();
+        } else {
+            const spec = specEl.innerText.trim();
+            const comment = commentEl.innerText.trim();
+            btn.disabled = true; btn.textContent = 'Saving...';
+            fetch('/dsa/update_report', {
+                method: 'POST', headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ report_id: reportId, specificity: spec, comment: comment })
+            })
+            .then(r => r.json()).then(d => {
+                if (d.ok) {
+                    specEl.contentEditable = 'false'; commentEl.contentEditable = 'false';
+                    specEl.style.border = '1px solid transparent'; specEl.style.background = '';
+                    commentEl.style.border = '1px solid transparent'; commentEl.style.background = '';
+                    btn.textContent = 'Edit'; btn.className = 'btn btn-sm btn-outline-primary'; btn.disabled = false;
+                } else { alert('儲存失敗: ' + (d.error || '')); btn.textContent = 'Save'; btn.disabled = false; }
+            }).catch(e => { alert('Error: ' + e); btn.textContent = 'Save'; btn.disabled = false; });
+        }
+    }
+    function copyReport(id) {
+        const el = document.getElementById(id);
+        const range = document.createRange(); range.selectNodeContents(el);
+        const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range);
+        document.execCommand('copy'); sel.removeAllRanges();
+        const btn = el.parentElement.querySelector('button');
+        const orig = btn.textContent; btn.textContent = 'Copied!';
+        btn.classList.replace('btn-outline-secondary','btn-success');
+        setTimeout(() => { btn.textContent = orig; btn.classList.replace('btn-success','btn-outline-secondary'); }, 1500);
+    }
+    </script>
+    {% for comp_label, comp_id, comp_dates, comp_antigens, comp_pra in [
+        ('DSA Class I', 'chart1', comparison_class1.dates if comparison_class1 else [],
+         comparison_class1.antigens if comparison_class1 else [],
+         comparison_class1.pra_by_date if comparison_class1 else {}),
+        ('DSA Class II', 'chart2', comparison_class2.dates if comparison_class2 else [],
+         comparison_class2.antigens if comparison_class2 else [],
+         comparison_class2.pra_by_date if comparison_class2 else {})
+    ] %}
+    {% if comp_dates and comp_dates | length >= 2 %}
+    <h5>{{ comp_label }} &mdash; MFI Trend</h5>
+    <div class="mb-2">
+        <small class="text-muted">Top antibodies by Max MFI (click legend to show/hide)</small>
+        <select id="filter-{{ comp_id }}" class="form-select form-select-sm d-inline-block ms-2" style="width:auto;"
+                onchange="updateChart('{{ comp_id }}')">
+            <option value="10">Top 10</option>
+            <option value="20" selected>Top 20</option>
+            <option value="all">All</option>
+        </select>
+    </div>
+    <div class="chart-container"><canvas id="{{ comp_id }}"></canvas></div>
+    <script>
+    (function() {
+        const dates = {{ comp_dates | tojson }};
+        const allData = [
+        {% for ag in comp_antigens %}
+            { antigen: '{{ ag.antigen }}', allele: '{{ ag.allele }}',
+              values: [{% for d in comp_dates %}{{ ag.mfi_by_date.get(d, {}).get('max_mfi', 'null') }}{% if not loop.last %},{% endif %}{% endfor %}] },
+        {% endfor %}
+        ];
+        function getColor(ag, i) {
+            const a = ['#e53935','#d81b60','#8e24aa','#5e35b1','#3949ab','#1e88e5','#ef5350','#ec407a'];
+            const b = ['#00897b','#43a047','#7cb342','#c0ca33','#26a69a','#66bb6a','#9ccc65','#d4e157','#2e7d32','#558b2f'];
+            const c = ['#ff8f00','#ff6f00','#f57f17','#ffb300','#ffa000','#ff8f00'];
+            if (ag.startsWith('A') || ag.startsWith('DR')) return a[i % a.length];
+            if (ag.startsWith('B') || ag.startsWith('DQ')) return b[i % b.length];
+            return c[i % c.length];
+        }
+        allData.sort((a, b) => {
+            const maxA = Math.max(...a.values.filter(v => v !== null));
+            const maxB = Math.max(...b.values.filter(v => v !== null));
+            return maxB - maxA;
+        });
+        let chartInstance = null;
+        function buildChart(limit) {
+            const data = limit === 'all' ? allData : allData.slice(0, parseInt(limit));
+            const datasets = data.map((ag, i) => ({
+                label: ag.antigen + (ag.allele && ag.allele !== ag.antigen ? ' (' + ag.allele + ')' : ''),
+                data: ag.values, borderColor: getColor(ag.antigen, i),
+                backgroundColor: getColor(ag.antigen, i) + '33',
+                borderWidth: 2, pointRadius: 4, pointHoverRadius: 6, tension: 0.3, spanGaps: true,
+            }));
+            if (chartInstance) chartInstance.destroy();
+            chartInstance = new Chart(document.getElementById('{{ comp_id }}'), {
+                type: 'line', data: { labels: dates, datasets: datasets },
+                options: {
+                    responsive: true, maintainAspectRatio: false,
+                    interaction: { mode: 'nearest', intersect: false },
+                    plugins: { legend: { position: 'right', labels: { font: { size: 11 }, boxWidth: 12, padding: 6 } },
+                        tooltip: { callbacks: { label: c => c.dataset.label + ': ' + (c.parsed.y !== null ? c.parsed.y.toLocaleString() : '-') } } },
+                    scales: { y: { title: { display: true, text: 'Max MFI (Normal)' }, beginAtZero: true },
+                              x: { title: { display: true, text: 'Report Date' } } }
+                }
+            });
+        }
+        const origUpdate = window['updateChart'];
+        window['updateChart'] = function(id) {
+            if (id === '{{ comp_id }}') { const sel = document.getElementById('filter-' + id); buildChart(sel.value); }
+            else if (origUpdate) origUpdate(id);
+        };
+        buildChart(20);
+    })();
+    </script>
+    {% endif %}
+    {% endfor %}
+    <h5>Antibody Strength</h5>
+    {% for r in reports %}
+    {% if r.antibodies %}
+    <div class="card mb-3">
+        <div class="card-header">
+            <strong>{{ r.dsa_class }}</strong> &mdash; {{ r.report_date }}
+            <span class="badge ms-1 {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">{{ r.overall }}</span>
+            <span class="fw-bold ms-1">%SA {{ r.pct_sa }}%</span>
+        </div>
+        <div class="card-body p-2">
+            <table class="table table-sm table-bordered ab-table mb-0">
+                <thead class="table-light"><tr>
+                    <th>Antigen</th><th>Allele</th><th>Strength</th><th class="text-end">Max MFI</th>
+                    <th class="text-end">Mean MFI</th><th class="text-center">No of Beads</th><th>Bead IDs</th>
+                </tr></thead>
+                <tbody>
+                {% for a in r.antibodies %}
+                <tr class="{% if a.strength == 'Strong' %}strength-strong{% elif a.strength == 'Weak' %}strength-weak{% endif %}">
+                    <td class="fw-bold">{{ a.antigen }}</td>
+                    <td class="small">{{ a.allele }}</td>
+                    <td>{{ a.strength or '' }}</td>
+                    <td class="text-end">{{ a.max_mfi|int }}</td>
+                    <td class="text-end">{{ a.mean_mfi|int }}</td>
+                    <td class="text-center">{{ a.no_of_beads }}</td>
+                    <td class="small text-muted">{{ a.bead_ids }}</td>
+                </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% endif %}
+    {% endfor %}
+</div>
+</body>
+</html>

templates//history.html ADDED Viewed

	@@ -0,0 +1,178 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>PRA History</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<style>
+</style>
+</head>
+<body>
+<div class="container py-4" style="max-width: 1200px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <h2 class="mb-0">PRA 歷史紀錄</h2>
+        <div>
+            {% if is_admin %}
+            <button class="btn btn-warning btn-sm me-1" onclick="cloudSync(this)">雲端同步</button>
+            {% endif %}
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/new" class="btn btn-outline-primary btn-sm me-1">新增資料</a>
+            <a href="/analysis" class="btn btn-outline-secondary btn-sm">統計分析</a>
+        </div>
+    </div>
+    <div id="syncStatus" class="alert alert-info py-2 small mb-2" style="display:none;"></div>
+    <div class="small text-muted mb-2">目前共 {{ db_stats.patients }} 位病患、{{ db_stats.reports }} 筆報告</div>
+    {% if error %}
+    <div class="alert alert-danger">{{ error }}</div>
+    {% endif %}
+    <form class="row g-2 mb-3" method="get" action="/history">
+        <div class="col">
+            <input type="text" class="form-control" name="q" placeholder="搜尋姓名或病歷號" value="{{ request.args.get('q','') }}">
+        </div>
+        <div class="col-auto d-flex align-items-center">
+            <span class="me-1 text-muted small">日期範圍</span>
+            <input type="date" class="form-control form-control-sm" name="from" value="{{ request.args.get('from','') }}" style="width:150px;">
+            <span class="mx-1">–</span>
+            <input type="date" class="form-control form-control-sm" name="to" value="{{ request.args.get('to','') }}" style="width:150px;">
+        </div>
+        <div class="col-auto">
+            <button class="btn btn-secondary">搜尋</button>
+        </div>
+    </form>
+    <table class="table table-bordered table-hover bg-white" style="font-size:.9rem;">
+        <thead class="table-light">
+            <tr>
+                <th>病患姓名</th>
+                <th>病歷號</th>
+                <th>報告日期</th>
+                <th>Class</th>
+                <th>PRA%</th>
+                <th>Overall</th>
+                <th>Antibodies</th>
+                <th>填表人</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+        {% set q = request.args.get('q','').lower() %}
+        {% set date_from = request.args.get('from','') %}
+        {% set date_to = request.args.get('to','') %}
+        {% for r in reports %}
+        {% set rd = r.report_date | replace('/','-') %}
+        {% if (not q or q in r.chart_no.lower() or q in r.patient_name.lower())
+           and (not date_from or rd >= date_from)
+           and (not date_to or rd <= date_to) %}
+        <tr>
+            <td>{{ r.patient_name }}</td>
+            <td>{{ r.chart_no }}</td>
+            <td>{{ r.report_date }}</td>
+            <td>{{ r.pra_class }}</td>
+            <td class="fw-bold">{{ r.pra_percent }}%</td>
+            <td>
+                <span class="badge {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">
+                    {{ r.overall }}</span>
+            </td>
+            <td class="small spec-cell" style="max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"
+                title="{{ r.specificity or '' }}">
+                {{ r.specificity if r.specificity and r.specificity != '(-)' else '(-)' }}
+            </td>
+            <td class="small">{{ r.submitted_by or '' }}</td>
+            <td class="text-nowrap">
+                <a href="/history/{{ r.chart_no }}" class="btn btn-sm btn-outline-primary me-1">View</a>
+                <a href="/analysis?chart_no={{ r.chart_no }}" class="btn btn-sm btn-outline-success me-1">Analyze</a>
+                <button class="btn btn-sm btn-outline-danger" onclick="deleteReport({{ r.id }}, this)">Del</button>
+            </td>
+        </tr>
+        {% endif %}
+        {% endfor %}
+        </tbody>
+    </table>
+    {% if not reports %}
+    <div class="text-center text-muted py-5">尚無紀錄</div>
+    {% endif %}
+</div>
+<script>
+// Specificity 藍/灰預設色（list view 多病人，不上 DSA 紅）
+window.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.spec-cell').forEach(td => {
+        const orig = td.textContent.trim();
+        if (!orig || orig === '(-)') return;
+        const tokens = orig.match(/\S+?\([^)]*\)|\S+/g) || [];
+        td.innerHTML = tokens.map(seg => {
+            const m = seg.match(/^([^(]+)(\([^)]*\))?$/);
+            if (!m) return seg;
+            const sero = m[1];
+            const paren = m[2] || '';
+            const seroHtml = '<span style="color:#1E40AF;font-weight:bold;">' + sero + '</span>';
+            if (!paren) return seroHtml;
+            const inner = paren.slice(1, -1);
+            const alleleHtml = inner.split(/\s+/).map(a =>
+                a ? '<span style="color:#374151;">' + a + '</span>' : a
+            ).join(' ');
+            return seroHtml + '(' + alleleHtml + ')';
+        }).join(' ');
+    });
+});
+function cloudSync(btn) {
+    btn.disabled = true;
+    btn.textContent = '同步中...';
+    const ss = document.getElementById('syncStatus');
+    ss.style.display = 'block';
+    ss.className = 'alert alert-info py-2 small mb-2';
+    ss.innerHTML = '<strong>正在與雲端同步...</strong>';
+    fetch('/cloud_sync', { method: 'POST' })
+    .then(r => r.json())
+    .then(d => {
+        if (d.ok) {
+            let html = '<table style="width:100%;font-size:.9rem;"><tbody>';
+            html += '<tr><td><strong>同步前 Local:</strong></td><td>' + d.before.local + '</td></tr>';
+            html += '<tr><td><strong>同步前 Cloud:</strong></td><td>' + d.before.cloud + '</td></tr>';
+            html += '<tr><td colspan="2"><hr style="margin:.3rem 0;"></td></tr>';
+            html += '<tr><td><strong>同步後:</strong></td><td><strong>' + d.after + '</strong></td></tr>';
+            if (d.details) {
+                const dt = d.details;
+                let changes = [];
+                if (dt.patients_added) changes.push('新增 ' + dt.patients_added + ' 病患');
+                if (dt.reports_added) changes.push('新增 ' + dt.reports_added + ' 報告');
+                if (dt.reports_updated) changes.push('更新 ' + dt.reports_updated + ' 報告');
+                if (dt.users_added) changes.push('新增 ' + dt.users_added + ' 使用者');
+                if (dt.users_updated) changes.push('更新 ' + dt.users_updated + ' 使用者');
+                if (changes.length) html += '<tr><td><strong>變更:</strong></td><td>' + changes.join('、') + '</td></tr>';
+            }
+            html += '</tbody></table>';
+            ss.className = d.status === 'identical' ? 'alert alert-secondary py-2 small mb-2' : 'alert alert-success py-2 small mb-2';
+            ss.innerHTML = '<strong>' + d.message + '</strong><br>' + html;
+            if (d.status !== 'identical') setTimeout(() => location.reload(), 3000);
+        } else {
+            ss.className = 'alert alert-danger py-2 small mb-2';
+            ss.textContent = '同步失敗: ' + (d.error || '');
+            btn.disabled = false;
+            btn.textContent = '雲端同步';
+        }
+    })
+    .catch(e => {
+        ss.className = 'alert alert-danger py-2 small mb-2';
+        ss.textContent = '同步失敗: ' + e;
+        btn.disabled = false;
+        btn.textContent = '雲端同步';
+    });
+}
+function deleteReport(id, btn) {
+    if (!confirm('確定刪除此筆報告？')) return;
+    fetch('/delete_report/' + id, { method: 'POST' })
+    .then(r => r.json())
+    .then(d => {
+        if (d.ok) location.reload();
+        else alert('刪除失敗: ' + (d.error || ''));
+    });
+}
+</script>
+</body>
+</html>

templates//index.html ADDED Viewed

	@@ -0,0 +1,927 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>PRA Analysis</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<style>
+body { background: #f5f7fa; }
+.upload-zone {
+    border: 2px dashed #adb5bd; border-radius: 12px; padding: 2.5rem;
+    text-align: center; cursor: pointer; transition: all .2s; background: #fff;
+}
+.upload-zone:hover, .upload-zone.dragover { border-color: #0d6efd; background: #e8f0fe; }
+.pra-panel { min-height: 200px; }
+.report-card {
+    background: #fff; border: 1px solid #dee2e6; border-radius: 6px;
+    padding: 1.2rem 1.5rem; margin-bottom: 1rem;
+    font-family: 'Calibri','Segoe UI',sans-serif; font-size: .95rem; line-height: 1.7;
+}
+.report-card .report-title { font-weight: bold; font-size: 1.05rem; }
+.report-spec-edit {
+    border: 1px dashed #adb5bd; border-radius: 4px; padding: .3rem .5rem;
+    min-height: 1.8rem; outline: none; width: 100%; font-family: inherit; font-size: inherit;
+}
+.report-spec-edit:focus { border-color: #0d6efd; background: #f8f9ff; }
+.panel-title { font-size: 1.1rem; font-weight: bold; padding: .5rem; border-radius: 4px; text-align: center; margin-bottom: .8rem; }
+.panel-title-pra1 { background: #dbeafe; color: #1e40af; }
+.panel-title-pra2 { background: #fef3c7; color: #92400e; }
+.empty-panel { color: #adb5bd; text-align: center; padding: 3rem 1rem; font-style: italic; }
+table.mfi-table { font-size: .82rem; }
+table.mfi-table th { position: sticky; top: 0; background: #fff; z-index: 1; }
+.mfi-scroll { max-height: 350px; overflow-y: auto; }
+table.bead-table { font-size: .82rem; }
+.bead-scroll { max-height: 350px; overflow-y: auto; }
+.rxn-8 { background: #f8d7da !important; font-weight: bold; }
+.rxn-6 { background: #ffe0b2 !important; }
+.rxn-4 { background: #fff9c4 !important; }
+.bead-confident td:first-child { border-left: 4px solid #198754 !important; }
+.dsa-highlight { background: #ff0 !important; font-weight: bold; }
+.badge-pos { background: #dc3545; }
+.badge-neg { background: #198754; }
+@media print {
+    .no-print { display: none !important; }
+    .report-card { border: none; padding: .5rem 0; }
+    .report-spec-edit { border: none; padding: 0; }
+}
+/* Custom choice modal（取代 prompt() 以避免瀏覽器顯示網域） */
+#choice-modal-backdrop {
+    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
+    z-index: 1060; align-items: center; justify-content: center;
+}
+#choice-modal-backdrop.show { display: flex; }
+#choice-modal {
+    background: #fff; border-radius: 8px; padding: 1.25rem 1.5rem;
+    min-width: 320px; max-width: 480px; box-shadow: 0 10px 40px rgba(0,0,0,.2);
+}
+#choice-modal .cm-message { white-space: pre-wrap; margin-bottom: 1rem; font-size: .95rem; }
+#choice-modal .cm-input {
+    width: 100%; padding: .5rem; font-size: 1.2rem; text-align: center;
+    border: 1px solid #ced4da; border-radius: 4px;
+}
+#choice-modal .cm-input:focus { border-color: #0d6efd; outline: none; }
+#choice-modal .cm-btns { text-align: right; margin-top: 1rem; }
+#choice-modal .cm-btns button { margin-left: .5rem; }
+</style>
+</head>
+<body>
+<!-- Custom choice modal -->
+<div id="choice-modal-backdrop">
+    <div id="choice-modal" role="dialog" aria-modal="true">
+        <div class="cm-message" id="cm-message"></div>
+        <input type="text" class="cm-input" id="cm-input"
+               inputmode="numeric" pattern="[1-3]" maxlength="1"
+               autocomplete="off">
+        <div class="cm-btns">
+            <button type="button" class="btn btn-secondary btn-sm" id="cm-cancel">取消</button>
+            <button type="button" class="btn btn-primary btn-sm" id="cm-ok">確定</button>
+        </div>
+    </div>
+</div>
+<script>
+/* askChoice(message) -> Promise<string|null>（返回 '1'/'2'/'3' 或 null） */
+window.askChoice = function(message) {
+    return new Promise(resolve => {
+        const bd = document.getElementById('choice-modal-backdrop');
+        const input = document.getElementById('cm-input');
+        const ok = document.getElementById('cm-ok');
+        const cancel = document.getElementById('cm-cancel');
+        document.getElementById('cm-message').textContent = message;
+        input.value = '';
+        bd.classList.add('show');
+        setTimeout(() => input.focus(), 50);
+        // 只允許 1-3 單一數字
+        const onInput = () => {
+            const v = input.value.replace(/[^1-3]/g, '').slice(0, 1);
+            if (input.value !== v) input.value = v;
+        };
+        const onKey = (e) => {
+            if (e.key === 'Enter') { e.preventDefault(); submit(); }
+            else if (e.key === 'Escape') { e.preventDefault(); cleanup(null); }
+        };
+        const submit = () => {
+            const v = input.value;
+            if (v === '1' || v === '2' || v === '3') cleanup(v);
+            else {
+                input.focus();
+                input.style.borderColor = '#dc3545';
+                setTimeout(() => input.style.borderColor = '', 800);
+            }
+        };
+        const cleanup = (result) => {
+            bd.classList.remove('show');
+            input.removeEventListener('input', onInput);
+            input.removeEventListener('keydown', onKey);
+            ok.removeEventListener('click', submit);
+            cancel.removeEventListener('click', onCancel);
+            resolve(result);
+        };
+        const onCancel = () => cleanup(null);
+        input.addEventListener('input', onInput);
+        input.addEventListener('keydown', onKey);
+        ok.addEventListener('click', submit);
+        cancel.addEventListener('click', onCancel);
+    });
+};
+</script>
+<div class="container-fluid py-3" style="max-width: 1400px;">
+    <div class="d-flex justify-content-between align-items-center mb-1">
+        <h2 class="mb-0">PRA Analysis</h2>
+        <div class="no-print">
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/history" class="btn btn-outline-secondary btn-sm me-1">歷史紀錄</a>
+            <a href="/analysis" class="btn btn-outline-secondary btn-sm me-1">統計分析</a>
+            <a href="/batch_upload" class="btn btn-success btn-sm">批次新增資料</a>
+        </div>
+    </div>
+    <p class="text-muted mb-3">LABScreen PRA Class I / II</p>
+    {% if error %}
+    <div class="alert alert-danger">{{ error }}</div>
+    {% endif %}
+    {% if errors %}
+    <div class="alert alert-warning no-print">
+        {% for e in errors %}<div class="small">{{ e }}</div>{% endfor %}
+    </div>
+    {% endif %}
+    <!-- Patient Info + Upload -->
+    <form id="uploadForm" action="/analyze" method="post" enctype="multipart/form-data" class="mb-3 no-print">
+        <div class="row g-2 mb-2">
+            <div class="col-sm-5">
+                <input type="text" class="form-control" name="patient_name" id="patientName"
+                       placeholder="病患姓名（必填）" value="{{ patient_name or '' }}" required>
+            </div>
+            <div class="col-sm-4">
+                <input type="text" class="form-control" name="patient_id" id="patientId"
+                       placeholder="病歷號（必填）" value="{{ patient_id or '' }}" required>
+            </div>
+            <div class="col-sm-3">
+                <button type="button" class="btn btn-primary w-100" id="analyzeBtn" disabled
+                        onclick="submitWithDelay()">Analyze</button>
+            </div>
+        </div>
+        <div class="upload-zone" id="dropZone" onclick="document.getElementById('fileInput').click()">
+            <input type="file" name="file" id="fileInput" accept=".xls,.xlsx" multiple
+                   style="display:none" onchange="onFileSelected(this)">
+            <div id="dropIcon" style="font-size:1.8rem;">&#128196;</div>
+            <div class="mt-1 fw-bold">XLS</div>
+            <div class="text-muted small">可多次拖拉或選取 HLA Fusion PRA Class I / II 檔案</div>
+            <div id="fileList" class="mt-2 small text-primary" style="display:none;"></div>
+            <div id="uploadingMsg" class="mt-2 text-muted" style="display:none;">
+                <div class="spinner-border spinner-border-sm me-1"></div> Analyzing...
+            </div>
+        </div>
+    </form>
+    {% if result_pra1 or result_pra2 %}
+    <!-- Donor HLA -->
+    <div class="no-print mb-3">
+        <div class="card">
+            <div class="card-header fw-bold">Donor HLA</div>
+            <div class="card-body" style="font-size:.85rem;">
+                <style>.donor-hla { width: 65px !important; padding: 2px 4px !important; text-align: center; }</style>
+                <div class="row">
+                    <div class="col-md-5">
+                        <div class="fw-bold mb-1">Serology</div>
+                        <table class="table table-sm table-bordered mb-1">
+                            <tbody>
+                            <tr><td class="fw-bold">A</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-2"></td>
+                                <td class="fw-bold">DR</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-2"></td></tr>
+                            <tr><td class="fw-bold">B</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-2"></td>
+                                <td class="fw-bold">DQ</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-2"></td></tr>
+                            <tr><td class="fw-bold">Cw</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-2"></td>
+                                <td class="fw-bold">DP</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-1"></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-2"></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="col-md-7">
+                        <div class="fw-bold mb-1">DNA Typing</div>
+                        <table class="table table-sm table-bordered mb-1">
+                            <tbody>
+                            <tr><td class="fw-bold">A*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-1" ></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-2" ></td>
+                                <td class="fw-bold">DRB1*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-1" ></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-2" ></td></tr>
+                            <tr><td class="fw-bold">B*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-1" ></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-2" ></td>
+                                <td class="fw-bold">DQB1*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-1" ></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-2" ></td></tr>
+                            <tr><td class="fw-bold">C*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-1" ></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-2" ></td>
+                                <td class="fw-bold">DQA1*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-1" ></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-2" ></td></tr>
+                            <tr><td></td><td></td><td></td>
+                                <td class="fw-bold">DPB1*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-1" ></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-2" ></td></tr>
+                            <tr><td></td><td></td><td></td>
+                                <td class="fw-bold">DPA1*</td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-1" ></td>
+                                <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-2" ></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="text-end">
+                    <button class="btn btn-sm btn-outline-danger" onclick="dsaCheck()">存檔</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+    {% if result_pra1 or result_pra2 %}
+    {% if patient_name or patient_id %}
+    <div class="text-center mb-3">
+        <h4 class="mb-0">{{ patient_name }}{% if patient_id %} <span class="text-muted small">({{ patient_id }})</span>{% endif %}</h4>
+    </div>
+    {% endif %}
+    <!-- ============ Side-by-side layout ============ -->
+    <div class="row">
+        <!-- LEFT: PRA Class I -->
+        <div class="col-md-6 pra-panel">
+            <div class="panel-title panel-title-pra1">PRA Class I</div>
+            {% if result_pra1 %}
+                {% set result = result_pra1 %}
+                {% for pt in result.patients %}
+                {% set pt_idx = 'p1_' ~ loop.index %}
+                {% set storage_key = 'pra1_' ~ pt.name | replace(' ','_') %}
+                <div class="report-card">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div class="report-title" style="display:none;">{{ pt.name }}</div>
+                        <div class="no-print">
+                            <button class="btn btn-sm btn-outline-secondary me-1" onclick="copyReport('rc-{{ pt_idx }}')">Copy</button>
+                            <button class="btn btn-sm btn-outline-primary" onclick="toggleEditNew('{{ pt_idx }}', this)">Edit</button>
+                        </div>
+                    </div>
+                    <div id="rc-{{ pt_idx }}">
+<div>PRA Class I</div>
+<div>Overall: {{ pt.overall }}</div>
+<div>%SA (or %PRA): {{ pt.pra }}</div>
+<div>Specificity:</div>
+<div class="report-spec-edit" id="spec-{{ pt_idx }}" style="border:1px solid transparent;">{{ pt.specificity|safe }}</div>
+<div>COMMENT:</div>
+<div class="report-spec-edit" id="comment-{{ pt_idx }}" style="border:1px solid transparent; min-height:1.5rem; white-space:pre-line;">{{ pt.comment or '' }}</div>
+                    </div>
+                </div>
+                {% if pt.sero_mfi %}
+                <div class="mb-3 no-print">
+                    <div class="small fw-bold mb-1">Antibody Strength
+                    </div>
+                    <div class="mfi-scroll">
+                    <table class="table table-sm table-bordered mfi-table mb-0">
+                        <thead class="table-light"><tr>
+                            <th>Antigen</th><th>Allele</th><th class="text-end">Max MFI</th>
+                            <th class="text-end">Mean MFI</th><th class="text-center">No of Beads</th><th>Bead IDs</th>
+                        </tr></thead>
+                        <tbody>
+                        {% for m in pt.sero_mfi %}
+                        <tr>
+                            <td class="fw-bold">{{ m.sero }}</td><td class="small">{{ m.alleles }}</td>
+                            <td class="text-end">{{ m.max_mfi|int }}</td>
+                            <td class="text-end">{{ m.mean_mfi|int }}</td>
+                            <td class="text-center">{{ m.count }}</td><td class="small text-muted">{{ m.beads }}</td>
+                        </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                    </div>
+                </div>
+                {% endif %}
+                <div class="no-print">
+                <div class="fw-bold small mb-1">Bead Details ({{ pt.beads|length }})</div>
+                <div class="mb-3">
+                    {% if pt.qc %}
+                    <div class="mb-2 p-2 border rounded bg-light small">
+                        <strong>Quality Control</strong>
+                        <table class="table table-sm table-bordered mb-0 mt-1" style="width:auto; font-size:.82rem;">
+                            <thead class="table-secondary"><tr><th>Item</th><th>Value</th><th>Normal</th><th>Status</th></tr></thead>
+                            <tbody>
+                            <tr{% if pt.qc.nc_raw > 500 %} class="table-danger"{% endif %}>
+                                <td>NC Raw (Bead 001)</td><td>{{ pt.qc.nc_raw }}</td><td>≤500</td>
+                                <td>{% if pt.qc.nc_raw > 1500 %}<span class="text-danger fw-bold">Uninterpretable due to high background bindings, please repeat</span>{% elif pt.qc.nc_raw > 500 %}<span class="text-warning fw-bold">High background bindings</span>{% endif %}</td>
+                            </tr>
+                            <tr{% if pt.qc.pc_raw <= 500 %} class="table-danger"{% endif %}>
+                                <td>PC Raw (Bead 002)</td><td>{{ pt.qc.pc_raw }}</td><td>&gt;500</td>
+                                <td>{% if pt.qc.pc_raw <= 500 %}<span class="text-danger fw-bold">Low PC signal, please repeat</span>{% endif %}</td>
+                            </tr>
+                            <tr{% if pt.qc.pc_nc_ratio < 2 %} class="table-danger"{% endif %}>
+                                <td>PC/NC Ratio</td><td>{{ pt.qc.pc_nc_ratio }}</td><td>≥2</td>
+                                <td>{% if pt.qc.pc_nc_ratio < 2 %}<span class="text-danger fw-bold">Uninterpretable, please repeat</span>{% endif %}</td>
+                            </tr>
+                            <tr{% if pt.qc.low_beads %} class="table-warning"{% endif %}>
+                                <td>Bead Count</td>
+                                <td>{% if pt.qc.low_beads %}{{ pt.qc.low_beads|length }} beads &lt;80{% else %}All ≥80{% endif %}</td>
+                                <td>≥80</td>
+                                <td>{% if pt.qc.low_beads %}<span class="text-danger fw-bold">Low HLA Beads count, please repeat</span>{% endif %}</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    {% endif %}
+                    <div class="bead-scroll">
+                    <table class="table table-sm table-bordered bead-table mb-0">
+                        <thead><tr><th></th><th>Bead</th><th>Rxn</th><th>Raw</th><th>Normal</th><th>Ratio</th><th>Count</th><th>Specificity</th><th>Molecular</th></tr></thead>
+                        <tbody>
+                        {% for b in pt.beads %}
+                        <tr class="{% if b.rxn >= 8 %}rxn-8{% elif b.rxn >= 6 %}rxn-6{% elif b.rxn >= 4 %}rxn-4{% endif %}{% if b.is_confident %} bead-confident{% endif %}" data-sero="{{ b.sero }}" data-allele="{{ b.allele }}">
+                            <td>X{{ b.rxn }}</td><td>{{ b.bead }}</td><td>{{ b.rxn }}</td>
+                            <td>{{ b.raw }}</td><td>{{ b.normal }}</td><td>{{ b.ratio }}</td><td>{{ b.count }}</td>
+                            <td class="small">{{ b.sero }}</td>
+                            <td class="small">{{ b.allele }}</td>
+                        </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                    </div>
+                </div>
+                {% if pt.allele_decisions %}
+                <button class="btn btn-sm btn-outline-secondary mb-2" type="button"
+                        data-bs-toggle="collapse" data-bs-target="#rule80-{{ pt_idx }}">
+                    <strong>Allele Specificity 紀錄</strong>
+                </button>
+                <div class="collapse show mb-3" id="rule80-{{ pt_idx }}">
+                    <div class="bead-scroll">
+                    <table class="table table-sm table-bordered bead-table mb-0">
+                        <thead class="table-secondary"><tr><th>Allele</th><th>Sero</th><th>X6/X8</th><th>X4</th><th>X2/X1</th><th>Decision</th></tr></thead>
+                        <tbody>
+                        {% for d in pt.allele_decisions %}
+                        <tr class="{% if 'Assign' in d.decision %}table-danger{% endif %}">
+                            <td>{{ d.allele }}</td><td>{{ d.sero }}</td><td>{{ d.x6x8 }}</td><td>{{ d.x4 }}</td><td>{{ d.x2x1 }}</td>
+                            <td>{{ d.decision }}</td>
+                        </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                    </div>
+                </div>
+                {% endif %}
+                </div>
+                {% endfor %}
+            {% else %}
+                <div class="empty-panel">No PRA Class I data</div>
+            {% endif %}
+        </div>
+        <!-- RIGHT: PRA Class II -->
+        <div class="col-md-6 pra-panel">
+            <div class="panel-title panel-title-pra2">PRA Class II</div>
+            {% if result_pra2 %}
+                {% set result = result_pra2 %}
+                {% for pt in result.patients %}
+                {% set pt_idx = 'p2_' ~ loop.index %}
+                {% set storage_key = 'pra2_' ~ pt.name | replace(' ','_') %}
+                <div class="report-card">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div class="report-title" style="display:none;">{{ pt.name }}</div>
+                        <div class="no-print">
+                            <button class="btn btn-sm btn-outline-secondary me-1" onclick="copyReport('rc-{{ pt_idx }}')">Copy</button>
+                            <button class="btn btn-sm btn-outline-primary" onclick="toggleEditNew('{{ pt_idx }}', this)">Edit</button>
+                        </div>
+                    </div>
+                    <div id="rc-{{ pt_idx }}">
+<div>PRA Class II</div>
+<div>Overall: {{ pt.overall }}</div>
+<div>%SA (or %PRA): {{ pt.pra }}</div>
+<div>Specificity:</div>
+<div class="report-spec-edit" id="spec-{{ pt_idx }}" style="border:1px solid transparent;">{{ pt.specificity|safe }}</div>
+<div>COMMENT:</div>
+<div class="report-spec-edit" id="comment-{{ pt_idx }}" style="border:1px solid transparent; min-height:1.5rem; white-space:pre-line;">{{ pt.comment or '' }}</div>
+                    </div>
+                </div>
+                {% if pt.sero_mfi %}
+                <div class="mb-3 no-print">
+                    <div class="small fw-bold mb-1">Antibody Strength
+                    </div>
+                    <div class="mfi-scroll">
+                    <table class="table table-sm table-bordered mfi-table mb-0">
+                        <thead class="table-light"><tr>
+                            <th>Antigen</th><th>Allele</th><th class="text-end">Max MFI</th>
+                            <th class="text-end">Mean MFI</th><th class="text-center">No of Beads</th><th>Bead IDs</th>
+                        </tr></thead>
+                        <tbody>
+                        {% for m in pt.sero_mfi %}
+                        <tr>
+                            <td class="fw-bold">{{ m.sero }}</td><td class="small">{{ m.alleles }}</td>
+                            <td class="text-end">{{ m.max_mfi|int }}</td>
+                            <td class="text-end">{{ m.mean_mfi|int }}</td>
+                            <td class="text-center">{{ m.count }}</td><td class="small text-muted">{{ m.beads }}</td>
+                        </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                    </div>
+                </div>
+                {% endif %}
+                <div class="no-print">
+                <div class="fw-bold small mb-1">Bead Details ({{ pt.beads|length }})</div>
+                <div class="mb-3">
+                    {% if pt.qc %}
+                    <div class="mb-2 p-2 border rounded bg-light small">
+                        <strong>Quality Control</strong>
+                        <table class="table table-sm table-bordered mb-0 mt-1" style="width:auto; font-size:.82rem;">
+                            <thead class="table-secondary"><tr><th>Item</th><th>Value</th><th>Normal</th><th>Status</th></tr></thead>
+                            <tbody>
+                            <tr{% if pt.qc.nc_raw > 500 %} class="table-danger"{% endif %}>
+                                <td>NC Raw (Bead 001)</td><td>{{ pt.qc.nc_raw }}</td><td>≤500</td>
+                                <td>{% if pt.qc.nc_raw > 1500 %}<span class="text-danger fw-bold">Uninterpretable due to high background bindings, please repeat</span>{% elif pt.qc.nc_raw > 500 %}<span class="text-warning fw-bold">High background bindings</span>{% endif %}</td>
+                            </tr>
+                            <tr{% if pt.qc.pc_raw <= 500 %} class="table-danger"{% endif %}>
+                                <td>PC Raw (Bead 002)</td><td>{{ pt.qc.pc_raw }}</td><td>&gt;500</td>
+                                <td>{% if pt.qc.pc_raw <= 500 %}<span class="text-danger fw-bold">Low PC signal, please repeat</span>{% endif %}</td>
+                            </tr>
+                            <tr{% if pt.qc.pc_nc_ratio < 2 %} class="table-danger"{% endif %}>
+                                <td>PC/NC Ratio</td><td>{{ pt.qc.pc_nc_ratio }}</td><td>≥2</td>
+                                <td>{% if pt.qc.pc_nc_ratio < 2 %}<span class="text-danger fw-bold">Uninterpretable, please repeat</span>{% endif %}</td>
+                            </tr>
+                            <tr{% if pt.qc.low_beads %} class="table-warning"{% endif %}>
+                                <td>Bead Count</td>
+                                <td>{% if pt.qc.low_beads %}{{ pt.qc.low_beads|length }} beads &lt;80{% else %}All ≥80{% endif %}</td>
+                                <td>≥80</td>
+                                <td>{% if pt.qc.low_beads %}<span class="text-danger fw-bold">Low HLA Beads count, please repeat</span>{% endif %}</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    {% endif %}
+                    <div class="bead-scroll">
+                    <table class="table table-sm table-bordered bead-table mb-0">
+                        <thead><tr><th></th><th>Bead</th><th>Rxn</th><th>Raw</th><th>Normal</th><th>Ratio</th><th>Count</th><th>Specificity</th><th>Molecular</th></tr></thead>
+                        <tbody>
+                        {% for b in pt.beads %}
+                        <tr class="{% if b.rxn >= 8 %}rxn-8{% elif b.rxn >= 6 %}rxn-6{% elif b.rxn >= 4 %}rxn-4{% endif %}{% if b.is_confident %} bead-confident{% endif %}" data-sero="{{ b.sero }}" data-allele="{{ b.allele }}">
+                            <td>X{{ b.rxn }}</td><td>{{ b.bead }}</td><td>{{ b.rxn }}</td>
+                            <td>{{ b.raw }}</td><td>{{ b.normal }}</td><td>{{ b.ratio }}</td><td>{{ b.count }}</td>
+                            <td class="small">{{ b.sero }}</td>
+                            <td class="small">{{ b.allele }}</td>
+                        </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                    </div>
+                </div>
+                {% if pt.allele_decisions %}
+                <button class="btn btn-sm btn-outline-secondary mb-2" type="button"
+                        data-bs-toggle="collapse" data-bs-target="#rule80-{{ pt_idx }}">
+                    <strong>Allele Specificity 紀錄</strong>
+                </button>
+                <div class="collapse show mb-3" id="rule80-{{ pt_idx }}">
+                    <div class="bead-scroll">
+                    <table class="table table-sm table-bordered bead-table mb-0">
+                        <thead class="table-secondary"><tr><th>Allele</th><th>Sero</th><th>X6/X8</th><th>X4</th><th>X2/X1</th><th>Decision</th></tr></thead>
+                        <tbody>
+                        {% for d in pt.allele_decisions %}
+                        <tr class="{% if 'Assign' in d.decision %}table-danger{% endif %}">
+                            <td>{{ d.allele }}</td><td>{{ d.sero }}</td><td>{{ d.x6x8 }}</td><td>{{ d.x4 }}</td><td>{{ d.x2x1 }}</td>
+                            <td>{{ d.decision }}</td>
+                        </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                    </div>
+                </div>
+                {% endif %}
+                </div>
+                {% endfor %}
+            {% else %}
+                <div class="empty-panel">No PRA Class II data</div>
+            {% endif %}
+        </div>
+    </div>
+    <!-- Action buttons -->
+    <div class="text-center my-3 no-print">
+        <button class="btn btn-outline-secondary me-2" onclick="saveToDb()" id="saveBtn">暫存</button>
+        <button class="btn btn-success" onclick="submitReport()" id="submitBtn">送出表單</button>
+        <div id="saveStatus" class="small text-muted mt-1"></div>
+    </div>
+    {% endif %}
+</div>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+// Load saved donor HLA on page load
+function _loadDonorObj(obj) {
+    // 新格式: {"donor-A-1":"2", "donor-dna-DRB1-1":"04:01", ...}
+    // 舊格式: {"A":"2,24", "B":"7,46", "DR":"4,7", ...}
+    document.querySelectorAll('.donor-hla').forEach(el => el.value = '');
+    const firstKey = Object.keys(obj)[0] || '';
+    if (firstKey.startsWith('donor-')) {
+        // 新格式
+        Object.keys(obj).forEach(k => {
+            const el = document.getElementById(k);
+            if (el) el.value = obj[k];
+        });
+    } else {
+        // 舊格式
+        const seroMap = {'A':['donor-A-1','donor-A-2'],'B':['donor-B-1','donor-B-2'],
+                         'Cw':['donor-Cw-1','donor-Cw-2'],'DR':['donor-DR-1','donor-DR-2'],
+                         'DQ':['donor-DQ-1','donor-DQ-2'],'DP':['donor-DP-1','donor-DP-2']};
+        const dnaMap = {'A*':['donor-dna-A-1','donor-dna-A-2'],'B*':['donor-dna-B-1','donor-dna-B-2'],
+                        'C*':['donor-dna-C-1','donor-dna-C-2'],'DRB1*':['donor-dna-DRB1-1','donor-dna-DRB1-2'],
+                        'DQB1*':['donor-dna-DQB1-1','donor-dna-DQB1-2'],'DQA1*':['donor-dna-DQA1-1','donor-dna-DQA1-2'],
+                        'DPB1*':['donor-dna-DPB1-1','donor-dna-DPB1-2'],'DPA1*':['donor-dna-DPA1-1','donor-dna-DPA1-2']};
+        Object.keys(obj).forEach(k => {
+            const vals = String(obj[k]).split(',').map(v => v.trim());
+            const ids = seroMap[k] || dnaMap[k];
+            if (ids) vals.forEach((v, i) => { if (ids[i] && v) document.getElementById(ids[i]).value = v; });
+        });
+    }
+}
+window.addEventListener('DOMContentLoaded', function() {
+    const saved = {{ donor_hla | default("", true) | tojson }};
+    if (saved) {
+        try {
+            _loadDonorObj(JSON.parse(saved));
+            setTimeout(dsaCheck, 300);
+        } catch(e) {}
+    }
+});
+function loadDonorHla(chartNo) {
+    if (!chartNo || !chartNo.trim()) return;
+    fetch('/get_donor_hla/' + chartNo.trim())
+        .then(r => r.json())
+        .then(data => {
+            if (!data.donor_hla) return;
+            try { _loadDonorObj(JSON.parse(data.donor_hla)); } catch(e) {}
+        })
+        .catch(() => {});
+}
+// Accumulate files across multiple drops/selects
+let collectedFiles = [];
+function updateFileList() {
+    const fl = document.getElementById('fileList');
+    if (collectedFiles.length === 0) {
+        fl.style.display = 'none';
+        document.getElementById('dropIcon').style.display = '';
+        document.getElementById('analyzeBtn').disabled = true;
+        return;
+    }
+    fl.innerHTML = collectedFiles.map((f,i) =>
+        '<span>&#128196; ' + f.name +
+        ' <a href="#" style="color:#dc3545;text-decoration:none;" onclick="removeFile('+i+');return false;">&times;</a></span>'
+    ).join('<br>');
+    fl.style.display = 'block';
+    document.getElementById('dropIcon').style.display = 'none';
+    document.getElementById('analyzeBtn').disabled = false;
+}
+function addFiles(fileList) {
+    for (const f of fileList) {
+        // avoid duplicates
+        if (!collectedFiles.some(x => x.name === f.name && x.size === f.size)) {
+            collectedFiles.push(f);
+        }
+    }
+    updateFileList();
+}
+function removeFile(idx) {
+    collectedFiles.splice(idx, 1);
+    updateFileList();
+}
+function submitWithDelay() {
+    if (collectedFiles.length === 0) return;
+    // Build a new DataTransfer to set on the file input
+    const dt = new DataTransfer();
+    collectedFiles.forEach(f => dt.items.add(f));
+    document.getElementById('fileInput').files = dt.files;
+    document.getElementById('uploadingMsg').style.display = 'block';
+    document.getElementById('analyzeBtn').disabled = true;
+    setTimeout(() => document.getElementById('uploadForm').submit(), 100);
+}
+function onFileSelected(input) {
+    if (input.files.length > 0) addFiles(input.files);
+    // Reset so same file can be added again if needed
+    input.value = '';
+}
+const dz = document.getElementById('dropZone');
+if (dz) {
+    ['dragenter','dragover'].forEach(e => dz.addEventListener(e, ev => { ev.preventDefault(); dz.classList.add('dragover'); }));
+    ['dragleave','drop'].forEach(e => dz.addEventListener(e, ev => { ev.preventDefault(); dz.classList.remove('dragover'); }));
+    dz.addEventListener('drop', ev => {
+        addFiles(ev.dataTransfer.files);
+    });
+}
+function dsaCheck() {
+    // Save donor HLA to DB
+    const chartNo = document.getElementById('patientId') ? document.getElementById('patientId').value.trim() : '';
+    if (chartNo) {
+        const obj = {};
+        document.querySelectorAll('.donor-hla').forEach(el => {
+            if (el.value.trim()) obj[el.id] = el.value.trim();
+        });
+        fetch('/save_donor_hla', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ chart_no: chartNo, donor_hla: JSON.stringify(obj) })
+        });
+    }
+    // Build donor HLA set from inputs
+    const donorSet = new Set();
+    // Serology
+    ['A','B','Cw','DR','DQ','DP'].forEach(locus => {
+        [1,2].forEach(n => {
+            const el = document.getElementById('donor-' + locus + '-' + n);
+            if (el && el.value.trim()) donorSet.add(locus + el.value.trim());
+        });
+    });
+    // DNA Typing
+    ['A','B','C','DRB1','DQB1','DQA1','DPB1','DPA1'].forEach(locus => {
+        [1,2].forEach(n => {
+            const el = document.getElementById('donor-dna-' + locus + '-' + n);
+            if (el && el.value.trim()) donorSet.add(locus + '*' + el.value.trim());
+        });
+    });
+    if (donorSet.size === 0) return;
+    // Helper: check if text contains any donor antigen
+    function hasDonorMatch(text) {
+        for (const ag of donorSet) {
+            if (text.includes(ag)) return true;
+        }
+        return false;
+    }
+    // Highlight matching specificities in report cards — change matching span colors to red
+    document.querySelectorAll('[id^="spec-"]').forEach(specEl => {
+        specEl.querySelectorAll('span').forEach(span => {
+            const txt = span.textContent;
+            for (const ag of donorSet) {
+                if (txt.includes(ag)) {
+                    span.style.color = '#dc3545';
+                    span.style.fontWeight = 'bold';
+                    break;
+                }
+            }
+        });
+        // Also check bare text (parentheses, etc.)
+        specEl.childNodes.forEach(node => {
+            if (node.nodeType === 3) { // text node
+                const txt = node.textContent;
+                for (const ag of donorSet) {
+                    if (txt.includes(ag)) {
+                        const span = document.createElement('span');
+                        span.style.color = '#dc3545';
+                        span.style.fontWeight = 'bold';
+                        span.textContent = txt;
+                        node.replaceWith(span);
+                        break;
+                    }
+                }
+            }
+        });
+    });
+    // Highlight only matching allele tokens (not whole row)
+    function highlightTokens(cell) {
+        if (!cell) return;
+        const text = cell.textContent;
+        const tokens = text.split(/,\s*/);
+        const parts = tokens.map(tok => {
+            const t = tok.trim();
+            if (!t) return tok;
+            for (const ag of donorSet) {
+                if (t.includes(ag)) {
+                    return '<span style="color:#dc3545;font-weight:bold;">' + tok + '</span>';
+                }
+            }
+            return tok;
+        });
+        cell.innerHTML = parts.join(', ');
+    }
+    // Antibody Strength table → highlight tokens in Allele column (index 1)
+    document.querySelectorAll('.mfi-table tbody tr').forEach(tr => {
+        highlightTokens(tr.cells[1]);
+    });
+    // Bead Detail table → highlight tokens in Molecular column (index 8)
+    document.querySelectorAll('.bead-table tbody tr').forEach(tr => {
+        highlightTokens(tr.cells[8]);
+    });
+    const btn = document.querySelector('[onclick="dsaCheck()"]');
+    if (btn) {
+        btn.classList.remove('btn-outline-danger');
+        btn.classList.add('btn-danger');
+        btn.textContent = '已存檔';
+    }
+}
+function toggleEditNew(idx, btn) {
+    const specEl = document.getElementById('spec-' + idx);
+    const commentEl = document.getElementById('comment-' + idx);
+    if (btn.textContent === 'Edit') {
+        specEl.contentEditable = 'true';
+        commentEl.contentEditable = 'true';
+        specEl.style.border = '1px dashed #0d6efd';
+        specEl.style.background = '#f8f9ff';
+        commentEl.style.border = '1px dashed #0d6efd';
+        commentEl.style.background = '#f8f9ff';
+        btn.textContent = 'Save';
+        btn.className = 'btn btn-sm btn-success';
+        specEl.focus();
+    } else {
+        specEl.contentEditable = 'false';
+        commentEl.contentEditable = 'false';
+        specEl.style.border = '1px solid transparent';
+        specEl.style.background = '';
+        commentEl.style.border = '1px solid transparent';
+        commentEl.style.background = '';
+        btn.textContent = 'Edit';
+        btn.className = 'btn btn-sm btn-outline-primary';
+    }
+}
+function copyReport(id) {
+    const el = document.getElementById(id);
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const sel = window.getSelection();
+    sel.removeAllRanges(); sel.addRange(range);
+    document.execCommand('copy');
+    sel.removeAllRanges();
+    const btn = el.parentElement.querySelector('button');
+    const orig = btn.textContent;
+    btn.textContent = 'Copied!';
+    btn.classList.replace('btn-outline-secondary','btn-success');
+    setTimeout(() => { btn.textContent = orig; btn.classList.replace('btn-success','btn-outline-secondary'); }, 1500);
+}
+let _saveTimers = {};
+function autoSave(key, value) {
+    clearTimeout(_saveTimers[key]);
+    _saveTimers[key] = setTimeout(() => localStorage.setItem(key, value), 500);
+}
+window.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[id^="spec-"], [id^="comment-"]').forEach(el => {
+        const key = el.getAttribute('oninput');
+        if (!key) return;
+        const m = key.match(/autoSave\('([^']+)'/);
+        if (!m) return;
+        const saved = localStorage.getItem(m[1]);
+        if (saved) el.innerText = saved;
+    });
+});
+function saveToDb(isSubmit) {
+    const name = document.getElementById('patientName').value.trim();
+    const chartNo = document.getElementById('patientId').value.trim();
+    if (!name) { alert('請輸入病患姓名'); return; }
+    if (!chartNo) { alert('請輸入病歷號'); return; }
+    const reports = [];
+    {% if result_pra1 %}
+    {% for pt in result_pra1.patients %}
+    reports.push({
+        report_date: '{{ result_pra1.date }}',
+        pra_class: 'PRA Class I',
+        pra_percent: {{ pt.pra }},
+        overall: '{{ pt.overall }}',
+        specificity: document.getElementById('spec-p1_{{ loop.index }}').innerText.trim(),
+        comment: document.getElementById('comment-p1_{{ loop.index }}').innerText.trim(),
+        sero_mfi: {{ pt.sero_mfi | tojson }},
+        upload_file: '{{ pt._upload_file | default("", true) }}'
+    });
+    {% endfor %}
+    {% endif %}
+    {% if result_pra2 %}
+    {% for pt in result_pra2.patients %}
+    reports.push({
+        report_date: '{{ result_pra2.date }}',
+        pra_class: 'PRA Class II',
+        pra_percent: {{ pt.pra }},
+        overall: '{{ pt.overall }}',
+        specificity: document.getElementById('spec-p2_{{ loop.index }}').innerText.trim(),
+        comment: document.getElementById('comment-p2_{{ loop.index }}').innerText.trim(),
+        sero_mfi: {{ pt.sero_mfi | tojson }},
+        upload_file: '{{ pt._upload_file | default("", true) }}'
+    });
+    {% endfor %}
+    {% endif %}
+    const btn = isSubmit ? document.getElementById('submitBtn') : document.getElementById('saveBtn');
+    btn.disabled = true;
+    document.getElementById('saveStatus').textContent = isSubmit ? 'Submitting...' : 'Saving...';
+    function postSave(mode) {
+        return fetch('/save', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ patient_name: name, chart_no: chartNo, reports: reports, submitted: !!isSubmit, mode: mode })
+        }).then(r => r.json());
+    }
+    function handleResp(d) {
+        if (d.duplicate) {
+            const list = d.duplicate.map(x => `${x.pra_class} (${x.report_date})`).join('、');
+            const msg = `此病患已有相同日期的紀錄：${list}\n請輸入選項：\n  1 = 覆寫（取代舊紀錄）\n  2 = 新增（另存一筆）\n  3 = 放棄`;
+            return askChoice(msg).then(choice => {
+                if (choice === '1') {
+                    return postSave('overwrite').then(handleResp);
+                } else if (choice === '2') {
+                    return postSave('new').then(handleResp);
+                } else {
+                    document.getElementById('saveStatus').textContent = '已取消';
+                    btn.disabled = false;
+                    return;
+                }
+            });
+        }
+        if (d.ok) {
+            const msg = isSubmit ? '已送出' : '已暫存';
+            document.getElementById('saveStatus').innerHTML =
+                msg + ' <a href="/history/' + chartNo + '">查看紀錄</a>';
+            btn.textContent = msg;
+        } else {
+            document.getElementById('saveStatus').textContent = 'Error: ' + (d.error || 'unknown');
+            btn.disabled = false;
+        }
+    }
+    postSave('auto').then(handleResp).catch(e => {
+        document.getElementById('saveStatus').textContent = 'Error: ' + e;
+        btn.disabled = false;
+    });
+}
+function submitReport() {
+    if (!confirm('確定送出表單？')) return;
+    saveToDb(true);
+}
+function exportDocx() {
+    const patients = [];
+    {% if result_pra1 %}
+    {% for pt in result_pra1.patients %}
+    patients.push({
+        name: '{{ pt.name }}', overall: '{{ pt.overall }}', pra: {{ pt.pra }},
+        class_label: 'PRA Class I',
+        specificity: document.getElementById('spec-p1_{{ loop.index }}').innerText.trim() || '{{ "(-)" if pt.overall == "Negative" else "" }}'
+    });
+    {% endfor %}
+    {% endif %}
+    {% if result_pra2 %}
+    {% for pt in result_pra2.patients %}
+    patients.push({
+        name: '{{ pt.name }}', overall: '{{ pt.overall }}', pra: {{ pt.pra }},
+        class_label: 'PRA Class II',
+        specificity: document.getElementById('spec-p2_{{ loop.index }}').innerText.trim() || '{{ "(-)" if pt.overall == "Negative" else "" }}'
+    });
+    {% endfor %}
+    {% endif %}
+    fetch('/export_docx', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({
+            class_label: 'PRA',
+            date: '{{ result_pra1.date if result_pra1 else (result_pra2.date if result_pra2 else "") }}',
+            patients: patients
+        })
+    }).then(r => r.blob()).then(blob => {
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'PRA_report.docx';
+        a.click();
+    });
+}
+</script>
+</body>
+</html>

templates//login.html ADDED Viewed

	@@ -0,0 +1,63 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>腎臟移植免疫分析</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<style>
+body {
+    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
+    display: flex; align-items: center; justify-content: center; min-height: 100vh;
+    font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif;
+}
+.login-card {
+    width: 420px; background: #fff; border-radius: 16px;
+    box-shadow: 0 8px 40px rgba(0,0,0,.2); padding: 2.5rem;
+    animation: fadeIn .5s ease;
+}
+@keyframes fadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
+.login-title { text-align: center; margin-bottom: 1.8rem; }
+.login-title h3 { color: #1e293b; font-weight: 700; margin-bottom: .2rem; }
+.login-title .subtitle { color: #64748b; font-size: .85rem; letter-spacing: 1px; }
+.form-control { border-radius: 8px; padding: .6rem .9rem; }
+.form-control:focus { box-shadow: 0 0 0 3px rgba(2,132,199,.15); border-color: #0284c7; }
+.btn-login {
+    background: linear-gradient(135deg, #0284c7, #0ea5e9);
+    border: none; border-radius: 8px; padding: .6rem; font-size: 1rem; font-weight: 600;
+    transition: all .2s;
+}
+.btn-login:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(2,132,199,.4); }
+</style>
+</head>
+<body>
+<div class="login-card">
+    <div class="login-title">
+        <div class="subtitle">台北榮民總醫院腎臟科</div>
+        <h3>腎臟移植免疫分析</h3>
+    </div>
+    {% if error %}
+    <div class="alert alert-danger py-2 small">{{ error }}</div>
+    {% endif %}
+    {% if success %}
+    <div class="alert alert-success py-2 small">{{ success }}</div>
+    {% endif %}
+    <form method="post" action="/login">
+        <div class="mb-3">
+            <label class="form-label small fw-bold">帳號</label>
+            <input type="text" class="form-control" name="username" autofocus required placeholder="Email 或帳號">
+        </div>
+        <div class="mb-3">
+            <label class="form-label small fw-bold">密碼</label>
+            <input type="password" class="form-control" name="password" required placeholder="輸入密碼">
+        </div>
+        <button type="submit" class="btn btn-login btn-primary w-100">登入</button>
+        <div class="text-center mt-3">
+            <a href="/register" class="small text-decoration-none" style="color:#0284c7;">註冊新帳號</a>
+        </div>
+    </form>
+</div>
+</body>
+</html>

templates//patient.html ADDED Viewed

	@@ -0,0 +1,486 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{ patient.patient_name }} - PRA History</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+<style>
+.chart-container { position: relative; height: 400px; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 1rem; margin-bottom: 1.5rem; }
+.ab-table { font-size: .82rem; }
+.mfi-up { color: #dc3545; }
+.mfi-down { color: #198754; }
+.mfi-new { color: #0d6efd; font-weight: bold; }
+.mfi-gone { color: #adb5bd; text-decoration: line-through; }
+</style>
+</head>
+<body>
+<div class="container py-4" style="max-width: 1200px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <h2 class="mb-0">{{ patient.patient_name }}
+                <span class="text-muted fs-5">({{ patient.chart_no }})</span>
+            </h2>
+        </div>
+        <div>
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/history" class="btn btn-outline-secondary btn-sm me-1">歷史紀錄</a>
+            <a href="/analysis?chart_no={{ patient.chart_no }}" class="btn btn-outline-success btn-sm me-1">Analyze</a>
+            <a href="/new" class="btn btn-outline-primary btn-sm">新增資料</a>
+        </div>
+    </div>
+    <!-- ============ Donor HLA ============ -->
+    <div class="card mb-3">
+        <div class="card-header fw-bold">Donor HLA</div>
+        <div class="card-body" style="font-size:.85rem;">
+            <style>.donor-hla { width: 80px !important; padding: 2px 4px !important; text-align: center; }</style>
+            <div class="row">
+                <div class="col-md-5">
+                    <div class="fw-bold mb-1">Serology</div>
+                    <table class="table table-sm table-bordered mb-1"><tbody>
+                    <tr><td class="fw-bold">A</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-A-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DR</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DR-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">B</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-B-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQ</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DQ-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">Cw</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-Cw-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DP</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-DP-2" oninput="highlightDSA()"></td></tr>
+                    </tbody></table>
+                </div>
+                <div class="col-md-7">
+                    <div class="fw-bold mb-1">DNA Typing</div>
+                    <table class="table table-sm table-bordered mb-1"><tbody>
+                    <tr><td class="fw-bold">A*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-A-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DRB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DRB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">B*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-B-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td class="fw-bold">C*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-C-2" oninput="highlightDSA()"></td>
+                        <td class="fw-bold">DQA1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DQA1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td></td><td></td><td></td>
+                        <td class="fw-bold">DPB1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPB1-2" oninput="highlightDSA()"></td></tr>
+                    <tr><td></td><td></td><td></td>
+                        <td class="fw-bold">DPA1*</td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-1" oninput="highlightDSA()"></td>
+                        <td><input type="text" class="form-control form-control-sm donor-hla" id="donor-dna-DPA1-2" oninput="highlightDSA()"></td></tr>
+                    </tbody></table>
+                </div>
+            </div>
+            <div class="text-end">
+                <button class="btn btn-sm btn-outline-danger" onclick="saveDonorHLA(this)">存檔</button>
+            </div>
+        </div>
+    </div>
+    <script>
+    function getDonorSet() {
+        const s = new Set();
+        ['A','B','Cw','DR','DQ','DP'].forEach(l => {
+            [1,2].forEach(n => {
+                const el = document.getElementById('donor-' + l + '-' + n);
+                if (el && el.value.trim()) s.add(l + el.value.trim());
+            });
+        });
+        ['A','B','C','DRB1','DQB1','DQA1','DPB1','DPA1'].forEach(l => {
+            [1,2].forEach(n => {
+                const el = document.getElementById('donor-dna-' + l + '-' + n);
+                if (el && el.value.trim()) s.add(l + '*' + el.value.trim());
+            });
+        });
+        return s;
+    }
+    function highlightTokensInCell(cell, donorSet) {
+        if (!cell) return;
+        const text = cell.dataset.orig || cell.textContent;
+        cell.dataset.orig = text;
+        const tokens = text.split(/,\s*/);
+        cell.innerHTML = tokens.map(tok => {
+            const t = tok.trim();
+            if (!t) return tok;
+            for (const ag of donorSet) {
+                if (t.includes(ag)) {
+                    return '<span style="color:#dc3545;font-weight:bold;">' + tok + '</span>';
+                }
+            }
+            return tok;
+        }).join(', ');
+    }
+    function highlightSpecText(specEl, donorSet) {
+        if (!specEl) return;
+        const orig = specEl.dataset.orig || specEl.textContent;
+        specEl.dataset.orig = orig;
+        // 抓 token: 優先 "sero(allele list)" 整段（括號內含空白也視為單一 token），其次裸字
+        const tokens = orig.match(/\S+?\([^)]*\)|\S+/g) || [];
+        specEl.innerHTML = tokens.map(seg => {
+            const m = seg.match(/^([^(]+)(\([^)]*\))?$/);
+            if (!m) return seg;
+            const sero = m[1];
+            const paren = m[2] || '';
+            let isDSA = false;
+            for (const ag of donorSet) {
+                if (!ag) continue;
+                if (sero === ag || (paren && paren.indexOf(ag) >= 0)) { isDSA = true; break; }
+            }
+            if (isDSA) {
+                return '<span style="color:#dc3545;font-weight:bold;">' + seg + '</span>';
+            }
+            const seroHtml = '<span style="color:#1E40AF;font-weight:bold;">' + sero + '</span>';
+            if (!paren) return seroHtml;
+            const inner = paren.slice(1, -1);
+            const alleleHtml = inner.split(/\s+/).map(a =>
+                a ? '<span style="color:#374151;">' + a + '</span>' : a
+            ).join(' ');
+            return seroHtml + '(' + alleleHtml + ')';
+        }).join(' ');
+    }
+    function highlightDSA() {
+        const ds = getDonorSet();
+        // Specificity in Report Output cards + Reports Timeline
+        document.querySelectorAll('[id^="spec-"]').forEach(el => highlightSpecText(el, ds));
+        document.querySelectorAll('.spec-cell').forEach(el => highlightSpecText(el, ds));
+        // Antigen (idx 0) + Allele (idx 1) columns in Antibody Strength tables
+        document.querySelectorAll('.ab-table tbody tr').forEach(tr => {
+            highlightTokensInCell(tr.cells[0], ds);
+            highlightTokensInCell(tr.cells[1], ds);
+        });
+    }
+    function saveDonorHLA(btn) {
+        const obj = {};
+        document.querySelectorAll('.donor-hla').forEach(el => {
+            if (el.value.trim()) obj[el.id] = el.value.trim();
+        });
+        btn.disabled = true;
+        fetch('/save_donor_hla', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ chart_no: '{{ patient.chart_no }}', donor_hla: JSON.stringify(obj) })
+        }).then(r => r.json()).then(d => {
+            btn.disabled = false;
+            if (d.ok) {
+                btn.classList.remove('btn-outline-danger');
+                btn.classList.add('btn-danger');
+                btn.textContent = '已存檔';
+            }
+        });
+        highlightDSA();
+    }
+    window.addEventListener('DOMContentLoaded', function() {
+        const saved = {{ donor_hla | default('', true) | tojson }};
+        if (saved) {
+            try {
+                const obj = JSON.parse(saved);
+                Object.keys(obj).forEach(k => {
+                    const el = document.getElementById(k);
+                    if (el) el.value = obj[k];
+                });
+            } catch(e) {}
+        }
+        highlightDSA();
+    });
+    </script>
+    <!-- ============ Reports Timeline ============ -->
+    <h5>Reports</h5>
+    <table class="table table-bordered table-sm bg-white mb-4" style="font-size:.9rem;">
+        <thead class="table-light">
+            <tr><th>Date</th><th>Class</th><th>PRA%</th><th>Overall</th><th>Specificity</th><th>Comment</th></tr>
+        </thead>
+        <tbody>
+        {% for r in reports %}
+        <tr>
+            <td>{{ r.report_date }}</td>
+            <td>{{ r.pra_class }}</td>
+            <td class="fw-bold">{{ r.pra_percent }}%</td>
+            <td><span class="badge {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">{{ r.overall }}</span></td>
+            <td class="small spec-cell" style="max-width:300px;">{{ r.specificity or '(-)' }}</td>
+            <td class="small">{{ r.comment or '' }}</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+    <!-- ============ Report Output (copy-paste) ============ -->
+    <div id="reportOutput" class="mb-4">
+        {% for r in reports %}
+        <div class="card mb-2">
+            <div class="card-body p-3">
+                <div class="d-flex justify-content-between align-items-center mb-2">
+                    <strong>{{ r.pra_class }} — {{ r.report_date }}</strong>
+                    <div>
+                        <button class="btn btn-sm btn-outline-secondary me-1" onclick="copyReport('rpt-{{ loop.index }}')">Copy</button>
+                        <button class="btn btn-sm btn-outline-primary" id="editbtn-{{ loop.index }}" onclick="toggleEdit({{ r.id }}, {{ loop.index }}, this)">Edit</button>
+                    </div>
+                </div>
+                <div id="rpt-{{ loop.index }}" style="font-family:'Calibri','Segoe UI',sans-serif; line-height:1.8;">
+<div>{{ r.pra_class }}</div>
+<div>Overall: {{ r.overall }}</div>
+<div>%SA (or %PRA): {{ r.pra_percent }}</div>
+<div>Specificity:</div>
+<div id="spec-{{ loop.index }}" style="border:1px solid transparent; border-radius:4px; padding:3px 6px; min-height:1.8rem;">{{ r.specificity or '(-)' }}</div>
+<div>COMMENT:</div>
+<div id="comment-{{ loop.index }}" style="border:1px solid transparent; border-radius:4px; padding:3px 6px; min-height:1.5rem;">{{ r.comment or '' }}</div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    <script>
+    function toggleEdit(reportId, idx, btn) {
+        const specEl = document.getElementById('spec-' + idx);
+        const commentEl = document.getElementById('comment-' + idx);
+        if (btn.textContent === 'Edit') {
+            // 進入編輯模式
+            specEl.contentEditable = 'true';
+            commentEl.contentEditable = 'true';
+            specEl.style.border = '1px dashed #0d6efd';
+            specEl.style.background = '#f8f9ff';
+            commentEl.style.border = '1px dashed #0d6efd';
+            commentEl.style.background = '#f8f9ff';
+            btn.textContent = 'Save';
+            btn.className = 'btn btn-sm btn-success';
+            specEl.focus();
+        } else {
+            // 儲存
+            const spec = specEl.innerText.trim();
+            const comment = commentEl.innerText.trim();
+            btn.disabled = true;
+            btn.textContent = 'Saving...';
+            fetch('/update_report', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ report_id: reportId, specificity: spec, comment: comment })
+            })
+            .then(r => r.json())
+            .then(d => {
+                if (d.ok) {
+                    specEl.contentEditable = 'false';
+                    commentEl.contentEditable = 'false';
+                    specEl.style.border = '1px solid transparent';
+                    specEl.style.background = '';
+                    commentEl.style.border = '1px solid transparent';
+                    commentEl.style.background = '';
+                    btn.textContent = 'Edit';
+                    btn.className = 'btn btn-sm btn-outline-primary';
+                    btn.disabled = false;
+                } else {
+                    alert('儲存失敗: ' + (d.error || ''));
+                    btn.textContent = 'Save'; btn.disabled = false;
+                }
+            })
+            .catch(e => { alert('Error: ' + e); btn.textContent = 'Save'; btn.disabled = false; });
+        }
+    }
+    function copyReport(id) {
+        const el = document.getElementById(id);
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        const sel = window.getSelection();
+        sel.removeAllRanges(); sel.addRange(range);
+        document.execCommand('copy');
+        sel.removeAllRanges();
+        const btn = el.parentElement.querySelector('button');
+        const orig = btn.textContent;
+        btn.textContent = 'Copied!';
+        btn.classList.replace('btn-outline-secondary','btn-success');
+        setTimeout(() => { btn.textContent = orig; btn.classList.replace('btn-success','btn-outline-secondary'); }, 1500);
+    }
+    </script>
+    <!-- ============ MFI Trend Charts ============ -->
+    {% for comp_label, comp_id, comp_dates, comp_antigens, comp_pra in [
+        ('PRA Class I', 'chart1', comparison_class1.dates if comparison_class1 else [],
+         comparison_class1.antigens if comparison_class1 else [],
+         comparison_class1.pra_by_date if comparison_class1 else {}),
+        ('PRA Class II', 'chart2', comparison_class2.dates if comparison_class2 else [],
+         comparison_class2.antigens if comparison_class2 else [],
+         comparison_class2.pra_by_date if comparison_class2 else {})
+    ] %}
+    {% if comp_dates and comp_dates | length >= 2 %}
+    <h5>{{ comp_label }} &mdash; MFI Trend</h5>
+    <div class="mb-2">
+        <small class="text-muted">Top antibodies by Max MFI (click legend to show/hide)</small>
+        <select id="filter-{{ comp_id }}" class="form-select form-select-sm d-inline-block ms-2" style="width:auto;"
+                onchange="updateChart('{{ comp_id }}')">
+            <option value="10">Top 10</option>
+            <option value="20" selected>Top 20</option>
+            <option value="all">All</option>
+        </select>
+    </div>
+    <div class="chart-container">
+        <canvas id="{{ comp_id }}"></canvas>
+    </div>
+    <script>
+    (function() {
+        const dates = {{ comp_dates | tojson }};
+        const allData = [
+        {% for ag in comp_antigens %}
+            {
+                antigen: '{{ ag.antigen }}',
+                allele: '{{ ag.allele }}',
+                values: [{% for d in comp_dates %}{{ ag.mfi_by_date.get(d, {}).get('max_mfi', 'null') }}{% if not loop.last %},{% endif %}{% endfor %}]
+            },
+        {% endfor %}
+        ];
+        // Color palette by locus
+        function getColor(ag, i) {
+            const colors_a = ['#e53935','#d81b60','#8e24aa','#5e35b1','#3949ab','#1e88e5','#ef5350','#ec407a'];
+            const colors_b = ['#00897b','#43a047','#7cb342','#c0ca33','#26a69a','#66bb6a','#9ccc65','#d4e157','#2e7d32','#558b2f'];
+            const colors_c = ['#ff8f00','#ff6f00','#f57f17','#ffb300','#ffa000','#ff8f00'];
+            if (ag.startsWith('A') || ag.startsWith('DR')) return colors_a[i % colors_a.length];
+            if (ag.startsWith('B') || ag.startsWith('DQ')) return colors_b[i % colors_b.length];
+            return colors_c[i % colors_c.length];
+        }
+        // Sort by max MFI descending
+        allData.sort((a, b) => {
+            const maxA = Math.max(...a.values.filter(v => v !== null));
+            const maxB = Math.max(...b.values.filter(v => v !== null));
+            return maxB - maxA;
+        });
+        let chartInstance = null;
+        window['allData_{{ comp_id }}'] = allData;
+        window['dates_{{ comp_id }}'] = dates;
+        function buildChart(limit) {
+            const data = limit === 'all' ? allData : allData.slice(0, parseInt(limit));
+            const datasets = data.map((ag, i) => ({
+                label: ag.antigen + (ag.allele && ag.allele !== ag.antigen ? ' (' + ag.allele + ')' : ''),
+                antigen: ag.antigen,
+                allele: ag.allele,
+                data: ag.values,
+                borderColor: getColor(ag.antigen, i),
+                backgroundColor: getColor(ag.antigen, i) + '33',
+                borderWidth: 2,
+                pointRadius: 4,
+                pointHoverRadius: 6,
+                tension: 0.3,
+                spanGaps: true,
+            }));
+            if (chartInstance) chartInstance.destroy();
+            chartInstance = new Chart(document.getElementById('{{ comp_id }}'), {
+                type: 'line',
+                data: { labels: dates, datasets: datasets },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    interaction: { mode: 'nearest', intersect: false },
+                    plugins: {
+                        legend: {
+                            position: 'right',
+                            labels: { font: { size: 11 }, boxWidth: 12, padding: 6 }
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function(ctx) {
+                                    return ctx.dataset.label + ': ' + (ctx.parsed.y !== null ? ctx.parsed.y.toLocaleString() : '-');
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            title: { display: true, text: 'Max MFI (Normal)' },
+                            beginAtZero: true,
+                        },
+                        x: {
+                            title: { display: true, text: 'Report Date' }
+                        }
+                    }
+                }
+            });
+        }
+        window['updateChart'] = window['updateChart'] || function(id) {
+            const sel = document.getElementById('filter-' + id);
+            buildChart(sel.value);
+        };
+        // Specific update for this chart
+        const origUpdate = window['updateChart'];
+        window['updateChart'] = function(id) {
+            if (id === '{{ comp_id }}') {
+                const sel = document.getElementById('filter-' + id);
+                buildChart(sel.value);
+            } else if (origUpdate) origUpdate(id);
+        };
+        buildChart(20);
+    })();
+    </script>
+    {% endif %}
+    {% endfor %}
+    <!-- ============ Individual Report Details ============ -->
+    <h5>Antibody Strength</h5>
+    {% for r in reports %}
+    {% if r.antibodies %}
+    <div class="card mb-3">
+        <div class="card-header">
+            <strong>{{ r.pra_class }}</strong> &mdash; {{ r.report_date }}
+            <span class="badge ms-1 {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">{{ r.overall }}</span>
+            <span class="fw-bold ms-1">PRA {{ r.pra_percent }}%</span>
+        </div>
+        <div class="card-body p-2">
+            <table class="table table-sm table-bordered ab-table mb-0">
+                <thead class="table-light"><tr>
+                    <th>Antigen</th><th>Allele</th><th class="text-end">Max MFI</th>
+                    <th class="text-end">Mean MFI</th><th class="text-center">No of Beads</th><th>Bead IDs</th>
+                </tr></thead>
+                <tbody>
+                {% for a in r.antibodies %}
+                <tr>
+                    <td class="fw-bold">{{ a.antigen }}</td>
+                    <td class="small">{{ a.allele }}</td>
+                    <td class="text-end">{{ a.max_mfi|int }}</td>
+                    <td class="text-end">{{ a.mean_mfi|int }}</td>
+                    <td class="text-center">{{ a.no_of_beads }}</td>
+                    <td class="small text-muted">{{ a.bead_ids }}</td>
+                </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% endif %}
+    {% endfor %}
+</div>
+</body>
+</html>

templates//register.html ADDED Viewed

	@@ -0,0 +1,50 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>PRA Analysis - 註冊</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<style>
+body { background: #f5f7fa; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+.login-card { width: 400px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.1); padding: 2.5rem; }
+.login-title { text-align: center; margin-bottom: 1.5rem; }
+</style>
+</head>
+<body>
+<div class="login-card">
+    <div class="login-title">
+        <h2>註冊帳號</h2>
+        <p class="text-muted small">PRA Analysis System</p>
+    </div>
+    {% if error %}
+    <div class="alert alert-danger py-2 small">{{ error }}</div>
+    {% endif %}
+    <form method="post" action="/register">
+        <div class="mb-3">
+            <label class="form-label small">姓名</label>
+            <input type="text" class="form-control" name="display_name" required>
+        </div>
+        <div class="mb-3">
+            <label class="form-label small">帳號（Email 或自訂）</label>
+            <input type="text" class="form-control" name="username" required>
+        </div>
+        <div class="mb-3">
+            <label class="form-label small">密碼</label>
+            <input type="password" class="form-control" name="password" required minlength="4">
+            <div class="form-text text-danger fw-bold">請勿使用常用密碼<br>（管理員看的到你的密碼 可以用簡單的123456等）</div>
+        </div>
+        <div class="mb-3">
+            <label class="form-label small">確認密碼</label>
+            <input type="password" class="form-control" name="password2" required>
+        </div>
+        <button type="submit" class="btn btn-primary w-100">註冊</button>
+        <div class="text-center mt-3">
+            <a href="/login" class="small">已有帳號？登入</a>
+        </div>
+    </form>
+</div>
+</body>
+</html>