ae6b0ac80e
- Add British Pound (GBP) support to all database schemas and constraints - Update API validation to accept EUR, USD, and GBP currencies - Implement centralized currency symbol mapping with getCurrencySymbol() - Replace all hardcoded currency mappings throughout frontend code - Add GBP options to all currency dropdown menus in UI forms - Update README with enhanced feature descriptions and changelog - Document multi-currency support and historical price tracking features - Improve project documentation with comprehensive feature overview 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
872 lines
52 KiB
HTML
872 lines
52 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ETF Trade Tracker</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<nav class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h2>ETF Tracker</h2>
|
||
</div>
|
||
<ul class="sidebar-menu">
|
||
<li class="menu-item active" data-page="dashboard">
|
||
<span class="menu-icon">📊</span>
|
||
<span class="menu-text">Dashboard</span>
|
||
</li>
|
||
<li class="menu-item" data-page="portfolio">
|
||
<span class="menu-icon">💼</span>
|
||
<span class="menu-text">Portfolio</span>
|
||
</li>
|
||
<li class="menu-item" data-page="add-trade">
|
||
<span class="menu-icon">➕</span>
|
||
<span class="menu-text">Add Trade</span>
|
||
</li>
|
||
<li class="menu-item" data-page="cash-accounts">
|
||
<span class="menu-icon">💰</span>
|
||
<span class="menu-text">Cash Accounts</span>
|
||
</li>
|
||
<li class="menu-item" data-page="add-transfer">
|
||
<span class="menu-icon">💸</span>
|
||
<span class="menu-text">Add Transfer</span>
|
||
</li>
|
||
<li class="menu-item" data-page="gains-losses">
|
||
<span class="menu-icon">📈</span>
|
||
<span class="menu-text">Gains/Losses</span>
|
||
</li>
|
||
<li class="menu-item" data-page="trade-history">
|
||
<span class="menu-icon">📋</span>
|
||
<span class="menu-text">Trade History</span>
|
||
</li>
|
||
<li class="menu-item menu-separator" data-page="cgt-settings">
|
||
<span class="menu-icon">🧮</span>
|
||
<span class="menu-text">CGT Settings</span>
|
||
</li>
|
||
<li class="menu-item" data-page="tokens">
|
||
<span class="menu-icon">🔑</span>
|
||
<span class="menu-text">API Tokens</span>
|
||
</li>
|
||
<li class="menu-item admin-only" data-page="admin" style="display: none;">
|
||
<span class="menu-icon">👥</span>
|
||
<span class="menu-text">Admin Panel</span>
|
||
</li>
|
||
</ul>
|
||
<div class="sidebar-footer">
|
||
<div class="user-info" id="user-info" style="display: none;">
|
||
<span id="current-user">Not logged in</span>
|
||
<button id="logout-btn" class="logout-btn">Logout</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="main-content">
|
||
<header class="top-header">
|
||
<button class="sidebar-toggle">☰</button>
|
||
<h1 id="page-title">Dashboard</h1>
|
||
</header>
|
||
|
||
<main class="content-area">
|
||
<!-- Login Page -->
|
||
<div id="login-page" class="page active">
|
||
<div class="login-container">
|
||
<h2>Login to ETF Tracker</h2>
|
||
<form id="login-form" class="login-form">
|
||
<div class="form-group">
|
||
<label for="login-username">Username</label>
|
||
<input type="text" id="login-username" required placeholder="Enter your username">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="login-password">Password</label>
|
||
<input type="password" id="login-password" required placeholder="Enter your password">
|
||
</div>
|
||
<button type="submit" class="login-btn">Login</button>
|
||
</form>
|
||
<div class="login-info">
|
||
<p>Default admin credentials:</p>
|
||
<p><strong>Username:</strong> admin</p>
|
||
<p><strong>Password:</strong> admin123</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dashboard Page -->
|
||
<div id="dashboard-page" class="page">
|
||
<div class="dashboard-grid">
|
||
<div class="dashboard-card total-value">
|
||
<h3>Current Portfolio Value</h3>
|
||
<div class="metric-value" id="dashboard-current-value">€0.00</div>
|
||
<div class="metric-detail" id="dashboard-last-updated">Using cost basis</div>
|
||
</div>
|
||
|
||
<div class="dashboard-card total-gains">
|
||
<h3>Total Gains/Losses</h3>
|
||
<div class="metric-value" id="dashboard-total-gains">€0.00</div>
|
||
<div class="metric-change" id="dashboard-gains-percentage">0.0%</div>
|
||
</div>
|
||
|
||
<div class="dashboard-card monthly-investment">
|
||
<h3>Monthly Investment</h3>
|
||
<div class="metric-value" id="monthly-investment">€0.00</div>
|
||
<div class="metric-detail" id="monthly-trades">0 trades</div>
|
||
</div>
|
||
|
||
<div class="dashboard-card yearly-investment">
|
||
<h3>Yearly Investment</h3>
|
||
<div class="metric-value" id="yearly-investment">€0.00</div>
|
||
<div class="metric-detail" id="yearly-trades">0 trades</div>
|
||
</div>
|
||
|
||
<div class="dashboard-card total-shares">
|
||
<h3>Total Shares</h3>
|
||
<div class="metric-value" id="total-shares">0</div>
|
||
<div class="metric-detail" id="unique-etfs">0 ETFs</div>
|
||
</div>
|
||
|
||
<div class="dashboard-card cost-basis">
|
||
<h3>Total Investment</h3>
|
||
<div class="metric-value" id="dashboard-cost-basis">€0.00</div>
|
||
<div class="metric-detail" id="dashboard-avg-return">Avg return: 0.0%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Total Holdings Card -->
|
||
<div class="total-holdings-section">
|
||
<div class="total-holdings-card">
|
||
<h3>Total Holdings</h3>
|
||
<div class="holdings-breakdown">
|
||
<div class="holdings-item">
|
||
<span class="holdings-label">Portfolio Value:</span>
|
||
<span class="holdings-value" id="total-holdings-portfolio">€0.00</span>
|
||
</div>
|
||
<div class="holdings-item">
|
||
<span class="holdings-label">Cash Savings:</span>
|
||
<span class="holdings-value" id="total-holdings-cash">€0.00</span>
|
||
</div>
|
||
<div class="holdings-divider"></div>
|
||
<div class="holdings-total">
|
||
<span class="holdings-label">Total Value:</span>
|
||
<span class="holdings-value total" id="total-holdings-combined">€0.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cash-breakdown" id="cash-breakdown" style="display: none;">
|
||
<h3>Cash Savings Summary</h3>
|
||
<div class="cash-summary-overview">
|
||
<div class="cash-total-card">
|
||
<div class="cash-amount-line" id="dashboard-cash-eur-line">
|
||
<span class="currency-label">EUR:</span>
|
||
<span class="amount" id="dashboard-cash-eur">€0.00</span>
|
||
</div>
|
||
<div class="cash-amount-line" id="dashboard-cash-usd-line" style="display: none;">
|
||
<span class="currency-label">USD:</span>
|
||
<span class="amount" id="dashboard-cash-usd">$0.00</span>
|
||
</div>
|
||
</div>
|
||
<div class="cash-stats-card">
|
||
<span class="stat-detail" id="dashboard-account-count">0 accounts</span>
|
||
<span class="stat-detail" id="dashboard-avg-interest-display" style="display: none;">Avg: 0.0%</span>
|
||
</div>
|
||
</div>
|
||
<div id="cash-accounts-breakdown" class="breakdown-list">
|
||
<div id="dashboard-cash-accounts-list">
|
||
<p class="no-data">No cash accounts yet</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="etf-breakdown">
|
||
<h3>ETF Breakdown</h3>
|
||
<div id="etf-breakdown-list" class="breakdown-list">
|
||
<p class="no-data">No ETF positions yet</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Trade Page -->
|
||
<div id="add-trade-page" class="page">
|
||
<div class="trade-form-container">
|
||
<h2>Add New Trade</h2>
|
||
<form id="trade-form" class="trade-form">
|
||
<div class="form-group">
|
||
<label for="etf-symbol">ETF Symbol</label>
|
||
<input type="text" id="etf-symbol" required placeholder="e.g., VWCE, SPY, QQQ">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="trade-type">Trade Type</label>
|
||
<select id="trade-type" required>
|
||
<option value="">Select trade type</option>
|
||
<option value="buy">Buy</option>
|
||
<option value="sell">Sell</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="shares">Number of Shares</label>
|
||
<input type="number" id="shares" step="0.001" min="0" required placeholder="0.000">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="price">Price per Share</label>
|
||
<input type="number" id="price" step="0.01" min="0" required placeholder="0.00">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="currency">Currency</label>
|
||
<select id="currency" required>
|
||
<option value="">Select currency</option>
|
||
<option value="EUR">Euro (€)</option>
|
||
<option value="USD">US Dollar ($)</option>
|
||
<option value="GBP">British Pound (£)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="trade-date">Trade Date</label>
|
||
<input type="date" id="trade-date" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="trade-time">Trade Time (24h format)</label>
|
||
<input type="time" id="trade-time" required step="1">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="fees">Fees (optional)</label>
|
||
<input type="number" id="fees" step="0.01" min="0" placeholder="0.00">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="notes">Notes (optional)</label>
|
||
<textarea id="notes" rows="3" placeholder="Additional notes about this trade..."></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="submit-btn">Add Trade</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Trade History Page -->
|
||
<div id="trade-history-page" class="page">
|
||
<div class="trade-history-container">
|
||
<h2>Trade History</h2>
|
||
<div class="trades-controls">
|
||
<button id="clear-trades" class="clear-btn">Clear All Trades</button>
|
||
<button id="export-trades" class="export-btn">Export to JSON</button>
|
||
</div>
|
||
<div id="trades-list" class="trades-list">
|
||
<p class="no-trades">No trades recorded yet. Add your first trade above!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Portfolio Page -->
|
||
<div id="portfolio-page" class="page">
|
||
<div class="portfolio-container">
|
||
<h2>Portfolio Summary</h2>
|
||
<div id="portfolio-summary" class="portfolio-summary">
|
||
<p class="no-data">No portfolio data yet</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Admin Panel Page -->
|
||
<div id="admin-page" class="page">
|
||
<div class="admin-container">
|
||
<h2>Admin Panel - User Management</h2>
|
||
|
||
<div class="admin-actions">
|
||
<h3>Create New User</h3>
|
||
<form id="create-user-form" class="create-user-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="new-username">Username</label>
|
||
<input type="text" id="new-username" required placeholder="Enter username">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="new-password">Password</label>
|
||
<input type="password" id="new-password" required placeholder="Enter password">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="new-email">Email (optional)</label>
|
||
<input type="email" id="new-email" placeholder="Enter email">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="new-is-admin"> Admin User
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="create-user-btn">Create User</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="users-list-section">
|
||
<h3>Existing Users</h3>
|
||
<div id="users-list" class="users-list">
|
||
<p class="no-data">Loading users...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API Tokens Page -->
|
||
<div id="tokens-page" class="page">
|
||
<div class="tokens-container">
|
||
<h2>API Access Tokens</h2>
|
||
<div class="tokens-intro">
|
||
<p>Create access tokens to authenticate API requests for third-party integrations like n8n workflows. Keep your tokens secure and never share them publicly.</p>
|
||
</div>
|
||
|
||
<div class="token-actions">
|
||
<h3>Create New Token</h3>
|
||
<form id="create-token-form" class="create-token-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="token-name">Token Name</label>
|
||
<input type="text" id="token-name" required placeholder="e.g., N8N Workflow Token" maxlength="50">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="token-expires">Expires (optional)</label>
|
||
<select id="token-expires">
|
||
<option value="">Never</option>
|
||
<option value="30">30 days</option>
|
||
<option value="90">90 days</option>
|
||
<option value="365">1 year</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="token-scopes">Permissions</label>
|
||
<select id="token-scopes">
|
||
<option value="read">Read Only</option>
|
||
<option value="read,write" selected>Read & Write</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="create-token-btn">Create Token</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="tokens-list-section">
|
||
<h3>Your Access Tokens</h3>
|
||
<div id="tokens-list" class="tokens-list">
|
||
<p class="no-data">Loading tokens...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Token Creation Modal -->
|
||
<div id="token-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<h3>Token Created Successfully</h3>
|
||
<p><strong>Important:</strong> Copy your token now. You won't be able to see it again!</p>
|
||
<div class="token-display">
|
||
<input type="text" id="new-token-value" readonly>
|
||
<button id="copy-token-btn" class="copy-btn">Copy</button>
|
||
</div>
|
||
<div class="token-usage">
|
||
<h4>Usage Example:</h4>
|
||
<code class="usage-example">
|
||
curl -H "Authorization: Bearer YOUR_TOKEN" \<br>
|
||
http://localhost:3000/api/trades
|
||
</code>
|
||
</div>
|
||
<button id="close-token-modal" class="close-modal-btn">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cash Accounts Page -->
|
||
<div id="cash-accounts-page" class="page">
|
||
<div class="cash-accounts-container">
|
||
<h2>Cash Savings Accounts</h2>
|
||
<div class="cash-intro">
|
||
<p>Track your cash savings accounts alongside your ETF investments. Manage different account types and monitor your total cash position.</p>
|
||
</div>
|
||
|
||
<div class="cash-summary-cards">
|
||
<div class="cash-summary-card total-cash">
|
||
<h3>Total Cash</h3>
|
||
<div class="cash-amounts">
|
||
<div class="amount-line">
|
||
<span class="currency">EUR:</span>
|
||
<span class="amount" id="total-cash-eur">€0.00</span>
|
||
</div>
|
||
<div class="amount-line">
|
||
<span class="currency">USD:</span>
|
||
<span class="amount" id="total-cash-usd">$0.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cash-summary-card account-stats">
|
||
<h3>Account Stats</h3>
|
||
<div class="stat-line">
|
||
<span>Accounts:</span>
|
||
<span id="account-count">0</span>
|
||
</div>
|
||
<div class="stat-line">
|
||
<span>Avg Interest:</span>
|
||
<span id="avg-interest">0.0%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cash-actions">
|
||
<h3>Add New Account</h3>
|
||
<form id="create-account-form" class="create-account-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="account-name">Account Name</label>
|
||
<input type="text" id="account-name" required placeholder="e.g., Emergency Savings" maxlength="100">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="account-type">Account Type</label>
|
||
<select id="account-type">
|
||
<option value="savings">Savings Account</option>
|
||
<option value="checking">Checking Account</option>
|
||
<option value="money_market">Money Market</option>
|
||
<option value="cd">Certificate of Deposit</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="account-balance">Balance</label>
|
||
<input type="number" id="account-balance" step="0.01" min="0" required placeholder="0.00">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="account-currency">Currency</label>
|
||
<select id="account-currency">
|
||
<option value="EUR" selected>EUR (€)</option>
|
||
<option value="USD">USD ($)</option>
|
||
<option value="GBP">GBP (£)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="institution-name">Institution (optional)</label>
|
||
<input type="text" id="institution-name" placeholder="e.g., Bank of Ireland">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="interest-rate">Interest Rate % (optional)</label>
|
||
<input type="number" id="interest-rate" step="0.01" min="0" placeholder="0.00">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group full-width">
|
||
<label for="account-notes">Notes (optional)</label>
|
||
<textarea id="account-notes" placeholder="Additional notes about this account" rows="2"></textarea>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="create-account-btn">Add Account</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="accounts-list-section">
|
||
<h3>Your Cash Accounts</h3>
|
||
<div id="accounts-list" class="accounts-list">
|
||
<p class="no-data">Loading accounts...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit Account Modal -->
|
||
<div id="edit-account-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<h3>Edit Cash Account</h3>
|
||
<form id="edit-account-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-account-name">Account Name</label>
|
||
<input type="text" id="edit-account-name" required maxlength="100">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-account-type">Account Type</label>
|
||
<select id="edit-account-type">
|
||
<option value="savings">Savings Account</option>
|
||
<option value="checking">Checking Account</option>
|
||
<option value="money_market">Money Market</option>
|
||
<option value="cd">Certificate of Deposit</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-account-balance">Balance</label>
|
||
<input type="number" id="edit-account-balance" step="0.01" min="0" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-account-currency">Currency</label>
|
||
<select id="edit-account-currency">
|
||
<option value="EUR">EUR (€)</option>
|
||
<option value="USD">USD ($)</option>
|
||
<option value="GBP">GBP (£)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-institution-name">Institution</label>
|
||
<input type="text" id="edit-institution-name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-interest-rate">Interest Rate %</label>
|
||
<input type="number" id="edit-interest-rate" step="0.01" min="0">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group full-width">
|
||
<label for="edit-account-notes">Notes</label>
|
||
<textarea id="edit-account-notes" rows="2"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-buttons">
|
||
<button type="button" id="cancel-edit-account" class="cancel-btn">Cancel</button>
|
||
<button type="submit" class="save-btn">Save Changes</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Transfer Modal -->
|
||
<div id="transfer-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<h3>Add Transfer</h3>
|
||
<form id="transfer-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="transfer-account">Account</label>
|
||
<select id="transfer-account" required>
|
||
<option value="">Select Account</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="transfer-type">Transfer Type</label>
|
||
<select id="transfer-type" required>
|
||
<option value="">Select Type</option>
|
||
<option value="deposit">Deposit</option>
|
||
<option value="withdrawal">Withdrawal</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="transfer-amount">Amount</label>
|
||
<input type="number" id="transfer-amount" step="0.01" min="0.01" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="transfer-date">Transfer Date</label>
|
||
<input type="date" id="transfer-date" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group full-width">
|
||
<label for="transfer-description">Description</label>
|
||
<textarea id="transfer-description" rows="2" placeholder="Optional description"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-buttons">
|
||
<button type="button" id="cancel-transfer" class="cancel-btn">Cancel</button>
|
||
<button type="submit" class="save-btn">Add Transfer</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Transfers Section -->
|
||
<div class="transfers-section">
|
||
<div class="section-header">
|
||
<h3>Recent Transfers</h3>
|
||
<button id="add-transfer-btn" class="primary-btn">Add Transfer</button>
|
||
</div>
|
||
<div id="transfers-list" class="transfers-list">
|
||
<p class="no-data">No transfers found</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Transfer Page -->
|
||
<div id="add-transfer-page" class="page">
|
||
<div class="transfer-form-container">
|
||
<h2>Add Cash Transfer</h2>
|
||
<div class="transfer-intro">
|
||
<p>Record deposits and withdrawals for your cash accounts. Transfers will automatically update account balances.</p>
|
||
</div>
|
||
|
||
<form id="standalone-transfer-form" class="transfer-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="standalone-transfer-account">Account</label>
|
||
<select id="standalone-transfer-account" required>
|
||
<option value="">Select Account</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="standalone-transfer-type">Transfer Type</label>
|
||
<select id="standalone-transfer-type" required>
|
||
<option value="">Select Type</option>
|
||
<option value="deposit">Deposit</option>
|
||
<option value="withdrawal">Withdrawal</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="standalone-transfer-amount">Amount</label>
|
||
<input type="number" id="standalone-transfer-amount" step="0.01" min="0.01" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="standalone-transfer-date">Transfer Date</label>
|
||
<input type="date" id="standalone-transfer-date" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group full-width">
|
||
<label for="standalone-transfer-description">Description</label>
|
||
<textarea id="standalone-transfer-description" rows="3" placeholder="Optional description"></textarea>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="submit-btn">Add Transfer</button>
|
||
</form>
|
||
|
||
<div class="recent-transfers">
|
||
<h3>Recent Transfers</h3>
|
||
<div id="standalone-transfers-list" class="transfers-list">
|
||
<p class="no-data">No transfers found</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gains/Losses Page -->
|
||
<div id="gains-losses-page" class="page">
|
||
<div class="gains-losses-container">
|
||
<h2>Gains & Losses</h2>
|
||
|
||
<div class="performance-summary">
|
||
<div class="performance-grid">
|
||
<div class="performance-card total-gains">
|
||
<h3>Total Gains/Losses</h3>
|
||
<div class="performance-value" id="total-performance">€0.00</div>
|
||
<div class="performance-percentage" id="total-percentage">0.0%</div>
|
||
</div>
|
||
|
||
<div class="performance-card unrealized-gains">
|
||
<h3>Unrealized P&L</h3>
|
||
<div class="performance-value" id="unrealized-performance">€0.00</div>
|
||
<div class="performance-percentage" id="unrealized-percentage">0.0%</div>
|
||
</div>
|
||
|
||
<div class="performance-card current-value">
|
||
<h3>Current Portfolio Value</h3>
|
||
<div class="performance-value" id="current-portfolio-value">€0.00</div>
|
||
<div class="performance-detail" id="last-updated">Not updated</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cgt-summary" id="cgt-summary" style="display: none;">
|
||
<h3>Capital Gains Tax Summary</h3>
|
||
<div class="cgt-grid">
|
||
<div class="cgt-card total-cgt">
|
||
<h4>Estimated CGT Liability</h4>
|
||
<div class="cgt-value" id="total-cgt-liability">€0.00</div>
|
||
<div class="cgt-detail" id="cgt-effective-rate">Effective rate: 0.0%</div>
|
||
</div>
|
||
|
||
<div class="cgt-card after-tax">
|
||
<h4>After-Tax Gains</h4>
|
||
<div class="cgt-value" id="after-tax-gains">€0.00</div>
|
||
<div class="cgt-detail" id="exemption-used">Exemption: €0 used</div>
|
||
</div>
|
||
|
||
<div class="cgt-card holding-summary">
|
||
<h4>Holdings by Tax Rate</h4>
|
||
<div class="holding-periods" id="holding-periods-summary">
|
||
<div class="period-item">
|
||
<span class="period-label">Short-term:</span>
|
||
<span class="period-value">€0.00</span>
|
||
</div>
|
||
<div class="period-item">
|
||
<span class="period-label">Long-term:</span>
|
||
<span class="period-value">€0.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="price-updates-section">
|
||
<h3>Update Current Prices</h3>
|
||
<div class="price-update-controls">
|
||
<button id="update-all-prices" class="update-all-btn">Update All Prices</button>
|
||
<span class="update-info">Enter current market prices to calculate gains/losses</span>
|
||
</div>
|
||
<div id="price-update-list" class="price-update-list">
|
||
<p class="no-data">No ETF positions to update</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="long-term-cgt-section" id="long-term-cgt-section" style="display: none;">
|
||
<h3>8+ Year Holdings - Long-Term CGT (33%)</h3>
|
||
<div class="long-term-cgt-summary">
|
||
<div class="long-term-cgt-grid">
|
||
<div class="long-term-cgt-card total-eligible">
|
||
<h4>Eligible Holdings (8+ Years)</h4>
|
||
<div class="long-term-value" id="long-term-eligible-value">€0.00</div>
|
||
<div class="long-term-detail" id="long-term-eligible-count">0 positions</div>
|
||
</div>
|
||
|
||
<div class="long-term-cgt-card total-gains-8yr">
|
||
<h4>Total Gains (8+ Years)</h4>
|
||
<div class="long-term-value" id="long-term-total-gains">€0.00</div>
|
||
<div class="long-term-detail" id="long-term-gains-percentage">0.0% gain</div>
|
||
</div>
|
||
|
||
<div class="long-term-cgt-card cgt-liability-8yr">
|
||
<h4>CGT Liability (33%)</h4>
|
||
<div class="long-term-value negative" id="long-term-cgt-liability">€0.00</div>
|
||
<div class="long-term-detail">On gains over 8 years</div>
|
||
</div>
|
||
|
||
<div class="long-term-cgt-card after-tax-8yr">
|
||
<h4>After-Tax Gains</h4>
|
||
<div class="long-term-value" id="long-term-after-tax">€0.00</div>
|
||
<div class="long-term-detail" id="long-term-effective-rate">Effective rate: 33%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="long-term-breakdown">
|
||
<h4>8+ Year Holdings Breakdown</h4>
|
||
<div id="long-term-breakdown-list" class="long-term-breakdown-list">
|
||
<p class="no-data">No holdings over 8 years</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gains-breakdown-section">
|
||
<h3>Individual Performance</h3>
|
||
<div id="gains-breakdown-list" class="gains-breakdown-list">
|
||
<p class="no-data">Update prices to see performance breakdown</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CGT Settings Page -->
|
||
<div id="cgt-settings-page" class="page">
|
||
<div class="cgt-settings-container">
|
||
<h2>Capital Gains Tax Settings</h2>
|
||
|
||
<div class="cgt-explanation">
|
||
<p>Configure your Capital Gains Tax rates based on holding periods. These rates will be used to calculate estimated tax liability on your realized and unrealized gains.</p>
|
||
</div>
|
||
|
||
<form id="cgt-settings-form" class="cgt-settings-form">
|
||
<h3>CGT Rate by Holding Period</h3>
|
||
|
||
<div class="cgt-rates-grid">
|
||
<div class="cgt-rate-item">
|
||
<label for="cgt-1month">0-1 Month (%)</label>
|
||
<input type="number" id="cgt-1month" min="0" max="100" step="0.1" value="40" class="cgt-rate-input">
|
||
</div>
|
||
|
||
<div class="cgt-rate-item">
|
||
<label for="cgt-6months">1-6 Months (%)</label>
|
||
<input type="number" id="cgt-6months" min="0" max="100" step="0.1" value="35" class="cgt-rate-input">
|
||
</div>
|
||
|
||
<div class="cgt-rate-item">
|
||
<label for="cgt-1year">6 Months-1 Year (%)</label>
|
||
<input type="number" id="cgt-1year" min="0" max="100" step="0.1" value="30" class="cgt-rate-input">
|
||
</div>
|
||
|
||
<div class="cgt-rate-item">
|
||
<label for="cgt-2years">1-2 Years (%)</label>
|
||
<input type="number" id="cgt-2years" min="0" max="100" step="0.1" value="20" class="cgt-rate-input">
|
||
</div>
|
||
|
||
<div class="cgt-rate-item">
|
||
<label for="cgt-longterm">2-8 Years (%)</label>
|
||
<input type="number" id="cgt-longterm" min="0" max="100" step="0.1" value="10" class="cgt-rate-input">
|
||
</div>
|
||
|
||
<div class="cgt-rate-item">
|
||
<label for="cgt-8years">8+ Years (%)</label>
|
||
<input type="number" id="cgt-8years" min="0" max="100" step="0.1" value="33" class="cgt-rate-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cgt-options">
|
||
<h3>Additional Settings</h3>
|
||
|
||
<div class="form-group">
|
||
<label for="cgt-annual-exemption">Annual CGT Exemption (€)</label>
|
||
<input type="number" id="cgt-annual-exemption" min="0" step="1" value="1270" placeholder="0">
|
||
<small>Annual tax-free allowance for capital gains</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="cgt-enabled" checked> Enable CGT calculations
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cgt-actions">
|
||
<button type="submit" class="save-cgt-btn">Save CGT Settings</button>
|
||
<button type="button" id="reset-cgt-defaults" class="reset-cgt-btn">Reset to Defaults</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="cgt-preview">
|
||
<h3>CGT Rate Preview</h3>
|
||
<div id="cgt-preview-chart" class="cgt-preview-chart">
|
||
<div class="rate-bar" data-period="1month">
|
||
<span class="period-label">0-1M</span>
|
||
<div class="rate-value">40%</div>
|
||
</div>
|
||
<div class="rate-bar" data-period="6months">
|
||
<span class="period-label">1-6M</span>
|
||
<div class="rate-value">35%</div>
|
||
</div>
|
||
<div class="rate-bar" data-period="1year">
|
||
<span class="period-label">6M-1Y</span>
|
||
<div class="rate-value">30%</div>
|
||
</div>
|
||
<div class="rate-bar" data-period="2years">
|
||
<span class="period-label">1-2Y</span>
|
||
<div class="rate-value">20%</div>
|
||
</div>
|
||
<div class="rate-bar" data-period="longterm">
|
||
<span class="period-label">2-8Y</span>
|
||
<div class="rate-value">10%</div>
|
||
</div>
|
||
<div class="rate-bar" data-period="8years">
|
||
<span class="period-label">8Y+</span>
|
||
<div class="rate-value">33%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |