245 lines
13 KiB
HTML
245 lines
13 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}{{ inv.asset_name }}{% endblock %}
|
||
{% block page_title %}{{ inv.asset_name }}{% endblock %}
|
||
|
||
{% block topbar_actions %}
|
||
<a href="{{ url_for('investments.add_transaction', id=inv.id) }}" class="btn btn-sm btn-primary" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i>Add Transaction</a>
|
||
<a href="{{ url_for('investments.edit', id=inv.id) }}" class="btn btn-sm btn-outline-secondary ms-1" style="font-size:12px;"><i class="bi bi-pencil me-1"></i>Edit</a>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- Holding summary -->
|
||
<div class="row g-3 mb-4">
|
||
<div class="col-12 col-md-5">
|
||
<div class="pcard h-100" style="border-left:4px solid {{ asset_colors.get(inv.asset_type,'#94a3b8') }};">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<div>
|
||
<div style="font-size:18px;font-weight:700;">{{ inv.asset_name }}</div>
|
||
<div style="font-size:12px;color:var(--muted);">
|
||
{% if inv.ticker %}<span class="mono">{{ inv.ticker }}</span> · {% endif %}
|
||
<span style="background:{{ asset_colors.get(inv.asset_type,'#94a3b8') }}22;color:{{ asset_colors.get(inv.asset_type,'#94a3b8') }};padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;">
|
||
{{ asset_labels.get(inv.asset_type, inv.asset_type) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<form method="POST" action="{{ url_for('investments.delete', id=inv.id) }}" onsubmit="return confirm('Remove this holding?')">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
<button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;">Remove</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="row g-2 mt-1">
|
||
<div class="col-6">
|
||
<div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Shares</div>
|
||
<div class="mono" style="font-size:16px;font-weight:600;">{{ inv.shares | shares }}</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Avg Cost</div>
|
||
<div class="mono" style="font-size:16px;font-weight:600;">{{ inv.avg_cost_basis | currency }}</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Current Price</div>
|
||
<div class="mono" style="font-size:16px;font-weight:600;">
|
||
{% if inv.current_price %}{{ inv.current_price | currency }}
|
||
{% else %}<span class="text-muted">—</span>{% endif %}
|
||
</div>
|
||
{% if inv.last_price_update %}
|
||
<div style="font-size:10px;color:var(--muted);">{{ inv.last_price_update.strftime('%b %d, %H:%M') }}</div>
|
||
{% endif %}
|
||
</div>
|
||
<div class="col-6">
|
||
<div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Market Value</div>
|
||
<div class="mono text-invest" style="font-size:16px;font-weight:600;">{{ inv.current_value | currency }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr style="border-color:var(--border);">
|
||
<div class="d-flex justify-content-between">
|
||
<div>
|
||
<div style="font-size:11px;color:var(--muted);">Total Cost Basis</div>
|
||
<div class="mono" style="font-size:14px;">{{ inv.total_cost | currency }}</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div style="font-size:11px;color:var(--muted);">Unrealized P&L</div>
|
||
<div class="mono {% if inv.unrealized_gain >= 0 %}text-income{% else %}text-expense{% endif %}" style="font-size:14px;font-weight:600;">
|
||
{% if inv.unrealized_gain >= 0 %}+{% endif %}{{ inv.unrealized_gain | currency }}
|
||
<span style="font-size:11px;">({% if inv.unrealized_gain_pct >= 0 %}+{% endif %}{{ inv.unrealized_gain_pct }}%)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% if inv.notes %}
|
||
<div style="font-size:12px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--border);">{{ inv.notes }}</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
{% if inv.ticker %}
|
||
<div class="col-12">
|
||
<div class="pcard">
|
||
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
|
||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||
<span class="pcard-title mb-0">Price History — <span class="mono">{{ inv.ticker }}</span></span>
|
||
<span id="detail-chg" class="chg-badge chg-flat" style="display:none;"></span>
|
||
</div>
|
||
<div class="d-flex gap-1 flex-wrap">
|
||
{% for tf in ['1W','1M','3M','6M','1Y'] %}
|
||
<button class="tf-btn{% if tf == '1M' %} active{% endif %}"
|
||
onclick="loadDetailChart('{{ tf }}')" id="tf-{{ tf }}">{{ tf }}</button>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div style="font-size:12px;color:var(--muted);margin-bottom:8px;" id="detail-info">Loading…</div>
|
||
<div style="position:relative;height:200px;">
|
||
<canvas id="detailCanvas"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="col-12 col-md-7">
|
||
<div class="pcard p-0 h-100">
|
||
<div class="d-flex justify-content-between align-items-center px-4 py-3" style="border-bottom:1px solid var(--border);">
|
||
<span class="pcard-title mb-0">Transaction History</span>
|
||
<a href="{{ url_for('investments.add_transaction', id=inv.id) }}" class="btn btn-sm btn-outline-primary" style="font-size:11px;padding:2px 8px;"><i class="bi bi-plus-lg"></i></a>
|
||
</div>
|
||
{% if txns %}
|
||
<table class="pfm-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="padding-left:20px;">Date</th>
|
||
<th>Type</th>
|
||
<th class="text-end">Shares</th>
|
||
<th class="text-end">Price</th>
|
||
<th class="text-end">Total</th>
|
||
<th class="text-end" style="padding-right:20px;"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for txn in txns %}
|
||
<tr>
|
||
<td style="padding-left:20px;font-size:12px;color:var(--muted);white-space:nowrap;">{{ txn.date.strftime('%b %d, %Y') }}</td>
|
||
<td>
|
||
<span class="badge" style="font-size:11px;{% if txn.transaction_type == 'buy' %}background:#d1fae5;color:#065f46;{% elif txn.transaction_type == 'sell' %}background:#fee2e2;color:#991b1b;{% elif txn.transaction_type == 'dividend' %}background:#dbeafe;color:#1e40af;{% else %}background:#f3e8ff;color:#6b21a8;{% endif %}">
|
||
{{ txn.transaction_type | title }}
|
||
</span>
|
||
</td>
|
||
<td class="text-end mono" style="font-size:12px;">{{ txn.shares }}</td>
|
||
<td class="text-end mono" style="font-size:12px;">{{ txn.price_per_share | currency }}</td>
|
||
<td class="text-end mono {% if txn.transaction_type == 'buy' %}text-expense{% else %}text-income{% endif %}" style="font-size:12px;font-weight:500;">
|
||
{{ txn.total_amount | currency }}
|
||
</td>
|
||
<td class="text-end" style="padding-right:20px;">
|
||
<form method="POST" action="{{ url_for('investments.delete_transaction', id=txn.id) }}" onsubmit="return confirm('Delete this transaction?')">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
<button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;padding:2px 6px;">×</button>
|
||
</form>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
{% else %}
|
||
<div class="text-center py-5">
|
||
<p class="text-muted small mb-2">No transactions yet.</p>
|
||
<a href="{{ url_for('investments.add_transaction', id=inv.id) }}" class="btn btn-sm btn-primary">Record First Buy</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="{{ url_for('investments.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Back to Portfolio</a>
|
||
{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
.tf-btn { font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;border:1px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;transition:all .15s; }
|
||
.tf-btn:hover { border-color:var(--accent);color:var(--accent); }
|
||
.tf-btn.active { background:var(--accent);color:#fff;border-color:var(--accent); }
|
||
.chg-badge { display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;font-family:'DM Mono',monospace;padding:2px 7px;border-radius:4px; }
|
||
.chg-up { background:#d1fae5;color:#065f46; }
|
||
.chg-down { background:#fee2e2;color:#991b1b; }
|
||
.chg-flat { background:#f1f5f9;color:#64748b; }
|
||
{% endblock %}
|
||
|
||
{% if inv.ticker %}
|
||
{% block extra_js %}
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
|
||
<script>
|
||
const sym = '{{ current_user.currency_symbol }}';
|
||
const ticker = '{{ inv.ticker }}';
|
||
let chartInst = null;
|
||
|
||
function fmtP(v) {
|
||
const n = parseFloat(v);
|
||
return sym + Math.abs(n).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:4});
|
||
}
|
||
function fmtChg(c, p) {
|
||
const s = c >= 0 ? '+' : '';
|
||
return `${s}${fmtP(c)} (${s}${parseFloat(p).toFixed(2)}%)`;
|
||
}
|
||
function chgCls(v) { return v > 0 ? 'chg-up' : v < 0 ? 'chg-down' : 'chg-flat'; }
|
||
|
||
function loadDetailChart(tf) {
|
||
// Update active button
|
||
document.querySelectorAll('.tf-btn').forEach(b =>
|
||
b.classList.toggle('active', b.id === 'tf-' + tf));
|
||
|
||
const infoEl = document.getElementById('detail-info');
|
||
infoEl.textContent = 'Loading…';
|
||
|
||
fetch(`{{ url_for('investments.api_price_history', ticker='__T__') }}`.replace('__T__', ticker) + '?tf=' + tf)
|
||
.then(r => r.ok ? r.json() : Promise.reject())
|
||
.then(data => {
|
||
infoEl.innerHTML =
|
||
`Current: <strong>${fmtP(data.current)}</strong> · ` +
|
||
`${({'1W':'1 Week','1M':'1 Month','3M':'3 Months','6M':'6 Months','1Y':'1 Year'}[tf]||tf)}: ` +
|
||
`<strong class="${data.period_change >= 0 ? 'text-income' : 'text-expense'}">${fmtChg(data.period_change, data.period_change_pct)}</strong>`;
|
||
|
||
const chgEl = document.getElementById('detail-chg');
|
||
chgEl.className = 'chg-badge ' + chgCls(data.period_change);
|
||
chgEl.innerHTML = `<i class="bi bi-${data.period_change >= 0 ? 'arrow-up' : 'arrow-down'}-short"></i>${fmtChg(data.period_change, data.period_change_pct)}`;
|
||
chgEl.style.display = '';
|
||
|
||
const lineColor = data.period_change >= 0 ? '#10b981' : '#ef4444';
|
||
const ctx = document.getElementById('detailCanvas').getContext('2d');
|
||
if (chartInst) chartInst.destroy();
|
||
chartInst = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: data.dates,
|
||
datasets: [{
|
||
data: data.closes,
|
||
borderColor: lineColor,
|
||
backgroundColor: lineColor + '18',
|
||
borderWidth: 2,
|
||
pointRadius: data.closes.length > 60 ? 0 : 2,
|
||
pointHoverRadius: 4,
|
||
tension: 0.3,
|
||
fill: true,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true, maintainAspectRatio: false,
|
||
interaction: { mode: 'index', intersect: false },
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: c => ' ' + fmtP(c.parsed.y) } }
|
||
},
|
||
scales: {
|
||
x: { grid: { display: false }, ticks: { font: { size: 10 }, maxTicksLimit: 8, maxRotation: 0 } },
|
||
y: { position: 'right', grid: { color: '#f1f5f9' },
|
||
ticks: { font: { size: 10 }, callback: v => sym + parseFloat(v).toLocaleString(undefined, {minimumFractionDigits: 2}) } }
|
||
}
|
||
}
|
||
});
|
||
})
|
||
.catch(() => { infoEl.textContent = 'Price data unavailable.'; });
|
||
}
|
||
|
||
// Load 1M chart on page load
|
||
loadDetailChart('1M');
|
||
</script>
|
||
{% endblock %}
|
||
{% endif %}
|