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