Split Positions from Tracker; add Settings (commission)
Tracker is for symbol price/IV history, not positions. The "Save to Tracker" button now adds the symbol to a watchlist (localStorage); the Tracker page shows the watchlist as clickable chips. New "Enter Position" button on the Strategy page posts the active legs to /api/orders, then opens the new Positions page. New Positions page (positions.html): lists entered positions with live mid value, round-trip commission, gross & net P/L (Net = Gross − round- trip commission), per-symbol filter, summary totals, close/reopen and remove actions. New Settings page (settings.html) configures the commission used on Positions. Defaults to Interactive Brokers Fixed / IBKR Lite: $0.65 per contract, $1.00 minimum per order (https://www.interactivebrokers.com/en/pricing/commissions-options.php). Per-leg vs per-order toggle for complex orders. Sidebar nav now: Dashboard · Options Chain · Vol Surface · Strategy P/L · Positions · Tracker · Settings. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -168,6 +168,17 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="positions.html">
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 4h4v4h-4z"/><path d="M5 12h4v8h-4z"/><path d="M13 4h4v12h-4z"/><path d="M13 18h4v2h-4z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="nav-link-title">Positions</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active-page" href="tracker.html">
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block">
|
||||
@@ -181,6 +192,18 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="settings.html">
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="nav-link-title">Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -255,52 +278,15 @@
|
||||
<div class="page-body">
|
||||
<div class="container-xl">
|
||||
|
||||
<!-- Tracked Orders (persisted strategy positions) -->
|
||||
<div class="card mb-3" x-show="orders.length > 0 || ordersLoading" x-cloak style="background:#161824; border:1px solid #2d3045;">
|
||||
<div class="card-header d-flex align-items-center justify-content-between" style="border-bottom:1px solid #2d3045;">
|
||||
<h3 class="card-title text-white mb-0">
|
||||
Tracked Orders
|
||||
<span class="text-secondary small fw-normal" x-show="symbol">— <span x-text="symbol"></span></span>
|
||||
</h3>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span x-show="ordersLoading" class="spinner-border spinner-border-sm text-secondary"></span>
|
||||
<button class="btn btn-sm btn-outline-secondary" @click="loadOrders()" :disabled="ordersLoading">Refresh</button>
|
||||
<span class="text-secondary small" x-text="orders.length + ' order' + (orders.length===1?'':'s')"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-hover mb-0" style="color:#d0d5e0;">
|
||||
<thead style="background:#1a1c2e;color:#8b95a7;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;">
|
||||
<tr>
|
||||
<th>Strategy</th>
|
||||
<th>Legs</th>
|
||||
<th class="text-end">Entered</th>
|
||||
<th class="text-end">Current</th>
|
||||
<th class="text-end">P/L $</th>
|
||||
<th class="text-end">P/L %</th>
|
||||
<th>Opened</th>
|
||||
<th>Status</th>
|
||||
<th></th><th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="o in orders" :key="o.id">
|
||||
<tr :style="o.status === 'closed' ? 'opacity:.55' : ''" style="font-size:.85rem;">
|
||||
<td><span class="badge bg-purple-lt" x-text="o.name || ('Custom (' + o.legs.length + ' legs)')"></span></td>
|
||||
<td class="text-secondary" style="font-family:'JetBrains Mono',monospace;font-size:.75rem;" x-text="legsSummary(o)"></td>
|
||||
<td class="text-end" style="font-family:'JetBrains Mono',monospace;" x-text="fmtMoney(orderPL(o).entered)"></td>
|
||||
<td class="text-end" style="font-family:'JetBrains Mono',monospace;" x-text="fmtMoney(orderPL(o).value)"></td>
|
||||
<td class="text-end" style="font-family:'JetBrains Mono',monospace;" :class="orderPL(o).pl >= 0 ? 'text-success' : 'text-danger'" x-text="fmtMoney(orderPL(o).pl)"></td>
|
||||
<td class="text-end" style="font-family:'JetBrains Mono',monospace;" :class="orderPL(o).pl >= 0 ? 'text-success' : 'text-danger'" x-text="orderPL(o).plPct.toFixed(1) + '%'"></td>
|
||||
<td class="small text-secondary" x-text="(o.created_at||'').slice(0,10)"></td>
|
||||
<td><span class="badge" :class="o.status === 'open' ? 'bg-success-lt text-success' : 'bg-secondary-lt text-secondary'" x-text="o.status"></span></td>
|
||||
<td><button class="btn btn-sm" :class="o.status === 'open' ? 'btn-outline-warning' : 'btn-outline-success'" @click="toggleCloseOrder(o)" x-text="o.status === 'open' ? 'Close' : 'Reopen'"></button></td>
|
||||
<td><button class="btn btn-sm btn-ghost-danger" @click="removeOrder(o.id)" aria-label="Remove order">✕</button></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Watchlist (symbols saved from Strategy page) -->
|
||||
<div class="mb-3 d-flex align-items-center flex-wrap gap-2" x-show="watchlist.length > 0" x-cloak>
|
||||
<span class="text-secondary small me-1">Watchlist:</span>
|
||||
<template x-for="s in watchlist" :key="s">
|
||||
<span class="badge bg-blue-lt" style="cursor:pointer; padding:.45rem .6rem;">
|
||||
<span @click="loadSymbol(s)" x-text="s" :class="s === symbol.toUpperCase().trim() ? 'fw-bold' : ''"></span>
|
||||
<span class="text-danger ms-1" style="cursor:pointer;" @click="removeWatch(s)" :title="'Remove ' + s + ' from watchlist'">✕</span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
@@ -660,9 +646,7 @@
|
||||
loading: false,
|
||||
error: '',
|
||||
|
||||
orders: [],
|
||||
ordersLoading: false,
|
||||
ordersChain: {}, // "SYMBOL@EXPIRY" -> { "strike@type": option }
|
||||
watchlist: [],
|
||||
|
||||
_charts: { atmIv: null, rr25: null, fly25: null },
|
||||
|
||||
@@ -676,96 +660,24 @@
|
||||
this.snapshots = vs.snapshots ?? [];
|
||||
if (this.snapshots.length) this.$nextTick(() => this.renderCharts());
|
||||
}
|
||||
if (this.symbol) this.loadOrders();
|
||||
this._loadWatchlist();
|
||||
window.addEventListener('storage', (e) => { if (e.key === 'optionsPricer:watchlist') this._loadWatchlist(); });
|
||||
},
|
||||
|
||||
async loadOrders() {
|
||||
if (!this.symbol) return;
|
||||
this.ordersLoading = true;
|
||||
try {
|
||||
const r = await fetch('/api/orders?symbol=' + encodeURIComponent(this.symbol.trim().toUpperCase()));
|
||||
const d = await r.json();
|
||||
this.orders = d.data?.orders || [];
|
||||
// fetch live chains for the unique expiries (one /api/chain call each)
|
||||
const need = new Set();
|
||||
for (const o of this.orders) for (const l of (o.legs||[])) if (l.expiry) need.add(o.symbol + '@' + l.expiry);
|
||||
const cache = { ...this.ordersChain };
|
||||
for (const key of need) {
|
||||
if (cache[key]) continue;
|
||||
const [sym, exp] = key.split('@');
|
||||
try {
|
||||
const cr = await fetch('/api/chain?symbol=' + encodeURIComponent(sym) + '&expiry=' + encodeURIComponent(exp));
|
||||
if (!cr.ok) continue;
|
||||
const ce = await cr.json();
|
||||
const snap = ce.data?.snapshots?.[0];
|
||||
if (!snap) continue;
|
||||
const map = {};
|
||||
for (const o of (snap.chain || [])) {
|
||||
const t = (o.type || o.optionType || '').toLowerCase();
|
||||
map[Number(o.strike) + '@' + t] = o;
|
||||
}
|
||||
cache[key] = map;
|
||||
} catch {}
|
||||
}
|
||||
this.ordersChain = cache;
|
||||
} catch (e) {
|
||||
console.warn('loadOrders failed:', e);
|
||||
} finally {
|
||||
this.ordersLoading = false;
|
||||
}
|
||||
_loadWatchlist() {
|
||||
try { this.watchlist = JSON.parse(localStorage.getItem('optionsPricer:watchlist') || '[]'); }
|
||||
catch { this.watchlist = []; }
|
||||
},
|
||||
|
||||
orderPL(o) {
|
||||
let value = 0, entered = 0;
|
||||
for (const l of (o.legs||[])) {
|
||||
const sign = l.side === 'short' ? -1 : 1;
|
||||
entered += sign * l.qty * 100 * (l.entryPrice || 0);
|
||||
const m = this.ordersChain[o.symbol + '@' + l.expiry];
|
||||
const oo = m && m[Number(l.strike) + '@' + l.type];
|
||||
const mid = oo ? Number(oo.midPrice ?? oo.mid ?? oo.bsPrice ?? 0) : 0;
|
||||
value += sign * l.qty * 100 * mid;
|
||||
}
|
||||
const baseCost = (o.entry_cost != null) ? Number(o.entry_cost) : entered;
|
||||
const pl = value - baseCost;
|
||||
const plPct = Math.abs(baseCost) > 1e-6 ? (pl / Math.abs(baseCost)) * 100 : 0;
|
||||
return { value, entered: baseCost, pl, plPct };
|
||||
loadSymbol(s) {
|
||||
this.symbol = s;
|
||||
this.fetchExpirations();
|
||||
this.loadHistory();
|
||||
},
|
||||
|
||||
async toggleCloseOrder(o) {
|
||||
const newStatus = o.status === 'open' ? 'closed' : 'open';
|
||||
try {
|
||||
const r = await fetch('/api/orders/' + o.id, {
|
||||
method:'PATCH', headers:{'Content-Type':'application/json'},
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
});
|
||||
const d = await r.json();
|
||||
if (d.ok) {
|
||||
const idx = this.orders.findIndex(x => x.id === o.id);
|
||||
if (idx >= 0) this.orders[idx] = d.data;
|
||||
}
|
||||
} catch (e) { /* silent */ }
|
||||
},
|
||||
|
||||
async removeOrder(id) {
|
||||
if (!confirm('Remove this tracked order?')) return;
|
||||
try {
|
||||
await fetch('/api/orders/' + id, { method:'DELETE' });
|
||||
this.orders = this.orders.filter(o => o.id !== id);
|
||||
} catch {}
|
||||
},
|
||||
|
||||
legsSummary(o) {
|
||||
return (o.legs||[]).map(l =>
|
||||
(l.side === 'long' ? '+' : '-') + l.qty +
|
||||
' ' + l.strike + (l.type === 'call' ? 'C' : 'P') +
|
||||
'·' + (l.expiry || '').slice(5)
|
||||
).join(' / ');
|
||||
},
|
||||
|
||||
fmtMoney(v) {
|
||||
if (v == null || !isFinite(v)) return '—';
|
||||
const a = Math.abs(v), sign = v < 0 ? '-' : '';
|
||||
return sign + '$' + a.toLocaleString('en-US', { maximumFractionDigits: a < 100 ? 2 : 0 });
|
||||
removeWatch(s) {
|
||||
this.watchlist = this.watchlist.filter(x => x !== s);
|
||||
try { localStorage.setItem('optionsPricer:watchlist', JSON.stringify(this.watchlist)); } catch {}
|
||||
},
|
||||
|
||||
_persist() {
|
||||
@@ -812,7 +724,6 @@
|
||||
}
|
||||
this._persist();
|
||||
this.$nextTick(() => this.renderCharts());
|
||||
this.loadOrders();
|
||||
} catch (e) {
|
||||
this.error = e.message;
|
||||
this.snapshots = [];
|
||||
|
||||
Reference in New Issue
Block a user