# Banking Transaction Detail Screen

Condensed layout recipe for replicating the dark-mode banking transaction detail screen (KBC Mobile style).

## Visual Structure

```
┌─────────────────────────┐
│ ○ (notch)               │  <- top-bar with centered notch div
├─────────────────────────┤
│ [icon] Merchant Name      │  <- header: icon-box + header-text
│        Subtitle line 1    │
│        Subtitle line 2    │
├─────────────────────────┤
│                         │
│    -3,00 EUR            │  <- amount: large centered text
│                         │
├─────────────────────────┤
│ [icon] Category      ›  │  <- list rows with chevrons
│        Mobility           │
│ [icon] Split the bill  ›│
│ [icon] Save PDF        ›│
│ [icon] Report problem  ›│
├─────────────────────────┤
│ More details              │  <- section title
├─────────────────────────┤
│ Transaction date          │  <- detail-group: label + value
│ 3 August 2026             │
├─────────────────────────┤
│ Value date                │
│ 3 August 2026             │
├─────────────────────────┤
│ Money transfer            │  <- label above gray box
│ ┌─────────────────────┐ │
│ │ Merchant name       │ │  <- detail-box (dark gray)
│ │ Payment method      │ │
│ │ Card type           │ │
│ │ Date: 03-08-2026... │ │  <- labeled rows inside box
│ │ Debit card: 5127... │ │
│ │ Virtual card: 5354..│ │
│ └─────────────────────┘ │
├─────────────────────────┤
│ Cardholder                │
│ STOCKMANS SAGE            │
└─────────────────────────┘
```

## CSS Values

```css
/* Page */
body {
  background: #121212;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-top: max(28px, env(safe-area-inset-top, 28px));
}

/* Amount */
.amount h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  text-align: center;
}

/* Gray detail box */
.detail-box {
  background: #1e1e1e;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Labels inside gray box */
.box-label {
  color: #fff;
  font-weight: 600;
}

/* List rows with chevrons */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #222;
}

/* Detail groups (label + value pairs) */
.detail-group {
  margin-bottom: 20px;
}
.detail-group .label {
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
}
.detail-group .value {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}
```

## Dynamic Date/Time Pattern

Replace static dates with this IIFE pattern so dates update on page refresh:

```html
<div class="value" id="tx-date">Loading...</div>
...
<script>
(function() {
  const now = new Date();
  const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  
  // "3 August 2026"
  const txDateStr = now.getDate() + ' ' + months[now.getMonth()] + ' ' + now.getFullYear();
  document.getElementById('tx-date').textContent = txDateStr;
  
  // "03-08-2026 at 14.32 time" (14 minutes ago)
  const txTime = new Date(now.getTime() - 14 * 60 * 1000);
  const pad = (n) => String(n).padStart(2, '0');
  const timeStr = pad(txTime.getDate()) + '-' + pad(txTime.getMonth()+1) + '-' + txTime.getFullYear() 
                  + ' at ' + pad(txTime.getHours()) + '.' + pad(txTime.getMinutes()) + ' time';
  document.getElementById('tx-time').textContent = timeStr;
  
  // "Friday 03 August, DL PP1X0L20\nPayment with Apple Pay"
  const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  const headerSub = weekdays[now.getDay()] + ' ' + now.getDate() + ' ' + months[now.getMonth()] 
                    + ', DL PP1X0L20<br>Payment with Apple Pay';
  document.getElementById('header-sub').innerHTML = headerSub;
})();
</script>
```

## Key HTML Structure

```html
<div class="container">
  <div class="top-bar"><div class="notch"></div></div>
  
  <div class="header">
    <div class="icon-box">...SVG...</div>
    <div class="header-text">
      <h1>Merchant Name</h1>
      <p id="header-sub">Loading...</p>
    </div>
  </div>
  
  <div class="amount"><h2>-3,00 EUR</h2></div>
  
  <!-- List rows (category, split bill, etc.) -->
  <div class="list">...</div>
  
  <h3 class="section-title">More details</h3>
  
  <!-- Transaction date, Value date -->
  <div class="detail-group">...</div>
  
  <!-- Money transfer gray box -->
  <div class="detail-group"><div class="label">Money transfer</div></div>
  <div class="detail-box">
    <p class="line">Merchant info</p>
    <p class="line"><span class="box-label">Date:</span> <span id="tx-time">...</span></p>
    <p class="line"><span class="box-label">Debit card:</span> XXXX...</p>
    <p><span class="box-label">Virtual card:</span> XXXX...</p>
  </div>
  
  <!-- Cardholder -->
  <div class="detail-group">...</div>
</div>
```

## Privacy Checklist

When replicating from screenshots:
- [ ] Replace real names with placeholders (e.g., "STOCKMANS SAGE")
- [ ] Replace real account numbers (e.g., "BE87 7350 7028 7194")
- [ ] Replace real card numbers (e.g., "5127 88XX XXXX 6152")
- [ ] Replace real balances with dummy amounts
- [ ] Replace real IBANs/BICs with test data