131 lines
7.9 KiB
HTML
131 lines
7.9 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;">{{ "%.6f"|format(inv.shares|float)|replace('000000','').rstrip('0').rstrip('.') }}</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>
|
||
|
||
<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 %}
|