Wheeler DITM calc: expiry dropdown, table overflow fix, full Position Costs

src/css/styles.css

@@ -356,18 +356,20 @@ tr.lot-child.la-sol:hover > td{background:rgba(153,69,255,.08)}
 .merge-preview .mp-lbl{color:var(--mu2)}.merge-preview .mp-val{color:var(--text);font-weight:600}
 /* DITM call calculator */
 .dc-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
-.dc-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
+.dc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
+.dc-tiles:empty{display:none}
+.dc-costs-hd{grid-column:1/-1;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--mu);font-family:var(--mono)}
 .dc-tile{background:var(--s2);border:1px solid var(--bd2);border-radius:8px;padding:10px 12px}
-.dc-tile .k{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--mu);font-family:var(--mono)}
+.dc-tile .k{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--mu);font-family:var(--mono)}
 .dc-tile .v{font-size:1rem;font-weight:700;margin-top:4px;font-family:var(--mono)}
-.dc-matrix{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.74rem}
-.dc-matrix th{text-align:right;padding:6px 8px;color:var(--mu);font-weight:600;font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--bd2)}
-.dc-matrix th:first-child{text-align:left}
-.dc-matrix td{text-align:right;padding:5px 8px;border-bottom:1px solid var(--bd)}
-.dc-matrix td:first-child{text-align:left;font-weight:600}
+.dc-matrix{width:100%;table-layout:fixed;border-collapse:collapse;font-family:var(--mono);font-size:.72rem}
+.dc-matrix th{text-align:right;padding:5px 6px;color:var(--mu);font-weight:600;font-size:.6rem;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--bd2)}
+.dc-matrix td{text-align:right;padding:4px 6px;border-bottom:1px solid var(--bd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.dc-matrix th:first-child,.dc-matrix td:first-child{text-align:left;font-weight:600;width:12%}
+.dc-matrix th:last-child,.dc-matrix td:last-child{text-align:left;width:24%;white-space:normal}
 .dc-matrix tr.dc-special td{background:var(--s2)}
-.dc-matrix .dc-lbl{color:var(--mu2);font-size:.66rem;text-align:left}
-@media(max-width:600px){.dc-inputs,.dc-tiles{grid-template-columns:1fr 1fr}}
+.dc-matrix .dc-lbl{color:var(--mu2);font-size:.64rem}
+@media(max-width:600px){.dc-inputs{grid-template-columns:1fr 1fr}.dc-tiles{grid-template-columns:1fr 1fr}}
 .merge-preview .mp-val.green{color:var(--green)}.merge-preview .mp-val.orange{color:var(--orange)}
 
 

src/html/modals.html

@@ -39,7 +39,7 @@ <h3 style="font-size:.95rem">DITM Call vs 100 Shares</h3>
       <div class="field"><label>Stock Price</label><input id="dc-price" type="number" step="0.01" min="0" placeholder="107.09" oninput="ditmRecalc()"></div>
       <div class="field"><label>Strike</label><input id="dc-strike" type="number" step="0.01" min="0" placeholder="75" oninput="ditmRecalc()"></div>
       <div class="field"><label>Premium /sh</label><input id="dc-prem" type="number" step="0.01" min="0" placeholder="40.50" oninput="ditmRecalc()"></div>
-      <div class="field"><label>Expiration</label><input id="dc-expiry" type="date" oninput="ditmRecalc()"></div>
+      <div class="field"><label>Expiration</label><select id="dc-expiry" onchange="ditmRecalc()"></select></div>
     </div>
     <div id="dc-tiles" class="dc-tiles"></div>
     <div id="dc-matrix"></div>

src/js/tradfi/20-ditm-calc.js

@@ -4,6 +4,8 @@
 // ditm_call_tracker.xlsx. Pure scratchpad — nothing is saved to trades.
 
 function openDitmCalc() {
+  const sel = document.getElementById('dc-expiry');
+  if (sel && !sel.options.length) sel.innerHTML = ditmExpiryOptions();
   document.getElementById('ditm-overlay').classList.add('open');
   ditmRecalc();
 }
@@ -12,6 +14,26 @@ function closeDitmCalc() {
   document.getElementById('ditm-overlay').classList.remove('open');
 }
 
+// Build the expiry dropdown: the standard monthly option expiry (3rd Friday)
+// for the next 36 months, so LEAPS-style horizons are one click away.
+function ditmExpiryOptions() {
+  const mon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  const now = new Date();
+  const out = ['<option value="">— pick expiry —</option>'];
+  for (let i = 0; i < 36; i++) {
+    const m = now.getMonth() + i;
+    const y = now.getFullYear() + Math.floor(m / 12);
+    const mm = ((m % 12) + 12) % 12;
+    const firstDow = new Date(y, mm, 1).getDay();          // 0=Sun … 6=Sat
+    const thirdFri = 1 + ((5 - firstDow + 7) % 7) + 14;    // 3rd Friday of month
+    const d = new Date(y, mm, thirdFri);
+    if (d <= now) continue;                                // skip this month if already past
+    const iso = y + '-' + String(mm + 1).padStart(2, '0') + '-' + String(thirdFri).padStart(2, '0');
+    out.push('<option value="' + iso + '">' + mon[mm] + ' ' + y + '</option>');
+  }
+  return out.join('');
+}
+
 // Auto-generate a sorted, deduped set of price levels: total loss (0),
 // current price (stock breakeven), strike, option breakeven, plus a spread
 // of ± moves around the current price.
@@ -55,9 +77,13 @@ function ditmRecalc() {
     + (color ? ' style="color:' + color + '"' : '') + '>' + v + '</div></div>';
 
   tiles.innerHTML =
-    tile('Option Breakeven', '$' + fmt(optBe), 'var(--green)')
-    + tile('Debit / Max Loss', '−$' + fmt(debit), 'var(--red)')
+    '<div class="dc-costs-hd">Position Costs</div>'
     + tile('Cost of 100 Shares', '$' + fmt(shares100))
+    + tile('Cost of 1 Call (Debit)', '$' + fmt(debit))
+    + tile('Stock Breakeven', '$' + fmt(price))
+    + tile('Option Breakeven', '$' + fmt(optBe), 'var(--green)')
+    + tile('Max Loss — Stock', '−$' + fmt(shares100), 'var(--red)')
+    + tile('Max Loss — Call', '−$' + fmt(debit), 'var(--red)')
     + tile('Days to Expiry', dte == null ? '—' : dte);
 
   // Special-level labels keyed by rounded price.