mirror of
https://github.com/wahyd4/links.git
synced 2026-08-08 21:04:53 +10:00
Update invest UI
This commit is contained in:
@@ -16,59 +16,59 @@
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-3">
|
||||
|
||||
<!-- Total value -->
|
||||
<div class="bg-white rounded-lg p-5 shadow-sm">
|
||||
<div class="bg-white rounded-lg p-4 sm:p-5 shadow-sm">
|
||||
<p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">Total Value</p>
|
||||
{% if overview.this_week_total is not None %}
|
||||
<p class="text-3xl font-bold text-stone-900">${{ overview.this_week_total|floatformat:0 }}</p>
|
||||
<p class="text-2xl sm:text-3xl font-bold text-stone-900">${{ overview.this_week_total|floatformat:0 }}</p>
|
||||
{% else %}
|
||||
<p class="text-3xl font-bold text-stone-400">—</p>
|
||||
<p class="text-2xl sm:text-3xl font-bold text-stone-400">—</p>
|
||||
{% endif %}
|
||||
<p class="text-sm text-stone-400 mt-1">
|
||||
<p class="text-xs sm:text-sm text-stone-400 mt-1">
|
||||
Across {{ overview.portfolio_count }} portfolio{{ overview.portfolio_count|pluralize }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- This week's gain -->
|
||||
<div class="bg-white rounded-lg p-5 shadow-sm">
|
||||
<div class="bg-white rounded-lg p-4 sm:p-5 shadow-sm">
|
||||
<p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">This Week</p>
|
||||
{% if overview.week_gain is not None %}
|
||||
<p class="text-3xl font-bold {% if overview.week_gain >= 0 %}text-green-800{% else %}text-red-700{% endif %}">
|
||||
<p class="text-2xl sm:text-3xl font-bold {% if overview.week_gain >= 0 %}text-green-800{% else %}text-red-700{% endif %}">
|
||||
{% if overview.week_gain >= 0 %}+{% endif %}${{ overview.week_gain|floatformat:0 }}
|
||||
</p>
|
||||
<p class="text-sm text-stone-400 mt-1">
|
||||
<p class="text-xs sm:text-sm text-stone-400 mt-1">
|
||||
{% if overview.week_gain >= 0 %}+{% endif %}{{ overview.week_change_pct|floatformat:2 }}% vs last week
|
||||
</p>
|
||||
{% else %}
|
||||
<p class="text-3xl font-bold text-stone-400">—</p>
|
||||
<p class="text-sm text-stone-400 mt-1">No prior snapshot</p>
|
||||
<p class="text-2xl sm:text-3xl font-bold text-stone-400">—</p>
|
||||
<p class="text-xs sm:text-sm text-stone-400 mt-1">No prior snapshot</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Week change % -->
|
||||
<div class="bg-white rounded-lg p-5 shadow-sm">
|
||||
<div class="bg-white rounded-lg p-4 sm:p-5 shadow-sm">
|
||||
<p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">Week Change</p>
|
||||
{% if overview.week_change_pct is not None %}
|
||||
<p class="text-3xl font-bold {% if overview.week_change_pct >= 0 %}text-green-800{% else %}text-red-700{% endif %}">
|
||||
<p class="text-2xl sm:text-3xl font-bold {% if overview.week_change_pct >= 0 %}text-green-800{% else %}text-red-700{% endif %}">
|
||||
{% if overview.week_change_pct >= 0 %}+{% endif %}{{ overview.week_change_pct|floatformat:2 }}%
|
||||
</p>
|
||||
{% if overview.last_week_date %}
|
||||
<p class="text-sm text-stone-400 mt-1">Last: {{ overview.last_week_date|date:"M j" }}</p>
|
||||
<p class="text-xs sm:text-sm text-stone-400 mt-1">Last: {{ overview.last_week_date|date:"M j" }}</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p class="text-3xl font-bold text-stone-400">—</p>
|
||||
<p class="text-sm text-stone-400 mt-1">Need 2+ snapshots</p>
|
||||
<p class="text-2xl sm:text-3xl font-bold text-stone-400">—</p>
|
||||
<p class="text-xs sm:text-sm text-stone-400 mt-1">Need 2+ snapshots</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Last snapshot date -->
|
||||
<div class="bg-white rounded-lg p-5 shadow-sm">
|
||||
<div class="bg-white rounded-lg p-4 sm:p-5 shadow-sm">
|
||||
<p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">Last Snapshot</p>
|
||||
{% if overview.this_week_date %}
|
||||
<p class="text-3xl font-bold text-stone-900">{{ overview.this_week_date|date:"M j" }}</p>
|
||||
<p class="text-sm text-stone-400 mt-1">{{ overview.this_week_date|date:"l, Y" }}</p>
|
||||
<p class="text-2xl sm:text-3xl font-bold text-stone-900">{{ overview.this_week_date|date:"M j" }}</p>
|
||||
<p class="text-xs sm:text-sm text-stone-400 mt-1">{{ overview.this_week_date|date:"l, Y" }}</p>
|
||||
{% else %}
|
||||
<p class="text-3xl font-bold text-stone-400">—</p>
|
||||
<p class="text-sm text-stone-400 mt-1">No snapshots yet</p>
|
||||
<p class="text-2xl sm:text-3xl font-bold text-stone-400">—</p>
|
||||
<p class="text-xs sm:text-sm text-stone-400 mt-1">No snapshots yet</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<p class="text-xs font-semibold tracking-widest text-stone-500 uppercase mb-4">
|
||||
Performance vs Benchmarks
|
||||
</p>
|
||||
<canvas id="performanceChart" height="90"></canvas>
|
||||
<canvas id="performanceChart"></canvas>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -120,29 +120,30 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- Holdings table -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-xs font-semibold tracking-widest text-stone-400 uppercase border-b border-stone-100">
|
||||
<th class="px-6 py-3 text-left">Ticker</th>
|
||||
<th class="px-6 py-3 text-right">Qty</th>
|
||||
<th class="px-6 py-3 text-right">Price</th>
|
||||
<th class="px-6 py-3 text-right">Week Change</th>
|
||||
<th class="px-6 py-3 text-right">Mkt Value</th>
|
||||
<th class="px-3 sm:px-6 py-3 text-left">Ticker</th>
|
||||
<th class="hidden sm:table-cell px-6 py-3 text-right">Qty</th>
|
||||
<th class="hidden sm:table-cell px-6 py-3 text-right">Price</th>
|
||||
<th class="px-3 sm:px-6 py-3 text-right">Week Change</th>
|
||||
<th class="px-3 sm:px-6 py-3 text-right">Mkt Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for stock in group.holdings %}
|
||||
<tr class="border-b border-stone-50 hover:bg-stone-50 {{ group.colors.row }}">
|
||||
<td class="px-6 py-3 font-medium text-stone-900">
|
||||
<td class="px-3 sm:px-6 py-3 font-medium text-stone-900">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ group.colors.badge }}">
|
||||
{{ stock.stock_code }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-right text-stone-500">{{ stock.quantity|floatformat:0 }}</td>
|
||||
<td class="px-6 py-3 text-right text-stone-500">
|
||||
<td class="hidden sm:table-cell px-6 py-3 text-right text-stone-500">{{ stock.quantity|floatformat:0 }}</td>
|
||||
<td class="hidden sm:table-cell px-6 py-3 text-right text-stone-500">
|
||||
{% if stock.current_price %}${{ stock.current_price|floatformat:2 }}{% else %}<span class="text-stone-300">—</span>{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-3 text-right">
|
||||
<td class="px-3 sm:px-6 py-3 text-right">
|
||||
{% if stock.value_change is not None %}
|
||||
<span class="text-xs font-medium {% if stock.value_change >= 0 %}text-green-700{% else %}text-red-600{% endif %}">
|
||||
{% if stock.value_change >= 0 %}+{% endif %}${{ stock.value_change|floatformat:0 }} ({% if stock.price_change_pct >= 0 %}+{% endif %}{{ stock.price_change_pct|floatformat:1 }}%)
|
||||
@@ -151,13 +152,14 @@
|
||||
<span class="text-stone-300">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-3 text-right font-semibold text-stone-800">
|
||||
<td class="px-3 sm:px-6 py-3 text-right font-semibold text-stone-800">
|
||||
{% if stock.current_value %}${{ stock.current_value|floatformat:0 }}{% else %}<span class="text-stone-300">—</span>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -168,34 +170,36 @@
|
||||
<div class="mt-8">
|
||||
<p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-3">Transaction History</p>
|
||||
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-xs font-semibold tracking-widest text-stone-400 uppercase border-b border-stone-100">
|
||||
<th class="px-6 py-3 text-left">Date</th>
|
||||
<th class="px-6 py-3 text-left">Portfolio</th>
|
||||
<th class="px-6 py-3 text-left">Action</th>
|
||||
<th class="px-6 py-3 text-left">Ticker</th>
|
||||
<th class="px-6 py-3 text-right">Qty</th>
|
||||
<th class="px-3 sm:px-6 py-3 text-left">Date</th>
|
||||
<th class="hidden sm:table-cell px-6 py-3 text-left">Portfolio</th>
|
||||
<th class="px-3 sm:px-6 py-3 text-left">Action</th>
|
||||
<th class="px-3 sm:px-6 py-3 text-left">Ticker</th>
|
||||
<th class="px-3 sm:px-6 py-3 text-right">Qty</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for tx in recent_transactions %}
|
||||
<tr class="border-b border-stone-50 hover:bg-stone-50">
|
||||
<td class="px-6 py-3 text-stone-500 whitespace-nowrap">{{ tx.date|date:"j M Y" }}</td>
|
||||
<td class="px-6 py-3 text-stone-500">{{ tx.portfolio.name }}</td>
|
||||
<td class="px-6 py-3">
|
||||
<td class="px-3 sm:px-6 py-3 text-stone-500 whitespace-nowrap">{{ tx.date|date:"j M Y" }}</td>
|
||||
<td class="hidden sm:table-cell px-6 py-3 text-stone-500">{{ tx.portfolio.name }}</td>
|
||||
<td class="px-3 sm:px-6 py-3">
|
||||
{% if tx.action == 'BUY' %}
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-green-100 text-green-800">BUY</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-red-100 text-red-700">SELL</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-3 font-medium text-stone-900">{{ tx.stock_code }}</td>
|
||||
<td class="px-6 py-3 text-right text-stone-500">{{ tx.quantity|floatformat:0 }}</td>
|
||||
<td class="px-3 sm:px-6 py-3 font-medium text-stone-900">{{ tx.stock_code }}</td>
|
||||
<td class="px-3 sm:px-6 py-3 text-right text-stone-500">{{ tx.quantity|floatformat:0 }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -217,6 +221,7 @@
|
||||
data: raw,
|
||||
options: {
|
||||
responsive: true,
|
||||
aspectRatio: window.innerWidth < 640 ? 1.5 : 3.5,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
plugins: {
|
||||
legend: {
|
||||
|
||||
Reference in New Issue
Block a user