4fb0d35daf
Update application branding to reflect broader financial tracking capabilities beyond just ETF trades. Add comprehensive growth visualization features with time period selectors and three distinct chart views for portfolio, cash, and total net worth tracking. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1158 lines
69 KiB
HTML
1158 lines
69 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Personal Finance Tracker</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<nav class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h2>Finance 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" data-page="subscriptions">
|
||
<span class="menu-icon">📱</span>
|
||
<span class="menu-text">Subscriptions</span>
|
||
</li>
|
||
<li class="menu-item" data-page="add-subscription">
|
||
<span class="menu-icon">➕</span>
|
||
<span class="menu-text">Add Subscription</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 Personal Finance 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-summary">
|
||
<div class="card-group">
|
||
<div class="summary-card portfolio-summary">
|
||
<div class="summary-header">
|
||
<h3>Portfolio</h3>
|
||
</div>
|
||
<div class="summary-content">
|
||
<div class="primary-value" id="dashboard-current-value">€0.00</div>
|
||
<div class="secondary-value" id="dashboard-total-gains">€0.00</div>
|
||
</div>
|
||
<div class="top-accounts-section">
|
||
<div class="top-accounts-title">Top Holdings</div>
|
||
<div id="dashboard-top-portfolio" class="top-accounts-list">
|
||
<div class="no-data-small">No positions yet</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quick-action-card portfolio-action" onclick="app.navigateToPage('add-trade')">
|
||
<div class="quick-action-icon">➕</div>
|
||
<div class="quick-action-text">Add Trade</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-group">
|
||
<div class="summary-card cash-summary">
|
||
<div class="summary-header">
|
||
<h3>Cash</h3>
|
||
</div>
|
||
<div class="summary-content">
|
||
<div class="primary-value" id="dashboard-cash-total">€0.00</div>
|
||
<div class="secondary-value" id="dashboard-account-count">0 accounts</div>
|
||
</div>
|
||
<div class="top-accounts-section">
|
||
<div class="top-accounts-title">Top Accounts</div>
|
||
<div id="dashboard-top-cash" class="top-accounts-list">
|
||
<div class="no-data-small">No accounts yet</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quick-action-card cash-action" onclick="app.navigateToPage('cash-accounts')">
|
||
<div class="quick-action-icon">💰</div>
|
||
<div class="quick-action-text">Add Account</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-group">
|
||
<div class="summary-card subscriptions-summary">
|
||
<div class="summary-header">
|
||
<h3>Subscriptions</h3>
|
||
</div>
|
||
<div class="summary-content">
|
||
<div class="primary-value" id="dashboard-subscription-monthly">€0.00/mo</div>
|
||
<div class="secondary-value" id="dashboard-subscription-count">0 services</div>
|
||
</div>
|
||
<div class="top-accounts-section">
|
||
<div class="top-accounts-title">Top Services</div>
|
||
<div id="dashboard-top-subscriptions" class="top-accounts-list">
|
||
<div class="no-data-small">No subscriptions yet</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quick-action-card subscription-action" onclick="app.navigateToPage('add-subscription')">
|
||
<div class="quick-action-icon">📱</div>
|
||
<div class="quick-action-text">Add Service</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-group">
|
||
<div class="summary-card total-summary">
|
||
<div class="summary-header">
|
||
<h3>Total Value</h3>
|
||
</div>
|
||
<div class="summary-content">
|
||
<div class="primary-value total" id="dashboard-total-combined">€0.00</div>
|
||
<div class="secondary-value" id="dashboard-performance">0.0%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Growth Graphs Section -->
|
||
<div class="growth-graphs-section">
|
||
<div class="graphs-header">
|
||
<h2>Growth & Trends</h2>
|
||
<div class="time-period-selector">
|
||
<button class="period-btn active" data-period="7d">7D</button>
|
||
<button class="period-btn" data-period="1m">1M</button>
|
||
<button class="period-btn" data-period="3m">3M</button>
|
||
<button class="period-btn" data-period="6m">6M</button>
|
||
<button class="period-btn" data-period="1y">1Y</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="graphs-grid">
|
||
<div class="graph-card portfolio-graph">
|
||
<div class="graph-header">
|
||
<h3>Portfolio Value</h3>
|
||
<div class="graph-stats">
|
||
<span class="current-value" id="portfolio-graph-value">€0.00</span>
|
||
<span class="change-indicator" id="portfolio-graph-change">+0.0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="graph-container">
|
||
<canvas id="portfolio-chart" class="chart-canvas"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="graph-card cash-graph">
|
||
<div class="graph-header">
|
||
<h3>Cash Holdings</h3>
|
||
<div class="graph-stats">
|
||
<span class="current-value" id="cash-graph-value">€0.00</span>
|
||
<span class="change-indicator" id="cash-graph-change">+0.0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="graph-container">
|
||
<canvas id="cash-chart" class="chart-canvas"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="graph-card combined-graph">
|
||
<div class="graph-header">
|
||
<h3>Total Net Worth</h3>
|
||
<div class="graph-stats">
|
||
<span class="current-value" id="total-graph-value">€0.00</span>
|
||
<span class="change-indicator" id="total-graph-change">+0.0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="graph-container">
|
||
<canvas id="total-chart" class="chart-canvas"></canvas>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="cancel-btn" onclick="app.navigateToPage('dashboard')">Cancel</button>
|
||
<button type="submit" class="submit-btn">Add Trade</button>
|
||
</div>
|
||
</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>
|
||
<div class="form-actions">
|
||
<button type="button" class="cancel-btn" onclick="app.navigateToPage('dashboard')">Cancel</button>
|
||
<button type="submit" class="create-account-btn">Add Account</button>
|
||
</div>
|
||
</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>
|
||
|
||
<!-- Subscriptions Page -->
|
||
<div id="subscriptions-page" class="page">
|
||
<div class="subscriptions-container">
|
||
<h2>Subscription Management</h2>
|
||
<div class="subscription-intro">
|
||
<p>Track and manage your recurring subscriptions. Monitor monthly and annual spending across different services.</p>
|
||
</div>
|
||
|
||
<div class="subscription-summary-cards">
|
||
<div class="subscription-summary-card total-monthly">
|
||
<h3>Monthly Total</h3>
|
||
<div class="subscription-amounts">
|
||
<div class="amount-line">
|
||
<span class="amount" id="monthly-total">€0.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="subscription-summary-card total-annual">
|
||
<h3>Annual Total</h3>
|
||
<div class="subscription-amounts">
|
||
<div class="amount-line">
|
||
<span class="amount" id="annual-total">€0.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="subscription-summary-card active-count">
|
||
<h3>Active Subscriptions</h3>
|
||
<div class="subscription-amounts">
|
||
<div class="amount-line">
|
||
<span class="amount" id="total-subscriptions">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="subscriptions-controls">
|
||
<button onclick="app.showPage('add-subscription')" class="add-subscription-btn">Add New Subscription</button>
|
||
<button onclick="app.exportSubscriptions()" class="export-btn">Export Subscriptions</button>
|
||
</div>
|
||
|
||
<div class="subscriptions-list-section">
|
||
<h3>Your Subscriptions</h3>
|
||
<div id="subscriptions-list" class="subscriptions-list">
|
||
<p class="no-data">Loading subscriptions...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit Subscription Modal -->
|
||
<div id="edit-subscription-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<h3>Edit Subscription</h3>
|
||
<form id="edit-subscription-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-subscription-service-name">Service Name *</label>
|
||
<input type="text" id="edit-subscription-service-name" name="serviceName" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-subscription-category">Category</label>
|
||
<select id="edit-subscription-category" name="category">
|
||
<option value="streaming">Streaming</option>
|
||
<option value="software">Software</option>
|
||
<option value="news">News & Media</option>
|
||
<option value="gaming">Gaming</option>
|
||
<option value="fitness">Fitness</option>
|
||
<option value="productivity">Productivity</option>
|
||
<option value="storage">Cloud Storage</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-subscription-billing-cycle">Billing Cycle *</label>
|
||
<select id="edit-subscription-billing-cycle" name="billingCycle" required>
|
||
<option value="monthly">Monthly</option>
|
||
<option value="annual">Annual</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-subscription-currency">Currency</label>
|
||
<select id="edit-subscription-currency" name="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-subscription-monthly-price">Monthly Price</label>
|
||
<input type="number" id="edit-subscription-monthly-price" name="monthlyPrice" step="0.01" min="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-subscription-annual-price">Annual Price</label>
|
||
<input type="number" id="edit-subscription-annual-price" name="annualPrice" step="0.01" min="0">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-subscription-start-date">Start Date *</label>
|
||
<input type="date" id="edit-subscription-start-date" name="startDate" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-subscription-end-date">End Date (optional)</label>
|
||
<input type="date" id="edit-subscription-end-date" name="endDate">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-subscription-free-trial">Free Trial Days</label>
|
||
<input type="number" id="edit-subscription-free-trial" name="freeTrialDays" min="0" value="0">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-subscription-website-url">Website URL (optional)</label>
|
||
<input type="url" id="edit-subscription-website-url" name="websiteUrl" placeholder="https://example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-subscription-notes">Notes (optional)</label>
|
||
<textarea id="edit-subscription-notes" name="notes" rows="3"></textarea>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="submit" class="save-btn">Save Changes</button>
|
||
<button type="button" class="cancel-btn" onclick="app.closeEditSubscriptionModal()">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Subscription Page -->
|
||
<div id="add-subscription-page" class="page">
|
||
<div class="add-subscription-container">
|
||
<h2>Add New Subscription</h2>
|
||
|
||
<form id="subscription-form" class="subscription-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="subscription-service-name">Service Name *</label>
|
||
<input type="text" id="subscription-service-name" name="serviceName" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="subscription-category">Category</label>
|
||
<select id="subscription-category" name="category">
|
||
<option value="streaming">Streaming</option>
|
||
<option value="software">Software</option>
|
||
<option value="news">News & Media</option>
|
||
<option value="gaming">Gaming</option>
|
||
<option value="fitness">Fitness</option>
|
||
<option value="productivity">Productivity</option>
|
||
<option value="storage">Cloud Storage</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="subscription-billing-cycle">Billing Cycle *</label>
|
||
<select id="subscription-billing-cycle" name="billingCycle" required>
|
||
<option value="monthly">Monthly</option>
|
||
<option value="annual">Annual</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="subscription-currency">Currency</label>
|
||
<select id="subscription-currency" name="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="subscription-monthly-price">Monthly Price</label>
|
||
<input type="number" id="subscription-monthly-price" name="monthlyPrice" step="0.01" min="0">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="subscription-annual-price">Annual Price</label>
|
||
<input type="number" id="subscription-annual-price" name="annualPrice" step="0.01" min="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="subscription-start-date">Start Date *</label>
|
||
<input type="date" id="subscription-start-date" name="startDate" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="subscription-end-date">End Date (optional)</label>
|
||
<input type="date" id="subscription-end-date" name="endDate">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="subscription-free-trial">Free Trial Days</label>
|
||
<input type="number" id="subscription-free-trial" name="freeTrialDays" min="0" value="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="subscription-website-url">Website URL (optional)</label>
|
||
<input type="url" id="subscription-website-url" name="websiteUrl" placeholder="https://example.com">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="subscription-notes">Notes (optional)</label>
|
||
<textarea id="subscription-notes" name="notes" rows="3" placeholder="Additional notes about this subscription..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="cancel-btn" onclick="app.navigateToPage('dashboard')">Cancel</button>
|
||
<button type="submit" class="submit-btn">Add Subscription</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |