From 31a02a69ac42b06c981addfa9a3d25a7f5dfc49a Mon Sep 17 00:00:00 2001
From: kris <kris@zb2.hm.keyb.ie>
Date: Thu, 28 Aug 2025 18:20:36 +0000
Subject: [PATCH] Add comprehensive Capital Gains Tax (CGT) calculation feature
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Features:
- Configurable CGT rates by holding period (1M, 6M, 1Y, 2Y, 2Y+)
- Annual CGT exemption allowance support
- Real-time CGT calculations based on holding periods
- FIFO (First In, First Out) method for calculating gains
- Interactive CGT settings page with visual rate preview
- Integration with gains/losses page showing:
  - Total CGT liability estimation
  - After-tax gains calculation
  - Effective tax rate display
  - Holdings breakdown by tax period
- Database schema for per-user CGT settings
- Comprehensive API endpoints for CGT management
- Responsive design with professional styling

CGT calculation methodology:
- Uses trade purchase dates to determine holding periods
- Applies different rates based on time held (short vs long term)
- Factors in annual exemption allowance
- Shows estimated tax liability for planning purposes

Default rates (configurable):
- 0-1 Month: 40%
- 1-6 Months: 35%
- 6M-1 Year: 30%
- 1-2 Years: 20%
- 2+ Years: 10%
- Annual exemption: €1,270

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 index.html | 124 +++++++++++++++++++
 script.js  | 349 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 server.js  | 123 +++++++++++++++++++
 styles.css | 331 ++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 927 insertions(+)

diff --git a/index.html b/index.html
index fbcab42..bb50d88 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,10 @@
                     <span class="menu-icon">➕</span>
                     <span class="menu-text">Add Trade</span>
                 </li>
+                <li class="menu-item" data-page="cgt-settings">
+                    <span class="menu-icon">🧮</span>
+                    <span class="menu-text">CGT Settings</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>
@@ -278,6 +282,37 @@
                                     <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">
@@ -299,6 +334,95 @@
                         </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+ Years (%)</label>
+                                    <input type="number" id="cgt-longterm" min="0" max="100" step="0.1" value="10" 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">2Y+</span>
+                                    <div class="rate-value">10%</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </main>
         </div>
     </div>
diff --git a/script.js b/script.js
index 4f2b067..9f4b606 100644
--- a/script.js
+++ b/script.js
@@ -2,6 +2,7 @@ class ETFTradeTracker {
     constructor() {
         this.trades = [];
         this.currentPrices = new Map(); // Store current market prices
+        this.cgtSettings = null; // Store CGT settings
         this.currentUser = null;
         this.apiUrl = '/api';
         this.initializeApp();
@@ -17,6 +18,7 @@ class ETFTradeTracker {
         const isAuthenticated = await this.checkAuthentication();
         if (isAuthenticated) {
             await this.loadTrades();
+            await this.loadCGTSettings();
             this.renderTrades();
             this.updateDashboard();
             this.showPage('dashboard');
@@ -91,6 +93,7 @@ class ETFTradeTracker {
             'trade-history': 'Trade History',
             'portfolio': 'Portfolio',
             'gains-losses': 'Gains & Losses',
+            'cgt-settings': 'CGT Settings',
             'admin': 'Admin Panel'
         };
         
@@ -101,6 +104,8 @@ class ETFTradeTracker {
             this.renderPortfolioPage();
         } else if (pageId === 'gains-losses') {
             this.renderGainsLossesPage();
+        } else if (pageId === 'cgt-settings') {
+            this.renderCGTSettingsPage();
         } else if (pageId === 'admin') {
             this.renderAdminPage();
         }
@@ -1089,6 +1094,9 @@ class ETFTradeTracker {
             lastUpdated.textContent = 'Using cost basis - update prices';
         }
 
+        // Calculate and display CGT information
+        this.calculateAndDisplayCGT(etfMap, hasCurrentPrices);
+
         this.renderGainsBreakdown(etfMap);
     }
 
@@ -1154,6 +1162,347 @@ class ETFTradeTracker {
             return (amount >= 0 ? '€' : '-€') + absAmount.toFixed(2);
         }
     }
+
+    calculateAndDisplayCGT(etfMap, hasCurrentPrices) {
+        if (!this.cgtSettings || !this.cgtSettings.enabled || !hasCurrentPrices) {
+            document.getElementById('cgt-summary').style.display = 'none';
+            return;
+        }
+
+        let totalCGTLiability = 0;
+        let totalGainsBeforeTax = 0;
+        let totalAfterTaxGains = 0;
+        const allHoldingPeriods = {};
+
+        // Calculate CGT for each ETF position
+        etfMap.forEach((etf, symbol) => {
+            const cgtCalc = this.calculateCGTForPosition(symbol, etf);
+            totalCGTLiability += cgtCalc.totalCGT;
+            totalGainsBeforeTax += cgtCalc.totalGains;
+            totalAfterTaxGains += cgtCalc.afterTaxGains;
+
+            // Merge holding periods
+            Object.keys(cgtCalc.holdingPeriods).forEach(period => {
+                if (!allHoldingPeriods[period]) {
+                    allHoldingPeriods[period] = { gains: 0, cgt: 0 };
+                }
+                allHoldingPeriods[period].gains += cgtCalc.holdingPeriods[period].gains;
+                allHoldingPeriods[period].cgt += cgtCalc.holdingPeriods[period].cgt;
+            });
+        });
+
+        // Apply annual exemption
+        const exemptionUsed = Math.min(totalGainsBeforeTax, this.cgtSettings.annual_exemption);
+        const taxableGains = Math.max(0, totalGainsBeforeTax - exemptionUsed);
+        const adjustedCGTLiability = Math.max(0, totalCGTLiability - (exemptionUsed * (totalCGTLiability / totalGainsBeforeTax)));
+        const finalAfterTaxGains = totalGainsBeforeTax - adjustedCGTLiability;
+
+        const effectiveRate = totalGainsBeforeTax > 0 ? (adjustedCGTLiability / totalGainsBeforeTax) * 100 : 0;
+
+        // Update CGT summary display
+        document.getElementById('total-cgt-liability').textContent = this.formatCurrency(adjustedCGTLiability);
+        document.getElementById('cgt-effective-rate').textContent = `Effective rate: ${effectiveRate.toFixed(1)}%`;
+        document.getElementById('after-tax-gains').textContent = this.formatCurrency(finalAfterTaxGains);
+        document.getElementById('exemption-used').textContent = `Exemption: ${this.formatCurrency(exemptionUsed)} used`;
+
+        // Update holding periods summary
+        const holdingPeriodsEl = document.getElementById('holding-periods-summary');
+        const shortTermGains = (allHoldingPeriods['0-1 Month']?.gains || 0) + 
+                              (allHoldingPeriods['1-6 Months']?.gains || 0) + 
+                              (allHoldingPeriods['6M-1 Year']?.gains || 0);
+        const longTermGains = (allHoldingPeriods['1-2 Years']?.gains || 0) + 
+                             (allHoldingPeriods['2+ Years']?.gains || 0);
+
+        holdingPeriodsEl.innerHTML = `
+            <div class="period-item">
+                <span class="period-label">Short-term (&lt;1Y):</span>
+                <span class="period-value">${this.formatCurrency(shortTermGains)}</span>
+            </div>
+            <div class="period-item">
+                <span class="period-label">Long-term (1Y+):</span>
+                <span class="period-value">${this.formatCurrency(longTermGains)}</span>
+            </div>
+        `;
+
+        // Show/update CGT card colors
+        const cgtCards = document.querySelectorAll('.cgt-card');
+        cgtCards.forEach(card => {
+            card.classList.remove('positive', 'negative');
+            if (card.classList.contains('total-cgt')) {
+                card.classList.add('negative'); // Tax is always red
+            } else if (card.classList.contains('after-tax')) {
+                card.classList.add(finalAfterTaxGains >= 0 ? 'positive' : 'negative');
+            }
+        });
+
+        document.getElementById('cgt-summary').style.display = 'block';
+    }
+
+    // CGT Settings and Calculation Methods
+    async loadCGTSettings() {
+        try {
+            const response = await fetch(`${this.apiUrl}/cgt-settings`, {
+                method: 'GET',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                this.cgtSettings = await response.json();
+            } else {
+                // Use default settings if fetch fails
+                this.cgtSettings = {
+                    rate_1month: 40.0,
+                    rate_6months: 35.0,
+                    rate_1year: 30.0,
+                    rate_2years: 20.0,
+                    rate_longterm: 10.0,
+                    annual_exemption: 1270.0,
+                    enabled: true
+                };
+            }
+        } catch (error) {
+            console.error('Error loading CGT settings:', error);
+            this.cgtSettings = {
+                rate_1month: 40.0,
+                rate_6months: 35.0,
+                rate_1year: 30.0,
+                rate_2years: 20.0,
+                rate_longterm: 10.0,
+                annual_exemption: 1270.0,
+                enabled: true
+            };
+        }
+    }
+
+    async saveCGTSettings(settings) {
+        try {
+            const response = await fetch(`${this.apiUrl}/cgt-settings`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify(settings)
+            });
+
+            if (response.ok) {
+                this.cgtSettings = settings;
+                this.showNotification('CGT settings saved successfully!', 'success');
+                
+                // Refresh gains/losses calculations
+                if (document.getElementById('gains-losses-page').classList.contains('active')) {
+                    this.renderGainsLossesPage();
+                }
+                
+                // Refresh dashboard
+                this.updateDashboard();
+                return true;
+            } else {
+                const error = await response.json();
+                this.showNotification(error.error || 'Failed to save CGT settings', 'error');
+                return false;
+            }
+        } catch (error) {
+            console.error('Error saving CGT settings:', error);
+            this.showNotification('Failed to save CGT settings', 'error');
+            return false;
+        }
+    }
+
+    getCGTRateForHoldingPeriod(holdingDays) {
+        if (!this.cgtSettings || !this.cgtSettings.enabled) {
+            return 0;
+        }
+
+        const holdingMonths = holdingDays / 30.44; // Average days per month
+        const holdingYears = holdingDays / 365.25; // Average days per year
+
+        if (holdingDays <= 30) {
+            return this.cgtSettings.rate_1month;
+        } else if (holdingMonths <= 6) {
+            return this.cgtSettings.rate_6months;
+        } else if (holdingYears <= 1) {
+            return this.cgtSettings.rate_1year;
+        } else if (holdingYears <= 2) {
+            return this.cgtSettings.rate_2years;
+        } else {
+            return this.cgtSettings.rate_longterm;
+        }
+    }
+
+    calculateCGTForPosition(etfSymbol, etfData) {
+        if (!this.cgtSettings || !this.cgtSettings.enabled) {
+            return {
+                totalCGT: 0,
+                afterTaxGains: etfData.totalGains || 0,
+                effectiveRate: 0,
+                holdingPeriods: {}
+            };
+        }
+
+        const currentPrice = this.currentPrices.get(etfSymbol);
+        if (!currentPrice) {
+            return {
+                totalCGT: 0,
+                afterTaxGains: 0,
+                effectiveRate: 0,
+                holdingPeriods: {}
+            };
+        }
+
+        // Get all buy trades for this ETF, sorted by date (FIFO method)
+        const buyTrades = this.trades
+            .filter(t => t.etfSymbol === etfSymbol && t.tradeType === 'buy')
+            .sort((a, b) => new Date(a.dateTime) - new Date(b.dateTime));
+
+        let totalCGT = 0;
+        let totalGains = 0;
+        let totalCost = 0;
+        const holdingPeriods = {};
+        const now = new Date();
+
+        buyTrades.forEach(trade => {
+            const tradeDate = new Date(trade.dateTime);
+            const holdingDays = Math.floor((now - tradeDate) / (1000 * 60 * 60 * 24));
+            const currentValue = trade.shares * currentPrice;
+            const cost = trade.totalValue;
+            const gain = currentValue - cost;
+
+            if (gain > 0) {
+                const cgtRate = this.getCGTRateForHoldingPeriod(holdingDays);
+                const cgt = (gain * cgtRate) / 100;
+                
+                totalCGT += cgt;
+                totalGains += gain;
+                totalCost += cost;
+
+                // Group by holding period for display
+                const period = this.getHoldingPeriodLabel(holdingDays);
+                if (!holdingPeriods[period]) {
+                    holdingPeriods[period] = { gains: 0, cgt: 0, rate: cgtRate };
+                }
+                holdingPeriods[period].gains += gain;
+                holdingPeriods[period].cgt += cgt;
+            }
+        });
+
+        const afterTaxGains = totalGains - totalCGT;
+        const effectiveRate = totalGains > 0 ? (totalCGT / totalGains) * 100 : 0;
+
+        return {
+            totalCGT,
+            afterTaxGains,
+            effectiveRate,
+            holdingPeriods,
+            totalGains,
+            totalCost
+        };
+    }
+
+    getHoldingPeriodLabel(holdingDays) {
+        const holdingMonths = holdingDays / 30.44;
+        const holdingYears = holdingDays / 365.25;
+
+        if (holdingDays <= 30) {
+            return '0-1 Month';
+        } else if (holdingMonths <= 6) {
+            return '1-6 Months';
+        } else if (holdingYears <= 1) {
+            return '6M-1 Year';
+        } else if (holdingYears <= 2) {
+            return '1-2 Years';
+        } else {
+            return '2+ Years';
+        }
+    }
+
+    renderCGTSettingsPage() {
+        if (!this.cgtSettings) {
+            this.loadCGTSettings();
+            return;
+        }
+
+        // Populate form with current settings
+        document.getElementById('cgt-1month').value = this.cgtSettings.rate_1month;
+        document.getElementById('cgt-6months').value = this.cgtSettings.rate_6months;
+        document.getElementById('cgt-1year').value = this.cgtSettings.rate_1year;
+        document.getElementById('cgt-2years').value = this.cgtSettings.rate_2years;
+        document.getElementById('cgt-longterm').value = this.cgtSettings.rate_longterm;
+        document.getElementById('cgt-annual-exemption').value = this.cgtSettings.annual_exemption;
+        document.getElementById('cgt-enabled').checked = this.cgtSettings.enabled;
+
+        this.updateCGTPreview();
+        this.bindCGTEvents();
+    }
+
+    bindCGTEvents() {
+        const form = document.getElementById('cgt-settings-form');
+        const resetBtn = document.getElementById('reset-cgt-defaults');
+        const inputs = document.querySelectorAll('.cgt-rate-input');
+
+        // Remove existing listeners to prevent duplicates
+        form.removeEventListener('submit', this.handleCGTFormSubmit);
+        resetBtn.removeEventListener('click', this.handleCGTReset);
+
+        // Bind form submission
+        this.handleCGTFormSubmit = async (e) => {
+            e.preventDefault();
+            
+            const settings = {
+                rate_1month: parseFloat(document.getElementById('cgt-1month').value),
+                rate_6months: parseFloat(document.getElementById('cgt-6months').value),
+                rate_1year: parseFloat(document.getElementById('cgt-1year').value),
+                rate_2years: parseFloat(document.getElementById('cgt-2years').value),
+                rate_longterm: parseFloat(document.getElementById('cgt-longterm').value),
+                annual_exemption: parseFloat(document.getElementById('cgt-annual-exemption').value),
+                enabled: document.getElementById('cgt-enabled').checked
+            };
+
+            await this.saveCGTSettings(settings);
+        };
+
+        // Bind reset button
+        this.handleCGTReset = () => {
+            document.getElementById('cgt-1month').value = 40;
+            document.getElementById('cgt-6months').value = 35;
+            document.getElementById('cgt-1year').value = 30;
+            document.getElementById('cgt-2years').value = 20;
+            document.getElementById('cgt-longterm').value = 10;
+            document.getElementById('cgt-annual-exemption').value = 1270;
+            document.getElementById('cgt-enabled').checked = true;
+            this.updateCGTPreview();
+        };
+
+        form.addEventListener('submit', this.handleCGTFormSubmit);
+        resetBtn.addEventListener('click', this.handleCGTReset);
+
+        // Update preview on input change
+        inputs.forEach(input => {
+            input.addEventListener('input', () => this.updateCGTPreview());
+        });
+    }
+
+    updateCGTPreview() {
+        const rates = {
+            '1month': parseFloat(document.getElementById('cgt-1month').value) || 0,
+            '6months': parseFloat(document.getElementById('cgt-6months').value) || 0,
+            '1year': parseFloat(document.getElementById('cgt-1year').value) || 0,
+            '2years': parseFloat(document.getElementById('cgt-2years').value) || 0,
+            'longterm': parseFloat(document.getElementById('cgt-longterm').value) || 0
+        };
+
+        Object.keys(rates).forEach(period => {
+            const rateBar = document.querySelector(`[data-period="${period}"]`);
+            if (rateBar) {
+                const rateValue = rateBar.querySelector('.rate-value');
+                rateValue.textContent = `${rates[period]}%`;
+                
+                // Update bar height based on rate (max 50% height)
+                const height = Math.max(10, (rates[period] / 100) * 50);
+                rateBar.style.setProperty('--rate-height', `${height}%`);
+            }
+        });
+    }
 }
 
 const app = new ETFTradeTracker();
\ No newline at end of file
diff --git a/server.js b/server.js
index 1f8212a..f5d5d00 100644
--- a/server.js
+++ b/server.js
@@ -90,6 +90,32 @@ function initializeDatabase() {
             console.log('Trades table ready');
         }
     });
+
+    // Create CGT settings table
+    const createCGTSettingsTableSQL = `
+        CREATE TABLE IF NOT EXISTS cgt_settings (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            user_id INTEGER NOT NULL,
+            rate_1month REAL DEFAULT 40.0,
+            rate_6months REAL DEFAULT 35.0,
+            rate_1year REAL DEFAULT 30.0,
+            rate_2years REAL DEFAULT 20.0,
+            rate_longterm REAL DEFAULT 10.0,
+            annual_exemption REAL DEFAULT 1270.0,
+            enabled BOOLEAN DEFAULT 1,
+            updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE,
+            UNIQUE(user_id)
+        )
+    `;
+    
+    db.run(createCGTSettingsTableSQL, (err) => {
+        if (err) {
+            console.error('Error creating CGT settings table:', err.message);
+        } else {
+            console.log('CGT settings table ready');
+        }
+    });
 }
 
 async function createDefaultAdmin() {
@@ -423,6 +449,103 @@ app.delete('/api/trades', requireAuth, (req, res) => {
     });
 });
 
+// CGT Settings endpoints
+app.get('/api/cgt-settings', requireAuth, (req, res) => {
+    const sql = 'SELECT * FROM cgt_settings WHERE user_id = ?';
+    
+    db.get(sql, [req.session.userId], (err, row) => {
+        if (err) {
+            console.error('Error fetching CGT settings:', err.message);
+            res.status(500).json({ error: 'Failed to fetch CGT settings' });
+            return;
+        }
+        
+        // Return default settings if none exist
+        if (!row) {
+            res.json({
+                rate_1month: 40.0,
+                rate_6months: 35.0,
+                rate_1year: 30.0,
+                rate_2years: 20.0,
+                rate_longterm: 10.0,
+                annual_exemption: 1270.0,
+                enabled: true
+            });
+            return;
+        }
+        
+        res.json({
+            rate_1month: row.rate_1month,
+            rate_6months: row.rate_6months,
+            rate_1year: row.rate_1year,
+            rate_2years: row.rate_2years,
+            rate_longterm: row.rate_longterm,
+            annual_exemption: row.annual_exemption,
+            enabled: row.enabled === 1
+        });
+    });
+});
+
+app.post('/api/cgt-settings', requireAuth, (req, res) => {
+    const {
+        rate_1month = 40.0,
+        rate_6months = 35.0,
+        rate_1year = 30.0,
+        rate_2years = 20.0,
+        rate_longterm = 10.0,
+        annual_exemption = 1270.0,
+        enabled = true
+    } = req.body;
+
+    // Validate rates are between 0 and 100
+    const rates = [rate_1month, rate_6months, rate_1year, rate_2years, rate_longterm];
+    if (rates.some(rate => rate < 0 || rate > 100)) {
+        return res.status(400).json({ error: 'CGT rates must be between 0 and 100' });
+    }
+
+    if (annual_exemption < 0) {
+        return res.status(400).json({ error: 'Annual exemption cannot be negative' });
+    }
+
+    const sql = `
+        INSERT OR REPLACE INTO cgt_settings 
+        (user_id, rate_1month, rate_6months, rate_1year, rate_2years, rate_longterm, annual_exemption, enabled, updated_at)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
+    `;
+
+    const params = [
+        req.session.userId,
+        rate_1month,
+        rate_6months,
+        rate_1year,
+        rate_2years,
+        rate_longterm,
+        annual_exemption,
+        enabled ? 1 : 0
+    ];
+
+    db.run(sql, params, function(err) {
+        if (err) {
+            console.error('Error saving CGT settings:', err.message);
+            res.status(500).json({ error: 'Failed to save CGT settings' });
+            return;
+        }
+
+        res.json({
+            message: 'CGT settings saved successfully',
+            settings: {
+                rate_1month,
+                rate_6months,
+                rate_1year,
+                rate_2years,
+                rate_longterm,
+                annual_exemption,
+                enabled
+            }
+        });
+    });
+});
+
 app.get('/api/portfolio-summary', requireAuth, (req, res) => {
     const sql = `
         SELECT 
diff --git a/styles.css b/styles.css
index 0b459a9..badcf43 100644
--- a/styles.css
+++ b/styles.css
@@ -1309,4 +1309,335 @@ body {
         right: 10px;
         max-width: none;
     }
+    
+    .cgt-rates-grid {
+        grid-template-columns: 1fr;
+        gap: 15px;
+    }
+    
+    .cgt-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .cgt-preview-chart {
+        flex-direction: column;
+        height: auto;
+        gap: 10px;
+    }
+    
+    .rate-bar {
+        width: 100%;
+        height: 40px;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+}
+
+/* CGT Settings Styles */
+.cgt-settings-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.cgt-explanation {
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 25px;
+    border-left: 4px solid #007bff;
+}
+
+.cgt-explanation p {
+    margin: 0;
+    color: #666;
+}
+
+.cgt-settings-form {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    margin-bottom: 25px;
+}
+
+.cgt-rates-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.cgt-rate-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.cgt-rate-item label {
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #333;
+    font-size: 14px;
+}
+
+.cgt-rate-input {
+    padding: 12px;
+    border: 2px solid #e1e5e9;
+    border-radius: 6px;
+    font-size: 16px;
+    transition: border-color 0.2s;
+}
+
+.cgt-rate-input:focus {
+    outline: none;
+    border-color: #007bff;
+}
+
+.cgt-options {
+    border-top: 1px solid #e9ecef;
+    padding-top: 25px;
+    margin-top: 25px;
+}
+
+.cgt-options h3 {
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.cgt-options .form-group {
+    margin-bottom: 20px;
+}
+
+.cgt-options label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #333;
+}
+
+.cgt-options input[type="number"] {
+    width: 100%;
+    max-width: 250px;
+    padding: 12px;
+    border: 2px solid #e1e5e9;
+    border-radius: 6px;
+    font-size: 16px;
+}
+
+.cgt-options small {
+    display: block;
+    color: #666;
+    font-size: 12px;
+    margin-top: 5px;
+}
+
+.checkbox-label {
+    display: flex !important;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.checkbox-label input[type="checkbox"] {
+    width: auto;
+    margin: 0;
+}
+
+.cgt-actions {
+    display: flex;
+    gap: 15px;
+    margin-top: 25px;
+    border-top: 1px solid #e9ecef;
+    padding-top: 25px;
+}
+
+.save-cgt-btn {
+    background: #28a745;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.save-cgt-btn:hover {
+    background: #218838;
+}
+
+.reset-cgt-btn {
+    background: #6c757d;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.reset-cgt-btn:hover {
+    background: #5a6268;
+}
+
+.cgt-preview {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.cgt-preview h3 {
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.cgt-preview-chart {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    height: 120px;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    gap: 15px;
+}
+
+.rate-bar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    height: 100%;
+    position: relative;
+    background: linear-gradient(135deg, #007bff, #0056b3);
+    border-radius: 4px;
+    justify-content: flex-end;
+    padding: 8px 4px;
+    color: white;
+    font-weight: 600;
+    font-size: 12px;
+    min-height: var(--rate-height, 20%);
+    transition: min-height 0.3s ease;
+}
+
+.period-label {
+    position: absolute;
+    bottom: -25px;
+    font-size: 11px;
+    color: #666;
+    font-weight: 600;
+}
+
+.rate-value {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+/* CGT Summary Styles */
+.cgt-summary {
+    margin-top: 30px;
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    border-left: 4px solid #ffc107;
+}
+
+.cgt-summary h3 {
+    margin-bottom: 20px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.cgt-summary h3::before {
+    content: '🧮';
+    font-size: 18px;
+}
+
+.cgt-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.cgt-card {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    border-left: 4px solid #dee2e6;
+    transition: all 0.2s;
+}
+
+.cgt-card.positive {
+    border-left-color: #28a745;
+    background: #f8fff9;
+}
+
+.cgt-card.negative {
+    border-left-color: #dc3545;
+    background: #fffafa;
+}
+
+.cgt-card h4 {
+    margin-bottom: 12px;
+    color: #666;
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.cgt-value {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 8px;
+    color: #333;
+}
+
+.cgt-card.positive .cgt-value {
+    color: #28a745;
+}
+
+.cgt-card.negative .cgt-value {
+    color: #dc3545;
+}
+
+.cgt-detail {
+    font-size: 12px;
+    color: #666;
+}
+
+.holding-periods {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.period-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.period-item:last-child {
+    border-bottom: none;
+}
+
+.period-label {
+    font-size: 12px;
+    color: #666;
+    font-weight: 500;
+}
+
+.period-value {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
 }
\ No newline at end of file