06/02 Update Accounts page to separate Checking/Savings and Credit Card

app/routes/accounts.py

@@ -44,15 +44,30 @@ class AccountForm(FlaskForm):
     submit = SubmitField('Save')
 
 
+BANK_TYPES = {'checking', 'savings', 'cash', 'investment', 'crypto', 'other'}
+
+
 @accounts_bp.route('/')
 @login_required
 def index():
-    accounts = Account.query.filter_by(is_active=True).order_by(Account.name).all()
-    # Recalc balances on page load
-    for a in accounts:
+    tab = request.args.get('tab', 'bank')
+    if tab not in ('bank', 'credit'):
+        tab = 'bank'
+
+    all_accounts = Account.query.filter_by(is_active=True).order_by(Account.name).all()
+    for a in all_accounts:
         calc_balance(a.id)
-    accounts = Account.query.filter_by(is_active=True).order_by(Account.name).all()
-    return render_template('accounts/index.html', accounts=accounts)
+    all_accounts = Account.query.filter_by(is_active=True).order_by(Account.name).all()
+
+    bank_accounts   = [a for a in all_accounts if a.account_type in BANK_TYPES]
+    credit_accounts = [a for a in all_accounts if a.account_type == 'credit_card']
+    accounts = credit_accounts if tab == 'credit' else bank_accounts
+
+    return render_template('accounts/index.html',
+                           accounts=accounts,
+                           tab=tab,
+                           bank_count=len(bank_accounts),
+                           credit_count=len(credit_accounts))
 
 
 @accounts_bp.route('/new', methods=['GET', 'POST'])

app/templates/accounts/index.html

@@ -7,12 +7,27 @@
 {% endblock %}
 
 {% block content %}
+
+<!-- Tabs -->
+<div class="d-flex gap-1 mb-3">
+    <a href="{{ url_for('accounts.index', tab='bank') }}"
+       class="btn btn-sm {% if tab=='bank' %}btn-primary{% else %}btn-outline-secondary{% endif %}" style="font-size:13px;">
+        <i class="bi bi-bank me-1"></i>Bank Accounts
+        <span class="badge ms-1" style="font-size:10px;background:{% if tab=='bank' %}rgba(255,255,255,.25){% else %}#e2e8f0;color:#475569{% endif %};">{{ bank_count }}</span>
+    </a>
+    <a href="{{ url_for('accounts.index', tab='credit') }}"
+       class="btn btn-sm {% if tab=='credit' %}btn-danger{% else %}btn-outline-secondary{% endif %}" style="font-size:13px;">
+        <i class="bi bi-credit-card me-1"></i>Credit Cards
+        <span class="badge ms-1" style="font-size:10px;background:{% if tab=='credit' %}rgba(255,255,255,.25){% else %}#fee2e2;color:#991b1b{% endif %};">{{ credit_count }}</span>
+    </a>
+</div>
+
 {% if accounts %}
 <div class="row g-3">
     {% for acct in accounts %}
     <div class="col-12 col-md-6 col-xl-4">
         <div class="pcard" style="border-left: 4px solid {{ acct.color }};">
-            <div class="d-flex justify-content-between align-items-start mb-3">
+            <div class="d-flex justify-content-between align-items-start">
                 <div class="d-flex align-items-center gap-2">
                     <div style="width:36px;height:36px;border-radius:9px;background:{{ acct.color }}22;color:{{ acct.color }};display:flex;align-items:center;justify-content:center;font-size:18px;">
                         <i class="bi {{ acct.icon }}"></i>
@@ -36,19 +51,54 @@
                     </ul>
                 </div>
             </div>
+
             {% if acct.notes %}
-            <div style="font-size:12px;color:var(--muted);margin-top:8px;">{{ acct.notes }}</div>
+            <div style="font-size:12px;color:var(--muted);margin-top:10px;">{{ acct.notes }}</div>
+            {% endif %}
+
+            {% if tab == 'credit' %}
+            <div class="d-flex gap-2 mt-3">
+                <a href="{{ url_for('transactions.index', tab='expense', account_id=acct.id) }}"
+                   class="btn btn-sm flex-fill" style="font-size:11px;background:#fee2e2;color:#991b1b;border:none;">
+                    <i class="bi bi-arrow-up-circle me-1"></i>Charges
+                </a>
+                <a href="{{ url_for('transactions.new', type='expense') }}"
+                   class="btn btn-sm flex-fill" style="font-size:11px;background:#f1f5f9;color:#475569;border:none;">
+                    <i class="bi bi-plus-lg me-1"></i>Add Charge
+                </a>
+            </div>
+            {% else %}
+            <div class="d-flex gap-2 mt-3">
+                <a href="{{ url_for('transactions.index', tab='expense', account_id=acct.id) }}"
+                   class="btn btn-sm flex-fill" style="font-size:11px;background:#f1f5f9;color:#475569;border:none;">
+                    <i class="bi bi-list-ul me-1"></i>Transactions
+                </a>
+                <a href="{{ url_for('transactions.new', type='income') }}"
+                   class="btn btn-sm flex-fill" style="font-size:11px;background:#d1fae5;color:#065f46;border:none;">
+                    <i class="bi bi-plus-lg me-1"></i>Add Income
+                </a>
+            </div>
             {% endif %}
         </div>
     </div>
     {% endfor %}
 </div>
+
 {% else %}
 <div class="pcard text-center py-5">
-    <i class="bi bi-wallet2 text-muted" style="font-size:3rem;"></i>
-    <h5 class="mt-3 mb-1">No accounts yet</h5>
-    <p class="text-muted small mb-3">Add your bank accounts, cash, and credit cards.</p>
-    <a href="{{ url_for('accounts.new') }}" class="btn btn-primary btn-sm">Add Account</a>
+    {% if tab == 'credit' %}
+    <i class="bi bi-credit-card text-muted" style="font-size:3rem;"></i>
+    <h5 class="mt-3 mb-1">No credit cards yet</h5>
+    <p class="text-muted small mb-3">Add a credit card account to track charges and payments.</p>
+    {% else %}
+    <i class="bi bi-bank text-muted" style="font-size:3rem;"></i>
+    <h5 class="mt-3 mb-1">No bank accounts yet</h5>
+    <p class="text-muted small mb-3">Add your checking, savings, or cash accounts.</p>
+    {% endif %}
+    <a href="{{ url_for('accounts.new') }}" class="btn btn-primary btn-sm">
+        <i class="bi bi-plus-lg me-1"></i>New Account
+    </a>
 </div>
 {% endif %}
+
 {% endblock %}