Moon-Household-Budget/templates/taxes.html

{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>{{ year }} Tax Estimator</h1>
  <span style="font-size:0.85rem;color:var(--text-light);">Mixed income household (self-employment + W-2) — Wisconsin, MFJ</span>
</div>

<!-- Hero numbers -->
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem;">
  <div class="card-wide" style="text-align:center;padding:1.25rem;">
    <div style="font-size:0.8rem;color:var(--text-light);margin-bottom:0.25rem;">YTD Income</div>
    <div style="font-size:2rem;font-weight:700;color:var(--text-dark);">${{ ytd_total | money }}</div>
  </div>
  <div class="card-wide" style="text-align:center;padding:1.25rem;">
    <div style="font-size:0.8rem;color:var(--text-light);margin-bottom:0.25rem;">Estimated Tax Owed</div>
    <div style="font-size:2rem;font-weight:700;color:#c07070;">${{ estimate.total | money }}</div>
    <div style="font-size:0.78rem;color:var(--text-light);">~{{ estimate.effective_rate }}% effective rate</div>
  </div>
  <div class="card-wide" style="text-align:center;padding:1.25rem;">
    <div style="font-size:0.8rem;color:var(--text-light);margin-bottom:0.25rem;">Set Aside So Far</div>
    <div style="font-size:2rem;font-weight:700;color:#5A9E68;">${{ total_set_aside | money }}</div>
  </div>
  <div class="card-wide" style="text-align:center;padding:1.25rem;">
    {% if over_saved > 0 %}
    <div style="font-size:0.8rem;color:var(--text-light);margin-bottom:0.25rem;">Over-Saved</div>
    <div style="font-size:2rem;font-weight:700;color:#5A9E68;">${{ over_saved | money }}</div>
    <div style="font-size:0.78rem;color:var(--text-light);">nice work!</div>
    {% else %}
    <div style="font-size:0.8rem;color:var(--text-light);margin-bottom:0.25rem;">Still Need to Set Aside</div>
    <div style="font-size:2rem;font-weight:700;color:{% if still_needed > 500 %}#c07070{% else %}#d4a843{% endif %};">${{ still_needed | money }}</div>
    {% endif %}
  </div>
</div>

<!-- Progress bar -->
{% if estimate.total > 0 %}
{% set pct = [(total_set_aside / estimate.total * 100), 100] | min | int %}
<div style="background:var(--warm-white);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1.5rem;">
  <div style="display:flex;justify-content:space-between;font-size:0.85rem;margin-bottom:0.5rem;">
    <span>Tax savings progress</span>
    <span style="font-weight:600;">{{ pct }}% saved</span>
  </div>
  <div style="background:#EDE8E2;border-radius:6px;height:12px;">
    <div style="background:{% if pct >= 100 %}#5A9E68{% elif pct >= 60 %}#d4a843{% else %}#c07070{% endif %};border-radius:6px;height:12px;width:{{ pct }}%;transition:width 0.3s;"></div>
  </div>
</div>
{% endif %}

<!-- Breakdown -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.5rem;">

  <!-- Tax breakdown -->
  <div class="budget-section">
    <div class="budget-section-header" style="border-left-color:#c07070;">
      <h3>How We Got There</h3>
    </div>
    <table class="budget-table">
      <tbody>
        <tr style="background:var(--cream);">
          <td colspan="2" style="font-size:0.78rem;color:var(--text-mid);padding:0.4rem 0.5rem;">
            <strong>Self-employment income</strong> (Bonna + Car Flipping): ${{ ytd_se | money }} &nbsp;·&nbsp;
            <strong>W-2 income</strong> (Tony / Auto King): ${{ ytd_w2 | money }}
          </td>
        </tr>
        <tr>
          <td>Self-Employment Tax <span class="muted" style="font-size:0.78rem;">(SS + Medicare on SE income only)</span></td>
          <td class="amount">${{ estimate.se_tax | money }}</td>
        </tr>
        <tr>
          <td>Federal Income Tax <span class="muted" style="font-size:0.78rem;">(~{{ rates.federal }}% after $30k MFJ deduction)</span></td>
          <td class="amount">${{ estimate.federal | money }}</td>
        </tr>
        <tr>
          <td>Wisconsin State Tax <span class="muted" style="font-size:0.78rem;">(~{{ rates.wi_state }}% after $30k MFJ deduction)</span></td>
          <td class="amount">${{ estimate.wi_state | money }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr class="total-row">
          <td>Total Estimated</td>
          <td class="amount">${{ estimate.total | money }}</td>
        </tr>
      </tfoot>
    </table>
    <details style="margin-top:0.75rem;">
      <summary style="font-size:0.8rem;color:var(--text-light);cursor:pointer;">Adjust tax rates</summary>
      <form method="POST" action="{{ url_for('taxes_rates') }}" style="margin-top:0.75rem;display:grid;gap:0.5rem;">
        <div style="display:flex;align-items:center;gap:0.75rem;">
          <label style="font-size:0.82rem;width:160px;">SE Tax %</label>
          <input type="number" name="se_tax" step="0.1" value="{{ rates.se_tax }}" class="budget-input no-dollar" style="width:80px;">
        </div>
        <div style="display:flex;align-items:center;gap:0.75rem;">
          <label style="font-size:0.82rem;width:160px;">Federal %</label>
          <input type="number" name="federal" step="0.1" value="{{ rates.federal }}" class="budget-input no-dollar" style="width:80px;">
        </div>
        <div style="display:flex;align-items:center;gap:0.75rem;">
          <label style="font-size:0.82rem;width:160px;">WI State %</label>
          <input type="number" name="wi_state" step="0.1" value="{{ rates.wi_state }}" class="budget-input no-dollar" style="width:80px;">
        </div>
        <button type="submit" class="btn btn-ghost" style="width:fit-content;font-size:0.82rem;">Update Rates</button>
      </form>
    </details>
  </div>

  <!-- Quarterly breakdown -->
  <div class="budget-section">
    <div class="budget-section-header" style="border-left-color:#D4A96A;">
      <h3>Quarterly Estimates</h3>
    </div>
    <table class="budget-table">
      <thead><tr><th>Quarter</th><th>Income</th><th>Est. Tax</th><th>Due</th></tr></thead>
      <tbody>
        {% for q in quarters %}
        <tr{% if q.income == 0 %} style="opacity:0.5;"{% endif %}>
          <td style="font-size:0.85rem;">{{ q.label }}</td>
          <td class="amount">${{ q.income | money }}</td>
          <td class="amount">${{ q.estimate.total | money }}</td>
          <td style="font-size:0.78rem;color:var(--text-light);">{{ q.due_date }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    <p style="font-size:0.75rem;color:var(--text-light);margin-top:0.5rem;padding:0 0.25rem;">These are federal estimated payment deadlines. WI follows the same schedule.</p>
  </div>

</div>

<!-- Set aside log -->
<div class="budget-section">
  <div class="budget-section-header" style="border-left-color:#5A9E68;">
    <h3>Tax Savings Log</h3>
  </div>
  <details class="add-debt-details" style="margin-bottom:1rem;">
    <summary class="btn btn-primary" style="display:inline-block;cursor:pointer;">+ Log Money Set Aside</summary>
    <div style="padding:1rem 0;">
      <form method="POST" action="{{ url_for('taxes_set_aside') }}" style="display:flex;gap:0.75rem;flex-wrap:wrap;align-items:flex-end;">
        <div>
          <label style="font-size:0.8rem;display:block;margin-bottom:0.2rem;">Date</label>
          <input type="date" name="date" value="{{ today.strftime('%Y-%m-%d') }}" class="budget-input" required>
        </div>
        <div>
          <label style="font-size:0.8rem;display:block;margin-bottom:0.2rem;">Amount</label>
          <input type="number" name="amount" step="0.01" min="0" class="budget-input" style="width:130px;" placeholder="0.00" required>
        </div>
        <div>
          <label style="font-size:0.8rem;display:block;margin-bottom:0.2rem;">Notes</label>
          <input type="text" name="notes" class="budget-input" style="width:200px;" placeholder="e.g. moved to savings account">
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
      </form>
    </div>
  </details>

  {% if set_aside_log %}
  <table class="budget-table">
    <thead><tr><th>Date</th><th>Amount</th><th>Notes</th><th></th></tr></thead>
    <tbody>
      {% for e in set_aside_log | sort(attribute='date', reverse=True) %}
      <tr>
        <td>{{ e.date }}</td>
        <td class="amount" style="color:#5A9E68;">${{ e.amount | money }}</td>
        <td class="muted">{{ e.notes }}</td>
        <td>
          <form method="POST" action="{{ url_for('taxes_set_aside_delete', entry_id=e.id) }}">
            <button type="submit" class="edit-link" style="color:#c07070;background:none;border:none;cursor:pointer;">Remove</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
    <tfoot>
      <tr class="total-row">
        <td>Total Set Aside</td>
        <td class="amount" style="color:#5A9E68;">${{ total_set_aside | money }}</td>
        <td colspan="2"></td>
      </tr>
    </tfoot>
  </table>
  {% else %}
  <p class="muted" style="padding:0.5rem 0;">Nothing logged yet. Every time you move money to your tax savings account, record it here.</p>
  {% endif %}
</div>

<div style="background:#fff8e6;border:1px solid #e8d49a;border-radius:var(--radius);padding:1rem 1.25rem;font-size:0.83rem;color:var(--text-mid);margin-top:1rem;">
  <strong>Heads up:</strong> These are estimates based on flat rates and may not perfectly match your actual tax bill. We recommend setting aside the estimated amount and working with a tax professional when it's time to file. The SE tax calculation uses the IRS method (92.35% of net income) and deducts half of SE tax before calculating income tax, which is how the IRS does it.
</div>
{% endblock %}