Add dashboard top 5 accounts display and form cancel/add functionality
Features added: - Dashboard now shows top 5 holdings, accounts, and subscriptions under each segment - Quick action cards positioned underneath data cards for easy access - Cancel/Add buttons added to all forms (trade, cash account, subscription) - Auto-focus functionality when navigating from quick actions - Responsive design optimized for mobile and desktop - Consistent styling following existing design patterns UI improvements: - Card groups structure for better organization - Top accounts sections with hover effects and proper formatting - Form actions container with proper button alignment - Mobile-responsive quick action cards and forms 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kris
+74
-30
@@ -103,43 +103,81 @@
|
||||
<!-- Dashboard Page -->
|
||||
<div id="dashboard-page" class="page">
|
||||
<div class="dashboard-summary">
|
||||
<div class="summary-card portfolio-summary" onclick="app.navigateToPage('portfolio')">
|
||||
<div class="summary-header">
|
||||
<h3>Portfolio</h3>
|
||||
<div class="card-group">
|
||||
<div class="summary-card portfolio-summary">
|
||||
<div class="summary-header">
|
||||
<h3>Portfolio</h3>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<div class="primary-value" id="dashboard-current-value">€0.00</div>
|
||||
<div class="secondary-value" id="dashboard-total-gains">€0.00</div>
|
||||
</div>
|
||||
<div class="top-accounts-section">
|
||||
<div class="top-accounts-title">Top Holdings</div>
|
||||
<div id="dashboard-top-portfolio" class="top-accounts-list">
|
||||
<div class="no-data-small">No positions yet</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="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 class="quick-action-card portfolio-action" onclick="app.navigateToPage('add-trade')">
|
||||
<div class="quick-action-icon">➕</div>
|
||||
<div class="quick-action-text">Add Trade</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-card cash-summary" onclick="app.navigateToPage('cash-accounts')">
|
||||
<div class="summary-header">
|
||||
<h3>Cash</h3>
|
||||
<div class="card-group">
|
||||
<div class="summary-card cash-summary">
|
||||
<div class="summary-header">
|
||||
<h3>Cash</h3>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<div class="primary-value" id="dashboard-cash-total">€0.00</div>
|
||||
<div class="secondary-value" id="dashboard-account-count">0 accounts</div>
|
||||
</div>
|
||||
<div class="top-accounts-section">
|
||||
<div class="top-accounts-title">Top Accounts</div>
|
||||
<div id="dashboard-top-cash" class="top-accounts-list">
|
||||
<div class="no-data-small">No accounts yet</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="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 class="quick-action-card cash-action" onclick="app.navigateToPage('cash-accounts')">
|
||||
<div class="quick-action-icon">💰</div>
|
||||
<div class="quick-action-text">Add Account</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-card subscriptions-summary" onclick="app.navigateToPage('subscriptions')">
|
||||
<div class="summary-header">
|
||||
<h3>Subscriptions</h3>
|
||||
<div class="card-group">
|
||||
<div class="summary-card subscriptions-summary">
|
||||
<div class="summary-header">
|
||||
<h3>Subscriptions</h3>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<div class="primary-value" id="dashboard-subscription-monthly">€0.00/mo</div>
|
||||
<div class="secondary-value" id="dashboard-subscription-count">0 services</div>
|
||||
</div>
|
||||
<div class="top-accounts-section">
|
||||
<div class="top-accounts-title">Top Services</div>
|
||||
<div id="dashboard-top-subscriptions" class="top-accounts-list">
|
||||
<div class="no-data-small">No subscriptions yet</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="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 class="quick-action-card subscription-action" onclick="app.navigateToPage('add-subscription')">
|
||||
<div class="quick-action-icon">📱</div>
|
||||
<div class="quick-action-text">Add Service</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="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 class="card-group">
|
||||
<div class="summary-card total-summary">
|
||||
<div class="summary-header">
|
||||
<h3>Total Value</h3>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<div class="primary-value total" id="dashboard-total-combined">€0.00</div>
|
||||
<div class="secondary-value" id="dashboard-performance">0.0%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -203,8 +241,11 @@
|
||||
<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>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="cancel-btn" onclick="app.navigateToPage('dashboard')">Cancel</button>
|
||||
<button type="submit" class="submit-btn">Add Trade</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -427,7 +468,10 @@ curl -H "Authorization: Bearer YOUR_TOKEN" \<br>
|
||||
<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>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="cancel-btn" onclick="app.navigateToPage('dashboard')">Cancel</button>
|
||||
<button type="submit" class="create-account-btn">Add Account</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1044,8 +1088,8 @@ curl -H "Authorization: Bearer YOUR_TOKEN" \<br>
|
||||
</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>
|
||||
<button type="button" class="cancel-btn" onclick="app.navigateToPage('dashboard')">Cancel</button>
|
||||
<button type="submit" class="submit-btn">Add Subscription</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user