06/05 Optimize app

app/templates/dashboard/index.html

@@ -362,6 +362,62 @@
     </div>
 </div>
 
+<!-- Upcoming Bills -->
+{% if upcoming_bills %}
+<div class="pcard mt-3">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <span class="pcard-title mb-0">Upcoming Bills <span style="font-size:11px;font-weight:400;color:var(--muted);">(next 14 days)</span></span>
+        <a href="{{ url_for('settings.recurring') }}" style="font-size:12px;color:#3b82f6;">Manage →</a>
+    </div>
+    <div class="table-wrap">
+    <table class="pfm-table">
+        <thead>
+            <tr>
+                <th style="padding-left:16px;">Rule</th>
+                <th class="d-mob-none">Frequency</th>
+                <th>Due</th>
+                <th class="text-end">Amount</th>
+                <th class="text-end d-mob-none" style="padding-right:16px;">Account</th>
+            </tr>
+        </thead>
+        <tbody>
+        {% for rule in upcoming_bills %}
+        <tr>
+            <td style="padding-left:16px;">
+                <div class="d-flex align-items-center gap-2">
+                    {% if rule.category %}
+                    <div style="width:26px;height:26px;border-radius:6px;background:{{ rule.category.color }}22;color:{{ rule.category.color }};display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;">
+                        <i class="bi {{ rule.category.icon }}"></i>
+                    </div>
+                    {% else %}
+                    <div style="width:26px;height:26px;border-radius:6px;background:#f1f5f9;color:#94a3b8;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;">
+                        <i class="bi bi-arrow-repeat"></i>
+                    </div>
+                    {% endif %}
+                    <span style="font-size:13px;font-weight:500;">{{ rule.name }}</span>
+                </div>
+            </td>
+            <td class="d-mob-none" style="font-size:12px;color:var(--muted);">{{ rule.frequency | title }}</td>
+            <td>
+                {% set days_until = (rule.next_run - today).days %}
+                <span style="font-size:12px;" class="{% if days_until == 0 %}text-expense fw-semibold{% elif days_until <= 3 %}text-warning{% endif %}">
+                    {% if days_until == 0 %}Today
+                    {% elif days_until == 1 %}Tomorrow
+                    {% else %}{{ rule.next_run.strftime('%b %d') }}{% endif %}
+                </span>
+            </td>
+            <td class="text-end mono {% if rule.transaction_type=='income' %}text-income{% else %}text-expense{% endif %}" style="font-size:13px;font-weight:600;">
+                {% if rule.transaction_type=='income' %}+{% else %}-{% endif %}{{ rule.amount | currency }}
+            </td>
+            <td class="text-end d-mob-none" style="font-size:12px;color:var(--muted);padding-right:16px;">{{ rule.account.name if rule.account else '—' }}</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+    </div>
+</div>
+{% endif %}
+
 <!-- Custom Range Modal -->
 <div class="modal fade" id="customModal" tabindex="-1">
     <div class="modal-dialog modal-sm">