2025-08-28 16:36:40 +01:00
<!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" >
2025-08-29 10:11:56 +01:00
< li class = "menu-item active" data-page = "dashboard" >
2025-08-28 16:36:40 +01:00
< span class = "menu-icon" > 📊< / span >
< span class = "menu-text" > Dashboard< / span >
< / li >
2025-08-29 10:11:56 +01:00
< li class = "menu-item" data-page = "portfolio" >
2025-08-28 16:36:40 +01:00
< span class = "menu-icon" > 💼< / span >
< span class = "menu-text" > Portfolio< / span >
< / li >
2025-08-29 19:54:29 +01:00
< 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 >
2025-08-28 16:36:40 +01:00
< / li >
2025-08-29 10:11:56 +01:00
< li class = "menu-item" data-page = "gains-losses" >
2025-08-28 16:36:40 +01:00
< span class = "menu-icon" > 📈< / span >
< span class = "menu-text" > Gains/Losses< / span >
< / li >
2025-08-29 19:54:29 +01:00
< li class = "menu-item" data-page = "trade-history" >
< span class = "menu-icon" > 📋< / span >
< span class = "menu-text" > Trade History< / span >
2025-08-28 16:36:40 +01:00
< / li >
2025-09-18 10:29:34 +01:00
< 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 >
2025-08-29 19:54:29 +01:00
< li class = "menu-item menu-separator" data-page = "cgt-settings" >
2025-08-28 19:20:36 +01:00
< span class = "menu-icon" > 🧮< / span >
< span class = "menu-text" > CGT Settings< / span >
< / li >
2025-08-29 19:54:29 +01:00
< li class = "menu-item" data-page = "tokens" >
< span class = "menu-icon" > 🔑< / span >
< span class = "menu-text" > API Tokens< / span >
< / li >
2025-08-29 10:11:56 +01:00
< li class = "menu-item admin-only" data-page = "admin" style = "display: none;" >
2025-08-28 16:36:40 +01:00
< 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" >
2025-09-18 10:29:34 +01:00
< div class = "dashboard-summary" >
< div class = "summary-card portfolio-summary" onclick = "app.navigateToPage('portfolio')" >
< 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 >
2025-08-29 19:54:29 +01:00
< / div >
< / div >
2025-09-18 10:29:34 +01:00
< div class = "summary-card cash-summary" onclick = "app.navigateToPage('cash-accounts')" >
< div class = "summary-header" >
< h3 > Cash< / h3 >
2025-08-29 19:54:29 +01:00
< / div >
2025-09-18 10:29:34 +01:00
< 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 >
2025-08-29 19:54:29 +01:00
< / div >
< / div >
2025-09-18 10:29:34 +01:00
< div class = "summary-card subscriptions-summary" onclick = "app.navigateToPage('subscriptions')" >
< 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 >
2025-08-29 19:54:29 +01:00
< / div >
< / div >
2025-09-18 10:29:34 +01:00
< 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 >
2025-08-28 16:36:40 +01:00
< / 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 >
2025-09-01 18:37:41 +01:00
< option value = "GBP" > British Pound (£)< / option >
2025-08-28 16:36:40 +01:00
< / 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 >
2025-08-29 19:54:29 +01:00
<!-- 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 >
2025-09-01 18:37:41 +01:00
< option value = "GBP" > GBP (£)< / option >
2025-08-29 19:54:29 +01:00
< / 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 >
2025-09-01 18:37:41 +01:00
< option value = "GBP" > GBP (£)< / option >
2025-08-29 19:54:29 +01:00
< / 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 >
2025-08-28 16:36:40 +01:00
<!-- 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 >
2025-08-28 19:20:36 +01:00
< 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 >
2025-08-28 16:36:40 +01:00
< / 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 >
2025-08-29 10:39:27 +01:00
< 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 >
2025-08-28 16:36:40 +01:00
< 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 >
2025-08-28 19:20:36 +01:00
<!-- 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" >
2025-08-29 19:54:29 +01:00
< label for = "cgt-longterm" > 2-8 Years (%)< / label >
2025-08-28 19:20:36 +01:00
< input type = "number" id = "cgt-longterm" min = "0" max = "100" step = "0.1" value = "10" class = "cgt-rate-input" >
< / div >
2025-08-29 19:54:29 +01:00
< 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 >
2025-08-28 19:20:36 +01:00
< / 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" >
2025-08-29 19:54:29 +01:00
< span class = "period-label" > 2-8Y< / span >
2025-08-28 19:20:36 +01:00
< div class = "rate-value" > 10%< / div >
< / div >
2025-08-29 19:54:29 +01:00
< div class = "rate-bar" data-period = "8years" >
< span class = "period-label" > 8Y+< / span >
< div class = "rate-value" > 33%< / div >
< / div >
2025-08-28 19:20:36 +01:00
< / div >
< / div >
< / div >
< / div >
2025-09-18 10:29:34 +01:00
<!-- 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 = "submit" class = "btn-primary" > Add Subscription< / button >
< button type = "button" class = "btn-secondary" onclick = "app.showPage('subscriptions')" > Cancel< / button >
< / div >
< / form >
< / div >
< / div >
2025-08-28 16:36:40 +01:00
< / main >
< / div >
< / div >
< script src = "script.js" > < / script >
< / body >
< / html >
