06/03 Optimize app
This commit is contained in:
@@ -164,16 +164,20 @@
|
||||
#main, #sidebar.collapsed ~ #main { margin-left: 0 !important; padding: 14px; }
|
||||
.pcard { padding: 14px; }
|
||||
.stat-card { padding: 14px 16px; }
|
||||
.stat-card .stat-value { font-size: 20px; }
|
||||
.stat-card .stat-value { font-size: 18px; }
|
||||
/* Tables: scroll horizontally on small screens */
|
||||
.table-wrap, .pcard.p-0 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||||
.pfm-table { min-width: 580px; }
|
||||
/* Remove h-100 height constraint on table wrappers so overflow-x works */
|
||||
.pcard.p-0.h-100 { height: auto !important; }
|
||||
.pfm-table { min-width: 560px; }
|
||||
/* Hide low-priority columns */
|
||||
.d-mob-none { display: none !important; }
|
||||
/* Topbar title: truncate so action buttons always fit */
|
||||
.tb-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
||||
/* Flash: stretch full width */
|
||||
.flash-wrap { left: 8px; right: 8px; max-width: none; }
|
||||
/* Teller/Schwab action rows: stack on very small cards */
|
||||
.pcard .d-flex.gap-2 { flex-wrap: wrap; }
|
||||
}
|
||||
/* Extra-small screens: hide button label text, keep icons */
|
||||
@media (max-width: 575px) {
|
||||
@@ -181,6 +185,7 @@
|
||||
.pcard { padding: 12px; }
|
||||
.btn-label { display: none; }
|
||||
.tb-right .btn { padding-left: 8px; padding-right: 8px; }
|
||||
.stat-card .stat-value { font-size: 16px; }
|
||||
}
|
||||
.sb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1039; }
|
||||
.sb-overlay.on { display: block; }
|
||||
|
||||
@@ -73,6 +73,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-xl-3">
|
||||
<div class="stat-card">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<div class="stat-label">Savings Rate</div>
|
||||
<div class="stat-value {% if savings_rate >= 20 %}text-income{% elif savings_rate > 0 %}text-invest{% else %}text-expense{% endif %}">
|
||||
{% if savings_rate >= 0 %}+{% endif %}{{ savings_rate }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-icon" style="background:{% if savings_rate >= 20 %}#d1fae5;color:#065f46{% elif savings_rate > 0 %}#dbeafe;color:#1e40af{% else %}#fee2e2;color:#991b1b{% endif %};">
|
||||
<i class="bi bi-piggy-bank"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:10px;color:var(--muted);margin-top:4px;">of income saved this period</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-xl-3">
|
||||
<div class="stat-card">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
|
||||
@@ -74,6 +74,29 @@
|
||||
</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);">
|
||||
@@ -128,3 +151,94 @@
|
||||
|
||||
<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 %}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Audit Log{% endblock %}
|
||||
{% block page_title %}Audit Log{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="pcard pcard-sm mb-3">
|
||||
<form method="GET" class="d-flex gap-2 align-items-center flex-wrap">
|
||||
<select name="action" class="form-select form-select-sm" style="max-width:220px;">
|
||||
<option value="">All events</option>
|
||||
{% for a in actions %}
|
||||
<option value="{{ a }}" {% if a == action %}selected{% endif %}>{{ a | replace('_',' ') | title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" class="btn btn-sm btn-outline-secondary"><i class="bi bi-filter me-1"></i>Filter</button>
|
||||
{% if action %}<a href="{{ url_for('settings.audit_log') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-x-lg"></i></a>{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="pcard p-0">
|
||||
{% if logs %}
|
||||
<table class="pfm-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding-left:20px;">Time</th>
|
||||
<th>Event</th>
|
||||
<th class="d-mob-none">Details</th>
|
||||
<th class="d-mob-none" style="padding-right:20px;">IP</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in logs %}
|
||||
<tr>
|
||||
<td style="padding-left:20px;font-size:12px;color:var(--muted);white-space:nowrap;">
|
||||
{{ entry.timestamp.strftime('%b %d, %H:%M:%S') }}
|
||||
</td>
|
||||
<td>
|
||||
{% set colors = {
|
||||
'login_success':'#d1fae5|#065f46',
|
||||
'login_success_2fa':'#d1fae5|#065f46',
|
||||
'login_failed':'#fee2e2|#991b1b',
|
||||
'totp_enabled':'#dbeafe|#1e40af',
|
||||
'totp_disabled':'#fef3c7|#92400e',
|
||||
'schwab_connected':'#d1fae5|#065f46',
|
||||
'schwab_disconnected':'#fee2e2|#991b1b',
|
||||
'teller_connected':'#d1fae5|#065f46',
|
||||
'teller_disconnected':'#fee2e2|#991b1b',
|
||||
'password_changed':'#ede9fe|#5b21b6',
|
||||
}.get(entry.action, '#f1f5f9|#475569').split('|') %}
|
||||
<span style="font-size:12px;font-weight:600;background:{{ colors[0] }};color:{{ colors[1] }};padding:2px 8px;border-radius:4px;">
|
||||
{{ entry.action | replace('_',' ') | title }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="d-mob-none" style="font-size:12px;color:var(--muted);">{{ entry.description or '—' }}</td>
|
||||
<td class="d-mob-none" style="padding-right:20px;font-size:12px;color:var(--muted);">
|
||||
<span class="mono">{{ entry.ip_address or '—' }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% if pagination.pages > 1 %}
|
||||
<div class="d-flex justify-content-between align-items-center px-4 py-3" style="border-top:1px solid var(--border);font-size:12px;color:var(--muted);">
|
||||
<span>Page {{ pagination.page }} of {{ pagination.pages }} · {{ pagination.total }} events</span>
|
||||
<div class="d-flex gap-1">
|
||||
{% if pagination.has_prev %}
|
||||
<a href="{{ url_for('settings.audit_log', page=pagination.prev_num, action=action) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;">← Prev</a>
|
||||
{% endif %}
|
||||
{% if pagination.has_next %}
|
||||
<a href="{{ url_for('settings.audit_log', page=pagination.next_num, action=action) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;">Next →</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-shield-check text-muted" style="font-size:2.5rem;opacity:.4;"></i>
|
||||
<p class="text-muted small mt-3 mb-0">No audit events recorded yet.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -61,6 +61,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audit Log nav card -->
|
||||
<div class="row g-3 mt-0">
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<a href="{{ url_for('settings.audit_log') }}" class="text-decoration-none">
|
||||
<div class="pcard text-center py-4" style="transition:all .15s;" onmouseover="this.style.borderColor='#ef4444'" onmouseout="this.style.borderColor='var(--border)'">
|
||||
<i class="bi bi-clipboard-check" style="font-size:2rem;color:#ef4444;"></i>
|
||||
<div style="font-size:14px;font-weight:600;margin-top:10px;">Audit Log</div>
|
||||
<div style="font-size:12px;color:var(--muted);margin-top:4px;">Login, 2FA, and sync events</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two-Factor Authentication -->
|
||||
<div class="row g-3 mt-1">
|
||||
<div class="col-12 col-md-6">
|
||||
|
||||
Reference in New Issue
Block a user