Admin settings as accordions; cashier mode tab for top-up/withdrawal

- Replace flat settings form with 6 collapsible accordion sections
  (General, Business Address, Branding, Transactions, Receipt Labels,
  Receipt Footers), each with its own Save button and feedback message
- Add segmented mode-tab control to cashier form so staff pick
  Top Up or Withdrawal before entering amounts; withdrawal panel
  hidden by default, resets to Top Up on cancel/clear
- Add toggleAcc(), setCashierMode() JS helpers
- Add accordion + mode-tab CSS styles

https://claude.ai/code/session_01JuRTR5Xjx8emQsyerBgGU7

static/app.js

@@ -141,7 +141,6 @@ async function startApp() {
   document.getElementById('registerForm').addEventListener('submit', e => { e.preventDefault(); registerMember(); });
   document.getElementById('editForm').addEventListener('submit', e => { e.preventDefault(); saveEdit(); });
   document.getElementById('editAccountForm').addEventListener('submit', e => { e.preventDefault(); saveEditAccount(); });
-  document.getElementById('settingsForm').addEventListener('submit', e => { e.preventDefault(); saveSettings(); });
   document.getElementById('addAccountForm').addEventListener('submit', e => { e.preventDefault(); addAccount(); });
 
   // Enter-key on search inputs
@@ -367,6 +366,7 @@ function selectCashierMember(id, name, number, balance, balanceDisplay) {
 
 function clearCashierSelection() {
   cashierMember = null;
+  setCashierMode('topup');
   document.getElementById('cashierForm').classList.add('hidden');
   document.getElementById('cashierAmount').value        = '';
   document.getElementById('cashierTransferType').value  = '';
@@ -602,7 +602,24 @@ async function loadAdminSettings() {
 function _sv(id) { return document.getElementById(id).value; }
 function _svt(id) { return _sv(id).trim(); }
 
-async function saveSettings() {
+function toggleAcc(btn) {
+  const body    = btn.closest('.acc-item').querySelector('.acc-body');
+  const chevron = btn.querySelector('.acc-chevron');
+  const opening = body.classList.contains('hidden');
+  body.classList.toggle('hidden');
+  btn.setAttribute('aria-expanded', opening);
+  if (chevron) chevron.style.transform = opening ? 'rotate(180deg)' : '';
+}
+
+function setCashierMode(mode) {
+  document.querySelectorAll('.mode-tab').forEach(t =>
+    t.classList.toggle('active', t.dataset.mode === mode));
+  document.getElementById('topupPanel').classList.toggle('hidden',     mode !== 'topup');
+  document.getElementById('withdrawalPanel').classList.toggle('hidden', mode !== 'withdrawal');
+}
+
+async function saveSettings(msgId) {
+  const _msgId = msgId || 'settingsMsg';
   const div = parseInt(_sv('s-currency-divisor'), 10) || 100;
   const body = {
     // General
@@ -661,13 +678,13 @@ async function saveSettings() {
       method: 'POST', headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body)
     });
-    setMsg('settingsMsg', 'Settings saved.', 'ok');
+    setMsg(_msgId, 'Saved.', 'ok');
     await loadConfig();
     populateTransferTypes();
     document.querySelectorAll('.currency-unit').forEach(el => { el.textContent = cfg.currency_major || cfg.currency_unit; });
     if (document.getElementById('navBrand'))
       document.getElementById('navBrand').textContent = cfg.club_name;
-  } catch (err) { setMsg('settingsMsg', err.message, 'err'); }
+  } catch (err) { setMsg(_msgId, err.message, 'err'); }
 }
 
 // Staff accounts table

static/index.html

@@ -161,9 +161,12 @@
 
     <div id="cashierForm" class="hidden">
       <div class="selected-member-box" id="cashierSelected"></div>
+      <div class="mode-tabs">
+        <button class="mode-tab active" data-mode="topup" type="button" onclick="setCashierMode('topup')">Top Up</button>
+        <button class="mode-tab" data-mode="withdrawal" type="button" onclick="setCashierMode('withdrawal')">Withdrawal</button>
+      </div>
 
-      <div class="cashier-action-panel">
+      <div class="cashier-action-panel" id="topupPanel">
-        <h3>Top Up</h3>
         <div class="form-row">
           <label>Amount (<span class="currency-unit"></span>)</label>
           <input type="number" id="cashierAmount" placeholder="e.g. 10.00" min="0.01" step="0.01">
@@ -186,8 +189,7 @@
         <div id="cashierTopupMsg" class="msg"></div>
       </div>
 
-      <div class="cashier-action-panel">
+      <div class="cashier-action-panel hidden" id="withdrawalPanel">
-        <h3>Withdrawal</h3>
         <div class="form-row">
           <label>Amount (<span class="currency-unit"></span>)</label>
           <input type="number" id="withdrawalAmount" placeholder="e.g. 10.00" min="0.01" step="0.01">
@@ -269,9 +271,15 @@
 
   <div class="panel">
     <h2>App Settings</h2>
-    <form id="settingsForm">
+    <div id="settingsMsg" class="msg" style="margin-bottom:8px"></div>
+    <div class="accordion">
 
-      <h3 class="sub-heading">General</h3>
+      <div class="acc-item">
+        <button class="acc-header" type="button" onclick="toggleAcc(this)" aria-expanded="false">
+          <span>General</span>
+          <span class="material-symbols-outlined acc-chevron">expand_more</span>
+        </button>
+        <div class="acc-body hidden">
           <div class="form-row"><label>Club Name</label>
             <input type="text" id="s-club-name"></div>
           <div class="form-row"><label>Currency Symbol</label>
@@ -310,9 +318,19 @@
               <option value="A5">A5</option>
             </select>
           </div>
+          <div class="acc-footer">
+            <button class="btn btn-primary" type="button" onclick="saveSettings('generalMsg')">Save</button>
+            <div id="generalMsg" class="msg"></div>
+          </div>
+        </div>
+      </div>
 
-      <div class="panel-divider"></div>
+      <div class="acc-item">
-      <h3 class="sub-heading">Business Address</h3>
+        <button class="acc-header" type="button" onclick="toggleAcc(this)" aria-expanded="false">
+          <span>Business Address</span>
+          <span class="material-symbols-outlined acc-chevron">expand_more</span>
+        </button>
+        <div class="acc-body hidden">
           <div class="form-row"><label>Address line 1</label><input type="text" id="s-biz-address1"></div>
           <div class="form-row"><label>Address line 2</label><input type="text" id="s-biz-address2"></div>
           <div class="form-row"><label>Address line 3</label><input type="text" id="s-biz-address3"></div>
@@ -321,9 +339,19 @@
           <div class="form-row"><label>Phone</label><input type="text" id="s-biz-phone"></div>
           <div class="form-row"><label>Email</label><input type="text" id="s-biz-email"></div>
           <div class="form-row"><label>Website</label><input type="text" id="s-biz-website"></div>
+          <div class="acc-footer">
+            <button class="btn btn-primary" type="button" onclick="saveSettings('bizMsg')">Save</button>
+            <div id="bizMsg" class="msg"></div>
+          </div>
+        </div>
+      </div>
 
-      <div class="panel-divider"></div>
+      <div class="acc-item">
-      <h3 class="sub-heading">Branding</h3>
+        <button class="acc-header" type="button" onclick="toggleAcc(this)" aria-expanded="false">
+          <span>Branding</span>
+          <span class="material-symbols-outlined acc-chevron">expand_more</span>
+        </button>
+        <div class="acc-body hidden">
           <div class="form-row">
             <label>Logo <span class="label-hint">(upload image file)</span></label>
             <input type="file" id="s-logo-upload" accept="image/*" style="padding:4px 0;border:none;background:none;">
@@ -349,16 +377,36 @@
             <input type="text" id="s-bar-name" placeholder="Bar"></div>
           <div class="form-row"><label>Cashier venue name</label>
             <input type="text" id="s-cashier-name" placeholder="Cashier"></div>
+          <div class="acc-footer">
+            <button class="btn btn-primary" type="button" onclick="saveSettings('brandingMsg')">Save</button>
+            <div id="brandingMsg" class="msg"></div>
+          </div>
+        </div>
+      </div>
 
-      <div class="panel-divider"></div>
+      <div class="acc-item">
-      <h3 class="sub-heading">Transactions</h3>
+        <button class="acc-header" type="button" onclick="toggleAcc(this)" aria-expanded="false">
+          <span>Transactions</span>
+          <span class="material-symbols-outlined acc-chevron">expand_more</span>
+        </button>
+        <div class="acc-body hidden">
           <div class="form-row"><label>Transaction reference prefix</label>
             <input type="text" id="s-txn-ref-prefix" placeholder="TXN" style="max-width:120px"></div>
           <div class="form-row"><label>Transfer types <span class="label-hint">(comma-separated)</span></label>
             <input type="text" id="s-transfer-types" placeholder="Bank Transfer,Cash,QR"></div>
+          <div class="acc-footer">
+            <button class="btn btn-primary" type="button" onclick="saveSettings('transactionsMsg')">Save</button>
+            <div id="transactionsMsg" class="msg"></div>
+          </div>
+        </div>
+      </div>
 
-      <div class="panel-divider"></div>
+      <div class="acc-item">
-      <h3 class="sub-heading">Receipt Labels <span class="label-hint">(for localisation)</span></h3>
+        <button class="acc-header" type="button" onclick="toggleAcc(this)" aria-expanded="false">
+          <span>Receipt Labels <span class="label-hint">(for localisation)</span></span>
+          <span class="material-symbols-outlined acc-chevron">expand_more</span>
+        </button>
+        <div class="acc-body hidden">
           <div class="form-row"><label>Receipt title (charge)</label><input type="text" id="s-lbl-receipt" placeholder="RECEIPT"></div>
           <div class="form-row"><label>Receipt title (top-up)</label><input type="text" id="s-lbl-topup-receipt" placeholder="TOP-UP RECEIPT"></div>
           <div class="form-row"><label>Receipt title (withdrawal)</label><input type="text" id="s-lbl-withdrawal-receipt" placeholder="WITHDRAWAL RECEIPT"></div>
@@ -373,19 +421,33 @@
           <div class="form-row"><label>Amount withdrawn label</label><input type="text" id="s-lbl-amount-withdrawal" placeholder="AMOUNT WITHDRAWN"></div>
           <div class="form-row"><label>Transfer type label</label><input type="text" id="s-lbl-transfer-type" placeholder="TRANSFER TYPE"></div>
           <div class="form-row"><label>Transfer reference label</label><input type="text" id="s-lbl-transfer-ref" placeholder="TRANSFER REFERENCE"></div>
+          <div class="acc-footer">
+            <button class="btn btn-primary" type="button" onclick="saveSettings('labelsMsg')">Save</button>
+            <div id="labelsMsg" class="msg"></div>
+          </div>
+        </div>
+      </div>
 
-      <div class="panel-divider"></div>
+      <div class="acc-item">
-      <h3 class="sub-heading">Receipt Footers</h3>
+        <button class="acc-header" type="button" onclick="toggleAcc(this)" aria-expanded="false">
+          <span>Receipt Footers</span>
+          <span class="material-symbols-outlined acc-chevron">expand_more</span>
+        </button>
+        <div class="acc-body hidden">
           <div class="form-row"><label>Footer &mdash; all <span class="label-hint">(fallback for all receipts and statement)</span></label>
             <textarea id="s-receipt-footer" rows="2" placeholder="Printed at the bottom of every receipt and statement"></textarea></div>
           <div class="form-row"><label>Footer &mdash; charge receipts <span class="label-hint">(overrides all-footer for bar charges)</span></label>
             <textarea id="s-receipt-footer-charge" rows="2"></textarea></div>
           <div class="form-row"><label>Footer &mdash; cashier receipts <span class="label-hint">(overrides all-footer for top-ups and withdrawals)</span></label>
             <textarea id="s-receipt-footer-cashier" rows="2"></textarea></div>
+          <div class="acc-footer">
+            <button class="btn btn-primary" type="button" onclick="saveSettings('footersMsg')">Save</button>
+            <div id="footersMsg" class="msg"></div>
+          </div>
+        </div>
+      </div>
 
-      <button type="submit" class="btn btn-primary" style="margin-top:8px">Save Settings</button>
+    </div>
-    </form>
-    <div id="settingsMsg" class="msg"></div>
   </div>
 
   <div class="panel">

static/style.css

@@ -712,3 +712,95 @@ select {
     grid-template-columns: 1fr;
   }
 }
+
+/* ---- Accordion (admin settings) ---- */
+.accordion {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.acc-item {
+  border-bottom: 1px solid var(--border);
+}
+
+.acc-item:last-child {
+  border-bottom: none;
+}
+
+.acc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px 16px;
+  background: var(--canvas-subtle);
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: .875rem;
+  font-weight: 600;
+  color: var(--fg);
+  text-align: left;
+  transition: background .1s;
+}
+
+.acc-header:hover { background: var(--border-muted); }
+
+.acc-chevron {
+  font-size: 1.25rem;
+  color: var(--fg-muted);
+  transition: transform .2s;
+  flex-shrink: 0;
+}
+
+.acc-body {
+  padding: 16px;
+  background: var(--canvas);
+}
+
+.acc-footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-top: 12px;
+  margin-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+/* ---- Mode tabs (cashier top-up / withdrawal switch) ---- */
+.mode-tabs {
+  display: flex;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.mode-tab {
+  flex: 1;
+  padding: 8px 16px;
+  background: var(--canvas-subtle);
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: .875rem;
+  font-weight: 500;
+  color: var(--fg-muted);
+  transition: background .1s, color .1s;
+}
+
+.mode-tab + .mode-tab {
+  border-left: 1px solid var(--border);
+}
+
+.mode-tab.active {
+  background: var(--canvas);
+  color: var(--fg);
+  font-weight: 600;
+}
+
+.mode-tab:hover:not(.active) {
+  background: var(--canvas);
+  color: var(--fg);
+}