Phase 6: Summary API and page

- Add SummaryController: computes monthly income, breakdown by type (Need/Want/Save/Unspent), and pre-tax income
- Need/Want/Save get target% (50/30/20), maxAmount, and remaining; Unspent shows totals only
- PUT /summary/tax-rate updates EffectiveTaxRate on the budget (no new migration needed)
- Add SummaryDto, SummaryBreakdownItem, PreTaxIncomeDto DTOs
- Add Summary page: income header cards, type breakdown table with ⓘ tooltip for target%,
  pre-tax section with editable tax rate field

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/Budget.Client/src/pages/SummaryPage.tsx

@@ -1,3 +1,111 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import type { SummaryDto } from '../types';
+import { api } from '../api/client';
+import { MoneyDisplay } from '../components/MoneyDisplay';
+import { BudgetNav } from '../components/BudgetNav';
+
+const fmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
+
 export function SummaryPage() {
-  return <div>Summary — coming soon</div>;
+  const { id: budgetId } = useParams<{ id: string }>();
+  const [summary, setSummary] = useState<SummaryDto | null>(null);
+  const [taxRateInput, setTaxRateInput] = useState('');
+  const [savingTax, setSavingTax] = useState(false);
+
+  useEffect(() => {
+    if (!budgetId) return;
+    api.get<SummaryDto>(`/api/budgets/${budgetId}/summary`).then(s => {
+      setSummary(s);
+      setTaxRateInput(String(Math.round(s.preTaxIncome.effectiveTaxRate * 100)));
+    });
+  }, [budgetId]);
+
+  const saveTaxRate = async () => {
+    if (!budgetId || !summary) return;
+    setSavingTax(true);
+    const rate = parseFloat(taxRateInput) / 100;
+    await api.put(`/api/budgets/${budgetId}/summary/tax-rate`, { effectiveTaxRate: rate });
+    const updated = await api.get<SummaryDto>(`/api/budgets/${budgetId}/summary`);
+    setSummary(updated);
+    setSavingTax(false);
+  };
+
+  if (!summary) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <BudgetNav />
+      <h1>Summary</h1>
+
+      <div style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}>
+        <div>
+          <div style={{ fontSize: '0.85rem', color: '#666' }}>Monthly Income</div>
+          <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>
+            <MoneyDisplay value={summary.monthlyIncome} />
+          </div>
+        </div>
+        <div>
+          <div style={{ fontSize: '0.85rem', color: '#666' }}>Annual Income</div>
+          <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>
+            <MoneyDisplay value={summary.annualIncome} />
+          </div>
+        </div>
+      </div>
+
+      <table>
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Monthly Total</th>
+            <th>Annual Total</th>
+            <th>% of Income</th>
+            <th>Max Amount (target%)</th>
+            <th>Remaining</th>
+          </tr>
+        </thead>
+        <tbody>
+          {summary.breakdown.map(row => (
+            <tr key={row.type}>
+              <td>
+                {row.type}
+                {row.targetPercent != null && (
+                  <span title={`Target: ${row.targetPercent}%`} style={{ marginLeft: '4px', cursor: 'help', color: '#888' }}>ⓘ</span>
+                )}
+              </td>
+              <td><MoneyDisplay value={row.total} /></td>
+              <td><MoneyDisplay value={row.annually} /></td>
+              <td>{row.percent.toFixed(1)}%</td>
+              <td>{row.maxAmount != null ? fmt.format(row.maxAmount) : '—'}</td>
+              <td>{row.remaining != null ? fmt.format(row.remaining) : '—'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <div style={{ marginTop: '2rem' }}>
+        <h2>Pre-Tax Income</h2>
+        <div>
+          <label>
+            Effective Tax Rate (%){' '}
+            <input
+              type="number"
+              min="0"
+              max="100"
+              value={taxRateInput}
+              onChange={e => setTaxRateInput(e.target.value)}
+              style={{ width: '60px' }}
+            />
+            <button onClick={saveTaxRate} disabled={savingTax} style={{ marginLeft: '8px' }}>
+              {savingTax ? 'Saving…' : 'Save'}
+            </button>
+          </label>
+        </div>
+        <div style={{ marginTop: '0.75rem' }}>
+          <div>Minimum Annual Gross: <strong><MoneyDisplay value={summary.preTaxIncome.minimumAnnualGross} /></strong></div>
+          <div>Minimum Monthly Gross: <strong><MoneyDisplay value={summary.preTaxIncome.minimumMonthlyGross} /></strong></div>
+        </div>
+      </div>
+    </div>
+  );
 }