Initial commit — Moon Household Budget

templates/strategy.html

@@ -0,0 +1,116 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="page-header">
+  <h1>Debt Payoff Strategy</h1>
+  <a href="{{ url_for('debts_view') }}" class="btn btn-ghost">← Back to Debts</a>
+</div>
+
+<div class="card-wide" style="margin-bottom:1.5rem;">
+  <h2>How much can you put toward debt each month?</h2>
+  <p class="helper-text">Your current total minimums are <strong>${{ total_minimums | money }}</strong>. Enter your total monthly debt payment below — anything above the minimums gets applied strategically.</p>
+  <form method="POST" style="display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-top:1rem;">
+    <div class="form-group" style="margin:0;">
+      <label>Total Monthly Payment</label>
+      <input type="number" name="extra_monthly" step="0.01" min="{{ total_minimums }}"
+        value="{{ total_monthly or total_minimums }}" placeholder="{{ total_minimums }}">
+    </div>
+    <button type="submit" class="btn btn-primary">Calculate</button>
+  </form>
+</div>
+
+{% if av_months %}
+<!-- Summary comparison -->
+<div class="strategy-compare">
+  <div class="strategy-card strategy-avalanche">
+    <div class="strategy-label">Avalanche Method</div>
+    <div class="strategy-subtitle">Highest interest rate first</div>
+    <div class="strategy-stat">
+      <span>Debt-free in</span>
+      <strong>{{ av_months }} months</strong>
+    </div>
+    <div class="strategy-stat">
+      <span>Total interest paid</span>
+      <strong>${{ av_interest | money }}</strong>
+    </div>
+    <div class="strategy-badge">Saves the most money</div>
+  </div>
+
+  <div class="strategy-vs">VS</div>
+
+  <div class="strategy-card strategy-snowball">
+    <div class="strategy-label">Snowball Method</div>
+    <div class="strategy-subtitle">Smallest balance first</div>
+    <div class="strategy-stat">
+      <span>Debt-free in</span>
+      <strong>{{ sb_months }} months</strong>
+    </div>
+    <div class="strategy-stat">
+      <span>Total interest paid</span>
+      <strong>${{ sb_interest | money }}</strong>
+    </div>
+    <div class="strategy-badge">Faster wins, more motivation</div>
+  </div>
+</div>
+
+{% if interest_saved > 0 or months_diff != 0 %}
+<div class="strategy-insight">
+  {% if interest_saved > 0 %}
+  <span>The Avalanche method saves you <strong>${{ interest_saved | money }}</strong> in interest</span>
+  {% endif %}
+  {% if months_diff > 0 %}
+  <span>The Snowball method takes <strong>{{ months_diff }} month{{ 's' if months_diff != 1 }}</strong> longer</span>
+  {% elif months_diff < 0 %}
+  <span>The Avalanche method takes <strong>{{ months_diff|abs }} month{{ 's' if months_diff|abs != 1 }}</strong> longer</span>
+  {% endif %}
+</div>
+{% endif %}
+
+<!-- Side by side payoff order -->
+<div class="strategy-tables">
+  <div class="strategy-table-wrap">
+    <h3>Avalanche Payoff Order</h3>
+    <table class="txn-table">
+      <thead>
+        <tr><th>#</th><th>Debt</th><th>Owner</th><th>Paid Off</th><th>Interest Paid</th></tr>
+      </thead>
+      <tbody>
+        {% for d in avalanche | sort(attribute='paid_off_month') %}
+        <tr>
+          <td class="muted">{{ loop.index }}</td>
+          <td>{{ d.name }}</td>
+          <td><span class="owner-tag" style="background:{{ owner_colors.get(d.owner, '#ddd') }};">{{ d.owner }}</span></td>
+          <td>{{ d.paid_off_month or '—' }}</td>
+          <td class="amount">${{ d.total_interest | money }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+
+  <div class="strategy-table-wrap">
+    <h3>Snowball Payoff Order</h3>
+    <table class="txn-table">
+      <thead>
+        <tr><th>#</th><th>Debt</th><th>Owner</th><th>Paid Off</th><th>Interest Paid</th></tr>
+      </thead>
+      <tbody>
+        {% for d in snowball | sort(attribute='paid_off_month') %}
+        <tr>
+          <td class="muted">{{ loop.index }}</td>
+          <td>{{ d.name }}</td>
+          <td><span class="owner-tag" style="background:{{ owner_colors.get(d.owner, '#ddd') }};">{{ d.owner }}</span></td>
+          <td>{{ d.paid_off_month or '—' }}</td>
+          <td class="amount">${{ d.total_interest | money }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+{% else %}
+<div class="empty-state">
+  <p>Add your debts and monthly payment amount above to see your payoff strategy.</p>
+</div>
+{% endif %}
+{% endblock %}