Add comprehensive Capital Gains Tax (CGT) calculation feature
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>
This commit is contained in:
kris
+124
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user